canrd-main / canrd-erp-front · Files

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}
    </>
  );
};