wangmian/ONE-OS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c75d1656e3931073fc03dd6542de8e2ed00faa19
ONE-OS/web端/运维管理/车辆业务/调拨管理.jsx
王冕 c75d1656e3 web端: 车辆/运维模块更新 
- 车辆管理、车辆管理-查看：详情 Tab（后装设备/租赁/事故/违章/异动/调拨/证照管理等）
- 车辆业务：异动管理列表与查看页、调拨相关页面与需求说明
- 需求说明文档补充

Made-with: Cursor
2026-03-19 20:19:48 +08:00

1014 lines
40 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
// 【重要】必须使用 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 Tabs = antd.Tabs;
var Select = antd.Select;
var DatePicker = antd.DatePicker;
var Cascader = antd.Cascader;
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;
}
}
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 = '.transfer-list-table .ant-table-thead th,.transfer-list-table .ant-table-tbody td{white-space:nowrap;}';
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 plateOptions = useMemo(function () {
return [
{ value: '粤A12345', label: '粤A12345' },
{ value: '粤B11111', label: '粤B11111' },
{ value: '浙A11111', label: '浙A11111' },
{ value: '浙B22222', label: '浙B22222' },
{ value: '沪A30003', label: '沪A30003' }
];
}, []);
var methodOptions = useMemo(function () {
return [
{ value: '第三方运输', label: '第三方运输' },
{ value: '司机驾驶', label: '司机驾驶' }
];
}, []);
var approvalOptions = useMemo(function () {
return [
{ value: '待提交', label: '待提交' },
{ value: '审批中', label: '审批中' },
{ value: '审批完成', label: '审批完成' },
{ value: '审批驳回', label: '审批驳回' },
{ value: '撤回', label: '撤回' }
];
}, []);
var filterExpandedState = useState(false);
var filterExpanded = filterExpandedState[0];
var setFilterExpanded = filterExpandedState[1];
var draftState = useState({
transferDateRange: null,
transferPerson: undefined,
receiveDateRange: null,
receivePerson: undefined,
plateNo: undefined,
departRegion: undefined,
transferRegion: undefined,
method: undefined,
approvalStatus: undefined
});
var draft = draftState[0];
var setDraft = draftState[1];
var appliedState = useState({
transferDateRange: null,
transferPerson: undefined,
receiveDateRange: null,
receivePerson: undefined,
plateNo: undefined,
departRegion: undefined,
transferRegion: undefined,
method: undefined,
approvalStatus: undefined
});
var applied = appliedState[0];
var setApplied = appliedState[1];
var tabState = useState('in_progress');
var tab = tabState[0];
var setTab = tabState[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.接收人：选择器，支持输入框输入内容模糊搜索下拉选择对应接收人，接收人来自用户表；',
'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.查看：点击跳转调拨管理-查看页；'
].join('\n');
var listInProgressState = useState(function () {
return [
{
id: 'tp1',
transferDate: '2026-02-20 09:30',
departRegionText: '广东省-广州市',
transferPerson: '张明',
receiveRegionText: '浙江省-嘉兴市',
receivePerson: '王芳',
approvalStatus: '待提交',
method: '第三方运输',
reason: '场站资源调整',
plateNo: '粤A12345',
vehicleType: '厢式货车',
brand: '东风',
model: 'DFH1180',
carrierName: '顺丰同城运输',
departMileageKm: '15230.12',
departHydrogen: '28.30',
h2Unit: 'MPa',
departElectricKwh: '68.40',
departParking: '天河智慧停车场',
createDate: '2026-02-20 08:10'
},
{
id: 'tp2',
transferDate: '2026-02-22 14:10',
departRegionText: '浙江省-杭州市',
transferPerson: '李华',
receiveRegionText: '上海市-上海市',
receivePerson: '赵强',
approvalStatus: '审批完成',
method: '司机驾驶',
reason: '项目调度需要',
plateNo: '浙A11111',
vehicleType: 'SUV',
brand: '小鹏',
model: 'P7',
carrierName: '-',
departMileageKm: '12010.00',
departHydrogen: '60.00',
h2Unit: '%',
departElectricKwh: '55.20',
departParking: '西湖景区停车场',
createDate: '2026-02-22 12:40'
},
{
id: 'tp3',
transferDate: '2026-02-24 11:05',
departRegionText: '广东省-深圳市',
transferPerson: '王芳',
receiveRegionText: '浙江省-宁波市',
receivePerson: '陈静',
approvalStatus: '审批完成',
method: '第三方运输',
reason: '维修站资源调整',
plateNo: '粤B11111',
vehicleType: '轿车',
brand: '比亚迪',
model: '汉',
carrierName: '德邦物流',
departMileageKm: '8020.50',
departHydrogen: '55.00',
h2Unit: '%',
departElectricKwh: '62.10',
departParking: '南山科技园停车场',
createDate: '2026-02-24 10:20'
},
{
id: 'tp4',
transferDate: '2026-02-25 16:40',
departRegionText: '浙江省-嘉兴市',
transferPerson: '赵强',
receiveRegionText: '上海市-上海市',
receivePerson: '李华',
approvalStatus: '待提交',
method: '司机驾驶',
reason: '项目调度需要',
plateNo: '浙B22222',
vehicleType: '轿车',
brand: '蔚来',
model: 'ET5',
carrierName: '-',
departMileageKm: '15010.00',
departHydrogen: '22.10',
h2Unit: 'MPa',
departElectricKwh: '58.00',
departParking: '宁波江北停车场',
createDate: '2026-02-25 15:55'
},
{
id: 'tp5',
transferDate: '2026-02-26 09:15',
departRegionText: '上海市-上海市',
transferPerson: '陈静',
receiveRegionText: '广东省-广州市',
receivePerson: '张明',
approvalStatus: '审批驳回',
method: '第三方运输',
reason: '车辆调拨申请驳回样例',
plateNo: '沪A30003',
vehicleType: '厢式货车',
brand: '福田',
model: 'BJ1180',
carrierName: '顺丰同城运输',
departMileageKm: '9800.00',
departHydrogen: '26.00',
h2Unit: 'MPa',
departElectricKwh: '69.00',
departParking: '张江园区停车场',
createDate: '2026-02-26 08:30'
},
{
id: 'tp6',
transferDate: '2026-02-27 13:30',
departRegionText: '浙江省-杭州市',
transferPerson: '张明',
receiveRegionText: '浙江省-嘉兴市',
receivePerson: '王芳',
approvalStatus: '撤回',
method: '司机驾驶',
reason: '计划变更，撤回申请',
plateNo: '浙A11111',
vehicleType: 'SUV',
brand: '小鹏',
model: 'P7',
carrierName: '-',
departMileageKm: '12100.20',
departHydrogen: '58.00',
h2Unit: '%',
departElectricKwh: '54.80',
departParking: '西湖景区停车场',
createDate: '2026-02-27 12:45'
},
{
id: 'tp7',
transferDate: '2026-02-28 08:50',
departRegionText: '广东省-东莞市',
transferPerson: '李华',
receiveRegionText: '广东省-深圳市',
receivePerson: '赵强',
approvalStatus: '审批中',
method: '第三方运输',
reason: '跨区域调拨',
plateNo: '粤A12345',
vehicleType: '厢式货车',
brand: '东风',
model: 'DFH1180',
carrierName: '中外运',
departMileageKm: '15310.00',
departHydrogen: '27.50',
h2Unit: 'MPa',
departElectricKwh: '67.20',
departParking: '松山湖停车场',
createDate: '2026-02-28 08:05'
},
{
id: 'tp8',
transferDate: '2026-03-01 10:10',
departRegionText: '浙江省-宁波市',
transferPerson: '王芳',
receiveRegionText: '上海市-上海市',
receivePerson: '陈静',
approvalStatus: '待提交',
method: '司机驾驶',
reason: '项目新增点位支持',
plateNo: '浙B22222',
vehicleType: '轿车',
brand: '蔚来',
model: 'ET5',
carrierName: '-',
departMileageKm: '15120.00',
departHydrogen: '21.80',
h2Unit: 'MPa',
departElectricKwh: '57.50',
departParking: '宁波江北停车场',
createDate: '2026-03-01 09:30'
},
{
id: 'tp9',
transferDate: '2026-03-02 15:25',
departRegionText: '上海市-上海市',
transferPerson: '赵强',
receiveRegionText: '浙江省-杭州市',
receivePerson: '李华',
approvalStatus: '审批中',
method: '第三方运输',
reason: '场站容量调整',
plateNo: '沪A30003',
vehicleType: '厢式货车',
brand: '福田',
model: 'BJ1180',
carrierName: '德邦物流',
departMileageKm: '9850.00',
departHydrogen: '24.20',
h2Unit: 'MPa',
departElectricKwh: '68.30',
departParking: '张江园区停车场',
createDate: '2026-03-02 14:40'
},
{
id: 'tp10',
transferDate: '2026-03-03 09:05',
departRegionText: '浙江省-嘉兴市',
transferPerson: '陈静',
receiveRegionText: '广东省-广州市',
receivePerson: '张明',
approvalStatus: '待提交',
method: '第三方运输',
reason: '车辆调拨支持新项目',
plateNo: '浙A11111',
vehicleType: 'SUV',
brand: '小鹏',
model: 'P7',
carrierName: '顺丰同城运输',
departMileageKm: '12220.00',
departHydrogen: '56.00',
h2Unit: '%',
departElectricKwh: '53.90',
departParking: '嘉兴南湖停车场',
createDate: '2026-03-03 08:20'
}
];
});
var listInProgress = listInProgressState[0];
var setListInProgress = listInProgressState[1];
var listHistory = useMemo(function () {
return [
{
id: 'th1',
transferDate: '2026-01-10 10:00',
departRegionText: '上海市-上海市',
transferPerson: '张明',
receiveDate: '2026-01-12 18:20',
receiveRegionText: '广东省-深圳市',
receivePerson: '陈静',
approvalStatus: '审批完成',
method: '第三方运输',
reason: '场站资源调整',
plateNo: '沪A30003',
vehicleType: '厢式货车',
brand: '福田',
model: 'BJ1180',
carrierName: '德邦物流',
departMileageKm: '9800.00',
receiveMileageKm: '10120.00',
departHydrogen: '25.50',
receiveHydrogen: '22.10',
h2Unit: 'MPa',
departElectricKwh: '70.00',
receiveElectricKwh: '62.30',
departParking: '张江园区停车场',
createDate: '2026-01-09 16:45'
},
{
id: 'th2',
transferDate: '2026-01-15 09:30',
departRegionText: '广东省-广州市',
transferPerson: '王芳',
receiveDate: '2026-01-17 14:10',
receiveRegionText: '浙江省-杭州市',
receivePerson: '赵强',
approvalStatus: '审批完成',
method: '司机驾驶',
reason: '项目调度需要',
plateNo: '粤A12345',
vehicleType: '厢式货车',
brand: '东风',
model: 'DFH1180',
carrierName: '-',
departMileageKm: '14500.00',
receiveMileageKm: '14920.00',
departHydrogen: '30.00',
receiveHydrogen: '27.10',
h2Unit: 'MPa',
departElectricKwh: '66.00',
receiveElectricKwh: '59.20',
departParking: '天河智慧停车场',
createDate: '2026-01-14 18:00'
},
{
id: 'th3',
transferDate: '2026-01-20 16:05',
departRegionText: '浙江省-宁波市',
transferPerson: '李华',
receiveDate: '2026-01-22 10:30',
receiveRegionText: '广东省-深圳市',
receivePerson: '陈静',
approvalStatus: '审批完成',
method: '第三方运输',
reason: '场站资源调整',
plateNo: '浙B22222',
vehicleType: '轿车',
brand: '蔚来',
model: 'ET5',
carrierName: '中外运',
departMileageKm: '15080.00',
receiveMileageKm: '15410.00',
departHydrogen: '24.00',
receiveHydrogen: '21.50',
h2Unit: 'MPa',
departElectricKwh: '58.60',
receiveElectricKwh: '52.10',
departParking: '宁波江北停车场',
createDate: '2026-01-20 15:15'
},
{
id: 'th4',
transferDate: '2026-01-25 11:20',
departRegionText: '上海市-上海市',
transferPerson: '张明',
receiveDate: '2026-01-27 19:45',
receiveRegionText: '广东省-东莞市',
receivePerson: '王芳',
approvalStatus: '审批完成',
method: '第三方运输',
reason: '跨区域调拨',
plateNo: '沪A30003',
vehicleType: '厢式货车',
brand: '福田',
model: 'BJ1180',
carrierName: '德邦物流',
departMileageKm: '9900.00',
receiveMileageKm: '10320.00',
departHydrogen: '26.80',
receiveHydrogen: '23.60',
h2Unit: 'MPa',
departElectricKwh: '71.20',
receiveElectricKwh: '64.00',
departParking: '张江园区停车场',
createDate: '2026-01-25 10:40'
},
{
id: 'th5',
transferDate: '2026-01-28 08:50',
departRegionText: '广东省-深圳市',
transferPerson: '陈静',
receiveDate: '2026-01-30 16:10',
receiveRegionText: '浙江省-嘉兴市',
receivePerson: '李华',
approvalStatus: '审批完成',
method: '司机驾驶',
reason: '项目新增点位支持',
plateNo: '粤B11111',
vehicleType: '轿车',
brand: '比亚迪',
model: '汉',
carrierName: '-',
departMileageKm: '8100.00',
receiveMileageKm: '8460.00',
departHydrogen: '58.00',
receiveHydrogen: '52.00',
h2Unit: '%',
departElectricKwh: '61.00',
receiveElectricKwh: '55.00',
departParking: '南山科技园停车场',
createDate: '2026-01-28 08:05'
},
{
id: 'th6',
transferDate: '2026-02-02 14:30',
departRegionText: '浙江省-杭州市',
transferPerson: '赵强',
receiveDate: '2026-02-04 09:20',
receiveRegionText: '上海市-上海市',
receivePerson: '张明',
approvalStatus: '审批完成',
method: '第三方运输',
reason: '场站容量调整',
plateNo: '浙A11111',
vehicleType: 'SUV',
brand: '小鹏',
model: 'P7',
carrierName: '顺丰同城运输',
departMileageKm: '11880.00',
receiveMileageKm: '12110.00',
departHydrogen: '62.00',
receiveHydrogen: '58.00',
h2Unit: '%',
departElectricKwh: '56.00',
receiveElectricKwh: '52.30',
departParking: '西湖景区停车场',
createDate: '2026-02-02 13:45'
},
{
id: 'th7',
transferDate: '2026-02-05 10:10',
departRegionText: '广东省-东莞市',
transferPerson: '李华',
receiveDate: '2026-02-07 18:30',
receiveRegionText: '广东省-深圳市',
receivePerson: '陈静',
approvalStatus: '审批完成',
method: '司机驾驶',
reason: '场站资源调整',
plateNo: '粤A12345',
vehicleType: '厢式货车',
brand: '东风',
model: 'DFH1180',
carrierName: '-',
departMileageKm: '14850.00',
receiveMileageKm: '15120.00',
departHydrogen: '29.00',
receiveHydrogen: '26.50',
h2Unit: 'MPa',
departElectricKwh: '65.00',
receiveElectricKwh: '60.00',
departParking: '松山湖停车场',
createDate: '2026-02-05 09:20'
},
{
id: 'th8',
transferDate: '2026-02-08 15:40',
departRegionText: '上海市-上海市',
transferPerson: '张明',
receiveDate: '2026-02-10 11:15',
receiveRegionText: '浙江省-宁波市',
receivePerson: '王芳',
approvalStatus: '审批完成',
method: '第三方运输',
reason: '项目调度需要',
plateNo: '沪A30003',
vehicleType: '厢式货车',
brand: '福田',
model: 'BJ1180',
carrierName: '德邦物流',
departMileageKm: '10050.00',
receiveMileageKm: '10460.00',
departHydrogen: '25.20',
receiveHydrogen: '22.80',
h2Unit: 'MPa',
departElectricKwh: '72.00',
receiveElectricKwh: '66.00',
departParking: '张江园区停车场',
createDate: '2026-02-08 14:50'
},
{
id: 'th9',
transferDate: '2026-02-12 09:00',
departRegionText: '浙江省-嘉兴市',
transferPerson: '陈静',
receiveDate: '2026-02-14 17:20',
receiveRegionText: '广东省-广州市',
receivePerson: '赵强',
approvalStatus: '审批完成',
method: '第三方运输',
reason: '车辆调拨支持新项目',
plateNo: '浙A11111',
vehicleType: 'SUV',
brand: '小鹏',
model: 'P7',
carrierName: '顺丰同城运输',
departMileageKm: '11980.00',
receiveMileageKm: '12420.00',
departHydrogen: '60.00',
receiveHydrogen: '55.00',
h2Unit: '%',
departElectricKwh: '55.00',
receiveElectricKwh: '49.80',
departParking: '嘉兴南湖停车场',
createDate: '2026-02-12 08:15'
},
{
id: 'th10',
transferDate: '2026-02-16 13:10',
departRegionText: '广东省-深圳市',
transferPerson: '王芳',
receiveDate: '2026-02-18 09:40',
receiveRegionText: '上海市-上海市',
receivePerson: '李华',
approvalStatus: '审批完成',
method: '司机驾驶',
reason: '项目调度需要',
plateNo: '粤B11111',
vehicleType: '轿车',
brand: '比亚迪',
model: '汉',
carrierName: '-',
departMileageKm: '8200.00',
receiveMileageKm: '8560.00',
departHydrogen: '57.00',
receiveHydrogen: '50.00',
h2Unit: '%',
departElectricKwh: '60.00',
receiveElectricKwh: '54.00',
departParking: '南山科技园停车场',
createDate: '2026-02-16 12:20'
}
];
}, []);
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 matchRegionText(text, cascaderVal) {
if (!cascaderVal || cascaderVal.length < 2) return true;
var map = {
zhejiang: '浙江省', shanghai: '上海市', guangdong: '广东省',
hangzhou: '杭州市', ningbo: '宁波市', jiaxing: '嘉兴市',
guangzhou: '广州市', shenzhen: '深圳市', dongguan: '东莞市'
};
var pt = map[cascaderVal[0]] || '';
var ct = map[cascaderVal[1]] || '';
return String(text || '').indexOf(pt + '-' + ct) >= 0;
}
function applyFilters(list, isHistory) {
return (list || []).filter(function (r) {
if (applied.transferPerson && r.transferPerson !== applied.transferPerson) return false;
if (applied.receivePerson && r.receivePerson !== applied.receivePerson) return false;
if (applied.plateNo && r.plateNo !== applied.plateNo) return false;
if (applied.method && r.method !== applied.method) return false;
if (applied.approvalStatus && r.approvalStatus !== applied.approvalStatus) return false;
if (!matchRange(r.transferDate, applied.transferDateRange)) return false;
if (isHistory) {
if (!matchRange(r.receiveDate, applied.receiveDateRange)) return false;
}
if (!matchRegionText(r.departRegionText, applied.departRegion)) return false;
if (!matchRegionText(r.receiveRegionText, applied.transferRegion)) return false;
return true;
});
}
var filteredInProgress = useMemo(function () { return applyFilters(listInProgress, false); }, [listInProgress, applied]);
var filteredHistory = useMemo(function () { return applyFilters(listHistory, true); }, [listHistory, applied]);
var pagedInProgress = useMemo(function () {
var start = (page - 1) * pageSize;
return filteredInProgress.slice(start, start + pageSize);
}, [filteredInProgress, page, pageSize]);
var pagedHistory = useMemo(function () {
var start = (page - 1) * pageSize;
return filteredHistory.slice(start, start + pageSize);
}, [filteredHistory, page, pageSize]);
var handleQuery = useCallback(function () {
setApplied(Object.assign({}, draft));
setPage(1);
}, [draft]);
var handleReset = useCallback(function () {
var empty = {
transferDateRange: null,
transferPerson: undefined,
receiveDateRange: null,
receivePerson: undefined,
plateNo: undefined,
departRegion: undefined,
transferRegion: undefined,
method: undefined,
approvalStatus: undefined
};
setDraft(empty);
setApplied(empty);
setPage(1);
}, []);
var handleAdd = useCallback(function () { message.info('跳转调拨管理-新增（原型）'); }, []);
var handleExport = useCallback(function () { message.success('导出（原型）'); }, []);
var columnsInProgress = useMemo(function () {
return [
{ title: '调拨日期', dataIndex: 'transferDate', key: 'transferDate', width: 160, render: function (v) { return fmtYMDHM(v); } },
{ title: '出发区域', dataIndex: 'departRegionText', key: 'departRegionText', width: 130 },
{ title: '调拨人', dataIndex: 'transferPerson', key: 'transferPerson', width: 100 },
{ title: '接收区域', dataIndex: 'receiveRegionText', key: 'receiveRegionText', width: 130 },
{ title: '接收人', dataIndex: 'receivePerson', key: 'receivePerson', width: 100 },
{ title: '审批状态', dataIndex: 'approvalStatus', key: 'approvalStatus', width: 100 },
{ title: '调拨方式', dataIndex: 'method', key: 'method', width: 110 },
{ title: '调拨原因', dataIndex: 'reason', key: 'reason', width: 140, ellipsis: true },
{ title: '车牌号', dataIndex: 'plateNo', key: 'plateNo', width: 110 },
{ title: '车辆类型', dataIndex: 'vehicleType', key: 'vehicleType', width: 120, ellipsis: true },
{ title: '品牌', dataIndex: 'brand', key: 'brand', width: 90 },
{ title: '型号', dataIndex: 'model', key: 'model', width: 120, ellipsis: true },
{ title: '运输方名称', dataIndex: 'carrierName', key: 'carrierName', width: 140, ellipsis: true },
{ title: '出发里程（km）', dataIndex: 'departMileageKm', key: 'departMileageKm', width: 130 },
{ title: '出发氢量', key: 'departHydrogen', width: 110, render: function (_, r) { return (r.departHydrogen || '-') + (r.h2Unit ? r.h2Unit : ''); } },
{ title: '出发电量（kWh）', dataIndex: 'departElectricKwh', key: 'departElectricKwh', width: 130 },
{ title: '出发停车场', dataIndex: 'departParking', key: 'departParking', width: 140, ellipsis: true },
{ title: '创建日期', dataIndex: 'createDate', key: 'createDate', width: 160, render: function (v) { return fmtYMDHM(v); } },
{
title: '操作',
key: 'action',
width: 280,
fixed: 'right',
render: function (_, r) {
var st = String(r && r.approvalStatus ? r.approvalStatus : '');
var canEdit = st === '待提交' || st === '审批驳回' || st === '撤回';
var canReceiveRecord = st === '审批完成';
var canRevoke = st === '审批中';
var rowId = r && r.id;
return React.createElement('span', { style: { display: 'inline-flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' } },
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { message.info('跳转调拨管理-查看页（原型）ID：' + rowId); } }, '查看'),
canEdit ? React.createElement(Button, { type: 'link', size: 'small', onClick: function () { message.info('跳转调拨管理-编辑页（原型）ID：' + rowId); } }, '编辑') : null,
canReceiveRecord ? React.createElement(Button, { type: 'link', size: 'small', onClick: function () { message.info('跳转调拨管理-接收记录页（原型）ID：' + rowId); } }, '接收记录') : null,
canRevoke ? React.createElement(Button, {
type: 'link',
size: 'small',
danger: true,
onClick: function () {
Modal.confirm({
title: '是否确认撤回？',
content: '确认后该调拨单审批状态将变更为「撤回」。',
okText: '确认',
cancelText: '取消',
onOk: function () {
setListInProgress(function (prev) {
return (prev || []).map(function (row) {
if (row && row.id === rowId) return Object.assign({}, row, { approvalStatus: '撤回' });
return row;
});
});
message.success('已撤回，审批状态已更新为撤回');
}
});
}
}, '撤回') : null
);
}
}
];
}, [setListInProgress]);
var columnsHistory = useMemo(function () {
return [
{ title: '调拨日期', dataIndex: 'transferDate', key: 'transferDate', width: 160, render: function (v) { return fmtYMDHM(v); } },
{ title: '出发区域', dataIndex: 'departRegionText', key: 'departRegionText', width: 130 },
{ title: '调拨人', dataIndex: 'transferPerson', key: 'transferPerson', width: 100 },
{ title: '接收日期', dataIndex: 'receiveDate', key: 'receiveDate', width: 160, render: function (v) { return fmtYMDHM(v); } },
{ title: '接收区域', dataIndex: 'receiveRegionText', key: 'receiveRegionText', width: 130 },
{ title: '接收人', dataIndex: 'receivePerson', key: 'receivePerson', width: 100 },
{ title: '审批状态', dataIndex: 'approvalStatus', key: 'approvalStatus', width: 100 },
{ title: '调拨方式', dataIndex: 'method', key: 'method', width: 110 },
{ title: '调拨原因', dataIndex: 'reason', key: 'reason', width: 140, ellipsis: true },
{ title: '车牌号', dataIndex: 'plateNo', key: 'plateNo', width: 110 },
{ title: '车辆类型', dataIndex: 'vehicleType', key: 'vehicleType', width: 120, ellipsis: true },
{ title: '品牌', dataIndex: 'brand', key: 'brand', width: 90 },
{ title: '型号', dataIndex: 'model', key: 'model', width: 120, ellipsis: true },
{ title: '运输方名称', dataIndex: 'carrierName', key: 'carrierName', width: 140, ellipsis: true },
{ title: '出发里程（km）', dataIndex: 'departMileageKm', key: 'departMileageKm', width: 130 },
{ title: '接收里程（km）', dataIndex: 'receiveMileageKm', key: 'receiveMileageKm', width: 130 },
{ title: '出发氢量', key: 'departHydrogen', width: 110, render: function (_, r) { return (r.departHydrogen || '-') + (r.h2Unit ? r.h2Unit : ''); } },
{ title: '接收氢量', key: 'receiveHydrogen', width: 110, render: function (_, r) { return (r.receiveHydrogen || '-') + (r.h2Unit ? r.h2Unit : ''); } },
{ title: '出发电量（kWh）', dataIndex: 'departElectricKwh', key: 'departElectricKwh', width: 130 },
{ title: '接收电量（kWh）', dataIndex: 'receiveElectricKwh', key: 'receiveElectricKwh', width: 130 },
{ title: '出发停车场', dataIndex: 'departParking', key: 'departParking', width: 140, ellipsis: true },
{ title: '创建日期', dataIndex: 'createDate', key: 'createDate', width: 160, render: function (v) { return fmtYMDHM(v); } },
{
title: '操作',
key: 'action',
width: 100,
fixed: 'right',
render: function (_, r) {
return React.createElement(Button, { type: 'link', size: 'small', onClick: function () { message.info('跳转调拨管理-查看页（原型）ID：' + r.id); } }, '查看');
}
}
];
}, []);
var filterItems = [
React.createElement('div', { key: 'transferDate', style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '调拨日期'),
React.createElement(RangePicker, { style: filterControlStyle, value: draft.transferDateRange, onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { transferDateRange: v }); }); }, placeholder: ['开始日期', '结束日期'] })
),
React.createElement('div', { key: 'transferPerson', style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '调拨人'),
React.createElement(Select, { placeholder: '请输入或选择调拨人', style: filterControlStyle, value: draft.transferPerson, onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { transferPerson: v }); }); }, allowClear: true, showSearch: true, options: userOptions, filterOption: filterOption })
),
React.createElement('div', { key: 'receiveDate', style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '接收日期'),
React.createElement(RangePicker, { style: filterControlStyle, value: draft.receiveDateRange, onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { receiveDateRange: v }); }); }, placeholder: ['开始日期', '结束日期'] })
),
React.createElement('div', { key: 'receivePerson', style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '接收人'),
React.createElement(Select, { placeholder: '请输入或选择接收人', style: filterControlStyle, value: draft.receivePerson, onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { receivePerson: v }); }); }, allowClear: true, showSearch: true, options: userOptions, filterOption: filterOption })
),
React.createElement('div', { key: 'plateNo', 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', { key: 'departRegion', style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '出发区域'),
React.createElement(Cascader, { placeholder: '请选择出发区域', style: filterControlStyle, options: regionOptions, value: draft.departRegion, onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { departRegion: v }); }); }, allowClear: true })
),
React.createElement('div', { key: 'transferRegion', style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '调拨区域'),
React.createElement(Cascader, { placeholder: '请选择调拨区域', style: filterControlStyle, options: regionOptions, value: draft.transferRegion, onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { transferRegion: v }); }); }, allowClear: true })
),
React.createElement('div', { key: 'method', style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '调拨方式'),
React.createElement(Select, { placeholder: '请选择调拨方式', style: filterControlStyle, value: draft.method, onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { method: v }); }); }, allowClear: true, options: methodOptions })
),
React.createElement('div', { key: 'approvalStatus', style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '审批状态'),
React.createElement(Select, { placeholder: '请选择审批状态', style: filterControlStyle, value: draft.approvalStatus, onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { approvalStatus: v }); }); }, allowClear: true, options: approvalOptions })
)
];
var filterCount = filterExpanded ? 9 : 3;
var filterNodes = [];
for (var i = 0; i < filterCount && i < filterItems.length; i++) filterNodes.push(filterItems[i]);
var tabItems = useMemo(function () {
return [
{
key: 'in_progress',
label: '进行中',
children: React.createElement(Table, {
rowKey: 'id',
columns: columnsInProgress,
dataSource: pagedInProgress,
scroll: { x: 2300 },
size: 'small',
pagination: {
current: page,
pageSize: pageSize,
total: filteredInProgress.length,
showSizeChanger: true,
showQuickJumper: true,
showTotal: function (t) { return '共 ' + t + ' 条'; },
onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
}
})
},
{
key: 'history',
label: '历史记录',
children: React.createElement(Table, {
rowKey: 'id',
columns: columnsHistory,
dataSource: pagedHistory,
scroll: { x: 2600 },
size: 'small',
pagination: {
current: page,
pageSize: pageSize,
total: filteredHistory.length,
showSizeChanger: true,
showQuickJumper: true,
showTotal: function (t) { return '共 ' + t + ' 条'; },
onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
}
})
}
];
}, [columnsInProgress, columnsHistory, pagedInProgress, pagedHistory, page, pageSize, filteredInProgress.length, filteredHistory.length]);
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', flex: 1, minWidth: 0 } }, filterNodes),
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(Button, { type: 'link', size: 'small', onClick: function () { setFilterExpanded(!filterExpanded); } }, filterExpanded ? '收起' : '展开')
)
),
React.createElement(Card, null,
React.createElement(React.Fragment, null,
React.createElement('style', null, tableSingleLineStyle),
React.createElement('div', { className: 'transfer-list-table' },
React.createElement(Tabs, {
activeKey: tab,
onChange: function (k) { setTab(k); setPage(1); },
tabBarExtraContent: React.createElement('div', { style: { display: 'flex', gap: 8 } },
React.createElement(Button, { type: 'primary', onClick: handleAdd }, '新增'),
React.createElement(Button, { onClick: handleExport }, '导出')
),
items: tabItems
})
)
)
)
)
);
};
Reference in New Issue View Git Blame Copy Permalink