canrd-main / canrd-erp-front · Files

import AddDrawer from '@/pages/procure/components/AddDrawer';
import {
  postProcureReturnBillPage,
  postServiceConstProcureReturnBills,
  postServiceConstStores,
} from '@/services';
import { orderExport } from '@/services/order';
import { enumToSelect } from '@/utils';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, 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);
};

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',
    render: (text, record, _, action) => [
      <a
        key="editable"
        onClick={() => {
          action?.startEditable?.(record.id);
        }}
      >
        编辑
      </a>,
      <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
        查看
      </a>,
      <TableDropdown
        key="actionGroup"
        onSelect={() => action?.reload()}
        menus={[
          { key: 'copy', name: '复制' },
          { key: 'delete', name: '删除' },
        ]}
      />,
    ],
  },
];

export default () => {
  const [messageApi, contextHolder] = message.useMessage();
  const actionRef = useRef<ActionType>();
  return (
    <>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        cardBordered
        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,
                });
                orderExport(
                  '/api/admin/client/exportClients',
                  '客户信息.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"
            reloadTable={() => {
              actionRef.current?.reload();
            }}
          />,
        ]}
      />
      {contextHolder}
    </>
  );
};