# 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 权限控制
```javascript
// 权限指令示例
v-hasPermi="['system:user:add']"  // 菜单权限
v-hasRole="['admin']"             // 角色权限
```

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

### 4.2 状态管理 (Vuex)

#### 4.2.1 模块结构
```javascript
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组织结构
```javascript
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技术栈，通过模块化、组件化的设计理念，构建了一个功能完善、扩展性强、维护性好的企业级办公管理系统。系统具有以下特点：

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

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