2330 lines
78 KiB
JavaScript
2330 lines
78 KiB
JavaScript
// 氢费（采购端）汇总报表 PRD（与 氢费采购端汇总报表-需求文档.md 同步）
|
||
var H2_PURCHASE_SUMMARY_REQUIREMENT_DOC = `# 氢费（采购端）汇总报表 — 产品需求说明（PRD）
|
||
|
||
| 项目 | 内容 |
|
||
|------|------|
|
||
| 文档版本 | v1.0（业务版） |
|
||
| 产品模块 | 台账数据 → 氢费（采购端）汇总报表 |
|
||
| 文档类型 | 产品需求说明 |
|
||
| 适用读者 | 产品、采购、财务、运营、测试、项目 |
|
||
|
||
---
|
||
|
||
## 一、为什么做这件事
|
||
|
||
### 1.1 业务痛点
|
||
|
||
- 采购侧需按加氢站维度掌握氢费规模、应付与实付、开票与预付余额，现有数据分散在车辆氢费明细、打款、开票等模块，缺少一站汇总视图。
|
||
- 财务对账需快速识别「未付金额」「站点欠费」等风险，并下钻到账单、流水、发票凭据。
|
||
|
||
### 1.2 产品价值
|
||
|
||
| 价值点 | 说明 |
|
||
|--------|------|
|
||
| 站点汇总 | 一行一站，看清加氢量、应付、已付、未付、开票、未开票、当前余额 |
|
||
| 对账效率 | 顶部合计条随筛选即时汇总，支撑采购与财务日常核对 |
|
||
| 可追溯 | 关键金额可钻取明细，付款凭据、发票支持在线预览与下载 |
|
||
| 风险可见 | 未付/未开票金额为正、当前余额为负时突出展示 |
|
||
|
||
### 1.3 本期目标
|
||
|
||
建设 Web 端「氢费（采购端）汇总报表」，按地区、加氢站、结算方式查询，展示站点汇总列表及合计；支持多类钻取与 CSV 导出。
|
||
|
||
### 1.4 本期不做
|
||
|
||
- 报表内直接发起打款、开票（跳转或对接后续迭代）。
|
||
- 跨年度历史数据全量迁移方案（本期以 2026 年起统计口径描述为准，上线以数据准备结果为准）。
|
||
|
||
---
|
||
|
||
## 二、谁在用、用来干什么
|
||
|
||
### 2.1 用户角色
|
||
|
||
| 角色 | 典型诉求 |
|
||
|------|----------|
|
||
| **采购人员** | 按站点查看氢费与支付进度，核对当前余额、欠费站点 |
|
||
| **财务人员** | 核对应付/实付/未付/已开票，查看付款证明与发票附件 |
|
||
| **运营/主管** | 按地区、结算方式浏览整体规模与异常站点 |
|
||
|
||
### 2.2 核心使用场景
|
||
|
||
1. **日常巡检**：按地区或结算方式筛选，查看顶部合计与列表，关注未付、已欠费站点。
|
||
2. **站点下钻**：点击加氢总量、应付总金额等，打开明细弹窗核对构成。
|
||
3. **付款与发票核查**：从已付总金额、已开票金额钻取，预览付款凭据或发票。
|
||
4. **导出报送**：按当前筛选结果导出 CSV。
|
||
|
||
---
|
||
|
||
## 三、页面功能说明
|
||
|
||
### 3.1 页面组成
|
||
|
||
路径：**台账数据 → 氢费（采购端）汇总报表**
|
||
|
||
自上而下：
|
||
|
||
1. **查询条件区** — 地区、加氢站全称、结算方式
|
||
2. **汇总列表区** — 标题、导出、筛选摘要、顶部合计条、站点表格
|
||
3. **弹窗** — 需求说明、各类钻取明细、附件预览
|
||
|
||
面包屑行右上角提供 **「查看需求说明」**（本文档）；汇总列表标题右侧提供 **「导出」**。
|
||
|
||
### 3.2 查询条件
|
||
|
||
| 查询项 | 业务说明 |
|
||
|--------|----------|
|
||
| 地区 | 加氢站所属省/市，支持搜索；空为全部 |
|
||
| 加氢站全称 | 从加氢站主数据选择；空为全部 |
|
||
| 结算方式 | 预付 / 月结；空为全部 |
|
||
|
||
**交互：** 修改条件后点击 **「查询」** 生效；**「重置」** 清空条件。查询成功给予简短提示。列表上方展示当前筛选摘要（地区、加氢站、结算方式）。
|
||
|
||
### 3.3 顶部合计条
|
||
|
||
表格上方独立展示（随当前列表筛选结果汇总）：
|
||
|
||
| 合计项 | 计算口径 |
|
||
|--------|----------|
|
||
| 加氢总量(kg) | 列表各行加氢总量之和 |
|
||
| 应付总金额(元) | 列表各行应付总金额之和 |
|
||
| 已付总金额(元) | 列表各行已付总金额之和 |
|
||
| 未付总金额(元) | **应付总金额合计 − 已付总金额合计**；大于 0 时红色显示 |
|
||
| 未开票总金额(元) | **应付总金额合计 − 已开票总金额合计**；大于 0 时红色显示 |
|
||
| 充值总额(元) | 列表各行充值总额之和 |
|
||
| 当前总余额(元) | 列表各行当前余额之和；合计为负时红色显示 |
|
||
|
||
### 3.4 汇总列表字段
|
||
|
||
**列顺序（左→右）：**
|
||
序号 → 地区 → 加氢站全称 → 结算方式 → 加氢总量(kg) → 应付总金额(元) → 已付总金额(元) → 未付总金额(元) → 已开票金额(元) → 未开票金额(元) → 充值总额(元) → 当前余额(元)
|
||
|
||
**表头列宽：** 支持鼠标拖动表头右侧调整列宽（最小宽度限制），便于长站名与金额列阅读。
|
||
|
||
| 字段 | 业务口径 | 交互 |
|
||
|------|----------|------|
|
||
| 结算方式 | 预付 / 月结 | 只读 |
|
||
| 加氢总量(kg) | 自 **2026 年起** 该站全部氢费加氢量之和 | 点击钻取 **加氢量明细**（仅加氢量，不含金额） |
|
||
| 应付总金额(元) | 该站「车辆氢费明细」**加氢总价(元)** 求和 | 点击钻取明细（加氢量、成本单价、成本总价） |
|
||
| 已付总金额(元) | 加氢站打款管理中 **已支付金额** 求和 | 点击钻取支付账单明细 |
|
||
| 未付总金额(元) | **应付总金额 − 已付总金额**（行内计算） | 只读；大于 0 红色 |
|
||
| 已开票金额(元) | 该站已开票金额合计 | 点击钻取开票记录 |
|
||
| 未开票金额(元) | **应付总金额 − 已开票金额**（行内计算） | 只读；大于 0 红色 |
|
||
| 充值总额(元) | 该站预充值（打款入账）金额合计 | 点击钻取充值明细 |
|
||
| 当前余额(元) | 2026 年期初余额，扣减 2025 年及以前未扣款记录后的实时余额 | 点击钻取余额变更明细；**为负** 时金额红色 + 左侧 **「已欠费」** 标签 |
|
||
|
||
### 3.5 钻取明细说明
|
||
|
||
#### （1）加氢量明细（由加氢总量进入）
|
||
|
||
| 列 | 说明 |
|
||
|----|------|
|
||
| 序号、加氢时间、订单编号、车牌号、加氢量(kg) | 来源于车辆氢费明细，按当前加氢站筛选 |
|
||
| 合计 | 加氢量合计 |
|
||
|
||
#### （2）应付总金额明细
|
||
|
||
| 列 | 说明 |
|
||
|----|------|
|
||
| 序号、加氢时间、订单编号、车牌号、加氢量(kg)、成本单价(元/kg)、成本总价(元) | 按站筛选的车辆氢费明细 |
|
||
| 合计 | 加氢量、成本总价；弹窗标题含站名 |
|
||
|
||
#### （3）已付总金额明细（由已付总金额进入）
|
||
|
||
| 列 | 说明 |
|
||
|----|------|
|
||
| 加氢站全称、账单开始时间、账单结束时间、应付总金额(元)、已付总金额(元)、银行付款证明 | 按账单维度展示 |
|
||
| 银行付款证明 | **查看付款凭据** — 预览付款证明图片 |
|
||
| 合计 | 应付、实付合计 |
|
||
|
||
#### （4）已开票明细（由已开票金额进入）
|
||
|
||
| 列 | 说明 |
|
||
|----|------|
|
||
| 加氢站全称、开票时间、开票金额(元)、发票 | |
|
||
| 发票 | **查看发票** — 在线预览 PDF/图片；**下载发票** — 下载 PDF/图片文件 |
|
||
| 合计 | 开票金额合计 |
|
||
|
||
#### （5）充值总额明细（由充值总额进入）
|
||
|
||
| 列 | 说明 |
|
||
|----|------|
|
||
| 加氢站全称、支付时间、预充金额(元)、付款凭证 | 支付时间为 **YYYY-MM-DD** |
|
||
| 付款凭证 | **预览** — 在线查看；**下载** — 下载凭证文件 |
|
||
| 合计 | 预充金额（充值总额）合计 |
|
||
|
||
#### （6）余额变更明细（由当前余额进入）
|
||
|
||
| 列 | 说明 |
|
||
|----|------|
|
||
| 加氢站全称、收入金额(元)、支出金额(元)、余额(元)、订单编号 | 收入/支出为空显示「—」；余额为负红色 |
|
||
| 合计 | 收入合计、支出合计、末行余额（与列表该行当前余额一致） |
|
||
|
||
### 3.6 附件预览
|
||
|
||
- 付款凭据、发票在弹窗中预览；PDF 使用文档预览，图片直接展示。
|
||
- 发票支持下载，文件名与开票记录一致。
|
||
|
||
### 3.7 导出
|
||
|
||
- 点击 **「导出」** 下载当前筛选结果 CSV（含列表字段及合计行）。
|
||
- 编码 UTF-8（带 BOM），便于 Excel 打开。
|
||
|
||
---
|
||
|
||
## 四、业务规则摘要
|
||
|
||
| 规则 | 说明 |
|
||
|------|------|
|
||
| 统计起点 | 加氢总量等业务口径默认 **2026 年起**（与车辆氢费明细、主数据生效规则一致） |
|
||
| 未付（行） | 应付总金额 − 已付总金额 |
|
||
| 未付（合计条） | 各站未付之和，等价于应付合计 − 已付合计 |
|
||
| 未开票（行） | 应付总金额 − 已开票金额 |
|
||
| 未开票（合计条） | 各站未开票之和，等价于应付合计 − 已开票合计 |
|
||
| 已欠费 | 仅 **当前余额 < 0** 时展示标签 |
|
||
| 钻取范围 | 均限定为 **当前汇总行对应加氢站** |
|
||
|
||
---
|
||
|
||
## 五、验收要点（业务）
|
||
|
||
1. 查询、重置、筛选摘要、合计条与列表数据一致。
|
||
2. 各可点击金额/加氢量钻取弹窗字段与上文一致，合计正确。
|
||
3. 未付、已欠费展示规则符合第四节。
|
||
4. 付款凭据可预览；发票可预览与下载。
|
||
5. 列宽可拖动；导出字段完整。
|
||
6. 「查看需求说明」可打开本 PRD 全文。
|
||
|
||
---
|
||
|
||
**文档结束**
|
||
`;
|
||
|
||
/** PRD Markdown 渲染（氢费采购端汇总报表） */
|
||
function parsePurchasePrdInlineText(text) {
|
||
var parts = String(text || '').split(/(\*\*[^*]+\*\*)/g);
|
||
var nodes = [];
|
||
var i;
|
||
for (i = 0; i < parts.length; i++) {
|
||
var p = parts[i];
|
||
if (!p) continue;
|
||
if (p.indexOf('**') === 0 && p.lastIndexOf('**') === p.length - 2) {
|
||
nodes.push(React.createElement('strong', { key: i }, p.slice(2, -2)));
|
||
} else {
|
||
nodes.push(p);
|
||
}
|
||
}
|
||
return nodes.length === 1 ? nodes[0] : nodes;
|
||
}
|
||
function isPurchasePrdTableRow(line) {
|
||
return /^\|.+\|$/.test(String(line || '').trim());
|
||
}
|
||
function isPurchasePrdTableSep(line) {
|
||
return /^\|[\s\-:|]+\|$/.test(String(line || '').trim());
|
||
}
|
||
function renderPurchasePrdTableRow(line, rowKey, isHeader) {
|
||
var cells = String(line).trim().replace(/^\|/, '').replace(/\|$/, '').split('|').map(function (c) { return c.trim(); });
|
||
return React.createElement('tr', { key: rowKey }, cells.map(function (cell, ci) {
|
||
var Tag = isHeader ? 'th' : 'td';
|
||
return React.createElement(Tag, {
|
||
key: ci,
|
||
style: { border: '1px solid #e5e7eb', padding: '8px 10px', textAlign: 'left', verticalAlign: 'top', fontWeight: isHeader ? 600 : 400, background: isHeader ? '#f8fafc' : '#fff', fontSize: 13, lineHeight: 1.5 }
|
||
}, parsePurchasePrdInlineText(cell));
|
||
}));
|
||
}
|
||
function renderPurchasePrdMarkdown(markdown) {
|
||
var lines = String(markdown || '').split(/\r?\n/);
|
||
var nodes = [];
|
||
var i = 0;
|
||
var inCode = false;
|
||
var codeBuf = [];
|
||
while (i < lines.length) {
|
||
var line = lines[i];
|
||
var trimmed = String(line || '').trim();
|
||
if (trimmed.indexOf('```') === 0) {
|
||
if (inCode) {
|
||
nodes.push(React.createElement('pre', { key: 'code-' + i, style: { margin: '12px 0', padding: '12px 14px', background: '#f6f8fa', border: '1px solid #e5e7eb', borderRadius: 8, fontSize: 12, lineHeight: 1.6, overflow: 'auto', color: '#334155', whiteSpace: 'pre-wrap' } }, codeBuf.join('\n')));
|
||
codeBuf = [];
|
||
inCode = false;
|
||
} else inCode = true;
|
||
i += 1;
|
||
continue;
|
||
}
|
||
if (inCode) { codeBuf.push(line); i += 1; continue; }
|
||
if (trimmed === '---') {
|
||
nodes.push(React.createElement('hr', { key: 'hr-' + i, style: { border: 'none', borderTop: '1px solid #e8ecf0', margin: '20px 0' } }));
|
||
i += 1;
|
||
continue;
|
||
}
|
||
if (isPurchasePrdTableRow(trimmed)) {
|
||
var tableLines = [];
|
||
while (i < lines.length && isPurchasePrdTableRow(String(lines[i]).trim())) {
|
||
tableLines.push(String(lines[i]).trim());
|
||
i += 1;
|
||
}
|
||
var bodyRows = [];
|
||
var ti;
|
||
for (ti = 0; ti < tableLines.length; ti++) {
|
||
if (isPurchasePrdTableSep(tableLines[ti])) continue;
|
||
bodyRows.push(renderPurchasePrdTableRow(tableLines[ti], 'tr-' + i + '-' + ti, ti === 0));
|
||
}
|
||
if (bodyRows.length) {
|
||
nodes.push(React.createElement('div', { key: 'tbl-' + i, style: { overflowX: 'auto', margin: '12px 0 16px' } },
|
||
React.createElement('table', { style: { width: '100%', borderCollapse: 'collapse', fontSize: 13 } },
|
||
React.createElement('tbody', null, bodyRows))));
|
||
}
|
||
continue;
|
||
}
|
||
if (!trimmed) { i += 1; continue; }
|
||
if (trimmed.indexOf('# ') === 0) {
|
||
nodes.push(React.createElement('h1', { key: 'h1-' + i, style: { fontSize: 20, fontWeight: 700, color: '#0f172a', margin: '0 0 16px', lineHeight: 1.35 } }, parsePurchasePrdInlineText(trimmed.slice(2).trim())));
|
||
i += 1;
|
||
continue;
|
||
}
|
||
if (trimmed.indexOf('## ') === 0) {
|
||
nodes.push(React.createElement('h2', { key: 'h2-' + i, style: { fontSize: 16, fontWeight: 700, color: '#1e293b', margin: '24px 0 12px', paddingBottom: 6, borderBottom: '2px solid #e0f2fe', lineHeight: 1.4 } }, parsePurchasePrdInlineText(trimmed.slice(3).trim())));
|
||
i += 1;
|
||
continue;
|
||
}
|
||
if (trimmed.indexOf('### ') === 0) {
|
||
nodes.push(React.createElement('h3', { key: 'h3-' + i, style: { fontSize: 14, fontWeight: 600, color: '#334155', margin: '16px 0 8px', lineHeight: 1.45 } }, parsePurchasePrdInlineText(trimmed.slice(4).trim())));
|
||
i += 1;
|
||
continue;
|
||
}
|
||
if (trimmed === '**文档结束**') {
|
||
nodes.push(React.createElement('div', { key: 'end-' + i, style: { marginTop: 24, paddingTop: 16, borderTop: '1px dashed #e2e8f0', color: '#94a3b8', fontSize: 13, textAlign: 'center' } }, '— 文档结束 —'));
|
||
i += 1;
|
||
continue;
|
||
}
|
||
if (/^\d+\.\s/.test(trimmed)) {
|
||
nodes.push(React.createElement('div', { key: 'ol-' + i, style: { fontSize: 13, color: '#475569', lineHeight: 1.75, margin: '6px 0 6px 4px', paddingLeft: 4 } }, parsePurchasePrdInlineText(trimmed)));
|
||
i += 1;
|
||
continue;
|
||
}
|
||
if (trimmed.indexOf('- ') === 0) {
|
||
nodes.push(React.createElement('div', { key: 'ul-' + i, style: { display: 'flex', gap: 8, fontSize: 13, color: '#475569', lineHeight: 1.75, margin: '4px 0 4px 2px' } },
|
||
React.createElement('span', { style: { color: '#1677ff', flexShrink: 0 } }, '•'),
|
||
React.createElement('span', { style: { flex: 1 } }, parsePurchasePrdInlineText(trimmed.slice(2).trim()))));
|
||
i += 1;
|
||
continue;
|
||
}
|
||
nodes.push(React.createElement('p', { key: 'p-' + i, style: { fontSize: 13, color: '#475569', lineHeight: 1.75, margin: '6px 0' } }, parsePurchasePrdInlineText(trimmed)));
|
||
i += 1;
|
||
}
|
||
return nodes;
|
||
}
|
||
function renderPurchaseRequirementDocPanel() {
|
||
var md = typeof H2_PURCHASE_SUMMARY_REQUIREMENT_DOC !== 'undefined' && H2_PURCHASE_SUMMARY_REQUIREMENT_DOC ? H2_PURCHASE_SUMMARY_REQUIREMENT_DOC : '';
|
||
if (!md) {
|
||
return React.createElement('div', { style: { padding: 24, color: '#64748b', textAlign: 'center' } }, '需求文档未加载');
|
||
}
|
||
return React.createElement('div', { className: 'h2-req-doc-panel', style: { padding: '4px 4px 16px' } }, renderPurchasePrdMarkdown(md));
|
||
}
|
||
|
||
|
||
// 【重要】必须使用 const Component 作为组件变量名
|
||
// 台账数据 - 氢费（采购端）汇总报表
|
||
|
||
const Component = function () {
|
||
var useState = React.useState;
|
||
var useMemo = React.useMemo;
|
||
var useCallback = React.useCallback;
|
||
|
||
var antd = window.antd;
|
||
var App = antd.App;
|
||
var Breadcrumb = antd.Breadcrumb;
|
||
var Card = antd.Card;
|
||
var Button = antd.Button;
|
||
var Table = antd.Table;
|
||
var Select = antd.Select;
|
||
var Row = antd.Row;
|
||
var Col = antd.Col;
|
||
var Space = antd.Space;
|
||
var Tag = antd.Tag;
|
||
var Tooltip = antd.Tooltip;
|
||
var Modal = antd.Modal;
|
||
var message = antd.message;
|
||
|
||
var SETTLEMENT_OPTIONS = [
|
||
{ value: '预付', label: '预付' },
|
||
{ value: '月结', label: '月结' }
|
||
];
|
||
|
||
/** 原型：加氢站主数据（联调后由接口加载） */
|
||
var STATION_MASTER = [
|
||
{ code: 'HS000059', name: '佛山南海羚牛加氢站', region: '广东省/佛山市', project: '佛山氢能城配', settlement: '预付' },
|
||
{ code: 'HS000035', name: '广州联新氢能东晖加氢站', region: '广东省/广州市', project: '广州干线运输', settlement: '月结' },
|
||
{ code: '000069', name: '中国石化广州开泰北加油加氢站', region: '广东省/广州市', project: '广州干线运输', settlement: '月结' },
|
||
{ code: '000072', name: '中国石化广州金坑加氢站', region: '广东省/广州市', project: '广州冷链专线', settlement: '预付' },
|
||
{ code: 'HS000030', name: '大兴国际氢能示范区海珀尔加氢站', region: '北京市/大兴区', project: '北京示范运营', settlement: '预付' },
|
||
{ code: 'HS000007', name: '上海嘉氢实业加氢站（江桥重塑）', region: '上海市/嘉定区', project: '长三角城际', settlement: '月结' },
|
||
{ code: 'HS000096', name: '松江九亭加油站', region: '上海市/松江区', project: '长三角城际', settlement: '月结' },
|
||
{ code: 'HS000041', name: '宿迁沭阳开发区加氢站', region: '江苏省/宿迁市', project: '苏北物流', settlement: '预付' },
|
||
{ code: 'HS000040', name: '扬州文昌西路站', region: '江苏省/扬州市', project: '苏北物流', settlement: '月结' },
|
||
{ code: '000048', name: '南京溧水柘塘东站', region: '江苏省/南京市', project: '南京港口短驳', settlement: '预付' },
|
||
{ code: 'HS000051', name: '成都华通加氢站', region: '四川省/成都市', project: '西南干线', settlement: '月结' },
|
||
{ code: '000090', name: '成都天府机场高速北站', region: '四川省/成都市', project: '西南干线', settlement: '预付' },
|
||
{ code: 'HS000057', name: '重庆元琨双宝氢能综合能源站', region: '重庆市/渝北区', project: '西南干线', settlement: '月结' },
|
||
{ code: '000091', name: '重庆双溪加氢站', region: '重庆市/涪陵区', project: '西南干线', settlement: '预付' },
|
||
{ code: '000053', name: '武汉革新大道加油站', region: '湖北省/武汉市', project: '华中城配', settlement: '月结' },
|
||
{ code: 'HS000081', name: '武汉群力加油站', region: '湖北省/武汉市', project: '华中城配', settlement: '预付' },
|
||
{ code: '000049', name: '宁波镇海区中国石化加氢站', region: '浙江省/宁波市', project: '浙江氢能租赁', settlement: '月结' },
|
||
{ code: 'HS000086', name: '空气化工产品（浙江）有限公司海盐经济开发区加氢站', region: '浙江省/嘉兴市', project: '浙江氢能租赁', settlement: '预付' },
|
||
{ code: 'HS000039', name: '海盐JUPITER厂内加氢站', region: '浙江省/嘉兴市', project: '园区通勤', settlement: '预付' },
|
||
{ code: '000043', name: '豪汇综合能源站', region: '山东省/淄博市', project: '鲁中物流', settlement: '月结' }
|
||
];
|
||
|
||
var REGION_OPTIONS = (function () {
|
||
var map = {};
|
||
STATION_MASTER.forEach(function (s) {
|
||
map[s.region] = s.region;
|
||
});
|
||
return Object.keys(map).sort().map(function (r) {
|
||
return { value: r, label: r };
|
||
});
|
||
})();
|
||
|
||
var STATION_OPTIONS = STATION_MASTER.map(function (s) {
|
||
return { value: s.code, label: s.name };
|
||
});
|
||
|
||
function filterOption(input, option) {
|
||
var label = (option && (option.label || option.children)) || '';
|
||
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
|
||
}
|
||
|
||
function numOrZero(v) {
|
||
if (v === null || v === undefined || v === '') return 0;
|
||
var n = Number(v);
|
||
return isNaN(n) ? 0 : n;
|
||
}
|
||
|
||
function fmtMoney(n, digits) {
|
||
if (n === null || n === undefined || n === '') return '-';
|
||
var x = Number(n);
|
||
if (isNaN(x)) return '-';
|
||
var d = digits === undefined ? 2 : digits;
|
||
return x.toLocaleString('zh-CN', { minimumFractionDigits: d, maximumFractionDigits: d });
|
||
}
|
||
|
||
function fmtQty(n) {
|
||
if (n === null || n === undefined || n === '') return '-';
|
||
var x = Number(n);
|
||
if (isNaN(x)) return '-';
|
||
return x.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||
}
|
||
|
||
function escapeCsv(v) {
|
||
var s = v == null ? '' : String(v);
|
||
if (s.indexOf(',') !== -1 || s.indexOf('"') !== -1 || s.indexOf('\n') !== -1 || s.indexOf('\r') !== -1) {
|
||
return '"' + s.replace(/"/g, '""') + '"';
|
||
}
|
||
return s;
|
||
}
|
||
|
||
function downloadCsv(filename, lines) {
|
||
var csv = lines.map(function (row) { return row.map(escapeCsv).join(','); }).join('\n');
|
||
var blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8' });
|
||
var url = URL.createObjectURL(blob);
|
||
var a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = filename;
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
}
|
||
|
||
function findStation(code) {
|
||
for (var i = 0; i < STATION_MASTER.length; i++) {
|
||
if (STATION_MASTER[i].code === code) return STATION_MASTER[i];
|
||
}
|
||
return null;
|
||
}
|
||
|
||
function formatDateTime(d) {
|
||
if (!d || !window.dayjs) return '—';
|
||
try {
|
||
var x = window.dayjs(d);
|
||
return x.isValid() ? x.format('YYYY-MM-DD HH:mm:ss') : '—';
|
||
} catch (eDt) {
|
||
return '—';
|
||
}
|
||
}
|
||
|
||
function formatDate(d) {
|
||
if (!d || !window.dayjs) return '—';
|
||
try {
|
||
var x = window.dayjs(d);
|
||
return x.isValid() ? x.format('YYYY-MM-DD') : '—';
|
||
} catch (eD) {
|
||
return '—';
|
||
}
|
||
}
|
||
|
||
var MOCK_SAMPLE_PDF_URL =
|
||
'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf';
|
||
|
||
var MOCK_PLATES = ['粤A12345F', '浙AD12345F', '沪A06695F', '苏EF99887F', '京CN88771F', '渝A88888F'];
|
||
|
||
/**
|
||
* 原型：车辆氢费明细钻取数据（联调后按加氢站 + 汇总条件查询车辆氢费明细接口）
|
||
* payable：应付总金额 = 该站车辆氢费明细「加氢总价」求和
|
||
*/
|
||
function buildMockStationDetailRows(summaryRow, drillType) {
|
||
var seed = 0;
|
||
var code = summaryRow.stationCode || '';
|
||
var i;
|
||
for (i = 0; i < code.length; i++) seed += code.charCodeAt(i);
|
||
var lineCount = Math.max(4, 5 + (seed % 6));
|
||
var rows = [];
|
||
var unitPrice = numOrZero(summaryRow.unitPrice) || 28;
|
||
var baseDay = window.dayjs ? window.dayjs('2026-05-01') : null;
|
||
|
||
if (drillType === 'hydrogenKg') {
|
||
var totalKg = numOrZero(summaryRow.hydrogenKg);
|
||
var remainKg = totalKg;
|
||
for (i = 0; i < lineCount; i++) {
|
||
var isLast = i === lineCount - 1;
|
||
var kg = isLast
|
||
? Math.round(remainKg * 100) / 100
|
||
: Math.round((totalKg / lineCount) * (0.82 + ((seed + i) % 4) * 0.06) * 100) / 100;
|
||
if (!isLast) remainKg -= kg;
|
||
var costTotal = Math.round(kg * unitPrice * 100) / 100;
|
||
var customerAmount = Math.round(kg * (unitPrice + 2) * 100) / 100;
|
||
var day = baseDay && baseDay.subtract ? baseDay.subtract((seed + i) % 40, 'day') : null;
|
||
rows.push({
|
||
key: code + '-kg-' + i,
|
||
seq: i + 1,
|
||
hydrogenTime: day,
|
||
orderNo: 'JQ' + code + (day && day.format ? day.format('YYMMDD') : '') + String(i + 1).padStart(5, '0'),
|
||
plateNo: MOCK_PLATES[(seed + i) % MOCK_PLATES.length],
|
||
hydrogenKg: kg,
|
||
costUnitPrice: unitPrice,
|
||
costTotal: costTotal,
|
||
customerAmount: customerAmount
|
||
});
|
||
}
|
||
return rows;
|
||
}
|
||
|
||
if (drillType === 'payableAmount') {
|
||
var totalPay = numOrZero(summaryRow.payableAmount);
|
||
var remainPay = totalPay;
|
||
for (i = 0; i < lineCount; i++) {
|
||
var isLast = i === lineCount - 1;
|
||
var customerAmount = isLast
|
||
? Math.round(remainPay * 100) / 100
|
||
: Math.round((totalPay / lineCount) * (0.8 + ((seed + i) % 5) * 0.05) * 100) / 100;
|
||
if (!isLast) remainPay -= customerAmount;
|
||
var kg = unitPrice > 0 ? Math.round((customerAmount / (unitPrice + 2)) * 100) / 100 : 0;
|
||
var costTotal = Math.round(kg * unitPrice * 100) / 100;
|
||
var day = baseDay && baseDay.subtract ? baseDay.subtract((seed + i) % 40, 'day') : null;
|
||
rows.push({
|
||
key: code + '-pay-' + i,
|
||
seq: i + 1,
|
||
hydrogenTime: day,
|
||
orderNo: 'JQ' + code + (day && day.format ? day.format('YYMMDD') : '') + String(100 + i).padStart(5, '0'),
|
||
plateNo: MOCK_PLATES[(seed + i + 2) % MOCK_PLATES.length],
|
||
hydrogenKg: kg,
|
||
costUnitPrice: unitPrice,
|
||
costTotal: costTotal,
|
||
customerAmount: customerAmount
|
||
});
|
||
}
|
||
return rows;
|
||
}
|
||
|
||
return rows;
|
||
}
|
||
|
||
/**
|
||
* 原型：加氢站预付余额变更明细（联调后对接加氢站打款/余额流水接口）
|
||
*/
|
||
function buildMockPrepaidBalanceRows(summaryRow) {
|
||
var seed = 0;
|
||
var code = summaryRow.stationCode || '';
|
||
var i;
|
||
for (i = 0; i < code.length; i++) seed += code.charCodeAt(i);
|
||
var stationName = summaryRow.stationName || '—';
|
||
var finalBalance = numOrZero(summaryRow.prepaidBalance);
|
||
var lineCount = Math.max(5, 6 + (seed % 5));
|
||
var rows = [];
|
||
var openingBalance = Math.round((finalBalance + 38000 + seed * 620) * 100) / 100;
|
||
if (openingBalance < 0) openingBalance = Math.abs(openingBalance) + 50000;
|
||
|
||
rows.push({
|
||
key: code + '-bal-0',
|
||
stationName: stationName,
|
||
incomeAmount: openingBalance,
|
||
expenseAmount: null,
|
||
balance: openingBalance,
|
||
orderNo: 'QC' + code + '260101'
|
||
});
|
||
|
||
var balance = openingBalance;
|
||
for (i = 1; i < lineCount - 1; i++) {
|
||
var isIncome = (seed + i) % 3 === 0;
|
||
var incomeAmount = null;
|
||
var expenseAmount = null;
|
||
if (isIncome) {
|
||
incomeAmount = Math.round((6000 + (seed + i) * 380) * 100) / 100;
|
||
balance = Math.round((balance + incomeAmount) * 100) / 100;
|
||
} else {
|
||
expenseAmount = Math.round((2800 + (seed + i) * 210) * 100) / 100;
|
||
balance = Math.round((balance - expenseAmount) * 100) / 100;
|
||
}
|
||
rows.push({
|
||
key: code + '-bal-' + i,
|
||
stationName: stationName,
|
||
incomeAmount: incomeAmount,
|
||
expenseAmount: expenseAmount,
|
||
balance: balance,
|
||
orderNo: (isIncome ? 'DK' : 'JQ') + code + String(200 + i).padStart(5, '0')
|
||
});
|
||
}
|
||
|
||
var diff = Math.round((finalBalance - balance) * 100) / 100;
|
||
if (Math.abs(diff) < 0.01) {
|
||
rows.push({
|
||
key: code + '-bal-last',
|
||
stationName: stationName,
|
||
incomeAmount: null,
|
||
expenseAmount: null,
|
||
balance: finalBalance,
|
||
orderNo: 'BZ' + code + String(900).padStart(5, '0')
|
||
});
|
||
} else if (diff > 0) {
|
||
rows.push({
|
||
key: code + '-bal-last',
|
||
stationName: stationName,
|
||
incomeAmount: diff,
|
||
expenseAmount: null,
|
||
balance: finalBalance,
|
||
orderNo: 'DK' + code + String(999).padStart(5, '0')
|
||
});
|
||
} else {
|
||
rows.push({
|
||
key: code + '-bal-last',
|
||
stationName: stationName,
|
||
incomeAmount: null,
|
||
expenseAmount: Math.round(Math.abs(diff) * 100) / 100,
|
||
balance: finalBalance,
|
||
orderNo: 'JQ' + code + String(999).padStart(5, '0')
|
||
});
|
||
}
|
||
|
||
return rows;
|
||
}
|
||
|
||
/** 原型：充值总额钻取（联调后对接加氢站预充值记录接口） */
|
||
function buildMockRechargeDrillRows(summaryRow) {
|
||
var seed = 0;
|
||
var code = summaryRow.stationCode || '';
|
||
var i;
|
||
for (i = 0; i < code.length; i++) seed += code.charCodeAt(i);
|
||
var stationName = summaryRow.stationName || '—';
|
||
var totalRecharge = numOrZero(summaryRow.rechargeTotal);
|
||
var rechargeCount = Math.max(2, 4 + (seed % 4));
|
||
var rows = [];
|
||
var remain = totalRecharge;
|
||
var baseDay = window.dayjs ? window.dayjs('2026-01-15') : null;
|
||
|
||
for (i = 0; i < rechargeCount; i++) {
|
||
var isLast = i === rechargeCount - 1;
|
||
var prepayAmount = isLast
|
||
? Math.round(remain * 100) / 100
|
||
: Math.round((totalRecharge / rechargeCount) * (0.75 + ((seed + i) % 5) * 0.05) * 100) / 100;
|
||
if (!isLast) remain -= prepayAmount;
|
||
var payDay = baseDay && baseDay.add ? baseDay.add((seed + i) * 17, 'day') : null;
|
||
var isPdf = (seed + i) % 3 === 0;
|
||
rows.push({
|
||
key: code + '-rc-' + i,
|
||
stationName: stationName,
|
||
payTime: payDay,
|
||
prepayAmount: prepayAmount,
|
||
voucherUrl: isPdf
|
||
? MOCK_SAMPLE_PDF_URL
|
||
: 'https://picsum.photos/seed/rc-' + code + '-' + i + '/960/640',
|
||
voucherFileName: '付款凭证_' + code + '_' + String(i + 1).padStart(2, '0') + (isPdf ? '.pdf' : '.jpg'),
|
||
voucherMime: isPdf ? 'pdf' : 'image'
|
||
});
|
||
}
|
||
return rows;
|
||
}
|
||
|
||
/** 原型：采购支付钻取（联调后对接加氢站打款账单接口） */
|
||
function buildMockPaymentDrillRows(summaryRow) {
|
||
var seed = 0;
|
||
var code = summaryRow.stationCode || '';
|
||
var i;
|
||
for (i = 0; i < code.length; i++) seed += code.charCodeAt(i);
|
||
var stationName = summaryRow.stationName || '—';
|
||
var totalPaid = numOrZero(summaryRow.paidAmount);
|
||
var billCount = Math.max(2, 3 + (seed % 3));
|
||
var rows = [];
|
||
var remainPaid = totalPaid;
|
||
var baseMonth = window.dayjs ? window.dayjs('2026-01-01') : null;
|
||
|
||
for (i = 0; i < billCount; i++) {
|
||
var isLast = i === billCount - 1;
|
||
var paidPart = isLast
|
||
? Math.round(remainPaid * 100) / 100
|
||
: Math.round((totalPaid / billCount) * (0.78 + ((seed + i) % 4) * 0.06) * 100) / 100;
|
||
if (!isLast) remainPaid -= paidPart;
|
||
var payablePart = Math.round(paidPart * (1.04 + ((seed + i) % 3) * 0.02) * 100) / 100;
|
||
var start = baseMonth && baseMonth.add ? baseMonth.add(i * 2, 'month').startOf('month') : null;
|
||
var end = start && start.endOf ? start.endOf('month') : null;
|
||
rows.push({
|
||
key: code + '-payment-' + i,
|
||
stationName: stationName,
|
||
billStartDate: start,
|
||
billEndDate: end,
|
||
payableAmount: payablePart,
|
||
paidAmount: paidPart,
|
||
voucherUrl: 'https://picsum.photos/seed/pay-' + code + '-' + i + '/960/640',
|
||
voucherName: '付款凭据_' + code + '_' + String(i + 1).padStart(2, '0') + '.jpg',
|
||
voucherMime: 'image'
|
||
});
|
||
}
|
||
return rows;
|
||
}
|
||
|
||
/** 原型：已开票金额钻取（联调后对接开票记录接口） */
|
||
function buildMockInvoiceDrillRows(summaryRow) {
|
||
var seed = 0;
|
||
var code = summaryRow.stationCode || '';
|
||
var i;
|
||
for (i = 0; i < code.length; i++) seed += code.charCodeAt(i);
|
||
var stationName = summaryRow.stationName || '—';
|
||
var totalInvoiced = numOrZero(summaryRow.invoicedAmount);
|
||
var invoiceCount = Math.max(2, 3 + (seed % 3));
|
||
var rows = [];
|
||
var remainInv = totalInvoiced;
|
||
var baseDay = window.dayjs ? window.dayjs('2026-02-01') : null;
|
||
|
||
for (i = 0; i < invoiceCount; i++) {
|
||
var isLast = i === invoiceCount - 1;
|
||
var amount = isLast
|
||
? Math.round(remainInv * 100) / 100
|
||
: Math.round((totalInvoiced / invoiceCount) * (0.8 + ((seed + i) % 4) * 0.05) * 100) / 100;
|
||
if (!isLast) remainInv -= amount;
|
||
var isPdf = (seed + i) % 2 === 0;
|
||
var invDay = baseDay && baseDay.add ? baseDay.add((seed + i) * 11, 'day') : null;
|
||
rows.push({
|
||
key: code + '-inv-' + i,
|
||
stationName: stationName,
|
||
invoiceTime: invDay,
|
||
invoiceAmount: amount,
|
||
invoiceUrl: isPdf
|
||
? MOCK_SAMPLE_PDF_URL
|
||
: 'https://picsum.photos/seed/inv-' + code + '-' + i + '/860/1200',
|
||
invoiceFileName: '发票_' + code + '_' + String(i + 1).padStart(2, '0') + (isPdf ? '.pdf' : '.jpg'),
|
||
invoiceMime: isPdf ? 'pdf' : 'image'
|
||
});
|
||
}
|
||
return rows;
|
||
}
|
||
|
||
function fmtLedgerMoney(v) {
|
||
if (v === null || v === undefined || v === '' || Number(v) === 0) return '—';
|
||
return fmtMoney(v, 2);
|
||
}
|
||
|
||
/** 原型：按站点生成汇总行（联调后由后端聚合） */
|
||
function buildMockSummaryRows() {
|
||
return STATION_MASTER.map(function (s, idx) {
|
||
var seed = idx + 1;
|
||
var hydrogenKg = Math.round((1200 + seed * 137.5) * 100) / 100;
|
||
var unitPrice = 28 + (seed % 5) * 0.5;
|
||
/** 应付总金额 = 车辆氢费明细「加氢总价」按站点求和（原型用加氢单价近似） */
|
||
var customerUnitPrice = unitPrice + 2;
|
||
var payable = Math.round(hydrogenKg * customerUnitPrice * 100) / 100;
|
||
var paid = Math.round(payable * (0.55 + (seed % 4) * 0.1) * 100) / 100;
|
||
var unpaid = Math.round((payable - paid) * 100) / 100;
|
||
var invoiced = Math.round(Math.min(payable, paid * (0.72 + (seed % 5) * 0.05)) * 100) / 100;
|
||
var prepaid = Math.round((80000 - seed * 4200 + (seed % 3 === 0 ? -15000 : 0)) * 100) / 100;
|
||
/** 原型：首行演示预付余额为负（已欠费） */
|
||
if (idx === 0) {
|
||
prepaid = -12580.5;
|
||
}
|
||
var rechargeTotal = Math.round((48000 + seed * 3200 + (idx === 0 ? 8000 : 0)) * 100) / 100;
|
||
return {
|
||
key: s.code,
|
||
stationCode: s.code,
|
||
region: s.region,
|
||
stationName: s.name,
|
||
hydrogenKg: hydrogenKg,
|
||
unitPrice: unitPrice,
|
||
payableAmount: payable,
|
||
paidAmount: paid,
|
||
unpaidAmount: unpaid,
|
||
invoicedAmount: invoiced,
|
||
rechargeTotal: rechargeTotal,
|
||
prepaidBalance: prepaid,
|
||
settlement: s.settlement
|
||
};
|
||
});
|
||
}
|
||
|
||
var layoutStyle = {
|
||
padding: '16px 24px 24px',
|
||
minHeight: '100vh',
|
||
background: 'linear-gradient(165deg, #eef4ff 0%, #f5f7fa 42%, #f0f2f5 100%)'
|
||
};
|
||
var filterLabelStyle = { marginBottom: 6, fontSize: 13, color: 'rgba(0,0,0,0.55)', fontWeight: 500 };
|
||
var filterItemStyle = { marginBottom: 12 };
|
||
var filterControlStyle = { width: '100%' };
|
||
var filterActionsColStyle = { flex: '0 0 auto', marginLeft: 'auto' };
|
||
var filterCardStyle = {
|
||
marginBottom: 20,
|
||
borderRadius: 16,
|
||
boxShadow: '0 4px 20px -4px rgba(16,24,40,0.03), 0 0 0 1px rgba(16,24,40,0.06)',
|
||
border: 'none',
|
||
background: '#ffffff'
|
||
};
|
||
var tableCardStyle = {
|
||
borderRadius: 16,
|
||
boxShadow: '0 10px 32px -4px rgba(16,24,40,0.06), 0 0 0 1px rgba(16,24,40,0.04)',
|
||
border: 'none',
|
||
background: '#ffffff',
|
||
overflow: 'hidden'
|
||
};
|
||
var ledgerTableStyle =
|
||
'.h2-purchase-summary-wrap{border-radius:12px;overflow:hidden;box-shadow:0 4px 24px -6px rgba(15,23,42,0.05),0 0 0 1px rgba(22,119,255,0.1)}' +
|
||
'.h2-purchase-summary-wrap .ant-table-wrapper,.h2-purchase-summary-wrap .ant-table-content{overflow-x:hidden!important}' +
|
||
'.h2-purchase-summary-wrap .h2-purchase-summary-table{width:100%!important;table-layout:fixed}' +
|
||
'.h2-purchase-summary-table .ant-table-thead>tr>th{white-space:nowrap;color:#1e293b!important;font-weight:600!important;font-size:13px!important;' +
|
||
'background:#e8f4fc!important;border-bottom:1px solid #bae6fd!important;border-inline-end:1px solid #dbeafe!important;padding:0 8px!important;height:38px!important}' +
|
||
'.h2-purchase-summary-table .ant-table-tbody>tr:not(.ant-table-measure-row)>td{white-space:nowrap;font-variant-numeric:tabular-nums;color:#334155;border-bottom:1px solid #f1f5f9!important;border-inline-end:1px solid #f8fafc!important;padding:0 8px!important;height:38px!important;overflow:hidden!important}' +
|
||
'.h2-purchase-summary-table td.h2-cell-prepaid-balance{overflow:hidden!important}' +
|
||
'.h2-purchase-summary-table .h2-prepaid-balance-cell{display:flex;align-items:center;justify-content:flex-end;gap:4px;max-width:100%;min-width:0;overflow:hidden;box-sizing:border-box}' +
|
||
'.h2-purchase-summary-table .h2-prepaid-balance-cell .h2-prepaid-balance-amount{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:none;background:none;padding:0;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}' +
|
||
'.h2-purchase-summary-table .h2-prepaid-balance-cell .ant-tag{flex-shrink:0;margin:0!important;font-size:11px;line-height:16px;padding:0 5px}' +
|
||
'.h2-purchase-summary-table .ant-table-tbody>tr.h2-purchase-row:hover>td{background:#f0f9ff!important}' +
|
||
'.h2-purchase-summary-table .ant-table-summary>tr>td{font-weight:700;background:#f8fafc!important;color:#0f172a!important;border-top:2px solid #cbd5e1!important;padding:0 8px!important;height:38px!important}' +
|
||
'.h2-ledger-totals-bar{display:flex;align-items:stretch;gap:0;margin-bottom:10px;border:1px solid #bae6fd;border-radius:10px;overflow:hidden;background:#f8fafc;box-shadow:0 1px 0 rgba(15,23,42,0.04)}' +
|
||
'.h2-ledger-totals-bar__title{display:flex;align-items:center;justify-content:center;min-width:72px;padding:10px 14px;font-size:14px;font-weight:700;color:#0f172a;background:#e8f4fc;border-right:1px solid #bae6fd}' +
|
||
'.h2-ledger-totals-bar__items{display:flex;flex:1;flex-wrap:wrap}' +
|
||
'.h2-ledger-totals-bar__item{flex:1;min-width:140px;padding:8px 16px;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;justify-content:center;gap:4px}' +
|
||
'.h2-ledger-totals-bar__item:last-child{border-right:none}' +
|
||
'.h2-ledger-totals-bar__label{font-size:12px;color:rgba(15,23,42,0.55);font-weight:500;line-height:1.2}' +
|
||
'.h2-ledger-totals-bar__value{font-size:16px;font-weight:700;color:#0f172a;font-variant-numeric:tabular-nums;line-height:1.3}' +
|
||
'.h2-ledger-totals-bar__value.is-warn{color:#cf1322}' +
|
||
'.h2-purchase-summary-table .h2-col-header{position:relative;display:flex;align-items:center;width:100%;height:100%;min-height:38px;padding:0 10px 0 8px;box-sizing:border-box}' +
|
||
'.h2-purchase-summary-table .h2-col-header__text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}' +
|
||
'.h2-purchase-summary-table .h2-col-header__resizer{position:absolute;right:0;top:0;bottom:0;width:8px;cursor:col-resize;z-index:2;touch-action:none}' +
|
||
'.h2-purchase-summary-table .h2-col-header__resizer:hover{background:rgba(22,119,255,0.12)}' +
|
||
'.h2-purchase-summary-table.ant-table-wrapper .ant-table-thead>tr>th{position:relative}' +
|
||
'.h2-req-doc-panel{max-width:100%}' +
|
||
'.h2-req-doc-panel h1:first-child{margin-top:0}';
|
||
|
||
/** 主表默认列宽 */
|
||
var DEFAULT_MAIN_COLUMN_WIDTHS = {
|
||
seq: 48,
|
||
region: 96,
|
||
stationName: 148,
|
||
settlement: 72,
|
||
hydrogenKg: 96,
|
||
payableAmount: 100,
|
||
paidAmount: 100,
|
||
unpaidAmount: 100,
|
||
invoicedAmount: 100,
|
||
uninvoicedAmount: 100,
|
||
rechargeTotal: 100,
|
||
prepaidBalance: 118
|
||
};
|
||
var MIN_COLUMN_WIDTH = 48;
|
||
|
||
var drillLinkStyle = {
|
||
cursor: 'pointer',
|
||
color: '#1677ff',
|
||
border: 'none',
|
||
background: 'none',
|
||
padding: 0,
|
||
font: 'inherit',
|
||
fontVariantNumeric: 'tabular-nums',
|
||
textDecoration: 'underline',
|
||
textUnderlineOffset: 2
|
||
};
|
||
|
||
var regionDraftState = useState(undefined);
|
||
var regionDraft = regionDraftState[0];
|
||
var setRegionDraft = regionDraftState[1];
|
||
var stationDraftState = useState(undefined);
|
||
var stationDraft = stationDraftState[0];
|
||
var setStationDraft = stationDraftState[1];
|
||
var settlementDraftState = useState(undefined);
|
||
var settlementDraft = settlementDraftState[0];
|
||
var setSettlementDraft = settlementDraftState[1];
|
||
|
||
var regionAppliedState = useState(undefined);
|
||
var regionApplied = regionAppliedState[0];
|
||
var setRegionApplied = regionAppliedState[1];
|
||
var stationAppliedState = useState(undefined);
|
||
var stationApplied = stationAppliedState[0];
|
||
var setStationApplied = stationAppliedState[1];
|
||
var settlementAppliedState = useState(undefined);
|
||
var settlementApplied = settlementAppliedState[0];
|
||
var setSettlementApplied = settlementAppliedState[1];
|
||
|
||
var detailDrillModalState = useState({
|
||
open: false,
|
||
type: '',
|
||
stationName: '',
|
||
summary: null,
|
||
rows: []
|
||
});
|
||
var detailDrillModal = detailDrillModalState[0];
|
||
var setDetailDrillModal = detailDrillModalState[1];
|
||
|
||
var prepaidBalanceDrillModalState = useState({
|
||
open: false,
|
||
stationName: '',
|
||
endingBalance: 0,
|
||
rows: []
|
||
});
|
||
var prepaidBalanceDrillModal = prepaidBalanceDrillModalState[0];
|
||
var setPrepaidBalanceDrillModal = prepaidBalanceDrillModalState[1];
|
||
|
||
var paymentDrillModalState = useState({ open: false, stationName: '', rows: [] });
|
||
var paymentDrillModal = paymentDrillModalState[0];
|
||
var setPaymentDrillModal = paymentDrillModalState[1];
|
||
|
||
var invoiceDrillModalState = useState({ open: false, stationName: '', rows: [] });
|
||
var invoiceDrillModal = invoiceDrillModalState[0];
|
||
var setInvoiceDrillModal = invoiceDrillModalState[1];
|
||
|
||
var rechargeDrillModalState = useState({ open: false, stationName: '', rows: [] });
|
||
var rechargeDrillModal = rechargeDrillModalState[0];
|
||
var setRechargeDrillModal = rechargeDrillModalState[1];
|
||
|
||
var attachmentPreviewState = useState({ open: false, url: '', title: '', mime: 'image' });
|
||
var attachmentPreview = attachmentPreviewState[0];
|
||
var setAttachmentPreview = attachmentPreviewState[1];
|
||
|
||
var reqDetailOpenState = useState(false);
|
||
var reqDetailOpen = reqDetailOpenState[0];
|
||
var setReqDetailOpen = reqDetailOpenState[1];
|
||
|
||
var columnWidthsState = useState(function () {
|
||
return Object.assign({}, DEFAULT_MAIN_COLUMN_WIDTHS);
|
||
});
|
||
var columnWidths = columnWidthsState[0];
|
||
var setColumnWidths = columnWidthsState[1];
|
||
var columnWidthsRef = { current: columnWidths };
|
||
columnWidthsRef.current = columnWidths;
|
||
|
||
var handleColumnResize = useCallback(function (key, width) {
|
||
setColumnWidths(function (prev) {
|
||
var next = Object.assign({}, prev);
|
||
next[key] = Math.max(MIN_COLUMN_WIDTH, Math.round(width));
|
||
return next;
|
||
});
|
||
}, []);
|
||
|
||
var makeResizableTitle = useCallback(
|
||
function (title, key) {
|
||
return function ResizableColumnTitle() {
|
||
var onResizeMouseDown = function (e) {
|
||
if (e.button !== 0) return;
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
var startX = e.clientX;
|
||
var startWidth = columnWidthsRef.current[key] || DEFAULT_MAIN_COLUMN_WIDTHS[key] || 100;
|
||
var onMouseMove = function (ev) {
|
||
handleColumnResize(key, startWidth + ev.clientX - startX);
|
||
};
|
||
var onMouseUp = function () {
|
||
document.removeEventListener('mousemove', onMouseMove);
|
||
document.removeEventListener('mouseup', onMouseUp);
|
||
document.body.style.cursor = '';
|
||
document.body.style.userSelect = '';
|
||
};
|
||
document.body.style.cursor = 'col-resize';
|
||
document.body.style.userSelect = 'none';
|
||
document.addEventListener('mousemove', onMouseMove);
|
||
document.addEventListener('mouseup', onMouseUp);
|
||
};
|
||
return React.createElement(
|
||
'div',
|
||
{ className: 'h2-col-header' },
|
||
React.createElement('span', { className: 'h2-col-header__text' }, title),
|
||
React.createElement('span', {
|
||
className: 'h2-col-header__resizer',
|
||
onMouseDown: onResizeMouseDown,
|
||
onClick: function (ev) {
|
||
ev.stopPropagation();
|
||
}
|
||
})
|
||
);
|
||
};
|
||
},
|
||
[handleColumnResize]
|
||
);
|
||
|
||
var allRows = useMemo(function () {
|
||
return buildMockSummaryRows();
|
||
}, []);
|
||
|
||
var dataSource = useMemo(function () {
|
||
var list = allRows.filter(function (r) {
|
||
if (regionApplied && r.region !== regionApplied) return false;
|
||
if (stationApplied && r.stationCode !== stationApplied) return false;
|
||
if (settlementApplied && r.settlement !== settlementApplied) return false;
|
||
return true;
|
||
});
|
||
return list.map(function (r, idx) {
|
||
var unpaid = Math.round((numOrZero(r.payableAmount) - numOrZero(r.paidAmount)) * 100) / 100;
|
||
var uninvoiced = Math.round((numOrZero(r.payableAmount) - numOrZero(r.invoicedAmount)) * 100) / 100;
|
||
return Object.assign({}, r, { seq: idx + 1, unpaidAmount: unpaid, uninvoicedAmount: uninvoiced });
|
||
});
|
||
}, [allRows, regionApplied, stationApplied, settlementApplied]);
|
||
|
||
var totals = useMemo(function () {
|
||
var acc = dataSource.reduce(
|
||
function (sum, r) {
|
||
sum.hydrogenKg += numOrZero(r.hydrogenKg);
|
||
sum.payableAmount += numOrZero(r.payableAmount);
|
||
sum.paidAmount += numOrZero(r.paidAmount);
|
||
sum.invoicedAmount += numOrZero(r.invoicedAmount);
|
||
sum.rechargeTotal += numOrZero(r.rechargeTotal);
|
||
sum.prepaidBalance += numOrZero(r.prepaidBalance);
|
||
return sum;
|
||
},
|
||
{ hydrogenKg: 0, payableAmount: 0, paidAmount: 0, invoicedAmount: 0, rechargeTotal: 0, prepaidBalance: 0 }
|
||
);
|
||
acc.unpaidAmount = Math.round((acc.payableAmount - acc.paidAmount) * 100) / 100;
|
||
acc.uninvoicedAmount = Math.round((acc.payableAmount - acc.invoicedAmount) * 100) / 100;
|
||
return acc;
|
||
}, [dataSource]);
|
||
|
||
var filterSummaryText = useMemo(function () {
|
||
var parts = [];
|
||
parts.push('地区：' + (regionApplied || '全部'));
|
||
var st = findStation(stationApplied);
|
||
parts.push('加氢站：' + (st ? st.name : '全部'));
|
||
parts.push('结算方式：' + (settlementApplied || '全部'));
|
||
return parts.join(' ');
|
||
}, [regionApplied, stationApplied, settlementApplied]);
|
||
|
||
var openDetailDrill = useCallback(function (record, drillType) {
|
||
var rows = buildMockStationDetailRows(record, drillType);
|
||
var title =
|
||
drillType === 'payableAmount'
|
||
? '应付总金额明细'
|
||
: '加氢总量明细';
|
||
setDetailDrillModal({
|
||
open: true,
|
||
type: drillType,
|
||
stationName: record.stationName,
|
||
summary: record,
|
||
rows: rows
|
||
});
|
||
}, []);
|
||
|
||
var closeDetailDrill = useCallback(function () {
|
||
setDetailDrillModal({ open: false, type: '', stationName: '', summary: null, rows: [] });
|
||
}, []);
|
||
|
||
var openPrepaidBalanceDrill = useCallback(function (record) {
|
||
setPrepaidBalanceDrillModal({
|
||
open: true,
|
||
stationName: record.stationName,
|
||
endingBalance: numOrZero(record.prepaidBalance),
|
||
rows: buildMockPrepaidBalanceRows(record)
|
||
});
|
||
}, []);
|
||
|
||
var closePrepaidBalanceDrill = useCallback(function () {
|
||
setPrepaidBalanceDrillModal({ open: false, stationName: '', endingBalance: 0, rows: [] });
|
||
}, []);
|
||
|
||
var openPaymentDrill = useCallback(function (record) {
|
||
setPaymentDrillModal({
|
||
open: true,
|
||
stationName: record.stationName,
|
||
rows: buildMockPaymentDrillRows(record)
|
||
});
|
||
}, []);
|
||
|
||
var closePaymentDrill = useCallback(function () {
|
||
setPaymentDrillModal({ open: false, stationName: '', rows: [] });
|
||
}, []);
|
||
|
||
var openInvoiceDrill = useCallback(function (record) {
|
||
setInvoiceDrillModal({
|
||
open: true,
|
||
stationName: record.stationName,
|
||
rows: buildMockInvoiceDrillRows(record)
|
||
});
|
||
}, []);
|
||
|
||
var closeInvoiceDrill = useCallback(function () {
|
||
setInvoiceDrillModal({ open: false, stationName: '', rows: [] });
|
||
}, []);
|
||
|
||
var openRechargeDrill = useCallback(function (record) {
|
||
setRechargeDrillModal({
|
||
open: true,
|
||
stationName: record.stationName,
|
||
rows: buildMockRechargeDrillRows(record)
|
||
});
|
||
}, []);
|
||
|
||
var closeRechargeDrill = useCallback(function () {
|
||
setRechargeDrillModal({ open: false, stationName: '', rows: [] });
|
||
}, []);
|
||
|
||
var openAttachmentPreview = useCallback(function (file) {
|
||
if (!file || !file.url) {
|
||
message.warning('暂无附件');
|
||
return;
|
||
}
|
||
setAttachmentPreview({
|
||
open: true,
|
||
url: file.url,
|
||
title: file.title || '预览',
|
||
mime: file.mime || 'image'
|
||
});
|
||
}, []);
|
||
|
||
var closeAttachmentPreview = useCallback(function () {
|
||
setAttachmentPreview({ open: false, url: '', title: '', mime: 'image' });
|
||
}, []);
|
||
|
||
var downloadAttachment = useCallback(function (file) {
|
||
if (!file || !file.url) {
|
||
message.warning('暂无文件');
|
||
return;
|
||
}
|
||
var a = document.createElement('a');
|
||
a.href = file.url;
|
||
a.download = file.fileName || 'download';
|
||
a.target = '_blank';
|
||
a.rel = 'noopener noreferrer';
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
message.success('开始下载');
|
||
}, []);
|
||
|
||
var renderDrillLink = useCallback(function (display, record, drillType) {
|
||
return React.createElement(
|
||
'button',
|
||
{
|
||
type: 'button',
|
||
style: drillLinkStyle,
|
||
title: '点击查看明细',
|
||
onClick: function (e) {
|
||
if (e && e.stopPropagation) e.stopPropagation();
|
||
openDetailDrill(record, drillType);
|
||
}
|
||
},
|
||
display
|
||
);
|
||
}, [openDetailDrill]);
|
||
|
||
var renderDrillLinkWithHandler = useCallback(function (display, record, onDrill) {
|
||
return React.createElement(
|
||
'button',
|
||
{
|
||
type: 'button',
|
||
style: drillLinkStyle,
|
||
title: '点击查看明细',
|
||
onClick: function (e) {
|
||
if (e && e.stopPropagation) e.stopPropagation();
|
||
onDrill(record);
|
||
}
|
||
},
|
||
display
|
||
);
|
||
}, []);
|
||
|
||
var renderPrepaidBalanceCell = useCallback(function (v, record) {
|
||
var n = numOrZero(v);
|
||
var isArrears = n < 0;
|
||
var amountStyle = isArrears
|
||
? { color: '#cf1322', fontVariantNumeric: 'tabular-nums' }
|
||
: { color: '#1677ff', fontVariantNumeric: 'tabular-nums' };
|
||
return React.createElement(
|
||
'div',
|
||
{ className: 'h2-prepaid-balance-cell' },
|
||
isArrears
|
||
? React.createElement(Tag, { color: 'error' }, '已欠费')
|
||
: null,
|
||
React.createElement(
|
||
'button',
|
||
{
|
||
type: 'button',
|
||
className: 'h2-prepaid-balance-amount',
|
||
style: amountStyle,
|
||
title: '点击查看明细',
|
||
onClick: function (e) {
|
||
if (e && e.stopPropagation) e.stopPropagation();
|
||
openPrepaidBalanceDrill(record);
|
||
}
|
||
},
|
||
fmtMoney(v, 2)
|
||
)
|
||
);
|
||
}, [openPrepaidBalanceDrill]);
|
||
|
||
var renderUnpaidAmountCell = useCallback(function (v) {
|
||
var n = numOrZero(v);
|
||
var style = n > 0 ? { color: '#cf1322', fontWeight: 600, fontVariantNumeric: 'tabular-nums' } : { fontVariantNumeric: 'tabular-nums' };
|
||
return React.createElement('span', { style: style }, fmtMoney(v, 2));
|
||
}, []);
|
||
|
||
var renderUninvoicedAmountCell = renderUnpaidAmountCell;
|
||
|
||
var handleQuery = useCallback(function () {
|
||
setRegionApplied(regionDraft);
|
||
setStationApplied(stationDraft);
|
||
setSettlementApplied(settlementDraft);
|
||
message.success('查询成功');
|
||
}, [regionDraft, stationDraft, settlementDraft]);
|
||
|
||
var handleReset = useCallback(function () {
|
||
setRegionDraft(undefined);
|
||
setStationDraft(undefined);
|
||
setSettlementDraft(undefined);
|
||
setRegionApplied(undefined);
|
||
setStationApplied(undefined);
|
||
setSettlementApplied(undefined);
|
||
}, []);
|
||
|
||
var handleExport = useCallback(function () {
|
||
var headers = [
|
||
'序号',
|
||
'地区',
|
||
'加氢站全称',
|
||
'结算方式',
|
||
'加氢总量(kg)',
|
||
'应付总金额(元)',
|
||
'已付总金额(元)',
|
||
'未付总金额(元)',
|
||
'已开票金额(元)',
|
||
'未开票金额(元)',
|
||
'充值总额(元)',
|
||
'当前余额(元)',
|
||
'结算方式'
|
||
];
|
||
var body = dataSource.map(function (r) {
|
||
return [
|
||
r.seq,
|
||
r.region,
|
||
r.stationName,
|
||
r.settlement,
|
||
r.hydrogenKg,
|
||
r.payableAmount,
|
||
r.paidAmount,
|
||
r.unpaidAmount,
|
||
r.invoicedAmount,
|
||
r.uninvoicedAmount,
|
||
r.rechargeTotal,
|
||
r.prepaidBalance
|
||
];
|
||
});
|
||
body.push([
|
||
'合计',
|
||
'',
|
||
'',
|
||
'',
|
||
'',
|
||
Math.round(totals.hydrogenKg * 100) / 100,
|
||
'',
|
||
Math.round(totals.payableAmount * 100) / 100,
|
||
Math.round(totals.paidAmount * 100) / 100,
|
||
Math.round(totals.unpaidAmount * 100) / 100,
|
||
Math.round(totals.invoicedAmount * 100) / 100,
|
||
Math.round(totals.uninvoicedAmount * 100) / 100,
|
||
Math.round(totals.rechargeTotal * 100) / 100,
|
||
Math.round(totals.prepaidBalance * 100) / 100
|
||
]);
|
||
downloadCsv('氢费采购端汇总报表_' + new Date().getTime() + '.csv', [headers].concat(body));
|
||
message.success('已导出 CSV');
|
||
}, [dataSource, totals]);
|
||
|
||
var columns = useMemo(function () {
|
||
var w = columnWidths;
|
||
return [
|
||
{
|
||
title: makeResizableTitle('序号', 'seq'),
|
||
dataIndex: 'seq',
|
||
key: 'seq',
|
||
width: w.seq,
|
||
align: 'center',
|
||
fixed: 'left'
|
||
},
|
||
{
|
||
title: makeResizableTitle('地区', 'region'),
|
||
dataIndex: 'region',
|
||
key: 'region',
|
||
width: w.region,
|
||
align: 'center',
|
||
ellipsis: true
|
||
},
|
||
{
|
||
title: makeResizableTitle('加氢站全称', 'stationName'),
|
||
dataIndex: 'stationName',
|
||
key: 'stationName',
|
||
width: w.stationName,
|
||
align: 'left',
|
||
ellipsis: true
|
||
},
|
||
{
|
||
title: makeResizableTitle('结算方式', 'settlement'),
|
||
dataIndex: 'settlement',
|
||
key: 'settlement',
|
||
width: w.settlement,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: makeResizableTitle('加氢总量(kg)', 'hydrogenKg'),
|
||
dataIndex: 'hydrogenKg',
|
||
key: 'hydrogenKg',
|
||
width: w.hydrogenKg,
|
||
align: 'right',
|
||
render: function (v, record) {
|
||
return renderDrillLink(fmtQty(v), record, 'hydrogenKg');
|
||
}
|
||
},
|
||
{
|
||
title: makeResizableTitle('应付总金额(元)', 'payableAmount'),
|
||
dataIndex: 'payableAmount',
|
||
key: 'payableAmount',
|
||
width: w.payableAmount,
|
||
align: 'right',
|
||
render: function (v, record) {
|
||
return renderDrillLink(fmtMoney(v, 2), record, 'payableAmount');
|
||
}
|
||
},
|
||
{
|
||
title: makeResizableTitle('已付总金额(元)', 'paidAmount'),
|
||
dataIndex: 'paidAmount',
|
||
key: 'paidAmount',
|
||
width: w.paidAmount,
|
||
align: 'right',
|
||
render: function (v, record) {
|
||
return renderDrillLinkWithHandler(fmtMoney(v, 2), record, openPaymentDrill);
|
||
}
|
||
},
|
||
{
|
||
title: makeResizableTitle('未付总金额(元)', 'unpaidAmount'),
|
||
dataIndex: 'unpaidAmount',
|
||
key: 'unpaidAmount',
|
||
width: w.unpaidAmount,
|
||
align: 'right',
|
||
render: renderUnpaidAmountCell
|
||
},
|
||
{
|
||
title: makeResizableTitle('已开票金额(元)', 'invoicedAmount'),
|
||
dataIndex: 'invoicedAmount',
|
||
key: 'invoicedAmount',
|
||
width: w.invoicedAmount,
|
||
align: 'right',
|
||
render: function (v, record) {
|
||
return renderDrillLinkWithHandler(fmtMoney(v, 2), record, openInvoiceDrill);
|
||
}
|
||
},
|
||
{
|
||
title: makeResizableTitle('未开票金额(元)', 'uninvoicedAmount'),
|
||
dataIndex: 'uninvoicedAmount',
|
||
key: 'uninvoicedAmount',
|
||
width: w.uninvoicedAmount,
|
||
align: 'right',
|
||
render: renderUninvoicedAmountCell
|
||
},
|
||
{
|
||
title: makeResizableTitle('充值总额(元)', 'rechargeTotal'),
|
||
dataIndex: 'rechargeTotal',
|
||
key: 'rechargeTotal',
|
||
width: w.rechargeTotal,
|
||
align: 'right',
|
||
render: function (v, record) {
|
||
return renderDrillLinkWithHandler(fmtMoney(v, 2), record, openRechargeDrill);
|
||
}
|
||
},
|
||
{
|
||
title: makeResizableTitle('当前余额(元)', 'prepaidBalance'),
|
||
dataIndex: 'prepaidBalance',
|
||
key: 'prepaidBalance',
|
||
width: w.prepaidBalance,
|
||
align: 'right',
|
||
className: 'h2-col-prepaid-balance',
|
||
onCell: function () {
|
||
return { className: 'h2-cell-prepaid-balance' };
|
||
},
|
||
render: renderPrepaidBalanceCell
|
||
}
|
||
];
|
||
}, [
|
||
columnWidths,
|
||
makeResizableTitle,
|
||
renderDrillLink,
|
||
renderDrillLinkWithHandler,
|
||
openPaymentDrill,
|
||
openInvoiceDrill,
|
||
openRechargeDrill,
|
||
renderUnpaidAmountCell,
|
||
renderUninvoicedAmountCell,
|
||
renderPrepaidBalanceCell
|
||
]);
|
||
|
||
var detailDrillBaseColumns = useMemo(function () {
|
||
return [
|
||
{ title: '序号', dataIndex: 'seq', key: 'seq', width: 56, align: 'center' },
|
||
{
|
||
title: '加氢时间',
|
||
dataIndex: 'hydrogenTime',
|
||
key: 'hydrogenTime',
|
||
width: 168,
|
||
align: 'center',
|
||
render: function (v) { return formatDateTime(v); }
|
||
},
|
||
{
|
||
title: '订单编号',
|
||
dataIndex: 'orderNo',
|
||
key: 'orderNo',
|
||
width: 168,
|
||
align: 'center',
|
||
render: function (v) {
|
||
return React.createElement('span', { style: { fontFamily: 'monospace', fontSize: 12 } }, v || '—');
|
||
}
|
||
},
|
||
{ title: '车牌号', dataIndex: 'plateNo', key: 'plateNo', width: 108, align: 'center' }
|
||
];
|
||
}, []);
|
||
|
||
var detailDrillQtyColumn = useMemo(function () {
|
||
return {
|
||
title: '加氢量(kg)',
|
||
dataIndex: 'hydrogenKg',
|
||
key: 'hydrogenKg',
|
||
width: 100,
|
||
align: 'right',
|
||
render: function (v) { return fmtQty(v); }
|
||
};
|
||
}, []);
|
||
|
||
var detailDrillCostColumns = useMemo(function () {
|
||
return [
|
||
{
|
||
title: '成本单价(元/kg)',
|
||
dataIndex: 'costUnitPrice',
|
||
key: 'costUnitPrice',
|
||
width: 120,
|
||
align: 'right',
|
||
render: function (v) { return fmtMoney(v, 2); }
|
||
},
|
||
{
|
||
title: '成本总价(元)',
|
||
dataIndex: 'costTotal',
|
||
key: 'costTotal',
|
||
width: 110,
|
||
align: 'right',
|
||
render: function (v) { return fmtMoney(v, 2); }
|
||
}
|
||
];
|
||
}, []);
|
||
|
||
var detailDrillColumns = useMemo(
|
||
function () {
|
||
if (detailDrillModal.type === 'payableAmount') {
|
||
return detailDrillBaseColumns.concat([detailDrillQtyColumn], detailDrillCostColumns);
|
||
}
|
||
return detailDrillBaseColumns.concat([detailDrillQtyColumn]);
|
||
},
|
||
[detailDrillModal.type, detailDrillBaseColumns, detailDrillQtyColumn, detailDrillCostColumns]
|
||
);
|
||
|
||
var detailDrillSummary = useMemo(function () {
|
||
if (!detailDrillModal.rows || !detailDrillModal.rows.length) {
|
||
return { hydrogenKg: 0, costTotal: 0 };
|
||
}
|
||
return detailDrillModal.rows.reduce(
|
||
function (acc, r) {
|
||
acc.hydrogenKg += numOrZero(r.hydrogenKg);
|
||
acc.costTotal += numOrZero(r.costTotal);
|
||
return acc;
|
||
},
|
||
{ hydrogenKg: 0, costTotal: 0 }
|
||
);
|
||
}, [detailDrillModal.rows]);
|
||
|
||
var detailDrillTableSummary = useCallback(function () {
|
||
if (detailDrillModal.type === 'payableAmount') {
|
||
return React.createElement(
|
||
Table.Summary,
|
||
null,
|
||
React.createElement(
|
||
Table.Summary.Row,
|
||
null,
|
||
React.createElement(Table.Summary.Cell, { index: 0, align: 'center' }, '合计'),
|
||
React.createElement(Table.Summary.Cell, { index: 1, colSpan: 3 }),
|
||
React.createElement(Table.Summary.Cell, { index: 4, align: 'right' }, fmtQty(detailDrillSummary.hydrogenKg)),
|
||
React.createElement(Table.Summary.Cell, { index: 5 }),
|
||
React.createElement(Table.Summary.Cell, { index: 6, align: 'right' }, fmtMoney(detailDrillSummary.costTotal, 2))
|
||
)
|
||
);
|
||
}
|
||
return React.createElement(
|
||
Table.Summary,
|
||
null,
|
||
React.createElement(
|
||
Table.Summary.Row,
|
||
null,
|
||
React.createElement(Table.Summary.Cell, { index: 0, align: 'center' }, '合计'),
|
||
React.createElement(Table.Summary.Cell, { index: 1, colSpan: 3 }),
|
||
React.createElement(Table.Summary.Cell, { index: 4, align: 'right' }, fmtQty(detailDrillSummary.hydrogenKg))
|
||
)
|
||
);
|
||
}, [detailDrillModal.type, detailDrillSummary]);
|
||
|
||
var detailDrillTitle = useMemo(function () {
|
||
if (!detailDrillModal.open) return '';
|
||
var name = detailDrillModal.stationName ? ' · ' + detailDrillModal.stationName : '';
|
||
return (detailDrillModal.type === 'payableAmount' ? '应付总金额明细' : '加氢量明细') + name;
|
||
}, [detailDrillModal]);
|
||
|
||
var renderTotalsBar = useCallback(function () {
|
||
var items = [
|
||
{ key: 'hydrogenKg', label: '加氢总量(kg)', value: fmtQty(totals.hydrogenKg) },
|
||
{ key: 'payableAmount', label: '应付总金额(元)', value: fmtMoney(totals.payableAmount, 2) },
|
||
{ key: 'paidAmount', label: '已付总金额(元)', value: fmtMoney(totals.paidAmount, 2) },
|
||
{
|
||
key: 'unpaidAmount',
|
||
label: '未付总金额(元)',
|
||
value: fmtMoney(totals.unpaidAmount, 2),
|
||
warn: numOrZero(totals.unpaidAmount) > 0
|
||
},
|
||
{
|
||
key: 'uninvoicedAmount',
|
||
label: '未开票总金额(元)',
|
||
value: fmtMoney(totals.uninvoicedAmount, 2),
|
||
warn: numOrZero(totals.uninvoicedAmount) > 0
|
||
},
|
||
{ key: 'rechargeTotal', label: '充值总额(元)', value: fmtMoney(totals.rechargeTotal, 2) },
|
||
{
|
||
key: 'prepaidBalance',
|
||
label: '当前总余额(元)',
|
||
value: fmtMoney(totals.prepaidBalance, 2),
|
||
warn: numOrZero(totals.prepaidBalance) < 0
|
||
}
|
||
];
|
||
return React.createElement(
|
||
'div',
|
||
{ className: 'h2-ledger-totals-bar' },
|
||
React.createElement('div', { className: 'h2-ledger-totals-bar__title' }, '合计'),
|
||
React.createElement(
|
||
'div',
|
||
{ className: 'h2-ledger-totals-bar__items' },
|
||
items.map(function (item) {
|
||
return React.createElement(
|
||
'div',
|
||
{ key: item.key, className: 'h2-ledger-totals-bar__item' },
|
||
React.createElement('div', { className: 'h2-ledger-totals-bar__label' }, item.label),
|
||
React.createElement(
|
||
'div',
|
||
{
|
||
className:
|
||
'h2-ledger-totals-bar__value' + (item.warn ? ' is-warn' : '')
|
||
},
|
||
item.value
|
||
)
|
||
);
|
||
})
|
||
)
|
||
);
|
||
}, [totals]);
|
||
|
||
var prepaidBalanceDrillColumns = useMemo(function () {
|
||
return [
|
||
{
|
||
title: '加氢站全称',
|
||
dataIndex: 'stationName',
|
||
key: 'stationName',
|
||
width: 220,
|
||
ellipsis: true
|
||
},
|
||
{
|
||
title: '收入金额(元)',
|
||
dataIndex: 'incomeAmount',
|
||
key: 'incomeAmount',
|
||
width: 120,
|
||
align: 'right',
|
||
render: function (v) { return fmtLedgerMoney(v); }
|
||
},
|
||
{
|
||
title: '支出金额(元)',
|
||
dataIndex: 'expenseAmount',
|
||
key: 'expenseAmount',
|
||
width: 120,
|
||
align: 'right',
|
||
render: function (v) { return fmtLedgerMoney(v); }
|
||
},
|
||
{
|
||
title: '余额(元)',
|
||
dataIndex: 'balance',
|
||
key: 'balance',
|
||
width: 120,
|
||
align: 'right',
|
||
render: function (v) {
|
||
var n = numOrZero(v);
|
||
var style = n < 0 ? { color: '#cf1322', fontWeight: 600 } : undefined;
|
||
return React.createElement('span', { style: style }, fmtMoney(v, 2));
|
||
}
|
||
},
|
||
{
|
||
title: '订单编号',
|
||
dataIndex: 'orderNo',
|
||
key: 'orderNo',
|
||
width: 168,
|
||
align: 'center',
|
||
render: function (v) {
|
||
return React.createElement('span', { style: { fontFamily: 'monospace', fontSize: 12 } }, v || '—');
|
||
}
|
||
}
|
||
];
|
||
}, []);
|
||
|
||
var prepaidBalanceDrillSummary = useMemo(function () {
|
||
if (!prepaidBalanceDrillModal.rows || !prepaidBalanceDrillModal.rows.length) {
|
||
return { incomeTotal: 0, expenseTotal: 0, endingBalance: 0 };
|
||
}
|
||
var last = prepaidBalanceDrillModal.rows[prepaidBalanceDrillModal.rows.length - 1];
|
||
return prepaidBalanceDrillModal.rows.reduce(
|
||
function (acc, r) {
|
||
acc.incomeTotal += numOrZero(r.incomeAmount);
|
||
acc.expenseTotal += numOrZero(r.expenseAmount);
|
||
return acc;
|
||
},
|
||
{ incomeTotal: 0, expenseTotal: 0, endingBalance: numOrZero(last.balance) }
|
||
);
|
||
}, [prepaidBalanceDrillModal.rows]);
|
||
|
||
var prepaidBalanceDrillTableSummary = useCallback(function () {
|
||
return React.createElement(
|
||
Table.Summary,
|
||
null,
|
||
React.createElement(
|
||
Table.Summary.Row,
|
||
null,
|
||
React.createElement(Table.Summary.Cell, { index: 0, align: 'center' }, '合计'),
|
||
React.createElement(
|
||
Table.Summary.Cell,
|
||
{ index: 1, align: 'right' },
|
||
fmtMoney(prepaidBalanceDrillSummary.incomeTotal, 2)
|
||
),
|
||
React.createElement(
|
||
Table.Summary.Cell,
|
||
{ index: 2, align: 'right' },
|
||
fmtMoney(prepaidBalanceDrillSummary.expenseTotal, 2)
|
||
),
|
||
React.createElement(
|
||
Table.Summary.Cell,
|
||
{ index: 3, align: 'right' },
|
||
fmtMoney(prepaidBalanceDrillSummary.endingBalance, 2)
|
||
),
|
||
React.createElement(Table.Summary.Cell, { index: 4 })
|
||
)
|
||
);
|
||
}, [prepaidBalanceDrillSummary]);
|
||
|
||
var rechargeDrillColumns = useMemo(
|
||
function () {
|
||
return [
|
||
{
|
||
title: '加氢站全称',
|
||
dataIndex: 'stationName',
|
||
key: 'stationName',
|
||
width: 220,
|
||
ellipsis: true
|
||
},
|
||
{
|
||
title: '支付时间',
|
||
dataIndex: 'payTime',
|
||
key: 'payTime',
|
||
width: 120,
|
||
align: 'center',
|
||
render: function (v) { return formatDate(v); }
|
||
},
|
||
{
|
||
title: '预充金额(元)',
|
||
dataIndex: 'prepayAmount',
|
||
key: 'prepayAmount',
|
||
width: 120,
|
||
align: 'right',
|
||
render: function (v) { return fmtMoney(v, 2); }
|
||
},
|
||
{
|
||
title: '付款凭证',
|
||
key: 'voucher',
|
||
width: 160,
|
||
align: 'center',
|
||
render: function (_, row) {
|
||
if (!row.voucherUrl) return '—';
|
||
var file = {
|
||
url: row.voucherUrl,
|
||
fileName: row.voucherFileName,
|
||
mime: row.voucherMime || 'image',
|
||
title: row.voucherFileName || '付款凭证'
|
||
};
|
||
return React.createElement(
|
||
Space,
|
||
{ size: 4, wrap: true, style: { justifyContent: 'center' } },
|
||
React.createElement(
|
||
Button,
|
||
{
|
||
type: 'link',
|
||
size: 'small',
|
||
style: { padding: 0 },
|
||
onClick: function () {
|
||
openAttachmentPreview({
|
||
url: file.url,
|
||
title: file.title,
|
||
mime: file.mime
|
||
});
|
||
}
|
||
},
|
||
'预览'
|
||
),
|
||
React.createElement(
|
||
Button,
|
||
{
|
||
type: 'link',
|
||
size: 'small',
|
||
style: { padding: 0 },
|
||
onClick: function () {
|
||
downloadAttachment(file);
|
||
}
|
||
},
|
||
'下载'
|
||
)
|
||
);
|
||
}
|
||
}
|
||
];
|
||
},
|
||
[openAttachmentPreview, downloadAttachment]
|
||
);
|
||
|
||
var rechargeDrillSummary = useMemo(function () {
|
||
if (!rechargeDrillModal.rows || !rechargeDrillModal.rows.length) {
|
||
return { prepayAmount: 0 };
|
||
}
|
||
return rechargeDrillModal.rows.reduce(
|
||
function (acc, r) {
|
||
acc.prepayAmount += numOrZero(r.prepayAmount);
|
||
return acc;
|
||
},
|
||
{ prepayAmount: 0 }
|
||
);
|
||
}, [rechargeDrillModal.rows]);
|
||
|
||
var rechargeDrillTableSummary = useCallback(function () {
|
||
return React.createElement(
|
||
Table.Summary,
|
||
null,
|
||
React.createElement(
|
||
Table.Summary.Row,
|
||
null,
|
||
React.createElement(Table.Summary.Cell, { index: 0, align: 'center' }, '合计'),
|
||
React.createElement(Table.Summary.Cell, { index: 1 }),
|
||
React.createElement(
|
||
Table.Summary.Cell,
|
||
{ index: 2, align: 'right' },
|
||
fmtMoney(rechargeDrillSummary.prepayAmount, 2)
|
||
),
|
||
React.createElement(Table.Summary.Cell, { index: 3 })
|
||
)
|
||
);
|
||
}, [rechargeDrillSummary]);
|
||
|
||
var paymentDrillColumns = useMemo(
|
||
function () {
|
||
return [
|
||
{
|
||
title: '加氢站全称',
|
||
dataIndex: 'stationName',
|
||
key: 'stationName',
|
||
width: 220,
|
||
ellipsis: true
|
||
},
|
||
{
|
||
title: '账单开始时间',
|
||
dataIndex: 'billStartDate',
|
||
key: 'billStartDate',
|
||
width: 120,
|
||
align: 'center',
|
||
render: function (v) { return formatDate(v); }
|
||
},
|
||
{
|
||
title: '账单结束时间',
|
||
dataIndex: 'billEndDate',
|
||
key: 'billEndDate',
|
||
width: 120,
|
||
align: 'center',
|
||
render: function (v) { return formatDate(v); }
|
||
},
|
||
{
|
||
title: '应付总金额(元)',
|
||
dataIndex: 'payableAmount',
|
||
key: 'payableAmount',
|
||
width: 120,
|
||
align: 'right',
|
||
render: function (v) { return fmtMoney(v, 2); }
|
||
},
|
||
{
|
||
title: '已付总金额(元)',
|
||
dataIndex: 'paidAmount',
|
||
key: 'paidAmount',
|
||
width: 140,
|
||
align: 'right',
|
||
render: function (v) { return fmtMoney(v, 2); }
|
||
},
|
||
{
|
||
title: '银行付款证明',
|
||
key: 'voucher',
|
||
width: 130,
|
||
align: 'center',
|
||
render: function (_, row) {
|
||
if (!row.voucherUrl) return '—';
|
||
return React.createElement(
|
||
Button,
|
||
{
|
||
type: 'link',
|
||
size: 'small',
|
||
style: { padding: 0 },
|
||
onClick: function () {
|
||
openAttachmentPreview({
|
||
url: row.voucherUrl,
|
||
title: row.voucherName || '付款凭据',
|
||
mime: row.voucherMime || 'image'
|
||
});
|
||
}
|
||
},
|
||
'查看付款凭据'
|
||
);
|
||
}
|
||
}
|
||
];
|
||
},
|
||
[openAttachmentPreview]
|
||
);
|
||
|
||
var paymentDrillSummary = useMemo(function () {
|
||
if (!paymentDrillModal.rows || !paymentDrillModal.rows.length) {
|
||
return { payableAmount: 0, paidAmount: 0 };
|
||
}
|
||
return paymentDrillModal.rows.reduce(
|
||
function (acc, r) {
|
||
acc.payableAmount += numOrZero(r.payableAmount);
|
||
acc.paidAmount += numOrZero(r.paidAmount);
|
||
return acc;
|
||
},
|
||
{ payableAmount: 0, paidAmount: 0 }
|
||
);
|
||
}, [paymentDrillModal.rows]);
|
||
|
||
var paymentDrillTableSummary = useCallback(function () {
|
||
return React.createElement(
|
||
Table.Summary,
|
||
null,
|
||
React.createElement(
|
||
Table.Summary.Row,
|
||
null,
|
||
React.createElement(Table.Summary.Cell, { index: 0, align: 'center' }, '合计'),
|
||
React.createElement(Table.Summary.Cell, { index: 1, colSpan: 2 }),
|
||
React.createElement(
|
||
Table.Summary.Cell,
|
||
{ index: 3, align: 'right' },
|
||
fmtMoney(paymentDrillSummary.payableAmount, 2)
|
||
),
|
||
React.createElement(
|
||
Table.Summary.Cell,
|
||
{ index: 4, align: 'right' },
|
||
fmtMoney(paymentDrillSummary.paidAmount, 2)
|
||
),
|
||
React.createElement(Table.Summary.Cell, { index: 5 })
|
||
)
|
||
);
|
||
}, [paymentDrillSummary]);
|
||
|
||
var invoiceDrillColumns = useMemo(
|
||
function () {
|
||
return [
|
||
{
|
||
title: '加氢站全称',
|
||
dataIndex: 'stationName',
|
||
key: 'stationName',
|
||
width: 220,
|
||
ellipsis: true
|
||
},
|
||
{
|
||
title: '开票时间',
|
||
dataIndex: 'invoiceTime',
|
||
key: 'invoiceTime',
|
||
width: 168,
|
||
align: 'center',
|
||
render: function (v) { return formatDateTime(v); }
|
||
},
|
||
{
|
||
title: '开票金额(元)',
|
||
dataIndex: 'invoiceAmount',
|
||
key: 'invoiceAmount',
|
||
width: 120,
|
||
align: 'right',
|
||
render: function (v) { return fmtMoney(v, 2); }
|
||
},
|
||
{
|
||
title: '发票',
|
||
key: 'invoiceFile',
|
||
width: 200,
|
||
align: 'center',
|
||
render: function (_, row) {
|
||
if (!row.invoiceUrl) return '—';
|
||
var file = {
|
||
url: row.invoiceUrl,
|
||
fileName: row.invoiceFileName,
|
||
mime: row.invoiceMime || 'image',
|
||
title: row.invoiceFileName || '发票'
|
||
};
|
||
return React.createElement(
|
||
Space,
|
||
{ size: 4, wrap: true, style: { justifyContent: 'center' } },
|
||
React.createElement(
|
||
Button,
|
||
{
|
||
type: 'link',
|
||
size: 'small',
|
||
style: { padding: 0 },
|
||
onClick: function () {
|
||
openAttachmentPreview({
|
||
url: file.url,
|
||
title: file.title,
|
||
mime: file.mime
|
||
});
|
||
}
|
||
},
|
||
'查看发票'
|
||
),
|
||
React.createElement(
|
||
Button,
|
||
{
|
||
type: 'link',
|
||
size: 'small',
|
||
style: { padding: 0 },
|
||
onClick: function () {
|
||
downloadAttachment(file);
|
||
}
|
||
},
|
||
'下载发票'
|
||
)
|
||
);
|
||
}
|
||
}
|
||
];
|
||
},
|
||
[openAttachmentPreview, downloadAttachment]
|
||
);
|
||
|
||
var invoiceDrillSummary = useMemo(function () {
|
||
if (!invoiceDrillModal.rows || !invoiceDrillModal.rows.length) {
|
||
return { invoiceAmount: 0 };
|
||
}
|
||
return invoiceDrillModal.rows.reduce(
|
||
function (acc, r) {
|
||
acc.invoiceAmount += numOrZero(r.invoiceAmount);
|
||
return acc;
|
||
},
|
||
{ invoiceAmount: 0 }
|
||
);
|
||
}, [invoiceDrillModal.rows]);
|
||
|
||
var invoiceDrillTableSummary = useCallback(function () {
|
||
return React.createElement(
|
||
Table.Summary,
|
||
null,
|
||
React.createElement(
|
||
Table.Summary.Row,
|
||
null,
|
||
React.createElement(Table.Summary.Cell, { index: 0, align: 'center' }, '合计'),
|
||
React.createElement(Table.Summary.Cell, { index: 1 }),
|
||
React.createElement(
|
||
Table.Summary.Cell,
|
||
{ index: 2, align: 'right' },
|
||
fmtMoney(invoiceDrillSummary.invoiceAmount, 2)
|
||
),
|
||
React.createElement(Table.Summary.Cell, { index: 3 })
|
||
)
|
||
);
|
||
}, [invoiceDrillSummary]);
|
||
|
||
return React.createElement(
|
||
App,
|
||
null,
|
||
React.createElement('style', null, ledgerTableStyle),
|
||
React.createElement(
|
||
'div',
|
||
{ style: layoutStyle },
|
||
React.createElement(
|
||
'div',
|
||
{
|
||
style: {
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
marginBottom: 12,
|
||
gap: 16
|
||
}
|
||
},
|
||
React.createElement(Breadcrumb, {
|
||
items: [{ title: '台账数据' }, { title: '氢费（采购端）汇总报表' }]
|
||
}),
|
||
React.createElement(
|
||
Button,
|
||
{
|
||
type: 'link',
|
||
style: { padding: 0, flexShrink: 0, fontSize: 14 },
|
||
onClick: function () {
|
||
setReqDetailOpen(true);
|
||
}
|
||
},
|
||
'查看需求说明'
|
||
)
|
||
),
|
||
React.createElement(
|
||
Card,
|
||
{ style: filterCardStyle, bodyStyle: { paddingBottom: 4 } },
|
||
React.createElement(
|
||
Row,
|
||
{ gutter: [16, 0], align: 'bottom' },
|
||
React.createElement(
|
||
Col,
|
||
{ xs: 24, sm: 12, lg: 8 },
|
||
React.createElement(
|
||
'div',
|
||
{ style: filterItemStyle },
|
||
React.createElement('div', { style: filterLabelStyle }, '地区'),
|
||
React.createElement(Select, {
|
||
allowClear: true,
|
||
showSearch: true,
|
||
placeholder: '全部',
|
||
style: filterControlStyle,
|
||
value: regionDraft,
|
||
onChange: function (v) { setRegionDraft(v); },
|
||
options: REGION_OPTIONS,
|
||
filterOption: filterOption
|
||
})
|
||
)
|
||
),
|
||
React.createElement(
|
||
Col,
|
||
{ xs: 24, sm: 12, lg: 8 },
|
||
React.createElement(
|
||
'div',
|
||
{ style: filterItemStyle },
|
||
React.createElement('div', { style: filterLabelStyle }, '加氢站全称'),
|
||
React.createElement(Select, {
|
||
allowClear: true,
|
||
showSearch: true,
|
||
placeholder: '全部',
|
||
style: filterControlStyle,
|
||
value: stationDraft,
|
||
onChange: function (v) { setStationDraft(v); },
|
||
options: STATION_OPTIONS,
|
||
filterOption: filterOption
|
||
})
|
||
)
|
||
),
|
||
React.createElement(
|
||
Col,
|
||
{ xs: 24, sm: 12, lg: 8 },
|
||
React.createElement(
|
||
'div',
|
||
{ style: filterItemStyle },
|
||
React.createElement('div', { style: filterLabelStyle }, '结算方式'),
|
||
React.createElement(Select, {
|
||
allowClear: true,
|
||
placeholder: '全部',
|
||
style: filterControlStyle,
|
||
value: settlementDraft,
|
||
onChange: function (v) { setSettlementDraft(v); },
|
||
options: SETTLEMENT_OPTIONS
|
||
})
|
||
)
|
||
),
|
||
React.createElement(
|
||
Col,
|
||
{ xs: 24, sm: 24, lg: 24, style: Object.assign({}, filterActionsColStyle, { textAlign: 'right' }) },
|
||
React.createElement(
|
||
'div',
|
||
{ style: Object.assign({}, filterItemStyle, { marginBottom: 4 }) },
|
||
React.createElement(
|
||
Space,
|
||
{ wrap: true, style: { justifyContent: 'flex-end', width: '100%' } },
|
||
React.createElement(Button, { onClick: handleReset }, '重置'),
|
||
React.createElement(Button, { type: 'primary', onClick: handleQuery }, '查询')
|
||
)
|
||
)
|
||
)
|
||
)
|
||
),
|
||
React.createElement(
|
||
Card,
|
||
{ style: tableCardStyle, bodyStyle: { padding: '20px 20px 24px' } },
|
||
React.createElement(
|
||
'div',
|
||
{ style: { position: 'relative', marginBottom: 8, minHeight: 36 } },
|
||
React.createElement(
|
||
'div',
|
||
{
|
||
style: {
|
||
textAlign: 'center',
|
||
fontSize: 18,
|
||
fontWeight: 700,
|
||
color: 'rgba(15,23,42,0.92)',
|
||
letterSpacing: '0.02em',
|
||
padding: '0 88px'
|
||
}
|
||
},
|
||
'氢费（采购端）汇总报表'
|
||
),
|
||
React.createElement(
|
||
'div',
|
||
{ style: { position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)' } },
|
||
React.createElement(Button, { onClick: handleExport }, '导出')
|
||
)
|
||
),
|
||
React.createElement(
|
||
'div',
|
||
{
|
||
style: {
|
||
textAlign: 'center',
|
||
marginBottom: 16,
|
||
fontSize: 13,
|
||
color: 'rgba(15,23,42,0.55)',
|
||
fontWeight: 500
|
||
}
|
||
},
|
||
filterSummaryText
|
||
),
|
||
renderTotalsBar(),
|
||
React.createElement(
|
||
'div',
|
||
{ className: 'h2-purchase-summary-wrap' },
|
||
React.createElement(Table, {
|
||
className: 'h2-purchase-summary-table h2-purchase-summary-table--resizable',
|
||
size: 'small',
|
||
bordered: true,
|
||
rowKey: 'key',
|
||
columns: columns,
|
||
dataSource: dataSource,
|
||
pagination: false,
|
||
rowClassName: function () { return 'h2-purchase-row'; },
|
||
scroll: { y: 'calc(100vh - 430px)' },
|
||
sticky: true,
|
||
tableLayout: 'fixed',
|
||
locale: { emptyText: '暂无数据，请调整筛选条件后查询' }
|
||
})
|
||
)
|
||
),
|
||
React.createElement(
|
||
Modal,
|
||
{
|
||
title: detailDrillTitle,
|
||
open: detailDrillModal.open,
|
||
onCancel: closeDetailDrill,
|
||
footer: React.createElement(Button, { onClick: closeDetailDrill }, '关闭'),
|
||
width: 960,
|
||
destroyOnClose: true,
|
||
styles: { body: { maxHeight: '72vh', overflow: 'auto', paddingTop: 8 } }
|
||
},
|
||
React.createElement(Table, {
|
||
className: 'h2-purchase-summary-table',
|
||
size: 'small',
|
||
bordered: true,
|
||
rowKey: 'key',
|
||
pagination: detailDrillModal.rows.length > 10 ? { pageSize: 10, showSizeChanger: false } : false,
|
||
columns: detailDrillColumns,
|
||
dataSource: detailDrillModal.rows,
|
||
summary: detailDrillTableSummary,
|
||
scroll: { x: 'max-content' },
|
||
locale: { emptyText: '暂无明细数据' }
|
||
})
|
||
),
|
||
React.createElement(
|
||
Modal,
|
||
{
|
||
title:
|
||
'充值总额明细' +
|
||
(rechargeDrillModal.stationName ? ' · ' + rechargeDrillModal.stationName : ''),
|
||
open: rechargeDrillModal.open,
|
||
onCancel: closeRechargeDrill,
|
||
footer: React.createElement(Button, { onClick: closeRechargeDrill }, '关闭'),
|
||
width: 880,
|
||
destroyOnClose: true,
|
||
styles: { body: { maxHeight: '72vh', overflow: 'auto', paddingTop: 8 } }
|
||
},
|
||
React.createElement(Table, {
|
||
className: 'h2-purchase-summary-table',
|
||
size: 'small',
|
||
bordered: true,
|
||
rowKey: 'key',
|
||
pagination:
|
||
rechargeDrillModal.rows.length > 10
|
||
? { pageSize: 10, showSizeChanger: false }
|
||
: false,
|
||
columns: rechargeDrillColumns,
|
||
dataSource: rechargeDrillModal.rows,
|
||
summary: rechargeDrillTableSummary,
|
||
scroll: { x: 'max-content' },
|
||
locale: { emptyText: '暂无充值记录' }
|
||
})
|
||
),
|
||
React.createElement(
|
||
Modal,
|
||
{
|
||
title:
|
||
'余额变更明细' +
|
||
(prepaidBalanceDrillModal.stationName ? ' · ' + prepaidBalanceDrillModal.stationName : ''),
|
||
open: prepaidBalanceDrillModal.open,
|
||
onCancel: closePrepaidBalanceDrill,
|
||
footer: React.createElement(Button, { onClick: closePrepaidBalanceDrill }, '关闭'),
|
||
width: 880,
|
||
destroyOnClose: true,
|
||
styles: { body: { maxHeight: '72vh', overflow: 'auto', paddingTop: 8 } }
|
||
},
|
||
React.createElement(Table, {
|
||
className: 'h2-purchase-summary-table',
|
||
size: 'small',
|
||
bordered: true,
|
||
rowKey: 'key',
|
||
pagination:
|
||
prepaidBalanceDrillModal.rows.length > 10
|
||
? { pageSize: 10, showSizeChanger: false }
|
||
: false,
|
||
columns: prepaidBalanceDrillColumns,
|
||
dataSource: prepaidBalanceDrillModal.rows,
|
||
summary: prepaidBalanceDrillTableSummary,
|
||
scroll: { x: 'max-content' },
|
||
locale: { emptyText: '暂无余额变更记录' }
|
||
})
|
||
),
|
||
React.createElement(
|
||
Modal,
|
||
{
|
||
title:
|
||
'已付总金额明细' +
|
||
(paymentDrillModal.stationName ? ' · ' + paymentDrillModal.stationName : ''),
|
||
open: paymentDrillModal.open,
|
||
onCancel: closePaymentDrill,
|
||
footer: React.createElement(Button, { onClick: closePaymentDrill }, '关闭'),
|
||
width: 1020,
|
||
destroyOnClose: true,
|
||
styles: { body: { maxHeight: '72vh', overflow: 'auto', paddingTop: 8 } }
|
||
},
|
||
React.createElement(Table, {
|
||
className: 'h2-purchase-summary-table',
|
||
size: 'small',
|
||
bordered: true,
|
||
rowKey: 'key',
|
||
pagination:
|
||
paymentDrillModal.rows.length > 10
|
||
? { pageSize: 10, showSizeChanger: false }
|
||
: false,
|
||
columns: paymentDrillColumns,
|
||
dataSource: paymentDrillModal.rows,
|
||
summary: paymentDrillTableSummary,
|
||
scroll: { x: 'max-content' },
|
||
locale: { emptyText: '暂无支付明细' }
|
||
})
|
||
),
|
||
React.createElement(
|
||
Modal,
|
||
{
|
||
title:
|
||
'已开票明细' + (invoiceDrillModal.stationName ? ' · ' + invoiceDrillModal.stationName : ''),
|
||
open: invoiceDrillModal.open,
|
||
onCancel: closeInvoiceDrill,
|
||
footer: React.createElement(Button, { onClick: closeInvoiceDrill }, '关闭'),
|
||
width: 920,
|
||
destroyOnClose: true,
|
||
styles: { body: { maxHeight: '72vh', overflow: 'auto', paddingTop: 8 } }
|
||
},
|
||
React.createElement(Table, {
|
||
className: 'h2-purchase-summary-table',
|
||
size: 'small',
|
||
bordered: true,
|
||
rowKey: 'key',
|
||
pagination:
|
||
invoiceDrillModal.rows.length > 10
|
||
? { pageSize: 10, showSizeChanger: false }
|
||
: false,
|
||
columns: invoiceDrillColumns,
|
||
dataSource: invoiceDrillModal.rows,
|
||
summary: invoiceDrillTableSummary,
|
||
scroll: { x: 'max-content' },
|
||
locale: { emptyText: '暂无开票记录' }
|
||
})
|
||
),
|
||
React.createElement(
|
||
Modal,
|
||
{
|
||
title: attachmentPreview.title || '附件预览',
|
||
open: attachmentPreview.open,
|
||
onCancel: closeAttachmentPreview,
|
||
footer: React.createElement(Button, { onClick: closeAttachmentPreview }, '关闭'),
|
||
width: attachmentPreview.mime === 'pdf' ? 920 : 720,
|
||
destroyOnClose: true,
|
||
centered: true,
|
||
styles: { body: { paddingTop: 12, textAlign: 'center' } }
|
||
},
|
||
attachmentPreview.mime === 'pdf'
|
||
? React.createElement('iframe', {
|
||
src: attachmentPreview.url,
|
||
title: attachmentPreview.title,
|
||
style: { width: '100%', height: '70vh', border: 'none' }
|
||
})
|
||
: React.createElement('img', {
|
||
src: attachmentPreview.url,
|
||
alt: attachmentPreview.title,
|
||
style: { maxWidth: '100%', maxHeight: '70vh', objectFit: 'contain' }
|
||
})
|
||
),
|
||
React.createElement(
|
||
Modal,
|
||
{
|
||
title: '氢费（采购端）汇总报表 — 需求说明',
|
||
open: reqDetailOpen,
|
||
onCancel: function () {
|
||
setReqDetailOpen(false);
|
||
},
|
||
footer: React.createElement(
|
||
Button,
|
||
{
|
||
type: 'primary',
|
||
onClick: function () {
|
||
setReqDetailOpen(false);
|
||
}
|
||
},
|
||
'知道了'
|
||
),
|
||
width: 840,
|
||
centered: true,
|
||
destroyOnClose: true,
|
||
styles: {
|
||
body: {
|
||
maxHeight: '72vh',
|
||
overflow: 'auto',
|
||
paddingTop: 8,
|
||
paddingBottom: 16
|
||
}
|
||
}
|
||
},
|
||
renderPurchaseRequirementDocPanel()
|
||
)
|
||
)
|
||
);
|
||
};
|