Compare commits
5 Commits
f28d66a040
...
0ebe4efdbb
Author | SHA1 | Date |
---|---|---|
Felix Morales | 0ebe4efdbb | 5 months ago |
Felix Morales | df09d0aec5 | 5 months ago |
Felix Morales | 499d39839c | 5 months ago |
Felix Morales | 3e81191bfb | 5 months ago |
Felix Morales | 9d58d775d7 | 5 months ago |
@ -0,0 +1,195 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
// Bootstrap
|
||||||
|
import { Button, Col, Container, Modal, Row } from 'react-bootstrap' |
||||||
|
import { BsCloudDownload } from 'react-icons/bs' |
||||||
|
// Interfaces
|
||||||
|
import IArchivoElectronico from '../../../Interfaces/IArchivoElectronico' |
||||||
|
// DTOs
|
||||||
|
import DTOgetArchivosPorReferencia from '../../../DTO/DTOgetArchivosPorReferencia' |
||||||
|
// Redux
|
||||||
|
import { RootState } from '../../../store/store' |
||||||
|
import { useSelector } from 'react-redux' |
||||||
|
// Servicios
|
||||||
|
import AEOServices from '../../../Services/Catalogos/ArchivoElectronico.Services' |
||||||
|
import ArchivoElectronicoDataServices from '../../../Services/Catalogos/ArchivoElectronico.Services' |
||||||
|
// Otros
|
||||||
|
import { AgGridReact } from 'ag-grid-react' |
||||||
|
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
||||||
|
import { TargetURL } from '../../../Constants/TargetURL' |
||||||
|
import IFileManager from '../../../Interfaces/Utils/IFileManager' |
||||||
|
import FileManagerServices from '../../../Services/Utils/FileManager.Services' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { FaDownload } from 'react-icons/fa' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
showDialog: boolean |
||||||
|
header: string |
||||||
|
closeDialog: (arg: boolean) => void |
||||||
|
archivos: IFileManager[] |
||||||
|
} |
||||||
|
|
||||||
|
interface ListaArchivos { |
||||||
|
archivo: string |
||||||
|
} |
||||||
|
|
||||||
|
const URL = new TargetURL() |
||||||
|
|
||||||
|
export const DialogAE: FC<IProps> = (props) => { |
||||||
|
const [curURL, setCurURL] = useState(URL.get()) |
||||||
|
const Referencia = useSelector((state: RootState) => state.ArchivoElectronico.Referencia) |
||||||
|
const Pedimento = useSelector((state: RootState) => state.ArchivoElectronico.Pedimento) |
||||||
|
const NoCliente = useSelector((state: RootState) => state.ArchivoElectronico.NoCliente) |
||||||
|
const [filteredData, setFilteredData] = useState<IFileManager[]>([]) |
||||||
|
const [columnDefs] = useState([ |
||||||
|
{ |
||||||
|
field: 'nombreArchivo', |
||||||
|
cellRender: (params:any) => {return params.data.nombreArchivo}, |
||||||
|
width: 430, |
||||||
|
headerCheckboxSelection: false, |
||||||
|
headerCheckboxSelectionFilteredOnly: false, |
||||||
|
checkboxSelection: false, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
},{ |
||||||
|
field: 'Descargar', |
||||||
|
width: 100, |
||||||
|
cellRenderer: (params:any) => { |
||||||
|
return ( |
||||||
|
<div style={{textAlign:'center'}}> |
||||||
|
<IconContext.Provider value={{ color: 'blue', size: '25px' }}> |
||||||
|
<FaDownload onClick={() => {getFile(params.data)}} style={{cursor:'pointer'}}/> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
//return <Button variant='warning' onClick={() => {getFile(params.data)}}></Button>
|
||||||
|
}, |
||||||
|
} |
||||||
|
]) |
||||||
|
const gridRef = React.useRef<any>(null) |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
|
||||||
|
const viewFileContent = (fileName: string) => { |
||||||
|
window.open( |
||||||
|
`${curURL}/ArchivoElectronico/getFileContent?Referencia=${Referencia}&PedimentoLargo=dummy&NoCliente=${NoCliente}&IdUsuario=0&Archivo=${fileName}` |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setFilteredData(props.archivos) |
||||||
|
}, [props.archivos]) |
||||||
|
|
||||||
|
const getFile = (file: IFileManager) => { |
||||||
|
FileManagerServices.getFileContent(parseInt(file.tags), file.proceso).then((resp: any) => { |
||||||
|
const url = window.URL.createObjectURL(new Blob([resp.data])) |
||||||
|
const link = document.createElement('a') |
||||||
|
link.href = url |
||||||
|
link.setAttribute('download', file.nombreArchivo) |
||||||
|
document.body.appendChild(link) |
||||||
|
link.click() |
||||||
|
}).catch(() => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error durante la descarga, favor de intentar nuevamente') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const getFilesByReference = () => { |
||||||
|
let selectedNodes = gridRef.current.api.getSelectedNodes() |
||||||
|
let selectedData = selectedNodes.map((node: any) => node.data) |
||||||
|
const Archivos = selectedData.map((item: ListaArchivos) => item.archivo) |
||||||
|
const data: DTOgetArchivosPorReferencia = { |
||||||
|
Referencia: Referencia, |
||||||
|
PedimentoLargo: Pedimento, |
||||||
|
NoCliente: NoCliente, |
||||||
|
IdUsuario: 0, |
||||||
|
Archivo: 'dummy', |
||||||
|
Archivos: Archivos, |
||||||
|
} |
||||||
|
/* AEOServices.getTheseFilesByReferences(data) |
||||||
|
.then((response: any) => { |
||||||
|
const url = window.URL.createObjectURL(new Blob([response.data])) |
||||||
|
const link = document.createElement('a') |
||||||
|
link.href = url |
||||||
|
link.setAttribute('download', Referencia + '.zip') |
||||||
|
document.body.appendChild(link) |
||||||
|
link.click() |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) */ |
||||||
|
props.closeDialog(false) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
{' '} |
||||||
|
<Modal |
||||||
|
dialogClassName='modal-50w' |
||||||
|
show={props.showDialog} |
||||||
|
onHide={() => { |
||||||
|
props.closeDialog(false) |
||||||
|
}} |
||||||
|
centered |
||||||
|
> |
||||||
|
<Modal.Header closeButton> |
||||||
|
<Modal.Title>Referencia: {Referencia}</Modal.Title> |
||||||
|
</Modal.Header> |
||||||
|
<Modal.Body> |
||||||
|
{filteredData ? ( |
||||||
|
<div style={{ height: '350px', width: '100%' }} className='ag-theme-alpine'> |
||||||
|
<AgGridReact |
||||||
|
rowData={filteredData} |
||||||
|
columnDefs={columnDefs} |
||||||
|
pagination={true} |
||||||
|
paginationPageSize={50} |
||||||
|
ref={gridRef} |
||||||
|
/* rowSelection={'multiple'} |
||||||
|
rowMultiSelectWithClick={true} */ |
||||||
|
></AgGridReact> |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
'Sin archivos que mostrar' |
||||||
|
)} |
||||||
|
<MsgInformativo show={show} msg={msg} header={header} msgColor={msgColor} closeToast={() => setShowMsg(false)} /> |
||||||
|
</Modal.Body> |
||||||
|
{/* <Modal.Footer> |
||||||
|
<Container> |
||||||
|
<Row> |
||||||
|
<Col md={2}></Col> |
||||||
|
<Col md={4}> |
||||||
|
<Button |
||||||
|
variant='warning' |
||||||
|
size='sm' |
||||||
|
onClick={() => { |
||||||
|
getFilesByReference() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsCloudDownload /> Descargar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col md={3}></Col> |
||||||
|
<Col md={3}> |
||||||
|
<Button |
||||||
|
variant='primary' |
||||||
|
size='sm' |
||||||
|
onClick={() => { |
||||||
|
props.closeDialog(false) |
||||||
|
}} |
||||||
|
> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Container> |
||||||
|
</Modal.Footer> */} |
||||||
|
</Modal> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
@ -0,0 +1,41 @@ |
|||||||
|
import React, { FC, useState } from 'react' |
||||||
|
import { Button } from 'react-bootstrap' |
||||||
|
import { DialogAE } from '../ArchivoElectronico/DialogAE' |
||||||
|
import ArchivoElectronicoDataServices from '../../../Services/Catalogos/ArchivoElectronico.Services' |
||||||
|
import IFileManager from '../../../Interfaces/Utils/IFileManager'; |
||||||
|
import FileManagerServices from '../../../Services/Utils/FileManager.Services'; |
||||||
|
interface IProps { |
||||||
|
referencia: string; |
||||||
|
} |
||||||
|
|
||||||
|
export const VerDocumentos: FC<IProps> = (props) => { |
||||||
|
const [showDialog, setShowDialog] = useState(false) |
||||||
|
const [Archivos, setArchivos] = useState<IFileManager[]>([]); |
||||||
|
const showDocumentos = () => { |
||||||
|
FileManagerServices.getFileListByreferencia(props.referencia) |
||||||
|
.then((response) => { |
||||||
|
const filteredFileList = response.data.filter(x=> [2,10,11,12,13,14,15,19,17,18,37,38,39,41].includes(x.proceso)) |
||||||
|
setArchivos(filteredFileList) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
console.log(e) |
||||||
|
return |
||||||
|
}) |
||||||
|
setShowDialog(true) |
||||||
|
} |
||||||
|
|
||||||
|
const closeDialog = () => { |
||||||
|
setShowDialog(false) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<span> |
||||||
|
<Button onClick={() => showDocumentos()} variant='secondary'> |
||||||
|
ver Documentos |
||||||
|
</Button> |
||||||
|
</span> |
||||||
|
<DialogAE showDialog={showDialog} header={''} closeDialog={closeDialog} archivos={Archivos}/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
@ -0,0 +1,372 @@ |
|||||||
|
import React, { useEffect, useState } from "react" |
||||||
|
import { Button, Card, Col, Form, Modal, Row } from "react-bootstrap" |
||||||
|
import IClientes from "../../Interfaces/Catalogos/IClientes" |
||||||
|
import IRpArchivoElectronicoOficial from "../../Interfaces/Reportes/IRptArchivoElectronicoOficial" |
||||||
|
import { VerDocumentos } from "../Reportes/customCells/verDocumentos" |
||||||
|
import { MsgInformativo } from "../Utils/Toast/msgInformativo" |
||||||
|
import { AgGridReact } from "ag-grid-react" |
||||||
|
import { BsSearch, BsFileEarmarkExcel, BsCloudDownload } from "react-icons/bs" |
||||||
|
import { RowClickedEvent } from "ag-grid-community" |
||||||
|
import IArchivoElectronico from "../../Interfaces/IArchivoElectronico" |
||||||
|
import * as XLSX from 'xlsx' |
||||||
|
import DTOAEPeriodo from "../../DTO/DTOAEPeriodo" |
||||||
|
import ClientesServices from "../../Services/Catalogos/Clientes.Services" |
||||||
|
import reportesServices from "../../Services/Reportes/reportes.services" |
||||||
|
import loadingImg from '../../images/ajaxloader.gif' |
||||||
|
import ArchivoElectronicoServices from "../../Services/Catalogos/ArchivoElectronico.Services" |
||||||
|
|
||||||
|
export const ReporteArchivoElectronico:React.FC = () => { |
||||||
|
//const dispatch = useDispatch()
|
||||||
|
const [UserId, setUserId] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('UserId') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
||||||
|
}) |
||||||
|
const [Years, setYears] = useState(generateArrayOfYears()) |
||||||
|
const [Months, setMonths] = useState([ |
||||||
|
'Enero', |
||||||
|
'Febrero', |
||||||
|
'Marzo', |
||||||
|
'Abril', |
||||||
|
'Mayo', |
||||||
|
'Junio', |
||||||
|
'Julio', |
||||||
|
'Agosto', |
||||||
|
'Septiembre', |
||||||
|
'Octubre', |
||||||
|
'Noviembre', |
||||||
|
'Diciembre', |
||||||
|
]) |
||||||
|
const [Anio, setAnio] = useState(currentDate(1)) |
||||||
|
const [Mes, setMes] = useState(currentDate(2)) |
||||||
|
const [Clientes, setClientes] = useState<Array<IClientes>>() |
||||||
|
const [Data, setData] = useState<Array<IRpArchivoElectronicoOficial>>([]) |
||||||
|
const [filteredData, setFilteredData] = useState<Array<IRpArchivoElectronicoOficial>>([]) |
||||||
|
const [TipoOperacion, setTipoOperacion] = useState(0) |
||||||
|
const [Cliente, setCliente] = useState(0) |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [filtro, setFiltro] = useState('') |
||||||
|
const [showDialog, setShowDialog] = useState(false) |
||||||
|
const gridRef = React.useRef<any>(null) |
||||||
|
const [columnDefs] = useState([ |
||||||
|
{ |
||||||
|
field: 'referencia', |
||||||
|
headerCheckboxSelection: true, |
||||||
|
headerCheckboxSelectionFilteredOnly: true, |
||||||
|
checkboxSelection: true, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
}, |
||||||
|
{ field: 'ver documentos', sortable: true, cellRenderer: (params: any) => {return <VerDocumentos referencia={params.data.referencia}/>} }, |
||||||
|
{ field: 'aduana', sortable: true, filter: true }, |
||||||
|
{ field: 'patente', sortable: true, filter: true }, |
||||||
|
{ field: 'pedimento', sortable: true, filter: true }, |
||||||
|
{ field: 'fechaPago', sortable: true, filter: true }, |
||||||
|
]) |
||||||
|
|
||||||
|
const handleClose = () => setShowDialog(false) |
||||||
|
|
||||||
|
function generateArrayOfYears() { |
||||||
|
var max = new Date().getFullYear() |
||||||
|
var min = 2020 |
||||||
|
var years = [] |
||||||
|
for (var i = max; i >= min; i--) { |
||||||
|
years.push(i) |
||||||
|
} |
||||||
|
return years |
||||||
|
} |
||||||
|
|
||||||
|
function currentDate(mode: number): number { |
||||||
|
var today = new Date() |
||||||
|
var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
|
||||||
|
var yyyy = today.getFullYear() |
||||||
|
return mode === 1 ? yyyy : parseInt(mm) |
||||||
|
} |
||||||
|
|
||||||
|
const generaReporte = () => { |
||||||
|
if(Anio === 0){ |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Especifique el año de búsqueda.') |
||||||
|
setShowMsg(true) |
||||||
|
return; |
||||||
|
} |
||||||
|
if(Mes === 0){ |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Especifique el mes de búsqueda.') |
||||||
|
setShowMsg(true) |
||||||
|
return; |
||||||
|
} |
||||||
|
if(Cliente===0 && Clientes!.length > 1){ |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Seleccione una razón social') |
||||||
|
setShowMsg(true) |
||||||
|
return; |
||||||
|
} |
||||||
|
const data: DTOAEPeriodo = { |
||||||
|
Anio: Anio, |
||||||
|
Mes: Mes, |
||||||
|
TipoOperacion: TipoOperacion, |
||||||
|
NoCliente: Cliente, |
||||||
|
} |
||||||
|
console.log(JSON.stringify(data)) |
||||||
|
reportesServices |
||||||
|
.getRptArchivoElectronicoOficial(data) |
||||||
|
.then((response) => { |
||||||
|
setData(response.data) |
||||||
|
setFilteredData(response.data) |
||||||
|
console.log(response.data) |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg('Se encontro la siguiente informacion...') |
||||||
|
setShowMsg(true) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const downloadExcel = () => { |
||||||
|
exportExcel(Data, 'Reporte archivo electronico oficial') |
||||||
|
} |
||||||
|
|
||||||
|
function exportExcel(jsonData: any[], fileName: string): void { |
||||||
|
let Heading = [['Referencia', 'Aduana', 'Patente', 'Pedimento', 'Fecha pago']] |
||||||
|
const wb = XLSX.utils.book_new() |
||||||
|
const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet([]) |
||||||
|
XLSX.utils.sheet_add_aoa(ws, Heading) |
||||||
|
XLSX.utils.sheet_add_json(ws, jsonData, { origin: 'A2', skipHeader: true }) |
||||||
|
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1') |
||||||
|
XLSX.writeFile(wb, fileName + '.xlsx') |
||||||
|
var range = XLSX.utils.decode_range(ws['!ref?']) |
||||||
|
for (var C = range.s.c; C <= range.e.c; ++C) { |
||||||
|
var address = XLSX.utils.encode_col(C) + '1' // <-- first row, column number C
|
||||||
|
if (!ws[address]) continue |
||||||
|
ws[address].v = ws[address].v.toUpperCase() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const filtraReporte = (e: any) => { |
||||||
|
setFiltro(e.target.value) |
||||||
|
gridRef.current.api.setQuickFilter(e.target.value) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
ClientesServices.getAllClientes(parseInt(UserId)) |
||||||
|
.then((response) => { |
||||||
|
setClientes(response.data) |
||||||
|
if(response.data.length === 1) |
||||||
|
setCliente(response.data[0].sClave) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
console.log(e) |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
}, []) |
||||||
|
|
||||||
|
/* function getParams(e: RowClickedEvent) { |
||||||
|
const data: IArchivoElectronico = { |
||||||
|
Referencia: e.data.referencia, |
||||||
|
PedimentoLargo: |
||||||
|
Anio.toString().substring(2, 2) + |
||||||
|
' ' + |
||||||
|
e.data.aduana.toString().substring(0, 2) + |
||||||
|
' ' + |
||||||
|
e.data.patente.toString() + |
||||||
|
' ' + |
||||||
|
e.data.pedimento.toString(), |
||||||
|
NoCliente: Cliente, |
||||||
|
IdUsuario: 0, |
||||||
|
Archivo: '', |
||||||
|
} |
||||||
|
console.log('.......................................................' + data) |
||||||
|
//dispatch(setArchivoElectronico(data))
|
||||||
|
} */ |
||||||
|
|
||||||
|
const downloadReferences = () => { |
||||||
|
setShowDialog(true) |
||||||
|
if (Cliente === 0) { |
||||||
|
setMsg('Seleccione el cliente') |
||||||
|
setHeader('Para poder continuar, favor de: ') |
||||||
|
setShowMsg(true) |
||||||
|
} |
||||||
|
let selectedNodes = gridRef.current.api.getSelectedNodes() |
||||||
|
let selectedData = selectedNodes.map((node: any) => node.data) |
||||||
|
const Referencias = selectedData.map((item: IRpArchivoElectronicoOficial) => item.referencia) |
||||||
|
const data = { |
||||||
|
Anio: Anio, |
||||||
|
Mes: Mes, |
||||||
|
NoCliente: Cliente, |
||||||
|
TipoOperacion: TipoOperacion, |
||||||
|
Referencias: Referencias, |
||||||
|
} |
||||||
|
console.log(data) |
||||||
|
ArchivoElectronicoServices.getZippedReferences(data) |
||||||
|
.then((response: any) => { |
||||||
|
const url = window.URL.createObjectURL(response.data) |
||||||
|
const link = document.createElement('a') |
||||||
|
link.href = url |
||||||
|
link.setAttribute('download', 'Archivo Electronico Oficial.zip') |
||||||
|
document.body.appendChild(link) |
||||||
|
link.click() |
||||||
|
setShowDialog(false) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
console.log(e) |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<div className='row'> |
||||||
|
<div className='col-md-1'></div> |
||||||
|
<div className='col-md-1'> |
||||||
|
<Form.Select |
||||||
|
aria-label='Año' |
||||||
|
onChange={(e) => setAnio(parseInt(e.target.value))} |
||||||
|
size='sm' |
||||||
|
defaultValue={Anio} |
||||||
|
> |
||||||
|
{Years.map((x, i) => ( |
||||||
|
<option value={x}>{x}</option> |
||||||
|
))} |
||||||
|
</Form.Select> |
||||||
|
</div> |
||||||
|
<div className='col-md-1'> |
||||||
|
<Form.Select |
||||||
|
aria-label='Mes' |
||||||
|
onChange={(e) => setMes(parseInt(e.target.value))} |
||||||
|
size='sm' |
||||||
|
defaultValue={Mes} |
||||||
|
> |
||||||
|
<option value='0'>Mes</option> |
||||||
|
{Months.map((x, i) => ( |
||||||
|
<option value={i + 1}>{x}</option> |
||||||
|
))} |
||||||
|
</Form.Select> |
||||||
|
</div> |
||||||
|
<div className='col-md-1 right-label'> |
||||||
|
<Form.Label>Tipo oper</Form.Label> |
||||||
|
</div> |
||||||
|
<div className='col-md-1'> |
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
onChange={(e) => setTipoOperacion(parseInt(e.target.value))} |
||||||
|
className='form-select form-select-sm' |
||||||
|
> |
||||||
|
<option value='0'>- Seleccione -</option> |
||||||
|
<option value='1'>Importacion</option> |
||||||
|
<option value='2'>Exportacion</option> |
||||||
|
</Form.Control> |
||||||
|
</div> |
||||||
|
<div className='col-md-1 right-label'> |
||||||
|
<Form.Label>Cliente</Form.Label> |
||||||
|
</div> |
||||||
|
<div className='col-md-4 form-group'> |
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
onChange={(e) => { |
||||||
|
setCliente(parseInt(e.target.value)) |
||||||
|
}} |
||||||
|
className='form-select form-select-sm' |
||||||
|
value={Cliente} |
||||||
|
> |
||||||
|
<option value='0'>-SELECCIONE-</option> |
||||||
|
{Clientes |
||||||
|
? Clientes.map((c) => { |
||||||
|
return c.agrupado === 1 ? <option value={c.sClave}>{c.sRazonSocial}</option> : '' |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</Form.Control> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className='col-md-1 right-label'> |
||||||
|
<Button |
||||||
|
variant='primary' |
||||||
|
size='sm' |
||||||
|
onClick={() => { |
||||||
|
generaReporte() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsSearch /> |
||||||
|
Buscar |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className='row' style={{ paddingTop: 5 }}> |
||||||
|
<div className='col'> </div> |
||||||
|
<div className='col-4'> |
||||||
|
<Form.Control |
||||||
|
type='text' |
||||||
|
placeholder='Search...' |
||||||
|
size='sm' |
||||||
|
onChange={(e) => { |
||||||
|
filtraReporte(e) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className='col'> |
||||||
|
<Button |
||||||
|
size='sm' |
||||||
|
variant='success' |
||||||
|
onClick={() => { |
||||||
|
downloadExcel() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsFileEarmarkExcel /> |
||||||
|
Excel |
||||||
|
</Button> |
||||||
|
|
||||||
|
<Button |
||||||
|
variant='danger' |
||||||
|
size='sm' |
||||||
|
onClick={() => { |
||||||
|
downloadReferences() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsCloudDownload /> |
||||||
|
Descarga |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<br /> |
||||||
|
<div className='ag-theme-alpine' style={{ height: 500, width: '100%' }}> |
||||||
|
<AgGridReact |
||||||
|
rowData={filteredData} |
||||||
|
columnDefs={columnDefs} |
||||||
|
pagination={true} |
||||||
|
paginationAutoPageSize={true} |
||||||
|
ref={gridRef} |
||||||
|
rowSelection={'multiple'} |
||||||
|
rowMultiSelectWithClick={true} |
||||||
|
onRowClicked={(e) => {/* getParams(e) */}} |
||||||
|
></AgGridReact> |
||||||
|
</div> |
||||||
|
<MsgInformativo show={show} msg={msg} header={header} msgColor={msgColor} closeToast={() => setShowMsg(false)} /> |
||||||
|
<Modal show={showDialog} onHide={handleClose} backdrop='static' keyboard={false} size='sm' centered> |
||||||
|
<Modal.Header closeButton> |
||||||
|
<Modal.Title></Modal.Title> |
||||||
|
</Modal.Header> |
||||||
|
<Modal.Body> |
||||||
|
<img src={loadingImg} style={{ width: '50%', height: '50%' }} alt='proccessing' /> |
||||||
|
Espere, por favor... |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer></Modal.Footer> |
||||||
|
</Modal> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
Loading…
Reference in new issue