canrd-main / canrd-erp-front · Files

import AddDrawer from '@/pages/procure/components/AddDrawer';
import {
  postProcureReturnBillPage,
  postServiceConstProcureReturnBills,
  postServiceConstStores,
} from '@/services';
import { enumToSelect } from '@/utils';
import { EllipsisOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, Dropdown } 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 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={{
        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" />,
        <Dropdown
          key="menu"
          menu={{
            items: [
              {
                label: '1st item',
                key: '1',
              },
              {
                label: '2nd item',
                key: '2',
              },
              {
                label: '3rd item',
                key: '3',
              },
            ],
          }}
        >
          <Button>
            <EllipsisOutlined />
          </Button>
        </Dropdown>,
      ]}
    />
  );
};