commit
499d39839c
@ -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/> |
||||
</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' |
||||
)} |
||||
</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> |
||||
<MsgInformativo show={show} msg={msg} header={header} msgColor={msgColor} closeToast={() => setShowMsg(false)} /> |
||||
</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