parent
9efbbed167
commit
14655e45d0
@ -0,0 +1,203 @@ |
||||
import React, {FC, useRef, useState} from "react"; |
||||
import { Button, Card, Col, Form, Row } from "react-bootstrap"; |
||||
import { MdCloudDownload, MdCloudUpload, MdDelete, MdDeleteForever } from "react-icons/md"; |
||||
import * as XLSX from 'xlsx' |
||||
import CTrafDataService from '../../Services/Corresponsalias/Corresponsales.Trafico.Services' |
||||
import { MsgInformativo } from "../Utils/Toast/msgInformativo"; |
||||
import { FaRegFileExcel } from "react-icons/fa"; |
||||
import IReporteSemanalNewell from "../../Interfaces/ReportesClientes/IReporteSemanalNewell"; |
||||
|
||||
export const ReporteSemanalNewell: React.FC<{}> = () => { |
||||
|
||||
const [Inicio, setInicio] = useState(currentDate(-7)) |
||||
const [Fin, setFin] = useState(currentDate(0)) |
||||
const hiddenFileInputRef = useRef<HTMLInputElement>(null); |
||||
const [show, setShowMsg] = useState(false) |
||||
const [header, setHeader] = useState('') |
||||
const [msg, setMsg] = useState('') |
||||
const [msgColor, setMsgColor] = useState('primary') |
||||
const [File, setFile] = useState<File | null>(); |
||||
|
||||
function currentDate(days: number): string { |
||||
var today = new Date() |
||||
today.setDate(today.getDate() + days) |
||||
var dd = String(today.getDate()).padStart(2, '0') |
||||
var mm = String(today.getMonth() + 1).padStart(2, '0') |
||||
var yyyy = today.getFullYear() |
||||
return yyyy + '-' + mm + '-' + dd |
||||
} |
||||
|
||||
const readFile = () => { |
||||
if (!File) return; |
||||
|
||||
var ext = File!.name.substr(File!.name.lastIndexOf('.') + 1) |
||||
|
||||
if (!(ext === 'xls') && !(ext === 'xlsx')) { |
||||
setHeader('Error') |
||||
setMsg('Seleccione un archivo valido.') |
||||
setShowMsg(true) |
||||
return; |
||||
} |
||||
|
||||
const fileReader = new FileReader(); |
||||
fileReader.readAsArrayBuffer(File); |
||||
|
||||
fileReader.onload = async (e: any) => { |
||||
let encabezadosTemp = [//Se crean los encabezados temporales que se usaran mas adelante.
|
||||
[ |
||||
'aduana','patente','pedimento','fechaDeEntrada', 'fechaDePago', |
||||
'valorComercialMxn','valorComercialDlls','valorAduana','clave','iva', |
||||
'dta','prv','lgi','factura','tc','proveedor','taxId','producto', |
||||
'gc', 'contenedor', 'cuentaDeGastos', 'razon', 'maniobras' |
||||
] |
||||
]
|
||||
const bufferArray = e?.target.result |
||||
const oldWorkBook = XLSX.read(bufferArray, { type: "buffer" })//Se lee el archivo
|
||||
const oldWorkSheetName = oldWorkBook.SheetNames[0]//se toma el nombre de la primer hoja del archivo
|
||||
const oldWorkSheet = oldWorkBook.Sheets[oldWorkSheetName]//Se crea una referencia a la misma hoja
|
||||
XLSX.utils.sheet_add_aoa(oldWorkSheet,encabezadosTemp,{origin:'A1'});//Se cambian los encabezados originales por los temporales para que las columnas coincidan con las propiedades del dto IReporteSemanalNewell
|
||||
const rows = XLSX.utils.sheet_to_json<IReporteSemanalNewell>(oldWorkSheet)//aqui es donde los renglones pasan a ser un array de objetos
|
||||
//Se obtienen los datos faltantes del reporte
|
||||
let newWorkBookData = await getDataByPedimento(rows); |
||||
await exportReporteSemanal(newWorkBookData); |
||||
} |
||||
} |
||||
|
||||
const getDataByPedimento = async (rows: IReporteSemanalNewell[]) => { |
||||
let data = [...rows]; |
||||
data=[]; |
||||
await Promise.all( |
||||
rows.map( async (row) => { |
||||
await CTrafDataService.GetByPedimento(row.pedimento).then((response) => { |
||||
row.gc = response.data.gc; |
||||
row.contenedor = response.data.contenedor; |
||||
row.cuentaDeGastos = response.data.cuentaDeGastos; |
||||
row.razon = response.data.razon; |
||||
row.maniobras = response.data.maniobras; |
||||
}) |
||||
data.push(row); |
||||
}) |
||||
) |
||||
data = data.sort((a,b) => { |
||||
return +a.aduana - +b.aduana || +a.pedimento - +b.pedimento |
||||
}) |
||||
return data; |
||||
} |
||||
|
||||
const exportReporteSemanal = async (jsonData: any[]) => { |
||||
let encabezados = [ |
||||
[ |
||||
'Aduana','Patente','Pedimento','Fecha de Entrada', 'Fecha de Pago', |
||||
'Valor Comercial Mxn','Valor Comercial Dlls','Valor Aduana','Clave','Iva', |
||||
'Dta','Prv','lgi','Factura','TC.','Proveedor','Tax Id','Producto', |
||||
'GC', 'Contenedor', 'Cuenta de Gastos', 'Razon', 'Maniobras' |
||||
] |
||||
] |
||||
const newWorkBook = XLSX.utils.book_new() |
||||
const newWorkBookSheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet([]) |
||||
XLSX.utils.sheet_add_aoa(newWorkBookSheet, encabezados,{origin:'A1'}) |
||||
XLSX.utils.sheet_add_json(newWorkBookSheet, jsonData, { origin: 'A2', skipHeader: true }) |
||||
XLSX.utils.book_append_sheet(newWorkBook, newWorkBookSheet, 'Sheet1') |
||||
XLSX.writeFile(newWorkBook, `Reporte_Semanal-${Inicio}_${Fin}.xlsx`); |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<Row style={{paddingTop:'7rem'}}></Row> |
||||
<Row> |
||||
<Col xs={4}></Col> |
||||
<Col xs={4}> |
||||
<Card style={{width:'100%'}}> |
||||
<Card.Header><h4>Reporte Semanal Newell</h4></Card.Header> |
||||
<Card.Body> |
||||
<Row> |
||||
<Col xs={6}> |
||||
<Form.Label style={{width:'100%'}}> |
||||
Inicio
|
||||
<Form.Control |
||||
defaultValue={Inicio} |
||||
type='date' |
||||
name='Inicio' |
||||
placeholder='Inicio' |
||||
title='Inicio' |
||||
alt='Inicio' |
||||
data-date-format='YYYY-mm-dd' |
||||
onChange={(e) => setInicio(e.target.value)} |
||||
size='sm' |
||||
/> |
||||
</Form.Label> |
||||
</Col> |
||||
<Col xs={6}> |
||||
<Form.Label style={{width:'100%'}}> |
||||
Fin |
||||
<Form.Control |
||||
defaultValue={Fin} |
||||
type='date' |
||||
name='Fin' |
||||
placeholder='Fin' |
||||
title='Fin' |
||||
alt='Fin' |
||||
onChange={(e) => setFin(e.target.value)} |
||||
size='sm' |
||||
/> |
||||
</Form.Label> |
||||
</Col> |
||||
</Row> |
||||
<br/> |
||||
<Row style={{justifyContent:'center', alignItems:'center', padding:'0px 20px 0px 20px'}}> |
||||
<form
|
||||
style={{ |
||||
display: 'flex', flexDirection:'column', justifyContent:'center', |
||||
alignItems:'center', border: '2px dashed #1475cf', borderRadius:'5px', |
||||
height: '300px', width:'500px', cursor: 'pointer', |
||||
}} |
||||
onClick={() => {hiddenFileInputRef.current?.click()}} |
||||
> |
||||
<input type="file" ref={hiddenFileInputRef} style={{display:'none'}} |
||||
onChange={(e:any) => { |
||||
setFile(e.target.files[0]); |
||||
}} |
||||
/> |
||||
|
||||
{ |
||||
!File ? <> |
||||
<MdCloudUpload style={{fontSize:'60px', color:'#1475cf'}}/> |
||||
<span style={{display:'block', paddingTop:'10px'}}>Seleccione un archivo...</span> |
||||
</> |
||||
: <> |
||||
<FaRegFileExcel style={{fontSize:'60px', color:'#17d149'}}/> |
||||
<span style={{display:'block', paddingTop:'10px'}}>{File!.name}</span> |
||||
</> |
||||
} |
||||
</form> |
||||
</Row> |
||||
</Card.Body> |
||||
<Card.Footer style={{textAlign:'end'}}> |
||||
<Button variant="danger" onClick={() => { |
||||
if(hiddenFileInputRef.current !== null ) { |
||||
hiddenFileInputRef.current.value = ""; |
||||
setFile(null); |
||||
} |
||||
}} title="Quitar archivo cargado" style={{marginRight:'10px'}}> |
||||
Borrar <MdDeleteForever style={{marginLeft:'5px', fontSize:'20px'}}/> |
||||
</Button> |
||||
<Button className="primary" onClick={readFile} title="Descargar reporte"> |
||||
Generar <MdCloudDownload style={{marginLeft:'5px'}}/> |
||||
</Button> |
||||
</Card.Footer> |
||||
</Card> |
||||
</Col> |
||||
<Col xs={4}></Col> |
||||
</Row> |
||||
<MsgInformativo |
||||
show={show} |
||||
msg={msg} |
||||
header={header} |
||||
msgColor={msgColor} |
||||
closeToast={() => { |
||||
setShowMsg(false) |
||||
}} |
||||
/> |
||||
</> |
||||
) |
||||
} |
@ -0,0 +1,6 @@ |
||||
export default interface IReporteSemanalNewell{ |
||||
aduana: number; patente: number; pedimento: number; fechaDeEntrada: string|Date; fechaDePago: string|Date; |
||||
valorComercialMxn: number; valorComercialDlls: number; valorAduana: number; clave: string; iva: number; |
||||
dta: number; prv: number; lgi: number; factura: string; tc: number; proveedor: string; taxId: number; producto: string; |
||||
gc:number; contenedor: string; cuentaDeGastos: string; razon: string; maniobras: number; |
||||
} |
Loading…
Reference in new issue