OMS_H5/概要设计文档.md

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

## 1. 项目概述

### 1.1 项目背景
开发一个运行在微信小程序WebView中的H5应用，主要用于处理审批流程，包括列表查看、详情展示和审批操作。

### 1.2 项目目标
- 提供流畅的审批流程体验
- 适配微信小程序WebView环境
- 支持移动端友好的界面设计
- 高效的接口调用和数据展示

## 2. 技术架构

### 2.1 技术栈选择
- **前端框架**: Vue 3 + TypeScript
- **构建工具**: Vite
- **UI组件库**: Vant 4 (专为移动端设计)
- **HTTP客户端**: Axios
- **路由管理**: Vue Router 4
- **状态管理**: Pinia
- **样式预处理器**: SCSS

### 2.2 项目结构
```
oms_h5/
├── public/
│   └── index.html
├── src/
│   ├── api/              # API接口管理
│   ├── components/       # 公共组件
│   ├── views/           # 页面组件
│   │   ├── List/        # 列表页面
│   │   └── Detail/      # 详情页面
│   ├── store/           # 状态管理
│   ├── utils/           # 工具函数
│   ├── types/           # TypeScript类型定义
│   └── styles/          # 全局样式
├── package.json
└── vite.config.ts
```

## 3. 功能模块设计

### 3.1 列表页面模块
**功能描述**: 采用双Tab设计，支持查看待审批和已审批两种状态的订单列表

**页面架构**: 
- **Tab1 - 待审批**: 展示当前用户需要审批的订单列表
- **Tab2 - 已审批**: 展示用户已完成审批的历史记录

**主要功能**:
- 双Tab切换界面，独立状态管理
- 支持关键词搜索（待审批：订单编号、客户名称；已审批：合同名称）
- 无限滚动分页加载
- 下拉刷新功能
- 点击跳转详情页（已审批为只读模式）

#### 3.1.1 待审批Tab

**数据展示字段**:
- 订单编号（orderCode）
- 项目名称（projectName）
- 客户名称（customerName）
- 订单金额（shipmentAmount）
- 创建时间（createTime）
- 订单状态（固定显示"待审批"）

**交互行为**:
- 搜索框支持订单编号、客户名称搜索
- 列表项点击跳转详情页（可审批操作）
- 上拉加载更多，下拉刷新

#### 3.1.2 已审批Tab

**数据展示字段**:
- 合同编号（businessKey）
- 合同名称（businessName）
- 流程名称（processName）
- 发起人（applyUserName）
- 审批时间（approveTime）
- 审批状态（approveStatus: 2-驳回，3-通过，其他-提交）
- 审批意见（approveOpinion）

**交互行为**:
- 搜索框支持合同名称搜索
- 列表项点击跳转详情页（只读模式，无审批按钮）
- Tab切换时自动清空搜索关键词
- 上拉加载更多，下拉刷新

**接口需求**:
```typescript
// 获取待审批订单列表
POST /project/order/list
参数: {
  approve: "approve",
  page: number,
  pageSize: number,
  keyword?: string
}

// 获取已审批列表
POST /flow/completed/list
参数: {
  page: number,
  pageSize: number,
  businessName?: string
}
响应结果示例:{
    "total": 1,
        "rows": [
        {
            "createBy": "1",
            "createTime": "2025-05-30",
            "updateBy": "1",
            "updateTime": "2025-08-25 16:52:35",
            "remark": "",
            "id": 92,
            "projectId": 92,
            "projectCode": "V004592",
            "projectName": "黑龙江省佳木斯附属第一医院2点胖终端云桌面项目",
            "versionCode": "2",
            "industryType": "zf",
            "bgProperty": "SY",
            "province": "黑龙江省",
            "orderCode": "ZGXS-20250530HLJ001-VDI",
            "customerName": "佳木斯大学附属第一医院",
            "customerCode": "CU-HLJ-0002",
            "customerPhone": "13352549898",
            "customerUserName": "刘芸芸1111",
            "shipmentAmount": 754169.99,
            "orderStatus": "1",
            "duty": "1",
            "dutyName": "SIP管理员",
            "agentName": "北京",
            "agentCode": "BJS",
            "notifier": "",
            "city": "",
            "businessPerson": "严浩",
            "businessEmail": "",
            "deleteFileId": null,
            "businessPhone": "13512345457",
            "currencyType": "rmb",
            "partnerCode": "AGT-HLJ-0001",
            "partnerName": "哈尔滨惠普天地电子有限公司",
            "projectPartnerName": "哈尔滨惠普天地电子有限公司",
            "productCodeList": null,
            "actualPurchaseAmount": 777314.52,
            "deliveryTime": "2025-06-04",
            "deliveryTimeStart": null,
            "deliveryTimeEnd": null,
            "estimatedOrderTime": "2025-05-30",
            "estimatedOrderTimeStart": null,
            "estimatedOrderTimeEnd": null,
            "orderEndTime": "2025-08-23",
            "orderEndTimeStart": null,
            "orderEndTimeEnd": null,
            "updateTimeStart": null,
            "updateTimeEnd": null,
            "productSn": null,
            "companyDelivery": "",
            "notifierEmail": "",
            "notifierPhone": "232",
            "notifierAddress": "江西省南昌市高新区艾溪湖北路88号恒大中心A座1209室",
            "dutyEmail": "mula.liu@163.com",
            "dutyPhone": "18980500203",
            "orderChannel": "1",
            "partnerEmail": "",
            "partnerUserName": "张树志",
            "partnerPhone": "13936302299",
            "systemUserId": "101",
            "level": "02",
            "processType": "0",
            "processTemplate": "0",
            "deliveryStatus": "1",
            "signStatus": "0",
            "outerStatus": "2",
            "approveTime": "2025-08-19 16:46:26",
            "approveTimeStart": null,
            "approveTimeEnd": null,
            "discountFold": 0.985,
            "supplier": "紫光汇智信息技术有限公司",
            "approve": null,
            "contractFileList": null,
            "configFileList": null,
            "contractTableData": null,
            "softwareProjectProductInfoList": null,
            "hardwareProjectProductInfoList": null,
            "maintenanceProjectProductInfoList": null
        }
    ],
        "code": 0,
        "msg": null
}
```

