项目管理模块（yudao-module-project）功能方案设计与开发计划

生成日期：2026-03-26
用途：RuoYi Office 项目管理子模块的完整功能设计、数据库设计、前后端开发计划
参考：泛微 e-cology、蓝凌 MK 项目管理方案；本项目 OA、合同模块架构

一、需求概述与定位

1.1 产品定位

RuoYi Office 面向中小企业，项目管理模块的定位是：

轻量化：不追求 Microsoft Project / JIRA 级别的重度功能，而是提供 80%+ 场景覆盖的实用功能
一体化：与已有的合同管理、OA 审批、工作流引擎深度集成
可视化：甘特图、里程碑看板、项目统计大屏等核心可视化能力
协同化：任务分配、进度汇报、文档共享、工时统计形成闭环

1.2 核心用户角色

角色	使用场景
项目经理	创建项目、分解任务、跟踪进度、管理资源、控制成本
项目成员	接收任务、填报工时、提交交付物、更新进度
部门领导	审批立项、查看部门项目总览、资源协调
企业高管	项目统计大屏、项目绩效分析

1.3 竞品功能对标分析

功能维度	泛微 e-cology	蓝凌 MK	本系统（规划）
项目立项与审批	✅ 流程驱动	✅ BPM集成	✅ Flowable BPM
项目分类/模板	✅	✅	✅ 简化版
任务 WBS 分解	✅ 多级	✅ 多级	✅ 3级（项目→阶段→任务）
甘特图	✅	✅	✅ dhtmlx-gantt
里程碑管理	✅	✅	✅
资源/成员管理	✅ 复杂	✅ 复杂	✅ 简化版（成员角色）
工时管理	✅	✅	✅
成本管理	✅ 复杂	✅ 复杂	✅ 简化版（预算+实际）
风险管理	✅	✅	✅ 简化版
文档管理	✅ 独立模块	✅ 独立模块	✅ 复用 OA 云盘
项目变更	✅	✅	✅ BPM审批
统计报表	✅ 复杂	✅ 复杂	✅ 项目看板+统计
合同关联	部分	部分	✅ 深度集成
移动端	✅	✅	✅ UniApp

二、功能模块总览

项目管理 (project)
├── 1. 项目配置（基础数据）
│   ├── 1.1 项目分类管理
│   ├── 1.2 项目模板管理
│   └── 1.3 项目配置（编号规则、提醒等）
│
├── 2. 项目立项与管理
│   ├── 2.1 项目立项（含BPM审批）
│   ├── 2.2 项目信息维护
│   ├── 2.3 项目成员管理
│   ├── 2.4 项目变更（含BPM审批）
│   ├── 2.5 项目结项/归档
│   └── 2.6 项目与合同关联
│
├── 3. 任务管理
│   ├── 3.1 任务分解（WBS）
│   ├── 3.2 任务指派与执行
│   ├── 3.3 甘特图视图
│   ├── 3.4 看板视图（卡片拖拽）
│   └── 3.5 任务依赖关系
│
├── 4. 里程碑管理
│   ├── 4.1 里程碑定义
│   ├── 4.2 里程碑跟踪
│   └── 4.3 里程碑时间线视图
│
├── 5. 工时管理
│   ├── 5.1 工时填报
│   ├── 5.2 工时审核
│   └── 5.3 工时统计
│
├── 6. 成本与预算
│   ├── 6.1 项目预算
│   └── 6.2 实际成本记录
│
├── 7. 风险与问题
│   ├── 7.1 风险登记
│   └── 7.2 问题跟踪
│
├── 8. 项目文档
│   └── 8.1 项目文件夹（复用OA云盘）
│
└── 9. 统计与报表
    ├── 9.1 项目概览看板
    ├── 9.2 项目进度统计
    ├── 9.3 工时统计报表
    └── 9.4 成本分析报表

三、数据库设计

3.1 ER 关系概览

project_category (项目分类)
       │
       ▼
project_template (项目模板)
       │
       ▼
project_info (项目主表) ◄────── project_member (项目成员)
       │                            │
       ├──► project_milestone (里程碑)
       │
       ├──► project_task (任务) ◄────── project_task_link (任务依赖)
       │         │
       │         ├──► project_worktime (工时)
       │         └──► project_task_comment (任务评论)
       │
       ├──► project_budget (预算与成本)
       │
       ├──► project_risk (风险/问题)
       │
       ├──► project_change (项目变更)
       │
       └──► contract_info (关联合同, 跨模块)
       
project_config (全局配置, 每租户一条)

3.2 表结构详细设计

3.2.1 project_category - 项目分类表

字段	类型	说明
id	bigint PK	分类ID
name	varchar(128)	分类名称
code	varchar(64)	分类编码
parent_id	bigint	父分类ID
sort	int	排序
status	tinyint	状态（0正常 1停用）
remark	varchar(512)	备注
公共字段		creator/create_time/updater/update_time/deleted/tenant_id

3.2.2 project_template - 项目模板表

字段	类型	说明
id	bigint PK	模板ID
name	varchar(255)	模板名称
category_id	bigint FK	项目分类ID
description	text	模板说明
default_days	int	默认工期（天）
template_tasks	json	模板任务列表（JSON，含阶段和任务结构）
status	tinyint	状态
sort	int	排序
公共字段

3.2.3 project_info - 项目主表

