web端: 车辆/运维模块更新
- 车辆管理、车辆管理-查看：详情 Tab（后装设备/租赁/事故/违章/异动/调拨/证照管理等） - 车辆业务：异动管理列表与查看页、调拨相关页面与需求说明 - 需求说明文档补充 Made-with: Cursor
This commit is contained in:
王冕
@@ -457,6 +457,7 @@ const Component = function () {
|
||||
React.createElement('div', { style: sectionTitleStyle }, React.createElement('span', { style: sectionIconStyle }), '保养参数'),
|
||||
React.createElement(Table, { size: 'small', rowKey: 'key', columns: maintenanceColumns, dataSource: maintenanceTableData, pagination: false })
|
||||
);
|
||||
|
||||
var detailTabItems = [
|
||||
{ key: '型号参数', label: '型号参数', children: modelParamContent },
|
||||
{ key: '后装设备', label: '后装设备', children: React.createElement('div', { style: tabContentCardStyle }, tabContent('后装设备列表（原型占位）')) },
|
||||
|
||||
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
@@ -12,6 +12,11 @@ const Component = function () {
|
||||
var Tag = antd.Tag;
|
||||
var Button = antd.Button;
|
||||
var Tooltip = antd.Tooltip;
|
||||
var Select = antd.Select;
|
||||
var DatePicker = antd.DatePicker;
|
||||
var RangePicker = DatePicker.RangePicker;
|
||||
var message = antd.message;
|
||||
var Image = antd.Image;
|
||||
|
||||
// 顶部概览 mock 数据（与图片一致）
|
||||
var overview = {
|
||||
@@ -72,6 +77,21 @@ const Component = function () {
|
||||
coldMachineVendor: 'xxxxxxxx企业',
|
||||
stackVendor: 'XXXXXXXX企业'
|
||||
};
|
||||
|
||||
// 证照管理 Tab：证件照片占位（可替换为真实 URL，支持 Image 预览）
|
||||
var licensePhotoPlaceholder = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="336" height="224"><rect fill="#f5f5f5" width="100%" height="100%"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#8c8c8c" font-size="14" font-family="system-ui,sans-serif">行驶证/证照示意图</text></svg>');
|
||||
var certificateDetail = {
|
||||
drivingLicense: { img: licensePhotoPlaceholder, regDate: '2025-07-01', scrapDate: '2038-12-31', inspectExpire: '2027-07-31' },
|
||||
operationPermit: { img: licensePhotoPlaceholder, permitNo: '营330482001234', regDate: '2025-07-15', inspectExpire: '2026-07-14', certExpire: '2030-07-14' },
|
||||
passPermit: { img: licensePhotoPlaceholder, code: 'TX-ZJ-2025-0088', area: '浙江省嘉兴市平湖市行政辖区', expire: '2026-12-31' },
|
||||
registrationCert: { img: licensePhotoPlaceholder },
|
||||
h2Permit: { img: licensePhotoPlaceholder, permitCode: 'JQZ-2025-F069001', cardCode: 'JK-88A901256', inspectDate: '2025-06-15' },
|
||||
h2Card: { img: licensePhotoPlaceholder, stationName: '嘉兴港区某某加氢站' },
|
||||
safetyValve: { img: licensePhotoPlaceholder, inspectDate: '2025-05-10', cycle: '12个月', validUntil: '2026-05-09' },
|
||||
pressureGauge: { img: licensePhotoPlaceholder, inspectDate: '2025-05-10', cycle: '12个月', gaugeValidUntil: '2026-05-09' },
|
||||
h2Cylinder: { img: licensePhotoPlaceholder, vendor: '某某高压气瓶制造有限公司', inspectDate: '2025-04-01', cycle: '36个月', cylinderValidUntil: '2028-03-31' }
|
||||
};
|
||||
|
||||
var maintenanceList = [
|
||||
{ key: '1', item: '变速器油', kmCycle: '60000', monthCycle: '24', laborCost: '0', materialCost: '571', total: '571', lastKm: '' },
|
||||
{ key: '2', item: '变速器油', kmCycle: '60000', monthCycle: '24', laborCost: '0', materialCost: '571', total: '571', lastKm: '' },
|
||||
@@ -81,6 +101,371 @@ const Component = function () {
|
||||
];
|
||||
|
||||
var activeTab = useState('model');
|
||||
var rearFilterDraft = useState({ installRange: null, deviceType: undefined });
|
||||
var rearFilterApplied = useState({ installRange: null, deviceType: undefined });
|
||||
var leaseFilterDraft = useState({ contractCode: undefined, projectName: undefined, customerName: undefined });
|
||||
var leaseFilterApplied = useState({ contractCode: undefined, projectName: undefined, customerName: undefined });
|
||||
var accidentFilterDraft = useState({ accidentTimeRange: null, customerName: undefined });
|
||||
var accidentFilterApplied = useState({ accidentTimeRange: null, customerName: undefined });
|
||||
var violationFilterDraft = useState({ violationTimeRange: null, payStatus: undefined, violationCustomer: undefined });
|
||||
var violationFilterApplied = useState({ violationTimeRange: null, payStatus: undefined, violationCustomer: undefined });
|
||||
var moveRecordFilterDraft = useState({ moveStartRange: null, destination: undefined, moveType: undefined });
|
||||
var moveRecordFilterApplied = useState({ moveStartRange: null, destination: undefined, moveType: undefined });
|
||||
var transferRecordFilterDraft = useState({ transferDateRange: null, transferPerson: undefined, receivePerson: undefined });
|
||||
var transferRecordFilterApplied = useState({ transferDateRange: null, transferPerson: undefined, receivePerson: undefined });
|
||||
|
||||
var rearDeviceTypeOptions = [
|
||||
{ value: 'GPS', label: 'GPS' },
|
||||
{ value: '尾板', label: '尾板' },
|
||||
{ value: '车身广告', label: '车身广告' },
|
||||
{ value: 'G7安全套件', label: 'G7安全套件' },
|
||||
{ value: 'G7普通设备', label: 'G7普通设备' },
|
||||
{ value: 'G7温控设备', label: 'G7温控设备' },
|
||||
{ value: '备胎', label: '备胎' }
|
||||
];
|
||||
var rearDeviceMockData = [
|
||||
{ key: 'rd1', deviceType: 'GPS', supplier: '深圳某某物联科技', actionType: '安装', actionTime: '2024-06-10 09:30', operator: '张三' },
|
||||
{ key: 'rd2', deviceType: '尾板', supplier: '上海凯卓液压设备', actionType: '安装', actionTime: '2024-07-02 14:15', operator: '李四' },
|
||||
{ key: 'rd3', deviceType: '车身广告', supplier: '广州传媒广告', actionType: '拆卸', actionTime: '2024-08-18 11:00', operator: '王五' },
|
||||
{ key: 'rd4', deviceType: 'G7安全套件', supplier: 'G7易流科技', actionType: '安装', actionTime: '2024-09-05 16:40', operator: '赵六' },
|
||||
{ key: 'rd5', deviceType: 'G7普通设备', supplier: 'G7易流科技', actionType: '拆卸', actionTime: '2024-10-12 08:20', operator: '张三' },
|
||||
{ key: 'rd6', deviceType: 'G7温控设备', supplier: 'G7易流科技', actionType: '安装', actionTime: '2024-11-01 13:45', operator: '陈静' },
|
||||
{ key: 'rd7', deviceType: '备胎', supplier: '某某汽配供应链', actionType: '安装', actionTime: '2024-11-20 10:00', operator: '李四' },
|
||||
{ key: 'rd8', deviceType: 'GPS', supplier: '深圳某某物联科技', actionType: '拆卸', actionTime: '2025-01-08 15:30', operator: '王五' }
|
||||
];
|
||||
|
||||
function matchRearInstallRange(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 fmtRearActionTime(v) {
|
||||
if (v === null || v === undefined) return '-';
|
||||
var str = String(v).trim();
|
||||
if (!str) return '-';
|
||||
if (/^\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}/.test(str)) return str.slice(0, 16);
|
||||
if (/^\d{4}-\d{2}-\d{2}$/.test(str)) return str + ' 00:00';
|
||||
return str;
|
||||
}
|
||||
function filterOption(input, option) {
|
||||
var label = (option && (option.label || option.children)) || '';
|
||||
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
|
||||
}
|
||||
function fmtDateYMD(v) {
|
||||
if (v === null || v === undefined) return '-';
|
||||
var s = String(v).trim();
|
||||
if (!s || s === '-') return '-';
|
||||
if (/^\d{4}-\d{2}-\d{2}/.test(s)) return s.slice(0, 10);
|
||||
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());
|
||||
} catch (e) {
|
||||
return s;
|
||||
}
|
||||
}
|
||||
|
||||
var rearDraft = rearFilterDraft[0];
|
||||
var setRearDraft = rearFilterDraft[1];
|
||||
var rearApplied = rearFilterApplied[0];
|
||||
var setRearApplied = rearFilterApplied[1];
|
||||
var rearFiltered = rearDeviceMockData.filter(function (row) {
|
||||
if (!matchRearInstallRange(row.actionTime, rearApplied.installRange)) return false;
|
||||
if (rearApplied.deviceType && row.deviceType !== rearApplied.deviceType) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
var leaseMockData = [
|
||||
{ key: 'ls1', contractCode: 'LNZLHTSH2023071301', projectName: '嘉兴冷链城配A线', customerName: '上海迅杰物流有限公司', deliveryDate: '2024-03-15', deliveryPerson: '金可鹏', returnDate: '2024-09-10', returnPerson: '王明' },
|
||||
{ key: 'ls2', contractCode: 'HT-2024-009', projectName: '平湖氢能示范运营', customerName: '上海迅杰物流有限公司', deliveryDate: '2025-01-08', deliveryPerson: '李华', returnDate: '-', returnPerson: '-' },
|
||||
{ key: 'ls3', contractCode: 'ZL-SH-2023-066', projectName: '上海港短驳项目', customerName: '江苏某某供应链有限公司', deliveryDate: '2023-11-20', deliveryPerson: '赵强', returnDate: '2024-05-30', returnPerson: '陈静' },
|
||||
{ key: 'ls4', contractCode: 'LNZLHTSH2023071301', projectName: '沪浙干线运输', customerName: '浙江某某快运', deliveryDate: '2022-08-01', deliveryPerson: '张三', returnDate: '2023-07-14', returnPerson: '李四' },
|
||||
{ key: 'ls5', contractCode: 'HT-2024-112', projectName: '长三角城配网络', customerName: '上海迅杰物流有限公司', deliveryDate: '2024-11-01', deliveryPerson: '周伟', returnDate: '2025-02-20', returnPerson: '吴芳' }
|
||||
];
|
||||
function leaseUniqOptions(rows, field) {
|
||||
var seen = {};
|
||||
var out = [];
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
var v = rows[i][field];
|
||||
if (v && v !== '-' && !seen[v]) {
|
||||
seen[v] = true;
|
||||
out.push({ value: v, label: v });
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
var leaseContractOptions = leaseUniqOptions(leaseMockData, 'contractCode');
|
||||
var leaseProjectOptions = leaseUniqOptions(leaseMockData, 'projectName');
|
||||
var leaseCustomerOptions = leaseUniqOptions(leaseMockData, 'customerName');
|
||||
var leaseDraft = leaseFilterDraft[0];
|
||||
var setLeaseDraft = leaseFilterDraft[1];
|
||||
var leaseApplied = leaseFilterApplied[0];
|
||||
var setLeaseApplied = leaseFilterApplied[1];
|
||||
var leaseFiltered = leaseMockData.filter(function (row) {
|
||||
if (leaseApplied.contractCode && row.contractCode !== leaseApplied.contractCode) return false;
|
||||
if (leaseApplied.projectName && row.projectName !== leaseApplied.projectName) return false;
|
||||
if (leaseApplied.customerName && row.customerName !== leaseApplied.customerName) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
function matchAccidentDateRange(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 cellOrDash(v) {
|
||||
if (v === null || v === undefined) return '-';
|
||||
var s = String(v).trim();
|
||||
return s ? s : '-';
|
||||
}
|
||||
|
||||
var accidentMockData = [
|
||||
{
|
||||
key: 'ac1',
|
||||
accidentCode: 'SG202508250001',
|
||||
accidentTime: '2025-08-25',
|
||||
location: '北京市大兴区京开高速辅路K12段',
|
||||
accidentType: '撞固定物',
|
||||
customerName: '北京海龙运输有限公司',
|
||||
ourLossAmount: '',
|
||||
otherLossAmount: '',
|
||||
liability: '全责',
|
||||
status: '未结案',
|
||||
closeTime: '',
|
||||
otherFee: '',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
key: 'ac2',
|
||||
accidentCode: 'SG202504180012',
|
||||
accidentTime: '2025-04-18',
|
||||
location: '上海市浦东新区外环高速出口匝道',
|
||||
accidentType: '追尾',
|
||||
customerName: '上海迅杰物流有限公司',
|
||||
ourLossAmount: '12800.00',
|
||||
otherLossAmount: '5600.00',
|
||||
liability: '主责',
|
||||
status: '已结案',
|
||||
closeTime: '2025-05-30',
|
||||
otherFee: '800.00',
|
||||
remark: '对方车辆已理赔完毕'
|
||||
},
|
||||
{
|
||||
key: 'ac3',
|
||||
accidentCode: 'SG202502030088',
|
||||
accidentTime: '2025-02-03',
|
||||
location: '浙江省嘉兴市平湖市乍兴公路与平廊线交叉口',
|
||||
accidentType: '剐蹭',
|
||||
customerName: '上海迅杰物流有限公司',
|
||||
ourLossAmount: '2100.00',
|
||||
otherLossAmount: '',
|
||||
liability: '同责',
|
||||
status: '未结案',
|
||||
closeTime: '',
|
||||
otherFee: '',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
key: 'ac4',
|
||||
accidentCode: 'SG202411120156',
|
||||
accidentTime: '2024-11-12',
|
||||
location: '广东省深圳市南山区南海大道与东滨路交汇处',
|
||||
accidentType: '侧翻',
|
||||
customerName: '江苏某某供应链有限公司',
|
||||
ourLossAmount: '',
|
||||
otherLossAmount: '32000.00',
|
||||
liability: '次责',
|
||||
status: '已结案',
|
||||
closeTime: '2024-12-20',
|
||||
otherFee: '1200.50',
|
||||
remark: '货物转运产生费用'
|
||||
},
|
||||
{
|
||||
key: 'ac5',
|
||||
accidentCode: 'SG202409051203',
|
||||
accidentTime: '2024-09-05',
|
||||
location: '杭州市余杭区文一西路隧道内',
|
||||
accidentType: '撞固定物',
|
||||
customerName: '浙江某某快运有限公司',
|
||||
ourLossAmount: '8600.00',
|
||||
otherLossAmount: '',
|
||||
liability: '全责',
|
||||
status: '未结案',
|
||||
closeTime: '',
|
||||
otherFee: '',
|
||||
remark: '待交警责任认定书'
|
||||
}
|
||||
];
|
||||
var accidentCustomerOptions = leaseUniqOptions(accidentMockData, 'customerName');
|
||||
var accidentDraft = accidentFilterDraft[0];
|
||||
var setAccidentDraft = accidentFilterDraft[1];
|
||||
var accidentApplied = accidentFilterApplied[0];
|
||||
var setAccidentApplied = accidentFilterApplied[1];
|
||||
var accidentFiltered = accidentMockData.filter(function (row) {
|
||||
if (!matchAccidentDateRange(row.accidentTime, accidentApplied.accidentTimeRange)) return false;
|
||||
if (accidentApplied.customerName && row.customerName !== accidentApplied.customerName) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
var violationPayStatusOptions = [
|
||||
{ value: '未缴费', label: '未缴费' },
|
||||
{ value: '已缴费', label: '已缴费' }
|
||||
];
|
||||
var violationMockData = [
|
||||
{
|
||||
key: 'vz1',
|
||||
violationCode: 'WZ202602010001',
|
||||
violationBehavior: '闯红灯',
|
||||
violationTime: '2026-02-01',
|
||||
fineAmount: '100.00',
|
||||
payStatus: '未缴费',
|
||||
points: '6',
|
||||
processed: '未处理',
|
||||
violationCustomer: '上海馨想事成物流有限公司',
|
||||
photo: '',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
key: 'vz2',
|
||||
violationCode: 'WZ202511200088',
|
||||
violationBehavior: '超速20%以下',
|
||||
violationTime: '2025-11-20',
|
||||
fineAmount: '200.00',
|
||||
payStatus: '已缴费',
|
||||
points: '3',
|
||||
processed: '已处理',
|
||||
violationCustomer: '上海迅杰物流有限公司',
|
||||
photo: 'mock-url',
|
||||
remark: '线上已缴清'
|
||||
},
|
||||
{
|
||||
key: 'vz3',
|
||||
violationCode: 'WZ202508150045',
|
||||
violationBehavior: '违法停车',
|
||||
violationTime: '2025-08-15',
|
||||
fineAmount: '150.00',
|
||||
payStatus: '未缴费',
|
||||
points: '0',
|
||||
processed: '未处理',
|
||||
violationCustomer: '北京海龙运输有限公司',
|
||||
photo: '',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
key: 'vz4',
|
||||
violationCode: 'WZ202506030112',
|
||||
violationBehavior: '不按导向车道行驶',
|
||||
violationTime: '2025-06-03',
|
||||
fineAmount: '100.00',
|
||||
payStatus: '已缴费',
|
||||
points: '2',
|
||||
processed: '已处理',
|
||||
violationCustomer: '江苏某某供应链有限公司',
|
||||
photo: '',
|
||||
remark: ''
|
||||
},
|
||||
{
|
||||
key: 'vz5',
|
||||
violationCode: 'WZ202503221956',
|
||||
violationBehavior: '闯禁令标志',
|
||||
violationTime: '2025-03-22',
|
||||
fineAmount: '100.00',
|
||||
payStatus: '未缴费',
|
||||
points: '3',
|
||||
processed: '未处理',
|
||||
violationCustomer: '上海馨想事成物流有限公司',
|
||||
photo: '',
|
||||
remark: '复议中'
|
||||
}
|
||||
];
|
||||
var violationCustomerOptions = leaseUniqOptions(violationMockData, 'violationCustomer');
|
||||
var violationDraft = violationFilterDraft[0];
|
||||
var setViolationDraft = violationFilterDraft[1];
|
||||
var violationApplied = violationFilterApplied[0];
|
||||
var setViolationApplied = violationFilterApplied[1];
|
||||
var violationFiltered = violationMockData.filter(function (row) {
|
||||
if (!matchAccidentDateRange(row.violationTime, violationApplied.violationTimeRange)) return false;
|
||||
if (violationApplied.payStatus && row.payStatus !== violationApplied.payStatus) return false;
|
||||
if (violationApplied.violationCustomer && row.violationCustomer !== violationApplied.violationCustomer) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
var moveDestinationOptions = [
|
||||
{ value: '维修站', label: '维修站' },
|
||||
{ value: '停车场', label: '停车场' },
|
||||
{ value: '其他', label: '其他' }
|
||||
];
|
||||
var moveTypeFilterOptions = [
|
||||
{ value: '维修', label: '维修' },
|
||||
{ value: '保养', label: '保养' },
|
||||
{ value: '年审', label: '年审' },
|
||||
{ value: '其他', label: '其他' }
|
||||
];
|
||||
var moveRecordMockData = [
|
||||
{ key: 'mv1', moveStartAt: '2026-02-20 09:30', moveEndExpectedAt: '2026-02-22 18:00', approvalStatus: '待提交', destination: '维修站', destinationName: '天河氢能维修中心', moveType: '维修', expectedMileageKm: '45.5', startMileageKm: '15230.12', startElectricKwh: '68.40', startHydrogen: '28.30', h2Unit: 'MPa', creatorName: '张明', createTime: '2026-02-20 08:10' },
|
||||
{ key: 'mv2', moveStartAt: '2026-02-21 14:00', moveEndExpectedAt: '2026-02-21 17:30', approvalStatus: '审批中', destination: '停车场', destinationName: '西湖景区停车场', moveType: '保养', expectedMileageKm: '12.0', startMileageKm: '12010.00', startElectricKwh: '55.20', startHydrogen: '60.00', h2Unit: '%', creatorName: '王芳', createTime: '2026-02-21 13:20' },
|
||||
{ key: 'mv3', moveStartAt: '2026-02-24 08:15', moveEndExpectedAt: '2026-02-24 12:00', approvalStatus: '审批完成', destination: '其他', destinationName: '车管所检测线', moveType: '年审', expectedMileageKm: '8.2', startMileageKm: '8020.50', startElectricKwh: '62.10', startHydrogen: '55.00', h2Unit: '%', creatorName: '李华', createTime: '2026-02-24 07:50' },
|
||||
{ key: 'mv4', moveStartAt: '2026-02-25 10:00', moveEndExpectedAt: '2026-02-26 09:00', approvalStatus: '驳回', destination: '维修站', destinationName: '张江服务站', moveType: '其他', expectedMileageKm: '30.0', startMileageKm: '9800.00', startElectricKwh: '69.00', startHydrogen: '26.00', h2Unit: 'MPa', creatorName: '赵强', createTime: '2026-02-25 09:40' },
|
||||
{ key: 'mv5', moveStartAt: '2026-02-26 16:20', moveEndExpectedAt: '2026-02-27 10:00', approvalStatus: '撤回', destination: '停车场', destinationName: '宁波江北停车场', moveType: '维修', expectedMileageKm: '22.8', startMileageKm: '15010.00', startElectricKwh: '58.00', startHydrogen: '22.10', h2Unit: 'MPa', creatorName: '陈静', createTime: '2026-02-26 15:55' },
|
||||
{ key: 'mv6', moveStartAt: '2026-02-27 07:45', moveEndExpectedAt: '2026-02-27 19:00', approvalStatus: '审批中', destination: '维修站', destinationName: '苏州园区快修站', moveType: '保养', expectedMileageKm: '18.6', startMileageKm: '23105.80', startElectricKwh: '42.50', startHydrogen: '45.20', h2Unit: '%', creatorName: '张明', createTime: '2026-02-27 07:20' },
|
||||
{ key: 'mv7', moveStartAt: '2026-02-27 11:00', moveEndExpectedAt: '2026-02-28 17:30', approvalStatus: '审批完成', destination: '其他', destinationName: '顺义综合检测场', moveType: '年审', expectedMileageKm: '35.0', startMileageKm: '8890.00', startElectricKwh: '71.20', startHydrogen: '31.50', h2Unit: 'MPa', creatorName: '王芳', createTime: '2026-02-27 10:35' },
|
||||
{ key: 'mv8', moveStartAt: '2026-02-28 08:30', moveEndExpectedAt: '2026-02-28 14:00', approvalStatus: '待提交', destination: '停车场', destinationName: '两江新区枢纽停车场', moveType: '其他', expectedMileageKm: '6.5', startMileageKm: '17660.25', startElectricKwh: '48.90', startHydrogen: '58.00', h2Unit: '%', creatorName: '李华', createTime: '2026-02-28 08:05' },
|
||||
{ key: 'mv9', moveStartAt: '2026-02-28 13:15', moveEndExpectedAt: '2026-03-01 09:00', approvalStatus: '驳回', destination: '维修站', destinationName: '成都高新氢能维保站', moveType: '维修', expectedMileageKm: '52.3', startMileageKm: '34500.00', startElectricKwh: '33.60', startHydrogen: '24.80', h2Unit: 'MPa', creatorName: '赵强', createTime: '2026-02-28 12:50' },
|
||||
{ key: 'mv10', moveStartAt: '2026-03-01 06:00', moveEndExpectedAt: '2026-03-01 11:45', approvalStatus: '审批完成', destination: '其他', destinationName: '青岛港务临时停放点', moveType: '保养', expectedMileageKm: '15.0', startMileageKm: '11220.00', startElectricKwh: '65.00', startHydrogen: '62.50', h2Unit: '%', creatorName: '陈静', createTime: '2026-03-01 05:40' }
|
||||
];
|
||||
var moveRecordDraft = moveRecordFilterDraft[0];
|
||||
var setMoveRecordDraft = moveRecordFilterDraft[1];
|
||||
var moveRecordApplied = moveRecordFilterApplied[0];
|
||||
var setMoveRecordApplied = moveRecordFilterApplied[1];
|
||||
var moveRecordFiltered = moveRecordMockData.filter(function (row) {
|
||||
if (!matchAccidentDateRange(row.moveStartAt, moveRecordApplied.moveStartRange)) return false;
|
||||
if (moveRecordApplied.destination && row.destination !== moveRecordApplied.destination) return false;
|
||||
if (moveRecordApplied.moveType && row.moveType !== moveRecordApplied.moveType) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
var transferMockData = [
|
||||
{ key: 'tp1', transferDate: '2026-02-20 09:30', departRegionText: '广东省-广州市', transferPerson: '张明', receiveRegionText: '浙江省-嘉兴市', receivePerson: '王芳', approvalStatus: '待提交', method: '第三方运输', reason: '场站资源调整', vehicleType: '厢式货车', brand: '东风', model: 'DFH1180', carrierName: '顺丰同城运输', departMileageKm: '15230.12', departHydrogen: '28.30', h2Unit: 'MPa', departElectricKwh: '68.40', departParking: '天河智慧停车场', createDate: '2026-02-20 08:10' },
|
||||
{ key: 'tp2', transferDate: '2026-02-22 14:10', departRegionText: '浙江省-杭州市', transferPerson: '李华', receiveRegionText: '上海市-上海市', receivePerson: '赵强', approvalStatus: '审批完成', method: '司机驾驶', reason: '项目调度需要', vehicleType: 'SUV', brand: '小鹏', model: 'P7', carrierName: '-', departMileageKm: '12010.00', departHydrogen: '60.00', h2Unit: '%', departElectricKwh: '55.20', departParking: '西湖景区停车场', createDate: '2026-02-22 12:40' },
|
||||
{ key: 'tp3', transferDate: '2026-02-24 11:05', departRegionText: '广东省-深圳市', transferPerson: '王芳', receiveRegionText: '浙江省-宁波市', receivePerson: '陈静', approvalStatus: '审批完成', method: '第三方运输', reason: '维修站资源调整', vehicleType: '轿车', brand: '比亚迪', model: '汉', carrierName: '德邦物流', departMileageKm: '8020.50', departHydrogen: '55.00', h2Unit: '%', departElectricKwh: '62.10', departParking: '南山科技园停车场', createDate: '2026-02-24 10:20' },
|
||||
{ key: 'tp4', transferDate: '2026-02-25 16:40', departRegionText: '浙江省-嘉兴市', transferPerson: '赵强', receiveRegionText: '上海市-上海市', receivePerson: '李华', approvalStatus: '待提交', method: '司机驾驶', reason: '项目调度需要', vehicleType: '轿车', brand: '蔚来', model: 'ET5', carrierName: '-', departMileageKm: '15010.00', departHydrogen: '22.10', h2Unit: 'MPa', departElectricKwh: '58.00', departParking: '宁波江北停车场', createDate: '2026-02-25 15:55' },
|
||||
{ key: 'tp5', transferDate: '2026-02-26 09:15', departRegionText: '上海市-上海市', transferPerson: '陈静', receiveRegionText: '广东省-广州市', receivePerson: '张明', approvalStatus: '审批驳回', method: '第三方运输', reason: '车辆调拨申请驳回样例', vehicleType: '厢式货车', brand: '福田', model: 'BJ1180', carrierName: '顺丰同城运输', departMileageKm: '9800.00', departHydrogen: '26.00', h2Unit: 'MPa', departElectricKwh: '69.00', departParking: '张江园区停车场', createDate: '2026-02-26 08:30' },
|
||||
{ key: 'tp6', transferDate: '2026-02-27 13:30', departRegionText: '浙江省-杭州市', transferPerson: '张明', receiveRegionText: '浙江省-嘉兴市', receivePerson: '王芳', approvalStatus: '撤回', method: '司机驾驶', reason: '计划变更，撤回申请', vehicleType: 'SUV', brand: '小鹏', model: 'P7', carrierName: '-', departMileageKm: '12100.20', departHydrogen: '58.00', h2Unit: '%', departElectricKwh: '54.80', departParking: '西湖景区停车场', createDate: '2026-02-27 12:45' },
|
||||
{ key: 'tp7', transferDate: '2026-02-28 08:50', departRegionText: '广东省-东莞市', transferPerson: '李华', receiveRegionText: '广东省-深圳市', receivePerson: '赵强', approvalStatus: '审批中', method: '第三方运输', reason: '跨区域调拨', vehicleType: '厢式货车', brand: '东风', model: 'DFH1180', carrierName: '中外运', departMileageKm: '15310.00', departHydrogen: '27.50', h2Unit: 'MPa', departElectricKwh: '67.20', departParking: '松山湖停车场', createDate: '2026-02-28 08:05' },
|
||||
{ key: 'tp8', transferDate: '2026-03-01 10:10', departRegionText: '浙江省-宁波市', transferPerson: '王芳', receiveRegionText: '上海市-上海市', receivePerson: '陈静', approvalStatus: '待提交', method: '司机驾驶', reason: '项目新增点位支持', vehicleType: '轿车', brand: '蔚来', model: 'ET5', carrierName: '-', departMileageKm: '15120.00', departHydrogen: '21.80', h2Unit: 'MPa', departElectricKwh: '57.50', departParking: '宁波江北停车场', createDate: '2026-03-01 09:30' },
|
||||
{ key: 'tp9', transferDate: '2026-03-02 15:25', departRegionText: '上海市-上海市', transferPerson: '赵强', receiveRegionText: '浙江省-杭州市', receivePerson: '李华', approvalStatus: '审批中', method: '第三方运输', reason: '场站容量调整', vehicleType: '厢式货车', brand: '福田', model: 'BJ1180', carrierName: '德邦物流', departMileageKm: '9850.00', departHydrogen: '24.20', h2Unit: 'MPa', departElectricKwh: '68.30', departParking: '张江园区停车场', createDate: '2026-03-02 14:40' },
|
||||
{ key: 'tp10', transferDate: '2026-03-03 09:05', departRegionText: '浙江省-嘉兴市', transferPerson: '陈静', receiveRegionText: '广东省-广州市', receivePerson: '张明', approvalStatus: '待提交', method: '第三方运输', reason: '车辆调拨支持新项目', vehicleType: 'SUV', brand: '小鹏', model: 'P7', carrierName: '顺丰同城运输', departMileageKm: '12220.00', departHydrogen: '56.00', h2Unit: '%', departElectricKwh: '53.90', departParking: '嘉兴南湖停车场', createDate: '2026-03-03 08:20' }
|
||||
];
|
||||
var transferPersonOptions = leaseUniqOptions(transferMockData, 'transferPerson');
|
||||
var transferReceivePersonOptions = leaseUniqOptions(transferMockData, 'receivePerson');
|
||||
var transferDraft = transferRecordFilterDraft[0];
|
||||
var setTransferDraft = transferRecordFilterDraft[1];
|
||||
var transferApplied = transferRecordFilterApplied[0];
|
||||
var setTransferApplied = transferRecordFilterApplied[1];
|
||||
var transferFiltered = transferMockData.filter(function (row) {
|
||||
if (!matchAccidentDateRange(row.transferDate, transferApplied.transferDateRange)) return false;
|
||||
if (transferApplied.transferPerson && row.transferPerson !== transferApplied.transferPerson) return false;
|
||||
if (transferApplied.receivePerson && row.receivePerson !== transferApplied.receivePerson) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||||
var filterItemStyle = { marginBottom: 12 };
|
||||
|
||||
var styles = {
|
||||
page: { padding: '16px 24px 40px', backgroundColor: '#f5f5f5', minHeight: '100vh', fontSize: 14 },
|
||||
@@ -124,6 +509,88 @@ const Component = function () {
|
||||
);
|
||||
}
|
||||
|
||||
function CertFieldRow(label, value) {
|
||||
var show = value != null && String(value).trim() !== '';
|
||||
return React.createElement('div', { style: { display: 'flex', gap: 8, marginBottom: 10, fontSize: 14, lineHeight: '22px' } },
|
||||
React.createElement('span', { style: { color: 'rgba(0,0,0,0.45)', width: 168, flexShrink: 0 } }, label + '：'),
|
||||
React.createElement('span', { style: { color: 'rgba(0,0,0,0.85)' } }, show ? value : '—')
|
||||
);
|
||||
}
|
||||
function CertSectionCard(title, imageSrc, fieldNodes) {
|
||||
var right = fieldNodes && fieldNodes.length
|
||||
? React.createElement('div', {
|
||||
style: {
|
||||
flex: 1,
|
||||
minWidth: 260,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
alignSelf: 'stretch'
|
||||
}
|
||||
}, React.createElement('div', { style: { width: '100%' } }, fieldNodes))
|
||||
: null;
|
||||
return React.createElement(Card, { key: title, size: 'small', style: { marginBottom: 16 }, title: title },
|
||||
React.createElement('div', { style: { display: 'flex', gap: 24, flexWrap: 'wrap', alignItems: 'stretch' } },
|
||||
React.createElement('div', { style: { flexShrink: 0, display: 'flex', flexDirection: 'column' } },
|
||||
React.createElement('div', { style: { marginBottom: 8, color: 'rgba(0,0,0,0.45)', fontSize: 13 } }, '证件照片'),
|
||||
React.createElement(Image, {
|
||||
width: 168,
|
||||
height: 112,
|
||||
style: { objectFit: 'cover', borderRadius: 4, border: '1px solid #f0f0f0', background: '#fafafa' },
|
||||
src: imageSrc,
|
||||
alt: title,
|
||||
preview: true
|
||||
})
|
||||
),
|
||||
right
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
var cd = certificateDetail;
|
||||
var licenseManagementTabContent = React.createElement('div', { style: { padding: '0 4px' } },
|
||||
CertSectionCard('行驶证', cd.drivingLicense.img, [
|
||||
CertFieldRow('注册日期', cd.drivingLicense.regDate),
|
||||
CertFieldRow('强制报废日期', cd.drivingLicense.scrapDate),
|
||||
CertFieldRow('审验有效期', cd.drivingLicense.inspectExpire)
|
||||
]),
|
||||
CertSectionCard('营运证', cd.operationPermit.img, [
|
||||
CertFieldRow('营运证编号', cd.operationPermit.permitNo),
|
||||
CertFieldRow('注册日期', cd.operationPermit.regDate),
|
||||
CertFieldRow('审验有效期', cd.operationPermit.inspectExpire),
|
||||
CertFieldRow('证件有效期', cd.operationPermit.certExpire)
|
||||
]),
|
||||
CertSectionCard('通行证', cd.passPermit.img, [
|
||||
CertFieldRow('通行证编码', cd.passPermit.code),
|
||||
CertFieldRow('通行区域', cd.passPermit.area),
|
||||
CertFieldRow('有效期', cd.passPermit.expire)
|
||||
]),
|
||||
CertSectionCard('登记证', cd.registrationCert.img, null),
|
||||
CertSectionCard('加氢证', cd.h2Permit.img, [
|
||||
CertFieldRow('加氢证编码', cd.h2Permit.permitCode),
|
||||
CertFieldRow('加氢卡编码', cd.h2Permit.cardCode),
|
||||
CertFieldRow('检验日期', cd.h2Permit.inspectDate)
|
||||
]),
|
||||
CertSectionCard('加氢卡', cd.h2Card.img, [
|
||||
CertFieldRow('加氢卡对应加氢站', cd.h2Card.stationName)
|
||||
]),
|
||||
CertSectionCard('安全阀', cd.safetyValve.img, [
|
||||
CertFieldRow('检验日期', cd.safetyValve.inspectDate),
|
||||
CertFieldRow('检验周期', cd.safetyValve.cycle),
|
||||
CertFieldRow('安全阀检测有效期', cd.safetyValve.validUntil)
|
||||
]),
|
||||
CertSectionCard('压力表', cd.pressureGauge.img, [
|
||||
CertFieldRow('检验日期', cd.pressureGauge.inspectDate),
|
||||
CertFieldRow('检验周期', cd.pressureGauge.cycle),
|
||||
CertFieldRow('压力表检测有效期', cd.pressureGauge.gaugeValidUntil)
|
||||
]),
|
||||
CertSectionCard('氢气瓶', cd.h2Cylinder.img, [
|
||||
CertFieldRow('气瓶厂家', cd.h2Cylinder.vendor),
|
||||
CertFieldRow('检验日期', cd.h2Cylinder.inspectDate),
|
||||
CertFieldRow('检验周期', cd.h2Cylinder.cycle),
|
||||
CertFieldRow('氢瓶检测有效期', cd.h2Cylinder.cylinderValidUntil)
|
||||
])
|
||||
);
|
||||
|
||||
var tabItems = [
|
||||
{
|
||||
key: 'model',
|
||||
@@ -193,19 +660,478 @@ const Component = function () {
|
||||
)
|
||||
)
|
||||
},
|
||||
{ key: 'equip', label: '后装设备', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||||
{ key: 'license', label: '证照信息', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||||
{ key: 'lease', label: '租赁记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||||
{
|
||||
key: 'equip',
|
||||
label: '后装设备',
|
||||
children: React.createElement('div', { style: { padding: '0 4px' } },
|
||||
React.createElement(Card, { size: 'small', style: { marginBottom: 16 } },
|
||||
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px 24px', maxWidth: 900, alignItems: 'start' } },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '安装时间'),
|
||||
React.createElement(RangePicker, {
|
||||
style: { width: '100%' },
|
||||
value: rearDraft.installRange,
|
||||
onChange: function (v) { setRearDraft(function (p) { return Object.assign({}, p, { installRange: v }); }); },
|
||||
placeholder: ['开始日期', '结束日期']
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '设备类型'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择设备类型',
|
||||
style: { width: '100%' },
|
||||
value: rearDraft.deviceType,
|
||||
onChange: function (v) { setRearDraft(function (p) { return Object.assign({}, p, { deviceType: v }); }); },
|
||||
allowClear: true,
|
||||
options: rearDeviceTypeOptions
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8 } },
|
||||
React.createElement(Button, { onClick: function () {
|
||||
var empty = { installRange: null, deviceType: undefined };
|
||||
setRearDraft(empty);
|
||||
setRearApplied(empty);
|
||||
} }, '重置'),
|
||||
React.createElement(Button, { type: 'primary', onClick: function () { setRearApplied(Object.assign({}, rearDraft)); } }, '查询')
|
||||
)
|
||||
),
|
||||
React.createElement(Table, {
|
||||
size: 'small',
|
||||
rowKey: 'key',
|
||||
bordered: true,
|
||||
dataSource: rearFiltered,
|
||||
columns: [
|
||||
{ title: '设备类型', dataIndex: 'deviceType', key: 'deviceType', width: 140 },
|
||||
{ title: '供应商', dataIndex: 'supplier', key: 'supplier', width: 200, ellipsis: true },
|
||||
{ title: '类型', dataIndex: 'actionType', key: 'actionType', width: 90 },
|
||||
{ title: '安装/拆卸时间', dataIndex: 'actionTime', key: 'actionTime', width: 170, render: function (tv) { return fmtRearActionTime(tv); } },
|
||||
{ title: '操作人', dataIndex: 'operator', key: 'operator', width: 100 }
|
||||
],
|
||||
scroll: { x: 800 },
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: function (t) { return '共 ' + t + ' 条'; }
|
||||
}
|
||||
})
|
||||
)
|
||||
},
|
||||
{ key: 'license', label: '证照管理', children: licenseManagementTabContent },
|
||||
{
|
||||
key: 'lease',
|
||||
label: '租赁记录',
|
||||
children: React.createElement('div', { style: { padding: '0 4px' } },
|
||||
React.createElement(Card, { size: 'small', style: { marginBottom: 16 } },
|
||||
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px 24px', alignItems: 'start' } },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '合同编码'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请输入或选择合同编码',
|
||||
style: { width: '100%' },
|
||||
value: leaseDraft.contractCode,
|
||||
onChange: function (v) { setLeaseDraft(function (p) { return Object.assign({}, p, { contractCode: v }); }); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: leaseContractOptions,
|
||||
filterOption: filterOption
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '项目名称'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请输入或选择项目名称',
|
||||
style: { width: '100%' },
|
||||
value: leaseDraft.projectName,
|
||||
onChange: function (v) { setLeaseDraft(function (p) { return Object.assign({}, p, { projectName: v }); }); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: leaseProjectOptions,
|
||||
filterOption: filterOption
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '客户名称'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请输入或选择客户名称',
|
||||
style: { width: '100%' },
|
||||
value: leaseDraft.customerName,
|
||||
onChange: function (v) { setLeaseDraft(function (p) { return Object.assign({}, p, { customerName: v }); }); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: leaseCustomerOptions,
|
||||
filterOption: filterOption
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8 } },
|
||||
React.createElement(Button, { onClick: function () {
|
||||
var empty = { contractCode: undefined, projectName: undefined, customerName: undefined };
|
||||
setLeaseDraft(empty);
|
||||
setLeaseApplied(empty);
|
||||
} }, '重置'),
|
||||
React.createElement(Button, { type: 'primary', onClick: function () { setLeaseApplied(Object.assign({}, leaseDraft)); } }, '查询')
|
||||
)
|
||||
),
|
||||
React.createElement(Table, {
|
||||
size: 'small',
|
||||
rowKey: 'key',
|
||||
bordered: true,
|
||||
dataSource: leaseFiltered,
|
||||
columns: [
|
||||
{ title: '合同编码', dataIndex: 'contractCode', key: 'contractCode', width: 180, ellipsis: true },
|
||||
{ title: '项目名称', dataIndex: 'projectName', key: 'projectName', width: 160, ellipsis: true },
|
||||
{ title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 200, ellipsis: true },
|
||||
{ title: '交车日期', dataIndex: 'deliveryDate', key: 'deliveryDate', width: 120, render: function (tv) { return fmtDateYMD(tv); } },
|
||||
{ title: '交车人', dataIndex: 'deliveryPerson', key: 'deliveryPerson', width: 100 },
|
||||
{ title: '还车日期', dataIndex: 'returnDate', key: 'returnDate', width: 120, render: function (tv) { return fmtDateYMD(tv); } },
|
||||
{ title: '还车人', dataIndex: 'returnPerson', key: 'returnPerson', width: 100, render: function (tv) { return (tv && String(tv) !== '-') ? tv : '-'; } }
|
||||
],
|
||||
scroll: { x: 1100 },
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: function (t) { return '共 ' + t + ' 条'; }
|
||||
}
|
||||
})
|
||||
)
|
||||
},
|
||||
{ key: 'insurance', label: '保险记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||||
{ key: 'repair', label: '维修记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||||
{ key: 'maintain', label: '保养记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||||
{ key: 'accident', label: '事故记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||||
{
|
||||
key: 'accident',
|
||||
label: '事故记录',
|
||||
children: React.createElement('div', { style: { padding: '0 4px' } },
|
||||
React.createElement(Card, { size: 'small', style: { marginBottom: 16 } },
|
||||
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px 24px', maxWidth: 900, alignItems: 'start' } },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '事故时间'),
|
||||
React.createElement(RangePicker, {
|
||||
style: { width: '100%' },
|
||||
value: accidentDraft.accidentTimeRange,
|
||||
onChange: function (v) { setAccidentDraft(function (p) { return Object.assign({}, p, { accidentTimeRange: v }); }); },
|
||||
placeholder: ['开始日期', '结束日期']
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '客户名称'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请输入或选择客户名称',
|
||||
style: { width: '100%' },
|
||||
value: accidentDraft.customerName,
|
||||
onChange: function (v) { setAccidentDraft(function (p) { return Object.assign({}, p, { customerName: v }); }); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: accidentCustomerOptions,
|
||||
filterOption: filterOption
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8 } },
|
||||
React.createElement(Button, { onClick: function () {
|
||||
var empty = { accidentTimeRange: null, customerName: undefined };
|
||||
setAccidentDraft(empty);
|
||||
setAccidentApplied(empty);
|
||||
} }, '重置'),
|
||||
React.createElement(Button, { type: 'primary', onClick: function () { setAccidentApplied(Object.assign({}, accidentDraft)); } }, '查询')
|
||||
)
|
||||
),
|
||||
React.createElement(Table, {
|
||||
size: 'small',
|
||||
rowKey: 'key',
|
||||
bordered: true,
|
||||
dataSource: accidentFiltered,
|
||||
columns: [
|
||||
{ title: '事故编码', dataIndex: 'accidentCode', key: 'accidentCode', width: 150, ellipsis: true },
|
||||
{ title: '事故时间', dataIndex: 'accidentTime', key: 'accidentTime', width: 110, render: function (tv) { return fmtDateYMD(tv); } },
|
||||
{ title: '事故地点', dataIndex: 'location', key: 'location', width: 220, ellipsis: true },
|
||||
{ title: '事故类型', dataIndex: 'accidentType', key: 'accidentType', width: 100 },
|
||||
{ title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 200, ellipsis: true },
|
||||
{ title: '我方定损金额', dataIndex: 'ourLossAmount', key: 'ourLossAmount', width: 120, render: function (tv) { return cellOrDash(tv); } },
|
||||
{ title: '对方定损金额', dataIndex: 'otherLossAmount', key: 'otherLossAmount', width: 120, render: function (tv) { return cellOrDash(tv); } },
|
||||
{ title: '责任划分', dataIndex: 'liability', key: 'liability', width: 90 },
|
||||
{ title: '事故状态', dataIndex: 'status', key: 'status', width: 90 },
|
||||
{ title: '结案时间', dataIndex: 'closeTime', key: 'closeTime', width: 110, render: function (tv) { return fmtDateYMD(tv); } },
|
||||
{ title: '其他费用', dataIndex: 'otherFee', key: 'otherFee', width: 100, render: function (tv) { return cellOrDash(tv); } },
|
||||
{ title: '备注', dataIndex: 'remark', key: 'remark', width: 160, ellipsis: true, render: function (tv) { return cellOrDash(tv); } }
|
||||
],
|
||||
scroll: { x: 1800 },
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: function (t) { return '共 ' + t + ' 条'; }
|
||||
}
|
||||
})
|
||||
)
|
||||
},
|
||||
{ key: 'fault', label: '故障记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||||
{ key: 'violation', label: '违章记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||||
{ key: 'change', label: '异动记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||||
{ key: 'transfer', label: '调拨记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||||
{ key: 'prep', label: '整备记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||||
{ key: 'inspect', label: '抽检记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') }
|
||||
{
|
||||
key: 'violation',
|
||||
label: '违章记录',
|
||||
children: React.createElement('div', { style: { padding: '0 4px' } },
|
||||
React.createElement(Card, { size: 'small', style: { marginBottom: 16 } },
|
||||
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px 24px', alignItems: 'start' } },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '违法时间'),
|
||||
React.createElement(RangePicker, {
|
||||
style: { width: '100%' },
|
||||
value: violationDraft.violationTimeRange,
|
||||
onChange: function (v) { setViolationDraft(function (p) { return Object.assign({}, p, { violationTimeRange: v }); }); },
|
||||
placeholder: ['开始日期', '结束日期']
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '缴费状态'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择缴费状态',
|
||||
style: { width: '100%' },
|
||||
value: violationDraft.payStatus,
|
||||
onChange: function (v) { setViolationDraft(function (p) { return Object.assign({}, p, { payStatus: v }); }); },
|
||||
allowClear: true,
|
||||
options: violationPayStatusOptions
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '违章客户'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请输入或选择违章客户',
|
||||
style: { width: '100%' },
|
||||
value: violationDraft.violationCustomer,
|
||||
onChange: function (v) { setViolationDraft(function (p) { return Object.assign({}, p, { violationCustomer: v }); }); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: violationCustomerOptions,
|
||||
filterOption: filterOption
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8 } },
|
||||
React.createElement(Button, { onClick: function () {
|
||||
var empty = { violationTimeRange: null, payStatus: undefined, violationCustomer: undefined };
|
||||
setViolationDraft(empty);
|
||||
setViolationApplied(empty);
|
||||
} }, '重置'),
|
||||
React.createElement(Button, { type: 'primary', onClick: function () { setViolationApplied(Object.assign({}, violationDraft)); } }, '查询')
|
||||
)
|
||||
),
|
||||
React.createElement(Table, {
|
||||
size: 'small',
|
||||
rowKey: 'key',
|
||||
bordered: true,
|
||||
dataSource: violationFiltered,
|
||||
columns: [
|
||||
{ title: '违章编码', dataIndex: 'violationCode', key: 'violationCode', width: 150, ellipsis: true },
|
||||
{ title: '违法行为', dataIndex: 'violationBehavior', key: 'violationBehavior', width: 140, ellipsis: true },
|
||||
{ title: '违法时间', dataIndex: 'violationTime', key: 'violationTime', width: 110, render: function (tv) { return fmtDateYMD(tv); } },
|
||||
{ title: '罚款金额', dataIndex: 'fineAmount', key: 'fineAmount', width: 100, render: function (tv) { return cellOrDash(tv); } },
|
||||
{ title: '缴费状态', dataIndex: 'payStatus', key: 'payStatus', width: 90 },
|
||||
{ title: '计分值', dataIndex: 'points', key: 'points', width: 80 },
|
||||
{ title: '是否处理', dataIndex: 'processed', key: 'processed', width: 90 },
|
||||
{ title: '违章客户', dataIndex: 'violationCustomer', key: 'violationCustomer', width: 220, ellipsis: true },
|
||||
{
|
||||
title: '违章照片',
|
||||
key: 'photo',
|
||||
width: 100,
|
||||
render: function (_, r) {
|
||||
if (r.photo) {
|
||||
return React.createElement(Button, { type: 'link', size: 'small', onClick: function () { message.info('预览违章照片（原型）'); } }, '查看');
|
||||
}
|
||||
return '-';
|
||||
}
|
||||
},
|
||||
{ title: '备注', dataIndex: 'remark', key: 'remark', width: 140, ellipsis: true, render: function (tv) { return cellOrDash(tv); } }
|
||||
],
|
||||
scroll: { x: 1500 },
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: function (t) { return '共 ' + t + ' 条'; }
|
||||
}
|
||||
})
|
||||
)
|
||||
},
|
||||
{
|
||||
key: 'change',
|
||||
label: '异动记录',
|
||||
children: React.createElement('div', { style: { padding: '0 4px' } },
|
||||
React.createElement(Card, { size: 'small', style: { marginBottom: 16 } },
|
||||
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px 24px', alignItems: 'start' } },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '异动开始日期'),
|
||||
React.createElement(RangePicker, {
|
||||
style: { width: '100%' },
|
||||
value: moveRecordDraft.moveStartRange,
|
||||
onChange: function (v) { setMoveRecordDraft(function (p) { return Object.assign({}, p, { moveStartRange: v }); }); },
|
||||
placeholder: ['开始日期', '结束日期']
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '异动目的地'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择异动目的地',
|
||||
style: { width: '100%' },
|
||||
value: moveRecordDraft.destination,
|
||||
onChange: function (v) { setMoveRecordDraft(function (p) { return Object.assign({}, p, { destination: v }); }); },
|
||||
allowClear: true,
|
||||
options: moveDestinationOptions
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '异动类型'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择异动类型',
|
||||
style: { width: '100%' },
|
||||
value: moveRecordDraft.moveType,
|
||||
onChange: function (v) { setMoveRecordDraft(function (p) { return Object.assign({}, p, { moveType: v }); }); },
|
||||
allowClear: true,
|
||||
options: moveTypeFilterOptions
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8 } },
|
||||
React.createElement(Button, { onClick: function () {
|
||||
var empty = { moveStartRange: null, destination: undefined, moveType: undefined };
|
||||
setMoveRecordDraft(empty);
|
||||
setMoveRecordApplied(empty);
|
||||
} }, '重置'),
|
||||
React.createElement(Button, { type: 'primary', onClick: function () { setMoveRecordApplied(Object.assign({}, moveRecordDraft)); } }, '查询')
|
||||
)
|
||||
),
|
||||
React.createElement(Table, {
|
||||
size: 'small',
|
||||
rowKey: 'key',
|
||||
bordered: true,
|
||||
dataSource: moveRecordFiltered,
|
||||
columns: [
|
||||
{ title: '异动开始日期', dataIndex: 'moveStartAt', key: 'moveStartAt', width: 160, render: function (tv) { return fmtRearActionTime(tv); } },
|
||||
{ title: '异动预计结束日期', dataIndex: 'moveEndExpectedAt', key: 'moveEndExpectedAt', width: 170, render: function (tv) { return fmtRearActionTime(tv); } },
|
||||
{ title: '审批状态', dataIndex: 'approvalStatus', key: 'approvalStatus', width: 100 },
|
||||
{ title: '异动目的地', dataIndex: 'destination', key: 'destination', width: 100 },
|
||||
{ title: '目的地名称', dataIndex: 'destinationName', key: 'destinationName', width: 180, ellipsis: true },
|
||||
{ title: '异动类型', dataIndex: 'moveType', key: 'moveType', width: 90 },
|
||||
{ title: '预计异动里程（km）', dataIndex: 'expectedMileageKm', key: 'expectedMileageKm', width: 150 },
|
||||
{ title: '异动开始里程（km）', dataIndex: 'startMileageKm', key: 'startMileageKm', width: 150 },
|
||||
{ title: '异动开始电量（kWh）', dataIndex: 'startElectricKwh', key: 'startElectricKwh', width: 150 },
|
||||
{
|
||||
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 (tv) { return fmtRearActionTime(tv); } }
|
||||
],
|
||||
scroll: { x: 2000 },
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: function (t) { return '共 ' + t + ' 条'; }
|
||||
}
|
||||
})
|
||||
)
|
||||
},
|
||||
{
|
||||
key: 'transfer',
|
||||
label: '调拨记录',
|
||||
children: React.createElement('div', { style: { padding: '0 4px' } },
|
||||
React.createElement(Card, { size: 'small', style: { marginBottom: 16 } },
|
||||
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px 24px', alignItems: 'start' } },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '调拨日期'),
|
||||
React.createElement(RangePicker, {
|
||||
style: { width: '100%' },
|
||||
value: transferDraft.transferDateRange,
|
||||
onChange: function (v) { setTransferDraft(function (p) { return Object.assign({}, p, { transferDateRange: v }); }); },
|
||||
placeholder: ['开始日期', '结束日期']
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '调拨人'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请输入或选择调拨人',
|
||||
style: { width: '100%' },
|
||||
value: transferDraft.transferPerson,
|
||||
onChange: function (v) { setTransferDraft(function (p) { return Object.assign({}, p, { transferPerson: v }); }); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: transferPersonOptions,
|
||||
filterOption: filterOption
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '接收人'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请输入或选择接收人',
|
||||
style: { width: '100%' },
|
||||
value: transferDraft.receivePerson,
|
||||
onChange: function (v) { setTransferDraft(function (p) { return Object.assign({}, p, { receivePerson: v }); }); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: transferReceivePersonOptions,
|
||||
filterOption: filterOption
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8 } },
|
||||
React.createElement(Button, { onClick: function () {
|
||||
var empty = { transferDateRange: null, transferPerson: undefined, receivePerson: undefined };
|
||||
setTransferDraft(empty);
|
||||
setTransferApplied(empty);
|
||||
} }, '重置'),
|
||||
React.createElement(Button, { type: 'primary', onClick: function () { setTransferApplied(Object.assign({}, transferDraft)); } }, '查询')
|
||||
)
|
||||
),
|
||||
React.createElement(Table, {
|
||||
size: 'small',
|
||||
rowKey: 'key',
|
||||
bordered: true,
|
||||
dataSource: transferFiltered,
|
||||
columns: [
|
||||
{ title: '调拨日期', dataIndex: 'transferDate', key: 'transferDate', width: 160, render: function (tv) { return fmtRearActionTime(tv); } },
|
||||
{ title: '出发区域', dataIndex: 'departRegionText', key: 'departRegionText', width: 130 },
|
||||
{ title: '调拨人', dataIndex: 'transferPerson', key: 'transferPerson', width: 90 },
|
||||
{ title: '接收区域', dataIndex: 'receiveRegionText', key: 'receiveRegionText', width: 130 },
|
||||
{ title: '接收人', dataIndex: 'receivePerson', key: 'receivePerson', width: 90 },
|
||||
{ title: '审批状态', dataIndex: 'approvalStatus', key: 'approvalStatus', width: 100 },
|
||||
{ title: '调拨方式', dataIndex: 'method', key: 'method', width: 110 },
|
||||
{ title: '调拨原因', dataIndex: 'reason', key: 'reason', width: 160, ellipsis: true },
|
||||
{ title: '车辆类型', dataIndex: 'vehicleType', key: 'vehicleType', width: 100 },
|
||||
{ title: '品牌', dataIndex: 'brand', key: 'brand', width: 90 },
|
||||
{ title: '型号', dataIndex: 'model', key: 'model', width: 100, ellipsis: true },
|
||||
{ title: '运输方名称', dataIndex: 'carrierName', key: 'carrierName', width: 140, ellipsis: true, render: function (tv) { return (tv && String(tv) !== '-') ? tv : '—'; } },
|
||||
{ title: '出发里程（km）', dataIndex: 'departMileageKm', key: 'departMileageKm', width: 130 },
|
||||
{
|
||||
title: '出发氢量',
|
||||
key: 'departHydrogen',
|
||||
width: 110,
|
||||
render: function (_, r) {
|
||||
var u = r.h2Unit || '';
|
||||
return (r.departHydrogen != null && r.departHydrogen !== '') ? String(r.departHydrogen) + (u ? u : '') : '—';
|
||||
}
|
||||
},
|
||||
{ title: '出发电量（kWh）', dataIndex: 'departElectricKwh', key: 'departElectricKwh', width: 130 },
|
||||
{ title: '出发停车场', dataIndex: 'departParking', key: 'departParking', width: 150, ellipsis: true },
|
||||
{ title: '创建日期', dataIndex: 'createDate', key: 'createDate', width: 160, render: function (tv) { return fmtRearActionTime(tv); } }
|
||||
],
|
||||
scroll: { x: 2400 },
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: function (t) { return '共 ' + t + ' 条'; }
|
||||
}
|
||||
})
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
var breadcrumbNodes = [
|
||||
|
||||
25
web端/需求说明/运维管理-车务管理/异动-新增
Normal file
25
web端/需求说明/运维管理-车务管理/异动-新增
Normal file
@@ -0,0 +1,25 @@
|
||||
一个「数字化资产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.底部为提交审核、保存、取消；
|
||||
28
web端/需求说明/运维管理-车务管理/异动管理
Normal file
28
web端/需求说明/运维管理-车务管理/异动管理
Normal file
@@ -0,0 +1,28 @@
|
||||
一个「数字化资产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.列表右下方为分页功能，支持单页显示条数设置；
|
||||
64
web端/需求说明/运维管理-车务管理/调拨管理
Normal file
64
web端/需求说明/运维管理-车务管理/调拨管理
Normal file
@@ -0,0 +1,64 @@
|
||||
一个「数字化资产ONEOS运管平台」中的「调拨管理」模块
|
||||
#面包屑：运维管理-车辆业务-调拨管理
|
||||
1.筛选：
|
||||
1.1.调拨日期：日期选择器，支持单输入框双日历进行开始-结束时间搜索；
|
||||
1.2.调拨人：选择器，支持输入框输入内容模糊搜索下拉选择对应调拨人，调拨人来自用户表；
|
||||
1.3.接收日期：日期选择器，支持单输入框双日历进行开始-结束时间搜索；
|
||||
1.4.接收人：选择器，支持输入框输入内容模糊搜索下拉选择对应接收人，接收人来自用户表；
|
||||
1.5.车牌号：选择器，支持输入框输入内容模糊搜索下拉选择车牌号；
|
||||
1.6.出发区域：级联地区选择器，省-市2级；
|
||||
1.7.调拨区域：级联地区选择器，省-市2级；
|
||||
1.8.调拨方式：选择器，选项为：第三方运输、司机驾驶；
|
||||
1.9.审批状态：选择器，选项为：待提交、审批中、审批完成、审批驳回、撤回；
|
||||
|
||||
2.列表：分为进行中、历史记录2个tab；tab最右侧为新增、导出；
|
||||
2.1.进行中：
|
||||
2.1.1.调拨日期：显示调拨日期，格式为：YYYY-MM-DD HH:MM；
|
||||
2.1.2.出发区域：显示出发省-市，根据车辆出发时停车场区域获取；
|
||||
2.1.3.调拨人：显示调拨人姓名；
|
||||
2.1.4.接收区域：显示接受省-市；
|
||||
2.1.5.接收人：显示接收人姓名；
|
||||
2.1.6.审批状态：待提交、审批中、审批完成、驳回、撤回；
|
||||
2.1.7.调拨方式：显示调拨方式，分为第三方运输、司机驾驶；
|
||||
2.1.8.调拨原因：显示调拨原因；
|
||||
2.1.9.车牌号：显示调拨车牌号；
|
||||
2.1.10.车辆类型：显示调拨车辆对应类型；
|
||||
2.1.11.品牌：显示调拨车辆对应品牌；
|
||||
2.1.12.型号：显示调拨车辆对应型号；
|
||||
2.1.13.运输方名称：显示调拨车辆对应运输方信息；
|
||||
2.1.14.出发里程（km）：显示调拨车辆对应出发里程；
|
||||
2.1.15.出发氢量：显示调拨车辆对应出发氢量，带单位（单位根据该型号型号参数下仪表盘单位）
|
||||
2.1.16.出发电量（kWh）：显示调拨车辆对应出发电量；
|
||||
2.1.17.出发停车场：显示调拨车辆出发停车场名称；
|
||||
2.1.18.创建日期：显示调拨申请创建日期，格式为：YYYY-MM-DD HH:MM；
|
||||
2.1.19.操作：查看、编辑、接收记录、撤回；
|
||||
2.1.19.1.查看：点击跳转调拨管理-查看页；
|
||||
2.1.19.2.编辑：点击跳转调拨管理-编辑页，只有待提交、审批驳回、撤回状态才显示编辑；
|
||||
2.1.19.3.接收记录：点击跳转调拨管理-接收记录页，只有审批状态为审批完成时才显示接收记录；
|
||||
2.1.19.4.撤回：点击进行二次确认，确认后审批状态修改为撤回，只有审批状态为审批中时才显示撤回；
|
||||
|
||||
2.2.历史记录：
|
||||
2.2.1.调拨日期：显示调拨日期，格式为：YYYY-MM-DD HH:MM；
|
||||
2.2.2.出发区域：显示出发省-市，根据车辆出发时停车场区域获取；
|
||||
2.2.3.调拨人：显示调拨人姓名；
|
||||
2.2.4.接收日期：显示接收日期，格式为：YYYY-MM-DD HH:MM；
|
||||
2.2.5.接收区域：显示接受省-市；
|
||||
2.2.6.接收人：显示接收人姓名；
|
||||
2.2.7.审批状态：审核完成；
|
||||
2.2.8.调拨方式：显示调拨方式，分为第三方运输、司机驾驶；
|
||||
2.2.9.调拨原因：显示调拨原因；
|
||||
2.2.10.车牌号：显示调拨车牌号；
|
||||
2.2.11.车辆类型：显示调拨车辆对应类型；
|
||||
2.2.12.品牌：显示调拨车辆对应品牌；
|
||||
2.2.13.型号：显示调拨车辆对应型号；
|
||||
2.2.14.运输方名称：显示调拨车辆对应运输方信息；
|
||||
2.2.15.出发里程（km）：显示调拨车辆对应出发里程；
|
||||
2.2.16.接收里程（km）：显示调拨车辆对应接收里程；
|
||||
2.2.17.出发氢量：显示调拨车辆对应出发氢量，带单位（单位根据该型号型号参数下仪表盘单位）；
|
||||
2.2.18.接收氢量：显示调拨车辆对应接收氢量，带单位（单位根据该型号型号参数下仪表盘单位）；
|
||||
2.2.19.出发电量（kWh）：显示调拨车辆对应出发电量；
|
||||
2.2.20.接收电量（kWh）：显示调拨车辆对应接收电量；
|
||||
2.2.21.出发停车场：显示调拨车辆出发停车场名称；
|
||||
2.2.22.创建日期：显示调拨申请创建日期，格式为：YYYY-MM-DD HH:MM；
|
||||
2.2.23.操作：查看；
|
||||
2.1.17.1.查看：点击跳转调拨管理-查看页；
|
||||
28
web端/需求说明/运维管理-车务管理/调拨管理-接收记录
Normal file
28
web端/需求说明/运维管理-车务管理/调拨管理-接收记录
Normal file
@@ -0,0 +1,28 @@
|
||||
一个「数字化资产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.操作：无；
|
||||
26
web端/需求说明/运维管理-车务管理/调拨管理-新增
Normal file
26
web端/需求说明/运维管理-车务管理/调拨管理-新增
Normal file
@@ -0,0 +1,26 @@
|
||||
一个「数字化资产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.底部为新增一行，铺满整行；
|
||||
需要至少提交一辆车才能完成调拨，否则提交审核时提示：请选择调拨车辆；
|
||||
51
web端/需求说明/运维管理-车务管理/还车管理
Normal file
51
web端/需求说明/运维管理-车务管理/还车管理
Normal file
@@ -0,0 +1,51 @@
|
||||
一个「数字化资产ONEOS运管平台」中的「还车管理」模块
|
||||
1.面包屑：
|
||||
1.1.运维管理-车辆业务-还车管理
|
||||
|
||||
2.筛选：
|
||||
2.1.合同编码：选择器，默认为所有合同；提示信息为：请输入或选择合同编码，支持从输入框输入内容进行模糊搜索，下拉显示结果；
|
||||
2.2.项目名称：选择器，默认为所有项目；提示信息为：请输入或选择项目名称，支持从输入框输入内容进行模糊搜索，下拉显示结果；
|
||||
2.3.客户名称：选择器，默认为所有客户；提示信息为：请输入或选择客户名称，支持从输入框输入内容进行模糊搜索，下拉显示结果；
|
||||
2.4.车牌号：选择器，支持输入框输入车牌号模糊搜索下拉框匹配结果；
|
||||
2.5.车辆类型：选择器，显示所有车辆类型，支持多选；
|
||||
2.6.品牌：选择器，显示所有品牌，支持多选；
|
||||
2.7.型号：选择器，支持输入框输入型号模糊搜索下拉框匹配结果；
|
||||
2.7.查询：点击查询，根据单个或多个筛选条件（且）联动表格进行查询；
|
||||
2.8.重置：点击清空查询条件至默认；
|
||||
|
||||
#列表：分为2个tab：待处理、历史记录；，右侧为导出；
|
||||
3.待处理：
|
||||
3.1.交车时间：显示该车辆交车时间，格式为：YYYY-MM-DD HH:MM；
|
||||
3.2.交车人：显示该车辆交车人姓名；
|
||||
3.3.车牌号：显示该车辆车牌号；
|
||||
3.4.车辆类型：显示该车辆车辆类型；
|
||||
3.5.品牌：显示该车辆品牌；
|
||||
3.6.型号：显示该车辆型号；
|
||||
3.7.车辆识别代码：显示该车辆对应车辆识别代码；
|
||||
3.8.合同编码：显示该车辆对应合同编码；
|
||||
3.9.客户名称：显示该车辆对应合同中客户名称；
|
||||
3.10.项目名称：显示该车辆对应合同中项目名称；
|
||||
3.11.业务部门：显示该车辆对应合同中业务部门；
|
||||
3.12.业务负责人：显示该车辆对应合同中业务负责人姓名；
|
||||
3.13.操作：车辆到达、还车；
|
||||
3.13.1.车辆到达：点击车辆到达后进行二次确认，提示为：请确认车辆是否到达，点击确认后该按钮变更为还车；
|
||||
3.13.2.还车：点击跳转还车管理-还车页；
|
||||
|
||||
4.历史记录：
|
||||
4.1.交车时间：显示该车辆交车时间，格式为：YYYY-MM-DD HH:MM；
|
||||
4.2.交车人：显示该车辆交车人姓名；
|
||||
4.3.还车时间：显示该车辆还车时间，格式为：YYYY-MM-DD HH:MM；
|
||||
4.4.还车人：显示该车辆交车人姓名；
|
||||
4.5.车牌号：显示该车辆车牌号；
|
||||
4.6.车辆类型：显示该车辆车辆类型；
|
||||
4.7.品牌：显示该车辆品牌；
|
||||
4.8.型号：显示该车辆型号；
|
||||
4.9.车辆识别代码：显示该车辆对应车辆识别代码；
|
||||
4.10.合同编码：显示该车辆对应合同编码；
|
||||
4.11.客户名称：显示该车辆对应合同中客户名称；
|
||||
4.12.项目名称：显示该车辆对应合同中项目名称；
|
||||
4.13.业务部门：显示该车辆对应合同中业务部门；
|
||||
4.14.业务负责人：显示该车辆对应合同中业务负责人姓名；
|
||||
4.15.操作：查看；
|
||||
4.15.1.查看：点击跳转还车管理-查看；
|
||||
5.右下方为分页符，支持选择单页显示数据条数；
|
||||
46
web端/需求说明/运维管理-车务管理/还车管理-查看
Normal file
46
web端/需求说明/运维管理-车务管理/还车管理-查看
Normal file
@@ -0,0 +1,46 @@
|
||||
一个「数字化资产ONEOS运管平台」中的「还车管理」「还车」模块
|
||||
1.面包屑：
|
||||
1.1.运维管理-车辆业务-还车管理-还车
|
||||
|
||||
2.合同信息：
|
||||
2.1.合同编码：显示该车辆对应合同编码；
|
||||
2.2.项目名称：显示该车辆对应项目名称；
|
||||
2.3.客户名称：显示该车辆对应客户名称；
|
||||
2.4.业务部门：显示该车辆合同对应业务部门；
|
||||
2.5.业务负责人：显示该车辆合同对应业务负责人；
|
||||
|
||||
3.车辆信息：
|
||||
3.1.车牌号：显示该车辆车牌号；
|
||||
3.2.车辆型号：显示该车辆型号；
|
||||
3.3.品牌：显示该车辆品牌；
|
||||
3.4.型号：显示该车辆型号；
|
||||
3.5.交车时间：显示该车辆交车时间，格式为：YYYY-MM-DD HH:MM；
|
||||
3.6.交车地点：显示该车辆交车地点，格式为：省-市；
|
||||
|
||||
4.还车明细：
|
||||
4.1.还车人：必填项，输入框，默认显示交车时司机姓名（从OCR自动识别身份证）；
|
||||
4.2.还车人电话：必填项，输入框，默认显示交车时司机手机号（从司机扫码培训时验证的手机号）；
|
||||
4.3.还车人身份证：必填项，输入框，默认显示还车时司机身份证号（从OCR自动识别身份证）；
|
||||
4.4.还车地点：必填项，选择器，选项为停车场、维修站，默认提示：请选择还车地点；
|
||||
4.5.停车场/维修站：必填项，选择器，选择停车场或维修站；当还车地点为停车场时，字段名称为停车场，当还车地点为维修站时，字段名称为维修站；
|
||||
4.6.到达时间：必填项，日期选择器，输入框单日历，支持选择年月日，精确到分钟，格式为：YYYY-MM-DD HH:MM；
|
||||
4.7.备胎照片：左侧为交车时备胎照片（仅查看，支持点击预览），右侧为图片上传按钮，支持单张照片上传，上传后按钮变为图片，支持点击图片预览和右上角删除，图片上传后提示识别中，然后弹出卡片，左侧为图片，右侧为胎纹深度：输入框(自动反写胎纹深度)，后缀为mm；
|
||||
4.8.交车时备胎胎纹深度：输入框（禁用），显示交车时胎纹深度，后缀为mm；
|
||||
4.9.还车时备胎胎纹深度：输入框，默认提示为请输入备胎胎纹深度，如上传备胎照片并确认后则自动反写OCR识别结果；
|
||||
4.10.交车里程：输入框（禁用），显示交车时交车里程，后缀为km；
|
||||
4.11.还车里程：必填项，输入框，支持2位小数输入，后缀为km；
|
||||
4.12.交车电量：输入框（禁用），显示交车时交车电量，后缀为kWh；
|
||||
4.13.还车电量：必填项，输入框，支持2位小数输入，后缀为kWh；
|
||||
4.14.交车氢量：输入框（禁用），显示交车时交车氢量，后缀为MPa或%（根据车辆型号参数列表中仪表盘显示单位显示）；
|
||||
4.15.还车氢量：必填项，输入框，支持2位小数输入，后缀为MPa或%（根据车辆型号参数列表中仪表盘显示单位显示）；
|
||||
4.16.接车服务费：输入框，支持2位小数输入，后缀为元；
|
||||
4.17.还车检查单：点击弹出抽屉，抽屉显示还车检查项（默认为交车时状态），下方为提交和返回按钮，参照交车管理-交车单-编辑中交车检查单；
|
||||
|
||||
5.还车照片：参照交车管理-交车单-编辑中交车照片，只是所有上传按钮左侧增加交车照片显示（仅查看，支持点击预览）；
|
||||
|
||||
所有交车时照片下方增加文字提示：交车时照片
|
||||
|
||||
4.底部为提交、取消按钮；
|
||||
4.1.提交：点击进行二次确认，点击确认完成该车辆还车，并将该记录加入历史记录；
|
||||
4.2.保存：点击暂存还车单（不做校验）；
|
||||
4.2.取消：点击返回还车管理页；
|
||||
Reference in New Issue
Block a user