547 lines
39 KiB
JavaScript
547 lines
39 KiB
JavaScript
// 【重要】必须使用 const Component 作为组件变量名
|
||
// 车辆业务 - 交车管理（ONEOS运管平台，布局参照新增租赁合同）
|
||
|
||
const Component = function () {
|
||
var useState = React.useState;
|
||
var useCallback = React.useCallback;
|
||
var useMemo = React.useMemo;
|
||
|
||
var antd = window.antd;
|
||
var Breadcrumb = antd.Breadcrumb;
|
||
var Card = antd.Card;
|
||
var DatePicker = antd.DatePicker;
|
||
var Select = antd.Select;
|
||
var Button = antd.Button;
|
||
var Tabs = antd.Tabs;
|
||
var Table = antd.Table;
|
||
var Popover = antd.Popover;
|
||
var Cascader = antd.Cascader;
|
||
var Modal = antd.Modal;
|
||
var message = antd.message;
|
||
|
||
var RangePicker = DatePicker.RangePicker;
|
||
|
||
var filterState = useState({
|
||
contractCode: undefined,
|
||
projectName: undefined,
|
||
customerName: undefined,
|
||
deliveryRegion: undefined,
|
||
dateStart: '',
|
||
dateEnd: '',
|
||
deliveryPerson: undefined
|
||
});
|
||
var filters = filterState[0];
|
||
var setFilters = filterState[1];
|
||
var appliedFilterState = useState({
|
||
contractCode: undefined,
|
||
projectName: undefined,
|
||
customerName: undefined,
|
||
deliveryRegion: undefined,
|
||
dateStart: '',
|
||
dateEnd: '',
|
||
deliveryPerson: undefined
|
||
});
|
||
var appliedFilters = appliedFilterState[0];
|
||
var setAppliedFilters = appliedFilterState[1];
|
||
|
||
var activeTabState = useState('pending');
|
||
var activeTab = activeTabState[0];
|
||
var setActiveTab = activeTabState[1];
|
||
var pageState = useState(1);
|
||
var pageSizeState = useState(10);
|
||
var requirementModalOpen = useState(false);
|
||
var setRequirementModalOpen = requirementModalOpen[1];
|
||
|
||
var requirementDocContent = '交车管理\n一个「数字化资产ONEOS运管平台」中的「交车管理」模块\n\n1.面包屑：\n1.1.运维管理-车辆业务-交车管理\n\n2.筛选：\n2.1.合同编码：选择器，默认为所有合同；提示信息为：请输入或选择合同编码，支持从输入框输入内容进行模糊搜索，下拉显示结果；\n2.2.项目名称：选择器，默认为所有项目；提示信息为：请输入或选择项目名称，支持从输入框输入内容进行模糊搜索，下拉显示结果；\n2.3.客户名称：选择器，默认为所有客户；提示信息为：请输入或选择客户名称，支持从输入框输入内容进行模糊搜索，下拉显示结果；\n2.4.交车区域：地区选择器，支持省-市2级筛选；\n2.5.交车时间：日期选择器，默认提示信息为：请选择交车开始时间 请选择交车结束时间，单输入框，双日历，支持时间段选择，精确至天，格式为：YYYY-MM-DD - YYYY-MM-DD；\n2.6.交车人：选择器，默认为所有交车人；提示信息为：请输入或选择交车人姓名，支持从输入框输入内容进行模糊搜索，下拉显示结果；\n2.7.查询：点击查询，根据单个或多个筛选条件（且）联动表格进行查询；\n2.8.重置：点击清空查询条件至默认；\n\n3.列表：分为两个tab：待处理、历史记录，默认显示为待处理tab；\n3.1.待处理tab：列表显示预计交车时间、合同编码、项目名称、客户名称、交车区域、交车地点、交车数量（重点色，点击气泡卡片：车辆类型、品牌、型号、车牌号、交车时间、交车人员）、创建时间、创建人、最后修改时间、最后修改人、操作(查看、交车单)；\n3.2.历史记录tab：同列，操作仅 查看（跳转交车管理-查看页）。';
|
||
|
||
// 交车区域：省-市 二级
|
||
var regionOptions = [
|
||
{ value: 'zhejiang', label: '浙江省', children: [{ value: 'hangzhou', label: '杭州市' }, { value: 'jiaxing', label: '嘉兴市' }, { value: 'ningbo', label: '宁波市' }] },
|
||
{ value: 'shanghai', label: '上海市', children: [{ value: 'shanghai', label: '上海市' }] },
|
||
{ value: 'guangdong', label: '广东省', children: [{ value: 'guangzhou', label: '广州市' }, { value: 'shenzhen', label: '深圳市' }] }
|
||
];
|
||
|
||
var contractCodeOptions = [
|
||
{ value: 'HT-ZL-2025-001', label: 'HT-ZL-2025-001' },
|
||
{ value: 'HT-ZL-2025-002', label: 'HT-ZL-2025-002' },
|
||
{ value: 'HT-ZL-2025-003', label: 'HT-ZL-2025-003' }
|
||
];
|
||
var projectNameOptions = [
|
||
{ value: 'p1', label: '嘉兴氢能示范项目' },
|
||
{ value: 'p2', label: '上海物流租赁项目' },
|
||
{ value: 'p3', label: '杭州城配租赁项目' }
|
||
];
|
||
var customerNameOptions = [
|
||
{ value: 'c1', label: '嘉兴某某物流有限公司' },
|
||
{ value: 'c2', label: '上海某某运输公司' },
|
||
{ value: 'c3', label: '杭州某某租赁有限公司' }
|
||
];
|
||
var deliveryPersonOptions = [
|
||
{ value: '张三', label: '张三' },
|
||
{ value: '李四', label: '李四' },
|
||
{ value: '王五', label: '王五' }
|
||
];
|
||
|
||
// 待处理 mock：含创建时间、创建人、最后修改时间、最后修改人；vehicleList 含交车时间、交车人员（未交车为-）
|
||
var pendingListState = useState([
|
||
{ id: 'd1', expectedDate: '2025-02-28', contractCode: 'HT-ZL-2025-001', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '嘉兴市南湖区科技大道1号', deliveryCount: 2, vehicleList: [{ vehicleType: '厢式货车', brand: '东风', model: 'DFH1180', plateNo: '京A12345', deliveryTime: '2025-02-28', deliveryPerson: '张三' }, { vehicleType: '平板货车', brand: '福田', model: 'BJ1180', plateNo: '-', deliveryTime: '-', deliveryPerson: '-' }], createTime: '2025-02-20 09:00', createBy: '系统', lastModifyTime: '2025-02-22 14:30', lastModifyBy: '李四', assignedDeliveryPerson: '张三' },
|
||
{ id: 'd2', expectedDate: '2025-03-01 至 2025-03-05', contractCode: 'HT-ZL-2025-002', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryRegion: '上海市-上海市', deliveryAddress: '浦东新区张江高科技园区', deliveryCount: 1, vehicleList: [{ vehicleType: '厢式货车', brand: '江淮', model: 'HFC1180', plateNo: '-', deliveryTime: '-', deliveryPerson: '-' }], createTime: '2025-02-21 10:30', createBy: '王五', lastModifyTime: '2025-02-21 10:30', lastModifyBy: '王五', assignedDeliveryPerson: '李四' },
|
||
{ id: 'd3', expectedDate: '2025-02-25', contractCode: 'HT-ZL-2025-003', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', deliveryRegion: '浙江省-杭州市', deliveryAddress: '余杭区未来科技城', deliveryCount: 3, vehicleList: [{ vehicleType: '栏板货车', brand: '重汽', model: 'ZZ1180', plateNo: '浙A10001', deliveryTime: '2025-02-25', deliveryPerson: '张三' }, { vehicleType: '厢式货车', brand: '东风', model: 'DFH1190', plateNo: '-', deliveryTime: '-', deliveryPerson: '-' }, { vehicleType: '平板货车', brand: '福田', model: 'BJ1190', plateNo: '-', deliveryTime: '-', deliveryPerson: '-' }], createTime: '2025-02-18 14:00', createBy: '李四', lastModifyTime: '2025-02-24 11:00', lastModifyBy: '王五', assignedDeliveryPerson: '张三' },
|
||
{ id: 'd4', expectedDate: '2025-03-08', contractCode: 'HT-ZL-2025-004', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '嘉兴市秀洲区洪兴西路288号', deliveryCount: 1, vehicleList: [{ vehicleType: '厢式货车', brand: '重汽', model: 'ZZ1160', plateNo: '-', deliveryTime: '-', deliveryPerson: '-' }], createTime: '2025-02-25 08:15', createBy: '张三', lastModifyTime: '2025-02-25 08:15', lastModifyBy: '张三', assignedDeliveryPerson: '李四' },
|
||
{ id: 'd5', expectedDate: '2025-03-10 至 2025-03-12', contractCode: 'HT-ZL-2025-005', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryRegion: '上海市-上海市', deliveryAddress: '闵行区莘庄工业区申富路669号', deliveryCount: 2, vehicleList: [{ vehicleType: '平板货车', brand: '福田', model: 'BJ1180', plateNo: '-', deliveryTime: '-', deliveryPerson: '-' }, { vehicleType: '栏板货车', brand: '东风', model: 'DFH1160', plateNo: '-', deliveryTime: '-', deliveryPerson: '-' }], createTime: '2025-02-26 11:20', createBy: '王五', lastModifyTime: '2025-02-26 11:20', lastModifyBy: '王五', assignedDeliveryPerson: '王五' },
|
||
{ id: 'd6', expectedDate: '2025-03-15', contractCode: 'HT-ZL-2025-006', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', deliveryRegion: '浙江省-杭州市', deliveryAddress: '萧山区市心北路108号', deliveryCount: 4, vehicleList: [{ vehicleType: '厢式货车', brand: '江淮', model: 'HFC1180', plateNo: '-', deliveryTime: '-', deliveryPerson: '-' }, { vehicleType: '厢式货车', brand: '东风', model: 'DFH1180', plateNo: '-', deliveryTime: '-', deliveryPerson: '-' }, { vehicleType: '平板货车', brand: '福田', model: 'BJ1190', plateNo: '-', deliveryTime: '-', deliveryPerson: '-' }, { vehicleType: '栏板货车', brand: '重汽', model: 'ZZ1180', plateNo: '-', deliveryTime: '-', deliveryPerson: '-' }], createTime: '2025-03-01 09:30', createBy: '李四', lastModifyTime: '2025-03-01 09:30', lastModifyBy: '李四', assignedDeliveryPerson: '张三' },
|
||
{ id: 'd7', expectedDate: '2025-03-18', contractCode: 'HT-ZL-2025-007', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '嘉兴市经开区昌盛路1号', deliveryCount: 1, vehicleList: [{ vehicleType: '平板货车', brand: '福田', model: 'BJ1180', plateNo: '浙F80088', deliveryTime: '-', deliveryPerson: '-' }], createTime: '2025-03-03 14:00', createBy: '张三', lastModifyTime: '2025-03-05 10:00', lastModifyBy: '李四', assignedDeliveryPerson: '李四' },
|
||
{ id: 'd8', expectedDate: '2025-03-20 至 2025-03-22', contractCode: 'HT-ZL-2025-008', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryRegion: '上海市-上海市', deliveryAddress: '宝山区沪太路5008号', deliveryCount: 3, vehicleList: [{ vehicleType: '厢式货车', brand: '江淮', model: 'HFC1190', plateNo: '-', deliveryTime: '-', deliveryPerson: '-' }, { vehicleType: '栏板货车', brand: '重汽', model: 'ZZ1190', plateNo: '-', deliveryTime: '-', deliveryPerson: '-' }, { vehicleType: '厢式货车', brand: '东风', model: 'DFH1190', plateNo: '-', deliveryTime: '-', deliveryPerson: '-' }], createTime: '2025-03-05 10:00', createBy: '王五', lastModifyTime: '2025-03-05 10:00', lastModifyBy: '王五', assignedDeliveryPerson: '王五' },
|
||
{ id: 'd9', expectedDate: '2025-03-25', contractCode: 'HT-ZL-2025-009', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', deliveryRegion: '浙江省-杭州市', deliveryAddress: '滨江区网商路699号', deliveryCount: 2, vehicleList: [{ vehicleType: '栏板货车', brand: '东风', model: 'DFH1160', plateNo: '-', deliveryTime: '-', deliveryPerson: '-' }, { vehicleType: '平板货车', brand: '福田', model: 'BJ1180', plateNo: '浙A20002', deliveryTime: '-', deliveryPerson: '-' }], createTime: '2025-03-08 08:45', createBy: '李四', lastModifyTime: '2025-03-08 08:45', lastModifyBy: '李四', assignedDeliveryPerson: '张三' },
|
||
{ id: 'd10', expectedDate: '2025-03-28', contractCode: 'HT-ZL-2025-010', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '嘉兴市南湖区广益路与由拳路交叉口', deliveryCount: 1, vehicleList: [{ vehicleType: '厢式货车', brand: '重汽', model: 'ZZ1180', plateNo: '-', deliveryTime: '-', deliveryPerson: '-' }], createTime: '2025-03-10 16:20', createBy: '张三', lastModifyTime: '2025-03-10 16:20', lastModifyBy: '张三', assignedDeliveryPerson: '李四' }
|
||
]);
|
||
var pendingList = pendingListState[0];
|
||
|
||
// 历史记录 mock：与待处理同结构，含创建时间、创建人、最后修改时间、最后修改人；vehicleList 含交车时间(actualDate)、交车人员(deliveryPerson)
|
||
var historyListState = useState([
|
||
{ id: 'h1', expectedDate: '2025-02-15', contractCode: 'HT-ZL-2024-001', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '嘉兴市南湖区科技大道1号', deliveryCount: 2, vehicleList: [{ vehicleType: '厢式货车', brand: '东风', model: 'DFH1180', plateNo: '京A12345', actualDate: '2025-02-15', deliveryPerson: '张三' }, { vehicleType: '平板货车', brand: '福田', model: 'BJ1180', plateNo: '京C11111', actualDate: '2025-02-15', deliveryPerson: '李四' }], createTime: '2025-02-10 09:00', createBy: '系统', lastModifyTime: '2025-02-15 14:30', lastModifyBy: '张三' },
|
||
{ id: 'h2', expectedDate: '2025-02-10 至 2025-02-12', contractCode: 'HT-ZL-2024-002', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryRegion: '上海市-上海市', deliveryAddress: '浦东新区张江路100号', deliveryCount: 1, vehicleList: [{ vehicleType: '厢式货车', brand: '江淮', model: 'HFC1180', plateNo: '沪A20002', actualDate: '2025-02-11', deliveryPerson: '王五' }], createTime: '2025-02-05 10:00', createBy: '王五', lastModifyTime: '2025-02-12 11:00', lastModifyBy: '王五' },
|
||
{ id: 'h3', expectedDate: '2025-02-18', contractCode: 'HT-ZL-2024-003', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', deliveryRegion: '浙江省-杭州市', deliveryAddress: '余杭区未来科技城', deliveryCount: 3, vehicleList: [{ vehicleType: '栏板货车', brand: '重汽', model: 'ZZ1180', plateNo: '浙A10001', actualDate: '2025-02-18', deliveryPerson: '张三' }, { vehicleType: '厢式货车', brand: '东风', model: 'DFH1190', plateNo: '浙A10002', actualDate: '2025-02-18', deliveryPerson: '李四' }, { vehicleType: '平板货车', brand: '福田', model: 'BJ1190', plateNo: '浙A10003', actualDate: '2025-02-18', deliveryPerson: '王五' }], createTime: '2025-02-12 08:30', createBy: '李四', lastModifyTime: '2025-02-18 15:00', lastModifyBy: '张三' },
|
||
{ id: 'h4', expectedDate: '2025-02-20', contractCode: 'HT-ZL-2024-004', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '嘉兴市秀洲区洪兴西路288号', deliveryCount: 1, vehicleList: [{ vehicleType: '厢式货车', brand: '江淮', model: 'HFC1180', plateNo: '浙F60001', actualDate: '2025-02-20', deliveryPerson: '李四' }], createTime: '2025-02-14 11:00', createBy: '张三', lastModifyTime: '2025-02-20 10:15', lastModifyBy: '李四' },
|
||
{ id: 'h5', expectedDate: '2025-02-22 至 2025-02-24', contractCode: 'HT-ZL-2024-005', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryRegion: '上海市-上海市', deliveryAddress: '闵行区莘庄工业区申富路669号', deliveryCount: 2, vehicleList: [{ vehicleType: '平板货车', brand: '福田', model: 'BJ1180', plateNo: '沪B30001', actualDate: '2025-02-23', deliveryPerson: '王五' }, { vehicleType: '栏板货车', brand: '东风', model: 'DFH1160', plateNo: '沪B30002', actualDate: '2025-02-24', deliveryPerson: '张三' }], createTime: '2025-02-16 09:45', createBy: '李四', lastModifyTime: '2025-02-24 16:30', lastModifyBy: '王五' },
|
||
{ id: 'h6', expectedDate: '2025-02-25', contractCode: 'HT-ZL-2024-006', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', deliveryRegion: '浙江省-杭州市', deliveryAddress: '萧山区市心北路108号', deliveryCount: 1, vehicleList: [{ vehicleType: '厢式货车', brand: '重汽', model: 'ZZ1160', plateNo: '浙A40001', actualDate: '2025-02-25', deliveryPerson: '张三' }], createTime: '2025-02-18 14:20', createBy: '王五', lastModifyTime: '2025-02-25 11:00', lastModifyBy: '张三' },
|
||
{ id: 'h7', expectedDate: '2025-02-28', contractCode: 'HT-ZL-2024-007', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '嘉兴市经开区昌盛路1号', deliveryCount: 2, vehicleList: [{ vehicleType: '厢式货车', brand: '东风', model: 'DFH1180', plateNo: '浙F70001', actualDate: '2025-02-28', deliveryPerson: '李四' }, { vehicleType: '平板货车', brand: '福田', model: 'BJ1180', plateNo: '浙F70002', actualDate: '2025-02-28', deliveryPerson: '王五' }], createTime: '2025-02-20 10:10', createBy: '张三', lastModifyTime: '2025-02-28 14:45', lastModifyBy: '李四' },
|
||
{ id: 'h8', expectedDate: '2025-03-02', contractCode: 'HT-ZL-2024-008', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryRegion: '上海市-上海市', deliveryAddress: '宝山区沪太路5008号', deliveryCount: 1, vehicleList: [{ vehicleType: '栏板货车', brand: '江淮', model: 'HFC1160', plateNo: '沪A50001', actualDate: '2025-03-02', deliveryPerson: '王五' }], createTime: '2025-02-22 08:00', createBy: '李四', lastModifyTime: '2025-03-02 09:30', lastModifyBy: '王五' },
|
||
{ id: 'h9', expectedDate: '2025-03-05 至 2025-03-07', contractCode: 'HT-ZL-2024-009', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', deliveryRegion: '浙江省-杭州市', deliveryAddress: '滨江区网商路699号', deliveryCount: 2, vehicleList: [{ vehicleType: '厢式货车', brand: '江淮', model: 'HFC1190', plateNo: '浙A60001', actualDate: '2025-03-06', deliveryPerson: '张三' }, { vehicleType: '栏板货车', brand: '重汽', model: 'ZZ1190', plateNo: '浙A60002', actualDate: '2025-03-07', deliveryPerson: '李四' }], createTime: '2025-02-25 15:30', createBy: '王五', lastModifyTime: '2025-03-07 13:20', lastModifyBy: '张三' },
|
||
{ id: 'h10', expectedDate: '2025-03-10', contractCode: 'HT-ZL-2024-010', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '嘉兴市南湖区广益路与由拳路交叉口', deliveryCount: 1, vehicleList: [{ vehicleType: '平板货车', brand: '福田', model: 'BJ1190', plateNo: '浙F90001', actualDate: '2025-03-10', deliveryPerson: '李四' }], createTime: '2025-03-01 11:00', createBy: '张三', lastModifyTime: '2025-03-10 10:00', lastModifyBy: '李四' }
|
||
]);
|
||
var historyList = historyListState[0];
|
||
|
||
var filteredPending = useMemo(function () {
|
||
var list = pendingList.slice();
|
||
if (appliedFilters.contractCode) list = list.filter(function (r) { return (r.contractCode || '').indexOf(appliedFilters.contractCode) !== -1; });
|
||
if (appliedFilters.projectName) list = list.filter(function (r) { return r.projectName === appliedFilters.projectName; });
|
||
if (appliedFilters.customerName) list = list.filter(function (r) { return r.customerName === appliedFilters.customerName; });
|
||
if (appliedFilters.deliveryRegion) list = list.filter(function (r) { return (r.deliveryRegion || '').indexOf(appliedFilters.deliveryRegion) !== -1; });
|
||
if (appliedFilters.dateStart) list = list.filter(function (r) { var d = (r.expectedDate || '').slice(0, 10); return d >= appliedFilters.dateStart; });
|
||
if (appliedFilters.dateEnd) list = list.filter(function (r) { var d = (r.expectedDate || '').slice(0, 10); return d <= appliedFilters.dateEnd; });
|
||
if (appliedFilters.deliveryPerson) list = list.filter(function (r) { return (r.assignedDeliveryPerson || '').indexOf(appliedFilters.deliveryPerson) !== -1; });
|
||
return list;
|
||
}, [pendingList, appliedFilters]);
|
||
|
||
var filteredHistory = useMemo(function () {
|
||
var list = historyList.slice();
|
||
if (appliedFilters.contractCode) list = list.filter(function (r) { return (r.contractCode || '').indexOf(appliedFilters.contractCode) !== -1; });
|
||
if (appliedFilters.projectName) list = list.filter(function (r) { return r.projectName === appliedFilters.projectName; });
|
||
if (appliedFilters.customerName) list = list.filter(function (r) { return r.customerName === appliedFilters.customerName; });
|
||
if (appliedFilters.deliveryRegion) list = list.filter(function (r) { return (r.deliveryRegion || '').indexOf(appliedFilters.deliveryRegion) !== -1; });
|
||
if (appliedFilters.dateStart) list = list.filter(function (r) { var d = (r.expectedDate || '').slice(0, 10); return d >= appliedFilters.dateStart; });
|
||
if (appliedFilters.dateEnd) list = list.filter(function (r) { var d = (r.expectedDate || '').slice(0, 10); return d <= appliedFilters.dateEnd; });
|
||
if (appliedFilters.deliveryPerson) list = list.filter(function (r) { return (r.lastModifyBy || '').indexOf(appliedFilters.deliveryPerson) !== -1; });
|
||
return list;
|
||
}, [historyList, appliedFilters]);
|
||
|
||
var page = pageState[0];
|
||
var setPage = pageState[1];
|
||
var pageSize = pageSizeState[0];
|
||
var setPageSize = pageSizeState[1];
|
||
var totalCount = activeTab === 'pending' ? filteredPending.length : filteredHistory.length;
|
||
var displayPending = useMemo(function () {
|
||
var start = (page - 1) * pageSize;
|
||
return filteredPending.slice(start, start + pageSize);
|
||
}, [filteredPending, page, pageSize]);
|
||
var displayHistory = useMemo(function () {
|
||
var start = (page - 1) * pageSize;
|
||
return filteredHistory.slice(start, start + pageSize);
|
||
}, [filteredHistory, page, pageSize]);
|
||
|
||
var handleQuery = useCallback(function () {
|
||
var regionVal = filters.deliveryRegion;
|
||
if (Array.isArray(regionVal) && regionVal.length >= 2) {
|
||
var prov = regionOptions.find(function (r) { return r.value === regionVal[0]; });
|
||
var city = prov && prov.children && prov.children.find(function (c) { return c.value === regionVal[1]; });
|
||
regionVal = prov && city ? prov.label + '-' + city.label : undefined;
|
||
} else if (Array.isArray(regionVal) && regionVal.length === 1) {
|
||
var p = regionOptions.find(function (r) { return r.value === regionVal[0]; });
|
||
regionVal = p ? p.label : undefined;
|
||
}
|
||
setAppliedFilters({
|
||
contractCode: filters.contractCode,
|
||
projectName: filters.projectName,
|
||
customerName: filters.customerName,
|
||
deliveryRegion: regionVal,
|
||
dateStart: filters.dateStart,
|
||
dateEnd: filters.dateEnd,
|
||
deliveryPerson: filters.deliveryPerson
|
||
});
|
||
setPage(1);
|
||
}, [filters]);
|
||
|
||
var handleReset = useCallback(function () {
|
||
var empty = { contractCode: undefined, projectName: undefined, customerName: undefined, deliveryRegion: undefined, dateStart: '', dateEnd: '', deliveryPerson: undefined };
|
||
setFilters(empty);
|
||
setAppliedFilters(empty);
|
||
setPage(1);
|
||
}, []);
|
||
|
||
var handleExport = useCallback(function () {
|
||
var rows = activeTab === 'pending' ? filteredPending : filteredHistory;
|
||
if (!rows || rows.length === 0) {
|
||
message.warning('当前无数据可导出');
|
||
return;
|
||
}
|
||
var escapeCsv = function (v) {
|
||
var s = v == null ? '' : String(v);
|
||
if (s.indexOf(',') !== -1 || s.indexOf('"') !== -1 || s.indexOf('\n') !== -1) return '"' + s.replace(/"/g, '""') + '"';
|
||
return s;
|
||
};
|
||
var headers = ['预计交车时间', '合同编码', '项目名称', '客户名称', '交车区域', '交车地点', '交车数量', '创建时间', '创建人', '最后修改时间', '最后修改人'];
|
||
var rowToCells = function (r) {
|
||
return [r.expectedDate, r.contractCode, r.projectName, r.customerName, r.deliveryRegion, r.deliveryAddress, r.deliveryCount, r.createTime, r.createBy, r.lastModifyTime, r.lastModifyBy];
|
||
};
|
||
var csv = headers.map(escapeCsv).join(',') + '\n';
|
||
rows.forEach(function (r) {
|
||
csv += rowToCells(r).map(escapeCsv).join(',') + '\n';
|
||
});
|
||
var blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8' });
|
||
var url = URL.createObjectURL(blob);
|
||
var a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = '交车管理_' + (activeTab === 'pending' ? '待处理' : '历史记录') + '_' + new Date().getTime() + '.csv';
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
message.success('导出成功');
|
||
}, [activeTab, filteredPending, filteredHistory]);
|
||
|
||
var dateRangeValue = useMemo(function () {
|
||
if (!filters.dateStart && !filters.dateEnd) return null;
|
||
try {
|
||
if (typeof window !== 'undefined' && window.dayjs && filters.dateStart && filters.dateEnd) {
|
||
return [window.dayjs(filters.dateStart), window.dayjs(filters.dateEnd)];
|
||
}
|
||
} catch (e) {}
|
||
return null;
|
||
}, [filters.dateStart, filters.dateEnd]);
|
||
|
||
var onDateRangeChange = useCallback(function (dates, dateStrings) {
|
||
setFilters(function (f) {
|
||
var g = {}; for (var k in f) g[k] = f[k];
|
||
g.dateStart = (dateStrings && dateStrings[0]) || '';
|
||
g.dateEnd = (dateStrings && dateStrings[1]) || '';
|
||
return g;
|
||
});
|
||
}, []);
|
||
|
||
// 交车区域 Cascader 的 value：用 appliedFilters 反推或存 value 数组。筛选用字符串比较，表单用 Cascader 选省-市
|
||
var deliveryRegionValue = useMemo(function () {
|
||
var s = filters.deliveryRegion;
|
||
if (!s || typeof s !== 'string') return undefined;
|
||
var parts = s.split('-');
|
||
if (parts.length < 2) return undefined;
|
||
for (var i = 0; i < regionOptions.length; i++) {
|
||
var prov = regionOptions[i];
|
||
if (prov.label !== parts[0]) continue;
|
||
for (var j = 0; j < (prov.children || []).length; j++) {
|
||
if (prov.children[j].label === parts[1]) return [prov.value, prov.children[j].value];
|
||
}
|
||
}
|
||
return undefined;
|
||
}, [filters.deliveryRegion]);
|
||
|
||
// 列表列：待处理
|
||
var popoverTableStyle = { width: '100%', borderCollapse: 'collapse', fontSize: 12 };
|
||
var popoverThStyle = { padding: '6px 8px', textAlign: 'left', borderBottom: '1px solid #f0f0f0', backgroundColor: '#fafafa', fontWeight: 600 };
|
||
var popoverTdStyle = { padding: '6px 8px', borderBottom: '1px solid #f0f0f0' };
|
||
|
||
// 气泡卡片：车辆类型、品牌、型号、车牌号、交车时间、交车人员（待处理用 deliveryTime/deliveryPerson，未交车为-）
|
||
function renderPendingQuantity(record) {
|
||
var list = record.vehicleList || [];
|
||
var content = React.createElement('div', { style: { padding: 8, minWidth: 420 } },
|
||
React.createElement('div', { style: { marginBottom: 8, fontWeight: 600 } }, '车辆明细'),
|
||
React.createElement('table', { style: popoverTableStyle },
|
||
React.createElement('thead', null,
|
||
React.createElement('tr', null,
|
||
React.createElement('th', { style: popoverThStyle }, '车辆类型'),
|
||
React.createElement('th', { style: popoverThStyle }, '品牌'),
|
||
React.createElement('th', { style: popoverThStyle }, '型号'),
|
||
React.createElement('th', { style: popoverThStyle }, '车牌号'),
|
||
React.createElement('th', { style: popoverThStyle }, '交车时间'),
|
||
React.createElement('th', { style: popoverThStyle }, '交车人员')
|
||
)
|
||
),
|
||
React.createElement('tbody', null,
|
||
list.map(function (v, i) {
|
||
return React.createElement('tr', { key: i },
|
||
React.createElement('td', { style: popoverTdStyle }, v.vehicleType || '-'),
|
||
React.createElement('td', { style: popoverTdStyle }, v.brand || '-'),
|
||
React.createElement('td', { style: popoverTdStyle }, v.model || '-'),
|
||
React.createElement('td', { style: popoverTdStyle }, v.plateNo || '-'),
|
||
React.createElement('td', { style: popoverTdStyle }, (v.deliveryTime && v.deliveryTime !== '-') ? v.deliveryTime : '-'),
|
||
React.createElement('td', { style: popoverTdStyle }, v.deliveryPerson || '-')
|
||
);
|
||
})
|
||
)
|
||
)
|
||
);
|
||
return React.createElement(Popover, { content: content, title: null },
|
||
React.createElement('span', { style: { color: '#1890ff', cursor: 'pointer', fontWeight: 600 } }, record.deliveryCount + ' 辆')
|
||
);
|
||
}
|
||
|
||
// 气泡卡片：车辆类型、品牌、型号、车牌号、交车时间、交车人员（历史用 actualDate、deliveryPerson）
|
||
function renderHistoryQuantity(record) {
|
||
var list = record.vehicleList || [];
|
||
var content = React.createElement('div', { style: { padding: 8, minWidth: 420 } },
|
||
React.createElement('div', { style: { marginBottom: 8, fontWeight: 600 } }, '车辆明细'),
|
||
React.createElement('table', { style: popoverTableStyle },
|
||
React.createElement('thead', null,
|
||
React.createElement('tr', null,
|
||
React.createElement('th', { style: popoverThStyle }, '车辆类型'),
|
||
React.createElement('th', { style: popoverThStyle }, '品牌'),
|
||
React.createElement('th', { style: popoverThStyle }, '型号'),
|
||
React.createElement('th', { style: popoverThStyle }, '车牌号'),
|
||
React.createElement('th', { style: popoverThStyle }, '交车时间'),
|
||
React.createElement('th', { style: popoverThStyle }, '交车人员')
|
||
)
|
||
),
|
||
React.createElement('tbody', null,
|
||
list.map(function (v, i) {
|
||
return React.createElement('tr', { key: i },
|
||
React.createElement('td', { style: popoverTdStyle }, v.vehicleType || '-'),
|
||
React.createElement('td', { style: popoverTdStyle }, v.brand || '-'),
|
||
React.createElement('td', { style: popoverTdStyle }, v.model || '-'),
|
||
React.createElement('td', { style: popoverTdStyle }, v.plateNo || '-'),
|
||
React.createElement('td', { style: popoverTdStyle }, v.actualDate || '-'),
|
||
React.createElement('td', { style: popoverTdStyle }, v.deliveryPerson || '-')
|
||
);
|
||
})
|
||
)
|
||
)
|
||
);
|
||
return React.createElement(Popover, { content: content, title: null },
|
||
React.createElement('span', { style: { color: '#1890ff', cursor: 'pointer', fontWeight: 600 } }, record.deliveryCount + ' 辆')
|
||
);
|
||
}
|
||
|
||
// 待处理：预计交车时间、合同编码、项目名称、客户名称、交车区域、交车地点、交车数量、创建时间、创建人、最后修改时间、最后修改人、操作(查看、交车单)
|
||
var pendingColumns = [
|
||
{ title: '预计交车时间', dataIndex: 'expectedDate', key: 'expectedDate', width: 220, ellipsis: true },
|
||
{ title: '合同编码', dataIndex: 'contractCode', key: 'contractCode', width: 150, ellipsis: true },
|
||
{ title: '项目名称', dataIndex: 'projectName', key: 'projectName', width: 150, ellipsis: true },
|
||
{ title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 160, ellipsis: true },
|
||
{ title: '交车区域', dataIndex: 'deliveryRegion', key: 'deliveryRegion', width: 120, ellipsis: true },
|
||
{ title: '交车地点', dataIndex: 'deliveryAddress', key: 'deliveryAddress', width: 200, ellipsis: true },
|
||
{ title: '交车数量', key: 'deliveryCount', width: 90, render: function (_, r) { return renderPendingQuantity(r); } },
|
||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 160, ellipsis: true },
|
||
{ title: '创建人', dataIndex: 'createBy', key: 'createBy', width: 90, ellipsis: true },
|
||
{ title: '最后修改时间', dataIndex: 'lastModifyTime', key: 'lastModifyTime', width: 160, ellipsis: true },
|
||
{ title: '最后修改人', dataIndex: 'lastModifyBy', key: 'lastModifyBy', width: 90, ellipsis: true },
|
||
{ title: '操作', key: 'action', width: 120, fixed: 'right', render: function (_, r) {
|
||
return React.createElement(React.Fragment, null,
|
||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { message.info('跳转交车管理-查看页'); } }, '查看'),
|
||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { message.info('跳转交车管理-交车单'); } }, '交车单')
|
||
);
|
||
} }
|
||
];
|
||
|
||
// 历史记录：同列，操作仅 查看
|
||
var historyColumns = [
|
||
{ title: '预计交车时间', dataIndex: 'expectedDate', key: 'expectedDate', width: 220, ellipsis: true },
|
||
{ title: '合同编码', dataIndex: 'contractCode', key: 'contractCode', width: 150, ellipsis: true },
|
||
{ title: '项目名称', dataIndex: 'projectName', key: 'projectName', width: 150, ellipsis: true },
|
||
{ title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 160, ellipsis: true },
|
||
{ title: '交车区域', dataIndex: 'deliveryRegion', key: 'deliveryRegion', width: 120, ellipsis: true },
|
||
{ title: '交车地点', dataIndex: 'deliveryAddress', key: 'deliveryAddress', width: 200, ellipsis: true },
|
||
{ title: '交车数量', key: 'deliveryCount', width: 90, render: function (_, r) { return renderHistoryQuantity(r); } },
|
||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 160, ellipsis: true },
|
||
{ title: '创建人', dataIndex: 'createBy', key: 'createBy', width: 90, ellipsis: true },
|
||
{ title: '最后修改时间', dataIndex: 'lastModifyTime', key: 'lastModifyTime', width: 160, ellipsis: true },
|
||
{ title: '最后修改人', dataIndex: 'lastModifyBy', key: 'lastModifyBy', width: 90, ellipsis: true },
|
||
{ title: '操作', key: 'action', width: 80, fixed: 'right', render: function () {
|
||
return React.createElement(Button, { type: 'link', size: 'small', onClick: function () { message.info('跳转交车管理-查看页'); } }, '查看');
|
||
} }
|
||
];
|
||
|
||
var tablePagination = useMemo(function () {
|
||
return {
|
||
current: page,
|
||
pageSize: pageSize,
|
||
total: totalCount,
|
||
showSizeChanger: true,
|
||
showTotal: function (t) { return '共 ' + t + ' 条'; },
|
||
pageSizeOptions: ['10', '20', '50'],
|
||
onChange: function (p, size) { setPage(p); if (size !== pageSize) setPageSize(size); }
|
||
};
|
||
}, [page, pageSize, totalCount]);
|
||
|
||
var styles = {
|
||
page: { padding: '16px 24px 48px', backgroundColor: '#f5f5f5', minHeight: '100vh', fontSize: 14 },
|
||
breadcrumb: { marginBottom: 16, color: '#666' },
|
||
breadcrumbSep: { margin: '0 8px', color: '#999' },
|
||
card: { backgroundColor: '#fff', borderRadius: 8, marginBottom: 16, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', overflow: 'hidden' },
|
||
cardBody: { padding: '20px 24px' },
|
||
formRow: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' },
|
||
formItem: { marginBottom: 4 },
|
||
formLabel: { display: 'block', marginBottom: 4, color: '#333' }
|
||
};
|
||
|
||
var breadcrumbItems = [
|
||
{ title: '运维管理' },
|
||
{ title: '车辆业务' },
|
||
{ title: '交车管理' }
|
||
];
|
||
|
||
return React.createElement('div', { style: styles.page },
|
||
React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 } },
|
||
React.createElement(Breadcrumb, { items: breadcrumbItems }),
|
||
React.createElement(Button, { type: 'link', onClick: function () { setRequirementModalOpen(true); } }, '查看需求说明')
|
||
),
|
||
React.createElement(Card, { style: { marginBottom: 16 } },
|
||
React.createElement('div', { style: styles.cardBody },
|
||
React.createElement('div', { style: styles.formRow },
|
||
React.createElement('div', null,
|
||
React.createElement('div', { style: styles.formLabel }, '合同编码'),
|
||
React.createElement(Select, {
|
||
placeholder: '请输入或选择合同编码',
|
||
allowClear: true,
|
||
showSearch: true,
|
||
optionFilterProp: 'label',
|
||
value: filters.contractCode,
|
||
onChange: function (v) { setFilters(function (f) { var g = {}; for (var k in f) g[k] = f[k]; g.contractCode = v; return g; }); },
|
||
style: { width: '100%' },
|
||
options: contractCodeOptions
|
||
})
|
||
),
|
||
React.createElement('div', null,
|
||
React.createElement('div', { style: styles.formLabel }, '项目名称'),
|
||
React.createElement(Select, {
|
||
placeholder: '请输入或选择项目名称',
|
||
allowClear: true,
|
||
showSearch: true,
|
||
optionFilterProp: 'label',
|
||
value: filters.projectName,
|
||
onChange: function (v) { setFilters(function (f) { var g = {}; for (var k in f) g[k] = f[k]; g.projectName = v; return g; }); },
|
||
style: { width: '100%' },
|
||
options: projectNameOptions
|
||
})
|
||
),
|
||
React.createElement('div', null,
|
||
React.createElement('div', { style: styles.formLabel }, '客户名称'),
|
||
React.createElement(Select, {
|
||
placeholder: '请输入或选择客户名称',
|
||
allowClear: true,
|
||
showSearch: true,
|
||
optionFilterProp: 'label',
|
||
value: filters.customerName,
|
||
onChange: function (v) { setFilters(function (f) { var g = {}; for (var k in f) g[k] = f[k]; g.customerName = v; return g; }); },
|
||
style: { width: '100%' },
|
||
options: customerNameOptions
|
||
})
|
||
),
|
||
React.createElement('div', null,
|
||
React.createElement('div', { style: styles.formLabel }, '交车区域'),
|
||
React.createElement(Cascader, {
|
||
options: regionOptions,
|
||
placeholder: '请选择省-市',
|
||
allowClear: true,
|
||
style: { width: '100%' },
|
||
value: deliveryRegionValue,
|
||
onChange: function (value) {
|
||
var s;
|
||
if (value && value.length >= 2) {
|
||
var prov = regionOptions.find(function (r) { return r.value === value[0]; });
|
||
var city = prov && prov.children && prov.children.find(function (c) { return c.value === value[1]; });
|
||
s = prov && city ? prov.label + '-' + city.label : undefined;
|
||
} else { s = undefined; }
|
||
setFilters(function (f) { var g = {}; for (var k in f) g[k] = f[k]; g.deliveryRegion = s; return g; });
|
||
},
|
||
displayRender: function (labels) { return labels && labels.length ? labels.join(' / ') : ''; }
|
||
})
|
||
),
|
||
React.createElement('div', null,
|
||
React.createElement('div', { style: styles.formLabel }, '交车时间'),
|
||
React.createElement(RangePicker, {
|
||
style: { width: '100%' },
|
||
placeholder: ['请选择交车开始时间', '请选择交车结束时间'],
|
||
value: dateRangeValue,
|
||
onChange: onDateRangeChange
|
||
})
|
||
),
|
||
React.createElement('div', null,
|
||
React.createElement('div', { style: styles.formLabel }, '交车人'),
|
||
React.createElement(Select, {
|
||
placeholder: '请输入或选择交车人姓名',
|
||
allowClear: true,
|
||
showSearch: true,
|
||
optionFilterProp: 'label',
|
||
value: filters.deliveryPerson,
|
||
onChange: function (v) { setFilters(function (f) { var g = {}; for (var k in f) g[k] = f[k]; g.deliveryPerson = v; return g; }); },
|
||
style: { width: '100%' },
|
||
options: deliveryPersonOptions
|
||
})
|
||
)
|
||
),
|
||
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(Tabs, {
|
||
activeKey: activeTab,
|
||
onChange: function (k) { setActiveTab(k); setPage(1); },
|
||
tabBarExtraContent: React.createElement(Button, { onClick: handleExport }, '导出'),
|
||
items: [
|
||
{
|
||
key: 'pending',
|
||
label: '待处理',
|
||
children: React.createElement(Table, {
|
||
columns: pendingColumns,
|
||
dataSource: displayPending,
|
||
rowKey: 'id',
|
||
pagination: tablePagination,
|
||
scroll: { x: 1680 },
|
||
size: 'middle'
|
||
})
|
||
},
|
||
{
|
||
key: 'history',
|
||
label: '历史记录',
|
||
children: React.createElement(Table, {
|
||
columns: historyColumns,
|
||
dataSource: displayHistory,
|
||
rowKey: 'id',
|
||
pagination: tablePagination,
|
||
scroll: { x: 1680 },
|
||
size: 'middle'
|
||
})
|
||
}
|
||
]
|
||
})
|
||
),
|
||
React.createElement(Modal, {
|
||
title: '需求说明',
|
||
open: requirementModalOpen[0],
|
||
onCancel: function () { setRequirementModalOpen(false); },
|
||
footer: React.createElement(Button, { onClick: function () { setRequirementModalOpen(false); } }, '关闭'),
|
||
width: 640,
|
||
destroyOnClose: true
|
||
}, React.createElement('div', { style: { maxHeight: 560, overflowY: 'auto', whiteSpace: 'pre-wrap', lineHeight: 1.6, fontSize: 13 } }, requirementDocContent))
|
||
);
|
||
};
|
||
|
||
if (typeof window !== 'undefined') {
|
||
window.Component = Component;
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
var rootEl = document.getElementById('root');
|
||
if (rootEl && window.ReactDOM && window.React) {
|
||
var root = ReactDOM.createRoot(rootEl);
|
||
root.render(React.createElement(Component));
|
||
}
|
||
});
|
||
} else {
|
||
var rootEl = document.getElementById('root');
|
||
if (rootEl && window.ReactDOM && window.React) {
|
||
var root = ReactDOM.createRoot(rootEl);
|
||
root.render(React.createElement(Component));
|
||
}
|
||
}
|
||
}
|