src/pages/Client/index.tsx

import ClientDrawer from '@/pages/Client/Components/ClientDrawer';
import ClientImportModal from '@/pages/Client/Components/ClientImportModal';
import ClientStatistic from '@/pages/Client/Components/ClientStatistic';
import CommunicationHistoryModal from '@/pages/Client/Components/CommunicationHistoryModal';
import {
  postAdminClientQueryClientPage,
  postServiceConstClientGroupFilters,
  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, Radio, Space, message } from 'antd';
import { useEffect, useRef, useState } from 'react';
const columns = [
  {
    dataIndex: 'index',
    valueType: 'indexBorder',
    ellipsis: true,
    width: 48,
  },
  {
    title: '客户名称',
    dataIndex: 'name',
    width: 100,
    ellipsis: true,
    hideInSearch: true,
  },
  {
    title: '单位名称',
    width: 150,
    ellipsis: true,
    dataIndex: 'companyName',
    hideInSearch: true,
  },
  {
    title: '单位地址',
    width: 250,
    ellipsis: true,
    dataIndex: 'companyAddressText',
    hideInSearch: true,
  },
  {
    title: '联系电话',
    width: 150,
    ellipsis: true,
    dataIndex: 'phoneNumber',
    hideInSearch: true,
  },
  {
    title: '客户来源',
    width: 150,
    ellipsis: true,
    dataIndex: 'source',
    hideInSearch: true,
  },
  {
    title: '推荐人',
    dataIndex: 'referrers',
    width: 150,
    ellipsis: true,
    hideInSearch: true,
  },
  {
    title: '客户需求',
    dataIndex: 'requirements',
    width: 150,
    ellipsis: true,
    hideInSearch: true,
  },
  {
    title: '是否已报方案',
    width: 150,
    ellipsis: true,
    dataIndex: 'hasSchemeText',
    hideInSearch: true,
  },
  {
    title: '报价时间',
    key: 'since',
    width: 150,
    ellipsis: true,
    dataIndex: 'quoteDatetime',
    valueType: 'dateTime',
    hideInSearch: true,
  },
  {
    title: '跟进状态',
    width: 150,
    ellipsis: true,
    dataIndex: 'tradeStatusText',
    hideInSearch: true,
  },
  {
    title: '客户等级',
    width: 150,
    ellipsis: true,
    dataIndex: 'levelText',
    hideInSearch: true,
  },
  {
    title: '创建时间',
    key: 'since',
    width: 150,
    ellipsis: true,
    dataIndex: 'createTime',
    valueType: 'dateTime',
    hideInSearch: true,
  },
  {
    title: '最新跟进时间',
    key: 'since',
    width: 150,
    ellipsis: true,
    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, index, action) => {
      console.log(JSON.stringify(record));
      return [
        <CommunicationHistoryModal
          key={'communicationHistory'}
          clientId={record.id}
        />,
        <ClientDrawer
          key={'detail'}
          record={record}
          optType={'detail'}
          onFinish={() => {
            action.reload();
          }}
        ></ClientDrawer>,
        <ClientDrawer
          key={'edit'}
          record={record}
          optType={'edit'}
          onFinish={() => {
            action.reload();
          }}
        ></ClientDrawer>,
      ];
    },
  },
];
export default () => {
  const [messageApi, contextHolder] = message.useMessage();
  const [groupFilter, setGroupFilter] = useState('All');
  const [groupFilterOptions, setGroupFilterDataOptions] = useState([]);
  const actionRef = useRef<ActionType>();
  useEffect(() => {
    const pullGroupFilterDataOptions = async () => {
      const res = await postServiceConstClientGroupFilters();
      console.log('setGroupFilterDataOptions' + JSON.stringify(res.data));
      setGroupFilterDataOptions(enumToSelect(res.data));
    };
    pullGroupFilterDataOptions();
  }, []);
  useEffect(() => {
    actionRef.current?.reload();
  }, [groupFilter]);
  return (
    <>
      <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
        <ClientStatistic></ClientStatistic>
        <ProTable
          columns={columns}
          actionRef={actionRef}
          cardBordered
          request={async (params) => {
            const res = await postAdminClientQueryClientPage({
              data: {
                ...params,
                groupFilter: groupFilter,
              },
            });
            const data = res.data;
            return data;
          }}
          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>,
            ],
          }}
          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={() => [
            <div key={'groupFilter'}>
              <Radio.Group
                options={groupFilterOptions}
                onChange={(e) => {
                  setGroupFilter(e.target.value);
                }}
                value={groupFilter}
                optionType="button"
              />
            </div>,
            <ClientDrawer
              optType={'add'}
              key="button"
              onFinish={() => {
                actionRef.current.reload();
              }}
            ></ClientDrawer>,
            <ClientImportModal key="import" />,
          ]}
        />
      </Space>
      {contextHolder}
    </>
  );
};