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

web端: 车辆/运维模块更新

Browse Source 
- 车辆管理、车辆管理-查看：详情 Tab（后装设备/租赁/事故/违章/异动/调拨/证照管理等）
- 车辆业务：异动管理列表与查看页、调拨相关页面与需求说明
- 需求说明文档补充

Made-with: Cursor
This commit is contained in:
王冕
2026-03-19 20:19:48 +08:00
parent 3360dc785e
commit c75d1656e3
17 changed files with 5456 additions and 2249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,552 @@
// 【重要】必须使用 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;
}
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: null,
departRegion: undefined,
receiveRegion: undefined,
receivePerson: undefined,
method: undefined,
reason: '',
carrierName: '',
carrierPhone: ''
});
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.调拨情况：',
'1.1.调拨日期：必填项，日期选择器，精确至天，格式为：YYYY-MM-DD；',
'1.2.出发区域：必填项，地区选择器，支持省-市2级；',
'1.3.接收区域：必填项，地区选择器，支持省-市2级；',
'1.4.接收人：必填项，选择器，支持输入框模糊搜索下拉匹配对应选项，接收人取自用户表所有用户；',
'1.5.调拨方式：必填项，选择器，默认提示：请选择调拨方式，选项为：第三方运输、司机驾驶；',
'1.6.调拨原因：必填项，文本域，支持用户自定义输入；',
'1.7.运输方名称：必填项，输入框，默认提示：请输入运输方名称/司机姓名；',
'1.8.运输方联系方式：必填项，输入框，默认提示：请输入运输方/司机联系方式；',
'',
'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.底部为新增一行，铺满整行；',
'需要至少提交一辆车才能完成调拨，否则提交审核时提示：请选择调拨车辆；'
].join('\n');
var rowIdRef = React.useRef(2);
var vehiclesState = useState([
{
id: 1,
plateNo: undefined,
vehicleType: '',
brand: '',
model: '',
departParking: '',
departMileageKm: '',
departHydrogen: '',
h2Unit: '',
departElectricKwh: ''
}
]);
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); });
}, []);
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()) {
if (errors && errors.vehicleList) message.error(errors.vehicleList);
else if (!form.transferDate) message.error('请完善必填项后再提交');
else message.error('请完善必填项后再提交');
return;
}
Modal.confirm({
title: '确认提交审核？',
content: '提交后将进入审批流程（原型）。',
okText: '提交审核',
cancelText: '取消',
onOk: function () {
message.success('已提交审核（原型）');
}
});
}, [form, errors]);
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 }, '取消')
)
)
);
};