### 3.2 详情页面模块
**功能描述**: 展示工单详细信息和审批操作

**主要功能**:
- 工单详情信息展示
- 审批历史记录
- 附件预览（图片、文档）
- 审批操作按钮

**接口需求**:
```typescript
//获取已审批列表
POST /flow/completed/list
响应结果示例：{
    "code": 0,
        "msg": null,
        "rows": [
        {
            "allApproveUserName": "chenhao",
            "applyTime": "2025-09-19 17:06",
            "applyUserName": "chenhao",
            "approveOpinion": "经审查无误，予以批准",
            "approveStatus": 3,
            "approveTime": "2025-09-19 17:07",
            "approveUser": "101",
            "approveUserName": "chenhao",
            "businessId": 257,
            "businessKey": "ZGXV-20250919BJS001",
            "businessName": "测试-重庆xx学校云桌面项目",
            "createBy": null,
            "createTime": null,
            "extendField1": "1",
            "extendField2": null,
            "formKey": null,
            "id": null,
            "nextAllApproveUserName": "chenhao",
            "processInstanceId": "58ce6889-9536-11f0-8f98-00ff08deec4d",
            "processKey": "order_approve_online",
            "processName": "订单审批流程",
            "recoveryType": null,
            "remark": null,
            "roleName": "商务,鼎盛",
            "taskId": "fb6c16dd-9537-11f0-8f98-00ff08deec4d",
            "taskName": "领导1",
            "taxRateData": null,
            "todoId": "1968965000342323200",
            "updateBy": null,
            "updateTime": null,
            "variables": null
        }
        ]}
//获取工单详情
GET /project/order/h5/approve/:id
响应结果示例:{
    "msg": "操作成功",
        "code": 0,
        "data": {
        "todo": null,
            "approveLog": [
            {
                "createBy": null,
                "createTime": null,
                "updateBy": null,
                "updateTime": null,
                "remark": null,
                "id": null,
                "todoId": "1959901714317623296",
                "businessKey": "ZGXS-20250530HLJ001-VDI",
                "processKey": "order_approve_online",
                "processName": "订单审批流程",
                "taskName": "售前",
                "approveUserName": "SIP管理员",
                "allApproveUserName": "SIP管理员",
                "nextAllApproveUserName": "yeyuhao",
                "approveUser": "1",
                "applyUserName": "SIP管理员",
                "applyTime": "2025-08-25 16:52",
                "extendField1": "2",
                "extendField2": null,
                "taskId": "d9112b0c-8190-11f0-9558-00ff5af4ad6e",
                "processInstanceId": "d9073ff2-8190-11f0-9558-00ff5af4ad6e",
                "approveOpinion": null,
                "approveStatus": null,
                "approveTime": "2025-08-25 16:52",
                "formKey": null,
                "roleName": "超级管理员,鼎盛",
                "recoveryType": null,
                "variables": null
            }
        ],
            "projectOrderInfo": {
            "createBy": "1",
                "createTime": "2025-05-30",
                "updateBy": "1",
                "updateTime": "2025-08-25 16:52:35",
                "remark": "",
                "id": 92,
                "projectId": 92,
                "projectCode": "V004592",
                "projectName": "黑龙江省佳木斯附属第一医院2点胖终端云桌面项目",
                "versionCode": "2",
                "industryType": "zf",
                "bgProperty": "SY",
                "province": "黑龙江省",
                "orderCode": "ZGXS-20250530HLJ001-VDI",
                "customerName": "佳木斯大学附属第一医院",
                "customerCode": "CU-HLJ-0002",
                "customerPhone": "13352549898",
                "customerUserName": "刘芸芸1111",
                "shipmentAmount": 754169.99,
                "orderStatus": "1",
                "duty": "1",
                "dutyName": "SIP管理员",
                "agentName": "北京",
                "agentCode": "BJS",
                "notifier": "",
                "city": "",
                "businessPerson": "严浩",
                "businessEmail": "",
                "deleteFileId": null,
                "businessPhone": "13512345457",
                "currencyType": "rmb",
                "partnerCode": "AGT-HLJ-0001",
                "partnerName": "哈尔滨惠普天地电子有限公司",
                "projectPartnerName": "哈尔滨惠普天地电子有限公司",
                "productCodeList": null,
                "actualPurchaseAmount": 777314.52,
                "deliveryTime": "2025-06-04",
                "deliveryTimeStart": null,
                "deliveryTimeEnd": null,
                "estimatedOrderTime": "2025-05-30",
                "estimatedOrderTimeStart": null,
                "estimatedOrderTimeEnd": null,
                "orderEndTime": "2025-08-23",
                "orderEndTimeStart": null,
                "orderEndTimeEnd": null,
                "updateTimeStart": null,
                "updateTimeEnd": null,
                "productSn": null,
                "companyDelivery": "",
                "notifierEmail": "",
                "notifierPhone": "232",
                "notifierAddress": "江西省南昌市高新区艾溪湖北路88号恒大中心A座1209室",
                "dutyEmail": "mula.liu@163.com",
                "dutyPhone": "18980500203",
                "orderChannel": "1",
                "partnerEmail": "",
                "partnerUserName": "张树志",
                "partnerPhone": "13936302299",
                "systemUserId": "101",
                "level": "02",
                "processType": "0",
                "processTemplate": "0",
                "deliveryStatus": "1",
                "signStatus": "0",
                "outerStatus": "2",
                "approveTime": "2025-08-19 16:46:26",
                "approveTimeStart": null,
                "approveTimeEnd": null,
                "discountFold": 0.985,
                "supplier": "紫光汇智信息技术有限公司",
                "approve": null,
                "contractFileList": [
                {
                    "createBy": null,
                    "createTime": null,
                    "updateBy": null,
                    "updateTime": null,
                    "remark": null,
                    "id": 27,
                    "orderId": 92,
                    "fileName": "AGT-AHS-0001.jpg",
                    "uploadUser": "101",
                    "uploadUserName": "chenhao",
                    "uploadTime": "2025-07-15",
                    "filePath": "/profile/2025/07/15/AGT-AHS-0001_20250715162608A004.jpg",
                    "fileType": "2",
                    "fileSort": "1",
                    "fileVersionCode": "2"
                },
                {
                    "createBy": null,
                    "createTime": null,
                    "updateBy": null,
                    "updateTime": null,
                    "remark": null,
                    "id": 28,
                    "orderId": 92,
                    "fileName": "微信图片_2025-07-08_102450_731.png",
                    "uploadUser": "101",
                    "uploadUserName": "chenhao",
                    "uploadTime": "2025-07-15",
                    "filePath": "/profile/2025/07/15/微信图片_2025-07-08_102450_731_20250715163137A005.png",
                    "fileType": "2",
                    "fileSort": "3",
                    "fileVersionCode": "2"
                },
                {
                    "createBy": null,
                    "createTime": null,
                    "updateBy": null,
                    "updateTime": null,
                    "remark": null,
                    "id": 30,
                    "orderId": 92,
                    "fileName": "AGT-AHS-0001 (4) (1).jpg",
                    "uploadUser": "101",
                    "uploadUserName": "chenhao",
                    "uploadTime": "2025-07-17",
                    "filePath": "/profile/2025/07/17/AGT-AHS-0001 (4) (1)_20250717145740A001.jpg",
                    "fileType": "2",
                    "fileSort": "0",
                    "fileVersionCode": "2"
                }
            ],
                "configFileList": null,
                "contractTableData": {
                "2": [
                    {
                        "createBy": null,
                        "createTime": null,
                        "updateBy": null,
                        "updateTime": null,
                        "remark": null,
                        "id": 30,
                        "orderId": 92,
                        "fileName": "AGT-AHS-0001 (4) (1).jpg",
                        "uploadUser": "101",
                        "uploadUserName": "chenhao",
                        "uploadTime": "2025-07-17",
                        "filePath": "/profile/2025/07/17/AGT-AHS-0001 (4) (1)_20250717145740A001.jpg",
                        "fileType": "2",
                        "fileSort": "0",
                        "fileVersionCode": "2"
                    },
                    {
                        "createBy": null,
                        "createTime": null,
                        "updateBy": null,
                        "updateTime": null,
                        "remark": null,
                        "id": 27,
                        "orderId": 92,
                        "fileName": "AGT-AHS-0001.jpg",
                        "uploadUser": "101",
                        "uploadUserName": "chenhao",
                        "uploadTime": "2025-07-15",
                        "filePath": "/profile/2025/07/15/AGT-AHS-0001_20250715162608A004.jpg",
                        "fileType": "2",
                        "fileSort": "1",
                        "fileVersionCode": "2"
                    },
                    {
                        "createBy": null,
                        "createTime": null,
                        "updateBy": null,
                        "updateTime": null,
                        "remark": null,
                        "id": -1,
                        "orderId": null,
                        "fileName": "（请上传现金折扣审批邮件信息）.pdf/.jpg/.png",
                        "uploadUser": null,
                        "uploadUserName": null,
                        "uploadTime": null,
                        "filePath": null,
                        "fileType": null,
                        "fileSort": "2",
                        "fileVersionCode": null
                    },
                    {
                        "createBy": null,
                        "createTime": null,
                        "updateBy": null,
                        "updateTime": null,
                        "remark": null,
                        "id": 28,
                        "orderId": 92,
                        "fileName": "微信图片_2025-07-08_102450_731.png",
                        "uploadUser": "101",
                        "uploadUserName": "chenhao",
                        "uploadTime": "2025-07-15",
                        "filePath": "/profile/2025/07/15/微信图片_2025-07-08_102450_731_20250715163137A005.png",
                        "fileType": "2",
                        "fileSort": "3",
                        "fileVersionCode": "2"
                    }
                ]
            },
            "softwareProjectProductInfoList": [
                {
                    "createBy": null,
                    "createTime": null,
                    "updateBy": null,
                    "updateTime": null,
                    "remark": "",
                    "id": 515,
                    "projectId": 92,
                    "productBomCode": "3130A4N9",
                    "productName": "VDI-ONEStor",
                    "model": "VDI-ONEStor-upgrade",
                    "productCode": null,
                    "productDesc": "H3C VDI云桌面分布式存储软件(VDI-ONEStor)-块存储标准版升级企业版License-管理2个物理CPU",
                    "quantity": 5,
                    "cataloguePrice": 62500.00,
                    "catalogueAllPrice": 312500.00,
                    "price": 53756.53,
                    "allPrice": 268782.65,
                    "allPriceDisCount": null,
                    "guidanceDiscount": 0.0800,
                    "vendorCode": "P001",
                    "discount": 0.8601,
                    "type": "1",
                    "value": ""
                },
                {
                    "createBy": null,
                    "createTime": null,
                    "updateBy": null,
                    "updateTime": null,
                    "remark": "",
                    "id": 516,
                    "projectId": 92,
                    "productBomCode": "3130A4N9",
                    "productName": "VDI-ONEStor",
                    "model": "VDI-ONEStor-upgrade",
                    "productCode": null,
                    "productDesc": "H3C VDI云桌面分布式存储软件(VDI-ONEStor)-块存储标准版升级企业版License-管理2个物理CPU",
                    "quantity": 10,
                    "cataloguePrice": 62500.00,
                    "catalogueAllPrice": 625000.00,
                    "price": 47783.58,
                    "allPrice": 477835.80,
                    "allPriceDisCount": null,
                    "guidanceDiscount": 0.0800,
                    "vendorCode": "P001",
                    "discount": 0.7645,
                    "type": "1",
                    "value": ""
                }
            ],
                "hardwareProjectProductInfoList": [
                {
                    "createBy": null,
                    "createTime": null,
                    "updateBy": null,
                    "updateTime": null,
                    "remark": "",
                    "id": 233,
                    "projectId": 92,
                    "productBomCode": "9801A5KA",
                    "productName": "胖终端x86一体机",
                    "model": "C6530V-38-G2",
                    "productCode": "9801H0BA",
                    "productDesc": "H3C C6530V G2 云终端一体机-Intel 6核 2.5GHz/8GB DDR4/256GB SSD/4*USB3.0/2*USB2.0/1*HDMI/23.8寸/1000M/Wi-Fi",
                    "quantity": 2,
                    "cataloguePrice": 39500.00,
                    "catalogueAllPrice": 79000.00,
                    "price": 3774.90,
                    "allPrice": 7549.80,
                    "allPriceDisCount": null,
                    "guidanceDiscount": 0.1000,
                    "vendorCode": "P001",
                    "discount": 0.0956,
                    "type": "2",
                    "value": null
                }
            ],
                "maintenanceProjectProductInfoList": [
                {
                    "createBy": null,
                    "createTime": null,
                    "updateBy": null,
                    "updateTime": null,
                    "remark": "",
                    "id": 518,
                    "projectId": 92,
                    "productBomCode": "8813A3YB",
                    "productName": "现场维保-3Y",
                    "model": "SV-MA-SFT-3Y",
                    "productCode": null,
                    "productDesc": "H3C 软件技术支持服务（三年）",
                    "quantity": 2,
                    "cataloguePrice": 1.00,
                    "catalogueAllPrice": 2.00,
                    "price": 0.87,
                    "allPrice": 1.74,
                    "allPriceDisCount": null,
                    "guidanceDiscount": 0.3000,
                    "vendorCode": null,
                    "discount": 0.8700,
                    "type": "11",
                    "value": "3"
                }
            ]
        },
        "user": {
            "createBy": "admin",
                "createTime": "2025-04-10 15:57:30",
                "updateBy": "",
                "updateTime": "2025-08-20 09:05:21",
                "remark": "管理员",
                "userId": 1,
                "userIdList": null,
                "deptId": 103,
                "parentId": null,
                "roleId": null,
                "loginName": "admin",
                "userName": "SIP管理员",
                "userType": "00",
                "email": "mula.liu@163.com",
                "phonenumber": "18980500203",
                "sex": "0",
                "avatar": "/profile/avatar/2025/04/11/blob_20250411032004A001.png",
                "status": "0",
                "delFlag": "0",
                "loginIp": "127.0.0.1",
                "loginDate": "2025-08-20 09:05:21",
                "pwdUpdateDate": "2025-04-11 14:54:45",
                "dept": {
                "createBy": null,
                    "createTime": null,
                    "updateBy": null,
                    "updateTime": null,
                    "remark": null,
                    "deptId": 103,
                    "parentId": 101,
                    "ancestors": "0,100,101",
                    "deptName": "软件开发事业部",
                    "orderNum": 1,
                    "leader": "",
                    "phone": null,
                    "email": null,
                    "status": "0",
                    "delFlag": null,
                    "parentName": null
            },
            "roles": [
                {
                    "createBy": null,
                    "createTime": null,
                    "updateBy": null,
                    "updateTime": null,
                    "remark": null,
                    "roleId": 1,
                    "roleName": "超级管理员",
                    "roleKey": "admin",
                    "roleSort": "1",
                    "dataScope": "1",
                    "status": "0",
                    "delFlag": null,
                    "flag": false,
                    "menuIds": null,
                    "deptIds": null,
                    "permissions": null,
                    "admin": true
                },
                {
                    "createBy": null,
                    "createTime": null,
                    "updateBy": null,
                    "updateTime": null,
                    "remark": null,
                    "roleId": 104,
                    "roleName": "鼎盛",
                    "roleKey": "ds",
                    "roleSort": "1",
                    "dataScope": "1",
                    "status": "0",
                    "delFlag": null,
                    "flag": false,
                    "menuIds": null,
                    "deptIds": null,
                    "permissions": [],
                    "admin": false
                }
            ],
                "roleIds": null,
                "postIds": null,
                "admin": true
        }
    }
}
```

