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} </> ); };