wangmian/ONE-OS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): 同步当前原型页与工具配置改动

Browse Source 
统一提交当前工作区内的页面原型调整、新增运维相关页面以及本地工具配置目录变更，便于整体同步到远端环境继续联调与演示。

Made-with: Cursor
This commit is contained in:
王冕
2026-04-01 13:28:56 +08:00
parent 2a903b2cb4
commit 2018e34473
58 changed files with 13843 additions and 2137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

464
web端/运维管理/车辆业务/调拨管理-业务提交-编辑.jsx Normal file
View File

@@ -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 Button = antd.Button;
var Card = antd.Card;
var Cascader = antd.Cascader;
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;
}
function parseDateTime(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 HH:mm', 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD'], true);
} catch (e2) {}
return null;
}
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 reqStarStyle = { color: '#ff4d4f', marginRight: 4 };
var reqStar = React.createElement('span', { style: reqStarStyle }, '*');
/** 车牌可选车辆运营状态（需求：仅「可运营」） */
var PLATE_ELIGIBLE_STATUS = '可运营';
var regionOptions = useMemo(function () {
return [
{ value: 'zhejiang', label: '浙江省', children: [{ value: 'hangzhou', label: '杭州市' }, { value: 'ningbo', label: '宁波市' }, { value: 'jiaxing', label: '嘉兴市' }] },
{ value: 'shanghai', label: '上海市', children: [{ value: 'shanghai', label: '上海市' }] },
{ value: 'guangdong', label: '广东省', children: [{ value: 'guangzhou', label: '广州市' }, { value: 'shenzhen', label: '深圳市' }, { value: 'dongguan', label: '东莞市' }] }
];
}, []);
var brandOptions = useMemo(function () {
return ['东风', '比亚迪', '小鹏', '蔚来', '福田', '飞驰', '宇通'].map(function (b) {
return { value: b, label: b };
});
}, []);
var modelOptionsByBrand = useMemo(function () {
return {
东风: ['DFH1180', 'DFH5160'],
比亚迪: ['汉', '唐'],
小鹏: ['P7', 'G9'],
蔚来: ['ET5', 'ES8'],
福田: ['BJ1180'],
飞驰: ['FSQ4250'],
宇通: ['ZKH4250']
};
}, []);
/** 车辆主数据（原型）：仅运营状态为「可运营」的车牌出现在车牌下拉里 */
var vehicleDb = useMemo(function () {
return [
{ plateNo: '粤A12345', status: '可运营', brand: '东风', model: 'DFH1180' },
{ plateNo: '粤B11111', status: '可运营', brand: '比亚迪', model: '汉' },
{ plateNo: '浙A11111', status: '可运营', brand: '小鹏', model: 'P7' },
{ plateNo: '浙B22222', status: '可运营', brand: '蔚来', model: 'ET5' },
{ plateNo: '沪A30003', status: '可运营', brand: '福田', model: 'BJ1180' },
{ plateNo: '粤C99999', status: '维修中', brand: '东风', model: 'DFH1180' }
];
}, []);
var plateOptionsEligible = useMemo(function () {
return vehicleDb
.filter(function (v) { return v.status === PLATE_ELIGIBLE_STATUS; })
.map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
}, [vehicleDb]);
// 编辑页：从服务端加载已保存数据（原型反写）
var initialSnapshot = useMemo(function () {
return {
transferId: 'TP202604010001',
savedAt: '2026-04-01 11:20',
form: {
transferDate: parseDateTime('2026-04-01 10:30'),
departRegion: ['guangdong', 'guangzhou'],
receiveRegion: ['zhejiang', 'jiaxing'],
reason: '华南业务增量，需将车辆调至华东仓储节点保障运力。'
},
vehicles: [
{ id: 1, brand: '小鹏', model: 'P7', plateNo: '浙A11111' },
{ id: 2, brand: '蔚来', model: 'ET5', plateNo: '浙B22222' }
]
};
}, []);
var formState = useState(initialSnapshot.form);
var form = formState[0];
var setForm = formState[1];
var rowIdRef = React.useRef(3);
var vehiclesState = useState(initialSnapshot.vehicles);
var vehicles = vehiclesState[0];
var setVehicles = vehiclesState[1];
var savedAtState = useState(initialSnapshot.savedAt);
var savedAt = savedAtState[0];
var setSavedAt = savedAtState[1];
var errorsState = useState({});
var errors = errorsState[0];
var setErrors = errorsState[1];
var requirementModalState = useState(false);
var requirementModalOpen = requirementModalState[0];
var setRequirementModalOpen = requirementModalState[1];
var requirementDocContent = [
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「编辑」模块',
'#面包屑：运维管理-车辆业务-调拨管理-编辑',
'页面基于「调拨管理-新增」生成：字段/校验/车辆清单一致。',
'进入页面时反写已保存数据；点击保存后更新“已保存（模拟）”状态。'
].join('\n');
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; });
if (v && v.status === PLATE_ELIGIBLE_STATUS) {
updateRow(index, { plateNo: plateNo, brand: v.brand, model: v.model });
} else {
updateRow(index, { plateNo: plateNo });
}
}, [vehicleDb, updateRow]);
var addRow = useCallback(function () {
setVehicles(function (prev) {
return prev.concat([{ id: rowIdRef.current++, brand: undefined, model: undefined, plateNo: undefined }]);
});
}, []);
var removeRow = useCallback(function (index) {
setVehicles(function (prev) {
var list = prev.slice();
list.splice(index, 1);
if (list.length === 0) {
return [{ id: rowIdRef.current++, brand: undefined, model: undefined, plateNo: undefined }];
}
return list;
});
}, []);
function hasValidVehicle() {
return (vehicles || []).some(function (r) { return r && r.brand && r.model; });
}
function runValidate() {
var e = {};
if (!form.transferDate) e.transferDate = '请选择调拨日期';
if (!form.departRegion || form.departRegion.length < 2) e.departRegion = '请选择出发区域';
if (!form.receiveRegion || form.receiveRegion.length < 2) e.receiveRegion = '请选择接收区域';
if (!String(form.reason || '').trim()) e.reason = '请输入调拨原因';
if (!hasValidVehicle()) e.vehicleList = '请选择调拨车辆';
for (var i = 0; i < (vehicles || []).length; i++) {
var r = vehicles[i] || {};
if (!r.brand && !r.model && !r.plateNo) continue;
if (!r.brand) e['row_' + i + '_brand'] = '请选择品牌';
if (!r.model) e['row_' + i + '_model'] = '请选择型号';
}
setErrors(e);
return { ok: Object.keys(e).length === 0, err: e };
}
var handleSubmitAudit = useCallback(function () {
var result = runValidate();
if (!result.ok) {
if (result.err && result.err.vehicleList) message.error(result.err.vehicleList);
else message.error('请完善必填项');
return;
}
Modal.confirm({
title: '确认提交审核？',
content: '提交后将进入审批流程（原型）。',
okText: '提交审核',
cancelText: '取消',
onOk: function () {
message.success('已提交审核（原型）');
}
});
}, [form, vehicles]);
var handleSave = useCallback(function () {
var nowStr = '';
try {
if (window.dayjs) nowStr = window.dayjs().format('YYYY-MM-DD HH:mm');
} catch (e1) {}
if (!nowStr) {
try {
if (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: React.createElement('span', null, reqStar, '品牌'),
key: 'brand',
width: 160,
render: function (_, r, index) {
return React.createElement(Select, {
placeholder: '请选择品牌',
style: { width: '100%' },
value: r.brand,
onChange: function (v) { updateRow(index, { brand: v, model: undefined, plateNo: undefined }); },
allowClear: true,
showSearch: true,
options: brandOptions,
filterOption: filterOption,
status: errors['row_' + index + '_brand'] || errors.vehicleList ? 'error' : undefined
});
}
},
{
title: React.createElement('span', null, reqStar, '型号'),
key: 'model',
width: 180,
render: function (_, r, index) {
var ms = (r.brand && modelOptionsByBrand[r.brand]) || [];
var opts = ms.map(function (m) { return { value: m, label: m }; });
return React.createElement(Select, {
placeholder: r.brand ? '请选择型号' : '请先选择品牌',
style: { width: '100%' },
value: r.model,
disabled: !r.brand,
onChange: function (v) { updateRow(index, { model: v, plateNo: undefined }); },
allowClear: true,
showSearch: true,
options: opts,
filterOption: filterOption,
status: errors['row_' + index + '_model'] || errors.vehicleList ? 'error' : undefined
});
}
},
{
title: '车牌号',
key: 'plateNo',
width: 240,
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: plateOptionsEligible,
filterOption: filterOption
});
}
},
{
title: '操作',
key: 'action',
width: 80,
fixed: 'right',
render: function (_, __, index) {
return React.createElement(Button, { type: 'link', danger: true, size: 'small', onClick: function () { removeRow(index); } }, '删除');
}
}
];
}, [brandOptions, modelOptionsByBrand, plateOptionsEligible, errors, updateRow, handlePlateChange, removeRow]);
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 } },
'调拨单号：',
initialSnapshot.transferId,
' ｜ ',
'保存状态：',
savedAt ? ('已保存（' + savedAt + '）') : '未保存'
),
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.65, 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,
format: 'YYYY-MM-DD HH:mm',
showTime: { format: 'HH:mm' },
placeholder: '请选择调拨日期',
value: form.transferDate,
onChange: function (v) { updateForm({ transferDate: v }); },
status: errors.transferDate ? 'error' : undefined
}),
errors.transferDate ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.transferDate) : null
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '出发区域'),
React.createElement(Cascader, {
style: controlStyle,
placeholder: '请选择省 / 市',
options: regionOptions,
value: form.departRegion,
onChange: function (v) { updateForm({ departRegion: v }); },
allowClear: true,
status: errors.departRegion ? 'error' : undefined
}),
errors.departRegion ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.departRegion) : null
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '接收区域'),
React.createElement(Cascader, {
style: controlStyle,
placeholder: '请选择省 / 市',
options: regionOptions,
value: form.receiveRegion,
onChange: function (v) { updateForm({ receiveRegion: v }); },
allowClear: true,
status: errors.receiveRegion ? 'error' : undefined
}),
errors.receiveRegion ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveRegion) : null
),
React.createElement(
'div',
{ style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
React.createElement('div', { style: labelStyle }, reqStar, '调拨原因'),
React.createElement(Input.TextArea, {
placeholder: '请输入调拨原因',
value: form.reason,
onChange: function (e) { updateForm({ reason: e.target.value }); },
autoSize: { minRows: 3, maxRows: 6 },
status: errors.reason ? 'error' : undefined
}),
errors.reason ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.reason) : null
)
)
),
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: 720 }
}),
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 }, '取消')
)
)
);
};

576
web端/运维管理/车辆业务/调拨管理-接收信息-司机运输.jsx Normal file
View File

