1049 lines
60 KiB
JavaScript
1049 lines
60 KiB
JavaScript
// 【重要】必须使用 const Component 作为组件变量名
|
||
// 提车首付款 - 车辆资产管理后台（运维管理-财务管理-提车首付款）
|
||
|
||
const Component = function() {
|
||
var useState = React.useState;
|
||
var useCallback = React.useCallback;
|
||
var useMemo = React.useMemo;
|
||
|
||
// 分页
|
||
var pageState = useState(1);
|
||
var currentPage = pageState[0];
|
||
var setCurrentPage = pageState[1];
|
||
var pageSizeState = useState(10);
|
||
var pageSize = pageSizeState[0];
|
||
var setPageSize = pageSizeState[1];
|
||
|
||
// 筛选：表单输入值（用户填写）
|
||
var contractInputState = useState('');
|
||
var contractInput = contractInputState[0];
|
||
var setContractInput = contractInputState[1];
|
||
var projectInputState = useState('');
|
||
var projectInput = projectInputState[0];
|
||
var setProjectInput = projectInputState[1];
|
||
var customerInputState = useState('');
|
||
var customerInput = customerInputState[0];
|
||
var setCustomerInput = customerInputState[1];
|
||
var statusInputState = useState([]);
|
||
var statusInput = statusInputState[0];
|
||
var setStatusInput = statusInputState[1];
|
||
// 可搜索选择器下拉展开：contract | project | customer | null
|
||
var filterDropdownOpenState = useState(null);
|
||
var filterDropdownOpen = filterDropdownOpenState[0];
|
||
var setFilterDropdownOpen = filterDropdownOpenState[1];
|
||
// 付款状态多选下拉展开
|
||
var statusDropdownOpenState = useState(false);
|
||
var statusDropdownOpen = statusDropdownOpenState[0];
|
||
var setStatusDropdownOpen = statusDropdownOpenState[1];
|
||
// 筛选：已生效条件（点击查询后与列表联动）
|
||
var appliedFilterState = useState({
|
||
contract: '',
|
||
project: '',
|
||
customer: '',
|
||
status: []
|
||
});
|
||
var appliedFilter = appliedFilterState[0];
|
||
var setAppliedFilter = appliedFilterState[1];
|
||
|
||
// 查看页：当前视图 list | detail
|
||
var currentViewState = useState('list');
|
||
var currentView = currentViewState[0];
|
||
var setCurrentView = currentViewState[1];
|
||
// 详情模式：view 查看 | payment 付款
|
||
var detailModeState = useState('view');
|
||
var detailMode = detailModeState[0];
|
||
var setDetailMode = detailModeState[1];
|
||
// 付款表单（付款模式可编辑）
|
||
var paymentFormState = useState({
|
||
discountAmount: '',
|
||
discountReason: '',
|
||
hydrogenPaidAmount: '',
|
||
vehicleList: [],
|
||
hydrogenList: [],
|
||
violationList: [],
|
||
returnFeeList: []
|
||
});
|
||
var paymentForm = paymentFormState[0];
|
||
var setPaymentForm = paymentFormState[1];
|
||
// 服务费明细弹窗
|
||
var popoverState = useState({ type: null, data: null });
|
||
var popover = popoverState[0];
|
||
var setPopover = popoverState[1];
|
||
// 照片查看器
|
||
var photoViewerState = useState({ visible: false, photos: [], currentIndex: 0 });
|
||
var photoViewer = photoViewerState[0];
|
||
var setPhotoViewer = photoViewerState[1];
|
||
// 当前查看/付款的账单 id
|
||
var viewingBillIdState = useState(null);
|
||
var viewingBillId = viewingBillIdState[0];
|
||
var setViewingBillId = viewingBillIdState[1];
|
||
// 审核状态覆盖（id -> draft|pending|auditing|completed|withdrawn|rejected）待提交|审核中|审核完成|撤回|审核驳回
|
||
var approvalStatusMapState = useState({});
|
||
var approvalStatusMap = approvalStatusMapState[0];
|
||
var setApprovalStatusMap = approvalStatusMapState[1];
|
||
// 撤回二次确认：待撤回的 row id
|
||
var withdrawConfirmIdState = useState(null);
|
||
var withdrawConfirmId = withdrawConfirmIdState[0];
|
||
var setWithdrawConfirmId = withdrawConfirmIdState[1];
|
||
// 查看需求明细弹窗
|
||
var requirementDetailVisibleState = useState(false);
|
||
var requirementDetailVisible = requirementDetailVisibleState[0];
|
||
var setRequirementDetailVisible = requirementDetailVisibleState[1];
|
||
|
||
// 需求明细文案（提车首付款）
|
||
var requirementDetailContent = '提车首付款\n\n1.面包屑：\n1.1.运维管理-财务管理-提车首付款\n\n2.筛选：\n2.1.合同编码：合同编码显示租赁合同编码；选择器，支持从输入框进行内容模糊搜索；\n2.2.项目名称：项目名称显示租赁合同对应项目名称；选择器，支持从输入框输入内容模糊搜索；\n2.3.客户名称：客户名称显示租赁合同对应客户名称，选择器，支持从输入框输入内容模糊搜索；\n2.4.付款状态：显示合同提车首付款付款状态，选择器，支持多选；选项为全部、部分付款、未付款、已付款；\n2.5.右侧为查询和重置按钮，筛选条件以且的模式进行筛选，点击重置清空条件；\n\n3.列表：\n3.1.列表下方为分页器，支持选择单页数据条数；\n3.2.列表字段按照以下排序：付款状态、合同编码、项目名称、客户名称、合同生效日期、首期应付金额、实付金额、减免金额、未付金额、备注、操作；\n3.3.审核状态：分为待提交、审核中、审核完成、审核驳回、撤回；\n 流程流转为：待提交（交车任务生效/完成收费补充保存） → 完成收费补充提交 → 审核中（可撤回，撤回后显示为撤回）→ 审核完成（最终节点审核完成） / 审核驳回（驳回显示为审核驳回）；\n a.待提交：交车单交车成功时系统会自动生成提车首付款，状态为「待提交」；业务人员点击收费补充信息点击保存，状态也为「待提交」，同时操作可：查看、收费；\n b.审核中：提车首付款完成收费信息填写，点击提交审核，状态变更为「审核中」，同时操作可：查看、撤回；\n c.审核完成：提车首付款完成审核后，显示为审核完成，同时操作可：查看；\n d.审核驳回：提车首付款在任意审核节点被驳回时，显示为审核驳回，同时操作可：查看、收费；\n e.撤回：提车首付款在审核中时，发起人可进行撤回，撤回后可重新补充收费信息并再次提交；操作可：查看、收费；\n3.4.付款状态：显示付款状态，状态分为：已付款、部分付款、未付款；\n a.已付款：应付金额为0时，显示为已付款；\n b.部分付款：未付金额＞0且＜应付金额时，显示为部分付款；\n c.未付款：实付金额为0时，显示为未付款；\n3.5.合同编码：显示租赁合同-合同编码；\n3.6.项目名称：显示该项目租赁合同-项目名称；\n3.7.客户名称：显示该项目租赁合同-客户名称；\n3.8.合同生效日期：显示该项目租赁合同-生效日期，格式为YYYY-MM-DD；\n3.9.首期应付金额：显示该笔账单首期应付金额，精确至2位小数，计算方式为：应付款总额=车辆月租金总计+服务费总计+保证金总计+氢气预付款金额；\n3.10.实付金额：显示该笔账单实付金额，精确至2位小数，如未付则显示为0；如已上传付款信息，则显示金额，计算方式为：实付款金额=实付月租金总计+实付服务费总计+实付保证金总计+氢气实付款金额\n3.11.减免金额：显示该笔账单减免金额，精确至2位小数，如无则显示为0；\n3.12.未付金额：显示该笔账单未付金额，精确至2位小数，如无则显示为0；未付款金额=应付款总额-实付金额-减免金额\n3.13.减免原因：显示减免金额添加原因；\n3.14.操作：查看、收费、撤回；\n a.查看：点击查看进入查看页；\n b.收费：点击收费，录入收费信息；\n c.撤回：审核状态为审核中时，点击撤回，进行二次提示，确认后该条数据审核状态显示为撤回，可重新进行收费操作；';
|
||
|
||
// 模拟数据：合同编码、项目、客户选项（用于选择器展示，可选）
|
||
var contractOptions = useMemo(function() {
|
||
return [
|
||
{ value: 'HT-ZL-2025-001', label: 'HT-ZL-2025-001' },
|
||
{ value: 'HT-ZL-2025-002', label: 'HT-ZL-2025-002' },
|
||
{ value: 'HT-ZL-2025-003', label: 'HT-ZL-2025-003' },
|
||
{ value: 'HT-ZL-2024-088', label: 'HT-ZL-2024-088' },
|
||
{ value: 'HT-ZL-2024-099', label: 'HT-ZL-2024-099' }
|
||
];
|
||
}, []);
|
||
var projectOptions = useMemo(function() {
|
||
return [
|
||
{ value: '北京朝阳区租赁项目', label: '北京朝阳区租赁项目' },
|
||
{ value: '上海浦东车辆租赁', label: '上海浦东车辆租赁' },
|
||
{ value: '广州天河运营项目', label: '广州天河运营项目' },
|
||
{ value: '深圳南山首期项目', label: '深圳南山首期项目' }
|
||
];
|
||
}, []);
|
||
var customerOptions = useMemo(function() {
|
||
return [
|
||
{ value: '某某科技有限公司', label: '某某科技有限公司' },
|
||
{ value: '某某物流有限公司', label: '某某物流有限公司' },
|
||
{ value: '某某制造有限公司', label: '某某制造有限公司' },
|
||
{ value: '某某出行服务公司', label: '某某出行服务公司' }
|
||
];
|
||
}, []);
|
||
|
||
// 模拟列表数据
|
||
var mockList = useMemo(function() {
|
||
var list = [];
|
||
var statuses = ['paid', 'partial', 'unpaid'];
|
||
var approvalStatuses = ['draft', 'pending', 'auditing', 'completed', 'withdrawn', 'rejected'];
|
||
var contracts = ['HT-ZL-2025-001', 'HT-ZL-2025-002', 'HT-ZL-2025-003', 'HT-ZL-2024-088', 'HT-ZL-2024-099'];
|
||
var projects = ['北京朝阳区租赁项目', '上海浦东车辆租赁', '广州天河运营项目', '深圳南山首期项目'];
|
||
var customers = ['某某科技有限公司', '某某物流有限公司', '某某制造有限公司', '某某出行服务公司'];
|
||
for (var i = 1; i <= 28; i++) {
|
||
var status = statuses[i % 3];
|
||
var approvalStatus = approvalStatuses[i % 6];
|
||
var firstPayable = 15000 + i * 800;
|
||
var paid = 0;
|
||
var discount = 0;
|
||
if (status === 'paid') {
|
||
paid = firstPayable;
|
||
discount = i % 4 === 0 ? 200 : 0;
|
||
} else if (status === 'partial') {
|
||
paid = Math.floor(firstPayable * 0.5);
|
||
discount = i % 5 === 0 ? 100 : 0;
|
||
}
|
||
var unpaid = Math.max(0, firstPayable - paid - discount);
|
||
var remark = status !== 'unpaid' ? '已上传付款凭证，备注编号' + i : '-';
|
||
var discountReason = discount > 0 ? (i % 4 === 0 ? '长期合作客户优惠' : '首期减免') : '-';
|
||
list.push({
|
||
id: 'FP' + i,
|
||
paymentStatus: status,
|
||
approvalStatus: approvalStatus,
|
||
contractCode: contracts[i % contracts.length],
|
||
projectName: projects[i % projects.length],
|
||
customerName: customers[i % customers.length],
|
||
contractEffectiveDate: '2025-' + (String((i % 12) + 1)).padStart(2, '0') + '-' + (String((i % 28) + 1)).padStart(2, '0'),
|
||
firstPayableAmount: firstPayable,
|
||
paidAmount: paid,
|
||
discountAmount: discount,
|
||
unpaidAmount: unpaid,
|
||
discountReason: discountReason,
|
||
remark: remark
|
||
});
|
||
}
|
||
return list;
|
||
}, []);
|
||
|
||
// 查看页 mock 数据（按 查看页面需求说明 结构）
|
||
var mockBillDetail = useMemo(function() {
|
||
return {
|
||
startDate: '2025-01-01',
|
||
endDate: '2025-01-31',
|
||
contractCode: 'HT-ZL-2025-001',
|
||
projectName: '北京朝阳区租赁项目',
|
||
customerName: '某某科技有限公司',
|
||
department: '运营部',
|
||
responsible: '张三',
|
||
paymentCycle: '先付（付款周期：1个月）',
|
||
discountTotal: '200.00',
|
||
discountReason: '长期合作客户优惠，首期账单减免部分金额'
|
||
};
|
||
}, []);
|
||
var mockVehicleList = useMemo(function() {
|
||
return [
|
||
{ brand: '奔驰', model: 'E300L', plateNo: '京A12345', planDelivery: '2024-12-25', planDeliveryEnd: '2024-12-31', actualDelivery: '2024-12-28', billStart: '2025-01-01', billEnd: '2025-01-31', monthlyRent: '8000.00', paidMonthlyRent: '7600.00', serviceFee: '500.00', paidServiceFee: '480.00', deposit: '2000.00', paidDeposit: '2000.00', serviceItems: [{ name: '保养服务', price: '300.00', effectiveDate: '2025-01-01' }, { name: '保险', price: '200.00', effectiveDate: '2025-01-01' }] },
|
||
{ brand: '宝马', model: '530Li', plateNo: '京B67890', planDelivery: '2024-12-20', planDeliveryEnd: '2024-12-26', actualDelivery: '2024-12-22', billStart: '2025-01-01', billEnd: '2025-01-31', monthlyRent: '7000.00', paidMonthlyRent: '7000.00', serviceFee: '400.00', paidServiceFee: '380.00', deposit: '1500.00', paidDeposit: '1500.00', serviceItems: [{ name: '保养服务', price: '250.00', effectiveDate: '2025-01-01' }] }
|
||
];
|
||
}, []);
|
||
// 氢费账单：氢费付款方式、氢气预付款、氢气实付款金额（元，两位小数）
|
||
var mockHydrogenData = useMemo(function() {
|
||
return {
|
||
paymentMethod: '预付',
|
||
prepaymentAmount: '3580.00',
|
||
paidAmount: '3200.00'
|
||
};
|
||
}, []);
|
||
var mockViolationData = useMemo(function() {
|
||
return {
|
||
violationCount: 3,
|
||
totalAmount: '650.00',
|
||
paidTotalAmount: '600.00',
|
||
list: [
|
||
{ violationTime: '2025-01-10 08:30:00', plateNo: '京A12345', violationType: '违停', location: '北京市朝阳区xxx路', fineAmount: '200.00', paidFineAmount: '200.00' },
|
||
{ violationTime: '2025-01-18 14:20:00', plateNo: '京B67890', violationType: '超速', location: '北京市海淀区xxx大道', fineAmount: '200.00', paidFineAmount: '180.00' },
|
||
{ violationTime: '2025-01-25 09:15:00', plateNo: '京A12345', violationType: '闯红灯', location: '北京市东城区xxx路口', fineAmount: '250.00', paidFineAmount: '220.00' }
|
||
]
|
||
};
|
||
}, []);
|
||
var mockReturnFeeData = useMemo(function() {
|
||
return {
|
||
totalAmount: '2850.00',
|
||
paidTotalAmount: '2700.00',
|
||
list: [
|
||
{ feeName: '车辆外观损伤费', amount: '800.00', paidAmount: '760.00', photos: ['https://picsum.photos/80/80?random=1', 'https://picsum.photos/80/80?random=2'], attachments: [{ name: '外观损伤说明.pdf' }] },
|
||
{ feeName: '轮胎磨损费', amount: '1200.00', paidAmount: '1150.00', photos: ['https://picsum.photos/80/80?random=3'], attachments: [{ name: '轮胎检测报告.pdf' }, { name: '维修单据.pdf' }] },
|
||
{ feeName: '内饰清洁费', amount: '450.00', paidAmount: '430.00', photos: ['https://picsum.photos/80/80?random=4', 'https://picsum.photos/80/80?random=5', 'https://picsum.photos/80/80?random=6'], attachments: [] },
|
||
{ feeName: '油量补充费', amount: '400.00', paidAmount: '360.00', photos: [], attachments: [{ name: '加油凭证.jpg' }] }
|
||
]
|
||
};
|
||
}, []);
|
||
var vehicleBillTotals = useMemo(function() {
|
||
var list = mockVehicleList || [];
|
||
var monthlyRentTotal = 0, paidRentTotal = 0, serviceFeeTotal = 0, paidServiceFeeTotal = 0, depositTotal = 0, paidDepositTotal = 0;
|
||
list.forEach(function(v) {
|
||
monthlyRentTotal += parseFloat(v.monthlyRent || 0);
|
||
paidRentTotal += parseFloat(v.paidMonthlyRent || 0);
|
||
serviceFeeTotal += parseFloat(v.serviceFee || 0);
|
||
paidServiceFeeTotal += parseFloat(v.paidServiceFee || 0);
|
||
depositTotal += parseFloat(v.deposit || 0);
|
||
paidDepositTotal += parseFloat(v.paidDeposit || 0);
|
||
});
|
||
return {
|
||
monthlyRentTotal: monthlyRentTotal.toFixed(2),
|
||
paidRentTotal: paidRentTotal.toFixed(2),
|
||
serviceFeeTotal: serviceFeeTotal.toFixed(2),
|
||
paidServiceFeeTotal: paidServiceFeeTotal.toFixed(2),
|
||
depositTotal: depositTotal.toFixed(2),
|
||
paidDepositTotal: paidDepositTotal.toFixed(2)
|
||
};
|
||
}, [mockVehicleList]);
|
||
var vehicleTotals = useMemo(function() {
|
||
var monthlyRentTotal = parseFloat(vehicleBillTotals.monthlyRentTotal || 0);
|
||
var serviceFeeTotal = parseFloat(vehicleBillTotals.serviceFeeTotal || 0);
|
||
var depositTotal = parseFloat(vehicleBillTotals.depositTotal || 0);
|
||
var hydrogenTotal = parseFloat(mockHydrogenData.prepaymentAmount || 0);
|
||
var violationTotal = parseFloat(mockViolationData.totalAmount || 0);
|
||
var returnFeeTotal = parseFloat(mockReturnFeeData.totalAmount || 0);
|
||
var payableTotal = monthlyRentTotal + serviceFeeTotal + depositTotal + hydrogenTotal + violationTotal + returnFeeTotal;
|
||
var paidTotal = 0;
|
||
(mockVehicleList || []).forEach(function(v) {
|
||
paidTotal += parseFloat(v.paidMonthlyRent || 0) + parseFloat(v.paidServiceFee || 0) + parseFloat(v.paidDeposit || 0);
|
||
});
|
||
var discountTotal = parseFloat(mockBillDetail.discountTotal || 0);
|
||
var unpaidTotal = payableTotal - paidTotal - discountTotal;
|
||
if (unpaidTotal < 0) unpaidTotal = 0;
|
||
return {
|
||
payableTotal: payableTotal.toFixed(2),
|
||
paidTotal: paidTotal.toFixed(2),
|
||
unpaidTotal: unpaidTotal.toFixed(2)
|
||
};
|
||
}, [vehicleBillTotals, mockHydrogenData, mockViolationData, mockReturnFeeData, mockVehicleList, mockBillDetail]);
|
||
|
||
// 筛选后的列表（使用已生效条件，点击查询后才与选择器联动）
|
||
var filteredList = useMemo(function() {
|
||
var list = mockList;
|
||
var af = appliedFilter;
|
||
// 合同编码选择器：与列表 contractCode 精确匹配
|
||
if (af.contract && af.contract.trim()) {
|
||
var cf = af.contract.trim();
|
||
list = list.filter(function(item) {
|
||
return (item.contractCode || '') === cf;
|
||
});
|
||
}
|
||
// 项目名称选择器：与列表 projectName 精确匹配
|
||
if (af.project && af.project.trim()) {
|
||
var pf = af.project.trim();
|
||
list = list.filter(function(item) {
|
||
return (item.projectName || '') === pf;
|
||
});
|
||
}
|
||
// 客户名称选择器：与列表 customerName 精确匹配
|
||
if (af.customer && af.customer.trim()) {
|
||
var cuf = af.customer.trim();
|
||
list = list.filter(function(item) {
|
||
return (item.customerName || '') === cuf;
|
||
});
|
||
}
|
||
if (af.status && af.status.length > 0) {
|
||
list = list.filter(function(item) {
|
||
return af.status.indexOf(item.paymentStatus) >= 0;
|
||
});
|
||
}
|
||
return list;
|
||
}, [mockList, appliedFilter]);
|
||
|
||
var totalCount = filteredList.length;
|
||
var totalPages = Math.ceil(totalCount / pageSize) || 1;
|
||
var paginatedList = useMemo(function() {
|
||
var start = (currentPage - 1) * pageSize;
|
||
return filteredList.slice(start, start + pageSize);
|
||
}, [filteredList, currentPage, pageSize]);
|
||
|
||
var getStatusText = function(status) {
|
||
if (status === 'paid') return '已付款';
|
||
if (status === 'partial') return '部分付款';
|
||
return '未付款';
|
||
};
|
||
var getStatusColor = function(status) {
|
||
if (status === 'paid') return '#52c41a';
|
||
if (status === 'partial') return '#faad14';
|
||
return '#ff4d4f';
|
||
};
|
||
|
||
var formatAmount = function(num) {
|
||
var n = typeof num === 'number' ? num : parseFloat(num);
|
||
if (isNaN(n)) return '0.00';
|
||
return n.toFixed(2);
|
||
};
|
||
|
||
var handleQuery = useCallback(function() {
|
||
setAppliedFilter({
|
||
contract: contractInput,
|
||
project: projectInput,
|
||
customer: customerInput,
|
||
status: statusInput
|
||
});
|
||
setCurrentPage(1);
|
||
}, [contractInput, projectInput, customerInput, statusInput]);
|
||
var handleReset = useCallback(function() {
|
||
setContractInput('');
|
||
setProjectInput('');
|
||
setCustomerInput('');
|
||
setStatusInput([]);
|
||
setAppliedFilter({ contract: '', project: '', customer: '', status: [] });
|
||
setCurrentPage(1);
|
||
}, []);
|
||
var getApprovalStatus = useCallback(function(row) {
|
||
return approvalStatusMap[row.id] != null ? approvalStatusMap[row.id] : row.approvalStatus;
|
||
}, [approvalStatusMap]);
|
||
var getApprovalStatusText = function(s) {
|
||
if (s === 'draft') return '待提交';
|
||
if (s === 'pending' || s === 'auditing') return '审核中';
|
||
if (s === 'completed') return '审核完成';
|
||
if (s === 'withdrawn') return '撤回';
|
||
if (s === 'rejected') return '审核驳回';
|
||
return s || '-';
|
||
};
|
||
var handleView = useCallback(function(id) {
|
||
setViewingBillId(id);
|
||
setDetailMode('view');
|
||
setCurrentView('detail');
|
||
}, []);
|
||
var handlePayment = useCallback(function(id) {
|
||
setViewingBillId(id);
|
||
setDetailMode('payment');
|
||
var vl = mockVehicleList.map(function(v) {
|
||
return { paidMonthlyRent: v.paidMonthlyRent || '', paidServiceFee: v.paidServiceFee || '', paidDeposit: v.paidDeposit || '' };
|
||
});
|
||
var hl = [];
|
||
var viol = mockViolationData.list.map(function(item) { return { paidFineAmount: item.paidFineAmount || '' }; });
|
||
var rfl = mockReturnFeeData.list.map(function(item) { return { paidAmount: item.paidAmount || '' }; });
|
||
setPaymentForm({
|
||
discountAmount: mockBillDetail.discountTotal || '',
|
||
discountReason: mockBillDetail.discountReason || '',
|
||
hydrogenPaidAmount: mockHydrogenData.paidAmount || '',
|
||
vehicleList: vl,
|
||
hydrogenList: hl,
|
||
violationList: viol,
|
||
returnFeeList: rfl
|
||
});
|
||
setCurrentView('detail');
|
||
}, []);
|
||
var handleBackToList = useCallback(function() {
|
||
setCurrentView('list');
|
||
setDetailMode('view');
|
||
setViewingBillId(null);
|
||
}, []);
|
||
var handleSave = useCallback(function() {
|
||
if (viewingBillId) {
|
||
setApprovalStatusMap(function(prev) {
|
||
var next = {};
|
||
for (var k in prev) { if (prev.hasOwnProperty(k)) next[k] = prev[k]; }
|
||
next[viewingBillId] = 'draft';
|
||
return next;
|
||
});
|
||
}
|
||
alert('保存成功');
|
||
handleBackToList();
|
||
}, [viewingBillId, handleBackToList]);
|
||
var handleWithdraw = useCallback(function(rowId) {
|
||
setWithdrawConfirmId(rowId);
|
||
}, []);
|
||
var handleWithdrawConfirm = useCallback(function() {
|
||
if (withdrawConfirmId) {
|
||
setApprovalStatusMap(function(prev) {
|
||
var next = {};
|
||
for (var k in prev) { if (prev.hasOwnProperty(k)) next[k] = prev[k]; }
|
||
next[withdrawConfirmId] = 'draft';
|
||
return next;
|
||
});
|
||
setWithdrawConfirmId(null);
|
||
alert('已撤回，可重新编辑后提交');
|
||
}
|
||
}, [withdrawConfirmId]);
|
||
var handlePaymentFormChange = useCallback(function(section, index, field, value) {
|
||
setPaymentForm(function(prev) {
|
||
var next = {
|
||
discountAmount: prev.discountAmount,
|
||
discountReason: prev.discountReason,
|
||
hydrogenPaidAmount: prev.hydrogenPaidAmount,
|
||
vehicleList: prev.vehicleList.slice(),
|
||
hydrogenList: prev.hydrogenList.slice(),
|
||
violationList: prev.violationList.slice(),
|
||
returnFeeList: prev.returnFeeList.slice()
|
||
};
|
||
if (section === 'bill') {
|
||
if (field === 'discountAmount') next.discountAmount = value;
|
||
if (field === 'discountReason') next.discountReason = value;
|
||
if (field === 'hydrogenPaidAmount') next.hydrogenPaidAmount = value;
|
||
} else if (section === 'vehicle' && index >= 0 && index < next.vehicleList.length) {
|
||
next.vehicleList[index] = Object.assign({}, next.vehicleList[index]);
|
||
next.vehicleList[index][field] = value;
|
||
} else if (section === 'hydrogen' && index >= 0 && index < next.hydrogenList.length) {
|
||
next.hydrogenList[index] = Object.assign({}, next.hydrogenList[index]);
|
||
next.hydrogenList[index][field] = value;
|
||
} else if (section === 'violation' && index >= 0 && index < next.violationList.length) {
|
||
next.violationList[index] = Object.assign({}, next.violationList[index]);
|
||
next.violationList[index][field] = value;
|
||
} else if (section === 'returnFee' && index >= 0 && index < next.returnFeeList.length) {
|
||
next.returnFeeList[index] = Object.assign({}, next.returnFeeList[index]);
|
||
next.returnFeeList[index][field] = value;
|
||
}
|
||
return next;
|
||
});
|
||
}, []);
|
||
var handleSubmit = useCallback(function() {
|
||
var errors = [];
|
||
if (!paymentForm.discountAmount || String(paymentForm.discountAmount).trim() === '') errors.push('减免金额');
|
||
if (!paymentForm.discountReason || String(paymentForm.discountReason).trim() === '') errors.push('减免原因');
|
||
if (!paymentForm.hydrogenPaidAmount || String(paymentForm.hydrogenPaidAmount).trim() === '') errors.push('氢气实付款金额');
|
||
paymentForm.vehicleList.forEach(function(v, i) {
|
||
if (!v.paidMonthlyRent || String(v.paidMonthlyRent).trim() === '') errors.push('车辆账单-实付月租金(第' + (i + 1) + '行)');
|
||
if (!v.paidServiceFee || String(v.paidServiceFee).trim() === '') errors.push('车辆账单-实付服务费(第' + (i + 1) + '行)');
|
||
if (!v.paidDeposit || String(v.paidDeposit).trim() === '') errors.push('车辆账单-实付保证金(第' + (i + 1) + '行)');
|
||
});
|
||
paymentForm.violationList.forEach(function(v, i) {
|
||
if (!v.paidFineAmount || String(v.paidFineAmount).trim() === '') errors.push('违章费用-实付罚款金额(第' + (i + 1) + '行)');
|
||
});
|
||
paymentForm.returnFeeList.forEach(function(r, i) {
|
||
if (!r.paidAmount || String(r.paidAmount).trim() === '') errors.push('还车费用-实付金额(第' + (i + 1) + '行)');
|
||
});
|
||
if (errors.length > 0) {
|
||
alert('请填写必填项：' + errors.join('、'));
|
||
return;
|
||
}
|
||
if (viewingBillId) {
|
||
setApprovalStatusMap(function(prev) {
|
||
var next = {};
|
||
for (var k in prev) { if (prev.hasOwnProperty(k)) next[k] = prev[k]; }
|
||
next[viewingBillId] = 'pending';
|
||
return next;
|
||
});
|
||
}
|
||
alert('提交成功');
|
||
handleBackToList();
|
||
}, [paymentForm, handleBackToList, viewingBillId]);
|
||
|
||
// 样式
|
||
var styles = {
|
||
page: {
|
||
padding: '24px',
|
||
backgroundColor: '#f5f5f5',
|
||
minHeight: '100vh',
|
||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
|
||
},
|
||
breadcrumb: {
|
||
marginBottom: '16px',
|
||
fontSize: '14px',
|
||
color: '#666'
|
||
},
|
||
breadcrumbSep: { color: '#bfbfbf', margin: '0 8px' },
|
||
content: {
|
||
backgroundColor: '#fff',
|
||
borderRadius: '8px',
|
||
padding: '24px',
|
||
boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
|
||
overflowX: 'auto'
|
||
},
|
||
filterRow: {
|
||
display: 'flex',
|
||
flexWrap: 'nowrap',
|
||
gap: '16px',
|
||
marginBottom: '20px',
|
||
alignItems: 'center',
|
||
overflowX: 'auto'
|
||
},
|
||
filterItem: {
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '8px'
|
||
},
|
||
label: { fontSize: '14px', color: '#333', minWidth: '80px' },
|
||
input: {
|
||
padding: '8px 12px',
|
||
border: '1px solid #d9d9d9',
|
||
borderRadius: '4px',
|
||
fontSize: '14px',
|
||
width: '200px'
|
||
},
|
||
select: {
|
||
padding: '8px 12px',
|
||
border: '1px solid #d9d9d9',
|
||
borderRadius: '4px',
|
||
fontSize: '14px',
|
||
width: '200px'
|
||
},
|
||
filterSelectWrap: { position: 'relative', width: '200px' },
|
||
filterDropdown: {
|
||
position: 'absolute',
|
||
top: '100%',
|
||
left: 0,
|
||
right: 0,
|
||
marginTop: '2px',
|
||
maxHeight: '200px',
|
||
overflowY: 'auto',
|
||
backgroundColor: '#fff',
|
||
border: '1px solid #d9d9d9',
|
||
borderRadius: '4px',
|
||
boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
|
||
zIndex: 10
|
||
},
|
||
filterDropdownItem: {
|
||
padding: '8px 12px',
|
||
fontSize: '14px',
|
||
cursor: 'pointer',
|
||
borderBottom: '1px solid #f0f0f0'
|
||
},
|
||
selectMultiple: {
|
||
padding: '8px 12px',
|
||
border: '1px solid #d9d9d9',
|
||
borderRadius: '4px',
|
||
fontSize: '14px',
|
||
minWidth: '200px',
|
||
minHeight: '36px'
|
||
},
|
||
statusMultiWrap: { position: 'relative', display: 'inline-block' },
|
||
statusMultiDisplay: {
|
||
padding: '8px 12px',
|
||
border: '1px solid #d9d9d9',
|
||
borderRadius: '4px',
|
||
fontSize: '14px',
|
||
width: '200px',
|
||
backgroundColor: '#fff',
|
||
cursor: 'pointer',
|
||
minHeight: '36px',
|
||
boxSizing: 'border-box'
|
||
},
|
||
statusDropdownPanel: {
|
||
position: 'absolute',
|
||
left: 0,
|
||
top: '100%',
|
||
marginTop: '2px',
|
||
width: '100%',
|
||
maxHeight: '220px',
|
||
overflowY: 'auto',
|
||
backgroundColor: '#fff',
|
||
border: '1px solid #d9d9d9',
|
||
borderRadius: '4px',
|
||
boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
|
||
zIndex: 10
|
||
},
|
||
statusDropdownOption: {
|
||
padding: '8px 12px',
|
||
fontSize: '14px',
|
||
cursor: 'pointer',
|
||
borderBottom: '1px solid #f0f0f0'
|
||
},
|
||
table: { width: '100%', borderCollapse: 'collapse', fontSize: '14px' },
|
||
th: {
|
||
textAlign: 'left',
|
||
padding: '12px 16px',
|
||
backgroundColor: '#fafafa',
|
||
borderBottom: '1px solid #f0f0f0',
|
||
fontWeight: 600,
|
||
color: '#333',
|
||
whiteSpace: 'nowrap'
|
||
},
|
||
td: {
|
||
padding: '12px 16px',
|
||
borderBottom: '1px solid #f0f0f0',
|
||
color: '#333',
|
||
whiteSpace: 'nowrap'
|
||
},
|
||
actionColTh: {
|
||
position: 'sticky',
|
||
right: 0,
|
||
backgroundColor: '#fafafa',
|
||
boxShadow: '-2px 0 4px rgba(0,0,0,0.06)',
|
||
zIndex: 1
|
||
},
|
||
actionColTd: {
|
||
position: 'sticky',
|
||
right: 0,
|
||
backgroundColor: '#fff',
|
||
boxShadow: '-2px 0 4px rgba(0,0,0,0.06)',
|
||
zIndex: 1
|
||
},
|
||
actionBtn: {
|
||
padding: '4px 12px',
|
||
marginRight: '8px',
|
||
borderRadius: '4px',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
fontSize: '13px'
|
||
},
|
||
viewBtn: { backgroundColor: '#e6f7ff', color: '#1890ff' },
|
||
payBtn: { backgroundColor: '#f6ffed', color: '#52c41a' },
|
||
withdrawBtn: { backgroundColor: '#fff7e6', color: '#fa8c16' },
|
||
pagination: {
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginTop: '20px',
|
||
flexWrap: 'wrap',
|
||
gap: '12px'
|
||
},
|
||
pageSizeSelect: {
|
||
padding: '6px 10px',
|
||
border: '1px solid #d9d9d9',
|
||
borderRadius: '4px',
|
||
fontSize: '13px'
|
||
},
|
||
pageInfo: { fontSize: '14px', color: '#666' },
|
||
pageHeader: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px', flexWrap: 'wrap', gap: '12px' },
|
||
requirementLink: { color: '#1890ff', cursor: 'pointer', fontSize: '14px', textDecoration: 'none' },
|
||
requirementModalBody: { maxHeight: '70vh', overflowY: 'auto', whiteSpace: 'pre-wrap', fontSize: '14px', lineHeight: 1.6, color: '#333', padding: '0 4px' },
|
||
queryBtn: {
|
||
padding: '8px 20px',
|
||
backgroundColor: '#1890ff',
|
||
color: '#fff',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
fontSize: '14px'
|
||
},
|
||
resetBtn: {
|
||
padding: '8px 20px',
|
||
backgroundColor: '#fff',
|
||
color: '#666',
|
||
border: '1px solid #d9d9d9',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
fontSize: '14px'
|
||
},
|
||
// 查看页样式（按 查看页面需求说明）
|
||
detailPage: { padding: '24px', backgroundColor: '#f5f5f5', minHeight: '100vh', width: '100%', boxSizing: 'border-box' },
|
||
backBtn: { marginBottom: '16px', padding: '8px 16px', backgroundColor: '#fff', border: '1px solid #d9d9d9', borderRadius: '4px', cursor: 'pointer', fontSize: '14px' },
|
||
detailContent: { display: 'flex', flexDirection: 'column', gap: '24px', width: '100%' },
|
||
detailCard: { backgroundColor: '#fff', borderRadius: '8px', padding: '24px', boxShadow: '0 1px 2px rgba(0,0,0,0.03)', width: '100%', boxSizing: 'border-box' },
|
||
detailCardTitle: { fontSize: '16px', fontWeight: 600, marginBottom: '16px', paddingBottom: '12px', borderBottom: '1px solid #f0f0f0' },
|
||
detailRow: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '24px', marginBottom: '12px', fontSize: '14px' },
|
||
detailItem: {},
|
||
detailItemInline: { display: 'flex', alignItems: 'center' },
|
||
detailItemInputRight: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
|
||
detailLabel: { color: '#666', marginRight: '8px' },
|
||
amountInputWrap: { display: 'flex', alignItems: 'center', gap: '8px' },
|
||
amountInput: { padding: '8px 12px', border: '1px solid #d9d9d9', borderRadius: '4px', fontSize: '14px', width: '120px' },
|
||
amountSuffix: { color: '#666', fontSize: '14px' },
|
||
detailTextarea: { padding: '8px 12px', border: '1px solid #d9d9d9', borderRadius: '4px', fontSize: '14px', width: '100%', minWidth: '200px', minHeight: '60px', resize: 'vertical' },
|
||
vehicleTable: { width: '100%', borderCollapse: 'collapse', fontSize: '14px' },
|
||
hydrogenSummary: { display: 'flex', gap: '48px', marginBottom: '16px', fontSize: '14px' },
|
||
hydrogenSummaryItem: { color: '#333' },
|
||
photoThumb: { width: '40px', height: '40px', objectFit: 'cover', borderRadius: '4px', cursor: 'pointer', marginRight: '4px', verticalAlign: 'middle' },
|
||
attachmentLink: { color: '#1890ff', cursor: 'pointer', textDecoration: 'none', marginRight: '8px', fontSize: '14px' },
|
||
amountLink: { color: '#1890ff', cursor: 'pointer', textDecoration: 'none' },
|
||
photoViewerOverlay: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.85)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1001 },
|
||
photoViewerContent: { position: 'relative', textAlign: 'center' },
|
||
photoViewerImg: { maxWidth: '90vw', maxHeight: '85vh', objectFit: 'contain' },
|
||
photoViewerBtn: { position: 'absolute', top: '50%', marginTop: '-20px', padding: '10px 16px', backgroundColor: 'rgba(255,255,255,0.9)', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '14px' },
|
||
photoViewerPrev: { left: '20px' },
|
||
photoViewerNext: { right: '20px' },
|
||
photoViewerClose: { position: 'absolute', top: '-40px', right: '0', padding: '8px 16px', backgroundColor: 'rgba(255,255,255,0.9)', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '14px' },
|
||
photoViewerCounter: { color: '#fff', marginTop: '16px', fontSize: '14px' },
|
||
popover: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.45)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 },
|
||
popoverCard: { backgroundColor: '#fff', borderRadius: '8px', padding: '24px', maxWidth: '90%', maxHeight: '80vh', overflow: 'auto' },
|
||
popoverHeader: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px', whiteSpace: 'nowrap' },
|
||
popoverTitle: { fontSize: '16px', fontWeight: 600, whiteSpace: 'nowrap' },
|
||
popoverClose: { padding: '4px 12px', backgroundColor: '#f5f5f5', border: 'none', borderRadius: '4px', cursor: 'pointer' },
|
||
popoverTable: { width: '100%', borderCollapse: 'collapse', fontSize: '14px' },
|
||
popoverTh: { textAlign: 'left', padding: '12px 16px', backgroundColor: '#fafafa', borderBottom: '1px solid #f0f0f0', fontWeight: 600, color: '#333', whiteSpace: 'nowrap' },
|
||
popoverTd: { padding: '12px 16px', borderBottom: '1px solid #f0f0f0', color: '#333', whiteSpace: 'nowrap' },
|
||
modalFooter: { marginTop: '24px', textAlign: 'right', display: 'flex', justifyContent: 'center', gap: '12px' }
|
||
};
|
||
|
||
// 查看页：按 查看页面需求说明 渲染（租赁账单详情）
|
||
if (currentView === 'detail') {
|
||
return (
|
||
React.createElement('div', { style: styles.detailPage },
|
||
React.createElement('div', { style: Object.assign({}, styles.breadcrumb, { marginBottom: '16px' }) },
|
||
React.createElement('span', null, '财务管理'),
|
||
React.createElement('span', { style: styles.breadcrumbSep }, '>'),
|
||
React.createElement('span', null, '提车首付款'),
|
||
React.createElement('span', { style: styles.breadcrumbSep }, '>'),
|
||
React.createElement('span', null, detailMode === 'payment' ? '收费' : '查看')
|
||
),
|
||
React.createElement('div', { style: styles.detailContent },
|
||
React.createElement('div', { style: styles.detailCard },
|
||
React.createElement('div', { style: styles.detailCardTitle }, '账单信息'),
|
||
React.createElement('div', { style: styles.detailRow },
|
||
React.createElement('div', { style: styles.detailItem }, React.createElement('span', { style: styles.detailLabel }, '账单开始日期：'), React.createElement('span', null, mockBillDetail.startDate)),
|
||
React.createElement('div', { style: styles.detailItem }, React.createElement('span', { style: styles.detailLabel }, '账单结束日期：'), React.createElement('span', null, mockBillDetail.endDate))
|
||
),
|
||
React.createElement('div', { style: styles.detailRow },
|
||
React.createElement('div', { style: styles.detailItem }, React.createElement('span', { style: styles.detailLabel }, '合同编码：'), React.createElement('span', null, mockBillDetail.contractCode)),
|
||
React.createElement('div', { style: styles.detailItem }, React.createElement('span', { style: styles.detailLabel }, '项目名称：'), React.createElement('span', null, mockBillDetail.projectName)),
|
||
React.createElement('div', { style: styles.detailItem }, React.createElement('span', { style: styles.detailLabel }, '客户名称：'), React.createElement('span', null, mockBillDetail.customerName))
|
||
),
|
||
React.createElement('div', { style: styles.detailRow },
|
||
React.createElement('div', { style: styles.detailItem }, React.createElement('span', { style: styles.detailLabel }, '业务部门：'), React.createElement('span', null, mockBillDetail.department)),
|
||
React.createElement('div', { style: styles.detailItem }, React.createElement('span', { style: styles.detailLabel }, '业务负责人：'), React.createElement('span', null, mockBillDetail.responsible)),
|
||
React.createElement('div', { style: styles.detailItem }, React.createElement('span', { style: styles.detailLabel }, '付款周期：'), React.createElement('span', null, mockBillDetail.paymentCycle))
|
||
),
|
||
React.createElement('div', { style: styles.detailRow },
|
||
React.createElement('div', { style: styles.detailItem }, React.createElement('span', { style: styles.detailLabel }, '首期应付金额：'), React.createElement('span', { style: { color: '#1890ff', fontWeight: 600 } }, vehicleTotals.payableTotal + ' 元')),
|
||
React.createElement('div', { style: styles.detailItem }, React.createElement('span', { style: styles.detailLabel }, '实付款总额：'), React.createElement('span', { style: { color: '#52c41a', fontWeight: 600 } }, vehicleTotals.paidTotal + ' 元')),
|
||
React.createElement('div', { style: Object.assign({}, styles.detailItem, styles.detailItemInline) }, React.createElement('span', { style: styles.detailLabel }, '减免金额：'), detailMode === 'payment' ? React.createElement('div', { style: styles.amountInputWrap }, React.createElement('input', { type: 'text', style: styles.amountInput, value: paymentForm.discountAmount, onChange: function(e) { handlePaymentFormChange('bill', -1, 'discountAmount', e.target.value); }, placeholder: '0.00' }), React.createElement('span', { style: styles.amountSuffix }, '元')) : React.createElement('span', { style: { fontWeight: 600 } }, mockBillDetail.discountTotal + ' 元')),
|
||
React.createElement('div', { style: styles.detailItem }, React.createElement('span', { style: styles.detailLabel }, '未付款总额：'), React.createElement('span', { style: { color: '#ff4d4f', fontWeight: 600 } }, vehicleTotals.unpaidTotal + ' 元'))
|
||
),
|
||
React.createElement('div', { style: styles.detailRow },
|
||
React.createElement('div', { style: Object.assign({}, styles.detailItem, { gridColumn: '1 / -1' }) }, React.createElement('span', { style: styles.detailLabel }, '减免原因：'), detailMode === 'payment' ? React.createElement('textarea', { style: styles.detailTextarea, value: paymentForm.discountReason, onChange: function(e) { handlePaymentFormChange('bill', -1, 'discountReason', e.target.value); }, placeholder: '请输入减免原因' }) : React.createElement('span', null, mockBillDetail.discountReason || '-'))
|
||
)
|
||
),
|
||
React.createElement('div', { style: styles.detailCard },
|
||
React.createElement('div', { style: styles.detailCardTitle }, '车辆账单'),
|
||
React.createElement('table', { style: styles.vehicleTable },
|
||
React.createElement('thead', null, React.createElement('tr', null,
|
||
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 }, '账单开始日期'), 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 }, '保证金'), React.createElement('th', { style: styles.th }, '实付保证金')
|
||
)),
|
||
React.createElement('tbody', null, mockVehicleList.map(function(v, idx) {
|
||
var pf = paymentForm.vehicleList[idx] || {};
|
||
return React.createElement('tr', { key: v.plateNo },
|
||
React.createElement('td', { style: styles.td }, v.brand), React.createElement('td', { style: styles.td }, v.model), React.createElement('td', { style: styles.td }, v.plateNo),
|
||
React.createElement('td', { style: styles.td }, (v.planDelivery && v.planDeliveryEnd) ? (v.planDelivery + '至' + v.planDeliveryEnd) : (v.planDelivery || '未设置')), React.createElement('td', { style: styles.td }, v.actualDelivery || '未交车'), React.createElement('td', { style: styles.td }, v.billStart || '未设置'), React.createElement('td', { style: styles.td }, v.billEnd || '未设置'),
|
||
React.createElement('td', { style: styles.td }, v.monthlyRent),
|
||
React.createElement('td', { style: styles.td }, detailMode === 'payment' ? React.createElement('div', { style: styles.amountInputWrap }, React.createElement('input', { type: 'text', style: styles.amountInput, value: pf.paidMonthlyRent || '', onChange: function(e) { handlePaymentFormChange('vehicle', idx, 'paidMonthlyRent', e.target.value); }, placeholder: '0.00' }), React.createElement('span', { style: styles.amountSuffix }, '元')) : (parseFloat(v.paidMonthlyRent || 0)).toFixed(2)),
|
||
React.createElement('td', { style: styles.td }, detailMode === 'payment' ? v.serviceFee : React.createElement('span', { style: styles.amountLink, onClick: function() { setPopover({ type: 'service', data: v.serviceItems }); } }, v.serviceFee)),
|
||
React.createElement('td', { style: styles.td }, detailMode === 'payment' ? React.createElement('div', { style: styles.amountInputWrap }, React.createElement('input', { type: 'text', style: styles.amountInput, value: pf.paidServiceFee || '', onChange: function(e) { handlePaymentFormChange('vehicle', idx, 'paidServiceFee', e.target.value); }, placeholder: '0.00' }), React.createElement('span', { style: styles.amountSuffix }, '元')) : (parseFloat(v.paidServiceFee || 0)).toFixed(2)),
|
||
React.createElement('td', { style: styles.td }, v.deposit),
|
||
React.createElement('td', { style: styles.td }, detailMode === 'payment' ? React.createElement('div', { style: styles.amountInputWrap }, React.createElement('input', { type: 'text', style: styles.amountInput, value: pf.paidDeposit || '', onChange: function(e) { handlePaymentFormChange('vehicle', idx, 'paidDeposit', e.target.value); }, placeholder: '0.00' }), React.createElement('span', { style: styles.amountSuffix }, '元')) : (parseFloat(v.paidDeposit || 0)).toFixed(2))
|
||
);
|
||
})),
|
||
React.createElement('tfoot', null, React.createElement('tr', { style: { backgroundColor: '#fafafa', fontWeight: 600 } }, React.createElement('td', { style: styles.td, colSpan: 7 }, '总计'), React.createElement('td', { style: styles.td }, vehicleBillTotals.monthlyRentTotal), React.createElement('td', { style: styles.td }, vehicleBillTotals.paidRentTotal), React.createElement('td', { style: styles.td }, vehicleBillTotals.serviceFeeTotal), React.createElement('td', { style: styles.td }, vehicleBillTotals.paidServiceFeeTotal), React.createElement('td', { style: styles.td }, vehicleBillTotals.depositTotal), React.createElement('td', { style: styles.td }, vehicleBillTotals.paidDepositTotal)))
|
||
)
|
||
),
|
||
React.createElement('div', { style: styles.detailCard },
|
||
React.createElement('div', { style: styles.detailCardTitle }, '氢费账单'),
|
||
React.createElement('div', { style: styles.detailRow },
|
||
React.createElement('div', { style: styles.detailItem }, React.createElement('span', { style: styles.detailLabel }, '氢费付款方式：'), React.createElement('span', null, mockHydrogenData.paymentMethod || '-')),
|
||
React.createElement('div', { style: styles.detailItem }, React.createElement('span', { style: styles.detailLabel }, '氢气预付款：'), React.createElement('span', null, (parseFloat(mockHydrogenData.prepaymentAmount || 0)).toFixed(2) + ' 元')),
|
||
React.createElement('div', { style: Object.assign({}, styles.detailItem, styles.detailItemInline) }, React.createElement('span', { style: styles.detailLabel }, '氢气实付款金额：'), detailMode === 'payment' ? React.createElement('div', { style: styles.amountInputWrap }, React.createElement('input', { type: 'text', style: styles.amountInput, value: paymentForm.hydrogenPaidAmount, onChange: function(e) { handlePaymentFormChange('bill', -1, 'hydrogenPaidAmount', e.target.value); }, placeholder: '0.00' }), React.createElement('span', { style: styles.amountSuffix }, '元')) : React.createElement('span', null, (parseFloat(mockHydrogenData.paidAmount || 0)).toFixed(2) + ' 元'))
|
||
)
|
||
)
|
||
),
|
||
React.createElement('div', { style: { marginTop: '24px', textAlign: 'center', display: 'flex', justifyContent: 'center', gap: '16px' } },
|
||
detailMode === 'payment' && React.createElement('button', { type: 'button', style: Object.assign({}, styles.backBtn, { backgroundColor: '#1890ff', color: '#fff', border: 'none' }), onClick: handleSubmit }, '提交审核'),
|
||
detailMode === 'payment' && React.createElement('button', { type: 'button', style: styles.backBtn, onClick: handleSave }, '保存'),
|
||
React.createElement('button', { type: 'button', style: styles.backBtn, onClick: handleBackToList }, '取消')
|
||
),
|
||
photoViewer.visible && photoViewer.photos.length > 0 && React.createElement('div', { style: styles.photoViewerOverlay, onClick: function() { setPhotoViewer({ visible: false, photos: [], currentIndex: 0 }); } },
|
||
React.createElement('div', { style: styles.photoViewerContent, onClick: function(e) { e.stopPropagation(); } },
|
||
React.createElement('button', { style: Object.assign({}, styles.photoViewerBtn, styles.photoViewerClose), onClick: function() { setPhotoViewer({ visible: false, photos: [], currentIndex: 0 }); } }, '关闭'),
|
||
photoViewer.currentIndex > 0 ? React.createElement('button', { style: Object.assign({}, styles.photoViewerBtn, styles.photoViewerPrev), onClick: function() { setPhotoViewer({ visible: true, photos: photoViewer.photos, currentIndex: photoViewer.currentIndex - 1 }); } }, '上一张') : null,
|
||
React.createElement('img', { style: styles.photoViewerImg, src: photoViewer.photos[photoViewer.currentIndex].replace('80/80', '600/600'), alt: '' }),
|
||
photoViewer.currentIndex < photoViewer.photos.length - 1 ? React.createElement('button', { style: Object.assign({}, styles.photoViewerBtn, styles.photoViewerNext), onClick: function() { setPhotoViewer({ visible: true, photos: photoViewer.photos, currentIndex: photoViewer.currentIndex + 1 }); } }, '下一张') : null,
|
||
React.createElement('div', { style: styles.photoViewerCounter }, (photoViewer.currentIndex + 1) + ' / ' + photoViewer.photos.length)
|
||
)
|
||
),
|
||
(popover.type === 'service' && React.createElement('div', { style: styles.popover, onClick: function() { setPopover({ type: null, data: null }); } },
|
||
React.createElement('div', { style: styles.popoverCard, onClick: function(e) { e.stopPropagation(); } },
|
||
React.createElement('div', { style: styles.popoverHeader }, React.createElement('span', { style: styles.popoverTitle }, '服务费明细'), React.createElement('button', { style: styles.popoverClose, onClick: function() { setPopover({ type: null, data: null }); } }, '关闭')),
|
||
React.createElement('table', { style: styles.table }, React.createElement('thead', null, React.createElement('tr', null, React.createElement('th', { style: styles.th }, '服务项'), React.createElement('th', { style: styles.th }, '价格'), React.createElement('th', { style: styles.th }, '服务生效日期'))), React.createElement('tbody', null, popover.data ? popover.data.map(function(s, i) { return React.createElement('tr', { key: i }, React.createElement('td', { style: styles.td }, s.name), React.createElement('td', { style: styles.td }, s.price), React.createElement('td', { style: styles.td }, s.effectiveDate)); }) : null))
|
||
)
|
||
))
|
||
)
|
||
);
|
||
}
|
||
|
||
|
||
return (
|
||
React.createElement('div', { style: styles.page },
|
||
React.createElement('div', { style: styles.pageHeader },
|
||
React.createElement('div', { style: styles.breadcrumb },
|
||
React.createElement('span', null, '财务管理'),
|
||
React.createElement('span', { style: styles.breadcrumbSep }, '>'),
|
||
React.createElement('span', null, '提车首付款')
|
||
),
|
||
React.createElement('a', { style: styles.requirementLink, onClick: function() { setRequirementDetailVisible(true); }, role: 'button', tabIndex: 0, onKeyDown: function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setRequirementDetailVisible(true); } } }, '查看需求明细')
|
||
),
|
||
React.createElement('div', { style: styles.content },
|
||
// 筛选：合同编码、项目名称、客户名称（选择器+输入搜索）、付款状态（多选）；右侧 查询、重置
|
||
React.createElement('div', { style: styles.filterRow },
|
||
React.createElement('div', { style: styles.filterItem },
|
||
React.createElement('span', { style: styles.label }, '合同编码：'),
|
||
React.createElement('div', { style: styles.filterSelectWrap },
|
||
React.createElement('input', {
|
||
style: styles.input,
|
||
placeholder: '请输入合同编码',
|
||
value: contractInput,
|
||
onChange: function(e) { setContractInput(e.target.value); },
|
||
onFocus: function() { setFilterDropdownOpen('contract'); },
|
||
onBlur: function() { setTimeout(function() { setFilterDropdownOpen(null); }, 200); }
|
||
}),
|
||
filterDropdownOpen === 'contract' && React.createElement('div', { style: styles.filterDropdown },
|
||
contractOptions.filter(function(opt) {
|
||
var kw = (contractInput || '').toLowerCase();
|
||
if (!kw) return true;
|
||
return (opt.label || '').toLowerCase().indexOf(kw) >= 0 || (opt.value || '').toLowerCase().indexOf(kw) >= 0;
|
||
}).map(function(opt) {
|
||
return React.createElement('div', {
|
||
key: opt.value,
|
||
style: styles.filterDropdownItem,
|
||
onMouseDown: function(e) { e.preventDefault(); setContractInput(opt.value); setFilterDropdownOpen(null); }
|
||
}, opt.label);
|
||
})
|
||
)
|
||
)
|
||
),
|
||
React.createElement('div', { style: styles.filterItem },
|
||
React.createElement('span', { style: styles.label }, '项目名称：'),
|
||
React.createElement('div', { style: styles.filterSelectWrap },
|
||
React.createElement('input', {
|
||
style: styles.input,
|
||
placeholder: '请输入项目名称',
|
||
value: projectInput,
|
||
onChange: function(e) { setProjectInput(e.target.value); },
|
||
onFocus: function() { setFilterDropdownOpen('project'); },
|
||
onBlur: function() { setTimeout(function() { setFilterDropdownOpen(null); }, 200); }
|
||
}),
|
||
filterDropdownOpen === 'project' && React.createElement('div', { style: styles.filterDropdown },
|
||
projectOptions.filter(function(opt) {
|
||
var kw = (projectInput || '').toLowerCase();
|
||
if (!kw) return true;
|
||
return (opt.label || '').toLowerCase().indexOf(kw) >= 0 || (opt.value || '').toLowerCase().indexOf(kw) >= 0;
|
||
}).map(function(opt) {
|
||
return React.createElement('div', {
|
||
key: opt.value,
|
||
style: styles.filterDropdownItem,
|
||
onMouseDown: function(e) { e.preventDefault(); setProjectInput(opt.value); setFilterDropdownOpen(null); }
|
||
}, opt.label);
|
||
})
|
||
)
|
||
)
|
||
),
|
||
React.createElement('div', { style: styles.filterItem },
|
||
React.createElement('span', { style: styles.label }, '客户名称：'),
|
||
React.createElement('div', { style: styles.filterSelectWrap },
|
||
React.createElement('input', {
|
||
style: styles.input,
|
||
placeholder: '请输入客户名称',
|
||
value: customerInput,
|
||
onChange: function(e) { setCustomerInput(e.target.value); },
|
||
onFocus: function() { setFilterDropdownOpen('customer'); },
|
||
onBlur: function() { setTimeout(function() { setFilterDropdownOpen(null); }, 200); }
|
||
}),
|
||
filterDropdownOpen === 'customer' && React.createElement('div', { style: styles.filterDropdown },
|
||
customerOptions.filter(function(opt) {
|
||
var kw = (customerInput || '').toLowerCase();
|
||
if (!kw) return true;
|
||
return (opt.label || '').toLowerCase().indexOf(kw) >= 0 || (opt.value || '').toLowerCase().indexOf(kw) >= 0;
|
||
}).map(function(opt) {
|
||
return React.createElement('div', {
|
||
key: opt.value,
|
||
style: styles.filterDropdownItem,
|
||
onMouseDown: function(e) { e.preventDefault(); setCustomerInput(opt.value); setFilterDropdownOpen(null); }
|
||
}, opt.label);
|
||
})
|
||
)
|
||
)
|
||
),
|
||
React.createElement('div', { style: styles.filterItem },
|
||
React.createElement('span', { style: styles.label }, '付款状态：'),
|
||
React.createElement('div', {
|
||
style: styles.statusMultiWrap,
|
||
tabIndex: 0,
|
||
onBlur: function() { setTimeout(function() { setStatusDropdownOpen(false); }, 200); }
|
||
},
|
||
React.createElement('div', {
|
||
style: styles.statusMultiDisplay,
|
||
onClick: function() { setStatusDropdownOpen(!statusDropdownOpen); }
|
||
}, statusInput.length === 0 ? '全部' : statusInput.map(function(s) { return getStatusText(s); }).join('、')),
|
||
statusDropdownOpen ? React.createElement('div', { style: styles.statusDropdownPanel },
|
||
['partial', 'unpaid', 'paid'].map(function(s) {
|
||
var checked = statusInput.indexOf(s) >= 0;
|
||
return React.createElement('div', {
|
||
key: s,
|
||
style: styles.statusDropdownOption,
|
||
onMouseDown: function(e) {
|
||
e.preventDefault();
|
||
var idx = statusInput.indexOf(s);
|
||
var next = statusInput.slice();
|
||
if (idx >= 0) next.splice(idx, 1);
|
||
else next.push(s);
|
||
setStatusInput(next);
|
||
}
|
||
}, React.createElement('label', { style: { cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px' } },
|
||
React.createElement('input', { type: 'checkbox', checked: checked, readOnly: true }),
|
||
getStatusText(s)
|
||
));
|
||
})
|
||
) : null
|
||
)
|
||
),
|
||
React.createElement('div', { style: { display: 'flex', gap: '8px', marginLeft: 'auto' } },
|
||
React.createElement('button', { type: 'button', style: styles.queryBtn, onClick: handleQuery }, '查询'),
|
||
React.createElement('button', { type: 'button', style: styles.resetBtn, onClick: handleReset }, '重置')
|
||
)
|
||
),
|
||
// 列表：审核状态、付款状态、合同编码、项目名称、客户名称、合同生效日期、首期应付金额、实付款总额、减免金额、未付款总额、减免原因、操作（固定右侧）
|
||
React.createElement('table', { style: styles.table },
|
||
React.createElement('thead', null,
|
||
React.createElement('tr', null,
|
||
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 }, '合同生效日期'),
|
||
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: Object.assign({}, styles.th, styles.actionColTh) }, '操作')
|
||
)
|
||
),
|
||
React.createElement('tbody', null,
|
||
paginatedList.map(function(row) {
|
||
var approvalStatus = getApprovalStatus(row);
|
||
var showPay = approvalStatus === 'draft' || approvalStatus === 'withdrawn' || approvalStatus === 'rejected';
|
||
var showWithdraw = approvalStatus === 'auditing' || approvalStatus === 'pending';
|
||
return React.createElement('tr', { key: row.id },
|
||
React.createElement('td', { style: styles.td }, getApprovalStatusText(approvalStatus)),
|
||
React.createElement('td', { style: styles.td },
|
||
React.createElement('span', { style: { color: getStatusColor(row.paymentStatus) } }, getStatusText(row.paymentStatus))
|
||
),
|
||
React.createElement('td', { style: styles.td }, row.contractCode),
|
||
React.createElement('td', { style: styles.td }, row.projectName),
|
||
React.createElement('td', { style: styles.td }, row.customerName),
|
||
React.createElement('td', { style: styles.td }, row.contractEffectiveDate),
|
||
React.createElement('td', { style: styles.td }, formatAmount(row.firstPayableAmount)),
|
||
React.createElement('td', { style: styles.td }, formatAmount(row.paidAmount)),
|
||
React.createElement('td', { style: styles.td }, formatAmount(row.discountAmount)),
|
||
React.createElement('td', { style: styles.td }, formatAmount(row.unpaidAmount)),
|
||
React.createElement('td', { style: styles.td }, row.discountReason || '-'),
|
||
React.createElement('td', { style: Object.assign({}, styles.td, styles.actionColTd) },
|
||
React.createElement('button', {
|
||
type: 'button',
|
||
style: Object.assign({}, styles.actionBtn, styles.viewBtn),
|
||
onClick: function() { handleView(row.id); }
|
||
}, '查看'),
|
||
showPay && React.createElement('button', {
|
||
type: 'button',
|
||
style: Object.assign({}, styles.actionBtn, styles.payBtn),
|
||
onClick: function() { handlePayment(row.id); }
|
||
}, '收费'),
|
||
showWithdraw && React.createElement('button', {
|
||
type: 'button',
|
||
style: Object.assign({}, styles.actionBtn, styles.withdrawBtn),
|
||
onClick: function() { handleWithdraw(row.id); }
|
||
}, '撤回')
|
||
)
|
||
);
|
||
})
|
||
)
|
||
),
|
||
// 分页：支持选择单页数据条数
|
||
React.createElement('div', { style: styles.pagination },
|
||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
|
||
React.createElement('span', { style: styles.pageInfo }, '共 ' + totalCount + ' 条'),
|
||
React.createElement('select', {
|
||
style: styles.pageSizeSelect,
|
||
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('div', { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
|
||
React.createElement('button', {
|
||
type: 'button',
|
||
style: Object.assign({}, styles.actionBtn, { padding: '6px 12px' }),
|
||
disabled: currentPage <= 1,
|
||
onClick: function() { setCurrentPage(currentPage - 1); }
|
||
}, '上一页'),
|
||
React.createElement('span', { style: styles.pageInfo }, currentPage + ' / ' + totalPages),
|
||
React.createElement('button', {
|
||
type: 'button',
|
||
style: Object.assign({}, styles.actionBtn, { padding: '6px 12px' }),
|
||
disabled: currentPage >= totalPages,
|
||
onClick: function() { setCurrentPage(currentPage + 1); }
|
||
}, '下一页')
|
||
)
|
||
),
|
||
withdrawConfirmId && React.createElement('div', { style: styles.popover, onClick: function() { setWithdrawConfirmId(null); } },
|
||
React.createElement('div', { style: styles.popoverCard, onClick: function(e) { e.stopPropagation(); } },
|
||
React.createElement('div', { style: styles.popoverTitle }, '确认撤回？'),
|
||
React.createElement('p', { style: { margin: '16px 0', fontSize: '14px', color: '#666' } }, '确认后将撤回该数据，审核状态变为撤回。'),
|
||
React.createElement('div', { style: styles.modalFooter },
|
||
React.createElement('button', { type: 'button', style: styles.backBtn, onClick: function() { setWithdrawConfirmId(null); } }, '取消'),
|
||
React.createElement('button', { type: 'button', style: Object.assign({}, styles.backBtn, { backgroundColor: '#fa8c16', color: '#fff', border: 'none' }), onClick: handleWithdrawConfirm }, '确认')
|
||
)
|
||
)
|
||
),
|
||
requirementDetailVisible && React.createElement('div', { style: styles.popover, onClick: function() { setRequirementDetailVisible(false); } },
|
||
React.createElement('div', { style: Object.assign({}, styles.popoverCard, { maxWidth: '720px', width: '90%' }), onClick: function(e) { e.stopPropagation(); } },
|
||
React.createElement('div', { style: styles.popoverHeader },
|
||
React.createElement('span', { style: styles.popoverTitle }, '需求明细'),
|
||
React.createElement('button', { style: styles.popoverClose, onClick: function() { setRequirementDetailVisible(false); } }, '关闭')
|
||
),
|
||
React.createElement('div', { style: styles.requirementModalBody }, requirementDetailContent)
|
||
)
|
||
)
|
||
)
|
||
)
|
||
);
|
||
};
|
||
|
||
if (typeof window !== 'undefined') {
|
||
window.Component = Component;
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
var rootEl = document.getElementById('root');
|
||
if (rootEl && window.ReactDOM && window.React) {
|
||
var root = ReactDOM.createRoot(rootEl);
|
||
root.render(React.createElement(Component));
|
||
}
|
||
});
|
||
} else {
|
||
var rootEl = document.getElementById('root');
|
||
if (rootEl && window.ReactDOM && window.React) {
|
||
var root = ReactDOM.createRoot(rootEl);
|
||
root.render(React.createElement(Component));
|
||
}
|
||
}
|
||
}
|