// 【重要】必须使用 const Component 作为组件变量名 // 财务管理 - 提车应收款 - 收款(2026年3月4日版本) const Component = function () { var useState = React.useState; var useCallback = React.useCallback; var useMemo = React.useMemo; var useEffect = React.useEffect; var useRef = React.useRef; var antd = window.antd; var Breadcrumb = antd.Breadcrumb; var Card = antd.Card; var Input = antd.Input; var Button = antd.Button; var Select = antd.Select; var Table = antd.Table; var Popover = antd.Popover; var Modal = antd.Modal; var message = antd.message; var Option = Select.Option; var requirementModalVisible = useState(false); var setRequirementModalVisible = requirementModalVisible[1]; var edited = useState(false); var setEdited = edited[1]; var submitConfirmVisible = useState(false); var setSubmitConfirmVisible = submitConfirmVisible[1]; var cancelConfirmVisible = useState(false); var setCancelConfirmVisible = cancelConfirmVisible[1]; var servicePopoverRowIndex = useState(null); var setServicePopoverRowIndex = servicePopoverRowIndex[1]; // 模拟:项目信息(实际由路由/接口拉取) var projectInfo = useMemo(function () { return { contractCode: 'HT-ZL-2025-001', contractType: '正式合同', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', paymentMethod: '预付', paymentCycle: '6个月', contractStart: '2025-01-15', contractEnd: '2026-01-14', businessDept: '业务1部', businessPerson: '张经理' }; }, []); // 模拟:车辆应收款明细(租赁合同中所有车辆),付款周期 6 个月 => 应收月租金 = 月租金*6 var paymentCycleMonths = 6; var vehicleRows = useState([ { key: 'v1', index: 1, brand: '东风', model: 'DFH1180', plateNo: '浙A12345', monthRent: 5000, receivableRent: 30000, actualRent: '30000.00', rentRemark: '', receivableDeposit: 10000, serviceItems: [ { name: '代处理费用', receivable: 200, actual: '200.00', discount: '0.00', remark: '' }, { name: '保险上浮', receivable: 500, actual: '500.00', discount: '0.00', remark: '' } ], receivableService: 700, actualService: '700.00', discountAmount: '0.00', discountRemark: '', discountProof: [], selected: true }, { key: 'v2', index: 2, brand: '福田', model: 'BJ1180', plateNo: '', monthRent: 4500, receivableRent: 27000, actualRent: '27000.00', rentRemark: '', receivableDeposit: 8000, serviceItems: [{ name: '保养费用', receivable: 300, actual: '300.00', discount: '0.00', remark: '' }], receivableService: 300, actualService: '300.00', discountAmount: '0.00', discountRemark: '', discountProof: [], selected: true } ]); var vehicles = vehicleRows[0]; var setVehicles = vehicleRows[1]; // 氢费预付款(非预付款模式时不显示) var hasHydrogenPrepay = true; var hydrogenRow = useState({ receivable: '3580.00', actual: '3580.00', discount: '0.00', discountRemark: '' }); var hydrogen = hydrogenRow[0]; var setHydrogen = hydrogenRow[1]; var invoiceMethod = useState('先开票后付款'); var setInvoiceMethod = invoiceMethod[1]; var invoiceRemark = useState(''); var setInvoiceRemark = invoiceRemark[1]; // 开票信息(客户信息 + 开票时间/附件/开票人) var invoiceInfo = useMemo(function () { return { customerName: '嘉兴某某物流有限公司', taxId: '91330400MA2XXXXX1', address: '浙江省嘉兴市南湖区科技大道1号', phone: '0571-88888888', account: '6222021234567890123', bank: '中国工商银行嘉兴分行', mailingAddress: '浙江省嘉兴市南湖区科技大道1号', invoiceTime: '', invoiceFile: '', invoicePerson: '-' }; }, []); var toggleVehicleSelected = useCallback(function (key) { setEdited(true); setVehicles(function (prev) { return prev.map(function (r) { if (r.key === key) return Object.assign({}, r, { selected: !r.selected }); return r; }); }); }, []); var toggleAllSelected = useCallback(function (checked) { setEdited(true); setVehicles(function (prev) { return prev.map(function (r) { return Object.assign({}, r, { selected: !!checked }); }); }); }, []); var updateVehicle = useCallback(function (key, field, value) { setEdited(true); setVehicles(function (prev) { return prev.map(function (r) { if (r.key !== key) return r; var next = Object.assign({}, r); next[field] = value; if (field === 'serviceItems') { var total = 0; (value || []).forEach(function (s) { total += parseFloat(s.actual) || 0; }); next.actualService = total.toFixed(2); } return next; }); }); }, []); var updateServiceItem = useCallback(function (vehicleKey, itemIndex, field, value) { setEdited(true); setVehicles(function (prev) { return prev.map(function (r) { if (r.key !== vehicleKey) return r; var items = (r.serviceItems || []).slice(); if (!items[itemIndex]) return r; items[itemIndex] = Object.assign({}, items[itemIndex], { [field]: value }); var total = 0; items.forEach(function (s) { total += parseFloat(s.actual) || 0; }); return Object.assign({}, r, { serviceItems: items, actualService: total.toFixed(2) }); }); }); }, []); var totals = useMemo(function () { var selected = vehicles.filter(function (v) { return v.selected; }); var receivableRent = 0, actualRent = 0, receivableDeposit = 0, receivableService = 0, actualService = 0, discountTotal = 0; selected.forEach(function (v) { receivableRent += Number(v.receivableRent) || 0; actualRent += parseFloat(v.actualRent) || 0; receivableDeposit += Number(v.receivableDeposit) || 0; receivableService += Number(v.receivableService) || 0; actualService += parseFloat(v.actualService) || 0; discountTotal += parseFloat(v.discountAmount) || 0; }); return { receivableRent: receivableRent.toFixed(2), actualRent: actualRent.toFixed(2), receivableDeposit: receivableDeposit.toFixed(2), receivableService: receivableService.toFixed(2), actualService: actualService.toFixed(2), discountTotal: discountTotal.toFixed(2) }; }, [vehicles]); var receivableTotal = useMemo(function () { return (parseFloat(totals.receivableRent) + parseFloat(totals.receivableDeposit) + parseFloat(totals.receivableService)).toFixed(2); }, [totals]); var actualTotal = useMemo(function () { return (parseFloat(totals.actualRent) + parseFloat(totals.receivableDeposit) + parseFloat(totals.actualService) - parseFloat(totals.discountTotal)).toFixed(2); }, [totals]); var receivablePopoverContent = useMemo(function () { return React.createElement('div', { style: { padding: 8, minWidth: 220 } }, React.createElement('table', { style: { width: '100%', borderCollapse: 'collapse', fontSize: 13 } }, React.createElement('thead', null, React.createElement('tr', null, React.createElement('th', { style: { textAlign: 'left', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '项目'), React.createElement('th', { style: { textAlign: 'right', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '金额') ) ), React.createElement('tbody', null, React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计应收车辆月租金'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.receivableRent + ' 元')), React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计应收车辆保证金'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.receivableDeposit + ' 元')), React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计应收服务费'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.receivableService + ' 元')) ) ) ); }, [totals]); var actualPopoverContent = useMemo(function () { return React.createElement('div', { style: { padding: 8, minWidth: 220 } }, React.createElement('table', { style: { width: '100%', borderCollapse: 'collapse', fontSize: 13 } }, React.createElement('thead', null, React.createElement('tr', null, React.createElement('th', { style: { textAlign: 'left', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '项目'), React.createElement('th', { style: { textAlign: 'right', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '金额') ) ), React.createElement('tbody', null, React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计实收车辆月租金'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.actualRent + ' 元')), React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计应收车辆保证金'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.receivableDeposit + ' 元')), React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计实收服务费'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.actualService + ' 元')), React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计减免金额'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.discountTotal + ' 元')) ) ) ); }, [totals]); var handleSubmit = useCallback(function () { setSubmitConfirmVisible(true); }, []); var handleSubmitConfirm = useCallback(function () { message.success('提车应收款已提交审核'); setSubmitConfirmVisible(false); if (window.__receivableSubmit) window.__receivableSubmit(); }, []); var handleSave = useCallback(function () { message.success('保存成功'); if (window.__receivableBack) window.__receivableBack(); else message.info('跳转至提车应收款列表页(原型)'); }, []); var handleCancel = useCallback(function () { if (edited[0]) { setCancelConfirmVisible(true); } else { if (window.__receivableBack) window.__receivableBack(); else message.info('返回提车应收款列表(原型)'); } }, [edited[0]]); var handleCancelConfirm = useCallback(function () { setCancelConfirmVisible(false); if (window.__receivableBack) window.__receivableBack(); else message.info('返回提车应收款列表(原型)'); }, []); var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' }; var cardStyle = { marginBottom: 16 }; var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' }; var formRowStyle = { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', marginBottom: 16 }; var formItemStyle = { marginBottom: 12 }; var highlightStyle = { color: '#1890ff', fontWeight: 600, cursor: 'pointer' }; var valueStyle = { color: 'rgba(0,0,0,0.85)', fontSize: 14, lineHeight: '22px', minHeight: 22 }; var requirementContent = '提车应收款(2026年3月4日版本)\n一个「数字化资产ONEOS运管平台」中的「财务管理」「提车应收款」「收款」模块\n#面包屑:财务管理-提车应收款-收款;\n\n页面分为3个卡片。\n1.项目信息:合同编码、合同类型、项目名称、客户名称、付款方式、付款周期、合同生效时间、合同结束时间、业务部门、业务负责人。\n2.提车应收款信息:应收款总额/实收款总额(点击弹出气泡卡片);车辆应收款明细表(全选/多选、序号、品牌、型号、车牌号、应收/实收车辆月租金、车辆租金备注、应收车辆保证金、服务费项目、应收/实收服务费、减免金额、减免金额备注、减免证明);总计行;氢费预付款(可选);开票方式、开票备注。\n3.开票信息:客户名称、纳税人识别号、地址、电话、账户、开户行、邮寄地址、开票时间、发票附件、开票人。\n4.底部:提交审核、保存、取消及二次确认。'; var allSelected = vehicles.length > 0 && vehicles.every(function (v) { return v.selected; }); var indeterminate = vehicles.some(function (v) { return v.selected; }) && !allSelected; var headerCheckRef = useRef(null); useEffect(function () { if (headerCheckRef.current) headerCheckRef.current.indeterminate = indeterminate; }, [indeterminate]); return React.createElement('div', { style: layoutStyle }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 } }, React.createElement(Breadcrumb, { items: [ { title: '财务管理' }, { title: '提车应收款' }, { title: '收款' } ] }), React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalVisible(true); } }, '查看需求说明') ), React.createElement(Card, { title: '项目信息', style: cardStyle }, React.createElement('div', { style: formRowStyle }, React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '合同编码'), React.createElement('div', { style: valueStyle }, projectInfo.contractCode || '-') ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '合同类型'), React.createElement('div', { style: valueStyle }, projectInfo.contractType || '-') ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '项目名称'), React.createElement('div', { style: valueStyle }, projectInfo.projectName || '-') ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '客户名称'), React.createElement('div', { style: valueStyle }, projectInfo.customerName || '-') ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '付款方式'), React.createElement('div', { style: valueStyle }, projectInfo.paymentMethod || '-') ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '付款周期'), React.createElement('div', { style: valueStyle }, projectInfo.paymentCycle || '-') ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '合同生效时间'), React.createElement('div', { style: valueStyle }, projectInfo.contractStart || '-') ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '合同结束时间'), React.createElement('div', { style: valueStyle }, projectInfo.contractEnd || '-') ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '业务部门'), React.createElement('div', { style: valueStyle }, projectInfo.businessDept || '-') ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '业务负责人'), React.createElement('div', { style: valueStyle }, projectInfo.businessPerson || '-') ) ) ), React.createElement(Card, { title: '提车应收款信息', style: cardStyle }, React.createElement('div', { style: { marginBottom: 16, display: 'flex', gap: 24, alignItems: 'center' } }, React.createElement(Popover, { content: receivablePopoverContent, title: '应收款明细', trigger: 'click' }, React.createElement('span', { style: highlightStyle }, '应收款总额:', receivableTotal, ' 元') ), React.createElement(Popover, { content: actualPopoverContent, title: '实收款明细', trigger: 'click' }, React.createElement('span', { style: highlightStyle }, '实收款总额:', actualTotal, ' 元') ) ), React.createElement('div', { style: { overflowX: 'auto', marginBottom: 16 } }, React.createElement('table', { style: { width: '100%', minWidth: 1400, borderCollapse: 'collapse', fontSize: 13 } }, React.createElement('thead', null, React.createElement('tr', { style: { backgroundColor: '#fafafa' } }, React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 48 } }, React.createElement('input', { type: 'checkbox', checked: allSelected, ref: headerCheckRef, onChange: function (e) { toggleAllSelected(e.target.checked); } }) ), React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 50 } }, '序号'), React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 80 } }, '品牌'), React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 90 } }, '型号'), React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 100 } }, '车牌号'), React.createElement('th', { style: { padding: '10px 12px', textAlign: 'right', border: '1px solid #f0f0f0', width: 120 } }, '应收车辆月租金'), React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 120 } }, '实收车辆月租金'), React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 100 } }, '车辆租金备注'), React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 90 } }, '减免金额'), React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 90 } }, '减免金额备注'), React.createElement('th', { style: { padding: '10px 12px', textAlign: 'right', border: '1px solid #f0f0f0', width: 110 } }, '应收车辆保证金'), React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 90 } }, '服务费项目'), React.createElement('th', { style: { padding: '10px 12px', textAlign: 'right', border: '1px solid #f0f0f0', width: 90 } }, '应收服务费'), React.createElement('th', { style: { padding: '10px 12px', textAlign: 'right', border: '1px solid #f0f0f0', width: 90 } }, '实收服务费'), React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 100 } }, '减免证明') ) ), React.createElement('tbody', null, vehicles.map(function (row) { var disabled = !row.selected; var servicePopover = React.createElement('div', { style: { padding: 8, minWidth: 360 } }, React.createElement('div', { style: { fontWeight: 600, marginBottom: 8 } }, '服务费项目'), React.createElement('table', { style: { width: '100%', borderCollapse: 'collapse', fontSize: 12 } }, React.createElement('thead', null, React.createElement('tr', null, React.createElement('th', { style: { textAlign: 'left', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '服务项目'), React.createElement('th', { style: { textAlign: 'right', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '应收费用'), React.createElement('th', { style: { textAlign: 'right', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '实收费用'), React.createElement('th', { style: { textAlign: 'right', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '减免费用'), React.createElement('th', { style: { textAlign: 'left', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '备注') ) ), React.createElement('tbody', null, (row.serviceItems || []).map(function (s, si) { return React.createElement('tr', { key: si }, React.createElement('td', { style: { padding: '6px 8px' } }, s.name), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, (s.receivable != null ? s.receivable : '') + ' 元'), React.createElement('td', { style: { padding: '6px 8px' } }, React.createElement(Input, { size: 'small', value: s.actual, disabled: disabled, suffix: '元', onChange: function (e) { updateServiceItem(row.key, si, 'actual', e.target.value); } }) ), React.createElement('td', { style: { padding: '6px 8px' } }, React.createElement(Input, { size: 'small', value: s.discount, disabled: disabled, suffix: '元', onChange: function (e) { updateServiceItem(row.key, si, 'discount', e.target.value); } }) ), React.createElement('td', { style: { padding: '6px 8px' } }, React.createElement(Input, { size: 'small', value: s.remark, disabled: disabled, placeholder: '备注', onChange: function (e) { updateServiceItem(row.key, si, 'remark', e.target.value); } }) ) ); }) ) ) ); var proofList = row.discountProof || []; var onProofUpload = function (e) { var files = e.target.files; if (!files || !files.length) return; setEdited(true); var next = proofList.slice(); for (var i = 0; i < files.length; i++) { next.push({ name: files[i].name }); } updateVehicle(row.key, 'discountProof', next); e.target.value = ''; }; var removeProof = function (idx) { setEdited(true); var next = (row.discountProof || []).slice(); next.splice(idx, 1); updateVehicle(row.key, 'discountProof', next); }; return React.createElement('tr', { key: row.key }, React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, React.createElement('input', { type: 'checkbox', checked: row.selected, onChange: function () { toggleVehicleSelected(row.key); } }) ), React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, row.index), React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, row.brand), React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, row.model), React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, row.plateNo || '-'), React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, (row.receivableRent || 0) + ' 元'), React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, React.createElement(Input, { size: 'small', value: row.actualRent, disabled: disabled, suffix: '元', onChange: function (e) { updateVehicle(row.key, 'actualRent', e.target.value); } }) ), React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, React.createElement(Input, { size: 'small', value: row.rentRemark, disabled: disabled, onChange: function (e) { updateVehicle(row.key, 'rentRemark', e.target.value); } }) ), React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, React.createElement(Input, { size: 'small', value: row.discountAmount, disabled: disabled, suffix: '元', onChange: function (e) { updateVehicle(row.key, 'discountAmount', e.target.value); } }) ), React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, React.createElement(Input, { size: 'small', value: row.discountRemark, disabled: disabled, onChange: function (e) { updateVehicle(row.key, 'discountRemark', e.target.value); } }) ), React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, (row.receivableDeposit || 0) + ' 元'), React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, React.createElement(Popover, { content: servicePopover, title: null, trigger: 'click' }, React.createElement(Button, { type: 'link', size: 'small', disabled: disabled }, '管理') ) ), React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, (row.receivableService || 0) + ' 元'), React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, (row.actualService || '0.00') + ' 元'), React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, disabled ? '-' : React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 4 } }, proofList.map(function (p, pidx) { return React.createElement('div', { key: pidx, style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 } }, React.createElement('span', { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' } }, p.name || '附件'), React.createElement(Button, { type: 'link', size: 'small', danger: true, style: { padding: 0, minWidth: 'auto' }, onClick: function () { removeProof(pidx); } }, '删除') ); }), React.createElement('span', null, React.createElement('input', { type: 'file', multiple: true, accept: '.jpg,.jpeg,.png,.pdf', style: { display: 'none' }, id: 'proof-' + row.key, onChange: onProofUpload }), React.createElement(Button, { type: 'link', size: 'small', onClick: function () { var el = document.getElementById('proof-' + row.key); if (el) el.click(); } }, '上传') ) ) ) ); }) ), React.createElement('tfoot', null, React.createElement('tr', { style: { backgroundColor: '#fafafa', fontWeight: 500 } }, React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0' }, colSpan: 5 }, '总计'), React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.receivableRent + ' 元'), React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.actualRent + ' 元'), React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0' } }), React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.discountTotal + ' 元'), React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0' } }), React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.receivableDeposit + ' 元'), React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0' } }), React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.receivableService + ' 元'), React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.actualService + ' 元'), React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0' } }) ) ) ) ), hasHydrogenPrepay ? React.createElement('div', { style: { marginBottom: 16 } }, React.createElement('div', { style: { fontSize: 14, fontWeight: 500, marginBottom: 8 } }, '氢费预付款情况'), React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 16, maxWidth: 800 } }, React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '氢费预付款应收金额'), React.createElement(Input, { value: hydrogen.receivable + ' 元', disabled: true }) ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '氢费预付款实收金额'), React.createElement(Input, { value: hydrogen.actual, suffix: '元', onChange: function (e) { setHydrogen(function (p) { return Object.assign({}, p, { actual: e.target.value }); }); } }) ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '减免金额'), React.createElement(Input, { value: hydrogen.discount, suffix: '元', onChange: function (e) { setHydrogen(function (p) { return Object.assign({}, p, { discount: e.target.value }); }); } }) ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '减免金额备注'), React.createElement(Input, { value: hydrogen.discountRemark, onChange: function (e) { setHydrogen(function (p) { return Object.assign({}, p, { discountRemark: e.target.value }); }); } }) ) ) ) : null, React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px 24px', marginTop: 16 } }, React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '开票方式'), React.createElement(Select, { style: { width: '100%' }, value: invoiceMethod[0], onChange: function (v) { setInvoiceMethod(v); }, placeholder: '请选择' }, React.createElement(Option, { value: '先开票后付款' }, '先开票后付款'), React.createElement(Option, { value: '先付款后开票' }, '先付款后开票') ) ), React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: '1 / -1' }) }, React.createElement('div', { style: labelStyle }, '开票备注'), React.createElement(Input.TextArea, { value: invoiceRemark[0], onChange: function (e) { setInvoiceRemark(e.target.value); setEdited(true); }, rows: 3, placeholder: '请输入开票项目、税率以及其他备注信息,财务将以此进行开票', style: { width: '100%' } }) ) ) ), React.createElement(Card, { title: '开票信息', style: cardStyle }, React.createElement('div', { style: formRowStyle }, React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '客户名称'), React.createElement('div', { style: valueStyle }, invoiceInfo.customerName || '-') ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '纳税人识别号'), React.createElement('div', { style: valueStyle }, invoiceInfo.taxId || '-') ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '地址'), React.createElement('div', { style: valueStyle }, invoiceInfo.address || '-') ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '电话'), React.createElement('div', { style: valueStyle }, invoiceInfo.phone || '-') ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '账户'), React.createElement('div', { style: valueStyle }, invoiceInfo.account || '-') ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '开户行'), React.createElement('div', { style: valueStyle }, invoiceInfo.bank || '-') ), React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: '1 / -1' }) }, React.createElement('div', { style: labelStyle }, '邮寄地址'), React.createElement('div', { style: valueStyle }, invoiceInfo.mailingAddress || '-') ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '开票时间'), React.createElement('div', { style: valueStyle }, invoiceInfo.invoiceTime || '未上传') ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '发票附件'), React.createElement('div', { style: valueStyle }, invoiceInfo.invoiceFile || '未上传') ), React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '开票人'), React.createElement('div', { style: valueStyle }, invoiceInfo.invoicePerson || '-') ) ) ), React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 24 } }, React.createElement(Button, { type: 'primary', onClick: handleSubmit }, '提交审核'), React.createElement(Button, { onClick: handleSave }, '保存'), React.createElement(Button, { onClick: handleCancel }, '取消') ), React.createElement(Modal, { title: '确认', open: submitConfirmVisible[0], onCancel: function () { setSubmitConfirmVisible(false); }, onOk: handleSubmitConfirm, okText: '确认', cancelText: '取消' }, React.createElement('div', null, '请仔细核对提车首付款实收金额,点击确认则进入工作流')), React.createElement(Modal, { title: '确认取消', open: cancelConfirmVisible[0], onCancel: function () { setCancelConfirmVisible(false); }, onOk: handleCancelConfirm, okText: '确认', cancelText: '取消' }, React.createElement('div', null, '取消将会丢失所有已填写数据,是否确认?')), React.createElement(Modal, { title: '需求说明', open: requirementModalVisible[0], onCancel: function () { setRequirementModalVisible(false); }, width: 720, footer: React.createElement(Button, { onClick: function () { setRequirementModalVisible(false); } }, '关闭'), bodyStyle: { maxHeight: '70vh', overflow: 'auto' } }, React.createElement('div', { style: { padding: '8px 0', whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 } }, requirementContent)) ); };