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