### 3.3 审批操作模块
**功能描述**: 处理审批通过、拒绝等操作

**主要功能**:
- 审批意见输入
- 审批结果提交
- 操作结果反馈

**接口需求**:
```typescript
// 提交审批结果
//审批
POST /project/order/order/approve
参数:{
    allApproveUserName?: string;
    /**
     * 发起时间
     */
    applyTime?: string;
    /**
     * 发起人姓名
     */
    applyUserName?: string;
    /**
     * 审批意见
     */
    approveOpinion?: string;
    /**
     * 审批结果 3 通过 2 驳回 1待审批
     */
    approveStatus?: number;
    approveTime?: string;
    approveUser?: string;
    /**
     * 审批人姓名
     */
    approveUserName?: string;
    /**
     * 业务主键
     */
    businessKey?: string;
    /**
     * 创建者
     */
    createBy?: string;
    /**
     * 创建时间
     */
    createTime?: string;
    /**
     * 扩展字段1
     */
    extendField1?: string;
    /**
     * 扩展字段2
     */
    extendField2?: string;
    formKey?: string;
    id?: number;
    nextAllApproveUserName?: string;
    processInstanceId?: string;
    /**
     * 流程key
     */
    processKey?: string;
    /**
     * 流程名称
     */
    processName?: string;
    recoveryType?: number;
    /**
     * 备注
     */
    remark?: string;
    roleName?: string;
    taskId?: string;
    /**
     * 任务名称
     */
    taskName?: string;
    /**
     * 流程id
     */
    todoId?: string;
    /**
     * 更新者
     */
    updateBy?: string;
    /**
     * 更新时间
     */
    updateTime?: string;
    [property: string]: any;
}
```

