import ButtonConfirm from '@/components/ButtomConfirm'; import EllipsisDiv from '@/components/Div/EllipsisDiv'; import { RESPONSE_CODE } from '@/constants/enum'; import InvoiceWriteOffModal from '@/pages/Invoice/Invoice/components/invoiceWriteOffModal'; import BankImportModal from '@/pages/Invoice/InvoiceVerification/components/BankImportModal'; import InvoiceRecordDetailModal from '@/pages/Invoice/InvoiceVerification/components/InvoiceRecordDetailModal'; import InvoiceVerificationModal from '@/pages/Invoice/InvoiceVerification/components/InvoiceVerificationModal'; import { BANK_STATEMENT_COLUMNS, INVOICE_STATUS, } from '@/pages/Invoice/constant'; import { INVOCING_STATUS, PAYEE_OPTIONS } from '@/pages/Order/constant'; import { postServiceBankStatementDeleteBankStatement, postServiceBankStatementEditBankStatement, postServiceBankStatementQueryBankStatement, postServiceInvoiceGetWriteOffRecord, } from '@/services'; import { downloadFile } from '@/services/order'; import { enumValueToLabel, formatDateTime } from '@/utils'; import { formatDate } from '@/utils/time'; import { PlusOutlined } from '@ant-design/icons'; import { ActionType, ProTable } from '@ant-design/pro-components'; import { Button, message } from 'antd'; import { useRef, useState } from 'react'; const InvoiceRecord = () => { const invoiceActionRef = useRef<ActionType>(); const bankActionRef = useRef<ActionType>(); const [bankImportModalVisible, setBankImportModalVisible] = useState(false); const [invoiceVerificationVisible, setInvoiceVerificationVisible] = useState(false); const [perms, setPerms] = useState([]); const [messageApi, contextHolder] = message.useMessage(); const [invoiceId] = useState(undefined); const [invoiceRecordDetailVisible, setInvoiceRecordDetailVisible] = useState(false); const [invoiceRecord] = useState({}); const reloadBankStatementTable = () => { bankActionRef.current?.reload(); }; const getTableCellText = (target: any) => { if (!target) { return ''; } if (target.props) { return target.props.text; } return target; }; const bankStatemetColumnsInit = () => { let columns = BANK_STATEMENT_COLUMNS.map((item) => { let newItem = { ...item }; let dataIndex = item.dataIndex; let dataType = item.valueType; newItem.render = (text, record) => { let textValue = record[dataIndex]; if (dataType === 'date') { textValue = formatDate(textValue); } if (dataType === 'dateTime') { textValue = formatDateTime(textValue); } if (dataType === 'money') { if (textValue === null || textValue === undefined) { textValue = ''; } else { textValue = '¥' + textValue; } } switch (dataIndex) { case 'invoiceStatus': return ( <EllipsisDiv text={enumValueToLabel( getTableCellText(textValue), INVOCING_STATUS, )} /> ); case 'status': return ( <EllipsisDiv text={enumValueToLabel( getTableCellText(textValue), INVOICE_STATUS, )} /> ); case 'payee': return ( <EllipsisDiv text={enumValueToLabel( getTableCellText(textValue), PAYEE_OPTIONS, )} /> ); default: return <EllipsisDiv text={getTableCellText(textValue)} />; } }; return newItem; }); columns.push({ title: '操作', valueType: 'option', key: 'option', fixed: 'right', width: 80, render: (text, record, _, action) => { let btns = []; if (record.paths?.includes('editBankStatement')) { btns.push( <a key="editable" onClick={() => { action?.startEditable?.(record.id); }} > 编辑 </a>, ); } if (record.paths?.includes('writeOff') && record.writeOffId !== null) { btns.push( <InvoiceWriteOffModal getData={async () => { console.log(record.writeOffId); const res = await postServiceInvoiceGetWriteOffRecord({ data: { id: record.writeOffId }, }); const data = res.data; return { invoiceWriteOffId: data.id, invoices: data.invoiceDtos, bankStatements: data.bankStatementDtos, }; }} key="writeOff" triggerButton={<Button type="link">核销记录</Button>} readOnly={true} />, ); } if (record.paths?.includes('deleteBankStatement')) { btns.push( <ButtonConfirm key="delete" className="p-0" title={'是否删除该银行流水记录?'} text="删除" onConfirm={async () => { let res = await postServiceBankStatementDeleteBankStatement({ data: { id: record.id }, }); if (res.result === RESPONSE_CODE.SUCCESS) { message.success(res.message); reloadBankStatementTable(); } }} />, ); } return btns; }, }); return columns; }; return ( <div className="invoice-index"> <ProTable columns={bankStatemetColumnsInit()} actionRef={bankActionRef} cardBordered pagination={{ pageSizeOptions: ['10', '20', '50', '100'], }} editable={{ type: 'multiple', onSave: async (rowKey, data) => { await postServiceBankStatementEditBankStatement({ data: data }); }, actionRender: (row, config, defaultDom) => [ defaultDom.save, defaultDom.cancel, ], }} request={async (params) => { const res = await postServiceBankStatementQueryBankStatement({ data: { ...params }, }); if (res) { setPerms(res?.data?.specialPath); return { data: res?.data?.data || [], total: res?.data?.total || 0, }; } }} columnsState={{ persistenceKey: 'pro-table-singe-demos', persistenceType: 'localStorage', defaultValue: { option: { fixed: 'right', disable: true }, }, onChange(value) { console.log('value: ', value); }, }} rowKey="id" search={{ labelWidth: 'auto', optionRender: (searchConfig, formProps, dom) => [ ...dom.reverse(), <Button key="out" onClick={() => { const values = searchConfig?.form?.getFieldsValue(); messageApi.open({ type: 'loading', content: '导出中...', duration: 0, }); downloadFile( '/api/service/invoice/exportBankStatements', '银行流水.xlsx', 'POST', values, () => { messageApi.destroy(); }, ); }} > 导出 </Button>, ], }} options={{ setting: { listsHeight: 400, }, }} form={{}} dateFormatter="string" headerTitle="银行流水列表" scroll={{ x: 1400, y: 360 }} toolBarRender={() => [ <> {perms?.includes('import') && ( <Button key="button" icon={<PlusOutlined />} onClick={() => { setBankImportModalVisible(true); }} type="primary" > 导入 </Button> )} </>, ]} /> {bankImportModalVisible ? ( <BankImportModal setVisible={setBankImportModalVisible} onClose={() => { setBankImportModalVisible(false); invoiceActionRef.current?.reload(); bankActionRef.current?.reload(); }} ></BankImportModal> ) : ( '' )} {invoiceVerificationVisible ? ( <InvoiceVerificationModal setVisible={setInvoiceVerificationVisible} invoiceId={invoiceId} onClose={() => { invoiceActionRef.current?.reload(); bankActionRef.current?.reload(); }} ></InvoiceVerificationModal> ) : ( '' )} {invoiceRecordDetailVisible ? ( <InvoiceRecordDetailModal key="detail" id={invoiceRecord.id} setVisible={setInvoiceRecordDetailVisible} /> ) : ( '' )} {contextHolder} </div> ); }; export default InvoiceRecord;