@@ -0,0 +1,576 @@
// 【重要】必须使用 const Component 作为组件变量名
// 运维管理 - 车辆业务 - 调拨管理 - 接收信息（数字化资产 ONEOS 运管平台）
// 本页用例：调拨方式为「司机运输」
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;
var METHOD_DRIVER = '司机运输';
function filterOption(input, option) {
var label = (option && (option.label || option.children)) || '';
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
}
function getMockSnapshot() {
return {
transferDateStr: '2026-03-31 10:30',
departRegionText: '广东省-广州市',
receiveRegionText: '浙江省-嘉兴市',
reason: '华南业务增量，需将车辆调至华东仓储节点保障运力。',
method: METHOD_DRIVER,
transportLeader: '李建国',
transportPhone: '13800138000',
receivePersonName: '王芳',
transferVehicles: [
{
id: 1,
brand: '小鹏',
model: 'P7',
plateNo: '浙A11111',
departMileageKm: '12010.00',
departHydrogen: '60.00',
h2Unit: '%',
departElectricKwh: '55.20',
departParking: '西湖景区停车场'
},
{
id: 2,
brand: '蔚来',
model: 'ET5',
plateNo: '浙B22222',
departMileageKm: '15010.00',
departHydrogen: '22.10',
h2Unit: 'MPa',
departElectricKwh: '58.00',
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 || '',
departMileageKm: r.departMileageKm != null ? String(r.departMileageKm) : '',
departHydrogen: r.departHydrogen != null ? String(r.departHydrogen) : '',
h2Unit: r.h2Unit || '%',
departElectricKwh: r.departElectricKwh != null ? String(r.departElectricKwh) : '',
arriveMileageKm: '',
arriveHydrogen: '',
arriveElectricKwh: ''
};
});
}
var receiveTimeState = useState(null);
var receiveTime = receiveTimeState[0];
var setReceiveTime = receiveTimeState[1];
var receiveAreaTypeState = useState(undefined);
var receiveAreaType = receiveAreaTypeState[0];
var setReceiveAreaType = receiveAreaTypeState[1];
var receiveParkingState = useState(undefined);
var receiveParking = receiveParkingState[0];
var setReceiveParking = receiveParkingState[1];
var receiveAddressState = useState('');
var receiveAddress = receiveAddressState[0];
var setReceiveAddress = receiveAddressState[1];
var parkingOptions = useMemo(function () {
return [
{ value: 'p1', label: '西湖景区停车场' },
{ value: 'p2', label: '宁波江北停车场' },
{ value: 'p3', label: '张江园区停车场' },
{ value: 'p4', label: '天河智慧停车场' }
];
}, []);
var vehiclesState = useState(function () {
return buildVehicleRows(getMockSnapshot());
});
var vehicles = vehiclesState[0];
var setVehicles = vehiclesState[1];
var errorsState = useState({});
var errors = errorsState[0];
var setErrors = errorsState[1];
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.出发区域：反写新增调拨时的出发区域，格式为：省-市；',
'1.3.接收区域：反写新增调拨时的接收区域，格式为：省-市；',
'1.4.调拨原因：反写新增调拨时的调拨原因；',
'',
'2.调拨信息：',
'2.1.调拨方式：反写调拨信息提交时的调拨方式，该用例请列举调拨方式为：司机运输；',
'2.2.运输负责人：反写调拨信息提交时的运输负责人；',
'2.3.运输方联系方式：反写调拨信息提交时的运输方联系方式；',
'2.6.接收人员：反写调拨信息提交时的接收人员姓名；',
'',
'3.接收信息：',
'3.1.接收时间：日期选择器，精确至分钟，格式：YYYY-MM-DD HH:mm；',
'3.2.接收区域：选择器，选项为：停车场、其他；',
'3.3.停车场：必填项，选择器，选择已有停车场，接收区域为停车场时显示；',
'3.4.停车地址：必填项，输入框，支持自定义输入，接收区域为其他时显示；',
'',
'4.调拨车辆清单；',
'#以表格方式展示，反写新增调拨时的整个清单：',
'4.1.品牌：反写新增调拨时的品牌；',
'4.2.型号：反写新增调拨时的型号；',
'4.3.车牌号：反写调拨信息提交时的车牌号；',
'4.4.出发时里程：反写调拨信息提交时的里程数，只有调拨方式为司机运输时显示；',
'4.5.到达时里程：必填项，输入框，支持2位小数，后缀为km，只有调拨方式为司机运输时显示；',
'4.6.出发时氢量：反写调拨信息提交时的氢量，只有调拨方式为司机运输时显示；',
'4.7.到达时氢量：必填项，输入框，支持2位小数，后缀为%或MPa（取自对应车辆该型号对应型号参数下仪表盘单位），只有调拨方式为司机运输时显示；',
'4.8.出发时电量：反写调拨信息提交时的电量，只有调拨方式为司机运输时显示；',
'4.9.到达时电量：必填项，输入框，支持2位小数，后缀为kWh，只有调拨方式为司机运输时显示；',
'',
'5.底部按钮为提交、保存、取消；',
'5.1.提交：点击提交审核校验必填项，提交成功后将调拨车辆最终停车区域同步到车辆列表停车场中；',
'5.2.保存：不校验必填项，只保存已填数据并保存在列表页；'
].join('\n');
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 updateRow = useCallback(function (index, patch) {
setVehicles(function (prev) {
var list = prev.slice();
var cur = list[index] || {};
list[index] = Object.assign({}, cur, patch);
return list;
});
}, []);
function runValidate() {
var e = {};
if (!receiveTime) e.receiveTime = '请选择接收时间';
if (!receiveAreaType) e.receiveAreaType = '请选择接收区域';
if (receiveAreaType === '停车场') {
if (!receiveParking) e.receiveParking = '请选择停车场';
}
if (receiveAreaType === '其他') {
if (!String(receiveAddress || '').trim()) e.receiveAddress = '请输入停车地址';
}
for (var i = 0; i < (vehicles || []).length; i++) {
var r = vehicles[i] || {};
if (!String(r.arriveMileageKm || '').trim()) e['row_' + i + '_arrMile'] = '请输入到达时里程';
if (!String(r.arriveHydrogen || '').trim()) e['row_' + i + '_arrH2'] = '请输入到达时氢量';
if (!String(r.arriveElectricKwh || '').trim()) e['row_' + i + '_arrKwh'] = '请输入到达时电量';
}
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, receiveAreaType, receiveParking, receiveAddress, vehicles]);
var handleSave = useCallback(function () {
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 });
}
},
{
title: '出发时里程',
key: 'departMileageKm',
width: 130,
render: function (_, r) {
return React.createElement(Input, { value: r.departMileageKm || '', disabled: true, addonAfter: 'km' });
}
},
{
title: React.createElement('span', null, reqStar, '到达时里程'),
key: 'arriveMileageKm',
width: 140,
render: function (_, r, index) {
var k = 'row_' + index + '_arrMile';
return React.createElement(Input, {
value: r.arriveMileageKm,
onChange: function (e) { updateRow(index, { arriveMileageKm: toFixed2Input(e.target.value) }); },
placeholder: '0.00',
addonAfter: 'km',
status: errors[k] ? 'error' : undefined
});
}
},
{
title: '出发时氢量',
key: 'departHydrogen',
width: 130,
render: function (_, r) {
return React.createElement(Input, { value: r.departHydrogen || '', disabled: true, addonAfter: r.h2Unit || '-' });
}
},
{
title: React.createElement('span', null, reqStar, '到达时氢量'),
key: 'arriveHydrogen',
width: 140,
render: function (_, r, index) {
var k = 'row_' + index + '_arrH2';
return React.createElement(Input, {
value: r.arriveHydrogen,
onChange: function (e) { updateRow(index, { arriveHydrogen: toFixed2Input(e.target.value) }); },
placeholder: '0.00',
addonAfter: r.h2Unit || '%',
status: errors[k] ? 'error' : undefined
});
}
},
{
title: '出发时电量',
key: 'departElectricKwh',
width: 130,
render: function (_, r) {
return React.createElement(Input, { value: r.departElectricKwh || '', disabled: true, addonAfter: 'kWh' });
}
},
{
title: React.createElement('span', null, reqStar, '到达时电量'),
key: 'arriveElectricKwh',
width: 140,
render: function (_, r, index) {
var k = 'row_' + index + '_arrKwh';
return React.createElement(Input, {
value: r.arriveElectricKwh,
onChange: function (e) { updateRow(index, { arriveElectricKwh: toFixed2Input(e.target.value) }); },
placeholder: '0.00',
addonAfter: 'kWh',
status: errors[k] ? 'error' : undefined
});
}
}
];
}, [errors, updateRow]);
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: 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(
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: snapshot.receivePersonName, readOnly: true, style: readOnlyStyle })
)
)
),
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,
format: 'YYYY-MM-DD HH:mm',
showTime: { format: 'HH:mm' },
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: receiveAreaType,
onChange: function (v) {
setReceiveAreaType(v);
setReceiveParking(undefined);
setReceiveAddress('');
},
allowClear: true,
options: [{ value: '停车场', label: '停车场' }, { value: '其他', label: '其他' }],
status: errors.receiveAreaType ? 'error' : undefined
}),
errors.receiveAreaType ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveAreaType) : null
),
receiveAreaType === '停车场'
? 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
)
: receiveAreaType === '其他'
? React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '停车地址'),
React.createElement(Input, {
placeholder: '请输入停车地址',
style: controlStyle,
value: receiveAddress,
onChange: function (e) { setReceiveAddress(e.target.value); },
status: errors.receiveAddress ? 'error' : undefined
}),
errors.receiveAddress ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveAddress) : null
)
: React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '停车场/停车地址'),
React.createElement(Input, { placeholder: '请先选择接收区域', style: controlStyle, disabled: true })
)
)
),
React.createElement(
Card,
{ title: '调拨车辆清单', style: { marginBottom: 16 } },
React.createElement(Table, {
rowKey: 'id',
columns: vehicleColumns,
dataSource: vehicles,
size: 'small',
pagination: false,
scroll: { x: 'max-content' }
})
),
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 }, '取消')
)
)
);
};

515
web端/运维管理/车辆业务/调拨管理-接收信息-第三方运输.jsx Normal file
View File

