qiaoxinjiu/effekt-interface-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

功能更新：新增Bug管理模块，完善用户角色分配，优化项目设置

Browse Source
This commit is contained in:
qiaoxinjiu
2026-05-07 19:43:05 +08:00
parent 916248483c
commit f8211673ee
44 changed files with 10410 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.plan/MEVsZvRZopyrJGc3cNsiN.md
View File

@@ -40,8 +40,8 @@
- `src/api/dataFactoryApi.js`
2. 统一复用 `src/utils/request.js`。
3. 尽量映射到 REST 风格路径，例如：
- `/api/v1/projects/{projectId}/cases`
- `/api/v1/projects/{projectId}/plans`
- `/api/v1/projects/{projectId}/case`
- `/api/v1/projects/{projectId}/plan`
- `/api/v1/projects/{projectId}/reports`
- `/api/v1/projects/{projectId}/data/*`
4. 对分页、详情、创建、更新、执行、导出等接口做最小可用封装。

165
.plan/fsKfEW4Z6YGlqrLCshlxS.md Normal file
View File

@@ -0,0 +1,165 @@
# 执行计划：用例管理与模块管理改造
## 目标
根据后端 `Case 与 Module` 接口文档，改造前端接口调用与用例管理页面：
- 用例管理页面包含两个表格：模块列表、用例列表。
- 模块支持查询、新增、删除，并展示模块字段与搜索条件。
- 用例列表支持项目名称、用例标题模糊搜索、优先级、是否自动化、标签等条件。
- 用例列表展示项目名称、用例编号、用例标题、优先级、类型、状态、是否实现自动化、标签等字段。
## 已定位文件
- `src/api/caseApi.js`
- 已有 `module/tree/create/update/delete` 与 `case/list/detail/create/update/delete` 封装。
- 当前部分参数仍使用旧字段：`project_id`、`case_id` 等，需要调整为文档里的 camelCase 参数。
- `src/components/TestPlatform/Case/CaseList.vue`
- 当前只有一个用例表格。
- 当前搜索条件只有项目ID、关键词、优先级。
- 当前缺少分页状态定义与模块管理区。
- `src/components/TestPlatform/Case/CaseEditor.vue`
- 当前表单字段使用 `case_type` 等后端返回字段，提交时需要按文档转为 `caseType`、`moduleId`、`caseKey`、`isAuto` 等。
- `src/router/index.js`
- 用例相关路由已存在，无需新增路由。
## 改造步骤
### 1. 调整接口封装 `src/api/caseApi.js`
- 保留已有函数名，降低页面调用改动成本。
- `getCaseList(projectId, params)` 改为请求参数包含：
- `projectId`
- `pageNo`
- `pageSize`
- `projectName`
- `moduleId`
- `keyword`
- `priority`
- `caseType`
- `status`
- `isAuto`
- `tag`
- `getCaseDetail(projectId, caseId)` 改为传 `caseId`，必要时兼容 `projectId`。
- `createCase(projectId, data)` 改为提交 `projectId`，不再提交 `project_id`。
- `updateCase(projectId, caseId, data)` 改为提交 `caseId`，不再提交 `id/project_id` 旧字段。
- `deleteCase(projectId, caseId)` 改为提交 `{ caseId }`，必要时保留 `projectId` 不影响后端。
- 模块接口保持：
- `getModuleTree(params)` -> `/module/tree`
- `createModule(data)` -> `/module/create`
- `deleteModule(data)` -> `/module/delete`
- 删除模块调用传 `{ moduleId }`。
### 2. 改造 `CaseList.vue` 页面布局
- 在同一个页面内使用两个 `page-section`：
1. `模块列表`
2. `用例列表`
- 模块列表区：
- 搜索条件：`projectId`、`parentId`。
- 按钮：查询、新增模块。
- 表格字段：
- 模块ID：`id`
- 项目ID：`project_id`
- 父模块ID：`parent_id`
- 模块名称：`name`
- 排序：`sort_order`
- 路径：`path`
- 创建时间：`created_time`
- 更新时间：`updated_time`
- 操作：删除
- 新增模块弹窗字段：
- `projectId` 必填
- `name` 必填
- `parentId`
- `sortOrder`
- `path`
- 删除模块调用 `deleteModule({ moduleId: row.id })`。
### 3. 改造用例列表搜索条件
- 搜索表单字段：
- `projectId`
- `projectName`
- `keyword`（用例标题模糊搜索）
- `priority`
- `caseType`
- `status`
- `isAuto`
- `tag`
- 查询时传入分页：`pageNo`、`pageSize`。
- 查询成功后兼容读取：`data.list || data.items || []`，`data.total || list.length`。
### 4. 改造用例列表表格字段展示
- 表格字段：
- 项目名称：`project_name`
- 用例编号：`case_key`
- 用例标题：`title`
- 优先级：`priority`，格式化为 `P0/P1/P2/P3`
- 类型：`case_type`，格式化为 `功能/性能/安全/接口`
- 状态：`status`，格式化为 `正常/已废弃/评审中`
- 是否实现自动化：`is_auto`，格式化为 `已实现/未实现`
- 标签：`tags`，数组使用 `el-tag` 展示，字符串兜底直接展示
- 操作：编辑、评审、删除
- 删除用例调用 `deleteCase(projectId, row.id)`。
### 5. 补齐分页与交互逻辑
- `CaseList.vue` 增加：
- `pageNo`
- `pageSize`
- `total`
- `moduleLoading`
- `moduleData`
- `moduleQueryForm`
- `moduleDialogVisible`
- `moduleSubmitting`
- `moduleForm`
- `moduleRules`
- 增加方法：
- `fetchModuleList`
- `openModuleCreate`
- `resetModuleForm`
- `submitModuleCreate`
- `removeModule`
- `handleSizeChange`
- `handleCurrentChange`
- `formatPriority`
- `formatCaseType`
- `formatStatus`
- `formatIsAuto`
- `formatTags`
### 6. 调整 `CaseEditor.vue` 提交字段
- 详情加载：兼容后端 snake_case 返回字段，映射到表单：
- `module_id` -> `moduleId`
- `case_key` -> `caseKey`
- `case_type` -> `caseType`
- `is_auto` -> `isAuto`
- 表单补充字段：
- 模块ID
- 用例编号
- 状态
- 是否自动化
- 保存前构造 payload：
- `projectId`
- `moduleId`
- `caseKey`
- `title`
- `preconditions`
- `steps`
- `priority`
- `caseType`
- `tags`
- `status`
- `isAuto`
- 新增调用 `createCase(projectId, payload)`。
- 编辑调用 `updateCase(projectId, caseId, payload)`。
### 7. 验证
- 优先运行：`npm run build`。
- 如构建耗时或环境缺依赖，至少做静态检查：确认 Vue 模板字段、方法引用、导入函数均存在。
## 预期改动范围
- 修改：`src/api/caseApi.js`
- 修改：`src/components/TestPlatform/Case/CaseList.vue`
- 修改：`src/components/TestPlatform/Case/CaseEditor.vue`
- 不新增路由，不新增依赖。
## 风险与兼容处理
- 后端返回字段是 snake_case，前端提交字段是 camelCase，需要在编辑页做映射。
- 若后端仍兼容旧字段，当前改造会优先使用新文档字段；删除/详情可保留少量兼容参数但不依赖旧字段。
- 模块树接口可能返回树形结构，但当前需求是模块列表 table；表格直接展示返回 list，不做树形展开，除非后续明确需要树表。

1
index.html
View File

@@ -4,6 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>造数管理系统</title>
<link rel="stylesheet" href="https://unpkg.com/wangeditor@4.7.15/dist/css/style.css" />
<style>
body{
height: 100%;

226
package-lock.json generated
View File

@@ -9,13 +9,15 @@
"version": "1.0.0",
"dependencies": {
"axios": "^0.19.2",
"echarts": "^4.9.0",
"element-ui": "^2.13.1",
"npm": "^6.14.5",
"to": "^0.2.9",
"update": "^0.7.4",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.3.0"
"vuex": "^3.3.0",
"wangeditor": "^4.7.15"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
@@ -59,6 +61,27 @@
"npm": ">= 3.0.0"
}
},
"node_modules/@babel/runtime": {
"version": "7.29.2",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
"integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
"license": "MIT",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/runtime-corejs3": {
"version": "7.29.2",
"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.29.2.tgz",
"integrity": "sha512-Lc94FOD5+0aXhdb0Tdg3RUtqT6yWbI/BbFWvlaSJ3gAb9Ks+99nHRDKADVqC37er4eCB0fHyWT+y+K3QOvJKbw==",
"license": "MIT",
"dependencies": {
"core-js-pure": "^3.48.0"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@types/q": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
@@ -113,15 +136,20 @@
}
},
"node_modules/ajv": {
"version": "5.5.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
"integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
"version": "6.15.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
"integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
"dev": true,
"license": "MIT",
"dependencies": {
"co": "^4.6.0",
"fast-deep-equal": "^1.0.0",
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.3.0"
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/epoberezkin"
}
},
"node_modules/ajv-keywords": {
@@ -5480,6 +5508,17 @@
"deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
"hasInstallScript": true
},
"node_modules/core-js-pure": {
"version": "3.49.0",
"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.49.0.tgz",
"integrity": "sha512-XM4RFka59xATyJv/cS3O3Kml72hQXUeGRuuTmMYFxwzc9/7C8OYTaIR/Ji+Yt8DXzsFLNhat15cE/JP15HrCgw==",
"hasInstallScript": true,
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/core-js"
}
},
"node_modules/core-util-is": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -7465,6 +7504,15 @@
"stream-shift": "^1.0.0"
}
},
"node_modules/echarts": {
"version": "4.9.0",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
"integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
"license": "Apache-2.0",
"dependencies": {
"zrender": "4.3.2"
}
},
"node_modules/ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -8673,10 +8721,11 @@
}
},
"node_modules/fast-deep-equal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
"integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=",
"dev": true
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
"dev": true,
"license": "MIT"
},
"node_modules/fast-json-stable-stringify": {
"version": "2.1.0",
@@ -8778,30 +8827,6 @@
"webpack": "^2.0.0 || ^3.0.0 || ^4.0.0"
}
},
"node_modules/file-loader/node_modules/ajv": {
"version": "6.12.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
"integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==",
"dev": true,
"dependencies": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
}
},
"node_modules/file-loader/node_modules/fast-deep-equal": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
"integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
"dev": true
},
"node_modules/file-loader/node_modules/json-schema-traverse": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
"dev": true
},
"node_modules/file-loader/node_modules/schema-utils": {
"version": "0.4.7",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
@@ -11214,10 +11239,11 @@
"dev": true
},
"node_modules/json-schema-traverse": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
"integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=",
"dev": true
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
"dev": true,
"license": "MIT"
},
"node_modules/json-stable-stringify-without-jsonify": {
"version": "1.0.1",
@@ -19350,30 +19376,6 @@
"node": ">= 4"
}
},
"node_modules/postcss-loader/node_modules/ajv": {
"version": "6.12.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
"integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==",
"dev": true,
"dependencies": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
}
},
"node_modules/postcss-loader/node_modules/fast-deep-equal": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
"integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
"dev": true
},
"node_modules/postcss-loader/node_modules/json-schema-traverse": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
"dev": true
},
"node_modules/postcss-loader/node_modules/schema-utils": {
"version": "0.4.7",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
@@ -22537,6 +22539,33 @@
"node": ">= 4.3 < 5.0.0 || >= 5.10"
}
},
"node_modules/schema-utils/node_modules/ajv": {
"version": "5.5.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
"integrity": "sha512-Ajr4IcMXq/2QmMkEmSvxqfLN5zGmJ92gHXAeOXq1OekoH2rfDNsgdDoL2f7QaRCy7G/E6TpxBVdRuNraMztGHw==",
"dev": true,
"license": "MIT",
"dependencies": {
"co": "^4.6.0",
"fast-deep-equal": "^1.0.0",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.3.0"
}
},
"node_modules/schema-utils/node_modules/fast-deep-equal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
"integrity": "sha512-fueX787WZKCV0Is4/T2cyAdM4+x1S3MXXOAhavE1ys/W42SHAPacLTQhucja22QBYrfGw50M2sRiXPtTGv9Ymw==",
"dev": true,
"license": "MIT"
},
"node_modules/schema-utils/node_modules/json-schema-traverse": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
"integrity": "sha512-4JD/Ivzg7PoW8NzdrBSr3UFwC9mHgvI7Z6z3QGBsSHgKaRTUDmyZAAKJo2UbG1kUVfS9WS8bi36N49U1xw43DA==",
"dev": true,
"license": "MIT"
},
"node_modules/select-hose": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -24311,6 +24340,12 @@
"integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
"dev": true
},
"node_modules/tslib": {
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"license": "0BSD"
},
"node_modules/tty-browserify": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -24393,36 +24428,12 @@
"webpack": "^2.0.0 || ^3.0.0 || ^4.0.0"
}
},
"node_modules/uglifyjs-webpack-plugin/node_modules/ajv": {
"version": "6.12.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
"integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==",
"dev": true,
"dependencies": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
}
},
"node_modules/uglifyjs-webpack-plugin/node_modules/commander": {
"version": "2.13.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz",
"integrity": "sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==",
"dev": true
},
"node_modules/uglifyjs-webpack-plugin/node_modules/fast-deep-equal": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
"integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
"dev": true
},
"node_modules/uglifyjs-webpack-plugin/node_modules/json-schema-traverse": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
"dev": true
},
"node_modules/uglifyjs-webpack-plugin/node_modules/schema-utils": {
"version": "0.4.7",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
@@ -25361,6 +25372,17 @@
"vue": "^2.0.0"
}
},
"node_modules/wangeditor": {
"version": "4.7.15",
"resolved": "https://registry.npmjs.org/wangeditor/-/wangeditor-4.7.15.tgz",
"integrity": "sha512-aPTdREd8BxXVyJ5MI+LU83FQ7u1EPd341iXIorRNYSOvoimNoZ4nPg+yn3FGbB93/owEa6buLw8wdhYnMCJQLg==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.11.2",
"@babel/runtime-corejs3": "^7.11.2",
"tslib": "^2.1.0"
}
},
"node_modules/warning-symbol": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/warning-symbol/-/warning-symbol-0.1.0.tgz",
@@ -25764,24 +25786,6 @@
"source-map": "~0.6.1"
}
},
"node_modules/webpack/node_modules/ajv": {
"version": "6.12.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
"integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==",
"dev": true,
"dependencies": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
}
},
"node_modules/webpack/node_modules/fast-deep-equal": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
"integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
"dev": true
},
"node_modules/webpack/node_modules/has-flag": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
@@ -25791,12 +25795,6 @@
"node": ">=0.10.0"
}
},
"node_modules/webpack/node_modules/json-schema-traverse": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
"dev": true
},
"node_modules/webpack/node_modules/source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -26137,6 +26135,12 @@
"resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
"integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
"dev": true
},
"node_modules/zrender": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
"integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g==",
"license": "BSD-3-Clause"
}
}
}

4
package.json
View File

@@ -11,13 +11,15 @@
},
"dependencies": {
"axios": "^0.19.2",
"echarts": "^4.9.0",
"element-ui": "^2.13.1",
"npm": "^6.14.5",
"to": "^0.2.9",
"update": "^0.7.4",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.3.0"
"vuex": "^3.3.0",
"wangeditor": "^4.7.15"
},
"devDependencies": {
"autoprefixer": "^7.1.2",

5
src/App.vue
View File

@@ -5,7 +5,7 @@
</template>
<script>
import { getRoleList } from '@/api/rbacApi'
import { getRoleList, parseMenusFromRoleListResponse } from '@/api/rbacApi'
export default {
name: 'App',
@@ -26,8 +26,7 @@ export default {
return
}
getRoleList({ roleId }).then(res => {
const menus = res && Array.isArray(res.data) ? res.data : []
this.$store.commit('SetUserMenus', menus)
this.$store.commit('SetUserMenus', parseMenusFromRoleListResponse(res))
}).catch(() => {})
}
}

22
src/api/CreateDtapi.js
View File