## 4. 微信小程序适配

### 4.1 WebView适配
- 设置viewport适配移动端
- 处理微信小程序的安全域名限制
- 适配微信小程序的返回机制

### 4.2 微信JS-SDK集成
- 配置微信JS-SDK
- 实现分享功能
- 处理网络状态监听

### 4.3 样式适配
- 响应式设计
- 安全区域适配（刘海屏等）
- 深色模式支持

## 5. 数据流设计

### 5.1 数据状态管理
```typescript
interface AppState {
  user: UserInfo;
  orderList: Order[];
  currentOrder: Order | null;
  loading: boolean;
}
```

### 5.2 API数据格式规范
```typescript
interface ApiResponse<T> {
  code: number;
  message: string;
  data: T;
}

interface Order {
  id: string;
  title: string;
  status: 'pending' | 'approved' | 'rejected';
  createdAt: string;
  applicant: string;
  content: string;
  attachments?: string[];
  approvalHistory: ApprovalRecord[];
}

interface ApprovalRecord {
  id: string;
  approver: string;
  action: 'approve' | 'reject';
  comment: string;
  createdAt: string;
}
```

## 6. 页面路由设计

```typescript
const routes = [
  {
    path: '/',
    redirect: '/list'
  },
  {
    path: '/list',
    name: 'OrderList',
    component: () => import('@/views/List/index.vue')
  },
  {
    path: '/detail/:id',
    name: 'OrderDetail',
    component: () => import('@/views/Detail/index.vue')
  }
]
```