@@ -0,0 +1,515 @@
// 【重要】必须使用 const Component 作为组件变量名
// 运维管理 - 车辆业务 - 调拨管理 - 接收信息（数字化资产 ONEOS 运管平台）
// 本页用例：调拨方式为「第三方运输」
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 getMockSnapshot() {
return {
transferDateStr: '2026-03-31',
departRegionText: '广东省-广州市',
receiveRegionText: '浙江省-嘉兴市',
reason: '华南业务增量，需将车辆调至华东仓储节点保障运力。',
method: METHOD_THIRD,
transportLeader: '刘振华',
transportPhone: '13901234567',
transportCost: '8650.50',
transportContractFileLabel: '顺达物流有限公司运输合同.pdf',
receivePersonName: '王芳',
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(null);
var receiveTime = receiveTimeState[0];
var setReceiveTime = receiveTimeState[1];
var receiveAreaTypeState = useState(undefined);
var receiveAreaType = receiveAreaTypeState[0];
var setReceiveAreaType = receiveAreaTypeState[1];
var receiveParkingState = useState(undefined);
var receiveParking = receiveParkingState[0];
var setReceiveParking = receiveParkingState[1];
var receiveAddressState = useState('');
var receiveAddress = receiveAddressState[0];
var setReceiveAddress = receiveAddressState[1];
var vehiclesState = useState(function () {
return buildVehicleRows(getMockSnapshot());
});
var vehicles = vehiclesState[0];
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.调拨情况：',
'1.1.调拨日期：反写新增调拨时的调拨日期，格式为：YYYY-MM-DD HH:mm；',
'1.2.出发区域：反写新增调拨时的出发区域，格式为：省-市；',
'1.3.接收区域：反写新增调拨时的接收区域，格式为：省-市；',
'1.4.调拨原因：反写新增调拨时的调拨原因；',
'',
'2.调拨信息：',
'2.1.调拨方式：反写，本用例为第三方运输；',
'2.2.运输负责人：反写调拨信息提交时的运输负责人；',
'2.3.运输方联系方式：反写调拨信息提交时的运输方联系方式；',
'2.4.运输费用：反写，格式为：xx.xx元；',
'2.5.运输合同附件：反写（样例：xxxxx公司运输合同.pdf），未上传显示为无；',
'2.6.接收人员：反写调拨信息提交时的接收人员姓名；',
'',
'3.接收信息：',
'3.1.接收时间：日期选择器，精确至天，格式：YYYY-MM-DD；',
'3.2.接收区域：选择器，选项为：停车场、其他；',
'3.3.停车场：必填项，选择器，选择已有停车场，接收区域为停车场时显示；',
'3.4.停车地址：必填项，输入框，支持自定义输入，接收区域为其他时显示；',
'',
'4.调拨车辆清单；',
'#以表格方式展示，反写新增调拨时的整个清单：',
'4.1.品牌：反写新增调拨时的品牌；',
'4.2.型号：反写新增调拨时的型号；',
'4.3.车牌号：反写调拨信息提交时的车牌号；显示该车辆对应停车场；',
'',
'5.底部按钮为提交、保存、取消；',
'5.1.提交：点击提交校验必填项；提交后，调拨车辆清单中车辆停车区域会更新至接收区域对应停车场/停车地址；',
'5.2.保存：不校验必填项，只保存已填数据并保存在列表页；'
].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 (!receiveAreaType) e.receiveAreaType = '请选择接收区域';
if (receiveAreaType === '停车场') {
if (!receiveParking) e.receiveParking = '请选择停车场';
}
if (receiveAreaType === '其他') {
if (!String(receiveAddress || '').trim()) e.receiveAddress = '请输入停车地址';
}
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, receiveAreaType, receiveParking, receiveAddress]);
var handleSave = useCallback(function () {
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: 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: 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 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: receiveAreaType,
onChange: function (v) {
setReceiveAreaType(v);
setReceiveParking(undefined);
setReceiveAddress('');
},
allowClear: true,
options: [{ value: '停车场', label: '停车场' }, { value: '其他', label: '其他' }],
status: errors.receiveAreaType ? 'error' : undefined
}),
errors.receiveAreaType ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveAreaType) : null
),
receiveAreaType === '停车场'
? 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
)
: receiveAreaType === '其他'
? React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '停车地址'),
React.createElement(Input, {
placeholder: '请输入停车地址',
style: controlStyle,
value: receiveAddress,
onChange: function (e) { setReceiveAddress(e.target.value); },
status: errors.receiveAddress ? 'error' : undefined
}),
errors.receiveAddress ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveAddress) : null
)
: React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '停车场/停车地址'),
React.createElement(Input, { placeholder: '请先选择接收区域', style: controlStyle, disabled: true })
)
)
),
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 }, '取消')
)
)
);
};

447
web端/运维管理/车辆业务/调拨管理-接收记录.jsx
View File

@@ -1,447 +0,0 @@
// 【重要】必须使用 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 getInitialReceiveDate() {
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 };
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 departSnapshotByPlate = useMemo(function () {
return {
'粤A12345': { departMileageKm: '15230.12', departHydrogen: '28.30', h2Unit: 'MPa', departElectricKwh: '68.40' },
'粤B11111': { departMileageKm: '8020.50', departHydrogen: '55.00', h2Unit: '%', departElectricKwh: '62.10' },
'浙A11111': { departMileageKm: '12010.00', departHydrogen: '60.00', h2Unit: '%', departElectricKwh: '55.20' },
'浙B22222': { departMileageKm: '15010.00', departHydrogen: '22.10', h2Unit: 'MPa', departElectricKwh: '58.00' },
'沪A30003': { departMileageKm: '9800.00', departHydrogen: '26.00', h2Unit: 'MPa', departElectricKwh: '69.00' }
};
}, []);
var plateOptions = useMemo(function () {
return vehicleDb.map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
}, [vehicleDb]);
var situationState = useState({
transferDateStr: '2026-02-20',
departRegionText: '广东省-广州市',
receiveRegionText: '浙江省-杭州市',
receivePerson: '王芳',
method: '第三方运输',
reason: '场站资源调整，车辆调度至杭州项目点。',
carrierName: '顺丰同城运输',
carrierPhone: '400-123-4567',
receiveDate: getInitialReceiveDate()
});
var situation = situationState[0];
var setSituation = situationState[1];
var errorsState = useState({});
var errors = errorsState[0];
var setErrors = errorsState[1];
var requirementModalState = useState(false);
var requirementModalOpen = requirementModalState[0];
var setRequirementModalOpen = requirementModalState[1];
var requirementDocContent = [
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「接收记录」模块',
'#面包屑：运维管理-车辆业务-调拨管理-接收记录',
'页面采用多个卡片的方式进行展示',
'1.调拨情况：',
'1.1.调拨日期：显示调拨日期，格式为：YYYY-MM-DD；',
'1.2.出发区域：显示出发区域，格式为省-市2级；',
'1.3.接收区域：显示接收区域，格式为省-市2级；',
'1.4.接收人：显示接收人姓名；',
'1.5.调拨方式：显示调拨方式，选项为：第三方运输、司机驾驶；',
'1.6.调拨原因：显示调拨原因；',
'1.7.运输方名称：显示运输方名称；',
'1.8.运输方联系方式：显示运输方联系方式；',
'1.9.接收日期：日期选择器，精确至天；',
'',
'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.操作：无；'
].join('\n');
var vehiclesState = useState([
{
id: 1,
plateNo: '粤A12345',
vehicleType: '厢式货车',
brand: '东风',
model: 'DFH1180',
departParking: '天河智慧停车场',
departMileageKm: '15230.12',
departHydrogen: '28.30',
h2Unit: 'MPa',
departElectricKwh: '68.40',
receiveMileageKm: '',
receiveHydrogen: '',
receiveElectricKwh: ''
},
{
id: 2,
plateNo: '浙A11111',
vehicleType: 'SUV',
brand: '小鹏',
model: 'P7',
departParking: '西湖景区停车场',
departMileageKm: '12010.00',
departHydrogen: '60.00',
h2Unit: '%',
departElectricKwh: '55.20',
receiveMileageKm: '',
receiveHydrogen: '',
receiveElectricKwh: ''
}
]);
var vehicles = vehiclesState[0];
var setVehicles = vehiclesState[1];
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 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; });
var snap = departSnapshotByPlate[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 : (snap.h2Unit || ''),
departMileageKm: snap.departMileageKm != null ? String(snap.departMileageKm) : '',
departHydrogen: snap.departHydrogen != null ? String(snap.departHydrogen) : '',
departElectricKwh: snap.departElectricKwh != null ? String(snap.departElectricKwh) : ''
});
}, [vehicleDb, departSnapshotByPlate, updateRow]);
function validate() {
var e = {};
if (!situation.receiveDate) e.receiveDate = '请选择接收日期';
for (var i = 0; i < (vehicles || []).length; i++) {
var r = vehicles[i] || {};
if (!String(r.plateNo || '').trim()) continue;
if (!String(r.receiveMileageKm || '').trim()) e['row_' + i + '_receiveMileageKm'] = '请输入接收里程';
if (!String(r.receiveHydrogen || '').trim()) e['row_' + i + '_receiveHydrogen'] = '请输入接收氢量';
if (!String(r.receiveElectricKwh || '').trim()) e['row_' + i + '_receiveElectricKwh'] = '请输入接收电量';
}
setErrors(e);
return Object.keys(e).length === 0;
}
var handleSubmit = useCallback(function () {
if (!validate()) {
message.error('请完善接收日期及车辆接收信息');
return;
}
Modal.confirm({
title: '确认提交接收记录？',
content: '提交后接收数据将归档（原型）。',
okText: '确定',
cancelText: '取消',
onOk: function () {
message.success('接收记录已提交（原型）');
}
});
}, [situation, vehicles]);
var handleBack = useCallback(function () {
message.info('返回调拨管理页（原型）');
}, []);
var vehicleColumns = useMemo(function () {
return [
{
title: '车牌号',
key: 'plateNo',
width: 130,
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
});
}
},
{
title: '车辆类型',
key: 'vehicleType',
width: 110,
render: function (_, r) {
return React.createElement(Input, { value: r.vehicleType ? r.vehicleType : '请先选择车辆', disabled: true });
}
},
{
title: '品牌',
key: 'brand',
width: 90,
render: function (_, r) {
return React.createElement(Input, { value: r.brand ? r.brand : '请先选择车辆', disabled: true });
}
},
{
title: '型号',
key: 'model',
width: 110,
render: function (_, r) {
return React.createElement(Input, { value: r.model ? r.model : '请先选择车辆', disabled: true });
}
},
{
title: '出发停车场',
key: 'departParking',
width: 140,
render: function (_, r) {
return React.createElement(Input, { value: r.departParking ? r.departParking : '请先选择车辆', disabled: true });
}
},
{
title: '出发里程',
key: 'departMileageKm',
width: 120,
render: function (_, r) {
return React.createElement(Input, { value: r.departMileageKm || '', disabled: true, addonAfter: 'km' });
}
},
{
title: React.createElement('span', null, reqStar, '接收里程'),
key: 'receiveMileageKm',
width: 120,
render: function (_, r, index) {
var k = 'row_' + index + '_receiveMileageKm';
return React.createElement(Input, {
value: r.receiveMileageKm,
onChange: function (e) { updateRow(index, { receiveMileageKm: toFixed2Input(e.target.value) }); },
placeholder: '0.00',
addonAfter: 'km',
status: errors[k] ? 'error' : undefined
});
}
},
{
title: '出发氢量',
key: 'departHydrogen',
width: 120,
render: function (_, r) {
var unit = r.h2Unit || '';
return React.createElement(Input, { value: r.departHydrogen || '', disabled: true, addonAfter: unit || '-' });
}
},
{
title: React.createElement('span', null, reqStar, '接收氢量'),
key: 'receiveHydrogen',
width: 120,
render: function (_, r, index) {
var k = 'row_' + index + '_receiveHydrogen';
var unit = r.h2Unit || '%/MPa';
return React.createElement(Input, {
value: r.receiveHydrogen,
onChange: function (e) { updateRow(index, { receiveHydrogen: toFixed2Input(e.target.value) }); },
placeholder: '0.00',
addonAfter: unit,
status: errors[k] ? 'error' : undefined
});
}
},
{
title: '出发电量',
key: 'departElectricKwh',
width: 120,
render: function (_, r) {
return React.createElement(Input, { value: r.departElectricKwh || '', disabled: true, addonAfter: 'kWh' });
}
},
{
title: React.createElement('span', null, reqStar, '接收电量'),
key: 'receiveElectricKwh',
width: 120,
render: function (_, r, index) {
var k = 'row_' + index + '_receiveElectricKwh';
return React.createElement(Input, {
value: r.receiveElectricKwh,
onChange: function (e) { updateRow(index, { receiveElectricKwh: toFixed2Input(e.target.value) }); },
placeholder: '0.00',
addonAfter: 'kWh',
status: errors[k] ? 'error' : undefined
});
}
}
];
}, [plateOptions, errors, handlePlateChange, updateRow]);
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(Input, { value: situation.transferDateStr, disabled: true, style: controlStyle })
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '出发区域'),
React.createElement(Input, { value: situation.departRegionText, disabled: true, style: controlStyle })
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '接收区域'),
React.createElement(Input, { value: situation.receiveRegionText, disabled: true, style: controlStyle })
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '接收人'),
React.createElement(Input, { value: situation.receivePerson, disabled: true, style: controlStyle })
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '调拨方式'),
React.createElement(Input, { value: situation.method, disabled: true, style: controlStyle })
),
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: situation.reason, disabled: true, autoSize: { minRows: 2, maxRows: 4 } })
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '运输方名称'),
React.createElement(Input, { value: situation.carrierName, disabled: true, style: controlStyle })
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '运输方联系方式'),
React.createElement(Input, { value: situation.carrierPhone, disabled: true, style: controlStyle })
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '接收日期'),
React.createElement(DatePicker, {
style: controlStyle,
format: 'YYYY-MM-DD',
placeholder: '请选择接收日期',
value: situation.receiveDate,
onChange: function (v) { setSituation(function (p) { return Object.assign({}, p, { receiveDate: v }); }); },
status: errors.receiveDate ? 'error' : undefined
}),
errors.receiveDate ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveDate) : null
)
)
),
React.createElement(Card, { title: '调拨车辆清单', style: { marginBottom: 16 } },
React.createElement(Table, {
rowKey: 'id',
columns: vehicleColumns,
dataSource: vehicles,
size: 'small',
pagination: false,
scroll: { x: 1400 }
})
),
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: handleBack }, '返回')
)
)
);
};

