ONE-OS/web端/财务管理/提车应收款.jsx

// 【重要】必须使用 const Component 作为组件变量名
// 财务管理 - 提车应收款（2026年3月5日版本）

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 Tag = antd.Tag;
	var Modal = antd.Modal;
	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 expandedRowKeysState = useState([]);
	var expandedRowKeys = expandedRowKeysState[0];
	var setExpandedRowKeys = expandedRowKeysState[1];
	var deleteConfirmVisible = useState(false);
	var deleteConfirmRecord = useState(null);
	var deleteConfirmParentRecord = useState(null);
	var requirementModalVisible = useState(false);
	var filterExpanded = useState(false);

	// 主表数据：按合同编码聚合，每条主表下有多条提车应收款明细（子表）
	var mainListData = [
			{
				contractCode: 'HT-ZL-2025-001',
				contractType: '正式合同',
				projectName: '嘉兴氢能示范项目',
				customerName: '嘉兴某某物流有限公司',
				businessDept: '业务1部',
				businessPerson: '张经理',
				contractEffectiveDate: '2025-01-15',
				totalReceivable: 256800.00,
				totalActual: 255700.00,
				totalDiscount: 1100.00,
				totalFinanceReceived: 209900.00,
				children: [
					{ seq: 1, auditStatus: '审批通过', creator: '张三', chargeTime: '2026-02-20 10:00', deliveryCount: 3, deliveryVehicles: [{ brand: '东风', model: 'DFH1180', plateNo: '浙A12345' }, { brand: '福田', model: 'BJ1180', plateNo: '浙A23456' }, { brand: '重汽', model: 'ZZ1187', plateNo: '浙A34567' }], receivableTotal: 98700.00, actualTotal: 98200.00, discountTotal: 500.00, discountProof: '首月优惠审批单', arrivalAmount: 98200.00, arrivalTime: '2026-02-21 14:30', financeReceived: 98200.00, isInvoiced: '已开票', invoiceMethod: '先开票后付款', invoiceTime: '2026-02-22 11:00', invoicedAmount: 98200.00, invoiceAttachment: '发票-HT-ZL-2025-001-001.pdf' },
					{ seq: 2, auditStatus: '待审批', creator: '李四', chargeTime: '2026-03-01 09:30', deliveryCount: 2, deliveryVehicles: [{ brand: '陕汽', model: 'SX1313', plateNo: '浙A45678' }, { brand: '解放', model: 'J6P', plateNo: '浙A56789' }], receivableTotal: 57300.00, actualTotal: 57300.00, discountTotal: 0.00, discountProof: '-', arrivalAmount: 57300.00, arrivalTime: '2026-03-02 10:00', financeReceived: 57300.00, isInvoiced: '部分开票', invoiceMethod: '先付款后开票', invoiceTime: '-', invoicedAmount: '0.00', invoiceAttachment: '-' },
					{ seq: 3, auditStatus: '审批中', creator: '王五', chargeTime: '2026-03-10 11:00', deliveryCount: 1, deliveryVehicles: [{ brand: '江淮', model: '格尔发K5', plateNo: '浙A67890' }], receivableTotal: 32800.00, actualTotal: 32800.00, discountTotal: 0.00, discountProof: '-', arrivalAmount: 32800.00, arrivalTime: '2026-03-11 09:00', financeReceived: 32800.00, isInvoiced: '未开票', invoiceMethod: '先付款后开票', invoiceTime: '-', invoicedAmount: '0.00', invoiceAttachment: '-' },
					{ seq: 4, auditStatus: '已驳回', creator: '赵六', chargeTime: '2026-03-15 14:20', deliveryCount: 2, deliveryVehicles: [{ brand: '东风', model: 'DFH1250', plateNo: '浙A11111' }, { brand: '福田', model: '欧曼EST', plateNo: '浙A22222' }], receivableTotal: 45800.00, actualTotal: 45800.00, discountTotal: 0.00, discountProof: '-', arrivalAmount: 0.00, arrivalTime: '-', financeReceived: 0.00, isInvoiced: '未开票', invoiceMethod: '先付款后开票', invoiceTime: '-', invoicedAmount: '0.00', invoiceAttachment: '-' },
					{ seq: 5, auditStatus: '审批通过', creator: '张三', chargeTime: '2026-03-20 09:00', deliveryCount: 2, deliveryVehicles: [{ brand: '重汽', model: '豪沃T7H', plateNo: '浙B33333' }, { brand: '陕汽', model: '德龙X3000', plateNo: '浙B44444' }], receivableTotal: 22200.00, actualTotal: 21600.00, discountTotal: 600.00, discountProof: '客户协商减免', arrivalAmount: 21600.00, arrivalTime: '2026-03-21 10:30', financeReceived: 21600.00, isInvoiced: '已开票', invoiceMethod: '先开票后付款', invoiceTime: '2026-03-22 14:00', invoicedAmount: 21600.00, invoiceAttachment: '发票-HT-ZL-2025-001-005.pdf' }
				]
			},
			{
				contractCode: 'HT-ZL-2025-002',
				contractType: '正式合同',
				projectName: '上海物流租赁项目',
				customerName: '上海某某运输公司',
				businessDept: '业务2部',
				businessPerson: '李专员',
				contractEffectiveDate: '2025-02-01',
				totalReceivable: 132600.00,
				totalActual: 132600.00,
				totalDiscount: 0.00,
				totalFinanceReceived: 132600.00,
				children: [
					{ seq: 1, auditStatus: '审批通过', creator: '李专员', chargeTime: '2026-02-28 14:00', deliveryCount: 2, deliveryVehicles: [{ brand: '江淮', model: '格尔发K5', plateNo: '沪B11111' }, { brand: '东风', model: 'DFH1250', plateNo: '沪B22222' }], receivableTotal: 65800.00, actualTotal: 65800.00, discountTotal: 0.00, discountProof: '-', arrivalAmount: 65800.00, arrivalTime: '2026-03-01 09:00', financeReceived: 65800.00, isInvoiced: '已开票', invoiceMethod: '先开票后付款', invoiceTime: '2026-03-02 15:20', invoicedAmount: 65800.00, invoiceAttachment: '发票-HT-ZL-2025-002.pdf' },
					{ seq: 2, auditStatus: '审批通过', creator: '李专员', chargeTime: '2026-03-08 10:30', deliveryCount: 1, deliveryVehicles: [{ brand: '解放', model: 'JH6', plateNo: '沪B33333' }], receivableTotal: 33400.00, actualTotal: 33400.00, discountTotal: 0.00, discountProof: '-', arrivalAmount: 33400.00, arrivalTime: '2026-03-09 11:00', financeReceived: 33400.00, isInvoiced: '部分开票', invoiceMethod: '先付款后开票', invoiceTime: '-', invoicedAmount: '0.00', invoiceAttachment: '-' },
					{ seq: 3, auditStatus: '待审批', creator: '李专员', chargeTime: '2026-03-18 16:00', deliveryCount: 2, deliveryVehicles: [{ brand: '福田', model: 'BJ1180', plateNo: '沪B44444' }, { brand: '重汽', model: 'ZZ1187', plateNo: '沪B55555' }], receivableTotal: 33400.00, actualTotal: 33400.00, discountTotal: 0.00, discountProof: '-', arrivalAmount: 33400.00, arrivalTime: '2026-03-19 09:00', financeReceived: 33400.00, isInvoiced: '未开票', invoiceMethod: '先开票后付款', invoiceTime: '-', invoicedAmount: '0.00', invoiceAttachment: '-' }
				]
			},
			{
				contractCode: 'HT-ZL-2025-003',
				contractType: '正式合同',
				projectName: '杭州城配租赁项目',
				customerName: '杭州某某租赁有限公司',
				businessDept: '业务3部',
				businessPerson: '王专员',
				contractEffectiveDate: '2025-02-10',
				totalReceivable: 82400.00,
				totalActual: 82400.00,
				totalDiscount: 0.00,
				totalFinanceReceived: 41200.00,
				children: [
					{ seq: 1, auditStatus: '已驳回', creator: '王专员', chargeTime: '2026-03-05 11:00', deliveryCount: 1, deliveryVehicles: [{ brand: '福田', model: '欧曼EST', plateNo: '浙C33333' }], receivableTotal: 41200.00, actualTotal: 41200.00, discountTotal: 0.00, discountProof: '-', arrivalAmount: 0.00, arrivalTime: '-', financeReceived: 0.00, isInvoiced: '未开票', invoiceMethod: '先付款后开票', invoiceTime: '-', invoicedAmount: '0.00', invoiceAttachment: '-' },
					{ seq: 2, auditStatus: '审批通过', creator: '王专员', chargeTime: '2026-03-12 09:15', deliveryCount: 1, deliveryVehicles: [{ brand: '东风', model: 'DFH1180', plateNo: '浙C44444' }], receivableTotal: 41200.00, actualTotal: 41200.00, discountTotal: 0.00, discountProof: '-', arrivalAmount: 41200.00, arrivalTime: '2026-03-13 14:00', financeReceived: 41200.00, isInvoiced: '已开票', invoiceMethod: '先开票后付款', invoiceTime: '2026-03-14 10:00', invoicedAmount: 41200.00, invoiceAttachment: '发票-HT-ZL-2025-003.pdf' }
				]
			}
		];
	var mainListState = useState(mainListData);
	var mainList = mainListState[0];
	var setMainList = mainListState[1];

	var filterOptions = useMemo(function () {
		var list = mainList;
		var codes = [], projects = [], customers = [], depts = [], persons = [];
		list.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];
		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; });
		return list;
	}, [mainList, filterContractCode[0], filterProjectName[0], filterCustomerName[0], filterBusinessDept[0], filterBusinessPerson[0]]);

	// 主表 dataSource 去掉 children，避免 Table 把子节点当树形数据渲染出多余空白行；子表数据通过 _detailList 在展开行内使用
	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 goCollect(record) {
		if (window.__receivableToCollect) window.__receivableToCollect(record);
		else message.info('跳转至提车应收款-收款（原型）');
	}
	function goView(record) {
		message.info('查看提车收款单详情（原型）');
	}
	function goEdit(record) {
		if (window.__receivableToEdit) window.__receivableToEdit(record);
		else message.info('跳转至提车应收款-编辑（原型）');
	}
	function goInvoice(record) {
		if (window.__receivableToInvoice) window.__receivableToInvoice(record);
		else message.info('跳转至开票（原型）');
	}

	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 mainColumns = [
		{ title: '合同编码', dataIndex: 'contractCode', key: 'contractCode', width: 120, ellipsis: true, render: function (v) { return v || '—'; } },
		{ title: '合同类型', dataIndex: 'contractType', key: 'contractType', width: 88, ellipsis: true, render: function (v) { return v || '—'; } },
		{ title: '项目名称', dataIndex: 'projectName', key: 'projectName', width: 120, ellipsis: true, render: function (v) { return v || '—'; } },
		{ title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 120, ellipsis: true, render: function (v) { return v || '—'; } },
		{ title: '合同生效日期', dataIndex: 'contractEffectiveDate', key: 'contractEffectiveDate', width: 110, 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 || '—'; } },
		{
			title: '操作',
			key: 'action',
			width: 100,
			fixed: 'right',
			render: function (_, record) {
				return React.createElement(Button, { type: 'link', size: 'small', onClick: function () { goCollect(record); } }, '提车收款单');
			}
		}
	];

	// 子表：提车数量气泡用 state 控制当前展开的行
	var deliveryPopoverOpen = useState(null);

	function renderDeliveryPopover(record) {
		var vehicles = record.deliveryVehicles || [];
		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 popoverKey = (record._parentCode || '') + '-' + record.seq + '-' + (record.chargeTime || '');
		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 } }, String(record.deliveryCount)));
	}

	// 子表左缩进与主表展开列宽一致，使序号左侧边框与合同编码左侧边框对齐
	var expandColumnWidth = 48;
	var subColumns = [
		{ title: '序号', dataIndex: 'seq', key: 'seq', width: 52, align: 'center' },
		{
			title: '审批状态',
			dataIndex: 'auditStatus',
			key: 'auditStatus',
			width: 90,
			render: function (v, record) {
				var status = (record && record.auditStatus != null) ? String(record.auditStatus).trim() : (v != null ? String(v).trim() : '');
				var isRejected = status === '已驳回' || status === '审批驳回';
				var color = status === '审批通过' ? 'success' : status === '待审批' ? 'processing' : status === '审批中' ? 'warning' : isRejected ? 'error' : 'default';
				var text = isRejected ? '审批驳回' : (status || '—');
				return React.createElement(Tag, { color: color }, text);
			}
		},
		{ title: '创建时间', dataIndex: 'chargeTime', key: 'chargeTime', width: 128, render: function (v) { return v || '—'; } },
		{ title: '创建人', dataIndex: 'creator', key: 'creator', width: 88, render: function (v) { return v || '—'; } },
		{ title: '提车数量', key: 'deliveryCount', width: 76, render: function (_, record) { return renderDeliveryPopover(record); } },
		{ title: '应收款总额', dataIndex: 'receivableTotal', key: 'receivableTotal', width: 98, align: 'right', render: function (v) { return fmtMoney(v); } },
		{ title: '实收款总额', dataIndex: 'actualTotal', key: 'actualTotal', width: 98, align: 'right', render: function (v) { return fmtMoney(v); } },
		{ title: '减免总金额', dataIndex: 'discountTotal', key: 'discountTotal', width: 88, align: 'right', render: function (v) { return fmtMoney(v); } },
		{ title: '实际到账金额', dataIndex: 'arrivalAmount', key: 'arrivalAmount', width: 100, align: 'right', render: function (v, record) { if (record && record.auditStatus === '待审批') return '—'; return fmtMoney(v); } },
		{ title: '是否已开票', dataIndex: 'isInvoiced', key: 'isInvoiced', width: 88, render: function (v, record) { if (record && record.auditStatus === '待审批') return '—'; if (v === true || v === '已开票') return '已开票'; if (v === '部分开票') return '部分开票'; return '未开票'; } },
		{ title: '已开票金额', dataIndex: 'invoicedAmount', key: 'invoicedAmount', width: 100, align: 'right', render: function (v, record) { if (record && record.auditStatus === '待审批') return '—'; var n = typeof v === 'number' ? v : parseFloat(v); return fmtMoney(isNaN(n) ? 0 : n); } },
		{
			title: '操作',
			key: 'action',
			width: 180,
			fixed: 'right',
			render: function (_, record) {
				var auditStatus = record && record.auditStatus;
				var isPending = auditStatus === '待审批';
				var isRejected = auditStatus === '已驳回' || auditStatus === '审批驳回';
				var isApproved = auditStatus === '审批通过';
				var canEdit = isPending || isRejected;
				var parentRecord = record && record._parentRecord;
				function handleDelete() {
					deleteConfirmRecord[1](record);
					deleteConfirmParentRecord[1](parentRecord);
					deleteConfirmVisible[1](true);
				}
				return React.createElement(Space, { size: 'small' },
					React.createElement(Button, { type: 'link', size: 'small', onClick: function () { goView(record); } }, '查看'),
					canEdit ? React.createElement(Button, { type: 'link', size: 'small', onClick: function () { goEdit(record); } }, '编辑') : null,
					(isPending || isRejected) ? React.createElement(Button, { type: 'link', size: 'small', danger: true, onClick: handleDelete }, '删除') : null,
					isApproved ? React.createElement(Button, { type: 'link', size: 'small', onClick: function () { goInvoice(record); } }, '开票') : null
				);
			}
		}
	];
	function confirmDeleteSub() {
		var parent = deleteConfirmParentRecord[0];
		var row = deleteConfirmRecord[0];
		var list = (parent && (parent._detailList || parent.children)) || [];
		if (parent && row && list.length >= 0) {
			var newChildren = list.filter(function (r) { return !(r.seq === row.seq && r.chargeTime === row.chargeTime); });
			// 删除后序号重新生成 1、2、3...
			newChildren = newChildren.map(function (r, index) { var o = {}; for (var k in r) o[k] = r[k]; o.seq = index + 1; return o; });
			setMainList(function (prev) {
				return prev.map(function (p) {
					if (p.contractCode !== parent.contractCode) return p;
					var next = {}; for (var k in p) next[k] = p[k]; next.children = newChildren; return next;
				});
			});
		}
		deleteConfirmVisible[1](false);
		deleteConfirmRecord[1](null);
		deleteConfirmParentRecord[1](null);
		message.success('已删除');
	}
	function expandRowRender(record) {
		var rows = (record._detailList || []).map(function (r) { var o = {}; for (var k in r) o[k] = r[k]; o._parentCode = record.contractCode; o._parentRecord = record; return o; });
		var sumReceivable = rows.reduce(function (acc, r) { return acc + (Number(r.receivableTotal) || 0); }, 0);
		var sumActual = rows.reduce(function (acc, r) { return acc + (Number(r.actualTotal) || 0); }, 0);
		var sumDiscount = rows.reduce(function (acc, r) { return acc + (Number(r.discountTotal) || 0); }, 0);
		var sumArrival = rows.reduce(function (acc, r) { return acc + (Number(r.arrivalAmount) || 0); }, 0);
		var sumInvoiced = rows.reduce(function (acc, r) { return acc + (Number(r.invoicedAmount) || 0); }, 0);
		var summaryStyle = { backgroundColor: '#fafafa', fontWeight: 600 };
		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.seq || r.chargeTime || Math.random()); },
				columns: subColumns,
				dataSource: rows,
				pagination: false,
				size: 'small',
				bordered: true,
				summary: rows.length > 0 ? function () {
					return React.createElement(Table.Summary, null,
						React.createElement(Table.Summary.Row, { style: summaryStyle },
							React.createElement(Table.Summary.Cell, { index: 0, align: 'center' }, '总计'),
							React.createElement(Table.Summary.Cell, { index: 1 }, ''),
							React.createElement(Table.Summary.Cell, { index: 2 }, ''),
							React.createElement(Table.Summary.Cell, { index: 3 }, ''),
							React.createElement(Table.Summary.Cell, { index: 4 }, ''),
							React.createElement(Table.Summary.Cell, { index: 5, align: 'right' }, fmtMoney(sumReceivable)),
							React.createElement(Table.Summary.Cell, { index: 6, align: 'right' }, fmtMoney(sumActual)),
							React.createElement(Table.Summary.Cell, { index: 7, align: 'right' }, fmtMoney(sumDiscount)),
							React.createElement(Table.Summary.Cell, { index: 8, align: 'right' }, fmtMoney(sumArrival)),
							React.createElement(Table.Summary.Cell, { index: 9 }, ''),
							React.createElement(Table.Summary.Cell, { index: 10, align: 'right' }, fmtMoney(sumInvoiced)),
							React.createElement(Table.Summary.Cell, { index: 11 }, '')
						)
					);
				} : null
			})
		);
	}

	var requirementContent = '提车应收款（2026年3月5日版本）\n一个「数字化资产ONEOS运管平台」中的「财务管理」「提车应收款」模块\n#面包屑：财务管理-提车应收款；\n\n页面分为2个卡片；\n1.筛选：\n#支持合同编码/项目名称/客户名称/业务部门/业务负责人等筛选方式；\n1.1.合同编码：选择器，支持输入框内手动输入下拉模糊匹配对应项；\n1.2.项目名称：选择器，支持输入框内手动输入下拉模糊匹配对应项；\n1.3.客户名称：选择器，支持输入框内手动输入下拉模糊匹配对应项；\n1.4.业务部门：选择器，支持选择所有业务部门；\n1.5.业务负责人：选择器，支持选择所有业务负责人；\n\n2.列表：\n#列表展示方式为：嵌套子表格，分为主表和子表，可点击主表展开子表，一个合同编码可以展开多个提车应收款明细；\n2.1.主表显示字段为：合同编码、合同类型、项目名称、客户名称、合同生效日期、业务部门、业务负责人、操作；\n2.1.1.合同编码：显示该提车应收款租赁合同对应合同编码；\n2.1.2.合同类型：显示该租赁合同对应合同类型，显示该合同为试用合同还是正式合同；\n2.1.3.项目名称：显示该租赁合同对应项目名称；\n2.1.4.客户名称：显示该租赁合同对应客户名称；\n2.1.5.合同生效日期：显示该租赁合同生效日期，格式为：YYYY-MM-DD；\n2.1.6.业务部门：显示该租赁合同对应业务部门名称；\n2.1.7.业务负责人：显示该租赁合同对应业务负责人；\n2.1.8.操作：提车收款单；\n      2.1.8.1.提车收款单：点击提车收款单，跳转提车收款单页进行子表创建；\n主表右下角为分页符，支持选择单页显示多少条数据；\n\n2.2.子表显示字段为：序号、审批状态、创建时间、提车数量、应收款总额、实收款总额、减免总金额、实际到账金额、是否已开票、已开票金额、操作；\n2.2.1.序号：按照提车首付款收费单据提交时间从最早开始显示第1条，按照顺序1.2.3....；\n2.2.2.审批状态：审批通过、待审批、审批中、审批驳回；\n      2.2.2.1.审批通过：该审批通过最终节点审批，显示为审批通过；\n      2.2.2.2.待审批：审批提车收款单仅保存，但未提交审批；\n      2.2.2.3.审批中：已发起审批流程，但未完成最终节点审批；\n      2.2.2.4.审批驳回：发起审批流程，但任意节点被驳回。被驳回的提车收款单支持重新修改后提交审批；\n2.2.3.创建时间：显示提车收款单创建时间，格式为：YYYY-MM-DD HH:MM；\n2.2.4.创建人：显示已提车收款单创建人姓名；\n2.2.5.提车数量：显示该提车收费单对应提车数量，点击提车数量弹出气泡卡片，卡片中列表显示品牌、型号、车牌号；\n2.2.6.应收款金额：按照该提车收费单据应收款金额，格式为：xx.xx元；\n2.2.7.实收款金额：按照该提车收费单据实收款金额，格式为：xx.xx元；\n2.2.8.减免金额：按照该提车收费单减免总金额，显示当前子表对应减免总额，格式为：xx.xx元；\n2.2.9.实际到账金额：显示该提车收费单财务填写的实际到账金额，格式为：xx.xx元；\n2.2.10.是否已开票：显示财务是否完成开票，已开票显示为：已开票，未开票显示为：未开票，部分开票显示为：部分开票；\n2.2.11.已开票金额：显示财务已开票金额，格式为：xx.xx元；\n2.2.12.总计：显示应收款总额、实收款总额、减免总金额、实际到账金额、已开票金额等所有子表求和数据；\n2.2.13.操作：查看、编辑、删除、开票；\n       2.2.12.1.查看：点击查看后，跳转提车应收款-查看页面，审批通过、待审批、审批中、审批驳回均可点击查看来查看提车收款单详情；\n       2.2.12.2.编辑：点击编辑后，跳转提车应收款-编辑页面，待审批、审批驳回均可进行编辑操作；\n       2.2.12.2.删除：待审批、审批驳回状态子表支持删除功能，点击弹出二次确认，点击确认后删除该记录；\n       2.2.12.3.开票：点击开票后，进入提车应收款-开票页面，审批通过状态子表才显示，开票由财务人员操作，需要做权限控制，其他用户没有开票入口；';

	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: '提车应收款' }
				]
			}),
			React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { requirementModalVisible[1](true); } }, '查看需求说明')
		),
		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
			),
			React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 16 } },
				React.createElement(Button, { onClick: function () { filterContractCode[1](undefined); filterProjectName[1](undefined); filterCustomerName[1](undefined); filterBusinessDept[1](undefined); filterBusinessPerson[1](undefined); } }, '重置'),
				React.createElement(Button, { type: 'primary' }, '查询'),
				React.createElement(Button, { type: 'link', size: 'small', onClick: function () { filterExpanded[1](!filterExpanded[0]); } }, filterExpanded[0] ? '收起' : '展开')
			)
		),
		React.createElement(Card, { title: '列表', style: cardStyle },
			React.createElement(Table, {
				rowKey: 'contractCode',
				columns: mainColumns,
				dataSource: mainTableDataSource,
				expandable: {
					expandedRowKeys: expandedRowKeys,
					onExpandedRowsChange: function (keys) {
						setExpandedRowKeys(keys.length ? [keys[keys.length - 1]] : []);
					},
					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: 758 }
			})
		),
		React.createElement(Modal, {
			title: '确认删除',
			open: deleteConfirmVisible[0],
			onCancel: function () { deleteConfirmVisible[1](false); deleteConfirmRecord[1](null); deleteConfirmParentRecord[1](null); },
			onOk: confirmDeleteSub,
			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))
		)
	);
};