综合办公系统

CMC智联云枢办公系统(oa-ui) 技术架构文档

1. 项目概述

CMC智联云枢办公系统前端(oa-ui)是基于Vue.js 2.x构建的企业级办公管理系统，主要服务于CMC企业的日常办公管理需求，包括项目管理、车辆管理、设备管理、合同管理、流程审批等多个业务模块。

1.1 基本信息

项目名称: CMC智联云枢办公系统
版本: 3.8.7
描述: CMC智联云枢办公系统
开发框架: Vue.js 2.6.12 + Element UI 2.15.14
构建工具: Vue CLI 4.4.6

2. 技术栈

2.1 核心技术

前端框架: Vue.js 2.6.12
UI组件库: Element UI 2.15.14
状态管理: Vuex 3.6.0
路由管理: Vue Router 3.4.9
HTTP客户端: Axios 0.24.0
构建工具: Vue CLI 4.4.6
样式预处理器: Sass 1.32.13

2.2 特色功能库

流程图设计: bpmn-js 11.1.0 (支持BPMN流程设计)
地图组件: OpenLayers 7.1.0 (GIS地图功能)
图表可视化: ECharts 5.4.0 + ECharts GL 2.0.9
富文本编辑: Quill 1.3.7 + TinyMCE
文档预览: @vue-office系列 (支持PDF、Excel、Word预览)
视频播放: Video.js 8.21.0

2.3 工具库

文件操作: file-saver 2.0.5
加密解密: jsencrypt 3.0.0-rc.1
剪贴板: clipboard 2.0.8
日期处理: 内置日期工具
拖拽功能: vuedraggable 2.24.3 + sortablejs 1.10.2

3. 项目架构

3.1 目录结构

oa-ui/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API接口层
│   │   ├── flowable/      # 工作流相关接口
│   │   ├── oa/            # 办公系统业务接口
│   │   ├── system/        # 系统管理接口
│   │   └── monitor/       # 系统监控接口
│   ├── assets/            # 静态资源
│   │   ├── icons/         # SVG图标
│   │   ├── images/        # 图片资源
│   │   ├── styles/        # 全局样式
│   │   └── datas/         # 静态数据
│   ├── components/        # 公共组件
│   │   ├── Process/       # 流程设计组件
│   │   ├── FileUpload/    # 文件上传组件
│   │   ├── ImageUpload/   # 图片上传组件
│   │   └── ...           # 其他通用组件
│   ├── directive/         # 自定义指令
│   ├── layout/           # 布局组件
│   ├── plugins/          # 插件配置
│   ├── router/           # 路由配置
│   ├── store/            # Vuex状态管理
│   ├── utils/            # 工具类
│   ├── views/            # 页面组件
│   │   ├── oa/           # 办公系统业务页面
│   │   ├── flowable/     # 工作流页面
│   │   ├── system/       # 系统管理页面
│   │   └── monitor/      # 系统监控页面
│   ├── App.vue           # 根组件
│   ├── main.js           # 入口文件
│   └── permission.js     # 权限控制
├── package.json          # 项目配置
└── babel.config.js       # Babel配置

3.2 分层架构

3.2.1 表现层 (Presentation Layer)

Views层: 业务页面组件，负责用户界面展示和交互
Components层: 可复用的UI组件
Layout层: 页面布局组件(侧边栏、导航栏、内容区域)

3.2.2 业务逻辑层 (Business Logic Layer)

Store/Vuex: 全局状态管理，包含用户信息、权限、应用配置等
Router: 路由管理，支持动态路由和权限控制
Directive: 自定义指令，如权限指令、拖拽指令等

3.2.3 数据访问层 (Data Access Layer)

API层: 封装HTTP请求，统一管理后端接口调用
Utils层: 工具函数，包含请求拦截器、数据处理、权限验证等

4. 核心模块详解

4.1 认证与权限模块

4.1.1 认证机制

基于JWT Token的认证方式
支持Token自动刷新
登录状态持久化存储

4.1.2 权限控制

// 权限指令示例
v-hasPermi="['system:user:add']"  // 菜单权限
v-hasRole="['admin']"             // 角色权限

4.1.3 路由守卫

全局前置守卫验证登录状态
动态路由生成基于用户权限
白名单路由支持

4.2 状态管理 (Vuex)

4.2.1 模块结构

store/
├── modules/
│   ├── app.js           # 应用配置状态
│   ├── user.js          # 用户信息状态
│   ├── permission.js    # 权限路由状态
│   ├── tagsView.js      # 标签页状态
│   ├── settings.js      # 系统设置状态
│   ├── dict.js          # 字典数据状态
│   ├── projectProcess.js # 项目流程状态
│   └── ol.js            # 地图组件状态
├── getters.js           # 全局getter
└── index.js             # store入口

4.2.2 核心状态

用户信息: 包含用户基本信息、角色、权限等
应用配置: 侧边栏状态、设备类型、主题设置等
路由权限: 动态路由、菜单权限等
字典数据: 系统字典缓存

