a27e3b8e43
Optimized the root .gitignore to exclude virtual environments, node modules, and temp folders to ensure clean and lightweight version tracking. Co-authored-by: Cursor <cursoragent@cursor.com>
767 lines
48 KiB
JavaScript
767 lines
48 KiB
JavaScript
// 【重要】必须使用 const Component 作为组件变量名
|
||
// ONEOS-web - CRM 客户管理（建档字段、列表、标签、筛选）
|
||
|
||
const Component = function () {
|
||
var useState = React.useState;
|
||
|
||
var antd = window.antd;
|
||
var Table = antd.Table;
|
||
var Button = antd.Button;
|
||
var Space = antd.Space;
|
||
var Input = antd.Input;
|
||
var Select = antd.Select;
|
||
var DatePicker = antd.DatePicker;
|
||
var Form = antd.Form;
|
||
var Row = antd.Row;
|
||
var Col = antd.Col;
|
||
var Divider = antd.Divider;
|
||
var Breadcrumb = antd.Breadcrumb;
|
||
var Layout = antd.Layout;
|
||
var message = antd.message;
|
||
var Tag = antd.Tag;
|
||
var Tooltip = antd.Tooltip;
|
||
var Card = antd.Card;
|
||
var Modal = antd.Modal;
|
||
var Tabs = antd.Tabs;
|
||
var Cascader = antd.Cascader;
|
||
var Radio = antd.Radio;
|
||
|
||
var Content = Layout.Content;
|
||
var _modalOpen = useState(false);
|
||
var modalOpen = _modalOpen[0];
|
||
var setModalOpen = _modalOpen[1];
|
||
|
||
/** 筛选默认 2 行（每行 3 个 span:8）；超出部分展开/收起 */
|
||
var _filterExpand = useState(false);
|
||
var filterExpanded = _filterExpand[0];
|
||
var setFilterExpanded = _filterExpand[1];
|
||
var FILTER_COLS_PER_ROW = 3;
|
||
var FILTER_VISIBLE_ROWS = 2;
|
||
var filterFieldCount = 8;
|
||
var filterRowCount = Math.ceil(filterFieldCount / FILTER_COLS_PER_ROW);
|
||
var showFilterExpandToggle = filterRowCount > FILTER_VISIBLE_ROWS;
|
||
|
||
var _form = Form.useForm();
|
||
var customerForm = _form[0];
|
||
|
||
var _filterFormInst = Form.useForm();
|
||
var filterForm = _filterFormInst[0];
|
||
|
||
var _filterDeptSel = useState([]);
|
||
var filterDeptSelection = _filterDeptSel[0];
|
||
var setFilterDeptSelection = _filterDeptSel[1];
|
||
|
||
/**
|
||
* 客户编号规则（集团多子公司）
|
||
* - 总长度 7，仅含大写字母 A–Z 与数字 0–9。
|
||
* - 结构：第 1 位 = 签约/归属子公司代码；第 2–7 位 = 6 位数字流水号（000001–999999，不足左补 0）。
|
||
* - 流水号在「同一子公司代码」下递增；不同字母下可各自从 000001 起编。
|
||
* - 校验正则：/^[A-Z][0-9]{6}$/
|
||
* 示例映射（可按主数据调整）：A华东 B华南 C华北 D西南 E华中 F西北 G集团总部 …
|
||
*/
|
||
|
||
/** 客户标签枚举（筛选 + 列表展示，多选） */
|
||
var customerLabelOptions = [
|
||
{ label: '逾期预警', value: '逾期预警' },
|
||
{ label: '严重拖欠', value: '严重拖欠' },
|
||
{ label: '频繁改账期', value: '频繁改账期' },
|
||
{ label: '资质存疑', value: '资质存疑' },
|
||
{ label: '涉诉/仲裁', value: '涉诉/仲裁' },
|
||
{ label: '制裁/高风险地区', value: '制裁/高风险地区' },
|
||
{ label: '频繁争议', value: '频繁争议' },
|
||
{ label: '车辆/资产高风险', value: '车辆/资产高风险' },
|
||
{ label: '信息不实', value: '信息不实' },
|
||
{ label: '开票异常', value: '开票异常' },
|
||
{ label: '多头签约', value: '多头签约' }
|
||
];
|
||
|
||
var customerLabelTagStyle = {
|
||
margin: 0,
|
||
background: '#fff',
|
||
border: '1px solid #f77234',
|
||
color: '#1d2129',
|
||
borderRadius: 4,
|
||
lineHeight: '20px',
|
||
padding: '0 7px'
|
||
};
|
||
var customerLabelCountTagStyle = {
|
||
margin: 0,
|
||
background: '#fff',
|
||
border: '1px solid #c9cdd4',
|
||
color: '#4e5969',
|
||
borderRadius: 4,
|
||
lineHeight: '20px',
|
||
padding: '0 7px',
|
||
cursor: 'default'
|
||
};
|
||
|
||
/** PDF：区域 — 省-市级联（示例数据，可对接字典） */
|
||
var regionOptions = [
|
||
{ value: 'zj', label: '浙江省', children: [
|
||
{ value: 'zj-hz', label: '杭州市' },
|
||
{ value: 'zj-jx', label: '嘉兴市' },
|
||
{ value: 'zj-nb', label: '宁波市' }
|
||
] },
|
||
{ value: 'sh', label: '上海市', children: [
|
||
{ value: 'sh-pu', label: '上海市' }
|
||
] },
|
||
{ value: 'js', label: '江苏省', children: [
|
||
{ value: 'js-nj', label: '南京市' },
|
||
{ value: 'js-sz', label: '苏州市' }
|
||
] }
|
||
];
|
||
|
||
// 自定义 SVG 图标（高保真还原 Arco 风格）
|
||
var SearchIcon = function() { return React.createElement('svg', { viewBox: '0 0 1024 1024', width: 14, height: 14, fill: 'currentColor' }, React.createElement('path', { d: 'M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z' })); };
|
||
var ResetIcon = function() { return React.createElement('svg', { viewBox: '0 0 1024 1024', width: 14, height: 14, fill: 'currentColor' }, React.createElement('path', { d: 'M793 242H366v-74c0-6.7-7.7-10.4-12.9-6.3l-142 112a8 8 0 000 12.6l142 112c5.2 4.1 12.9.4 12.9-6.3v-74h415v470H175c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-28.7 64-64V306c0-35.3-28.7-64-64-64z' })); };
|
||
var PlusIcon = function() { return React.createElement('svg', { viewBox: '0 0 1024 1024', width: 14, height: 14, fill: 'currentColor' }, React.createElement('path', { d: 'M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z' }), React.createElement('path', { d: 'M192 474h672q8 0 8 8v60q0 8-8 8H192q-8 0-8-8v-60q0-8 8-8z' })); };
|
||
var DownloadIcon = function() { return React.createElement('svg', { viewBox: '0 0 1024 1024', width: 16, height: 16, fill: 'currentColor' }, React.createElement('path', { d: 'M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z' })); };
|
||
var ListIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 4, strokeLinecap: 'butt', strokeLinejoin: 'miter' }, React.createElement('path', { d: 'M17 12H42' }), React.createElement('path', { d: 'M17 24H42' }), React.createElement('path', { d: 'M17 36H42' }), React.createElement('path', { d: 'M8 12H9' }), React.createElement('path', { d: 'M8 24H9' }), React.createElement('path', { d: 'M8 36H9' })); };
|
||
|
||
/** 与 Ant Design Select 后缀箭头同形（DownOutlined 路径，收起态旋转 180° 与展开动画一致） */
|
||
var SelectSuffixArrowIcon = function (props) {
|
||
var up = props && props.up;
|
||
return React.createElement('span', {
|
||
className: 'ant-select-arrow',
|
||
style: {
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
lineHeight: 0,
|
||
marginLeft: 4,
|
||
flexShrink: 0,
|
||
color: 'inherit',
|
||
fontSize: 12,
|
||
transform: up ? 'rotate(180deg)' : 'none',
|
||
transformOrigin: '50% 50%',
|
||
transition: 'transform 0.3s'
|
||
},
|
||
'aria-hidden': true
|
||
},
|
||
React.createElement('svg', {
|
||
viewBox: '64 64 896 896',
|
||
focusable: 'false',
|
||
width: '1em',
|
||
height: '1em',
|
||
fill: 'currentColor'
|
||
},
|
||
React.createElement('path', { d: 'M884 256h-75c-5.1 0-9.9 2.5-12.6 6.5L512 654.6 227.9 262.6c-2.7-4-7.5-6.5-12.6-6.5h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z' })
|
||
)
|
||
);
|
||
};
|
||
|
||
var renderLabelTooltipContent = function (tags) {
|
||
return React.createElement(Space, { direction: 'vertical', size: 6, style: { padding: '2px 0' } },
|
||
tags.map(function (t) {
|
||
return React.createElement(Tag, { key: t, style: customerLabelTagStyle }, t);
|
||
})
|
||
);
|
||
};
|
||
|
||
/** 多标签：仅展示第一个 +「+N」；悬浮数量展示全部 */
|
||
var renderCustomerLabels = function (tags) {
|
||
if (!tags || !tags.length) return React.createElement('span', { style: { color: '#86909c' } }, '—');
|
||
if (tags.length === 1) {
|
||
return React.createElement(Space, { size: 4, wrap: false, style: { maxWidth: '100%', overflow: 'hidden' } },
|
||
React.createElement(Tag, { style: customerLabelTagStyle }, tags[0])
|
||
);
|
||
}
|
||
var rest = tags.length - 1;
|
||
var countEl = React.createElement(Tag, { style: customerLabelCountTagStyle }, '+' + String(rest));
|
||
return React.createElement(Space, { size: 4, wrap: false, style: { maxWidth: '100%', overflow: 'hidden' } },
|
||
React.createElement(Tag, { style: customerLabelTagStyle }, tags[0]),
|
||
React.createElement(Tooltip, { title: renderLabelTooltipContent(tags) },
|
||
React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle' } }, countEl)
|
||
)
|
||
);
|
||
};
|
||
|
||
var renderCustomerStatus = function (text) {
|
||
var dot = '#86909c';
|
||
if (text === '正常') dot = '#00b42a';
|
||
else if (text === '黑名单') dot = '#f53f3f';
|
||
return React.createElement(Space, { size: 6 },
|
||
React.createElement('span', { style: { display: 'inline-block', width: 6, height: 6, borderRadius: '50%', backgroundColor: dot } }),
|
||
React.createElement('span', null, text)
|
||
);
|
||
};
|
||
|
||
var columns = [
|
||
{ title: '客户编号', dataIndex: 'code', key: 'code', width: 132, fixed: 'left' },
|
||
{ title: '客户名称', dataIndex: 'name', key: 'name', width: 200, ellipsis: true },
|
||
{ title: '标签', dataIndex: 'labels', key: 'labels', width: 120, className: 'customer-col-labels', render: renderCustomerLabels },
|
||
{ title: '客户区域', dataIndex: 'region', key: 'region', width: 100, ellipsis: true },
|
||
{ title: '客户状态', dataIndex: 'status', key: 'status', width: 100, render: renderCustomerStatus },
|
||
{ title: '业务部门', dataIndex: 'department', key: 'department', width: 110, ellipsis: true },
|
||
{ title: '业务负责人', dataIndex: 'manager', key: 'manager', width: 110, ellipsis: true },
|
||
{ title: '客户类型', dataIndex: 'customerType', key: 'customerType', width: 100 },
|
||
{ title: '所属行业', dataIndex: 'industry', key: 'industry', width: 100, ellipsis: true },
|
||
{ title: '统一社会信用代码', dataIndex: 'creditCode', key: 'creditCode', width: 200, ellipsis: true },
|
||
{ title: '法人', dataIndex: 'legalPerson', key: 'legalPerson', width: 88 },
|
||
{ title: '注册资本', dataIndex: 'regCapital', key: 'regCapital', width: 104 },
|
||
{ title: '经营状态', dataIndex: 'operateStatus', key: 'operateStatus', width: 88 },
|
||
{ title: '详细地址', dataIndex: 'address', key: 'address', width: 240, ellipsis: true },
|
||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 176, className: 'customer-col-create-time', ellipsis: true },
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
fixed: 'right',
|
||
width: 168,
|
||
render: function (_, record) {
|
||
return React.createElement(Space, { size: 0, split: React.createElement('span', { style: { color: '#e5e6eb' } }, '|') },
|
||
React.createElement(Button, { type: 'link', size: 'small', style: { padding: '0 4px' }, onClick: function () { message.info('详情：' + record.name); } }, '详情'),
|
||
React.createElement(Button, { type: 'link', size: 'small', style: { padding: '0 4px' }, onClick: function () { message.info('编辑：' + record.name); } }, '编辑'),
|
||
React.createElement(Button, { type: 'link', size: 'small', style: { padding: '0 4px' }, onClick: function () { message.info('删除：' + record.name); } }, '删除')
|
||
);
|
||
}
|
||
}
|
||
];
|
||
|
||
var data = [
|
||
{ key: '1', code: 'C000001', name: '北京华宇科技有限公司', labels: ['资质存疑'], region: '华北地区', status: '正常', department: '销售一部', manager: '张伟', customerType: '企业客户', industry: '互联网', creditCode: '91110108MA01D2XY89', legalPerson: '李明', regCapital: '1000万元', operateStatus: '在业', address: '北京市海淀区中关村大街18号科创大厦8层', createTime: '2023-10-25 14:30:00' },
|
||
{ key: '2', code: 'A000001', name: '上海诚新贸易有限公司', labels: ['频繁改账期'], region: '华东地区', status: '正常', department: '销售一部', manager: '王芳', customerType: '企业客户', industry: '零售', creditCode: '91310115MA1K3NBC12', legalPerson: '陈强', regCapital: '500万元', operateStatus: '在业', address: '上海市浦东新区张江路1288号科技园3号楼', createTime: '2023-11-02 09:15:00' },
|
||
{ key: '3', code: 'B000001', name: '深圳智联信息技术有限公司', labels: [], region: '华南地区', status: '正常', department: '市场开拓部', manager: '刘洋', customerType: '企业客户', industry: '互联网', creditCode: '91440300MA5F8QWE45', legalPerson: '赵敏', regCapital: '2000万元', operateStatus: '在业', address: '广东省深圳市南山区科技园南区科苑路15号', createTime: '2023-11-18 16:20:00' },
|
||
{ key: '4', code: 'A000002', name: '杭州云帆智能制造股份有限公司', labels: ['逾期预警'], region: '华东地区', status: '正常', department: '大客户部', manager: '李强', customerType: '企业客户', industry: '制造业', creditCode: '91330106MA2B7HJK01', legalPerson: '周杰', regCapital: '5000万元', operateStatus: '存续', address: '浙江省杭州市滨江区物联网街451号', createTime: '2023-12-05 11:00:00' },
|
||
{ key: '5', code: 'D000001', name: '成都天府医疗健康集团', labels: ['信息不实'], region: '西南地区', status: '正常', department: '大客户部', manager: '陈静', customerType: '企业客户', industry: '医疗保健', creditCode: '91510100MA6C9RST78', legalPerson: '吴磊', regCapital: '3000万元', operateStatus: '在业', address: '四川省成都市高新区天府大道北段966号', createTime: '2024-01-08 10:45:00' },
|
||
{ key: '6', code: 'B000002', name: '广州粤海金融服务有限公司', labels: ['严重拖欠', '多头签约'], region: '华南地区', status: '黑名单', department: '销售二部', manager: '孙丽', customerType: '企业客户', industry: '金融', creditCode: '91440101MA5D1UVW23', legalPerson: '郑华', regCapital: '8000万元', operateStatus: '在业', address: '广东省广州市天河区珠江东路30号金融中心16层', createTime: '2024-01-22 13:10:00' },
|
||
{ key: '7', code: 'E000001', name: '武汉长江物流供应链有限公司', labels: [], region: '华中地区', status: '正常', department: '销售一部', manager: '张伟', customerType: '企业客户', industry: '物流', creditCode: '91420100MA4K2PQR56', legalPerson: '冯涛', regCapital: '1500万元', operateStatus: '在业', address: '湖北省武汉市东西湖区物流大道88号', createTime: '2024-02-01 08:50:00' },
|
||
{ key: '8', code: 'A000003', name: '南京金陵软件科技有限公司', labels: [], region: '华东地区', status: '正常', department: '市场开拓部', manager: '王芳', customerType: '企业客户', industry: '互联网', creditCode: '91320105MA1P5XYZ99', legalPerson: '韩雪', regCapital: '800万元', operateStatus: '在业', address: '江苏省南京市雨花台区软件大道101号', createTime: '2024-02-14 15:25:00' },
|
||
{ key: '9', code: 'C000002', name: '天津市滨海新区港口设备制造厂', labels: ['涉诉/仲裁'], region: '华北地区', status: '正常', department: '销售二部', manager: '刘洋', customerType: '企业客户', industry: '制造业', creditCode: '91120116MA07NMLM34', legalPerson: '曹阳', regCapital: '2200万元', operateStatus: '存续', address: '天津市滨海新区临港经济区渤海路36号', createTime: '2024-03-03 09:40:00' },
|
||
{ key: '10', code: 'B000003', name: '厦门海峡跨境电商有限公司', labels: [], region: '华南地区', status: '正常', department: '市场开拓部', manager: '赵敏', customerType: '企业客户', industry: '零售', creditCode: '91350200MA8F3CDE77', legalPerson: '许晴', regCapital: '600万元', operateStatus: '在业', address: '福建省厦门市湖里区象屿路97号国际航运中心', createTime: '2024-03-20 14:05:00' },
|
||
{ key: '11', code: 'F000001', name: '西安市教育局机关服务中心', labels: [], region: '西北地区', status: '正常', department: '大客户部', manager: '李强', customerType: '政府机构', industry: '公共服务', creditCode: '91610103MB1T2ABC88', legalPerson: '何伟', regCapital: '—', operateStatus: '在业', address: '陕西省西安市碑林区盐店街28号', createTime: '2024-04-02 11:30:00' },
|
||
{ key: '12', code: 'A000004', name: '青岛海洋生物医药研究院有限公司', labels: ['开票异常'], region: '华东地区', status: '正常', department: '销售一部', manager: '陈静', customerType: '企业客户', industry: '医疗保健', creditCode: '91370212MA3U5FGH22', legalPerson: '罗斌', regCapital: '3500万元', operateStatus: '在业', address: '山东省青岛市崂山区松岭路238号', createTime: '2024-04-18 16:00:00' },
|
||
{ key: '13', code: 'E000002', name: '郑州中原新能源汽车销售有限公司', labels: ['严重拖欠', '涉诉/仲裁', '多头签约'], region: '华中地区', status: '黑名单', department: '销售二部', manager: '孙丽', customerType: '企业客户', industry: '制造业', creditCode: '91410105MA9L6NOP44', legalPerson: '丁凯', regCapital: '1200万元', operateStatus: '注销', address: '河南省郑州市金水区经三路66号（已迁出）', createTime: '2024-05-06 10:15:00' },
|
||
{ key: '14', code: 'A000005', name: '个体工商户·林晓峰五金经营部', labels: [], region: '华东地区', status: '正常', department: '销售一部', manager: '周杰', customerType: '个人客户', industry: '零售', creditCode: '92330102MA2HY67890', legalPerson: '林晓峰', regCapital: '50万元', operateStatus: '在业', address: '浙江省温州市鹿城区车站大道789号', createTime: '2024-05-22 09:20:00' },
|
||
{ key: '15', code: 'D000002', name: '重庆山城火锅餐饮管理有限公司', labels: [], region: '西南地区', status: '正常', department: '市场开拓部', manager: '吴磊', customerType: '企业客户', industry: '零售', creditCode: '91500105MA60QRS111', legalPerson: '黄丽', regCapital: '300万元', operateStatus: '在业', address: '重庆市渝中区解放碑民族路188号', createTime: '2024-06-01 12:45:00' },
|
||
{ key: '16', code: 'A000006', name: '苏州工业园区精密模具厂', labels: ['车辆/资产高风险', '制裁/高风险地区'], region: '华东地区', status: '黑名单', department: '大客户部', manager: '郑华', customerType: '企业客户', industry: '制造业', creditCode: '91320594MA1W2TUV55', legalPerson: '马军', regCapital: '1800万元', operateStatus: '在业', address: '江苏省苏州市工业园区星龙街428号', createTime: '2024-06-15 15:50:00' },
|
||
{ key: '17', code: 'E000003', name: '长沙湘江科创投资基金（有限合伙）', labels: ['频繁争议'], region: '华中地区', status: '正常', department: '大客户部', manager: '冯涛', customerType: '企业客户', industry: '金融', creditCode: '91430100MA4L8XYZ66', legalPerson: '谢文', regCapital: '10000万元', operateStatus: '在业', address: '湖南省长沙市岳麓区麓谷大道658号', createTime: '2024-07-03 08:30:00' },
|
||
{ key: '18', code: 'C000003', name: '石家庄市桥西区智慧城市运营中心', labels: [], region: '华北地区', status: '正常', department: '市场开拓部', manager: '韩雪', customerType: '政府机构', industry: '互联网', creditCode: '91130104MB0X9DEF12', legalPerson: '邓伟', regCapital: '—', operateStatus: '在业', address: '河北省石家庄市桥西区中华南大街172号', createTime: '2024-07-20 14:10:00' },
|
||
{ key: '19', code: 'A000007', name: '合肥徽风电子元器件有限公司', labels: ['频繁改账期'], region: '华东地区', status: '正常', department: '销售二部', manager: '曹阳', customerType: '企业客户', industry: '制造业', creditCode: '91340100MA2U1BCD33', legalPerson: '蒋欣', regCapital: '900万元', operateStatus: '在业', address: '安徽省合肥市高新区望江西路800号', createTime: '2024-08-08 11:55:00' },
|
||
{ key: '20', code: 'D000003', name: '昆明滇池生态旅游开发有限公司', labels: ['制裁/高风险地区', '多头签约', '开票异常'], region: '西南地区', status: '正常', department: '销售一部', manager: '许晴', customerType: '企业客户', industry: '公共服务', creditCode: '91530100MA6N7KLM88', legalPerson: '潘越', regCapital: '4500万元', operateStatus: '存续', address: '云南省昆明市西山区滇池路1318号', createTime: '2024-08-25 17:00:00' }
|
||
];
|
||
|
||
var deptManagerMap = {};
|
||
data.forEach(function (r) {
|
||
if (!r.department) return;
|
||
if (!deptManagerMap[r.department]) deptManagerMap[r.department] = [];
|
||
if (r.manager && deptManagerMap[r.department].indexOf(r.manager) < 0) {
|
||
deptManagerMap[r.department].push(r.manager);
|
||
}
|
||
});
|
||
|
||
var departmentOptions = [];
|
||
var seenDept = {};
|
||
data.forEach(function (r) {
|
||
if (r.department && !seenDept[r.department]) {
|
||
seenDept[r.department] = true;
|
||
departmentOptions.push({ label: r.department, value: r.department });
|
||
}
|
||
});
|
||
|
||
var customerCodeFilterOptions = [];
|
||
var seenCode = {};
|
||
data.forEach(function (r) {
|
||
if (r.code && !seenCode[r.code]) {
|
||
seenCode[r.code] = true;
|
||
customerCodeFilterOptions.push({ label: r.code + ' · ' + r.name, value: r.code });
|
||
}
|
||
});
|
||
|
||
var customerNameFilterOptions = [];
|
||
var seenName = {};
|
||
data.forEach(function (r) {
|
||
if (r.name && !seenName[r.name]) {
|
||
seenName[r.name] = true;
|
||
customerNameFilterOptions.push({ label: r.name, value: r.name });
|
||
}
|
||
});
|
||
|
||
var fuzzyFilterOption = function (input, option) {
|
||
if (input == null || String(input).trim() === '') return true;
|
||
var s = String(input).toLowerCase();
|
||
var label = (option && option.label != null ? String(option.label) : '') + '';
|
||
var value = (option && option.value != null ? String(option.value) : '') + '';
|
||
return label.toLowerCase().indexOf(s) >= 0 || value.toLowerCase().indexOf(s) >= 0;
|
||
};
|
||
|
||
var getManagerFilterOptions = function (deptVals) {
|
||
if (!deptVals || deptVals.length === 0) {
|
||
var all = {};
|
||
Object.keys(deptManagerMap).forEach(function (d) {
|
||
(deptManagerMap[d] || []).forEach(function (m) { all[m] = true; });
|
||
});
|
||
return Object.keys(all).sort().map(function (m) { return { label: m, value: m }; });
|
||
}
|
||
var pick = {};
|
||
deptVals.forEach(function (d) {
|
||
(deptManagerMap[d] || []).forEach(function (m) { pick[m] = true; });
|
||
});
|
||
return Object.keys(pick).sort().map(function (m) { return { label: m, value: m }; });
|
||
};
|
||
|
||
var handleFilterDeptChange = function (vals) {
|
||
var v = vals || [];
|
||
setFilterDeptSelection(v);
|
||
var allowed = getManagerFilterOptions(v).map(function (o) { return o.value; });
|
||
var curM = filterForm.getFieldValue('filterManagers') || [];
|
||
filterForm.setFieldsValue({
|
||
filterManagers: curM.filter(function (m) { return allowed.indexOf(m) >= 0; })
|
||
});
|
||
};
|
||
|
||
var formItemLayout = {
|
||
labelAlign: 'left',
|
||
colon: false,
|
||
labelCol: { flex: '0 0 100px' },
|
||
wrapperCol: { flex: '1 1 0' }
|
||
};
|
||
|
||
var TextArea = Input.TextArea;
|
||
|
||
var tabCustomerBase = React.createElement(Row, { gutter: 16 },
|
||
React.createElement(Col, { span: 24 },
|
||
React.createElement(Form.Item, { label: '客户类型', name: 'customerType', rules: [{ required: true, message: '请选择客户类型' }] },
|
||
React.createElement(Radio.Group, null,
|
||
React.createElement(Radio, { value: '企业' }, '企业'),
|
||
React.createElement(Radio, { value: '个人' }, '个人'),
|
||
React.createElement(Radio, { value: '事业单位' }, '事业单位')
|
||
)
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 24 },
|
||
React.createElement(Form.Item, { label: '客户分级', name: 'abcLevel', rules: [{ required: true, message: '请选择分级' }] },
|
||
React.createElement(Radio.Group, null,
|
||
React.createElement(Radio, { value: 'A' }, 'A'),
|
||
React.createElement(Radio, { value: 'B' }, 'B'),
|
||
React.createElement(Radio, { value: 'C' }, 'C')
|
||
)
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 12 },
|
||
React.createElement(Form.Item, { label: '客户全称', name: 'name', rules: [{ required: true, message: '请输入客户全称' }] },
|
||
React.createElement(Input, { placeholder: '与客户证照一致' })
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 12 },
|
||
React.createElement(Form.Item, { label: '客户简称', name: 'shortName' },
|
||
React.createElement(Input, { placeholder: '选填' })
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 24 },
|
||
React.createElement(Form.Item, { label: '所属城市', name: 'region', rules: [{ required: true, message: '请选择省-市' }] },
|
||
React.createElement(Cascader, { options: regionOptions, placeholder: '省 - 市（级联）', style: { width: '100%' } })
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 24 },
|
||
React.createElement(Form.Item, { label: '通讯地址', name: 'address' },
|
||
React.createElement(TextArea, { rows: 2, placeholder: '通讯地址' })
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 12 },
|
||
React.createElement(Form.Item, { label: '业务部门', name: 'department', rules: [{ required: true, message: '请填写业务部门' }] },
|
||
React.createElement(Input, { placeholder: '业务部门' })
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 12 },
|
||
React.createElement(Form.Item, { label: '业务负责人', name: 'manager', rules: [{ required: true, message: '请填写业务负责人' }] },
|
||
React.createElement(Input, { placeholder: '业务负责人' })
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 24 },
|
||
React.createElement(Form.Item, { label: '备注', name: 'remark' },
|
||
React.createElement(TextArea, { rows: 2, placeholder: '备注' })
|
||
)
|
||
)
|
||
);
|
||
|
||
var tabContact = React.createElement(Row, { gutter: 16 },
|
||
React.createElement(Col, { span: 8 },
|
||
React.createElement(Form.Item, { label: '姓名', name: 'contactName' },
|
||
React.createElement(Input, { placeholder: '联系人姓名' })
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 8 },
|
||
React.createElement(Form.Item, { label: '手机号', name: 'contactPhone' },
|
||
React.createElement(Input, { placeholder: '手机号' })
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 8 },
|
||
React.createElement(Form.Item, { label: '职位', name: 'contactTitle' },
|
||
React.createElement(Input, { placeholder: '职位' })
|
||
)
|
||
)
|
||
);
|
||
|
||
var tabInvoice = React.createElement(Row, { gutter: 16 },
|
||
React.createElement(Col, { span: 24 },
|
||
React.createElement(Form.Item, {
|
||
label: '发票抬头',
|
||
name: 'invoiceTitle',
|
||
rules: [{ required: true, message: '请填写发票抬头' }],
|
||
extra: '建议与客户全称保持一致'
|
||
},
|
||
React.createElement(Input, { placeholder: '与客户名称一致' })
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 12 },
|
||
React.createElement(Form.Item, { label: '纳税人识别号', name: 'taxId', rules: [{ required: true, message: '请填写纳税人识别号' }] },
|
||
React.createElement(Input, { placeholder: '纳税人识别号' })
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 12 },
|
||
React.createElement(Form.Item, { label: '注册电话', name: 'regPhone' },
|
||
React.createElement(Input, { placeholder: '注册电话' })
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 24 },
|
||
React.createElement(Form.Item, { label: '注册地址', name: 'regAddress' },
|
||
React.createElement(TextArea, { rows: 2, placeholder: '注册地址' })
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 12 },
|
||
React.createElement(Form.Item, { label: '开户银行', name: 'bankName', rules: [{ required: true, message: '请填写开户银行' }] },
|
||
React.createElement(Input, { placeholder: '开户银行' })
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 12 },
|
||
React.createElement(Form.Item, { label: '账号', name: 'bankAccount', rules: [{ required: true, message: '请填写银行账号' }] },
|
||
React.createElement(Input, { placeholder: '银行账号' })
|
||
)
|
||
)
|
||
);
|
||
|
||
var customerModal = React.createElement(Modal, {
|
||
title: '新增客户',
|
||
open: modalOpen,
|
||
width: 720,
|
||
onCancel: function () { setModalOpen(false); },
|
||
onOk: function () {
|
||
customerForm.validateFields().then(function () {
|
||
message.success('已保存（示例，请对接保存接口）');
|
||
setModalOpen(false);
|
||
}).catch(function () {});
|
||
},
|
||
okText: '保存',
|
||
cancelText: '取消',
|
||
destroyOnClose: true
|
||
},
|
||
React.createElement(Form, {
|
||
form: customerForm,
|
||
layout: 'vertical',
|
||
style: { marginTop: 4 },
|
||
initialValues: { customerType: '企业', abcLevel: 'B' }
|
||
},
|
||
React.createElement(Tabs, {
|
||
defaultActiveKey: 'base',
|
||
items: [
|
||
{ key: 'base', label: '客户信息', children: tabCustomerBase },
|
||
{ key: 'contact', label: '联系人信息', children: tabContact },
|
||
{ key: 'invoice', label: '付款及开票信息', children: tabInvoice }
|
||
]
|
||
})
|
||
)
|
||
);
|
||
|
||
return React.createElement(Layout, { className: 'arco-theme-overrides', style: { minHeight: '100vh', background: '#f2f3f5', fontFamily: 'Inter, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif' } },
|
||
// 内联 CSS 以实现最高保真度的 Arco UI
|
||
React.createElement('style', null, `
|
||
.arco-theme-overrides .ant-btn { border-radius: 4px; }
|
||
.arco-theme-overrides .ant-btn-primary { background-color: #165dff; border-color: #165dff; }
|
||
.arco-theme-overrides .ant-btn-primary:hover { background-color: #4080ff; border-color: #4080ff; }
|
||
.arco-theme-overrides .ant-btn-link { color: #165dff; }
|
||
.arco-theme-overrides .ant-btn-link:hover { background-color: transparent; color: #4080ff; }
|
||
/* 表头对齐 Arco .arco-table-th-title：14px / #909399，标题区 22px 行高，整行仍 40px */
|
||
.arco-theme-overrides .ant-table-thead > tr > th {
|
||
background-color: #f2f3f5;
|
||
color: #909399;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
height: 40px;
|
||
padding: 9px 16px;
|
||
line-height: 22px;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #e5e6eb;
|
||
border-top: none;
|
||
vertical-align: middle;
|
||
}
|
||
.arco-theme-overrides .ant-table-thead > tr > th .ant-table-column-title {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
line-height: 22px;
|
||
min-height: 22px;
|
||
white-space: nowrap;
|
||
}
|
||
.arco-theme-overrides .ant-table-thead > tr > th::before { display: none !important; }
|
||
.arco-theme-overrides .ant-table-tbody > tr > td { border-bottom: 1px solid #e5e6eb; padding: 13px 16px; color: #4e5969; vertical-align: middle; line-height: 22px; }
|
||
.arco-theme-overrides .ant-table-tbody > tr { height: 52px; }
|
||
.arco-theme-overrides .ant-table-cell.customer-col-create-time { white-space: nowrap; }
|
||
.arco-theme-overrides .ant-table-cell.customer-col-labels .ant-space { max-width: 100%; }
|
||
.arco-theme-overrides .customer-table-scroll-wrap { width: 100%; min-width: 0; max-width: 100%; }
|
||
.arco-theme-overrides .ant-table-wrapper { border: none; }
|
||
.arco-theme-overrides .ant-table { border: none; }
|
||
.arco-theme-overrides .ant-table-container { border: none; }
|
||
.arco-theme-overrides .ant-table-pagination.ant-pagination { margin: 16px 0 0 0; }
|
||
.arco-theme-overrides .ant-card { border: none; border-radius: 4px; }
|
||
.arco-theme-overrides .customer-page-card.ant-card { border: 1px solid #e5e6eb !important; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); background: #fff; }
|
||
.arco-theme-overrides .customer-page-card .ant-card-body { padding: 20px 24px 24px; }
|
||
/* 筛选组件(Input/Select/DatePicker)的默认、Hover、Focus样式复刻 */
|
||
.arco-theme-overrides .ant-input, .arco-theme-overrides .ant-select-selector, .arco-theme-overrides .ant-picker { border-radius: 2px; border: 1px solid #e5e6eb; background-color: #fff; transition: all 0.1s cubic-bezier(0, 0, 1, 1); }
|
||
.arco-theme-overrides .ant-input:hover, .arco-theme-overrides .ant-select:not(.ant-select-disabled):hover .ant-select-selector, .arco-theme-overrides .ant-picker:hover { background-color: #fff; border-color: #165dff; }
|
||
.arco-theme-overrides .ant-input:focus, .arco-theme-overrides .ant-input-focused, .arco-theme-overrides .ant-select-focused .ant-select-selector, .arco-theme-overrides .ant-picker-focused { background-color: #fff; border: 1px solid #165dff !important; box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2) !important; outline: 0; }
|
||
.arco-theme-overrides .ant-input-affix-wrapper:focus, .arco-theme-overrides .ant-input-affix-wrapper-focused { background-color: #fff; border-color: #165dff !important; box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2) !important; }
|
||
.arco-theme-overrides .ant-input-affix-wrapper > input.ant-input,
|
||
.arco-theme-overrides .ant-input-affix-wrapper > input.ant-input:focus,
|
||
.arco-theme-overrides .ant-input-affix-wrapper > input.ant-input:hover { height: 100%; padding: 0; border: none !important; box-shadow: none !important; outline: none !important; background-color: transparent !important; }
|
||
|
||
/* 日期选择器展开面板(Dropdown/Panel)的样式复刻 */
|
||
.arco-theme-overrides .ant-picker-dropdown .ant-picker-panel-container { border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border: 1px solid #e5e6eb; background: #fff; }
|
||
.arco-theme-overrides .ant-picker-dropdown .ant-picker-header { border-bottom: 1px solid #e5e6eb; color: #1d2129; padding: 0 8px; }
|
||
.arco-theme-overrides .ant-picker-dropdown .ant-picker-content th { color: #86909c; font-weight: 400; font-size: 14px; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner { background: #165dff; color: #fff; border-radius: 2px; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner { background: #165dff; color: #fff; border-radius: 2px; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-in-range::before { background: #e8f3ff; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before { border: 1px solid transparent; border-radius: 2px; position: relative; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background-color: #165dff; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-today.ant-picker-cell-selected .ant-picker-cell-inner::after { background-color: #fff; }
|
||
.arco-theme-overrides .ant-picker-dropdown .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner { background: #f2f3f5; border-radius: 2px; }
|
||
.arco-theme-overrides .ant-picker-cell-inner { border-radius: 2px; font-size: 14px; color: #4e5969; width: 24px; height: 24px; line-height: 24px; }
|
||
|
||
/* 日期选择器展开面板(Dropdown/Panel)的样式复刻 */
|
||
.arco-theme-overrides .ant-picker-dropdown .ant-picker-panel-container { border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border: 1px solid #e5e6eb; background: #fff; }
|
||
.arco-theme-overrides .ant-picker-dropdown .ant-picker-header { border-bottom: 1px solid #e5e6eb; color: #1d2129; padding: 0 8px; }
|
||
.arco-theme-overrides .ant-picker-dropdown .ant-picker-content th { color: #86909c; font-weight: 400; font-size: 14px; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner { background: #165dff; color: #fff; border-radius: 2px; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner { background: #165dff; color: #fff; border-radius: 2px; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-in-range::before { background: #e8f3ff; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before { border: 1px solid transparent; border-radius: 2px; position: relative; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background-color: #165dff; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-today.ant-picker-cell-selected .ant-picker-cell-inner::after { background-color: #fff; }
|
||
.arco-theme-overrides .ant-picker-dropdown .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner { background: #f2f3f5; border-radius: 2px; }
|
||
.arco-theme-overrides .ant-picker-cell-inner { border-radius: 2px; font-size: 14px; color: #4e5969; width: 24px; height: 24px; line-height: 24px; }
|
||
.arco-theme-overrides .ant-breadcrumb { color: #86909c; font-size: 14px; white-space: nowrap; flex-shrink: 0; }
|
||
.arco-theme-overrides .customer-page-header-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; margin-bottom: 20px; }
|
||
.arco-theme-overrides .ant-breadcrumb a { color: #4e5969; }
|
||
.arco-theme-overrides .ant-breadcrumb a:hover { color: #165dff; background-color: transparent; }
|
||
.arco-theme-overrides .ant-form-item-label { padding: 0 16px 0 0 !important; line-height: 32px; height: 32px; display: flex; align-items: center; }
|
||
.arco-theme-overrides .ant-form-item-control { display: flex; align-items: center; line-height: 32px; min-height: 32px; }
|
||
.arco-theme-overrides .ant-form-item-control-input { min-height: 32px; width: 100%; display: flex; align-items: center; }
|
||
.arco-theme-overrides .ant-form-item-control-input-content { display: flex; align-items: center; width: 100%; height: 100%; }
|
||
.arco-theme-overrides .ant-select { width: 100%; height: 32px; }
|
||
.arco-theme-overrides .ant-select-selector { height: 32px !important; min-height: 32px !important; display: flex; align-items: center; width: 100%; padding: 0 12px; }
|
||
.arco-theme-overrides .ant-select-multiple .ant-select-selector { padding: 0 4px; align-items: center; }
|
||
.arco-theme-overrides .ant-select-selection-item { line-height: 30px !important; margin-top: 0 !important; margin-bottom: 0 !important; }
|
||
.arco-theme-overrides .ant-select-selection-overflow { align-items: center; }
|
||
.arco-theme-overrides .customer-filter-manager-select.ant-select-multiple .ant-select-selector { overflow: hidden; }
|
||
.arco-theme-overrides .customer-filter-manager-select.ant-select-multiple .ant-select-selection-overflow { flex-wrap: nowrap; overflow: hidden; }
|
||
.arco-theme-overrides .ant-input { height: 32px; padding: 4px 12px; }
|
||
.arco-theme-overrides .ant-picker { height: 32px !important; min-height: 32px !important; display: flex; align-items: center; padding: 4px 12px; width: 100%; }
|
||
.arco-theme-overrides .ant-form-item-label > label { color: #4e5969; white-space: nowrap; }
|
||
.arco-theme-overrides .ant-form-item-label > label::after { display: none !important; content: "" !important; margin: 0 !important; }
|
||
|
||
/* 多选标签及下拉菜单 Checkbox 样式复刻 (模拟 Arco) */
|
||
.arco-theme-overrides .ant-select-multiple .ant-select-selection-item { background: #f2f3f5; border: none; border-radius: 2px; }
|
||
.arco-theme-overrides .ant-select-multiple.ant-select-show-arrow .ant-select-selection-item { padding-inline-end: 24px; }
|
||
.arco-theme-overrides .ant-select-multiple .ant-select-item-option { padding-left: 36px; position: relative; }
|
||
.arco-theme-overrides .ant-select-multiple .ant-select-item-option::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border: 1px solid #e5e6eb; border-radius: 2px; transition: all 0.1s; background: #fff; box-sizing: border-box; }
|
||
.arco-theme-overrides .ant-select-multiple .ant-select-item-option-selected::before { background-color: #165dff; border-color: #165dff; }
|
||
.arco-theme-overrides .ant-select-multiple .ant-select-item-option-selected::after { content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-70%) rotate(45deg); width: 4px; height: 8px; border: 2px solid #fff; border-top: 0; border-left: 0; box-sizing: content-box; z-index: 1; }
|
||
.arco-theme-overrides .ant-select-multiple .ant-select-item-option-state { display: none; }
|
||
`),
|
||
// 仅保留客户管理主内容区（无顶栏、无侧栏）；面包屑在卡片外，标题+筛选+列表在白卡片内
|
||
React.createElement(Content, { style: { marginLeft: 0, padding: '16px 20px 24px', minHeight: '100vh', display: 'flex', flexDirection: 'column', background: '#f2f3f5' } },
|
||
React.createElement('div', { className: 'customer-page-header-row', style: { marginBottom: 12, flexShrink: 0 } },
|
||
React.createElement(Breadcrumb, {
|
||
separator: React.createElement('span', { style: { color: '#c9cdd4' } }, '/'),
|
||
items: [
|
||
{ title: React.createElement(ListIcon, { style: { display: 'inline-flex', alignItems: 'center', fontSize: 14, transform: 'translate(-2px, 1px)' } }) },
|
||
{ title: '业务管理' }
|
||
]
|
||
})
|
||
),
|
||
React.createElement(Card, { className: 'customer-page-card', bordered: false },
|
||
React.createElement('div', { style: { fontSize: 18, fontWeight: 600, color: '#1d2129', lineHeight: '26px', marginBottom: 20 } }, '客户管理'),
|
||
// 搜索表单区域
|
||
React.createElement('div', { style: { marginBottom: 0 } },
|
||
React.createElement(Row, { style: { flexWrap: 'nowrap', alignItems: 'stretch' } },
|
||
React.createElement(Col, { flex: 1, style: { minWidth: 0, paddingRight: 40 } },
|
||
React.createElement(Form, Object.assign({ layout: 'horizontal', form: filterForm }, formItemLayout),
|
||
React.createElement(Row, { gutter: 24, style: { rowGap: 0 } },
|
||
React.createElement(Col, { span: 8 },
|
||
React.createElement(Form.Item, { name: 'filterCode', label: '客户编号', style: { marginBottom: 16, height: 32 } },
|
||
React.createElement(Select, {
|
||
allowClear: true,
|
||
showSearch: true,
|
||
filterOption: fuzzyFilterOption,
|
||
placeholder: '请选择或搜索客户编号',
|
||
options: customerCodeFilterOptions
|
||
})
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 8 },
|
||
React.createElement(Form.Item, { name: 'filterName', label: '客户名称', style: { marginBottom: 16, height: 32 } },
|
||
React.createElement(Select, {
|
||
allowClear: true,
|
||
showSearch: true,
|
||
filterOption: fuzzyFilterOption,
|
||
placeholder: '请选择或搜索客户名称',
|
||
options: customerNameFilterOptions
|
||
})
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 8 },
|
||
React.createElement(Form.Item, { name: 'filterTags', label: '标签', style: { marginBottom: 16, height: 32 } },
|
||
React.createElement(Select, {
|
||
mode: 'multiple',
|
||
allowClear: true,
|
||
maxTagCount: 'responsive',
|
||
placeholder: '请选择标签',
|
||
options: customerLabelOptions
|
||
})
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 8 },
|
||
React.createElement(Form.Item, { name: 'filterRegion', label: '区域', style: { marginBottom: 16, height: 32 } },
|
||
React.createElement(Cascader, {
|
||
style: { width: '100%' },
|
||
options: regionOptions,
|
||
placeholder: '请选择客户区域',
|
||
changeOnSelect: false
|
||
})
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 8 },
|
||
React.createElement(Form.Item, { name: 'filterStatus', label: '客户状态', style: { marginBottom: 16, height: 32 } },
|
||
React.createElement(Select, {
|
||
mode: 'multiple',
|
||
allowClear: true,
|
||
maxTagCount: 'responsive',
|
||
placeholder: '请选择客户状态',
|
||
options: [
|
||
{ label: '正常', value: '正常' },
|
||
{ label: '黑名单', value: '黑名单' }
|
||
]
|
||
})
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 8 },
|
||
React.createElement(Form.Item, { name: 'filterDepts', label: '业务部门', style: { marginBottom: 16, height: 32 } },
|
||
React.createElement(Select, {
|
||
mode: 'multiple',
|
||
allowClear: true,
|
||
maxTagCount: 'responsive',
|
||
placeholder: '请选择业务部门',
|
||
options: departmentOptions,
|
||
onChange: handleFilterDeptChange
|
||
})
|
||
)
|
||
)
|
||
),
|
||
filterExpanded
|
||
? React.createElement(Row, { gutter: 24, style: { rowGap: 0, marginTop: 0 } },
|
||
React.createElement(Col, { span: 8 },
|
||
React.createElement(Form.Item, { name: 'filterManagers', label: '业务负责人', style: { marginBottom: 16, height: 32 } },
|
||
React.createElement(Select, {
|
||
mode: 'multiple',
|
||
allowClear: true,
|
||
maxTagCount: 'responsive',
|
||
className: 'customer-filter-manager-select',
|
||
placeholder: '请选择业务负责人',
|
||
options: getManagerFilterOptions(filterDeptSelection)
|
||
})
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 8 },
|
||
React.createElement(Form.Item, { name: 'filterDateRange', label: '创建时间', style: { marginBottom: 16, height: 32 } },
|
||
React.createElement(DatePicker.RangePicker, {
|
||
style: { width: '100%' },
|
||
placeholder: ['开始时间', '结束时间']
|
||
})
|
||
)
|
||
)
|
||
)
|
||
: null
|
||
)
|
||
),
|
||
React.createElement(Divider, {
|
||
type: 'vertical',
|
||
style: {
|
||
alignSelf: 'stretch',
|
||
height: 'auto',
|
||
minHeight: filterExpanded ? 132 : 100,
|
||
borderLeftColor: 'rgb(229, 230, 235)',
|
||
borderLeftStyle: 'dashed',
|
||
marginLeft: 20,
|
||
marginRight: 20
|
||
}
|
||
}),
|
||
React.createElement(Col, { flex: 'none', style: { textAlign: 'right', display: 'flex', flexDirection: 'column', alignItems: 'flex-end', minWidth: 100, maxWidth: 168 } },
|
||
React.createElement(Space, { direction: 'vertical', size: 12, style: { width: '100%', alignItems: 'flex-end' } },
|
||
React.createElement(Button, { type: 'primary', icon: React.createElement(SearchIcon, null), style: { display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'center', width: 86 } }, '查询'),
|
||
React.createElement(Button, {
|
||
icon: React.createElement(ResetIcon, null),
|
||
style: { display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'center', width: 86 },
|
||
onClick: function () {
|
||
filterForm.resetFields();
|
||
setFilterDeptSelection([]);
|
||
}
|
||
}, '重置'),
|
||
showFilterExpandToggle
|
||
? React.createElement(Button, {
|
||
type: 'link',
|
||
size: 'small',
|
||
style: { padding: '0 4px', height: 'auto', lineHeight: 1.4, color: '#165dff', whiteSpace: 'normal', textAlign: 'right' },
|
||
onClick: function () { setFilterExpanded(!filterExpanded); }
|
||
},
|
||
React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'flex-end', width: '100%' } },
|
||
filterExpanded ? '收起' : '更多筛选',
|
||
React.createElement(SelectSuffixArrowIcon, { up: filterExpanded })
|
||
)
|
||
)
|
||
: null
|
||
)
|
||
)
|
||
)
|
||
),
|
||
React.createElement(Divider, { style: { margin: '16px 0 20px', borderColor: '#e5e6eb' } }),
|
||
// 工具栏 + 表格
|
||
React.createElement('div', { style: { display: 'flex', flexDirection: 'column', flex: 1, minWidth: 0 } },
|
||
React.createElement(Row, { justify: 'space-between', align: 'middle', style: { marginBottom: 16 } },
|
||
React.createElement(Col, null,
|
||
React.createElement(Space, { size: 12 },
|
||
React.createElement(Button, { type: 'primary', icon: React.createElement(PlusIcon, null), style: { display: 'flex', alignItems: 'center', gap: 6 }, onClick: function () { customerForm.resetFields(); setModalOpen(true); } }, '新增客户'),
|
||
React.createElement(Button, null, '批量导入')
|
||
)
|
||
),
|
||
React.createElement(Col, null,
|
||
React.createElement(Button, {
|
||
style: { padding: '4px 10px', height: 32, display: 'flex', alignItems: 'center', gap: 6, color: '#4e5969' },
|
||
title: '批量导出',
|
||
onClick: function () { message.info('批量导出（示例）'); }
|
||
}, React.createElement(DownloadIcon, null), React.createElement('span', null, '批量导出'))
|
||
)
|
||
),
|
||
// 表格区域（横向超出出现滚动条；操作列 fixed 右侧）
|
||
React.createElement('div', { className: 'customer-table-scroll-wrap', style: { flex: 1, minHeight: 0, minWidth: 0 } },
|
||
React.createElement(Table, {
|
||
rowSelection: { type: 'checkbox', columnWidth: 48 },
|
||
columns: columns,
|
||
dataSource: data,
|
||
pagination: {
|
||
defaultPageSize: 10,
|
||
showSizeChanger: true,
|
||
pageSizeOptions: ['10', '20', '50', '100'],
|
||
showTotal: function (total) { return '共 ' + total + ' 条'; }
|
||
},
|
||
scroll: { x: 2242 }
|
||
})
|
||
)
|
||
)
|
||
)
|
||
),
|
||
customerModal
|
||
);
|
||
};
|
||
|
||
if (typeof module !== 'undefined' && module.exports) module.exports = Component;
|