9.1 KiB

Raw Permalink Blame History

微信小程序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="...">) 切换列表视图。

菜单配置:

订单审批 (icon: notes-o) -> 对应 List 组件
采购审批 (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 通用响应格式

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 订单相关

// 订单信息
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 采购相关

// 采购单列表项
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 页面，引入抽屉菜单切换 "订单审批" 和 "采购审批"。

9.1 KiB Raw Permalink Blame History Unescape Escape

微信小程序H5审批系统 - 概要设计文档

1. 项目概述

1.1 项目背景

1.2 项目目标

2. 技术架构

2.1 技术栈选择

2.2 项目结构

3. 功能模块设计

3.0 主页面模块（审批中心）

3.1 订单审批列表模块

3.2 订单详情页面模块

3.3 采购审批列表模块

3.4 采购详情页面模块

4. 数据接口规范

4.1 通用响应格式

4.2 核心API接口

4.2.1 认证 (Auth)

4.2.2 订单 (Order)

4.2.3 采购 (Purchase)

5. 数据模型 (TypeScript Types)

5.1 订单相关

5.2 采购相关

6. 部署与环境

6.1 环境变量

6.2 微信小程序适配

7. 更新日志

v1.4 - 2026-01-06 (Current)

v1.3 - 2025-12-01

v1.2 - 2025-12-01

v1.1 - 2025-12-01

9.1 KiB

Raw Permalink Blame History