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