diff --git a/web端/运维管理/备件管理/仓库管理.jsx b/web端/运维管理/备件管理/仓库管理.jsx
new file mode 100644
index 0000000..31d34c3
--- /dev/null
+++ b/web端/运维管理/备件管理/仓库管理.jsx
@@ -0,0 +1,498 @@
+// 【重要】必须使用 const Component 作为组件变量名
+// 运维管理 - 备件库 - 仓库管理（列表页原型）
+
+const Component = function () {
+ var useState = React.useState;
+ var useMemo = React.useMemo;
+ var useCallback = React.useCallback;
+
+ var antd = window.antd;
+ var Breadcrumb = antd.Breadcrumb;
+ var Card = antd.Card;
+ var Button = antd.Button;
+ var Drawer = antd.Drawer;
+ var Input = antd.Input;
+ var Table = antd.Table;
+ var Select = antd.Select;
+ var DatePicker = antd.DatePicker;
+ var Modal = antd.Modal;
+ var message = antd.message;
+
+ var RangePicker = DatePicker.RangePicker;
+
+ function filterOption(input, option) {
+ var label = (option && (option.label || option.children)) || '';
+ return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
+ }
+
+ function pad2(n) {
+ return n < 10 ? '0' + n : '' + n;
+ }
+
+ // 格式化：YYYY-MM-DD HH:MM（尽量保持输入原样）
+ function fmtYMDHM(v) {
+ if (v === null || v === undefined) return '-';
+ var s = String(v).trim();
+ if (!s) return '-';
+ if (/^\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}/.test(s)) return s.slice(0, 16);
+ if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s + ' 00:00';
+ try {
+ var d = new Date(s.replace(/-/g, '/'));
+ if (isNaN(d.getTime())) return s;
+ return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate()) + ' ' + pad2(d.getHours()) + ':' + pad2(d.getMinutes());
+ } catch (e) {
+ return s;
+ }
+ }
+
+ function matchRange(valStr, range) {
+ if (!range || !range[0] || !range[1]) return true;
+ var s = '';
+ var e = '';
+ if (range[0] && range[0].format) s = range[0].format('YYYY-MM-DD');
+ if (range[1] && range[1].format) e = range[1].format('YYYY-MM-DD');
+ if (!s && !e) return true;
+ var v = String(valStr || '').slice(0, 10);
+ if (s && v < s) return false;
+ if (e && v > e) return false;
+ return true;
+ }
+
+ var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
+ var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
+ var filterItemStyle = { marginBottom: 12 };
+ var filterControlStyle = { width: '100%' };
+ var tableSingleLineStyle = '.warehouse-list-table .ant-table-thead th,.warehouse-list-table .ant-table-tbody td{white-space:nowrap;}';
+
+ // mock 列表数据（仓库是否为空用 itemCount 表示）
+ var warehousesState = useState(function () {
+ return [
+ { id: 'wh1', warehouseCode: 'WH-001', warehouseName: '天河备件库', warehouseAddress: '广州市天河区xx路1号', warehouseManager: '张明', creatorName: '张明', createTime: '2026-02-20 09:30', itemCount: 12 },
+ { id: 'wh2', warehouseCode: 'WH-002', warehouseName: '西湖服务备件库', warehouseAddress: '杭州市西湖区xx街88号', warehouseManager: '王芳', creatorName: '王芳', createTime: '2026-02-21 14:10', itemCount: 0 },
+ { id: 'wh3', warehouseCode: 'WH-003', warehouseName: '上海浦东备件仓', warehouseAddress: '上海市浦东新区xx大道55号', warehouseManager: '李华', creatorName: '李华', createTime: '2026-02-22 08:45', itemCount: 5 },
+ { id: 'wh4', warehouseCode: 'WH-004', warehouseName: '深圳南山备件仓', warehouseAddress: '深圳市南山区xx科技园3栋', warehouseManager: '赵强', creatorName: '赵强', createTime: '2026-02-23 10:20', itemCount: 0 },
+ { id: 'wh5', warehouseCode: 'WH-005', warehouseName: '成都高新备件库', warehouseAddress: '成都市高新区xx路12号', warehouseManager: '陈静', creatorName: '陈静', createTime: '2026-02-24 11:05', itemCount: 9 },
+ { id: 'wh6', warehouseCode: 'WH-006', warehouseName: '宁波江北备件库', warehouseAddress: '宁波市江北区xx街道6号', warehouseManager: '张明', creatorName: '张明', createTime: '2026-02-25 16:40', itemCount: 0 },
+ { id: 'wh7', warehouseCode: 'WH-007', warehouseName: '北京朝阳备件仓', warehouseAddress: '北京市朝阳区xx路77号', warehouseManager: '王芳', creatorName: '王芳', createTime: '2026-02-26 09:15', itemCount: 21 },
+ { id: 'wh8', warehouseCode: 'WH-008', warehouseName: '重庆两江备件库', warehouseAddress: '重庆市两江新区xx大道18号', warehouseManager: '李华', creatorName: '李华', createTime: '2026-02-27 07:45', itemCount: 2 }
+ ];
+ });
+ var warehouses = warehousesState[0];
+ var setWarehouses = warehousesState[1];
+
+ var defaultDraftState = { warehouseName: undefined, creatorName: undefined, createTimeRange: null };
+
+ var draftState = useState(Object.assign({}, defaultDraftState));
+ var draft = draftState[0];
+ var setDraft = draftState[1];
+
+ var appliedState = useState(Object.assign({}, defaultDraftState));
+ var applied = appliedState[0];
+ var setApplied = appliedState[1];
+
+ var pageState = useState(1);
+ var page = pageState[0];
+ var setPage = pageState[1];
+
+ var pageSizeState = useState(10);
+ var pageSize = pageSizeState[0];
+ var setPageSize = pageSizeState[1];
+
+ var requirementModalState = useState(false);
+ var requirementModalOpen = requirementModalState[0];
+ var setRequirementModalOpen = requirementModalState[1];
+
+ // 新增抽屉
+ var addDrawerOpenState = useState(false);
+ var addDrawerOpen = addDrawerOpenState[0];
+ var setAddDrawerOpen = addDrawerOpenState[1];
+
+ var addDrawerModeState = useState('add'); // 'add' | 'edit'
+ var addDrawerMode = addDrawerModeState[0];
+ var setAddDrawerMode = addDrawerModeState[1];
+
+ var editingWarehouseIdState = useState(null);
+ var editingWarehouseId = editingWarehouseIdState[0];
+ var setEditingWarehouseId = editingWarehouseIdState[1];
+
+ var addFormState = useState({
+ warehouseCode: '',
+ warehouseName: '',
+ warehouseAddress: '',
+ warehouseManager: undefined
+ });
+ var addForm = addFormState[0];
+ var setAddForm = addFormState[1];
+
+ var requirementDocContent = [
+ '一个「数字化资产ONEOS运管平台」中的「仓库管理」模块',
+ '#面包屑：运维管理-备件库-仓库管理',
+ '',
+ '1.筛选：',
+ '1.1.仓库名称：选择器，支持输入框内输入内容模糊搜索下拉匹配结果；',
+ '1.2.创建人：选择器，下拉显示创建人；',
+ '1.3.创建时间：日期选择器，支持单输入框双日历通过开始-结束时间筛选；',
+ '',
+ '2.列表；右侧为新增；',
+ '2.1.序号：1.2.3.以此类推；',
+ '2.2.仓库编码：显示仓库编码；',
+ '2.3.仓库名称：显示仓库名称；',
+ '2.4.仓库地址：显示仓库地址；',
+ '2.5.仓库管理人：显示仓库管理人；',
+ '2.6.创建人：显示创建人；',
+ '2.7.创建时间：显示创建时间，格式为：YYYY-MM-DD HH:MM；',
+ '2.8.操作：编辑、删除；',
+ ' 2.8.1.编辑：跳转仓库设置-编辑页；',
+ ' 2.8.2.删除：点击进行二次确认，确认后判断仓库是否为空，如果仓库非空则提示：清空仓库后才可删除该仓库，仓库为空则提示：删除成功；'
+ ].join('\n');
+
+ var creatorOptions = useMemo(function () {
+ // 创建人下拉来源：固定示例 + 兼容 mock 数据变更
+ var set = new Set();
+ setWarehouses; // keep linter friendly for unused setters in some generators
+ (warehouses || []).forEach(function (r) { if (r && r.creatorName) set.add(r.creatorName); });
+ if (set.size === 0) {
+ ['张明', '王芳', '李华', '赵强', '陈静'].forEach(function (v) { set.add(v); });
+ }
+ return Array.from(set).map(function (v) { return { value: v, label: v }; });
+ }, [warehouses]);
+
+ var warehouseManagerOptions = useMemo(function () {
+ var set = new Set();
+ (warehouses || []).forEach(function (r) { if (r && r.warehouseManager) set.add(r.warehouseManager); });
+ if (set.size === 0) {
+ ['张明', '王芳', '李华', '赵强', '陈静'].forEach(function (v) { set.add(v); });
+ }
+ return Array.from(set).map(function (v) { return { value: v, label: v }; });
+ }, [warehouses]);
+
+ var warehouseNameOptions = useMemo(function () {
+ var set = new Set();
+ (warehouses || []).forEach(function (r) { if (r && r.warehouseName) set.add(r.warehouseName); });
+ return Array.from(set).map(function (v) { return { value: v, label: v }; });
+ }, [warehouses]);
+
+ var filtered = useMemo(function () {
+ return (warehouses || []).filter(function (r) {
+ if (applied.warehouseName && r.warehouseName !== applied.warehouseName) return false;
+ if (applied.creatorName && r.creatorName !== applied.creatorName) return false;
+ if (!matchRange(r.createTime, applied.createTimeRange)) return false;
+ return true;
+ });
+ }, [warehouses, applied]);
+
+ var paged = useMemo(function () {
+ var start = (page - 1) * pageSize;
+ return filtered.slice(start, start + pageSize);
+ }, [filtered, page, pageSize]);
+
+ var serialStart = (page - 1) * pageSize;
+
+ var handleQuery = useCallback(function () {
+ setApplied({
+ warehouseName: draft.warehouseName,
+ creatorName: draft.creatorName,
+ createTimeRange: draft.createTimeRange
+ });
+ setPage(1);
+ }, [draft]);
+
+ var handleReset = useCallback(function () {
+ setDraft(Object.assign({}, defaultDraftState));
+ setApplied(Object.assign({}, defaultDraftState));
+ setPage(1);
+ }, []);
+
+ var handleAdd = useCallback(function () {
+ setAddDrawerMode('add');
+ setEditingWarehouseId(null);
+ setAddForm({ warehouseCode: '', warehouseName: '', warehouseAddress: '', warehouseManager: undefined });
+ setAddDrawerOpen(true);
+ }, []);
+
+ var handleEdit = useCallback(function (row) {
+ if (!row) return;
+ setAddDrawerMode('edit');
+ setEditingWarehouseId(row.id);
+ setAddForm({
+ warehouseCode: row.warehouseCode || '',
+ warehouseName: row.warehouseName || '',
+ warehouseAddress: row.warehouseAddress || '',
+ warehouseManager: row.warehouseManager
+ });
+ setAddDrawerOpen(true);
+ }, []);
+
+ var handleAddCancel = useCallback(function () {
+ setAddDrawerOpen(false);
+ setAddDrawerMode('add');
+ setEditingWarehouseId(null);
+ setAddForm({ warehouseCode: '', warehouseName: '', warehouseAddress: '', warehouseManager: undefined });
+ }, []);
+
+ function nowYMDHM() {
+ var d = new Date();
+ return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate()) + ' ' + pad2(d.getHours()) + ':' + pad2(d.getMinutes());
+ }
+
+ var handleAddSubmit = useCallback(function () {
+ var code = String(addForm.warehouseCode || '').trim();
+ var name = String(addForm.warehouseName || '').trim();
+ var address = String(addForm.warehouseAddress || '').trim();
+ var manager = addForm.warehouseManager ? addForm.warehouseManager : undefined;
+
+ // 仅仓库编码、仓库名称必填；地址/管理人选填
+ if (!code) {
+ message.warning('请填写仓库编码');
+ return;
+ }
+ if (!name) {
+ message.warning('请填写仓库名称');
+ return;
+ }
+
+ if (addDrawerMode === 'edit') {
+ if (!editingWarehouseId) {
+ message.error('无法定位要编辑的仓库记录');
+ return;
+ }
+ setWarehouses(function (prev) {
+ return (prev || []).map(function (r) {
+ if (!r || r.id !== editingWarehouseId) return r;
+ return Object.assign({}, r, {
+ warehouseCode: code,
+ warehouseName: name,
+ warehouseAddress: address,
+ warehouseManager: manager
+ });
+ });
+ });
+ setAddDrawerOpen(false);
+ setAddDrawerMode('add');
+ setEditingWarehouseId(null);
+ message.success('编辑成功');
+ return;
+ }
+
+ var item = {
+ id: 'wh' + Date.now(),
+ warehouseCode: code,
+ warehouseName: name,
+ warehouseAddress: address,
+ warehouseManager: manager,
+ creatorName: '当前用户',
+ createTime: nowYMDHM(),
+ itemCount: 0
+ };
+
+ setWarehouses(function (prev) {
+ return [item].concat(prev || []);
+ });
+ setAddDrawerOpen(false);
+ setAddDrawerMode('add');
+ setEditingWarehouseId(null);
+ message.success('新增成功');
+ }, [addForm, addDrawerMode, editingWarehouseId, setWarehouses, setAddDrawerMode, setEditingWarehouseId]);
+
+ var handleDelete = useCallback(function (row) {
+ if (!row) return;
+ Modal.confirm({
+ title: '确认删除',
+ content: '请确认是否删除该仓库',
+ okText: '确认',
+ cancelText: '取消',
+ onOk: function () {
+ if (row.itemCount > 0) {
+ message.warning('清空仓库后才可删除该仓库');
+ return;
+ }
+ setWarehouses(function (prev) {
+ return (prev || []).filter(function (r) { return r.id !== row.id; });
+ });
+ message.success('删除成功');
+ }
+ });
+ }, [setWarehouses]);
+
+ var columns = useMemo(function () {
+ return [
+ {
+ title: '序号',
+ key: 'serial',
+ width: 70,
+ fixed: 'left',
+ render: function (_, r, idx) {
+ return serialStart + idx + 1;
+ }
+ },
+ { title: '仓库编码', dataIndex: 'warehouseCode', key: 'warehouseCode', width: 160, fixed: 'left' },
+ { title: '仓库名称', dataIndex: 'warehouseName', key: 'warehouseName', width: 180, ellipsis: true },
+ { title: '仓库地址', dataIndex: 'warehouseAddress', key: 'warehouseAddress', width: 240, ellipsis: true },
+ { title: '仓库管理人', dataIndex: 'warehouseManager', key: 'warehouseManager', width: 140 },
+ { title: '创建人', dataIndex: 'creatorName', key: 'creatorName', width: 120 },
+ {
+ title: '创建时间',
+ dataIndex: 'createTime',
+ key: 'createTime',
+ width: 200,
+ render: function (v) { return fmtYMDHM(v); }
+ },
+ {
+ title: '操作',
+ key: 'action',
+ width: 180,
+ fixed: 'right',
+ render: function (_, r) {
+ return React.createElement('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } },
+ React.createElement(Button, { type: 'link', size: 'small', onClick: function () { handleEdit(r); } }, '编辑'),
+ React.createElement(Button, { type: 'link', size: 'small', danger: true, onClick: function () { handleDelete(r); } }, '删除')
+ );
+ }
+ }
+ ];
+ }, [serialStart, handleDelete]);
+
+ return React.createElement('div', { style: layoutStyle },
+ React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 8 } },
+ React.createElement(Breadcrumb, { items: [{ title: '运维管理' }, { title: '备件库' }, { title: '仓库管理' }] }),
+ React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalOpen(true); } }, '查看需求说明')
+ ),
+
+ React.createElement(Modal, {
+ title: '需求说明',
+ open: requirementModalOpen,
+ onCancel: function () { setRequirementModalOpen(false); },
+ width: 720,
+ footer: React.createElement(Button, { onClick: function () { setRequirementModalOpen(false); } }, '关闭'),
+ bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
+ }, React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6, color: 'rgba(0,0,0,0.85)' } }, requirementDocContent)),
+
+ React.createElement(Card, { style: { marginBottom: 16 } },
+ React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
+ React.createElement('div', { style: filterItemStyle },
+ React.createElement('div', { style: filterLabelStyle }, '仓库名称'),
+ React.createElement(Select, {
+ placeholder: '请输入或选择仓库名称',
+ style: filterControlStyle,
+ value: draft.warehouseName,
+ onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { warehouseName: v }); }); },
+ allowClear: true,
+ showSearch: true,
+ options: warehouseNameOptions,
+ filterOption: filterOption
+ })
+ ),
+
+ React.createElement('div', { style: filterItemStyle },
+ React.createElement('div', { style: filterLabelStyle }, '创建人'),
+ React.createElement(Select, {
+ placeholder: '请选择创建人',
+ style: filterControlStyle,
+ value: draft.creatorName,
+ onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { creatorName: v }); }); },
+ allowClear: true,
+ showSearch: true,
+ options: creatorOptions
+ })
+ ),
+
+ React.createElement('div', { style: filterItemStyle },
+ React.createElement('div', { style: filterLabelStyle }, '创建时间'),
+ React.createElement(RangePicker, {
+ style: filterControlStyle,
+ value: draft.createTimeRange,
+ onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { createTimeRange: v }); }); },
+ placeholder: ['开始时间', '结束时间'],
+ showTime: false
+ })
+ )
+ ),
+
+ React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 16 } },
+ React.createElement(Button, { onClick: handleReset }, '重置'),
+ React.createElement(Button, { type: 'primary', onClick: handleQuery }, '查询')
+ )
+ ),
+
+ React.createElement(Card, null,
+ React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', marginBottom: 12 } },
+ React.createElement(Button, { type: 'primary', onClick: handleAdd }, '新增')
+ ),
+
+ React.createElement('style', null, tableSingleLineStyle),
+ React.createElement('div', { className: 'warehouse-list-table' },
+ React.createElement(Table, {
+ rowKey: 'id',
+ columns: columns,
+ dataSource: paged,
+ scroll: { x: 1200 },
+ size: 'small',
+ pagination: {
+ current: page,
+ pageSize: pageSize,
+ total: filtered.length,
+ showSizeChanger: true,
+ showQuickJumper: true,
+ showTotal: function (t) { return '共 ' + t + ' 条'; },
+ onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
+ }
+ })
+ )
+ ),
+
+ React.createElement(Drawer, {
+ title: addDrawerMode === 'edit' ? '编辑仓库' : '新增仓库',
+ placement: 'right',
+ width: 460,
+ open: addDrawerOpen,
+ onClose: handleAddCancel,
+ styles: { body: { padding: 24 } },
+ footer: React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8 } },
+ React.createElement(Button, { type: 'primary', onClick: handleAddSubmit }, '提交'),
+ React.createElement(Button, { onClick: handleAddCancel }, '取消')
+ )
+ },
+ React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
+ React.createElement('div', null,
+ React.createElement('div', { style: { marginBottom: 6, color: '#666', fontSize: 14 } }, '仓库编码'),
+ React.createElement(Input, {
+ value: addForm.warehouseCode,
+ disabled: addDrawerMode === 'edit',
+ onChange: function (e) { setAddForm(function (p) { return Object.assign({}, p, { warehouseCode: e && e.target ? e.target.value : '' }); }); },
+ placeholder: '请输入仓库编码'
+ })
+ ),
+ React.createElement('div', null,
+ React.createElement('div', { style: { marginBottom: 6, color: '#666', fontSize: 14 } }, '仓库名称'),
+ React.createElement(Input, {
+ value: addForm.warehouseName,
+ onChange: function (e) { setAddForm(function (p) { return Object.assign({}, p, { warehouseName: e && e.target ? e.target.value : '' }); }); },
+ placeholder: '请输入仓库名称'
+ })
+ ),
+ React.createElement('div', null,
+ React.createElement('div', { style: { marginBottom: 6, color: '#666', fontSize: 14 } }, '仓库地址'),
+ React.createElement(Input, {
+ value: addForm.warehouseAddress,
+ onChange: function (e) { setAddForm(function (p) { return Object.assign({}, p, { warehouseAddress: e && e.target ? e.target.value : '' }); }); },
+ placeholder: '请输入仓库地址'
+ })
+ ),
+ React.createElement('div', null,
+ React.createElement('div', { style: { marginBottom: 6, color: '#666', fontSize: 14 } }, '仓库管理人'),
+ React.createElement(Select, {
+ placeholder: '请选择人员',
+ value: addForm.warehouseManager,
+ onChange: function (v) { setAddForm(function (p) { return Object.assign({}, p, { warehouseManager: v }); }); },
+ style: { width: '100%' },
+ allowClear: true,
+ showSearch: true,
+ filterOption: filterOption,
+ options: warehouseManagerOptions
+ })
+ )
+ )
+ )
+ );
+};
+
diff --git a/web端/运维管理/备件管理/备件库存.jsx b/web端/运维管理/备件管理/备件库存.jsx
new file mode 100644
index 0000000..0dcb69f
--- /dev/null
+++ b/web端/运维管理/备件管理/备件库存.jsx
@@ -0,0 +1,584 @@
+// 【重要】必须使用 const Component 作为组件变量名
+// 运维管理 - 备件库 - 备件库存（列表页原型）
+
+const Component = function () {
+ var useState = React.useState;
+ var useMemo = React.useMemo;
+ var useCallback = React.useCallback;
+
+ var antd = window.antd;
+ var Breadcrumb = antd.Breadcrumb;
+ var Card = antd.Card;
+ var Button = antd.Button;
+ var Table = antd.Table;
+ var Select = antd.Select;
+ var Modal = antd.Modal;
+ var Drawer = antd.Drawer;
+ var Form = antd.Form;
+ var Input = antd.Input;
+ var Tabs = antd.Tabs;
+ var message = antd.message;
+
+ function filterOption(input, option) {
+ var label = (option && (option.label || option.children)) || '';
+ return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
+ }
+
+ var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
+ var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
+ var filterItemStyle = { marginBottom: 12 };
+ var filterControlStyle = { width: '100%' };
+ var tableStyle = '.spare-stock-table .ant-table-thead th,.spare-stock-table .ant-table-tbody td{white-space:nowrap;}' +
+ '.spare-stock-table .col-stock-qty{text-align:left !important;}' +
+ '.spare-stock-table th.col-stock-qty{text-align:left !important;}';
+ var tabsAlignStyle = '.spare-stock-main-tabs .ant-tabs-nav{align-items:center;margin-bottom:0;}';
+
+ // 适配车型：选项 value 与列表一致；label 附带关联型号（与基本数据-型号参数对应）
+ var vehicleModelSpecMap = {
+ '飞驰49t': '海格牌KLQ5180XYKFCEV',
+ '宇通49t': 'KLQ6129',
+ '现代4.5t': 'BJ5180',
+ '跃进4.5t': '帅铃Q6',
+ '苏龙18t': '海格牌KLQ5180XYKFCEV'
+ };
+ var allVehicleModelOptions = useMemo(function () {
+ return [
+ { value: '飞驰49t', label: '飞驰49t' },
+ { value: '宇通49t', label: '宇通49t' },
+ { value: '现代4.5t', label: '现代4.5t' },
+ { value: '跃进4.5t', label: '跃进4.5t' },
+ { value: '苏龙18t', label: '苏龙18t' }
+ ];
+ }, []);
+ var addDrawerVehicleOptions = useMemo(function () {
+ return allVehicleModelOptions.map(function (opt) {
+ var spec = vehicleModelSpecMap[opt.value];
+ return {
+ value: opt.value,
+ label: spec ? opt.value + '（型号：' + spec + '）' : opt.label
+ };
+ });
+ }, [allVehicleModelOptions]);
+
+ // 样例数据：新件库 11 条 + 易损件库 5 条（入库/出库与业务截图一致）
+ var listState = useState(function () {
+ var XJ = '新件库';
+ var XJCode = 'WH-XJK';
+ var YS = '易损件库';
+ var YSCode = 'WH-YSK';
+ return [
+ { id: 'ss-xj-01', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'FC49t-XJ-0001', spareName: '去离子柱(飞驰49t-新件)', vehicleModels: ['飞驰49t'], stockQty: 34, totalInbound: 42, totalOutbound: 8 },
+ { id: 'ss-xj-02', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'FC49t-XJ-0002', spareName: '燃料电池空气滤芯(飞驰49t-新件)', vehicleModels: ['飞驰49t'], stockQty: 28, totalInbound: 55, totalOutbound: 27 },
+ { id: 'ss-xj-03', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YT49t-XJ-0001', spareName: '去离子柱(宇通49t-新件)', vehicleModels: ['宇通49t'], stockQty: 20, totalInbound: 28, totalOutbound: 8 },
+ { id: 'ss-xj-04', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YT49t-XJ-0002', spareName: '燃料电池空气滤芯(宇通49t-新件)', vehicleModels: ['宇通49t'], stockQty: 12, totalInbound: 18, totalOutbound: 6 },
+ { id: 'ss-xj-05', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YT49t-XJ-0005', spareName: '燃料电池去离子水(宇通49t-新件)', vehicleModels: ['宇通49t'], stockQty: 5, totalInbound: 5, totalOutbound: 0 },
+ { id: 'ss-xj-06', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YT49t-XJ-0029', spareName: '小循环滤网(宇通49t-新件)', vehicleModels: ['宇通49t'], stockQty: 11, totalInbound: 13, totalOutbound: 2 },
+ { id: 'ss-xj-07', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YT49t-XJ-0030', spareName: '大循环滤网(宇通49t-新件)', vehicleModels: ['宇通49t'], stockQty: 10, totalInbound: 10, totalOutbound: 0 },
+ { id: 'ss-xj-08', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'XD4.5t-XJ-0008', spareName: '后尾灯(现代4.5t-新件)', vehicleModels: ['现代4.5t'], stockQty: 18, totalInbound: 40, totalOutbound: 22 },
+ { id: 'ss-xj-09', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YJ4.5t-XJ-0035', spareName: '12V蓄电池(跃进4.5t-新件)', vehicleModels: ['跃进4.5t'], stockQty: 23, totalInbound: 26, totalOutbound: 3 },
+ { id: 'ss-xj-10', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'SL18t-XJ-0001', spareName: '去离子柱(苏龙18t-新件)', vehicleModels: ['苏龙18t'], stockQty: 11, totalInbound: 12, totalOutbound: 1 },
+ { id: 'ss-xj-11', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'SL18t-XJ-0002', spareName: '燃料电池空气滤芯(苏龙18t-新件)', vehicleModels: ['苏龙18t'], stockQty: 16, totalInbound: 16, totalOutbound: 0 },
+ { id: 'ss-ys-01', warehouseCode: YSCode, warehouseName: YS, spareCode: 'TY-YS-0001', spareName: 'H1灯泡-易损件', vehicleModels: [], stockQty: 55, totalInbound: 55, totalOutbound: 0 },
+ { id: 'ss-ys-02', warehouseCode: YSCode, warehouseName: YS, spareCode: 'TY-YS-0002', spareName: 'H3灯泡-易损件', vehicleModels: [], stockQty: 50, totalInbound: 50, totalOutbound: 0 },
+ { id: 'ss-ys-03', warehouseCode: YSCode, warehouseName: YS, spareCode: 'TY-YS-0003', spareName: 'H7灯泡-易损件', vehicleModels: [], stockQty: 53, totalInbound: 53, totalOutbound: 0 },
+ { id: 'ss-ys-04', warehouseCode: YSCode, warehouseName: YS, spareCode: 'TY-YS-0004', spareName: '小灯泡-易损件', vehicleModels: [], stockQty: 52, totalInbound: 52, totalOutbound: 0 },
+ { id: 'ss-ys-05', warehouseCode: YSCode, warehouseName: YS, spareCode: 'TY-YS-0005', spareName: '2405灯泡-易损件', vehicleModels: [], stockQty: 110, totalInbound: 110, totalOutbound: 0 }
+ ];
+ });
+ var list = listState[0];
+
+ // 入库 / 出库记录样例（原型）
+ var inboundListState = useState(function () {
+ return [
+ { id: 'in-001', billNo: 'RK20250227001', inboundTime: '2025-02-27 09:12', warehouseName: '新件库', spareCode: 'FC49t-XJ-0001', spareName: '去离子柱(飞驰49t-新件)', qty: 4, operator: '张三' },
+ { id: 'in-002', billNo: 'RK20250226088', inboundTime: '2025-02-26 14:30', warehouseName: '新件库', spareCode: 'YT49t-XJ-0002', spareName: '燃料电池空气滤芯(宇通49t-新件)', qty: 6, operator: '李四' },
+ { id: 'in-003', billNo: 'RK20250225102', inboundTime: '2025-02-25 11:05', warehouseName: '易损件库', spareCode: 'TY-YS-0001', spareName: 'H1灯泡-易损件', qty: 20, operator: '王五' },
+ { id: 'in-004', billNo: 'RK20250224056', inboundTime: '2025-02-24 16:20', warehouseName: '新件库', spareCode: 'SL18t-XJ-0002', spareName: '燃料电池空气滤芯(苏龙18t-新件)', qty: 8, operator: '张三' }
+ ];
+ });
+ var inboundList = inboundListState[0];
+
+ var outboundListState = useState(function () {
+ return [
+ { id: 'out-001', billNo: 'CK20250227012', outboundTime: '2025-02-27 10:08', warehouseName: '新件库', spareCode: 'FC49t-XJ-0002', spareName: '燃料电池空气滤芯(飞驰49t-新件)', qty: 2, recipient: '维修一组' },
+ { id: 'out-002', billNo: 'CK20250226995', outboundTime: '2025-02-26 09:45', warehouseName: '新件库', spareCode: 'XD4.5t-XJ-0008', spareName: '后尾灯(现代4.5t-新件)', qty: 1, recipient: '维修二组' },
+ { id: 'out-003', billNo: 'CK20250225880', outboundTime: '2025-02-25 13:22', warehouseName: '易损件库', spareCode: 'TY-YS-0003', spareName: 'H7灯泡-易损件', qty: 5, recipient: '场站 A' },
+ { id: 'out-004', billNo: 'CK20250224771', outboundTime: '2025-02-24 08:50', warehouseName: '新件库', spareCode: 'YJ4.5t-XJ-0035', spareName: '12V蓄电池(跃进4.5t-新件)', qty: 1, recipient: '维修一组' }
+ ];
+ });
+ var outboundList = outboundListState[0];
+
+ var inboundPageState = useState(1);
+ var inboundPage = inboundPageState[0];
+ var setInboundPage = inboundPageState[1];
+ var inboundPageSizeState = useState(10);
+ var inboundPageSize = inboundPageSizeState[0];
+ var setInboundPageSize = inboundPageSizeState[1];
+
+ var outboundPageState = useState(1);
+ var outboundPage = outboundPageState[0];
+ var setOutboundPage = outboundPageState[1];
+ var outboundPageSizeState = useState(10);
+ var outboundPageSize = outboundPageSizeState[0];
+ var setOutboundPageSize = outboundPageSizeState[1];
+
+ var mainTabState = useState('stock');
+ var mainTab = mainTabState[0];
+ var setMainTab = mainTabState[1];
+
+ var defaultDraft = {
+ warehouseName: undefined,
+ spareCode: undefined,
+ spareName: undefined,
+ vehicleModels: []
+ };
+
+ var draftState = useState(Object.assign({}, defaultDraft));
+ var draft = draftState[0];
+ var setDraft = draftState[1];
+
+ var appliedState = useState(Object.assign({}, defaultDraft));
+ var applied = appliedState[0];
+ var setApplied = appliedState[1];
+
+ var pageState = useState(1);
+ var page = pageState[0];
+ var setPage = pageState[1];
+
+ var pageSizeState = useState(10);
+ var pageSize = pageSizeState[0];
+ var setPageSize = pageSizeState[1];
+
+ var requirementModalState = useState(false);
+ var requirementModalOpen = requirementModalState[0];
+ var setRequirementModalOpen = requirementModalState[1];
+
+ var addDrawerState = useState(false);
+ var addDrawerOpen = addDrawerState[0];
+ var setAddDrawerOpen = addDrawerState[1];
+
+ var addForm = Form.useForm()[0];
+
+ var requirementDocContent = [
+ '一个「数字化资产ONEOS运管平台」中的「备件库存」模块',
+ '#面包屑：运维管理-备件库-备件库存',
+ '',
+ '1.筛选：',
+ '1.1.仓库名称：选择器，支持输入框内输入模糊搜索，下拉匹配正确项；',
+ '1.2.备件编码：选择器，支持输入框内输入模糊搜索，下拉匹配正确项；',
+ '1.3.备件名称：选择器，支持输入框内输入模糊搜索，下拉匹配正确项；',
+ '1.4.适配车型：选择器，支持多选，显示所有型号；',
+ '',
+ '2.列表；右侧为新增物料信息、导出按钮',
+ '2.1.序号：1.2.3.以此类推；',
+ '2.2.仓库编码：显示仓库编码；',
+ '2.3.仓库名称：显示仓库名称；',
+ '2.4.备件编码：显示备件编码；',
+ '2.5.备件名称：显示备件名称；',
+ '2.6.适配车型：显示适配车型，一个备件可能有多个车型；',
+ '2.7.库存数量：显示库存数量；',
+ '2.8.累积入库数量：显示该备件入库数量总和；',
+ '2.9.累积出库数量：显示该备件出库数量总和；',
+ '2.10.右下角为分页功能，支持选择单页显示数据条数；'
+ ].join('\n');
+
+ var warehouseNameOptions = useMemo(function () {
+ var set = new Set();
+ (list || []).forEach(function (r) { if (r && r.warehouseName) set.add(r.warehouseName); });
+ return Array.from(set).map(function (v) { return { value: v, label: v }; });
+ }, [list]);
+
+ var spareCodeOptions = useMemo(function () {
+ var set = new Set();
+ (list || []).forEach(function (r) { if (r && r.spareCode) set.add(r.spareCode); });
+ return Array.from(set).map(function (v) { return { value: v, label: v }; });
+ }, [list]);
+
+ var spareNameOptions = useMemo(function () {
+ var set = new Set();
+ (list || []).forEach(function (r) { if (r && r.spareName) set.add(r.spareName); });
+ return Array.from(set).map(function (v) { return { value: v, label: v }; });
+ }, [list]);
+
+ function rowMatchesVehicleModels(row, selected) {
+ if (!selected || selected.length === 0) return true;
+ var models = row.vehicleModels || [];
+ for (var i = 0; i < selected.length; i++) {
+ if (models.indexOf(selected[i]) >= 0) return true;
+ }
+ return false;
+ }
+
+ var filtered = useMemo(function () {
+ return (list || []).filter(function (r) {
+ if (applied.warehouseName && r.warehouseName !== applied.warehouseName) return false;
+ if (applied.spareCode && r.spareCode !== applied.spareCode) return false;
+ if (applied.spareName && r.spareName !== applied.spareName) return false;
+ if (!rowMatchesVehicleModels(r, applied.vehicleModels)) return false;
+ return true;
+ });
+ }, [list, applied]);
+
+ var paged = useMemo(function () {
+ var start = (page - 1) * pageSize;
+ return filtered.slice(start, start + pageSize);
+ }, [filtered, page, pageSize]);
+
+ var serialStart = (page - 1) * pageSize;
+
+ var handleQuery = useCallback(function () {
+ setApplied({
+ warehouseName: draft.warehouseName,
+ spareCode: draft.spareCode,
+ spareName: draft.spareName,
+ vehicleModels: draft.vehicleModels ? draft.vehicleModels.slice() : []
+ });
+ setPage(1);
+ }, [draft]);
+
+ var handleReset = useCallback(function () {
+ setDraft(Object.assign({}, defaultDraft));
+ setApplied(Object.assign({}, defaultDraft));
+ setPage(1);
+ }, []);
+
+ var handleAdd = useCallback(function () {
+ addForm.resetFields();
+ setAddDrawerOpen(true);
+ }, [addForm]);
+
+ var handleAddDrawerClose = useCallback(function () {
+ setAddDrawerOpen(false);
+ addForm.resetFields();
+ }, [addForm]);
+
+ var handleAddDrawerSubmit = useCallback(function () {
+ addForm.validateFields().then(function () {
+ message.success('已保存（原型，联调时对接建档接口）');
+ setAddDrawerOpen(false);
+ addForm.resetFields();
+ }).catch(function () {});
+ }, [addForm]);
+
+ var handleExport = useCallback(function () {
+ message.success('导出当前筛选结果（原型，联调时对接导出接口）');
+ }, []);
+
+ var columns = useMemo(function () {
+ return [
+ {
+ title: '序号',
+ key: 'serial',
+ width: 70,
+ fixed: 'left',
+ render: function (_, r, idx) {
+ return serialStart + idx + 1;
+ }
+ },
+ { title: '仓库编码', dataIndex: 'warehouseCode', key: 'warehouseCode', width: 120, fixed: 'left' },
+ { title: '仓库名称', dataIndex: 'warehouseName', key: 'warehouseName', width: 160, ellipsis: true },
+ { title: '备件编码', dataIndex: 'spareCode', key: 'spareCode', width: 120 },
+ { title: '备件名称', dataIndex: 'spareName', key: 'spareName', width: 260, ellipsis: true },
+ {
+ title: '适配车型',
+ key: 'vehicleModels',
+ width: 220,
+ ellipsis: true,
+ render: function (_, r) {
+ var arr = r.vehicleModels || [];
+ return arr.length ? arr.join('、') : '-';
+ }
+ },
+ {
+ title: '库存数量',
+ dataIndex: 'stockQty',
+ key: 'stockQty',
+ width: 100,
+ align: 'left',
+ className: 'col-stock-qty',
+ onHeaderCell: function () { return { className: 'col-stock-qty' }; },
+ render: function (v) {
+ if (v == null) return '-';
+ return React.createElement('span', {
+ style: {
+ color: 'var(--ant-color-primary, #1677ff)',
+ fontWeight: 600,
+ fontSize: 15
+ }
+ }, v);
+ }
+ },
+ {
+ title: '累积入库数量',
+ dataIndex: 'totalInbound',
+ key: 'totalInbound',
+ width: 130,
+ render: function (v) { return v != null ? Number(v).toFixed(1) : '-'; }
+ },
+ {
+ title: '累积出库数量',
+ dataIndex: 'totalOutbound',
+ key: 'totalOutbound',
+ width: 130,
+ render: function (v) { return v != null ? Number(v).toFixed(1) : '-'; }
+ }
+ ];
+ }, [serialStart]);
+
+ var inboundSerialStart = (inboundPage - 1) * inboundPageSize;
+ var inboundPaged = useMemo(function () {
+ var start = (inboundPage - 1) * inboundPageSize;
+ return (inboundList || []).slice(start, start + inboundPageSize);
+ }, [inboundList, inboundPage, inboundPageSize]);
+
+ var outboundSerialStart = (outboundPage - 1) * outboundPageSize;
+ var outboundPaged = useMemo(function () {
+ var start = (outboundPage - 1) * outboundPageSize;
+ return (outboundList || []).slice(start, start + outboundPageSize);
+ }, [outboundList, outboundPage, outboundPageSize]);
+
+ var inboundColumns = useMemo(function () {
+ return [
+ { title: '序号', key: 'serial', width: 70, render: function (_, r, idx) { return inboundSerialStart + idx + 1; } },
+ { title: '入库单号', dataIndex: 'billNo', key: 'billNo', width: 150 },
+ { title: '入库时间', dataIndex: 'inboundTime', key: 'inboundTime', width: 160 },
+ { title: '仓库名称', dataIndex: 'warehouseName', key: 'warehouseName', width: 120 },
+ { title: '备件编码', dataIndex: 'spareCode', key: 'spareCode', width: 130 },
+ { title: '备件名称', dataIndex: 'spareName', key: 'spareName', ellipsis: true },
+ { title: '入库数量', dataIndex: 'qty', key: 'qty', width: 100 },
+ { title: '经办人', dataIndex: 'operator', key: 'operator', width: 100 }
+ ];
+ }, [inboundSerialStart]);
+
+ var outboundColumns = useMemo(function () {
+ return [
+ { title: '序号', key: 'serial', width: 70, render: function (_, r, idx) { return outboundSerialStart + idx + 1; } },
+ { title: '出库单号', dataIndex: 'billNo', key: 'billNo', width: 150 },
+ { title: '出库时间', dataIndex: 'outboundTime', key: 'outboundTime', width: 160 },
+ { title: '仓库名称', dataIndex: 'warehouseName', key: 'warehouseName', width: 120 },
+ { title: '备件编码', dataIndex: 'spareCode', key: 'spareCode', width: 130 },
+ { title: '备件名称', dataIndex: 'spareName', key: 'spareName', ellipsis: true },
+ { title: '出库数量', dataIndex: 'qty', key: 'qty', width: 100 },
+ { title: '领用方', dataIndex: 'recipient', key: 'recipient', width: 120 }
+ ];
+ }, [outboundSerialStart]);
+
+ var tabItems = useMemo(function () {
+ var stockTab = React.createElement(Card, { style: { marginTop: 0 } },
+ React.createElement('style', null, tableStyle),
+ React.createElement('div', { className: 'spare-stock-table' },
+ React.createElement(Table, {
+ rowKey: 'id',
+ columns: columns,
+ dataSource: paged,
+ scroll: { x: 1460 },
+ size: 'small',
+ pagination: {
+ current: page,
+ pageSize: pageSize,
+ total: filtered.length,
+ showSizeChanger: true,
+ showQuickJumper: true,
+ showTotal: function (t) { return '共 ' + t + ' 条'; },
+ onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
+ }
+ })
+ )
+ );
+
+ var inboundTab = React.createElement(Card, null,
+ React.createElement(Table, {
+ rowKey: 'id',
+ columns: inboundColumns,
+ dataSource: inboundPaged,
+ size: 'small',
+ scroll: { x: 1200 },
+ pagination: {
+ current: inboundPage,
+ pageSize: inboundPageSize,
+ total: (inboundList || []).length,
+ showSizeChanger: true,
+ showQuickJumper: true,
+ showTotal: function (t) { return '共 ' + t + ' 条'; },
+ onChange: function (pg, ps) { setInboundPage(pg); if (ps) setInboundPageSize(ps); }
+ }
+ })
+ );
+
+ var outboundTab = React.createElement(Card, null,
+ React.createElement(Table, {
+ rowKey: 'id',
+ columns: outboundColumns,
+ dataSource: outboundPaged,
+ size: 'small',
+ scroll: { x: 1200 },
+ pagination: {
+ current: outboundPage,
+ pageSize: outboundPageSize,
+ total: (outboundList || []).length,
+ showSizeChanger: true,
+ showQuickJumper: true,
+ showTotal: function (t) { return '共 ' + t + ' 条'; },
+ onChange: function (pg, ps) { setOutboundPage(pg); if (ps) setOutboundPageSize(ps); }
+ }
+ })
+ );
+
+ return [
+ { key: 'stock', label: '备件库存', children: stockTab },
+ { key: 'inbound', label: '入库记录', children: inboundTab },
+ { key: 'outbound', label: '出库记录', children: outboundTab }
+ ];
+ }, [
+ columns, paged, page, pageSize, filtered.length,
+ inboundColumns, inboundPaged, inboundPage, inboundPageSize, inboundList,
+ outboundColumns, outboundPaged, outboundPage, outboundPageSize, outboundList,
+ tableStyle
+ ]);
+
+ return React.createElement('div', { style: layoutStyle },
+ React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 8 } },
+ React.createElement(Breadcrumb, { items: [{ title: '运维管理' }, { title: '备件库' }, { title: '备件库存' }] }),
+ React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalOpen(true); } }, '查看需求说明')
+ ),
+
+ React.createElement(Modal, {
+ title: '需求说明',
+ open: requirementModalOpen,
+ onCancel: function () { setRequirementModalOpen(false); },
+ width: 720,
+ footer: React.createElement(Button, { onClick: function () { setRequirementModalOpen(false); } }, '关闭'),
+ bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
+ }, React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6, color: 'rgba(0,0,0,0.85)' } }, requirementDocContent)),
+
+ React.createElement(Drawer, {
+ title: '新增物料信息',
+ placement: 'right',
+ width: 440,
+ open: addDrawerOpen,
+ onClose: handleAddDrawerClose,
+ destroyOnClose: true,
+ footer: React.createElement('div', { style: { textAlign: 'right' } },
+ React.createElement(Button, { onClick: handleAddDrawerClose, style: { marginRight: 8 } }, '取消'),
+ React.createElement(Button, { type: 'primary', onClick: handleAddDrawerSubmit }, '确定')
+ )
+ },
+ React.createElement(Form, {
+ form: addForm,
+ layout: 'vertical',
+ preserve: false
+ },
+ React.createElement(Form.Item, {
+ name: 'spareCode',
+ label: '备件编码',
+ rules: [{ required: true, message: '请输入备件编码' }]
+ }, React.createElement(Input, { placeholder: '请输入备件编码', allowClear: true })),
+ React.createElement(Form.Item, {
+ name: 'spareName',
+ label: '备件名称',
+ rules: [{ required: true, message: '请输入备件名称' }]
+ }, React.createElement(Input, { placeholder: '请输入备件名称', allowClear: true })),
+ React.createElement(Form.Item, {
+ name: 'unit',
+ label: '计算单位',
+ rules: [{ required: true, message: '请输入计算单位' }]
+ }, React.createElement(Input, { placeholder: '请输入计算单位', allowClear: true })),
+ React.createElement(Form.Item, {
+ name: 'vehicleModels',
+ label: '适配车型',
+ rules: [{ required: true, message: '请选择适配车型', type: 'array', min: 1 }]
+ }, React.createElement(Select, {
+ mode: 'multiple',
+ placeholder: '请选择车型（可多选，选项含关联型号）',
+ allowClear: true,
+ options: addDrawerVehicleOptions,
+ showSearch: true,
+ filterOption: filterOption,
+ maxTagCount: 'responsive'
+ })),
+ React.createElement(Form.Item, {
+ name: 'alertThreshold',
+ label: '告警阈值',
+ extra: React.createElement('span', { style: { color: 'rgba(0,0,0,0.45)', fontSize: 12 } }, '备件库存低于阈值会推送提示用户')
+ }, React.createElement(Input, { placeholder: '请设置备件告警阈值', allowClear: true }))
+ )
+ ),
+
+ mainTab === 'stock' ? React.createElement(Card, { style: { marginBottom: 16 } },
+ React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
+ React.createElement('div', { style: filterItemStyle },
+ React.createElement('div', { style: filterLabelStyle }, '仓库名称'),
+ React.createElement(Select, {
+ placeholder: '请输入或选择仓库名称',
+ style: filterControlStyle,
+ value: draft.warehouseName,
+ onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { warehouseName: v }); }); },
+ allowClear: true,
+ showSearch: true,
+ options: warehouseNameOptions,
+ filterOption: filterOption
+ })
+ ),
+ React.createElement('div', { style: filterItemStyle },
+ React.createElement('div', { style: filterLabelStyle }, '备件编码'),
+ React.createElement(Select, {
+ placeholder: '请输入或选择备件编码',
+ style: filterControlStyle,
+ value: draft.spareCode,
+ onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { spareCode: v }); }); },
+ allowClear: true,
+ showSearch: true,
+ options: spareCodeOptions,
+ filterOption: filterOption
+ })
+ ),
+ React.createElement('div', { style: filterItemStyle },
+ React.createElement('div', { style: filterLabelStyle }, '备件名称'),
+ React.createElement(Select, {
+ placeholder: '请输入或选择备件名称',
+ style: filterControlStyle,
+ value: draft.spareName,
+ onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { spareName: v }); }); },
+ allowClear: true,
+ showSearch: true,
+ options: spareNameOptions,
+ filterOption: filterOption
+ })
+ ),
+ React.createElement('div', { style: filterItemStyle },
+ React.createElement('div', { style: filterLabelStyle }, '适配车型'),
+ React.createElement(Select, {
+ mode: 'multiple',
+ placeholder: '请选择型号（可多选）',
+ style: filterControlStyle,
+ value: draft.vehicleModels,
+ onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { vehicleModels: v || [] }); }); },
+ allowClear: true,
+ options: allVehicleModelOptions,
+ maxTagCount: 'responsive'
+ })
+ )
+ ),
+ React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 16 } },
+ React.createElement(Button, { onClick: handleReset }, '重置'),
+ React.createElement(Button, { type: 'primary', onClick: handleQuery }, '查询')
+ )
+ ) : null,
+
+ React.createElement('style', null, tabsAlignStyle),
+ React.createElement(Tabs, {
+ className: 'spare-stock-main-tabs',
+ activeKey: mainTab,
+ onChange: setMainTab,
+ items: tabItems,
+ destroyInactiveTabPane: false,
+ tabBarExtraContent: mainTab === 'stock'
+ ? React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
+ React.createElement(Button, { type: 'primary', onClick: handleAdd }, '新增物料信息'),
+ React.createElement(Button, { onClick: handleExport }, '导出')
+ )
+ : null,
+ tabBarStyle: { marginBottom: 0 }
+ })
+ );
+};
diff --git a/web端/运维管理/车辆业务/异动管理-查看.jsx b/web端/运维管理/车辆业务/异动管理-查看.jsx
index f1f3464..98225d7 100644
--- a/web端/运维管理/车辆业务/异动管理-查看.jsx
+++ b/web端/运维管理/车辆业务/异动管理-查看.jsx
@@ -1,5 +1,5 @@
// 【重要】必须使用 const Component 作为组件变量名
-// 运维管理 - 车辆业务 - 异动管理 - 查看（只读）
+// 运维管理 - 车辆业务 - 异动管理 - 查看（布局对齐「结束异动」，全部只读）
const Component = function () {
var useState = React.useState;
@@ -27,10 +27,25 @@ const Component = function () {
return null;
}
- var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
+ function fmtPlannedMileage(v) {
+ if (v == null || v === '') return '-';
+ var n = Number(v);
+ if (isNaN(n)) return String(v);
+ return n.toFixed(2);
+ }
+
+ function fmtNum2Display(v) {
+ if (v === null || v === undefined || v === '') return '';
+ var n = Number(v);
+ if (isNaN(n)) return String(v);
+ return n.toFixed(2);
+ }
+
+ var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh', paddingBottom: 80 };
var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
var formItemStyle = { marginBottom: 12 };
var controlStyle = { width: '100%' };
+ var placeholderSelectVehicle = '请先选择车辆';
var destinationTypeOptions = useMemo(function () {
return [
@@ -40,24 +55,6 @@ const Component = function () {
];
}, []);
- var destinationParkingOptions = useMemo(function () {
- return [
- { value: '天河智慧停车场', label: '天河智慧停车场' },
- { value: '南山科技园停车场', label: '南山科技园停车场' },
- { value: '西湖景区停车场', label: '西湖景区停车场' },
- { value: '宁波江北停车场', label: '宁波江北停车场' },
- { value: '张江园区停车场', label: '张江园区停车场' }
- ];
- }, []);
-
- var destinationRepairOptions = useMemo(function () {
- return [
- { value: '杭州拱墅维修站', label: '杭州拱墅维修站' },
- { value: '广州天河维修站', label: '广州天河维修站' },
- { value: '上海浦东维修站', label: '上海浦东维修站' }
- ];
- }, []);
-
var changeTypeOptions = useMemo(function () {
return [
{ value: '维修', label: '维修' },
@@ -77,77 +74,47 @@ const Component = function () {
];
}, []);
- // 原型：详情接口返回的只读数据（字段与「异动管理.新增」一致，并含审批状态）
- var form = {
- startTime: getInitialDateTime('2026-02-20 09:30'),
- plannedEndTime: getInitialDateTime('2026-02-22 18:00'),
- destinationType: '维修站',
- destinationName: '广州天河维修站',
- destinationNameOther: '',
- changeType: '维修',
- plannedMileageKm: '45.50',
- remark: '车辆需进站检修制动系统，预计两日内完成。',
- approvalStatus: '审批中'
- };
+ // 原型：详情接口返回（联调时由路由/接口填充）；字段布局对齐「结束异动」
+ var movementReadonly = useMemo(function () {
+ return {
+ startTime: getInitialDateTime('2026-02-20 09:30'),
+ plannedEndTime: getInitialDateTime('2026-02-22 18:00'),
+ destinationType: '维修站',
+ destinationName: '广州天河维修站',
+ changeType: '维修',
+ plannedMileageKm: '45.50',
+ remark: '车辆需进站检修制动系统，预计两日内完成。',
+ approvalStatus: '审批中',
+ endDateTime: getInitialDateTime('2026-02-22 17:45')
+ };
+ }, []);
- var vehicles = [
- {
- id: 1,
- plateNo: '粤A12345',
- vehicleType: '厢式货车',
- brand: '东风',
- model: 'DFH1180',
- departParking: '天河智慧停车场',
- startMileageKm: '15230.12',
- startHydrogen: '28.30',
- h2Unit: 'MPa',
- startElectricKwh: '68.40'
- },
- {
- id: 2,
- plateNo: '浙A11111',
- vehicleType: 'SUV',
- brand: '小鹏',
- model: 'P7',
- departParking: '西湖景区停车场',
- startMileageKm: '12010.00',
- startHydrogen: '60.00',
- h2Unit: '%',
- startElectricKwh: '55.20'
- }
- ];
+ // 查看页仅展示单辆车（1 条记录；联调时详情接口按单车辆返回）
+ var vehicles = useMemo(function () {
+ return [
+ {
+ id: 1,
+ plateNo: '粤A12345',
+ vehicleType: '厢式货车',
+ brand: '东风',
+ model: 'DFH1180',
+ departParking: '天河智慧停车场',
+ startMileageKm: '15230.12',
+ startHydrogen: '28.30',
+ h2Unit: 'MPa',
+ startElectricKwh: '68.40',
+ endMileageKm: '15280.55',
+ endHydrogen: '26.80',
+ endElectricKwh: '70.00'
+ }
+ ];
+ }, []);
- var destinationNameLabel = form.destinationType === '维修站' ? '维修站' : (form.destinationType === '停车场' ? '停车场' : '目的地名称');
+ function rowVehicleSelected(r) {
+ return !!(r && String(r.plateNo || '').trim());
+ }
- var destinationNameNode = (function () {
- if (form.destinationType === '其他') {
- return React.createElement(Input, {
- value: form.destinationNameOther || '-',
- disabled: true
- });
- }
- var opts = form.destinationType === '维修站' ? destinationRepairOptions : destinationParkingOptions;
- return React.createElement(Select, {
- style: controlStyle,
- value: form.destinationName,
- options: opts,
- disabled: true
- });
- })();
-
- var requirementModalState = useState(false);
- var requirementModalOpen = requirementModalState[0];
- var setRequirementModalOpen = requirementModalState[1];
-
- var requirementDocContent = [
- '一个「数字化资产ONEOS运管平台」中的「异动管理」「查看」模块',
- '#面包屑：运维管理-车辆业务-异动管理-查看',
- '页面布局与字段与「异动管理.新增」一致，所有表单项均为只读，仅供查询展示。',
- '',
- '1.异动情况：异动开始/预计结束日期、审批状态、异动目的地、目的地名称、异动类型、预计异动里程、备注 — 全部禁用不可编辑。',
- '2.车辆信息：车牌号、车辆类型、品牌、型号、出发停车场、异动开始里程、异动开始氢量、异动开始电量 — 全部禁用；无新增行与删除操作。',
- '3.底部仅提供「返回」按钮，返回异动管理列表（原型）。'
- ].join('\n');
+ var destLabel = movementReadonly.destinationType === '维修站' ? '维修站名称' : (movementReadonly.destinationType === '停车场' ? '停车场名称' : '目的地名称');
var vehicleColumns = useMemo(function () {
return [
@@ -155,6 +122,7 @@ const Component = function () {
title: '车牌号',
key: 'plateNo',
width: 140,
+ fixed: 'left',
render: function (_, r) {
return React.createElement(Input, { value: r.plateNo || '-', disabled: true });
}
@@ -164,7 +132,7 @@ const Component = function () {
key: 'vehicleType',
width: 120,
render: function (_, r) {
- return React.createElement(Input, { value: r.vehicleType || '-', disabled: true });
+ return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.vehicleType || '-') : '请先选择车辆', disabled: true });
}
},
{
@@ -172,7 +140,7 @@ const Component = function () {
key: 'brand',
width: 100,
render: function (_, r) {
- return React.createElement(Input, { value: r.brand || '-', disabled: true });
+ return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.brand || '-') : '请先选择车辆', disabled: true });
}
},
{
@@ -180,7 +148,7 @@ const Component = function () {
key: 'model',
width: 120,
render: function (_, r) {
- return React.createElement(Input, { value: r.model || '-', disabled: true });
+ return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.model || '-') : '请先选择车辆', disabled: true });
}
},
{
@@ -188,7 +156,7 @@ const Component = function () {
key: 'departParking',
width: 160,
render: function (_, r) {
- return React.createElement(Input, { value: r.departParking || '-', disabled: true });
+ return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.departParking || '-') : '请先选择车辆', disabled: true });
}
},
{
@@ -196,7 +164,27 @@ const Component = function () {
key: 'startMileageKm',
width: 160,
render: function (_, r) {
- return React.createElement(Input, { value: r.startMileageKm || '-', disabled: true, addonAfter: 'km' });
+ return React.createElement(Input, {
+ value: rowVehicleSelected(r) ? fmtNum2Display(r.startMileageKm) : '',
+ disabled: true,
+ addonAfter: 'km',
+ placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
+ });
+ }
+ },
+ {
+ title: '异动结束里程',
+ key: 'endMileageKm',
+ width: 160,
+ render: function (_, r) {
+ if (!rowVehicleSelected(r)) {
+ return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
+ }
+ return React.createElement(Input, {
+ value: fmtNum2Display(r.endMileageKm),
+ disabled: true,
+ addonAfter: 'km'
+ });
}
},
{
@@ -204,8 +192,27 @@ const Component = function () {
key: 'startHydrogen',
width: 150,
render: function (_, r) {
+ var unit = rowVehicleSelected(r) ? (r.h2Unit || '') : '';
+ return React.createElement(Input, Object.assign({
+ value: rowVehicleSelected(r) ? fmtNum2Display(r.startHydrogen) : '',
+ disabled: true,
+ placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
+ }, unit ? { addonAfter: unit } : {}));
+ }
+ },
+ {
+ title: '异动结束氢量',
+ key: 'endHydrogen',
+ width: 150,
+ render: function (_, r) {
+ if (!rowVehicleSelected(r)) {
+ return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
+ }
var unit = r.h2Unit || '';
- return React.createElement(Input, { value: r.startHydrogen || '-', disabled: true, addonAfter: unit || '-' });
+ return React.createElement(Input, Object.assign({
+ value: fmtNum2Display(r.endHydrogen),
+ disabled: true
+ }, unit ? { addonAfter: unit } : {}));
}
},
{
@@ -213,12 +220,47 @@ const Component = function () {
key: 'startElectricKwh',
width: 150,
render: function (_, r) {
- return React.createElement(Input, { value: r.startElectricKwh || '-', disabled: true, addonAfter: 'kWh' });
+ return React.createElement(Input, {
+ value: rowVehicleSelected(r) ? fmtNum2Display(r.startElectricKwh) : '',
+ disabled: true,
+ addonAfter: 'kWh',
+ placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
+ });
+ }
+ },
+ {
+ title: '异动结束电量',
+ key: 'endElectricKwh',
+ width: 150,
+ render: function (_, r) {
+ if (!rowVehicleSelected(r)) {
+ return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
+ }
+ return React.createElement(Input, {
+ value: fmtNum2Display(r.endElectricKwh),
+ disabled: true,
+ addonAfter: 'kWh'
+ });
}
}
];
}, []);
+ var requirementModalState = useState(false);
+ var requirementModalOpen = requirementModalState[0];
+ var setRequirementModalOpen = requirementModalState[1];
+
+ var requirementDocContent = [
+ '一个「数字化资产ONEOS运管平台」中的「异动管理」「查看」模块',
+ '#面包屑：运维管理-车辆业务-异动管理-查看',
+ '页面布局与字段与「异动管理-结束异动」一致；另含「审批状态」只读展示。',
+ '所有表单项、表格单元均为禁用只读，仅供查询展示。',
+ '',
+ '1.异动情况：异动开始/预计结束日期、异动目的地、目的地名称、异动类型、预计异动里程、审批状态、异动结束时间、备注 — 全部只读。',
+ '2.车辆信息：与结束异动表列一致（含异动结束里程/氢量/电量）；仅展示单辆车（表格 1 行）— 全部只读；无新增行与删除。',
+ '3.底部仅「返回」按钮，返回异动管理列表（原型）。'
+ ].join('\n');
+
return React.createElement(App, null,
React.createElement('div', { style: layoutStyle },
React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 8 } },
@@ -243,7 +285,7 @@ const Component = function () {
style: controlStyle,
showTime: { format: 'HH:mm' },
format: 'YYYY-MM-DD HH:mm',
- value: form.startTime,
+ value: movementReadonly.startTime,
disabled: true,
inputReadOnly: true
})
@@ -254,59 +296,67 @@ const Component = function () {
style: controlStyle,
showTime: { format: 'HH:mm' },
format: 'YYYY-MM-DD HH:mm',
- value: form.plannedEndTime,
+ value: movementReadonly.plannedEndTime,
disabled: true,
inputReadOnly: true
})
),
+ React.createElement('div', { style: formItemStyle },
+ React.createElement('div', { style: labelStyle }, '异动目的地'),
+ React.createElement(Select, {
+ style: controlStyle,
+ value: movementReadonly.destinationType,
+ options: destinationTypeOptions,
+ disabled: true
+ })
+ ),
+ React.createElement('div', { style: formItemStyle },
+ React.createElement('div', { style: labelStyle }, destLabel),
+ React.createElement(Input, { value: movementReadonly.destinationName || '-', disabled: true })
+ ),
+ React.createElement('div', { style: formItemStyle },
+ React.createElement('div', { style: labelStyle }, '异动类型'),
+ React.createElement(Select, {
+ style: controlStyle,
+ value: movementReadonly.changeType,
+ options: changeTypeOptions,
+ disabled: true
+ })
+ ),
+ React.createElement('div', { style: formItemStyle },
+ React.createElement('div', { style: labelStyle }, '预计异动里程'),
+ React.createElement(Input, {
+ value: fmtPlannedMileage(movementReadonly.plannedMileageKm),
+ disabled: true,
+ addonAfter: 'km'
+ })
+ ),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '审批状态'),
React.createElement(Select, {
style: controlStyle,
- value: form.approvalStatus,
+ value: movementReadonly.approvalStatus,
options: approvalStatusOptions,
disabled: true
})
),
-
+ React.createElement('div', { style: formItemStyle }),
+ React.createElement('div', { style: formItemStyle }),
React.createElement('div', { style: formItemStyle },
- React.createElement('div', { style: labelStyle }, '异动目的地'),
- React.createElement(Select, {
+ React.createElement('div', { style: labelStyle }, '异动结束时间'),
+ React.createElement(DatePicker, {
style: controlStyle,
- value: form.destinationType,
- options: destinationTypeOptions,
- disabled: true
- })
- ),
- React.createElement('div', { style: formItemStyle },
- React.createElement('div', { style: labelStyle }, destinationNameLabel),
- destinationNameNode
- ),
- React.createElement('div', { style: formItemStyle },
- React.createElement('div', { style: labelStyle }, '异动类型'),
- React.createElement(Select, {
- style: controlStyle,
- value: form.changeType,
- options: changeTypeOptions,
- disabled: true
- })
- ),
-
- React.createElement('div', { style: formItemStyle },
- React.createElement('div', { style: labelStyle }, '预计异动里程'),
- React.createElement(Input, {
- value: form.plannedMileageKm || '-',
+ showTime: { format: 'HH:mm' },
+ format: 'YYYY-MM-DD HH:mm',
+ value: movementReadonly.endDateTime,
disabled: true,
- addonAfter: 'km'
+ inputReadOnly: true
})
),
- React.createElement('div', { style: formItemStyle }),
- React.createElement('div', { style: formItemStyle }),
-
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
React.createElement('div', { style: labelStyle }, '备注'),
React.createElement(Input.TextArea, {
- value: form.remark || '-',
+ value: movementReadonly.remark || '-',
disabled: true,
autoSize: { minRows: 3, maxRows: 6 }
})
@@ -321,11 +371,10 @@ const Component = function () {
dataSource: vehicles,
size: 'small',
pagination: false,
- scroll: { x: 1180 }
+ scroll: { x: 1780 }
})
),
- React.createElement('div', { style: { height: 56 } }),
React.createElement('div', {
style: {
position: 'fixed',
diff --git a/web端/运维管理/车辆业务/异动管理-结束异动.jsx b/web端/运维管理/车辆业务/异动管理-结束异动.jsx
new file mode 100644
index 0000000..d3c226b
--- /dev/null
+++ b/web端/运维管理/车辆业务/异动管理-结束异动.jsx
@@ -0,0 +1,464 @@
+// 【重要】必须使用 const Component 作为组件变量名
+// 运维管理 - 车辆业务 - 异动管理 - 结束异动
+
+const Component = function () {
+ var useState = React.useState;
+ var useMemo = React.useMemo;
+ var useCallback = React.useCallback;
+
+ var antd = window.antd;
+ var App = antd.App;
+ var Breadcrumb = antd.Breadcrumb;
+ var Card = antd.Card;
+ var Button = antd.Button;
+ var Input = antd.Input;
+ var Select = antd.Select;
+ var DatePicker = antd.DatePicker;
+ var Table = antd.Table;
+ var Modal = antd.Modal;
+ var message = antd.message;
+
+ function getInitialDateTime(str) {
+ try {
+ if (window.dayjs) return window.dayjs(str);
+ } catch (e1) {}
+ try {
+ if (window.moment) return window.moment(str, 'YYYY-MM-DD HH:mm');
+ } catch (e2) {}
+ return null;
+ }
+
+ function fmtPlannedMileage(v) {
+ if (v == null || v === '') return '-';
+ var n = Number(v);
+ if (isNaN(n)) return String(v);
+ return n.toFixed(2);
+ }
+
+ function fmtNum2Display(v) {
+ if (v === null || v === undefined || v === '') return '';
+ var n = Number(v);
+ if (isNaN(n)) return String(v);
+ return n.toFixed(2);
+ }
+
+ function toFixed2Input(v) {
+ var s = String(v === null || v === undefined ? '' : v);
+ s = s.replace(/[^\d.]/g, '');
+ var firstDot = s.indexOf('.');
+ if (firstDot >= 0) {
+ s = s.slice(0, firstDot + 1) + s.slice(firstDot + 1).replace(/\./g, '');
+ }
+ if (firstDot >= 0) {
+ var a = s.split('.');
+ s = a[0] + '.' + (a[1] || '').slice(0, 2);
+ }
+ return s;
+ }
+
+ var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh', paddingBottom: 80 };
+ var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
+ var formItemStyle = { marginBottom: 12 };
+ var controlStyle = { width: '100%' };
+ var placeholderSelectVehicle = '请先选择车辆';
+ var requiredMarkStyle = { color: '#ff4d4f', marginRight: 4, fontFamily: 'SimSun, sans-serif' };
+
+ function labelWithRequired(text, required) {
+ return React.createElement('div', { style: labelStyle },
+ required ? React.createElement('span', { style: requiredMarkStyle }, '*') : null,
+ text
+ );
+ }
+
+ var destinationTypeOptions = useMemo(function () {
+ return [
+ { value: '停车场', label: '停车场' },
+ { value: '维修站', label: '维修站' },
+ { value: '其他', label: '其他' }
+ ];
+ }, []);
+
+ var changeTypeOptions = useMemo(function () {
+ return [
+ { value: '维修', label: '维修' },
+ { value: '保养', label: '保养' },
+ { value: '年审', label: '年审' },
+ { value: '其他', label: '其他' }
+ ];
+ }, []);
+
+ // 原型：从列表跳转带入的异动与车辆（联调时由路由/接口填充）
+ var movementReadonly = useMemo(function () {
+ return {
+ startTime: getInitialDateTime('2026-02-24 08:15'),
+ plannedEndTime: getInitialDateTime('2026-02-24 12:00'),
+ destinationType: '其他',
+ destinationName: '车管所检测线',
+ changeType: '年审',
+ plannedMileageKm: '8.20',
+ remark: '年审上线检测，预计半日完成。'
+ };
+ }, []);
+
+ // 车辆信息：结束里程/氢量/电量可编辑（规则同新增页开始三项）
+ var vehiclesState = useState([
+ {
+ id: 1,
+ plateNo: '粤B11111',
+ vehicleType: '轿车',
+ brand: '比亚迪',
+ model: '汉',
+ departParking: '南山科技园停车场',
+ startMileageKm: '8020.50',
+ startHydrogen: '55.00',
+ h2Unit: '%',
+ startElectricKwh: '62.10',
+ endMileageKm: '8055.20',
+ endHydrogen: '52.30',
+ endElectricKwh: '58.88'
+ }
+ ]);
+ var vehicles = vehiclesState[0];
+ var setVehicles = vehiclesState[1];
+
+ var updateVehicleRow = useCallback(function (index, patch) {
+ setVehicles(function (prev) {
+ var list = prev.slice();
+ var cur = list[index] || {};
+ list[index] = Object.assign({}, cur, patch);
+ return list;
+ });
+ }, []);
+
+ // 1.7 异动结束时间：必填，YYYY-MM-DD HH:mm
+ var endDateTimeState = useState(getInitialDateTime('2026-02-24 11:30'));
+ var endDateTime = endDateTimeState[0];
+ var setEndDateTime = endDateTimeState[1];
+
+ function rowVehicleSelected(r) {
+ return !!(r && String(r.plateNo || '').trim());
+ }
+
+ var vehicleColumns = useMemo(function () {
+ return [
+ {
+ title: '车牌号',
+ key: 'plateNo',
+ width: 140,
+ fixed: 'left',
+ render: function (_, r) {
+ return React.createElement(Input, { value: r.plateNo || '-', disabled: true });
+ }
+ },
+ {
+ title: '车辆类型',
+ key: 'vehicleType',
+ width: 120,
+ render: function (_, r) {
+ return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.vehicleType || '-') : '请先选择车辆', disabled: true });
+ }
+ },
+ {
+ title: '品牌',
+ key: 'brand',
+ width: 100,
+ render: function (_, r) {
+ return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.brand || '-') : '请先选择车辆', disabled: true });
+ }
+ },
+ {
+ title: '型号',
+ key: 'model',
+ width: 120,
+ render: function (_, r) {
+ return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.model || '-') : '请先选择车辆', disabled: true });
+ }
+ },
+ {
+ title: '出发停车场',
+ key: 'departParking',
+ width: 160,
+ render: function (_, r) {
+ return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.departParking || '-') : '请先选择车辆', disabled: true });
+ }
+ },
+ {
+ title: '异动开始里程',
+ key: 'startMileageKm',
+ width: 160,
+ render: function (_, r) {
+ return React.createElement(Input, {
+ value: rowVehicleSelected(r) ? fmtNum2Display(r.startMileageKm) : '',
+ disabled: true,
+ addonAfter: 'km',
+ placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
+ });
+ }
+ },
+ {
+ title: React.createElement('span', null, React.createElement('span', { style: requiredMarkStyle }, '*'), '异动结束里程'),
+ key: 'endMileageKm',
+ width: 160,
+ render: function (_, r, index) {
+ if (!rowVehicleSelected(r)) {
+ return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
+ }
+ return React.createElement(Input, {
+ value: r.endMileageKm,
+ onChange: function (e) { updateVehicleRow(index, { endMileageKm: toFixed2Input(e.target.value) }); },
+ placeholder: '0.00',
+ addonAfter: 'km'
+ });
+ }
+ },
+ {
+ title: '异动开始氢量',
+ key: 'startHydrogen',
+ width: 150,
+ render: function (_, r) {
+ var unit = rowVehicleSelected(r) ? (r.h2Unit || '') : '';
+ return React.createElement(Input, Object.assign({
+ value: rowVehicleSelected(r) ? fmtNum2Display(r.startHydrogen) : '',
+ disabled: true,
+ placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
+ }, unit ? { addonAfter: unit } : {}));
+ }
+ },
+ {
+ title: React.createElement('span', null, React.createElement('span', { style: requiredMarkStyle }, '*'), '异动结束氢量'),
+ key: 'endHydrogen',
+ width: 150,
+ render: function (_, r, index) {
+ if (!rowVehicleSelected(r)) {
+ return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
+ }
+ var unit = r.h2Unit || '';
+ return React.createElement(Input, Object.assign({
+ value: r.endHydrogen,
+ onChange: function (e) { updateVehicleRow(index, { endHydrogen: toFixed2Input(e.target.value) }); },
+ placeholder: '0.00'
+ }, unit ? { addonAfter: unit } : {}));
+ }
+ },
+ {
+ title: '异动开始电量',
+ key: 'startElectricKwh',
+ width: 150,
+ render: function (_, r) {
+ return React.createElement(Input, {
+ value: rowVehicleSelected(r) ? fmtNum2Display(r.startElectricKwh) : '',
+ disabled: true,
+ addonAfter: 'kWh',
+ placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
+ });
+ }
+ },
+ {
+ title: React.createElement('span', null, React.createElement('span', { style: requiredMarkStyle }, '*'), '异动结束电量'),
+ key: 'endElectricKwh',
+ width: 150,
+ render: function (_, r, index) {
+ if (!rowVehicleSelected(r)) {
+ return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
+ }
+ return React.createElement(Input, {
+ value: r.endElectricKwh,
+ onChange: function (e) { updateVehicleRow(index, { endElectricKwh: toFixed2Input(e.target.value) }); },
+ placeholder: '0.00',
+ addonAfter: 'kWh'
+ });
+ }
+ }
+ ];
+ }, [updateVehicleRow]);
+
+ var requirementModalState = useState(false);
+ var requirementModalOpen = requirementModalState[0];
+ var setRequirementModalOpen = requirementModalState[1];
+
+ var requirementDocContent = [
+ '一个「数字化资产ONEOS运管平台」中的「异动管理」「结束异动」模块',
+ '#面包屑：运维管理-车辆业务-异动管理-结束异动',
+ '',
+ '1.异动情况：',
+ '1.1.异动开始日期：显示异动开始日期：YYYY-MM-DD HH:MM；',
+ '1.2.异动预计结束日期：显示异动预计结束日期，格式为：YYYY-MM-DD HH:MM；',
+ '1.3.异动目的地：显示异动目的地，包括：停车场、维修站、其他；',
+ '1.4.目的地名称：显示目的地名称，包括：停车场名称、维修站名称、其他；',
+ '1.5.异动类型：显示异动类型，包括：维修、保养、年审、其他；',
+ '1.6.预计异动里程：显示预计异动里程，支持2位小数，后缀为km；',
+ '1.7.异动结束时间：必填项，日期选择器，格式为：YYYY-MM-DD HH:MM；',
+ '1.8.备注：显示备注信息；',
+ '',
+ '2.车辆信息：',
+ '2.1.车牌号：输入框（禁用），显示车牌号；',
+ '2.2.车辆类型：根据所选车辆类型自动反写，默认提示为请先选择车辆；',
+ '2.3.品牌：根据所选车辆品牌自动反写，默认提示为请先选择车辆；',
+ '2.4.型号：根据所选车辆型号自动反写，默认提示为请先选择车辆；',
+ '2.5.出发停车场：根据所选车辆出发时停车场自动反写，默认提示为请先选择车辆；',
+ '2.6.异动开始里程：输入框（禁用），精确至2位小数，后缀为km；',
+ '2.7.异动结束里程：必填项，输入框，精确至2位小数，后缀为km；',
+ '2.8.异动开始氢量：输入框（禁用），精确至2位小数，后缀为%或MPa，根据所选车辆型号中获取；',
+ '2.9.异动结束氢量：必填项，输入框，精确至2位小数，后缀为%或MPa，根据所选车辆型号中获取；',
+ '2.10.异动开始电量：输入框（禁用），精确至2位小数，后缀为kWh；',
+ '2.11.异动结束电量：必填项，输入框，精确至2位小数，后缀为kWh；',
+ '2.12.异动结束电量：必填项，输入框，精确至2位小数，后缀为kWh；',
+ '',
+ '3.底部为提交、取消；',
+ '3.1.提交：提交进行必填项校验，提交成功后计入历史记录；',
+ '3.2.取消：点击取消，返回列表；'
+ ].join('\n');
+
+ var handleSubmit = useCallback(function () {
+ if (!endDateTime) {
+ message.error('请选择异动结束时间');
+ return;
+ }
+ for (var i = 0; i < (vehicles || []).length; i++) {
+ var r = vehicles[i];
+ if (!rowVehicleSelected(r)) continue;
+ if (!String(r.endMileageKm || '').trim()) {
+ message.error('请填写异动结束里程');
+ return;
+ }
+ if (!String(r.endHydrogen || '').trim()) {
+ message.error('请填写异动结束氢量');
+ return;
+ }
+ if (!String(r.endElectricKwh || '').trim()) {
+ message.error('请填写异动结束电量');
+ return;
+ }
+ }
+ message.success('提交成功（原型，联调时对接结束异动接口）');
+ }, [vehicles, endDateTime]);
+
+ var handleCancel = useCallback(function () {
+ message.info('取消并返回（原型，联调时路由返回上一页）');
+ }, []);
+
+ var destLabel = movementReadonly.destinationType === '维修站' ? '维修站名称' : (movementReadonly.destinationType === '停车场' ? '停车场名称' : '目的地名称');
+
+ return React.createElement(App, null,
+ React.createElement('div', { style: layoutStyle },
+ React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 8 } },
+ React.createElement(Breadcrumb, { items: [{ title: '运维管理' }, { title: '车辆业务' }, { title: '异动管理' }, { title: '结束异动' }] }),
+ React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalOpen(true); } }, '查看需求说明')
+ ),
+
+ React.createElement(Modal, {
+ title: '需求说明',
+ open: requirementModalOpen,
+ onCancel: function () { setRequirementModalOpen(false); },
+ width: 720,
+ footer: React.createElement(Button, { onClick: function () { setRequirementModalOpen(false); } }, '关闭'),
+ bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
+ }, React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6, color: 'rgba(0,0,0,0.85)' } }, requirementDocContent)),
+
+ React.createElement(Card, { title: '异动情况', style: { marginBottom: 16 } },
+ React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
+ React.createElement('div', { style: formItemStyle },
+ React.createElement('div', { style: labelStyle }, '异动开始日期'),
+ React.createElement(DatePicker, {
+ style: controlStyle,
+ showTime: { format: 'HH:mm' },
+ format: 'YYYY-MM-DD HH:mm',
+ value: movementReadonly.startTime,
+ disabled: true,
+ inputReadOnly: true
+ })
+ ),
+ React.createElement('div', { style: formItemStyle },
+ React.createElement('div', { style: labelStyle }, '异动预计结束日期'),
+ React.createElement(DatePicker, {
+ style: controlStyle,
+ showTime: { format: 'HH:mm' },
+ format: 'YYYY-MM-DD HH:mm',
+ value: movementReadonly.plannedEndTime,
+ disabled: true,
+ inputReadOnly: true
+ })
+ ),
+ React.createElement('div', { style: formItemStyle },
+ React.createElement('div', { style: labelStyle }, '异动目的地'),
+ React.createElement(Select, {
+ style: controlStyle,
+ value: movementReadonly.destinationType,
+ options: destinationTypeOptions,
+ disabled: true
+ })
+ ),
+ React.createElement('div', { style: formItemStyle },
+ React.createElement('div', { style: labelStyle }, destLabel),
+ React.createElement(Input, { value: movementReadonly.destinationName || '-', disabled: true })
+ ),
+ React.createElement('div', { style: formItemStyle },
+ React.createElement('div', { style: labelStyle }, '异动类型'),
+ React.createElement(Select, {
+ style: controlStyle,
+ value: movementReadonly.changeType,
+ options: changeTypeOptions,
+ disabled: true
+ })
+ ),
+ React.createElement('div', { style: formItemStyle },
+ React.createElement('div', { style: labelStyle }, '预计异动里程'),
+ React.createElement(Input, {
+ value: fmtPlannedMileage(movementReadonly.plannedMileageKm),
+ disabled: true,
+ addonAfter: 'km'
+ })
+ ),
+ React.createElement('div', { style: formItemStyle },
+ labelWithRequired('异动结束时间', true),
+ React.createElement(DatePicker, {
+ style: controlStyle,
+ showTime: { format: 'HH:mm' },
+ format: 'YYYY-MM-DD HH:mm',
+ value: endDateTime,
+ onChange: function (d) { setEndDateTime(d); },
+ placeholder: '请选择异动结束时间'
+ })
+ ),
+ React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
+ React.createElement('div', { style: labelStyle }, '备注'),
+ React.createElement(Input.TextArea, {
+ value: movementReadonly.remark || '-',
+ disabled: true,
+ autoSize: { minRows: 3, maxRows: 6 }
+ })
+ )
+ )
+ ),
+
+ React.createElement(Card, { title: '车辆信息', style: { marginBottom: 16 } },
+ React.createElement(Table, {
+ rowKey: 'id',
+ columns: vehicleColumns,
+ dataSource: vehicles,
+ size: 'small',
+ pagination: false,
+ scroll: { x: 1780 }
+ })
+ ),
+
+ React.createElement('div', {
+ style: {
+ position: 'fixed',
+ left: 0,
+ right: 0,
+ bottom: 0,
+ padding: '12px 24px',
+ background: '#fff',
+ borderTop: '1px solid #f0f0f0',
+ display: 'flex',
+ gap: 8,
+ zIndex: 10
+ }
+ },
+ React.createElement(Button, { type: 'primary', onClick: handleSubmit }, '提交'),
+ React.createElement(Button, { onClick: handleCancel }, '取消')
+ )
+ )
+ );
+};
diff --git a/web端/运维管理/车辆业务/异动管理-编辑.jsx b/web端/运维管理/车辆业务/异动管理-编辑.jsx
new file mode 100644
index 0000000..62e2969
--- /dev/null
+++ b/web端/运维管理/车辆业务/异动管理-编辑.jsx
@@ -0,0 +1,564 @@
+// 【重要】必须使用 const Component 作为组件变量名
+// 运维管理 - 车辆业务 - 异动管理 - 编辑
+
+const Component = function () {
+ var useState = React.useState;
+ var useMemo = React.useMemo;
+ var useCallback = React.useCallback;
+
+ var antd = window.antd;
+ var App = antd.App;
+ var Breadcrumb = antd.Breadcrumb;
+ var Card = antd.Card;
+ var Button = antd.Button;
+ var Input = antd.Input;
+ var Select = antd.Select;
+ var DatePicker = antd.DatePicker;
+ var Table = antd.Table;
+ var Modal = antd.Modal;
+ var message = antd.message;
+
+ function filterOption(input, option) {
+ var label = (option && (option.label || option.children)) || '';
+ return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
+ }
+
+ function toFixed2Input(v) {
+ var s = String(v === null || v === undefined ? '' : v);
+ s = s.replace(/[^\d.]/g, '');
+ var firstDot = s.indexOf('.');
+ if (firstDot >= 0) {
+ s = s.slice(0, firstDot + 1) + s.slice(firstDot + 1).replace(/\./g, '');
+ }
+ if (firstDot >= 0) {
+ var a = s.split('.');
+ s = a[0] + '.' + (a[1] || '').slice(0, 2);
+ }
+ return s;
+ }
+
+ var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
+ var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
+ var formItemStyle = { marginBottom: 12 };
+ var controlStyle = { width: '100%' };
+ var reqStarStyle = { color: '#ff4d4f', marginRight: 4 };
+ var reqStar = React.createElement('span', { style: reqStarStyle }, '*');
+
+ // 车辆表（用于车牌选择与反写）
+ var vehicleDb = useMemo(function () {
+ return [
+ { plateNo: '粤A12345', vehicleType: '厢式货车', brand: '东风', model: 'DFH1180', departParking: '天河智慧停车场', h2Unit: 'MPa' },
+ { plateNo: '粤B11111', vehicleType: '轿车', brand: '比亚迪', model: '汉', departParking: '南山科技园停车场', h2Unit: '%' },
+ { plateNo: '浙A11111', vehicleType: 'SUV', brand: '小鹏', model: 'P7', departParking: '西湖景区停车场', h2Unit: '%' },
+ { plateNo: '浙B22222', vehicleType: '轿车', brand: '蔚来', model: 'ET5', departParking: '宁波江北停车场', h2Unit: 'MPa' },
+ { plateNo: '沪A30003', vehicleType: '厢式货车', brand: '福田', model: 'BJ1180', departParking: '张江园区停车场', h2Unit: 'MPa' }
+ ];
+ }, []);
+
+ var plateOptions = useMemo(function () {
+ return vehicleDb.map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
+ }, [vehicleDb]);
+
+ var destinationTypeOptions = useMemo(function () {
+ return [
+ { value: '停车场', label: '停车场' },
+ { value: '维修站', label: '维修站' },
+ { value: '其他', label: '其他' }
+ ];
+ }, []);
+
+ var destinationParkingOptions = useMemo(function () {
+ return [
+ { value: '天河智慧停车场', label: '天河智慧停车场' },
+ { value: '南山科技园停车场', label: '南山科技园停车场' },
+ { value: '西湖景区停车场', label: '西湖景区停车场' },
+ { value: '宁波江北停车场', label: '宁波江北停车场' },
+ { value: '张江园区停车场', label: '张江园区停车场' }
+ ];
+ }, []);
+
+ var destinationRepairOptions = useMemo(function () {
+ return [
+ { value: '杭州拱墅维修站', label: '杭州拱墅维修站' },
+ { value: '广州天河维修站', label: '广州天河维修站' },
+ { value: '上海浦东维修站', label: '上海浦东维修站' }
+ ];
+ }, []);
+
+ var changeTypeOptions = useMemo(function () {
+ return [
+ { value: '维修', label: '维修' },
+ { value: '保养', label: '保养' },
+ { value: '年审', label: '年审' },
+ { value: '其他', label: '其他' }
+ ];
+ }, []);
+
+ var requirementModalState = useState(false);
+ var requirementModalOpen = requirementModalState[0];
+ var setRequirementModalOpen = requirementModalState[1];
+
+ var requirementDocContent = [
+ '一个「数字化资产ONEOS运管平台」中的「异动管理」「编辑」模块',
+ '#面包屑：运维管理-车辆业务-异动管理-编辑',
+ '',
+ '1.异动情况；',
+ '1.1.异动开始日期：必填项，日期选择器，格式为：YYYY-MM-DD HH:MM；',
+ '1.2.异动预计结束日期：必填项，日期选择器，格式为：YYYY-MM-DD HH:MM；',
+ '1.3.异动目的地：必填项，选择器，选项为：停车场、维修站、其他；',
+ '2.4.目的地名称：必填项，如异动目的地为停车场，则此处为停车场（选择器），如异动目的地为维修站，则此处为维修站（选择器），如异动目的地为其他，则此处为输入框（自定义输入）；',
+ '2.5.异动类型：必填项，选择器，选项为：维修、保养、年审、其他；',
+ '2.6.预计异动里程：输入框，支持2位小数输入，后缀为km；',
+ '2.7.备注：文本域，支持自定义输入；',
+ '',
+ '2.车辆信息：',
+ '2.1.车牌号：显示车牌号，支持输入框模糊搜索下拉匹配对应选项；',
+ '2.2.车辆类型：根据所选车辆类型自动反写，默认提示为请先选择车辆；',
+ '2.3.品牌：根据所选车辆品牌自动反写，默认提示为请先选择车辆；',
+ '2.4.型号：根据所选车辆型号自动反写，默认提示为请先选择车辆；',
+ '2.5.出发停车场：根据所选车辆出发时停车场自动反写，默认提示为请先选择车辆；',
+ '2.6.异动开始里程：必填项，输入框，精确至2位小数，后缀为km；',
+ '2.7.异动开始氢量：必填项，输入框，精确至2位小数，后缀为%或MPa，根据所选车辆型号中获取；',
+ '2.8.异动开始电量：必填项，输入框，精确至2位小数，后缀为kWh；',
+ '2.9.操作：删除；',
+ '2.10.新增一行：铺满整行；',
+ '',
+ '3.底部为提交审核、保存、取消；'
+ ].join('\n');
+
+ var formState = useState({
+ startTime: null,
+ plannedEndTime: null,
+ destinationType: undefined,
+ destinationName: undefined,
+ destinationNameOther: '',
+ changeType: undefined,
+ plannedMileageKm: '',
+ remark: ''
+ });
+ var form = formState[0];
+ var setForm = formState[1];
+
+ var errorsState = useState({});
+ var errors = errorsState[0];
+ var setErrors = errorsState[1];
+
+ var rowIdRef = React.useRef(2);
+ var vehiclesState = useState([
+ {
+ id: 1,
+ plateNo: undefined,
+ vehicleType: '',
+ brand: '',
+ model: '',
+ departParking: '',
+ h2Unit: '',
+ startMileageKm: '',
+ startHydrogen: '',
+ startElectricKwh: ''
+ }
+ ]);
+ var vehicles = vehiclesState[0];
+ var setVehicles = vehiclesState[1];
+
+ var updateForm = useCallback(function (patch) {
+ setForm(function (p) { return Object.assign({}, p, patch); });
+ }, []);
+
+ var updateRow = useCallback(function (index, patch) {
+ setVehicles(function (prev) {
+ var list = prev.slice();
+ var cur = list[index] || {};
+ list[index] = Object.assign({}, cur, patch);
+ return list;
+ });
+ }, []);
+
+ var handlePlateChange = useCallback(function (index, plateNo) {
+ var v = vehicleDb.find(function (x) { return x.plateNo === plateNo; });
+ updateRow(index, {
+ plateNo: plateNo,
+ vehicleType: v ? v.vehicleType : '',
+ brand: v ? v.brand : '',
+ model: v ? v.model : '',
+ departParking: v ? v.departParking : '',
+ h2Unit: v ? v.h2Unit : ''
+ });
+ }, [vehicleDb, updateRow]);
+
+ var addRow = useCallback(function () {
+ setVehicles(function (prev) {
+ return prev.concat([{
+ id: rowIdRef.current++,
+ plateNo: undefined,
+ vehicleType: '',
+ brand: '',
+ model: '',
+ departParking: '',
+ h2Unit: '',
+ startMileageKm: '',
+ startHydrogen: '',
+ startElectricKwh: ''
+ }]);
+ });
+ }, []);
+
+ var removeRow = useCallback(function (index) {
+ setVehicles(function (prev) {
+ var list = prev.slice();
+ list.splice(index, 1);
+ if (list.length === 0) {
+ return [{
+ id: rowIdRef.current++,
+ plateNo: undefined,
+ vehicleType: '',
+ brand: '',
+ model: '',
+ departParking: '',
+ h2Unit: '',
+ startMileageKm: '',
+ startHydrogen: '',
+ startElectricKwh: ''
+ }];
+ }
+ return list;
+ });
+ }, []);
+
+ function validate() {
+ var e = {};
+ if (!form.startTime) e.startTime = '请选择异动开始日期';
+ if (!form.plannedEndTime) e.plannedEndTime = '请选择异动预计结束日期';
+ if (!form.destinationType) e.destinationType = '请选择异动目的地';
+ if (form.destinationType === '其他') {
+ if (!String(form.destinationNameOther || '').trim()) e.destinationName = '请输入目的地名称';
+ } else {
+ if (!form.destinationName) e.destinationName = '请选择目的地名称';
+ }
+ if (!form.changeType) e.changeType = '请选择异动类型';
+
+ var effectiveRows = (vehicles || []).filter(function (r) { return r && String(r.plateNo || '').trim(); });
+ if (effectiveRows.length === 0) e.vehicleList = '请至少选择一辆车';
+
+ for (var i = 0; i < (vehicles || []).length; i++) {
+ var r = vehicles[i] || {};
+ if (!String(r.plateNo || '').trim()) continue;
+ if (!String(r.startMileageKm || '').trim()) e['row_' + i + '_startMileageKm'] = '请输入异动开始里程';
+ if (!String(r.startHydrogen || '').trim()) e['row_' + i + '_startHydrogen'] = '请输入异动开始氢量';
+ if (!String(r.startElectricKwh || '').trim()) e['row_' + i + '_startElectricKwh'] = '请输入异动开始电量';
+ }
+
+ setErrors(e);
+ return Object.keys(e).length === 0;
+ }
+
+ var handleSubmitAudit = useCallback(function () {
+ if (!validate()) {
+ message.error('请完善必填项后再提交');
+ return;
+ }
+ Modal.confirm({
+ title: '确认提交审核？',
+ content: '提交后将进入审批流程（原型）。',
+ okText: '提交审核',
+ cancelText: '取消',
+ onOk: function () {
+ message.success('已提交审核（原型）');
+ }
+ });
+ }, [form, vehicles]);
+
+ var handleSave = useCallback(function () {
+ message.info('已保存（原型，不做校验）');
+ }, []);
+
+ var handleCancel = useCallback(function () {
+ Modal.confirm({
+ title: '是否确认取消',
+ content: '取消将会丢失所有已填写内容，是否确认？',
+ okText: '确认',
+ cancelText: '取消',
+ onOk: function () {
+ message.info('返回异动管理列表页（原型）');
+ }
+ });
+ }, []);
+
+ // 目的地名称控件：随异动目的地变化
+ var destinationNameLabel = form.destinationType === '维修站' ? '维修站' : (form.destinationType === '停车场' ? '停车场' : '目的地名称');
+ var destinationNameNode = (function () {
+ if (form.destinationType === '其他') {
+ return React.createElement(Input, {
+ placeholder: '请输入目的地名称',
+ value: form.destinationNameOther,
+ onChange: function (e) { updateForm({ destinationNameOther: e.target.value }); },
+ status: errors.destinationName ? 'error' : undefined
+ });
+ }
+ var opts = form.destinationType === '维修站' ? destinationRepairOptions : destinationParkingOptions;
+ return React.createElement(Select, {
+ placeholder: '请选择' + destinationNameLabel,
+ style: controlStyle,
+ value: form.destinationName,
+ onChange: function (v) { updateForm({ destinationName: v }); },
+ allowClear: true,
+ showSearch: true,
+ options: opts,
+ filterOption: filterOption,
+ status: errors.destinationName ? 'error' : undefined,
+ disabled: !form.destinationType
+ });
+ })();
+
+ var vehicleColumns = useMemo(function () {
+ return [
+ {
+ title: React.createElement('span', null, reqStar, '车牌号'),
+ key: 'plateNo',
+ width: 140,
+ render: function (_, r, index) {
+ return React.createElement(Select, {
+ placeholder: '请输入或选择车牌号',
+ style: { width: '100%' },
+ value: r.plateNo,
+ onChange: function (v) { handlePlateChange(index, v); },
+ allowClear: true,
+ showSearch: true,
+ options: plateOptions,
+ filterOption: filterOption,
+ status: errors.vehicleList ? 'error' : undefined
+ });
+ }
+ },
+ {
+ title: '车辆类型',
+ key: 'vehicleType',
+ width: 120,
+ render: function (_, r) {
+ return React.createElement(Input, { value: r.vehicleType ? r.vehicleType : '请先选择车辆', disabled: true });
+ }
+ },
+ {
+ title: '品牌',
+ key: 'brand',
+ width: 100,
+ render: function (_, r) {
+ return React.createElement(Input, { value: r.brand ? r.brand : '请先选择车辆', disabled: true });
+ }
+ },
+ {
+ title: '型号',
+ key: 'model',
+ width: 120,
+ render: function (_, r) {
+ return React.createElement(Input, { value: r.model ? r.model : '请先选择车辆', disabled: true });
+ }
+ },
+ {
+ title: '出发停车场',
+ key: 'departParking',
+ width: 160,
+ render: function (_, r) {
+ return React.createElement(Input, { value: r.departParking ? r.departParking : '请先选择车辆', disabled: true });
+ }
+ },
+ {
+ title: React.createElement('span', null, reqStar, '异动开始里程'),
+ key: 'startMileageKm',
+ width: 160,
+ render: function (_, r, index) {
+ var k = 'row_' + index + '_startMileageKm';
+ return React.createElement(Input, {
+ value: r.startMileageKm,
+ onChange: function (e) { updateRow(index, { startMileageKm: toFixed2Input(e.target.value) }); },
+ placeholder: '0.00',
+ addonAfter: 'km',
+ status: errors[k] ? 'error' : undefined
+ });
+ }
+ },
+ {
+ title: React.createElement('span', null, reqStar, '异动开始氢量'),
+ key: 'startHydrogen',
+ width: 150,
+ render: function (_, r, index) {
+ var k = 'row_' + index + '_startHydrogen';
+ var unit = r.h2Unit || '%/MPa';
+ return React.createElement(Input, {
+ value: r.startHydrogen,
+ onChange: function (e) { updateRow(index, { startHydrogen: toFixed2Input(e.target.value) }); },
+ placeholder: '0.00',
+ addonAfter: unit,
+ status: errors[k] ? 'error' : undefined
+ });
+ }
+ },
+ {
+ title: React.createElement('span', null, reqStar, '异动开始电量'),
+ key: 'startElectricKwh',
+ width: 150,
+ render: function (_, r, index) {
+ var k = 'row_' + index + '_startElectricKwh';
+ return React.createElement(Input, {
+ value: r.startElectricKwh,
+ onChange: function (e) { updateRow(index, { startElectricKwh: toFixed2Input(e.target.value) }); },
+ placeholder: '0.00',
+ addonAfter: 'kWh',
+ status: errors[k] ? 'error' : undefined
+ });
+ }
+ },
+ {
+ title: '操作',
+ key: 'action',
+ width: 80,
+ fixed: 'right',
+ render: function (_, __, index) {
+ return React.createElement(Button, { type: 'link', danger: true, size: 'small', onClick: function () { removeRow(index); } }, '删除');
+ }
+ }
+ ];
+ }, [plateOptions, errors, handlePlateChange, updateRow, removeRow]);
+
+ return React.createElement(App, null,
+ React.createElement('div', { style: layoutStyle },
+ React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 8 } },
+ React.createElement(Breadcrumb, { items: [{ title: '运维管理' }, { title: '车辆业务' }, { title: '异动管理' }, { title: '编辑' }] }),
+ React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalOpen(true); } }, '查看需求说明')
+ ),
+
+ React.createElement(Modal, {
+ title: '需求说明',
+ open: requirementModalOpen,
+ onCancel: function () { setRequirementModalOpen(false); },
+ width: 720,
+ footer: React.createElement(Button, { onClick: function () { setRequirementModalOpen(false); } }, '关闭'),
+ bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
+ }, React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6, color: 'rgba(0,0,0,0.85)' } }, requirementDocContent)),
+
+ React.createElement(Card, { title: '异动情况', style: { marginBottom: 16 } },
+ React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
+ React.createElement('div', { style: formItemStyle },
+ React.createElement('div', { style: labelStyle }, reqStar, '异动开始日期'),
+ React.createElement(DatePicker, {
+ style: controlStyle,
+ showTime: { format: 'HH:mm' },
+ format: 'YYYY-MM-DD HH:mm',
+ placeholder: '请选择异动开始日期',
+ value: form.startTime,
+ onChange: function (v) { updateForm({ startTime: v }); },
+ status: errors.startTime ? 'error' : undefined
+ }),
+ errors.startTime ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.startTime) : null
+ ),
+ React.createElement('div', { style: formItemStyle },
+ React.createElement('div', { style: labelStyle }, reqStar, '异动预计结束日期'),
+ React.createElement(DatePicker, {
+ style: controlStyle,
+ showTime: { format: 'HH:mm' },
+ format: 'YYYY-MM-DD HH:mm',
+ placeholder: '请选择异动预计结束日期',
+ value: form.plannedEndTime,
+ onChange: function (v) { updateForm({ plannedEndTime: v }); },
+ status: errors.plannedEndTime ? 'error' : undefined
+ }),
+ errors.plannedEndTime ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.plannedEndTime) : null
+ ),
+ React.createElement('div', { style: formItemStyle },
+ React.createElement('div', { style: labelStyle }, reqStar, '异动目的地'),
+ React.createElement(Select, {
+ placeholder: '请选择异动目的地',
+ style: controlStyle,
+ value: form.destinationType,
+ onChange: function (v) {
+ setForm(function (p) {
+ return Object.assign({}, p, {
+ destinationType: v,
+ destinationName: undefined,
+ destinationNameOther: ''
+ });
+ });
+ },
+ allowClear: true,
+ options: destinationTypeOptions,
+ status: errors.destinationType ? 'error' : undefined
+ }),
+ errors.destinationType ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.destinationType) : null
+ ),
+
+ React.createElement('div', { style: formItemStyle },
+ React.createElement('div', { style: labelStyle }, reqStar, destinationNameLabel),
+ destinationNameNode,
+ errors.destinationName ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.destinationName) : null
+ ),
+ React.createElement('div', { style: formItemStyle },
+ React.createElement('div', { style: labelStyle }, reqStar, '异动类型'),
+ React.createElement(Select, {
+ placeholder: '请选择异动类型',
+ style: controlStyle,
+ value: form.changeType,
+ onChange: function (v) { updateForm({ changeType: v }); },
+ allowClear: true,
+ options: changeTypeOptions,
+ status: errors.changeType ? 'error' : undefined
+ }),
+ errors.changeType ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.changeType) : null
+ ),
+ React.createElement('div', { style: formItemStyle },
+ React.createElement('div', { style: labelStyle }, '预计异动里程'),
+ React.createElement(Input, {
+ placeholder: '0.00',
+ value: form.plannedMileageKm,
+ onChange: function (e) { updateForm({ plannedMileageKm: toFixed2Input(e.target.value) }); },
+ addonAfter: 'km'
+ })
+ ),
+
+ React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
+ React.createElement('div', { style: labelStyle }, '备注'),
+ React.createElement(Input.TextArea, {
+ placeholder: '请输入备注',
+ value: form.remark,
+ onChange: function (e) { updateForm({ remark: e.target.value }); },
+ autoSize: { minRows: 3, maxRows: 6 }
+ })
+ )
+ )
+ ),
+
+ React.createElement(Card, { title: '车辆信息', style: { marginBottom: 16 } },
+ errors.vehicleList ? React.createElement('div', { style: { marginBottom: 12, color: '#ff4d4f', fontSize: 12 } }, errors.vehicleList) : null,
+ React.createElement(Table, {
+ rowKey: 'id',
+ columns: vehicleColumns,
+ dataSource: vehicles,
+ size: 'small',
+ pagination: false,
+ scroll: { x: 1250 }
+ }),
+ React.createElement(Button, { type: 'dashed', style: { marginTop: 12, width: '100%' }, onClick: addRow }, '新增一行')
+ ),
+
+ React.createElement('div', { style: { height: 56 } }),
+ React.createElement('div', {
+ style: {
+ position: 'fixed',
+ left: 0,
+ right: 0,
+ bottom: 0,
+ padding: '12px 24px',
+ background: '#fff',
+ borderTop: '1px solid #f0f0f0',
+ display: 'flex',
+ gap: 8,
+ zIndex: 10
+ }
+ },
+ React.createElement(Button, { type: 'primary', onClick: handleSubmitAudit }, '提交审核'),
+ React.createElement(Button, { onClick: handleSave }, '保存'),
+ React.createElement(Button, { onClick: handleCancel }, '取消')
+ )
+ )
+ );
+};
+
diff --git a/web端/运维管理/车辆业务/异动管理.jsx b/web端/运维管理/车辆业务/异动管理.jsx
index 201e63c..62985e4 100644
--- a/web端/运维管理/车辆业务/异动管理.jsx
+++ b/web端/运维管理/车辆业务/异动管理.jsx
@@ -16,6 +16,7 @@ const Component = function () {
var DatePicker = antd.DatePicker;
var message = antd.message;
var Modal = antd.Modal;
+ var Tabs = antd.Tabs;
var RangePicker = DatePicker.RangePicker;
@@ -45,11 +46,18 @@ const Component = function () {
return s === '待提交' || s === '驳回' || s === '撤回';
}
+ /** 已结束异动（进入历史记录 Tab） */
+ function isMovementEnded(r) {
+ if (!r) return false;
+ return !!(r.movementEndedAt || r.movementEnded);
+ }
+
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
var filterItemStyle = { marginBottom: 12 };
var filterControlStyle = { width: '100%' };
var tableSingleLineStyle = '.movement-list-table .ant-table-thead th,.movement-list-table .ant-table-tbody td{white-space:nowrap;}';
+ var movementTabsBarStyle = '.movement-list-tabs .ant-tabs-nav{align-items:center;margin-bottom:0;}';
var moveTypeOptions = useMemo(function () {
return [
@@ -98,6 +106,10 @@ const Component = function () {
var pageSize = pageSizeState[0];
var setPageSize = pageSizeState[1];
+ var listTabState = useState('ongoing');
+ var listTab = listTabState[0];
+ var setListTab = listTabState[1];
+
var requirementModalState = useState(false);
var requirementModalOpen = requirementModalState[0];
var setRequirementModalOpen = requirementModalState[1];
@@ -112,7 +124,8 @@ const Component = function () {
'1.3.车牌号：选择器，输入框支持模糊搜索下拉匹配结果；',
'1.4.右侧为查询、重置按钮；',
'',
- '2.列表：',
+ '2.列表：分为2个tab：进行中、历史记录；',
+ '#进行中：',
'2.1.异动开始日期：显示车辆异动开始日期，格式为：YYYY-MM-DD HH:MM；',
'2.2.异动预计结束日期：显示车辆异动结束日期，格式为：YYYY-MM-DD HH:MM；',
'2.3.审批状态：分为:待提交、审批中、审批完成、驳回、撤回；',
@@ -123,12 +136,34 @@ const Component = function () {
'2.8.车牌号：显示车牌号；',
'2.9.异动开始里程（km）：显示车辆异动开始里程；',
'2.10.异动开始电量（kWh）：显示车辆异动开始电量；',
- '2.11.异动开始氢量；显示车辆异动开始氢量，带单位，单位根据型号参数表获取，分为%和MPa；',
+ '2.11.异动开始氢量：显示车辆异动开始氢量，带单位，单位根据型号参数表获取，分为%和MPa；',
'2.12.创建人：显示发起人姓名；',
'2.13.创建时间：显示发起时间，格式为：YYYY-MM-DD HH:MM；',
- '2.14.操作：查看、编辑；',
+ '2.14.操作：查看、编辑、撤回、结束异动；',
' 2.14.1.查看：点击跳转异动-查看页；',
' 2.14.2.编辑：点击跳转异动-编辑页，只有审批状态为：待提交、驳回、撤回时显示编辑；',
+ ' 2.14.3.撤回：点击进行二次确认，确认后撤回该数据并将审批状态修改为：撤回；',
+ ' 2.14.4.结束异动：当审批状态为审批完成后显示结束异动，点击跳转异动-结束异动页；',
+ '',
+ '#历史记录：',
+ '3.1.异动开始日期：显示车辆异动开始日期，格式为：YYYY-MM-DD HH:MM；',
+ '3.2.异动预计结束日期：显示车辆异动结束日期，格式为：YYYY-MM-DD HH:MM；',
+ '3.3.审批状态：分为:待提交、审批中、审批完成、驳回、撤回；',
+ '3.4.异动目的地：显示车辆异动目的地，选项包括：停车场、维修站、其他；',
+ '3.5.目的地名称：显示车辆异动目的地名称；',
+ '3.6.异动类型：显示车辆异动类型，选项包括：维修、保养、年审、其他；',
+ '3.7.预计异动里程（km）：显示车辆预计异动里程；',
+ '3.8.车牌号：显示车牌号；',
+ '3.9.异动开始里程（km）：显示车辆异动开始里程；',
+ '3.10.异动结束里程（km）：显示车辆异动结束里程；',
+ '3.11.异动开始电量（kWh）：显示车辆异动开始电量；',
+ '3.12.异动结束电量（kWh）：显示车辆异动结束电量；',
+ '3.13.异动开始氢量：显示车辆异动开始氢量，带单位，单位根据型号参数表获取，分为%和MPa；',
+ '3.14.异动结束氢量：显示车辆异动结束氢量，带单位，单位根据型号参数表获取，分为%和MPa；',
+ '3.15.创建人：显示发起人姓名；',
+ '3.16.创建时间：显示发起时间，格式为：YYYY-MM-DD HH:MM；',
+ '3.17.操作：查看；',
+ ' 3.17.1.查看：点击跳转异动-查看页；',
'',
'3.列表右下方为分页功能，支持单页显示条数设置；'
].join('\n');
@@ -304,10 +339,202 @@ const Component = function () {
h2Unit: '%',
creatorName: '陈静',
createTime: '2026-03-01 05:40'
+ },
+ // 历史记录样例（已结束异动，共 10 条）
+ {
+ id: 'mv-h-01',
+ moveStartAt: '2025-11-08 08:00',
+ moveEndExpectedAt: '2025-11-10 18:00',
+ approvalStatus: '审批完成',
+ destination: '维修站',
+ destinationName: '广州白云氢能维保中心',
+ moveType: '维修',
+ expectedMileageKm: '28.5',
+ plateNo: '粤A12345',
+ startMileageKm: '14800.00',
+ startElectricKwh: '70.00',
+ startHydrogen: '30.00',
+ h2Unit: 'MPa',
+ creatorName: '张明',
+ createTime: '2025-11-07 16:20',
+ movementEndedAt: '2025-11-10 19:30',
+ movementEnded: true
+ },
+ {
+ id: 'mv-h-02',
+ moveStartAt: '2025-11-15 09:30',
+ moveEndExpectedAt: '2025-11-15 17:00',
+ approvalStatus: '审批完成',
+ destination: '停车场',
+ destinationName: '深圳湾口岸停车场',
+ moveType: '保养',
+ expectedMileageKm: '15.2',
+ plateNo: '粤B11111',
+ startMileageKm: '9200.50',
+ startElectricKwh: '58.30',
+ startHydrogen: '62.00',
+ h2Unit: '%',
+ creatorName: '王芳',
+ createTime: '2025-11-14 14:00',
+ movementEndedAt: '2025-11-15 17:45',
+ movementEnded: true
+ },
+ {
+ id: 'mv-h-03',
+ moveStartAt: '2025-12-02 07:15',
+ moveEndExpectedAt: '2025-12-02 12:30',
+ approvalStatus: '审批完成',
+ destination: '其他',
+ destinationName: '杭州车管所年检线',
+ moveType: '年审',
+ expectedMileageKm: '9.8',
+ plateNo: '浙A11111',
+ startMileageKm: '11550.20',
+ startElectricKwh: '64.00',
+ startHydrogen: '48.50',
+ h2Unit: '%',
+ creatorName: '李华',
+ createTime: '2025-12-01 18:10',
+ movementEndedAt: '2025-12-02 13:20',
+ movementEnded: true
+ },
+ {
+ id: 'mv-h-04',
+ moveStartAt: '2025-12-18 13:00',
+ moveEndExpectedAt: '2025-12-20 09:00',
+ approvalStatus: '审批完成',
+ destination: '维修站',
+ destinationName: '上海嘉定氢能服务站',
+ moveType: '维修',
+ expectedMileageKm: '42.0',
+ plateNo: '沪A30003',
+ startMileageKm: '10100.00',
+ startElectricKwh: '66.50',
+ startHydrogen: '27.20',
+ h2Unit: 'MPa',
+ creatorName: '赵强',
+ createTime: '2025-12-17 11:30',
+ movementEndedAt: '2025-12-20 10:15',
+ movementEnded: true
+ },
+ {
+ id: 'mv-h-05',
+ moveStartAt: '2026-01-05 10:20',
+ moveEndExpectedAt: '2026-01-06 16:00',
+ approvalStatus: '审批完成',
+ destination: '停车场',
+ destinationName: '南京南站枢纽停车场',
+ moveType: '其他',
+ expectedMileageKm: '19.6',
+ plateNo: '苏E88888',
+ startMileageKm: '22800.00',
+ startElectricKwh: '45.80',
+ startHydrogen: '50.00',
+ h2Unit: '%',
+ creatorName: '陈静',
+ createTime: '2026-01-04 09:45',
+ movementEndedAt: '2026-01-06 17:00',
+ movementEnded: true
+ },
+ {
+ id: 'mv-h-06',
+ moveStartAt: '2026-01-12 08:45',
+ moveEndExpectedAt: '2026-01-12 15:30',
+ approvalStatus: '审批完成',
+ destination: '维修站',
+ destinationName: '北京亦庄氢能维修站',
+ moveType: '保养',
+ expectedMileageKm: '11.3',
+ plateNo: '京A66666',
+ startMileageKm: '8750.00',
+ startElectricKwh: '72.00',
+ startHydrogen: '32.00',
+ h2Unit: 'MPa',
+ creatorName: '王芳',
+ createTime: '2026-01-11 17:00',
+ movementEndedAt: '2026-01-12 16:10',
+ movementEnded: true
+ },
+ {
+ id: 'mv-h-07',
+ moveStartAt: '2026-01-22 14:00',
+ moveEndExpectedAt: '2026-01-23 11:00',
+ approvalStatus: '审批完成',
+ destination: '其他',
+ destinationName: '重庆两江新区检测站',
+ moveType: '年审',
+ expectedMileageKm: '33.0',
+ plateNo: '渝A99999',
+ startMileageKm: '17200.00',
+ startElectricKwh: '49.20',
+ startHydrogen: '59.00',
+ h2Unit: '%',
+ creatorName: '李华',
+ createTime: '2026-01-22 08:30',
+ movementEndedAt: '2026-01-23 12:00',
+ movementEnded: true
+ },
+ {
+ id: 'mv-h-08',
+ moveStartAt: '2026-02-01 09:00',
+ moveEndExpectedAt: '2026-02-03 18:00',
+ approvalStatus: '审批完成',
+ destination: '维修站',
+ destinationName: '成都龙泉驿维保基地',
+ moveType: '维修',
+ expectedMileageKm: '55.8',
+ plateNo: '川A77777',
+ startMileageKm: '33800.00',
+ startElectricKwh: '35.00',
+ startHydrogen: '25.00',
+ h2Unit: 'MPa',
+ creatorName: '赵强',
+ createTime: '2026-01-31 16:40',
+ movementEndedAt: '2026-02-03 19:00',
+ movementEnded: true
+ },
+ {
+ id: 'mv-h-09',
+ moveStartAt: '2026-02-10 06:30',
+ moveEndExpectedAt: '2026-02-10 14:00',
+ approvalStatus: '审批完成',
+ destination: '停车场',
+ destinationName: '青岛前湾港停车场',
+ moveType: '保养',
+ expectedMileageKm: '12.5',
+ plateNo: '鲁B55555',
+ startMileageKm: '11050.00',
+ startElectricKwh: '63.80',
+ startHydrogen: '61.00',
+ h2Unit: '%',
+ creatorName: '陈静',
+ createTime: '2026-02-09 20:15',
+ movementEndedAt: '2026-02-10 15:30',
+ movementEnded: true
+ },
+ {
+ id: 'mv-h-10',
+ moveStartAt: '2026-02-18 11:20',
+ moveEndExpectedAt: '2026-02-19 10:00',
+ approvalStatus: '审批完成',
+ destination: '其他',
+ destinationName: '宁波北仑港区临时点',
+ moveType: '其他',
+ expectedMileageKm: '24.0',
+ plateNo: '浙B22222',
+ startMileageKm: '14950.00',
+ startElectricKwh: '57.00',
+ startHydrogen: '23.50',
+ h2Unit: 'MPa',
+ creatorName: '张明',
+ createTime: '2026-02-17 15:00',
+ movementEndedAt: '2026-02-19 11:20',
+ movementEnded: true
}
];
});
var list = listState[0];
+ var setList = listState[1];
function matchRange(valStr, range) {
if (!range || !range[0] || !range[1]) return true;
@@ -333,7 +560,13 @@ const Component = function () {
});
}
- var filtered = useMemo(function () { return applyFilters(list); }, [list, applied]);
+ var filtered = useMemo(function () {
+ var base = applyFilters(list);
+ if (listTab === 'ongoing') {
+ return base.filter(function (r) { return !isMovementEnded(r); });
+ }
+ return base.filter(function (r) { return isMovementEnded(r); });
+ }, [list, applied, listTab]);
var paged = useMemo(function () {
var start = (page - 1) * pageSize;
@@ -352,6 +585,118 @@ const Component = function () {
setPage(1);
}, []);
+ var handleAdd = useCallback(function () {
+ message.info('新增异动（原型，联调时跳转新建页或打开表单）');
+ }, []);
+
+ function fmtNowYMDHM() {
+ var d = new Date();
+ var p2 = function (n) { return n < 10 ? '0' + n : '' + n; };
+ return d.getFullYear() + '-' + p2(d.getMonth() + 1) + '-' + p2(d.getDate()) + ' ' + p2(d.getHours()) + ':' + p2(d.getMinutes());
+ }
+
+ var handleEndMovement = useCallback(function (recordId) {
+ Modal.confirm({
+ title: '确认结束异动',
+ content: '确定结束该条异动吗？确认后将归档至「历史记录」，仅可查看。',
+ okText: '确认结束',
+ cancelText: '取消',
+ onOk: function () {
+ var endedAt = fmtNowYMDHM();
+ setList(function (prev) {
+ return (prev || []).map(function (row) {
+ if (row.id !== recordId) return row;
+ return Object.assign({}, row, { movementEndedAt: endedAt, movementEnded: true });
+ });
+ });
+ message.success('结束异动成功');
+ }
+ });
+ }, []);
+
+ var handleWithdrawMovement = useCallback(function (recordId) {
+ Modal.confirm({
+ title: '确认撤回',
+ content: '确定要撤回该条异动申请吗？确认后审批状态将变更为「撤回」，可再次编辑后提交。',
+ okText: '确认撤回',
+ cancelText: '取消',
+ onOk: function () {
+ setList(function (prev) {
+ return (prev || []).map(function (row) {
+ if (row.id !== recordId) return row;
+ return Object.assign({}, row, { approvalStatus: '撤回' });
+ });
+ });
+ message.success('撤回成功');
+ }
+ });
+ }, []);
+
+ function formatStartHydrogenForExport(r) {
+ var u = r.h2Unit || '';
+ if (r.startHydrogen == null || r.startHydrogen === '') return '-';
+ return String(r.startHydrogen) + (u ? ' ' + u : '');
+ }
+
+ var handleExport = useCallback(function () {
+ var rows = filtered;
+ if (!rows || rows.length === 0) {
+ message.warning('当前无数据可导出');
+ return;
+ }
+ var escapeCsv = function (v) {
+ var s = v == null ? '' : String(v);
+ if (s.indexOf(',') !== -1 || s.indexOf('"') !== -1 || s.indexOf('\n') !== -1 || s.indexOf('\r') !== -1) {
+ return '"' + s.replace(/"/g, '""') + '"';
+ }
+ return s;
+ };
+ var headers = [
+ '异动开始日期',
+ '异动预计结束日期',
+ '审批状态',
+ '异动目的地',
+ '目的地名称',
+ '异动类型',
+ '预计异动里程（km）',
+ '车牌号',
+ '异动开始里程（km）',
+ '异动开始电量（kWh）',
+ '异动开始氢量',
+ '创建人',
+ '创建时间'
+ ];
+ var rowToCells = function (r) {
+ return [
+ fmtYMDHM(r.moveStartAt),
+ fmtYMDHM(r.moveEndExpectedAt),
+ r.approvalStatus,
+ r.destination,
+ r.destinationName,
+ r.moveType,
+ r.expectedMileageKm,
+ r.plateNo,
+ r.startMileageKm,
+ r.startElectricKwh,
+ formatStartHydrogenForExport(r),
+ r.creatorName,
+ fmtYMDHM(r.createTime)
+ ];
+ };
+ var csv = headers.map(escapeCsv).join(',') + '\n';
+ rows.forEach(function (r) {
+ csv += rowToCells(r).map(escapeCsv).join(',') + '\n';
+ });
+ var blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8' });
+ var url = URL.createObjectURL(blob);
+ var a = document.createElement('a');
+ a.href = url;
+ a.download = '异动管理导出_' + (listTab === 'ongoing' ? '进行中' : '历史记录') + '_' + new Date().getTime() + '.csv';
+ a.click();
+ URL.revokeObjectURL(url);
+ message.success('已导出 ' + rows.length + ' 条记录');
+ }, [filtered, listTab]);
+
var columns = useMemo(function () {
return [
{ title: '异动开始日期', dataIndex: 'moveStartAt', key: 'moveStartAt', width: 160, render: function (v) { return fmtYMDHM(v); } },
@@ -378,12 +723,29 @@ const Component = function () {
{
title: '操作',
key: 'action',
- width: 120,
+ width: 200,
fixed: 'right',
render: function (_, r) {
var nodes = [
React.createElement(Button, { key: 'view', type: 'link', size: 'small', onClick: function () { message.info('跳转异动-查看页（原型）ID：' + r.id); } }, '查看')
];
+ if (String(r.approvalStatus || '') === '审批中') {
+ nodes.push(React.createElement(Button, {
+ key: 'withdraw',
+ type: 'link',
+ size: 'small',
+ danger: true,
+ onClick: function () { handleWithdrawMovement(r.id); }
+ }, '撤回'));
+ }
+ if (String(r.approvalStatus || '') === '审批完成' && !isMovementEnded(r)) {
+ nodes.push(React.createElement(Button, {
+ key: 'end',
+ type: 'link',
+ size: 'small',
+ onClick: function () { handleEndMovement(r.id); }
+ }, '结束异动'));
+ }
if (canShowMovementEdit(r.approvalStatus)) {
nodes.push(React.createElement(Button, { key: 'edit', type: 'link', size: 'small', onClick: function () { message.info('跳转异动-编辑页（原型）ID：' + r.id); } }, '编辑'));
}
@@ -391,7 +753,7 @@ const Component = function () {
}
}
];
- }, []);
+ }, [handleWithdrawMovement, handleEndMovement]);
return React.createElement(App, null,
React.createElement('div', { style: layoutStyle },
@@ -455,25 +817,73 @@ const Component = function () {
),
React.createElement(Card, null,
- React.createElement('style', null, tableSingleLineStyle),
- React.createElement('div', { className: 'movement-list-table' },
- React.createElement(Table, {
- rowKey: 'id',
- columns: columns,
- dataSource: paged,
- scroll: { x: 2240 },
- size: 'small',
- pagination: {
- current: page,
- pageSize: pageSize,
- total: filtered.length,
- showSizeChanger: true,
- showQuickJumper: true,
- showTotal: function (t) { return '共 ' + t + ' 条'; },
- onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
+ React.createElement('style', null, movementTabsBarStyle),
+ React.createElement(Tabs, {
+ className: 'movement-list-tabs',
+ activeKey: listTab,
+ onChange: function (k) {
+ setListTab(k);
+ setPage(1);
+ },
+ destroyInactiveTabPane: true,
+ tabBarExtraContent: React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
+ React.createElement(Button, { type: 'primary', onClick: handleAdd }, '新增'),
+ React.createElement(Button, { onClick: handleExport }, '导出')
+ ),
+ tabBarStyle: { marginBottom: 0 },
+ items: [
+ {
+ key: 'ongoing',
+ label: '进行中',
+ children: React.createElement('div', { style: { marginTop: 16 } },
+ React.createElement('style', null, tableSingleLineStyle),
+ React.createElement('div', { className: 'movement-list-table' },
+ React.createElement(Table, {
+ rowKey: 'id',
+ columns: columns,
+ dataSource: paged,
+ scroll: { x: 2240 },
+ size: 'small',
+ pagination: {
+ current: page,
+ pageSize: pageSize,
+ total: filtered.length,
+ showSizeChanger: true,
+ showQuickJumper: true,
+ showTotal: function (t) { return '共 ' + t + ' 条'; },
+ onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
+ }
+ })
+ )
+ )
+ },
+ {
+ key: 'history',
+ label: '历史记录',
+ children: React.createElement('div', { style: { marginTop: 16 } },
+ React.createElement('style', null, tableSingleLineStyle),
+ React.createElement('div', { className: 'movement-list-table' },
+ React.createElement(Table, {
+ rowKey: 'id',
+ columns: columns,
+ dataSource: paged,
+ scroll: { x: 2240 },
+ size: 'small',
+ pagination: {
+ current: page,
+ pageSize: pageSize,
+ total: filtered.length,
+ showSizeChanger: true,
+ showQuickJumper: true,
+ showTotal: function (t) { return '共 ' + t + ' 条'; },
+ onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
+ }
+ })
+ )
+ )
}
- })
- )
+ ]
+ })
)
)
);
diff --git a/web端/运维管理/车辆管理-查看.jsx b/web端/运维管理/车辆管理-查看.jsx
index b2d03cb..1e94b67 100644
--- a/web端/运维管理/车辆管理-查看.jsx
+++ b/web端/运维管理/车辆管理-查看.jsx
@@ -80,12 +80,23 @@ const Component = function () {
// 证照管理 Tab：证件照片占位（可替换为真实 URL，支持 Image 预览）
var licensePhotoPlaceholder = 'data:image/svg+xml,' + encodeURIComponent('');
+ function certPhotoPlaceholder(captionText) {
+ return 'data:image/svg+xml,' + encodeURIComponent('');
+ }
var certificateDetail = {
drivingLicense: { img: licensePhotoPlaceholder, regDate: '2025-07-01', scrapDate: '2038-12-31', inspectExpire: '2027-07-31' },
operationPermit: { img: licensePhotoPlaceholder, permitNo: '营330482001234', regDate: '2025-07-15', inspectExpire: '2026-07-14', certExpire: '2030-07-14' },
passPermit: { img: licensePhotoPlaceholder, code: 'TX-ZJ-2025-0088', area: '浙江省嘉兴市平湖市行政辖区', expire: '2026-12-31' },
registrationCert: { img: licensePhotoPlaceholder },
- h2Permit: { img: licensePhotoPlaceholder, permitCode: 'JQZ-2025-F069001', cardCode: 'JK-88A901256', inspectDate: '2025-06-15' },
+ h2Permit: {
+ photos: [
+ { label: '特种设备使用登记证', src: certPhotoPlaceholder('特种设备使用登记证') },
+ { label: '特种设备使用标志', src: certPhotoPlaceholder('特种设备使用标志') }
+ ],
+ permitCode: 'JQZ-2025-F069001',
+ cardCode: 'JK-88A901256',
+ inspectDate: '2025-06-15'
+ },
h2Card: { img: licensePhotoPlaceholder, stationName: '嘉兴港区某某加氢站' },
safetyValve: { img: licensePhotoPlaceholder, inspectDate: '2025-05-10', cycle: '12个月', validUntil: '2026-05-09' },
pressureGauge: { img: licensePhotoPlaceholder, inspectDate: '2025-05-10', cycle: '12个月', gaugeValidUntil: '2026-05-09' },
@@ -545,6 +556,42 @@ const Component = function () {
)
);
}
+ /** 证照多图：每项 { label, src }，如加氢证下登记证 + 使用标志 */
+ function CertSectionCardMulti(title, photoSlots, fieldNodes) {
+ var right = fieldNodes && fieldNodes.length
+ ? React.createElement('div', {
+ style: {
+ flex: 1,
+ minWidth: 260,
+ display: 'flex',
+ alignItems: 'center',
+ alignSelf: 'stretch'
+ }
+ }, React.createElement('div', { style: { width: '100%' } }, fieldNodes))
+ : null;
+ var slots = photoSlots || [];
+ var photosRow = React.createElement('div', { style: { display: 'flex', gap: 16, flexWrap: 'wrap', flexShrink: 0, alignItems: 'flex-start' } },
+ slots.map(function (slot, idx) {
+ return React.createElement('div', { key: idx, style: { display: 'flex', flexDirection: 'column' } },
+ React.createElement('div', { style: { marginBottom: 8, color: 'rgba(0,0,0,0.45)', fontSize: 13 } }, slot.label || '证件照片'),
+ React.createElement(Image, {
+ width: 168,
+ height: 112,
+ style: { objectFit: 'cover', borderRadius: 4, border: '1px solid #f0f0f0', background: '#fafafa' },
+ src: slot.src,
+ alt: (slot.label || title) + '',
+ preview: true
+ })
+ );
+ })
+ );
+ return React.createElement(Card, { key: title, size: 'small', style: { marginBottom: 16 }, title: title },
+ React.createElement('div', { style: { display: 'flex', gap: 24, flexWrap: 'wrap', alignItems: 'stretch' } },
+ photosRow,
+ right
+ )
+ );
+ }
var cd = certificateDetail;
var licenseManagementTabContent = React.createElement('div', { style: { padding: '0 4px' } },
@@ -565,7 +612,7 @@ const Component = function () {
CertFieldRow('有效期', cd.passPermit.expire)
]),
CertSectionCard('登记证', cd.registrationCert.img, null),
- CertSectionCard('加氢证', cd.h2Permit.img, [
+ CertSectionCardMulti('加氢证', cd.h2Permit.photos, [
CertFieldRow('加氢证编码', cd.h2Permit.permitCode),
CertFieldRow('加氢卡编码', cd.h2Permit.cardCode),
CertFieldRow('检验日期', cd.h2Permit.inspectDate)
diff --git a/web端/需求说明/运维管理-仓库管理/交车任务 b/web端/需求说明/运维管理-仓库管理/交车任务
new file mode 100644
index 0000000..5e59f02
--- /dev/null
+++ b/web端/需求说明/运维管理-仓库管理/交车任务
@@ -0,0 +1,19 @@
+一个「数字化资产ONEOS运管平台」中的「仓库管理」模块
+#面包屑：运维管理-备件库-仓库管理
+
+1.筛选：
+1.1.仓库名称：选择器，支持输入框内输入内容模糊搜索下拉匹配结果；
+1.2.创建人：选择器，下拉显示创建人；
+1.3.创建时间：日期选择器，支持单输入框双日历通过开始-结束时间筛选；
+
+2.列表；右侧为新增；
+2.1.序号：1.2.3.以此类推；
+2.2.仓库编码：显示仓库编码；
+2.3.仓库名称：显示仓库名称；
+2.4.仓库地址：显示仓库地址；
+2.5.仓库管理人：显示仓库管理人；
+2.6.创建人：显示创建人；
+2.7.创建时间：显示创建时间，格式为：YYYY-MM-DD HH:MM；
+2.8.操作：编辑、删除；
+ 2.8.1.编辑：跳转仓库设置-编辑页；
+ 2.8.2.删除：点击进行二次确认，确认后判断仓库是否为空，如果仓库非空则提示：清空仓库后才可删除该仓库，仓库为空则提示：删除成功；
diff --git a/web端/需求说明/运维管理-仓库管理/备件库存 b/web端/需求说明/运维管理-仓库管理/备件库存
new file mode 100644
index 0000000..946c021
--- /dev/null
+++ b/web端/需求说明/运维管理-仓库管理/备件库存
@@ -0,0 +1,20 @@
+一个「数字化资产ONEOS运管平台」中的「备件库存」模块
+#面包屑：运维管理-备件库-备件库存
+
+1.筛选：
+1.1.仓库名称：选择器，支持输入框内输入模糊搜索，下拉匹配正确项；
+1.2.备件编码：选择器，支持输入框内输入模糊搜索，下拉匹配正确项；
+1.3.备件名称：选择器，支持输入框内输入模糊搜索，下拉匹配正确项；
+1.4.适配车型：选择器，支持多选，显示所有型号；
+
+2.列表；右侧为新增、导出按钮
+2.1.序号：1.2.3.以此类推；
+2.2.仓库编码：显示仓库编码；
+2.3.仓库名称：显示仓库名称；
+2.4.备件编码：显示备件编码；
+2.5.备件名称：显示备件名称；
+2.6.适配车型：显示适配车型，一个备件可能有多个车型；
+2.7.库存数量：显示库存数量；
+2.8.累积入库数量：显示该备件入库数量总和；
+2.9.累积出库数量：显示该备件出库数量总和；
+2.10.右下角为分页功能，支持选择单页显示数据条数；