Compare commits

...

17 Commits

Author SHA1 Message Date
dk
9d84b1aae0 fix(加班申请): 修复加班申请中,和状态机相关的代码的不合理的地方。 2026-06-03 21:04:51 +08:00
dk
d3d0830820 feat(新增加班申请功能): 新增申请功能,可在工作台进行审核。
fix(dict_data): 在字典数据新增、编辑时可以操作颜色类型字段(color_type)。
2026-06-01 21:37:08 +08:00
b2da882b31 feat(execution): 实现执行模块视角切换和快捷过滤功能
- 添加执行视角切换功能(my/all),支持不同身份维度查看
- 实现逾期/本周到期快捷过滤功能,提升执行管理效率
- 重构执行区域UI布局,优化用户体验和界面结构
- 集成Element Plus表单验证,在用户选择器组件中使用
- 优化执行状态筛选和计数逻辑,提升数据展示准确性
- 实现执行视角切换时的数据同步刷新机制
- 添加执行完成操作的二次确认对话框
- 重构权限码检查逻辑,统一使用query权限码进行控制
- 移除auth store依赖,精简代码结构
- 优化执行状态看板和任务计数的加载机制
- 实现执行创建和编辑流程的状态同步更新
- 统一任务工作区的执行范围传递方式,提高性能
- 添加执行详情面板的操作按钮权限控制
- 优化执行删除后的数据刷新逻辑,确保视图一致性
2026-05-29 16:40:25 +08:00
4ed4b537ad feat(projects): 工作台小组件设计 2026-05-28 08:20:01 +08:00
3988eaf910 refactor(workbench): 重构待办面板功能提升用户体验
- 替换原有时间桶过滤为分类标签页和截止时间筛选器
- 添加优先级排序功能,支持任务类别内按优先级排序
- 重构待办数据结构,新增创建时间和优先级字段
- 移除高优先级标记,统一使用优先级枚举值
- 添加个人事项创建对话框和相关操作功能
- 更新模拟数据以匹配新的数据结构和功能需求
- 优化列表排序逻辑,按创建时间升序排列,无截止时间排最后
- 为各类别待办项添加逾期状态标识和计数统计
- 实现分页加载,每页显示5条待办记录
- 更新样式类名以匹配新的逾期判断逻辑

refactor(project): 优化项目执行模块提升性能和可维护性

- 移除执行项点击切换功能相关的事件和方法
- 删除不再使用的select-execution事件发射器
- 移除执行标签的悬停效果和鼠标指针样式
- 重构任务表格视图,将日期格式化函数名称标准化
- 在跨执行模式下也显示进度列,统一界面布局
- 更新最近更新列宽度并调整日期格式显示
- 将默认页面大小从10增加到20以提高加载效率

feat(list): 统一日期格式化功能简化代码维护

- 将日期时间格式化函数重命名为更准确的date格式化
- 在产品列表和项目列表中统一使用新的日期格式化函数
- 移除秒数显示,仅保留年月日格式提高可读性

refactor(todo): 重构待办事项数据模型和过滤逻辑

- 重新定义待办事项分类类型,移除mention添加personal
- 新增主标签、截止时间筛选器和优先级类型定义
- 添加创建时间字段用于排序和显示
- 实现基于分类、截止时间和优先级的过滤函数
- 创建优先级权重映射用于排序算法
- 更新待办项构建函数以支持新的排序逻辑
- 修改逾期判断逻辑以适应新的数据结构
- 移除原有的高优先级字段,统一使用优先级枚举
- 添加优先级排序功能支持升序降序切换
- 重构排序算法,优先按创建时间,其次按截止时间排序

refactor(task): 清理任务模块中已废弃的功能

- 移除通过ID选择执行项的相关函数和事件处理器
- 删除任务卡片和表格中的执行项点击切换功能
- 更新任务工作区组件以移除废弃的事件监听
- 调整任务表格视图中进度条的样式和状态显示

refactor(components): 项目列表中添加进度条可视化组件

- 引入Element Plus进度条组件用于项目进度展示
- 在项目列表中添加进度列并实现进度条渲染
- 配置进度条样式包括内嵌文字、成功状态和边框圆角
- 调整进度列宽度以适应进度条显示需求

refactor(widgets): 整理工作台模块配置和清理冗余组件

- 从工作台模块注册中移除已废弃的myTicket组件
- 更新模块注释说明,明确myTicket已废弃的原因
- 删除不再使用的workbench-my-ticket.vue组件文件
- 更新模块总数注释从16个调整为15个
2026-05-25 14:30:44 +08:00
e9214137c1 refactor(project): 重构项目执行模块组件结构和数据管理
- 移除 execution-list-panel.vue 组件并将功能整合到执行区域
- 新增 execution-section.vue 组件替代原有的列表面板
- 将 task-workspace.vue 重命名为 task-workspace-comp.vue 并更新引用
- 引入 useTaskViewContext 组合式 API 进行任务视图上下文管理
- 添加跨执行任务状态统计接口调用和数据处理逻辑
- 重构执行状态筛选和任务创建权限判断逻辑
- 更新执行选择、搜索和重置功能的事件处理方式
- 调整页面布局结构,优化左右分栏的内容组织方式
- 完善执行详情获取和状态操作的业务流程
- 优化执行分配和状态变更的异步处理机制
2026-05-23 14:22:58 +08:00
dk
13b74cfe97 feat(新增需求评审功能): 新增需求评审功能。
feat(动态切换对象域下的对象):对象域下的对象可以动态切换。
fix(产品需求、项目需求): 按照会议意见修改诸多细节。
fix(产品对象域的概览界面): 把假数据换成真实的需求统计数据。
2026-05-22 14:05:25 +08:00
caozehui
ab882e085b feat(personal-center): 重构个人事项详情并复用任务工作日志组件 2026-05-22 10:46:46 +08:00
62859bfc38 fix(projects): 工作日志编辑日期不回填 2026-05-21 22:05:30 +08:00
ba328e02bb refactor(projects): 1、新增执行任务,表单优化;2、删除逻辑丰富。3、修改已知问题 2026-05-21 21:42:23 +08:00
caozehui
28d597d91e fix(personal-item): 个人事项&任务添加type类型字段 2026-05-21 14:06:05 +08:00
caozehui
fe29fde564 Merge remote-tracking branch 'origin/main' 2026-05-21 10:44:20 +08:00
caozehui
7d578ab271 feat(personal-item): 个人事项 2026-05-21 10:44:00 +08:00
caozehui
71da2d507e fix(personal-center): 个人头像更新 2026-05-19 10:59:07 +08:00
acd41555f9 refactor(projects): 1、优化新增 产品和新增项目;2、调整角色提示信息 2026-05-18 22:25:04 +08:00
dk
2367e03146 fix(产品需求、项目需求): 按照会议所说进行修改。 2026-05-18 16:49:12 +08:00
caozehui
023490c012 fix(infra): 分页查询列表隐藏非必要字段 2026-05-18 14:57:48 +08:00
176 changed files with 24556 additions and 4601 deletions

View File

@@ -415,3 +415,17 @@ pnpm preview # preview server (9725)
- 新建写接口 → 不用管,默认兜底;只有明确"允许短时间连发"才传 `dedupe: false`
- 新建上传 / 下载流程 → FormData / Blob 天然不在去重范围,按原方式写即可
- 用户报"双击双发"复现不出来 → 检查目标按钮是否走了 `business-form-dialog`;若用的是 `ElMessageBox.confirm`,靠第二层就该挡住
---
## 20. 我生成文档的输出格式(强约束)
- **superpowers 工作流(`docs/superpowers/plans/``docs/superpowers/specs/`)下输出的文档继续用 `.md`**——工作流以 markdown 为前提。
- **其他**我生成的文档(设计方案、复盘、规约、技术经验沉淀等)**默认用 `.html`**,沿用 `docs/debt/` 现有 HTML 文档(参考 `token-刷新机制对齐分析.html``技术负债台账.html`)的样式骨架:
- 单文件、内联 CSS
- `max-width: 980px` 居中容器、`padding: 32px 28px 80px`
- 14px / `line-height: 1.7``PingFang SC` / `Microsoft YaHei` 中文字体优先
- 模块化区块:`section` + 编号 h2、`card``table.cmp``pre``tag-ok/warn/bad/crit`
- 配色用 `--bg / --panel / --border / --text / --primary` 一套 CSS 变量
- **`README.md`** 是目录索引约定文件,**保持 `.md`**(不强行 `.html`)。
- **已有 `.md` 文档不主动改写**,等用户明确要求再转。

View File

@@ -1,35 +0,0 @@
# cn-rdms-web
这是当前项目的前端工程仓库。
原开源模板项目的介绍内容已移除,这个 README 现在只保留当前项目自身所需的信息。
## 项目说明
待补充。
建议后续在这里补充:
- 项目背景
- 技术栈
- 目录结构
- 本地启动方式
- 环境变量说明
- 构建与发布流程
## 本地开发
```bash
pnpm install
pnpm dev
```
## 常用命令
```bash
pnpm dev
pnpm build
pnpm build:dev
pnpm typecheck
pnpm lint
```

View File

@@ -126,29 +126,39 @@ export function setupElegantRouter() {
order: 0,
keepAlive: true
},
'personal-center_my-item': {
icon: 'mdi:checkbox-multiple-blank-circle-outline',
order: 1,
keepAlive: true
},
'personal-center_my-weekly': {
icon: 'mdi:calendar-week-outline',
order: 1,
order: 2,
keepAlive: true
},
'personal-center_my-monthly': {
icon: 'mdi:calendar-month-outline',
order: 2,
order: 3,
keepAlive: true
},
'personal-center_my-performance': {
icon: 'mdi:trophy-outline',
order: 3,
order: 4,
keepAlive: true
},
'personal-center_my-application': {
icon: 'mdi:file-document-outline',
order: 4,
order: 5,
keepAlive: true
},
'personal-center_overtime-application': {
icon: 'mdi:clock-plus-outline',
order: 6,
keepAlive: true
},
'personal-center_pending-approval': {
icon: 'mdi:check-decagram-outline',
order: 5,
order: 7,
keepAlive: true
},
system: {

View File

@@ -1,46 +1,13 @@
{
"generatedAt": "2026-05-13T10:54:08.684Z",
"generatedAt": "2026-06-01T01:55:51.875Z",
"description": "Frontend visible page resource whitelist for backend route/menu configuration.",
"rules": {
"directoryComponent": "layout.base",
"pageComponentPattern": "view.<routeName>",
"singlePageComponentPattern": "layout.<layoutName>$view.<routeName>"
},
"total": 21,
"total": 23,
"items": [
{
"name": "workbench",
"path": "/workbench",
"component": "layout.base$view.workbench",
"title": "workbench",
"routeTitle": "workbench",
"i18nKey": "route.workbench",
"icon": "mdi:view-dashboard-outline",
"localIcon": null,
"order": 1,
"hideInMenu": false,
"keepAlive": true,
"activeMenu": null,
"multiTab": false,
"fixedIndexInTab": null,
"redirect": null,
"props": null,
"meta": {
"title": "workbench",
"i18nKey": "route.workbench",
"icon": "mdi:view-dashboard-outline",
"localIcon": null,
"order": 1,
"keepAlive": true,
"hideInMenu": false,
"activeMenu": null,
"multiTab": false,
"fixedIndexInTab": null
},
"parentName": null,
"pageType": "single",
"source": "generated"
},
{
"name": "product_list",
"path": "/product/list",
@@ -111,7 +78,7 @@
"name": "ticket_my-submitted",
"path": "/ticket/my-submitted",
"component": "view.ticket_my-submitted",
"title": "ticket_my-submitted",
"title": "我提交的工单",
"routeTitle": "ticket_my-submitted",
"i18nKey": "route.ticket_my-submitted",
"icon": "mdi:upload-outline",
@@ -125,7 +92,7 @@
"redirect": null,
"props": null,
"meta": {
"title": "ticket_my-submitted",
"title": "我提交的工单",
"i18nKey": "route.ticket_my-submitted",
"icon": "mdi:upload-outline",
"localIcon": null,
@@ -144,7 +111,7 @@
"name": "ticket_my-pending",
"path": "/ticket/my-pending",
"component": "view.ticket_my-pending",
"title": "ticket_my-pending",
"title": "待我处理的工单",
"routeTitle": "ticket_my-pending",
"i18nKey": "route.ticket_my-pending",
"icon": "mdi:inbox-arrow-down-outline",
@@ -158,7 +125,7 @@
"redirect": null,
"props": null,
"meta": {
"title": "ticket_my-pending",
"title": "待我处理的工单",
"i18nKey": "route.ticket_my-pending",
"icon": "mdi:inbox-arrow-down-outline",
"localIcon": null,
@@ -177,7 +144,7 @@
"name": "metrics_project-progress",
"path": "/metrics/project-progress",
"component": "view.metrics_project-progress",
"title": "metrics_project-progress",
"title": "项目进度",
"routeTitle": "metrics_project-progress",
"i18nKey": "route.metrics_project-progress",
"icon": "mdi:progress-clock",
@@ -191,7 +158,7 @@
"redirect": null,
"props": null,
"meta": {
"title": "metrics_project-progress",
"title": "项目进度",
"i18nKey": "route.metrics_project-progress",
"icon": "mdi:progress-clock",
"localIcon": null,
@@ -210,7 +177,7 @@
"name": "metrics_member-efficiency",
"path": "/metrics/member-efficiency",
"component": "view.metrics_member-efficiency",
"title": "metrics_member-efficiency",
"title": "员工能效",
"routeTitle": "metrics_member-efficiency",
"i18nKey": "route.metrics_member-efficiency",
"icon": "mdi:account-multiple-check-outline",
@@ -224,7 +191,7 @@
"redirect": null,
"props": null,
"meta": {
"title": "metrics_member-efficiency",
"title": "员工能效",
"i18nKey": "route.metrics_member-efficiency",
"icon": "mdi:account-multiple-check-outline",
"localIcon": null,
@@ -243,7 +210,7 @@
"name": "metrics_worktime",
"path": "/metrics/worktime",
"component": "view.metrics_worktime",
"title": "metrics_worktime",
"title": "工时统计",
"routeTitle": "metrics_worktime",
"i18nKey": "route.metrics_worktime",
"icon": "mdi:clock-time-five-outline",
@@ -257,7 +224,7 @@
"redirect": null,
"props": null,
"meta": {
"title": "metrics_worktime",
"title": "工时统计",
"i18nKey": "route.metrics_worktime",
"icon": "mdi:clock-time-five-outline",
"localIcon": null,
@@ -272,11 +239,77 @@
"pageType": "leaf",
"source": "generated"
},
{
"name": "personal-center_my-profile",
"path": "/personal-center/my-profile",
"component": "view.personal-center_my-profile",
"title": "个人信息",
"routeTitle": "personal-center_my-profile",
"i18nKey": "route.personal-center_my-profile",
"icon": "mdi:account-box-outline",
"localIcon": null,
"order": 0,
"hideInMenu": false,
"keepAlive": true,
"activeMenu": null,
"multiTab": false,
"fixedIndexInTab": null,
"redirect": null,
"props": null,
"meta": {
"title": "个人信息",
"i18nKey": "route.personal-center_my-profile",
"icon": "mdi:account-box-outline",
"localIcon": null,
"order": 0,
"keepAlive": true,
"hideInMenu": false,
"activeMenu": null,
"multiTab": false,
"fixedIndexInTab": null
},
"parentName": "personal-center",
"pageType": "leaf",
"source": "generated"
},
{
"name": "personal-center_my-item",
"path": "/personal-center/my-item",
"component": "view.personal-center_my-item",
"title": "我的事项",
"routeTitle": "personal-center_my-item",
"i18nKey": "route.personal-center_my-item",
"icon": "mdi:checkbox-multiple-blank-circle-outline",
"localIcon": null,
"order": 1,
"hideInMenu": false,
"keepAlive": true,
"activeMenu": null,
"multiTab": false,
"fixedIndexInTab": null,
"redirect": null,
"props": null,
"meta": {
"title": "我的事项",
"i18nKey": "route.personal-center_my-item",
"icon": "mdi:checkbox-multiple-blank-circle-outline",
"localIcon": null,
"order": 1,
"keepAlive": true,
"hideInMenu": false,
"activeMenu": null,
"multiTab": false,
"fixedIndexInTab": null
},
"parentName": "personal-center",
"pageType": "leaf",
"source": "generated"
},
{
"name": "personal-center_my-weekly",
"path": "/personal-center/my-weekly",
"component": "view.personal-center_my-weekly",
"title": "personal-center_my-weekly",
"title": "我的周报",
"routeTitle": "personal-center_my-weekly",
"i18nKey": "route.personal-center_my-weekly",
"icon": "mdi:calendar-week-outline",
@@ -290,7 +323,7 @@
"redirect": null,
"props": null,
"meta": {
"title": "personal-center_my-weekly",
"title": "我的周报",
"i18nKey": "route.personal-center_my-weekly",
"icon": "mdi:calendar-week-outline",
"localIcon": null,
@@ -309,7 +342,7 @@
"name": "personal-center_my-monthly",
"path": "/personal-center/my-monthly",
"component": "view.personal-center_my-monthly",
"title": "personal-center_my-monthly",
"title": "我的月报",
"routeTitle": "personal-center_my-monthly",
"i18nKey": "route.personal-center_my-monthly",
"icon": "mdi:calendar-month-outline",
@@ -323,7 +356,7 @@
"redirect": null,
"props": null,
"meta": {
"title": "personal-center_my-monthly",
"title": "我的月报",
"i18nKey": "route.personal-center_my-monthly",
"icon": "mdi:calendar-month-outline",
"localIcon": null,
@@ -342,7 +375,7 @@
"name": "personal-center_my-performance",
"path": "/personal-center/my-performance",
"component": "view.personal-center_my-performance",
"title": "personal-center_my-performance",
"title": "我的绩效",
"routeTitle": "personal-center_my-performance",
"i18nKey": "route.personal-center_my-performance",
"icon": "mdi:trophy-outline",
@@ -356,7 +389,7 @@
"redirect": null,
"props": null,
"meta": {
"title": "personal-center_my-performance",
"title": "我的绩效",
"i18nKey": "route.personal-center_my-performance",
"icon": "mdi:trophy-outline",
"localIcon": null,
@@ -375,7 +408,7 @@
"name": "personal-center_my-application",
"path": "/personal-center/my-application",
"component": "view.personal-center_my-application",
"title": "personal-center_my-application",
"title": "我的申请",
"routeTitle": "personal-center_my-application",
"i18nKey": "route.personal-center_my-application",
"icon": "mdi:file-document-outline",
@@ -389,7 +422,7 @@
"redirect": null,
"props": null,
"meta": {
"title": "personal-center_my-application",
"title": "我的申请",
"i18nKey": "route.personal-center_my-application",
"icon": "mdi:file-document-outline",
"localIcon": null,
@@ -408,7 +441,7 @@
"name": "personal-center_pending-approval",
"path": "/personal-center/pending-approval",
"component": "view.personal-center_pending-approval",
"title": "personal-center_pending-approval",
"title": "待我审批",
"routeTitle": "personal-center_pending-approval",
"i18nKey": "route.personal-center_pending-approval",
"icon": "mdi:check-decagram-outline",
@@ -422,7 +455,7 @@
"redirect": null,
"props": null,
"meta": {
"title": "personal-center_pending-approval",
"title": "待我审批",
"i18nKey": "route.personal-center_pending-approval",
"icon": "mdi:check-decagram-outline",
"localIcon": null,
@@ -437,6 +470,39 @@
"pageType": "leaf",
"source": "generated"
},
{
"name": "personal-center_overtime-application",
"path": "/personal-center/overtime-application",
"component": "view.personal-center_overtime-application",
"title": "加班申请",
"routeTitle": "personal-center_overtime-application",
"i18nKey": "route.personal-center_overtime-application",
"icon": "mdi:clock-plus-outline",
"localIcon": null,
"order": 6,
"hideInMenu": false,
"keepAlive": true,
"activeMenu": null,
"multiTab": false,
"fixedIndexInTab": null,
"redirect": null,
"props": null,
"meta": {
"title": "加班申请",
"i18nKey": "route.personal-center_overtime-application",
"icon": "mdi:clock-plus-outline",
"localIcon": null,
"order": 6,
"keepAlive": true,
"hideInMenu": false,
"activeMenu": null,
"multiTab": false,
"fixedIndexInTab": null
},
"parentName": "personal-center",
"pageType": "leaf",
"source": "generated"
},
{
"name": "system_user",
"path": "/system/user",
@@ -639,7 +705,7 @@
"name": "infra_state-machine",
"path": "/infra/state-machine",
"component": "view.infra_state-machine",
"title": "infra_state-machine",
"title": "状态机管理",
"routeTitle": "infra_state-machine",
"i18nKey": "route.infra_state-machine",
"icon": "mdi:state-machine",
@@ -653,7 +719,7 @@
"redirect": null,
"props": null,
"meta": {
"title": "infra_state-machine",
"title": "状态机管理",
"i18nKey": "route.infra_state-machine",
"icon": "mdi:state-machine",
"localIcon": null,
@@ -672,7 +738,7 @@
"name": "infra_rd-code",
"path": "/infra/rd-code",
"component": "view.infra_rd-code",
"title": "infra_rd-code",
"title": "研发令号",
"routeTitle": "infra_rd-code",
"i18nKey": "route.infra_rd-code",
"icon": "mdi:identifier",
@@ -686,7 +752,7 @@
"redirect": null,
"props": null,
"meta": {
"title": "infra_rd-code",
"title": "研发令号",
"i18nKey": "route.infra_rd-code",
"icon": "mdi:identifier",
"localIcon": null,

View File

@@ -1,292 +0,0 @@
# 产品对象首页改版设计说明
日期2026-04-23
## 1. 目标
本设计用于收敛 RDMS 产品对象上下文默认首页的改版方向。
本轮目标不是继续做“说明型占位页”,而是明确把当前 `/product/dashboard?objectId=...` 改成一个真正可用的产品对象首页:
- 第一眼先让用户知道当前看的是什么产品
- 第二眼能快速判断对象最近发生了什么
- 第三眼能看出需求池现在的经营状态和最近变化
- 底部为后续业务模块保留正式挂载位,而不是临时拼接入口
## 2. 已确认诉求
基于本轮对话,已确认以下用户诉求:
1. 首页顶部必须先展示产品基础概述,而不是先铺统计卡片
2. 基础概述至少包含:名称、编号、团队、产品经理等对象基础信息
3. 页面需要一块明显的时间线,用于承接产品对象与团队变更动态
4. 页面需要承接需求池管理情况,重点看总量、状态、待处理等统计信息
5. 需求相关事件不要混入对象时间线,应单独作为需求池最近变化区域
6. 快捷入口不要保留
7. 底部允许保留后续扩展区,重点预留给里程碑、风险点管理、产品资料等模块
8. 能接真实接口就接真实接口,当前没有稳定接口的区域允许先用假数据,但结构必须按正式首页来设计
## 3. 首页定位结论
本页定位不是:
- 纯报表看板
- 纯审计日志页
- 设置页搬运版
- 导航入口集合页
本页定位应当是:
- 产品对象首页
- 偏统计,也带审计
- 但页面主语始终是“当前产品对象”
换句话说,这个页面要同时回答三个问题:
1. 我现在看的是什么产品?
2. 这个产品对象最近发生了什么?
3. 这个产品的需求池现在处于什么状态?
## 4. 页面结构
### 4.1 桌面端结构
桌面端建议采用三层结构:
1. 顶部 `对象基础概述横幅`
2. 中部 `左时间线 + 右需求池双模块`
3. 底部 `扩展信息区`
推荐布局比例:
- 顶部横幅:`24 / 24`
- 中部主区:左 `16 / 24`,右 `8 / 24`
- 底部扩展区:`24 / 24`
中部左侧时间线高度应明显高于右侧任一单模块,形成首页主阅读区。
### 4.2 移动端结构
移动端统一退化为单列纵向布局,顺序为:
1. 对象基础概述横幅
2. 对象 / 团队动态时间线
3. 需求池管理概览
4. 需求池最近变化
5. 扩展信息区
移动端不强撑左右栏并排,不做卡片墙式压缩。
## 5. 模块设计
### 5.1 对象基础概述横幅
顶部采用“档案横幅型”,不采用纯指标卡片型。
横幅左侧承接对象身份信息:
- 产品名称
- 产品编号
- 当前状态标签
- 产品经理
- 团队规模
- 团队角色摘要
- 简短描述或备注
横幅右侧承接 4 个摘要指标:
- 团队人数
- 需求总量
- 待处理需求
- 最近动态时间
设计原则:
- 左侧负责建立对象识别
- 右侧负责快速判断当前概况
- 右侧指标只保留 4 项,不堆成报表卡片墙
### 5.2 对象 / 团队动态时间线
该区域位于中部左侧,是首页的主阅读区。
这条时间线只承接对象与团队变化,不承接需求事件。
第一版事件范围收敛为:
- 产品创建
- 产品状态变更
- 产品经理变更
- 成员加入
- 成员移出
- 成员角色调整
每条时间线建议展示:
- 事件标题
- 事件类型标签
- 发生时间
- 操作摘要
- 必要时展示原因或备注
表达目标是“业务时间线”,不是后台审计表格。
### 5.3 需求池管理概览
该区域位于中部右侧上半块,用于表达需求池的经营状态。
第一版首页需要优先看到的内容:
- 需求总量
- 各状态数量
- 待处理数量
- 高优先级待处理数量
展示方式建议为“摘要指标 + 状态分布列表”,不直接在首页展开完整需求表格。
这一块回答的是:
- 需求池是否健康
- 当前待处理压力大不大
- 是否存在需要优先关注的积压
### 5.4 需求池最近变化
该区域位于中部右侧下半块,与需求池管理概览上下分层,但属于同一侧栏语义。
该区域不重复展示总量,而是展示需求池最近发生的变化。
第一版建议承接:
- 最近新增需求
- 最近状态流转
- 最近关闭或完成
每条记录建议至少展示:
- 需求标题
- 动作类型
- 时间
- 当前状态或状态变更摘要
若当前没有真实数据,仍保留正式模块壳,不退化成“待开发”一句话。
### 5.5 扩展信息区
底部不再保留快捷入口,改为正式扩展信息区。
当前优先预留 3 类模块位:
- 里程碑
- 风险点管理
- 产品资料
这一层的作用是:
- 为后续对象级信息继续扩展留下稳定挂载位
- 不把中部主结构挤成信息大杂烩
- 避免为了未来模块提前做假导航入口
如果当前没有稳定接口,可先保留正式卡片结构与空态说明。
## 6. 数据策略
### 6.1 真实接口优先
当前首页优先消费现有真实接口:
- `fetchGetProduct`
- `fetchGetProductSettings`
- `fetchGetProductMembers`
这些接口足以支撑:
- 对象基础概述中的名称、编号、状态、产品经理、描述
- 团队人数与角色摘要
- 最近动态中的产品创建、状态变化、成员加入/移出
### 6.2 假数据使用边界
当前没有稳定真实接口的区域,允许先用假数据,但边界必须明确:
- 需求池管理概览
- 需求池最近变化
- 扩展信息区中的里程碑、风险点管理、产品资料摘要
假数据的使用原则:
1. 只补“当前没有稳定接口”的区域
2. 不反向污染对象基础信息
3. 不把假数据混入对象上下文 store
4. 数据源要集中放在概览页自己的 mock 模块中,方便后续替换
### 6.3 不推荐的做法
以下做法应避免:
- 把需求假数据散落写进页面组件
- 用对象 demo 数据冒充真实产品详情
- 把对象时间线和需求时间线混成一条
- 用快捷入口伪装成首页内容
## 7. 空态规则
首页至少要区分三种状态:
1. 能力未接入,只能先显示正式占位信息
2. 能力已接入,但当前该产品暂无业务数据
3. 当前用户无权限查看该模块
这三种状态不能共用一套模糊文案。
对需求池和扩展信息区,当前阶段更推荐“正式空态”而不是“待开发”。
## 8. 页面边界
首页明确不承接以下内容:
- 快捷入口导航区
- 完整团队成员表格
- 完整需求列表表格
- 设置页重表单
- 完整审计日志明细页
首页要做的是概述、判断与阅读,不是重操作页。
## 9. 实施建议
第一阶段建议先完成结构性改造:
1. 重做顶部横幅,建立对象档案感
2. 保留中部左高右双块结构
3. 用真实接口接通对象概述与对象 / 团队时间线
4. 用局部 mock 数据先接通需求池两块和底部扩展区
第二阶段再逐步替换需求池与扩展区数据源:
- 接真实需求池统计接口
- 接真实需求动态接口
- 接里程碑、风险点、产品资料摘要接口
## 10. 验证标准
本设计是否成立,可按以下标准判断:
1. 进入首页后,第一眼能认出当前产品对象
2. 用户能自然读到对象 / 团队最近发生了什么
3. 右侧能快速判断需求池当前压力与最近变化
4. 页面看起来像“对象首页”,而不是“普通后台卡片堆叠页”
5. 当前没有真实接口的区域也保留正式结构,不显得像临时占位
6. 后续新增里程碑、风险点管理、产品资料等能力时,不需要推翻整页结构
## 11. 本轮设计结论
本轮最终设计结论如下:
- 首页定位为“产品对象首页”,偏统计,也带审计,但不做纯报表页
- 顶部采用档案横幅型,先立住对象身份信息
- 中部左侧是高权重的对象 / 团队动态时间线
- 中部右侧拆为“需求池管理概览 + 需求池最近变化”上下两块
- 底部去掉快捷入口,改为正式扩展信息区
- 当前有真实接口的模块优先接真实接口
- 当前没有稳定接口的区域允许先用假数据,但必须隔离在概览页局部 mock 数据源中

View File

@@ -41,6 +41,7 @@
"@antv/g2": "5.4.0",
"@antv/g6": "5.0.49",
"@better-scroll/core": "2.5.1",
"@iconify-vue/mingcute": "^1.0.5",
"@iconify/vue": "5.0.0",
"@sa/axios": "workspace:*",
"@sa/color": "workspace:*",

22
pnpm-lock.yaml generated
View File

@@ -20,6 +20,9 @@ importers:
'@better-scroll/core':
specifier: 2.5.1
version: 2.5.1
'@iconify-vue/mingcute':
specifier: ^1.0.5
version: 1.0.5(vue@3.5.20(typescript@5.8.3))
'@iconify/vue':
specifier: 5.0.0
version: 5.0.0(vue@3.5.20(typescript@5.8.3))
@@ -854,6 +857,14 @@ packages:
resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
engines: {node: '>=18.18'}
'@iconify-vue/mingcute@1.0.5':
resolution: {integrity: sha512-9g/iEU2XdobbfS6vKp01btfBlPiMqlqa+GujwYOc5WVJierhKt3dF0+tamomdk9vYcIsJiGcqOaKvrJF0g6prA==}
'@iconify/css-vue@1.0.2':
resolution: {integrity: sha512-KXG9zXTMmJLi1AF2ket+YWUGdSqFvIMSnCO789uOVpba6SZhqeUttu0JIaEcq2dNlt4oonwdtMyerkpRkAFYhw==}
peerDependencies:
vue: '>=3.0.0'
'@iconify/json@2.2.380':
resolution: {integrity: sha512-+Al/Q+mMB/nLz/tawmJEOkCs6+RKKVUS/Yg9I80h2yRpu0kIzxVLQRfF0NifXz/fH92vDVXbS399wio4lMVF4Q==}
@@ -6173,6 +6184,17 @@ snapshots:
'@humanwhocodes/retry@0.4.3': {}
'@iconify-vue/mingcute@1.0.5(vue@3.5.20(typescript@5.8.3))':
dependencies:
'@iconify/css-vue': 1.0.2(vue@3.5.20(typescript@5.8.3))
transitivePeerDependencies:
- vue
'@iconify/css-vue@1.0.2(vue@3.5.20(typescript@5.8.3))':
dependencies:
'@iconify/types': 2.0.0
vue: 3.5.20(typescript@5.8.3)
'@iconify/json@2.2.380':
dependencies:
'@iconify/types': 2.0.0

File diff suppressed because it is too large Load Diff

View File

@@ -470,7 +470,7 @@ onBeforeUnmount(() => {
</ElIcon>
<ElLink
type="primary"
:underline="false"
underline="never"
class="business-attachment-uploader__name"
:title="item.name"
@click="handleOpen(item)"
@@ -478,7 +478,7 @@ onBeforeUnmount(() => {
{{ item.name }}
</ElLink>
<span v-if="item.size" class="business-attachment-uploader__size">{{ formatSize(item.size) }}</span>
<ElLink type="primary" :underline="false" @click="handleDownload(item)">下载</ElLink>
<ElLink type="primary" underline="never" @click="handleDownload(item)">下载</ElLink>
<ElButton v-if="!disabled" link type="danger" :icon="Delete" @click="handleRemove(item)" />
</li>
@@ -509,7 +509,7 @@ onBeforeUnmount(() => {
</ElIcon>
<ElLink
type="primary"
:underline="false"
underline="never"
class="business-attachment-uploader__name"
:title="item.name"
@click="handleOpen(item)"
@@ -517,7 +517,7 @@ onBeforeUnmount(() => {
{{ item.name }}
</ElLink>
<span v-if="item.size" class="business-attachment-uploader__size">{{ formatSize(item.size) }}</span>
<ElLink type="primary" :underline="false" @click="handleDownload(item)">下载</ElLink>
<ElLink type="primary" underline="never" @click="handleDownload(item)">下载</ElLink>
<ElButton v-if="!disabled" link type="danger" :icon="Delete" @click="handleRemove(item)" />
</li>
</ul>

View File

@@ -21,6 +21,7 @@ const isEmpty = computed(() => !safeHtml.value || safeHtml.value.replace(/<[^>]+
<template>
<div class="business-rich-text-view">
<span v-if="isEmpty" class="business-rich-text-view__empty">{{ props.emptyText }}</span>
<!-- eslint-disable-next-line vue/no-v-html -->
<div v-else class="business-rich-text-view__content" v-html="safeHtml" />
</div>
</template>

View File

@@ -1,12 +1,13 @@
import { computed, defineComponent, ref } from 'vue';
import type { PropType } from 'vue';
import { ElButton, ElPopover } from 'element-plus';
import { computed, defineComponent, h, ref } from 'vue';
import type { Component, PropType } from 'vue';
import { ElButton, ElPopover, ElTooltip } from 'element-plus';
import { $t } from '@/locales';
export type BusinessTableAction = {
key: string;
label: string;
buttonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
icon?: Component;
disabled?: boolean;
onClick: () => void | Promise<void>;
};
@@ -17,12 +18,20 @@ export default defineComponent({
actions: {
type: Array as PropType<BusinessTableAction[]>,
required: true
},
variant: {
type: String as PropType<'button' | 'icon'>,
default: 'button'
}
},
setup(props) {
const popoverVisible = ref(false);
const directActions = computed(() => {
if (props.variant === 'icon') {
return props.actions;
}
if (props.actions.length <= 2) {
return props.actions;
}
@@ -31,6 +40,10 @@ export default defineComponent({
});
const moreActions = computed(() => {
if (props.variant === 'icon') {
return [];
}
if (props.actions.length <= 2) {
return [];
}
@@ -47,21 +60,86 @@ export default defineComponent({
await action.onClick();
}
return () => (
<div class="business-table-action-cell" onClick={event => event.stopPropagation()}>
{directActions.value.map(action => (
function renderIcon(action: BusinessTableAction) {
if (!action.icon) return null;
return h(action.icon, { class: 'business-table-action-icon' });
}
function renderButtonAction(action: BusinessTableAction) {
return (
<ElButton
key={action.key}
plain
size="small"
type={action.buttonType}
disabled={action.disabled}
class="business-table-action-button"
onClick={() => handleAction(action)}
>
{action.label}
</ElButton>
);
}
function renderIconAction(action: BusinessTableAction) {
return (
<ElTooltip key={action.key} content={action.label} placement="top">
<ElButton
key={action.key}
plain
link
size="small"
type={action.buttonType}
disabled={action.disabled}
class="business-table-action-button"
class="business-table-action-icon-button"
aria-label={action.label}
onClick={() => handleAction(action)}
>
{action.label}
{renderIcon(action)}
</ElButton>
))}
</ElTooltip>
);
}
function renderMenuButton(action: BusinessTableAction) {
if (props.variant === 'icon') {
return (
<ElButton
key={action.key}
link
size="small"
type={action.buttonType}
disabled={action.disabled}
class="business-table-action-menu__link"
onClick={() => handleAction(action)}
>
<span class="business-table-action-menu__item">
{renderIcon(action)}
<span>{action.label}</span>
</span>
</ElButton>
);
}
return (
<ElButton
key={action.key}
plain
size="small"
type={action.buttonType}
disabled={action.disabled}
class="business-table-action-menu__button"
onClick={() => handleAction(action)}
>
{action.label}
</ElButton>
);
}
return () => (
<div class="business-table-action-cell" onClick={event => event.stopPropagation()}>
{directActions.value.map(action =>
props.variant === 'icon' ? renderIconAction(action) : renderButtonAction(action)
)}
{moreActions.value.length > 0 && (
<ElPopover
@@ -74,32 +152,28 @@ export default defineComponent({
{{
reference: () => (
<ElButton
plain
link={props.variant === 'icon'}
plain={props.variant !== 'icon'}
size="small"
class="business-table-action-button"
class={
props.variant === 'icon' ? 'business-table-action-icon-button' : 'business-table-action-button'
}
aria-label={$t('common.more')}
onClick={event => event.stopPropagation()}
>
<span class="inline-flex items-center gap-4px">
{$t('common.more')}
<icon-mdi-chevron-down class="text-14px" />
</span>
{props.variant === 'icon' ? (
<icon-mdi-dots-horizontal class="business-table-action-icon" />
) : (
<span class="inline-flex items-center gap-4px">
{$t('common.more')}
<icon-mdi-chevron-down class="text-14px" />
</span>
)}
</ElButton>
),
default: () => (
<div class="business-table-action-menu">
{moreActions.value.map(action => (
<ElButton
key={action.key}
plain
size="small"
type={action.buttonType}
disabled={action.disabled}
class="business-table-action-menu__button"
onClick={() => handleAction(action)}
>
{action.label}
</ElButton>
))}
{moreActions.value.map(action => renderMenuButton(action))}
</div>
)
}}

View File

@@ -0,0 +1,938 @@
<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { useFormItem } from 'element-plus';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import { usePickerSelection } from './business-user-picker/composables/use-picker-selection';
import { useDeptSource } from './business-user-picker/composables/use-dept-source';
import { useChainSource } from './business-user-picker/composables/use-chain-source';
import UserPickerTrigger from './business-user-picker/components/user-picker-trigger.vue';
import IconEpOfficeBuilding from '~icons/ep/office-building';
import IconEpUser from '~icons/ep/user';
defineOptions({ name: 'BusinessUserPicker' });
type Source = 'dept' | 'chain' | 'all';
interface Props {
userOptions: Api.SystemManage.UserSimple[];
sources?: Source[];
multiple?: boolean;
disabledUserIds?: readonly string[];
excludeUserIds?: readonly string[];
disabledLabel?: string;
placeholder?: string;
title?: string;
dialogWidth?: string;
confirmText?: string;
triggerSize?: 'default' | 'small' | 'large';
disabled?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
sources: () => ['dept', 'chain', 'all'],
multiple: false,
disabledUserIds: () => [],
excludeUserIds: () => [],
disabledLabel: '',
placeholder: '请选择用户',
title: '选择用户',
dialogWidth: '820px',
confirmText: '',
triggerSize: 'default',
disabled: false
});
interface Emits {
(e: 'change', value: string | string[] | null): void;
(e: 'confirm', payload: { userIds: string[] }): void;
(e: 'cancel'): void;
}
const emit = defineEmits<Emits>();
const model = defineModel<string | string[] | null>({ default: null });
const visible = defineModel<boolean>('visible', { default: false });
const { formItem } = useFormItem();
const source = ref<Source>(props.sources[0] ?? 'all');
const currentNodeId = ref<string | null>(null);
const treeSearch = ref('');
const userSearch = ref('');
const hideAdded = ref(false);
const disabledUserIdSet = computed(() => new Set(props.disabledUserIds.map(String)));
const excludeUserIdSet = computed(() => new Set(props.excludeUserIds.map(String)));
const selection = usePickerSelection(() => ({ multiple: props.multiple }));
const deptSource = useDeptSource(
() => props.userOptions,
() => new Set(selection.selectedIds.value),
() => disabledUserIdSet.value
);
const chainSource = useChainSource(
() => new Set(selection.selectedIds.value),
() => disabledUserIdSet.value
);
const showTabs = computed(() => props.sources.length > 1);
const userByIdMap = computed(() => new Map(props.userOptions.map(u => [String(u.id), u])));
const committedIds = computed<string[]>(() => {
const value = model.value;
if (Array.isArray(value)) {
return value.map(String);
}
if (typeof value === 'string' && value) {
return [value];
}
return [];
});
const selectedUsers = computed(() =>
committedIds.value.map(id => userByIdMap.value.get(id)).filter((u): u is Api.SystemManage.UserSimple => Boolean(u))
);
const lockedSelectedIds = computed(() => selection.selectedIds.value.filter(id => disabledUserIdSet.value.has(id)));
const visibleSelectedIds = computed(() => selection.selectedIds.value.slice(0, 4));
const overflowSelectedCount = computed(() => Math.max(0, selection.size.value - 4));
const overflowSelectedIds = computed(() => selection.selectedIds.value.slice(4));
const overflowPopoverVisible = ref(false);
const overflowReferenceEl = ref<HTMLElement | null>(null);
function handleOverflowOutsideClick(e: MouseEvent) {
if (!overflowPopoverVisible.value) return;
const target = e.target as HTMLElement | null;
if (!target) return;
if (target.closest('.user-picker__overflow-popper')) return;
if (target.closest('.el-popper')) return;
if (overflowReferenceEl.value?.contains(target)) return;
overflowPopoverVisible.value = false;
}
onMounted(() => document.addEventListener('mousedown', handleOverflowOutsideClick, true));
onBeforeUnmount(() => document.removeEventListener('mousedown', handleOverflowOutsideClick, true));
function getUserById(uid: string) {
return userByIdMap.value.get(uid);
}
function visibleUserIds(): string[] {
let pool: string[];
if (source.value === 'all' || !currentNodeId.value) {
pool = props.userOptions.map(u => String(u.id));
} else if (source.value === 'dept') {
const node = deptSource.findNode(deptSource.tree.value, currentNodeId.value);
pool = node ? deptSource.getNodeUserIds(node) : props.userOptions.map(u => String(u.id));
} else {
const node = chainSource.findNode(chainSource.tree.value, currentNodeId.value);
pool = node ? chainSource.getNodeUserIds(node) : props.userOptions.map(u => String(u.id));
}
return pool.filter(id => !excludeUserIdSet.value.has(id));
}
const filteredUserIds = computed(() => {
let ids = visibleUserIds();
if (hideAdded.value) ids = ids.filter(id => !disabledUserIdSet.value.has(id));
const kw = userSearch.value.trim().toLowerCase();
if (kw) {
ids = ids.filter(id => {
const u = getUserById(id);
if (!u) return false;
return (
u.nickname.toLowerCase().includes(kw) ||
(u.username ?? '').toLowerCase().includes(kw) ||
(u.deptName ?? '').toLowerCase().includes(kw)
);
});
}
return ids;
});
async function switchSource(next: Source) {
if (source.value === next) return;
source.value = next;
currentNodeId.value = null;
treeSearch.value = '';
if (next === 'dept') await deptSource.ensureLoaded();
else if (next === 'chain') await chainSource.ensureLoaded();
}
function handleDeptNodeClick(data: Api.SystemManage.DeptSimple) {
currentNodeId.value = deptSource.nodeKey(data);
}
function handleChainNodeClick(data: Api.SystemManage.UserManagementRelationTreeRespVO) {
currentNodeId.value = chainSource.nodeKey(data);
}
function toggleDeptCheck(node: Api.SystemManage.DeptSimple) {
if (!props.multiple) return;
const ids = deptSource.getNodeUserIds(node).filter(id => !disabledUserIdSet.value.has(id));
const state = deptSource.getNodeCheckState(node);
if (state === 'all') selection.removeMany(ids);
else selection.addMany(ids);
}
function toggleChainCheck(node: Api.SystemManage.UserManagementRelationTreeRespVO) {
if (!props.multiple) return;
const ids = chainSource.getNodeUserIds(node).filter(id => !disabledUserIdSet.value.has(id));
const state = chainSource.getNodeCheckState(node);
if (state === 'all') selection.removeMany(ids);
else selection.addMany(ids);
}
function toggleUser(uid: string) {
if (disabledUserIdSet.value.has(uid)) return;
selection.toggle(uid);
}
function clearAll() {
selection.clear(lockedSelectedIds.value);
}
function clearUserFilter() {
userSearch.value = '';
hideAdded.value = false;
}
const confirmDisabled = computed(() => {
if (!props.multiple) return !selection.selectedIds.value.length;
return selection.size.value === 0;
});
const resolvedConfirmText = computed(() => {
if (props.confirmText) return props.confirmText;
if (!props.multiple) return '确定';
return `确定(${selection.size.value})`;
});
function handleConfirm() {
if (confirmDisabled.value) return;
const value = selection.commit();
model.value = value;
emit('change', value);
emit('confirm', { userIds: selection.selectedIds.value });
visible.value = false;
nextTick(() => {
formItem?.validate?.('change').catch(() => {});
});
}
function handleCancel() {
emit('cancel');
visible.value = false;
}
function openDialog() {
visible.value = true;
}
watch(visible, async value => {
if (value) {
treeSearch.value = '';
userSearch.value = '';
hideAdded.value = false;
currentNodeId.value = null;
source.value = props.sources[0] ?? 'all';
selection.reset(model.value);
if (source.value === 'dept') await deptSource.ensureLoaded();
else if (source.value === 'chain') await chainSource.ensureLoaded();
await nextTick();
}
});
</script>
<template>
<div class="business-user-picker">
<slot name="trigger" :open="openDialog" :selected-users="selectedUsers" :disabled="disabled">
<UserPickerTrigger
:selected-users="selectedUsers"
:placeholder="placeholder"
:multiple="multiple"
:disabled="disabled"
:size="triggerSize"
@open="openDialog"
/>
</slot>
<BusinessFormDialog
v-model="visible"
:title="title"
preset="lg"
:width="dialogWidth"
max-body-height="540px"
:confirm-disabled="confirmDisabled"
:confirm-text="resolvedConfirmText"
@confirm="handleConfirm"
@cancel="handleCancel"
>
<div class="user-picker">
<div v-if="showTabs" class="user-picker__tabs">
<button
v-for="tab in sources"
:key="tab"
class="user-picker__tab"
:class="{ 'is-active': source === tab }"
type="button"
@click="switchSource(tab)"
>
{{ tab === 'dept' ? '部门' : tab === 'chain' ? '团队' : '全部用户' }}
</button>
</div>
<div class="user-picker__picker" :class="{ 'is-single': source === 'all' }">
<div v-if="source !== 'all'" class="user-picker__col user-picker__col--tree">
<div class="user-picker__col-head">{{ source === 'dept' ? '部门' : '团队' }}</div>
<div class="user-picker__search">
<ElInput
v-model="treeSearch"
size="small"
clearable
:placeholder="source === 'dept' ? '搜索部门…' : '搜索成员…'"
/>
</div>
<div
v-loading="source === 'dept' ? deptSource.loading.value : chainSource.loading.value"
class="user-picker__col-body"
>
<ElTree
v-if="source === 'dept'"
:data="deptSource.filterByKeyword(treeSearch)"
:props="deptSource.treeProps.value"
node-key="id"
:expand-on-click-node="false"
:default-expand-all="true"
:indent="14"
class="user-picker__tree"
@node-click="handleDeptNodeClick"
>
<template #default="{ data }">
<div class="user-picker__node" :class="{ 'is-active': currentNodeId === String(data.id) }">
<span
v-if="multiple"
class="user-picker__node-check"
:class="{
'is-checked': deptSource.getNodeCheckState(data) === 'all',
'is-partial': deptSource.getNodeCheckState(data) === 'partial'
}"
@click.stop="toggleDeptCheck(data)"
/>
<IconEpOfficeBuilding class="user-picker__node-icon" />
<span class="user-picker__node-label">{{ data.name }}</span>
<span v-if="deptSource.getMetaText(data)" class="user-picker__node-meta">
{{ deptSource.getMetaText(data) }}
</span>
</div>
</template>
</ElTree>
<ElTree
v-else
:data="chainSource.filterByKeyword(treeSearch)"
:props="chainSource.treeProps.value"
node-key="userId"
:expand-on-click-node="false"
:default-expand-all="true"
:indent="14"
class="user-picker__tree"
@node-click="handleChainNodeClick"
>
<template #default="{ data }">
<div class="user-picker__node" :class="{ 'is-active': currentNodeId === chainSource.nodeKey(data) }">
<span
v-if="multiple"
class="user-picker__node-check"
:class="{
'is-checked': chainSource.getNodeCheckState(data) === 'all',
'is-partial': chainSource.getNodeCheckState(data) === 'partial'
}"
@click.stop="toggleChainCheck(data)"
/>
<IconEpUser class="user-picker__node-icon" />
<span class="user-picker__node-label">{{ data.userNickname }}</span>
<span v-if="chainSource.getMetaText(data)" class="user-picker__node-meta">
{{ chainSource.getMetaText(data) }}
</span>
</div>
</template>
</ElTree>
</div>
</div>
<div class="user-picker__col user-picker__col--users">
<div class="user-picker__col-head user-picker__col-head--user">
<span>
候选用户(
<span>{{ filteredUserIds.length }}</span>
)
</span>
<label v-if="multiple" class="user-picker__hide-added">
<ElCheckbox v-model="hideAdded">隐藏已添加</ElCheckbox>
</label>
</div>
<div class="user-picker__search">
<ElInput
v-model="userSearch"
size="small"
clearable
:placeholder="source === 'all' ? '搜索用户名 / 部门…' : '搜索用户名…'"
/>
</div>
<div class="user-picker__col-body">
<div v-if="!filteredUserIds.length" class="user-picker__empty">
该节点下没有匹配用户
<button
v-if="userSearch || hideAdded"
type="button"
class="user-picker__link user-picker__empty-action"
@click="clearUserFilter"
>
清除筛选条件
</button>
</div>
<div
v-for="uid in filteredUserIds"
:key="uid"
class="user-picker__user-row"
:class="{
'is-disabled': disabledUserIdSet.has(uid),
'is-selected': !multiple && selection.has(uid)
}"
@click="toggleUser(uid)"
>
<span v-if="multiple" class="user-picker__node-check" :class="{ 'is-checked': selection.has(uid) }" />
<span class="user-picker__user-avatar">{{ (getUserById(uid)?.nickname ?? '?').slice(0, 1) }}</span>
<div class="user-picker__user-main">
<div class="user-picker__user-name">{{ getUserById(uid)?.nickname }}</div>
</div>
<span v-if="disabledUserIdSet.has(uid) && disabledLabel" class="user-picker__user-tag">
{{ disabledLabel }}
</span>
</div>
</div>
</div>
</div>
<div v-if="multiple" class="user-picker__selected">
<div class="user-picker__selected-head">
<span>
已选
<strong>{{ selection.size.value }}</strong>
</span>
<button
v-if="selection.size.value > lockedSelectedIds.length"
type="button"
class="user-picker__link user-picker__link--danger"
@click="clearAll"
>
清空
</button>
</div>
<div v-if="selection.size.value === 0" class="user-picker__selected-empty">从左侧勾选用户后会出现在这里</div>
<div v-else class="user-picker__chips">
<span v-for="uid in visibleSelectedIds" :key="uid" class="user-picker__chip">
<span class="user-picker__chip-name">
{{ getUserById(uid)?.nickname }}
<ElTooltip v-if="disabledUserIdSet.has(uid) && disabledLabel" :content="disabledLabel" placement="top">
<span class="user-picker__chip-lock">·{{ disabledLabel }}</span>
</ElTooltip>
</span>
<button
v-if="!disabledUserIdSet.has(uid)"
type="button"
class="user-picker__chip-x"
@click="toggleUser(uid)"
>
×
</button>
</span>
<ElPopover
v-if="overflowSelectedCount > 0"
:visible="overflowPopoverVisible"
placement="top-end"
:width="360"
popper-class="user-picker__overflow-popper"
>
<template #reference>
<button
ref="overflowReferenceEl"
type="button"
class="user-picker__chip-more"
@click="overflowPopoverVisible = !overflowPopoverVisible"
>
+{{ overflowSelectedCount }} 更多
</button>
</template>
<div class="user-picker__overflow-head">
<span>
另外
<strong>{{ overflowSelectedCount }}</strong>
</span>
</div>
<div class="user-picker__overflow-chips">
<span v-for="uid in overflowSelectedIds" :key="uid" class="user-picker__chip">
<span class="user-picker__chip-name">
{{ getUserById(uid)?.nickname }}
<ElTooltip
v-if="disabledUserIdSet.has(uid) && disabledLabel"
:content="disabledLabel"
placement="top"
>
<span class="user-picker__chip-lock">·{{ disabledLabel }}</span>
</ElTooltip>
</span>
<button
v-if="!disabledUserIdSet.has(uid)"
type="button"
class="user-picker__chip-x"
@click="toggleUser(uid)"
>
×
</button>
</span>
</div>
</ElPopover>
</div>
</div>
</div>
</BusinessFormDialog>
</div>
</template>
<style scoped>
.business-user-picker {
display: block;
width: 100%;
}
/* picker 内容上下贴满,标准 body padding 显得空——仅在含本组件的 dialog 上收紧 */
:deep(.business-form-dialog__body:has(.user-picker)) {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.user-picker {
display: flex;
flex-direction: column;
gap: 10px;
}
.user-picker__tabs {
display: flex;
gap: 2px;
border-bottom: 1px solid var(--el-border-color);
}
.user-picker__tab {
padding: 6px 14px;
border: none;
background: transparent;
cursor: pointer;
font-size: 12.5px;
color: var(--el-text-color-regular);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.user-picker__tab.is-active {
color: var(--el-color-primary);
border-bottom-color: var(--el-color-primary);
font-weight: 600;
}
.user-picker__picker {
display: grid;
grid-template-columns: 240px 1fr;
gap: 12px;
height: min(280px, 44vh);
min-height: 260px;
}
.user-picker__picker.is-single {
grid-template-columns: 1fr;
}
.user-picker__col {
display: flex;
flex-direction: column;
border: 1px solid var(--el-border-color);
border-radius: 8px;
overflow: hidden;
background: #fff;
}
.user-picker__col-head {
padding: 6px 10px;
border-bottom: 1px solid var(--el-border-color);
background: #fafbfc;
font-size: 12px;
color: var(--el-text-color-regular);
}
.user-picker__col-head--user {
display: flex;
justify-content: space-between;
align-items: center;
}
.user-picker__col-body {
flex: 1;
overflow-y: auto;
}
.user-picker__search {
padding: 6px 10px;
border-bottom: 1px solid var(--el-border-color);
}
.user-picker__tree {
padding: 4px;
background: transparent;
}
.user-picker__tree :deep(.el-tree-node__content) {
height: 32px;
padding-right: 8px !important;
border-radius: 4px;
transition: background-color 0.15s ease;
}
.user-picker__tree :deep(.el-tree-node__content:hover) {
background: var(--el-fill-color-light);
}
.user-picker__tree :deep(.el-tree-node__expand-icon) {
padding: 4px;
color: var(--el-text-color-placeholder);
font-size: 14px;
}
.user-picker__tree :deep(.el-tree-node__expand-icon.is-leaf) {
color: transparent;
}
.user-picker__node {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
height: 100%;
font-size: 13px;
color: var(--el-text-color-primary);
}
.user-picker__node.is-active {
color: var(--el-color-primary);
font-weight: 500;
}
.user-picker__node-check {
position: relative;
flex-shrink: 0;
width: 14px;
height: 14px;
border: 1px solid var(--el-border-color);
border-radius: 2px;
background: var(--el-bg-color);
cursor: pointer;
transition:
border-color 0.15s ease,
background-color 0.15s ease;
}
.user-picker__node-check:hover {
border-color: var(--el-color-primary);
}
.user-picker__node-check.is-checked {
background: var(--el-color-primary);
border-color: var(--el-color-primary);
}
.user-picker__node-check.is-checked::after {
content: '';
position: absolute;
top: 1px;
left: 4px;
width: 3px;
height: 7px;
border: solid #fff;
border-width: 0 1px 1px 0;
transform: rotate(45deg);
}
.user-picker__node-check.is-partial {
background: var(--el-color-primary);
border-color: var(--el-color-primary);
}
.user-picker__node-check.is-partial::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 2px;
margin: -1px 0 0 -4px;
background: #fff;
border-radius: 1px;
}
.user-picker__node-icon {
flex-shrink: 0;
font-size: 15px;
color: var(--el-text-color-secondary);
transition: color 0.15s ease;
}
.user-picker__node.is-active .user-picker__node-icon {
color: var(--el-color-primary);
}
.user-picker__node-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-picker__node-meta {
flex-shrink: 0;
padding-left: 6px;
font-size: 12px;
color: var(--el-text-color-placeholder);
font-variant-numeric: tabular-nums;
}
.user-picker__node.is-active .user-picker__node-meta {
color: var(--el-color-primary);
opacity: 0.7;
}
.user-picker__user-row {
display: flex;
align-items: center;
gap: 10px;
padding: 0 10px;
height: 36px;
border-bottom: 1px solid var(--el-border-color-lighter);
cursor: pointer;
}
.user-picker__user-row:hover {
background: var(--el-fill-color);
}
.user-picker__user-row.is-disabled {
opacity: 0.55;
cursor: not-allowed;
}
.user-picker__user-row.is-disabled:hover {
background: transparent;
}
.user-picker__user-row.is-selected {
background: var(--el-color-primary-light-9);
}
.user-picker__user-row.is-selected .user-picker__user-name {
color: var(--el-color-primary);
font-weight: 500;
}
.user-picker__user-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, #c7d2fe, #93c5fd);
color: #fff;
font-size: 12px;
font-weight: 600;
flex-shrink: 0;
}
.user-picker__user-main {
flex: 1;
min-width: 0;
overflow: hidden;
}
.user-picker__user-name {
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-picker__user-tag {
flex-shrink: 0;
padding: 1px 7px;
border-radius: 999px;
font-size: 11px;
background: var(--el-color-warning-light-7);
color: var(--el-color-warning-dark-2);
}
.user-picker__empty {
padding: 40px 0;
text-align: center;
color: var(--el-text-color-placeholder);
font-size: 12px;
}
.user-picker__hide-added {
font-size: 11.5px;
}
.user-picker__empty-action {
display: block;
margin: 6px auto 0;
}
.user-picker__selected {
padding: 8px 12px;
background: #f8fafc;
border: 1px solid var(--el-border-color);
border-radius: 6px;
}
.user-picker__selected-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
font-size: 11.5px;
color: var(--el-text-color-regular);
}
.user-picker__selected-head strong {
color: var(--el-color-primary);
font-weight: 700;
font-size: 12.5px;
}
.user-picker__selected-empty {
display: flex;
align-items: center;
min-height: 26px;
color: var(--el-text-color-placeholder);
font-size: 11.5px;
}
.user-picker__chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-height: 26px;
}
.user-picker__chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 4px 2px 8px;
background: #fff;
border: 1px solid var(--el-border-color-darker);
border-radius: 999px;
font-size: 11.5px;
}
.user-picker__chip-name {
display: inline-flex;
align-items: center;
gap: 2px;
}
.user-picker__chip-lock {
color: var(--el-color-warning-dark-2);
font-size: 11px;
}
.user-picker__chip-x {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--el-fill-color);
color: var(--el-text-color-regular);
border: none;
cursor: pointer;
font-size: 11px;
}
.user-picker__chip-x:hover {
background: var(--el-color-danger);
color: #fff;
}
.user-picker__chip-more {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 10px;
border-radius: 999px;
border: 1px dashed var(--el-border-color-darker);
background: transparent;
color: var(--el-color-primary);
font-size: 11.5px;
cursor: pointer;
transition:
border-color 0.15s ease,
background-color 0.15s ease;
}
.user-picker__chip-more:hover {
border-color: var(--el-color-primary);
background: var(--el-color-primary-light-9);
}
.user-picker__overflow-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 12px;
color: var(--el-text-color-regular);
}
.user-picker__overflow-head strong {
color: var(--el-color-primary);
font-weight: 700;
}
.user-picker__overflow-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-height: 260px;
overflow-y: auto;
}
.user-picker__link {
background: transparent;
border: none;
cursor: pointer;
font-size: 11.5px;
padding: 0;
}
.user-picker__link--danger {
color: var(--el-color-danger);
}
.user-picker__link:hover {
text-decoration: underline;
}
</style>

View File

@@ -0,0 +1,127 @@
<script setup lang="ts">
import { computed } from 'vue';
defineOptions({ name: 'UserPickerTrigger' });
interface Props {
selectedUsers: Api.SystemManage.UserSimple[];
placeholder: string;
multiple: boolean;
disabled: boolean;
size: 'default' | 'small' | 'large';
}
const props = defineProps<Props>();
const emit = defineEmits<{ (e: 'open'): void }>();
const displayText = computed(() => {
if (!props.selectedUsers.length) return '';
if (!props.multiple) return props.selectedUsers[0]?.nickname ?? '';
const head = props.selectedUsers
.slice(0, 2)
.map(u => u.nickname)
.join('、');
const rest = props.selectedUsers.length - 2;
return rest > 0 ? `${head} +${rest}` : head;
});
const sizeClass = computed(() => `is-${props.size}`);
function handleClick() {
if (props.disabled) return;
emit('open');
}
</script>
<template>
<div
class="user-picker-trigger"
:class="[sizeClass, { 'is-disabled': disabled }]"
role="button"
tabindex="0"
@click="handleClick"
@keydown.enter.prevent="handleClick"
@keydown.space.prevent="handleClick"
>
<span v-if="displayText" class="user-picker-trigger__text">{{ displayText }}</span>
<span v-else class="user-picker-trigger__placeholder">{{ placeholder }}</span>
<span class="user-picker-trigger__suffix">
<icon-ep:arrow-down />
</span>
</div>
</template>
<style scoped>
.user-picker-trigger {
display: inline-flex;
align-items: center;
width: 100%;
min-height: 32px;
padding: 0 30px 0 11px;
background: var(--el-fill-color-blank);
border: 1px solid var(--el-border-color);
border-radius: var(--el-border-radius-base);
font-size: var(--el-font-size-base);
color: var(--el-text-color-regular);
cursor: pointer;
position: relative;
box-sizing: border-box;
transition:
border-color 0.15s ease,
background-color 0.15s ease;
}
.user-picker-trigger.is-small {
min-height: 24px;
font-size: 12px;
}
.user-picker-trigger.is-large {
min-height: 40px;
font-size: 14px;
}
.user-picker-trigger:hover:not(.is-disabled) {
border-color: var(--el-border-color-hover);
}
.user-picker-trigger:focus-visible {
outline: none;
border-color: var(--el-color-primary);
}
.user-picker-trigger.is-disabled {
background: var(--el-disabled-bg-color);
color: var(--el-disabled-text-color);
cursor: not-allowed;
border-color: var(--el-border-color);
}
.user-picker-trigger__text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-picker-trigger__placeholder {
flex: 1;
min-width: 0;
color: var(--el-text-color-placeholder);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-picker-trigger__suffix {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
color: var(--el-text-color-placeholder);
font-size: 14px;
pointer-events: none;
}
</style>

View File

@@ -0,0 +1,90 @@
import { computed, ref } from 'vue';
import { fetchGetUserManagementRelationTree } from '@/service/api';
import type { TreeCheckState } from './use-dept-source';
type ChainNode = Api.SystemManage.UserManagementRelationTreeRespVO;
export function useChainSource(selectedIds: () => Set<string>, disabledUserIdSet: () => Set<string>) {
const tree = ref<ChainNode[]>([]);
const loading = ref(false);
let loaded = false;
async function ensureLoaded() {
if (loaded) return;
loading.value = true;
try {
const { data } = await fetchGetUserManagementRelationTree({ fromUserIndex: false });
tree.value = data ?? [];
loaded = true;
} finally {
loading.value = false;
}
}
function nodeKey(node: ChainNode): string {
return node.id ?? `chain_${node.userId}`;
}
function getNodeUserIds(node: ChainNode): string[] {
const ids = new Set<string>([String(node.userId)]);
if (node.children) {
for (const c of node.children) {
for (const id of getNodeUserIds(c)) ids.add(id);
}
}
return [...ids];
}
function getNodeCheckState(node: ChainNode): TreeCheckState {
const ids = getNodeUserIds(node).filter(id => !disabledUserIdSet().has(id));
if (!ids.length) return 'none';
const sel = ids.filter(id => selectedIds().has(id)).length;
if (sel === 0) return 'none';
if (sel === ids.length) return 'all';
return 'partial';
}
function findNode(list: ChainNode[], key: string): ChainNode | null {
for (const n of list) {
if (nodeKey(n) === key) return n;
if (n.children) {
const r = findNode(n.children, key);
if (r) return r;
}
}
return null;
}
function matchKeyword(node: ChainNode, kw: string): boolean {
if (!kw) return true;
if (node.userNickname.toLowerCase().includes(kw)) return true;
if (node.children) return node.children.some(c => matchKeyword(c, kw));
return false;
}
function filterByKeyword(kw: string) {
const lower = kw.trim().toLowerCase();
if (!lower) return tree.value;
return tree.value.filter(n => matchKeyword(n, lower));
}
function getMetaText(node: ChainNode): string {
const total = getNodeUserIds(node).length;
return total > 1 ? `${total}` : '';
}
const treeProps = computed(() => ({ children: 'children', label: 'userNickname' }) as const);
return {
tree,
loading,
treeProps,
ensureLoaded,
getNodeUserIds,
getNodeCheckState,
findNode,
filterByKeyword,
getMetaText,
nodeKey
};
}

View File

@@ -0,0 +1,99 @@
import { computed, ref } from 'vue';
import { fetchGetDeptSimpleList } from '@/service/api';
import { buildMenuTree } from '@/views/system/shared/menu-tree';
export type TreeCheckState = 'none' | 'partial' | 'all';
export function useDeptSource(
userOptions: () => Api.SystemManage.UserSimple[],
selectedIds: () => Set<string>,
disabledUserIdSet: () => Set<string>
) {
const tree = ref<Api.SystemManage.DeptSimple[]>([]);
const loading = ref(false);
let loaded = false;
async function ensureLoaded() {
if (loaded) return;
loading.value = true;
try {
const { data } = await fetchGetDeptSimpleList();
tree.value = data ? buildMenuTree(data) : [];
loaded = true;
} finally {
loading.value = false;
}
}
function collectDeptIds(node: Api.SystemManage.DeptSimple): string[] {
const ids: string[] = [String(node.id)];
if (node.children) {
for (const c of node.children) ids.push(...collectDeptIds(c));
}
return ids;
}
function getNodeUserIds(node: Api.SystemManage.DeptSimple): string[] {
const deptIds = new Set(collectDeptIds(node));
return userOptions()
.filter(u => u.deptId !== null && u.deptId !== undefined && deptIds.has(String(u.deptId)))
.map(u => String(u.id));
}
function getNodeCheckState(node: Api.SystemManage.DeptSimple): TreeCheckState {
const ids = getNodeUserIds(node).filter(id => !disabledUserIdSet().has(id));
if (!ids.length) return 'none';
const sel = ids.filter(id => selectedIds().has(id)).length;
if (sel === 0) return 'none';
if (sel === ids.length) return 'all';
return 'partial';
}
function findNode(list: Api.SystemManage.DeptSimple[], key: string): Api.SystemManage.DeptSimple | null {
for (const n of list) {
if (String(n.id) === key) return n;
if (n.children) {
const r = findNode(n.children, key);
if (r) return r;
}
}
return null;
}
function matchKeyword(node: Api.SystemManage.DeptSimple, kw: string): boolean {
if (!kw) return true;
if (node.name.toLowerCase().includes(kw)) return true;
if (node.children) return node.children.some(c => matchKeyword(c, kw));
return false;
}
function filterByKeyword(kw: string) {
const lower = kw.trim().toLowerCase();
if (!lower) return tree.value;
return tree.value.filter(n => matchKeyword(n, lower));
}
function getMetaText(node: Api.SystemManage.DeptSimple): string {
const total = getNodeUserIds(node).length;
return total > 0 ? `${total}` : '';
}
function nodeKey(node: Api.SystemManage.DeptSimple): string {
return String(node.id);
}
const treeProps = computed(() => ({ children: 'children', label: 'name' }) as const);
return {
tree,
loading,
treeProps,
ensureLoaded,
getNodeUserIds,
getNodeCheckState,
findNode,
filterByKeyword,
getMetaText,
nodeKey
};
}

View File

@@ -0,0 +1,89 @@
import { computed, ref } from 'vue';
export interface PickerSelectionOptions {
multiple: boolean;
}
export function usePickerSelection(options: () => PickerSelectionOptions) {
const multiSet = ref<Set<string>>(new Set());
const singleId = ref<string | null>(null);
const multiple = computed(() => options().multiple);
function has(userId: string): boolean {
if (multiple.value) return multiSet.value.has(userId);
return singleId.value === userId;
}
function toggle(userId: string) {
if (multiple.value) {
if (multiSet.value.has(userId)) multiSet.value.delete(userId);
else multiSet.value.add(userId);
multiSet.value = new Set(multiSet.value);
} else {
singleId.value = singleId.value === userId ? null : userId;
}
}
function addMany(userIds: readonly string[]) {
if (!multiple.value) {
singleId.value = userIds[0] ?? singleId.value;
return;
}
for (const id of userIds) multiSet.value.add(id);
multiSet.value = new Set(multiSet.value);
}
function removeMany(userIds: readonly string[]) {
if (!multiple.value) {
if (singleId.value && userIds.includes(singleId.value)) singleId.value = null;
return;
}
for (const id of userIds) multiSet.value.delete(id);
multiSet.value = new Set(multiSet.value);
}
function clear(preserveIds?: readonly string[]) {
const keep = new Set((preserveIds ?? []).map(String));
if (multiple.value) {
const next = new Set<string>();
for (const id of multiSet.value) {
if (keep.has(id)) next.add(id);
}
multiSet.value = next;
} else if (singleId.value && !keep.has(singleId.value)) singleId.value = null;
}
function reset(initial: string | string[] | null | undefined) {
if (multiple.value) {
const ids = Array.isArray(initial) ? initial.map(String) : [];
multiSet.value = new Set(ids);
} else {
singleId.value = typeof initial === 'string' ? initial : null;
}
}
const selectedIds = computed<string[]>(() => {
if (multiple.value) return [...multiSet.value];
return singleId.value ? [singleId.value] : [];
});
const size = computed(() => selectedIds.value.length);
function commit(): string | string[] | null {
if (multiple.value) return [...multiSet.value];
return singleId.value;
}
return {
selectedIds,
size,
has,
toggle,
addMany,
removeMany,
clear,
reset,
commit
};
}

View File

@@ -1,9 +1,12 @@
<script setup lang="ts">
import { computed } from 'vue';
import { computed, watch } from 'vue';
import { useDictStore } from '@/store/modules/dict';
import { useDict } from '@/hooks/business/dict';
defineOptions({ name: 'DictSelect' });
const ensuredEmptyDictCodes = new Set<string>();
interface Props {
dictCode: string;
placeholder?: string;
@@ -14,6 +17,8 @@ interface Props {
multiple?: boolean;
collapseTags?: boolean;
collapseTagsTooltip?: boolean;
/** 下拉项右侧追加字典 remark 中文释义(优先级等需要"P0 → 紧急"对照的场景) */
showRemark?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
@@ -24,29 +29,53 @@ const props = withDefaults(defineProps<Props>(), {
onlyEnabled: true,
multiple: false,
collapseTags: false,
collapseTagsTooltip: false
collapseTagsTooltip: false,
showRemark: false
});
const model = defineModel<string | number | Array<string | number> | null | undefined>({
default: undefined
});
const dictStore = useDictStore();
const { enabledDictData, dictData } = useDict(() => props.dictCode);
const dictOptions = computed(() => {
const source = props.onlyEnabled ? enabledDictData.value : dictData.value;
return source.map(item => ({
label: item.label,
value: item.value
value: item.value,
colorType: item.colorType ?? null,
remark: item.remark ?? null
}));
});
// 单选时取当前选中项的 colorType用于触发器 prefix 色块
const selectedColorType = computed<string | null>(() => {
if (props.multiple) return null;
const value = model.value;
if (value === null || value === undefined || value === '') return null;
return dictOptions.value.find(opt => opt.value === value)?.colorType ?? null;
});
watch(
() => [props.dictCode, dictOptions.value.length, dictStore.initialized, dictStore.loading] as const,
async ([dictCode, optionCount, initialized, loading]) => {
if (!dictCode || optionCount > 0 || !initialized || loading || ensuredEmptyDictCodes.has(dictCode)) {
return;
}
ensuredEmptyDictCodes.add(dictCode);
await dictStore.ensureDictData(dictCode, true);
},
{ immediate: true }
);
</script>
<template>
<ElSelect
v-model="model"
class="w-full"
class="dict-select w-full"
:placeholder="props.placeholder"
:disabled="props.disabled"
:clearable="props.clearable"
@@ -55,8 +84,51 @@ const dictOptions = computed(() => {
:collapse-tags="props.collapseTags"
:collapse-tags-tooltip="props.collapseTagsTooltip"
>
<ElOption v-for="item in dictOptions" :key="item.value" :label="item.label" :value="item.value" />
<template v-if="selectedColorType" #prefix>
<span class="dict-select__color-dot" :style="{ background: selectedColorType }" />
</template>
<ElOption v-for="item in dictOptions" :key="item.value" :label="item.label" :value="item.value">
<span class="dict-select__option">
<span
v-if="item.colorType"
class="dict-select__color-dot dict-select__color-dot--option"
:style="{ background: item.colorType }"
/>
<span class="dict-select__option-label">{{ item.label }}</span>
<span v-if="props.showRemark && item.remark" class="dict-select__option-remark">{{ item.remark }}</span>
</span>
</ElOption>
</ElSelect>
</template>
<style scoped></style>
<style scoped>
.dict-select__color-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
vertical-align: middle;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.dict-select__color-dot--option {
margin-right: 8px;
}
.dict-select__option {
display: inline-flex;
align-items: center;
width: 100%;
gap: 8px;
}
.dict-select__option-label {
flex: 0 0 auto;
}
.dict-select__option-remark {
margin-left: auto;
color: var(--el-text-color-secondary);
font-size: 12px;
}
</style>

View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useDict } from '@/hooks/business/dict';
import DictText from './dict-text.vue';
defineOptions({ name: 'DictTag' });
@@ -14,6 +16,7 @@ interface Props {
fallback?: string;
separator?: string;
onlyEnabled?: boolean;
/** 显式传入时优先;不传则按字典 item.colorType 自动取色 */
type?: DictTagType;
effect?: DictTagEffect;
size?: DictTagSize;
@@ -30,10 +33,54 @@ const props = withDefaults(defineProps<Props>(), {
size: 'default',
round: false
});
const { getItem } = useDict(() => props.dictCode);
// 单值才支持自动取色;多值(数组)走默认渲染避免歧义
const autoColorType = computed<string | null>(() => {
if (Array.isArray(props.value)) return null;
if (props.value === null || props.value === undefined || props.value === '') return null;
return getItem(props.value, { onlyEnabled: props.onlyEnabled })?.colorType ?? null;
});
// props.type 优先(向后兼容);其次字典 colorTypehex都没有时回落到原生 ElTag 默认
const hexColor = computed(() => (props.type ? null : autoColorType.value));
const tagStyle = computed<Record<string, string> | null>(() => {
if (!hexColor.value) return null;
// light 效果:浅底 + 主色字 + 中浅边plain/dark 同样的色调思路,仅明度差异
const fg = hexColor.value;
if (props.effect === 'dark') {
return {
color: '#fff',
background: fg,
borderColor: fg
};
}
if (props.effect === 'plain') {
return {
color: fg,
background: 'transparent',
borderColor: `color-mix(in srgb, ${fg} 50%, white)`
};
}
// light默认
return {
color: fg,
background: `color-mix(in srgb, ${fg} 12%, white)`,
borderColor: `color-mix(in srgb, ${fg} 30%, white)`
};
});
</script>
<template>
<ElTag :type="props.type" :effect="props.effect" :size="props.size" :round="props.round">
<ElTag
:type="props.type"
:effect="props.effect"
:size="props.size"
:round="props.round"
:style="tagStyle ?? undefined"
>
<DictText
:dict-code="props.dictCode"
:value="props.value"

View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import type { VNode } from 'vue';
import { ElButton, ElCol, ElDatePicker, ElFormItem, ElInput, ElOption, ElRow, ElSelect } from 'element-plus';
import DictSelect from './dict-select.vue';
@@ -23,8 +24,12 @@ export interface SearchField {
options?: Option[];
/** dict 类型的字典编码 */
dictCode?: string;
/** dict 类型下拉项右侧追加字典 remark 释义(如优先级 "P0 → 紧急" */
showRemark?: boolean;
/** 占位提示文本 */
placeholder?: string;
/** select 类型的自定义选项渲染函数 */
renderOption?: (option: Option) => VNode | VNode[] | string;
}
interface Props {
@@ -142,7 +147,11 @@ function handleSearch() {
:disabled="props.disabled"
@update:model-value="val => (props.modelValue[field.key] = val)"
>
<ElOption v-for="opt in field.options" :key="opt.value" :label="opt.label" :value="opt.value" />
<ElOption v-for="opt in field.options" :key="opt.value" :label="opt.label" :value="opt.value">
<template v-if="field.renderOption" #default>
<component :is="field.renderOption(opt)" />
</template>
</ElOption>
</ElSelect>
<ElDatePicker
v-else-if="field.type === 'date'"
@@ -172,6 +181,7 @@ function handleSearch() {
:dict-code="field.dictCode!"
:placeholder="field.placeholder"
:disabled="props.disabled"
:show-remark="field.showRemark"
@update:model-value="val => (props.modelValue[field.key] = val)"
/>
</ElFormItem>
@@ -234,7 +244,11 @@ function handleSearch() {
:disabled="props.disabled"
@update:model-value="val => (props.modelValue[field.key] = val)"
>
<ElOption v-for="opt in field.options" :key="opt.value" :label="opt.label" :value="opt.value" />
<ElOption v-for="opt in field.options" :key="opt.value" :label="opt.label" :value="opt.value">
<template v-if="field.renderOption" #default>
<component :is="field.renderOption(opt)" />
</template>
</ElOption>
</ElSelect>
<ElDatePicker
v-else-if="field.type === 'date'"
@@ -264,6 +278,7 @@ function handleSearch() {
:dict-code="field.dictCode!"
:placeholder="field.placeholder"
:disabled="props.disabled"
:show-remark="field.showRemark"
@update:model-value="val => (props.modelValue[field.key] = val)"
/>
</ElFormItem>

View File

@@ -45,10 +45,14 @@ export const SYSTEM_USER_COMPANY_DICT_CODE = 'system_user_company';
export const RDMS_REQ_SOURCE_TYPE_DICT_CODE = 'rdms_req_source_type';
/**
* 需求优先级字典编码
* 优先级字典编码
*
* 对应业务字段:需求相关接口和页面中的 priority
* 来源口径:产品需求文档中定义,标签包括紧急、高、中、低
* 对应业务字段:
* - 需求(产品需求 / 项目需求)的 priority旧口径Integer数字大=高0=低 / 3=紧急)
* - 任务 / 执行的 priority新口径String "0"~"3",数字越小优先级越高,"1"=默认 P1
*
* 来源口径:后端统一字典 rdms_req_priority4 档标签 P0/P1/P2/P3。
* 数值取值口径不同是已知遗留——前端用本字典的 label / colorType 渲染即可,不要硬编码 P0~P3。
*/
export const RDMS_REQ_PRIORITY_DICT_CODE = 'rdms_req_priority';
@@ -84,6 +88,14 @@ export const RDMS_PROJECT_EXECUTION_TYPE_DICT_CODE = 'rdms_project_execution_typ
*/
export const OBJECT_STATUS_MODEL_OBJECT_TYPE_DICT_CODE = 'object_status_model_object_type';
/**
* 任务/个人事项类型字典编码
*
* 对应业务字段:任务、个人事项中的 type
* 来源口径:用户明确指定任务/个人事项类型下拉来自运行时字典 rdms_task_item_type
*/
export const RDMS_TASK_ITEM_TYPE_DICT_CODE = 'rdms_task_item_type';
/**
* 需求允许删除的状态字典编码
*
@@ -91,3 +103,27 @@ export const OBJECT_STATUS_MODEL_OBJECT_TYPE_DICT_CODE = 'object_status_model_ob
* 来源口径:用户在系统字典管理页中创建的字典 rdms_req_can_delete_status
*/
export const RDMS_REQ_CAN_DELETE_STATUS_DICT_CODE = 'rdms_req_can_delete_status';
/**
* 工作日志难度字典编码
*
* 对应业务字段:任务/个人事项工作日志中的 difficulty
* 来源口径:用户明确指定任务/个人事项工作日志难度下拉来自运行时字典 rdms_task_item_worklog_difficulty
*/
export const RDMS_WORKLOG_DIFFICULTY_DICT_CODE = 'rdms_task_item_worklog_difficulty';
/**
* 加班申请状态字典编码
*
* 对应业务字段:加班申请中的 statusCode
* 来源口径:`overtime-application-design.md` 明确状态字典为 rdms_overtime_application_status
*/
export const RDMS_OVERTIME_APPLICATION_STATUS_DICT_CODE = 'rdms_overtime_application_status';
/**
* 加班时长快捷选项字典编码
*
* 对应业务字段:加班申请中的 overtimeDuration
* 来源口径:`overtime-application-design.md` 明确时长下拉字典为 rdms_overtime_duration
*/
export const RDMS_OVERTIME_DURATION_DICT_CODE = 'rdms_overtime_duration';

View File

@@ -15,7 +15,9 @@ export type StatusDomain =
| 'project'
| 'product'
| 'requirement'
| 'workOrder';
| 'workOrder'
| 'personalItem'
| 'overtimeApplication';
const statusTagTypeRegistry: Record<StatusDomain, Record<string, StatusTagType>> = {
// 项目-执行
@@ -53,7 +55,21 @@ const statusTagTypeRegistry: Record<StatusDomain, Record<string, StatusTagType>>
// 需求(待补全)
requirement: {},
// 工单(待补全)
workOrder: {}
workOrder: {},
// 个人事项
personalItem: {
pending: 'info',
active: 'primary',
completed: 'success',
cancelled: 'danger'
},
// 加班申请
overtimeApplication: {
pending: 'warning',
approved: 'success',
rejected: 'danger',
cancelled: 'info'
}
};
export function getStatusTagType(domain: StatusDomain, statusCode: string | null | undefined): StatusTagType {
@@ -61,5 +77,13 @@ export function getStatusTagType(domain: StatusDomain, statusCode: string | null
return 'info';
}
return statusTagTypeRegistry[domain][statusCode] || 'info';
return statusTagTypeRegistry[domain]?.[statusCode] || 'info';
}
export function getPersonalItemStatusTagType(statusCode: string | null | undefined) {
return getStatusTagType('personalItem', statusCode);
}
export function getOvertimeApplicationStatusTagType(statusCode: string | null | undefined) {
return getStatusTagType('overtimeApplication', statusCode);
}

View File

@@ -5,5 +5,6 @@ export enum SetupStoreId {
Dict = 'dict-store',
Route = 'route-store',
Tab = 'tab-store',
ObjectContext = 'object-context-store'
ObjectContext = 'object-context-store',
Workbench = 'workbench-store'
}

View File

@@ -0,0 +1,457 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useInfiniteScroll } from '@vueuse/core';
defineOptions({ name: 'NotificationBell' });
interface NotificationItem {
id: string;
title: string;
timeLabel: string;
unread: boolean;
}
const PAGE_SIZE = 10;
// 通知 mock扩到 60 条以演示分页 / 搜索;等真接口落地后整体迁移
function buildMockNotifications(): NotificationItem[] {
const titles = [
'你被指派为执行「迭代 24.06」负责人',
'任务「SSO 改造」状态变更:开发中 → 待验收',
'需求「多币种支持」评审通过',
'工单 #1042 已分派给你',
'需求「订单导出」被退回,请补充材料',
'@ 你的评论已被回复',
'项目「客户中心 2.0」周报已生成',
'工单 #1098 客户回复待处理',
'执行「迭代 24.05」已结束',
'需求「批量审批」分配给你'
];
const times = ['10min 前', '30min 前', '1h 前', '2h 前', '4h 前', '昨日', '前天', '3 天前', '1 周前', '2 周前'];
return Array.from({ length: 60 }, (_, i) => ({
id: `m${i + 1}`,
title: `${titles[i % titles.length]}#${i + 1}`,
timeLabel: times[Math.floor(i / 6) % times.length],
unread: i < 14
}));
}
const notifications = ref<NotificationItem[]>(buildMockNotifications());
const unreadAll = computed(() => notifications.value.filter(n => n.unread));
const readAll = computed(() => notifications.value.filter(n => !n.unread));
const unreadCount = computed(() => unreadAll.value.length);
const badgeLabel = computed(() => (unreadCount.value > 99 ? '99+' : String(unreadCount.value)));
const drawerOpen = ref(false);
const activeTab = ref<'unread' | 'read'>('unread');
const searchKeyword = ref('');
function matchesKeyword(item: NotificationItem) {
const kw = searchKeyword.value.trim();
if (!kw) return true;
return item.title.toLowerCase().includes(kw.toLowerCase());
}
const filteredUnread = computed(() => unreadAll.value.filter(matchesKeyword));
const filteredRead = computed(() => readAll.value.filter(matchesKeyword));
const unreadPageSize = ref(PAGE_SIZE);
const readPageSize = ref(PAGE_SIZE);
const visibleUnread = computed(() => filteredUnread.value.slice(0, unreadPageSize.value));
const visibleRead = computed(() => filteredRead.value.slice(0, readPageSize.value));
const hasMoreUnread = computed(() => unreadPageSize.value < filteredUnread.value.length);
const hasMoreRead = computed(() => readPageSize.value < filteredRead.value.length);
watch(searchKeyword, () => {
unreadPageSize.value = PAGE_SIZE;
readPageSize.value = PAGE_SIZE;
});
// 已读列表数量会因"标已读"动态增长 / 未读会缩小;切换 tab 不重置已展示页数,体感更自然
type ScrollbarRefValue = { wrapRef?: HTMLElement } | null;
const unreadScrollbar = ref<ScrollbarRefValue>(null);
const readScrollbar = ref<ScrollbarRefValue>(null);
useInfiniteScroll(
() => unreadScrollbar.value?.wrapRef,
() => {
if (hasMoreUnread.value) unreadPageSize.value += PAGE_SIZE;
},
{ distance: 48 }
);
useInfiniteScroll(
() => readScrollbar.value?.wrapRef,
() => {
if (hasMoreRead.value) readPageSize.value += PAGE_SIZE;
},
{ distance: 48 }
);
function openDrawer() {
drawerOpen.value = true;
}
function closeDrawer() {
drawerOpen.value = false;
}
function markRead(item: NotificationItem) {
if (!item.unread) return;
item.unread = false;
// eslint-disable-next-line no-console
console.warn('[notification] mark-read', item.id);
}
function markAllRead() {
notifications.value.forEach(item => {
item.unread = false;
});
// eslint-disable-next-line no-console
console.warn('[notification] mark-all-read');
}
function openItem(item: NotificationItem) {
markRead(item);
// eslint-disable-next-line no-console
console.warn('[notification] open', item.id);
}
function onDrawerClosed() {
searchKeyword.value = '';
}
</script>
<template>
<button
class="notification-bell__trigger"
type="button"
:aria-label="unreadCount > 0 ? `通知,${unreadCount} 条未读` : '通知'"
@click="openDrawer"
>
<SvgIcon icon="mdi:bell-outline" class="notification-bell__icon" />
<span v-if="unreadCount > 0" class="notification-bell__badge">{{ badgeLabel }}</span>
</button>
<ElDrawer v-model="drawerOpen" size="480px" :with-header="false" @closed="onDrawerClosed">
<div class="notification-bell__panel">
<header class="notification-bell__header">
<span class="notification-bell__title">
通知
<span v-if="unreadCount > 0" class="notification-bell__title-count">未读 {{ unreadCount }}</span>
</span>
<span class="notification-bell__header-actions">
<ElButton v-if="unreadCount > 0" link size="small" @click="markAllRead">全部已读</ElButton>
<button class="notification-bell__close" type="button" aria-label="关闭" @click="closeDrawer">
<SvgIcon icon="mdi:close" />
</button>
</span>
</header>
<div class="notification-bell__search">
<ElInput v-model="searchKeyword" placeholder="搜索通知" clearable>
<template #prefix>
<SvgIcon icon="mdi:magnify" />
</template>
</ElInput>
</div>
<ElTabs v-model="activeTab" class="notification-bell__tabs">
<ElTabPane name="unread">
<template #label>
<span class="notification-bell__tab-label">
未读
<span class="notification-bell__tab-count">{{ filteredUnread.length }}</span>
</span>
</template>
<ElScrollbar ref="unreadScrollbar" class="notification-bell__scroll">
<ul v-if="visibleUnread.length > 0" class="notification-bell__list">
<li
v-for="row in visibleUnread"
:key="row.id"
class="notification-bell__row is-unread"
@click="openItem(row)"
>
<span class="notification-bell__row-dot" />
<div class="notification-bell__row-body">
<div class="notification-bell__row-title">{{ row.title }}</div>
<div class="notification-bell__row-time">{{ row.timeLabel }}</div>
</div>
</li>
</ul>
<div v-else class="notification-bell__empty">
{{ searchKeyword ? '没有匹配的通知' : '暂无未读通知' }}
</div>
<div v-if="visibleUnread.length > 0" class="notification-bell__footer-hint">
{{ hasMoreUnread ? '滚动加载更多…' : '— 已经到底了 —' }}
</div>
</ElScrollbar>
</ElTabPane>
<ElTabPane name="read">
<template #label>
<span class="notification-bell__tab-label">
已读
<span class="notification-bell__tab-count">{{ filteredRead.length }}</span>
</span>
</template>
<ElScrollbar ref="readScrollbar" class="notification-bell__scroll">
<ul v-if="visibleRead.length > 0" class="notification-bell__list">
<li v-for="row in visibleRead" :key="row.id" class="notification-bell__row" @click="openItem(row)">
<span class="notification-bell__row-dot" />
<div class="notification-bell__row-body">
<div class="notification-bell__row-title">{{ row.title }}</div>
<div class="notification-bell__row-time">{{ row.timeLabel }}</div>
</div>
</li>
</ul>
<div v-else class="notification-bell__empty">
{{ searchKeyword ? '没有匹配的通知' : '暂无已读通知' }}
</div>
<div v-if="visibleRead.length > 0" class="notification-bell__footer-hint">
{{ hasMoreRead ? '滚动加载更多…' : '— 已经到底了 —' }}
</div>
</ElScrollbar>
</ElTabPane>
</ElTabs>
</div>
</ElDrawer>
</template>
<style scoped>
.notification-bell__trigger {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
margin: 0 4px;
border: none;
border-radius: 8px;
background-color: transparent;
color: var(--el-text-color-regular);
cursor: pointer;
transition:
background-color 160ms ease,
color 160ms ease;
}
.notification-bell__trigger:hover {
background-color: var(--el-fill-color-light);
color: var(--el-color-primary);
}
.notification-bell__trigger:focus-visible {
outline: 2px solid var(--el-color-primary);
outline-offset: 2px;
}
.notification-bell__icon {
font-size: 20px;
}
.notification-bell__badge {
position: absolute;
top: 4px;
right: 4px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background-color: var(--el-color-danger);
color: #fff;
font-size: 10px;
font-weight: 600;
line-height: 16px;
text-align: center;
}
.notification-bell__panel {
display: flex;
flex-direction: column;
height: 100%;
}
.notification-bell__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--el-border-color-lighter);
}
.notification-bell__title {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--el-text-color-primary);
font-size: 16px;
font-weight: 600;
}
.notification-bell__title-count {
padding: 1px 8px;
border-radius: 999px;
background-color: var(--el-color-danger);
color: #fff;
font-size: 11px;
font-weight: 600;
}
.notification-bell__header-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
.notification-bell__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: none;
border-radius: 6px;
background-color: transparent;
color: var(--el-text-color-secondary);
cursor: pointer;
font-size: 18px;
transition:
background-color 120ms ease,
color 120ms ease;
}
.notification-bell__close:hover {
background-color: var(--el-fill-color-light);
color: var(--el-text-color-primary);
}
.notification-bell__search {
padding: 12px 0 4px;
}
.notification-bell__tabs {
display: flex;
flex: 1;
flex-direction: column;
min-height: 0;
}
.notification-bell__tabs :deep(.el-tabs__content) {
flex: 1;
min-height: 0;
overflow: hidden;
}
.notification-bell__tabs :deep(.el-tab-pane) {
height: 100%;
}
.notification-bell__tab-label {
display: inline-flex;
align-items: center;
gap: 6px;
}
.notification-bell__tab-count {
padding: 0 7px;
border-radius: 999px;
background-color: var(--el-fill-color);
color: var(--el-text-color-secondary);
font-size: 10px;
font-weight: 600;
line-height: 16px;
}
.notification-bell__tabs :deep(.el-tabs__item.is-active) .notification-bell__tab-count {
background-color: var(--el-color-primary-light-9);
color: var(--el-color-primary);
}
.notification-bell__scroll {
height: 100%;
}
.notification-bell__list {
margin: 0;
padding: 0;
list-style: none;
}
.notification-bell__row {
position: relative;
display: grid;
grid-template-columns: 14px minmax(0, 1fr);
align-items: flex-start;
gap: 10px;
padding: 12px 4px;
cursor: pointer;
border-radius: 8px;
transition: background-color 120ms ease;
}
.notification-bell__row + .notification-bell__row {
border-top: 1px dashed var(--el-border-color-lighter);
}
.notification-bell__row:hover {
background-color: var(--el-fill-color-light);
}
.notification-bell__row-dot {
width: 8px;
height: 8px;
margin-top: 6px;
border-radius: 50%;
background-color: transparent;
justify-self: center;
}
.notification-bell__row.is-unread .notification-bell__row-dot {
background-color: var(--el-color-primary);
}
.notification-bell__row-body {
min-width: 0;
}
.notification-bell__row-title {
color: var(--el-text-color-regular);
font-size: 14px;
line-height: 1.5;
}
.notification-bell__row.is-unread .notification-bell__row-title {
color: var(--el-text-color-primary);
font-weight: 500;
}
.notification-bell__row-time {
margin-top: 4px;
color: var(--el-text-color-secondary);
font-size: 12px;
}
.notification-bell__empty {
padding: 48px 16px;
text-align: center;
color: var(--el-text-color-secondary);
font-size: 13px;
}
.notification-bell__footer-hint {
padding: 12px 0 4px;
text-align: center;
color: var(--el-text-color-secondary);
font-size: 12px;
user-select: none;
}
</style>

View File

@@ -7,6 +7,7 @@ import GlobalLogo from '../global-logo/index.vue';
import GlobalBreadcrumb from '../global-breadcrumb/index.vue';
import GlobalSearch from '../global-search/index.vue';
import ThemeButton from './components/theme-button.vue';
import NotificationBell from './components/notification-bell.vue';
import UserAvatar from './components/user-avatar.vue';
defineOptions({ name: 'GlobalHeader' });
@@ -48,6 +49,7 @@ const { isFullscreen, toggle } = useFullscreen();
<div>
<ThemeButton />
</div>
<NotificationBell />
<UserAvatar />
</div>
</DarkModeContainer>

View File

@@ -0,0 +1,399 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue';
import { OBJECT_CONTEXT_QUERY_KEY } from '@/constants/object-context';
import { fetchGetProductPage, fetchGetProjectPage } from '@/service/api';
import { useObjectContextStore } from '@/store/modules/object-context';
defineOptions({ name: 'ObjectContextSwitcher' });
interface Props {
domainConfig: App.ObjectContext.DomainConfig;
}
type ObjectOption = {
id: string;
name: string;
code?: string | null;
createTime?: string | null;
};
const props = defineProps<Props>();
const route = useRoute();
const router = useRouter();
const objectContextStore = useObjectContextStore();
const visible = ref(false);
const keyword = ref('');
const expanded = ref(false);
const loading = ref(false);
const switchingId = ref('');
const options = ref<ObjectOption[]>([]);
let searchTimer: ReturnType<typeof setTimeout> | null = null;
const OBJECT_SWITCHER_PAGE_SIZE = 100;
const isProductDomain = computed(() => props.domainConfig.domainKey === 'product');
const domainLabel = computed(() => (isProductDomain.value ? '产品' : '项目'));
const allLabel = computed(() => `全部${domainLabel.value}`);
const placeholder = computed(() => `搜索${domainLabel.value}`);
const previewOptions = computed(() => options.value.slice(0, 3));
const displayOptions = computed(() => {
if (keyword.value.trim() || expanded.value) {
return options.value;
}
return previewOptions.value;
});
const hiddenCount = computed(() => Math.max(options.value.length - previewOptions.value.length, 0));
const showAllEntry = computed(() => !keyword.value.trim() && !expanded.value && hiddenCount.value > 0);
function sortByCreateTimeDesc(list: ObjectOption[]) {
return list.slice().sort((left, right) => {
const leftTime = left.createTime ? new Date(left.createTime).getTime() : 0;
const rightTime = right.createTime ? new Date(right.createTime).getTime() : 0;
return rightTime - leftTime;
});
}
async function fetchObjectOptionsPage(pageNo: number, keywordValue?: string) {
const result =
props.domainConfig.domainKey === 'product'
? await fetchGetProductPage({ pageNo, pageSize: OBJECT_SWITCHER_PAGE_SIZE, keyword: keywordValue })
: await fetchGetProjectPage({ pageNo, pageSize: OBJECT_SWITCHER_PAGE_SIZE, keyword: keywordValue });
if (result.error || !result.data) {
return {
total: 0,
list: []
};
}
const list = result.data.list.map(item => {
if (props.domainConfig.domainKey === 'product') {
const product = item as Api.Product.Product;
return {
id: product.id,
name: product.name,
code: product.code,
createTime: product.createTime
};
}
const project = item as Api.Project.Project;
return {
id: project.id,
name: project.projectName,
code: project.projectCode,
createTime: project.createTime
};
});
return {
total: result.data.total,
list
};
}
async function loadOptions() {
loading.value = true;
const keywordValue = keyword.value.trim() || undefined;
const firstPage = await fetchObjectOptionsPage(1, keywordValue);
const pageCount = Math.ceil(firstPage.total / OBJECT_SWITCHER_PAGE_SIZE);
const restPages =
pageCount > 1
? await Promise.all(
Array.from({ length: pageCount - 1 }, (_, index) => fetchObjectOptionsPage(index + 2, keywordValue))
)
: [];
const list = [firstPage, ...restPages].flatMap(page => page.list);
loading.value = false;
options.value = sortByCreateTimeDesc(list);
}
function handleVisibleChange(value: boolean) {
visible.value = value;
if (value) {
expanded.value = false;
loadOptions();
}
}
async function handleSelect(option: ObjectOption) {
if (option.id === objectContextStore.objectId) {
visible.value = false;
return;
}
switchingId.value = option.id;
const result = await objectContextStore.switchContext(props.domainConfig, option.id);
switchingId.value = '';
if (result.error) {
return;
}
visible.value = false;
const query = {
...route.query,
[OBJECT_CONTEXT_QUERY_KEY]: option.id
};
const targetLocation = route.name ? { name: route.name, query } : { path: route.path, query };
await router.push(targetLocation);
}
watch(
() => keyword.value,
() => {
if (!visible.value) {
return;
}
expanded.value = Boolean(keyword.value.trim());
if (searchTimer) {
clearTimeout(searchTimer);
}
searchTimer = setTimeout(() => {
loadOptions();
}, 250);
}
);
</script>
<template>
<ElPopover
:visible="visible"
trigger="click"
placement="bottom-start"
:width="300"
popper-class="object-context-switcher__popper"
@update:visible="handleVisibleChange"
>
<template #reference>
<button type="button" class="object-context-switcher__trigger" :class="{ 'is-open': visible }">
<span class="object-context-switcher__trigger-label">{{ objectContextStore.objectName }}</span>
<icon-ep:sort class="object-context-switcher__trigger-icon" />
</button>
</template>
<div class="object-context-switcher__panel">
<ElInput v-model="keyword" clearable :placeholder="placeholder" class="object-context-switcher__search">
<template #suffix>
<ElIcon>
<Search />
</ElIcon>
</template>
</ElInput>
<div v-loading="loading" class="object-context-switcher__list">
<button
v-for="item in displayOptions"
:key="item.id"
type="button"
class="object-context-switcher__item"
:class="{ 'is-active': item.id === objectContextStore.objectId }"
:disabled="switchingId === item.id"
@click="handleSelect(item)"
>
<span class="object-context-switcher__item-icon">
<icon-ep:box v-if="isProductDomain" />
<icon-ep:folder v-else />
</span>
<span class="object-context-switcher__item-main">
<span class="object-context-switcher__item-name">{{ item.name }}</span>
<span v-if="item.code" class="object-context-switcher__item-code">{{ item.code }}</span>
</span>
<icon-ep:check v-if="item.id === objectContextStore.objectId" class="object-context-switcher__check" />
</button>
<ElEmpty v-if="!loading && !displayOptions.length" :description="`暂无可选${domainLabel}`" :image-size="54" />
</div>
<button v-if="showAllEntry" type="button" class="object-context-switcher__all" @click="expanded = true">
<span>{{ allLabel }}</span>
<span class="object-context-switcher__all-meta">{{ hiddenCount }} 个更多</span>
<icon-ep:arrow-right class="object-context-switcher__all-arrow" />
</button>
</div>
</ElPopover>
</template>
<style scoped>
.object-context-switcher__trigger {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
max-width: 16rem;
height: 32px;
gap: 6px;
padding: 0 10px 0 12px;
border: none;
border-radius: 6px;
background: transparent;
color: var(--el-color-primary);
cursor: pointer;
font: inherit;
line-height: 1;
}
.object-context-switcher__trigger:hover,
.object-context-switcher__trigger.is-open {
background: var(--el-color-primary-light-9);
}
.object-context-switcher__trigger-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.object-context-switcher__trigger-icon {
flex-shrink: 0;
color: var(--el-color-primary);
font-size: 13px;
}
.object-context-switcher__panel {
display: flex;
flex-direction: column;
gap: 8px;
}
.object-context-switcher__search {
padding: 4px 4px 0;
}
.object-context-switcher__list {
min-height: 84px;
max-height: 300px;
overflow-y: auto;
}
.object-context-switcher__item {
appearance: none;
-webkit-appearance: none;
display: flex;
align-items: center;
width: 100%;
min-height: 42px;
gap: 10px;
padding: 7px 10px;
border: none;
border-radius: 8px;
background: transparent;
color: var(--el-text-color-primary);
cursor: pointer;
font: inherit;
text-align: left;
}
.object-context-switcher__item:hover,
.object-context-switcher__item.is-active {
background: rgb(59 130 246 / 10%);
}
.object-context-switcher__item:disabled {
cursor: wait;
opacity: 0.75;
}
.object-context-switcher__item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
border-radius: 5px;
background: var(--el-color-primary-light-8);
color: var(--el-color-primary);
}
.object-context-switcher__item-main {
display: flex;
min-width: 0;
flex: 1;
flex-direction: column;
gap: 2px;
}
.object-context-switcher__item-name,
.object-context-switcher__item-code {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.object-context-switcher__item-name {
font-size: 13px;
}
.object-context-switcher__item-code {
color: var(--el-text-color-placeholder);
font-size: 11px;
}
.object-context-switcher__check {
flex-shrink: 0;
color: var(--el-color-primary);
font-size: 14px;
}
.object-context-switcher__all {
appearance: none;
-webkit-appearance: none;
display: flex;
align-items: center;
width: calc(100% + 24px);
height: 38px;
gap: 8px;
margin: 0 -12px -12px;
padding: 0 14px;
border: none;
border-top: 1px solid var(--el-border-color-lighter);
background: transparent;
color: var(--el-text-color-primary);
cursor: pointer;
font: inherit;
text-align: left;
}
.object-context-switcher__all:hover {
background: var(--el-fill-color-light);
color: var(--el-color-primary);
}
.object-context-switcher__all-meta {
flex: 1;
color: var(--el-text-color-placeholder);
font-size: 12px;
text-align: right;
}
.object-context-switcher__all-arrow {
color: var(--el-text-color-placeholder);
font-size: 13px;
}
:global(.object-context-switcher__popper.el-popover) {
padding: 12px;
border: 1px solid rgb(226 232 240 / 90%);
border-radius: 10px;
box-shadow:
0 12px 28px rgb(15 23 42 / 10%),
0 2px 8px rgb(15 23 42 / 6%);
}
</style>

View File

@@ -8,6 +8,7 @@ import { useObjectContextStore } from '@/store/modules/object-context';
import { useThemeStore } from '@/store/modules/theme';
import { useRouterPush } from '@/hooks/common/router';
import FirstLevelMenu from '../components/first-level-menu.vue';
import ObjectContextSwitcher from '../components/object-context-switcher.vue';
import { useMenu, useMixMenuContext } from '../../../context';
defineOptions({
@@ -108,7 +109,7 @@ function isMenuActive(menu: App.Global.Menu | App.ObjectContext.Menu): boolean {
class="mx-12px h-20px w-1px shrink-0 bg-[var(--el-border-color)]"
></div>
<div v-if="showObjectContextInfo" class="context-object-tag h-full flex-y-center">
<span class="context-object-tag__label">{{ objectContextStore.objectName }}</span>
<ObjectContextSwitcher v-if="currentObjectContextDomain" :domain-config="currentObjectContextDomain" />
</div>
<div
v-if="showObjectContextInfo && headerMenus.length"
@@ -208,28 +209,6 @@ function isMenuActive(menu: App.Global.Menu | App.ObjectContext.Menu): boolean {
white-space: nowrap;
}
.context-object-tag {
flex-shrink: 0;
min-width: 0;
}
.context-object-tag__label {
display: inline-flex;
align-items: center;
max-width: 14rem;
height: 32px;
padding: 0 12px;
border: 1px solid rgb(148 163 184 / 26%);
border-radius: 999px;
background: linear-gradient(180deg, rgb(248 250 252 / 95%), rgb(241 245 249 / 92%));
color: rgb(15 23 42 / 88%);
font-size: 13px;
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.header-nav-list {
display: flex;
align-items: center;

View File

@@ -168,10 +168,12 @@ const local: App.I18n.Schema = {
metrics_worktime: 'Worktime',
'personal-center': 'Personal Center',
'personal-center_my-profile': 'My Profile',
'personal-center_my-item': 'My Items',
'personal-center_my-weekly': 'My Weekly Report',
'personal-center_my-monthly': 'My Monthly Report',
'personal-center_my-performance': 'My Performance',
'personal-center_my-application': 'My Application',
'personal-center_overtime-application': 'Overtime Application',
'personal-center_pending-approval': 'Pending Approval',
infra: 'Infra',
'infra_state-machine': 'State Machine',
@@ -707,6 +709,7 @@ const local: App.I18n.Schema = {
dictStatus: 'Dictionary Status',
dictLabel: 'Dictionary Label',
dictValue: 'Dictionary Value',
colorType: 'Color Type',
sort: 'Sort',
remark: 'Remark',
form: {
@@ -715,6 +718,7 @@ const local: App.I18n.Schema = {
dictStatus: 'Please select dictionary status',
dictLabel: 'Please enter dictionary label',
dictValue: 'Please enter dictionary value',
colorType: 'Please enter color type',
sort: 'Please enter sort',
remark: 'Please enter remark'
},

View File

@@ -168,10 +168,12 @@ const local: App.I18n.Schema = {
metrics_worktime: '工时统计',
'personal-center': '个人中心',
'personal-center_my-profile': '个人信息',
'personal-center_my-item': '我的事项',
'personal-center_my-weekly': '我的周报',
'personal-center_my-monthly': '我的月报',
'personal-center_my-performance': '我的绩效',
'personal-center_my-application': '我的申请',
'personal-center_overtime-application': '加班申请',
'personal-center_pending-approval': '待我审批',
infra: '基础设施',
'infra_state-machine': '状态机管理',
@@ -695,6 +697,7 @@ const local: App.I18n.Schema = {
dictStatus: '字典状态',
dictLabel: '字典标签',
dictValue: '字典键值',
colorType: '颜色类型',
sort: '排序',
remark: '备注',
form: {
@@ -703,6 +706,7 @@ const local: App.I18n.Schema = {
dictStatus: '请选择字典状态',
dictLabel: '请输入字典标签',
dictValue: '请输入字典键值',
colorType: '请输入颜色类型',
sort: '请输入排序',
remark: '请输入备注'
},

View File

@@ -34,10 +34,12 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
"metrics_project-progress": () => import("@/views/metrics/project-progress/index.vue"),
metrics_worktime: () => import("@/views/metrics/worktime/index.vue"),
"personal-center_my-application": () => import("@/views/personal-center/my-application/index.vue"),
"personal-center_my-item": () => import("@/views/personal-center/my-item/index.vue"),
"personal-center_my-monthly": () => import("@/views/personal-center/my-monthly/index.vue"),
"personal-center_my-performance": () => import("@/views/personal-center/my-performance/index.vue"),
"personal-center_my-profile": () => import("@/views/personal-center/my-profile/index.vue"),
"personal-center_my-weekly": () => import("@/views/personal-center/my-weekly/index.vue"),
"personal-center_overtime-application": () => import("@/views/personal-center/overtime-application/index.vue"),
"personal-center_pending-approval": () => import("@/views/personal-center/pending-approval/index.vue"),
plugin_barcode: () => import("@/views/plugin/barcode/index.vue"),
plugin_charts_antv: () => import("@/views/plugin/charts/antv/index.vue"),

View File

@@ -291,6 +291,18 @@ export const generatedRoutes: GeneratedRoute[] = [
keepAlive: true
}
},
{
name: 'personal-center_my-item',
path: '/personal-center/my-item',
component: 'view.personal-center_my-item',
meta: {
title: 'personal-center_my-item',
i18nKey: 'route.personal-center_my-item',
icon: 'mdi:checkbox-multiple-blank-circle-outline',
order: 1,
keepAlive: true
}
},
{
name: 'personal-center_my-monthly',
path: '/personal-center/my-monthly',
@@ -339,6 +351,18 @@ export const generatedRoutes: GeneratedRoute[] = [
keepAlive: true
}
},
{
name: 'personal-center_overtime-application',
path: '/personal-center/overtime-application',
component: 'view.personal-center_overtime-application',
meta: {
title: 'personal-center_overtime-application',
i18nKey: 'route.personal-center_overtime-application',
icon: 'mdi:clock-plus-outline',
order: 6,
keepAlive: true
}
},
{
name: 'personal-center_pending-approval',
path: '/personal-center/pending-approval',
@@ -347,7 +371,7 @@ export const generatedRoutes: GeneratedRoute[] = [
title: 'personal-center_pending-approval',
i18nKey: 'route.personal-center_pending-approval',
icon: 'mdi:check-decagram-outline',
order: 5,
order: 7,
keepAlive: true
}
}

View File

@@ -191,10 +191,12 @@ const routeMap: RouteMap = {
"metrics_worktime": "/metrics/worktime",
"personal-center": "/personal-center",
"personal-center_my-application": "/personal-center/my-application",
"personal-center_my-item": "/personal-center/my-item",
"personal-center_my-monthly": "/personal-center/my-monthly",
"personal-center_my-performance": "/personal-center/my-performance",
"personal-center_my-profile": "/personal-center/my-profile",
"personal-center_my-weekly": "/personal-center/my-weekly",
"personal-center_overtime-application": "/personal-center/overtime-application",
"personal-center_pending-approval": "/personal-center/pending-approval",
"plugin": "/plugin",
"plugin_barcode": "/plugin/barcode",

View File

@@ -1,7 +1,7 @@
import { SYSTEM_SERVICE_PREFIX } from '@/constants/service';
import { request } from '../request';
import { clearUserRouteCache } from './route';
import type { ServiceRequestResult } from './shared';
import { type ServiceRequestResult, mapServiceResult, normalizeStringId } from './shared';
/** 后端登录返回 */
interface BackendLoginToken {
@@ -38,6 +38,14 @@ interface BackendMyProfileDetailDTO {
position?: Api.SystemManage.PostSimple | null;
}
interface BackendFileDTO {
id: string | number;
configId: string | number;
name?: string | null;
path: string;
url: string;
}
let userInfoPromise: Promise<ServiceRequestResult<BackendUserInfoDTO>> | null = null;
/** 将后端 token 结构转换成前端现有结构 */
@@ -187,6 +195,23 @@ export function fetchUpdateMyProfile(data: Api.Auth.UpdateMyProfileParams) {
}
/** 修改当前登录人密码 */
export async function fetchUpdateMyAvatar(file: File) {
const formData = new FormData();
formData.append('file', file);
const result = await request<BackendFileDTO>({
url: `${SYSTEM_SERVICE_PREFIX}/user/profile/update-avatar`,
method: 'put',
data: formData
});
return mapServiceResult(result as ServiceRequestResult<BackendFileDTO>, data => ({
...data,
id: normalizeStringId(data.id),
configId: normalizeStringId(data.configId)
}));
}
export function fetchUpdateMyPassword(data: Api.Auth.UpdateMyPasswordParams) {
return request<boolean>({
url: `${SYSTEM_SERVICE_PREFIX}/user/profile/update-password`,

View File

@@ -1,5 +1,6 @@
import { SYSTEM_SERVICE_PREFIX } from '@/constants/service';
import { request } from '../request';
import { type ServiceRequestResult, mapServiceResult } from './shared';
const DICT_TYPE_PREFIX = `${SYSTEM_SERVICE_PREFIX}/dict-type`;
const DICT_DATA_PREFIX = `${SYSTEM_SERVICE_PREFIX}/dict-data`;
@@ -15,6 +16,52 @@ function createBatchDeleteQuery(ids: number[]) {
return query.toString();
}
type DictDataResponse = Omit<Api.Dict.DictData, 'colorType'> & {
colorType?: string | null;
color_type?: string | null;
};
type DictDataPageResponse = Omit<Api.Dict.PageResult<Api.Dict.DictData>, 'list'> & {
list: DictDataResponse[];
};
type FrontendDictDataResponse = Omit<Api.Dict.FrontendDictData, 'colorType'> & {
colorType?: string | null;
color_type?: string | null;
};
type FrontendDictCacheResponse = Record<string, FrontendDictDataResponse[]>;
function normalizeColorType(value?: string | null) {
return value?.trim() || null;
}
function normalizeDictData(data: DictDataResponse): Api.Dict.DictData {
const { color_type: colorTypeFromSnakeCase, ...rest } = data;
return {
...rest,
colorType: normalizeColorType(data.colorType ?? colorTypeFromSnakeCase)
};
}
function normalizeFrontendDictData(data: FrontendDictDataResponse): Api.Dict.FrontendDictData {
const { color_type: colorTypeFromSnakeCase, ...rest } = data;
return {
...rest,
colorType: normalizeColorType(data.colorType ?? colorTypeFromSnakeCase)
};
}
function toSaveDictDataRequest(data: Api.Dict.SaveDictDataParams) {
return {
...data,
colorType: normalizeColorType(data.colorType),
remark: data.remark?.trim() || null
};
}
/** 获取字典类型分页 */
export function fetchGetDictTypePage(params?: Api.Dict.DictTypeSearchParams) {
return request<Api.Dict.PageResult<Api.Dict.DictType>>({
@@ -60,20 +107,40 @@ export function fetchBatchDeleteDictType(ids: number[]) {
}
/** 获取字典数据分页 */
export function fetchGetDictDataPage(params: Api.Dict.DictDataSearchParams) {
return request<Api.Dict.PageResult<Api.Dict.DictData>>({
export async function fetchGetDictDataPage(params: Api.Dict.DictDataSearchParams) {
const result = await request<DictDataPageResponse>({
url: `${DICT_DATA_PREFIX}/page`,
method: 'get',
params
});
if (result.error || !result.data) {
return result as unknown as Awaited<ReturnType<typeof request<Api.Dict.PageResult<Api.Dict.DictData>>>>;
}
return {
...result,
data: {
...result.data,
list: result.data.list.map(normalizeDictData)
}
};
}
/** 获取前端运行时字典缓存 */
export function fetchGetFrontendDictCache() {
return request<Api.Dict.FrontendDictCache>({
export async function fetchGetFrontendDictCache() {
const result = await request<FrontendDictCacheResponse>({
url: `${DICT_DATA_PREFIX}/frontend-cache`,
method: 'get'
});
return mapServiceResult(
result as ServiceRequestResult<FrontendDictCacheResponse>,
data =>
Object.fromEntries(
Object.entries(data).map(([dictType, list]) => [dictType, list.map(normalizeFrontendDictData)])
) as Api.Dict.FrontendDictCache
);
}
/** 创建字典数据 */
@@ -81,7 +148,7 @@ export function fetchCreateDictData(data: Api.Dict.SaveDictDataParams) {
return request<number>({
url: `${DICT_DATA_PREFIX}/create`,
method: 'post',
data
data: toSaveDictDataRequest(data)
});
}
@@ -90,7 +157,7 @@ export function fetchUpdateDictData(data: { id: number } & Api.Dict.SaveDictData
return request<boolean>({
url: `${DICT_DATA_PREFIX}/update`,
method: 'put',
data
data: toSaveDictDataRequest(data)
});
}
@@ -112,9 +179,14 @@ export function fetchBatchDeleteDictData(ids: number[]) {
}
/** 通过岗位编码获取该字典的所有字典数据 */
export function fetchGetDictDataByCode(code: string) {
return request<Api.Dict.PageResult<Api.Dict.DictData>>({
export async function fetchGetDictDataByCode(code: string) {
const result = await request<DictDataPageResponse>({
url: `${DICT_DATA_PREFIX}/code?code=${code}`,
method: 'get'
});
return mapServiceResult(result as ServiceRequestResult<DictDataPageResponse>, data => ({
...data,
list: data.list.map(normalizeDictData)
}));
}

View File

@@ -3,6 +3,8 @@ export * from './dict';
export * from './file';
export * from './infra';
export * from './object-context';
export * from './overtime-application';
export * from './personal-item';
export * from './product';
export * from './project';
export * from './project-shared';

View File

@@ -0,0 +1,280 @@
import { WEB_SERVICE_PREFIX } from '@/constants/service';
import { request } from '../request';
import { type ProjectLocalDateValue, normalizeProjectLocalDate } from './project-shared';
import {
type ServiceRequestResult,
mapServiceResult,
normalizeNullableStringId,
normalizeStringId,
safeJsonRequestConfig
} from './shared';
const OVERTIME_APPLICATION_PREFIX = `${WEB_SERVICE_PREFIX}/project/overtime-applications`;
type StringIdResponse = string | number;
type OvertimeApplicationResponse = Omit<
Api.OvertimeApplication.OvertimeApplication,
'id' | 'applicantId' | 'approverId' | 'overtimeDate' | 'allowEdit' | 'terminal'
> & {
id: StringIdResponse;
applicantId: StringIdResponse;
approverId: StringIdResponse;
overtimeDate: ProjectLocalDateValue;
allowEdit?: boolean | number | string | null;
terminal?: boolean | number | string | null;
};
type OvertimeApplicationPageResponse = Omit<Api.OvertimeApplication.OvertimeApplicationPageResult, 'total' | 'list'> & {
total: number | string;
list: OvertimeApplicationResponse[];
};
type OvertimeApplicationStatusLogResponse = Omit<
Api.OvertimeApplication.OvertimeApplicationStatusLog,
'id' | 'applicationId' | 'operatorUserId' | 'overtimeDateSnapshot'
> & {
id: StringIdResponse;
applicationId: StringIdResponse;
operatorUserId: StringIdResponse;
overtimeDateSnapshot: ProjectLocalDateValue;
};
function normalizeBooleanFlag(value: boolean | number | string | null | undefined) {
if (typeof value === 'boolean') {
return value;
}
if (typeof value === 'number') {
return value === 1;
}
if (typeof value === 'string') {
const normalized = value.trim().toLowerCase();
return !['', '0', 'false', 'n', 'no'].includes(normalized);
}
return false;
}
function normalizeTotal(total: number | string) {
const value = Number(total);
return Number.isFinite(value) ? Math.max(0, value) : 0;
}
function normalizeOvertimeApplication(
response: OvertimeApplicationResponse
): Api.OvertimeApplication.OvertimeApplication {
return {
...response,
id: normalizeStringId(response.id),
applicantId: normalizeStringId(response.applicantId),
approverId: normalizeStringId(response.approverId),
overtimeDate: normalizeProjectLocalDate(response.overtimeDate) ?? '',
statusName: response.statusName || response.statusCode,
allowEdit: normalizeBooleanFlag(response.allowEdit),
terminal: normalizeBooleanFlag(response.terminal),
approvalComment: response.approvalComment ?? null,
approvalTime: response.approvalTime ?? null
};
}
function normalizeStatusLog(
response: OvertimeApplicationStatusLogResponse
): Api.OvertimeApplication.OvertimeApplicationStatusLog {
return {
...response,
id: normalizeStringId(response.id),
applicationId: normalizeStringId(response.applicationId),
operatorUserId: normalizeStringId(response.operatorUserId),
overtimeDateSnapshot: normalizeProjectLocalDate(response.overtimeDateSnapshot) ?? '',
fromStatus: normalizeNullableStringId(response.fromStatus),
reason: response.reason ?? null,
remark: response.remark ?? null
};
}
function createPageQuery(params: Api.OvertimeApplication.OvertimeApplicationSearchParams = {}) {
const query = new URLSearchParams();
query.append('pageNo', String(params.pageNo ?? 1));
query.append('pageSize', String(params.pageSize ?? 10));
if (params.keyword) {
query.append('keyword', params.keyword);
}
if (params.applicantName) {
query.append('applicantName', params.applicantName);
}
if (params.approverId) {
query.append('approverId', params.approverId);
}
if (params.approverName) {
query.append('approverName', params.approverName);
}
if (params.statusCode) {
query.append('statusCode', params.statusCode);
}
params.overtimeDate?.forEach(item => {
if (item) {
query.append('overtimeDate', item);
}
});
params.createTime?.forEach(item => {
if (item) {
query.append('createTime', item);
}
});
return query.toString();
}
function toSaveRequest(data: Api.OvertimeApplication.SaveOvertimeApplicationParams) {
return {
overtimeDate: data.overtimeDate,
overtimeDuration: data.overtimeDuration,
overtimeReason: data.overtimeReason.trim(),
overtimeContent: data.overtimeContent.trim(),
approverId: data.approverId
};
}
function toStatusActionRequest(data: Api.OvertimeApplication.StatusActionParams = {}) {
return {
reason: data.reason?.trim() || undefined
};
}
export async function fetchGetOvertimeApplicationPage(
params: Api.OvertimeApplication.OvertimeApplicationSearchParams = {}
) {
const query = createPageQuery(params);
const result = await request<OvertimeApplicationPageResponse>({
...safeJsonRequestConfig,
url: query ? `${OVERTIME_APPLICATION_PREFIX}/page?${query}` : `${OVERTIME_APPLICATION_PREFIX}/page`,
method: 'get'
});
return mapServiceResult(result as ServiceRequestResult<OvertimeApplicationPageResponse>, data => ({
total: normalizeTotal(data.total),
list: data.list.map(normalizeOvertimeApplication)
}));
}
export async function fetchGetOvertimeApplicationApprovalPage(
params: Api.OvertimeApplication.OvertimeApplicationSearchParams = {}
) {
const query = createPageQuery(params);
const result = await request<OvertimeApplicationPageResponse>({
...safeJsonRequestConfig,
url: query
? `${OVERTIME_APPLICATION_PREFIX}/approval-page?${query}`
: `${OVERTIME_APPLICATION_PREFIX}/approval-page`,
method: 'get'
});
return mapServiceResult(result as ServiceRequestResult<OvertimeApplicationPageResponse>, data => ({
total: normalizeTotal(data.total),
list: data.list.map(normalizeOvertimeApplication)
}));
}
export async function fetchGetOvertimeApplicationDetail(id: string) {
const result = await request<OvertimeApplicationResponse>({
...safeJsonRequestConfig,
url: `${OVERTIME_APPLICATION_PREFIX}/${id}`,
method: 'get'
});
return mapServiceResult(result as ServiceRequestResult<OvertimeApplicationResponse>, normalizeOvertimeApplication);
}
export async function fetchCreateOvertimeApplication(data: Api.OvertimeApplication.SaveOvertimeApplicationParams) {
const result = await request<string | number>({
...safeJsonRequestConfig,
url: OVERTIME_APPLICATION_PREFIX,
method: 'post',
data: toSaveRequest(data)
});
return mapServiceResult(result as ServiceRequestResult<string | number>, normalizeStringId);
}
export function fetchUpdateRejectedOvertimeApplication(
id: string,
data: Api.OvertimeApplication.SaveOvertimeApplicationParams
) {
return request<boolean>({
...safeJsonRequestConfig,
url: `${OVERTIME_APPLICATION_PREFIX}/${id}`,
method: 'put',
data: toSaveRequest(data)
});
}
export function fetchApproveOvertimeApplication(id: string, data: Api.OvertimeApplication.StatusActionParams = {}) {
return request<boolean>({
...safeJsonRequestConfig,
url: `${OVERTIME_APPLICATION_PREFIX}/${id}/approve`,
method: 'post',
data: toStatusActionRequest(data)
});
}
export function fetchRejectOvertimeApplication(id: string, data: Api.OvertimeApplication.StatusActionParams) {
return request<boolean>({
...safeJsonRequestConfig,
url: `${OVERTIME_APPLICATION_PREFIX}/${id}/reject`,
method: 'post',
data: toStatusActionRequest(data)
});
}
export function fetchCancelOvertimeApplication(id: string, data: Api.OvertimeApplication.StatusActionParams) {
return request<boolean>({
...safeJsonRequestConfig,
url: `${OVERTIME_APPLICATION_PREFIX}/${id}/cancel`,
method: 'post',
data: toStatusActionRequest(data)
});
}
export function fetchDeleteOvertimeApplication(id: string) {
return request<boolean>({
...safeJsonRequestConfig,
url: `${OVERTIME_APPLICATION_PREFIX}/${id}`,
method: 'delete'
});
}
export async function fetchGetOvertimeApplicationStatusLogs(id: string) {
const result = await request<OvertimeApplicationStatusLogResponse[]>({
...safeJsonRequestConfig,
url: `${OVERTIME_APPLICATION_PREFIX}/${id}/status-logs`,
method: 'get'
});
return mapServiceResult(result as ServiceRequestResult<OvertimeApplicationStatusLogResponse[]>, data =>
data.map(normalizeStatusLog)
);
}
export function fetchExportOvertimeApplications(params: Api.OvertimeApplication.OvertimeApplicationSearchParams = {}) {
const query = createPageQuery(params);
return request<Blob, 'blob'>({
url: query ? `${OVERTIME_APPLICATION_PREFIX}/export?${query}` : `${OVERTIME_APPLICATION_PREFIX}/export`,
method: 'get',
responseType: 'blob'
});
}

View File

@@ -0,0 +1,880 @@
import dayjs from 'dayjs';
import type { ConfigType } from 'dayjs';
import type { FlatResponseData } from '@sa/axios';
import { WEB_SERVICE_PREFIX } from '@/constants/service';
import { request } from '../request';
import {
type ProjectExecutionResponse,
type TaskWorklogResponse,
normalizeProjectLocalDate,
normalizeTaskWorklog
} from './project-shared';
import { type ServiceRequestResult, mapServiceResult, normalizeStringId, safeJsonRequestConfig } from './shared';
type PersonalItemRecord = Api.PersonalItem.PersonalItem;
type PersonalItemWorklogRecord = Api.Project.TaskWorklog;
type PersonalItemResult<T> = Promise<FlatResponseData<any, T>>;
type StringIdResponse = string | number;
type PersonalItemLocalDateValue = string | number[] | null;
type AttachmentItemResponse = Omit<Api.Project.AttachmentItem, 'fileId'> & {
fileId?: StringIdResponse;
id?: StringIdResponse;
};
type PersonalItemLifecycleActionResponse = Omit<Api.PersonalItem.PersonalItemLifecycleAction, 'needReason'> & {
needReason?: boolean | number | string | null;
};
type PersonalItemResponse = Omit<
Api.PersonalItem.PersonalItem,
| 'id'
| 'ownerId'
| 'terminal'
| 'allowEdit'
| 'availableActions'
| 'plannedStartDate'
| 'plannedEndDate'
| 'actualStartDate'
| 'actualEndDate'
| 'attachments'
| 'totalSpentHours'
> & {
id: StringIdResponse;
ownerId: StringIdResponse;
terminal?: boolean | number | string | null;
allowEdit?: boolean | number | string | null;
availableActions?: PersonalItemLifecycleActionResponse[] | null;
plannedStartDate?: PersonalItemLocalDateValue;
plannedEndDate?: PersonalItemLocalDateValue;
actualStartDate?: PersonalItemLocalDateValue;
actualEndDate?: PersonalItemLocalDateValue;
attachments?: AttachmentItemResponse[] | null;
progressRate?: number | null;
totalSpentHours?: number | string | null;
};
type PersonalItemPageResponse = Omit<Api.PersonalItem.PersonalItemPageResult, 'total' | 'list'> & {
total: number | string;
list: PersonalItemResponse[];
};
type PersonalItemWorklogPageResponse = Api.Project.PageResult<TaskWorklogResponse>;
type PersonalItemExecutionOptionResponse = ProjectExecutionResponse & {
projectName?: string | null;
};
type PersonalItemSaveRequest = {
executionId?: string;
taskTitle: string;
type: string;
progressRate?: number;
plannedStartDate?: string;
plannedEndDate?: string;
taskDesc?: string;
attachments?: Array<{
id?: string;
url: string;
name: string;
size?: number;
contentType?: string;
}>;
};
type PersonalItemWorklogSaveRequest = {
startDate: string;
endDate: string;
durationHours: number;
progressRate: number;
workContent?: string;
attachments?: Array<{
id?: string;
url: string;
name: string;
size?: number;
contentType?: string;
}>;
difficulty: string;
};
const PERSONAL_ITEM_PREFIX = `${WEB_SERVICE_PREFIX}/project/personal-items`;
const CURRENT_USER_ID = 'current-user';
const CURRENT_USER_NAME = '当前用户';
const personalItems: PersonalItemRecord[] = createSeedItems();
const personalItemWorklogs: PersonalItemWorklogRecord[] = createSeedWorklogs();
const executionOptions: Api.PersonalItem.PersonalItemExecutionOption[] = createExecutionOptions();
function createSuccessResult<T>(data: T): PersonalItemResult<T> {
return Promise.resolve({
data,
error: null,
response: undefined
} as unknown as FlatResponseData<any, T>);
}
function normalizePageTotal(total: number | string) {
const value = Number(total);
return Number.isFinite(value) ? Math.max(0, value) : 0;
}
function normalizeAttachments(list?: AttachmentItemResponse[] | null): Api.Project.AttachmentItem[] | null {
if (!list) {
return null;
}
return list.map(item => {
const rawId = item.fileId ?? item.id;
return {
...item,
fileId: rawId === null || rawId === undefined ? '' : String(rawId)
};
});
}
function normalizeBooleanFlag(value: boolean | number | string | null | undefined) {
if (typeof value === 'boolean') {
return value;
}
if (typeof value === 'number') {
return value === 1;
}
if (typeof value === 'string') {
const normalized = value.trim().toLowerCase();
if (!normalized || normalized === '0' || normalized === 'false' || normalized === 'n') {
return false;
}
return true;
}
return false;
}
function normalizeLifecycleActions(
actions?: PersonalItemLifecycleActionResponse[] | null
): Api.PersonalItem.PersonalItemLifecycleAction[] {
return (actions ?? []).map(action => ({
actionCode: action.actionCode,
actionName: action.actionName ?? '',
needReason: normalizeBooleanFlag(action.needReason)
}));
}
function normalizePersonalItem(response: PersonalItemResponse): Api.PersonalItem.PersonalItem {
return {
id: normalizeStringId(response.id),
taskTitle: response.taskTitle ?? '',
type: response.type ?? '',
ownerId: normalizeStringId(response.ownerId),
statusCode: response.statusCode,
terminal: normalizeBooleanFlag(response.terminal),
allowEdit: normalizeBooleanFlag(response.allowEdit),
availableActions: normalizeLifecycleActions(response.availableActions),
progressRate:
typeof response.progressRate === 'number' ? response.progressRate : Number(response.progressRate ?? 0),
totalSpentHours: (() => {
if (typeof response.totalSpentHours === 'number') {
return response.totalSpentHours;
}
if (response.totalSpentHours === null || response.totalSpentHours === undefined) {
return null;
}
return Number(response.totalSpentHours);
})(),
plannedStartDate: normalizeProjectLocalDate(response.plannedStartDate),
plannedEndDate: normalizeProjectLocalDate(response.plannedEndDate),
actualStartDate: normalizeProjectLocalDate(response.actualStartDate),
actualEndDate: normalizeProjectLocalDate(response.actualEndDate),
taskDesc: response.taskDesc ?? null,
lastStatusReason: response.lastStatusReason ?? null,
attachments: normalizeAttachments(response.attachments),
creator: response.creator ?? '',
createTime: response.createTime ?? '',
updater: response.updater ?? '',
updateTime: response.updateTime ?? '',
deleted: Boolean(response.deleted),
ownerName: response.ownerName ?? null,
ownerNickname: response.ownerNickname ?? null,
statusName: response.statusName ?? null
};
}
function normalizePersonalItemExecutionOption(
response: PersonalItemExecutionOptionResponse
): Api.PersonalItem.PersonalItemExecutionOption {
return {
executionId: normalizeStringId(response.id),
executionName: response.executionName ?? '',
projectId: normalizeStringId(response.projectId),
projectName: response.projectName ?? null
};
}
function toPersonalItemSaveRequest(data: Api.PersonalItem.SavePersonalItemParams): PersonalItemSaveRequest {
return {
executionId: data.executionId ?? undefined,
taskTitle: data.taskTitle.trim(),
type: data.type,
progressRate: typeof data.progressRate === 'number' ? data.progressRate : undefined,
plannedStartDate: data.plannedStartDate ?? undefined,
plannedEndDate: data.plannedEndDate ?? undefined,
taskDesc: data.taskDesc ?? undefined,
attachments:
data.attachments?.map(item => ({
id: item.fileId || undefined,
url: item.url,
name: item.name,
size: item.size,
contentType: item.contentType
})) ?? undefined
};
}
function toPersonalItemWorklogSaveRequest(
data: Api.PersonalItem.SavePersonalItemWorklogParams
): PersonalItemWorklogSaveRequest {
return {
startDate: data.startDate,
endDate: data.endDate,
durationHours: Number(data.durationHours.toFixed(1)),
progressRate: Number(data.progressRate.toFixed(2)),
workContent: data.workContent ?? undefined,
attachments:
data.attachments?.map(item => ({
id: item.fileId || undefined,
url: item.url,
name: item.name,
size: item.size,
contentType: item.contentType
})) ?? undefined,
difficulty: data.difficulty
};
}
function createPersonalItemPageQuery(params: Api.PersonalItem.PersonalItemSearchParams = {}) {
const query = new URLSearchParams();
query.append('pageNo', String(params.pageNo ?? 1));
query.append('pageSize', String(params.pageSize ?? 10));
if (params.keyword) {
query.append('keyword', params.keyword);
}
if (params.ownerId) {
query.append('ownerId', params.ownerId);
}
if (params.statusCode) {
query.append('statusCode', params.statusCode);
}
params.updateTime?.forEach(item => {
if (item) {
query.append('updateTime', item);
}
});
return query.toString();
}
function createIdsQuery(ids: string[]) {
const query = new URLSearchParams();
ids.forEach(id => {
if (id) {
query.append('ids', id);
}
});
return query.toString();
}
function createBindExecutionQuery(payload: Api.PersonalItem.BindPersonalItemExecutionParams) {
const query = new URLSearchParams();
payload.ids.forEach(id => {
if (id) {
query.append('itemIds', id);
}
});
query.append('executionId', payload.executionId);
return query.toString();
}
function cloneAttachment(item: Api.Project.AttachmentItem): Api.Project.AttachmentItem {
return { ...item };
}
function cloneItem(item: PersonalItemRecord): PersonalItemRecord {
return {
...item,
attachments: item.attachments?.map(cloneAttachment) ?? null
};
}
function cloneWorklog(item: PersonalItemWorklogRecord): PersonalItemWorklogRecord {
return {
...item,
attachments: item.attachments?.map(cloneAttachment) ?? null
};
}
function normalizeDateTime(value?: ConfigType | null) {
const target = value ? dayjs(value) : dayjs();
return target.isValid() ? target.format('YYYY-MM-DD HH:mm:ss') : dayjs().format('YYYY-MM-DD HH:mm:ss');
}
function normalizeDate(value?: ConfigType | null) {
if (!value) {
return null;
}
const target = dayjs(value);
return target.isValid() ? target.format('YYYY-MM-DD') : null;
}
function createSeedItems(): PersonalItemRecord[] {
const now = dayjs();
return [
{
id: 'personal-item-1',
taskTitle: '整理供应商沟通纪要',
type: 'daily',
ownerId: CURRENT_USER_ID,
statusCode: 'active',
progressRate: 45,
plannedStartDate: normalizeDate(now.subtract(3, 'day')),
plannedEndDate: normalizeDate(now.add(2, 'day')),
actualStartDate: normalizeDate(now.subtract(2, 'day')),
actualEndDate: null,
taskDesc: '<p>补齐今天会议纪要,沉淀成一页内部记录,便于后续同步。</p>',
lastStatusReason: null,
attachments: null,
creator: CURRENT_USER_NAME,
createTime: normalizeDateTime(now.subtract(3, 'day').hour(9).minute(20).second(0)),
updater: CURRENT_USER_NAME,
updateTime: normalizeDateTime(now.subtract(2, 'hour')),
deleted: false,
ownerName: CURRENT_USER_NAME,
statusName: '进行中'
},
{
id: 'personal-item-2',
taskTitle: '清理浏览器收藏夹里的项目入口',
type: 'daily',
ownerId: CURRENT_USER_ID,
statusCode: 'pending',
progressRate: 0,
plannedStartDate: normalizeDate(now.add(1, 'day')),
plannedEndDate: normalizeDate(now.add(4, 'day')),
actualStartDate: null,
actualEndDate: null,
taskDesc: '<p>把已经废弃的测试环境、旧文档入口统一清理。</p>',
lastStatusReason: null,
attachments: null,
creator: CURRENT_USER_NAME,
createTime: normalizeDateTime(now.subtract(2, 'day').hour(14).minute(10).second(0)),
updater: CURRENT_USER_NAME,
updateTime: normalizeDateTime(now.subtract(5, 'hour')),
deleted: false,
ownerName: CURRENT_USER_NAME,
statusName: '待处理'
},
{
id: 'personal-item-3',
taskTitle: '补充账号开通说明截图',
type: 'support',
ownerId: CURRENT_USER_ID,
statusCode: 'completed',
progressRate: 100,
plannedStartDate: normalizeDate(now.subtract(5, 'day')),
plannedEndDate: normalizeDate(now.subtract(2, 'day')),
actualStartDate: normalizeDate(now.subtract(5, 'day')),
actualEndDate: normalizeDate(now.subtract(1, 'day')),
taskDesc: '<p>为新同事入职说明补一版截图,后续发在群公告。</p>',
lastStatusReason: '已完成并同步团队',
attachments: null,
creator: CURRENT_USER_NAME,
createTime: normalizeDateTime(now.subtract(5, 'day').hour(11).minute(0).second(0)),
updater: CURRENT_USER_NAME,
updateTime: normalizeDateTime(now.subtract(1, 'day').hour(18).minute(30).second(0)),
deleted: false,
ownerName: CURRENT_USER_NAME,
statusName: '已完成'
}
];
}
function createSeedWorklogs(): PersonalItemWorklogRecord[] {
const now = dayjs();
return [
{
id: 'worklog-1',
taskId: 'personal-item-1',
userId: CURRENT_USER_ID,
userNickname: CURRENT_USER_NAME,
startDate: normalizeDate(now.subtract(2, 'day'))!,
endDate: normalizeDate(now.subtract(2, 'day'))!,
durationHours: 2.5,
progressRate: 30,
difficulty: '2',
workContent: '整理会议录音和重点结论,先输出初版纪要。',
attachments: null,
createTime: normalizeDateTime(now.subtract(2, 'day').hour(19)),
updateTime: normalizeDateTime(now.subtract(2, 'day').hour(19))
},
{
id: 'worklog-2',
taskId: 'personal-item-1',
userId: CURRENT_USER_ID,
userNickname: CURRENT_USER_NAME,
startDate: normalizeDate(now.subtract(1, 'day'))!,
endDate: normalizeDate(now.subtract(1, 'day'))!,
durationHours: 1.5,
progressRate: 45,
difficulty: '2',
workContent: '补全供应商待确认项并整理后续跟进人。',
attachments: null,
createTime: normalizeDateTime(now.subtract(1, 'day').hour(18)),
updateTime: normalizeDateTime(now.subtract(1, 'day').hour(18))
},
{
id: 'worklog-3',
taskId: 'personal-item-3',
userId: CURRENT_USER_ID,
userNickname: CURRENT_USER_NAME,
startDate: normalizeDate(now.subtract(5, 'day'))!,
endDate: normalizeDate(now.subtract(5, 'day'))!,
durationHours: 1,
progressRate: 60,
difficulty: '1',
workContent: '补拍账号开通流程截图。',
attachments: null,
createTime: normalizeDateTime(now.subtract(5, 'day').hour(15)),
updateTime: normalizeDateTime(now.subtract(5, 'day').hour(15))
},
{
id: 'worklog-4',
taskId: 'personal-item-3',
userId: CURRENT_USER_ID,
userNickname: CURRENT_USER_NAME,
startDate: normalizeDate(now.subtract(1, 'day'))!,
endDate: normalizeDate(now.subtract(1, 'day'))!,
durationHours: 0.5,
progressRate: 100,
difficulty: '1',
workContent: '校对文案并发到群公告。',
attachments: null,
createTime: normalizeDateTime(now.subtract(1, 'day').hour(18).minute(20)),
updateTime: normalizeDateTime(now.subtract(1, 'day').hour(18).minute(20))
}
];
}
function createExecutionOptions(): Api.PersonalItem.PersonalItemExecutionOption[] {
return [
{
executionId: 'execution-1001',
executionName: '2026Q2 运营提效',
projectId: 'project-1001',
projectName: '运营中台优化'
},
{
executionId: 'execution-1002',
executionName: '2026Q2 用户支持专项',
projectId: 'project-1002',
projectName: '基础平台升级'
},
{
executionId: 'execution-1003',
executionName: '2026Q3 数据治理',
projectId: 'project-1003',
projectName: '数据资产规范化'
}
];
}
function findItemIndex(id: string) {
return personalItems.findIndex(item => item.id === id);
}
function getItemOrThrow(id: string) {
const item = personalItems.find(current => current.id === id && !current.deleted);
if (!item) {
throw new Error(`personal item not found: ${id}`);
}
return item;
}
function sortItems(list: PersonalItemRecord[]) {
return [...list].sort((left, right) => dayjs(right.updateTime).valueOf() - dayjs(left.updateTime).valueOf());
}
function sortWorklogs(list: PersonalItemWorklogRecord[]) {
return [...list].sort((left, right) => {
const endDiff = dayjs(right.endDate).valueOf() - dayjs(left.endDate).valueOf();
if (endDiff !== 0) {
return endDiff;
}
return dayjs(right.updateTime).valueOf() - dayjs(left.updateTime).valueOf();
});
}
function getPersonalItemStatusName(statusCode: Api.PersonalItem.PersonalItemStatusCode) {
const statusNameMap: Partial<Record<Api.PersonalItem.PersonalItemStatusCode, string>> = {
pending: '待处理',
active: '进行中',
completed: '已完成'
};
return statusNameMap[statusCode] || statusCode;
}
function removeItemsByIds(ids: string[]) {
const idSet = new Set(ids);
for (let i = personalItems.length - 1; i >= 0; i -= 1) {
if (idSet.has(personalItems[i].id)) {
personalItems.splice(i, 1);
}
}
for (let i = personalItemWorklogs.length - 1; i >= 0; i -= 1) {
if (idSet.has(personalItemWorklogs[i].taskId)) {
personalItemWorklogs.splice(i, 1);
}
}
}
function sumWorklogHours(logs: PersonalItemWorklogRecord[]) {
return logs.reduce((sum, log) => sum + (log.durationHours ?? 0), 0);
}
function syncItemFromWorklogs(itemId: string) {
const item = getItemOrThrow(itemId);
const logs = sortWorklogs(personalItemWorklogs.filter(log => log.taskId === itemId));
item.statusName = getPersonalItemStatusName(item.statusCode);
item.totalSpentHours = sumWorklogHours(logs);
if (logs.length === 0) {
if (item.statusCode !== 'completed') {
item.progressRate = 0;
item.actualStartDate = null;
item.actualEndDate = null;
}
return;
}
const latestLog = logs[0];
const chronologicalLogs = [...logs].sort(
(left, right) => dayjs(left.startDate).valueOf() - dayjs(right.startDate).valueOf()
);
item.progressRate = latestLog.progressRate ?? item.progressRate;
item.actualStartDate = chronologicalLogs[0]?.startDate ?? item.actualStartDate;
item.actualEndDate = latestLog.endDate ?? item.actualEndDate;
item.updateTime = latestLog.updateTime;
item.updater = CURRENT_USER_NAME;
if (item.statusCode === 'pending') {
item.statusCode = 'active';
item.statusName = getPersonalItemStatusName(item.statusCode);
}
}
function applySaveFields(target: PersonalItemRecord, payload: Api.PersonalItem.SavePersonalItemParams) {
target.taskTitle = payload.taskTitle.trim();
target.type = payload.type;
target.ownerId = payload.ownerId || target.ownerId;
target.ownerName = CURRENT_USER_NAME;
target.plannedStartDate = payload.plannedStartDate;
target.plannedEndDate = payload.plannedEndDate;
target.taskDesc = payload.taskDesc ?? null;
target.attachments = payload.attachments?.map(cloneAttachment) ?? null;
target.updater = CURRENT_USER_NAME;
target.updateTime = normalizeDateTime();
}
function filterWorklogs(taskId: string, params?: Api.PersonalItem.PersonalItemWorklogSearchParams) {
return sortWorklogs(
personalItemWorklogs.filter(item => {
if (item.taskId !== taskId) {
return false;
}
if (params?.userId && item.userId !== params.userId) {
return false;
}
if (params?.startDate && dayjs(item.endDate).isBefore(dayjs(params.startDate), 'day')) {
return false;
}
if (params?.endDate && dayjs(item.startDate).isAfter(dayjs(params.endDate), 'day')) {
return false;
}
return true;
})
);
}
export async function fetchGetPersonalItemPage(params: Api.PersonalItem.PersonalItemSearchParams = {}) {
const query = createPersonalItemPageQuery(params);
const result = await request<PersonalItemPageResponse>({
...safeJsonRequestConfig,
url: query ? `${PERSONAL_ITEM_PREFIX}/page?${query}` : `${PERSONAL_ITEM_PREFIX}/page`,
method: 'get'
});
return mapServiceResult(result as ServiceRequestResult<PersonalItemPageResponse>, data => ({
total: normalizePageTotal(data.total),
list: data.list.map(normalizePersonalItem)
}));
}
export async function fetchGetPersonalItemDetail(id: string) {
const result = await request<PersonalItemResponse>({
...safeJsonRequestConfig,
url: `${PERSONAL_ITEM_PREFIX}/${id}`,
method: 'get'
});
return mapServiceResult(result as ServiceRequestResult<PersonalItemResponse>, normalizePersonalItem);
}
export async function fetchCreatePersonalItem(data: Api.PersonalItem.SavePersonalItemParams) {
const result = await request<string | number>({
...safeJsonRequestConfig,
url: PERSONAL_ITEM_PREFIX,
method: 'post',
data: toPersonalItemSaveRequest(data)
});
const mapped = mapServiceResult(result as ServiceRequestResult<string | number>, normalizeStringId);
if (!mapped.error && mapped.data) {
const now = normalizeDateTime();
const createdItem: PersonalItemRecord = {
id: mapped.data,
taskTitle: data.taskTitle.trim(),
type: data.type,
ownerId: data.ownerId || CURRENT_USER_ID,
statusCode: 'pending',
progressRate: typeof data.progressRate === 'number' ? data.progressRate : 0,
plannedStartDate: data.plannedStartDate,
plannedEndDate: data.plannedEndDate,
actualStartDate: null,
actualEndDate: null,
taskDesc: data.taskDesc ?? null,
lastStatusReason: null,
attachments: data.attachments?.map(cloneAttachment) ?? null,
creator: CURRENT_USER_NAME,
createTime: now,
updater: CURRENT_USER_NAME,
updateTime: now,
deleted: false,
ownerName: CURRENT_USER_NAME,
statusName: getPersonalItemStatusName('pending')
};
personalItems.unshift(createdItem);
}
return mapped;
}
export async function fetchUpdatePersonalItem(data: Api.PersonalItem.UpdatePersonalItemParams) {
const result = await request<boolean>({
...safeJsonRequestConfig,
url: `${PERSONAL_ITEM_PREFIX}/${data.id}`,
method: 'put',
data: toPersonalItemSaveRequest(data)
});
const mapped = mapServiceResult(result as ServiceRequestResult<boolean>, value => Boolean(value));
if (!mapped.error && mapped.data) {
const targetIndex = findItemIndex(data.id);
if (targetIndex >= 0) {
applySaveFields(personalItems[targetIndex], data);
}
}
return mapped;
}
export async function fetchChangePersonalItemStatus(id: string, data: Api.PersonalItem.ChangePersonalItemStatusParams) {
const result = await request<boolean>({
...safeJsonRequestConfig,
url: `${PERSONAL_ITEM_PREFIX}/${id}/change-status`,
method: 'post',
data: {
actionCode: data.actionCode,
reason: data.reason ?? undefined
}
});
const mapped = mapServiceResult(result as ServiceRequestResult<boolean>, value => Boolean(value));
if (!mapped.error && mapped.data) {
const target = personalItems.find(item => item.id === id);
if (target) {
target.lastStatusReason = data.reason ?? null;
target.updater = CURRENT_USER_NAME;
target.updateTime = normalizeDateTime();
if (data.actionCode === 'start') {
target.statusCode = 'active';
target.statusName = getPersonalItemStatusName('active');
target.actualStartDate ??= normalizeDate(dayjs());
target.actualEndDate = null;
} else if (data.actionCode === 'complete') {
target.statusCode = 'completed';
target.statusName = getPersonalItemStatusName('completed');
target.progressRate = 100;
target.actualStartDate ??= normalizeDate(dayjs());
target.actualEndDate = normalizeDate(dayjs());
} else if (data.actionCode === 'reopen') {
target.statusCode = 'active';
target.statusName = getPersonalItemStatusName('active');
target.actualStartDate ??= normalizeDate(dayjs());
target.actualEndDate = null;
}
}
}
return mapped;
}
export async function fetchDeletePersonalItem(id: string) {
const result = await request<boolean>({
...safeJsonRequestConfig,
url: `${PERSONAL_ITEM_PREFIX}/delete`,
method: 'delete',
params: { id }
});
const mapped = mapServiceResult(result as ServiceRequestResult<boolean>, value => Boolean(value));
if (!mapped.error && mapped.data) {
removeItemsByIds([id]);
}
return mapped;
}
export async function fetchBatchDeletePersonalItems(payload: Api.PersonalItem.BatchDeletePersonalItemParams) {
const query = createIdsQuery(payload.ids);
const result = await request<boolean>({
...safeJsonRequestConfig,
url: query ? `${PERSONAL_ITEM_PREFIX}/delete-list?${query}` : `${PERSONAL_ITEM_PREFIX}/delete-list`,
method: 'delete'
});
const mapped = mapServiceResult(result as ServiceRequestResult<boolean>, value => Boolean(value));
if (!mapped.error && mapped.data) {
removeItemsByIds(payload.ids);
}
return mapped;
}
export async function fetchGetPersonalItemExecutionOptions() {
const result = await request<PersonalItemExecutionOptionResponse[]>({
...safeJsonRequestConfig,
url: `${PERSONAL_ITEM_PREFIX}/owner/all-execution`,
method: 'get'
});
return mapServiceResult(result as ServiceRequestResult<PersonalItemExecutionOptionResponse[]>, data =>
data.map(normalizePersonalItemExecutionOption)
);
}
export async function fetchBindPersonalItemsToExecution(payload: Api.PersonalItem.BindPersonalItemExecutionParams) {
const query = createBindExecutionQuery(payload);
const result = await request<boolean>({
...safeJsonRequestConfig,
url: query ? `${PERSONAL_ITEM_PREFIX}/relate-execution?${query}` : `${PERSONAL_ITEM_PREFIX}/relate-execution`,
method: 'post'
});
return mapServiceResult(result as ServiceRequestResult<boolean>, value => Boolean(value));
}
export function fetchStartPersonalItem(id: string): PersonalItemResult<boolean> {
return fetchChangePersonalItemStatus(id, { actionCode: 'start' }) as PersonalItemResult<boolean>;
}
export function fetchCompletePersonalItem(id: string): PersonalItemResult<boolean> {
return fetchChangePersonalItemStatus(id, { actionCode: 'complete' }) as PersonalItemResult<boolean>;
}
export function fetchReopenPersonalItem(id: string): PersonalItemResult<boolean> {
return fetchChangePersonalItemStatus(id, { actionCode: 'reopen' }) as PersonalItemResult<boolean>;
}
export async function fetchGetPersonalItemWorklogPage(
taskId: string,
params: Api.PersonalItem.PersonalItemWorklogSearchParams = {}
) {
const result = await request<PersonalItemWorklogPageResponse>({
...safeJsonRequestConfig,
url: `${PERSONAL_ITEM_PREFIX}/${taskId}/worklogs`,
method: 'get',
params
});
return mapServiceResult(result as ServiceRequestResult<PersonalItemWorklogPageResponse>, data => ({
...data,
list: data.list.map(normalizeTaskWorklog)
}));
}
export async function fetchCreatePersonalItemWorklog(
taskId: string,
data: Api.PersonalItem.SavePersonalItemWorklogParams
) {
const result = await request<string | number>({
...safeJsonRequestConfig,
url: `${PERSONAL_ITEM_PREFIX}/${taskId}/worklogs`,
method: 'post',
data: toPersonalItemWorklogSaveRequest(data)
});
return mapServiceResult(result as ServiceRequestResult<string | number>, normalizeStringId);
}
export function fetchUpdatePersonalItemWorklog(
taskId: string,
payload: { worklogId: string; data: Api.PersonalItem.SavePersonalItemWorklogParams }
): PersonalItemResult<boolean> {
return request<boolean>({
...safeJsonRequestConfig,
url: `${PERSONAL_ITEM_PREFIX}/${taskId}/worklogs/${payload.worklogId}`,
method: 'put',
data: toPersonalItemWorklogSaveRequest(payload.data)
});
}
export function fetchDeletePersonalItemWorklog(taskId: string, worklogId: string): PersonalItemResult<boolean> {
return request<boolean>({
...safeJsonRequestConfig,
url: `${PERSONAL_ITEM_PREFIX}/${taskId}/worklogs/${worklogId}`,
method: 'delete'
});
}

View File

@@ -33,8 +33,6 @@ interface ProductMemberResponse {
roleId: string | number;
roleName: string;
roleCode: string;
/** 多角色合并展示的非主角色名列表 */
additionalRoleNames?: string[] | null;
managerFlag: boolean;
status: 0 | 1;
joinedTime: string;
@@ -76,7 +74,6 @@ export function normalizeProductMember(response: ProductMemberResponse): Api.Pro
roleId: normalizeStringId(response.roleId),
roleName: response.roleName || '',
roleCode: response.roleCode || '',
additionalRoleNames: response.additionalRoleNames ?? [],
managerFlag: Boolean(response.managerFlag),
status: response.status,
joinedTime: response.joinedTime,

View File

@@ -205,6 +205,41 @@ type RequirementResponse = Omit<
};
type RequirementPageResponse = Api.Product.PageResult<RequirementResponse>;
type RequirementReviewResponse = Omit<
Api.Product.RequirementReview,
'id' | 'requirementId' | 'operatorId' | 'attendees' | 'attachments'
> & {
id: string | number;
requirementId: string | number;
operatorId: string | number;
attendees?: Array<{
userId: string | number;
nickname: string;
}>;
attachments?: AttachmentItemResponse[] | null;
};
type ProductRequirementDashboardSummaryResponse = {
total?: number | string | null;
todo?: number | string | null;
pendingClaim?: number | string | null;
pendingReview?: number | string | null;
pendingDispatch?: number | string | null;
completed?: number | string | null;
completionRate?: number | string | null;
highPriorityTodo?: number | string | null;
};
type ProductRequirementDashboardRecentChangeResponse = Omit<
Api.Product.ProductRequirementDashboardRecentChange,
'id' | 'requirementId' | 'operatorUserId'
> & {
id: string | number;
requirementId?: string | number | null;
operatorUserId?: string | number | null;
};
type ProductRequirementDashboardResponse = {
summary?: ProductRequirementDashboardSummaryResponse | null;
recentChanges?: ProductRequirementDashboardRecentChangeResponse[] | null;
};
type AttachmentItemResponse = Omit<Api.Project.AttachmentItem, 'fileId'> & {
fileId?: string | number;
@@ -242,6 +277,51 @@ function normalizeRequirement(requirement: RequirementResponse): Api.Product.Req
};
}
function normalizeRequirementReview(review: RequirementReviewResponse): Api.Product.RequirementReview {
return {
...review,
id: normalizeStringId(review.id),
requirementId: normalizeStringId(review.requirementId),
operatorId: normalizeStringId(review.operatorId),
attendees: review.attendees?.map(item => ({
...item,
userId: normalizeStringId(item.userId)
})),
attachments: normalizeAttachments(review.attachments)
};
}
function normalizeDashboardCount(value: number | string | null | undefined) {
const count = Number(value ?? 0);
return Number.isFinite(count) ? Math.max(0, count) : 0;
}
function normalizeProductRequirementDashboard(
data: ProductRequirementDashboardResponse
): Api.Product.ProductRequirementDashboard {
const summary = data.summary ?? {};
return {
summary: {
total: normalizeDashboardCount(summary.total),
todo: normalizeDashboardCount(summary.todo),
pendingClaim: normalizeDashboardCount(summary.pendingClaim),
pendingReview: normalizeDashboardCount(summary.pendingReview),
pendingDispatch: normalizeDashboardCount(summary.pendingDispatch),
completed: normalizeDashboardCount(summary.completed),
completionRate: Math.min(100, normalizeDashboardCount(summary.completionRate)),
highPriorityTodo: normalizeDashboardCount(summary.highPriorityTodo)
},
recentChanges: (data.recentChanges ?? []).map(item => ({
...item,
id: normalizeStringId(item.id),
requirementId: normalizeNullableStringId(item.requirementId),
operatorUserId: normalizeNullableStringId(item.operatorUserId)
}))
};
}
/** 获取需求分页列表 */
export async function fetchGetRequirementPage(params?: Api.Product.RequirementSearchParams) {
const result = await request<RequirementPageResponse>({
@@ -337,17 +417,6 @@ export async function fetchSplitRequirement(data: Api.Product.SplitRequirementPa
return mapServiceResult(result as ServiceRequestResult<string | number>, normalizeStringId);
}
/** 关闭需求 */
export function fetchCloseRequirement(data: Api.Product.CloseRequirementParams) {
return request<boolean>({
...safeJsonRequestConfig,
url: `${REQUIREMENT_PREFIX}/close`,
method: 'post',
data
});
}
/** 获取需求可执行的状态动作列表 */
export async function fetchGetRequirementAllowedTransitions(requirementId: string, productId: string) {
const result = await request<Api.Product.RequirementLifecycleAction[]>({
@@ -360,16 +429,62 @@ export async function fetchGetRequirementAllowedTransitions(requirementId: strin
return mapServiceResult(result as ServiceRequestResult<Api.Product.RequirementLifecycleAction[]>, data => data);
}
/** 获取需求生命周期信息 */
export async function fetchGetRequirementLifecycle(requirementId: string, productId: string) {
const result = await request<Api.Product.RequirementLifecycleInfo>({
/** 批量获取需求可执行的状态动作列表 */
export async function fetchGetRequirementAllowedTransitionsBatch(data: Api.Product.RequirementBatchReqVO) {
const result = await request<Api.Product.RequirementAllowedTransitionBatchRespVO[]>({
...safeJsonRequestConfig,
url: `${REQUIREMENT_PREFIX}/lifecycle`,
method: 'get',
params: { requirementId, productId }
url: `${REQUIREMENT_PREFIX}/allowed-transitions/batch`,
method: 'post',
data
});
return mapServiceResult(result as ServiceRequestResult<Api.Product.RequirementLifecycleInfo>, data => data);
return mapServiceResult(
result as ServiceRequestResult<Api.Product.RequirementAllowedTransitionBatchRespVO[]>,
data1 =>
data1.map(item => ({
requirementId: normalizeStringId(item.requirementId),
transitions: item.transitions
}))
);
}
/** 提交产品需求评审 */
export async function fetchSubmitProductRequirementReview(data: Api.Product.RequirementReviewSubmitParams) {
const result = await request<string | number>({
...safeJsonRequestConfig,
url: `${REQUIREMENT_PREFIX}/review/submit`,
method: 'post',
data
});
return mapServiceResult(result as ServiceRequestResult<string | number>, normalizeStringId);
}
/** 获取产品需求评审记录 */
export async function fetchGetProductRequirementReview(productId: string, requirementId: string) {
const result = await request<RequirementReviewResponse>({
...safeJsonRequestConfig,
url: `${REQUIREMENT_PREFIX}/review/get`,
method: 'get',
params: { productId, requirementId }
});
return mapServiceResult(result as ServiceRequestResult<RequirementReviewResponse>, normalizeRequirementReview);
}
/** 获取产品概览需求池实时看板 */
export async function fetchGetProductRequirementDashboard(productId: string) {
const result = await request<ProductRequirementDashboardResponse>({
...safeJsonRequestConfig,
url: `${REQUIREMENT_PREFIX}/dashboard`,
method: 'get',
params: { productId }
});
return mapServiceResult(
result as ServiceRequestResult<ProductRequirementDashboardResponse>,
normalizeProductRequirementDashboard
);
}
/** 获取需求所有状态字典 */
@@ -383,18 +498,7 @@ export async function fetchGetRequirementStatusDict() {
return mapServiceResult(result as ServiceRequestResult<Api.Product.RequirementStatusDict[]>, data => data);
}
/** 获取需求终止态状态字典 */
export async function fetchGetRequirementTerminalStatusDict() {
const result = await request<Api.Product.RequirementStatusDict[]>({
...safeJsonRequestConfig,
url: `${REQUIREMENT_PREFIX}/status/dict/terminal`,
method: 'get'
});
return mapServiceResult(result as ServiceRequestResult<Api.Product.RequirementStatusDict[]>, data => data);
}
/** 判断产品需求是否已分流生成项目需求 */
/** 判断产品需求是否已指派并生成项目需求 */
export async function fetchHasDispatchedProjectRequirement(requirementId: string, productId: string) {
return request<boolean>({
...safeJsonRequestConfig,
@@ -404,6 +508,23 @@ export async function fetchHasDispatchedProjectRequirement(requirementId: string
});
}
/** 批量判断产品需求是否已指派并生成项目需求 */
export async function fetchHasDispatchedProjectRequirementBatch(data: Api.Product.RequirementBatchReqVO) {
const result = await request<Api.Product.RequirementHasDispatchedBatchRespVO[]>({
...safeJsonRequestConfig,
url: `${REQUIREMENT_PREFIX}/has-dispatched/batch`,
method: 'post',
data
});
return mapServiceResult(result as ServiceRequestResult<Api.Product.RequirementHasDispatchedBatchRespVO[]>, data1 =>
data1.map(item => ({
requirementId: normalizeStringId(item.requirementId),
hasDispatched: Boolean(item.hasDispatched)
}))
);
}
/** 根据当前产品需求id获取对应地所流转到项目侧的项目需求id */
export async function fetchGetDispatchedProjectLink(productRequirementId: string) {
return request<{ projectRequirementId: string; projectId: string }>({
@@ -538,6 +659,19 @@ export async function fetchCreateProductMember(id: string, data: Api.Product.Cre
return mapServiceResult(result as ServiceRequestResult<string | number>, normalizeStringId);
}
export async function fetchBatchCreateProductMembers(id: string, data: Api.Product.BatchCreateProductMembersParams) {
const result = await request<Array<string | number>>({
...safeJsonRequestConfig,
url: `${PRODUCT_PREFIX}/${id}/members/batch`,
method: 'post',
data
});
return mapServiceResult(result as ServiceRequestResult<Array<string | number>>, list =>
Array.isArray(list) ? list.map(normalizeStringId) : []
);
}
export function fetchUpdateProductMember(id: string, memberId: string, data: Api.Product.UpdateProductMemberParams) {
return request<boolean>({
...safeJsonRequestConfig,
@@ -547,6 +681,15 @@ export function fetchUpdateProductMember(id: string, memberId: string, data: Api
});
}
export function fetchBatchInactiveProductMembers(id: string, data: Api.Product.BatchInactiveProductMembersParams) {
return request<boolean>({
...safeJsonRequestConfig,
url: `${PRODUCT_PREFIX}/${id}/members/batch/inactive`,
method: 'post',
data
});
}
export function fetchInactiveProductMember(
id: string,
memberId: string,

View File

@@ -23,6 +23,8 @@ export type ProjectExecutionResponse = Omit<
| 'actualStartDate'
| 'actualEndDate'
| 'progressRate'
| 'priority'
| 'priorityName'
> & {
id: StringIdResponse;
projectId: StringIdResponse;
@@ -34,6 +36,8 @@ export type ProjectExecutionResponse = Omit<
actualStartDate?: ProjectLocalDateValue;
actualEndDate?: ProjectLocalDateValue;
progressRate?: number | null;
priority?: string | number | null;
priorityName?: string | null;
};
export type ExecutionAssigneeResponse = Omit<Api.Project.ExecutionAssignee, 'id' | 'executionId' | 'userId'> & {
@@ -108,6 +112,8 @@ export type ProjectTaskResponse = Omit<
| 'executionId'
| 'parentTaskId'
| 'ownerId'
| 'executionOwnerId'
| 'parentTaskOwnerId'
| 'availableActions'
| 'plannedStartDate'
| 'plannedEndDate'
@@ -116,12 +122,18 @@ export type ProjectTaskResponse = Omit<
| 'progressRate'
| 'assignees'
| 'attachments'
| 'priority'
| 'priorityName'
> & {
id: StringIdResponse;
projectId: StringIdResponse;
executionId: StringIdResponse;
executionName?: string | null;
executionStatusCode?: Api.Project.ProjectExecutionStatusCode | null;
parentTaskId?: StringIdResponse | null;
ownerId: StringIdResponse;
executionOwnerId?: StringIdResponse | null;
parentTaskOwnerId?: StringIdResponse | null;
availableActions?: LifecycleActionResponse<Api.Project.ProjectTaskActionCode>[] | null;
plannedStartDate?: ProjectLocalDateValue;
plannedEndDate?: ProjectLocalDateValue;
@@ -131,13 +143,21 @@ export type ProjectTaskResponse = Omit<
assignees?: TaskAssigneeRefResponse[] | null;
attachments?: AttachmentItemResponse[] | null;
totalSpentHours?: number | null;
priority?: string | number | null;
priorityName?: string | null;
};
export type TaskWorklogResponse = Omit<Api.Project.TaskWorklog, 'id' | 'taskId' | 'userId' | 'attachments'> & {
export type TaskWorklogResponse = Omit<
Api.Project.TaskWorklog,
'id' | 'taskId' | 'userId' | 'difficulty' | 'attachments' | 'startDate' | 'endDate'
> & {
id: StringIdResponse;
taskId: StringIdResponse;
userId: StringIdResponse;
difficulty?: string | null;
attachments?: AttachmentItemResponse[] | null;
startDate?: ProjectLocalDateValue;
endDate?: ProjectLocalDateValue;
};
export interface ProjectMemberResponse {
@@ -147,8 +167,6 @@ export interface ProjectMemberResponse {
roleId: string | number;
roleName: string;
roleCode: string;
/** 多角色合并展示的非主角色名列表 */
additionalRoleNames?: string[] | null;
managerFlag: boolean;
status: 0 | 1;
joinedTime: string;
@@ -227,7 +245,6 @@ export function normalizeProjectMember(response: ProjectMemberResponse): Api.Pro
roleId: normalizeStringId(response.roleId),
roleName: response.roleName || '',
roleCode: response.roleCode || '',
additionalRoleNames: response.additionalRoleNames ?? [],
managerFlag: Boolean(response.managerFlag),
status: response.status,
joinedTime: response.joinedTime,
@@ -236,12 +253,21 @@ export function normalizeProjectMember(response: ProjectMemberResponse): Api.Pro
};
}
function normalizePriority(value: string | number | null | undefined): string {
if (value === null || value === undefined || value === '') {
return '1';
}
return String(value);
}
export function normalizeProjectExecution(response: ProjectExecutionResponse): Api.Project.ProjectExecution {
return {
...response,
id: normalizeStringId(response.id),
projectId: normalizeStringId(response.projectId),
projectRequirementId: normalizeNullableStringId(response.projectRequirementId),
projectRequirementName: response.projectRequirementName ?? null,
projectRequirementStatusCode: response.projectRequirementStatusCode ?? null,
ownerId: normalizeStringId(response.ownerId),
ownerNickname: response.ownerNickname ?? null,
statusName: response.statusName ?? null,
@@ -253,6 +279,8 @@ export function normalizeProjectExecution(response: ProjectExecutionResponse): A
actualStartDate: normalizeProjectLocalDate(response.actualStartDate),
actualEndDate: normalizeProjectLocalDate(response.actualEndDate),
progressRate: typeof response.progressRate === 'number' ? response.progressRate : 0,
priority: normalizePriority(response.priority),
priorityName: response.priorityName ?? null,
executionDesc: response.executionDesc ?? null,
lastStatusReason: response.lastStatusReason ?? null
};
@@ -292,9 +320,17 @@ export function normalizeProjectTask(response: ProjectTaskResponse): Api.Project
id: normalizeStringId(response.id),
projectId: normalizeStringId(response.projectId),
executionId: normalizeStringId(response.executionId),
executionName: response.executionName ?? null,
executionStatusCode: response.executionStatusCode ?? null,
parentTaskId: normalizeNullableStringId(response.parentTaskId),
projectRequirementId: normalizeNullableStringId(response.projectRequirementId),
projectRequirementName: response.projectRequirementName ?? null,
projectRequirementStatusCode: response.projectRequirementStatusCode ?? null,
type: response.type ?? '',
ownerId: normalizeStringId(response.ownerId),
ownerNickname: response.ownerNickname ?? null,
executionOwnerId: normalizeNullableStringId(response.executionOwnerId),
parentTaskOwnerId: normalizeNullableStringId(response.parentTaskOwnerId),
statusName: response.statusName ?? null,
terminal: Boolean(response.terminal),
allowEdit: Boolean(response.allowEdit),
@@ -304,6 +340,8 @@ export function normalizeProjectTask(response: ProjectTaskResponse): Api.Project
plannedEndDate: normalizeProjectLocalDate(response.plannedEndDate),
actualStartDate: normalizeProjectLocalDate(response.actualStartDate),
actualEndDate: normalizeProjectLocalDate(response.actualEndDate),
priority: normalizePriority(response.priority),
priorityName: response.priorityName ?? null,
taskDesc: response.taskDesc ?? null,
lastStatusReason: response.lastStatusReason ?? null,
assignees:
@@ -326,7 +364,13 @@ export function normalizeTaskWorklog(response: TaskWorklogResponse): Api.Project
userNickname: response.userNickname ?? null,
workContent: response.workContent ?? null,
attachments: normalizeAttachments(response.attachments),
progressRate: typeof response.progressRate === 'number' ? response.progressRate : 0
progressRate: typeof response.progressRate === 'number' ? response.progressRate : 0,
// 后端 LocalDate 默认序列化为 [year, month, day] 数组,必须归一为 'YYYY-MM-DD' 字符串供 ElDatePicker 使用
startDate: normalizeProjectLocalDate(response.startDate) ?? '',
endDate: normalizeProjectLocalDate(response.endDate) ?? '',
// 历史记录或异常缺失时兜底为字典默认档位 "2"
difficulty: response.difficulty ?? '2',
difficultyName: response.difficultyName ?? null
};
}

View File

@@ -284,6 +284,28 @@ export function fetchInactiveProjectMember(
});
}
export async function fetchBatchCreateProjectMembers(id: string, data: Api.Project.BatchCreateProjectMembersParams) {
const result = await request<Array<string | number>>({
...safeJsonRequestConfig,
url: `${PROJECT_PREFIX}/${id}/members/batch`,
method: 'post',
data
});
return mapServiceResult(result as ServiceRequestResult<Array<string | number>>, list =>
Array.isArray(list) ? list.map(normalizeStringId) : []
);
}
export function fetchBatchInactiveProjectMembers(id: string, data: Api.Project.BatchInactiveProjectMembersParams) {
return request<boolean>({
...safeJsonRequestConfig,
url: `${PROJECT_PREFIX}/${id}/members/batch/inactive`,
method: 'post',
data
});
}
/** 获取项目设置 */
export async function fetchGetProjectSettings(id: string) {
const result = await fetchGetProject(id);
@@ -421,6 +443,14 @@ export function fetchDeleteProjectExecution(
});
}
/** 执行删除预检spec §2.1:返回是否含下挂数据,用于前端弹层分流) */
export function fetchPrecheckDeleteProjectExecution(projectId: string, executionId: string) {
return request<Api.Project.ProjectExecutionDeletePrecheck>({
url: `${getExecutionPrefix(projectId)}/${executionId}/delete-precheck`,
method: 'get'
});
}
/** 变更项目执行状态 */
export function fetchChangeProjectExecutionStatus(
projectId: string,
@@ -616,6 +646,14 @@ export function fetchDeleteProjectTask(
});
}
/** 任务删除预检spec §2.1 */
export function fetchPrecheckDeleteProjectTask(projectId: string, executionId: string, taskId: string) {
return request<Api.Project.ProjectTaskDeletePrecheck>({
url: `${getTaskPrefix(projectId, executionId)}/${taskId}/delete-precheck`,
method: 'get'
});
}
/** 变更项目任务状态 */
export function fetchChangeProjectTaskStatus(
projectId: string,
@@ -630,6 +668,80 @@ export function fetchChangeProjectTaskStatus(
});
}
// ============= 项目级跨执行任务(不带 executionId 路径段) =============
// 调试文档:所有接口挂在 /project/project/{projectId}/tasks/* 下;通过 involveUserId / ownerId / executionIds 等
// 入参组合表达"我的任务 / 项目全部 / 指定执行"等视角。原有执行级 {eid}/tasks/page 等保留不动。
function getProjectTasksPrefix(projectId: string) {
return `${PROJECT_PREFIX}/${projectId}/tasks`;
}
/** 项目级跨执行任务分页 */
export async function fetchGetProjectTaskPageCross(
projectId: string,
params?: Api.Project.ProjectTaskCrossSearchParams
) {
const result = await request<ProjectTaskPageResponse>({
...safeJsonRequestConfig,
url: `${getProjectTasksPrefix(projectId)}/page`,
method: 'get',
params
});
return mapServiceResult(result as ServiceRequestResult<ProjectTaskPageResponse>, data => ({
...data,
list: data.list.map(normalizeProjectTask)
}));
}
/** 项目级跨执行任务状态看板 */
export function fetchGetProjectTaskStatusBoardCross(
projectId: string,
params?: Api.Project.ProjectTaskCrossStatusBoardParams
) {
return request<StatusBoardResponse>({
...safeJsonRequestConfig,
url: `${getProjectTasksPrefix(projectId)}/status-board`,
method: 'get',
params
});
}
/** 项目级跨执行任务看板分页(每列共用同一组 pageNo / pageSize列内固定 plannedEndDate ASC, id DESC */
export async function fetchGetProjectTaskBoardPageCross(
projectId: string,
params?: Api.Project.ProjectTaskCrossBoardPageParams
) {
const result = await request<ProjectTaskBoardPageResponse>({
...safeJsonRequestConfig,
url: `${getProjectTasksPrefix(projectId)}/board-page`,
method: 'get',
params
});
return mapServiceResult(result as ServiceRequestResult<ProjectTaskBoardPageResponse>, data => ({
items: data.items.map(item => ({
...item,
list: item.list.map(normalizeProjectTask)
}))
}));
}
/**
* 项目级"今日小条"汇总4 个数字 + 服务器日期边界)。
*
* scope=all 必须有 project:task:query 权限,否则 403PROJECT_OBJECT_PERMISSION_DENIED
* 前端切到"项目全部"视角前应已基于权限码隐藏入口;如真被 403UI 应自动切回"我的"。
*/
export function fetchGetProjectTaskSummary(projectId: string, params?: Api.Project.ProjectTaskSummaryParams) {
return request<Api.Project.ProjectTaskSummary>({
...safeJsonRequestConfig,
url: `${getProjectTasksPrefix(projectId)}/summary`,
method: 'get',
params
});
}
type TaskWorklogPageResponse = Api.Project.PageResult<TaskWorklogResponse>;
function getWorklogPrefix(projectId: string, executionId: string, taskId: string) {
@@ -794,6 +906,19 @@ type ProjectRequirementResponse = Omit<
};
type ProjectRequirementPageResponse = Api.Project.PageResult<ProjectRequirementResponse>;
type ProjectRequirementReviewResponse = Omit<
Api.Project.ProjectRequirementReview,
'id' | 'requirementId' | 'operatorId' | 'attendees' | 'attachments'
> & {
id: string | number;
requirementId: string | number;
operatorId: string | number;
attendees?: Array<{
userId: string | number;
nickname: string;
}>;
attachments?: AttachmentItemResponse[] | null;
};
type ProjectRequirementModuleResponse = Omit<Api.Project.ProjectRequirementModule, 'id' | 'parentId' | 'projectId'> & {
id: string | number;
@@ -833,10 +958,27 @@ function normalizeProjectRequirement(requirement: ProjectRequirementResponse): A
currentHandlerUserId: normalizeNullableStringId(requirement.currentHandlerUserId),
sourceBizId: normalizeNullableStringId(requirement.sourceBizId),
attachments: normalizeAttachments(requirement.attachments),
progressRate: typeof requirement.progressRate === 'number' ? requirement.progressRate : 0,
children: requirement.children?.map(normalizeProjectRequirement)
};
}
function normalizeProjectRequirementReview(
review: ProjectRequirementReviewResponse
): Api.Project.ProjectRequirementReview {
return {
...review,
id: normalizeStringId(review.id),
requirementId: normalizeStringId(review.requirementId),
operatorId: normalizeStringId(review.operatorId),
attendees: review.attendees?.map(item => ({
...item,
userId: normalizeStringId(item.userId)
})),
attachments: normalizeAttachments(review.attachments)
};
}
function normalizeProjectRequirementModule(
module: ProjectRequirementModuleResponse
): Api.Project.ProjectRequirementModule {
@@ -970,16 +1112,52 @@ export async function fetchGetProjectRequirementAllowedTransitions(requirementId
);
}
/** 获取项目需求生命周期信息 */
export async function fetchGetProjectRequirementLifecycle(requirementId: string, projectId: string) {
const result = await request<Api.Project.ProjectRequirementLifecycleInfo>({
/** 批量获取项目需求可执行状态动作列表 */
export async function fetchGetProjectRequirementAllowedTransitionsBatch(
data: Api.Project.ProjectRequirementBatchReqVO
) {
const result = await request<Api.Project.ProjectRequirementAllowedTransitionBatchRespVO[]>({
...safeJsonRequestConfig,
url: `${PROJECT_REQUIREMENT_PREFIX}/lifecycle`,
method: 'get',
params: { requirementId, projectId }
url: `${PROJECT_REQUIREMENT_PREFIX}/allowed-transitions/batch`,
method: 'post',
data
});
return mapServiceResult(result as ServiceRequestResult<Api.Project.ProjectRequirementLifecycleInfo>, data => data);
return mapServiceResult(
result as ServiceRequestResult<Api.Project.ProjectRequirementAllowedTransitionBatchRespVO[]>,
data1 =>
data1.map(item => ({
requirementId: normalizeStringId(item.requirementId),
transitions: item.transitions
}))
);
}
/** 提交项目需求评审 */
export async function fetchSubmitProjectRequirementReview(data: Api.Project.ProjectRequirementReviewSubmitParams) {
const result = await request<string | number>({
...safeJsonRequestConfig,
url: `${PROJECT_REQUIREMENT_PREFIX}/review/submit`,
method: 'post',
data
});
return mapServiceResult(result as ServiceRequestResult<string | number>, normalizeStringId);
}
/** 获取项目需求评审记录 */
export async function fetchGetProjectRequirementReview(projectId: string, requirementId: string) {
const result = await request<ProjectRequirementReviewResponse>({
...safeJsonRequestConfig,
url: `${PROJECT_REQUIREMENT_PREFIX}/review/get`,
method: 'get',
params: { projectId, requirementId }
});
return mapServiceResult(
result as ServiceRequestResult<ProjectRequirementReviewResponse>,
normalizeProjectRequirementReview
);
}
/** 获取项目需求状态字典 */
@@ -993,17 +1171,6 @@ export async function fetchGetProjectRequirementStatusDict() {
return mapServiceResult(result as ServiceRequestResult<Api.Project.ProjectRequirementStatusDict[]>, data => data);
}
/** 获取项目需求终态状态字典 */
export async function fetchGetProjectRequirementTerminalStatusDict() {
const result = await request<Api.Project.ProjectRequirementStatusDict[]>({
...safeJsonRequestConfig,
url: `${PROJECT_REQUIREMENT_PREFIX}/status/dict/terminal`,
method: 'get'
});
return mapServiceResult(result as ServiceRequestResult<Api.Project.ProjectRequirementStatusDict[]>, data => data);
}
/** 获取项目需求模块树 */
export async function fetchGetProjectRequirementModuleTree(projectId: string) {
const result = await request<ProjectRequirementModuleResponse[]>({

View File

@@ -1,4 +1,3 @@
import type { RouteMeta } from 'vue-router';
import type { ElegantConstRoute, LastLevelRouteKey } from '@elegant-router/types';
import { objectContextDomainConfigs } from '@/constants/object-context';
import { SYSTEM_SERVICE_PREFIX } from '@/constants/service';

View File

@@ -445,7 +445,7 @@ export function fetchBatchDeletePost(ids: number[]) {
}
/** 获取用户简单列表(用于用户选择下拉框) */
export function fetchGetUserSimpleList() {
export async function fetchGetUserSimpleList() {
return request<UserSimpleResponse[]>({
...safeJsonRequestConfig,
url: `${USER_PREFIX}/simple-list`,
@@ -455,6 +455,19 @@ export function fetchGetUserSimpleList() {
);
}
/** 获取当前登录人的直属上级 */
export async function fetchGetLoginUserDirectManager() {
return request<UserSimpleResponse | null>({
...safeJsonRequestConfig,
url: `${USER_PREFIX}/profile/direct-manager`,
method: 'get'
}).then(result =>
mapServiceResult(result as ServiceRequestResult<UserSimpleResponse | null>, data =>
data ? normalizeUserSimple(data) : null
)
);
}
/** 获取用户分页 */
export function fetchGetUserPage(params?: Api.SystemManage.UserSearchParams) {
return request<Api.SystemManage.UserList>({

View File

@@ -1,8 +0,0 @@
// 工作台聚合接口尚未开通,当前页面使用 src/views/workbench/mock.ts 的本地假数据。
// 接口契约确认后,在此处补:
// - fetchGetWorkbenchSummary (Banner 摘要 + KPI)
// - fetchGetWorkbenchTodos (我的待办)
// - fetchGetWorkbenchActivity (最近动态)
// - fetchGetWorkbenchProjects (我参与的项目)
// 全部走 src/service/request/index.ts 的统一实例,并保持 ID 字符串口径。
export {};

View File

@@ -1,7 +1,7 @@
import { ref } from 'vue';
import { defineStore } from 'pinia';
import { RDMS_OBJECT_DIRECTION_DICT_CODE, RDMS_OBJECT_DIRECTION_LEGACY_DICT_CODE } from '@/constants/dict';
import { fetchGetFrontendDictCache } from '@/service/api';
import { fetchGetDictDataByCode, fetchGetFrontendDictCache } from '@/service/api';
import { SetupStoreId } from '@/enum';
type DictValue = string | number | null | undefined;
@@ -19,6 +19,15 @@ function sortDictData(list: Api.Dict.DictData[]) {
return list.slice().sort((left, right) => left.sort - right.sort || left.label.localeCompare(right.label, 'zh-CN'));
}
// hex 色值兜底校验:仅接受 #RRGGBB6 位);其他格式(含 #RGB 简写 / rgb())一律视为无效回落到默认渲染
const HEX_COLOR_PATTERN = /^#[0-9a-f]{6}$/i;
function normalizeColorType(raw: unknown): string | null {
if (typeof raw !== 'string') return null;
const trimmed = raw.trim().toLowerCase();
return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : null;
}
function normalizeFrontendDictData(
dictType: string,
list: Api.Dict.FrontendDictData[],
@@ -31,13 +40,25 @@ function normalizeFrontendDictData(
dictType: item.dictType || dictType,
sort: item.sort,
status: item.status ?? 0,
remark: null,
colorType: normalizeColorType(item.colorType),
remark: item.remark ?? null,
createTime: 0
}));
return sortDictData(normalizedList);
}
function normalizeDictDataItem(item: Api.Dict.DictData, dictType: string): Api.Dict.DictData {
return {
...item,
value: String(item.value),
dictType: item.dictType || dictType,
status: item.status ?? 0,
colorType: normalizeColorType(item.colorType),
remark: item.remark ?? null
};
}
function normalizeFrontendDictCache(cache: Api.Dict.FrontendDictCache) {
const entries = Object.entries(cache);
@@ -89,6 +110,7 @@ export const useDictStore = defineStore(SetupStoreId.Dict, () => {
const loadedAt = ref<number | null>(null);
let initPromise: Promise<boolean> | null = null;
const dictDataLoadPromises = new Map<string, Promise<boolean>>();
function resetDictCache() {
dictTypes.value = [];
@@ -96,6 +118,7 @@ export const useDictStore = defineStore(SetupStoreId.Dict, () => {
loadedAt.value = null;
initialized.value = false;
initPromise = null;
dictDataLoadPromises.clear();
}
async function initDictCache(force = false) {
@@ -137,6 +160,51 @@ export const useDictStore = defineStore(SetupStoreId.Dict, () => {
return initPromise;
}
async function ensureDictData(dictType: string, force = false) {
if (!dictType) {
return false;
}
if (!initialized.value) {
await initDictCache();
}
if (!force && getDictData(dictType).length > 0) {
return true;
}
const pending = dictDataLoadPromises.get(dictType);
if (pending && !force) {
return pending;
}
const promise = (async () => {
const result = await fetchGetDictDataByCode(dictType);
if (result.error || !result.data?.list?.length) {
return false;
}
dictDataMap.value = {
...dictDataMap.value,
[dictType]: sortDictData(result.data.list.map(item => normalizeDictDataItem(item, dictType)))
};
dictTypes.value = createRuntimeDictTypes(dictDataMap.value);
return true;
})();
dictDataLoadPromises.set(dictType, promise);
try {
return await promise;
} finally {
if (dictDataLoadPromises.get(dictType) === promise) {
dictDataLoadPromises.delete(dictType);
}
}
}
function getDictData(dictType: string, onlyEnabled = false) {
if (!dictType) {
return [];
@@ -199,6 +267,7 @@ export const useDictStore = defineStore(SetupStoreId.Dict, () => {
dictDataMap,
loadedAt,
initDictCache,
ensureDictData,
resetDictCache,
getDictData,
getDictOptions,

View File

@@ -0,0 +1,11 @@
import { computed } from 'vue';
import { defineStore } from 'pinia';
import { useWorkbenchLayout } from '@/views/workbench/composables/use-workbench-layout';
import { SetupStoreId } from '@/enum';
import { useAuthStore } from '../auth';
export const useWorkbenchStore = defineStore(SetupStoreId.Workbench, () => {
const authStore = useAuthStore();
const userId = computed(() => String(authStore.userInfo?.userId ?? 'anonymous'));
return useWorkbenchLayout({ userId: userId.value });
});

View File

@@ -416,6 +416,20 @@ html .el-collapse {
padding: 0 12px;
}
.business-table-action-icon-button {
min-width: 24px;
height: 24px;
padding: 0;
&.el-button + .el-button {
margin-left: 0;
}
}
.business-table-action-icon {
font-size: 15px;
}
.business-table-action-menu {
display: flex;
flex-direction: column;
@@ -428,6 +442,19 @@ html .el-collapse {
margin-left: 0 !important;
}
.business-table-action-menu__link {
width: 100%;
justify-content: flex-start;
margin-left: 0 !important;
padding: 0 4px;
}
.business-table-action-menu__item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.business-table-card-body {
display: flex;
height: calc(100% - 56px);

View File

@@ -55,6 +55,8 @@ declare namespace Api {
sort: number;
/** status: 0 enabled, 1 disabled */
status: DictStatus;
/** 颜色hex#xxxxxxnullable无值时前端按默认渲染 */
colorType?: string | null;
/** remark */
remark?: string | null;
/** create time */
@@ -73,6 +75,10 @@ declare namespace Api {
dictType?: string;
/** status: 0 enabled, 1 disabled */
status?: DictStatus;
/** 颜色hex#xxxxxxnullable无值时前端按默认渲染 */
colorType?: string | null;
/** 备注,可用于下拉中文释义展示 */
remark?: string | null;
}
/** frontend runtime dict cache map */
@@ -82,7 +88,7 @@ declare namespace Api {
type DictDataSearchParams = CommonType.RecordNullable<Pick<DictData, 'label' | 'dictType' | 'status'>> & PageParams;
/** dict data save params */
type SaveDictDataParams = Pick<DictData, 'label' | 'value' | 'dictType' | 'sort' | 'status'> & {
type SaveDictDataParams = Pick<DictData, 'label' | 'value' | 'dictType' | 'sort' | 'status' | 'colorType'> & {
remark?: string | null;
};
}

View File

@@ -0,0 +1,78 @@
declare namespace Api {
namespace OvertimeApplication {
interface PageParams {
pageNo: number;
pageSize: number;
}
type OvertimeApplicationStatusCode = 'pending' | 'approved' | 'rejected' | 'cancelled';
type OvertimeApplicationActionType = 'submit' | 'resubmit' | 'approve' | 'reject' | 'cancel';
interface OvertimeApplication {
id: string;
applicantId: string;
applicantName: string;
overtimeDate: string;
overtimeDuration: string;
overtimeReason: string;
overtimeContent: string;
approverId: string;
approverName: string;
statusCode: OvertimeApplicationStatusCode;
statusName: string;
allowEdit: boolean;
terminal: boolean;
approvalComment?: string | null;
submitTime: string;
approvalTime?: string | null;
createTime: string;
updateTime: string;
}
type OvertimeApplicationSearchParams = CommonType.RecordNullable<
Pick<PageParams, 'pageNo' | 'pageSize'> & {
keyword: string;
applicantName: string;
approverId: string;
approverName: string;
statusCode: OvertimeApplicationStatusCode;
overtimeDate: string[];
createTime: string[];
}
>;
interface OvertimeApplicationPageResult {
total: number;
list: OvertimeApplication[];
}
interface SaveOvertimeApplicationParams {
overtimeDate: string;
overtimeDuration: string;
overtimeReason: string;
overtimeContent: string;
approverId: string;
}
interface StatusActionParams {
reason?: string | null;
}
interface OvertimeApplicationStatusLog {
id: string;
applicationId: string;
actionType: OvertimeApplicationActionType;
fromStatus?: string | null;
toStatus: string;
reason?: string | null;
operatorUserId: string;
operatorName: string;
applicantNameSnapshot: string;
overtimeDateSnapshot: string;
overtimeDurationSnapshot: string;
remark?: string | null;
createTime: string;
}
}
}

99
src/typings/api/personal-item.d.ts vendored Normal file
View File

@@ -0,0 +1,99 @@
declare namespace Api {
namespace PersonalItem {
interface PageParams {
pageNo: number;
pageSize: number;
}
type PersonalItemStatusCode = 'pending' | 'active' | 'paused' | 'completed' | 'cancelled';
interface PersonalItemLifecycleAction {
actionCode: string;
actionName: string;
needReason: boolean;
}
interface PersonalItem {
id: string;
taskTitle: string;
type: string;
ownerId: string;
statusCode: PersonalItemStatusCode;
terminal?: boolean;
allowEdit?: boolean;
availableActions?: PersonalItemLifecycleAction[] | null;
progressRate: number;
totalSpentHours?: number | null;
plannedStartDate: string | null;
plannedEndDate: string | null;
actualStartDate: string | null;
actualEndDate: string | null;
taskDesc: string | null;
lastStatusReason: string | null;
attachments: Api.Project.AttachmentItem[] | null;
creator: string;
createTime: string;
updater: string;
updateTime: string;
deleted: boolean;
ownerName?: string | null;
ownerNickname?: string | null;
statusName?: string | null;
}
type PersonalItemSearchParams = CommonType.RecordNullable<
Pick<PageParams, 'pageNo' | 'pageSize'> & {
keyword: string;
ownerId: string;
statusCode: PersonalItemStatusCode;
updateTime: string[];
}
>;
interface PersonalItemPageResult {
total: number;
list: PersonalItem[];
}
interface SavePersonalItemParams {
taskTitle: string;
type: string;
ownerId?: string;
executionId?: string | null;
progressRate?: number | null;
plannedStartDate: string | null;
plannedEndDate: string | null;
taskDesc: string | null;
attachments: Api.Project.AttachmentItem[] | null;
}
interface UpdatePersonalItemParams extends SavePersonalItemParams {
id: string;
}
interface ChangePersonalItemStatusParams {
actionCode: string;
reason?: string | null;
}
interface PersonalItemExecutionOption {
executionId: string;
executionName: string;
projectId?: string | null;
projectName?: string | null;
}
interface BatchDeletePersonalItemParams {
ids: string[];
}
interface BindPersonalItemExecutionParams {
ids: string[];
executionId: string;
}
type PersonalItemWorklog = Api.Project.TaskWorklog;
type PersonalItemWorklogSearchParams = Api.Project.TaskWorklogSearchParams;
type SavePersonalItemWorklogParams = Api.Project.SaveTaskWorklogParams;
}
}

View File

@@ -99,15 +99,10 @@ declare namespace Api {
userNickname: string;
/** 角色 ID */
roleId: string;
/** 角色名称(主角色) */
/** 角色名称 */
roleName: string;
/** 角色编码(主角色) */
/** 角色编码 */
roleCode: string;
/**
* 非主角色的中文名列表(多角色合并展示用,按字典序升序)
* 单角色时为空数组 [];典型场景:创建者 + 经理重合时,主行 managercreator 名进此列表
*/
additionalRoleNames: string[];
/** 是否当前产品经理 */
managerFlag: boolean;
/** 成员状态 */
@@ -215,6 +210,20 @@ declare namespace Api {
previousManagerRoleId?: string | null;
}
/**
* 批量新增产品成员参数
*
* 刻意不复用 CreateProductMemberParams批量接口不承担「产品经理交接」语义
* 后端兜底拒绝 roleId 为产品经理角色的项。
*/
interface BatchCreateProductMembersParams {
members: Array<{
userId: string;
roleId: string;
remark?: string | null;
}>;
}
/**
* 产品创建(含初始团队)原子接口参数
*
@@ -223,7 +232,7 @@ declare namespace Api {
interface CreateProductWithTeamParams {
product: SaveProductParams;
members: CreateProductMemberParams[];
/** 关人 user_id 数组(选填);后端按 (user, object, role) 三元组幂等写入 product_watcher 角色 */
/** 关人 user_id 数组(选填);后端按 (user, object, role) 三元组幂等写入 product_watcher 角色 */
watcherUserIds?: string[];
}
@@ -239,18 +248,37 @@ declare namespace Api {
reason?: string | null;
}
interface BatchInactiveProductMembersParams {
memberIds: string[];
reason?: string | null;
}
// ========== 产品需求相关类型定义 ==========
/** 需求状态编码 */
type RequirementStatusCode =
| 'pending_confirm'
| 'pending_claim'
| 'pending_review'
| 'pending_dispatch'
| 'reviewed'
| 'review_rejected'
| 'implementing'
| 'accepted'
| 'closed'
| 'rejected'
| 'cancelled';
/** 需求状态动作编码 */
type RequirementStatusActionCode =
| 'claim_to_review'
| 'claim_to_dispatch'
| 'pass_review'
| 'reject_review'
| 'dispatch'
| 'cancel'
| 'accept'
| 'close'
| 'reject';
/** 需求来源类型 */
type RequirementSourceType = 'manual' | 'work_order';
@@ -305,12 +333,12 @@ declare namespace Api {
currentHandlerUserId?: string | null;
/** 当前处理人姓名 */
currentHandlerUserNickname?: string | null;
/** 默认实现项目编号 */
/** 默认关联项目编号 */
implementProjectId?: string | null;
/** 默认实现项目名称 */
/** 默认关联项目名称 */
implementProjectName?: string | null;
/** 所需工时(小时) */
workHours: number;
/** 预期完成日期 */
expectedTime?: string | null;
/** 排序值 */
sort: number;
/** 创建时间 */
@@ -319,8 +347,6 @@ declare namespace Api {
updateTime: string;
/** 子需求列表(树形结构) */
children?: Requirement[];
/** 是否为终态 */
terminal?: boolean;
}
// ========== 需求模块实体 ==========
@@ -357,25 +383,103 @@ declare namespace Api {
initialFlag: boolean;
/** 是否终态 */
terminalFlag: boolean;
/** 是否允许编辑 */
allowEdit: boolean;
}
// ========== 需求生命周期 ==========
interface RequirementLifecycleAction {
actionCode: string;
actionCode: RequirementStatusActionCode;
actionName: string;
toStatusCode: string;
toStatusName: string;
needReason: boolean;
}
interface RequirementLifecycleInfo {
statusCode: RequirementStatusCode;
statusName?: string | null;
lastStatusReason?: string | null;
terminal: boolean;
allowEdit: boolean;
availableActions: RequirementLifecycleAction[];
interface RequirementBatchReqVO {
productId: string;
requirementIds: string[];
}
interface RequirementAllowedTransitionBatchRespVO {
requirementId: string;
transitions: RequirementLifecycleAction[];
}
interface RequirementHasDispatchedBatchRespVO {
requirementId: string;
hasDispatched: boolean;
}
type ProductRequirementDashboardRecentChangeActionType = 'create' | 'delete' | 'status_terminal';
interface ProductRequirementDashboardSummary {
/** 当前产品下所有未删除需求数,包括根需求和子需求 */
total: number;
/** 待认领、待评审、待指派的需求数 */
todo: number;
/** 待认领需求数 */
pendingClaim: number;
/** 待评审需求数 */
pendingReview: number;
/** 待指派需求数 */
pendingDispatch: number;
/** 已验收或已关闭需求数 */
completed: number;
/** 完成率0-100 */
completionRate: number;
/** P0/P1 且待处理的需求数 */
highPriorityTodo: number;
}
interface ProductRequirementDashboardRecentChange {
id: string;
requirementId?: string | null;
title: string;
actionType: ProductRequirementDashboardRecentChangeActionType;
actionLabel: string;
content: string;
occurredAt: string;
operatorUserId?: string | null;
operatorName?: string | null;
}
interface ProductRequirementDashboard {
summary: ProductRequirementDashboardSummary;
recentChanges: ProductRequirementDashboardRecentChange[];
}
type RequirementReviewConclusion = 0 | 1;
interface RequirementReviewAttendeeItem {
userId: string;
nickname: string;
}
interface RequirementReview {
id: string;
objectType: 'product_requirement';
requirementId: string;
operatorId: string;
conclusion: RequirementReviewConclusion;
reviewContent?: string | null;
requirementEstimatedHours?: number | string | null;
attendees?: RequirementReviewAttendeeItem[];
attachments?: Api.Project.AttachmentItem[] | null;
reviewTime?: string | null;
createTime?: string;
updateTime?: string;
}
interface RequirementReviewSubmitParams {
productId: string;
requirementId: string;
operatorId: string;
conclusion: RequirementReviewConclusion;
reviewContent?: string | null;
requirementEstimatedHours?: number | string | null;
attendees?: RequirementReviewAttendeeItem[];
attachments?: Api.Project.AttachmentItem[] | null;
reviewTime?: string | null;
}
// ========== 请求参数类型 ==========
@@ -408,7 +512,7 @@ declare namespace Api {
| 'currentHandlerUserId'
| 'currentHandlerUserNickname'
| 'implementProjectId'
| 'workHours'
| 'expectedTime'
| 'sort'
>;
@@ -447,7 +551,7 @@ declare namespace Api {
| 'proposerNickname'
| 'currentHandlerUserId'
| 'currentHandlerUserNickname'
| 'workHours'
| 'expectedTime'
| 'sort'
>;

View File

@@ -65,7 +65,7 @@ declare namespace Api {
type ProjectExecutionStatusCode = 'pending' | 'active' | 'paused' | 'completed' | 'cancelled';
/** 执行动作编码 */
type ProjectExecutionActionCode = 'start' | 'pause' | 'resume' | 'cancel';
type ProjectExecutionActionCode = 'start' | 'pause' | 'resume' | 'cancel' | 'complete';
/** 任务状态编码 */
type ProjectTaskStatusCode = 'pending' | 'active' | 'paused' | 'completed' | 'cancelled';
@@ -96,6 +96,10 @@ declare namespace Api {
id: string;
projectId: string;
projectRequirementId: string | null;
/** 关联项目需求名称service 层批量回填;未关联 = null */
projectRequirementName: string | null;
/** 关联项目需求状态编码pending_confirm/pending_review/implementing/accepted/closed/rejected/cancelled */
projectRequirementStatusCode: string | null;
executionName: string;
executionType: string | null;
ownerId: string;
@@ -110,6 +114,10 @@ declare namespace Api {
actualStartDate: string | null;
actualEndDate: string | null;
progressRate: number;
/** 优先级字典 valuerdms_req_priority"0" P0 / "1" P1默认/ "2" P2 / "3" P3数字越小越高 */
priority: string;
/** 优先级标签预留字段;当前后端不填、永远为 null前端按 priority 自译 */
priorityName: string | null;
executionDesc: string | null;
lastStatusReason: string | null;
createTime: string;
@@ -212,12 +220,23 @@ declare namespace Api {
id: string;
projectId: string;
executionId: string;
/** 所属执行名称;跨执行查询必有,单执行查询可缺省 */
executionName?: string | null;
/** 所属执行状态编码;跨执行查询必有,单执行查询可缺省(用于灰显已完成执行的任务行) */
executionStatusCode?: ProjectExecutionStatusCode | null;
parentTaskId: string | null;
/** 所属执行关联的项目需求 ID透传未关联 = null */
projectRequirementId: string | null;
/** 所属执行关联的项目需求名称(透传,未关联 = null跨执行查询永远为 null前端不在跨执行视角展示 */
projectRequirementName: string | null;
/** 所属执行关联的项目需求状态编码(同上) */
projectRequirementStatusCode: string | null;
taskTitle: string;
type: string;
ownerId: string;
ownerNickname?: string | null;
/** 所属执行的负责人 userId按钮可见度公式用 */
executionOwnerId: string;
/** 所属执行的负责人 userId按钮可见度公式用;跨执行查询永远为 null按钮判定退化为只看权限码 */
executionOwnerId: string | null;
/** 父任务负责人 userId一级任务为 null */
parentTaskOwnerId: string | null;
statusCode: ProjectTaskStatusCode;
@@ -230,6 +249,10 @@ declare namespace Api {
plannedEndDate: string | null;
actualStartDate: string | null;
actualEndDate: string | null;
/** 优先级字典 valuerdms_req_priority"0" P0 / "1" P1默认/ "2" P2 / "3" P3数字越小越高 */
priority: string;
/** 优先级标签预留字段;当前后端不填、永远为 null前端按 priority 自译 */
priorityName: string | null;
taskDesc: string | null;
lastStatusReason: string | null;
assignees?: TaskAssigneeRef[] | null;
@@ -240,12 +263,31 @@ declare namespace Api {
updateTime: string;
}
/**
* 执行截止时间范围(基于 plannedEndDateoverdue 逾期 / today 今天到期 / thisWeek 本周到期。
* 与任务侧 dueRange 同口径,后端三档均排除终态执行(已完成 / 已取消);未知值 = 不过滤。
*/
type ProjectExecutionDueRange = 'overdue' | 'today' | 'thisWeek';
/**
* 项目执行分页入参(`GET /project/project/{projectId}/executions/page`)。
*
* - `involveUserId` / `ownerId` 互斥:同传后端不报错但语义变 AND前端切视角时务必清另一字段。
* - 不传 `involveUserId` 且不传 `ownerId` = 项目下全部执行。
* - `dueRange` 按计划结束日期过滤,与其它参数 AND详见 ProjectExecutionDueRange。
*/
type ProjectExecutionSearchParams = CommonType.RecordNullable<
Pick<PageParams, 'pageNo' | 'pageSize'> & {
keyword: string;
executionType: string;
/** "我参与"语义:当前用户作为 owner 或活跃协办;与 ownerId 二选一 */
involveUserId: string;
/** 仅作为 owner 匹配;与 involveUserId 二选一 */
ownerId: string;
statusCode: string;
/** 优先级筛选(字典 valueString "0"~"3"),不传 = 全部档位 */
priority: string;
dueRange: ProjectExecutionDueRange;
updateTime: string[];
}
>;
@@ -253,7 +295,12 @@ declare namespace Api {
type ProjectExecutionStatusBoardParams = CommonType.RecordNullable<{
keyword: string;
executionType: string;
/** "我参与"语义:当前用户作为 owner 或活跃协办;与 ownerId 二选一 */
involveUserId: string;
/** 仅作为 owner 匹配;与 involveUserId 二选一 */
ownerId: string;
/** 截止时间范围过滤,传入后各状态分组计数均在该范围内统计(口径同 page */
dueRange: ProjectExecutionDueRange;
updateTime: string[];
}>;
@@ -265,6 +312,8 @@ declare namespace Api {
projectRequirementId: string | null;
plannedStartDate: string | null;
plannedEndDate: string | null;
/** 优先级字典 value必填String "0"~"3" */
priority: string;
executionDesc: string | null;
assigneeUserIds?: string[];
}
@@ -279,6 +328,8 @@ declare namespace Api {
projectRequirementId: string | null;
plannedStartDate: string | null;
plannedEndDate: string | null;
/** 优先级字典 value必填String "0"~"3" */
priority: string;
executionDesc: string | null;
}
@@ -306,6 +357,8 @@ declare namespace Api {
parentTaskId: string;
ownerId: string;
statusCode: string;
/** 优先级筛选(字典 valueString "0"~"3"),不传 = 全部档位 */
priority: string;
updateTime: string[];
}
>;
@@ -330,6 +383,8 @@ declare namespace Api {
keyword: string;
parentTaskId: string;
ownerId: string;
/** 优先级筛选(字典 valueString "0"~"3"),不传 = 全部档位 */
priority: string;
updateTime: string[];
}
>;
@@ -347,13 +402,93 @@ declare namespace Api {
items: ProjectTaskBoardColumn[];
}
/** 截止时间快速选项(跨执行接口专属) */
type ProjectTaskDueRange = 'overdue' | 'today' | 'thisWeek';
/** 跨执行任务排序字段 */
type ProjectTaskCrossSortBy = 'plannedEndDate' | 'priority' | 'updateTime' | 'createTime';
type ProjectTaskCrossSortOrder = 'asc' | 'desc';
/**
* 项目级跨执行任务分页入参(`GET /project/project/{projectId}/tasks/page`)。
*
* - `involveUserId` / `ownerId` 互斥:同传只 `ownerId` 生效(后端 SQL 双重过滤)。
* - `executionIds` 不传 = 项目内全部执行;空数组 `[]` = 明确返空。
* - `executionInvolveUserId` = 限定到"该用户参与的执行"owner 或活跃执行协办);未参与任何执行时返空;
* 与 `executionIds` 同传为 AND。用它表达"我参与的执行"范围,无需前端先查执行 id 再回传。
* - `executionStatusCodes` 在任务可见性之上叠加"任务所属执行状态 ∈ 白名单"过滤;多值 OR
* 与 `executionIds` 同传时为 AND。详见 `docs/debt/跨执行任务接口-按执行状态过滤-契约调整.html`。
* - 不传 `involveUserId / ownerId` 且无 `project:task:query` 权限时,后端静默降级为"自己有身份的范围",不抛 403。
*/
type ProjectTaskCrossSearchParams = CommonType.RecordNullable<
Pick<PageParams, 'pageNo' | 'pageSize'> & {
keyword: string;
executionIds: string[];
/**
* 执行成员过滤:该用户作为执行 owner 或活跃执行协办人的执行 → 其下任务;未参与任何执行时返空。
* 与 `involveUserId`(任务成员)正交,可同传取交集。
*/
executionInvolveUserId: string;
/** 任务所属执行的状态白名单(用于左侧执行池按状态 chip 切换时的任务范围过滤) */
executionStatusCodes: ProjectExecutionStatusCode[];
/** "我参与"语义:当前用户作为 owner 或活跃协办;与 ownerId 二选一 */
involveUserId: string;
/** 仅作为 owner 匹配;与 involveUserId 二选一 */
ownerId: string;
statusCodes: ProjectTaskStatusCode[];
/** 优先级字典 value"0"~"3" */
priority: string;
parentTaskId: string;
dueRange: ProjectTaskDueRange;
/** 更新时间范围 [start, end],格式 yyyy-MM-dd HH:mm:ss */
updateTime: string[];
sortBy: ProjectTaskCrossSortBy;
sortOrder: ProjectTaskCrossSortOrder;
}
>;
/** 项目级跨执行任务状态看板入参(与 page 同口径但不含 pageNo/pageSize/statusCodes/sortBy/sortOrder */
type ProjectTaskCrossStatusBoardParams = Omit<
ProjectTaskCrossSearchParams,
'pageNo' | 'pageSize' | 'statusCodes' | 'sortBy' | 'sortOrder'
>;
/** 项目级跨执行任务看板分页入参 */
type ProjectTaskCrossBoardPageParams = Omit<ProjectTaskCrossSearchParams, 'sortBy' | 'sortOrder'>;
/** 项目级"今日小条"汇总入参 */
interface ProjectTaskSummaryParams {
/** 默认 mine不传也走 mineall 必须有 project:task:query 权限,否则 403 */
scope?: 'mine' | 'all';
}
/**
* 项目级"今日小条"汇总响应(`GET /project/project/{projectId}/tasks/summary`)。
*
* 数字一致性dueThisWeek 的范围与 page?dueRange=thisWeek 完全一致(本周一~本周日)。
* today / weekStart / weekEnd 直接展示,不要前端再算"今天/本周一"(服务器时区为 Asia/Shanghai
*/
interface ProjectTaskSummary {
overdue: number;
dueToday: number;
dueThisWeek: number;
doneThisWeek: number;
today: string;
weekStart: string;
weekEnd: string;
}
interface SaveProjectTaskParams {
parentTaskId: string | null;
taskTitle: string;
type: string;
ownerId: string | null;
progressRate?: number;
plannedStartDate: string | null;
plannedEndDate: string | null;
/** 优先级字典 value必填String "0"~"3" */
priority: string;
taskDesc: string | null;
/** 仅创建任务时生效编辑接口静默忽略userId 必须是当前有效执行协办人且不能等于 ownerId */
assigneeUserIds?: string[];
@@ -380,6 +515,10 @@ declare namespace Api {
durationHours: number;
/** 本次填报进度0~100scale=2 */
progressRate: number;
/** 难度,来自字典 rdms_task_item_worklog_difficulty */
difficulty: string;
/** 后端预留字段,目前始终为 null前端按 difficulty + 字典 cache 自译 */
difficultyName?: string | null;
workContent: string | null;
attachments?: AttachmentItem[] | null;
createTime: string;
@@ -391,6 +530,8 @@ declare namespace Api {
userId: string;
startDate: string;
endDate: string;
/** 完成难度筛选,等值匹配;不传 = 全部 */
difficulty: string;
}
>;
@@ -403,6 +544,8 @@ declare namespace Api {
durationHours: number;
/** 本次填报进度0~100scale=2必填 */
progressRate: number;
/** 难度,来自字典 rdms_task_item_worklog_difficulty */
difficulty: string;
workContent?: string | null;
/** 编辑语义null 保留原值 / [] 清空 / [...] 替换 */
attachments?: AttachmentItem[] | null;
@@ -519,15 +662,10 @@ declare namespace Api {
userNickname: string;
/** 角色 ID */
roleId: string;
/** 角色名称(主角色) */
/** 角色名称 */
roleName: string;
/** 角色编码(主角色) */
/** 角色编码 */
roleCode: string;
/**
* 非主角色的中文名列表(多角色合并展示用,按字典序升序)
* 单角色时为空数组 [];典型场景:创建者 + 负责人重合时,主行 managercreator 名进此列表
*/
additionalRoleNames: string[];
/** 是否项目负责人 */
managerFlag: boolean;
/** 成员状态 */
@@ -602,6 +740,24 @@ declare namespace Api {
reason: string;
}
/** 执行删除预检spec §2.1:判断是否需要走重型确认弹层) */
interface ProjectExecutionDeletePrecheck {
/** 该执行下任务总数(含子孙,含 completed展示用 */
taskCount: number;
/** taskCount > 0 视为 true */
hasDependentData: boolean;
}
/** 任务删除预检spec §2.1 */
interface ProjectTaskDeletePrecheck {
/** 直接子任务数 */
childTaskCount: number;
/** 工作日志条数 */
worklogCount: number;
/** childTaskCount + worklogCount > 0 视为 true */
hasDependentData: boolean;
}
/** 创建项目成员参数 */
interface CreateProjectMemberParams {
userId: string;
@@ -625,6 +781,26 @@ declare namespace Api {
reason: string | null;
}
/**
* 批量新增项目成员参数
*
* 刻意不复用 CreateProjectMemberParams批量接口不承担"项目负责人交接"语义,
* 后端兜底拒绝 roleId 为项目负责人角色的项。
*/
interface BatchCreateProjectMembersParams {
members: Array<{
userId: string;
roleId: string;
remark?: string | null;
}>;
}
/** 批量移出项目成员参数 */
interface BatchInactiveProjectMembersParams {
memberIds: string[];
reason?: string | null;
}
/**
* 项目创建(含初始团队)原子接口参数
*
@@ -633,21 +809,35 @@ declare namespace Api {
interface CreateProjectWithTeamParams {
project: SaveProjectParams;
members: CreateProjectMemberParams[];
/** 关人 user_id 数组(选填);后端按 (user, object, role) 三元组幂等写入 project_watcher 角色 */
/** 关人 user_id 数组(选填);后端按 (user, object, role) 三元组幂等写入 project_watcher 角色 */
watcherUserIds?: string[];
}
// ========== 项目需求相关类型定义 ==========
/** 项目需求状态编码 */
type ProjectRequirementStatusCode =
| 'pending_confirm'
| 'pending_claim'
| 'pending_review'
| 'reviewed'
| 'review_rejected'
| 'implementing'
| 'accepted'
| 'closed'
| 'rejected'
| 'cancelled';
/** 项目需求状态动作编码 */
type ProjectRequirementStatusActionCode =
| 'claim_to_review'
| 'claim_to_implement'
| 'pass_review'
| 'reject_review'
| 'start_implement'
| 'accept'
| 'cancel'
| 'close'
| 'reject';
/** 项目需求来源类型 */
type ProjectRequirementSourceType = 'manual' | 'work_order' | 'product_requirement';
@@ -700,18 +890,18 @@ declare namespace Api {
currentHandlerUserId?: string | null;
/** 当前处理人昵称 */
currentHandlerUserNickname?: string | null;
/** 所需工时 */
workHours: number;
/** 预期完成日期 */
expectedTime?: string | null;
/** 排序值 */
sort: number;
/** 项目需求进度BigDecimal0.00 ~ 1.00HALF_UP 两位小数)。读时聚合,后端不接受写入。 */
progressRate: number;
/** 创建时间 */
createTime: string;
/** 更新时间 */
updateTime: string;
/** 子需求列表 */
children?: ProjectRequirement[];
/** 是否终态 */
terminal?: boolean;
}
interface ProjectRequirementModule {
@@ -744,23 +934,60 @@ declare namespace Api {
initialFlag: boolean;
/** 是否终态 */
terminalFlag: boolean;
/** 是否允许编辑 */
allowEdit: boolean;
}
interface ProjectRequirementLifecycleAction {
actionCode: string;
actionCode: ProjectRequirementStatusActionCode;
actionName: string;
toStatusCode: string;
toStatusName: string;
needReason: boolean;
}
interface ProjectRequirementLifecycleInfo {
statusCode: ProjectRequirementStatusCode;
statusName?: string | null;
lastStatusReason?: string | null;
terminal: boolean;
allowEdit: boolean;
availableActions: ProjectRequirementLifecycleAction[];
interface ProjectRequirementBatchReqVO {
projectId: string;
requirementIds: string[];
}
interface ProjectRequirementAllowedTransitionBatchRespVO {
requirementId: string;
transitions: ProjectRequirementLifecycleAction[];
}
type ProjectRequirementReviewConclusion = 0 | 1;
interface ProjectRequirementReviewAttendeeItem {
userId: string;
nickname: string;
}
interface ProjectRequirementReview {
id: string;
objectType: 'project_requirement';
requirementId: string;
operatorId: string;
conclusion: ProjectRequirementReviewConclusion;
reviewContent?: string | null;
requirementEstimatedHours?: number | string | null;
attendees?: ProjectRequirementReviewAttendeeItem[];
attachments?: AttachmentItem[] | null;
reviewTime?: string | null;
createTime?: string;
updateTime?: string;
}
interface ProjectRequirementReviewSubmitParams {
projectId: string;
requirementId: string;
operatorId: string;
conclusion: ProjectRequirementReviewConclusion;
reviewContent?: string | null;
requirementEstimatedHours?: number | string | null;
attendees?: ProjectRequirementReviewAttendeeItem[];
attachments?: AttachmentItem[] | null;
reviewTime?: string | null;
}
/** 项目需求分页查询参数 */
@@ -790,7 +1017,7 @@ declare namespace Api {
| 'proposerNickname'
| 'currentHandlerUserId'
| 'currentHandlerUserNickname'
| 'workHours'
| 'expectedTime'
| 'sort'
>;
@@ -828,7 +1055,7 @@ declare namespace Api {
| 'proposerNickname'
| 'currentHandlerUserId'
| 'currentHandlerUserNickname'
| 'workHours'
| 'expectedTime'
| 'sort'
>;

View File

@@ -47,6 +47,8 @@ declare namespace Api {
type: RoleType;
/** remark */
remark?: string | null;
/** 是否在前端选择面板可见0 不可见 / 1 可见,缺省视作可见 */
visible?: 0 | 1 | null;
/** create time */
createTime: number;
}
@@ -148,6 +150,7 @@ declare namespace Api {
sex?: UserGender | null;
avatar?: string | null;
status: CommonStatus;
sort?: number;
loginIp?: string | null;
resignedAt?: number | null;
loginDate?: number | null;
@@ -178,6 +181,7 @@ declare namespace Api {
mobile?: string | null;
sex?: UserGender | null;
avatar?: string | null;
sort?: number;
password?: string;
};
@@ -224,7 +228,7 @@ declare namespace Api {
type PostList = PageResult<Post>;
type RoleSimple = Pick<Role, 'id' | 'name' | 'code' | 'status' | 'sort'>;
type RoleSimple = Pick<Role, 'id' | 'name' | 'code' | 'status' | 'sort' | 'remark' | 'visible'>;
type RoleSimpleList = RoleSimple[];

View File

@@ -866,6 +866,7 @@ declare namespace App {
dictStatus: string;
dictLabel: string;
dictValue: string;
colorType: string;
sort: string;
remark: string;
form: {
@@ -874,6 +875,7 @@ declare namespace App {
dictStatus: string;
dictLabel: string;
dictValue: string;
colorType: string;
sort: string;
remark: string;
};

View File

@@ -9,6 +9,7 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
AppProvider: typeof import('./../components/common/app-provider.vue')['default']
AttendeeUserPicker: typeof import('./../components/custom/attendee-user-picker.vue')['default']
BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
BusinessAttachmentUploader: typeof import('./../components/custom/business-attachment-uploader.vue')['default']
BusinessDateRangePicker: typeof import('./../components/custom/business-date-range-picker.vue')['default']
@@ -18,6 +19,7 @@ declare module 'vue' {
BusinessFormSimpleDialog: typeof import('./../components/custom/business-form-simple-dialog.vue')['default']
BusinessRichTextEditor: typeof import('./../components/custom/business-rich-text-editor.vue')['default']
BusinessRichTextView: typeof import('./../components/custom/business-rich-text-view.vue')['default']
BusinessUserPicker: typeof import('./../components/custom/business-user-picker.vue')['default']
BusinessUserSelect: typeof import('./../components/custom/business-user-select.vue')['default']
ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
CountTo: typeof import('./../components/custom/count-to.vue')['default']
@@ -100,6 +102,14 @@ declare module 'vue' {
IconCarbonStop: typeof import('~icons/carbon/stop')['default']
'IconCharm:download': typeof import('~icons/charm/download')['default']
'IconEp:arrowDown': typeof import('~icons/ep/arrow-down')['default']
'IconEp:arrowRight': typeof import('~icons/ep/arrow-right')['default']
'IconEp:box': typeof import('~icons/ep/box')['default']
'IconEp:check': typeof import('~icons/ep/check')['default']
'IconEp:files': typeof import('~icons/ep/files')['default']
'IconEp:folder': typeof import('~icons/ep/folder')['default']
'IconEp:infoFilled': typeof import('~icons/ep/info-filled')['default']
'IconEp:plus': typeof import('~icons/ep/plus')['default']
'IconEp:sort': typeof import('~icons/ep/sort')['default']
IconEpRemoveFilled: typeof import('~icons/ep/remove-filled')['default']
IconEpSuccessFilled: typeof import('~icons/ep/success-filled')['default']
'IconF7:circleFill': typeof import('~icons/f7/circle-fill')['default']
@@ -140,6 +150,7 @@ declare module 'vue' {
IconMdiCrown: typeof import('~icons/mdi/crown')['default']
IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
IconMdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal')['default']
IconMdiDownload: typeof import('~icons/mdi/download')['default']
IconMdiDrag: typeof import('~icons/mdi/drag')['default']
IconMdiFilterVariant: typeof import('~icons/mdi/filter-variant')['default']
IconMdiFolderOpen: typeof import('~icons/mdi/folder-open')['default']
@@ -147,6 +158,7 @@ declare module 'vue' {
IconMdiFolderPlusOutline: typeof import('~icons/mdi/folder-plus-outline')['default']
IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
IconMdiLinkVariant: typeof import('~icons/mdi/link-variant')['default']
IconMdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
IconMdiPencilOutline: typeof import('~icons/mdi/pencil-outline')['default']
IconMdiPlus: typeof import('~icons/mdi/plus')['default']
@@ -171,6 +183,7 @@ declare module 'vue' {
TableSearchFields: typeof import('./../components/custom/table-search-fields.vue')['default']
TableSearchPanel: typeof import('./../components/custom/table-search-panel.vue')['default']
ThemeSchemaSwitch: typeof import('./../components/common/theme-schema-switch.vue')['default']
UserPickerTrigger: typeof import('./../components/custom/business-user-picker/components/user-picker-trigger.vue')['default']
WaveBg: typeof import('./../components/custom/wave-bg.vue')['default']
WebSiteLink: typeof import('./../components/custom/web-site-link.vue')['default']
}

View File

@@ -45,10 +45,12 @@ declare module "@elegant-router/types" {
"metrics_worktime": "/metrics/worktime";
"personal-center": "/personal-center";
"personal-center_my-application": "/personal-center/my-application";
"personal-center_my-item": "/personal-center/my-item";
"personal-center_my-monthly": "/personal-center/my-monthly";
"personal-center_my-performance": "/personal-center/my-performance";
"personal-center_my-profile": "/personal-center/my-profile";
"personal-center_my-weekly": "/personal-center/my-weekly";
"personal-center_overtime-application": "/personal-center/overtime-application";
"personal-center_pending-approval": "/personal-center/pending-approval";
"plugin": "/plugin";
"plugin_barcode": "/plugin/barcode";
@@ -181,10 +183,12 @@ declare module "@elegant-router/types" {
| "metrics_project-progress"
| "metrics_worktime"
| "personal-center_my-application"
| "personal-center_my-item"
| "personal-center_my-monthly"
| "personal-center_my-performance"
| "personal-center_my-profile"
| "personal-center_my-weekly"
| "personal-center_overtime-application"
| "personal-center_pending-approval"
| "plugin_barcode"
| "plugin_charts_antv"

View File

@@ -17,6 +17,9 @@ import StateMachineOperateDialog from './modules/state-machine-operate-dialog.vu
import StateMachineSearch from './modules/state-machine-search.vue';
import StateTransitionDialog from './modules/state-transition-dialog.vue';
import { formatDateTime, getBooleanLabel, getBooleanTagType, getStatusLabel, getStatusTagType } from './shared';
import IconMdiDeleteOutline from '~icons/mdi/delete-outline';
import IconMdiPencilOutline from '~icons/mdi/pencil-outline';
import IconMdiSourceBranch from '~icons/mdi/source-branch';
defineOptions({ name: 'StateMachineManage' });
@@ -71,6 +74,7 @@ function getStatusModelActions(row: Api.Infra.ObjectStatusModel): BusinessTableA
actions.push({
key: 'transition',
label: '状态流转',
icon: IconMdiSourceBranch,
buttonType: 'primary',
onClick: () => openTransitionDialog(row)
});
@@ -80,6 +84,7 @@ function getStatusModelActions(row: Api.Infra.ObjectStatusModel): BusinessTableA
actions.push({
key: 'edit',
label: '编辑',
icon: IconMdiPencilOutline,
buttonType: 'primary',
onClick: () => openEdit(row)
});
@@ -89,6 +94,7 @@ function getStatusModelActions(row: Api.Infra.ObjectStatusModel): BusinessTableA
actions.push({
key: 'delete',
label: '删除',
icon: IconMdiDeleteOutline,
buttonType: 'danger',
onClick: () => handleDeleteAction(row)
});
@@ -147,35 +153,35 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagi
align: 'center',
formatter: row => <ElTag type={getBooleanTagType(row.allowEdit)}>{getBooleanLabel(row.allowEdit)}</ElTag>
},
{
prop: 'progressExcludedFlag',
label: '不参与上层进度统计',
width: 160,
align: 'center',
formatter: row => (
<ElTag type={getBooleanTagType(row.progressExcludedFlag)}>{getBooleanLabel(row.progressExcludedFlag)}</ElTag>
)
},
{
prop: 'allowCreateProject',
label: '允许新建项目',
width: 130,
align: 'center',
formatter: row => (
<ElTag type={getBooleanTagType(row.allowCreateProject)}>{getBooleanLabel(row.allowCreateProject)}</ElTag>
)
},
{
prop: 'allowCreateRequirement',
label: '允许新增需求',
width: 130,
align: 'center',
formatter: row => (
<ElTag type={getBooleanTagType(row.allowCreateRequirement)}>
{getBooleanLabel(row.allowCreateRequirement)}
</ElTag>
)
},
// {
// prop: 'progressExcludedFlag',
// label: '不参与上层进度统计',
// width: 160,
// align: 'center',
// formatter: row => (
// <ElTag type={getBooleanTagType(row.progressExcludedFlag)}>{getBooleanLabel(row.progressExcludedFlag)}</ElTag>
// )
// },
// {
// prop: 'allowCreateProject',
// label: '允许新建项目',
// width: 130,
// align: 'center',
// formatter: row => (
// <ElTag type={getBooleanTagType(row.allowCreateProject)}>{getBooleanLabel(row.allowCreateProject)}</ElTag>
// )
// },
// {
// prop: 'allowCreateRequirement',
// label: '允许新增需求',
// width: 130,
// align: 'center',
// formatter: row => (
// <ElTag type={getBooleanTagType(row.allowCreateRequirement)}>
// {getBooleanLabel(row.allowCreateRequirement)}
// </ElTag>
// )
// },
{ prop: 'sort', label: '排序', width: 90, align: 'center' },
{
prop: 'remark',
@@ -203,7 +209,7 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagi
return <span>--</span>;
}
return <BusinessTableActionCell actions={actions} />;
return <BusinessTableActionCell actions={actions} variant="icon" />;
}
}
]

View File

@@ -0,0 +1,667 @@
<script setup lang="tsx">
import { computed, markRaw, nextTick, onActivated, reactive, ref } from 'vue';
import type { TableInstance } from 'element-plus';
import { ElButton, ElMessageBox, ElTag, ElTooltip } from 'element-plus';
import { useBoolean } from '@sa/hooks';
import {
fetchBatchDeletePersonalItems,
fetchBindPersonalItemsToExecution,
fetchChangePersonalItemStatus,
fetchDeletePersonalItem,
fetchGetPersonalItemDetail,
fetchGetPersonalItemPage
} from '@/service/api';
import { useAuthStore } from '@/store/modules/auth';
import { useUIPaginatedTable } from '@/hooks/common/table';
import PersonalItemBindExecutionDialog from './modules/personal-item-bind-execution-dialog.vue';
import PersonalItemDetailDialog from './modules/personal-item-detail-dialog.vue';
import PersonalItemOperateDialog from './modules/personal-item-operate-dialog.vue';
import PersonalItemSearch from './modules/personal-item-search.vue';
import PersonalItemStatusActionDialog from './modules/personal-item-status-action-dialog.vue';
import {
formatPersonalItemDateRange,
formatPersonalItemDateTime,
formatPersonalItemOwnerName,
formatPersonalItemProgress,
getPersonalItemStatusLabel,
resolvePersonalItemStatusTagType
} from './modules/personal-item-shared';
import IconMdiCheckCircleOutline from '~icons/mdi/check-circle-outline';
import IconMdiClipboardEditOutline from '~icons/mdi/clipboard-edit-outline';
import IconMdiCloseCircleOutline from '~icons/mdi/close-circle-outline';
import IconMdiDeleteOutline from '~icons/mdi/delete-outline';
import IconMdiPause from '~icons/mdi/pause';
import IconMdiPencilOutline from '~icons/mdi/pencil-outline';
import IconMdiPlay from '~icons/mdi/play';
import IconMdiRestart from '~icons/mdi/restart';
import IconMdiSync from '~icons/mdi/sync';
defineOptions({ name: 'MyItem' });
type DetailTab = 'worklog';
type PersonalItemOperateType = UI.TableOperateType | 'view';
interface PersonalItemRowAction {
key: string;
tooltip: string;
icon: object;
type: 'primary' | 'success' | 'warning' | 'danger';
disabled?: boolean;
onClick: () => void | Promise<void>;
}
const lifecycleActionIconMap: Record<string, object> = {
start: markRaw(IconMdiPlay),
pause: markRaw(IconMdiPause),
resume: markRaw(IconMdiRestart),
reopen: markRaw(IconMdiRestart),
cancel: markRaw(IconMdiCloseCircleOutline),
complete: markRaw(IconMdiCheckCircleOutline)
};
const lifecycleActionTypeMap: Record<string, PersonalItemRowAction['type']> = {
cancel: 'danger',
pause: 'warning',
complete: 'success',
resume: 'primary',
reopen: 'primary',
start: 'primary'
};
const lifecycleActionOrder: Record<string, number> = {
pause: 1,
cancel: 2,
complete: 3,
resume: 4,
reopen: 5,
start: 6
};
const authStore = useAuthStore();
const currentUserId = computed(() => {
const rawUserId = authStore.userInfo.userId;
return rawUserId ? String(rawUserId) : '';
});
function getInitSearchParams(): Api.PersonalItem.PersonalItemSearchParams {
return {
pageNo: 1,
pageSize: 10,
keyword: undefined,
ownerId: currentUserId.value || undefined,
statusCode: undefined,
updateTime: undefined
};
}
function transformPageResult(
response: Awaited<ReturnType<typeof fetchGetPersonalItemPage>>,
pageNo: number,
pageSize: number
) {
if (!response.error) {
return {
data: response.data.list,
pageNum: pageNo,
pageSize,
total: response.data.total
};
}
return {
data: [],
pageNum: pageNo,
pageSize,
total: 0
};
}
const searchParams = reactive(getInitSearchParams());
const tableRef = ref<TableInstance>();
const checkedRowIds = ref<string[]>([]);
const bindExecutionSubmitting = ref(false);
const selectedCount = computed(() => checkedRowIds.value.length);
const { columns, columnChecks, data, loading, getDataByPage, mobilePagination } = useUIPaginatedTable({
paginationProps: {
currentPage: searchParams.pageNo,
pageSize: searchParams.pageSize
},
api: () => fetchGetPersonalItemPage(searchParams),
transform: response => transformPageResult(response, searchParams.pageNo ?? 1, searchParams.pageSize ?? 10),
onPaginationParamsChange: params => {
searchParams.pageNo = params.currentPage ?? 1;
searchParams.pageSize = params.pageSize ?? 10;
},
columns: () => [
{ prop: 'selection', type: 'selection', width: 48 },
{ prop: 'index', type: 'index', label: '序号', width: 64 },
{
prop: 'taskTitle',
label: '事项标题',
minWidth: 260,
showOverflowTooltip: true
},
{
prop: 'ownerName',
label: '负责人',
minWidth: 140,
formatter: row => formatPersonalItemOwnerName(row)
},
{
prop: 'statusCode',
label: '状态',
width: 120,
align: 'center',
formatter: row => (
<ElTag type={resolvePersonalItemStatusTagType(row.statusCode)}>
{getPersonalItemStatusLabel(row.statusCode)}
</ElTag>
)
},
{
prop: 'progressRate',
label: '进度',
width: 100,
align: 'center',
formatter: row => formatPersonalItemProgress(row.progressRate)
},
{
prop: 'plannedDateRange',
label: '计划日期',
minWidth: 220,
formatter: row => formatPersonalItemDateRange(row.plannedStartDate, row.plannedEndDate)
},
{
prop: 'actualDateRange',
label: '实际日期',
minWidth: 220,
formatter: row => formatPersonalItemDateRange(row.actualStartDate, row.actualEndDate)
},
{
prop: 'updateTime',
label: '最近更新',
minWidth: 180,
formatter: row => formatPersonalItemDateTime(row.updateTime)
},
{
prop: 'operate',
label: '操作',
width: 240,
align: 'center',
fixed: 'right',
formatter: row => renderRowActions(row)
}
]
});
const { bool: operateVisible, setTrue: openOperateDialog, setFalse: closeOperateDialog } = useBoolean();
const { bool: detailVisible, setTrue: openDetailDialog } = useBoolean();
const {
bool: bindExecutionVisible,
setTrue: openBindExecutionDialog,
setFalse: closeBindExecutionDialog
} = useBoolean();
const { bool: statusActionVisible, setTrue: openStatusActionDialog, setFalse: closeStatusActionDialog } = useBoolean();
const operateType = ref<PersonalItemOperateType>('add');
const editingData = ref<Api.PersonalItem.PersonalItem | null>(null);
const detailData = ref<Api.PersonalItem.PersonalItem | null>(null);
const detailDefaultTab = ref<DetailTab>('worklog');
const currentStatusAction = ref<Api.PersonalItem.PersonalItemLifecycleAction | null>(null);
const currentStatusItem = ref<Api.PersonalItem.PersonalItem | null>(null);
async function openDetail(row: Api.PersonalItem.PersonalItem, defaultTab: DetailTab = 'worklog') {
const { error, data: latestDetail } = await fetchGetPersonalItemDetail(row.id);
detailData.value = error || !latestDetail ? row : latestDetail;
detailDefaultTab.value = defaultTab;
openDetailDialog();
}
function openView(row: Api.PersonalItem.PersonalItem) {
operateType.value = 'view';
editingData.value = row;
openOperateDialog();
}
// function createLifecycleAction(
// fallback: {
// key: string;
// tooltip: string;
// icon: object;
// type: PersonalItemRowAction['type'];
// actionCode: string;
// },
// action: Api.PersonalItem.PersonalItemLifecycleAction | null
// ): PersonalItemRowAction {
// return {
// key: fallback.key,
// tooltip: action?.actionName ?? fallback.tooltip,
// icon: fallback.icon,
// type: fallback.type,
// disabled: !action,
// onClick: async () =>
// handleStatusAction(currentStatusItem.value!, {
// actionCode: action?.actionCode ?? fallback.actionCode,
// actionName: action?.actionName ?? fallback.tooltip,
// needReason: action?.needReason ?? false
// })
// };
// }
function buildRowActions(row: Api.PersonalItem.PersonalItem): PersonalItemRowAction[] {
currentStatusItem.value = row;
const rawLifecycleActions = [...(row.availableActions ?? [])];
const pauseAction = rawLifecycleActions.find(action => action.actionCode === 'pause') ?? null;
const cancelAction = rawLifecycleActions.find(action => action.actionCode === 'cancel') ?? null;
const completeAction = rawLifecycleActions.find(action => action.actionCode === 'complete') ?? null;
const lifecycleActions = rawLifecycleActions
.filter(action => !['pause', 'cancel', 'complete'].includes(action.actionCode))
.sort(
(left, right) => (lifecycleActionOrder[left.actionCode] ?? 99) - (lifecycleActionOrder[right.actionCode] ?? 99)
)
.map(action => ({
key: `status-${action.actionCode}`,
tooltip: action.actionName,
icon: markRaw(lifecycleActionIconMap[action.actionCode] ?? IconMdiSync),
type: lifecycleActionTypeMap[action.actionCode] ?? 'primary',
onClick: async () => handleStatusAction(row, action)
}));
return [
{
key: 'worklog',
tooltip: '填报',
icon: markRaw(IconMdiClipboardEditOutline),
type: 'primary',
onClick: async () => openDetail(row, 'worklog')
},
{
key: 'edit',
tooltip: '编辑',
icon: markRaw(IconMdiPencilOutline),
type: 'primary',
onClick: async () => {
operateType.value = 'edit';
editingData.value = row;
openOperateDialog();
}
},
{
key: 'delete',
tooltip: '删除',
icon: markRaw(IconMdiDeleteOutline),
type: 'danger',
onClick: async () => handleDelete(row)
},
{
key: 'status-pause',
tooltip: pauseAction?.actionName ?? '暂停',
icon: markRaw(IconMdiPause),
type: 'warning',
disabled: !pauseAction,
onClick: async () =>
handleStatusAction(row, {
actionCode: pauseAction?.actionCode ?? 'pause',
actionName: pauseAction?.actionName ?? '暂停',
needReason: pauseAction?.needReason ?? false
})
},
// {
// key: 'status-cancel',
// tooltip: cancelAction?.actionName ?? '取消',
// icon: markRaw(IconMdiCloseCircleOutline),
// type: 'danger',
// disabled: !cancelAction,
// onClick: async () =>
// handleStatusAction(row, {
// actionCode: cancelAction?.actionCode ?? 'cancel',
// actionName: cancelAction?.actionName ?? '取消',
// needReason: cancelAction?.needReason ?? false
// })
// },
...lifecycleActions,
{
key: 'status-complete',
tooltip: completeAction?.actionName ?? '完成',
icon: markRaw(IconMdiCheckCircleOutline),
type: 'success',
disabled: !completeAction,
onClick: async () =>
handleStatusAction(row, {
actionCode: completeAction?.actionCode ?? 'complete',
actionName: completeAction?.actionName ?? '完成',
needReason: completeAction?.needReason ?? false
})
}
];
}
function renderRowActions(row: Api.PersonalItem.PersonalItem) {
return (
<div class="personal-item-row-actions" onClick={event => event.stopPropagation()}>
{buildRowActions(row).map(action => {
const Icon = action.icon as any;
return (
<ElTooltip key={action.key} content={action.tooltip}>
<span class="inline-flex">
<ElButton
link
type={action.type}
class="personal-item-row-action-btn"
disabled={action.disabled}
onClick={event => {
event.stopPropagation();
if (action.disabled) {
return;
}
action.onClick();
}}
>
<Icon class="text-15px" />
</ElButton>
</span>
</ElTooltip>
);
})}
</div>
);
}
function openAdd() {
operateType.value = 'add';
editingData.value = null;
openOperateDialog();
}
function handleSelectionChange(rows: Api.PersonalItem.PersonalItem[]) {
checkedRowIds.value = rows.map(item => item.id);
}
function resolveReloadPageAfterRemove() {
const currentPage = searchParams.pageNo ?? 1;
if (currentPage > 1 && data.value.length > 0 && checkedRowIds.value.length >= data.value.length) {
return currentPage - 1;
}
return currentPage;
}
async function reloadTable(page = searchParams.pageNo ?? 1) {
checkedRowIds.value = [];
await getDataByPage(page);
await nextTick();
tableRef.value?.clearSelection();
}
function resetSearchParams() {
Object.assign(searchParams, getInitSearchParams());
reloadTable(1);
}
function handleSearch() {
reloadTable(1);
}
function handleSubmitted() {
closeOperateDialog();
reloadTable(searchParams.pageNo ?? 1);
}
function handleDetailChanged(latestItem: Api.PersonalItem.PersonalItem) {
detailData.value = latestItem;
const targetIndex = data.value.findIndex(item => item.id === latestItem.id);
if (targetIndex >= 0) {
data.value.splice(targetIndex, 1, latestItem);
}
}
function handleStatusAction(row: Api.PersonalItem.PersonalItem, action: Api.PersonalItem.PersonalItemLifecycleAction) {
currentStatusItem.value = row;
currentStatusAction.value = action;
openStatusActionDialog();
}
async function handleStatusActionSubmit(reason: string | null) {
if (!currentStatusItem.value || !currentStatusAction.value) {
return;
}
const { error } = await fetchChangePersonalItemStatus(currentStatusItem.value.id, {
actionCode: currentStatusAction.value.actionCode,
reason
});
if (error) {
return;
}
closeStatusActionDialog();
window.$message?.success(`${currentStatusAction.value.actionName}成功`);
await reloadTable(searchParams.pageNo ?? 1);
}
async function handleDelete(row: Api.PersonalItem.PersonalItem) {
try {
await ElMessageBox.confirm(`确定删除个人事项“${row.taskTitle}”吗?`, '删除确认', {
type: 'warning',
confirmButtonText: '确定',
cancelButtonText: '取消'
});
} catch {
return;
}
const { error } = await fetchDeletePersonalItem(row.id);
if (error) {
return;
}
window.$message?.success('删除成功');
await reloadTable(searchParams.pageNo ?? 1);
}
async function handleBatchDelete() {
if (!checkedRowIds.value.length) {
window.$message?.warning('请先选择个人事项');
return;
}
try {
await ElMessageBox.confirm(`确定删除选中的 ${selectedCount.value} 条个人事项吗?`, '删除确认', {
type: 'warning',
confirmButtonText: '确定',
cancelButtonText: '取消'
});
} catch {
return;
}
const targetPage = resolveReloadPageAfterRemove();
const { error } = await fetchBatchDeletePersonalItems({ ids: [...checkedRowIds.value] });
if (error) {
return;
}
window.$message?.success('批量删除成功');
await reloadTable(targetPage);
}
function handleOpenBindExecution() {
if (!checkedRowIds.value.length) {
window.$message?.warning('请先选择个人事项');
return;
}
openBindExecutionDialog();
}
async function handleBindExecutionSubmit(payload: { executionId: string }) {
bindExecutionSubmitting.value = true;
const targetPage = resolveReloadPageAfterRemove();
const { error } = await fetchBindPersonalItemsToExecution({
ids: [...checkedRowIds.value],
executionId: payload.executionId
});
bindExecutionSubmitting.value = false;
if (error) {
return;
}
closeBindExecutionDialog();
window.$message?.success('批量关联执行成功');
await reloadTable(targetPage);
}
onActivated(() => {
searchParams.ownerId = currentUserId.value || undefined;
reloadTable(searchParams.pageNo ?? 1);
});
</script>
<template>
<div class="flex-col-stretch gap-16px overflow-hidden">
<PersonalItemSearch v-model:model="searchParams" @reset="resetSearchParams" @search="handleSearch" />
<ElCard class="flex-1-hidden card-wrapper" body-class="business-table-card-body">
<template #header>
<div class="flex items-center justify-between gap-12px">
<div class="flex items-center gap-10px">
<p>个人事项</p>
<ElTag effect="plain">{{ mobilePagination.total || data.length }}</ElTag>
</div>
<TableHeaderOperation v-model:columns="columnChecks" :loading="loading" @refresh="reloadTable">
<template #default>
<ElButton plain type="danger" :disabled="selectedCount === 0" @click="handleBatchDelete">
<template #icon>
<icon-ic-round-delete class="text-icon" />
</template>
批量删除
</ElButton>
<ElButton plain :disabled="selectedCount === 0" @click="handleOpenBindExecution">
<template #icon>
<icon-mdi-link-variant class="text-icon" />
</template>
批量关联执行
</ElButton>
<ElButton plain type="primary" @click="openAdd">
<template #icon>
<icon-ic-round-plus class="text-icon" />
</template>
新增
</ElButton>
</template>
</TableHeaderOperation>
</div>
</template>
<div class="flex-1">
<ElTable
ref="tableRef"
v-loading="loading"
height="100%"
border
row-key="id"
:data="data"
@selection-change="handleSelectionChange"
>
<template v-for="col in columns" :key="String(col.prop)">
<ElTableColumn v-if="col.prop === 'taskTitle'" v-bind="col">
<template #default="{ row }">
<ElButton link type="primary" class="personal-item-title-link" @click.stop="openView(row)">
{{ row.taskTitle || '--' }}
</ElButton>
</template>
</ElTableColumn>
<ElTableColumn v-else v-bind="col" />
</template>
</ElTable>
</div>
<div class="mt-20px flex justify-end">
<ElPagination
v-if="mobilePagination.total"
layout="total,prev,pager,next,sizes"
v-bind="mobilePagination"
@current-change="mobilePagination['current-change']"
@size-change="mobilePagination['size-change']"
/>
</div>
</ElCard>
<PersonalItemOperateDialog
v-model:visible="operateVisible"
:operate-type="operateType"
:row-data="editingData"
@submitted="handleSubmitted"
/>
<PersonalItemDetailDialog
v-model:visible="detailVisible"
:row-data="detailData"
:default-tab="detailDefaultTab"
@changed="handleDetailChanged"
/>
<PersonalItemBindExecutionDialog
v-model:visible="bindExecutionVisible"
:selected-count="selectedCount"
:submit-loading="bindExecutionSubmitting"
@submit="handleBindExecutionSubmit"
/>
<PersonalItemStatusActionDialog
v-model:visible="statusActionVisible"
:action="currentStatusAction"
@submit="handleStatusActionSubmit"
/>
</div>
</template>
<style scoped lang="scss">
.personal-item-row-actions {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.personal-item-row-actions :deep(.el-button + .el-button) {
margin-left: 0;
}
:deep(.personal-item-row-action-btn) {
padding: 3px;
min-width: auto;
height: auto;
line-height: 1;
}
:deep(.personal-item-title-link) {
max-width: 100%;
padding: 0;
vertical-align: baseline;
}
:deep(.personal-item-title-link > span) {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

View File

@@ -0,0 +1,128 @@
<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue';
import { fetchGetPersonalItemExecutionOptions } from '@/service/api';
import { useForm, useFormRules } from '@/hooks/common/form';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
defineOptions({ name: 'PersonalItemBindExecutionDialog' });
interface Props {
selectedCount: number;
submitLoading?: boolean;
}
interface Emits {
(e: 'submit', payload: { executionId: string }): void;
}
const props = withDefaults(defineProps<Props>(), {
submitLoading: false
});
const emit = defineEmits<Emits>();
const visible = defineModel<boolean>('visible', {
default: false
});
const { formRef, validate } = useForm();
const { createRequiredRule } = useFormRules();
const loading = ref(false);
const executionOptions = ref<Api.PersonalItem.PersonalItemExecutionOption[]>([]);
const model = reactive({
executionId: ''
});
const rules = computed(
() =>
({
executionId: [createRequiredRule('请选择执行')]
}) satisfies Record<string, App.Global.FormRule[]>
);
function getExecutionOptionLabel(option: Api.PersonalItem.PersonalItemExecutionOption) {
if (option.projectName?.trim()) {
return `${option.projectName} / ${option.executionName}`;
}
return option.executionName;
}
async function loadExecutionOptions() {
loading.value = true;
const { error, data } = await fetchGetPersonalItemExecutionOptions();
loading.value = false;
if (error || !data) {
executionOptions.value = [];
return;
}
executionOptions.value = data.map(item => ({ ...item }));
}
async function initDialog() {
model.executionId = '';
await loadExecutionOptions();
formRef.value?.clearValidate();
}
async function handleConfirm() {
await validate();
emit('submit', {
executionId: model.executionId
});
}
watch(
() => visible.value,
value => {
if (value) {
initDialog();
}
}
);
</script>
<template>
<BusinessFormDialog
v-model="visible"
title="批量关联执行"
preset="sm"
:loading="loading"
:confirm-loading="props.submitLoading"
@confirm="handleConfirm"
>
<ElAlert
:title="`已选中 ${props.selectedCount} 条个人事项,关联成功后这些事项会从当前列表移除。`"
type="info"
:closable="false"
class="mb-16px"
/>
<ElForm ref="formRef" :model="model" :rules="rules" label-position="top" :validate-on-rule-change="false">
<ElFormItem label="执行" prop="executionId">
<ElSelect
v-model="model.executionId"
clearable
filterable
placeholder="请选择执行"
class="w-full"
:loading="loading"
>
<ElOption
v-for="option in executionOptions"
:key="option.executionId"
:label="getExecutionOptionLabel(option)"
:value="option.executionId"
/>
</ElSelect>
</ElFormItem>
</ElForm>
</BusinessFormDialog>
</template>
<style scoped></style>

View File

@@ -0,0 +1,326 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { ElMessageBox } from 'element-plus';
import {
fetchCompletePersonalItem,
fetchCreatePersonalItemWorklog,
fetchDeletePersonalItemWorklog,
fetchGetPersonalItemDetail,
fetchGetPersonalItemWorklogPage,
fetchUpdatePersonalItemWorklog
} from '@/service/api';
import { useAuthStore } from '@/store/modules/auth';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import TaskWorklogPanel from '@/views/project/project/execution/modules/task-worklog-panel.vue';
import {
formatPersonalItemDate,
formatPersonalItemOwnerName,
formatPersonalItemProgress,
getPersonalItemStatusLabel,
resolvePersonalItemStatusTagType
} from './personal-item-shared';
defineOptions({ name: 'PersonalItemDetailDialog' });
type TabName = 'worklog';
interface Props {
rowData?: Api.PersonalItem.PersonalItem | null;
defaultTab?: TabName;
}
const props = withDefaults(defineProps<Props>(), {
rowData: null,
defaultTab: 'worklog'
});
const emit = defineEmits<{
changed: [item: Api.PersonalItem.PersonalItem];
}>();
const visible = defineModel<boolean>('visible', {
default: false
});
const activeTab = ref<TabName>('worklog');
const detailData = ref<Api.PersonalItem.PersonalItem | null>(null);
const authStore = useAuthStore();
const currentUserId = computed(() => authStore.userInfo.userId || '');
const currentUserName = computed(
() => authStore.userInfo.nickname?.trim() || authStore.userInfo.userName?.trim() || ''
);
const COMPLETED_STATUS_CODE: Api.PersonalItem.PersonalItemStatusCode = 'completed';
const COMPLETE_ACTION_CODE = 'complete';
const ownerName = computed(() => {
if (!detailData.value) return '--';
const displayName = formatPersonalItemOwnerName(detailData.value);
if (displayName !== detailData.value.ownerId) {
return displayName;
}
return detailData.value.ownerId === currentUserId.value && currentUserName.value
? currentUserName.value
: displayName;
});
const statusName = computed(() => (detailData.value ? getPersonalItemStatusLabel(detailData.value.statusCode) : '--'));
const statusTagType = computed(() =>
detailData.value ? resolvePersonalItemStatusTagType(detailData.value.statusCode) : 'info'
);
const progressText = computed(() => formatPersonalItemProgress(detailData.value?.progressRate));
const plannedStartText = computed(() => formatPersonalItemDate(detailData.value?.plannedStartDate));
const plannedEndText = computed(() => formatPersonalItemDate(detailData.value?.plannedEndDate));
const actualStartText = computed(() => formatPersonalItemDate(detailData.value?.actualStartDate));
const actualEndText = computed(() => formatPersonalItemDate(detailData.value?.actualEndDate));
const totalHoursText = computed(() => {
const total = detailData.value?.totalSpentHours;
return `${typeof total === 'number' && Number.isFinite(total) ? total.toFixed(1) : '0.0'}h`;
});
const canSubmitWorklog = computed(() =>
Boolean(
detailData.value?.id &&
(detailData.value.statusCode === 'pending' ||
detailData.value.statusCode === 'active' ||
detailData.value.statusCode === 'completed')
)
);
function syncDetailFromPageRow() {
detailData.value = props.rowData ?? null;
}
async function refreshDetail() {
if (!detailData.value?.id) {
return;
}
const { error, data } = await fetchGetPersonalItemDetail(detailData.value.id);
if (!error && data) {
detailData.value = data;
}
}
function canPromptCompleteItem(item: Api.PersonalItem.PersonalItem) {
if (item.statusCode === COMPLETED_STATUS_CODE || item.terminal) {
return false;
}
return (
item.progressRate >= 100 && (item.availableActions ?? []).some(action => action.actionCode === COMPLETE_ACTION_CODE)
);
}
async function promptCompleteItemIfNeeded() {
if (!detailData.value || !canPromptCompleteItem(detailData.value)) {
return;
}
try {
await ElMessageBox.confirm('事项进度已达 100%,是否完成当前事项?', '完成确认', {
confirmButtonText: '完成事项',
cancelButtonText: '仅保留工时',
type: 'info'
});
} catch {
return;
}
const { error } = await fetchCompletePersonalItem(detailData.value.id);
if (!error) {
window.$message?.success('个人事项已完成');
await refreshDetail();
}
}
async function handleWorklogChanged() {
await refreshDetail();
await promptCompleteItemIfNeeded();
if (detailData.value) {
emit('changed', detailData.value);
}
}
function fetchPersonalWorklogPage(params: Api.Project.TaskWorklogSearchParams) {
return fetchGetPersonalItemWorklogPage(detailData.value!.id, params);
}
function createPersonalWorklog(data: Api.Project.SaveTaskWorklogParams) {
return fetchCreatePersonalItemWorklog(detailData.value!.id, data);
}
function updatePersonalWorklog(payload: { worklogId: string; data: Api.Project.SaveTaskWorklogParams }) {
return fetchUpdatePersonalItemWorklog(detailData.value!.id, payload);
}
function deletePersonalWorklog(worklogId: string) {
return fetchDeletePersonalItemWorklog(detailData.value!.id, worklogId);
}
watch(
() => visible.value,
value => {
if (value) {
activeTab.value = props.defaultTab;
syncDetailFromPageRow();
}
}
);
watch(
() => props.rowData,
() => {
if (visible.value) {
syncDetailFromPageRow();
}
}
);
watch(
() => props.defaultTab,
value => {
if (visible.value) {
activeTab.value = value;
}
}
);
</script>
<template>
<BusinessFormDialog
v-model="visible"
title="工作日志"
width="1100px"
max-body-height="78vh"
:show-footer="false"
:scrollbar="false"
>
<ElTabs v-model="activeTab" class="personal-item-detail-dialog__tabs">
<ElTabPane label="工作日志" name="worklog" lazy>
<div v-if="detailData" class="personal-item-worklog-content">
<div class="personal-item-worklog-content__cards">
<div class="personal-item-worklog-content__card">
<span class="personal-item-worklog-content__card-label">负责人</span>
<span class="personal-item-worklog-content__card-value" :title="ownerName">{{ ownerName }}</span>
</div>
<div class="personal-item-worklog-content__card">
<span class="personal-item-worklog-content__card-label">当前状态</span>
<ElTag :type="statusTagType" size="small" effect="light" class="personal-item-worklog-content__card-tag">
{{ statusName }}
</ElTag>
</div>
<div class="personal-item-worklog-content__card">
<span class="personal-item-worklog-content__card-label">计划开始</span>
<span class="personal-item-worklog-content__card-value">{{ plannedStartText }}</span>
</div>
<div class="personal-item-worklog-content__card">
<span class="personal-item-worklog-content__card-label">计划结束</span>
<span class="personal-item-worklog-content__card-value">{{ plannedEndText }}</span>
</div>
<div class="personal-item-worklog-content__card">
<span class="personal-item-worklog-content__card-label">当前进度</span>
<span class="personal-item-worklog-content__card-value">{{ progressText }}</span>
</div>
<div class="personal-item-worklog-content__card">
<span class="personal-item-worklog-content__card-label">累计工时</span>
<span class="personal-item-worklog-content__card-value personal-item-worklog-content__card-value--accent">
{{ totalHoursText }}
</span>
</div>
<div class="personal-item-worklog-content__card">
<span class="personal-item-worklog-content__card-label">实际开始</span>
<span class="personal-item-worklog-content__card-value">{{ actualStartText }}</span>
</div>
<div class="personal-item-worklog-content__card">
<span class="personal-item-worklog-content__card-label">实际结束</span>
<span class="personal-item-worklog-content__card-value">{{ actualEndText }}</span>
</div>
</div>
<TaskWorklogPanel
project-id=""
execution-id=""
:task-id="detailData.id"
:task-owner-id="currentUserId"
:task-status-code="detailData.statusCode"
:task-progress-rate="detailData.progressRate"
:can-submit="canSubmitWorklog"
:active="activeTab === 'worklog' && visible"
:fetch-worklog-page="fetchPersonalWorklogPage"
:create-worklog="createPersonalWorklog"
:update-worklog="updatePersonalWorklog"
:delete-worklog="deletePersonalWorklog"
attachment-directory="personal-item-worklog"
create-success-message="工作日志新增成功"
update-success-message="工作日志修改成功"
delete-success-message="工作日志删除成功"
@changed="handleWorklogChanged"
/>
</div>
</ElTabPane>
</ElTabs>
</BusinessFormDialog>
</template>
<style scoped lang="scss">
.personal-item-detail-dialog__tabs {
--el-tabs-header-height: 40px;
}
.personal-item-detail-dialog__tabs :deep(.el-tabs__content),
.personal-item-detail-dialog__tabs :deep(.el-tab-pane) {
min-height: 640px;
}
.personal-item-worklog-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.personal-item-worklog-content__cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.personal-item-worklog-content__card {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
padding: 12px 14px;
background: var(--el-fill-color-light);
border: 1px solid var(--el-border-color-lighter);
border-radius: 6px;
}
.personal-item-worklog-content__card-label {
color: var(--el-text-color-secondary);
font-size: 12px;
line-height: 1.2;
}
.personal-item-worklog-content__card-value {
overflow: hidden;
color: var(--el-text-color-primary);
font-size: 15px;
font-weight: 600;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.personal-item-worklog-content__card-value--accent {
color: var(--el-color-primary);
}
.personal-item-worklog-content__card-tag {
align-self: flex-start;
}
</style>

View File

@@ -0,0 +1,342 @@
<script setup lang="ts">
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { useResizeObserver } from '@vueuse/core';
import dayjs from 'dayjs';
import { RDMS_TASK_ITEM_TYPE_DICT_CODE } from '@/constants/dict';
import { fetchCreatePersonalItem, fetchGetPersonalItemDetail, fetchUpdatePersonalItem } from '@/service/api';
import { useAuthStore } from '@/store/modules/auth';
import { useForm, useFormRules } from '@/hooks/common/form';
import BusinessAttachmentUploader from '@/components/custom/business-attachment-uploader.vue';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import BusinessFormSection from '@/components/custom/business-form-section.vue';
import BusinessRichTextEditor from '@/components/custom/business-rich-text-editor.vue';
import DictSelect from '@/components/custom/dict-select.vue';
import { isEmptyRichText } from './personal-item-shared';
defineOptions({ name: 'PersonalItemOperateDialog' });
type PersonalItemOperateType = UI.TableOperateType | 'view';
interface Props {
operateType: PersonalItemOperateType;
rowData?: Api.PersonalItem.PersonalItem | null;
}
const props = defineProps<Props>();
const emit = defineEmits<{
submitted: [];
}>();
const visible = defineModel<boolean>('visible', {
default: false
});
const authStore = useAuthStore();
const currentUserId = computed(() => authStore.userInfo.userId || 'current-user');
const { formRef, validate } = useForm();
const { createRequiredRule } = useFormRules();
const attachmentUploaderRef = ref<InstanceType<typeof BusinessAttachmentUploader> | null>(null);
const richTextEditorRef = ref<InstanceType<typeof BusinessRichTextEditor> | null>(null);
const leftColRef = ref<HTMLElement>();
const editorHeight = ref<string>('45vh');
const ATTACHMENT_SECTION_RESERVE_PX = 140;
useResizeObserver(leftColRef, entries => {
const h = entries[0]?.contentRect.height;
if (h && h > 120) {
editorHeight.value = `${Math.max(h - 60 - ATTACHMENT_SECTION_RESERVE_PX, 200)}px`;
}
});
const isEdit = computed(() => props.operateType === 'edit');
const isView = computed(() => props.operateType === 'view');
const detailLoading = ref(false);
const submitting = ref(false);
interface Model {
taskTitle: string;
type: string;
plannedStartDate: string | null;
plannedEndDate: string | null;
taskDesc: string | null;
attachments: Api.Project.AttachmentItem[];
}
const model = reactive<Model>(createDefaultModel());
const title = computed(() => {
if (isView.value) {
return '个人事项详情';
}
return isEdit.value ? '编辑个人事项' : '新增个人事项';
});
function createDefaultModel(): Model {
return {
taskTitle: '',
type: '',
plannedStartDate: null,
plannedEndDate: null,
taskDesc: null,
attachments: []
};
}
function isPlannedDateRangeValid(startDate: string | null, endDate: string | null) {
if (!startDate || !endDate) {
return true;
}
return !dayjs(endDate).isBefore(dayjs(startDate), 'day');
}
const rules = computed(
() =>
({
taskTitle: [
createRequiredRule('请输入事项标题'),
{
validator: (_rule, value: string, callback) => {
if (!value?.trim()) {
callback(new Error('请输入事项标题'));
return;
}
callback();
},
trigger: 'blur'
}
],
type: [createRequiredRule('请选择事项类型')],
plannedStartDate: [createRequiredRule('请选择计划开始日期')],
plannedEndDate: [
createRequiredRule('请选择计划结束日期'),
{
validator: (_rule, value: string | null, callback) => {
if (!isPlannedDateRangeValid(model.plannedStartDate, value)) {
callback(new Error('计划结束日期不能早于计划开始日期'));
return;
}
callback();
},
trigger: 'change'
}
]
}) satisfies Record<string, App.Global.FormRule[]>
);
async function initModel() {
detailLoading.value = true;
Object.assign(model, createDefaultModel());
if ((isEdit.value || isView.value) && props.rowData) {
const { error, data } = await fetchGetPersonalItemDetail(props.rowData.id);
if (!error && data) {
model.taskTitle = data.taskTitle;
model.type = data.type;
model.plannedStartDate = data.plannedStartDate;
model.plannedEndDate = data.plannedEndDate;
model.taskDesc = data.taskDesc;
model.attachments = data.attachments ? [...data.attachments] : [];
}
}
detailLoading.value = false;
await nextTick();
attachmentUploaderRef.value?.initSession();
richTextEditorRef.value?.initSession();
formRef.value?.clearValidate();
}
async function handleSubmit() {
if (isView.value) {
visible.value = false;
return;
}
await validate();
if (attachmentUploaderRef.value?.hasUploading) {
window.$message?.warning('附件正在上传中,请稍候');
return;
}
const payload: Api.PersonalItem.SavePersonalItemParams = {
taskTitle: model.taskTitle.trim(),
type: model.type,
ownerId: currentUserId.value,
plannedStartDate: model.plannedStartDate,
plannedEndDate: model.plannedEndDate,
taskDesc: isEmptyRichText(model.taskDesc) ? null : (model.taskDesc ?? null),
attachments: [...model.attachments]
};
submitting.value = true;
const result =
isEdit.value && props.rowData
? await fetchUpdatePersonalItem({ id: props.rowData.id, ...payload })
: await fetchCreatePersonalItem(payload);
submitting.value = false;
if (result.error) {
return;
}
await Promise.all([attachmentUploaderRef.value?.commit(), richTextEditorRef.value?.commit()]);
window.$message?.success(isEdit.value ? '个人事项修改成功' : '个人事项创建成功');
visible.value = false;
emit('submitted');
}
watch(
() => visible.value,
value => {
if (value) {
initModel();
}
}
);
</script>
<template>
<BusinessFormDialog
v-model="visible"
:title="title"
width="1100px"
:loading="detailLoading"
:confirm-loading="submitting"
:show-footer="!isView"
max-body-height="78vh"
@confirm="handleSubmit"
>
<ElForm
ref="formRef"
:model="model"
:rules="rules"
label-position="top"
:validate-on-rule-change="false"
class="personal-item-operate-dialog__form"
>
<div class="personal-item-operate-dialog__grid">
<div ref="leftColRef" class="personal-item-operate-dialog__col-left">
<BusinessFormSection title="事项信息">
<ElFormItem label="事项标题" prop="taskTitle">
<ElInput
v-model="model.taskTitle"
:clearable="!isView"
:disabled="isView"
maxlength="300"
placeholder="请输入事项标题"
/>
</ElFormItem>
<ElFormItem label="事项类型" prop="type">
<DictSelect
v-model="model.type"
:dict-code="RDMS_TASK_ITEM_TYPE_DICT_CODE"
:clearable="!isView"
:disabled="isView"
placeholder="请选择事项类型"
/>
</ElFormItem>
<ElFormItem label="计划开始日期" prop="plannedStartDate">
<ElDatePicker
v-model="model.plannedStartDate"
:disabled="isView"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择计划开始日期"
class="personal-item-operate-dialog__date-picker"
/>
</ElFormItem>
<ElFormItem label="计划结束日期" prop="plannedEndDate">
<ElDatePicker
v-model="model.plannedEndDate"
:disabled="isView"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择计划结束日期"
class="personal-item-operate-dialog__date-picker"
/>
</ElFormItem>
</BusinessFormSection>
</div>
<div class="personal-item-operate-dialog__col-right">
<BusinessFormSection title="事项说明">
<ElFormItem class="personal-item-operate-dialog__desc-item" prop="taskDesc">
<BusinessRichTextEditor
ref="richTextEditorRef"
v-model="model.taskDesc"
:height="editorHeight"
:disabled="isView"
upload-directory="personal-item"
placeholder="请输入事项说明"
/>
</ElFormItem>
</BusinessFormSection>
<BusinessFormSection title="附件">
<ElFormItem class="personal-item-operate-dialog__attachment-item">
<BusinessAttachmentUploader
ref="attachmentUploaderRef"
v-model="model.attachments"
directory="personal-item"
:disabled="isView"
/>
</ElFormItem>
</BusinessFormSection>
</div>
</div>
</ElForm>
</BusinessFormDialog>
</template>
<style scoped>
.personal-item-operate-dialog__grid {
display: grid;
grid-template-columns: 360px 1fr;
gap: 24px;
align-items: start;
}
.personal-item-operate-dialog__col-left,
.personal-item-operate-dialog__col-right {
min-width: 0;
}
.personal-item-operate-dialog__col-right {
display: flex;
flex-direction: column;
gap: 16px;
}
.personal-item-operate-dialog__desc-item,
.personal-item-operate-dialog__attachment-item {
margin-bottom: 0;
}
@media (width <= 1024px) {
.personal-item-operate-dialog__grid {
grid-template-columns: 1fr;
}
}
:deep(.personal-item-operate-dialog__date-picker.el-date-editor.el-input) {
width: 100%;
}
</style>

View File

@@ -0,0 +1,111 @@
<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { fetchGetObjectStatusModelPage } from '@/service/api';
import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';
import { personalItemStatusOptions } from './personal-item-shared';
defineOptions({ name: 'PersonalItemSearch' });
const emit = defineEmits<{
reset: [];
search: [];
}>();
const model = defineModel<Api.PersonalItem.PersonalItemSearchParams>('model', {
required: true
});
const searchModel = reactive<{
keyword: string;
statusCode?: Api.PersonalItem.PersonalItemStatusCode;
}>({
keyword: '',
statusCode: undefined
});
let syncingFromSource = false;
const statusOptions = ref<Array<{ label: string; value: string }>>([...personalItemStatusOptions]);
watch(
() => [model.value.keyword, model.value.statusCode] as const,
([keyword, statusCode]) => {
syncingFromSource = true;
searchModel.keyword = keyword ?? '';
searchModel.statusCode = statusCode;
syncingFromSource = false;
},
{ immediate: true, flush: 'sync' }
);
watch(
() => [searchModel.keyword, searchModel.statusCode] as const,
([keyword, statusCode]) => {
if (syncingFromSource) {
return;
}
model.value.keyword = keyword.trim() || undefined;
model.value.statusCode = statusCode;
},
{ flush: 'sync' }
);
const fields = computed<SearchField[]>(() => [
{
key: 'keyword',
label: '关键字',
type: 'input',
placeholder: '请输入标题或说明'
},
{
key: 'statusCode',
label: '状态',
type: 'select',
placeholder: '请选择状态',
options: statusOptions.value
}
]);
async function loadStatusOptions() {
const { error, data } = await fetchGetObjectStatusModelPage({
pageNo: 1,
pageSize: 100,
objectType: 'task',
status: 0,
initialFlag: undefined,
terminalFlag: undefined,
keyword: undefined
});
if (error || !data?.list?.length) {
statusOptions.value = [...personalItemStatusOptions];
return;
}
statusOptions.value = data.list
.slice()
.sort((left, right) => left.sort - right.sort)
.map(item => ({
label: item.statusName,
value: item.statusCode
}));
}
function handleReset() {
emit('reset');
}
function handleSearch() {
emit('search');
}
onMounted(() => {
loadStatusOptions();
});
</script>
<template>
<TableSearchFields v-model="searchModel" :fields="fields" :columns="3" @reset="handleReset" @search="handleSearch" />
</template>
<style scoped></style>

View File

@@ -0,0 +1,105 @@
import dayjs from 'dayjs';
import { getPersonalItemStatusTagType } from '@/constants/status-tag';
export const personalItemStatusOptions = [
{ label: '待处理', value: 'pending' as const },
{ label: '进行中', value: 'active' as const },
{ label: '已完成', value: 'completed' as const }
];
const personalItemStatusLabelMap: Record<Api.PersonalItem.PersonalItemStatusCode, string> = {
pending: '待开始',
active: '进行中',
paused: '已暂停',
completed: '已完成',
cancelled: '已取消'
};
export function getPersonalItemStatusLabel(statusCode: Api.PersonalItem.PersonalItemStatusCode | null | undefined) {
if (!statusCode) {
return '--';
}
return personalItemStatusLabelMap[statusCode] || '--';
}
export function resolvePersonalItemStatusTagType(
statusCode: Api.PersonalItem.PersonalItemStatusCode | null | undefined
) {
return getPersonalItemStatusTagType(statusCode);
}
export function formatPersonalItemDate(value: string | null | undefined) {
if (!value) {
return '--';
}
const target = dayjs(value);
if (!target.isValid()) {
return '--';
}
return target.format('YYYY-MM-DD');
}
export function formatPersonalItemDateTime(value: string | null | undefined) {
if (!value) {
return '--';
}
const target = dayjs(value);
if (!target.isValid()) {
return '--';
}
return target.format('YYYY-MM-DD HH:mm:ss');
}
export function formatPersonalItemProgress(value: number | null | undefined) {
if (typeof value !== 'number' || !Number.isFinite(value)) {
return '0%';
}
const normalized = Math.round(Math.min(100, Math.max(0, value)) * 100) / 100;
return `${normalized}%`;
}
export function formatPersonalItemName(value: string | null | undefined) {
return value?.trim() || '--';
}
export function formatPersonalItemOwnerName(
item: Pick<Api.PersonalItem.PersonalItem, 'ownerNickname' | 'ownerName' | 'ownerId'>
) {
return item.ownerNickname?.trim() || item.ownerName?.trim() || item.ownerId || '--';
}
export function formatPersonalItemDateRange(start: string | null | undefined, end: string | null | undefined) {
const startText = formatPersonalItemDate(start);
const endText = formatPersonalItemDate(end);
if (startText === '--' && endText === '--') {
return '--';
}
return `${startText} ~ ${endText}`;
}
export function isEmptyRichText(html: string | null | undefined) {
if (!html) {
return true;
}
const text = html
.replace(/<[^>]+>/g, '')
.replace(/&nbsp;/g, '')
.trim();
if (text) {
return false;
}
return !/<img\b/i.test(html);
}

View File

@@ -0,0 +1,73 @@
<script setup lang="ts">
import { computed, nextTick, reactive, watch } from 'vue';
import { useForm, useFormRules } from '@/hooks/common/form';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
defineOptions({ name: 'PersonalItemStatusActionDialog' });
interface Props {
action: Api.PersonalItem.PersonalItemLifecycleAction | null;
}
interface Emits {
(e: 'submit', reason: string | null): void;
}
const props = defineProps<Props>();
const emit = defineEmits<Emits>();
const visible = defineModel<boolean>('visible', {
default: false
});
const { formRef, validate } = useForm();
const { createRequiredRule } = useFormRules();
const model = reactive({
reason: ''
});
const rules = computed(
() =>
({
reason: props.action?.needReason ? [createRequiredRule('请输入动作原因')] : []
}) satisfies Record<string, App.Global.FormRule[]>
);
async function handleConfirm() {
await validate();
emit('submit', model.reason.trim() || null);
}
watch(
() => visible.value,
async value => {
if (!value) {
return;
}
model.reason = '';
await nextTick();
formRef.value?.clearValidate();
}
);
</script>
<template>
<BusinessFormDialog v-model="visible" :title="action?.actionName || '状态变更'" preset="sm" @confirm="handleConfirm">
<ElForm ref="formRef" :model="model" :rules="rules" label-position="top" :validate-on-rule-change="false">
<ElFormItem label="动作原因" prop="reason">
<ElInput
v-model="model.reason"
type="textarea"
:rows="4"
maxlength="500"
show-word-limit
:placeholder="action?.needReason ? '请输入动作原因' : '可选填写动作原因'"
/>
</ElFormItem>
</ElForm>
</BusinessFormDialog>
</template>
<style scoped></style>

View File

@@ -1,14 +1,13 @@
<script setup lang="ts">
import { computed, onActivated, onMounted, ref } from 'vue';
import { userGenderRecord } from '@/constants/business';
import { fetchGetMyProfileDetail, fetchUpdateMyProfile } from '@/service/api';
import { buildFileProxyUrl, uploadFile } from '@/service/api/file';
import { fetchGetMyProfileDetail, fetchUpdateMyAvatar } from '@/service/api';
import { useAuthStore } from '@/store/modules/auth';
import { useAppStore } from '@/store/modules/app';
import { $t } from '@/locales';
import ProfileInfoDialog from './modules/profile-info-dialog.vue';
import ProfilePasswordDialog from './modules/profile-password-dialog.vue';
import { buildProfileUpdatePayload, formatProfileDateTime, resolveProfileRoleLabels } from './modules/profile-model';
import { formatProfileDateTime, resolveProfileRoleLabels } from './modules/profile-model';
defineOptions({ name: 'MyProfile' });
@@ -22,6 +21,8 @@ const profileInfoVisible = ref(false);
const passwordVisible = ref(false);
const avatarInputRef = ref<HTMLInputElement | null>(null);
const MAX_AVATAR_SIZE = 5 * 1024 * 1024;
const descriptionColumns = computed(() => (appStore.isMobile ? 1 : 2));
const displayName = computed(() => profile.value?.nickname?.trim() || profile.value?.username || '--');
const displayUsername = computed(() => profile.value?.username?.trim() || '--');
@@ -41,6 +42,7 @@ const genderText = computed(() => {
return $t(userGenderRecord[value]);
});
const roleLabels = computed(() => {
const roles = profile.value?.roles ?? [];
@@ -57,16 +59,6 @@ function getAvatarText() {
return name === '--' ? 'CN' : name.slice(0, 1).toUpperCase();
}
function getEditableProfileValues(current: Api.Auth.MyProfileDetail): Api.Auth.UpdateMyProfileParams {
return {
nickname: current.nickname ?? '',
email: current.email ?? '',
mobile: current.mobile ?? '',
sex: current.sex ?? 1,
avatar: current.avatar ?? ''
};
}
async function loadProfile() {
const userId = authStore.userInfo.userId;
@@ -75,9 +67,7 @@ async function loadProfile() {
return;
}
const { data, error } = await fetchGetMyProfileDetail({
userId
});
const { data, error } = await fetchGetMyProfileDetail({ userId });
if (!error) {
profile.value = data;
@@ -115,21 +105,14 @@ async function handleAvatarChange(event: Event) {
return;
}
avatarSubmitting.value = true;
const uploadResult = await uploadFile(file, 'avatar');
if (uploadResult.error) {
avatarSubmitting.value = false;
if (file.size > MAX_AVATAR_SIZE) {
window.$message?.error('头像图片大小不能超过 5MB');
return;
}
const avatar = buildFileProxyUrl(uploadResult.data.configId, uploadResult.data.path);
const payload = buildProfileUpdatePayload({
...getEditableProfileValues(profile.value),
avatar
});
const updateResult = await fetchUpdateMyProfile(payload);
avatarSubmitting.value = true;
const updateResult = await fetchUpdateMyAvatar(file);
avatarSubmitting.value = false;
@@ -212,7 +195,7 @@ onActivated(() => {
<ElDescriptions :column="descriptionColumns" border>
<ElDescriptionsItem label="用户名">{{ displayUsername }}</ElDescriptionsItem>
<ElDescriptionsItem label="称">{{ displayName }}</ElDescriptionsItem>
<ElDescriptionsItem label="称">{{ displayName }}</ElDescriptionsItem>
<ElDescriptionsItem label="手机号">{{ mobileText }}</ElDescriptionsItem>
<ElDescriptionsItem label="邮箱">{{ emailText }}</ElDescriptionsItem>
<ElDescriptionsItem label="性别">{{ genderText }}</ElDescriptionsItem>

View File

@@ -0,0 +1,401 @@
<script setup lang="tsx">
import { computed, markRaw, reactive, ref } from 'vue';
import { ElButton, ElMessageBox, ElTag } from 'element-plus';
import dayjs from 'dayjs';
import {
fetchCancelOvertimeApplication,
fetchDeleteOvertimeApplication,
fetchExportOvertimeApplications,
fetchGetOvertimeApplicationPage
} from '@/service/api';
import { useUIPaginatedTable } from '@/hooks/common/table';
import BusinessTableActionCell, { type BusinessTableAction } from '@/components/custom/business-table-action-cell';
import OvertimeApplicationActionDialog from './modules/overtime-application-action-dialog.vue';
import OvertimeApplicationDetailDialog from './modules/overtime-application-detail-dialog.vue';
import OvertimeApplicationOperateDialog from './modules/overtime-application-operate-dialog.vue';
import OvertimeApplicationSearch from './modules/overtime-application-search.vue';
import OvertimeApplicationStatusLogDialog from './modules/overtime-application-status-log-dialog.vue';
import {
downloadBlob,
formatEmptyText,
formatOvertimeDate,
formatOvertimeDateTime,
getOvertimeApplicationStatusLabel,
resolveOvertimeApplicationStatusTagType
} from './modules/overtime-application-shared';
import IconMdiCloseCircleOutline from '~icons/mdi/close-circle-outline';
import IconMdiDeleteOutline from '~icons/mdi/delete-outline';
import IconMdiEyeOutline from '~icons/mdi/eye-outline';
import IconMdiHistory from '~icons/mdi/history';
import IconMdiPencilOutline from '~icons/mdi/pencil-outline';
defineOptions({ name: 'OvertimeApplication' });
type OvertimeApplicationPageResponse = Awaited<ReturnType<typeof fetchGetOvertimeApplicationPage>>;
type ActionType = 'cancel';
function getInitSearchParams(): Api.OvertimeApplication.OvertimeApplicationSearchParams {
return {
pageNo: 1,
pageSize: 10,
keyword: undefined,
applicantName: undefined,
approverId: undefined,
approverName: undefined,
statusCode: undefined,
overtimeDate: undefined,
createTime: undefined
};
}
function transformPageResult(response: OvertimeApplicationPageResponse, pageNo: number, pageSize: number) {
if (!response.error && response.data) {
return {
data: response.data.list,
pageNum: pageNo,
pageSize,
total: response.data.total
};
}
return {
data: [],
pageNum: 1,
pageSize,
total: 0
};
}
const searchParams = reactive(getInitSearchParams());
const operateVisible = ref(false);
const detailVisible = ref(false);
const statusLogVisible = ref(false);
const actionVisible = ref(false);
const operateType = ref<'add' | 'edit'>('add');
const currentRow = ref<Api.OvertimeApplication.OvertimeApplication | null>(null);
const currentActionType = ref<ActionType>('cancel');
const actionSubmitting = ref(false);
const exporting = ref(false);
const ACTION_ICON_MAP = {
detail: markRaw(IconMdiEyeOutline),
statusLog: markRaw(IconMdiHistory),
edit: markRaw(IconMdiPencilOutline),
cancel: markRaw(IconMdiCloseCircleOutline),
delete: markRaw(IconMdiDeleteOutline)
};
const { columns, columnChecks, data, loading, getDataByPage, mobilePagination } = useUIPaginatedTable<
OvertimeApplicationPageResponse,
Api.OvertimeApplication.OvertimeApplication
>({
paginationProps: {
currentPage: searchParams.pageNo,
pageSize: searchParams.pageSize
},
api: () => fetchGetOvertimeApplicationPage(searchParams),
transform: response => transformPageResult(response, searchParams.pageNo ?? 1, searchParams.pageSize ?? 10),
onPaginationParamsChange: params => {
searchParams.pageNo = params.currentPage ?? 1;
searchParams.pageSize = params.pageSize ?? 10;
},
columns: () => [
{ prop: 'index', type: 'index', label: '序号', width: 64 },
{ prop: 'applicantName', label: '申请人', minWidth: 120, showOverflowTooltip: true },
{
prop: 'overtimeDate',
label: '加班日期',
width: 120,
formatter: row => formatOvertimeDate(row.overtimeDate)
},
{ prop: 'overtimeDuration', label: '加班时长', width: 110, showOverflowTooltip: true },
{
prop: 'overtimeReason',
label: '加班原因',
minWidth: 180,
showOverflowTooltip: true,
formatter: row => formatEmptyText(row.overtimeReason)
},
{
prop: 'overtimeContent',
label: '加班内容',
minWidth: 200,
showOverflowTooltip: true,
formatter: row => formatEmptyText(row.overtimeContent)
},
{
prop: 'statusCode',
label: '状态',
width: 110,
align: 'center',
formatter: row => (
<ElTag type={resolveOvertimeApplicationStatusTagType(row.statusCode)}>
{getOvertimeApplicationStatusLabel(row.statusCode, row.statusName)}
</ElTag>
)
},
{ prop: 'approverName', label: '审核人', minWidth: 120, showOverflowTooltip: true },
{
prop: 'submitTime',
label: '提交时间',
minWidth: 170,
formatter: row => formatOvertimeDateTime(row.submitTime)
},
{
prop: 'approvalTime',
label: '审核时间',
minWidth: 170,
formatter: row => formatOvertimeDateTime(row.approvalTime)
},
{
prop: 'operate',
label: '操作',
width: 170,
align: 'center',
fixed: 'right',
formatter: row => <BusinessTableActionCell actions={getRowActions(row)} variant="icon" />
}
]
});
const totalCount = computed(() => mobilePagination.value.total || data.value.length);
function getRowActions(row: Api.OvertimeApplication.OvertimeApplication): BusinessTableAction[] {
const actions: BusinessTableAction[] = [
{
key: 'detail',
label: '详情',
buttonType: 'primary',
icon: ACTION_ICON_MAP.detail,
onClick: () => openDetail(row)
}
];
if ((row.statusCode === 'rejected' || row.statusCode === 'cancelled') && row.allowEdit) {
actions.push({
key: 'edit',
label: '修改',
buttonType: 'primary',
icon: ACTION_ICON_MAP.edit,
onClick: () => openEdit(row)
});
}
actions.push({
key: 'status-log',
label: '状态日志',
buttonType: 'info',
icon: ACTION_ICON_MAP.statusLog,
onClick: () => openStatusLog(row)
});
if (row.statusCode === 'pending') {
actions.push({
key: 'cancel',
label: '撤销',
buttonType: 'danger',
icon: ACTION_ICON_MAP.cancel,
onClick: () => openCancel(row)
});
}
if (row.statusCode === 'cancelled') {
actions.push({
key: 'delete',
label: '删除',
buttonType: 'danger',
icon: ACTION_ICON_MAP.delete,
onClick: () => handleDelete(row)
});
}
return actions;
}
function openAdd() {
operateType.value = 'add';
currentRow.value = null;
operateVisible.value = true;
}
function openEdit(row: Api.OvertimeApplication.OvertimeApplication) {
operateType.value = 'edit';
currentRow.value = row;
operateVisible.value = true;
}
function openDetail(row: Api.OvertimeApplication.OvertimeApplication) {
currentRow.value = row;
detailVisible.value = true;
}
function openStatusLog(row: Api.OvertimeApplication.OvertimeApplication) {
currentRow.value = row;
statusLogVisible.value = true;
}
function openCancel(row: Api.OvertimeApplication.OvertimeApplication) {
currentRow.value = row;
currentActionType.value = 'cancel';
actionVisible.value = true;
}
async function reloadTable(page = searchParams.pageNo ?? 1) {
await getDataByPage(page);
}
function resetSearchParams() {
const pageSize = searchParams.pageSize ?? 10;
Object.assign(searchParams, getInitSearchParams(), { pageSize });
reloadTable(1);
}
function handleSearch() {
reloadTable(1);
}
function handleSubmitted() {
operateVisible.value = false;
reloadTable(searchParams.pageNo ?? 1);
}
async function handleActionSubmit(reason: string | null) {
if (!currentRow.value) {
return;
}
actionSubmitting.value = true;
const { error } = await fetchCancelOvertimeApplication(currentRow.value.id, { reason });
actionSubmitting.value = false;
if (error) {
return;
}
actionVisible.value = false;
window.$message?.success('加班申请已撤销');
await reloadTable(searchParams.pageNo ?? 1);
}
async function handleDelete(row: Api.OvertimeApplication.OvertimeApplication) {
try {
await ElMessageBox.confirm(
`确定删除 ${row.applicantName} ${formatOvertimeDate(row.overtimeDate)} 的加班申请吗?`,
'删除确认',
{
type: 'warning',
confirmButtonText: '确定',
cancelButtonText: '取消'
}
);
} catch {
return;
}
const { error } = await fetchDeleteOvertimeApplication(row.id);
if (error) {
return;
}
window.$message?.success('加班申请已删除');
await reloadTable(searchParams.pageNo ?? 1);
}
async function handleExport() {
exporting.value = true;
const { error, data: blob } = await fetchExportOvertimeApplications(searchParams);
exporting.value = false;
if (error || !blob) {
return;
}
downloadBlob(blob, `加班申请_${dayjs().format('YYYY-MM-DD')}.xls`);
}
</script>
<template>
<div class="flex-col-stretch gap-16px overflow-hidden">
<OvertimeApplicationSearch v-model:model="searchParams" @reset="resetSearchParams" @search="handleSearch" />
<ElCard class="flex-1-hidden card-wrapper" body-class="business-table-card-body">
<template #header>
<div class="flex flex-wrap items-center justify-between gap-12px">
<div class="flex items-center gap-10px">
<p class="text-16px font-600">加班申请</p>
<ElTag effect="plain">{{ totalCount }}</ElTag>
</div>
<TableHeaderOperation v-model:columns="columnChecks" :loading="loading" @refresh="reloadTable">
<template #default>
<ElButton plain :loading="exporting" @click="handleExport">
<template #icon>
<icon-mdi-download class="text-icon" />
</template>
导出
</ElButton>
<ElButton plain type="primary" @click="openAdd">
<template #icon>
<icon-ic-round-plus class="text-icon" />
</template>
新增
</ElButton>
</template>
</TableHeaderOperation>
</div>
</template>
<div class="flex-1">
<ElTable v-loading="loading" height="100%" border row-key="id" :data="data">
<template v-for="col in columns" :key="String(col.prop)">
<ElTableColumn v-bind="col" />
</template>
</ElTable>
</div>
<div class="mt-20px flex justify-end">
<ElPagination
v-if="mobilePagination.total"
layout="total,prev,pager,next,sizes"
v-bind="mobilePagination"
@current-change="mobilePagination['current-change']"
@size-change="mobilePagination['size-change']"
/>
</div>
</ElCard>
<OvertimeApplicationOperateDialog
v-model:visible="operateVisible"
:operate-type="operateType"
:row-data="currentRow"
@submitted="handleSubmitted"
/>
<OvertimeApplicationDetailDialog v-model:visible="detailVisible" :row-data="currentRow" />
<OvertimeApplicationStatusLogDialog v-model:visible="statusLogVisible" :row-data="currentRow" />
<OvertimeApplicationActionDialog
v-model:visible="actionVisible"
:action-type="currentActionType"
:loading="actionSubmitting"
@submit="handleActionSubmit"
/>
</div>
</template>
<style scoped>
:deep(.overtime-application__reason-link) {
max-width: 100%;
padding: 0;
vertical-align: baseline;
}
:deep(.overtime-application__reason-link > span) {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

View File

@@ -0,0 +1,121 @@
<script setup lang="ts">
import { computed, nextTick, reactive, watch } from 'vue';
import { useForm, useFormRules } from '@/hooks/common/form';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
defineOptions({ name: 'OvertimeApplicationActionDialog' });
type ActionType = 'approve' | 'reject' | 'cancel';
interface Props {
actionType: ActionType;
loading?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
loading: false
});
const emit = defineEmits<{
submit: [reason: string | null];
}>();
const visible = defineModel<boolean>('visible', {
default: false
});
const { formRef, validate } = useForm();
const { createRequiredRule } = useFormRules();
const model = reactive({
reason: ''
});
const title = computed(() => {
const map: Record<ActionType, string> = {
approve: '通过加班申请',
reject: '退回加班申请',
cancel: '撤销加班申请'
};
return map[props.actionType];
});
const reasonLabel = computed(() => {
const map: Record<ActionType, string> = {
approve: '审核意见',
reject: '退回原因',
cancel: '撤销原因'
};
return map[props.actionType];
});
const reasonRequired = computed(() => props.actionType === 'reject');
const reasonPlaceholder = computed(() => {
if (reasonRequired.value) {
return `请输入${reasonLabel.value}`;
}
return props.actionType === 'cancel' ? '可填写撤销原因' : '可填写审核意见';
});
const rules = computed(() => ({
reason: reasonRequired.value
? [
createRequiredRule(`请输入${reasonLabel.value}`),
{
validator: (_rule, value: string, callback) => {
if (!value?.trim()) {
callback(new Error(`请输入${reasonLabel.value}`));
return;
}
callback();
},
trigger: 'blur'
}
]
: []
}));
async function handleSubmit() {
await validate();
emit('submit', model.reason.trim() || null);
}
watch(
() => visible.value,
async value => {
if (value) {
model.reason = '';
await nextTick();
formRef.value?.clearValidate();
}
}
);
</script>
<template>
<BusinessFormDialog
v-model="visible"
:title="title"
preset="sm"
:confirm-loading="props.loading"
@confirm="handleSubmit"
>
<ElForm ref="formRef" :model="model" :rules="rules" label-position="top" :validate-on-rule-change="false">
<ElFormItem :label="reasonLabel" prop="reason">
<ElInput
v-model="model.reason"
type="textarea"
:rows="5"
maxlength="1000"
show-word-limit
:placeholder="reasonPlaceholder"
/>
</ElFormItem>
</ElForm>
</BusinessFormDialog>
</template>

View File

@@ -0,0 +1,97 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { fetchGetOvertimeApplicationDetail } from '@/service/api';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import {
formatEmptyText,
formatOvertimeDate,
formatOvertimeDateTime,
getOvertimeApplicationStatusLabel,
resolveOvertimeApplicationStatusTagType
} from './overtime-application-shared';
defineOptions({ name: 'OvertimeApplicationDetailDialog' });
interface Props {
rowData?: Api.OvertimeApplication.OvertimeApplication | null;
}
const props = defineProps<Props>();
const visible = defineModel<boolean>('visible', {
default: false
});
const loading = ref(false);
const detailData = ref<Api.OvertimeApplication.OvertimeApplication | null>(null);
const statusTagType = computed(() => resolveOvertimeApplicationStatusTagType(detailData.value?.statusCode));
const statusLabel = computed(() =>
getOvertimeApplicationStatusLabel(detailData.value?.statusCode, detailData.value?.statusName)
);
async function loadDetail() {
if (!props.rowData?.id) {
detailData.value = null;
return;
}
loading.value = true;
const { error, data } = await fetchGetOvertimeApplicationDetail(props.rowData.id);
loading.value = false;
detailData.value = error || !data ? props.rowData : data;
}
watch(
() => visible.value,
value => {
if (value) {
loadDetail();
}
}
);
</script>
<template>
<BusinessFormDialog v-model="visible" title="加班申请详情" preset="md" :loading="loading" :show-footer="false">
<ElDescriptions v-if="detailData" :column="2" border>
<ElDescriptionsItem label="状态">
<ElTag :type="statusTagType">{{ statusLabel }}</ElTag>
</ElDescriptionsItem>
<ElDescriptionsItem label="申请人">
{{ detailData.applicantName }}
</ElDescriptionsItem>
<ElDescriptionsItem label="加班日期">{{ formatOvertimeDate(detailData.overtimeDate) }}</ElDescriptionsItem>
<ElDescriptionsItem label="加班时长">{{ detailData.overtimeDuration }}</ElDescriptionsItem>
<ElDescriptionsItem label="审核人">
{{ detailData.approverName }}
</ElDescriptionsItem>
<ElDescriptionsItem label="提交时间">{{ formatOvertimeDateTime(detailData.submitTime) }}</ElDescriptionsItem>
<ElDescriptionsItem label="审核时间">{{ formatOvertimeDateTime(detailData.approvalTime) }}</ElDescriptionsItem>
<ElDescriptionsItem label="审核意见">{{ formatEmptyText(detailData.approvalComment) }}</ElDescriptionsItem>
<ElDescriptionsItem label="加班原因" :span="2">{{ detailData.overtimeReason }}</ElDescriptionsItem>
<ElDescriptionsItem label="加班内容" :span="2">{{ detailData.overtimeContent }}</ElDescriptionsItem>
</ElDescriptions>
<ElEmpty v-else description="未获取到加班申请详情" />
</BusinessFormDialog>
</template>
<style scoped>
:deep(.overtime-application-detail-dialog__readonly-input .el-input__wrapper) {
background: linear-gradient(180deg, rgb(241 245 249 / 98%), rgb(226 232 240 / 94%)), rgb(241 245 249);
box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
cursor: default;
}
:deep(.overtime-application-detail-dialog__readonly-input .el-input__wrapper:hover),
:deep(.overtime-application-detail-dialog__readonly-input.is-focus .el-input__wrapper) {
box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
}
:deep(.overtime-application-detail-dialog__readonly-input .el-input__inner) {
color: rgb(51 65 85 / 96%);
cursor: default;
-webkit-text-fill-color: rgb(51 65 85 / 96%);
}
</style>

View File

@@ -0,0 +1,273 @@
<script setup lang="ts">
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { RDMS_OVERTIME_DURATION_DICT_CODE } from '@/constants/dict';
import {
fetchCreateOvertimeApplication,
fetchGetLoginUserDirectManager,
fetchGetOvertimeApplicationDetail,
fetchUpdateRejectedOvertimeApplication
} from '@/service/api';
import { useAuthStore } from '@/store/modules/auth';
import { useForm, useFormRules } from '@/hooks/common/form';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import BusinessFormSection from '@/components/custom/business-form-section.vue';
import DictSelect from '@/components/custom/dict-select.vue';
defineOptions({ name: 'OvertimeApplicationOperateDialog' });
type OperateType = 'add' | 'edit';
interface Props {
operateType: OperateType;
rowData?: Api.OvertimeApplication.OvertimeApplication | null;
}
const props = defineProps<Props>();
const emit = defineEmits<{
submitted: [];
}>();
const visible = defineModel<boolean>('visible', {
default: false
});
const authStore = useAuthStore();
const { formRef, validate } = useForm();
const { createRequiredRule } = useFormRules();
const detailLoading = ref(false);
const submitting = ref(false);
const approverName = ref('');
const currentUserName = computed(() => authStore.userInfo.nickname || authStore.userInfo.userName || '--');
const isEdit = computed(() => props.operateType === 'edit');
const title = computed(() => (isEdit.value ? '修改并重新提交' : '新增加班申请'));
const model = reactive<Api.OvertimeApplication.SaveOvertimeApplicationParams>(createDefaultModel());
const rules = computed(
() =>
({
overtimeDate: [createRequiredRule('请选择加班日期')],
overtimeDuration: [createRequiredRule('请选择加班时长')],
overtimeReason: [
createRequiredRule('请输入加班原因'),
{
validator: (_rule, value: string, callback) => {
if (!value?.trim()) {
callback(new Error('请输入加班原因'));
return;
}
callback();
},
trigger: 'blur'
}
],
overtimeContent: [
createRequiredRule('请输入加班内容'),
{
validator: (_rule, value: string, callback) => {
if (!value?.trim()) {
callback(new Error('请输入加班内容'));
return;
}
callback();
},
trigger: 'blur'
}
],
approverId: [createRequiredRule('请选择审核人')]
}) satisfies Record<keyof Api.OvertimeApplication.SaveOvertimeApplicationParams, App.Global.FormRule[]>
);
function createDefaultModel(): Api.OvertimeApplication.SaveOvertimeApplicationParams {
return {
overtimeDate: '',
overtimeDuration: '',
overtimeReason: '',
overtimeContent: '',
approverId: ''
};
}
async function loadDirectManagerAsDefaultApprover() {
const { error, data } = await fetchGetLoginUserDirectManager();
if (!error && data?.id) {
model.approverId = data.id;
approverName.value = data.nickname;
}
}
async function initModel() {
detailLoading.value = true;
Object.assign(model, createDefaultModel());
approverName.value = '';
if (isEdit.value && props.rowData) {
const { error, data } = await fetchGetOvertimeApplicationDetail(props.rowData.id);
const detail = error || !data ? props.rowData : data;
model.overtimeDate = detail.overtimeDate;
model.overtimeDuration = detail.overtimeDuration;
model.overtimeReason = detail.overtimeReason;
model.overtimeContent = detail.overtimeContent;
model.approverId = detail.approverId;
approverName.value = detail.approverName;
} else {
await loadDirectManagerAsDefaultApprover();
}
detailLoading.value = false;
await nextTick();
formRef.value?.clearValidate();
}
async function handleSubmit() {
await validate();
const payload: Api.OvertimeApplication.SaveOvertimeApplicationParams = {
overtimeDate: model.overtimeDate,
overtimeDuration: model.overtimeDuration,
overtimeReason: model.overtimeReason.trim(),
overtimeContent: model.overtimeContent.trim(),
approverId: model.approverId
};
submitting.value = true;
const result =
isEdit.value && props.rowData
? await fetchUpdateRejectedOvertimeApplication(props.rowData.id, payload)
: await fetchCreateOvertimeApplication(payload);
submitting.value = false;
if (result.error) {
return;
}
window.$message?.success(isEdit.value ? '加班申请已重新提交' : '加班申请已提交');
visible.value = false;
emit('submitted');
}
watch(
() => visible.value,
value => {
if (value) {
initModel();
}
}
);
</script>
<template>
<BusinessFormDialog
v-model="visible"
:title="title"
preset="md"
:loading="detailLoading"
:confirm-loading="submitting"
@confirm="handleSubmit"
>
<ElForm ref="formRef" :model="model" :rules="rules" label-position="top" :validate-on-rule-change="false">
<BusinessFormSection title="申请信息">
<ElRow :gutter="16">
<ElCol :span="12">
<ElFormItem label="申请人">
<ElInput
class="overtime-application-operate-dialog__readonly-input"
:model-value="currentUserName"
readonly
/>
</ElFormItem>
</ElCol>
<ElCol :span="12">
<ElFormItem label="审核人" prop="approverId">
<ElInput
class="overtime-application-operate-dialog__readonly-input"
:model-value="approverName"
readonly
placeholder="暂无直属上级"
/>
</ElFormItem>
</ElCol>
<ElCol :span="12">
<ElFormItem label="加班日期" prop="overtimeDate" style="width: 100%">
<ElDatePicker
v-model="model.overtimeDate"
class="w-full"
type="date"
value-format="YYYY-MM-DD"
style="width: 100%"
placeholder="请选择加班日期"
/>
</ElFormItem>
</ElCol>
<ElCol :span="12">
<ElFormItem label="加班时长" prop="overtimeDuration">
<DictSelect
v-model="model.overtimeDuration"
:dict-code="RDMS_OVERTIME_DURATION_DICT_CODE"
placeholder="请选择加班时长"
/>
</ElFormItem>
</ElCol>
</ElRow>
</BusinessFormSection>
<BusinessFormSection title="加班说明">
<ElRow :gutter="16">
<ElCol :span="24">
<ElFormItem label="加班原因" prop="overtimeReason">
<ElInput
v-model="model.overtimeReason"
type="textarea"
:rows="3"
maxlength="500"
show-word-limit
placeholder="请输入加班原因"
/>
</ElFormItem>
</ElCol>
<ElCol :span="24">
<ElFormItem label="加班内容" prop="overtimeContent">
<ElInput
v-model="model.overtimeContent"
type="textarea"
:rows="4"
maxlength="1000"
show-word-limit
placeholder="请输入加班内容"
/>
</ElFormItem>
</ElCol>
</ElRow>
</BusinessFormSection>
</ElForm>
</BusinessFormDialog>
</template>
<style scoped>
:deep(.overtime-application-operate-dialog__readonly-input .el-input__wrapper) {
background: linear-gradient(180deg, rgb(241 245 249 / 98%), rgb(226 232 240 / 94%)), rgb(241 245 249);
box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
cursor: default;
}
:deep(.overtime-application-operate-dialog__readonly-input .el-input__wrapper:hover),
:deep(.overtime-application-operate-dialog__readonly-input.is-focus .el-input__wrapper) {
box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
}
:deep(.overtime-application-operate-dialog__readonly-input .el-input__inner) {
color: rgb(51 65 85 / 96%);
cursor: default;
-webkit-text-fill-color: rgb(51 65 85 / 96%);
}
</style>

View File

@@ -0,0 +1,95 @@
<script setup lang="ts">
import { computed, reactive, watch } from 'vue';
import { RDMS_OVERTIME_APPLICATION_STATUS_DICT_CODE } from '@/constants/dict';
import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';
defineOptions({ name: 'OvertimeApplicationSearch' });
const emit = defineEmits<{
reset: [];
search: [];
}>();
const model = defineModel<Api.OvertimeApplication.OvertimeApplicationSearchParams>('model', {
required: true
});
const searchModel = reactive<Record<string, any>>({
applicantName: '',
overtimeDate: undefined,
statusCode: undefined,
approverName: ''
});
let syncingFromSource = false;
watch(
() =>
[model.value.applicantName, model.value.overtimeDate, model.value.statusCode, model.value.approverName] as const,
([applicantName, overtimeDate, statusCode, approverName]) => {
syncingFromSource = true;
searchModel.applicantName = applicantName ?? '';
searchModel.overtimeDate = overtimeDate;
searchModel.statusCode = statusCode;
searchModel.approverName = approverName ?? '';
syncingFromSource = false;
},
{ immediate: true, flush: 'sync' }
);
watch(
() =>
[searchModel.applicantName, searchModel.overtimeDate, searchModel.statusCode, searchModel.approverName] as const,
([applicantName, overtimeDate, statusCode, approverName]) => {
if (syncingFromSource) {
return;
}
model.value.applicantName = applicantName?.trim() || undefined;
model.value.overtimeDate = overtimeDate;
model.value.statusCode = statusCode;
model.value.approverName = approverName?.trim() || undefined;
},
{ flush: 'sync' }
);
const fields = computed<SearchField[]>(() => [
{
key: 'applicantName',
label: '申请人',
type: 'input',
placeholder: '请输入申请人'
},
{
key: 'overtimeDate',
label: '加班日期',
type: 'dateRange',
placeholder: '请选择加班日期'
},
{
key: 'statusCode',
label: '状态',
type: 'dict',
dictCode: RDMS_OVERTIME_APPLICATION_STATUS_DICT_CODE,
placeholder: '请选择状态'
},
{
key: 'approverName',
label: '审核人',
type: 'input',
placeholder: '请输入审核人'
}
]);
function handleReset() {
emit('reset');
}
function handleSearch() {
emit('search');
}
</script>
<template>
<TableSearchFields v-model="searchModel" :fields="fields" :columns="4" @reset="handleReset" @search="handleSearch" />
</template>

View File

@@ -0,0 +1,77 @@
import dayjs from 'dayjs';
import { getStatusTagType } from '@/constants/status-tag';
export const overtimeApplicationStatusOptions: Array<{
label: string;
value: Api.OvertimeApplication.OvertimeApplicationStatusCode;
}> = [
{ label: '待审批', value: 'pending' },
{ label: '已通过', value: 'approved' },
{ label: '已退回', value: 'rejected' },
{ label: '已撤销', value: 'cancelled' }
];
export const overtimeApplicationActionNameMap: Record<Api.OvertimeApplication.OvertimeApplicationActionType, string> = {
submit: '提交',
resubmit: '重新提交',
approve: '通过',
reject: '退回',
cancel: '撤销'
};
export function getOvertimeApplicationStatusLabel(statusCode?: string | null, statusName?: string | null) {
if (statusName) {
return statusName;
}
return overtimeApplicationStatusOptions.find(item => item.value === statusCode)?.label || statusCode || '--';
}
export function resolveOvertimeApplicationStatusTagType(statusCode?: string | null) {
return getStatusTagType('overtimeApplication', statusCode);
}
export function getOvertimeApplicationActionLabel(actionType?: string | null) {
if (!actionType) {
return '--';
}
return (
overtimeApplicationActionNameMap[actionType as Api.OvertimeApplication.OvertimeApplicationActionType] || actionType
);
}
export function formatOvertimeDate(value?: string | null) {
if (!value) {
return '--';
}
const target = dayjs(value);
return target.isValid() ? target.format('YYYY-MM-DD') : value;
}
export function formatOvertimeDateTime(value?: string | null) {
if (!value) {
return '--';
}
const target = dayjs(value);
return target.isValid() ? target.format('YYYY-MM-DD HH:mm:ss') : value;
}
export function formatEmptyText(value?: string | null) {
return value?.trim() || '--';
}
export function downloadBlob(blob: Blob, fileName: string) {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = fileName;
link.click();
URL.revokeObjectURL(url);
}

View File

@@ -0,0 +1,89 @@
<script setup lang="tsx">
import { ref, watch } from 'vue';
import { ElTag } from 'element-plus';
import { fetchGetOvertimeApplicationStatusLogs } from '@/service/api';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import {
formatEmptyText,
formatOvertimeDate,
formatOvertimeDateTime,
getOvertimeApplicationActionLabel,
getOvertimeApplicationStatusLabel,
resolveOvertimeApplicationStatusTagType
} from './overtime-application-shared';
defineOptions({ name: 'OvertimeApplicationStatusLogDialog' });
interface Props {
rowData?: Api.OvertimeApplication.OvertimeApplication | null;
}
const props = defineProps<Props>();
const visible = defineModel<boolean>('visible', {
default: false
});
const loading = ref(false);
const logs = ref<Api.OvertimeApplication.OvertimeApplicationStatusLog[]>([]);
async function loadLogs() {
if (!props.rowData?.id) {
logs.value = [];
return;
}
loading.value = true;
const { error, data } = await fetchGetOvertimeApplicationStatusLogs(props.rowData.id);
loading.value = false;
logs.value = error || !data ? [] : data;
}
function renderStatus(code?: string | null) {
if (!code) {
return '--';
}
return <ElTag type={resolveOvertimeApplicationStatusTagType(code)}>{getOvertimeApplicationStatusLabel(code)}</ElTag>;
}
watch(
() => visible.value,
value => {
if (value) {
loadLogs();
}
}
);
</script>
<template>
<BusinessFormDialog
v-model="visible"
title="状态日志"
width="920px"
:loading="loading"
:show-footer="false"
max-body-height="72vh"
>
<ElTable border :data="logs">
<ElTableColumn prop="createTime" label="操作时间" width="170">
<template #default="{ row }">{{ formatOvertimeDateTime(row.createTime) }}</template>
</ElTableColumn>
<ElTableColumn prop="actionType" label="动作" width="110">
<template #default="{ row }">{{ getOvertimeApplicationActionLabel(row.actionType) }}</template>
</ElTableColumn>
<ElTableColumn prop="operatorName" label="操作人" width="120" show-overflow-tooltip />
<ElTableColumn prop="fromStatus" label="原状态" width="110" :formatter="row => renderStatus(row.fromStatus)" />
<ElTableColumn prop="toStatus" label="新状态" width="110" :formatter="row => renderStatus(row.toStatus)" />
<ElTableColumn prop="reason" label="原因/意见" min-width="180" show-overflow-tooltip>
<template #default="{ row }">{{ formatEmptyText(row.reason) }}</template>
</ElTableColumn>
<ElTableColumn prop="overtimeDateSnapshot" label="加班日期" width="120">
<template #default="{ row }">{{ formatOvertimeDate(row.overtimeDateSnapshot) }}</template>
</ElTableColumn>
<ElTableColumn prop="overtimeDurationSnapshot" label="时长" width="90" show-overflow-tooltip />
</ElTable>
</BusinessFormDialog>
</template>

View File

@@ -49,15 +49,6 @@ export interface ProductHomepageTimelineItem {
tone: 'sky' | 'emerald' | 'amber' | 'rose' | 'slate';
}
export interface ProductRequirementPoolSummarySource {
total: number;
todo: number;
analyzing: number;
planned: number;
done: number;
highPriorityTodo: number;
}
export interface ProductRequirementPoolSummary {
metrics: ProductHomepageMetric[];
distribution: Array<{
@@ -67,22 +58,16 @@ export interface ProductRequirementPoolSummary {
total: number;
todo: number;
highPriorityTodo: number;
}
export interface ProductRequirementPoolRecentChangeSource {
id: string;
title: string;
actionLabel: string;
time: string;
statusLabel: string;
completionRate: number;
}
export interface ProductRequirementPoolRecentChange {
id: string;
title: string;
actionType: Api.Product.ProductRequirementDashboardRecentChangeActionType;
actionLabel: string;
time: string;
statusLabel: string;
content: string;
}
export interface ProductHomepageExtensionModule {
@@ -182,19 +167,20 @@ function resolveLatestTimelineTime(
}
export function buildRequirementPoolSummary(
source: ProductRequirementPoolSummarySource | null | undefined
source: Api.Product.ProductRequirementDashboardSummary | null | undefined
): ProductRequirementPoolSummary {
const total = normalizeCount(source?.total);
const todo = normalizeCount(source?.todo);
const analyzing = normalizeCount(source?.analyzing);
const planned = normalizeCount(source?.planned);
const done = normalizeCount(source?.done);
const pendingClaim = normalizeCount(source?.pendingClaim);
const pendingReview = normalizeCount(source?.pendingReview);
const pendingDispatch = normalizeCount(source?.pendingDispatch);
const completionRate = Math.min(100, normalizeCount(source?.completionRate));
const highPriorityTodo = normalizeCount(source?.highPriorityTodo);
const distribution = [
{ label: '待处理', value: String(todo) },
{ label: '分析中', value: String(analyzing) },
{ label: '已规划', value: String(planned) },
{ label: '已完成', value: String(done) }
{ label: '待处理', value: String(todo) },
{ label: '等待认领', value: String(pendingClaim) },
{ label: '等待评审', value: String(pendingReview) },
{ label: '等待指派', value: String(pendingDispatch) }
];
return {
@@ -212,30 +198,35 @@ export function buildRequirementPoolSummary(
{
label: '待处理',
value: String(todo),
hint: '等待进入分析或分派的需求数量'
hint: '等待认领、评审、指派的需求,这些需求应该着重关注'
},
{
label: '高优先级待处理',
value: String(highPriorityTodo),
hint: '需要优先推进的待处理需求数量'
hint: '需要优先推进的待处理需求数量P0、P1类型的需求'
}
],
distribution,
total,
todo,
highPriorityTodo
highPriorityTodo,
completionRate
};
}
export function buildRequirementPoolRecentChanges(
source: readonly ProductRequirementPoolRecentChangeSource[] | null | undefined
source: readonly Api.Product.ProductRequirementDashboardRecentChange[] | null | undefined
) {
return [...(source || [])]
.filter(item => getTimeValue(item.time) > 0)
.sort((left, right) => getTimeValue(right.time) - getTimeValue(left.time))
.filter(item => getTimeValue(item.occurredAt) > 0)
.sort((left, right) => getTimeValue(right.occurredAt) - getTimeValue(left.occurredAt))
.map(item => ({
...item,
time: formatDateTime(item.time)
id: item.id,
title: item.title,
actionType: item.actionType,
actionLabel: item.actionLabel,
content: item.content,
time: formatDateTime(item.occurredAt)
})) satisfies ProductRequirementPoolRecentChange[];
}
@@ -368,7 +359,7 @@ function buildProductHomepageBannerMetrics(source: ProductHomepageBannerSource)
{
label: '待处理需求',
value: String(requirementSummary.todo),
hint: '等待进入分析或分派的需求数量'
hint: '需要进行认领、评审、指派的需求,这些需求应该着重关注'
},
{
label: '最近动态时间',

View File

@@ -1,7 +1,12 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { RDMS_OBJECT_DIRECTION_DICT_CODE } from '@/constants/dict';
import { fetchGetProduct, fetchGetProductMembers, fetchGetProductSettings } from '@/service/api';
import {
fetchGetProduct,
fetchGetProductMembers,
fetchGetProductRequirementDashboard,
fetchGetProductSettings
} from '@/service/api';
import { useDict } from '@/hooks/business/dict';
import { useCurrentProduct } from '../shared/use-current-product';
import ProductActivityTimelinePanel from './modules/product-activity-timeline-panel.vue';
@@ -11,7 +16,7 @@ import {
buildRequirementPoolSummary,
getProductHomepageExtensionModules
} from './homepage';
import { productHomepageExtensionMock, productRequirementPoolMock } from './mock';
import { productHomepageExtensionMock } from './mock';
defineOptions({ name: 'ProductDashboard' });
@@ -22,11 +27,12 @@ const pageLoading = ref(false);
const productDetail = ref<Api.Product.Product | null>(null);
const settings = ref<Api.Product.ProductSettings | null>(null);
const members = ref<Api.Product.ProductMember[]>([]);
const requirementDashboard = ref<Api.Product.ProductRequirementDashboard | null>(null);
const latestActivityTime = ref('');
const requirementPoolSummary = computed(() => buildRequirementPoolSummary(productRequirementPoolMock.summary));
const requirementPoolSummary = computed(() => buildRequirementPoolSummary(requirementDashboard.value?.summary));
const requirementPoolRecentChanges = computed(() =>
buildRequirementPoolRecentChanges(productRequirementPoolMock.recentChanges)
buildRequirementPoolRecentChanges(requirementDashboard.value?.recentChanges)
);
const homepageBanner = computed(() =>
buildProductHomepageBanner({
@@ -84,26 +90,33 @@ const kpiCards = computed<KpiCard[]>(() =>
);
const distributionIcons: Record<string, string> = {
待处理: 'mdi:timer-sand',
分析中: 'mdi:magnify-scan',
已规划: 'mdi:calendar-check-outline',
已完成: 'mdi:check-circle-outline'
待处理: 'mdi:timer-sand',
等待认领: 'mdi:magnify-scan',
等待评审: 'mdi:calendar-check-outline',
等待指派: 'mdi:check-circle-outline'
};
const distributionHints: Record<string, string> = {
等待处理: '需要执行认领、评审、指派动作的重要需求。',
等待认领: '需要执行认领动作的需求,一般来自工单流转。',
等待评审: '需要执行评审动作的需求。',
等待指派: '需要执行指派动作的需求,包括“待指派”和“已评审”两种状态。'
};
const distributionWithIcons = computed(() =>
requirementPoolSummary.value.distribution.map((item, index) => ({
...item,
icon: distributionIcons[item.label] || 'mdi:circle-outline',
hint: distributionHints[item.label] || '',
tone: ['amber', 'sky', 'violet', 'emerald'][index] || 'slate'
}))
);
const poolCompletionRate = computed(() => {
const { total, distribution } = requirementPoolSummary.value;
const done = Number(distribution.find(item => item.label === '已完成')?.value || 0);
if (!total) return 0;
return Math.min(100, Math.max(0, Math.round((done / total) * 100)));
});
function getRecentChangeClass(actionType: Api.Product.ProductRequirementDashboardRecentChangeActionType) {
return `product-overview__change--${actionType.replace(/_/g, '-')}`;
}
const poolCompletionRate = computed(() => requirementPoolSummary.value.completionRate);
const poolProgressColor = computed(() => [
{ color: '#f59e0b', percentage: 30 },
@@ -129,15 +142,17 @@ async function loadDashboardData(objectId: string) {
pageLoading.value = true;
try {
const [productResult, settingsResult, membersResult] = await Promise.all([
const [productResult, settingsResult, membersResult, requirementDashboardResult] = await Promise.all([
fetchGetProduct(objectId),
fetchGetProductSettings(objectId),
fetchGetProductMembers(objectId)
fetchGetProductMembers(objectId),
fetchGetProductRequirementDashboard(objectId)
]);
productDetail.value = productResult.error ? null : productResult.data || null;
settings.value = settingsResult.error ? null : settingsResult.data || null;
members.value = membersResult.error ? [] : membersResult.data || [];
requirementDashboard.value = requirementDashboardResult.error ? null : requirementDashboardResult.data || null;
} finally {
pageLoading.value = false;
}
@@ -150,6 +165,7 @@ watch(
productDetail.value = null;
settings.value = null;
members.value = [];
requirementDashboard.value = null;
latestActivityTime.value = '';
return;
}
@@ -291,17 +307,15 @@ watch(
</div>
<ul class="product-overview__pool-distribution">
<li
v-for="item in distributionWithIcons"
:key="item.label"
:class="`product-overview__pool-distribution-item--${item.tone}`"
>
<span class="product-overview__pool-distribution-icon">
<SvgIcon :icon="item.icon" />
</span>
<span class="product-overview__pool-distribution-label">{{ item.label }}</span>
<strong class="product-overview__pool-distribution-value">{{ item.value }}</strong>
</li>
<ElTooltip v-for="item in distributionWithIcons" :key="item.label" :content="item.hint" placement="top">
<li :class="`product-overview__pool-distribution-item--${item.tone}`">
<span class="product-overview__pool-distribution-icon">
<SvgIcon :icon="item.icon" />
</span>
<span class="product-overview__pool-distribution-label">{{ item.label }}</span>
<strong class="product-overview__pool-distribution-value">{{ item.value }}</strong>
</li>
</ElTooltip>
</ul>
</ElCard>
</section>
@@ -315,14 +329,19 @@ watch(
<SvgIcon icon="mdi:swap-horizontal-circle-outline" />
</span>
<div class="product-overview__panel-head-text">
<h3>需求池最变化</h3>
<p>需求新增状态流转关闭情况</p>
<h3>需求池最新重要变化</h3>
<p>需求新增需求删除状态流转</p>
</div>
</div>
</template>
<div v-if="requirementPoolRecentChanges.length" class="product-overview__changes-list">
<article v-for="item in requirementPoolRecentChanges" :key="item.id" class="product-overview__change">
<article
v-for="item in requirementPoolRecentChanges"
:key="item.id"
class="product-overview__change"
:class="getRecentChangeClass(item.actionType)"
>
<div class="product-overview__change-meta">
<span class="product-overview__change-action">{{ item.actionLabel }}</span>
<time class="product-overview__change-time">{{ item.time }}</time>
@@ -330,7 +349,7 @@ watch(
<strong class="product-overview__change-title">{{ item.title }}</strong>
<span class="product-overview__change-status">
<SvgIcon icon="mdi:circle-medium" />
当前状态 · {{ item.statusLabel }}
{{ item.content }}
</span>
</article>
</div>
@@ -1107,12 +1126,30 @@ watch(
background: linear-gradient(180deg, #14b8a6, #10b981);
}
.product-overview__change--delete::before {
background: linear-gradient(180deg, #b91c1c, #991b1b);
}
.product-overview__change--status-terminal::before {
background: linear-gradient(180deg, #1d4ed8, #1e40af);
}
.product-overview__change:hover {
transform: translateX(2px);
border-color: rgb(20 184 166 / 40%);
box-shadow: 0 10px 20px -16px rgb(15 118 110 / 35%);
}
.product-overview__change--delete:hover {
border-color: rgb(185 28 28 / 34%);
box-shadow: 0 10px 20px -16px rgb(153 27 27 / 30%);
}
.product-overview__change--status-terminal:hover {
border-color: rgb(29 78 216 / 34%);
box-shadow: 0 10px 20px -16px rgb(30 64 175 / 30%);
}
.product-overview__change-meta {
display: flex;
align-items: center;
@@ -1131,6 +1168,16 @@ watch(
color: #0f766e;
}
.product-overview__change--delete .product-overview__change-action {
background: rgb(185 28 28 / 10%);
color: #991b1b;
}
.product-overview__change--status-terminal .product-overview__change-action {
background: rgb(29 78 216 / 10%);
color: #1e40af;
}
.product-overview__change-time {
color: rgb(100 116 139 / 92%);
font-size: 12px;

View File

@@ -1,42 +1,4 @@
import type {
ProductHomepageExtensionModule,
ProductRequirementPoolRecentChangeSource,
ProductRequirementPoolSummarySource
} from './homepage';
export const productRequirementPoolMock = {
summary: {
total: 18,
todo: 3,
analyzing: 5,
planned: 6,
done: 4,
highPriorityTodo: 2
} satisfies ProductRequirementPoolSummarySource,
recentChanges: [
{
id: 'req-1001',
title: '支持产品资料标签归档',
actionLabel: '新增需求',
time: '2026-04-22 16:20:00',
statusLabel: '待处理'
},
{
id: 'req-1002',
title: '统一需求池状态颜色',
actionLabel: '状态流转',
time: '2026-04-23 11:00:00',
statusLabel: '分析中'
},
{
id: 'req-1003',
title: '补充对象首页需求池统计接口',
actionLabel: '关闭需求',
time: '2026-04-23 14:30:00',
statusLabel: '已完成'
}
] satisfies ProductRequirementPoolRecentChangeSource[]
};
import type { ProductHomepageExtensionModule } from './homepage';
export const productHomepageExtensionMock = [
{

View File

@@ -22,6 +22,11 @@ export interface ProductActivityTextPart {
strong?: boolean;
}
interface ActivitySummaryResult {
text: string;
parts: ProductActivityTextPart[];
}
export interface ProductActivityDisplayItem extends Api.Product.ProductActivityTimelineItem {
tagLabel: string;
timeText: string;
@@ -265,34 +270,46 @@ function buildMemberChangeSummary(
item: Api.Product.ProductActivityTimelineItem,
detailsRecord: ActivityDetailRecord | null,
operatorText: string
) {
): ActivitySummaryResult | null {
const memberName = getActivityTargetUserName(item, detailsRecord);
const roleName = getActivityTargetRoleName(item, detailsRecord);
if (!memberName) {
return '';
return null;
}
const memberDetail = roleName ? `${memberName}${roleName}` : memberName;
const prefix =
operatorText === '--' ? `执行了【${item.actionName}】:` : `${operatorText}执行了【${item.actionName}】:`;
const roleSuffix = roleName ? `${roleName}` : '';
const text = `${prefix}${memberName}${roleSuffix}`;
const parts: ProductActivityTextPart[] = [{ text: prefix }, { text: memberName, strong: true }];
return operatorText === '--'
? `执行了【${item.actionName}】:${memberDetail}`
: `${operatorText}执行了【${item.actionName}】:${memberDetail}`;
if (roleSuffix) {
parts.push({ text: roleSuffix });
}
return { text, parts };
}
function buildMemberUpdateSummary(
item: Api.Product.ProductActivityTimelineItem,
detailsRecord: ActivityDetailRecord | null,
operatorText: string
) {
): ActivitySummaryResult {
const memberName = getActivityTargetUserName(item, detailsRecord);
const roleTransitionText = getRoleTransitionText(detailsRecord);
const memberText = memberName || '成员';
const roleText = roleTransitionText ? `,角色:${roleTransitionText}` : '';
const prefix =
operatorText === '--' ? `执行了【${item.actionName}】:` : `${operatorText}执行了【${item.actionName}】:`;
const text = `${prefix}${memberText}${roleText}`;
const parts: ProductActivityTextPart[] = [{ text: prefix }, { text: memberText, strong: Boolean(memberName) }];
return operatorText === '--'
? `执行了【${item.actionName}】:${memberText}${roleText}`
: `${operatorText}执行了【${item.actionName}】:${memberText}${roleText}`;
if (roleText) {
parts.push({ text: roleText });
}
return { text, parts };
}
function buildManagerChangeSummary(detailsRecord: ActivityDetailRecord | null, operatorText: string) {
@@ -319,16 +336,20 @@ function buildManagerChangeSummary(detailsRecord: ActivityDetailRecord | null, o
return operatorText === '--' ? `变更产品经理:${transitionText}` : `${operatorText}变更产品经理:${transitionText}`;
}
function plainSummary(text: string): ActivitySummaryResult {
return { text, parts: [{ text }] };
}
function resolveDetailedSummary(
item: Api.Product.ProductActivityTimelineItem,
detailsRecord: ActivityDetailRecord | null,
texts: { operatorText: string; actionText: string }
) {
): ActivitySummaryResult {
const { operatorText, actionText } = texts;
const summaryText = item.summary?.trim() || '';
if (item.actionType === 'add_member' || item.actionType === 'remove_member') {
return buildMemberChangeSummary(item, detailsRecord, operatorText) || summaryText || actionText;
return buildMemberChangeSummary(item, detailsRecord, operatorText) || plainSummary(summaryText || actionText);
}
if (item.actionType === 'update_member') {
@@ -336,29 +357,16 @@ function resolveDetailedSummary(
}
if (!isGenericActivitySummary(summaryText, actionText)) {
return summaryText;
return plainSummary(summaryText);
}
if (item.actionType === 'change_manager') {
return buildManagerChangeSummary(detailsRecord, operatorText) || summaryText || actionText;
const managerSummary = buildManagerChangeSummary(detailsRecord, operatorText);
return plainSummary(managerSummary || summaryText || actionText);
}
return summaryText || actionText;
}
function buildProductActivityTextParts(text: string, subjectText: string): ProductActivityTextPart[] {
const normalizedSubject = subjectText.trim();
const subjectIndex = normalizedSubject ? text.indexOf(normalizedSubject) : -1;
if (subjectIndex < 0) {
return [{ text }];
}
return [
{ text: text.slice(0, subjectIndex) },
{ text: normalizedSubject, strong: true },
{ text: text.slice(subjectIndex + normalizedSubject.length) }
].filter(part => part.text);
return plainSummary(summaryText || actionText);
}
export function buildProductActivityDisplayItem(
@@ -369,18 +377,19 @@ export function buildProductActivityDisplayItem(
operatorText === '--' ? `执行了【${item.actionName}` : `${operatorText}执行了【${item.actionName}`;
const detailsRecord = parseActivityDetails(item.details);
const subjectText = isMemberActivityAction(item.actionType) ? getActivityTargetUserName(item, detailsRecord) : '';
const displaySummary =
item.type === 'status' ? actionText : resolveDetailedSummary(item, detailsRecord, { operatorText, actionText });
const compactText = displaySummary;
const summary =
item.type === 'status'
? plainSummary(actionText)
: resolveDetailedSummary(item, detailsRecord, { operatorText, actionText });
return {
...item,
tagLabel: activityTypeLabelMap[item.type],
timeText: formatProductActivityTime(item.occurredAt) || '--',
actionText,
displaySummary,
compactText,
compactTextParts: buildProductActivityTextParts(compactText, subjectText),
displaySummary: summary.text,
compactText: summary.text,
compactTextParts: summary.parts.filter(part => part.text),
operatorText,
subjectText,
reasonText: item.reason?.trim() || '',

View File

@@ -31,7 +31,7 @@ const PRODUCT_ENTRY_ROUTE_PATH = '/product/list';
function getInitSearchParams(): Api.Product.ProductSearchParams {
return {
pageNo: 1,
pageSize: 10,
pageSize: 20,
keyword: '',
directionCode: undefined,
managerUserId: undefined,
@@ -62,12 +62,12 @@ function sortManagerOptions(list: Api.SystemManage.UserSimple[]) {
return list.slice().sort((left, right) => left.nickname.localeCompare(right.nickname, 'zh-CN'));
}
function formatDateTime(value?: string | null) {
function formatDate(value?: string | null) {
if (!value) {
return '--';
}
return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
return dayjs(value).format('YYYY-MM-DD');
}
const statusNavMetas: StatusNavMeta[] = [
@@ -210,7 +210,7 @@ const { columns, columnChecks, data, loading, getDataByPage, mobilePagination }
label: '最近更新',
width: 170,
align: 'center',
formatter: row => formatDateTime(row.updateTime)
formatter: row => formatDate(row.updateTime)
}
],
immediate: false

View File

@@ -2,7 +2,7 @@
import { computed } from 'vue';
import { RDMS_OBJECT_DIRECTION_DICT_CODE } from '@/constants/dict';
import { useForm, useFormRules } from '@/hooks/common/form';
import BusinessUserSelect from '@/components/custom/business-user-select.vue';
import BusinessUserPicker from '@/components/custom/business-user-picker.vue';
import DictSelect from '@/components/custom/dict-select.vue';
defineOptions({ name: 'ProductCreateBaseForm' });
@@ -72,9 +72,10 @@ defineExpose({ validate: runValidate });
</ElCol>
<ElCol :span="12">
<ElFormItem label="产品经理" prop="managerUserId">
<BusinessUserSelect
<BusinessUserPicker
v-model="model.managerUserId"
:options="managerUserOptions"
:user-options="managerUserOptions"
title="选择产品经理"
placeholder="请选择产品经理"
/>
</ElFormItem>

View File

@@ -1,14 +1,10 @@
<script setup lang="ts">
import { computed, nextTick, reactive, watch } from 'vue';
import { PRODUCT_MANAGER_ROLE_CODE } from '@/constants/business';
import { useForm, useFormRules } from '@/hooks/common/form';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import BusinessUserSelect from '@/components/custom/business-user-select.vue';
defineOptions({ name: 'ProductCreateTeamMemberDialog' });
type OperateMode = 'create' | 'edit';
interface DraftMemberInput {
userId: string;
roleId: string;
@@ -16,22 +12,16 @@ interface DraftMemberInput {
}
interface Props {
mode: OperateMode;
initial: DraftMemberInput | null;
userOptions: Api.SystemManage.UserSimple[];
roleOptions: Api.SystemManage.RoleSimple[];
/** 已使用且不可选的 userId编辑模式应当排除当前行自身 */
disabledUserIds?: readonly string[];
}
interface Emits {
(e: 'submit', payload: DraftMemberInput): void;
}
const props = withDefaults(defineProps<Props>(), {
disabledUserIds: () => []
});
const props = defineProps<Props>();
const emit = defineEmits<Emits>();
const visible = defineModel<boolean>('visible', { default: false });
@@ -39,31 +29,21 @@ const visible = defineModel<boolean>('visible', { default: false });
const { formRef, validate } = useForm();
const { createRequiredRule } = useFormRules();
const model = reactive<DraftMemberInput>({
userId: '',
roleId: '',
remark: ''
});
const dialogTitle = computed(() => (props.mode === 'create' ? '新增团队成员' : '调整成员角色'));
const model = reactive<DraftMemberInput>({ userId: '', roleId: '', remark: '' });
const userLabelMap = computed(() => new Map(props.userOptions.map(item => [String(item.id), item.nickname])));
const selectableRoles = computed(() => props.roleOptions.filter(role => role.visible !== 0));
const rules = computed(
() =>
({
userId: props.mode === 'create' ? [createRequiredRule('请选择成员用户')] : [],
roleId: [createRequiredRule('请选择角色')]
}) satisfies Record<string, App.Global.FormRule[]>
);
function isManagerRole(role: Api.SystemManage.RoleSimple) {
return role.code === PRODUCT_MANAGER_ROLE_CODE;
}
async function handleConfirm() {
await validate();
emit('submit', {
userId: model.userId,
roleId: model.roleId,
@@ -72,34 +52,21 @@ async function handleConfirm() {
}
watch(visible, async value => {
if (!value) {
return;
}
if (!value) return;
model.userId = props.initial?.userId || '';
model.roleId = props.initial?.roleId || '';
model.remark = props.initial?.remark || '';
await nextTick();
formRef.value?.clearValidate();
});
</script>
<template>
<BusinessFormDialog v-model="visible" :title="dialogTitle" preset="sm" @confirm="handleConfirm">
<BusinessFormDialog v-model="visible" title="调整成员角色" preset="sm" @confirm="handleConfirm">
<ElForm ref="formRef" :model="model" :rules="rules" label-position="top" :validate-on-rule-change="false">
<ElRow :gutter="16">
<ElCol :span="24">
<ElFormItem v-if="mode === 'create'" label="成员用户" prop="userId">
<BusinessUserSelect
v-model="model.userId"
:options="userOptions"
:disabled-user-ids="disabledUserIds"
disabled-label="已添加"
placeholder="请选择成员用户"
/>
</ElFormItem>
<ElFormItem v-else label="成员用户">
<ElFormItem label="成员用户">
<ElInput
:model-value="userLabelMap.get(String(model.userId)) || ''"
readonly
@@ -111,17 +78,13 @@ watch(visible, async value => {
<ElCol :span="24">
<ElFormItem label="目标角色" prop="roleId">
<ElSelect v-model="model.roleId" class="w-full" placeholder="请选择角色">
<ElOption
v-for="role in roleOptions"
:key="role.id"
:label="role.name"
:value="role.id"
:disabled="isManagerRole(role)"
>
<span>{{ role.name }}</span>
<span v-if="isManagerRole(role)" class="product-create-team-member-dialog__role-hint">
已由第 1 步指定
</span>
<ElOption v-for="role in selectableRoles" :key="role.id" :label="role.name" :value="role.id">
<div class="product-create-team-member-dialog__role-option">
<span class="product-create-team-member-dialog__role-option-name">{{ role.name }}</span>
<ElTooltip v-if="role.remark" :content="role.remark" placement="right" :show-after="120">
<icon-ep:info-filled class="product-create-team-member-dialog__role-option-info" @click.stop />
</ElTooltip>
</div>
</ElOption>
</ElSelect>
</ElFormItem>
@@ -144,12 +107,6 @@ watch(visible, async value => {
</template>
<style scoped>
.product-create-team-member-dialog__role-hint {
margin-left: 8px;
color: rgb(148 163 184 / 96%);
font-size: 12px;
}
:deep(.product-create-team-member-dialog__readonly-input .el-input__wrapper) {
background: linear-gradient(180deg, rgb(241 245 249 / 98%), rgb(226 232 240 / 94%)), rgb(241 245 249);
box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
@@ -166,4 +123,31 @@ watch(visible, async value => {
-webkit-text-fill-color: rgb(51 65 85 / 96%);
cursor: default;
}
.product-create-team-member-dialog__role-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
}
.product-create-team-member-dialog__role-option-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.product-create-team-member-dialog__role-option-info {
flex-shrink: 0;
font-size: 14px;
color: var(--el-text-color-placeholder);
cursor: help;
}
.product-create-team-member-dialog__role-option-info:hover {
color: var(--el-color-primary);
}
</style>

View File

@@ -1,8 +1,9 @@
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { computed, ref, watch } from 'vue';
import { PRODUCT_MANAGER_ROLE_CODE } from '@/constants/business';
import { fetchGetRoleSimpleList } from '@/service/api';
import { getProductTeamTableHeight } from '../../setting/shared';
import ProductTeamBatchDialog, {
type BatchMemberPayload
} from '@/views/product/shared/components/product-team-batch-dialog.vue';
import ProductCreateTeamMemberDialog from './product-create-team-member-dialog.vue';
import type { ProductCreateBaseForm } from './product-create-base-form.vue';
@@ -21,57 +22,34 @@ interface DraftMember {
interface Props {
baseInfo: ProductCreateBaseForm;
userOptions: Api.SystemManage.UserSimple[];
roleOptions: Api.SystemManage.RoleSimple[];
roleLoading: boolean;
managerRoleError: string;
}
const props = defineProps<Props>();
const emit = defineEmits<{
(e: 'update:members', members: Api.Product.CreateProductMemberParams[]): void;
(e: 'update:watcherUserIds', watcherUserIds: string[]): void;
}>();
const roleOptions = ref<Api.SystemManage.RoleSimple[]>([]);
const roleLoading = ref(false);
const managerRoleError = ref('');
const members = ref<DraftMember[]>([]);
const memberDialogVisible = ref(false);
const memberDialogMode = ref<'create' | 'edit'>('create');
const editingKey = ref<string | null>(null);
const watcherUserIds = ref<string[]>([]);
const batchDialogVisible = ref(false);
// 关心人候选用户:排除已在团队成员列表中的用户(包含产品经理本人)
const watcherUserOptions = computed(() => {
const memberUserIds = new Set(members.value.map(item => item.userId).filter(Boolean));
return props.userOptions.filter(user => !memberUserIds.has(user.id));
});
const teamTableHeight = getProductTeamTableHeight(4);
const batchDisabledUserIds = computed(() => members.value.map(item => item.userId).filter(Boolean));
const userLabelMap = computed(() => new Map(props.userOptions.map(item => [String(item.id), item.nickname])));
const managerRole = computed(() => roleOptions.value.find(item => item.code === PRODUCT_MANAGER_ROLE_CODE) ?? null);
// 弹框传入的禁选用户列表:新增时排除所有已选;编辑时排除自身以外的已选
const dialogDisabledUserIds = computed(() => {
return members.value
.filter(item => !editingKey.value || item.key !== editingKey.value)
.map(item => item.userId)
.filter(Boolean);
});
const managerRole = computed(() => props.roleOptions.find(item => item.code === PRODUCT_MANAGER_ROLE_CODE) ?? null);
const dialogInitial = computed(() => {
if (memberDialogMode.value === 'create' || !editingKey.value) {
return null;
}
if (!editingKey.value) return null;
const target = members.value.find(item => item.key === editingKey.value);
if (!target) {
return null;
}
if (!target) return null;
return { userId: target.userId, roleId: target.roleId, remark: target.remark };
});
@@ -80,31 +58,13 @@ function getUserNickname(userId: string) {
}
function getRoleName(roleId: string) {
return roleOptions.value.find(item => item.id === roleId)?.name || '--';
return props.roleOptions.find(item => item.id === roleId)?.name || '--';
}
function generateKey() {
return `${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
}
async function loadRoles() {
roleLoading.value = true;
managerRoleError.value = '';
const { data } = await fetchGetRoleSimpleList({ scopeType: 'object', objectType: 'product' });
roleLoading.value = false;
roleOptions.value = data ?? [];
if (!managerRole.value) {
managerRoleError.value = '未找到产品经理角色,请联系管理员';
return;
}
refreshManagerRow();
}
function refreshManagerRow() {
const managerUserId = props.baseInfo.managerUserId;
@@ -132,14 +92,25 @@ function refreshManagerRow() {
emitMembers();
}
function openCreate() {
memberDialogMode.value = 'create';
editingKey.value = null;
memberDialogVisible.value = true;
function openBatch() {
batchDialogVisible.value = true;
}
function handleBatchSubmit(payloads: BatchMemberPayload[]) {
for (const p of payloads) {
members.value.push({
key: generateKey(),
userId: p.userId,
roleId: p.roleId,
remark: p.remark,
locked: false
});
}
batchDialogVisible.value = false;
emitMembers();
}
function openEdit(row: DraftMember) {
memberDialogMode.value = 'edit';
editingKey.value = row.key;
memberDialogVisible.value = true;
}
@@ -149,27 +120,16 @@ function removeMember(key: string) {
emitMembers();
}
function handleMemberSubmit(payload: { userId: string; roleId: string; remark: string }) {
if (memberDialogMode.value === 'create') {
members.value.push({
key: generateKey(),
userId: payload.userId,
function handleMemberEditSubmit(payload: { userId: string; roleId: string; remark: string }) {
if (!editingKey.value) return;
const idx = members.value.findIndex(item => item.key === editingKey.value);
if (idx >= 0) {
members.value[idx] = {
...members.value[idx],
roleId: payload.roleId,
remark: payload.remark,
locked: false
});
} else if (editingKey.value) {
const idx = members.value.findIndex(item => item.key === editingKey.value);
if (idx >= 0) {
members.value[idx] = {
...members.value[idx],
roleId: payload.roleId,
remark: payload.remark
};
}
remark: payload.remark
};
}
memberDialogVisible.value = false;
emitMembers();
}
@@ -188,8 +148,8 @@ function emitMembers() {
}
async function runValidate(): Promise<boolean> {
if (managerRoleError.value) {
window.$message?.error(managerRoleError.value);
if (props.managerRoleError) {
window.$message?.error(props.managerRoleError);
return false;
}
@@ -214,43 +174,32 @@ async function runValidate(): Promise<boolean> {
return true;
}
function handleWatcherChange(ids: string[]) {
watcherUserIds.value = ids;
emit('update:watcherUserIds', ids);
}
// 团队成员变化时,剔除已被加入团队的关心人,避免重叠
watch(
() => members.value.map(item => item.userId).join(','),
() => {
const memberUserIds = new Set(members.value.map(item => item.userId).filter(Boolean));
const filtered = watcherUserIds.value.filter(id => !memberUserIds.has(id));
if (filtered.length !== watcherUserIds.value.length) {
handleWatcherChange(filtered);
}
}
);
onMounted(loadRoles);
watch(
() => props.baseInfo.managerUserId,
() => {
if (!managerRoleError.value && managerRole.value) {
if (!props.managerRoleError && managerRole.value) {
refreshManagerRow();
}
}
);
// roleOptions 异步加载到位后,补一次 locked 行刷新
watch(managerRole, () => {
if (!props.managerRoleError && managerRole.value && props.baseInfo.managerUserId) {
refreshManagerRow();
}
});
defineExpose({ validate: runValidate });
</script>
<template>
<div v-loading="roleLoading" class="team-step">
<div class="team-step__toolbar">
<ElButton type="primary" plain :disabled="Boolean(managerRoleError)" @click="openCreate">新增成员</ElButton>
</div>
<button type="button" class="team-step__add" :disabled="Boolean(managerRoleError)" @click="openBatch">
<icon-ep:plus class="team-step__add-icon" />
<span>新增成员</span>
<span class="team-step__add-hint">从部门 / 管理链路 / 全公司 批量选人</span>
</button>
<ElAlert
v-if="managerRoleError"
@@ -261,62 +210,49 @@ defineExpose({ validate: runValidate });
class="team-step__alert"
/>
<ElTable :data="members" :height="teamTableHeight" border row-key="key" empty-text="点击右上角新增成员添加">
<ElTableColumn type="index" label="序号" width="64" align="center" />
<ElTableColumn label="成员姓名" min-width="120">
<template #default="{ row }">
{{ getUserNickname(row.userId) }}
</template>
</ElTableColumn>
<ElTableColumn label="当前角色" min-width="140">
<template #default="{ row }">
{{ getRoleName(row.roleId) }}
</template>
</ElTableColumn>
<ElTableColumn label="备注" min-width="200" show-overflow-tooltip>
<template #default="{ row }">
{{ row.remark || '--' }}
</template>
</ElTableColumn>
<ElTableColumn label="操作" width="150" fixed="right" align="center">
<template #default="{ row }">
<div class="team-step__actions">
<ElButton link type="primary" :disabled="row.locked" @click="openEdit(row)">编辑</ElButton>
<ElButton link type="danger" :disabled="row.locked" @click="removeMember(row.key)">移除</ElButton>
</div>
</template>
</ElTableColumn>
</ElTable>
<div class="watcher-row">
<span class="watcher-row__label">
关心人
<span class="watcher-row__optional">选填</span>
</span>
<ElSelect
:model-value="watcherUserIds"
multiple
filterable
clearable
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="3"
placeholder="可在列表 / 概览看到此产品的关注人"
class="watcher-row__select"
@update:model-value="handleWatcherChange"
>
<ElOption v-for="item in watcherUserOptions" :key="item.id" :value="item.id" :label="item.nickname" />
</ElSelect>
<div class="team-step__table-wrap">
<ElTable :data="members" height="100%" border row-key="key" empty-text="点击右上角新增成员添加">
<ElTableColumn type="index" label="序号" width="64" align="center" />
<ElTableColumn label="成员姓名" min-width="120">
<template #default="{ row }">
{{ getUserNickname(row.userId) }}
</template>
</ElTableColumn>
<ElTableColumn label="当前角色" min-width="140">
<template #default="{ row }">
{{ getRoleName(row.roleId) }}
</template>
</ElTableColumn>
<ElTableColumn label="备注" min-width="200" show-overflow-tooltip>
<template #default="{ row }">
{{ row.remark || '--' }}
</template>
</ElTableColumn>
<ElTableColumn label="操作" width="150" fixed="right" align="center">
<template #default="{ row }">
<div class="team-step__actions">
<ElButton link type="primary" :disabled="row.locked" @click="openEdit(row)">编辑</ElButton>
<ElButton link type="danger" :disabled="row.locked" @click="removeMember(row.key)">移除</ElButton>
</div>
</template>
</ElTableColumn>
</ElTable>
</div>
<ProductCreateTeamMemberDialog
v-model:visible="memberDialogVisible"
:mode="memberDialogMode"
:initial="dialogInitial"
:user-options="userOptions"
:role-options="roleOptions"
:disabled-user-ids="dialogDisabledUserIds"
@submit="handleMemberSubmit"
@submit="handleMemberEditSubmit"
/>
<ProductTeamBatchDialog
v-model:visible="batchDialogVisible"
:user-options="userOptions"
:role-options="roleOptions"
:disabled-user-ids="batchDisabledUserIds"
@submit="handleBatchSubmit"
/>
</div>
</template>
@@ -326,16 +262,65 @@ defineExpose({ validate: runValidate });
display: flex;
flex-direction: column;
gap: 14px;
height: 100%;
min-height: 0;
}
.team-step__toolbar {
.team-step__add {
display: flex;
justify-content: flex-end;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 44px;
padding: 0 16px;
border: 1px dashed var(--el-border-color-darker);
border-radius: 6px;
background: transparent;
color: var(--el-text-color-regular);
font-size: 13px;
cursor: pointer;
transition:
border-color 0.2s ease,
color 0.2s ease,
background-color 0.2s ease;
flex-shrink: 0;
}
.team-step__add:hover:not(:disabled) {
border-color: var(--el-color-primary);
color: var(--el-color-primary);
background: var(--el-color-primary-light-9);
}
.team-step__add:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.team-step__add-icon {
font-size: 16px;
}
.team-step__add-hint {
color: var(--el-text-color-placeholder);
font-size: 12px;
font-weight: 400;
}
.team-step__add:hover:not(:disabled) .team-step__add-hint {
color: var(--el-color-primary);
opacity: 0.7;
}
.team-step__alert {
margin: 0;
flex-shrink: 0;
}
.team-step__table-wrap {
flex: 1 1 auto;
min-height: 0;
}
.team-step__actions {
@@ -343,27 +328,4 @@ defineExpose({ validate: runValidate });
align-items: center;
gap: 12px;
}
.watcher-row {
display: flex;
align-items: center;
gap: 10px;
}
.watcher-row__label {
flex: 0 0 auto;
font-size: 13px;
font-weight: 500;
color: rgb(60 70 95 / 96%);
}
.watcher-row__optional {
color: rgb(140 150 170 / 96%);
font-weight: 400;
}
.watcher-row__select {
flex: 1 1 auto;
min-width: 0;
}
</style>

View File

@@ -1,7 +1,8 @@
<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue';
import { PRODUCT_MANAGER_ROLE_CODE } from '@/constants/business';
import { RDMS_OBJECT_DIRECTION_DICT_CODE } from '@/constants/dict';
import { fetchCreateProductWithTeam, fetchGetProduct, fetchUpdateProduct } from '@/service/api';
import { fetchCreateProductWithTeam, fetchGetProduct, fetchGetRoleSimpleList, fetchUpdateProduct } from '@/service/api';
import { useForm, useFormRules } from '@/hooks/common/form';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import DictSelect from '@/components/custom/dict-select.vue';
@@ -112,9 +113,29 @@ const baseFormRef = ref<InstanceType<typeof ProductCreateBaseForm> | null>(null)
const teamStepRef = ref<InstanceType<typeof ProductCreateTeamStep> | null>(null);
const currentStep = ref<1 | 2>(1);
// === 新增模式:角色列表(父级加载,下发给 team-step 与批量弹层) ===
const roleOptions = ref<Api.SystemManage.RoleSimple[]>([]);
const roleLoading = ref(false);
const managerRoleError = ref('');
const managerRole = computed(() => roleOptions.value.find(item => item.code === PRODUCT_MANAGER_ROLE_CODE) ?? null);
async function loadRoles() {
roleLoading.value = true;
managerRoleError.value = '';
const { data } = await fetchGetRoleSimpleList({ scopeType: 'object', objectType: 'product' });
roleLoading.value = false;
roleOptions.value = data ?? [];
if (!managerRole.value) {
managerRoleError.value = '未找到产品经理角色,请联系管理员';
}
}
const createBaseModel = ref<ProductCreateBaseFormModel>(createBaseInfo());
const draftMembers = ref<Api.Product.CreateProductMemberParams[]>([]);
const draftWatcherUserIds = ref<string[]>([]);
function createBaseInfo(): ProductCreateBaseFormModel {
return { code: '', name: '', directionCode: '', managerUserId: null, description: '' };
@@ -158,8 +179,7 @@ async function handleCreateSubmit() {
managerUserId: createBaseModel.value.managerUserId as string,
description: getNullableText(createBaseModel.value.description)
},
members: draftMembers.value,
watcherUserIds: draftWatcherUserIds.value.length > 0 ? draftWatcherUserIds.value : undefined
members: draftMembers.value
};
const { error, data } = await fetchCreateProductWithTeam(payload);
@@ -188,8 +208,8 @@ watch(visible, async value => {
editModel.value = createEditModel();
createBaseModel.value = createBaseInfo();
draftMembers.value = [];
draftWatcherUserIds.value = [];
await nextTick();
await loadRoles();
editFormRef.value?.clearValidate();
return;
}
@@ -295,7 +315,7 @@ watch(visible, async value => {
</ElForm>
</BusinessFormDialog>
<!-- 新增模式两步向导复合内容特例自定义 ElDialog 880px -->
<!-- 新增模式:两步向导(复合内容特例,1080px,左侧概念区 + 右侧步骤面板) -->
<ElDialog
v-else
v-model="visible"
@@ -304,43 +324,85 @@ watch(visible, async value => {
:close-on-click-modal="false"
destroy-on-close
align-center
width="760px"
width="1080px"
>
<div class="product-create-dialog__stepbar">
<div class="product-create-dialog__step" :class="{ 'is-active': currentStep === 1, 'is-done': currentStep > 1 }">
<span class="product-create-dialog__step-index">1</span>
<span class="product-create-dialog__step-text">
<strong>基础资料</strong>
<small>定义产品身份和负责人</small>
</span>
</div>
<div class="product-create-dialog__step" :class="{ 'is-active': currentStep === 2 }">
<span class="product-create-dialog__step-index">2</span>
<span class="product-create-dialog__step-text">
<strong>初始化团队</strong>
<small>配置对象域成员角色</small>
</span>
</div>
</div>
<div class="product-create-dialog__split">
<aside class="product-create-dialog__guide">
<div class="product-create-dialog__guide-hero">
<div class="product-create-dialog__guide-hero-icon">
<icon-ep:box />
</div>
<div class="product-create-dialog__guide-hero-text">
<div class="product-create-dialog__guide-hero-title">产品</div>
<div class="product-create-dialog__guide-hero-sub">需求 · 项目 · 迭代 的承载单元</div>
</div>
</div>
<div class="product-create-dialog__body">
<div v-show="currentStep === 1" class="product-create-dialog__panel">
<ProductCreateBaseForm ref="baseFormRef" v-model="createBaseModel" :manager-user-options="managerUserOptions" />
</div>
<div v-show="currentStep === 2" class="product-create-dialog__panel">
<ProductCreateTeamStep
ref="teamStepRef"
:base-info="createBaseModel"
:user-options="managerUserOptions"
@update:members="draftMembers = $event"
@update:watcher-user-ids="draftWatcherUserIds = $event"
/>
<p class="product-create-dialog__guide-lead">
产品与需求池管理,提供多维度的需求规划工具,打通客户业务团队和产研团队之间的协作
</p>
<section class="product-create-dialog__guide-section">
<h4>包含</h4>
<p>需求变更迭代模块文档状态统计报表</p>
</section>
<section class="product-create-dialog__guide-section">
<h4>参与人</h4>
<p>产品经理(必填,创建后锁定) · 团队角色(业务专员 / 游客 / 关注人)</p>
</section>
<section class="product-create-dialog__guide-section">
<h4>命名建议</h4>
<p>建议使用业务团队约定俗成的简短名称,产品创建后不再轻易调整,会影响下游引用</p>
</section>
</aside>
<div class="product-create-dialog__main">
<div class="product-create-dialog__stepbar">
<div
class="product-create-dialog__step"
:class="{ 'is-active': currentStep === 1, 'is-done': currentStep > 1 }"
>
<span class="product-create-dialog__step-index">1</span>
<span class="product-create-dialog__step-text">
<strong>基础资料</strong>
</span>
</div>
<div class="product-create-dialog__step" :class="{ 'is-active': currentStep === 2 }">
<span class="product-create-dialog__step-index">2</span>
<span class="product-create-dialog__step-text">
<strong>初始化团队</strong>
</span>
</div>
</div>
<div class="product-create-dialog__body">
<div v-show="currentStep === 1" class="product-create-dialog__panel">
<ProductCreateBaseForm
ref="baseFormRef"
v-model="createBaseModel"
:manager-user-options="managerUserOptions"
/>
</div>
<div v-show="currentStep === 2" class="product-create-dialog__panel">
<ProductCreateTeamStep
ref="teamStepRef"
:base-info="createBaseModel"
:user-options="managerUserOptions"
:role-options="roleOptions"
:role-loading="roleLoading"
:manager-role-error="managerRoleError"
@update:members="draftMembers = $event"
/>
</div>
</div>
</div>
</div>
<template #footer>
<div class="product-create-dialog__footer">
<span class="product-create-dialog__footer-meta"> {{ currentStep }} 2 </span>
<span class="product-create-dialog__footer-meta"> {{ currentStep }} , 2 </span>
<ElSpace :size="10">
<ElButton @click="closeDialog">取消</ElButton>
<ElButton v-if="currentStep === 2" @click="goPrev">上一步</ElButton>
@@ -378,6 +440,92 @@ watch(visible, async value => {
padding: 0;
}
.product-create-dialog__split {
display: grid;
grid-template-columns: 280px 1fr;
min-height: 0;
}
.product-create-dialog__guide {
padding: 28px 24px;
background: linear-gradient(180deg, #f7f9fc 0%, #fafbfc 100%);
border-right: 1px solid rgb(229 233 242 / 96%);
overflow-y: auto;
max-height: min(720px, calc(100vh - 160px));
}
.product-create-dialog__guide-hero {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid rgb(229 233 242 / 96%);
}
.product-create-dialog__guide-hero-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--el-color-primary-light-9);
color: var(--el-color-primary);
font-size: 22px;
flex-shrink: 0;
}
.product-create-dialog__guide-hero-text {
min-width: 0;
}
.product-create-dialog__guide-hero-title {
font-size: 15px;
font-weight: 650;
color: var(--el-text-color-primary);
line-height: 1.4;
}
.product-create-dialog__guide-hero-sub {
margin-top: 2px;
font-size: 12px;
color: var(--el-text-color-secondary);
line-height: 1.4;
}
.product-create-dialog__guide-lead {
margin: 0 0 24px;
font-size: 13.5px;
line-height: 1.8;
color: var(--el-text-color-regular);
}
.product-create-dialog__guide-section + .product-create-dialog__guide-section {
margin-top: 20px;
}
.product-create-dialog__guide-section h4 {
margin: 0 0 6px;
font-size: 12.5px;
font-weight: 700;
color: var(--el-text-color-primary);
letter-spacing: 0.4px;
}
.product-create-dialog__guide-section p {
margin: 0;
font-size: 13px;
line-height: 1.75;
color: var(--el-text-color-regular);
}
.product-create-dialog__main {
display: flex;
flex-direction: column;
min-width: 0;
}
.product-create-dialog__stepbar {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -433,13 +581,15 @@ watch(visible, async value => {
}
.product-create-dialog__body {
min-height: 0;
max-height: min(560px, calc(100vh - 240px));
overflow: auto;
height: min(520px, calc(100vh - 240px));
overflow: hidden;
}
.product-create-dialog__panel {
height: 100%;
padding: 24px;
overflow: auto;
box-sizing: border-box;
}
.product-create-dialog__footer {

View File

@@ -56,7 +56,7 @@ function search() {
</script>
<template>
<TableSearchFields v-model="model" :fields="fields" :columns="3" @reset="reset" @search="search" />
<TableSearchFields v-model="model" :fields="fields" :columns="4" @reset="reset" @search="search" />
</template>
<style scoped></style>

View File

@@ -14,12 +14,12 @@ import {
fetchChangeRequirementStatus,
fetchDeleteRequirement,
fetchGetProductMembers,
fetchGetProductRequirementDashboard,
fetchGetProjectListByProductId,
fetchGetRequirementAllowedTransitions,
fetchGetRequirementAllowedTransitionsBatch,
fetchGetRequirementStatusDict,
fetchGetRequirementTerminalStatusDict,
fetchGetRequirementTree,
fetchHasDispatchedProjectRequirement
fetchHasDispatchedProjectRequirementBatch
} from '@/service/api';
import { useAuth } from '@/hooks/business/auth';
import { useDict } from '@/hooks/business/dict';
@@ -42,7 +42,11 @@ import RequirementCreateDialog from './modules/requirement-create-dialog.vue';
import RequirementDetailDialog from './modules/requirement-detail-dialog.vue';
import RequirementSplitDialog from './modules/requirement-split-dialog.vue';
import RequirementActionDialog from './modules/requirement-action-dialog.vue';
import RequirementReviewDialog from './modules/requirement-review-dialog.vue';
import RequirementReviewRecordDialog from './modules/requirement-review-record-dialog.vue';
import IconMdiSync from '~icons/mdi/sync';
import IconMdiEyeOutline from '~icons/mdi/eye-outline';
import IconMdiPencilOutline from '~icons/mdi/pencil-outline';
defineOptions({ name: 'ProductRequirement' });
@@ -50,10 +54,20 @@ const router = useRouter();
const { currentObjectId } = useCurrentProduct();
const { hasObjectAuth } = useAuth();
const statusOptions = ref<Array<{ label: string; value: string }>>([]);
const terminalStatusOptions = ref<string[]>([]);
const statusDict = ref<Api.Product.RequirementStatusDict[]>([]);
const projectOptions = ref<Api.Project.Project[]>([]);
const statusOptions = computed(() => {
return statusDict.value.map(item => ({
label: item.statusName,
value: item.statusCode
}));
});
const statusMetaMap = computed(() => {
return new Map(statusDict.value.map(item => [item.statusCode, item]));
});
const projectNameMap = computed(() => {
return new Map(projectOptions.value.map(item => [item.id, item.projectName]));
});
@@ -64,25 +78,11 @@ async function loadStatusOptions() {
const { error, data } = await fetchGetRequirementStatusDict();
if (error || !data) {
statusOptions.value = [];
statusDict.value = [];
return;
}
statusOptions.value = data.map(item => ({
label: item.statusName,
value: item.statusCode
}));
}
async function loadTerminalStatusOptions() {
const { error, data } = await fetchGetRequirementTerminalStatusDict();
if (error || !data) {
terminalStatusOptions.value = [];
return;
}
terminalStatusOptions.value = data.map(item => item.statusCode);
statusDict.value = data;
}
async function loadProjectOptions() {
@@ -106,12 +106,6 @@ function getStatusLabel(statusCode: string) {
return item ? item.label : statusCode;
}
const priorityTagTypeMap: Record<number, UI.ThemeColor> = {
0: 'info',
1: 'primary',
2: 'warning',
3: 'danger'
};
const hasDispatchedMap = ref<Record<string, boolean>>({});
function formatDateTime(value?: string | null) {
@@ -122,8 +116,32 @@ function formatDateTime(value?: string | null) {
return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
}
function formatDate(value?: string | null) {
if (!value) {
return '--';
}
return dayjs(value).format('YYYY-MM-DD');
}
function isTerminalStatus(statusCode: string) {
return terminalStatusOptions.value.includes(statusCode);
return Boolean(statusMetaMap.value.get(statusCode)?.terminalFlag);
}
function canEditRequirement(row: Api.Product.Requirement) {
return Boolean(statusMetaMap.value.get(row.statusCode)?.allowEdit);
}
function isReviewAction(row: Api.Product.Requirement, action: Api.Product.RequirementLifecycleAction) {
return row.statusCode === 'pending_review' && ['pass_review', 'reject_review'].includes(action.actionCode);
}
function isReviewTransitionAction(actionCode: string) {
return ['pass_review', 'reject_review'].includes(actionCode);
}
function canViewReviewRecord(row: Api.Product.Requirement) {
return row.reviewRequired === 1 && !['pending_claim', 'pending_review'].includes(row.statusCode);
}
function canSplitRequirement(row: Api.Product.Requirement) {
@@ -134,7 +152,7 @@ function canSplitRequirement(row: Api.Product.Requirement) {
if (hasDispatched) {
return false;
}
return row.statusCode === 'pending_dispatch' || row.statusCode === 'implementing';
return ['pending_dispatch', 'reviewed', 'implementing'].includes(row.statusCode);
}
function canDeleteRequirement(row: Api.Product.Requirement) {
@@ -148,6 +166,7 @@ const memberOptions = ref<Api.Product.ProductMember[]>([]);
const requirementTableRef = ref<TableInstance>();
const loading = ref(false);
const treeData = ref<Api.Product.Requirement[]>([]);
const requirementDisplayTotal = ref(0);
const pagination = reactive({
pageNo: 1,
pageSize: 10,
@@ -175,6 +194,10 @@ const splitParentRequirement = ref<Api.Product.Requirement | null>(null);
const actionVisible = ref(false);
const actionRequirement = ref<Api.Product.Requirement | null>(null);
const currentAction = ref<Api.Product.RequirementLifecycleAction | null>(null);
const reviewVisible = ref(false);
const reviewRequirement = ref<Api.Product.Requirement | null>(null);
const reviewRecordVisible = ref(false);
const reviewRecordRequirement = ref<Api.Product.Requirement | null>(null);
interface MemberUserOption {
id: string;
@@ -204,14 +227,6 @@ function getMemberLabel(userId?: string | null) {
return memberLabelMap.value.get(String(userId)) || String(userId);
}
function getPriorityTagType(priority?: number | null): UI.ThemeColor {
if (priority === null || priority === undefined) {
return 'info';
}
return priorityTagTypeMap[priority] || 'info';
}
function flattenTree(nodes: Api.Product.Requirement[]): Api.Product.Requirement[] {
const result: Api.Product.Requirement[] = [];
for (const node of nodes) {
@@ -223,17 +238,6 @@ function flattenTree(nodes: Api.Product.Requirement[]): Api.Product.Requirement[
return result;
}
function collectAllRequirementIds(nodes: Api.Product.Requirement[]): string[] {
const ids: string[] = [];
for (const node of nodes) {
ids.push(node.id);
if (node.children?.length) {
ids.push(...collectAllRequirementIds(node.children));
}
}
return ids;
}
function collectRequirementIdsForActions(nodes: Api.Product.Requirement[]): string[] {
const ids: string[] = [];
for (const node of nodes) {
@@ -276,15 +280,18 @@ async function loadAllowedTransitionsForAll() {
return;
}
const results = await Promise.all(
idsToQuery.map(async id => {
const { error, data } = await fetchGetRequirementAllowedTransitions(id, currentObjectId.value!);
return { id, actions: error ? [] : data || [] };
})
);
const { error, data } = await fetchGetRequirementAllowedTransitionsBatch({
productId: currentObjectId.value,
requirementIds: idsToQuery
});
for (const { id, actions } of results) {
newMap.set(id, actions);
if (error || !data) {
allowedTransitionsMap.value = newMap;
return;
}
for (const item of data) {
newMap.set(item.requirementId, item.transitions || []);
}
allowedTransitionsMap.value = newMap;
@@ -304,12 +311,19 @@ async function loadHasDispatchedForAll() {
return;
}
await Promise.all(
idsToQuery.map(async id => {
const { data } = await fetchHasDispatchedProjectRequirement(id, currentObjectId.value!);
newMap[id] = Boolean(data);
})
);
const { error, data } = await fetchHasDispatchedProjectRequirementBatch({
productId: currentObjectId.value,
requirementIds: idsToQuery
});
if (error || !data) {
hasDispatchedMap.value = newMap;
return;
}
for (const item of data) {
newMap[item.requirementId] = Boolean(item.hasDispatched);
}
hasDispatchedMap.value = newMap;
}
@@ -339,12 +353,12 @@ const columns = computed(() => [
label: '需求名称',
minWidth: 200,
formatter: (row: Api.Product.Requirement) => {
const className = 'requirement-title';
return (
<ElButton link type="primary" class={className} onClick={() => openView(row)}>
{row.title}
</ElButton>
<ElTooltip content={row.title} placement="top" show-after={300}>
<ElButton link type="primary" class="requirement-title" onClick={() => openView(row)}>
{row.title}
</ElButton>
</ElTooltip>
);
}
},
@@ -353,9 +367,7 @@ const columns = computed(() => [
label: '优先级',
width: 75,
align: 'center',
formatter: (row: Api.Product.Requirement) => (
<DictTag dictCode={RDMS_REQ_PRIORITY_DICT_CODE} value={row.priority} type={getPriorityTagType(row.priority)} />
)
formatter: (row: Api.Product.Requirement) => <DictTag dictCode={RDMS_REQ_PRIORITY_DICT_CODE} value={row.priority} />
},
{
prop: 'statusCode',
@@ -366,23 +378,16 @@ const columns = computed(() => [
<ElTag type={getRequirementStatusTagType(row.statusCode)}>{getStatusLabel(row.statusCode)}</ElTag>
)
},
{
prop: 'workHours',
label: '所需工时',
width: 75,
align: 'center',
formatter: (row: Api.Product.Requirement) => (row.workHours !== null ? `${row.workHours}h` : '--')
},
{
prop: 'category',
label: '需求类型',
minWidth: 100,
minWidth: 80,
formatter: (row: Api.Product.Requirement) => row.category
},
{
prop: 'sourceType',
label: '需求来源',
minWidth: 100,
minWidth: 80,
align: 'center',
formatter: (row: Api.Product.Requirement) => (
<DictText dictCode={RDMS_REQ_SOURCE_TYPE_DICT_CODE} value={row.sourceType} />
@@ -400,13 +405,13 @@ const columns = computed(() => [
{
prop: 'proposerNickname',
label: '提出人',
minWidth: 70,
minWidth: 85,
formatter: (row: Api.Product.Requirement) => row.proposerNickname || '--'
},
{
prop: 'currentHandlerUserId',
label: '负责人',
minWidth: 70,
minWidth: 85,
formatter: (row: Api.Product.Requirement) => getMemberLabel(row.currentHandlerUserId)
},
{
@@ -427,22 +432,24 @@ const columns = computed(() => [
},
{
prop: 'implementProjectId',
label: '实现项目',
minWidth: 140,
label: '关联项目',
minWidth: 180,
formatter: (row: Api.Product.Requirement) => {
if (!row.implementProjectId) return '--';
const projectName = projectNameMap.value.get(row.implementProjectId) || row.implementProjectName || '--';
return (
<ElButton link type="primary" class="implement-project-link" onClick={() => handleImplementProjectClick(row)}>
{projectName}
</ElButton>
);
return projectNameMap.value.get(row.implementProjectId) || row.implementProjectName || '--';
}
},
{
prop: 'expectedTime',
label: '预期完成时间',
minWidth: 120,
align: 'center',
formatter: (row: Api.Product.Requirement) => formatDate(row.expectedTime)
},
{
prop: 'createTime',
label: '创建时间',
minWidth: 180,
minWidth: 120,
formatter: (row: Api.Product.Requirement) => formatDateTime(row.createTime)
},
{
@@ -461,7 +468,17 @@ const columns = computed(() => [
onClick: () => void;
}[] = [];
if (canSplitRequirement(row) && hasObjectAuth('project:product:split')) {
if (hasObjectAuth('project:product:query') && canViewReviewRecord(row)) {
actions.push({
key: 'reviewRecord',
label: '查看评审记录',
icon: markRaw(IconMdiEyeOutline),
type: 'primary',
onClick: () => handleViewReviewRecord(row)
});
}
if (hasObjectAuth('project:product:split') && canSplitRequirement(row)) {
actions.push({
key: 'split',
label: '拆分',
@@ -471,12 +488,7 @@ const columns = computed(() => [
});
}
if (
hasObjectAuth('project:product:update') &&
!isTerminalStatus(row.statusCode) &&
row.statusCode !== 'accepted' &&
!row.implementProjectId
) {
if (hasObjectAuth('project:product:update') && canEditRequirement(row)) {
actions.push({
key: 'edit',
label: '编辑',
@@ -486,14 +498,35 @@ const columns = computed(() => [
});
}
if (row.implementProjectId) {
actions.push({
key: 'forward',
label: '跳转',
icon: ACTION_ICON_MAP.forward,
type: 'primary',
onClick: () => handleForwardToProjectRequirement(row)
});
}
const lifecycleActions = getRowActions(row);
const hasReviewAuth = hasObjectAuth('project:product:review');
const hasStatusAuth = hasObjectAuth('project:product:status');
if (hasReviewAuth && lifecycleActions.some(action => isReviewAction(row, action))) {
actions.push({
key: 'review',
label: '评审',
icon: ACTION_ICON_MAP.pass_review,
type: 'primary',
onClick: () => openReview(row)
});
}
if (hasStatusAuth) {
const nonTerminalActions: Api.Product.RequirementLifecycleAction[] = [];
const terminalActions: Api.Product.RequirementLifecycleAction[] = [];
for (const action of lifecycleActions) {
for (const action of lifecycleActions.filter(item => !isReviewTransitionAction(item.actionCode))) {
const code = action.actionCode as RequirementStatusActionCode;
if (isRequirementActionTerminal(code)) {
terminalActions.push(action);
@@ -525,22 +558,29 @@ const columns = computed(() => [
return (
<div class="requirement-action-cell" onClick={event => event.stopPropagation()}>
{actions.map(action => {
const IconComponent = action.icon as any;
return (
<ElTooltip key={action.key} content={action.label} placement="top">
<ElButton
link
size="small"
class="requirement-action-icon-btn"
type={action.type}
onClick={() => action.onClick()}
>
<IconComponent class="text-18px" />
</ElButton>
</ElTooltip>
);
})}
{actions.length === 0 ? (
<ElButton link size="small" class="requirement-action-icon-btn" type="primary" disabled>
<IconMdiPencilOutline class="text-18px" />
</ElButton>
) : (
actions.map(action => {
const IconComponent = action.icon as any;
return (
<ElTooltip key={action.key} content={action.label} placement="top">
<ElButton
link
size="small"
class="requirement-action-icon-btn"
type={action.type}
disabled={action.disabled}
onClick={() => action.onClick()}
>
<IconComponent class="text-18px" />
</ElButton>
</ElTooltip>
);
})
)}
</div>
);
}
@@ -622,12 +662,27 @@ async function loadTreeData() {
pagination.total = data.total;
}
async function loadRequirementDisplayTotal() {
if (!currentObjectId.value) {
requirementDisplayTotal.value = 0;
return;
}
const { error, data } = await fetchGetProductRequirementDashboard(currentObjectId.value);
if (error || !data) {
requirementDisplayTotal.value = pagination.total;
return;
}
requirementDisplayTotal.value = data.summary.total;
}
async function reloadTable() {
loading.value = true;
try {
await loadTreeData();
await loadAllowedTransitionsForAll();
await loadHasDispatchedForAll();
await Promise.all([loadAllowedTransitionsForAll(), loadHasDispatchedForAll(), loadRequirementDisplayTotal()]);
} finally {
loading.value = false;
}
@@ -688,10 +743,24 @@ function openSplit(row: Api.Product.Requirement) {
splitVisible.value = true;
}
async function handleImplementProjectClick(row: Api.Product.Requirement) {
function openReview(row: Api.Product.Requirement) {
reviewRequirement.value = row;
reviewVisible.value = true;
}
function handleViewReviewRecord(row: Api.Product.Requirement) {
if (!canViewReviewRecord(row)) {
return;
}
reviewRecordRequirement.value = row;
reviewRecordVisible.value = true;
}
async function handleForwardToProjectRequirement(row: Api.Product.Requirement) {
if (!row.implementProjectId) return;
router.push({
await router.replace({
path: '/project/project/requirement',
query: {
objectId: row.implementProjectId
@@ -705,7 +774,7 @@ function handleActionClick(row: Api.Product.Requirement, action: Api.Product.Req
if (
!isRequirementActionNeedReviewChoice(actionCode) &&
!isRequirementActionNeedProject(actionCode) &&
!isRequirementActionTerminal(actionCode)
!action.needReason
) {
handleDirectAction(row, action);
return;
@@ -804,25 +873,30 @@ async function handleSplitSubmitted() {
await reloadTable();
}
async function handleReviewSubmitted() {
reviewVisible.value = false;
await reloadTable();
}
watch(
() => currentObjectId.value,
async id => {
if (id) {
await Promise.all([loadMembers(), loadTreeData(), loadProjectOptions()]);
await loadAllowedTransitionsForAll();
await loadHasDispatchedForAll();
await Promise.all([loadAllowedTransitionsForAll(), loadHasDispatchedForAll(), loadRequirementDisplayTotal()]);
} else {
memberOptions.value = [];
treeData.value = [];
projectOptions.value = [];
allowedTransitionsMap.value = new Map();
requirementDisplayTotal.value = 0;
}
},
{ immediate: true }
);
onMounted(async () => {
await Promise.all([loadStatusOptions(), loadTerminalStatusOptions()]);
await loadStatusOptions();
});
</script>
@@ -849,7 +923,7 @@ onMounted(async () => {
<div class="flex items-center justify-between gap-12px">
<div class="flex flex-wrap items-center gap-8px">
<p>需求列表</p>
<ElTag effect="plain">{{ pagination.total }} </ElTag>
<ElTag effect="plain">{{ requirementDisplayTotal }} </ElTag>
</div>
<TableHeaderOperation v-model:columns="columnChecks" :loading="loading" @refresh="reloadTable">
<template #default>
@@ -941,6 +1015,21 @@ onMounted(async () => {
:project-options="projectOptions"
@submitted="handleActionSubmitted"
/>
<RequirementReviewDialog
v-model:visible="reviewVisible"
:product-id="currentObjectId || ''"
:requirement="reviewRequirement"
:member-options="memberOptions"
@submitted="handleReviewSubmitted"
/>
<RequirementReviewRecordDialog
v-model:visible="reviewRecordVisible"
:product-id="currentObjectId || ''"
:requirement="reviewRecordRequirement"
:member-options="memberOptions"
/>
</div>
</template>
@@ -954,6 +1043,12 @@ onMounted(async () => {
:deep(.requirement-title) {
padding: 0;
font-weight: 500;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.5;
height: auto;
}
:deep(.requirement-title--terminal) {
@@ -966,11 +1061,6 @@ onMounted(async () => {
padding: 0;
}
:deep(.implement-project-link) {
padding: 0;
font-weight: 500;
}
:deep(.el-table__row[class*='el-table__row--level-']:not(.el-table__row--level-0) td:first-child .cell) {
color: transparent;
}

View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import { type Ref, computed, inject, ref } from 'vue';
import { useAuth } from '@/hooks/business/auth';
defineOptions({ name: 'ModuleTreeNode' });
@@ -16,7 +17,14 @@ interface Props {
}
const props = withDefaults(defineProps<Props>(), {
level: 0
level: 0,
selectedModuleId: undefined,
editingNodeId: undefined,
editingName: undefined,
addingChildParentId: undefined,
newChildModuleName: undefined,
rootModuleId: undefined,
moduleRequirementCountMap: undefined
});
const emit = defineEmits([
@@ -32,10 +40,23 @@ const emit = defineEmits([
'updateNewChildModuleName'
]);
const { hasObjectAuth } = useAuth();
const isRootModule = computed(() => props.module.id === props.rootModuleId);
const hasAnyActionPermission = computed(() => {
if (isRootModule.value) {
return hasObjectAuth('project:product:create');
}
return (
hasObjectAuth('project:product:create') ||
hasObjectAuth('project:product:update') ||
hasObjectAuth('project:product:delete')
);
});
const collapsedModuleIds = inject<Ref<Set<string>>>('collapsedModuleIds', ref(new Set()));
const toggleCollapse = inject<(id: string) => void>('toggleCollapse', () => {});
const isRootModule = computed(() => props.module.id === props.rootModuleId);
const isSelected = computed(() => props.selectedModuleId === props.module.id);
const isEditing = computed(() => props.editingNodeId === props.module.id);
const isAddingChild = computed(() => props.addingChildParentId === props.module.id);
@@ -141,46 +162,32 @@ function handleToggle() {
/>
</div>
<div v-if="!isEditing" class="module-tree-item__actions" @click.stop>
<ElDropdown trigger="click">
<ElButton text size="small" class="module-tree-item__more-btn">
<icon-mdi-dots-horizontal class="text-14px" />
<div v-if="!isEditing && hasAnyActionPermission" class="module-tree-item__actions" @click.stop>
<ElTooltip v-if="hasObjectAuth('project:product:create')" content="新增子模块" placement="top">
<ElButton link type="primary" class="module-tree-item__action-btn" @click="handleStartAddChild">
<icon-mdi-plus class="text-14px" />
</ElButton>
<template #dropdown>
<ElDropdownMenu>
<ElDropdownItem
v-auth="{ code: 'project:product:create', source: 'object' }"
@click="handleStartAddChild"
>
<div class="flex items-center gap-6px">
<icon-ic-round-plus class="text-14px" />
<span>新增子模块</span>
</div>
</ElDropdownItem>
<ElDropdownItem
v-if="!isRootModule"
v-auth="{ code: 'project:product:update', source: 'object' }"
@click="handleStartEdit"
>
<div class="flex items-center gap-6px">
<icon-mdi-pencil-outline class="text-14px" />
<span>编辑</span>
</div>
</ElDropdownItem>
<ElDropdownItem
v-if="!isRootModule && canDeleteModule"
v-auth="{ code: 'project:product:delete', source: 'object' }"
divided
@click="handleDelete"
>
<div class="flex items-center gap-6px text-error">
</ElTooltip>
<ElTooltip v-if="!isRootModule && hasObjectAuth('project:product:update')" content="编辑" placement="top">
<ElButton link type="primary" class="module-tree-item__action-btn" @click="handleStartEdit">
<icon-mdi-pencil-outline class="text-14px" />
</ElButton>
</ElTooltip>
<ElPopconfirm
v-if="!isRootModule && canDeleteModule && hasObjectAuth('project:product:delete')"
title="确定删除该模块吗?"
@confirm="handleDelete"
>
<template #reference>
<span class="inline-flex" @click.stop>
<ElTooltip content="删除" placement="top">
<ElButton link type="danger" class="module-tree-item__action-btn">
<icon-mdi-delete-outline class="text-14px" />
<span>删除</span>
</div>
</ElDropdownItem>
</ElDropdownMenu>
</ElButton>
</ElTooltip>
</span>
</template>
</ElDropdown>
</ElPopconfirm>
</div>
</div>
@@ -241,73 +248,112 @@ function handleToggle() {
.module-tree-node {
display: flex;
flex-direction: column;
gap: 10px;
}
.module-tree-item {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 42px;
padding: 0 14px;
border: 1px solid rgb(226 232 240 / 92%);
border-radius: 14px;
background-color: rgb(248 250 252 / 96%);
color: rgb(71 85 105 / 94%);
gap: 8px;
min-height: 36px;
padding: 6px 12px;
padding-left: 16px;
border-radius: 8px;
color: #475569;
font-size: 14px;
cursor: pointer;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
background-color 0.15s ease,
color 0.15s ease;
}
.module-tree-item::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 0;
border-radius: 0 2px 2px 0;
background-color: transparent;
transition:
height 0.15s ease,
background-color 0.15s ease;
}
.module-tree-item:hover {
transform: translateY(-1px);
border-color: rgb(148 163 184 / 56%);
background-color: #f1f5f9;
}
.module-tree-item.is-active {
border-color: rgb(13 148 136 / 42%);
background-color: rgb(240 253 250 / 98%);
color: rgb(15 118 110 / 96%);
font-weight: 600;
background-color: #f0fdfa;
color: #0d9488;
font-weight: 500;
}
.module-tree-item.is-root:not(.is-active) .module-tree-item__icon {
color: rgb(13 148 136 / 80%);
.module-tree-item.is-active::before {
height: 60%;
background-color: #14b8a6;
}
.module-tree-item.is-root {
font-weight: 600;
color: #1e293b;
}
.module-tree-item.is-root:hover {
background-color: #f8fafc;
}
.module-tree-item.is-root.is-active {
background-color: #f0fdfa;
color: #0d9488;
}
.module-tree-item--new {
border-style: dashed;
border-color: rgb(148 163 184 / 56%);
border: 1px dashed #cbd5e1;
background-color: #f8fafc;
}
.module-tree-item__icon {
display: flex;
align-items: center;
flex-shrink: 0;
color: rgb(100 116 139 / 80%);
.module-tree-item--new:hover {
background-color: #f1f5f9;
}
.module-tree-item__toggle {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
width: 18px;
height: 18px;
flex-shrink: 0;
cursor: pointer;
user-select: none;
transition: transform 0.2s ease;
color: rgb(148 163 184);
color: #94a3b8;
border-radius: 4px;
}
.module-tree-item__toggle:hover {
background-color: #e2e8f0;
color: #64748b;
}
.module-tree-item__toggle.is-expanded svg {
transform: rotate(90deg);
}
.module-tree-item__icon {
display: flex;
align-items: center;
flex-shrink: 0;
color: #94a3b8;
}
.module-tree-item.is-active .module-tree-item__icon {
color: #14b8a6;
}
.module-tree-item__content {
flex: 1;
min-width: 0;
@@ -326,7 +372,7 @@ function handleToggle() {
}
.module-tree-item__input :deep(.el-input__inner) {
height: 28px;
height: 26px;
}
.module-tree-item__actions {
@@ -334,7 +380,7 @@ function handleToggle() {
align-items: center;
flex-shrink: 0;
opacity: 0;
transition: opacity 0.2s ease;
transition: opacity 0.15s ease;
}
.module-tree-item:hover .module-tree-item__actions {
@@ -345,7 +391,15 @@ function handleToggle() {
opacity: 0;
}
.module-tree-item__more-btn {
padding: 4px;
.module-tree-item__action-btn {
padding: 2px;
min-width: auto;
height: auto;
margin-left: 2px;
line-height: 1;
}
.module-tree-item__action-btn:first-child {
margin-left: 0;
}
</style>

View File

@@ -5,8 +5,7 @@ import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import {
type RequirementStatusActionCode,
isRequirementActionNeedProject,
isRequirementActionNeedReviewChoice,
isRequirementActionTerminal
isRequirementActionNeedReviewChoice
} from '../shared/requirement-master-data';
defineOptions({ name: 'RequirementActionDialog' });
@@ -45,7 +44,7 @@ const isClaimAction = computed(() =>
actionCode.value ? isRequirementActionNeedReviewChoice(actionCode.value) : false
);
const isDispatchAction = computed(() => (actionCode.value ? isRequirementActionNeedProject(actionCode.value) : false));
const isTerminalAction = computed(() => (actionCode.value ? isRequirementActionTerminal(actionCode.value) : false));
const needReason = computed(() => Boolean(props.action?.needReason));
const dialogTitle = computed(() => {
if (!props.action) return '';
@@ -55,7 +54,7 @@ const dialogTitle = computed(() => {
const reviewChoiceOptions = [
{ label: '需要评审', value: 'claim_to_review', description: '认领后进入评审流程' },
{ label: '不需要评审', value: 'claim_to_dispatch', description: '认领后直接进入分流' }
{ label: '不需要评审', value: 'claim_to_dispatch', description: '认领后直接进入指派' }
];
const rules = computed(() => {
@@ -66,10 +65,10 @@ const rules = computed(() => {
}
if (isDispatchAction.value) {
baseRules.implementProjectId = [createRequiredRule('请选择实现项目')];
baseRules.implementProjectId = [createRequiredRule('请选择关联项目')];
}
if (isTerminalAction.value) {
if (needReason.value) {
baseRules.reason = [createRequiredRule('请输入状态变更原因')];
}
@@ -98,7 +97,7 @@ async function handleSubmit() {
payload.implementProjectId = model.value.implementProjectId;
}
if (isTerminalAction.value) {
if (needReason.value) {
payload.reason = model.value.reason.trim();
}
@@ -136,13 +135,13 @@ async function handleSubmit() {
</ElRadioGroup>
</ElFormItem>
<ElFormItem v-if="isDispatchAction" label="实现项目" prop="implementProjectId">
<ElSelect v-model="model.implementProjectId" class="w-full" filterable placeholder="请选择实现项目(必选)">
<ElFormItem v-if="isDispatchAction" label="关联项目" prop="implementProjectId">
<ElSelect v-model="model.implementProjectId" class="w-full" filterable placeholder="请选择关联项目(必选)">
<ElOption v-for="item in projectOptions" :key="item.id" :label="item.projectName" :value="item.id" />
</ElSelect>
</ElFormItem>
<ElFormItem v-if="isTerminalAction" label="变更原因" prop="reason">
<ElFormItem v-if="needReason" label="变更原因" prop="reason">
<ElInput
v-model="model.reason"
type="textarea"

View File

@@ -1,14 +1,16 @@
<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue';
import { useResizeObserver } from '@vueuse/core';
import { fetchCreateRequirement, fetchGetRequirementModuleTree } from '@/service/api';
import { fetchCreateRequirement, fetchGetRequirementModuleTree, fetchGetUserSimpleList } from '@/service/api';
import { useForm, useFormRules } from '@/hooks/common/form';
import { useDict } from '@/hooks/business/dict';
import BusinessAttachmentUploader from '@/components/custom/business-attachment-uploader.vue';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import BusinessFormSection from '@/components/custom/business-form-section.vue';
import BusinessRichTextEditor from '@/components/custom/business-rich-text-editor.vue';
import DictSelect from '@/components/custom/dict-select.vue';
import RequirementTreePicker, {
type RequirementTreePickerNode
} from '@/views/project/project/execution/components/requirement-tree-picker.vue';
import MemberSelectOption from './member-select-option.vue';
defineOptions({ name: 'RequirementCreateDialog' });
@@ -35,76 +37,67 @@ const visible = defineModel<boolean>('visible', {
const { formRef, validate } = useForm();
const { createRequiredRule } = useFormRules();
const { enabledDictData: priorityDictData } = useDict(() => props.priorityDictCode);
const attachmentUploaderRef = ref<InstanceType<typeof BusinessAttachmentUploader> | null>(null);
const richTextEditorRef = ref<InstanceType<typeof BusinessRichTextEditor> | null>(null);
const priorityOptions = computed(() => {
return priorityDictData.value.map(item => ({
label: item.label,
value: Number(item.value)
}));
});
interface Model {
title: string;
description: string | null;
attachments: Api.Project.AttachmentItem[];
reviewRequired: number;
moduleId: string;
category: string;
priority: number | null;
proposerId: string;
currentHandlerUserId: string;
workHours: number | null;
sort: number;
}
const submitting = ref(false);
const loading = ref(false);
const moduleTree = ref<Api.Product.RequirementModule[]>([]);
const model = ref<Model>(createDefaultModel());
const memberUserOptions = computed(() => {
return props.memberOptions.filter(m => m.status === 0);
});
const flatModuleOptions = computed<Array<{ label: string; value: string }>>(() => {
const options: Array<{ label: string; value: string }> = [];
function walk(modules: Api.Product.RequirementModule[], parentPath: string) {
for (const module of modules) {
const currentPath = `${parentPath}/${module.moduleName}`;
options.push({
label: currentPath,
value: module.id || ''
});
if (module.children?.length) {
walk(module.children, currentPath);
}
}
}
if (moduleTree.value.length > 0) {
walk(moduleTree.value, '');
}
return options;
});
const reviewRequiredOptions = [
{ label: '不需要', value: 0 },
{ label: '需要', value: 1 }
];
function buildExpectedTimeShortcut(text: string, mutator: (date: Date) => void) {
return {
text,
value: () => {
const date = new Date();
mutator(date);
return date;
}
};
}
const expectedTimeShortcuts = [
buildExpectedTimeShortcut('一星期', date => date.setDate(date.getDate() + 7)),
buildExpectedTimeShortcut('两星期', date => date.setDate(date.getDate() + 14)),
buildExpectedTimeShortcut('一个月', date => date.setMonth(date.getMonth() + 1)),
buildExpectedTimeShortcut('三个月', date => date.setMonth(date.getMonth() + 3)),
buildExpectedTimeShortcut('半年', date => date.setMonth(date.getMonth() + 6)),
buildExpectedTimeShortcut('一年', date => date.setFullYear(date.getFullYear() + 1))
];
interface Model {
title: string;
description: string | null;
attachments: Api.Project.AttachmentItem[];
reviewRequired: number;
moduleId: string | null;
category: string;
priority: string | null;
expectedTime: string | null;
proposerId: string;
currentHandlerUserId: string;
sort: number;
}
const submitting = ref(false);
const loading = ref(false);
const moduleTree = ref<Api.Product.RequirementModule[]>([]);
const allUserOptions = ref<Api.SystemManage.UserSimple[]>([]);
const model = ref<Model>(createDefaultModel());
const memberUserOptions = computed(() => {
return props.memberOptions.filter(m => m.status === 0);
});
const moduleTreeOptions = computed<RequirementTreePickerNode[]>(() => mapModuleTree(moduleTree.value));
const rules = {
title: [createRequiredRule('请输入需求名称')],
category: [createRequiredRule('请选择需求类型')],
priority: [createRequiredRule('请选择优先级')],
proposerId: [createRequiredRule('请选择提出人')],
currentHandlerUserId: [createRequiredRule('请选择负责人')],
workHours: [createRequiredRule('请输入所需工时')]
currentHandlerUserId: [createRequiredRule('请选择负责人')]
} satisfies Record<string, App.Global.FormRule[]>;
const leftColRef = ref<HTMLElement>();
@@ -143,16 +136,26 @@ function createDefaultModel(): Model {
description: null,
attachments: [],
reviewRequired: 0,
moduleId: props.defaultModuleId || '0',
moduleId: props.defaultModuleId || null,
category: '功能需求',
priority: 1,
priority: '3',
expectedTime: null,
proposerId: '',
currentHandlerUserId: '',
workHours: null,
sort: 0
};
}
function mapModuleTree(modules: Api.Product.RequirementModule[]): RequirementTreePickerNode[] {
return modules
.filter(item => Boolean(item.id))
.map(item => ({
id: item.id || '',
title: item.moduleName,
children: item.children?.length ? mapModuleTree(item.children) : undefined
}));
}
function closeDialog() {
visible.value = false;
}
@@ -169,8 +172,8 @@ async function handleSubmit() {
return;
}
const proposer = memberUserOptions.value.find(m => m.userId === model.value.proposerId);
const proposerNickname = proposer?.userNickname || '';
const proposer = allUserOptions.value.find(u => u.id === model.value.proposerId);
const proposerNickname = proposer?.nickname || '';
const handler = memberUserOptions.value.find(m => m.userId === model.value.currentHandlerUserId);
const currentHandlerUserNickname = handler?.userNickname || '';
@@ -183,12 +186,12 @@ async function handleSubmit() {
attachments: [...model.value.attachments],
category: model.value.category,
priority: Number(model.value.priority) as Api.Product.RequirementPriority,
expectedTime: model.value.expectedTime,
proposerId: model.value.proposerId,
proposerNickname,
currentHandlerUserId: model.value.currentHandlerUserId,
currentHandlerUserNickname,
implementProjectId: null,
workHours: model.value.workHours || 0,
sort: model.value.sort
};
@@ -229,6 +232,13 @@ async function loadModuleTree() {
moduleTree.value = data;
}
async function loadAllUsers() {
const { error, data } = await fetchGetUserSimpleList();
if (!error && data) {
allUserOptions.value = data;
}
}
watch(
() => visible.value,
async value => {
@@ -237,7 +247,7 @@ watch(
}
model.value = createDefaultModel();
await loadModuleTree();
await Promise.all([loadModuleTree(), loadAllUsers()]);
await nextTick();
attachmentUploaderRef.value?.initSession();
@@ -266,36 +276,33 @@ watch(
</ElFormItem>
<ElFormItem label="模块">
<ElSelect v-model="model.moduleId" class="w-full" filterable placeholder="请选择所属模块">
<ElOption v-for="item in flatModuleOptions" :key="item.value" :label="item.label" :value="item.value" />
</ElSelect>
<RequirementTreePicker
v-model="model.moduleId"
:data="moduleTreeOptions"
placeholder="搜索或选择所属模块"
/>
</ElFormItem>
<ElFormItem label="是否需要评审">
<ElSelect v-model="model.reviewRequired" class="w-full" placeholder="请选择">
<ElOption
<ElRadioGroup v-model="model.reviewRequired">
<ElRadio
v-for="item in reviewRequiredOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</ElSelect>
border
style="width: 165px"
>
{{ item.label }}
</ElRadio>
</ElRadioGroup>
</ElFormItem>
<ElFormItem label="优先级" prop="priority">
<ElSelect v-model="model.priority" class="w-full" filterable placeholder="请选择优先级">
<ElOption v-for="item in priorityOptions" :key="item.value" :label="item.label" :value="item.value" />
</ElSelect>
</ElFormItem>
<ElFormItem label="所需工时" prop="workHours">
<ElInputNumber
v-model="model.workHours"
class="w-full"
:min="0"
:max="9999"
:precision="1"
placeholder="请输入所需工时"
<DictSelect
v-model="model.priority"
:dict-code="priorityDictCode"
placeholder="请选择优先级"
show-remark
/>
</ElFormItem>
@@ -310,14 +317,7 @@ watch(
<ElFormItem label="提出人" prop="proposerId">
<ElSelect v-model="model.proposerId" class="w-full" filterable placeholder="请选择提出人">
<ElOption
v-for="item in memberUserOptions"
:key="item.userId"
:label="item.userNickname"
:value="item.userId"
>
<MemberSelectOption :nickname="item.userNickname" :role-name="item.roleName" />
</ElOption>
<ElOption v-for="item in allUserOptions" :key="item.id" :label="item.nickname" :value="item.id" />
</ElSelect>
</ElFormItem>
@@ -334,9 +334,20 @@ watch(
</ElSelect>
</ElFormItem>
<ElFormItem label="排序值">
<ElInputNumber v-model="model.sort" class="w-full" :min="0" :max="9999" placeholder="请输入排序值" />
<ElFormItem label="预期完成时间">
<ElDatePicker
v-model="model.expectedTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择预期完成时间"
:shortcuts="expectedTimeShortcuts"
class="requirement-operate-dialog__date-picker"
/>
</ElFormItem>
<!-- <ElFormItem label="排序值">-->
<!-- <ElInputNumber v-model="model.sort" class="w-full" :min="0" :max="9999" placeholder="请输入排序值" />-->
<!-- </ElFormItem>-->
</BusinessFormSection>
</div>
@@ -397,4 +408,8 @@ watch(
grid-template-columns: 1fr;
}
}
:deep(.requirement-operate-dialog__date-picker.el-date-editor.el-input) {
width: 100%;
}
</style>

View File

@@ -1,10 +1,12 @@
<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue';
import { useResizeObserver } from '@vueuse/core';
import dayjs from 'dayjs';
import {
fetchGetProjectListByProductId,
fetchGetRequirement,
fetchGetRequirementModuleTree,
fetchGetUserSimpleList,
fetchUpdateRequirement
} from '@/service/api';
import { useForm, useFormRules } from '@/hooks/common/form';
@@ -13,7 +15,11 @@ import BusinessAttachmentUploader from '@/components/custom/business-attachment-
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import BusinessFormSection from '@/components/custom/business-form-section.vue';
import BusinessRichTextEditor from '@/components/custom/business-rich-text-editor.vue';
import DictSelect from '@/components/custom/dict-select.vue';
import ReadonlyField from '@/components/custom/readonly-field.vue';
import RequirementTreePicker, {
type RequirementTreePickerNode
} from '@/views/project/project/execution/components/requirement-tree-picker.vue';
import MemberSelectOption from './member-select-option.vue';
defineOptions({ name: 'RequirementDetailDialog' });
@@ -45,32 +51,25 @@ const { formRef, validate } = useForm();
const { createRequiredRule } = useFormRules();
const { getLabel: getCategoryLabel } = useDict(() => props.categoryDictCode);
const { getLabel: getPriorityLabel, enabledDictData: priorityDictData } = useDict(() => props.priorityDictCode);
const { getLabel: getPriorityLabel } = useDict(() => props.priorityDictCode);
const attachmentUploaderRef = ref<InstanceType<typeof BusinessAttachmentUploader> | null>(null);
const richTextEditorRef = ref<InstanceType<typeof BusinessRichTextEditor> | null>(null);
const priorityOptions = computed(() => {
return priorityDictData.value.map(item => ({
label: item.label,
value: Number(item.value)
}));
});
interface Model {
title: string;
description: string | null;
attachments: Api.Project.AttachmentItem[];
reviewRequired: number;
moduleId: string;
moduleId: string | null;
category: string;
priority: number | null;
priority: string | null;
expectedTime: string | null;
proposerId: string;
proposerNickname: string;
currentHandlerUserId: string;
currentHandlerUserNickname: string;
implementProjectId: string | null;
workHours: number | null;
sort: number;
lastStatusReason: string;
}
@@ -79,6 +78,7 @@ const loading = ref(false);
const submitting = ref(false);
const moduleTree = ref<Api.Product.RequirementModule[]>([]);
const projectOptions = ref<Api.Project.Project[]>([]);
const allUserOptions = ref<Api.SystemManage.UserSimple[]>([]);
const model = ref<Model>(createDefaultModel());
const isViewMode = computed(() => props.mode === 'view');
@@ -99,6 +99,10 @@ const memberLabelMap = computed(() => {
return new Map(memberUserOptions.value.map(item => [String(item.userId), item.userNickname]));
});
const allUserLabelMap = computed(() => {
return new Map(allUserOptions.value.map(item => [String(item.id), item.nickname]));
});
const moduleLabelMap = computed(() => {
const map = new Map<string | undefined, string>();
@@ -119,34 +123,33 @@ const projectOptionsMap = computed(() => {
return new Map(projectOptions.value.map(item => [String(item.id), item.projectName]));
});
const flatModuleOptions = computed<Array<{ label: string; value: string }>>(() => {
const options: Array<{ label: string; value: string }> = [];
function walk(modules: Api.Product.RequirementModule[], parentPath: string) {
for (const module of modules) {
const currentPath = `${parentPath}/${module.moduleName}`;
options.push({
label: currentPath,
value: module.id || ''
});
if (module.children?.length) {
walk(module.children, currentPath);
}
}
}
if (moduleTree.value.length > 0) {
walk(moduleTree.value, '');
}
return options;
});
const moduleTreeOptions = computed<RequirementTreePickerNode[]>(() => mapModuleTree(moduleTree.value));
const reviewRequiredOptions = [
{ label: '不需要', value: 0 },
{ label: '需要', value: 1 }
];
function buildExpectedTimeShortcut(text: string, mutator: (date: Date) => void) {
return {
text,
value: () => {
const date = new Date();
mutator(date);
return date;
}
};
}
const expectedTimeShortcuts = [
buildExpectedTimeShortcut('一星期', date => date.setDate(date.getDate() + 7)),
buildExpectedTimeShortcut('两星期', date => date.setDate(date.getDate() + 14)),
buildExpectedTimeShortcut('一个月', date => date.setMonth(date.getMonth() + 1)),
buildExpectedTimeShortcut('三个月', date => date.setMonth(date.getMonth() + 3)),
buildExpectedTimeShortcut('半年', date => date.setMonth(date.getMonth() + 6)),
buildExpectedTimeShortcut('一年', date => date.setFullYear(date.getFullYear() + 1))
];
const rules = computed(() => {
const baseRules: Record<string, App.Global.FormRule[]> = {
title: isEditMode.value ? [createRequiredRule('请输入需求名称')] : [],
@@ -195,20 +198,30 @@ function createDefaultModel(): Model {
description: null,
attachments: [],
reviewRequired: 0,
moduleId: '0',
moduleId: null,
category: '',
priority: 1,
priority: '3',
expectedTime: null,
proposerId: '',
proposerNickname: '',
currentHandlerUserId: '',
currentHandlerUserNickname: '',
implementProjectId: null,
workHours: null,
sort: 0,
lastStatusReason: ''
};
}
function mapModuleTree(modules: Api.Product.RequirementModule[]): RequirementTreePickerNode[] {
return modules
.filter(item => Boolean(item.id))
.map(item => ({
id: item.id || '',
title: item.moduleName,
children: item.children?.length ? mapModuleTree(item.children) : undefined
}));
}
function closeDialog() {
visible.value = false;
}
@@ -239,12 +252,12 @@ async function handleSubmit() {
attachments: [...model.value.attachments],
category: model.value.category,
priority: Number(model.value.priority) as Api.Product.RequirementPriority,
expectedTime: model.value.expectedTime,
proposerId: model.value.proposerId,
proposerNickname: model.value.proposerNickname,
currentHandlerUserId: model.value.currentHandlerUserId,
currentHandlerUserNickname: handler?.userNickname || model.value.currentHandlerUserNickname,
implementProjectId: model.value.implementProjectId,
workHours: model.value.workHours || 0,
sort: model.value.sort
};
@@ -301,20 +314,33 @@ function transformRequirementData(data: Api.Product.Requirement): typeof model.v
description: data.description || null,
attachments: data.attachments ? [...data.attachments] : [],
reviewRequired: data.reviewRequired ?? 0,
moduleId: data.moduleId || '0',
moduleId: data.moduleId || null,
category: data.category || '',
priority: data.priority ?? null,
priority: data.priority === null || data.priority === undefined ? null : String(data.priority),
expectedTime: formatExpectedTime(data.expectedTime),
proposerId: data.proposerId || '',
proposerNickname: data.proposerNickname || '',
currentHandlerUserId: data.currentHandlerUserId || '',
currentHandlerUserNickname: data.currentHandlerUserNickname || '',
implementProjectId: data.implementProjectId || null,
workHours: data.workHours ?? null,
sort: data.sort ?? 0,
lastStatusReason: data.lastStatusReason || ''
};
}
function formatExpectedTime(value?: string | number[] | null): string | null {
if (!value) {
return null;
}
if (Array.isArray(value)) {
const [year, month, day] = value;
return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
}
return dayjs(value).format('YYYY-MM-DD');
}
async function loadRequirementDetail() {
if (!props.productId || !props.requirement?.id) {
return;
@@ -333,6 +359,13 @@ async function loadRequirementDetail() {
model.value = transformRequirementData(data);
}
async function loadAllUsers() {
const { error, data } = await fetchGetUserSimpleList();
if (!error && data) {
allUserOptions.value = data;
}
}
watch(
() => visible.value,
async value => {
@@ -340,7 +373,7 @@ watch(
return;
}
await Promise.all([loadModuleTree(), loadProjectOptions()]);
await Promise.all([loadModuleTree(), loadProjectOptions(), loadAllUsers()]);
if (props.requirement?.id) {
await loadRequirementDetail();
@@ -380,11 +413,14 @@ watch(
<ElFormItem label="模块">
<template v-if="isViewMode">
<ReadonlyField :value="moduleLabelMap.get(model.moduleId) || '--'" />
<ReadonlyField :value="moduleLabelMap.get(model.moduleId || undefined) || '--'" />
</template>
<ElSelect v-else v-model="model.moduleId" class="w-full" filterable placeholder="请选择所属模块">
<ElOption v-for="item in flatModuleOptions" :key="item.value" :label="item.label" :value="item.value" />
</ElSelect>
<RequirementTreePicker
v-else
v-model="model.moduleId"
:data="moduleTreeOptions"
placeholder="搜索或选择所属模块"
/>
</ElFormItem>
<ElFormItem label="是否需要评审">
@@ -397,23 +433,12 @@ watch(
:value="model.priority !== null ? getPriorityLabel(String(model.priority)) || '--' : '--'"
/>
</template>
<ElSelect v-else v-model="model.priority" class="w-full" filterable placeholder="请选择优先级">
<ElOption v-for="item in priorityOptions" :key="item.value" :label="item.label" :value="item.value" />
</ElSelect>
</ElFormItem>
<ElFormItem label="所需工时">
<template v-if="isViewMode">
<ReadonlyField :value="model.workHours != null ? `${model.workHours}小时` : '--'" />
</template>
<ElInputNumber
<DictSelect
v-else
v-model="model.workHours"
class="w-full"
:min="0"
:max="9999"
:precision="1"
placeholder="请输入所需工时"
v-model="model.priority"
:dict-code="priorityDictCode"
placeholder="请选择优先级"
show-remark
/>
</ElFormItem>
@@ -422,7 +447,7 @@ watch(
</ElFormItem>
<ElFormItem label="提出人" prop="proposerId">
<ReadonlyField :value="memberLabelMap.get(model.proposerId) || '--'" />
<ReadonlyField :value="allUserLabelMap.get(model.proposerId) || '--'" />
</ElFormItem>
<ElFormItem label="负责人" prop="currentHandlerUserId">
@@ -447,24 +472,37 @@ watch(
</ElSelect>
</ElFormItem>
<ElFormItem v-if="isViewMode" label="实现项目">
<ElFormItem v-if="isViewMode" label="关联项目">
<ReadonlyField :value="projectOptionsMap.get(model.implementProjectId || '') || '--'" />
</ElFormItem>
<ElFormItem label="排序值">
<template v-if="isViewMode">
<ReadonlyField :value="model.sort" />
</template>
<ElInputNumber
<ElFormItem label="预期完成时间">
<ReadonlyField v-if="isViewMode" :value="model.expectedTime || '--'" />
<ElDatePicker
v-else
v-model="model.sort"
class="w-full"
:min="0"
:max="9999"
placeholder="请输入排序值"
v-model="model.expectedTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择预期完成时间"
:shortcuts="expectedTimeShortcuts"
class="requirement-operate-dialog__date-picker"
/>
</ElFormItem>
<!-- <ElFormItem label="排序值">-->
<!-- <template v-if="isViewMode">-->
<!-- <ReadonlyField :value="model.sort" />-->
<!-- </template>-->
<!-- <ElInputNumber-->
<!-- v-else-->
<!-- v-model="model.sort"-->
<!-- class="w-full"-->
<!-- :min="0"-->
<!-- :max="9999"-->
<!-- placeholder="请输入排序值"-->
<!-- />-->
<!-- </ElFormItem>-->
<ElFormItem v-if="isViewMode && model.lastStatusReason" label="状态变更原因">
<div class="requirement-operate-dialog__readonly-textarea">{{ model.lastStatusReason }}</div>
</ElFormItem>
@@ -480,7 +518,7 @@ watch(
:disabled="isViewMode"
:height="editorHeight"
upload-directory="requirement"
placeholder="请输入需求内容"
:placeholder="isViewMode && isEmptyRichText(model.description) ? '--' : '请输入需求内容'"
/>
</ElFormItem>
</BusinessFormSection>
@@ -528,7 +566,7 @@ watch(
.requirement-operate-dialog__readonly-textarea {
box-sizing: border-box;
width: 100%;
min-height: 100px;
min-height: 65px;
padding: 8px 12px;
border-radius: 4px;
background: linear-gradient(180deg, rgb(241 245 249 / 98%), rgb(226 232 240 / 94%)), rgb(241 245 249);
@@ -545,4 +583,8 @@ watch(
grid-template-columns: 1fr;
}
}
:deep(.requirement-operate-dialog__date-picker.el-date-editor.el-input) {
width: 100%;
}
</style>

View File

@@ -216,15 +216,11 @@ async function handleDeleteModule(module: Api.Product.RequirementModule) {
if (!currentObjectId.value) return;
try {
await ElMessageBox.confirm(
`确定要删除模块 "${module.moduleName}" 吗?该模块下的所有需求将被一并删除。`,
'删除确认',
{
confirmButtonText: '确认删除',
cancelButtonText: '取消',
type: 'warning'
}
);
await ElMessageBox.confirm(`确定要删除模块 "${module.moduleName}" 吗?`, '删除确认', {
confirmButtonText: '确认删除',
cancelButtonText: '取消',
type: 'warning'
});
} catch {
return;
}
@@ -310,12 +306,12 @@ defineExpose({
.requirement-module-tree-card :deep(.el-card__header) {
padding: 12px 16px;
border-bottom: none;
border-bottom: 1px solid #f1f5f9;
}
.requirement-module-tree-card :deep(.el-card__body) {
padding: 0 16px 16px;
height: calc(100% - 48px);
padding: 12px 8px;
height: calc(100% - 49px);
overflow: hidden;
}
@@ -326,68 +322,34 @@ defineExpose({
}
.module-tree-header__title {
color: rgb(15 23 42 / 94%);
font-size: 16px;
font-weight: 700;
color: #1e293b;
font-size: 15px;
font-weight: 600;
}
.module-tree-list {
display: flex;
flex-direction: column;
gap: 10px;
gap: 2px;
min-height: 0;
height: 100%;
overflow-y: auto;
}
.module-tree-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 42px;
padding: 0 14px;
border: 1px solid rgb(226 232 240 / 92%);
border-radius: 14px;
background-color: rgb(248 250 252 / 96%);
color: rgb(71 85 105 / 94%);
font-size: 14px;
cursor: pointer;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
.module-tree-list::-webkit-scrollbar {
width: 4px;
}
.module-tree-item:hover {
transform: translateY(-1px);
border-color: rgb(148 163 184 / 56%);
.module-tree-list::-webkit-scrollbar-track {
background: transparent;
}
.module-tree-item--new {
border-style: dashed;
border-color: rgb(148 163 184 / 56%);
.module-tree-list::-webkit-scrollbar-thumb {
background-color: #e2e8f0;
border-radius: 2px;
}
.module-tree-item__icon {
display: flex;
align-items: center;
flex-shrink: 0;
color: rgb(100 116 139 / 80%);
}
.module-tree-item__content {
flex: 1;
min-width: 0;
overflow: hidden;
}
.module-tree-item__input {
width: 100%;
}
.module-tree-item__input :deep(.el-input__inner) {
height: 28px;
.module-tree-list::-webkit-scrollbar-thumb:hover {
background-color: #cbd5e1;
}
</style>

View File

@@ -0,0 +1,295 @@
<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue';
import { useResizeObserver } from '@vueuse/core';
import dayjs from 'dayjs';
import { fetchSubmitProductRequirementReview } from '@/service/api';
import { useAuthStore } from '@/store/modules/auth';
import { useForm, useFormRules } from '@/hooks/common/form';
import BusinessAttachmentUploader from '@/components/custom/business-attachment-uploader.vue';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import BusinessFormSection from '@/components/custom/business-form-section.vue';
import BusinessRichTextEditor from '@/components/custom/business-rich-text-editor.vue';
import ReadonlyField from '@/components/custom/readonly-field.vue';
import AttendeeUserPicker from '@/components/custom/attendee-user-picker.vue';
defineOptions({ name: 'RequirementReviewDialog' });
interface Props {
productId: string;
requirement: Api.Product.Requirement | null;
memberOptions: Api.Product.ProductMember[];
}
const props = defineProps<Props>();
interface Emits {
(e: 'submitted'): void;
}
const emit = defineEmits<Emits>();
const visible = defineModel<boolean>('visible', {
default: false
});
const authStore = useAuthStore();
const { formRef, validate } = useForm();
const { createRequiredRule } = useFormRules();
const attachmentUploaderRef = ref<InstanceType<typeof BusinessAttachmentUploader> | null>(null);
const richTextEditorRef = ref<InstanceType<typeof BusinessRichTextEditor> | null>(null);
interface Model {
conclusion: Api.Product.RequirementReviewConclusion;
attendees: Api.Product.RequirementReviewAttendeeItem[];
requirementEstimatedHours: number | null;
reviewTime: string | null;
reviewContent: string | null;
attachments: Api.Project.AttachmentItem[];
}
const model = ref<Model>(createDefaultModel());
const submitting = ref(false);
const memberUserOptions = computed(() => props.memberOptions.filter(item => item.status === 0));
const reviewConclusionOptions = [
{ label: '通过评审', value: 0 as Api.Product.RequirementReviewConclusion },
{ label: '不通过评审', value: 1 as Api.Product.RequirementReviewConclusion }
];
const rules = {
conclusion: [createRequiredRule('请选择评审结论')],
attendees: [createRequiredRule('请选择参会人')]
} satisfies Record<string, App.Global.FormRule[]>;
const leftColRef = ref<HTMLElement>();
const editorHeight = ref<string>('45vh');
const ATTACHMENT_SECTION_RESERVE_PX = 140;
useResizeObserver(leftColRef, entries => {
const height = entries[0]?.contentRect.height;
if (height && height > 120) {
editorHeight.value = `${Math.max(height - 60 - ATTACHMENT_SECTION_RESERVE_PX, 200)}px`;
}
});
function createDefaultModel(): Model {
return {
conclusion: 0,
attendees: [],
requirementEstimatedHours: null,
reviewTime: dayjs().format('YYYY-MM-DD'),
reviewContent: null,
attachments: []
};
}
function isEmptyRichText(html: string | null | undefined) {
if (!html) {
return true;
}
const text = html
.replace(/<[^>]+>/g, '')
.replace(/&nbsp;/g, '')
.trim();
if (text) {
return false;
}
return !/<img\b/i.test(html);
}
async function handleSubmit() {
await validate();
if (!props.productId || !props.requirement?.id) {
return;
}
if (!authStore.userInfo.userId) {
window.$message?.warning('未获取到当前登录用户信息');
return;
}
if (attachmentUploaderRef.value?.hasUploading) {
window.$message?.warning('附件正在上传中,请稍候');
return;
}
const payload: Api.Product.RequirementReviewSubmitParams = {
productId: props.productId,
requirementId: props.requirement.id,
operatorId: authStore.userInfo.userId,
conclusion: model.value.conclusion,
reviewContent: isEmptyRichText(model.value.reviewContent) ? null : (model.value.reviewContent ?? null),
requirementEstimatedHours: model.value.requirementEstimatedHours,
attendees: [...model.value.attendees],
attachments: [...model.value.attachments],
reviewTime: model.value.reviewTime
};
submitting.value = true;
const result = await fetchSubmitProductRequirementReview(payload);
submitting.value = false;
if (result.error) {
return;
}
await Promise.all([attachmentUploaderRef.value?.commit(), richTextEditorRef.value?.commit()]);
window.$message?.success('评审提交成功');
visible.value = false;
emit('submitted');
}
watch(
() => visible.value,
async value => {
if (!value) {
return;
}
model.value = createDefaultModel();
await nextTick();
attachmentUploaderRef.value?.initSession();
richTextEditorRef.value?.initSession();
formRef.value?.clearValidate();
}
);
</script>
<template>
<BusinessFormDialog
v-model="visible"
title="评审需求"
width="1100px"
max-body-height="78vh"
:confirm-loading="submitting"
@confirm="handleSubmit"
>
<ElForm ref="formRef" :model="model" :rules="rules" label-position="top" :validate-on-rule-change="false">
<div class="requirement-review-dialog__grid">
<div ref="leftColRef" class="requirement-review-dialog__col-left">
<BusinessFormSection title="评审信息">
<ElFormItem label="需求名称">
<ReadonlyField :value="requirement?.title || '--'" />
<!-- <ElInput :model-value="requirement?.title || ''" readonly placeholder="&#45;&#45;" />-->
</ElFormItem>
<ElFormItem label="评审结论" prop="conclusion">
<ElRadioGroup v-model="model.conclusion">
<ElRadio
v-for="item in reviewConclusionOptions"
:key="item.value"
:value="item.value"
border
style="width: 165px"
>
{{ item.label }}
</ElRadio>
</ElRadioGroup>
</ElFormItem>
<ElFormItem label="参会人" prop="attendees">
<AttendeeUserPicker
v-model="model.attendees"
:team-options="memberUserOptions"
team-tab-label="产品团队"
:show-dept-tab="true"
/>
</ElFormItem>
<ElFormItem label="需求预估工时">
<ElInputNumber
v-model="model.requirementEstimatedHours"
class="w-full"
:min="0"
:step="0.5"
:precision="1"
placeholder="请输入需求预估工时"
/>
</ElFormItem>
<ElFormItem label="实际评审日期">
<ElDatePicker
v-model="model.reviewTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择实际评审日期"
class="requirement-review-dialog__date-picker"
/>
</ElFormItem>
</BusinessFormSection>
</div>
<div class="requirement-review-dialog__col-right">
<BusinessFormSection title="评审内容">
<ElFormItem class="requirement-review-dialog__desc-item">
<BusinessRichTextEditor
ref="richTextEditorRef"
v-model="model.reviewContent"
:height="editorHeight"
upload-directory="requirement-review"
placeholder="请输入评审内容"
/>
</ElFormItem>
</BusinessFormSection>
<BusinessFormSection title="会议资料">
<ElFormItem class="requirement-review-dialog__attachment-item">
<BusinessAttachmentUploader
ref="attachmentUploaderRef"
v-model="model.attachments"
directory="requirement-review"
/>
</ElFormItem>
</BusinessFormSection>
</div>
</div>
</ElForm>
</BusinessFormDialog>
</template>
<style scoped>
.requirement-review-dialog__grid {
display: grid;
grid-template-columns: 360px 1fr;
gap: 24px;
align-items: start;
}
.requirement-review-dialog__col-left,
.requirement-review-dialog__col-right {
min-width: 0;
}
.requirement-review-dialog__col-right {
display: flex;
flex-direction: column;
gap: 16px;
}
.requirement-review-dialog__desc-item,
.requirement-review-dialog__attachment-item {
margin-bottom: 0;
}
@media (width <= 1024px) {
.requirement-review-dialog__grid {
grid-template-columns: 1fr;
}
}
:deep(.requirement-review-dialog__date-picker.el-date-editor.el-input) {
width: 100%;
}
</style>

View File

@@ -0,0 +1,312 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useResizeObserver } from '@vueuse/core';
import dayjs from 'dayjs';
import { fetchGetProductRequirementReview } from '@/service/api';
import BusinessAttachmentUploader from '@/components/custom/business-attachment-uploader.vue';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import BusinessFormSection from '@/components/custom/business-form-section.vue';
import BusinessRichTextEditor from '@/components/custom/business-rich-text-editor.vue';
import ReadonlyField from '@/components/custom/readonly-field.vue';
defineOptions({ name: 'RequirementReviewRecordDialog' });
interface Props {
productId: string;
requirement: Api.Product.Requirement | null;
memberOptions: Api.Product.ProductMember[];
}
const props = defineProps<Props>();
const visible = defineModel<boolean>('visible', {
default: false
});
const loading = ref(false);
const reviewRecord = ref<Api.Product.RequirementReview | null>(null);
const leftColRef = ref<HTMLElement>();
const editorHeight = ref<string>('47vh');
const ATTACHMENT_SECTION_RESERVE_PX = 140;
const ATTENDEE_VISIBLE_COUNT = 5;
useResizeObserver(leftColRef, entries => {
const height = entries[0]?.contentRect.height;
if (height && height > 120) {
editorHeight.value = `${Math.max(height - 60 - ATTACHMENT_SECTION_RESERVE_PX, 200)}px`;
}
});
const operatorLabelMap = computed(() => {
return new Map(props.memberOptions.map(item => [item.userId, item.userNickname]));
});
const conclusionText = computed(() => {
if (!reviewRecord.value) {
return '--';
}
return reviewRecord.value.conclusion === 0 ? '通过评审' : '不通过评审';
});
const operatorText = computed(() => {
if (!reviewRecord.value?.operatorId) {
return '--';
}
return operatorLabelMap.value.get(reviewRecord.value.operatorId) || reviewRecord.value.operatorId;
});
const visibleAttendees = computed(() => reviewRecord.value?.attendees?.slice(0, ATTENDEE_VISIBLE_COUNT) ?? []);
const overflowAttendees = computed(() => reviewRecord.value?.attendees?.slice(ATTENDEE_VISIBLE_COUNT) ?? []);
function formatExpectedTime(value?: string | number[] | null): string {
if (!value) {
return '--';
}
if (Array.isArray(value)) {
const [year, month, day] = value;
return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
}
return dayjs(value).format('YYYY-MM-DD');
}
function formatDateTime(value?: string | null): string {
if (!value) {
return '--';
}
return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
}
async function loadReviewRecord() {
if (!props.productId || !props.requirement?.id) {
reviewRecord.value = null;
return;
}
loading.value = true;
const { error, data } = await fetchGetProductRequirementReview(props.productId, props.requirement.id);
loading.value = false;
if (error || !data) {
reviewRecord.value = null;
return;
}
reviewRecord.value = data;
}
watch(
() => visible.value,
value => {
if (value) {
loadReviewRecord();
} else {
reviewRecord.value = null;
}
}
);
</script>
<template>
<BusinessFormDialog
v-model="visible"
title="查看评审记录"
width="1100px"
max-body-height="78vh"
:loading="loading"
:show-footer="true"
>
<template #footer="{ close }">
<ElButton type="primary" @click="close">关闭</ElButton>
</template>
<ElEmpty v-if="!loading && !reviewRecord" description="暂无评审记录" />
<div v-else class="requirement-review-record-dialog__grid">
<div ref="leftColRef" class="requirement-review-record-dialog__col-left">
<BusinessFormSection title="评审信息">
<ElForm label-position="top">
<ElFormItem label="需求名称">
<ReadonlyField :value="requirement?.title || '--'" />
</ElFormItem>
<ElFormItem label="评审结论">
<ReadonlyField :value="conclusionText" />
</ElFormItem>
<ElFormItem label="评审提交人">
<ReadonlyField :value="operatorText" />
</ElFormItem>
<ElFormItem label="参会人">
<div v-if="reviewRecord?.attendees?.length" class="requirement-review-record-dialog__tags">
<ElTag v-for="item in visibleAttendees" :key="item.userId" effect="light">
{{ item.nickname }}
</ElTag>
<ElPopover
v-if="overflowAttendees.length"
trigger="click"
placement="bottom-start"
:width="280"
popper-class="requirement-review-record-dialog__attendee-popper"
>
<template #reference>
<button type="button" class="requirement-review-record-dialog__tag-more">
+{{ overflowAttendees.length }} 更多
</button>
</template>
<div class="requirement-review-record-dialog__attendee-overflow">
<div class="requirement-review-record-dialog__attendee-overflow-head">
另外
<strong>{{ overflowAttendees.length }}</strong>
</div>
<div class="requirement-review-record-dialog__attendee-overflow-tags">
<ElTag v-for="item in overflowAttendees" :key="item.userId" effect="light">
{{ item.nickname }}
</ElTag>
</div>
</div>
</ElPopover>
</div>
<ReadonlyField v-else value="--" />
</ElFormItem>
<ElFormItem label="需求预估工时">
<ReadonlyField
:value="
reviewRecord?.requirementEstimatedHours !== null &&
reviewRecord?.requirementEstimatedHours !== undefined &&
reviewRecord?.requirementEstimatedHours !== ''
? String(reviewRecord.requirementEstimatedHours)
: '--'
"
/>
</ElFormItem>
<ElFormItem label="实际评审日期">
<ReadonlyField :value="formatExpectedTime(reviewRecord?.reviewTime)" />
</ElFormItem>
<ElFormItem label="提交时间">
<ReadonlyField :value="formatDateTime(reviewRecord?.createTime)" />
</ElFormItem>
</ElForm>
</BusinessFormSection>
</div>
<div class="requirement-review-record-dialog__col-right">
<BusinessFormSection title="评审内容">
<ElFormItem class="requirement-review-record-dialog__desc-item">
<BusinessRichTextEditor
:model-value="reviewRecord?.reviewContent || ''"
disabled
:height="editorHeight"
upload-directory="requirement-review"
placeholder="--"
/>
</ElFormItem>
</BusinessFormSection>
<BusinessFormSection title="会议资料">
<ElFormItem class="requirement-review-record-dialog__attachment-item">
<BusinessAttachmentUploader
:model-value="reviewRecord?.attachments || []"
disabled
directory="requirement-review"
/>
</ElFormItem>
</BusinessFormSection>
</div>
</div>
</BusinessFormDialog>
</template>
<style scoped>
.requirement-review-record-dialog__grid {
display: grid;
grid-template-columns: 360px 1fr;
gap: 24px;
align-items: start;
}
.requirement-review-record-dialog__col-left,
.requirement-review-record-dialog__col-right {
min-width: 0;
}
.requirement-review-record-dialog__col-right {
display: flex;
flex-direction: column;
gap: 16px;
}
.requirement-review-record-dialog__desc-item,
.requirement-review-record-dialog__attachment-item {
margin-bottom: 0;
}
.requirement-review-record-dialog__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.requirement-review-record-dialog__tag-more {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 10px;
border: 1px dashed var(--el-border-color-darker);
border-radius: 999px;
background: transparent;
color: var(--el-color-primary);
cursor: pointer;
font-size: 11.5px;
transition:
border-color 0.15s ease,
background-color 0.15s ease;
}
.requirement-review-record-dialog__tag-more:hover {
border-color: var(--el-color-primary);
background: var(--el-color-primary-light-9);
}
.requirement-review-record-dialog__attendee-overflow {
display: flex;
flex-direction: column;
gap: 10px;
}
.requirement-review-record-dialog__attendee-overflow-head {
color: var(--el-text-color-regular);
font-size: 12px;
}
.requirement-review-record-dialog__attendee-overflow-head strong {
color: var(--el-color-primary);
}
.requirement-review-record-dialog__attendee-overflow-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
max-height: 180px;
overflow-y: auto;
}
@media (width <= 1024px) {
.requirement-review-record-dialog__grid {
grid-template-columns: 1fr;
}
}
</style>

View File

@@ -1,10 +1,9 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { computed, h, onMounted, ref } from 'vue';
import { RDMS_REQ_SOURCE_TYPE_DICT_CODE } from '@/constants/dict';
import { fetchGetRequirementStatusDict } from '@/service/api';
import { useDict } from '@/hooks/business/dict';
import DictSelect from '@/components/custom/dict-select.vue';
import TableSearchPanel from '@/components/custom/table-search-panel.vue';
import TableSearchFields from '@/components/custom/table-search-fields.vue';
import MemberSelectOption from './member-select-option.vue';
defineOptions({ name: 'RequirementSearch' });
@@ -21,7 +20,7 @@ interface Props {
priorityDictCode: string;
}
defineProps<Props>();
const props = defineProps<Props>();
interface Emits {
(e: 'reset'): void;
@@ -45,6 +44,21 @@ const sourceTypeOptions = computed(() => {
}));
});
const memberSelectOptions = computed(() => {
return props.memberOptions.map(item => ({
label: item.nickname,
value: item.id,
roleName: item.roleName
}));
});
function renderMemberOption(option: { label: string; value: string | number; roleName?: string }) {
return h(MemberSelectOption, {
nickname: option.label,
roleName: option.roleName || ''
});
}
async function loadStatusOptions() {
const { error, data } = await fetchGetRequirementStatusDict();
@@ -59,77 +73,58 @@ async function loadStatusOptions() {
}));
}
function reset() {
emit('reset');
}
function search() {
emit('search');
}
onMounted(async () => {
await loadStatusOptions();
});
const fields = computed(() => [
{
key: 'title',
label: '需求名称',
type: 'input' as const,
placeholder: '输入需求名称'
},
{
key: 'priority',
label: '优先级',
type: 'dict' as const,
dictCode: props.priorityDictCode,
placeholder: '筛选优先级'
},
{
key: 'statusCode',
label: '状态',
type: 'select' as const,
placeholder: '筛选状态',
options: requirementStatusOptions.value
},
{
key: 'category',
label: '需求类型',
type: 'dict' as const,
dictCode: props.categoryDictCode,
placeholder: '筛选需求类型'
},
{
key: 'sourceType',
label: '需求来源',
type: 'select' as const,
placeholder: '筛选需求来源',
options: sourceTypeOptions.value
},
{
key: 'currentHandlerUserId',
label: '负责人',
type: 'select' as const,
placeholder: '筛选负责人',
options: memberSelectOptions.value,
renderOption: renderMemberOption
}
]);
</script>
<template>
<TableSearchPanel :model="model" :action-col-lg="6" @reset="reset" @search="search">
<ElCol :lg="6" :md="12" :sm="12">
<ElFormItem label="需求名称">
<ElInput v-model="model.title" clearable placeholder="输入需求名称" />
</ElFormItem>
</ElCol>
<ElCol :lg="6" :md="12" :sm="12">
<ElFormItem label="需求类型">
<DictSelect
v-model="model.category"
:dict-code="categoryDictCode"
clearable
filterable
placeholder="筛选需求类型"
/>
</ElFormItem>
</ElCol>
<ElCol :lg="6" :md="12" :sm="12">
<ElFormItem label="优先级">
<DictSelect v-model="model.priority" :dict-code="priorityDictCode" clearable placeholder="筛选优先级" />
</ElFormItem>
</ElCol>
<ElCol :lg="6" :md="12" :sm="12">
<ElFormItem label="状态">
<ElSelect v-model="model.statusCode" clearable placeholder="筛选状态">
<ElOption
v-for="item in requirementStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</ElSelect>
</ElFormItem>
</ElCol>
<ElCol :lg="6" :md="12" :sm="12">
<ElFormItem label="负责人">
<ElSelect
v-model="model.currentHandlerUserId"
clearable
filterable
placeholder="筛选负责人"
:filter-method="(val: string) => val"
>
<ElOption v-for="item in memberOptions" :key="item.id" :label="item.nickname" :value="item.id">
<MemberSelectOption :nickname="item.nickname" :role-name="item.roleName || ''" />
</ElOption>
</ElSelect>
</ElFormItem>
</ElCol>
<ElCol :lg="6" :md="12" :sm="12">
<ElFormItem label="需求来源">
<ElSelect v-model="model.sourceType" clearable placeholder="筛选需求来源">
<ElOption v-for="item in sourceTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
</ElSelect>
</ElFormItem>
</ElCol>
</TableSearchPanel>
<TableSearchFields v-model="model" :fields="fields" :columns="4" @search="emit('search')" @reset="emit('reset')" />
</template>
<style scoped></style>

View File

@@ -3,11 +3,11 @@ import { computed, nextTick, ref, watch } from 'vue';
import { useResizeObserver } from '@vueuse/core';
import { fetchSplitRequirement } from '@/service/api';
import { useForm, useFormRules } from '@/hooks/common/form';
import { useDict } from '@/hooks/business/dict';
import BusinessAttachmentUploader from '@/components/custom/business-attachment-uploader.vue';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import BusinessFormSection from '@/components/custom/business-form-section.vue';
import BusinessRichTextEditor from '@/components/custom/business-rich-text-editor.vue';
import DictSelect from '@/components/custom/dict-select.vue';
import MemberSelectOption from './member-select-option.vue';
defineOptions({ name: 'RequirementSplitDialog' });
@@ -34,17 +34,34 @@ const visible = defineModel<boolean>('visible', {
const { formRef, validate } = useForm();
const { createRequiredRule } = useFormRules();
const { enabledDictData: priorityDictData } = useDict(() => props.priorityDictCode);
const attachmentUploaderRef = ref<InstanceType<typeof BusinessAttachmentUploader> | null>(null);
const richTextEditorRef = ref<InstanceType<typeof BusinessRichTextEditor> | null>(null);
const priorityOptions = computed(() => {
return priorityDictData.value.map(item => ({
label: item.label,
value: Number(item.value)
}));
});
const reviewRequiredOptions = [
{ label: '不需要', value: 0 },
{ label: '需要', value: 1 }
];
function buildExpectedTimeShortcut(text: string, mutator: (date: Date) => void) {
return {
text,
value: () => {
const date = new Date();
mutator(date);
return date;
}
};
}
const expectedTimeShortcuts = [
buildExpectedTimeShortcut('一星期', date => date.setDate(date.getDate() + 7)),
buildExpectedTimeShortcut('两星期', date => date.setDate(date.getDate() + 14)),
buildExpectedTimeShortcut('一个月', date => date.setMonth(date.getMonth() + 1)),
buildExpectedTimeShortcut('三个月', date => date.setMonth(date.getMonth() + 3)),
buildExpectedTimeShortcut('半年', date => date.setMonth(date.getMonth() + 6)),
buildExpectedTimeShortcut('一年', date => date.setFullYear(date.getFullYear() + 1))
];
interface Model {
title: string;
@@ -52,9 +69,9 @@ interface Model {
attachments: Api.Project.AttachmentItem[];
reviewRequired: number;
category: string;
priority: number | null;
priority: string | null;
expectedTime: string | null;
currentHandlerUserId: string;
workHours: number | null;
sort: number;
}
@@ -66,16 +83,10 @@ const memberUserOptions = computed(() => {
return props.memberOptions.filter(m => m.status === 0);
});
const reviewRequiredOptions = [
{ label: '不需要', value: 0 },
{ label: '需要', value: 1 }
];
const rules = {
title: [createRequiredRule('请输入子需求名称')],
priority: [createRequiredRule('请选择优先级')],
currentHandlerUserId: [createRequiredRule('请选择负责人')],
workHours: [createRequiredRule('请输入所需工时')]
currentHandlerUserId: [createRequiredRule('请选择负责人')]
} satisfies Record<string, App.Global.FormRule[]>;
const leftColRef = ref<HTMLElement>();
@@ -115,9 +126,9 @@ function createDefaultModel(): Model {
attachments: [],
reviewRequired: 0,
category: '',
priority: 1,
priority: '3',
expectedTime: null,
currentHandlerUserId: '',
workHours: null,
sort: 0
};
}
@@ -153,8 +164,8 @@ async function handleSubmit() {
reviewRequired: model.value.reviewRequired as Api.Product.RequirementReviewRequired,
category: model.value.category,
priority: Number(model.value.priority) as Api.Product.RequirementPriority,
expectedTime: model.value.expectedTime,
currentHandlerUserId: model.value.currentHandlerUserId,
workHours: model.value.workHours || 0,
sort: model.value.sort
};
@@ -192,6 +203,10 @@ watch(
model.value.currentHandlerUserId = props.parentRequirement.currentHandlerUserId;
}
if (props.parentRequirement?.expectedTime) {
model.value.expectedTime = props.parentRequirement.expectedTime;
}
await nextTick();
attachmentUploaderRef.value?.initSession();
richTextEditorRef.value?.initSession();
@@ -227,30 +242,25 @@ watch(
</ElFormItem>
<ElFormItem label="是否需要评审">
<ElSelect v-model="model.reviewRequired" class="w-full" placeholder="请选择">
<ElOption
<ElRadioGroup v-model="model.reviewRequired">
<ElRadio
v-for="item in reviewRequiredOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</ElSelect>
border
style="width: 165px"
>
{{ item.label }}
</ElRadio>
</ElRadioGroup>
</ElFormItem>
<ElFormItem label="优先级" prop="priority">
<ElSelect v-model="model.priority" class="w-full" filterable placeholder="请选择优先级">
<ElOption v-for="item in priorityOptions" :key="item.value" :label="item.label" :value="item.value" />
</ElSelect>
</ElFormItem>
<ElFormItem label="所需工时" prop="workHours">
<ElInputNumber
v-model="model.workHours"
class="w-full"
:min="0"
:max="9999"
:precision="1"
placeholder="请输入所需工时"
<DictSelect
v-model="model.priority"
:dict-code="priorityDictCode"
placeholder="请选择优先级"
show-remark
/>
</ElFormItem>
@@ -267,9 +277,20 @@ watch(
</ElSelect>
</ElFormItem>
<ElFormItem label="排序值">
<ElInputNumber v-model="model.sort" class="w-full" :min="0" :max="9999" placeholder="请输入排序值" />
<ElFormItem label="预期完成时间">
<ElDatePicker
v-model="model.expectedTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择预期完成时间"
:shortcuts="expectedTimeShortcuts"
class="requirement-operate-dialog__date-picker"
/>
</ElFormItem>
<!-- <ElFormItem label="排序值">-->
<!-- <ElInputNumber v-model="model.sort" class="w-full" :min="0" :max="9999" placeholder="请输入排序值" />-->
<!-- </ElFormItem>-->
</BusinessFormSection>
</div>
@@ -330,4 +351,8 @@ watch(
grid-template-columns: 1fr;
}
}
:deep(.requirement-operate-dialog__date-picker.el-date-editor.el-input) {
width: 100%;
}
</style>

View File

@@ -3,7 +3,6 @@ import { transformRecordToOption } from '@/utils/common';
import IconMdiPencilOutline from '~icons/mdi/pencil-outline';
import IconMdiCheckOutline from '~icons/mdi/check-outline';
import IconMdiCheckCircleOutline from '~icons/mdi/check-circle-outline';
import IconMdiSync from '~icons/mdi/sync';
import IconMdiPowerSettingsNew from '~icons/mdi/power-settings-new';
import IconMdiShareVariant from '~icons/mdi/share-variant';
import IconMdiDeleteOutline from '~icons/mdi/delete-outline';
@@ -12,39 +11,43 @@ import IconMdiClose from '~icons/mdi/close';
import IconTablerSitemap from '~icons/tabler/sitemap';
import IconTablerCircleX from '~icons/tabler/circle-x';
import IconMaterialSymbolsDescriptionOutline from '~icons/material-symbols/description-outline';
import IconMingcuteForward2Line from '~icons/mingcute/forward-2-line';
export type RequirementStatusActionCode =
| 'claim_to_review'
| 'claim_to_dispatch'
| 'reject'
| 'to_dispatch'
| 'pass_review'
| 'reject_review'
| 'dispatch'
| 'cancel'
| 'accept'
| 'close';
| 'close'
| 'reject';
export const requirementStatusRecord: Record<Api.Product.RequirementStatusCode, string> = {
pending_confirm: '待认',
pending_claim: '待认',
pending_review: '待评审',
pending_dispatch: '待分流',
pending_dispatch: '待指派',
reviewed: '已评审',
review_rejected: '评审未过',
implementing: '实施中',
accepted: '已验收',
closed: '已关闭',
rejected: '已拒绝',
cancelled: '已取消'
};
export const requirementStatusOptions = transformRecordToOption(requirementStatusRecord);
transformRecordToOption(requirementStatusRecord);
export const requirementStatusActionRecord: Record<RequirementStatusActionCode, string> = {
claim_to_review: '认领',
claim_to_dispatch: '认领',
reject: '拒绝',
to_dispatch: '评审通过',
dispatch: '分流',
pass_review: '评审通过',
reject_review: '评审通过',
dispatch: '指派',
cancel: '取消',
accept: '验收通过',
close: '关闭'
close: '关闭',
reject: '拒绝'
};
/**
@@ -55,9 +58,11 @@ export const requirementStatusActionRecord: Record<RequirementStatusActionCode,
export const ACTION_ICON_MAP: Record<string, object> = {
split: markRaw(IconTablerSitemap),
edit: markRaw(IconMdiPencilOutline),
forward: markRaw(IconMingcuteForward2Line),
claim_to_review: markRaw(IconMaterialSymbolsDescriptionOutline),
claim_to_dispatch: markRaw(IconMdiCheckOutline),
to_dispatch: markRaw(IconMdiGlasses),
pass_review: markRaw(IconMdiGlasses),
reject_review: markRaw(IconMdiGlasses),
dispatch: markRaw(IconMdiShareVariant),
accept: markRaw(IconMdiCheckCircleOutline),
reject: markRaw(IconMdiClose),
@@ -76,7 +81,8 @@ export const ACTION_TYPE_MAP: Record<string, 'primary' | 'success' | 'danger'> =
edit: 'primary',
claim_to_review: 'primary',
claim_to_dispatch: 'primary',
to_dispatch: 'primary',
pass_review: 'primary',
reject_review: 'danger',
dispatch: 'primary',
accept: 'primary',
reject: 'danger',
@@ -84,47 +90,22 @@ export const ACTION_TYPE_MAP: Record<string, 'primary' | 'success' | 'danger'> =
close: 'danger',
delete: 'danger'
};
export function getRequirementStatusLabel(status: Api.Product.RequirementStatusCode) {
return requirementStatusRecord[status];
}
export function getRequirementStatusTagType(status: Api.Product.RequirementStatusCode): UI.ThemeColor {
const statusTagTypeMap: Record<Api.Product.RequirementStatusCode, UI.ThemeColor> = {
pending_confirm: 'info',
pending_review: 'warning',
pending_claim: 'info',
pending_review: 'info',
pending_dispatch: 'primary',
reviewed: 'success',
review_rejected: 'danger',
implementing: 'primary',
accepted: 'success',
closed: 'info',
closed: 'danger',
rejected: 'danger',
cancelled: 'danger'
};
return statusTagTypeMap[status];
}
export function getRequirementActionLabel(actionCode: RequirementStatusActionCode) {
return requirementStatusActionRecord[actionCode];
}
export function getRequirementActionTagType(
actionCode: RequirementStatusActionCode
): 'primary' | 'success' | 'warning' | 'danger' | 'info' {
const actionTagTypeMap: Record<RequirementStatusActionCode, 'primary' | 'success' | 'warning' | 'danger' | 'info'> = {
claim_to_review: 'primary',
claim_to_dispatch: 'primary',
reject: 'danger',
to_dispatch: 'success',
dispatch: 'primary',
cancel: 'danger',
accept: 'success',
close: 'info'
};
return actionTagTypeMap[actionCode];
}
export function isRequirementActionTerminal(actionCode: RequirementStatusActionCode) {
const terminalActions: RequirementStatusActionCode[] = ['reject', 'cancel', 'close'];
return terminalActions.includes(actionCode);

View File

@@ -4,6 +4,8 @@ import { useMediaQuery } from '@vueuse/core';
import { LAYOUT_SCROLL_EL_ID } from '@sa/materials';
import { objectContextDomainConfigs } from '@/constants/object-context';
import {
fetchBatchCreateProductMembers,
fetchBatchInactiveProductMembers,
fetchChangeProductStatus,
fetchCreateProductMember,
fetchDeleteProduct,
@@ -15,12 +17,15 @@ import {
fetchUpdateProductMember,
fetchUpdateProductSettingBaseInfo
} from '@/service/api';
import { useAuthStore } from '@/store/modules/auth';
import { useObjectContextStore } from '@/store/modules/object-context';
import { useThemeStore } from '@/store/modules/theme';
import { useRouterPush } from '@/hooks/common/router';
import ProductTeamBatchDialog, {
type BatchMemberPayload
} from '@/views/product/shared/components/product-team-batch-dialog.vue';
import { useCurrentProduct } from '../shared/use-current-product';
import BaseInfoDialog from './modules/base-info-dialog.vue';
import MemberBatchRemoveDialog from './modules/member-batch-remove-dialog.vue';
import MemberOperateDialog from './modules/member-operate-dialog.vue';
import MemberRemoveDialog from './modules/member-remove-dialog.vue';
import ProductDeleteDialog from './modules/product-delete-dialog.vue';
@@ -40,7 +45,6 @@ import {
defineOptions({ name: 'ProductSetting' });
const authStore = useAuthStore();
const objectContextStore = useObjectContextStore();
const themeStore = useThemeStore();
const { routerPush } = useRouterPush();
@@ -70,7 +74,11 @@ const pageLoading = ref(false);
const memberLoading = ref(false);
const baseInfoVisible = ref(false);
const memberOperateVisible = ref(false);
const memberBatchVisible = ref(false);
const memberRemoveVisible = ref(false);
const memberBatchRemoveVisible = ref(false);
const teamPanelRef = ref<InstanceType<typeof SettingTeamPanel> | null>(null);
const selectedBatchRemoveMembers = ref<Api.Product.ProductMember[]>([]);
const statusActionVisible = ref(false);
const deleteVisible = ref(false);
const memberOperateMode = ref<'create' | 'edit'>('create');
@@ -87,9 +95,7 @@ const baseInfo = computed(() => settings.value?.baseInfo || null);
const lifecycle = computed(() => settings.value?.lifecycle || null);
const canManageTeam = computed(() =>
canManageProductTeam({
buttonCodes: objectContextStore.buttonCodes,
loginUserId: authStore.userInfo.userId,
currentManagerUserId: currentManager.value?.userId
buttonCodes: objectContextStore.buttonCodes
})
);
const visibleSectionKeys = computed(() =>
@@ -217,9 +223,7 @@ function scrollToSection(key: string) {
}
function openCreateMember() {
memberOperateMode.value = 'create';
selectedMember.value = null;
memberOperateVisible.value = true;
memberBatchVisible.value = true;
}
function openEditMember(member: Api.Product.ProductMember) {
@@ -233,6 +237,12 @@ function openRemoveMember(member: Api.Product.ProductMember) {
memberRemoveVisible.value = true;
}
function openBatchRemoveMember(targetMembers: Api.Product.ProductMember[]) {
if (!targetMembers.length) return;
selectedBatchRemoveMembers.value = targetMembers;
memberBatchRemoveVisible.value = true;
}
function openLifecycleAction(action: Api.Product.ProductLifecycleAction) {
selectedAction.value = action;
statusActionVisible.value = true;
@@ -288,6 +298,29 @@ async function handleSubmitMemberOperate(event: {
}
}
async function handleSubmitMemberBatch(payloads: BatchMemberPayload[]) {
if (!currentObjectId.value || !payloads.length) {
return;
}
const { error } = await fetchBatchCreateProductMembers(currentObjectId.value, {
members: payloads.map(item => ({
userId: item.userId,
roleId: item.roleId,
remark: item.remark.trim() || null
}))
});
if (error) {
return;
}
window.$message?.success(`已新增 ${payloads.length} 名成员`);
memberBatchVisible.value = false;
await Promise.all([loadMembers(), loadSettings()]);
}
async function handleSubmitRemoveMember(payload: Api.Product.InactiveProductMemberParams) {
if (!currentObjectId.value || !selectedMember.value?.id) {
return;
@@ -305,6 +338,30 @@ async function handleSubmitRemoveMember(payload: Api.Product.InactiveProductMemb
await Promise.all([loadMembers(), loadSettings()]);
}
async function handleSubmitBatchRemoveMember(payload: { reason: string | null }) {
if (!currentObjectId.value || !selectedBatchRemoveMembers.value.length) {
return;
}
const memberIds = selectedBatchRemoveMembers.value.map(item => item.id).filter((id): id is string => Boolean(id));
if (!memberIds.length) return;
const { error } = await fetchBatchInactiveProductMembers(currentObjectId.value, {
memberIds,
reason: payload.reason
});
if (error) return;
window.$message?.success(`已移出 ${memberIds.length} 名成员`);
memberBatchRemoveVisible.value = false;
selectedBatchRemoveMembers.value = [];
teamPanelRef.value?.clearSelection();
await Promise.all([loadMembers(), loadSettings()]);
}
async function handleSubmitLifecycleAction(payload: Api.Product.ChangeProductStatusParams) {
if (!currentObjectId.value || !selectedAction.value) {
return;
@@ -393,6 +450,7 @@ watch(
<section :id="sectionIdMap.team" class="product-setting-page__section">
<SettingTeamPanel
ref="teamPanelRef"
:members="members"
:role-options="roleOptions"
:loading="memberLoading"
@@ -400,6 +458,7 @@ watch(
@create="openCreateMember"
@edit="openEditMember"
@remove="openRemoveMember"
@batch-remove="openBatchRemoveMember"
/>
</section>
@@ -427,11 +486,23 @@ watch(
:disabled-user-ids="members.filter(member => member.status === 0).map(member => member.userId)"
@submit="handleSubmitMemberOperate"
/>
<ProductTeamBatchDialog
v-model:visible="memberBatchVisible"
:user-options="userOptions"
:role-options="roleOptions"
:disabled-user-ids="members.filter(member => member.status === 0).map(member => member.userId)"
@submit="handleSubmitMemberBatch"
/>
<MemberRemoveDialog
v-model:visible="memberRemoveVisible"
:member="selectedMember"
@submit="handleSubmitRemoveMember"
/>
<MemberBatchRemoveDialog
v-model:visible="memberBatchRemoveVisible"
:members="selectedBatchRemoveMembers"
@submit="handleSubmitBatchRemoveMember"
/>
<StatusActionDialog
v-model:visible="statusActionVisible"
:action="selectedAction"

View File

@@ -0,0 +1,75 @@
<script setup lang="ts">
import { computed, reactive, watch } from 'vue';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
defineOptions({ name: 'MemberBatchRemoveDialog' });
interface Props {
members: Api.Product.ProductMember[];
}
interface Emits {
(e: 'submit', payload: { reason: string | null }): void;
}
const props = defineProps<Props>();
const emit = defineEmits<Emits>();
const visible = defineModel<boolean>('visible', {
default: false
});
const model = reactive({
reason: ''
});
const previewNames = computed(() => {
const names = props.members.map(item => item.userNickname || item.userId || '').filter(Boolean);
if (names.length <= 5) {
return names.join('、');
}
return `${names.slice(0, 5).join('、')}${names.length}`;
});
function handleConfirm() {
emit('submit', {
reason: model.reason.trim() || null
});
}
watch(
() => visible.value,
value => {
if (!value) {
return;
}
model.reason = '';
}
);
</script>
<template>
<BusinessFormDialog v-model="visible" title="批量移出成员" preset="sm" @confirm="handleConfirm">
<ElAlert
:title="`确认将选中的 ${props.members.length} 名成员(${previewNames})从当前产品团队中移出吗?`"
type="warning"
:closable="false"
class="mb-16px"
/>
<ElForm label-position="top">
<ElFormItem label="移出原因">
<ElInput
v-model="model.reason"
type="textarea"
:rows="4"
maxlength="500"
show-word-limit
placeholder="请输入移出原因(统一应用到所有选中成员)"
/>
</ElFormItem>
</ElForm>
</BusinessFormDialog>
</template>

View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import type { TableInstance } from 'element-plus';
import { filterProductMembers, formatProductMemberDate, getProductTeamTableHeight } from '../shared';
defineOptions({ name: 'SettingTeamPanel' });
@@ -15,6 +16,7 @@ interface Emits {
(e: 'create'): void;
(e: 'edit', member: Api.Product.ProductMember): void;
(e: 'remove', member: Api.Product.ProductMember): void;
(e: 'batch-remove', members: Api.Product.ProductMember[]): void;
}
const props = withDefaults(defineProps<Props>(), {
@@ -26,19 +28,41 @@ const emit = defineEmits<Emits>();
const searchKeyword = ref('');
const selectedRoleId = ref('');
const teamTableHeight = getProductTeamTableHeight(5);
const tableRef = ref<TableInstance | null>(null);
const selectedRows = ref<Api.Product.ProductMember[]>([]);
const selectedCount = computed(() => selectedRows.value.length);
function isRowSelectable(row: Api.Product.ProductMember) {
return row.status === 0 && !row.managerFlag;
}
function handleSelectionChange(rows: Api.Product.ProductMember[]) {
selectedRows.value = rows;
}
function handleBatchRemove() {
if (!selectedRows.value.length) return;
emit('batch-remove', [...selectedRows.value]);
}
function clearSelection() {
tableRef.value?.clearSelection();
selectedRows.value = [];
}
defineExpose({ clearSelection });
const roleFilterOptions = computed(() => {
const roleMap = new Map<string, string>();
const seen = new Set<string>();
const result: Api.SystemManage.RoleSimple[] = [];
props.roleOptions.forEach(role => {
if (!roleMap.has(role.id)) {
roleMap.set(role.id, role.name);
}
if (role.visible === 0) return;
if (seen.has(role.id)) return;
seen.add(role.id);
result.push(role);
});
return [...roleMap.entries()].map(([value, label]) => ({
value,
label
}));
return result;
});
const filteredMembers = computed(() =>
filterProductMembers(props.members, {
@@ -49,7 +73,7 @@ const filteredMembers = computed(() =>
const hasFilter = computed(() => Boolean(searchKeyword.value.trim() || selectedRoleId.value));
watch(roleFilterOptions, options => {
if (selectedRoleId.value && !options.some(item => item.value === selectedRoleId.value)) {
if (selectedRoleId.value && !options.some(item => item.id === selectedRoleId.value)) {
selectedRoleId.value = '';
}
});
@@ -72,12 +96,14 @@ function getMemberStatusTagType(status: Api.Product.ProductMemberStatus) {
</div>
<div class="setting-team-panel__toolbar">
<ElSelect v-model="selectedRoleId" clearable placeholder="筛选角色" class="setting-team-panel__role-filter">
<ElOption
v-for="option in roleFilterOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
<ElOption v-for="role in roleFilterOptions" :key="role.id" :label="role.name" :value="role.id">
<div class="setting-team-panel__role-option">
<span class="setting-team-panel__role-option-name">{{ role.name }}</span>
<ElTooltip v-if="role.remark" :content="role.remark" placement="right" :show-after="120">
<icon-ep:info-filled class="setting-team-panel__role-option-info" @click.stop />
</ElTooltip>
</div>
</ElOption>
</ElSelect>
<ElInput v-model="searchKeyword" clearable placeholder="搜索成员姓名" class="setting-team-panel__search" />
<ElButton
@@ -89,35 +115,42 @@ function getMemberStatusTagType(status: Api.Product.ProductMemberStatus) {
>
新增成员
</ElButton>
<ElButton
v-if="!props.readonly"
v-auth="{ code: 'project:product:update', source: 'object' }"
type="danger"
plain
:disabled="selectedCount === 0"
@click="handleBatchRemove"
>
批量移出{{ selectedCount > 0 ? `${selectedCount}` : '' }}
</ElButton>
</div>
</div>
</template>
<ElTable
ref="tableRef"
v-loading="props.loading"
:data="filteredMembers"
:height="teamTableHeight"
:empty-text="hasFilter ? '未找到匹配成员' : '暂无成员'"
border
row-key="id"
@selection-change="handleSelectionChange"
>
<ElTableColumn
v-if="!props.readonly"
type="selection"
width="48"
align="center"
:selectable="(row: Api.Product.ProductMember) => isRowSelectable(row)"
/>
<ElTableColumn type="index" label="序号" width="64" align="center" />
<ElTableColumn prop="userNickname" label="成员姓名" min-width="140" />
<ElTableColumn label="当前角色" min-width="180">
<template #default="{ row }">
<div class="setting-team-panel__role-cell">
<span class="setting-team-panel__role-main">{{ row.roleName || '--' }}</span>
<ElTag
v-for="extra in row.additionalRoleNames"
:key="extra"
size="small"
type="info"
effect="plain"
class="setting-team-panel__role-extra"
>
{{ extra }}
</ElTag>
</div>
{{ row.roleName || '--' }}
</template>
</ElTableColumn>
<ElTableColumn label="成员状态" width="110" align="center">
@@ -196,15 +229,31 @@ function getMemberStatusTagType(status: Api.Product.ProductMemberStatus) {
gap: 12px;
}
.setting-team-panel__role-cell {
display: inline-flex;
.setting-team-panel__role-option {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
justify-content: space-between;
gap: 8px;
width: 100%;
}
.setting-team-panel__role-extra {
font-weight: 400;
.setting-team-panel__role-option-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.setting-team-panel__role-option-info {
flex-shrink: 0;
font-size: 14px;
color: var(--el-text-color-placeholder);
cursor: help;
}
.setting-team-panel__role-option-info:hover {
color: var(--el-color-primary);
}
@media (width <= 768px) {

View File

@@ -6,8 +6,6 @@ export interface ProductManagerMemberLike {
interface ProductTeamManageContext {
buttonCodes: readonly string[];
loginUserId: string | null | undefined;
currentManagerUserId: string | null | undefined;
}
interface ProductLifecycleStatusSummary {
@@ -203,13 +201,5 @@ export function getProductLifecycleActionCardMeta(actionCode: Api.Product.Produc
}
export function canManageProductTeam(context: ProductTeamManageContext) {
const hasUpdateAuth = context.buttonCodes.includes('project:product:update');
const loginUserId = String(context.loginUserId || '');
const currentManagerUserId = String(context.currentManagerUserId || '');
if (!hasUpdateAuth || !loginUserId || !currentManagerUserId) {
return false;
}
return loginUserId === currentManagerUserId;
return context.buttonCodes.includes('project:product:update');
}

File diff suppressed because it is too large Load Diff

View File

@@ -1,20 +1,29 @@
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { OBJECT_CONTEXT_QUERY_KEY } from '@/constants/object-context';
import { OBJECT_CONTEXT_QUERY_KEY, getObjectContextDomainConfigByPath } from '@/constants/object-context';
import { useObjectContextStore } from '@/store/modules/object-context';
import { normalizeCurrentProductSummary, resolveObjectIdFromQuery } from './product-context-shared';
export function useCurrentProduct() {
const route = useRoute();
const objectContextStore = useObjectContextStore();
const isProductDomainRoute = computed(() => getObjectContextDomainConfigByPath(route.path)?.domainKey === 'product');
const currentObjectId = computed(() => {
if (!isProductDomainRoute.value) {
return '';
}
return resolveObjectIdFromQuery(route.query[OBJECT_CONTEXT_QUERY_KEY], objectContextStore.objectId);
});
const currentProduct = computed(() =>
normalizeCurrentProductSummary(objectContextStore.objectSummary, objectContextStore.objectName)
);
const currentProduct = computed(() => {
if (!isProductDomainRoute.value) {
return null;
}
return normalizeCurrentProductSummary(objectContextStore.objectSummary, objectContextStore.objectName);
});
return {
currentObjectId,

View File

@@ -1,6 +1,6 @@
<script setup lang="tsx">
import { computed, onMounted, reactive, ref } from 'vue';
import { ElButton, ElTag } from 'element-plus';
import { ElButton, ElProgress, ElTag } from 'element-plus';
import dayjs from 'dayjs';
import { RDMS_OBJECT_DIRECTION_DICT_CODE, RDMS_PROJECT_TYPE_DICT_CODE } from '@/constants/dict';
import { OBJECT_CONTEXT_QUERY_KEY } from '@/constants/object-context';
@@ -22,7 +22,7 @@ const PROJECT_ENTRY_ROUTE_PATH = '/project/list';
function getInitSearchParams(): Api.Project.ProjectSearchParams {
return {
pageNo: 1,
pageSize: 10,
pageSize: 20,
keyword: '',
directionCode: undefined,
projectType: undefined,
@@ -55,12 +55,12 @@ function sortManagerOptions(list: Api.SystemManage.UserSimple[]) {
return list.slice().sort((left, right) => left.nickname.localeCompare(right.nickname, 'zh-CN'));
}
function formatDateTime(value?: string | null) {
function formatDate(value?: string | null) {
if (!value) {
return '--';
}
return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
return dayjs(value).format('YYYY-MM-DD');
}
const searchParams = reactive(getInitSearchParams());
@@ -170,9 +170,20 @@ const { columns, columnChecks, data, loading, getDataByPage, mobilePagination }
{
prop: 'progressRate',
label: '进度',
width: 100,
align: 'center',
formatter: () => '--'
width: 160,
formatter: row => {
const percentage = row.progressRate ?? 0;
return (
<div style="padding: 0 8px;">
<ElProgress
percentage={percentage}
status={percentage >= 100 ? 'success' : undefined}
stroke-width={18}
text-inside
/>
</div>
);
}
},
{
prop: 'statusCode',
@@ -188,7 +199,7 @@ const { columns, columnChecks, data, loading, getDataByPage, mobilePagination }
label: '最近更新',
width: 170,
align: 'center',
formatter: row => formatDateTime(row.updateTime)
formatter: row => formatDate(row.updateTime)
}
],
immediate: false
@@ -321,7 +332,7 @@ onMounted(async () => {
<template #icon>
<icon-ic-round-plus class="text-icon" />
</template>
</ElButton>
</template>
</TableHeaderOperation>

View File

@@ -6,7 +6,7 @@ import { RDMS_OBJECT_DIRECTION_DICT_CODE, RDMS_PROJECT_TYPE_DICT_CODE } from '@/
import { fetchGetProductPage } from '@/service/api';
import { useDict } from '@/hooks/business/dict';
import { useForm, useFormRules } from '@/hooks/common/form';
import BusinessUserSelect from '@/components/custom/business-user-select.vue';
import BusinessUserPicker from '@/components/custom/business-user-picker.vue';
import DictSelect from '@/components/custom/dict-select.vue';
defineOptions({ name: 'ProjectCreateBaseForm' });
@@ -204,6 +204,19 @@ defineExpose({ validate: runValidate });
<ElInput v-model="model.projectCode" clearable placeholder="不填则由后端自动生成" />
</ElFormItem>
</ElCol>
<ElCol :span="12">
<ElFormItem label="所属产品" prop="productId">
<ElSelect
v-model="model.productId"
clearable
filterable
placeholder="选择所属产品(可选),选择后将锁定项目方向"
@change="onProductChange"
>
<ElOption v-for="item in productOptions" :key="item.id" :label="item.name" :value="item.id" />
</ElSelect>
</ElFormItem>
</ElCol>
<ElCol :span="12">
<ElFormItem label="项目方向" prop="directionCode">
<DictSelect
@@ -232,24 +245,12 @@ defineExpose({ validate: runValidate });
/>
</ElFormItem>
</ElCol>
<ElCol :span="12">
<ElFormItem label="所属产品" prop="productId">
<ElSelect
v-model="model.productId"
clearable
filterable
placeholder="选择所属产品(可选),选择后将锁定项目方向"
@change="onProductChange"
>
<ElOption v-for="item in productOptions" :key="item.id" :label="item.name" :value="item.id" />
</ElSelect>
</ElFormItem>
</ElCol>
<ElCol :span="12">
<ElFormItem label="项目经理" prop="managerUserId">
<BusinessUserSelect
<BusinessUserPicker
v-model="model.managerUserId"
:options="managerUserOptions"
:user-options="managerUserOptions"
title="选择项目经理"
placeholder="请选择项目经理"
/>
</ElFormItem>

Some files were not shown because too many files have changed in this diff Show More