44 KiB
44 KiB
微信小程序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切换时自动清空搜索关键词
- 上拉加载更多，下拉刷新
接口需求:
// 获取待审批订单列表
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 详情页面模块
功能描述: 展示工单详细信息和审批操作
主要功能:
- 工单详情信息展示
- 审批历史记录
- 附件预览（图片、文档）
- 审批操作按钮
接口需求:
//获取已审批列表
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 审批操作模块
功能描述: 处理审批通过、拒绝等操作
主要功能:
- 审批意见输入
- 审批结果提交
- 操作结果反馈
接口需求:
// 提交审批结果
//审批
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 数据状态管理
interface AppState {
user: UserInfo;
orderList: Order[];
currentOrder: Order | null;
loading: boolean;
}
5.2 API数据格式规范
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. 页面路由设计
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存储认证状态
- 路由守卫实现权限控制
- 支持"记住密码"功能
关键代码:
// 认证状态管理
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切换时保持各自滚动位置和搜索状态
数据模型:
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自动添加
技术实现:
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环境检测
// 微信小程序webview适配
if (window.__wxjs_environment === 'miniprogram') {
console.log('Running in WeChat MiniProgram WebView');
}
4.4.2 移动端优化
- 触摸事件: 使用@vant/touch-emulator在桌面端模拟触摸
- 视口设置: 固定viewport，禁止缩放
- 防止双指缩放: JavaScript阻止多点触控事件
<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 开发环境配置
// 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 // 记住密码
响应格式:
{
"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 // 搜索关键词(可选)
响应格式:
{
"code": 0,
"msg": "操作成功",
"data": {
"total": 100,
"rows": [...]
}
}
5.2.2 获取订单详情
接口地址: GET /project/order/h5/approve/{id}
响应格式:
{
"code": 0,
"msg": "操作成功",
"data": {
"projectOrderInfo": {...},
"approveLog": [...],
"user": {...}
}
}
5.2.3 获取已审批列表
接口地址: POST /flow/completed/list
请求参数: FormData格式
page: number // 页码
pageSize: number // 每页数量
businessName: string // 合同名称搜索(可选)
响应格式:
{
"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)
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)
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)
interface ProductInfo {
id: number // 产品ID
productName: string // 产品名称
model: string // 型号
quantity: number // 数量
cataloguePrice: number // 目录价格
price: number // 实际价格
discount: number // 折扣
type: string // 产品类型
}
6.1.4 附件文件 (AttachmentFile)
interface AttachmentFile {
id: number // 文件ID
fileName: string // 文件名称
uploadUser: string // 上传用户
uploadTime: string // 上传时间
filePath: string // 文件路径
fileType: string // 文件类型
}
6.1.5 已审批列表项 (CompletedApprovalItem)
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 查询参数类型
// 已审批列表查询参数
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 部署流程
- 代码构建:
npm run build生成生产包 - 静态部署: 将dist目录部署到Web服务器
- 反向代理: Nginx配置API代理和静态文件服务
- 域名配置: 配置生产域名和HTTPS证书
10.2 监控告警
- 错误监控: JavaScript错误自动上报
- 性能监控: 页面加载性能监控
- 业务监控: 关键业务指标监控
- 告警通知: 异常情况及时告警通知
10.3 版本管理
- 版本号: 语义化版本号管理
- 变更日志: 详细记录版本变更内容
- 回滚机制: 快速版本回滚能力
- 灰度发布: 分批次灰度发布策略