feat(web): 同步交车任务、租赁合同、提车应收款等调整
- 更新多处页面交互与需求说明弹窗文案 - 新增 ETC 管理相关原型页面与需求说明目录内容 Made-with: Cursor
This commit is contained in:
王冕
449
web端/业务管理/租赁账单-收费明细.jsx
Normal file
449
web端/业务管理/租赁账单-收费明细.jsx
Normal file
@@ -0,0 +1,449 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 租赁账单-收费明细（2026年3月11日版本）
|
||||
|
||||
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 Popover = antd.Popover;
|
||||
var Modal = antd.Modal;
|
||||
var message = antd.message;
|
||||
|
||||
var servicePopoverRowIndex = useState(null);
|
||||
var submitConfirmVisible = useState(false);
|
||||
var cancelConfirmVisible = useState(false);
|
||||
var requirementModalVisible = useState(false);
|
||||
|
||||
// 模拟：当前账单信息（由路由/接口传入，此处为第1期账单）
|
||||
var billInfo = useMemo(function () {
|
||||
return {
|
||||
contractCode: 'HT-ZL-2025-001',
|
||||
contractType: '正式合同',
|
||||
projectName: '嘉兴氢能示范项目',
|
||||
customerName: '嘉兴某某物流有限公司',
|
||||
deliveryTaskCode: 'JT-2025-001-A',
|
||||
billCode: 'HT-ZL-2025-0010001',
|
||||
period: 1,
|
||||
billStartDate: '2025-01-01',
|
||||
billEndDate: '2025-01-31'
|
||||
};
|
||||
}, []);
|
||||
|
||||
var isFirstPeriod = billInfo.period === 1;
|
||||
|
||||
// 车辆明细（该账单对应车辆及费用）
|
||||
var vehicleRows = useState([
|
||||
{ key: 'v1', index: 1, brand: '东风', model: 'DFH1180', plateNo: '浙A12345', receivableRent: 30000, actualRent: '29800.00', rentRemark: '首期六期一次性付清', discountAmount: '200.00', discountRemark: '首月优惠', discountProof: [{ name: '优惠审批单.pdf' }], receivableDeposit: 10000, serviceItems: [{ name: '代处理费用', receivable: 200, actual: '200.00', discount: '0.00', remark: '' }, { name: '保险上浮', receivable: 500, actual: '480.00', discount: '20.00', remark: '客户协商' }], receivableService: 700, actualService: '680.00' },
|
||||
{ key: 'v2', index: 2, brand: '福田', model: 'BJ1180', plateNo: '浙A23456', receivableRent: 27000, actualRent: '27000.00', rentRemark: '', discountAmount: '0.00', discountRemark: '', discountProof: [], receivableDeposit: 8000, serviceItems: [{ name: '保养费用', receivable: 300, actual: '300.00', discount: '0.00', remark: '含首保' }], receivableService: 300, actualService: '300.00' },
|
||||
{ key: 'v3', index: 3, brand: '重汽', model: 'ZZ1187', plateNo: '浙A34567', receivableRent: 31200, actualRent: '31200.00', rentRemark: '', discountAmount: '0.00', discountRemark: '', discountProof: [], receivableDeposit: 10000, serviceItems: [{ name: '代处理费用', receivable: 180, actual: '180.00', discount: '0.00', remark: '' }, { name: '上牌服务', receivable: 400, actual: '400.00', discount: '0.00', remark: '' }], receivableService: 580, actualService: '580.00' }
|
||||
]);
|
||||
var vehicles = vehicleRows[0];
|
||||
var setVehicles = vehicleRows[1];
|
||||
|
||||
var hydrogenRow = useState({ receivable: '3580.00', actual: '3500.00', discount: '80.00', discountRemark: '预付款批量减免' });
|
||||
var hydrogen = hydrogenRow[0];
|
||||
var setHydrogen = hydrogenRow[1];
|
||||
|
||||
var updateVehicle = useCallback(function (key, field, value) {
|
||||
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) {
|
||||
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 receivableRent = 0, actualRent = 0, receivableDeposit = 0, receivableService = 0, actualService = 0, discountTotal = 0, serviceDiscountTotal = 0;
|
||||
vehicles.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;
|
||||
(v.serviceItems || []).forEach(function (s) { serviceDiscountTotal += parseFloat(s.discount) || 0; });
|
||||
});
|
||||
var hydrogenReceivable = parseFloat(hydrogen.receivable) || 0;
|
||||
var hydrogenActual = parseFloat(hydrogen.actual) || 0;
|
||||
var hydrogenDiscount = parseFloat(hydrogen.discount) || 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),
|
||||
serviceDiscountTotal: serviceDiscountTotal.toFixed(2),
|
||||
hydrogenReceivable: hydrogenReceivable.toFixed(2),
|
||||
hydrogenActual: hydrogenActual.toFixed(2),
|
||||
hydrogenDiscount: hydrogenDiscount.toFixed(2)
|
||||
};
|
||||
}, [vehicles, hydrogen]);
|
||||
|
||||
var receivableTotal = useMemo(function () {
|
||||
return (parseFloat(totals.receivableRent) + parseFloat(totals.receivableDeposit) + parseFloat(totals.receivableService) + (isFirstPeriod ? parseFloat(totals.hydrogenReceivable) : 0)).toFixed(2);
|
||||
}, [totals, isFirstPeriod]);
|
||||
|
||||
var actualTotal = useMemo(function () {
|
||||
var base = parseFloat(totals.actualRent) + parseFloat(totals.receivableDeposit) + parseFloat(totals.actualService) - parseFloat(totals.discountTotal) - parseFloat(totals.serviceDiscountTotal);
|
||||
if (isFirstPeriod) base += parseFloat(totals.hydrogenActual) - parseFloat(totals.hydrogenDiscount);
|
||||
return base.toFixed(2);
|
||||
}, [totals, isFirstPeriod]);
|
||||
|
||||
var invoiceTotal = useMemo(function () {
|
||||
// 开票金额：同“实收款总额”展示格式，但不包含应收车辆保证金
|
||||
var base = parseFloat(totals.actualRent) + parseFloat(totals.actualService) - parseFloat(totals.discountTotal) - parseFloat(totals.serviceDiscountTotal);
|
||||
if (isFirstPeriod) base += parseFloat(totals.hydrogenActual) - parseFloat(totals.hydrogenDiscount);
|
||||
return base.toFixed(2);
|
||||
}, [totals, isFirstPeriod]);
|
||||
|
||||
var receivablePopoverContent = useMemo(function () {
|
||||
var rows = [
|
||||
['总计应收车辆月租金', totals.receivableRent + ' 元'],
|
||||
['总计应收车辆保证金', totals.receivableDeposit + ' 元'],
|
||||
['总计应收服务费', totals.receivableService + ' 元']
|
||||
];
|
||||
if (isFirstPeriod) rows.push(['氢费预付款应收金额', totals.hydrogenReceivable + ' 元']);
|
||||
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,
|
||||
rows.map(function (r, i) { return React.createElement('tr', { key: i }, React.createElement('td', { style: { padding: '6px 8px' } }, r[0]), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, r[1])); })
|
||||
)
|
||||
)
|
||||
);
|
||||
}, [totals, isFirstPeriod]);
|
||||
|
||||
var actualPopoverContent = useMemo(function () {
|
||||
var rows = [
|
||||
['总计实收车辆月租金', totals.actualRent + ' 元'],
|
||||
['总计应收车辆保证金', totals.receivableDeposit + ' 元'],
|
||||
['总计实收服务费', totals.actualService + ' 元'],
|
||||
['总计减免金额', totals.discountTotal + ' 元'],
|
||||
['服务费各项减免费用总和', totals.serviceDiscountTotal + ' 元']
|
||||
];
|
||||
if (isFirstPeriod) {
|
||||
rows.push(['氢费预付款实收金额', totals.hydrogenActual + ' 元']);
|
||||
rows.push(['氢费预付款减免金额', totals.hydrogenDiscount + ' 元']);
|
||||
}
|
||||
return React.createElement('div', { style: { padding: 8, minWidth: 240 } },
|
||||
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,
|
||||
rows.map(function (r, i) { return React.createElement('tr', { key: i }, React.createElement('td', { style: { padding: '6px 8px' } }, r[0]), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, r[1])); })
|
||||
)
|
||||
)
|
||||
);
|
||||
}, [totals, isFirstPeriod]);
|
||||
|
||||
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 valueStyle = { color: 'rgba(0,0,0,0.85)', fontSize: 14, lineHeight: '22px', minHeight: 22 };
|
||||
var thBase = { padding: '10px 12px', border: '1px solid #f0f0f0', whiteSpace: 'nowrap' };
|
||||
var highlightStyle = { color: '#1890ff', fontWeight: 600, cursor: 'pointer' };
|
||||
var requiredStar = { color: '#ff4d4f', marginRight: 2 };
|
||||
|
||||
var activeServiceIndex = servicePopoverRowIndex[0];
|
||||
var setServicePopoverRowIndex = servicePopoverRowIndex[1];
|
||||
|
||||
function handleSubmit() {
|
||||
submitConfirmVisible[1](true);
|
||||
}
|
||||
function handleSubmitConfirm() {
|
||||
submitConfirmVisible[1](false);
|
||||
message.success('提交成功');
|
||||
if (window.__billChargeDetailBack) window.__billChargeDetailBack();
|
||||
}
|
||||
function handleSave() {
|
||||
message.success('保存成功');
|
||||
if (window.__billChargeDetailBack) window.__billChargeDetailBack();
|
||||
}
|
||||
function handleCancel() {
|
||||
cancelConfirmVisible[1](true);
|
||||
}
|
||||
function handleCancelConfirm() {
|
||||
cancelConfirmVisible[1](false);
|
||||
if (window.__billChargeDetailBack) window.__billChargeDetailBack();
|
||||
else message.info('返回租赁账单列表（原型）');
|
||||
}
|
||||
|
||||
var requirementContent = '租赁账单-收费明细（2026年3月11日版本）\n一个「数字化资产ONEOS运管平台」中的「租赁账单」「收费明细」模块\n#面包屑：业务管理-租赁账单-收费明细；\n1.账单信息：\n#显示该账单对应合同及账单信息，显示以下字段：\n 1.1.合同编码：显示该账单对应合同编码；\n 1.2.合同类型：显示该账单对应合同类型，包括正式合同、试用合同；\n 1.3.项目名称：显示该账单对应合同中项目名称；\n 1.4.客户名称：显示该账单对应合同中客户名称；\n 1.5.交车任务编码：显示交车任务对应编码；\n 1.6.账单编码：显示该账单编码，账单编码规则为：[合同编码][账单编号]组成，主要用于后期与用友YS系统打通时获取财务收款及发票相关数据；\n 前缀为合同编码，后缀为账单编号，规则为：ZD+4位编号，为该合同下第x份账单，例如：ZD0001为该合同下第1份账单，依次类推；\n 例如：JXZL20260216YW101235AZD0001即为JXZL20260216YW101235A合同下第1份账单；；\n 1.7.账单期数：显示该账单期数；\n 1.8.账单开始日期：显示账单开始日期，根据租赁合同及交车任务开始计费日期按规则生成，格式为:YYYY-MM-DD；\n 1.9.账单结束日期：显示账单结束日期，根据租赁合同及交车任务开始计费日期按规则生成，格式为:YYYY-MM-DD；\n2.账单明细：\n#顶部显示应收款总额、实收款总额；\n 2.1.应收款总额：「应收车辆月租金总和」+「应收车辆保证金总和」+「应收服务费总和」+「氢费预付款应收金额」\n 2.2.实收款总额：「实收车辆月租金总和」+「应收车辆保证金总和」+「实收服务费总和」+「氢费预付款实收金额」-「减免费用总和」「服务费各项减免费用总和」\n 2.3.开票金额：「实收车辆月租金总和」+「实收服务费总和」-「减免费用总和」「服务费各项减免费用总和」\n\n#显示该账单对应车辆列表及相关费用信息，显示以下字段；\n 2.3.序号：与租赁合同及交车任务中该车辆序号一致；\n 2.4.品牌：与租赁合同及交车任务中该车辆品牌一致；\n 2.5.型号：与租赁合同及交车任务中该车辆型号一致；\n 2.6.车牌号：与租赁合同及交车任务中该车辆车牌号一致；\n 2.7.应收车辆月租金：与租赁合同中该车辆车辆月租金一致，格式为：xx.xx元；\n 2.8.实收车辆月租金：输入框，2位小数，后缀为元，默认为与应收车辆月租金一致；\n 2.9.车辆租金备注：输入框，支持自定义输入；\n 2.10.减免金额：输入框，2位小数，后缀为元，默认为0.00元；\n 2.11.减免金额备注：输入框，支持自定义输入；\n 2.12.减免证明：附件上传按钮，点击支持多文件上传，已上传文件一行显示一条，支持点击预览，格式支持各类图片、doc、docx、pdf等格式；\n 2.13.应收车辆保证金：首期与合同中车辆保证金一致，第二期开始为0.00，格式为：xx.xx元；\n 2.14.服务费项目：点击管理，弹出气泡卡片，气泡卡片标题为服务费项目，下方为列表，显示服务项目、应收费用、实收费用、备注；\n 2.14.1.服务项目：显示租赁合同中所有服务项目名称；\n 2.14.2.应收费用：显示租赁合同中所有服务项目对应费用，格式为：xx.xx元；\n 2.14.3.实收费用：必填项，输入框，默认反写应收费用，支持修改，由业务员自行输入实收费用金额，精确至2位小数，后缀为元，默认与应收费用一致；\n 2.14.4.减免费用：选填项，输入框，默认为：0.00，精确至2位小数，后缀为元；\n 2.14.4.备注：选填项，输入框，由业务员自行输入备注信息；\n 2.15.应收服务费：显示当前车辆所有服务费应收费用总和，格式为：xx.xx元；\n 2.16.实收服务费：显示当前车辆所有服务费实收费用总和，格式为：xx.xx元；\n#列表下方为氢费预付款情况，首期账单显示，第二期账单开始无此区域内容显示；\n 2.17.氢费预付款应收金额：显示合同中氢费预付款金额；\n 2.18.氢费预付款实收金额：输入框，2位小数，后缀为元，默认与氢费预付款应收金额一致；\n 2.19.减免金额：输入框，2位小数，后缀为元；\n 2.20.减免金额备注：输入框，支持自定义输入；\n\n3.下方为提交审核、保存、取消按钮\n 3.1.提交审核：点击提交审核按钮，进入审核流程；\n 3.2.保存：点击保存按钮，保存当前表单已填数据，不做校验；\n';
|
||||
|
||||
return React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { marginBottom: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
|
||||
React.createElement(Breadcrumb, {
|
||||
items: [
|
||||
{ title: '业务管理' },
|
||||
{ title: '租赁账单' },
|
||||
{ title: '收费明细' }
|
||||
]
|
||||
}),
|
||||
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { requirementModalVisible[1](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 }, billInfo.contractCode || '—')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '合同类型'),
|
||||
React.createElement('div', { style: valueStyle }, billInfo.contractType || '—')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '项目名称'),
|
||||
React.createElement('div', { style: valueStyle }, billInfo.projectName || '—')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '客户名称'),
|
||||
React.createElement('div', { style: valueStyle }, billInfo.customerName || '—')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '交车任务编码'),
|
||||
React.createElement('div', { style: valueStyle }, billInfo.deliveryTaskCode || '—')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '账单编码'),
|
||||
React.createElement('div', { style: valueStyle }, billInfo.billCode || '—')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '账单期数'),
|
||||
React.createElement('div', { style: valueStyle }, billInfo.period != null ? billInfo.period : '—')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '账单开始日期'),
|
||||
React.createElement('div', { style: valueStyle }, billInfo.billStartDate || '—')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '账单结束日期'),
|
||||
React.createElement('div', { style: valueStyle }, billInfo.billEndDate || '—')
|
||||
)
|
||||
)
|
||||
),
|
||||
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: { cursor: 'pointer' } }, '应收款总额：', React.createElement('span', { style: highlightStyle }, receivableTotal, ' 元'))
|
||||
),
|
||||
React.createElement(Popover, { content: actualPopoverContent, title: '实收款明细', trigger: 'click' },
|
||||
React.createElement('span', { style: { cursor: 'pointer' } }, '实收款总额：', React.createElement('span', { style: highlightStyle }, actualTotal, ' 元'))
|
||||
)
|
||||
,
|
||||
React.createElement('span', { style: { cursor: 'default' } }, '开票金额：', React.createElement('span', { style: highlightStyle }, invoiceTotal, ' 元'))
|
||||
),
|
||||
React.createElement('div', { style: { overflowX: 'auto', marginBottom: 16 } },
|
||||
React.createElement('table', { style: { width: '100%', minWidth: 1600, borderCollapse: 'collapse', fontSize: 13, tableLayout: 'fixed' } },
|
||||
React.createElement('thead', null,
|
||||
React.createElement('tr', { style: { backgroundColor: '#fafafa' } },
|
||||
React.createElement('th', { style: Object.assign({}, thBase, { width: 50 }) }, '序号'),
|
||||
React.createElement('th', { style: Object.assign({}, thBase, { width: 80 }) }, '品牌'),
|
||||
React.createElement('th', { style: Object.assign({}, thBase, { width: 90 }) }, '型号'),
|
||||
React.createElement('th', { style: Object.assign({}, thBase, { width: 100 }) }, '车牌号'),
|
||||
React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'right', width: 120 }) }, '应收车辆月租金'),
|
||||
React.createElement('th', { style: Object.assign({}, thBase, { width: 130 }) }, '实收车辆月租金'),
|
||||
React.createElement('th', { style: Object.assign({}, thBase, { width: 120 }) }, '车辆租金备注'),
|
||||
React.createElement('th', { style: Object.assign({}, thBase, { width: 100 }) }, '减免金额'),
|
||||
React.createElement('th', { style: Object.assign({}, thBase, { width: 120 }) }, '减免金额备注'),
|
||||
React.createElement('th', { style: Object.assign({}, thBase, { width: 130 }) }, '减免证明'),
|
||||
React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'right', width: 110 }) }, '应收车辆保证金'),
|
||||
React.createElement('th', { style: Object.assign({}, thBase, { width: 90 }) }, '服务费项目'),
|
||||
React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'right', width: 90 }) }, '应收服务费'),
|
||||
React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'right', width: 90 }) }, '实收服务费')
|
||||
)
|
||||
),
|
||||
React.createElement('tbody', null,
|
||||
vehicles.map(function (row) {
|
||||
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('span', null, React.createElement('span', { style: requiredStar }, '*'), '实收费用')),
|
||||
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, 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, 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, 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;
|
||||
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) {
|
||||
var next = (row.discountProof || []).slice();
|
||||
next.splice(idx, 1);
|
||||
updateVehicle(row.key, 'discountProof', next);
|
||||
};
|
||||
var depositDisplay = isFirstPeriod ? (row.receivableDeposit || 0) : '0.00';
|
||||
return React.createElement('tr', { key: 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 != null ? row.receivableRent : 0) + ' 元'),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
|
||||
React.createElement(Input, { size: 'small', value: row.actualRent, 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, 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, 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, onChange: function (e) { updateVehicle(row.key, 'discountRemark', e.target.value); } })
|
||||
),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
|
||||
React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 4, fontSize: 12 } },
|
||||
proofList.map(function (p, pidx) {
|
||||
return React.createElement('div', { key: pidx, style: { display: 'flex', alignItems: 'center', gap: 4 } },
|
||||
React.createElement(Button, { type: 'link', size: 'small', style: { padding: 0, height: 'auto' }, onClick: function () { message.info('预览：' + (p.name || '附件')); } }, 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,.doc,.docx', style: { display: 'none' }, id: 'proof-' + row.key, onChange: onProofUpload }),
|
||||
React.createElement(Button, { type: 'default', size: 'small', onClick: function () { var el = document.getElementById('proof-' + row.key); if (el) el.click(); } }, '附件上传')
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, (depositDisplay !== undefined && depositDisplay !== null ? depositDisplay : '0.00') + ' 元'),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
|
||||
React.createElement(Popover, {
|
||||
content: servicePopover,
|
||||
title: null,
|
||||
trigger: 'click',
|
||||
open: activeServiceIndex === row.key,
|
||||
onOpenChange: function (open) { setServicePopoverRowIndex(open ? row.key : null); }
|
||||
},
|
||||
React.createElement(Button, { type: 'link', size: 'small' }, '管理')
|
||||
)
|
||||
),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, (row.receivableService != null ? row.receivableService : '0.00') + ' 元'),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, (row.actualService || '0.00') + ' 元')
|
||||
);
|
||||
})
|
||||
)
|
||||
)
|
||||
),
|
||||
isFirstPeriod ? React.createElement('div', { style: { marginTop: 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: '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 () { submitConfirmVisible[1](false); },
|
||||
onOk: handleSubmitConfirm,
|
||||
okText: '确认',
|
||||
cancelText: '取消'
|
||||
}, '请确认账单金额无误'),
|
||||
React.createElement(Modal, {
|
||||
title: '确认取消',
|
||||
open: cancelConfirmVisible[0],
|
||||
onCancel: function () { cancelConfirmVisible[1](false); },
|
||||
onOk: handleCancelConfirm,
|
||||
okText: '确认',
|
||||
cancelText: '取消'
|
||||
}, '取消将会丢失未保存的修改，是否确认？'),
|
||||
React.createElement(Modal, {
|
||||
title: '需求说明',
|
||||
open: requirementModalVisible[0],
|
||||
onCancel: function () { requirementModalVisible[1](false); },
|
||||
width: 720,
|
||||
footer: React.createElement(Button, { onClick: function () { requirementModalVisible[1](false); } }, '关闭'),
|
||||
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
|
||||
}, React.createElement('div', { style: { padding: '8px 0' } },
|
||||
React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 } }, requirementContent)
|
||||
))
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user