字段	类型	说明
id	bigint PK	项目ID
project_code	varchar(64) UK	项目编号
project_name	varchar(255)	项目名称
category_id	bigint FK	项目分类ID
project_type	tinyint	项目类型（1内部项目 2外部项目 3研发项目 4实施项目 99其他）
priority	tinyint	优先级（1低 2中 3高 4紧急）
status	tinyint	项目状态（0草稿 1立项审批中 2进行中 3暂停 4已完成 5已终止 6已归档）
description	text	项目描述
plan_start_date	date	计划开始日期
plan_end_date	date	计划结束日期
actual_start_date	date	实际开始日期
actual_end_date	date	实际结束日期
progress	decimal(5,2)	总体进度（0-100%）
budget_amount	decimal(18,2)	项目预算
actual_cost	decimal(18,2)	实际成本
manager_user_id	bigint	项目经理ID
manager_user_name	varchar(64)	项目经理姓名
dept_id	bigint	所属部门ID
dept_name	varchar(128)	所属部门名称
company_id	bigint	所属公司ID
company_name	varchar(255)	所属公司名称
contract_id	bigint	关联合同ID（与合同模块对接）
contract_code	varchar(64)	关联合同编号
contract_name	varchar(255)	关联合同名称
customer_name	varchar(255)	客户/甲方名称
process_instance_id	varchar(64)	流程实例ID（立项审批）
process_status	tinyint	审批状态
file_urls	json	附件
remark	text	备注
公共字段

索引: uk_project_code(project_code, tenant_id), idx_category_id, idx_status, idx_manager_user_id, idx_contract_id, idx_dept_id, idx_plan_end_date

3.2.4 project_member - 项目成员表

字段	类型	说明
id	bigint PK	ID
project_id	bigint FK	项目ID
user_id	bigint	用户ID
user_name	varchar(64)	用户姓名
role_type	tinyint	角色类型（1项目经理 2技术负责人 3项目成员 4观察者）
join_date	date	加入日期
leave_date	date	离开日期
status	tinyint	状态（0正常 1已移除）
remark	varchar(512)	备注
公共字段

索引: idx_project_id, uk_project_user(project_id, user_id)

3.2.5 project_task - 任务表

字段	类型	说明
id	bigint PK	任务ID
project_id	bigint FK	项目ID
parent_id	bigint	父任务ID（0为顶级，支持项目→阶段→任务三级）
task_name	varchar(255)	任务名称
task_type	tinyint	任务类型（1阶段 2普通任务 3里程碑任务）
priority	tinyint	优先级（1低 2中 3高 4紧急）
status	tinyint	状态（0待开始 1进行中 2已完成 3已取消 4已延期）
description	text	任务描述
assignee_user_id	bigint	负责人ID
assignee_user_name	varchar(64)	负责人姓名
plan_start_date	datetime	计划开始时间
plan_end_date	datetime	计划结束时间
actual_start_date	datetime	实际开始时间
actual_end_date	datetime	实际结束时间
estimated_hours	decimal(8,1)	预估工时（小时）
actual_hours	decimal(8,1)	实际工时（汇总）
progress	decimal(5,2)	完成进度（0-100%）
sort	int	排序（甘特图行序）
milestone_id	bigint	关联里程碑ID
file_urls	json	附件
remark	text	备注
公共字段

索引: idx_project_id, idx_parent_id, idx_assignee_user_id, idx_status, idx_milestone_id

设计说明：task_type=1 为阶段节点（甘特图中的 Summary Task），task_type=3 为里程碑任务（甘特图中的 Milestone，duration=0）。三级结构：项目 → 阶段(parent_id=0) → 任务(parent_id=阶段ID)，足够覆盖中小企业场景。

3.2.6 project_task_link - 任务依赖关系表

字段	类型	说明
id	bigint PK	ID
project_id	bigint	项目ID
source_task_id	bigint FK	前置任务ID
target_task_id	bigint FK	后置任务ID
link_type	tinyint	依赖类型（0 FS完成-开始 1 SS开始-开始 2 FF完成-完成 3 SF开始-完成）
lag	int	延迟天数（可为负）
公共字段

索引: idx_project_id, uk_link(source_task_id, target_task_id)

3.2.7 project_milestone - 里程碑表

字段	类型	说明
id	bigint PK	里程碑ID
project_id	bigint FK	项目ID
name	varchar(255)	里程碑名称
description	text	里程碑描述
plan_date	date	计划达成日期
actual_date	date	实际达成日期
status	tinyint	状态（0未达成 1已达成 2已逾期 3已取消）
sort	int	排序
deliverables	text	交付物说明
file_urls	json	附件
remark	varchar(512)	备注
公共字段

索引: idx_project_id, idx_plan_date, idx_status

3.2.8 project_worktime - 工时记录表

字段	类型	说明
id	bigint PK	ID
project_id	bigint FK	项目ID
task_id	bigint FK	任务ID
user_id	bigint	填报人ID
user_name	varchar(64)	填报人姓名
work_date	date	工作日期
work_hours	decimal(4,1)	工作时长（小时）
work_content	text	工作内容
status	tinyint	状态（0待审核 1已通过 2已驳回）
reviewer_user_id	bigint	审核人ID
review_time	datetime	审核时间
review_remark	varchar(512)	审核备注
公共字段

索引: idx_project_id, idx_task_id, idx_user_id, idx_work_date

3.2.9 project_budget - 项目预算/成本表