## 7. 性能优化策略

### 7.1 代码层面
- 组件懒加载
- 图片懒加载
- API请求缓存
- 防抖和节流

### 7.2 构建优化
- 代码分割
- 资源压缩
- CDN部署

## 8. 安全考虑

### 8.1 数据安全
- HTTPS通信
- 接口鉴权
- 敏感信息加密

### 8.2 XSS防护
- 输入内容过滤
- CSP策略配置

## 9. 测试策略

### 9.1 单元测试
- 组件测试
- 工具函数测试

### 9.2 集成测试
- API接口测试
- 页面交互测试

### 9.3 兼容性测试
- 微信小程序WebView测试
- 不同设备适配测试

## 10. 部署方案

### 10.1 开发环境
- 本地开发服务器
- 热重载支持

### 10.2 生产环境
- 静态资源CDN部署
- 域名HTTPS配置
- 微信小程序业务域名配置

---

**文档版本**: v1.0  
**创建时间**: 2025-08-27  
**负责人**: 开发团队

## 4. 技术架构

### 4.1 技术栈选型

#### 4.1.1 前端技术栈
- **Vue 3.3.4**: 采用Composition API，提供更好的类型支持和逻辑复用
- **TypeScript**: 提供静态类型检查，提高代码质量和开发效率
- **Vite 4.4.9**: 现代化构建工具，提供快速的开发体验
- **Vue Router 4.2.4**: 单页应用路由管理
- **Pinia 2.1.6**: 轻量级状态管理库，替代Vuex
- **Vant 4.6.6**: 移动端UI组件库，适配微信小程序H5
- **Axios 1.5.0**: HTTP请求库，支持请求/响应拦截
- **Sass**: CSS预处理器，提供变量、嵌套等高级功能

