src/pages/Client/FollowRecord/index.tsx

import { RESPONSE_CODE } from '@/constants/enum';
import ClientModal from '@/pages/Client/FollowRecord/Components/ClientModal';
import CommunicationHistoryModal from '@/pages/Client/FollowRecord/Components/CommunicationHistoryModal';
import {
  postAdminClientQueryClientComunicationInfo,
  postAdminClientRemoveClientComunicationInfo,
  postServiceConstClientWay,
  postServiceConstTradeStatus,
} from '@/services';
import { enumToSelect } from '@/utils';
import type { ActionType } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Button, Popconfirm, Space, message } from 'antd';
import { useRef, useState } from 'react';
import './index.less';
export default () => {
  const actionRef = useRef<ActionType>();
  const [refreshKey, setRefreshKey] = useState(0); // 用于强制刷新的键
  const reload = () => {
    actionRef.current.reload(); // 重新加载数据
    // 更新 refreshKey，强制刷新 CommunicationHistoryModal
    setRefreshKey((prevKey) => prevKey + 1);
  };
  //biaoji
  const columns = [
    {
      title: '跟进日期',
      key: 'datetime',
      width: 150,
      ellipsis: true,
      dataIndex: 'datetime',
      valueType: 'dateTime',
      hideInSearch: true,
      // search: {
      //   transform: (value) => {
      //     if (value) {
      //       return {
      //         createTimeGe: value[0],
      //         createTimeLe: value[1],
      //       };
      //     }
      //   },
      // },
    },
    {
      title: '跟进日期',
      dataIndex: 'dateRange',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          if (value) {
            return {
              dateTimeGe: value[0],
              dateTimeLe: value[1],
            };
          }
        },
      },
    },
    {
      title: '跟进人员',
      dataIndex: 'updateByName',
      width: 100,
      ellipsis: true,
      hideInSearch: false,
    },
    // {
    //   title: '跟进状态',
    //   width: 150,
    //   ellipsis: true,
    //   dataIndex: 'tradeStatusText',
    //   hideInSearch: true,
    // },
    {
      title: '客户名称',
      dataIndex: 'clientName',
      width: 150,
      ellipsis: true,
      hideInSearch: true,
    },
    // {
    //   title: '客户地址',
    //   dataIndex: 'clientAddress',
    //   width: 250,
    //   ellipsis: true,
    //   hideInSearch: true,
    // },
    {
      title: '联系人',
      dataIndex: 'contact',
      width: 150,
      ellipsis: true,
      hideInSearch: false,
    },
    // {
    //   title: '联系人',
    //   dataIndex: 'contactLike',
    //   width: 150,
    //   ellipsis: true,
    //   hideInSearch: false,
    //   hideInTable: true,
    // },
    {
      title: '联系电话',
      dataIndex: 'contactPhone',
      width: 150,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '跟进状态',
      dataIndex: 'tradeStatusLike',
      width: 100,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '跟进方式',
      dataIndex: 'wayText',
      width: 100,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '跟进方式',
      dataIndex: 'way',
      width: 100,
      ellipsis: true,
      hideInSearch: false,
      hideInTable: true,
      request: async () => {
        const res = await postServiceConstClientWay();
        return enumToSelect(res.data);
      },
    },
    // {
    //   title: '跟进状态',
    //   dataIndex: 'tradeStatus',
    //   valueType: 'select',
    //   hideInTable: true,
    //   request: async () => {
    //     const res = await postServiceConstTradeStatus();
    //     return enumToSelect(res.data);
    //   },
    // },
    {
      title: '客户名称',
      dataIndex: 'clientNameLike',
      width: 150,
      ellipsis: true,
      hideInSearch: false,
      hideInTable: true,
    },
    // {
    //   title: '客户地址',
    //   dataIndex: 'clientAddressLike',
    //   width: 250,
    //   ellipsis: true,
    //   hideInSearch: false,
    //   hideInTable: true,
    // },
    // {
    //   title: '跟进状态',
    //   dataIndex: 'tradeStatus',
    //   width: 100,
    //   ellipsis: true,
    //   hideInSearch: true,
    // },
    {
      title: '跟进状态',
      dataIndex: 'tradeStatus',
      width: 100,
      ellipsis: true,
      hideInSearch: false,
      hideInTable: true,
      request: async () => {
        const res = await postServiceConstTradeStatus();
        return enumToSelect(res.data);
      },
    },
    {
      title: '跟进详情',
      dataIndex: 'content',
      width: 250,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 150,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '附件',
      dataIndex: 'attachments',
      width: 150,
      ellipsis: true,
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '创建日期',
      dataIndex: 'createTime',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          if (value) {
            return {
              createTimeGe: value[0],
              createTimeLe: value[1],
            };
          }
        },
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      width: 220,
      render: (text, record, index, action) => {
        const handleDelete = async () => {
          // console.log(JSON.stringify(record), '5656record');
          // 调用删除接口
          const success = await postAdminClientRemoveClientComunicationInfo({
            query: {
              id: record.id,
            },
          });
          if (success) {
            action.reload(); // 刷新表格
          }
        };
        return [
          <CommunicationHistoryModal
            // key={'communicationHistory'}
            // key={'communicationHistory'}
            key={`${refreshKey}`} // 使用 refreshKey 来强制更新组件
            data={record}
            // reloadTable={() => {
            //   actionRef.current.reload();
            // }}
            reloadTable={reload}
          />,
          <ClientModal
            key={'modify'}
            // data={data} // 将表单数据传递给 ClientModal
            data={record} // 传递修改后的 data
            reloadTable={() => {
              actionRef?.current?.reload(); // 重新加载表格数据
              // props.submit();
            }}
            type={'modify'}
            onFinish={() => {
              // setIsModalVisible(false);
            }} // 关闭 Modal
            style={{ marginRight: '10px' }}
          />,
          <>
            {/* <Button
              key={'delete'}
              onClick={() => {
                handleDelete();
                actionRef.current.reload();
              }}
              // reloadTable={() => {
              //   actionRef.current.reload();
              // }}
              type="primary"
              size="middle"
              danger
            // 使用 danger 属性来将按钮颜色设置为红色
            // onFinish={() => {
            //   actionRef.current.reload();
            // }}
            >
              删除
            </Button>
            <ButtonConfirm
              key={'delete'}
              className="p-0"
              title={'是否确认删除'}
              text="删除"
              type="primary"
              size="middle"
              danger
              onConfirm={async () => {
                handleDelete();
                actionRef.current.reload();
              }}
            /> */}
            <Popconfirm
              title={'是否确认删除'}
              onConfirm={async () => {
                handleDelete();
                actionRef.current.reload();
              }}
              okText="确认"
              cancelText="取消"
            >
              <Button key={'delete'} type="primary" size="middle" danger>
                删除
              </Button>
            </Popconfirm>
          </>,
        ];
      },
    },
  ];
  // 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 (
    <div className="client-index">
      <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
        <ProTable
          columns={columns}
          actionRef={actionRef}
          cardBordered
          request={async (params) => {
            const res = await postAdminClientQueryClientComunicationInfo({
              data: {
                ...params,
              },
            });
            if (res.result === RESPONSE_CODE.SUCCESS) {
              console.log(JSON.stringify(res.data));
              return {
                ...res.data,
                data: res.data.data.map((item) => {
                  return {
                    ...item,
                    tid: (Math.random() * 1000000).toFixed(0),
                  };
                }),
              };
            } else {
              message.error('获取失败');
            }
          }}
          search={{
            optionRender: (searchConfig, formProps, dom) => [...dom.reverse()],
          }}
          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={() => [
            <ClientModal
              key={'add'}
              reloadTable={() => {
                actionRef.current.reload();
              }}
              type={'add'}
            />,
          ]}
        />
      </Space>
      {/* {contextHolder} */}
    </div>
  );
};