字段	类型	说明
id	bigint PK	ID
project_id	bigint FK	项目ID
budget_type	tinyint	类型（1预算 2实际成本）
cost_category	tinyint	费用类别（1人工 2设备 3材料 4外包 5差旅 6其他）
amount	decimal(18,2)	金额
occur_date	date	发生日期
description	varchar(512)	说明
file_urls	json	附件凭证
related_bill_type	varchar(32)	关联单据类型（合同/报销单等）
related_bill_id	bigint	关联单据ID
remark	varchar(512)	备注
公共字段

索引: idx_project_id, idx_budget_type, idx_cost_category

3.2.10 project_risk - 风险/问题登记表

字段	类型	说明
id	bigint PK	ID
project_id	bigint FK	项目ID
type	tinyint	类型（1风险 2问题）
title	varchar(255)	标题
description	text	详细描述
level	tinyint	等级（1低 2中 3高 4严重）
status	tinyint	状态（0待处理 1处理中 2已解决 3已关闭 4已忽略）
owner_user_id	bigint	负责人ID
owner_user_name	varchar(64)	负责人姓名
plan_resolve_date	date	计划解决日期
actual_resolve_date	date	实际解决日期
solution	text	解决方案/应对措施
remark	varchar(512)	备注
公共字段

索引: idx_project_id, idx_type, idx_status, idx_owner_user_id

3.2.11 project_change - 项目变更表

字段	类型	说明
id	bigint PK	ID
project_id	bigint FK	项目ID
change_code	varchar(64)	变更编号
change_type	tinyint	变更类型（1范围 2进度 3预算 4人员 99其他）
change_reason	text	变更原因
change_content	text	变更内容说明
original_value	text	变更前（快照）
new_value	text	变更后
process_instance_id	varchar(64)	审批流程ID
process_status	tinyint	审批状态
file_urls	json	附件
remark	text	备注
公共字段

索引: uk_change_code(change_code, tenant_id), idx_project_id

3.2.12 project_task_comment - 任务评论表

字段	类型	说明
id	bigint PK	ID
project_id	bigint	项目ID
task_id	bigint FK	任务ID
content	text	评论内容
file_urls	json	附件
公共字段

索引: idx_task_id

3.2.13 project_config - 项目配置表

字段	类型	说明
id	bigint PK	配置ID
code_prefix	varchar(16)	项目编号前缀（默认 'PJ'）
code_date_format	varchar(16)	编号日期格式（默认 'yyyyMMdd'）
code_seq_length	int	流水号位数（默认 4）
default_work_hours	decimal(4,1)	每日标准工时（默认 8.0）
overdue_notify_enabled	bit	是否开启逾期提醒
overdue_notify_days	int	提前提醒天数（默认 3）
milestone_notify_enabled	bit	是否开启里程碑提醒
milestone_notify_days	int	里程碑提前提醒天数（默认 7）
公共字段

3.3 表关系汇总

共 13 张表，核心关联关系：

关系	说明
project_info → project_category	分类归属
project_info → project_member	一对多，项目成员
project_info → project_task	一对多，项目任务（含阶段）
project_info → project_milestone	一对多，里程碑
project_info → project_budget	一对多，预算/成本
project_info → project_risk	一对多，风险/问题
project_info → project_change	一对多，变更记录
project_info → contract_info	多对一，关联合同（跨模块）
project_task → project_task_link	多对多，任务依赖
project_task → project_worktime	一对多，工时记录
project_task → project_task_comment	一对多，任务评论
project_task → project_milestone	多对一，任务归属里程碑

四、与合同模块的关联对接设计

4.1 对接方式

采用松耦合的关联设计，通过以下两种方式对接：

方式一：project_info 直接冗余合同信息

project_info.contract_id      → contract_info.id
project_info.contract_code    → contract_info.contract_code（冗余）
project_info.contract_name    → contract_info.contract_name（冗余）
project_info.customer_name    → contract_info.party_b_name（冗余）

项目立项时通过「选择合同」弹窗关联，后续合同信息更新时不自动同步（冗余快照）。

方式二：contract_info 反向关联项目

合同主表已有 biz_type + biz_id 字段，可以在合同创建/编辑时反向关联项目：

contract_info.biz_type = 'project'
contract_info.biz_id   = project_info.id

4.2 API 对接

project-server → contract-api：调用 ContractInfoApi.getContract() 获取合同详情
contract-server → project-api：调用 ProjectInfoApi.getProjectByContractId() 获取项目信息
project_budget 关联合同付款：通过 related_bill_type='contract_payment' + related_bill_id 关联合同收付款计划

4.3 业务联动场景

场景	处理方式
项目立项时选择合同	弹窗选择合同，自动填充预算金额、客户信息
合同详情查看关联项目	contract_info 页面增加「关联项目」Tab
合同履约与项目里程碑联动	项目里程碑达成时自动创建合同履约记录
项目成本与合同付款计划对比	预算分析报表中关联展示合同付款进度

五、甘特图与里程碑技术实现方案

5.1 甘特图技术选型

方案	协议	下载量	Vue3支持	功能丰富度	推荐度
dhtmlx-gantt	GPL-2.0	20K/周	✅ 官方指南	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
vue-ganttastic	MIT	6K/周	✅ 原生Vue3	⭐⭐⭐	⭐⭐⭐
gantt-elastic	MIT	-	❌ Vue2	⭐⭐⭐	⭐⭐

推荐方案：dhtmlx-gantt（Standard 版）

理由：