#### 4.1.2 开发工具
- **ESLint**: 代码质量检查
- **Prettier**: 代码格式化
- **unplugin-auto-import**: 自动导入Vue、Router、Pinia等API
- **unplugin-vue-components**: 自动导入Vant组件
- **@vant/touch-emulator**: 桌面端触摸事件模拟

### 4.2 项目架构

#### 4.2.1 目录结构
```
src/
├── api/           # API接口层
│   ├── auth.ts    # 认证相关接口
│   └── order.ts   # 订单相关接口
├── router/        # 路由配置
├── store/         # 状态管理
│   ├── auth.ts    # 认证状态
│   └── order.ts   # 订单状态
├── types/         # TypeScript类型定义
├── utils/         # 工具函数
│   ├── http.ts    # HTTP客户端封装
│   └── index.ts   # 通用工具函数
├── views/         # 页面组件
│   ├── Login/     # 登录页
│   ├── List/      # 订单列表页
│   └── Detail/    # 订单详情页
└── styles/        # 全局样式
```

#### 4.2.2 架构设计原则
- **分层架构**: View层 → Store层 → API层 → 后端服务
- **组件化**: 页面拆分为可复用的组件
- **类型安全**: 全面使用TypeScript进行类型约束
- **响应式设计**: 适配不同屏幕尺寸
- **状态管理**: 集中管理应用状态，支持数据持久化

### 4.3 核心模块设计

#### 4.3.1 认证模块 (Auth)
**功能职责**:
- 用户登录/登出
- 认证状态管理
- 路由权限控制
- 会话持久化

**技术实现**:
- Session基于Cookie的认证机制
- localStorage存储认证状态
- 路由守卫实现权限控制
- 支持"记住密码"功能

**关键代码**:
```typescript
// 认证状态管理
interface AuthState {
  token: string | null
  userInfo: any | null
  isAuthenticated: boolean
}

// 路由守卫
router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth !== false)
  const authStore = useAuthStore(store)
  const isAuthenticated = authStore.isAuthenticated || localStorage.getItem('isAuthenticated') === 'true'
  
  if (requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})
```

#### 4.3.2 订单管理模块 (Order)
**功能职责**:
- 双Tab订单列表管理（待审批/已审批）
- 订单详情获取
- 审批操作处理
- 数据状态管理
- 只读模式支持

**技术实现**:
- 双Tab架构，独立状态管理
- 无限滚动加载，支持分页
- 搜索功能（不同Tab对应不同搜索字段）
- 下拉刷新
- 数据缓存机制
- 路由参数控制只读模式

**关键特性**:
- **状态隔离**: 待审批和已审批列表状态完全独立
- **智能搜索**: 根据当前Tab自动切换搜索字段和接口
- **只读模式**: 通过URL参数`readonly=true`控制详情页只读
- **性能优化**: Tab切换时保持各自滚动位置和搜索状态

**数据模型**:
```typescript
interface Order {
  id: number
  projectCode: string
  projectName: string
  customerName: string
  shipmentAmount: number
  orderStatus: OrderStatus
  // ... 其他字段
}

interface OrderDetailResponse {
  projectOrderInfo: Order & {
    contractFileList: AttachmentFile[]
    softwareProjectProductInfoList: ProductInfo[]
    hardwareProjectProductInfoList: ProductInfo[]
    maintenanceProjectProductInfoList: ProductInfo[]
  }
  approveLog: ApprovalRecord[]
  user: UserInfo
}
```

#### 4.3.3 HTTP客户端模块
**功能职责**:
- 统一HTTP请求封装
- 请求/响应拦截
- 错误处理
- 认证token自动添加

**技术实现**:
```typescript
class HttpClient {
  private instance: AxiosInstance
  
  constructor(baseURL: string = '/api') {
    this.instance = axios.create({
      baseURL,
      timeout: 30000,
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      }
    })
    this.setupInterceptors()
  }
  
  private setupInterceptors() {
    // 请求拦截器 - 添加token
    this.instance.interceptors.request.use((config) => {
      const token = localStorage.getItem('token')
      if (token) {
        config.headers.Authorization = `Bearer ${token}`
      }
      return config
    })
    
    // 响应拦截器 - 统一错误处理
    this.instance.interceptors.response.use(
      (response) => response,
      (error) => {
        // 401/302 重定向到登录页
        if (error.response?.status === 401 || error.response?.status === 302) {
          localStorage.removeItem('isAuthenticated')
          window.location.href = '/login'
        }
        return Promise.reject(error)
      }
    )
  }
}
```

### 4.4 微信小程序适配

