a27e3b8e43
Optimized the root .gitignore to exclude virtual environments, node modules, and temp folders to ensure clean and lightweight version tracking. Co-authored-by: Cursor <cursoragent@cursor.com>
263 lines
13 KiB
JavaScript
263 lines
13 KiB
JavaScript
// 【重要】必须使用 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;
|