feat(运维-车辆): 异动管理查看/结束异动/编辑、备件与需求说明更新

Made-with: Cursor

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); }
+										}
+									})
+								)
+							)
 						}
-					})
-				)
+					]
+				})
 			)
 		)
 	);