feat: sync full workspace including web modules, docs, and configurations to Gitea
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>
This commit is contained in:
王冕
379
ONEOS-web/CRM/供应商管理.jsx
Normal file
379
ONEOS-web/CRM/供应商管理.jsx
Normal file
@@ -0,0 +1,379 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// ONEOS-web 示例项目 - CRM 供应商管理 (完美复刻 Arco Design Pro 查询表格)
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
|
||||
var antd = window.antd;
|
||||
var Table = antd.Table;
|
||||
var Button = antd.Button;
|
||||
var Card = antd.Card;
|
||||
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 Menu = antd.Menu;
|
||||
var Layout = antd.Layout;
|
||||
var message = antd.message;
|
||||
var Typography = antd.Typography;
|
||||
var Avatar = antd.Avatar;
|
||||
var Badge = antd.Badge;
|
||||
|
||||
var Header = Layout.Header;
|
||||
var Content = Layout.Content;
|
||||
var Sider = Layout.Sider;
|
||||
var Title = Typography.Title;
|
||||
|
||||
var _currentMenu = useState('crm-supplier');
|
||||
var currentMenu = _currentMenu[0];
|
||||
var setCurrentMenu = _currentMenu[1];
|
||||
|
||||
var handleMenuClick = function (e) {
|
||||
setCurrentMenu(e.key);
|
||||
if (e.key === 'contract-list') {
|
||||
message.info('跳转至 合同列表');
|
||||
window.location.hash = '合同列表';
|
||||
} else if (e.key === 'erp-order') {
|
||||
message.info('跳转至 ERP 订单管理');
|
||||
window.location.hash = '订单管理';
|
||||
} else if (e.key === 'asset-overview') {
|
||||
message.info('跳转至 资产概览');
|
||||
window.location.hash = '资产概览';
|
||||
} else if (e.key === 'crm-list') {
|
||||
message.info('跳转至 客户列表');
|
||||
window.location.hash = '客户列表';
|
||||
}
|
||||
};
|
||||
|
||||
// 自定义 SVG 图标（高保真还原 Arco 风格）
|
||||
var SearchIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 4 }, React.createElement('path', { d: 'M33.072 33.071c6.248-6.248 6.248-16.379 0-22.627-6.249-6.249-16.38-6.249-22.628 0-6.248 6.248-6.248 16.379 0 22.627 6.248 6.248 16.38 6.248 22.628 0Zm0 0 8.485 8.485' })); };
|
||||
var ResetIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 4 }, React.createElement('path', { d: 'M38.837 18C36.463 12.136 30.715 8 24 8 15.163 8 8 15.163 8 24s7.163 16 16 16c7.455 0 13.72-5.1 15.496-12M40 8v10H30' })); };
|
||||
var PlusIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 4 }, React.createElement('path', { d: 'M5 24h38M24 5v38' })); };
|
||||
var DownloadIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 4 }, React.createElement('path', { d: 'm33.072 22.071-9.07 9.071-9.072-9.07M24 5v26m16 4v6H8v-6' })); };
|
||||
var SettingIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 16, height: 16, fill: 'none', stroke: 'currentColor', strokeWidth: 4 }, React.createElement('path', { d: 'M18.797 6.732A1 1 0 0 1 19.76 6h8.48a1 1 0 0 1 .964.732l1.285 4.628a1 1 0 0 0 1.213.7l4.651-1.2a1 1 0 0 1 1.116.468l4.24 7.344a1 1 0 0 1-.153 1.2L38.193 23.3a1 1 0 0 0 0 1.402l3.364 3.427a1 1 0 0 1 .153 1.2l-4.24 7.344a1 1 0 0 1-1.116.468l-4.65-1.2a1 1 0 0 0-1.214.7l-1.285 4.628a1 1 0 0 1-.964.732h-8.48a1 1 0 0 1-.963-.732L17.51 36.64a1 1 0 0 0-1.213-.7l-4.65 1.2a1 1 0 0 1-1.116-.468l-4.24-7.344a1 1 0 0 1 .153-1.2L9.809 24.7a1 1 0 0 0 0-1.402l-3.364-3.427a1 1 0 0 1-.153-1.2l4.24-7.344a1 1 0 0 1 1.116-.468l4.65 1.2a1 1 0 0 0 1.213-.7l1.286-4.628Z' }), React.createElement('path', { d: 'M30 24a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z' })); };
|
||||
var NoticeIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 18, height: 18, fill: 'none', stroke: 'currentColor', strokeWidth: 4 }, React.createElement('path', { d: 'M39 34h3v4H6v-4h3V20.218a15 15 0 0 1 30 0V34ZM24 44a6 6 0 0 1-6-6h12a6 6 0 0 1-6 6Z' })); };
|
||||
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' })); };
|
||||
|
||||
var columns = [
|
||||
{ title: '供应商名称', dataIndex: 'name', key: 'name', width: 220 },
|
||||
{ title: '类型', dataIndex: 'type', key: 'type', width: 140 },
|
||||
{ title: '所属城市', dataIndex: 'city', key: 'city', width: 140 },
|
||||
{ title: '业务负责部门', dataIndex: 'department', key: 'department', width: 140 },
|
||||
{ title: '业务负责人员', dataIndex: 'manager', key: 'manager', width: 140 },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 100, render: function(text) {
|
||||
var isOnline = text === '正常';
|
||||
return React.createElement(Space, { size: 6 },
|
||||
React.createElement('span', { style: { display: 'inline-block', width: 6, height: 6, borderRadius: '50%', backgroundColor: isOnline ? '#00b42a' : '#f53f3f' } }),
|
||||
React.createElement('span', null, text)
|
||||
);
|
||||
} },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 180 },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
render: function (_, record) {
|
||||
return React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function() { message.info('查看详情: ' + record.name); } }, '查看');
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
var data = [
|
||||
{ key: '1', name: '阿里云计算有限公司', type: '其他', city: '浙江-杭州', department: '技术部', manager: '张三', status: '正常', createTime: '2023-01-10 10:00:00' },
|
||||
{ key: '2', name: '腾讯云计算（北京）有限责任公司', type: '其他', city: '北京', department: '技术部', manager: '李四', status: '正常', createTime: '2023-02-15 11:30:00' },
|
||||
{ key: '3', name: '中国平安财产保险股份有限公司', type: '保险公司', city: '广东-深圳', department: '法务部', manager: '王五', status: '正常', createTime: '2023-03-20 14:15:00' },
|
||||
{ key: '4', name: '一汽大众汽车有限公司', type: '整车企业', city: '吉林-长春', department: '采购部', manager: '赵六', status: '停用', createTime: '2023-04-18 09:45:00' },
|
||||
{ key: '5', name: '宁德时代新能源科技股份有限公司', type: '备件供应商', city: '福建-宁德', department: '采购部', manager: '孙七', status: '正常', createTime: '2023-05-12 16:20:00' }
|
||||
];
|
||||
|
||||
var menuItems = [
|
||||
{
|
||||
key: 'contract',
|
||||
label: '合同管理',
|
||||
icon: React.createElement('span', { className: 'anticon' }, '📄'),
|
||||
children: [
|
||||
{ key: 'contract-list', label: '合同列表' }
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'crm',
|
||||
label: 'CRM 管理',
|
||||
icon: React.createElement('span', { className: 'anticon' }, '👥'),
|
||||
children: [
|
||||
{ key: 'crm-list', label: '客户管理' },
|
||||
{ key: 'crm-supplier', label: '供应商管理' },
|
||||
{ key: 'crm-analysis', label: 'CRM 分析' }
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'erp',
|
||||
label: 'ERP 订单管理',
|
||||
icon: React.createElement('span', { className: 'anticon' }, '📦'),
|
||||
children: [
|
||||
{ key: 'erp-order', label: '订单管理' }
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'asset',
|
||||
label: '资产管理',
|
||||
icon: React.createElement('span', { className: 'anticon' }, '🚗'),
|
||||
children: [
|
||||
{ key: 'asset-overview', label: '资产概览' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
var formItemLayout = {
|
||||
labelAlign: 'left',
|
||||
colon: false,
|
||||
labelCol: { flex: '0 0 86px' },
|
||||
wrapperCol: { flex: '1 1 0' }
|
||||
};
|
||||
|
||||
return React.createElement(Layout, { className: 'arco-theme-overrides', style: { minHeight: '100vh', background: '#fff', 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; box-shadow: none; font-size: 14px; }
|
||||
.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-default { background-color: #f2f3f5; border-color: transparent; color: #4e5969; }
|
||||
.arco-theme-overrides .ant-btn-default:hover { background-color: #e5e6eb; border-color: transparent; color: #4e5969; }
|
||||
.arco-theme-overrides .ant-btn-link { color: #165dff; }
|
||||
.arco-theme-overrides .ant-btn-link:hover { background-color: transparent; color: #4080ff; }
|
||||
.arco-theme-overrides .ant-menu-light .ant-menu-item-selected { background-color: #f2f9fe; color: #165dff; }
|
||||
.arco-theme-overrides .ant-menu-light .ant-menu-item-selected::after { border-right-color: #165dff; }
|
||||
.arco-theme-overrides .ant-table-thead > tr > th { background-color: #f2f3f5; color: #1d2129; font-weight: 500; padding: 13px 16px; border-bottom: 1px solid #e5e6eb; border-top: none; }
|
||||
.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; }
|
||||
.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; }
|
||||
/* 筛选组件(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; }
|
||||
|
||||
/* 日期选择器展开面板(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; }
|
||||
.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 .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; }
|
||||
.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; }
|
||||
`),
|
||||
// 顶部 Header
|
||||
React.createElement(Header, {
|
||||
style: {
|
||||
background: '#fff',
|
||||
padding: '0 20px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid #e5e6eb',
|
||||
height: 60,
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 100
|
||||
}
|
||||
},
|
||||
// 左侧 Logo
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } },
|
||||
React.createElement('div', { style: { width: 32, height: 32, background: '#165dff', borderRadius: 4, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff', fontWeight: 'bold' } }, 'A'),
|
||||
React.createElement('div', { style: { fontSize: '20px', fontWeight: '600', color: '#1d2129', letterSpacing: '0.5px' } }, 'Arco Pro')
|
||||
),
|
||||
// 右侧工具栏
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 20 } },
|
||||
React.createElement(Input.Search, { placeholder: '搜索功能', style: { width: 220, borderRadius: 16 } }),
|
||||
React.createElement(Badge, { dot: true, offset: [-2, 4] },
|
||||
React.createElement('span', { style: { color: '#4e5969', cursor: 'pointer', display: 'flex' }, title: '消息通知' }, React.createElement(NoticeIcon, null))
|
||||
),
|
||||
React.createElement('span', { style: { color: '#4e5969', cursor: 'pointer', display: 'flex' }, title: '设置' }, React.createElement(SettingIcon, null)),
|
||||
React.createElement(Avatar, { size: 32, src: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp', style: { cursor: 'pointer' } })
|
||||
)
|
||||
),
|
||||
// 下方主体内容
|
||||
React.createElement(Layout, { style: { paddingTop: 60, background: '#fff' } },
|
||||
// 左侧菜单 Sider
|
||||
React.createElement(Sider, {
|
||||
width: 220,
|
||||
style: {
|
||||
background: '#fff',
|
||||
borderRight: '1px solid #e5e6eb',
|
||||
position: 'fixed',
|
||||
top: 60,
|
||||
left: 0,
|
||||
height: 'calc(100vh - 60px)',
|
||||
overflowY: 'auto',
|
||||
zIndex: 99
|
||||
}
|
||||
},
|
||||
React.createElement(Menu, {
|
||||
mode: 'inline',
|
||||
selectedKeys: [currentMenu],
|
||||
defaultOpenKeys: ['crm'],
|
||||
items: menuItems,
|
||||
onClick: handleMenuClick,
|
||||
style: { borderRight: 'none', padding: '8px', background: '#fff' }
|
||||
})
|
||||
),
|
||||
// 右侧内容 Content
|
||||
React.createElement(Content, { style: { marginLeft: 220, padding: '16px 20px 0 20px', minHeight: 'calc(100vh - 60px)', display: 'flex', flexDirection: 'column', background: '#fff' } },
|
||||
React.createElement('div', { style: { padding: '16px 20px 0 20px', marginBottom: 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: '列表页' },
|
||||
{ title: React.createElement('span', { style: { color: '#1d2129' } }, '供应商管理') }
|
||||
]
|
||||
}),
|
||||
React.createElement(Title, { level: 4, style: { marginTop: 16, marginBottom: 20, fontWeight: 700, color: '#1d2129', fontSize: 16 } }, '供应商管理')
|
||||
),
|
||||
React.createElement('div', { style: { padding: '0', display: 'flex', flexDirection: 'column', flex: 1, background: 'transparent' } },
|
||||
// 搜索表单区域
|
||||
React.createElement('div', { style: { padding: '0 20px 0 20px', marginBottom: 0, background: '#fff' } },
|
||||
React.createElement(Row, { style: { flexWrap: 'nowrap' } },
|
||||
React.createElement(Col, { flex: 1, style: { minWidth: 0, paddingRight: 40 } },
|
||||
React.createElement(Form, Object.assign({ layout: 'horizontal' }, formItemLayout),
|
||||
React.createElement(Row, { gutter: 24, style: { rowGap: 0 } },
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '供应商名称', style: { marginBottom: 16, height: 32 } },
|
||||
React.createElement(Input, { placeholder: '请输入供应商名称' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '类型', style: { marginBottom: 16, height: 32 } },
|
||||
React.createElement(Select, {
|
||||
mode: 'multiple',
|
||||
allowClear: true,
|
||||
maxTagCount: 'responsive',
|
||||
placeholder: '请选择类型',
|
||||
options: [
|
||||
{ label: '整车企业', value: '整车企业' },
|
||||
{ label: '车辆外租企业', value: '车辆外租企业' },
|
||||
{ label: '加氢站', value: '加氢站' },
|
||||
{ label: '充电站', value: '充电站' },
|
||||
{ label: '维修站', value: '维修站' },
|
||||
{ label: '备件供应商', value: '备件供应商' },
|
||||
{ label: '保险公司', value: '保险公司' },
|
||||
{ label: '救援车队', value: '救援车队' },
|
||||
{ label: '其他', value: '其他' }
|
||||
]
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '所属城市', style: { marginBottom: 16, height: 32 } },
|
||||
React.createElement(Input, { placeholder: '请输入所属城市' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '业务部门', style: { marginBottom: 16, height: 32 } },
|
||||
React.createElement(Input, { placeholder: '请输入部门名称' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '业务人员', style: { marginBottom: 16, height: 32 } },
|
||||
React.createElement(Input, { placeholder: '请输入人员姓名' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '状态', style: { marginBottom: 16, height: 32 } },
|
||||
React.createElement(Select, {
|
||||
placeholder: '全部',
|
||||
options: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '正常', value: 'normal' },
|
||||
{ label: '停用', value: 'disabled' }
|
||||
]
|
||||
})
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Divider, { style: { height: 72, borderLeftColor: 'rgb(229, 230, 235)', borderLeftStyle: 'dashed', marginLeft: 20, marginRight: 20 }, type: 'vertical' }),
|
||||
React.createElement(Col, { flex: '86px', style: { textAlign: 'right' } },
|
||||
React.createElement(Space, { direction: 'vertical', size: 12 },
|
||||
React.createElement(Button, { type: 'primary', icon: React.createElement(SearchIcon, null), style: { display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'center' } }, '查询'),
|
||||
React.createElement(Button, { icon: React.createElement(ResetIcon, null), style: { display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'center' } }, '重置')
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
// 底部表格区
|
||||
React.createElement('div', { style: { padding: '20px 20px 0 20px', display: 'flex', flexDirection: 'column', flex: 1, background: '#fff' } },
|
||||
// 工具栏区域
|
||||
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() { window.location.hash = '新建供应商'; } }, '新建'),
|
||||
React.createElement(Button, null, '批量导入')
|
||||
)
|
||||
),
|
||||
React.createElement(Col, null,
|
||||
React.createElement(Space, { size: 16 },
|
||||
React.createElement(Button, { style: { padding: '4px 10px', height: 32, display: 'flex', alignItems: 'center', gap: 6, color: '#4e5969' }, title: '下载' }, React.createElement(DownloadIcon, null), React.createElement('span', null, '下载'))
|
||||
)
|
||||
)
|
||||
),
|
||||
// 表格区域
|
||||
React.createElement('div', { style: { flex: 1, minHeight: 0 } },
|
||||
React.createElement(Table, {
|
||||
rowSelection: { type: 'checkbox', columnWidth: 48 },
|
||||
columns: columns,
|
||||
dataSource: data,
|
||||
pagination: { pageSize: 10, showTotal: function(total) { return '共 ' + total + ' 条'; } },
|
||||
scroll: { x: 1000 }
|
||||
})
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
if (typeof module !== 'undefined' && module.exports) module.exports = Component;
|
||||
766
ONEOS-web/CRM/客户列表.jsx
Normal file
766
ONEOS-web/CRM/客户列表.jsx
Normal file
@@ -0,0 +1,766 @@
|
||||
// 【重要】必须使用 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;
|
||||
262
ONEOS-web/CRM/客户管理-新增.jsx
Normal file
262
ONEOS-web/CRM/客户管理-新增.jsx
Normal file
@@ -0,0 +1,262 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// ONEOS-web - CRM 客户管理-新增（高保真还原分组表单样式）
|
||||
|
||||
const Component = function () {
|
||||
var antd = window.antd;
|
||||
var Form = antd.Form;
|
||||
var Input = antd.Input;
|
||||
var Select = antd.Select;
|
||||
var Button = antd.Button;
|
||||
var Row = antd.Row;
|
||||
var Col = antd.Col;
|
||||
var Card = antd.Card;
|
||||
var Layout = antd.Layout;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Cascader = antd.Cascader;
|
||||
|
||||
var Content = Layout.Content;
|
||||
|
||||
var _form = Form.useForm();
|
||||
var form = _form[0];
|
||||
|
||||
/** 区域 — 省-市级联（示例数据） */
|
||||
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: '苏州市' }
|
||||
] },
|
||||
{ value: 'gd', label: '广东省', children: [
|
||||
{ value: 'gd-gz', label: '广州市' },
|
||||
{ value: 'gd-sz', label: '深圳市' }
|
||||
] }
|
||||
];
|
||||
|
||||
/** 示例业务部门和负责人数据 */
|
||||
var deptManagerMap = {
|
||||
'销售一部': ['张伟', '王芳', '周杰', '陈静', '许晴'],
|
||||
'销售二部': ['刘洋', '孙丽', '曹阳'],
|
||||
'市场开拓部': ['吴磊', '赵敏', '韩雪'],
|
||||
'大客户部': ['李强', '郑华', '冯涛']
|
||||
};
|
||||
var departmentOptions = Object.keys(deptManagerMap).map(function(dept) {
|
||||
return { label: dept, value: dept };
|
||||
});
|
||||
|
||||
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' } },
|
||||
React.createElement('style', null, `
|
||||
.arco-grouped-form-page { display: flex; flex-direction: column; min-height: 100vh; }
|
||||
.arco-grouped-form-page-content { flex: 1; padding: 16px 20px 24px; }
|
||||
.arco-grouped-form-page .ant-card { margin-bottom: 16px; border-radius: 4px; border: none; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
|
||||
.arco-grouped-form-page .ant-card-head { border-bottom: none; padding: 20px 24px 0; min-height: auto; }
|
||||
.arco-grouped-form-page .ant-card-head-title { font-size: 16px; font-weight: 500; color: #1d2129; padding: 0; }
|
||||
.arco-grouped-form-page .ant-card-body { padding: 24px; }
|
||||
|
||||
/* 表单样式复刻 */
|
||||
.arco-grouped-form-page .ant-form-vertical .ant-form-item-label { padding-bottom: 8px; }
|
||||
.arco-grouped-form-page .ant-form-item-label > label { color: #4e5969; font-size: 14px; font-weight: 400; }
|
||||
.arco-grouped-form-page .ant-form-item-label > label::after { display: none !important; }
|
||||
.arco-grouped-form-page .ant-form-item { margin-bottom: 24px; }
|
||||
|
||||
/* 输入框和下拉框样式复刻 */
|
||||
.arco-grouped-form-page .ant-input,
|
||||
.arco-grouped-form-page .ant-select-selector { border-radius: 2px; border-color: #e5e6eb; height: 32px; transition: all 0.1s cubic-bezier(0, 0, 1, 1); box-shadow: none !important; }
|
||||
.arco-grouped-form-page .ant-input:hover,
|
||||
.arco-grouped-form-page .ant-select:not(.ant-select-disabled):hover .ant-select-selector { border-color: #165dff; }
|
||||
.arco-grouped-form-page .ant-input:focus,
|
||||
.arco-grouped-form-page .ant-input-focused,
|
||||
.arco-grouped-form-page .ant-select-focused .ant-select-selector { border-color: #165dff; box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2) !important; }
|
||||
.arco-grouped-form-page .ant-select-selection-item,
|
||||
.arco-grouped-form-page .ant-select-selection-placeholder { line-height: 30px !important; }
|
||||
|
||||
/* 后缀输入框样式复刻 */
|
||||
.arco-grouped-form-page .ant-input-group-addon { background-color: #f2f3f5; border: 1px solid #e5e6eb; border-left: 0; border-radius: 0 2px 2px 0; color: #4e5969; padding: 0 12px; }
|
||||
.arco-grouped-form-page .ant-input-wrapper { display: flex; align-items: stretch; }
|
||||
.arco-grouped-form-page .ant-input-group > .ant-input:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
|
||||
.arco-grouped-form-page .ant-input-group > .ant-input:first-child:focus,
|
||||
.arco-grouped-form-page .ant-input-group > .ant-input:first-child:hover { border-right: 1px solid #165dff; z-index: 1; }
|
||||
|
||||
/* 底部操作栏 */
|
||||
.arco-grouped-form-footer { background: #fff; padding: 16px 24px; border-top: 1px solid #e5e6eb; display: flex; justify-content: flex-end; align-items: center; gap: 12px; position: sticky; bottom: 0; z-index: 100; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }
|
||||
.arco-grouped-form-footer .ant-btn { border-radius: 5px; height: 32px; padding: 4px 16px; font-size: 14px; }
|
||||
.arco-grouped-form-footer .ant-btn-primary { background-color: #165dff; border-color: #165dff; }
|
||||
.arco-grouped-form-footer .ant-btn-primary:hover { background-color: #4080ff; border-color: #4080ff; }
|
||||
|
||||
.arco-grouped-form-page .ant-breadcrumb { color: #86909c; font-size: 14px; margin-bottom: 16px; }
|
||||
.arco-grouped-form-page .ant-breadcrumb a { color: #4e5969; }
|
||||
.arco-grouped-form-page .ant-breadcrumb a:hover { color: #165dff; background-color: transparent; }
|
||||
|
||||
/* 级联选择器下拉菜单宽度一致 (强行控制宽度和两列平分) */
|
||||
.customer-full-width-cascader-popup { min-width: 100% !important; }
|
||||
.customer-full-width-cascader-popup .ant-cascader-menu { width: 50%; min-width: 0; }
|
||||
`),
|
||||
React.createElement('div', { className: 'arco-grouped-form-page' },
|
||||
React.createElement('div', { className: 'arco-grouped-form-page-content' },
|
||||
// 面包屑导航
|
||||
React.createElement(Breadcrumb, {
|
||||
separator: React.createElement('span', { style: { color: '#c9cdd4' } }, '/'),
|
||||
items: [
|
||||
{ title: '首页' },
|
||||
{ title: '业务管理' },
|
||||
{ title: '客户管理' },
|
||||
{ title: React.createElement('span', { style: { color: '#1d2129' } }, '新增') }
|
||||
]
|
||||
}),
|
||||
|
||||
// 表单主体
|
||||
React.createElement(Form, { form: form, layout: 'vertical' },
|
||||
// 客户信息组
|
||||
React.createElement(Card, { title: '客户信息', bordered: false },
|
||||
React.createElement(Row, { gutter: 24 },
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '客户类型', name: 'customerType', rules: [{ required: true, message: '请选择客户类型' }] },
|
||||
React.createElement(Select, { placeholder: '请选择客户类型', options: [{ label: '企业', value: '企业' }, { label: '个人', value: '个人' }, { label: '事业单位', value: '事业单位' }] })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '客户分级', name: 'customerLevel' },
|
||||
React.createElement(Select, { placeholder: '请选择客户分级', options: [{ label: 'A', value: 'A' }, { label: 'B', value: 'B' }, { label: 'C', value: 'C' }] })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '客户全称', name: 'customerName', rules: [{ required: true, message: '请输入客户全称' }] },
|
||||
React.createElement(Input, {
|
||||
placeholder: '请输入客户全称',
|
||||
onChange: function(e) {
|
||||
form.setFieldsValue({ invoiceTitle: e.target.value });
|
||||
}
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '客户简称', name: 'customerShortName' },
|
||||
React.createElement(Input, { placeholder: '请输入客户简称' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '所属城市', name: 'city', rules: [{ required: true, message: '请选择所属城市' }] },
|
||||
React.createElement(Cascader, {
|
||||
options: regionOptions,
|
||||
placeholder: '请选择客户所属城市',
|
||||
style: { width: '100%' },
|
||||
getPopupContainer: function (triggerNode) { return triggerNode.parentNode; },
|
||||
popupClassName: 'customer-full-width-cascader-popup'
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '通讯地址', name: 'address' },
|
||||
React.createElement(Input, { placeholder: '请输入通讯地址' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '业务负责部门', name: 'department', rules: [{ required: true, message: '请选择业务负责部门' }] },
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择业务负责部门',
|
||||
options: departmentOptions,
|
||||
onChange: function() { form.setFieldsValue({ manager: undefined }); }
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, {
|
||||
noStyle: true,
|
||||
shouldUpdate: function(prev, cur) { return prev.department !== cur.department; }
|
||||
}, function() {
|
||||
var curDept = form.getFieldValue('department');
|
||||
var managerOptions = [];
|
||||
if (curDept && deptManagerMap[curDept]) {
|
||||
managerOptions = deptManagerMap[curDept].map(function(m) { return { label: m, value: m }; });
|
||||
}
|
||||
return React.createElement(Form.Item, { label: '业务负责人员', name: 'manager', rules: [{ required: true, message: '请选择业务负责人员' }] },
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择业务负责人员',
|
||||
options: managerOptions,
|
||||
disabled: !curDept
|
||||
})
|
||||
);
|
||||
})
|
||||
),
|
||||
React.createElement(Col, { span: 24 },
|
||||
React.createElement(Form.Item, { label: '备注', name: 'remark' },
|
||||
React.createElement(Input.TextArea, { placeholder: '请输入备注', style: { height: 52, minHeight: 52, resize: 'none' } })
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
// 联系人信息组
|
||||
React.createElement(Card, { title: '联系人信息', bordered: false },
|
||||
React.createElement(Row, { gutter: 24 },
|
||||
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: 'contactPosition' },
|
||||
React.createElement(Input, { placeholder: '请输入职位' })
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
// 付款及开票信息组
|
||||
React.createElement(Card, { title: '付款及开票信息', bordered: false },
|
||||
React.createElement(Row, { gutter: 24 },
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '发票抬头', name: 'invoiceTitle', rules: [{ required: true, message: '请先输入客户全称' }] },
|
||||
React.createElement(Input, { placeholder: '自动带入客户全称', disabled: true, style: { backgroundColor: '#f2f3f5', color: '#86909c' } })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '纳税人识别号', name: 'taxId', rules: [{ required: true, message: '请输入纳税人识别号' }] },
|
||||
React.createElement(Input, { placeholder: '请输入纳税人识别号' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '注册地址', name: 'regAddress' },
|
||||
React.createElement(Input, { placeholder: '请输入注册地址' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '注册电话', name: 'regPhone' },
|
||||
React.createElement(Input, { placeholder: '请输入注册电话' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '开户银行', name: 'bankName', rules: [{ required: true, message: '请输入开户银行' }] },
|
||||
React.createElement(Input, { placeholder: '请输入开户银行' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '账号', name: 'bankAccount' },
|
||||
React.createElement(Input, { placeholder: '请输入账号' })
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
// 底部操作栏
|
||||
React.createElement('div', { className: 'arco-grouped-form-footer' },
|
||||
React.createElement(Button, { onClick: function () { form.resetFields(); } }, '重置'),
|
||||
React.createElement(Button, { type: 'primary', onClick: function () { form.submit(); } }, '提交')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
if (typeof module !== 'undefined' && module.exports) module.exports = Component;
|
||||
348
ONEOS-web/CRM/新建供应商.jsx
Normal file
348
ONEOS-web/CRM/新建供应商.jsx
Normal file
@@ -0,0 +1,348 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// ONEOS-web 示例项目 - CRM 新建供应商 (完美复刻 Arco Design Pro 分组表单)
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
|
||||
var antd = window.antd;
|
||||
var Button = antd.Button;
|
||||
var Space = antd.Space;
|
||||
var Input = antd.Input;
|
||||
var Select = antd.Select;
|
||||
var Cascader = antd.Cascader;
|
||||
var Form = antd.Form;
|
||||
var Row = antd.Row;
|
||||
var Col = antd.Col;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Menu = antd.Menu;
|
||||
var Layout = antd.Layout;
|
||||
var message = antd.message;
|
||||
var Typography = antd.Typography;
|
||||
var Avatar = antd.Avatar;
|
||||
var Badge = antd.Badge;
|
||||
var Card = antd.Card;
|
||||
|
||||
var Header = Layout.Header;
|
||||
var Content = Layout.Content;
|
||||
var Sider = Layout.Sider;
|
||||
var Title = Typography.Title;
|
||||
|
||||
var _currentMenu = useState('crm-supplier');
|
||||
var currentMenu = _currentMenu[0];
|
||||
var setCurrentMenu = _currentMenu[1];
|
||||
|
||||
var handleMenuClick = function (e) {
|
||||
setCurrentMenu(e.key);
|
||||
if (e.key === 'contract-list') {
|
||||
message.info('跳转至 合同列表');
|
||||
window.location.hash = '合同列表';
|
||||
} else if (e.key === 'erp-order') {
|
||||
message.info('跳转至 ERP 订单管理');
|
||||
window.location.hash = '订单管理';
|
||||
} else if (e.key === 'asset-overview') {
|
||||
message.info('跳转至 资产概览');
|
||||
window.location.hash = '资产概览';
|
||||
} else if (e.key === 'crm-list') {
|
||||
message.info('跳转至 客户列表');
|
||||
window.location.hash = '客户列表';
|
||||
} else if (e.key === 'crm-supplier') {
|
||||
message.info('跳转至 供应商管理');
|
||||
window.location.hash = '供应商管理';
|
||||
}
|
||||
};
|
||||
|
||||
// 自定义 SVG 图标（高保真还原 Arco 风格）
|
||||
var SettingIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 16, height: 16, fill: 'none', stroke: 'currentColor', strokeWidth: 4 }, React.createElement('path', { d: 'M18.797 6.732A1 1 0 0 1 19.76 6h8.48a1 1 0 0 1 .964.732l1.285 4.628a1 1 0 0 0 1.213.7l4.651-1.2a1 1 0 0 1 1.116.468l4.24 7.344a1 1 0 0 1-.153 1.2L38.193 23.3a1 1 0 0 0 0 1.402l3.364 3.427a1 1 0 0 1 .153 1.2l-4.24 7.344a1 1 0 0 1-1.116.468l-4.65-1.2a1 1 0 0 0-1.214.7l-1.285 4.628a1 1 0 0 1-.964.732h-8.48a1 1 0 0 1-.963-.732L17.51 36.64a1 1 0 0 0-1.213-.7l-4.65 1.2a1 1 0 0 1-1.116-.468l-4.24-7.344a1 1 0 0 1 .153-1.2L9.809 24.7a1 1 0 0 0 0-1.402l-3.364-3.427a1 1 0 0 1-.153-1.2l4.24-7.344a1 1 0 0 1 1.116-.468l4.65 1.2a1 1 0 0 0 1.213-.7l1.286-4.628Z' }), React.createElement('path', { d: 'M30 24a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z' })); };
|
||||
var NoticeIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 18, height: 18, fill: 'none', stroke: 'currentColor', strokeWidth: 4 }, React.createElement('path', { d: 'M39 34h3v4H6v-4h3V20.218a15 15 0 0 1 30 0V34ZM24 44a6 6 0 0 1-6-6h12a6 6 0 0 1-6 6Z' })); };
|
||||
var FormIcon = 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: 'M18.797 6.732A1 1 0 0 1 19.76 6h8.48a1 1 0 0 1 .964.732l1.285 4.628a1 1 0 0 0 1.213.7l4.651-1.2a1 1 0 0 1 1.116.468l4.24 7.344a1 1 0 0 1-.153 1.2L38.193 23.3a1 1 0 0 0 0 1.402l3.364 3.427a1 1 0 0 1 .153 1.2l-4.24 7.344a1 1 0 0 1-1.116.468l-4.65-1.2a1 1 0 0 0-1.214.7l-1.285 4.628a1 1 0 0 1-.964.732h-8.48a1 1 0 0 1-.963-.732L17.51 36.64a1 1 0 0 0-1.213-.7l-4.65 1.2a1 1 0 0 1-1.116-.468l-4.24-7.344a1 1 0 0 1 .153-1.2L9.809 24.7a1 1 0 0 0 0-1.402l-3.364-3.427a1 1 0 0 1-.153-1.2l4.24-7.344a1 1 0 0 1 1.116-.468l4.65 1.2a1 1 0 0 0 1.213-.7l1.286-4.628Z' }), React.createElement('path', { d: 'M30 24a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z' })); };
|
||||
|
||||
var menuItems = [
|
||||
{
|
||||
key: 'contract',
|
||||
label: '合同管理',
|
||||
icon: React.createElement('span', { className: 'anticon' }, '📄'),
|
||||
children: [
|
||||
{ key: 'contract-list', label: '合同列表' }
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'crm',
|
||||
label: 'CRM 管理',
|
||||
icon: React.createElement('span', { className: 'anticon' }, '👥'),
|
||||
children: [
|
||||
{ key: 'crm-list', label: '客户列表' },
|
||||
{ key: 'crm-supplier', label: '供应商管理' },
|
||||
{ key: 'crm-analysis', label: 'CRM 分析' }
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'erp',
|
||||
label: 'ERP 订单管理',
|
||||
icon: React.createElement('span', { className: 'anticon' }, '📦'),
|
||||
children: [
|
||||
{ key: 'erp-order', label: '订单管理' }
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'asset',
|
||||
label: '资产管理',
|
||||
icon: React.createElement('span', { className: 'anticon' }, '🚗'),
|
||||
children: [
|
||||
{ key: 'asset-overview', label: '资产概览' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// 供应商类型下拉选项
|
||||
var supplierTypeOptions = [
|
||||
{ label: '整车企业', value: '整车企业' },
|
||||
{ label: '车辆外租企业', value: '车辆外租企业' },
|
||||
{ label: '加氢站', value: '加氢站' },
|
||||
{ label: '充电站', value: '充电站' },
|
||||
{ label: '维修站', value: '维修站' },
|
||||
{ label: '备件供应商', value: '备件供应商' },
|
||||
{ label: '保险公司', value: '保险公司' },
|
||||
{ label: '救援车队', value: '救援车队' },
|
||||
{ label: '其他', value: '其他' }
|
||||
];
|
||||
|
||||
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; box-shadow: none; font-size: 14px; }
|
||||
.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-default { background-color: #f2f3f5; border-color: transparent; color: #4e5969; }
|
||||
.arco-theme-overrides .ant-btn-default:hover { background-color: #e5e6eb; border-color: transparent; color: #4e5969; }
|
||||
.arco-theme-overrides .ant-menu-light .ant-menu-item-selected { background-color: #f2f9fe; color: #165dff; }
|
||||
.arco-theme-overrides .ant-menu-light .ant-menu-item-selected::after { border-right-color: #165dff; }
|
||||
|
||||
/* 输入组件默认、Hover、Focus样式复刻 */
|
||||
.arco-theme-overrides .ant-input, .arco-theme-overrides .ant-select-selector, .arco-theme-overrides .ant-cascader { border-radius: 2px; border: 1px solid #e5e6eb; background-color: #f2f3f5; 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-cascader:hover { background-color: #e5e6eb; border-color: transparent; }
|
||||
.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-cascader-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-form-vertical .ant-form-item-label { padding: 0 0 8px; line-height: 1.5715; }
|
||||
.arco-theme-overrides .ant-form-vertical .ant-form-item-label > label { color: #1d2129; font-weight: 400; height: auto; }
|
||||
.arco-theme-overrides .ant-form-item-label > label::after { display: none !important; content: "" !important; margin: 0 !important; }
|
||||
.arco-theme-overrides .ant-form-item { margin-bottom: 24px; }
|
||||
|
||||
/* 卡片样式复刻 */
|
||||
.arco-theme-overrides .ant-card { border: none; border-radius: 4px; margin-bottom: 16px; background: transparent; }
|
||||
.arco-theme-overrides .ant-card-body { padding: 20px 20px 0 20px; background: #fff; }
|
||||
|
||||
/* 标题样式复刻 */
|
||||
.arco-theme-overrides .arco-section-title { font-size: 16px; font-weight: 500; color: #1d2129; margin-bottom: 20px; }
|
||||
|
||||
/* 输入框高度统一 */
|
||||
.arco-theme-overrides .ant-input, .arco-theme-overrides .ant-select-selector, .arco-theme-overrides .ant-cascader .ant-select-selector { height: 32px !important; min-height: 32px !important; display: flex; align-items: center; padding: 0 12px; }
|
||||
.arco-theme-overrides .ant-input { padding: 4px 12px; }
|
||||
.arco-theme-overrides .ant-select-selection-item { line-height: 30px !important; }
|
||||
|
||||
.arco-theme-overrides .ant-breadcrumb { color: #86909c; font-size: 14px; }
|
||||
.arco-theme-overrides .ant-breadcrumb a { color: #4e5969; }
|
||||
.arco-theme-overrides .ant-breadcrumb a:hover { color: #165dff; background-color: transparent; }
|
||||
`),
|
||||
// 顶部 Header
|
||||
React.createElement(Header, {
|
||||
style: {
|
||||
background: '#fff',
|
||||
padding: '0 20px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid #e5e6eb',
|
||||
height: 60,
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 100
|
||||
}
|
||||
},
|
||||
// 左侧 Logo
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } },
|
||||
React.createElement('div', { style: { width: 32, height: 32, background: '#165dff', borderRadius: 4, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff', fontWeight: 'bold' } }, 'A'),
|
||||
React.createElement('div', { style: { fontSize: '20px', fontWeight: '600', color: '#1d2129', letterSpacing: '0.5px' } }, 'Arco Pro')
|
||||
),
|
||||
// 右侧工具栏
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 20 } },
|
||||
React.createElement(Input.Search, { placeholder: '搜索功能', style: { width: 220, borderRadius: 16 } }),
|
||||
React.createElement(Badge, { dot: true, offset: [-2, 4] },
|
||||
React.createElement('span', { style: { color: '#4e5969', cursor: 'pointer', display: 'flex' }, title: '消息通知' }, React.createElement(NoticeIcon, null))
|
||||
),
|
||||
React.createElement('span', { style: { color: '#4e5969', cursor: 'pointer', display: 'flex' }, title: '设置' }, React.createElement(SettingIcon, null)),
|
||||
React.createElement(Avatar, { size: 32, src: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp', style: { cursor: 'pointer' } })
|
||||
)
|
||||
),
|
||||
// 下方主体内容
|
||||
React.createElement(Layout, { style: { paddingTop: 60 } },
|
||||
// 左侧菜单 Sider
|
||||
React.createElement(Sider, {
|
||||
width: 220,
|
||||
style: {
|
||||
background: '#fff',
|
||||
borderRight: '1px solid #e5e6eb',
|
||||
position: 'fixed',
|
||||
top: 60,
|
||||
left: 0,
|
||||
height: 'calc(100vh - 60px)',
|
||||
overflowY: 'auto',
|
||||
zIndex: 99
|
||||
}
|
||||
},
|
||||
React.createElement(Menu, {
|
||||
mode: 'inline',
|
||||
selectedKeys: [currentMenu],
|
||||
defaultOpenKeys: ['crm'],
|
||||
items: menuItems,
|
||||
onClick: handleMenuClick,
|
||||
style: { borderRight: 'none', padding: '8px', background: '#fff' }
|
||||
})
|
||||
),
|
||||
// 右侧内容 Content
|
||||
React.createElement(Content, { style: { marginLeft: 220, padding: '16px 20px 60px 20px', minHeight: 'calc(100vh - 60px)', display: 'flex', flexDirection: 'column' } },
|
||||
React.createElement('div', { style: { padding: '16px 20px 0 20px', marginBottom: 0, background: '#fff' } },
|
||||
React.createElement(Breadcrumb, {
|
||||
separator: React.createElement('span', { style: { color: '#c9cdd4' } }, '/'),
|
||||
items: [
|
||||
{ title: React.createElement(FormIcon, { style: { display: 'inline-flex', alignItems: 'center', fontSize: 14, transform: 'translate(-2px, 1px)' } }) },
|
||||
{ title: '表单页' },
|
||||
{ title: React.createElement('span', { style: { color: '#1d2129' } }, '分组表单') }
|
||||
]
|
||||
}),
|
||||
React.createElement(Title, { level: 4, style: { marginTop: 16, marginBottom: 20, fontWeight: 700, color: '#1d2129', fontSize: 16 } }, '新建供应商')
|
||||
),
|
||||
|
||||
React.createElement('div', { style: { padding: '0', display: 'flex', flexDirection: 'column', flex: 1 } },
|
||||
React.createElement(Form, { layout: 'vertical' },
|
||||
|
||||
// 供应商信息分组
|
||||
React.createElement(Card, { bordered: false, bodyStyle: { padding: '20px 20px 0 20px' } },
|
||||
React.createElement('div', { className: 'arco-section-title' }, '供应商信息'),
|
||||
React.createElement(Row, { gutter: 24 },
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '供应商名称', required: true },
|
||||
React.createElement(Input, { placeholder: '请输入供应商名称' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '类型', required: true },
|
||||
React.createElement(Select, { placeholder: '请选择类型', options: supplierTypeOptions })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '所属城市' },
|
||||
React.createElement(Cascader, { placeholder: '请选择省-市', options: [{ value: 'zhejiang', label: '浙江', children: [{ value: 'hangzhou', label: '杭州' }, { value: 'ningbo', label: '宁波' }] }, { value: 'jiangsu', label: '江苏', children: [{ value: 'nanjing', label: '南京' }] }] })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '所在地址' },
|
||||
React.createElement(Input, { placeholder: '请输入所在地址' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '区域' },
|
||||
React.createElement(Input, { placeholder: '请输入区域' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '业务负责部门' },
|
||||
React.createElement(Input, { placeholder: '请输入业务负责部门' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '业务负责人员' },
|
||||
React.createElement(Input, { placeholder: '请输入业务负责人员' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 24 },
|
||||
React.createElement(Form.Item, { label: '备注' },
|
||||
React.createElement(Input.TextArea, { placeholder: '请输入备注', autoSize: { minRows: 3, maxRows: 5 }, style: { height: 'auto', minHeight: 'auto' } })
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
// 联系人信息分组
|
||||
React.createElement(Card, { bordered: false, bodyStyle: { padding: '20px 20px 0 20px' } },
|
||||
React.createElement('div', { className: 'arco-section-title' }, '联系人信息'),
|
||||
React.createElement(Row, { gutter: 24 },
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '姓名' },
|
||||
React.createElement(Input, { placeholder: '请输入姓名' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '手机号' },
|
||||
React.createElement(Input, { placeholder: '请输入手机号' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '职位' },
|
||||
React.createElement(Input, { placeholder: '请输入职位' })
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
// 付款及开票信息分组
|
||||
React.createElement(Card, { bordered: false, bodyStyle: { padding: '20px 20px 0 20px', marginBottom: 16 } },
|
||||
React.createElement('div', { className: 'arco-section-title' }, '付款及开票信息'),
|
||||
React.createElement(Row, { gutter: 24 },
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '纳税人识别号' },
|
||||
React.createElement(Input, { placeholder: '请输入纳税人识别号' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '注册地址' },
|
||||
React.createElement(Input, { placeholder: '请输入注册地址' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '注册电话' },
|
||||
React.createElement(Input, { placeholder: '请输入注册电话' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '开户行' },
|
||||
React.createElement(Input, { placeholder: '请输入开户行' })
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 8 },
|
||||
React.createElement(Form.Item, { label: '账号' },
|
||||
React.createElement(Input, { placeholder: '请输入账号' })
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
// 底部固定操作栏
|
||||
React.createElement('div', {
|
||||
style: {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
width: 'calc(100% - 220px)',
|
||||
padding: '16px 20px',
|
||||
background: '#fff',
|
||||
borderTop: '1px solid #e5e6eb',
|
||||
textAlign: 'right',
|
||||
zIndex: 100
|
||||
}
|
||||
},
|
||||
React.createElement(Space, { size: 16 },
|
||||
React.createElement(Button, { size: 'large', onClick: function() { message.info('重置成功'); } }, '重置'),
|
||||
React.createElement(Button, { type: 'primary', size: 'large', onClick: function() { message.success('提交成功'); } }, '提交')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
if (typeof module !== 'undefined' && module.exports) module.exports = Component;
|
||||
1034
ONEOS-web/CRM/维修管理.jsx
Normal file
1034
ONEOS-web/CRM/维修管理.jsx
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user