# 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. **安全可靠**: 完善的权限控制和安全防护机制 该架构为企业数字化办公提供了强有力的技术支撑，能够满足企业不断增长的业务需求和技术演进要求。