GPL-2.0 开源协议，项目自用无问题
功能最完整：任务依赖4种类型、拖拽调整、自动排程、关键路径（PRO版）、智能渲染
20K 周下载量，社区活跃，文档完善
官方提供 Vue 集成指南
7 种主题皮肤，与 Ant Design 风格可融合

5.2 甘特图数据交互设计

后端 API（`/project/gantt`）

GET  /project/gantt/data?projectId={id}     → 返回甘特图数据（任务+链接）
POST /project/gantt/task                     → 新增任务
PUT  /project/gantt/task                     → 更新任务（拖拽修改）
DELETE /project/gantt/task?id={id}           → 删除任务
POST /project/gantt/link                     → 新增依赖
DELETE /project/gantt/link?id={id}           → 删除依赖

甘特图数据格式（与 dhtmlx-gantt 兼容）

json

{
  "data": [
    {
      "id": 1,
      "text": "阶段一：需求分析",
      "start_date": "2026-04-01",
      "duration": 10,
      "progress": 0.6,
      "parent": 0,
      "type": "project",
      "open": true
    },
    {
      "id": 2,
      "text": "需求调研",
      "start_date": "2026-04-01",
      "duration": 5,
      "progress": 1.0,
      "parent": 1,
      "type": "task",
      "assignee": "张三"
    },
    {
      "id": 3,
      "text": "需求评审",
      "start_date": "2026-04-08",
      "duration": 0,
      "parent": 1,
      "type": "milestone"
    }
  ],
  "links": [
    { "id": 1, "source": 2, "target": 3, "type": "0" }
  ]
}

5.3 里程碑视图设计

提供两种里程碑视图：

时间线视图：横向时间轴，用标记点标注每个里程碑，颜色区分状态
列表视图：表格展示里程碑名称、计划日期、实际日期、状态、偏差天数

里程碑在甘特图中以菱形标记（duration=0）显示，与 dhtmlx-gantt 的 milestone 类型天然兼容。

5.4 移动端方案

移动端不使用甘特图（横屏体验差），替代方案：

任务列表：卡片式列表，按状态筛选
里程碑时间线：纵向时间线组件展示
进度环形图：项目整体进度用环形进度条展示

六、后端 API 设计

6.1 Controller 路由规划

Controller	路径前缀	说明
ProjectCategoryController	`/project/category`	分类 CRUD
ProjectTemplateController	`/project/template`	模板 CRUD
ProjectInfoController	`/project/info`	项目台账（CRUD、审批、统计）
ProjectMemberController	`/project/member`	成员管理
ProjectTaskController	`/project/task`	任务 CRUD
ProjectGanttController	`/project/gantt`	甘特图数据接口
ProjectMilestoneController	`/project/milestone`	里程碑 CRUD
ProjectWorktimeController	`/project/worktime`	工时管理
ProjectBudgetController	`/project/budget`	预算/成本
ProjectRiskController	`/project/risk`	风险/问题
ProjectChangeController	`/project/change`	变更管理
ProjectStatsController	`/project/stats`	统计报表
ProjectConfigController	`/project/config`	项目配置

6.2 核心 API 接口列表

项目信息

接口	方法	路径	说明
分页列表	GET	/project/info/page	支持状态、分类、经理等筛选
详情	GET	/project/info/get?id=	返回项目详情含成员列表
保存草稿	POST	/project/info/save	保存/新建项目
提交审批	POST	/project/info/submit	提交立项审批
更新	PUT	/project/info/update	更新项目信息
删除	DELETE	/project/info/delete?id=	删除项目
完成结项	PUT	/project/info/complete?id=	项目结项
生成编号	GET	/project/info/generate-code	自动生成项目编号
精简列表	GET	/project/info/simple-list	下拉选择用
导出	GET	/project/info/export-excel	Excel 导出

任务管理

接口	方法	路径	说明
任务树	GET	/project/task/tree?projectId=	按项目获取任务树
任务列表	GET	/project/task/page	分页+筛选
我的任务	GET	/project/task/my-page	当前用户的任务
创建	POST	/project/task/create	新增任务
更新	PUT	/project/task/update	更新任务
更新进度	PUT	/project/task/update-progress	快速更新进度
更新状态	PUT	/project/task/update-status	快速更新状态
删除	DELETE	/project/task/delete?id=	删除任务
批量排序	PUT	/project/task/batch-sort	甘特图拖拽后批量更新排序

甘特图

接口	方法	路径	说明
获取数据	GET	/project/gantt/data?projectId=	返回 dhtmlx-gantt 格式数据
更新任务	PUT	/project/gantt/task	甘特图拖拽更新
创建链接	POST	/project/gantt/link	新增依赖关系
删除链接	DELETE	/project/gantt/link?id=	删除依赖关系

工时

接口	方法	路径	说明
填报	POST	/project/worktime/create	填报工时
我的工时	GET	/project/worktime/my-page	查看我的工时
审核	PUT	/project/worktime/review	审核工时
统计	GET	/project/worktime/statistics	工时统计

统计

接口	方法	路径	说明
概览	GET	/project/stats/overview	项目总数、进行中、延期等
进度统计	GET	/project/stats/progress	各项目进度对比
工时统计	GET	/project/stats/worktime	部门/人员工时分布
成本分析	GET	/project/stats/cost	预算vs实际成本分析

七、前端页面设计

7.1 PC 端页面结构（web-antd）

