Compare commits
7 Commits
ca45fa19ca
...
76fadd0508
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
76fadd0508 | ||
|
|
c3691be29d | ||
|
|
7987536ea9 | ||
|
|
c40d18706c | ||
|
|
305199c508 | ||
|
|
d2a7cc188d | ||
|
|
47c223a666 |
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"version": 1,
|
||||
"updatedAt": "2026-07-15T00:52:00.000Z",
|
||||
"updatedAt": "2026-07-18T02:30:01.518Z",
|
||||
"prototypes": [
|
||||
{
|
||||
"id": "folder-1783875936186-27raza",
|
||||
@@ -13,12 +13,6 @@
|
||||
"title": "业务管理",
|
||||
"itemKey": "prototypes/oneos-web-business"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-contract-template",
|
||||
"kind": "item",
|
||||
"title": "合同模板管理",
|
||||
"itemKey": "prototypes/oneos-web-contract-template"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-data-analysis",
|
||||
"kind": "item",
|
||||
@@ -31,12 +25,6 @@
|
||||
"title": "财务管理(合包)",
|
||||
"itemKey": "prototypes/oneos-web-finance"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-h2-station",
|
||||
"kind": "item",
|
||||
"title": "加氢站管理",
|
||||
"itemKey": "prototypes/oneos-web-h2-station"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-help-center",
|
||||
"kind": "item",
|
||||
@@ -120,7 +108,7 @@
|
||||
{
|
||||
"id": "folder-1782874599304-roj8fd",
|
||||
"kind": "folder",
|
||||
"title": "运维管理",
|
||||
"title": "车辆资产",
|
||||
"children": [
|
||||
{
|
||||
"id": "item:prototypes:vehicle-management",
|
||||
@@ -186,10 +174,16 @@
|
||||
"itemKey": "prototypes/oneos-web-h2-station-site"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-h2-station-weekly",
|
||||
"id": "item:prototypes:oneos-h5-h2-order",
|
||||
"kind": "item",
|
||||
"title": "站点周报统计",
|
||||
"itemKey": "prototypes/oneos-web-h2-station-weekly"
|
||||
"title": "加氢记录(H5)",
|
||||
"itemKey": "prototypes/oneos-h5-h2-order"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-h2-station",
|
||||
"kind": "item",
|
||||
"title": "加氢记录",
|
||||
"itemKey": "prototypes/oneos-web-h2-station"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -201,8 +195,20 @@
|
||||
{
|
||||
"id": "item:prototypes:business-dept-ledger",
|
||||
"kind": "item",
|
||||
"title": "业务部台账",
|
||||
"title": "项目盈亏情况",
|
||||
"itemKey": "prototypes/business-dept-ledger"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-h2-station-stats",
|
||||
"kind": "item",
|
||||
"title": "加氢站数量统计",
|
||||
"itemKey": "prototypes/oneos-web-h2-station-stats"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:customer-payment-collection",
|
||||
"kind": "item",
|
||||
"title": "客户回款情况",
|
||||
"itemKey": "prototypes/customer-payment-collection"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -265,12 +271,6 @@
|
||||
"kind": "item",
|
||||
"title": "还车应结款",
|
||||
"itemKey": "prototypes/vehicle-return-settlement"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:vehicle-return-settlement-v2",
|
||||
"kind": "item",
|
||||
"title": "还车应结款-新",
|
||||
"itemKey": "prototypes/vehicle-return-settlement-v2"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -287,6 +287,19 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "folder-1784341576489-spa7ms",
|
||||
"kind": "folder",
|
||||
"title": "审批中心",
|
||||
"children": [
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-approval",
|
||||
"kind": "item",
|
||||
"title": "审批中心",
|
||||
"itemKey": "prototypes/oneos-web-approval"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:lease-business-line-overview",
|
||||
"kind": "item",
|
||||
|
||||
37
.cursor/rules/business-logic-documentation.mdc
Normal file
37
.cursor/rules/business-logic-documentation.mdc
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
description: 复杂业务/判断逻辑必须同步写入 PRD 与 .spec Markdown,并同步标注目录
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# 业务逻辑文档化(全局强制)
|
||||
|
||||
实现或修改**复杂判断逻辑**时,代码与文档**同一轮交付**。完整指南:`rules/business-logic-documentation-guide.md`。
|
||||
|
||||
## 触发条件(满足任一即必须文档化)
|
||||
|
||||
多步判定链、跨模块校验、状态/公式推导、导入保存规则、权限分支、一键修复建议值。
|
||||
|
||||
## 必须更新的文件
|
||||
|
||||
1. **`src/prototypes/<name>/.spec/<topic>.md`** — 完整规则(判定顺序、数据源、边界、代码路径)
|
||||
2. **`src/prototypes/<name>/.spec/requirements-prd.md`** — 摘要表 + §验收项 + 链接到规格全文
|
||||
3. **`annotation-source.json`** — 运行 `sync-annotation-directory.mjs` 同步目录/字段标注
|
||||
4. 字段级:`columnHeaderTips.ts` 或对应 `annotationText`(如有)
|
||||
|
||||
## 规格文最低要求
|
||||
|
||||
- 判定**优先级顺序**(表格)
|
||||
- **前置条件**(何时不校验)
|
||||
- **数据源**(种子 JSON / 哪几个模块)
|
||||
- 用户可见结果(通过/警告文案、是否可替换)
|
||||
- 标明原型本地种子 vs 未接真实 API
|
||||
|
||||
## 禁止
|
||||
|
||||
- 只改 `utils/*.ts` 不更新 PRD / `.spec`
|
||||
- 口头解释替代 Markdown
|
||||
- 验收通过时 PRD 与页面行为不一致
|
||||
|
||||
## 范例
|
||||
|
||||
`lease-business-detail`:`.spec/field-checks.md` + PRD §5 单元格系统校验 + 目录「单元格系统校验」
|
||||
31
.cursor/rules/cloud-publish-url.mdc
Normal file
31
.cursor/rules/cloud-publish-url.mdc
Normal file
@@ -0,0 +1,31 @@
|
||||
---
|
||||
description: 对象存储发布 URL 必须与 Make 工具一致,禁止改后缀或加 prototypes/ 前缀
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# 对象存储发布 URL(全局强制)
|
||||
|
||||
完整规范:`rules/cloud-publish-url-guide.md`。配置:`.axhub/make/axhub.config.json` → `cloudPublishing.s3`。
|
||||
|
||||
## 标准形态
|
||||
|
||||
```text
|
||||
{baseUrl}/{prototype-id}/index.html
|
||||
```
|
||||
|
||||
示例:`https://prototype.lnoneos.com/lease-business-detail/index.html`
|
||||
|
||||
## 禁止(Agent 发布或写链接时)
|
||||
|
||||
- 不得改为 `/prototypes/{id}/index.html`
|
||||
- 不得去掉 `/index.html` 后缀
|
||||
- 不得自改 `baseUrl` 域名
|
||||
- 不得把本地 dev 路径 `/prototypes/...` 当作已发布链接写入 PRD/导航/registry
|
||||
|
||||
## 脚本发布
|
||||
|
||||
使用 `scripts/publish-all-to-s3.mjs`;`resolveObjectPrefix` 已与 Make 对齐为扁平 `{prototype-id}`。
|
||||
|
||||
## 回报用户
|
||||
|
||||
发布成功后给出的 URL 须与 Make「已发布到对象存储」弹窗**完全一致**。
|
||||
@@ -20,6 +20,8 @@
|
||||
| 主题 | `src/themes/<theme-key>/` | `rules/theme-guide.md` |
|
||||
| 项目资料和文档 | `src/resources/` | `rules/resource-management-guide.md` |
|
||||
| 画布 | `src/prototypes/<prototype-name>/canvas.excalidraw`、`canvas-assets/` | 原型画布和画布素材 |
|
||||
| 业务逻辑规格 | `src/prototypes/<prototype-name>/.spec/<topic>.md` | `rules/business-logic-documentation-guide.md` |
|
||||
| 对象存储发布 URL | `.axhub/make/axhub.config.json` → `cloudPublishing.s3` | `rules/cloud-publish-url-guide.md` |
|
||||
| 原型标注布局 | `src/common/prototype-annotation-host.tsx` | `rules/prototype-annotation-layout-guide.md` |
|
||||
|
||||
## ⚠️ 重要原则
|
||||
@@ -41,6 +43,11 @@
|
||||
6. **讲人话,用户不懂技术**
|
||||
- 用用户能理解的方式说明取舍、风险和结果;用户无法执行 CLI 命令,不得省略验收流程
|
||||
- 向用户请求反馈或验收时,提醒用户尽量提供截图、预览链接、页面路径或具体问题位置,便于准确定位和复现
|
||||
7. **复杂业务逻辑必须文档化**
|
||||
- 多步判定、跨模块校验、状态/公式推导、导入规则等,除代码外必须写入 `.spec/*.md` 与 `requirements-prd.md`,并同步标注目录(见 `rules/business-logic-documentation-guide.md`)
|
||||
- 不得默认「先实现、后补文档」;逻辑变更与 PRD/标注更新同一轮交付
|
||||
8. **对象存储发布 URL 与 Make 工具一致**
|
||||
- 发布或写链接时格式为 `{baseUrl}/{prototype-id}/index.html`;禁止加 `prototypes/` 前缀或去掉 `index.html`(见 `rules/cloud-publish-url-guide.md`)
|
||||
|
||||
## 项目结构
|
||||
|
||||
|
||||
@@ -18,6 +18,8 @@
|
||||
| 项目资料和文档 | `src/resources/` | `rules/resource-management-guide.md` |
|
||||
| UI Review 结论 | `src/prototypes/<prototype-name>/.spec/ui-review.md` | `rules/ui-review-guide.md` |
|
||||
| 原型 Review 结论 | `src/prototypes/<prototype-name>/.spec/prototype-review.md` | `rules/prototype-review-guide.md` |
|
||||
| 业务逻辑规格 | `src/prototypes/<prototype-name>/.spec/<topic>.md` | `rules/business-logic-documentation-guide.md` |
|
||||
| 对象存储发布 URL | `.axhub/make/axhub.config.json` → `cloudPublishing.s3` | `rules/cloud-publish-url-guide.md` |
|
||||
| ACP 对话缓存 | `src/prototypes/<prototype-name>/.spec/acp/` | 本地私有运行数据,不提交、不导出、不发布 |
|
||||
|
||||
## ⚠️ 重要原则
|
||||
@@ -43,6 +45,10 @@
|
||||
- 产品需求、设计方案或原型应尽早交给用户确认,不要等到全部完成后才暴露方向问题
|
||||
6. **讲人话,用户不懂技术**
|
||||
- 用用户能理解的方式说明取舍、风险和结果;用户无法执行 CLI 命令,不得省略验收流程
|
||||
7. **复杂业务逻辑必须文档化**
|
||||
- 多步判定、跨模块校验、状态/公式推导、导入规则等,除代码外必须写入 `.spec/*.md` 与 `requirements-prd.md`,并同步标注目录(见 `rules/business-logic-documentation-guide.md`)
|
||||
8. **对象存储发布 URL 与 Make 工具一致**
|
||||
- `{baseUrl}/{prototype-id}/index.html`;禁止擅自改路径后缀(见 `rules/cloud-publish-url-guide.md`)
|
||||
|
||||
## 项目结构
|
||||
|
||||
|
||||
135
rules/business-logic-documentation-guide.md
Normal file
135
rules/business-logic-documentation-guide.md
Normal file
@@ -0,0 +1,135 @@
|
||||
# 业务逻辑文档化指南(全局)
|
||||
|
||||
凡原型或页面实现**复杂判断逻辑、跨模块校验、状态/公式推导、导入导出规则**时,除代码外**必须**同步写入 Markdown 与 PRD,供评审、标注目录与后续 Agent 读取。
|
||||
|
||||
参考范例:`src/prototypes/lease-business-detail/.spec/field-checks.md` + `requirements-prd.md` §5 单元格系统校验。
|
||||
|
||||
---
|
||||
|
||||
## 何时必须文档化
|
||||
|
||||
满足以下**任一**条件,即视为「复杂业务逻辑」,不得只留在代码或口头说明:
|
||||
|
||||
| 类型 | 示例 |
|
||||
|------|------|
|
||||
| 多步判定 / 优先级链 | 客户名称 5 步校验、收款状态三态 |
|
||||
| 跨模块对照 | 对照客户管理、车辆管理、合同台账 |
|
||||
| 公式 / 聚合口径 | KPI、表尾 SUBTOTAL、应收租金 = 租金 × 月数 |
|
||||
| 状态机 | 未收款 → 部分收款 → 已结清 |
|
||||
| 导入 / 保存拦截 | 重复键策略、实收 ≤ 应收 |
|
||||
| 权限 / 角色分支 | 主管可改、数据范围(若实现) |
|
||||
| 一键修复 / 建议值 | 校验警告 + 替换动作 |
|
||||
|
||||
纯样式、文案、布局微调**不**触发本指南;但若改动会改变上述判定结果,必须更新文档。
|
||||
|
||||
---
|
||||
|
||||
## 文档落点(三层)
|
||||
|
||||
```text
|
||||
src/prototypes/<name>/
|
||||
├── .spec/requirements-prd.md # ① PRD:摘要 + 验收项(产品可读)
|
||||
├── .spec/<logic-topic>.md # ② 规格:完整判定顺序、数据源、边界(开发/评审)
|
||||
├── annotation-source.json # ③ 标注:目录节点 + 页面/字段标注(经同步脚本)
|
||||
└── columnHeaderTips.ts 等 # 可选:表头/字段级一句话提示
|
||||
```
|
||||
|
||||
### ① PRD(`requirements-prd.md`)
|
||||
|
||||
在对应功能章节增加**摘要**,至少包含:
|
||||
|
||||
- 业务目的(一句话)
|
||||
- 判定顺序或状态表(表格优先)
|
||||
- 数据源 / 对照模块
|
||||
- 用户可见结果(图标、文案、是否可一键修复)
|
||||
- 链接到 `.spec/<logic-topic>.md` 全文
|
||||
|
||||
在 **§验收重点** 增加可勾选项。
|
||||
|
||||
### ② 规格 Markdown(`.spec/<logic-topic>.md`)
|
||||
|
||||
完整规则文档,建议结构:
|
||||
|
||||
```markdown
|
||||
# <模块> · <逻辑名称>
|
||||
|
||||
> 实现:`utils/xxx.ts`;UI:`components/xxx.tsx`
|
||||
|
||||
## 对照数据源
|
||||
## 交互与状态(ok / warn / none)
|
||||
## <字段或场景 A> 判定顺序(表格)
|
||||
## <字段或场景 B> …
|
||||
## 启用范围 / 与代码映射
|
||||
```
|
||||
|
||||
要求:
|
||||
|
||||
- **判定顺序**写清优先级(命中即返回)
|
||||
- **前置条件**写清何时不校验
|
||||
- **弱校验 / 强校验**区分标注
|
||||
- 标明原型种子 vs 真实 API(若未接后端)
|
||||
|
||||
### ③ 标注目录(`annotation-source.json`)
|
||||
|
||||
通过 `scripts/sync-annotation-directory.mjs`(或等价脚本)同步:
|
||||
|
||||
| 同步目标 | 内容 |
|
||||
|----------|------|
|
||||
| `directory` → 规格说明 | 全文或 `markdownPath` 指向 `.spec/*.md` |
|
||||
| 页面标注节点 | 功能区摘要(如列表工具栏、明细表) |
|
||||
| 字段标注节点 | 单字段判定摘要(如客户名称) |
|
||||
| `markdownMap` | 与节点 `annotationText` 一致 |
|
||||
|
||||
**禁止**:代码已改、PRD/标注仍写旧逻辑。
|
||||
|
||||
---
|
||||
|
||||
## 实施顺序(与开发绑定)
|
||||
|
||||
```text
|
||||
实现 / 修改业务逻辑代码
|
||||
↓
|
||||
编写或更新 .spec/<logic-topic>.md
|
||||
↓
|
||||
更新 requirements-prd.md 摘要 + 验收项
|
||||
↓
|
||||
更新表头提示 / 字段标注文案(如有)
|
||||
↓
|
||||
运行 sync-annotation-directory.mjs
|
||||
↓
|
||||
验收:目录与 PRD 可读、与页面行为一致
|
||||
```
|
||||
|
||||
逻辑变更与文档变更**同一轮交付**;不得「先合代码、后补文档」作为默认流程。
|
||||
|
||||
---
|
||||
|
||||
## 最小检查清单
|
||||
|
||||
- [ ] 复杂逻辑有独立 `.spec/*.md` 或 PRD 内等价完整章节
|
||||
- [ ] PRD 摘要含判定顺序表 / 状态表
|
||||
- [ ] PRD §验收 含可验证条目
|
||||
- [ ] `annotation-source.json` 目录已同步
|
||||
- [ ] 关键字段在「字段标注」或表头提示有一句业务说明
|
||||
- [ ] 文档标明数据来源(种子 / API / 手工列)
|
||||
- [ ] 代码路径在 PRD §源码入口 或规格文首注明
|
||||
|
||||
---
|
||||
|
||||
## 反例
|
||||
|
||||
| ❌ 不做 | ✅ 应做 |
|
||||
|--------|--------|
|
||||
| 只在 `utils/field-checks.ts` 里写 5 层 if | 同步 `field-checks.md` + PRD §5 摘要 |
|
||||
| 评审时口头解释客户名校验 | 目录「单元格系统校验」可点开全文 |
|
||||
| 改判定顺序不更新 PRD | 同 PR 更新 `.spec` + 跑 sync 脚本 |
|
||||
| 表头提示与真实逻辑矛盾 | 以 `.spec` 为单一真相,提示引用摘要 |
|
||||
|
||||
---
|
||||
|
||||
## 关联规则
|
||||
|
||||
- 产品需求对齐:`rules/requirements-alignment-guide.md`
|
||||
- 原型开发验收:`rules/prototype-development-guide.md`
|
||||
- 标注布局:`rules/prototype-annotation-layout-guide.md`
|
||||
- Agent 门禁:根目录 `AGENTS.md`
|
||||
86
rules/cloud-publish-url-guide.md
Normal file
86
rules/cloud-publish-url-guide.md
Normal file
@@ -0,0 +1,86 @@
|
||||
# 对象存储发布 URL 规范(全局)
|
||||
|
||||
Make 客户端「发布到对象存储」与脚本/Agent 批量发布**必须使用同一套公网路径**,避免维护两套链接。
|
||||
|
||||
配置来源:`.axhub/make/axhub.config.json` → `cloudPublishing.s3`
|
||||
|
||||
---
|
||||
|
||||
## 标准 URL 形态
|
||||
|
||||
```text
|
||||
{baseUrl}/{objectPrefix}/index.html
|
||||
```
|
||||
|
||||
| 项 | 默认值 | 示例 |
|
||||
|---|---|---|
|
||||
| `baseUrl` | `https://prototype.lnoneos.com` | — |
|
||||
| 原型页 `objectPrefix` | `{prototype-id}` | `lease-business-detail` |
|
||||
| 主题页 `objectPrefix` | `themes/{theme-id}` | `themes/claude` |
|
||||
| 入口文件名 | **固定** `index.html` | 不得改为 `/`、`.html` 省略或 `index.htm` |
|
||||
|
||||
**租赁业务明细(范例)**
|
||||
|
||||
```text
|
||||
https://prototype.lnoneos.com/lease-business-detail/index.html
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 禁止的改写
|
||||
|
||||
| ❌ 禁止 | 说明 |
|
||||
|--------|------|
|
||||
| 加 `prototypes/` 前缀 | 不得发布为 `/prototypes/lease-business-detail/index.html` |
|
||||
| 去掉 `index.html` | 不得改为目录根 `/lease-business-detail/` |
|
||||
| 改 `baseUrl` 域名 | 以 `axhub.config.json` 的 `s3.baseUrl` 为准 |
|
||||
| 自造路径别名 | 仅 `pathAliases` 中已声明的 id 可例外 |
|
||||
|
||||
---
|
||||
|
||||
## pathAliases(例外)
|
||||
|
||||
仅在 `axhub.config.json` → `cloudPublishing.s3.pathAliases` 中显式配置时覆盖默认前缀,例如:
|
||||
|
||||
```json
|
||||
"pathAliases": {
|
||||
"oneos-prototype-nav": "oneos-prototype-nav"
|
||||
}
|
||||
```
|
||||
|
||||
新增别名须**同时**更新:
|
||||
|
||||
1. `axhub.config.json` → `pathAliases`
|
||||
2. `src/prototypes/oneos-prototype-nav/nav-data.ts` → `CLOUD_PUBLISH_PATH_ALIASES`
|
||||
3. `prototype-registry.json` 变更说明(如有)
|
||||
|
||||
---
|
||||
|
||||
## 实现对照
|
||||
|
||||
| 场景 | 路径解析 |
|
||||
|------|----------|
|
||||
| Make 客户端发布 | `/{prototype-id}/index.html` |
|
||||
| `scripts/publish-all-to-s3.mjs` | `resolveObjectPrefix()` → 同上 |
|
||||
| 导航页 `resolvePrototypeHref()` | 云主机上 `/{segment}/index.html` |
|
||||
| 本地开发 | `/prototypes/{prototype-id}`(仅 dev,不是发布 URL) |
|
||||
|
||||
---
|
||||
|
||||
## Agent / AI 发布检查清单
|
||||
|
||||
发布或向用户回报链接前:
|
||||
|
||||
- [ ] 使用 `axhub.config.json` 中的 `baseUrl`
|
||||
- [ ] 原型链接以 `/index.html` 结尾
|
||||
- [ ] 未擅自添加 `prototypes/` 前缀
|
||||
- [ ] 与 Make 工具弹窗中的 URL 逐字一致
|
||||
- [ ] 未将 dev 路径(`/prototypes/...`)当作对象存储链接写入 PRD/导航
|
||||
|
||||
---
|
||||
|
||||
## 关联文件
|
||||
|
||||
- `scripts/publish-all-to-s3.mjs` — `resolveObjectPrefix`、`resolvePublicUrl`
|
||||
- `src/prototypes/oneos-prototype-nav/nav-data.ts` — 静态站跳转
|
||||
- `.cursor/rules/cloud-publish-url.mdc` — Agent 强制规则
|
||||
@@ -1,5 +1,7 @@
|
||||
# ONE-OS 全局设计规范(开发版)
|
||||
|
||||
> **对外分享请使用**:[`src/resources/design-system/`](../src/resources/design-system/README.md)(含 `DESIGN.md`、`tokens.json`、AI 提示模板)。本文件为项目内 Agent 规则副本。
|
||||
|
||||
| 项 | 说明 |
|
||||
|---|---|
|
||||
| 文档版本 | v1.0 |
|
||||
@@ -144,23 +146,53 @@ import '../vehicle-management/style.css';
|
||||
|
||||
| 元素 | 类名 | 规格 |
|
||||
|---|---|---|
|
||||
| 容器 | `vm-filter-card` | 白底、12px 圆角、1px 边框、轻阴影 |
|
||||
| 容器 | `vm-filter-card`(兼容 `lc-filter-card`) | 白底、12px 圆角、1px 边框、轻阴影 |
|
||||
| 标题 | `vm-filter-title` | 「筛选条件」,1.125rem / 600 |
|
||||
| 栅格 | `vm-filter-grid` | 默认 4 列;1280px 以下 2 列;640px 以下 1 列 |
|
||||
| 字段 | `vm-filter-field` | 标签在上、控件在下;标签 12px / muted |
|
||||
| 操作区 | `vm-filter-actions` | 顶部分割线;右对齐「重置」「查询」 |
|
||||
| 操作区 | `vm-filter-actions` | 顶部分割线;左侧「更多筛选/收起」,右侧「重置」「查询」 |
|
||||
|
||||
**日期区间(强制)**
|
||||
**参考实现(强制对齐)**:[`lease-business-detail/components/FilterPanel.tsx`](../src/prototypes/lease-business-detail/components/FilterPanel.tsx)
|
||||
|
||||
#### 4.1.1 筛选提示文本(placeholder)— 强制统一
|
||||
|
||||
筛选卡内所有空态提示(输入框、FilterPicker、日期区间、Ant Select)必须一致:
|
||||
|
||||
| 属性 | Token / 值 |
|
||||
|---|---|
|
||||
| 字体 | `var(--vm-font)` |
|
||||
| 字号 | `0.875rem`(14px) |
|
||||
| 字重 | `400` |
|
||||
| 颜色 | `var(--ln-muted-soft)`(`#a1a1aa`) |
|
||||
| 透明度 | `opacity: 1`(覆盖 Ant Select 默认半透明) |
|
||||
|
||||
样式落点:`vehicle-management/style.css` 中 `.vm-filter-card` / `.lc-filter-card` 下的 `::placeholder` 与 `.ant-select-selection-placeholder`。
|
||||
**禁止**各页单独改占位色、字号或字重。
|
||||
|
||||
#### 4.1.2 日期区间(强制)
|
||||
|
||||
- 使用 `DateRangeFilterField`(`vehicle-management/components/DateRangeFilterField`)。
|
||||
- 展示分隔符为中文「**至**」。
|
||||
- 类名:`vm-date-range-field`、`vm-filter-picker-control`。
|
||||
- 弹层必须 portal + `fixed`(避免滚动容器错位)。
|
||||
- **禁止**筛选区用 Ant `RangePicker`、双 `<input type="date">` 等替代方案。
|
||||
|
||||
**折叠筛选**
|
||||
#### 4.1.3 更多筛选 / 收起(强制)
|
||||
|
||||
- 超过 4 项时其余放入 `vm-filter-expand`(见 `src/common/vm-filter-panel.ts`)。
|
||||
- 切换按钮:`vm-filter-toggle` + 角标 `vm-filter-toggle-badge`。
|
||||
超过 4 项时必须折叠;实现与物流业务明细相同:
|
||||
|
||||
| 项 | 规则 |
|
||||
|---|---|
|
||||
| 拆分 | `splitFilterFields()` / `shouldShowFilterExpand()`([`src/common/vm-filter-panel.ts`](../src/common/vm-filter-panel.ts)) |
|
||||
| 首行 | 最多 4 项;**禁止**首行 5 项导致第二行仅 1 项 |
|
||||
| 展开区 | `vm-filter-expand` + `is-expanded`;内层 `vm-filter-expand-inner` + 独立 `vm-filter-grid` |
|
||||
| 文案 | 仅「更多筛选」/「收起」(禁用「展开」) |
|
||||
| 按钮 | `vm-btn vm-btn-link vm-filter-toggle`;`data-vm-icon` 为 `filter` / `chevron-up` |
|
||||
| 角标 | 收起且扩展项有值时显示 `vm-filter-toggle-badge`(主色底、白字) |
|
||||
| 操作区布局 | 切换在左(`margin-right: auto`),重置/查询在右 |
|
||||
| 别名 | `ldb-filter-expand` / `ldb-filter-toggle` 等同 `vm-filter-*`;**新代码优先 `vm-filter-*`** |
|
||||
|
||||
新建或改动列表页必须遵循;旧页触及时迁移。
|
||||
|
||||
### 4.2 输入框 `.vm-input`
|
||||
|
||||
@@ -170,15 +202,16 @@ import '../vehicle-management/style.css';
|
||||
| 表单页 | min 44px | 1rem(移动端友好) |
|
||||
|
||||
- 边框:`--ln-hairline-strong`;focus 时主题色边框。
|
||||
- 占位符:`--ln-muted-soft`。
|
||||
- 占位符:见 §4.1.1(`--ln-muted-soft`,0.875rem / 400)。
|
||||
|
||||
### 4.3 下拉选择 `.vm-filter-picker-*`
|
||||
|
||||
| 元素 | 说明 |
|
||||
|---|---|
|
||||
| `vm-filter-picker-control` | 触发器,与输入框同高 |
|
||||
| `vm-filter-picker-control` | 触发器,与输入框同高(32px) |
|
||||
| `vm-filter-picker-popover` | 下拉面板,卡片圆角 + hover 阴影 |
|
||||
| `vm-filter-picker-option.checked` | 主色浅底 + 深绿字 |
|
||||
| 占位符 | 见 §4.1.1;与日期区间、Ant Select 同色同字号 |
|
||||
|
||||
### 4.4 按钮 `.vm-btn`
|
||||
|
||||
@@ -391,7 +424,7 @@ const vmTheme = {
|
||||
| 合同 Ant 对齐 | `src/prototypes/lease-contract-management/styles/lease-contract.css` |
|
||||
| 参考:车辆管理 | `src/prototypes/vehicle-management/index.tsx` |
|
||||
| 参考:租赁合同 | `src/prototypes/lease-contract-management/LeaseContractManagement.jsx` |
|
||||
| 参考:加氢站站点 | `src/prototypes/oneos-web-h2-station/pages/03-站点信息.jsx` |
|
||||
| 参考:加氢站站点 | `src/prototypes/oneos-web-h2-station-site/pages/03-站点信息.jsx` |
|
||||
| 主题 token 来源 | `src/themes/linear/DESIGN.md`(inverse 浅色用于 vm) |
|
||||
|
||||
---
|
||||
|
||||
@@ -105,6 +105,18 @@ export default function MyApp() {
|
||||
|
||||
参考:`vehicle-management/index.tsx`、`lease-business-ledger/index.tsx`。
|
||||
|
||||
## 业务逻辑文档化(强制)
|
||||
|
||||
实现**复杂判断逻辑**(多步判定、跨模块校验、状态/公式推导、导入保存规则等)时,必须与代码**同一轮**更新文档。详见 `rules/business-logic-documentation-guide.md`。
|
||||
|
||||
```text
|
||||
.spec/<logic-topic>.md # 完整规则(判定顺序、数据源、代码路径)
|
||||
.spec/requirements-prd.md # 摘要 + 验收项
|
||||
annotation-source.json # sync-annotation-directory.mjs 同步目录/字段标注
|
||||
```
|
||||
|
||||
范例:`lease-business-detail/.spec/field-checks.md`。
|
||||
|
||||
## 验收流程
|
||||
|
||||
运行原型验收脚本:
|
||||
@@ -132,3 +144,4 @@ node scripts/check-app-ready.mjs /prototypes/[原型目录]
|
||||
- [ ] 占位原型已更新为有意义的目录名和显示名。
|
||||
- [ ] 新增依赖已写入 `package.json`。
|
||||
- [ ] `check-app-ready.mjs` 原型验收通过。
|
||||
- [ ] 若含复杂业务逻辑:`.spec` 规格文 + PRD 摘要 + 标注目录已同步(见 `business-logic-documentation-guide.md`)。
|
||||
|
||||
@@ -46,6 +46,7 @@
|
||||
- 本次范围、功能清单和不做什么。
|
||||
- 页面或资源的核心内容、数据来源和素材来源。
|
||||
- 关键状态、核心路径和必要交互。
|
||||
- **复杂判定逻辑**(校验链、状态机、公式口径、导入规则):在 PRD 中写摘要,并规划 `.spec/<topic>.md` 全文(见 `rules/business-logic-documentation-guide.md`)。
|
||||
- 用户最终如何判断结果可用。
|
||||
|
||||
只问会影响范围、成本或验收的问题。能从上下文推断的内容直接记为假设继续;如果缺失信息会导致不同功能范围、不同页面结构或不同验收标准,必须先问。
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
* node scripts/publish-all-to-s3.mjs
|
||||
* node scripts/publish-all-to-s3.mjs --dry-run
|
||||
* node scripts/publish-all-to-s3.mjs --group prototypes
|
||||
* node scripts/publish-all-to-s3.mjs --ids vehicle-management,oneos-prototype-nav
|
||||
*/
|
||||
import fs from 'node:fs';
|
||||
import os from 'node:os';
|
||||
@@ -26,6 +27,7 @@ function parseArgs(argv) {
|
||||
adminOrigin: '',
|
||||
dryRun: false,
|
||||
group: 'all',
|
||||
ids: [],
|
||||
includeSource: true,
|
||||
};
|
||||
for (let i = 0; i < argv.length; i += 1) {
|
||||
@@ -33,6 +35,9 @@ function parseArgs(argv) {
|
||||
if (arg === '--project-id' && argv[i + 1]) args.projectId = argv[++i].trim();
|
||||
else if (arg === '--admin-origin' && argv[i + 1]) args.adminOrigin = argv[++i].trim();
|
||||
else if (arg === '--group' && argv[i + 1]) args.group = argv[++i].trim();
|
||||
else if (arg === '--ids' && argv[i + 1]) {
|
||||
args.ids = argv[++i].split(',').map((id) => id.trim()).filter(Boolean);
|
||||
}
|
||||
else if (arg === '--dry-run') args.dryRun = true;
|
||||
else if (arg === '--no-source') args.includeSource = false;
|
||||
}
|
||||
@@ -69,8 +74,9 @@ function resolveObjectPrefix(entry, pathAliases = {}) {
|
||||
if (alias) return String(alias).replace(/^\/+|\/+$/gu, '');
|
||||
|
||||
const normalized = entry.path.replace(/^\/+|\/+$/gu, '');
|
||||
const prototypeMatch = normalized.match(/^(?:src\/)?prototypes\/(.+)$/u);
|
||||
if (prototypeMatch?.[1]) return `prototypes/${prototypeMatch[1]}`;
|
||||
const prototypeMatch = normalized.match(/^(?:src\/)?prototypes\/([^/]+)$/u);
|
||||
// 与 Make 客户端「发布到对象存储」一致:/{prototype-id}/index.html(不加 prototypes/ 前缀)
|
||||
if (prototypeMatch?.[1]) return prototypeMatch[1];
|
||||
const themeMatch = normalized.match(/^(?:src\/)?themes\/(.+)$/u);
|
||||
if (themeMatch?.[1]) return `themes/${themeMatch[1]}`;
|
||||
return entry.id;
|
||||
@@ -227,7 +233,15 @@ async function main() {
|
||||
const adminOrigin = resolveAdminOrigin(args.adminOrigin);
|
||||
const s3Config = readS3Config();
|
||||
const includeSource = args.includeSource && s3Config.includeSource;
|
||||
const entries = await collectPublishEntries(adminOrigin, args.projectId, args.group, s3Config.pathAliases);
|
||||
let entries = await collectPublishEntries(adminOrigin, args.projectId, args.group, s3Config.pathAliases);
|
||||
if (args.ids.length > 0) {
|
||||
const idSet = new Set(args.ids);
|
||||
entries = entries.filter((entry) => idSet.has(entry.id));
|
||||
const missing = args.ids.filter((id) => !entries.some((entry) => entry.id === id));
|
||||
if (missing.length > 0) {
|
||||
throw new Error(`未找到原型: ${missing.join(', ')}`);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`Admin: ${adminOrigin}`);
|
||||
console.log(`Bucket: ${s3Config.bucket}`);
|
||||
|
||||
@@ -23,9 +23,10 @@ const XLL_MODULES = [
|
||||
/** 从 ONE-OS Web 合包拆出、由项目内手写 index 维护的独立原型 */
|
||||
const STANDALONE_MODULES = [
|
||||
{ slug: 'business-dept-ledger', title: '业务部台账', skipCodegen: true },
|
||||
{ slug: 'customer-payment-collection', title: '客户回款情况', skipCodegen: true },
|
||||
{ slug: 'vehicle-maintenance-ledger', title: '车辆维修明细', skipCodegen: true },
|
||||
{ slug: 'oneos-web-h2-station-site', title: '站点信息', skipCodegen: true },
|
||||
{ slug: 'oneos-web-h2-station-weekly', title: '站点周报统计', skipCodegen: true },
|
||||
{ slug: 'oneos-web-h2-station-stats', title: '加氢站数量统计', skipCodegen: true },
|
||||
{ slug: 'vehicle-return-settlement', title: '还车应结款', skipCodegen: true },
|
||||
{ slug: 'vehicle-pickup-receivable', title: '提车应收款', skipCodegen: true },
|
||||
{ slug: 'oneos-web-approval', title: '审批中心', skipCodegen: true },
|
||||
@@ -61,7 +62,7 @@ const MODULES = [
|
||||
{ slug: 'oneos-web-procurement', title: '采购管理', dir: '采购管理' },
|
||||
{ slug: 'oneos-web-lease-contract', title: '车辆租赁合同', dir: '车辆租赁合同' },
|
||||
{ slug: 'oneos-web-h2-station', title: '加氢站管理', dir: '加氢站管理', excludeDirs: ['export-tools', 'AI-加氢站站点信息-complete'], excludeFiles: ['站点信息.jsx'] },
|
||||
{ slug: 'oneos-web-data-analysis', title: '数据分析', dir: '数据分析', excludeFiles: ['业务部台账.jsx'] },
|
||||
{ slug: 'oneos-web-data-analysis', title: '数据分析', dir: '数据分析', excludeFiles: ['业务部台账.jsx', '客户回款情况.jsx'] },
|
||||
{ slug: 'oneos-web-ledger-data', title: '台账数据', dir: '台账数据', excludeDirs: ['docs'], excludeFiles: ['车辆维修明细.jsx'] },
|
||||
{ slug: 'oneos-web-business', title: '业务管理', dir: '业务管理', excludeDirs: ['文档', 'export-tools', 'AI-保险采购-complete'] },
|
||||
{ slug: 'oneos-web-ops', title: '运维管理', dir: '运维管理' },
|
||||
|
||||
@@ -5,12 +5,14 @@ import {
|
||||
ArrowRightLeft,
|
||||
Car,
|
||||
CircleDollarSign,
|
||||
Download,
|
||||
Eye,
|
||||
FileText,
|
||||
MoreHorizontal,
|
||||
OctagonX,
|
||||
Pencil,
|
||||
RefreshCw,
|
||||
Settings2,
|
||||
Trash2,
|
||||
Undo2,
|
||||
Upload,
|
||||
@@ -31,6 +33,7 @@ export type OperationActionItem = {
|
||||
const MORE_ACTION_ICONS: Record<string, LucideIcon> = {
|
||||
edit: Pencil,
|
||||
del: Trash2,
|
||||
delete: Trash2,
|
||||
addVehicle: Car,
|
||||
renew: RefreshCw,
|
||||
authorized: FileText,
|
||||
@@ -41,6 +44,9 @@ const MORE_ACTION_ICONS: Record<string, LucideIcon> = {
|
||||
toFormal: ArrowRightLeft,
|
||||
stampSupplement: Upload,
|
||||
uploadStamped: Upload,
|
||||
manage: Settings2,
|
||||
preview: Eye,
|
||||
download: Download,
|
||||
};
|
||||
|
||||
function renderMenuItemLabel(item: OperationActionItem) {
|
||||
|
||||
150
src/common/h2DispenserBrandStore.js
Normal file
150
src/common/h2DispenserBrandStore.js
Normal file
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* 加氢机品牌 / 型号维护(原型本地 Store)
|
||||
* 供「站点信息」维护、「加氢订单 H5」OCR 读取品牌型号线索。
|
||||
*/
|
||||
(function initH2DispenserBrandStore(global) {
|
||||
var STORAGE_KEY = 'oneos.h2.dispenserBrands.v1';
|
||||
|
||||
var SEED = [
|
||||
{ id: 'db-1', brand: '海德利森', model: 'H2-D50', remark: '嘉兴站常用', updatedAt: '2026-07-10 09:00:00' },
|
||||
{ id: 'db-2', brand: '海德利森', model: 'H2-D80', remark: '', updatedAt: '2026-07-10 09:00:00' },
|
||||
{ id: 'db-3', brand: '舜华新能源', model: 'SH-H35', remark: '面板 OCR 模板 A', updatedAt: '2026-07-12 14:20:00' },
|
||||
{ id: 'db-4', brand: '厚普股份', model: 'HP-H70', remark: '', updatedAt: '2026-07-14 11:05:00' },
|
||||
];
|
||||
|
||||
function clone(list) {
|
||||
return (list || []).map(function (row) {
|
||||
return Object.assign({}, row);
|
||||
});
|
||||
}
|
||||
|
||||
function readRaw() {
|
||||
try {
|
||||
var raw = global.localStorage && global.localStorage.getItem(STORAGE_KEY);
|
||||
if (!raw) return clone(SEED);
|
||||
var parsed = JSON.parse(raw);
|
||||
if (!Array.isArray(parsed) || !parsed.length) return clone(SEED);
|
||||
return parsed.map(function (row) {
|
||||
return {
|
||||
id: String(row.id || ''),
|
||||
brand: String(row.brand || '').trim(),
|
||||
model: String(row.model || '').trim(),
|
||||
remark: String(row.remark || '').trim(),
|
||||
updatedAt: String(row.updatedAt || ''),
|
||||
};
|
||||
}).filter(function (row) {
|
||||
return row.id && row.brand && row.model;
|
||||
});
|
||||
} catch (e) {
|
||||
return clone(SEED);
|
||||
}
|
||||
}
|
||||
|
||||
function writeRaw(list) {
|
||||
try {
|
||||
if (global.localStorage) {
|
||||
global.localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
|
||||
}
|
||||
} catch (e) {
|
||||
/* ignore quota */
|
||||
}
|
||||
}
|
||||
|
||||
function nowText() {
|
||||
var d = new Date();
|
||||
var pad = function (n) {
|
||||
return n < 10 ? '0' + n : String(n);
|
||||
};
|
||||
return (
|
||||
d.getFullYear() +
|
||||
'-' +
|
||||
pad(d.getMonth() + 1) +
|
||||
'-' +
|
||||
pad(d.getDate()) +
|
||||
' ' +
|
||||
pad(d.getHours()) +
|
||||
':' +
|
||||
pad(d.getMinutes()) +
|
||||
':' +
|
||||
pad(d.getSeconds())
|
||||
);
|
||||
}
|
||||
|
||||
function listBrands() {
|
||||
return clone(readRaw()).sort(function (a, b) {
|
||||
var brandCmp = a.brand.localeCompare(b.brand, 'zh');
|
||||
if (brandCmp !== 0) return brandCmp;
|
||||
return a.model.localeCompare(b.model, 'zh');
|
||||
});
|
||||
}
|
||||
|
||||
function upsertBrand(payload) {
|
||||
var brand = String(payload.brand || '').trim();
|
||||
var model = String(payload.model || '').trim();
|
||||
var remark = String(payload.remark || '').trim();
|
||||
if (!brand || !model) {
|
||||
return { ok: false, message: '品牌与型号均为必填' };
|
||||
}
|
||||
var list = readRaw();
|
||||
var id = String(payload.id || '').trim();
|
||||
var dup = list.some(function (row) {
|
||||
return (
|
||||
row.brand === brand &&
|
||||
row.model === model &&
|
||||
row.id !== id
|
||||
);
|
||||
});
|
||||
if (dup) {
|
||||
return { ok: false, message: '已存在相同品牌与型号' };
|
||||
}
|
||||
if (id) {
|
||||
var found = false;
|
||||
list = list.map(function (row) {
|
||||
if (row.id !== id) return row;
|
||||
found = true;
|
||||
return {
|
||||
id: row.id,
|
||||
brand: brand,
|
||||
model: model,
|
||||
remark: remark,
|
||||
updatedAt: nowText(),
|
||||
};
|
||||
});
|
||||
if (!found) {
|
||||
return { ok: false, message: '记录不存在' };
|
||||
}
|
||||
} else {
|
||||
list.push({
|
||||
id: 'db-' + Date.now() + '-' + Math.floor(Math.random() * 1000),
|
||||
brand: brand,
|
||||
model: model,
|
||||
remark: remark,
|
||||
updatedAt: nowText(),
|
||||
});
|
||||
}
|
||||
writeRaw(list);
|
||||
return { ok: true, list: clone(list) };
|
||||
}
|
||||
|
||||
function removeBrand(id) {
|
||||
var next = readRaw().filter(function (row) {
|
||||
return row.id !== id;
|
||||
});
|
||||
writeRaw(next);
|
||||
return { ok: true, list: clone(next) };
|
||||
}
|
||||
|
||||
function brandModelLabels() {
|
||||
return listBrands().map(function (row) {
|
||||
return row.brand + ' · ' + row.model;
|
||||
});
|
||||
}
|
||||
|
||||
global.H2DispenserBrandStore = {
|
||||
list: listBrands,
|
||||
upsert: upsertBrand,
|
||||
remove: removeBrand,
|
||||
labels: brandModelLabels,
|
||||
SEED: clone(SEED),
|
||||
};
|
||||
})(typeof window !== 'undefined' ? window : globalThis);
|
||||
@@ -5,31 +5,44 @@
|
||||
|
||||
var H2_RECONCILE_RECONCILED = 'reconciled';
|
||||
var H2_RECONCILE_PENDING = 'pending';
|
||||
var H2_VERIFY_VERIFIED = 'verified';
|
||||
var H2_VERIFY_UNVERIFIED = 'unverified';
|
||||
/** 记录来源:站端上传 | 羚牛上传(车辆氢费明细人工录入) */
|
||||
var H2_RECORD_SOURCE_STATION = 'station';
|
||||
var H2_RECORD_SOURCE_LINGNIU = 'lingniu';
|
||||
|
||||
var H2_STATION_CODE_MAP = {
|
||||
'嘉兴加氢站(一期)': 'JX-H2-001',
|
||||
'中国石油中油高新能源牙谷加油加氢站': 'JX-H2-001',
|
||||
'杭州临平加氢站': 'HZ-H2-002',
|
||||
'上海宝山加氢站': 'SH-H2-003',
|
||||
'苏州工业园区备用站': 'SZ-H2-004'
|
||||
};
|
||||
|
||||
/** 与车辆氢费明细、加氢站模块对齐的 canonical seed(10 条) */
|
||||
var H2_CANONICAL_LEDGER_SEED = [
|
||||
{ key: 'rf-1', id: 'rf-1', stationId: 'JX-H2-001', stationName: '嘉兴加氢站(一期)', hydrogenTime: '2026-05-28 10:21:08', plateNo: '浙A12345F', customerName: '嘉兴市鑫峤供应链科技有限公司', hydrogenKg: 12.5, costUnitPrice: 42.5, costTotal: 531.25, customerUnitPrice: 45, customerAmount: 562.5, settlementStatus: 'customer', mileageKm: 128560, creatorName: '张三', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-2', id: 'rf-2', stationId: 'JX-H2-001', stationName: '嘉兴加氢站(一期)', hydrogenTime: '2026-05-26 14:08:33', plateNo: '浙A67890F', customerName: '浙江绿运物流有限公司', hydrogenKg: 10.0, costUnitPrice: 42.5, costTotal: 425.0, customerUnitPrice: 45, customerAmount: 450.0, settlementStatus: 'internal', mileageKm: 95230, creatorName: '李四', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-3', id: 'rf-3', stationId: 'JX-H2-001', stationName: '嘉兴加氢站(一期)', hydrogenTime: '2026-05-22 09:15:00', plateNo: '浙A88888F', customerName: '嘉兴市鑫峤供应链科技有限公司', hydrogenKg: 18.3, costUnitPrice: 42.5, costTotal: 777.75, customerUnitPrice: 45, customerAmount: 823.5, settlementStatus: 'customer_self', mileageKm: 201880, creatorName: '王静', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-4', id: 'rf-4', stationId: 'JX-H2-001', stationName: '嘉兴加氢站(一期)', hydrogenTime: '2026-05-18 16:42:11', plateNo: '浙A03561F', customerName: '嘉兴港务氢能运输队', hydrogenKg: 15.6, costUnitPrice: 42.5, costTotal: 663.0, customerUnitPrice: 45, customerAmount: 702.0, settlementStatus: 'customer', mileageKm: 167420, creatorName: '张三', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-5', id: 'rf-5', stationId: 'HZ-H2-002', stationName: '杭州临平加氢站', hydrogenTime: '2026-05-30 09:30:22', plateNo: '浙B23456F', customerName: '杭州临平城配中心', hydrogenKg: 15.3, costUnitPrice: 43.0, costTotal: 657.9, customerUnitPrice: 46, customerAmount: 703.8, settlementStatus: 'internal', mileageKm: 143200, creatorName: '赵敏', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-6', id: 'rf-6', stationId: 'HZ-H2-002', stationName: '杭州临平加氢站', hydrogenTime: '2026-05-27 18:10:05', plateNo: '浙B99999F', customerName: '浙江氢运科技', hydrogenKg: 18.2, costUnitPrice: 43.0, costTotal: 782.6, customerUnitPrice: 46, customerAmount: 837.2, settlementStatus: 'customer_self', mileageKm: 189650, creatorName: '陈浩', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-7', id: 'rf-7', stationId: 'HZ-H2-002', stationName: '杭州临平加氢站', hydrogenTime: '2026-05-24 11:05:40', plateNo: '浙B58888F', customerName: '杭州临平城配中心', hydrogenKg: 11.8, costUnitPrice: 43.0, costTotal: 507.4, customerUnitPrice: 46, customerAmount: 542.8, settlementStatus: 'customer', mileageKm: 110340, creatorName: '李四', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-8', id: 'rf-8', stationId: 'SH-H2-003', stationName: '上海宝山加氢站', hydrogenTime: '2026-04-20 16:45:18', plateNo: '沪A88888F', customerName: '上海羚牛氢运', hydrogenKg: 8.0, costUnitPrice: 44.0, costTotal: 352.0, customerUnitPrice: 47, customerAmount: 376.0, settlementStatus: 'internal', mileageKm: 88420, creatorName: '王静', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-9', id: 'rf-9', stationId: 'SH-H2-003', stationName: '上海宝山加氢站', hydrogenTime: '2026-04-08 09:12:55', plateNo: '沪BDB9161F', customerName: '宝山园区试运车队', hydrogenKg: 9.5, costUnitPrice: 44.0, costTotal: 418.0, customerUnitPrice: 47, customerAmount: 446.5, settlementStatus: 'customer_self', mileageKm: 76500, creatorName: '张三', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-10', id: 'rf-10', stationId: 'SZ-H2-004', stationName: '苏州工业园区备用站', hydrogenTime: '2026-03-15 10:00:00', plateNo: '苏E33333F', customerName: '苏州试运客户', hydrogenKg: 6.2, costUnitPrice: 41.0, costTotal: 254.2, customerUnitPrice: 44, customerAmount: 272.8, settlementStatus: 'customer', mileageKm: 45210, creatorName: '赵敏', reconcileStatus: H2_RECONCILE_PENDING }
|
||||
];
|
||||
var H2_STATION_CODE_SET = (function () {
|
||||
var set = {};
|
||||
Object.keys(H2_STATION_CODE_MAP).forEach(function (name) {
|
||||
set[H2_STATION_CODE_MAP[name]] = true;
|
||||
});
|
||||
return set;
|
||||
})();
|
||||
|
||||
function h2BridgeCloneRows(rows) {
|
||||
return (rows || []).map(function (r) { return Object.assign({}, r); });
|
||||
}
|
||||
/** 与车辆氢费明细、加氢站模块对齐的 canonical seed(含本站未核对 / 已核对未对账用例) */
|
||||
var H2_CANONICAL_LEDGER_SEED = [
|
||||
/* 嘉兴本站 · 列表首页用例:未核对(无核对时间)→ 已核对未对账 → 已核对已对账 */
|
||||
{ key: 'rf-11', id: 'rf-11', stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站', hydrogenTime: '2026-07-16 09:20:18', plateNo: '浙A55666F', customerName: '中国石油中油高新能源牙谷加油加氢站·站端上报', hydrogenKg: 11.2, costUnitPrice: 42.5, costTotal: 476.0, customerUnitPrice: 42.5, customerAmount: 476.0, settlementStatus: 'customer', mileageKm: 132080, creatorName: '站端账号', verifyStatus: H2_VERIFY_UNVERIFIED, verifiedAt: null, reconcileStatus: H2_RECONCILE_PENDING },
|
||||
{ key: 'rf-12', id: 'rf-12', stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站', hydrogenTime: '2026-07-15 16:45:02', plateNo: '浙A77888F', customerName: '中国石油中油高新能源牙谷加油加氢站·站端上报', hydrogenKg: 9.8, costUnitPrice: 42.5, costTotal: 416.5, customerUnitPrice: 42.5, customerAmount: 416.5, settlementStatus: 'customer', mileageKm: null, creatorName: '站端账号', verifyStatus: H2_VERIFY_UNVERIFIED, verifiedAt: null, reconcileStatus: H2_RECONCILE_PENDING },
|
||||
{ key: 'rf-13', id: 'rf-13', stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站', hydrogenTime: '2026-07-14 11:08:40', plateNo: '浙A99001F', customerName: '嘉兴市鑫峤供应链科技有限公司', hydrogenKg: 14.0, costUnitPrice: 42.5, costTotal: 595.0, customerUnitPrice: 45, customerAmount: 630.0, settlementStatus: 'customer', mileageKm: 155200, creatorName: '站端账号', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-07-14 15:30:00', reconcileStatus: H2_RECONCILE_PENDING, reconcileDate: null },
|
||||
{ key: 'rf-1', id: 'rf-1', stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站', hydrogenTime: '2026-05-28 10:21:08', plateNo: '浙A12345F', customerName: '嘉兴市鑫峤供应链科技有限公司', hydrogenKg: 12.5, costUnitPrice: 42.5, costTotal: 531.25, customerUnitPrice: 45, customerAmount: 562.5, settlementStatus: 'customer', mileageKm: 128560, creatorName: '张三', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-05-29 10:00:00', reconcileStatus: H2_RECONCILE_RECONCILED, reconcileDate: '2026-05-29 10:00:00' },
|
||||
{ key: 'rf-2', id: 'rf-2', stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站', hydrogenTime: '2026-05-26 14:08:33', plateNo: '浙A67890F', customerName: '浙江绿运物流有限公司', hydrogenKg: 10.0, costUnitPrice: 42.5, costTotal: 425.0, customerUnitPrice: 45, customerAmount: 450.0, settlementStatus: 'internal', mileageKm: 95230, creatorName: '李四', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-05-27 10:00:00', reconcileStatus: H2_RECONCILE_RECONCILED, reconcileDate: '2026-05-27 10:00:00' },
|
||||
{ key: 'rf-3', id: 'rf-3', stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站', hydrogenTime: '2026-05-22 09:15:00', plateNo: '浙A88888F', customerName: '嘉兴市鑫峤供应链科技有限公司', hydrogenKg: 18.3, costUnitPrice: 42.5, costTotal: 777.75, customerUnitPrice: 45, customerAmount: 823.5, settlementStatus: 'customer_self', mileageKm: 201880, creatorName: '王静', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-05-23 10:00:00', reconcileStatus: H2_RECONCILE_RECONCILED, reconcileDate: '2026-05-23 10:00:00' },
|
||||
{ key: 'rf-4', id: 'rf-4', stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站', hydrogenTime: '2026-05-18 16:42:11', plateNo: '浙A03561F', customerName: '嘉兴港务氢能运输队', hydrogenKg: 15.6, costUnitPrice: 42.5, costTotal: 663.0, customerUnitPrice: 45, customerAmount: 702.0, settlementStatus: 'customer', mileageKm: 167420, creatorName: '张三', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-05-19 10:00:00', reconcileStatus: H2_RECONCILE_RECONCILED, reconcileDate: '2026-05-19 10:00:00' },
|
||||
{ key: 'rf-5', id: 'rf-5', stationId: 'HZ-H2-002', stationName: '杭州临平加氢站', hydrogenTime: '2026-05-30 09:30:22', plateNo: '浙B23456F', customerName: '杭州临平城配中心', hydrogenKg: 15.3, costUnitPrice: 43.0, costTotal: 657.9, customerUnitPrice: 46, customerAmount: 703.8, settlementStatus: 'internal', mileageKm: 143200, creatorName: '赵敏', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-05-31 10:00:00', reconcileStatus: H2_RECONCILE_RECONCILED, reconcileDate: '2026-05-31 10:00:00' },
|
||||
{ key: 'rf-6', id: 'rf-6', stationId: 'HZ-H2-002', stationName: '杭州临平加氢站', hydrogenTime: '2026-05-27 18:10:05', plateNo: '浙B99999F', customerName: '浙江氢运科技', hydrogenKg: 18.2, costUnitPrice: 43.0, costTotal: 782.6, customerUnitPrice: 46, customerAmount: 837.2, settlementStatus: 'customer_self', mileageKm: 189650, creatorName: '陈浩', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-05-28 10:00:00', reconcileStatus: H2_RECONCILE_RECONCILED, reconcileDate: '2026-05-28 10:00:00' },
|
||||
{ key: 'rf-7', id: 'rf-7', stationId: 'HZ-H2-002', stationName: '杭州临平加氢站', hydrogenTime: '2026-05-24 11:05:40', plateNo: '浙B58888F', customerName: '杭州临平城配中心', hydrogenKg: 11.8, costUnitPrice: 43.0, costTotal: 507.4, customerUnitPrice: 46, customerAmount: 542.8, settlementStatus: 'customer', mileageKm: 110340, creatorName: '李四', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-05-25 10:00:00', reconcileStatus: H2_RECONCILE_RECONCILED, reconcileDate: '2026-05-25 10:00:00' },
|
||||
{ key: 'rf-8', id: 'rf-8', stationId: 'SH-H2-003', stationName: '上海宝山加氢站', hydrogenTime: '2026-04-20 16:45:18', plateNo: '沪A88888F', customerName: '上海羚牛氢运', hydrogenKg: 8.0, costUnitPrice: 44.0, costTotal: 352.0, customerUnitPrice: 47, customerAmount: 376.0, settlementStatus: 'internal', mileageKm: 88420, creatorName: '王静', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-04-21 10:00:00', reconcileStatus: H2_RECONCILE_RECONCILED, reconcileDate: '2026-04-21 10:00:00' },
|
||||
{ key: 'rf-9', id: 'rf-9', stationId: 'SH-H2-003', stationName: '上海宝山加氢站', hydrogenTime: '2026-04-08 09:12:55', plateNo: '沪BDB9161F', customerName: '宝山园区试运车队', hydrogenKg: 9.5, costUnitPrice: 44.0, costTotal: 418.0, customerUnitPrice: 47, customerAmount: 446.5, settlementStatus: 'customer_self', mileageKm: 76500, creatorName: '张三', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-04-09 10:00:00', reconcileStatus: H2_RECONCILE_PENDING, reconcileDate: null },
|
||||
{ key: 'rf-10', id: 'rf-10', stationId: 'SZ-H2-004', stationName: '苏州工业园区备用站', hydrogenTime: '2026-03-15 10:00:00', plateNo: '苏E33333F', customerName: '苏州试运客户', hydrogenKg: 6.2, costUnitPrice: 41.0, costTotal: 254.2, customerUnitPrice: 44, customerAmount: 272.8, settlementStatus: 'customer', mileageKm: 45210, creatorName: '赵敏', verifyStatus: H2_VERIFY_UNVERIFIED, verifiedAt: null, reconcileStatus: H2_RECONCILE_PENDING }
|
||||
];
|
||||
|
||||
function h2BridgeFormatDateTime(value) {
|
||||
if (!value) return '';
|
||||
@@ -38,6 +51,26 @@ function h2BridgeFormatDateTime(value) {
|
||||
return String(value);
|
||||
}
|
||||
|
||||
/** 已对账记录必须有对账时间;缺省时按加氢日次日 10:00:00 推导(原型演示) */
|
||||
function h2BridgeDeriveReconcileTime(hydrogenTime) {
|
||||
var s = h2BridgeFormatDateTime(hydrogenTime);
|
||||
var m = String(s).match(/^(\d{4})-(\d{2})-(\d{2})/);
|
||||
if (!m) return '2026-01-01 10:00:00';
|
||||
var d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]) + 1, 10, 0, 0);
|
||||
var pad = function (n) { return n < 10 ? '0' + n : String(n); };
|
||||
return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' 10:00:00';
|
||||
}
|
||||
|
||||
function h2BridgeResolveReconcileTime(row) {
|
||||
/* 对账时间仅来自对账单回写的 reconcileDate;勿用 reconciledAt(完成核对会写入) */
|
||||
var explicit = row.reconcileDate || '';
|
||||
if (explicit) return h2BridgeFormatDateTime(explicit);
|
||||
if (row.reconcileStatus === H2_RECONCILE_RECONCILED) {
|
||||
return h2BridgeDeriveReconcileTime(row.hydrogenTime);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function h2BridgeMatchStatementPatch(row, patch) {
|
||||
if (patch.ledgerId && row.ledgerSyncId && patch.ledgerId === row.ledgerSyncId) return true;
|
||||
var rowTime = h2BridgeFormatDateTime(row.hydrogenTime);
|
||||
@@ -47,6 +80,127 @@ function h2BridgeMatchStatementPatch(row, patch) {
|
||||
&& (rowTime === patchTime || String(row.hydrogenTime || '') === patchTime);
|
||||
}
|
||||
|
||||
function h2BridgeInferRecordSource(row) {
|
||||
if (!row) return H2_RECORD_SOURCE_LINGNIU;
|
||||
if (row.recordSource === H2_RECORD_SOURCE_STATION || row.recordSource === H2_RECORD_SOURCE_LINGNIU) {
|
||||
return row.recordSource;
|
||||
}
|
||||
var creator = String(row.creatorName || '').trim();
|
||||
var customer = String(row.customerName || '');
|
||||
if (creator === '站端账号' || customer.indexOf('·站端上报') >= 0) return H2_RECORD_SOURCE_STATION;
|
||||
return H2_RECORD_SOURCE_LINGNIU;
|
||||
}
|
||||
|
||||
function h2BridgeNormalizeRow(row) {
|
||||
if (!row) return row;
|
||||
var next = Object.assign({}, row);
|
||||
next.recordSource = h2BridgeInferRecordSource(next);
|
||||
if (!Array.isArray(next.changeLogs)) next.changeLogs = [];
|
||||
if (next.verifiedByName == null) next.verifiedByName = '';
|
||||
if (next.reconciledByName == null) next.reconciledByName = '';
|
||||
return next;
|
||||
}
|
||||
|
||||
function h2BridgeFormatLogScalar(value) {
|
||||
if (value == null || value === '') return '—';
|
||||
if (typeof value === 'number' && isFinite(value)) {
|
||||
return String(Math.round(value * 100) / 100);
|
||||
}
|
||||
return String(value);
|
||||
}
|
||||
|
||||
/** 站端/台账编辑时对比字段,生成变更日志条目(时间倒序由调用方 unshift) */
|
||||
function h2BridgeBuildFieldChangeLogs(prev, next, operatorName) {
|
||||
if (!prev || !next) return [];
|
||||
var fields = [
|
||||
{ key: 'hydrogenTime', label: '加氢时间' },
|
||||
{ key: 'plateNo', label: '车牌号' },
|
||||
{ key: 'hydrogenKg', label: '加氢量' },
|
||||
{ key: 'costUnitPrice', label: '氢气单价' },
|
||||
{ key: 'costTotal', label: '加氢总额', alt: 'customerAmount' },
|
||||
{ key: 'mileageKm', label: '里程' }
|
||||
];
|
||||
var logs = [];
|
||||
var now = new Date();
|
||||
var nowStr = now.getFullYear() + '-' + h2BridgePad2(now.getMonth() + 1) + '-' + h2BridgePad2(now.getDate())
|
||||
+ ' ' + h2BridgePad2(now.getHours()) + ':' + h2BridgePad2(now.getMinutes()) + ':' + h2BridgePad2(now.getSeconds());
|
||||
fields.forEach(function (f) {
|
||||
var before = prev[f.key];
|
||||
var after = next[f.key];
|
||||
if (before == null && f.alt) before = prev[f.alt];
|
||||
if (after == null && f.alt) after = next[f.alt];
|
||||
var beforeText = h2BridgeFormatLogScalar(before);
|
||||
var afterText = h2BridgeFormatLogScalar(after);
|
||||
if (beforeText === afterText) return;
|
||||
logs.push({
|
||||
id: 'clog-' + Date.now() + '-' + Math.random().toString(36).slice(2, 8),
|
||||
at: nowStr,
|
||||
operatorName: operatorName || next.creatorName || '系统',
|
||||
userName: operatorName || next.creatorName || '系统',
|
||||
field: f.key,
|
||||
fieldLabel: f.label,
|
||||
oldValue: beforeText,
|
||||
newValue: afterText,
|
||||
before: beforeText,
|
||||
after: afterText
|
||||
});
|
||||
});
|
||||
return logs;
|
||||
}
|
||||
|
||||
function h2BridgeEnrichSeedDefaults(row) {
|
||||
var next = h2BridgeNormalizeRow(row);
|
||||
if (next.verifyStatus === H2_VERIFY_VERIFIED && !next.verifiedByName) {
|
||||
next.verifiedByName = next.creatorName === '站端账号' ? '李业务' : (next.creatorName || '李业务');
|
||||
}
|
||||
if (next.reconcileStatus === H2_RECONCILE_RECONCILED && !next.reconciledByName) {
|
||||
next.reconciledByName = '系统管理员';
|
||||
}
|
||||
if (next.key === 'rf-13' && (!next.changeLogs || !next.changeLogs.length)) {
|
||||
next.changeLogs = [
|
||||
{
|
||||
id: 'clog-seed-rf13-1',
|
||||
at: '2026-07-14 11:20:00',
|
||||
operatorName: '站端账号',
|
||||
userName: '站端账号',
|
||||
field: 'hydrogenKg',
|
||||
fieldLabel: '加氢量',
|
||||
oldValue: '13.50',
|
||||
newValue: '14.00',
|
||||
before: '13.50',
|
||||
after: '14.00'
|
||||
}
|
||||
];
|
||||
}
|
||||
if (next.key === 'rf-1' && (!next.changeLogs || !next.changeLogs.length)) {
|
||||
next.changeLogs = [
|
||||
{
|
||||
id: 'clog-seed-rf1-1',
|
||||
at: '2026-05-28 11:05:00',
|
||||
operatorName: '张三',
|
||||
userName: '张三',
|
||||
field: 'costUnitPrice',
|
||||
fieldLabel: '氢气单价',
|
||||
oldValue: '42.00',
|
||||
newValue: '42.50',
|
||||
before: '42.00',
|
||||
after: '42.50'
|
||||
}
|
||||
];
|
||||
}
|
||||
return next;
|
||||
}
|
||||
|
||||
function h2BridgeCloneRows(rows) {
|
||||
return (rows || []).map(function (r) {
|
||||
var cloned = Object.assign({}, r);
|
||||
if (Array.isArray(r.changeLogs)) {
|
||||
cloned.changeLogs = r.changeLogs.map(function (log) { return Object.assign({}, log); });
|
||||
}
|
||||
return h2BridgeNormalizeRow(cloned);
|
||||
});
|
||||
}
|
||||
|
||||
function h2BridgeApplyStatementPatches(rows, patches) {
|
||||
if (!patches || !patches.length) return h2BridgeCloneRows(rows);
|
||||
return (rows || []).map(function (r) {
|
||||
@@ -58,26 +212,95 @@ function h2BridgeApplyStatementPatches(rows, patches) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!patch) return r;
|
||||
return Object.assign({}, r, {
|
||||
if (!patch) return h2BridgeNormalizeRow(r);
|
||||
return h2BridgeNormalizeRow(Object.assign({}, r, {
|
||||
statementPatched: true,
|
||||
reconcileStatus: H2_RECONCILE_RECONCILED,
|
||||
reconcileDate: patch.reconcileDate,
|
||||
receiptDate: patch.receiptDate,
|
||||
stationPaymentStatus: patch.paymentStatus || 'paid',
|
||||
paymentStatus: patch.paymentStatus || 'paid',
|
||||
reconciledAt: patch.reconcileDate
|
||||
});
|
||||
statementRecordId: patch.statementRecordId != null ? patch.statementRecordId : r.statementRecordId,
|
||||
reconciledByName: patch.reconciler || patch.reconciledByName || r.reconciledByName || ''
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
function h2BridgeBuildInitialRows() {
|
||||
var patches = (typeof window !== 'undefined' && window.H2_STATION_STATEMENT_LEDGER_UPDATES) || [];
|
||||
return h2BridgeApplyStatementPatches(h2BridgeCloneRows(H2_CANONICAL_LEDGER_SEED), patches);
|
||||
var seeded = (H2_CANONICAL_LEDGER_SEED || []).map(h2BridgeEnrichSeedDefaults);
|
||||
return h2BridgeApplyStatementPatches(seeded, patches);
|
||||
}
|
||||
|
||||
function h2BridgePad2(n) {
|
||||
return n < 10 ? '0' + n : String(n);
|
||||
}
|
||||
|
||||
/** 自然日 YYYY-MM-DD(设备本地时区) */
|
||||
function h2BridgeTodayDateKey(d) {
|
||||
var x = d || new Date();
|
||||
return x.getFullYear() + '-' + h2BridgePad2(x.getMonth() + 1) + '-' + h2BridgePad2(x.getDate());
|
||||
}
|
||||
|
||||
function h2BridgeYesterdayDateKey() {
|
||||
var d = new Date();
|
||||
d.setDate(d.getDate() - 1);
|
||||
return h2BridgeTodayDateKey(d);
|
||||
}
|
||||
|
||||
function h2BridgeManualLedgerKey(stationId, ledgerDate) {
|
||||
return String(stationId || '').trim() + '|' + String(ledgerDate || '').trim();
|
||||
}
|
||||
|
||||
/** 解析站点编码:支持传入编码或站名(勿把站名原样当 id) */
|
||||
function h2BridgeResolveStationId(stationId, stationName) {
|
||||
var a = String(stationId || '').trim();
|
||||
var b = String(stationName || '').trim();
|
||||
if (a && H2_STATION_CODE_MAP[a]) return H2_STATION_CODE_MAP[a];
|
||||
if (b && H2_STATION_CODE_MAP[b]) return H2_STATION_CODE_MAP[b];
|
||||
if (a && H2_STATION_CODE_SET[a]) return a;
|
||||
if (b && H2_STATION_CODE_SET[b]) return b;
|
||||
return a || '';
|
||||
}
|
||||
|
||||
/** 手工台账种子:昨日已上传;今日默认未上传,便于演示拦截新增 */
|
||||
function h2BridgeBuildInitialManualLedgers() {
|
||||
var yesterday = h2BridgeYesterdayDateKey();
|
||||
return [
|
||||
{
|
||||
id: 'ml-seed-yesterday',
|
||||
stationId: 'JX-H2-001',
|
||||
stationName: '中国石油中油高新能源牙谷加油加氢站',
|
||||
ledgerDate: yesterday,
|
||||
images: [
|
||||
{
|
||||
id: 'ml-img-seed-1',
|
||||
name: '昨日手工台账.jpg',
|
||||
dataUrl: '',
|
||||
placeholder: true,
|
||||
archived: true,
|
||||
uploadedAt: yesterday + ' 18:30:00'
|
||||
}
|
||||
],
|
||||
updatedAt: yesterday + ' 18:30:00'
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
function h2BridgeCloneManualLedgers(list) {
|
||||
return (list || []).map(function (item) {
|
||||
return Object.assign({}, item, {
|
||||
images: (item.images || []).map(function (img) { return Object.assign({}, img); })
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function h2BridgeCreateStore() {
|
||||
var listeners = [];
|
||||
var state = { rows: h2BridgeBuildInitialRows() };
|
||||
var state = {
|
||||
rows: h2BridgeBuildInitialRows(),
|
||||
manualLedgers: h2BridgeBuildInitialManualLedgers()
|
||||
};
|
||||
|
||||
function notify() {
|
||||
listeners.forEach(function (fn) {
|
||||
@@ -91,6 +314,7 @@ function h2BridgeCreateStore() {
|
||||
state.rows = h2BridgeCloneRows(rows);
|
||||
notify();
|
||||
},
|
||||
getManualLedgers: function () { return h2BridgeCloneManualLedgers(state.manualLedgers); },
|
||||
subscribe: function (fn) {
|
||||
listeners.push(fn);
|
||||
return function () {
|
||||
@@ -101,6 +325,145 @@ function h2BridgeCreateStore() {
|
||||
if (!patches || !patches.length) return;
|
||||
state.rows = h2BridgeApplyStatementPatches(state.rows, patches);
|
||||
notify();
|
||||
},
|
||||
upsertRow: function (row) {
|
||||
if (!row) return null;
|
||||
var next = Object.assign({}, row);
|
||||
if (!next.id && !next.key) {
|
||||
next.id = 'rf-h5-' + Date.now() + '-' + Math.floor(Math.random() * 1000);
|
||||
next.key = next.id;
|
||||
} else {
|
||||
next.id = next.id || next.key;
|
||||
next.key = next.key || next.id;
|
||||
}
|
||||
if (!next.reconcileStatus) next.reconcileStatus = H2_RECONCILE_PENDING;
|
||||
if (!next.verifyStatus) next.verifyStatus = H2_VERIFY_UNVERIFIED;
|
||||
if (!next.recordSource) next.recordSource = h2BridgeInferRecordSource(next);
|
||||
var found = false;
|
||||
var saved = null;
|
||||
state.rows = state.rows.map(function (r) {
|
||||
if ((r.id || r.key) === next.id || (r.id || r.key) === next.key) {
|
||||
found = true;
|
||||
var merged = h2BridgeNormalizeRow(Object.assign({}, r, next));
|
||||
if (!next.recordSource && r.recordSource) merged.recordSource = r.recordSource;
|
||||
var operator = next.changeLogOperator || next.creatorName || r.creatorName || '系统';
|
||||
var fieldLogs = h2BridgeBuildFieldChangeLogs(r, merged, operator);
|
||||
var prevLogs = Array.isArray(r.changeLogs) ? r.changeLogs.slice() : [];
|
||||
if (Array.isArray(next.changeLogs) && next.replaceChangeLogs) {
|
||||
merged.changeLogs = next.changeLogs.slice();
|
||||
} else {
|
||||
merged.changeLogs = fieldLogs.concat(prevLogs);
|
||||
}
|
||||
saved = merged;
|
||||
return merged;
|
||||
}
|
||||
return r;
|
||||
});
|
||||
if (!found) {
|
||||
saved = h2BridgeNormalizeRow(next);
|
||||
if (!Array.isArray(saved.changeLogs)) saved.changeLogs = [];
|
||||
state.rows = [saved].concat(state.rows);
|
||||
}
|
||||
notify();
|
||||
return Object.assign({}, saved);
|
||||
},
|
||||
removeRow: function (id) {
|
||||
var target = String(id || '');
|
||||
if (!target) return false;
|
||||
var before = state.rows.length;
|
||||
state.rows = state.rows.filter(function (r) {
|
||||
return String(r.id || r.key || '') !== target;
|
||||
});
|
||||
var changed = state.rows.length !== before;
|
||||
if (changed) notify();
|
||||
return changed;
|
||||
},
|
||||
upsertManualLedger: function (input) {
|
||||
if (!input) return null;
|
||||
var stationId = h2BridgeResolveStationId(input.stationId, input.stationName);
|
||||
var stationName = String(input.stationName || '').trim();
|
||||
var ledgerDate = String(input.ledgerDate || h2BridgeTodayDateKey()).trim();
|
||||
if (!stationId || !ledgerDate) return null;
|
||||
var key = h2BridgeManualLedgerKey(stationId, ledgerDate);
|
||||
var existing = null;
|
||||
state.manualLedgers.forEach(function (item) {
|
||||
if (h2BridgeManualLedgerKey(item.stationId, item.ledgerDate) === key) existing = item;
|
||||
});
|
||||
function normalizeImage(img, i) {
|
||||
return {
|
||||
id: img.id || ('ml-img-' + Date.now() + '-' + i),
|
||||
name: String(img.name || ('台账照片' + (i + 1) + '.jpg')),
|
||||
dataUrl: String(img.dataUrl || ''),
|
||||
placeholder: Boolean(img.placeholder),
|
||||
archived: true,
|
||||
uploadedAt: img.uploadedAt || (ledgerDate + ' 12:00:00')
|
||||
};
|
||||
}
|
||||
/** 已归档图不可删:保留原有全部,仅追加新图 */
|
||||
var images = (existing && existing.images ? existing.images : []).map(function (img, i) {
|
||||
return normalizeImage(img, i);
|
||||
});
|
||||
var seen = {};
|
||||
images.forEach(function (img) { seen[img.id] = true; });
|
||||
(input.images || []).forEach(function (img, i) {
|
||||
var nextImg = normalizeImage(img, images.length + i);
|
||||
if (!nextImg.dataUrl && !nextImg.placeholder) return;
|
||||
if (seen[nextImg.id]) return;
|
||||
seen[nextImg.id] = true;
|
||||
images.push(nextImg);
|
||||
});
|
||||
if (!images.length) return null;
|
||||
var now = new Date();
|
||||
var nowStr = now.getFullYear() + '-' + h2BridgePad2(now.getMonth() + 1) + '-' + h2BridgePad2(now.getDate())
|
||||
+ ' ' + h2BridgePad2(now.getHours()) + ':' + h2BridgePad2(now.getMinutes()) + ':' + h2BridgePad2(now.getSeconds());
|
||||
var next = {
|
||||
id: 'ml-' + stationId + '-' + ledgerDate,
|
||||
stationId: stationId,
|
||||
stationName: stationName || stationId,
|
||||
ledgerDate: ledgerDate,
|
||||
images: images,
|
||||
updatedAt: nowStr
|
||||
};
|
||||
var found = false;
|
||||
state.manualLedgers = state.manualLedgers.map(function (item) {
|
||||
if (h2BridgeManualLedgerKey(item.stationId, item.ledgerDate) === key) {
|
||||
found = true;
|
||||
return next;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
if (!found) state.manualLedgers = [next].concat(state.manualLedgers);
|
||||
notify();
|
||||
return h2BridgeCloneManualLedgers([next])[0];
|
||||
},
|
||||
getManualLedger: function (stationIdOrName, ledgerDate) {
|
||||
var dateKey = String(ledgerDate || h2BridgeTodayDateKey()).trim();
|
||||
var sid = h2BridgeResolveStationId(stationIdOrName, stationIdOrName);
|
||||
if (!sid) sid = h2BridgeResolveStationId('', stationIdOrName);
|
||||
if (!sid) return null;
|
||||
var key = h2BridgeManualLedgerKey(sid, dateKey);
|
||||
var i;
|
||||
for (i = 0; i < state.manualLedgers.length; i++) {
|
||||
var item = state.manualLedgers[i];
|
||||
if (h2BridgeManualLedgerKey(item.stationId, item.ledgerDate) === key) {
|
||||
return h2BridgeCloneManualLedgers([item])[0];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
listManualLedgersByStation: function (stationIdOrName) {
|
||||
var sid = h2BridgeResolveStationId(stationIdOrName, stationIdOrName);
|
||||
if (!sid) sid = h2BridgeResolveStationId('', stationIdOrName);
|
||||
if (!sid) return [];
|
||||
return h2BridgeCloneManualLedgers(state.manualLedgers.filter(function (item) {
|
||||
return item.stationId === sid;
|
||||
})).sort(function (a, b) {
|
||||
return String(b.ledgerDate).localeCompare(String(a.ledgerDate));
|
||||
});
|
||||
},
|
||||
hasManualLedgerForDate: function (stationIdOrName, ledgerDate) {
|
||||
var entry = this.getManualLedger(stationIdOrName, ledgerDate);
|
||||
return Boolean(entry && entry.images && entry.images.length);
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -154,17 +517,39 @@ function h2BridgeMapToStationLedgerRow(row, index) {
|
||||
|
||||
function h2BridgeMapToHrRecord(row, index, fillerNames) {
|
||||
var fillers = fillerNames || ['张三', '李四', '王静', '赵敏', '陈浩'];
|
||||
var costTotal = row.costTotal != null ? row.costTotal : row.costAmount;
|
||||
var unitPrice = row.costUnitPrice != null ? row.costUnitPrice : row.customerUnitPrice;
|
||||
var totalAmount = costTotal != null ? costTotal : row.customerAmount;
|
||||
var reconcileTime = h2BridgeResolveReconcileTime(row);
|
||||
var isReconciled = row.reconcileStatus === H2_RECONCILE_RECONCILED || Boolean(row.reconcileDate);
|
||||
var verifiedAt = row.verifiedAt || '';
|
||||
var changeLogs = Array.isArray(row.changeLogs)
|
||||
? row.changeLogs.map(function (log) { return Object.assign({}, log); })
|
||||
: [];
|
||||
return {
|
||||
id: row.id || row.key || ('hr-' + (index + 1)),
|
||||
hydrogenTime: h2BridgeFormatDateTime(row.hydrogenTime),
|
||||
plateNo: row.plateNo,
|
||||
hydrogenKg: row.hydrogenKg,
|
||||
customerAmount: row.customerAmount,
|
||||
unitPrice: unitPrice,
|
||||
totalAmount: totalAmount,
|
||||
/* 兼容旧列名:金额同站端口径 */
|
||||
customerAmount: totalAmount,
|
||||
costUnitPrice: unitPrice,
|
||||
costTotal: totalAmount,
|
||||
mileageKm: row.mileageKm,
|
||||
fillerName: row.creatorName || fillers[index % fillers.length],
|
||||
settlementStatus: row.settlementStatus,
|
||||
stationName: row.stationName,
|
||||
stationCode: row.stationId || H2_STATION_CODE_MAP[row.stationName] || ''
|
||||
stationCode: row.stationId || H2_STATION_CODE_MAP[row.stationName] || '',
|
||||
recordSource: h2BridgeInferRecordSource(row),
|
||||
verifyStatus: row.verifyStatus === H2_VERIFY_VERIFIED ? H2_VERIFY_VERIFIED : H2_VERIFY_UNVERIFIED,
|
||||
verifiedAt: verifiedAt ? h2BridgeFormatDateTime(verifiedAt) : '',
|
||||
verifiedByName: row.verifiedByName || '',
|
||||
reconcileStatus: isReconciled ? H2_RECONCILE_RECONCILED : H2_RECONCILE_PENDING,
|
||||
reconcileTime: isReconciled ? reconcileTime : '',
|
||||
reconciledByName: row.reconciledByName || '',
|
||||
changeLogs: changeLogs
|
||||
};
|
||||
}
|
||||
|
||||
@@ -251,6 +636,84 @@ function h2BridgeGetStationList() {
|
||||
return list;
|
||||
}
|
||||
|
||||
/** 车牌写入口径:大写并补尾缀 F */
|
||||
function h2BridgeNormalizePlate(plateNo) {
|
||||
var plate = String(plateNo || '').trim().toUpperCase();
|
||||
if (plate && !/F$/u.test(plate)) plate += 'F';
|
||||
return plate;
|
||||
}
|
||||
|
||||
/** 时间写入口径:补全秒 */
|
||||
function h2BridgeNormalizeHydrogenTime(hydrogenTime) {
|
||||
var s = String(hydrogenTime || '').trim();
|
||||
if (s.length === 16) s += ':00';
|
||||
return s;
|
||||
}
|
||||
|
||||
/**
|
||||
* 业务主键:同站 + 同车牌 + 同加氢时间(精确到秒)视为重复。
|
||||
* @returns {object|null} 已存在行的浅拷贝,未命中返回 null
|
||||
*/
|
||||
function h2BridgeFindDuplicateRow(candidate, excludeId) {
|
||||
if (!candidate) return null;
|
||||
var store = h2BridgeGetStore();
|
||||
if (!store) return null;
|
||||
var station = String(candidate.stationName || '').trim();
|
||||
var plate = h2BridgeNormalizePlate(candidate.plateNo);
|
||||
var time = h2BridgeNormalizeHydrogenTime(candidate.hydrogenTime);
|
||||
if (!station || !plate || !time) return null;
|
||||
var exclude = excludeId != null ? String(excludeId) : '';
|
||||
var rows = store.getRows();
|
||||
var i;
|
||||
for (i = 0; i < rows.length; i++) {
|
||||
var row = rows[i];
|
||||
var id = String(row.id || row.key || '');
|
||||
if (exclude && id === exclude) continue;
|
||||
if (String(row.stationName || '').trim() !== station) continue;
|
||||
if (h2BridgeNormalizePlate(row.plateNo) !== plate) continue;
|
||||
if (h2BridgeNormalizeHydrogenTime(row.hydrogenTime) !== time) continue;
|
||||
return Object.assign({}, row);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 总额与「单价×量」偏差(元)。容差默认 0.05。
|
||||
* @returns {{ expected: number, actual: number, diff: number }|null}
|
||||
*/
|
||||
function h2BridgeTotalAmountMismatch(unitPrice, hydrogenKg, totalAmount, toleranceYuan) {
|
||||
var p = Number(unitPrice);
|
||||
var k = Number(hydrogenKg);
|
||||
var a = Number(totalAmount);
|
||||
if (!isFinite(p) || !isFinite(k) || !isFinite(a)) return null;
|
||||
var expected = Math.round(p * k * 100) / 100;
|
||||
var actual = Math.round(a * 100) / 100;
|
||||
var tol = toleranceYuan != null ? Number(toleranceYuan) : 0.05;
|
||||
if (!isFinite(tol)) tol = 0.05;
|
||||
var diff = Math.round(Math.abs(actual - expected) * 100) / 100;
|
||||
if (diff <= tol) return null;
|
||||
return { expected: expected, actual: actual, diff: diff };
|
||||
}
|
||||
|
||||
/** 取该站最近一条流水的站端口径单价,缺省 42.5 */
|
||||
function h2BridgeLookupStationUnitPrice(stationName) {
|
||||
var name = String(stationName || '').trim();
|
||||
if (!name) return 42.5;
|
||||
var store = h2BridgeGetStore();
|
||||
if (!store) return 42.5;
|
||||
var rows = store.getRows().slice().sort(function (a, b) {
|
||||
return String(b.hydrogenTime || '').localeCompare(String(a.hydrogenTime || ''));
|
||||
});
|
||||
var i;
|
||||
for (i = 0; i < rows.length; i++) {
|
||||
if (String(rows[i].stationName || '').trim() !== name) continue;
|
||||
var price = rows[i].costUnitPrice != null ? rows[i].costUnitPrice : rows[i].customerUnitPrice;
|
||||
var n = Number(price);
|
||||
if (isFinite(n) && n >= 0) return Math.round(n * 100) / 100;
|
||||
}
|
||||
return 42.5;
|
||||
}
|
||||
|
||||
function h2BridgeInit() {
|
||||
h2BridgeEnsureApi();
|
||||
var store = h2BridgeGetStore();
|
||||
@@ -263,6 +726,26 @@ function h2BridgeInit() {
|
||||
getHrRecords: h2BridgeGetHrRecords,
|
||||
getOrderRecords: h2BridgeGetOrderRecords,
|
||||
getStationList: h2BridgeGetStationList,
|
||||
normalizePlate: h2BridgeNormalizePlate,
|
||||
normalizeHydrogenTime: h2BridgeNormalizeHydrogenTime,
|
||||
findDuplicateRow: h2BridgeFindDuplicateRow,
|
||||
totalAmountMismatch: h2BridgeTotalAmountMismatch,
|
||||
lookupStationUnitPrice: h2BridgeLookupStationUnitPrice,
|
||||
todayDateKey: h2BridgeTodayDateKey,
|
||||
getManualLedger: function (stationIdOrName, ledgerDate) {
|
||||
return store.getManualLedger(stationIdOrName, ledgerDate);
|
||||
},
|
||||
listManualLedgersByStation: function (stationIdOrName) {
|
||||
return store.listManualLedgersByStation(stationIdOrName);
|
||||
},
|
||||
hasManualLedgerForDate: function (stationIdOrName, ledgerDate) {
|
||||
return store.hasManualLedgerForDate(stationIdOrName, ledgerDate);
|
||||
},
|
||||
upsertManualLedger: function (input) {
|
||||
return store.upsertManualLedger(input);
|
||||
},
|
||||
upsertRow: function (row) { return store.upsertRow(row); },
|
||||
removeRow: function (id) { return store.removeRow(id); },
|
||||
subscribe: function (fn) { return store.subscribe(fn); }
|
||||
};
|
||||
}
|
||||
@@ -274,6 +757,12 @@ h2BridgeInit();
|
||||
export {
|
||||
H2_CANONICAL_LEDGER_SEED,
|
||||
H2_STATION_CODE_MAP,
|
||||
H2_RECONCILE_RECONCILED,
|
||||
H2_RECONCILE_PENDING,
|
||||
H2_VERIFY_VERIFIED,
|
||||
H2_VERIFY_UNVERIFIED,
|
||||
H2_RECORD_SOURCE_STATION,
|
||||
H2_RECORD_SOURCE_LINGNIU,
|
||||
h2BridgeInit,
|
||||
h2BridgeGetStore,
|
||||
h2BridgeGetAllRefuelRecords,
|
||||
@@ -281,5 +770,11 @@ export {
|
||||
h2BridgeBuildStationLedgerStore,
|
||||
h2BridgeGetHrRecords,
|
||||
h2BridgeGetOrderRecords,
|
||||
h2BridgeGetStationList
|
||||
h2BridgeGetStationList,
|
||||
h2BridgeNormalizePlate,
|
||||
h2BridgeNormalizeHydrogenTime,
|
||||
h2BridgeFindDuplicateRow,
|
||||
h2BridgeTotalAmountMismatch,
|
||||
h2BridgeLookupStationUnitPrice,
|
||||
h2BridgeInferRecordSource
|
||||
};
|
||||
|
||||
@@ -42,6 +42,9 @@
|
||||
}
|
||||
|
||||
.vm-kpi-val,
|
||||
.lbd-kpi-val,
|
||||
.bdl-kpi-val,
|
||||
.sob-kpi-val,
|
||||
.vm-mileage,
|
||||
.vm-expire-date,
|
||||
.vm-handover-situation-line--mile,
|
||||
|
||||
@@ -1,7 +1,18 @@
|
||||
/**
|
||||
* 列表页筛选区全局规则(与 vehicle-management/style.css 中 .vm-filter-grid 4 列布局一致)
|
||||
*
|
||||
* 规则:筛选项超过 1 行(默认 4 项)时,其余收入折叠区,通过「更多筛选」展开。
|
||||
* 完整视觉与交互规范:`rules/global-design-spec.md` §4.1
|
||||
* 参考实现:`src/prototypes/lease-business-detail/components/FilterPanel.tsx`
|
||||
*
|
||||
* ## 布局约束
|
||||
* 1. 收起时:首行(primary)最多展示 `VM_FILTER_COLUMNS_PER_ROW`(默认 4)项,占满 1 行。
|
||||
* 2. 展开时:其余项放入 `vm-filter-expand`(`ldb-filter-expand` 为同义别名);primary 与 extra 各自使用 4 列栅格。
|
||||
* 3. 禁止「末行仅 1 项」:若展开区项数为 4n+1,从首行尾部借调 1 项到展开区(首行变为 3 项)。
|
||||
* 典型:总项数 5 → 首行 3 + 展开 2;总项数 6 → 首行 4 + 展开 2。
|
||||
* 4. 切换文案仅「更多筛选」/「收起」;按钮类名 `vm-btn vm-btn-link vm-filter-toggle`。
|
||||
*
|
||||
* ## 占位符(筛选卡内强制)
|
||||
* font: `var(--vm-font)`;size: 0.875rem;weight: 400;color: `var(--ln-muted-soft)`;opacity: 1
|
||||
*/
|
||||
export const VM_FILTER_COLUMNS_PER_ROW = 4;
|
||||
|
||||
@@ -12,13 +23,37 @@ export function splitFilterFields<T>(
|
||||
fields: T[],
|
||||
primaryCount: number = VM_FILTER_PRIMARY_VISIBLE_COUNT,
|
||||
): { primary: T[]; extra: T[] } {
|
||||
if (fields.length <= primaryCount) {
|
||||
const columnsPerRow = primaryCount;
|
||||
if (fields.length <= columnsPerRow) {
|
||||
return { primary: fields, extra: [] };
|
||||
}
|
||||
return {
|
||||
primary: fields.slice(0, primaryCount),
|
||||
extra: fields.slice(primaryCount),
|
||||
};
|
||||
|
||||
const primary = fields.slice(0, columnsPerRow);
|
||||
const extra = fields.slice(columnsPerRow);
|
||||
|
||||
return rebalanceFilterSplit(primary, extra, columnsPerRow);
|
||||
}
|
||||
|
||||
/** 避免展开区出现 4n+1 项导致末行孤零零 1 项 */
|
||||
function rebalanceFilterSplit<T>(
|
||||
primary: T[],
|
||||
extra: T[],
|
||||
columnsPerRow: number,
|
||||
): { primary: T[]; extra: T[] } {
|
||||
const nextPrimary = [...primary];
|
||||
const nextExtra = [...extra];
|
||||
|
||||
while (
|
||||
nextExtra.length > 0
|
||||
&& nextExtra.length % columnsPerRow === 1
|
||||
&& nextPrimary.length > 0
|
||||
) {
|
||||
const moved = nextPrimary.pop();
|
||||
if (moved === undefined) break;
|
||||
nextExtra.unshift(moved);
|
||||
}
|
||||
|
||||
return { primary: nextPrimary, extra: nextExtra };
|
||||
}
|
||||
|
||||
export function shouldShowFilterExpand(
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
28
src/prototypes/customer-payment-collection/index.tsx
Normal file
28
src/prototypes/customer-payment-collection/index.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* @name 客户回款情况
|
||||
* 自 ONE-OS Web 端 / 数据分析 / 客户回款情况 独立预览(OneOS 菜单入口)
|
||||
*/
|
||||
import '../../common/oneosWebLegacy/legacyGlobals';
|
||||
import React, { useEffect } from 'react';
|
||||
import * as antd from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { ConfigProvider } from 'antd';
|
||||
import 'antd/dist/reset.css';
|
||||
import { clearHostPrototypeRouteInfo } from '../../common/useHashPage';
|
||||
import CustomerPaymentCollectionPage from './pages/客户回款情况.jsx';
|
||||
|
||||
window.React = React;
|
||||
window.antd = antd;
|
||||
window.dayjs = dayjs;
|
||||
|
||||
export default function CustomerPaymentCollection() {
|
||||
useEffect(() => {
|
||||
clearHostPrototypeRouteInfo();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<CustomerPaymentCollectionPage />
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
847
src/prototypes/customer-payment-collection/pages/客户回款情况.jsx
Normal file
847
src/prototypes/customer-payment-collection/pages/客户回款情况.jsx
Normal file
@@ -0,0 +1,847 @@
|
||||
// 【重要】必须使用 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 Card = antd.Card;
|
||||
var Button = antd.Button;
|
||||
var Table = antd.Table;
|
||||
var Select = antd.Select;
|
||||
var DatePicker = antd.DatePicker;
|
||||
var Row = antd.Row;
|
||||
var Col = antd.Col;
|
||||
var Space = antd.Space;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var InputNumber = antd.InputNumber;
|
||||
var Tag = antd.Tag;
|
||||
var Statistic = antd.Statistic;
|
||||
var message = antd.message;
|
||||
|
||||
var LINE_DEFS = [
|
||||
{ key: 'lease', label: '租赁业务' },
|
||||
{ key: 'logistics', label: '物流业务' },
|
||||
{ key: 'h2', label: '氢费业务' },
|
||||
{ key: 'electricity', label: '电费业务' },
|
||||
{ key: 'etc', label: 'ETC业务' }
|
||||
];
|
||||
|
||||
var LINE_KEYS = LINE_DEFS.map(function (d) { return d.key; });
|
||||
|
||||
var CUSTOMER_SEEDS = [
|
||||
{ name: '嘉兴古道物流有限公司', dept: '业务二部', salesperson: '谈云' },
|
||||
{ name: '杭州绿道城配科技有限公司', dept: '业务二部', salesperson: '刘念念' },
|
||||
{ name: '宁波港联氢运物流有限公司', dept: '业务一部', salesperson: '谯云' },
|
||||
{ name: '上海虹钦物流有限公司', dept: '业务一部', salesperson: '董剑煜' },
|
||||
{ name: '嘉兴市乍浦港口经营有限公司', dept: '业务三部', salesperson: '尚建华' },
|
||||
{ name: '荣达餐饮(广东)集团有限公司', dept: '业务三部', salesperson: '谈云' },
|
||||
{ name: '苏州氢能城配科技有限公司', dept: '业务二部', salesperson: '刘念念' },
|
||||
{ name: '无锡绿运供应链有限公司', dept: '业务一部', salesperson: '谯云' }
|
||||
];
|
||||
|
||||
function filterOption(input, option) {
|
||||
var label = (option && (option.label || option.children)) || '';
|
||||
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
|
||||
}
|
||||
|
||||
function fmtMoney(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 numOrZero(v) {
|
||||
if (v === null || v === undefined || v === '') return 0;
|
||||
var n = Number(v);
|
||||
return isNaN(n) ? 0 : n;
|
||||
}
|
||||
|
||||
function escapeCsv(v) {
|
||||
var s = v == null ? '' : String(v);
|
||||
if (s.indexOf(',') !== -1 || s.indexOf('"') !== -1 || s.indexOf('\n') !== -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 defaultPeriodMonth() {
|
||||
try {
|
||||
if (window.dayjs) return window.dayjs('2026-07-01');
|
||||
} catch (e1) {}
|
||||
return null;
|
||||
}
|
||||
|
||||
function periodKeyFromMonth(m) {
|
||||
if (!m || !m.format) return '2026-07';
|
||||
return m.format('YYYY-MM');
|
||||
}
|
||||
|
||||
function periodLabel(key) {
|
||||
if (!key || key.indexOf('-') < 0) return key || '—';
|
||||
var parts = key.split('-');
|
||||
return parts[0] + '年' + Number(parts[1]) + '月';
|
||||
}
|
||||
|
||||
function lineLabel(key) {
|
||||
var found = LINE_DEFS.find(function (d) { return d.key === key; });
|
||||
return found ? found.label : key;
|
||||
}
|
||||
|
||||
function sumLineAmounts(lines, field) {
|
||||
var total = 0;
|
||||
LINE_KEYS.forEach(function (k) {
|
||||
total += numOrZero(lines && lines[k] && lines[k][field]);
|
||||
});
|
||||
return total;
|
||||
}
|
||||
|
||||
function periodUncollected(lines) {
|
||||
return sumLineAmounts(lines, 'receivable') - sumLineAmounts(lines, 'received');
|
||||
}
|
||||
|
||||
function buildSeedRecords() {
|
||||
var records = [];
|
||||
var months = ['2026-01', '2026-02', '2026-03', '2026-04', '2026-05', '2026-06', '2026-07'];
|
||||
CUSTOMER_SEEDS.forEach(function (c, ci) {
|
||||
var periods = months.map(function (pk, mi) {
|
||||
var lines = {};
|
||||
LINE_KEYS.forEach(function (lk, li) {
|
||||
var base = 28000 + ci * 4200 + mi * 1800 + li * 2600;
|
||||
var recv = Math.round(base * (0.85 + (ci % 3) * 0.05));
|
||||
var got = recv - (mi % 4 === 0 && li % 2 === 0 ? Math.round(recv * 0.18) : Math.round(recv * 0.06));
|
||||
lines[lk] = { receivable: recv, received: got };
|
||||
});
|
||||
return { periodKey: pk, lines: lines };
|
||||
});
|
||||
records.push({
|
||||
id: 'cust-' + ci,
|
||||
customerName: c.name,
|
||||
dept: c.dept,
|
||||
salesperson: c.salesperson,
|
||||
periods: periods
|
||||
});
|
||||
});
|
||||
return records;
|
||||
}
|
||||
|
||||
function enrichCustomerPeriods(customer) {
|
||||
var sorted = (customer.periods || []).slice().sort(function (a, b) {
|
||||
return String(a.periodKey).localeCompare(String(b.periodKey));
|
||||
});
|
||||
var cumulative = 0;
|
||||
return sorted.map(function (p) {
|
||||
var receivable = sumLineAmounts(p.lines, 'receivable');
|
||||
var received = sumLineAmounts(p.lines, 'received');
|
||||
var uncollected = receivable - received;
|
||||
cumulative += uncollected;
|
||||
return Object.assign({}, p, {
|
||||
receivable: receivable,
|
||||
received: received,
|
||||
uncollected: uncollected,
|
||||
endingBalance: cumulative
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function getCustomerPeriod(customer, periodKey) {
|
||||
var enriched = enrichCustomerPeriods(customer);
|
||||
return enriched.find(function (p) { return p.periodKey === periodKey; }) || null;
|
||||
}
|
||||
|
||||
function buildCustomerSummaryRows(records, periodKey, filters) {
|
||||
return records.map(function (cust) {
|
||||
var periods = enrichCustomerPeriods(cust);
|
||||
var current = periods.find(function (p) { return p.periodKey === periodKey; });
|
||||
if (!current) return null;
|
||||
if (filters.dept && cust.dept !== filters.dept) return null;
|
||||
if (filters.salesperson && cust.salesperson !== filters.salesperson) return null;
|
||||
if (filters.customer && cust.customerName !== filters.customer) return null;
|
||||
if (filters.lineKey) {
|
||||
var line = current.lines[filters.lineKey];
|
||||
if (!line || (line.receivable === 0 && line.received === 0)) return null;
|
||||
}
|
||||
return {
|
||||
key: cust.id,
|
||||
customerId: cust.id,
|
||||
customerName: cust.customerName,
|
||||
dept: cust.dept,
|
||||
salesperson: cust.salesperson,
|
||||
receivable: current.receivable,
|
||||
received: current.received,
|
||||
uncollected: current.uncollected,
|
||||
endingBalance: current.endingBalance,
|
||||
periodKey: periodKey
|
||||
};
|
||||
}).filter(Boolean);
|
||||
}
|
||||
|
||||
function buildLineRows(customer, periodKey) {
|
||||
var period = getCustomerPeriod(customer, periodKey);
|
||||
if (!period) return [];
|
||||
return LINE_DEFS.map(function (def) {
|
||||
var line = period.lines[def.key] || { receivable: 0, received: 0 };
|
||||
var recv = numOrZero(line.receivable);
|
||||
var got = numOrZero(line.received);
|
||||
return {
|
||||
key: def.key,
|
||||
lineKey: def.key,
|
||||
lineLabel: def.label,
|
||||
receivable: recv,
|
||||
received: got,
|
||||
uncollected: recv - got
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function updateLineReceived(records, customerId, periodKey, lineKey, newReceived) {
|
||||
return records.map(function (cust) {
|
||||
if (cust.id !== customerId) return cust;
|
||||
var periods = cust.periods.map(function (p) {
|
||||
if (p.periodKey !== periodKey) return p;
|
||||
var lines = Object.assign({}, p.lines);
|
||||
var prev = lines[lineKey] || { receivable: 0, received: 0 };
|
||||
lines[lineKey] = {
|
||||
receivable: prev.receivable,
|
||||
received: Math.max(0, numOrZero(newReceived))
|
||||
};
|
||||
return Object.assign({}, p, { lines: lines });
|
||||
});
|
||||
return Object.assign({}, cust, { periods: periods });
|
||||
});
|
||||
}
|
||||
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f7fa', minHeight: '100vh' };
|
||||
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||||
var filterItemStyle = { marginBottom: 12 };
|
||||
var filterControlStyle = { width: '100%' };
|
||||
var drillLinkStyle = { cursor: 'pointer', color: '#165dff', border: 'none', background: 'none', padding: 0, font: 'inherit' };
|
||||
var moneyCellStyle = { fontVariantNumeric: 'tabular-nums' };
|
||||
var warnStyle = { color: '#cf1322', fontVariantNumeric: 'tabular-nums' };
|
||||
|
||||
var tableStyle =
|
||||
'.cpr-table .ant-table-thead>tr>th{background:#e8f3ff!important;font-weight:500;font-size:13px}' +
|
||||
'.cpr-table .ant-table-tbody>tr>td{white-space:nowrap}' +
|
||||
'.cpr-table .ant-table-summary{background:#fafafa;font-weight:600}' +
|
||||
'.cpr-kpi .ant-statistic-title{font-size:13px;color:rgba(0,0,0,0.55)}' +
|
||||
'.cpr-kpi .ant-statistic-content{font-variant-numeric:tabular-nums}';
|
||||
|
||||
var recordsState = useState(buildSeedRecords);
|
||||
var records = recordsState[0];
|
||||
var setRecords = recordsState[1];
|
||||
|
||||
var periodDraftState = useState(defaultPeriodMonth);
|
||||
var periodDraft = periodDraftState[0];
|
||||
var setPeriodDraft = periodDraftState[1];
|
||||
var periodAppliedState = useState(defaultPeriodMonth);
|
||||
var periodApplied = periodAppliedState[0];
|
||||
var setPeriodApplied = periodAppliedState[1];
|
||||
|
||||
var deptDraftState = useState(undefined);
|
||||
var deptDraft = deptDraftState[0];
|
||||
var setDeptDraft = deptDraftState[1];
|
||||
var deptAppliedState = useState(undefined);
|
||||
var deptApplied = deptAppliedState[0];
|
||||
var setDeptApplied = deptAppliedState[1];
|
||||
|
||||
var spDraftState = useState(undefined);
|
||||
var spDraft = spDraftState[0];
|
||||
var setSpDraft = spDraftState[1];
|
||||
var spAppliedState = useState(undefined);
|
||||
var spApplied = spAppliedState[0];
|
||||
var setSpApplied = spAppliedState[1];
|
||||
|
||||
var cuDraftState = useState(undefined);
|
||||
var cuDraft = cuDraftState[0];
|
||||
var setCuDraft = cuDraftState[1];
|
||||
var cuAppliedState = useState(undefined);
|
||||
var cuApplied = cuAppliedState[0];
|
||||
var setCuApplied = cuAppliedState[1];
|
||||
|
||||
var lineDraftState = useState(undefined);
|
||||
var lineDraft = lineDraftState[0];
|
||||
var setLineDraft = lineDraftState[1];
|
||||
var lineAppliedState = useState(undefined);
|
||||
var lineApplied = lineAppliedState[0];
|
||||
var setLineApplied = lineAppliedState[1];
|
||||
|
||||
var viewState = useState({ level: 'list', customerId: null, periodKey: null });
|
||||
var view = viewState[0];
|
||||
var setView = viewState[1];
|
||||
|
||||
var appliedPeriodKey = useMemo(function () {
|
||||
return periodKeyFromMonth(periodApplied);
|
||||
}, [periodApplied]);
|
||||
|
||||
var filters = useMemo(function () {
|
||||
return {
|
||||
dept: deptApplied,
|
||||
salesperson: spApplied,
|
||||
customer: cuApplied,
|
||||
lineKey: lineApplied
|
||||
};
|
||||
}, [deptApplied, spApplied, cuApplied, lineApplied]);
|
||||
|
||||
var summaryRows = useMemo(function () {
|
||||
return buildCustomerSummaryRows(records, appliedPeriodKey, filters);
|
||||
}, [records, appliedPeriodKey, filters]);
|
||||
|
||||
var activeCustomer = useMemo(function () {
|
||||
if (!view.customerId) return null;
|
||||
return records.find(function (r) { return r.id === view.customerId; }) || null;
|
||||
}, [records, view.customerId]);
|
||||
|
||||
var customerPeriodRows = useMemo(function () {
|
||||
if (!activeCustomer) return [];
|
||||
return enrichCustomerPeriods(activeCustomer);
|
||||
}, [activeCustomer]);
|
||||
|
||||
var lineRows = useMemo(function () {
|
||||
if (!activeCustomer || !view.periodKey) return [];
|
||||
return buildLineRows(activeCustomer, view.periodKey);
|
||||
}, [activeCustomer, view.periodKey]);
|
||||
|
||||
var kpi = useMemo(function () {
|
||||
var recv = 0;
|
||||
var got = 0;
|
||||
var endBal = 0;
|
||||
summaryRows.forEach(function (r) {
|
||||
recv += numOrZero(r.receivable);
|
||||
got += numOrZero(r.received);
|
||||
endBal += numOrZero(r.endingBalance);
|
||||
});
|
||||
return {
|
||||
customerCount: summaryRows.length,
|
||||
receivable: recv,
|
||||
received: got,
|
||||
uncollected: recv - got,
|
||||
endingBalance: endBal
|
||||
};
|
||||
}, [summaryRows]);
|
||||
|
||||
var deptOptions = useMemo(function () {
|
||||
var set = {};
|
||||
records.forEach(function (r) { set[r.dept] = true; });
|
||||
return [{ value: '', label: '全部部门' }].concat(Object.keys(set).sort().map(function (d) {
|
||||
return { value: d, label: d };
|
||||
}));
|
||||
}, [records]);
|
||||
|
||||
var spOptions = useMemo(function () {
|
||||
var set = {};
|
||||
records.forEach(function (r) { set[r.salesperson] = true; });
|
||||
return [{ value: '', label: '全部业务员' }].concat(Object.keys(set).sort().map(function (s) {
|
||||
return { value: s, label: s };
|
||||
}));
|
||||
}, [records]);
|
||||
|
||||
var cuOptions = useMemo(function () {
|
||||
return [{ value: '', label: '全部客户' }].concat(records.map(function (r) {
|
||||
return { value: r.customerName, label: r.customerName };
|
||||
}));
|
||||
}, [records]);
|
||||
|
||||
var lineOptions = useMemo(function () {
|
||||
return [{ value: '', label: '全部条线' }].concat(LINE_DEFS.map(function (d) {
|
||||
return { value: d.key, label: d.label };
|
||||
}));
|
||||
}, []);
|
||||
|
||||
var handleQuery = useCallback(function () {
|
||||
setPeriodApplied(periodDraft);
|
||||
setDeptApplied(deptDraft || undefined);
|
||||
setSpApplied(spDraft || undefined);
|
||||
setCuApplied(cuDraft || undefined);
|
||||
setLineApplied(lineDraft || undefined);
|
||||
setView({ level: 'list', customerId: null, periodKey: null });
|
||||
}, [periodDraft, deptDraft, spDraft, cuDraft, lineDraft]);
|
||||
|
||||
var handleReset = useCallback(function () {
|
||||
var p0 = defaultPeriodMonth();
|
||||
setPeriodDraft(p0);
|
||||
setPeriodApplied(p0);
|
||||
setDeptDraft(undefined);
|
||||
setDeptApplied(undefined);
|
||||
setSpDraft(undefined);
|
||||
setSpApplied(undefined);
|
||||
setCuDraft(undefined);
|
||||
setCuApplied(undefined);
|
||||
setLineDraft(undefined);
|
||||
setLineApplied(undefined);
|
||||
setView({ level: 'list', customerId: null, periodKey: null });
|
||||
}, []);
|
||||
|
||||
var openCustomer = useCallback(function (customerId) {
|
||||
setView({ level: 'customer', customerId: customerId, periodKey: null });
|
||||
}, []);
|
||||
|
||||
var openPeriod = useCallback(function (periodKey) {
|
||||
setView(function (prev) {
|
||||
return Object.assign({}, prev, { level: 'period', periodKey: periodKey });
|
||||
});
|
||||
}, []);
|
||||
|
||||
var backToList = useCallback(function () {
|
||||
setView({ level: 'list', customerId: null, periodKey: null });
|
||||
}, []);
|
||||
|
||||
var backToCustomer = useCallback(function () {
|
||||
setView(function (prev) {
|
||||
return Object.assign({}, prev, { level: 'customer', periodKey: null });
|
||||
});
|
||||
}, []);
|
||||
|
||||
var handleLineReceivedChange = useCallback(function (lineKey, value) {
|
||||
if (!activeCustomer || !view.periodKey) return;
|
||||
var period = getCustomerPeriod(activeCustomer, view.periodKey);
|
||||
if (!period) return;
|
||||
var line = period.lines[lineKey] || { receivable: 0, received: 0 };
|
||||
var recv = numOrZero(line.receivable);
|
||||
var got = numOrZero(value);
|
||||
if (got > recv) {
|
||||
message.warning('实收不能超过应收');
|
||||
return;
|
||||
}
|
||||
setRecords(function (prev) {
|
||||
return updateLineReceived(prev, activeCustomer.id, view.periodKey, lineKey, got);
|
||||
});
|
||||
}, [activeCustomer, view.periodKey]);
|
||||
|
||||
var exportListCsv = useCallback(function () {
|
||||
var headers = ['客户名称', '业务部门', '业务员', '统计周期', '应收', '实收', '未收', '期末余额'];
|
||||
var lines = [headers];
|
||||
summaryRows.forEach(function (r) {
|
||||
lines.push([
|
||||
r.customerName, r.dept, r.salesperson, periodLabel(appliedPeriodKey),
|
||||
r.receivable, r.received, r.uncollected, r.endingBalance
|
||||
]);
|
||||
});
|
||||
downloadCsv('客户回款情况_' + appliedPeriodKey + '.csv', lines);
|
||||
message.success('已导出客户汇总');
|
||||
}, [summaryRows, appliedPeriodKey]);
|
||||
|
||||
var exportCustomerCsv = useCallback(function () {
|
||||
if (!activeCustomer) return;
|
||||
var headers = ['账单周期', '应收', '实收', '未收', '期末余额'];
|
||||
var lines = [headers];
|
||||
customerPeriodRows.forEach(function (r) {
|
||||
lines.push([periodLabel(r.periodKey), r.receivable, r.received, r.uncollected, r.endingBalance]);
|
||||
});
|
||||
downloadCsv(activeCustomer.customerName + '_账单周期回款.csv', lines);
|
||||
message.success('已导出账单周期明细');
|
||||
}, [activeCustomer, customerPeriodRows]);
|
||||
|
||||
var exportLineCsv = useCallback(function () {
|
||||
if (!activeCustomer || !view.periodKey) return;
|
||||
var headers = ['业务条线', '应收', '实收', '未收'];
|
||||
var lines = [headers];
|
||||
lineRows.forEach(function (r) {
|
||||
lines.push([r.lineLabel, r.receivable, r.received, r.uncollected]);
|
||||
});
|
||||
downloadCsv(activeCustomer.customerName + '_' + view.periodKey + '_条线回款.csv', lines);
|
||||
message.success('已导出条线明细');
|
||||
}, [activeCustomer, view.periodKey, lineRows]);
|
||||
|
||||
var summaryFooter = useCallback(function () {
|
||||
var recv = 0;
|
||||
var got = 0;
|
||||
var uncol = 0;
|
||||
var endBal = 0;
|
||||
summaryRows.forEach(function (r) {
|
||||
recv += numOrZero(r.receivable);
|
||||
got += numOrZero(r.received);
|
||||
uncol += numOrZero(r.uncollected);
|
||||
endBal += numOrZero(r.endingBalance);
|
||||
});
|
||||
return React.createElement(Table.Summary, { fixed: true },
|
||||
React.createElement(Table.Summary.Row, null,
|
||||
React.createElement(Table.Summary.Cell, { index: 0, colSpan: 3 }, '合计(' + summaryRows.length + ' 家客户)'),
|
||||
React.createElement(Table.Summary.Cell, { index: 3, align: 'right' }, React.createElement('span', { style: moneyCellStyle }, fmtMoney(recv))),
|
||||
React.createElement(Table.Summary.Cell, { index: 4, align: 'right' }, React.createElement('span', { style: moneyCellStyle }, fmtMoney(got))),
|
||||
React.createElement(Table.Summary.Cell, { index: 5, align: 'right' }, React.createElement('span', { style: uncol > 0 ? warnStyle : moneyCellStyle }, fmtMoney(uncol))),
|
||||
React.createElement(Table.Summary.Cell, { index: 6, align: 'right' }, React.createElement('span', { style: endBal > 0 ? warnStyle : moneyCellStyle }, fmtMoney(endBal))),
|
||||
React.createElement(Table.Summary.Cell, { index: 7 })
|
||||
)
|
||||
);
|
||||
}, [summaryRows]);
|
||||
|
||||
var listColumns = [
|
||||
{
|
||||
title: '客户名称',
|
||||
dataIndex: 'customerName',
|
||||
key: 'customerName',
|
||||
width: 220,
|
||||
fixed: 'left',
|
||||
render: function (v, row) {
|
||||
return React.createElement('button', {
|
||||
type: 'button',
|
||||
className: 'cpr-drill-link',
|
||||
style: drillLinkStyle,
|
||||
onClick: function () { openCustomer(row.customerId); }
|
||||
}, v);
|
||||
}
|
||||
},
|
||||
{ title: '业务部门', dataIndex: 'dept', key: 'dept', width: 110 },
|
||||
{ title: '业务员', dataIndex: 'salesperson', key: 'salesperson', width: 100 },
|
||||
{
|
||||
title: '当期应收',
|
||||
dataIndex: 'receivable',
|
||||
key: 'receivable',
|
||||
width: 120,
|
||||
align: 'right',
|
||||
render: function (v) { return React.createElement('span', { style: moneyCellStyle }, fmtMoney(v)); }
|
||||
},
|
||||
{
|
||||
title: '当期实收',
|
||||
dataIndex: 'received',
|
||||
key: 'received',
|
||||
width: 120,
|
||||
align: 'right',
|
||||
render: function (v) { return React.createElement('span', { style: moneyCellStyle }, fmtMoney(v)); }
|
||||
},
|
||||
{
|
||||
title: '当期未收',
|
||||
dataIndex: 'uncollected',
|
||||
key: 'uncollected',
|
||||
width: 120,
|
||||
align: 'right',
|
||||
render: function (v) {
|
||||
return React.createElement('span', { style: v > 0 ? warnStyle : moneyCellStyle }, fmtMoney(v));
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '期末余额',
|
||||
dataIndex: 'endingBalance',
|
||||
key: 'endingBalance',
|
||||
width: 130,
|
||||
align: 'right',
|
||||
render: function (v) {
|
||||
return React.createElement('span', {
|
||||
style: v > 0 ? warnStyle : moneyCellStyle,
|
||||
title: '截至本期的累计未收余额(含历史各期未收之和)'
|
||||
}, fmtMoney(v));
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 88,
|
||||
fixed: 'right',
|
||||
render: function (_, row) {
|
||||
return React.createElement(Button, {
|
||||
type: 'link',
|
||||
size: 'small',
|
||||
onClick: function () { openCustomer(row.customerId); }
|
||||
}, '钻取');
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
var periodColumns = [
|
||||
{
|
||||
title: '账单周期',
|
||||
dataIndex: 'periodKey',
|
||||
key: 'periodKey',
|
||||
width: 140,
|
||||
render: function (v, row) {
|
||||
return React.createElement('button', {
|
||||
type: 'button',
|
||||
style: drillLinkStyle,
|
||||
onClick: function () { openPeriod(row.periodKey); }
|
||||
}, periodLabel(v));
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '应收',
|
||||
dataIndex: 'receivable',
|
||||
key: 'receivable',
|
||||
align: 'right',
|
||||
render: function (v) { return React.createElement('span', { style: moneyCellStyle }, fmtMoney(v)); }
|
||||
},
|
||||
{
|
||||
title: '实收',
|
||||
dataIndex: 'received',
|
||||
key: 'received',
|
||||
align: 'right',
|
||||
render: function (v) { return React.createElement('span', { style: moneyCellStyle }, fmtMoney(v)); }
|
||||
},
|
||||
{
|
||||
title: '未收',
|
||||
dataIndex: 'uncollected',
|
||||
key: 'uncollected',
|
||||
align: 'right',
|
||||
render: function (v) {
|
||||
return React.createElement('span', { style: v > 0 ? warnStyle : moneyCellStyle }, fmtMoney(v));
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '期末余额',
|
||||
dataIndex: 'endingBalance',
|
||||
key: 'endingBalance',
|
||||
align: 'right',
|
||||
render: function (v) {
|
||||
return React.createElement('span', { style: v > 0 ? warnStyle : moneyCellStyle }, fmtMoney(v));
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
render: function (_, row) {
|
||||
return React.createElement(Button, {
|
||||
type: 'link',
|
||||
size: 'small',
|
||||
onClick: function () { openPeriod(row.periodKey); }
|
||||
}, '条线明细');
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
var lineColumns = [
|
||||
{ title: '业务条线', dataIndex: 'lineLabel', key: 'lineLabel', width: 120 },
|
||||
{
|
||||
title: '应收',
|
||||
dataIndex: 'receivable',
|
||||
key: 'receivable',
|
||||
align: 'right',
|
||||
render: function (v) { return React.createElement('span', { style: moneyCellStyle }, fmtMoney(v)); }
|
||||
},
|
||||
{
|
||||
title: '实收',
|
||||
dataIndex: 'received',
|
||||
key: 'received',
|
||||
align: 'right',
|
||||
width: 160,
|
||||
render: function (v, row) {
|
||||
return React.createElement(InputNumber, {
|
||||
min: 0,
|
||||
max: numOrZero(row.receivable),
|
||||
step: 100,
|
||||
value: numOrZero(v),
|
||||
formatter: function (val) { return val == null ? '' : String(val); },
|
||||
parser: function (val) { return val ? val.replace(/,/g, '') : ''; },
|
||||
style: { width: '100%' },
|
||||
onChange: function (val) { handleLineReceivedChange(row.lineKey, val); }
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '未收',
|
||||
dataIndex: 'uncollected',
|
||||
key: 'uncollected',
|
||||
align: 'right',
|
||||
render: function (v) {
|
||||
return React.createElement('span', { style: v > 0 ? warnStyle : moneyCellStyle }, fmtMoney(v));
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
var breadcrumbItems = useMemo(function () {
|
||||
var items = [{ title: React.createElement('button', { type: 'button', style: drillLinkStyle, onClick: backToList }, '客户回款情况') }];
|
||||
if (view.level !== 'list' && activeCustomer) {
|
||||
items.push({
|
||||
title: view.level === 'customer'
|
||||
? activeCustomer.customerName
|
||||
: React.createElement('button', { type: 'button', style: drillLinkStyle, onClick: backToCustomer }, activeCustomer.customerName)
|
||||
});
|
||||
}
|
||||
if (view.level === 'period' && view.periodKey) {
|
||||
items.push({ title: periodLabel(view.periodKey) });
|
||||
}
|
||||
return items;
|
||||
}, [view, activeCustomer, backToList, backToCustomer]);
|
||||
|
||||
var pageTitle = view.level === 'list'
|
||||
? '客户回款情况'
|
||||
: view.level === 'customer'
|
||||
? activeCustomer ? activeCustomer.customerName + ' · 账单周期' : '账单周期'
|
||||
: '业务条线回款明细';
|
||||
|
||||
var pageHint = view.level === 'list'
|
||||
? '默认展示当期(' + periodLabel(appliedPeriodKey) + ')全部客户的应收、实收与期末余额;期末余额为截至当期的累计未收。'
|
||||
: view.level === 'customer'
|
||||
? '按账单周期查看该客户各期回款;期末余额逐期累加历史未收。'
|
||||
: '调整实收后,当期未收与本客户后续各期期末余额将实时重算。';
|
||||
|
||||
var exportHandler = view.level === 'list' ? exportListCsv : view.level === 'customer' ? exportCustomerCsv : exportLineCsv;
|
||||
|
||||
var tableData = view.level === 'list'
|
||||
? summaryRows
|
||||
: view.level === 'customer'
|
||||
? customerPeriodRows
|
||||
: lineRows;
|
||||
|
||||
var tableColumns = view.level === 'list'
|
||||
? listColumns
|
||||
: view.level === 'customer'
|
||||
? periodColumns
|
||||
: lineColumns;
|
||||
|
||||
var activePeriodSummary = useMemo(function () {
|
||||
if (!activeCustomer || !view.periodKey) return null;
|
||||
return getCustomerPeriod(activeCustomer, view.periodKey);
|
||||
}, [activeCustomer, view.periodKey, records]);
|
||||
|
||||
return React.createElement(App, null,
|
||||
React.createElement('style', null, tableStyle),
|
||||
React.createElement('div', { style: layoutStyle },
|
||||
React.createElement(Card, {
|
||||
bordered: false,
|
||||
style: { marginBottom: 16 },
|
||||
title: pageTitle,
|
||||
extra: React.createElement(Space, null,
|
||||
view.level !== 'list' ? React.createElement(Button, { onClick: view.level === 'period' ? backToCustomer : backToList }, '返回上一级') : null,
|
||||
React.createElement(Button, { onClick: exportHandler }, '导出 CSV')
|
||||
)
|
||||
},
|
||||
React.createElement(Breadcrumb, { items: breadcrumbItems, style: { marginBottom: 12 } }),
|
||||
React.createElement('div', { style: { marginBottom: 16, color: 'rgba(0,0,0,0.55)', fontSize: 13 } }, pageHint),
|
||||
view.level === 'list' ? React.createElement(Row, { gutter: 16, style: { marginBottom: 16 }, className: 'cpr-kpi' },
|
||||
React.createElement(Col, { xs: 12, sm: 8, md: 4 },
|
||||
React.createElement(Statistic, { title: '客户数', value: kpi.customerCount, suffix: '家' })
|
||||
),
|
||||
React.createElement(Col, { xs: 12, sm: 8, md: 5 },
|
||||
React.createElement(Statistic, { title: '当期应收合计', value: kpi.receivable, precision: 2, suffix: '元' })
|
||||
),
|
||||
React.createElement(Col, { xs: 12, sm: 8, md: 5 },
|
||||
React.createElement(Statistic, { title: '当期实收合计', value: kpi.received, precision: 2, suffix: '元' })
|
||||
),
|
||||
React.createElement(Col, { xs: 12, sm: 8, md: 5 },
|
||||
React.createElement(Statistic, { title: '当期未收合计', value: kpi.uncollected, precision: 2, suffix: '元', valueStyle: kpi.uncollected > 0 ? { color: '#cf1322' } : undefined })
|
||||
),
|
||||
React.createElement(Col, { xs: 12, sm: 8, md: 5 },
|
||||
React.createElement(Statistic, { title: '期末余额合计', value: kpi.endingBalance, precision: 2, suffix: '元', valueStyle: kpi.endingBalance > 0 ? { color: '#cf1322' } : undefined })
|
||||
)
|
||||
) : null,
|
||||
view.level === 'period' && activePeriodSummary ? React.createElement(Row, { gutter: 16, style: { marginBottom: 16 }, className: 'cpr-kpi' },
|
||||
React.createElement(Col, { span: 6 },
|
||||
React.createElement(Statistic, { title: '本期应收', value: activePeriodSummary.receivable, precision: 2, suffix: '元' })
|
||||
),
|
||||
React.createElement(Col, { span: 6 },
|
||||
React.createElement(Statistic, { title: '本期实收', value: activePeriodSummary.received, precision: 2, suffix: '元' })
|
||||
),
|
||||
React.createElement(Col, { span: 6 },
|
||||
React.createElement(Statistic, { title: '本期未收', value: activePeriodSummary.uncollected, precision: 2, suffix: '元', valueStyle: activePeriodSummary.uncollected > 0 ? { color: '#cf1322' } : undefined })
|
||||
),
|
||||
React.createElement(Col, { span: 6 },
|
||||
React.createElement(Statistic, { title: '期末余额', value: activePeriodSummary.endingBalance, precision: 2, suffix: '元', valueStyle: activePeriodSummary.endingBalance > 0 ? { color: '#cf1322' } : undefined })
|
||||
)
|
||||
) : null,
|
||||
view.level === 'list' ? React.createElement(Card, {
|
||||
size: 'small',
|
||||
style: { marginBottom: 16, background: '#fafafa' },
|
||||
title: '筛选条件'
|
||||
},
|
||||
React.createElement(Row, { gutter: 16 },
|
||||
React.createElement(Col, { xs: 24, sm: 12, md: 6 },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '统计周期'),
|
||||
React.createElement(DatePicker, {
|
||||
picker: 'month',
|
||||
style: filterControlStyle,
|
||||
value: periodDraft,
|
||||
onChange: setPeriodDraft,
|
||||
allowClear: false
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { xs: 24, sm: 12, md: 6 },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '客户名称'),
|
||||
React.createElement(Select, {
|
||||
showSearch: true,
|
||||
allowClear: true,
|
||||
placeholder: '全部客户',
|
||||
style: filterControlStyle,
|
||||
options: cuOptions,
|
||||
value: cuDraft,
|
||||
onChange: setCuDraft,
|
||||
filterOption: filterOption
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { xs: 24, sm: 12, md: 6 },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '业务部门'),
|
||||
React.createElement(Select, {
|
||||
allowClear: true,
|
||||
placeholder: '全部部门',
|
||||
style: filterControlStyle,
|
||||
options: deptOptions,
|
||||
value: deptDraft,
|
||||
onChange: setDeptDraft
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { xs: 24, sm: 12, md: 6 },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '业务员'),
|
||||
React.createElement(Select, {
|
||||
showSearch: true,
|
||||
allowClear: true,
|
||||
placeholder: '全部业务员',
|
||||
style: filterControlStyle,
|
||||
options: spOptions,
|
||||
value: spDraft,
|
||||
onChange: setSpDraft,
|
||||
filterOption: filterOption
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { xs: 24, sm: 12, md: 6 },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '业务条线'),
|
||||
React.createElement(Select, {
|
||||
allowClear: true,
|
||||
placeholder: '全部条线',
|
||||
style: filterControlStyle,
|
||||
options: lineOptions,
|
||||
value: lineDraft,
|
||||
onChange: setLineDraft
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { xs: 24, sm: 12, md: 6 },
|
||||
React.createElement('div', { style: Object.assign({}, filterItemStyle, { paddingTop: 28 }) },
|
||||
React.createElement(Space, null,
|
||||
React.createElement(Button, { type: 'primary', onClick: handleQuery }, '查询'),
|
||||
React.createElement(Button, { onClick: handleReset }, '重置')
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
) : null,
|
||||
view.level === 'period' ? React.createElement(Tag, { color: 'processing', style: { marginBottom: 12 } }, '可在「实收」列直接修改,期末余额将实时联动') : null,
|
||||
React.createElement(Table, {
|
||||
className: 'cpr-table',
|
||||
size: 'small',
|
||||
bordered: true,
|
||||
scroll: { x: view.level === 'list' ? 980 : 720 },
|
||||
columns: tableColumns,
|
||||
dataSource: tableData,
|
||||
pagination: view.level === 'list' ? { pageSize: 10, showSizeChanger: true, showTotal: function (t) { return '共 ' + t + ' 条'; } } : false,
|
||||
summary: view.level === 'list' ? summaryFooter : undefined,
|
||||
locale: { emptyText: '暂无符合条件的数据' }
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export default Component;
|
||||
@@ -6,6 +6,11 @@
|
||||
|
||||
import React, { useState, useMemo, useCallback, useRef } from 'react';
|
||||
import { OperationActions } from '../../common/OperationActions';
|
||||
import {
|
||||
shouldShowFilterExpand,
|
||||
splitFilterFields,
|
||||
VM_FILTER_PRIMARY_VISIBLE_COUNT,
|
||||
} from '../../common/vm-filter-panel';
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
import {
|
||||
@@ -6335,7 +6340,7 @@ const Component = function () {
|
||||
};
|
||||
|
||||
const renderFilterField = (label, control) => (
|
||||
<label className="lc-filter-field">
|
||||
<label key={label} className="lc-filter-field">
|
||||
<span className="lc-filter-field-label">{label}</span>
|
||||
<div className="lc-filter-field-control">{control}</div>
|
||||
</label>
|
||||
@@ -6498,14 +6503,17 @@ const Component = function () {
|
||||
onHeaderCell: listColumnHeaderCell,
|
||||
render: (record) => (
|
||||
<OperationActions
|
||||
view={{ label: '管理', onClick: () => openVehicleInsuranceMgmt(record) }}
|
||||
more={[{ key: 'manage', label: '管理', onClick: () => openVehicleInsuranceMgmt(record) }]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const listFilterFieldNodes = [
|
||||
renderFilterField('车牌号', (
|
||||
const listFilterFields = [
|
||||
{
|
||||
key: 'plateNo',
|
||||
active: Boolean(String(listFilters.plateNo || '').trim()),
|
||||
node: renderFilterField('车牌号', (
|
||||
<Input
|
||||
placeholder={appliedMultiPlates.length ? '已启用多车牌筛选' : '请输入车牌号'}
|
||||
allowClear
|
||||
@@ -6515,7 +6523,11 @@ const Component = function () {
|
||||
onPressEnter={handleListFilterQuery}
|
||||
/>
|
||||
)),
|
||||
renderFilterField('多车牌', (
|
||||
},
|
||||
{
|
||||
key: 'plateNos',
|
||||
active: Boolean(String(listFilters.plateNos || multiPlateDraft || '').trim()),
|
||||
node: renderFilterField('多车牌', (
|
||||
<Popover
|
||||
open={multiPlateOpen}
|
||||
onOpenChange={handleMultiPlateOpenChange}
|
||||
@@ -6545,7 +6557,11 @@ const Component = function () {
|
||||
/>
|
||||
</Popover>
|
||||
)),
|
||||
renderFilterField('VIN码', (
|
||||
},
|
||||
{
|
||||
key: 'vin',
|
||||
active: Boolean(String(listFilters.vin || '').trim()),
|
||||
node: renderFilterField('VIN码', (
|
||||
<Input
|
||||
placeholder="请输入车辆识别代码"
|
||||
allowClear
|
||||
@@ -6554,7 +6570,11 @@ const Component = function () {
|
||||
onPressEnter={handleListFilterQuery}
|
||||
/>
|
||||
)),
|
||||
renderFilterField('品牌', (
|
||||
},
|
||||
{
|
||||
key: 'brand',
|
||||
active: Boolean(listFilters.brand),
|
||||
node: renderFilterField('品牌', (
|
||||
<Select
|
||||
placeholder="请选择或输入品牌"
|
||||
allowClear
|
||||
@@ -6566,7 +6586,11 @@ const Component = function () {
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
)),
|
||||
renderFilterField('型号', (
|
||||
},
|
||||
{
|
||||
key: 'model',
|
||||
active: Boolean(listFilters.model),
|
||||
node: renderFilterField('型号', (
|
||||
<Select
|
||||
placeholder="请选择或输入型号"
|
||||
allowClear
|
||||
@@ -6578,7 +6602,11 @@ const Component = function () {
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
)),
|
||||
renderFilterField('运营状态', (
|
||||
},
|
||||
{
|
||||
key: 'operateStatus',
|
||||
active: listFilters.operateStatus !== '全部',
|
||||
node: renderFilterField('运营状态', (
|
||||
<Select
|
||||
value={listFilters.operateStatus}
|
||||
onChange={(val) => setListFilters((prev) => ({ ...prev, operateStatus: val }))}
|
||||
@@ -6591,7 +6619,11 @@ const Component = function () {
|
||||
<Select.Option value="退出运营">退出运营</Select.Option>
|
||||
</Select>
|
||||
)),
|
||||
renderFilterField('保险状态', (
|
||||
},
|
||||
{
|
||||
key: 'insuranceStatus',
|
||||
active: listFilters.insuranceStatus !== '全部',
|
||||
node: renderFilterField('保险状态', (
|
||||
<Select
|
||||
value={listFilters.insuranceStatus}
|
||||
onChange={(val) => setListFilters((prev) => ({ ...prev, insuranceStatus: val }))}
|
||||
@@ -6602,7 +6634,11 @@ const Component = function () {
|
||||
<Select.Option value="异常">异常</Select.Option>
|
||||
</Select>
|
||||
)),
|
||||
renderFilterField('保险类型', (
|
||||
},
|
||||
{
|
||||
key: 'insuranceType',
|
||||
active: Boolean(listFilters.insuranceType),
|
||||
node: renderFilterField('保险类型', (
|
||||
<Select
|
||||
placeholder="请选择险种"
|
||||
allowClear
|
||||
@@ -6619,7 +6655,11 @@ const Component = function () {
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
)),
|
||||
renderFilterField('到期时间', (
|
||||
},
|
||||
{
|
||||
key: 'endDateRange',
|
||||
active: Boolean(listFilters.endDateRange?.[0] || listFilters.endDateRange?.[1]),
|
||||
node: renderFilterField('到期时间', (
|
||||
<Tooltip title={listFilters.insuranceType ? '' : '须先选择保险类型'}>
|
||||
<DatePicker.RangePicker
|
||||
style={{ width: '100%' }}
|
||||
@@ -6637,21 +6677,55 @@ const Component = function () {
|
||||
/>
|
||||
</Tooltip>
|
||||
)),
|
||||
},
|
||||
];
|
||||
|
||||
const listFilterSplit = splitFilterFields(listFilterFields, VM_FILTER_PRIMARY_VISIBLE_COUNT);
|
||||
const listFilterPrimary = listFilterSplit.primary;
|
||||
const listFilterExtra = listFilterSplit.extra;
|
||||
const showListFilterExpand = shouldShowFilterExpand(listFilterFields.length);
|
||||
const listFilterExtraActiveCount = listFilterExtra.filter((field) => field.active).length;
|
||||
const listFilterExpandPanelId = 'ipc-filter-expand-panel';
|
||||
|
||||
return (
|
||||
<div className="vm-page ipc-page">
|
||||
<style>{PAGE_STYLE}</style>
|
||||
|
||||
<div className="ipc-list-shell">
|
||||
<Card className="lc-filter-card" data-annotation-id="ipc-filter" title="筛选条件" bordered={false}>
|
||||
<div className="lc-filter-grid">
|
||||
{(listFilterExpanded ? listFilterFieldNodes : listFilterFieldNodes.slice(0, 4))}
|
||||
<div className="vm-filter-body">
|
||||
<div className="lc-filter-grid vm-filter-grid--primary" data-filter-tier="primary">
|
||||
{listFilterPrimary.map((field) => field.node)}
|
||||
</div>
|
||||
{showListFilterExpand ? (
|
||||
<div
|
||||
className={`vm-filter-expand${listFilterExpanded ? ' is-expanded' : ''}`}
|
||||
aria-hidden={!listFilterExpanded}
|
||||
id={listFilterExpandPanelId}
|
||||
>
|
||||
<div className="vm-filter-expand-inner">
|
||||
<div className="lc-filter-grid vm-filter-expand-grid" data-filter-tier="extra">
|
||||
{listFilterExpanded ? listFilterExtra.map((field) => field.node) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="lc-filter-actions">
|
||||
{listFilterFieldNodes.length > 4 ? (
|
||||
<Button type="link" className="lc-filter-expand-btn" onClick={() => setListFilterExpanded((prev) => !prev)}>
|
||||
{showListFilterExpand ? (
|
||||
<Button
|
||||
type="link"
|
||||
className="lc-filter-expand-btn vm-filter-toggle"
|
||||
onClick={() => setListFilterExpanded((prev) => !prev)}
|
||||
aria-expanded={listFilterExpanded}
|
||||
aria-controls={listFilterExpandPanelId}
|
||||
>
|
||||
{listFilterExpanded ? '收起' : '更多筛选'}
|
||||
{listFilterExtraActiveCount > 0 && !listFilterExpanded ? (
|
||||
<span className="vm-filter-toggle-badge" aria-label={`已设置 ${listFilterExtraActiveCount} 项扩展筛选`}>
|
||||
{listFilterExtraActiveCount}
|
||||
</span>
|
||||
) : null}
|
||||
</Button>
|
||||
) : null}
|
||||
<Button onClick={handleListFilterReset}>重置</Button>
|
||||
|
||||
@@ -480,10 +480,10 @@
|
||||
},
|
||||
"markdownMap": {
|
||||
"ipc-header": "# 模块边界\n\n保险采购包含两条**相互独立**的业务线:\n\n1. **保单管理**:一车一档台账,OCR/导入/手工录入,停保/复驶/退保留痕,与车辆管理交车合规联动。\n2. **比价单**:采购前多方报价、批次管理、最晚付费预警、采购审批;**审批通过不自动写入保单台账**。\n\n右上角「查看需求说明」含完整研发 PRD。",
|
||||
"ipc-filter": "# 筛选条件\n\n| 字段 | 说明 |\n|------|------|\n| 车牌号 | 单车模糊匹配;与多车牌互斥 |\n| 多车牌 | 每行一个或逗号分隔 |\n| VIN | 车辆识别代码 |\n| 品牌/型号 | 下拉可搜 |\n| 运营状态 | 租赁/自营/库存/退出运营 |\n| 保险状态 | 正常/临期 或 异常 |\n| 保险类型 + 到期时间 | 须先选险种再选日期范围 |\n\n点击「查询」应用条件;「重置」清空。",
|
||||
"ipc-filter": "# 筛选条件\n\n默认首行展示主筛选项;其余收入「更多筛选」展开区(布局与重排规则同全局 `vm-filter-panel`)。\n\n| 字段 | 说明 |\n|------|------|\n| 车牌号 | 单车模糊匹配;与多车牌互斥 |\n| 多车牌 | 每行一个或逗号分隔 |\n| VIN | 车辆识别代码 |\n| 品牌/型号 | 下拉可搜 |\n| 运营状态 | 租赁/自营/库存/退出运营 |\n| 保险状态 | 正常/临期 或 异常 |\n| 保险类型 + 到期时间 | 须先选险种再选日期范围 |\n\n点击「查询」应用条件;「重置」清空。收起时若扩展区已有条件,按钮显示数量角标。",
|
||||
"ipc-btn-compare-mgmt": "# 比价单管理\n\n独立业务线入口。支持:\n\n- 按创建时间、车牌筛选批次\n- 最晚付费临期/超期 KPI 筛选\n- 新建/编辑比价单\n- 查看采购状态(审批中/通过/驳回/撤回)\n\n**不自动同步**至保单台账。",
|
||||
"ipc-btn-policy-ocr": "# 保单批量识别(OCR)\n\n- 业务类型:保单录入、停保、复驶、退保\n- 自动识别车牌、保单号并匹配台账\n- 识别结果须**人工确认**后落库\n- OCR 确认页**不展示**承保险种明细、分项保费等(手工新增保留)",
|
||||
"ipc-vehicle-table": "# 台账列表\n\n| 列 | 说明 |\n|----|------|\n| 车牌/VIN/品牌型号 | 车辆标识 |\n| 运营状态 | 退出运营行灰显 |\n| 保险状态 | 与 KPI 口径一致 |\n| 五类险种到期日 | 副文案:临期天数/停保/退保标签 |\n| 操作·管理 | 打开车辆保险档案 |",
|
||||
"ipc-vehicle-table": "# 台账列表\n\n| 列 | 说明 |\n|----|------|\n| 车牌/VIN/品牌型号 | 车辆标识 |\n| 运营状态 | 退出运营行灰显 |\n| 保险状态 | 与 KPI 口径一致 |\n| 五类险种到期日 | 副文案:临期天数/停保/退保标签 |\n| 操作·更多 → 管理 | 打开车辆保险档案 |",
|
||||
"ipc-vehicle-mgmt": "# 车辆保险档案\n\n展示车辆元信息、保险状态胶囊、客户/产权方等。\n\n**保险状态**:交强险+商业险均在有效期内为正常,否则异常(禁止交车)。",
|
||||
"ipc-vehicle-mgmt-tabs": "# Tab 结构\n\n- **全周期记录**:时间轴,左新保/续保,右停保/复驶/退保\n- **分险种 Tab**:交强险、商业险、超赔、驾意、货物\n\n历史表含:导入时间、类型、保单号、保险状态、保司、日期、金额、操作。\n\n当前有效保单可办理停保/复驶/退保;归档记录只读。",
|
||||
"ipc-compare-mgmt": "# 比价单批次\n\n列表展示创建时间、创建人、购买记录数、确认金额、备注等。\n\n操作:编辑、删除(未提交审批时)、查看附件。",
|
||||
|
||||
@@ -4,6 +4,8 @@
|
||||
*/
|
||||
@import url('../../../resources/oneos-web-legacy/styles/oneos-app.css');
|
||||
@import url('../../../resources/oneos-web-legacy/styles/ant-table-global-fix.css');
|
||||
/* 列表「更多」下拉:与租赁合同等台账页 OperationActions 效果一致 */
|
||||
@import url('../../../common/vm-operation-actions.css');
|
||||
|
||||
/* 列表页全屏滚动布局 */
|
||||
.vm-page.ipc-page {
|
||||
@@ -200,6 +202,69 @@
|
||||
font-weight: var(--oneos-font-weight-medium);
|
||||
}
|
||||
|
||||
/* 更多筛选展开区 — 与 vm-filter-panel / 合同模板等台账页一致 */
|
||||
.vm-page.ipc-page .vm-filter-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.vm-page.ipc-page .vm-filter-expand {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.28s ease, opacity 0.22s ease, margin-top 0.22s ease;
|
||||
opacity: 0;
|
||||
margin-top: 0;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.vm-page.ipc-page .vm-filter-expand.is-expanded {
|
||||
grid-template-rows: 1fr;
|
||||
opacity: 1;
|
||||
margin-top: 12px;
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.vm-page.ipc-page .vm-filter-expand.is-expanded .vm-filter-expand-inner {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.vm-page.ipc-page .vm-filter-expand-inner {
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.vm-page.ipc-page .vm-filter-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.vm-page.ipc-page .vm-filter-toggle-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 5px;
|
||||
border-radius: 999px;
|
||||
background: var(--oneos-color-primary, #10b981);
|
||||
color: #fff;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.vm-page.ipc-page .vm-filter-expand {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 列表工具栏 */
|
||||
.vm-page.ipc-page .lc-table-toolbar-meta {
|
||||
font-size: var(--oneos-font-size-sm);
|
||||
|
||||
153
src/prototypes/lease-business-detail/.spec/field-checks.md
Normal file
153
src/prototypes/lease-business-detail/.spec/field-checks.md
Normal file
@@ -0,0 +1,153 @@
|
||||
# 租赁业务明细 · 单元格系统校验
|
||||
|
||||
> 实现:`utils/field-checks.ts`、`utils/system-ref.ts`;UI:`components/FieldCheckIcon.tsx`
|
||||
|
||||
列表部分列在单元格右侧展示**校验图标**(绿色 ✓ / 黄色 ⚠)。点击可查看说明;警告项在支持时提供**一键替换**为系统建议值。
|
||||
|
||||
## 对照数据源(原型本地种子)
|
||||
|
||||
| 来源 | 路径 | 用途 |
|
||||
|---|---|---|
|
||||
| 客户管理 | `customer-management/data/customers.json` | 客户名称是否已登记 |
|
||||
| 车辆管理 | `vehicle-management/data/vehicles.json` | 车牌是否存在、交车/还车日期、登记所有权 |
|
||||
| 明细种子合同 | `lease-business-detail/data/rows.json` | 车牌 + 客户 → 合同(押金、租金、提车/退车日期等) |
|
||||
|
||||
启动时由 `system-ref.ts` 聚合为内存索引;**当前原型未接真实后端 API**。
|
||||
|
||||
## 交互与状态
|
||||
|
||||
| 状态 | 图标 | 点击行为 |
|
||||
|---|---|---|
|
||||
| `ok` | 绿色 ✓ | 展示通过说明(tooltip) |
|
||||
| `warn` | 黄色 ⚠ | 展示差异说明;部分字段可「一键替换」 |
|
||||
| `none` | 不显示 | 无校验条件或无需提示 |
|
||||
|
||||
匹配规则:字符串比较前 **trim 首尾空格**;金额比较容差 **0.005 元**。
|
||||
|
||||
---
|
||||
|
||||
## 客户名称(`customerName`)
|
||||
|
||||
**前置**:车牌、客户名称均非空,否则不校验。
|
||||
|
||||
**期望客户 `expected`**:`resolveExpectedCustomer(车牌, 提车日期, 退车日期)`
|
||||
|
||||
- 在同车牌的所有合同记录中筛选;
|
||||
- 若明细行有提车日期且合同有提车日期 → 必须一致;
|
||||
- 若明细行有退车日期且合同有退车日期 → 必须一致;
|
||||
- 取匹配合同的客户名称(多条时以后遍历结果为准)。
|
||||
|
||||
**判定顺序**(命中即返回,不再往下):
|
||||
|
||||
| 优先级 | 条件 | 结果 | 提示文案 |
|
||||
|---|---|---|---|
|
||||
| 1 | `expected` 非空且与当前客户名完全一致 | ✅ 通过 | 客户名称与系统登记一致 |
|
||||
| 2 | `getContractRef(车牌, 客户名)` 命中且名称一致 | ✅ 通过 | 客户名称与租赁合同一致 |
|
||||
| 3 | `expected` 非空但与当前客户名不一致 | ⚠️ 警告 | 客户名称与系统「客户管理」不对应;**建议客户:{expected}**;可一键替换 |
|
||||
| 4 | `isKnownCustomerName(客户名)` 为真 | ✅ 通过(弱校验) | 客户名称已在客户管理中登记 |
|
||||
| 5 | 以上均否 | ⚠️ 警告 | 客户名称与系统「客户管理」不对应;请核对提车日期与退车日期 |
|
||||
|
||||
**`isKnownCustomerName` 弱校验**:
|
||||
|
||||
- 与客户管理名单**完全一致**;或
|
||||
- **双向包含**(任一方名称包含另一方,如简称/全称)。
|
||||
|
||||
---
|
||||
|
||||
## 车牌号码(`plateNo`)
|
||||
|
||||
| 条件 | 结果 | 说明 |
|
||||
|---|---|---|
|
||||
| 车牌为空 | 不校验 | — |
|
||||
| 车牌在车辆管理中 | ✅ 通过 | 车牌已在车辆管理中登记 |
|
||||
| 否则 | ⚠️ 警告 | 车牌不存在;该车牌未在系统「车辆管理」中登记,无法导入 |
|
||||
|
||||
---
|
||||
|
||||
## 提车日期(`pickupDate`)
|
||||
|
||||
对照车辆管理 `lastDeliveryTime`(交车管理)。
|
||||
|
||||
| 条件 | 结果 |
|
||||
|---|---|
|
||||
| 无车辆档案或无提车日期 | 不校验 |
|
||||
| 与系统交车日期一致(YYYY-MM-DD) | ✅ 提车日期与交车管理一致 |
|
||||
| 不一致 | ⚠️ 警告;展示系统日期;可一键替换 |
|
||||
|
||||
---
|
||||
|
||||
## 退车日期(`returnDate`)
|
||||
|
||||
对照车辆管理 `lastReturnTime`(还车记录)。
|
||||
|
||||
| 条件 | 结果 |
|
||||
|---|---|
|
||||
| 无车辆档案或无退车日期 | 不校验 |
|
||||
| 与系统还车日期一致 | ✅ 退车日期与还车记录一致 |
|
||||
| 不一致 | ⚠️ 警告;展示系统日期;可一键替换 |
|
||||
|
||||
---
|
||||
|
||||
## 押金(`deposit`)
|
||||
|
||||
对照租赁合同保证金(`车牌 + 客户名` 合同)。
|
||||
|
||||
| 条件 | 结果 |
|
||||
|---|---|
|
||||
| 无合同或押金非数值 | 不校验 |
|
||||
| 与合同保证金一致 | ✅ 押金与合同保证金一致 |
|
||||
| 不一致 | ⚠️ 警告;可一键替换为合同值 |
|
||||
|
||||
---
|
||||
|
||||
## 合同标的租金(`contractRent`)
|
||||
|
||||
对照租赁合同租金。
|
||||
|
||||
| 条件 | 结果 |
|
||||
|---|---|
|
||||
| 无合同或无租金 | 不校验 |
|
||||
| 与合同租金一致 | ✅ 租金与合同一致 |
|
||||
| 不一致 | ⚠️ 警告;可一键替换 |
|
||||
|
||||
---
|
||||
|
||||
## 应收租金(`receivableRent`)
|
||||
|
||||
**期望**:`合同标的租金 × 结算周期月数`(月数来自合同 `paymentMethod` 解析:月度 1 / 季度 3 / 半年 6 / 年度 12)。
|
||||
|
||||
| 条件 | 结果 |
|
||||
|---|---|
|
||||
| 期望与当前均为 0 | 不校验 |
|
||||
| 与期望一致 | ✅ 应收租金 = 合同标的租金 × N 个月 |
|
||||
| 不一致 | ⚠️ 警告;展示正确金额;可一键替换 |
|
||||
|
||||
---
|
||||
|
||||
## 里程减免 / 其他减免(`mileageDeduction`、`otherDeduction`)
|
||||
|
||||
| 条件 | 结果 |
|
||||
|---|---|
|
||||
| 值为 0 | 不校验 |
|
||||
| 值为负数 | ✅ 以负数显示(符合 Excel 口径) |
|
||||
| 值为正数 | ⚠️ 警告:应录入负值 |
|
||||
|
||||
---
|
||||
|
||||
## 资产归属(`assetOwner`)
|
||||
|
||||
对照车辆管理「登记所有权」。
|
||||
|
||||
| 条件 | 结果 |
|
||||
|---|---|
|
||||
| 无车辆档案或无资产归属 | 不校验 |
|
||||
| 与登记所有权一致 | ✅ 与车辆登记所有权一致 |
|
||||
| 不一致 | ⚠️ 警告;可一键替换 |
|
||||
|
||||
---
|
||||
|
||||
## 启用校验的列
|
||||
|
||||
在 `components/tableColumns.ts` 中通过 `checkField` 挂载,由 `DetailTable` 调用 `getFieldCheck()`:
|
||||
|
||||
`plateNo`、`customerName`、`pickupDate`、`returnDate`、`deposit`、`contractRent`、`receivableRent`、`mileageDeduction`、`otherDeduction`、`assetOwner`。
|
||||
45
src/prototypes/lease-business-detail/.spec/import-rules.md
Normal file
45
src/prototypes/lease-business-detail/.spec/import-rules.md
Normal file
@@ -0,0 +1,45 @@
|
||||
# 租赁业务明细 · 导入与金额规则
|
||||
|
||||
> 实现:`utils/row-key.ts`、`utils/import-merge.ts`、`utils/batch-io.ts`、`utils/validate-detail.ts`
|
||||
> UI:`components/DetailImportModal.tsx`、`components/DetailEditModal.tsx`
|
||||
|
||||
## 导入业务主键(去重)
|
||||
|
||||
| 组成字段 | 说明 |
|
||||
|---|---|
|
||||
| 年份 | `year` |
|
||||
| 月份 | `month` |
|
||||
| 车牌号码 | `plateNo`(trim) |
|
||||
| **客户名称** | `customerName`(trim) |
|
||||
|
||||
键格式:`{year}-{MM}-{plateNo}::{customerName}`(见 `detailRowBusinessKey`)。
|
||||
|
||||
同一主键下支持三种策略:
|
||||
|
||||
| 策略 | 行为 |
|
||||
|---|---|
|
||||
| 跳过重复(默认) | 已存在同键记录则跳过导入行 |
|
||||
| 覆盖重复 | 用导入行覆盖已有记录(保留原 `id`) |
|
||||
| 报错 | 重复行写入错误日志,不入库 |
|
||||
|
||||
**边界**:同一车牌、同一月份、**不同客户**视为两条不同记录,不互相覆盖。
|
||||
|
||||
数据源:原型本地导入解析 + 内存中的已有明细;**未接真实后端 API**。
|
||||
|
||||
---
|
||||
|
||||
## 实收金额 vs 应收合计
|
||||
|
||||
| 项 | 规则 |
|
||||
|---|---|
|
||||
| 导入 | **不拦截**实收大于应收合计 |
|
||||
| 编辑保存 | **不拦截**实收大于应收合计 |
|
||||
| 未收计算 | 仍为「应收合计 − 实收金额」;实收超额时未收为负,列表用超额样式提示 |
|
||||
|
||||
历史规则「实收金额 ≤ 应收合计」已在 `validate-detail.ts` 中注释停用,函数保留签名便于对照。
|
||||
|
||||
---
|
||||
|
||||
## 与收款状态的关系
|
||||
|
||||
收款状态仍按实收与应收比较展示(未收款 / 部分收款 / 已结清);实收 ≥ 应收合计时为「已结清」,与是否允许多收不冲突。
|
||||
@@ -1,94 +1,54 @@
|
||||
# Prototype Review
|
||||
|
||||
- 审查目标:`src/prototypes/lease-business-detail`(页面 `list`)
|
||||
- 用户资料/参考资料:
|
||||
- 对话中已确认的 Excel《2026年业务二部运营台账总表6.17 - 新版》「2.租赁车辆收入明细表」字段顺序、23 项汇总、6 项公式列与 7 项 KPI 口径
|
||||
- `src/resources/oneos-web-legacy/数据分析/租赁车辆收入明细.jsx`
|
||||
- `src/prototypes/oneos-web-data-analysis/pages/08-租赁车辆收入明细.jsx`
|
||||
- `src/prototypes/oneos-web-data-analysis/pages/05-业务部台账.jsx`(租赁业绩数据来源说明)
|
||||
- `src/prototypes/lease-business-ledger/.spec/requirements-prd.md`(对照模块)
|
||||
- 原型源码、`annotation-source.json`、`data/rows.json`
|
||||
- 生成时间:2026-07-09 16:18
|
||||
- 用户资料/参考资料:`.spec/requirements-prd.md`、`lease-business-ledger` PRD、原型源码
|
||||
- 生成时间:2026-07-13 15:50
|
||||
- 状态:**复审通过(对账能力已移除)**
|
||||
|
||||
## 总体点评
|
||||
|
||||
原型在「租赁运营明细宽表」主路径上已具备可运行闭环:筛选 → 7 项 KPI → 47 列分页列表 → 23 项表尾汇总 → 批量导入/导出,且公式列(应收合计、月度收入、未收、车辆实际成本、总成本、盈亏)与 Excel SUBTOTAL 逻辑一致,553 条 2026 年样例数据汇总与台账样表核对无偏差。列表字段、双运维费列、左冻结年份/车牌、日期列排序等近期决策在实现中落地较完整。
|
||||
租赁业务明细为单页宽表维护:筛选(含收款状态)→ 7 项 KPI → 批量导入/导出 → 48 列明细表。行内操作仅保留**编辑、删除、变更日志**;盈亏月度汇总改由业务部台账承接,本页不再提供 Tab 或对账锁定。
|
||||
|
||||
主要缺口集中在**模块边界与资料体系**:相对 `src/resources` 中「租赁车辆收入明细」双 Tab 结构,当前仅实现明细列表,缺少「租赁业务盈亏月度汇总」;相对 `lease-business-ledger`,本原型未说明「明细维护」与「台账收款关联」的分工,实收仍为导入手工列。导入流程可完成演示,但缺少重复数据与行级校验策略,长期批量维护存在数据质量风险。整体适合作为 Excel 明细表的交互原型,尚不足以单独支撑数据分析侧完整用户旅程。
|
||||
主路径「筛选 → KPI → 宽表 → 导入/导出 → 编辑」可完整演示。剩余风险主要为跨模块集成(实收与租赁业务台账/收款模块自动同步)与明细表暂无「氢费预充值」字段——已降为待规划,不阻塞当前原型验收。
|
||||
|
||||
## P0-P3 优先级问题
|
||||
|
||||
### P1 - 缺少「租赁业务盈亏月度汇总」Tab / 页面
|
||||
|
||||
- 证据:`src/resources/oneos-web-legacy/数据分析/租赁车辆收入明细.jsx` 与 `src/prototypes/oneos-web-data-analysis/pages/08-租赁车辆收入明细.jsx` 均包含「租赁业务明细」+「租赁业务盈亏月度汇总」两个 Tab;当前 `index.tsx` 仅单页 `list`,`annotation-source.json` 目录也只有一条路由。
|
||||
- 影响:需要按月查看盈亏汇总、对比年度趋势的用户无法在本原型完成核心分析任务,与既有产品资料表达不一致。
|
||||
- 修复方向:在 `.spec` 明确是否纳入本原型范围;若纳入,增加第二 Tab 或子路由,按年份聚合月份级押金/应收/实收/未收/收入/成本/盈亏,并保留导出。
|
||||
|
||||
### P1 - 与「租赁业务台账」边界不清,实收口径未闭环
|
||||
|
||||
- 证据:`lease-business-ledger` PRD 定义收款关联、`calcReceivedAmountFromReceipts`、明细状态;本原型 `receivedAmount` 为导入手工列(`batch-io.ts`),无关联收款、无「未收款/部分收款/已收款」状态;`oneos-web-data-analysis/05-业务部台账.jsx` 注明租赁业绩来自「租赁业务明细」。
|
||||
- 影响:业务方可能混淆两个模块职责;实收可任意填写导致未收/盈亏与真实收款脱节,下游汇总分析可信度下降。
|
||||
- 修复方向:在 `.spec/requirements-prd.md` 写清「明细表 = 业管 Excel 维护」「台账 = 收款闭环」或统一为一条链路;至少增加实收 ≤ 应收合计校验,并标注与台账/收款模块的集成计划。
|
||||
|
||||
### P2 - 批量导入仅追加,无重复键与覆盖策略
|
||||
|
||||
- 证据:`index.tsx` 导入成功后 `setRecords((prev) => [...imported, ...prev])`;`parseDetailImportFile` 仅以「年份 + 月份 + 车牌号码」判空跳过,不检测同键已存在行。
|
||||
- 影响:业管重复导入同月同车数据会产生重复行,KPI 与表尾汇总被放大,难以恢复。
|
||||
- 修复方向:定义业务主键(建议 `year + month + plateNo`,是否加业务员待确认);导入时支持跳过/覆盖/报错三种策略,并返回行级结果摘要。
|
||||
|
||||
### P2 - 导入与计算缺少行级校验反馈
|
||||
|
||||
- 证据:导入失败仅 Toast(`未解析到有效数据` / `导入失败`);无字段格式、数值范围、必填组合(如平均天数为 0 时成本为 0)的逐行报告;`receivedAmount` 可大于 `receivableTotal` 产生负未收且无提示。
|
||||
- 影响:大批量维护时难以定位问题行,错误数据静默进入列表。
|
||||
- 修复方向:导入结果弹层展示成功/跳过/失败行数与原因;对实收超额、非法日期、押金格式等做行级校验清单。
|
||||
|
||||
### P3 - 缺少正式需求文档,annotation 未覆盖字段与公式说明
|
||||
|
||||
- 证据:`.spec/` 仅有空的 `prototype-comments.json`,无 `requirements-prd.md`;`annotation-source.json` 仅 4 个区块简述,未像 `lease-business-ledger` 那样标注各列口径、公式列只读规则、与 Excel 样表映射。
|
||||
- 影响:评审、测试与后续开发缺少单一事实来源,跨模块对齐成本高。
|
||||
- 修复方向:补充 `.spec/requirements-prd.md`(用户、范围、不做项、验收清单);扩展 annotation 对公式列、导入模板列、KPI/汇总口径的说明。
|
||||
(本轮复审无新增 P0–P3 问题。)
|
||||
|
||||
## 完整性与项目对齐
|
||||
|
||||
| 维度 | 结论 |
|
||||
|------|------|
|
||||
| 核心用户 | 隐含为业务二部业管/运营人员(样例数据均为「业务二部」),未在 `.spec` 明文写出 |
|
||||
| 核心任务 | **已覆盖**:按条件查询明细、查看 KPI 与表尾汇总、Excel 模板导入与导出 |
|
||||
| 主流程入口 | 侧边栏 `prototypes/lease-business-detail`(`sidebar-tree.json`) |
|
||||
| 主流程出口 | 导出当前筛选结果;无保存至服务端、无返回上游分析页导航 |
|
||||
| 范围边界 | **已对齐**:47 列宽表、6 公式列自动计算、7+23 汇总结构、2026 样例 1–6 月 |
|
||||
| 范围缺口 | **未覆盖**:盈亏月度汇总 Tab;行内编辑/删除;持久化;收款关联 |
|
||||
| 与 ledger 关系 | **待确认**:两模块均处理租赁运营金额,字段模型不同(明细 47 列 vs 台账账单字段),需产品定稿分工 |
|
||||
| 与数据分析关系 | `05-业务部台账` 声明租赁业绩取自本明细;当前原型未暴露 API/聚合接口,仅本地 JSON,**集成待确认** |
|
||||
| 资料冲突 | Legacy 数据分析页为简化列(应收/实收/自然月收入等 ~20 列),本原型已升级为 Excel 运营台账 47 列——**以对话与 Excel 样表为准**,Legacy 作交互参考而非字段真相 |
|
||||
| 核心用户 | 业务二部业管 / 运营人员 |
|
||||
| 核心任务 | **已覆盖**:明细维护、状态筛选、KPI/汇总、导入导出 |
|
||||
| Tab 结构 | **已对齐**:单页宽表;盈亏汇总见业务部台账 |
|
||||
| 与 ledger 分工 | 已文档化;实收仍为手工列,**集成待规划** |
|
||||
| 资料冲突 | 明细「已结清」vs 台账「已收款」——跨模块术语待产品统一 |
|
||||
|
||||
## 业务逻辑连贯性
|
||||
|
||||
- **筛选逻辑**:`statMonth`(`YYYY-MM`)、业务部门、业务员精确匹配,客户名称模糊匹配,车牌多选;查询按钮触发 `appliedFilters`,与 KPI/汇总联动,逻辑自洽。
|
||||
- **汇总口径**:KPI 7 项与表尾 23 项均基于**全量筛选结果**(非当前页),与 Excel SUBTOTAL 语义一致;分页仅影响表格 body,不影响汇总,合理。
|
||||
- **公式链路**:`calc-detail.ts` 与 Excel 公式一致(应收合计、月度收入、未收、车辆实际成本、总成本、盈亏);加载种子数据与导入后均调用 `applyDetailCalculations`,避免公式列脏读。
|
||||
- **状态迁移**:无「草稿/已提交/归档」;导入即入库(内存),无版本与审计轨迹。
|
||||
- **角色权限**:未实现员工/主管数据范围(`lease-business-ledger` 有 `filterRecordsByRole`),本原型全员可见全部 553 条。
|
||||
- **跨页一致性**:单页原型,无跨路由状态问题。
|
||||
- 收款状态、公式列、导入校验链路自洽。
|
||||
- KPI/表尾汇总与筛选结果口径一致。
|
||||
|
||||
## 状态、异常、边界与恢复
|
||||
|
||||
| 场景 | 现状 | 评价 |
|
||||
|------|------|------|
|
||||
| 空数据 | 表格区展示空状态文案 + 导入引导 | 已覆盖 |
|
||||
| 加载 | 筛选查询 280ms 骨架屏 | 已覆盖(模拟) |
|
||||
| 导入成功 | Toast + 关闭弹窗 + 重置页码 | 已覆盖 |
|
||||
| 导入无有效行 | Toast 提示检查模板 | 已覆盖,但无行级原因 |
|
||||
| 导入异常 | 通用「导入失败」Toast | 偏弱 |
|
||||
| 导出 | 导出筛选结果 + Toast | 已覆盖 |
|
||||
| 重复导入 | 直接追加 | **缺恢复路径** |
|
||||
| 实收 > 应收 | 允许,未收为负 | **缺业务提示** |
|
||||
| 刷新页面 | 恢复种子数据,导入丢失 | 原型可接受,需标注 |
|
||||
| 宽表横向滚动 | `lbd-table-wrap` overflow 修复 | 已覆盖 |
|
||||
| 并发/权限 | 未涉及 | 不适用 |
|
||||
| 场景 | 现状 |
|
||||
|------|------|
|
||||
| 重复导入 | 跳过 / 覆盖 / 报错;主键 year-month-plate-customer |
|
||||
| 实收超额 | **允许**;导入/编辑不拦截;列表负未收/超额样式 |
|
||||
| 行内操作 | 编辑、删除、变更日志 |
|
||||
|
||||
## 证据与评估说明
|
||||
|
||||
- **用户资料优先级**:本轮无新的用户附件;以对话中 Excel 对齐决策为主。与 Legacy 简化列模型存在差异,已在「完整性与项目对齐」标记,**不视为 P0 冲突**。
|
||||
- **读取范围**:`rules/prototype-review-guide.md`;`index.tsx`、`types.ts`、`utils/calc-detail.ts`、`utils/batch-io.ts`、`utils/detail.ts`、`components/*`、`data/rows.json`、`annotation-source.json`;`src/resources/oneos-web-legacy/数据分析/租赁车辆收入明细.jsx`;`lease-business-ledger/.spec/requirements-prd.md`;`oneos-web-data-analysis/pages/05-业务部台账.jsx`(片段);`.axhub/make/sidebar-tree.json`。
|
||||
- **独立评估**:`degraded`(未使用双子代理;在同一审查内先建立业务基线再对照源码,结论仍基于双源交叉验证)。
|
||||
- **读取范围**:`index.tsx`、`DetailTable.tsx`、`import-merge.ts`、`validate-detail.ts`、`requirements-prd.md`
|
||||
- **独立评估**:`degraded`(单轮复审,对照需求清单验收)
|
||||
|
||||
## 首轮问题关闭记录
|
||||
|
||||
| 原优先级 | 问题 | 处理 |
|
||||
|---|---|---|
|
||||
| P1 | 缺少盈亏月度汇总 Tab | ➡️ 改由业务部台账;本页已移除 Tab |
|
||||
| P1 | 对账/锁定无入口 | ➡️ 产品范围调整:本页不做对账锁定 |
|
||||
| P2 | 导入重复键 | ✅ 三策略 + 主键 year-month-plate-**customer** |
|
||||
| P2 | 实收超额 | ➡️ 产品调整:**允许**超额;拦截已停用 |
|
||||
| P3 | PRD/annotation 偏差 | ✅ 公式、导出 48 列、边界文案已更新 |
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
|
||||
### 不做范围(当前原型)
|
||||
|
||||
- 「租赁业务盈亏月度汇总」独立 Tab(Legacy 数据分析页有,本原型待规划)
|
||||
- 租赁业务盈亏月度汇总(改由**业务部台账**汇总展示)
|
||||
- 服务端持久化、员工/主管数据权限隔离(主管预览:`?role=supervisor`)
|
||||
- 关联收款记录自动回写实收
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
|
||||
## 2. 筛选区
|
||||
|
||||
默认展示 5 项(一行),「更多筛选」展开车牌多选。
|
||||
默认展示 **首行 4 项**(统计月份、业务部门、业务员、客户名称),「更多筛选」展开**状态、车牌号码**(与全局 `vm-filter-panel.ts` 4 列栅格规则一致,避免末行仅 1 项)。
|
||||
|
||||
| 筛选项 | 说明 |
|
||||
|---|---|
|
||||
@@ -43,7 +43,7 @@
|
||||
| 业务部门 | 精确匹配 |
|
||||
| 业务员 | 精确匹配 |
|
||||
| 客户名称 | 模糊包含 |
|
||||
| 状态 | 已结清 / 部分收款 / 未收款(按实收与应收合计计算) |
|
||||
| 状态 | 已结清 / 部分收款 / 未收款(按实收与应收合计计算;更多筛选) |
|
||||
| 车牌号码 | 多选精确匹配(更多筛选) |
|
||||
|
||||
查询按钮触发筛选;KPI 与表尾汇总基于**全量筛选结果**(非当前页)。
|
||||
@@ -70,12 +70,26 @@
|
||||
|
||||
| 按钮 | 行为 |
|
||||
|---|---|
|
||||
| 批量导入 | 下载模板(36 列手工录入)→ 上传 Excel → 公式列自动计算 |
|
||||
| 批量导出 | 导出当前筛选结果(完整 48 列,含公式列结果) |
|
||||
| 批量导入 | 下载模板(36 列手工录入)→ 选择重复策略 → 上传 Excel → 公式列自动计算 |
|
||||
| 批量导出 | 导出当前筛选结果(**状态** + 47 列业务字段,共 48 列) |
|
||||
|
||||
### 行内操作
|
||||
|
||||
编辑、删除、变更日志(操作列);已锁定记录仅主管可改(`?role=supervisor`)。
|
||||
编辑、删除、变更日志。
|
||||
|
||||
### 导入重复策略
|
||||
|
||||
业务主键:`年份 + 月份 + 车牌号码 + 客户名称`(完整规则见 **`.spec/import-rules.md`**)。
|
||||
|
||||
| 策略 | 行为 |
|
||||
|---|---|
|
||||
| 跳过重复(默认) | 已存在同键记录则跳过 |
|
||||
| 覆盖重复 | 用导入行覆盖已有记录 |
|
||||
| 报错 | 重复行写入错误日志 |
|
||||
|
||||
### 实收金额
|
||||
|
||||
**不限制**实收 ≤ 应收合计:导入与编辑均允许实收大于应收合计(未收可为负,列表超额样式提示)。旧规则已停用,见 `.spec/import-rules.md`。
|
||||
|
||||
---
|
||||
|
||||
@@ -104,6 +118,32 @@
|
||||
|
||||
押金、合同标的租金、应收合计、应收租金、月度收入、月度租金、维保包干收入、保险上浮费、运维费(收入)、其他收入、里程减免金额、其他减免金额、实收金额、未收、车辆标准成本、车辆实际成本、保险费、氢费、运维费(成本)、居间费、其他、总成本、盈亏。
|
||||
|
||||
### 单元格系统校验
|
||||
|
||||
部分列在单元格右侧展示校验图标(绿色 ✓ / 黄色 ⚠),点击可查看说明;警告项在支持时提供**一键替换**。完整规则见 **`.spec/field-checks.md`**。
|
||||
|
||||
**对照数据源(原型本地种子)**:客户管理、车辆管理、明细种子合同(`system-ref.ts` 聚合);当前未接真实后端。
|
||||
|
||||
| 字段 | 校验要点 |
|
||||
|---|---|
|
||||
| 车牌号码 | 是否在车辆管理中登记 |
|
||||
| **客户名称** | 见下表 |
|
||||
| 提车 / 退车日期 | 与交车管理 / 还车记录一致 |
|
||||
| 押金、合同标的租金 | 与租赁合同一致 |
|
||||
| 应收租金 | = 合同标的租金 × 结算周期月数 |
|
||||
| 里程 / 其他减免 | 应以负数录入 |
|
||||
| 资产归属 | 与车辆登记所有权一致 |
|
||||
|
||||
#### 客户名称判定顺序
|
||||
|
||||
1. **通过(强)**:按「车牌 + 提车日期 + 退车日期」匹配合同,期望客户与当前名**完全一致** →「与系统登记一致」。
|
||||
2. **通过(强)**:「车牌 + 客户名」能命中租赁合同且名称一致 →「与租赁合同一致」。
|
||||
3. **警告**:能推算期望客户但与当前名不一致 → 提示建议客户,**可一键替换**。
|
||||
4. **通过(弱)**:客户名在客户管理中已登记(全等或双向包含简称/全称)→「已在客户管理中登记」。
|
||||
5. **警告**:以上均不满足 →「与系统不对应,请核对提车/退车日期」。
|
||||
|
||||
车牌或客户名为空时不显示校验图标。
|
||||
|
||||
---
|
||||
|
||||
## 6. 公式列(系统自动计算)
|
||||
@@ -112,7 +152,7 @@
|
||||
|
||||
| 字段 | 计算方式 |
|
||||
|---|---|
|
||||
| **应收合计** | 维保包干收入 + 保险上浮费 + 运维费(收入)+ 其他收入 + 里程减免 + 其他减免 |
|
||||
| **应收合计** | 应收租金 + 维保包干收入 + 保险上浮费 + 运维费(收入)+ 其他收入 + 里程减免 + 其他减免 |
|
||||
| **月度收入** | 月度租金 + 维保包干收入 + 保险上浮费 + 运维费(收入)+ 其他收入 + 里程减免 + 其他减免 |
|
||||
| **未收** | 应收合计 − 实收金额 |
|
||||
| **车辆实际成本** | 车辆标准成本 × 平均天数 |
|
||||
@@ -141,7 +181,10 @@
|
||||
| 筛选 / KPI 汇总 | `utils/detail.ts` |
|
||||
| 收款状态 | `utils/payment-status.ts` |
|
||||
| 公式计算 | `utils/calc-detail.ts` |
|
||||
| 导入导出 | `utils/batch-io.ts` |
|
||||
| 导入导出 | `utils/batch-io.ts`、`utils/import-merge.ts`、`utils/row-key.ts` |
|
||||
| 单元格校验 | `utils/field-checks.ts`、`utils/system-ref.ts`、`components/FieldCheckIcon.tsx` |
|
||||
| 保存校验 | `utils/validate-detail.ts`(实收超额拦截已停用) |
|
||||
| 导入规则说明 | `.spec/import-rules.md` |
|
||||
| 变更日志 | `utils/change-log.ts` |
|
||||
| 类型 | `types.ts` |
|
||||
| 组件 | `FilterPanel.tsx`、`DetailKpiRow.tsx`、`DetailTable.tsx`、`DetailImportModal.tsx`、`DetailEditModal.tsx`、`DetailChangeLogModal.tsx` |
|
||||
@@ -155,6 +198,9 @@
|
||||
3. 左冻结:状态 + 月份 + 车牌号码
|
||||
4. 氢费非零可点击明细;编辑/删除/变更日志可用
|
||||
5. 未收 > 0 标红;盈亏正负着色
|
||||
6. 客户名称等校验列:通过显示绿勾,不一致显示黄警告并可查看说明 / 一键替换(规则见 `.spec/field-checks.md`)
|
||||
7. 导入主键含客户名称;同车牌同月不同客户可并存
|
||||
8. 实收可大于应收合计:导入/编辑不拦截;未收可为负并有超额样式
|
||||
|
||||
---
|
||||
|
||||
@@ -162,6 +208,5 @@
|
||||
|
||||
详见 `.spec/prototype-review.md`:
|
||||
|
||||
- P1:盈亏月度汇总 Tab
|
||||
- P1:与租赁业务台账 / 收款模块集成口径
|
||||
- P2:导入重复键(年+月+车牌)处理策略
|
||||
- P2:与租赁业务台账 / 收款模块集成口径(实收自动回写)
|
||||
- P3:氢费预充值字段(业务部台账月度汇总占位,明细表暂无对应列)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -5,7 +5,7 @@ export const COLUMN_HEADER_TIPS: Record<string, string> = {
|
||||
'lbd-col-plate': '车牌号码与系统「车辆管理」匹配;不存在的车牌导入失败。',
|
||||
'lbd-col-vehicle-type': '根据车牌号,显示系统「品牌·型号」。',
|
||||
'lbd-col-business-dept': '根据车牌对应租赁合同显示业务部门与业务员;展示时合并为两行。',
|
||||
'lbd-col-customer': '导入后与客户管理比对;不一致时提示正确客户并支持一键替换。',
|
||||
'lbd-col-customer': '导入后按车牌+租期与合同比对客户名;不一致时提示建议客户并支持一键替换(规则见 field-checks.md)。',
|
||||
'lbd-col-pickup-date': '对照交车管理校验提车日期;不一致时显示警告。',
|
||||
'lbd-col-return-date': '对照还车记录校验退车日期;不一致时显示警告。',
|
||||
'lbd-col-avg-days': '平均天数 = 本月在租天数 ÷ 当月自然日天数,保留两位小数。',
|
||||
|
||||
@@ -3,6 +3,7 @@ import { X } from 'lucide-react';
|
||||
import type { LeaseBusinessDetailRow } from '../types';
|
||||
import { detailRowYearMonth } from '../utils/detail';
|
||||
import { DETAIL_EDIT_FIELDS, draftFromRow, parseDraftToPatch } from '../utils/edit-fields';
|
||||
import { validateDetailPatch } from '../utils/validate-detail';
|
||||
|
||||
interface DetailEditModalProps {
|
||||
open: boolean;
|
||||
@@ -13,9 +14,13 @@ interface DetailEditModalProps {
|
||||
|
||||
export function DetailEditModal({ open, row, onClose, onSave }: DetailEditModalProps) {
|
||||
const [draft, setDraft] = useState<Record<string, string | number>>({});
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (open && row) setDraft(draftFromRow(row));
|
||||
if (open && row) {
|
||||
setDraft(draftFromRow(row));
|
||||
setError('');
|
||||
}
|
||||
}, [open, row]);
|
||||
|
||||
if (!open || !row) return null;
|
||||
@@ -24,7 +29,13 @@ export function DetailEditModal({ open, row, onClose, onSave }: DetailEditModalP
|
||||
|
||||
const handleSubmit = (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
onSave(parseDraftToPatch(draft));
|
||||
const patch = parseDraftToPatch(draft);
|
||||
const validationError = validateDetailPatch(row, patch);
|
||||
if (validationError) {
|
||||
setError(validationError);
|
||||
return;
|
||||
}
|
||||
onSave(patch);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -43,7 +54,8 @@ export function DetailEditModal({ open, row, onClose, onSave }: DetailEditModalP
|
||||
</button>
|
||||
</header>
|
||||
<form id="lbd-edit-form" className="vm-modal-body lbd-edit-form" onSubmit={handleSubmit}>
|
||||
<p className="lbd-edit-hint">公式列(应收合计、月度收入、未收、车辆实际成本、总成本、盈亏、氢费等)保存后由系统自动重算。</p>
|
||||
<p className="lbd-edit-hint">公式列(应收合计、月度收入、未收、车辆实际成本、总成本、盈亏、氢费等)保存后由系统自动重算。实收金额允许大于应收合计(未收可为负)。</p>
|
||||
{error ? <p className="lbd-edit-error" role="alert">{error}</p> : null}
|
||||
<div className="lbd-edit-grid">
|
||||
{DETAIL_EDIT_FIELDS.map((field) => (
|
||||
<label key={field.key} className="lbd-edit-field">
|
||||
|
||||
@@ -1,26 +1,43 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { Download, Upload, X } from 'lucide-react';
|
||||
import { Upload, X } from 'lucide-react';
|
||||
import type { DetailImportDuplicateStrategy } from '../utils/import-merge';
|
||||
|
||||
interface DetailImportModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onDownloadTemplate: () => void;
|
||||
onImport: (file: File) => void;
|
||||
duplicateStrategy: DetailImportDuplicateStrategy;
|
||||
onDuplicateStrategyChange: (strategy: DetailImportDuplicateStrategy) => void;
|
||||
failedCount?: number;
|
||||
skippedCount?: number;
|
||||
overwrittenCount?: number;
|
||||
onDownloadErrorLog?: () => void;
|
||||
}
|
||||
|
||||
const DUPLICATE_OPTIONS: { value: DetailImportDuplicateStrategy; label: string; hint: string }[] = [
|
||||
{ value: 'skip', label: '跳过重复', hint: '同「年份+月份+车牌+客户名称」已存在则跳过' },
|
||||
{ value: 'overwrite', label: '覆盖重复', hint: '用导入行覆盖已有记录' },
|
||||
{ value: 'error', label: '报错', hint: '重复行写入错误日志' },
|
||||
];
|
||||
|
||||
export function DetailImportModal({
|
||||
open,
|
||||
onClose,
|
||||
onDownloadTemplate,
|
||||
onImport,
|
||||
duplicateStrategy,
|
||||
onDuplicateStrategyChange,
|
||||
failedCount = 0,
|
||||
skippedCount = 0,
|
||||
overwrittenCount = 0,
|
||||
onDownloadErrorLog,
|
||||
}: DetailImportModalProps) {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
if (!open) return null;
|
||||
|
||||
const hasResultSummary = failedCount > 0 || skippedCount > 0 || overwrittenCount > 0;
|
||||
|
||||
return (
|
||||
<div className="vm-modal-backdrop" role="presentation" onClick={onClose}>
|
||||
<div
|
||||
@@ -42,12 +59,34 @@ export function DetailImportModal({
|
||||
<span className="vm-step-badge">1</span>
|
||||
<span>下载导入模板</span>
|
||||
</div>
|
||||
<button type="button" className="vm-btn vm-btn-primary" onClick={onDownloadTemplate} data-vm-icon="download">下载明细导入模板
|
||||
<button type="button" className="vm-btn vm-btn-primary" onClick={onDownloadTemplate} data-vm-icon="download">
|
||||
下载明细导入模板
|
||||
</button>
|
||||
</section>
|
||||
<section className="vm-import-step">
|
||||
<div className="vm-import-step-head">
|
||||
<span className="vm-step-badge">2</span>
|
||||
<span>重复记录处理(主键:年份 + 月份 + 车牌 + 客户名称)</span>
|
||||
</div>
|
||||
<div className="lbd-import-dup-options" role="radiogroup" aria-label="重复记录处理">
|
||||
{DUPLICATE_OPTIONS.map((option) => (
|
||||
<label key={option.value} className="lbd-import-dup-option">
|
||||
<input
|
||||
type="radio"
|
||||
name="lbd-import-dup"
|
||||
value={option.value}
|
||||
checked={duplicateStrategy === option.value}
|
||||
onChange={() => onDuplicateStrategyChange(option.value)}
|
||||
/>
|
||||
<span className="lbd-import-dup-label">{option.label}</span>
|
||||
<span className="lbd-import-dup-hint">{option.hint}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section className="vm-import-step">
|
||||
<div className="vm-import-step-head">
|
||||
<span className="vm-step-badge">3</span>
|
||||
<span>上传填写好的 Excel 文件</span>
|
||||
</div>
|
||||
<button
|
||||
@@ -70,13 +109,28 @@ export function DetailImportModal({
|
||||
/>
|
||||
</button>
|
||||
</section>
|
||||
{failedCount > 0 && onDownloadErrorLog ? (
|
||||
{hasResultSummary ? (
|
||||
<section className="vm-import-step lbd-import-error-step">
|
||||
{failedCount > 0 ? (
|
||||
<p className="lbd-import-error-summary">
|
||||
本次有 <strong>{failedCount}</strong> 条记录导入失败(如车牌号不存在),可下载错误日志核对。
|
||||
本次有 <strong>{failedCount}</strong> 条记录导入失败,可下载错误日志核对。
|
||||
</p>
|
||||
<button type="button" className="vm-btn vm-btn-secondary" onClick={onDownloadErrorLog} data-vm-icon="download">下载错误日志
|
||||
) : null}
|
||||
{skippedCount > 0 ? (
|
||||
<p className="lbd-import-error-summary">
|
||||
已跳过 <strong>{skippedCount}</strong> 条重复记录。
|
||||
</p>
|
||||
) : null}
|
||||
{overwrittenCount > 0 ? (
|
||||
<p className="lbd-import-error-summary">
|
||||
已覆盖 <strong>{overwrittenCount}</strong> 条重复记录。
|
||||
</p>
|
||||
) : null}
|
||||
{failedCount > 0 && onDownloadErrorLog ? (
|
||||
<button type="button" className="vm-btn vm-btn-secondary" onClick={onDownloadErrorLog} data-vm-icon="download">
|
||||
下载错误日志
|
||||
</button>
|
||||
) : null}
|
||||
</section>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
|
||||
export type DetailMainTab = 'detail' | 'monthly-pl';
|
||||
|
||||
interface DetailMainTabsProps {
|
||||
mainTab: DetailMainTab;
|
||||
onChange: (tab: DetailMainTab) => void;
|
||||
}
|
||||
|
||||
export function DetailMainTabs({ mainTab, onChange }: DetailMainTabsProps) {
|
||||
return (
|
||||
<nav
|
||||
className="lbd-main-tabs lbd-main-tabs--toolbar"
|
||||
aria-label="租赁业务明细模块"
|
||||
data-annotation-id="lbd-main-tabs"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={`lbd-main-tab${mainTab === 'detail' ? ' is-active' : ''}`}
|
||||
aria-current={mainTab === 'detail' ? 'page' : undefined}
|
||||
onClick={() => onChange('detail')}
|
||||
>
|
||||
租赁业务明细
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`lbd-main-tab${mainTab === 'monthly-pl' ? ' is-active' : ''}`}
|
||||
aria-current={mainTab === 'monthly-pl' ? 'page' : undefined}
|
||||
onClick={() => onChange('monthly-pl')}
|
||||
>
|
||||
租赁业务盈亏月度汇总
|
||||
</button>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -28,7 +28,6 @@ import {
|
||||
paymentStatusSortValue,
|
||||
resolveDetailPaymentStatus,
|
||||
} from '../utils/payment-status';
|
||||
import { canEditDetailRow } from '../utils/change-log';
|
||||
import {
|
||||
LedgerDetailPopover,
|
||||
LedgerDetailTable,
|
||||
@@ -38,7 +37,6 @@ interface DetailTableProps {
|
||||
records: LeaseBusinessDetailRow[];
|
||||
summary: LeaseDetailKpiSummary;
|
||||
loading?: boolean;
|
||||
isSupervisor: boolean;
|
||||
onEdit: (row: LeaseBusinessDetailRow) => void;
|
||||
onDelete: (row: LeaseBusinessDetailRow) => void;
|
||||
onChangeLog: (row: LeaseBusinessDetailRow) => void;
|
||||
@@ -157,8 +155,11 @@ function renderCellContent(
|
||||
}
|
||||
|
||||
if (col.key === 'outstanding') {
|
||||
const { text, warn } = displayOutstanding(row.outstanding);
|
||||
const { text, warn, overpaid } = displayOutstanding(row.outstanding);
|
||||
if (!text) return '';
|
||||
if (overpaid) {
|
||||
return <span className="lbd-outstanding-overpaid tabular-nums" title="实收超过应收合计">{text}</span>;
|
||||
}
|
||||
return warn
|
||||
? <span className="lbd-outstanding-warn tabular-nums">{text}</span>
|
||||
: <span className="tabular-nums">{text}</span>;
|
||||
@@ -218,7 +219,10 @@ function renderSummaryCell(col: DetailTableColumn, summary: LeaseDetailKpiSummar
|
||||
|
||||
const value = summary[col.summaryKey];
|
||||
if (col.summaryKey === 'outstanding') {
|
||||
const { text, warn } = displayOutstanding(value);
|
||||
const { text, warn, overpaid } = displayOutstanding(value);
|
||||
if (overpaid) {
|
||||
return <span className="lbd-outstanding-overpaid tabular-nums">{text}</span>;
|
||||
}
|
||||
return warn
|
||||
? <span className="lbd-outstanding-warn tabular-nums">{text}</span>
|
||||
: <span className="tabular-nums">{text}</span>;
|
||||
@@ -249,7 +253,6 @@ export function DetailTable({
|
||||
records,
|
||||
summary,
|
||||
loading = false,
|
||||
isSupervisor,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onChangeLog,
|
||||
@@ -386,11 +389,8 @@ export function DetailTable({
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sortedRecords.map((row) => {
|
||||
const canEdit = canEditDetailRow(row, isSupervisor);
|
||||
const archived = row.archiveStatus === 'archived';
|
||||
return (
|
||||
<tr key={row.id} className={archived ? 'lbd-row-archived' : undefined}>
|
||||
{sortedRecords.map((row) => (
|
||||
<tr key={row.id}>
|
||||
{DETAIL_TABLE_COLUMNS.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
@@ -406,16 +406,14 @@ export function DetailTable({
|
||||
))}
|
||||
<td className="sticky-col-right ldb-col-actions">
|
||||
<OperationActions
|
||||
edit={canEdit ? { onClick: () => onEdit(row) } : undefined}
|
||||
edit={{ onClick: () => onEdit(row) }}
|
||||
more={[
|
||||
...(canEdit
|
||||
? [{
|
||||
{
|
||||
key: 'delete',
|
||||
label: '删除',
|
||||
danger: true,
|
||||
onClick: () => onDelete(row),
|
||||
}]
|
||||
: []),
|
||||
},
|
||||
{
|
||||
key: 'changeLog',
|
||||
label: '变更日志',
|
||||
@@ -425,8 +423,7 @@ export function DetailTable({
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className="lbd-summary-row">
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { ChevronDown, Search } from 'lucide-react';
|
||||
import {
|
||||
shouldShowFilterExpand,
|
||||
splitFilterFields,
|
||||
VM_FILTER_PRIMARY_VISIBLE_COUNT,
|
||||
} from '../../../common/vm-filter-panel';
|
||||
import type { LeaseBusinessDetailRow, LeaseDetailFilters } from '../types';
|
||||
import { FilterPickerField } from '../../vehicle-management/components/FilterPickerField';
|
||||
import { MultiPlateFilterField } from '../../vehicle-management/components/MultiPlateFilterField';
|
||||
import { buildDetailMonthOptions, buildDetailOptions } from '../utils/detail';
|
||||
import { DETAIL_PAYMENT_STATUS_OPTIONS } from '../utils/payment-status';
|
||||
|
||||
const PRIMARY_KEYS = ['statMonth', 'businessDept', 'salesperson', 'customerName', 'paymentStatus'] as const;
|
||||
const EXTRA_KEYS = ['plateNos'] as const;
|
||||
|
||||
type FieldKey = (typeof PRIMARY_KEYS)[number] | (typeof EXTRA_KEYS)[number];
|
||||
|
||||
interface FilterFieldDef {
|
||||
key: FieldKey;
|
||||
key: string;
|
||||
label: string;
|
||||
control: React.ReactNode;
|
||||
}
|
||||
@@ -26,7 +25,11 @@ interface FilterPanelProps {
|
||||
}
|
||||
|
||||
function hasExtraFiltersActive(filters: LeaseDetailFilters): boolean {
|
||||
return filters.plateNos.length > 0;
|
||||
return Boolean(filters.paymentStatus || filters.plateNos.length > 0);
|
||||
}
|
||||
|
||||
function countExtraFiltersActive(filters: LeaseDetailFilters): number {
|
||||
return [filters.paymentStatus, filters.plateNos.length > 0].filter(Boolean).length;
|
||||
}
|
||||
|
||||
export function FilterPanel({
|
||||
@@ -40,14 +43,14 @@ export function FilterPanel({
|
||||
|
||||
useEffect(() => {
|
||||
if (hasExtraFiltersActive(filters)) setExpanded(true);
|
||||
}, [filters.plateNos]);
|
||||
}, [filters.paymentStatus, filters.plateNos]);
|
||||
|
||||
const monthOptions = useMemo(() => buildDetailMonthOptions(records), [records]);
|
||||
const deptOptions = useMemo(() => buildDetailOptions(records, 'businessDept'), [records]);
|
||||
const salespersonOptions = useMemo(() => buildDetailOptions(records, 'salesperson'), [records]);
|
||||
|
||||
const fieldMap = useMemo<Record<FieldKey, FilterFieldDef>>(() => ({
|
||||
statMonth: {
|
||||
const fields = useMemo<FilterFieldDef[]>(() => [
|
||||
{
|
||||
key: 'statMonth',
|
||||
label: '统计月份',
|
||||
control: (
|
||||
@@ -60,7 +63,7 @@ export function FilterPanel({
|
||||
/>
|
||||
),
|
||||
},
|
||||
businessDept: {
|
||||
{
|
||||
key: 'businessDept',
|
||||
label: '业务部门',
|
||||
control: (
|
||||
@@ -73,7 +76,7 @@ export function FilterPanel({
|
||||
/>
|
||||
),
|
||||
},
|
||||
salesperson: {
|
||||
{
|
||||
key: 'salesperson',
|
||||
label: '业务员',
|
||||
control: (
|
||||
@@ -86,12 +89,12 @@ export function FilterPanel({
|
||||
/>
|
||||
),
|
||||
},
|
||||
customerName: {
|
||||
{
|
||||
key: 'customerName',
|
||||
label: '客户名称',
|
||||
control: (
|
||||
<input
|
||||
className="vm-input"
|
||||
className="vm-input lbd-filter-text-control"
|
||||
value={filters.customerName}
|
||||
placeholder="输入客户名称(模糊匹配)"
|
||||
aria-label="客户名称"
|
||||
@@ -99,7 +102,7 @@ export function FilterPanel({
|
||||
/>
|
||||
),
|
||||
},
|
||||
paymentStatus: {
|
||||
{
|
||||
key: 'paymentStatus',
|
||||
label: '状态',
|
||||
control: (
|
||||
@@ -112,7 +115,7 @@ export function FilterPanel({
|
||||
/>
|
||||
),
|
||||
},
|
||||
plateNos: {
|
||||
{
|
||||
key: 'plateNos',
|
||||
label: '车牌号码',
|
||||
control: (
|
||||
@@ -124,11 +127,12 @@ export function FilterPanel({
|
||||
/>
|
||||
),
|
||||
},
|
||||
}), [filters, onChange, monthOptions, deptOptions, salespersonOptions]);
|
||||
], [filters, onChange, monthOptions, deptOptions, salespersonOptions]);
|
||||
|
||||
const primaryFields = PRIMARY_KEYS.map((key) => fieldMap[key]);
|
||||
const extraFields = EXTRA_KEYS.map((key) => fieldMap[key]);
|
||||
const extraActiveCount = filters.plateNos.length > 0 ? 1 : 0;
|
||||
const { primary, extra } = splitFilterFields(fields, VM_FILTER_PRIMARY_VISIBLE_COUNT);
|
||||
const showExpand = shouldShowFilterExpand(fields.length);
|
||||
const extraActiveCount = countExtraFiltersActive(filters);
|
||||
const expandPanelId = 'lbd-filter-expand-panel';
|
||||
|
||||
const renderField = (field: FilterFieldDef) => (
|
||||
<label key={field.key} className="vm-filter-field">
|
||||
@@ -149,31 +153,34 @@ export function FilterPanel({
|
||||
|
||||
<div className="ldb-filter-body">
|
||||
<div className="vm-filter-grid ldb-filter-grid ldb-filter-grid--primary" data-filter-tier="primary">
|
||||
{primaryFields.map(renderField)}
|
||||
{primary.map(renderField)}
|
||||
</div>
|
||||
|
||||
{showExpand ? (
|
||||
<div
|
||||
className={`ldb-filter-expand ${expanded ? 'is-expanded' : ''}`}
|
||||
aria-hidden={!expanded}
|
||||
id="lbd-filter-expand-panel"
|
||||
id={expandPanelId}
|
||||
>
|
||||
<div className="ldb-filter-expand-inner">
|
||||
<div className="vm-filter-grid ldb-filter-grid ldb-filter-expand-grid" data-filter-tier="extra">
|
||||
{expanded ? extraFields.map(renderField) : null}
|
||||
{expanded ? extra.map(renderField) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="vm-filter-actions ldb-filter-actions">
|
||||
{showExpand ? (
|
||||
<button
|
||||
type="button"
|
||||
className="vm-btn vm-btn-link ldb-filter-toggle"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
aria-expanded={expanded}
|
||||
aria-controls="lbd-filter-expand-panel"
|
||||
|
||||
data-vm-icon={expanded ? 'chevron-up' : 'filter'}>
|
||||
aria-controls={expandPanelId}
|
||||
data-vm-icon={expanded ? 'chevron-up' : 'filter'}
|
||||
>
|
||||
{expanded ? '收起' : '更多筛选'}
|
||||
{extraActiveCount > 0 && !expanded ? (
|
||||
<span className="ldb-filter-toggle-badge" aria-label="已设置扩展筛选">
|
||||
@@ -181,10 +188,12 @@ export function FilterPanel({
|
||||
</span>
|
||||
) : null}
|
||||
</button>
|
||||
) : null}
|
||||
<button type="button" className="vm-btn vm-btn-ghost ldb-toolbar-btn" onClick={onReset} data-vm-icon="rotate-ccw">
|
||||
重置
|
||||
</button>
|
||||
<button type="button" className="vm-btn vm-btn-primary ldb-toolbar-btn" onClick={onSearch} data-vm-icon="search">查询
|
||||
<button type="button" className="vm-btn vm-btn-primary ldb-toolbar-btn" onClick={onSearch} data-vm-icon="search">
|
||||
查询
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
194
src/prototypes/lease-business-detail/components/MonthlyPlTab.tsx
Normal file
194
src/prototypes/lease-business-detail/components/MonthlyPlTab.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { Download } from 'lucide-react';
|
||||
import type { LeaseBusinessDetailRow } from '../types';
|
||||
import { formatMoney } from '../utils/detail';
|
||||
import {
|
||||
buildDetailYearOptions,
|
||||
buildMonthlyPlRows,
|
||||
exportMonthlyPlRows,
|
||||
sumMonthlyPlRows,
|
||||
type MonthlyPlRow,
|
||||
} from '../utils/monthly-pl';
|
||||
|
||||
import type { DetailMainTab } from './DetailMainTabs';
|
||||
import { DetailMainTabs } from './DetailMainTabs';
|
||||
|
||||
interface MonthlyPlTabProps {
|
||||
records: LeaseBusinessDetailRow[];
|
||||
onToast: (message: string) => void;
|
||||
mainTab: DetailMainTab;
|
||||
onTabChange: (tab: DetailMainTab) => void;
|
||||
}
|
||||
|
||||
function displayCell(row: MonthlyPlRow, value: number): string {
|
||||
if (!row.hasData && value === 0) return '';
|
||||
return formatMoney(value);
|
||||
}
|
||||
|
||||
function renderOutstanding(row: MonthlyPlRow): React.ReactNode {
|
||||
if (!row.hasData && row.outstanding === 0) return '';
|
||||
const text = formatMoney(row.outstanding);
|
||||
if (row.outstanding > 0) {
|
||||
return <span className="lbd-outstanding-warn tabular-nums">{text}</span>;
|
||||
}
|
||||
if (row.outstanding < 0) {
|
||||
return <span className="lbd-outstanding-overpaid tabular-nums">{text}</span>;
|
||||
}
|
||||
return <span className="tabular-nums">{text}</span>;
|
||||
}
|
||||
|
||||
function renderProfit(row: MonthlyPlRow): React.ReactNode {
|
||||
if (!row.hasData && row.profit === 0) return '';
|
||||
const text = formatMoney(row.profit);
|
||||
const cls = row.profit >= 0 ? 'lbd-profit-pos' : 'lbd-profit-neg';
|
||||
return <span className={`tabular-nums ${cls}`}>{text}</span>;
|
||||
}
|
||||
|
||||
export function MonthlyPlTab({ records, onToast, mainTab, onTabChange }: MonthlyPlTabProps) {
|
||||
const yearOptions = useMemo(() => buildDetailYearOptions(records), [records]);
|
||||
const defaultYear = yearOptions[0] ?? new Date().getFullYear();
|
||||
|
||||
const [draftYear, setDraftYear] = useState(defaultYear);
|
||||
const [appliedYear, setAppliedYear] = useState(defaultYear);
|
||||
|
||||
const rows = useMemo(
|
||||
() => buildMonthlyPlRows(records, appliedYear),
|
||||
[records, appliedYear],
|
||||
);
|
||||
const sums = useMemo(() => sumMonthlyPlRows(rows), [rows]);
|
||||
const title = `租赁业务${appliedYear}年盈亏月度汇总`;
|
||||
|
||||
const handleExport = () => {
|
||||
const hasAny = rows.some((row) => row.hasData);
|
||||
if (!hasAny) {
|
||||
onToast('当前年份无明细数据可导出');
|
||||
return;
|
||||
}
|
||||
exportMonthlyPlRows(rows, appliedYear);
|
||||
onToast(`已导出 ${appliedYear} 年盈亏月度汇总`);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="vm-filter-card lbd-filter-card" data-annotation-id="lbd-monthly-pl-filter">
|
||||
<div className="vm-filter-grid lbd-filter-grid lbd-monthly-pl-filter-grid">
|
||||
<label className="vm-filter-field">
|
||||
<span className="vm-filter-label">选择年份</span>
|
||||
<select
|
||||
className="vm-select"
|
||||
value={String(draftYear)}
|
||||
onChange={(event) => setDraftYear(Number(event.target.value))}
|
||||
>
|
||||
{(yearOptions.length ? yearOptions : [defaultYear]).map((year) => (
|
||||
<option key={year} value={year}>{year} 年</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="vm-filter-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="vm-btn vm-btn-ghost"
|
||||
onClick={() => {
|
||||
setDraftYear(defaultYear);
|
||||
setAppliedYear(defaultYear);
|
||||
}}
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="vm-btn vm-btn-primary"
|
||||
onClick={() => setAppliedYear(draftYear)}
|
||||
>
|
||||
查询
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="vm-table-section">
|
||||
<div className="vm-table-toolbar ldb-table-toolbar" data-annotation-id="lbd-monthly-pl-toolbar">
|
||||
<DetailMainTabs mainTab={mainTab} onChange={onTabChange} />
|
||||
<div className="vm-table-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="vm-btn vm-btn-ghost ldb-toolbar-btn"
|
||||
data-vm-icon="download"
|
||||
onClick={handleExport}
|
||||
>
|
||||
导出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="vm-table-card">
|
||||
<h2 className="lbd-monthly-pl-title">{title}</h2>
|
||||
<div className="vm-table-wrap lbd-monthly-pl-wrap" data-annotation-id="lbd-monthly-pl-table">
|
||||
<table className="vm-table ldb-table lbd-monthly-pl-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>月份</th>
|
||||
<th className="ldb-col-money">押金</th>
|
||||
<th className="ldb-col-money">应收</th>
|
||||
<th className="ldb-col-money">实收</th>
|
||||
<th className="ldb-col-money">未收</th>
|
||||
<th className="ldb-col-money">自然月收入</th>
|
||||
<th className="ldb-col-money">氢费预充值</th>
|
||||
<th className="ldb-col-money">成本</th>
|
||||
<th className="ldb-col-money">居间费</th>
|
||||
<th className="ldb-col-money">氢费</th>
|
||||
<th className="ldb-col-money">总成本</th>
|
||||
<th className="ldb-col-money">盈亏</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row) => (
|
||||
<tr key={row.month}>
|
||||
<td className="tabular-nums">{row.month}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.deposit)}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.receivable)}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.received)}</td>
|
||||
<td className="ldb-col-money">{renderOutstanding(row)}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.naturalMonthIncome)}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.hydrogenPrepay)}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.baseCost)}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.brokerage)}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.hydrogenFee)}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.totalCost)}</td>
|
||||
<td className="ldb-col-money">{renderProfit(row)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className="lbd-summary-row">
|
||||
<td className="lbd-summary-cell">总计</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.deposit ?? 0)}</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.receivable ?? 0)}</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.received ?? 0)}</td>
|
||||
<td className="ldb-col-money lbd-summary-cell">
|
||||
{Number(sums.outstanding) > 0 ? (
|
||||
<span className="lbd-outstanding-warn tabular-nums">{formatMoney(sums.outstanding ?? 0)}</span>
|
||||
) : (
|
||||
<span className="tabular-nums">{formatMoney(sums.outstanding ?? 0)}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.naturalMonthIncome ?? 0)}</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.hydrogenPrepay ?? 0)}</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.baseCost ?? 0)}</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.brokerage ?? 0)}</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.hydrogenFee ?? 0)}</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.totalCost ?? 0)}</td>
|
||||
<td className="ldb-col-money lbd-summary-cell">
|
||||
<span className={`tabular-nums ${(sums.profit ?? 0) >= 0 ? 'lbd-profit-pos' : 'lbd-profit-neg'}`}>
|
||||
{formatMoney(sums.profit ?? 0)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -268,7 +268,7 @@ export const DETAIL_TABLE_COLUMNS: DetailTableColumn[] = [
|
||||
{ key: 'remark', title: '备注', className: 'ldb-col-remark', defaultWidth: 140 },
|
||||
];
|
||||
|
||||
/** Excel 导入/导出列规格(47 列,含独立年份/月份/业务员) */
|
||||
/** Excel 导入/导出列规格(47 列业务字段;导出时在首列追加「状态」共 48 列) */
|
||||
export const DETAIL_EXPORT_SPECS: { key: keyof LeaseBusinessDetailRow; title: string }[] = [
|
||||
{ key: 'year', title: '年份' },
|
||||
{ key: 'month', title: '月份' },
|
||||
|
||||
@@ -94,33 +94,13 @@
|
||||
},
|
||||
{
|
||||
"id": "lbd-clog-seed-33-5",
|
||||
"operatedAt": "2026-01-18 10:22:36",
|
||||
"operatorId": "staff-002",
|
||||
"operatorName": "尚建华",
|
||||
"field": "_reconcile",
|
||||
"fieldLabel": "完成对账",
|
||||
"before": "未对账",
|
||||
"after": "已对账(2026-01-18)"
|
||||
},
|
||||
{
|
||||
"id": "lbd-clog-seed-33-6",
|
||||
"operatedAt": "2026-01-18 10:22:36",
|
||||
"operatorId": "staff-002",
|
||||
"operatorName": "尚建华",
|
||||
"field": "archiveStatus",
|
||||
"fieldLabel": "对账状态",
|
||||
"before": "未对账",
|
||||
"after": "已对账"
|
||||
},
|
||||
{
|
||||
"id": "lbd-clog-seed-33-7",
|
||||
"operatedAt": "2026-01-20 14:11:08",
|
||||
"operatorId": "supervisor-001",
|
||||
"operatorName": "王主管",
|
||||
"field": "remark",
|
||||
"fieldLabel": "备注",
|
||||
"before": "—",
|
||||
"after": "主管复核:实收与合同一致,归档确认"
|
||||
"after": "主管复核:实收与合同一致"
|
||||
}
|
||||
],
|
||||
"lbd-280": [
|
||||
|
||||
@@ -6,11 +6,10 @@ import '../vehicle-management/style.css';
|
||||
import '../lease-business-ledger/styles/index.css';
|
||||
import './styles/index.css';
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import { Download, FileUp } from 'lucide-react';
|
||||
import {
|
||||
type AnnotationDirectoryRouteNode,
|
||||
type AnnotationSourceDocument,
|
||||
type AnnotationViewerOptions
|
||||
type AnnotationViewerOptions,
|
||||
} from '@axhub/annotation';
|
||||
import { PrototypeAnnotationHost } from '../../common/prototype-annotation-host';
|
||||
import seedRows from './data/rows.json';
|
||||
@@ -43,21 +42,18 @@ import {
|
||||
createChangeLogEntry,
|
||||
type DetailChangeLogsByRowId,
|
||||
} from './utils/change-log';
|
||||
import { isDetailSupervisor, resolveDetailOperator } from './utils/role';
|
||||
import { resolveDetailOperator } from './utils/role';
|
||||
import {
|
||||
mergeDetailImportRows,
|
||||
type DetailImportDuplicateStrategy,
|
||||
} from './utils/import-merge';
|
||||
import annotationSourceDocument from './annotation-source.json';
|
||||
|
||||
const ARCHIVED_DEMO_ROW_IDS = new Set(['lbd-33']);
|
||||
|
||||
export default function LeaseBusinessDetailApp() {
|
||||
const operator = useMemo(() => resolveDetailOperator(), []);
|
||||
const isSupervisor = isDetailSupervisor(operator);
|
||||
|
||||
const [records, setRecords] = useState<LeaseBusinessDetailRow[]>(() =>
|
||||
(seedRows as LeaseBusinessDetailRow[]).map((row) => applyDetailCalculations({
|
||||
...row,
|
||||
archiveStatus: ARCHIVED_DEMO_ROW_IDS.has(row.id) ? 'archived' : (row.archiveStatus ?? 'active'),
|
||||
reconciledAt: ARCHIVED_DEMO_ROW_IDS.has(row.id) ? '2026-01-18' : (row.reconciledAt ?? ''),
|
||||
})),
|
||||
(seedRows as LeaseBusinessDetailRow[]).map((row) => applyDetailCalculations(row)),
|
||||
);
|
||||
const [changeLogs, setChangeLogs] = useState<DetailChangeLogsByRowId>(
|
||||
() => ({ ...(changeLogSeed as DetailChangeLogsByRowId) }),
|
||||
@@ -70,6 +66,9 @@ export default function LeaseBusinessDetailApp() {
|
||||
const [importOpen, setImportOpen] = useState(false);
|
||||
const [importErrors, setImportErrors] = useState<DetailImportErrorRow[]>([]);
|
||||
const [importErrorHeaders, setImportErrorHeaders] = useState<string[]>([]);
|
||||
const [importSkipped, setImportSkipped] = useState(0);
|
||||
const [importOverwritten, setImportOverwritten] = useState(0);
|
||||
const [duplicateStrategy, setDuplicateStrategy] = useState<DetailImportDuplicateStrategy>('skip');
|
||||
const [toast, setToast] = useState('');
|
||||
const [editRow, setEditRow] = useState<LeaseBusinessDetailRow | null>(null);
|
||||
const [deleteRow, setDeleteRow] = useState<LeaseBusinessDetailRow | null>(null);
|
||||
@@ -94,7 +93,7 @@ export default function LeaseBusinessDetailApp() {
|
||||
const updateRow = useCallback((
|
||||
id: string,
|
||||
patch: Partial<LeaseBusinessDetailRow>,
|
||||
logMeta?: { forceField?: string; fieldLabel?: string },
|
||||
logMeta?: { forceField?: string; fieldLabel?: string; beforeText?: string; afterText?: string },
|
||||
) => {
|
||||
setRecords((prev) => {
|
||||
const before = prev.find((row) => row.id === id);
|
||||
@@ -109,7 +108,12 @@ export default function LeaseBusinessDetailApp() {
|
||||
logMeta.forceField,
|
||||
before[logMeta.forceField as keyof LeaseBusinessDetailRow],
|
||||
after[logMeta.forceField as keyof LeaseBusinessDetailRow],
|
||||
{ fieldLabel: logMeta.fieldLabel, force: true },
|
||||
{
|
||||
fieldLabel: logMeta.fieldLabel,
|
||||
beforeText: logMeta.beforeText,
|
||||
afterText: logMeta.afterText,
|
||||
force: true,
|
||||
},
|
||||
);
|
||||
if (entry) setChangeLogs((prevLogs) => appendChangeLogs(prevLogs, id, [entry]));
|
||||
}
|
||||
@@ -135,28 +139,39 @@ export default function LeaseBusinessDetailApp() {
|
||||
const handleImport = async (file: File) => {
|
||||
try {
|
||||
const result = await parseDetailImportFile(file);
|
||||
setImportErrors(result.errors);
|
||||
setImportErrorHeaders(result.fileHeaders);
|
||||
const merged = mergeDetailImportRows(records, result.success, duplicateStrategy);
|
||||
const allErrors = [
|
||||
...result.errors,
|
||||
...merged.duplicateErrors,
|
||||
...merged.amountErrors,
|
||||
];
|
||||
|
||||
if (result.success.length === 0 && result.errors.length === 0) {
|
||||
setImportErrors(allErrors);
|
||||
setImportErrorHeaders(result.fileHeaders);
|
||||
setImportSkipped(merged.skipped);
|
||||
setImportOverwritten(merged.overwritten);
|
||||
|
||||
const affectedCount = merged.records.length - records.length + merged.overwritten;
|
||||
|
||||
if (affectedCount === 0 && allErrors.length === 0) {
|
||||
showToast('未解析到有效数据,请检查模板与必填列');
|
||||
return;
|
||||
}
|
||||
|
||||
if (result.success.length > 0) {
|
||||
const imported = result.success.map((row) => applyDetailCalculations({
|
||||
...row,
|
||||
archiveStatus: 'active',
|
||||
reconciledAt: '',
|
||||
}));
|
||||
setRecords((prev) => [...imported, ...prev]);
|
||||
if (affectedCount > 0) {
|
||||
const previousIds = new Set(records.map((row) => row.id));
|
||||
const overwrittenIdSet = new Set(merged.overwrittenIds);
|
||||
setRecords(merged.records);
|
||||
setChangeLogs((prev) => {
|
||||
let next = { ...prev };
|
||||
imported.forEach((row) => {
|
||||
merged.records.forEach((row) => {
|
||||
const isNew = !previousIds.has(row.id);
|
||||
const isOverwrite = overwrittenIdSet.has(row.id);
|
||||
if (!isNew && !isOverwrite) return;
|
||||
const entry = createChangeLogEntry(operator, '_import', null, null, {
|
||||
fieldLabel: '批量导入',
|
||||
beforeText: '—',
|
||||
afterText: '新增明细',
|
||||
afterText: isOverwrite ? '覆盖导入' : '新增明细',
|
||||
force: true,
|
||||
});
|
||||
if (entry) next = appendChangeLogs(next, row.id, [entry]);
|
||||
@@ -166,13 +181,18 @@ export default function LeaseBusinessDetailApp() {
|
||||
setPage(1);
|
||||
}
|
||||
|
||||
if (result.errors.length > 0 && result.success.length > 0) {
|
||||
showToast(`已导入 ${result.success.length} 条;${result.errors.length} 条失败,可下载错误日志`);
|
||||
} else if (result.errors.length > 0) {
|
||||
showToast(`${result.errors.length} 条导入失败,请下载错误日志查看原因`);
|
||||
if (allErrors.length > 0 && affectedCount > 0) {
|
||||
const parts = [`已处理 ${affectedCount} 条`];
|
||||
if (merged.skipped > 0) parts.push(`跳过 ${merged.skipped} 条重复`);
|
||||
parts.push(`${allErrors.length} 条失败,可下载错误日志`);
|
||||
showToast(parts.join(';'));
|
||||
} else if (allErrors.length > 0) {
|
||||
showToast(`${allErrors.length} 条导入失败,请下载错误日志查看原因`);
|
||||
} else {
|
||||
setImportOpen(false);
|
||||
showToast(`已导入 ${result.success.length} 条明细,公式列已自动计算`);
|
||||
const parts = [`已导入 ${affectedCount} 条明细`];
|
||||
if (merged.skipped > 0) parts.push(`跳过 ${merged.skipped} 条重复`);
|
||||
showToast(`${parts.join(',')},公式列已自动计算`);
|
||||
}
|
||||
} catch {
|
||||
showToast('导入失败,请检查文件格式');
|
||||
@@ -214,16 +234,6 @@ export default function LeaseBusinessDetailApp() {
|
||||
return (
|
||||
<>
|
||||
<div className="vm-page ldb-page lc-page lc-page--list-dense lbd-page">
|
||||
<div className="lbd-role-banner" role="status">
|
||||
<span>
|
||||
当前视角:
|
||||
{isSupervisor ? '业务管理部主管(可修改已锁定记录)' : '业管人员'}
|
||||
</span>
|
||||
{!isSupervisor && (
|
||||
<span className="lbd-role-banner-hint">主管预览:URL 追加 ?role=supervisor</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<FilterPanel
|
||||
records={records}
|
||||
filters={pendingFilters}
|
||||
@@ -244,6 +254,8 @@ export default function LeaseBusinessDetailApp() {
|
||||
onClick={() => {
|
||||
setImportErrors([]);
|
||||
setImportErrorHeaders([]);
|
||||
setImportSkipped(0);
|
||||
setImportOverwritten(0);
|
||||
setImportOpen(true);
|
||||
}}
|
||||
>
|
||||
@@ -268,7 +280,6 @@ export default function LeaseBusinessDetailApp() {
|
||||
records={paged}
|
||||
summary={kpi}
|
||||
loading={tableLoading}
|
||||
isSupervisor={isSupervisor}
|
||||
onEdit={setEditRow}
|
||||
onDelete={setDeleteRow}
|
||||
onChangeLog={setChangeLogRow}
|
||||
@@ -297,7 +308,11 @@ export default function LeaseBusinessDetailApp() {
|
||||
onClose={() => setImportOpen(false)}
|
||||
onDownloadTemplate={downloadDetailImportTemplate}
|
||||
onImport={handleImport}
|
||||
duplicateStrategy={duplicateStrategy}
|
||||
onDuplicateStrategyChange={setDuplicateStrategy}
|
||||
failedCount={importErrors.length}
|
||||
skippedCount={importSkipped}
|
||||
overwrittenCount={importOverwritten}
|
||||
onDownloadErrorLog={
|
||||
importErrors.length > 0
|
||||
? () => downloadDetailImportErrorLog(importErrors, importErrorHeaders)
|
||||
|
||||
@@ -9,11 +9,114 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const root = join(__dirname, '..');
|
||||
const jsonPath = join(root, 'annotation-source.json');
|
||||
const prdPath = join(root, '.spec/requirements-prd.md');
|
||||
const fieldChecksPath = join(root, '.spec/field-checks.md');
|
||||
const importRulesPath = join(root, '.spec/import-rules.md');
|
||||
|
||||
const doc = JSON.parse(readFileSync(jsonPath, 'utf8'));
|
||||
const prd = readFileSync(prdPath, 'utf8');
|
||||
const fieldChecksMd = readFileSync(fieldChecksPath, 'utf8');
|
||||
const importRulesMd = readFileSync(importRulesPath, 'utf8');
|
||||
|
||||
for (const node of doc.data.nodes) {
|
||||
if (node.annotationText) {
|
||||
doc.markdownMap[node.id] = node.annotationText;
|
||||
}
|
||||
}
|
||||
|
||||
const mm = doc.markdownMap;
|
||||
|
||||
const filterSectionMatch = prd.match(/## 2\. 筛选区\n+([\s\S]*?)\n+---/);
|
||||
if (filterSectionMatch) {
|
||||
doc.markdownMap['lbd-filter'] = `## 2. 筛选区\n\n${filterSectionMatch[1].trim()}\n\n---`;
|
||||
}
|
||||
|
||||
doc.markdownMap['lbd-doc-field-checks'] = fieldChecksMd;
|
||||
|
||||
doc.markdownMap['lbd-col-customer'] = `## 客户名称 · 系统校验
|
||||
|
||||
导入后按**车牌 + 提车/退车日期**与合同推算期望客户,并与客户管理、租赁合同比对。
|
||||
|
||||
### 判定顺序
|
||||
|
||||
1. 期望客户与当前名完全一致 → ✅ 与系统登记一致
|
||||
2. 车牌+客户名命中租赁合同 → ✅ 与租赁合同一致
|
||||
3. 有期望客户但不一致 → ⚠️ 提示建议客户,可**一键替换**
|
||||
4. 客户管理已登记(全等或简称包含)→ ✅ 弱校验通过
|
||||
5. 否则 → ⚠️ 请核对提车/退车日期
|
||||
|
||||
完整规则见目录「单元格系统校验」或 \`.spec/field-checks.md\`。
|
||||
|
||||
---`;
|
||||
|
||||
const tableSectionMatch = prd.match(/## 5\. 明细列表(48 列)\n+([\s\S]*?)\n+---\n+\n+## 6\./);
|
||||
if (tableSectionMatch) {
|
||||
doc.markdownMap['lbd-table'] = `## 5. 明细列表(48 列)\n\n${tableSectionMatch[1].trim()}\n\n---`;
|
||||
}
|
||||
|
||||
doc.markdownMap['lbd-toolbar'] = `## 4. 列表工具栏
|
||||
|
||||
| 按钮 | 行为 |
|
||||
|---|---|
|
||||
| 批量导入 | 下载模板(36 列)→ 选择重复策略 → 上传 Excel |
|
||||
| 批量导出 | 导出当前筛选结果(状态 + 47 列业务字段,共 48 列) |
|
||||
|
||||
### 行内操作
|
||||
|
||||
编辑、删除、变更日志。
|
||||
|
||||
### 导入重复策略
|
||||
|
||||
主键:年份 + 月份 + 车牌 + **客户名称**。支持跳过 / 覆盖 / 报错。
|
||||
|
||||
### 实收金额
|
||||
|
||||
允许实收大于应收合计(导入/编辑不拦截)。详见 \`.spec/import-rules.md\`。
|
||||
|
||||
---`;
|
||||
|
||||
doc.markdownMap['lbd-doc-import-rules'] = importRulesMd;
|
||||
|
||||
doc.markdownMap['lbd-doc-formulas'] = `## 6. 公式列(系统自动计算)
|
||||
|
||||
| 字段 | 计算方式 |
|
||||
|---|---|
|
||||
| **应收合计** | 应收租金 + 维保包干收入 + 保险上浮费 + 运维费(收入)+ 其他收入 + 里程减免 + 其他减免 |
|
||||
| **月度收入** | 月度租金 + 维保包干收入 + 保险上浮费 + 运维费(收入)+ 其他收入 + 里程减免 + 其他减免 |
|
||||
| **未收** | 应收合计 − 实收金额 |
|
||||
| **车辆实际成本** | 车辆标准成本 × 平均天数 |
|
||||
| **总成本** | 车辆实际成本 + 保险费 + 氢费 + 运维费(成本)+ 居间费 + 其他 |
|
||||
| **盈亏** | 月度收入 − 总成本 |
|
||||
|
||||
---`;
|
||||
|
||||
doc.markdownMap['lbd-doc-boundary'] = `## 模块边界
|
||||
|
||||
| 模块 | 定位 |
|
||||
|---|---|
|
||||
| **租赁业务明细** | Excel 宽表维护;48 列;收款状态;导入去重(含客户名称) |
|
||||
| **租赁业务台账** | 账单维度、收款关联、归档与数据范围 |
|
||||
| **业务部台账** | 租赁业绩与盈亏月度汇总(数据来源含本模块明细) |
|
||||
|
||||
### 不做范围
|
||||
|
||||
- 本页不做盈亏月度汇总(见业务部台账)
|
||||
- 服务端持久化、员工数据范围隔离
|
||||
- 收款记录自动回写实收
|
||||
|
||||
---`;
|
||||
|
||||
for (const node of doc.data.nodes) {
|
||||
if (node.id === 'lbd-toolbar') {
|
||||
node.annotationText = doc.markdownMap['lbd-toolbar'];
|
||||
}
|
||||
if (node.id === 'lbd-filter') {
|
||||
node.annotationText = doc.markdownMap['lbd-filter'];
|
||||
}
|
||||
if (node.id === 'lbd-table') {
|
||||
node.annotationText = doc.markdownMap['lbd-table'];
|
||||
}
|
||||
}
|
||||
|
||||
doc.markdownMap['lbd-doc-overview'] = `## 1. 模块定位
|
||||
|
||||
| 项 | 说明 |
|
||||
@@ -21,7 +124,7 @@ doc.markdownMap['lbd-doc-overview'] = `## 1. 模块定位
|
||||
| 模块名称 | 台账数据 — 租赁业务明细 |
|
||||
| 目标用户 | 业务二部业管 / 运营人员 |
|
||||
| 核心任务 | 按 Excel 样表维护租赁车辆收入明细、查询汇总、批量导入导出 |
|
||||
| 页面结构 | 筛选区 + 7 项 KPI + 工具栏 + 48 列宽表(表尾 23 项汇总)+ 分页 |
|
||||
| 页面结构 | 筛选区 + 7 项 KPI + 工具栏 + 48 列宽表 + 分页 |
|
||||
| 设计基底 | vm-page + ldb-page + lc-page |
|
||||
|
||||
对齐 Excel《2026年业务二部运营台账总表》「2.租赁车辆收入明细表」。
|
||||
@@ -90,6 +193,7 @@ doc.directory.nodes = [
|
||||
defaultExpanded: false,
|
||||
children: [
|
||||
nodeDoc('lbd-col-status', '状态'),
|
||||
nodeDoc('lbd-col-customer', '客户名称'),
|
||||
nodeDoc('lbd-col-receivable-total', '应收合计'),
|
||||
nodeDoc('lbd-col-outstanding', '未收'),
|
||||
nodeDoc('lbd-col-vehicle-actual-cost', '车辆实际成本'),
|
||||
@@ -116,6 +220,20 @@ doc.directory.nodes = [
|
||||
title: '模块边界',
|
||||
markdown: mm['lbd-doc-boundary'],
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'lbd-doc-field-checks',
|
||||
title: '单元格系统校验',
|
||||
markdown: mm['lbd-doc-field-checks'],
|
||||
markdownPath: 'src/prototypes/lease-business-detail/.spec/field-checks.md',
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'lbd-doc-import-rules',
|
||||
title: '导入与金额规则',
|
||||
markdown: mm['lbd-doc-import-rules'],
|
||||
markdownPath: 'src/prototypes/lease-business-detail/.spec/import-rules.md',
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'lbd-doc-source',
|
||||
@@ -130,7 +248,11 @@ doc.directory.nodes = [
|
||||
| 筛选 / KPI 汇总 | \`utils/detail.ts\` |
|
||||
| 收款状态 | \`utils/payment-status.ts\` |
|
||||
| 公式计算 | \`utils/calc-detail.ts\` |
|
||||
| 导入导出 | \`utils/batch-io.ts\` |
|
||||
| 导入导出 | \`utils/batch-io.ts\`、\`utils/import-merge.ts\`、\`utils/row-key.ts\` |
|
||||
| 单元格校验 | \`utils/field-checks.ts\`、\`utils/system-ref.ts\`、\`components/FieldCheckIcon.tsx\` |
|
||||
| 保存校验 | \`utils/validate-detail.ts\`(实收超额拦截已停用) |
|
||||
| 校验说明 | \`.spec/field-checks.md\` |
|
||||
| 导入规则 | \`.spec/import-rules.md\` |
|
||||
| 变更日志 | \`utils/change-log.ts\` |
|
||||
| 类型 | \`types.ts\` |
|
||||
| 组件 | \`FilterPanel.tsx\`、\`DetailKpiRow.tsx\`、\`DetailTable.tsx\`、\`DetailImportModal.tsx\`、\`DetailEditModal.tsx\`、\`DetailChangeLogModal.tsx\` |
|
||||
|
||||
@@ -11,6 +11,15 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 筛选区文本输入与 FilterPicker 控件等高 */
|
||||
.lbd-filter-text-control {
|
||||
min-height: var(--vm-control-height);
|
||||
height: var(--vm-control-height);
|
||||
padding: 0 10px;
|
||||
font-size: 0.875rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* —— KPI 汇总卡片(7 项关键指标) —— */
|
||||
.lbd-kpi-row {
|
||||
display: grid;
|
||||
@@ -484,14 +493,6 @@
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.lbd-row-archived td {
|
||||
background: color-mix(in srgb, var(--ln-muted) 6%, var(--ln-surface-card));
|
||||
}
|
||||
|
||||
.lbd-row-archived:hover td {
|
||||
background: color-mix(in srgb, var(--ln-muted) 10%, var(--ln-surface-card));
|
||||
}
|
||||
|
||||
.lbd-changelog-meta {
|
||||
margin: 0 0 12px;
|
||||
font-size: 0.8125rem;
|
||||
@@ -678,3 +679,114 @@
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.lbd-edit-error {
|
||||
margin: 0 0 12px;
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--ln-radius-control);
|
||||
border: 1px solid color-mix(in srgb, var(--ln-danger, #cf1322) 35%, var(--ln-hairline));
|
||||
background: color-mix(in srgb, var(--ln-danger, #cf1322) 8%, var(--ln-surface-card));
|
||||
color: var(--ln-danger, #cf1322);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.lbd-outstanding-overpaid {
|
||||
color: #d48806;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.lbd-main-tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
border-radius: var(--ln-radius-control);
|
||||
border: 1px solid var(--ln-hairline);
|
||||
background: var(--ln-surface-card);
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.lbd-main-tabs--toolbar {
|
||||
margin-bottom: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.lbd-main-tab {
|
||||
appearance: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--ln-text-secondary);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
padding: 8px 14px;
|
||||
border-radius: calc(var(--ln-radius-control) - 2px);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.lbd-main-tab:hover {
|
||||
background: color-mix(in srgb, var(--ln-primary) 8%, transparent);
|
||||
color: var(--ln-text-primary);
|
||||
}
|
||||
|
||||
.lbd-main-tab.is-active {
|
||||
background: color-mix(in srgb, var(--ln-primary) 12%, var(--ln-surface-card));
|
||||
color: var(--ln-primary);
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.lbd-monthly-pl-title {
|
||||
margin: 0 0 12px;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--ln-text-primary);
|
||||
}
|
||||
|
||||
.lbd-monthly-pl-wrap {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.lbd-monthly-pl-table th,
|
||||
.lbd-monthly-pl-table td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.lbd-monthly-pl-filter-grid {
|
||||
grid-template-columns: minmax(180px, 240px);
|
||||
}
|
||||
|
||||
.lbd-import-dup-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.lbd-import-dup-option {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 4px 10px;
|
||||
align-items: start;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--ln-hairline);
|
||||
border-radius: var(--ln-radius-control);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lbd-import-dup-option:has(input:checked) {
|
||||
border-color: color-mix(in srgb, var(--ln-primary) 40%, var(--ln-hairline));
|
||||
background: color-mix(in srgb, var(--ln-primary) 6%, var(--ln-surface-card));
|
||||
}
|
||||
|
||||
.lbd-import-dup-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--ln-text-primary);
|
||||
}
|
||||
|
||||
.lbd-import-dup-hint {
|
||||
grid-column: 2;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--ln-muted);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
export type DetailArchiveStatus = 'active' | 'archived';
|
||||
|
||||
export interface LeaseBusinessDetailRow {
|
||||
id: string;
|
||||
year: number;
|
||||
@@ -49,10 +47,6 @@ export interface LeaseBusinessDetailRow {
|
||||
assetOwner: string;
|
||||
signingCompany: string;
|
||||
remark: string;
|
||||
/** 未对账可编辑;已对账后仅业务管理部主管可改 */
|
||||
archiveStatus?: DetailArchiveStatus;
|
||||
/** 完成对账日期 YYYY-MM-DD */
|
||||
reconciledAt?: string;
|
||||
}
|
||||
|
||||
export interface LeaseDetailFilters {
|
||||
|
||||
@@ -3,6 +3,7 @@ import type { LeaseBusinessDetailRow } from '../types';
|
||||
import { DETAIL_EXPORT_HEADERS, DETAIL_EXPORT_SPECS } from '../components/tableColumns';
|
||||
import { applyDetailCalculations } from './calc-detail';
|
||||
import { getContractRef, getVehicleRef, isPlateInVehicleSystem } from './system-ref';
|
||||
import { resolveDetailPaymentStatus } from './payment-status';
|
||||
|
||||
/** 导入模板列(不含公式列;业务部门/业务员由系统合同反写) */
|
||||
export const DETAIL_IMPORT_TEMPLATE_HEADERS = [
|
||||
@@ -326,7 +327,14 @@ export function downloadDetailImportErrorLog(
|
||||
}
|
||||
|
||||
export function exportDetailRows(rows: LeaseBusinessDetailRow[]): void {
|
||||
const body = [DETAIL_EXPORT_HEADERS, ...rows.map(rowToExportCells)];
|
||||
const headers = ['状态', ...DETAIL_EXPORT_HEADERS];
|
||||
const body = [
|
||||
headers,
|
||||
...rows.map((row) => [
|
||||
resolveDetailPaymentStatus(row.receivableTotal, row.receivedAmount),
|
||||
...rowToExportCells(row),
|
||||
]),
|
||||
];
|
||||
const sheet = XLSX.utils.aoa_to_sheet(body);
|
||||
const book = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(book, sheet, '租赁业务明细');
|
||||
@@ -363,7 +371,9 @@ export async function parseDetailImportFile(file: File): Promise<DetailImportPar
|
||||
return;
|
||||
}
|
||||
|
||||
success.push(applyDetailCalculations(draft));
|
||||
const calculated = applyDetailCalculations(draft);
|
||||
// 实收 ≤ 应收合计:已停用,允许实收大于应收合计
|
||||
success.push(calculated);
|
||||
});
|
||||
|
||||
return { success, errors, fileHeaders };
|
||||
|
||||
@@ -248,7 +248,5 @@ export function applyDetailCalculations(
|
||||
totalCost,
|
||||
outstanding,
|
||||
profitLoss,
|
||||
archiveStatus: row.archiveStatus ?? 'active',
|
||||
reconciledAt: row.reconciledAt ?? '',
|
||||
};
|
||||
}
|
||||
|
||||
@@ -17,11 +17,8 @@ export interface DetailChangeLogEntry {
|
||||
export type DetailChangeLogsByRowId = Record<string, DetailChangeLogEntry[]>;
|
||||
|
||||
const EXTRA_FIELD_LABELS: Record<string, string> = {
|
||||
archiveStatus: '对账状态',
|
||||
reconciledAt: '对账日期',
|
||||
_delete: '删除记录',
|
||||
_import: '批量导入',
|
||||
_reconcile: '完成对账',
|
||||
};
|
||||
|
||||
const FIELD_LABELS: Record<string, string> = Object.fromEntries(
|
||||
@@ -40,11 +37,6 @@ const MONEY_FIELDS = new Set<string>([
|
||||
]);
|
||||
|
||||
export function formatLogValue(field: string, value: unknown): string {
|
||||
if (field === 'archiveStatus') {
|
||||
if (value === 'archived') return '已对账';
|
||||
if (value === 'active') return '未对账';
|
||||
return displayText(value);
|
||||
}
|
||||
if (field === 'year' || field === 'month') {
|
||||
return value === null || value === undefined || value === '' ? '—' : String(value);
|
||||
}
|
||||
@@ -62,8 +54,6 @@ export function valuesEqualForLog(field: string, before: unknown, after: unknown
|
||||
|
||||
const LOGGED_ROW_FIELDS: (keyof LeaseBusinessDetailRow)[] = [
|
||||
...DETAIL_EXPORT_SPECS.map((spec) => spec.key),
|
||||
'archiveStatus',
|
||||
'reconciledAt',
|
||||
];
|
||||
|
||||
export function createChangeLogEntry(
|
||||
@@ -116,11 +106,3 @@ export function collectRowChangeLogs(
|
||||
});
|
||||
return entries;
|
||||
}
|
||||
|
||||
export function canEditDetailRow(
|
||||
row: Pick<LeaseBusinessDetailRow, 'archiveStatus'>,
|
||||
isSupervisor: boolean,
|
||||
): boolean {
|
||||
if (row.archiveStatus === 'archived') return isSupervisor;
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -30,9 +30,12 @@ export function displayDeposit(value: number | string): string {
|
||||
return String(value);
|
||||
}
|
||||
|
||||
export function displayOutstanding(value: number): { text: string; warn: boolean } {
|
||||
if (value === 0) return { text: '0.00', warn: false };
|
||||
return { text: formatMoney(value), warn: value > 0 };
|
||||
export function displayOutstanding(value: number): { text: string; warn: boolean; overpaid: boolean } {
|
||||
if (value === 0) return { text: '0.00', warn: false, overpaid: false };
|
||||
if (value < 0) {
|
||||
return { text: formatMoney(value), warn: true, overpaid: true };
|
||||
}
|
||||
return { text: formatMoney(value), warn: value > 0, overpaid: false };
|
||||
}
|
||||
|
||||
export function applyDetailFilters(
|
||||
|
||||
98
src/prototypes/lease-business-detail/utils/import-merge.ts
Normal file
98
src/prototypes/lease-business-detail/utils/import-merge.ts
Normal file
@@ -0,0 +1,98 @@
|
||||
import type { LeaseBusinessDetailRow } from '../types';
|
||||
import type { DetailImportErrorRow } from './batch-io';
|
||||
import { detailRowBusinessKey, detailRowBusinessKeyLabel } from './row-key';
|
||||
|
||||
export type DetailImportDuplicateStrategy = 'skip' | 'overwrite' | 'error';
|
||||
|
||||
export interface DetailImportMergeResult {
|
||||
records: LeaseBusinessDetailRow[];
|
||||
skipped: number;
|
||||
overwritten: number;
|
||||
overwrittenIds: string[];
|
||||
duplicateErrors: DetailImportErrorRow[];
|
||||
/** 历史字段:实收超额校验已停用,始终为空 */
|
||||
amountErrors: DetailImportErrorRow[];
|
||||
}
|
||||
|
||||
function emptyRawCells(): (string | number)[] {
|
||||
return [];
|
||||
}
|
||||
|
||||
export function mergeDetailImportRows(
|
||||
existing: LeaseBusinessDetailRow[],
|
||||
imported: LeaseBusinessDetailRow[],
|
||||
strategy: DetailImportDuplicateStrategy,
|
||||
): DetailImportMergeResult {
|
||||
const keyToIndex = new Map<string, number>();
|
||||
existing.forEach((row, index) => {
|
||||
keyToIndex.set(detailRowBusinessKey(row), index);
|
||||
});
|
||||
|
||||
const next = [...existing];
|
||||
const toPrepend: LeaseBusinessDetailRow[] = [];
|
||||
let skipped = 0;
|
||||
let overwritten = 0;
|
||||
const overwrittenIds: string[] = [];
|
||||
const duplicateErrors: DetailImportErrorRow[] = [];
|
||||
const amountErrors: DetailImportErrorRow[] = [];
|
||||
|
||||
imported.forEach((row) => {
|
||||
// 实收 ≤ 应收合计:已停用,允许实收大于应收合计
|
||||
const key = detailRowBusinessKey(row);
|
||||
let existingIndex = keyToIndex.get(key);
|
||||
|
||||
if (existingIndex === undefined) {
|
||||
const prependIndex = toPrepend.length;
|
||||
toPrepend.push(row);
|
||||
keyToIndex.set(key, next.length + prependIndex);
|
||||
return;
|
||||
}
|
||||
|
||||
if (existingIndex >= next.length) {
|
||||
const prependIndex = existingIndex - next.length;
|
||||
const current = toPrepend[prependIndex];
|
||||
if (strategy === 'skip') {
|
||||
skipped += 1;
|
||||
return;
|
||||
}
|
||||
if (strategy === 'error') {
|
||||
duplicateErrors.push({
|
||||
reason: `重复记录:${detailRowBusinessKeyLabel(row)} 与本批导入重复`,
|
||||
rawCells: emptyRawCells(),
|
||||
});
|
||||
return;
|
||||
}
|
||||
toPrepend[prependIndex] = { ...row, id: current.id };
|
||||
overwritten += 1;
|
||||
overwrittenIds.push(current.id);
|
||||
return;
|
||||
}
|
||||
|
||||
if (strategy === 'skip') {
|
||||
skipped += 1;
|
||||
return;
|
||||
}
|
||||
|
||||
if (strategy === 'error') {
|
||||
duplicateErrors.push({
|
||||
reason: `重复记录:${detailRowBusinessKeyLabel(row)} 已存在`,
|
||||
rawCells: emptyRawCells(),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const preservedId = next[existingIndex].id;
|
||||
next[existingIndex] = { ...row, id: preservedId };
|
||||
overwritten += 1;
|
||||
overwrittenIds.push(preservedId);
|
||||
});
|
||||
|
||||
return {
|
||||
records: [...toPrepend, ...next],
|
||||
skipped,
|
||||
overwritten,
|
||||
overwrittenIds,
|
||||
duplicateErrors,
|
||||
amountErrors,
|
||||
};
|
||||
}
|
||||
146
src/prototypes/lease-business-detail/utils/monthly-pl.ts
Normal file
146
src/prototypes/lease-business-detail/utils/monthly-pl.ts
Normal file
@@ -0,0 +1,146 @@
|
||||
import * as XLSX from 'xlsx';
|
||||
import type { LeaseBusinessDetailRow } from '../types';
|
||||
import { formatMoney } from './detail';
|
||||
|
||||
export interface MonthlyPlRow {
|
||||
month: number;
|
||||
deposit: number;
|
||||
receivable: number;
|
||||
received: number;
|
||||
outstanding: number;
|
||||
naturalMonthIncome: number;
|
||||
/** 明细表无此字段,汇总占位为 0 */
|
||||
hydrogenPrepay: number;
|
||||
baseCost: number;
|
||||
brokerage: number;
|
||||
hydrogenFee: number;
|
||||
totalCost: number;
|
||||
profit: number;
|
||||
hasData: boolean;
|
||||
}
|
||||
|
||||
export const MONTHLY_PL_SUM_KEYS: (keyof MonthlyPlRow)[] = [
|
||||
'deposit',
|
||||
'receivable',
|
||||
'received',
|
||||
'outstanding',
|
||||
'naturalMonthIncome',
|
||||
'hydrogenPrepay',
|
||||
'baseCost',
|
||||
'brokerage',
|
||||
'hydrogenFee',
|
||||
'totalCost',
|
||||
'profit',
|
||||
];
|
||||
|
||||
function emptyMonthlyRow(month: number): MonthlyPlRow {
|
||||
return {
|
||||
month,
|
||||
deposit: 0,
|
||||
receivable: 0,
|
||||
received: 0,
|
||||
outstanding: 0,
|
||||
naturalMonthIncome: 0,
|
||||
hydrogenPrepay: 0,
|
||||
baseCost: 0,
|
||||
brokerage: 0,
|
||||
hydrogenFee: 0,
|
||||
totalCost: 0,
|
||||
profit: 0,
|
||||
hasData: false,
|
||||
};
|
||||
}
|
||||
|
||||
/** 按年份聚合明细行为 1–12 月盈亏汇总 */
|
||||
export function buildMonthlyPlRows(
|
||||
records: LeaseBusinessDetailRow[],
|
||||
year: number,
|
||||
): MonthlyPlRow[] {
|
||||
const buckets = new Map<number, MonthlyPlRow>();
|
||||
for (let month = 1; month <= 12; month += 1) {
|
||||
buckets.set(month, emptyMonthlyRow(month));
|
||||
}
|
||||
|
||||
records.forEach((row) => {
|
||||
if (row.year !== year) return;
|
||||
const bucket = buckets.get(row.month);
|
||||
if (!bucket) return;
|
||||
|
||||
bucket.hasData = true;
|
||||
bucket.deposit += typeof row.deposit === 'number' ? row.deposit : 0;
|
||||
bucket.receivable += row.receivableTotal;
|
||||
bucket.received += row.receivedAmount;
|
||||
bucket.outstanding += row.outstanding;
|
||||
bucket.naturalMonthIncome += row.monthlyIncome;
|
||||
bucket.baseCost += row.vehicleActualCost;
|
||||
bucket.brokerage += row.brokerageFee;
|
||||
bucket.hydrogenFee += row.hydrogenFee;
|
||||
bucket.totalCost += row.totalCost;
|
||||
bucket.profit += row.profitLoss;
|
||||
});
|
||||
|
||||
return Array.from(buckets.values()).sort((a, b) => a.month - b.month);
|
||||
}
|
||||
|
||||
export function sumMonthlyPlRows(rows: MonthlyPlRow[]): Record<string, number> {
|
||||
const sums: Record<string, number> = {};
|
||||
MONTHLY_PL_SUM_KEYS.forEach((key) => {
|
||||
sums[key] = rows.reduce((acc, row) => acc + (row[key] as number), 0);
|
||||
});
|
||||
return sums;
|
||||
}
|
||||
|
||||
function displayPlMoney(value: number, hasData: boolean): string {
|
||||
if (!hasData && value === 0) return '';
|
||||
return formatMoney(value);
|
||||
}
|
||||
|
||||
export function exportMonthlyPlRows(rows: MonthlyPlRow[], year: number): void {
|
||||
const headers = [
|
||||
'月份',
|
||||
'押金',
|
||||
'应收',
|
||||
'实收',
|
||||
'未收',
|
||||
'自然月收入',
|
||||
'氢费预充值',
|
||||
'成本',
|
||||
'居间费',
|
||||
'氢费',
|
||||
'总成本',
|
||||
'盈亏',
|
||||
];
|
||||
const body = rows.map((row) => [
|
||||
String(row.month),
|
||||
displayPlMoney(row.deposit, row.hasData),
|
||||
displayPlMoney(row.receivable, row.hasData),
|
||||
displayPlMoney(row.received, row.hasData),
|
||||
displayPlMoney(row.outstanding, row.hasData),
|
||||
displayPlMoney(row.naturalMonthIncome, row.hasData),
|
||||
displayPlMoney(row.hydrogenPrepay, row.hasData),
|
||||
displayPlMoney(row.baseCost, row.hasData),
|
||||
displayPlMoney(row.brokerage, row.hasData),
|
||||
displayPlMoney(row.hydrogenFee, row.hasData),
|
||||
displayPlMoney(row.totalCost, row.hasData),
|
||||
displayPlMoney(row.profit, row.hasData),
|
||||
]);
|
||||
|
||||
const sums = sumMonthlyPlRows(rows);
|
||||
const totalRow = [
|
||||
'总计',
|
||||
...MONTHLY_PL_SUM_KEYS.map((key) => formatMoney(sums[key] ?? 0)),
|
||||
];
|
||||
|
||||
const sheet = XLSX.utils.aoa_to_sheet([headers, ...body, totalRow]);
|
||||
const book = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(book, sheet, '盈亏月度汇总');
|
||||
XLSX.writeFile(book, `租赁业务盈亏月度汇总_${year}_${Date.now()}.xlsx`);
|
||||
}
|
||||
|
||||
export function buildDetailYearOptions(records: LeaseBusinessDetailRow[]): number[] {
|
||||
const years = new Set<number>();
|
||||
records.forEach((row) => {
|
||||
if (row.year) years.add(row.year);
|
||||
});
|
||||
return Array.from(years).sort((a, b) => b - a);
|
||||
}
|
||||
15
src/prototypes/lease-business-detail/utils/row-key.ts
Normal file
15
src/prototypes/lease-business-detail/utils/row-key.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import type { LeaseBusinessDetailRow } from '../types';
|
||||
|
||||
/** 业务主键:年份 + 月份 + 车牌号码 + 客户名称 */
|
||||
export function detailRowBusinessKey(
|
||||
row: Pick<LeaseBusinessDetailRow, 'year' | 'month' | 'plateNo' | 'customerName'>,
|
||||
): string {
|
||||
return `${row.year}-${String(row.month).padStart(2, '0')}-${row.plateNo.trim()}::${row.customerName.trim()}`;
|
||||
}
|
||||
|
||||
/** 重复提示用的可读标签 */
|
||||
export function detailRowBusinessKeyLabel(
|
||||
row: Pick<LeaseBusinessDetailRow, 'year' | 'month' | 'plateNo' | 'customerName'>,
|
||||
): string {
|
||||
return `${row.year}年${row.month}月 · ${row.plateNo} · ${row.customerName.trim() || '(无客户)'}`;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import type { LeaseBusinessDetailRow } from '../types';
|
||||
import { applyDetailCalculations } from './calc-detail';
|
||||
|
||||
const MONEY_EPS = 0.005;
|
||||
|
||||
/**
|
||||
* 【已停用】原规则:实收金额不得超过应收合计。
|
||||
* 产品已确认:实收金额可以大于应收合计(多收/预收场景),导入与编辑均不再拦截。
|
||||
* 保留函数签名供对照历史逻辑;当前始终返回 null。
|
||||
*/
|
||||
export function validateReceivedAgainstReceivable(
|
||||
_receivableTotal: number,
|
||||
_receivedAmount: number,
|
||||
): string | null {
|
||||
// if (receivedAmount > receivableTotal + MONEY_EPS) {
|
||||
// return `实收金额(${receivedAmount.toFixed(2)})不能大于应收合计(${receivableTotal.toFixed(2)})`;
|
||||
// }
|
||||
void MONEY_EPS;
|
||||
return null;
|
||||
}
|
||||
|
||||
export function validateDetailRowAmounts(row: LeaseBusinessDetailRow): string | null {
|
||||
return validateReceivedAgainstReceivable(row.receivableTotal, row.receivedAmount);
|
||||
}
|
||||
|
||||
/** 编辑保存前:合并 patch 并重算后校验(当前无金额上限拦截) */
|
||||
export function validateDetailPatch(
|
||||
before: LeaseBusinessDetailRow,
|
||||
patch: Partial<LeaseBusinessDetailRow>,
|
||||
): string | null {
|
||||
const next = applyDetailCalculations({ ...before, ...patch });
|
||||
return validateDetailRowAmounts(next);
|
||||
}
|
||||
@@ -283,8 +283,8 @@ export const ENERGY_MODULES: LineModule[] = [
|
||||
],
|
||||
closure:
|
||||
'签约站氢费由站点主动上报或 PLC 自动采集,预约订单在线闭环,减少能源部手工补录、提升数据时效性。',
|
||||
prototypeHref: '/prototypes/oneos-web-h2-station',
|
||||
prototypeLabel: '打开加氢订单',
|
||||
prototypeHref: '/prototypes/oneos-h5-h2-order',
|
||||
prototypeLabel: '打开加氢订单(H5)',
|
||||
},
|
||||
{
|
||||
id: 'vehicle-h2-fee',
|
||||
@@ -805,7 +805,7 @@ export const SELF_OPERATED_MODULES: LineModule[] = [
|
||||
],
|
||||
closure: '项目收入、司机与车辆成本在同一台账内可核对,盈亏结果可对接财务实收。',
|
||||
prototypeHref: '/prototypes/self-operated-business-ledger',
|
||||
prototypeLabel: '打开自营业务台账',
|
||||
prototypeLabel: '打开物流业务明细',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@@ -47,6 +47,8 @@ vm-page ldb-page
|
||||
## 筛选区
|
||||
|
||||
- 默认一行 **4 项**,其余放入 `ldb-filter-expand` 动画区(与全局 `vm-filter-expand` / `src/common/vm-filter-panel.ts` 规则一致)
|
||||
- 筛选项顺序按业务优先级排列后,**必须**经 `splitFilterFields()` 拆分;禁止手写 `PRIMARY_KEYS` 超过 4 项导致首行溢出
|
||||
- **禁止末行仅 1 项**:展开区项数为 4n+1 时,从首行借调 1 项到展开区(见 `vm-filter-panel.ts` 内 `rebalanceFilterSplit`)
|
||||
- 日期区间使用 `DateRangeFilterField`(见 `vm-shared/DESIGN.md`),展示分隔符为「**至**」
|
||||
- 重置 / 查询按钮加 `ldb-toolbar-btn`
|
||||
|
||||
|
||||
@@ -197,6 +197,10 @@
|
||||
color: var(--ln-muted);
|
||||
}
|
||||
|
||||
/*
|
||||
* ldb-filter-* 与全局 vm-filter-* 同义(见 rules/global-design-spec.md §4.1.3)。
|
||||
* 新代码优先使用 vm-filter-body / vm-filter-expand / vm-filter-toggle。
|
||||
*/
|
||||
.ldb-filter-expand.is-expanded .ldb-filter-expand-inner {
|
||||
overflow: visible;
|
||||
}
|
||||
@@ -251,6 +255,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ldb-filter-toggle-badge {
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
# 加氢订单(H5)Implementation Plan
|
||||
|
||||
> **For agentic workers:** Implement task-by-task. Checkbox tracking. Do **not** git commit unless user asks.
|
||||
|
||||
**Goal:** 交付手机端「加氢订单」原型,站端可查看本站记录、OCR 新增,并对账单联动已对账状态。
|
||||
|
||||
**Architecture:** React 单页原型 + 小羚羚 token 的 390 手机壳;数据读写 `h2VehicleLedgerBridge` 共享 Store;列表 / 分步新增 / 只读详情三视图本地状态切换。
|
||||
|
||||
**Tech Stack:** React + TypeScript、本地 CSS、`@axhub/annotation`、现有 Bridge Store
|
||||
|
||||
---
|
||||
|
||||
### Task 1: Bridge 写入 API
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/common/h2VehicleLedgerBridge.js`
|
||||
|
||||
- [x] 增加 `upsertRow(row)`、`removeRow(id)`,挂到 `H2VehicleLedgerBridge` 与 Store
|
||||
- [x] 新增行默认 `reconcileStatus: pending`;通知 subscribe
|
||||
|
||||
### Task 2: 原型骨架与类型
|
||||
|
||||
**Files:**
|
||||
- Create: `src/prototypes/oneos-h5-h2-order/index.tsx`
|
||||
- Create: `src/prototypes/oneos-h5-h2-order/index.html`(若扫描需要)
|
||||
- Create: `src/prototypes/oneos-h5-h2-order/types.ts`
|
||||
- Create: `src/prototypes/oneos-h5-h2-order/styles/index.css`
|
||||
- Create: `src/prototypes/oneos-h5-h2-order/utils/orders.ts`
|
||||
- Create: `src/prototypes/oneos-h5-h2-order/utils/ocr-mock.ts`
|
||||
- Create: `src/prototypes/oneos-h5-h2-order/utils/format.ts`
|
||||
|
||||
### Task 3: 列表 / 新增向导 / 详情组件
|
||||
|
||||
**Files:**
|
||||
- Create: `components/PhoneShell.tsx`
|
||||
- Create: `components/OrderList.tsx`
|
||||
- Create: `components/OrderCard.tsx`
|
||||
- Create: `components/CreateWizard.tsx`
|
||||
- Create: `components/OrderDetail.tsx`
|
||||
- Create: `components/StationSwitcher.tsx`
|
||||
|
||||
### Task 4: 文档、菜单、标注、导航同步
|
||||
|
||||
**Files:**
|
||||
- Create: `.spec/requirements-prd.md`、`.spec/reconcile-linkage.md`
|
||||
- Create: `annotation-source.json`
|
||||
- Modify: `.axhub/make/sidebar-tree.json`(加氢站管理下「加氢订单」)
|
||||
- Run: `npm run project-nav:sync`、`npm run nav:sync -- --prototype oneos-h5-h2-order --note "..."`
|
||||
|
||||
### Task 5: 验收
|
||||
|
||||
- [ ] `/prototypes/oneos-h5-h2-order` 列表仅本站、FAB 新增 OCR 模拟、已对账只读
|
||||
- [ ] 站点信息对账后本页状态同步(同会话)
|
||||
@@ -0,0 +1,113 @@
|
||||
# 加氢订单(H5)— 已确认需求与设计决策
|
||||
|
||||
| 项 | 内容 |
|
||||
|---|---|
|
||||
| 日期 | 2026-07-14 |
|
||||
| 原型 ID | `oneos-h5-h2-order` |
|
||||
| 菜单位置 | OneOS → 加氢站管理 → 加氢订单 |
|
||||
| 文档性质 | 决策快照(对齐当时确认,不随实现逐行同步) |
|
||||
|
||||
---
|
||||
|
||||
## 1. 已确认产品需求
|
||||
|
||||
| 问题 | 用户选择 |
|
||||
|---|---|
|
||||
| 列表数据范围 | **A. 仅本站**(当前演示站点绑定的加氢站) |
|
||||
| 登录态 | **A. 已登录态**;顶栏展示站名,演示可切换示例站 |
|
||||
| 已对账记录 | **A. 不可改**(只读);未对账可编辑 / 删除 |
|
||||
| OCR 演示 | **A. 拍照或选图 → 约 1s 模拟识别 → 可校正**(已改为单表单,非三步) |
|
||||
|
||||
### 1.1 目标与范围
|
||||
|
||||
| 项 | 说明 |
|
||||
|---|---|
|
||||
| 目标用户 | 加氢站操作人员(采购建站、绑供应商、开账号后使用) |
|
||||
| 核心任务 | 手机浏览器查看 / 上报本站加氢订单,供能源部对账 |
|
||||
| 访问形态 | 手机浏览器 H5(桌面预览用 390 宽手机框) |
|
||||
| 与 Web 关系 | Web 站端/运营仍用「加氢记录」;本页为站端手机入口 |
|
||||
|
||||
**功能清单**
|
||||
|
||||
1. 本站订单列表(KPI:订单数 / 加氢量 / 加氢金额)
|
||||
2. 卡片字段:加氢时间、加氢站名称、车牌号、氢气单价(元/kg)、加氢量、加氢总额、对账状态、对账时间
|
||||
3. 新增:分步 OCR(车牌 → 加氢机面板)→ 核对提交;加氢时间默认当前;站名只读
|
||||
4. 未对账可编辑 / 删除;已对账只读
|
||||
5. 与「站点信息 → 对账单」共享氢费 Store:对账后本页状态变为「已对账」,对账时间为 `YYYY-MM-DD HH:mm`
|
||||
|
||||
**不做**:真登录鉴权、真 OCR 模型、PLC、原生 App、审批流、后端联调
|
||||
|
||||
### 1.2 验收重点
|
||||
|
||||
1. 手机宽度下列表 + 分步新增顺畅(含两次 OCR 模拟)
|
||||
2. 仅展示当前演示站点数据;切换站点列表随之变化
|
||||
3. 已对账不可编辑 / 删除
|
||||
4. 在站点信息完成对账后,本页对应记录状态与对账时间同步(同会话共享 Store)
|
||||
|
||||
---
|
||||
|
||||
## 2. 已确认设计方案
|
||||
|
||||
| 问题 | 用户选择 |
|
||||
|---|---|
|
||||
| 设计基底 | **A. 小羚羚** `make-project-20260629/.../xll-miniapp/DESIGN.md` |
|
||||
| 布局方案 | 列表 + FAB 新增;新增为单表单页(含 OCR);返回时非空二次确认 |
|
||||
|
||||
### 2.1 设计决策
|
||||
|
||||
| 决策 | 内容 |
|
||||
|---|---|
|
||||
| 主色 | `#7AB929` / `#6AA322`(小羚羚绿);与 OneOS Web `#32a06e` 区分,视为「站端 H5」 |
|
||||
| 预览壳 | 居中 390×844 手机框;真机浏览器可全宽 |
|
||||
| 首屏 | 列表为主 + 悬浮「+」 |
|
||||
| 卡片优先级 | 车牌、状态、时间、量与金额;单价 / 对账时间次级 |
|
||||
| 无底 Tab | 本模块单入口,不套小羚羚全局 Tab |
|
||||
| 演示切换 | 顶栏站点下拉,仅演示,不代表正式鉴权 |
|
||||
|
||||
### 2.2 信息架构
|
||||
|
||||
```text
|
||||
加氢订单(H5)
|
||||
├── 列表
|
||||
│ ├── 顶栏:标题 + 当前站(演示切换)
|
||||
│ ├── 摘要条:未对账 n · 已对账 m
|
||||
│ ├── 卡片列表(时间倒序)
|
||||
│ └── FAB 新增
|
||||
├── 新增 / 编辑(未对账)— 单表单
|
||||
│ ├── 加氢时间(默认当前)+ 站名只读
|
||||
│ ├── 拍车牌 OCR → 可校正
|
||||
│ ├── 拍面板 OCR → 单价 / 量 / 总额可校正
|
||||
│ └── 提交;返回时若有未提交内容二次确认
|
||||
└── 详情(已对账,只读)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. 数据与对账联动(实现约定)
|
||||
|
||||
| 项 | 约定 |
|
||||
|---|---|
|
||||
| 数据源 | `src/common/h2VehicleLedgerBridge.js` 共享 Store(与站点信息、车辆氢费明细同源种子) |
|
||||
| 过滤 | `stationName` / `stationId` === 当前演示站 |
|
||||
| 列表单价 / 总额 | 站端口径:`costUnitPrice`、`costTotal`(加氢机成本侧);`hydrogenKg` |
|
||||
| 对账状态 | `reconcileStatus === 'reconciled'` → 已对账;否则未对账 |
|
||||
| 对账时间 | 优先 `reconcileDate`,格式展示 `YYYY-MM-DD HH:mm` |
|
||||
| 写入 | 扩展 Bridge:`upsertRow` / `removeRow`(或等价),保证站点对账单可拉到站端新增的未对账记录 |
|
||||
| 新增默认 | `reconcileStatus: pending`;站名 / stationId 取当前站;客户等字段用演示占位以满足 Store 结构 |
|
||||
| 原型边界 | 本地种子 + 内存 Store,**未接真实 API** |
|
||||
|
||||
---
|
||||
|
||||
## 4. 实施边界(确认后执行)
|
||||
|
||||
**做**
|
||||
|
||||
- 新建原型 `oneos-h5-h2-order`(列表 / 分步新增 / 只读详情)
|
||||
- 挂菜单、同步导航注册表
|
||||
- Bridge 写入能力与对账订阅展示
|
||||
- `.spec/requirements-prd.md` + 对账联动业务说明 + annotation
|
||||
|
||||
**不做**
|
||||
|
||||
- 改造桌面「加氢记录」为主流程(保持并列)
|
||||
- 真相机 OCR SDK、账号体系
|
||||
49
src/prototypes/oneos-h5-h2-order/.spec/feature-create.md
Normal file
49
src/prototypes/oneos-h5-h2-order/.spec/feature-create.md
Normal file
@@ -0,0 +1,49 @@
|
||||
# 功能:新增加氢记录
|
||||
|
||||
## 目标
|
||||
|
||||
站端通过手机浏览器上报一笔加氢记录:拍照识别 + 可校正,提交写入共享氢费 Store。
|
||||
|
||||
## 表单分区
|
||||
|
||||
### 1. 基础信息
|
||||
|
||||
| 字段 | 规则 |
|
||||
|------|------|
|
||||
| 加氢时间 * | 默认=点击「新增」时的当前时间;点击底部弹层选日期+时+分 |
|
||||
| 加氢站名称 | 只读,登录本站名称 |
|
||||
|
||||
### 2. 车牌识别
|
||||
|
||||
| 字段 | 规则 |
|
||||
|------|------|
|
||||
| 拍摄区 | 提示「请拍摄车牌」;相册/相机;选图后自动叠加**时间、地点**水印;OCR 模拟回填车牌 |
|
||||
| 车牌号 * | 占位「请拍摄或输入车牌号」;点击弹出车牌键盘 |
|
||||
| 车辆标签 | 有车牌后:系统车辆列表命中→「羚牛车辆」,否则→「非羚牛车辆」 |
|
||||
| 里程(km) | 选填;支持**从车机获取**(原型 Mock);识别车牌后可自动回填 |
|
||||
|
||||
### 3. 加氢机面板
|
||||
|
||||
| 字段 | 规则 |
|
||||
|------|------|
|
||||
| 拍摄区 | 提示「请拍摄清晰的加氢机照片」;选图后叠加**时间、地点**水印;OCR 模拟回填单价、量、总额 |
|
||||
| OCR 参考 | 展示站点信息维护的加氢机品牌/型号线索(见站点信息「加氢机品牌管理」) |
|
||||
| 氢气单价 * | 可改;变更后重算总额 |
|
||||
| 加氢量 * | 可改;变更后重算总额 |
|
||||
| 加氢总额(元) | 只读;= 单价 × 加氢量(两位小数);界面不展示公式文案 |
|
||||
|
||||
## 提交与拦截
|
||||
|
||||
- 必填齐全方可提交
|
||||
- 同站 + 同车牌 + 同加氢时间 → 拦截重复
|
||||
- 有填写内容点返回 → 二次确认防丢失
|
||||
- 已核对或已对账记录不可从此入口编辑(列表进详情后按钮隐藏)
|
||||
|
||||
## 验收
|
||||
|
||||
1. 时间默认正确且可选到分
|
||||
2. 车牌键盘可用;标签随车牌变化
|
||||
3. 车牌/面板照片右下角可见时间与地点水印
|
||||
4. 可从车机获取里程(有车牌时)
|
||||
5. 改单价或量后总额自动更新且不可手改
|
||||
6. 空表单可直接返回;有内容返回需确认
|
||||
37
src/prototypes/oneos-h5-h2-order/.spec/feature-detail.md
Normal file
37
src/prototypes/oneos-h5-h2-order/.spec/feature-detail.md
Normal file
@@ -0,0 +1,37 @@
|
||||
# 功能:详情、编辑与删除
|
||||
|
||||
## 目标
|
||||
|
||||
查看单笔加氢记录完整字段;在「未核对且未对账」时可编辑或删除。
|
||||
|
||||
## 详情展示
|
||||
|
||||
- 顶部:车牌、加氢时间、核对标签、对账标签
|
||||
- 指标条:加氢总额、加氢量
|
||||
- **识别原图**:车牌照片、加氢机面板照片(均为拍摄时叠加时间/地点水印后的原图;种子数据无实拍时用演示水印图)
|
||||
- 明细行:站点、车牌、里程、单价、核对/对账状态与时间
|
||||
|
||||
## 锁定规则
|
||||
|
||||
| 条件 | 结果 |
|
||||
|------|------|
|
||||
| 已对账 | 不可编辑/删除;提示已纳入站点对账单 |
|
||||
| 已核对(未对账) | 不可编辑/删除;提示能源部已核对 |
|
||||
| 未核对且未对账 | 可编辑、可删除 |
|
||||
|
||||
判定函数:`isOrderLocked`(核对或对账任一成立即锁)。
|
||||
|
||||
## 编辑
|
||||
|
||||
进入与「新增」同一套表单,预填当前值(含已存水印照片);提交走更新逻辑(仍校验重复键)。
|
||||
|
||||
## 删除
|
||||
|
||||
二次确认后从 Bridge 移除该行。
|
||||
|
||||
## 验收
|
||||
|
||||
1. 未核对未对账:底部有删除/编辑
|
||||
2. 已核对或已对账:无操作栏,有锁定说明
|
||||
3. 详情含对账信息;列表卡片不含对账
|
||||
4. 详情展示车牌与面板带水印原图(新上报提交后为实拍;种子行为演示图)
|
||||
40
src/prototypes/oneos-h5-h2-order/.spec/feature-list.md
Normal file
40
src/prototypes/oneos-h5-h2-order/.spec/feature-list.md
Normal file
@@ -0,0 +1,40 @@
|
||||
# 功能:本站列表与 KPI
|
||||
|
||||
## 目标
|
||||
|
||||
站端人员打开「加氢订单」后,一眼看到本站汇总与近期加氢记录,点击卡片进入详情。
|
||||
|
||||
## 页面结构
|
||||
|
||||
1. **当前站点**(只读):登录账号对应加氢站名称,无切站入口
|
||||
2. **KPI 三卡**:订单数 / 加氢量(kg) / 加氢金额
|
||||
3. **加氢记录列表**:按加氢时间倒序
|
||||
4. **底栏「新增」**:固定不遮挡卡片滚动区
|
||||
|
||||
## 列表卡片字段
|
||||
|
||||
| 展示 | 说明 |
|
||||
|------|------|
|
||||
| 车牌号 | 去掉尾缀 F 展示 |
|
||||
| 核对标签 | 未核对(橙)/ 已核对(绿) |
|
||||
| 加氢时间 | 精确到分 |
|
||||
| 加氢量 / 加氢总额 | 等宽数字 |
|
||||
| 单价 | 页脚左侧 |
|
||||
| 核对时间 | 仅已核对时页脚右侧显示 |
|
||||
|
||||
**不展示**:里程、对账状态(对账在站点对账单侧完成)。
|
||||
|
||||
## 交互
|
||||
|
||||
- 点击卡片 → 详情页
|
||||
- 点击底栏「新增」→ 新增表单(时间默认=点击时刻)
|
||||
|
||||
## 数据范围
|
||||
|
||||
仅 `stationName === 当前登录站` 的 Bridge 台账行。原型默认站:中国石油中油高新能源牙谷加油加氢站。
|
||||
|
||||
## 验收
|
||||
|
||||
1. 无切站控件
|
||||
2. KPI 与列表条数一致
|
||||
3. 滚动列表时底栏「新增」仍固定且不压住末条卡片
|
||||
@@ -0,0 +1,61 @@
|
||||
# 功能:手工台账上传
|
||||
|
||||
## 目标
|
||||
|
||||
站端每日上传纸质**手工台账照片**,作为系统电子加氢记录的核对依据。多日未操作时,可通过日历查看缺口并补传过往日期。
|
||||
|
||||
## 产品口径
|
||||
|
||||
| 项 | 规则 |
|
||||
|---|---|
|
||||
| 入口 | H5:底部 Tab「手工台账」;Web:顶栏「手工台账」 |
|
||||
| 站点范围 | 仅展示当前登录用户角色对应站点;单站人员仅 1 个、多站可切换、超级管理员可选全部(原型用标注状态切换演示,未接真实登录) |
|
||||
| 上传形态 | 仅图片(拍照/相册),可多张 |
|
||||
| 维度 | **加氢站 + 自然日(本地日历日)** 一份 |
|
||||
| 日历 | 月历自本站**首笔加氢记录日**起算:绿=已传、橙=未传;首笔之前无需补传;禁选未来日 |
|
||||
| 补传 | 允许为过往未传日期补传;已传日期仅可**追加**新图 |
|
||||
| 归档 | **确认上传后的图片进入已归档状态,不可删除**;未确认的草稿图仍可删除 |
|
||||
| 二次确认 | Web 点「确认上传/补传」先弹窗:「提交后将无法修改,是否确认手工台账照片无误」;确认后才写入 |
|
||||
| 拦截 | **未上传今日手工台账 → 禁止新增加氢记录**(编辑已有记录不拦;补传历史不替代今日校验) |
|
||||
| 数据 | 共享 `H2VehicleLedgerBridge` 内存 Store(未接真实 API);站名/编码解析见 Bridge.`h2BridgeResolveStationId` |
|
||||
|
||||
## 判定顺序(新增拦截)
|
||||
|
||||
| 优先级 | 条件 | 结果 |
|
||||
|--------|------|------|
|
||||
| 1 | 操作=编辑已有记录 | 不校验手工台账 |
|
||||
| 2 | 操作=新增,且目标站今日已有 ≥1 张台账图 | 允许进入新增 |
|
||||
| 3 | 操作=新增,今日未上传 | 提示并跳转手工台账 Tab |
|
||||
|
||||
## 日历与补传
|
||||
|
||||
| 规则 | 说明 |
|
||||
|------|------|
|
||||
| 数据源 | `listManualLedgersByStation`;当日有 ≥1 张图视为已上传 |
|
||||
| 业务起点 | 取本站 Bridge 加氢记录中最早 `hydrogenTime` 自然日;无记录则历史日均不要求补传 |
|
||||
| 未传计数 | 本月内 `max(月初, 首笔日)`~min(月末, 今日) 中未上传的天数 |
|
||||
| 点选 | 仅 `dateKey ≤ 今日`;选中后右侧/下方展示该日草稿图与上传按钮 |
|
||||
| 归档不可删 | Store 已有图强制保留;`upsertManualLedger` 仅追加新图,忽略删除已有图的请求 |
|
||||
| 与拦截关系 | 仅 **今日** 影响「禁止新增」;历史补传解决核对缺口,不放宽今日门禁 |
|
||||
|
||||
## 用户可见
|
||||
|
||||
- 今日状态双反馈(Web 放在右侧「当日台账」卡片内):未上传「今日尚未上传手工台账(YYYY-MM-DD)」异常态;已上传「今日已上传手工台账(YYYY-MM-DD)」正常态
|
||||
- 今日未上传:橙/黄提示 + Tab 红点
|
||||
- 日历:自首笔加氢日起绿/橙标记;首笔之前无橙点(无需补传);本月未传天数摘要
|
||||
- Web 右侧面板标题「手工台账」:空态提示;有图可点进全屏翻页预览并角标「已归档/待提交」;预览区内上传;底部确认前二次弹窗;提交后立即展示已归档缩略图;左右卡片等高
|
||||
|
||||
## 代码路径
|
||||
|
||||
- Bridge:`src/common/h2VehicleLedgerBridge.js`(`hasManualLedgerForDate` / `upsertManualLedger` / `listManualLedgersByStation`)
|
||||
- H5:`oneos-h5-h2-order` · `ManualLedgerPanel` + `utils/manual-ledger.ts`(`buildManualMonthCells` / `getFirstHydrogenDateKey`)
|
||||
- Web:`oneos-web-h2-station/pages/02-加氢记录.jsx`(手工台账 Tab 月历)
|
||||
|
||||
## 验收
|
||||
|
||||
1. 今日未上传时,H5/Web 点「新增」均被拦截并引导上传
|
||||
2. 上传至少一张图并确认后,可新增电子记录
|
||||
3. 日历自首笔加氢日起区分已传/未传;首笔之前不标未传、不计入补传;可点选范围内未传日补传
|
||||
4. 补传历史日后,该日日历变为已传;今日仍未传时新增仍被拦截
|
||||
5. 确认上传后的图显示已归档且不可删除;仅可追加补传
|
||||
6. H5 与 Web 共用同一 Store,一端上传另一端可见(同会话)
|
||||
30
src/prototypes/oneos-h5-h2-order/.spec/fleet-plate-tag.md
Normal file
30
src/prototypes/oneos-h5-h2-order/.spec/fleet-plate-tag.md
Normal file
@@ -0,0 +1,30 @@
|
||||
# 车牌「羚牛车辆 / 非羚牛车辆」标签
|
||||
|
||||
原型本地判定,未接真实车辆管理 API。
|
||||
|
||||
## 判定顺序
|
||||
|
||||
| 优先级 | 条件 | 结果 |
|
||||
|--------|------|------|
|
||||
| 1 | 车牌为空 | 不展示标签 |
|
||||
| 2 | 规范化后车牌 ∈ 本地系统车辆集合 | **羚牛车辆** |
|
||||
| 3 | 有车牌但不在集合中 | **非羚牛车辆** |
|
||||
|
||||
## 前置条件
|
||||
|
||||
- 识别(OCR)或键盘输入得到车牌后才展示。
|
||||
- 比较前去掉尾缀 `F`,统一大写。
|
||||
|
||||
## 数据源
|
||||
|
||||
- `utils/fleet-plates.ts` 内本地种子车牌集合(含加氢 Bridge 演示车牌与部分车辆管理样例)。
|
||||
- 正式环境应改为查询车辆管理 / 系统车辆列表接口。
|
||||
|
||||
## 用户可见结果
|
||||
|
||||
- 绿色标签「羚牛车辆」或橙色标签「非羚牛车辆」。
|
||||
- 不拦截提交(仅提示归属)。
|
||||
|
||||
## 代码路径
|
||||
|
||||
- `getVehicleTag` / `isLingniuVehicle` → `CreateWizard` 车牌行右侧标签。
|
||||
48
src/prototypes/oneos-h5-h2-order/.spec/reconcile-linkage.md
Normal file
48
src/prototypes/oneos-h5-h2-order/.spec/reconcile-linkage.md
Normal file
@@ -0,0 +1,48 @@
|
||||
# 加氢订单(H5)· 对账 / 核对联动规则
|
||||
|
||||
| 项 | 说明 |
|
||||
|---|---|
|
||||
| 代码路径 | Store:`src/common/h2VehicleLedgerBridge.js`;对账单:`oneos-web-h2-station-site`;PC 加氢记录:`oneos-web-h2-station`;车辆氢费明细:`vehicle-h2-fee-ledger` |
|
||||
| 规格全文 | [../vehicle-h2-fee-ledger/.spec/verify-reconcile.md](../vehicle-h2-fee-ledger/.spec/verify-reconcile.md) |
|
||||
| 数据源 | 原型本地种子 + 内存共享 Store(**未接真实 API**) |
|
||||
|
||||
---
|
||||
|
||||
## 1. 两套状态(判定优先级)
|
||||
|
||||
| 优先级 | 状态 | 字段 | 谁触发 | 用户可见 |
|
||||
|---|---|---|---|---|
|
||||
| 1 | **核对** | `verifyStatus` / `verifiedAt` | 车辆氢费明细 · **完成核对** | 未核对 / 已核对 + 核对时间 |
|
||||
| 2 | **对账** | `reconcileStatus` / `reconcileDate` | 站点信息 · **对账单提交** | 未对账 / 已对账 + 对账时间 |
|
||||
|
||||
> `reconciledAt` 仅作完成核对时的兼容写入,**不得**再用于判定「已对账」。
|
||||
|
||||
## 2. 数据流
|
||||
|
||||
```text
|
||||
站端 H5 / Web 新增加氢记录
|
||||
→ Bridge.upsertRow(verify=unverified,reconcile=pending;成本单价/量/总额)
|
||||
→ 车辆氢费明细可见
|
||||
|
||||
能源部 · 完成核对
|
||||
→ verifyStatus=verified + verifiedAt
|
||||
→ 站端同步「已核对」,禁改删
|
||||
|
||||
站点信息 · 对账单提交(仅已核对 ∧ 未对账)
|
||||
→ reconcileStatus=reconciled + reconcileDate + statementRecordId
|
||||
→ 站端 / 台账同步「已对账」
|
||||
```
|
||||
|
||||
## 3. 用户可见结果(H5)
|
||||
|
||||
| 结果 | 行为 |
|
||||
|---|---|
|
||||
| 未核对 | 可编辑、删除 |
|
||||
| 已核对未对账 | 只读;提示能源部已核对 |
|
||||
| 已对账 | 只读;提示已纳入对账单 |
|
||||
|
||||
## 4. 边界
|
||||
|
||||
- 站端上报默认未核对、未对账
|
||||
- 对账时间只认 `reconcileDate`(对账单回写)
|
||||
- 跨页联动依赖同浏览器会话共享 Store
|
||||
80
src/prototypes/oneos-h5-h2-order/.spec/requirements-prd.md
Normal file
80
src/prototypes/oneos-h5-h2-order/.spec/requirements-prd.md
Normal file
@@ -0,0 +1,80 @@
|
||||
# 加氢订单(H5)— 产品需求文档(PRD)
|
||||
|
||||
| 项 | 内容 |
|
||||
|---|---|
|
||||
| 文档版本 | v1.5 |
|
||||
| 模块名称 | 加氢站管理 → 加氢订单 |
|
||||
| 所属系统 | ONE-OS(加氢站手机浏览器) |
|
||||
| 交互原型 | `/prototypes/oneos-h5-h2-order` |
|
||||
| 设计基底 | 小羚羚 `xll-miniapp/DESIGN.md` |
|
||||
| 关联模块 | [站点信息](/prototypes/oneos-web-h2-station-site)、[加氢记录 Web](/prototypes/oneos-web-h2-station)、[车辆氢费明细](/prototypes/vehicle-h2-fee-ledger) |
|
||||
|
||||
---
|
||||
|
||||
## 1. 背景与目标
|
||||
|
||||
采购创建加氢站并绑定供应商、开放系统账号后,加氢站人员通过手机浏览器登录 OneOS,在「加氢订单」模块上报加氢记录。Web「加氢记录」为同一业务的 PC 入口(共享 Bridge 数据;PC 另有导出与预约加氢)。
|
||||
|
||||
每日须上传**手工台账**照片,作为电子记录的核对依据;未上传当日手工台账时不可新增加氢记录。手工台账页提供月历,标出已传/未传日期,支持补传过往缺口。
|
||||
|
||||
### 1.1 目标用户
|
||||
|
||||
加氢站操作人员(户外 / 站场手机使用)。
|
||||
|
||||
### 1.2 功能清单
|
||||
|
||||
| # | 功能 | 说明文档 |
|
||||
|---|---|---|
|
||||
| 1 | 本站列表与 KPI | [feature-list.md](./feature-list.md) |
|
||||
| 2 | 新增加氢记录 | [feature-create.md](./feature-create.md) |
|
||||
| 3 | 详情 / 编辑 / 删除 | [feature-detail.md](./feature-detail.md) |
|
||||
| 4 | **手工台账上传** | [feature-manual-ledger.md](./feature-manual-ledger.md) |
|
||||
| 5 | 羚牛车辆标签 | [fleet-plate-tag.md](./fleet-plate-tag.md) |
|
||||
| 6 | 核对与对账联动 | [reconcile-linkage.md](./reconcile-linkage.md) |
|
||||
|
||||
### 1.3 列表字段
|
||||
|
||||
加氢时间、车牌号、氢气单价、加氢量、加氢总额、核对状态;已核对时展示核对时间。里程在新增/详情展示(选填),列表不展示。列表不展示对账状态。
|
||||
|
||||
### 1.4 不做
|
||||
|
||||
真登录、真 OCR SDK、PLC、原生 App、后端联调。
|
||||
|
||||
---
|
||||
|
||||
## 2. 验收项
|
||||
|
||||
1. 菜单位于 OneOS → 加氢站管理 → 加氢订单
|
||||
2. 默认已登录本站;列表仅本站(无切站)
|
||||
3. 底栏 Tab:加氢订单 / 手工台账;月历可区分已传/未传并补传过往日;未上传今日手工台账不可新增;上传后可新增;时间默认点击新增时刻(到分)
|
||||
4. 已核对或已对账不可编辑/删除;未核对未对账可
|
||||
5. 能源部完成核对后同步「已核对」;站点对账单提交后同步「已对账」+ 对账时间
|
||||
6. 同站同车牌同加氢时间重复保存被拦截
|
||||
7. Web「加氢记录」与 H5「加氢订单」手工台账逻辑一致(同 Store)
|
||||
8. 车牌/面板拍摄预览含水印(时间、地点=本站名称);里程可从车机获取(Mock)
|
||||
9. 面板 OCR 可展示站点信息维护的加氢机品牌型号线索
|
||||
10. 详情页展示车牌与面板带水印原图
|
||||
|
||||
---
|
||||
|
||||
## 3. 复杂逻辑摘要
|
||||
|
||||
| 主题 | 摘要 | 全文 |
|
||||
|---|---|---|
|
||||
| 对账 / 核对 | 核对≠对账;触发方不同 | [reconcile-linkage.md](./reconcile-linkage.md)、[车辆氢费 verify-reconcile](../vehicle-h2-fee-ledger/.spec/verify-reconcile.md) |
|
||||
| 重复键 | 与 Web 共用 Bridge | [Web 数据模型](../oneos-web-h2-station/.spec/record-data-model.md) |
|
||||
| 羚牛车辆标签 | 本地系统车辆集合判定 | [fleet-plate-tag.md](./fleet-plate-tag.md) |
|
||||
| 总额 | 单价×加氢量自动算,界面不展示公式 | [feature-create.md](./feature-create.md) |
|
||||
| 手工台账 | 按站+自然日上传图片;月历标已传/未传可补传;未上传今日禁新增 | [feature-manual-ledger.md](./feature-manual-ledger.md) |
|
||||
|
||||
---
|
||||
|
||||
## 4. 页面与标注对照
|
||||
|
||||
| 页面 pageId | 主要能力 |
|
||||
|---|---|
|
||||
| `list` | 站点头、KPI、订单卡片、底栏新增 |
|
||||
| `create` | 时间选择、站名、车牌键盘、面板 OCR、金额字段 |
|
||||
| `detail` | 详情字段、锁定说明、编辑/删除 |
|
||||
|
||||
标注数据:`annotation-source.json`(由 `scripts/build-annotation-source.mjs` 从本目录 Markdown 生成)。
|
||||
513
src/prototypes/oneos-h5-h2-order/annotation-source.json
Normal file
513
src/prototypes/oneos-h5-h2-order/annotation-source.json
Normal file
@@ -0,0 +1,513 @@
|
||||
{
|
||||
"documentVersion": 1,
|
||||
"format": "axhub-annotation-source",
|
||||
"data": {
|
||||
"version": 2,
|
||||
"prototypeName": "oneos-h5-h2-order",
|
||||
"pageId": "list",
|
||||
"updatedAt": 1784280448632,
|
||||
"nodes": [
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-hero",
|
||||
"index": 1,
|
||||
"title": "当前站点",
|
||||
"pageId": "list",
|
||||
"color": "#7AB929",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-hero']",
|
||||
".h5-hero"
|
||||
],
|
||||
"fingerprint": "hero|list",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-summary",
|
||||
"index": 2,
|
||||
"title": "本站 KPI",
|
||||
"pageId": "list",
|
||||
"color": "#0E8A7B",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-summary']",
|
||||
".h5-summary"
|
||||
],
|
||||
"fingerprint": "summary|list",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-card",
|
||||
"index": 3,
|
||||
"title": "订单卡片",
|
||||
"pageId": "list",
|
||||
"color": "#FF7D00",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-card']",
|
||||
".h5-card"
|
||||
],
|
||||
"fingerprint": "card|list",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-fab",
|
||||
"index": 4,
|
||||
"title": "底栏新增",
|
||||
"pageId": "list",
|
||||
"color": "#7AB929",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-fab']",
|
||||
".h5-fab"
|
||||
],
|
||||
"fingerprint": "fab|list",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-time",
|
||||
"index": 5,
|
||||
"title": "加氢时间",
|
||||
"pageId": "create",
|
||||
"color": "#7AB929",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-time']",
|
||||
"#h5-time"
|
||||
],
|
||||
"fingerprint": "field|h5-time",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-station",
|
||||
"index": 6,
|
||||
"title": "加氢站名称",
|
||||
"pageId": "create",
|
||||
"color": "#86909C",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-station']",
|
||||
"#h5-station"
|
||||
],
|
||||
"fingerprint": "field|h5-station",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-plate",
|
||||
"index": 7,
|
||||
"title": "车牌号",
|
||||
"pageId": "create",
|
||||
"color": "#FF7D00",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-plate']",
|
||||
"#h5-plate"
|
||||
],
|
||||
"fingerprint": "field|h5-plate",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-mileage",
|
||||
"index": 8,
|
||||
"title": "里程",
|
||||
"pageId": "create",
|
||||
"color": "#0E8A7B",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-mileage']",
|
||||
"#h5-mileage"
|
||||
],
|
||||
"fingerprint": "field|h5-mileage",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-dispenser-brands",
|
||||
"index": 9,
|
||||
"title": "加氢机品牌参考",
|
||||
"pageId": "create",
|
||||
"color": "#7C3AED",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-dispenser-brands']",
|
||||
".h5-brand-hint"
|
||||
],
|
||||
"fingerprint": "hint|dispenser-brands",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-price",
|
||||
"index": 10,
|
||||
"title": "氢气单价",
|
||||
"pageId": "create",
|
||||
"color": "#7AB929",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-price']",
|
||||
"#h5-price"
|
||||
],
|
||||
"fingerprint": "field|h5-price",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-kg",
|
||||
"index": 11,
|
||||
"title": "加氢量",
|
||||
"pageId": "create",
|
||||
"color": "#7AB929",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-kg']",
|
||||
"#h5-kg"
|
||||
],
|
||||
"fingerprint": "field|h5-kg",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-total-label",
|
||||
"index": 12,
|
||||
"title": "加氢总额",
|
||||
"pageId": "create",
|
||||
"color": "#0E8A7B",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-total-label']",
|
||||
"#h5-total"
|
||||
],
|
||||
"fingerprint": "field|h5-total",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-detail",
|
||||
"index": 13,
|
||||
"title": "记录详情",
|
||||
"pageId": "detail",
|
||||
"color": "#FF7D00",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-detail']",
|
||||
".h5-panel--detail"
|
||||
],
|
||||
"fingerprint": "detail|panel",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-detail-photos",
|
||||
"index": 14,
|
||||
"title": "识别原图",
|
||||
"pageId": "detail",
|
||||
"color": "#0E8A7B",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-detail-photos']",
|
||||
".h5-detail-photos"
|
||||
],
|
||||
"fingerprint": "detail|photos",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-manual",
|
||||
"index": 15,
|
||||
"title": "手工台账",
|
||||
"pageId": "manual",
|
||||
"color": "#7AB929",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-manual']",
|
||||
".h5-manual"
|
||||
],
|
||||
"fingerprint": "manual|panel",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-manual-calendar",
|
||||
"index": 16,
|
||||
"title": "台账日历",
|
||||
"pageId": "manual",
|
||||
"color": "#0E8A7B",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-manual-calendar']",
|
||||
".h5-cal-grid"
|
||||
],
|
||||
"fingerprint": "manual|calendar",
|
||||
"path": []
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"markdownMap": {
|
||||
"h5-hero": "## 当前站点\n\n只读展示登录账号对应加氢站,列表页不提供切站。\n\n详见 [本站列表](feature-list)。",
|
||||
"h5-summary": "## 本站 KPI\n\n订单数 / 加氢量(kg) / 加氢金额,随本站列表实时汇总。\n\n详见功能说明「本站列表与 KPI」。",
|
||||
"h5-card": "# 功能:本站列表与 KPI\n\n## 目标\n\n站端人员打开「加氢订单」后,一眼看到本站汇总与近期加氢记录,点击卡片进入详情。\n\n## 页面结构\n\n1. **当前站点**(只读):登录账号对应加氢站名称,无切站入口 \n2. **KPI 三卡**:订单数 / 加氢量(kg) / 加氢金额 \n3. **加氢记录列表**:按加氢时间倒序 \n4. **底栏「新增」**:固定不遮挡卡片滚动区 \n\n## 列表卡片字段\n\n| 展示 | 说明 |\n|------|------|\n| 车牌号 | 去掉尾缀 F 展示 |\n| 核对标签 | 未核对(橙)/ 已核对(绿) |\n| 加氢时间 | 精确到分 |\n| 加氢量 / 加氢总额 | 等宽数字 |\n| 单价 | 页脚左侧 |\n| 核对时间 | 仅已核对时页脚右侧显示 |\n\n**不展示**:里程、对账状态(对账在站点对账单侧完成)。\n\n## 交互\n\n- 点击卡片 → 详情页 \n- 点击底栏「新增」→ 新增表单(时间默认=点击时刻) \n\n## 数据范围\n\n仅 `stationName === 当前登录站` 的 Bridge 台账行。原型默认站:中国石油中油高新能源牙谷加油加氢站。\n\n## 验收\n\n1. 无切站控件 \n2. KPI 与列表条数一致 \n3. 滚动列表时底栏「新增」仍固定且不压住末条卡片 \n",
|
||||
"h5-fab": "## 底栏新增\n\n固定在列表底部,不遮挡卡片滚动区。点击进入新增表单,加氢时间默认=点击时刻。\n\n详见功能说明「新增加氢记录」。",
|
||||
"h5-time": "## 加氢时间(必填)\n\n默认=点击「新增」时的当前时间;点击后底部弹层选择日期 + 时 + 分。",
|
||||
"h5-station": "## 加氢站名称\n\n只读。默认显示当前登录账号对应加氢站名称,不可切换。",
|
||||
"h5-plate": "# 车牌「羚牛车辆 / 非羚牛车辆」标签\n\n原型本地判定,未接真实车辆管理 API。\n\n## 判定顺序\n\n| 优先级 | 条件 | 结果 |\n|--------|------|------|\n| 1 | 车牌为空 | 不展示标签 |\n| 2 | 规范化后车牌 ∈ 本地系统车辆集合 | **羚牛车辆** |\n| 3 | 有车牌但不在集合中 | **非羚牛车辆** |\n\n## 前置条件\n\n- 识别(OCR)或键盘输入得到车牌后才展示。\n- 比较前去掉尾缀 `F`,统一大写。\n\n## 数据源\n\n- `utils/fleet-plates.ts` 内本地种子车牌集合(含加氢 Bridge 演示车牌与部分车辆管理样例)。\n- 正式环境应改为查询车辆管理 / 系统车辆列表接口。\n\n## 用户可见结果\n\n- 绿色标签「羚牛车辆」或橙色标签「非羚牛车辆」。\n- 不拦截提交(仅提示归属)。\n\n## 代码路径\n\n- `getVehicleTag` / `isLingniuVehicle` → `CreateWizard` 车牌行右侧标签。\n",
|
||||
"h5-mileage": "## 里程(km)\n\n选填。支持「从车机获取」(原型 Mock);识别车牌后可自动回填。正式环境对接车机 / T-Box。\n\n详见 [新增加氢记录](feature-create)。",
|
||||
"h5-dispenser-brands": "## 加氢机品牌参考\n\n展示站点信息「加氢机品牌管理」维护的品牌·型号,供面板 OCR 模型判断参考。数据源:`h2DispenserBrandStore`。",
|
||||
"h5-price": "## 氢气单价(必填)\n\n可 OCR 识别后校正;变更后自动重算加氢总额(单价×加氢量)。",
|
||||
"h5-kg": "## 加氢量(必填)\n\n可 OCR 识别后校正;变更后自动重算加氢总额。",
|
||||
"h5-total-label": "## 加氢总额(元)\n\n只读展示;由单价×加氢量自动计算(两位小数)。界面标签不展示公式文案。",
|
||||
"h5-detail": "# 功能:详情、编辑与删除\n\n## 目标\n\n查看单笔加氢记录完整字段;在「未核对且未对账」时可编辑或删除。\n\n## 详情展示\n\n- 顶部:车牌、加氢时间、核对标签、对账标签 \n- 指标条:加氢总额、加氢量 \n- **识别原图**:车牌照片、加氢机面板照片(均为拍摄时叠加时间/地点水印后的原图;种子数据无实拍时用演示水印图) \n- 明细行:站点、车牌、里程、单价、核对/对账状态与时间 \n\n## 锁定规则\n\n| 条件 | 结果 |\n|------|------|\n| 已对账 | 不可编辑/删除;提示已纳入站点对账单 |\n| 已核对(未对账) | 不可编辑/删除;提示能源部已核对 |\n| 未核对且未对账 | 可编辑、可删除 |\n\n判定函数:`isOrderLocked`(核对或对账任一成立即锁)。\n\n## 编辑\n\n进入与「新增」同一套表单,预填当前值(含已存水印照片);提交走更新逻辑(仍校验重复键)。\n\n## 删除\n\n二次确认后从 Bridge 移除该行。\n\n## 验收\n\n1. 未核对未对账:底部有删除/编辑 \n2. 已核对或已对账:无操作栏,有锁定说明 \n3. 详情含对账信息;列表卡片不含对账 \n4. 详情展示车牌与面板带水印原图(新上报提交后为实拍;种子行为演示图) \n",
|
||||
"h5-detail-photos": "## 识别原图(含水印)\n\n详情展示车牌识别、加氢机面板的原始照片;照片在拍摄/选图时已叠加时间与地点水印并随记录保存。种子数据无实拍时用演示水印图。\n\n详见 [详情编辑删除](feature-detail)。",
|
||||
"h5-manual": "# 功能:手工台账上传\n\n## 目标\n\n站端每日上传纸质**手工台账照片**,作为系统电子加氢记录的核对依据。多日未操作时,可通过日历查看缺口并补传过往日期。\n\n## 产品口径\n\n| 项 | 规则 |\n|---|---|\n| 入口 | H5:底部 Tab「手工台账」;Web:顶栏「手工台账」 |\n| 上传形态 | 仅图片(拍照/相册),可多张 |\n| 维度 | **加氢站 + 自然日(本地日历日)** 一份 |\n| 日历 | 月历自本站**首笔加氢记录日**起算:绿=已传、橙=未传;首笔之前无需补传;禁选未来日 |\n| 补传 | 允许为过往未传日期补传;已传日期仅可**追加**新图 |\n| 归档 | **确认上传后的图片进入已归档状态,不可删除**;未确认的草稿图仍可删除 |\n| 拦截 | **未上传今日手工台账 → 禁止新增加氢记录**(编辑已有记录不拦;补传历史不替代今日校验) |\n| 数据 | 共享 `H2VehicleLedgerBridge` 内存 Store(未接真实 API) |\n\n## 判定顺序(新增拦截)\n\n| 优先级 | 条件 | 结果 |\n|--------|------|------|\n| 1 | 操作=编辑已有记录 | 不校验手工台账 |\n| 2 | 操作=新增,且目标站今日已有 ≥1 张台账图 | 允许进入新增 |\n| 3 | 操作=新增,今日未上传 | 提示并跳转手工台账 Tab |\n\n## 日历与补传\n\n| 规则 | 说明 |\n|------|------|\n| 数据源 | `listManualLedgersByStation`;当日有 ≥1 张图视为已上传 |\n| 业务起点 | 取本站 Bridge 加氢记录中最早 `hydrogenTime` 自然日;无记录则历史日均不要求补传 |\n| 未传计数 | 本月内 `max(月初, 首笔日)`~min(月末, 今日) 中未上传的天数 |\n| 点选 | 仅 `dateKey ≤ 今日`;选中后右侧/下方展示该日草稿图与上传按钮 |\n| 归档不可删 | Store 已有图强制保留;`upsertManualLedger` 仅追加新图,忽略删除已有图的请求 |\n| 与拦截关系 | 仅 **今日** 影响「禁止新增」;历史补传解决核对缺口,不放宽今日门禁 |\n\n## 用户可见\n\n- 今日未上传:橙/黄提示条 + Tab 红点 \n- 日历:自首笔加氢日起绿/橙标记;首笔之前无橙点(无需补传);本月未传天数摘要 \n- 选中日:上传区标题为该日期;已归档图显示「已归档」无删除;仅未确认草稿可删;已有台账时主按钮为「确认补传」\n\n## 代码路径\n\n- Bridge:`src/common/h2VehicleLedgerBridge.js`(`hasManualLedgerForDate` / `upsertManualLedger` / `listManualLedgersByStation`) \n- H5:`oneos-h5-h2-order` · `ManualLedgerPanel` + `utils/manual-ledger.ts`(`buildManualMonthCells` / `getFirstHydrogenDateKey`) \n- Web:`oneos-web-h2-station/pages/02-加氢记录.jsx`(手工台账 Tab 月历) \n\n## 验收\n\n1. 今日未上传时,H5/Web 点「新增」均被拦截并引导上传 \n2. 上传至少一张图并确认后,可新增电子记录 \n3. 日历自首笔加氢日起区分已传/未传;首笔之前不标未传、不计入补传;可点选范围内未传日补传 \n4. 补传历史日后,该日日历变为已传;今日仍未传时新增仍被拦截 \n5. 确认上传后的图显示已归档且不可删除;仅可追加补传 \n6. H5 与 Web 共用同一 Store,一端上传另一端可见(同会话) \n",
|
||||
"h5-manual-calendar": "## 台账日历\n\n自本站首笔加氢记录日起:绿=已上传,橙=未上传;首笔之前无需补传。禁选未来日。点选范围内未传日可补传。仅「今日」是否上传影响新增加氢记录。\n\n详见 [手工台账上传](feature-manual-ledger)。"
|
||||
},
|
||||
"assetMap": {},
|
||||
"directory": {
|
||||
"nodes": [
|
||||
{
|
||||
"type": "folder",
|
||||
"id": "h5-doc-root",
|
||||
"title": "加氢订单(H5)说明",
|
||||
"defaultExpanded": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-doc-prd",
|
||||
"title": "PRD 全文",
|
||||
"markdown": "# 加氢订单(H5)— 产品需求文档(PRD)\n\n| 项 | 内容 |\n|---|---|\n| 文档版本 | v1.5 |\n| 模块名称 | 加氢站管理 → 加氢订单 |\n| 所属系统 | ONE-OS(加氢站手机浏览器) |\n| 交互原型 | `/prototypes/oneos-h5-h2-order` |\n| 设计基底 | 小羚羚 `xll-miniapp/DESIGN.md` |\n| 关联模块 | [站点信息](/prototypes/oneos-web-h2-station-site)、[加氢记录 Web](/prototypes/oneos-web-h2-station)、[车辆氢费明细](/prototypes/vehicle-h2-fee-ledger) |\n\n---\n\n## 1. 背景与目标\n\n采购创建加氢站并绑定供应商、开放系统账号后,加氢站人员通过手机浏览器登录 OneOS,在「加氢订单」模块上报加氢记录。Web「加氢记录」为同一业务的 PC 入口(共享 Bridge 数据;PC 另有导出与预约加氢)。\n\n每日须上传**手工台账**照片,作为电子记录的核对依据;未上传当日手工台账时不可新增加氢记录。手工台账页提供月历,标出已传/未传日期,支持补传过往缺口。\n\n### 1.1 目标用户\n\n加氢站操作人员(户外 / 站场手机使用)。\n\n### 1.2 功能清单\n\n| # | 功能 | 说明文档 |\n|---|---|---|\n| 1 | 本站列表与 KPI | [feature-list.md](./feature-list.md) |\n| 2 | 新增加氢记录 | [feature-create.md](./feature-create.md) |\n| 3 | 详情 / 编辑 / 删除 | [feature-detail.md](./feature-detail.md) |\n| 4 | **手工台账上传** | [feature-manual-ledger.md](./feature-manual-ledger.md) |\n| 5 | 羚牛车辆标签 | [fleet-plate-tag.md](./fleet-plate-tag.md) |\n| 6 | 核对与对账联动 | [reconcile-linkage.md](./reconcile-linkage.md) |\n\n### 1.3 列表字段\n\n加氢时间、车牌号、氢气单价、加氢量、加氢总额、核对状态;已核对时展示核对时间。里程在新增/详情展示(选填),列表不展示。列表不展示对账状态。\n\n### 1.4 不做\n\n真登录、真 OCR SDK、PLC、原生 App、后端联调。\n\n---\n\n## 2. 验收项\n\n1. 菜单位于 OneOS → 加氢站管理 → 加氢订单 \n2. 默认已登录本站;列表仅本站(无切站) \n3. 底栏 Tab:加氢订单 / 手工台账;月历可区分已传/未传并补传过往日;未上传今日手工台账不可新增;上传后可新增;时间默认点击新增时刻(到分) \n4. 已核对或已对账不可编辑/删除;未核对未对账可 \n5. 能源部完成核对后同步「已核对」;站点对账单提交后同步「已对账」+ 对账时间 \n6. 同站同车牌同加氢时间重复保存被拦截 \n7. Web「加氢记录」与 H5「加氢订单」手工台账逻辑一致(同 Store) \n8. 车牌/面板拍摄预览含水印(时间、地点=本站名称);里程可从车机获取(Mock) \n9. 面板 OCR 可展示站点信息维护的加氢机品牌型号线索 \n10. 详情页展示车牌与面板带水印原图 \n\n---\n\n## 3. 复杂逻辑摘要\n\n| 主题 | 摘要 | 全文 |\n|---|---|---|\n| 对账 / 核对 | 核对≠对账;触发方不同 | [reconcile-linkage.md](./reconcile-linkage.md)、[车辆氢费 verify-reconcile](../vehicle-h2-fee-ledger/.spec/verify-reconcile.md) |\n| 重复键 | 与 Web 共用 Bridge | [Web 数据模型](../oneos-web-h2-station/.spec/record-data-model.md) |\n| 羚牛车辆标签 | 本地系统车辆集合判定 | [fleet-plate-tag.md](./fleet-plate-tag.md) |\n| 总额 | 单价×加氢量自动算,界面不展示公式 | [feature-create.md](./feature-create.md) |\n| 手工台账 | 按站+自然日上传图片;月历标已传/未传可补传;未上传今日禁新增 | [feature-manual-ledger.md](./feature-manual-ledger.md) |\n\n---\n\n## 4. 页面与标注对照\n\n| 页面 pageId | 主要能力 |\n|---|---|\n| `list` | 站点头、KPI、订单卡片、底栏新增 |\n| `create` | 时间选择、站名、车牌键盘、面板 OCR、金额字段 |\n| `detail` | 详情字段、锁定说明、编辑/删除 |\n\n标注数据:`annotation-source.json`(由 `scripts/build-annotation-source.mjs` 从本目录 Markdown 生成)。\n",
|
||||
"markdownPath": ".spec/requirements-prd.md"
|
||||
},
|
||||
{
|
||||
"type": "folder",
|
||||
"id": "h5-doc-features",
|
||||
"title": "功能说明",
|
||||
"defaultExpanded": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-doc-list",
|
||||
"title": "本站列表与 KPI",
|
||||
"markdown": "# 功能:本站列表与 KPI\n\n## 目标\n\n站端人员打开「加氢订单」后,一眼看到本站汇总与近期加氢记录,点击卡片进入详情。\n\n## 页面结构\n\n1. **当前站点**(只读):登录账号对应加氢站名称,无切站入口 \n2. **KPI 三卡**:订单数 / 加氢量(kg) / 加氢金额 \n3. **加氢记录列表**:按加氢时间倒序 \n4. **底栏「新增」**:固定不遮挡卡片滚动区 \n\n## 列表卡片字段\n\n| 展示 | 说明 |\n|------|------|\n| 车牌号 | 去掉尾缀 F 展示 |\n| 核对标签 | 未核对(橙)/ 已核对(绿) |\n| 加氢时间 | 精确到分 |\n| 加氢量 / 加氢总额 | 等宽数字 |\n| 单价 | 页脚左侧 |\n| 核对时间 | 仅已核对时页脚右侧显示 |\n\n**不展示**:里程、对账状态(对账在站点对账单侧完成)。\n\n## 交互\n\n- 点击卡片 → 详情页 \n- 点击底栏「新增」→ 新增表单(时间默认=点击时刻) \n\n## 数据范围\n\n仅 `stationName === 当前登录站` 的 Bridge 台账行。原型默认站:中国石油中油高新能源牙谷加油加氢站。\n\n## 验收\n\n1. 无切站控件 \n2. KPI 与列表条数一致 \n3. 滚动列表时底栏「新增」仍固定且不压住末条卡片 \n",
|
||||
"markdownPath": ".spec/feature-list.md"
|
||||
},
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-doc-create",
|
||||
"title": "新增加氢记录",
|
||||
"markdown": "# 功能:新增加氢记录\n\n## 目标\n\n站端通过手机浏览器上报一笔加氢记录:拍照识别 + 可校正,提交写入共享氢费 Store。\n\n## 表单分区\n\n### 1. 基础信息\n\n| 字段 | 规则 |\n|------|------|\n| 加氢时间 * | 默认=点击「新增」时的当前时间;点击底部弹层选日期+时+分 |\n| 加氢站名称 | 只读,登录本站名称 |\n\n### 2. 车牌识别\n\n| 字段 | 规则 |\n|------|------|\n| 拍摄区 | 提示「请拍摄车牌」;相册/相机;选图后自动叠加**时间、地点**水印;OCR 模拟回填车牌 |\n| 车牌号 * | 占位「请拍摄或输入车牌号」;点击弹出车牌键盘 |\n| 车辆标签 | 有车牌后:系统车辆列表命中→「羚牛车辆」,否则→「非羚牛车辆」 |\n| 里程(km) | 选填;支持**从车机获取**(原型 Mock);识别车牌后可自动回填 |\n\n### 3. 加氢机面板\n\n| 字段 | 规则 |\n|------|------|\n| 拍摄区 | 提示「请拍摄清晰的加氢机照片」;选图后叠加**时间、地点**水印;OCR 模拟回填单价、量、总额 |\n| OCR 参考 | 展示站点信息维护的加氢机品牌/型号线索(见站点信息「加氢机品牌管理」) |\n| 氢气单价 * | 可改;变更后重算总额 |\n| 加氢量 * | 可改;变更后重算总额 |\n| 加氢总额(元) | 只读;= 单价 × 加氢量(两位小数);界面不展示公式文案 |\n\n## 提交与拦截\n\n- 必填齐全方可提交 \n- 同站 + 同车牌 + 同加氢时间 → 拦截重复 \n- 有填写内容点返回 → 二次确认防丢失 \n- 已核对或已对账记录不可从此入口编辑(列表进详情后按钮隐藏) \n\n## 验收\n\n1. 时间默认正确且可选到分 \n2. 车牌键盘可用;标签随车牌变化 \n3. 车牌/面板照片右下角可见时间与地点水印 \n4. 可从车机获取里程(有车牌时) \n5. 改单价或量后总额自动更新且不可手改 \n6. 空表单可直接返回;有内容返回需确认 \n",
|
||||
"markdownPath": ".spec/feature-create.md"
|
||||
},
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-doc-manual",
|
||||
"title": "手工台账上传",
|
||||
"markdown": "# 功能:手工台账上传\n\n## 目标\n\n站端每日上传纸质**手工台账照片**,作为系统电子加氢记录的核对依据。多日未操作时,可通过日历查看缺口并补传过往日期。\n\n## 产品口径\n\n| 项 | 规则 |\n|---|---|\n| 入口 | H5:底部 Tab「手工台账」;Web:顶栏「手工台账」 |\n| 上传形态 | 仅图片(拍照/相册),可多张 |\n| 维度 | **加氢站 + 自然日(本地日历日)** 一份 |\n| 日历 | 月历自本站**首笔加氢记录日**起算:绿=已传、橙=未传;首笔之前无需补传;禁选未来日 |\n| 补传 | 允许为过往未传日期补传;已传日期仅可**追加**新图 |\n| 归档 | **确认上传后的图片进入已归档状态,不可删除**;未确认的草稿图仍可删除 |\n| 拦截 | **未上传今日手工台账 → 禁止新增加氢记录**(编辑已有记录不拦;补传历史不替代今日校验) |\n| 数据 | 共享 `H2VehicleLedgerBridge` 内存 Store(未接真实 API) |\n\n## 判定顺序(新增拦截)\n\n| 优先级 | 条件 | 结果 |\n|--------|------|------|\n| 1 | 操作=编辑已有记录 | 不校验手工台账 |\n| 2 | 操作=新增,且目标站今日已有 ≥1 张台账图 | 允许进入新增 |\n| 3 | 操作=新增,今日未上传 | 提示并跳转手工台账 Tab |\n\n## 日历与补传\n\n| 规则 | 说明 |\n|------|------|\n| 数据源 | `listManualLedgersByStation`;当日有 ≥1 张图视为已上传 |\n| 业务起点 | 取本站 Bridge 加氢记录中最早 `hydrogenTime` 自然日;无记录则历史日均不要求补传 |\n| 未传计数 | 本月内 `max(月初, 首笔日)`~min(月末, 今日) 中未上传的天数 |\n| 点选 | 仅 `dateKey ≤ 今日`;选中后右侧/下方展示该日草稿图与上传按钮 |\n| 归档不可删 | Store 已有图强制保留;`upsertManualLedger` 仅追加新图,忽略删除已有图的请求 |\n| 与拦截关系 | 仅 **今日** 影响「禁止新增」;历史补传解决核对缺口,不放宽今日门禁 |\n\n## 用户可见\n\n- 今日未上传:橙/黄提示条 + Tab 红点 \n- 日历:自首笔加氢日起绿/橙标记;首笔之前无橙点(无需补传);本月未传天数摘要 \n- 选中日:上传区标题为该日期;已归档图显示「已归档」无删除;仅未确认草稿可删;已有台账时主按钮为「确认补传」\n\n## 代码路径\n\n- Bridge:`src/common/h2VehicleLedgerBridge.js`(`hasManualLedgerForDate` / `upsertManualLedger` / `listManualLedgersByStation`) \n- H5:`oneos-h5-h2-order` · `ManualLedgerPanel` + `utils/manual-ledger.ts`(`buildManualMonthCells` / `getFirstHydrogenDateKey`) \n- Web:`oneos-web-h2-station/pages/02-加氢记录.jsx`(手工台账 Tab 月历) \n\n## 验收\n\n1. 今日未上传时,H5/Web 点「新增」均被拦截并引导上传 \n2. 上传至少一张图并确认后,可新增电子记录 \n3. 日历自首笔加氢日起区分已传/未传;首笔之前不标未传、不计入补传;可点选范围内未传日补传 \n4. 补传历史日后,该日日历变为已传;今日仍未传时新增仍被拦截 \n5. 确认上传后的图显示已归档且不可删除;仅可追加补传 \n6. H5 与 Web 共用同一 Store,一端上传另一端可见(同会话) \n",
|
||||
"markdownPath": ".spec/feature-manual-ledger.md"
|
||||
},
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-doc-detail",
|
||||
"title": "详情编辑删除",
|
||||
"markdown": "# 功能:详情、编辑与删除\n\n## 目标\n\n查看单笔加氢记录完整字段;在「未核对且未对账」时可编辑或删除。\n\n## 详情展示\n\n- 顶部:车牌、加氢时间、核对标签、对账标签 \n- 指标条:加氢总额、加氢量 \n- **识别原图**:车牌照片、加氢机面板照片(均为拍摄时叠加时间/地点水印后的原图;种子数据无实拍时用演示水印图) \n- 明细行:站点、车牌、里程、单价、核对/对账状态与时间 \n\n## 锁定规则\n\n| 条件 | 结果 |\n|------|------|\n| 已对账 | 不可编辑/删除;提示已纳入站点对账单 |\n| 已核对(未对账) | 不可编辑/删除;提示能源部已核对 |\n| 未核对且未对账 | 可编辑、可删除 |\n\n判定函数:`isOrderLocked`(核对或对账任一成立即锁)。\n\n## 编辑\n\n进入与「新增」同一套表单,预填当前值(含已存水印照片);提交走更新逻辑(仍校验重复键)。\n\n## 删除\n\n二次确认后从 Bridge 移除该行。\n\n## 验收\n\n1. 未核对未对账:底部有删除/编辑 \n2. 已核对或已对账:无操作栏,有锁定说明 \n3. 详情含对账信息;列表卡片不含对账 \n4. 详情展示车牌与面板带水印原图(新上报提交后为实拍;种子行为演示图) \n",
|
||||
"markdownPath": ".spec/feature-detail.md"
|
||||
},
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-doc-fleet",
|
||||
"title": "羚牛车辆标签",
|
||||
"markdown": "# 车牌「羚牛车辆 / 非羚牛车辆」标签\n\n原型本地判定,未接真实车辆管理 API。\n\n## 判定顺序\n\n| 优先级 | 条件 | 结果 |\n|--------|------|------|\n| 1 | 车牌为空 | 不展示标签 |\n| 2 | 规范化后车牌 ∈ 本地系统车辆集合 | **羚牛车辆** |\n| 3 | 有车牌但不在集合中 | **非羚牛车辆** |\n\n## 前置条件\n\n- 识别(OCR)或键盘输入得到车牌后才展示。\n- 比较前去掉尾缀 `F`,统一大写。\n\n## 数据源\n\n- `utils/fleet-plates.ts` 内本地种子车牌集合(含加氢 Bridge 演示车牌与部分车辆管理样例)。\n- 正式环境应改为查询车辆管理 / 系统车辆列表接口。\n\n## 用户可见结果\n\n- 绿色标签「羚牛车辆」或橙色标签「非羚牛车辆」。\n- 不拦截提交(仅提示归属)。\n\n## 代码路径\n\n- `getVehicleTag` / `isLingniuVehicle` → `CreateWizard` 车牌行右侧标签。\n",
|
||||
"markdownPath": ".spec/fleet-plate-tag.md"
|
||||
},
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-doc-reconcile",
|
||||
"title": "核对与对账联动",
|
||||
"markdown": "# 加氢订单(H5)· 对账 / 核对联动规则\n\n| 项 | 说明 |\n|---|---|\n| 代码路径 | Store:`src/common/h2VehicleLedgerBridge.js`;对账单:`oneos-web-h2-station-site`;PC 加氢记录:`oneos-web-h2-station`;车辆氢费明细:`vehicle-h2-fee-ledger` |\n| 规格全文 | [../vehicle-h2-fee-ledger/.spec/verify-reconcile.md](../vehicle-h2-fee-ledger/.spec/verify-reconcile.md) |\n| 数据源 | 原型本地种子 + 内存共享 Store(**未接真实 API**) |\n\n---\n\n## 1. 两套状态(判定优先级)\n\n| 优先级 | 状态 | 字段 | 谁触发 | 用户可见 |\n|---|---|---|---|---|\n| 1 | **核对** | `verifyStatus` / `verifiedAt` | 车辆氢费明细 · **完成核对** | 未核对 / 已核对 + 核对时间 |\n| 2 | **对账** | `reconcileStatus` / `reconcileDate` | 站点信息 · **对账单提交** | 未对账 / 已对账 + 对账时间 |\n\n> `reconciledAt` 仅作完成核对时的兼容写入,**不得**再用于判定「已对账」。\n\n## 2. 数据流\n\n```text\n站端 H5 / Web 新增加氢记录\n → Bridge.upsertRow(verify=unverified,reconcile=pending;成本单价/量/总额)\n → 车辆氢费明细可见\n\n能源部 · 完成核对\n → verifyStatus=verified + verifiedAt\n → 站端同步「已核对」,禁改删\n\n站点信息 · 对账单提交(仅已核对 ∧ 未对账)\n → reconcileStatus=reconciled + reconcileDate + statementRecordId\n → 站端 / 台账同步「已对账」\n```\n\n## 3. 用户可见结果(H5)\n\n| 结果 | 行为 |\n|---|---|\n| 未核对 | 可编辑、删除 |\n| 已核对未对账 | 只读;提示能源部已核对 |\n| 已对账 | 只读;提示已纳入对账单 |\n\n## 4. 边界\n\n- 站端上报默认未核对、未对账\n- 对账时间只认 `reconcileDate`(对账单回写)\n- 跨页联动依赖同浏览器会话共享 Store\n",
|
||||
"markdownPath": ".spec/reconcile-linkage.md"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "folder",
|
||||
"id": "h5-doc-pages",
|
||||
"title": "按页面",
|
||||
"defaultExpanded": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "folder",
|
||||
"id": "h5-page-list",
|
||||
"title": "列表页",
|
||||
"defaultExpanded": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "route",
|
||||
"id": "h5-route-list",
|
||||
"title": "list",
|
||||
"route": "list",
|
||||
"payload": {
|
||||
"pageId": "list"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-page-list-md",
|
||||
"title": "列表页要点",
|
||||
"markdown": "# 功能:本站列表与 KPI\n\n## 目标\n\n站端人员打开「加氢订单」后,一眼看到本站汇总与近期加氢记录,点击卡片进入详情。\n\n## 页面结构\n\n1. **当前站点**(只读):登录账号对应加氢站名称,无切站入口 \n2. **KPI 三卡**:订单数 / 加氢量(kg) / 加氢金额 \n3. **加氢记录列表**:按加氢时间倒序 \n4. **底栏「新增」**:固定不遮挡卡片滚动区 \n\n## 列表卡片字段\n\n| 展示 | 说明 |\n|------|------|\n| 车牌号 | 去掉尾缀 F 展示 |\n| 核对标签 | 未核对(橙)/ 已核对(绿) |\n| 加氢时间 | 精确到分 |\n| 加氢量 / 加氢总额 | 等宽数字 |\n| 单价 | 页脚左侧 |\n| 核对时间 | 仅已核对时页脚右侧显示 |\n\n**不展示**:里程、对账状态(对账在站点对账单侧完成)。\n\n## 交互\n\n- 点击卡片 → 详情页 \n- 点击底栏「新增」→ 新增表单(时间默认=点击时刻) \n\n## 数据范围\n\n仅 `stationName === 当前登录站` 的 Bridge 台账行。原型默认站:中国石油中油高新能源牙谷加油加氢站。\n\n## 验收\n\n1. 无切站控件 \n2. KPI 与列表条数一致 \n3. 滚动列表时底栏「新增」仍固定且不压住末条卡片 \n"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "folder",
|
||||
"id": "h5-page-create",
|
||||
"title": "新增页",
|
||||
"defaultExpanded": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "route",
|
||||
"id": "h5-route-create",
|
||||
"title": "create",
|
||||
"route": "create",
|
||||
"payload": {
|
||||
"pageId": "create"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-page-create-md",
|
||||
"title": "新增页要点",
|
||||
"markdown": "# 功能:新增加氢记录\n\n## 目标\n\n站端通过手机浏览器上报一笔加氢记录:拍照识别 + 可校正,提交写入共享氢费 Store。\n\n## 表单分区\n\n### 1. 基础信息\n\n| 字段 | 规则 |\n|------|------|\n| 加氢时间 * | 默认=点击「新增」时的当前时间;点击底部弹层选日期+时+分 |\n| 加氢站名称 | 只读,登录本站名称 |\n\n### 2. 车牌识别\n\n| 字段 | 规则 |\n|------|------|\n| 拍摄区 | 提示「请拍摄车牌」;相册/相机;选图后自动叠加**时间、地点**水印;OCR 模拟回填车牌 |\n| 车牌号 * | 占位「请拍摄或输入车牌号」;点击弹出车牌键盘 |\n| 车辆标签 | 有车牌后:系统车辆列表命中→「羚牛车辆」,否则→「非羚牛车辆」 |\n| 里程(km) | 选填;支持**从车机获取**(原型 Mock);识别车牌后可自动回填 |\n\n### 3. 加氢机面板\n\n| 字段 | 规则 |\n|------|------|\n| 拍摄区 | 提示「请拍摄清晰的加氢机照片」;选图后叠加**时间、地点**水印;OCR 模拟回填单价、量、总额 |\n| OCR 参考 | 展示站点信息维护的加氢机品牌/型号线索(见站点信息「加氢机品牌管理」) |\n| 氢气单价 * | 可改;变更后重算总额 |\n| 加氢量 * | 可改;变更后重算总额 |\n| 加氢总额(元) | 只读;= 单价 × 加氢量(两位小数);界面不展示公式文案 |\n\n## 提交与拦截\n\n- 必填齐全方可提交 \n- 同站 + 同车牌 + 同加氢时间 → 拦截重复 \n- 有填写内容点返回 → 二次确认防丢失 \n- 已核对或已对账记录不可从此入口编辑(列表进详情后按钮隐藏) \n\n## 验收\n\n1. 时间默认正确且可选到分 \n2. 车牌键盘可用;标签随车牌变化 \n3. 车牌/面板照片右下角可见时间与地点水印 \n4. 可从车机获取里程(有车牌时) \n5. 改单价或量后总额自动更新且不可手改 \n6. 空表单可直接返回;有内容返回需确认 \n"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "folder",
|
||||
"id": "h5-page-detail",
|
||||
"title": "详情页",
|
||||
"defaultExpanded": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "route",
|
||||
"id": "h5-route-detail",
|
||||
"title": "detail",
|
||||
"route": "detail",
|
||||
"payload": {
|
||||
"pageId": "detail"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-page-detail-md",
|
||||
"title": "详情页要点",
|
||||
"markdown": "# 功能:详情、编辑与删除\n\n## 目标\n\n查看单笔加氢记录完整字段;在「未核对且未对账」时可编辑或删除。\n\n## 详情展示\n\n- 顶部:车牌、加氢时间、核对标签、对账标签 \n- 指标条:加氢总额、加氢量 \n- **识别原图**:车牌照片、加氢机面板照片(均为拍摄时叠加时间/地点水印后的原图;种子数据无实拍时用演示水印图) \n- 明细行:站点、车牌、里程、单价、核对/对账状态与时间 \n\n## 锁定规则\n\n| 条件 | 结果 |\n|------|------|\n| 已对账 | 不可编辑/删除;提示已纳入站点对账单 |\n| 已核对(未对账) | 不可编辑/删除;提示能源部已核对 |\n| 未核对且未对账 | 可编辑、可删除 |\n\n判定函数:`isOrderLocked`(核对或对账任一成立即锁)。\n\n## 编辑\n\n进入与「新增」同一套表单,预填当前值(含已存水印照片);提交走更新逻辑(仍校验重复键)。\n\n## 删除\n\n二次确认后从 Bridge 移除该行。\n\n## 验收\n\n1. 未核对未对账:底部有删除/编辑 \n2. 已核对或已对账:无操作栏,有锁定说明 \n3. 详情含对账信息;列表卡片不含对账 \n4. 详情展示车牌与面板带水印原图(新上报提交后为实拍;种子行为演示图) \n"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
486
src/prototypes/oneos-h5-h2-order/components/CreateWizard.tsx
Normal file
486
src/prototypes/oneos-h5-h2-order/components/CreateWizard.tsx
Normal file
@@ -0,0 +1,486 @@
|
||||
import React, { useMemo, useRef, useState } from 'react';
|
||||
import type { CreateDraft } from '../types';
|
||||
import { getVehicleTag } from '../utils/fleet-plates';
|
||||
import { delay, mockPanelOcr, mockPlateOcr, readFileAsDataUrl } from '../utils/ocr-mock';
|
||||
import { applyPhotoWatermark, formatWatermarkTime } from '../utils/photo-watermark';
|
||||
import { fetchMileageFromVehicle } from '../utils/vehicle-mileage';
|
||||
import { DateTimePickerSheet } from './DateTimePickerSheet';
|
||||
import {
|
||||
IconCamera,
|
||||
IconCheck,
|
||||
IconChevronLeft,
|
||||
IconClock,
|
||||
IconFuel,
|
||||
IconSpinner,
|
||||
} from './Icons';
|
||||
import { PhoneShell } from './PhoneShell';
|
||||
import { PlateKeyboardSheet } from './PlateKeyboardSheet';
|
||||
|
||||
function listDispenserBrandHints(): string[] {
|
||||
const store = (window as unknown as { H2DispenserBrandStore?: { labels?: () => string[] } })
|
||||
.H2DispenserBrandStore;
|
||||
if (!store || typeof store.labels !== 'function') return [];
|
||||
try {
|
||||
return store.labels().slice(0, 4);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
type Props = {
|
||||
mode: 'create' | 'edit';
|
||||
draft: CreateDraft;
|
||||
initialDraft: CreateDraft;
|
||||
stationName: string;
|
||||
onChangeDraft: (patch: Partial<CreateDraft>) => void;
|
||||
onBack: () => void;
|
||||
onSubmit: () => void;
|
||||
toast?: string;
|
||||
};
|
||||
|
||||
function draftFingerprint(draft: CreateDraft): string {
|
||||
return [
|
||||
draft.hydrogenTime.trim(),
|
||||
draft.plateNo.trim(),
|
||||
draft.mileageKm.trim(),
|
||||
draft.unitPrice.trim(),
|
||||
draft.hydrogenKg.trim(),
|
||||
draft.totalAmount.trim(),
|
||||
draft.platePreviewUrl ? '1' : '0',
|
||||
draft.panelPreviewUrl ? '1' : '0',
|
||||
].join('|');
|
||||
}
|
||||
|
||||
export function isDraftDirty(
|
||||
draft: CreateDraft,
|
||||
initialDraft: CreateDraft,
|
||||
mode: 'create' | 'edit',
|
||||
): boolean {
|
||||
if (mode === 'edit') {
|
||||
return draftFingerprint(draft) !== draftFingerprint(initialDraft);
|
||||
}
|
||||
return Boolean(
|
||||
draft.plateNo.trim() ||
|
||||
draft.mileageKm.trim() ||
|
||||
draft.unitPrice.trim() ||
|
||||
draft.hydrogenKg.trim() ||
|
||||
draft.totalAmount.trim() ||
|
||||
draft.platePreviewUrl ||
|
||||
draft.panelPreviewUrl,
|
||||
);
|
||||
}
|
||||
|
||||
function calcTotalAmount(unitPrice: string, hydrogenKg: string): string {
|
||||
const price = Number(unitPrice);
|
||||
const kg = Number(hydrogenKg);
|
||||
if (!Number.isFinite(price) || !Number.isFinite(kg) || unitPrice === '' || hydrogenKg === '') {
|
||||
return '';
|
||||
}
|
||||
return String(Math.round(price * kg * 100) / 100);
|
||||
}
|
||||
|
||||
function RequiredMark() {
|
||||
return (
|
||||
<span className="h5-req" aria-hidden>
|
||||
*
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function CreateWizard({
|
||||
mode,
|
||||
draft,
|
||||
initialDraft,
|
||||
stationName,
|
||||
onChangeDraft,
|
||||
onBack,
|
||||
onSubmit,
|
||||
toast,
|
||||
}: Props) {
|
||||
const plateInputRef = useRef<HTMLInputElement>(null);
|
||||
const panelInputRef = useRef<HTMLInputElement>(null);
|
||||
const [recognizing, setRecognizing] = useState<'plate' | 'panel' | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [fetchingMileage, setFetchingMileage] = useState(false);
|
||||
const [mileageHint, setMileageHint] = useState('');
|
||||
const [timeOpen, setTimeOpen] = useState(false);
|
||||
const [plateOpen, setPlateOpen] = useState(false);
|
||||
|
||||
const vehicleTag = useMemo(() => getVehicleTag(draft.plateNo), [draft.plateNo]);
|
||||
const brandHints = listDispenserBrandHints();
|
||||
|
||||
function patchDraft(patch: Partial<CreateDraft>) {
|
||||
const nextPrice = patch.unitPrice !== undefined ? patch.unitPrice : draft.unitPrice;
|
||||
const nextKg = patch.hydrogenKg !== undefined ? patch.hydrogenKg : draft.hydrogenKg;
|
||||
if (patch.unitPrice !== undefined || patch.hydrogenKg !== undefined) {
|
||||
patch = { ...patch, totalAmount: calcTotalAmount(nextPrice, nextKg) };
|
||||
}
|
||||
onChangeDraft(patch);
|
||||
}
|
||||
|
||||
async function watermarkPreview(rawUrl: string): Promise<string> {
|
||||
return applyPhotoWatermark(rawUrl, {
|
||||
timeText: formatWatermarkTime(),
|
||||
locationText: stationName || '加氢站',
|
||||
});
|
||||
}
|
||||
|
||||
async function pullMileageFromVehicle(plateNo: string, autoFill: boolean) {
|
||||
setFetchingMileage(true);
|
||||
try {
|
||||
const result = await fetchMileageFromVehicle(plateNo);
|
||||
setMileageHint(result.message);
|
||||
if (result.ok && (autoFill || !draft.mileageKm.trim())) {
|
||||
onChangeDraft({ mileageKm: result.mileageKm });
|
||||
}
|
||||
return result;
|
||||
} finally {
|
||||
setFetchingMileage(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePlateFile(file: File | null) {
|
||||
if (!file) return;
|
||||
setRecognizing('plate');
|
||||
try {
|
||||
const rawUrl = await readFileAsDataUrl(file);
|
||||
const url = await watermarkPreview(rawUrl);
|
||||
await delay(900);
|
||||
const ocr = mockPlateOcr();
|
||||
const mileage = await fetchMileageFromVehicle(ocr.plateNo);
|
||||
setMileageHint(mileage.message);
|
||||
onChangeDraft({
|
||||
platePreviewUrl: url,
|
||||
plateNo: ocr.plateNo,
|
||||
...(mileage.ok ? { mileageKm: mileage.mileageKm } : {}),
|
||||
});
|
||||
if (typeof navigator !== 'undefined' && navigator.vibrate) navigator.vibrate(10);
|
||||
} finally {
|
||||
setRecognizing(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePanelFile(file: File | null) {
|
||||
if (!file) return;
|
||||
setRecognizing('panel');
|
||||
try {
|
||||
const rawUrl = await readFileAsDataUrl(file);
|
||||
const url = await watermarkPreview(rawUrl);
|
||||
await delay(900);
|
||||
const ocr = mockPanelOcr();
|
||||
onChangeDraft({
|
||||
panelPreviewUrl: url,
|
||||
unitPrice: String(ocr.unitPrice),
|
||||
hydrogenKg: String(ocr.hydrogenKg),
|
||||
totalAmount: String(ocr.totalAmount),
|
||||
});
|
||||
if (typeof navigator !== 'undefined' && navigator.vibrate) navigator.vibrate(10);
|
||||
} finally {
|
||||
setRecognizing(null);
|
||||
}
|
||||
}
|
||||
|
||||
function requestBack() {
|
||||
if (isDraftDirty(draft, initialDraft, mode)) {
|
||||
const ok = window.confirm('当前内容尚未提交,返回将丢失已填写信息。确认返回?');
|
||||
if (!ok) return;
|
||||
}
|
||||
onBack();
|
||||
}
|
||||
|
||||
async function handleSubmitClick() {
|
||||
if (submitting) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
onSubmit();
|
||||
} finally {
|
||||
window.setTimeout(() => setSubmitting(false), 400);
|
||||
}
|
||||
}
|
||||
|
||||
const canSubmit =
|
||||
Boolean(draft.plateNo.trim()) &&
|
||||
Boolean(draft.unitPrice) &&
|
||||
Boolean(draft.hydrogenKg) &&
|
||||
Boolean(draft.totalAmount) &&
|
||||
Boolean(draft.hydrogenTime.trim()) &&
|
||||
!recognizing &&
|
||||
!submitting;
|
||||
|
||||
return (
|
||||
<PhoneShell
|
||||
title={mode === 'edit' ? '编辑加氢记录' : '新增加氢记录'}
|
||||
left={
|
||||
<button type="button" className="h5-nav-btn" onClick={requestBack} aria-label="返回">
|
||||
<IconChevronLeft size={20} />
|
||||
</button>
|
||||
}
|
||||
bodyClassName="h5-body--wizard"
|
||||
footer={
|
||||
<div className="h5-action-bar">
|
||||
<button type="button" className="h5-btn" onClick={requestBack} disabled={submitting}>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="h5-btn h5-btn--primary"
|
||||
disabled={!canSubmit}
|
||||
onClick={() => void handleSubmitClick()}
|
||||
>
|
||||
{submitting ? <IconSpinner size={18} /> : <IconCheck size={18} />}
|
||||
{submitting ? '提交中…' : '提交'}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<section className="h5-panel" data-annotation-id="h5-create-basic">
|
||||
<div className="h5-panel-head">
|
||||
<div className="h5-panel-badge" aria-hidden>
|
||||
<IconClock size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<h3>基础信息</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h5-field">
|
||||
<label htmlFor="h5-time">
|
||||
<RequiredMark />
|
||||
加氢时间
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
id="h5-time"
|
||||
className="h5-field-trigger tabular-nums"
|
||||
data-annotation-id="h5-time"
|
||||
onClick={() => setTimeOpen(true)}
|
||||
>
|
||||
{draft.hydrogenTime || '请选择加氢时间'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="h5-field">
|
||||
<label htmlFor="h5-station">加氢站名称</label>
|
||||
<input
|
||||
id="h5-station"
|
||||
data-annotation-id="h5-station"
|
||||
value={stationName}
|
||||
disabled
|
||||
title="取当前登录账号对应加氢站"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="h5-panel">
|
||||
<div className="h5-panel-head">
|
||||
<div className="h5-panel-badge" aria-hidden>
|
||||
<IconCamera size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<h3>车牌识别</h3>
|
||||
<p>请拍摄车牌</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`h5-shot h5-shot--compact${draft.platePreviewUrl ? ' h5-shot--filled' : ''}`}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => plateInputRef.current?.click()}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') plateInputRef.current?.click();
|
||||
}}
|
||||
>
|
||||
{draft.platePreviewUrl ? <img src={draft.platePreviewUrl} alt="车牌照片预览" /> : null}
|
||||
<div className="h5-shot-content">
|
||||
{recognizing === 'plate' ? <IconSpinner size={18} /> : <IconCamera size={18} />}
|
||||
<span>
|
||||
{recognizing === 'plate'
|
||||
? '识别中…'
|
||||
: draft.platePreviewUrl
|
||||
? '重新拍摄 / 选图'
|
||||
: '拍摄车牌'}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
ref={plateInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
onChange={(e) => {
|
||||
void handlePlateFile(e.target.files?.[0] || null);
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="h5-field" style={{ marginTop: 12 }}>
|
||||
<label htmlFor="h5-plate">
|
||||
<RequiredMark />
|
||||
车牌号
|
||||
</label>
|
||||
<div className="h5-plate-row">
|
||||
<button
|
||||
type="button"
|
||||
id="h5-plate"
|
||||
className="h5-field-trigger"
|
||||
data-annotation-id="h5-plate"
|
||||
onClick={() => setPlateOpen(true)}
|
||||
>
|
||||
{draft.plateNo || (
|
||||
<span className="h5-field-trigger__ph">请拍摄或输入车牌号</span>
|
||||
)}
|
||||
</button>
|
||||
{vehicleTag === 'lingniu' ? (
|
||||
<span className="h5-vehicle-tag h5-vehicle-tag--in">羚牛车辆</span>
|
||||
) : null}
|
||||
{vehicleTag === 'external' ? (
|
||||
<span className="h5-vehicle-tag h5-vehicle-tag--out">非羚牛车辆</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="h5-field" data-annotation-id="h5-mileage">
|
||||
<label htmlFor="h5-mileage">里程(km)</label>
|
||||
<div className="h5-mileage-row">
|
||||
<input
|
||||
id="h5-mileage"
|
||||
inputMode="numeric"
|
||||
value={draft.mileageKm}
|
||||
onChange={(e) => {
|
||||
setMileageHint('');
|
||||
onChangeDraft({ mileageKm: e.target.value });
|
||||
}}
|
||||
placeholder="可从车机获取或手工填写"
|
||||
autoComplete="off"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="h5-btn h5-btn--ghost h5-mileage-fetch"
|
||||
disabled={fetchingMileage || recognizing === 'plate'}
|
||||
onClick={() => void pullMileageFromVehicle(draft.plateNo, true)}
|
||||
aria-label="从车机获取里程"
|
||||
>
|
||||
{fetchingMileage ? <IconSpinner size={16} /> : null}
|
||||
{fetchingMileage ? '获取中…' : '从车机获取'}
|
||||
</button>
|
||||
</div>
|
||||
{mileageHint ? (
|
||||
<p className="h5-field-hint" role="status">
|
||||
{mileageHint}
|
||||
</p>
|
||||
) : (
|
||||
<p className="h5-field-hint">识别车牌后可自动取数;也可点「从车机获取」(原型 Mock)。</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="h5-panel">
|
||||
<div className="h5-panel-head">
|
||||
<div className="h5-panel-badge" aria-hidden>
|
||||
<IconFuel size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<h3>加氢机面板识别</h3>
|
||||
<p>请拍摄清晰的加氢机照片</p>
|
||||
</div>
|
||||
</div>
|
||||
{brandHints.length ? (
|
||||
<p className="h5-brand-hint" data-annotation-id="h5-dispenser-brands">
|
||||
OCR 参考品牌型号(站点信息维护):{brandHints.join('、')}
|
||||
{brandHints.length >= 4 ? '…' : ''}
|
||||
</p>
|
||||
) : null}
|
||||
<div
|
||||
className={`h5-shot h5-shot--compact${draft.panelPreviewUrl ? ' h5-shot--filled' : ''}`}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => panelInputRef.current?.click()}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') panelInputRef.current?.click();
|
||||
}}
|
||||
>
|
||||
{draft.panelPreviewUrl ? <img src={draft.panelPreviewUrl} alt="加氢机面板预览" /> : null}
|
||||
<div className="h5-shot-content">
|
||||
{recognizing === 'panel' ? <IconSpinner size={18} /> : <IconCamera size={18} />}
|
||||
<span>
|
||||
{recognizing === 'panel'
|
||||
? '识别中…'
|
||||
: draft.panelPreviewUrl
|
||||
? '重新拍摄 / 选图'
|
||||
: '拍摄面板'}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
ref={panelInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
onChange={(e) => {
|
||||
void handlePanelFile(e.target.files?.[0] || null);
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="h5-field" style={{ marginTop: 12 }}>
|
||||
<label htmlFor="h5-price">
|
||||
<RequiredMark />
|
||||
氢气单价(元/kg)
|
||||
</label>
|
||||
<input
|
||||
id="h5-price"
|
||||
data-annotation-id="h5-price"
|
||||
inputMode="decimal"
|
||||
value={draft.unitPrice}
|
||||
onChange={(e) => patchDraft({ unitPrice: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="h5-field">
|
||||
<label htmlFor="h5-kg">
|
||||
<RequiredMark />
|
||||
加氢量(kg)
|
||||
</label>
|
||||
<input
|
||||
id="h5-kg"
|
||||
data-annotation-id="h5-kg"
|
||||
inputMode="decimal"
|
||||
value={draft.hydrogenKg}
|
||||
onChange={(e) => patchDraft({ hydrogenKg: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="h5-field">
|
||||
<label htmlFor="h5-total" data-annotation-id="h5-total-label">
|
||||
加氢总额(元)
|
||||
</label>
|
||||
<input
|
||||
id="h5-total"
|
||||
inputMode="decimal"
|
||||
value={draft.totalAmount}
|
||||
readOnly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{toast ? (
|
||||
<div className="h5-toast" role="status" aria-live="polite">
|
||||
{toast}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<DateTimePickerSheet
|
||||
open={timeOpen}
|
||||
value={draft.hydrogenTime}
|
||||
onClose={() => setTimeOpen(false)}
|
||||
onConfirm={(next) => {
|
||||
onChangeDraft({ hydrogenTime: next });
|
||||
setTimeOpen(false);
|
||||
}}
|
||||
/>
|
||||
<PlateKeyboardSheet
|
||||
open={plateOpen}
|
||||
value={draft.plateNo}
|
||||
onClose={() => setPlateOpen(false)}
|
||||
onConfirm={(next) => {
|
||||
onChangeDraft({ plateNo: next });
|
||||
setPlateOpen(false);
|
||||
}}
|
||||
/>
|
||||
</PhoneShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { pad2 } from '../utils/format';
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
value: string;
|
||||
onClose: () => void;
|
||||
onConfirm: (next: string) => void;
|
||||
};
|
||||
|
||||
function parseValue(value: string): { date: string; hour: number; minute: number } {
|
||||
const raw = String(value || '').trim().replace('T', ' ');
|
||||
const date = raw.slice(0, 10);
|
||||
const hour = Number(raw.slice(11, 13));
|
||||
const minute = Number(raw.slice(14, 16));
|
||||
const now = new Date();
|
||||
return {
|
||||
date: /^\d{4}-\d{2}-\d{2}$/.test(date)
|
||||
? date
|
||||
: `${now.getFullYear()}-${pad2(now.getMonth() + 1)}-${pad2(now.getDate())}`,
|
||||
hour: Number.isFinite(hour) ? hour : now.getHours(),
|
||||
minute: Number.isFinite(minute) ? minute : now.getMinutes(),
|
||||
};
|
||||
}
|
||||
|
||||
export function DateTimePickerSheet({ open, value, onClose, onConfirm }: Props) {
|
||||
const initial = useMemo(() => parseValue(value), [value, open]);
|
||||
const [date, setDate] = useState(initial.date);
|
||||
const [hour, setHour] = useState(initial.hour);
|
||||
const [minute, setMinute] = useState(initial.minute);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const next = parseValue(value);
|
||||
setDate(next.date);
|
||||
setHour(next.hour);
|
||||
setMinute(next.minute);
|
||||
}, [open, value]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const preview = `${date} ${pad2(hour)}:${pad2(minute)}`;
|
||||
|
||||
return (
|
||||
<div className="h5-sheet-root" role="dialog" aria-modal="true" aria-label="选择加氢时间">
|
||||
<button type="button" className="h5-sheet-mask" aria-label="关闭" onClick={onClose} />
|
||||
<div className="h5-sheet">
|
||||
<div className="h5-sheet-bar">
|
||||
<button type="button" className="h5-sheet-bar-btn" onClick={onClose}>
|
||||
取消
|
||||
</button>
|
||||
<strong>加氢时间</strong>
|
||||
<button
|
||||
type="button"
|
||||
className="h5-sheet-bar-btn h5-sheet-bar-btn--ok"
|
||||
onClick={() => onConfirm(preview)}
|
||||
>
|
||||
确定
|
||||
</button>
|
||||
</div>
|
||||
<div className="h5-sheet-preview tabular-nums">{preview}</div>
|
||||
<div className="h5-dt-grid">
|
||||
<label className="h5-dt-field">
|
||||
<span>日期</span>
|
||||
<input
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={(e) => setDate(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label className="h5-dt-field">
|
||||
<span>时</span>
|
||||
<select
|
||||
value={hour}
|
||||
onChange={(e) => setHour(Number(e.target.value))}
|
||||
aria-label="小时"
|
||||
>
|
||||
{Array.from({ length: 24 }, (_, i) => (
|
||||
<option key={i} value={i}>
|
||||
{pad2(i)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="h5-dt-field">
|
||||
<span>分</span>
|
||||
<select
|
||||
value={minute}
|
||||
onChange={(e) => setMinute(Number(e.target.value))}
|
||||
aria-label="分钟"
|
||||
>
|
||||
{Array.from({ length: 60 }, (_, i) => (
|
||||
<option key={i} value={i}>
|
||||
{pad2(i)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
145
src/prototypes/oneos-h5-h2-order/components/Icons.tsx
Normal file
145
src/prototypes/oneos-h5-h2-order/components/Icons.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import React from 'react';
|
||||
|
||||
type IconProps = {
|
||||
size?: number;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function Svg({
|
||||
size = 20,
|
||||
className,
|
||||
children,
|
||||
}: IconProps & { children: React.ReactNode }) {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden
|
||||
>
|
||||
{children}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconChevronLeft(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconPlus(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M12 5v14M5 12h14" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconCamera(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
|
||||
<circle cx="12" cy="13" r="4" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconFuel(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M3 22h12M5 22V10l7-4v16M19 22V8l-4-2v16" />
|
||||
<circle cx="8.5" cy="17.5" r="1.5" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconList(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconDroplet(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconWallet(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M20 7H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z" />
|
||||
<path d="M16 14h.01" />
|
||||
<path d="M22 10V7a2 2 0 0 0-2-2H8" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconMapPin(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconCheck(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconClock(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 6v6l4 2" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconInbox(props: IconProps) {
|
||||
return (
|
||||
<Svg size={props.size || 40} className={props.className}>
|
||||
<path d="M22 12h-6l-2 3h-4l-2-3H2" />
|
||||
<path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconSpinner({ size = 16, className }: IconProps) {
|
||||
return (
|
||||
<svg
|
||||
className={`h5-spinner ${className || ''}`.trim()}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
aria-hidden
|
||||
>
|
||||
<circle cx="12" cy="12" r="9" stroke="currentColor" strokeOpacity="0.25" strokeWidth="3" />
|
||||
<path
|
||||
d="M21 12a9 9 0 0 0-9-9"
|
||||
stroke="currentColor"
|
||||
strokeWidth="3"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,347 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import type { StationOption } from '../types';
|
||||
import { readFileAsDataUrl } from '../utils/ocr-mock';
|
||||
import {
|
||||
buildManualMonthCells,
|
||||
countMissingInMonth,
|
||||
getFirstHydrogenDateKey,
|
||||
getManualLedger,
|
||||
isArchivedManualImage,
|
||||
listManualLedgersByStation,
|
||||
todayDateKey,
|
||||
upsertManualLedger,
|
||||
type ManualLedgerImage,
|
||||
} from '../utils/manual-ledger';
|
||||
import { IconCamera, IconCheck } from './Icons';
|
||||
|
||||
type Props = {
|
||||
station: StationOption;
|
||||
tick: number;
|
||||
onUploaded: () => void;
|
||||
showToast: (msg: string) => void;
|
||||
};
|
||||
|
||||
const WEEK_LABELS = ['日', '一', '二', '三', '四', '五', '六'];
|
||||
|
||||
export function ManualLedgerPanel({ station, tick, onUploaded, showToast }: Props) {
|
||||
const today = todayDateKey();
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
const [draftImages, setDraftImages] = useState<ManualLedgerImage[]>([]);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [selectedDate, setSelectedDate] = useState(today);
|
||||
const [cursorYm, setCursorYm] = useState(() => {
|
||||
const [y, m] = today.split('-').map(Number);
|
||||
return { y, m };
|
||||
});
|
||||
|
||||
const stationKey = station.stationId || station.stationName;
|
||||
|
||||
const allEntries = useMemo(
|
||||
() => listManualLedgersByStation(stationKey),
|
||||
[stationKey, tick],
|
||||
);
|
||||
|
||||
const uploadedSet = useMemo(() => {
|
||||
const set = new Set<string>();
|
||||
allEntries.forEach((item) => {
|
||||
if (item.images?.length) set.add(item.ledgerDate);
|
||||
});
|
||||
return set;
|
||||
}, [allEntries]);
|
||||
|
||||
const firstHydrogenDate = useMemo(
|
||||
() => getFirstHydrogenDateKey(stationKey) || getFirstHydrogenDateKey(station.stationName),
|
||||
[stationKey, station.stationName, tick],
|
||||
);
|
||||
|
||||
const selectedEntry = useMemo(
|
||||
() => getManualLedger(stationKey, selectedDate),
|
||||
[stationKey, selectedDate, tick],
|
||||
);
|
||||
|
||||
const cells = useMemo(
|
||||
() => buildManualMonthCells(cursorYm.y, cursorYm.m, uploadedSet, today, firstHydrogenDate),
|
||||
[cursorYm.y, cursorYm.m, uploadedSet, today, firstHydrogenDate],
|
||||
);
|
||||
|
||||
const missingInMonth = useMemo(
|
||||
() => countMissingInMonth(cursorYm.y, cursorYm.m, uploadedSet, today, firstHydrogenDate),
|
||||
[cursorYm.y, cursorYm.m, uploadedSet, today, firstHydrogenDate],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedEntry?.images?.length) {
|
||||
setDraftImages(
|
||||
selectedEntry.images.map((img) => ({
|
||||
...img,
|
||||
archived: true,
|
||||
})),
|
||||
);
|
||||
} else {
|
||||
setDraftImages([]);
|
||||
}
|
||||
}, [selectedEntry, selectedDate, tick]);
|
||||
|
||||
const selectedUploaded = Boolean(selectedEntry?.images?.length);
|
||||
const isTodaySelected = selectedDate === today;
|
||||
const canEditSelected = selectedDate <= today;
|
||||
const pendingNewCount = draftImages.filter((img) => !isArchivedManualImage(img)).length;
|
||||
const canSubmit = canEditSelected && (selectedUploaded ? pendingNewCount > 0 : draftImages.length > 0);
|
||||
|
||||
async function handleFiles(files: FileList | null) {
|
||||
if (!files?.length || !canEditSelected) return;
|
||||
const next: ManualLedgerImage[] = [...draftImages];
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
if (!file.type.startsWith('image/')) continue;
|
||||
next.push({
|
||||
id: `ml-img-${Date.now()}-${i}`,
|
||||
name: file.name || `台账照片${next.length + 1}.jpg`,
|
||||
dataUrl: await readFileAsDataUrl(file),
|
||||
archived: false,
|
||||
uploadedAt: new Date().toISOString().slice(0, 19).replace('T', ' '),
|
||||
});
|
||||
}
|
||||
setDraftImages(next);
|
||||
}
|
||||
|
||||
function removeImage(id: string) {
|
||||
setDraftImages((prev) =>
|
||||
prev.filter((img) => {
|
||||
if (img.id !== id) return true;
|
||||
return !isArchivedManualImage(img);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
if (!canEditSelected) {
|
||||
showToast('不能上传未来日期');
|
||||
return;
|
||||
}
|
||||
if (selectedUploaded && pendingNewCount === 0) {
|
||||
showToast('请先添加补传照片');
|
||||
return;
|
||||
}
|
||||
if (!draftImages.length) {
|
||||
showToast('请至少上传一张手工台账照片');
|
||||
return;
|
||||
}
|
||||
const ok = window.confirm('确认上传后该记录将归档无法修改,是否确认无误');
|
||||
if (!ok) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const saved = upsertManualLedger({
|
||||
stationId: station.stationId,
|
||||
stationName: station.stationName,
|
||||
ledgerDate: selectedDate,
|
||||
images: draftImages,
|
||||
});
|
||||
if (!saved) {
|
||||
showToast('上传失败,请重试');
|
||||
return;
|
||||
}
|
||||
showToast(
|
||||
selectedUploaded
|
||||
? `${selectedDate} 已补传`
|
||||
: isTodaySelected
|
||||
? '今日手工台账已上传'
|
||||
: `${selectedDate} 手工台账已上传`,
|
||||
);
|
||||
onUploaded();
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
function shiftMonth(delta: number) {
|
||||
setCursorYm((prev) => {
|
||||
let m = prev.m + delta;
|
||||
let y = prev.y;
|
||||
if (m < 1) {
|
||||
m = 12;
|
||||
y -= 1;
|
||||
} else if (m > 12) {
|
||||
m = 1;
|
||||
y += 1;
|
||||
}
|
||||
return { y, m };
|
||||
});
|
||||
}
|
||||
|
||||
function selectDay(dateKey: string, isFuture: boolean) {
|
||||
if (isFuture) return;
|
||||
setSelectedDate(dateKey);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h5-manual" data-annotation-id="h5-manual">
|
||||
<div
|
||||
className={`h5-manual-status${
|
||||
uploadedSet.has(today) ? ' h5-manual-status--ok' : ''
|
||||
}`}
|
||||
>
|
||||
{uploadedSet.has(today) ? <IconCheck size={16} /> : null}
|
||||
<div>
|
||||
<strong>{uploadedSet.has(today) ? '今日已上传' : '今日尚未上传'}</strong>
|
||||
<p>
|
||||
{today} · {station.stationName}
|
||||
{!uploadedSet.has(today) ? '。上传今日台账后才可新增加氢记录。' : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="h5-panel" data-annotation-id="h5-manual-calendar">
|
||||
<div className="h5-cal-head">
|
||||
<button type="button" className="h5-cal-nav" onClick={() => shiftMonth(-1)} aria-label="上一月">
|
||||
‹
|
||||
</button>
|
||||
<strong className="tabular-nums">
|
||||
{cursorYm.y}年{cursorYm.m}月
|
||||
</strong>
|
||||
<button type="button" className="h5-cal-nav" onClick={() => shiftMonth(1)} aria-label="下一月">
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
<p className="h5-cal-summary">
|
||||
{firstHydrogenDate
|
||||
? missingInMonth > 0
|
||||
? `本月尚有 ${missingInMonth} 天未上传(自 ${firstHydrogenDate} 起),点选日期可补传`
|
||||
: `本月自 ${firstHydrogenDate} 起截至今日均已上传`
|
||||
: '本站尚无加氢记录,历史日期无需补传'}
|
||||
</p>
|
||||
<div className="h5-cal-week">
|
||||
{WEEK_LABELS.map((w) => (
|
||||
<span key={w}>{w}</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="h5-cal-grid" role="grid" aria-label="手工台账日历">
|
||||
{cells.map((cell) => {
|
||||
const cls = [
|
||||
'h5-cal-day',
|
||||
cell.inMonth ? '' : 'is-out',
|
||||
cell.isFuture ? 'is-future' : '',
|
||||
cell.isToday ? 'is-today' : '',
|
||||
!cell.needsLedger && cell.inMonth && !cell.isFuture ? 'is-before-start' : '',
|
||||
cell.needsLedger && cell.uploaded ? 'is-uploaded' : '',
|
||||
cell.needsLedger && !cell.uploaded ? 'is-missing' : '',
|
||||
selectedDate === cell.dateKey ? 'is-selected' : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
const statusLabel = cell.isFuture
|
||||
? '未来'
|
||||
: !cell.needsLedger
|
||||
? '无需补传'
|
||||
: cell.uploaded
|
||||
? '已上传'
|
||||
: '未上传';
|
||||
return (
|
||||
<button
|
||||
key={cell.dateKey + (cell.inMonth ? '' : '-o')}
|
||||
type="button"
|
||||
className={cls}
|
||||
disabled={cell.isFuture}
|
||||
onClick={() => selectDay(cell.dateKey, cell.isFuture)}
|
||||
aria-label={`${cell.dateKey}${statusLabel}`}
|
||||
>
|
||||
<span className="tabular-nums">{cell.day}</span>
|
||||
{cell.inMonth && cell.needsLedger ? (
|
||||
<i className={`h5-cal-dot${cell.uploaded ? ' is-on' : ''}`} aria-hidden />
|
||||
) : null}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="h5-cal-legend">
|
||||
<span>
|
||||
<i className="h5-cal-dot is-on" /> 已上传
|
||||
</span>
|
||||
<span>
|
||||
<i className="h5-cal-dot" /> 未上传
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="h5-panel">
|
||||
<div className="h5-panel-head">
|
||||
<div className="h5-panel-badge" aria-hidden>
|
||||
<IconCamera size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<h3>
|
||||
上传 {selectedDate}
|
||||
{isTodaySelected ? '(今日)' : ''} 手工台账
|
||||
</h3>
|
||||
<p>
|
||||
{selectedUploaded
|
||||
? '该日台账已归档,仅可补传新图,不可删除'
|
||||
: '请拍摄清晰的纸质台账照片,可多张'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h5-manual-grid">
|
||||
{draftImages.map((img) => {
|
||||
const archived = isArchivedManualImage(img);
|
||||
return (
|
||||
<div
|
||||
key={img.id}
|
||||
className={`h5-manual-thumb${archived ? ' is-archived' : ''}`}
|
||||
>
|
||||
{img.dataUrl ? (
|
||||
<img src={img.dataUrl} alt={img.name} />
|
||||
) : (
|
||||
<div className="h5-manual-thumb__ph">已归档</div>
|
||||
)}
|
||||
{archived ? (
|
||||
<span className="h5-manual-thumb__badge">已归档</span>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="h5-manual-thumb__del"
|
||||
onClick={() => removeImage(img.id)}
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<button
|
||||
type="button"
|
||||
className="h5-manual-add"
|
||||
onClick={() => fileRef.current?.click()}
|
||||
disabled={!canEditSelected}
|
||||
aria-label="添加台账照片"
|
||||
>
|
||||
<IconCamera size={22} />
|
||||
<span>拍照/选图</span>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
ref={fileRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
multiple
|
||||
capture="environment"
|
||||
className="sr-only"
|
||||
onChange={(e) => {
|
||||
void handleFiles(e.target.files);
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="h5-btn h5-btn--primary"
|
||||
style={{ width: '100%', marginTop: 14 }}
|
||||
disabled={saving || !canSubmit}
|
||||
onClick={handleSave}
|
||||
>
|
||||
{selectedUploaded ? `确认补传 ${selectedDate}` : `确认上传 ${selectedDate}`}
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
55
src/prototypes/oneos-h5-h2-order/components/OrderCard.tsx
Normal file
55
src/prototypes/oneos-h5-h2-order/components/OrderCard.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import type { H5OrderRecord } from '../types';
|
||||
import { formatDateTimeMinute, formatKg, formatMoney, formatPlateDisplay } from '../utils/format';
|
||||
import { IconCheck, IconClock } from './Icons';
|
||||
|
||||
type Props = {
|
||||
order: H5OrderRecord;
|
||||
onClick: () => void;
|
||||
index?: number;
|
||||
};
|
||||
|
||||
export function OrderCard({ order, onClick, index = 0 }: Props) {
|
||||
const verified = order.verifyStatus === 'verified';
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={`h5-card${verified ? ' h5-card--done' : ' h5-card--pending'}`}
|
||||
data-annotation-id="h5-card"
|
||||
onClick={onClick}
|
||||
style={{ animationDelay: `${Math.min(index, 8) * 40}ms` }}
|
||||
aria-label={`${formatPlateDisplay(order.plateNo)},${verified ? '已核对' : '未核对'}`}
|
||||
>
|
||||
<div className="h5-card-top">
|
||||
<div className="h5-plate">{formatPlateDisplay(order.plateNo)}</div>
|
||||
<span className={`h5-tag ${verified ? 'h5-tag--done' : 'h5-tag--pending'}`}>
|
||||
{verified ? <IconCheck size={12} /> : <IconClock size={12} />}
|
||||
{verified ? '已核对' : '未核对'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h5-card-meta">
|
||||
<IconClock size={13} />
|
||||
<span className="tabular-nums">{formatDateTimeMinute(order.hydrogenTime)}</span>
|
||||
</div>
|
||||
<div className="h5-card-metrics" aria-label="加氢数据">
|
||||
<div>
|
||||
<span>加氢量</span>
|
||||
<strong>
|
||||
{formatKg(order.hydrogenKg)}
|
||||
<em> kg</em>
|
||||
</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>加氢总额</span>
|
||||
<strong className="h5-card-metrics__money">¥{formatMoney(order.totalAmount)}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h5-card-foot">
|
||||
<span>单价 {formatMoney(order.unitPrice)} 元/kg</span>
|
||||
{verified ? (
|
||||
<span className="h5-card-foot__verify">核对 {formatDateTimeMinute(order.verifiedAt)}</span>
|
||||
) : null}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
183
src/prototypes/oneos-h5-h2-order/components/OrderDetail.tsx
Normal file
183
src/prototypes/oneos-h5-h2-order/components/OrderDetail.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { H5OrderRecord } from '../types';
|
||||
import { buildDemoWatermarkedPhoto } from '../utils/demo-photo';
|
||||
import { formatDateTimeMinute, formatKg, formatMileage, formatMoney, formatPlateDisplay } from '../utils/format';
|
||||
import { IconCheck, IconChevronLeft, IconClock } from './Icons';
|
||||
import { PhoneShell } from './PhoneShell';
|
||||
import { isOrderLocked } from '../utils/orders';
|
||||
|
||||
type Props = {
|
||||
order: H5OrderRecord;
|
||||
onBack: () => void;
|
||||
onEdit?: () => void;
|
||||
onDelete?: () => void;
|
||||
};
|
||||
|
||||
export function OrderDetail({ order, onBack, onEdit, onDelete }: Props) {
|
||||
const reconciled = order.reconcileStatus === 'reconciled';
|
||||
const verified = order.verifyStatus === 'verified';
|
||||
const locked = isOrderLocked(order);
|
||||
const [plateSrc, setPlateSrc] = useState(order.platePhotoUrl || '');
|
||||
const [panelSrc, setPanelSrc] = useState(order.panelPhotoUrl || '');
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setPlateSrc(order.platePhotoUrl || '');
|
||||
setPanelSrc(order.panelPhotoUrl || '');
|
||||
|
||||
async function ensureDemoPhotos() {
|
||||
if (!order.platePhotoUrl) {
|
||||
const url = await buildDemoWatermarkedPhoto({
|
||||
kind: 'plate',
|
||||
plateNo: order.plateNo,
|
||||
stationName: order.stationName,
|
||||
hydrogenTime: order.hydrogenTime,
|
||||
});
|
||||
if (!cancelled && url) setPlateSrc(url);
|
||||
}
|
||||
if (!order.panelPhotoUrl) {
|
||||
const url = await buildDemoWatermarkedPhoto({
|
||||
kind: 'panel',
|
||||
plateNo: order.plateNo,
|
||||
stationName: order.stationName,
|
||||
hydrogenTime: order.hydrogenTime,
|
||||
});
|
||||
if (!cancelled && url) setPanelSrc(url);
|
||||
}
|
||||
}
|
||||
|
||||
if (!order.platePhotoUrl || !order.panelPhotoUrl) {
|
||||
void ensureDemoPhotos();
|
||||
}
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [
|
||||
order.id,
|
||||
order.platePhotoUrl,
|
||||
order.panelPhotoUrl,
|
||||
order.plateNo,
|
||||
order.stationName,
|
||||
order.hydrogenTime,
|
||||
]);
|
||||
|
||||
return (
|
||||
<PhoneShell
|
||||
title="加氢记录详情"
|
||||
left={
|
||||
<button type="button" className="h5-nav-btn" onClick={onBack} aria-label="返回">
|
||||
<IconChevronLeft size={20} />
|
||||
</button>
|
||||
}
|
||||
bodyClassName={locked ? undefined : 'h5-body--wizard'}
|
||||
footer={
|
||||
locked ? null : (
|
||||
<div className="h5-action-bar">
|
||||
<button type="button" className="h5-btn h5-btn--danger" onClick={onDelete}>
|
||||
删除
|
||||
</button>
|
||||
<button type="button" className="h5-btn h5-btn--primary" onClick={onEdit}>
|
||||
编辑
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
>
|
||||
<section className="h5-panel h5-panel--detail" data-annotation-id="h5-detail">
|
||||
<div className="h5-detail-hero">
|
||||
<div>
|
||||
<div className="h5-plate">{formatPlateDisplay(order.plateNo)}</div>
|
||||
<div className="h5-detail-hero__time tabular-nums">
|
||||
{formatDateTimeMinute(order.hydrogenTime)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="h5-tag-row">
|
||||
<span className={`h5-tag ${verified ? 'h5-tag--done' : 'h5-tag--pending'}`}>
|
||||
{verified ? <IconCheck size={12} /> : <IconClock size={12} />}
|
||||
{verified ? '已核对' : '未核对'}
|
||||
</span>
|
||||
<span className={`h5-tag ${reconciled ? 'h5-tag--done' : 'h5-tag--muted'}`}>
|
||||
{reconciled ? <IconCheck size={12} /> : <IconClock size={12} />}
|
||||
{reconciled ? '已对账' : '未对账'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h5-detail-metrics" aria-label="加氢金额与用量">
|
||||
<div>
|
||||
<span>加氢总额</span>
|
||||
<strong>¥{formatMoney(order.totalAmount)}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>加氢量</span>
|
||||
<strong>
|
||||
{formatKg(order.hydrogenKg)}
|
||||
<em> kg</em>
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h5-detail-photos" data-annotation-id="h5-detail-photos">
|
||||
<div className="h5-detail-photo">
|
||||
<div className="h5-detail-photo__label">车牌识别原图(含水印)</div>
|
||||
{plateSrc ? (
|
||||
<img src={plateSrc} alt="车牌识别原图(含水印)" />
|
||||
) : (
|
||||
<div className="h5-detail-photo__empty">暂无车牌照片</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="h5-detail-photo">
|
||||
<div className="h5-detail-photo__label">加氢机面板原图(含水印)</div>
|
||||
{panelSrc ? (
|
||||
<img src={panelSrc} alt="加氢机面板原图(含水印)" />
|
||||
) : (
|
||||
<div className="h5-detail-photo__empty">暂无面板照片</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="h5-detail-row h5-detail-row--station">
|
||||
<span>加氢站名称</span>
|
||||
<strong title={order.stationName}>{order.stationName}</strong>
|
||||
</div>
|
||||
<div className="h5-detail-row">
|
||||
<span>车牌号</span>
|
||||
<strong>{formatPlateDisplay(order.plateNo)}</strong>
|
||||
</div>
|
||||
<div className="h5-detail-row">
|
||||
<span>里程</span>
|
||||
<strong>{formatMileage(order.mileageKm)} km</strong>
|
||||
</div>
|
||||
<div className="h5-detail-row">
|
||||
<span>氢气单价</span>
|
||||
<strong>{formatMoney(order.unitPrice)} 元/kg</strong>
|
||||
</div>
|
||||
<div className="h5-detail-row">
|
||||
<span>核对状态</span>
|
||||
<strong>{verified ? '已核对' : '未核对'}</strong>
|
||||
</div>
|
||||
<div className="h5-detail-row">
|
||||
<span>核对时间</span>
|
||||
<strong>{verified ? formatDateTimeMinute(order.verifiedAt) : '—'}</strong>
|
||||
</div>
|
||||
<div className="h5-detail-row">
|
||||
<span>对账状态</span>
|
||||
<strong>{reconciled ? '已对账' : '未对账'}</strong>
|
||||
</div>
|
||||
<div className="h5-detail-row">
|
||||
<span>对账时间</span>
|
||||
<strong>{reconciled ? formatDateTimeMinute(order.reconcileTime) : '—'}</strong>
|
||||
</div>
|
||||
</section>
|
||||
{reconciled ? (
|
||||
<p className="h5-lock-note">
|
||||
<IconCheck size={16} />
|
||||
该记录已纳入站点对账单,不可修改
|
||||
</p>
|
||||
) : verified ? (
|
||||
<p className="h5-lock-note">
|
||||
<IconCheck size={16} />
|
||||
能源部已完成核对,不可修改
|
||||
</p>
|
||||
) : null}
|
||||
</PhoneShell>
|
||||
);
|
||||
}
|
||||
31
src/prototypes/oneos-h5-h2-order/components/PhoneShell.tsx
Normal file
31
src/prototypes/oneos-h5-h2-order/components/PhoneShell.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import React from 'react';
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
left?: React.ReactNode;
|
||||
right?: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
bodyClassName?: string;
|
||||
footer?: React.ReactNode;
|
||||
};
|
||||
|
||||
export function PhoneShell({ title, left, right, children, bodyClassName, footer }: Props) {
|
||||
const now = new Date();
|
||||
const timeLabel = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
|
||||
|
||||
return (
|
||||
<div className="h5-phone">
|
||||
<div className="h5-status-bar" aria-hidden>
|
||||
<span>{timeLabel}</span>
|
||||
<span>5G · 86%</span>
|
||||
</div>
|
||||
<header className="h5-nav">
|
||||
<div className="h5-nav-side">{left || null}</div>
|
||||
<h1 className="h5-nav-title">{title}</h1>
|
||||
<div className="h5-nav-side h5-nav-side--end">{right || null}</div>
|
||||
</header>
|
||||
<main className={`h5-body${bodyClassName ? ` ${bodyClassName}` : ''}`}>{children}</main>
|
||||
{footer}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
value: string;
|
||||
onClose: () => void;
|
||||
onConfirm: (next: string) => void;
|
||||
};
|
||||
|
||||
const PROVINCES = [
|
||||
'京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑', '湘',
|
||||
'皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘', '晋',
|
||||
'蒙', '陕', '吉', '闽', '贵', '粤', '青', '藏', '川', '宁', '琼',
|
||||
];
|
||||
|
||||
const LETTERS = 'ABCDEFGHJKLMNPQRSTUVWXYZ'.split('');
|
||||
const DIGITS = '0123456789'.split('');
|
||||
const SPECIAL = ['学', '挂', '警', '港', '澳'];
|
||||
|
||||
const MAX_LEN = 8;
|
||||
|
||||
export function PlateKeyboardSheet({ open, value, onClose, onConfirm }: Props) {
|
||||
const [draft, setDraft] = useState(value);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) setDraft(String(value || '').toUpperCase().replace(/F$/u, ''));
|
||||
}, [open, value]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const needProvince = draft.length === 0;
|
||||
|
||||
function append(ch: string) {
|
||||
setDraft((prev) => {
|
||||
if (prev.length >= MAX_LEN) return prev;
|
||||
return `${prev}${ch}`.slice(0, MAX_LEN);
|
||||
});
|
||||
}
|
||||
|
||||
function backspace() {
|
||||
setDraft((prev) => prev.slice(0, -1));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h5-sheet-root" role="dialog" aria-modal="true" aria-label="输入车牌号">
|
||||
<button type="button" className="h5-sheet-mask" aria-label="关闭" onClick={onClose} />
|
||||
<div className="h5-sheet h5-sheet--plate">
|
||||
<div className="h5-sheet-bar">
|
||||
<button type="button" className="h5-sheet-bar-btn" onClick={onClose}>
|
||||
取消
|
||||
</button>
|
||||
<strong>车牌号</strong>
|
||||
<button
|
||||
type="button"
|
||||
className="h5-sheet-bar-btn h5-sheet-bar-btn--ok"
|
||||
disabled={draft.length < 7}
|
||||
onClick={() => onConfirm(draft)}
|
||||
>
|
||||
完成
|
||||
</button>
|
||||
</div>
|
||||
<div className="h5-plate-draft" aria-live="polite">
|
||||
{draft || <span className="h5-plate-draft__ph">请输入车牌号</span>}
|
||||
</div>
|
||||
<div className="h5-plate-keys">
|
||||
{needProvince
|
||||
? PROVINCES.map((p) => (
|
||||
<button key={p} type="button" className="h5-plate-key" onClick={() => append(p)}>
|
||||
{p}
|
||||
</button>
|
||||
))
|
||||
: (
|
||||
<>
|
||||
{LETTERS.map((ch) => (
|
||||
<button key={ch} type="button" className="h5-plate-key" onClick={() => append(ch)}>
|
||||
{ch}
|
||||
</button>
|
||||
))}
|
||||
{DIGITS.map((ch) => (
|
||||
<button key={ch} type="button" className="h5-plate-key" onClick={() => append(ch)}>
|
||||
{ch}
|
||||
</button>
|
||||
))}
|
||||
{SPECIAL.map((ch) => (
|
||||
<button key={ch} type="button" className="h5-plate-key h5-plate-key--soft" onClick={() => append(ch)}>
|
||||
{ch}
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
<button type="button" className="h5-plate-key h5-plate-key--wide" onClick={backspace}>
|
||||
删除
|
||||
</button>
|
||||
{!needProvince ? (
|
||||
<button
|
||||
type="button"
|
||||
className="h5-plate-key h5-plate-key--wide"
|
||||
onClick={() => setDraft('')}
|
||||
>
|
||||
重选省份
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
401
src/prototypes/oneos-h5-h2-order/index.tsx
Normal file
401
src/prototypes/oneos-h5-h2-order/index.tsx
Normal file
@@ -0,0 +1,401 @@
|
||||
/**
|
||||
* @name 加氢订单
|
||||
* 加氢站手机浏览器 H5:本站加氢记录列表、OCR 新增、与站点对账单联动
|
||||
*/
|
||||
import '../../common/h2VehicleLedgerBridge.js';
|
||||
import '../../common/h2DispenserBrandStore.js';
|
||||
import './styles/index.css';
|
||||
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
type AnnotationSourceDocument,
|
||||
type AnnotationViewerOptions,
|
||||
} from '@axhub/annotation';
|
||||
import { PrototypeAnnotationHost } from '../../common/prototype-annotation-host';
|
||||
import { clearHostPrototypeRouteInfo } from '../../common/useHashPage';
|
||||
import annotationSourceDocument from './annotation-source.json';
|
||||
import { CreateWizard } from './components/CreateWizard';
|
||||
import {
|
||||
IconCamera,
|
||||
IconChevronLeft,
|
||||
IconDroplet,
|
||||
IconInbox,
|
||||
IconList,
|
||||
IconMapPin,
|
||||
IconPlus,
|
||||
IconWallet,
|
||||
} from './components/Icons';
|
||||
import { ManualLedgerPanel } from './components/ManualLedgerPanel';
|
||||
import { OrderCard } from './components/OrderCard';
|
||||
import { OrderDetail } from './components/OrderDetail';
|
||||
import { PhoneShell } from './components/PhoneShell';
|
||||
import type { AppView, CreateDraft, StationOption } from './types';
|
||||
import { formatDateTimeMinute, formatKg, formatMoney, nowDateTimeMinute } from './utils/format';
|
||||
import { hasManualLedgerForDate } from './utils/manual-ledger';
|
||||
import {
|
||||
findDuplicateStationOrder,
|
||||
getTotalAmountMismatch,
|
||||
isOrderLocked,
|
||||
listOrdersForStation,
|
||||
listStations,
|
||||
removeStationOrder,
|
||||
subscribeOrders,
|
||||
summarizeOrders,
|
||||
upsertStationOrder,
|
||||
} from './utils/orders';
|
||||
|
||||
function emptyDraft(partial?: Partial<CreateDraft>): CreateDraft {
|
||||
return {
|
||||
hydrogenTime: nowDateTimeMinute(),
|
||||
plateNo: '',
|
||||
mileageKm: '',
|
||||
unitPrice: '',
|
||||
hydrogenKg: '',
|
||||
totalAmount: '',
|
||||
platePreviewUrl: '',
|
||||
panelPreviewUrl: '',
|
||||
...partial,
|
||||
};
|
||||
}
|
||||
|
||||
export default function OneosH5H2Order() {
|
||||
useEffect(() => {
|
||||
clearHostPrototypeRouteInfo();
|
||||
}, []);
|
||||
|
||||
const stations = useMemo(() => listStations(), []);
|
||||
/** 已登录本站(原型固定演示站,不提供切换) */
|
||||
const station: StationOption = useMemo(
|
||||
() => stations[0] || { stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站' },
|
||||
[stations],
|
||||
);
|
||||
const [tick, setTick] = useState(0);
|
||||
const [view, setView] = useState<AppView>({ name: 'list' });
|
||||
const [mainTab, setMainTab] = useState<'orders' | 'manual'>('orders');
|
||||
const [toast, setToast] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
return subscribeOrders(() => setTick((n) => n + 1));
|
||||
}, []);
|
||||
|
||||
const orders = useMemo(
|
||||
() => listOrdersForStation(station.stationName),
|
||||
[station.stationName, tick],
|
||||
);
|
||||
const summary = useMemo(() => summarizeOrders(orders), [orders]);
|
||||
|
||||
function showToast(msg: string) {
|
||||
setToast(msg);
|
||||
window.setTimeout(() => setToast(''), 2400);
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
if (!hasManualLedgerForDate(station.stationId || station.stationName)) {
|
||||
showToast('请先上传今日手工台账');
|
||||
setMainTab('manual');
|
||||
setView({ name: 'list' });
|
||||
return;
|
||||
}
|
||||
const draft = emptyDraft();
|
||||
setView({
|
||||
name: 'create',
|
||||
mode: 'create',
|
||||
draft,
|
||||
initialDraft: { ...draft },
|
||||
});
|
||||
}
|
||||
|
||||
function openEdit(id: string) {
|
||||
const order = orders.find((item) => item.id === id);
|
||||
if (!order || isOrderLocked(order)) return;
|
||||
const draft = emptyDraft({
|
||||
id: order.id,
|
||||
hydrogenTime:
|
||||
formatDateTimeMinute(order.hydrogenTime) === '—'
|
||||
? nowDateTimeMinute()
|
||||
: order.hydrogenTime.slice(0, 16),
|
||||
plateNo: order.plateNo.replace(/F$/u, ''),
|
||||
mileageKm: order.mileageKm != null ? String(order.mileageKm) : '',
|
||||
unitPrice: String(order.unitPrice),
|
||||
hydrogenKg: String(order.hydrogenKg),
|
||||
totalAmount: String(order.totalAmount),
|
||||
platePreviewUrl: order.platePhotoUrl || '',
|
||||
panelPreviewUrl: order.panelPhotoUrl || '',
|
||||
});
|
||||
setView({
|
||||
name: 'create',
|
||||
mode: 'edit',
|
||||
draft,
|
||||
initialDraft: { ...draft },
|
||||
});
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
if (view.name !== 'create') return;
|
||||
const { draft, mode } = view;
|
||||
const unitPrice = Number(draft.unitPrice);
|
||||
const hydrogenKg = Number(draft.hydrogenKg);
|
||||
const totalAmount = Number(draft.totalAmount);
|
||||
if (!draft.plateNo.trim() || !Number.isFinite(unitPrice) || !Number.isFinite(hydrogenKg) || !Number.isFinite(totalAmount)) {
|
||||
showToast('请完善加氢信息');
|
||||
return;
|
||||
}
|
||||
let mileageKm: number | null = null;
|
||||
const mileageRaw = draft.mileageKm.trim();
|
||||
if (mileageRaw) {
|
||||
const n = Number(mileageRaw);
|
||||
if (!Number.isFinite(n) || n < 0) {
|
||||
showToast('里程须为不小于 0 的数字');
|
||||
return;
|
||||
}
|
||||
mileageKm = Math.round(n);
|
||||
}
|
||||
if (
|
||||
findDuplicateStationOrder({
|
||||
id: draft.id,
|
||||
stationName: station.stationName,
|
||||
plateNo: draft.plateNo.trim(),
|
||||
hydrogenTime: draft.hydrogenTime,
|
||||
})
|
||||
) {
|
||||
showToast('已存在相同加氢站、车牌号与加氢时间的记录');
|
||||
return;
|
||||
}
|
||||
const mismatch = getTotalAmountMismatch(unitPrice, hydrogenKg, totalAmount);
|
||||
if (mismatch) {
|
||||
const ok = window.confirm(
|
||||
`加氢总额与单价×量不一致:应为 ${mismatch.expected.toFixed(2)} 元,当前 ${mismatch.actual.toFixed(2)} 元。仍要保存吗?`,
|
||||
);
|
||||
if (!ok) return;
|
||||
}
|
||||
const saved = upsertStationOrder({
|
||||
id: draft.id,
|
||||
stationId: station.stationId,
|
||||
stationName: station.stationName,
|
||||
hydrogenTime: draft.hydrogenTime,
|
||||
plateNo: draft.plateNo.trim(),
|
||||
mileageKm,
|
||||
unitPrice,
|
||||
hydrogenKg,
|
||||
totalAmount,
|
||||
platePhotoUrl: draft.platePreviewUrl || '',
|
||||
panelPhotoUrl: draft.panelPreviewUrl || '',
|
||||
});
|
||||
if (!saved) {
|
||||
showToast('保存失败,请刷新后重试');
|
||||
return;
|
||||
}
|
||||
setTick((n) => n + 1);
|
||||
setView({ name: 'list' });
|
||||
showToast(mode === 'edit' ? '已更新加氢记录' : '已新增加氢记录');
|
||||
}
|
||||
|
||||
function handleDelete(id: string) {
|
||||
const order = orders.find((item) => item.id === id);
|
||||
if (!order || isOrderLocked(order)) return;
|
||||
if (!window.confirm(`确认删除车牌 ${order.plateNo.replace(/F$/u, '')} 的未对账记录?`)) return;
|
||||
removeStationOrder(id);
|
||||
setTick((n) => n + 1);
|
||||
setView({ name: 'list' });
|
||||
showToast('已删除');
|
||||
}
|
||||
|
||||
const annotationPageId =
|
||||
view.name === 'create' ? 'create' : view.name === 'detail' ? 'detail' : 'list';
|
||||
|
||||
const annotationOptions = useMemo<AnnotationViewerOptions>(
|
||||
() => ({
|
||||
showToolbar: true,
|
||||
showThemeToggle: true,
|
||||
showColorFilter: true,
|
||||
emptyWhenNoData: false,
|
||||
toolbarEdge: 'right',
|
||||
currentPageId: annotationPageId,
|
||||
}),
|
||||
[annotationPageId],
|
||||
);
|
||||
|
||||
let content: React.ReactNode = null;
|
||||
|
||||
if (view.name === 'create') {
|
||||
content = (
|
||||
<CreateWizard
|
||||
mode={view.mode}
|
||||
draft={view.draft}
|
||||
initialDraft={view.initialDraft}
|
||||
stationName={station.stationName}
|
||||
onChangeDraft={(patch) =>
|
||||
setView((prev) =>
|
||||
prev.name === 'create' ? { ...prev, draft: { ...prev.draft, ...patch } } : prev,
|
||||
)
|
||||
}
|
||||
onBack={() => setView({ name: 'list' })}
|
||||
onSubmit={handleSubmit}
|
||||
toast={toast}
|
||||
/>
|
||||
);
|
||||
} else if (view.name === 'detail') {
|
||||
const order = orders.find((item) => item.id === view.id);
|
||||
content = order ? (
|
||||
<OrderDetail
|
||||
order={order}
|
||||
onBack={() => setView({ name: 'list' })}
|
||||
onEdit={() => openEdit(order.id)}
|
||||
onDelete={() => handleDelete(order.id)}
|
||||
/>
|
||||
) : (
|
||||
<PhoneShell
|
||||
title="加氢记录详情"
|
||||
left={
|
||||
<button
|
||||
type="button"
|
||||
className="h5-nav-btn"
|
||||
onClick={() => setView({ name: 'list' })}
|
||||
aria-label="返回"
|
||||
>
|
||||
<IconChevronLeft size={20} />
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<div className="h5-empty">
|
||||
<div className="h5-empty-icon" aria-hidden>
|
||||
<IconInbox size={36} />
|
||||
</div>
|
||||
<strong>记录不存在</strong>
|
||||
请返回列表查看
|
||||
</div>
|
||||
</PhoneShell>
|
||||
);
|
||||
} else {
|
||||
const todayUploaded = hasManualLedgerForDate(station.stationId || station.stationName);
|
||||
content = (
|
||||
<PhoneShell
|
||||
title={mainTab === 'manual' ? '手工台账' : '加氢订单'}
|
||||
bodyClassName="h5-body--list"
|
||||
footer={
|
||||
<>
|
||||
{mainTab === 'orders' ? (
|
||||
<div className="h5-fab-dock" data-annotation-id="h5-fab-dock">
|
||||
{!todayUploaded ? (
|
||||
<p className="h5-fab-dock__hint">今日未上传手工台账,无法新增电子记录</p>
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
className="h5-fab"
|
||||
data-annotation-id="h5-fab"
|
||||
onClick={openCreate}
|
||||
aria-label="新增加氢记录"
|
||||
>
|
||||
<IconPlus size={22} />
|
||||
<span className="h5-fab-label">新增</span>
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
<nav className="h5-tabbar" aria-label="主导航">
|
||||
<button
|
||||
type="button"
|
||||
className={`h5-tabbar-item${mainTab === 'orders' ? ' is-active' : ''}`}
|
||||
onClick={() => setMainTab('orders')}
|
||||
>
|
||||
<IconList size={18} />
|
||||
加氢订单
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`h5-tabbar-item${mainTab === 'manual' ? ' is-active' : ''}`}
|
||||
onClick={() => setMainTab('manual')}
|
||||
>
|
||||
<IconCamera size={18} />
|
||||
手工台账
|
||||
{!todayUploaded ? <span className="h5-tabbar-dot" aria-label="今日未上传" /> : null}
|
||||
</button>
|
||||
</nav>
|
||||
{toast ? (
|
||||
<div className="h5-toast h5-toast--above-dock" role="status" aria-live="polite">
|
||||
{toast}
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
}
|
||||
>
|
||||
{mainTab === 'manual' ? (
|
||||
<ManualLedgerPanel
|
||||
station={station}
|
||||
tick={tick}
|
||||
showToast={showToast}
|
||||
onUploaded={() => setTick((n) => n + 1)}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="h5-hero" data-annotation-id="h5-hero" aria-label="当前站点">
|
||||
<div className="h5-hero-label">
|
||||
<IconMapPin size={13} />
|
||||
当前站点
|
||||
</div>
|
||||
<div className="h5-hero-station">{station.stationName}</div>
|
||||
</div>
|
||||
|
||||
<div className="h5-summary" data-annotation-id="h5-summary" aria-label="本站汇总">
|
||||
<div className="h5-summary-chip">
|
||||
<div className="h5-summary-chip-icon" aria-hidden>
|
||||
<IconList size={15} />
|
||||
</div>
|
||||
<strong>{summary.count}</strong>
|
||||
<span>订单数</span>
|
||||
</div>
|
||||
<div className="h5-summary-chip">
|
||||
<div className="h5-summary-chip-icon" aria-hidden>
|
||||
<IconDroplet size={15} />
|
||||
</div>
|
||||
<strong>{formatKg(summary.totalKg)}</strong>
|
||||
<span>加氢量 kg</span>
|
||||
</div>
|
||||
<div className="h5-summary-chip">
|
||||
<div className="h5-summary-chip-icon" aria-hidden>
|
||||
<IconWallet size={15} />
|
||||
</div>
|
||||
<strong>{formatMoney(summary.totalAmount)}</strong>
|
||||
<span>加氢金额</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{orders.length === 0 ? (
|
||||
<div className="h5-empty">
|
||||
<div className="h5-empty-icon" aria-hidden>
|
||||
<IconInbox size={36} />
|
||||
</div>
|
||||
<strong>本站暂无加氢记录</strong>
|
||||
点击下方「新增」开始上报第一笔订单
|
||||
</div>
|
||||
) : (
|
||||
<section className="h5-list-section" aria-label="加氢记录列表">
|
||||
<div className="h5-list-head">
|
||||
<h2 className="h5-list-head__title">加氢记录</h2>
|
||||
<span className="h5-list-head__count tabular-nums">共 {orders.length} 条</span>
|
||||
</div>
|
||||
{orders.map((order, index) => (
|
||||
<OrderCard
|
||||
key={order.id}
|
||||
order={order}
|
||||
index={index}
|
||||
onClick={() => setView({ name: 'detail', id: order.id })}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</PhoneShell>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h5-h2-order-page" data-ax="h5-h2-order-root">
|
||||
{content}
|
||||
<PrototypeAnnotationHost
|
||||
source={annotationSourceDocument as AnnotationSourceDocument}
|
||||
options={annotationOptions}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,416 @@
|
||||
/**
|
||||
* 从 .spec/*.md 生成 annotation-source.json
|
||||
* 用法:node src/prototypes/oneos-h5-h2-order/scripts/build-annotation-source.mjs
|
||||
*/
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const root = path.resolve(__dirname, '..');
|
||||
const specDir = path.join(root, '.spec');
|
||||
const outFile = path.join(root, 'annotation-source.json');
|
||||
const now = Date.now();
|
||||
|
||||
function readMd(name) {
|
||||
return fs.readFileSync(path.join(specDir, name), 'utf8');
|
||||
}
|
||||
|
||||
function node(partial) {
|
||||
return {
|
||||
images: [],
|
||||
controls: [],
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
hasMarkdown: true,
|
||||
annotationText: '',
|
||||
...partial,
|
||||
};
|
||||
}
|
||||
|
||||
const mdPrd = readMd('requirements-prd.md');
|
||||
const mdList = readMd('feature-list.md');
|
||||
const mdCreate = readMd('feature-create.md');
|
||||
const mdDetail = readMd('feature-detail.md');
|
||||
const mdManual = readMd('feature-manual-ledger.md');
|
||||
const mdFleet = readMd('fleet-plate-tag.md');
|
||||
const mdReconcile = readMd('reconcile-linkage.md');
|
||||
|
||||
const source = {
|
||||
documentVersion: 1,
|
||||
format: 'axhub-annotation-source',
|
||||
data: {
|
||||
version: 2,
|
||||
prototypeName: 'oneos-h5-h2-order',
|
||||
pageId: 'list',
|
||||
updatedAt: now,
|
||||
nodes: [
|
||||
node({
|
||||
id: 'h5-hero',
|
||||
index: 1,
|
||||
title: '当前站点',
|
||||
pageId: 'list',
|
||||
color: '#7AB929',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-hero']", '.h5-hero'],
|
||||
fingerprint: 'hero|list',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-summary',
|
||||
index: 2,
|
||||
title: '本站 KPI',
|
||||
pageId: 'list',
|
||||
color: '#0E8A7B',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-summary']", '.h5-summary'],
|
||||
fingerprint: 'summary|list',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-card',
|
||||
index: 3,
|
||||
title: '订单卡片',
|
||||
pageId: 'list',
|
||||
color: '#FF7D00',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-card']", '.h5-card'],
|
||||
fingerprint: 'card|list',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-fab',
|
||||
index: 4,
|
||||
title: '底栏新增',
|
||||
pageId: 'list',
|
||||
color: '#7AB929',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-fab']", '.h5-fab'],
|
||||
fingerprint: 'fab|list',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-time',
|
||||
index: 5,
|
||||
title: '加氢时间',
|
||||
pageId: 'create',
|
||||
color: '#7AB929',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-time']", '#h5-time'],
|
||||
fingerprint: 'field|h5-time',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-station',
|
||||
index: 6,
|
||||
title: '加氢站名称',
|
||||
pageId: 'create',
|
||||
color: '#86909C',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-station']", '#h5-station'],
|
||||
fingerprint: 'field|h5-station',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-plate',
|
||||
index: 7,
|
||||
title: '车牌号',
|
||||
pageId: 'create',
|
||||
color: '#FF7D00',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-plate']", '#h5-plate'],
|
||||
fingerprint: 'field|h5-plate',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-mileage',
|
||||
index: 8,
|
||||
title: '里程',
|
||||
pageId: 'create',
|
||||
color: '#0E8A7B',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-mileage']", '#h5-mileage'],
|
||||
fingerprint: 'field|h5-mileage',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-dispenser-brands',
|
||||
index: 9,
|
||||
title: '加氢机品牌参考',
|
||||
pageId: 'create',
|
||||
color: '#7C3AED',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-dispenser-brands']", '.h5-brand-hint'],
|
||||
fingerprint: 'hint|dispenser-brands',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-price',
|
||||
index: 10,
|
||||
title: '氢气单价',
|
||||
pageId: 'create',
|
||||
color: '#7AB929',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-price']", '#h5-price'],
|
||||
fingerprint: 'field|h5-price',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-kg',
|
||||
index: 11,
|
||||
title: '加氢量',
|
||||
pageId: 'create',
|
||||
color: '#7AB929',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-kg']", '#h5-kg'],
|
||||
fingerprint: 'field|h5-kg',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-total-label',
|
||||
index: 12,
|
||||
title: '加氢总额',
|
||||
pageId: 'create',
|
||||
color: '#0E8A7B',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-total-label']", '#h5-total'],
|
||||
fingerprint: 'field|h5-total',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-detail',
|
||||
index: 13,
|
||||
title: '记录详情',
|
||||
pageId: 'detail',
|
||||
color: '#FF7D00',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-detail']", '.h5-panel--detail'],
|
||||
fingerprint: 'detail|panel',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-detail-photos',
|
||||
index: 14,
|
||||
title: '识别原图',
|
||||
pageId: 'detail',
|
||||
color: '#0E8A7B',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-detail-photos']", '.h5-detail-photos'],
|
||||
fingerprint: 'detail|photos',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-manual',
|
||||
index: 15,
|
||||
title: '手工台账',
|
||||
pageId: 'manual',
|
||||
color: '#7AB929',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-manual']", '.h5-manual'],
|
||||
fingerprint: 'manual|panel',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-manual-calendar',
|
||||
index: 16,
|
||||
title: '台账日历',
|
||||
pageId: 'manual',
|
||||
color: '#0E8A7B',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-manual-calendar']", '.h5-cal-grid'],
|
||||
fingerprint: 'manual|calendar',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
],
|
||||
},
|
||||
markdownMap: {
|
||||
'h5-hero':
|
||||
'## 当前站点\n\n只读展示登录账号对应加氢站,列表页不提供切站。\n\n详见 [本站列表](feature-list)。',
|
||||
'h5-summary':
|
||||
'## 本站 KPI\n\n订单数 / 加氢量(kg) / 加氢金额,随本站列表实时汇总。\n\n详见功能说明「本站列表与 KPI」。',
|
||||
'h5-card': mdList,
|
||||
'h5-fab':
|
||||
'## 底栏新增\n\n固定在列表底部,不遮挡卡片滚动区。点击进入新增表单,加氢时间默认=点击时刻。\n\n详见功能说明「新增加氢记录」。',
|
||||
'h5-time':
|
||||
'## 加氢时间(必填)\n\n默认=点击「新增」时的当前时间;点击后底部弹层选择日期 + 时 + 分。',
|
||||
'h5-station':
|
||||
'## 加氢站名称\n\n只读。默认显示当前登录账号对应加氢站名称,不可切换。',
|
||||
'h5-plate': mdFleet,
|
||||
'h5-mileage':
|
||||
'## 里程(km)\n\n选填。支持「从车机获取」(原型 Mock);识别车牌后可自动回填。正式环境对接车机 / T-Box。\n\n详见 [新增加氢记录](feature-create)。',
|
||||
'h5-dispenser-brands':
|
||||
'## 加氢机品牌参考\n\n展示站点信息「加氢机品牌管理」维护的品牌·型号,供面板 OCR 模型判断参考。数据源:`h2DispenserBrandStore`。',
|
||||
'h5-price':
|
||||
'## 氢气单价(必填)\n\n可 OCR 识别后校正;变更后自动重算加氢总额(单价×加氢量)。',
|
||||
'h5-kg':
|
||||
'## 加氢量(必填)\n\n可 OCR 识别后校正;变更后自动重算加氢总额。',
|
||||
'h5-total-label':
|
||||
'## 加氢总额(元)\n\n只读展示;由单价×加氢量自动计算(两位小数)。界面标签不展示公式文案。',
|
||||
'h5-detail': mdDetail,
|
||||
'h5-detail-photos':
|
||||
'## 识别原图(含水印)\n\n详情展示车牌识别、加氢机面板的原始照片;照片在拍摄/选图时已叠加时间与地点水印并随记录保存。种子数据无实拍时用演示水印图。\n\n详见 [详情编辑删除](feature-detail)。',
|
||||
'h5-manual': mdManual,
|
||||
'h5-manual-calendar':
|
||||
'## 台账日历\n\n自本站首笔加氢记录日起:绿=已上传,橙=未上传;首笔之前无需补传。禁选未来日。点选范围内未传日可补传。仅「今日」是否上传影响新增加氢记录。\n\n详见 [手工台账上传](feature-manual-ledger)。',
|
||||
},
|
||||
assetMap: {},
|
||||
directory: {
|
||||
nodes: [
|
||||
{
|
||||
type: 'folder',
|
||||
id: 'h5-doc-root',
|
||||
title: '加氢订单(H5)说明',
|
||||
defaultExpanded: true,
|
||||
children: [
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-doc-prd',
|
||||
title: 'PRD 全文',
|
||||
markdown: mdPrd,
|
||||
markdownPath: '.spec/requirements-prd.md',
|
||||
},
|
||||
{
|
||||
type: 'folder',
|
||||
id: 'h5-doc-features',
|
||||
title: '功能说明',
|
||||
defaultExpanded: true,
|
||||
children: [
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-doc-list',
|
||||
title: '本站列表与 KPI',
|
||||
markdown: mdList,
|
||||
markdownPath: '.spec/feature-list.md',
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-doc-create',
|
||||
title: '新增加氢记录',
|
||||
markdown: mdCreate,
|
||||
markdownPath: '.spec/feature-create.md',
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-doc-manual',
|
||||
title: '手工台账上传',
|
||||
markdown: mdManual,
|
||||
markdownPath: '.spec/feature-manual-ledger.md',
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-doc-detail',
|
||||
title: '详情编辑删除',
|
||||
markdown: mdDetail,
|
||||
markdownPath: '.spec/feature-detail.md',
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-doc-fleet',
|
||||
title: '羚牛车辆标签',
|
||||
markdown: mdFleet,
|
||||
markdownPath: '.spec/fleet-plate-tag.md',
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-doc-reconcile',
|
||||
title: '核对与对账联动',
|
||||
markdown: mdReconcile,
|
||||
markdownPath: '.spec/reconcile-linkage.md',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'folder',
|
||||
id: 'h5-doc-pages',
|
||||
title: '按页面',
|
||||
defaultExpanded: true,
|
||||
children: [
|
||||
{
|
||||
type: 'folder',
|
||||
id: 'h5-page-list',
|
||||
title: '列表页',
|
||||
defaultExpanded: true,
|
||||
children: [
|
||||
{
|
||||
type: 'route',
|
||||
id: 'h5-route-list',
|
||||
title: 'list',
|
||||
route: 'list',
|
||||
payload: { pageId: 'list' },
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-page-list-md',
|
||||
title: '列表页要点',
|
||||
markdown: mdList,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'folder',
|
||||
id: 'h5-page-create',
|
||||
title: '新增页',
|
||||
defaultExpanded: true,
|
||||
children: [
|
||||
{
|
||||
type: 'route',
|
||||
id: 'h5-route-create',
|
||||
title: 'create',
|
||||
route: 'create',
|
||||
payload: { pageId: 'create' },
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-page-create-md',
|
||||
title: '新增页要点',
|
||||
markdown: mdCreate,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'folder',
|
||||
id: 'h5-page-detail',
|
||||
title: '详情页',
|
||||
defaultExpanded: true,
|
||||
children: [
|
||||
{
|
||||
type: 'route',
|
||||
id: 'h5-route-detail',
|
||||
title: 'detail',
|
||||
route: 'detail',
|
||||
payload: { pageId: 'detail' },
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-page-detail-md',
|
||||
title: '详情页要点',
|
||||
markdown: mdDetail,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
fs.writeFileSync(outFile, `${JSON.stringify(source, null, 2)}\n`, 'utf8');
|
||||
console.log(`Wrote ${path.relative(process.cwd(), outFile)} (${source.data.nodes.length} markers)`);
|
||||
1721
src/prototypes/oneos-h5-h2-order/styles/index.css
Normal file
1721
src/prototypes/oneos-h5-h2-order/styles/index.css
Normal file
File diff suppressed because it is too large
Load Diff
50
src/prototypes/oneos-h5-h2-order/types.ts
Normal file
50
src/prototypes/oneos-h5-h2-order/types.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
export type ReconcileStatus = 'pending' | 'reconciled';
|
||||
export type VerifyStatus = 'unverified' | 'verified';
|
||||
|
||||
export type StationOption = {
|
||||
stationId: string;
|
||||
stationName: string;
|
||||
};
|
||||
|
||||
export type H5OrderRecord = {
|
||||
id: string;
|
||||
stationId: string;
|
||||
stationName: string;
|
||||
hydrogenTime: string;
|
||||
plateNo: string;
|
||||
/** 里程 km;未填为 null */
|
||||
mileageKm: number | null;
|
||||
unitPrice: number;
|
||||
hydrogenKg: number;
|
||||
totalAmount: number;
|
||||
verifyStatus: VerifyStatus;
|
||||
verifiedAt: string;
|
||||
reconcileStatus: ReconcileStatus;
|
||||
reconcileTime: string;
|
||||
/** 车牌识别原图(含水印),无则为空 */
|
||||
platePhotoUrl: string;
|
||||
/** 加氢机面板原图(含水印),无则为空 */
|
||||
panelPhotoUrl: string;
|
||||
};
|
||||
|
||||
export type CreateDraft = {
|
||||
id?: string;
|
||||
hydrogenTime: string;
|
||||
plateNo: string;
|
||||
mileageKm: string;
|
||||
unitPrice: string;
|
||||
hydrogenKg: string;
|
||||
totalAmount: string;
|
||||
platePreviewUrl: string;
|
||||
panelPreviewUrl: string;
|
||||
};
|
||||
|
||||
export type AppView =
|
||||
| { name: 'list' }
|
||||
| {
|
||||
name: 'create';
|
||||
draft: CreateDraft;
|
||||
initialDraft: CreateDraft;
|
||||
mode: 'create' | 'edit';
|
||||
}
|
||||
| { name: 'detail'; id: string };
|
||||
48
src/prototypes/oneos-h5-h2-order/utils/demo-photo.ts
Normal file
48
src/prototypes/oneos-h5-h2-order/utils/demo-photo.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
/** 种子记录无实拍时,生成带水印的演示占位图(原型用) */
|
||||
|
||||
import { applyPhotoWatermark, formatWatermarkTime } from './photo-watermark';
|
||||
|
||||
function makeBaseCanvas(label: string, tone: 'plate' | 'panel'): string {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 720;
|
||||
canvas.height = 405;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return '';
|
||||
const gradient = ctx.createLinearGradient(0, 0, 720, 405);
|
||||
if (tone === 'plate') {
|
||||
gradient.addColorStop(0, '#1e293b');
|
||||
gradient.addColorStop(1, '#334155');
|
||||
} else {
|
||||
gradient.addColorStop(0, '#064e3b');
|
||||
gradient.addColorStop(1, '#0f766e');
|
||||
}
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillRect(0, 0, 720, 405);
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.92)';
|
||||
ctx.font = '700 36px ui-sans-serif, system-ui, "PingFang SC", sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(label, 360, 190);
|
||||
ctx.font = '500 18px ui-sans-serif, system-ui, "PingFang SC", sans-serif';
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.72)';
|
||||
ctx.fillText('演示原图(含水印)', 360, 232);
|
||||
return canvas.toDataURL('image/jpeg', 0.88);
|
||||
}
|
||||
|
||||
export async function buildDemoWatermarkedPhoto(options: {
|
||||
kind: 'plate' | 'panel';
|
||||
plateNo: string;
|
||||
stationName: string;
|
||||
hydrogenTime: string;
|
||||
}): Promise<string> {
|
||||
const label =
|
||||
options.kind === 'plate'
|
||||
? `车牌 ${String(options.plateNo || '').replace(/F$/u, '') || '—'}`
|
||||
: '加氢机面板';
|
||||
const base = makeBaseCanvas(label, options.kind);
|
||||
if (!base) return '';
|
||||
const timeText = String(options.hydrogenTime || formatWatermarkTime()).slice(0, 19);
|
||||
return applyPhotoWatermark(base, {
|
||||
timeText,
|
||||
locationText: options.stationName || '加氢站',
|
||||
});
|
||||
}
|
||||
47
src/prototypes/oneos-h5-h2-order/utils/fleet-plates.ts
Normal file
47
src/prototypes/oneos-h5-h2-order/utils/fleet-plates.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
/** 原型本地「系统车辆列表」车牌(不含尾缀 F),用于羚牛/非羚牛判定 */
|
||||
const FLEET_PLATES = new Set(
|
||||
[
|
||||
'浙A55666',
|
||||
'浙A77888',
|
||||
'浙A99001',
|
||||
'浙A12345',
|
||||
'浙A67890',
|
||||
'浙A88888',
|
||||
'浙A03561',
|
||||
'浙B23456',
|
||||
'浙B99999',
|
||||
'浙B58888',
|
||||
'沪A88888',
|
||||
'沪BDB9161',
|
||||
'沪ADB9161',
|
||||
'苏E33333',
|
||||
'浙A88H201',
|
||||
'浙F00688',
|
||||
'浙F07588',
|
||||
'浙F06618',
|
||||
'粤AGR8556',
|
||||
'粤AGP5156',
|
||||
].map((p) => p.toUpperCase()),
|
||||
);
|
||||
|
||||
export function normalizePlateKey(plateNo: string): string {
|
||||
return String(plateNo || '')
|
||||
.trim()
|
||||
.toUpperCase()
|
||||
.replace(/F$/u, '');
|
||||
}
|
||||
|
||||
/** 车牌是否在系统车辆列表中 → 羚牛车辆 */
|
||||
export function isLingniuVehicle(plateNo: string): boolean {
|
||||
const key = normalizePlateKey(plateNo);
|
||||
if (!key) return false;
|
||||
return FLEET_PLATES.has(key);
|
||||
}
|
||||
|
||||
export type VehicleTagKind = 'lingniu' | 'external' | null;
|
||||
|
||||
export function getVehicleTag(plateNo: string): VehicleTagKind {
|
||||
const key = normalizePlateKey(plateNo);
|
||||
if (!key) return null;
|
||||
return isLingniuVehicle(key) ? 'lingniu' : 'external';
|
||||
}
|
||||
40
src/prototypes/oneos-h5-h2-order/utils/format.ts
Normal file
40
src/prototypes/oneos-h5-h2-order/utils/format.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
export function pad2(n: number): string {
|
||||
return String(n).padStart(2, '0');
|
||||
}
|
||||
|
||||
/** 展示用:YYYY-MM-DD HH:mm */
|
||||
export function formatDateTimeMinute(value: string | null | undefined): string {
|
||||
const raw = String(value || '').trim();
|
||||
if (!raw) return '—';
|
||||
const normalized = raw.replace('T', ' ');
|
||||
if (normalized.length >= 16) return normalized.slice(0, 16);
|
||||
return normalized;
|
||||
}
|
||||
|
||||
export function nowDateTimeMinute(): string {
|
||||
const d = new Date();
|
||||
return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())} ${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
|
||||
}
|
||||
|
||||
export function formatPlateDisplay(plateNo: string): string {
|
||||
const p = String(plateNo || '').replace(/F$/u, '');
|
||||
return p || '—';
|
||||
}
|
||||
|
||||
export function formatMoney(n: number): string {
|
||||
if (!Number.isFinite(n)) return '—';
|
||||
return n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
}
|
||||
|
||||
export function formatKg(n: number): string {
|
||||
if (!Number.isFinite(n)) return '—';
|
||||
return n.toLocaleString('zh-CN', { minimumFractionDigits: 1, maximumFractionDigits: 2 });
|
||||
}
|
||||
|
||||
/** 里程展示;未填显示 — */
|
||||
export function formatMileage(n: number | null | undefined): string {
|
||||
if (n == null) return '—';
|
||||
const v = Number(n);
|
||||
if (!Number.isFinite(v)) return '—';
|
||||
return Math.round(v).toLocaleString('zh-CN');
|
||||
}
|
||||
202
src/prototypes/oneos-h5-h2-order/utils/manual-ledger.ts
Normal file
202
src/prototypes/oneos-h5-h2-order/utils/manual-ledger.ts
Normal file
@@ -0,0 +1,202 @@
|
||||
export type ManualLedgerImage = {
|
||||
id: string;
|
||||
name: string;
|
||||
dataUrl: string;
|
||||
/** 已确认入库:界面不可删除,仅可补传新图 */
|
||||
archived?: boolean;
|
||||
placeholder?: boolean;
|
||||
uploadedAt: string;
|
||||
};
|
||||
|
||||
export function isArchivedManualImage(img: ManualLedgerImage): boolean {
|
||||
return Boolean(img.archived || img.placeholder);
|
||||
}
|
||||
|
||||
export type ManualLedgerEntry = {
|
||||
id: string;
|
||||
stationId: string;
|
||||
stationName: string;
|
||||
ledgerDate: string;
|
||||
images: ManualLedgerImage[];
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
export type ManualCalendarCell = {
|
||||
dateKey: string;
|
||||
day: number;
|
||||
inMonth: boolean;
|
||||
isToday: boolean;
|
||||
isFuture: boolean;
|
||||
/** 是否纳入手工台账补传范围(≥本站首笔加氢日 且 ≤今日) */
|
||||
needsLedger: boolean;
|
||||
uploaded: boolean;
|
||||
};
|
||||
|
||||
function bridge() {
|
||||
return typeof window !== 'undefined' ? window.H2VehicleLedgerBridge : undefined;
|
||||
}
|
||||
|
||||
function pad2(n: number): string {
|
||||
return String(n).padStart(2, '0');
|
||||
}
|
||||
|
||||
function dateKeyFromHydrogenTime(hydrogenTime: unknown): string {
|
||||
const m = String(hydrogenTime || '').match(/^(\d{4}-\d{2}-\d{2})/);
|
||||
return m ? m[1] : '';
|
||||
}
|
||||
|
||||
/** 本站首笔加氢记录的自然日;无记录时返回 null(日历不要求历史补传) */
|
||||
export function getFirstHydrogenDateKey(stationIdOrName: string): string | null {
|
||||
const b = bridge();
|
||||
const rows = b?.getRows?.() || [];
|
||||
const key = String(stationIdOrName || '').trim();
|
||||
if (!key) return null;
|
||||
let earliest: string | null = null;
|
||||
rows.forEach((row) => {
|
||||
const sid = String(row.stationId || '').trim();
|
||||
const sn = String(row.stationName || '').trim();
|
||||
if (sid !== key && sn !== key) return;
|
||||
const dk = dateKeyFromHydrogenTime(row.hydrogenTime);
|
||||
if (!dk) return;
|
||||
if (!earliest || dk < earliest) earliest = dk;
|
||||
});
|
||||
return earliest;
|
||||
}
|
||||
|
||||
export function todayDateKey(): string {
|
||||
const b = bridge();
|
||||
if (b?.todayDateKey) return b.todayDateKey();
|
||||
const d = new Date();
|
||||
return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
|
||||
}
|
||||
|
||||
export function hasManualLedgerForDate(
|
||||
stationIdOrName: string,
|
||||
ledgerDate?: string,
|
||||
): boolean {
|
||||
const b = bridge();
|
||||
if (!b?.hasManualLedgerForDate) return false;
|
||||
return Boolean(b.hasManualLedgerForDate(stationIdOrName, ledgerDate || todayDateKey()));
|
||||
}
|
||||
|
||||
export function getManualLedger(
|
||||
stationIdOrName: string,
|
||||
ledgerDate?: string,
|
||||
): ManualLedgerEntry | null {
|
||||
const b = bridge();
|
||||
if (!b?.getManualLedger) return null;
|
||||
return b.getManualLedger(stationIdOrName, ledgerDate || todayDateKey()) || null;
|
||||
}
|
||||
|
||||
export function listManualLedgersByStation(stationIdOrName: string): ManualLedgerEntry[] {
|
||||
const b = bridge();
|
||||
if (!b?.listManualLedgersByStation) return [];
|
||||
return b.listManualLedgersByStation(stationIdOrName) || [];
|
||||
}
|
||||
|
||||
export function upsertManualLedger(input: {
|
||||
stationId: string;
|
||||
stationName: string;
|
||||
ledgerDate: string;
|
||||
images: Array<{ id?: string; name: string; dataUrl: string; placeholder?: boolean }>;
|
||||
}): ManualLedgerEntry | null {
|
||||
const b = bridge();
|
||||
if (!b?.upsertManualLedger) return null;
|
||||
return b.upsertManualLedger(input) || null;
|
||||
}
|
||||
|
||||
function cellNeedsLedger(
|
||||
dateKey: string,
|
||||
todayKey: string,
|
||||
firstHydrogenDateKey: string | null,
|
||||
): boolean {
|
||||
if (dateKey > todayKey) return false;
|
||||
if (!firstHydrogenDateKey) return false;
|
||||
return dateKey >= firstHydrogenDateKey;
|
||||
}
|
||||
|
||||
/** 构建某月日历格(含上月末 / 本月 / 下月头,共 6×7) */
|
||||
export function buildManualMonthCells(
|
||||
year: number,
|
||||
month1to12: number,
|
||||
uploadedDateSet: Set<string>,
|
||||
todayKey: string = todayDateKey(),
|
||||
firstHydrogenDateKey: string | null = null,
|
||||
): ManualCalendarCell[] {
|
||||
const first = new Date(year, month1to12 - 1, 1);
|
||||
const startWeekday = first.getDay();
|
||||
const daysInMonth = new Date(year, month1to12, 0).getDate();
|
||||
const prevDays = new Date(year, month1to12 - 1, 0).getDate();
|
||||
const cells: ManualCalendarCell[] = [];
|
||||
|
||||
for (let i = 0; i < 42; i++) {
|
||||
let y = year;
|
||||
let m = month1to12;
|
||||
let d: number;
|
||||
let inMonth = true;
|
||||
if (i < startWeekday) {
|
||||
d = prevDays - startWeekday + i + 1;
|
||||
m = month1to12 - 1;
|
||||
if (m < 1) {
|
||||
m = 12;
|
||||
y -= 1;
|
||||
}
|
||||
inMonth = false;
|
||||
} else if (i >= startWeekday + daysInMonth) {
|
||||
d = i - startWeekday - daysInMonth + 1;
|
||||
m = month1to12 + 1;
|
||||
if (m > 12) {
|
||||
m = 1;
|
||||
y += 1;
|
||||
}
|
||||
inMonth = false;
|
||||
} else {
|
||||
d = i - startWeekday + 1;
|
||||
}
|
||||
const dateKey = `${y}-${pad2(m)}-${pad2(d)}`;
|
||||
const needsLedger = cellNeedsLedger(dateKey, todayKey, firstHydrogenDateKey);
|
||||
cells.push({
|
||||
dateKey,
|
||||
day: d,
|
||||
inMonth,
|
||||
isToday: dateKey === todayKey,
|
||||
isFuture: dateKey > todayKey,
|
||||
needsLedger,
|
||||
uploaded: uploadedDateSet.has(dateKey),
|
||||
});
|
||||
}
|
||||
return cells;
|
||||
}
|
||||
|
||||
/** 本月内需补传且未上传的天数(从首笔加氢日起算,不含未来) */
|
||||
export function countMissingInMonth(
|
||||
year: number,
|
||||
month1to12: number,
|
||||
uploadedDateSet: Set<string>,
|
||||
todayKey: string = todayDateKey(),
|
||||
firstHydrogenDateKey: string | null = null,
|
||||
): number {
|
||||
const daysInMonth = new Date(year, month1to12, 0).getDate();
|
||||
let n = 0;
|
||||
for (let d = 1; d <= daysInMonth; d++) {
|
||||
const key = `${year}-${pad2(month1to12)}-${pad2(d)}`;
|
||||
if (key > todayKey) break;
|
||||
if (!cellNeedsLedger(key, todayKey, firstHydrogenDateKey)) continue;
|
||||
if (!uploadedDateSet.has(key)) n += 1;
|
||||
}
|
||||
return n;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
H2VehicleLedgerBridge?: {
|
||||
todayDateKey?: () => string;
|
||||
getRows?: () => Array<{ stationId?: string; stationName?: string; hydrogenTime?: string }>;
|
||||
hasManualLedgerForDate?: (stationIdOrName: string, ledgerDate?: string) => boolean;
|
||||
getManualLedger?: (stationIdOrName: string, ledgerDate?: string) => ManualLedgerEntry | null;
|
||||
listManualLedgersByStation?: (stationIdOrName: string) => ManualLedgerEntry[];
|
||||
upsertManualLedger?: (input: unknown) => ManualLedgerEntry | null;
|
||||
subscribe?: (fn: () => void) => () => void;
|
||||
};
|
||||
}
|
||||
}
|
||||
39
src/prototypes/oneos-h5-h2-order/utils/ocr-mock.ts
Normal file
39
src/prototypes/oneos-h5-h2-order/utils/ocr-mock.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
const PLATE_POOL = ['浙A88H201', '浙A12345', '浙B23456', '沪ADB9161', '苏E33333'];
|
||||
|
||||
function pick<T>(list: T[]): T {
|
||||
return list[Math.floor(Math.random() * list.length)];
|
||||
}
|
||||
|
||||
function round1(n: number): number {
|
||||
return Math.round(n * 10) / 10;
|
||||
}
|
||||
|
||||
function round2(n: number): number {
|
||||
return Math.round(n * 100) / 100;
|
||||
}
|
||||
|
||||
export function mockPlateOcr(): { plateNo: string } {
|
||||
return { plateNo: pick(PLATE_POOL) };
|
||||
}
|
||||
|
||||
export function mockPanelOcr(): { unitPrice: number; hydrogenKg: number; totalAmount: number } {
|
||||
const unitPrice = pick([42.5, 43, 44, 41, 45]);
|
||||
const hydrogenKg = round1(8 + Math.random() * 12);
|
||||
const totalAmount = round2(unitPrice * hydrogenKg);
|
||||
return { unitPrice, hydrogenKg, totalAmount };
|
||||
}
|
||||
|
||||
export function readFileAsDataUrl(file: File): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => resolve(String(reader.result || ''));
|
||||
reader.onerror = () => reject(reader.error);
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
export function delay(ms: number): Promise<void> {
|
||||
return new Promise((resolve) => {
|
||||
window.setTimeout(resolve, ms);
|
||||
});
|
||||
}
|
||||
224
src/prototypes/oneos-h5-h2-order/utils/orders.ts
Normal file
224
src/prototypes/oneos-h5-h2-order/utils/orders.ts
Normal file
@@ -0,0 +1,224 @@
|
||||
import type { H5OrderRecord, StationOption } from '../types';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
H2VehicleLedgerBridge?: {
|
||||
getRows: () => Array<Record<string, unknown>>;
|
||||
getStationList: () => Array<{ value: string; label: string }>;
|
||||
upsertRow: (row: Record<string, unknown>) => Record<string, unknown> | null;
|
||||
removeRow: (id: string) => boolean;
|
||||
subscribe: (fn: (rows: Array<Record<string, unknown>>) => void) => () => void;
|
||||
findDuplicateRow?: (
|
||||
candidate: { stationName?: string; plateNo?: string; hydrogenTime?: string },
|
||||
excludeId?: string,
|
||||
) => Record<string, unknown> | null;
|
||||
totalAmountMismatch?: (
|
||||
unitPrice: number,
|
||||
hydrogenKg: number,
|
||||
totalAmount: number,
|
||||
toleranceYuan?: number,
|
||||
) => { expected: number; actual: number; diff: number } | null;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const RECONCILED = 'reconciled';
|
||||
const VERIFIED = 'verified';
|
||||
|
||||
function asNumber(value: unknown, fallback = 0): number {
|
||||
const n = Number(value);
|
||||
return Number.isFinite(n) ? n : fallback;
|
||||
}
|
||||
|
||||
function asString(value: unknown): string {
|
||||
return value == null ? '' : String(value);
|
||||
}
|
||||
|
||||
/** 已对账必须有对账时间;缺省时按加氢日次日 10:00:00 推导(原型演示) */
|
||||
function deriveReconcileTime(hydrogenTime: string): string {
|
||||
const m = String(hydrogenTime || '').match(/^(\d{4})-(\d{2})-(\d{2})/);
|
||||
if (!m) return '2026-01-01 10:00:00';
|
||||
const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]) + 1, 10, 0, 0);
|
||||
const pad = (n: number) => (n < 10 ? `0${n}` : String(n));
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} 10:00:00`;
|
||||
}
|
||||
|
||||
export function mapRowToOrder(row: Record<string, unknown>): H5OrderRecord {
|
||||
/* 对账时间仅认 reconcileDate,勿用 reconciledAt(完成核对会写) */
|
||||
let reconcileTime = asString(row.reconcileDate);
|
||||
const reconcileStatus =
|
||||
asString(row.reconcileStatus) === RECONCILED || Boolean(reconcileTime)
|
||||
? 'reconciled'
|
||||
: 'pending';
|
||||
if (reconcileStatus === 'reconciled' && !reconcileTime) {
|
||||
reconcileTime = deriveReconcileTime(asString(row.hydrogenTime));
|
||||
}
|
||||
const verifyStatus =
|
||||
asString(row.verifyStatus) === VERIFIED || Boolean(row.verifiedAt) ? 'verified' : 'unverified';
|
||||
const verifiedAt = verifyStatus === 'verified' ? asString(row.verifiedAt) : '';
|
||||
const unitPrice = asNumber(row.costUnitPrice, asNumber(row.customerUnitPrice));
|
||||
const hydrogenKg = asNumber(row.hydrogenKg);
|
||||
const totalAmount = asNumber(row.costTotal, asNumber(row.costAmount, asNumber(row.customerAmount)));
|
||||
const mileageRaw = row.mileageKm;
|
||||
let mileageKm: number | null = null;
|
||||
if (mileageRaw != null && mileageRaw !== '') {
|
||||
const n = Number(mileageRaw);
|
||||
if (Number.isFinite(n) && n >= 0) mileageKm = Math.round(n);
|
||||
}
|
||||
return {
|
||||
id: asString(row.id || row.key),
|
||||
stationId: asString(row.stationId),
|
||||
stationName: asString(row.stationName),
|
||||
hydrogenTime: asString(row.hydrogenTime),
|
||||
plateNo: asString(row.plateNo),
|
||||
mileageKm,
|
||||
unitPrice,
|
||||
hydrogenKg,
|
||||
totalAmount,
|
||||
verifyStatus,
|
||||
verifiedAt,
|
||||
reconcileStatus,
|
||||
reconcileTime: reconcileStatus === 'reconciled' ? reconcileTime : '',
|
||||
platePhotoUrl: asString(row.platePhotoUrl),
|
||||
panelPhotoUrl: asString(row.panelPhotoUrl),
|
||||
};
|
||||
}
|
||||
|
||||
export function isOrderLocked(order: H5OrderRecord): boolean {
|
||||
return order.verifyStatus === 'verified' || order.reconcileStatus === 'reconciled';
|
||||
}
|
||||
|
||||
export function listStations(): StationOption[] {
|
||||
const bridge = typeof window !== 'undefined' ? window.H2VehicleLedgerBridge : undefined;
|
||||
if (!bridge) {
|
||||
return [
|
||||
{ stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站' },
|
||||
{ stationId: 'HZ-H2-002', stationName: '杭州临平加氢站' },
|
||||
{ stationId: 'SH-H2-003', stationName: '上海宝山加氢站' },
|
||||
{ stationId: 'SZ-H2-004', stationName: '苏州工业园区备用站' },
|
||||
];
|
||||
}
|
||||
return bridge.getStationList().map((item) => ({
|
||||
stationId: item.value,
|
||||
stationName: item.label,
|
||||
}));
|
||||
}
|
||||
|
||||
export function listOrdersForStation(stationName: string): H5OrderRecord[] {
|
||||
const bridge = typeof window !== 'undefined' ? window.H2VehicleLedgerBridge : undefined;
|
||||
const rows = bridge?.getRows() || [];
|
||||
return rows
|
||||
.map(mapRowToOrder)
|
||||
.filter((r) => r.stationName === stationName)
|
||||
.sort((a, b) => String(b.hydrogenTime).localeCompare(String(a.hydrogenTime)));
|
||||
}
|
||||
|
||||
export function subscribeOrders(onChange: () => void): () => void {
|
||||
const bridge = typeof window !== 'undefined' ? window.H2VehicleLedgerBridge : undefined;
|
||||
if (!bridge?.subscribe) return () => undefined;
|
||||
return bridge.subscribe(() => onChange());
|
||||
}
|
||||
|
||||
export function upsertStationOrder(input: {
|
||||
id?: string;
|
||||
stationId: string;
|
||||
stationName: string;
|
||||
hydrogenTime: string;
|
||||
plateNo: string;
|
||||
mileageKm?: number | null;
|
||||
unitPrice: number;
|
||||
hydrogenKg: number;
|
||||
totalAmount: number;
|
||||
platePhotoUrl?: string;
|
||||
panelPhotoUrl?: string;
|
||||
}): H5OrderRecord | null {
|
||||
const bridge = typeof window !== 'undefined' ? window.H2VehicleLedgerBridge : undefined;
|
||||
if (!bridge?.upsertRow) return null;
|
||||
const plate = input.plateNo.endsWith('F') ? input.plateNo : `${input.plateNo}F`;
|
||||
const hydrogenTime =
|
||||
input.hydrogenTime.length === 16 ? `${input.hydrogenTime}:00` : input.hydrogenTime;
|
||||
const mileageKm =
|
||||
input.mileageKm != null && Number.isFinite(input.mileageKm) && input.mileageKm >= 0
|
||||
? Math.round(input.mileageKm)
|
||||
: null;
|
||||
const saved = bridge.upsertRow({
|
||||
id: input.id,
|
||||
key: input.id,
|
||||
stationId: input.stationId,
|
||||
stationName: input.stationName,
|
||||
hydrogenTime,
|
||||
plateNo: plate,
|
||||
customerName: `${input.stationName}·站端上报`,
|
||||
hydrogenKg: input.hydrogenKg,
|
||||
costUnitPrice: input.unitPrice,
|
||||
costTotal: input.totalAmount,
|
||||
customerUnitPrice: input.unitPrice,
|
||||
customerAmount: input.totalAmount,
|
||||
settlementStatus: 'customer',
|
||||
mileageKm,
|
||||
platePhotoUrl: String(input.platePhotoUrl || ''),
|
||||
panelPhotoUrl: String(input.panelPhotoUrl || ''),
|
||||
creatorName: '站端账号',
|
||||
recordSource: 'station',
|
||||
changeLogOperator: '站端账号',
|
||||
reconcileStatus: 'pending',
|
||||
verifyStatus: 'unverified',
|
||||
});
|
||||
return saved ? mapRowToOrder(saved) : null;
|
||||
}
|
||||
|
||||
export function findDuplicateStationOrder(input: {
|
||||
id?: string;
|
||||
stationName: string;
|
||||
plateNo: string;
|
||||
hydrogenTime: string;
|
||||
}): boolean {
|
||||
const bridge = typeof window !== 'undefined' ? window.H2VehicleLedgerBridge : undefined;
|
||||
if (!bridge?.findDuplicateRow) return false;
|
||||
const plate = input.plateNo.endsWith('F') ? input.plateNo : `${input.plateNo}F`;
|
||||
const hydrogenTime =
|
||||
input.hydrogenTime.length === 16 ? `${input.hydrogenTime}:00` : input.hydrogenTime;
|
||||
return Boolean(
|
||||
bridge.findDuplicateRow(
|
||||
{ stationName: input.stationName, plateNo: plate, hydrogenTime },
|
||||
input.id,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
export function getTotalAmountMismatch(
|
||||
unitPrice: number,
|
||||
hydrogenKg: number,
|
||||
totalAmount: number,
|
||||
): { expected: number; actual: number; diff: number } | null {
|
||||
const bridge = typeof window !== 'undefined' ? window.H2VehicleLedgerBridge : undefined;
|
||||
if (bridge?.totalAmountMismatch) {
|
||||
return bridge.totalAmountMismatch(unitPrice, hydrogenKg, totalAmount, 0.05);
|
||||
}
|
||||
const expected = Math.round(unitPrice * hydrogenKg * 100) / 100;
|
||||
const actual = Math.round(totalAmount * 100) / 100;
|
||||
const diff = Math.round(Math.abs(actual - expected) * 100) / 100;
|
||||
return diff > 0.05 ? { expected, actual, diff } : null;
|
||||
}
|
||||
|
||||
export function removeStationOrder(id: string): boolean {
|
||||
const bridge = typeof window !== 'undefined' ? window.H2VehicleLedgerBridge : undefined;
|
||||
if (!bridge?.removeRow) return false;
|
||||
return bridge.removeRow(id);
|
||||
}
|
||||
|
||||
export function summarizeOrders(orders: H5OrderRecord[]): {
|
||||
count: number;
|
||||
totalKg: number;
|
||||
totalAmount: number;
|
||||
} {
|
||||
return orders.reduce(
|
||||
(acc, row) => {
|
||||
acc.count += 1;
|
||||
acc.totalKg += row.hydrogenKg || 0;
|
||||
acc.totalAmount += row.totalAmount || 0;
|
||||
return acc;
|
||||
},
|
||||
{ count: 0, totalKg: 0, totalAmount: 0 },
|
||||
);
|
||||
}
|
||||
68
src/prototypes/oneos-h5-h2-order/utils/photo-watermark.ts
Normal file
68
src/prototypes/oneos-h5-h2-order/utils/photo-watermark.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
/** 拍摄预览加水印:时间 + 地点(原型本地 canvas,未接真相机 SDK) */
|
||||
|
||||
function pad2(n: number): string {
|
||||
return n < 10 ? `0${n}` : String(n);
|
||||
}
|
||||
|
||||
export function formatWatermarkTime(date = new Date()): string {
|
||||
return (
|
||||
`${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())} ` +
|
||||
`${pad2(date.getHours())}:${pad2(date.getMinutes())}:${pad2(date.getSeconds())}`
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 在图片右下角绘制半透明水印条:第一行时间,第二行地点。
|
||||
*/
|
||||
export function applyPhotoWatermark(
|
||||
dataUrl: string,
|
||||
options: { timeText: string; locationText: string },
|
||||
): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
try {
|
||||
const canvas = document.createElement('canvas');
|
||||
const w = img.naturalWidth || img.width || 1;
|
||||
const h = img.naturalHeight || img.height || 1;
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) {
|
||||
resolve(dataUrl);
|
||||
return;
|
||||
}
|
||||
ctx.drawImage(img, 0, 0, w, h);
|
||||
|
||||
const fontSize = Math.max(14, Math.round(Math.min(w, h) * 0.032));
|
||||
const lineGap = Math.round(fontSize * 1.35);
|
||||
const padX = Math.round(fontSize * 0.7);
|
||||
const padY = Math.round(fontSize * 0.55);
|
||||
const lines = [
|
||||
`时间 ${options.timeText}`,
|
||||
`地点 ${options.locationText || '位置未知'}`,
|
||||
];
|
||||
ctx.font = `600 ${fontSize}px ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif`;
|
||||
const textWidth = Math.max(...lines.map((line) => ctx.measureText(line).width));
|
||||
const boxW = textWidth + padX * 2;
|
||||
const boxH = lineGap * lines.length + padY * 2;
|
||||
const boxX = Math.max(8, w - boxW - Math.round(fontSize * 0.6));
|
||||
const boxY = Math.max(8, h - boxH - Math.round(fontSize * 0.6));
|
||||
|
||||
ctx.fillStyle = 'rgba(15, 23, 42, 0.58)';
|
||||
ctx.fillRect(boxX, boxY, boxW, boxH);
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.textBaseline = 'top';
|
||||
lines.forEach((line, index) => {
|
||||
ctx.fillText(line, boxX + padX, boxY + padY + index * lineGap);
|
||||
});
|
||||
|
||||
resolve(canvas.toDataURL('image/jpeg', 0.92));
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
};
|
||||
img.onerror = () => reject(new Error('水印图片加载失败'));
|
||||
img.src = dataUrl;
|
||||
});
|
||||
}
|
||||
61
src/prototypes/oneos-h5-h2-order/utils/vehicle-mileage.ts
Normal file
61
src/prototypes/oneos-h5-h2-order/utils/vehicle-mileage.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
/**
|
||||
* 车机里程(原型 Mock)
|
||||
* 正式环境应改为车机 / T-Box / 车辆管理接口;此处按车牌返回演示里程。
|
||||
*/
|
||||
|
||||
const MILEAGE_BY_PLATE: Record<string, number> = {
|
||||
浙A88H201: 128560,
|
||||
浙A12345: 132000,
|
||||
浙B23456: 98640,
|
||||
沪ADB9161: 75420,
|
||||
苏E33333: 110280,
|
||||
浙A99880: 87210,
|
||||
};
|
||||
|
||||
function normalizePlate(plateNo: string): string {
|
||||
return String(plateNo || '')
|
||||
.trim()
|
||||
.toUpperCase()
|
||||
.replace(/F$/u, '');
|
||||
}
|
||||
|
||||
export type VehicleMileageResult = {
|
||||
ok: boolean;
|
||||
mileageKm: string;
|
||||
source: 'vehicle' | 'fallback';
|
||||
message: string;
|
||||
};
|
||||
|
||||
/** 模拟从车机拉取当前里程;无命中时给可演示的回退值 */
|
||||
export async function fetchMileageFromVehicle(plateNo: string): Promise<VehicleMileageResult> {
|
||||
await new Promise((resolve) => {
|
||||
window.setTimeout(resolve, 450);
|
||||
});
|
||||
const key = normalizePlate(plateNo);
|
||||
if (!key) {
|
||||
return {
|
||||
ok: false,
|
||||
mileageKm: '',
|
||||
source: 'fallback',
|
||||
message: '请先填写或识别车牌号后再取里程',
|
||||
};
|
||||
}
|
||||
if (MILEAGE_BY_PLATE[key] != null) {
|
||||
return {
|
||||
ok: true,
|
||||
mileageKm: String(MILEAGE_BY_PLATE[key]),
|
||||
source: 'vehicle',
|
||||
message: '已从车机获取当前里程',
|
||||
};
|
||||
}
|
||||
// 非种子车牌:用稳定伪值,便于演示「可取数」
|
||||
let hash = 0;
|
||||
for (let i = 0; i < key.length; i += 1) hash = (hash * 31 + key.charCodeAt(i)) % 100000;
|
||||
const mileage = 60000 + hash;
|
||||
return {
|
||||
ok: true,
|
||||
mileageKm: String(mileage),
|
||||
source: 'fallback',
|
||||
message: '车机未直连,已按演示规则回填里程',
|
||||
};
|
||||
}
|
||||
@@ -32,7 +32,8 @@ const CLOUD_PUBLISH_PATH_ALIASES: Record<string, string> = {
|
||||
};
|
||||
|
||||
function cloudPrototypeSegment(prototypeId: string): string {
|
||||
return CLOUD_PUBLISH_PATH_ALIASES[prototypeId] || `prototypes/${prototypeId}`;
|
||||
// 与 axhub.config.json cloudPublishing.s3 及 Make 发布路径一致:/{id}/index.html
|
||||
return CLOUD_PUBLISH_PATH_ALIASES[prototypeId] || prototypeId;
|
||||
}
|
||||
|
||||
/** 对象存储静态发布站点(无 Make 本地 dev server 路由) */
|
||||
@@ -40,7 +41,7 @@ export function isPublishedCloudHost(): boolean {
|
||||
if (typeof window === 'undefined') return false;
|
||||
const { hostname, pathname } = window.location;
|
||||
if (PUBLISHED_CLOUD_HOSTS.has(hostname)) return true;
|
||||
// export-html 发布页:/{prototype}/index.html 或 /prototypes/{prototype}/index.html
|
||||
// export-html 发布页:/{prototype-id}/index.html(与 Make 对象存储发布一致)
|
||||
return /\/index\.html$/u.test(pathname);
|
||||
}
|
||||
|
||||
@@ -126,6 +127,7 @@ type SidebarNode = {
|
||||
};
|
||||
|
||||
const GROUP_ICONS: Record<string, LucideIcon> = {
|
||||
车辆资产: Car,
|
||||
运维管理: Wrench,
|
||||
业务管理: Briefcase,
|
||||
合同配置: FileText,
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
{
|
||||
"id": "folder-1782874599304-roj8fd",
|
||||
"kind": "folder",
|
||||
"title": "运维管理",
|
||||
"title": "车辆资产",
|
||||
"children": [
|
||||
{
|
||||
"id": "item:prototypes:vehicle-management",
|
||||
@@ -111,10 +111,16 @@
|
||||
"itemKey": "prototypes/oneos-web-h2-station-site"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-h2-station-weekly",
|
||||
"id": "item:prototypes:oneos-h5-h2-order",
|
||||
"kind": "item",
|
||||
"title": "站点周报统计",
|
||||
"itemKey": "prototypes/oneos-web-h2-station-weekly"
|
||||
"title": "加氢记录(H5)",
|
||||
"itemKey": "prototypes/oneos-h5-h2-order"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-h2-station",
|
||||
"kind": "item",
|
||||
"title": "加氢记录",
|
||||
"itemKey": "prototypes/oneos-web-h2-station"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -126,8 +132,20 @@
|
||||
{
|
||||
"id": "item:prototypes:business-dept-ledger",
|
||||
"kind": "item",
|
||||
"title": "业务部台账",
|
||||
"title": "项目盈亏情况",
|
||||
"itemKey": "prototypes/business-dept-ledger"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-h2-station-stats",
|
||||
"kind": "item",
|
||||
"title": "加氢站数量统计",
|
||||
"itemKey": "prototypes/oneos-web-h2-station-stats"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:customer-payment-collection",
|
||||
"kind": "item",
|
||||
"title": "客户回款情况",
|
||||
"itemKey": "prototypes/customer-payment-collection"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -190,12 +208,6 @@
|
||||
"kind": "item",
|
||||
"title": "还车应结款",
|
||||
"itemKey": "prototypes/vehicle-return-settlement"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:vehicle-return-settlement-v2",
|
||||
"kind": "item",
|
||||
"title": "还车应结款-新",
|
||||
"itemKey": "prototypes/vehicle-return-settlement-v2"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -212,6 +224,19 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "folder-1784341576489-spa7ms",
|
||||
"kind": "folder",
|
||||
"title": "审批中心",
|
||||
"children": [
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-approval",
|
||||
"kind": "item",
|
||||
"title": "审批中心",
|
||||
"itemKey": "prototypes/oneos-web-approval"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:lease-business-line-overview",
|
||||
"kind": "item",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"version": 1,
|
||||
"updatedAt": "2026-07-12T14:43:43.194Z",
|
||||
"updatedAt": "2026-07-18T02:52:26.271Z",
|
||||
"title": "小羚羚",
|
||||
"sectionId": "folder-prototypes-xll-miniapp",
|
||||
"description": "氢能车辆运营移动端原型;菜单与小羚羚「小程序」项目目录同步。",
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
/**
|
||||
* @name 合同模板管理
|
||||
* 自 ONE-OS web端 原稿复刻(1 个页面)
|
||||
*/
|
||||
import '../../common/oneosWebLegacy/legacyGlobals';
|
||||
import React from 'react';
|
||||
import '../vehicle-management/style.css';
|
||||
import Page1 from './pages/01-合同模板管理.jsx';
|
||||
import { OneosWebLegacyShell } from '../../common/oneosWebLegacy/OneosWebLegacyShell';
|
||||
|
||||
const pages = [
|
||||
{ id: 'u5408u540cu6a21u677fu7ba1u7406', title: '合同模板管理', component: Page1 },
|
||||
];
|
||||
|
||||
export default function OneosWebContractTemplate() {
|
||||
return (
|
||||
<OneosWebLegacyShell
|
||||
moduleTitle="合同模板管理"
|
||||
pages={pages}
|
||||
defaultPageId="u5408u540cu6a21u677fu7ba1u7406"
|
||||
/>
|
||||
);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* @name 数据分析
|
||||
* 自 ONE-OS web端 原稿复刻(8 个页面;业务部台账已迁至 OneOS → 数据分析)
|
||||
* 自 ONE-OS web端 原稿复刻(8 个页面;业务部台账、客户回款情况已迁至 OneOS → 数据分析)
|
||||
*/
|
||||
import '../../common/oneosWebLegacy/legacyGlobals';
|
||||
import React from 'react';
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,33 @@
|
||||
# 加氢机品牌管理
|
||||
|
||||
| 项 | 内容 |
|
||||
|---|---|
|
||||
| 模块 | 加氢站管理 → 站点信息 |
|
||||
| 入口 | 列表工具栏 → **加氢机品牌管理** |
|
||||
| 关联 | H5「加氢订单」面板 OCR |
|
||||
| 数据 | `src/common/h2DispenserBrandStore.js`(localStorage 演示,未接真实 API) |
|
||||
|
||||
## 目标
|
||||
|
||||
维护加氢机**品牌 + 型号**清单,供站端拍照 OCR 时作为识别模型 / 模板判断参考(原型展示为 H5 面板区提示文案)。
|
||||
|
||||
## 字段
|
||||
|
||||
| 字段 | 规则 |
|
||||
|---|---|
|
||||
| 品牌 * | 必填,如「海德利森」 |
|
||||
| 型号 * | 必填,如「H2-D50」;同品牌+型号不可重复 |
|
||||
| 备注 | 选填,如 OCR 模板说明 |
|
||||
| 更新时间 | 系统写入 |
|
||||
|
||||
## 交互
|
||||
|
||||
1. 打开弹窗加载当前清单(含种子数据)。
|
||||
2. 填写品牌/型号/备注 → **新增** 或编辑后 **保存修改**。
|
||||
3. 行操作:编辑、删除(二次确认)。
|
||||
|
||||
## 验收
|
||||
|
||||
1. 站点信息工具栏可见「加氢机品牌管理」。
|
||||
2. 可增删改品牌型号,刷新后仍保留(同浏览器)。
|
||||
3. H5 新增页「加氢机面板识别」展示已维护品牌型号提示(若 Store 已加载)。
|
||||
@@ -0,0 +1,171 @@
|
||||
# 期末余额设置 · 需求说明
|
||||
|
||||
| 项 | 内容 |
|
||||
|---|---|
|
||||
| 模块 | 加氢站管理 → 站点信息 |
|
||||
| 功能名称 | 期末余额设置 |
|
||||
| 交互原型 | `/prototypes/oneos-web-h2-station-site` |
|
||||
| 关联功能 | 预付余额列表展示、预付余额下钻、车辆氢费明细、生成对账单 |
|
||||
| 文档状态 | 已对齐原型 |
|
||||
|
||||
---
|
||||
|
||||
## 1. 需求背景
|
||||
|
||||
运营与加氢站(如嘉兴站)对账后,账面「期末余额」与系统内车辆氢费明细之间常有**时间差**:对账时点之后,站点仍可能继续产生加氢支出或充值收入,导致列表「预付余额」无法直接等于对账结果。
|
||||
|
||||
需要提供能力:在站点侧登记一次对账时的**期末余额**与**期末时间**,并以此为锚点推算当前可用余额。
|
||||
|
||||
---
|
||||
|
||||
## 2. 需求目标
|
||||
|
||||
1. 支持按站点登记期末余额、期末时间。
|
||||
2. 保存时按统一公式重算「当前预付余额」并写回列表。
|
||||
3. 预付余额下钻流水以期末时间为锚点,重新展示余额滚动。
|
||||
4. 保留完整变更记录,便于追溯。
|
||||
|
||||
---
|
||||
|
||||
## 3. 用户与入口
|
||||
|
||||
| 角色 | 诉求 |
|
||||
|---|---|
|
||||
| 财务 / 结算 | 对账后登记期末余额,得到可解释的当前预付余额 |
|
||||
| 加氢站运营 | 查看当前余额及下钻流水是否与期末锚点一致 |
|
||||
|
||||
**入口**:站点信息列表 → 操作列 **更多(⋮)** → **期末余额设置**
|
||||
(菜单位置:余额提醒设置 与 生成对账单 之间)
|
||||
|
||||
---
|
||||
|
||||
## 4. 功能描述
|
||||
|
||||
### 4.1 弹窗内容
|
||||
|
||||
| 区域 | 内容 | 说明 |
|
||||
|---|---|---|
|
||||
| 站点摘要 | 站点名称、当前预付余额 | 只读 |
|
||||
| 表单 | 期末余额(元)*、期末时间 * | 必填 |
|
||||
| 操作 | 取消 / 保存 | 保存触发校验与重算 |
|
||||
| 变更记录 | 期末余额、生效时间、操作人、操作时间 | 只追加;支持分页 |
|
||||
|
||||
### 4.2 主流程
|
||||
|
||||
```text
|
||||
打开期末余额设置
|
||||
→ 填写期末余额、期末时间
|
||||
→ 点击保存
|
||||
→ 校验通过
|
||||
→ 追加变更记录
|
||||
→ 按规则重算当前预付余额并写回列表
|
||||
→ 提示保存成功
|
||||
```
|
||||
|
||||
打开该站点「预付余额」下钻时,若已存在生效期末配置,流水按锚点规则重算展示(见 §6)。
|
||||
|
||||
---
|
||||
|
||||
## 5. 业务规则(核心)
|
||||
|
||||
### 5.1 字段规则
|
||||
|
||||
| 规则 ID | 规则 | 说明 |
|
||||
|---|---|---|
|
||||
| R1 | 期末余额必填 | 须为有效数字;**允许负数**(欠费场景) |
|
||||
| R2 | 期末时间必填 | 精确到分钟(`YYYY-MM-DD HH:mm`) |
|
||||
| R3 | 期末时间不可晚于当前时刻 | 日期不可选今天之后;保存时若时刻晚于现在,阻止保存 |
|
||||
| R4 | 以最近一次保存为生效锚点 | 站点仅保留一套「当前生效」的期末余额 / 期末时间;历史见变更记录 |
|
||||
|
||||
### 5.2 当前预付余额计算公式
|
||||
|
||||
**仅在点击「保存」时计算一次**(不监听之后新产生的流水自动刷新)。
|
||||
|
||||
```text
|
||||
当前预付余额 = 期末余额 − 期末后支出合计 + 期末后收入合计
|
||||
```
|
||||
|
||||
| 规则 ID | 规则 | 说明 |
|
||||
|---|---|---|
|
||||
| R5 | 支出范围 | 该站点、业务时间 **严格晚于** 期末时间 `T` 的车辆氢费明细,按**成本总价**合计 |
|
||||
| R6 | 收入范围 | 该站点、变更时间 **严格晚于** `T` 的充值类收入合计 |
|
||||
| R7 | 取整 | 结果保留 **2 位小数** 后写回「预付余额(元)」 |
|
||||
| R8 | 时间边界 | 等于期末时间 `T` 当刻的流水 **不计入** 期末后收支(只统计 `> T`) |
|
||||
|
||||
### 5.3 变更记录规则
|
||||
|
||||
| 规则 ID | 规则 | 说明 |
|
||||
|---|---|---|
|
||||
| R9 | 只追加 | 每次保存成功新增一条记录 |
|
||||
| R10 | 不可删除 | 界面不提供删除 / 清空 |
|
||||
| R11 | 不可编辑 | 历史行不可改 |
|
||||
| R12 | 记录字段 | 期末余额、生效时间(= 本次期末时间)、操作人、操作时间(保存时刻) |
|
||||
| R13 | 分页 | 变更记录支持分页(紧凑页码:5 / 10 / 20 / 50) |
|
||||
|
||||
### 5.4 与其他功能的关系
|
||||
|
||||
| 规则 ID | 规则 | 说明 |
|
||||
|---|---|---|
|
||||
| R14 | KPI / 余额提醒 | 仍读取「预付余额」;期末保存写回后,预警 / 欠费 KPI 随之变化 |
|
||||
| R15 | 生成对账单 | 对账单提交仍可扣减 / 写回预付余额;与期末重算冲突时,**以后发生的写操作为准** |
|
||||
| R16 | 未配置期末 | 未保存过期末余额时,预付余额逻辑保持原状(对账扣减、手工/其他入口) |
|
||||
|
||||
---
|
||||
|
||||
## 6. 预付余额下钻规则
|
||||
|
||||
当站点已配置生效的期末余额、期末时间时:
|
||||
|
||||
| 规则 ID | 规则 | 说明 |
|
||||
|---|---|---|
|
||||
| R17 | 插入锚点行 | 在流水中增加类型为「期末余额」的行:时间为期末时间,余额列 = 期末余额 |
|
||||
| R18 | 锚点前流水 | 时间 ≤ 期末时间的历史流水可继续展示 |
|
||||
| R19 | 锚点后流水 | 时间 > 期末时间的收入 / 支出,从期末余额起按时间顺序累加,重算每行余额 |
|
||||
| R20 | 下钻不写回 | 打开下钻只重算展示,**不再次写回**列表预付余额(列表值仍以最近一次保存结果为准) |
|
||||
|
||||
**锚点后单行余额推算:**
|
||||
|
||||
```text
|
||||
行余额 = 上一行余额 + 本行收入 − 本行支出
|
||||
(起点上一行余额 = 期末余额)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 校验与异常
|
||||
|
||||
| 场景 | 系统行为 |
|
||||
|---|---|
|
||||
| 期末余额为空 / 非数字 | 阻止保存,提示填写有效期末余额 |
|
||||
| 期末时间为空 | 阻止保存,提示选择期末时间 |
|
||||
| 期末时间晚于当前时刻 | 阻止保存,提示「期末时间不能晚于今天」 |
|
||||
| 期末后无收支流水 | 允许保存;当前预付余额 = 期末余额 |
|
||||
| 变更记录为空 | 展示「暂无变更记录」 |
|
||||
|
||||
---
|
||||
|
||||
## 8. 验收标准
|
||||
|
||||
- [ ] 更多菜单可见「期末余额设置」
|
||||
- [ ] 必填与「期末时间不可晚于今天」校验生效
|
||||
- [ ] 保存后列表预付余额 = 公式计算结果
|
||||
- [ ] 变更记录追加成功,无删除入口,分页可用
|
||||
- [ ] 余额下钻出现「期末余额」锚点,其后余额连续正确
|
||||
- [ ] 未配置期末时,原有预付余额 / 下钻行为不受影响
|
||||
|
||||
---
|
||||
|
||||
## 9. 非目标(本期不做)
|
||||
|
||||
- 变更记录编辑、删除、回滚到某一历史锚点
|
||||
- 保存后对新流水的自动实时重算
|
||||
- 多套期末锚点同时生效
|
||||
- 真实充值流水 API、审批流(原型可用 Mock)
|
||||
|
||||
---
|
||||
|
||||
## 10. 修订记录
|
||||
|
||||
| 版本 | 日期 | 说明 |
|
||||
|---|---|---|
|
||||
| v1.0 | 2026-07-17 | 首版需求:口径、写回时机、不可删日志、时间上限、下钻锚点 |
|
||||
@@ -4,7 +4,7 @@
|
||||
- 用户资料/参考资料:
|
||||
- `src/prototypes/oneos-web-h2-station-site/.spec/requirements.md`
|
||||
- `src/resources/oneos-web-legacy/加氢站管理/站点管理使用说明书.md`
|
||||
- 页面实现:`src/prototypes/oneos-web-h2-station/pages/03-站点信息.jsx`
|
||||
- 页面实现:`src/prototypes/oneos-web-h2-station-site/pages/03-站点信息.jsx`
|
||||
- 氢费共享 Store:`src/common/h2VehicleLedgerBridge.js`
|
||||
- 生成时间:2026-07-01(复审)
|
||||
|
||||
|
||||
@@ -203,4 +203,4 @@ flowchart TD
|
||||
| 口径函数 | `h2IsBalanceAlertStation` / `h2IsArrearsStation` |
|
||||
| 打开弹窗 | `openAlertStationModal` |
|
||||
| 批量充值 | `handleBatchRechargeFromAlert` → `openRechargeModal` |
|
||||
| 页面文件 | `src/prototypes/oneos-web-h2-station/pages/03-站点信息.jsx` |
|
||||
| 页面文件 | `src/prototypes/oneos-web-h2-station-site/pages/03-站点信息.jsx` |
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
1. **筛选区** — 名称、签约、地区、营业状态
|
||||
2. **KPI 分类** — 全部 / 签约·普通 / 预付余额预警 / 已欠费 / 无加氢
|
||||
3. **工具栏** — 全站余额提醒、批量导入、发起充值单、新建站点
|
||||
3. **工具栏** — 全站余额提醒、批量导入、加氢机品牌管理、发起充值单、新建站点
|
||||
4. **站点列表** — 主数据 + 运营指标 + 操作列
|
||||
5. **分页栏** — 每页 5/10/20/50 条
|
||||
|
||||
@@ -82,6 +82,7 @@
|
||||
|---|---|
|
||||
| 全站余额提醒设置 | 配置全局预付余额预警阈值 |
|
||||
| 批量导入 | 下载模板 → 上传 CSV/Excel → 预览确认导入 |
|
||||
| 加氢机品牌管理 | 维护品牌与型号,供 H5 面板 OCR 参考(见 `.spec/dispenser-brand.md`) |
|
||||
| 发起充值单 | 为站点发起预付充值流程(原型演示) |
|
||||
| 新建站点 | 进入同页内嵌新建视图 |
|
||||
|
||||
@@ -100,7 +101,7 @@
|
||||
| 联系方式 | 联系人 + 电话 |
|
||||
| 操作 | 查看 + 更多菜单 |
|
||||
|
||||
**更多菜单**:编辑、删除、营业状态、价格配置、生成对账单、查看对账记录等(按状态与权限显隐)。
|
||||
**更多菜单**:编辑、删除、营业状态、价格配置、余额提醒、期末余额设置、生成对账单、查看对账记录等(按状态与权限显隐)。
|
||||
|
||||
**分页**:默认 10 条,可选 5/10/20/50。
|
||||
|
||||
@@ -119,4 +120,5 @@
|
||||
| 入口 | 路径 |
|
||||
|---|---|
|
||||
| 独立原型(本页) | OneOS → 加氢站管理 → 站点信息 |
|
||||
| 合包 | ONE-OS Web 端 → 加氢站管理 → 加氢订单 / 加氢记录 |
|
||||
| 加氢订单 | OneOS → 加氢站管理 → 加氢订单(H5) |
|
||||
| 加氢记录 | OneOS → 加氢站管理 → 加氢记录(Web) |
|
||||
|
||||
@@ -1,37 +1,51 @@
|
||||
# 加氢站管理 · 站点信息 — 对账与结算 PRD
|
||||
|
||||
> 本模块与「车辆氢费明细」配合完成**站点侧氢费结算闭环**。
|
||||
> **重要**:生成对账单时,账期筛选出的明细**必须来自车辆氢费明细中「已核对」的记录**;未核对明细不得进入对账单。完整判定见 [statement-verified-filter.md](./statement-verified-filter.md);台账双状态见车辆氢费明细 `.spec/verify-reconcile.md`。
|
||||
|
||||
---
|
||||
|
||||
## 1. 数据来源
|
||||
|
||||
对账单明细取自 **车辆氢费明细** 中同时满足以下条件的记录:
|
||||
对账单明细取自 **车辆氢费明细**(共享 Store)中**同时满足**以下条件的记录:
|
||||
|
||||
1. 对账状态 = **已对账**(台账已完成「完成对账」)
|
||||
2. **尚未**被本站点历史对账单结算过(未绑定 `statementRecordId`)
|
||||
3. 加氢时间落在用户选择的 **[账单开始日期, 账单结束日期]** 内
|
||||
4. 加氢站名称与当前操作站点一致
|
||||
| 优先级 | 条件 | 说明 |
|
||||
|---|---|---|
|
||||
| 1 | 未绑定 `statementRecordId` | 尚未被历史对账单结算 |
|
||||
| 2 | 核对状态 = **已核对**(`verifyStatus = verified`) | **硬约束**:未核对一律不纳入 |
|
||||
| 3 | 对账状态 = **未对账**(`reconcileStatus = pending`) | 已对账由对账单提交产生,不再进入新账单 |
|
||||
| 4 | 加氢站名称 = 当前操作站点 | 仅本站 |
|
||||
| 5 | 加氢时间落在 **[账单开始日期, 账单结束日期]** | 用户所选账期(按日闭区间) |
|
||||
|
||||
> 对账单明细**仅展示成本字段**(加氢量、成本单价、成本总价等),不展示加氢单价、加氢总价。
|
||||
|
||||
### 1.1 为何必须「已核对」
|
||||
|
||||
能源部在车辆氢费明细点击「完成核对」后,明细才视为业务已确认。站点侧生成对账单是结算动作,只能拉取已确认数据;未核对记录即使时间落在账期内,也**静默排除**,不出现在对账单明细与统计中。
|
||||
|
||||
```text
|
||||
未核对 ──✕──→ 不可进对账单
|
||||
已核对 + 未对账 ──✓──→ 可进对账单(提交后变为已对账)
|
||||
已核对 + 已对账 ──✕──→ 不可再进下一张对账单
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. 两阶段交互
|
||||
|
||||
#### 生成对账单 · 业务逻辑
|
||||
|
||||
1. 选择**账单开始日期**与**账单结束日期**后,从**车辆氢费明细**获取该时间段内、对应当前站点的加氢记录(已对账且尚未结算)。
|
||||
2. 点击「**生成对账单**」时弹出**二次确认**,提示:生成对账单后,车辆氢费明细中对应记录将自动标记为已对账且无法修改。
|
||||
1. 选择**账单开始日期**与**账单结束日期**后,从**车辆氢费明细**获取该时间段内、对应当前站点、且为**已核对且尚未结算(未对账)**的加氢记录。
|
||||
2. 点击「**生成对账单**」时弹出**二次确认**,提示:生成并提交后,车辆氢费明细中对应记录将标记为**已对账**且无法修改。
|
||||
3. 确认后进入结算阶段,填写**收票日期**、**收票金额**及**发票附件**(对账日期在提交时由系统自动回写)。
|
||||
4. 点击「**提交对账单**」后,本批明细在车辆氢费明细中锁定为已对账/已结算状态,不可再修改。
|
||||
4. 点击「**提交对账单**」后,本批明细在车辆氢费明细中锁定为**已对账**并绑定本对账单,不可再进入后续对账单。
|
||||
|
||||
**阶段一 · 选期生成**
|
||||
|
||||
- 日期区下方展示:**上次对账单结束时间**(无历史则「暂无」)
|
||||
- 默认开始日期建议 = 上次结束日 + 1 天
|
||||
- 点击「生成对账单」时弹出**二次确认**:提示生成后车辆氢费明细对应记录将标记为已对账且无法修改;确认后进入阶段二,日期锁定不可改
|
||||
- 无符合条件记录时提示调整日期
|
||||
- 点击「生成对账单」时弹出**二次确认**;确认后进入阶段二,日期锁定不可改
|
||||
- 无符合条件记录时提示调整日期(含:账期内仅有未核对、或均已结算等情况)
|
||||
|
||||
**阶段二 · 结算提交**
|
||||
|
||||
@@ -39,7 +53,7 @@
|
||||
|
||||
| 指标 | 说明 |
|
||||
|---|---|
|
||||
| 加氢次数 | 本账单包含的已对账记录笔数 |
|
||||
| 加氢次数 | 本账单包含的**已核对**记录笔数 |
|
||||
| 加氢总量 | kg 合计 |
|
||||
| 成本总金额 | 成本总价合计 |
|
||||
|
||||
@@ -65,12 +79,15 @@
|
||||
|
||||
| 车辆氢费明细字段 | 回写值 |
|
||||
|---|---|
|
||||
| 对账状态 | **已对账**(`reconcileStatus = reconciled`) |
|
||||
| 对账日期 | 操作完成时间 |
|
||||
| 收票日期 | 操作完成日期 |
|
||||
| 加氢站付款状态 | 已付款 |
|
||||
|
||||
原型通过 `H2_STATION_STATEMENT_LEDGER_UPDATES` / `h2VehicleLedgerBridge` 模拟跨页回写。
|
||||
|
||||
> 「完成核对」只改变核对状态,**不会**把记录写成已对账;已对账仅由本页对账单提交产生。
|
||||
|
||||
---
|
||||
|
||||
## 4. 查看对账记录
|
||||
@@ -88,7 +105,8 @@
|
||||
| 场景 | 处理 |
|
||||
|---|---|
|
||||
| 日期未填 / 开始晚于结束 | 阻止生成 |
|
||||
| 区间内无已对账未结算记录 | 阻止生成,提示调整日期 |
|
||||
| 区间内无「已核对且未对账未结算」记录 | 阻止生成,提示调整日期(或先完成核对) |
|
||||
| 区间内存在未核对记录 | **不纳入**对账单;不单独弹窗枚举(静默排除) |
|
||||
| 点击「生成对账单」未确认 | 不进入结算阶段 |
|
||||
| 收票日期/金额/附件未填 | 阻止提交 |
|
||||
| 收票金额 ≤ 0 | 阻止提交 |
|
||||
@@ -98,8 +116,10 @@
|
||||
|
||||
## 6. 研发要点
|
||||
|
||||
1. **对账单幂等**:同一笔已对账记录只能进入一次成功提交的对账单
|
||||
2. **上次结束时间**:取该站点已成功提交对账单的最大 `endDate`
|
||||
3. **余额计算**:`balanceAfter = prepaidBalance - sum(costTotal)`
|
||||
4. **跨模块同步**:生产对接统一台账;原型使用 Bridge Store
|
||||
5. **明细字段范围**:对账弹窗不展示客户侧加氢单价/总价
|
||||
1. **准入**:`verifyStatus === verified` 为硬条件;勿再用「已对账」作为生成筛选条件
|
||||
2. **对账单幂等**:同一笔明细只能进入一次成功提交的对账单(`statementRecordId` 约束)
|
||||
3. **上次结束时间**:取该站点已成功提交对账单的最大 `endDate`
|
||||
4. **余额计算**:`balanceAfter = prepaidBalance - sum(costTotal)`
|
||||
5. **跨模块同步**:生产对接统一台账;原型使用 Bridge Store
|
||||
6. **明细字段范围**:对账弹窗不展示客户侧加氢单价/总价
|
||||
7. **规格全文**:[statement-verified-filter.md](./statement-verified-filter.md)
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
| 所属系统 | ONE-OS Web 端 |
|
||||
| 目标读者 | 前端 / 后端 / 测试 / 业务产品对接人 |
|
||||
| 交互原型 | `/prototypes/oneos-web-h2-station-site` |
|
||||
| 关联原型 | [车辆氢费明细](/prototypes/vehicle-h2-fee-ledger)、[加氢站合包](/prototypes/oneos-web-h2-station) |
|
||||
| 关联原型 | [车辆氢费明细](/prototypes/vehicle-h2-fee-ledger)、[加氢记录](/prototypes/oneos-web-h2-station)、[加氢订单 H5](/prototypes/oneos-h5-h2-order) |
|
||||
| 文档状态 | 已对齐原型 |
|
||||
|
||||
---
|
||||
@@ -36,7 +36,7 @@
|
||||
|
||||
- 对账单审批流、ERP 自动过账
|
||||
- 发票 OCR 识别与验真
|
||||
- 加氢订单、加氢记录(仍在合包 `oneos-web-h2-station`)
|
||||
- 加氢订单(独立 H5:`oneos-h5-h2-order`)、加氢记录(独立 Web:`oneos-web-h2-station`)本页不内嵌
|
||||
- 后端接口联调(原型使用 Mock + 共享 Store)
|
||||
|
||||
---
|
||||
@@ -118,22 +118,37 @@
|
||||
3. **阶梯量重置日期**见价格配置表单内「阶梯量重置日期」;到达重置日后,累计加氢量**从零重新计数**,用于判断当前所处价格区间。
|
||||
4. **生效时间**自表单内「生效时间」起对新数据生效,**不追溯**此前已产生的数据;生效时间之前的历史记录,仍按当时已达的**最高阶梯价格**结算。
|
||||
|
||||
### 5.3 下钻分析
|
||||
### 5.3 期末余额设置
|
||||
|
||||
> 完整规则见 [period-end-balance.md](./period-end-balance.md)
|
||||
|
||||
与加氢站对账存在时间差时,登记**期末余额**与**期末时间**作为锚点:
|
||||
|
||||
- **入口**:更多 → 期末余额设置
|
||||
- **计算**:`当前预付余额 = 期末余额 − 期末后支出 + 期末后收入`(仅保存时重算一次)
|
||||
- **约束**:期末时间不可晚于今天;变更记录只追加、不可删除
|
||||
- **下钻**:余额流水从期末锚点行起重新累加
|
||||
|
||||
### 5.4 下钻分析
|
||||
|
||||
- **加氢量下钻**:统计卡 + 明细表 + 导出,字段对齐车辆氢费明细
|
||||
- **预付余额下钻**:充值/加氢流水 + 趋势图 + 导出
|
||||
- **预付余额下钻**:充值/加氢流水 + 趋势图 + 导出;若已配置期末余额,自期末时间锚点重算后续余额
|
||||
|
||||
---
|
||||
|
||||
## 6. 对账与结算(重点)
|
||||
|
||||
> 详见 `.spec/requirements-prd-statement.md`
|
||||
> 详见 [requirements-prd-statement.md](./requirements-prd-statement.md);纳入规则全文见 [statement-verified-filter.md](./statement-verified-filter.md)
|
||||
|
||||
与「车辆氢费明细」配合完成站点侧氢费结算闭环:
|
||||
|
||||
1. 拉取已对账且未结算的记录
|
||||
2. 两阶段:选期生成 → 填收票提交
|
||||
3. 提交后更新预付余额、写对账历史、回写台账(对账日期、收票日期、已付款)
|
||||
| 步骤 | 说明 |
|
||||
|---|---|
|
||||
| 1. 拉取明细 | 按账期从车辆氢费明细取 **已核对** ∧ **未对账** ∧ 未结算 ∧ 本站 的记录;**未核对不纳入** |
|
||||
| 2. 两阶段 | 选期生成 → 填收票提交 |
|
||||
| 3. 提交回写 | 更新预付余额、写对账历史;台账变为 **已对账**(对账日期、收票日期、已付款) |
|
||||
|
||||
> **核对 ≠ 对账**:核对由车辆氢费明细「完成核对」产生;对账仅由本页「提交对账单」回写。
|
||||
|
||||
---
|
||||
|
||||
@@ -143,7 +158,7 @@
|
||||
|---|---|
|
||||
| 氢费明细 | `src/common/h2VehicleLedgerBridge.js` |
|
||||
| 对账回写 | `H2_STATION_STATEMENT_LEDGER_UPDATES` |
|
||||
| 页面实现 | `src/prototypes/oneos-web-h2-station/pages/03-站点信息.jsx` |
|
||||
| 页面实现 | `src/prototypes/oneos-web-h2-station-site/pages/03-站点信息.jsx` |
|
||||
| 独立入口 | `src/prototypes/oneos-web-h2-station-site/index.tsx` |
|
||||
|
||||
---
|
||||
@@ -159,11 +174,17 @@
|
||||
|
||||
### 8.2 对账流程
|
||||
|
||||
- [ ] 仅已对账未结算记录可进入对账单
|
||||
- [ ] 仅 **已核对** 且未对账、未结算的记录可进入对账单;未核对明细即使在账期内也不出现
|
||||
- [ ] 两阶段交互与必填校验完整
|
||||
- [ ] 提交后回写车辆氢费明细可跨页验收
|
||||
- [ ] 提交后回写车辆氢费明细为 **已对账**,可跨页验收
|
||||
|
||||
### 8.3 标注与文档
|
||||
### 8.3 期末余额设置
|
||||
|
||||
- [ ] 更多菜单可打开期末余额设置;期末时间不可晚于今天
|
||||
- [ ] 保存后写回预付余额,变更记录只追加不可删
|
||||
- [ ] 余额下钻出现期末锚点且后续余额连续推算
|
||||
|
||||
### 8.4 标注与文档
|
||||
|
||||
- [ ] `@axhub/annotation` 已接入,关键区域有 `data-annotation-id`
|
||||
- [ ] 右侧工具栏目录可阅 PRD 全文与页面标注
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
| 包含 | 不包含 |
|
||||
|------|--------|
|
||||
| 站点列表、KPI、新建/编辑/查看/删除 | 加氢订单、加氢记录(仍在合包) |
|
||||
| 站点列表、KPI、新建/编辑/查看/删除 | 加氢订单(H5 独立)、加氢记录(Web 独立) |
|
||||
| 营业状态、价格配置、余额下钻 | 后端接口联调 |
|
||||
| 两阶段对账单、充值单、批量导入 | |
|
||||
|
||||
@@ -31,4 +31,5 @@
|
||||
## 双入口说明
|
||||
|
||||
- **本原型**:OneOS → 加氢站管理 → 站点信息
|
||||
- **合包**:ONE-OS Web 端 → 加氢站管理 → 加氢订单 / 加氢记录
|
||||
- **加氢订单**:OneOS → 加氢站管理 → 加氢订单(`oneos-h5-h2-order`)
|
||||
- **加氢记录**:OneOS → 加氢站管理 → 加氢记录(`oneos-web-h2-station`)
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
# 站点信息 · 生成对账单 — 明细纳入规则(已核对)
|
||||
|
||||
| 项 | 说明 |
|
||||
|---|---|
|
||||
| 模块 | 加氢站管理 → 站点信息 → 生成对账单 |
|
||||
| 交互原型 | `/prototypes/oneos-web-h2-station-site` |
|
||||
| 对照台账 | [车辆氢费明细 · 核对 vs 对账](/prototypes/vehicle-h2-fee-ledger)(`.spec/verify-reconcile.md`) |
|
||||
| 实现 | `h2GetAvailableStatementLedgerRows`(`pages/03-站点信息.jsx`) |
|
||||
| 数据源 | `src/common/h2VehicleLedgerBridge.js` 共享 Store(原型本地种子,**未接真实 API**) |
|
||||
|
||||
---
|
||||
|
||||
## 1. 业务目的
|
||||
|
||||
生成对账单时,按账单起止日期从**车辆氢费明细**筛选本站加氢记录。
|
||||
**只纳入已完成「核对」的明细**;**未核对**记录即使加氢时间落在账期内,也**不得**出现在对账单中。
|
||||
|
||||
> 这是跨模块硬约束:未核对数据尚未经能源部确认,不能进入站点结算。
|
||||
|
||||
---
|
||||
|
||||
## 2. 核对 vs 对账(不得混用)
|
||||
|
||||
| 概念 | 字段 | 用户可见 | 谁触发 | 与对账单关系 |
|
||||
|---|---|---|---|---|
|
||||
| **核对** | `verifyStatus` = `verified` / `unverified` | 已核对 / 未核对 | 车辆氢费明细 · **完成核对** | **生成对账单的准入条件** |
|
||||
| **对账** | `reconcileStatus` = `pending` / `reconciled` | 未对账 / 已对账 | 本页 · **提交对账单** 回写 | 提交后变为已对账;已对账不再进入下一张 |
|
||||
|
||||
```text
|
||||
加氢记录上报 → 未核对 + 未对账
|
||||
↓ 车辆氢费明细「完成核对」
|
||||
已核对 + 未对账 ←── 仅此状态可被「生成对账单」拉取
|
||||
↓ 站点「提交对账单」
|
||||
已核对 + 已对账(绑定 statementRecordId)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. 判定顺序(须全部满足,命中否即排除)
|
||||
|
||||
按下列优先级过滤;任一不满足则**不纳入**对账单:
|
||||
|
||||
| 优先级 | 条件 | 说明 |
|
||||
|---|---|---|
|
||||
| 1 | 无 `statementRecordId` | 尚未被历史对账单结算绑定 |
|
||||
| 2 | `verifyStatus === 'verified'`(已核对) | **核心**:未核对一律排除 |
|
||||
| 3 | `reconcileStatus === 'pending'`(未对账) | 已对账不再进入新账单 |
|
||||
| 4 | `stationName` = 当前操作站点 | 仅本站明细 |
|
||||
| 5 | 加氢时间 ∈ **[账单开始日期, 账单结束日期]**(按日闭区间) | 用户所选账期 |
|
||||
|
||||
**前置条件(不进入本筛选):**
|
||||
|
||||
- 未保存草稿(台账 `reconcileStatus = draft`)
|
||||
- 账单起止日期未填或开始晚于结束(交互层先拦截,不调用本筛选)
|
||||
|
||||
---
|
||||
|
||||
## 4. 用户可见结果
|
||||
|
||||
| 场景 | 结果 |
|
||||
|---|---|
|
||||
| 账期内仅有未核对明细 | 无可用记录;提示调整日期或先去车辆氢费明细完成核对 |
|
||||
| 账期内有已核对未对账明细 | 进入对账单明细表与统计(次数 / 加氢量 / 成本总金额) |
|
||||
| 同账期内混有已核对与未核对 | **只展示已核对**;未核对静默排除,不计入统计 |
|
||||
| 已核对但已对账 / 已绑定对账单 | 排除 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 与代码映射
|
||||
|
||||
| 规则 | 代码 |
|
||||
|---|---|
|
||||
| 筛选入口 | `h2GetAvailableStatementLedgerRows(store, stationName, startDate, endDate)` |
|
||||
| 已核对 | `verifyStatus === 'verified'`(缺省按 `unverified`) |
|
||||
| 未对账 | `reconcileStatus === 'pending'`(且 ≠ `reconciled`) |
|
||||
| 账期 | `h2ParseDateTimeMs(hydrogenTime)` 落在起止日闭区间 |
|
||||
|
||||
---
|
||||
|
||||
## 6. 验收要点
|
||||
|
||||
- [ ] 未核对明细不会出现在对账单明细表与统计中
|
||||
- [ ] 仅「已核对 ∧ 未对账 ∧ 未结算 ∧ 本站 ∧ 账期内」可生成
|
||||
- [ ] 文案与 PRD 使用「已核对 / 未核对」,不与「已对账 / 未对账」混称
|
||||
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user