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, Space, message } from 'antd'; import { useRef, useState } from 'react'; export default () => { const actionRef = useRef<ActionType>(); const [refreshKey, setRefreshKey] = useState(0); // 用于强制刷新的键 const reload = () => { actionRef.current.reload(); // 重新加载数据 console.log('5656flush'); // 更新 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: '客户名称', dataIndex: 'clientName', width: 150, ellipsis: true, hideInSearch: true, }, { title: '客户地址', dataIndex: 'clientAddress', width: 250, 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: '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: 'tradeStatusLike', 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: false, }, { title: '创建时间', dataIndex: 'createTime', width: 150, ellipsis: true, hideInSearch: true, }, { title: '附件', dataIndex: 'attachments', width: 150, ellipsis: true, hideInSearch: true, hideInTable: true, }, { title: '操作', valueType: 'option', key: 'option', width: 150, 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-${refreshKey}`} // 使用 refreshKey 来强制更新组件 data={record} // reloadTable={() => { // actionRef.current.reload(); // console.log('5656flush'); // }} reloadTable={reload} />, <> <Button key={'delete'} onClick={() => { handleDelete(); actionRef.current.reload(); }} // reloadTable={() => { // actionRef.current.reload(); // }} type="link" size="middle" // 使用 danger 属性来将按钮颜色设置为红色 // onFinish={() => { // actionRef.current.reload(); // }} > 删除 </Button> </>, ]; }, }, ]; // 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' }}> <ProTable columns={columns} actionRef={actionRef} cardBordered request={async (params) => { const res = await postAdminClientQueryClientComunicationInfo({ data: { ...params, }, }); console.log(params, '5656566params'); 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} */} </> ); };