// 【重要】必须使用 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\n1.面包屑:\n1.1.运维管理-车辆业务-交车管理\n\n2.筛选:\n2.1.合同编码:选择器,默认为所有合同;提示信息为:请输入或选择合同编码,支持从输入框输入内容进行模糊搜索,下拉显示结果;\n2.2.项目名称:选择器,默认为所有项目;提示信息为:请输入或选择项目名称,支持从输入框输入内容进行模糊搜索,下拉显示结果;\n3.3.客户名称:选择器,默认为所有客户;提示信息为:请输入或选择客户名称,支持从输入框输入内容进行模糊搜索,下拉显示结果;\n3.4.交车区域:地区选择器,支持省-市2级筛选;\n3.5.交车时间:日期选择器,默认提示信息为:请选择交车开始时间 请选择交车结束时间,单输入框,双日历,支持时间段选择,精确至天,格式为:YYYY-MM-DD - YYYY-MM-DD;\n3.6.交车人:选择器,默认为所有交车人;提示信息为:请输入或选择交车人姓名,支持从输入框输入内容进行模糊搜索,下拉显示结果;\n3.7.查询:点击查询,根据单个或多个筛选条件(且)联动表格进行查询;\n3.8.重置:点击清空查询条件至默认;\n\n3.列表:\n分为两个tab:待处理、历史记录\n3.1.待处理:显示以下字段:\n3.1.1.预计交车时间:支持单日及开始-结束日期两种方式,格式为:YYYY-MM-DD及YYYY-MM-DD至YYYY-MM-DD,取自对应交车任务中预计交车时间;\n3.1.2.任务发布时间:显示交车任务单生成时间,格式为:YYYY-MM-DD HH:MM;\n3.1.3.合同编码:显示租赁/自营合同编码;\n3.1.4.项目名称:显示租赁/自营合同项目名称;\n3.1.5.客户名称:显示租赁/自营合同客户名称;\n3.1.6.交车数量:显示交车数量,重点色显示,点击弹出气泡卡片,列表显示:车辆类型、品牌、型号、车牌号;\n 3.1.6.1.车辆类型:显示车辆类型;\n 3.1.6.2.品牌:显示车辆品牌;\n 3.1.6.3.型号:显示车辆型号;\n 3.1.6.4.车牌号:显示交车车辆车牌号,如果该车还未交车则显示为-;\n3.1.7.交车区域:显示交车区域,交车区域来自车辆租赁合同-交车区域,格式为省-市;\n3.1.8.交车地点:显示交车地点,交车地点来自车辆租赁合同-交车地点,显示详细地址;\n3.1.9.操作:查看、交车;\n 3.1.8.1.交车:点击跳转交车单页面;\n\n3.2.历史记录:显示以下字段:\n3.2.1.预计交车时间:支持单日及开始-结束日期两种方式,格式为:YYYY-MM-DD及YYYY-MM-DD至YYYY-MM-DD,取自对应交车任务中预计交车时间;\n3.2.2.任务发布时间:显示交车任务单生成时间,格式为:YYYY-MM-DD HH:MM;\n3.2.3.交车完成时间:显示交车单完成时间,格式为:YYYY-MM-DD HH:MM;\n3.2.4.交车人:显示交车单最终提交用户;\n3.2.5.合同编码:显示租赁/自营合同编码;\n3.2.6.项目名称:显示租赁/自营合同项目名称;\n3.2.7.客户名称:显示租赁/自营合同客户名称;\n3.2.8.交车数量:显示交车数,重点色显示,点击弹出气泡卡片,列表显示:车辆类型、品牌、型号、车牌号、实际交车日期、交车人;\n 3.2.8.1.车辆类型:显示车辆类型;\n 3.2.8.2.品牌:显示车辆品牌;\n 3.2.8.3.型号:显示车辆型号;\n 3.2.8.4.车牌号:显示交车车辆车牌号,如果该车还未交车则显示为-;\n 3.2.8.5.实际交车日期:显示实际交车日期,格式为YYYY-MM-DD,如该车还未交车则显示为-;\n 3.2.8.6.交车人:显示实际交车人用户姓名,如该车还未还车则显示为-;\n3.2.9.交车区域:显示交车区域,交车区域来自车辆租赁合同-交车区域,格式为省-市;\n3.2.10.交车地点:显示交车地点,交车地点来自车辆租赁合同-交车地点,显示详细地址;\n3.2.11.操作:查看;\n 3.2.11.1.查看:点击跳转查看交车单页面;'; // 交车区域:省-市 二级 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(10条样例) var pendingListState = useState([ { id: 'd1', expectedDate: '2025-02-28', taskPublishTime: '2025-02-20 09:00', contractCode: 'HT-ZL-2025-001', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', deliveryCount: 2, vehicleList: [{ vehicleType: '厢式货车', brand: '东风', model: 'DFH1180', plateNo: '京A12345' }, { vehicleType: '平板货车', brand: '福田', model: 'BJ1180', plateNo: '-' }], deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '嘉兴市南湖区科技大道1号' }, { id: 'd2', expectedDate: '2025-03-01 至 2025-03-05', taskPublishTime: '2025-02-21 10:30', contractCode: 'HT-ZL-2025-002', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryCount: 1, vehicleList: [{ vehicleType: '厢式货车', brand: '江淮', model: 'HFC1180', plateNo: '-' }], deliveryRegion: '上海市-上海市', deliveryAddress: '浦东新区张江高科技园区' }, { id: 'd3', expectedDate: '2025-02-25', taskPublishTime: '2025-02-18 14:00', contractCode: 'HT-ZL-2025-003', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', deliveryCount: 3, vehicleList: [{ vehicleType: '栏板货车', brand: '重汽', model: 'ZZ1180', plateNo: '浙A10001' }, { vehicleType: '厢式货车', brand: '东风', model: 'DFH1190', plateNo: '-' }, { vehicleType: '平板货车', brand: '福田', model: 'BJ1190', plateNo: '-' }], deliveryRegion: '浙江省-杭州市', deliveryAddress: '余杭区未来科技城' }, { id: 'd4', expectedDate: '2025-03-08', taskPublishTime: '2025-02-25 08:15', contractCode: 'HT-ZL-2025-004', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', deliveryCount: 1, vehicleList: [{ vehicleType: '厢式货车', brand: '重汽', model: 'ZZ1160', plateNo: '-' }], deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '嘉兴市秀洲区洪兴西路288号' }, { id: 'd5', expectedDate: '2025-03-10 至 2025-03-12', taskPublishTime: '2025-02-26 11:20', contractCode: 'HT-ZL-2025-005', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryCount: 2, vehicleList: [{ vehicleType: '平板货车', brand: '福田', model: 'BJ1180', plateNo: '-' }, { vehicleType: '栏板货车', brand: '东风', model: 'DFH1160', plateNo: '-' }], deliveryRegion: '上海市-上海市', deliveryAddress: '闵行区莘庄工业区申富路669号' }, { id: 'd6', expectedDate: '2025-03-15', taskPublishTime: '2025-03-01 09:30', contractCode: 'HT-ZL-2025-006', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', deliveryCount: 4, vehicleList: [{ vehicleType: '厢式货车', brand: '江淮', model: 'HFC1180', plateNo: '-' }, { vehicleType: '厢式货车', brand: '东风', model: 'DFH1180', plateNo: '-' }, { vehicleType: '平板货车', brand: '福田', model: 'BJ1190', plateNo: '-' }, { vehicleType: '栏板货车', brand: '重汽', model: 'ZZ1180', plateNo: '-' }], deliveryRegion: '浙江省-杭州市', deliveryAddress: '萧山区市心北路108号' }, { id: 'd7', expectedDate: '2025-03-18', taskPublishTime: '2025-03-03 14:00', contractCode: 'HT-ZL-2025-007', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', deliveryCount: 1, vehicleList: [{ vehicleType: '平板货车', brand: '福田', model: 'BJ1180', plateNo: '浙F80088' }], deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '嘉兴市经开区昌盛路1号' }, { id: 'd8', expectedDate: '2025-03-20 至 2025-03-22', taskPublishTime: '2025-03-05 10:00', contractCode: 'HT-ZL-2025-008', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryCount: 3, vehicleList: [{ vehicleType: '厢式货车', brand: '江淮', model: 'HFC1190', plateNo: '-' }, { vehicleType: '栏板货车', brand: '重汽', model: 'ZZ1190', plateNo: '-' }, { vehicleType: '厢式货车', brand: '东风', model: 'DFH1190', plateNo: '-' }], deliveryRegion: '上海市-上海市', deliveryAddress: '宝山区沪太路5008号' }, { id: 'd9', expectedDate: '2025-03-25', taskPublishTime: '2025-03-08 08:45', contractCode: 'HT-ZL-2025-009', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', deliveryCount: 2, vehicleList: [{ vehicleType: '栏板货车', brand: '东风', model: 'DFH1160', plateNo: '-' }, { vehicleType: '平板货车', brand: '福田', model: 'BJ1180', plateNo: '浙A20002' }], deliveryRegion: '浙江省-杭州市', deliveryAddress: '滨江区网商路699号' }, { id: 'd10', expectedDate: '2025-03-28', taskPublishTime: '2025-03-10 16:20', contractCode: 'HT-ZL-2025-010', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', deliveryCount: 1, vehicleList: [{ vehicleType: '厢式货车', brand: '重汽', model: 'ZZ1180', plateNo: '-' }], deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '嘉兴市南湖区广益路与由拳路交叉口' } ]); var pendingList = pendingListState[0]; // 历史记录 mock(10条样例,含交车完成时间、交车人,vehicleList 含实际交车日期、交车人) var historyListState = useState([ { id: 'h1', expectedDate: '2025-02-15', taskPublishTime: '2025-02-10 09:00', completeTime: '2025-02-15 14:30', deliveryPerson: '张三', contractCode: 'HT-ZL-2024-001', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', 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: '李四' }], deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '嘉兴市南湖区科技大道1号' }, { id: 'h2', expectedDate: '2025-02-10 至 2025-02-12', taskPublishTime: '2025-02-05 10:00', completeTime: '2025-02-12 11:00', deliveryPerson: '王五', contractCode: 'HT-ZL-2024-002', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryCount: 1, vehicleList: [{ vehicleType: '厢式货车', brand: '江淮', model: 'HFC1180', plateNo: '沪A20002', actualDate: '2025-02-11', deliveryPerson: '王五' }], deliveryRegion: '上海市-上海市', deliveryAddress: '浦东新区张江路100号' }, { id: 'h3', expectedDate: '2025-02-18', taskPublishTime: '2025-02-12 08:30', completeTime: '2025-02-18 15:00', deliveryPerson: '张三', contractCode: 'HT-ZL-2024-003', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', 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: '王五' }], deliveryRegion: '浙江省-杭州市', deliveryAddress: '余杭区未来科技城' }, { id: 'h4', expectedDate: '2025-02-20', taskPublishTime: '2025-02-14 11:00', completeTime: '2025-02-20 10:15', deliveryPerson: '李四', contractCode: 'HT-ZL-2024-004', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', deliveryCount: 1, vehicleList: [{ vehicleType: '厢式货车', brand: '江淮', model: 'HFC1180', plateNo: '浙F60001', actualDate: '2025-02-20', deliveryPerson: '李四' }], deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '嘉兴市秀洲区洪兴西路288号' }, { id: 'h5', expectedDate: '2025-02-22 至 2025-02-24', taskPublishTime: '2025-02-16 09:45', completeTime: '2025-02-24 16:30', deliveryPerson: '王五', contractCode: 'HT-ZL-2024-005', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', 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: '张三' }], deliveryRegion: '上海市-上海市', deliveryAddress: '闵行区莘庄工业区申富路669号' }, { id: 'h6', expectedDate: '2025-02-25', taskPublishTime: '2025-02-18 14:20', completeTime: '2025-02-25 11:00', deliveryPerson: '张三', contractCode: 'HT-ZL-2024-006', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', deliveryCount: 1, vehicleList: [{ vehicleType: '厢式货车', brand: '重汽', model: 'ZZ1160', plateNo: '浙A40001', actualDate: '2025-02-25', deliveryPerson: '张三' }], deliveryRegion: '浙江省-杭州市', deliveryAddress: '萧山区市心北路108号' }, { id: 'h7', expectedDate: '2025-02-28', taskPublishTime: '2025-02-20 10:10', completeTime: '2025-02-28 14:45', deliveryPerson: '李四', contractCode: 'HT-ZL-2024-007', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', 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: '王五' }], deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '嘉兴市经开区昌盛路1号' }, { id: 'h8', expectedDate: '2025-03-02', taskPublishTime: '2025-02-22 08:00', completeTime: '2025-03-02 09:30', deliveryPerson: '王五', contractCode: 'HT-ZL-2024-008', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryCount: 1, vehicleList: [{ vehicleType: '栏板货车', brand: '江淮', model: 'HFC1160', plateNo: '沪A50001', actualDate: '2025-03-02', deliveryPerson: '王五' }], deliveryRegion: '上海市-上海市', deliveryAddress: '宝山区沪太路5008号' }, { id: 'h9', expectedDate: '2025-03-05 至 2025-03-07', taskPublishTime: '2025-02-25 15:30', completeTime: '2025-03-07 13:20', deliveryPerson: '张三', contractCode: 'HT-ZL-2024-009', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', 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: '李四' }], deliveryRegion: '浙江省-杭州市', deliveryAddress: '滨江区网商路699号' }, { id: 'h10', expectedDate: '2025-03-10', taskPublishTime: '2025-03-01 11:00', completeTime: '2025-03-10 10:00', deliveryPerson: '李四', contractCode: 'HT-ZL-2024-010', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', deliveryCount: 1, vehicleList: [{ vehicleType: '平板货车', brand: '福田', model: 'BJ1190', plateNo: '浙F90001', actualDate: '2025-03-10', deliveryPerson: '李四' }], deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '嘉兴市南湖区广益路与由拳路交叉口' } ]); 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; }); 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.completeTime || '').slice(0, 10); return d >= appliedFilters.dateStart; }); if (appliedFilters.dateEnd) list = list.filter(function (r) { var d = (r.completeTime || '').slice(0, 10); return d <= appliedFilters.dateEnd; }); if (appliedFilters.deliveryPerson) list = list.filter(function (r) { return (r.deliveryPerson || '').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) { if (activeTab === 'pending') { return [r.expectedDate, r.taskPublishTime, r.contractCode, r.projectName, r.customerName, r.deliveryCount, r.deliveryRegion, r.deliveryAddress]; } return [r.expectedDate, r.taskPublishTime, r.completeTime, r.deliveryPerson, r.contractCode, r.projectName, r.customerName, r.deliveryCount, r.deliveryRegion, r.deliveryAddress]; }; if (activeTab === 'pending') { headers = ['预计交车时间', '任务发布时间', '合同编码', '项目名称', '客户名称', '交车数量', '交车区域', '交车地点']; } else { headers = ['预计交车时间', '任务发布时间', '交车完成时间', '交车人', '合同编码', '项目名称', '客户名称', '交车数量', '交车区域', '交车地点']; } 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' }; function renderPendingQuantity(record) { var list = record.vehicleList || []; var content = React.createElement('div', { style: { padding: 8, minWidth: 320 } }, 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('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 || '-') ); }) ) ) ); return React.createElement(Popover, { content: content, title: null }, React.createElement('span', { style: { color: '#1890ff', cursor: 'pointer', fontWeight: 600 } }, record.deliveryCount + ' 辆') ); } 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: 260, ellipsis: true }, { title: '任务发布时间', dataIndex: 'taskPublishTime', key: 'taskPublishTime', width: 160, ellipsis: true }, { title: '合同编码', dataIndex: 'contractCode', key: 'contractCode', width: 160, ellipsis: true }, { title: '项目名称', dataIndex: 'projectName', key: 'projectName', width: 160, ellipsis: true }, { title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 180, ellipsis: true }, { title: '交车数量', key: 'deliveryCount', width: 100, render: function (_, r) { return renderPendingQuantity(r); } }, { title: '交车区域', dataIndex: 'deliveryRegion', key: 'deliveryRegion', width: 130, ellipsis: true }, { title: '交车地点', dataIndex: 'deliveryAddress', key: 'deliveryAddress', width: 220, ellipsis: true }, { title: '操作', key: 'action', width: 80, fixed: 'right', render: function (_, r) { return React.createElement(Button, { type: 'link', size: 'small', onClick: function () { message.info('跳转查看交车单'); } }, '查看'); } } ]; var historyColumns = [ { title: '预计交车时间', dataIndex: 'expectedDate', key: 'expectedDate', width: 260, ellipsis: true }, { title: '任务发布时间', dataIndex: 'taskPublishTime', key: 'taskPublishTime', width: 160, ellipsis: true }, { title: '交车完成时间', dataIndex: 'completeTime', key: 'completeTime', width: 160, ellipsis: true }, { title: '交车人', dataIndex: 'deliveryPerson', key: 'deliveryPerson', width: 100, ellipsis: true }, { title: '合同编码', dataIndex: 'contractCode', key: 'contractCode', width: 160, ellipsis: true }, { title: '项目名称', dataIndex: 'projectName', key: 'projectName', width: 160, ellipsis: true }, { title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 180, ellipsis: true }, { title: '交车数量', key: 'deliveryCount', width: 100, render: function (_, r) { return renderHistoryQuantity(r); } }, { title: '交车区域', dataIndex: 'deliveryRegion', key: 'deliveryRegion', width: 130, ellipsis: true }, { title: '交车地点', dataIndex: 'deliveryAddress', key: 'deliveryAddress', width: 220, 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: 1490 }, size: 'middle' }) }, { key: 'history', label: '历史记录', children: React.createElement(Table, { columns: historyColumns, dataSource: displayHistory, rowKey: 'id', pagination: tablePagination, scroll: { x: 1650 }, 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)); } } }