Files

赵忠林 ecdc1cc986 feat(collaboration): 添加完整协同办公模块及设备管理和文档协同页面

- 新增现代化企业协同办公系统，包含概览仪表板、项目管理、任务看板和文档协同
- 使用Vue 3、TypeScript、Nuxt.js及Ant Design Vue实现前端结构和交互
- 设计响应式布局、渐变背景及毛玻璃视觉效果，优化移动端体验
- 创建设备管理页面，实现设备台账、巡检、维修和报警管理
- 新建文档协同页面，支持文档搜索、筛选、分类显示及多种视图切换
- 配置协同办公导航及布局文件，完善模块化和组件化架构
- 修复管理页语法错误，完善演示数据和统计信息展示
- 提供新建、导入、分享、重命名和删除文档等核心操作功能
- 添加设备健康度及维修记录展示模块，方便车间设备管理和维护
- 更新.gitignore忽略输出目录，提升项目环境整洁性

2026-04-09 12:13:35 +08:00

9.9 KiB

Raw Permalink Blame History

协同办公模块设计文档

概述

协同办公模块是葳管家企业一站式管理平台的核心功能模块之一，旨在提供全面的团队协作解决方案，覆盖项目管理、任务跟踪、文档协同、会议管理等多个方面。

功能模块

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

核心组件

TaskForm.vue: 任务表单组件，支持创建和编辑任务
OA Layout: 协同办公专用布局组件，包含侧边导航和用户信息
文档组件: 各类文档的展示和编辑组件
会议组件: 会议创建和展示组件
审批组件: 审批流程展示和操作组件

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   # 审批操作

数据库设计

-- 项目表
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. 移动友好

响应式设计，支持移动端
移动应用同步开发中

未来规划

短期计划

完善任务看板的拖拽功能
集成实时文档协作
实现会议视频功能
开发移动端应用

中期计划

AI办公助手深度集成
集成企业微信/钉钉
开发第三方应用生态
数据分析和BI报表

长期愿景

打造智能工作空间
构建行业解决方案
国际化版本开发

开发建议

环境要求

Node.js 18+
Vue 3+
Nuxt.js 4+
TypeScript 5+

安装依赖

npm install @ant-design/icons-vue
npm install dayjs
# 如需要拖拽功能
npm install vuedraggable@next

开发命令

# 开发模式
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

9.9 KiB Raw Permalink Blame History Unescape Escape

协同办公模块设计文档

概述

功能模块

1. 概览仪表板

2. 项目管理

3. 任务看板

4. 文档协同

5. 会议管理

6. 审批流程

7. 团队协作

8. 日程日历

9. 即时通讯

技术实现

技术栈

核心组件

API接口设计

数据库设计

页面路径

优势特点

1. 完整的解决方案

2. 智能化体验

3. 高度可定制

4. 安全可靠

5. 移动友好

未来规划

短期计划

中期计划

长期愿景

开发建议

环境要求

安装依赖

开发命令

联系我们

9.9 KiB

Raw Permalink Blame History