482 lines
24 KiB
JavaScript
482 lines
24 KiB
JavaScript
// 【重要】必须使用 const Component 作为组件变量名
|
||
// 后装设备 - 运维管理-车辆业务
|
||
var ARCO_TOKEN = {
|
||
primary: '#165DFF',
|
||
primaryHover: '#4080FF',
|
||
danger: '#F53F3F',
|
||
success: '#00B42A',
|
||
neutral1: '#FFFFFF',
|
||
neutral2: '#F7F8FA',
|
||
neutral3: '#F2F3F5',
|
||
neutral4: '#E5E6EB',
|
||
neutral5: '#C9CDD4',
|
||
neutral6: '#86909C',
|
||
neutral7: '#4E5969',
|
||
neutral8: '#1D2129',
|
||
border: '#E5E6EB',
|
||
fill: '#F2F3F5',
|
||
fillSecondary: '#F7F8FA',
|
||
shadowLight: '0 1px 2px rgba(0,0,0,0.05)',
|
||
radiusMedium: '4px',
|
||
radiusLarge: '8px',
|
||
spacing8: '8px',
|
||
spacing12: '12px',
|
||
spacing16: '16px',
|
||
spacing24: '24px',
|
||
fontSize14: '14px',
|
||
fontSize16: '16px',
|
||
fontFamily: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif',
|
||
link: '#165DFF'
|
||
};
|
||
|
||
var DEVICE_TYPES = ['GPS', '尾板', '车身广告', 'G7安全套件', 'G7普通设备', 'G7温控设备', '备胎'];
|
||
|
||
var MOCK_VEHICLE_OPTIONS = ['粤A12345', '粤A67890', '粤B11111', '粤B22222', '粤C33333', '京A88888'];
|
||
|
||
var MOCK_LIST = [
|
||
{ id: '1', deviceType: 'GPS', plateNo: '粤A12345', supplier: '深圳智联', lastOpType: '安装', createTime: '2025-02-20 10:30', removeTime: '', createOperator: '张明', removeOperator: '' },
|
||
{ id: '2', deviceType: '尾板', plateNo: '粤A67890', supplier: '广州机械', lastOpType: '拆除', createTime: '2025-02-01 09:00', removeTime: '2025-02-18 14:20', createOperator: '李强', removeOperator: '王芳' },
|
||
{ id: '3', deviceType: '车身广告', plateNo: '粤B11111', supplier: '东莞广告', lastOpType: '安装', createTime: '2025-02-15 09:00', removeTime: '', createOperator: '李强', removeOperator: '' },
|
||
{ id: '4', deviceType: 'G7安全套件', plateNo: '粤A12345', supplier: 'G7科技', lastOpType: '安装', createTime: '2025-02-10 16:45', removeTime: '', createOperator: '张明', removeOperator: '' },
|
||
{ id: '5', deviceType: '备胎', plateNo: '粤C33333', supplier: '华南轮胎', lastOpType: '拆除', createTime: '2025-01-20 08:00', removeTime: '2025-02-08 11:20', createOperator: '赵六', removeOperator: '赵六' }
|
||
];
|
||
|
||
const Component = function () {
|
||
var antd = window.antd;
|
||
var Select = antd.Select;
|
||
var Button = antd.Button;
|
||
var DatePicker = antd.DatePicker;
|
||
var Table = antd.Table;
|
||
var Modal = antd.Modal;
|
||
var Input = antd.Input;
|
||
var message = antd.message;
|
||
var Option = Select.Option;
|
||
var RangePicker = DatePicker.RangePicker;
|
||
var Tabs = antd.Tabs;
|
||
|
||
var _useStateTab = React.useState('installed');
|
||
var activeTab = _useStateTab[0];
|
||
var setActiveTab = _useStateTab[1];
|
||
|
||
var _useState = React.useState('');
|
||
var filterDeviceType = _useState[0];
|
||
var setFilterDeviceType = _useState[1];
|
||
|
||
var _useState2 = React.useState('');
|
||
var filterVehicle = _useState2[0];
|
||
var setFilterVehicle = _useState2[1];
|
||
|
||
var _useState3 = React.useState([]);
|
||
var filterDateRange = _useState3[0];
|
||
var setFilterDateRange = _useState3[1];
|
||
|
||
var _useState4 = React.useState({ deviceType: '', vehicle: '', dateStart: '', dateEnd: '' });
|
||
var appliedFilter = _useState4[0];
|
||
var setAppliedFilter = _useState4[1];
|
||
|
||
var _useState5 = React.useState(1);
|
||
var currentPage = _useState5[0];
|
||
var setCurrentPage = _useState5[1];
|
||
|
||
var _useState6 = React.useState(10);
|
||
var pageSize = _useState6[0];
|
||
var setPageSize = _useState6[1];
|
||
|
||
var _useState7 = React.useState(MOCK_LIST);
|
||
var dataList = _useState7[0];
|
||
var setDataList = _useState7[1];
|
||
|
||
var _useState8 = React.useState(null);
|
||
var viewRecord = _useState8[0];
|
||
var setViewRecord = _useState8[1];
|
||
|
||
var _useState9 = React.useState(null);
|
||
var editRecord = _useState9[0];
|
||
var setEditRecord = _useState9[1];
|
||
|
||
var _useState10 = React.useState(null);
|
||
var removeConfirmRecord = _useState10[0];
|
||
var setRemoveConfirmRecord = _useState10[1];
|
||
|
||
var _useState11 = React.useState(false);
|
||
var addModalVisible = _useState11[0];
|
||
var setAddModalVisible = _useState11[1];
|
||
|
||
var _useState12 = React.useState(false);
|
||
var showRequirementModal = _useState12[0];
|
||
var setShowRequirementModal = _useState12[1];
|
||
|
||
var applyBaseFilter = function (list) {
|
||
if (appliedFilter.deviceType) {
|
||
list = list.filter(function (r) { return r.deviceType === appliedFilter.deviceType; });
|
||
}
|
||
if (appliedFilter.vehicle) {
|
||
list = list.filter(function (r) { return r.plateNo && r.plateNo.indexOf(appliedFilter.vehicle) >= 0; });
|
||
}
|
||
return list;
|
||
};
|
||
|
||
var installedList = dataList.filter(function (r) { return !r.removeTime || r.removeTime === ''; });
|
||
var removedList = dataList.filter(function (r) { return r.removeTime && r.removeTime !== ''; });
|
||
|
||
var installedFiltered = applyBaseFilter(installedList).filter(function (r) {
|
||
if (appliedFilter.dateStart && r.createTime) { if (r.createTime.slice(0, 10) < appliedFilter.dateStart) return false; }
|
||
if (appliedFilter.dateEnd && r.createTime) { if (r.createTime.slice(0, 10) > appliedFilter.dateEnd) return false; }
|
||
return true;
|
||
});
|
||
var removedFiltered = applyBaseFilter(removedList).filter(function (r) {
|
||
if (appliedFilter.dateStart && r.removeTime) { if (r.removeTime.slice(0, 10) < appliedFilter.dateStart) return false; }
|
||
if (appliedFilter.dateEnd && r.removeTime) { if (r.removeTime.slice(0, 10) > appliedFilter.dateEnd) return false; }
|
||
return true;
|
||
});
|
||
|
||
var filteredList = activeTab === 'installed' ? installedFiltered : removedFiltered;
|
||
var totalItems = filteredList.length;
|
||
var totalPages = Math.ceil(totalItems / pageSize) || 1;
|
||
var validPage = currentPage > totalPages && totalPages > 0 ? 1 : (currentPage < 1 ? 1 : currentPage);
|
||
var startIndex = (validPage - 1) * pageSize;
|
||
var paginatedList = filteredList.slice(startIndex, startIndex + pageSize);
|
||
|
||
var handleQuery = function () {
|
||
var dateStart = '';
|
||
var dateEnd = '';
|
||
if (filterDateRange && filterDateRange.length >= 2 && filterDateRange[0] && filterDateRange[1]) {
|
||
if (filterDateRange[0].format) {
|
||
dateStart = filterDateRange[0].format('YYYY-MM-DD');
|
||
dateEnd = filterDateRange[1].format('YYYY-MM-DD');
|
||
} else if (window.dayjs) {
|
||
dateStart = window.dayjs(filterDateRange[0]).format('YYYY-MM-DD');
|
||
dateEnd = window.dayjs(filterDateRange[1]).format('YYYY-MM-DD');
|
||
}
|
||
}
|
||
setAppliedFilter({
|
||
deviceType: filterDeviceType,
|
||
vehicle: filterVehicle,
|
||
dateStart: dateStart,
|
||
dateEnd: dateEnd
|
||
});
|
||
setCurrentPage(1);
|
||
message.success('查询成功');
|
||
};
|
||
|
||
var handleReset = function () {
|
||
setFilterDeviceType('');
|
||
setFilterVehicle('');
|
||
setFilterDateRange([]);
|
||
setAppliedFilter({ deviceType: '', vehicle: '', dateStart: '', dateEnd: '' });
|
||
setCurrentPage(1);
|
||
};
|
||
|
||
var handleRemoveConfirm = function (row) {
|
||
var nowStr = '2025-02-24 15:00';
|
||
if (window.dayjs) { nowStr = window.dayjs().format('YYYY-MM-DD HH:mm'); }
|
||
setDataList(dataList.map(function (r) {
|
||
if (r.id === row.id) {
|
||
return { id: r.id, deviceType: r.deviceType, plateNo: r.plateNo, supplier: r.supplier, lastOpType: '拆除', createTime: r.createTime, removeTime: nowStr, createOperator: r.createOperator, removeOperator: '当前用户' };
|
||
}
|
||
return r;
|
||
}));
|
||
setRemoveConfirmRecord(null);
|
||
message.success('拆除成功');
|
||
};
|
||
|
||
var t = ARCO_TOKEN;
|
||
var styles = {
|
||
page: { padding: t.spacing24, fontFamily: t.fontFamily, backgroundColor: t.fill, minHeight: '100vh' },
|
||
breadcrumb: { marginBottom: t.spacing16, fontSize: t.fontSize14, color: t.neutral6, display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
|
||
breadcrumbLeft: { display: 'flex', alignItems: 'center' },
|
||
breadcrumbLink: { color: t.link, textDecoration: 'none', marginRight: '8px' },
|
||
breadcrumbCurrent: { color: t.neutral8 },
|
||
requirementLink: { color: t.link, textDecoration: 'none', fontSize: t.fontSize14, cursor: 'pointer' },
|
||
modalContent: { fontSize: t.fontSize14, color: t.neutral8, lineHeight: 1.6 },
|
||
requirementSection: { marginBottom: t.spacing16 },
|
||
requirementSectionTitle: { fontSize: t.fontSize16, fontWeight: 600, color: t.neutral8, marginBottom: 8 },
|
||
requirementItem: { marginBottom: 8, paddingLeft: 16 },
|
||
requirementSubItem: { marginBottom: 4, paddingLeft: 16, color: t.neutral7 },
|
||
card: { backgroundColor: t.neutral1, borderRadius: t.radiusLarge, boxShadow: t.shadowLight, marginBottom: t.spacing16, padding: t.spacing16 },
|
||
filterRow: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: t.spacing12 },
|
||
label: { marginRight: t.spacing8, fontSize: t.fontSize14, color: t.neutral8, whiteSpace: 'nowrap' },
|
||
filterRight: { marginLeft: 'auto', display: 'flex', gap: t.spacing8 },
|
||
toolbar: { display: 'flex', justifyContent: 'flex-end', gap: t.spacing12, marginBottom: t.spacing8 }
|
||
};
|
||
|
||
var deviceTypeOptions = DEVICE_TYPES.map(function (type) {
|
||
return React.createElement(Option, { key: type, value: type }, type);
|
||
});
|
||
|
||
var vehicleOptions = MOCK_VEHICLE_OPTIONS.map(function (v) {
|
||
return React.createElement(Option, { key: v, value: v }, v);
|
||
});
|
||
|
||
return React.createElement(
|
||
'div',
|
||
{ style: styles.page },
|
||
React.createElement(
|
||
'div',
|
||
{ style: styles.breadcrumb },
|
||
React.createElement('div', { style: styles.breadcrumbLeft },
|
||
React.createElement('a', { href: '#', style: styles.breadcrumbLink, onClick: function (e) { e.preventDefault(); } }, '运维管理'),
|
||
React.createElement('span', { style: { marginRight: '8px' } }, '/'),
|
||
React.createElement('a', { href: '#', style: styles.breadcrumbLink, onClick: function (e) { e.preventDefault(); } }, '车辆业务'),
|
||
React.createElement('span', { style: { marginRight: '8px' } }, '/'),
|
||
React.createElement('span', { style: styles.breadcrumbCurrent }, '后装设备')
|
||
),
|
||
React.createElement('a', { href: '#', style: styles.requirementLink, onClick: function (e) { e.preventDefault(); setShowRequirementModal(true); } }, '查看需求说明')
|
||
),
|
||
React.createElement(
|
||
'div',
|
||
{ style: styles.card },
|
||
React.createElement(
|
||
'div',
|
||
{ style: styles.filterRow },
|
||
React.createElement('span', { style: styles.label }, '设备类型：'),
|
||
React.createElement(Select, {
|
||
placeholder: '请选择设备类型',
|
||
style: { width: 160 },
|
||
value: filterDeviceType || undefined,
|
||
onChange: function (v) { setFilterDeviceType(v || ''); },
|
||
allowClear: true
|
||
}, deviceTypeOptions),
|
||
React.createElement('span', { style: styles.label }, '使用车辆：'),
|
||
React.createElement(Select, {
|
||
placeholder: '请选择或输入搜索',
|
||
style: { width: 180 },
|
||
value: filterVehicle || undefined,
|
||
onChange: function (v) { setFilterVehicle(v || ''); },
|
||
showSearch: true,
|
||
allowClear: true,
|
||
filterOption: function (input, opt) {
|
||
var c = opt && opt.children;
|
||
return c && String(c).toLowerCase().indexOf((input || '').toLowerCase()) >= 0;
|
||
}
|
||
}, vehicleOptions),
|
||
React.createElement('span', { style: styles.label }, '安装时间：'),
|
||
React.createElement(RangePicker, {
|
||
style: { width: 260 },
|
||
format: 'YYYY-MM-DD',
|
||
placeholder: ['开始日期', '结束日期'],
|
||
value: filterDateRange,
|
||
onChange: function (dates) { setFilterDateRange(dates || []); }
|
||
}),
|
||
React.createElement('div', { style: styles.filterRight },
|
||
React.createElement(Button, { type: 'primary', onClick: handleQuery }, '查询'),
|
||
React.createElement(Button, { onClick: handleReset }, '重置')
|
||
)
|
||
)
|
||
),
|
||
React.createElement(
|
||
'div',
|
||
{ style: styles.card },
|
||
React.createElement(
|
||
'div',
|
||
{ style: styles.toolbar },
|
||
activeTab === 'installed' && React.createElement(Button, { type: 'primary', onClick: function () { message.info('请查看运维管理-车辆业务-后装设备-新增后装设备'); } }, '新增'),
|
||
React.createElement(Button, { onClick: function () { message.info('根据筛选条件导出excel'); } }, '导出')
|
||
),
|
||
React.createElement(Tabs, {
|
||
activeKey: activeTab,
|
||
onChange: function (key) { setActiveTab(key); setCurrentPage(1); },
|
||
items: [
|
||
{
|
||
key: 'installed',
|
||
label: '已安装',
|
||
children: React.createElement(Table, {
|
||
rowKey: 'id',
|
||
size: 'small',
|
||
columns: [
|
||
{ title: '设备类型', dataIndex: 'deviceType', key: 'deviceType', width: 120 },
|
||
{ title: '车牌号', dataIndex: 'plateNo', key: 'plateNo', width: 120 },
|
||
{ title: '供应商', dataIndex: 'supplier', key: 'supplier', width: 120 },
|
||
{ title: '安装时间', dataIndex: 'createTime', key: 'createTime', width: 160 },
|
||
{ title: '安装人', dataIndex: 'createOperator', key: 'createOperator', width: 100 },
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
width: 160,
|
||
render: function (_, row) {
|
||
return React.createElement(React.Fragment, null,
|
||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { message.info('请查看运维管理-车辆业务-后装设备-查看'); } }, '查看'),
|
||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { message.info('请查看运维管理-车辆业务-后装设备-编辑'); } }, '编辑'),
|
||
React.createElement(Button, { type: 'link', size: 'small', danger: true, onClick: function () { setRemoveConfirmRecord(row); } }, '拆除')
|
||
);
|
||
}
|
||
}
|
||
],
|
||
dataSource: paginatedList,
|
||
pagination: {
|
||
current: validPage,
|
||
pageSize: pageSize,
|
||
total: totalItems,
|
||
showSizeChanger: true,
|
||
showQuickJumper: true,
|
||
pageSizeOptions: ['10', '20', '50', '100'],
|
||
showTotal: function (total) { return '共 ' + total + ' 条'; },
|
||
onChange: function (page, size) {
|
||
setCurrentPage(page);
|
||
if (size !== pageSize) setPageSize(size);
|
||
}
|
||
}
|
||
})
|
||
},
|
||
{
|
||
key: 'removed',
|
||
label: '拆除记录',
|
||
children: React.createElement(Table, {
|
||
rowKey: 'id',
|
||
size: 'small',
|
||
columns: [
|
||
{ title: '设备类型', dataIndex: 'deviceType', key: 'deviceType', width: 120 },
|
||
{ title: '车牌号', dataIndex: 'plateNo', key: 'plateNo', width: 120 },
|
||
{ title: '供应商', dataIndex: 'supplier', key: 'supplier', width: 120 },
|
||
{ title: '拆除时间', dataIndex: 'removeTime', key: 'removeTime', width: 160 },
|
||
{ title: '拆除人', dataIndex: 'removeOperator', key: 'removeOperator', width: 100 },
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
width: 80,
|
||
render: function (_, row) {
|
||
return React.createElement(Button, { type: 'link', size: 'small', onClick: function () { message.info('请查看运维管理-车辆业务-后装设备-查看'); } }, '查看');
|
||
}
|
||
}
|
||
],
|
||
dataSource: paginatedList,
|
||
pagination: {
|
||
current: validPage,
|
||
pageSize: pageSize,
|
||
total: totalItems,
|
||
showSizeChanger: true,
|
||
showQuickJumper: true,
|
||
pageSizeOptions: ['10', '20', '50', '100'],
|
||
showTotal: function (total) { return '共 ' + total + ' 条'; },
|
||
onChange: function (page, size) {
|
||
setCurrentPage(page);
|
||
if (size !== pageSize) setPageSize(size);
|
||
}
|
||
}
|
||
})
|
||
}
|
||
]
|
||
})
|
||
),
|
||
viewRecord && React.createElement(Modal, {
|
||
title: '查看后装设备',
|
||
open: !!viewRecord,
|
||
onCancel: function () { setViewRecord(null); },
|
||
footer: React.createElement(Button, { onClick: function () { setViewRecord(null); } }, '关闭'),
|
||
width: 520,
|
||
children: viewRecord ? React.createElement('div', { style: { lineHeight: '2' } },
|
||
React.createElement('div', null, '设备类型：', viewRecord.deviceType),
|
||
React.createElement('div', null, '车牌号：', viewRecord.plateNo),
|
||
React.createElement('div', null, '供应商：', viewRecord.supplier),
|
||
React.createElement('div', null, '安装时间：', viewRecord.createTime || '-'),
|
||
React.createElement('div', null, '安装人：', viewRecord.createOperator || '-'),
|
||
React.createElement('div', null, '拆除时间：', viewRecord.removeTime || '-'),
|
||
React.createElement('div', null, '拆除人：', viewRecord.removeOperator || '-')
|
||
) : null
|
||
}),
|
||
editRecord && React.createElement(Modal, {
|
||
title: '编辑后装设备',
|
||
open: !!editRecord,
|
||
onCancel: function () { setEditRecord(null); },
|
||
onOk: function () {
|
||
setEditRecord(null);
|
||
message.success('保存成功');
|
||
},
|
||
okText: '保存',
|
||
cancelText: '取消',
|
||
width: 520,
|
||
children: editRecord ? React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
|
||
React.createElement('div', null, React.createElement('span', { style: styles.label }, '设备类型'), React.createElement(Select, { style: { width: '100%' }, value: editRecord.deviceType, options: DEVICE_TYPES.map(function (d) { return { label: d, value: d }; }) })),
|
||
React.createElement('div', null, React.createElement('span', { style: styles.label }, '车牌号'), React.createElement(Input, { style: { width: '100%' }, value: editRecord.plateNo, readOnly: true })),
|
||
React.createElement('div', null, React.createElement('span', { style: styles.label }, '供应商'), React.createElement(Input, { style: { width: '100%' }, defaultValue: editRecord.supplier }))
|
||
) : null
|
||
}),
|
||
removeConfirmRecord && React.createElement(Modal, {
|
||
title: '确认拆除',
|
||
open: !!removeConfirmRecord,
|
||
onCancel: function () { setRemoveConfirmRecord(null); },
|
||
onOk: function () { handleRemoveConfirm(removeConfirmRecord); },
|
||
okText: '确认拆除',
|
||
cancelText: '取消',
|
||
okButtonProps: { danger: true },
|
||
children: removeConfirmRecord ? React.createElement('div', null, '确定要拆除该车辆「', removeConfirmRecord.deviceType, '」后装设备吗？') : null
|
||
}),
|
||
React.createElement(Modal, {
|
||
title: '需求说明',
|
||
open: showRequirementModal,
|
||
onCancel: function () { setShowRequirementModal(false); },
|
||
footer: React.createElement(Button, { onClick: function () { setShowRequirementModal(false); } }, '关闭'),
|
||
width: 720,
|
||
children: React.createElement('div', { style: styles.modalContent },
|
||
React.createElement('div', { style: styles.requirementSection },
|
||
React.createElement('div', { style: styles.requirementSectionTitle }, '1. 面包屑：'),
|
||
React.createElement('div', { style: styles.requirementItem }, '1.1. 运维管理-车辆业务-后装设备')
|
||
),
|
||
React.createElement('div', { style: styles.requirementSection },
|
||
React.createElement('div', { style: styles.requirementSectionTitle }, '2. 筛选：'),
|
||
React.createElement('div', { style: styles.requirementItem }, '2.1. 支持通过设备类型、使用车辆、安装日期进行管理，点击查询后，筛选条件与列表内容联动。点击重置会回到默认筛选条件并在列表展示结果：'),
|
||
React.createElement('div', { style: styles.requirementSubItem }, '2.1.1. 设备类型：选择器，包括GPS、尾板、车身广告、G7安全套件、G7普通设备、G7温控设备、备胎；'),
|
||
React.createElement('div', { style: styles.requirementSubItem }, '2.1.2. 使用车辆：选择器，支持通过输入框对输入内容模糊搜索，并下拉对应选项；'),
|
||
React.createElement('div', { style: styles.requirementSubItem }, '2.1.3. 安装时间：日期选择器，支持单输入框内双日历选择开始-结束时间；')
|
||
),
|
||
React.createElement('div', { style: styles.requirementSection },
|
||
React.createElement('div', { style: styles.requirementSectionTitle }, '3. 列表：'),
|
||
React.createElement('div', { style: styles.requirementItem }, '列表分为2个tab，已安装/拆除记录；'),
|
||
React.createElement('div', { style: styles.requirementItem }, '当已安装列表对应车辆存在车身广告/尾板时，在备车时会自动拉取车身广告/尾板为有的状态；'),
|
||
React.createElement('div', { style: styles.requirementItem }, '当已安装列表不存在车身广告/尾板时，在备车时车身广告/尾板为无的状态；'),
|
||
React.createElement('div', { style: styles.requirementItem }, '如果在备车/交车时手动取消或勾选车身广告尾板，并完成提交，后装设备列表也会新增一条该车辆的车身广告/尾板安装数据；'),
|
||
React.createElement('div', { style: styles.requirementSectionTitle }, '3.1. 已安装：'),
|
||
React.createElement('div', { style: styles.requirementSubItem }, '3.1.1. 列表展示所有后装设备信息，字段依次为：设备类型、车牌号、供应商、安装时间、安装人、操作；列表右上角为新增、导出；'),
|
||
React.createElement('div', { style: styles.requirementSubItem }, '3.1.1.1. 设备类型：显示后装设备类型，包括：GPS、尾板、车身广告、G7安全套件、G7普通设备、G7温控设备、备胎；'),
|
||
React.createElement('div', { style: styles.requirementSubItem }, '3.1.1.2. 车牌号：显示后装设备对应车牌号信息；'),
|
||
React.createElement('div', { style: styles.requirementSubItem }, '3.1.1.3. 供应商：显示后装设备供应商信息；'),
|
||
React.createElement('div', { style: styles.requirementSubItem }, '3.1.1.4. 安装时间：显示后装设备安装时间，格式为YYYY-MM-DD HH:MM；'),
|
||
React.createElement('div', { style: styles.requirementSubItem }, '3.1.1.5. 安装人：显示后装设备安装用户名称；'),
|
||
React.createElement('div', { style: styles.requirementSubItem }, '3.1.1.6. 操作：支持查看、编辑、拆除；'),
|
||
React.createElement('div', { style: styles.requirementSectionTitle }, '3.2. 拆除记录：'),
|
||
React.createElement('div', { style: styles.requirementSubItem }, '3.2.1. 列表展示所有后装设备拆除记录，字段依次为：设备类型、车牌号、供应商、拆除时间、拆除人、操作；列表右上角为新增、导出；'),
|
||
React.createElement('div', { style: styles.requirementSubItem }, '3.2.1.1. 设备类型：显示后装设备类型，包括：GPS、尾板、车身广告、G7安全套件、G7普通设备、G7温控设备、备胎；'),
|
||
React.createElement('div', { style: styles.requirementSubItem }, '3.2.1.2. 车牌号：显示后装设备对应车牌号信息；'),
|
||
React.createElement('div', { style: styles.requirementSubItem }, '3.2.1.3. 供应商：显示后装设备供应商信息；'),
|
||
React.createElement('div', { style: styles.requirementSubItem }, '3.2.1.4. 拆除时间：显示后装设备拆除时间，格式为YYYY-MM-DD HH:MM；'),
|
||
React.createElement('div', { style: styles.requirementSubItem }, '3.2.1.5. 拆除人：显示后装设备拆除用户名称；'),
|
||
React.createElement('div', { style: styles.requirementSubItem }, '3.2.1.6. 操作：支持查看；')
|
||
)
|
||
)
|
||
}),
|
||
addModalVisible && React.createElement(Modal, {
|
||
title: '新增后装设备',
|
||
open: addModalVisible,
|
||
onCancel: function () { setAddModalVisible(false); },
|
||
onOk: function () {
|
||
setDataList([{ id: String(Date.now()), deviceType: 'GPS', plateNo: '粤A12345', supplier: '新供应商', lastOpType: '安装', createTime: '2025-02-24 12:00', removeTime: '', createOperator: '当前用户', removeOperator: '' }].concat(dataList));
|
||
setAddModalVisible(false);
|
||
message.success('新增成功');
|
||
},
|
||
okText: '确定',
|
||
cancelText: '取消',
|
||
width: 520,
|
||
children: React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
|
||
React.createElement('div', null, React.createElement('span', { style: styles.label }, '设备类型'), React.createElement(Select, { style: { width: '100%' }, placeholder: '请选择', options: DEVICE_TYPES.map(function (d) { return { label: d, value: d }; }) })),
|
||
React.createElement('div', null, React.createElement('span', { style: styles.label }, '使用车辆'), React.createElement(Select, { style: { width: '100%' }, placeholder: '请选择或搜索', showSearch: true, options: MOCK_VEHICLE_OPTIONS.map(function (v) { return { label: v, value: v }; }) })),
|
||
React.createElement('div', null, React.createElement('span', { style: styles.label }, '供应商'), React.createElement(Input, { style: { width: '100%' }, placeholder: '请输入供应商' }))
|
||
)
|
||
})
|
||
);
|
||
};
|
||
if (typeof window !== 'undefined') {
|
||
window.Component = Component;
|
||
function mount() {
|
||
var rootEl = document.getElementById('root');
|
||
if (rootEl && window.ReactDOM && window.React) {
|
||
var root = ReactDOM.createRoot(rootEl);
|
||
root.render(React.createElement(Component));
|
||
}
|
||
}
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', mount);
|
||
} else {
|
||
setTimeout(mount, 0);
|
||
}
|
||
}
|