alfonso
/
GEMCOFrontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Se agrego los archivos correspodientes para el nuevo componente FacturasFraccion

Browse Source
NewRptFraccionesNicosReferenciaFront
Luis Rendon 1 year ago
parent aa63b7d31e
commit 5f5dbae7a2
4 changed files with 346 additions and 8 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 301
      src/Components/Reportes/RptContsFacturasFraccion.tsx
  2. 16
      src/Interfaces/Reportes/IRptContsFacturasFraccion.ts
  3. 14
      src/Services/Reportes/reportes.services.ts
  4. 17
      src/index.tsx

301
src/Components/Reportes/RptContsFacturasFraccion.tsx
Unescape View File

@ -0,0 +1,301 @@
import React, { useEffect, useState } from 'react'
//boostrap componentes
import { Button, Card, Form } from 'react-bootstrap'
//interfaces
import { IRptFacturasFraccion } from '../../Interfaces/Reportes/IRptContsFacturasFraccion'
import reportsDataService from '../../Services/Reportes/reportes.services'
import { useDispatch } from 'react-redux'
// Gui Components
import { MsgInformativo } from '../Utils/Toast/msgInformativo'
import { TargetURL } from '../../Constants/TargetURL'
// import DataTable from 'react-data-table-component'
import DataTable, { TableColumn } from 'react-data-table-component'
//Other
import moment from 'moment'
import * as XLSX from 'xlsx'
import { string } from 'yup'
const URL = new TargetURL()
export default function RptPFacturasFraccion() {
const [curURL, setCurURL] = useState(URL.get())
const [UserId, setUserId] = useState(() => {
const stickyValue = window.localStorage.getItem('UserId')
return stickyValue !== null ? JSON.parse(stickyValue) : 0
})
const [Data, setData] = useState<Array<IRptFacturasFraccion>>([])
const [filteredData, setFilteredData] = useState<Array<IRptFacturasFraccion>>(
[]
)
const [msgColor, setMsgColor] = React.useState('primary')
const [show, setShowMsg] = useState(false)
const [header, setHeader] = useState('')
const [msg, setMsg] = useState('')
const [filtro, setFiltro] = useState('')
// const gridRef = React.useRef<any>(null)
const [referencia, setReferencia] = useState('')
const columnDefs = [
{
name: <div style={{ textAlign: 'center' }}>Factura</div>,
width: '220px',
selector: (row: IRptFacturasFraccion) => row.factura,
sortable: true,
filter: true,
center: true
},
{
name: <div style={{ textAlign: 'center' }}>Almacen</div>,
width: '100px',
selector: (row: IRptFacturasFraccion) => row.almacen,
sortable: true,
filter: true,
center: true
},
{
name: <div style={{ textAlign: 'center' }}>Orden</div>,
width: '100px',
selector: (row: IRptFacturasFraccion) => row.orden,
sortable: true,
filter: true,
center: true,
texAlign: 'center'
},
{
name: <div style={{ textAlign: 'center' }}>Parte</div>,
width: '150px',
selector: (row: IRptFacturasFraccion) => row.parte,
sortable: true,
filter: true,
center: true
},
{
name: <div style={{ textAlign: 'center' }}>Pais</div>,
width: '120px',
selector: (row: IRptFacturasFraccion) => row.pais,
sortable: true,
filter: true,
center: true
},
{
name: <div style={{ textAlign: 'center' }}>Fraccion Factura XML</div>,
width: '200px',
selector: (row: IRptFacturasFraccion) => row.fraccionFacturaXML,
sortable: true,
filter: true,
center: true
},
{
name: <div style={{ textAlign: 'center' }}>Fraccion GEMCO</div>,
width: '150px',
selector: (row: IRptFacturasFraccion) => row.fraccionGEMCO,
sortable: true,
filter: true,
center: true
},
{
name: <div style={{ textAlign: 'center' }}>Nico GEMCO</div>,
width: '120px',
selector: (row: IRptFacturasFraccion) => row.nicoGEMCO,
sortable: true,
filter: true,
center: true
}
]
function currentDate(): string {
var today = new Date()
var dd = String(today.getDate()).padStart(2, '0')
var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
var yyyy = today.getFullYear()
return yyyy + '-' + mm + '-' + dd
}
const closeToast = (show: boolean): void => {
setShowMsg(false)
}
const generaReporte = () => {
reportsDataService
.getRptContsFacturasFraccion(referencia) // Usa la variable 'referencia' en lugar de 'Referencia'
.then((response) => {
setData(response.data)
setFilteredData(response.data)
setHeader('Informativo')
setMsg('Se encontró la siguiente información...')
setShowMsg(true)
})
.catch((e: Error) => {
setHeader('Error')
setMsg('Ocurrió un error: ' + e.message)
setShowMsg(true)
return
})
}
const downloadExcel = () => {
console.log(Data)
exportExcel(Data, 'Facturas Fraccion')
}
function exportExcel(
jsonData: IRptFacturasFraccion[],
fileName: string
): void {
let Heading = [
[
'Factura',
'Almacen',
'Orden',
'Parte',
'Pais',
'Fraccion Factura XML',
'Fraccion GEMCO',
'Nico GEMCO'
]
]
/* jsonData.forEach(function (v) {
delete v.tipodeCambiodePedimento
}) */
/* jsonData.map(function (item) {
delete item.tipodeCambiodePedimento
return item
}) */
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) => {
const searchText = e.target.value.toLowerCase()
setFiltro(searchText)
const filtered = Data.filter((item) => {
return (
(item.factura && item.factura.toLowerCase().includes(searchText)) ||
(item.almacen && item.almacen.toLowerCase().includes(searchText)) ||
(item.orden && item.orden.toString().includes(searchText)) ||
(item.parte && item.parte.toLowerCase().includes(searchText)) ||
(item.pais && item.pais.toLowerCase().includes(searchText)) ||
(item.fraccionFacturaXML &&
item.fraccionFacturaXML.toLowerCase().includes(searchText)) ||
(item.fraccionGEMCO &&
item.fraccionGEMCO.toLowerCase().includes(searchText)) ||
(item.nicoGEMCO && String(item.nicoGEMCO).includes(searchText))
)
})
// console.log('Filtered Data:', filtered)
setFilteredData(filtered)
}
return (
<div>
<Card>
<Card.Body>
<div className="row">
<div className="col-md-1" style={{ textAlign: 'right' }}>
<Form.Label size="sm">Referencia</Form.Label>
</div>
<div className="col-md-1" style={{ width: '130px' }}>
<Form.Control
type="text"
size="sm"
value={referencia}
onChange={(e) => setReferencia(e.target.value)}
/>
</div>
<div className="col-md-1" style={{ width: '5px' }}></div>
<div className="col-md-4" style={{ width: '150px ' }}>
<Button
variant="primary"
size="sm"
onClick={() => {
generaReporte()
}}
>
Buscar
</Button>
</div>
<div className="col-md-1" style={{ width: '50px' }}></div>
<div className="col-md-4">
<Form.Control
type="text"
size="sm"
placeholder="Search..."
onChange={(e) => {
filtraReporte(e)
}}
/>
</div>
<div className="col-md-1" style={{ width: '260px' }}></div>
<div className="col-md-1">
<Button
size="sm"
variant="success"
onClick={() => {
downloadExcel()
}}
>
Excel
</Button>
</div>
</div>
</Card.Body>
</Card>
<Card>
<Card.Body>
<div
className="ag-theme-alpine"
style={{ height: 400, width: '100%', textAlign: 'center' }}
>
<DataTable
columns={columnDefs}
data={filteredData}
defaultSortAsc={true}
striped={true}
dense={true}
paginationPerPage={10}
pagination
highlightOnHover
pointerOnHover
style={{ height: 300, width: '100%', textAlign: 'center' }}
noHeader // Para evitar que se muestre el encabezado del DataTable
onRowClicked={(row) => {
// Aquí puedes manejar el clic en una fila si es necesario
}}
/>
</div>
</Card.Body>
</Card>
<MsgInformativo
show={show}
msg={msg}
header={header}
msgColor={msgColor}
closeToast={closeToast}
/>
</div>
)
}