#### 4.4.1 WebView环境检测
```javascript
// 微信小程序webview适配
if (window.__wxjs_environment === 'miniprogram') {
  console.log('Running in WeChat MiniProgram WebView');
}
```

#### 4.4.2 移动端优化
- **触摸事件**: 使用@vant/touch-emulator在桌面端模拟触摸
- **视口设置**: 固定viewport，禁止缩放
- **防止双指缩放**: JavaScript阻止多点触控事件

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
```

### 4.5 构建和部署

#### 4.5.1 开发环境配置
```javascript
// vite.config.ts
export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:28080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})
```

#### 4.5.2 环境变量配置
- **.env.development**: 开发环境配置
- **.env.production**: 生产环境配置
- **VITE_API_BASE_URL**: API服务地址
- **VITE_FILE_BASE_URL**: 文件服务地址

#### 4.5.3 构建优化
- **代码分割**: 按页面自动分割代码包
- **资源优化**: 静态资源版本化管理
- **TypeScript编译**: 严格类型检查
- **ES2015兼容**: 支持现代浏览器特性

## 5. 接口设计

### 5.1 认证接口

#### 5.1.1 用户登录
**接口地址**: `POST /login`

**请求参数**: FormData格式
```
username: string     // 用户名
password: string     // 密码
rememberMe: boolean  // 记住密码
```

**响应格式**:
```json
{
  "code": 0,
  "msg": "操作成功",
  "data": {
    "token": "jwt_token",
    "userInfo": {...}
  }
}
```

### 5.2 订单接口

#### 5.2.1 获取订单列表
**接口地址**: `POST /project/order/list`

**请求参数**: FormData格式
```
approve: string    // 固定值 "approve"
page: number       // 页码
pageSize: number   // 每页数量
keyword: string    // 搜索关键词(可选)
```

**响应格式**:
```json
{
  "code": 0,
  "msg": "操作成功",
  "data": {
    "total": 100,
    "rows": [...]
  }
}
```

#### 5.2.2 获取订单详情
**接口地址**: `GET /project/order/h5/approve/{id}`

**响应格式**:
```json
{
  "code": 0,
  "msg": "操作成功",
  "data": {
    "projectOrderInfo": {...},
    "approveLog": [...],
    "user": {...}
  }
}
```

#### 5.2.3 获取已审批列表
**接口地址**: `POST /flow/completed/list`

**请求参数**: FormData格式
```
page: number           // 页码
pageSize: number       // 每页数量
businessName: string   // 合同名称搜索(可选)
```

**响应格式**:
```json
{
  "code": 0,
  "msg": "操作成功",
  "data": {
    "total": 100,
    "rows": [
      {
        "allApproveUserName": "chenhao",
        "applyTime": "2025-09-19 17:06",
        "applyUserName": "chenhao",
        "approveOpinion": "经审查无误，予以批准",
        "approveStatus": 3,
        "approveTime": "2025-09-19 17:07",
        "approveUser": "101",
        "approveUserName": "chenhao",
        "businessId": 257,
        "businessKey": "ZGXV-20250919BJS001",
        "businessName": "测试-重庆xx学校云桌面项目",
        "processInstanceId": "58ce6889-9536-11f0-8f98-00ff08deec4d",
        "processKey": "order_approve_online",
        "processName": "订单审批流程",
        "roleName": "商务,鼎盛",
        "taskId": "fb6c16dd-9537-11f0-8f98-00ff08deec4d",
        "taskName": "领导1",
        "todoId": "1968965000342323200"
      }
    ]
  }
}
```

#### 5.2.4 提交审批结果
**接口地址**: `POST /project/order/order/approve`

**请求参数**: FormData格式，支持复杂对象序列化
```
// 基本参数
todoId: string
approveStatus: number  // 1-待审批 2-驳回 3-通过
approveOpinion: string // 审批意见

// 变量参数 (动态)
variables[key]: value

