import { RESPONSE_CODE } from '@/constants/enum'; import { default as AddDrawer, default as AddOrModifyDrawer, } from '@/pages/procure/components/AddOrModifyDrawer'; import StatusTransitionModal from '@/pages/procure/components/StatusTransitionModal'; import { postProcureReturnBillPage, postProcureReturnBillRemove, postServiceConstProcureReturnBills, postServiceConstStores, } from '@/services'; import { downloadFile } from '@/services/order'; import { enumToSelect } from '@/utils'; import type { ActionType, ProColumns } from '@ant-design/pro-components'; import { ProTable } from '@ant-design/pro-components'; import { Button, Popconfirm, message } from 'antd'; import { useRef } from 'react'; 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); }; export default () => { const [messageApi, contextHolder] = message.useMessage(); const actionRef = useRef<ActionType>(); const reloadTable = () => { actionRef.current?.reload(); }; const columns: ProColumns[] = [ { title: '订单编号', width: 120, dataIndex: 'id', ellipsis: true, hideInSearch: true, }, { title: '收货人', width: 120, dataIndex: 'consignee', ellipsis: true, hideInSearch: true, }, { title: '联系电话', width: 120, dataIndex: 'phoneNumber', ellipsis: true, hideInSearch: true, }, { title: '收货地址', width: 120, dataIndex: 'address', ellipsis: true, hideInSearch: true, }, { title: '产品明细', width: 120, dataIndex: 'productDetail', ellipsis: true, hideInSearch: true, }, { title: '发货仓库', width: 120, dataIndex: 'sendStoreText', ellipsis: true, hideInSearch: true, }, { title: '创建人', width: 120, dataIndex: 'createByName', ellipsis: true, hideInSearch: true, }, { title: '创建时间', width: 120, valueType: 'dateTime', dataIndex: 'createTime', ellipsis: true, hideInSearch: true, }, { title: '订单状态', width: 120, dataIndex: 'statusText', ellipsis: true, hideInSearch: true, }, { title: '附件', width: 120, dataIndex: 'attachments', ellipsis: true, hideInSearch: true, }, { title: '备注', width: 120, dataIndex: 'notes', ellipsis: true, hideInSearch: true, }, { title: '发货信息', width: 120, dataIndex: 'sendInfo', ellipsis: true, hideInSearch: true, }, { title: '订单编号', width: 120, dataIndex: 'id', hideInTable: true, }, { title: '收货人', width: 120, dataIndex: 'consigneeLike', hideInTable: true, }, { title: '联系电话', width: 120, dataIndex: 'phoneNumberLike', hideInTable: true, }, { title: '发货仓库', width: 120, dataIndex: 'sendStore', valueType: 'select', hideInTable: true, request: async () => { const res = await postServiceConstStores(); return enumToSelect(res.data); }, }, { title: '订单状态', width: 120, dataIndex: 'status', valueType: 'select', hideInTable: true, request: async () => { const res = await postServiceConstProcureReturnBills(); return enumToSelect(res.data); }, }, { title: '创建人', width: 120, dataIndex: 'createByNameLike', hideInTable: true, }, { title: '创建时间', dataIndex: 'createTime', valueType: 'dateTimeRange', search: { transform: (value: any) => ({ createTimeGe: value[0], createTimeLe: value[1], }), }, hideInTable: true, }, { title: '操作', valueType: 'option', key: 'option', width: 220, render: (text, record, _, action) => [ <> {record.paths?.includes('AUDIT') && ( <StatusTransitionModal type="audit" ids={[record.id]} reloadTable={reloadTable} /> )} </>, <> {record.paths?.includes('SEND') && ( <StatusTransitionModal type="send" ids={[record.id]} reloadTable={reloadTable} /> )} </>, <AddOrModifyDrawer key={'detail'} reloadTable={reloadTable} data={record} type={'detail'} />, <AddOrModifyDrawer key={'add'} reloadTable={() => { action?.reload(); }} data={record} type={'modify'} />, <Popconfirm key="delete" title="删除单据" description="确定删除单据?" onConfirm={async () => { const res = await postProcureReturnBillRemove({ query: { id: record.id, }, }); if (res.result === RESPONSE_CODE.SUCCESS) { message.success('删除成功'); action?.reload(); } }} okText="确认" cancelText="取消" > <Button size={'small'} type="link" danger> 删除 </Button> </Popconfirm>, ], }, ]; return ( <> <ProTable columns={columns} actionRef={actionRef} cardBordered size={'small'} request={async (params, sort, filter) => { console.log(sort, filter); const res = await postProcureReturnBillPage({ data: params, }); console.log(res); return res.data; }} editable={{ type: 'multiple', }} scroll={{ x: 1300 }} columnsState={{ persistenceKey: 'pro-table-singe-demos', persistenceType: 'localStorage', defaultValue: { option: { fixed: 'right', disable: true }, }, onChange(value) { console.log('value: ', value); }, }} rowKey="id" search={{ optionRender: (searchConfig, formProps, dom) => [ ...dom.reverse(), <Button key="out" onClick={() => { const values = searchConfig?.form?.getFieldsValue(); messageApi.open({ type: 'loading', content: '导出中...', duration: 0, }); downloadFile( '/api/procureReturnBill/export', '客户信息.xlsx', 'POST', values, () => { messageApi.destroy(); }, ); }} > 导出 </Button>, ], labelWidth: 'auto', }} options={{ setting: { listsHeight: 400, }, }} form={{ // 由于配置了 transform,提交的参数与定义的不同这里需要转化一下 syncToUrl: (values, type) => { if (type === 'get') { return { ...values, created_at: [values.startTime, values.endTime], }; } return values; }, }} pagination={{ pageSize: 5, onChange: (page) => console.log(page), }} dateFormatter="string" headerTitle="高级表格" toolBarRender={() => [ <AddDrawer key="add" data={null} type="add" reloadTable={reloadTable} />, ]} /> {contextHolder} </> ); };