16
src/Interfaces/Reportes/IRptContsFacturasFraccion.ts
Unescape View File

@ -0,0 +1,16 @@
export interface IRptFacturasFraccion{
factura : string,
almacen : string,
orden : number ;
parte : string,
pais : string ,
fraccionFacturaXML : string,
fraccionGEMCO : string,
nicoGEMCO : string;
}

14
src/Services/Reportes/reportes.services.ts
Unescape View File

@ -17,6 +17,8 @@ import IRptOperacionesDiarias from '../../Interfaces/Reportes/IRptOperacionesDia
import { IRptPedimentosPagadosFacturasCruzadas } from '../../Interfaces/Reportes/IRptPedimentosPagadosFacturasCruzadas'
import { IRptMonitoreoFacturaPagadasAmazon } from '../../Interfaces/Reportes/IRptMonitoreoFacturasPagadasAmazon'
import DTORPTMonitorFacturasPagAmazon from '../../DTO/Utils/DTORPTMonitorFacturasPagAmazon'
import { IRptFacturasFraccion } from '../../Interfaces/Reportes/IRptContsFacturasFraccion'
import { data } from 'cypress/types/jquery'
class reportsDataService {
getRptPedimentosPagados(data: DTOReporte) {
return http.post<Array<IRptPedimentosPagados>>(
@ -115,5 +117,17 @@ class reportsDataService {
)
}
getRptContsFacturasFraccion(Referencia: string)
{
return http.get<Array<IRptFacturasFraccion>>(
`/reportes/RptContsFacturasConFraccion?Referencia=${Referencia}`
);
}
}
export default new reportsDataService()

17
src/index.tsx
Unescape View File

@ -64,6 +64,7 @@ import RptSegregacion from './Components/Clientes/Amazon/Reportes/Segregacion/Rp
import RptConsultaTrafico from './Components/Clientes/Amazon/Reportes/ConsultaTrafico/RptConsultaTrafico'
import RptMonitoreoFacturasPagadasAmazon from './Components/Reportes/RptMonitoreoFacturasPagadasAmazon'
import CatFraccionesVulnerables from './Components/Catalogos/CatFraccionesVulnerables/CatFraccionesVulnerables'
import RptFacturasFraccion from './Components/Reportes/RptContsFacturasFraccion'
require(`./css/${process.env.REACT_APP_ENVIRONMENT}-home.css`)
@ -150,7 +151,10 @@ ReactDOM.render(
<Route path="/CatTabuladores" element={<CatTabuladores />} />
<Route path="/RptPedidos" element={<RptPedidos />} />
<Route path="/Rpt1868Facturas" element={<Rpt1868Facturas />} />
<Route path = "/CatFraccionesVulnerables" element={<CatFraccionesVulnerables /> } />
<Route
path="/CatFraccionesVulnerables"
element={<CatFraccionesVulnerables />}
/>
<Route
path="/Rpt1868Transportista"
element={<Rpt1868Transportista />}
@ -194,10 +198,7 @@ ReactDOM.render(
path="/RptAmazonFacturasPagadas"
element={<RptAmazonFacturasPagadas />}
/>
<Route
path="/RptSegregacion"
element={<RptSegregacion />}
/>
<Route path="/RptSegregacion" element={<RptSegregacion />} />
<Route
path="/RptCasaCuervoCOVEs"
element={<RptCasaCuervoCOVEs />}
@ -238,6 +239,12 @@ ReactDOM.render(
path="/RptPedimentosCruces06"
element={<RptPedimentosCruces06 />}
/>
<Route
path="/RptConsFacturasFraccion"
element={<RptFacturasFraccion />}
/>
<Route path="*" element={<PageNotFound />} />
</Route>
</Routes>

Write Preview
Loading…
Cancel
Save