89 lines
2.4 KiB
Markdown
89 lines
2.4 KiB
Markdown
# 应结账款页面交互流程图
|
|
navigationStyle: 'custom',
|
|
## 用户操作流程
|
|
|
|
```mermaid
|
|
flowchart TD
|
|
A[用户进入应结账款页面] --> B[查看商户列表]
|
|
B --> C[点击商户头部的"消账"按钮]
|
|
C --> D[进入选择模式]
|
|
|
|
D --> E{用户操作}
|
|
E -->|点击订单| F[选择/取消选择订单]
|
|
E -->|点击全选| G[全选/取消全选]
|
|
E -->|点击取消| H[退出选择模式]
|
|
E -->|选择订单后点击进行消账| I[打开消账弹窗]
|
|
|
|
F --> J[更新已选数量和金额]
|
|
G --> J
|
|
J --> K{是否有选中订单}
|
|
K -->|有| L[显示"进行消账(X)"按钮]
|
|
K -->|无| M[显示"取消"按钮]
|
|
|
|
L --> N[点击"进行消账"]
|
|
N --> I
|
|
I --> O[填写消账信息]
|
|
O --> P[提交消账申请]
|
|
P --> Q[消账成功]
|
|
Q --> R[退出选择模式]
|
|
R --> S[刷新列表]
|
|
|
|
H --> T[返回正常模式]
|
|
M --> T
|
|
T --> B
|
|
S --> B
|
|
```
|
|
|
|
## 数据流图
|
|
|
|
```mermaid
|
|
flowchart LR
|
|
A[用户点击消账] --> B[selectionMode[merchantId] = true]
|
|
B --> C[显示选择界面]
|
|
|
|
C --> D[用户选择订单]
|
|
D --> E[selectedOrders[merchantId] 更新]
|
|
E --> F[计算选中数量和金额]
|
|
F --> G[更新按钮状态]
|
|
|
|
G --> H[点击进行消账]
|
|
H --> I[获取选中订单数据]
|
|
I --> J[调用消账API]
|
|
J --> K[消账完成]
|
|
K --> L[selectionMode[merchantId] = false]
|
|
L --> M[刷新页面数据]
|
|
```
|
|
|
|
## 组件状态管理
|
|
|
|
```mermaid
|
|
stateDiagram-v2
|
|
[*] --> NormalMode
|
|
NormalMode --> SelectionMode: 点击消账按钮
|
|
SelectionMode --> NormalMode: 点击取消
|
|
SelectionMode --> NormalMode: 消账完成
|
|
SelectionMode --> SelectionMode: 选择/取消选择订单
|
|
SelectionMode --> SelectionMode: 全选/取消全选
|
|
|
|
state SelectionMode {
|
|
[*] --> NoSelection
|
|
NoSelection --> HasSelection: 选择订单
|
|
HasSelection --> NoSelection: 取消选择所有订单
|
|
HasSelection --> HasSelection: 继续选择订单
|
|
}
|
|
```
|
|
|
|
## 条件判断逻辑
|
|
|
|
```mermaid
|
|
flowchart TD
|
|
A[订单点击事件] --> B{是否在选择模式?}
|
|
B -->|否| C[忽略点击]
|
|
B -->|是| D{订单状态是否为未结或逾期?}
|
|
D -->|否| E[忽略点击]
|
|
D -->|是| F{订单是否已选中?}
|
|
F -->|是| G[取消选中订单]
|
|
F -->|否| H[选中订单]
|
|
G --> I[更新选中列表]
|
|
H --> I
|
|
I --> J[更新UI显示] |