src/pages/Order/WarningWhitelist/index.tsx

import ButtonConfirm from '@/components/ButtomConfirm';
import { RESPONSE_CODE } from '@/constants/enum';
import {
  postServiceOrderAddWarningOrderWhiteList,
  postServiceOrderAddWarningUserWhiteList,
  postServiceOrderDeleteWarningOrderWhiteList,
  postServiceOrderDeleteWarningUserWhiteList,
  postServiceOrderWarningOrderWhiteLists,
  postServiceOrderWarningUserWhiteLists,
} from '@/services';
import { PlusOutlined } from '@ant-design/icons';
import {
  ActionType,
  ModalForm,
  ProColumns,
  ProFormDateTimePicker,
  ProFormText,
  ProTable,
} from '@ant-design/pro-components';
import { Button, Tabs, 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 WarningWhitelist = () => {
  const columnsAccount: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '销售账号',
      dataIndex: 'userName',
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '销售账号',
      dataIndex: 'userNameLike',
      ellipsis: true,
      hideInTable: true,
    },
    {
      title: '添加人',
      dataIndex: 'createByName',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '添加时间',
      valueType: 'dateTimeRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          if (value) {
            return {
              createTimeGe: value[0],
              createTimeLe: value[1],
            };
          }
        },
      },
    },
    {
      title: '添加时间',
      dataIndex: 'createTime',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '到期时间',
      dataIndex: 'expireDatetime',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '到期时间',
      valueType: 'dateTimeRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          if (value) {
            return {
              expireDatetimeGe: value[0],
              expireDatetimeLe: value[1],
            };
          }
        },
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => [
        <ButtonConfirm
          key="delete"
          className="p-0"
          title={'确认删除此项吗？'}
          text="删除"
          onConfirm={async () => {
            await postServiceOrderDeleteWarningUserWhiteList({
              query: {
                id: record.id,
              },
            });
            action?.reload();
          }}
        />,
      ],
    },
  ];
  const columnsInvoice: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '订单号',
      dataIndex: 'orderId',
      ellipsis: true,
      search: {
        transform: (value) => {
          if (value) {
            return {
              orderId: Number(value),
            };
          }
        },
      },
    },
    {
      title: '所属销售',
      dataIndex: 'salesCode',
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '添加人',
      dataIndex: 'createByName',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '添加时间',
      dataIndex: 'createTime',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '到期时间',
      dataIndex: 'expireDatetime',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '到期时间',
      valueType: 'dateTimeRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          if (value) {
            return {
              expireDatetimeGe: value[0],
              expireDatetimeLe: value[1],
            };
          }
        },
      },
    },
    {
      title: '添加时间',
      valueType: 'dateTimeRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          if (value) {
            return {
              createTimeGe: value[0],
              createTimeLe: value[1],
            };
          }
        },
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => [
        <ButtonConfirm
          key="delete"
          className="p-0"
          title={'确认删除此项吗？'}
          text="删除"
          onConfirm={async () => {
            await postServiceOrderDeleteWarningOrderWhiteList({
              query: {
                orderId: record.orderId,
              },
            });
            action?.reload();
          }}
        />,
      ],
    },
  ];
  const actionRef = useRef<ActionType>();
  const tabsItems = [
    {
      key: 1,
      label: '帐号白名单',
      children: (
        <div>
          <ProTable
            columns={columnsAccount}
            actionRef={actionRef}
            cardBordered
            request={async (params) => {
              const res = await postServiceOrderWarningUserWhiteLists({
                data: { ...params },
              });
              return res.data;
            }}
            rowKey="id"
            search={{
              labelWidth: 'auto',
            }}
            options={{
              setting: {
                listsHeight: 400,
              },
            }}
            pagination={{
              showSizeChanger: true, // 显示可以选择每页显示条数的下拉菜单
              pageSizeOptions: ['10', '20', '50', '100'], // 设置可以选择的每页显示条数选项
            }}
            dateFormatter="string"
            // headerTitle="添加"
            toolBarRender={() => [
              <ModalForm
                key="add"
                title="添加帐号"
                width={500}
                trigger={
                  <Button type="primary">
                    <PlusOutlined />
                    添加
                  </Button>
                }
                autoFocusFirstInput
                modalProps={{
                  destroyOnClose: true,
                  onCancel: () => console.log('run'),
                }}
                submitTimeout={2000}
                onFinish={async (values) => {
                  const res = await postServiceOrderAddWarningUserWhiteList({
                    data: {
                      ...values,
                      userName: values.orderIdsText,
                    },
                  });
                  if (res.result === RESPONSE_CODE.SUCCESS) {
                    // actionRef.current?.reload();
                    setTimeout(() => {
                      actionRef.current?.reload();
                    }, 50);
                    message.success('添加成功');
                    return true;
                  }
                }}
              >
                <ProFormText
                  name="orderIdsText"
                  label="销售账号"
                  placeholder="请输入销售账号"
                  rules={[
                    {
                      required: true,
                      message: '请输入销售账号',
                    },
                  ]}
                ></ProFormText>
                <ProFormDateTimePicker name="expireDatetime" label="到期时间" />
              </ModalForm>,
            ]}
          />
        </div>
      ),
    },
    {
      key: 2,
      label: '订单白名单',
      children: (
        <div>
          <ProTable
            columns={columnsInvoice}
            actionRef={actionRef}
            cardBordered
            request={async (params) => {
              const res = await postServiceOrderWarningOrderWhiteLists({
                data: params,
              });
              return res.data;
            }}
            rowKey="id"
            search={{
              labelWidth: 'auto',
            }}
            options={{
              setting: {
                listsHeight: 400,
              },
            }}
            pagination={{
              showSizeChanger: true, // 显示可以选择每页显示条数的下拉菜单
              pageSizeOptions: ['10', '20', '50', '100'], // 设置可以选择的每页显示条数选项
            }}
            dateFormatter="string"
            // headerTitle="添加"
            toolBarRender={() => [
              <ModalForm
                key="add"
                title="添加订单"
                width={500}
                trigger={
                  <Button type="primary">
                    <PlusOutlined />
                    添加
                  </Button>
                }
                autoFocusFirstInput
                modalProps={{
                  destroyOnClose: true,
                  onCancel: () => console.log('run'),
                }}
                submitTimeout={2000}
                onFinish={async (values) => {
                  const res = await postServiceOrderAddWarningOrderWhiteList({
                    data: {
                      ...values,
                      orderId: values.orderIdsText,
                    },
                  });
                  if (res.result === RESPONSE_CODE.SUCCESS) {
                    setTimeout(() => {
                      actionRef.current?.reload();
                    }, 50);
                    message.success('添加成功');
                    return true;
                  }
                }}
              >
                <ProFormText
                  name="orderIdsText"
                  label="订单号"
                  placeholder="请输入订单号"
                  rules={[
                    {
                      required: true,
                      message: '请输入订单号',
                    },
                  ]}
                ></ProFormText>
                <ProFormDateTimePicker name="expireDatetime" label="到期时间" />
              </ModalForm>,
            ]}
          />
        </div>
      ),
    },
  ];
  return (
    <div>
      <Tabs defaultActiveKey="1" items={tabsItems} onChange={() => {}} />
    </div>
  );
};
export default WarningWhitelist;