273 lines
9.1 KiB
Markdown
273 lines
9.1 KiB
Markdown
# 微信小程序H5审批系统 - 概要设计文档
|
||
|
||
## 1. 项目概述
|
||
|
||
### 1.1 项目背景
|
||
开发一个运行在微信小程序WebView中的H5应用，主要用于处理审批流程，包括列表查看、详情展示和审批操作。
|
||
|
||
### 1.2 项目目标
|
||
- 提供流畅的审批流程体验
|
||
- 适配微信小程序WebView环境
|
||
- 支持移动端友好的界面设计
|
||
- 高效的接口调用和数据展示
|
||
|
||
## 2. 技术架构
|
||
|
||
### 2.1 技术栈选择
|
||
- **前端框架**: Vue 3.3.4 + TypeScript
|
||
- **构建工具**: Vite 4.4.9
|
||
- **UI组件库**: Vant 4.6.6 (专为移动端设计)
|
||
- **HTTP客户端**: Axios 1.5.0
|
||
- **路由管理**: Vue Router 4.2.4
|
||
- **状态管理**: Pinia 2.1.6
|
||
- **样式预处理器**: SCSS (Sass)
|
||
- **PDF预览**: vue-pdf-embed + pdfjs-dist
|
||
|
||
### 2.2 项目结构
|
||
```
|
||
oms_vue/
|
||
├── public/
|
||
├── src/
|
||
│ ├── api/ # API接口管理
|
||
│ │ ├── auth.ts # 认证接口
|
||
│ │ ├── order.ts # 订单相关接口
|
||
│ │ ├── purchase.ts # 采购相关接口
|
||
│ │ └── todo.ts # 待办相关接口
|
||
│ ├── router/ # 路由配置
|
||
│ ├── store/ # 状态管理
|
||
│ │ ├── auth.ts # 认证状态
|
||
│ │ ├── order.ts # 订单状态
|
||
│ │ └── purchase.ts # 采购状态
|
||
│ ├── styles/ # 全局样式
|
||
│ ├── types/ # TypeScript类型定义
|
||
│ ├── utils/ # 工具函数 (http封装等)
|
||
│ ├── views/ # 页面组件
|
||
│ │ ├── Home/ # 审批中心主页 (含抽屉菜单)
|
||
│ │ ├── List/ # 订单审批列表组件
|
||
│ │ ├── Purchase/ # 采购审批列表组件
|
||
│ │ ├── Detail/ # 订单详情页面
|
||
│ │ ├── PurchaseDetail/# 采购详情页面
|
||
│ │ └── Login/ # 登录页面
|
||
│ ├── App.vue
|
||
│ └── main.ts
|
||
├── .env.development # 开发环境配置
|
||
├── .env.production # 生产环境配置
|
||
├── package.json
|
||
└── vite.config.ts
|
||
```
|
||
|
||
## 3. 功能模块设计
|
||
|
||
### 3.0 主页面模块（审批中心）
|
||
**功能描述**: 提供左侧抽屉菜单导航，统一管理不同类型的审批入口。
|
||
|
||
**组件位置**: `src/views/Home/index.vue`
|
||
|
||
**页面架构**:
|
||
- **顶部导航栏**: 显示当前菜单标题、菜单图标和退出按钮。
|
||
- **左侧抽屉菜单**: 展示所有审批类型的菜单项（订单审批、采购审批）。
|
||
- **内容区域**: 根据选中的菜单项动态切换显示 `List` (订单列表) 或 `Purchase` (采购列表) 组件。
|
||
|
||
**主要功能**:
|
||
- 抽屉式菜单切换审批类型。
|
||
- 统一的退出登录功能。
|
||
- 动态组件 (`<component :is="...">`) 切换列表视图。
|
||
|
||
**菜单配置**:
|
||
1. **订单审批** (icon: notes-o) -> 对应 `List` 组件
|
||
2. **采购审批** (icon: shopping-cart-o) -> 对应 `Purchase` 组件
|
||
|
||
### 3.1 订单审批列表模块
|
||
**功能描述**: 采用双Tab设计，支持查看待审批和已审批两种状态的订单列表。
|
||
|
||
**组件位置**: `src/views/List/index.vue`
|
||
|
||
**Tab设计**:
|
||
- **Tab1 - 待审批**: 展示用户需要审批的订单。支持按"订单编号"、"客户名称"搜索。
|
||
- **Tab2 - 已审批**: 展示用户已审批的历史记录。支持按"合同名称"搜索。
|
||
|
||
**数据展示**:
|
||
- **待审批**: 订单编号、项目名称、客户名称、订单金额、创建时间。
|
||
- **已审批**: 合同编号、合同名称、流程名称、发起人、审批时间、审批状态、审批意见。
|
||
|
||
**接口定义**:
|
||
- **待审批列表**: `POST /project/order/list`
|
||
- **已审批列表**: `POST /flow/completed/list`
|
||
|
||
### 3.2 订单详情页面模块
|
||
**功能描述**: 展示订单详细信息、附件、审批历史，并提供审批操作。
|
||
|
||
**组件位置**: `src/views/Detail/index.vue`
|
||
**路由**: `/detail/:id`
|
||
|
||
**主要功能**:
|
||
- **项目/订单信息**: 客户信息、金额、相关人员等。
|
||
- **产品明细**: 软件、硬件、维保产品列表。
|
||
- **附件查看**: 合同附件、配置附件等。
|
||
- **审批历史**: 展示审批流转记录。
|
||
- **审批操作**: 通过、驳回、填写意见。
|
||
|
||
**接口定义**:
|
||
- **获取详情**: `GET /project/order/h5/approve/{id}`
|
||
- **提交审批**: `POST /project/order/order/approve`
|
||
|
||
### 3.3 采购审批列表模块
|
||
**功能描述**: 采用双Tab设计，支持查看待审批和已审批的采购单。
|
||
|
||
**组件位置**: `src/views/Purchase/index.vue`
|
||
|
||
**Tab设计**:
|
||
- **Tab1 - 待审批**: 展示待审批采购单。支持按"采购单号"搜索。
|
||
- **Tab2 - 已审批**: 展示已审批采购记录。支持按"合同名称"搜索。
|
||
|
||
**接口定义**:
|
||
- **待审批列表**: `GET /sip/purchaseorder/approveList`
|
||
- **已审批列表**: `POST /flow/completed/list` (参数 `processKeyList` 包含 `purchase_order_online` 等)
|
||
|
||
### 3.4 采购详情页面模块
|
||
**功能描述**: 展示采购单详细信息和产品列表，支持审批操作。
|
||
|
||
**组件位置**: `src/views/PurchaseDetail/index.vue`
|
||
**路由**: `/purchase-detail/:id` (id为采购单号 purchaseNo)
|
||
|
||
**页面架构**:
|
||
- **Tab1 - 订单信息**: 采购单号、供应商、金额、付款方式、仓库等基本信息。
|
||
- **Tab2 - 采购列表**: 采购产品明细（型号、描述、数量、单价、小计）。
|
||
- **底部操作栏**: 审批通过/驳回按钮。
|
||
|
||
**接口定义**:
|
||
- **获取详情**: `GET /sip/purchaseorder/code/{purchaseNo}`
|
||
- **提交审批**: `POST /flow/todo/approve`
|
||
- **审批历史**: `POST /flow/completed/all/list`
|
||
|
||
## 4. 数据接口规范
|
||
|
||
### 4.1 通用响应格式
|
||
```typescript
|
||
interface ApiResponse<T> {
|
||
code: number; // 0 表示成功
|
||
msg: string | null;
|
||
rows: T; // 列表数据通常在这里 (注意：部分接口可能在 data 字段)
|
||
total?: number; // 分页总数
|
||
}
|
||
```
|
||
|
||
### 4.2 核心API接口
|
||
|
||
#### 4.2.1 认证 (Auth)
|
||
- `POST /login`: 用户登录 (FormData: username, password, rememberMe)
|
||
|
||
#### 4.2.2 订单 (Order)
|
||
- `POST /project/order/list`: 获取待审批订单列表
|
||
- 参数: `approve="approve"`, `page`, `pageSize`, `keyword`
|
||
- `POST /flow/completed/list`: 获取已审批订单列表
|
||
- 参数: `page`, `pageSize`, `businessName`, `processKeyList`
|
||
- `GET /project/order/h5/approve/{id}`: 获取订单详情
|
||
- `POST /project/order/order/approve`: 提交订单审批
|
||
- 参数: `todoId`, `approveStatus`, `approveOpinion`, `variables`, `taxRateData`
|
||
|
||
#### 4.2.3 采购 (Purchase)
|
||
- `GET /sip/purchaseorder/approveList`: 获取采购待审批列表
|
||
- 参数: `page`, `pageSize`, `keyword`
|
||
- `POST /flow/completed/list`: 获取采购已审批列表 (复用流程接口)
|
||
- 参数: `processKeyList` (如 `['purchase_order_online']`)
|
||
- `GET /sip/purchaseorder/code/{purchaseNo}`: 获取采购详情
|
||
- `POST /flow/todo/approve`: 提交采购审批 (注意与订单审批接口不同)
|
||
- `POST /flow/completed/all/list`: 获取采购审批历史
|
||
|
||
## 5. 数据模型 (TypeScript Types)
|
||
|
||
### 5.1 订单相关
|
||
```typescript
|
||
// 订单信息
|
||
interface Order {
|
||
id: number;
|
||
orderCode: string;
|
||
projectName: string;
|
||
customerName: string;
|
||
shipmentAmount: number;
|
||
orderStatus: '0' | '1' | '2';
|
||
// ... 其他字段
|
||
}
|
||
|
||
// 订单详情响应
|
||
interface OrderDetailResponse {
|
||
projectOrderInfo: Order & {
|
||
contractFileList: AttachmentFile[];
|
||
softwareProjectProductInfoList: ProductInfo[];
|
||
hardwareProjectProductInfoList: ProductInfo[];
|
||
// ...
|
||
};
|
||
approveLog: ApprovalRecord[];
|
||
user: UserInfo;
|
||
}
|
||
```
|
||
|
||
### 5.2 采购相关
|
||
```typescript
|
||
// 采购单列表项
|
||
interface Purchase {
|
||
id: number;
|
||
purchaseNo: string;
|
||
approveStatus: string;
|
||
vendorName: string;
|
||
ownerName: string;
|
||
totalAmount: number;
|
||
createTime: string;
|
||
}
|
||
|
||
// 采购详情
|
||
interface PurchaseDetail {
|
||
id: number;
|
||
purchaseNo: string;
|
||
purchaserName: string;
|
||
warehouseName: string;
|
||
payMethod: string;
|
||
omsPurchaseOrderItemList: PurchaseOrderItem[];
|
||
// ...
|
||
}
|
||
|
||
// 采购产品项
|
||
interface PurchaseOrderItem {
|
||
productCode: string;
|
||
productModel: string;
|
||
productDescription: string;
|
||
quantity: number;
|
||
price: number;
|
||
}
|
||
```
|
||
|
||
## 6. 部署与环境
|
||
|
||
### 6.1 环境变量
|
||
- `VITE_API_BASE_URL`: 后端API地址
|
||
- `VITE_FILE_BASE_URL`: 文件服务器地址 (用于图片/PDF预览)
|
||
|
||
### 6.2 微信小程序适配
|
||
- 使用 `viewport` meta 标签禁止缩放。
|
||
- 检测 `window.__wxjs_environment` 识别环境。
|
||
- 使用 `@vant/touch-emulator` 在桌面端调试触摸事件。
|
||
|
||
## 7. 更新日志
|
||
|
||
### v1.4 - 2026-01-06 (Current)
|
||
**文档同步更新**
|
||
- 根据实际代码库结构和API实现更新了概要设计文档。
|
||
- 明确了订单审批与采购审批使用不同的提交接口。
|
||
- 完善了采购模块的接口定义和数据模型描述。
|
||
- 确认了项目采用 Vue 3.3 + Vite 4.4 + Vant 4.6 技术栈。
|
||
|
||
### v1.3 - 2025-12-01
|
||
**功能完善：实现采购详情页面**
|
||
- 独立实现采购详情页面 `PurchaseDetail`。
|
||
- 对接采购详情接口和状态管理。
|
||
|
||
### v1.2 - 2025-12-01
|
||
**功能实现：对接采购审批接口**
|
||
- 实现采购待审批列表。
|
||
- 预留已审批列表对接逻辑。
|
||
|
||
### v1.1 - 2025-12-01
|
||
**架构优化：添加左侧抽屉菜单**
|
||
- 重构 `Home` 页面，引入抽屉菜单切换 "订单审批" 和 "采购审批"。
|