618
web端/运维管理/车辆业务/调拨管理-新增.jsx
View File

@@ -1,5 +1,5 @@
// 【重要】必须使用 const Component 作为组件变量名
// 运维管理 - 车辆业务 - 调拨管理 - 新增
// 运维管理 - 车辆业务 - 调拨管理 - 新增（数字化资产 ONEOS 运管平台）
const Component = function () {
var useState = React.useState;
@@ -9,14 +9,14 @@ const Component = function () {
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 Card = antd.Card;
var Cascader = antd.Cascader;
var Table = antd.Table;
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) {
@@ -24,13 +24,16 @@ const Component = function () {
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
}
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
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 reqStarStyle = { color: '#ff4d4f', marginRight: 4 };
var reqStar = React.createElement('span', { style: reqStarStyle }, '*');
/** 车牌可选车辆运营状态（需求：仅「可运营」） */
var PLATE_ELIGIBLE_STATUS = '可运营';
var regionOptions = useMemo(function () {
return [
{ value: 'zhejiang', label: '浙江省', children: [{ value: 'hangzhou', label: '杭州市' }, { value: 'ningbo', label: '宁波市' }, { value: 'jiaxing', label: '嘉兴市' }] },
@@ -39,48 +42,51 @@ const Component = function () {
];
}, []);
// 用户表（原型：全量用户）
var userOptions = useMemo(function () {
return [
{ value: '张明', label: '张明' },
{ value: '王芳', label: '王芳' },
{ value: '李华', label: '李华' },
{ value: '赵强', label: '赵强' },
{ value: '陈静', label: '陈静' }
];
var brandOptions = useMemo(function () {
return ['东风', '比亚迪', '小鹏', '蔚来', '福田', '飞驰', '宇通'].map(function (b) {
return { value: b, label: b };
});
}, []);
var methodOptions = useMemo(function () {
return [
{ value: '第三方运输', label: '第三方运输' },
{ value: '司机驾驶', label: '司机驾驶' }
];
var modelOptionsByBrand = useMemo(function () {
return {
东风: ['DFH1180', 'DFH5160'],
比亚迪: ['汉', '唐'],
小鹏: ['P7', 'G9'],
蔚来: ['ET5', 'ES8'],
福田: ['BJ1180'],
飞驰: ['FSQ4250'],
宇通: ['ZKH4250']
};
}, []);
// 车辆表（用于车牌选择与反写）
/** 车辆主数据（原型）：仅运营状态为「可运营」的车牌出现在车牌下拉里 */
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' }
{ plateNo: '粤A12345', status: '可运营', brand: '东风', model: 'DFH1180' },
{ plateNo: '粤B11111', status: '可运营', brand: '比亚迪', model: '汉' },
{ plateNo: '浙A11111', status: '可运营', brand: '小鹏', model: 'P7' },
{ plateNo: '浙B22222', status: '可运营', brand: '蔚来', model: 'ET5' },
{ plateNo: '沪A30003', status: '可运营', brand: '福田', model: 'BJ1180' },
{ plateNo: '粤C99999', status: '维修中', brand: '东风', model: 'DFH1180' }
];
}, []);
var plateOptions = useMemo(function () {
return vehicleDb.map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
var plateOptionsEligible = useMemo(function () {
return vehicleDb
.filter(function (v) {
return v.status === PLATE_ELIGIBLE_STATUS;
})
.map(function (v) {
return { value: v.plateNo, label: v.plateNo };
});
}, [vehicleDb]);
var formState = useState({
transferDate: null,
departRegion: undefined,
receiveRegion: undefined,
receivePerson: undefined,
method: undefined,
reason: '',
carrierName: '',
carrierPhone: ''
reason: ''
});
var form = formState[0];
var setForm = formState[1];
@@ -95,70 +101,43 @@ const Component = function () {
var requirementDocContent = [
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「新增」模块',
'#面包屑：运维管理-车辆业务-调拨管理-新增',
'页面采用多个卡片的方式进行展示',
'',
'1.调拨情况：',
'1.1.调拨日期：必填项，日期选择器，精确至天，格式为：YYYY-MM-DD；',
'1.1.调拨日期：必填项，日期选择器，精确至分钟，格式为：YYYY-MM-DD HH:mm；',
'1.2.出发区域：必填项，地区选择器，支持省-市2级；',
'1.3.接收区域：必填项，地区选择器，支持省-市2级；',
'1.4.接收人：必填项，选择器，支持输入框模糊搜索下拉匹配对应选项，接收人取自用户表所有用户；',
'1.5.调拨方式：必填项，选择器，默认提示：请选择调拨方式，选项为：第三方运输、司机驾驶；',
'1.6.调拨原因：必填项，文本域，支持用户自定义输入；',
'1.7.运输方名称：必填项，输入框，默认提示：请输入运输方名称/司机姓名；',
'1.8.运输方联系方式：必填项，输入框，默认提示：请输入运输方/司机联系方式；',
'1.4.调拨原因：必填项，文本域，支持用户自定义输入；',
'',
'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.底部为新增一行，铺满整行；',
'需要至少提交一辆车才能完成调拨，否则提交审核时提示：请选择调拨车辆；'
'#以表格方式展示：',
'2.1.品牌：必填，选择器；',
'2.2.型号：必填，选择器；',
'2.3.车牌号：选择器，只能选择运营状态为：可运营的车辆；',
'2.4.操作：删除；',
'2.5.表格下方为新增一行，铺满整行；',
'需要至少提交一辆车才能完成调拨，否则提交审核时提示：请选择调拨车辆；',
'',
'3.底部按钮为提交审核、保存、取消；',
'3.1.提交审核：点击提交审核校验必填项',
'3.2.保存：不校验必填项，只保存已填数据并保存在列表页；'
].join('\n');
var rowIdRef = React.useRef(2);
var vehiclesState = useState([
{
id: 1,
plateNo: undefined,
vehicleType: '',
brand: '',
model: '',
departParking: '',
departMileageKm: '',
departHydrogen: '',
h2Unit: '',
departElectricKwh: ''
brand: undefined,
model: undefined,
plateNo: undefined
}
]);
var vehicles = vehiclesState[0];
var setVehicles = vehiclesState[1];
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, '');
}
// 最多两位小数（输入态不强制补0）
if (firstDot >= 0) {
var a = s.split('.');
s = a[0] + '.' + (a[1] || '').slice(0, 2);
}
return s;
}
var updateForm = useCallback(function (patch) {
setForm(function (p) { return Object.assign({}, p, patch); });
setForm(function (p) {
return Object.assign({}, p, patch);
});
}, []);
var updateRow = useCallback(function (index, patch) {
@@ -170,32 +149,34 @@ const Component = function () {
});
}, []);
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 handlePlateChange = useCallback(
function (index, plateNo) {
var v = vehicleDb.find(function (x) {
return x.plateNo === plateNo;
});
if (v && v.status === PLATE_ELIGIBLE_STATUS) {
updateRow(index, {
plateNo: plateNo,
brand: v.brand,
model: v.model
});
} else {
updateRow(index, { plateNo: plateNo });
}
},
[vehicleDb, updateRow]
);
var addRow = useCallback(function () {
setVehicles(function (prev) {
return prev.concat([{
id: rowIdRef.current++,
plateNo: undefined,
vehicleType: '',
brand: '',
model: '',
departParking: '',
departMileageKm: '',
departHydrogen: '',
h2Unit: '',
departElectricKwh: ''
}]);
return prev.concat([
{
id: rowIdRef.current++,
brand: undefined,
model: undefined,
plateNo: undefined
}
]);
});
}, []);
@@ -204,54 +185,48 @@ const Component = function () {
var list = prev.slice();
list.splice(index, 1);
if (list.length === 0) {
return [{
id: rowIdRef.current++,
plateNo: undefined,
vehicleType: '',
brand: '',
model: '',
departParking: '',
departMileageKm: '',
departHydrogen: '',
h2Unit: '',
departElectricKwh: ''
}];
return [
{
id: rowIdRef.current++,
brand: undefined,
model: undefined,
plateNo: undefined
}
];
}
return list;
});
}, []);
function validate() {
function hasValidVehicle() {
return (vehicles || []).some(function (r) {
return r && r.brand && r.model;
});
}
function runValidate() {
var e = {};
if (!form.transferDate) e.transferDate = '请选择调拨日期';
if (!form.departRegion || form.departRegion.length < 2) e.departRegion = '请选择出发区域';
if (!form.receiveRegion || form.receiveRegion.length < 2) e.receiveRegion = '请选择接收区域';
if (!form.receivePerson) e.receivePerson = '请选择接收人';
if (!form.method) e.method = '请选择调拨方式';
if (!String(form.reason || '').trim()) e.reason = '请输入调拨原因';
if (!String(form.carrierName || '').trim()) e.carrierName = '请输入运输方名称/司机姓名';
if (!String(form.carrierPhone || '').trim()) e.carrierPhone = '请输入运输方/司机联系方式';
var effectiveRows = (vehicles || []).filter(function (r) { return r && String(r.plateNo || '').trim(); });
if (effectiveRows.length === 0) e.vehicleList = '请选择调拨车辆';
if (!hasValidVehicle()) e.vehicleList = '请选择调拨车辆';
for (var i = 0; i < (vehicles || []).length; i++) {
var r = vehicles[i] || {};
if (!String(r.plateNo || '').trim()) continue;
if (!String(r.departMileageKm || '').trim()) e['row_' + i + '_departMileageKm'] = '请输入出发里程';
if (!String(r.departHydrogen || '').trim()) e['row_' + i + '_departHydrogen'] = '请输入出发氢量';
if (!String(r.departElectricKwh || '').trim()) e['row_' + i + '_departElectricKwh'] = '请输入出发电量';
if (!r.brand && !r.model && !r.plateNo) continue;
if (!r.brand) e['row_' + i + '_brand'] = '请选择品牌';
if (!r.model) e['row_' + i + '_model'] = '请选择型号';
}
setErrors(e);
return Object.keys(e).length === 0;
return { ok: Object.keys(e).length === 0, err: e };
}
var handleSubmitAudit = useCallback(function () {
if (!validate()) {
if (errors && errors.vehicleList) message.error(errors.vehicleList);
else if (!form.transferDate) message.error('请完善必填项后再提交');
else message.error('请完善必填项后再提交');
var result = runValidate();
if (!result.ok) {
if (result.err && result.err.vehicleList) message.error(result.err.vehicleList);
else message.error('请完善必填项');
return;
}
Modal.confirm({
@@ -263,10 +238,10 @@ const Component = function () {
message.success('已提交审核（原型）');
}
});
}, [form, errors]);
}, [form, vehicles]);
var handleSave = useCallback(function () {
message.info('已保存（原型，不做校验）');
message.success('已保存至列表页（原型：不校验必填项，仅保存当前已填数据）');
}, []);
var handleCancel = useCallback(function () {
@@ -281,240 +256,202 @@ const Component = function () {
});
}, []);
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
});
var vehicleColumns = useMemo(
function () {
return [
{
title: React.createElement('span', null, reqStar, '品牌'),
key: 'brand',
width: 160,
render: function (_, r, index) {
return React.createElement(Select, {
placeholder: '请选择品牌',
style: { width: '100%' },
value: r.brand,
onChange: function (v) {
updateRow(index, { brand: v, model: undefined, plateNo: undefined });
},
allowClear: true,
showSearch: true,
options: brandOptions,
filterOption: filterOption,
status: errors['row_' + index + '_brand'] || errors.vehicleList ? 'error' : undefined
});
}
},
{
title: React.createElement('span', null, reqStar, '型号'),
key: 'model',
width: 180,
render: function (_, r, index) {
var ms = (r.brand && modelOptionsByBrand[r.brand]) || [];
var opts = ms.map(function (m) {
return { value: m, label: m };
});
return React.createElement(Select, {
placeholder: r.brand ? '请选择型号' : '请先选择品牌',
style: { width: '100%' },
value: r.model,
disabled: !r.brand,
onChange: function (v) {
updateRow(index, { model: v, plateNo: undefined });
},
allowClear: true,
showSearch: true,
options: opts,
filterOption: filterOption,
status: errors['row_' + index + '_model'] || errors.vehicleList ? 'error' : undefined
});
}
},
{
title: '车牌号',
key: 'plateNo',
width: 240,
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: plateOptionsEligible,
filterOption: filterOption
});
}
},
{
title: '操作',
key: 'action',
width: 80,
fixed: 'right',
render: function (_, __, index) {
return React.createElement(Button, { type: 'link', danger: true, size: 'small', onClick: function () { removeRow(index); } }, '删除');
}
}
},
{
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: 'departMileageKm',
width: 140,
render: function (_, r, index) {
var k = 'row_' + index + '_departMileageKm';
return React.createElement(Input, {
value: r.departMileageKm,
onChange: function (e) { updateRow(index, { departMileageKm: toFixed2Input(e.target.value) }); },
placeholder: '0.00',
addonAfter: 'km',
status: errors[k] ? 'error' : undefined
});
}
},
{
title: React.createElement('span', null, reqStar, '出发氢量'),
key: 'departHydrogen',
width: 140,
render: function (_, r, index) {
var k = 'row_' + index + '_departHydrogen';
var unit = r.h2Unit || '%/MPa';
return React.createElement(Input, {
value: r.departHydrogen,
onChange: function (e) { updateRow(index, { departHydrogen: toFixed2Input(e.target.value) }); },
placeholder: '0.00',
addonAfter: unit,
status: errors[k] ? 'error' : undefined
});
}
},
{
title: React.createElement('span', null, reqStar, '出发电量'),
key: 'departElectricKwh',
width: 150,
render: function (_, r, index) {
var k = 'row_' + index + '_departElectricKwh';
return React.createElement(Input, {
value: r.departElectricKwh,
onChange: function (e) { updateRow(index, { departElectricKwh: 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]);
];
},
[brandOptions, modelOptionsByBrand, plateOptionsEligible, errors, updateRow, handlePlateChange, 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: '新增' }] }),
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(
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.65, 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(
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,
format: 'YYYY-MM-DD',
format: 'YYYY-MM-DD HH:mm',
showTime: { format: 'HH:mm' },
placeholder: '请选择调拨日期',
value: form.transferDate,
onChange: function (v) { updateForm({ transferDate: v }); },
onChange: function (v) {
updateForm({ transferDate: v });
},
status: errors.transferDate ? 'error' : undefined
}),
errors.transferDate ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.transferDate) : null
),
React.createElement('div', { style: formItemStyle },
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '出发区域'),
React.createElement(Cascader, {
style: controlStyle,
placeholder: '请选择出发区域',
placeholder: '请选择省 / 市',
options: regionOptions,
value: form.departRegion,
onChange: function (v) { updateForm({ departRegion: v }); },
onChange: function (v) {
updateForm({ departRegion: v });
},
allowClear: true,
status: errors.departRegion ? 'error' : undefined
}),
errors.departRegion ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.departRegion) : null
),
React.createElement('div', { style: formItemStyle },
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '接收区域'),
React.createElement(Cascader, {
style: controlStyle,
placeholder: '请选择接收区域',
placeholder: '请选择省 / 市',
options: regionOptions,
value: form.receiveRegion,
onChange: function (v) { updateForm({ receiveRegion: v }); },
onChange: function (v) {
updateForm({ receiveRegion: v });
},
allowClear: true,
status: errors.receiveRegion ? 'error' : undefined
}),
errors.receiveRegion ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveRegion) : null
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '接收人'),
React.createElement(Select, {
placeholder: '请输入或选择接收人',
style: controlStyle,
value: form.receivePerson,
onChange: function (v) { updateForm({ receivePerson: v }); },
allowClear: true,
showSearch: true,
options: userOptions,
filterOption: filterOption,
status: errors.receivePerson ? 'error' : undefined
}),
errors.receivePerson ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receivePerson) : null
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '调拨方式'),
React.createElement(Select, {
placeholder: '请选择调拨方式',
style: controlStyle,
value: form.method,
onChange: function (v) { updateForm({ method: v }); },
allowClear: true,
options: methodOptions,
status: errors.method ? 'error' : undefined
}),
errors.method ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.method) : null
),
React.createElement('div', { style: formItemStyle }),
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
React.createElement(
'div',
{ style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
React.createElement('div', { style: labelStyle }, reqStar, '调拨原因'),
React.createElement(Input.TextArea, {
placeholder: '请输入调拨原因',
value: form.reason,
onChange: function (e) { updateForm({ reason: e.target.value }); },
onChange: function (e) {
updateForm({ reason: e.target.value });
},
autoSize: { minRows: 3, maxRows: 6 },
status: errors.reason ? 'error' : undefined
}),
errors.reason ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.reason) : null
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '运输方名称'),
React.createElement(Input, {
placeholder: '请输入运输方名称/司机姓名',
value: form.carrierName,
onChange: function (e) { updateForm({ carrierName: e.target.value }); },
status: errors.carrierName ? 'error' : undefined
}),
errors.carrierName ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.carrierName) : null
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '运输方联系方式'),
React.createElement(Input, {
placeholder: '请输入运输方/司机联系方式',
value: form.carrierPhone,
onChange: function (e) { updateForm({ carrierPhone: e.target.value }); },
status: errors.carrierPhone ? 'error' : undefined
}),
errors.carrierPhone ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.carrierPhone) : null
),
React.createElement('div', { style: formItemStyle })
)
)
),
React.createElement(Card, { title: '调拨车辆清单', style: { marginBottom: 16 } },
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',
@@ -522,26 +459,28 @@ const Component = function () {
dataSource: vehicles,
size: 'small',
pagination: false,
scroll: { x: 1100 }
scroll: { x: 720 }
}),
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(
'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 }, '取消')
@@ -549,4 +488,3 @@ const Component = function () {
)
);
};