// 税率数据 (数组对象)
taxRateData[0].field: value
```

## 6. 数据模型

### 6.1 核心实体

#### 6.1.1 订单实体 (Order)
```typescript
interface Order {
  id: number                    // 订单ID
  projectId: number            // 项目ID
  projectCode: string          // 项目编码
  projectName: string          // 项目名称
  customerName: string         // 客户名称
  customerCode: string         // 客户编码
  shipmentAmount: number       // 发货金额
  orderStatus: OrderStatus     // 订单状态: '0'-待审批 '1'-已审批 '2'-已拒绝
  createTime: string           // 创建时间
  updateTime: string           // 更新时间
  // ... 其他业务字段
}
```

#### 6.1.2 审批记录 (ApprovalRecord)
```typescript
interface ApprovalRecord {
  id?: number                  // 记录ID
  todoId: string              // 待办事项ID
  taskName: string            // 任务名称
  approveUserName: string     // 审批人姓名
  approveStatus?: ApprovalStatus // 审批状态: 1-待审批 2-驳回 3-通过
  approveOpinion?: string     // 审批意见
  approveTime: string         // 审批时间
  roleName: string            // 角色名称
}
```

#### 6.1.3 产品信息 (ProductInfo)
```typescript
interface ProductInfo {
  id: number                  // 产品ID
  productName: string         // 产品名称
  model: string              // 型号
  quantity: number           // 数量
  cataloguePrice: number     // 目录价格
  price: number              // 实际价格
  discount: number           // 折扣
  type: string               // 产品类型
}
```

#### 6.1.4 附件文件 (AttachmentFile)
```typescript
interface AttachmentFile {
  id: number                 // 文件ID
  fileName: string           // 文件名称
  uploadUser: string         // 上传用户
  uploadTime: string         // 上传时间
  filePath: string           // 文件路径
  fileType: string           // 文件类型
}
```

#### 6.1.5 已审批列表项 (CompletedApprovalItem)
```typescript
interface CompletedApprovalItem {
  allApproveUserName: string     // 所有审批人姓名
  applyTime: string              // 申请时间
  applyUserName: string          // 申请人姓名
  approveOpinion: string         // 审批意见
  approveStatus: ApprovalStatus  // 审批状态: 2-驳回，3-通过，其他-提交
  approveTime: string            // 审批时间
  approveUser: string            // 审批人ID
  approveUserName: string        // 审批人姓名
  businessId: number             // 业务ID
  businessKey: string            // 业务编号
  businessName: string           // 合同名称
  nextAllApproveUserName: string // 下一步审批人
  processInstanceId: string      // 流程实例ID
  processKey: string             // 流程编码
  processName: string            // 流程名称
  roleName: string               // 角色名称
  taskId: string                 // 任务ID
  taskName: string               // 任务名称
  todoId: string                 // 待办事项ID
}
```

#### 6.1.6 查询参数类型
```typescript
// 已审批列表查询参数
interface CompletedListParams {
  businessName?: string     // 合同名称搜索
  page: number             // 页码
  pageSize: number         // 每页数量
}
```

## 7. 性能优化

### 7.1 前端性能优化

#### 7.1.1 代码层面优化
- **按需加载**: 路由组件懒加载，减少初始包体积
- **组件缓存**: 合理使用keep-alive缓存组件状态
- **防抖节流**: 搜索输入等操作使用防抖处理
- **虚拟滚动**: 大数据列表使用虚拟滚动技术

#### 7.1.2 资源优化
- **图片压缩**: 静态图片资源压缩和格式优化
- **代码分割**: Vite自动代码分割和Tree Shaking
- **CDN加速**: 静态资源使用CDN分发
- **缓存策略**: 合理设置浏览器缓存策略

#### 7.1.3 网络优化
- **请求合并**: 相关数据请求合并减少网络往返
- **数据缓存**: Store层实现数据缓存机制
- **离线支持**: Service Worker实现基础离线功能
- **预加载**: 关键数据提前预加载

### 7.2 移动端优化

#### 7.2.1 交互优化
- **触摸反馈**: 所有可点击元素提供视觉反馈
- **手势支持**: 支持下拉刷新、上拉加载等手势
- **防误触**: 避免过小的点击区域
- **加载状态**: 提供明确的加载和空状态提示

#### 7.2.2 性能监控
- **错误监控**: 集成错误上报和监控
- **性能监控**: 关键性能指标监控
- **用户行为**: 用户操作路径分析
- **兼容性**: 不同设备和浏览器兼容性测试

## 8. 安全设计

### 8.1 认证安全
- **Session管理**: 基于服务端Session的认证机制
- **超时处理**: 会话超时自动重定向登录页
- **权限控制**: 前端路由权限控制
- **敏感信息**: 避免在前端存储敏感信息

### 8.2 数据安全
- **输入验证**: 前端表单数据验证
- **XSS防护**: 用户输入内容转义处理
- **HTTPS**: 生产环境强制使用HTTPS
- **CORS**: 正确配置跨域访问策略

### 8.3 接口安全
- **参数校验**: 接口参数类型和格式校验
- **错误处理**: 统一错误处理，避免敏感信息泄露
- **请求限制**: 防止恶意频繁请求
- **数据脱敏**: 敏感数据展示脱敏处理

## 9. 测试策略

### 9.1 单元测试
- **组件测试**: Vue组件单元测试
- **工具函数**: 纯函数逻辑测试
- **Store测试**: 状态管理逻辑测试
- **覆盖率**: 关键逻辑代码覆盖率90%+

### 9.2 集成测试
- **API测试**: 前后端接口集成测试
- **用户流程**: 完整业务流程端到端测试
- **兼容性**: 不同浏览器和设备兼容性测试
- **性能测试**: 关键性能指标测试

### 9.3 用户测试
- **可用性测试**: 用户界面易用性测试
- **体验测试**: 用户操作体验测试
- **回归测试**: 版本迭代回归测试
- **压力测试**: 高并发场景压力测试

## 10. 部署运维

### 10.1 部署流程
1. **代码构建**: `npm run build` 生成生产包
2. **静态部署**: 将dist目录部署到Web服务器
3. **反向代理**: Nginx配置API代理和静态文件服务
4. **域名配置**: 配置生产域名和HTTPS证书

### 10.2 监控告警
- **错误监控**: JavaScript错误自动上报
- **性能监控**: 页面加载性能监控
- **业务监控**: 关键业务指标监控
- **告警通知**: 异常情况及时告警通知

### 10.3 版本管理
- **版本号**: 语义化版本号管理
- **变更日志**: 详细记录版本变更内容
- **回滚机制**: 快速版本回滚能力
- **灰度发布**: 分批次灰度发布策略