@@ -49,7 +49,7 @@ export function ItApiDelete(data) {
//对方法的请求参数进行新增获取修改
export function DataAdd(data) {
return request({
url: '/create/data/info/add',
url: '/data-tools/db-builder/info/add',
method: 'post',
data
})
@@ -58,7 +58,7 @@ export function DataAdd(data) {
//刪除造数基本信息
export function DataDelete(data) {
return request({
url: '/create/data/detail/delete',
url: '/data-tools/db-builder/detail/delete',
method: 'post',
data
})
@@ -67,7 +67,7 @@ export function DataDelete(data) {
//接口请求参数列表页查询
export function DataQuery(data) {
return request({
url: '/create/data/info/page',
url: '/data-tools/db-builder/info/page',
method: 'post',
data
})
@@ -76,7 +76,7 @@ export function DataQuery(data) {
//返回待编辑造数请求信息 (详情页)
export function DataAdvance(data) {
return request({
url: '/create/data/info/getAdvance',
url: '/data-tools/db-builder/info/getAdvance',
method: 'post',
data
})
@@ -103,7 +103,7 @@ export function getGitPull(data) {
//刪除造数请求参数信息
export function InfoDelete(data) {
return request({
url: '/create/data/info/delete',
url: '/data-tools/db-builder/info/delete',
method: 'post',
data
})
@@ -112,7 +112,7 @@ export function InfoDelete(data) {
//列表查询造数请求参数信息
export function InfoQuery(data) {
return request({
url: '/create/data/detail/page',
url: '/data-tools/db-builder/detail/page',
method: 'post',
data
})
@@ -121,7 +121,7 @@ export function InfoQuery(data) {
//查找出全部的可用方法与描述进行录库
export function InfoScrapy(data) {
return request({
url: '/create/data/detail/scrapy',
url: '/data-tools/db-builder/detail/scrapy',
method: 'post',
data
})
@@ -130,7 +130,7 @@ export function InfoScrapy(data) {
//运行造数
export function RunCreateData(data) {
return request({
url: '/create/data/run',
url: '/data-tools/db-builder/run',
method: 'post',
data
})
@@ -140,7 +140,7 @@ export function RunCreateData(data) {
//造数结果列表页查询
export function ResultQuery(data) {
return request({
url: '/create/data/result/page',
url: '/data-tools/db-builder/result/page',
method: 'post',
data
})
@@ -149,7 +149,7 @@ export function ResultQuery(data) {
//返回待编辑造数结果 (详情页)
export function ResultAdvance(data) {
return request({
url: '/create/data/result/getAdvance',
url: '/data-tools/db-builder/result/getAdvance',
method: 'post',
data
})
@@ -177,7 +177,7 @@ export function DictQuery(data) {
//抓取入库
export function ScrapyDetail(data) {
return request({
url: '/create/data/detail/scrapy',
url: '/data-tools/db-builder/detail/scrapy',
method: 'post',
data
})

80
src/api/bugApi.js Normal file
View File

@@ -0,0 +1,80 @@
import request from '@/utils/request'
export function getBugList(params) {
return request({
url: '/bug/list',
method: 'get',
params: Object.assign({ pageNo: 1, pageSize: 20 }, params || {})
})
}
export function getBugDetail(bugId) {
return request({
url: '/bug/detail',
method: 'get',
params: {
bugId,
id: bugId
}
})
}
export function createBug(data) {
return request({
url: '/bug/create',
method: 'post',
data: data || {}
})
}
export function updateBug(data) {
return request({
url: '/bug/update',
method: 'post',
data: data || {}
})
}
export function deleteBug(data) {
return request({
url: '/bug/delete',
method: 'post',
data: data || {}
})
}
export function addBugComment(data) {
return request({
url: '/bug/comment/add',
method: 'post',
data: data || {}
})
}
/** Bug 操作历史：POST /bug/history/add */
export function addBugHistory(data) {
return request({
url: '/bug/history/add',
method: 'post',
data: data || {}
})
}
export function getBugStats(params) {
return request({
url: '/bug/stats',
method: 'get',
params: params || {}
})
}
/** 复现步骤截图：POST /bug/upload，表单字段 file；成功返回 data.url */
export function uploadBugStepImage(file) {
const formData = new FormData()
formData.append('file', file)
return request({
url: '/bug/upload',
method: 'post',
data: formData
})
}

21
src/api/caseApi.js
View File

@@ -124,3 +124,24 @@ export function getCaseReviewList(projectId, params) {
params: Object.assign({ project_id: projectId, pageNo: 1, pageSize: 10 }, params || {})
})
}
// 用例导入
export function downloadCaseImportTemplate() {
return request({
url: '/import/template',
method: 'get',
responseType: 'blob'
})
}
export function importCaseExcel(projectId, file) {
const formData = new FormData()
// 后端从 request.form.get('projectId') 读取
formData.append('projectId', projectId)
formData.append('file', file)
return request({
url: '/case/import',
method: 'post',
data: formData
})
}

50
src/api/projectApi.js
View File

@@ -89,3 +89,53 @@ export function deleteEnvironment(data) {
data
})
}
/** 项目 Webhook 配置 */
export function getProjectHookList(params) {
return request({
url: '/project/hook/list',
method: 'get',
params: Object.assign({ pageNo: 1, pageSize: 20 }, params || {})
})
}
export function getProjectHookDetail(hookId) {
return request({
url: '/project/hook/detail',
method: 'get',
params: { hookId }
})
}
export function createProjectHook(data) {
return request({
url: '/project/hook/create',
method: 'post',
data: data || {}
})
}
export function updateProjectHook(data) {
return request({
url: '/project/hook/update',
method: 'post',
data: data || {}
})
}
export function deleteProjectHook(data) {
return request({
url: '/project/hook/delete',
method: 'post',
data: data || {}
})
}
/** 按项目发送 Webhook 测试/通知消息 */
export function sendProjectHookMessage(data) {
return request({
url: '/project/hook/send',
method: 'post',
data: data || {}
})
}

67
src/api/rbacApi.js
View File

@@ -8,6 +8,21 @@ export function getRoleList(params) {
})
}
/** 从 /role/list 响应中取出菜单树（兼容多种 data 形态） */
export function parseMenusFromRoleListResponse(res) {
if (!res) return []
const raw = res.data !== undefined ? res.data : res
if (Array.isArray(raw)) return raw
if (raw && typeof raw === 'object') {
if (Array.isArray(raw.menus)) return raw.menus
if (Array.isArray(raw.menuList)) return raw.menuList
if (Array.isArray(raw.list)) return raw.list
if (Array.isArray(raw.items)) return raw.items
if (Array.isArray(raw.records)) return raw.records
}
return []
}
export function getRolePageList(params) {
return request({
url: '/role/page/list',
@@ -167,3 +182,55 @@ export function deleteMenu(data) {
data
})
}
export function getPermissionList(params) {
return request({
url: '/permission/list',
method: 'get',
params: Object.assign({ pageNo: 1, pageSize: 20 }, params || {})
})
}
export function getPermissionDetail(permissionId) {
return request({
url: '/permission/detail',
method: 'get',
params: {
permission_id: permissionId,
permissionId: permissionId,
id: permissionId
}
})
}
export function createPermission(data) {
return request({
url: '/permission/create',
method: 'post',
data
})
}
export function updatePermission(data) {
return request({
url: '/permission/update',
method: 'post',
data
})
}
export function deletePermission(data) {
return request({
url: '/permission/delete',
method: 'post',
data
})
}
export function assignRolePermissions(data) {
return request({
url: '/role/permission/assign',
method: 'post',
data
})
}

27
src/api/reportApi.js
View File

@@ -1,28 +1,37 @@
import request from '@/utils/request'
export function getReportList(projectId, params) {
export function getReportList(params) {
return request({
url: '/report/list',
method: 'get',
params: Object.assign({ project_id: projectId, pageNo: 1, pageSize: 10 }, params || {})
params: Object.assign({ pageNo: 1, pageSize: 20 }, params || {})
})
}
export function generateReport(projectId, data) {
export function generateReport(data) {
return request({
url: '/report/generate',
method: 'post',
data: Object.assign({ project_id: projectId }, data)
data: data || {}
})
}
export function getReportDetail(projectId, reportId) {
export function getReportDetail(reportId, projectId) {
return request({
url: '/report/detail',
method: 'get',
params: {
project_id: projectId,
id: reportId
}
params: Object.assign(
{
reportId: reportId,
report_id: reportId,
id: reportId
},
projectId
? {
projectId: projectId,
project_id: projectId
}
: {}
)
})
}

1498
src/components/Bug/BugDetail.vue Normal file
View File

File diff suppressed because it is too large Load Diff

815
src/components/Bug/BugEditor.vue Normal file
View File

@@ -0,0 +1,815 @@
<template>
<div class="page-wrap">
<page-section :title="isCreate ? '新建 Bug' : '编辑 Bug'">
<template slot="extra">
<el-button size="small" @click="goBack">返回</el-button>
</template>
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px" size="small" class="bug-form">
<el-form-item label="标题" prop="title">
<el-input v-model.trim="form.title" maxlength="200" show-word-limit placeholder="Bug 标题" />
</el-form-item>
<el-row :gutter="16">
<el-col :span="8">
<el-form-item label="产品" prop="productId">
<el-select v-model="form.productId" filterable placeholder="请选择产品" style="width: 100%;" @change="onProductChange" @focus="loadProductOptions">
<el-option v-for="p in productOptions" :key="p.id" :label="p.name" :value="p.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="项目" prop="projectId">
<el-select v-model="form.projectId" filterable placeholder="请选择项目" style="width: 100%;" :disabled="!form.productId" @change="onProjectChange">
<el-option v-for="p in projectOptions" :key="p.id" :label="p.name" :value="p.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="模块" prop="moduleId">
<el-select v-model="form.moduleId" filterable placeholder="请选择模块" style="width: 100%;" :disabled="!form.projectId">
<el-option v-for="m in flatModules" :key="m.id" :label="m.name" :value="m.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="8">
<el-form-item label="类型" prop="bugType">
<el-select v-model="form.bugType" placeholder="类型" style="width: 100%;">
<el-option v-for="(label, key) in bugTypeOptions" :key="key" :label="label" :value="Number(key)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="严重程度" prop="severity">
<el-select v-model="form.severity" placeholder="严重程度" style="width: 100%;">
<el-option v-for="(label, key) in severityOptions" :key="key" :label="label" :value="Number(key)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="优先级" prop="priority">
<el-select v-model="form.priority" placeholder="优先级" style="width: 100%;">
<el-option v-for="(label, key) in priorityOptions" :key="key" :label="label" :value="Number(key)" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="8">
<el-form-item label="复现率" prop="reproduceRate">
<el-select v-model="form.reproduceRate" placeholder="请选择复现率" style="width: 100%;">
<el-option v-for="(label, key) in reproduceRateOptions" :key="key" :label="label" :value="Number(key)" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col v-if="!isCreate" :span="8">
<el-form-item label="状态">
<el-select v-model="form.status" clearable placeholder="状态" style="width: 100%;">
<el-option v-for="(label, key) in statusOptions" :key="key" :label="label" :value="Number(key)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="isCreate ? 12 : 8">
<el-form-item label="创建人" prop="reporterId">
<el-input
v-if="isCreate"
class="bug-creator-readonly"
:value="defaultCreatorDisplayName"
readonly
placeholder="当前登录用户"
style="width: 100%;" />
<el-select
v-else
ref="reporterSelect"
v-model="form.reporterId"
filterable
placeholder="请先选择项目"
style="width: 100%;"
popper-class="bug-editor-reporter-members"
:disabled="!form.projectId"
@visible-change="onReporterDropdownVisible">
<el-option v-for="u in reporterMemberOptions" :key="'r-' + u.id" :label="u.name" :value="u.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="isCreate ? 12 : 8">
<el-form-item label="当前指派" prop="assigneeId">
<el-select
ref="assigneeSelect"
v-model="form.assigneeId"
filterable
placeholder="请选择当前指派"
style="width: 100%;"
popper-class="bug-editor-assignee-members"
:disabled="!form.projectId"
@visible-change="onAssigneeDropdownVisible">
<el-option v-for="u in assigneeMemberOptions" :key="'a-' + u.id" :label="u.name" :value="u.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="8">
<el-form-item label="环境">
<el-input v-model.trim="form.environment" maxlength="64" placeholder="如 st / pre" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="关联用例">
<el-input v-model="form.caseId" placeholder="选填，用例 ID" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="关联计划">
<el-input v-model="form.planId" placeholder="选填，计划 ID" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="复现步骤">
<bug-steps-rich-editor :key="stepsEditorKey" v-model="form.steps" />
</el-form-item>
<el-form-item>
<el-button @click="goBack">取消</el-button>
<el-button type="primary" :loading="saving" @click="submit">{{ isCreate ? '创建' : '保存' }}</el-button>
</el-form-item>
</el-form>
</page-section>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import BugStepsRichEditor from '@/components/Bug/BugStepsRichEditor.vue'
import { getBugDetail, createBug, updateBug } from '@/api/bugApi'
import { recordBugHistory, recordBugEditDiff, buildBugEditBaseline } from '@/utils/bugHistory'
import { legacyStepsToEditorHtml, BUG_STEPS_DEFAULT_HTML } from '@/utils/bugStepsFormat'
import { getProductList } from '@/api/productApi'
import { getProjectList, getProjectMembers } from '@/api/projectApi'
import { getModuleTree } from '@/api/caseApi'
import { BUG_TYPE_MAP, SEVERITY_MAP, PRIORITY_MAP, STATUS_MAP, REPRODUCE_RATE_MAP } from '@/utils/bugMaps'
export default {
name: 'BugEditor',
components: { PageSection, BugStepsRichEditor },
data() {
return {
saving: false,
bugId: '',
/** 新建页复制带入后递增，用于富文本编辑器 key 强制刷新 */
editorNonce: 0,
productOptions: [],
projectOptions: [],
moduleTree: [],
memberPageSize: 10,
reporterMemberOptions: [],
reporterMemberPageNo: 0,
reporterMemberNoMore: false,
reporterMemberLoading: false,
assigneeMemberOptions: [],
assigneeMemberPageNo: 0,
assigneeMemberNoMore: false,
assigneeMemberLoading: false,
assigneeExtraLabel: '',
editBaseline: null,
form: {
title: '',
bugType: 1,
severity: 2,
priority: 2,
status: '',
productId: '',
projectId: '',
moduleId: '',
caseId: '',
planId: '',
environment: '',
steps: BUG_STEPS_DEFAULT_HTML,
reporterId: '',
assigneeId: '',
reproduceRate: 1
},
rules: {
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
reproduceRate: [{ required: true, message: '请选择复现率', trigger: 'change' }],
productId: [{ required: true, message: '请选择产品', trigger: 'change' }],
projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
moduleId: [{ required: true, message: '请选择模块', trigger: 'change' }],
assigneeId: [{ required: true, message: '请选择当前指派', trigger: 'change' }],
reporterId: [
{
required: true,
validator: (rule, value, callback) => {
if (this.isCreate) {
const uid = this.defaultReporterId()
if (uid === '' || uid === undefined || uid === null) {
callback(new Error('未获取到当前登录用户，请重新登录'))
} else {
callback()
}
return
}
if (value === '' || value === undefined || value === null) {
callback(new Error('请选择创建人'))
} else {
callback()
}
},
trigger: 'change'
}
]
}
}
},
computed: {
isCreate() {
return (this.$route.path || '').indexOf('/bug/create') !== -1
},
bugTypeOptions() {
return BUG_TYPE_MAP
},
severityOptions() {
return SEVERITY_MAP
},
priorityOptions() {
return PRIORITY_MAP
},
statusOptions() {
return STATUS_MAP
},
reproduceRateOptions() {
return REPRODUCE_RATE_MAP
},
flatModules() {
const out = []
const walk = (nodes, prefix) => {
;(nodes || []).forEach(n => {
const name = prefix ? `${prefix} / ${n.name}` : n.name
out.push({ id: n.id, name })
const ch = n.children || n.child_list || n.childList || []
if (ch.length) walk(ch, name)
})
}
walk(this.moduleTree, '')
return out
},
stepsEditorKey() {
if (this.isCreate) {
return 'create-' + String(this.editorNonce)
}
return 'edit-' + String(this.bugId || '0')
},
currentUser() {
return this.$store.state.currentUser
},
/** 新建页展示：优先 real_name（接口字段），与 store 中 realName 一致 */
defaultCreatorDisplayName() {
const u = this.currentUser
if (!u) return '-'
return u.real_name || u.realName || u.username || '-'
}
},
watch: {
'$route.query.bugId'(v) {
this.bugId = v || ''
if (!this.isCreate) this.loadDetail()
},
isCreate(val) {
if (val) {
if (this.$route.query.copyFrom) return
this.form.steps = BUG_STEPS_DEFAULT_HTML
this.form.reporterId = this.defaultReporterId()
this.form.reproduceRate = 1
this.form.assigneeId = ''
this.assigneeExtraLabel = ''
this.resetReporterMembers()
this.resetAssigneeMembers()
}
},
'$route.query.copyFrom': {
handler(v) {
if (!this.isCreate || !v) return
this.loadProductOptions().then(() => this.applyCopyFromDetail(v))
},
immediate: true
}
},
destroyed() {
this.unbindReporterMemberScroll()
this.unbindAssigneeMemberScroll()
},
methods: {
defaultReporterId() {
const u = this.currentUser
return u && u.id != null && u.id !== '' ? u.id : ''
},
mapMemberRows(list) {
const arr = Array.isArray(list) ? list : []
return arr
.map(item => ({
id: item.user_id || item.userId || item.id,
name:
item.real_name ||
item.realName ||
item.username ||
item.name ||
item.user_name ||
String(item.user_id || item.id)
}))
.filter(u => u.id !== undefined && u.id !== null)
},
ensureCurrentUserInMemberOptions(opts) {
const u = this.currentUser
if (!u || u.id == null || u.id === '') return opts || []
const list = opts || []
if (list.some(m => String(m.id) === String(u.id))) return list
const label = u.realName || u.username || '当前用户'
return [{ id: u.id, name: label }, ...list]
},
applyDefaultReporterIfNeeded() {
if (!this.isCreate) return
const uid = this.defaultReporterId()
const inList = id =>
id !== '' && id !== undefined && id !== null &&
this.reporterMemberOptions.some(m => String(m.id) === String(id))
if (!uid) return
if (!this.form.reporterId || !inList(this.form.reporterId)) {
if (inList(uid)) this.form.reporterId = uid
}
},
mergeMemberById(existing, incoming) {
const base = (existing || []).slice()
const seen = new Set(base.map(x => String(x.id)))
;(incoming || []).forEach(x => {
if (x.id === undefined || x.id === null) return
const k = String(x.id)
if (!seen.has(k)) {
seen.add(k)
base.push(x)
}
})
return base
},
resetReporterMembers() {
this.reporterMemberOptions = []
this.reporterMemberPageNo = 0
this.reporterMemberNoMore = false
},
resetAssigneeMembers() {
this.assigneeMemberOptions = []
this.assigneeMemberPageNo = 0
this.assigneeMemberNoMore = false
},
fetchReporterMemberPage(append) {
const pid = this.form.projectId
if (!pid || this.reporterMemberLoading) return Promise.resolve()
if (append && this.reporterMemberNoMore) return Promise.resolve()
const nextPage = append ? this.reporterMemberPageNo + 1 : 1
if (!append) {
this.resetReporterMembers()
}
this.reporterMemberLoading = true
return getProjectMembers(pid, { pageNo: nextPage, pageSize: this.memberPageSize })
.then(res => {
const data = (res && res.data) || res || {}
const raw = data.items || data.list || data.data || []
const rows = this.mapMemberRows(Array.isArray(raw) ? raw : [])
if (append) {
this.reporterMemberOptions = this.mergeMemberById(this.reporterMemberOptions, rows)
} else {
this.reporterMemberOptions = this.ensureCurrentUserInMemberOptions(rows)
}
this.reporterMemberPageNo = nextPage
this.reporterMemberNoMore = rows.length < this.memberPageSize
})
.catch(() => {
if (!append) {
this.reporterMemberOptions = this.ensureCurrentUserInMemberOptions([])
}
this.reporterMemberNoMore = true
})
.finally(() => {
this.reporterMemberLoading = false
})
.then(() => {
this.applyDefaultReporterIfNeeded()
})
},
fetchAssigneeMemberPage(append) {
const pid = this.form.projectId
if (!pid || this.assigneeMemberLoading) return Promise.resolve()
if (append && this.assigneeMemberNoMore) return Promise.resolve()
const nextPage = append ? this.assigneeMemberPageNo + 1 : 1
if (!append) {
this.resetAssigneeMembers()
}
this.assigneeMemberLoading = true
return getProjectMembers(pid, { pageNo: nextPage, pageSize: this.memberPageSize })
.then(res => {
const data = (res && res.data) || res || {}
const raw = data.items || data.list || data.data || []
const rows = this.mapMemberRows(Array.isArray(raw) ? raw : [])
if (append) {
this.assigneeMemberOptions = this.mergeMemberById(this.assigneeMemberOptions, rows)
} else {
this.assigneeMemberOptions = rows.slice()
}
this.assigneeMemberPageNo = nextPage
this.assigneeMemberNoMore = rows.length < this.memberPageSize
this.ensureAssigneeInOptions()
})
.catch(() => {
if (!append) this.assigneeMemberOptions = []
this.assigneeMemberNoMore = true
})
.finally(() => {
this.assigneeMemberLoading = false
})
},
ensureAssigneeInOptions() {
const id = this.form.assigneeId
if (id === '' || id === undefined || id === null) return
if (this.assigneeMemberOptions.some(m => String(m.id) === String(id))) return
const name = this.assigneeExtraLabel || `用户 ${id}`
this.assigneeMemberOptions = [{ id, name }, ...this.assigneeMemberOptions]
},
getMemberDropdownScrollWrap(popperClass) {
const pop = document.querySelector(`.${popperClass}`)
if (!pop) return null
return pop.querySelector('.el-select-dropdown__wrap') || pop.querySelector('.el-scrollbar__wrap')
},
unbindReporterMemberScroll() {
if (this._reporterScrollEl && this._reporterScrollHandler) {
this._reporterScrollEl.removeEventListener('scroll', this._reporterScrollHandler)
}
this._reporterScrollEl = null
this._reporterScrollHandler = null
},
unbindAssigneeMemberScroll() {
if (this._assigneeScrollEl && this._assigneeScrollHandler) {
this._assigneeScrollEl.removeEventListener('scroll', this._assigneeScrollHandler)
}
this._assigneeScrollEl = null
this._assigneeScrollHandler = null
},
bindReporterMemberScroll() {
this.unbindReporterMemberScroll()
this.$nextTick(() => {
const el = this.getMemberDropdownScrollWrap('bug-editor-reporter-members')
if (!el) return
this._reporterScrollEl = el
this._reporterScrollHandler = this.onReporterMemberDropdownScroll.bind(this)
el.addEventListener('scroll', this._reporterScrollHandler, { passive: true })
})
},
bindAssigneeMemberScroll() {
this.unbindAssigneeMemberScroll()
this.$nextTick(() => {
const el = this.getMemberDropdownScrollWrap('bug-editor-assignee-members')
if (!el) return
this._assigneeScrollEl = el
this._assigneeScrollHandler = this.onAssigneeMemberDropdownScroll.bind(this)
el.addEventListener('scroll', this._assigneeScrollHandler, { passive: true })
})
},
onReporterMemberDropdownScroll(e) {
const el = e.target
if (this.reporterMemberLoading || this.reporterMemberNoMore) return
if (el.scrollHeight - el.scrollTop - el.clientHeight < 40) {
this.fetchReporterMemberPage(true)
}
},
onAssigneeMemberDropdownScroll(e) {
const el = e.target
if (this.assigneeMemberLoading || this.assigneeMemberNoMore) return
if (el.scrollHeight - el.scrollTop - el.clientHeight < 40) {
this.fetchAssigneeMemberPage(true)
}
},
onReporterDropdownVisible(visible) {
if (!visible) {
this.unbindReporterMemberScroll()
return
}
if (!this.form.projectId) return
const load = !this.reporterMemberOptions.length
? this.fetchReporterMemberPage(false)
: Promise.resolve()
load.finally(() => {
this.$nextTick(() => this.bindReporterMemberScroll())
})
},
onAssigneeDropdownVisible(visible) {
if (!visible) {
this.unbindAssigneeMemberScroll()
return
}
if (!this.form.projectId) return
const load = !this.assigneeMemberOptions.length
? this.fetchAssigneeMemberPage(false)
: Promise.resolve()
load.finally(() => {
this.$nextTick(() => this.bindAssigneeMemberScroll())
})
},
loadProjectMembersForForm(projectId) {
if (!projectId) {
this.resetReporterMembers()
this.resetAssigneeMembers()
return Promise.resolve()
}
if (this.isCreate) {
this.resetReporterMembers()
return this.fetchAssigneeMemberPage(false)
}
return Promise.all([
this.fetchReporterMemberPage(false),
this.fetchAssigneeMemberPage(false)
])
},
loadProductOptions() {
if (this.productOptions.length) return Promise.resolve()
return getProductList({ pageNo: 1, pageSize: 1000, status: 1 }).then(res => {
const data = (res && res.data) || res || {}
this.productOptions = data.items || data.list || data.data || []
}).catch(() => { this.productOptions = [] })
},
loadProjects(productId) {
if (!productId) {
this.projectOptions = []
return Promise.resolve()
}
return getProjectList({ pageNo: 1, pageSize: 1000, status: 1, productId }).then(res => {
const data = (res && res.data) || res || {}
this.projectOptions = data.items || data.list || data.data || []
}).catch(() => { this.projectOptions = [] })
},
loadModules(projectId) {
if (!projectId) {
this.moduleTree = []
return Promise.resolve()
}
return getModuleTree({ projectId, pageNo: 1, pageSize: 1000 }).then(res => {
const data = (res && res.data) || res || {}
this.moduleTree = data.list || data.items || []
}).catch(() => { this.moduleTree = [] })
},
onProductChange(val) {
this.form.projectId = ''
this.form.moduleId = ''
this.form.assigneeId = ''
this.form.reporterId = this.defaultReporterId()
this.moduleTree = []
this.assigneeExtraLabel = ''
this.resetReporterMembers()
this.resetAssigneeMembers()
this.loadProjects(val)
},
onProjectChange(val) {
this.form.moduleId = ''
this.form.assigneeId = ''
this.assigneeExtraLabel = ''
this.loadModules(val)
this.loadProjectMembersForForm(val)
},
applyCopyTitle(raw) {
const t = String(raw || '').trim()
const suffix = '（复制）'
if (!t) return suffix
if (t.indexOf(suffix) !== -1) {
return t.length > 200 ? t.slice(0, 200) : t
}
const combined = t + suffix
if (combined.length <= 200) return combined
return t.slice(0, Math.max(0, 200 - suffix.length)) + suffix
},
applyCopyFromDetail(sourceBugId) {
const sid = String(sourceBugId || '').trim()
if (!sid) return Promise.resolve()
return getBugDetail(sid)
.then(res => {
const d = (res && res.data) || res || {}
this.assigneeExtraLabel =
d.assignee_real_name ||
d.assigneeRealName ||
d.assignee_name ||
d.assigneeName ||
d.assignee_username ||
d.assigneeUsername ||
''
const rawSteps =
d.steps || d.reproduce_steps || d.reproduceSteps || d.reproduction_steps || d.reproductionSteps || ''
this.form = {
title: this.applyCopyTitle(d.title || ''),
bugType: d.bug_type != null ? d.bug_type : d.bugType != null ? d.bugType : 1,
severity: d.severity != null ? d.severity : 2,
priority: d.priority != null ? d.priority : 2,
status: '',
productId: d.product_id || d.productId || '',
projectId: d.project_id || d.projectId || '',
moduleId: d.module_id || d.moduleId || '',
caseId: d.case_id != null && d.case_id !== '' ? d.case_id : d.caseId != null && d.caseId !== '' ? d.caseId : '',
planId: d.plan_id != null && d.plan_id !== '' ? d.plan_id : d.planId != null && d.planId !== '' ? d.planId : '',
environment: d.environment || '',
steps: legacyStepsToEditorHtml(rawSteps),
reporterId: this.defaultReporterId(),
assigneeId: d.assignee_id || d.assigneeId || '',
reproduceRate:
d.reproduce_rate != null && d.reproduce_rate !== ''
? Number(d.reproduce_rate)
: d.reproduceRate != null && d.reproduceRate !== ''
? Number(d.reproduceRate)
: 1
}
if (this.form.productId) this.loadProjects(this.form.productId)
if (this.form.projectId) {
this.loadModules(this.form.projectId)
this.loadProjectMembersForForm(this.form.projectId)
}
this.editorNonce = (this.editorNonce || 0) + 1
this.bugId = ''
this.editBaseline = null
this.$nextTick(() => {
if (this.$refs.formRef) this.$refs.formRef.clearValidate()
})
this.$message.success('已带入原 Bug 内容，请确认后创建')
})
.then(() => this.$router.replace({ path: '/bug/create', query: {} }).catch(() => {}))
.catch(() => {
this.$message.error('复制失败：无法加载原 Bug 详情')
})
},
loadDetail() {
if (!this.bugId) return
getBugDetail(this.bugId).then(res => {
const d = (res && res.data) || res || {}
this.assigneeExtraLabel =
d.assignee_real_name ||
d.assigneeRealName ||
d.assignee_name ||
d.assigneeName ||
d.assignee_username ||
d.assigneeUsername ||
''
const rawSteps =
d.steps || d.reproduce_steps || d.reproduceSteps || d.reproduction_steps || d.reproductionSteps || ''
this.form = {
title: d.title || '',
bugType: d.bug_type != null ? d.bug_type : (d.bugType != null ? d.bugType : 1),
severity: d.severity != null ? d.severity : 2,
priority: d.priority != null ? d.priority : 2,
status: d.status != null ? d.status : '',
productId: d.product_id || d.productId || '',
projectId: d.project_id || d.projectId || '',
moduleId: d.module_id || d.moduleId || '',
caseId: d.case_id || d.caseId || '',
planId: d.plan_id || d.planId || '',
environment: d.environment || '',
steps: legacyStepsToEditorHtml(rawSteps),
reporterId:
d.reporter_id ||
d.reporterId ||
d.creator_id ||
d.creatorId ||
d.created_by ||
d.createdBy ||
'',
assigneeId: d.assignee_id || d.assigneeId || '',
reproduceRate:
d.reproduce_rate != null && d.reproduce_rate !== ''
? Number(d.reproduce_rate)
: d.reproduceRate != null && d.reproduceRate !== ''
? Number(d.reproduceRate)
: 1
}
if (this.form.productId) this.loadProjects(this.form.productId)
if (this.form.projectId) {
this.loadModules(this.form.projectId)
this.loadProjectMembersForForm(this.form.projectId)
}
this.$nextTick(() => {
this.editBaseline = buildBugEditBaseline(this.form)
})
}).catch(() => {})
},
clean(obj) {
const o = {}
Object.keys(obj).forEach(k => {
const v = obj[k]
if (v !== '' && v !== undefined && v !== null) o[k] = v
})
return o
},
submit() {
this.$refs.formRef.validate(valid => {
if (!valid) return
this.saving = true
if (this.isCreate) {
const payload = this.clean({
title: this.form.title,
bugType: this.form.bugType,
severity: this.form.severity,
priority: this.form.priority,
productId: this.form.productId,
projectId: this.form.projectId,
moduleId: this.form.moduleId,
caseId: this.form.caseId,
planId: this.form.planId,
environment: this.form.environment,
steps: this.form.steps,
reporterId: this.form.reporterId,
assigneeId: this.form.assigneeId,
reproduceRate: this.form.reproduceRate
})
payload.description = ''
createBug(payload).then(res => {
const data = (res && res.data) || {}
this.$message.success('创建成功')
const id = data.id
if (id) {
recordBugHistory(this.$store, {
bugId: id,
fieldName: 'create',
oldValue: '',
newValue: '1'
})
this.$router.replace({ path: '/bug/detail', query: { bugId: id } })
} else {
this.$router.push({ path: '/bug/list' })
}
}).finally(() => { this.saving = false })
} else {
const payload = this.clean({
bugId: Number(this.bugId),
id: Number(this.bugId),
title: this.form.title,
bugType: this.form.bugType,
severity: this.form.severity,
priority: this.form.priority,
status: this.form.status,
reporterId: this.form.reporterId,
assigneeId: this.form.assigneeId,
moduleId: this.form.moduleId,
caseId: this.form.caseId,
planId: this.form.planId,
environment: this.form.environment,
steps: this.form.steps,
reproduceRate: this.form.reproduceRate
})
payload.description = ''
updateBug(payload)
.then(() =>
recordBugEditDiff(
this.$store,
Number(this.bugId),
this.editBaseline,
buildBugEditBaseline(this.form)
)
)
.then(() => {
this.$message.success('保存成功')
this.$router.push({ path: '/bug/detail', query: { bugId: this.bugId } })
})
.finally(() => {
this.saving = false
})
}
})
},
goBack() {
if (this.isCreate) {
this.$router.push({ path: '/bug/list' })
} else {
this.$router.push({ path: '/bug/detail', query: { bugId: this.bugId } })
}
}
},
created() {
this.bugId = this.$route.query.bugId || ''
if (this.isCreate) {
this.form.reporterId = this.defaultReporterId()
}
if (!this.isCreate) {
this.loadProductOptions().then(() => this.loadDetail())
} else if (!this.$route.query.copyFrom) {
this.loadProductOptions()
}
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
.bug-form {
max-width: 960px;
}
.bug-creator-readonly >>> .el-input__inner {
cursor: default;
color: #606266;
background-color: #f5f7fa;
}
</style>

721
src/components/Bug/BugList.vue Normal file
View File

@@ -0,0 +1,721 @@
<template>
<div class="page-wrap">
<page-section title="Bug 列表">
<template slot="extra">
<el-button type="primary" size="small" @click="goCreate">新建 Bug</el-button>
</template>
<el-form :inline="true" size="small" class="filter-form" @submit.native.prevent>
<el-form-item label="产品">
<el-select
v-model="queryForm.productId"
filterable
clearable
placeholder="产品"
style="width: 200px;"
@change="onProductChange"
@focus="loadProductOptions">
<el-option v-for="p in productOptions" :key="p.id" :label="p.name" :value="p.id" />
</el-select>
</el-form-item>
<el-form-item label="项目">
<el-select
v-model="queryForm.projectId"
filterable
clearable
placeholder="项目"
style="width: 200px;"
:disabled="!queryForm.productId"
@change="onProjectChange">
<el-option v-for="p in projectOptions" :key="p.id" :label="p.name" :value="p.id" />
</el-select>
</el-form-item>
<el-form-item label="模块">
<el-select v-model="queryForm.moduleId" filterable clearable placeholder="模块" style="width: 180px;" :disabled="!queryForm.projectId">
<el-option v-for="m in flatModules" :key="m.id" :label="m.name" :value="m.id" />
</el-select>
</el-form-item>
<el-form-item label="当前指派">
<el-select v-model="queryForm.assigneeId" filterable clearable placeholder="当前指派" style="width: 140px;" :disabled="!queryForm.projectId">
<el-option v-for="u in memberOptions" :key="'a-' + u.id" :label="u.name" :value="u.id" />
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="queryForm.status" clearable placeholder="全部" style="width: 120px;">
<el-option v-for="(label, key) in statusOptions" :key="key" :label="label" :value="Number(key)" />
</el-select>
</el-form-item>
<el-form-item label="创建人">
<el-select v-model="queryForm.reporterId" filterable clearable placeholder="创建人" style="width: 140px;" :disabled="!queryForm.projectId">
<el-option v-for="u in memberOptions" :key="'r-' + u.id" :label="u.name" :value="u.id" />
</el-select>
</el-form-item>
<el-form-item class="more-filter-item">
<el-popover v-model="moreFilterVisible" placement="bottom-start" width="560" trigger="click">
<div class="more-filter-wrap">
<el-form :inline="true" :model="queryForm" size="small" @submit.native.prevent>
<el-form-item label="类型">
<el-select v-model="queryForm.bugType" clearable placeholder="全部" style="width: 180px;">
<el-option v-for="(label, key) in bugTypeOptions" :key="key" :label="label" :value="Number(key)" />
</el-select>
</el-form-item>
<el-form-item label="严重程度">
<el-select v-model="queryForm.severity" clearable placeholder="全部" style="width: 180px;">
<el-option v-for="(label, key) in severityOptions" :key="key" :label="label" :value="Number(key)" />
</el-select>
</el-form-item>
<el-form-item label="优先级">
<el-select v-model="queryForm.priority" clearable placeholder="全部" style="width: 180px;">
<el-option v-for="(label, key) in priorityOptions" :key="key" :label="label" :value="Number(key)" />
</el-select>
</el-form-item>
<el-form-item label="解决人">
<el-select
v-model="queryForm.resolvedBy"
filterable
clearable
placeholder="全部"
style="width: 180px;"
:disabled="!queryForm.projectId">
<el-option v-for="u in memberOptions" :key="'rb-' + u.id" :label="u.name" :value="u.id" />
</el-select>
</el-form-item>
<el-form-item label="复现率">
<el-select v-model="queryForm.reproduceRate" clearable placeholder="全部" style="width: 180px;">
<el-option v-for="(label, key) in reproduceRateOptions" :key="'rr-' + key" :label="label" :value="Number(key)" />
</el-select>
</el-form-item>
<el-form-item label="关键词">
<el-input v-model.trim="queryForm.keyword" clearable placeholder="标题/描述" style="width: 180px;" @keyup.enter.native="applyMoreFilters" />
</el-form-item>
</el-form>
<div class="more-filter-footer">
<el-button size="small" @click="moreFilterVisible = false">取消</el-button>
<el-button type="primary" size="small" @click="applyMoreFilters">搜索</el-button>
</div>
</div>
<el-button slot="reference" size="small">更多筛选</el-button>
</el-popover>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button @click="resetQuery">重置</el-button>
</el-form-item>
<el-form-item class="bug-column-setting-item">
<div class="bug-table-toolbar-actions">
<el-button size="small" @click="fillCreatedByMe">由我创建的</el-button>
<el-button size="small" @click="fillAssignedToMe">指派给我的</el-button>
<el-popover v-model="columnSettingVisible" placement="bottom-end" width="300" trigger="click">
<div class="column-setting-wrap">
<div class="column-setting-title">自定义列表展示字段</div>
<el-checkbox-group v-model="selectedBugColumnKeys" @change="handleBugColumnSelectionChange">
<el-checkbox v-for="item in allBugColumns" :key="item.key" :label="item.key">{{ item.label }}</el-checkbox>
</el-checkbox-group>
</div>
<el-button slot="reference" size="small">自定义列表展示字段</el-button>
</el-popover>
</div>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="tableData" border class="bug-table">
<el-table-column
v-for="column in visibleBugColumns"
:key="column.key"
:label="column.label"
:min-width="column.minWidth"
:width="column.width"
:show-overflow-tooltip="column.key === 'title' || column.key === 'solution' || column.key === 'bugKey' || column.key === 'creator' || column.key === 'assignee' || column.key === 'resolvedBy' || column.key === 'reproduceRate'">
<template slot-scope="scope">
<template v-if="column.key === 'bugType'">
<el-tag size="mini" :type="bugTypeTagType(scope.row.bug_type || scope.row.bugType)">{{ formatBugType(scope.row.bug_type || scope.row.bugType) }}</el-tag>
</template>
<template v-else-if="column.key === 'severity'">
<el-tag size="mini" :type="severityTagType(scope.row.severity)">{{ formatSeverity(scope.row.severity) }}</el-tag>
</template>
<template v-else-if="column.key === 'priority'">
<el-tag size="mini" :type="priorityTagType(scope.row.priority)">{{ formatPriority(scope.row.priority) }}</el-tag>
</template>
<template v-else-if="column.key === 'status'">
<el-tag size="mini" :type="statusTagType(scope.row.status)">{{ formatStatus(scope.row.status) }}</el-tag>
</template>
<template v-else>
{{ formatBugListCell(column.key, scope.row) }}
</template>
</template>
</el-table-column>
<el-table-column label="操作" width="260" fixed="right">
<template slot-scope="scope">
<el-button type="text" @click="goDetail(scope.row)">详情</el-button>
<el-button type="text" @click="goEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="copyBug(scope.row)">复制</el-button>
<el-button type="text" style="color: #F56C6C;" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pager">
<el-pagination
:current-page="pageNo"
:page-size="pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange" />
</div>
</page-section>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { getBugList, deleteBug } from '@/api/bugApi'
import { recordBugHistory } from '@/utils/bugHistory'
import { getProductList } from '@/api/productApi'
import { getProjectList, getProjectMembers } from '@/api/projectApi'
import { getModuleTree } from '@/api/caseApi'
import {
BUG_TYPE_MAP,
SEVERITY_MAP,
PRIORITY_MAP,
STATUS_MAP,
REPRODUCE_RATE_MAP,
formatBugType,
formatSeverity,
formatPriority,
formatStatus,
formatReproduceRate,
statusTagType,
severityTagType,
priorityTagType,
bugTypeTagType
} from '@/utils/bugMaps'
import {
readLastProductProjectCache,
saveLastProductProjectCache,
pickIdFromOptions
} from '@/utils/lastProductProjectCache'
/** 与 BugDetail 解决弹窗 solutionOptions 的 value 一致，用于列表展示 */
const BUG_SOLUTION_LABEL_MAP = {
by_design: '设计如此',
duplicate_bug: '重复Bug',
external_reason: '外部原因',
solution_resolved: '已解决',
cannot_reproduce: '无法重现',
deferred: '延期处理',
wont_fix: '不予解决'
}
export default {
name: 'BugList',
components: { PageSection },
data() {
return {
columnSettingVisible: false,
moreFilterVisible: false,
loading: false,
productOptions: [],
projectOptions: [],
moduleTree: [],
memberOptions: [],
assigneeMap: {},
queryForm: {
productId: '',
projectId: '',
moduleId: '',
bugType: '',
severity: '',
priority: '',
status: '',
assigneeId: '',
reporterId: '',
resolvedBy: '',
reproduceRate: '',
keyword: ''
},
allBugColumns: [
{ key: 'bugKey', label: '编号', width: 120 },
{ key: 'title', label: '标题', minWidth: 200 },
{ key: 'status', label: '状态', width: 100 },
{ key: 'assignee', label: '当前指派', width: 110 },
{ key: 'creator', label: '创建人', width: 110 },
{ key: 'resolvedBy', label: '解决人', width: 110 },
{ key: 'reproduceRate', label: '复现率', width: 100 },
{ key: 'solution', label: '解决方案', minWidth: 120 },
{ key: 'createdTime', label: '创建时间', width: 170 },
{ key: 'bugType', label: '类型', width: 100 },
{ key: 'severity', label: '严重程度', width: 100 },
{ key: 'priority', label: '优先级', width: 80 }
],
selectedBugColumnKeys: ['bugKey', 'title', 'status', 'assignee', 'creator', 'solution', 'createdTime'],
pageNo: 1,
pageSize: 20,
total: 0,
tableData: []
}
},
computed: {
bugTypeOptions() {
return BUG_TYPE_MAP
},
severityOptions() {
return SEVERITY_MAP
},
priorityOptions() {
return PRIORITY_MAP
},
statusOptions() {
return STATUS_MAP
},
flatModules() {
const out = []
const walk = (nodes, prefix) => {
;(nodes || []).forEach(n => {
const name = prefix ? `${prefix} / ${n.name}` : n.name
out.push({ id: n.id, name })
const ch = n.children || n.child_list || n.childList || []
if (ch.length) walk(ch, name)
})
}
walk(this.moduleTree, '')
return out
},
currentUser() {
return this.$store.state.currentUser
},
visibleBugColumns() {
return this.allBugColumns.filter(item => this.selectedBugColumnKeys.includes(item.key))
},
reproduceRateOptions() {
return REPRODUCE_RATE_MAP
}
},
methods: {
formatBugType,
formatSeverity,
formatPriority,
formatStatus,
formatReproduceRate,
statusTagType,
severityTagType,
priorityTagType,
bugTypeTagType,
loadProductOptions() {
if (this.productOptions.length) return Promise.resolve()
return getProductList({ pageNo: 1, pageSize: 1000, status: 1 }).then(res => {
const data = (res && res.data) || res || {}
this.productOptions = data.items || data.list || data.data || []
}).catch(() => { this.productOptions = [] })
},
restoreBugListFromCache() {
const cached = readLastProductProjectCache()
const q = this.$route.query || {}
const fromAssignDeepLink = q.assignToMe === '1' || q.assignToMe === 'true'
let pid = cached && cached.productId
let projId = cached && cached.projectId
if (fromAssignDeepLink) {
if (q.productId !== undefined && q.productId !== null && String(q.productId).trim() !== '') {
pid = q.productId
}
if (q.projectId !== undefined && q.projectId !== null && String(q.projectId).trim() !== '') {
projId = q.projectId
}
}
if (pid === '' || pid === undefined || pid === null || projId === '' || projId === undefined || projId === null) {
return Promise.resolve()
}
const hasProduct = (this.productOptions || []).some(p => String(p.id) === String(pid))
if (!hasProduct) return Promise.resolve()
this.queryForm.productId = pickIdFromOptions(this.productOptions, pid)
return this.loadProjects(this.queryForm.productId).then(() => {
const hasProject = (this.projectOptions || []).some(p => String(p.id) === String(projId))
if (!hasProject) return
this.queryForm.projectId = pickIdFromOptions(this.projectOptions, projId)
return Promise.all([
this.loadModules(this.queryForm.projectId),
this.loadMembers(this.queryForm.projectId)
])
})
},
loadProjects(productId) {
if (!productId) {
this.projectOptions = []
return Promise.resolve()
}
return getProjectList({ pageNo: 1, pageSize: 1000, status: 1, productId }).then(res => {
const data = (res && res.data) || res || {}
this.projectOptions = data.items || data.list || data.data || []
}).catch(() => { this.projectOptions = [] })
},
loadModules(projectId) {
if (!projectId) {
this.moduleTree = []
return Promise.resolve()
}
return getModuleTree({ projectId, pageNo: 1, pageSize: 1000 }).then(res => {
const data = (res && res.data) || res || {}
this.moduleTree = data.list || data.items || []
}).catch(() => { this.moduleTree = [] })
},
loadMembers(projectId) {
if (!projectId) {
this.memberOptions = []
this.assigneeMap = {}
return Promise.resolve()
}
return getProjectMembers(projectId, { pageNo: 1, pageSize: 1000 }).then(res => {
const data = (res && res.data) || res || {}
const list = data.items || data.list || data.data || data || []
const arr = Array.isArray(list) ? list : []
this.memberOptions = arr.map(item => ({
id: item.user_id || item.userId || item.id,
name:
item.real_name ||
item.realName ||
item.username ||
item.name ||
item.user_name ||
String(item.user_id || item.id)
})).filter(u => u.id !== undefined && u.id !== null)
this.assigneeMap = this.memberOptions.reduce((m, u) => { m[u.id] = u.name; return m }, {})
}).catch(() => {
this.memberOptions = []
this.assigneeMap = {}
})
},
rebuildAssigneeMap() {
this.assigneeMap = (this.memberOptions || []).reduce((m, u) => {
m[u.id] = u.name
return m
}, {})
},
mergeCurrentUserIntoMemberOptionsIfNeeded() {
const u = this.currentUser
if (!u || u.id == null || u.id === '') return
const id = u.id
if ((this.memberOptions || []).some(m => String(m.id) === String(id))) return
const name = u.realName || u.username || '当前用户'
this.memberOptions = [{ id, name }, ...(this.memberOptions || [])]
this.rebuildAssigneeMap()
},
fillCreatedByMe() {
const u = this.currentUser
const uid = u && u.id != null && u.id !== '' ? u.id : null
if (uid == null) {
this.$message.warning('请先登录')
return
}
if (!this.queryForm.projectId) {
this.$message.warning('请先选择项目')
return
}
this.mergeCurrentUserIntoMemberOptionsIfNeeded()
this.queryForm.reporterId = uid
this.pageNo = 1
this.fetchList()
},
fillAssignedToMe() {
const u = this.currentUser
const uid = u && u.id != null && u.id !== '' ? u.id : null
if (uid == null) {
this.$message.warning('请先登录')
return
}
if (!this.queryForm.projectId) {
this.$message.warning('请先选择项目')
return
}
this.mergeCurrentUserIntoMemberOptionsIfNeeded()
this.queryForm.assigneeId = uid
this.pageNo = 1
this.fetchList()
},
onProductChange(val) {
this.queryForm.projectId = ''
this.queryForm.moduleId = ''
this.queryForm.assigneeId = ''
this.queryForm.reporterId = ''
this.moduleTree = []
this.memberOptions = []
this.loadProjects(val)
},
onProjectChange(val) {
this.queryForm.moduleId = ''
this.queryForm.assigneeId = ''
this.queryForm.reporterId = ''
this.queryForm.resolvedBy = ''
this.loadModules(val)
this.loadMembers(val)
if (val) {
saveLastProductProjectCache(this.queryForm.productId, val)
}
},
cleanParams(obj) {
return Object.keys(obj).reduce((acc, k) => {
const v = obj[k]
if (v !== '' && v !== undefined && v !== null) acc[k] = v
return acc
}, {})
},
fetchList() {
this.loading = true
const params = this.cleanParams({
productId: this.queryForm.productId,
projectId: this.queryForm.projectId,
moduleId: this.queryForm.moduleId,
bugType: this.queryForm.bugType,
severity: this.queryForm.severity,
priority: this.queryForm.priority,
status: this.queryForm.status,
assigneeId: this.queryForm.assigneeId,
reporterId: this.queryForm.reporterId,
resolvedBy: this.queryForm.resolvedBy,
reproduceRate: this.queryForm.reproduceRate,
keyword: this.queryForm.keyword,
pageNo: this.pageNo,
pageSize: this.pageSize
})
getBugList(params).then(res => {
const data = (res && res.data) || res || {}
this.tableData = data.list || data.items || []
this.total = Number(data.total || 0)
}).catch(() => {
this.tableData = []
this.total = 0
}).finally(() => { this.loading = false })
},
handleSearch() {
this.pageNo = 1
saveLastProductProjectCache(this.queryForm.productId, this.queryForm.projectId)
this.fetchList()
},
applyMoreFilters() {
this.moreFilterVisible = false
this.pageNo = 1
saveLastProductProjectCache(this.queryForm.productId, this.queryForm.projectId)
this.fetchList()
},
resetQuery() {
this.moreFilterVisible = false
this.queryForm = {
productId: '',
projectId: '',
moduleId: '',
bugType: '',
severity: '',
priority: '',
status: '',
assigneeId: '',
reporterId: '',
resolvedBy: '',
reproduceRate: '',
keyword: ''
}
this.projectOptions = []
this.moduleTree = []
this.memberOptions = []
this.pageNo = 1
this.fetchList()
},
handleSizeChange(s) {
this.pageSize = s
this.pageNo = 1
this.fetchList()
},
handleCurrentChange(p) {
this.pageNo = p
this.fetchList()
},
assigneeLabel(row) {
const name = row.assignee_name || row.assigneeName
if (name) return name
const id = row.assignee_id || row.assigneeId
if (this.assigneeMap[id]) return this.assigneeMap[id]
if (id !== undefined && id !== null && id !== '') return String(id)
return '-'
},
solutionLabel(row) {
const d = row || {}
const name = d.solution_name || d.solutionName || d.solution_label || d.solutionLabel
if (name) return name
const code = String(d.solution_type || d.solutionType || d.solution_code || d.solutionCode || '').trim()
if (code && BUG_SOLUTION_LABEL_MAP[code]) return BUG_SOLUTION_LABEL_MAP[code]
const sol = d.solution
if (sol != null && sol !== '') {
const s = String(sol).trim()
if (BUG_SOLUTION_LABEL_MAP[s]) return BUG_SOLUTION_LABEL_MAP[s]
return s
}
if (code) return code
return '-'
},
formatBugListCell(key, row) {
if (key === 'bugKey') return row.bug_key || row.bugKey || ''
if (key === 'title') return row.title || ''
if (key === 'assignee') return this.assigneeLabel(row)
if (key === 'creator') return this.creatorLabel(row)
if (key === 'solution') return this.solutionLabel(row)
if (key === 'createdTime') return this.formatTime(row.created_time || row.createdTime)
if (key === 'resolvedBy') return this.resolvedByLabel(row)
if (key === 'reproduceRate') {
return this.formatReproduceRate(row.reproduce_rate != null ? row.reproduce_rate : row.reproduceRate)
}
return ''
},
resolvedByLabel(row) {
const d = row || {}
const name =
d.resolved_by_name ||
d.resolvedByName ||
d.resolver_name ||
d.resolverName ||
''
const id = d.resolved_by != null && d.resolved_by !== '' ? d.resolved_by : d.resolvedBy
if (name) return name
if (id !== undefined && id !== null && id !== '') {
if (this.assigneeMap[id]) return this.assigneeMap[id]
return String(id)
}
return '-'
},
handleBugColumnSelectionChange(value) {
if (!value || value.length === 0) {
this.$message.warning('至少保留一个展示字段')
this.selectedBugColumnKeys = ['bugKey', 'title']
}
},
creatorLabel(row) {
const d = row || {}
const name =
d.reporter_real_name ||
d.reporterRealName ||
d.reporter_name ||
d.reporterName ||
d.creator_real_name ||
d.creatorRealName ||
d.creator_name ||
d.creatorName ||
''
const id = d.reporter_id || d.reporterId || d.creator_id || d.creatorId || d.created_by || d.createdBy
if (name) return name
if (id !== undefined && id !== null && id !== '') return String(id)
return '-'
},
formatTime(v) {
if (!v) return '-'
return String(v).replace('T', ' ').slice(0, 19)
},
goCreate() {
this.$router.push({ path: '/bug/create' })
},
goDetail(row) {
this.$router.push({ path: '/bug/detail', query: { bugId: row.id } })
},
goEdit(row) {
this.$router.push({ path: '/bug/edit', query: { bugId: row.id } })
},
copyBug(row) {
const id = row && (row.id != null ? row.id : row.bugId)
if (id === undefined || id === null || id === '') {
this.$message.warning('无法复制：缺少 Bug ID')
return
}
this.$router.push({ path: '/bug/create', query: { copyFrom: String(id) } })
},
handleDelete(row) {
this.$confirm('确认删除该 Bug？', '提示', { type: 'warning' }).then(() => {
const bid = row.id
recordBugHistory(this.$store, {
bugId: bid,
fieldName: 'delete',
oldValue: '0',
newValue: '1'
})
.then(() => deleteBug({ bugId: bid, id: bid }))
.then(() => {
this.$message.success('已删除')
this.fetchList()
})
.catch(() => {})
}).catch(() => {})
}
},
created() {
this.loadProductOptions()
.then(() => this.restoreBugListFromCache())
.then(() => {
const q = this.$route.query || {}
if (q.assignToMe !== '1' && q.assignToMe !== 'true') return
const u = this.currentUser
const uid = u && u.id != null && u.id !== '' ? u.id : null
if (uid == null) {
this.$message.warning('请先登录')
return
}
if (!this.queryForm.projectId) {
this.$message.warning('请先在列表中选择产品、项目，或从首页在已选过产品/项目时再次进入')
return
}
this.mergeCurrentUserIntoMemberOptionsIfNeeded()
this.queryForm.assigneeId = uid
this.pageNo = 1
})
.finally(() => this.fetchList())
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
.filter-form {
margin-bottom: 4px;
}
.filter-form::after {
content: '';
display: table;
clear: both;
}
.bug-table-toolbar-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
.bug-table {
margin-top: 8px;
}
.pager {
margin-top: 16px;
text-align: right;
}
.more-filter-wrap {
padding: 4px 0;
}
.more-filter-footer {
border-top: 1px solid #ebeef5;
text-align: right;
padding-top: 10px;
}
.bug-column-setting-item {
float: right;
margin-right: 0 !important;
}
.column-setting-wrap {
max-height: 320px;
overflow-y: auto;
}
.column-setting-title {
color: #606266;
font-weight: 500;
margin-bottom: 8px;
}
</style>

701
src/components/Bug/BugStats.vue Normal file
View File

@@ -0,0 +1,701 @@
<template>
<div class="page-wrap">
<page-section title="Bug 统计">
<el-form :inline="true" size="small" class="filter-bar" @submit.native.prevent>
<el-form-item label="产品">
<el-select
v-model="query.productId"
filterable
clearable
placeholder="请选择产品"
style="width: 220px;"
@change="onProductChange"
@focus="loadProductOptions">
<el-option v-for="p in productOptions" :key="p.id" :label="p.name" :value="p.id" />
</el-select>
</el-form-item>
<el-form-item label="项目">
<el-select
v-model="query.projectId"
filterable
clearable
placeholder="请选择项目"
style="width: 220px;"
:disabled="!query.productId"
@change="onProjectChange">
<el-option v-for="p in projectOptions" :key="p.id" :label="p.name" :value="p.id" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">查询</el-button>
</el-form-item>
</el-form>
<div v-loading="loading" class="stats-body">
<el-row :gutter="16" class="stat-row">
<el-col v-for="card in summaryCardsRow1" :key="card.key" :span="6">
<div class="stat-card" :class="card.tone">
<div class="stat-label">{{ card.label }}</div>
<div class="stat-value">{{ card.value }}</div>
</div>
</el-col>
</el-row>
<el-row :gutter="16" class="stat-row">
<el-col v-for="card in summaryCardsRow2" :key="card.key" :span="8">
<div class="stat-card" :class="card.tone">
<div class="stat-label">{{ card.label }}</div>
<div class="stat-value">{{ card.value }}</div>
</div>
</el-col>
</el-row>
<div class="report-section">
<el-row :gutter="16">
<el-col :span="5" class="report-sidebar">
<div class="sidebar-title">请选择报表类型</div>
<el-checkbox-group v-model="selectedReportKeys" class="report-check-list">
<div v-for="opt in reportTypeDefs" :key="opt.key" class="report-check-row">
<el-checkbox :label="opt.key">{{ opt.label }}</el-checkbox>
</div>
</el-checkbox-group>
<div class="sidebar-actions">
<el-button type="text" size="small" @click="selectAllReportTypes">全选</el-button>
<el-button type="text" size="small" @click="clearReportTypes">清空</el-button>
</div>
<el-button type="primary" size="small" class="btn-generate" @click="applyReport">生成报表</el-button>
</el-col>
<el-col :span="19" class="report-main">
<p class="report-hint">
报表数据来自当前「产品 / 项目」下接口返回的统计；与 Bug 列表使用相同筛选维度。未返回的维度将显示「暂无数据」。
</p>
<el-radio-group v-model="chartType" size="small" class="chart-type-bar" @change="onChartTypeChange">
<el-radio-button label="default">默认</el-radio-button>
<el-radio-button label="pie">饼图</el-radio-button>
<el-radio-button label="bar">柱状图</el-radio-button>
<el-radio-button label="line">折线图</el-radio-button>
</el-radio-group>
<template v-if="appliedReportKeys.length">
<el-tabs v-model="activeTabKey" class="report-tabs" @tab-click="onReportTabClick">
<el-tab-pane
v-for="key in appliedReportKeys"
:key="'tab-' + key"
:name="key"
:label="reportLabel(key)">
</el-tab-pane>
</el-tabs>
<div v-if="activeTabKey" class="report-pane-title">{{ reportLabel(activeTabKey) }}</div>
<el-row :gutter="12" class="report-pane-body">
<template v-if="chartType === 'default'">
<el-col :span="24">
<p class="default-mode-tip">以下为明细数据；切换到饼图 / 柱状图 / 折线图可同时查看图表与表格。</p>
<el-table :data="activeDetailRows" border size="small" class="detail-table" max-height="420">
<el-table-column prop="name" label="条目" min-width="120" show-overflow-tooltip />
<el-table-column prop="value" label="值" width="90" align="right" />
<el-table-column prop="percent" label="百分比" width="100" align="right" />
</el-table>
</el-col>
</template>
<template v-else>
<el-col :span="14">
<div ref="chartRef" class="chart-box"></div>
</el-col>
<el-col :span="10">
<el-table :data="activeDetailRows" border size="small" class="detail-table" max-height="380">
<el-table-column prop="name" label="条目" min-width="120" show-overflow-tooltip />
<el-table-column prop="value" label="值" width="90" align="right" />
<el-table-column prop="percent" label="百分比" width="100" align="right" />
</el-table>
</el-col>
</template>
</el-row>
</template>
<div v-else class="report-empty">请勾选报表类型后点击「生成报表」</div>
</el-col>
</el-row>
</div>
</div>
</page-section>
</div>
</template>
<script>
import echarts from 'echarts'
import PageSection from '@/components/TestPlatform/common/PageSection'
import { getBugStats } from '@/api/bugApi'
import { getProductList } from '@/api/productApi'
import { getProjectList } from '@/api/projectApi'
import {
readLastProductProjectCache,
saveLastProductProjectCache,
pickIdFromOptions
} from '@/utils/lastProductProjectCache'
import { STATUS_MAP } from '@/utils/bugMaps'
const SOLUTION_LABEL_MAP = {
by_design: '设计如此',
duplicate_bug: '重复Bug',
external_reason: '外部原因',
solution_resolved: '已解决',
cannot_reproduce: '无法重现',
deferred: '延期处理',
wont_fix: '不予解决'
}
/** 不含：按严重程度、按优先级、按类型 */
const REPORT_TYPE_DEFS = [
{ key: 'iteration', label: '迭代Bug数量' },
{ key: 'version', label: '版本Bug数量' },
{ key: 'module', label: '模块Bug数量' },
{ key: 'daily_new', label: '每天新增Bug数' },
{ key: 'daily_resolved', label: '每天解决Bug数' },
{ key: 'daily_closed', label: '每天关闭的Bug数' },
{ key: 'by_reporter', label: '每人提交的Bug数' },
{ key: 'by_resolver', label: '每人解决的Bug数' },
{ key: 'by_closer', label: '每人关闭的Bug数' },
{ key: 'solution', label: '按Bug解决方案统计' },
{ key: 'status', label: '按Bug状态统计' },
{ key: 'activation', label: '按Bug激活次数统计' },
{ key: 'by_assignee', label: '按指派给统计' }
]
function firstNonEmptyObject(stats, paths) {
const s = stats || {}
for (let i = 0; i < paths.length; i++) {
const p = paths[i]
const v = p.split('.').reduce((o, k) => (o != null && o[k] !== undefined ? o[k] : undefined), s)
if (v && typeof v === 'object' && !Array.isArray(v) && Object.keys(v).length) return v
}
return null
}
function firstDefined(stats, paths) {
const s = stats || {}
for (let i = 0; i < paths.length; i++) {
const p = paths[i]
const v = p.split('.').reduce((o, k) => (o != null && o[k] !== undefined ? o[k] : undefined), s)
if (v !== undefined && v !== null) return v
}
return null
}
function normalizeTimeSeries(raw) {
if (!raw) return { categories: [], values: [] }
if (Array.isArray(raw)) {
const categories = raw.map(
item => String(item.date || item.day || item.label || item.name || item.stat_date || '-')
)
const values = raw.map(item => {
const v =
item.count !== undefined && item.count !== null && item.count !== ''
? item.count
: item.value !== undefined && item.value !== null && item.value !== ''
? item.value
: item.total !== undefined && item.total !== null && item.total !== ''
? item.total
: item.num
return Number(v) || 0
})
return { categories, values }
}
if (typeof raw === 'object') {
const keys = Object.keys(raw).sort()
return {
categories: keys,
values: keys.map(k => Number(raw[k]) || 0)
}
}
return { categories: [], values: [] }
}
function mapObjectRows(obj, labelResolver) {
if (!obj || typeof obj !== 'object' || Array.isArray(obj)) return { categories: [], values: [] }
const keys = Object.keys(obj)
const categories = keys.map(k => (labelResolver ? labelResolver(k, obj[k]) : String(k)))
const values = keys.map(k => Number(obj[k]) || 0)
return { categories, values }
}
export default {
name: 'BugStats',
components: { PageSection },
data() {
return {
loading: false,
productOptions: [],
projectOptions: [],
query: {
productId: '',
projectId: ''
},
stats: {},
reportTypeDefs: REPORT_TYPE_DEFS,
selectedReportKeys: ['by_resolver'],
appliedReportKeys: [],
activeTabKey: '',
chartType: 'line',
chartInstance: null,
_resizeHandler: null
}
},
computed: {
summaryCardsRow1() {
const s = this.stats || {}
const pick = (a, b, def) => {
const v = a !== undefined && a !== null ? a : b
return v !== undefined && v !== null ? v : def
}
return [
{ key: 'total', label: '总数', value: pick(s.total, s.total_count, 0), tone: 'tone-default' },
{ key: 'new', label: '新建', value: pick(s.new, s.new_count, 0), tone: 'tone-info' },
{ key: 'pending', label: '待处理', value: pick(s.pending, s.pending_count, 0), tone: 'tone-warn' },
{ key: 'in_progress', label: '进行中', value: pick(s.in_progress, s.inProgress, 0), tone: 'tone-primary' }
]
},
summaryCardsRow2() {
const s = this.stats || {}
const pick = (a, b, def) => {
const v = a !== undefined && a !== null ? a : b
return v !== undefined && v !== null ? v : def
}
return [
{ key: 'resolved', label: '已解决', value: pick(s.resolved, s.resolved_count, 0), tone: 'tone-success' },
{ key: 'closed', label: '已关闭', value: pick(s.closed, s.closed_count, 0), tone: 'tone-muted' },
{ key: 'rejected', label: '已拒绝', value: pick(s.rejected, s.rejected_count, 0), tone: 'tone-danger' }
]
},
activeDetailRows() {
const { categories, values } = this.getSeriesForKey(this.activeTabKey)
return this.buildDetailRows(categories, values)
}
},
watch: {
stats() {
if (this.appliedReportKeys.length) {
this.$nextTick(() => this.renderChart())
}
}
},
beforeDestroy() {
this.disposeChart()
if (this._resizeHandler) {
window.removeEventListener('resize', this._resizeHandler)
}
},
methods: {
reportLabel(key) {
const row = this.reportTypeDefs.find(r => r.key === key)
return row ? row.label : key
},
selectAllReportTypes() {
this.selectedReportKeys = this.reportTypeDefs.map(r => r.key)
},
clearReportTypes() {
this.selectedReportKeys = []
},
applyReport() {
if (!this.selectedReportKeys.length) {
this.$message.warning('请至少选择一种报表类型')
return
}
this.appliedReportKeys = [...this.selectedReportKeys]
this.activeTabKey = this.appliedReportKeys[0]
this.$nextTick(() => this.renderChart())
},
onChartTypeChange() {
this.$nextTick(() => this.renderChart())
},
onReportTabClick() {
this.$nextTick(() => this.renderChart())
},
buildDetailRows(categories, values) {
const total = (values || []).reduce((a, b) => a + (Number(b) || 0), 0)
const t = total > 0 ? total : 1
return (categories || []).map((name, i) => {
const v = Number(values[i]) || 0
return {
name: name || '-',
value: v,
percent: `${((v / t) * 100).toFixed(2)}%`
}
})
},
getSeriesForKey(key) {
const s = this.stats || {}
switch (key) {
case 'iteration': {
const o = firstNonEmptyObject(s, [
'by_iteration',
'iteration_bugs',
'iteration_stats',
'iterationStats',
'bugs_by_iteration'
])
return mapObjectRows(o, k => k)
}
case 'version': {
const o = firstNonEmptyObject(s, ['by_version', 'version_bugs', 'version_stats', 'bugs_by_version'])
return mapObjectRows(o, k => k)
}
case 'module': {
const o = firstNonEmptyObject(s, ['by_module', 'module_bugs', 'module_stats', 'bugs_by_module'])
return mapObjectRows(o, k => k)
}
case 'daily_new': {
const raw = firstDefined(s, ['daily_new', 'dailyNew', 'new_by_day', 'bugs_new_daily', 'newDaily'])
return normalizeTimeSeries(raw)
}
case 'daily_resolved': {
const raw = firstDefined(s, ['daily_resolved', 'dailyResolved', 'resolved_by_day', 'bugs_resolved_daily'])
return normalizeTimeSeries(raw)
}
case 'daily_closed': {
const raw = firstDefined(s, ['daily_closed', 'dailyClosed', 'closed_by_day', 'bugs_closed_daily'])
return normalizeTimeSeries(raw)
}
case 'by_reporter': {
const o = firstNonEmptyObject(s, [
'by_reporter',
'byReporter',
'reporter_stats',
'submit_by_user',
'bugs_by_creator'
])
return mapObjectRows(o, k => k)
}
case 'by_resolver': {
const o = firstNonEmptyObject(s, [
'by_resolver',
'byResolver',
'resolved_by_user',
'resolver_stats',
'bugs_by_resolver'
])
return mapObjectRows(o, k => k)
}
case 'by_closer': {
const o = firstNonEmptyObject(s, ['by_closer', 'byCloser', 'closed_by_user', 'closer_stats'])
return mapObjectRows(o, k => k)
}
case 'solution': {
const o = firstNonEmptyObject(s, ['by_solution', 'bySolution', 'solution_stats'])
return mapObjectRows(o, k => SOLUTION_LABEL_MAP[k] || k)
}
case 'status': {
const o = firstNonEmptyObject(s, ['by_status', 'byStatus', 'status_stats'])
return mapObjectRows(o, k => STATUS_MAP[Number(k)] != null ? STATUS_MAP[Number(k)] : STATUS_MAP[k] || k)
}
case 'activation': {
const o = firstNonEmptyObject(s, ['by_activation', 'byActivation', 'activation_stats'])
return mapObjectRows(o, k => k)
}
case 'by_assignee': {
const o = firstNonEmptyObject(s, ['by_assignee', 'byAssignee', 'assignee_stats', 'bugs_by_assignee'])
return mapObjectRows(o, k => k)
}
default:
return { categories: [], values: [] }
}
},
disposeChart() {
if (this.chartInstance) {
try {
this.chartInstance.dispose()
} catch (e) {}
this.chartInstance = null
}
},
renderChart() {
this.disposeChart()
if (!this.appliedReportKeys.length || this.chartType === 'default') return
const el = this.$refs.chartRef
if (!el) return
const { categories, values } = this.getSeriesForKey(this.activeTabKey)
if (!categories.length) {
this.chartInstance = echarts.init(el)
this.chartInstance.setOption({
title: {
text: '暂无数据',
left: 'center',
top: 'middle',
textStyle: { color: '#909399', fontSize: 14 }
}
})
this.bindResize()
return
}
this.chartInstance = echarts.init(el)
const isLine = this.chartType === 'line'
const baseSeries = {
name: this.reportLabel(this.activeTabKey),
data: values,
type: this.chartType === 'pie' ? 'pie' : this.chartType === 'bar' ? 'bar' : 'line',
smooth: isLine,
areaStyle: isLine ? { opacity: 0.12 } : undefined
}
let option
if (this.chartType === 'pie') {
option = {
color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#9b59b6', '#3498db'],
tooltip: { trigger: 'item' },
legend: { bottom: 0, type: 'scroll' },
series: [
{
type: 'pie',
radius: ['36%', '62%'],
center: ['50%', '46%'],
data: categories.map((name, i) => ({ name, value: values[i] })),
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0,0,0,0.15)'
}
}
}
]
}
} else {
option = {
color: ['#409EFF'],
tooltip: { trigger: 'axis' },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
data: categories,
axisLabel: { rotate: categories.some(c => String(c).length > 6) ? 35 : 0, interval: 0 }
},
yAxis: { type: 'value', minInterval: 1 },
series: [Object.assign({}, baseSeries, this.chartType === 'bar' ? { barMaxWidth: 48 } : {})]
}
}
this.chartInstance.setOption(option)
this.bindResize()
},
bindResize() {
if (!this._resizeHandler) {
this._resizeHandler = () => {
if (this.chartInstance) this.chartInstance.resize()
}
window.addEventListener('resize', this._resizeHandler)
} else if (this.chartInstance) {
this.chartInstance.resize()
}
},
loadProductOptions() {
if (this.productOptions.length) return Promise.resolve()
return getProductList({ pageNo: 1, pageSize: 1000, status: 1 }).then(res => {
const data = (res && res.data) || res || {}
this.productOptions = data.items || data.list || data.data || []
}).catch(() => {
this.productOptions = []
})
},
loadProjects(productId) {
if (!productId) {
this.projectOptions = []
return Promise.resolve()
}
return getProjectList({ pageNo: 1, pageSize: 1000, status: 1, productId }).then(res => {
const data = (res && res.data) || res || {}
this.projectOptions = data.items || data.list || data.data || []
}).catch(() => {
this.projectOptions = []
})
},
restoreSharedProductProjectCache() {
const cached = readLastProductProjectCache()
if (!cached) return Promise.resolve()
const { productId: pid, projectId: projId } = cached
if (pid === '' || pid === undefined || pid === null || projId === '' || projId === undefined || projId === null) {
return Promise.resolve()
}
const hasProduct = (this.productOptions || []).some(p => String(p.id) === String(pid))
if (!hasProduct) return Promise.resolve()
this.query.productId = pickIdFromOptions(this.productOptions, pid)
return this.loadProjects(this.query.productId).then(() => {
const hasProject = (this.projectOptions || []).some(p => String(p.id) === String(projId))
if (!hasProject) return
this.query.projectId = pickIdFromOptions(this.projectOptions, projId)
})
},
onProductChange(val) {
this.query.projectId = ''
this.projectOptions = []
this.loadProjects(val)
},
onProjectChange(val) {
if (val) {
saveLastProductProjectCache(this.query.productId, val)
}
},
handleSearch() {
saveLastProductProjectCache(this.query.productId, this.query.projectId)
this.fetchStats()
},
fetchStats() {
this.loading = true
const params = {}
if (this.query.productId !== '' && this.query.productId != null) params.productId = this.query.productId
if (this.query.projectId !== '' && this.query.projectId != null) params.projectId = this.query.projectId
getBugStats(params)
.then(res => {
this.stats = (res && res.data) || res || {}
})
.catch(() => {
this.stats = {}
})
.finally(() => {
this.loading = false
})
}
},
created() {
this.loadProductOptions()
.then(() => this.restoreSharedProductProjectCache())
.finally(() => this.fetchStats())
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
.filter-bar {
margin-bottom: 8px;
}
.stats-body {
min-height: 120px;
}
.stat-row {
margin-bottom: 8px;
}
.stat-card {
border-radius: 10px;
padding: 16px 18px;
margin-bottom: 16px;
border: 1px solid #ebeef5;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.stat-label {
font-size: 13px;
color: #909399;
}
.stat-value {
margin-top: 8px;
font-size: 26px;
font-weight: 600;
color: #303133;
}
.tone-primary .stat-value {
color: #409eff;
}
.tone-success .stat-value {
color: #67c23a;
}
.tone-warn .stat-value {
color: #e6a23c;
}
.tone-danger .stat-value {
color: #f56c6c;
}
.tone-info .stat-value {
color: #909399;
}
.tone-muted .stat-value {
color: #606266;
}
.report-section {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #ebeef5;
}
.report-sidebar {
border: 1px solid #ebeef5;
border-radius: 8px;
padding: 14px 12px;
background: #fafbfc;
}
.sidebar-title {
font-weight: 600;
font-size: 14px;
color: #303133;
margin-bottom: 10px;
}
.report-check-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 420px;
overflow-y: auto;
}
.report-check-row {
line-height: 1.5;
}
.sidebar-actions {
margin-top: 10px;
margin-bottom: 8px;
}
.btn-generate {
width: 100%;
}
.report-main {
min-height: 420px;
}
.report-hint {
font-size: 12px;
color: #909399;
margin: 0 0 10px;
line-height: 1.5;
}
.chart-type-bar {
margin-bottom: 12px;
}
.report-tabs {
margin-top: 4px;
}
.report-pane-title {
font-size: 15px;
font-weight: 600;
color: #303133;
margin-bottom: 10px;
}
.default-mode-tip {
font-size: 12px;
color: #909399;
margin: 0 0 8px;
}
.report-pane-body {
align-items: stretch;
}
.chart-box {
height: 380px;
width: 100%;
}
.chart-placeholder {
height: 380px;
display: flex;
align-items: center;
justify-content: center;
color: #909399;
font-size: 13px;
padding: 16px;
text-align: center;
border: 1px dashed #dcdfe6;
border-radius: 6px;
background: #fafafa;
}
.detail-table {
width: 100%;
}
.report-empty {
padding: 48px 16px;
text-align: center;
color: #909399;
font-size: 14px;
border: 1px dashed #e4e7ed;
border-radius: 8px;
}
</style>

212
src/components/Bug/BugStepsRichEditor.vue Normal file
View File

@@ -0,0 +1,212 @@
<template>
<div class="bug-steps-rich-wrap">
<div ref="editorHost" class="bug-steps-rich-host"></div>
</div>
</template>
<script>
// 使用已打包的 min，避免 babel-loader 读 wangeditor 内 .babelrc 导致构建失败
import E from 'wangeditor/dist/wangEditor.min.js'
import { uploadBugStepImage } from '@/api/bugApi'
import {
parseBugUploadFileUrl,
normalizeUploadPathSlashes,
rewriteBugImageUrlForAccess
} from '@/utils/bugStepsFormat'
const EMPTY_HTML = '<p><br></p>'
function normalizeHtmlForCompare(html) {
const h = (html || '').trim()
if (!h || h === EMPTY_HTML || h === '<p><br/></p>') return ''
return h
}
export default {
name: 'BugStepsRichEditor',
props: {
value: {
type: String,
default: ''
},
placeholder: {
type: String,
default: '请输入复现步骤，工具栏可插入图片，支持粘贴截图'
},
height: {
type: Number,
default: 360
}
},
data() {
return {
editor: null,
syncing: false,
_pasteImgHostEl: null,
_pasteImgHandlerBound: null
}
},
watch: {
value(val) {
this.syncFromParent(val)
}
},
mounted() {
this.$nextTick(() => {
this.initEditor()
})
},
beforeDestroy() {
this.teardownPasteImageUpload()
if (this.editor) {
try {
this.editor.destroy()
} catch (e) { /* ignore */ }
this.editor = null
}
},
methods: {
syncFromParent(val) {
if (!this.editor) return
const cur = normalizeHtmlForCompare(this.editor.txt.html())
const next = normalizeHtmlForCompare(val)
if (cur === next) return
this.syncing = true
this.editor.txt.html(next ? val : EMPTY_HTML)
this.$nextTick(() => {
this.syncing = false
})
},
initEditor() {
if (!this.$refs.editorHost || this.editor) return
const EditorCtor = E && E.default ? E.default : E
const editor = new EditorCtor(this.$refs.editorHost)
// 必须低于 Element UI 下拉面板的 z-index（约 2000+），否则模块等 el-select 会被富文本盖住
editor.config.zIndex = 500
editor.config.placeholder = this.placeholder
editor.config.height = this.height
if (editor.config.menus && editor.config.menus.indexOf('video') !== -1) {
editor.config.menus = editor.config.menus.filter(function (m) {
return m !== 'video'
})
}
const self = this
editor.config.customUploadImg = function (resultFiles, insertImgFn) {
if (!resultFiles || !resultFiles.length) return
resultFiles.reduce(function (chain, file) {
return chain.then(function () {
return uploadBugStepImage(file).then(function (res) {
const raw = normalizeUploadPathSlashes(parseBugUploadFileUrl(res))
if (!raw) {
self.$message.error('上传成功但未返回图片地址')
return
}
const url = rewriteBugImageUrlForAccess(raw)
insertImgFn(url)
})
})
}, Promise.resolve()).catch(function () {
self.$message.error('图片上传失败')
})
}
editor.config.onchange = function (html) {
if (self.syncing) return
const h = html || ''
if (normalizeHtmlForCompare(h) === '') {
self.$emit('input', '')
} else {
self.$emit('input', h)
}
}
editor.create()
this.editor = editor
const initial = this.value && this.value.trim() ? this.value : EMPTY_HTML
editor.txt.html(initial)
this.bindPasteImageUpload(editor)
},
teardownPasteImageUpload() {
if (this._pasteImgHostEl && this._pasteImgHandlerBound) {
this._pasteImgHostEl.removeEventListener('paste', this._pasteImgHandlerBound, true)
}
this._pasteImgHostEl = null
this._pasteImgHandlerBound = null
},
/** 粘贴截图走 /bug/upload，与工具栏插入图片一致 */
bindPasteImageUpload(editor) {
this.teardownPasteImageUpload()
const el = editor.$textElem && editor.$textElem[0]
if (!el) return
const self = this
this._pasteImgHostEl = el
this._pasteImgHandlerBound = function (e) {
const cd = e.clipboardData
if (!cd) return
let file = null
if (cd.items && cd.items.length) {
for (let i = 0; i < cd.items.length; i++) {
const it = cd.items[i]
if (it.kind === 'file' && it.type && it.type.indexOf('image/') === 0) {
file = it.getAsFile()
if (file) break
}
}
}
if (!file && cd.files && cd.files.length) {
for (let i = 0; i < cd.files.length; i++) {
const f = cd.files[i]
if (f && f.type && f.type.indexOf('image/') === 0) {
file = f
break
}
}
}
if (!file) return
e.preventDefault()
e.stopPropagation()
uploadBugStepImage(file)
.then(function (res) {
const raw = normalizeUploadPathSlashes(parseBugUploadFileUrl(res))
if (!raw) {
self.$message.error('上传成功但未返回图片地址')
return
}
const url = rewriteBugImageUrlForAccess(raw)
const imgHtml = '<img src="' + url + '" style="max-width:100%;"/>'
let inserted = false
if (editor.cmd && typeof editor.cmd.do === 'function') {
try {
editor.cmd.do('insertHTML', imgHtml)
inserted = true
} catch (e1) {
try {
editor.cmd.do('insertHtml', imgHtml)
inserted = true
} catch (e2) { /* ignore */ }
}
}
if (!inserted) self.$message.error('插入图片失败')
})
.catch(function () {
self.$message.error('图片上传失败')
})
}
el.addEventListener('paste', this._pasteImgHandlerBound, true)
}
}
}
</script>
<style scoped>
.bug-steps-rich-wrap {
width: 100%;
border: 1px solid #dcdfe6;
border-radius: 4px;
background: #fff;
overflow: hidden;
position: relative;
z-index: 0;
}
.bug-steps-rich-host {
text-align: left;
}
</style>

4
src/components/CreateData/CreateDataInfo.vue
View File

@@ -128,7 +128,7 @@ export default {
ItApiCreate(this.form).then(res => {
if (res && res.success === true) {
this.$message({type: 'success', message: this.form.sqlId ? '修改成功' : '新增成功'})
this.$router.push({path: '/create/data'})
this.$router.push({path: '/data-tools/db-builder'})
} else {
this.$message({type: 'error', message: res.message || '保存失败'})
}
@@ -138,7 +138,7 @@ export default {
})
},
goBack() {
this.$router.push({path: '/create/data'})
this.$router.push({path: '/data-tools/db-builder'})
}
},
created() {

301
src/components/EffektHome.vue
View File

@@ -1,24 +1,61 @@
<template>
<div class="effekt-home">
<el-card shadow="never">
<div class="home-content">
<p class="home-desc">这里汇总各项目常用环境地址和文档链接，方便快速进入。</p>
<div
v-for="project in projectLinks"
:key="project.name"
class="project-block">
<div class="project-title">{{ project.name }}</div>
<div class="project-links">
<div v-for="item in project.links" :key="item.name" class="link-item">
<span class="link-label">{{ item.name }}：</span>
<el-link
:href="item.url"
target="_blank"
type="primary"
class="doc-link">
{{ item.url }}
</el-link>
<el-row :gutter="20" class="top-row">
<el-col :xs="24" :md="10">
<el-card shadow="never" class="greet-card">
<div class="greet-line">{{ greetingPrefix }}{{ greetingTime }}</div>
<div class="greet-date">{{ todayText }}</div>
<div v-if="currentUser" class="greet-progress">
<span class="greet-progress-label">待处理进度</span>
<el-progress :percentage="100" :stroke-width="10" status="success" />
<span class="greet-progress-tip">已完成 100%</span>
</div>
<div v-else class="greet-login-tip">
<el-link type="primary" @click="goLogin">登录后查看个人工作台</el-link>
</div>
</el-card>
</el-col>
<el-col :xs="24" :md="14">
<el-card shadow="never" class="work-card">
<div class="work-card-title">今天剩余工作总计</div>
<div class="work-stats">
<div class="work-stat">
<div class="work-stat-value">{{ formatCount(workCountOpportunity) }}</div>
<div class="work-stat-label">我的机会</div>
</div>
<div class="work-stat work-stat--click" @click="goMyBugs">
<div class="work-stat-value">{{ formatCount(workCountBug) }}</div>
<div class="work-stat-label">我的 BUG</div>
<div class="work-stat-hint">点击查看指派给我</div>
</div>
<div class="work-stat work-stat--click" @click="goMyPlans">
<div class="work-stat-value">{{ formatCount(workCountPlan) }}</div>
<div class="work-stat-label">我的计划</div>
<div class="work-stat-hint">点击查看我负责的</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-card shadow="never" class="links-card">
<div class="links-card-title">环境与文档</div>
<p class="home-desc">这里汇总各项目常用环境地址和文档链接，方便快速进入。</p>
<div
v-for="project in projectLinks"
:key="project.name"
class="project-block">
<div class="project-title">{{ project.name }}</div>
<div class="project-links">
<div v-for="item in project.links" :key="item.name" class="link-item">
<span class="link-label">{{ item.name }}：</span>
<el-link
:href="item.url"
target="_blank"
type="primary"
class="doc-link">
{{ item.url }}
</el-link>
</div>
</div>
</div>
@@ -27,10 +64,17 @@
</template>
<script>
import { getBugList } from '@/api/bugApi'
import { getPlanList } from '@/api/planApi'
import { readLastProductProjectCache } from '@/utils/lastProductProjectCache'
export default {
name: 'EffektHome',
data() {
return {
workCountOpportunity: null,
workCountBug: null,
workCountPlan: null,
projectLinks: [
{
name: '智慧运营',
@@ -40,7 +84,7 @@ export default {
{ name: '需求文档', url: 'https://vcncbabzm4lv.feishu.cn/wiki/UsvzwMzV0i7Lrgk9VIhc2XgJn6e?fromScene=spaceOverview' },
{ name: '资源连接地址(包含数据库连接，jenkins配置，git仓库，日志查询，xxjob等)', url: 'https://vcncbabzm4lv.feishu.cn/wiki/ZKmown7QuiXtwTkONhUcagpQnWh' },
{ name: '领星地址', url: 'https://envision.lingxing.com/erp/home' },
{ name: '禅道地址', url: 'http://39.170.26.156:8888/my.html' },
{ name: '禅道地址', url: 'http://39.170.26.156:8888/my.html' }
]
},
{
@@ -50,11 +94,116 @@ export default {
{ name: 'web的C端测试环境地址', url: 'https://joyhub-website-frontend-test.best-envision.com/' },
{ name: '接口开发地址', url: 'https://joyhub-website-manager-api-test.best-envision.com/doc.html#/home' },
{ name: '资源连接地址', url: 'https://vcncbabzm4lv.feishu.cn/wiki/PXTmw6BBviMjNDkKCxCcewD7nMd' },
{ name: '禅道地址', url: 'http://192.168.16.4:8956/index.php?m=my&f=index' },
{ name: '禅道地址', url: 'http://192.168.16.4:8956/index.php?m=my&f=index' }
]
}
]
}
},
computed: {
currentUser() {
return this.$store.state.currentUser
},
greetingPrefix() {
const u = this.currentUser
if (!u) return ''
const name = u.realName || u.username || ''
return name ? `${name}，` : ''
},
greetingTime() {
const h = new Date().getHours()
if (h < 12) return '上午好！'
if (h < 18) return '下午好！'
return '晚上好！'
},
todayText() {
const d = new Date()
const y = d.getFullYear()
const m = String(d.getMonth() + 1).padStart(2, '0')
const day = String(d.getDate()).padStart(2, '0')
return `${y}年${m}月${day}日`
}
},
mounted() {
this.refreshWorkCounts()
},
methods: {
formatCount(n) {
if (n === null || n === undefined || Number.isNaN(Number(n))) return '—'
return String(n)
},
goLogin() {
this.$router.push({ name: 'login' })
},
goMyBugs() {
if (!this.currentUser) {
this.$message.warning('请先登录')
this.goLogin()
return
}
const c = readLastProductProjectCache()
const q = { assignToMe: '1' }
if (c && c.productId !== undefined && c.productId !== null && String(c.productId).trim() !== '') {
q.productId = String(c.productId)
}
if (c && c.projectId !== undefined && c.projectId !== null && String(c.projectId).trim() !== '') {
q.projectId = String(c.projectId)
}
this.$router.push({ path: '/bug/list', query: q })
},
goMyPlans() {
if (!this.currentUser) {
this.$message.warning('请先登录')
this.goLogin()
return
}
const c = readLastProductProjectCache()
const q = { planOwnerSelf: '1' }
if (c && c.productId !== undefined && c.productId !== null && String(c.productId).trim() !== '') {
q.productId = String(c.productId)
}
if (c && c.projectId !== undefined && c.projectId !== null && String(c.projectId).trim() !== '') {
q.projectId = String(c.projectId)
}
this.$router.push({ path: '/test-platform/plan', query: q })
},
refreshWorkCounts() {
const u = this.currentUser
const c = readLastProductProjectCache()
this.workCountOpportunity = null
this.workCountBug = null
this.workCountPlan = null
if (!u || u.id == null || u.id === '' || !c || !c.projectId) {
return
}
getBugList({
productId: c.productId,
projectId: c.projectId,
assigneeId: u.id,
pageNo: 1,
pageSize: 1
})
.then(res => {
const data = (res && res.data) || res || {}
this.workCountBug = Number(data.total != null ? data.total : 0)
})
.catch(() => {
this.workCountBug = null
})
getPlanList(c.projectId, {
owner_id: u.id,
owner: u.id,
pageNo: 1,
pageSize: 1
})
.then(res => {
const data = (res && res.data) || res || {}
this.workCountPlan = Number(data.total != null ? data.total : 0)
})
.catch(() => {
this.workCountPlan = null
})
}
}
}
</script>
@@ -62,6 +211,117 @@ export default {
<style scoped>
.effekt-home {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.top-row {
margin-bottom: 20px;
}
.greet-card,
.work-card {
border-radius: 10px;
border: 1px solid #ebeef5;
min-height: 160px;
}
.greet-line {
font-size: 20px;
font-weight: 600;
color: #303133;
margin-bottom: 8px;
}
.greet-date {
color: #909399;
font-size: 13px;
margin-bottom: 16px;
}
.greet-progress-label {
font-size: 12px;
color: #606266;
display: block;
margin-bottom: 6px;
}
.greet-progress-tip {
font-size: 12px;
color: #67c23a;
margin-top: 6px;
display: block;
}
.greet-login-tip {
margin-top: 8px;
}
.work-card-title {
font-size: 15px;
font-weight: 600;
color: #303133;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid #ebeef5;
}
.work-stats {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
}
.work-stat {
flex: 1;
min-width: 120px;
text-align: center;
padding: 12px 8px;
border-radius: 8px;
background: #f5f9ff;
border: 1px solid #e4ecfb;
cursor: default;
transition: box-shadow 0.2s, border-color 0.2s;
}
.work-stat--click {
cursor: pointer;
}
.work-stat--click:hover {
border-color: #409eff;
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}
.work-stat-value {
font-size: 28px;
font-weight: 600;
color: #409eff;
line-height: 1.2;
}
.work-stat-label {
margin-top: 8px;
font-size: 14px;
color: #606266;
}
.work-stat-hint {
margin-top: 4px;
font-size: 11px;
color: #909399;
}
.links-card {
border-radius: 10px;
}
.links-card-title {
font-size: 15px;
font-weight: 600;
color: #303133;
margin-bottom: 8px;
}
.home-content {
@@ -72,6 +332,7 @@ export default {
.home-desc {
margin: 0 0 16px;
color: #606266;
font-size: 13px;
}
.project-block {

106
src/components/Home.vue
View File

@@ -90,10 +90,18 @@ export default {
return this.$store.state.userMenus || []
},
displayMenus() {
const homeMenu = { name: '首页', path: '/effekt', icon: 'el-icon-house', children: [] }
if (!this.userMenus.length) {
return [{ name: '首页', path: '/effekt', icon: 'el-icon-house', children: [] }]
return [homeMenu]
}
return this.filterMenus(this.userMenus)
const filteredMenus = this.filterMenus(this.userMenus)
const menus = this.renameTestPlatformToCycle(filteredMenus)
const sorted = this.sortMenusByProductOrder(menus)
const hasHome = sorted.some(menu => menu.path === '/effekt' || menu.name === '首页')
if (hasHome) {
return sorted
}
return [homeMenu, ...sorted]
},
displayName() {
if (!this.currentUser) {
@@ -117,18 +125,44 @@ export default {
},
menuPath(item) {
const pathMap = {
'/system/role': '/system/roles',
'/system/user': '/system/users',
'/system/menu': '/system/menus'
'/system/role': '/system/role',
'/system/user': '/system/user',
'/system/menu': '/system/menu',
'/system/permission': '/system/permission',
'/bug': '/bug/list',
'/bug/list': '/bug/list',
'/bug/detail': '/bug/detail',
'/bug/create': '/bug/create',
'/bug/edit': '/bug/edit',
'/bug/stats': '/bug/stats'
}
return pathMap[item.path] || item.path || '/effekt'
},
menuIcon(item) {
const path = String(item.path || '')
const pathIconMap = {
'/bug': 'el-icon-s-claim',
'/bug/create': 'el-icon-document-add',
'/bug/list': 'el-icon-document',
'/bug/stats': 'el-icon-data-line',
'/bug/detail': 'el-icon-view',
'/bug/edit': 'el-icon-edit-outline'
}
if (path && pathIconMap[path]) {
return pathIconMap[path]
}
// 按照原来的静态菜单名称映射图标
const nameIconMap = {
'首页': 'el-icon-house',
'测试协作工作台': 'el-icon-s-operation',
'测试平台': 'el-icon-s-platform',
'用例周期': 'el-icon-s-platform',
'Bug管理': 'el-icon-s-claim',
'新建 Bug': 'el-icon-document-add',
'创建Bug': 'el-icon-document-add',
'创建 Bug': 'el-icon-document-add',
'Bug 列表': 'el-icon-document',
'Bug 统计': 'el-icon-data-line',
'产品管理': 'el-icon-box',
'项目管理': 'el-icon-s-management',
'用例管理': 'el-icon-document',
@@ -144,15 +178,18 @@ export default {
'权限管理': 'el-icon-lock',
'菜单管理': 'el-icon-menu'
}
const iconMap = {
setting: 'el-icon-setting',
peoples: 'el-icon-user-solid',
user: 'el-icon-user',
lock: 'el-icon-lock',
menu: 'el-icon-menu'
menu: 'el-icon-menu',
warning: 'el-icon-warning-outline',
edit: 'el-icon-edit',
document: 'el-icon-document'
}
// 优先级：先匹配名称，再匹配接口中指定的 icon，最后返回默认图标 el-icon-menu
if (item.name && nameIconMap[item.name]) {
return nameIconMap[item.name]
@@ -170,6 +207,59 @@ export default {
return !!item.path && !!this.menuPath(item)
})
},
renameTestPlatformToCycle(menus) {
return (menus || []).map(item => {
const name = item.name === '测试平台' ? '用例周期' : item.name
const children = item.children && item.children.length
? this.renameTestPlatformToCycle(item.children)
: item.children
return Object.assign({}, item, { name, children })
})
},
/** 左侧栏顶级顺序：首页 → 用例周期 → Bug管理 → 造数 → 系统管理 → 其它 */
representativeMenuPath(menu) {
const direct = String((menu && menu.path) || '').trim()
if (direct) return direct
const walk = m => {
const q = String((m && m.path) || '').trim()
if (q) return q
const ch = (m && m.children) || []
for (let i = 0; i < ch.length; i++) {
const r = walk(ch[i])
if (r) return r
}
return ''
}
return walk(menu)
},
menuSortWeight(menu) {
const p = this.representativeMenuPath(menu)
const n = String((menu && menu.name) || '').trim()
if (p === '/effekt' || n === '首页') return 0
if (p.indexOf('/test-platform') === 0 || n === '用例周期' || n === '测试平台') return 10
if (p.indexOf('/bug') === 0 || n === 'Bug管理' || n.indexOf('Bug') === 0) return 20
if (
p.indexOf('/create') === 0 ||
p.indexOf('/data-tools') === 0 ||
/造数|造数工具|造数工厂|数据库造数/.test(n)
) {
return 30
}
if (p.indexOf('/system') === 0 || n === '系统管理') return 40
return 50
},
sortMenusByProductOrder(menus) {
const arr = menus || []
return arr
.map((m, i) => ({ m, i }))
.sort((a, b) => {
const wa = this.menuSortWeight(a.m)
const wb = this.menuSortWeight(b.m)
if (wa !== wb) return wa - wb
return a.i - b.i
})
.map(x => x.m)
},
handleUserCommand(command) {
if (command === 'logout') {
localStorage.removeItem('authUser')

177
src/components/System/MenuManage.vue
View File

@@ -2,6 +2,8 @@
<div class="page-wrap">
<page-section title="菜单管理">
<template slot="extra">
<el-button size="small" :loading="initPermissionMenuLoading" @click="initPermissionMenu">初始化权限管理菜单</el-button>
<el-button size="small" :loading="initBugMenuLoading" @click="initBugManagementMenu">初始化 Bug 管理菜单</el-button>
<el-button type="primary" size="small" @click="openCreate(0)">新建菜单</el-button>
</template>
<el-form :inline="true" :model="queryForm" size="small" @submit.native.prevent>
@@ -163,6 +165,8 @@ export default {
return {
loading: false,
submitting: false,
initPermissionMenuLoading: false,
initBugMenuLoading: false,
dialogVisible: false,
dialogMode: 'create',
queryForm: {
@@ -307,6 +311,179 @@ export default {
this.fetchTree()
})
}).catch(() => {})
},
initPermissionMenu() {
this.initPermissionMenuLoading = true
getMenuTree({}).then(res => {
const data = res && res.data ? res.data : res || []
const tree = Array.isArray(data) ? data : (data.list || data.items || [])
const flattened = []
this.flattenMenus(tree, flattened)
let systemMenu = flattened.find(item => {
const path = item.path || ''
const name = item.name || ''
return path === '/system' || name === '系统管理'
})
const hasPermissionMenu = flattened.some(item => (item.path || '') === '/system/permission')
const createPermissionChild = parentId => {
if (hasPermissionMenu) {
this.$message.success('权限管理菜单已存在')
return Promise.resolve()
}
return createMenu({
parentId: Number(parentId || 0),
name: '权限管理',
code: 'system_permission_manage',
type: 2,
path: '/system/permission',
component: '@/components/System/PermissionManage',
icon: 'lock',
permissionCode: 'permission:list',
sort: 40,
visible: 1,
status: 1
})
}
if (systemMenu) {
return createPermissionChild(systemMenu.id || systemMenu.menuId)
}
return createMenu({
parentId: 0,
name: '系统管理',
code: 'system_manage',
type: 1,
path: '/system',
component: '',
icon: 'setting',
permissionCode: '',
sort: 90,
visible: 1,
status: 1
}).then(createRes => {
const created = (createRes && createRes.data) || {}
const parentId = created.id || created.menuId
if (parentId) {
return createPermissionChild(parentId)
}
// 如果接口不返回id，则重新拉取菜单树定位系统管理菜单
return getMenuTree({}).then(latestRes => {
const latestData = latestRes && latestRes.data ? latestRes.data : latestRes || []
const latestTree = Array.isArray(latestData) ? latestData : (latestData.list || latestData.items || [])
const latestFlattened = []
this.flattenMenus(latestTree, latestFlattened)
const latestSystem = latestFlattened.find(item => (item.path || '') === '/system' || (item.name || '') === '系统管理')
return createPermissionChild(latestSystem ? (latestSystem.id || latestSystem.menuId) : 0)
})
})
}).then(() => {
this.$message.success('权限管理菜单初始化完成')
this.fetchTree()
}).catch(() => {
this.$message.error('初始化权限管理菜单失败')
}).finally(() => {
this.initPermissionMenuLoading = false
})
},
initBugManagementMenu() {
this.initBugMenuLoading = true
getMenuTree({}).then(res => {
const data = res && res.data ? res.data : res || []
const tree = Array.isArray(data) ? data : (data.list || data.items || [])
const flattened = []
this.flattenMenus(tree, flattened)
const hasBugMenu = flattened.some(item => String(item.path || '').indexOf('/bug') === 0)
if (hasBugMenu) {
this.$message.success('Bug 管理菜单已存在')
return Promise.resolve()
}
return createMenu({
parentId: 0,
name: 'Bug管理',
code: 'bug_manage_root',
type: 1,
path: '/bug',
component: '',
icon: 'el-icon-s-claim',
permissionCode: '',
sort: 88,
visible: 1,
status: 1
}).then(parentRes => {
const created = (parentRes && parentRes.data) || {}
let parentId = created.id || created.menuId
const resolveParentId = () => {
if (parentId) return Promise.resolve(parentId)
return getMenuTree({}).then(latestRes => {
const latestData = latestRes && latestRes.data ? latestRes.data : latestRes || []
const latestTree = Array.isArray(latestData) ? latestData : (latestData.list || latestData.items || [])
const flat = []
this.flattenMenus(latestTree, flat)
const p = flat.find(item => (item.path || '') === '/bug' || (item.code || '') === 'bug_manage_root')
return p ? (p.id || p.menuId) : 0
})
}
return resolveParentId().then(pid => {
if (!pid) {
return Promise.reject(new Error('未获取到 Bug 管理父菜单 ID'))
}
const children = [
{
name: '新建 Bug',
code: 'bug_create',
path: '/bug/create',
component: '@/components/Bug/BugEditor',
permissionCode: 'bug:create',
sort: 5,
icon: 'el-icon-document-add'
},
{
name: 'Bug 列表',
code: 'bug_list',
path: '/bug/list',
component: '@/components/Bug/BugList',
permissionCode: 'bug:list',
sort: 10,
icon: 'el-icon-document'
},
{
name: 'Bug 统计',
code: 'bug_stats',
path: '/bug/stats',
component: '@/components/Bug/BugStats',
permissionCode: 'bug:stats',
sort: 20,
icon: 'el-icon-data-line'
}
]
return children.reduce((chain, c) => {
return chain.then(() => createMenu({
parentId: Number(pid),
name: c.name,
code: c.code,
type: 2,
path: c.path,
component: c.component,
icon: c.icon,
permissionCode: c.permissionCode,
sort: c.sort,
visible: 1,
status: 1
}))
}, Promise.resolve())
})
})
}).then(() => {
this.$message.success('Bug 管理菜单初始化完成')
this.fetchTree()
}).catch(() => {
this.$message.error('初始化 Bug 管理菜单失败')
}).finally(() => {
this.initBugMenuLoading = false
})
}
},
created() {

464
src/components/System/PermissionManage.vue Normal file
View File

@@ -0,0 +1,464 @@
<template>
<div class="page-wrap">
<page-section title="权限管理">
<template slot="extra">
<el-button type="primary" size="small" @click="openCreate">新建权限</el-button>
</template>
<el-form :inline="true" :model="queryForm" size="small" @submit.native.prevent>
<el-form-item label="关键词">
<el-input
v-model.trim="queryForm.keyword"
placeholder="权限名称"
clearable
@keyup.enter.native="handleSearch">
</el-input>
</el-form-item>
<el-form-item label="模块">
<el-input
v-model.trim="queryForm.module"
placeholder="模块"
clearable
@keyup.enter.native="handleSearch">
</el-input>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="queryForm.status" clearable placeholder="全部状态">
<el-option label="启用" :value="1"></el-option>
<el-option label="禁用" :value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button @click="resetSearch">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="tableData" border style="width: 100%; margin-top: 16px;">
<el-table-column prop="code" label="权限编码" min-width="180"></el-table-column>
<el-table-column prop="name" label="权限名称" min-width="160"></el-table-column>
<el-table-column prop="module" label="模块" min-width="120"></el-table-column>
<el-table-column prop="action" label="操作类型" min-width="120"></el-table-column>
<el-table-column prop="description" label="描述" min-width="220" show-overflow-tooltip></el-table-column>
<el-table-column label="状态" width="100">
<template slot-scope="scope">{{ formatStatus(scope.row.status) }}</template>
</el-table-column>
<el-table-column label="创建时间" min-width="170">
<template slot-scope="scope">{{ formatDateTime(scope.row.created_time || scope.row.createdTime) }}</template>
</el-table-column>
<el-table-column label="已有角色" min-width="180">
<template slot-scope="scope">
<div v-if="getRolesForRow(scope.row).length" class="role-tag-wrap">
<el-tag
v-for="role in getRolesForRow(scope.row)"
:key="`${scope.row.id || scope.row.permission_id || ''}-${role.id}`"
size="mini">
{{ role.name || role.role_name || role.roleName || role.id || '-' }}
</el-tag>
</div>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="操作" width="220" fixed="right">
<template slot-scope="scope">
<el-button type="text" @click="openAssignRoles(scope.row)">权限分配</el-button>
<el-button type="text" @click="openEdit(scope.row)">编辑</el-button>
<el-button type="text" style="color: #F56C6C;" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 16px; text-align: right;">
<el-pagination
:current-page="pageNo"
:page-size="pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</page-section>
<el-dialog :title="dialogMode === 'create' ? '新建权限' : '编辑权限'" :visible.sync="dialogVisible" width="560px" @close="resetDialogForm">
<el-form ref="permissionForm" :model="permissionForm" :rules="permissionRules" label-width="94px" size="small">
<el-form-item label="权限编码" prop="code">
<el-input
v-model.trim="permissionForm.code"
maxlength="64"
placeholder="请输入权限编码"
:disabled="dialogMode === 'edit'">
</el-input>
</el-form-item>
<el-form-item label="权限名称" prop="name">
<el-input v-model.trim="permissionForm.name" maxlength="64" placeholder="请输入权限名称"></el-input>
</el-form-item>
<el-form-item label="模块" prop="module">
<el-input v-model.trim="permissionForm.module" maxlength="64" placeholder="请输入模块名"></el-input>
</el-form-item>
<el-form-item label="操作类型" prop="action">
<el-input v-model.trim="permissionForm.action" maxlength="64" placeholder="请输入操作类型"></el-input>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="permissionForm.status" placeholder="请选择状态" style="width: 100%;">
<el-option label="启用" :value="1"></el-option>
<el-option label="禁用" :value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input
v-model.trim="permissionForm.description"
type="textarea"
:rows="4"
maxlength="255"
show-word-limit
placeholder="请输入描述">
</el-input>
</el-form-item>
</el-form>
<span slot="footer">
<el-button size="small" @click="dialogVisible = false">取消</el-button>
<el-button type="primary" size="small" :loading="submitting" @click="submitForm">确定</el-button>
</span>
</el-dialog>
<el-dialog title="分配权限到角色" :visible.sync="assignDialogVisible" width="520px" @close="resetAssignDialog">
<el-form label-width="90px" size="small">
<el-form-item label="权限">
<el-input :value="assignPermissionName" disabled></el-input>
</el-form-item>
<el-form-item label="角色选择">
<el-select
v-model="selectedRoleIds"
multiple
filterable
clearable
placeholder="请选择角色"
style="width: 100%;">
<el-option
v-for="item in roleOptions"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer">
<el-button size="small" @click="assignDialogVisible = false">取消</el-button>
<el-button type="primary" size="small" :loading="assignSubmitting" @click="submitAssignRoles">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { assignRolePermissions, createPermission, deletePermission, getPermissionDetail, getPermissionList, getRolePageList, updatePermission } from '@/api/rbacApi'
const getDefaultForm = () => ({
id: undefined,
code: '',
name: '',
module: '',
action: '',
description: '',
status: 1
})
export default {
name: 'PermissionManage',
components: { PageSection },
data() {
return {
loading: false,
submitting: false,
assignSubmitting: false,
dialogVisible: false,
assignDialogVisible: false,
dialogMode: 'create',
queryForm: {
keyword: '',
module: '',
status: ''
},
pageNo: 1,
pageSize: 20,
total: 0,
tableData: [],
roleOptions: [],
assignPermissionId: undefined,
assignPermissionName: '',
selectedRoleIds: [],
permissionForm: getDefaultForm(),
permissionRules: {
code: [{ required: true, message: '请输入权限编码', trigger: 'blur' }],
name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}
}
},
methods: {
fetchList() {
this.loading = true
getPermissionList({
keyword: this.queryForm.keyword,
module: this.queryForm.module,
status: this.queryForm.status,
pageNo: this.pageNo,
pageSize: this.pageSize
}).then(res => {
const data = (res && res.data) || res || {}
this.tableData = data.list || data.items || data.data || []
this.total = Number(data.total || data.totalCount || this.tableData.length || 0)
}).catch(() => {
this.tableData = []
this.total = 0
}).finally(() => {
this.loading = false
})
},
handleSearch() {
this.pageNo = 1
this.fetchList()
},
resetSearch() {
this.queryForm = {
keyword: '',
module: '',
status: ''
}
this.pageNo = 1
this.fetchList()
},
handleSizeChange(val) {
this.pageSize = val
this.pageNo = 1
this.fetchList()
},
handleCurrentChange(val) {
this.pageNo = val
this.fetchList()
},
openCreate() {
this.dialogMode = 'create'
this.dialogVisible = true
this.$nextTick(() => {
this.permissionForm = getDefaultForm()
if (this.$refs.permissionForm) {
this.$refs.permissionForm.clearValidate()
}
})
},
openEdit(row) {
const permissionId = row.permissionId || row.permission_id || row.id
this.dialogMode = 'edit'
this.dialogVisible = true
this.$nextTick(() => {
this.permissionForm = Object.assign(getDefaultForm(), row, { id: permissionId })
if (this.$refs.permissionForm) {
this.$refs.permissionForm.clearValidate()
}
})
if (!permissionId) return
getPermissionDetail(permissionId).then(res => {
const data = (res && res.data) || res || {}
this.permissionForm = Object.assign(getDefaultForm(), data, {
id: data.id || data.permissionId || data.permission_id || permissionId
})
}).catch(() => {})
},
openAssignRoles(row) {
const permissionId = row.permissionId || row.permission_id || row.id
if (!permissionId) return
this.assignPermissionId = permissionId
this.assignPermissionName = row.name || row.code || `权限#${permissionId}`
const roles = this.getRolesForRow(row)
this.selectedRoleIds = roles
.map(r => this.normalizeRoleId(r.id !== undefined && r.id !== null ? r.id : r.roleId))
.filter(id => id !== null && id !== undefined)
this.assignDialogVisible = true
this.fetchRoleOptions().then(() => {
const optionIdSet = new Set(this.roleOptions.map(o => this.normalizeRoleId(o.id)))
roles.forEach(r => {
const rawId = r.id !== undefined && r.id !== null ? r.id : r.roleId
const nid = this.normalizeRoleId(rawId)
if (nid === null || nid === undefined) return
if (!optionIdSet.has(nid)) {
this.roleOptions.push({
id: nid,
name: r.name || r.role_name || r.roleName || String(rawId)
})
optionIdSet.add(nid)
}
})
this.$nextTick(() => {
this.selectedRoleIds = roles
.map(r => this.normalizeRoleId(r.id !== undefined && r.id !== null ? r.id : r.roleId))
.filter(id => id !== null && id !== undefined)
})
})
},
normalizeRoleId(id) {
if (id === undefined || id === null || id === '') return null
const n = Number(id)
return Number.isFinite(n) && String(id) === String(n) ? n : id
},
fetchRoleOptions() {
return getRolePageList({ pageNo: 1, pageSize: 9999 }).then(res => {
const data = (res && res.data) || res || {}
const list = data.list || data.items || data.data || []
this.roleOptions = (Array.isArray(list) ? list : []).map(item => ({
id: this.normalizeRoleId(item.id !== undefined && item.id !== null ? item.id : item.roleId),
name: item.name || item.code || `角色${item.id || item.roleId}`
})).filter(item => item.id !== undefined && item.id !== null)
}).catch(() => {
this.roleOptions = []
})
},
resetAssignDialog() {
this.assignSubmitting = false
this.assignPermissionId = undefined
this.assignPermissionName = ''
this.selectedRoleIds = []
},
submitAssignRoles() {
if (!this.assignPermissionId) return
if (!this.selectedRoleIds.length) {
this.$message.warning('请至少选择一个角色')
return
}
const permissionId = Number(this.assignPermissionId)
if (Number.isNaN(permissionId)) {
this.$message.warning('权限 ID 无效')
return
}
const roleIds = Array.from(new Set(
(this.selectedRoleIds || []).map(id => Number(id)).filter(id => !Number.isNaN(id))
))
if (!roleIds.length) {
this.$message.warning('请至少选择一个有效角色')
return
}
this.assignSubmitting = true
assignRolePermissions({
roleIds,
permissionId
}).then(res => {
if (res && res.code && res.code !== 20000) {
this.$message.error((res && res.message) || '权限分配失败')
return
}
const data = (res && res.data) || {}
const assignedCount = data.id
if (assignedCount !== undefined && assignedCount !== null && assignedCount !== '') {
this.$message.success(`权限分配成功，本次处理角色数：${assignedCount}`)
} else {
this.$message.success((res && res.message) || '权限分配成功')
}
this.assignDialogVisible = false
this.fetchList()
}).finally(() => {
this.assignSubmitting = false
})
},
getRolesForRow(row) {
if (!row) return []
const roles = row.roles
return Array.isArray(roles) ? roles : []
},
resetDialogForm() {
this.permissionForm = getDefaultForm()
this.submitting = false
this.$nextTick(() => {
if (this.$refs.permissionForm) {
this.$refs.permissionForm.resetFields()
}
})
},
submitForm() {
this.$refs.permissionForm.validate(valid => {
if (!valid) {
return
}
this.submitting = true
const basePayload = {
code: this.permissionForm.code,
name: this.permissionForm.name,
module: this.permissionForm.module,
action: this.permissionForm.action,
description: this.permissionForm.description,
status: Number(this.permissionForm.status)
}
const payload = this.dialogMode === 'create'
? basePayload
: Object.assign({
id: this.permissionForm.id,
permissionId: this.permissionForm.id,
permission_id: this.permissionForm.id
}, basePayload)
const request = this.dialogMode === 'create'
? createPermission(payload)
: updatePermission(payload)
request.then(res => {
if (res && res.code && res.code !== 20000) {
this.$message.error((res && res.message) || (this.dialogMode === 'create' ? '权限创建失败' : '权限更新失败'))
return
}
this.$message.success((res && res.message) || (this.dialogMode === 'create' ? '权限创建成功' : '权限更新成功'))
this.dialogVisible = false
this.pageNo = 1
this.fetchList()
}).finally(() => {
this.submitting = false
})
})
},
handleDelete(row) {
const permissionId = row.permissionId || row.permission_id || row.id
if (!permissionId) return
this.$confirm('确认删除该权限吗？', '提示', { type: 'warning' }).then(() => {
return deletePermission({
id: permissionId,
permissionId: permissionId,
permission_id: permissionId
}).then(res => {
if (res && res.code && res.code !== 20000) {
this.$message.error((res && res.message) || '权限删除失败')
return
}
this.$message.success((res && res.message) || '权限删除成功')
if (this.tableData.length === 1 && this.pageNo > 1) {
this.pageNo = this.pageNo - 1
}
this.fetchList()
})
}).catch(() => {})
},
formatStatus(value) {
return Number(value) === 0 ? '禁用' : '启用'
},
formatDateTime(value) {
if (!value) return '-'
return String(value).replace('T', ' ').slice(0, 19)
}
},
created() {
this.fetchList()
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
.role-tag-wrap {
display: flex;
flex-wrap: wrap;
gap: 6px;
line-height: 1.4;
}
</style>

14
src/components/System/UserManage.vue
View File

@@ -125,7 +125,7 @@
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { assignUserRoles, createUser, deleteUser, getRoleList, getUserList, getUserRoleList, updateUser } from '@/api/rbacApi'
import { assignUserRoles, createUser, deleteUser, getRolePageList, getUserList, getUserRoleList, updateUser } from '@/api/rbacApi'
const getDefaultForm = () => ({
userId: undefined,
@@ -191,11 +191,11 @@ export default {
})
},
fetchRoleOptions() {
return getRoleList({ pageNo: 1, pageSize: 9999 }).then(res => {
return getRolePageList({ pageNo: 1, pageSize: 9999 }).then(res => {
const data = res && res.data ? res.data : res || {}
const list = data.items || data.list || data.data || []
const list = data.list || data.items || data.data || []
this.roleOptions = list.map(item => ({
id: item.id || item.roleId,
id: item.id,
name: item.name
}))
}).catch(() => {
@@ -255,9 +255,11 @@ export default {
this.assignUserId = row.userId || row.id
this.assignUserName = row.username
this.assignDialogVisible = true
Promise.all([this.fetchRoleOptions(), getUserRoleList(this.assignUserId)]).then(([, res]) => {
this.fetchRoleOptions()
getUserRoleList(this.assignUserId).then(res => {
const data = res && res.data ? res.data : res || {}
this.selectedRoleIds = data.roleIds || data.role_ids || []
const roleIds = data.roleIds || data.role_ids || []
this.selectedRoleIds = roleIds.map(id => Number(id))
}).catch(() => {
this.selectedRoleIds = []
})

55
src/components/TestPlatform/Case/CaseEditor.vue
View File

@@ -47,9 +47,12 @@
<el-form-item label="前置条件">
<el-input v-model="form.preconditions" type="textarea" :rows="3"></el-input>
</el-form-item>
<el-form-item label="步骤(JSON)" prop="steps">
<el-form-item label="步骤">
<el-input v-model="stepsText" type="textarea" :rows="10"></el-input>
</el-form-item>
<el-form-item label="预期结果">
<el-input v-model="expectedResultText" type="textarea" :rows="3" placeholder="请输入预期结果"></el-input>
</el-form-item>
<el-form-item label="优先级">
<el-select v-model="form.priority">
<el-option label="P0" :value="0"></el-option>
@@ -121,14 +124,15 @@ export default {
status: 1,
isAuto: 0
},
stepsText: '[]',
stepsText: '',
expectedResultText: '',
tagsText: '',
rules: {
productId: [{ required: true, message: '请选择产品', trigger: 'change' }],
projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
moduleId: [{ required: true, message: '请选择模块', trigger: 'change' }],
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
steps: [{ required: true, message: '请输入步骤', trigger: 'change' }]
// 步骤为文本输入，不做 JSON 校验；是否为空在 submitForm 里校验
}
}
},
@@ -201,7 +205,8 @@ export default {
status: data.status || 1,
isAuto: data.isAuto !== undefined ? data.isAuto : (data.is_auto !== undefined ? data.is_auto : 0)
})
this.stepsText = JSON.stringify(this.form.steps || [], null, 2)
this.stepsText = this.formatStepsToText(this.form.steps || [])
this.expectedResultText = data.expectedResults || data.expected_results || this.extractExpectedResultFromSteps(this.form.steps || [])
this.tagsText = Array.isArray(this.form.tags) ? this.form.tags.join(',') : (this.form.tags || '')
if (this.form.projectId) {
this.loadModuleOptions()
@@ -209,11 +214,11 @@ export default {
})
},
submitForm() {
let steps = []
try {
steps = JSON.parse(this.stepsText || '[]')
} catch (e) {
this.$message({ type: 'error', message: '步骤 JSON 格式错误' })
const expectedResult = (this.expectedResultText || '').trim()
const stepsText = String(this.stepsText || '').trim()
if (!stepsText) {
this.$message({ type: 'error', message: '请输入步骤' })
return
}
const tags = this.tagsText ? this.tagsText.split(',').map(item => item.trim()).filter(Boolean) : []
@@ -223,7 +228,8 @@ export default {
caseKey: this.form.caseKey,
title: this.form.title,
preconditions: this.form.preconditions,
steps,
steps: stepsText,
expectedResults: expectedResult,
priority: this.form.priority,
caseType: this.form.caseType,
tags,
@@ -248,8 +254,35 @@ export default {
return result
}, {})
},
formatStepsToText(steps) {
if (typeof steps === 'string') return steps
if (!Array.isArray(steps)) return ''
return steps
.map(item => {
if (item === null || item === undefined) return ''
if (typeof item === 'string') return item
return item.action || item.step || item.description || item.text || item.content || ''
})
.filter(Boolean)
.join('\n')
},
extractExpectedResultFromSteps(steps) {
if (!Array.isArray(steps) || steps.length === 0) return ''
const first = steps[0]
if (first && typeof first === 'object') {
return first.expected || first.expected_result || first.expectedResult || ''
}
return ''
},
backList() {
this.$router.push({ path: '/test-platform/case', query: { productId: this.form.productId || undefined, projectId: this.form.projectId || undefined } })
this.$router.push({
path: '/test-platform/case',
query: {
productId: this.form.productId || undefined,
projectId: this.form.projectId || undefined,
tab: 'cases'
}
})
}
},
created() {

1464
src/components/TestPlatform/Case/CaseList.vue
View File

File diff suppressed because it is too large Load Diff

2
src/components/TestPlatform/DataFactory/BuilderEditor.vue
View File

@@ -66,7 +66,7 @@ export default {
this.saving = true
createBuilder(this.projectId, Object.assign({}, this.form, { definition, input_schema })).then(() => {
this.$message({ type: 'success', message: '造数器保存成功' })
this.$router.push({ path: '/test-platform/data-factory/builders', query: { projectId: this.projectId } })
this.$router.push({ path: '/data-tools/factory/builders', query: { projectId: this.projectId } })
}).finally(() => {
this.saving = false
})

6
src/components/TestPlatform/DataFactory/BuilderList.vue
View File

@@ -72,13 +72,13 @@ export default {
})
},
goEditor(row) {
this.$router.push({ path: '/test-platform/data-factory/editor', query: { projectId: this.projectId, builderId: row && row.id } })
this.$router.push({ path: '/data-tools/factory/editor', query: { projectId: this.projectId, builderId: row && row.id } })
},
goTasks() {
this.$router.push({ path: '/test-platform/data-factory/tasks', query: { projectId: this.projectId } })
this.$router.push({ path: '/data-tools/factory/task', query: { projectId: this.projectId } })
},
goMock() {
this.$router.push({ path: '/test-platform/data-factory/mock', query: { projectId: this.projectId } })
this.$router.push({ path: '/data-tools/factory/mock', query: { projectId: this.projectId } })
},
execute(row) {
executeBuilder(this.projectId, row.id, { params: { count: 1 }, async: true }).then(() => {

354
src/components/TestPlatform/Plan/PlanBuilder.vue
View File

@@ -1,26 +1,100 @@
<template>
<div class="page-wrap">
<page-section title="计划构建">
<el-form :model="form" label-width="120px" size="small">
<el-form-item label="项目ID">
<el-input v-model="projectId" style="width: 200px;"></el-input>
<page-section :title="isEditMode ? '编辑计划' : '计划构建'">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" size="small">
<el-form-item label="产品名称" prop="productId">
<el-select
v-model="form.productId"
filterable
clearable
placeholder="请选择产品"
style="width: 360px;"
@change="handleProductChange"
@focus="loadProductOptions">
<el-option
v-for="item in productOptions"
:key="item.id"
:label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="计划名称">
<el-form-item label="项目名称" prop="projectId">
<el-select
v-model="form.projectId"
filterable
clearable
placeholder="请选择项目"
style="width: 360px;"
:disabled="!form.productId"
@change="handleProjectChange">
<el-option
v-for="item in projectOptions"
:key="item.id"
:label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="计划名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="版本">
<el-form-item label="版本" prop="version">
<el-input v-model="form.version"></el-input>
</el-form-item>
<el-form-item label="负责人ID">
<el-input v-model="form.owner_id"></el-input>
<el-form-item label="负责人" prop="owner_id">
<el-select
v-model="form.owner_id"
filterable
clearable
placeholder="请选择负责人"
style="width: 360px;"
:disabled="!form.projectId">
<el-option
v-for="item in ownerOptions"
:key="item.id"
:label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="环境ID">
<el-input v-model="form.environment_id"></el-input>
<el-form-item label="环境名称" prop="environment_id">
<el-select
v-model="form.environment_id"
filterable
clearable
placeholder="请选择环境"
style="width: 360px;"
:disabled="!form.projectId">
<el-option
v-for="item in environmentOptions"
:key="item.id"
:label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="开始时间" prop="start_time">
<el-date-picker
v-model="form.start_time"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择开始时间"
style="width: 360px;">
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="end_time">
<el-date-picker
v-model="form.end_time"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择结束时间"
style="width: 360px;">
</el-date-picker>
</el-form-item>
<el-form-item label="描述">
<el-input v-model="form.description" type="textarea" :rows="4"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="goBack">返回</el-button>
<el-button type="primary" :loading="saving" @click="submitForm">保存计划</el-button>
</el-form-item>
</el-form>
@@ -30,34 +104,270 @@
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { createPlan } from '@/api/planApi'
import { createPlan, getPlanDetail, updatePlan } from '@/api/planApi'
import { getProductList } from '@/api/productApi'
import { getProjectDetail, getProjectEnvironments, getProjectList, getProjectMembers } from '@/api/projectApi'
export default {
name: 'PlanBuilder',
components: { PageSection },
components: {PageSection},
data() {
return {
saving: false,
projectId: this.$route.query.projectId || 1,
planId: this.$route.query.planId || '',
productOptions: [],
projectOptions: [],
ownerOptions: [],
environmentOptions: [],
form: {
productId: '',
projectId: this.$route.query.projectId ? Number(this.$route.query.projectId) : '',
name: '',
version: '',
owner_id: '',
environment_id: '',
start_time: '',
end_time: '',
description: ''
},
rules: {
productId: [{ required: true, message: '请选择产品', trigger: 'change' }],
projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
name: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
version: [{ required: true, message: '请输入版本', trigger: 'blur' }],
owner_id: [{ required: true, message: '请选择负责人', trigger: 'change' }],
environment_id: [{ required: true, message: '请选择环境', trigger: 'change' }],
start_time: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
end_time: [{ required: true, message: '请选择结束时间', trigger: 'change' }]
}
}
},
methods: {
submitForm() {
this.saving = true
createPlan(this.projectId, this.form).then(() => {
this.$message({ type: 'success', message: '计划创建成功' })
this.$router.push({ path: '/test-platform/plans', query: { projectId: this.projectId } })
}).finally(() => {
this.saving = false
})
computed: {
isEditMode() {
return !!this.planId
}
},
methods: {
loadProductOptions() {
if (this.productOptions && this.productOptions.length > 0) {
return Promise.resolve()
}
return getProductList({ pageNo: 1, pageSize: 1000, status: 1 }).then(res => {
const data = res && res.data ? res.data : res || {}
this.productOptions = data.items || data.list || data.data || []
}).catch(() => {
this.productOptions = []
})
},
loadProjectOptionsByProduct(productId) {
if (!productId) {
this.projectOptions = []
return Promise.resolve()
}
return getProjectList({ pageNo: 1, pageSize: 1000, status: 1, productId }).then(res => {
const data = res && res.data ? res.data : res || {}
this.projectOptions = data.items || data.list || data.data || []
}).catch(() => {
this.projectOptions = []
})
},
loadProjectMeta(projectId) {
if (!projectId) {
this.ownerOptions = []
this.environmentOptions = []
return Promise.resolve()
}
const memberReq = getProjectMembers(projectId, { pageNo: 1, pageSize: 1000 }).then(res => {
const data = (res && res.data) || res || {}
const list = data.items || data.list || data.data || data || []
this.ownerOptions = (Array.isArray(list) ? list : []).map(item => ({
id: item.user_id || item.userId || item.id,
name:
item.real_name ||
item.realName ||
item.username ||
item.name ||
item.user_name ||
`用户${item.user_id || item.id}`
})).filter(item => item.id !== undefined && item.id !== null && item.id !== '')
}).catch(() => {
this.ownerOptions = []
})
const envReq = getProjectEnvironments(projectId, { pageNo: 1, pageSize: 1000 }).then(res => {
const data = (res && res.data) || res || {}
const list = data.items || data.list || data.data || data || []
this.environmentOptions = (Array.isArray(list) ? list : []).map(item => ({
id: item.id,
name: item.name
}))
}).catch(() => {
this.environmentOptions = []
})
return Promise.all([memberReq, envReq])
},
handleProductChange() {
this.form.projectId = ''
this.form.owner_id = ''
this.form.environment_id = ''
this.projectOptions = []
this.ownerOptions = []
this.environmentOptions = []
this.loadProjectOptionsByProduct(this.form.productId)
},
handleProjectChange() {
this.form.owner_id = ''
this.form.environment_id = ''
this.ownerOptions = []
this.environmentOptions = []
this.loadProjectMeta(this.form.projectId)
},
goBack() {
this.$router.push({
path: '/test-platform/plan',
query: {
productId: this.form.productId || undefined,
projectId: this.form.projectId || undefined
}
})
},
submitForm() {
this.$refs.formRef.validate(valid => {
if (!valid) {
return
}
const projectId = this.form.projectId
const payload = {
name: this.form.name,
version: this.form.version,
owner_id: this.form.owner_id,
environment_id: this.form.environment_id,
start_time: this.form.start_time,
end_time: this.form.end_time,
description: this.form.description
}
this.saving = true
const request = this.isEditMode
? updatePlan(projectId, this.planId, payload)
: createPlan(projectId, payload)
request.then(() => {
this.$message({ type: 'success', message: this.isEditMode ? '计划更新成功' : '计划创建成功' })
this.$router.push({
path: '/test-platform/plan',
query: {
productId: this.form.productId || undefined,
projectId: projectId || undefined
}
})
}).finally(() => {
this.saving = false
})
})
},
/** 与 PlanList 列表行一致，兼容详情接口多种时间字段名 */
pickPlanDetailStartRaw(plan) {
if (!plan) return ''
return (
plan.start_date ||
plan.startDate ||
plan.start_time ||
plan.startTime ||
plan.begin_time ||
plan.beginTime ||
plan.planned_start_time ||
plan.plannedStartTime ||
''
)
},
pickPlanDetailEndRaw(plan) {
if (!plan) return ''
return (
plan.end_date ||
plan.endDate ||
plan.end_time ||
plan.endTime ||
plan.finish_time ||
plan.finishTime ||
plan.planned_end_time ||
plan.plannedEndTime ||
''
)
},
/** 将接口返回的时间戳 / ISO 串等转为 date-picker 的 value-format 字符串 */
toDatePickerValue(value) {
if (value === undefined || value === null || value === '') return ''
if (typeof value === 'number' || (typeof value === 'string' && /^\d+$/.test(value.trim()))) {
const raw = Number(value)
if (Number.isNaN(raw) || raw <= 0) return ''
const ms = raw < 1000000000000 ? raw * 1000 : raw
const d = new Date(ms)
if (Number.isNaN(d.getTime())) return ''
const pad = n => String(n).padStart(2, '0')
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
}
const s = String(value).trim()
if (!s) return ''
let normalized = s
if (s.includes('T')) {
normalized = s.replace('T', ' ').replace(/\.\d+/, '').replace(/Z$/i, '').trim()
}
if (normalized.length >= 19) {
return normalized.slice(0, 19)
}
if (/^\d{4}-\d{2}-\d{2}$/.test(normalized)) {
return `${normalized} 00:00:00`
}
const parsed = new Date(s)
if (!Number.isNaN(parsed.getTime())) {
const pad = n => String(n).padStart(2, '0')
return `${parsed.getFullYear()}-${pad(parsed.getMonth() + 1)}-${pad(parsed.getDate())} ${pad(parsed.getHours())}:${pad(parsed.getMinutes())}:${pad(parsed.getSeconds())}`
}
return normalized
},
unwrapPlanDetailPayload(res) {
const raw = (res && res.data) || res || {}
const inner = raw.plan || raw.detail
if (inner && typeof inner === 'object') {
return Object.assign({}, raw, inner)
}
return raw
},
loadPlanDetail() {
if (!this.isEditMode || !this.form.projectId) {
return Promise.resolve()
}
return getPlanDetail(this.form.projectId, this.planId).then(res => {
const data = this.unwrapPlanDetailPayload(res)
this.form.name = data.name || ''
this.form.version = data.version || ''
this.form.owner_id = data.owner_id || data.ownerId || ''
this.form.environment_id = data.environment_id || data.environmentId || ''
this.form.start_time = this.toDatePickerValue(this.pickPlanDetailStartRaw(data))
this.form.end_time = this.toDatePickerValue(this.pickPlanDetailEndRaw(data))
this.form.description = data.description || ''
}).catch(() => {})
},
initByRouteProject() {
if (!this.form.projectId) {
return Promise.resolve()
}
return getProjectDetail(this.form.projectId).then(res => {
const data = res && res.data ? res.data : res || {}
const productId = data.productId || data.product_id || ''
if (productId) {
this.form.productId = productId
return this.loadProjectOptionsByProduct(productId)
}
}).catch(() => {})
}
},
created() {
this.loadProductOptions().then(() => this.initByRouteProject()).finally(() => {
if (this.form.projectId) {
this.loadProjectMeta(this.form.projectId).then(() => {
this.loadPlanDetail()
})
}
})
}
}
</script>

268
src/components/TestPlatform/Plan/PlanCaseAdd.vue Normal file
View File

@@ -0,0 +1,268 @@
<template>
<div class="page-wrap">
<page-section title="关联用例">
<el-form :inline="true" size="small" @submit.native.prevent>
<el-form-item label="产品名称">
<el-input :value="productName" disabled style="width: 220px;"></el-input>
</el-form-item>
<el-form-item label="项目名称">
<el-input :value="projectName" disabled style="width: 220px;"></el-input>
</el-form-item>
<el-form-item label="计划名称">
<el-input :value="planName" disabled style="width: 220px;"></el-input>
</el-form-item>
</el-form>
<div class="query-toolbar">
<el-form :inline="true" :model="queryForm" size="small" class="query-toolbar-form" @submit.native.prevent>
<el-form-item label="用例名称">
<el-input v-model="queryForm.keyword" clearable style="width: 180px;"></el-input>
</el-form-item>
<el-form-item label="模块名称">
<el-input v-model="queryForm.moduleName" clearable style="width: 160px;"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="fetchCases">查询</el-button>
</el-form-item>
</el-form>
<div class="query-toolbar-actions">
<el-button size="small" @click="goBack">返回</el-button>
<el-button type="primary" size="small" :loading="submitting" @click="submitAssociate">关联用例</el-button>
</div>
</div>
<el-table
ref="caseTable"
v-loading="loading"
:data="tableData"
border
style="margin-top: 12px;"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="52"></el-table-column>
<el-table-column label="模块名称" min-width="160">
<template slot-scope="scope">{{ scope.row.module_name || '-' }}</template>
</el-table-column>
<el-table-column prop="case_key" label="用例编号" min-width="130"></el-table-column>
<el-table-column prop="title" label="用例名称" min-width="220"></el-table-column>
<el-table-column label="优先级" width="90">
<template slot-scope="scope">{{ formatPriority(scope.row.priority) }}</template>
</el-table-column>
<el-table-column label="是否已关联计划" width="130">
<template slot-scope="scope">
<el-tag size="mini" :type="isCaseAssociated(scope.row.id) ? 'success' : 'info'">
{{ isCaseAssociated(scope.row.id) ? '已关联' : '未关联' }}
</el-tag>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 16px; text-align: right;">
<el-pagination
:current-page="pageNo"
:page-size="pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</page-section>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { getCaseList } from '@/api/caseApi'
import { addPlanCases, getPlanCaseList, getPlanDetail } from '@/api/planApi'
export default {
name: 'PlanCaseAdd',
components: { PageSection },
data() {
return {
loading: false,
submitting: false,
pageNo: 1,
pageSize: 20,
total: 0,
tableData: [],
selectedRows: [],
associatedCaseIdMap: {},
queryForm: {
keyword: '',
moduleName: ''
},
ownerId: this.$route.query.ownerId || ''
}
},
computed: {
projectId() {
return this.$route.query.projectId || ''
},
planId() {
return this.$route.query.planId || ''
},
productName() {
return this.$route.query.productName || ''
},
projectName() {
return this.$route.query.projectName || ''
},
planName() {
return this.$route.query.planName || ''
}
},
methods: {
loadAssociatedCaseIds() {
if (!this.projectId || !this.planId) {
this.associatedCaseIdMap = {}
return Promise.resolve()
}
return getPlanCaseList(this.projectId, this.planId, {
pageNo: 1,
pageSize: 2000
}).then(res => {
const data = (res && res.data) || res || {}
const list = data.list || data.items || []
this.associatedCaseIdMap = (Array.isArray(list) ? list : []).reduce((map, item) => {
const caseId = item.case_id || item.caseId || (item.case && item.case.id) || (item.case && item.case.case_id)
if (caseId !== undefined && caseId !== null && caseId !== '') {
map[caseId] = true
}
return map
}, {})
}).catch(() => {
this.associatedCaseIdMap = {}
})
},
fetchCases() {
if (!this.projectId) {
this.tableData = []
this.total = 0
return
}
this.loading = true
const params = {
keyword: this.queryForm.keyword || undefined,
module_name: this.queryForm.moduleName || undefined,
status: 4,
pageNo: this.pageNo,
pageSize: this.pageSize
}
Promise.all([this.loadAssociatedCaseIds(), getCaseList(this.projectId, params)]).then(([, res]) => {
const data = (res && res.data) || res || {}
const list = data.list || data.items || []
this.tableData = Array.isArray(list) ? list : []
this.total = Number(data.total || this.tableData.length || 0)
this.$nextTick(() => {
this.$refs.caseTable && this.$refs.caseTable.clearSelection()
})
this.selectedRows = []
}).catch(() => {
this.tableData = []
this.total = 0
}).finally(() => {
this.loading = false
})
},
isCaseAssociated(caseId) {
return !!this.associatedCaseIdMap[caseId]
},
loadPlanOwner() {
if (!this.projectId || !this.planId || this.ownerId) {
return Promise.resolve()
}
return getPlanDetail(this.projectId, this.planId).then(res => {
const data = (res && res.data) || res || {}
this.ownerId = data.owner_id || data.ownerId || ''
}).catch(() => {})
},
handleSelectionChange(rows) {
this.selectedRows = rows || []
},
handleSizeChange(size) {
this.pageSize = size
this.pageNo = 1
this.fetchCases()
},
handleCurrentChange(page) {
this.pageNo = page
this.fetchCases()
},
formatPriority(value) {
const map = { 0: 'P0', 1: 'P1', 2: 'P2', 3: 'P3' }
return map[value] || value
},
submitAssociate() {
if (!this.planId) {
this.$message.warning('缺少计划ID')
return
}
if (!this.ownerId) {
this.$message.warning('缺少负责人信息，无法关联')
return
}
const caseIds = this.selectedRows.map(item => item.id).filter(Boolean)
if (caseIds.length === 0) {
this.$message.warning('请先选择要关联的用例')
return
}
this.submitting = true
addPlanCases(this.projectId, this.planId, {
planId: Number(this.planId),
caseIds,
assigneeId: Number(this.ownerId),
roundNo: 1
}).then(() => {
this.$message.success('关联用例成功')
this.goBack()
}).finally(() => {
this.submitting = false
})
},
goBack() {
this.$router.push({
path: '/test-platform/plan',
query: {
productId: this.$route.query.productId || undefined,
projectId: this.projectId || undefined
}
})
}
},
created() {
this.loadPlanOwner().finally(() => {
this.fetchCases()
})
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
.query-toolbar {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-top: 8px;
}
.query-toolbar-form {
flex: 1;
min-width: 0;
}
.query-toolbar-actions {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding-top: 4px;
}
</style>

319
src/components/TestPlatform/Plan/PlanExecute.vue
View File

@@ -1,108 +1,245 @@
<template>
<div class="page-wrap">
<page-section title="计划执行">
<el-form :inline="true" size="small" @submit.native.prevent>
<el-form-item label="项目ID">
<el-input v-model="projectId" style="width: 120px;"></el-input>
</el-form-item>
<el-form-item label="计划ID">
<el-input v-model="planId" style="width: 120px;"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="fetchDetail">刷新</el-button>
</el-form-item>
</el-form>
<key-value-descriptions :items="summaryItems"></key-value-descriptions>
<el-divider></el-divider>
<el-form :model="executeForm" label-width="120px" size="small">
<el-form-item label="计划用例ID">
<el-input v-model="executeForm.planCaseId"></el-input>
</el-form-item>
<el-form-item label="执行状态">
<el-select v-model="executeForm.status">
<el-option label="通过" :value="1"></el-option>
<el-option label="失败" :value="2"></el-option>
<el-option label="阻塞" :value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="实际结果">
<el-input v-model="executeForm.actual_result" type="textarea" :rows="4"></el-input>
</el-form-item>
<el-form-item label="缺陷链接">
<el-input v-model="defectLinksText" placeholder="多个缺陷号用逗号分隔"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="submitting" @click="submitExecute">提交执行</el-button>
</el-form-item>
</el-form>
<div class="filter-toolbar">
<el-form :inline="true" size="small" class="filter-toolbar-form" @submit.native.prevent>
<el-form-item label="产品名称">
<el-input :value="productName" disabled style="width: 220px;"></el-input>
</el-form-item>
<el-form-item label="项目名称">
<el-input :value="projectName" disabled style="width: 220px;"></el-input>
</el-form-item>
<el-form-item label="计划名称">
<el-input :value="planNameDisplay" disabled style="width: 240px;"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="fetchPlanCases">刷新</el-button>
</el-form-item>
</el-form>
<div class="filter-toolbar-actions">
<el-button size="small" @click="goBack">返回</el-button>
</div>
</div>
<el-table
v-loading="loading"
:data="planCaseTableData"
border
style="margin-top: 12px;">
<el-table-column prop="planCaseId" label="计划用例ID" width="120"></el-table-column>
<el-table-column prop="caseKey" label="用例编号" min-width="120"></el-table-column>
<el-table-column prop="caseTitle" label="用例名称" min-width="220"></el-table-column>
<el-table-column prop="actualResult" label="执行结果" min-width="180"></el-table-column>
<el-table-column label="执行状态" width="110">
<template slot-scope="scope">
<el-tag size="mini" :type="formatExecuteStatusTag(scope.row.status)">{{ scope.row.statusLabel }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<el-button type="text" @click="openExecuteDialog(scope.row)">执行</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
style="margin-top: 12px; text-align: right;"
background
layout="total, sizes, prev, pager, next, jumper"
:current-page="pageNo"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
<el-dialog
title=""
:visible.sync="executeDialogVisible"
width="760px">
<div class="detail-title">{{ selectedPlanCase ? (selectedPlanCase.caseTitle || selectedPlanCase.title || selectedPlanCase.caseKey || selectedPlanCase.caseId) : '' }}</div>
<div class="detail-section">
<div class="detail-section-title">前置条件</div>
<div class="detail-text">{{ caseDetail.preconditions || '-' }}</div>
</div>
<div class="detail-section">
<div class="detail-section-title">执行步骤</div>
<div class="detail-text">{{ formatSteps(caseDetail.steps) || '-' }}</div>
</div>
<div class="detail-section">
<div class="detail-section-title">预期结果</div>
<div class="detail-text">{{ caseDetail.expected_results || caseDetail.expectedResults || '-' }}</div>
</div>
<div class="detail-section">
<div class="detail-section-title">执行结果</div>
<el-input
v-model="executeResultText"
type="textarea"
:rows="3"
placeholder="失败或阻塞时必填">
</el-input>
</div>
<span slot="footer">
<el-button @click="executeDialogVisible = false">取消</el-button>
<el-button type="success" :loading="submitting" @click="submitExecute(1)">通过</el-button>
<el-button type="danger" :loading="submitting" @click="submitExecute(2)">失败</el-button>
<el-button type="warning" :loading="submitting" @click="submitExecute(3)">阻塞</el-button>
</span>
</el-dialog>
</page-section>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import KeyValueDescriptions from '@/components/TestPlatform/common/KeyValueDescriptions'
import { executePlanCase, getPlanDetail } from '@/api/planApi'
import { getCaseDetail } from '@/api/caseApi'
import { executePlanCase, getPlanCaseList } from '@/api/planApi'
export default {
name: 'PlanExecute',
components: { PageSection, KeyValueDescriptions },
components: { PageSection },
data() {
return {
projectId: this.$route.query.projectId || 1,
projectId: this.$route.query.projectId || '',
planId: this.$route.query.planId || '',
detail: {},
loading: false,
planCaseTableData: [],
total: 0,
selectedPlanCase: null,
caseDetail: {},
executeDialogVisible: false,
submitting: false,
defectLinksText: '',
executeForm: {
planCaseId: '',
status: 1,
actual_result: ''
}
executeResultText: '',
pageNo: 1,
pageSize: 10
}
},
computed: {
summaryItems() {
return [
{ label: '计划ID', value: this.detail.id },
{ label: '计划名称', value: this.detail.name },
{ label: '总用例数', value: this.detail.total_cases },
{ label: '已完成', value: this.detail.completed },
{ label: '通过率', value: this.detail.pass_rate }
]
productName() {
return this.$route.query.productName || ''
},
projectName() {
return this.$route.query.projectName || ''
},
planNameDisplay() {
return this.$route.query.planName || ''
}
},
methods: {
fetchDetail() {
if (!this.planId) {
handleSizeChange(size) {
this.pageSize = size
this.pageNo = 1
this.fetchPlanCases()
},
handleCurrentChange(page) {
this.pageNo = page
this.fetchPlanCases()
},
fetchPlanCases() {
if (!this.planId || !this.projectId) {
this.planCaseTableData = []
this.total = 0
this.selectedPlanCase = null
this.caseDetail = {}
return
}
getPlanDetail(this.projectId, this.planId).then(res => {
this.detail = (res && res.data) || res || {}
this.loading = true
getPlanCaseList(this.projectId, this.planId, { pageNo: this.pageNo, pageSize: this.pageSize })
.then(listRes => {
const data = (listRes && listRes.data) || listRes || {}
const list = data.list || data.items || []
this.total = Number(data.total != null ? data.total : (Array.isArray(list) ? list.length : 0))
this.planCaseTableData = (Array.isArray(list) ? list : []).map(item => ({
planCaseId: item.id,
caseId: item.case_id || item.caseId,
status: item.status,
statusLabel: this.formatExecuteStatus(item.status),
actualResult: item.actual_result || item.actualResult || '',
caseKey: item.case_key || item.caseKey || '',
caseTitle: item.case_title || item.caseTitle || item.title || '',
title: item.title || item.case_title || item.caseTitle || ''
}))
})
.catch(() => {
this.planCaseTableData = []
this.total = 0
})
.finally(() => {
this.loading = false
})
},
openExecuteDialog(row) {
if (!row) return
this.selectedPlanCase = row
this.executeResultText = ''
if (!row.caseId) {
this.caseDetail = {}
this.executeDialogVisible = true
return
}
getCaseDetail(this.projectId, row.caseId).then(res => {
const data = (res && res.data) || res || {}
this.caseDetail = data
this.executeDialogVisible = true
}).catch(() => {
this.detail = {}
this.caseDetail = {}
this.executeDialogVisible = true
})
},
submitExecute() {
if (!this.executeForm.planCaseId) {
this.$message({ type: 'warning', message: '请输入计划用例ID' })
submitExecute(status) {
if (!this.selectedPlanCase || !this.selectedPlanCase.planCaseId) {
this.$message({ type: 'warning', message: '请先选择要执行的用例' })
return
}
if ((status === 2 || status === 3) && !String(this.executeResultText || '').trim()) {
this.$message({ type: 'warning', message: '失败或阻塞时请填写执行结果' })
return
}
this.submitting = true
executePlanCase(this.projectId, this.planId, this.executeForm.planCaseId, {
status: this.executeForm.status,
actual_result: this.executeForm.actual_result,
defect_links: this.defectLinksText ? this.defectLinksText.split(',').map(item => item.trim()).filter(Boolean) : [],
executePlanCase(this.projectId, this.planId, this.selectedPlanCase.planCaseId, {
status,
actualResult: this.executeResultText,
defectLinks: [],
attachments: []
}).then(() => {
this.$message({ type: 'success', message: '执行结果已提交' })
this.executeDialogVisible = false
this.fetchPlanCases()
}).finally(() => {
this.submitting = false
})
},
formatSteps(steps) {
if (!steps) return ''
if (typeof steps === 'string') return steps
if (Array.isArray(steps)) {
return steps.map(item => {
if (typeof item === 'string') return item
return item.action || item.step || item.text || item.content || ''
}).filter(Boolean).join('\n')
}
return String(steps)
},
formatExecuteStatus(status) {
const map = { 0: '待执行', 1: '通过', 2: '失败', 3: '阻塞' }
return map[status] || status
},
formatExecuteStatusTag(status) {
const map = { 0: 'info', 1: 'success', 2: 'danger', 3: 'warning' }
return map[status] || 'info'
},
goBack() {
this.$router.push({
path: '/test-platform/plan',
query: {
productId: this.$route.query.productId || undefined,
projectId: this.projectId || undefined
}
})
}
},
created() {
this.fetchDetail()
this.fetchPlanCases()
}
}
</script>
@@ -111,4 +248,54 @@ export default {
.page-wrap {
padding: 20px;
}
.filter-toolbar {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.filter-toolbar-form {
flex: 1;
min-width: 0;
}
.filter-toolbar-actions {
flex-shrink: 0;
padding-top: 4px;
}
.detail-panel {
margin-top: 16px;
}
.detail-title {
margin-bottom: 8px;
font-weight: 600;
color: #303133;
font-size: 18px;
line-height: 1.4;
}
.detail-text {
white-space: pre-wrap;
color: #606266;
line-height: 1.5;
}
.detail-section {
border: 1px solid #ebeef5;
border-radius: 4px;
padding: 10px 12px;
margin-bottom: 10px;
}
.detail-section-title {
font-weight: 600;
color: #303133;
margin-bottom: 8px;
}
</style>

825
src/components/TestPlatform/Plan/PlanList.vue
View File

@@ -4,37 +4,165 @@
<template slot="extra">
<el-button type="primary" size="small" @click="goBuilder()">新建计划</el-button>
</template>
<el-form :inline="true" :model="queryForm" size="small" @submit.native.prevent>
<el-form-item label="项目ID">
<el-input v-model="projectId" style="width: 120px;"></el-input>
<el-form :inline="true" size="small" @submit.native.prevent>
<el-form-item label="产品名称">
<el-select
v-model="selectedProductId"
filterable
clearable
placeholder="请选择产品"
style="width: 220px;"
@change="handleProductChange"
@focus="loadProductOptions">
<el-option
v-for="item in productOptions"
:key="item.id"
:label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="关键词">
<el-input v-model="queryForm.keyword" clearable></el-input>
<el-form-item label="项目名称">
<el-select
v-model="selectedProjectId"
filterable
clearable
placeholder="请选择项目"
style="width: 240px;"
:disabled="!selectedProductId"
@change="handleProjectChange">
<el-option
v-for="item in projectOptions"
:key="item.id"
:label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
</el-form>
<el-form :inline="true" :model="queryForm" size="small" style="margin-top: 8px;" @submit.native.prevent>
<el-form-item label="计划名称">
<el-input v-model="queryForm.planName" clearable style="width: 180px;"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="queryForm.status" clearable>
<el-select v-model="queryForm.status" clearable style="width: 120px;">
<el-option label="草稿" :value="0"></el-option>
<el-option label="进行中" :value="1"></el-option>
<el-option label="已完成" :value="2"></el-option>
<el-option label="已归档" :value="3"></el-option>
<el-option label="已通过" :value="4"></el-option>
</el-select>
</el-form-item>
<el-form-item label="版本">
<el-input v-model="queryForm.version" clearable style="width: 140px;"></el-input>
</el-form-item>
<el-form-item label="负责人">
<el-select
v-model="queryForm.owner"
filterable
clearable
placeholder="请选择负责人"
style="width: 180px;"
:disabled="!selectedProjectId">
<el-option v-for="u in ownerMemberOptions" :key="'plan-owner-' + u.id" :label="u.name" :value="u.id" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="fetchList">查询</el-button>
<el-button type="primary" :disabled="!selectedProjectId" @click="fetchList">查询</el-button>
</el-form-item>
<el-form-item>
<el-button size="small" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="tableData" border style="margin-top: 16px;">
<el-table-column prop="name" label="计划名称" min-width="180"></el-table-column>
<el-table-column prop="version" label="版本" width="120"></el-table-column>
<el-table-column prop="owner_id" label="负责人" width="120"></el-table-column>
<el-table-column prop="status" label="状态" width="100"></el-table-column>
<el-table-column label="操作" width="260">
<el-table-column label="开始时间" min-width="170">
<template slot-scope="scope">{{ formatDateTime(getStartTimeValue(scope.row)) }}</template>
</el-table-column>
<el-table-column label="结束时间" min-width="170">
<template slot-scope="scope">{{ formatDateTime(getEndTimeValue(scope.row)) }}</template>
</el-table-column>
<el-table-column label="负责人" width="140">
<template slot-scope="scope">{{ formatOwner(scope.row) }}</template>
</el-table-column>
<el-table-column label="环境" width="160">
<template slot-scope="scope">{{ formatEnvironment(scope.row) }}</template>
</el-table-column>
<el-table-column label="状态" width="110">
<template slot-scope="scope">{{ formatStatus(scope.row.status) }}</template>
</el-table-column>
<el-table-column label="操作" width="600">
<template slot-scope="scope">
<el-button type="text" @click="goEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="goAssociateCases(scope.row)">关联用例</el-button>
<el-button type="text" @click="goExecute(scope.row)">执行</el-button>
<el-button type="text" @click="goProgress(scope.row)">进度</el-button>
<el-button type="text" @click="openHookSendDialog(scope.row)">机器人消息</el-button>
<el-button type="text" @click="runAutoCases(scope.row)">执行自动化用例</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog
title="发送机器人消息"
:visible.sync="hookSendDialogVisible"
width="600px"
append-to-body
@close="resetHookSendForm">
<el-form ref="hookSendFormRef" :model="hookSendForm" label-width="108px" size="small">
<el-form-item label="计划">
<el-input :value="hookSendPlanName" disabled />
</el-form-item>
<el-form-item label="消息标题">
<el-input :value="hookSendPreviewTitle" disabled />
</el-form-item>
<el-form-item label="消息正文" prop="content">
<el-input
v-model.trim="hookSendForm.content"
type="textarea"
:rows="5"
maxlength="4000"
show-word-limit
placeholder="默认含待执行说明与计划执行链接，可自行修改" />
</el-form-item>
<el-form-item label="消息类型">
<el-select
v-model="hookSendForm.hookType"
clearable
placeholder="不选则加载全部类型下的配置"
style="width: 100%;"
@change="onHookSendTypeChange">
<el-option label="飞书" :value="1" />
<el-option label="钉钉" :value="2" />
<el-option label="企微" :value="3" />
</el-select>
</el-form-item>
<el-form-item label="Webhook 配置">
<el-select
v-model="hookSendForm.hookId"
filterable
clearable
:loading="hookSendHookListLoading"
placeholder="选择当前项目、当前类型下的配置；不选则按类型发全部（未选类型则发全部 Hook）"
style="width: 100%;">
<el-option
v-for="h in hookSendHookOptions"
:key="'hook-opt-' + h.id"
:label="formatHookSendOptionLabel(h)"
:value="h.id" />
</el-select>
</el-form-item>
<el-form-item label="@ 真实姓名" prop="realName">
<el-input v-model.trim="hookSendForm.realName" maxlength="64" placeholder="默认计划负责人，可改" />
</el-form-item>
</el-form>
<div v-if="hookSendResultLines.length" class="hook-send-result">
<div class="hook-send-result-title">发送结果</div>
<div v-for="(line, idx) in hookSendResultLines" :key="'hr-' + idx" class="hook-send-result-line">{{ line }}</div>
</div>
<span slot="footer">
<el-button size="small" @click="hookSendDialogVisible = false">取消</el-button>
<el-button type="primary" size="small" :loading="hookSendSubmitting" @click="submitHookSend">发送</el-button>
</span>
</el-dialog>
<div style="margin-top: 16px; text-align: right;">
<el-pagination
:current-page="pageNo"
@@ -53,48 +181,688 @@
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { getPlanList } from '@/api/planApi'
import { getProductList } from '@/api/productApi'
import {
getProjectDetail,
getProjectEnvironments,
getProjectHookList,
getProjectList,
getProjectMembers,
sendProjectHookMessage
} from '@/api/projectApi'
import {
readLastProductProjectCache,
saveLastProductProjectCache,
pickIdFromOptions
} from '@/utils/lastProductProjectCache'
export default {
name: 'PlanList',
components: { PageSection },
computed: {
hookSendPreviewTitle() {
const row = this.hookSendPlanRow
if (!row) return ''
return (row.name || '').trim() || this.hookSendPlanName || '测试计划'
}
},
data() {
return {
loading: false,
projectId: this.$route.query.projectId || 1,
projectId: this.$route.query.projectId || '',
selectedProductId: '',
selectedProjectId: this.$route.query.projectId ? Number(this.$route.query.projectId) : '',
productOptions: [],
projectOptions: [],
ownerMap: {},
/** 负责人筛选下拉（label 优先 real_name，与 ownerMap 同源） */
ownerMemberOptions: [],
environmentMap: {},
queryForm: {
keyword: '',
status: ''
planName: '',
status: '',
version: '',
owner: ''
},
pageNo: 1,
pageSize: 10,
total: 0,
tableData: []
tableData: [],
hookSendDialogVisible: false,
hookSendSubmitting: false,
hookSendPlanName: '',
/** 当前要推送机器人消息的计划行 */
hookSendPlanRow: null,
hookSendHookOptions: [],
hookSendHookListLoading: false,
hookSendForm: {
hookType: '',
hookId: '',
content: '',
realName: ''
},
hookSendResultLines: []
}
},
beforeRouteLeave(to, from, next) {
this.savePageCache()
next()
},
methods: {
getCacheKey() {
return 'test-platform-plan-list-cache'
},
savePageCache() {
const cache = {
projectId: this.projectId,
selectedProductId: this.selectedProductId,
selectedProjectId: this.selectedProjectId,
productOptions: this.productOptions,
projectOptions: this.projectOptions,
ownerMap: this.ownerMap,
ownerMemberOptions: this.ownerMemberOptions,
environmentMap: this.environmentMap,
queryForm: this.queryForm,
pageNo: this.pageNo,
pageSize: this.pageSize,
total: this.total,
tableData: this.tableData
}
window.sessionStorage.setItem(this.getCacheKey(), JSON.stringify(cache))
},
restorePageCache() {
const raw = window.sessionStorage.getItem(this.getCacheKey())
if (!raw) return false
try {
const cache = JSON.parse(raw)
this.projectId = cache.projectId || ''
this.selectedProductId = cache.selectedProductId || ''
this.selectedProjectId = cache.selectedProjectId || ''
this.productOptions = cache.productOptions || []
this.projectOptions = cache.projectOptions || []
this.ownerMap = cache.ownerMap || {}
this.ownerMemberOptions = Array.isArray(cache.ownerMemberOptions) ? cache.ownerMemberOptions : []
if (!this.ownerMemberOptions.length && this.ownerMap && Object.keys(this.ownerMap).length) {
this.ownerMemberOptions = Object.keys(this.ownerMap).map(k => ({
id: /^\d+$/.test(String(k)) ? Number(k) : k,
name: this.ownerMap[k]
}))
}
this.environmentMap = cache.environmentMap || {}
this.queryForm = cache.queryForm || {
planName: '',
status: '',
version: '',
owner: ''
}
this.syncOwnerFilterWithMemberOptions()
this.pageNo = Number(cache.pageNo || 1)
this.pageSize = Number(cache.pageSize || 10)
this.total = Number(cache.total || 0)
this.tableData = Array.isArray(cache.tableData) ? cache.tableData : []
return true
} catch (e) {
return false
}
},
loadProductOptions() {
if (this.productOptions && this.productOptions.length > 0) {
return Promise.resolve()
}
return getProductList({ pageNo: 1, pageSize: 1000, status: 1 }).then(res => {
const data = res && res.data ? res.data : res || {}
this.productOptions = data.items || data.list || data.data || []
}).catch(() => {
this.productOptions = []
})
},
loadProjectOptionsByProduct(productId) {
if (!productId) {
this.projectOptions = []
return Promise.resolve()
}
return getProjectList({ pageNo: 1, pageSize: 1000, status: 1, productId }).then(res => {
const data = res && res.data ? res.data : res || {}
this.projectOptions = data.items || data.list || data.data || []
}).catch(() => {
this.projectOptions = []
})
},
handleProductChange(val) {
this.selectedProjectId = ''
this.projectId = ''
this.queryForm.owner = ''
this.ownerMap = {}
this.ownerMemberOptions = []
this.tableData = []
this.total = 0
this.loadProjectOptionsByProduct(val)
},
handleProjectChange(val) {
this.selectedProjectId = val || ''
this.projectId = val || ''
this.pageNo = 1
this.queryForm.owner = ''
this.ownerMap = {}
this.ownerMemberOptions = []
this.environmentMap = {}
if (!val) {
this.tableData = []
this.total = 0
return
}
saveLastProductProjectCache(this.selectedProductId, val)
this.loadProjectMetaMaps(val).finally(() => {
this.fetchList()
})
},
restoreSharedProductProjectCache() {
const cached = readLastProductProjectCache()
const q = this.$route.query || {}
const fromPlanSelf = q.planOwnerSelf === '1' || q.planOwnerSelf === 'true'
let pid = cached && cached.productId
let projId = cached && cached.projectId
if (fromPlanSelf) {
if (q.productId !== undefined && q.productId !== null && String(q.productId).trim() !== '') {
pid = q.productId
}
if (q.projectId !== undefined && q.projectId !== null && String(q.projectId).trim() !== '') {
projId = q.projectId
}
}
if (pid === '' || pid === undefined || pid === null || projId === '' || projId === undefined || projId === null) {
return Promise.resolve()
}
const hasProduct = (this.productOptions || []).some(p => String(p.id) === String(pid))
if (!hasProduct) return Promise.resolve()
this.selectedProductId = pickIdFromOptions(this.productOptions, pid)
return this.loadProjectOptionsByProduct(this.selectedProductId).then(() => {
const hasProject = (this.projectOptions || []).some(p => String(p.id) === String(projId))
if (!hasProject) return
const picked = pickIdFromOptions(this.projectOptions, projId)
this.selectedProjectId = picked
this.projectId = picked
})
},
mergeCurrentUserIntoOwnerMemberOptionsIfNeeded() {
const u = this.$store.state.currentUser
if (!u || u.id == null || u.id === '') return
const id = u.id
if ((this.ownerMemberOptions || []).some(m => String(m.id) === String(id))) return
const name = u.realName || u.username || '当前用户'
this.ownerMemberOptions = [{ id, name }, ...(this.ownerMemberOptions || [])]
this.ownerMap = Object.assign({}, this.ownerMap, { [id]: name })
},
applyPlanOwnerSelfFromRoute() {
const q = this.$route.query || {}
if (q.planOwnerSelf !== '1' && q.planOwnerSelf !== 'true') return
const u = this.$store.state.currentUser
const uid = u && u.id != null && u.id !== '' ? u.id : null
if (uid == null) {
this.$message.warning('请先登录')
return
}
if (!this.selectedProjectId) {
this.$message.warning('请先选择项目，或从首页在已选过产品/项目时进入')
return
}
this.mergeCurrentUserIntoOwnerMemberOptionsIfNeeded()
this.queryForm.owner = uid
this.pageNo = 1
},
/** 负责人筛选值为成员 id；若不在当前项目成员列表中则清空（避免缓存里旧姓名或无效 id） */
syncOwnerFilterWithMemberOptions() {
const cur = this.queryForm.owner
if (cur === '' || cur === undefined || cur === null) return
const idSet = new Set(this.ownerMemberOptions.map(u => String(u.id)))
if (!idSet.has(String(cur))) {
this.queryForm.owner = ''
}
},
loadProjectMetaMaps(projectId) {
if (!projectId) {
this.ownerMap = {}
this.ownerMemberOptions = []
this.environmentMap = {}
return Promise.resolve()
}
const memberReq = getProjectMembers(projectId, { pageNo: 1, pageSize: 1000 }).then(res => {
const data = (res && res.data) || res || {}
const list = data.items || data.list || data.data || data || []
const arr = Array.isArray(list) ? list : []
this.ownerMemberOptions = arr
.map(item => {
const id = item.user_id || item.userId || item.id
const name =
item.real_name ||
item.realName ||
item.username ||
item.name ||
item.user_name ||
(id !== undefined && id !== null ? String(id) : '')
return { id, name }
})
.filter(u => u.id !== undefined && u.id !== null && u.id !== '')
this.ownerMap = this.ownerMemberOptions.reduce((map, u) => {
map[u.id] = u.name || String(u.id)
return map
}, {})
this.syncOwnerFilterWithMemberOptions()
}).catch(() => {
this.ownerMap = {}
this.ownerMemberOptions = []
})
const envReq = getProjectEnvironments(projectId, { pageNo: 1, pageSize: 1000 }).then(res => {
const data = (res && res.data) || res || {}
const list = data.items || data.list || data.data || data || []
this.environmentMap = (Array.isArray(list) ? list : []).reduce((map, item) => {
if (item.id !== undefined && item.id !== null && item.id !== '') {
map[item.id] = item.name || String(item.id)
}
return map
}, {})
}).catch(() => {
this.environmentMap = {}
})
return Promise.all([memberReq, envReq])
},
fetchList() {
if (!this.projectId) {
this.tableData = []
this.total = 0
return
}
this.loading = true
getPlanList(this.projectId, this.queryForm).then(res => {
const params = this.cleanParams({
planName: this.queryForm.planName,
keyword: this.queryForm.planName,
status: this.queryForm.status,
version: this.queryForm.version,
owner: this.queryForm.owner,
owner_id: this.queryForm.owner,
pageNo: this.pageNo,
pageSize: this.pageSize
})
getPlanList(this.projectId, params).then(res => {
const data = (res && res.data) || res || {}
this.tableData = data.items || data.list || []
this.total = Number(data.total || this.tableData.length || 0)
this.savePageCache()
}).catch(() => {
this.tableData = []
this.total = 0
this.savePageCache()
}).finally(() => {
this.loading = false
})
},
cleanParams(params) {
return Object.keys(params).reduce((result, key) => {
if (params[key] !== '' && params[key] !== undefined && params[key] !== null) {
result[key] = params[key]
}
return result
}, {})
},
resetQuery() {
this.queryForm = {
planName: '',
status: '',
version: '',
owner: ''
}
this.pageNo = 1
this.fetchList()
},
handleSizeChange(size) {
this.pageSize = size
this.pageNo = 1
this.fetchList()
},
handleCurrentChange(page) {
this.pageNo = page
this.fetchList()
},
goBuilder() {
this.$router.push({ path: '/test-platform/plans/builder', query: { projectId: this.projectId } })
this.$router.push({ path: '/test-platform/plan/builder', query: { projectId: this.projectId } })
},
goEdit(row) {
this.$router.push({
path: '/test-platform/plan/builder',
query: {
projectId: this.projectId,
planId: row.id
}
})
},
goAssociateCases(row) {
const project = (this.projectOptions || []).find(item => String(item.id) === String(this.projectId))
const product = (this.productOptions || []).find(item => String(item.id) === String(this.selectedProductId))
this.$router.push({
path: '/test-platform/plan/case/add',
query: {
productId: this.selectedProductId || undefined,
productName: (product && product.name) || '',
projectId: this.projectId || undefined,
projectName: (project && project.name) || '',
planId: row.id,
planName: row.name || '',
ownerId: row.owner_id || row.ownerId || undefined
}
})
},
goExecute(row) {
this.$router.push({ path: '/test-platform/plans/execute', query: { projectId: this.projectId, planId: row.id } })
const project = (this.projectOptions || []).find(item => String(item.id) === String(this.projectId))
const product = (this.productOptions || []).find(item => String(item.id) === String(this.selectedProductId))
this.$router.push({
path: '/test-platform/plan/execute',
query: {
productId: this.selectedProductId || undefined,
productName: (product && product.name) || '',
projectId: this.projectId,
projectName: (project && project.name) || '',
planId: row.id,
planName: row.name || ''
}
})
},
openHookSendDialog(row) {
if (!this.projectId) {
this.$message.warning('请先选择项目')
return
}
const name = (row && row.name) || ''
this.hookSendPlanName = name || `计划 #${row && row.id != null ? row.id : ''}`
this.hookSendPlanRow = row || null
const defaultContent = this.buildPlanExecuteMessageBody(row)
const defaultReal = this.getPlanOwnerRealName(row)
this.hookSendForm = {
hookType: '',
hookId: '',
content: defaultContent,
realName: defaultReal
}
this.hookSendHookOptions = []
this.hookSendResultLines = []
this.hookSendDialogVisible = true
this.loadHookSendOptions()
this.$nextTick(() => {
if (this.$refs.hookSendFormRef) {
this.$refs.hookSendFormRef.clearValidate()
}
})
},
resetHookSendForm() {
this.hookSendSubmitting = false
this.hookSendPlanName = ''
this.hookSendPlanRow = null
this.hookSendHookOptions = []
this.hookSendForm = {
hookType: '',
hookId: '',
content: '',
realName: ''
}
this.hookSendResultLines = []
this.$nextTick(() => {
if (this.$refs.hookSendFormRef) {
this.$refs.hookSendFormRef.resetFields()
}
})
},
/** 与「执行」入口一致的计划执行页链接（绝对地址，便于 IM 中点击） */
buildPlanExecuteUrl(row) {
if (!row || row.id == null) return ''
const project = (this.projectOptions || []).find(item => String(item.id) === String(this.projectId))
const product = (this.productOptions || []).find(item => String(item.id) === String(this.selectedProductId))
const loc = this.$router.resolve({
path: '/test-platform/plan/execute',
query: {
productId: this.selectedProductId || undefined,
productName: (product && product.name) || '',
projectId: this.projectId,
projectName: (project && project.name) || '',
planId: row.id,
planName: row.name || ''
}
})
const href = (loc && loc.href) || ''
if (!href) return ''
if (/^https?:\/\//i.test(href)) return href
const origin = typeof window !== 'undefined' && window.location ? window.location.origin : ''
return origin + (href.charAt(0) === '/' ? href : `/${href}`)
},
buildPlanExecuteMessageBody(row) {
const url = this.buildPlanExecuteUrl(row)
if (!url) return '你有一条测试计划待执行：'
return `你有一条测试计划待执行：\n${url}`
},
/** 计划负责人展示名（优先真实姓名类字段，用于 @） */
getPlanOwnerRealName(row) {
if (!row) return ''
const oid = row.owner_id != null ? row.owner_id : row.ownerId
const fromMap = oid != null && oid !== '' ? this.ownerMap[oid] : ''
const s = (
row.owner_real_name ||
row.ownerRealName ||
row.owner_name ||
row.ownerName ||
fromMap ||
''
).trim()
return s
},
onHookSendTypeChange() {
this.hookSendForm.hookId = ''
this.loadHookSendOptions()
},
loadHookSendOptions() {
const pid = Number(this.projectId)
if (!pid || Number.isNaN(pid)) {
this.hookSendHookOptions = []
return
}
const params = { projectId: pid, pageNo: 1, pageSize: 500 }
const ht = this.hookSendForm.hookType
if (ht === 1 || ht === 2 || ht === 3) {
params.hookType = ht
}
this.hookSendHookListLoading = true
getProjectHookList(params)
.then(res => {
const data = (res && res.data) || res || {}
const list = data.list || data.items || []
this.hookSendHookOptions = Array.isArray(list) ? list : []
})
.catch(() => {
this.hookSendHookOptions = []
})
.finally(() => {
this.hookSendHookListLoading = false
})
},
formatHookSendOptionLabel(item) {
if (!item) return ''
const typeName = item.hook_type_name || this.hookTypeSendLabel(item.hook_type != null ? item.hook_type : item.hookType)
const desc = (item.description || '').trim()
const url = String(item.webhook_url || item.webhookUrl || '').trim()
const shortUrl = url.length > 42 ? `${url.slice(0, 42)}…` : url
if (desc) return `${desc}（${typeName} #${item.id}）`
if (shortUrl) return `${shortUrl}（${typeName} #${item.id}）`
return `${typeName} #${item.id}`
},
hookTypeSendLabel(type) {
const map = { 1: '飞书', 2: '钉钉', 3: '企微' }
return map[Number(type)] || String(type || '-')
},
submitHookSend() {
const row = this.hookSendPlanRow
if (!row || row.id == null) {
this.$message.warning('缺少计划信息')
return
}
const pid = Number(this.projectId)
if (!pid || Number.isNaN(pid)) {
this.$message.warning('项目 ID 无效')
return
}
const title = (this.hookSendPreviewTitle || '').trim() || '测试计划'
const content = (this.hookSendForm.content || '').trim()
if (!content) {
this.$message.warning('消息正文不能为空')
return
}
if (content === '你有一条测试计划待执行：') {
this.$message.warning('无法生成计划执行链接，请检查项目与计划')
return
}
const payload = {
projectId: pid,
title,
content
}
const rn = (this.hookSendForm.realName || '').trim()
if (rn) payload.realName = rn
const hid = this.hookSendForm.hookId
if (hid !== '' && hid !== null && hid !== undefined) {
const n = Number(hid)
if (!Number.isNaN(n)) {
payload.hookId = n
const found = (this.hookSendHookOptions || []).find(h => String(h.id) === String(hid))
const fht = found && (found.hook_type != null ? found.hook_type : found.hookType)
if (fht === 1 || fht === 2 || fht === 3) {
payload.hookType = fht
}
}
} else {
const ht = this.hookSendForm.hookType
if (ht === 1 || ht === 2 || ht === 3) {
payload.hookType = ht
}
}
this.hookSendSubmitting = true
this.hookSendResultLines = []
sendProjectHookMessage(payload)
.then(res => {
const msg = (res && res.message) || ''
if (res && res.code === 20000) {
const list = res.data
const lines = []
if (Array.isArray(list)) {
list.forEach(item => {
const hid = item.hook_id != null ? item.hook_id : item.hookId
const htype = item.hook_type != null ? item.hook_type : item.hookType
const ok = item.success === true || item.success === 1
lines.push(
`Hook #${hid}（${this.hookTypeSendLabel(htype)}）：${ok ? '成功' : '失败'}`
)
})
}
this.hookSendResultLines = lines
this.$message.success(msg || '已提交发送')
return
}
this.$message.error(msg || '发送失败')
})
.catch(() => {})
.finally(() => {
this.hookSendSubmitting = false
})
},
runAutoCases() {
this.$message.info('执行自动化用例功能开发中')
},
goProgress(row) {
this.$router.push({ path: '/test-platform/plans/progress', query: { projectId: this.projectId, planId: row.id } })
const project = (this.projectOptions || []).find(item => String(item.id) === String(this.projectId))
const product = (this.productOptions || []).find(item => String(item.id) === String(this.selectedProductId))
this.$router.push({
path: '/test-platform/plan/progress',
query: {
productId: this.selectedProductId || undefined,
productName: (product && product.name) || '',
projectId: this.projectId || undefined,
projectName: (project && project.name) || '',
planId: row.id,
planName: row.name || ''
}
})
},
formatStatus(value) {
const map = { 0: '草稿', 1: '进行中', 2: '已完成', 3: '已归档', 4: '已通过' }
return map[value] || value
},
formatOwner(row) {
const ownerId = row.owner_id || row.ownerId
return row.owner_name || row.ownerName || row.username || row.owner || this.ownerMap[ownerId] || ownerId || '-'
},
formatEnvironment(row) {
const envId = row.environment_id || row.environmentId
return row.environment_name || row.environmentName || row.env_name || row.environment || this.environmentMap[envId] || envId || '-'
},
getStartTimeValue(row) {
if (!row) return ''
return row.start_date || row.startDate || row.start_time || row.startTime || row.begin_time || row.beginTime || row.planned_start_time || row.plannedStartTime || ''
},
getEndTimeValue(row) {
if (!row) return ''
return row.end_date || row.endDate || row.end_time || row.endTime || row.finish_time || row.finishTime || row.planned_end_time || row.plannedEndTime || ''
},
formatDateTime(value) {
if (!value) return '-'
if (typeof value === 'number' || /^\d+$/.test(String(value))) {
const raw = Number(value)
if (!Number.isNaN(raw) && raw > 0) {
const ms = raw < 1000000000000 ? raw * 1000 : raw
const date = new Date(ms)
if (!Number.isNaN(date.getTime())) {
const pad = n => String(n).padStart(2, '0')
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
}
}
}
return String(value).replace('T', ' ').slice(0, 19)
}
},
created() {
this.fetchList()
const planOwnerSelf = this.$route.query.planOwnerSelf === '1' || this.$route.query.planOwnerSelf === 'true'
if (planOwnerSelf) {
try {
window.sessionStorage.removeItem(this.getCacheKey())
} catch (e) {}
}
// 若存在缓存（通常是从二级页返回），直接恢复，不自动刷新数据
if (this.restorePageCache()) {
if (planOwnerSelf && this.selectedProjectId) {
this.$nextTick(() => {
this.loadProjectMetaMaps(this.selectedProjectId).finally(() => {
this.applyPlanOwnerSelfFromRoute()
this.fetchList()
})
})
}
return
}
this.loadProductOptions().then(() => {
if (this.selectedProjectId) {
return getProjectDetail(this.selectedProjectId).then(res => {
const data = res && res.data ? res.data : res || {}
const productId = data.productId || data.product_id || ''
if (productId) {
this.selectedProductId = productId
return this.loadProjectOptionsByProduct(productId)
}
}).catch(() => {})
}
return this.restoreSharedProductProjectCache()
}).finally(() => {
if (this.selectedProjectId) {
this.projectId = this.selectedProjectId
this.loadProjectMetaMaps(this.selectedProjectId).finally(() => {
this.applyPlanOwnerSelfFromRoute()
this.fetchList()
})
}
})
}
}
</script>
@@ -103,4 +871,23 @@ export default {
.page-wrap {
padding: 20px;
}
.hook-send-result {
margin-top: 12px;
padding: 10px 12px;
background: #f5f7fa;
border-radius: 4px;
font-size: 13px;
color: #606266;
}
.hook-send-result-title {
font-weight: 600;
margin-bottom: 6px;
color: #303133;
}
.hook-send-result-line {
line-height: 1.6;
}
</style>

382
src/components/TestPlatform/Plan/PlanProgress.vue
View File

@@ -1,67 +1,293 @@
<template>
<div class="page-wrap">
<page-section title="计划进度">
<el-form :inline="true" size="small">
<el-form-item label="项目ID">
<el-input v-model="projectId" style="width: 120px;"></el-input>
<el-form :inline="true" size="small" @submit.native.prevent>
<el-form-item label="产品名称">
<el-input :value="productName" disabled style="width: 220px;"></el-input>
</el-form-item>
<el-form-item label="计划ID">
<el-input v-model="planId" style="width: 120px;"></el-input>
<el-form-item label="项目名称">
<el-input :value="projectName" disabled style="width: 220px;"></el-input>
</el-form-item>
<el-form-item label="计划名称">
<el-input :value="planNameDisplay" disabled style="width: 240px;"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="fetchProgress">刷新</el-button>
<el-button type="primary" @click="fetchProgressBoard">刷新看板</el-button>
</el-form-item>
<el-form-item>
<el-button @click="goBack">返回</el-button>
</el-form-item>
</el-form>
<el-row :gutter="16">
<el-col :span="8">
<page-section title="轮次汇总">
<json-viewer :value="progress.round_summary || []"></json-viewer>
</page-section>
<el-row :gutter="16" class="metric-row">
<el-col :span="6">
<div class="metric-card">
<div class="metric-label">总用例数</div>
<div class="metric-value">{{ summary.total }}</div>
</div>
</el-col>
<el-col :span="8">
<page-section title="人员负载">
<json-viewer :value="progress.assignee_load || []"></json-viewer>
</page-section>
<el-col :span="6">
<div class="metric-card">
<div class="metric-label">待执行</div>
<div class="metric-value warning">{{ summary.pending }}</div>
</div>
</el-col>
<el-col :span="8">
<page-section title="每日趋势">
<json-viewer :value="progress.daily_trend || []"></json-viewer>
</page-section>
<el-col :span="6">
<div class="metric-card">
<div class="metric-label">已执行</div>
<div class="metric-value success">{{ summary.executed }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="metric-card">
<div class="metric-label">完成率</div>
<div class="metric-value primary">{{ summary.progressPercent }}%</div>
</div>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="8">
<div class="board-card">
<div class="board-title">执行完成度</div>
<div class="dashboard-wrap">
<el-progress
type="dashboard"
:percentage="summary.progressPercent"
:color="progressColor">
</el-progress>
<div class="dashboard-desc">已执行 {{ summary.executed }} / {{ summary.total }}</div>
</div>
</div>
</el-col>
<el-col :span="16">
<div class="board-card">
<div class="board-title">状态分布</div>
<div v-for="item in statusBarData" :key="item.key" class="status-bar-row">
<div class="status-label">
<el-tag size="mini" :type="item.tag">{{ item.label }}</el-tag>
</div>
<div class="status-bar-track">
<div class="status-bar-fill" :style="{ width: item.percent + '%', background: item.color }"></div>
</div>
<div class="status-value">{{ item.count }}（{{ item.percent }}%）</div>
</div>
</div>
</el-col>
</el-row>
<div class="board-card" style="margin-top: 16px;">
<div class="board-title">用例状态看板明细</div>
<el-table v-loading="loading" :data="displayRows" border style="margin-top: 10px;">
<el-table-column label="模块" min-width="160">
<template slot-scope="scope">{{ formatModuleName(scope.row) }}</template>
</el-table-column>
<el-table-column prop="caseKey" label="用例编号" min-width="120"></el-table-column>
<el-table-column prop="caseTitle" label="用例名称" min-width="220"></el-table-column>
<el-table-column label="状态" width="120">
<template slot-scope="scope">
<el-tag size="mini" :type="statusTagType(scope.row.statusCode)">{{ statusLabel(scope.row.statusCode) }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="actualResult" label="执行结果" min-width="180"></el-table-column>
</el-table>
<el-pagination
style="margin-top: 12px; text-align: right;"
background
layout="total, sizes, prev, pager, next, jumper"
:current-page="pageNo"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="caseListTotal"
@size-change="handleCaseListSizeChange"
@current-change="handleCaseListPageChange">
</el-pagination>
</div>
</page-section>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import JsonViewer from '@/components/TestPlatform/common/JsonViewer'
import { getPlanProgress } from '@/api/planApi'
import { getPlanCaseList, getPlanProgress } from '@/api/planApi'
export default {
name: 'PlanProgress',
components: { PageSection, JsonViewer },
components: { PageSection },
data() {
return {
projectId: this.$route.query.projectId || 1,
loading: false,
projectId: this.$route.query.projectId || '',
planId: this.$route.query.planId || '',
progress: {}
progress: {},
planCaseTableData: [],
caseListTotal: 0,
pageNo: 1,
pageSize: 10
}
},
computed: {
productName() {
return this.$route.query.productName || ''
},
projectName() {
return this.$route.query.projectName || ''
},
planNameDisplay() {
return this.$route.query.planName || ''
},
summary() {
const statusCount = this.statusCountMap
const progressTotal = this.toNumber(this.progress.total_cases || this.progress.total || 0)
const total = progressTotal || this.caseListTotal || 0
const pending = this.toNumber(statusCount[0])
const executed = Math.max(0, total - pending)
const progressPercent = total > 0 ? Math.round((executed / total) * 100) : 0
return { total, pending, executed, progressPercent }
},
/** 顶部看板统计以 getPlanProgress 为准，不能按当前页用例行数聚合 */
statusCountMap() {
const map = {}
const fromProgress = this.progress.status_count || this.progress.statusCount || {}
if (fromProgress && typeof fromProgress === 'object' && Object.keys(fromProgress).length > 0) {
Object.keys(fromProgress).forEach(key => {
map[this.toNumber(key)] = this.toNumber(fromProgress[key])
})
return map
}
this.planCaseTableData.forEach(item => {
const key = this.toNumber(item.statusCode)
map[key] = (map[key] || 0) + 1
})
return map
},
statusBarData() {
const total = this.summary.total || 1
const statuses = [
{ key: 0, label: '待执行', tag: 'info', color: '#909399' },
{ key: 1, label: '通过', tag: 'success', color: '#67c23a' },
{ key: 2, label: '失败', tag: 'danger', color: '#f56c6c' },
{ key: 3, label: '阻塞', tag: 'warning', color: '#e6a23c' }
]
return statuses.map(item => {
const count = this.toNumber(this.statusCountMap[item.key] || 0)
const percent = Math.round((count / total) * 100)
return Object.assign({}, item, { count, percent })
})
},
progressColor() {
const value = this.summary.progressPercent
if (value >= 80) return '#67c23a'
if (value >= 50) return '#409eff'
if (value >= 30) return '#e6a23c'
return '#f56c6c'
},
displayRows() {
return this.planCaseTableData
}
},
methods: {
fetchProgress() {
if (!this.planId) {
handleCaseListSizeChange(size) {
this.pageSize = size
this.pageNo = 1
this.fetchProgressBoard()
},
handleCaseListPageChange(page) {
this.pageNo = page
this.fetchProgressBoard()
},
fetchProgressBoard() {
if (!this.planId || !this.projectId) {
this.progress = {}
this.planCaseTableData = []
this.caseListTotal = 0
return
}
getPlanProgress(this.projectId, this.planId).then(res => {
this.progress = (res && res.data) || res || {}
}).catch(() => {
this.progress = {}
this.loading = true
Promise.all([
getPlanProgress(this.projectId, this.planId),
getPlanCaseList(this.projectId, this.planId, { pageNo: this.pageNo, pageSize: this.pageSize })
])
.then(([progressRes, listRes]) => {
this.progress = (progressRes && progressRes.data) || progressRes || {}
const listData = (listRes && listRes.data) || listRes || {}
const list = listData.list || listData.items || listData.data || []
this.caseListTotal = Number(
listData.total != null ? listData.total : Array.isArray(list) ? list.length : 0
)
this.planCaseTableData = (Array.isArray(list) ? list : []).map(item => ({
id: item.id,
caseId: item.case_id || item.caseId,
moduleName: item.module_name || item.moduleName || '',
moduleId: item.module_id || item.moduleId || '',
caseKey: item.case_key || item.caseKey || '',
caseTitle: item.case_title || item.caseTitle || item.title || '',
title: item.title || item.case_title || item.caseTitle || '',
statusCode: this.toNumber(item.status),
actualResult: item.actual_result || item.actualResult || ''
}))
})
.catch(() => {
this.progress = {}
this.planCaseTableData = []
this.caseListTotal = 0
})
.finally(() => {
this.loading = false
})
},
toNumber(value) {
const num = Number(value)
return Number.isFinite(num) ? num : 0
},
statusLabel(status) {
const map = { 0: '待执行', 1: '通过', 2: '失败', 3: '阻塞' }
return map[this.toNumber(status)] || '未知'
},
statusTagType(status) {
const map = { 0: 'info', 1: 'success', 2: 'danger', 3: 'warning' }
return map[this.toNumber(status)] || 'info'
},
formatModuleName(row) {
if (!row) return '-'
if (row.moduleName) return row.moduleName
return '-'
},
goBack() {
this.$router.push({
path: '/test-platform/plan',
query: {
productId: this.$route.query.productId || undefined,
projectId: this.projectId || undefined
}
})
},
normalizeRouteQuery() {
if (!this.projectId && this.$route.query.project_id) {
this.projectId = this.$route.query.project_id
}
if (!this.planId && this.$route.query.id) {
this.planId = this.$route.query.id
}
}
},
created() {
this.fetchProgress()
this.normalizeRouteQuery()
this.fetchProgressBoard()
},
watch: {
'$route.query.planId'(val) {
if (val !== undefined) {
this.planId = val
this.fetchProgressBoard()
}
},
'$route.query.projectId'(val) {
if (val !== undefined) {
this.projectId = val
this.fetchProgressBoard()
}
}
}
}
</script>
@@ -69,5 +295,99 @@ export default {
<style scoped>
.page-wrap {
padding: 20px;
background: #f7f8fa;
}
.metric-row {
margin-bottom: 16px;
}
.metric-card {
background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
border: 1px solid #ebeef5;
border-radius: 8px;
padding: 14px 16px;
min-height: 84px;
box-shadow: 0 4px 10px rgba(31, 45, 61, 0.06);
}
.metric-label {
color: #909399;
font-size: 13px;
}
.metric-value {
margin-top: 8px;
color: #303133;
font-size: 28px;
font-weight: 600;
line-height: 1;
}
.metric-value.success {
color: #67c23a;
}
.metric-value.warning {
color: #e6a23c;
}
.metric-value.primary {
color: #409eff;
}
.board-card {
background: #fff;
border-radius: 10px;
border: 1px solid #ebeef5;
padding: 16px;
box-shadow: 0 6px 14px rgba(31, 45, 61, 0.08);
}
.board-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
.dashboard-wrap {
margin-top: 10px;
text-align: center;
}
.dashboard-desc {
color: #606266;
margin-top: 8px;
}
.status-bar-row {
display: flex;
align-items: center;
margin-top: 14px;
}
.status-label {
width: 72px;
}
.status-bar-track {
flex: 1;
height: 10px;
border-radius: 10px;
background: #f1f2f4;
overflow: hidden;
}
.status-bar-fill {
height: 100%;
border-radius: 10px;
transition: width 0.3s ease;
}
.status-value {
width: 110px;
text-align: right;
color: #606266;
font-size: 12px;
}
</style>

2
src/components/TestPlatform/Project/ProjectList.vue
View File

@@ -148,7 +148,7 @@ export default {
this.fetchList()
},
goSettings(row) {
this.$router.push({ path: '/test-platform/projects/settings', query: { projectId: row.id } })
this.$router.push({ path: '/test-platform/project/setting', query: { projectId: row.id } })
},
fetchProductOptions() {
return getProductList({

435
src/components/TestPlatform/Project/ProjectSettings.vue
View File

@@ -1,15 +1,19 @@
<template>
<div class="page-wrap">
<page-section title="项目设置">
<el-tabs value="members">
<template slot="extra">
<el-button size="small" @click="goBackToList">返回</el-button>
</template>
<el-tabs v-model="activeTab">
<el-tab-pane label="项目成员" name="members">
<div class="toolbar-wrap">
<el-button type="primary" size="small" @click="openMemberDialog">新增成员</el-button>
</div>
<el-table :data="members" border>
<el-table-column prop="user_id" label="用户ID"></el-table-column>
<el-table-column prop="role" label="角色"></el-table-column>
<el-table-column prop="joined_at" label="加入时间"></el-table-column>
<el-table-column prop="project_name" label="项目名称"></el-table-column>
<el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column prop="role_name" label="角色"></el-table-column>
<el-table-column prop="joined_time" label="加入时间"></el-table-column>
</el-table>
<div style="margin-top: 16px; text-align: right;">
<el-pagination
@@ -47,16 +51,84 @@
</el-pagination>
</div>
</el-tab-pane>
<el-tab-pane label="Hook 配置" name="hooks">
<div class="toolbar-wrap hook-toolbar">
<div class="hook-toolbar-left">
<el-select
v-model="hookTypeFilter"
clearable
placeholder="Hook 类型"
size="small"
style="width: 140px;"
@change="onHookTypeFilterChange">
<el-option label="飞书" :value="1" />
<el-option label="钉钉" :value="2" />
<el-option label="企微" :value="3" />
</el-select>
</div>
<el-button type="primary" size="small" @click="openHookDialog('create')">新增 Hook</el-button>
</div>
<el-table v-loading="hookLoading" :data="hooks" border>
<el-table-column prop="hook_type_name" label="类型" width="100">
<template slot-scope="scope">{{ scope.row.hook_type_name || hookTypeLabel(scope.row.hook_type) }}</template>
</el-table-column>
<el-table-column label="Webhook" min-width="220" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.webhook_url || scope.row.webhookUrl || '-' }}</template>
</el-table-column>
<el-table-column label="启用" width="80">
<template slot-scope="scope">
<el-tag size="mini" :type="(scope.row.enabled === 1 || scope.row.enabled === true) ? 'success' : 'info'">
{{ (scope.row.enabled === 1 || scope.row.enabled === true) ? '启用' : '禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="description" label="描述" min-width="140" show-overflow-tooltip />
<el-table-column label="创建时间" width="170">
<template slot-scope="scope">{{ scope.row.created_time || scope.row.createdTime || '-' }}</template>
</el-table-column>
<el-table-column label="操作" width="140" fixed="right">
<template slot-scope="scope">
<el-button type="text" size="small" @click="openHookDialog('edit', scope.row)">编辑</el-button>
<el-button type="text" size="small" style="color: #f56c6c;" @click="handleHookDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 16px; text-align: right;">
<el-pagination
:current-page="hookPageNo"
:page-size="hookPageSize"
:page-sizes="[10, 20, 50, 100]"
:total="hookTotal"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleHookSizeChange"
@current-change="handleHookCurrentChange">
</el-pagination>
</div>
</el-tab-pane>
</el-tabs>
</page-section>
<el-dialog title="新增成员" :visible.sync="memberDialogVisible" width="520px" @close="resetMemberForm">
<el-form ref="memberForm" :model="memberForm" :rules="memberRules" label-width="94px" size="small">
<el-form-item label="用户ID" prop="user_id">
<el-input v-model.trim="memberForm.user_id" maxlength="64" placeholder="请输入用户ID"></el-input>
</el-form-item>
<el-form-item label="角色" prop="role">
<el-input v-model.trim="memberForm.role" maxlength="64" placeholder="请输入角色"></el-input>
<el-form-item label="选择用户" prop="user_ids">
<el-select
v-model="memberForm.user_ids"
multiple
filterable
placeholder="请选择用户"
style="width: 100%;"
@focus="loadUserOptions">
<el-option
v-for="item in userOptions"
:key="item.id"
:label="item.username + (item.real_name ? ' (' + item.real_name + ')' : '')"
:value="item.id">
</el-option>
<el-option v-if="userHasMore" disabled style="text-align: center;">
<span v-if="userLoading">加载中...</span>
<span v-else @click.stop="loadMoreUsers">加载更多</span>
</el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer">
@@ -79,17 +151,62 @@
<el-button type="primary" size="small" :loading="environmentSubmitting" @click="submitEnvironment">确定</el-button>
</span>
</el-dialog>
<el-dialog
:title="hookDialogMode === 'create' ? '新增 Hook' : '编辑 Hook'"
:visible.sync="hookDialogVisible"
width="560px"
@close="resetHookForm">
<el-form ref="hookFormRef" :model="hookForm" :rules="hookRules" label-width="100px" size="small">
<el-form-item label="Hook 类型" prop="hookType">
<el-select v-model="hookForm.hookType" placeholder="请选择" style="width: 100%;" :disabled="hookDialogMode === 'edit'">
<el-option label="飞书" :value="1" />
<el-option label="钉钉" :value="2" />
<el-option label="企微" :value="3" />
</el-select>
</el-form-item>
<el-form-item label="Webhook" prop="webhookUrl">
<el-input v-model.trim="hookForm.webhookUrl" type="textarea" :rows="2" placeholder="Webhook 地址" />
</el-form-item>
<el-form-item label="签名密钥" prop="secret">
<el-input v-model.trim="hookForm.secret" show-password placeholder="可选，飞书/钉钉等签名校验用" />
</el-form-item>
<el-form-item label="启用" prop="enabled">
<el-switch v-model="hookForm.enabled" :active-value="1" :inactive-value="0" />
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model.trim="hookForm.description" maxlength="200" show-word-limit placeholder="说明用途" />
</el-form-item>
<el-form-item label="扩展配置" prop="configText">
<el-input v-model.trim="hookForm.configText" type="textarea" :rows="4" placeholder='JSON，默认 {}' />
</el-form-item>
</el-form>
<span slot="footer">
<el-button size="small" @click="hookDialogVisible = false">取消</el-button>
<el-button type="primary" size="small" :loading="hookSubmitting" @click="submitHook">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import JsonViewer from '@/components/TestPlatform/common/JsonViewer'
import { createEnvironment, createProjectMember, getProjectEnvironments, getProjectMembers } from '@/api/projectApi'
import {
createEnvironment,
createProjectMember,
createProjectHook,
deleteProjectHook,
getProjectEnvironments,
getProjectHookDetail,
getProjectHookList,
getProjectMembers,
updateProjectHook
} from '@/api/projectApi'
import { getUserList } from '@/api/rbacApi'
const getDefaultMemberForm = () => ({
user_id: '',
role: ''
user_ids: []
})
const getDefaultEnvironmentForm = () => ({
@@ -97,11 +214,22 @@ const getDefaultEnvironmentForm = () => ({
variablesText: '{}'
})
const getDefaultHookForm = () => ({
hookId: null,
hookType: 1,
webhookUrl: '',
secret: '',
enabled: 1,
description: '',
configText: '{}'
})
export default {
name: 'ProjectSettings',
components: { PageSection, JsonViewer },
data() {
return {
activeTab: 'members',
memberPageNo: 1,
memberPageSize: 10,
memberTotal: 0,
@@ -117,19 +245,240 @@ export default {
memberForm: getDefaultMemberForm(),
environmentForm: getDefaultEnvironmentForm(),
memberRules: {
user_id: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
role: [{ required: true, message: '请输入角色', trigger: 'blur' }]
user_ids: [{ required: true, message: '请选择用户', trigger: 'change' }]
},
environmentRules: {
name: [{ required: true, message: '请输入环境名称', trigger: 'blur' }],
variablesText: [{ required: true, message: '请输入变量JSON', trigger: 'blur' }]
},
userOptions: [],
userLoading: false,
userPageNo: 1,
userPageSize: 10,
userTotal: 0,
userHasMore: false,
hooks: [],
hookPageNo: 1,
hookPageSize: 10,
hookTotal: 0,
hookLoading: false,
hookTypeFilter: '',
hookDialogVisible: false,
hookDialogMode: 'create',
hookSubmitting: false,
hookForm: getDefaultHookForm(),
hookRules: {
hookType: [{ required: true, message: '请选择类型', trigger: 'change' }],
webhookUrl: [{ required: true, message: '请输入 Webhook 地址', trigger: 'blur' }],
configText: [
{
validator: (rule, value, callback) => {
const s = (value || '').trim()
if (!s) {
callback()
return
}
try {
JSON.parse(s)
callback()
} catch (e) {
callback(new Error('扩展配置须为合法 JSON'))
}
},
trigger: 'blur'
}
]
}
}
},
methods: {
goBackToList() {
this.$router.push({ path: '/test-platform/project' })
},
getProjectId() {
return this.$route.query.projectId || 1
},
hookTypeLabel(type) {
const map = { 1: '飞书', 2: '钉钉', 3: '企微' }
return map[Number(type)] || type || '-'
},
onHookTypeFilterChange() {
this.hookPageNo = 1
this.fetchHooks()
},
fetchHooks() {
const projectId = this.getProjectId()
this.hookLoading = true
const params = {
projectId,
pageNo: this.hookPageNo,
pageSize: this.hookPageSize
}
if (this.hookTypeFilter !== '' && this.hookTypeFilter !== null && this.hookTypeFilter !== undefined) {
params.hookType = this.hookTypeFilter
}
getProjectHookList(params)
.then(res => {
const data = (res && res.data) || res || {}
const list = data.list || data.items || []
this.hooks = Array.isArray(list) ? list : []
this.hookTotal = Number(data.total != null ? data.total : this.hooks.length)
})
.catch(() => {
this.hooks = []
this.hookTotal = 0
})
.finally(() => {
this.hookLoading = false
})
},
openHookDialog(mode, row) {
this.hookDialogMode = mode
if (mode === 'create') {
this.hookForm = getDefaultHookForm()
this.hookDialogVisible = true
this.$nextTick(() => {
if (this.$refs.hookFormRef) this.$refs.hookFormRef.clearValidate()
})
return
}
const id = row && (row.id != null ? row.id : row.hookId)
if (id == null) {
this.$message.warning('缺少 Hook ID')
return
}
getProjectHookDetail(id)
.then(res => {
const d = (res && res.data) || res || {}
const cfg = d.config
let configText = '{}'
if (cfg != null && typeof cfg === 'object') {
try {
configText = JSON.stringify(cfg, null, 0)
} catch (e) {
configText = '{}'
}
} else if (typeof cfg === 'string' && cfg.trim()) {
configText = cfg.trim()
}
this.hookForm = {
hookId: d.id,
hookType: d.hook_type != null ? d.hook_type : d.hookType,
webhookUrl: d.webhook_url || d.webhookUrl || '',
secret: d.secret != null ? String(d.secret) : '',
enabled: d.enabled === 0 || d.enabled === false ? 0 : 1,
description: d.description || '',
configText
}
this.hookDialogVisible = true
this.$nextTick(() => {
if (this.$refs.hookFormRef) this.$refs.hookFormRef.clearValidate()
})
})
.catch(() => {})
},
resetHookForm() {
this.hookForm = getDefaultHookForm()
this.hookSubmitting = false
this.$nextTick(() => {
if (this.$refs.hookFormRef) this.$refs.hookFormRef.resetFields()
})
},
submitHook() {
this.$refs.hookFormRef.validate(valid => {
if (!valid) return
let config = {}
const ct = (this.hookForm.configText || '').trim()
if (ct) {
try {
config = JSON.parse(ct)
} catch (e) {
this.$message.error('扩展配置 JSON 无效')
return
}
}
this.hookSubmitting = true
const done = () => {
this.hookDialogVisible = false
this.hookPageNo = 1
this.fetchHooks()
}
if (this.hookDialogMode === 'create') {
createProjectHook({
projectId: Number(this.getProjectId()),
hookType: this.hookForm.hookType,
webhookUrl: this.hookForm.webhookUrl,
secret: this.hookForm.secret || undefined,
enabled: this.hookForm.enabled,
description: this.hookForm.description || undefined,
config
})
.then(res => {
if (res && res.code === 20000) {
this.$message.success((res && res.message) || '创建成功')
done()
} else {
this.$message.error((res && res.message) || '创建失败')
}
})
.finally(() => {
this.hookSubmitting = false
})
return
}
const payload = {
hookId: this.hookForm.hookId,
hookType: this.hookForm.hookType,
webhookUrl: this.hookForm.webhookUrl,
enabled: this.hookForm.enabled,
description: this.hookForm.description || undefined,
config
}
if (String(this.hookForm.secret || '').trim() !== '') {
payload.secret = this.hookForm.secret
}
updateProjectHook(payload)
.then(res => {
if (res && res.code === 20000) {
this.$message.success((res && res.message) || '更新成功')
done()
} else {
this.$message.error((res && res.message) || '更新失败')
}
})
.finally(() => {
this.hookSubmitting = false
})
})
},
handleHookDelete(row) {
const id = row && (row.id != null ? row.id : row.hookId)
if (id == null) {
this.$message.warning('缺少 Hook ID')
return
}
this.$confirm('确认删除该 Hook 配置？', '提示', { type: 'warning' })
.then(() => deleteProjectHook({ hookId: id }))
.then(res => {
if (res && res.code === 20000) {
this.$message.success((res && res.message) || '已删除')
this.hookPageNo = 1
this.fetchHooks()
} else {
this.$message.error((res && res.message) || '删除失败')
}
})
.catch(() => {})
},
handleHookSizeChange(val) {
this.hookPageSize = val
this.hookPageNo = 1
this.fetchHooks()
},
handleHookCurrentChange(val) {
this.hookPageNo = val
this.fetchHooks()
},
fetchData() {
const projectId = this.getProjectId()
getProjectMembers(projectId, {
@@ -157,6 +506,9 @@ export default {
},
openMemberDialog() {
this.memberDialogVisible = true
this.userOptions = []
this.userPageNo = 1
this.userHasMore = false
this.$nextTick(() => {
this.memberForm = getDefaultMemberForm()
if (this.$refs.memberForm) {
@@ -167,19 +519,59 @@ export default {
resetMemberForm() {
this.memberForm = getDefaultMemberForm()
this.memberSubmitting = false
this.userOptions = []
this.userPageNo = 1
this.userHasMore = false
this.$nextTick(() => {
if (this.$refs.memberForm) {
this.$refs.memberForm.resetFields()
}
})
},
loadMoreUsers() {
if (this.userHasMore && !this.userLoading) {
this.userPageNo++
this.loadUserOptions()
}
},
loadUserOptions() {
this.userLoading = true
getUserList({
pageNo: this.userPageNo,
pageSize: this.userPageSize,
keyword: '',
status: 1
}).then(res => {
const data = res && res.data ? res.data : res || {}
const list = data.list || data.items || data.data || []
this.userTotal = data.total || data.totalCount || 0
if (this.userPageNo === 1) {
this.userOptions = list
} else {
this.userOptions = [...this.userOptions, ...list]
}
this.userHasMore = this.userOptions.length < this.userTotal
}).catch(() => {
this.userOptions = []
this.userHasMore = false
}).finally(() => {
this.userLoading = false
})
},
submitMember() {
this.$refs.memberForm.validate(valid => {
if (!valid) {
return
}
if (!this.memberForm.user_ids || this.memberForm.user_ids.length === 0) {
this.$message.error('请选择用户')
return
}
this.memberSubmitting = true
createProjectMember(Object.assign({ project_id: this.getProjectId() }, this.memberForm)).then(res => {
createProjectMember({
project_id: this.getProjectId(),
user_ids: this.memberForm.user_ids
}).then(res => {
const message = (res && res.message) || ''
if (res && res.code === 20000) {
this.$message.success(message || '成员新增成功')
@@ -265,6 +657,7 @@ export default {
},
created() {
this.fetchData()
this.fetchHooks()
}
}
</script>
@@ -278,4 +671,16 @@ export default {
margin-bottom: 16px;
text-align: right;
}
.hook-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.hook-toolbar-left {
text-align: left;
}
</style>

320
src/components/TestPlatform/Report/ReportList.vue
View File

@@ -4,24 +4,76 @@
<template slot="extra">
<el-button type="primary" size="small" :loading="generating" @click="handleGenerate">生成报告</el-button>
</template>
<el-form :inline="true" :model="queryForm" size="small">
<el-form-item label="项目ID">
<el-input v-model="projectId" style="width: 120px;"></el-input>
<el-form :inline="true" :model="queryForm" size="small" @submit.native.prevent>
<el-form-item label="产品名称">
<el-select
v-model="selectedProductId"
filterable
clearable
placeholder="请选择产品"
style="width: 220px;"
@change="handleProductChange"
@focus="loadProductOptions">
<el-option
v-for="item in productOptions"
:key="item.id"
:label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="计划ID">
<el-input v-model="queryForm.plan_id" style="width: 120px;"></el-input>
<el-form-item label="项目名称">
<el-select
v-model="selectedProjectId"
filterable
clearable
placeholder="请选择项目"
style="width: 240px;"
:disabled="!selectedProductId"
@change="handleProjectChange">
<el-option
v-for="item in projectOptions"
:key="item.id"
:label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="计划名称">
<el-select
v-model="queryForm.plan_id"
filterable
clearable
placeholder="请选择计划"
style="width: 260px;"
:disabled="!selectedProjectId"
@focus="loadPlanOptions">
<el-option
v-for="item in planOptions"
:key="item.id"
:label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="fetchList">查询</el-button>
<el-button type="primary" :disabled="!selectedProjectId" @click="fetchList">查询</el-button>
</el-form-item>
<el-form-item>
<el-button @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="tableData" border style="margin-top: 16px;">
<el-table-column prop="name" label="报告名称" min-width="180"></el-table-column>
<el-table-column prop="report_type" label="类型" width="120"></el-table-column>
<el-table-column prop="generated_at" label="生成时间" min-width="160"></el-table-column>
<el-table-column label="计划名称" min-width="180">
<template slot-scope="scope">{{ formatPlanName(scope.row) }}</template>
</el-table-column>
<el-table-column label="类型" width="120">
<template slot-scope="scope">{{ formatReportType(scope.row.report_type || scope.row.type) }}</template>
</el-table-column>
<el-table-column label="生成时间" min-width="180">
<template slot-scope="scope">{{ formatDateTime(scope.row.generated_time || scope.row.generated_at || scope.row.created_at || scope.row.create_time) }}</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<el-button type="text" @click="goViewer(scope.row)">查看</el-button>
<el-button type="text" @click="goViewer(scope.row)">查看链接</el-button>
</template>
</el-table-column>
</el-table>
@@ -42,7 +94,15 @@
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { getPlanList } from '@/api/planApi'
import { getProductList } from '@/api/productApi'
import { getProjectDetail, getProjectList } from '@/api/projectApi'
import { generateReport, getReportList } from '@/api/reportApi'
import {
readLastProductProjectCache,
saveLastProductProjectCache,
pickIdFromOptions
} from '@/utils/lastProductProjectCache'
export default {
name: 'ReportList',
@@ -51,48 +111,276 @@ export default {
return {
loading: false,
generating: false,
projectId: this.$route.query.projectId || 1,
projectId: this.$route.query.projectId || '',
selectedProductId: '',
selectedProjectId: this.$route.query.projectId ? Number(this.$route.query.projectId) : '',
productOptions: [],
projectOptions: [],
planOptions: [],
queryForm: {
plan_id: this.$route.query.planId || ''
},
tableData: []
tableData: [],
pageNo: 1,
pageSize: 10,
total: 0
}
},
beforeRouteLeave(to, from, next) {
this.savePageCache()
next()
},
methods: {
getCacheKey() {
return 'test-platform-report-list-cache'
},
savePageCache() {
const cache = {
projectId: this.projectId,
selectedProductId: this.selectedProductId,
selectedProjectId: this.selectedProjectId,
productOptions: this.productOptions,
projectOptions: this.projectOptions,
planOptions: this.planOptions,
queryForm: this.queryForm,
tableData: this.tableData,
pageNo: this.pageNo,
pageSize: this.pageSize,
total: this.total
}
window.sessionStorage.setItem(this.getCacheKey(), JSON.stringify(cache))
},
restorePageCache() {
const raw = window.sessionStorage.getItem(this.getCacheKey())
if (!raw) return false
try {
const cache = JSON.parse(raw)
this.projectId = cache.projectId || ''
this.selectedProductId = cache.selectedProductId || ''
this.selectedProjectId = cache.selectedProjectId || ''
this.productOptions = cache.productOptions || []
this.projectOptions = cache.projectOptions || []
this.planOptions = cache.planOptions || []
this.queryForm = cache.queryForm || { plan_id: '' }
this.tableData = cache.tableData || []
this.pageNo = Number(cache.pageNo || 1)
this.pageSize = Number(cache.pageSize || 10)
this.total = Number(cache.total || 0)
return true
} catch (e) {
return false
}
},
loadProductOptions() {
if (this.productOptions && this.productOptions.length > 0) {
return Promise.resolve()
}
return getProductList({ pageNo: 1, pageSize: 1000, status: 1 }).then(res => {
const data = (res && res.data) || res || {}
this.productOptions = data.items || data.list || data.data || []
}).catch(() => {
this.productOptions = []
})
},
loadProjectOptionsByProduct(productId) {
if (!productId) {
this.projectOptions = []
return Promise.resolve()
}
return getProjectList({ pageNo: 1, pageSize: 1000, status: 1, productId }).then(res => {
const data = (res && res.data) || res || {}
this.projectOptions = data.items || data.list || data.data || []
}).catch(() => {
this.projectOptions = []
})
},
loadPlanOptions() {
if (!this.selectedProjectId) {
this.planOptions = []
return Promise.resolve()
}
return getPlanList(this.selectedProjectId, { pageNo: 1, pageSize: 1000 }).then(res => {
const data = (res && res.data) || res || {}
this.planOptions = data.items || data.list || data.data || []
}).catch(() => {
this.planOptions = []
})
},
handleProductChange(val) {
this.selectedProjectId = ''
this.projectId = ''
this.queryForm.plan_id = ''
this.projectOptions = []
this.planOptions = []
this.tableData = []
this.total = 0
this.loadProjectOptionsByProduct(val)
},
handleProjectChange(val) {
this.selectedProjectId = val || ''
this.projectId = val || ''
this.queryForm.plan_id = ''
this.planOptions = []
this.pageNo = 1
if (!val) {
this.tableData = []
this.total = 0
return
}
saveLastProductProjectCache(this.selectedProductId, val)
this.loadPlanOptions().finally(() => {
this.fetchList()
})
},
restoreSharedProductProjectCache() {
const cached = readLastProductProjectCache()
if (!cached) return Promise.resolve()
const { productId: pid, projectId: projId } = cached
if (pid === '' || pid === undefined || pid === null || projId === '' || projId === undefined || projId === null) {
return Promise.resolve()
}
const hasProduct = (this.productOptions || []).some(p => String(p.id) === String(pid))
if (!hasProduct) return Promise.resolve()
this.selectedProductId = pickIdFromOptions(this.productOptions, pid)
return this.loadProjectOptionsByProduct(this.selectedProductId).then(() => {
const hasProject = (this.projectOptions || []).some(p => String(p.id) === String(projId))
if (!hasProject) return
const picked = pickIdFromOptions(this.projectOptions, projId)
this.selectedProjectId = picked
this.projectId = picked
})
},
fetchList() {
if (!this.projectId) {
this.tableData = []
this.total = 0
return
}
this.loading = true
getReportList(this.projectId, Object.assign({}, this.queryForm, {
getReportList(Object.assign({}, this.queryForm, {
product_id: this.selectedProductId || undefined,
project_id: this.projectId || undefined,
plan_id: this.queryForm.plan_id || undefined,
pageNo: this.pageNo,
pageSize: this.pageSize
})).then(res => {
const data = (res && res.data) || res || {}
this.tableData = data.items || data.list || data.data || []
this.total = data.total || data.totalCount || this.tableData.length
this.savePageCache()
}).catch(() => {
this.tableData = []
this.total = 0
this.savePageCache()
}).finally(() => {
this.loading = false
})
},
handleGenerate() {
if (!this.queryForm.plan_id) {
this.$message({ type: 'warning', message: '请先输入计划ID' })
this.$message({ type: 'warning', message: '请先选择计划名称' })
return
}
if (!this.projectId) {
this.$message({ type: 'warning', message: '请先选择项目名称' })
return
}
this.generating = true
generateReport(this.projectId, { plan_id: this.queryForm.plan_id }).then(() => {
generateReport({
planId: this.queryForm.plan_id,
plan_id: this.queryForm.plan_id
}).then(() => {
this.$message({ type: 'success', message: '报告生成任务已提交' })
this.fetchList()
}).finally(() => {
this.generating = false
})
},
goViewer(row) {
this.$router.push({ path: '/test-platform/reports/viewer', query: { projectId: this.projectId, reportId: row.id } })
const type = String(row.report_type || row.type || '').toLowerCase()
const isAuto = type.indexOf('auto') > -1 || type.indexOf('automation') > -1 || type.indexOf('自动') > -1 || Number(row.report_type || row.type) === 2
if (isAuto) {
const externalUrl = row.external_url || row.externalUrl || row.report_url || row.reportUrl || 'https://example.com/automation-report'
window.open(externalUrl, '_blank')
this.$message.info('自动化报告外部链接暂未实现，先跳转占位链接')
return
}
this.$router.push({
path: '/test-platform/report/viewer',
query: {
projectId: this.projectId,
reportId: row.id
}
})
},
handleSizeChange(size) {
this.pageSize = size
this.pageNo = 1
this.fetchList()
},
handleCurrentChange(page) {
this.pageNo = page
this.fetchList()
},
resetQuery() {
this.queryForm.plan_id = ''
this.pageNo = 1
this.fetchList()
},
formatDateTime(value) {
if (!value) return '-'
return String(value).replace('T', ' ').slice(0, 19)
},
formatPlanName(row) {
if (!row) return '-'
const directName = row.plan_name || row.planName || row.name || ''
if (directName) return directName
const planId = row.plan_id || row.planId
if (!planId) return '-'
const matched = (this.planOptions || []).find(item => String(item.id) === String(planId))
return (matched && matched.name) || String(planId)
},
formatReportType(value) {
const map = {
manual: '手工',
auto: '自动化',
automation: '自动化',
1: '手工',
2: '自动化'
}
return map[value] || value || '-'
},
initByRouteProject() {
if (!this.selectedProjectId) return Promise.resolve()
return getProjectDetail(this.selectedProjectId).then(res => {
const data = (res && res.data) || res || {}
const productId = data.productId || data.product_id || ''
if (productId) {
this.selectedProductId = productId
return this.loadProjectOptionsByProduct(productId)
}
}).catch(() => {})
}
},
created() {
this.fetchList()
if (this.restorePageCache()) {
return
}
this.loadProductOptions()
.then(() => {
if (this.selectedProjectId) {
return this.initByRouteProject()
}
return this.restoreSharedProductProjectCache()
})
.finally(() => {
if (this.selectedProjectId) {
this.projectId = this.selectedProjectId
this.loadPlanOptions().finally(() => {
this.fetchList()
})
}
})
}
}
</script>

13
src/components/TestPlatform/Report/ReportViewer.vue
View File

@@ -1,6 +1,9 @@
<template>
<div class="page-wrap">
<page-section title="报告查看">
<div style="margin-bottom: 12px;">
<el-button size="small" @click="goBack">返回</el-button>
</div>
<el-alert
v-if="!report.content"
title="当前无可展示内容，待后端返回 report.content HTML"
@@ -35,11 +38,19 @@ export default {
if (!this.reportId) {
return
}
getReportDetail(this.projectId, this.reportId).then(res => {
getReportDetail(this.reportId, this.projectId).then(res => {
this.report = (res && res.data) || res || {}
}).catch(() => {
this.report = {}
})
},
goBack() {
this.$router.push({
path: '/test-platform/report',
query: {
projectId: this.projectId || undefined
}
})
}
},
created() {

5
src/components/User/Login.vue
View File

@@ -49,7 +49,7 @@
<script>
import { Login } from '@/api/Userapi'
import { getRoleList } from '@/api/rbacApi'
import { getRoleList, parseMenusFromRoleListResponse } from '@/api/rbacApi'
export default {
name: 'Login',
@@ -110,8 +110,7 @@ export default {
return
}
getRoleList({ roleId }).then(res => {
const menus = res && Array.isArray(res.data) ? res.data : []
this.$store.commit('SetUserMenus', menus)
this.$store.commit('SetUserMenus', parseMenusFromRoleListResponse(res))
}).catch(() => {})
}
}

95
src/router/index.js
View File

@@ -34,7 +34,7 @@ export default new Router({
}
},
{
path: '/create/data',
path: '/data-tools/db-builder',
name: 'CreateManage',
components: {
Manage: (resolve) => require(['@/components/CreateData/CreateManage'], resolve)
@@ -69,144 +69,197 @@ export default new Router({
}
},
{
path: '/test-platform/projects',
path: '/test-platform/project',
name: 'ProjectList',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Project/ProjectList'], resolve)
}
},
{
path: '/test-platform/products',
path: '/test-platform/product',
name: 'ProductList',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Product/ProductList'], resolve)
}
},
{
path: '/test-platform/projects/detail',
path: '/test-platform/project/detail',
name: 'ProjectDetail',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Project/ProjectDetail'], resolve)
}
},
{
path: '/test-platform/projects/settings',
path: '/test-platform/project/setting',
name: 'ProjectSettings',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Project/ProjectSettings'], resolve)
}
},
{
path: '/test-platform/cases',
path: '/test-platform/case',
name: 'CaseList',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Case/CaseList'], resolve)
}
},
{
path: '/test-platform/cases/editor',
path: '/test-platform/case/editor',
name: 'CaseEditor',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Case/CaseEditor'], resolve)
}
},
{
path: '/test-platform/cases/review',
path: '/test-platform/case/review',
name: 'CaseReview',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Case/CaseReview'], resolve)
}
},
{
path: '/test-platform/plans',
path: '/test-platform/plan',
name: 'PlanList',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanList'], resolve)
}
},
{
path: '/test-platform/plans/builder',
path: '/test-platform/plan/builder',
name: 'PlanBuilder',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanBuilder'], resolve)
}
},
{
path: '/test-platform/plans/execute',
path: '/test-platform/plan/execute',
name: 'PlanExecute',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanExecute'], resolve)
}
},
{
path: '/test-platform/plans/progress',
path: '/test-platform/plan/progress',
name: 'PlanProgress',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanProgress'], resolve)
}
},
{
path: '/test-platform/reports',
path: '/test-platform/plan/case/add',
name: 'PlanCaseAdd',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanCaseAdd'], resolve)
}
},
{
path: '/test-platform/report',
name: 'ReportList',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Report/ReportList'], resolve)
}
},
{
path: '/test-platform/reports/viewer',
path: '/test-platform/report/viewer',
name: 'ReportViewer',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Report/ReportViewer'], resolve)
}
},
{
path: '/test-platform/data-factory/builders',
path: '/bug',
redirect: '/bug/list'
},
{
path: '/bug/list',
name: 'BugList',
components: {
Manage: (resolve) => require(['@/components/Bug/BugList'], resolve)
}
},
{
path: '/bug/detail',
name: 'BugDetail',
components: {
Manage: (resolve) => require(['@/components/Bug/BugDetail'], resolve)
}
},
{
path: '/bug/create',
name: 'BugCreate',
components: {
Manage: (resolve) => require(['@/components/Bug/BugEditor'], resolve)
}
},
{
path: '/bug/edit',
name: 'BugEdit',
components: {
Manage: (resolve) => require(['@/components/Bug/BugEditor'], resolve)
}
},
{
path: '/bug/stats',
name: 'BugStats',
components: {
Manage: (resolve) => require(['@/components/Bug/BugStats'], resolve)
}
},
{
path: '/data-tools/factory',
name: 'BuilderList',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/DataFactory/BuilderList'], resolve)
}
},
{
path: '/test-platform/data-factory/editor',
path: '/data-tools/factory/editor',
name: 'BuilderEditor',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/DataFactory/BuilderEditor'], resolve)
}
},
{
path: '/test-platform/data-factory/tasks',
path: '/data-tools/factory/task',
name: 'TaskHistory',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/DataFactory/TaskHistory'], resolve)
}
},
{
path: '/test-platform/data-factory/mock',
path: '/data-tools/factory/mock',
name: 'MockService',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/DataFactory/MockService'], resolve)
}
},
{
path: '/system/roles',
path: '/system/role',
name: 'RoleManage',
components: {
Manage: (resolve) => require(['@/components/System/RoleManage'], resolve)
}
},
{
path: '/system/users',
path: '/system/user',
name: 'UserManage',
components: {
Manage: (resolve) => require(['@/components/System/UserManage'], resolve)
}
},
{
path: '/system/menus',
path: '/system/menu',
name: 'MenuManage',
components: {
Manage: (resolve) => require(['@/components/System/MenuManage'], resolve)
}
},
{
path: '/system/permission',
name: 'PermissionManage',
components: {
Manage: (resolve) => require(['@/components/System/PermissionManage'], resolve)
}
}
]
}

73
src/utils/bugHistory.js Normal file
View File

@@ -0,0 +1,73 @@
import { addBugHistory } from '@/api/bugApi'
/** 将任意值转为接口可接受的字符串（空用 ''） */
export function toHistoryValue(v) {
if (v === undefined || v === null) return ''
if (typeof v === 'object') {
try {
return JSON.stringify(v)
} catch (e) {
return String(v)
}
}
return String(v)
}
/**
* 写入 Bug 操作历史（POST /bug/history/add）
* 失败不抛错、不阻断主流程，仅静默忽略（可后续接日志）
*/
export function recordBugHistory(store, { bugId, fieldName, oldValue, newValue, operatorId }) {
if (!bugId || !fieldName) return Promise.resolve()
const uid =
operatorId !== undefined && operatorId !== null && operatorId !== ''
? operatorId
: store && store.state && store.state.currentUser && store.state.currentUser.id
if (uid === undefined || uid === null || uid === '') return Promise.resolve()
return addBugHistory({
bugId: Number(bugId),
fieldName: String(fieldName),
oldValue: toHistoryValue(oldValue),
newValue: toHistoryValue(newValue),
operatorId: Number(uid)
}).catch(() => {})
}
/** 编辑页：与接口 fieldName 对齐的表单字段（用于对比写历史） */
export const BUG_EDIT_HISTORY_FIELDS = [
{ formKey: 'title', fieldName: 'title' },
{ formKey: 'bugType', fieldName: 'bug_type' },
{ formKey: 'severity', fieldName: 'severity' },
{ formKey: 'priority', fieldName: 'priority' },
{ formKey: 'status', fieldName: 'status' },
{ formKey: 'reporterId', fieldName: 'reporter_id' },
{ formKey: 'assigneeId', fieldName: 'assignee_id' },
{ formKey: 'moduleId', fieldName: 'module_id' },
{ formKey: 'caseId', fieldName: 'case_id' },
{ formKey: 'planId', fieldName: 'plan_id' },
{ formKey: 'environment', fieldName: 'environment' },
{ formKey: 'steps', fieldName: 'steps' },
{ formKey: 'reproduceRate', fieldName: 'reproduce_rate' }
]
export function buildBugEditBaseline(form) {
const f = form || {}
const o = {}
BUG_EDIT_HISTORY_FIELDS.forEach(({ formKey }) => {
o[formKey] = f[formKey]
})
return o
}
/** 对比编辑前后并逐字段写历史（仅变更字段） */
export function recordBugEditDiff(store, bugId, baseline, current) {
if (!bugId || !baseline || !current) return Promise.resolve()
const tasks = []
BUG_EDIT_HISTORY_FIELDS.forEach(({ formKey, fieldName }) => {
const ov = baseline[formKey]
const nv = current[formKey]
if (toHistoryValue(ov) === toHistoryValue(nv)) return
tasks.push(recordBugHistory(store, { bugId, fieldName, oldValue: ov, newValue: nv }))
})
return Promise.all(tasks)
}

163
src/utils/bugHistoryDisplay.js Normal file
View File

@@ -0,0 +1,163 @@
import {
STATUS_MAP,
PRIORITY_MAP,
SEVERITY_MAP,
BUG_TYPE_MAP,
formatBugType,
formatReproduceRate
} from '@/utils/bugMaps'
/** 历史记录 field_name / fieldName → 中文 */
const FIELD_NAME_CN = {
status: '状态',
assignee_id: '当前指派',
reporter_id: '创建人',
module_id: '模块',
product_id: '产品',
project_id: '项目',
priority: '优先级',
severity: '严重程度',
bug_type: '类型',
title: '标题',
environment: '环境',
case_id: '关联用例',
plan_id: '关联计划',
steps: '复现步骤',
solution: '解决方案',
resolve_version: '解决版本',
resolve_comment: '解决备注',
comment: '备注',
create: '创建',
delete: '删除',
description: '描述',
user_id: '用户',
is_auto: '自动化',
reproduce_rate: '复现率',
resolved_by: '解决人'
}
const SOLUTION_CN = {
by_design: '设计如此',
duplicate_bug: '重复Bug',
external_reason: '外部原因',
solution_resolved: '已解决',
cannot_reproduce: '无法重现',
deferred: '延期处理',
wont_fix: '不予解决'
}
const RESOLVE_VERSION_CN = {
trunk: '主干',
current_sprint: '当前迭代',
next: '下一版本'
}
function stripHtmlBrief(html, maxLen) {
if (html == null || html === '') return ''
const text = String(html)
.replace(/<[^>]+>/g, ' ')
.replace(/\s+/g, ' ')
.trim()
if (!text) return '（富文本）'
if (maxLen && text.length > maxLen) return text.slice(0, maxLen) + '…'
return text
}
function toSnakeFieldKey(name) {
const s = String(name || '').trim()
if (!s) return ''
return s
.replace(/([a-z\d])([A-Z])/g, '$1_$2')
.replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2')
.toLowerCase()
.replace(/^_+/, '')
.replace(/_+/g, '_')
}
/** 与 BUG_EDIT_HISTORY_FIELDS / 接口 fieldName 对齐的 snake_case key */
export function normalizeBugHistoryFieldKey(name) {
const snake = toSnakeFieldKey(name)
if (!snake) return ''
const compact = snake.replace(/_/g, '')
const alias = {
assigneeid: 'assignee_id',
reporterid: 'reporter_id',
moduleid: 'module_id',
productid: 'product_id',
projectid: 'project_id',
caseid: 'case_id',
planid: 'plan_id',
bugtype: 'bug_type',
reproducerate: 'reproduce_rate',
resolvedby: 'resolved_by',
userid: 'user_id',
isauto: 'is_auto',
resolveversion: 'resolve_version',
resolvecomment: 'resolve_comment',
oldvalue: 'old_value',
newvalue: 'new_value',
fieldname: 'field_name'
}
return alias[compact] || snake
}
export function formatBugHistoryFieldName(name) {
const k = normalizeBugHistoryFieldKey(name)
if (!k) return '-'
return FIELD_NAME_CN[k] || String(name || '').trim() || '-'
}
/**
* 按字段将历史 old/new 转为中文展示（未知枚举则原样返回）
*/
export function formatBugHistoryCellValue(fieldName, value) {
const fn = normalizeBugHistoryFieldKey(fieldName)
const raw = value
if (raw === undefined || raw === null || raw === '') return '（空）'
const s = String(raw).trim()
switch (fn) {
case 'status':
return STATUS_MAP[Number(s)] != null ? STATUS_MAP[Number(s)] : s
case 'priority':
return PRIORITY_MAP[Number(s)] != null ? PRIORITY_MAP[Number(s)] : s
case 'severity':
return SEVERITY_MAP[Number(s)] != null ? SEVERITY_MAP[Number(s)] : s
case 'bug_type':
return BUG_TYPE_MAP[Number(s)] != null ? BUG_TYPE_MAP[Number(s)] : formatBugType(Number(s))
case 'solution':
return SOLUTION_CN[s] || s
case 'resolve_version':
return RESOLVE_VERSION_CN[s] || s
case 'resolve_comment':
case 'comment':
return stripHtmlBrief(raw, 160)
case 'create':
case 'delete':
if (s === '0' || s === '1') return s === '1' ? '是' : '否'
return s
case 'steps':
return stripHtmlBrief(raw, 120)
case 'reproduce_rate':
return formatReproduceRate(s)
case 'resolved_by':
return s
default:
return s
}
}
/** 解决弹窗历史列表用：单行描述 */
export function formatBugHistoryLineText(h) {
const fn = h.field_name || h.fieldName || ''
var ov = h.old_value
if (ov === undefined || ov === null) ov = h.oldValue
var nv = h.new_value
if (nv === undefined || nv === null) nv = h.newValue
const op = h.operator_id || h.operatorId || h.operator_name || h.operatorName || ''
const label = formatBugHistoryFieldName(fn)
const o = formatBugHistoryCellValue(fn, ov)
const n = formatBugHistoryCellValue(fn, nv)
return `${label}：${o} → ${n}（操作人 ${op}）`
}

143
src/utils/bugMaps.js Normal file
View File

@@ -0,0 +1,143 @@
/** Bug 枚举与展示（与接口一致：bug_type 1–11） */
export const BUG_TYPE_MAP = {
1: '功能缺陷',
2: 'UI问题',
3: '性能问题',
4: '安全漏洞',
5: '兼容性问题',
6: '前端bug',
7: '后端bug',
8: '配置问题',
9: '产品设计缺陷',
10: '产品优化',
11: '其他'
}
export const SEVERITY_MAP = {
1: '致命',
2: '严重',
3: '中等',
4: '轻微'
}
export const PRIORITY_MAP = {
1: '高',
2: '中',
3: '低'
}
/** 复现概率 / 复现率（与接口 reproduceRate 一致） */
export const REPRODUCE_RATE_MAP = {
1: '必现',
2: '偶现',
3: '仅一次',
4: '难重现'
}
export function formatReproduceRate(v) {
const n = Number(v)
if (Number.isNaN(n)) return v === undefined || v === null || v === '' ? '-' : String(v)
return REPRODUCE_RATE_MAP[n] != null ? REPRODUCE_RATE_MAP[n] : String(v)
}
export const STATUS_MAP = {
0: '新建',
1: '待处理',
2: '进行中',
3: '已解决',
4: '已关闭',
5: '已拒绝'
}
/** 已解决状态值（与接口一致） */
export const BUG_STATUS_RESOLVED = 3
/** 已关闭 */
export const BUG_STATUS_CLOSED = 4
/** 待处理（重新打开目标状态） */
export const BUG_STATUS_PENDING = 1
/** 已拒绝 */
export const BUG_STATUS_REJECTED = 5
/**
* 主流程下一状态：新建→待处理→进行中→已解决→已关闭；已拒绝→待处理。
* 已关闭、未知状态无下一档。
*/
export function getBugStatusNextTransition(status) {
const s = Number(status)
if (Number.isNaN(s)) return null
const nextMap = {
0: 1,
1: 2,
2: 3,
3: 4,
5: 1
}
const next = nextMap[s]
if (next === undefined) return null
const label = STATUS_MAP[next]
if (label == null) return null
return { nextStatus: next, nextLabel: label }
}
export function formatBugType(v) {
return BUG_TYPE_MAP[v] != null ? BUG_TYPE_MAP[v] : v
}
export function formatSeverity(v) {
return SEVERITY_MAP[v] != null ? SEVERITY_MAP[v] : v
}
export function formatPriority(v) {
return PRIORITY_MAP[v] != null ? PRIORITY_MAP[v] : v
}
export function formatStatus(v) {
return STATUS_MAP[v] != null ? STATUS_MAP[v] : v
}
/** ElementUI el-tag type */
export function statusTagType(status) {
const map = {
0: 'info',
1: 'warning',
2: 'primary',
3: 'success',
4: 'info',
5: 'danger'
}
return map[Number(status)] || 'info'
}
/** 详情页等：状态角标独立配色（class 名） */
export function statusBadgeClass(status) {
const map = {
0: 'bug-status-new',
1: 'bug-status-pending',
2: 'bug-status-progress',
3: 'bug-status-resolved',
4: 'bug-status-closed',
5: 'bug-status-rejected'
}
return map[Number(status)] != null ? map[Number(status)] : 'bug-status-unknown'
}
export function severityTagType(severity) {
const map = { 1: 'danger', 2: 'warning', 3: '', 4: 'info' }
return map[Number(severity)] || 'info'
}
export function priorityTagType(priority) {
const map = { 1: 'danger', 2: 'warning', 3: 'success' }
return map[Number(priority)] || 'info'
}
export function bugTypeTagType(bugType) {
const n = Number(bugType)
if (!n || n < 1) return ''
const cycle = ['', 'success', 'warning', 'danger', 'info']
return cycle[(n - 1) % cycle.length]
}

192
src/utils/bugStepsFormat.js Normal file
View File

@@ -0,0 +1,192 @@
/** 复现步骤中的截图：存 Markdown 图片语法，详情页安全渲染 */
/** Markdown 图片：允许 ] 与 ( 之间有空格，与部分编辑器行为一致 */
export function getBugStepImageMarkdownRegex() {
return /!\[[^\]]*\]\s*\(\s*((?:https?:\/\/|\/)[^)\s]+)\s*\)/gi
}
/** 新建 / 无复现步骤数据时，富文本编辑器内的默认骨架 */
export const BUG_STEPS_DEFAULT_HTML =
'<p>复现步骤：</p>' +
'<p><br></p>' +
'<p><br></p>' +
'<p>实际结果：</p>' +
'<p><br></p>' +
'<p><br></p>' +
'<p>预期结果：</p>' +
'<p><br></p>'
export function escapeHtml(s) {
return String(s)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
}
/** 用于 HTML 属性（如 img src） */
export function escapeHtmlAttr(s) {
return String(s)
.replace(/&/g, '&amp;')
.replace(/"/g, '&quot;')
}
/**
* 上传文件路径中的反斜杠统一为 /
* @param {string} url
*/
export function normalizeUploadPathSlashes(url) {
return String(url || '').trim().replace(/\\/g, '/')
}
/**
* 静态资源（Bug 上传图）访问根，不含末尾 /
* - 开发环境默认 http://localhost:5010（与后端文件服务常见端口一致）
* - 可在 index.html 里设置 window.__BUG_UPLOAD_ORIGIN__ 覆盖
* - 打包时可配置 VUE_APP_BUG_UPLOAD_ORIGIN（需在 webpack DefinePlugin 中注入）
*/
export function getBugUploadStaticOrigin() {
if (typeof window !== 'undefined' && window.__BUG_UPLOAD_ORIGIN__) {
return String(window.__BUG_UPLOAD_ORIGIN__).replace(/\/$/, '')
}
try {
if (typeof process !== 'undefined' && process.env && process.env.VUE_APP_BUG_UPLOAD_ORIGIN) {
return String(process.env.VUE_APP_BUG_UPLOAD_ORIGIN).replace(/\/$/, '')
}
} catch (e) { /* ignore */ }
try {
if (typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'development') {
return 'http://localhost:5010'
}
} catch (e2) { /* ignore */ }
return ''
}
/**
* 浏览器实际加载图片用的地址：/uploads/... 在开发环境走 5010 端口
* 存库仍可为接口返回的完整 URL，仅展示/预览时改写
*/
export function rewriteBugImageUrlForAccess(url) {
const u = normalizeUploadPathSlashes(url)
if (!u) return ''
const staticOrigin = getBugUploadStaticOrigin()
let path = ''
if (/^https?:\/\//i.test(u)) {
const dbl = u.indexOf('//')
const pathStart = u.indexOf('/', dbl >= 0 ? dbl + 2 : 0)
path = pathStart >= 0 ? u.slice(pathStart) : '/'
} else if (u.startsWith('/')) {
path = u
} else {
return u
}
path = normalizeUploadPathSlashes(path)
if (staticOrigin && path.indexOf('/uploads/') === 0) {
return staticOrigin + path
}
if (/^https?:\/\//i.test(u)) return u
return resolveUploadPublicUrl(path)
}
/** 相对路径补全为当前站点 origin（无专用静态域时） */
export function resolveUploadPublicUrl(url) {
const u = String(url || '').trim()
if (!u) return ''
if (/^https?:\/\//i.test(u)) return u
if (u.startsWith('//')) return `${window.location.protocol}${u}`
if (u.startsWith('/')) return `${window.location.origin}${u}`
return u
}
/**
* 解析 POST /bug/upload 成功响应（与接口一致：{ code, message, data: { url } }）
*/
export function parseBugUploadFileUrl(res) {
if (!res) return ''
const inner = res.data
if (inner && typeof inner === 'object' && inner.url != null && inner.url !== '') {
return String(inner.url).trim()
}
if (typeof inner === 'string' && (inner.startsWith('http') || inner.startsWith('/'))) {
return inner.trim()
}
if (typeof res === 'string' && (res.startsWith('http') || res.startsWith('/'))) {
return res.trim()
}
if (res.url != null && res.url !== '') {
return String(res.url).trim()
}
const legacy =
(inner && inner.fileUrl) ||
(inner && inner.file_url) ||
(inner && inner.path) ||
(inner && typeof inner.data === 'object' && inner.data && inner.data.url) ||
''
return legacy ? String(legacy).trim() : ''
}
/**
* 将步骤文本转为可展示的 HTML（仅把 Markdown 图片转为 img，其余转义）
*/
export function formatBugStepsToHtml(raw) {
const s = String(raw || '')
const re = getBugStepImageMarkdownRegex()
let out = ''
let last = 0
let m
re.lastIndex = 0
while ((m = re.exec(s)) !== null) {
out += escapeHtml(s.slice(last, m.index)).replace(/\n/g, '<br>')
const rawUrl = normalizeUploadPathSlashes(m[1])
const displaySrc = rewriteBugImageUrlForAccess(rawUrl)
if (displaySrc && (/^https?:\/\//i.test(displaySrc) || displaySrc.startsWith('/'))) {
out += `<img class="bug-step-img" src="${escapeHtmlAttr(displaySrc)}" alt="截图" />`
} else {
out += escapeHtml(m[0])
}
last = m.index + m[0].length
}
out += escapeHtml(s.slice(last)).replace(/\n/g, '<br>')
return out
}
/** 判断是否为富文本 HTML（与旧版纯文本 / Markdown 区分） */
export function isStepsLikelyHtml(s) {
return /<\s*(p|div|br|img|span|ul|ol|li|h[1-6]|table|strong|em)\b/i.test(String(s || '').trim())
}
/** 将 HTML 中 img 的 src 改写为可访问地址（开发环境 /uploads → 5010） */
export function rewriteImgSrcsInHtml(html) {
return String(html || '').replace(/(<img\b[^>]*\bsrc\s*=\s*)(["'])([^"']*)\2/gi, function (_m, pre, q, src) {
const fixed = rewriteBugImageUrlForAccess(normalizeUploadPathSlashes(src))
return pre + q + escapeHtmlAttr(fixed) + q
})
}
/**
* 旧数据（纯文本 / Markdown 图片）转为 wangEditor 可用的 HTML
*/
export function legacyStepsToEditorHtml(raw) {
const s = String(raw || '')
if (!s.trim()) return BUG_STEPS_DEFAULT_HTML
if (isStepsLikelyHtml(s)) return rewriteImgSrcsInHtml(s)
const re = getBugStepImageMarkdownRegex()
let out = ''
let last = 0
let m
re.lastIndex = 0
while ((m = re.exec(s)) !== null) {
const text = s.slice(last, m.index)
if (text) {
out += '<p>' + escapeHtml(text).replace(/\n/g, '<br/>') + '</p>'
}
const src = rewriteBugImageUrlForAccess(normalizeUploadPathSlashes(m[1]))
out += '<p><img src="' + escapeHtmlAttr(src) + '" style="max-width:100%;"/></p>'
last = m.index + m[0].length
}
const tail = s.slice(last)
if (tail) {
out += '<p>' + escapeHtml(tail).replace(/\n/g, '<br/>') + '</p>'
}
return out || BUG_STEPS_DEFAULT_HTML
}

39
src/utils/lastProductProjectCache.js Normal file
View File

@@ -0,0 +1,39 @@
/**
* 全局「最近选择的产品 + 项目」缓存（localStorage），供 Bug 列表、用例、计划、报告等共用。
* 兼容旧 key：effekt_bug_list_last_product_project
*/
export const LAST_PRODUCT_PROJECT_CACHE_KEY = 'effekt_last_product_project'
const LEGACY_BUG_LIST_CACHE_KEY = 'effekt_bug_list_last_product_project'
export function readLastProductProjectCache() {
try {
let raw = localStorage.getItem(LAST_PRODUCT_PROJECT_CACHE_KEY)
if (!raw) raw = localStorage.getItem(LEGACY_BUG_LIST_CACHE_KEY)
if (!raw) return null
const o = JSON.parse(raw)
if (!o || typeof o !== 'object') return null
return { productId: o.productId, projectId: o.projectId }
} catch (e) {
return null
}
}
export function saveLastProductProjectCache(productId, projectId) {
if (productId === '' || productId === undefined || productId === null) return
if (projectId === '' || projectId === undefined || projectId === null) return
try {
const payload = JSON.stringify({ productId, projectId })
localStorage.setItem(LAST_PRODUCT_PROJECT_CACHE_KEY, payload)
if (localStorage.getItem(LEGACY_BUG_LIST_CACHE_KEY)) {
localStorage.removeItem(LEGACY_BUG_LIST_CACHE_KEY)
}
} catch (e) {
// quota / 隐私模式等忽略
}
}
export function pickIdFromOptions(options, rawId) {
const row = (options || []).find(p => String(p.id) === String(rawId))
return row ? row.id : rawId
}

7
src/utils/request.js
View File

@@ -30,10 +30,17 @@ service.interceptors.response.use(
// 兼容后端返回结构：{ success, code, message, data }
if (data && data.code === 500) {
Message.error('服务异常')
return Promise.reject(new Error(data.message || '服务异常'))
} else if (data && data.code === 451) {
router.push({ name: 'login' })
Message.error(data.message || '登录已失效，请重新登录')
return Promise.reject(new Error(data.message || '登录已失效'))
} else if (data && data.success === false) {
Message.error(data.message || '请求失败')
return Promise.reject(new Error(data.message || '请求失败'))
} else if (data && data.code !== undefined && data.code !== 20000) {
Message.error(data.message || '请求失败')
return Promise.reject(new Error(data.message || '请求失败'))
} else {
return response.data
}