parent
40aaecb332
commit
ef76e781f8
File diff suppressed because it is too large
Load Diff
@ -1,614 +0,0 @@ |
|||||||
import React, { FC, useEffect, useState } from 'react' |
|
||||||
import { Alert, Button, Col, Container, Form, Modal, Row } from 'react-bootstrap' |
|
||||||
import { IconContext } from 'react-icons' |
|
||||||
import { |
|
||||||
BsCash, |
|
||||||
BsCheckCircle, |
|
||||||
BsCheckCircleFill, |
|
||||||
BsEraserFill, |
|
||||||
BsFileEarmarkPdf, |
|
||||||
BsFillXCircleFill, |
|
||||||
BsPencilFill, |
|
||||||
BsQuestionOctagonFill, |
|
||||||
} from 'react-icons/bs' |
|
||||||
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
|
||||||
import 'react-flexy-table/dist/index.css' |
|
||||||
import DTOItems from '../../../DTO/Corresponsales/DTOItems' |
|
||||||
import CAnticiposDataService from '../../../Services/Corresponsalias/Corresponsales.Anticipos.Services' |
|
||||||
|
|
||||||
import { |
|
||||||
populateCorresponsalesAnticipos, |
|
||||||
addCorresponsalesAnticipos, |
|
||||||
deleteCorresponsalesAnticipos, |
|
||||||
updateCorresponsalesAnticipos, |
|
||||||
} from '../../../store/features/Corresponsales/CorresponsalesAnticiposSlice' |
|
||||||
import ICorresponsalAnticipos from '../../../Interfaces/Corresponsales/ICorresponsalAnticipos' |
|
||||||
import { useDispatch, useSelector } from 'react-redux' |
|
||||||
import { RootState } from '../../../store/store' |
|
||||||
import { AgGridReact } from 'ag-grid-react' |
|
||||||
import { RowClickedEvent } from 'ag-grid-community' |
|
||||||
import { BiCoinStack } from 'react-icons/bi' |
|
||||||
import * as CurrencyFormat from 'react-currency-format' |
|
||||||
import FileManager from '../../Utils/FileManager/FileManager' |
|
||||||
import DTOAnticiposAutoriza from '../../../DTO/Corresponsales/DTOAnticiposAutoriza' |
|
||||||
|
|
||||||
interface ItemList { |
|
||||||
id: number |
|
||||||
item: string |
|
||||||
} |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
IDTrafico: number |
|
||||||
closeCRUDItems: (arg: boolean) => void |
|
||||||
canDelete: boolean |
|
||||||
} |
|
||||||
|
|
||||||
export const Anticipos: FC<IProps> = (props) => { |
|
||||||
const [UserId, setUserId] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('UserId') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
|
||||||
}) |
|
||||||
const [Depto, setDept] = useState(() => { |
|
||||||
const Depto = window.localStorage.getItem('Departamento') |
|
||||||
return Depto !== null ? JSON.parse(Depto) : '' |
|
||||||
}) |
|
||||||
const mCAnticipos = useSelector((state: RootState) => state.CAnticipos.CorresponsalesAnticipos) |
|
||||||
const [allItems, setAllItems] = useState<DTOItems[]>([]) |
|
||||||
const [filteredData, setFilteredData] = useState<ICorresponsalAnticipos[]>([]) |
|
||||||
const [IdAnticipo, setIdAnticipo] = useState(0) |
|
||||||
const [Anticipo, setAnticipo] = useState(0) |
|
||||||
const [Moneda, setMoneda] = useState(2) |
|
||||||
const [Financiado, setFinanciado] = useState(0) |
|
||||||
const [Concepto, setConcepto] = useState('') |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msgColor, setMsgColor] = React.useState('primary') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [msgDialog, setMsgDialog] = useState(false) |
|
||||||
const [MsgDialogFileManager, setMsgDialogFileManager] = useState(false) |
|
||||||
const [msgDialogFileManagerConta, setMsgDialogFileManagerConta] = useState(false) |
|
||||||
const gridRef = React.useRef<any>(null) |
|
||||||
const [deleteFile, setDeleteFile] = useState(false) |
|
||||||
const [columnDefs] = useState([ |
|
||||||
Depto === 'Corresponsalias' |
|
||||||
? { |
|
||||||
field: 'id', |
|
||||||
headerName: 'Acciones', |
|
||||||
width: 110, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<IconContext.Provider value={{ color: 'blue', size: '18px' }}> |
|
||||||
<BsPencilFill |
|
||||||
onClick={() => { |
|
||||||
loadRow(params.data.id) |
|
||||||
}} |
|
||||||
style={{ cursor: 'pointer' }} |
|
||||||
/> |
|
||||||
</IconContext.Provider> |
|
||||||
|
|
||||||
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
|
||||||
<BsFileEarmarkPdf |
|
||||||
onClick={() => { |
|
||||||
viewDoc(params.value) |
|
||||||
//getFileContent(params.value)
|
|
||||||
}} |
|
||||||
style={{ cursor: 'pointer' }} |
|
||||||
/> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) |
|
||||||
}, |
|
||||||
} |
|
||||||
: { |
|
||||||
field: 'id', |
|
||||||
headerName: 'id', |
|
||||||
width: 60, |
|
||||||
sortable: false, |
|
||||||
filter: false, |
|
||||||
visible: false, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'anticipo', |
|
||||||
headerName: 'Anticipo', |
|
||||||
width: 120, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
return ( |
|
||||||
<CurrencyFormat |
|
||||||
value={params.value} |
|
||||||
displayType={'text'} |
|
||||||
thousandSeparator={true} |
|
||||||
prefix={'$'} |
|
||||||
decimalScale={2} |
|
||||||
fixedDecimalScale={true} |
|
||||||
/> |
|
||||||
) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'moneda', |
|
||||||
headerName: 'Moneda', |
|
||||||
width: 105, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
if (params.value === 1) { |
|
||||||
return ( |
|
||||||
<IconContext.Provider value={{ color: '#E5E041', size: '18px' }}> |
|
||||||
<BiCoinStack /> Pesos |
|
||||||
</IconContext.Provider> |
|
||||||
) |
|
||||||
} else if (params.value === 2) { |
|
||||||
return ( |
|
||||||
<IconContext.Provider value={{ color: 'green', size: '18px' }}> |
|
||||||
<BsCash /> Dollar |
|
||||||
</IconContext.Provider> |
|
||||||
) |
|
||||||
} else return '?' |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'financiado', |
|
||||||
headerName: '¿Financiado?', |
|
||||||
width: 135, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
if (params.value === 1) |
|
||||||
return ( |
|
||||||
<div style={{ paddingLeft: '30px' }}> |
|
||||||
<IconContext.Provider value={{ color: 'green', size: '20px' }}> |
|
||||||
<BsCheckCircleFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) |
|
||||||
else |
|
||||||
return ( |
|
||||||
<div style={{ paddingLeft: '30px' }}> |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
|
||||||
<BsFillXCircleFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'id', |
|
||||||
headerName: 'Autorizado', |
|
||||||
width: 130, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
if (params.data.autoriza === 0) |
|
||||||
return ( |
|
||||||
<div style={{ paddingLeft: '30px' }}> |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '18px' }}> |
|
||||||
<BsQuestionOctagonFill |
|
||||||
onClick={() => { |
|
||||||
return Depto === 'Contabilidad' ? viewDocConta(params.value) : '#' |
|
||||||
}} |
|
||||||
style={{ cursor: 'pointer' }} |
|
||||||
/> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) |
|
||||||
else |
|
||||||
return ( |
|
||||||
<div style={{ paddingLeft: '30px' }}> |
|
||||||
<IconContext.Provider value={{ color: 'green', size: '18px' }}> |
|
||||||
<BsCheckCircleFill |
|
||||||
onClick={() => { |
|
||||||
viewDocConta(params.value) |
|
||||||
}} |
|
||||||
style={{ cursor: 'pointer' }} |
|
||||||
/> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ field: 'concepto', headerName: 'Concepto', width: 350, sortable: true, filter: true }, |
|
||||||
{ field: 'sSolicita', headerName: 'Solicita', width: 150, sortable: true, filter: true }, |
|
||||||
{ |
|
||||||
field: 'fhSolicita', |
|
||||||
headerName: 'Fecha solicitud', |
|
||||||
width: 200, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
if (params.value !== null) { |
|
||||||
return params.value.substring(0, 16) |
|
||||||
} |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ field: 'sAutoriza', headerName: 'Authoriza', width: 150, sortable: true, filter: true }, |
|
||||||
{ field: 'fhAutoriza', headerName: 'Fecha autorizacion', width: 200, sortable: true, filter: true }, |
|
||||||
]) |
|
||||||
const dispatch = useDispatch() |
|
||||||
|
|
||||||
const cleanForm = () => { |
|
||||||
setIdAnticipo(0) |
|
||||||
setAnticipo(0) |
|
||||||
setMoneda(2) |
|
||||||
setConcepto('') |
|
||||||
} |
|
||||||
|
|
||||||
const saveForm = () => { |
|
||||||
if (Concepto.length < 5) { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Para poder guardar la informacion, proporcione el concepto') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
if (Anticipo === 0) { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Para poder guardar la informacion, proporcione el monto del anticipo') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
const data: ICorresponsalAnticipos = { |
|
||||||
id: IdAnticipo, |
|
||||||
idTrafico: props.IDTrafico, |
|
||||||
anticipo: Anticipo, |
|
||||||
moneda: Moneda, |
|
||||||
concepto: Concepto, |
|
||||||
solicita: UserId, |
|
||||||
fhSolicita: '', |
|
||||||
financiado: Financiado, |
|
||||||
} |
|
||||||
CAnticiposDataService.Append(data) |
|
||||||
.then((response) => { |
|
||||||
if (response.status === 200) { |
|
||||||
setHeader('Informativo') |
|
||||||
setMsg('La informcion se guardo correctamente') |
|
||||||
setShowMsg(true) |
|
||||||
if (IdAnticipo === 0) dispatch(addCorresponsalesAnticipos(response.data)) |
|
||||||
else dispatch(updateCorresponsalesAnticipos(response.data)) |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const loadRow = (idRow: number) => { |
|
||||||
var tmpArray = mCAnticipos.filter(function (item) { |
|
||||||
return item.id === idRow |
|
||||||
}) |
|
||||||
setIdAnticipo(tmpArray[0].id) |
|
||||||
setAnticipo(tmpArray[0].anticipo) |
|
||||||
setConcepto(tmpArray[0].concepto) |
|
||||||
setMoneda(tmpArray[0].moneda) |
|
||||||
} |
|
||||||
|
|
||||||
const viewDoc = (idRow: number) => { |
|
||||||
loadRow(idRow) |
|
||||||
setMsgDialogFileManager(true) |
|
||||||
} |
|
||||||
|
|
||||||
const viewDocConta = (idRow: number) => { |
|
||||||
loadRow(idRow) |
|
||||||
setMsgDialogFileManagerConta(true) |
|
||||||
} |
|
||||||
|
|
||||||
const authorizeItem = (id: number) => { |
|
||||||
loadRow(id) |
|
||||||
setMsgDialog(true) |
|
||||||
} |
|
||||||
|
|
||||||
const authorizeAmount = () => { |
|
||||||
const data: DTOAnticiposAutoriza = { |
|
||||||
id: IdAnticipo, |
|
||||||
idUsuario: UserId, |
|
||||||
} |
|
||||||
CAnticiposDataService.Autoriza(data) |
|
||||||
.then((response) => { |
|
||||||
if (response.status == 200) { |
|
||||||
dispatch(updateCorresponsalesAnticipos(response.data)) |
|
||||||
setMsgDialog(false) |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const deleteItem = () => { |
|
||||||
CAnticiposDataService.Delete(IdAnticipo) |
|
||||||
.then((response) => { |
|
||||||
if (response.status == 200) { |
|
||||||
dispatch(deleteCorresponsalesAnticipos(IdAnticipo)) |
|
||||||
setMsgDialog(false) |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
CAnticiposDataService.getAll(props.IDTrafico) |
|
||||||
.then((response) => { |
|
||||||
dispatch(populateCorresponsalesAnticipos(response.data)) |
|
||||||
setFilteredData(mCAnticipos) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
}, [props.IDTrafico]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
const result = mCAnticipos.filter((row) => row.id > 0 && row.idTrafico === props.IDTrafico) |
|
||||||
}, [mCAnticipos]) |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Container className='labelSize13px'> |
|
||||||
<Row className={props.canDelete ? 'visible' : 'invisible heightZero'}> |
|
||||||
<Col xs='12'> |
|
||||||
<input |
|
||||||
type='text' |
|
||||||
className='form-control genericSelect' |
|
||||||
name='Concepto' |
|
||||||
id='Concepto' |
|
||||||
style={{ height: '30px' }} |
|
||||||
value={Concepto} |
|
||||||
placeholder='Proporcione el concepto' |
|
||||||
onChange={(e) => { |
|
||||||
setConcepto(e.target.value) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row |
|
||||||
style={{ paddingBottom: '5', paddingTop: '15' }} |
|
||||||
className={props.canDelete ? 'visible' : 'invisible heightZero'} |
|
||||||
> |
|
||||||
<Col md='auto' xs={1}> |
|
||||||
<Button |
|
||||||
variant='warning' |
|
||||||
size='sm' |
|
||||||
onClick={() => { |
|
||||||
cleanForm() |
|
||||||
}} |
|
||||||
> |
|
||||||
<BsEraserFill /> |
|
||||||
Limpiar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={3}> |
|
||||||
<Form.Control type='hidden' id='IdAnticipo' size='sm' value={IdAnticipo} placeholder='id' disabled={true} /> |
|
||||||
</Col> |
|
||||||
<Col xs={2}> |
|
||||||
<CurrencyFormat |
|
||||||
value={Anticipo} |
|
||||||
displayType={'input'} |
|
||||||
thousandSeparator={true} |
|
||||||
prefix={'$'} |
|
||||||
onValueChange={(values: any) => { |
|
||||||
const { formattedValue, value } = values |
|
||||||
setAnticipo(value) |
|
||||||
}} |
|
||||||
style={{ |
|
||||||
fontSize: '18px', |
|
||||||
backgroundColor: '#F5FFED', |
|
||||||
border: '2px solid #25D05B', |
|
||||||
width: '150px', |
|
||||||
textAlign: 'right', |
|
||||||
borderRadius: '10px', |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col xs={1}> |
|
||||||
<Form.Control |
|
||||||
as='select' |
|
||||||
className='form-select form-select-sm' |
|
||||||
value={Moneda} |
|
||||||
onChange={(e) => { |
|
||||||
setMoneda(parseInt(e.target.value)) |
|
||||||
}} |
|
||||||
> |
|
||||||
<option value='1'>Pesos</option> |
|
||||||
<option value='2'>Dolares</option> |
|
||||||
</Form.Control> |
|
||||||
</Col> |
|
||||||
<Col xs={2}> |
|
||||||
<Form.Control |
|
||||||
as='select' |
|
||||||
className='form-select form-select-sm' |
|
||||||
value={Financiado} |
|
||||||
onChange={(e) => { |
|
||||||
setFinanciado(parseInt(e.target.value)) |
|
||||||
}} |
|
||||||
> |
|
||||||
<option value='0'>No financiado</option> |
|
||||||
<option value='1'>Financiado</option> |
|
||||||
</Form.Control> |
|
||||||
</Col> |
|
||||||
<Col xs={2}></Col> |
|
||||||
<Col xs={1}> |
|
||||||
<Button |
|
||||||
variant='primary' |
|
||||||
size='sm' |
|
||||||
onClick={() => { |
|
||||||
saveForm() |
|
||||||
}} |
|
||||||
> |
|
||||||
<BsCheckCircle /> |
|
||||||
Guardar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row style={{ paddingBottom: 5 }}> |
|
||||||
<Col xs={12}> |
|
||||||
<div className='ag-theme-alpine' style={{ height: 500, width: '100%' }}> |
|
||||||
<AgGridReact |
|
||||||
rowData={mCAnticipos.filter((p) => p.id !== 0)} |
|
||||||
columnDefs={columnDefs} |
|
||||||
pagination={true} |
|
||||||
paginationAutoPageSize={true} |
|
||||||
ref={gridRef} |
|
||||||
rowSelection={'single'} |
|
||||||
rowMultiSelectWithClick={true} |
|
||||||
/* onRowClicked={(e) => getParams(e)} */ |
|
||||||
></AgGridReact> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Container> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
></MsgInformativo> |
|
||||||
<Modal show={msgDialog} onHide={() => setMsgDialog(false)} size='lg'> |
|
||||||
<Modal.Body> |
|
||||||
<Alert variant='primary'> |
|
||||||
¿Esta seguro de eliminar ?: ' |
|
||||||
<br /> <p>{Concepto}</p> |
|
||||||
Por el monto de: |
|
||||||
<span style={{ backgroundColor: 'red', color: 'yellow', fontWeight: 'bold', fontSize: '20px' }}> |
|
||||||
<CurrencyFormat |
|
||||||
value={Anticipo} |
|
||||||
displayType={'text'} |
|
||||||
thousandSeparator={true} |
|
||||||
prefix={'$'} |
|
||||||
decimalScale={2} |
|
||||||
fixedDecimalScale={true} |
|
||||||
/>{' '} |
|
||||||
{Moneda === 1 ? 'Pesos' : 'Dolares'} |
|
||||||
</span> |
|
||||||
</Alert> |
|
||||||
</Modal.Body> |
|
||||||
<Modal.Footer> |
|
||||||
<Row> |
|
||||||
<Col xs={1}> |
|
||||||
<Button variant='secondary' onClick={() => setMsgDialog(false)} size='sm'> |
|
||||||
Cerrar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={5} style={{ paddingLeft: '550px', paddingRight: '0px' }}> |
|
||||||
|
|
||||||
</Col> |
|
||||||
<Col xs={1}> |
|
||||||
<Button variant='primary' onClick={deleteItem} size='sm'> |
|
||||||
Si |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Modal.Footer> |
|
||||||
</Modal> |
|
||||||
<Modal show={msgDialog} onHide={() => setMsgDialog(false)} size='lg'> |
|
||||||
<Modal.Body> |
|
||||||
<Alert variant='primary'> |
|
||||||
¿Esta seguro de autorizar? |
|
||||||
<br /> <p>{Concepto}</p> |
|
||||||
Por el monto de: |
|
||||||
<span style={{ backgroundColor: 'red', color: 'yellow', fontWeight: 'bold', fontSize: '20px' }}> |
|
||||||
<CurrencyFormat |
|
||||||
value={Anticipo} |
|
||||||
displayType={'text'} |
|
||||||
thousandSeparator={true} |
|
||||||
prefix={'$'} |
|
||||||
decimalScale={2} |
|
||||||
fixedDecimalScale={true} |
|
||||||
/>{' '} |
|
||||||
{Moneda === 1 ? 'Pesos' : 'Dolares'} |
|
||||||
</span> |
|
||||||
</Alert> |
|
||||||
</Modal.Body> |
|
||||||
<Modal.Footer> |
|
||||||
<Row> |
|
||||||
<Col xs={1}> |
|
||||||
<Button variant='secondary' onClick={() => setMsgDialog(false)} size='sm'> |
|
||||||
Cerrar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={5} style={{ paddingLeft: '550px', paddingRight: '0px' }}> |
|
||||||
|
|
||||||
</Col> |
|
||||||
<Col xs={1}> |
|
||||||
<Button variant='danger' onClick={authorizeAmount} size='sm'> |
|
||||||
Autorizar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Modal.Footer> |
|
||||||
</Modal> |
|
||||||
<Modal show={MsgDialogFileManager} onHide={() => setMsgDialogFileManager(false)} size='lg'> |
|
||||||
<Modal.Body> |
|
||||||
<FileManager |
|
||||||
width={750} |
|
||||||
height={200} |
|
||||||
IDProcess={1} |
|
||||||
IdFile={IdAnticipo} |
|
||||||
IDUser={UserId} |
|
||||||
FileName={''} |
|
||||||
canDelete={Depto === 'Contabilidad'} |
|
||||||
FileType={['pdf']} |
|
||||||
Leyenda={'Seleccione el archivo, arrastrelo hasta aqui y sueltelo para subirlo al servidor..'} |
|
||||||
onAppendFM={function (idFile: number): void {}} |
|
||||||
/> |
|
||||||
</Modal.Body> |
|
||||||
<Modal.Footer> |
|
||||||
<Row> |
|
||||||
<Col xs={11}> </Col> |
|
||||||
<Col xs={1}> |
|
||||||
<Button variant='secondary' onClick={() => setMsgDialogFileManager(false)} size='sm'> |
|
||||||
Cerrar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Modal.Footer> |
|
||||||
</Modal> |
|
||||||
<Modal show={msgDialogFileManagerConta} onHide={() => setMsgDialogFileManagerConta(false)} size='lg'> |
|
||||||
<Modal.Body> |
|
||||||
<FileManager |
|
||||||
width={750} |
|
||||||
height={200} |
|
||||||
IDProcess={4} |
|
||||||
IdFile={IdAnticipo} |
|
||||||
IDUser={UserId} |
|
||||||
FileName={''} |
|
||||||
canDelete={false} |
|
||||||
FileType={['pdf']} |
|
||||||
Leyenda={'Seleccione el archivo, arrastrelo hasta aqui y sueltelo para subirlo al servidor...'} |
|
||||||
onAppendFM={function (idFile: number): void { |
|
||||||
authorizeAmount() |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Modal.Body> |
|
||||||
<Modal.Footer> |
|
||||||
<Row> |
|
||||||
<Col xs={11}> </Col> |
|
||||||
<Col xs={1}> |
|
||||||
<Button variant='secondary' onClick={() => setMsgDialogFileManagerConta(false)} size='sm'> |
|
||||||
Cerrar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Modal.Footer> |
|
||||||
</Modal> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
@ -1,269 +0,0 @@ |
|||||||
import { RowClickedEvent } from 'ag-grid-community' |
|
||||||
import { AgGridReact } from 'ag-grid-react' |
|
||||||
import React, { FC, useEffect, useState } from 'react' |
|
||||||
import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap' |
|
||||||
import DataTable from 'react-data-table-component' |
|
||||||
import { IconContext } from 'react-icons' |
|
||||||
import { FaEraser, FaTimesCircle } from 'react-icons/fa' |
|
||||||
import { useDispatch, useSelector } from 'react-redux' |
|
||||||
import ICatProveedores from '../../../Interfaces/Catalogos/ICatProveedores' |
|
||||||
import ProveedoresDataService from '../../../Services/Catalogos/Proveedores.Services' |
|
||||||
import { |
|
||||||
addCatProveedores, |
|
||||||
deleteCatProveedores, |
|
||||||
populateCatProveedores, |
|
||||||
} from '../../../store/features/CatProveedores/CatProveedoresSlice' |
|
||||||
import { RootState } from '../../../store/store' |
|
||||||
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
|
||||||
import { ControlledInput } from './ControlledInput/ControlledInput' |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
canDelete: boolean |
|
||||||
clasificacion: number |
|
||||||
} |
|
||||||
|
|
||||||
export const CatProveedores: FC<IProps> = (props) => { |
|
||||||
const dispatch = useDispatch() |
|
||||||
const mProveedores = useSelector((state: RootState) => state.CatProveedores.CatalogoProveedores) |
|
||||||
const [DTData, setDTData] = useState<ICatProveedores[]>([]) |
|
||||||
const [Proveedor, setProveedor] = useState('') |
|
||||||
const [IDProveedor, setIDProveedor] = useState(0) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msgColor, setMsgColor] = React.useState('primary') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [MsgTime, setMsgTime] = useState(3000) |
|
||||||
const [DialogTabs, setDialogTabs] = useState(false) |
|
||||||
|
|
||||||
const columnsProveedores = [ |
|
||||||
{ |
|
||||||
name: 'id', |
|
||||||
width: '10%', |
|
||||||
selector: (row: ICatProveedores) => row.id, |
|
||||||
sortable: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Proveedor', |
|
||||||
width: '75%', |
|
||||||
cell: (row: ICatProveedores) => { |
|
||||||
return ( |
|
||||||
<ControlledInput |
|
||||||
id={row.id} |
|
||||||
value={row.nombre} |
|
||||||
disabled={false} |
|
||||||
mode={2} |
|
||||||
clasificacion={props.clasificacion} |
|
||||||
/> |
|
||||||
) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Elimina', |
|
||||||
cell: (row: ICatProveedores) => ( |
|
||||||
<div |
|
||||||
style={{ textAlign: 'center', cursor: 'pointer' }} |
|
||||||
onClick={() => { |
|
||||||
setIDProveedor(row.id) |
|
||||||
setProveedor(row.nombre) |
|
||||||
setDialogTabs(true) |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
|
||||||
<FaTimesCircle /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
), |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
ProveedoresDataService.getAll(props.clasificacion) |
|
||||||
.then((response) => { |
|
||||||
//setDTData(response.data)
|
|
||||||
dispatch(populateCatProveedores(response.data)) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
const cleanForm = () => { |
|
||||||
setIDProveedor(0) |
|
||||||
setProveedor('') |
|
||||||
} |
|
||||||
|
|
||||||
const saveForm = () => { |
|
||||||
const data: ICatProveedores = { |
|
||||||
id: IDProveedor, |
|
||||||
nombre: Proveedor, |
|
||||||
clasificacion: props.clasificacion, |
|
||||||
} |
|
||||||
ProveedoresDataService.Append(data) |
|
||||||
.then((response) => { |
|
||||||
if (response.status == 200) { |
|
||||||
setHeader('Informativo') |
|
||||||
setMsg('El proveedor se agrego exitosamente') |
|
||||||
setShowMsg(true) |
|
||||||
setDialogTabs(false) |
|
||||||
if (data.id === 0) dispatch(addCatProveedores(response.data)) |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const deleteItem = () => { |
|
||||||
ProveedoresDataService.Delete(IDProveedor) |
|
||||||
.then((response) => { |
|
||||||
if (response.status === 200) { |
|
||||||
setHeader('Informativo') |
|
||||||
setMsg('El provedor se ha eliminado') |
|
||||||
setShowMsg(true) |
|
||||||
setDialogTabs(false) |
|
||||||
dispatch(deleteCatProveedores(IDProveedor)) |
|
||||||
return |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card style={{}}> |
|
||||||
<Card.Body> |
|
||||||
<Card.Subtitle className='mb-2 text-muted'> |
|
||||||
<Row |
|
||||||
style={{ paddingBottom: '5', paddingTop: '15' }} |
|
||||||
className={props.canDelete ? 'visible' : 'invisible heightZero'} |
|
||||||
> |
|
||||||
<Col |
|
||||||
xs={1} |
|
||||||
style={{ textAlign: 'right', paddingTop: '5px', cursor: 'pointer' }} |
|
||||||
onClick={() => { |
|
||||||
cleanForm() |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'orange', size: '25px' }}> |
|
||||||
<FaEraser /> |
|
||||||
</IconContext.Provider> |
|
||||||
</Col> |
|
||||||
<Col> |
|
||||||
<Form.Control type='hidden' id='IdItem' size='sm' value={IDProveedor} disabled={true} /> |
|
||||||
</Col> |
|
||||||
<Col xs={1}></Col> |
|
||||||
<Col xs={6}> |
|
||||||
{/* <Form.Control |
|
||||||
type='text' |
|
||||||
id='FacturaTerceros' |
|
||||||
size='sm' |
|
||||||
value={Proveedor} |
|
||||||
placeholder='Proveedor' |
|
||||||
pattern='[a-zA-Z-0-9 ]*' |
|
||||||
onChange={(e) => setProveedor((v) => (e.target.validity.valid ? e.target.value : v))} |
|
||||||
/> */} |
|
||||||
<input |
|
||||||
type='text' |
|
||||||
className='form-control genericSelect' |
|
||||||
name='Proveedor' |
|
||||||
id='Proveedor' |
|
||||||
style={{ height: '30px' }} |
|
||||||
value={Proveedor} |
|
||||||
placeholder='Proporcione el nombre del proveedor' |
|
||||||
onChange={(e) => { |
|
||||||
setProveedor(e.target.value) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col xs={1}></Col> |
|
||||||
<Col xs={1}> |
|
||||||
<Button |
|
||||||
variant='primary' |
|
||||||
size='sm' |
|
||||||
onClick={() => { |
|
||||||
saveForm() |
|
||||||
}} |
|
||||||
> |
|
||||||
Agregar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col> </Col> |
|
||||||
</Row> |
|
||||||
</Card.Subtitle> |
|
||||||
<DataTable |
|
||||||
noHeader |
|
||||||
defaultSortFieldId={'id'} |
|
||||||
defaultSortAsc={true} |
|
||||||
pagination |
|
||||||
highlightOnHover |
|
||||||
columns={columnsProveedores} |
|
||||||
data={mProveedores.filter(function (el) { |
|
||||||
return el.id > 0 |
|
||||||
})} |
|
||||||
/> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
time={MsgTime} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
<Modal |
|
||||||
show={DialogTabs} |
|
||||||
onHide={() => { |
|
||||||
setDialogTabs(false) |
|
||||||
}} |
|
||||||
size='sm' |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
<Alert variant='primary'> |
|
||||||
<b>¿Esta seguro de eliminar?</b> |
|
||||||
<br /> |
|
||||||
<h5> {Proveedor} </h5> |
|
||||||
</Alert> |
|
||||||
</Modal.Body> |
|
||||||
<Modal.Footer> |
|
||||||
<Row> |
|
||||||
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
|
||||||
<Button |
|
||||||
variant='danger' |
|
||||||
onClick={deleteItem} |
|
||||||
size='sm' |
|
||||||
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
|
||||||
> |
|
||||||
Si |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={6} style={{ textAlign: 'right' }}> |
|
||||||
<Button |
|
||||||
variant='secondary' |
|
||||||
onClick={() => { |
|
||||||
setDialogTabs(false) |
|
||||||
}} |
|
||||||
size='sm' |
|
||||||
> |
|
||||||
Cerrar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Modal.Footer> |
|
||||||
</Modal> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
@ -1,77 +0,0 @@ |
|||||||
import React, { FC, useState } from 'react' |
|
||||||
import { MsgInformativo } from '../../../Utils/Toast/msgInformativo' |
|
||||||
import ProvDataService from '../../../../Services/Catalogos/Proveedores.Services' |
|
||||||
import { useDispatch } from 'react-redux' |
|
||||||
import ICatProveedores from '../../../../Interfaces/Catalogos/ICatProveedores' |
|
||||||
import { updateCatProveedores } from '../../../../store/features/CatProveedores/CatProveedoresSlice' |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
id: number |
|
||||||
value: any |
|
||||||
disabled?: boolean |
|
||||||
mode: number // 1: Number, 2: String
|
|
||||||
clasificacion: number |
|
||||||
} |
|
||||||
|
|
||||||
export const ControlledInput: FC<IProps> = (props) => { |
|
||||||
const dispatch = useDispatch() |
|
||||||
const [id, setid] = useState(props.id) |
|
||||||
const [value, setValue] = useState(props.value) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msgColor, setMsgColor] = React.useState('primary') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
|
|
||||||
const onChange = (event: any) => { |
|
||||||
setValue(event.target.value) |
|
||||||
} |
|
||||||
const handleKeyDown = (event: any) => { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
if (isNaN(event.target.value) && props.mode === 1) { |
|
||||||
alert('Valor no valido!') |
|
||||||
return |
|
||||||
} |
|
||||||
const data: ICatProveedores = { |
|
||||||
id: id, |
|
||||||
nombre: value, |
|
||||||
clasificacion: props.clasificacion, |
|
||||||
} |
|
||||||
ProvDataService.Append(data) |
|
||||||
.then((response) => { |
|
||||||
if (response.status == 200) { |
|
||||||
dispatch(updateCatProveedores(response.data)) |
|
||||||
setHeader('Informativo') |
|
||||||
setMsg('La informacion se guardo exitosamente') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
return ( |
|
||||||
<> |
|
||||||
<input |
|
||||||
value={value} |
|
||||||
onChange={onChange} |
|
||||||
disabled={false} |
|
||||||
onKeyDown={(e) => handleKeyDown(e)} |
|
||||||
style={{ width: '75%' }} |
|
||||||
/> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
@ -1,252 +0,0 @@ |
|||||||
import React, { FC, useEffect, useState } from 'react' |
|
||||||
import { Button, Card, Col, Form, Row } from 'react-bootstrap' |
|
||||||
import DataTable from 'react-data-table-component' |
|
||||||
import { IconContext } from 'react-icons' |
|
||||||
import { FaEraser, FaTimesCircle } from 'react-icons/fa' |
|
||||||
import { useDispatch, useSelector } from 'react-redux' |
|
||||||
import ICorresponsalContenedores from '../../../Interfaces/Corresponsales/ICorresponsalContenedores' |
|
||||||
import CConDataService from '../../../Services/Corresponsalias/Corresponsales.Contenedores.Services' |
|
||||||
import { RootState } from '../../../store/store' |
|
||||||
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
|
||||||
import CContDataService from '../../../Services/Corresponsalias/Corresponsales.Contenedores.Services' |
|
||||||
import { |
|
||||||
addCorresponsalesContenedores, |
|
||||||
deleteCorresponsalesContenedores, |
|
||||||
} from '../../../store/features/Corresponsales/CorresponsalesContenedoresSlice' |
|
||||||
import { ControlledInput } from './ControlledInput/ControlledInput' |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
IDTrafico: number |
|
||||||
canDelete: boolean |
|
||||||
} |
|
||||||
|
|
||||||
export const Contenedores: FC<IProps> = (props) => { |
|
||||||
const dispatch = useDispatch() |
|
||||||
const mCContenedores = useSelector((state: RootState) => state.CCData.CorresponsalesContenedores) |
|
||||||
const [DTData, setDTData] = useState<ICorresponsalContenedores[]>([]) |
|
||||||
const [Contenedor, setContenedor] = useState('') |
|
||||||
const [IDContenedor, setIDContenedor] = useState(0) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msgColor, setMsgColor] = React.useState('primary') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [DialogTabs, setDialogTabs] = useState(false) |
|
||||||
|
|
||||||
const columnsConcepts = [ |
|
||||||
{ |
|
||||||
name: 'id', |
|
||||||
width: '10%', |
|
||||||
selector: (row: ICorresponsalContenedores) => row.id, |
|
||||||
sortable: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Contenedor', |
|
||||||
width: '75%', |
|
||||||
cell: (row: ICorresponsalContenedores) => { |
|
||||||
return ( |
|
||||||
<ControlledInput id={row.id} value={row.contenedor} disabled={false} mode={2} IDTrafico={props.IDTrafico} /> |
|
||||||
) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Elimina', |
|
||||||
cell: (row: ICorresponsalContenedores) => ( |
|
||||||
<div |
|
||||||
style={{ textAlign: 'center', cursor: 'pointer' }} |
|
||||||
onClick={() => { |
|
||||||
setIDContenedor(row.id) |
|
||||||
setContenedor(row.contenedor) |
|
||||||
setDialogTabs(true) |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
|
||||||
<FaTimesCircle /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
), |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
CConDataService.getAll(props.IDTrafico) |
|
||||||
.then((response) => { |
|
||||||
setDTData(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
const saveForm = () => { |
|
||||||
const data: ICorresponsalContenedores = { |
|
||||||
id: IDContenedor, |
|
||||||
contenedor: Contenedor, |
|
||||||
idTrafico: props.IDTrafico, |
|
||||||
fSemaforo: '', |
|
||||||
semaforo: 0, |
|
||||||
} |
|
||||||
CContDataService.Append(data) |
|
||||||
.then((response) => { |
|
||||||
if (response.status == 200) { |
|
||||||
if (data.id === 0) dispatch(addCorresponsalesContenedores(response.data)) |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const deleteItem = () => { |
|
||||||
CConDataService.Delete(IDContenedor) |
|
||||||
.then((response) => { |
|
||||||
if (response.status === 200) { |
|
||||||
setHeader('Informativo') |
|
||||||
setMsg(response.data.respuesta) |
|
||||||
setShowMsg(true) |
|
||||||
setDialogTabs(false) |
|
||||||
dispatch(deleteCorresponsalesContenedores(IDContenedor)) |
|
||||||
return |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const cleanForm = () => { |
|
||||||
setContenedor('') |
|
||||||
setIDContenedor(0) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card style={{}}> |
|
||||||
<Card.Body> |
|
||||||
<Card.Subtitle className='mb-2 text-muted'> |
|
||||||
<Row |
|
||||||
style={{ paddingBottom: '5', paddingTop: '15' }} |
|
||||||
className={props.canDelete ? 'visible' : 'invisible heightZero'} |
|
||||||
> |
|
||||||
<Col |
|
||||||
xs={1} |
|
||||||
style={{ textAlign: 'right', paddingTop: '5px', cursor: 'pointer' }} |
|
||||||
onClick={() => { |
|
||||||
cleanForm() |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'orange', size: '25px' }}> |
|
||||||
<FaEraser /> |
|
||||||
</IconContext.Provider> |
|
||||||
</Col> |
|
||||||
<Col> |
|
||||||
<Form.Control |
|
||||||
type='hidden' |
|
||||||
id='IdItem' |
|
||||||
size='sm' |
|
||||||
value={IDContenedor} |
|
||||||
placeholder='Contenedor' |
|
||||||
disabled={true} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col xs={1}></Col> |
|
||||||
<Col xs={6}> |
|
||||||
<Form.Control |
|
||||||
type='text' |
|
||||||
id='Contenedor' |
|
||||||
size='sm' |
|
||||||
value={Contenedor} |
|
||||||
placeholder='Contenedor' |
|
||||||
pattern='[a-zA-Z-0-9 ]*' |
|
||||||
onChange={(e) => setContenedor((v) => (e.target.validity.valid ? e.target.value : v))} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col xs={1}></Col> |
|
||||||
<Col xs={1}> |
|
||||||
<Button |
|
||||||
variant='primary' |
|
||||||
size='sm' |
|
||||||
onClick={() => { |
|
||||||
saveForm() |
|
||||||
}} |
|
||||||
> |
|
||||||
Agregar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col> </Col> |
|
||||||
</Row> |
|
||||||
</Card.Subtitle> |
|
||||||
<DataTable |
|
||||||
noHeader |
|
||||||
defaultSortFieldId={'id'} |
|
||||||
defaultSortAsc={true} |
|
||||||
pagination |
|
||||||
highlightOnHover |
|
||||||
columns={columnsConcepts} |
|
||||||
data={mCContenedores.filter(function (el) { |
|
||||||
return el.id > 0 |
|
||||||
})} |
|
||||||
/> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
time={2000} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
{/* <Modal |
|
||||||
show={DialogTabs} |
|
||||||
onHide={() => { |
|
||||||
setDialogTabs(false) |
|
||||||
}} |
|
||||||
size='sm' |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
<Alert variant='primary'> |
|
||||||
<b>¿Esta seguro de eliminar?</b> |
|
||||||
<br /> |
|
||||||
<h5> {Contenedor} </h5> |
|
||||||
</Alert> |
|
||||||
</Modal.Body> |
|
||||||
<Modal.Footer> |
|
||||||
<Row> |
|
||||||
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
|
||||||
<Button |
|
||||||
variant='danger' |
|
||||||
onClick={deleteItem} |
|
||||||
size='sm' |
|
||||||
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
|
||||||
> |
|
||||||
Si |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={6} style={{ textAlign: 'right' }}> |
|
||||||
<Button |
|
||||||
variant='secondary' |
|
||||||
onClick={() => { |
|
||||||
setDialogTabs(false) |
|
||||||
}} |
|
||||||
size='sm' |
|
||||||
> |
|
||||||
Cerrar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Modal.Footer> |
|
||||||
</Modal> */} |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
@ -1,79 +0,0 @@ |
|||||||
import React, { FC, useState } from 'react' |
|
||||||
import ICorresponsalContenedores from '../../../../Interfaces/Corresponsales/ICorresponsalContenedores' |
|
||||||
import { MsgInformativo } from '../../../Utils/Toast/msgInformativo' |
|
||||||
import CContDataService from '../../../../Services/Corresponsalias/Corresponsales.Contenedores.Services' |
|
||||||
import { updateCorresponsalesContenedores } from '../../../../store/features/Corresponsales/CorresponsalesContenedoresSlice' |
|
||||||
import { useDispatch } from 'react-redux' |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
id: number |
|
||||||
value: any |
|
||||||
disabled?: boolean |
|
||||||
mode: number // 1: Number, 2: String
|
|
||||||
IDTrafico: number |
|
||||||
} |
|
||||||
|
|
||||||
export const ControlledInput: FC<IProps> = (props) => { |
|
||||||
const dispatch = useDispatch() |
|
||||||
const [id, setid] = useState(props.id) |
|
||||||
const [value, setValue] = useState(props.value) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msgColor, setMsgColor] = React.useState('primary') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
|
|
||||||
const onChange = (event: any) => { |
|
||||||
setValue(event.target.value) |
|
||||||
} |
|
||||||
const handleKeyDown = (event: any) => { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
if (isNaN(event.target.value) && props.mode === 1) { |
|
||||||
alert('Valor no valido!') |
|
||||||
return |
|
||||||
} |
|
||||||
const data: ICorresponsalContenedores = { |
|
||||||
id: id, |
|
||||||
contenedor: value, |
|
||||||
idTrafico: props.IDTrafico, |
|
||||||
fSemaforo: '', |
|
||||||
semaforo: 0, |
|
||||||
} |
|
||||||
CContDataService.Append(data) |
|
||||||
.then((response) => { |
|
||||||
if (response.status == 200) { |
|
||||||
dispatch(updateCorresponsalesContenedores(response.data)) |
|
||||||
setHeader('Informativo') |
|
||||||
setMsg('La informacion se guardo exitosamente') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
return ( |
|
||||||
<> |
|
||||||
<input |
|
||||||
value={value} |
|
||||||
onChange={onChange} |
|
||||||
disabled={props.disabled} |
|
||||||
onKeyDown={(e) => handleKeyDown(e)} |
|
||||||
style={{ width: '75%' }} |
|
||||||
/> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
@ -1,326 +0,0 @@ |
|||||||
import { FC, useEffect, useState } from 'react' |
|
||||||
import { useDispatch, useSelector } from 'react-redux' |
|
||||||
import { RootState } from '../../../store/store' |
|
||||||
import CContDataService from '../../../Services/Corresponsalias/Corresponsales.Contenedores.Services' |
|
||||||
import ICorresponsalContenedores from '../../../Interfaces/Corresponsales/ICorresponsalContenedores' |
|
||||||
import { IconContext } from 'react-icons' |
|
||||||
import { BsFillCalendarCheckFill, BsFillCalendarDayFill, BsFillRecordFill, BsFillXCircleFill } from 'react-icons/bs' |
|
||||||
import { |
|
||||||
deleteCorresponsalesContenedores, |
|
||||||
updateCorresponsalesContenedores, |
|
||||||
} from '../../../store/features/Corresponsales/CorresponsalesContenedoresSlice' |
|
||||||
import { Alert, Button, Col, Form, Modal, Row } from 'react-bootstrap' |
|
||||||
import DatePicker from 'react-datepicker' |
|
||||||
import 'react-datepicker/dist/react-datepicker.css' |
|
||||||
import { isTypeNode } from 'typescript' |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
IDTrafico: number |
|
||||||
Editable: boolean |
|
||||||
} |
|
||||||
|
|
||||||
export const SelectContainer: FC<IProps> = (props) => { |
|
||||||
const dispatch = useDispatch() |
|
||||||
const [toggleSelect, setToggleSelect] = useState(false) |
|
||||||
const mCContenedores = useSelector((state: RootState) => state.CCData.CorresponsalesContenedores) |
|
||||||
const [Contenedor, setContenedor] = useState('') |
|
||||||
const [IDContenedor, setIDContenedor] = useState(0) |
|
||||||
const [Placeholder, setPlaceholder] = useState('') |
|
||||||
const [DialogTabs, setDialogTabs] = useState(false) |
|
||||||
const [DialogAddDate, setDialogAddDate] = useState(false) |
|
||||||
const [FSemaforo, setFSemaforo] = useState<Date | null>() |
|
||||||
const [Semaforo, setSemaforo] = useState(0) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
setPlaceholder('(' + mCContenedores.filter((item) => item.id > 0).length + ') Contenedores') |
|
||||||
}, [mCContenedores]) |
|
||||||
|
|
||||||
const loadInfo = (data: ICorresponsalContenedores) => { |
|
||||||
setIDContenedor(data.id) |
|
||||||
setContenedor(data.contenedor) |
|
||||||
} |
|
||||||
|
|
||||||
const handleKeyDown = (event: any) => { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
const data: ICorresponsalContenedores = { |
|
||||||
id: IDContenedor, |
|
||||||
contenedor: Contenedor, |
|
||||||
idTrafico: props.IDTrafico, |
|
||||||
fSemaforo: FSemaforo ? adjustTimeZone(FSemaforo.toISOString()) : '', |
|
||||||
semaforo: Semaforo, |
|
||||||
} |
|
||||||
CContDataService.Append(data) |
|
||||||
.then((response) => { |
|
||||||
if (response.status === 200) { |
|
||||||
dispatch(updateCorresponsalesContenedores(response.data)) |
|
||||||
setContenedor('') |
|
||||||
setToggleSelect(true) |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const adjustTimeZone = (str: string): string => { |
|
||||||
if (str) { |
|
||||||
const original: any = new Date(str) |
|
||||||
const real = new Date(original - original.getTimezoneOffset() * 60 * 1000) |
|
||||||
return real.toISOString() |
|
||||||
} else return '' |
|
||||||
} |
|
||||||
|
|
||||||
const updateItem = () => { |
|
||||||
const data: ICorresponsalContenedores = { |
|
||||||
id: IDContenedor, |
|
||||||
contenedor: Contenedor, |
|
||||||
idTrafico: props.IDTrafico, |
|
||||||
fSemaforo: FSemaforo ? adjustTimeZone(FSemaforo.toISOString()) : '', |
|
||||||
semaforo: Semaforo, |
|
||||||
} |
|
||||||
// console.log(JSON.stringify(data))
|
|
||||||
CContDataService.Append(data) |
|
||||||
.then((response) => { |
|
||||||
if (response.status === 200) { |
|
||||||
setIDContenedor(0) |
|
||||||
setContenedor('') |
|
||||||
setDialogTabs(false) |
|
||||||
dispatch(updateCorresponsalesContenedores(response.data)) |
|
||||||
return |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const StrtoDate = (str: string): Date | null => { |
|
||||||
if (str) { |
|
||||||
const original: any = new Date(str) |
|
||||||
return original |
|
||||||
} else return null |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<div className='form-group'> |
|
||||||
<div className='col-sm-12 parent'> |
|
||||||
<div className='input-group'> |
|
||||||
<input type='hidden' className='form-control' name='IDContenedor' id='IDContenedor' value={IDContenedor} /> |
|
||||||
<span className='input-group-addon sorroundImage'> |
|
||||||
<img |
|
||||||
src='http://reportes.gemcousa.com/images/Clean.png' |
|
||||||
width='28' |
|
||||||
height='28' |
|
||||||
style={{ cursor: 'pointer' }} |
|
||||||
alt='' |
|
||||||
onClick={() => { |
|
||||||
setIDContenedor(0) |
|
||||||
setContenedor('') |
|
||||||
}} |
|
||||||
/> |
|
||||||
</span> |
|
||||||
<input |
|
||||||
type='text' |
|
||||||
className='form-control genericSelect' |
|
||||||
name='Contenedor' |
|
||||||
id='Contenedor' |
|
||||||
style={{ height: '30px' }} |
|
||||||
value={Contenedor} |
|
||||||
placeholder={Placeholder} |
|
||||||
disabled={!props.Editable} |
|
||||||
onChange={(e) => { |
|
||||||
setContenedor(e.target.value) |
|
||||||
}} |
|
||||||
onKeyDown={(e) => handleKeyDown(e)} |
|
||||||
/> |
|
||||||
<span className='input-group-addon sorroundImage'> |
|
||||||
<img |
|
||||||
src='http://reportes.gemcousa.com/images/caret.png' |
|
||||||
width='28' |
|
||||||
height='28' |
|
||||||
style={{ cursor: 'pointer' }} |
|
||||||
alt='' |
|
||||||
onClick={() => { |
|
||||||
setToggleSelect(!toggleSelect) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</span> |
|
||||||
<div className='child' style={toggleSelect ? { visibility: 'visible' } : { visibility: 'hidden' }}> |
|
||||||
<ul className='cleanLi'> |
|
||||||
{mCContenedores |
|
||||||
? mCContenedores |
|
||||||
.map((item, index) => { |
|
||||||
return item.id > 0 ? ( |
|
||||||
<li key={item.id} onClick={() => loadInfo(item)}> |
|
||||||
<span |
|
||||||
onClick={() => { |
|
||||||
setDialogTabs(true) |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '15px' }}> |
|
||||||
<BsFillXCircleFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
</span> |
|
||||||
<span style={{ paddingLeft: '10px' }}>{item.contenedor}</span> |
|
||||||
<span |
|
||||||
onClick={() => { |
|
||||||
setFSemaforo(StrtoDate(item.fSemaforo)) |
|
||||||
setSemaforo(item.semaforo) |
|
||||||
setDialogAddDate(true) |
|
||||||
}} |
|
||||||
> |
|
||||||
| {item.fSemaforo} |{' '} |
|
||||||
{item.fSemaforo ? ( |
|
||||||
item.semaforo === 1 ? ( |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
|
||||||
<BsFillRecordFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
) : ( |
|
||||||
<IconContext.Provider value={{ color: '#4BFF59', size: '20px' }}> |
|
||||||
<BsFillRecordFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
) |
|
||||||
) : ( |
|
||||||
'' |
|
||||||
)} |
|
||||||
<span |
|
||||||
style={{ |
|
||||||
paddingLeft: '20px', |
|
||||||
visibility: props.Editable && toggleSelect ? 'visible' : 'hidden', |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'green', size: '15px' }}> |
|
||||||
<BsFillCalendarCheckFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
</span> |
|
||||||
</span> |
|
||||||
</li> |
|
||||||
) : ( |
|
||||||
'' |
|
||||||
) |
|
||||||
}) |
|
||||||
.reverse() |
|
||||||
: ''} |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<Modal |
|
||||||
show={DialogTabs} |
|
||||||
onHide={() => { |
|
||||||
setDialogTabs(false) |
|
||||||
}} |
|
||||||
size='sm' |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
<Alert variant='primary'> |
|
||||||
<b>¿Esta seguro de eliminar?</b> |
|
||||||
<br /> |
|
||||||
<h5> {Contenedor} </h5> |
|
||||||
</Alert> |
|
||||||
</Modal.Body> |
|
||||||
<Modal.Footer> |
|
||||||
<Row> |
|
||||||
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
|
||||||
<Button |
|
||||||
variant='danger' |
|
||||||
onClick={updateItem} |
|
||||||
size='sm' |
|
||||||
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
|
||||||
> |
|
||||||
Si |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={6} style={{ textAlign: 'right' }}> |
|
||||||
<Button |
|
||||||
variant='secondary' |
|
||||||
onClick={() => { |
|
||||||
setDialogTabs(false) |
|
||||||
}} |
|
||||||
size='sm' |
|
||||||
> |
|
||||||
Cerrar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Modal.Footer> |
|
||||||
</Modal> |
|
||||||
|
|
||||||
<Modal |
|
||||||
show={DialogAddDate} |
|
||||||
onHide={() => { |
|
||||||
setDialogTabs(false) |
|
||||||
}} |
|
||||||
/* size='sm' */ |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
<Alert variant='primary'> |
|
||||||
<Row> |
|
||||||
<Col xs={12}> |
|
||||||
<b>¿Esta seguro de agregar fecha al contenedor: {Contenedor}?</b> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row style={{ paddingTop: '10px' }}> |
|
||||||
<Col xs={4}></Col> |
|
||||||
<Col xs={2}>Fecha</Col> |
|
||||||
<Col xs={6}> |
|
||||||
<DatePicker |
|
||||||
selected={FSemaforo} |
|
||||||
onChange={(date: any) => setFSemaforo(date)} |
|
||||||
showTimeSelect |
|
||||||
dateFormat='MM/dd/yyyy HH:mm:ss' |
|
||||||
placeholderText='No definido' |
|
||||||
isClearable |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row style={{ paddingTop: '10px' }}> |
|
||||||
<Col xs={5}></Col> |
|
||||||
<Col xs={2}>Semaforo</Col> |
|
||||||
<Col xs={5}> |
|
||||||
<Form.Control |
|
||||||
as='select' |
|
||||||
onChange={(e) => { |
|
||||||
setSemaforo(parseInt(e.target.value)) |
|
||||||
}} |
|
||||||
value={Semaforo} |
|
||||||
className='form-select form-select-sm' |
|
||||||
> |
|
||||||
<option value='0'>-SELECCIONE-</option> |
|
||||||
<option value='1'>Rojo</option> |
|
||||||
<option value='2'>Verde</option> |
|
||||||
</Form.Control> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Alert> |
|
||||||
<Row> |
|
||||||
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
|
||||||
<Button |
|
||||||
variant='primary' |
|
||||||
onClick={updateItem} |
|
||||||
size='sm' |
|
||||||
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
|
||||||
> |
|
||||||
Guardar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={6} style={{ textAlign: 'right' }}> |
|
||||||
<Button |
|
||||||
variant='secondary' |
|
||||||
onClick={() => { |
|
||||||
setDialogAddDate(false) |
|
||||||
}} |
|
||||||
size='sm' |
|
||||||
> |
|
||||||
Cerrar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Modal.Body> |
|
||||||
</Modal> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
@ -1,569 +0,0 @@ |
|||||||
import React, { FC, useEffect, useState } from 'react' |
|
||||||
import { Alert, Card, Col, FloatingLabel, Form, Modal, Row } from 'react-bootstrap' |
|
||||||
import { IconContext } from 'react-icons' |
|
||||||
import { BsCloudArrowUpFill, BsFillPlusCircleFill } from 'react-icons/bs' |
|
||||||
import FileManager from '../../Utils/FileManager/FileManager' |
|
||||||
import CuentasComplementariasDS from '../../../Services/Corresponsalias/Corresponsales.CuentasComplementarias.Services' |
|
||||||
import MFileManagerDataService from '../../../Services/Utils/MFileManager.Service' |
|
||||||
import ICorresponsalCuentasComplementarias from '../../../Interfaces/Corresponsales/ICorresponsalCuentasComplementarias' |
|
||||||
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
|
||||||
import DataTable from 'react-data-table-component' |
|
||||||
import DTOCorresponsalCuentaComplementaria from '../../../DTO/Corresponsales/DTOCuentaComplementaria' |
|
||||||
import { SelectEstatus } from './SelectEstatus/SelectEstatus' |
|
||||||
import { FcAbout } from 'react-icons/fc' |
|
||||||
import DTOLogCorresponsalComplementariaEstatus from '../../../DTO/Corresponsales/DTOLogCorresponsalComplementariaEstatus' |
|
||||||
import FileManagerDS from '../../../Services/Utils/FileManager.Services' |
|
||||||
import { AiOutlineClose } from 'react-icons/ai' |
|
||||||
import { MdCloudUpload, MdOutlineInventory, MdOutlineSave } from 'react-icons/md' |
|
||||||
import { useDispatch, useSelector } from 'react-redux' |
|
||||||
import { RootState } from '../../../store/store' |
|
||||||
import { FiSave } from 'react-icons/fi' |
|
||||||
import ICorresponsalCuentaComplementariaStatus from '../../../Interfaces/Corresponsales/ICorresponsalCuentaComplementariaEstatus' |
|
||||||
import { updateCorresponsalesCuentasComplementariasEstatus } from '../../../store/features/Corresponsales/CorresponsalesCuentasComplementariasEstatusSlice' |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
IDTrafico: number |
|
||||||
UserId: number |
|
||||||
} |
|
||||||
|
|
||||||
export const CuentasComplementarias: FC<IProps> = (props) => { |
|
||||||
const dispatch = useDispatch() |
|
||||||
const [Depto, setDepto] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('Departamento') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
|
||||||
}) |
|
||||||
const mCCCEstatus = useSelector( |
|
||||||
(state: RootState) => state.CCueCompEstatus.CorresponsalesCuentasComplementariasEstatus |
|
||||||
) |
|
||||||
const [showModal, setShowModal] = useState(false) |
|
||||||
const [showModalLog, setShowModalLog] = useState(false) |
|
||||||
const [showModalCatalogo, setShowModalCatalogo] = useState(false) |
|
||||||
const [DTData, setDTData] = useState<ICorresponsalCuentasComplementarias[]>([]) |
|
||||||
const [CuentaComplementaria, setCuentaComplementaria] = useState<ICorresponsalCuentasComplementarias[]>([]) |
|
||||||
const [HistorialEstatus, setHistoriaEstatus] = useState<DTOLogCorresponsalComplementariaEstatus[]>([]) |
|
||||||
const [IDCuentaComplementaria, setIdCuentaComplementarias] = useState(0) |
|
||||||
const [IDPDF, setIDPDF] = useState(0) |
|
||||||
const [IDXML, setIDXML] = useState(0) |
|
||||||
const [IDEstatus, setIDEstatus] = useState(0) |
|
||||||
const [Estatus, setEstatus] = useState('') |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msgColor, setMsgColor] = React.useState('primary') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [MsgTime, setMsgTime] = useState(3000) |
|
||||||
|
|
||||||
const colCuentasComplementarias = [ |
|
||||||
{ |
|
||||||
name: 'id', |
|
||||||
width: '60px', |
|
||||||
selector: (row: ICorresponsalCuentasComplementarias) => row.id, |
|
||||||
sortable: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '', |
|
||||||
width: '20px', |
|
||||||
cell: (row: ICorresponsalCuentasComplementarias) => { |
|
||||||
return row.archivoXML ? ( |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
cursor: 'pointer', |
|
||||||
visibility: Depto === 'Corresponsalias' && row.estatus !== 7 ? 'visible' : 'hidden', |
|
||||||
}} |
|
||||||
onClick={() => { |
|
||||||
clearFile(row.id, 1, row.idXML) |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '15px' }}> |
|
||||||
<AiOutlineClose /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) : ( |
|
||||||
<div |
|
||||||
style={{ cursor: 'pointer' }} |
|
||||||
onClick={() => { |
|
||||||
setPreloader(row.id) |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'blue', size: '25px' }}> |
|
||||||
<MdCloudUpload /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'XML', |
|
||||||
width: '300px', |
|
||||||
cell: (row: ICorresponsalCuentasComplementarias) => { |
|
||||||
return ( |
|
||||||
<div |
|
||||||
style={{ cursor: 'pointer' }} |
|
||||||
onClick={() => { |
|
||||||
getFileContent(row.idXML, 22, row.archivoXML) |
|
||||||
}} |
|
||||||
> |
|
||||||
{row.archivoXML} |
|
||||||
</div> |
|
||||||
) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '', |
|
||||||
width: '20px', |
|
||||||
cell: (row: ICorresponsalCuentasComplementarias) => { |
|
||||||
return row.archivoPDF ? ( |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
cursor: 'pointer', |
|
||||||
visibility: Depto === 'Corresponsalias' && row.estatus !== 7 ? 'visible' : 'hidden', |
|
||||||
}} |
|
||||||
onClick={() => { |
|
||||||
clearFile(row.id, 2, row.idPDF) |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '15px' }}> |
|
||||||
<AiOutlineClose /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) : ( |
|
||||||
<div |
|
||||||
style={{ cursor: 'pointer' }} |
|
||||||
onClick={() => { |
|
||||||
setPreloader(row.id) |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'blue', size: '25px' }}> |
|
||||||
<MdCloudUpload /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'PDF', |
|
||||||
width: '300px', |
|
||||||
cell: (row: ICorresponsalCuentasComplementarias) => { |
|
||||||
return ( |
|
||||||
<div |
|
||||||
style={{ cursor: 'pointer' }} |
|
||||||
onClick={() => { |
|
||||||
getFileContent(row.idPDF, 21, row.archivoPDF) |
|
||||||
}} |
|
||||||
> |
|
||||||
{row.archivoPDF} |
|
||||||
</div> |
|
||||||
) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Estatus', |
|
||||||
width: '400px', |
|
||||||
cell: (row: ICorresponsalCuentasComplementarias) => { |
|
||||||
return <SelectEstatus IDEstatus={row.estatus} IDCuenta={row.id} Enabled={row.estatus === 7} /> |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Historico', |
|
||||||
width: '110px', |
|
||||||
cell: (row: ICorresponsalCuentasComplementarias) => ( |
|
||||||
<div |
|
||||||
style={{ textAlign: 'center', cursor: 'pointer' }} |
|
||||||
onClick={() => { |
|
||||||
showHistoricoEstatus(row.id) |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
|
||||||
<FcAbout /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
), |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
const setPreloader = (id: number) => { |
|
||||||
setIdCuentaComplementarias(id) |
|
||||||
setIDPDF(0) |
|
||||||
setIDXML(0) |
|
||||||
setShowModal(true) |
|
||||||
} |
|
||||||
|
|
||||||
const clearFile = (IDCuenta: number, witchFile: number, idFile: number) => { |
|
||||||
CuentasComplementariasDS.ClearFile(IDCuenta, witchFile) |
|
||||||
.then((response) => { |
|
||||||
FileManagerDS.DeleteFile(idFile) |
|
||||||
.then((response) => { |
|
||||||
loadCuentaComplementaria() |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const createCuentaComplementaria = () => { |
|
||||||
const data: DTOCorresponsalCuentaComplementaria = { |
|
||||||
id: 0, |
|
||||||
idTrafico: props.IDTrafico, |
|
||||||
idFile: 0, |
|
||||||
} |
|
||||||
CuentasComplementariasDS.Append(data) |
|
||||||
.then((response) => { |
|
||||||
// setCuentaComplementaria(response.data)
|
|
||||||
setIdCuentaComplementarias(response.data.id) |
|
||||||
setIDPDF(response.data.idPDF) |
|
||||||
setIDXML(response.data.idXML) |
|
||||||
setShowModal(true) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const loadCuentaComplementaria = () => { |
|
||||||
CuentasComplementariasDS.Get(props.IDTrafico) |
|
||||||
.then((response) => { |
|
||||||
setDTData(response.data) |
|
||||||
setIDPDF(0) |
|
||||||
setIDXML(0) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
setIDPDF(0) |
|
||||||
setIDXML(0) |
|
||||||
}, [IDCuentaComplementaria]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
loadCuentaComplementaria() |
|
||||||
}, []) |
|
||||||
|
|
||||||
const showHistoricoEstatus = (id: number) => { |
|
||||||
CuentasComplementariasDS.GetLogEstatus(id) |
|
||||||
.then((response) => { |
|
||||||
setHistoriaEstatus(response.data) |
|
||||||
setShowModalLog(true) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const updateFile = (idFile: number) => { |
|
||||||
if (IDCuentaComplementaria === 0) { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Para proceder, es necesario que cree una cuenta complementaria o seleccione una existente') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
const data: DTOCorresponsalCuentaComplementaria = { |
|
||||||
id: IDCuentaComplementaria, |
|
||||||
idFile: idFile, |
|
||||||
idTrafico: props.IDTrafico, |
|
||||||
} |
|
||||||
CuentasComplementariasDS.Append(data) |
|
||||||
.then((response) => { |
|
||||||
loadCuentaComplementaria() |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const getFileContent = (id: number, proceso: number, archivo: string) => { |
|
||||||
if (id > 0) { |
|
||||||
MFileManagerDataService.getFileContentById(id, proceso) |
|
||||||
.then((response: any) => { |
|
||||||
if (response.status === 200) { |
|
||||||
if (archivo.toLowerCase().endsWith('.pdf')) { |
|
||||||
console.log(response.data) |
|
||||||
const blob = new Blob([response.data], { type: 'application/pdf' }) |
|
||||||
const url = window.URL.createObjectURL(blob) |
|
||||||
window.open(url) |
|
||||||
} else if (archivo.toLowerCase().endsWith('.xml')) { |
|
||||||
console.log(response.data) |
|
||||||
const blob = new Blob([response.data], { type: 'application/xml' }) |
|
||||||
const url = window.URL.createObjectURL(blob) |
|
||||||
window.open(url) |
|
||||||
} |
|
||||||
} else { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('No existe ningun archivo asignado') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('A este concepto no se le ha anexado archivo') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const saveEstatus = () => { |
|
||||||
const data: ICorresponsalCuentaComplementariaStatus = { |
|
||||||
id: IDEstatus, |
|
||||||
estatus: Estatus, |
|
||||||
} |
|
||||||
CuentasComplementariasDS.AppendEstatus(data) |
|
||||||
.then((response) => { |
|
||||||
dispatch(updateCorresponsalesCuentasComplementariasEstatus(response.data)) |
|
||||||
setIDEstatus(0) |
|
||||||
setEstatus('') |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Row> |
|
||||||
<Col style={{ textAlign: 'right', visibility: Depto === 'Contabilidad' ? 'visible' : 'hidden' }}> |
|
||||||
<div |
|
||||||
style={{ cursor: 'pointer' }} |
|
||||||
onClick={() => { |
|
||||||
setShowModalCatalogo(true) |
|
||||||
}} |
|
||||||
title='De un click aqui para agregar abrir el catalogo de conceptos de rechazo' |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'green', size: '35px' }}> |
|
||||||
<MdOutlineInventory /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
<Col xs={10}></Col> |
|
||||||
<Col style={{ visibility: Depto !== 'Contabilidad' ? 'visible' : 'hidden' }}> |
|
||||||
<div |
|
||||||
style={{ cursor: 'pointer' }} |
|
||||||
onClick={() => { |
|
||||||
createCuentaComplementaria() |
|
||||||
}} |
|
||||||
title='De un click aqui para agregar una nueva cuenta complementaria' |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'green', size: '35px' }}> |
|
||||||
<BsFillPlusCircleFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row style={{ paddingTop: '10px' }}> |
|
||||||
<Card> |
|
||||||
<Col xs={12}> |
|
||||||
<DataTable |
|
||||||
noHeader |
|
||||||
defaultSortFieldId={'id'} |
|
||||||
defaultSortAsc={true} |
|
||||||
pagination |
|
||||||
highlightOnHover |
|
||||||
columns={colCuentasComplementarias} |
|
||||||
data={DTData} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Card> |
|
||||||
</Row> |
|
||||||
<Modal |
|
||||||
show={showModal} |
|
||||||
onHide={() => { |
|
||||||
setShowModal(false) |
|
||||||
}} |
|
||||||
size={'sm'} |
|
||||||
dialogClassName={'modal-50w'} |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
<Row> |
|
||||||
<Col xs={6}> |
|
||||||
<FileManager |
|
||||||
IDUser={props.UserId} |
|
||||||
width={350} |
|
||||||
height={200} |
|
||||||
IDProcess={22} |
|
||||||
IdFile={IDCuentaComplementaria} |
|
||||||
FileName={''} |
|
||||||
canDelete={true} |
|
||||||
FileType={['xml']} |
|
||||||
Leyenda={'Seleccione el archivo XML, arrastrelo hasta aqui y sueltelo para subirlo al servidor...'} |
|
||||||
onAppendFM={function (idFile: number): void { |
|
||||||
setIDXML(idFile) |
|
||||||
updateFile(idFile) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col xs={6}> |
|
||||||
<FileManager |
|
||||||
IDUser={props.UserId} |
|
||||||
width={350} |
|
||||||
height={200} |
|
||||||
IDProcess={21} |
|
||||||
IdFile={IDCuentaComplementaria} |
|
||||||
FileName={''} |
|
||||||
canDelete={true} |
|
||||||
FileType={['pdf']} |
|
||||||
Leyenda={'Seleccione el archivo PDF, arrastrelo hasta aqui y sueltelo para subirlo al servidor...'} |
|
||||||
onAppendFM={function (idFile: number): void { |
|
||||||
setIDPDF(idFile) |
|
||||||
updateFile(idFile) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Modal.Body> |
|
||||||
</Modal> |
|
||||||
|
|
||||||
<Modal |
|
||||||
show={showModalLog} |
|
||||||
onHide={() => { |
|
||||||
setShowModalLog(false) |
|
||||||
}} |
|
||||||
size={'sm'} |
|
||||||
dialogClassName={'modal-50w'} |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
{HistorialEstatus.length > 0 ? ( |
|
||||||
<Card> |
|
||||||
<table> |
|
||||||
<tr> |
|
||||||
<td>Registrado</td> |
|
||||||
<td>Estatus</td> |
|
||||||
</tr> |
|
||||||
{HistorialEstatus |
|
||||||
? HistorialEstatus.map((item, index) => { |
|
||||||
return ( |
|
||||||
<tr key={item.estatus}> |
|
||||||
<td>{item.fCreacion}</td> |
|
||||||
<td>{item.sEstatus}</td> |
|
||||||
</tr> |
|
||||||
) |
|
||||||
}) |
|
||||||
: ''} |
|
||||||
</table> |
|
||||||
</Card> |
|
||||||
) : ( |
|
||||||
<Alert variant='primary'> |
|
||||||
<Alert.Heading style={{ textAlign: 'center' }}>No hay informacion al respecto</Alert.Heading> |
|
||||||
</Alert> |
|
||||||
)} |
|
||||||
</Modal.Body> |
|
||||||
</Modal> |
|
||||||
|
|
||||||
<Modal |
|
||||||
show={showModalCatalogo} |
|
||||||
onHide={() => { |
|
||||||
setShowModalCatalogo(false) |
|
||||||
}} |
|
||||||
size={'sm'} |
|
||||||
dialogClassName={'modal-50w'} |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
{mCCCEstatus.length > 0 ? ( |
|
||||||
<> |
|
||||||
<Card> |
|
||||||
<Row> |
|
||||||
<Col xs={1}> |
|
||||||
<FloatingLabel controlId='IdEstatus' label='id' className='mb-3'> |
|
||||||
<Form.Control type='text' placeholder='id' value={IDEstatus} disabled={true} /> |
|
||||||
</FloatingLabel> |
|
||||||
</Col> |
|
||||||
<Col xs={10}> |
|
||||||
<FloatingLabel controlId='IdEstatus' label='Estatus' className='mb-3'> |
|
||||||
<Form.Control |
|
||||||
type='text' |
|
||||||
placeholder='Estatus' |
|
||||||
value={Estatus} |
|
||||||
onChange={(e) => { |
|
||||||
setEstatus(e.target.value) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</FloatingLabel> |
|
||||||
</Col> |
|
||||||
<Col xs={1} style={{ paddingTop: '10px', paddingRight: '50px', cursor: 'pointer' }}> |
|
||||||
<div |
|
||||||
onClick={() => { |
|
||||||
saveEstatus() |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'blue', size: '35px' }}> |
|
||||||
<FiSave /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Card> |
|
||||||
<Card> |
|
||||||
<Row style={{ fontWeight: 'bold' }}> |
|
||||||
<Col xs={1}>id</Col> |
|
||||||
<Col xs={10}>Estatus</Col> |
|
||||||
<Col xs={1}></Col> |
|
||||||
</Row> |
|
||||||
{mCCCEstatus |
|
||||||
? mCCCEstatus |
|
||||||
.filter((item) => { |
|
||||||
return item.id > 1 |
|
||||||
}) |
|
||||||
.map((item, index) => { |
|
||||||
return ( |
|
||||||
<Row |
|
||||||
key={item.estatus} |
|
||||||
onClick={() => { |
|
||||||
setIDEstatus(item.id) |
|
||||||
setEstatus(item.estatus) |
|
||||||
}} |
|
||||||
> |
|
||||||
<Col xs={1}>{item.id}</Col> |
|
||||||
<Col xs={10}>{item.estatus}</Col> |
|
||||||
<Col xs={1}></Col> |
|
||||||
</Row> |
|
||||||
) |
|
||||||
}) |
|
||||||
: ''} |
|
||||||
</Card> |
|
||||||
</> |
|
||||||
) : ( |
|
||||||
<Alert variant='primary'> |
|
||||||
<Alert.Heading style={{ textAlign: 'center' }}>No hay informacion al respecto</Alert.Heading> |
|
||||||
</Alert> |
|
||||||
)} |
|
||||||
</Modal.Body> |
|
||||||
</Modal> |
|
||||||
|
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
time={MsgTime} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
@ -1,85 +0,0 @@ |
|||||||
import React, { FC, useState } from 'react' |
|
||||||
import { Form } from 'react-bootstrap' |
|
||||||
import { useSelector } from 'react-redux' |
|
||||||
import { RootState } from '../../../../store/store' |
|
||||||
import CuentasComplementariasDS from '../../../../Services/Corresponsalias/Corresponsales.CuentasComplementarias.Services' |
|
||||||
import DTOCuentaComplementariaEstatus from '../../../../DTO/Corresponsales/DTOCuentaComplementariaEstatus' |
|
||||||
import { MsgInformativo } from '../../../Utils/Toast/msgInformativo' |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
IDEstatus: number |
|
||||||
IDCuenta: number |
|
||||||
Enabled: boolean |
|
||||||
} |
|
||||||
|
|
||||||
export const SelectEstatus: FC<IProps> = (props) => { |
|
||||||
const [Depto, setDepto] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('Departamento') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
|
||||||
}) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msgColor, setMsgColor] = React.useState('primary') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [MsgTime, setMsgTime] = useState(3000) |
|
||||||
const mCCCEstatus = useSelector( |
|
||||||
(state: RootState) => state.CCueCompEstatus.CorresponsalesCuentasComplementariasEstatus |
|
||||||
) |
|
||||||
const [IDEstatus, setIDEstatus] = useState(props.IDEstatus) |
|
||||||
|
|
||||||
const changeStatus = (nuevoEstatus: number) => { |
|
||||||
setIDEstatus(nuevoEstatus) |
|
||||||
const data: DTOCuentaComplementariaEstatus = { |
|
||||||
id: props.IDCuenta, |
|
||||||
estatus: nuevoEstatus, |
|
||||||
} |
|
||||||
CuentasComplementariasDS.ChangeStatus(data) |
|
||||||
.then((response) => { |
|
||||||
setHeader('Confirmacion') |
|
||||||
setMsg('Se ha cambiado el estatus de la cuenta') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Form.Control |
|
||||||
as='select' |
|
||||||
onChange={(e) => { |
|
||||||
changeStatus(parseInt(e.target.value)) |
|
||||||
}} |
|
||||||
className='form-select form-select-sm' |
|
||||||
style={{ width: '350px' }} |
|
||||||
disabled={Depto !== 'Contabilidad' || props.Enabled} |
|
||||||
value={IDEstatus} |
|
||||||
> |
|
||||||
{mCCCEstatus |
|
||||||
? mCCCEstatus.map((item, index) => { |
|
||||||
return ( |
|
||||||
<option key={item.id} value={item.id}> |
|
||||||
{item.estatus} |
|
||||||
</option> |
|
||||||
) |
|
||||||
}) |
|
||||||
: ''} |
|
||||||
</Form.Control> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
time={MsgTime} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
@ -1,190 +0,0 @@ |
|||||||
import { FC, useEffect, useState } from 'react' |
|
||||||
import { useDispatch, useSelector } from 'react-redux' |
|
||||||
import { RootState } from '../../../store/store' |
|
||||||
import CGuiasDataService from '../../../Services/Corresponsalias/Corresponsales.Guias.Services' |
|
||||||
import ICorresponsalesGuias from '../../../Interfaces/Corresponsales/ICorresponsalesGuias' |
|
||||||
import { IconContext } from 'react-icons' |
|
||||||
import { BsFillXCircleFill } from 'react-icons/bs' |
|
||||||
import { Alert, Button, Col, Modal, Row } from 'react-bootstrap' |
|
||||||
import { |
|
||||||
deleteCorresponsalesGuias, |
|
||||||
updateCorresponsalesGuias, |
|
||||||
} from '../../../store/features/Corresponsales/CorresponsalesGuiasSlice' |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
IDTrafico: number |
|
||||||
Editable: boolean |
|
||||||
} |
|
||||||
|
|
||||||
export const SelectGuias: FC<IProps> = (props) => { |
|
||||||
const dispatch = useDispatch() |
|
||||||
const [toggleSelect, setToggleSelect] = useState(false) |
|
||||||
const mCGuias = useSelector((state: RootState) => state.CGuias.CorresponsalesGuias) |
|
||||||
const [Guia, setGuia] = useState('') |
|
||||||
const [IDGuia, setIDGuia] = useState(0) |
|
||||||
const [Placeholder, setPlaceholder] = useState('') |
|
||||||
const [DialogTabs, setDialogTabs] = useState(false) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
setPlaceholder('(' + mCGuias.filter((item) => item.id > 0).length + ') Guias') |
|
||||||
}, [mCGuias]) |
|
||||||
|
|
||||||
const loadInfo = (data: ICorresponsalesGuias) => { |
|
||||||
setIDGuia(data.id) |
|
||||||
setGuia(data.guia) |
|
||||||
} |
|
||||||
|
|
||||||
const handleKeyDown = (event: any) => { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
const data: ICorresponsalesGuias = { |
|
||||||
id: IDGuia, |
|
||||||
guia: Guia, |
|
||||||
idTrafico: props.IDTrafico, |
|
||||||
} |
|
||||||
CGuiasDataService.Append(data) |
|
||||||
.then((response) => { |
|
||||||
if (response.status === 200) { |
|
||||||
dispatch(updateCorresponsalesGuias(response.data)) |
|
||||||
setGuia('') |
|
||||||
setToggleSelect(true) |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const deleteItem = () => { |
|
||||||
CGuiasDataService.Delete(IDGuia) |
|
||||||
.then((response) => { |
|
||||||
if (response.status === 200) { |
|
||||||
setIDGuia(0) |
|
||||||
setGuia('') |
|
||||||
setDialogTabs(false) |
|
||||||
dispatch(deleteCorresponsalesGuias(IDGuia)) |
|
||||||
return |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
{' '} |
|
||||||
<div className='form-group'> |
|
||||||
<div className='col-sm-12 parent'> |
|
||||||
<div className='input-group'> |
|
||||||
<input type='hidden' className='form-control' name='IDGuia' id='IDGuia' value={IDGuia} /> |
|
||||||
<span className='input-group-addon sorroundImage'> |
|
||||||
<img |
|
||||||
src='http://reportes.gemcousa.com/images/Clean.png' |
|
||||||
width='28' |
|
||||||
height='28' |
|
||||||
style={{ cursor: 'pointer' }} |
|
||||||
alt='' |
|
||||||
onClick={() => { |
|
||||||
setIDGuia(0) |
|
||||||
setGuia('') |
|
||||||
}} |
|
||||||
/> |
|
||||||
</span> |
|
||||||
<input |
|
||||||
type='text' |
|
||||||
className='form-control genericSelect' |
|
||||||
name='Guia' |
|
||||||
id='Guia' |
|
||||||
style={{ height: '30px' }} |
|
||||||
value={Guia} |
|
||||||
placeholder={Placeholder} |
|
||||||
disabled={!props.Editable} |
|
||||||
onChange={(e) => { |
|
||||||
setGuia(e.target.value) |
|
||||||
}} |
|
||||||
onKeyDown={(e) => handleKeyDown(e)} |
|
||||||
/> |
|
||||||
<span className='input-group-addon sorroundImage'> |
|
||||||
<img |
|
||||||
src='http://reportes.gemcousa.com/images/caret.png' |
|
||||||
width='28' |
|
||||||
height='28' |
|
||||||
style={{ cursor: 'pointer' }} |
|
||||||
alt='' |
|
||||||
onClick={() => { |
|
||||||
setToggleSelect(!toggleSelect) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</span> |
|
||||||
<div className='child' style={toggleSelect ? { visibility: 'visible' } : { visibility: 'hidden' }}> |
|
||||||
<ul className='cleanLi'> |
|
||||||
{mCGuias |
|
||||||
? mCGuias |
|
||||||
.map((item, index) => { |
|
||||||
return item.id > 0 ? ( |
|
||||||
<li key={item.id} onClick={() => loadInfo(item)}> |
|
||||||
<span |
|
||||||
onClick={() => { |
|
||||||
setDialogTabs(true) |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '15px' }}> |
|
||||||
<BsFillXCircleFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
</span> |
|
||||||
<span style={{ paddingLeft: '10px' }}>{item.guia}</span> |
|
||||||
</li> |
|
||||||
) : ( |
|
||||||
'' |
|
||||||
) |
|
||||||
}) |
|
||||||
.reverse() |
|
||||||
: ''} |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<Modal |
|
||||||
show={DialogTabs} |
|
||||||
onHide={() => { |
|
||||||
setDialogTabs(false) |
|
||||||
}} |
|
||||||
size='sm' |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
<Alert variant='primary'> |
|
||||||
<b>¿Esta seguro de eliminar?</b> |
|
||||||
<br /> |
|
||||||
<h5> {Guia} </h5> |
|
||||||
</Alert> |
|
||||||
</Modal.Body> |
|
||||||
<Modal.Footer> |
|
||||||
<Row> |
|
||||||
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
|
||||||
<Button |
|
||||||
variant='danger' |
|
||||||
onClick={deleteItem} |
|
||||||
size='sm' |
|
||||||
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
|
||||||
> |
|
||||||
Si |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={6} style={{ textAlign: 'right' }}> |
|
||||||
<Button |
|
||||||
variant='secondary' |
|
||||||
onClick={() => { |
|
||||||
setDialogTabs(false) |
|
||||||
}} |
|
||||||
size='sm' |
|
||||||
> |
|
||||||
Cerrar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Modal.Footer> |
|
||||||
</Modal> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
@ -1,110 +0,0 @@ |
|||||||
import React, { FC, useEffect, useState } from 'react' |
|
||||||
import { MsgInformativo } from '../../../Utils/Toast/msgInformativo' |
|
||||||
import CFac3DataService from '../../../../Services/Corresponsalias/Corresponsales.FacturasTerceros.services' |
|
||||||
import { useDispatch, useSelector } from 'react-redux' |
|
||||||
import ICorresponsalTerceros from '../../../../Interfaces/Corresponsales/ICorresponsalFacturasTerceros' |
|
||||||
import { updateCorresponsalesFacturasTerceros } from '../../../../store/features/Corresponsales/CorresponsalesFacturasTercerosSlice' |
|
||||||
import { Form } from 'react-bootstrap' |
|
||||||
import { RootState } from '../../../../store/store' |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
row: ICorresponsalTerceros |
|
||||||
disabled?: boolean |
|
||||||
mode: number // 1: Number, 2: String
|
|
||||||
} |
|
||||||
|
|
||||||
export const ControlledInput: FC<IProps> = (props) => { |
|
||||||
const dispatch = useDispatch() |
|
||||||
const mProveedores = useSelector((state: RootState) => state.CatProveedores.CatalogoProveedores) |
|
||||||
const [id, setid] = useState(props.row.id) |
|
||||||
const [value, setValue] = useState(props.row.factura) |
|
||||||
const [IDProveedor, setIDProveedor] = useState(props.row.idProveedor) |
|
||||||
const [ClasificacionProveedor, setClasificacionProveedor] = useState(1) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msgColor, setMsgColor] = React.useState('primary') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
|
|
||||||
const onChange = (event: any) => { |
|
||||||
setValue(event.target.value) |
|
||||||
} |
|
||||||
|
|
||||||
const handleKeyDown = (event: any) => { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
if (isNaN(event.target.value) && props.mode === 1) { |
|
||||||
alert('Valor no valido!') |
|
||||||
return |
|
||||||
} |
|
||||||
const data: ICorresponsalTerceros = { |
|
||||||
id: id, |
|
||||||
factura: value, |
|
||||||
idTrafico: props.row.idTrafico, |
|
||||||
idProveedor: IDProveedor, |
|
||||||
} |
|
||||||
CFac3DataService.Append(data) |
|
||||||
.then((response) => { |
|
||||||
if (response.status === 200) { |
|
||||||
dispatch(updateCorresponsalesFacturasTerceros(response.data.registro)) |
|
||||||
setHeader('Informativo') |
|
||||||
setMsg('La informacion se guardo exitosamente') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
console.log('El proveedor es:............................' + JSON.stringify(props.row)) |
|
||||||
}, []) |
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<input |
|
||||||
value={value} |
|
||||||
onChange={onChange} |
|
||||||
disabled={props.disabled} |
|
||||||
onKeyDown={(e) => handleKeyDown(e)} |
|
||||||
style={{ width: '120px' }} |
|
||||||
/> |
|
||||||
|
|
||||||
<Form.Control |
|
||||||
as='select' |
|
||||||
onChange={(f) => { |
|
||||||
setIDProveedor(parseInt(f.target.value)) |
|
||||||
}} |
|
||||||
value={IDProveedor} |
|
||||||
className='form-select form-select-sm' |
|
||||||
> |
|
||||||
{mProveedores |
|
||||||
? mProveedores |
|
||||||
.filter(function (row) { |
|
||||||
return row.clasificacion === ClasificacionProveedor |
|
||||||
}) |
|
||||||
.map((p) => { |
|
||||||
return ( |
|
||||||
<option value={p.id} key={p.id}> |
|
||||||
{p.nombre} |
|
||||||
</option> |
|
||||||
) |
|
||||||
}) |
|
||||||
: null} |
|
||||||
</Form.Control> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
@ -1,365 +0,0 @@ |
|||||||
import React, { FC, useEffect, useState } from 'react'; |
|
||||||
import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap'; |
|
||||||
import DataTable from 'react-data-table-component'; |
|
||||||
import { IconContext } from 'react-icons'; |
|
||||||
import { FaEraser, FaTimesCircle } from 'react-icons/fa'; |
|
||||||
import { useDispatch, useSelector } from 'react-redux'; |
|
||||||
import ICorresponsalTerceros from '../../../Interfaces/Corresponsales/ICorresponsalFacturasTerceros'; |
|
||||||
import { RootState } from '../../../store/store'; |
|
||||||
import { MsgInformativo } from '../../Utils/Toast/msgInformativo'; |
|
||||||
import CFac3DataService from '../../../Services/Corresponsalias/Corresponsales.FacturasTerceros.services'; |
|
||||||
import { ControlledInput } from './ControlledInput/ControlledInput'; |
|
||||||
import { |
|
||||||
addCorresponsalesFacturasTerceros, |
|
||||||
deleteCorresponsalesFacturasTerceros, |
|
||||||
} from '../../../store/features/Corresponsales/CorresponsalesFacturasTercerosSlice'; |
|
||||||
import { CatProveedores } from '../CatProveedores/CatProveedores'; |
|
||||||
import { FcManager } from 'react-icons/fc'; |
|
||||||
import { resourceUsage } from 'process'; |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
IDTrafico: number; |
|
||||||
IDCorresponsal: number; |
|
||||||
canDelete: boolean; |
|
||||||
} |
|
||||||
|
|
||||||
export const PagosTerceros: FC<IProps> = (props) => { |
|
||||||
const dispatch = useDispatch(); |
|
||||||
const mCFacturas3 = useSelector( |
|
||||||
(state: RootState) => state.CF3rosData.CorresponsalesFacturasTerceros |
|
||||||
); |
|
||||||
const mProveedores = useSelector( |
|
||||||
(state: RootState) => state.CatProveedores.CatalogoProveedores |
|
||||||
); |
|
||||||
const [IDProveedor, setIDProveedor] = useState(-1); |
|
||||||
const [DTData, setDTData] = useState<ICorresponsalTerceros[]>([]); |
|
||||||
const [ShowModal, setShowModal] = useState(false); |
|
||||||
const [Factura, setFactura] = useState(''); |
|
||||||
const [IDFactura, setIDFactura] = useState(0); |
|
||||||
const [header, setHeader] = useState(''); |
|
||||||
const [msgColor, setMsgColor] = React.useState('primary'); |
|
||||||
const [show, setShowMsg] = useState(false); |
|
||||||
const [msg, setMsg] = useState(''); |
|
||||||
const [MsgTime, setMsgTime] = useState(4000); |
|
||||||
const [DialogTabs, setDialogTabs] = useState(false); |
|
||||||
const [msgDialog, setMsgDialog] = useState(false); |
|
||||||
const [ClasificacionProveedor, setClasificacionProveedor] = useState(1); |
|
||||||
|
|
||||||
const columnsFacturas3 = [ |
|
||||||
{ |
|
||||||
name: 'id', |
|
||||||
width: '10%', |
|
||||||
selector: (row: ICorresponsalTerceros) => row.id, |
|
||||||
sortable: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Factura', |
|
||||||
width: '75%', |
|
||||||
cell: (row: ICorresponsalTerceros) => { |
|
||||||
return <ControlledInput row={row} disabled={false} mode={2} />; |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Elimina', |
|
||||||
cell: (row: ICorresponsalTerceros) => ( |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
textAlign: 'center', |
|
||||||
cursor: 'pointer', |
|
||||||
visibility: props.canDelete ? 'visible' : 'hidden', |
|
||||||
}} |
|
||||||
onClick={() => { |
|
||||||
setIDFactura(row.id); |
|
||||||
setFactura(row.factura); |
|
||||||
setDialogTabs(true); |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
|
||||||
<FaTimesCircle /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
), |
|
||||||
}, |
|
||||||
]; |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
CFac3DataService.getAll(props.IDTrafico) |
|
||||||
.then((response) => { |
|
||||||
setDTData(response.data); |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error'); |
|
||||||
setMsg('Ocurrio un error: ' + e); |
|
||||||
setShowMsg(true); |
|
||||||
return; |
|
||||||
}); |
|
||||||
mProveedores.length > 0 |
|
||||||
? setIDProveedor(mProveedores[0].id) |
|
||||||
: setIDProveedor(0); |
|
||||||
}, []); |
|
||||||
|
|
||||||
const saveForm = () => { |
|
||||||
if (IDProveedor === 0) { |
|
||||||
setHeader('Error'); |
|
||||||
setMsg('Para poder continuar, por favor, seleccione el proveedor'); |
|
||||||
setShowMsg(true); |
|
||||||
return false; |
|
||||||
} |
|
||||||
if (Factura.length === 0) { |
|
||||||
setHeader('Error'); |
|
||||||
setMsg('Para poder continuar, por favor, proporcione la factura'); |
|
||||||
setShowMsg(true); |
|
||||||
return false; |
|
||||||
} |
|
||||||
const data: ICorresponsalTerceros = { |
|
||||||
id: IDFactura, |
|
||||||
factura: Factura, |
|
||||||
idTrafico: props.IDTrafico, |
|
||||||
idProveedor: IDProveedor, |
|
||||||
}; |
|
||||||
CFac3DataService.Append(data) |
|
||||||
.then((response) => { |
|
||||||
if (response.status === 200) { |
|
||||||
setHeader('Informativo'); |
|
||||||
setMsg(response.data.respuesta); |
|
||||||
setShowMsg(true); |
|
||||||
setDialogTabs(false); |
|
||||||
if (data.id === 0) |
|
||||||
dispatch(addCorresponsalesFacturasTerceros(response.data.registro)); |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((error: any) => { |
|
||||||
if (error.response) { |
|
||||||
setHeader('Error: No se permite duplicidad'); |
|
||||||
setMsgColor('warning'); |
|
||||||
setMsgTime(10000); |
|
||||||
setMsg( |
|
||||||
error.response.data.respuesta + |
|
||||||
' en la factura: ' + |
|
||||||
error.response.data.registro.factura + |
|
||||||
' en el trafico: CG' + |
|
||||||
error.response.data.registro.idTrafico |
|
||||||
); |
|
||||||
setShowMsg(true); |
|
||||||
return; |
|
||||||
} |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
const deleteItem = () => { |
|
||||||
CFac3DataService.Delete(IDFactura) |
|
||||||
.then((response) => { |
|
||||||
if (response.status === 200) { |
|
||||||
setHeader('Informativo'); |
|
||||||
setMsg(response.data.respuesta); |
|
||||||
setShowMsg(true); |
|
||||||
setDialogTabs(false); |
|
||||||
dispatch(deleteCorresponsalesFacturasTerceros(IDFactura)); |
|
||||||
return; |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error'); |
|
||||||
setMsg('Ocurrio un error: ' + e); |
|
||||||
setShowMsg(true); |
|
||||||
return; |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
const cleanForm = () => { |
|
||||||
setFactura(''); |
|
||||||
setIDFactura(0); |
|
||||||
}; |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card style={{}}> |
|
||||||
<Card.Body> |
|
||||||
<Card.Subtitle className='mb-2 text-muted'> |
|
||||||
<Row |
|
||||||
style={{ paddingBottom: '5', paddingTop: '15' }} |
|
||||||
className={props.canDelete ? 'visible' : 'invisible heightZero'} |
|
||||||
> |
|
||||||
<Col |
|
||||||
xs={1} |
|
||||||
style={{ |
|
||||||
textAlign: 'right', |
|
||||||
paddingTop: '5px', |
|
||||||
cursor: 'pointer', |
|
||||||
}} |
|
||||||
onClick={() => { |
|
||||||
cleanForm(); |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'orange', size: '25px' }}> |
|
||||||
<FaEraser /> |
|
||||||
</IconContext.Provider> |
|
||||||
</Col> |
|
||||||
<Col> |
|
||||||
<Form.Control |
|
||||||
type='hidden' |
|
||||||
id='IdItem' |
|
||||||
size='sm' |
|
||||||
value={IDFactura} |
|
||||||
placeholder='Contenedor' |
|
||||||
disabled={true} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col xs={2}> |
|
||||||
{/* <Form.Control |
|
||||||
type='text' |
|
||||||
id='FacturaTerceros' |
|
||||||
size='sm' |
|
||||||
value={Factura} |
|
||||||
placeholder='Factura 3ros' |
|
||||||
pattern='[a-zA-Z-0-9 ]*' |
|
||||||
onChange={(e) => setFactura((v) => (e.target.validity.valid ? e.target.value : v))} |
|
||||||
/> */} |
|
||||||
<input |
|
||||||
type='text' |
|
||||||
className='form-control genericSelect' |
|
||||||
name='Factura' |
|
||||||
id='Factura' |
|
||||||
style={{ height: '30px' }} |
|
||||||
value={Factura} |
|
||||||
placeholder='Factura' |
|
||||||
onChange={(e) => { |
|
||||||
setFactura(e.target.value); |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col xs={5}> |
|
||||||
<Form.Control |
|
||||||
as='select' |
|
||||||
id='CmbIDProveedor' |
|
||||||
onChange={(e) => { |
|
||||||
setIDProveedor(parseInt(e.target.value)); |
|
||||||
}} |
|
||||||
className='form-select form-select-sm' |
|
||||||
value={IDProveedor} |
|
||||||
> |
|
||||||
{mProveedores |
|
||||||
? mProveedores |
|
||||||
.filter(function (row) { |
|
||||||
return ( |
|
||||||
row.clasificacion === ClasificacionProveedor || |
|
||||||
row.id === 0 |
|
||||||
); |
|
||||||
}) |
|
||||||
.map((item, index) => { |
|
||||||
return ( |
|
||||||
<option value={item.id} key={item.id}> |
|
||||||
{item.nombre} |
|
||||||
</option> |
|
||||||
); |
|
||||||
}) |
|
||||||
: ''} |
|
||||||
</Form.Control> |
|
||||||
</Col> |
|
||||||
<Col xs={1} style={{ cursor: 'pointer' }}> |
|
||||||
<Button |
|
||||||
variant='primary' |
|
||||||
size='sm' |
|
||||||
onClick={() => { |
|
||||||
setShowModal(true); |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'blue', size: '25px' }}> |
|
||||||
<FcManager /> |
|
||||||
</IconContext.Provider> |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={1}></Col> |
|
||||||
<Col xs={1}> |
|
||||||
<Button |
|
||||||
id='BtnSave' |
|
||||||
variant='primary' |
|
||||||
size='sm' |
|
||||||
onClick={() => { |
|
||||||
saveForm(); |
|
||||||
}} |
|
||||||
> |
|
||||||
Agregar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col> </Col> |
|
||||||
</Row> |
|
||||||
</Card.Subtitle> |
|
||||||
<DataTable |
|
||||||
noHeader |
|
||||||
defaultSortFieldId={'id'} |
|
||||||
defaultSortAsc={true} |
|
||||||
pagination |
|
||||||
highlightOnHover |
|
||||||
columns={columnsFacturas3} |
|
||||||
data={mCFacturas3.filter(function (el) { |
|
||||||
return el.id > 0 && el.idTrafico === props.IDTrafico; |
|
||||||
})} |
|
||||||
/> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
time={MsgTime} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false); |
|
||||||
}} |
|
||||||
/> |
|
||||||
<Modal |
|
||||||
show={DialogTabs} |
|
||||||
onHide={() => { |
|
||||||
setDialogTabs(false); |
|
||||||
}} |
|
||||||
size='sm' |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
<Alert variant='primary'> |
|
||||||
<b>¿Esta seguro de eliminar?</b> |
|
||||||
<br /> |
|
||||||
<h5> {Factura} </h5> |
|
||||||
</Alert> |
|
||||||
</Modal.Body> |
|
||||||
<Modal.Footer> |
|
||||||
<Row> |
|
||||||
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
|
||||||
<Button |
|
||||||
variant='danger' |
|
||||||
onClick={deleteItem} |
|
||||||
size='sm' |
|
||||||
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
|
||||||
> |
|
||||||
Si |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={6} style={{ textAlign: 'right' }}> |
|
||||||
<Button |
|
||||||
variant='secondary' |
|
||||||
onClick={() => { |
|
||||||
setDialogTabs(false); |
|
||||||
}} |
|
||||||
size='sm' |
|
||||||
> |
|
||||||
Cerrar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Modal.Footer> |
|
||||||
</Modal> |
|
||||||
<Modal |
|
||||||
show={ShowModal} |
|
||||||
onHide={() => { |
|
||||||
setShowModal(false); |
|
||||||
}} |
|
||||||
size='sm' |
|
||||||
dialogClassName='modal-50w' |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
<CatProveedores canDelete={true} clasificacion={1} /> |
|
||||||
</Modal.Body> |
|
||||||
</Modal> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
@ -1,308 +0,0 @@ |
|||||||
import React, { FC, useEffect, useState } from "react"; |
|
||||||
import { Button, Card, Col, Container, Form, Row } from "react-bootstrap"; |
|
||||||
import * as CurrencyFormat from "react-currency-format"; |
|
||||||
import ICorresponsalPartidas from "../../../../Interfaces/Corresponsales/ICorresponsalPedimentoPartidas"; |
|
||||||
import { MsgInformativo } from "../../../Utils/Toast/msgInformativo"; |
|
||||||
import CPartidasService from "../../../../Services/Corresponsalias/Corresponsales.Trafico.Pedimento.Partidas.Services"; |
|
||||||
import { useDispatch, useSelector } from "react-redux"; |
|
||||||
import { updateCorresponsalesPartidas } from "../../../../store/features/Corresponsales/CorresponsalesPartidasSlice"; |
|
||||||
import { RootState } from "../../../../store/store"; |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
IDTrafico: number; |
|
||||||
IDPartida: number; |
|
||||||
} |
|
||||||
|
|
||||||
export const DialogBox: FC<IProps> = (props) => { |
|
||||||
const dispatch = useDispatch(); |
|
||||||
const mCFacturas = useSelector( |
|
||||||
(state: RootState) => state.CFData.CorresponsalesFacturas |
|
||||||
); |
|
||||||
const mCatProveedores = useSelector( |
|
||||||
(state: RootState) => state.CatProveedores.CatalogoProveedores |
|
||||||
); |
|
||||||
const mCPartidas = useSelector( |
|
||||||
(state: RootState) => state.CPartidas.CorresponsalesPartidas |
|
||||||
); |
|
||||||
const [Factura, setFactura] = useState(""); |
|
||||||
const [IDFactura, setIDFactura] = useState(0); |
|
||||||
const [IDPartida, setIDPartida] = useState(0); |
|
||||||
const [Proveedor, setProveedor] = useState(""); |
|
||||||
const [IDProveedor, setIDProveedor] = useState(0); |
|
||||||
const [DescripcionMaterial, setDescripcionMaterial] = useState(""); |
|
||||||
const [FraccionArancelaria, setFraccionArancelaria] = useState(""); |
|
||||||
const [ValorAduana, setValorAduana] = useState(0); |
|
||||||
const [DTA, setDTA] = useState(0); |
|
||||||
const [IGI, setIGI] = useState(0); |
|
||||||
const [IEPS, setIEPS] = useState(0); |
|
||||||
const [header, setHeader] = useState(""); |
|
||||||
// const [msgColor, setMsgColor] = React.useState('primary')
|
|
||||||
const [show, setShowMsg] = useState(false); |
|
||||||
const [msg, setMsg] = useState(""); |
|
||||||
const msgColor = "primary"; |
|
||||||
|
|
||||||
const saveForm = () => { |
|
||||||
const data: ICorresponsalPartidas = { |
|
||||||
id: IDPartida, |
|
||||||
idTrafico: props.IDTrafico, |
|
||||||
partida: 0, |
|
||||||
idFactura: IDFactura, |
|
||||||
factura: Factura, |
|
||||||
proveedor: Proveedor, |
|
||||||
descripcionMaterial: DescripcionMaterial, |
|
||||||
fraccionArancelaria: FraccionArancelaria, |
|
||||||
valorAduana: ValorAduana, |
|
||||||
dta: DTA, |
|
||||||
igi: IGI, |
|
||||||
ieps: IEPS, |
|
||||||
activo: 1, |
|
||||||
}; |
|
||||||
if (Factura.length < 4) { |
|
||||||
setHeader("Error"); |
|
||||||
setMsg("Proporcione la factura"); |
|
||||||
setShowMsg(true); |
|
||||||
return; |
|
||||||
} |
|
||||||
if (Proveedor.length < 4) { |
|
||||||
setHeader("Error"); |
|
||||||
setMsg("Proporcione el proveedor"); |
|
||||||
setShowMsg(true); |
|
||||||
return; |
|
||||||
} |
|
||||||
if (DescripcionMaterial.length < 4) { |
|
||||||
setHeader("Error"); |
|
||||||
setMsg("Proporcione la descripcion del material"); |
|
||||||
setShowMsg(true); |
|
||||||
return; |
|
||||||
} |
|
||||||
if (FraccionArancelaria.length < 4) { |
|
||||||
setHeader("Error"); |
|
||||||
setMsg("Proporcione la fraccion arancelaria"); |
|
||||||
setShowMsg(true); |
|
||||||
return; |
|
||||||
} |
|
||||||
if (ValorAduana === 0) { |
|
||||||
setHeader("Error"); |
|
||||||
setMsg("Proporcione el valor aduana"); |
|
||||||
setShowMsg(true); |
|
||||||
return; |
|
||||||
} |
|
||||||
console.log(JSON.stringify(data)); |
|
||||||
CPartidasService.Append(data) |
|
||||||
.then((response) => { |
|
||||||
dispatch(updateCorresponsalesPartidas(response.data)); |
|
||||||
setHeader("Informativo"); |
|
||||||
setMsg("El registro se guardado exitosamente!"); |
|
||||||
setShowMsg(true); |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader("Error"); |
|
||||||
setMsg("Ocurrio un error: " + e); |
|
||||||
setShowMsg(true); |
|
||||||
return; |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
const dataFactura = mCFacturas.filter((item) => item.id === IDFactura); |
|
||||||
setFactura(dataFactura[0].factura); |
|
||||||
setIDProveedor(dataFactura[0].proveedor); |
|
||||||
const dataProveedor = mCatProveedores.filter( |
|
||||||
(item) => item.id === dataFactura[0].proveedor |
|
||||||
); |
|
||||||
setProveedor(dataProveedor[0].nombre); |
|
||||||
}, [IDFactura, mCFacturas, mCatProveedores]); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
const data = mCPartidas.filter((item) => item.id === props.IDPartida); |
|
||||||
if (data[0]) { |
|
||||||
setIDPartida(data[0].id); |
|
||||||
setIDFactura(data[0].idFactura); |
|
||||||
setFactura(data[0].factura); |
|
||||||
setDescripcionMaterial(data[0].descripcionMaterial); |
|
||||||
setProveedor(data[0].proveedor); |
|
||||||
setDTA(data[0].dta); |
|
||||||
setIGI(data[0].igi); |
|
||||||
setIEPS(data[0].ieps); |
|
||||||
setFraccionArancelaria(data[0].fraccionArancelaria); |
|
||||||
setValorAduana(data[0].valorAduana); |
|
||||||
} |
|
||||||
}, [props.IDPartida, mCPartidas]); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card |
|
||||||
style={{ |
|
||||||
backgroundColor: "#F1F9FE", |
|
||||||
paddingLeft: "10px", |
|
||||||
paddingRight: "10px", |
|
||||||
paddingTop: "5px", |
|
||||||
paddingBottom: "5px", |
|
||||||
}} |
|
||||||
> |
|
||||||
<Container fluid="md"> |
|
||||||
<Row style={{ paddingTop: "15px" }}> |
|
||||||
<Col xs={2}>Factura</Col> |
|
||||||
<Col xs={3}> |
|
||||||
{/* <Form.Control |
|
||||||
type='text' |
|
||||||
id='Factura' |
|
||||||
size='sm' |
|
||||||
value={Factura} |
|
||||||
onChange={(e) => { |
|
||||||
setFactura(e.target.value) |
|
||||||
}} |
|
||||||
/> */} |
|
||||||
<Form.Control |
|
||||||
id="CmbFacturas" |
|
||||||
as="select" |
|
||||||
onChange={(e) => { |
|
||||||
setIDFactura(parseInt(e.target.value)); |
|
||||||
}} |
|
||||||
value={IDFactura} |
|
||||||
className="form-select form-select-sm" |
|
||||||
> |
|
||||||
{mCFacturas |
|
||||||
? mCFacturas.map((item, index) => { |
|
||||||
return item.idTrafico === props.IDTrafico ? ( |
|
||||||
<option value={item.id}>{item.factura}</option> |
|
||||||
) : ( |
|
||||||
<option value="0">-Seleccione-</option> |
|
||||||
); |
|
||||||
}) |
|
||||||
: ""} |
|
||||||
</Form.Control> |
|
||||||
</Col> |
|
||||||
<Col xs={5}></Col> |
|
||||||
<Col> |
|
||||||
<Button |
|
||||||
id="BtnSavePartida" |
|
||||||
variant="primary" |
|
||||||
onClick={() => { |
|
||||||
saveForm(); |
|
||||||
}} |
|
||||||
> |
|
||||||
Guardar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row style={{ paddingTop: "15px" }}> |
|
||||||
<Col xs={2}>Proveedor</Col> |
|
||||||
<Col xs={10}> |
|
||||||
<Form.Control |
|
||||||
type="text" |
|
||||||
id="Proveedor" |
|
||||||
size="sm" |
|
||||||
value={Proveedor} |
|
||||||
onChange={(e) => { |
|
||||||
setProveedor(e.target.value); |
|
||||||
}} |
|
||||||
disabled={true} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row style={{ paddingTop: "15px" }}> |
|
||||||
<Col xs={2}>Descripcion del material</Col> |
|
||||||
<Col> |
|
||||||
<Form.Control |
|
||||||
rows={4} |
|
||||||
as="textarea" |
|
||||||
id="DescripcionMaterial" |
|
||||||
value={DescripcionMaterial} |
|
||||||
size="sm" |
|
||||||
onChange={(e) => { |
|
||||||
setDescripcionMaterial(e.target.value); |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row style={{ paddingTop: "15px" }}> |
|
||||||
<Col xs={3}>Fraccion arancelaria</Col> |
|
||||||
<Col xs={3}> |
|
||||||
<Form.Control |
|
||||||
type="text" |
|
||||||
id="FraccionArancelaria" |
|
||||||
size="sm" |
|
||||||
value={FraccionArancelaria} |
|
||||||
onChange={(e) => { |
|
||||||
setFraccionArancelaria(e.target.value); |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col xs={2}>Valor aduana</Col> |
|
||||||
<Col xs={3}> |
|
||||||
<CurrencyFormat |
|
||||||
id="ValorAduana" |
|
||||||
value={ValorAduana} |
|
||||||
thousandSeparator={true} |
|
||||||
placeholder="ValorAduana" |
|
||||||
onValueChange={(values: any) => { |
|
||||||
const { value } = values; |
|
||||||
setValorAduana(value); |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row style={{ paddingTop: "15px" }}> |
|
||||||
<Col xs={1} style={{ textAlign: "right" }}> |
|
||||||
DTA |
|
||||||
</Col> |
|
||||||
<Col xs={2}> |
|
||||||
<CurrencyFormat |
|
||||||
id="CDTA" |
|
||||||
placeholder="DTA" |
|
||||||
value={DTA} |
|
||||||
thousandSeparator={true} |
|
||||||
onValueChange={(values: any) => { |
|
||||||
const { value } = values; |
|
||||||
setDTA(value.length === 0 ? 0 : value); |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col xs={1}> </Col> |
|
||||||
<Col xs={1} style={{ textAlign: "right" }}> |
|
||||||
IGI |
|
||||||
</Col> |
|
||||||
<Col xs={2}> |
|
||||||
<CurrencyFormat |
|
||||||
id="CIGI" |
|
||||||
value={IGI} |
|
||||||
thousandSeparator={true} |
|
||||||
placeholder="IGI" |
|
||||||
onValueChange={(values: any) => { |
|
||||||
const { value } = values; |
|
||||||
setIGI(value); |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col xs={1}> </Col> |
|
||||||
<Col xs={1} style={{ textAlign: "right" }}> |
|
||||||
IEPS |
|
||||||
</Col> |
|
||||||
<Col xs={2}> |
|
||||||
<CurrencyFormat |
|
||||||
id="CIEPS" |
|
||||||
value={IEPS} |
|
||||||
thousandSeparator={true} |
|
||||||
placeholder="IEPS" |
|
||||||
onValueChange={(values: any) => { |
|
||||||
const { value } = values; |
|
||||||
setIEPS(value); |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Container> |
|
||||||
</Card> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false); |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
@ -1,269 +0,0 @@ |
|||||||
import React, { FC, useState } from 'react' |
|
||||||
import { Alert, Button, Card, Col, Modal, Row } from 'react-bootstrap' |
|
||||||
import ICorresponsalPartidas from '../../../Interfaces/Corresponsales/ICorresponsalPedimentoPartidas' |
|
||||||
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
|
||||||
import CPartidasService from '../../../Services/Corresponsalias/Corresponsales.Trafico.Pedimento.Partidas.Services' |
|
||||||
import { useDispatch, useSelector } from 'react-redux' |
|
||||||
import DataTable from 'react-data-table-component' |
|
||||||
import { IconContext } from 'react-icons' |
|
||||||
import { BsFillPencilFill, BsFillTrashFill } from 'react-icons/bs' |
|
||||||
import { RootState } from '../../../store/store' |
|
||||||
import { DialogBox } from './Dialog/DialogBox' |
|
||||||
import { deleteCorresponsalesPartidas } from '../../../store/features/Corresponsales/CorresponsalesPartidasSlice' |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
IDTrafico: number |
|
||||||
canEdit: boolean |
|
||||||
} |
|
||||||
|
|
||||||
export const Partidas: FC<IProps> = (props) => { |
|
||||||
const dispatch = useDispatch() |
|
||||||
const [Depto, setDepto] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('Departamento') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
|
||||||
}) |
|
||||||
const [ShowModal, setShowModal] = useState(false) |
|
||||||
const [MsgDialogDelete, setMsgDialogDelete] = useState(false) |
|
||||||
const [IDPartida, setIDPartida] = useState(0) |
|
||||||
const [Factura, setFactura] = useState('') |
|
||||||
const [Descripcion, setDescripcion] = useState('') |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
// const [Info, setInfo] = useState<ICorresponsalPartidas>()
|
|
||||||
const mCPartidas = useSelector( |
|
||||||
(state: RootState) => state.CPartidas.CorresponsalesPartidas |
|
||||||
) |
|
||||||
const msgColor = 'primary' |
|
||||||
const dataColPartidas = [ |
|
||||||
{ |
|
||||||
name: 'Partida', |
|
||||||
width: '90px', |
|
||||||
selector: (row: ICorresponsalPartidas) => row.partida, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Factura', |
|
||||||
width: '100px', |
|
||||||
selector: (row: ICorresponsalPartidas) => row.factura, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Proveedor', |
|
||||||
center: true, |
|
||||||
width: '450px', |
|
||||||
selector: (row: ICorresponsalPartidas) => row.proveedor |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Descripcion de material', |
|
||||||
center: true, |
|
||||||
width: '450px', |
|
||||||
selector: (row: ICorresponsalPartidas) => row.descripcionMaterial |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Frac arancelaria', |
|
||||||
center: true, |
|
||||||
width: '120px', |
|
||||||
selector: (row: ICorresponsalPartidas) => row.fraccionArancelaria |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Val aduana', |
|
||||||
center: true, |
|
||||||
width: '100px', |
|
||||||
selector: (row: ICorresponsalPartidas) => row.valorAduana |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'DTA', |
|
||||||
center: true, |
|
||||||
width: '70px', |
|
||||||
selector: (row: ICorresponsalPartidas) => row.dta |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'IGI', |
|
||||||
center: true, |
|
||||||
width: '70px', |
|
||||||
selector: (row: ICorresponsalPartidas) => row.igi |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'IEPS', |
|
||||||
center: true, |
|
||||||
width: '70px', |
|
||||||
selector: (row: ICorresponsalPartidas) => row.ieps |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '', |
|
||||||
width: '130px', |
|
||||||
cell: (row: ICorresponsalPartidas) => ( |
|
||||||
<Row> |
|
||||||
<Col> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
textAlign: 'center', |
|
||||||
cursor: 'pointer', |
|
||||||
visibility: props.canEdit ? 'visible' : 'hidden' |
|
||||||
}} |
|
||||||
onClick={() => { |
|
||||||
loadData(row) |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'blue', size: '20px' }}> |
|
||||||
<BsFillPencilFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
<Col> </Col> |
|
||||||
<Col> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
textAlign: 'center', |
|
||||||
cursor: 'pointer', |
|
||||||
visibility: props.canEdit ? 'visible' : 'hidden' |
|
||||||
}} |
|
||||||
onClick={() => { |
|
||||||
confirmDelete(row) |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
|
||||||
<BsFillTrashFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
) |
|
||||||
} |
|
||||||
] |
|
||||||
|
|
||||||
const loadData = (row: ICorresponsalPartidas) => { |
|
||||||
setIDPartida(row.id) |
|
||||||
setShowModal(true) |
|
||||||
} |
|
||||||
|
|
||||||
const confirmDelete = (row: ICorresponsalPartidas) => { |
|
||||||
setIDPartida(row.id) |
|
||||||
setFactura(row.factura) |
|
||||||
setDescripcion(row.descripcionMaterial) |
|
||||||
setMsgDialogDelete(true) |
|
||||||
} |
|
||||||
|
|
||||||
const deleteItem = () => { |
|
||||||
CPartidasService.Delete(IDPartida) |
|
||||||
.then((response) => { |
|
||||||
if (response.status === 200) { |
|
||||||
dispatch(deleteCorresponsalesPartidas(IDPartida)) |
|
||||||
setMsgDialogDelete(false) |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card |
|
||||||
style={{ |
|
||||||
backgroundColor: '#F1F9FE', |
|
||||||
paddingLeft: '10px', |
|
||||||
paddingRight: '10px', |
|
||||||
paddingTop: '5px', |
|
||||||
paddingBottom: '5px' |
|
||||||
}} |
|
||||||
> |
|
||||||
<Card.Title> |
|
||||||
<Row> |
|
||||||
<Col xs={11}> Partidas</Col> |
|
||||||
<Col> |
|
||||||
<Button |
|
||||||
style={{ |
|
||||||
visibility: Depto === 'Corresponsalias' ? 'visible' : 'hidden' |
|
||||||
}} |
|
||||||
variant="primary" |
|
||||||
onClick={() => { |
|
||||||
setIDPartida(0) |
|
||||||
setShowModal(true) |
|
||||||
}} |
|
||||||
> |
|
||||||
Agregar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Card.Title> |
|
||||||
<DataTable |
|
||||||
defaultSortFieldId={'id'} |
|
||||||
defaultSortAsc={true} |
|
||||||
pagination |
|
||||||
highlightOnHover |
|
||||||
columns={dataColPartidas} |
|
||||||
data={mCPartidas.filter((a) => { |
|
||||||
if (a.idTrafico === props.IDTrafico) { |
|
||||||
return a |
|
||||||
} |
|
||||||
})} |
|
||||||
/> |
|
||||||
</Card> |
|
||||||
<Modal |
|
||||||
show={ShowModal} |
|
||||||
onHide={() => { |
|
||||||
setShowModal(false) |
|
||||||
}} |
|
||||||
size={'sm'} |
|
||||||
dialogClassName={'modal-50w'} |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
<div style={{ height: '400px', overflow: 'scroll' }}> |
|
||||||
<DialogBox IDTrafico={props.IDTrafico} IDPartida={IDPartida} /> |
|
||||||
</div> |
|
||||||
</Modal.Body> |
|
||||||
</Modal> |
|
||||||
<Modal |
|
||||||
show={MsgDialogDelete} |
|
||||||
onHide={() => setMsgDialogDelete(false)} |
|
||||||
size="lg" |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
<Alert variant="primary"> |
|
||||||
<h5> |
|
||||||
Favor de confirmar |
|
||||||
<br /> |
|
||||||
<br /> |
|
||||||
¿Esta seguro de eliminar la factura: {Factura} : {Descripcion}? |
|
||||||
</h5> |
|
||||||
</Alert> |
|
||||||
</Modal.Body> |
|
||||||
<Modal.Footer> |
|
||||||
<Row> |
|
||||||
<Col xs={1}> |
|
||||||
<Button |
|
||||||
variant="secondary" |
|
||||||
onClick={() => setMsgDialogDelete(false)} |
|
||||||
size="sm" |
|
||||||
> |
|
||||||
Cerrar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={5} style={{ paddingLeft: '550px', paddingRight: '0px' }}> |
|
||||||
|
|
||||||
</Col> |
|
||||||
<Col xs={1}> |
|
||||||
<Button variant="danger" onClick={() => deleteItem()} size="sm"> |
|
||||||
Eliminar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Modal.Footer> |
|
||||||
</Modal> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
@ -1,148 +0,0 @@ |
|||||||
import React, { FC, useEffect, useState } from 'react'; |
|
||||||
import { MsgInformativo } from '../../../Utils/Toast/msgInformativo'; |
|
||||||
import { useDispatch, useSelector } from 'react-redux'; |
|
||||||
import { updateCorresponsalesFacturas } from '../../../../store/features/Corresponsales/CorresponsalesFacturasSlice'; |
|
||||||
import ICorresponsalFacturas from '../../../../Interfaces/Corresponsales/ICorresponsalFacturas'; |
|
||||||
import CorFacDataService from '../../../../Services/Corresponsalias/Corresponsales.Facturas.Services'; |
|
||||||
import { RootState } from '../../../../store/store'; |
|
||||||
import { Form } from 'react-bootstrap'; |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
record: ICorresponsalFacturas; |
|
||||||
disabled?: boolean; |
|
||||||
mode: number; // 1: Number, 2: String
|
|
||||||
} |
|
||||||
|
|
||||||
export const ControlledInput: FC<IProps> = (props) => { |
|
||||||
const dispatch = useDispatch(); |
|
||||||
const mProveedores = useSelector( |
|
||||||
(state: RootState) => state.CatProveedores.CatalogoProveedores |
|
||||||
); |
|
||||||
const [id, setid] = useState(props.record.id); |
|
||||||
const [value, setValue] = useState(props.record.factura); |
|
||||||
const [IDProveedor, setIDProveedor] = useState(props.record.proveedor); |
|
||||||
const [ValorFacturaDls, setValorFacturaDls] = useState( |
|
||||||
props.record.valorFacturaDls |
|
||||||
); |
|
||||||
const [Pedido, setPedido] = useState(props.record.pedido); |
|
||||||
const [header, setHeader] = useState(''); |
|
||||||
const [msgColor, setMsgColor] = React.useState('primary'); |
|
||||||
const [show, setShowMsg] = useState(false); |
|
||||||
const [msg, setMsg] = useState(''); |
|
||||||
const [ClasificacionProveedor, setClasificacionProveedor] = useState(2); |
|
||||||
|
|
||||||
const onChangeFac = (event: any) => { |
|
||||||
setValue(event.target.value); |
|
||||||
}; |
|
||||||
|
|
||||||
const onChangeDls = (event: any) => { |
|
||||||
setValorFacturaDls(event.target.value); |
|
||||||
}; |
|
||||||
|
|
||||||
const onChangePed = (event: any) => { |
|
||||||
setPedido(event.target.value); |
|
||||||
}; |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
console.log(mProveedores); |
|
||||||
}, [mProveedores]); |
|
||||||
|
|
||||||
const handleKeyDown = (event: any, mode: number) => { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
if (isNaN(event.target.value) && mode === 1) { |
|
||||||
alert('Valor no valido!'); |
|
||||||
return; |
|
||||||
} |
|
||||||
const data: ICorresponsalFacturas = { |
|
||||||
id: id, |
|
||||||
factura: value, |
|
||||||
idTrafico: props.record.idTrafico, |
|
||||||
valorFacturaDls: ValorFacturaDls, |
|
||||||
proveedor: IDProveedor, |
|
||||||
corresponsal: props.record.corresponsal, |
|
||||||
pedido: Pedido, |
|
||||||
code: 0, |
|
||||||
folioGEMCO: '', |
|
||||||
}; |
|
||||||
CorFacDataService.Append(data) |
|
||||||
.then((response) => { |
|
||||||
if (response.status == 200) { |
|
||||||
dispatch(updateCorresponsalesFacturas(response.data)); |
|
||||||
setHeader('Informativo'); |
|
||||||
setMsg('La informacion se guardo exitosamente'); |
|
||||||
setShowMsg(true); |
|
||||||
return; |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error'); |
|
||||||
setMsg('Ocurrio un error: ' + e); |
|
||||||
setShowMsg(true); |
|
||||||
return; |
|
||||||
}); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
function changeValue(val: number) { |
|
||||||
setIDProveedor(val); |
|
||||||
} |
|
||||||
return ( |
|
||||||
<> |
|
||||||
<input |
|
||||||
value={value} |
|
||||||
onChange={onChangeFac} |
|
||||||
disabled={false} |
|
||||||
onKeyDown={(e) => handleKeyDown(e, 2)} |
|
||||||
style={{ width: '25%', textAlign: 'right' }} |
|
||||||
/> |
|
||||||
|
|
||||||
<input |
|
||||||
value={ValorFacturaDls} |
|
||||||
onChange={onChangeDls} |
|
||||||
disabled={false} |
|
||||||
onKeyDown={(e) => handleKeyDown(e, 1)} |
|
||||||
style={{ width: '20%', textAlign: 'right' }} |
|
||||||
/> |
|
||||||
|
|
||||||
<input |
|
||||||
value={Pedido} |
|
||||||
onChange={onChangePed} |
|
||||||
disabled={false} |
|
||||||
onKeyDown={(e) => handleKeyDown(e, 2)} |
|
||||||
style={{ width: '20%', textAlign: 'right' }} |
|
||||||
/> |
|
||||||
|
|
||||||
<Form.Control |
|
||||||
as='select' |
|
||||||
onChange={(f) => { |
|
||||||
changeValue(parseInt(f.target.value)); |
|
||||||
}} |
|
||||||
value={IDProveedor} |
|
||||||
className='form-select form-select-sm' |
|
||||||
> |
|
||||||
{mProveedores |
|
||||||
? mProveedores |
|
||||||
.filter(function (row) { |
|
||||||
return row.clasificacion === ClasificacionProveedor; |
|
||||||
}) |
|
||||||
.map((p) => { |
|
||||||
return ( |
|
||||||
<option value={p.id} key={p.id}> |
|
||||||
{p.nombre} |
|
||||||
</option> |
|
||||||
); |
|
||||||
}) |
|
||||||
: null} |
|
||||||
</Form.Control> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false); |
|
||||||
}} |
|
||||||
/> |
|
||||||
</> |
|
||||||
); |
|
||||||
}; |
|
@ -1,426 +0,0 @@ |
|||||||
import React, { FC, useEffect, useState } from 'react'; |
|
||||||
import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap'; |
|
||||||
import { IconContext } from 'react-icons'; |
|
||||||
import 'react-flexy-table/dist/index.css'; |
|
||||||
import FacDataService from '../../../Services/Corresponsalias/Corresponsales.Facturas.Services'; |
|
||||||
import { RootState } from '../../../store/store'; |
|
||||||
import { useDispatch, useSelector } from 'react-redux'; |
|
||||||
import { FcManager } from 'react-icons/fc'; |
|
||||||
import ICorresponsalFacturas from '../../../Interfaces/Corresponsales/ICorresponsalFacturas'; |
|
||||||
import { |
|
||||||
addCorresponsalesFacturas, |
|
||||||
deleteCorresponsalesFacturas, |
|
||||||
populateCorresponsalesFacturas, |
|
||||||
} from '../../../store/features/Corresponsales/CorresponsalesFacturasSlice'; |
|
||||||
import '../../../css/react-flexy-table.css'; |
|
||||||
import { MsgInformativo } from '../../Utils/Toast/msgInformativo'; |
|
||||||
import * as CurrencyFormat from 'react-currency-format'; |
|
||||||
import { CatProveedores } from '../CatProveedores/CatProveedores'; |
|
||||||
import { FaEraser, FaTimesCircle } from 'react-icons/fa'; |
|
||||||
import DataTable from 'react-data-table-component'; |
|
||||||
import { ControlledInput } from './ControlledInput/ControlledInput'; |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
IDTrafico: number; |
|
||||||
IDCorresponsal: number; |
|
||||||
canDelete: boolean; |
|
||||||
} |
|
||||||
|
|
||||||
export const ProveedorFactura: FC<IProps> = (props) => { |
|
||||||
const mCFacturas = useSelector( |
|
||||||
(state: RootState) => state.CFData.CorresponsalesFacturas |
|
||||||
); |
|
||||||
const mProveedores = useSelector( |
|
||||||
(state: RootState) => state.CatProveedores.CatalogoProveedores |
|
||||||
); |
|
||||||
const dispatch = useDispatch(); |
|
||||||
const [ShowModal, setShowModal] = useState(false); |
|
||||||
const [IDFactura, setIDFactura] = useState(0); |
|
||||||
const [Factura, setFactura] = useState(''); |
|
||||||
const [ValorFacturaDls, setValorFacturaDls] = useState<number>(0); |
|
||||||
const [Pedido, setPedido] = useState(''); |
|
||||||
const [header, setHeader] = useState(''); |
|
||||||
const [show, setShowMsg] = useState(false); |
|
||||||
const [msg, setMsg] = useState(''); |
|
||||||
const [DialogTabs, setDialogTabs] = useState(false); |
|
||||||
const [IDProveedor, setIDProveedor] = useState(0); |
|
||||||
const MsgTime = 2000; |
|
||||||
const msgColor = 'primary'; |
|
||||||
const ClasificacionProveedor = 2; |
|
||||||
|
|
||||||
const TblHeader: React.FC = () => ( |
|
||||||
<table> |
|
||||||
<tr |
|
||||||
style={{ |
|
||||||
fontSize: '15px', |
|
||||||
fontWeight: 'bold', |
|
||||||
backgroundColor: '#FFFFFF', |
|
||||||
}} |
|
||||||
> |
|
||||||
<td width='140px' style={{ textAlign: 'center' }}> |
|
||||||
Factura |
|
||||||
</td> |
|
||||||
<td width='120px' style={{ textAlign: 'center' }}> |
|
||||||
Valor Dls |
|
||||||
</td> |
|
||||||
<td width='120px' style={{ textAlign: 'center' }}> |
|
||||||
Pedido |
|
||||||
</td> |
|
||||||
<td width='560px' style={{ textAlign: 'center' }}> |
|
||||||
Proveedor |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
</table> |
|
||||||
); |
|
||||||
|
|
||||||
const columnsFacturas = [ |
|
||||||
{ |
|
||||||
name: 'id', |
|
||||||
width: '10%', |
|
||||||
selector: (row: ICorresponsalFacturas) => row.id, |
|
||||||
sortable: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: <TblHeader />, |
|
||||||
width: '75%', |
|
||||||
cell: (row: ICorresponsalFacturas) => { |
|
||||||
return <ControlledInput record={row} disabled={false} mode={2} />; |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Elimina', |
|
||||||
cell: (row: ICorresponsalFacturas) => ( |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
textAlign: 'center', |
|
||||||
cursor: 'pointer', |
|
||||||
visibility: props.canDelete ? 'visible' : 'hidden', |
|
||||||
}} |
|
||||||
onClick={() => { |
|
||||||
setIDFactura(row.id); |
|
||||||
setFactura(row.factura); |
|
||||||
setDialogTabs(true); |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
|
||||||
<FaTimesCircle /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
), |
|
||||||
}, |
|
||||||
]; |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
FacDataService.getAll(props.IDTrafico) |
|
||||||
.then((response) => { |
|
||||||
dispatch(populateCorresponsalesFacturas(response.data)); |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error'); |
|
||||||
setMsg('Ocurrio un error: ' + e); |
|
||||||
setShowMsg(true); |
|
||||||
return; |
|
||||||
}); |
|
||||||
}, [props.IDTrafico, dispatch]); |
|
||||||
|
|
||||||
const cleanForm = () => { |
|
||||||
setFactura(''); |
|
||||||
setIDFactura(0); |
|
||||||
setIDProveedor(0); |
|
||||||
setValorFacturaDls(0); |
|
||||||
}; |
|
||||||
|
|
||||||
const saveForm = () => { |
|
||||||
if (Factura.length <= 3) { |
|
||||||
setHeader('Error'); |
|
||||||
setMsg('Proporcione la factura para poder continuar'); |
|
||||||
setShowMsg(true); |
|
||||||
setDialogTabs(false); |
|
||||||
return false; |
|
||||||
} |
|
||||||
if (ValorFacturaDls === 0) { |
|
||||||
setHeader('Error'); |
|
||||||
setMsg('Proporcione el valor en dlls de la factura para poder continuar'); |
|
||||||
setShowMsg(true); |
|
||||||
setDialogTabs(false); |
|
||||||
return false; |
|
||||||
} |
|
||||||
if (IDProveedor === 0) { |
|
||||||
setHeader('Error'); |
|
||||||
setMsg('Seleccione un proveedor para poder continuar'); |
|
||||||
setShowMsg(true); |
|
||||||
setDialogTabs(false); |
|
||||||
return false; |
|
||||||
} |
|
||||||
const data: ICorresponsalFacturas = { |
|
||||||
id: 0, |
|
||||||
factura: Factura, |
|
||||||
idTrafico: props.IDTrafico, |
|
||||||
valorFacturaDls: ValorFacturaDls, |
|
||||||
proveedor: IDProveedor, |
|
||||||
corresponsal: props.IDCorresponsal, |
|
||||||
pedido: Pedido, |
|
||||||
code: 0, |
|
||||||
folioGEMCO: '', |
|
||||||
}; |
|
||||||
FacDataService.Append(data) |
|
||||||
.then((response) => { |
|
||||||
if (response.status === 200) { |
|
||||||
setHeader('Informativo'); |
|
||||||
const respuesta: ICorresponsalFacturas = response.data; |
|
||||||
console.log(respuesta); |
|
||||||
if (respuesta.code && typeof respuesta.code === 'number') { |
|
||||||
const result = respuesta.code; |
|
||||||
if (result === 409) |
|
||||||
setMsg( |
|
||||||
`La factura [${response.data.factura}] de ese proveedor ya se han registrado previamente en el año en curso, lo encuentra en el folio [${response.data.folioGEMCO}]` |
|
||||||
); |
|
||||||
else { |
|
||||||
setMsg('La factura se agrego exitosamente '); |
|
||||||
if (data.id === 0) |
|
||||||
dispatch(addCorresponsalesFacturas(response.data)); |
|
||||||
} |
|
||||||
} |
|
||||||
setShowMsg(true); |
|
||||||
setDialogTabs(false); |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error'); |
|
||||||
setMsg('Ocurrio un error: ' + e); |
|
||||||
setShowMsg(true); |
|
||||||
return; |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
const deleteItem = () => { |
|
||||||
FacDataService.Delete(IDFactura) |
|
||||||
.then((response) => { |
|
||||||
if (response.status === 200) { |
|
||||||
setHeader('Informativo'); |
|
||||||
setMsg('La factura se ha eliminado'); |
|
||||||
setShowMsg(true); |
|
||||||
setDialogTabs(false); |
|
||||||
dispatch(deleteCorresponsalesFacturas(IDFactura)); |
|
||||||
return; |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error'); |
|
||||||
setMsg('Ocurrio un error: ' + e); |
|
||||||
setShowMsg(true); |
|
||||||
return; |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card style={{}}> |
|
||||||
<Card.Body> |
|
||||||
<Card.Subtitle className='mb-2 text-muted'> |
|
||||||
<Row |
|
||||||
style={{ paddingBottom: '5', paddingTop: '15' }} |
|
||||||
className={props.canDelete ? 'visible' : 'invisible heightZero'} |
|
||||||
> |
|
||||||
<Col |
|
||||||
xs={1} |
|
||||||
style={{ |
|
||||||
textAlign: 'right', |
|
||||||
paddingTop: '5px', |
|
||||||
cursor: 'pointer', |
|
||||||
}} |
|
||||||
onClick={() => { |
|
||||||
cleanForm(); |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'orange', size: '25px' }}> |
|
||||||
<FaEraser /> |
|
||||||
</IconContext.Provider> |
|
||||||
</Col> |
|
||||||
<Col xs='1'> |
|
||||||
<Form.Control |
|
||||||
type='text' |
|
||||||
id='Factura' |
|
||||||
size='sm' |
|
||||||
value={Factura} |
|
||||||
placeholder='Factura' |
|
||||||
pattern='[a-zA-Z-0-9 ]*' |
|
||||||
onChange={(e) => |
|
||||||
setFactura((v) => |
|
||||||
e.target.validity.valid ? e.target.value : v |
|
||||||
) |
|
||||||
} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col xs='1'> |
|
||||||
<CurrencyFormat |
|
||||||
id='ValorFacturaDls' |
|
||||||
value={ValorFacturaDls} |
|
||||||
prefix={'$'} |
|
||||||
displayType={'input'} |
|
||||||
thousandSeparator={true} |
|
||||||
onValueChange={(values: any) => { |
|
||||||
const { value } = values; |
|
||||||
setValorFacturaDls(value); |
|
||||||
}} |
|
||||||
style={{ |
|
||||||
fontSize: '18px', |
|
||||||
backgroundColor: '#F5FFED', |
|
||||||
border: '2px solid #25D05B', |
|
||||||
width: '100px', |
|
||||||
textAlign: 'right', |
|
||||||
borderRadius: '10px', |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col xs={1}> |
|
||||||
<Form.Control |
|
||||||
type='text' |
|
||||||
id='Pedido' |
|
||||||
size='sm' |
|
||||||
value={Pedido} |
|
||||||
placeholder='Pedido' |
|
||||||
onChange={(e) => setPedido(e.target.value)} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col xs={5}> |
|
||||||
<Form.Control |
|
||||||
id='IDProveedor' |
|
||||||
as='select' |
|
||||||
onChange={(e) => { |
|
||||||
setIDProveedor(parseInt(e.target.value)); |
|
||||||
}} |
|
||||||
className='form-select form-select-sm' |
|
||||||
value={IDProveedor} |
|
||||||
> |
|
||||||
<option>-Seleccione-</option> |
|
||||||
{mProveedores |
|
||||||
? mProveedores |
|
||||||
.filter(function (row) { |
|
||||||
return row.clasificacion === ClasificacionProveedor; |
|
||||||
}) |
|
||||||
.map((item, index) => { |
|
||||||
return ( |
|
||||||
<option value={item.id} key={item.id}> |
|
||||||
{item.nombre} |
|
||||||
</option> |
|
||||||
); |
|
||||||
}) |
|
||||||
: ''} |
|
||||||
</Form.Control> |
|
||||||
</Col> |
|
||||||
<Col xs={1} style={{ cursor: 'pointer' }}> |
|
||||||
<Button |
|
||||||
variant='primary' |
|
||||||
size='sm' |
|
||||||
onClick={() => { |
|
||||||
setShowModal(true); |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'blue', size: '25px' }}> |
|
||||||
<FcManager /> |
|
||||||
</IconContext.Provider> |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={1}></Col> |
|
||||||
<Col xs={1}> |
|
||||||
<Button |
|
||||||
id='BtnSave' |
|
||||||
variant='primary' |
|
||||||
size='sm' |
|
||||||
onClick={() => { |
|
||||||
saveForm(); |
|
||||||
}} |
|
||||||
> |
|
||||||
Agregar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col> </Col> |
|
||||||
</Row> |
|
||||||
</Card.Subtitle> |
|
||||||
<DataTable |
|
||||||
/* noHeader */ |
|
||||||
fixedHeader={true} |
|
||||||
defaultSortFieldId={'id'} |
|
||||||
defaultSortAsc={true} |
|
||||||
fixedHeaderScrollHeight='400px' |
|
||||||
persistTableHead |
|
||||||
striped |
|
||||||
dense |
|
||||||
paginationPerPage={7} |
|
||||||
paginationRowsPerPageOptions={[7, 10, 14, 20, 21]} |
|
||||||
responsive |
|
||||||
pagination |
|
||||||
highlightOnHover |
|
||||||
columns={columnsFacturas} |
|
||||||
data={mCFacturas.filter(function (el) { |
|
||||||
return el.id > 0; |
|
||||||
})} |
|
||||||
/> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
time={MsgTime} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false); |
|
||||||
}} |
|
||||||
/> |
|
||||||
<Modal |
|
||||||
show={DialogTabs} |
|
||||||
onHide={() => { |
|
||||||
setDialogTabs(false); |
|
||||||
}} |
|
||||||
size='sm' |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
<Alert variant='primary'> |
|
||||||
<b>¿Esta seguro de eliminar?</b> |
|
||||||
<br /> |
|
||||||
<h5> {Factura} </h5> |
|
||||||
</Alert> |
|
||||||
</Modal.Body> |
|
||||||
<Modal.Footer> |
|
||||||
<Row> |
|
||||||
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
|
||||||
<Button |
|
||||||
variant='danger' |
|
||||||
onClick={deleteItem} |
|
||||||
size='sm' |
|
||||||
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
|
||||||
> |
|
||||||
Si |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={6} style={{ textAlign: 'right' }}> |
|
||||||
<Button |
|
||||||
variant='secondary' |
|
||||||
onClick={() => { |
|
||||||
setDialogTabs(false); |
|
||||||
}} |
|
||||||
size='sm' |
|
||||||
> |
|
||||||
Cerrar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Modal.Footer> |
|
||||||
</Modal> |
|
||||||
<Modal |
|
||||||
show={ShowModal} |
|
||||||
onHide={() => { |
|
||||||
setShowModal(false); |
|
||||||
}} |
|
||||||
size='sm' |
|
||||||
dialogClassName='modal-50w' |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
<CatProveedores canDelete={true} clasificacion={2} /> |
|
||||||
</Modal.Body> |
|
||||||
</Modal> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
@ -1,180 +0,0 @@ |
|||||||
import React, { FC, useEffect, useState } from 'react' |
|
||||||
import { Alert, Button, Col, Modal, Row } from 'react-bootstrap' |
|
||||||
import DataTable from 'react-data-table-component' |
|
||||||
import { IconContext } from 'react-icons' |
|
||||||
import { FaCopy } from 'react-icons/fa' |
|
||||||
import ICorresponsalesRectificaciones from '../../../Interfaces/Corresponsales/ICorresponsalesRectificaciones' |
|
||||||
import RectiDataService from '../../../Services/Corresponsalias/Corresponsales.Trafico.Services' |
|
||||||
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
IDTrafico: number |
|
||||||
changeIdTrafico: (newId: number) => void |
|
||||||
} |
|
||||||
|
|
||||||
export const Rectificaciones: FC<IProps> = (props) => { |
|
||||||
const [DTData, setDTData] = useState<ICorresponsalesRectificaciones[]>([]) |
|
||||||
const [id, setId] = useState(0) |
|
||||||
const [FolioGEMCO, setFolioGEMCO] = useState('') |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msgColor, setMsgColor] = React.useState('primary') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [DialogClone, setDialogClone] = useState(false) |
|
||||||
const [MsgTime, setMsgTime] = useState(3000) |
|
||||||
const dataColumns = [ |
|
||||||
{ |
|
||||||
name: 'id', |
|
||||||
left: true, |
|
||||||
width: '10%', |
|
||||||
selector: (row: ICorresponsalesRectificaciones) => row.id, |
|
||||||
cell: (row: ICorresponsalesRectificaciones) => ( |
|
||||||
<div |
|
||||||
onClick={() => { |
|
||||||
props.changeIdTrafico(row.id) |
|
||||||
}} |
|
||||||
> |
|
||||||
{row.id} |
|
||||||
</div> |
|
||||||
), |
|
||||||
sortable: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Folio', |
|
||||||
width: '20%', |
|
||||||
selector: (row: ICorresponsalesRectificaciones) => row.folioGemco, |
|
||||||
sortable: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Creado', |
|
||||||
width: '14%', |
|
||||||
selector: (row: ICorresponsalesRectificaciones) => row.fechaRegistro.substring(0, 10), |
|
||||||
sortable: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Prev', |
|
||||||
center: true, |
|
||||||
width: '20%', |
|
||||||
selector: (row: ICorresponsalesRectificaciones) => row.prevRecti, |
|
||||||
cell: (row: ICorresponsalesRectificaciones) => <div>{row.prevRecti}</div>, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Next', |
|
||||||
center: true, |
|
||||||
width: '20%', |
|
||||||
selector: (row: ICorresponsalesRectificaciones) => row.nextRecti, |
|
||||||
cell: (row: ICorresponsalesRectificaciones) => |
|
||||||
row.nextRecti === 0 ? ( |
|
||||||
<div |
|
||||||
style={{ textAlign: 'center', cursor: 'pointer' }} |
|
||||||
onClick={() => { |
|
||||||
setId(row.id) |
|
||||||
setFolioGEMCO(row.folioGemco) |
|
||||||
setDialogClone(true) |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'blue', size: '25px' }}> |
|
||||||
<FaCopy /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) : ( |
|
||||||
<div>{row.nextRecti}</div> |
|
||||||
), |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
RectiDataService.GetRectificaciones(props.IDTrafico) |
|
||||||
.then((response) => { |
|
||||||
setDTData(response.data) |
|
||||||
console.log(JSON.stringify(response.data)) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
}, [props.IDTrafico]) |
|
||||||
|
|
||||||
const clonItem = () => { |
|
||||||
RectiDataService.AddRectificacion(id) |
|
||||||
.then((response) => { |
|
||||||
if (response.status == 200) { |
|
||||||
setHeader('Informativo') |
|
||||||
setMsg('La rectificacion se agrego exitosamente') |
|
||||||
setShowMsg(true) |
|
||||||
setDialogClone(false) |
|
||||||
//if (data.id === 0) dispatch(addCorresponsalesFacturas(response.data))
|
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<DataTable |
|
||||||
title='Historial de rectificaciones' |
|
||||||
defaultSortFieldId={'id'} |
|
||||||
defaultSortAsc={true} |
|
||||||
pagination |
|
||||||
highlightOnHover |
|
||||||
columns={dataColumns} |
|
||||||
data={DTData ? DTData : []} |
|
||||||
/> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
time={MsgTime} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
<Modal |
|
||||||
show={DialogClone} |
|
||||||
onHide={() => { |
|
||||||
setDialogClone(false) |
|
||||||
}} |
|
||||||
size='sm' |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
<Alert variant='primary'> |
|
||||||
<b>¿Esta seguro de realizar una rectificacion sobre este trafico: [ {FolioGEMCO} ]?</b> |
|
||||||
</Alert> |
|
||||||
</Modal.Body> |
|
||||||
<Modal.Footer> |
|
||||||
<Row> |
|
||||||
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
|
||||||
<Button |
|
||||||
variant='danger' |
|
||||||
onClick={clonItem} |
|
||||||
size='sm' |
|
||||||
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
|
||||||
> |
|
||||||
Si |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={6} style={{ textAlign: 'right' }}> |
|
||||||
<Button |
|
||||||
variant='secondary' |
|
||||||
onClick={() => { |
|
||||||
setDialogClone(false) |
|
||||||
}} |
|
||||||
size='sm' |
|
||||||
> |
|
||||||
Cerrar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Modal.Footer> |
|
||||||
</Modal> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
@ -1,314 +0,0 @@ |
|||||||
import React, { FC, useEffect, useState } from 'react' |
|
||||||
import { Alert, Button, Card, Col, Container, Form, Row } from 'react-bootstrap' |
|
||||||
import ITabulador from '../../../Interfaces/Catalogos/ITabulador' |
|
||||||
import CTabDataService from '../../../Services/Corresponsalias/Corresponsales.Tabuladores.Services' |
|
||||||
import CTabPreDataService from '../../../Services/Corresponsalias/Corresponsales.Precuenta.Services' |
|
||||||
import CTabDetDataService from '../../../Services/Corresponsalias/Corresponsales.Tabuladores.Detalle.Sevices' |
|
||||||
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
|
||||||
import DTOConceptos from '../../../DTO/Utils/DTOConceptos' |
|
||||||
import DataTable from 'react-data-table-component' |
|
||||||
import 'react-data-table-component-extensions/dist/index.css' |
|
||||||
import ITabuladorConceptos from '../../../Interfaces/Catalogos/ITabuladorConceptos' |
|
||||||
import { ControlledInput } from '../../Utils/ControlledInput/ControlledInput' |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
IDCliente: number |
|
||||||
IDTabulador: number |
|
||||||
IDTrafico: number |
|
||||||
NombreCliente: string |
|
||||||
closeTabulador: (arg: boolean) => void |
|
||||||
cambiaPrecuenta: (IDPrecuenta: number) => void |
|
||||||
} |
|
||||||
|
|
||||||
interface IselectedRows { |
|
||||||
allSelected: boolean |
|
||||||
selectedCount: number |
|
||||||
selectedRows: any |
|
||||||
} |
|
||||||
|
|
||||||
export const Tabulador: FC<IProps> = (props) => { |
|
||||||
const [IDTabulador, setIDTabulador] = useState(props.IDTabulador) |
|
||||||
const [Concepto, setConcepto] = useState(0) |
|
||||||
const [DetalleConceptos, setDetalleConceptos] = useState<ITabuladorConceptos[]>([]) |
|
||||||
const [CatConceptos, setCatConceptos] = useState<DTOConceptos[]>([]) |
|
||||||
const [Tabuladores, setTabuladores] = useState<ITabulador[]>([]) |
|
||||||
const [AllTabuladores, setAllTabuladores] = useState<ITabulador[]>([]) |
|
||||||
const [Costo, setCosto] = useState('') |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msgColor, setMsgColor] = React.useState('primary') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
|
|
||||||
const columnsConcepts = [ |
|
||||||
{ |
|
||||||
name: 'id', |
|
||||||
width: '10%', |
|
||||||
selector: (row: ITabuladorConceptos) => row.id, |
|
||||||
sortable: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Concepto', |
|
||||||
width: '65%', |
|
||||||
selector: (row: ITabuladorConceptos) => row.concepto, |
|
||||||
sortable: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Costo', |
|
||||||
width: '15%', |
|
||||||
cell: (row: ITabuladorConceptos) => { |
|
||||||
return row.activo === 1 ? ( |
|
||||||
<ControlledInput id={row.id} value={row.costo} disabled={true} postCost={(id, value) => {}} /> |
|
||||||
) : ( |
|
||||||
<ControlledInput id={row.id} value={0} disabled={true} postCost={(id, value) => {}} /> |
|
||||||
) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Activo', |
|
||||||
width: '10%', |
|
||||||
cell: (row: ITabuladorConceptos) => { |
|
||||||
return ( |
|
||||||
<Form.Group controlId='formBasicCheckbox' style={{ textAlign: 'center' }}> |
|
||||||
<Form.Check |
|
||||||
type='checkbox' |
|
||||||
label='' |
|
||||||
checked={row.activo === 1 ? true : false} |
|
||||||
onClick={() => { |
|
||||||
switchConcept(row.id, 1) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Form.Group> |
|
||||||
) |
|
||||||
}, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
const columnsTabs = [ |
|
||||||
{ |
|
||||||
name: 'id', |
|
||||||
selector: (row: ITabulador) => row.id, |
|
||||||
sortable: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Nombre', |
|
||||||
width: '70%', |
|
||||||
// selector: (row: ITabulador) => row.nombre,
|
|
||||||
cell: (row: ITabulador) => ( |
|
||||||
<div |
|
||||||
style={{ width: '450px', cursor: 'pointer' }} |
|
||||||
onClick={() => { |
|
||||||
setIDTabulador(row.id) |
|
||||||
}} |
|
||||||
> |
|
||||||
{row.nombre} |
|
||||||
</div> |
|
||||||
), |
|
||||||
sortable: true, |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
const switchConcept = (id: number, status: number) => { |
|
||||||
CTabPreDataService.ChangeStatus(id) |
|
||||||
.then((response) => { |
|
||||||
if (response.status === 200) { |
|
||||||
let tmp = DetalleConceptos |
|
||||||
let idx = tmp.findIndex((obj) => obj.id == id) |
|
||||||
tmp[idx].activo = status === 1 ? 0 : 1 |
|
||||||
setDetalleConceptos(tmp) |
|
||||||
setHeader('Confirmacion') |
|
||||||
setMsg(response.data.respuesta) |
|
||||||
setShowMsg(true) |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
// const postCost = (id: number, Cost: number) => {}
|
|
||||||
|
|
||||||
const GetAllTabs = () => { |
|
||||||
CTabDataService.GetByCustomer(props.IDCliente) |
|
||||||
.then((response) => { |
|
||||||
setTabuladores(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
GetAllTabs() |
|
||||||
}, []) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
CTabPreDataService.GetAll(0, props.IDTrafico) |
|
||||||
.then((response) => { |
|
||||||
console.log('conceptos cargados debido a el tabulador guardado ' + JSON.stringify(response.data)) |
|
||||||
setDetalleConceptos(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
// console.log(Tabulador)
|
|
||||||
}, [IDTabulador, props]) |
|
||||||
|
|
||||||
const filtraTabulador = (e: any) => { |
|
||||||
if (e.target.value !== '') { |
|
||||||
setTabuladores( |
|
||||||
AllTabuladores.filter(function (el) { |
|
||||||
return el.nombre.toLocaleLowerCase().includes(e.target.value.toLocaleLowerCase()) |
|
||||||
}) |
|
||||||
) |
|
||||||
} else { |
|
||||||
setTabuladores(AllTabuladores) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const saveForm = () => { |
|
||||||
// alert(IDTabulador)
|
|
||||||
CTabPreDataService.Append(IDTabulador, props.IDTrafico) |
|
||||||
.then((response) => { |
|
||||||
setDetalleConceptos(response.data) |
|
||||||
props.cambiaPrecuenta(IDTabulador) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const addConcept = () => { |
|
||||||
if (IDTabulador === 0) { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Por favor, primero seleccione el tabulador') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
if (Concepto === 0) { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Por favor, primero seleccione el concepto') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
// postCost(0, 0)
|
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Container fluid> |
|
||||||
<Alert variant='primary'> |
|
||||||
<Row> |
|
||||||
<Col xs={2} style={{ paddingTop: '5px' }}> |
|
||||||
<h5>Cliente: </h5> |
|
||||||
</Col> |
|
||||||
<Col xs={10} style={{ textAlign: 'center' }}> |
|
||||||
<h4>{props.NombreCliente}</h4> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row> |
|
||||||
<Col xs={3}> |
|
||||||
<h6>Tabulador asignado: </h6> |
|
||||||
</Col> |
|
||||||
<Col xs={7}> |
|
||||||
<Form.Control |
|
||||||
as='select' |
|
||||||
value={IDTabulador} |
|
||||||
onChange={(e) => setIDTabulador(parseInt(e.target.value))} |
|
||||||
className='form-select form-select-sm' |
|
||||||
style={{ fontSize: '15px' }} |
|
||||||
> |
|
||||||
<option value='0'>- No tiene tabulador asignado -</option> |
|
||||||
{Tabuladores |
|
||||||
? Tabuladores.map((c) => { |
|
||||||
return <option value={c.id}>{c.nombre}</option> |
|
||||||
}) |
|
||||||
: null} |
|
||||||
</Form.Control> |
|
||||||
</Col> |
|
||||||
<Col xs={1}> |
|
||||||
<Button |
|
||||||
variant='primary' |
|
||||||
size='sm' |
|
||||||
style={{ paddingLeft: '10px', paddingRight: '10px' }} |
|
||||||
onClick={() => saveForm()} |
|
||||||
> |
|
||||||
Guardar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Alert> |
|
||||||
<Row> |
|
||||||
{/* <Col xs={6}> |
|
||||||
<Card style={{}}> |
|
||||||
<Card.Body> |
|
||||||
<Card.Subtitle className='mb-2 text-muted'> |
|
||||||
<Row> |
|
||||||
<Col xs={2} style={{ paddingTop: '8px' }}> |
|
||||||
Tabulador |
|
||||||
</Col> |
|
||||||
<Col xs={10}> |
|
||||||
<Form.Control |
|
||||||
type='text' |
|
||||||
size='sm' |
|
||||||
placeholder='Busqueda de tabulador...' |
|
||||||
onChange={(e) => { |
|
||||||
filtraTabulador(e) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Card.Subtitle> |
|
||||||
<DataTable |
|
||||||
noHeader |
|
||||||
defaultSortFieldId={'id'} |
|
||||||
defaultSortAsc={true} |
|
||||||
pagination |
|
||||||
highlightOnHover |
|
||||||
columns={columnsTabs} |
|
||||||
data={Tabuladores} |
|
||||||
/> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
</Col> */} |
|
||||||
<Col xs={12}> |
|
||||||
<Card style={{}}> |
|
||||||
<Card.Body> |
|
||||||
<Card.Subtitle className='mb-2 text-muted'></Card.Subtitle> |
|
||||||
<DataTable |
|
||||||
noHeader |
|
||||||
defaultSortFieldId={'id'} |
|
||||||
defaultSortAsc={true} |
|
||||||
pagination |
|
||||||
highlightOnHover |
|
||||||
columns={columnsConcepts} |
|
||||||
data={DetalleConceptos} |
|
||||||
/> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Container> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
File diff suppressed because it is too large
Load Diff
@ -1,525 +0,0 @@ |
|||||||
import { RowClickedEvent } from 'ag-grid-community' |
|
||||||
import { AgGridReact } from 'ag-grid-react' |
|
||||||
import React, { FC, useEffect, useState } from 'react' |
|
||||||
import { Button, Card, Form, Modal } from 'react-bootstrap' |
|
||||||
import ICorresponsalTrafico from '../../Interfaces/Corresponsales/ICorresponsalTrafico' |
|
||||||
import ClientesDataService from '../../Services/Catalogos/Clientes.Services' |
|
||||||
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
|
||||||
import IClientes from '../../Interfaces/Catalogos/IClientes' |
|
||||||
import { BsPlusLg, BsFileEarmarkExcel, BsSearch, BsFillXCircleFill, BsCheckCircleFill } from 'react-icons/bs' |
|
||||||
import * as XLSX from 'xlsx' |
|
||||||
import TraficoCorresponsales from '../Corresponsales/TraficoCorresponsales' |
|
||||||
import ICatCorresponsales from '../../Interfaces/Catalogos/ICatCorresponsales' |
|
||||||
import CorresponsalesDataService from '../../Services/Catalogos/Corresponsales.Services' |
|
||||||
import reportesServices from '../../Services/Reportes/reportes.services' |
|
||||||
import moment from 'moment' |
|
||||||
import DTORptCorresponsalesTraficos from '../../DTO/Corresponsales/DTORptCorresponsalesTraficos' |
|
||||||
import { InitCorresponsalesFacturas } from '../../store/features/Corresponsales/CorresponsalesFacturasSlice' |
|
||||||
import { InitCorresponsalesFacturasTerceros } from '../../store/features/Corresponsales/CorresponsalesFacturasTercerosSlice' |
|
||||||
import { InitCorresponsalesContenedores } from '../../store/features/Corresponsales/CorresponsalesContenedoresSlice' |
|
||||||
import { useDispatch } from 'react-redux' |
|
||||||
import { IconContext } from 'react-icons' |
|
||||||
import { ProgressBar } from './customCells/progressBar' |
|
||||||
import { useParams } from 'react-router-dom' |
|
||||||
import { FaHandSparkles } from 'react-icons/fa' |
|
||||||
|
|
||||||
interface IProps {} |
|
||||||
|
|
||||||
export default function RptCorresponsalesTraficos (props: IProps) { |
|
||||||
const { proc, modo } = useParams() |
|
||||||
const [UserId, setUserId] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('UserId') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
|
||||||
}) |
|
||||||
const [Depto, setDepto] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('Departamento') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
|
||||||
}) |
|
||||||
const queryParams = new URLSearchParams(window.location.search) |
|
||||||
const status = queryParams.get('status') |
|
||||||
const [StatusAnticipos, setStatusAnticipos] = useState(status ? parseInt(status) : 0) |
|
||||||
const dispatch = useDispatch() |
|
||||||
const [IDTrafico, setIDTrafico] = useState(0) |
|
||||||
const [Data, setData] = useState<ICorresponsalTrafico[]>([]) |
|
||||||
const [filteredData, setFilteredData] = useState<ICorresponsalTrafico[]>([]) |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [ShowModal, setShowModal] = useState(false) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [Inicio, setInicio] = useState(currentDate(-365)) |
|
||||||
const [Fin, setFin] = useState(currentDate(0)) |
|
||||||
const [TipoOperacion, setTipoOperacion] = useState(0) |
|
||||||
const [Cliente, setCliente] = useState(0) |
|
||||||
const [Corresponsal, setCorresponsal] = useState(0) |
|
||||||
const [Clientes, setClientes] = useState<Array<IClientes>>() |
|
||||||
const [filtro, setFiltro] = useState('') |
|
||||||
const gridRef = React.useRef<any>(null) |
|
||||||
const [DataCorresponsales, setDataCorresponsales] = useState<ICatCorresponsales[]>([]) |
|
||||||
const [columnDefs] = useState([ |
|
||||||
{ field: 'id', headerName: 'id', width: 70, sortable: true, filter: true }, |
|
||||||
{ |
|
||||||
field: 'proceso', |
|
||||||
headerName: 'Status', |
|
||||||
width: 90, |
|
||||||
center: true, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: ProgressBar, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'folio', |
|
||||||
headerName: 'Trafico', |
|
||||||
width: 140, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
return params.data.folio |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'fechaRegistro', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
return params.value.substring(0, 10) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ field: 'sUsuario', headerName: 'Usuario', sortable: true, filter: true }, |
|
||||||
{ |
|
||||||
field: 'sCliente', |
|
||||||
headerName: 'Cliente', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
}, |
|
||||||
{ field: 'sTipoOperacion', headerName: 'Tipo operacion', sortable: true, filter: true }, |
|
||||||
{ field: 'sOpEntrada', headerName: 'Op Entrada', sortable: true, filter: true }, |
|
||||||
{ field: 'sOpSalida', headerName: 'Op Salida', sortable: true, filter: true }, |
|
||||||
{ field: 'sCorresponsal', headerName: 'Corresponsal', sortable: true, filter: true }, |
|
||||||
{ field: 'patente', sortable: true, filter: true }, |
|
||||||
{ field: 'aduana', sortable: true, filter: true }, |
|
||||||
{ field: 'pedimento', sortable: true, filter: true }, |
|
||||||
{ |
|
||||||
field: 'fechaPago', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
if (params.value) return params.value.substring(0, 10) |
|
||||||
else return '' |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'fechaDesaduanamiento', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
if (params.value) return params.value.substring(0, 10) |
|
||||||
else return '' |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'zipgemco', |
|
||||||
headerName: 'Zip GEMCO', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
if (params.value === 'No') |
|
||||||
return ( |
|
||||||
<div style={{ paddingLeft: '20px' }}> |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
|
||||||
<BsFillXCircleFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) |
|
||||||
else |
|
||||||
return ( |
|
||||||
<div style={{ paddingLeft: '20px' }}> |
|
||||||
<IconContext.Provider value={{ color: 'green', size: '25px' }}> |
|
||||||
<BsCheckCircleFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'zipCorresponsal', |
|
||||||
headerName: 'Zip Corresponsal', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
if (params.value === 'No') |
|
||||||
return ( |
|
||||||
<div style={{ paddingLeft: '35px' }}> |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
|
||||||
<BsFillXCircleFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) |
|
||||||
else |
|
||||||
return ( |
|
||||||
<div style={{ paddingLeft: '35px' }}> |
|
||||||
<IconContext.Provider value={{ color: 'green', size: '25px' }}> |
|
||||||
<BsCheckCircleFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ field: 'ultimaActualizacion', sortable: true, filter: true }, |
|
||||||
]) |
|
||||||
const [msgColor, setMsgColor] = useState('primary') |
|
||||||
|
|
||||||
function ConvertHexToString(str: string) { |
|
||||||
return unescape(str.replace(/\\/g, '%')) |
|
||||||
} |
|
||||||
|
|
||||||
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 |
|
||||||
} |
|
||||||
|
|
||||||
/* useEffect(() => { |
|
||||||
if (proc && modo) { |
|
||||||
if (status) { |
|
||||||
setStatusAnticipos(parseInt(status)) |
|
||||||
} else setStatusAnticipos(0) |
|
||||||
const data: DTORptCorresponsalesTraficos = { |
|
||||||
Inicio: '', |
|
||||||
Fin: '', |
|
||||||
TipoOperacion: 0, |
|
||||||
NoCliente: 0, |
|
||||||
IdCorresponsal: Corresponsal, |
|
||||||
Proceso: proc ? parseInt(proc.replace('proc=','')) : 0, |
|
||||||
Modo: modo ? parseInt(modo.replace('modo=','')) : 0, |
|
||||||
} |
|
||||||
reportesServices |
|
||||||
.getRptCorresponsalesTraficos(data) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
setFilteredData(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
}, [proc, modo]) */ |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
ClientesDataService.getAllClientes(UserId) |
|
||||||
.then((response) => { |
|
||||||
setClientes(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
|
|
||||||
CorresponsalesDataService.getAll() |
|
||||||
.then((response) => { |
|
||||||
setDataCorresponsales(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
generaReporte() |
|
||||||
}, []) |
|
||||||
|
|
||||||
function getParams(e: RowClickedEvent) { |
|
||||||
AbreTrafico(e.data.id) |
|
||||||
} |
|
||||||
|
|
||||||
function AbreTrafico(id: number) { |
|
||||||
dispatch(InitCorresponsalesFacturas(IDTrafico)) |
|
||||||
dispatch(InitCorresponsalesFacturasTerceros(IDTrafico)) |
|
||||||
dispatch(InitCorresponsalesContenedores(IDTrafico)) |
|
||||||
setIDTrafico(id) |
|
||||||
setShowModal(true) |
|
||||||
} |
|
||||||
|
|
||||||
const generaReporte = () => { |
|
||||||
if (proc && modo) { |
|
||||||
const data: DTORptCorresponsalesTraficos = { |
|
||||||
Inicio: moment(Inicio).format('YYYY-MM-DD'), |
|
||||||
Fin: moment(Fin).format('YYYY-MM-DD'), |
|
||||||
TipoOperacion: TipoOperacion, |
|
||||||
NoCliente: Cliente, |
|
||||||
IdCorresponsal: Corresponsal, |
|
||||||
Proceso: proc ? parseInt(proc.replace('proc=','')) : 0, |
|
||||||
Modo: modo ? parseInt(modo.replace('modo=','')) : 0, |
|
||||||
} |
|
||||||
reportesServices |
|
||||||
.getRptCorresponsalesTraficos(data) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
setFilteredData(response.data) |
|
||||||
console.log(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const filtraReporte = (e: any) => { |
|
||||||
setFiltro(e.target.value) |
|
||||||
gridRef.current.api.setQuickFilter(e.target.value) |
|
||||||
} |
|
||||||
|
|
||||||
const downloadExcel = () => { |
|
||||||
exportExcel(Data, 'Traficos de corresponsales') |
|
||||||
} |
|
||||||
|
|
||||||
function exportExcel(jsonData: any[], fileName: string): void { |
|
||||||
let Heading = [ |
|
||||||
[ |
|
||||||
{ title: 'Aduana Seccion Despacho', style: { font: { sz: '18', bold: true } } }, |
|
||||||
'Patente', |
|
||||||
'Referencia', |
|
||||||
'Pedimento', |
|
||||||
'Fecha Pago', |
|
||||||
'Fecha Entrada Presentacion', |
|
||||||
'Clave Docto', |
|
||||||
'Es rectificacion', |
|
||||||
'Tipo Cambio', |
|
||||||
'Valor Dls', |
|
||||||
'Valor Aduana', |
|
||||||
'Numero Factura', |
|
||||||
'Fecha Factura', |
|
||||||
'Proveedor Factura', |
|
||||||
'Incrementables Fact', |
|
||||||
'Fraccion', |
|
||||||
'Subdiv NICO', |
|
||||||
'Descripcion', |
|
||||||
'Pais Origen', |
|
||||||
'Pais Vendedor', |
|
||||||
'Tasa DTA', |
|
||||||
'Tasa IGI', |
|
||||||
'Numero Parte', |
|
||||||
'Cantidad Comercial', |
|
||||||
'TL Pais', |
|
||||||
'Tipo Tasa', |
|
||||||
'Unidad Comercial', |
|
||||||
'Valor Factura Item', |
|
||||||
'Valor Comercial Ped', |
|
||||||
'Valor Factura Item MN', |
|
||||||
], |
|
||||||
] |
|
||||||
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() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<div className='row'> |
|
||||||
<div className='col-md-2'> |
|
||||||
<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' |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<div className='col-md-2'> |
|
||||||
<Form.Control |
|
||||||
defaultValue={Fin} |
|
||||||
type='date' |
|
||||||
name='Fin' |
|
||||||
placeholder='Fin' |
|
||||||
title='Fin' |
|
||||||
alt='Fin' |
|
||||||
onChange={(e) => setFin(e.target.value)} |
|
||||||
size='sm' |
|
||||||
/> |
|
||||||
</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.Control |
|
||||||
as='select' |
|
||||||
onChange={(e) => { |
|
||||||
setCliente(parseInt(e.target.value)) |
|
||||||
}} |
|
||||||
className='form-select form-select-sm' |
|
||||||
> |
|
||||||
<option value='0'>-SELECCIONE-</option> |
|
||||||
{Clientes |
|
||||||
? Clientes.map((c) => { |
|
||||||
return ( |
|
||||||
<option value={c.sClave} key={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'> |
|
||||||
{(Depto === 'Corresponsalias' || Depto ==='Sistemas') ? ( |
|
||||||
<Button |
|
||||||
size='sm' |
|
||||||
variant='primary' |
|
||||||
onClick={() => { |
|
||||||
AbreTrafico(0) |
|
||||||
}} |
|
||||||
> |
|
||||||
<BsPlusLg /> |
|
||||||
Nuevo |
|
||||||
</Button> |
|
||||||
) : ( |
|
||||||
'' |
|
||||||
)} |
|
||||||
</div> |
|
||||||
<div className='col-4'> |
|
||||||
<Form.Control |
|
||||||
type='text' |
|
||||||
size='sm' |
|
||||||
placeholder='Search...' |
|
||||||
onChange={(e) => { |
|
||||||
filtraReporte(e) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<div className='col'> |
|
||||||
<Button |
|
||||||
size='sm' |
|
||||||
variant='success' |
|
||||||
onClick={() => { |
|
||||||
downloadExcel() |
|
||||||
}} |
|
||||||
> |
|
||||||
<BsFileEarmarkExcel /> |
|
||||||
Excel |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
<div className='col'>Corresponsal</div> |
|
||||||
<div className='col-4'> |
|
||||||
<Form.Control |
|
||||||
as='select' |
|
||||||
onChange={(e) => { |
|
||||||
setCorresponsal(parseInt(e.target.value)) |
|
||||||
}} |
|
||||||
className='form-select form-select-sm' |
|
||||||
> |
|
||||||
<option value='0'>-SELECCIONE-</option> |
|
||||||
{DataCorresponsales |
|
||||||
? DataCorresponsales.map((c) => { |
|
||||||
return ( |
|
||||||
<option value={c.id} key={c.id}> |
|
||||||
{c.nombre} |
|
||||||
</option> |
|
||||||
) |
|
||||||
}) |
|
||||||
: null} |
|
||||||
</Form.Control> |
|
||||||
</div> |
|
||||||
<div className='col'></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={ShowModal} |
|
||||||
/* onHide={() => setShowModal(false)} */ |
|
||||||
size='sm' |
|
||||||
dialogClassName='modal-90w modal-innerDiv' |
|
||||||
disableEscapeKeyDown={true} |
|
||||||
> |
|
||||||
<Modal.Body style={{ |
|
||||||
maxHeight: 'calc(100vh)', |
|
||||||
overflowY: 'auto' |
|
||||||
}}> |
|
||||||
<div> |
|
||||||
<TraficoCorresponsales |
|
||||||
IDTrafico={IDTrafico} |
|
||||||
onClose={function (val: boolean): void { |
|
||||||
setShowModal(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</Modal.Body> |
|
||||||
</Modal> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
@ -1,519 +0,0 @@ |
|||||||
import { RowClickedEvent } from 'ag-grid-community' |
|
||||||
import { AgGridReact } from 'ag-grid-react' |
|
||||||
import React, { FC, useEffect, useState } from 'react' |
|
||||||
import { Button, Card, Form, Modal } from 'react-bootstrap' |
|
||||||
import ICorresponsalTrafico from '../../Interfaces/Corresponsales/ICorresponsalTrafico' |
|
||||||
import ClientesDataService from '../../Services/Catalogos/Clientes.Services' |
|
||||||
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
|
||||||
import IClientes from '../../Interfaces/Catalogos/IClientes' |
|
||||||
import { BsPlusLg, BsFileEarmarkExcel, BsSearch, BsFillXCircleFill, BsCheckCircleFill } from 'react-icons/bs' |
|
||||||
import * as XLSX from 'xlsx' |
|
||||||
import TraficoCorresponsales from '../Corresponsales/TraficoCorresponsales' |
|
||||||
import ICatCorresponsales from '../../Interfaces/Catalogos/ICatCorresponsales' |
|
||||||
import CorresponsalesDataService from '../../Services/Catalogos/Corresponsales.Services' |
|
||||||
import reportesServices from '../../Services/Reportes/reportes.services' |
|
||||||
import moment from 'moment' |
|
||||||
import DTORptCorresponsalesTraficos from '../../DTO/Corresponsales/DTORptCorresponsalesTraficos' |
|
||||||
import { InitCorresponsalesFacturas } from '../../store/features/Corresponsales/CorresponsalesFacturasSlice' |
|
||||||
import { InitCorresponsalesFacturasTerceros } from '../../store/features/Corresponsales/CorresponsalesFacturasTercerosSlice' |
|
||||||
import { InitCorresponsalesContenedores } from '../../store/features/Corresponsales/CorresponsalesContenedoresSlice' |
|
||||||
import { useDispatch } from 'react-redux' |
|
||||||
import { IconContext } from 'react-icons' |
|
||||||
import { ProgressBar } from './customCells/progressBar' |
|
||||||
import { ProcessStatus } from './customCells/ProcessStatus' |
|
||||||
|
|
||||||
interface IProps {} |
|
||||||
|
|
||||||
export default function RptCorresponsalesTraficosHst (props: IProps) { |
|
||||||
const [UserId, setUserId] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('UserId') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
|
||||||
}) |
|
||||||
const [Depto, setDepto] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('Departamento') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
|
||||||
}) |
|
||||||
const queryParams = new URLSearchParams(window.location.search) |
|
||||||
const proc = queryParams.get('proc') |
|
||||||
const status = queryParams.get('status') |
|
||||||
const Modo = queryParams.get('Modo') |
|
||||||
//const [Mode, setMode] = useState(parseInt(window.location.search.replace('?proc=', '0')))
|
|
||||||
const [StatusAnticipos, setStatusAnticipos] = useState(status ? parseInt(status) : 0) |
|
||||||
const dispatch = useDispatch() |
|
||||||
const [IDTrafico, setIDTrafico] = useState(0) |
|
||||||
const [Data, setData] = useState<ICorresponsalTrafico[]>([]) |
|
||||||
const [filteredData, setFilteredData] = useState<ICorresponsalTrafico[]>([]) |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [ShowModal, setShowModal] = useState(false) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [Inicio, setInicio] = useState(currentDate(-365)) |
|
||||||
const [Fin, setFin] = useState(currentDate(0)) |
|
||||||
const [TipoOperacion, setTipoOperacion] = useState(0) |
|
||||||
const [Cliente, setCliente] = useState(0) |
|
||||||
const [Corresponsal, setCorresponsal] = useState(0) |
|
||||||
const [Clientes, setClientes] = useState<Array<IClientes>>() |
|
||||||
const [filtro, setFiltro] = useState('') |
|
||||||
const gridRef = React.useRef<any>(null) |
|
||||||
const [DataCorresponsales, setDataCorresponsales] = useState<ICatCorresponsales[]>([]) |
|
||||||
const [columnDefs] = useState([ |
|
||||||
{ field: 'id', headerName: 'id', width: 70, sortable: true, filter: true }, |
|
||||||
{ |
|
||||||
field: 'proceso', |
|
||||||
headerName: 'Status', |
|
||||||
width: 90, |
|
||||||
center: true, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: ProcessStatus, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'folio', |
|
||||||
headerName: 'Folio', |
|
||||||
width: 120, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
return params.data.folio |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'fechaRegistro', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
return params.value.substring(0, 10) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ field: 'sUsuario', headerName: 'Usuario', sortable: true, filter: true }, |
|
||||||
{ |
|
||||||
field: 'sCliente', |
|
||||||
headerName: 'Cliente', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
}, |
|
||||||
{ field: 'sTipoOperacion', headerName: 'Tipo operacion', sortable: true, filter: true }, |
|
||||||
{ field: 'sOpEntrada', headerName: 'Op Entrada', sortable: true, filter: true }, |
|
||||||
{ field: 'sOpSalida', headerName: 'Op Salida', sortable: true, filter: true }, |
|
||||||
{ field: 'sCorresponsal', headerName: 'Corresponsal', sortable: true, filter: true }, |
|
||||||
{ field: 'patente', sortable: true, filter: true }, |
|
||||||
{ field: 'aduana', sortable: true, filter: true }, |
|
||||||
{ field: 'pedimento', sortable: true, filter: true }, |
|
||||||
{ |
|
||||||
field: 'fechaPago', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
if (params.value) return params.value.substring(0, 10) |
|
||||||
else return '' |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'fechaDesaduanamiento', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
if (params.value) return params.value.substring(0, 10) |
|
||||||
else return '' |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'zipgemco', |
|
||||||
headerName: 'Zip GEMCO', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
if (params.value === 'No') |
|
||||||
return ( |
|
||||||
<div style={{ paddingLeft: '20px' }}> |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
|
||||||
<BsFillXCircleFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) |
|
||||||
else |
|
||||||
return ( |
|
||||||
<div style={{ paddingLeft: '20px' }}> |
|
||||||
<IconContext.Provider value={{ color: 'green', size: '25px' }}> |
|
||||||
<BsCheckCircleFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'zipCorresponsal', |
|
||||||
headerName: 'Zip Corresponsal', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
if (params.value === 'No') |
|
||||||
return ( |
|
||||||
<div style={{ paddingLeft: '35px' }}> |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
|
||||||
<BsFillXCircleFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) |
|
||||||
else |
|
||||||
return ( |
|
||||||
<div style={{ paddingLeft: '35px' }}> |
|
||||||
<IconContext.Provider value={{ color: 'green', size: '25px' }}> |
|
||||||
<BsCheckCircleFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) |
|
||||||
}, |
|
||||||
}, |
|
||||||
{ field: 'ultimaActualizacion', sortable: true, filter: true }, |
|
||||||
]) |
|
||||||
const [msgColor, setMsgColor] = useState('primary') |
|
||||||
|
|
||||||
function ConvertHexToString(str: string) { |
|
||||||
return unescape(str.replace(/\\/g, '%')) |
|
||||||
} |
|
||||||
|
|
||||||
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 |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
// if (proc) setMode(parseInt(proc))
|
|
||||||
if (status) { |
|
||||||
setStatusAnticipos(parseInt(status)) |
|
||||||
} else setStatusAnticipos(0) |
|
||||||
const data: DTORptCorresponsalesTraficos = { |
|
||||||
Inicio: '', |
|
||||||
Fin: '', |
|
||||||
TipoOperacion: 0, |
|
||||||
NoCliente: 0, |
|
||||||
IdCorresponsal: Corresponsal, |
|
||||||
Proceso: proc ? parseInt(proc) : 0, |
|
||||||
Modo: Modo ? parseInt(Modo) : 0, |
|
||||||
} |
|
||||||
reportesServices |
|
||||||
.getRptCorresponsalesTraficos(data) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
setFilteredData(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
}, [proc, status]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
ClientesDataService.getAllClientes(UserId) |
|
||||||
.then((response) => { |
|
||||||
setClientes(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
|
|
||||||
CorresponsalesDataService.getAll() |
|
||||||
.then((response) => { |
|
||||||
setDataCorresponsales(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
function getParams(e: RowClickedEvent) { |
|
||||||
AbreTrafico(e.data.id) |
|
||||||
} |
|
||||||
|
|
||||||
function AbreTrafico(id: number) { |
|
||||||
dispatch(InitCorresponsalesFacturas(IDTrafico)) |
|
||||||
dispatch(InitCorresponsalesFacturasTerceros(IDTrafico)) |
|
||||||
dispatch(InitCorresponsalesContenedores(IDTrafico)) |
|
||||||
setIDTrafico(id) |
|
||||||
setShowModal(true) |
|
||||||
} |
|
||||||
|
|
||||||
const generaReporte = () => { |
|
||||||
const data: DTORptCorresponsalesTraficos = { |
|
||||||
Inicio: moment(Inicio).format('YYYY-MM-DD'), |
|
||||||
Fin: moment(Fin).format('YYYY-MM-DD'), |
|
||||||
TipoOperacion: TipoOperacion, |
|
||||||
NoCliente: Cliente, |
|
||||||
IdCorresponsal: Corresponsal, |
|
||||||
Proceso: proc ? parseInt(proc) : 0, |
|
||||||
Modo: Modo ? parseInt(Modo) : 0, |
|
||||||
} |
|
||||||
reportesServices |
|
||||||
.getRptCorresponsalesTraficos(data) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
setFilteredData(response.data) |
|
||||||
console.log(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const filtraReporte = (e: any) => { |
|
||||||
setFiltro(e.target.value) |
|
||||||
gridRef.current.api.setQuickFilter(e.target.value) |
|
||||||
} |
|
||||||
|
|
||||||
const downloadExcel = () => { |
|
||||||
exportExcel(Data, 'Traficos de corresponsales') |
|
||||||
} |
|
||||||
|
|
||||||
function exportExcel(jsonData: any[], fileName: string): void { |
|
||||||
let Heading = [ |
|
||||||
[ |
|
||||||
{ title: 'Aduana Seccion Despacho', style: { font: { sz: '18', bold: true } } }, |
|
||||||
'Patente', |
|
||||||
'Referencia', |
|
||||||
'Pedimento', |
|
||||||
'Fecha Pago', |
|
||||||
'Fecha Entrada Presentacion', |
|
||||||
'Clave Docto', |
|
||||||
'Es rectificacion', |
|
||||||
'Tipo Cambio', |
|
||||||
'Valor Dls', |
|
||||||
'Valor Aduana', |
|
||||||
'Numero Factura', |
|
||||||
'Fecha Factura', |
|
||||||
'Proveedor Factura', |
|
||||||
'Incrementables Fact', |
|
||||||
'Fraccion', |
|
||||||
'Subdiv NICO', |
|
||||||
'Descripcion', |
|
||||||
'Pais Origen', |
|
||||||
'Pais Vendedor', |
|
||||||
'Tasa DTA', |
|
||||||
'Tasa IGI', |
|
||||||
'Numero Parte', |
|
||||||
'Cantidad Comercial', |
|
||||||
'TL Pais', |
|
||||||
'Tipo Tasa', |
|
||||||
'Unidad Comercial', |
|
||||||
'Valor Factura Item', |
|
||||||
'Valor Comercial Ped', |
|
||||||
'Valor Factura Item MN', |
|
||||||
], |
|
||||||
] |
|
||||||
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() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<div className='row'> |
|
||||||
<div className='col-md-2'> |
|
||||||
<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' |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<div className='col-md-2'> |
|
||||||
<Form.Control |
|
||||||
defaultValue={Fin} |
|
||||||
type='date' |
|
||||||
name='Fin' |
|
||||||
placeholder='Fin' |
|
||||||
title='Fin' |
|
||||||
alt='Fin' |
|
||||||
onChange={(e) => setFin(e.target.value)} |
|
||||||
size='sm' |
|
||||||
/> |
|
||||||
</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.Control |
|
||||||
as='select' |
|
||||||
onChange={(e) => { |
|
||||||
setCliente(parseInt(e.target.value)) |
|
||||||
}} |
|
||||||
className='form-select form-select-sm' |
|
||||||
> |
|
||||||
<option value='0'>-SELECCIONE-</option> |
|
||||||
{Clientes |
|
||||||
? Clientes.map((c) => { |
|
||||||
return ( |
|
||||||
<option value={c.sClave} key={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'> |
|
||||||
{Depto === 'Corresponsalias' ? ( |
|
||||||
<Button |
|
||||||
size='sm' |
|
||||||
variant='primary' |
|
||||||
onClick={() => { |
|
||||||
AbreTrafico(0) |
|
||||||
}} |
|
||||||
> |
|
||||||
<BsPlusLg /> |
|
||||||
Nuevo |
|
||||||
</Button> |
|
||||||
) : ( |
|
||||||
'' |
|
||||||
)} |
|
||||||
</div> |
|
||||||
<div className='col-4'> |
|
||||||
<Form.Control |
|
||||||
type='text' |
|
||||||
size='sm' |
|
||||||
placeholder='Search...' |
|
||||||
onChange={(e) => { |
|
||||||
filtraReporte(e) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<div className='col'> |
|
||||||
<Button |
|
||||||
size='sm' |
|
||||||
variant='success' |
|
||||||
onClick={() => { |
|
||||||
downloadExcel() |
|
||||||
}} |
|
||||||
> |
|
||||||
<BsFileEarmarkExcel /> |
|
||||||
Excel |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
<div className='col'>Corresponsal</div> |
|
||||||
<div className='col-4'> |
|
||||||
<Form.Control |
|
||||||
as='select' |
|
||||||
onChange={(e) => { |
|
||||||
setCorresponsal(parseInt(e.target.value)) |
|
||||||
}} |
|
||||||
className='form-select form-select-sm' |
|
||||||
> |
|
||||||
<option value='0'>-SELECCIONE-</option> |
|
||||||
{DataCorresponsales |
|
||||||
? DataCorresponsales.map((c) => { |
|
||||||
return ( |
|
||||||
<option value={c.id} key={c.id}> |
|
||||||
{c.nombre} |
|
||||||
</option> |
|
||||||
) |
|
||||||
}) |
|
||||||
: null} |
|
||||||
</Form.Control> |
|
||||||
</div> |
|
||||||
<div className='col'></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={'single'} |
|
||||||
rowMultiSelectWithClick={true} |
|
||||||
onRowClicked={(e) => getParams(e)} |
|
||||||
></AgGridReact> |
|
||||||
</div> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
<Modal |
|
||||||
show={ShowModal} |
|
||||||
/* onHide={() => setShowModal(false)} */ |
|
||||||
size='sm' |
|
||||||
dialogClassName='modal-90w modal-innerDiv' |
|
||||||
disableEscapeKeyDown={true} |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
<div> |
|
||||||
<TraficoCorresponsales |
|
||||||
IDTrafico={IDTrafico} |
|
||||||
onClose={function (val: boolean): void { |
|
||||||
setShowModal(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</Modal.Body> |
|
||||||
</Modal> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
Loading…
Reference in new issue