490
web端/运维管理/车辆业务/调拨管理-查看.jsx
View File

@@ -4,298 +4,338 @@
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 Card = antd.Card;
var DatePicker = antd.DatePicker;
var Cascader = antd.Cascader;
var Table = antd.Table;
var Input = antd.Input;
var Modal = antd.Modal;
var Select = antd.Select;
var Table = antd.Table;
var message = antd.message;
function getInitialTransferDate() {
function filterOption(input, option) {
var label = (option && (option.label || option.children)) || '';
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
}
function parseDateTime(s) {
var str = String(s || '').trim();
if (!str) return null;
try {
if (window.dayjs) return window.dayjs('2026-02-20');
if (window.dayjs) return window.dayjs(str);
} catch (e1) {}
try {
if (window.moment) return window.moment('2026-02-20', 'YYYY-MM-DD');
if (window.moment) return window.moment(str, ['YYYY-MM-DD HH:mm', 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD'], true);
} catch (e2) {}
return null;
}
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
function getMockSnapshot() {
return {
transferDateStr: '2026-03-31 10:30',
departRegionText: '广东省-广州市',
receiveRegionText: '浙江省-嘉兴市',
reason: '华南业务增量，需将车辆调至华东仓储节点保障运力。',
method: '司机运输',
transportLeader: '李建国',
transportPhone: '13800138000',
receivePersonName: '王芳',
receiveTimeStr: '2026-04-01 15:20',
receiveAreaType: '停车场',
receiveParkingName: '西湖景区停车场',
receiveAddress: '',
transferVehicles: [
{
id: 1,
brand: '小鹏',
model: 'P7',
plateNo: '浙A11111',
departMileageKm: '12010.00',
departHydrogen: '60.00',
h2Unit: '%',
departElectricKwh: '55.20',
departParking: '西湖景区停车场',
arriveMileageKm: '12110.20',
arriveHydrogen: '58.00',
arriveElectricKwh: '52.30'
},
{
id: 2,
brand: '蔚来',
model: 'ET5',
plateNo: '浙B22222',
departMileageKm: '15010.00',
departHydrogen: '22.10',
h2Unit: 'MPa',
departElectricKwh: '58.00',
departParking: '宁波江北停车场',
arriveMileageKm: '15120.00',
arriveHydrogen: '21.80',
arriveElectricKwh: '57.50'
}
]
};
}
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 regionOptions = useMemo(function () {
var snapshot = useMemo(function () { return getMockSnapshot(); }, []);
var parkingOptions = useMemo(function () {
return [
{ value: 'zhejiang', label: '浙江省', children: [{ value: 'hangzhou', label: '杭州市' }, { value: 'ningbo', label: '宁波市' }, { value: 'jiaxing', label: '嘉兴市' }] },
{ value: 'shanghai', label: '上海市', children: [{ value: 'shanghai', label: '上海市' }] },
{ value: 'guangdong', label: '广东省', children: [{ value: 'guangzhou', label: '广州市' }, { value: 'shenzhen', label: '深圳市' }, { value: 'dongguan', label: '东莞市' }] }
{ value: '西湖景区停车场', label: '西湖景区停车场' },
{ value: '宁波江北停车场', label: '宁波江北停车场' },
{ value: '张江园区停车场', label: '张江园区停车场' },
{ value: '天河智慧停车场', label: '天河智慧停车场' }
];
}, []);
var userOptions = useMemo(function () {
return [
{ value: '张明', label: '张明' },
{ value: '王芳', label: '王芳' },
{ value: '李华', label: '李华' },
{ value: '赵强', label: '赵强' },
{ value: '陈静', label: '陈静' }
];
}, []);
var methodOptions = useMemo(function () {
return [
{ value: '第三方运输', label: '第三方运输' },
{ value: '司机驾驶', label: '司机驾驶' }
];
}, []);
// 原型：从详情接口拉取的只读数据（与新增/编辑字段一致）
var form = {
transferDate: getInitialTransferDate(),
departRegion: ['guangdong', 'guangzhou'],
receiveRegion: ['zhejiang', 'hangzhou'],
receivePerson: '王芳',
method: '第三方运输',
reason: '场站资源调整，车辆需从广州仓库调度至杭州项目点，保障项目运力。',
carrierName: '顺丰同城运输',
carrierPhone: '400-123-4567'
};
var vehicles = [
{
id: 1,
plateNo: '粤A12345',
vehicleType: '厢式货车',
brand: '东风',
model: 'DFH1180',
departParking: '天河智慧停车场',
departMileageKm: '15230.12',
departHydrogen: '28.30',
h2Unit: 'MPa',
departElectricKwh: '68.40'
},
{
id: 2,
plateNo: '浙A11111',
vehicleType: 'SUV',
brand: '小鹏',
model: 'P7',
departParking: '西湖景区停车场',
departMileageKm: '12010.00',
departHydrogen: '60.00',
h2Unit: '%',
departElectricKwh: '55.20'
}
];
var requirementModalState = useState(false);
var requirementModalOpen = requirementModalState[0];
var setRequirementModalOpen = requirementModalState[1];
var requirementDocContent = [
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「查看」模块',
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「查看」模块（只读）',
'#面包屑：运维管理-车辆业务-调拨管理-查看',
'页面布局与字段与「调拨管理-新增」一致，所有表单项均为只读，仅供查询展示。',
'',
'1.调拨情况：调拨日期、出发/接收区域、接收人、调拨方式、调拨原因、运输方名称、运输方联系方式 — 全部禁用不可编辑。',
'2.调拨车辆清单：车牌号、车辆类型、品牌、型号、出发停车场、出发里程、出发氢量、出发电量 — 全部禁用；不提供新增行与删除操作。',
'3.底部仅提供「返回」按钮，返回调拨管理列表（原型）。'
'参照「调拨管理-接收信息-司机运输」页面结构生成查看页：',
'1.调拨情况（只读）',
'2.调拨信息（只读）',
'3.接收信息（只读）',
'4.调拨车辆清单（只读，包含到达时里程/氢量/电量）',
'5.底部按钮仅保留「返回」。'
].join('\n');
var vehicleColumns = useMemo(function () {
return [
{
title: '车牌号',
key: 'plateNo',
width: 140,
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: r.vehicleType || '-', disabled: true });
}
},
{
title: '品牌',
key: 'brand',
width: 100,
render: function (_, r) {
return React.createElement(Input, { value: r.brand || '-', disabled: true });
}
},
{
title: '型号',
key: 'model',
width: 120,
render: function (_, r) {
return React.createElement(Input, { value: r.model || '-', disabled: true });
}
},
{
title: '出发停车场',
key: 'departParking',
width: 160,
render: function (_, r) {
return React.createElement(Input, { value: r.departParking || '-', disabled: true });
}
},
{
title: '出发里程',
key: 'departMileageKm',
width: 140,
render: function (_, r) {
return React.createElement(Input, { value: r.departMileageKm || '-', disabled: true, addonAfter: 'km' });
}
},
{
title: '出发氢量',
key: 'departHydrogen',
width: 140,
render: function (_, r) {
var unit = r.h2Unit || '';
return React.createElement(Input, { value: r.departHydrogen || '-', disabled: true, addonAfter: unit || '-' });
}
},
{
title: '出发电量',
key: 'departElectricKwh',
width: 150,
render: function (_, r) {
return React.createElement(Input, { value: r.departElectricKwh || '-', disabled: true, addonAfter: 'kWh' });
}
}
{ 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 }); } },
{ title: '出发时里程', key: 'departMileageKm', width: 130, render: function (_, r) { return React.createElement(Input, { value: r.departMileageKm || '', disabled: true, addonAfter: 'km' }); } },
{ title: '到达时里程', key: 'arriveMileageKm', width: 140, render: function (_, r) { return React.createElement(Input, { value: r.arriveMileageKm || '', disabled: true, addonAfter: 'km' }); } },
{ title: '出发时氢量', key: 'departHydrogen', width: 130, render: function (_, r) { return React.createElement(Input, { value: r.departHydrogen || '', disabled: true, addonAfter: r.h2Unit || '-' }); } },
{ title: '到达时氢量', key: 'arriveHydrogen', width: 140, render: function (_, r) { return React.createElement(Input, { value: r.arriveHydrogen || '', disabled: true, addonAfter: r.h2Unit || '%' }); } },
{ title: '出发时电量', key: 'departElectricKwh', width: 130, render: function (_, r) { return React.createElement(Input, { value: r.departElectricKwh || '', disabled: true, addonAfter: 'kWh' }); } },
{ title: '到达时电量', key: 'arriveElectricKwh', width: 140, render: function (_, r) { return React.createElement(Input, { value: r.arriveElectricKwh || '', disabled: true, addonAfter: 'kWh' }); } }
];
}, []);
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 } },
var handleBack = useCallback(function () {
try {
if (window.history && window.history.length > 1) {
window.history.back();
return;
}
} catch (e) {}
message.info('返回调拨管理列表页（原型）');
}, []);
var receiveTimeVal = useMemo(function () { return parseDateTime(snapshot.receiveTimeStr); }, [snapshot.receiveTimeStr]);
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(
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(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(
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: snapshot.receivePersonName, readOnly: true, style: readOnlyStyle })
)
)
),
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,
format: 'YYYY-MM-DD',
value: form.transferDate,
format: 'YYYY-MM-DD HH:mm',
showTime: { format: 'HH:mm' },
placeholder: '-',
value: receiveTimeVal,
disabled: true,
inputReadOnly: true
})
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '出发区域'),
React.createElement(Cascader, {
style: controlStyle,
options: regionOptions,
value: form.departRegion,
disabled: true
})
),
React.createElement('div', { style: formItemStyle },
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '接收区域'),
React.createElement(Cascader, {
style: controlStyle,
options: regionOptions,
value: form.receiveRegion,
disabled: true
})
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '接收人'),
React.createElement(Select, {
placeholder: '-',
style: controlStyle,
value: form.receivePerson,
options: userOptions,
disabled: true
})
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '调拨方式'),
React.createElement(Select, {
style: controlStyle,
value: form.method,
options: methodOptions,
disabled: true
})
),
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.reason,
value: snapshot.receiveAreaType,
disabled: true,
autoSize: { minRows: 3, maxRows: 6 }
options: [{ value: '停车场', label: '停车场' }, { value: '其他', label: '其他' }]
})
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '运输方名称'),
React.createElement(Input, { value: form.carrierName, disabled: true })
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '运输方联系方式'),
React.createElement(Input, { value: form.carrierPhone, disabled: true })
),
React.createElement('div', { style: formItemStyle })
snapshot.receiveAreaType === '停车场'
? React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '停车场'),
React.createElement(Select, {
placeholder: '-',
style: controlStyle,
value: snapshot.receiveParkingName,
disabled: true,
showSearch: true,
options: parkingOptions,
filterOption: filterOption
})
)
: snapshot.receiveAreaType === '其他'
? React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '停车地址'),
React.createElement(Input, { style: controlStyle, value: snapshot.receiveAddress || '-', readOnly: true, style: readOnlyStyle })
)
: React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '停车场/停车地址'),
React.createElement(Input, { placeholder: '-', style: controlStyle, disabled: true })
)
)
),
React.createElement(Card, { title: '调拨车辆清单', style: { marginBottom: 16 } },
React.createElement(
Card,
{ title: '调拨车辆清单', style: { marginBottom: 16 } },
React.createElement(Table, {
rowKey: 'id',
columns: vehicleColumns,
dataSource: vehicles,
dataSource: snapshot.transferVehicles || [],
size: 'small',
pagination: false,
scroll: { x: 1020 }
scroll: { x: 'max-content' }
})
),
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, { onClick: function () { message.info('返回调拨管理页（原型）'); } }, '返回')
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, { onClick: handleBack }, '返回')
)
)
);