views/project/
├── category/                    # 项目分类
│   ├── index.vue               # 树形列表（参考合同分类）
│   ├── data.ts
│   └── modules/form.vue
│
├── template/                    # 项目模板
│   ├── index.vue               # 列表
│   ├── data.ts
│   └── modules/form.vue
│
├── info/                        # 项目台账
│   ├── list/                   # 项目列表
│   │   ├── index.vue           # VxeGrid + 筛选
│   │   └── data.ts
│   └── detail/                 # 项目详情（Tab页签布局）
│       ├── index.vue           # 详情主页面
│       ├── data.ts
│       └── components/
│           ├── basic-info.vue          # 基本信息Tab
│           ├── member-list.vue         # 成员管理Tab
│           ├── gantt-view.vue          # 甘特图Tab（dhtmlx-gantt）
│           ├── task-board.vue          # 看板视图Tab
│           ├── milestone-list.vue      # 里程碑Tab
│           ├── worktime-list.vue       # 工时Tab
│           ├── budget-list.vue         # 预算/成本Tab
│           ├── risk-list.vue           # 风险/问题Tab
│           ├── change-list.vue         # 变更记录Tab
│           ├── document-list.vue       # 项目文档Tab
│           └── contract-info.vue       # 关联合同Tab
│
├── task/                        # 我的任务（个人视角）
│   ├── list/
│   │   ├── index.vue
│   │   └── data.ts
│   └── info/
│       ├── index.vue           # 任务详情/编辑
│       └── data.ts
│
├── worktime/                    # 工时管理
│   ├── fill/                   # 工时填报
│   │   ├── index.vue
│   │   └── data.ts
│   └── review/                 # 工时审核
│       ├── index.vue
│       └── data.ts
│
├── change/                      # 项目变更（BPM）
│   ├── list/
│   │   ├── index.vue
│   │   └── data.ts
│   └── info/
│       ├── index.vue
│       └── data.ts
│
├── stats/                       # 统计报表
│   ├── index.vue               # 项目看板/大屏
│   └── data.ts
│
├── config/                      # 项目配置
│   ├── index.vue
│   └── data.ts
│
└── components/                  # 公共组件
    ├── project-select-modal.vue        # 项目选择弹窗
    ├── project-select-data.ts
    ├── contract-select-modal.vue       # 合同选择弹窗
    ├── contract-select-data.ts
    ├── member-select-modal.vue         # 成员选择弹窗
    ├── task-status-tag.vue             # 任务状态标签
    └── index.ts

7.2 前端 API 结构

api/project/
├── index.ts                    # 模块导出
├── category/index.ts           # 分类 API
├── template/index.ts           # 模板 API
├── info/index.ts               # 项目 API
├── member/index.ts             # 成员 API
├── task/index.ts               # 任务 API
├── gantt/index.ts              # 甘特图 API
├── milestone/index.ts          # 里程碑 API
├── worktime/index.ts           # 工时 API
├── budget/index.ts             # 预算 API
├── risk/index.ts               # 风险 API
├── change/index.ts             # 变更 API
├── stats/index.ts              # 统计 API
└── config/index.ts             # 配置 API

7.3 移动端页面结构（UniApp）

pages-project/                   # 分包
├── index.vue                   # 项目列表
├── create/index.vue            # 创建项目
├── detail/index.vue            # 项目详情（Tab：基础/任务/里程碑/成员）
├── task/
│   ├── index.vue               # 任务列表（按项目筛选）
│   └── detail/index.vue        # 任务详情（支持嵌入审批）
├── worktime/
│   ├── index.vue               # 工时填报列表
│   └── fill/index.vue          # 工时填报表单
├── milestone/
│   └── index.vue               # 里程碑时间线
└── components/
    └── search-form.vue         # 搜索表单

api/project/
├── index.ts                    # 项目列表/详情 API
├── task/index.ts               # 任务 API
├── worktime/index.ts           # 工时 API
└── milestone/index.ts          # 里程碑 API

7.4 项目详情页核心交互设计

项目详情页采用 Tab 页签 布局，这是项目管理的核心页面：

┌─────────────────────────────────────────────────────────────┐
│  项目详情：XXX项目                                [编辑] [更多▼]  │
├─────────────────────────────────────────────────────────────┤
│  项目编号：PJ20260401001    状态：进行中    进度：65%           │
│  项目经理：张三    部门：技术部    预算：50万 / 实际：32万       │
│  计划：2026-04-01 ~ 2026-12-31    合同：HT20260301001        │
├─────────────────────────────────────────────────────────────┤
│ [基本信息] [甘特图] [看板] [任务] [里程碑] [成员] [工时]      │
│ [预算/成本] [风险/问题] [变更] [文档] [关联合同]              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─ 甘特图视图 ──────────────────────────────────────────┐  │
│  │ 任务名称         │ 4月      5月      6月      7月     │  │
│  │ ├ 阶段一：需求    │ ████████                          │  │
│  │ │ ├ 需求调研     │ ████                               │  │
│  │ │ ├ 需求评审 ◆   │     ◆                              │  │
│  │ │ └ 需求文档     │   ████                             │  │
│  │ ├ 阶段二：开发    │         ████████████               │  │
│  │ │ ├ 后端开发     │         ████████                    │  │
│  │ │ ├ 前端开发     │           ██████                    │  │
│  │ │ └ 联调测试     │                 ████                │  │
│  │ └ 阶段三：上线    │                      ██████        │  │
│  └───────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘

八、后端包结构设计

