index.tsx 6.64 KB
import ClientDrawer from '@/pages/Client/Components/ClientDrawer';
import ClientImportModal from '@/pages/Client/Components/ClientImportModal';
import CommunicationHistoryModal from '@/pages/Client/Components/CommunicationHistoryModal';
import {
  postAdminClientQueryClientPage,
  postServiceConstClientLevels,
  postServiceConstTradeStatus,
} from '@/services';
import { orderExport } from '@/services/order';
import { enumToSelect } from '@/utils';
import type { ActionType } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Button, message } from 'antd';
import { useRef } from 'react';

const columns = [
  {
    dataIndex: 'index',
    valueType: 'indexBorder',
    width: 48,
  },
  {
    title: '客户名称',
    dataIndex: 'name',
    width: 100,
    hideInSearch: true,
  },
  {
    title: '单位名称',
    width: 150,
    dataIndex: 'companyName',
    hideInSearch: true,
  },
  {
    title: '单位地址',
    width: 250,
    dataIndex: 'companyName',
    hideInSearch: true,
  },
  {
    title: '联系电话',
    width: 150,
    dataIndex: 'phoneNumber',
    hideInSearch: true,
  },
  {
    title: '客户来源',
    width: 150,
    dataIndex: 'source',
    hideInSearch: true,
  },
  {
    title: '推荐人',
    dataIndex: 'referrers',
    width: 150,
    hideInSearch: true,
  },
  {
    title: '客户需求',
    dataIndex: 'requirements',
    width: 150,
    hideInSearch: true,
  },
  {
    title: '是否已报方案',
    width: 150,
    dataIndex: 'hasSchemeText',
    hideInSearch: true,
  },
  {
    title: '报价时间',
    key: 'since',
    width: 150,
    dataIndex: 'quoteDatetime',
    valueType: 'dateTime',
    hideInSearch: true,
  },
  {
    title: '跟进状态',
    width: 150,
    dataIndex: 'tradeStatusText',
    hideInSearch: true,
  },
  {
    title: '客户等级',
    width: 150,
    dataIndex: 'levelText',
    hideInSearch: true,
  },
  {
    title: '创建时间',
    key: 'since',
    width: 150,
    dataIndex: 'createTime',
    valueType: 'dateTime',
    hideInSearch: true,
  },
  {
    title: '最新跟进时间',
    key: 'since',
    width: 150,
    dataIndex: 'latestCommunicationTime',
    valueType: 'dateTime',
    hideInSearch: true,
  },
  {
    title: '客户名称',
    dataIndex: 'nameLike',
    valueType: 'Text',
    hideInTable: true,
  },
  {
    title: '单位名称',
    dataIndex: 'companyNameLike',
    valueType: 'Text',
    hideInTable: true,
  },
  {
    title: '联系电话',
    dataIndex: 'phoneNumberLike',
    valueType: 'Text',
    hideInTable: true,
  },
  {
    title: '是否已报方案',
    dataIndex: 'hasScheme',
    valueType: 'select',
    valueEnum: {
      true: {
        text: '是',
        value: true,
      },
      false: {
        text: '否',
        value: false,
      },
    },
    hideInTable: true,
  },
  {
    title: '客户等级',
    dataIndex: 'level',
    valueType: 'select',
    hideInTable: true,
    request: async () => {
      const res = await postServiceConstClientLevels();
      return enumToSelect(res.data);
    },
  },
  {
    title: '跟进状态',
    dataIndex: 'tradeStatus',
    valueType: 'select',
    hideInTable: true,
    request: async () => {
      const res = await postServiceConstTradeStatus();
      return enumToSelect(res.data);
    },
  },
  {
    title: '创建时间',
    valueType: 'dateRange',
    hideInTable: true,
    search: {
      transform: (value) => {
        if (value) {
          return {
            createTimeGe: value[0],
            createTimeLe: value[1],
          };
        }
      },
    },
  },
  {
    title: '操作',
    valueType: 'option',
    key: 'option',
    width: 150,
    render: (text, record) => {
      console.log(JSON.stringify(record));
      return [
        <CommunicationHistoryModal
          key={'communicationHistory'}
          clientId={record.id}
        />,
        <ClientDrawer
          key={'detail'}
          record={record}
          optType={'detail'}
        ></ClientDrawer>,
        <ClientDrawer
          key={'edit'}
          record={record}
          optType={'edit'}
        ></ClientDrawer>,
      ];
    },
  },
];

export default () => {
  const [messageApi, contextHolder] = message.useMessage();
  const actionRef = useRef<ActionType>();
  return (
    <>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        cardBordered
        request={async (params) => {
          const res = await postAdminClientQueryClientPage({
            data: {
              ...params,
            },
          });
          const data = res.data;
          return data;
        }}
        search={{
          defaultCollapsed: false,
          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>,
          ],
        }}
        scroll={{
          x: 1400,
        }}
        editable={{
          type: 'multiple',
        }}
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
          defaultValue: {
            option: { fixed: 'right', disable: true },
          },
          onChange(value) {
            console.log('value: ', value);
          },
        }}
        rowKey="id"
        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={() => [
          <ClientDrawer optType={'add'} key="button"></ClientDrawer>,
          <ClientImportModal key="import" />,
        ]}
      />
      {contextHolder}
    </>
  );
};