ONE-OS/web端/运维管理/车辆业务/调拨管理-运维（接收）-编辑.jsx

// 【重要】必须使用 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 Button = antd.Button;
	var Card = antd.Card;
	var DatePicker = antd.DatePicker;
	var Input = antd.Input;
	var Modal = antd.Modal;
	var Select = antd.Select;
	var Table = antd.Table;
	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 METHOD_THIRD = '第三方运输';

	function parseDateValue(s) {
		var str = String(s || '').trim();
		if (!str) return null;
		try {
			if (window.dayjs) return window.dayjs(str);
		} catch (e1) {}
		try {
			if (window.moment) return window.moment(str, ['YYYY-MM-DD', 'YYYY-MM-DD HH:mm'], true);
		} catch (e2) {}
		return null;
	}

	function getMockSnapshot() {
		return {
			transferId: 'TP202603310008',
			savedAt: '2026-04-01 15:20',
			transferDateStr: '2026-03-31',
			departRegionText: '广东省-广州市',
			receiveRegionText: '浙江省-嘉兴市',
			reason: '华南业务增量，需将车辆调至华东仓储节点保障运力。',
			method: METHOD_THIRD,
			transportLeader: '刘振华',
			transportPhone: '13901234567',
			transportCost: '8650.50',
			transportContractFileLabel: '顺达物流有限公司运输合同.pdf',
			receivePersonName: '王芳',
			receiveInfo: {
				receiveTime: '2026-04-02',
				receiveParking: 'p3'
			},
			transferVehicles: [
				{ id: 1, brand: '小鹏', model: 'P7', plateNo: '浙A11111', departParking: '西湖景区停车场' },
				{ id: 2, brand: '蔚来', model: 'ET5', plateNo: '浙B22222', departParking: '宁波江北停车场' }
			]
		};
	}

	var layoutStyle = { padding: '16px 24px 88px 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 readOnlyStyle = { background: 'rgba(0,0,0,0.02)' };
	var reqStarStyle = { color: '#ff4d4f', marginRight: 4 };
	var reqStar = React.createElement('span', { style: reqStarStyle }, '*');

	var snapshot = useMemo(function () {
		return getMockSnapshot();
	}, []);

	function buildVehicleRows(snap) {
		return (snap.transferVehicles || []).map(function (r) {
			return {
				id: r.id,
				brand: r.brand,
				model: r.model,
				plateNo: r.plateNo,
				departParking: r.departParking || ''
			};
		});
	}

	var receiveTimeState = useState(parseDateValue(snapshot.receiveInfo && snapshot.receiveInfo.receiveTime));
	var receiveTime = receiveTimeState[0];
	var setReceiveTime = receiveTimeState[1];

	var receiveParkingState = useState(snapshot.receiveInfo && snapshot.receiveInfo.receiveParking ? snapshot.receiveInfo.receiveParking : undefined);
	var receiveParking = receiveParkingState[0];
	var setReceiveParking = receiveParkingState[1];

	var vehiclesState = useState(function () {
		return buildVehicleRows(snapshot);
	});
	var vehicles = vehiclesState[0];

	var savedAtState = useState(snapshot.savedAt);
	var savedAt = savedAtState[0];
	var setSavedAt = savedAtState[1];

	var parkingOptions = useMemo(function () {
		return [
			{ value: 'p1', label: '西湖景区停车场' },
			{ value: 'p2', label: '宁波江北停车场' },
			{ value: 'p3', label: '张江园区停车场' },
			{ value: 'p4', label: '天河智慧停车场' }
		];
	}, []);

	var errorsState = useState({});
	var errors = errorsState[0];
	var setErrors = errorsState[1];

	var requirementModalState = useState(false);
	var requirementModalOpen = requirementModalState[0];
	var setRequirementModalOpen = requirementModalState[1];

	var attachmentPreviewState = useState(false);
	var attachmentPreviewOpen = attachmentPreviewState[0];
	var setAttachmentPreviewOpen = attachmentPreviewState[1];

	var requirementDocContent = [
		'一个「数字化资产ONEOS运管平台」中的「调拨管理」「运维（接收）-编辑」模块',
		'',
		'页面参照「调拨管理-接收信息-第三方运输」生成，进入页面时反写已保存的接收信息，并支持继续编辑。',
		'',
		'1.调拨情况：调拨日期、出发区域、接收区域、调拨原因为只读反写；',
		'2.调拨信息：调拨方式、运输负责人、运输方联系方式、运输费用、运输合同附件、接收人员为只读反写；',
		'3.接收信息：接收时间、停车场（直接选择）可编辑；',
		'4.底部按钮：提交、保存、取消。保存不校验必填项，提交校验必填项。'
	].join('\n');

	function formatCostYuan(costStr) {
		var s = String(costStr == null ? '' : costStr).trim();
		if (!s) return '—';
		return s + '元';
	}

	function contractDisplay(label) {
		var s = String(label == null ? '' : label).trim();
		return s ? s : '无';
	}

	function canPreviewAttachment(label) {
		var s = String(label == null ? '' : label).trim();
		if (!s) return false;
		var lower = s.toLowerCase();
		return lower.endsWith('.pdf') || lower.endsWith('.doc') || lower.endsWith('.docx');
	}

	function runValidate() {
		var e = {};
		if (!receiveTime) e.receiveTime = '请选择接收时间';
		if (!receiveParking) e.receiveParking = '请选择停车场';
		setErrors(e);
		return { ok: Object.keys(e).length === 0, err: e };
	}

	var handleSubmit = useCallback(function () {
		var result = runValidate();
		if (!result.ok) {
			message.error('请完善必填项');
			return;
		}
		Modal.confirm({
			title: '确认提交？',
			content: '提交后将进入后续流程（原型）。',
			okText: '提交',
			cancelText: '取消',
			onOk: function () {
				message.success('已提交（原型）');
			}
		});
	}, [receiveTime, receiveParking]);

	var handleSave = useCallback(function () {
		var nowStr = '';
		try {
			if (window.dayjs) nowStr = window.dayjs().format('YYYY-MM-DD HH:mm');
		} catch (e1) {}
		try {
			if (!nowStr && window.moment) nowStr = window.moment().format('YYYY-MM-DD HH:mm');
		} catch (e2) {}
		if (!nowStr) nowStr = '刚刚';
		setSavedAt(nowStr);
		message.success('已保存（原型：不校验必填项）');
	}, []);

	var handleCancel = useCallback(function () {
		Modal.confirm({
			title: '是否确认取消',
			content: '未保存的修改将丢失，是否确认？',
			okText: '确认',
			cancelText: '取消',
			onOk: function () {
				message.info('返回上一页（原型）');
			}
		});
	}, []);

	var vehicleColumns = useMemo(function () {
		return [
			{
				title: '品牌',
				key: 'brand',
				width: 120,
				render: function (_, r) {
					return React.createElement(Input, { value: r.brand || '', readOnly: true, style: readOnlyStyle });
				}
			},
			{
				title: '型号',
				key: 'model',
				width: 120,
				render: function (_, r) {
					return React.createElement(Input, { value: r.model || '', readOnly: true, style: readOnlyStyle });
				}
			},
			{
				title: '车牌号',
				key: 'plateNo',
				width: 140,
				render: function (_, r) {
					return React.createElement(Input, { value: r.plateNo || '', readOnly: true, style: readOnlyStyle });
				}
			},
			{
				title: '出发停车场',
				key: 'departParking',
				width: 180,
				render: function (_, r) {
					return React.createElement(Input, { value: r.departParking || '', readOnly: true, style: readOnlyStyle });
				}
			}
		];
	}, []);

	var costText = formatCostYuan(snapshot.transportCost);
	var contractText = contractDisplay(snapshot.transportContractFileLabel);
	var canPreview = canPreviewAttachment(snapshot.transportContractFileLabel);

	return React.createElement(
		App,
		null,
		React.createElement(
			'div',
			{ style: layoutStyle },
			React.createElement(
				'div',
				{
					style: {
						display: 'flex',
						alignItems: 'center',
						justifyContent: 'space-between',
						marginBottom: 8,
						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(
				'div',
				{ style: { marginBottom: 16, color: 'rgba(0,0,0,0.65)', fontSize: 12 } },
				'调拨单号：',
				snapshot.transferId,
				'  ｜  ',
				'保存状态：',
				savedAt ? ('已保存（' + savedAt + '）') : '未保存'
			),

			React.createElement(
				Modal,
				{
					title: '需求说明',
					open: requirementModalOpen,
					onCancel: function () { setRequirementModalOpen(false); },
					width: 760,
					footer: React.createElement(Button, { onClick: function () { setRequirementModalOpen(false); } }, '关闭'),
					bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
				},
				React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.65, color: 'rgba(0,0,0,0.85)' } }, requirementDocContent)
			),

			React.createElement(
				Modal,
				{
					title: '附件预览',
					open: attachmentPreviewOpen,
					onCancel: function () { setAttachmentPreviewOpen(false); },
					width: 820,
					footer: React.createElement(Button, { onClick: function () { setAttachmentPreviewOpen(false); } }, '关闭'),
					bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
				},
				React.createElement(
					'div',
					{ style: { fontSize: 13, lineHeight: 1.65, color: 'rgba(0,0,0,0.85)' } },
					React.createElement('div', { style: { marginBottom: 8 } }, '文件：', snapshot.transportContractFileLabel || '无'),
					React.createElement(
						'div',
						{ style: { padding: 12, background: 'rgba(0,0,0,0.02)', border: '1px solid #f0f0f0', borderRadius: 8 } },
						'原型预览：此处展示附件内容预览区域。对接后可通过文件 URL 进行在线预览或下载。'
					)
				)
			),

			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(Input, { value: snapshot.transferDateStr, readOnly: true, style: readOnlyStyle })
					),
					React.createElement(
						'div',
						{ style: formItemStyle },
						React.createElement('div', { style: labelStyle }, '出发区域'),
						React.createElement(Input, { value: snapshot.departRegionText, readOnly: true, style: readOnlyStyle })
					),
					React.createElement(
						'div',
						{ style: formItemStyle },
						React.createElement('div', { style: labelStyle }, '接收区域'),
						React.createElement(Input, { value: snapshot.receiveRegionText, readOnly: true, style: readOnlyStyle })
					),
					React.createElement(
						'div',
						{ style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
						React.createElement('div', { style: labelStyle }, '调拨原因'),
						React.createElement(Input.TextArea, { value: snapshot.reason, readOnly: true, style: readOnlyStyle, autoSize: { minRows: 3, maxRows: 6 } })
					)
				)
			),

			React.createElement(
				Card,
				{ title: '调拨信息', style: { marginBottom: 16 } },
				React.createElement(
					'div',
					{ style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
					React.createElement(
						'div',
						{ style: formItemStyle },
						React.createElement('div', { style: labelStyle }, '调拨方式'),
						React.createElement(Input, { value: snapshot.method, readOnly: true, style: readOnlyStyle })
					),
					React.createElement(
						'div',
						{ style: formItemStyle },
						React.createElement('div', { style: labelStyle }, '运输负责人'),
						React.createElement(Input, { value: snapshot.transportLeader, readOnly: true, style: readOnlyStyle })
					),
					React.createElement(
						'div',
						{ style: formItemStyle },
						React.createElement('div', { style: labelStyle }, '运输方联系方式'),
						React.createElement(Input, { value: snapshot.transportPhone, readOnly: true, style: readOnlyStyle })
					),
					React.createElement(
						'div',
						{ style: formItemStyle },
						React.createElement('div', { style: labelStyle }, '运输费用'),
						React.createElement(Input, { value: costText, readOnly: true, style: readOnlyStyle })
					),
					React.createElement(
						'div',
						{ style: Object.assign({}, formItemStyle, { gridColumn: 'span 2' }) },
						React.createElement('div', { style: labelStyle }, '运输合同附件'),
						canPreview
							? React.createElement(
								'div',
								{ style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' } },
								React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setAttachmentPreviewOpen(true); } }, contractText)
							)
							: React.createElement(Input, { value: contractText, readOnly: true, style: readOnlyStyle })
					),
					React.createElement(
						'div',
						{ style: formItemStyle },
						React.createElement('div', { style: labelStyle }, '接收人员'),
						React.createElement(Input, { value: snapshot.receivePersonName, readOnly: true, style: readOnlyStyle })
					)
				)
			),

			React.createElement(
				Card,
				{ title: '接收信息', style: { marginBottom: 16 } },
				React.createElement(
					'div',
					{ style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
					React.createElement(
						'div',
						{ style: formItemStyle },
						React.createElement('div', { style: labelStyle }, reqStar, '接收时间'),
						React.createElement(DatePicker, {
							style: controlStyle,
							format: 'YYYY-MM-DD',
							placeholder: '请选择接收时间',
							value: receiveTime,
							onChange: function (v) {
								setReceiveTime(v);
							},
							status: errors.receiveTime ? 'error' : undefined
						}),
						errors.receiveTime ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveTime) : null
					),
					React.createElement(
						'div',
						{ style: formItemStyle },
						React.createElement('div', { style: labelStyle }, reqStar, '停车场'),
						React.createElement(Select, {
							placeholder: '请选择停车场',
							style: controlStyle,
							value: receiveParking,
							onChange: function (v) { setReceiveParking(v); },
							allowClear: true,
							showSearch: true,
							options: parkingOptions,
							filterOption: filterOption,
							status: errors.receiveParking ? 'error' : undefined
						}),
						errors.receiveParking ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveParking) : null
					)
				)
			),

			React.createElement(
				Card,
				{ title: '调拨车辆清单', style: { marginBottom: 16 } },
				React.createElement(Table, {
					rowKey: 'id',
					columns: vehicleColumns,
					dataSource: vehicles,
					size: 'small',
					pagination: false
				})
			),

			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: handleSubmit }, '提交'),
				React.createElement(Button, { onClick: handleSave }, '保存'),
				React.createElement(Button, { onClick: handleCancel }, '取消')
			)
		)
	);
};