cn.iocoder.yudao.module.project
├── controller/admin/
│   ├── category/
│   │   ├── ProjectCategoryController.java
│   │   └── vo/
│   ├── template/
│   │   ├── ProjectTemplateController.java
│   │   └── vo/
│   ├── info/
│   │   ├── ProjectInfoController.java
│   │   └── vo/
│   ├── member/
│   │   ├── ProjectMemberController.java
│   │   └── vo/
│   ├── task/
│   │   ├── ProjectTaskController.java
│   │   └── vo/
│   ├── gantt/
│   │   ├── ProjectGanttController.java
│   │   └── vo/
│   ├── milestone/
│   │   ├── ProjectMilestoneController.java
│   │   └── vo/
│   ├── worktime/
│   │   ├── ProjectWorktimeController.java
│   │   └── vo/
│   ├── budget/
│   │   ├── ProjectBudgetController.java
│   │   └── vo/
│   ├── risk/
│   │   ├── ProjectRiskController.java
│   │   └── vo/
│   ├── change/
│   │   ├── ProjectChangeController.java
│   │   └── vo/
│   ├── stats/
│   │   ├── ProjectStatsController.java
│   │   └── vo/
│   └── config/
│       ├── ProjectConfigController.java
│       └── vo/
├── service/
│   ├── category/
│   ├── template/
│   ├── info/
│   ├── member/
│   ├── task/
│   ├── gantt/
│   ├── milestone/
│   ├── worktime/
│   ├── budget/
│   ├── risk/
│   ├── change/
│   ├── stats/
│   └── config/
├── dal/
│   ├── dataobject/
│   │   ├── category/ProjectCategoryDO.java
│   │   ├── template/ProjectTemplateDO.java
│   │   ├── info/ProjectInfoDO.java
│   │   ├── member/ProjectMemberDO.java
│   │   ├── task/ProjectTaskDO.java
│   │   ├── task/ProjectTaskLinkDO.java
│   │   ├── task/ProjectTaskCommentDO.java
│   │   ├── milestone/ProjectMilestoneDO.java
│   │   ├── worktime/ProjectWorktimeDO.java
│   │   ├── budget/ProjectBudgetDO.java
│   │   ├── risk/ProjectRiskDO.java
│   │   ├── change/ProjectChangeDO.java
│   │   └── config/ProjectConfigDO.java
│   └── mysql/
│       ├── category/ProjectCategoryMapper.java
│       ├── template/ProjectTemplateMapper.java
│       ├── info/ProjectInfoMapper.java
│       ├── member/ProjectMemberMapper.java
│       ├── task/ProjectTaskMapper.java
│       ├── task/ProjectTaskLinkMapper.java
│       ├── task/ProjectTaskCommentMapper.java
│       ├── milestone/ProjectMilestoneMapper.java
│       ├── worktime/ProjectWorktimeMapper.java
│       ├── budget/ProjectBudgetMapper.java
│       ├── risk/ProjectRiskMapper.java
│       ├── change/ProjectChangeMapper.java
│       └── config/ProjectConfigMapper.java
├── convert/
│   └── (MapStruct 转换器，按需创建)
├── framework/
│   ├── rpc/config/RpcConfiguration.java
│   └── security/config/SecurityConfiguration.java
└── process/
    ├── local/ProjectLocalNotificationListener.java
    └── feign/ProjectFeignNotificationController.java

九、开发计划与迭代安排

9.1 整体规划

阶段	内容	预估工期	优先级
P0 基础设施	数据库建表、DO/Mapper/基础CRUD	3天	最高
P1 核心功能	项目立项（含BPM）、任务管理、甘特图	8天	最高
P2 协同功能	成员管理、工时管理、里程碑	5天	高
P3 管控功能	预算成本、风险问题、项目变更	4天	高
P4 看板统计	项目看板、统计报表、导出	3天	中
P5 合同对接	与合同模块的关联对接	2天	中
P6 移动端	UniApp 移动端页面	5天	中
P7 配置完善	分类模板、项目配置、权限菜单	2天	低

总预估：32 个工作日（约 6.5 周）

9.2 详细迭代计划

迭代一：P0 基础设施（第1-3天）

目标：搭建数据层，所有表结构就绪，基础 CRUD 可用

序号	任务	输出物	工期
1.1	数据库建表脚本（13张表）	SQL 文件	0.5天
1.2	DO 类开发（13个）	Java DO	0.5天
1.3	Mapper 接口（13个）	Java Mapper	0.5天
1.4	项目分类 CRUD（前后端）	Controller + Service + 前端页面	0.5天
1.5	项目模板 CRUD（前后端）	Controller + Service + 前端页面	0.5天
1.6	项目配置功能（前后端）	Controller + Service + 前端页面	0.5天

迭代二：P1 核心功能（第4-11天）

目标：项目立项全流程跑通，甘特图可用

序号	任务	输出物	工期
2.1	项目信息后端 CRUD	Service + Controller + VO	1天
2.2	项目列表前端页面	VxeGrid 列表 + 筛选	0.5天
2.3	项目详情页框架（Tab布局）	详情主页面 + 基本信息Tab	1天
2.4	项目立项 BPM 集成	保存/提交/审批回调	1天
2.5	任务管理后端 CRUD	Service + Controller + VO	1天
2.6	任务前端页面（列表+详情）	任务列表 + 任务详情/编辑	1天
2.7	dhtmlx-gantt 集成	Vue3 组件封装	0.5天
2.8	甘特图 Tab 页面开发	数据加载 + 拖拽交互 + 保存	1.5天
2.9	任务依赖关系（Link）	后端 + 甘特图依赖线	0.5天