4.3 网络请求模块

4.3.1 请求拦截器

自动添加Authorization header
请求重复提交控制
请求参数处理

4.3.2 响应拦截器

统一错误处理
登录状态过期处理
文件下载处理

4.3.3 API组织结构

api/
├── flowable/          # 工作流相关
├── oa/               # 业务模块
│   ├── project/      # 项目管理
│   ├── car/          # 车辆管理
│   ├── device/       # 设备管理
│   ├── contract/     # 合同管理
│   └── ...           # 其他业务模块
├── system/           # 系统管理
└── monitor/          # 系统监控

4.4 组件体系

4.4.1 全局组件

Pagination: 分页组件
RightToolbar: 表格工具栏
DictTag: 字典标签
FileUpload: 文件上传
ImageUpload: 图片上传
Editor: 富文本编辑器

4.4.2 业务组件

Process: BPMN流程设计器
Calendar: 日历组件
IconSelect: 图标选择器
HeaderSearch: 头部搜索

4.4.3 布局组件

Sidebar: 侧边栏导航
Navbar: 顶部导航栏
TagsView: 标签页导航
AppMain: 主内容区域

5. 业务模块架构

5.1 工作流模块 (Flowable)

流程定义: 支持BPMN 2.0标准的流程设计
任务管理: 待办、已办、我的流程
表单管理: 动态表单配置和渲染
流程监控: 流程实例跟踪和管理

5.2 项目管理模块

项目台账: 项目基础信息管理
项目预算: 预算编制和管控
项目进度: 进度跟踪和报告
项目变更: 变更申请和审批

5.3 资源管理模块

车辆管理: 车辆信息、使用申请、费用管理
设备管理: 设备台账、领用归还、维修保养
人员管理: 员工信息、薪资管理、绩效考核

5.4 合同管理模块

承接合同: 合同基础信息、支付管理
分包合同: 分包管理、结算管理
合同档案: 合同文档管理

5.5 财务管理模块

借款管理: 借款申请、审批、还款
费用管理: 各类费用申请和报销
预算管控: 预算编制、执行、分析

6. 技术特色

6.1 工作流集成

深度集成Flowable工作流引擎
支持复杂业务流程的可视化设计
提供完整的流程生命周期管理

6.2 GIS地图功能

基于OpenLayers的地图组件
支持多种地图底图和图层
提供空间数据的可视化展示

6.3 多媒体支持

支持多种文档格式在线预览
集成视频播放功能
提供图片预览和编辑功能

6.4 移动端适配

响应式布局设计
支持移动端设备访问
提供良好的移动端用户体验

7. 性能优化

7.1 代码分割

路由级别的代码分割
组件异步加载
第三方库按需引入

7.2 缓存策略

字典数据缓存
用户权限信息缓存
静态资源缓存

7.3 请求优化

请求防抖处理
重复请求取消
批量请求合并

8. 安全机制

8.1 前端安全

XSS攻击防护
CSRF攻击防护
敏感信息加密传输

8.2 权限控制

基于RBAC的权限模型
前端路由权限控制
接口级别的权限验证

8.3 数据安全

前端数据脱敏
安全的文件上传处理
用户操作日志记录

9. 开发规范

9.1 代码规范

ESLint代码质量检查
统一的代码格式化
Git提交规范

9.2 组件规范

组件命名规范
Props和Events定义规范
组件文档化要求

9.3 API规范

统一的接口命名规范
标准的请求响应格式
完整的错误码定义

10. 部署架构

10.1 开发环境

本地开发服务器
热重载支持
开发调试工具集成

10.2 生产环境

静态资源CDN部署
Gzip压缩优化
缓存策略配置

10.3 持续集成

自动化构建流程
代码质量检查
自动化部署

11. 扩展性设计

11.1 插件化架构

组件插件化
功能模块插件化
第三方集成插件化

11.2 国际化支持

多语言切换
本地化资源管理
区域化配置

11.3 主题定制

多主题切换
自定义主题配置
品牌化定制支持

12. 总结

CMC综合办公系统前端架构采用了现代化的Vue.js技术栈，通过模块化、组件化的设计理念，构建了一个功能完善、扩展性强、维护性好的企业级办公管理系统。系统具有以下特点：

技术先进: 采用Vue.js 2.x + Element UI构建，技术栈成熟稳定
功能丰富: 涵盖项目管理、资源管理、流程审批等多个业务领域
架构清晰: 分层架构设计，职责分离，便于开发和维护
扩展性强: 插件化设计，支持功能模块的灵活扩展
用户体验: 响应式设计，支持PC和移动端访问
安全可靠: 完善的权限控制和安全防护机制

该架构为企业数字化办公提供了强有力的技术支撑，能够满足企业不断增长的业务需求和技术演进要求。

CMC_OA_架构文档.md 10KB Permalink Verlauf Originalformat