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>
348 lines
17 KiB
JavaScript
348 lines
17 KiB
JavaScript
// 【重要】必须使用 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; |