迭代三：P2 协同功能（第12-16天）

目标：项目成员、工时填报、里程碑管理可用

序号	任务	输出物	工期
3.1	项目成员管理（前后端）	成员 Tab + 成员增删	1天
3.2	里程碑管理后端	Service + Controller	0.5天
3.3	里程碑前端（列表+时间线）	里程碑 Tab + 时间线视图	1天
3.4	工时管理后端	Service + Controller	0.5天
3.5	工时填报前端	工时填报 + 我的工时	1天
3.6	工时审核前端	审核列表 + 审核操作	0.5天
3.7	任务评论功能	后端 + 前端评论组件	0.5天

迭代四：P3 管控功能（第17-20天）

目标：预算成本、风险管理、项目变更功能完成

序号	任务	输出物	工期
4.1	预算/成本管理（前后端）	预算 Tab	1天
4.2	风险/问题管理（前后端）	风险 Tab	1天
4.3	项目变更管理（含BPM）	变更单 + BPM审批	1.5天
4.4	项目结项/归档	结项流程	0.5天

迭代五：P4 看板统计（第21-23天）

目标：项目管理驾驶舱可用

序号	任务	输出物	工期
5.1	项目概览看板后端	统计接口	0.5天
5.2	项目看板前端	卡片看板 + 图表	1.5天
5.3	看板视图（任务拖拽）	Kanban 卡片视图	0.5天
5.4	Excel 导出功能	项目列表 + 任务列表导出	0.5天

迭代六：P5 合同对接（第24-25天）

目标：与合同模块数据联通

序号	任务	输出物	工期
6.1	project-api 提供 RPC 接口	ProjectInfoApi	0.5天
6.2	项目立项关联合同选择	合同选择弹窗 + 数据填充	0.5天
6.3	合同详情增加关联项目展示	合同详情增加 Tab	0.5天
6.4	里程碑→合同履约联动	自动创建履约记录	0.5天

迭代七：P6 移动端（第26-30天）

目标：移动端核心流程可用

