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

运维/财务：完善交车单编辑/查看与还车应结款页面

Browse Source 
- 交车单编辑页：布局对齐、检查单合并、照片必填与需求说明
- 新增交车单查看页：只读展示与样例数据
- 还车应结款相关页面与需求说明补齐

Made-with: Cursor
This commit is contained in:
王冕
2026-03-18 22:10:05 +08:00
parent e842a778a4
commit 92d3b97bca
18 changed files with 6636 additions and 719 deletions
Download Patch File Download Diff File Expand all files Collapse all files

589
web端/财务管理/还车应结款-查看.jsx Normal file
View File

@@ -0,0 +1,589 @@
// 【重要】必须使用 const Component 作为组件变量名
// 财务管理 - 还车应结款 - 查看（只读）
const Component = function () {
var useMemo = React.useMemo;
var antd = window.antd;
var Breadcrumb = antd.Breadcrumb;
var Card = antd.Card;
var Table = antd.Table;
var Button = antd.Button;
var Input = antd.Input;
var Tooltip = antd.Tooltip;
var Popover = antd.Popover;
var message = antd.message;
var TextArea = Input.TextArea;
function toFixed2(v) {
if (v === null || v === undefined || v === '') return '';
var n = typeof v === 'number' ? v : parseFloat(v);
return isNaN(n) ? '' : n.toFixed(2);
}
function fmtMoney(v) {
var n = typeof v === 'number' ? v : parseFloat(v);
if (isNaN(n)) n = 0;
return n.toFixed(2);
}
// 页面样式
var layoutStyle = { padding: '16px 24px 72px', background: '#f5f5f5', minHeight: '100vh' };
var cardStyle = { marginBottom: 16 };
var footerStyle = { position: 'fixed', left: 0, right: 0, bottom: 0, background: '#fff', borderTop: '1px solid #f0f0f0', padding: '12px 24px', display: 'flex', justifyContent: 'flex-start', gap: 12, zIndex: 10 };
// 还车车辆明细（单车示例）
var vehicleDetail = useMemo(function () {
return [{
key: 'v1',
plateNo: '粤AGP5621',
contractCode: 'LNZLHT20251106001',
projectName: '嘉兴腾4.5T租赁',
customerName: '嘉兴某某物流有限公司',
deliveryTime: '2026-02-01',
returnTime: '2026-02-27',
fragileInsurance: '是',
tireInsurance: '否',
maintenanceInsurance: '是'
}];
}, []);
// 业务服务组明细（只读样例）
var businessServiceRows = useMemo(function () {
var items = ['违章处理违约金', '保险上浮', 'ETC-客户未缴费用', 'ETC卡缺损费', 'ETC设备缺损费'];
return items.map(function (name, i) {
return {
key: 'bs-' + i,
seq: i + 1,
feeItem: name,
amount: i === 2 ? '100.00' : '0.00',
remark: '',
lastUpdateTime: '2026-02-27 10:20',
photos: [],
attachments: []
};
});
}, []);
var billInfo = useMemo(function () {
return {
receivedRent: '0.00',
actualRent: '0.00',
shouldRefundRent: '0.00'
};
}, []);
var energy = useMemo(function () {
return {
deliveryHydrogen: '85.00',
returnHydrogen: '72.00',
hydrogenUnitPrice: '35.00',
hydrogenSupplement: '455.00',
hydrogenFee: '0.00',
electricFee: '0.00',
prepayRefund: '0.00',
userBalance: '1200.00'
};
}, []);
// 运维部明细（只读样例）
var tireTreadList = useMemo(function () {
var unit = 25; // 元/mm
var rows = [
{ key: 't1', name: '左前轮', deliveryDepth: '6.80', returnDepth: '6.20' },
{ key: 't2', name: '左后轮（内）', deliveryDepth: '6.70', returnDepth: '6.00' },
{ key: 't3', name: '左后轮（外）', deliveryDepth: '6.60', returnDepth: '6.10' },
{ key: 't4', name: '右前轮', deliveryDepth: '6.90', returnDepth: '6.40' },
{ key: 't5', name: '右后轮（内）', deliveryDepth: '6.50', returnDepth: '6.00' },
{ key: 't6', name: '右后轮（外）', deliveryDepth: '6.80', returnDepth: '6.30' },
{ key: 't7', name: '左中轮', deliveryDepth: '6.70', returnDepth: '6.20' },
{ key: 't8', name: '右中轮', deliveryDepth: '6.60', returnDepth: '6.10' },
{ key: 't9', name: '左后备位轮', deliveryDepth: '6.90', returnDepth: '6.50' },
{ key: 't10', name: '右后备位轮', deliveryDepth: '6.40', returnDepth: '6.00' },
{ key: 'spare', name: '备胎', deliveryDepth: '7.00', returnDepth: '7.00' }
];
return rows.map(function (r) {
var d = parseFloat(r.deliveryDepth) || 0;
var rr = parseFloat(r.returnDepth) || 0;
var diff = Math.max(0, d - rr);
var total = diff * unit;
return {
key: r.key,
name: r.name,
deliveryDepth: d.toFixed(2),
returnDepth: rr.toFixed(2),
diff: diff.toFixed(2),
unitPrice: unit.toFixed(2),
totalAmount: total.toFixed(2)
};
});
}, []);
var operationRows = useMemo(function () {
var fixed = [
{ name: '清洗费', amount: '0.00' },
{ name: '未结算保养', amount: '372.50' },
{ name: '未结算维修', amount: '0.00' },
{ name: '车损费用', amount: '0.00' },
{ name: '工具损坏丢失费用', amount: '0.00' },
{ name: '证件丢失费用', amount: '0.00' },
{ name: '广告损坏丢失费用', amount: '0.00' },
{ name: '送车服务费', amount: '0.00' },
{ name: '接车服务费', amount: '0.00' },
{ name: '轮胎磨损费用', amount: '0.00' }
];
return fixed.map(function (x, i) {
return { key: 'op-' + i, seq: i + 1, feeItem: x.name, amount: x.amount, worryFreeDiscount: '0.00', remark: '', lastUpdateTime: '2026-02-27 10:20' };
});
}, []);
// 安全组（只读示例）
var violationList = useMemo(function () {
return [{
key: 'w1',
code: 'WZ202602010001',
plateNo: '浙F03218F',
violationBehavior: '闯红灯',
violationTime: '2026-02-01',
penaltyAmount: '100.00',
paymentStatus: '未缴费',
score: '6',
handleStatus: '未处理',
violationCustomer: '上海馨想事成物流有限公司',
violationPhoto: '',
remark: ''
}];
}, []);
var accidentList = useMemo(function () {
return [{
key: 'a1',
accidentCode: 'SG202508250001',
plateNo: '京A29256F',
accidentTime: '2025-08-25',
accidentPlace: '北京市大兴区某路段',
accidentType: '撞固定物',
customerName: '北京海龙运输有限公司',
ourClaimAmount: '',
theirClaimAmount: '',
responsibility: '全责',
accidentStatus: '未结案',
closeTime: '',
otherFee: '',
remark: ''
}];
}, []);
// 合计/统计（只读）
var businessServiceTotal = useMemo(function () {
var sum = 0;
(businessServiceRows || []).forEach(function (r) { sum += (parseFloat(r.amount) || 0); });
return sum.toFixed(2);
}, [businessServiceRows]);
var operationTotal = useMemo(function () {
var sum = 0;
(operationRows || []).forEach(function (r) { sum += (parseFloat(r.amount) || 0); });
return sum.toFixed(2);
}, [operationRows]);
var energyTotal = useMemo(function () {
var a = parseFloat(energy.hydrogenSupplement) || 0;
var b = parseFloat(energy.hydrogenFee) || 0;
var c = parseFloat(energy.electricFee) || 0;
return (a + b + c).toFixed(2);
}, [energy.hydrogenSupplement, energy.hydrogenFee, energy.electricFee]);
var pendingSettle = useMemo(function () {
var bs = parseFloat(businessServiceTotal) || 0;
var rentRefund = parseFloat(billInfo.shouldRefundRent) || 0;
var op = parseFloat(operationTotal) || 0;
var en = (parseFloat(energy.hydrogenSupplement) || 0) + (parseFloat(energy.hydrogenFee) || 0) + (parseFloat(energy.electricFee) || 0) - (parseFloat(energy.prepayRefund) || 0);
return (bs + rentRefund + en + op).toFixed(2);
}, [businessServiceTotal, billInfo.shouldRefundRent, operationTotal, energy.hydrogenSupplement, energy.hydrogenFee, energy.electricFee, energy.prepayRefund]);
var depositAmount = '5000.00';
var refundTotal = useMemo(function () {
var diff = (parseFloat(depositAmount) || 0) - (parseFloat(pendingSettle) || 0);
return diff > 0 ? diff.toFixed(2) : '0.00';
}, [depositAmount, pendingSettle]);
var payTotal = useMemo(function () {
var diff = (parseFloat(depositAmount) || 0) - (parseFloat(pendingSettle) || 0);
return diff < 0 ? Math.abs(diff).toFixed(2) : '0.00';
}, [depositAmount, pendingSettle]);
function buildBreakdownContent(list) {
var headStyle = { padding: '6px 10px', textAlign: 'left', borderBottom: '1px solid #f0f0f0', background: '#fafafa', fontWeight: 600, fontSize: 12 };
var tdStyle = { padding: '6px 10px', borderBottom: '1px solid #f0f0f0', fontSize: 12 };
return React.createElement('div', { style: { padding: 0, minWidth: 320 } },
React.createElement('table', { style: { width: '100%', borderCollapse: 'collapse' } },
React.createElement('thead', null,
React.createElement('tr', null,
React.createElement('th', { style: headStyle }, '费用项'),
React.createElement('th', { style: Object.assign({}, headStyle, { textAlign: 'right' }) }, '金额(元)')
)
),
React.createElement('tbody', null,
(list || []).map(function (r) {
return React.createElement('tr', { key: r.key },
React.createElement('td', { style: tdStyle }, r.item),
React.createElement('td', { style: Object.assign({}, tdStyle, { fontWeight: r.strong ? 600 : 400, textAlign: 'right' }) }, r.amount)
);
})
)
)
);
}
var settleBreakdown = useMemo(function () {
return [
{ key: 'bs', item: '业务服务组费用项金额总和', amount: businessServiceTotal || '0.00' },
{ key: 'rent', item: '业务服务组-车辆应退租金', amount: (toFixed2(billInfo.shouldRefundRent) || '0.00') },
{ key: 'hDiff', item: '能源采购组-氢量差补缴金额', amount: (toFixed2(energy.hydrogenSupplement) || '0.00') },
{ key: 'hFee', item: '能源采购组-氢费补缴金额', amount: (toFixed2(energy.hydrogenFee) || '0.00') },
{ key: 'eFee', item: '能源采购组-电费补缴金额', amount: (toFixed2(energy.electricFee) || '0.00') },
{ key: 'prepay', item: '能源采购组-预付款退费金额（减）', amount: '-' + (toFixed2(energy.prepayRefund) || '0.00') },
{ key: 'op', item: '运维部费用项金额总额', amount: operationTotal || '0.00' },
{ key: 'total', item: '待结算总额', amount: pendingSettle || '0.00', strong: true }
];
}, [businessServiceTotal, billInfo.shouldRefundRent, energy.hydrogenSupplement, energy.hydrogenFee, energy.electricFee, energy.prepayRefund, operationTotal, pendingSettle]);
var refundBreakdown = useMemo(function () {
return [
{ key: 'd', item: '保证金总额', amount: (toFixed2(depositAmount) || '0.00') },
{ key: 's', item: '待结算总额', amount: (pendingSettle || '0.00') },
{ key: 'r', item: '应退还总额', amount: (refundTotal || '0.00'), strong: true }
];
}, [depositAmount, pendingSettle, refundTotal]);
var payBreakdown = useMemo(function () {
return [
{ key: 'd', item: '保证金总额', amount: (toFixed2(depositAmount) || '0.00') },
{ key: 's', item: '待结算总额', amount: (pendingSettle || '0.00') },
{ key: 'p', item: '应补缴总额', amount: (payTotal || '0.00'), strong: true }
];
}, [depositAmount, pendingSettle, payTotal]);
var vehicleColumns = useMemo(function () {
return [
{ title: '车牌号', dataIndex: 'plateNo', key: 'plateNo', width: 110 },
{ title: '合同编码', dataIndex: 'contractCode', key: 'contractCode', width: 160, ellipsis: true },
{ title: '项目名称', dataIndex: 'projectName', key: 'projectName', width: 140, ellipsis: true },
{ title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 140, ellipsis: true },
{ title: '交车时间', dataIndex: 'deliveryTime', key: 'deliveryTime', width: 110 },
{ title: '还车时间', dataIndex: 'returnTime', key: 'returnTime', width: 110 },
{
title: '易损保', dataIndex: 'fragileInsurance', key: 'fragileInsurance', width: 110,
render: function (v) {
return React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 6 } },
(v || '-'),
React.createElement(Tooltip, { title: '提供刹车片、灯泡、蓄电池、雨刮等易损件租期内免费更换服务（不含轮胎，只限自行到服务站更换）' },
React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 16, height: 16, borderRadius: 999, border: '1px solid #d9d9d9', color: '#999', fontSize: 12, lineHeight: '16px', cursor: 'help', userSelect: 'none' } }, 'i')
)
);
}
},
{
title: '轮胎保', dataIndex: 'tireInsurance', key: 'tireInsurance', width: 110,
render: function (v) {
return React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 6 } },
(v || '-'),
React.createElement(Tooltip, { title: '每个租赁年度内提供1次车辆轮胎因自然磨损产生的替换服务' },
React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 16, height: 16, borderRadius: 999, border: '1px solid #d9d9d9', color: '#999', fontSize: 12, lineHeight: '16px', cursor: 'help', userSelect: 'none' } }, 'i')
)
);
}
},
{
title: '养护保', dataIndex: 'maintenanceInsurance', key: 'maintenanceInsurance', width: 110,
render: function (v) {
return React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 6 } },
(v || '-'),
React.createElement(Tooltip, { title: '按厂家保养要求提供定期保养服务' },
React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 16, height: 16, borderRadius: 999, border: '1px solid #d9d9d9', color: '#999', fontSize: 12, lineHeight: '16px', cursor: 'help', userSelect: 'none' } }, 'i')
)
);
}
}
];
}, []);
var businessServiceColumns = useMemo(function () {
return [
{ title: '序号', dataIndex: 'seq', key: 'seq', width: 60 },
{ title: '费用项', dataIndex: 'feeItem', key: 'feeItem', width: 200, ellipsis: true },
{ title: '金额', dataIndex: 'amount', key: 'amount', width: 140, render: function (v) { return React.createElement(Input, { value: v, addonAfter: '元', disabled: true }); } },
{ title: '备注', dataIndex: 'remark', key: 'remark', render: function (v) { return React.createElement(TextArea, { value: v, rows: 1, disabled: true }); } },
{ title: '最后更新时间', dataIndex: 'lastUpdateTime', key: 'lastUpdateTime', width: 150, render: function (v) { return React.createElement('span', { style: { fontSize: 12, color: '#666' } }, v || '-'); } },
{ title: '照片', key: 'photo', width: 100, render: function () { return React.createElement(Button, { size: 'small', disabled: true }, '上传'); } },
{ title: '附件', key: 'attachment', width: 110, render: function () { return React.createElement(Button, { size: 'small', disabled: true }, '上传附件'); } }
];
}, []);
var operationColumns = useMemo(function () {
return [
{ title: '序号', dataIndex: 'seq', key: 'seq', width: 60 },
{
title: '费用项', dataIndex: 'feeItem', key: 'feeItem', width: 200,
render: function (v) {
if (v === '轮胎磨损费用') {
var popContent = React.createElement('div', { style: { width: 760, maxWidth: '80vw' } },
React.createElement('div', { style: { fontWeight: 600, marginBottom: 8 } }, '轮胎磨损费用明细'),
React.createElement(Table, {
rowKey: 'key',
size: 'small',
bordered: true,
pagination: false,
dataSource: tireTreadList,
columns: [
{ title: '轮胎名称', dataIndex: 'name', key: 'name', width: 120, ellipsis: true },
{ title: '交车胎纹深度', dataIndex: 'deliveryDepth', key: 'deliveryDepth', width: 110, render: function (vv) { return (vv || '0.00') + 'mm'; } },
{ title: '还车胎纹深度', dataIndex: 'returnDepth', key: 'returnDepth', width: 110, render: function (vv) { return (vv || '0.00') + 'mm'; } },
{ title: '胎纹差', dataIndex: 'diff', key: 'diff', width: 80, render: function (vv) { return (vv || '0.00') + 'mm'; } },
{ title: '单价', dataIndex: 'unitPrice', key: 'unitPrice', width: 90, render: function (vv) { return (vv || '0.00') + '元/mm'; } },
{ title: '总金额', dataIndex: 'totalAmount', key: 'totalAmount', width: 90, render: function (vv) { return (vv || '0.00') + '元'; } }
]
})
);
return React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 6 } },
(v || '-'),
React.createElement(Popover, { content: popContent, trigger: 'hover', placement: 'topLeft' },
React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 16, height: 16, borderRadius: 999, border: '1px solid #d9d9d9', color: '#999', fontSize: 12, lineHeight: '16px', cursor: 'help', userSelect: 'none' } }, 'i')
)
);
}
return v || '-';
}
},
{ title: '金额', dataIndex: 'amount', key: 'amount', width: 140, render: function (v) { return React.createElement(Input, { value: v, addonAfter: '元', disabled: true }); } },
{
title: React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 6 } },
'无忧包减免',
React.createElement(Tooltip, { title: '无忧包减免不会列入运维成本，而是计入业务成本' },
React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 16, height: 16, borderRadius: 999, border: '1px solid #d9d9d9', color: '#999', fontSize: 12, lineHeight: '16px', cursor: 'help', userSelect: 'none' } }, 'i')
)
),
dataIndex: 'worryFreeDiscount',
key: 'worryFreeDiscount',
width: 140,
render: function (v) { return React.createElement(Input, { value: v, addonAfter: '元', disabled: true }); }
},
{ title: '备注', dataIndex: 'remark', key: 'remark', render: function (v) { return React.createElement(TextArea, { value: v, rows: 1, disabled: true }); } },
{ title: '最后更新时间', dataIndex: 'lastUpdateTime', key: 'lastUpdateTime', width: 150, render: function (v) { return React.createElement('span', { style: { fontSize: 12, color: '#666' } }, v || '-'); } },
{ title: '照片', key: 'photo', width: 100, render: function () { return React.createElement(Button, { size: 'small', disabled: true }, '上传'); } },
{ title: '附件', key: 'attachment', width: 110, render: function () { return React.createElement(Button, { size: 'small', disabled: true }, '上传附件'); } }
];
}, [tireTreadList]);
function goBack() {
message.info('返回还车应结款列表页（原型）');
try { if (window.history && window.history.length > 1) window.history.back(); } catch (e) {}
}
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(Card, { title: '还车车辆明细', style: cardStyle },
React.createElement(Table, { rowKey: 'key', columns: vehicleColumns, dataSource: vehicleDetail, pagination: false, bordered: true, size: 'middle', scroll: { x: 980 } })
),
React.createElement(Card, { title: '还车费用明细', style: cardStyle },
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16, marginBottom: 16 } },
React.createElement('div', { style: { background: '#fff', border: '1px solid #f0f0f0', borderRadius: 8, padding: '18px 16px', boxShadow: '0 1px 2px rgba(0,0,0,0.04)' } },
React.createElement('div', { style: { fontSize: 13, color: '#666', marginBottom: 12 } }, '保证金总额'),
React.createElement('div', { style: { fontSize: 22, fontWeight: 600, color: '#333' } }, (depositAmount || '0.00'), React.createElement('span', { style: { fontSize: 14, fontWeight: 500, marginLeft: 4 } }, '元'))
),
React.createElement('div', { style: { background: '#fff', border: '1px solid #f0f0f0', borderRadius: 8, padding: '18px 16px', boxShadow: '0 1px 2px rgba(0,0,0,0.04)' } },
React.createElement('div', { style: { fontSize: 13, color: '#666', marginBottom: 12 } }, '待结算总额'),
React.createElement(Popover, { trigger: 'click', placement: 'bottomLeft', content: buildBreakdownContent(settleBreakdown) },
React.createElement('div', { style: { fontSize: 22, fontWeight: 600, color: '#fa8c16', cursor: 'pointer' } },
(pendingSettle || '0.00'),
React.createElement('span', { style: { fontSize: 14, fontWeight: 500, marginLeft: 4, color: '#333' } }, '元')
)
)
),
React.createElement('div', { style: { background: '#fff', border: '1px solid #f0f0f0', borderRadius: 8, padding: '18px 16px', boxShadow: '0 1px 2px rgba(0,0,0,0.04)' } },
React.createElement('div', { style: { fontSize: 13, color: '#666', marginBottom: 12 } }, '应退还总额'),
React.createElement(Popover, { trigger: 'click', placement: 'bottomLeft', content: buildBreakdownContent(refundBreakdown) },
React.createElement('div', { style: { fontSize: 22, fontWeight: 600, color: '#52c41a', cursor: 'pointer' } },
(refundTotal || '0.00'),
React.createElement('span', { style: { fontSize: 14, fontWeight: 500, marginLeft: 4, color: '#333' } }, '元')
)
)
),
React.createElement('div', { style: { background: '#fff', border: '1px solid #f0f0f0', borderRadius: 8, padding: '18px 16px', boxShadow: '0 1px 2px rgba(0,0,0,0.04)' } },
React.createElement('div', { style: { fontSize: 13, color: '#666', marginBottom: 12 } }, '应补缴总额'),
React.createElement(Popover, { trigger: 'click', placement: 'bottomLeft', content: buildBreakdownContent(payBreakdown) },
React.createElement('div', { style: { fontSize: 22, fontWeight: 600, color: '#f5222d', cursor: 'pointer' } },
(payTotal || '0.00'),
React.createElement('span', { style: { fontSize: 14, fontWeight: 500, marginLeft: 4, color: '#333' } }, '元')
)
)
)
),
React.createElement('div', { style: { background: '#fff', border: '1px solid #f0f0f0', borderRadius: 8, marginBottom: 12 } },
React.createElement('div', { style: { padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 12 } },
React.createElement('div', { style: { fontWeight: 600, fontSize: 14 } }, '业务服务组'),
React.createElement('div', { style: { flex: 1 } }),
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12, color: '#666', fontSize: 13 } },
React.createElement('span', null, '总金额：', businessServiceTotal, ' 元'),
React.createElement('span', null, '提交人：业务服务组-张三'),
React.createElement('span', null, '状态：已提交')
)
),
React.createElement('div', { style: { padding: '12px 16px', borderTop: '1px solid #f0f0f0' } },
React.createElement(Table, { rowKey: 'key', columns: businessServiceColumns, dataSource: businessServiceRows, pagination: false, bordered: true, size: 'small' }),
React.createElement('div', { style: { marginTop: 12, paddingTop: 12, borderTop: '1px dashed #f0f0f0' } },
React.createElement('div', { style: { fontWeight: 600, marginBottom: 10 } }, '车辆租金'),
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 12 } },
React.createElement('div', null,
React.createElement('div', { style: { fontSize: 12, color: '#666', marginBottom: 6 } }, '本期账单已收租金'),
React.createElement(Input, { value: billInfo.receivedRent, addonAfter: '元', disabled: true })
),
React.createElement('div', null,
React.createElement('div', { style: { fontSize: 12, color: '#666', marginBottom: 6 } }, '车辆实际租金'),
React.createElement(Input, { value: billInfo.actualRent, addonAfter: '元', disabled: true })
),
React.createElement('div', null,
React.createElement('div', { style: { fontSize: 12, color: '#666', marginBottom: 6 } }, '车辆应退租金'),
React.createElement(Input, { value: billInfo.shouldRefundRent, addonAfter: '元', disabled: true })
)
)
)
)
),
React.createElement('div', { style: { background: '#fff', border: '1px solid #f0f0f0', borderRadius: 8, marginBottom: 12 } },
React.createElement('div', { style: { padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 12 } },
React.createElement('div', { style: { fontWeight: 600, fontSize: 14 } }, '能源采购组'),
React.createElement('div', { style: { flex: 1 } }),
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12, color: '#666', fontSize: 13 } },
React.createElement('span', null, '总金额：', energyTotal, ' 元'),
React.createElement('span', null, '提交人：能源采购组-李四'),
React.createElement('span', null, '状态：已提交')
)
),
React.createElement('div', { style: { padding: '12px 16px', borderTop: '1px solid #f0f0f0' } },
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 12, marginBottom: 16 } },
React.createElement('div', null,
React.createElement('div', { style: { marginBottom: 8, fontWeight: 500 } }, '氢量差补缴金额'),
React.createElement(Input, { value: energy.hydrogenSupplement, addonAfter: '元', disabled: true })
),
React.createElement('div', null,
React.createElement('div', { style: { marginBottom: 8, fontWeight: 500 } }, '交车氢量'),
React.createElement(Input, { value: (toFixed2(energy.deliveryHydrogen) || '0.00'), addonAfter: 'MPa', disabled: true })
),
React.createElement('div', null,
React.createElement('div', { style: { marginBottom: 8, fontWeight: 500 } }, '还车氢量'),
React.createElement(Input, { value: (toFixed2(energy.returnHydrogen) || '0.00'), addonAfter: 'MPa', disabled: true })
),
React.createElement('div', null,
React.createElement('div', { style: { marginBottom: 8, fontWeight: 500 } }, '退还车氢气单价'),
React.createElement(Input, { value: (toFixed2(energy.hydrogenUnitPrice) || '0.00'), addonAfter: '元', disabled: true })
)
),
React.createElement('div', null,
React.createElement('div', { style: { marginBottom: 8, fontWeight: 500 } }, '能源费补缴金额'),
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 12, marginBottom: 12 } },
React.createElement('div', null, React.createElement(Input, { value: energy.hydrogenFee, placeholder: '氢费补缴金额', addonAfter: '元', style: { width: '100%' }, disabled: true })),
React.createElement('div', null, React.createElement(Input, { value: energy.electricFee, placeholder: '电费补缴金额', addonAfter: '元', style: { width: '100%' }, disabled: true })),
React.createElement('div', null),
React.createElement('div', null)
)
),
React.createElement('div', { style: { gridColumn: '1 / -1', borderTop: '1px solid #f0f0f0', paddingTop: 12, marginTop: 4 } },
React.createElement('div', { style: { marginBottom: 8, fontWeight: 500 } }, '预付款退费金额'),
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 12 } },
React.createElement('div', null,
React.createElement(Input, { value: energy.prepayRefund, placeholder: '0.00', addonAfter: '元', style: { width: '100%' }, disabled: true })
),
React.createElement('div', null),
React.createElement('div', null),
React.createElement('div', null)
),
React.createElement('div', { style: { marginTop: 8, fontSize: 12, color: '#666' } }, '项目预充值余额：', energy.userBalance, ' 元')
)
)
),
React.createElement('div', { style: { background: '#fff', border: '1px solid #f0f0f0', borderRadius: 8, marginBottom: 12 } },
React.createElement('div', { style: { padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 12 } },
React.createElement('div', { style: { fontWeight: 600, fontSize: 14 } }, '运维部'),
React.createElement('div', { style: { flex: 1 } }),
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12, color: '#666', fontSize: 13 } },
React.createElement('span', null, '总金额：', operationTotal, ' 元'),
React.createElement('span', null, '提交人：运维部-王五'),
React.createElement('span', null, '状态：已提交')
)
),
React.createElement('div', { style: { padding: '12px 16px', borderTop: '1px solid #f0f0f0' } },
React.createElement(Table, { rowKey: 'key', columns: operationColumns, dataSource: operationRows, pagination: false, bordered: true, size: 'small' })
)
),
React.createElement('div', { style: { background: '#fff', border: '1px solid #f0f0f0', borderRadius: 8, marginBottom: 12 } },
React.createElement('div', { style: { padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 12 } },
React.createElement('div', { style: { fontWeight: 600, fontSize: 14 } }, '安全组'),
React.createElement('div', { style: { flex: 1 } }),
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12, color: '#666', fontSize: 13 } },
React.createElement('span', null, '提交人：安全组-赵六'),
React.createElement('span', null, '状态：已提交')
)
),
React.createElement('div', { style: { padding: '12px 16px', borderTop: '1px solid #f0f0f0' } },
React.createElement('div', { style: { marginBottom: 12, fontWeight: 600 } }, '违章清单'),
React.createElement(Table, {
rowKey: 'key',
size: 'small',
bordered: true,
pagination: false,
dataSource: violationList,
columns: [
{ title: '违章编码', dataIndex: 'code', key: 'code', width: 130, ellipsis: true },
{ title: '车牌号', dataIndex: 'plateNo', key: 'plateNo', width: 110 },
{ title: '违法行为', dataIndex: 'violationBehavior', key: 'violationBehavior', width: 110, ellipsis: true },
{ title: '违法时间', dataIndex: 'violationTime', key: 'violationTime', width: 110 },
{ title: '罚款金额', dataIndex: 'penaltyAmount', key: 'penaltyAmount', width: 90, render: function (v) { return (v || '0.00'); } },
{ title: '缴费状态', dataIndex: 'paymentStatus', key: 'paymentStatus', width: 90 },
{ title: '计分值', dataIndex: 'score', key: 'score', width: 70 },
{ title: '是否处理', dataIndex: 'handleStatus', key: 'handleStatus', width: 90 },
{ title: '违章客户', dataIndex: 'violationCustomer', key: 'violationCustomer', width: 160, ellipsis: true },
{ title: '违章照片', dataIndex: 'violationPhoto', key: 'violationPhoto', width: 90, render: function (v) { return v ? v : ''; } },
{ title: '备注', dataIndex: 'remark', key: 'remark', width: 120, ellipsis: true }
]
}),
React.createElement('div', { style: { margin: '16px 0 12px', fontWeight: 600 } }, '事故清单'),
React.createElement(Table, {
rowKey: 'key',
size: 'small',
bordered: true,
pagination: false,
dataSource: accidentList,
locale: { emptyText: '暂无事故记录' },
columns: [
{ title: '事故编码', dataIndex: 'accidentCode', key: 'accidentCode', width: 130, ellipsis: true },
{ title: '车牌号', dataIndex: 'plateNo', key: 'plateNo', width: 110 },
{ title: '事故时间', dataIndex: 'accidentTime', key: 'accidentTime', width: 110 },
{ title: '事故地点', dataIndex: 'accidentPlace', key: 'accidentPlace', width: 140, ellipsis: true },
{ title: '事故类型', dataIndex: 'accidentType', key: 'accidentType', width: 110, ellipsis: true },
{ title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 140, ellipsis: true },
{ title: '我方定损金额', dataIndex: 'ourClaimAmount', key: 'ourClaimAmount', width: 110, render: function (v) { return v || ''; } },
{ title: '对方定损金额', dataIndex: 'theirClaimAmount', key: 'theirClaimAmount', width: 110, render: function (v) { return v || ''; } },
{ title: '责任划分', dataIndex: 'responsibility', key: 'responsibility', width: 90 },
{ title: '事故状态', dataIndex: 'accidentStatus', key: 'accidentStatus', width: 90 },
{ title: '结案时间', dataIndex: 'closeTime', key: 'closeTime', width: 110 },
{ title: '其他费用', dataIndex: 'otherFee', key: 'otherFee', width: 90, render: function (v) { return v || ''; } },
{ title: '备注', dataIndex: 'remark', key: 'remark', width: 120, ellipsis: true }
]
})
)
)
),
React.createElement('div', { style: footerStyle },
React.createElement(Button, { onClick: goBack }, '返回')
)
);
};

1334
web端/财务管理/还车应结款-费用明细.jsx Normal file
View File

File diff suppressed because it is too large Load Diff

2054
web端/财务管理/还车应结款.jsx Normal file
View File

File diff suppressed because it is too large Load Diff