// 【重要】必须使用 const Component 作为组件变量名 // 调拨管理 - 车辆资产管理后台模块 // 设计变量参考 Arco Design Token: https://arco.design/react/docs/token var ARCO_TOKEN = { primary: '#165DFF', primaryHover: '#4080FF', primaryActive: '#0E42D2', danger: '#F53F3F', success: '#00B42A', warning: '#FF7D00', link: '#165DFF', neutral1: '#FFFFFF', neutral2: '#F7F8FA', neutral3: '#F2F3F5', neutral4: '#E5E6EB', neutral5: '#C9CDD4', neutral6: '#86909C', neutral7: '#4E5969', neutral8: '#1D2129', border: '#E5E6EB', borderSecondary: '#C9CDD4', fill: '#F2F3F5', fillSecondary: '#F7F8FA', shadowLight: '0 1px 2px rgba(0,0,0,0.05)', shadowMedium: '0 2px 8px rgba(0,0,0,0.08)', radiusSmall: '2px', radiusMedium: '4px', radiusLarge: '8px', spacing4: '4px', spacing8: '8px', spacing12: '12px', spacing16: '16px', spacing24: '24px', fontSize14: '14px', fontSize16: '16px', fontFamily: '"PingFang SC", "苹方-简", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif' }; var APPROVAL_STATUS = [ { value: 'pending_submit', label: '待提交' }, { value: 'pending_approval', label: '待审批' }, { value: 'approving', label: '审批中' }, { value: 'completed', label: '审批完成' }, { value: 'rejected', label: '审批驳回' }, { value: 'withdrawn', label: '撤回' } ]; var TRANSFER_METHODS = [ { value: 'third_party', label: '第三方运输' }, { value: 'driver', label: '司机驾驶' } ]; var provinceList = [ { code: 'gd', name: '广东省' }, { code: 'zj', name: '浙江省' }, { code: 'bj', name: '北京市' } ]; var cityMap = { gd: [{ code: 'gz', name: '广州市' }, { code: 'sz', name: '深圳市' }], zj: [{ code: 'hz', name: '杭州市' }, { code: 'nb', name: '宁波市' }], bj: [{ code: 'bj', name: '北京市' }] }; // 运维部用户(操作人、创建人来源) var mockOpsUsers = [ { id: 'u1', name: '张明', dept: '运维部' }, { id: 'u2', name: '王芳', dept: '运维部' }, { id: 'u3', name: '李华', dept: '运维部' }, { id: 'u4', name: '赵强', dept: '运维部' }, { id: 'u5', name: '陈静', dept: '运维部' } ]; // 库存车辆(含车辆类型、品牌、型号、停车场、氢量单位等,用于反写) var mockStockVehicles = [ { id: 'v1', plateNo: '粤A12345', status: '库存', vehicleType: '轿车', brand: '比亚迪', model: '秦', departParking: '天河智慧停车场', h2Unit: '%' }, { id: 'v2', plateNo: '粤A67890', status: '库存', vehicleType: '轿车', brand: '特斯拉', model: 'Model 3', departParking: '南山科技园停车场', h2Unit: 'MPa' }, { id: 'v3', plateNo: '浙A11111', status: '库存', vehicleType: 'SUV', brand: '小鹏', model: 'P7', departParking: '西湖景区停车场', h2Unit: 'KG' }, { id: 'v4', plateNo: '浙B22222', status: '库存', vehicleType: '轿车', brand: '蔚来', model: 'ET5', departParking: '宁波江北停车场', h2Unit: '%' }, { id: 'v5', plateNo: '京A88888', status: '库存', vehicleType: 'MPV', brand: '理想', model: 'L9', departParking: '朝阳区停车场', h2Unit: 'MPa' }, { id: 'v6', plateNo: '粤B11111', status: '库存', vehicleType: '轿车', brand: '比亚迪', model: '汉', departParking: '福田停车场', h2Unit: 'KG' } ]; // 审批节点(查看时步骤条) var mockApprovalSteps = [ { key: 'node1', name: '区域负责人审批' }, { key: 'node2', name: '运营负责人审批' }, { key: 'node3', name: '财务确认' } ]; const Component = function () { // 视图:list | add | edit | view var _sv = React.useState('list'); var currentView = _sv[0]; var setCurrentView = _sv[1]; // Tab:in_progress | history var _tab = React.useState('in_progress'); var listTab = _tab[0]; var setListTab = _tab[1]; // 筛选 var _fd = React.useState(''); var filterDateStart = _fd[0]; var setFilterDateStart = _fd[1]; var _fe = React.useState(''); var filterDateEnd = _fe[0]; var setFilterDateEnd = _fe[1]; var _fo = React.useState(''); var filterOperator = _fo[0]; var setFilterOperator = _fo[1]; var _frdStart = React.useState(''); var filterReceiveDateStart = _frdStart[0]; var setFilterReceiveDateStart = _frdStart[1]; var _frdEnd = React.useState(''); var filterReceiveDateEnd = _frdEnd[0]; var setFilterReceiveDateEnd = _frdEnd[1]; var _frc = React.useState(''); var filterReceiver = _frc[0]; var setFilterReceiver = _frc[1]; var _fpl = React.useState(''); var filterPlateNo = _fpl[0]; var setFilterPlateNo = _fpl[1]; var _fdp = React.useState(''); var filterDepartProvince = _fdp[0]; var setFilterDepartProvince = _fdp[1]; var _fdc = React.useState(''); var filterDepartCity = _fdc[0]; var setFilterDepartCity = _fdc[1]; var _ftp = React.useState(''); var filterTransferProvince = _ftp[0]; var setFilterTransferProvince = _ftp[1]; var _ftc = React.useState(''); var filterTransferCity = _ftc[0]; var setFilterTransferCity = _ftc[1]; var _fm = React.useState(''); var filterMethod = _fm[0]; var setFilterMethod = _fm[1]; var _fas = React.useState(''); var filterApprovalStatus = _fas[0]; var setFilterApprovalStatus = _fas[1]; // 已应用的筛选条件(仅点击查询后更新,列表按此筛选) var _applied = React.useState({}); var appliedFilters = _applied[0]; var setAppliedFilters = _applied[1]; // 筛选下拉展开 var _ao = React.useState(false); var filterOperatorOpen = _ao[0]; var setFilterOperatorOpen = _ao[1]; var _arc = React.useState(false); var filterReceiverOpen = _arc[0]; var setFilterReceiverOpen = _arc[1]; var _ap = React.useState(false); var filterPlateOpen = _ap[0]; var setFilterPlateOpen = _ap[1]; var _cd = React.useState(false); var filterCascaderDepartOpen = _cd[0]; var setFilterCascaderDepartOpen = _cd[1]; var _ct = React.useState(false); var filterCascaderTransferOpen = _ct[0]; var setFilterCascaderTransferOpen = _ct[1]; var _drOpen = React.useState(false); var filterDateRangeOpen = _drOpen[0]; var setFilterDateRangeOpen = _drOpen[1]; var _drRecOpen = React.useState(false); var filterReceiveDateRangeOpen = _drRecOpen[0]; var setFilterReceiveDateRangeOpen = _drRecOpen[1]; function getInitialViewMonth(valueStr) { if (valueStr && /^\d{4}-\d{2}-\d{2}$/.test(valueStr)) return valueStr.substring(0, 7); var d = new Date(); return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0'); } var _drViewL = React.useState(''); var filterDateRangeViewLeft = _drViewL[0]; var setFilterDateRangeViewLeft = _drViewL[1]; var _drViewR = React.useState(''); var filterDateRangeViewRight = _drViewR[0]; var setFilterDateRangeViewRight = _drViewR[1]; var _drRecViewL = React.useState(''); var filterReceiveDateRangeViewLeft = _drRecViewL[0]; var setFilterReceiveDateRangeViewLeft = _drRecViewL[1]; var _drRecViewR = React.useState(''); var filterReceiveDateRangeViewRight = _drRecViewR[0]; var setFilterReceiveDateRangeViewRight = _drRecViewR[1]; // 分页 var _cp = React.useState(1); var currentPage = _cp[0]; var setCurrentPage = _cp[1]; var _ps = React.useState(20); var pageSize = _ps[0]; var setPageSize = _ps[1]; // 调拨记录列表:每条主记录含 lines(按车牌号展开,每车牌一行),hasReceiveRecord 表示是否已补充接收 // 进行中 10 条(20 行),默认每页 20 条,第一页同时展示「接收记录」「编辑」「撤回」供开发参考 var _mockList = React.useState((function () { var regions = [ { p: 'gd', c: 'gz', label: '广东省-广州市' }, { p: 'gd', c: 'sz', label: '广东省-深圳市' }, { p: 'zj', c: 'hz', label: '浙江省-杭州市' }, { p: 'zj', c: 'nb', label: '浙江省-宁波市' }, { p: 'bj', c: 'bj', label: '北京市-北京市' } ]; var users = [{ id: 'u1', name: '张明' }, { id: 'u2', name: '王芳' }, { id: 'u3', name: '李华' }, { id: 'u4', name: '赵强' }, { id: 'u5', name: '陈静' }]; var vehicles = [ { plateNo: '粤A12345', vehicleType: '轿车', brand: '比亚迪', model: '秦', departParking: '天河智慧停车场', h2Unit: '%' }, { plateNo: '粤A67890', vehicleType: '轿车', brand: '特斯拉', model: 'Model 3', departParking: '南山科技园停车场', h2Unit: 'MPa' }, { plateNo: '浙A11111', vehicleType: 'SUV', brand: '小鹏', model: 'P7', departParking: '西湖景区停车场', h2Unit: 'KG' }, { plateNo: '浙B22222', vehicleType: '轿车', brand: '蔚来', model: 'ET5', departParking: '宁波江北停车场', h2Unit: '%' }, { plateNo: '京A88888', vehicleType: 'MPV', brand: '理想', model: 'L9', departParking: '朝阳区停车场', h2Unit: 'MPa' }, { plateNo: '粤B11111', vehicleType: '轿车', brand: '比亚迪', model: '汉', departParking: '福田停车场', h2Unit: 'KG' } ]; var reasons = ['区域调配需求', '司机驾驶调拨', '维修后回调', '新车投放', '租赁到期回调']; var carriers = [{ name: '顺丰物流', contact: '400-111-2222' }, { name: '德邦物流', contact: '95353' }]; var list = []; var tid = 1; function makeTransfer(inProgress, hasReceive, count) { for (var c = 0; c < count; c++) { var status = inProgress ? ['pending_submit', 'pending_approval', 'approving', 'rejected', 'withdrawn'][tid % 5] : 'completed'; var hasRec = inProgress ? false : hasReceive; var dep = regions[tid % regions.length]; var trans = regions[(tid + 1) % regions.length]; var u = users[tid % users.length]; var d = '2025-' + String((tid % 12) + 1).padStart(2, '0') + '-' + String((tid % 20) + 1).padStart(2, '0'); var createTime = d + ' ' + String(9 + (tid % 8)).padStart(2, '0') + ':' + (tid % 2 ? '15' : '30'); var lineCount = 2; var lines = []; for (var L = 0; L < lineCount; L++) { var v = vehicles[(tid + L) % vehicles.length]; lines.push({ plateNo: v.plateNo, vehicleType: v.vehicleType, brand: v.brand, model: v.model, departParking: v.departParking, departMileage: 1000 + tid * 100 + L * 50, departH2: (60 + tid + L) + (v.h2Unit === 'KG' ? '' : v.h2Unit), departH2Unit: v.h2Unit, departElec: 80 + tid + L, receiveMileage: hasRec ? 1100 + tid * 100 + L * 50 : null, receiveH2: hasRec ? (65 + tid + L) + v.h2Unit : null, receiveElec: hasRec ? 85 + tid + L : null, receiveParking: hasRec ? '抵达停车场' + tid : null, receiverName: hasRec ? users[(tid + 1) % users.length].name : null }); } list.push({ id: 't' + tid, transferDate: d, departProvince: dep.p, departCity: dep.c, departLabel: dep.label, operatorId: u.id, operatorName: u.name, transferProvince: trans.p, transferCity: trans.c, transferLabel: trans.label, transferMethod: tid % 2 ? 'third_party' : 'driver', transferReason: reasons[tid % reasons.length], carrierName: carriers[tid % 2].name, carrierContact: carriers[tid % 2].contact, approvalStatus: status, hasReceiveRecord: hasRec, receiveDate: hasRec ? '2025-' + String((tid % 12) + 1).padStart(2, '0') + '-' + String((tid % 15) + 10).padStart(2, '0') : '', receiverId: hasRec ? users[(tid + 1) % users.length].id : '', receiverName: hasRec ? users[(tid + 1) % users.length].name : '', createTime: createTime, lines: lines }); tid++; } } makeTransfer(false, false, 2); // 进行中:审批完成但未补充接收(2 条,排在最前) makeTransfer(true, false, 18); // 进行中:待提交/待审批/审批中/驳回/撤回(共 20 条进行中) makeTransfer(false, true, 20); // 历史记录:审批完成且已补充接收(20 条) return list; }())); var mockTransferList = _mockList[0]; var setMockTransferList = _mockList[1]; // 新增/编辑表单(编辑、查看、接收仍用 formData) var defaultForm = { transferDate: '', receiveDate: '', operatorId: '', operatorName: '', selectedVehicleIds: [], transferMethod: '', transferReason: '', departProvince: '', departCity: '', transferProvince: '', transferCity: '', carrierName: '', carrierContact: '' }; var _form = React.useState(defaultForm); var formData = _form[0]; var setFormData = _form[1]; // 新增页专用:上方 7 项 + 下方可编辑行表 var defaultAddForm = { transferDate: '', departProvince: '', departCity: '', transferProvince: '', transferCity: '', transferMethod: '', transferReason: '', carrierName: '', carrierContact: '' }; var _addForm = React.useState(defaultAddForm); var addFormData = _addForm[0]; var setAddFormData = _addForm[1]; var addFormLineIdRef = React.useRef(0); function createEmptyAddLine() { addFormLineIdRef.current = (addFormLineIdRef.current || 0) + 1; return { rowId: 'addRow-' + addFormLineIdRef.current, vehicleId: '', plateNo: '', vehicleType: '', brand: '', model: '', departParking: '', departMileage: '', departH2: '', departH2Unit: '', departElec: '' }; } var _addLines = React.useState(function () { return [{ rowId: 'addRow-1', vehicleId: '', plateNo: '', vehicleType: '', brand: '', model: '', departParking: '', departMileage: '', departH2: '', departH2Unit: '', departElec: '' }]; }); var addFormLines = _addLines[0]; var setAddFormLines = _addLines[1]; var _plateOpen = React.useState(null); var plateSelectOpenRowId = _plateOpen[0]; var setPlateSelectOpenRowId = _plateOpen[1]; var _plateKw = React.useState(''); var plateSearchKeyword = _plateKw[0]; var setPlateSearchKeyword = _plateKw[1]; var _addDepartCascader = React.useState(false); var addDepartCascaderOpen = _addDepartCascader[0]; var setAddDepartCascaderOpen = _addDepartCascader[1]; var _addAcceptCascader = React.useState(false); var addAcceptCascaderOpen = _addAcceptCascader[0]; var setAddAcceptCascaderOpen = _addAcceptCascader[1]; // 编辑页专用:行表 + 车牌选择展开态(与新增页结构一致) var editFormLineIdRef = React.useRef(0); function createEmptyEditLine() { editFormLineIdRef.current = editFormLineIdRef.current + 1; return { rowId: 'editRow-' + editFormLineIdRef.current, vehicleId: '', plateNo: '', vehicleType: '', brand: '', model: '', departParking: '', departMileage: '', departH2: '', departH2Unit: '', departElec: '', receiveMileage: '', receiveH2: '', receiveElec: '' }; } function buildEditFormLinesFromRecord(transfer) { if (!transfer || !transfer.lines || !transfer.lines.length) return [createEmptyEditLine()]; editFormLineIdRef.current = Math.max(editFormLineIdRef.current || 0, transfer.lines.length); return transfer.lines.map(function (line, idx) { var v = mockStockVehicles.find(function (x) { return x.plateNo === line.plateNo; }); return { rowId: 'editRow-' + (idx + 1), vehicleId: v ? v.id : (line.vehicleId || ''), plateNo: line.plateNo || '', vehicleType: line.vehicleType || (v && v.vehicleType) || '', brand: line.brand || (v && v.brand) || '', model: line.model || (v && v.model) || '', departParking: line.departParking || (v && v.departParking) || '', departMileage: line.departMileage != null && line.departMileage !== '' ? line.departMileage : '', departH2: line.departH2 != null && line.departH2 !== '' ? line.departH2 : '', departH2Unit: (line.departH2Unit || (v && v.h2Unit) || ''), departElec: line.departElec != null && line.departElec !== '' ? line.departElec : '', receiveMileage: line.receiveMileage != null && line.receiveMileage !== '' ? line.receiveMileage : '', receiveH2: line.receiveH2 != null && line.receiveH2 !== '' ? line.receiveH2 : '', receiveElec: line.receiveElec != null && line.receiveElec !== '' ? line.receiveElec : '' }; }); } var _editFormLines = React.useState([]); var editFormLines = _editFormLines[0]; var setEditFormLines = _editFormLines[1]; var _editPlateOpen = React.useState(null); var editPlateSelectOpenRowId = _editPlateOpen[0]; var setEditPlateSelectOpenRowId = _editPlateOpen[1]; var _editPlateKw = React.useState(''); var editPlateSearchKeyword = _editPlateKw[0]; var setEditPlateSearchKeyword = _editPlateKw[1]; function updateEditLine(rowId, updates) { setEditFormLines(function (prev) { return prev.map(function (l) { if (l.rowId !== rowId) return l; var next = {}; for (var k in l) next[k] = l[k]; for (var k in updates) next[k] = updates[k]; return next; }); }); } function getEditPagePlateOptions(rowId) { var usedElsewhere = function (v) { return editFormLines.some(function (l) { return l.rowId !== rowId && l.vehicleId === v.id; }); }; var list = mockStockVehicles.filter(function (v) { return !usedElsewhere(v); }); var kw = (editPlateSearchKeyword || '').trim(); if (kw) list = list.filter(function (v) { return (v.plateNo || '').indexOf(kw) >= 0; }); return list; } // 编辑/查看 当前记录 var _edit = React.useState(null); var editRecord = _edit[0]; var setEditRecord = _edit[1]; var _view = React.useState(null); var viewRecord = _view[0]; var setViewRecord = _view[1]; // 新增页级联/穿梭框等 UI 状态 var _formDp = React.useState(false); var formDepartCascaderOpen = _formDp[0]; var setFormDepartCascaderOpen = _formDp[1]; var _formTp = React.useState(false); var formTransferCascaderOpen = _formTp[0]; var setFormTransferCascaderOpen = _formTp[1]; var _formOp = React.useState(false); var formOperatorOpen = _formOp[0]; var setFormOperatorOpen = _formOp[1]; // 穿梭框:左侧/右侧选中的 id 列表(用于多选后点击添加/移除) var _leftSel = React.useState([]); var leftSelectedIds = _leftSel[0]; var setLeftSelectedIds = _leftSel[1]; var _rightSel = React.useState([]); var rightSelectedIds = _rightSel[0]; var setRightSelectedIds = _rightSel[1]; var _toast = React.useState(''); var toastMessage = _toast[0]; var setToastMessage = _toast[1]; var _reqModal = React.useState(false); var showRequirementModal = _reqModal[0]; var setShowRequirementModal = _reqModal[1]; var _withdrawConfirm = React.useState(null); var withdrawConfirmRecord = _withdrawConfirm[0]; var setWithdrawConfirmRecord = _withdrawConfirm[1]; var _selectedRows = React.useState([]); var selectedRowIds = _selectedRows[0]; var setSelectedRowIds = _selectedRows[1]; var _receiveForm = React.useState({ receiveDate: '', receiverName: '张明', lines: [] }); var receiveFormData = _receiveForm[0]; var setReceiveFormData = _receiveForm[1]; function getStatusLabel(value) { var s = APPROVAL_STATUS.find(function (x) { return x.value === value; }); return s ? s.label : value; } function getMethodLabel(value) { var m = TRANSFER_METHODS.find(function (x) { return x.value === value; }); return m ? m.label : value; } // 氢量只显示一次单位:若值已带 %/MPa/KG 则不追加单位 function formatH2(val, unit) { if (val == null || val === '') return '-'; var s = String(val); if (s.match(/%|MPa|KG$/)) return s; return s + (unit || ''); } // 将主记录按 lines 展开为行(每车牌一行),并进行中/历史记录 tab 筛选 function getFlattenedRows() { var rows = []; mockTransferList.forEach(function (t) { var inProgress = ['pending_submit', 'pending_approval', 'approving', 'rejected', 'withdrawn'].indexOf(t.approvalStatus) >= 0 || (t.approvalStatus === 'completed' && !t.hasReceiveRecord); var inHistory = t.approvalStatus === 'completed' && t.hasReceiveRecord; if (listTab === 'in_progress' && !inProgress) return; if (listTab === 'history' && !inHistory) return; (t.lines || []).forEach(function (line) { rows.push({ transfer: t, line: line, rowId: t.id + '-' + (line.plateNo || '') }); }); }); return rows; } function getFilteredList() { var list = getFlattenedRows(); var a = appliedFilters; list = list.filter(function (row) { var t = row.transfer; var line = row.line; if (a.filterDateStart && t.transferDate < a.filterDateStart) return false; if (a.filterDateEnd && t.transferDate > a.filterDateEnd) return false; if (a.filterOperator && (!t.operatorName || t.operatorName.indexOf(a.filterOperator) < 0)) return false; if (a.filterReceiveDateStart && t.receiveDate && t.receiveDate < a.filterReceiveDateStart) return false; if (a.filterReceiveDateEnd && t.receiveDate && t.receiveDate > a.filterReceiveDateEnd) return false; if (a.filterReceiver && (!t.receiverName || t.receiverName.indexOf(a.filterReceiver) < 0)) return false; if (a.filterPlateNo && (!line.plateNo || line.plateNo.indexOf(a.filterPlateNo) < 0)) return false; if (a.filterDepartProvince && t.departProvince !== a.filterDepartProvince) return false; if (a.filterDepartCity && t.departCity !== a.filterDepartCity) return false; if (a.filterTransferProvince && t.transferProvince !== a.filterTransferProvince) return false; if (a.filterTransferCity && t.transferCity !== a.filterTransferCity) return false; if (a.filterMethod && t.transferMethod !== a.filterMethod) return false; if (a.filterApprovalStatus && t.approvalStatus !== a.filterApprovalStatus) return false; return true; }); return list; } var filteredList = getFilteredList(); var totalItems = filteredList.length; var totalPages = Math.ceil(totalItems / pageSize) || 1; var validPage = currentPage > totalPages && totalPages > 0 ? 1 : (currentPage < 1 ? 1 : currentPage); if (validPage !== currentPage && totalPages > 0) { setCurrentPage(1); validPage = 1; } var startIndex = (validPage - 1) * pageSize; var endIndex = startIndex + pageSize; var paginatedList = filteredList.slice(startIndex, endIndex); function handleFormChange(field, value) { var next = {}; for (var k in formData) { next[k] = formData[k]; } next[field] = value; setFormData(next); } function handleAddFormChange(field, value) { var next = {}; for (var k in addFormData) { next[k] = addFormData[k]; } next[field] = value; setAddFormData(next); } function validateAddForm(submitForApproval) { if (!addFormData.transferDate) { setToastMessage('请选择调拨日期'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (!addFormData.departProvince || !addFormData.departCity) { setToastMessage('请选择出发区域'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (!addFormData.transferProvince || !addFormData.transferCity) { setToastMessage('请选择接收区域'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (!addFormData.transferMethod) { setToastMessage('请选择调拨方式'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (!addFormData.transferReason || !addFormData.transferReason.trim()) { setToastMessage('请填写调拨原因'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (!addFormData.carrierName || !addFormData.carrierName.trim()) { setToastMessage('请填写运输方名称'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (!addFormData.carrierContact || !addFormData.carrierContact.trim()) { setToastMessage('请填写运输方联系方式'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } var validLines = addFormLines.filter(function (row) { return row.vehicleId && row.plateNo; }); if (validLines.length === 0) { setToastMessage('请至少添加一行并选择车牌号'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } for (var i = 0; i < addFormLines.length; i++) { var row = addFormLines[i]; if (!row.plateNo) continue; var rowNum = i + 1; if (row.departMileage === '' || row.departMileage === undefined || row.departMileage === null) { setToastMessage('请填写第' + rowNum + '行出发里程(KM)'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (row.departH2 === '' || row.departH2 === undefined || row.departH2 === null) { setToastMessage('请填写第' + rowNum + '行出发氢量'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (row.departElec === '' || row.departElec === undefined || row.departElec === null) { setToastMessage('请填写第' + rowNum + '行出发电量'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } } return true; } function buildAddRecord(approvalStatus) { var dp = provinceList.find(function (x) { return x.code === addFormData.departProvince; }); var dc = (cityMap[addFormData.departProvince] || []).find(function (x) { return x.code === addFormData.departCity; }); var tp = provinceList.find(function (x) { return x.code === addFormData.transferProvince; }); var tc = (cityMap[addFormData.transferProvince] || []).find(function (x) { return x.code === addFormData.transferCity; }); var newId = 't' + (mockTransferList.length + 1); var now = new Date(); var createTimeStr = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0') + ' ' + String(now.getHours()).padStart(2, '0') + ':' + String(now.getMinutes()).padStart(2, '0'); var validLines = addFormLines.filter(function (row) { return row.vehicleId && row.plateNo; }); var lines = validLines.map(function (row) { return { plateNo: row.plateNo, vehicleType: row.vehicleType || '-', brand: row.brand || '-', model: row.model || '-', departParking: row.departParking || '-', departMileage: row.departMileage != null && row.departMileage !== '' ? Number(row.departMileage) : null, departH2: row.departH2 != null && row.departH2 !== '' ? row.departH2 : '', departH2Unit: row.departH2Unit || '', departElec: row.departElec != null && row.departElec !== '' ? Number(row.departElec) : null, receiveMileage: null, receiveH2: null, receiveElec: null, receiveParking: null, receiverName: null }; }); return { id: newId, transferDate: addFormData.transferDate, operatorId: 'u1', operatorName: '张明', departProvince: addFormData.departProvince, departCity: addFormData.departCity, departLabel: (dp ? dp.name : '') + '-' + (dc ? dc.name : ''), transferProvince: addFormData.transferProvince, transferCity: addFormData.transferCity, transferLabel: (tp ? tp.name : '') + '-' + (tc ? tc.name : ''), transferMethod: addFormData.transferMethod, transferReason: addFormData.transferReason || '', carrierName: addFormData.carrierName || '', carrierContact: addFormData.carrierContact || '', approvalStatus: approvalStatus, hasReceiveRecord: false, receiveDate: '', receiverId: '', receiverName: '', createTime: createTimeStr, lines: lines }; } function handleAddSave() { if (!validateAddForm(false)) return; var newRecord = buildAddRecord('pending_submit'); setMockTransferList(mockTransferList.concat([newRecord])); setToastMessage('保存成功'); setTimeout(function () { setToastMessage(''); }, 2000); setCurrentView('list'); setAddFormData(defaultAddForm); setAddFormLines([createEmptyAddLine()]); setPlateSelectOpenRowId(null); } function handleAddSubmit() { if (!validateAddForm(true)) return; var newRecord = buildAddRecord('pending_approval'); setMockTransferList(mockTransferList.concat([newRecord])); setToastMessage('已提交审核'); setTimeout(function () { setToastMessage(''); }, 2000); setCurrentView('list'); setAddFormData(defaultAddForm); setAddFormLines([createEmptyAddLine()]); setPlateSelectOpenRowId(null); } function handleAddCancel() { setCurrentView('list'); setAddFormData(defaultAddForm); setAddFormLines([createEmptyAddLine()]); setPlateSelectOpenRowId(null); } function updateAddLine(rowId, updates) { setAddFormLines(function (prev) { return prev.map(function (l) { if (l.rowId !== rowId) return l; var next = {}; for (var k in l) next[k] = l[k]; for (var k in updates) next[k] = updates[k]; return next; }); }); } function getAddPagePlateOptions(rowId) { var usedElsewhere = function (v) { return addFormLines.some(function (l) { return l.rowId !== rowId && l.vehicleId === v.id; }); }; var list = mockStockVehicles.filter(function (v) { return !usedElsewhere(v); }); var kw = (plateSearchKeyword || '').trim(); if (kw) list = list.filter(function (v) { return (v.plateNo || '').indexOf(kw) >= 0; }); return list; } function renderAddPage() { var grid = styles.formGrid; return React.createElement('div', {}, React.createElement('div', { style: Object.assign({}, styles.card, { marginBottom: t.spacing16 }) }, React.createElement('div', { style: grid }, React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '调拨日期', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('input', { style: styles.input, type: 'date', value: addFormData.transferDate, onChange: function (e) { handleAddFormChange('transferDate', e.target.value); } }) ), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '出发区域', React.createElement('span', { style: styles.formLabelReq }, '*')), renderCascader(addFormData.departProvince, addFormData.departCity, function (v) { setAddFormData(function (prev) { var n = {}; for (var k in prev) n[k] = prev[k]; n.departProvince = v; n.departCity = ''; return n; }); }, function (v) { setAddFormData(function (prev) { var n = {}; for (var k in prev) n[k] = prev[k]; n.departCity = v; return n; }); }, addDepartCascaderOpen, setAddDepartCascaderOpen) ), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '接收区域', React.createElement('span', { style: styles.formLabelReq }, '*')), renderCascader(addFormData.transferProvince, addFormData.transferCity, function (v) { setAddFormData(function (prev) { var n = {}; for (var k in prev) n[k] = prev[k]; n.transferProvince = v; n.transferCity = ''; return n; }); }, function (v) { setAddFormData(function (prev) { var n = {}; for (var k in prev) n[k] = prev[k]; n.transferCity = v; return n; }); }, addAcceptCascaderOpen, setAddAcceptCascaderOpen) ), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '调拨方式', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('div', { style: styles.btnGroup }, React.createElement('button', { type: 'button', style: Object.assign({}, styles.btnGroupItem, addFormData.transferMethod === 'third_party' ? styles.btnGroupItemActive : {}), onClick: function () { handleAddFormChange('transferMethod', 'third_party'); } }, '第三方运输'), React.createElement('button', { type: 'button', style: Object.assign({}, styles.btnGroupItem, styles.btnGroupItemLast, addFormData.transferMethod === 'driver' ? styles.btnGroupItemActive : {}), onClick: function () { handleAddFormChange('transferMethod', 'driver'); } }, '司机驾驶') ) ), React.createElement('div', { style: Object.assign({}, styles.formRow, styles.formGridFull) }, React.createElement('label', { style: styles.formLabel }, '调拨原因', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('textarea', { style: styles.textarea, value: addFormData.transferReason, onChange: function (e) { handleAddFormChange('transferReason', e.target.value); }, placeholder: '请输入调拨原因' }) ), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '运输方名称', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('input', { style: styles.input, value: addFormData.carrierName, onChange: function (e) { handleAddFormChange('carrierName', e.target.value); }, placeholder: '请输入运输方名称或司机姓名' }) ), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '运输方联系方式', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('input', { style: styles.input, value: addFormData.carrierContact, onChange: function (e) { handleAddFormChange('carrierContact', e.target.value); }, placeholder: '请输入运输方联系方式' }) ) ) ), React.createElement('div', { style: styles.card }, React.createElement('div', { style: styles.tableWrapAddPage }, React.createElement('table', { style: styles.table }, React.createElement('thead', {}, React.createElement('tr', {}, React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '车牌号', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '车辆类型'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '品牌'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '型号'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发停车场'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发里程(KM)', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发氢量', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发电量', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '操作') ) ), React.createElement('tbody', {}, addFormLines.map(function (row, rowIndex) { var isPlateOpen = plateSelectOpenRowId === row.rowId; var plateOptions = getAddPagePlateOptions(row.rowId); var isEvenRow = rowIndex % 2 === 1; return React.createElement('tr', { key: row.rowId, style: isEvenRow ? styles.trStripe : styles.trOdd }, React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, React.createElement('div', { style: styles.autocompleteWrap }, React.createElement('input', { style: Object.assign({}, styles.input, { minWidth: '120px' }), placeholder: '请选择', value: isPlateOpen ? plateSearchKeyword : (row.plateNo || ''), onChange: function (e) { setPlateSearchKeyword(e.target.value); setPlateSelectOpenRowId(row.rowId); }, onFocus: function () { setPlateSelectOpenRowId(row.rowId); setPlateSearchKeyword(row.plateNo || ''); }, onBlur: function () { setTimeout(function () { setPlateSelectOpenRowId(null); }, 200); } }), isPlateOpen && React.createElement(React.Fragment, {}, React.createElement('div', { style: { position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, zIndex: 1049 }, onClick: function () { setPlateSelectOpenRowId(null); } }), React.createElement('div', { style: Object.assign({}, styles.autocompletePanel, styles.autocompletePanelOverflow), onClick: function (e) { e.stopPropagation(); } }, plateOptions.length === 0 ? React.createElement('div', { style: { padding: '8px 12px', fontSize: t.fontSize14, color: t.neutral6 } }, '无匹配的库存车辆') : plateOptions.map(function (v) { return React.createElement('div', { key: v.id, style: styles.autocompleteOption, onMouseDown: function (e) { e.preventDefault(); }, onClick: function () { updateAddLine(row.rowId, { vehicleId: v.id, plateNo: v.plateNo, vehicleType: v.vehicleType || '', brand: v.brand || '', model: v.model || '', departParking: v.departParking || '', departH2Unit: v.h2Unit || '' }); setPlateSelectOpenRowId(null); setPlateSearchKeyword(''); } }, v.plateNo); }) ) ) ) ), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, row.vehicleType || '-'), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, row.brand || '-'), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, row.model || '-'), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, row.departParking || '-'), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, React.createElement('input', { style: Object.assign({}, styles.input, { width: '80px' }), type: 'number', value: row.departMileage, onChange: function (e) { updateAddLine(row.rowId, { departMileage: e.target.value }); }, placeholder: '' }) ), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center' } }, React.createElement('input', { style: Object.assign({}, styles.input, { width: '80px' }), value: row.departH2, onChange: function (e) { updateAddLine(row.rowId, { departH2: e.target.value }); }, placeholder: '' }), row.departH2Unit ? React.createElement('span', { style: { marginLeft: '4px', color: t.neutral6, fontSize: t.fontSize14 } }, row.departH2Unit) : null ) ), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center' } }, React.createElement('input', { style: Object.assign({}, styles.input, { width: '80px' }), value: row.departElec, onChange: function (e) { updateAddLine(row.rowId, { departElec: e.target.value }); }, placeholder: '' }), React.createElement('span', { style: { marginLeft: '4px', color: t.neutral6, fontSize: t.fontSize14 } }, 'kWh') ) ), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, React.createElement('a', { href: '#', style: styles.actionLink, onClick: function (e) { e.preventDefault(); if (addFormLines.length <= 1) { setToastMessage('至少保留一行'); setTimeout(function () { setToastMessage(''); }, 2000); return; } setAddFormLines(addFormLines.filter(function (l) { return l.rowId !== row.rowId; })); } }, '删除') ) ); }) ) ) ), React.createElement('div', { style: { marginTop: t.spacing12 } }, React.createElement('button', { type: 'button', style: Object.assign({}, styles.btn, styles.btnDefault), onClick: function () { setAddFormLines(addFormLines.concat([createEmptyAddLine()])); } }, '新增一行') ), React.createElement('div', { style: styles.modalFooter }, React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnDefault), onClick: handleAddCancel }, '取消'), React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnDefault), onClick: handleAddSave }, '保存'), React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnPrimary), onClick: handleAddSubmit }, '提交审核') ) ) ); } function renderEditPage() { var grid = styles.formGrid; return React.createElement('div', {}, React.createElement('div', { style: Object.assign({}, styles.card, { marginBottom: t.spacing16 }) }, React.createElement('div', { style: grid }, React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '调拨日期', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('input', { style: styles.input, type: 'date', value: formData.transferDate, onChange: function (e) { handleFormChange('transferDate', e.target.value); } }) ), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '出发区域', React.createElement('span', { style: styles.formLabelReq }, '*')), renderCascader(formData.departProvince, formData.departCity, function (v) { setFormData(function (prev) { var n = {}; for (var k in prev) n[k] = prev[k]; n.departProvince = v; n.departCity = ''; return n; }); }, function (v) { setFormData(function (prev) { var n = {}; for (var k in prev) n[k] = prev[k]; n.departCity = v; return n; }); }, formDepartCascaderOpen, setFormDepartCascaderOpen) ), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '接收区域', React.createElement('span', { style: styles.formLabelReq }, '*')), renderCascader(formData.transferProvince, formData.transferCity, function (v) { setFormData(function (prev) { var n = {}; for (var k in prev) n[k] = prev[k]; n.transferProvince = v; n.transferCity = ''; return n; }); }, function (v) { setFormData(function (prev) { var n = {}; for (var k in prev) n[k] = prev[k]; n.transferCity = v; return n; }); }, formTransferCascaderOpen, setFormTransferCascaderOpen) ), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '调拨方式', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('div', { style: styles.btnGroup }, React.createElement('button', { type: 'button', style: Object.assign({}, styles.btnGroupItem, formData.transferMethod === 'third_party' ? styles.btnGroupItemActive : {}), onClick: function () { handleFormChange('transferMethod', 'third_party'); } }, '第三方运输'), React.createElement('button', { type: 'button', style: Object.assign({}, styles.btnGroupItem, styles.btnGroupItemLast, formData.transferMethod === 'driver' ? styles.btnGroupItemActive : {}), onClick: function () { handleFormChange('transferMethod', 'driver'); } }, '司机驾驶') ) ), React.createElement('div', { style: Object.assign({}, styles.formRow, styles.formGridFull) }, React.createElement('label', { style: styles.formLabel }, '调拨原因', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('textarea', { style: styles.textarea, value: formData.transferReason, onChange: function (e) { handleFormChange('transferReason', e.target.value); }, placeholder: '请输入调拨原因' }) ), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '运输方名称', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('input', { style: styles.input, value: formData.carrierName, onChange: function (e) { handleFormChange('carrierName', e.target.value); }, placeholder: '请输入运输方名称或司机姓名' }) ), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '运输方联系方式', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('input', { style: styles.input, value: formData.carrierContact, onChange: function (e) { handleFormChange('carrierContact', e.target.value); }, placeholder: '请输入运输方联系方式' }) ), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '接收日期', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('input', { style: styles.input, type: 'date', value: formData.receiveDate, onChange: function (e) { handleFormChange('receiveDate', e.target.value); } }) ) ) ), React.createElement('div', { style: styles.card }, React.createElement('div', { style: styles.tableWrapAddPage }, React.createElement('table', { style: styles.table }, React.createElement('thead', {}, React.createElement('tr', {}, React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '车牌号', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '车辆类型'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '品牌'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '型号'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发停车场'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发里程(KM)', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '接收里程(KM)'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发氢量', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '接收氢量', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发电量', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '接收电量', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '操作') ) ), React.createElement('tbody', {}, editFormLines.map(function (row, rowIndex) { var isPlateOpen = editPlateSelectOpenRowId === row.rowId; var plateOptions = getEditPagePlateOptions(row.rowId); var isEvenRow = rowIndex % 2 === 1; return React.createElement('tr', { key: row.rowId, style: isEvenRow ? styles.trStripe : styles.trOdd }, React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, React.createElement('div', { style: styles.autocompleteWrap }, React.createElement('input', { style: Object.assign({}, styles.input, { minWidth: '120px' }), placeholder: '请选择', value: isPlateOpen ? editPlateSearchKeyword : (row.plateNo || ''), onChange: function (e) { setEditPlateSearchKeyword(e.target.value); setEditPlateSelectOpenRowId(row.rowId); }, onFocus: function () { setEditPlateSelectOpenRowId(row.rowId); setEditPlateSearchKeyword(row.plateNo || ''); }, onBlur: function () { setTimeout(function () { setEditPlateSelectOpenRowId(null); }, 200); } }), isPlateOpen && React.createElement(React.Fragment, {}, React.createElement('div', { style: { position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, zIndex: 1049 }, onClick: function () { setEditPlateSelectOpenRowId(null); } }), React.createElement('div', { style: Object.assign({}, styles.autocompletePanel, styles.autocompletePanelOverflow), onClick: function (e) { e.stopPropagation(); } }, plateOptions.length === 0 ? React.createElement('div', { style: { padding: '8px 12px', fontSize: t.fontSize14, color: t.neutral6 } }, '无匹配的库存车辆') : plateOptions.map(function (v) { return React.createElement('div', { key: v.id, style: styles.autocompleteOption, onMouseDown: function (e) { e.preventDefault(); }, onClick: function () { updateEditLine(row.rowId, { vehicleId: v.id, plateNo: v.plateNo, vehicleType: v.vehicleType || '', brand: v.brand || '', model: v.model || '', departParking: v.departParking || '', departH2Unit: v.h2Unit || '' }); setEditPlateSelectOpenRowId(null); setEditPlateSearchKeyword(''); } }, v.plateNo); }) ) ) ) ), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, row.vehicleType || '-'), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, row.brand || '-'), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, row.model || '-'), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, row.departParking || '-'), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, React.createElement('input', { style: Object.assign({}, styles.input, { width: '80px' }), type: 'number', value: row.departMileage, onChange: function (e) { updateEditLine(row.rowId, { departMileage: e.target.value }); }, placeholder: '' }) ), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, React.createElement('input', { style: Object.assign({}, styles.input, { width: '80px' }), type: 'number', value: row.receiveMileage, onChange: function (e) { updateEditLine(row.rowId, { receiveMileage: e.target.value }); }, placeholder: '' }) ), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center' } }, React.createElement('input', { style: Object.assign({}, styles.input, { width: '80px' }), value: row.departH2, onChange: function (e) { updateEditLine(row.rowId, { departH2: e.target.value }); }, placeholder: '' }), row.departH2Unit ? React.createElement('span', { style: { marginLeft: '4px', color: t.neutral6, fontSize: t.fontSize14 } }, row.departH2Unit) : null ) ), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center' } }, React.createElement('input', { style: Object.assign({}, styles.input, { width: '80px' }), value: row.receiveH2, onChange: function (e) { updateEditLine(row.rowId, { receiveH2: e.target.value }); }, placeholder: '' }), row.departH2Unit ? React.createElement('span', { style: { marginLeft: '4px', color: t.neutral6, fontSize: t.fontSize14 } }, row.departH2Unit) : null ) ), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center' } }, React.createElement('input', { style: Object.assign({}, styles.input, { width: '80px' }), value: row.departElec, onChange: function (e) { updateEditLine(row.rowId, { departElec: e.target.value }); }, placeholder: '' }), React.createElement('span', { style: { marginLeft: '4px', color: t.neutral6, fontSize: t.fontSize14 } }, 'kWh') ) ), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, React.createElement('input', { style: Object.assign({}, styles.input, { width: '80px' }), type: 'number', value: row.receiveElec, onChange: function (e) { updateEditLine(row.rowId, { receiveElec: e.target.value }); }, placeholder: '' }) ), React.createElement('td', { style: Object.assign({}, styles.td, styles.tdNowrap) }, React.createElement('a', { href: '#', style: styles.actionLink, onClick: function (e) { e.preventDefault(); if (editFormLines.length <= 1) { setToastMessage('至少保留一行'); setTimeout(function () { setToastMessage(''); }, 2000); return; } setEditFormLines(editFormLines.filter(function (l) { return l.rowId !== row.rowId; })); } }, '删除') ) ); }) ) ) ), React.createElement('div', { style: { marginTop: t.spacing12 } }, React.createElement('button', { type: 'button', style: Object.assign({}, styles.btn, styles.btnDefault), onClick: function () { setEditFormLines(editFormLines.concat([createEmptyEditLine()])); } }, '新增一行') ), React.createElement('div', { style: styles.modalFooter }, React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnDefault), onClick: function () { setCurrentView('list'); setEditRecord(null); setFormData(defaultForm); setEditFormLines([]); setEditPlateSelectOpenRowId(null); setEditPlateSearchKeyword(''); } }, '取消'), React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnDefault), onClick: handleEditSave }, '保存'), React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnPrimary), onClick: function () { handleEditSave(); } }, '提交') ) ) ); } // 查看页:与接收记录页布局、字段一致,全部只读禁用(调拨信息 + 接收日期 + 明细表) function renderViewPage(record) { if (!record) return null; var lines = record.lines || []; return React.createElement('div', { style: styles.card }, React.createElement('div', { style: styles.modalTitle }, '查看调拨'), renderFormContent(true, true), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '接收日期'), React.createElement('span', { style: { fontSize: t.fontSize14, color: t.neutral8 } }, record.receiveDate || '-') ), React.createElement('div', { style: Object.assign({}, styles.formRow, { marginTop: t.spacing24 }) }, React.createElement('div', { style: styles.tableWrap }, React.createElement('table', { style: styles.table }, React.createElement('thead', {}, React.createElement('tr', {}, React.createElement('th', { style: styles.th }, '车牌号'), React.createElement('th', { style: styles.th }, '车辆类型'), React.createElement('th', { style: styles.th }, '品牌'), React.createElement('th', { style: styles.th }, '型号'), React.createElement('th', { style: styles.th }, '出发停车场'), React.createElement('th', { style: styles.th }, '出发里程(KM)'), React.createElement('th', { style: styles.th }, '接收里程(KM)'), React.createElement('th', { style: styles.th }, '出发氢量'), React.createElement('th', { style: styles.th }, '接收氢量'), React.createElement('th', { style: styles.th }, '出发电量'), React.createElement('th', { style: styles.th }, '接收电量(kWh)') ) ), React.createElement('tbody', {}, lines.map(function (line, idx) { var isEvenRow = idx % 2 === 1; return React.createElement('tr', { key: idx, style: isEvenRow ? styles.trStripe : styles.trOdd }, React.createElement('td', { style: styles.td }, line.plateNo || '-'), React.createElement('td', { style: styles.td }, line.vehicleType || '-'), React.createElement('td', { style: styles.td }, line.brand || '-'), React.createElement('td', { style: styles.td }, line.model || '-'), React.createElement('td', { style: styles.td }, line.departParking || '-'), React.createElement('td', { style: styles.td }, line.departMileage != null ? line.departMileage : '-'), React.createElement('td', { style: styles.td }, line.receiveMileage != null ? line.receiveMileage : '-'), React.createElement('td', { style: styles.td }, formatH2(line.departH2, line.departH2Unit)), React.createElement('td', { style: styles.td }, formatH2(line.receiveH2, line.departH2Unit)), React.createElement('td', { style: styles.td }, line.departElec != null ? line.departElec + ' kWh' : '-'), React.createElement('td', { style: styles.td }, line.receiveElec != null ? line.receiveElec + ' kWh' : '-') ); }) ) ) ) ), React.createElement('div', { style: styles.modalFooter }, React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnDefault), onClick: function () { setViewRecord(null); setCurrentView('list'); } }, '返回') ) ); } function validateEditForm() { if (!formData.transferDate) { setToastMessage('请选择调拨日期'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (!formData.departProvince || !formData.departCity) { setToastMessage('请选择出发区域'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (!formData.transferProvince || !formData.transferCity) { setToastMessage('请选择接收区域'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (!formData.transferMethod) { setToastMessage('请选择调拨方式'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (!formData.transferReason || !formData.transferReason.trim()) { setToastMessage('请填写调拨原因'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (!formData.carrierName || !formData.carrierName.trim()) { setToastMessage('请填写运输方名称'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (!formData.carrierContact || !formData.carrierContact.trim()) { setToastMessage('请填写运输方联系方式'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (!formData.receiveDate) { setToastMessage('请选择接收日期'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } var validLines = editFormLines.filter(function (row) { return row.plateNo; }); if (validLines.length === 0) { setToastMessage('请至少保留一行并选择车牌号'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } for (var i = 0; i < editFormLines.length; i++) { var row = editFormLines[i]; if (!row.plateNo) continue; var rowNum = i + 1; if (row.departMileage === '' || row.departMileage === undefined || row.departMileage === null) { setToastMessage('请填写第' + rowNum + '行出发里程(KM)'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (row.departH2 === '' || row.departH2 === undefined || row.departH2 === null) { setToastMessage('请填写第' + rowNum + '行出发氢量'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (row.departElec === '' || row.departElec === undefined || row.departElec === null) { setToastMessage('请填写第' + rowNum + '行出发电量'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (row.receiveH2 === '' || row.receiveH2 === undefined || row.receiveH2 === null) { setToastMessage('请填写第' + rowNum + '行接收氢量'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } if (row.receiveElec === '' || row.receiveElec === undefined || row.receiveElec === null) { setToastMessage('请填写第' + rowNum + '行接收电量'); setTimeout(function () { setToastMessage(''); }, 2000); return false; } } return true; } function handleEditSave() { if (!editRecord) return; if (!validateEditForm()) return; var dp = provinceList.find(function (x) { return x.code === formData.departProvince; }); var dc = (cityMap[formData.departProvince] || []).find(function (x) { return x.code === formData.departCity; }); var tp = provinceList.find(function (x) { return x.code === formData.transferProvince; }); var tc = (cityMap[formData.transferProvince] || []).find(function (x) { return x.code === formData.transferCity; }); var validRows = editFormLines.filter(function (row) { return row.plateNo; }); var lines = validRows.map(function (row) { var existing = (editRecord.lines || []).find(function (l) { return l.plateNo === row.plateNo; }); return { plateNo: row.plateNo, vehicleType: row.vehicleType || '-', brand: row.brand || '-', model: row.model || '-', departParking: row.departParking || '-', departMileage: row.departMileage != null && row.departMileage !== '' ? Number(row.departMileage) : null, departH2: row.departH2 != null && row.departH2 !== '' ? row.departH2 : '', departH2Unit: row.departH2Unit || '', departElec: row.departElec != null && row.departElec !== '' ? Number(row.departElec) : null, receiveMileage: row.receiveMileage !== '' && row.receiveMileage !== undefined ? Number(row.receiveMileage) : (existing && existing.receiveMileage), receiveH2: row.receiveH2 != null && row.receiveH2 !== '' ? row.receiveH2 : (existing && existing.receiveH2), receiveElec: row.receiveElec !== '' && row.receiveElec !== undefined ? Number(row.receiveElec) : (existing && existing.receiveElec), receiveParking: existing && existing.receiveParking, receiverName: existing && existing.receiverName }; }); var updated = { id: editRecord.id, transferDate: formData.transferDate, operatorId: editRecord.operatorId, operatorName: editRecord.operatorName, departProvince: formData.departProvince, departCity: formData.departCity, departLabel: (dp ? dp.name : '') + '-' + (dc ? dc.name : ''), transferProvince: formData.transferProvince, transferCity: formData.transferCity, transferLabel: (tp ? tp.name : '') + '-' + (tc ? tc.name : ''), transferMethod: formData.transferMethod, transferReason: formData.transferReason || '', carrierName: formData.carrierName || '', carrierContact: formData.carrierContact || '', approvalStatus: editRecord.approvalStatus, hasReceiveRecord: editRecord.hasReceiveRecord, receiveDate: formData.receiveDate, receiverId: editRecord.receiverId, receiverName: editRecord.receiverName, createTime: editRecord.createTime, lines: lines }; setMockTransferList(mockTransferList.map(function (r) { return r.id === editRecord.id ? updated : r; })); setToastMessage('保存成功'); setTimeout(function () { setToastMessage(''); }, 2000); setEditRecord(null); setCurrentView('list'); setFormData(defaultForm); setEditFormLines([]); setEditPlateSelectOpenRowId(null); setEditPlateSearchKeyword(''); } function handleWithdraw(transfer) { if (!transfer) return; setMockTransferList(mockTransferList.map(function (r) { if (r.id === transfer.id) { var next = {}; for (var k in r) next[k] = r[k]; next.approvalStatus = 'withdrawn'; return next; } return r; })); setWithdrawConfirmRecord(null); setToastMessage('撤回成功'); setTimeout(function () { setToastMessage(''); }, 2000); } function setFormDataFromTransfer(transfer) { if (!transfer || !transfer.lines) return; var plateNos = transfer.lines.map(function (l) { return l.plateNo; }); var selectedIds = mockStockVehicles.filter(function (v) { return plateNos.indexOf(v.plateNo) >= 0; }).map(function (v) { return v.id; }); setFormData({ transferDate: transfer.transferDate, operatorId: transfer.operatorId, operatorName: transfer.operatorName, selectedVehicleIds: selectedIds, transferMethod: transfer.transferMethod, transferReason: transfer.transferReason || '', departProvince: transfer.departProvince || '', departCity: transfer.departCity || '', transferProvince: transfer.transferProvince || '', transferCity: transfer.transferCity || '', carrierName: transfer.carrierName || '', carrierContact: transfer.carrierContact || '' }); } function openEdit(transfer) { if (!transfer || !transfer.lines) return; setEditRecord(transfer); setFormData({ transferDate: transfer.transferDate, receiveDate: transfer.receiveDate || '', operatorId: transfer.operatorId, operatorName: transfer.operatorName, selectedVehicleIds: [], transferMethod: transfer.transferMethod, transferReason: transfer.transferReason || '', departProvince: transfer.departProvince || '', departCity: transfer.departCity || '', transferProvince: transfer.transferProvince || '', transferCity: transfer.transferCity || '', carrierName: transfer.carrierName || '', carrierContact: transfer.carrierContact || '' }); setEditFormLines(buildEditFormLinesFromRecord(transfer)); setEditPlateSelectOpenRowId(null); setEditPlateSearchKeyword(''); setCurrentView('edit'); } var t = ARCO_TOKEN; var styles = { page: { padding: t.spacing24, fontFamily: t.fontFamily, backgroundColor: t.fill, minHeight: '100vh' }, breadcrumb: { marginBottom: t.spacing16, fontSize: t.fontSize14, color: t.neutral6, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, breadcrumbLeft: { display: 'flex', alignItems: 'center' }, breadcrumbLink: { color: t.link, textDecoration: 'none', marginRight: t.spacing8 }, breadcrumbCurrent: { color: t.neutral8 }, breadcrumbRight: { display: 'flex', alignItems: 'center' }, requirementLink: { color: t.link, textDecoration: 'none', fontSize: t.fontSize14, cursor: 'pointer' }, modalCloseBtn: { position: 'absolute', right: t.spacing16, top: t.spacing16, width: '24px', height: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', borderRadius: t.radiusMedium, backgroundColor: 'transparent', border: 'none', color: t.neutral6, fontSize: '18px', lineHeight: '1', padding: 0 }, requirementSection: { marginBottom: t.spacing16 }, requirementSectionTitle: { fontSize: t.fontSize16, fontWeight: 600, color: t.neutral8, marginBottom: t.spacing8 }, requirementItem: { marginBottom: t.spacing8, paddingLeft: t.spacing16, fontSize: t.fontSize14, color: t.neutral7 }, requirementSubItem: { marginBottom: t.spacing4, paddingLeft: t.spacing24, fontSize: t.fontSize14, color: t.neutral7 }, card: { backgroundColor: t.neutral1, borderRadius: t.radiusLarge, boxShadow: t.shadowLight, marginBottom: t.spacing16, padding: t.spacing24 + ' 20px' }, searchPanel: { paddingBottom: t.spacing24, marginBottom: t.spacing24, borderBottom: '1px solid ' + t.neutral4 }, searchPanelInner: { display: 'flex', alignItems: 'flex-start', gap: t.spacing16 }, searchGridWrap: { flex: 1, minWidth: 0 }, searchGrid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: t.spacing16 + ' ' + t.spacing24 }, searchField: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '20px', minWidth: 0 }, searchFieldControl: { flex: 1, minWidth: 0, overflow: 'hidden' }, searchFieldLabel: { fontSize: t.fontSize14, color: t.neutral8, whiteSpace: 'nowrap', flexShrink: 0 }, searchDivider: { width: '1px', backgroundColor: t.neutral4, alignSelf: 'stretch', flexShrink: 0 }, searchActions: { display: 'flex', flexDirection: 'column', gap: t.spacing8, justifyContent: 'center', flexShrink: 0 }, filterGrid: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: t.spacing16 }, filterItem: { display: 'flex', alignItems: 'center', gap: t.spacing8, flexWrap: 'wrap' }, filterItemFull: { gridColumn: '1 / -1', display: 'flex', justifyContent: 'flex-end', gap: t.spacing8 }, label: { marginRight: t.spacing8, fontSize: t.fontSize14, color: t.neutral8, whiteSpace: 'nowrap' }, filterLabel: { marginRight: t.spacing8, fontSize: t.fontSize14, color: t.neutral8, whiteSpace: 'nowrap', minWidth: '80px', textAlign: 'right' }, input: { padding: '0 10px', height: '32px', width: '100%', minWidth: '140px', borderRadius: '2px', border: '1px solid ' + t.border, fontSize: t.fontSize14, fontFamily: t.fontFamily, boxSizing: 'border-box', outline: 'none', transition: 'border-color 0.2s, box-shadow 0.2s', textAlign: 'left' }, select: { padding: '0 32px 0 12px', height: '32px', minWidth: '120px', borderRadius: '2px', border: '1px solid ' + t.border, fontSize: t.fontSize14, fontFamily: t.fontFamily, color: t.neutral8, backgroundColor: t.neutral1, cursor: 'pointer', outline: 'none', appearance: 'none', WebkitAppearance: 'none', backgroundImage: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'12\' viewBox=\'0 0 48 48\'%3E%3Cpath fill=\'%2386909C\' d=\'M24 32l-12-12h24z\'/%3E%3C/svg%3E")', backgroundRepeat: 'no-repeat', backgroundPosition: 'right 20px center', transition: 'border-color 0.2s, box-shadow 0.2s', textAlign: 'left' }, btn: { padding: t.spacing8 + ' ' + t.spacing16, borderRadius: t.radiusMedium, cursor: 'pointer', fontSize: t.fontSize14, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '6px' }, btnFixed: { height: '32px', padding: '0 16px' }, btnPrimary: { backgroundColor: t.primary, color: t.neutral1, border: 'none' }, btnDefault: { backgroundColor: t.neutral1, color: t.neutral8, border: '1px solid ' + t.border }, btnOutline: { backgroundColor: t.neutral1, color: t.primary, border: '1px solid ' + t.primary }, toolbar: { display: 'flex', justifyContent: 'flex-end', marginBottom: t.spacing16 }, tabs: { display: 'flex', borderBottom: '1px solid ' + t.border, marginBottom: t.spacing16 }, tab: { padding: '10px 16px', cursor: 'pointer', fontSize: t.fontSize14, color: t.neutral7 }, tabActive: { color: t.primary, borderBottom: '2px solid ' + t.primary, marginBottom: '-1px' }, tableWrap: { overflowX: 'auto', border: '1px solid ' + t.neutral4, borderRadius: t.radiusMedium }, tableWrapAddPage: { overflow: 'visible', border: '1px solid ' + t.neutral4, borderRadius: t.radiusMedium }, table: { width: '100%', borderCollapse: 'collapse', fontSize: t.fontSize14 }, th: { textAlign: 'left', padding: '0 16px', height: '40px', boxSizing: 'border-box', backgroundColor: t.fillSecondary, borderBottom: '1px solid ' + t.neutral4, fontWeight: 600, color: t.neutral8, verticalAlign: 'middle' }, thNowrap: { whiteSpace: 'nowrap' }, thStickyRight: { position: 'sticky', right: 0, backgroundColor: t.fillSecondary, boxShadow: '-2px 0 4px rgba(0,0,0,0.06)', zIndex: 1 }, tdStickyRight: { position: 'sticky', right: 0, backgroundColor: t.neutral1, boxShadow: '-2px 0 4px rgba(0,0,0,0.06)', zIndex: 1 }, tdStickyRightStripe: { position: 'sticky', right: 0, backgroundColor: t.fillSecondary, boxShadow: '-2px 0 4px rgba(0,0,0,0.06)', zIndex: 1 }, td: { padding: '0 16px', height: '42px', boxSizing: 'border-box', borderBottom: '1px solid ' + t.neutral4, color: t.neutral8, verticalAlign: 'middle' }, tdNowrap: { whiteSpace: 'nowrap' }, trStripe: { backgroundColor: t.fillSecondary }, trOdd: { backgroundColor: t.neutral1 }, actionLink: { color: t.link, cursor: 'pointer', marginRight: t.spacing12, fontSize: t.fontSize14 }, pagination: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px', borderTop: '1px solid ' + t.neutral4 }, paginationLeft: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: t.fontSize14, color: t.neutral7 }, paginationRight: { display: 'flex', alignItems: 'center', gap: '8px' }, paginationSelect: { padding: '4px 8px', height: '28px', borderRadius: '2px', border: '1px solid ' + t.border, fontSize: t.fontSize14, fontFamily: t.fontFamily }, paginationBtn: { minWidth: '28px', height: '28px', padding: '0 8px', borderRadius: '2px', border: '1px solid ' + t.border, backgroundColor: t.neutral1, cursor: 'pointer', fontSize: t.fontSize14 }, paginationBtnActive: { backgroundColor: t.primary, color: t.neutral1, borderColor: t.primary }, paginationBtnDisabled: { opacity: 0.5, cursor: 'not-allowed' }, cascaderWrap: { position: 'relative', width: '100%', minWidth: 0 }, cascaderInput: { display: 'flex', alignItems: 'center', justifyContent: 'flex-start', width: '100%', height: '32px', padding: '0 32px 0 12px', borderRadius: '2px', border: '1px solid ' + t.border, cursor: 'pointer', fontSize: t.fontSize14, fontFamily: t.fontFamily, color: t.neutral8, backgroundColor: t.neutral1, outline: 'none', transition: 'border-color 0.2s, box-shadow 0.2s', boxSizing: 'border-box', textAlign: 'left', backgroundImage: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'12\' viewBox=\'0 0 48 48\'%3E%3Cpath fill=\'%2386909C\' d=\'M24 32l-12-12h24z\'/%3E%3C/svg%3E")', backgroundRepeat: 'no-repeat', backgroundPosition: 'right 20px center' }, cascaderPanel: { position: 'absolute', left: 0, top: '100%', marginTop: '4px', backgroundColor: t.neutral1, border: '1px solid ' + t.border, borderRadius: '2px', boxShadow: '0 4px 10px rgba(0,0,0,0.08)', zIndex: 1050, display: 'flex', minWidth: '240px', maxHeight: '256px' }, cascaderColumn: { minWidth: '100px', maxHeight: '256px', overflowY: 'auto', borderRight: '1px solid ' + t.neutral4 }, cascaderColumnLast: { borderRight: 'none' }, cascaderOption: { padding: '8px 12px', fontSize: t.fontSize14, fontFamily: t.fontFamily, color: t.neutral8, cursor: 'pointer', transition: 'background-color 0.1s' }, cascaderOptionHover: { backgroundColor: t.neutral2 }, autocompleteWrap: { position: 'relative', minWidth: '140px' }, autocompleteWrapFull: { width: '100%', minWidth: 0, maxWidth: '100%' }, autocompleteTrigger: { padding: '0 32px 0 12px', height: '32px', minWidth: '140px', borderRadius: '2px', border: '1px solid ' + t.border, fontSize: t.fontSize14, fontFamily: t.fontFamily, color: t.neutral8, backgroundColor: t.neutral1, boxSizing: 'border-box', outline: 'none', transition: 'border-color 0.2s, box-shadow 0.2s', textAlign: 'left', backgroundImage: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'12\' viewBox=\'0 0 48 48\'%3E%3Cpath fill=\'%2386909C\' d=\'M24 32l-12-12h24z\'/%3E%3C/svg%3E")', backgroundRepeat: 'no-repeat', backgroundPosition: 'right 20px center' }, autocompleteTriggerFull: { width: '100%', minWidth: 0, maxWidth: '100%' }, autocompletePanel: { position: 'absolute', left: 0, top: '100%', marginTop: '4px', backgroundColor: t.neutral1, border: '1px solid ' + t.border, borderRadius: '2px', boxShadow: '0 4px 10px rgba(0,0,0,0.08)', zIndex: 100, minWidth: '100%', maxHeight: '256px', overflowY: 'auto', padding: '4px 0' }, autocompletePanelOverflow: { zIndex: 1050 }, autocompleteOption: { padding: '8px 12px', fontSize: t.fontSize14, fontFamily: t.fontFamily, color: t.neutral8, cursor: 'pointer', transition: 'background-color 0.1s' }, dateRangeWrap: { position: 'relative', width: '100%' }, dateRangeTrigger: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', height: '32px', padding: '0 10px 0 12px', borderRadius: '2px', border: '1px solid ' + t.border, fontSize: t.fontSize14, fontFamily: t.fontFamily, color: t.neutral8, backgroundColor: t.neutral1, cursor: 'pointer', outline: 'none', transition: 'border-color 0.2s, box-shadow 0.2s', boxSizing: 'border-box', textAlign: 'left' }, dateRangeTriggerFocus: { borderColor: t.primary, boxShadow: '0 0 0 2px rgba(22,93,255,0.2)' }, dateRangeDropdown: { position: 'absolute', left: 0, top: '100%', marginTop: '4px', backgroundColor: t.neutral1, border: '1px solid ' + t.border, borderRadius: '4px', boxShadow: '0 4px 10px rgba(0,0,0,0.12)', zIndex: 1050, padding: '12px 16px', minWidth: '480px' }, dateRangeCalendars: { display: 'flex', gap: '24px' }, dateRangeCalendar: { minWidth: '200px' }, dateRangeCalendarHeader: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '12px' }, dateRangeCalendarNav: { display: 'flex', alignItems: 'center', gap: '4px' }, dateRangeCalendarNavBtn: { width: '28px', height: '28px', display: 'flex', alignItems: 'center', justifyContent: 'center', border: 'none', borderRadius: '2px', backgroundColor: 'transparent', color: t.neutral7, cursor: 'pointer', fontSize: '14px' }, dateRangeCalendarTitle: { fontSize: t.fontSize14, fontWeight: 600, color: t.neutral8 }, dateRangeCalendarWeekdays: { display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '2px', marginBottom: '4px', fontSize: '12px', color: t.neutral6 }, dateRangeCalendarGrid: { display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '2px' }, dateRangeDay: { width: '28px', height: '28px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '13px', color: t.neutral8, cursor: 'pointer', borderRadius: '2px' }, dateRangeDayOther: { color: t.neutral5 }, dateRangeDaySelected: { backgroundColor: t.primary, color: t.neutral1 }, dateRangeDayInRange: { backgroundColor: 'rgba(22,93,255,0.15)', color: t.primary }, dateRangeDayToday: { position: 'relative', fontWeight: 600 }, formRow: { marginBottom: t.spacing16 }, formLabel: { display: 'block', marginBottom: '6px', fontSize: t.fontSize14, color: t.neutral8 }, formLabelReq: { color: t.danger, marginLeft: '2px' }, formGrid: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: t.spacing24, maxWidth: '100%' }, formGridFull: { gridColumn: '1 / -1' }, textarea: { width: '100%', minHeight: '80px', padding: '8px 10px', borderRadius: '2px', border: '1px solid ' + t.border, fontSize: t.fontSize14, fontFamily: t.fontFamily, resize: 'vertical', boxSizing: 'border-box' }, radioGroup: { display: 'flex', gap: t.spacing16, alignItems: 'center' }, radioItem: { display: 'flex', alignItems: 'center', cursor: 'pointer' }, btnGroup: { display: 'inline-flex', border: '1px solid ' + t.border, borderRadius: t.radiusMedium, overflow: 'hidden' }, btnGroupItem: { padding: '0 16px', height: '32px', border: 'none', borderRight: '1px solid ' + t.border, cursor: 'pointer', fontSize: t.fontSize14, backgroundColor: t.neutral1, color: t.neutral7 }, btnGroupItemLast: { borderRight: 'none' }, btnGroupItemActive: { backgroundColor: t.primary, color: t.neutral1 }, transferBox: { display: 'flex', alignItems: 'stretch', gap: t.spacing12, minHeight: '240px', border: '1px solid ' + t.border, borderRadius: t.radiusMedium, padding: t.spacing12 }, transferColumn: { flex: 1, border: '1px solid ' + t.neutral4, borderRadius: t.radiusSmall, overflow: 'hidden', display: 'flex', flexDirection: 'column' }, transferColumnHead: { padding: '8px 12px', backgroundColor: t.fillSecondary, fontSize: t.fontSize14, fontWeight: 600 }, transferColumnList: { flex: 1, overflowY: 'auto', padding: '4px' }, transferItem: { padding: '8px 12px', fontSize: t.fontSize14, cursor: 'pointer', borderRadius: t.radiusSmall }, transferItemSelected: { backgroundColor: t.primary, color: t.neutral1 }, transferBtns: { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: t.spacing8 }, stepBar: { display: 'flex', alignItems: 'center', marginBottom: t.spacing24, padding: t.spacing16, backgroundColor: t.fillSecondary, borderRadius: t.radiusMedium }, stepItem: { display: 'flex', alignItems: 'center', flex: 1 }, stepDot: { width: '24px', height: '24px', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', marginRight: '8px' }, stepDotDone: { backgroundColor: t.success, color: t.neutral1 }, stepDotCurrent: { backgroundColor: t.primary, color: t.neutral1 }, stepDotPending: { backgroundColor: t.neutral4, color: t.neutral6 }, modalMask: { position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.45)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }, modalBox: { backgroundColor: t.neutral1, borderRadius: t.radiusLarge, maxWidth: '90%', maxHeight: '90%', overflow: 'auto', padding: t.spacing24, minWidth: '600px', position: 'relative' }, modalTitle: { fontSize: t.fontSize16, fontWeight: 600, marginBottom: t.spacing16 }, modalFooter: { marginTop: t.spacing24, display: 'flex', justifyContent: 'flex-end', gap: t.spacing8 }, toast: { position: 'fixed', top: t.spacing24, left: '50%', transform: 'translateX(-50%)', backgroundColor: 'rgba(0,0,0,0.75)', color: t.neutral1, padding: '10px 20px', borderRadius: t.radiusMedium, zIndex: 2000, fontSize: t.fontSize14 } }; // 列表运输方名称、运输方联系方式列样式(支持长文本换行) var carrierInfoTdStyle = Object.assign({}, styles.td, { whiteSpace: 'normal', verticalAlign: 'middle', minWidth: '100px', wordBreak: 'break-word', overflowWrap: 'break-word' }); // 穿梭框:左侧可选车辆 = 库存中未在 formData.selectedVehicleIds 的 var leftVehicles = mockStockVehicles.filter(function (v) { return formData.selectedVehicleIds.indexOf(v.id) < 0; }); var rightVehicles = mockStockVehicles.filter(function (v) { return formData.selectedVehicleIds.indexOf(v.id) >= 0; }); function renderFilterSelect(options, value, onChange, open, setOpen, placeholder, filterFn, fullWidth) { var list = filterFn ? options.filter(filterFn) : options; var wrapStyle = fullWidth ? Object.assign({}, styles.autocompleteWrap, styles.autocompleteWrapFull) : styles.autocompleteWrap; var triggerBase = fullWidth ? Object.assign({}, styles.autocompleteTrigger, styles.autocompleteTriggerFull) : styles.autocompleteTrigger; var triggerStyle = Object.assign({}, triggerBase, open ? { borderColor: t.primary, boxShadow: '0 0 0 2px rgba(22,93,255,0.2)' } : {}); return React.createElement('div', { style: wrapStyle }, React.createElement('input', { style: triggerStyle, className: 'arco-select-trigger', placeholder: placeholder, value: value, onChange: function (e) { onChange(e.target.value); }, onFocus: function () { setOpen(true); }, onBlur: function () { setTimeout(function () { setOpen(false); }, 200); } }), open && list.length > 0 && React.createElement(React.Fragment, {}, React.createElement('div', { style: { position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, zIndex: 99 }, onClick: function () { setOpen(false); } }), React.createElement('div', { style: styles.autocompletePanel, onClick: function (e) { e.stopPropagation(); } }, list.map(function (opt) { var label = typeof opt === 'string' ? opt : (opt.label || opt.name || opt.plateNo); var val = typeof opt === 'string' ? opt : (opt.value || opt.id || opt.plateNo); return React.createElement('div', { key: val, style: styles.autocompleteOption, className: 'arco-select-option', onMouseDown: function (e) { e.preventDefault(); }, onMouseEnter: function (e) { e.currentTarget.style.backgroundColor = t.neutral2; }, onMouseLeave: function (e) { e.currentTarget.style.backgroundColor = 'transparent'; }, onClick: function () { onChange(typeof opt === 'string' ? opt : (opt.name || opt.plateNo || val)); setOpen(false); } }, label); }) ) ) ); } function getCalendarWeeks(year, month) { var d = new Date(year, month - 1, 1); var firstDay = d.getDay(); var daysInMonth = new Date(year, month, 0).getDate(); var weeks = []; var week = []; for (var i = 0; i < firstDay; i++) { var prev = new Date(year, month - 1, -firstDay + i + 1); week.push({ date: prev.getDate(), yyyymmdd: prev.getFullYear() + '-' + String(prev.getMonth() + 1).padStart(2, '0') + '-' + String(prev.getDate()).padStart(2, '0'), isCurrentMonth: false }); } for (var j = 1; j <= daysInMonth; j++) { week.push({ date: j, yyyymmdd: year + '-' + String(month).padStart(2, '0') + '-' + String(j).padStart(2, '0'), isCurrentMonth: true }); if (week.length === 7) { weeks.push(week); week = []; } } if (week.length) { var nextMonth = month === 12 ? 1 : month + 1; var nextYear = month === 12 ? year + 1 : year; for (var k = week.length; k < 7; k++) { var dayNum = k - week.length + 1; week.push({ date: dayNum, yyyymmdd: nextYear + '-' + String(nextMonth).padStart(2, '0') + '-' + String(dayNum).padStart(2, '0'), isCurrentMonth: false }); } weeks.push(week); } return weeks; } function renderDateRangePicker(startValue, endValue, setStart, setEnd, open, setOpen, viewLeft, viewRight, setViewLeft, setViewRight) { var displayText = (startValue && endValue) ? (startValue + ' - ' + endValue) : (startValue ? (startValue + ' - 结束日期') : '开始日期 - 结束日期'); var triggerStyle = Object.assign({}, styles.dateRangeTrigger, open ? styles.dateRangeTriggerFocus : {}); var today = new Date(); var todayStr = today.getFullYear() + '-' + String(today.getMonth() + 1).padStart(2, '0') + '-' + String(today.getDate()).padStart(2, '0'); var leftYM = viewLeft || getInitialViewMonth(startValue); var rightYM = viewRight || (function () { var p = leftYM.split('-'); var y = parseInt(p[0], 10); var m = parseInt(p[1], 10); if (m === 12) return (y + 1) + '-01'; return y + '-' + String(m + 1).padStart(2, '0'); }()); var leftParts = leftYM.split('-'); var rightParts = rightYM.split('-'); var leftWeeks = getCalendarWeeks(parseInt(leftParts[0], 10), parseInt(leftParts[1], 10)); var rightWeeks = getCalendarWeeks(parseInt(rightParts[0], 10), parseInt(rightParts[1], 10)); function goPrevMonth(isLeftCalendar) { var ym = isLeftCalendar ? leftYM : rightYM; var p = ym.split('-'); var y = parseInt(p[0], 10); var m = parseInt(p[1], 10); if (m === 1) { y--; m = 12; } else m--; var next = y + '-' + String(m).padStart(2, '0'); if (isLeftCalendar) { setViewLeft(next); setViewRight(m === 12 ? (y + 1) + '-01' : y + '-' + String(m + 1).padStart(2, '0')); } else { setViewRight(next); setViewLeft(m === 1 ? (y - 1) + '-12' : y + '-' + String(m - 1).padStart(2, '0')); } } function goNextMonth(isLeftCalendar) { var ym = isLeftCalendar ? leftYM : rightYM; var p = ym.split('-'); var y = parseInt(p[0], 10); var m = parseInt(p[1], 10); if (m === 12) { y++; m = 1; } else m++; var next = y + '-' + String(m).padStart(2, '0'); if (isLeftCalendar) { setViewLeft(next); setViewRight(m === 12 ? (y + 1) + '-01' : y + '-' + String(m + 1).padStart(2, '0')); } else { setViewRight(next); setViewLeft(m === 1 ? (y - 1) + '-12' : y + '-' + String(m - 1).padStart(2, '0')); } } function onSelectDate(yyyymmdd) { if (!startValue || (startValue && endValue)) { setStart(yyyymmdd); setEnd(''); } else { if (yyyymmdd < startValue) { setEnd(startValue); setStart(yyyymmdd); } else setEnd(yyyymmdd); } } function renderOneCalendar(weeks, isLeft) { return React.createElement('div', { style: styles.dateRangeCalendar }, React.createElement('div', { style: styles.dateRangeCalendarHeader }, React.createElement('div', { style: styles.dateRangeCalendarNav }, React.createElement('button', { type: 'button', style: styles.dateRangeCalendarNavBtn, onClick: function () { goPrevMonth(isLeft); } }, '\u00AB'), React.createElement('button', { type: 'button', style: styles.dateRangeCalendarNavBtn, onClick: function () { goPrevMonth(isLeft); } }, '\u2039') ), React.createElement('span', { style: styles.dateRangeCalendarTitle }, (isLeft ? leftYM : rightYM).replace('-', '\u5E74') + '\u6708'), React.createElement('div', { style: styles.dateRangeCalendarNav }, React.createElement('button', { type: 'button', style: styles.dateRangeCalendarNavBtn, onClick: function () { goNextMonth(isLeft); } }, '\u203A'), React.createElement('button', { type: 'button', style: styles.dateRangeCalendarNavBtn, onClick: function () { goNextMonth(isLeft); } }, '\u00BB') ) ), React.createElement('div', { style: styles.dateRangeCalendarWeekdays }, ['日', '一', '二', '三', '四', '五', '六'].map(function (w) { return React.createElement('div', { key: w }, w); })), React.createElement('div', { style: styles.dateRangeCalendarGrid }, weeks.map(function (week, wi) { return week.map(function (day, di) { var isSelected = day.yyyymmdd === startValue || day.yyyymmdd === endValue; var isInRange = startValue && endValue && day.yyyymmdd >= startValue && day.yyyymmdd <= endValue; var isToday = day.yyyymmdd === todayStr; var dayStyle = Object.assign({}, styles.dateRangeDay, !day.isCurrentMonth ? styles.dateRangeDayOther : {}, isSelected ? styles.dateRangeDaySelected : {}, isInRange && !isSelected ? styles.dateRangeDayInRange : {}, isToday ? styles.dateRangeDayToday : {}); return React.createElement('div', { key: wi + '-' + di, style: dayStyle, onClick: function () { onSelectDate(day.yyyymmdd); } }, day.date); }); }) ) ); } return React.createElement('div', { style: styles.dateRangeWrap }, React.createElement('div', { style: triggerStyle, onClick: function () { if (!open) { setViewLeft(getInitialViewMonth(startValue)); var l = getInitialViewMonth(startValue); var p = l.split('-'); var y = parseInt(p[0], 10); var m = parseInt(p[1], 10); setViewRight(m === 12 ? (y + 1) + '-01' : y + '-' + String(m + 1).padStart(2, '0')); } setOpen(!open); } }, React.createElement('span', { style: { color: (startValue || endValue) ? t.neutral8 : t.neutral6 } }, displayText), React.createElement('span', { style: { width: '16px', height: '16px', flexShrink: 0, marginLeft: '8px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: t.neutral6 } }, React.createElement('svg', { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2 }, React.createElement('rect', { x: 3, y: 4, width: 18, height: 18, rx: 2 }), React.createElement('line', { x1: 16, y1: 2, x2: 16, y2: 6 }), React.createElement('line', { x1: 8, y1: 2, x2: 8, y2: 6 }), React.createElement('line', { x1: 3, y1: 10, x2: 21, y2: 10 })))), open && React.createElement(React.Fragment, {}, React.createElement('div', { style: { position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, zIndex: 1049 }, onClick: function () { setOpen(false); } }), React.createElement('div', { style: styles.dateRangeDropdown, onClick: function (e) { e.stopPropagation(); } }, React.createElement('div', { style: styles.dateRangeCalendars }, renderOneCalendar(leftWeeks, true), renderOneCalendar(rightWeeks, false) ) ) ) ); } function renderCascader(provinceCode, cityCode, setProvince, setCity, open, setOpen) { var p = provinceList.find(function (x) { return x.code === provinceCode; }); var c = (cityMap[provinceCode] || []).find(function (x) { return x.code === cityCode; }); var display = (p ? p.name : '') + (p && c ? ' - ' : '') + (c ? c.name : ''); var cascaderTriggerStyle = Object.assign({}, styles.cascaderInput, open ? { borderColor: t.primary, boxShadow: '0 0 0 2px rgba(22,93,255,0.2)' } : {}); return React.createElement('div', { style: styles.cascaderWrap }, React.createElement('div', { style: cascaderTriggerStyle, className: 'arco-select-trigger', onClick: function () { setOpen(!open); } }, React.createElement('span', { style: { color: (provinceCode && cityCode) ? t.neutral8 : t.neutral6, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, display || '请选择省-市')), open && React.createElement(React.Fragment, {}, React.createElement('div', { style: { position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, zIndex: 1049 }, onClick: function () { setOpen(false); } }), React.createElement('div', { style: styles.cascaderPanel, onClick: function (e) { e.stopPropagation(); } }, React.createElement('div', { style: styles.cascaderColumn }, provinceList.map(function (pr) { return React.createElement('div', { key: pr.code, style: styles.cascaderOption, className: 'arco-select-option', onMouseEnter: function (e) { e.currentTarget.style.backgroundColor = t.neutral2; }, onMouseLeave: function (e) { e.currentTarget.style.backgroundColor = 'transparent'; }, onClick: function () { setProvince(pr.code); setCity(''); } }, pr.name); }) ), React.createElement('div', { style: Object.assign({}, styles.cascaderColumn, styles.cascaderColumnLast) }, (cityMap[provinceCode] || []).map(function (ci) { return React.createElement('div', { key: ci.code, style: styles.cascaderOption, className: 'arco-select-option', onMouseEnter: function (e) { e.currentTarget.style.backgroundColor = t.neutral2; }, onMouseLeave: function (e) { e.currentTarget.style.backgroundColor = 'transparent'; }, onClick: function () { setCity(ci.code); setOpen(false); } }, ci.name); }) ) ) ) ); } function renderFormContent(readonly, isView) { var disabled = readonly === true; var grid = styles.formGrid; return React.createElement('div', { style: grid }, React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '调拨日期', !disabled && React.createElement('span', { style: styles.formLabelReq }, '*')), disabled ? React.createElement('span', {}, formData.transferDate) : React.createElement('input', { style: styles.input, type: 'date', value: formData.transferDate, onChange: function (e) { handleFormChange('transferDate', e.target.value); } }) ), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '操作人', !disabled && React.createElement('span', { style: styles.formLabelReq }, '*')), disabled ? React.createElement('span', {}, formData.operatorName) : renderFilterSelect(mockOpsUsers, formData.operatorName, function (v) { handleFormChange('operatorName', v); var u = mockOpsUsers.find(function (x) { return x.name === v; }); if (u) handleFormChange('operatorId', u.id); }, formOperatorOpen, setFormOperatorOpen, '支持模糊搜索', function (u) { return !formData.operatorName || (u.name && u.name.indexOf(formData.operatorName) >= 0); }) ), React.createElement('div', { style: Object.assign({}, styles.formRow, styles.formGridFull) }, React.createElement('label', { style: styles.formLabel }, '车牌号', !disabled && React.createElement('span', { style: styles.formLabelReq }, '*')), disabled ? React.createElement('span', {}, (formData.selectedVehicleIds && mockStockVehicles.filter(function (v) { return formData.selectedVehicleIds.indexOf(v.id) >= 0; }).map(function (v) { return v.plateNo; }).join('、')) || '-') : React.createElement('div', { style: styles.transferBox }, React.createElement('div', { style: styles.transferColumn }, React.createElement('div', { style: styles.transferColumnHead }, '库存车辆'), React.createElement('div', { style: styles.transferColumnList }, leftVehicles.map(function (v) { var selected = leftSelectedIds.indexOf(v.id) >= 0; return React.createElement('div', { key: v.id, style: Object.assign({}, styles.transferItem, selected ? styles.transferItemSelected : {}), onClick: function () { if (selected) setLeftSelectedIds(leftSelectedIds.filter(function (id) { return id !== v.id; })); else setLeftSelectedIds(leftSelectedIds.concat([v.id])); } }, v.plateNo); }) ) ), React.createElement('div', { style: styles.transferBtns }, React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnDefault), title: '添加', onClick: function () { handleFormChange('selectedVehicleIds', (formData.selectedVehicleIds || []).concat(leftSelectedIds)); setLeftSelectedIds([]); } }, '→'), React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnDefault), title: '移除', onClick: function () { handleFormChange('selectedVehicleIds', (formData.selectedVehicleIds || []).filter(function (id) { return rightSelectedIds.indexOf(id) < 0; })); setRightSelectedIds([]); } }, '←') ), React.createElement('div', { style: styles.transferColumn }, React.createElement('div', { style: styles.transferColumnHead }, '已选车辆'), React.createElement('div', { style: styles.transferColumnList }, rightVehicles.map(function (v) { var selected = rightSelectedIds.indexOf(v.id) >= 0; return React.createElement('div', { key: v.id, style: Object.assign({}, styles.transferItem, selected ? styles.transferItemSelected : {}), onClick: function () { if (selected) setRightSelectedIds(rightSelectedIds.filter(function (id) { return id !== v.id; })); else setRightSelectedIds(rightSelectedIds.concat([v.id])); } }, v.plateNo); }) ) ) ) ), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '调拨方式', !disabled && React.createElement('span', { style: styles.formLabelReq }, '*')), disabled ? React.createElement('span', {}, getMethodLabel(formData.transferMethod)) : React.createElement('div', { style: styles.radioGroup }, TRANSFER_METHODS.map(function (m) { return React.createElement('label', { key: m.value, style: styles.radioItem }, React.createElement('input', { type: 'radio', name: 'transferMethod', value: m.value, checked: formData.transferMethod === m.value, onChange: function () { handleFormChange('transferMethod', m.value); } }), React.createElement('span', { style: { marginLeft: '6px' } }, m.label) ); }) ) ), React.createElement('div', { style: Object.assign({}, styles.formRow, styles.formGridFull) }, React.createElement('label', { style: styles.formLabel }, '调拨原因', !disabled && React.createElement('span', { style: styles.formLabelReq }, '*')), disabled ? React.createElement('span', {}, formData.transferReason || '-') : React.createElement('textarea', { style: styles.textarea, value: formData.transferReason, onChange: function (e) { handleFormChange('transferReason', e.target.value); }, placeholder: '请输入' }) ), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '出发区域', !disabled && React.createElement('span', { style: styles.formLabelReq }, '*')), disabled ? React.createElement('span', {}, (function () { var r = viewRecord || editRecord; if (r && r.departLabel) return r.departLabel; if (formData.departProvince && formData.departCity) { var p = provinceList.find(function (x) { return x.code === formData.departProvince; }); var c = (cityMap[formData.departProvince] || []).find(function (x) { return x.code === formData.departCity; }); return (p ? p.name : '') + '-' + (c ? c.name : ''); } return '-'; }()) ) : renderCascader(formData.departProvince, formData.departCity, function (v) { setFormData(function (prev) { var n = {}; for (var k in prev) n[k] = prev[k]; n.departProvince = v; n.departCity = ''; return n; }); }, function (v) { setFormData(function (prev) { var n = {}; for (var k in prev) n[k] = prev[k]; n.departCity = v; return n; }); }, formDepartCascaderOpen, setFormDepartCascaderOpen) ), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '接收区域', !disabled && React.createElement('span', { style: styles.formLabelReq }, '*')), disabled ? React.createElement('span', {}, (function () { var r = viewRecord || editRecord; if (r && r.transferLabel) return r.transferLabel; if (formData.transferProvince && formData.transferCity) { var p = provinceList.find(function (x) { return x.code === formData.transferProvince; }); var c = (cityMap[formData.transferProvince] || []).find(function (x) { return x.code === formData.transferCity; }); return (p ? p.name : '') + '-' + (c ? c.name : ''); } return '-'; }()) ) : renderCascader(formData.transferProvince, formData.transferCity, function (v) { setFormData(function (prev) { var n = {}; for (var k in prev) n[k] = prev[k]; n.transferProvince = v; n.transferCity = ''; return n; }); }, function (v) { setFormData(function (prev) { var n = {}; for (var k in prev) n[k] = prev[k]; n.transferCity = v; return n; }); }, formTransferCascaderOpen, setFormTransferCascaderOpen) ), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '运输方名称', !disabled && React.createElement('span', { style: styles.formLabelReq }, '*')), disabled ? React.createElement('span', {}, (viewRecord || editRecord || formData).carrierName || '-') : React.createElement('input', { style: styles.input, value: formData.carrierName, onChange: function (e) { handleFormChange('carrierName', e.target.value); }, placeholder: '请输入' }) ), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '运输方联系方式', !disabled && React.createElement('span', { style: styles.formLabelReq }, '*')), disabled ? React.createElement('span', {}, (viewRecord || editRecord || formData).carrierContact || '-') : React.createElement('input', { style: styles.input, value: formData.carrierContact, onChange: function (e) { handleFormChange('carrierContact', e.target.value); }, placeholder: '请输入' }) ) ); } return ( React.createElement('div', { style: styles.page }, React.createElement('style', { dangerouslySetInnerHTML: { __html: '.arco-select-trigger:hover{border-color:#C9CDD4 !important;}' + 'select:hover{border-color:#C9CDD4 !important;}' + 'select:focus{border-color:#165DFF !important;box-shadow:0 0 0 2px rgba(22,93,255,0.2) !important;}' + '.arco-select-option:hover{background-color:#F7F8FA !important;}' } }), React.createElement('div', { style: styles.breadcrumb }, React.createElement('div', { style: styles.breadcrumbLeft }, React.createElement('a', { href: '#', style: styles.breadcrumbLink, onClick: function (e) { e.preventDefault(); } }, '运维管理'), React.createElement('span', { style: { marginRight: '8px' } }, '/'), React.createElement('a', { href: '#', style: styles.breadcrumbLink, onClick: function (e) { e.preventDefault(); } }, '车辆业务'), React.createElement('span', { style: { marginRight: '8px' } }, '/'), React.createElement('span', { style: styles.breadcrumbCurrent }, '调拨管理') ), React.createElement('div', { style: styles.breadcrumbRight }, React.createElement('a', { href: '#', style: styles.requirementLink, onClick: function (e) { e.preventDefault(); setShowRequirementModal(true); } }, '查看需求说明') ) ), currentView === 'list' && React.createElement(React.Fragment, {}, React.createElement('div', { style: styles.card }, React.createElement('div', { style: styles.searchPanel }, React.createElement('div', { style: styles.searchPanelInner }, React.createElement('div', { style: styles.searchGridWrap }, React.createElement('div', { style: styles.searchGrid }, React.createElement('div', { style: styles.searchField }, React.createElement('span', { style: styles.searchFieldLabel }, '调拨日期'), React.createElement('div', { style: styles.searchFieldControl }, renderDateRangePicker(filterDateStart, filterDateEnd, setFilterDateStart, setFilterDateEnd, filterDateRangeOpen, setFilterDateRangeOpen, filterDateRangeViewLeft, filterDateRangeViewRight, setFilterDateRangeViewLeft, setFilterDateRangeViewRight)) ), React.createElement('div', { style: styles.searchField }, React.createElement('span', { style: styles.searchFieldLabel }, '调拨人'), React.createElement('div', { style: styles.searchFieldControl }, renderFilterSelect(mockOpsUsers.map(function (u) { return u.name; }), filterOperator, setFilterOperator, filterOperatorOpen, setFilterOperatorOpen, '模糊搜索', function (n) { return !filterOperator || n.indexOf(filterOperator) >= 0; }, true)) ), React.createElement('div', { style: styles.searchField }, React.createElement('span', { style: styles.searchFieldLabel }, '接收日期'), React.createElement('div', { style: styles.searchFieldControl }, renderDateRangePicker(filterReceiveDateStart, filterReceiveDateEnd, setFilterReceiveDateStart, setFilterReceiveDateEnd, filterReceiveDateRangeOpen, setFilterReceiveDateRangeOpen, filterReceiveDateRangeViewLeft, filterReceiveDateRangeViewRight, setFilterReceiveDateRangeViewLeft, setFilterReceiveDateRangeViewRight)) ), React.createElement('div', { style: styles.searchField }, React.createElement('span', { style: styles.searchFieldLabel }, '接收人'), React.createElement('div', { style: styles.searchFieldControl }, renderFilterSelect(mockOpsUsers.map(function (u) { return u.name; }), filterReceiver, setFilterReceiver, filterReceiverOpen, setFilterReceiverOpen, '模糊搜索', function (n) { return !filterReceiver || n.indexOf(filterReceiver) >= 0; }, true)) ), React.createElement('div', { style: styles.searchField }, React.createElement('span', { style: styles.searchFieldLabel }, '车牌号'), React.createElement('div', { style: styles.searchFieldControl }, renderFilterSelect(mockStockVehicles.map(function (v) { return v.plateNo; }), filterPlateNo, setFilterPlateNo, filterPlateOpen, setFilterPlateOpen, '模糊搜索', function (p) { return !filterPlateNo || p.indexOf(filterPlateNo) >= 0; }, true)) ), React.createElement('div', { style: styles.searchField }, React.createElement('span', { style: styles.searchFieldLabel }, '出发区域'), React.createElement('div', { style: styles.searchFieldControl }, renderCascader(filterDepartProvince, filterDepartCity, setFilterDepartProvince, setFilterDepartCity, filterCascaderDepartOpen, setFilterCascaderDepartOpen)) ), React.createElement('div', { style: styles.searchField }, React.createElement('span', { style: styles.searchFieldLabel }, '调拨区域'), React.createElement('div', { style: styles.searchFieldControl }, renderCascader(filterTransferProvince, filterTransferCity, setFilterTransferProvince, setFilterTransferCity, filterCascaderTransferOpen, setFilterCascaderTransferOpen)) ), React.createElement('div', { style: styles.searchField }, React.createElement('span', { style: styles.searchFieldLabel }, '调拨方式'), React.createElement('div', { style: styles.searchFieldControl }, React.createElement('select', { style: Object.assign({}, styles.select, { width: '100%', minWidth: 0 }), value: filterMethod, onChange: function (e) { setFilterMethod(e.target.value); } }, React.createElement('option', { value: '' }, '全部'), TRANSFER_METHODS.map(function (m) { return React.createElement('option', { key: m.value, value: m.value }, m.label); })) ) ), React.createElement('div', { style: styles.searchField }, React.createElement('span', { style: styles.searchFieldLabel }, '审批状态'), React.createElement('div', { style: styles.searchFieldControl }, React.createElement('select', { style: Object.assign({}, styles.select, { width: '100%', minWidth: 0 }), value: filterApprovalStatus, onChange: function (e) { setFilterApprovalStatus(e.target.value); } }, React.createElement('option', { value: '' }, '全部'), APPROVAL_STATUS.map(function (s) { return React.createElement('option', { key: s.value, value: s.value }, s.label); })) ) ) ) ), React.createElement('div', { style: styles.searchDivider }), React.createElement('div', { style: styles.searchActions }, React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnPrimary, styles.btnFixed), onClick: function () { setAppliedFilters({ filterDateStart: filterDateStart, filterDateEnd: filterDateEnd, filterOperator: filterOperator, filterReceiveDateStart: filterReceiveDateStart, filterReceiveDateEnd: filterReceiveDateEnd, filterReceiver: filterReceiver, filterPlateNo: filterPlateNo, filterDepartProvince: filterDepartProvince, filterDepartCity: filterDepartCity, filterTransferProvince: filterTransferProvince, filterTransferCity: filterTransferCity, filterMethod: filterMethod, filterApprovalStatus: filterApprovalStatus }); setCurrentPage(1); setToastMessage('查询成功'); setTimeout(function () { setToastMessage(''); }, 1500); } }, '查询'), React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnDefault, styles.btnFixed), onClick: function () { setFilterDateStart(''); setFilterDateEnd(''); setFilterReceiveDateStart(''); setFilterReceiveDateEnd(''); setFilterOperator(''); setFilterReceiver(''); setFilterPlateNo(''); setFilterDepartProvince(''); setFilterDepartCity(''); setFilterTransferProvince(''); setFilterTransferCity(''); setFilterMethod(''); setFilterApprovalStatus(''); setAppliedFilters({}); setCurrentPage(1); } }, '重置') ) ) ), React.createElement('div', { style: styles.tabs }, React.createElement('div', { style: Object.assign({}, styles.tab, listTab === 'in_progress' ? styles.tabActive : {}), onClick: function () { setListTab('in_progress'); setCurrentPage(1); setSelectedRowIds([]); } }, '进行中'), React.createElement('div', { style: Object.assign({}, styles.tab, listTab === 'history' ? styles.tabActive : {}), onClick: function () { setListTab('history'); setCurrentPage(1); setSelectedRowIds([]); } }, '历史记录') ), React.createElement('div', { style: styles.toolbar }, listTab === 'in_progress' && React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnPrimary, styles.btnFixed), onClick: function () { setAddFormData(defaultAddForm); setAddFormLines([createEmptyAddLine()]); setCurrentView('add'); } }, '新增'), React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnDefault, styles.btnFixed), onClick: function () { setToastMessage(selectedRowIds.length ? '导出' + selectedRowIds.length + '条' : '请先勾选要导出的数据'); setTimeout(function () { setToastMessage(''); }, 2000); } }, '导出') ), React.createElement('div', { style: styles.tableWrap }, React.createElement('table', { style: styles.table }, React.createElement('thead', {}, React.createElement('tr', {}, listTab === 'in_progress' ? React.createElement(React.Fragment, {}, React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap, { width: '32px' }) }, React.createElement('input', { type: 'checkbox', checked: paginatedList.length > 0 && selectedRowIds.length === paginatedList.length, onChange: function (e) { setSelectedRowIds(e.target.checked ? paginatedList.map(function (r) { return r.rowId; }) : []); } })), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '调拨日期'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发区域'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '调拨人'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '接收区域'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '调拨方式'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '调拨原因'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '车牌号'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '车辆类型'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '品牌'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '型号'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '运输方名称'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '运输方联系方式'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发里程(KM)'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发氢量'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发电量'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发停车场'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '创建日期'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap, styles.thStickyRight) }, '操作') ) : React.createElement(React.Fragment, {}, React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap, { width: '32px' }) }, React.createElement('input', { type: 'checkbox', checked: paginatedList.length > 0 && selectedRowIds.length === paginatedList.length, onChange: function (e) { setSelectedRowIds(e.target.checked ? paginatedList.map(function (r) { return r.rowId; }) : []); } })), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '调拨日期'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发区域'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '调拨人'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '接收日期'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '接收区域'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '调拨方式'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '调拨原因'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '接收人'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '车牌号'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '车辆类型'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '品牌'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '型号'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '运输方名称'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '运输方联系方式'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发里程(KM)'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '接收里程(KM)'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发氢量'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '接收氢量'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发电量'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '接收电量'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '出发停车场'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '接收停车场'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap) }, '创建日期'), React.createElement('th', { style: Object.assign({}, styles.th, styles.thNowrap, styles.thStickyRight) }, '操作') ) ) ), React.createElement('tbody', {}, paginatedList.length === 0 ? React.createElement('tr', {}, React.createElement('td', { colSpan: listTab === 'in_progress' ? 19 : 25, style: Object.assign({}, styles.td, { textAlign: 'center', color: t.neutral6 }) }, '暂无数据')) : paginatedList.map(function (row, rowIndex) { var tr = row.transfer; var line = row.line; var canReceive = tr.approvalStatus === 'completed' && !tr.hasReceiveRecord; var canEdit = ['pending_submit', 'rejected', 'withdrawn'].indexOf(tr.approvalStatus) >= 0; var canWithdraw = tr.approvalStatus === 'approving'; var checked = selectedRowIds.indexOf(row.rowId) >= 0; var isEvenRow = rowIndex % 2 === 1; var tdOneLine = Object.assign({}, styles.td, styles.tdNowrap); return React.createElement('tr', { key: row.rowId, style: isEvenRow ? styles.trStripe : styles.trOdd }, React.createElement('td', { style: tdOneLine }, React.createElement('input', { type: 'checkbox', checked: checked, onChange: function (e) { setSelectedRowIds(e.target.checked ? selectedRowIds.concat([row.rowId]) : selectedRowIds.filter(function (id) { return id !== row.rowId; })); } })), listTab === 'in_progress' ? React.createElement(React.Fragment, {}, React.createElement('td', { style: tdOneLine }, tr.transferDate), React.createElement('td', { style: tdOneLine }, tr.departLabel || '-'), React.createElement('td', { style: tdOneLine }, tr.operatorName), React.createElement('td', { style: tdOneLine }, tr.transferLabel || '-'), React.createElement('td', { style: tdOneLine }, getMethodLabel(tr.transferMethod)), React.createElement('td', { style: tdOneLine }, tr.transferReason || '-'), React.createElement('td', { style: tdOneLine }, line.plateNo || '-'), React.createElement('td', { style: tdOneLine }, line.vehicleType || '-'), React.createElement('td', { style: tdOneLine }, line.brand || '-'), React.createElement('td', { style: tdOneLine }, line.model || '-'), React.createElement('td', { style: carrierInfoTdStyle }, tr.carrierName || '-'), React.createElement('td', { style: carrierInfoTdStyle }, tr.carrierContact || '-'), React.createElement('td', { style: tdOneLine }, line.departMileage != null ? line.departMileage : '-'), React.createElement('td', { style: tdOneLine }, formatH2(line.departH2, line.departH2Unit)), React.createElement('td', { style: tdOneLine }, line.departElec != null ? line.departElec + ' kWh' : '-'), React.createElement('td', { style: tdOneLine }, line.departParking || '-'), React.createElement('td', { style: tdOneLine }, tr.createTime), React.createElement('td', { style: Object.assign({}, tdOneLine, isEvenRow ? styles.tdStickyRightStripe : styles.tdStickyRight) }, canReceive && React.createElement('a', { style: styles.actionLink, onClick: function (e) { e.preventDefault(); setViewRecord(tr); setFormDataFromTransfer(tr); setReceiveFormData({ receiveDate: '', receiverName: '张明', lines: (tr.lines || []).map(function (l) { return { plateNo: l.plateNo, vehicleType: l.vehicleType, brand: l.brand, model: l.model, departParking: l.departParking, departMileage: l.departMileage, departH2: l.departH2, departH2Unit: l.departH2Unit, departElec: l.departElec, receiveMileage: l.receiveMileage != null ? l.receiveMileage : '', receiveH2: l.receiveH2 != null ? l.receiveH2 : '', receiveElec: l.receiveElec != null ? l.receiveElec : '' }; }) }); setCurrentView('receive'); } }, '接收记录'), canEdit && React.createElement('a', { style: styles.actionLink, onClick: function (e) { e.preventDefault(); openEdit(tr); } }, '编辑'), canWithdraw && React.createElement('a', { style: styles.actionLink, onClick: function (e) { e.preventDefault(); setWithdrawConfirmRecord(tr); } }, '撤回') ) ) : React.createElement(React.Fragment, {}, React.createElement('td', { style: tdOneLine }, tr.transferDate), React.createElement('td', { style: tdOneLine }, tr.departLabel || '-'), React.createElement('td', { style: tdOneLine }, tr.operatorName), React.createElement('td', { style: tdOneLine }, tr.receiveDate || '-'), React.createElement('td', { style: tdOneLine }, tr.transferLabel || '-'), React.createElement('td', { style: tdOneLine }, getMethodLabel(tr.transferMethod)), React.createElement('td', { style: tdOneLine }, tr.transferReason || '-'), React.createElement('td', { style: tdOneLine }, tr.receiverName || '-'), React.createElement('td', { style: tdOneLine }, line.plateNo || '-'), React.createElement('td', { style: tdOneLine }, line.vehicleType || '-'), React.createElement('td', { style: tdOneLine }, line.brand || '-'), React.createElement('td', { style: tdOneLine }, line.model || '-'), React.createElement('td', { style: carrierInfoTdStyle }, tr.carrierName || '-'), React.createElement('td', { style: carrierInfoTdStyle }, tr.carrierContact || '-'), React.createElement('td', { style: tdOneLine }, line.departMileage != null ? line.departMileage : '-'), React.createElement('td', { style: tdOneLine }, line.receiveMileage != null ? line.receiveMileage : '-'), React.createElement('td', { style: tdOneLine }, formatH2(line.departH2, line.departH2Unit)), React.createElement('td', { style: tdOneLine }, formatH2(line.receiveH2, line.departH2Unit)), React.createElement('td', { style: tdOneLine }, line.departElec != null ? line.departElec + ' kWh' : '-'), React.createElement('td', { style: tdOneLine }, line.receiveElec != null ? line.receiveElec + ' kWh' : '-'), React.createElement('td', { style: tdOneLine }, line.departParking || '-'), React.createElement('td', { style: tdOneLine }, line.receiveParking || '-'), React.createElement('td', { style: tdOneLine }, tr.createTime), React.createElement('td', { style: Object.assign({}, tdOneLine, isEvenRow ? styles.tdStickyRightStripe : styles.tdStickyRight) }, React.createElement('a', { style: styles.actionLink, onClick: function (e) { e.preventDefault(); setViewRecord(tr); setFormDataFromTransfer(tr); setCurrentView('view'); } }, '查看')) ) ); }) ) ) ), totalItems > 0 && React.createElement('div', { style: styles.pagination }, React.createElement('div', { style: styles.paginationLeft }, React.createElement('span', {}, '共 ' + totalItems + ' 条'), React.createElement('span', { style: { marginLeft: '16px' } }, '每页'), React.createElement('select', { style: styles.paginationSelect, value: pageSize, onChange: function (e) { setPageSize(Number(e.target.value)); setCurrentPage(1); } }, React.createElement('option', { value: 10 }, '10'), React.createElement('option', { value: 20 }, '20'), React.createElement('option', { value: 50 }, '50'), React.createElement('option', { value: 100 }, '100') ), React.createElement('span', {}, '条') ), React.createElement('div', { style: styles.paginationRight }, React.createElement('button', { style: Object.assign({}, styles.paginationBtn, currentPage <= 1 ? styles.paginationBtnDisabled : {}), disabled: currentPage <= 1, onClick: function () { if (currentPage > 1) setCurrentPage(currentPage - 1); } }, '上一页'), React.createElement('span', { style: { margin: '0 8px' } }, currentPage + ' / ' + totalPages), React.createElement('button', { style: Object.assign({}, styles.paginationBtn, currentPage >= totalPages ? styles.paginationBtnDisabled : {}), disabled: currentPage >= totalPages, onClick: function () { if (currentPage < totalPages) setCurrentPage(currentPage + 1); } }, '下一页') ) ) ) ), currentView === 'add' && React.createElement(React.Fragment, {}, React.createElement('div', { style: { marginBottom: t.spacing16, fontSize: t.fontSize16, fontWeight: 600, color: t.neutral8 } }, '新增调拨'), renderAddPage() ), currentView === 'edit' && React.createElement(React.Fragment, {}, React.createElement('div', { style: { marginBottom: t.spacing16, fontSize: t.fontSize16, fontWeight: 600, color: t.neutral8 } }, '编辑调拨'), renderEditPage() ), withdrawConfirmRecord && React.createElement('div', { style: styles.modalMask, onClick: function () { setWithdrawConfirmRecord(null); } }, React.createElement('div', { style: Object.assign({}, styles.modalBox, { minWidth: '360px' }), onClick: function (e) { e.stopPropagation(); } }, React.createElement('div', { style: styles.modalTitle }, '确认撤回'), React.createElement('p', { style: { margin: '0 0 16px', fontSize: t.fontSize14 } }, '是否确认撤回该调拨记录?'), React.createElement('div', { style: styles.modalFooter }, React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnDefault), onClick: function () { setWithdrawConfirmRecord(null); } }, '取消'), React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnPrimary), onClick: function () { handleWithdraw(withdrawConfirmRecord); } }, '确认') ) ) ), currentView === 'view' && viewRecord && renderViewPage(viewRecord), currentView === 'receive' && viewRecord && React.createElement('div', { style: styles.card }, React.createElement('div', { style: styles.modalTitle }, '接收记录'), renderFormContent(true, true), React.createElement('div', { style: styles.formRow }, React.createElement('label', { style: styles.formLabel }, '接收日期', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('input', { style: styles.input, type: 'date', value: receiveFormData.receiveDate, onChange: function (e) { setReceiveFormData(Object.assign({}, receiveFormData, { receiveDate: e.target.value })); } }) ), React.createElement('div', { style: Object.assign({}, styles.formRow, { marginTop: t.spacing24 }) }, React.createElement('div', { style: styles.tableWrap }, React.createElement('table', { style: styles.table }, React.createElement('thead', {}, React.createElement('tr', {}, React.createElement('th', { style: styles.th }, '车牌号'), React.createElement('th', { style: styles.th }, '车辆类型'), React.createElement('th', { style: styles.th }, '品牌'), React.createElement('th', { style: styles.th }, '型号'), React.createElement('th', { style: styles.th }, '出发停车场'), React.createElement('th', { style: styles.th }, '出发里程(KM)'), React.createElement('th', { style: styles.th }, '接收里程(KM)', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('th', { style: styles.th }, '出发氢量'), React.createElement('th', { style: styles.th }, '接收氢量', React.createElement('span', { style: styles.formLabelReq }, '*')), React.createElement('th', { style: styles.th }, '出发电量'), React.createElement('th', { style: styles.th }, '接收电量', React.createElement('span', { style: styles.formLabelReq }, '*')) ) ), React.createElement('tbody', {}, (receiveFormData.lines || []).map(function (line, idx) { var isEvenRow = idx % 2 === 1; return React.createElement('tr', { key: idx, style: isEvenRow ? styles.trStripe : styles.trOdd }, React.createElement('td', { style: styles.td }, line.plateNo), React.createElement('td', { style: styles.td }, line.vehicleType), React.createElement('td', { style: styles.td }, line.brand), React.createElement('td', { style: styles.td }, line.model), React.createElement('td', { style: styles.td }, line.departParking), React.createElement('td', { style: styles.td }, line.departMileage != null ? line.departMileage : '-'), React.createElement('td', { style: styles.td }, React.createElement('input', { style: Object.assign({}, styles.input, { width: '80px' }), type: 'number', value: line.receiveMileage, onChange: function (e) { var next = receiveFormData.lines.slice(); next[idx] = Object.assign({}, next[idx], { receiveMileage: e.target.value }); setReceiveFormData(Object.assign({}, receiveFormData, { lines: next })); } })), React.createElement('td', { style: styles.td }, formatH2(line.departH2, line.departH2Unit)), React.createElement('td', { style: styles.td }, React.createElement(React.Fragment, {}, React.createElement('input', { style: Object.assign({}, styles.input, { width: '80px' }), value: line.receiveH2, onChange: function (e) { var next = receiveFormData.lines.slice(); next[idx] = Object.assign({}, next[idx], { receiveH2: e.target.value }); setReceiveFormData(Object.assign({}, receiveFormData, { lines: next })); } }), React.createElement('span', { style: { marginLeft: '4px' } }, (line.departH2Unit && !String(line.receiveH2 || '').match(/%|MPa|KG$/)) ? line.departH2Unit : ''))), React.createElement('td', { style: styles.td }, (line.departElec != null ? line.departElec : '-') + ' kWh'), React.createElement('td', { style: styles.td }, React.createElement('input', { style: Object.assign({}, styles.input, { width: '80px' }), type: 'number', value: line.receiveElec, onChange: function (e) { var next = receiveFormData.lines.slice(); next[idx] = Object.assign({}, next[idx], { receiveElec: e.target.value }); setReceiveFormData(Object.assign({}, receiveFormData, { lines: next })); } })) ); }) ) ) ) ), React.createElement('div', { style: styles.modalFooter }, React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnDefault), onClick: function () { setViewRecord(null); setCurrentView('list'); } }, '取消'), React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnDefault), onClick: function () { if (!receiveFormData.receiveDate) { setToastMessage('请选择接收日期'); setTimeout(function () { setToastMessage(''); }, 2000); return; } var recLines = receiveFormData.lines || []; for (var ri = 0; ri < recLines.length; ri++) { var fl = recLines[ri]; var rn = ri + 1; if (fl.receiveMileage === '' || fl.receiveMileage === undefined || fl.receiveMileage === null) { setToastMessage('请填写第' + rn + '行接收里程(KM)'); setTimeout(function () { setToastMessage(''); }, 2000); return; } if (fl.receiveH2 === '' || fl.receiveH2 === undefined || fl.receiveH2 === null) { setToastMessage('请填写第' + rn + '行接收氢量'); setTimeout(function () { setToastMessage(''); }, 2000); return; } if (fl.receiveElec === '' || fl.receiveElec === undefined || fl.receiveElec === null) { setToastMessage('请填写第' + rn + '行接收电量'); setTimeout(function () { setToastMessage(''); }, 2000); return; } } var updatedLines = (viewRecord.lines || []).map(function (l, i) { var formLine = (receiveFormData.lines || [])[i] || {}; var next = {}; for (var k in l) next[k] = l[k]; next.receiveMileage = formLine.receiveMileage !== '' && formLine.receiveMileage !== undefined ? Number(formLine.receiveMileage) : null; next.receiveH2 = formLine.receiveH2 !== '' && formLine.receiveH2 !== undefined ? formLine.receiveH2 : null; next.receiveElec = formLine.receiveElec !== '' && formLine.receiveElec !== undefined ? Number(formLine.receiveElec) : null; next.receiveParking = '抵达停车场'; next.receiverName = receiveFormData.receiverName; return next; }); var updated = {}; for (var k in viewRecord) updated[k] = viewRecord[k]; updated.hasReceiveRecord = true; updated.receiveDate = receiveFormData.receiveDate; updated.receiverId = 'u1'; updated.receiverName = receiveFormData.receiverName; updated.lines = updatedLines; setMockTransferList(mockTransferList.map(function (r) { return r.id === viewRecord.id ? updated : r; })); setViewRecord(updated); setToastMessage('保存成功'); setTimeout(function () { setToastMessage(''); }, 2000); } }, '保存'), React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnPrimary), onClick: function () { if (!receiveFormData.receiveDate) { setToastMessage('请选择接收日期'); setTimeout(function () { setToastMessage(''); }, 2000); return; } var recLines2 = receiveFormData.lines || []; for (var ri2 = 0; ri2 < recLines2.length; ri2++) { var fl2 = recLines2[ri2]; var rn2 = ri2 + 1; if (fl2.receiveMileage === '' || fl2.receiveMileage === undefined || fl2.receiveMileage === null) { setToastMessage('请填写第' + rn2 + '行接收里程(KM)'); setTimeout(function () { setToastMessage(''); }, 2000); return; } if (fl2.receiveH2 === '' || fl2.receiveH2 === undefined || fl2.receiveH2 === null) { setToastMessage('请填写第' + rn2 + '行接收氢量'); setTimeout(function () { setToastMessage(''); }, 2000); return; } if (fl2.receiveElec === '' || fl2.receiveElec === undefined || fl2.receiveElec === null) { setToastMessage('请填写第' + rn2 + '行接收电量'); setTimeout(function () { setToastMessage(''); }, 2000); return; } } var updatedLines = (viewRecord.lines || []).map(function (l, i) { var formLine = (receiveFormData.lines || [])[i] || {}; var next = {}; for (var k in l) next[k] = l[k]; next.receiveMileage = formLine.receiveMileage !== '' && formLine.receiveMileage !== undefined ? Number(formLine.receiveMileage) : null; next.receiveH2 = formLine.receiveH2 !== '' && formLine.receiveH2 !== undefined ? formLine.receiveH2 : null; next.receiveElec = formLine.receiveElec !== '' && formLine.receiveElec !== undefined ? Number(formLine.receiveElec) : null; next.receiveParking = '抵达停车场'; next.receiverName = receiveFormData.receiverName; return next; }); var updated = {}; for (var k in viewRecord) updated[k] = viewRecord[k]; updated.hasReceiveRecord = true; updated.receiveDate = receiveFormData.receiveDate; updated.receiverId = 'u1'; updated.receiverName = receiveFormData.receiverName; updated.lines = updatedLines; setMockTransferList(mockTransferList.map(function (r) { return r.id === viewRecord.id ? updated : r; })); setToastMessage('保存成功'); setTimeout(function () { setToastMessage(''); }, 2000); setViewRecord(null); setCurrentView('list'); } }, '提交') ) ), showRequirementModal && React.createElement('div', { style: styles.modalMask, onClick: function () { setShowRequirementModal(false); } }, React.createElement('div', { style: Object.assign({}, styles.modalBox, { minWidth: '640px', maxWidth: '800px' }), onClick: function (e) { e.stopPropagation(); } }, React.createElement('button', { style: styles.modalCloseBtn, onClick: function () { setShowRequirementModal(false); }, title: '关闭' }, '×'), React.createElement('div', { style: { paddingRight: '32px', paddingBottom: t.spacing24, lineHeight: '1.65', maxHeight: '85vh', overflowY: 'auto', fontSize: t.fontSize14, color: t.neutral7 } }, React.createElement('div', { style: Object.assign({}, styles.requirementSection, { marginTop: 0 }) }, React.createElement('div', { style: styles.requirementSectionTitle }, '面包屑'), React.createElement('div', { style: styles.requirementItem }, '运维管理-车辆业务-调拨管理') ), React.createElement('div', { style: styles.requirementSection }, React.createElement('div', { style: styles.requirementSectionTitle }, '筛选'), React.createElement('div', { style: styles.requirementItem }, '1.调拨日期:日期选择器,支持选择开始-结束时间'), React.createElement('div', { style: styles.requirementItem }, '2.调拨人:选择器,支持从输入框输入内容模糊搜索'), React.createElement('div', { style: styles.requirementItem }, '3.接收日期:日期选择器,支持选择开始-结束时间'), React.createElement('div', { style: styles.requirementItem }, '4.接收人:选择器,支持从输入框输入内容模糊搜索'), React.createElement('div', { style: styles.requirementItem }, '5.车牌号:选择器,支持从输入框输入内容模糊搜索'), React.createElement('div', { style: styles.requirementItem }, '6.出发区域:级联选择,支持省市二级级联'), React.createElement('div', { style: styles.requirementItem }, '7.调拨区域:级联选择,支持省市二级级联'), React.createElement('div', { style: styles.requirementItem }, '8.调拨方式:选择器,状态分为:第三方运输、司机驾驶'), React.createElement('div', { style: styles.requirementItem }, '9.审批状态:选择器,状态分为:待提交、待审批、审批中、审批完成、审批驳回、撤回'), React.createElement('div', { style: Object.assign({}, styles.requirementItem, { marginTop: t.spacing8, marginBottom: t.spacing4 }) }, '审批状态说明(该说明只做需求说明,AI无需分析):'), React.createElement('div', { style: Object.assign({}, styles.requirementSubItem, { paddingLeft: t.spacing24 }) }, React.createElement('div', { style: { marginBottom: '2px' } }, 'a.待提交:新增完成后选择保存,但未提交审核;'), React.createElement('div', { style: { marginBottom: '2px' } }, 'b.待审批:已提交审核,但未通过第一个流程节点审核;'), React.createElement('div', { style: { marginBottom: '2px' } }, 'c.审批中:已提交审核,至少完成1个以上节点审核,但未完成最终节点审核;'), React.createElement('div', { style: { marginBottom: '2px' } }, 'd.审批完成:已提交审核,并完成最终节点审核;'), React.createElement('div', { style: { marginBottom: '2px' } }, 'e.审批驳回:已提交审核,但任意节点审核未通过,审批驳回的记录支持修改后重新提交审核;'), React.createElement('div', {}, 'f.撤回:已提交审核,但完成最终审核前主动撤回,撤回的记录支持修改后重新提交审核;') ) ), React.createElement('div', { style: styles.requirementSection }, React.createElement('div', { style: styles.requirementSectionTitle }, '列表'), React.createElement('div', { style: styles.requirementItem }, '列表由两个tab页组成,分别为:进行中、历史记录;'), React.createElement('div', { style: Object.assign({}, styles.requirementItem, { marginTop: t.spacing12, marginBottom: t.spacing4 }) }, 'a.进行中tab:显示审批状态为待提交、待审批、审批完成、审核驳回、撤回的记录以及未补充接收记录的数据:'), React.createElement('div', { style: Object.assign({}, styles.requirementSubItem, { paddingLeft: t.spacing24, marginBottom: t.spacing8 }) }, '列表上方右侧为新增、导出(支持多选)按钮,下方为分页功能,支持选择单页显示多少条数据记录,显示字段按以下顺序'), [ '1.调拨日期:新建调拨记录时填写的调拨日期,格式为YYYY-MM-DD', '2.出发区域:显示该车辆出发时区域', '3.调拨人:新建调拨记录的操作人', '4.接收区域:新建调拨记录时填写的接收区域', '5.调拨方式:新建调拨记录时选择的状态', '6.调拨原因:新建调拨记录时输入的调拨原因', '7.运输方名称:新建调拨记录时输入的运输方名称', '8.运输方联系方式:新建调拨记录时输入的运输方联系方式', '9.车牌号:新建调拨记录时填写的车牌号,每个车牌号形成一条单独记录;', '10.车辆类型:根据车牌号自动反写车辆类型', '11.品牌:根据车牌号自动反写品牌', '12.型号:根据车牌号自动反写型号', '13.运输方信息:新建调拨记录时手动输入的运输方名称及联系方式,在列表中显示为两行,上方为运输方名称,下方为联系方式', '14.出发里程(KM):新建调拨记录时填写的出发里程', '15.出发氢量:新建调拨记录时填写的出发氢量,单位根据车辆型号对应氢气计量单位自动匹配,分为%、MPa、KG,分别给出一些样例', '16.出发电量:新建调拨记录时填写的出发电量,单位为kWh', '17.出发停车场:新建调拨记录时该车辆出发时的停车场', '18.创建日期:显示该记录创建日期', '19.操作:接收记录、编辑、撤回;操作记录说明如下' ].map(function (txt, i) { return React.createElement('div', { key: i, style: Object.assign({}, styles.requirementSubItem, { paddingLeft: t.spacing24, marginBottom: '2px' }) }, txt); }), React.createElement('div', { style: Object.assign({}, styles.requirementSubItem, { paddingLeft: t.spacing24 }) }, React.createElement('div', { style: { marginBottom: '2px' } }, 'a.接收记录:点击后与新增页样式和字段相同,但只有接收日期、抵达里程(KM)、抵达氢量、抵达电量、接收停车场等字段可以操作,仅审核状态为审核完成时显示该功能'), React.createElement('div', { style: { marginBottom: '2px' } }, 'b.编辑:审核状态为待提交、审批驳回、撤回的数据可进行编辑,其他审核状态不显示编辑,点击编辑后页面与新增页样式相同所有字段可编辑;'), React.createElement('div', {}, 'c.撤回:点击弹出框进行二次确认,点击弹出框确认按钮toast提示撤回成功,点击弹出框取消按钮,关闭弹出框;仅在审批状态为审批中可撤回,如审批状态为已完成则不显示撤回;') ), React.createElement('div', { style: Object.assign({}, styles.requirementItem, { marginTop: t.spacing16, marginBottom: t.spacing4 }) }, 'b.历史记录tab:'), React.createElement('div', { style: Object.assign({}, styles.requirementSubItem, { paddingLeft: t.spacing24, marginBottom: t.spacing8 }) }, '显示审批状态为审核完成以及完成补充接收记录的数据:列表上方右侧为导出(支持多选)按钮,下方为分页功能,支持选择单页显示多少条数据记录'), [ '1.调拨日期:新建调拨记录时填写的调拨日期,格式为YYYY-MM-DD', '2.出发区域:显示该车辆出发时区域', '3.调拨人:新建调拨记录的操作人', '4.接收日期:补充接收记录时填写的接收日期,格式为YYYY-MM-DD', '5.接收区域:新建调拨记录时填写的接收区域', '6.调拨方式:新建调拨记录时选择的状态', '7.调拨原因:新建调拨记录时输入的调拨原因', '8.运输方名称:新建调拨记录时输入的运输方名称', '9.运输方联系方式:新建调拨记录时输入的运输方联系方式', '10.接收人:补充接收记录时的操作人', '11.车牌号:新建调拨记录时填写的车牌号,每个车牌号形成一条单独记录;', '12.车辆类型:根据车牌号自动反写车辆类型', '13.品牌:根据车牌号自动反写品牌', '14.型号:根据车牌号自动反写型号', '15.运输方信息:新建调拨记录时手动输入的运输方名称及联系方式,在列表中显示为两行,上方为运输方名称,下方为联系方式', '16.出发里程(KM):新建调拨记录时填写的出发里程', '17.接收里程(KM):补充接收记录时填写的抵达里程', '18.出发氢量:新建调拨记录时填写的出发氢量,单位根据车辆型号对应氢气计量单位自动匹配,分为%、MPa、KG,分别给出一些样例', '19.接收氢量:补充接收记录时填写的抵达氢量,单位根据车辆型号对应氢气计量单位自动匹配,分为%、MPa、KG,分别给出一些样例', '20.出发电量:新建调拨记录时填写的出发电量,单位为kWh', '21.接收电量:补充接收记录时填写的抵达电量,单位为kWh', '22.出发停车场:新建调拨记录时该车辆出发时的停车场', '23.接收停车场:补充接收记录时该车辆抵达场', '24.创建日期:显示该记录创建日期', '25.操作:查看;操作记录说明如下' ].map(function (txt, i) { return React.createElement('div', { key: i, style: Object.assign({}, styles.requirementSubItem, { paddingLeft: t.spacing24, marginBottom: '2px' }) }, txt); }), React.createElement('div', { style: Object.assign({}, styles.requirementSubItem, { paddingLeft: t.spacing24 }) }, 'a.查看:与接收记录页所有字段和布局相同,但所有字段控件均为禁用状态;') ), React.createElement('div', { style: styles.requirementSection }, React.createElement('div', { style: styles.requirementSectionTitle }, '新增'), React.createElement('div', { style: styles.requirementItem }, '点击新增按钮以打开新页面的方式进行操作。'), React.createElement('div', { style: styles.requirementItem }, '页面分为上下两部分组成,上方以3列布局,显示以下字段:'), [ '1.调拨日期:必填项,日期选择器,格式为YYYY-MM-DD', '2.出发区域:必填项,级联选择器,显示格式为:省-市', '3.接受区域:必填项,级联选择器,显示格式为:省-市', '4.调拨方式:必填项,按钮式选择器,选项分别为第三方运输、司机驾驶', '5.调拨原因:必填项,文本域', '6.运输方名称:必填项,输入框,输入框提示信息为请输入运输方名称或司机姓名', '7.运输方联系方式:必填项,输入框,输入框提示信息为请输入运输方联系方式' ].map(function (txt, i) { return React.createElement('div', { key: i, style: Object.assign({}, styles.requirementSubItem, { paddingLeft: t.spacing24 }) }, txt); }), React.createElement('div', { style: Object.assign({}, styles.requirementItem, { marginTop: t.spacing8 }) }, '页面下方以可编辑列表方式显示以下字段,默认显示一行数据,列表下方为新增一行按钮,点击新增一行数据'), [ '1.车牌号:选择器,输入框支持模糊搜索,只能选择状态为库存的车辆', '2.车辆类型:直接显示内容,根据车牌号自动反写车辆类型', '3.品牌:直接显示内容,根据车牌号自动反写品牌', '4.型号:直接显示内容,根据车牌号自动反写型号', '5.出发停车场:直接显示内容,根据车牌号当前停车场自动反写', '6.出发里程(KM):输入框', '7.出发氢量:输入框,后缀为单位,单位根据该车辆型号参数内氢系统仪表盘单位字段自动反写单位,如未设置则不显示后缀单位', '8.出发电量:输入框,后缀为单位,单位为kWh', '9.操作:删除,点击后删除该行数据' ].map(function (txt, i) { return React.createElement('div', { key: i, style: Object.assign({}, styles.requirementSubItem, { paddingLeft: t.spacing24 }) }, txt); }), React.createElement('div', { style: Object.assign({}, styles.requirementItem, { marginTop: t.spacing8 }) }, '页面最下方为提交审核、保存、取消按钮'), React.createElement('div', { style: Object.assign({}, styles.requirementSubItem, { paddingLeft: t.spacing24 }) }, '点击提交审核提交并转入调拨审核流程;点击保存,保存数据但不提交审核;点击取消,跳转回调拨列表页') ), React.createElement('div', { style: styles.requirementSection }, React.createElement('div', { style: styles.requirementSectionTitle }, '接收记录'), React.createElement('div', { style: styles.requirementItem }, '上方显示新增页所有字段和布局,但所有组件为禁用状态,除此外新增一个可编辑字段'), React.createElement('div', { style: Object.assign({}, styles.requirementSubItem, { paddingLeft: t.spacing24 }) }, '1.接收日期:必填项,日期选择器,格式为YYYY-MM-DD'), React.createElement('div', { style: Object.assign({}, styles.requirementItem, { marginTop: t.spacing8 }) }, '页面下方以可编辑列表方式显示以下字段'), [ '2.车牌号:文字方式显示新增时记录的车牌号', '3.车辆类型:文字方式显示新增时记录的车牌号对应车辆类型', '4.品牌:文字方式显示新增时记录的车牌号对应品牌', '5.型号:文字方式显示新增时记录的车牌号对应型号', '6.出发停车场:文字方式显示新增时记录的车牌号对应停车场', '7.出发里程(KM):文字方式显示新增时记录的出发里程', '8.接收里程(KM):输入框', '9.出发氢量:文字显示新增时记录的车牌号对应出发氢量,并显示单位', '10.接收氢量:输入框,后缀为单位,单位根据车辆型号对应氢气计量单位自动匹配,分为%、MPa、KG', '11.出发电量:文字显示新增时记录的车牌号对应出发电量,单位为kWh', '12.接收电量:输入框,后缀为单位,单位为kWh' ].map(function (txt, i) { return React.createElement('div', { key: i, style: Object.assign({}, styles.requirementSubItem, { paddingLeft: t.spacing24 }) }, txt); }) ), React.createElement('div', { style: styles.requirementSection }, React.createElement('div', { style: styles.requirementSectionTitle }, '导出'), React.createElement('div', { style: styles.requirementItem }, '支持选择器选择对应数据进行导出') ) ) )), toastMessage && React.createElement('div', { style: styles.toast }, toastMessage) ) ); }; if (typeof window !== 'undefined') { window.Component = Component; function mount() { var rootEl = document.getElementById('root'); if (rootEl && window.ReactDOM && window.React) { var root = ReactDOM.createRoot(rootEl); root.render(React.createElement(Component)); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', mount); } else { setTimeout(mount, 0); } }