序号	任务	输出物	工期
7.1	移动端 API 层	api/project/*	0.5天
7.2	项目列表页	pages-project/index.vue	0.5天
7.3	项目详情页	pages-project/detail/index.vue	1天
7.4	任务列表 + 详情	pages-project/task/*	1天
7.5	工时填报移动端	pages-project/worktime/*	0.5天
7.6	里程碑时间线	pages-project/milestone/*	0.5天
7.7	BPM 审批集成（立项/变更）	bpm-menu-config + form-detail 注册	0.5天
7.8	工作台菜单注册	menu-config.ts 添加项目管理分组	0.5天

迭代八：P7 配置完善（第31-32天）

目标：菜单权限、数据字典配置就绪

序号	任务	输出物	工期
8.1	系统菜单 SQL	INSERT system_menu	0.5天
8.2	数据字典 SQL	项目类型/状态/优先级等字典	0.5天
8.3	权限码整理与测试	各接口 PreAuthorize 权限	0.5天
8.4	整体联调测试	全流程走通验证	0.5天

十、权限设计

10.1 菜单结构

项目管理 (project)
├── 项目台账 (/project/info)
│   ├── project:info:query         查询
│   ├── project:info:create        创建
│   ├── project:info:update        编辑
│   ├── project:info:delete        删除
│   └── project:info:export        导出
├── 我的任务 (/project/task)
│   ├── project:task:query
│   ├── project:task:create
│   ├── project:task:update
│   └── project:task:delete
├── 工时管理 (/project/worktime)
│   ├── 工时填报 (/project/worktime/fill)
│   │   ├── project:worktime:create
│   │   └── project:worktime:query
│   └── 工时审核 (/project/worktime/review)
│       └── project:worktime:review
├── 项目变更 (/project/change)
│   ├── project:change:query
│   ├── project:change:create
│   └── project:change:delete
├── 项目统计 (/project/stats)
│   └── project:stats:query
├── 项目分类 (/project/category)
│   ├── project:category:query
│   ├── project:category:create
│   ├── project:category:update
│   └── project:category:delete
├── 项目模板 (/project/template)
│   ├── project:template:query
│   ├── project:template:create
│   ├── project:template:update
│   └── project:template:delete
└── 项目配置 (/project/config)
    ├── project:config:query
    └── project:config:update

十一、技术要点与注意事项

11.1 甘特图集成要点

dhtmlx-gantt 安装：npm install dhtmlx-gantt（Standard GPL 版本）
Vue3 封装：创建 GanttChart.vue 组件，在 onMounted 中 gantt.init()，在 onBeforeUnmount 中 gantt.destructor()
数据同步：监听 onAfterTaskDrag、onAfterLinkAdd、onAfterLinkDelete 等事件，实时调用后端 API
智能渲染：开启 gantt.config.smart_rendering = true，支持大量任务
中文化：加载 dhtmlx-gantt/codebase/locale/locale_cn.js
皮肤：使用 Material 主题，与 Ant Design 风格协调

11.2 BPM 流程集成

项目立项审批：参考 OA 用车申请的 save/submit 模式
项目变更审批：参考合同变更的 BPM 集成
流程回调处理：ProjectLocalNotificationListener 或 ProjectFeignNotificationController
流程定义 Key：project_create（立项）、project_change（变更）

11.3 进度自动计算

阶段进度 = 子任务进度加权平均（按预估工时加权）
项目总进度 = 所有阶段进度加权平均
任务更新进度时，自动触发父级和项目进度重算

11.4 数据权限

项目数据权限：基于 dept_id 字段，配合 @DataPermission 注解
任务查看权限：项目成员可见本项目所有任务
工时：仅本人可填报，项目经理可审核

11.5 与 OA 模块的复用

文档管理：直接复用 OA 云盘的文件管理功能，通过 biz_type='project' + biz_id=项目ID 关联
审批流程：复用 BPM 模块的 Flowable 工作流引擎
组织架构：复用系统模块的用户/部门/公司数据

十二、数据字典设计

字典类型	字典编码	字典值
项目类型	`project_type`	1内部项目 2外部项目 3研发项目 4实施项目 99其他
项目状态	`project_status`	0草稿 1立项审批中 2进行中 3暂停 4已完成 5已终止 6已归档
项目优先级	`project_priority`	1低 2中 3高 4紧急
任务类型	`project_task_type`	1阶段 2普通任务 3里程碑任务
任务状态	`project_task_status`	0待开始 1进行中 2已完成 3已取消 4已延期
成员角色	`project_member_role`	1项目经理 2技术负责人 3项目成员 4观察者
里程碑状态	`project_milestone_status`	0未达成 1已达成 2已逾期 3已取消
工时状态	`project_worktime_status`	0待审核 1已通过 2已驳回
费用类别	`project_cost_category`	1人工 2设备 3材料 4外包 5差旅 6其他
风险等级	`project_risk_level`	1低 2中 3高 4严重
风险/问题类型	`project_risk_type`	1风险 2问题
风险/问题状态	`project_risk_status`	0待处理 1处理中 2已解决 3已关闭 4已忽略
变更类型	`project_change_type`	1范围 2进度 3预算 4人员 99其他
任务依赖类型	`project_link_type`	0 FS 1 SS 2 FF 3 SF
预算类型	`project_budget_type`	1预算 2实际成本

附录：关键技术依赖

依赖	版本	用途	安装方式
dhtmlx-gantt	9.x	甘特图组件	`npm install dhtmlx-gantt`
dayjs	已有	日期处理	已集成
echarts	已有	统计图表	已集成
VxeTable	已有	表格组件	已集成
Ant Design Vue	已有	UI 框架	已集成
form-create	已有	动态表单	已集成

项目管理模块（yudao-module-project）功能方案设计与开发计划 ​

一、需求概述与定位 ​

1.1 产品定位 ​

1.2 核心用户角色 ​

1.3 竞品功能对标分析 ​

二、功能模块总览 ​

三、数据库设计 ​

3.1 ER 关系概览 ​

3.2 表结构详细设计 ​

3.2.1 project_category - 项目分类表 ​

3.2.2 project_template - 项目模板表 ​

3.2.3 project_info - 项目主表 ​

3.2.4 project_member - 项目成员表 ​

3.2.5 project_task - 任务表 ​

3.2.6 project_task_link - 任务依赖关系表 ​

3.2.7 project_milestone - 里程碑表 ​

3.2.8 project_worktime - 工时记录表 ​

3.2.9 project_budget - 项目预算/成本表 ​

3.2.10 project_risk - 风险/问题登记表 ​

3.2.11 project_change - 项目变更表 ​

3.2.12 project_task_comment - 任务评论表 ​

3.2.13 project_config - 项目配置表 ​

3.3 表关系汇总 ​

四、与合同模块的关联对接设计 ​

4.1 对接方式 ​

方式一：project_info 直接冗余合同信息 ​

方式二：contract_info 反向关联项目 ​

4.2 API 对接 ​

4.3 业务联动场景 ​

五、甘特图与里程碑技术实现方案 ​

5.1 甘特图技术选型 ​

5.2 甘特图数据交互设计 ​

后端 API（/project/gantt） ​

甘特图数据格式（与 dhtmlx-gantt 兼容） ​

5.3 里程碑视图设计 ​

5.4 移动端方案 ​

六、后端 API 设计 ​

6.1 Controller 路由规划 ​

6.2 核心 API 接口列表 ​

项目信息 ​

任务管理 ​

甘特图 ​

工时 ​

统计 ​

七、前端页面设计 ​

7.1 PC 端页面结构（web-antd） ​

7.2 前端 API 结构 ​

7.3 移动端页面结构（UniApp） ​

7.4 项目详情页核心交互设计 ​

八、后端包结构设计 ​

九、开发计划与迭代安排 ​

9.1 整体规划 ​

9.2 详细迭代计划 ​

迭代一：P0 基础设施（第1-3天） ​

迭代二：P1 核心功能（第4-11天） ​

迭代三：P2 协同功能（第12-16天） ​

迭代四：P3 管控功能（第17-20天） ​

迭代五：P4 看板统计（第21-23天） ​

迭代六：P5 合同对接（第24-25天） ​

迭代七：P6 移动端（第26-30天） ​

迭代八：P7 配置完善（第31-32天） ​

十、权限设计 ​

10.1 菜单结构 ​

十一、技术要点与注意事项 ​

11.1 甘特图集成要点 ​

11.2 BPM 流程集成 ​

11.3 进度自动计算 ​

11.4 数据权限 ​

11.5 与 OA 模块的复用 ​

十二、数据字典设计 ​

附录：关键技术依赖 ​