web端: 车辆/运维模块更新
- 车辆管理、车辆管理-查看：详情 Tab（后装设备/租赁/事故/违章/异动/调拨/证照管理等） - 车辆业务：异动管理列表与查看页、调拨相关页面与需求说明 - 需求说明文档补充 Made-with: Cursor
This commit is contained in:
王冕
347
web端/运维管理/车辆业务/异动管理-查看.jsx
Normal file
347
web端/运维管理/车辆业务/异动管理-查看.jsx
Normal file
@@ -0,0 +1,347 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 运维管理 - 车辆业务 - 异动管理 - 查看（只读）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
var useMemo = React.useMemo;
|
||||
|
||||
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 getInitialDateTime(str) {
|
||||
try {
|
||||
if (window.dayjs) return window.dayjs(str);
|
||||
} catch (e1) {}
|
||||
try {
|
||||
if (window.moment) return window.moment(str, 'YYYY-MM-DD HH:mm');
|
||||
} catch (e2) {}
|
||||
return null;
|
||||
}
|
||||
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||||
var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||||
var formItemStyle = { marginBottom: 12 };
|
||||
var controlStyle = { width: '100%' };
|
||||
|
||||
var destinationTypeOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '停车场', label: '停车场' },
|
||||
{ value: '维修站', label: '维修站' },
|
||||
{ value: '其他', label: '其他' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var destinationParkingOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '天河智慧停车场', label: '天河智慧停车场' },
|
||||
{ value: '南山科技园停车场', label: '南山科技园停车场' },
|
||||
{ value: '西湖景区停车场', label: '西湖景区停车场' },
|
||||
{ value: '宁波江北停车场', label: '宁波江北停车场' },
|
||||
{ value: '张江园区停车场', label: '张江园区停车场' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var destinationRepairOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '杭州拱墅维修站', label: '杭州拱墅维修站' },
|
||||
{ value: '广州天河维修站', label: '广州天河维修站' },
|
||||
{ value: '上海浦东维修站', label: '上海浦东维修站' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var changeTypeOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '维修', label: '维修' },
|
||||
{ value: '保养', label: '保养' },
|
||||
{ value: '年审', label: '年审' },
|
||||
{ value: '其他', label: '其他' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var approvalStatusOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '待提交', label: '待提交' },
|
||||
{ value: '审批中', label: '审批中' },
|
||||
{ value: '审批完成', label: '审批完成' },
|
||||
{ value: '驳回', label: '驳回' },
|
||||
{ value: '撤回', label: '撤回' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
// 原型：详情接口返回的只读数据（字段与「异动管理.新增」一致，并含审批状态）
|
||||
var form = {
|
||||
startTime: getInitialDateTime('2026-02-20 09:30'),
|
||||
plannedEndTime: getInitialDateTime('2026-02-22 18:00'),
|
||||
destinationType: '维修站',
|
||||
destinationName: '广州天河维修站',
|
||||
destinationNameOther: '',
|
||||
changeType: '维修',
|
||||
plannedMileageKm: '45.50',
|
||||
remark: '车辆需进站检修制动系统，预计两日内完成。',
|
||||
approvalStatus: '审批中'
|
||||
};
|
||||
|
||||
var vehicles = [
|
||||
{
|
||||
id: 1,
|
||||
plateNo: '粤A12345',
|
||||
vehicleType: '厢式货车',
|
||||
brand: '东风',
|
||||
model: 'DFH1180',
|
||||
departParking: '天河智慧停车场',
|
||||
startMileageKm: '15230.12',
|
||||
startHydrogen: '28.30',
|
||||
h2Unit: 'MPa',
|
||||
startElectricKwh: '68.40'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
plateNo: '浙A11111',
|
||||
vehicleType: 'SUV',
|
||||
brand: '小鹏',
|
||||
model: 'P7',
|
||||
departParking: '西湖景区停车场',
|
||||
startMileageKm: '12010.00',
|
||||
startHydrogen: '60.00',
|
||||
h2Unit: '%',
|
||||
startElectricKwh: '55.20'
|
||||
}
|
||||
];
|
||||
|
||||
var destinationNameLabel = form.destinationType === '维修站' ? '维修站' : (form.destinationType === '停车场' ? '停车场' : '目的地名称');
|
||||
|
||||
var destinationNameNode = (function () {
|
||||
if (form.destinationType === '其他') {
|
||||
return React.createElement(Input, {
|
||||
value: form.destinationNameOther || '-',
|
||||
disabled: true
|
||||
});
|
||||
}
|
||||
var opts = form.destinationType === '维修站' ? destinationRepairOptions : destinationParkingOptions;
|
||||
return React.createElement(Select, {
|
||||
style: controlStyle,
|
||||
value: form.destinationName,
|
||||
options: opts,
|
||||
disabled: true
|
||||
});
|
||||
})();
|
||||
|
||||
var requirementModalState = useState(false);
|
||||
var requirementModalOpen = requirementModalState[0];
|
||||
var setRequirementModalOpen = requirementModalState[1];
|
||||
|
||||
var requirementDocContent = [
|
||||
'一个「数字化资产ONEOS运管平台」中的「异动管理」「查看」模块',
|
||||
'#面包屑：运维管理-车辆业务-异动管理-查看',
|
||||
'页面布局与字段与「异动管理.新增」一致，所有表单项均为只读，仅供查询展示。',
|
||||
'',
|
||||
'1.异动情况：异动开始/预计结束日期、审批状态、异动目的地、目的地名称、异动类型、预计异动里程、备注 — 全部禁用不可编辑。',
|
||||
'2.车辆信息：车牌号、车辆类型、品牌、型号、出发停车场、异动开始里程、异动开始氢量、异动开始电量 — 全部禁用；无新增行与删除操作。',
|
||||
'3.底部仅提供「返回」按钮，返回异动管理列表（原型）。'
|
||||
].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: 'startMileageKm',
|
||||
width: 160,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.startMileageKm || '-', disabled: true, addonAfter: 'km' });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '异动开始氢量',
|
||||
key: 'startHydrogen',
|
||||
width: 150,
|
||||
render: function (_, r) {
|
||||
var unit = r.h2Unit || '';
|
||||
return React.createElement(Input, { value: r.startHydrogen || '-', disabled: true, addonAfter: unit || '-' });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '异动开始电量',
|
||||
key: 'startElectricKwh',
|
||||
width: 150,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.startElectricKwh || '-', 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 } },
|
||||
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(DatePicker, {
|
||||
style: controlStyle,
|
||||
showTime: { format: 'HH:mm' },
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
value: form.startTime,
|
||||
disabled: true,
|
||||
inputReadOnly: true
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '异动预计结束日期'),
|
||||
React.createElement(DatePicker, {
|
||||
style: controlStyle,
|
||||
showTime: { format: 'HH:mm' },
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
value: form.plannedEndTime,
|
||||
disabled: true,
|
||||
inputReadOnly: true
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '审批状态'),
|
||||
React.createElement(Select, {
|
||||
style: controlStyle,
|
||||
value: form.approvalStatus,
|
||||
options: approvalStatusOptions,
|
||||
disabled: true
|
||||
})
|
||||
),
|
||||
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '异动目的地'),
|
||||
React.createElement(Select, {
|
||||
style: controlStyle,
|
||||
value: form.destinationType,
|
||||
options: destinationTypeOptions,
|
||||
disabled: true
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, destinationNameLabel),
|
||||
destinationNameNode
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '异动类型'),
|
||||
React.createElement(Select, {
|
||||
style: controlStyle,
|
||||
value: form.changeType,
|
||||
options: changeTypeOptions,
|
||||
disabled: true
|
||||
})
|
||||
),
|
||||
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '预计异动里程'),
|
||||
React.createElement(Input, {
|
||||
value: form.plannedMileageKm || '-',
|
||||
disabled: true,
|
||||
addonAfter: 'km'
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle }),
|
||||
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.remark || '-',
|
||||
disabled: true,
|
||||
autoSize: { minRows: 3, maxRows: 6 }
|
||||
})
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
React.createElement(Card, { title: '车辆信息', style: { marginBottom: 16 } },
|
||||
React.createElement(Table, {
|
||||
rowKey: 'id',
|
||||
columns: vehicleColumns,
|
||||
dataSource: vehicles,
|
||||
size: 'small',
|
||||
pagination: false,
|
||||
scroll: { x: 1180 }
|
||||
})
|
||||
),
|
||||
|
||||
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('返回异动管理列表（原型）'); } }, '返回')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
480
web端/运维管理/车辆业务/异动管理.jsx
Normal file
480
web端/运维管理/车辆业务/异动管理.jsx
Normal file
@@ -0,0 +1,480 @@
|
||||
// 【重要】必须使用 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 Table = antd.Table;
|
||||
var Select = antd.Select;
|
||||
var DatePicker = antd.DatePicker;
|
||||
var message = antd.message;
|
||||
var Modal = antd.Modal;
|
||||
|
||||
var RangePicker = DatePicker.RangePicker;
|
||||
|
||||
function filterOption(input, option) {
|
||||
var label = (option && (option.label || option.children)) || '';
|
||||
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
|
||||
}
|
||||
|
||||
function fmtYMDHM(v) {
|
||||
if (v === null || v === undefined) return '-';
|
||||
var s = String(v).trim();
|
||||
if (!s) return '-';
|
||||
if (/^\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}/.test(s)) return s.slice(0, 16);
|
||||
if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s + ' 00:00';
|
||||
try {
|
||||
var d = new Date(s.replace(/-/g, '/'));
|
||||
if (isNaN(d.getTime())) return s;
|
||||
var p2 = function (n) { return n < 10 ? '0' + n : '' + n; };
|
||||
return d.getFullYear() + '-' + p2(d.getMonth() + 1) + '-' + p2(d.getDate()) + ' ' + p2(d.getHours()) + ':' + p2(d.getMinutes());
|
||||
} catch (e) {
|
||||
return s;
|
||||
}
|
||||
}
|
||||
|
||||
function canShowMovementEdit(approvalStatus) {
|
||||
var s = String(approvalStatus || '');
|
||||
return s === '待提交' || s === '驳回' || s === '撤回';
|
||||
}
|
||||
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||||
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||||
var filterItemStyle = { marginBottom: 12 };
|
||||
var filterControlStyle = { width: '100%' };
|
||||
var tableSingleLineStyle = '.movement-list-table .ant-table-thead th,.movement-list-table .ant-table-tbody td{white-space:nowrap;}';
|
||||
|
||||
var moveTypeOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '维修', label: '维修' },
|
||||
{ value: '保养', label: '保养' },
|
||||
{ value: '年审', label: '年审' },
|
||||
{ value: '其他', label: '其他' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var plateOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '粤A12345', label: '粤A12345' },
|
||||
{ value: '粤B11111', label: '粤B11111' },
|
||||
{ value: '浙A11111', label: '浙A11111' },
|
||||
{ value: '浙B22222', label: '浙B22222' },
|
||||
{ value: '沪A30003', label: '沪A30003' },
|
||||
{ value: '苏E88888', label: '苏E88888' },
|
||||
{ value: '京A66666', label: '京A66666' },
|
||||
{ value: '渝A99999', label: '渝A99999' },
|
||||
{ value: '川A77777', label: '川A77777' },
|
||||
{ value: '鲁B55555', label: '鲁B55555' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var draftState = useState({
|
||||
moveStartRange: null,
|
||||
moveTypes: [],
|
||||
plateNo: undefined
|
||||
});
|
||||
var draft = draftState[0];
|
||||
var setDraft = draftState[1];
|
||||
|
||||
var appliedState = useState({
|
||||
moveStartRange: null,
|
||||
moveTypes: [],
|
||||
plateNo: undefined
|
||||
});
|
||||
var applied = appliedState[0];
|
||||
var setApplied = appliedState[1];
|
||||
|
||||
var pageState = useState(1);
|
||||
var page = pageState[0];
|
||||
var setPage = pageState[1];
|
||||
var pageSizeState = useState(20);
|
||||
var pageSize = pageSizeState[0];
|
||||
var setPageSize = pageSizeState[1];
|
||||
|
||||
var requirementModalState = useState(false);
|
||||
var requirementModalOpen = requirementModalState[0];
|
||||
var setRequirementModalOpen = requirementModalState[1];
|
||||
|
||||
var requirementDocContent = [
|
||||
'一个「数字化资产ONEOS运管平台」中的「异动管理」模块',
|
||||
'#面包屑：运维管理-车辆业务-异动管理',
|
||||
'',
|
||||
'1.筛选；',
|
||||
'1.1.异动开始日期：日期选择器，输入框支持双日历选择开始-结束时间；',
|
||||
'1.2.异动类型：选择器，选项包括：维修、保养、年审、其他，支持多选；',
|
||||
'1.3.车牌号：选择器，输入框支持模糊搜索下拉匹配结果；',
|
||||
'1.4.右侧为查询、重置按钮；',
|
||||
'',
|
||||
'2.列表：',
|
||||
'2.1.异动开始日期：显示车辆异动开始日期，格式为：YYYY-MM-DD HH:MM；',
|
||||
'2.2.异动预计结束日期：显示车辆异动结束日期，格式为：YYYY-MM-DD HH:MM；',
|
||||
'2.3.审批状态：分为:待提交、审批中、审批完成、驳回、撤回；',
|
||||
'2.4.异动目的地：显示车辆异动目的地，选项包括：停车场、维修站、其他；',
|
||||
'2.5.目的地名称：显示车辆异动目的地名称；',
|
||||
'2.6.异动类型：显示车辆异动类型，选项包括：维修、保养、年审、其他；',
|
||||
'2.7.预计异动里程（km）：显示车辆预计异动里程；',
|
||||
'2.8.车牌号：显示车牌号；',
|
||||
'2.9.异动开始里程（km）：显示车辆异动开始里程；',
|
||||
'2.10.异动开始电量（kWh）：显示车辆异动开始电量；',
|
||||
'2.11.异动开始氢量；显示车辆异动开始氢量，带单位，单位根据型号参数表获取，分为%和MPa；',
|
||||
'2.12.创建人：显示发起人姓名；',
|
||||
'2.13.创建时间：显示发起时间，格式为：YYYY-MM-DD HH:MM；',
|
||||
'2.14.操作：查看、编辑；',
|
||||
' 2.14.1.查看：点击跳转异动-查看页；',
|
||||
' 2.14.2.编辑：点击跳转异动-编辑页，只有审批状态为：待提交、驳回、撤回时显示编辑；',
|
||||
'',
|
||||
'3.列表右下方为分页功能，支持单页显示条数设置；'
|
||||
].join('\n');
|
||||
|
||||
var listState = useState(function () {
|
||||
return [
|
||||
{
|
||||
id: 'mv1',
|
||||
moveStartAt: '2026-02-20 09:30',
|
||||
moveEndExpectedAt: '2026-02-22 18:00',
|
||||
approvalStatus: '待提交',
|
||||
destination: '维修站',
|
||||
destinationName: '天河氢能维修中心',
|
||||
moveType: '维修',
|
||||
expectedMileageKm: '45.5',
|
||||
plateNo: '粤A12345',
|
||||
startMileageKm: '15230.12',
|
||||
startElectricKwh: '68.40',
|
||||
startHydrogen: '28.30',
|
||||
h2Unit: 'MPa',
|
||||
creatorName: '张明',
|
||||
createTime: '2026-02-20 08:10'
|
||||
},
|
||||
{
|
||||
id: 'mv2',
|
||||
moveStartAt: '2026-02-21 14:00',
|
||||
moveEndExpectedAt: '2026-02-21 17:30',
|
||||
approvalStatus: '审批中',
|
||||
destination: '停车场',
|
||||
destinationName: '西湖景区停车场',
|
||||
moveType: '保养',
|
||||
expectedMileageKm: '12.0',
|
||||
plateNo: '浙A11111',
|
||||
startMileageKm: '12010.00',
|
||||
startElectricKwh: '55.20',
|
||||
startHydrogen: '60.00',
|
||||
h2Unit: '%',
|
||||
creatorName: '王芳',
|
||||
createTime: '2026-02-21 13:20'
|
||||
},
|
||||
{
|
||||
id: 'mv3',
|
||||
moveStartAt: '2026-02-24 08:15',
|
||||
moveEndExpectedAt: '2026-02-24 12:00',
|
||||
approvalStatus: '审批完成',
|
||||
destination: '其他',
|
||||
destinationName: '车管所检测线',
|
||||
moveType: '年审',
|
||||
expectedMileageKm: '8.2',
|
||||
plateNo: '粤B11111',
|
||||
startMileageKm: '8020.50',
|
||||
startElectricKwh: '62.10',
|
||||
startHydrogen: '55.00',
|
||||
h2Unit: '%',
|
||||
creatorName: '李华',
|
||||
createTime: '2026-02-24 07:50'
|
||||
},
|
||||
{
|
||||
id: 'mv4',
|
||||
moveStartAt: '2026-02-25 10:00',
|
||||
moveEndExpectedAt: '2026-02-26 09:00',
|
||||
approvalStatus: '驳回',
|
||||
destination: '维修站',
|
||||
destinationName: '张江服务站',
|
||||
moveType: '其他',
|
||||
expectedMileageKm: '30.0',
|
||||
plateNo: '沪A30003',
|
||||
startMileageKm: '9800.00',
|
||||
startElectricKwh: '69.00',
|
||||
startHydrogen: '26.00',
|
||||
h2Unit: 'MPa',
|
||||
creatorName: '赵强',
|
||||
createTime: '2026-02-25 09:40'
|
||||
},
|
||||
{
|
||||
id: 'mv5',
|
||||
moveStartAt: '2026-02-26 16:20',
|
||||
moveEndExpectedAt: '2026-02-27 10:00',
|
||||
approvalStatus: '撤回',
|
||||
destination: '停车场',
|
||||
destinationName: '宁波江北停车场',
|
||||
moveType: '维修',
|
||||
expectedMileageKm: '22.8',
|
||||
plateNo: '浙B22222',
|
||||
startMileageKm: '15010.00',
|
||||
startElectricKwh: '58.00',
|
||||
startHydrogen: '22.10',
|
||||
h2Unit: 'MPa',
|
||||
creatorName: '陈静',
|
||||
createTime: '2026-02-26 15:55'
|
||||
},
|
||||
{
|
||||
id: 'mv6',
|
||||
moveStartAt: '2026-02-27 07:45',
|
||||
moveEndExpectedAt: '2026-02-27 19:00',
|
||||
approvalStatus: '审批中',
|
||||
destination: '维修站',
|
||||
destinationName: '苏州园区快修站',
|
||||
moveType: '保养',
|
||||
expectedMileageKm: '18.6',
|
||||
plateNo: '苏E88888',
|
||||
startMileageKm: '23105.80',
|
||||
startElectricKwh: '42.50',
|
||||
startHydrogen: '45.20',
|
||||
h2Unit: '%',
|
||||
creatorName: '张明',
|
||||
createTime: '2026-02-27 07:20'
|
||||
},
|
||||
{
|
||||
id: 'mv7',
|
||||
moveStartAt: '2026-02-27 11:00',
|
||||
moveEndExpectedAt: '2026-02-28 17:30',
|
||||
approvalStatus: '审批完成',
|
||||
destination: '其他',
|
||||
destinationName: '顺义综合检测场',
|
||||
moveType: '年审',
|
||||
expectedMileageKm: '35.0',
|
||||
plateNo: '京A66666',
|
||||
startMileageKm: '8890.00',
|
||||
startElectricKwh: '71.20',
|
||||
startHydrogen: '31.50',
|
||||
h2Unit: 'MPa',
|
||||
creatorName: '王芳',
|
||||
createTime: '2026-02-27 10:35'
|
||||
},
|
||||
{
|
||||
id: 'mv8',
|
||||
moveStartAt: '2026-02-28 08:30',
|
||||
moveEndExpectedAt: '2026-02-28 14:00',
|
||||
approvalStatus: '待提交',
|
||||
destination: '停车场',
|
||||
destinationName: '两江新区枢纽停车场',
|
||||
moveType: '其他',
|
||||
expectedMileageKm: '6.5',
|
||||
plateNo: '渝A99999',
|
||||
startMileageKm: '17660.25',
|
||||
startElectricKwh: '48.90',
|
||||
startHydrogen: '58.00',
|
||||
h2Unit: '%',
|
||||
creatorName: '李华',
|
||||
createTime: '2026-02-28 08:05'
|
||||
},
|
||||
{
|
||||
id: 'mv9',
|
||||
moveStartAt: '2026-02-28 13:15',
|
||||
moveEndExpectedAt: '2026-03-01 09:00',
|
||||
approvalStatus: '驳回',
|
||||
destination: '维修站',
|
||||
destinationName: '成都高新氢能维保站',
|
||||
moveType: '维修',
|
||||
expectedMileageKm: '52.3',
|
||||
plateNo: '川A77777',
|
||||
startMileageKm: '34500.00',
|
||||
startElectricKwh: '33.60',
|
||||
startHydrogen: '24.80',
|
||||
h2Unit: 'MPa',
|
||||
creatorName: '赵强',
|
||||
createTime: '2026-02-28 12:50'
|
||||
},
|
||||
{
|
||||
id: 'mv10',
|
||||
moveStartAt: '2026-03-01 06:00',
|
||||
moveEndExpectedAt: '2026-03-01 11:45',
|
||||
approvalStatus: '审批完成',
|
||||
destination: '其他',
|
||||
destinationName: '青岛港务临时停放点',
|
||||
moveType: '保养',
|
||||
expectedMileageKm: '15.0',
|
||||
plateNo: '鲁B55555',
|
||||
startMileageKm: '11220.00',
|
||||
startElectricKwh: '65.00',
|
||||
startHydrogen: '62.50',
|
||||
h2Unit: '%',
|
||||
creatorName: '陈静',
|
||||
createTime: '2026-03-01 05:40'
|
||||
}
|
||||
];
|
||||
});
|
||||
var list = listState[0];
|
||||
|
||||
function matchRange(valStr, range) {
|
||||
if (!range || !range[0] || !range[1]) return true;
|
||||
var s = '';
|
||||
var e = '';
|
||||
if (range[0] && range[0].format) s = range[0].format('YYYY-MM-DD');
|
||||
if (range[1] && range[1].format) e = range[1].format('YYYY-MM-DD');
|
||||
if (!s && !e) return true;
|
||||
var v = String(valStr || '').slice(0, 10);
|
||||
if (s && v < s) return false;
|
||||
if (e && v > e) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
function applyFilters(rows) {
|
||||
return (rows || []).filter(function (r) {
|
||||
if (!matchRange(r.moveStartAt, applied.moveStartRange)) return false;
|
||||
if (applied.plateNo && r.plateNo !== applied.plateNo) return false;
|
||||
if (applied.moveTypes && applied.moveTypes.length > 0) {
|
||||
if (applied.moveTypes.indexOf(r.moveType) < 0) return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
var filtered = useMemo(function () { return applyFilters(list); }, [list, applied]);
|
||||
|
||||
var paged = useMemo(function () {
|
||||
var start = (page - 1) * pageSize;
|
||||
return filtered.slice(start, start + pageSize);
|
||||
}, [filtered, page, pageSize]);
|
||||
|
||||
var handleQuery = useCallback(function () {
|
||||
setApplied(Object.assign({}, draft));
|
||||
setPage(1);
|
||||
}, [draft]);
|
||||
|
||||
var handleReset = useCallback(function () {
|
||||
var empty = { moveStartRange: null, moveTypes: [], plateNo: undefined };
|
||||
setDraft(empty);
|
||||
setApplied(empty);
|
||||
setPage(1);
|
||||
}, []);
|
||||
|
||||
var columns = useMemo(function () {
|
||||
return [
|
||||
{ title: '异动开始日期', dataIndex: 'moveStartAt', key: 'moveStartAt', width: 160, render: function (v) { return fmtYMDHM(v); } },
|
||||
{ title: '异动预计结束日期', dataIndex: 'moveEndExpectedAt', key: 'moveEndExpectedAt', width: 170, render: function (v) { return fmtYMDHM(v); } },
|
||||
{ title: '审批状态', dataIndex: 'approvalStatus', key: 'approvalStatus', width: 100 },
|
||||
{ title: '异动目的地', dataIndex: 'destination', key: 'destination', width: 110 },
|
||||
{ title: '目的地名称', dataIndex: 'destinationName', key: 'destinationName', width: 160, ellipsis: true },
|
||||
{ title: '异动类型', dataIndex: 'moveType', key: 'moveType', width: 90 },
|
||||
{ title: '预计异动里程（km）', dataIndex: 'expectedMileageKm', key: 'expectedMileageKm', width: 150 },
|
||||
{ title: '车牌号', dataIndex: 'plateNo', key: 'plateNo', width: 110 },
|
||||
{ title: '异动开始里程（km）', dataIndex: 'startMileageKm', key: 'startMileageKm', width: 160 },
|
||||
{ title: '异动开始电量（kWh）', dataIndex: 'startElectricKwh', key: 'startElectricKwh', width: 160 },
|
||||
{
|
||||
title: '异动开始氢量',
|
||||
key: 'startHydrogen',
|
||||
width: 130,
|
||||
render: function (_, r) {
|
||||
var u = r.h2Unit || '';
|
||||
return (r.startHydrogen != null && r.startHydrogen !== '') ? String(r.startHydrogen) + (u ? ' ' + u : '') : '-';
|
||||
}
|
||||
},
|
||||
{ title: '创建人', dataIndex: 'creatorName', key: 'creatorName', width: 100 },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 160, render: function (v) { return fmtYMDHM(v); } },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
fixed: 'right',
|
||||
render: function (_, r) {
|
||||
var nodes = [
|
||||
React.createElement(Button, { key: 'view', type: 'link', size: 'small', onClick: function () { message.info('跳转异动-查看页（原型）ID：' + r.id); } }, '查看')
|
||||
];
|
||||
if (canShowMovementEdit(r.approvalStatus)) {
|
||||
nodes.push(React.createElement(Button, { key: 'edit', type: 'link', size: 'small', onClick: function () { message.info('跳转异动-编辑页（原型）ID：' + r.id); } }, '编辑'));
|
||||
}
|
||||
return React.createElement(React.Fragment, null, nodes);
|
||||
}
|
||||
}
|
||||
];
|
||||
}, []);
|
||||
|
||||
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: '异动管理' }] }),
|
||||
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, { style: { marginBottom: 16 } },
|
||||
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '异动开始日期'),
|
||||
React.createElement(RangePicker, {
|
||||
style: filterControlStyle,
|
||||
value: draft.moveStartRange,
|
||||
onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { moveStartRange: v }); }); },
|
||||
placeholder: ['开始日期', '结束日期'],
|
||||
showTime: false
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '异动类型'),
|
||||
React.createElement(Select, {
|
||||
mode: 'multiple',
|
||||
placeholder: '请选择异动类型（可多选）',
|
||||
style: filterControlStyle,
|
||||
value: draft.moveTypes,
|
||||
onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { moveTypes: v || [] }); }); },
|
||||
allowClear: true,
|
||||
options: moveTypeOptions,
|
||||
maxTagCount: 'responsive'
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '车牌号'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请输入或选择车牌号',
|
||||
style: filterControlStyle,
|
||||
value: draft.plateNo,
|
||||
onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { plateNo: v }); }); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: plateOptions,
|
||||
filterOption: filterOption
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 16 } },
|
||||
React.createElement(Button, { onClick: handleReset }, '重置'),
|
||||
React.createElement(Button, { type: 'primary', onClick: handleQuery }, '查询')
|
||||
)
|
||||
),
|
||||
|
||||
React.createElement(Card, null,
|
||||
React.createElement('style', null, tableSingleLineStyle),
|
||||
React.createElement('div', { className: 'movement-list-table' },
|
||||
React.createElement(Table, {
|
||||
rowKey: 'id',
|
||||
columns: columns,
|
||||
dataSource: paged,
|
||||
scroll: { x: 2240 },
|
||||
size: 'small',
|
||||
pagination: {
|
||||
current: page,
|
||||
pageSize: pageSize,
|
||||
total: filtered.length,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: function (t) { return '共 ' + t + ' 条'; },
|
||||
onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
|
||||
}
|
||||
})
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
564
web端/运维管理/车辆业务/异动管理.新增.jsx
Normal file
564
web端/运维管理/车辆业务/异动管理.新增.jsx
Normal file
@@ -0,0 +1,564 @@
|
||||
// 【重要】必须使用 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 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 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 plateOptions = useMemo(function () {
|
||||
return vehicleDb.map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
|
||||
}, [vehicleDb]);
|
||||
|
||||
var destinationTypeOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '停车场', label: '停车场' },
|
||||
{ value: '维修站', label: '维修站' },
|
||||
{ value: '其他', label: '其他' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var destinationParkingOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '天河智慧停车场', label: '天河智慧停车场' },
|
||||
{ value: '南山科技园停车场', label: '南山科技园停车场' },
|
||||
{ value: '西湖景区停车场', label: '西湖景区停车场' },
|
||||
{ value: '宁波江北停车场', label: '宁波江北停车场' },
|
||||
{ value: '张江园区停车场', label: '张江园区停车场' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var destinationRepairOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '杭州拱墅维修站', label: '杭州拱墅维修站' },
|
||||
{ value: '广州天河维修站', label: '广州天河维修站' },
|
||||
{ value: '上海浦东维修站', label: '上海浦东维修站' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var changeTypeOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '维修', label: '维修' },
|
||||
{ value: '保养', label: '保养' },
|
||||
{ value: '年审', label: '年审' },
|
||||
{ value: '其他', label: '其他' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
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.异动预计结束日期：必填项，日期选择器，格式为：YYYY-MM-DD HH:MM；',
|
||||
'1.3.异动目的地：必填项，选择器，选项为：停车场、维修站、其他；',
|
||||
'2.4.目的地名称：必填项，如异动目的地为停车场，则此处为停车场（选择器），如异动目的地为维修站，则此处为维修站（选择器），如异动目的地为其他，则此处为输入框（自定义输入）；',
|
||||
'2.5.异动类型：必填项，选择器，选项为：维修、保养、年审、其他；',
|
||||
'2.6.预计异动里程：输入框，支持2位小数输入，后缀为km；',
|
||||
'2.7.备注：文本域，支持自定义输入；',
|
||||
'',
|
||||
'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.新增一行：铺满整行；',
|
||||
'',
|
||||
'3.底部为提交审核、保存、取消；'
|
||||
].join('\n');
|
||||
|
||||
var formState = useState({
|
||||
startTime: null,
|
||||
plannedEndTime: null,
|
||||
destinationType: undefined,
|
||||
destinationName: undefined,
|
||||
destinationNameOther: '',
|
||||
changeType: undefined,
|
||||
plannedMileageKm: '',
|
||||
remark: ''
|
||||
});
|
||||
var form = formState[0];
|
||||
var setForm = formState[1];
|
||||
|
||||
var errorsState = useState({});
|
||||
var errors = errorsState[0];
|
||||
var setErrors = errorsState[1];
|
||||
|
||||
var rowIdRef = React.useRef(2);
|
||||
var vehiclesState = useState([
|
||||
{
|
||||
id: 1,
|
||||
plateNo: undefined,
|
||||
vehicleType: '',
|
||||
brand: '',
|
||||
model: '',
|
||||
departParking: '',
|
||||
h2Unit: '',
|
||||
startMileageKm: '',
|
||||
startHydrogen: '',
|
||||
startElectricKwh: ''
|
||||
}
|
||||
]);
|
||||
var vehicles = vehiclesState[0];
|
||||
var setVehicles = vehiclesState[1];
|
||||
|
||||
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: '',
|
||||
h2Unit: '',
|
||||
startMileageKm: '',
|
||||
startHydrogen: '',
|
||||
startElectricKwh: ''
|
||||
}]);
|
||||
});
|
||||
}, []);
|
||||
|
||||
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: '',
|
||||
h2Unit: '',
|
||||
startMileageKm: '',
|
||||
startHydrogen: '',
|
||||
startElectricKwh: ''
|
||||
}];
|
||||
}
|
||||
return list;
|
||||
});
|
||||
}, []);
|
||||
|
||||
function validate() {
|
||||
var e = {};
|
||||
if (!form.startTime) e.startTime = '请选择异动开始日期';
|
||||
if (!form.plannedEndTime) e.plannedEndTime = '请选择异动预计结束日期';
|
||||
if (!form.destinationType) e.destinationType = '请选择异动目的地';
|
||||
if (form.destinationType === '其他') {
|
||||
if (!String(form.destinationNameOther || '').trim()) e.destinationName = '请输入目的地名称';
|
||||
} else {
|
||||
if (!form.destinationName) e.destinationName = '请选择目的地名称';
|
||||
}
|
||||
if (!form.changeType) e.changeType = '请选择异动类型';
|
||||
|
||||
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.startMileageKm || '').trim()) e['row_' + i + '_startMileageKm'] = '请输入异动开始里程';
|
||||
if (!String(r.startHydrogen || '').trim()) e['row_' + i + '_startHydrogen'] = '请输入异动开始氢量';
|
||||
if (!String(r.startElectricKwh || '').trim()) e['row_' + i + '_startElectricKwh'] = '请输入异动开始电量';
|
||||
}
|
||||
|
||||
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 destinationNameLabel = form.destinationType === '维修站' ? '维修站' : (form.destinationType === '停车场' ? '停车场' : '目的地名称');
|
||||
var destinationNameNode = (function () {
|
||||
if (form.destinationType === '其他') {
|
||||
return React.createElement(Input, {
|
||||
placeholder: '请输入目的地名称',
|
||||
value: form.destinationNameOther,
|
||||
onChange: function (e) { updateForm({ destinationNameOther: e.target.value }); },
|
||||
status: errors.destinationName ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
var opts = form.destinationType === '维修站' ? destinationRepairOptions : destinationParkingOptions;
|
||||
return React.createElement(Select, {
|
||||
placeholder: '请选择' + destinationNameLabel,
|
||||
style: controlStyle,
|
||||
value: form.destinationName,
|
||||
onChange: function (v) { updateForm({ destinationName: v }); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: opts,
|
||||
filterOption: filterOption,
|
||||
status: errors.destinationName ? 'error' : undefined,
|
||||
disabled: !form.destinationType
|
||||
});
|
||||
})();
|
||||
|
||||
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: 'startMileageKm',
|
||||
width: 160,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_startMileageKm';
|
||||
return React.createElement(Input, {
|
||||
value: r.startMileageKm,
|
||||
onChange: function (e) { updateRow(index, { startMileageKm: toFixed2Input(e.target.value) }); },
|
||||
placeholder: '0.00',
|
||||
addonAfter: 'km',
|
||||
status: errors[k] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '异动开始氢量'),
|
||||
key: 'startHydrogen',
|
||||
width: 150,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_startHydrogen';
|
||||
var unit = r.h2Unit || '%/MPa';
|
||||
return React.createElement(Input, {
|
||||
value: r.startHydrogen,
|
||||
onChange: function (e) { updateRow(index, { startHydrogen: toFixed2Input(e.target.value) }); },
|
||||
placeholder: '0.00',
|
||||
addonAfter: unit,
|
||||
status: errors[k] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '异动开始电量'),
|
||||
key: 'startElectricKwh',
|
||||
width: 150,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_startElectricKwh';
|
||||
return React.createElement(Input, {
|
||||
value: r.startElectricKwh,
|
||||
onChange: function (e) { updateRow(index, { startElectricKwh: 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,
|
||||
showTime: { format: 'HH:mm' },
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
placeholder: '请选择异动开始日期',
|
||||
value: form.startTime,
|
||||
onChange: function (v) { updateForm({ startTime: v }); },
|
||||
status: errors.startTime ? 'error' : undefined
|
||||
}),
|
||||
errors.startTime ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.startTime) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '异动预计结束日期'),
|
||||
React.createElement(DatePicker, {
|
||||
style: controlStyle,
|
||||
showTime: { format: 'HH:mm' },
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
placeholder: '请选择异动预计结束日期',
|
||||
value: form.plannedEndTime,
|
||||
onChange: function (v) { updateForm({ plannedEndTime: v }); },
|
||||
status: errors.plannedEndTime ? 'error' : undefined
|
||||
}),
|
||||
errors.plannedEndTime ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.plannedEndTime) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '异动目的地'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择异动目的地',
|
||||
style: controlStyle,
|
||||
value: form.destinationType,
|
||||
onChange: function (v) {
|
||||
setForm(function (p) {
|
||||
return Object.assign({}, p, {
|
||||
destinationType: v,
|
||||
destinationName: undefined,
|
||||
destinationNameOther: ''
|
||||
});
|
||||
});
|
||||
},
|
||||
allowClear: true,
|
||||
options: destinationTypeOptions,
|
||||
status: errors.destinationType ? 'error' : undefined
|
||||
}),
|
||||
errors.destinationType ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.destinationType) : null
|
||||
),
|
||||
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, destinationNameLabel),
|
||||
destinationNameNode,
|
||||
errors.destinationName ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.destinationName) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '异动类型'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择异动类型',
|
||||
style: controlStyle,
|
||||
value: form.changeType,
|
||||
onChange: function (v) { updateForm({ changeType: v }); },
|
||||
allowClear: true,
|
||||
options: changeTypeOptions,
|
||||
status: errors.changeType ? 'error' : undefined
|
||||
}),
|
||||
errors.changeType ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.changeType) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '预计异动里程'),
|
||||
React.createElement(Input, {
|
||||
placeholder: '0.00',
|
||||
value: form.plannedMileageKm,
|
||||
onChange: function (e) { updateForm({ plannedMileageKm: toFixed2Input(e.target.value) }); },
|
||||
addonAfter: 'km'
|
||||
})
|
||||
),
|
||||
|
||||
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
|
||||
React.createElement('div', { style: labelStyle }, '备注'),
|
||||
React.createElement(Input.TextArea, {
|
||||
placeholder: '请输入备注',
|
||||
value: form.remark,
|
||||
onChange: function (e) { updateForm({ remark: e.target.value }); },
|
||||
autoSize: { minRows: 3, maxRows: 6 }
|
||||
})
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
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: 1250 }
|
||||
}),
|
||||
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 }, '取消')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
447
web端/运维管理/车辆业务/调拨管理-接收记录.jsx
Normal file
447
web端/运维管理/车辆业务/调拨管理-接收记录.jsx
Normal file
@@ -0,0 +1,447 @@
|
||||
// 【重要】必须使用 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 }, '返回')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
552
web端/运维管理/车辆业务/调拨管理-新增.jsx
Normal file
552
web端/运维管理/车辆业务/调拨管理-新增.jsx
Normal 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 }, '取消')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
302
web端/运维管理/车辆业务/调拨管理-查看.jsx
Normal file
302
web端/运维管理/车辆业务/调拨管理-查看.jsx
Normal file
@@ -0,0 +1,302 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 运维管理 - 车辆业务 - 调拨管理 - 查看（只读）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
var useMemo = React.useMemo;
|
||||
|
||||
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 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 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 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运管平台」中的「调拨管理」「查看」模块',
|
||||
'#面包屑：运维管理-车辆业务-调拨管理-查看',
|
||||
'页面布局与字段与「调拨管理-新增」一致，所有表单项均为只读，仅供查询展示。',
|
||||
'',
|
||||
'1.调拨情况：调拨日期、出发/接收区域、接收人、调拨方式、调拨原因、运输方名称、运输方联系方式 — 全部禁用不可编辑。',
|
||||
'2.调拨车辆清单：车牌号、车辆类型、品牌、型号、出发停车场、出发里程、出发氢量、出发电量 — 全部禁用；不提供新增行与删除操作。',
|
||||
'3.底部仅提供「返回」按钮，返回调拨管理列表（原型）。'
|
||||
].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' });
|
||||
}
|
||||
}
|
||||
];
|
||||
}, []);
|
||||
|
||||
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(DatePicker, {
|
||||
style: controlStyle,
|
||||
format: 'YYYY-MM-DD',
|
||||
value: form.transferDate,
|
||||
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: 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, {
|
||||
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,
|
||||
disabled: true,
|
||||
autoSize: { minRows: 3, maxRows: 6 }
|
||||
})
|
||||
),
|
||||
|
||||
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 })
|
||||
)
|
||||
),
|
||||
|
||||
React.createElement(Card, { title: '调拨车辆清单', style: { marginBottom: 16 } },
|
||||
React.createElement(Table, {
|
||||
rowKey: 'id',
|
||||
columns: vehicleColumns,
|
||||
dataSource: vehicles,
|
||||
size: 'small',
|
||||
pagination: false,
|
||||
scroll: { x: 1020 }
|
||||
})
|
||||
),
|
||||
|
||||
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('返回调拨管理页（原型）'); } }, '返回')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
547
web端/运维管理/车辆业务/调拨管理-编辑.jsx
Normal file
547
web端/运维管理/车辆业务/调拨管理-编辑.jsx
Normal file
@@ -0,0 +1,547 @@
|
||||
// 【重要】必须使用 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 }, '取消')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user