547
web端/运维管理/车辆业务/调拨管理-编辑.jsx
View File

@@ -1,547 +0,0 @@
// 【重要】必须使用 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 Cascader = antd.Cascader;
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 getInitialTransferDate() {
try {
if (window.dayjs) return window.dayjs('2026-02-20');
} catch (e1) {}
try {
if (window.moment) return window.moment('2026-02-20', 'YYYY-MM-DD');
} 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 };
var controlStyle = { width: '100%' };
var reqStarStyle = { color: '#ff4d4f', marginRight: 4 };
var reqStar = React.createElement('span', { style: reqStarStyle }, '*');
var regionOptions = useMemo(function () {
return [
{ value: 'zhejiang', label: '浙江省', children: [{ value: 'hangzhou', label: '杭州市' }, { value: 'ningbo', label: '宁波市' }, { value: 'jiaxing', label: '嘉兴市' }] },
{ value: 'shanghai', label: '上海市', children: [{ value: 'shanghai', label: '上海市' }] },
{ value: 'guangdong', label: '广东省', children: [{ value: 'guangzhou', label: '广州市' }, { value: 'shenzhen', label: '深圳市' }, { value: 'dongguan', label: '东莞市' }] }
];
}, []);
var userOptions = useMemo(function () {
return [
{ value: '张明', label: '张明' },
{ value: '王芳', label: '王芳' },
{ value: '李华', label: '李华' },
{ value: '赵强', label: '赵强' },
{ value: '陈静', label: '陈静' }
];
}, []);
var methodOptions = useMemo(function () {
return [
{ value: '第三方运输', label: '第三方运输' },
{ value: '司机驾驶', label: '司机驾驶' }
];
}, []);
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 formState = useState({
transferDate: getInitialTransferDate(),
departRegion: ['guangdong', 'guangzhou'],
receiveRegion: ['zhejiang', 'hangzhou'],
receivePerson: '王芳',
method: '第三方运输',
reason: '场站资源调整，车辆需从广州仓库调度至杭州项目点，保障项目运力。',
carrierName: '顺丰同城运输',
carrierPhone: '400-123-4567'
});
var form = formState[0];
var setForm = formState[1];
var errorsState = useState({});
var errors = errorsState[0];
var setErrors = errorsState[1];
var requirementModalState = useState(false);
var requirementModalOpen = requirementModalState[0];
var setRequirementModalOpen = requirementModalState[1];
var requirementDocContent = [
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「编辑」模块',
'#面包屑：运维管理-车辆业务-调拨管理-编辑',
'页面布局、字段与「调拨管理-新增」一致；进入页面时从调拨单加载已保存数据，支持修改后提交审核或保存。',
'',
'1.调拨情况：同新增页（调拨日期、出发/接收区域、接收人、调拨方式、调拨原因、运输方名称、运输方联系方式）。',
'2.调拨车辆清单：同新增页；至少保留一辆有效车辆方可提交审核。'
].join('\n');
var rowIdRef = React.useRef(3);
var vehiclesState = useState([
{
id: 1,
plateNo: '粤A12345',
vehicleType: '厢式货车',
brand: '东风',
model: 'DFH1180',
departParking: '天河智慧停车场',
departMileageKm: '15230.12',
departHydrogen: '28.30',
h2Unit: 'MPa',
departElectricKwh: '68.40'
},
{
id: 2,
plateNo: '浙A11111',
vehicleType: 'SUV',
brand: '小鹏',
model: 'P7',
departParking: '西湖景区停车场',
departMileageKm: '12010.00',
departHydrogen: '60.00',
h2Unit: '%',
departElectricKwh: '55.20'
}
]);
var vehicles = vehiclesState[0];
var setVehicles = vehiclesState[1];
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 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: '',
departMileageKm: '',
departHydrogen: '',
h2Unit: '',
departElectricKwh: ''
}]);
});
}, []);
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: '',
departMileageKm: '',
departHydrogen: '',
h2Unit: '',
departElectricKwh: ''
}];
}
return list;
});
}, []);
function validate() {
var e = {};
if (!form.transferDate) e.transferDate = '请选择调拨日期';
if (!form.departRegion || form.departRegion.length < 2) e.departRegion = '请选择出发区域';
if (!form.receiveRegion || form.receiveRegion.length < 2) e.receiveRegion = '请选择接收区域';
if (!form.receivePerson) e.receivePerson = '请选择接收人';
if (!form.method) e.method = '请选择调拨方式';
if (!String(form.reason || '').trim()) e.reason = '请输入调拨原因';
if (!String(form.carrierName || '').trim()) e.carrierName = '请输入运输方名称/司机姓名';
if (!String(form.carrierPhone || '').trim()) e.carrierPhone = '请输入运输方/司机联系方式';
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.departMileageKm || '').trim()) e['row_' + i + '_departMileageKm'] = '请输入出发里程';
if (!String(r.departHydrogen || '').trim()) e['row_' + i + '_departHydrogen'] = '请输入出发氢量';
if (!String(r.departElectricKwh || '').trim()) e['row_' + i + '_departElectricKwh'] = '请输入出发电量';
}
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 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: 'departMileageKm',
width: 140,
render: function (_, r, index) {
var k = 'row_' + index + '_departMileageKm';
return React.createElement(Input, {
value: r.departMileageKm,
onChange: function (e) { updateRow(index, { departMileageKm: toFixed2Input(e.target.value) }); },
placeholder: '0.00',
addonAfter: 'km',
status: errors[k] ? 'error' : undefined
});
}
},
{
title: React.createElement('span', null, reqStar, '出发氢量'),
key: 'departHydrogen',
width: 140,
render: function (_, r, index) {
var k = 'row_' + index + '_departHydrogen';
var unit = r.h2Unit || '%/MPa';
return React.createElement(Input, {
value: r.departHydrogen,
onChange: function (e) { updateRow(index, { departHydrogen: toFixed2Input(e.target.value) }); },
placeholder: '0.00',
addonAfter: unit,
status: errors[k] ? 'error' : undefined
});
}
},
{
title: React.createElement('span', null, reqStar, '出发电量'),
key: 'departElectricKwh',
width: 150,
render: function (_, r, index) {
var k = 'row_' + index + '_departElectricKwh';
return React.createElement(Input, {
value: r.departElectricKwh,
onChange: function (e) { updateRow(index, { departElectricKwh: 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,
format: 'YYYY-MM-DD',
placeholder: '请选择调拨日期',
value: form.transferDate,
onChange: function (v) { updateForm({ transferDate: v }); },
status: errors.transferDate ? 'error' : undefined
}),
errors.transferDate ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.transferDate) : null
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '出发区域'),
React.createElement(Cascader, {
style: controlStyle,
placeholder: '请选择出发区域',
options: regionOptions,
value: form.departRegion,
onChange: function (v) { updateForm({ departRegion: v }); },
allowClear: true,
status: errors.departRegion ? 'error' : undefined
}),
errors.departRegion ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.departRegion) : null
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '接收区域'),
React.createElement(Cascader, {
style: controlStyle,
placeholder: '请选择接收区域',
options: regionOptions,
value: form.receiveRegion,
onChange: function (v) { updateForm({ receiveRegion: v }); },
allowClear: true,
status: errors.receiveRegion ? 'error' : undefined
}),
errors.receiveRegion ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveRegion) : null
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '接收人'),
React.createElement(Select, {
placeholder: '请输入或选择接收人',
style: controlStyle,
value: form.receivePerson,
onChange: function (v) { updateForm({ receivePerson: v }); },
allowClear: true,
showSearch: true,
options: userOptions,
filterOption: filterOption,
status: errors.receivePerson ? 'error' : undefined
}),
errors.receivePerson ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receivePerson) : null
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '调拨方式'),
React.createElement(Select, {
placeholder: '请选择调拨方式',
style: controlStyle,
value: form.method,
onChange: function (v) { updateForm({ method: v }); },
allowClear: true,
options: methodOptions,
status: errors.method ? 'error' : undefined
}),
errors.method ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.method) : null
),
React.createElement('div', { style: formItemStyle }),
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
React.createElement('div', { style: labelStyle }, reqStar, '调拨原因'),
React.createElement(Input.TextArea, {
placeholder: '请输入调拨原因',
value: form.reason,
onChange: function (e) { updateForm({ reason: e.target.value }); },
autoSize: { minRows: 3, maxRows: 6 },
status: errors.reason ? 'error' : undefined
}),
errors.reason ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.reason) : null
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '运输方名称'),
React.createElement(Input, {
placeholder: '请输入运输方名称/司机姓名',
value: form.carrierName,
onChange: function (e) { updateForm({ carrierName: e.target.value }); },
status: errors.carrierName ? 'error' : undefined
}),
errors.carrierName ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.carrierName) : null
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '运输方联系方式'),
React.createElement(Input, {
placeholder: '请输入运输方/司机联系方式',
value: form.carrierPhone,
onChange: function (e) { updateForm({ carrierPhone: e.target.value }); },
status: errors.carrierPhone ? 'error' : undefined
}),
errors.carrierPhone ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.carrierPhone) : null
),
React.createElement('div', { style: formItemStyle })
)
),
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: 1100 }
}),
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 }, '取消')
)
)
);
};

