web端：新增工作台；异动管理页面与需求说明更新

Made-with: Cursor

web端/运维管理/车辆业务/异动管理-编辑.jsx

@@ -1,5 +1,5 @@
 // 【重要】必须使用 const Component 作为组件变量名
-// 运维管理 - 车辆业务 - 异动管理 - 编辑
+// 运维管理 - 车辆业务 - 异动管理 - 编辑（与「异动管理-新增」同步维护）
 
 const Component = function () {
 	var useState = React.useState;
@@ -37,6 +37,16 @@ const Component = function () {
 		return s;
 	}
 
+	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;
+	}
+
 	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 };
@@ -101,6 +111,7 @@ const Component = function () {
 	var requirementDocContent = [
 		'一个「数字化资产ONEOS运管平台」中的「异动管理」「编辑」模块',
 		'#面包屑：运维管理-车辆业务-异动管理-编辑',
+		'（原型）进入页面预填用例数据，联调时由详情接口按异动 ID 回填。',
 		'',
 		'1.异动情况；',
 		'1.1.异动开始日期：必填项，日期选择器，格式为：YYYY-MM-DD HH:MM；',
@@ -108,8 +119,7 @@ const Component = function () {
 		'1.3.异动目的地：必填项，选择器，选项为：停车场、维修站、其他；',
 		'2.4.目的地名称：必填项，如异动目的地为停车场，则此处为停车场（选择器），如异动目的地为维修站，则此处为维修站（选择器），如异动目的地为其他，则此处为输入框（自定义输入）；',
 		'2.5.异动类型：必填项，选择器，选项为：维修、保养、年审、其他；',
-		'2.6.预计异动里程：输入框，支持2位小数输入，后缀为km；',
-		'2.7.备注：文本域，支持自定义输入；',
+		'2.6.备注：文本域，支持自定义输入；',
 		'',
 		'2.车辆信息：',
 		'2.1.车牌号：显示车牌号，支持输入框模糊搜索下拉匹配对应选项；',
@@ -117,24 +127,25 @@ const Component = function () {
 		'2.3.品牌：根据所选车辆品牌自动反写，默认提示为请先选择车辆；',
 		'2.4.型号：根据所选车辆型号自动反写，默认提示为请先选择车辆；',
 		'2.5.出发停车场：根据所选车辆出发时停车场自动反写，默认提示为请先选择车辆；',
-		'2.6.异动开始里程：必填项，输入框，精确至2位小数，后缀为km；',
-		'2.7.异动开始氢量：必填项，输入框，精确至2位小数，后缀为%或MPa，根据所选车辆型号中获取；',
-		'2.8.异动开始电量：必填项，输入框，精确至2位小数，后缀为kWh；',
-		'2.9.操作：删除；',
-		'2.10.新增一行：铺满整行；',
+		'2.6.预计异动里程：输入框，支持2位小数输入，后缀为km；',
+		'2.7.异动开始里程：必填项，输入框，精确至2位小数，后缀为km；',
+		'2.8.异动开始氢量：必填项，输入框，精确至2位小数，后缀为%或MPa，根据所选车辆型号中获取；',
+		'2.9.异动开始电量：必填项，输入框，精确至2位小数，后缀为kWh；',
+		'2.10.操作：删除；',
+		'2.11.新增一行：铺满整行；',
 		'',
 		'3.底部为提交审核、保存、取消；'
 	].join('\n');
 
+	// 原型：进入编辑页时由详情接口回填；以下为联调前用例数据
 	var formState = useState({
-		startTime: null,
-		plannedEndTime: null,
-		destinationType: undefined,
-		destinationName: undefined,
+		startTime: getInitialDateTime('2026-02-20 09:30'),
+		plannedEndTime: getInitialDateTime('2026-02-22 18:00'),
+		destinationType: '维修站',
+		destinationName: '广州天河维修站',
 		destinationNameOther: '',
-		changeType: undefined,
-		plannedMileageKm: '',
-		remark: ''
+		changeType: '维修',
+		remark: '车辆需进站检修制动系统，预计两日内完成。'
 	});
 	var form = formState[0];
 	var setForm = formState[1];
@@ -143,19 +154,33 @@ const Component = function () {
 	var errors = errorsState[0];
 	var setErrors = errorsState[1];
 
-	var rowIdRef = React.useRef(2);
+	var rowIdRef = React.useRef(3);
 	var vehiclesState = useState([
 		{
 			id: 1,
-			plateNo: undefined,
-			vehicleType: '',
-			brand: '',
-			model: '',
-			departParking: '',
-			h2Unit: '',
-			startMileageKm: '',
-			startHydrogen: '',
-			startElectricKwh: ''
+			plateNo: '粤A12345',
+			vehicleType: '厢式货车',
+			brand: '东风',
+			model: 'DFH1180',
+			departParking: '天河智慧停车场',
+			h2Unit: 'MPa',
+			plannedMileageKm: '45.50',
+			startMileageKm: '15230.12',
+			startHydrogen: '28.30',
+			startElectricKwh: '68.40'
+		},
+		{
+			id: 2,
+			plateNo: '浙A11111',
+			vehicleType: 'SUV',
+			brand: '小鹏',
+			model: 'P7',
+			departParking: '西湖景区停车场',
+			h2Unit: '%',
+			plannedMileageKm: '120.00',
+			startMileageKm: '12010.00',
+			startHydrogen: '60.00',
+			startElectricKwh: '55.20'
 		}
 	]);
 	var vehicles = vehiclesState[0];
@@ -176,14 +201,16 @@ const Component = function () {
 
 	var handlePlateChange = useCallback(function (index, plateNo) {
 		var v = vehicleDb.find(function (x) { return x.plateNo === plateNo; });
-		updateRow(index, {
+		var patch = {
 			plateNo: plateNo,
 			vehicleType: v ? v.vehicleType : '',
 			brand: v ? v.brand : '',
 			model: v ? v.model : '',
 			departParking: v ? v.departParking : '',
 			h2Unit: v ? v.h2Unit : ''
-		});
+		};
+		if (!v) patch.plannedMileageKm = '';
+		updateRow(index, patch);
 	}, [vehicleDb, updateRow]);
 
 	var addRow = useCallback(function () {
@@ -196,6 +223,7 @@ const Component = function () {
 				model: '',
 				departParking: '',
 				h2Unit: '',
+				plannedMileageKm: '',
 				startMileageKm: '',
 				startHydrogen: '',
 				startElectricKwh: ''
@@ -216,6 +244,7 @@ const Component = function () {
 					model: '',
 					departParking: '',
 					h2Unit: '',
+					plannedMileageKm: '',
 					startMileageKm: '',
 					startHydrogen: '',
 					startElectricKwh: ''
@@ -243,6 +272,7 @@ const Component = function () {
 		for (var i = 0; i < (vehicles || []).length; i++) {
 			var r = vehicles[i] || {};
 			if (!String(r.plateNo || '').trim()) continue;
+			if (!String(r.plannedMileageKm || '').trim()) e['row_' + i + '_plannedMileageKm'] = '请输入预计异动里程';
 			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'] = '请输入异动开始电量';
@@ -362,6 +392,21 @@ const Component = function () {
 					return React.createElement(Input, { value: r.departParking ? r.departParking : '请先选择车辆', disabled: true });
 				}
 			},
+			{
+				title: React.createElement('span', null, reqStar, '预计异动里程'),
+				key: 'plannedMileageKm',
+				width: 160,
+				render: function (_, r, index) {
+					var k = 'row_' + index + '_plannedMileageKm';
+					return React.createElement(Input, {
+						value: r.plannedMileageKm,
+						onChange: function (e) { updateRow(index, { plannedMileageKm: toFixed2Input(e.target.value) }); },
+						placeholder: '0.00',
+						addonAfter: 'km',
+						status: errors[k] ? 'error' : undefined
+					});
+				}
+			},
 			{
 				title: React.createElement('span', null, reqStar, '异动开始里程'),
 				key: 'startMileageKm',
@@ -504,15 +549,6 @@ const Component = function () {
 						}),
 						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 }, '备注'),
@@ -534,7 +570,7 @@ const Component = function () {
 					dataSource: vehicles,
 					size: 'small',
 					pagination: false,
-					scroll: { x: 1250 }
+					scroll: { x: 1410 }
 				}),
 				React.createElement(Button, { type: 'dashed', style: { marginTop: 12, width: '100%' }, onClick: addRow }, '新增一行')
 			),