import { deleteOrderErpOrderStagesDelect, getOrderErpOrderStagesListAll, postOrderErpOrderStagesSearch, } from '@/services'; import { orderExport } from '@/services/order'; import { VerticalAlignTopOutlined } from '@ant-design/icons'; import type { ProColumns } from '@ant-design/pro-components'; import { ProTable } from '@ant-design/pro-components'; import { Button, message } from 'antd'; import { useRef } from 'react'; import Comfire from '../comfire/comfire'; import AddModel from '../detail/detail'; import EditorModel from '../edit/edit'; import ReadModel from '../read/read'; import UploadModel from '../upload/uploadModel'; import './title.less'; export const waitTimePromise = async (time: number = 100) => { return new Promise((resolve) => { setTimeout(() => { resolve(true); }, time); }); }; export const waitTime = async (time: number = 100) => { await waitTimePromise(time); }; type OrderStagesItem = { //文件编号 id?: number; //合同编号 contract?: string; //供应商名称 vendor?: string; //签合同日期 dateRange?: Date; //终端名称 terminal?: string; //设备编号 dId?: number; //设备名称 deviceName?: string; //设备型号 deviceModel?: string; //数量 count?: number; //单价 unitPrice?: number; //总价 price?: number; //合同总金额 totalPrice?: number; //付款方式 payWay?: string; //附件 annex?: string; //备注 remark?: string; }; type OrderStagesWithListItem = { //文件编号 id: number; //合同编号 contract: string; //供应商名称 vendor: string; //签合同日期 dateRange: Date; //终端名称 terminal: string; orderStagesDeviceVoList: orderStagesDevice[]; //合同总金额 totalPrice: number; //付款方式 payWay: string; //附件 annex: string; //备注 remark: string; }; type orderStagesDevice = { //设备id dId: number; //设备名称 deviceName: string; //设备型号 deviceModel: string; //数量 count: number; //单价 unitPrice: number; //总价 price: number; }; export default () => { // const actionRef = useRef<ActionType>(); // const [TableItem, setTableItem] = useState([]); interface ActionType { reload: (resetPageIndex?: boolean) => void; reloadAndRest: () => void; reset: () => void; clearSelected?: () => void; startEditable: (rowKey: Key) => boolean; cancelEditable: (rowKey: Key) => boolean; } const ref = useRef<ActionType>({ reload: () => { // implementation for reload }, reloadAndRest: () => { // implementation for reloadAndRest }, reset: () => { // implementation for reset }, startEditable: () => { // implementation for startEditable }, cancelEditable: () => { // implementation for cancelEditable }, }); function reload() { ref.current.reload(); } async function toDelete(value) { const res = await deleteOrderErpOrderStagesDelect({ data: { ids: null, deviceIds: value, }, }); if (res) { message.success('删除成功'); ref.current.reload(); } else { message.error('删除失败'); } } const exportLoadingDestory = () => { message.success('导出成功'); }; async function toExport() { // await getOrderErpOrderStagesExport() orderExport( '/api/order/erp/orderStages/export', '分期订单.xlsx', 'get', {}, exportLoadingDestory, ); } const columns: ProColumns<OrderStagesItem>[] = [ { title: '文件编号', dataIndex: 'id', width: '7%', render: (_, record) => { if (record.id) { const text = record.id.toString(); const paddedText = '0'.repeat(4 - text.length) + text; return paddedText; } }, }, { title: '签合同日期', dataIndex: 'dateRange', valueType: 'date', filters: true, onFilter: true, ellipsis: true, width: '8%', }, { disable: true, title: '合同编号', dataIndex: 'contract', filters: true, onFilter: true, ellipsis: true, width: '9%', }, { disable: true, title: '供应商名称', dataIndex: 'vendor', filters: true, onFilter: true, ellipsis: true, }, { disable: true, title: '终端名称', dataIndex: 'terminal', filters: true, onFilter: true, ellipsis: true, width: '6%', }, { disable: true, title: '设备名称', dataIndex: 'deviceName', filters: true, onFilter: true, ellipsis: true, }, { disable: true, title: '设备型号', dataIndex: 'deviceModel', filters: true, hideInSearch: true, onFilter: false, ellipsis: true, width: '10%', }, { disable: true, title: '数量', dataIndex: 'count', filters: true, hideInSearch: true, onFilter: false, ellipsis: true, width: '4%', }, { disable: true, title: '单价', dataIndex: 'unitPrice', filters: true, hideInSearch: true, onFilter: false, ellipsis: true, width: '5%', }, { disable: true, title: '总价', dataIndex: 'price', filters: true, hideInSearch: true, onFilter: false, ellipsis: true, width: '5%', }, { disable: true, title: '合同总金额', dataIndex: 'totalPrice', filters: true, hideInSearch: true, onFilter: false, ellipsis: true, width: '6%', }, { disable: true, title: '付款方式', dataIndex: 'payWay', filters: true, hideInSearch: true, onFilter: false, ellipsis: true, }, { disable: true, title: '附件', dataIndex: 'annex', filters: true, hideInSearch: true, onFilter: false, ellipsis: true, width: '5%', render: (_, record) => { if (record.id) { return <a href={record.annex}>{record.annex}</a>; } }, }, { disable: true, title: '备注', dataIndex: 'remark', filters: true, hideInSearch: true, onFilter: false, ellipsis: true, width: '5%', }, { title: '操作', valueType: 'option', key: 'option', width: '10%', render: (_text, record) => { if (record?.id) { return ( <> <ReadModel currentContract={record.contract}></ReadModel> <EditorModel currentContract={record.contract} toReload={reload} ></EditorModel> {/* <a key="delect" target="_blank" rel="noopener noreferrer" onClick={() => { toDelete([record.dId]) }}> 删除 </a> */} <Comfire currtDid={record.dId} sureDelete={toDelete}></Comfire> </> ); } return null; }, }, ]; return ( <ProTable<OrderStagesItem> className="title-index" columnEmptyText="" columns={columns} actionRef={ref} cardBordered request={async (params) => { // console.log(params); if ( params.id !== null || params.contract !== null || params.vendor !== null || params.terminal !== null || params.deviceName !== null || params.dateRange !== null ) { // console.log(params.id); // console.log(params.contract); // console.log(params.vendor); let PostOrderErpOrderStagesSearchOption = { id: params.id, contract: params.contract, vendor: params.vendor, terminal: params.terminal, deviceName: params.deviceName, dateRange: params.dateRange, }; let res = await postOrderErpOrderStagesSearch({ data: { ...PostOrderErpOrderStagesSearchOption }, }); await waitTime(2000); if (res) { // setTableItem(res.data) const orderStagesWithList: OrderStagesWithListItem[] = res?.data; let orderStagesList: OrderStagesItem[] = []; for (let ind = 0; ind < orderStagesWithList.length; ind++) { for ( let index = 0; index < orderStagesWithList[ind].orderStagesDeviceVoList.length; index++ ) { let item: OrderStagesItem = { id: undefined, contract: undefined, vendor: undefined, dateRange: undefined, terminal: undefined, dId: undefined, deviceName: undefined, deviceModel: undefined, count: undefined, unitPrice: undefined, price: undefined, totalPrice: undefined, payWay: undefined, annex: undefined, remark: undefined, }; if (index === 0) { item.id = orderStagesWithList[ind].id; item.contract = orderStagesWithList[ind].contract; item.vendor = orderStagesWithList[ind].vendor; item.dateRange = orderStagesWithList[ind].dateRange; item.terminal = orderStagesWithList[ind].terminal; item.dId = orderStagesWithList[ind].orderStagesDeviceVoList[index].dId; item.deviceName = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].deviceName; item.deviceModel = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].deviceModel; item.count = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].count; item.unitPrice = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].unitPrice; item.price = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].price; item.totalPrice = orderStagesWithList[ind].totalPrice; item.payWay = orderStagesWithList[ind].payWay; item.annex = orderStagesWithList[ind].annex; item.remark = orderStagesWithList[ind].remark; orderStagesList.push(item); } else { item.id = orderStagesWithList[ind].id; item.contract = orderStagesWithList[ind].contract; item.vendor = orderStagesWithList[ind].vendor; item.dateRange = orderStagesWithList[ind].dateRange; item.terminal = orderStagesWithList[ind].terminal; item.dId = orderStagesWithList[ind].orderStagesDeviceVoList[index].dId; item.deviceName = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].deviceName; item.deviceModel = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].deviceModel; item.count = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].count; item.unitPrice = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].unitPrice; item.price = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].price; item.totalPrice = orderStagesWithList[ind].totalPrice; item.payWay = orderStagesWithList[ind].payWay; item.annex = orderStagesWithList[ind].annex; item.remark = orderStagesWithList[ind].remark; orderStagesList.push(item); } } } return { data: orderStagesList || [], }; } } else { let res = await getOrderErpOrderStagesListAll(); await waitTime(2000); if (res) { // setTableItem(res.data) const orderStagesWithList: OrderStagesWithListItem[] = res?.data; let orderStagesList: OrderStagesItem[] = []; for (let ind = 0; ind < orderStagesWithList.length; ind++) { for ( let index = 0; index < orderStagesWithList[ind].orderStagesDeviceVoList.length; index++ ) { let item: OrderStagesItem = { id: undefined, contract: undefined, vendor: undefined, dateRange: undefined, terminal: undefined, dId: undefined, deviceName: undefined, deviceModel: undefined, count: undefined, unitPrice: undefined, price: undefined, totalPrice: undefined, payWay: undefined, annex: undefined, remark: undefined, }; if (index === 0) { item.id = orderStagesWithList[ind].id; item.contract = orderStagesWithList[ind].contract; item.vendor = orderStagesWithList[ind].vendor; item.dateRange = orderStagesWithList[ind].dateRange; item.terminal = orderStagesWithList[ind].terminal; item.dId = orderStagesWithList[ind].orderStagesDeviceVoList[index].dId; item.deviceName = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].deviceName; item.deviceModel = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].deviceModel; item.count = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].count; item.unitPrice = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].unitPrice; item.price = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].price; item.totalPrice = orderStagesWithList[ind].totalPrice; item.payWay = orderStagesWithList[ind].payWay; item.annex = orderStagesWithList[ind].annex; item.remark = orderStagesWithList[ind].remark; orderStagesList.push(item); } else { item.id = orderStagesWithList[ind].id; item.contract = orderStagesWithList[ind].contract; item.vendor = orderStagesWithList[ind].vendor; item.dateRange = orderStagesWithList[ind].dateRange; item.terminal = orderStagesWithList[ind].terminal; item.dId = orderStagesWithList[ind].orderStagesDeviceVoList[index].dId; item.deviceName = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].deviceName; item.deviceModel = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].deviceModel; item.count = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].count; item.unitPrice = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].unitPrice; item.price = orderStagesWithList[ind].orderStagesDeviceVoList[ index ].price; item.totalPrice = orderStagesWithList[ind].totalPrice; item.payWay = orderStagesWithList[ind].payWay; item.annex = orderStagesWithList[ind].annex; item.remark = orderStagesWithList[ind].remark; orderStagesList.push(item); } } } return { data: orderStagesList || [], }; } } }} editable={{ type: 'multiple', }} columnsState={{ persistenceKey: 'pro-table-singe-demos', persistenceType: 'localStorage', defaultValue: { option: { fixed: 'right', disable: true }, }, // onChange(value) { // console.log('value: ', value); // }, }} rowKey="dId" search={{ labelWidth: 'auto', }} options={{ setting: { listsHeight: 800, }, }} form={{ syncToUrl: (values, type) => { if (type === 'get') { return { ...values, created_at: [values.startTime, values.endTime], }; } return values; }, }} pagination={{ pageSize: 10, // onChange: (page) => console.log(page), }} dateFormatter="string" headerTitle={[]} toolBarRender={() => [ <> <AddModel toReload={reload}></AddModel> <UploadModel toReload={reload}></UploadModel> <Button type="primary" onClick={() => { toExport(); }} > <VerticalAlignTopOutlined /> 导出 </Button> </>, ]} /> ); };