646
web端/运维管理/车辆业务/调拨管理-调拨信息.jsx Normal file
View File

@@ -0,0 +1,646 @@
// 【重要】必须使用 const Component 作为组件变量名
// 运维管理 - 车辆业务 - 调拨管理 - 调拨信息（数字化资产 ONEOS 运管平台）
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 Input = antd.Input;
var Modal = antd.Modal;
var Select = antd.Select;
var Table = antd.Table;
var Upload = antd.Upload;
var message = antd.message;
var METHOD_DRIVER = '司机运输';
var METHOD_THIRD = '第三方运输';
var PLATE_ELIGIBLE_STATUS = '可运营';
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 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 regionOptions = useMemo(function () {
return [
{ value: 'zhejiang', label: '浙江省', children: [{ value: 'hangzhou', label: '杭州市' }, { value: 'ningbo', label: '宁波市' }, { value: 'jiaxing', label: '嘉兴市' }] },
{ value: 'shanghai', label: '上海市', children: [{ value: 'shanghai', label: '上海市' }] },
{ value: 'guangdong', label: '广东省', children: [{ value: 'guangzhou', label: '广州市' }, { value: 'shenzhen', label: '深圳市' }, { value: 'dongguan', label: '东莞市' }] }
];
}, []);
function regionValueToProvinceCityLabel(values) {
if (!values || values.length < 2) return '';
var i;
var p = null;
for (i = 0; i < regionOptions.length; i++) {
if (regionOptions[i].value === values[0]) {
p = regionOptions[i];
break;
}
}
if (!p || !p.children) return '';
var c = null;
for (i = 0; i < p.children.length; i++) {
if (p.children[i].value === values[1]) {
c = p.children[i];
break;
}
}
if (!c) return p.label;
return p.label + '-' + c.label;
}
var vehicleDb = useMemo(function () {
return [
{ plateNo: '粤A12345', status: '可运营', brand: '东风', model: 'DFH1180', dashboardH2Unit: 'MPa', currentParking: '天河智慧停车场' },
{ plateNo: '粤B11111', status: '可运营', brand: '比亚迪', model: '汉', dashboardH2Unit: '%', currentParking: '南山科技园停车场' },
{ plateNo: '浙A11111', status: '可运营', brand: '小鹏', model: 'P7', dashboardH2Unit: '%', currentParking: '西湖景区停车场' },
{ plateNo: '浙B22222', status: '可运营', brand: '蔚来', model: 'ET5', dashboardH2Unit: 'MPa', currentParking: '宁波江北停车场' },
{ plateNo: '沪A30003', status: '可运营', brand: '福田', model: 'BJ1180', dashboardH2Unit: 'MPa', currentParking: '张江园区停车场' },
{ plateNo: '粤C99999', status: '维修中', brand: '东风', model: 'DFH1180', dashboardH2Unit: 'MPa', currentParking: '白云维修基地停车场' }
];
}, []);
var plateOptionsEligible = useMemo(function () {
return vehicleDb
.filter(function (v) {
return v.status === PLATE_ELIGIBLE_STATUS;
})
.map(function (v) {
return { value: v.plateNo, label: v.plateNo };
});
}, [vehicleDb]);
function lookupVehicle(plateNo) {
return vehicleDb.find(function (x) {
return x.plateNo === plateNo;
});
}
function buildVehicleRowsFromSnapshot(snap) {
return snap.vehicles.map(function (r) {
var v = r.plateNo ? lookupVehicle(r.plateNo) : null;
return {
id: r.id,
brand: r.brand,
model: r.model,
plateNo: undefined,
h2Unit: v && v.dashboardH2Unit ? v.dashboardH2Unit : '%',
departParking: v && v.currentParking ? v.currentParking : '',
departMileageKm: '',
departHydrogen: '',
departElectricKwh: ''
};
});
}
/** 原型：模拟「新增调拨」提交后带入本页的快照（对接接口后由详情接口渲染） */
var mockFromCreate = useMemo(function () {
return {
transferDateStr: '2026-03-31',
departRegionValues: ['guangdong', 'guangzhou'],
receiveRegionValues: ['zhejiang', 'jiaxing'],
reason: '华南业务增量，需将车辆调至华东仓储节点保障运力。',
vehicles: [
{ id: 1, brand: '小鹏', model: 'P7', plateNo: '浙A11111' },
{ id: 2, brand: '蔚来', model: 'ET5', plateNo: '浙B22222' }
]
};
}, []);
var snapshotState = useState(mockFromCreate);
var snapshot = snapshotState[0];
var vehiclesState = useState(function () {
return buildVehicleRowsFromSnapshot(mockFromCreate);
});
var vehicles = vehiclesState[0];
var setVehicles = vehiclesState[1];
var infoState = useState({
method: undefined,
transportLeader: '',
transportPhone: '',
transportCost: '',
receivePerson: undefined
});
var info = infoState[0];
var setInfo = infoState[1];
var fileListState = useState([]);
var fileList = fileListState[0];
var setFileList = fileListState[1];
var errorsState = useState({});
var errors = errorsState[0];
var setErrors = errorsState[1];
var requirementModalState = useState(false);
var requirementModalOpen = requirementModalState[0];
var setRequirementModalOpen = requirementModalState[1];
var requirementDocContent = [
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「调拨信息」模块',
'',
'1.调拨情况：',
'1.1.调拨日期：反写新增调拨时的调拨日期，格式为：YYYY-MM-DD；',
'1.2.出发区域：反写新增调拨时的出发区域，格式为：省-市；',
'1.3.接收区域：反写新增调拨时的接收区域，格式为：省-市；',
'1.4.调拨原因：反写新增调拨时的调拨原因；',
'',
'2.调拨信息：',
'2.1.调拨方式：必填项，选择器，枚举值为：司机运输、第三方运输；',
'2.2.运输负责人：必填项，输入框，支持用户自定义输入；',
'2.3.运输方联系方式：必填项，输入框，限制为11位数字手机号格式；',
'2.4.运输费用：必填项，输入框，支持2位小数，后缀为元，只有运输方式为第三方运输时显示；',
'2.5.运输合同附件：选填项，按钮，文案为附件上传，点击支持本地文件上传（doc、docx、pdf格式），只有运输方式为第三方运输时显示；',
'2.6.接收人员：必填项，选择器，选择用户表所有运维部门人员，支持输入框输入内容搜索下拉对应项；',
'',
'3.调拨车辆清单；',
'#以表格方式展示，反写新增调拨时的整个清单：',
'3.1.品牌：反写新增调拨时的品牌；',
'3.2.型号：反写新增调拨时的型号；',
'3.3.车牌号：必填项，选择器，只能选择该型号、同时运营状态为：可运营的车辆；如业务在新增时已填写车牌号信息，此处反写，但支持修改；',
'3.4.出发停车场：根据车牌号，自动反写该车辆当前停车场；',
'3.5.出发时里程：必填项，输入框，支持2位小数，后缀为km，只有调拨方式为司机运输时显示；',
'3.6.出发时氢量：必填项，输入框，支持2位小数，后缀为%或MPa（取自对应车辆该型号对应型号参数下仪表盘单位），只有调拨方式为司机运输时显示；',
'3.7.出发时电量：必填项，输入框，支持2位小数，后缀为kWh，只有调拨方式为司机运输时显示；',
'',
'4.底部按钮为提交审核、保存、取消；',
'4.1.提交审核：点击提交审核校验必填项；',
'4.2.保存：不校验必填项，只保存已填数据并保存在列表页；'
].join('\n');
var methodOptions = useMemo(function () {
return [
{ value: METHOD_DRIVER, label: METHOD_DRIVER },
{ value: METHOD_THIRD, label: METHOD_THIRD }
];
}, []);
var opsStaffOptions = useMemo(function () {
return [
{ value: 'zm', label: '张明（运维一部-现场工程师）' },
{ value: 'wf', label: '王芳（运维二部-调度）' },
{ value: 'lh', label: '李华（运维中心-班长）' },
{ value: 'zq', label: '赵强（运维一部-驻场）' },
{ value: 'cj', label: '陈静（运维三部-客服协同）' }
];
}, []);
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;
}
function phoneDigitsOnly(v) {
return String(v || '')
.replace(/\D/g, '')
.slice(0, 11);
}
var updateInfo = useCallback(function (patch) {
setInfo(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 = plateNo ? lookupVehicle(plateNo) : null;
var unit = v && v.dashboardH2Unit ? v.dashboardH2Unit : '%';
updateRow(index, { plateNo: plateNo, h2Unit: unit, departParking: v && v.currentParking ? v.currentParking : '' });
},
[updateRow, vehicleDb]
);
function runValidate() {
var e = {};
if (!info.method) e.method = '请选择调拨方式';
if (!String(info.transportLeader || '').trim()) e.transportLeader = '请输入运输负责人姓名';
if (!info.receivePerson) e.receivePerson = '请选择接收人员';
var phone = String(info.transportPhone || '').trim();
if (!phone) e.transportPhone = '请输入运输方联系方式';
else if (!/^\d{11}$/.test(phone)) e.transportPhone = '请输入11位数字手机号';
if (info.method === METHOD_THIRD) {
if (!String(info.transportCost || '').trim()) e.transportCost = '请输入运输费用';
}
for (var i = 0; i < (vehicles || []).length; i++) {
var r = vehicles[i] || {};
if (!String(r.plateNo || '').trim()) e['row_' + i + '_plate'] = '请选择车牌号';
if (info.method === METHOD_DRIVER) {
if (!String(r.departMileageKm || '').trim()) e['row_' + i + '_mile'] = '请输入出发时里程';
if (!String(r.departHydrogen || '').trim()) e['row_' + i + '_h2'] = '请输入出发时氢量';
if (!String(r.departElectricKwh || '').trim()) e['row_' + i + '_kwh'] = '请输入出发时电量';
}
}
setErrors(e);
return { ok: Object.keys(e).length === 0, err: e };
}
var handleSubmitAudit = useCallback(function () {
var result = runValidate();
if (!result.ok) {
message.error('请完善必填项');
return;
}
Modal.confirm({
title: '确认提交审核？',
content: '提交后将进入审批流程（原型）。',
okText: '提交审核',
cancelText: '取消',
onOk: function () {
message.success('已提交审核（原型）');
}
});
}, [info, vehicles]);
var handleSave = useCallback(function () {
message.success('已保存至列表页（原型：不校验必填项，仅保存当前已填数据）');
}, []);
var handleCancel = useCallback(function () {
Modal.confirm({
title: '是否确认取消',
content: '未保存的修改将丢失，是否确认？',
okText: '确认',
cancelText: '取消',
onOk: function () {
message.info('返回上一页（原型）');
}
});
}, []);
var vehicleColumns = useMemo(
function () {
var cols = [
{
title: '品牌',
key: 'brand',
width: 100,
render: function (_, r) {
return React.createElement(Input, { value: r.brand || '', readOnly: true, style: readOnlyStyle });
}
},
{
title: '型号',
key: 'model',
width: 110,
render: function (_, r) {
return React.createElement(Input, { value: r.model || '', readOnly: true, style: readOnlyStyle });
}
},
{
title: React.createElement('span', null, reqStar, '车牌号'),
key: 'plateNo',
width: 220,
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: plateOptionsEligible,
filterOption: filterOption,
status: errors['row_' + index + '_plate'] ? 'error' : undefined
});
}
}
];
cols.push({
title: '出发停车场',
key: 'departParking',
width: 160,
render: function (_, r) {
return React.createElement(Input, { value: r.departParking || '', readOnly: true, style: readOnlyStyle, placeholder: '—' });
}
});
if (info.method === METHOD_DRIVER) {
cols.push({
title: React.createElement('span', null, reqStar, '出发时里程'),
key: 'departMileageKm',
width: 140,
render: function (_, r, index) {
return React.createElement(Input, {
value: r.departMileageKm,
onChange: function (e) {
updateRow(index, { departMileageKm: toFixed2Input(e.target.value) });
},
placeholder: '0.00',
addonAfter: 'km',
status: errors['row_' + index + '_mile'] ? 'error' : undefined
});
}
});
cols.push({
title: React.createElement('span', null, reqStar, '出发时氢量'),
key: 'departHydrogen',
width: 130,
render: function (_, r, index) {
return React.createElement(Input, {
value: r.departHydrogen,
onChange: function (e) {
updateRow(index, { departHydrogen: toFixed2Input(e.target.value) });
},
placeholder: '0.00',
addonAfter: r.h2Unit || '%',
status: errors['row_' + index + '_h2'] ? 'error' : undefined
});
}
});
cols.push({
title: React.createElement('span', null, reqStar, '出发时电量'),
key: 'departElectricKwh',
width: 140,
render: function (_, r, index) {
return React.createElement(Input, {
value: r.departElectricKwh,
onChange: function (e) {
updateRow(index, { departElectricKwh: toFixed2Input(e.target.value) });
},
placeholder: '0.00',
addonAfter: 'kWh',
status: errors['row_' + index + '_kwh'] ? 'error' : undefined
});
}
});
}
return cols;
},
[info.method, plateOptionsEligible, errors, handlePlateChange, updateRow]
);
var departRegionText = regionValueToProvinceCityLabel(snapshot.departRegionValues);
var receiveRegionText = regionValueToProvinceCityLabel(snapshot.receiveRegionValues);
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: 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(
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, placeholder: 'YYYY-MM-DD' })
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '出发区域'),
React.createElement(Input, { value: departRegionText, readOnly: true, style: readOnlyStyle, placeholder: '省-市' })
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '接收区域'),
React.createElement(Input, { value: receiveRegionText, readOnly: true, style: readOnlyStyle, placeholder: '省-市' })
),
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 }, reqStar, '调拨方式'),
React.createElement(Select, {
placeholder: '请选择调拨方式',
style: controlStyle,
value: info.method,
onChange: function (v) {
updateInfo({ method: v });
},
allowClear: true,
options: methodOptions,
status: errors.method ? 'error' : undefined
}),
errors.method ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.method) : null
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '运输负责人'),
React.createElement(Input, {
placeholder: '请输入运输负责人姓名',
value: info.transportLeader,
onChange: function (e) {
updateInfo({ transportLeader: e.target.value });
},
status: errors.transportLeader ? 'error' : undefined
})
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '运输方联系方式'),
React.createElement(Input, {
placeholder: '请输入运输方联系方式',
value: info.transportPhone,
maxLength: 11,
onChange: function (e) {
updateInfo({ transportPhone: phoneDigitsOnly(e.target.value) });
},
status: errors.transportPhone ? 'error' : undefined
}),
errors.transportPhone ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.transportPhone) : null
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '接收人员'),
React.createElement(Select, {
placeholder: '请输入或选择运维部门人员',
style: controlStyle,
value: info.receivePerson,
onChange: function (v) {
updateInfo({ receivePerson: v });
},
allowClear: true,
showSearch: true,
options: opsStaffOptions,
filterOption: filterOption,
status: errors.receivePerson ? 'error' : undefined
}),
errors.receivePerson ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receivePerson) : null
)
),
info.method === METHOD_THIRD
? React.createElement(
'div',
{ style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px 24px', marginTop: 8 } },
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '运输费用'),
React.createElement(Input, {
placeholder: '0.00',
value: info.transportCost,
onChange: function (e) {
updateInfo({ transportCost: toFixed2Input(e.target.value) });
},
addonAfter: '元',
status: errors.transportCost ? 'error' : undefined
}),
errors.transportCost ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.transportCost) : null
),
React.createElement(
'div',
{ style: Object.assign({}, formItemStyle, { gridColumn: 'span 2' }) },
React.createElement('div', { style: labelStyle }, '运输合同附件（选填）'),
React.createElement(
Upload,
{
accept: '.doc,.docx,.pdf',
multiple: true,
fileList: fileList,
beforeUpload: function () {
return false;
},
onChange: function (i) {
setFileList(i.fileList || []);
}
},
React.createElement(Button, null, '附件上传')
),
React.createElement('div', { style: { marginTop: 6, fontSize: 12, color: 'rgba(0,0,0,0.45)' } }, '支持 doc、docx、pdf；原型不实际上传服务器')
)
)
: null
),
React.createElement(
Card,
{ title: '调拨车辆清单', style: { marginBottom: 16 } },
React.createElement(Table, {
rowKey: 'id',
columns: vehicleColumns,
dataSource: vehicles,
size: 'small',
pagination: false,
scroll: { x: 'max-content' }
})
),
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 }, '取消')
)
)
);
};