363 lines
19 KiB
JavaScript
363 lines
19 KiB
JavaScript
// 【重要】必须使用 const Component 作为组件变量名
|
||
// 租赁账单（2026年3月10日版本）
|
||
|
||
const Component = function () {
|
||
var useState = React.useState;
|
||
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 Select = antd.Select;
|
||
var Input = antd.Input;
|
||
var Space = antd.Space;
|
||
var Popover = antd.Popover;
|
||
var message = antd.message;
|
||
|
||
var filterContractCode = useState(undefined);
|
||
var filterProjectName = useState(undefined);
|
||
var filterCustomerName = useState(undefined);
|
||
var filterBusinessDept = useState(undefined);
|
||
var filterBusinessPerson = useState(undefined);
|
||
var filterDeliveryTaskCode = useState('');
|
||
var filterExpanded = useState(false);
|
||
var expandedRowKeysState = useState([]);
|
||
var deliveryPopoverOpen = useState(null);
|
||
var expandedRowKeys = expandedRowKeysState[0];
|
||
var setExpandedRowKeys = expandedRowKeysState[1];
|
||
|
||
// 主表数据：按合同聚合，每条主表下有多条账单（子表）
|
||
var mainListData = [
|
||
{
|
||
contractCode: 'HT-ZL-2025-001',
|
||
deliveryTaskCode: 'JT-2025-001-A',
|
||
contractType: '正式合同',
|
||
projectName: '嘉兴氢能示范项目',
|
||
customerName: '嘉兴某某物流有限公司',
|
||
contractEffectiveDate: '2025-01-15',
|
||
businessDept: '业务1部',
|
||
businessPerson: '张经理',
|
||
children: [
|
||
{ period: 1, billStartDate: '2025-01-01', billEndDate: '2025-01-31', deliveryCount: 3, deliveryVehicles: [{ brand: '东风', model: 'DFH1180', plateNo: '浙A12345' }, { brand: '福田', model: 'BJ1180', plateNo: '浙A23456' }, { brand: '重汽', model: 'ZZ1187', plateNo: '浙A34567' }], receivableTotal: 45800.00, actualTotal: 45500.00, discountTotal: 300.00, arrivalAmount: 45500.00, isInvoiced: '已开票', invoiceAmount: 45500.00 },
|
||
{ period: 2, billStartDate: '2025-02-01', billEndDate: '2025-02-28', deliveryCount: 2, deliveryVehicles: [{ brand: '陕汽', model: 'SX1313', plateNo: '浙A45678' }, { brand: '解放', model: 'J6P', plateNo: '浙A56789' }], receivableTotal: 45800.00, actualTotal: 45800.00, discountTotal: 0.00, arrivalAmount: 45800.00, isInvoiced: '已开票', invoiceAmount: 45800.00 },
|
||
{ period: 3, billStartDate: '2025-03-01', billEndDate: '2025-03-31', deliveryCount: 2, deliveryVehicles: [{ brand: '江淮', model: '格尔发K5', plateNo: '浙A67890' }, { brand: '东风', model: 'DFH1250', plateNo: '浙A11111' }], receivableTotal: 45800.00, actualTotal: 45000.00, discountTotal: 800.00, arrivalAmount: 42000.00, isInvoiced: '部分开票', invoiceAmount: 42000.00 }
|
||
]
|
||
},
|
||
{
|
||
contractCode: 'HT-ZL-2025-002',
|
||
deliveryTaskCode: 'JT-2025-002-B',
|
||
contractType: '试用合同',
|
||
projectName: '上海物流租赁项目',
|
||
customerName: '上海某某运输公司',
|
||
contractEffectiveDate: '2025-02-01',
|
||
businessDept: '业务2部',
|
||
businessPerson: '李专员',
|
||
children: [
|
||
{ period: 1, billStartDate: '2025-02-01', billEndDate: '2025-02-28', deliveryCount: 2, deliveryVehicles: [{ brand: '江淮', model: '格尔发K5', plateNo: '沪B11111' }, { brand: '东风', model: 'DFH1250', plateNo: '沪B22222' }], receivableTotal: 33400.00, actualTotal: 33400.00, discountTotal: 0.00, arrivalAmount: 33400.00, isInvoiced: '已开票', invoiceAmount: 33400.00 },
|
||
{ period: 2, billStartDate: '2025-03-01', billEndDate: '2025-03-31', deliveryCount: 1, deliveryVehicles: [{ brand: '解放', model: 'JH6', plateNo: '沪B33333' }], receivableTotal: 33400.00, actualTotal: 33400.00, discountTotal: 0.00, arrivalAmount: 0.00, isInvoiced: '未开票', invoiceAmount: 0.00 }
|
||
]
|
||
},
|
||
{
|
||
contractCode: 'HT-ZL-2025-003',
|
||
deliveryTaskCode: 'JT-2025-003-C',
|
||
contractType: '正式合同',
|
||
projectName: '杭州城配租赁项目',
|
||
customerName: '杭州某某租赁有限公司',
|
||
contractEffectiveDate: '2025-02-10',
|
||
businessDept: '业务3部',
|
||
businessPerson: '王专员',
|
||
children: [
|
||
{ period: 1, billStartDate: '2025-02-10', billEndDate: '2025-03-09', deliveryCount: 1, deliveryVehicles: [{ brand: '福田', model: '欧曼EST', plateNo: '浙C33333' }], receivableTotal: 41200.00, actualTotal: 41200.00, discountTotal: 0.00, arrivalAmount: 41200.00, isInvoiced: '已开票', invoiceAmount: 41200.00 }
|
||
]
|
||
}
|
||
];
|
||
|
||
var mainList = mainListData;
|
||
var filterOptions = useMemo(function () {
|
||
var codes = [], projects = [], customers = [], depts = [], persons = [];
|
||
mainList.forEach(function (r) {
|
||
if (r.contractCode && codes.indexOf(r.contractCode) === -1) codes.push(r.contractCode);
|
||
if (r.projectName && projects.indexOf(r.projectName) === -1) projects.push(r.projectName);
|
||
if (r.customerName && customers.indexOf(r.customerName) === -1) customers.push(r.customerName);
|
||
if (r.businessDept && depts.indexOf(r.businessDept) === -1) depts.push(r.businessDept);
|
||
if (r.businessPerson && persons.indexOf(r.businessPerson) === -1) persons.push(r.businessPerson);
|
||
});
|
||
return {
|
||
contractCode: codes.map(function (v) { return { value: v, label: v }; }),
|
||
projectName: projects.map(function (v) { return { value: v, label: v }; }),
|
||
customerName: customers.map(function (v) { return { value: v, label: v }; }),
|
||
businessDept: depts.map(function (v) { return { value: v, label: v }; }),
|
||
businessPerson: persons.map(function (v) { return { value: v, label: v }; })
|
||
};
|
||
}, [mainList]);
|
||
|
||
var filteredMainList = useMemo(function () {
|
||
var list = mainList;
|
||
var code = filterContractCode[0];
|
||
var project = filterProjectName[0];
|
||
var customer = filterCustomerName[0];
|
||
var dept = filterBusinessDept[0];
|
||
var person = filterBusinessPerson[0];
|
||
var taskCode = (filterDeliveryTaskCode[0] || '').trim().toLowerCase();
|
||
if (code) list = list.filter(function (r) { return r.contractCode === code; });
|
||
if (project) list = list.filter(function (r) { return r.projectName === project; });
|
||
if (customer) list = list.filter(function (r) { return r.customerName === customer; });
|
||
if (dept) list = list.filter(function (r) { return r.businessDept === dept; });
|
||
if (person) list = list.filter(function (r) { return r.businessPerson === person; });
|
||
if (taskCode) list = list.filter(function (r) { return (r.deliveryTaskCode || '').toLowerCase().indexOf(taskCode) !== -1; });
|
||
return list;
|
||
}, [mainList, filterContractCode[0], filterProjectName[0], filterCustomerName[0], filterBusinessDept[0], filterBusinessPerson[0], filterDeliveryTaskCode[0]]);
|
||
|
||
var mainTableDataSource = useMemo(function () {
|
||
return filteredMainList.map(function (r) {
|
||
var o = {};
|
||
for (var k in r) if (k !== 'children') o[k] = r[k];
|
||
o._detailList = r.children || [];
|
||
return o;
|
||
});
|
||
}, [filteredMainList]);
|
||
|
||
function fmtMoney(v) {
|
||
if (v === null || v === undefined) return '0.00元';
|
||
var n = typeof v === 'number' ? v : parseFloat(v);
|
||
return (isNaN(n) ? '0.00' : n.toFixed(2)) + '元';
|
||
}
|
||
|
||
function goView(record, parent) {
|
||
message.info('查看账单详情（原型）');
|
||
}
|
||
function goChargeDetail(record, parent) {
|
||
message.info('收费明细（原型）');
|
||
}
|
||
|
||
// 子表提车数量气泡：列表显示 品牌、型号、车牌号
|
||
function renderDeliveryPopover(record) {
|
||
var vehicles = record.deliveryVehicles || [];
|
||
var parentCode = (record._parentRecord && record._parentRecord.contractCode) || '';
|
||
var popoverKey = parentCode + '-' + (record.period != null ? record.period : '');
|
||
var listStyle = { width: '100%', borderCollapse: 'collapse', fontSize: 13 };
|
||
var thStyle = { padding: '6px 10px', textAlign: 'left', borderBottom: '1px solid #f0f0f0', backgroundColor: '#fafafa', fontWeight: 600 };
|
||
var tdStyle = { padding: '6px 10px', borderBottom: '1px solid #f0f0f0' };
|
||
var content = vehicles.length === 0 ? React.createElement('div', { style: { padding: 8 } }, '—') : React.createElement('div', { style: { padding: 0, minWidth: 200 } },
|
||
React.createElement('table', { style: listStyle },
|
||
React.createElement('thead', null,
|
||
React.createElement('tr', null,
|
||
React.createElement('th', { style: thStyle }, '品牌'),
|
||
React.createElement('th', { style: thStyle }, '型号'),
|
||
React.createElement('th', { style: thStyle }, '车牌号')
|
||
)
|
||
),
|
||
React.createElement('tbody', null,
|
||
vehicles.map(function (v, i) {
|
||
return React.createElement('tr', { key: i },
|
||
React.createElement('td', { style: tdStyle }, v.brand || '—'),
|
||
React.createElement('td', { style: tdStyle }, v.model || '—'),
|
||
React.createElement('td', { style: tdStyle }, v.plateNo || '—')
|
||
);
|
||
})
|
||
)
|
||
)
|
||
);
|
||
var count = record.deliveryCount != null && record.deliveryCount !== '' ? Number(record.deliveryCount) : 0;
|
||
return React.createElement(Popover, {
|
||
content: content,
|
||
title: '车辆详情',
|
||
trigger: 'click',
|
||
open: deliveryPopoverOpen[0] === popoverKey,
|
||
onOpenChange: function (open) { deliveryPopoverOpen[1](open ? popoverKey : null); }
|
||
}, React.createElement(Button, { type: 'link', size: 'small', style: { padding: 0 } }, (isNaN(count) ? 0 : count) + '辆'));
|
||
}
|
||
|
||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||
var cardStyle = { marginBottom: 16 };
|
||
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||
var filterItemStyle = { marginBottom: 12 };
|
||
var filterControlStyle = { width: '100%' };
|
||
var expandColumnWidth = 48;
|
||
|
||
var mainColumns = [
|
||
{ title: '合同编码', dataIndex: 'contractCode', key: 'contractCode', width: 130, ellipsis: true, render: function (v) { return v || '—'; } },
|
||
{ title: '合同类型', dataIndex: 'contractType', key: 'contractType', width: 100, ellipsis: true, render: function (v) { return v || '—'; } },
|
||
{ title: '项目名称', dataIndex: 'projectName', key: 'projectName', width: 140, ellipsis: true, render: function (v) { return v || '—'; } },
|
||
{ title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 140, ellipsis: true, render: function (v) { return v || '—'; } },
|
||
{ title: '合同生效日期', dataIndex: 'contractEffectiveDate', key: 'contractEffectiveDate', width: 118, render: function (v) { return v || '—'; } },
|
||
{ title: '交车任务编码', dataIndex: 'deliveryTaskCode', key: 'deliveryTaskCode', width: 130, ellipsis: true, render: function (v) { return v || '—'; } },
|
||
{ title: '业务部门', dataIndex: 'businessDept', key: 'businessDept', width: 100, render: function (v) { return v || '—'; } },
|
||
{ title: '业务负责人', dataIndex: 'businessPerson', key: 'businessPerson', width: 100, render: function (v) { return v || '—'; } }
|
||
];
|
||
|
||
var subColumns = [
|
||
{ title: '账单编码', dataIndex: 'billNo', key: 'billNo', width: 200, ellipsis: true, render: function (v, record) { var p = record._parentRecord; var code = (p && p.contractCode) || ''; var period = record.period != null ? record.period : ''; var suffix = period !== '' ? ('0000' + period).slice(-4) : ''; return code + suffix || '—'; } },
|
||
{ title: '账单期数', dataIndex: 'period', key: 'period', width: 90, align: 'center', render: function (v) { return v != null ? v : '—'; } },
|
||
{ title: '账单开始日期', dataIndex: 'billStartDate', key: 'billStartDate', width: 120, render: function (v) { return v || '—'; } },
|
||
{ title: '账单结束日期', dataIndex: 'billEndDate', key: 'billEndDate', width: 120, render: function (v) { return v || '—'; } },
|
||
{ title: '提车数量', key: 'deliveryCount', width: 88, align: 'center', render: function (_, record) { return renderDeliveryPopover(record); } },
|
||
{ title: '应收款总额', dataIndex: 'receivableTotal', key: 'receivableTotal', width: 110, align: 'right', render: function (v) { return fmtMoney(v); } },
|
||
{ title: '实收款总额', dataIndex: 'actualTotal', key: 'actualTotal', width: 110, align: 'right', render: function (v) { return fmtMoney(v); } },
|
||
{ title: '减免总金额', dataIndex: 'discountTotal', key: 'discountTotal', width: 100, align: 'right', render: function (v) { return fmtMoney(v); } },
|
||
{ title: '实际到账金额', dataIndex: 'arrivalAmount', key: 'arrivalAmount', width: 118, align: 'right', render: function (v) { return fmtMoney(v); } },
|
||
{ title: '是否已开票', dataIndex: 'isInvoiced', key: 'isInvoiced', width: 96, render: function (v) { return v === '已开票' ? '已开票' : v === '部分开票' ? '部分开票' : (v === '未开票' ? '未开票' : (v || '—')); } },
|
||
{ title: '开票金额', dataIndex: 'invoiceAmount', key: 'invoiceAmount', width: 100, align: 'right', render: function (v) { return fmtMoney(v); } },
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
width: 160,
|
||
fixed: 'right',
|
||
render: function (_, record, rowIndex, extra) {
|
||
var parentRecord = (extra && extra._parentRecord) || record._parentRecord;
|
||
return React.createElement(Space, { size: 'small' },
|
||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { goView(record, parentRecord); } }, '查看'),
|
||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { goChargeDetail(record, parentRecord); } }, '收费明细')
|
||
);
|
||
}
|
||
}
|
||
];
|
||
|
||
// 子表 rowKey 唯一：contractCode + period
|
||
var _expandRowRender = function (record) {
|
||
var rows = (record._detailList || []).map(function (r, idx) {
|
||
var o = {}; for (var k in r) o[k] = r[k]; o._parentRecord = record; o._rowIndex = idx; return o;
|
||
});
|
||
return React.createElement('div', {
|
||
style: { marginBottom: 0, paddingLeft: expandColumnWidth, boxSizing: 'border-box' },
|
||
draggable: false,
|
||
onDragStart: function (e) { e.preventDefault(); }
|
||
},
|
||
React.createElement(Table, {
|
||
rowKey: function (r) { return (record.contractCode || '') + '-' + (r.period != null ? r.period : r._rowIndex); },
|
||
columns: subColumns.map(function (col) {
|
||
if (col.key !== 'action') return col;
|
||
return {
|
||
title: col.title,
|
||
key: col.key,
|
||
width: col.width,
|
||
fixed: col.fixed,
|
||
render: function (val, row) {
|
||
return React.createElement(Space, { size: 'small' },
|
||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { goView(row, record); } }, '查看'),
|
||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { goChargeDetail(row, record); } }, '收费明细')
|
||
);
|
||
}
|
||
};
|
||
}),
|
||
dataSource: rows,
|
||
pagination: false,
|
||
size: 'small',
|
||
bordered: true,
|
||
scroll: { x: 1300 }
|
||
})
|
||
);
|
||
};
|
||
|
||
return React.createElement('div', { style: layoutStyle },
|
||
React.createElement('div', { style: { marginBottom: 16 } },
|
||
React.createElement(Breadcrumb, {
|
||
items: [
|
||
{ title: '业务管理' },
|
||
{ title: '租赁账单' }
|
||
]
|
||
})
|
||
),
|
||
React.createElement(Card, { title: '筛选', style: cardStyle },
|
||
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
|
||
React.createElement('div', { style: filterItemStyle },
|
||
React.createElement('div', { style: filterLabelStyle }, '合同编码'),
|
||
React.createElement(Select, {
|
||
placeholder: '请选择或输入合同编码',
|
||
allowClear: true,
|
||
showSearch: true,
|
||
style: filterControlStyle,
|
||
value: filterContractCode[0],
|
||
onChange: function (v) { filterContractCode[1](v); },
|
||
options: filterOptions.contractCode,
|
||
filterOption: function (input, opt) { return (opt.label || '').toString().toLowerCase().indexOf((input || '').toLowerCase()) !== -1; }
|
||
})
|
||
),
|
||
React.createElement('div', { style: filterItemStyle },
|
||
React.createElement('div', { style: filterLabelStyle }, '项目名称'),
|
||
React.createElement(Select, {
|
||
placeholder: '请选择或输入项目名称',
|
||
allowClear: true,
|
||
showSearch: true,
|
||
style: filterControlStyle,
|
||
value: filterProjectName[0],
|
||
onChange: function (v) { filterProjectName[1](v); },
|
||
options: filterOptions.projectName,
|
||
filterOption: function (input, opt) { return (opt.label || '').toString().toLowerCase().indexOf((input || '').toLowerCase()) !== -1; }
|
||
})
|
||
),
|
||
React.createElement('div', { style: filterItemStyle },
|
||
React.createElement('div', { style: filterLabelStyle }, '客户名称'),
|
||
React.createElement(Select, {
|
||
placeholder: '请选择或输入客户名称',
|
||
allowClear: true,
|
||
showSearch: true,
|
||
style: filterControlStyle,
|
||
value: filterCustomerName[0],
|
||
onChange: function (v) { filterCustomerName[1](v); },
|
||
options: filterOptions.customerName,
|
||
filterOption: function (input, opt) { return (opt.label || '').toString().toLowerCase().indexOf((input || '').toLowerCase()) !== -1; }
|
||
})
|
||
),
|
||
filterExpanded[0] ? React.createElement('div', { style: filterItemStyle },
|
||
React.createElement('div', { style: filterLabelStyle }, '业务部门'),
|
||
React.createElement(Select, {
|
||
placeholder: '请选择业务部门',
|
||
allowClear: true,
|
||
style: filterControlStyle,
|
||
value: filterBusinessDept[0],
|
||
onChange: function (v) { filterBusinessDept[1](v); },
|
||
options: filterOptions.businessDept
|
||
})
|
||
) : null,
|
||
filterExpanded[0] ? React.createElement('div', { style: filterItemStyle },
|
||
React.createElement('div', { style: filterLabelStyle }, '业务负责人'),
|
||
React.createElement(Select, {
|
||
placeholder: '请选择业务负责人',
|
||
allowClear: true,
|
||
style: filterControlStyle,
|
||
value: filterBusinessPerson[0],
|
||
onChange: function (v) { filterBusinessPerson[1](v); },
|
||
options: filterOptions.businessPerson
|
||
})
|
||
) : null,
|
||
filterExpanded[0] ? React.createElement('div', { style: filterItemStyle },
|
||
React.createElement('div', { style: filterLabelStyle }, '交车任务编码'),
|
||
React.createElement(Input, {
|
||
placeholder: '请输入交车任务编码，支持模糊搜索',
|
||
allowClear: true,
|
||
style: filterControlStyle,
|
||
value: filterDeliveryTaskCode[0],
|
||
onChange: function (e) { filterDeliveryTaskCode[1](e.target.value); }
|
||
})
|
||
) : null
|
||
),
|
||
React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 16 } },
|
||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { filterExpanded[1](!filterExpanded[0]); } }, filterExpanded[0] ? '收起' : '展开'),
|
||
React.createElement(Button, { onClick: function () { filterContractCode[1](undefined); filterProjectName[1](undefined); filterCustomerName[1](undefined); filterBusinessDept[1](undefined); filterBusinessPerson[1](undefined); filterDeliveryTaskCode[1](''); } }, '重置'),
|
||
React.createElement(Button, { type: 'primary' }, '查询')
|
||
)
|
||
),
|
||
React.createElement(Card, { title: '租赁账单列表', style: cardStyle },
|
||
React.createElement(Table, {
|
||
rowKey: 'contractCode',
|
||
columns: mainColumns,
|
||
dataSource: mainTableDataSource,
|
||
expandable: {
|
||
expandedRowKeys: expandedRowKeys,
|
||
onExpandedRowsChange: function (keys) { setExpandedRowKeys(keys || []); },
|
||
expandedRowRender: _expandRowRender,
|
||
rowExpandable: function (record) { return (record._detailList && record._detailList.length > 0); },
|
||
columnWidth: expandColumnWidth
|
||
},
|
||
pagination: { pageSize: 10, showSizeChanger: true, showTotal: function (t) { return '共 ' + t + ' 条'; } },
|
||
size: 'middle',
|
||
bordered: true,
|
||
scroll: { x: 958 }
|
||
})
|
||
)
|
||
);
|
||
};
|