feat(collaboration): 添加完整协同办公模块及设备管理和文档协同页面
- 新增现代化企业协同办公系统，包含概览仪表板、项目管理、任务看板和文档协同 - 使用Vue 3、TypeScript、Nuxt.js及Ant Design Vue实现前端结构和交互 - 设计响应式布局、渐变背景及毛玻璃视觉效果，优化移动端体验 - 创建设备管理页面，实现设备台账、巡检、维修和报警管理 - 新建文档协同页面，支持文档搜索、筛选、分类显示及多种视图切换 - 配置协同办公导航及布局文件，完善模块化和组件化架构 - 修复管理页语法错误，完善演示数据和统计信息展示 - 提供新建、导入、分享、重命名和删除文档等核心操作功能 - 添加设备健康度及维修记录展示模块，方便车间设备管理和维护 - 更新.gitignore忽略输出目录，提升项目环境整洁性
This commit is contained in:
316
oa-module-README.md
Normal file
316
oa-module-README.md
Normal file
@@ -0,0 +1,316 @@
|
||||
# 协同办公模块设计文档
|
||||
|
||||
## 概述
|
||||
|
||||
协同办公模块是葳管家企业一站式管理平台的核心功能模块之一，旨在提供全面的团队协作解决方案，覆盖项目管理、任务跟踪、文档协同、会议管理等多个方面。
|
||||
|
||||
## 功能模块
|
||||
|
||||
### 1. 概览仪表板
|
||||
- **统计概览**: 快速查看待办任务、进行中项目、在线成员、文档协作等关键数据
|
||||
- **快捷操作**: 新建文档、任务、会议、项目申请的快速入口
|
||||
- **项目进度**: 实时展示各项目进度、状态和负责人
|
||||
- **今日任务**: 个人今日任务列表，支持勾选完成
|
||||
- **团队状态**: 团队成员在线状态、任务分配情况
|
||||
- **文档协作**: 最近更新的文档、实时协同参与者
|
||||
- **今日会议**: 当日安排的会议提醒和加入入口
|
||||
- **最新公告**: 企业内部最新通知公告
|
||||
|
||||
### 2. 项目管理
|
||||
- **项目看板**: 项目管理列表，包含进度、任务、成员等关键信息
|
||||
- **项目筛选**: 按状态、负责人、优先级等多维度筛选
|
||||
- **项目创建**: 完整的项目信息录入，包含名称、描述、负责人、起止时间等
|
||||
- **项目统计**: 任务数量、完成率、成员数等统计数据
|
||||
- **项目操作**: 查看、编辑、归档等功能
|
||||
- **导出功能**: 支持项目信息导出
|
||||
|
||||
### 3. 任务看板
|
||||
- **拖拽看板**: 四列看板设计（待处理、进行中、待审核、已完成）
|
||||
- **任务卡片**: 包含优先级、负责人、截止时间、协作者等信息
|
||||
- **任务操作**: 编辑、分配、删除、完成、审核等全套操作
|
||||
- **任务统计**: 总任务数、完成数、逾期数、完成率等统计数据
|
||||
- **任务筛选**: 个人任务、团队任务、全部任务视图切换
|
||||
- **任务创建**: 完善的任务创建表单，包含预估工时、协作者等
|
||||
|
||||
### 4. 文档协同
|
||||
- **文档管理**: 支持文档、表格、演示文稿、白板等多种文档类型
|
||||
- **视图切换**: 网格视图和列表视图自由切换
|
||||
- **文档搜索**: 按标题、描述、标签全文搜索
|
||||
- **类型筛选**: 按文档类型快速筛选
|
||||
- **文档操作**: 收藏、分享、复制、下载、重命名、删除等
|
||||
- **文档创建**: 创建各种类型的文档，支持标签和文件夹管理
|
||||
- **协同统计**: 文档总数、分享数量、今日更新、占用空间等统计
|
||||
- **版本管理**: 文档历史版本记录和恢复
|
||||
|
||||
### 5. 会议管理
|
||||
- **会议日历**: 可视化会议日程安排
|
||||
- **会议创建**: 创建团队会议、客户会议等不同类型会议
|
||||
- **会议提醒**: 会议开始前自动提醒
|
||||
- **会议纪要**: 会议讨论内容记录
|
||||
- **任务分派**: 会议决议转化为任务
|
||||
- **参会管理**: 参会人员确认、请假审批
|
||||
- **会议资源**: 会议室预定、设备调配
|
||||
|
||||
### 6. 审批流程
|
||||
- **流程设计**: 可视化审批流程设计器
|
||||
- **多级审批**: 支持多级、并行、条件审批
|
||||
- **移动审批**: 移动端快速审批
|
||||
- **审批统计**: 审批时效、通过率等数据统计
|
||||
- **历史记录**: 完整的审批过程记录
|
||||
- **模板库**: 常用审批流程模板
|
||||
|
||||
### 7. 团队协作
|
||||
- **组织架构**: 部门结构、岗位职责、汇报关系
|
||||
- **成员管理**: 成员信息、角色权限、在职状态
|
||||
- **在线状态**: 实时显示成员在线/忙碌/离开/离线状态
|
||||
- **即时通讯**: 团队内部即时消息沟通
|
||||
- **文件共享**: 团队文件共享空间
|
||||
- **成员统计**: 团队规模、在线率等统计
|
||||
|
||||
### 8. 日程日历
|
||||
- **个人日程**: 个人日程安排管理
|
||||
- **团队日历**: 团队共享日程视图
|
||||
- **日程同步**: 与外部日历系统同步
|
||||
- **日程提醒**: 日程提醒和通知
|
||||
- **重复事件**: 支持周期性重复事件
|
||||
- **日程统计**: 时间利用率分析
|
||||
|
||||
### 9. 即时通讯
|
||||
- **私聊/群聊**: 一对一和群组聊天
|
||||
- **文件传输**: 支持各种类型文件传输
|
||||
- **消息历史**: 完整聊天记录保存
|
||||
- **在线状态**: 实时在线状态显示
|
||||
- **@提醒**: 消息中@特定成员提醒
|
||||
- **表情/图片**: 丰富的表情和图片支持
|
||||
|
||||
## 技术实现
|
||||
|
||||
### 技术栈
|
||||
- **前端框架**: Vue 3 + TypeScript + Nuxt.js
|
||||
- **UI框架**: Ant Design Vue
|
||||
- **样式方案**: Tailwind CSS
|
||||
- **状态管理**: Vue Composition API
|
||||
- **路由管理**: Nuxt.js 内置路由
|
||||
- **HTTP请求**: 基于Fetch API封装
|
||||
- **拖拽支持**: vuedraggable（任务看板）
|
||||
- **日期处理**: dayjs
|
||||
|
||||
### 核心组件
|
||||
1. **TaskForm.vue**: 任务表单组件，支持创建和编辑任务
|
||||
2. **OA Layout**: 协同办公专用布局组件，包含侧边导航和用户信息
|
||||
3. **文档组件**: 各类文档的展示和编辑组件
|
||||
4. **会议组件**: 会议创建和展示组件
|
||||
5. **审批组件**: 审批流程展示和操作组件
|
||||
|
||||
### API接口设计
|
||||
```
|
||||
GET /api/oa/projects # 获取项目列表
|
||||
POST /api/oa/projects # 创建项目
|
||||
GET /api/oa/projects/:id # 获取项目详情
|
||||
PUT /api/oa/projects/:id # 更新项目
|
||||
DELETE /api/oa/projects/:id # 删除项目
|
||||
|
||||
GET /api/oa/tasks # 获取任务列表
|
||||
POST /api/oa/tasks # 创建任务
|
||||
PUT /api/oa/tasks/:id # 更新任务状态
|
||||
DELETE /api/oa/tasks/:id # 删除任务
|
||||
|
||||
GET /api/oa/documents # 获取文档列表
|
||||
POST /api/oa/documents # 创建文档
|
||||
GET /api/oa/documents/:id # 获取文档内容
|
||||
PUT /api/oa/documents/:id # 更新文档
|
||||
DELETE /api/oa/documents/:id # 删除文档
|
||||
|
||||
GET /api/oa/meetings # 获取会议列表
|
||||
POST /api/oa/meetings # 创建会议
|
||||
PUT /api/oa/meetings/:id # 更新会议
|
||||
DELETE /api/oa/meetings/:id # 删除会议
|
||||
|
||||
GET /api/oa/approvals # 获取审批列表
|
||||
POST /api/oa/approvals # 提交审批
|
||||
PUT /api/oa/approvals/:id # 审批操作
|
||||
```
|
||||
|
||||
### 数据库设计
|
||||
```sql
|
||||
-- 项目表
|
||||
CREATE TABLE projects (
|
||||
id INT PRIMARY KEY AUTO_INCREMENT,
|
||||
name VARCHAR(100) NOT NULL,
|
||||
description TEXT,
|
||||
icon VARCHAR(10),
|
||||
owner_id INT,
|
||||
progress INT DEFAULT 0,
|
||||
status ENUM('planning', 'in_progress', 'completed', 'archived'),
|
||||
priority ENUM('low', 'medium', 'high'),
|
||||
start_date DATE,
|
||||
deadline DATE,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- 任务表
|
||||
CREATE TABLE tasks (
|
||||
id INT PRIMARY KEY AUTO_INCREMENT,
|
||||
title VARCHAR(200) NOT NULL,
|
||||
description TEXT,
|
||||
project_id INT,
|
||||
assignee_id INT,
|
||||
reviewer_id INT,
|
||||
status ENUM('todo', 'in_progress', 'review', 'done'),
|
||||
priority ENUM('low', 'medium', 'high'),
|
||||
estimated_hours INT,
|
||||
actual_hours INT,
|
||||
due_date DATETIME,
|
||||
completed_at DATETIME,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- 文档表
|
||||
CREATE TABLE documents (
|
||||
id INT PRIMARY KEY AUTO_INCREMENT,
|
||||
title VARCHAR(200) NOT NULL,
|
||||
content TEXT,
|
||||
type ENUM('document', 'spreadsheet', 'presentation', 'board'),
|
||||
owner_id INT,
|
||||
path VARCHAR(500),
|
||||
size BIGINT,
|
||||
is_shared BOOLEAN DEFAULT FALSE,
|
||||
is_favorited BOOLEAN DEFAULT FALSE,
|
||||
tags JSON,
|
||||
version INT DEFAULT 1,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- 会议表
|
||||
CREATE TABLE meetings (
|
||||
id INT PRIMARY KEY AUTO_INCREMENT,
|
||||
title VARCHAR(200) NOT NULL,
|
||||
description TEXT,
|
||||
type ENUM('team', 'client', 'other'),
|
||||
start_time DATETIME,
|
||||
duration INT,
|
||||
location VARCHAR(200),
|
||||
organizer_id INT,
|
||||
status ENUM('scheduled', 'in_progress', 'completed', 'cancelled'),
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- 审批表
|
||||
CREATE TABLE approvals (
|
||||
id INT PRIMARY KEY AUTO_INCREMENT,
|
||||
title VARCHAR(200) NOT NULL,
|
||||
type ENUM('expense', 'leave', 'purchase', 'other'),
|
||||
applicant_id INT,
|
||||
amount DECIMAL(10, 2),
|
||||
reason TEXT,
|
||||
status ENUM('pending', 'approved', 'rejected', 'cancelled'),
|
||||
current_step INT DEFAULT 1,
|
||||
total_steps INT DEFAULT 1,
|
||||
approved_at DATETIME,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||
);
|
||||
```
|
||||
|
||||
## 页面路径
|
||||
|
||||
```
|
||||
/oa # 协同办公概览
|
||||
/oa/projects # 项目管理
|
||||
/oa/tasks # 任务看板
|
||||
/oa/documents # 文档协同
|
||||
/oa/meetings # 会议管理
|
||||
/oa/approvals # 审批流程
|
||||
/oa/teams # 团队协作
|
||||
/oa/calendar # 日程日历
|
||||
/oa/chat # 即时通讯
|
||||
```
|
||||
|
||||
## 优势特点
|
||||
|
||||
### 1. 完整的解决方案
|
||||
- 覆盖企业日常办公全场景，减少多系统切换
|
||||
- 一体化管理，数据无缝流转
|
||||
|
||||
### 2. 智能化体验
|
||||
- AI智能助手辅助办公
|
||||
- 自动化流程减少重复工作
|
||||
- 智能推荐和提醒
|
||||
|
||||
### 3. 高度可定制
|
||||
- 模块化设计，按需启用
|
||||
- 审批流程自定义
|
||||
- 界面主题可定制
|
||||
|
||||
### 4. 安全可靠
|
||||
- 企业级数据安全
|
||||
- 权限控制精细化
|
||||
- 操作日志完整记录
|
||||
|
||||
### 5. 移动友好
|
||||
- 响应式设计，支持移动端
|
||||
- 移动应用同步开发中
|
||||
|
||||
## 未来规划
|
||||
|
||||
### 短期计划
|
||||
1. 完善任务看板的拖拽功能
|
||||
2. 集成实时文档协作
|
||||
3. 实现会议视频功能
|
||||
4. 开发移动端应用
|
||||
|
||||
### 中期计划
|
||||
1. AI办公助手深度集成
|
||||
2. 集成企业微信/钉钉
|
||||
3. 开发第三方应用生态
|
||||
4. 数据分析和BI报表
|
||||
|
||||
### 长期愿景
|
||||
1. 打造智能工作空间
|
||||
2. 构建行业解决方案
|
||||
3. 国际化版本开发
|
||||
|
||||
## 开发建议
|
||||
|
||||
### 环境要求
|
||||
- Node.js 18+
|
||||
- Vue 3+
|
||||
- Nuxt.js 4+
|
||||
- TypeScript 5+
|
||||
|
||||
### 安装依赖
|
||||
```bash
|
||||
npm install @ant-design/icons-vue
|
||||
npm install dayjs
|
||||
# 如需要拖拽功能
|
||||
npm install vuedraggable@next
|
||||
```
|
||||
|
||||
### 开发命令
|
||||
```bash
|
||||
# 开发模式
|
||||
npm run dev
|
||||
|
||||
# 构建
|
||||
npm run build
|
||||
|
||||
# 预览
|
||||
npm run preview
|
||||
```
|
||||
|
||||
## 联系我们
|
||||
|
||||
如有任何问题或建议，请联系：
|
||||
- **技术支持**: support@weisukeji.com
|
||||
- **商务合作**: business@weisukeji.com
|
||||
- **官方网站**: https://weisukeji.com
|
||||
- **文档中心**: https://docs.weisukeji.com
|
||||
|
||||
---
|
||||
|
||||
*最后更新: 2024年10月*
|
||||
*版本: v1.0.0*
|
||||
Reference in New Issue
Block a user