wangmian/ONE-OS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web端：财务管理提车应收款-收款、车辆租赁合同与替换车管理改动同步

Browse Source 
- 财务管理：新增提车应收款-收款.jsx，移除旧提车应收款/收费明细/首付款页面；项目信息与开票信息改为直接展示
- 车辆租赁合同：列表租赁车辆数/已交车辆数及气泡列调整；续签/转正式合同去除合同编码，交车区域·交车地点·合同原件布局调整
- 运维-车辆业务：新增替换车管理、替换车管理-新增/查看/编辑

Made-with: Cursor
This commit is contained in:
王冕
2026-03-04 20:38:06 +08:00
parent 3be6b02e9a
commit e70342e8fe
13 changed files with 2209 additions and 1883 deletions
Download Patch File Download Diff File Expand all files Collapse all files

599
web端/财务管理/提车应收款-收款.jsx Normal file
View File

@@ -0,0 +1,599 @@
// 【重要】必须使用 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))
);
};

432
web端/财务管理/提车应收款.jsx
View File

File diff suppressed because one or more lines are too long

278
web端/财务管理/提车收款-收费明细.jsx
View File

@@ -1,278 +0,0 @@
// 【重要】必须使用 const Component 作为组件变量名
// 提车应收款 - 收费明细（租赁费用管理-提车应收款，第一步由业务填写，antd 规范）
const Component = function() {
var useState = React.useState;
var useCallback = React.useCallback;
var useMemo = React.useMemo;
var antd = window.antd;
var Breadcrumb = antd.Breadcrumb;
var Card = antd.Card;
var Input = antd.Input;
var Button = antd.Button;
var Table = antd.Table;
var Modal = antd.Modal;
var message = antd.message;
var App = antd.App;
var mockProject = useMemo(function() {
return { contractCode: 'HT-ZL-2025-001', contractType: '正式合同', projectName: '北京朝阳区租赁项目', customerName: '某某科技有限公司', paymentMethod: '预付', paymentCycle: '1个月', department: '运营部', responsible: '张三' };
}, []);
var mockVehicleList = useMemo(function() {
return [
{ brand: '奔驰', model: 'E300L', plateNo: '京A12345', monthlyRent: '8000.00', deposit: '2000.00', serviceItems: [{ name: '保养服务', fee: '300.00', remark: '' }, { name: '保险', fee: '200.00', remark: '' }] },
{ brand: '宝马', model: '530Li', plateNo: '京B67890', monthlyRent: '7000.00', deposit: '1500.00', serviceItems: [{ name: '保养服务', fee: '250.00', remark: '' }] }
];
}, []);
var mockHydrogen = useMemo(function() {
return { bearer: '客户', paymentMethod: '预付', prepaymentAmount: '3580.00' };
}, []);
var mockInvoice = useMemo(function() {
return { customerName: '某某科技有限公司', taxId: '91330400MA2XXXXX1', address: '浙江省嘉兴市南湖区科技大道1号', phone: '0571-88888888', account: '6222021234567890123', bank: '中国工商银行嘉兴分行', mailingAddress: '浙江省嘉兴市南湖区科技大道1号' };
}, []);
var vehicleRowsState = useState([]);
var vehicleRows = vehicleRowsState[0];
var setVehicleRows = vehicleRowsState[1];
var serviceModalRowState = useState(null);
var serviceModalRow = serviceModalRowState[0];
var setServiceModalRow = serviceModalRowState[1];
var requirementVisibleState = useState(false);
var requirementVisible = requirementVisibleState[0];
var setRequirementVisible = requirementVisibleState[1];
var cancelConfirmVisibleState = useState(false);
var cancelConfirmVisible = cancelConfirmVisibleState[0];
var setCancelConfirmVisible = cancelConfirmVisibleState[1];
var requirementContent = '「车辆管理系统」中的「租赁费用管理」模块下「提车应收款」中「收费明细」模块，第一步由业务填写；\n\n#提车应收款-收款明细\n\n整个页面从上至下为项目信息、车辆首付款、氢费预付款、开票信息4个卡片模块组成；\n\n1.项目信息：\n1.1.上方为表单，显示合同编码、合同类型、项目名称、客户名称、付款方式、付款周期、业务部门、业务负责人；\n1.1.1.合同编码：显示租赁合同编号；\n1.1.2.合同类型：显示租赁合同类型，类型有正式合同/试用合同；\n1.1.3.项目名称：显示租赁合同项目名称；\n1.1.4.客户名称：显示租赁合同客户名称；\n1.1.5.付款方式：显示租赁合同付款方式，类型有预付/后付；\n1.1.6.付款周期：显示付款周期，类型有1个月-12个月；\n1.1.7.业务部门：显示租赁合同对应业务部门；\n1.1.8.业务负责人：显示租赁合同对应业务负责人；\n\n2.提车应收款：\n2.1.上方为提车应收款应收总额；\n2.1.1.提车应收款总额：显示总金额，格式为xx.xx元，计算方式为：所有应付车辆租金+所有应付保证金+所有应付服务费-所有减免金额；\n2.2.车辆账单：品牌/型号/车牌号/应收车辆租金/车辆租金备注/应收保证金/服务费项目/应收服务费/减免金额/减免金额备注\n2.2.1.-2.2.7. 品牌至服务费项目（点击管理弹出卡片）；\n2.1.8.应收服务费：根据服务费项目计算总和；\n2.1.9.减免金额：选填，默认为0；\n2.1.10.减免金额备注：选填；\n\n3.氢费预付款：\n3.1.氢费应收总额（=应收金额-减免金额）；氢费预付款应收金额、减免金额、减免金额备注；\n\n4.开票信息：\n4.1.开票金额（=提车应收款总额+氢费应收总额）；\n4.2.客户名称、纳税人识别号、地址、电话、账户、开户行、邮寄地址、开票时间(待开票)、发票附件(待上传)、备注(无)；\n\n5.页面底部：提交审核、取消；取消二次确认；\n\n6.审批流程：标准/非标情况说明。';
var hydrogenFormState = useState(function() {
var isCustomerPrepay = (mockHydrogen.bearer === '客户' && mockHydrogen.paymentMethod === '预付');
var paid = isCustomerPrepay ? (mockHydrogen.prepaymentAmount || '0.00') : '0.00';
return { paidTotal: paid, discount: '0.00', discountRemark: '' };
});
var hydrogenForm = hydrogenFormState[0];
var setHydrogenForm = hydrogenFormState[1];
var hydrogenPayableTotal = useMemo(function() {
var paid = parseFloat(hydrogenForm.paidTotal) || 0;
var discount = parseFloat(hydrogenForm.discount) || 0;
var v = paid - discount;
return (v >= 0 ? v : 0).toFixed(2);
}, [hydrogenForm.paidTotal, hydrogenForm.discount]);
function formatTwoDecimals(val) {
var n = parseFloat(String(val).replace(/[^\d.-]/g, ''));
if (isNaN(n)) return '0.00';
return n.toFixed(2);
}
React.useEffect(function() {
var rows = mockVehicleList.map(function(v) {
var serviceItems = (v.serviceItems || []).map(function(s) {
return { name: s.name, fee: s.fee || '', remark: s.remark || '' };
});
return {
brand: v.brand,
model: v.model,
plateNo: v.plateNo || '-',
payableRent: v.monthlyRent || '',
rentRemark: '',
deposit: v.deposit || '',
serviceItems: serviceItems,
discount: '0',
discountRemark: ''
};
});
setVehicleRows(rows);
}, [mockVehicleList]);
function getRowServiceTotal(row) {
var total = 0;
var list = row.serviceItems || [];
for (var i = 0; i < list.length; i++) {
var n = parseFloat(list[i].fee);
if (!isNaN(n)) total += n;
}
return total.toFixed(2);
}
var totalPayable = useMemo(function() {
var rentSum = 0, depositSum = 0, serviceSum = 0, discountSum = 0;
for (var i = 0; i < vehicleRows.length; i++) {
var r = vehicleRows[i];
rentSum += parseFloat(r.payableRent) || 0;
depositSum += parseFloat(r.deposit) || 0;
serviceSum += parseFloat(getRowServiceTotal(r)) || 0;
discountSum += parseFloat(r.discount) || 0;
}
return (rentSum + depositSum + serviceSum - discountSum).toFixed(2);
}, [vehicleRows]);
var invoiceAmount = useMemo(function() {
return (parseFloat(totalPayable) + parseFloat(hydrogenPayableTotal)).toFixed(2);
}, [totalPayable, hydrogenPayableTotal]);
var handleVehicleChange = useCallback(function(rowIndex, field, value) {
setVehicleRows(function(prev) {
var next = prev.slice();
var row = next[rowIndex] ? Object.assign({}, next[rowIndex]) : next[rowIndex];
row[field] = value;
next[rowIndex] = row;
return next;
});
}, []);
var handleServiceItemChange = useCallback(function(rowIndex, itemIndex, field, value) {
setVehicleRows(function(prev) {
var next = prev.slice();
var row = next[rowIndex] ? Object.assign({}, next[rowIndex]) : next[rowIndex];
var items = (row.serviceItems || []).slice();
var item = items[itemIndex] ? Object.assign({}, items[itemIndex]) : items[itemIndex];
item[field] = value;
items[itemIndex] = item;
row.serviceItems = items;
next[rowIndex] = row;
return next;
});
}, []);
var handleSubmit = useCallback(function() {
var err = [];
for (var i = 0; i < vehicleRows.length; i++) {
var r = vehicleRows[i];
if (!r.payableRent || String(r.payableRent).trim() === '') err.push('第' + (i + 1) + '行应收车辆租金');
if (!r.deposit || String(r.deposit).trim() === '') err.push('第' + (i + 1) + '行应收保证金');
var items = r.serviceItems || [];
for (var j = 0; j < items.length; j++) {
if (!items[j].fee || String(items[j].fee).trim() === '') err.push('第' + (i + 1) + '行服务费项「' + (items[j].name || '') + '」应收费用');
}
}
if (!hydrogenForm.paidTotal || String(hydrogenForm.paidTotal).trim() === '') err.push('氢费预付款应收金额');
if (!hydrogenForm.discount || String(hydrogenForm.discount).trim() === '') err.push('氢费减免金额');
if (err.length > 0) {
message.warning('请填写必填项：' + err.join('、'));
return;
}
message.success('提交成功，该条记录已移至审核中心，审核状态为待审核');
}, [vehicleRows, hydrogenForm]);
var handleCancelClick = useCallback(function() { setCancelConfirmVisible(true); }, []);
var handleCancelConfirm = useCallback(function(confirmed) {
setCancelConfirmVisible(false);
if (confirmed) message.info('已返回提车应收款列表');
}, []);
var layoutStyle = { padding: '16px 24px 48px', backgroundColor: '#f5f5f5', minHeight: '100vh', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', fontSize: 14 };
var formRowStyle = { display: 'flex', flexWrap: 'wrap', marginBottom: 16 };
var formColStyle = { flex: '0 0 33.33%', minWidth: 200, paddingRight: 16, marginBottom: 8 };
var labelStyle = { display: 'block', marginBottom: 6, color: 'rgba(0,0,0,0.85)' };
var labelRequiredStyle = { color: '#ff4d4f', marginRight: 4 };
var totalLineStyle = { marginBottom: 16, fontSize: 14 };
var totalAmountStyle = { color: '#1890ff', fontWeight: 600, fontSize: 16 };
var footerStyle = { position: 'fixed', bottom: 0, left: 0, right: 0, padding: '12px 24px', backgroundColor: '#fff', borderTop: '1px solid #e8e8e8', display: 'flex', gap: 12, zIndex: 99 };
var FormItem = function(props) {
return React.createElement('div', { style: props.colStyle || formColStyle },
React.createElement('label', { style: labelStyle }, props.required ? React.createElement('span', { style: labelRequiredStyle }, '*') : null, props.label),
props.children
);
};
var projectFields = React.createElement('div', { style: formRowStyle },
React.createElement(FormItem, { label: '合同编码' }, React.createElement(Input, { value: mockProject.contractCode, disabled: true, style: { width: '100%' } })),
React.createElement(FormItem, { label: '合同类型' }, React.createElement(Input, { value: mockProject.contractType, disabled: true, style: { width: '100%' } })),
React.createElement(FormItem, { label: '项目名称' }, React.createElement(Input, { value: mockProject.projectName, disabled: true, style: { width: '100%' } })),
React.createElement(FormItem, { label: '客户名称' }, React.createElement(Input, { value: mockProject.customerName, disabled: true, style: { width: '100%' } })),
React.createElement(FormItem, { label: '付款方式' }, React.createElement(Input, { value: mockProject.paymentMethod, disabled: true, style: { width: '100%' } })),
React.createElement(FormItem, { label: '付款周期' }, React.createElement(Input, { value: mockProject.paymentCycle, disabled: true, style: { width: '100%' } })),
React.createElement(FormItem, { label: '业务部门' }, React.createElement(Input, { value: mockProject.department, disabled: true, style: { width: '100%' } })),
React.createElement(FormItem, { label: '业务负责人' }, React.createElement(Input, { value: mockProject.responsible, disabled: true, style: { width: '100%' } }))
);
var vehicleColumns = [
{ title: '品牌', dataIndex: 'brand', key: 'brand', width: 90 },
{ title: '型号', dataIndex: 'model', key: 'model', width: 100 },
{ title: '车牌号', dataIndex: 'plateNo', key: 'plateNo', width: 100 },
{ title: '应收车辆租金', key: 'payableRent', width: 120, render: function(_, r, idx) { return React.createElement(Input, { value: r.payableRent, onChange: function(e) { handleVehicleChange(idx, 'payableRent', e.target.value); }, style: { width: '100%' }, addonAfter: '元' }); } },
{ title: '车辆租金备注', key: 'rentRemark', width: 110, render: function(_, r, idx) { return React.createElement(Input, { value: r.rentRemark || '', onChange: function(e) { handleVehicleChange(idx, 'rentRemark', e.target.value); }, placeholder: '选填', style: { width: '100%' } }); } },
{ title: '应收保证金', dataIndex: 'deposit', key: 'deposit', width: 100 },
{ title: '服务费项目', key: 'service', width: 90, render: function(_, r, idx) { return React.createElement(Button, { type: 'link', size: 'small', onClick: function() { setServiceModalRow(idx); } }, '管理'); } },
{ title: '应收服务费', key: 'serviceTotal', width: 100, render: function(_, r) { return getRowServiceTotal(r); } },
{ title: '减免金额', key: 'discount', width: 100, render: function(_, r, idx) { return React.createElement(Input, { value: r.discount, onChange: function(e) { handleVehicleChange(idx, 'discount', e.target.value); }, placeholder: '0', style: { width: '100%' } }); } },
{ title: '减免金额备注', key: 'discountRemark', width: 110, render: function(_, r, idx) { return React.createElement(Input, { value: r.discountRemark || '', onChange: function(e) { handleVehicleChange(idx, 'discountRemark', e.target.value); }, placeholder: '选填', style: { width: '100%' } }); } }
];
var vehicleTable = React.createElement(Table, {
rowKey: function(_, i) { return String(i); },
columns: vehicleColumns,
dataSource: vehicleRows,
pagination: false,
size: 'small',
scroll: { x: 1000 }
});
var hydrogenFields = React.createElement('div', { style: formRowStyle },
React.createElement(FormItem, { label: '氢费预付款应收金额', required: true }, React.createElement(Input, { value: hydrogenForm.paidTotal, onChange: function(e) { setHydrogenForm(function(prev) { return Object.assign({}, prev, { paidTotal: e.target.value }); }); }, onBlur: function() { setHydrogenForm(function(prev) { return Object.assign({}, prev, { paidTotal: formatTwoDecimals(prev.paidTotal) }); }); }, placeholder: '0.00', addonAfter: '元', style: { width: '100%' } })),
React.createElement(FormItem, { label: '减免金额', required: true }, React.createElement(Input, { value: hydrogenForm.discount, onChange: function(e) { setHydrogenForm(function(prev) { return Object.assign({}, prev, { discount: e.target.value }); }); }, onBlur: function() { setHydrogenForm(function(prev) { return Object.assign({}, prev, { discount: formatTwoDecimals(prev.discount) }); }); }, placeholder: '0.00', addonAfter: '元', style: { width: '100%' } })),
React.createElement(FormItem, { label: '减免金额备注' }, React.createElement(Input, { value: hydrogenForm.discountRemark || '', onChange: function(e) { setHydrogenForm(function(prev) { return Object.assign({}, prev, { discountRemark: e.target.value }); }); }, placeholder: '选填', style: { width: '100%' } }))
);
var invoiceFields = React.createElement('div', { style: formRowStyle },
React.createElement(FormItem, { label: '客户名称' }, React.createElement(Input, { value: mockInvoice.customerName, disabled: true, style: { width: '100%' } })),
React.createElement(FormItem, { label: '纳税人识别号' }, React.createElement(Input, { value: mockInvoice.taxId, disabled: true, style: { width: '100%' } })),
React.createElement(FormItem, { label: '地址' }, React.createElement(Input, { value: mockInvoice.address, disabled: true, style: { width: '100%' } })),
React.createElement(FormItem, { label: '电话' }, React.createElement(Input, { value: mockInvoice.phone, disabled: true, style: { width: '100%' } })),
React.createElement(FormItem, { label: '账户' }, React.createElement(Input, { value: mockInvoice.account, disabled: true, style: { width: '100%' } })),
React.createElement(FormItem, { label: '开户行' }, React.createElement(Input, { value: mockInvoice.bank, disabled: true, style: { width: '100%' } })),
React.createElement(FormItem, { label: '邮寄地址' }, React.createElement(Input, { value: mockInvoice.mailingAddress, disabled: true, style: { width: '100%' } })),
React.createElement(FormItem, { label: '开票时间' }, React.createElement(Input, { value: '待开票', disabled: true, style: { width: '100%' } })),
React.createElement(FormItem, { label: '发票附件' }, React.createElement(Input, { value: '待上传', disabled: true, style: { width: '100%' } })),
React.createElement(FormItem, { label: '备注' }, React.createElement(Input, { value: '无', disabled: true, style: { width: '100%' } }))
);
var serviceModalDataSource = serviceModalRow !== null && vehicleRows[serviceModalRow] ? (vehicleRows[serviceModalRow].serviceItems || []) : [];
var serviceModalColumns = [
{ title: '服务项目', dataIndex: 'name', key: 'name', width: 140 },
{ title: '应收费用', key: 'fee', width: 140, render: function(_, item, itemIndex) { return React.createElement(Input, { value: item.fee, onChange: function(e) { handleServiceItemChange(serviceModalRow, itemIndex, 'fee', e.target.value); }, style: { width: '100%' } }); } },
{ title: '服务费用备注', key: 'remark', width: 180, render: function(_, item, itemIndex) { return React.createElement(Input, { value: item.remark || '', onChange: function(e) { handleServiceItemChange(serviceModalRow, itemIndex, 'remark', e.target.value); }, placeholder: '选填', style: { width: '100%' } }); } }
];
var serviceModalOpen = serviceModalRow !== null;
var serviceModalContent = serviceModalOpen ? React.createElement(Table, { rowKey: function(_, i) { return String(i); }, columns: serviceModalColumns, dataSource: serviceModalDataSource, pagination: false, size: 'small' }) : null;
var serviceModalFooter = React.createElement(Button, { onClick: function() { setServiceModalRow(null); } }, '关闭');
var requirementModalFooter = React.createElement(Button, { onClick: function() { setRequirementVisible(false); } }, '关闭');
var cancelModalOk = function() { handleCancelConfirm(true); };
var cancelModalCancel = function() { setCancelConfirmVisible(false); };
return React.createElement(App, null,
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() { setRequirementVisible(true); } }, '查看需求说明')
),
React.createElement(Card, { title: '项目信息', style: { marginBottom: 16 } }, projectFields),
React.createElement(Card, { title: '提车应收款', style: { marginBottom: 16 } },
React.createElement('div', { style: totalLineStyle },
React.createElement('span', { style: { marginRight: 8 } }, '提车应收款总额：'),
React.createElement('span', { style: totalAmountStyle }, totalPayable + ' 元')
),
vehicleTable
),
React.createElement(Card, { title: '氢费预付款', style: { marginBottom: 16 } },
React.createElement('div', { style: totalLineStyle },
React.createElement('span', { style: { marginRight: 8 } }, '氢费应收总额：'),
React.createElement('span', { style: totalAmountStyle }, hydrogenPayableTotal + ' 元')
),
hydrogenFields
),
React.createElement(Card, { title: '开票信息', style: { marginBottom: 80 } },
React.createElement('div', { style: totalLineStyle },
React.createElement('span', { style: { marginRight: 8 } }, '开票金额：'),
React.createElement('span', { style: totalAmountStyle }, invoiceAmount + ' 元')
),
invoiceFields
),
React.createElement('div', { style: footerStyle },
React.createElement(Button, { type: 'primary', onClick: handleSubmit }, '提交审核'),
React.createElement(Button, { onClick: handleCancelClick }, '取消')
),
React.createElement(Modal, { title: '服务费项目', open: serviceModalOpen, onCancel: function() { setServiceModalRow(null); }, footer: serviceModalFooter, destroyOnClose: true }, serviceModalContent),
React.createElement(Modal, { title: '需求说明', open: requirementVisible, onCancel: function() { setRequirementVisible(false); }, width: 720, footer: requirementModalFooter, bodyStyle: { maxHeight: '70vh', overflow: 'auto' } }, React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 14, lineHeight: 1.6 } }, requirementContent)),
React.createElement(Modal, { title: '提示', open: cancelConfirmVisible, onCancel: cancelModalCancel, onOk: cancelModalOk, okText: '是', cancelText: '否' }, React.createElement('div', { style: { fontSize: 14 } }, '取消将会丢失所有已添加数据，是否确认取消？'))
)
);
};

1048
web端/财务管理/提车首付款.jsx
View File

File diff suppressed because it is too large Load Diff