Compare commits

...

4 Commits

Author SHA1 Message Date
zhangrongliang
f3476a8eec fix: menu 和 roles 的交互异常 2026-04-22 10:40:32 +08:00
qiaoxinjiu
4395d9fb22 增加测试平台功能,系统设置,支持多个角色,分配菜单 2026-04-22 10:00:17 +08:00
qiaoxinjiu
6d5d69cbde 把环境改为下拉框选择的形式 2026-04-15 18:02:41 +08:00
qiaoxinjiu
8807bc0762 把环境改为下拉框选择的形式 2026-04-15 18:01:40 +08:00
45 changed files with 22348 additions and 13092 deletions

View File

@@ -0,0 +1,129 @@
# 前端实现计划:测试平台页面与接口
## 1. 现状确认
- 当前项目不是 React 18 + TypeScript而是 **Vue 2 + Element UI + vue-router + vuex + axios**
- 已有页面以“效能平台/造数工具”为主,目录集中在:
- `src/components/`
- `src/api/`
- `src/router/index.js`
- 已存在一套造数相关接口封装:`src/api/CreateDtapi.js`
- 已存在基础布局页:`src/components/Home.vue`
- 因此本次应遵循**现有 Vue 2 结构**落地,不直接按你给出的 React 目录硬切,否则与当前代码库不兼容。
## 2. 实施目标
按你提供的详细设计,在当前项目结构下补齐并升级前端代码,重点实现:
- 测试平台导航结构
- 项目/用例/计划/报告/造数 五大功能入口页面
- 对应 API 封装层
- 页面级列表、详情、表单、执行、报告查看等基础交互
- 复用当前 Element UI 风格,保持现有代码可运行
## 3. 实施范围拆分
### 阶段 A基础设施与路由改造
1. 梳理现有路由与导航。
2. 扩展左侧菜单,新增模块入口:
- 项目管理
- 用例管理
- 测试计划
- 测试报告
- 造数工厂
3.`src/router/index.js` 注册对应页面路由。
4. 保留现有造数页面入口,避免破坏已有功能。
### 阶段 BAPI 服务层补齐
1. 新增 API 文件,按你给出的接口定义封装:
- `src/api/projectApi.js`
- `src/api/caseApi.js`
- `src/api/planApi.js`
- `src/api/reportApi.js`
- `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}/reports`
- `/api/v1/projects/{projectId}/data/*`
4. 对分页、详情、创建、更新、执行、导出等接口做最小可用封装。
### 阶段 C页面骨架实现
`src/components/` 下新增测试平台模块页面,优先做可运行页面骨架与核心交互:
1. 项目模块
- `src/components/TestPlatform/Project/ProjectList.vue`
- `src/components/TestPlatform/Project/ProjectDetail.vue`
- `src/components/TestPlatform/Project/ProjectSettings.vue`
2. 用例模块
- `src/components/TestPlatform/Case/CaseList.vue`
- `src/components/TestPlatform/Case/CaseEditor.vue`
- `src/components/TestPlatform/Case/CaseReview.vue`
3. 测试计划模块
- `src/components/TestPlatform/Plan/PlanList.vue`
- `src/components/TestPlatform/Plan/PlanBuilder.vue`
- `src/components/TestPlatform/Plan/PlanExecute.vue`
- `src/components/TestPlatform/Plan/PlanProgress.vue`
4. 报告模块
- `src/components/TestPlatform/Report/ReportList.vue`
- `src/components/TestPlatform/Report/ReportViewer.vue`
5. 造数模块升级
- 保留现有 `CreateData/*`
- 新增测试平台语义下页面:
- `src/components/TestPlatform/DataFactory/BuilderList.vue`
- `src/components/TestPlatform/DataFactory/BuilderEditor.vue`
- `src/components/TestPlatform/DataFactory/TaskHistory.vue`
- `src/components/TestPlatform/DataFactory/MockService.vue`
### 阶段 D公共组件抽取
新增可复用基础组件,减少页面重复:
- `src/components/TestPlatform/common/JsonViewer.vue`
- `src/components/TestPlatform/common/KeyValueDescriptions.vue`
- `src/components/TestPlatform/common/PageSection.vue`
### 阶段 E联调友好处理
1. 页面初版支持后端未完成时的容错:
- 空数据态
- 请求失败提示
- 默认 projectId 占位
2. 不引入新依赖,避免额外安装。
3. 保持接口函数独立,后续联调时只需替换 URL 或参数格式。
## 4. 执行顺序
1. 先改路由与主页导航。
2. 再补 API 封装。
3. 再按模块逐步落页面:
- 项目
- 用例
- 计划
- 报告
- 造数
4. 最后做公共组件复用与样式收口。
## 5. 每阶段交付物
- 阶段 A可点击进入的菜单与路由
- 阶段 B完整接口文件
- 阶段 C各模块页面可打开、可发请求、可展示表格/表单
- 阶段 D重复 UI 收敛
- 阶段 E整体自检确保不破坏原有功能
## 6. 风险与约束
- 当前代码库是旧版 Vue 2 工程,不能直接生成 React/TSX 代码。
- 你的接口设计是目标态,实际后端返回结构可能与设计不完全一致,因此前端会适当做字段兼容。
- 由于当前 `request.js` 已固定 `baseURL`,本次先复用,不额外改动接口基础配置,避免影响现有功能。
## 7. 本次建议执行策略
按“先骨架、再细化”的方式推进:
- 第一步完成导航、路由、API 文件、页面骨架
- 第二步:优先把列表页和详情/编辑页做成可联调版本
- 第三步:再补计划执行、报告查看、造数编排等复杂交互
## 8. 下一步实际执行内容
获批后,我将从以下顺序开始落地:
1. 修改 `src/components/Home.vue` 增加测试平台菜单
2. 修改 `src/router/index.js` 注册测试平台路由
3. 新增五类 API 文件
4. 新增项目/用例/计划/报告/造数页面骨架
5. 检查并修正页面间跳转与基础请求

View File

@@ -23,7 +23,7 @@ pipeline {
DEPLOY_PORT = '22'
DEPLOY_USER = 'user'
CONTAINER_NAME = 'effekt-interface-frontend'
HOST_PORT = '8080'
HOST_PORT = '8881'
CONTAINER_PORT = '80'
}

View File

@@ -10,7 +10,12 @@ module.exports = {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
proxyTable: {
'/it/api': {
target: 'http://192.168.11.46:5010',
changeOrigin: true
}
},
// Various Dev Server settings
// host: '172.19.29.63', // can be overwritten by process.env.HOST
@@ -18,7 +23,7 @@ module.exports = {
port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
notifyOnErrors: false,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

17325
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -5,16 +5,30 @@
</template>
<script>
import { userGetAdvance } from '@/api/Userapi'
import { getRoleList } from '@/api/rbacApi'
export default {
name: 'App',
mounted() {
const userinfo = JSON.parse(localStorage.getItem('userinfo'))
if (userinfo) {
userGetAdvance({ userId: userinfo.userId }).then(data => {
this.$store.commit('SetRole', data.data.userStatus)
})
const authUser = JSON.parse(localStorage.getItem('authUser') || 'null')
const userMenus = JSON.parse(localStorage.getItem('userMenus') || '[]')
if (authUser) {
this.$store.commit('SetCurrentUser', authUser)
this.$store.commit('SetRole', authUser.roleIds || [])
this.$store.commit('SetUserMenus', userMenus)
this.loadUserMenus(authUser)
}
},
methods: {
loadUserMenus(authUser) {
const roleId = authUser && authUser.roleIds && authUser.roleIds.length ? authUser.roleIds[0] : undefined
if (!roleId) {
return
}
getRoleList({ roleId }).then(res => {
const menus = res && Array.isArray(res.data) ? res.data : []
this.$store.commit('SetUserMenus', menus)
}).catch(() => {})
}
}
}

View File

@@ -3,7 +3,7 @@ import request from '@/utils/request'
// 造数任务列表
export function ItApiList(params) {
return request({
url: '/it/api/list',
url: '/list',
method: 'get',
params
})
@@ -12,7 +12,7 @@ export function ItApiList(params) {
// 执行造数任务
export function ItApiRun(data) {
return request({
url: '/it/api/execute',
url: '/execute',
method: 'post',
data
})
@@ -21,7 +21,7 @@ export function ItApiRun(data) {
// 新增/修改造数任务
export function ItApiCreate(data) {
return request({
url: '/it/api/create',
url: '/create',
method: 'post',
data
})
@@ -30,7 +30,7 @@ export function ItApiCreate(data) {
// 造数任务详情
export function ItApiDetail(params) {
return request({
url: '/it/api/detail',
url: '/detail',
method: 'get',
params
})
@@ -39,7 +39,7 @@ export function ItApiDetail(params) {
// 删除造数任务
export function ItApiDelete(data) {
return request({
url: '/it/api/delete',
url: '/delete',
method: 'post',
data
})

View File

@@ -1,20 +1,18 @@
import request from '@/utils/request'
/*注册模块*/
//注册提交用户名
export function Register(data) {
return request({
url: '/Register',
url: '/auth/register',
method: 'post',
data
})
}
/*登录功能*/
//登录
export function Login(data) {
return request({
url: '/Login',
url: '/auth/login',
method: 'post',
data
})

122
src/api/caseApi.js Normal file
View File

@@ -0,0 +1,122 @@
import request from '@/utils/request'
export function getModuleTree(params) {
return request({
url: '/module/tree',
method: 'get',
params
})
}
export function createModule(data) {
return request({
url: '/module/create',
method: 'post',
data
})
}
export function updateModule(data) {
return request({
url: '/module/update',
method: 'post',
data
})
}
export function deleteModule(data) {
return request({
url: '/module/delete',
method: 'post',
data
})
}
export function getCaseList(projectId, params) {
return request({
url: '/case/list',
method: 'get',
params: Object.assign({ project_id: projectId }, params || {})
})
}
export function getCaseDetail(projectId, caseId) {
return request({
url: '/case/detail',
method: 'get',
params: {
project_id: projectId,
id: caseId
}
})
}
export function createCase(projectId, data) {
return request({
url: '/case/create',
method: 'post',
data: Object.assign({ project_id: projectId }, data)
})
}
export function updateCase(projectId, caseId, data) {
return request({
url: '/case/update',
method: 'post',
data: Object.assign({ project_id: projectId, id: caseId }, data)
})
}
export function deleteCase(projectId, caseId) {
return request({
url: '/case/delete',
method: 'post',
data: {
project_id: projectId,
id: caseId
}
})
}
export function createCaseSnapshot(projectId, caseId) {
return request({
url: '/case/snapshot/create',
method: 'post',
data: {
project_id: projectId,
case_id: caseId
}
})
}
export function getCaseSnapshotList(projectId, params) {
return request({
url: '/case/snapshot/list',
method: 'get',
params: Object.assign({ project_id: projectId, pageNo: 1, pageSize: 10 }, params || {})
})
}
export function submitCaseReview(projectId, caseId, data) {
return request({
url: '/case/review/create',
method: 'post',
data: Object.assign({ project_id: projectId, case_id: caseId }, data)
})
}
export function updateCaseReview(data) {
return request({
url: '/case/review/update',
method: 'post',
data
})
}
export function getCaseReviewList(projectId, params) {
return request({
url: '/case/review/list',
method: 'get',
params: Object.assign({ project_id: projectId, pageNo: 1, pageSize: 10 }, params || {})
})
}

66
src/api/dataFactoryApi.js Normal file
View File

@@ -0,0 +1,66 @@
import request from '@/utils/request'
export function getBuilderList(projectId, params) {
return request({
url: '/data/builder/list',
method: 'get',
params: Object.assign({ project_id: projectId, pageNo: 1, pageSize: 10 }, params || {})
})
}
export function getBuilderDetail(projectId, builderId) {
return request({
url: '/data/builder/detail',
method: 'get',
params: {
project_id: projectId,
id: builderId
}
})
}
export function createBuilder(projectId, data) {
return request({
url: '/data/builder/create',
method: 'post',
data: Object.assign({ project_id: projectId }, data)
})
}
export function updateBuilder(projectId, builderId, data) {
return request({
url: '/data/builder/update',
method: 'post',
data: Object.assign({ project_id: projectId, id: builderId }, data)
})
}
export function deleteBuilder(projectId, builderId) {
return request({
url: '/data/builder/delete',
method: 'post',
data: {
project_id: projectId,
id: builderId
}
})
}
export function executeBuilder(projectId, builderId, data) {
return request({
url: '/data/builder/execute',
method: 'post',
data: Object.assign({ project_id: projectId, builder_id: builderId }, data)
})
}
export function getDataTaskStatus(projectId, taskId) {
return request({
url: '/data/task/status',
method: 'get',
params: {
project_id: projectId,
task_id: taskId
}
})
}

98
src/api/planApi.js Normal file
View File

@@ -0,0 +1,98 @@
import request from '@/utils/request'
export function getPlanList(projectId, params) {
return request({
url: '/plan/list',
method: 'get',
params: Object.assign({ project_id: projectId }, params || {})
})
}
export function createPlan(projectId, data) {
return request({
url: '/plan/create',
method: 'post',
data: Object.assign({ project_id: projectId }, data)
})
}
export function updatePlan(projectId, planId, data) {
return request({
url: '/plan/update',
method: 'post',
data: Object.assign({ project_id: projectId, id: planId }, data)
})
}
export function deletePlan(projectId, planId) {
return request({
url: '/plan/delete',
method: 'post',
data: {
project_id: projectId,
id: planId
}
})
}
export function getPlanDetail(projectId, planId) {
return request({
url: '/plan/detail',
method: 'get',
params: {
project_id: projectId,
id: planId
}
})
}
export function createPlanRound(data) {
return request({
url: '/plan/round/create',
method: 'post',
data
})
}
export function getPlanRoundList(projectId, params) {
return request({
url: '/plan/round/list',
method: 'get',
params: Object.assign({ project_id: projectId }, params || {})
})
}
export function addPlanCases(projectId, planId, data) {
return request({
url: '/plan/case/add',
method: 'post',
data: Object.assign({ project_id: projectId, plan_id: planId }, data)
})
}
export function getPlanCaseList(projectId, planId, params) {
return request({
url: '/plan/case/list',
method: 'get',
params: Object.assign({ project_id: projectId, plan_id: planId, pageNo: 1, pageSize: 10 }, params || {})
})
}
export function executePlanCase(projectId, planId, planCaseId, data) {
return request({
url: '/plan/case/execute',
method: 'post',
data: Object.assign({ project_id: projectId, plan_id: planId, id: planCaseId }, data)
})
}
export function getPlanProgress(projectId, planId) {
return request({
url: '/plan/progress',
method: 'get',
params: {
project_id: projectId,
plan_id: planId
}
})
}

33
src/api/productApi.js Normal file
View File

@@ -0,0 +1,33 @@
import request from '@/utils/request'
export function getProductList(params) {
return request({
url: '/product/list',
method: 'get',
params: Object.assign({ pageNo: 1, pageSize: 10 }, params || {})
})
}
export function createProduct(data) {
return request({
url: '/product/create',
method: 'post',
data
})
}
export function updateProduct(data) {
return request({
url: '/product/update',
method: 'post',
data
})
}
export function deleteProduct(data) {
return request({
url: '/product/delete',
method: 'post',
data
})
}

91
src/api/projectApi.js Normal file
View File

@@ -0,0 +1,91 @@
import request from '@/utils/request'
export function getProjectList(params) {
return request({
url: '/project/list',
method: 'get',
params: Object.assign({ pageNo: 1, pageSize: 10 }, params || {})
})
}
export function getProjectDetail(projectId) {
return request({
url: '/project/detail',
method: 'get',
params: {
id: projectId
}
})
}
export function createProject(data) {
return request({
url: '/project/create',
method: 'post',
data
})
}
export function updateProject(data) {
return request({
url: '/project/update',
method: 'post',
data
})
}
export function deleteProject(data) {
return request({
url: '/project/delete',
method: 'post',
data
})
}
export function getProjectMembers(projectId, params) {
return request({
url: '/project/member/list',
method: 'get',
params: Object.assign({ project_id: projectId, pageNo: 1, pageSize: 10 }, params || {})
})
}
export function createProjectMember(data) {
return request({
url: '/project/member/create',
method: 'post',
data
})
}
export function getProjectEnvironments(projectId, params) {
return request({
url: '/environment/list',
method: 'get',
params: Object.assign({ project_id: projectId, pageNo: 1, pageSize: 10 }, params || {})
})
}
export function createEnvironment(data) {
return request({
url: '/environment/create',
method: 'post',
data
})
}
export function updateEnvironment(data) {
return request({
url: '/environment/update',
method: 'post',
data
})
}
export function deleteEnvironment(data) {
return request({
url: '/environment/delete',
method: 'post',
data
})
}

169
src/api/rbacApi.js Normal file
View File

@@ -0,0 +1,169 @@
import request from '@/utils/request'
export function getRoleList(params) {
return request({
url: '/role/list',
method: 'get',
params: params || {}
})
}
export function getRolePageList(params) {
return request({
url: '/role/page/list',
method: 'get',
params: Object.assign({ pageNo: 1, pageSize: 10 }, params || {})
})
}
export function getRoleDetail(roleId) {
return request({
url: '/role/detail',
method: 'get',
params: { roleId }
})
}
export function createRole(data) {
return request({
url: '/role/create',
method: 'post',
data
})
}
export function updateRole(data) {
return request({
url: '/role/update',
method: 'post',
data
})
}
export function deleteRole(data) {
return request({
url: '/role/delete',
method: 'post',
data
})
}
export function getRoleMenuTree(params) {
return request({
url: '/role/menu/tree',
method: 'get',
params: params || {}
})
}
export function getRoleMenuList(roleId) {
return request({
url: '/role/menu/list',
method: 'get',
params: { roleId }
})
}
export function assignRoleMenus(data) {
return request({
url: '/role/menu/assign',
method: 'post',
data
})
}
export function getUserList(params) {
return request({
url: '/user/list',
method: 'get',
params: Object.assign({ pageNo: 1, pageSize: 10 }, params || {})
})
}
export function getUserDetail(userId) {
return request({
url: '/user/detail',
method: 'get',
params: { userId }
})
}
export function createUser(data) {
return request({
url: '/user/create',
method: 'post',
data
})
}
export function updateUser(data) {
return request({
url: '/user/update',
method: 'post',
data
})
}
export function deleteUser(data) {
return request({
url: '/user/delete',
method: 'post',
data
})
}
export function getUserRoleList(userId) {
return request({
url: '/user/role/list',
method: 'get',
params: { userId }
})
}
export function assignUserRoles(data) {
return request({
url: '/user/role/assign',
method: 'post',
data
})
}
export function getMenuTree(params) {
return request({
url: '/menu/tree',
method: 'get',
params: params || {}
})
}
export function getMenuDetail(menuId) {
return request({
url: '/menu/detail',
method: 'get',
params: { menuId }
})
}
export function createMenu(data) {
return request({
url: '/menu/create',
method: 'post',
data
})
}
export function updateMenu(data) {
return request({
url: '/menu/update',
method: 'post',
data
})
}
export function deleteMenu(data) {
return request({
url: '/menu/delete',
method: 'post',
data
})
}

28
src/api/reportApi.js Normal file
View File

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

View File

@@ -16,7 +16,14 @@
</el-select>
</el-form-item>
<el-form-item label="运行环境" prop="runEnv">
<el-input v-model="form.runEnv" placeholder="请输入运行环境" style="width: 320px;"></el-input>
<el-select v-model="form.runEnv" placeholder="请输入运行环境" clearable style="width: 320px;">
<el-option
v-for="item in envOptions"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="运行分组" prop="runGroup">
<el-input v-model="form.runGroup" placeholder="请输入运行分组" style="width: 320px;"></el-input>
@@ -56,6 +63,7 @@ export default {
saving: false,
loading: false,
projectOptions: ['ZHYY', 'DLZ', 'JOYHUB', 'OA', 'APP'],
envOptions: ['dev', 'st', 'pre'],
form: {
project: '',
runEnv: '',
@@ -66,7 +74,7 @@ export default {
},
rules: {
project: [{required: true, message: '请选择项目名称', trigger: 'change'}],
runEnv: [{required: true, message: '请输入运行环境', trigger: 'blur'}],
runEnv: [{required: true, message: '请选择运行环境', trigger: 'change'}],
sql: [{required: true, message: '请输入sql语句', trigger: 'blur'}],
runGroup: [{required: true, message: '请输入运行分组', trigger: 'blur'}]
}
@@ -144,3 +152,4 @@ export default {
padding: 20px;
}
</style>

View File

@@ -17,12 +17,18 @@
</el-select>
</el-form-item>
<el-form-item label="环境">
<el-input
<el-select
v-model="queryForm.runEnv"
placeholder="请输入环境"
placeholder="请选择项目"
clearable
@keyup.enter.native="search()">
</el-input>
filterable>
<el-option
v-for="item in envOptions"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="创建人">
<el-input
@@ -131,7 +137,8 @@ export default {
creator: '',
runGroup: ''
},
projectOptions: ['ZHYY', 'DLZ', 'JOYHUB', 'OA', 'APP']
projectOptions: ['ZHYY', 'DLZ', 'JOYHUB', 'OA', 'APP'],
envOptions: ['dev', 'st', 'pre']
}
},
computed: {
@@ -375,3 +382,4 @@ export default {
color: #c4b5fd;
}
</style>

View File

@@ -10,29 +10,60 @@
text-color="#fff"
active-text-color="#ffd04b"
:router="true">
<el-menu-item index="/effekt">
<i class="el-icon-house"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-submenu index="create-tool">
<template v-for="menu in displayMenus">
<el-submenu v-if="menu.children && menu.children.length > 0" :index="menuIndex(menu)" :key="'sub-' + menuKey(menu)">
<template slot="title">
<i class="el-icon-setting"></i>
<span slot="title">造数工具</span>
<i :class="menuIcon(menu)"></i>
<span slot="title">{{ menu.name }}</span>
</template>
<el-menu-item index="/create/data">数据库造数</el-menu-item>
<el-menu-item index="/create/interface">接口造数</el-menu-item>
<template v-for="child in menu.children">
<!-- 处理可能有第三级菜单的情况 -->
<el-submenu v-if="child.children && child.children.length > 0" :index="menuIndex(child)" :key="'child-sub-' + menuKey(child)">
<template slot="title">
<i v-if="child.icon" :class="menuIcon(child)"></i>
<span slot="title">{{ child.name }}</span>
</template>
<el-menu-item v-for="subChild in child.children" :index="menuPath(subChild)" :key="'subchild-item-' + menuKey(subChild)">
<i v-if="subChild.icon" :class="menuIcon(subChild)"></i>
<span slot="title">{{ subChild.name }}</span>
</el-menu-item>
</el-submenu>
<!-- 只有两级菜单 -->
<el-menu-item v-else :index="menuPath(child)" :key="'child-item-' + menuKey(child)">
<i v-if="child.icon" :class="menuIcon(child)"></i>
<span slot="title">{{ child.name }}</span>
</el-menu-item>
</template>
</el-submenu>
<el-menu-item v-else :index="menuPath(menu)" :key="'item-' + menuKey(menu)">
<i :class="menuIcon(menu)"></i>
<span slot="title">{{ menu.name }}</span>
</el-menu-item>
</template>
</el-menu>
</div>
<el-container>
<el-header class="header" style="background-color: rgba(230, 226, 215, 0.9)">
<div class="header-icon" style="float: left;padding-left: 15px;padding-right: 15px">
<div class="header-left">
<div class="header-icon">
<i v-if="isCollapse" class="el-icon-s-unfold" style="font-size: 20px" @click="setCollapse"></i>
<i v-else class="el-icon-s-fold" style="font-size: 20px" @click="setCollapse"></i>
</div>
<div class="system-name" style="float: left">
<div class="system-name">
<span>{{ systemName }}</span>
</div>
</div>
<div class="header-user">
<el-dropdown v-if="currentUser" trigger="click" @command="handleUserCommand">
<span class="user-name-dropdown">
{{ displayName }}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span v-else class="login-label" @click="goLogin">登录</span>
</div>
</el-header>
<el-main>
<router-view class="main-form" name="Manage"></router-view>
@@ -51,9 +82,103 @@ export default {
systemName: '效能平台'
}
},
computed: {
currentUser() {
return this.$store.state.currentUser
},
userMenus() {
return this.$store.state.userMenus || []
},
displayMenus() {
if (!this.userMenus.length) {
return [{ name: '首页', path: '/effekt', icon: 'el-icon-house', children: [] }]
}
return this.filterMenus(this.userMenus)
},
displayName() {
if (!this.currentUser) {
return ''
}
return this.currentUser.username || this.currentUser.realName || '未命名用户'
}
},
methods: {
setCollapse() {
this.isCollapse = !this.isCollapse
},
goLogin() {
this.$router.push({ name: 'login' })
},
menuKey(item) {
return String(item.menuId || item.id || item.path || item.name)
},
menuIndex(item) {
return String(item.path || item.code || item.menuId || item.id || item.name)
},
menuPath(item) {
const pathMap = {
'/system/role': '/system/roles',
'/system/user': '/system/users',
'/system/menu': '/system/menus'
}
return pathMap[item.path] || item.path || '/effekt'
},
menuIcon(item) {
// 按照原来的静态菜单名称映射图标
const nameIconMap = {
'首页': 'el-icon-house',
'测试协作工作台': 'el-icon-s-operation',
'测试平台': 'el-icon-s-platform',
'产品管理': 'el-icon-box',
'项目管理': 'el-icon-s-management',
'用例管理': 'el-icon-document',
'测试计划': 'el-icon-date',
'测试报告': 'el-icon-data-line',
'测试工具': 'el-icon-s-tools',
'造数工具': 'el-icon-magic-stick',
'数据库造数': 'el-icon-coin',
'造数工厂': 'el-icon-set-up',
'系统管理': 'el-icon-setting',
'角色管理': 'el-icon-user-solid',
'用户管理': 'el-icon-user',
'权限管理': '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'
}
// 优先级:先匹配名称,再匹配接口中指定的 icon最后返回默认图标 el-icon-menu
if (item.name && nameIconMap[item.name]) {
return nameIconMap[item.name]
}
return iconMap[item.icon] || (item.icon && item.icon.indexOf('el-icon-') === 0 ? item.icon : 'el-icon-menu')
},
filterMenus(menus) {
return (menus || []).filter(item => item.visible !== 0 && item.status !== 0).map(item => {
const children = this.filterMenus(item.children || [])
return Object.assign({}, item, { children })
}).filter(item => {
if (item.children && item.children.length) {
return true
}
return !!item.path && !!this.menuPath(item)
})
},
handleUserCommand(command) {
if (command === 'logout') {
localStorage.removeItem('authUser')
localStorage.removeItem('accessToken')
localStorage.removeItem('userMenus')
this.$store.commit('ClearCurrentUser')
this.$message.success('已退出登录')
this.$router.push({ name: 'login' })
}
}
}
}
@@ -73,14 +198,37 @@ export default {
.header {
height: 60px;
line-height: 60px
line-height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
}
.el-header {
padding-left: 0;
padding: 0 20px 0 0;
}
.el-menu-vertical-demo {
height: 100%;
}
.header-left {
display: flex;
align-items: center;
}
.header-icon {
padding-left: 15px;
padding-right: 15px;
}
.header-user {
color: #333;
font-size: 14px;
}
.login-label {
color: #409EFF;
cursor: pointer;
}
</style>

View File

@@ -0,0 +1,322 @@
<template>
<div class="page-wrap">
<page-section title="菜单管理">
<template slot="extra">
<el-button type="primary" size="small" @click="openCreate(0)">新建菜单</el-button>
</template>
<el-form :inline="true" :model="queryForm" size="small" @submit.native.prevent>
<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="fetchTree">查询</el-button>
<el-button @click="resetSearch">重置</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
:data="tableData"
border
row-key="id"
default-expand-all
:tree-props="{ children: 'children' }"
style="width: 100%; margin-top: 16px;">
<el-table-column prop="name" label="菜单名称" min-width="180"></el-table-column>
<el-table-column prop="code" label="菜单编码" min-width="160"></el-table-column>
<el-table-column prop="type" label="类型" width="90">
<template slot-scope="scope">{{ formatType(scope.row.type) }}</template>
</el-table-column>
<el-table-column prop="path" label="路径" min-width="180" show-overflow-tooltip></el-table-column>
<el-table-column prop="component" label="组件" min-width="180" show-overflow-tooltip></el-table-column>
<el-table-column label="权限标识" min-width="160" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.permission_code || scope.row.permissionCode }}</template>
</el-table-column>
<el-table-column prop="sort" label="排序" width="80"></el-table-column>
<el-table-column prop="visible" label="显示" width="80">
<template slot-scope="scope">{{ scope.row.visible === 0 ? '否' : '是' }}</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="80">
<template slot-scope="scope">{{ scope.row.status === 0 ? '禁用' : '启用' }}</template>
</el-table-column>
<el-table-column label="操作" width="220" fixed="right">
<template slot-scope="scope">
<el-button type="text" @click="openCreate(scope.row.id)">新增下级</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>
</page-section>
<el-dialog :title="dialogMode === 'create' ? '新建菜单' : '编辑菜单'" :visible.sync="dialogVisible" width="620px" @close="resetDialogForm">
<el-form ref="menuForm" :model="menuForm" :rules="menuRules" label-width="100px" size="small">
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="上级菜单" prop="parentId">
<el-input :value="getParentName(menuForm.parentId)" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="菜单类型" prop="type">
<el-select v-model="menuForm.type" placeholder="请选择类型" style="width: 100%;">
<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-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="菜单名称" prop="name">
<el-input v-model.trim="menuForm.name" maxlength="64" placeholder="请输入菜单名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="菜单编码" prop="code">
<el-input v-model.trim="menuForm.code" maxlength="64" placeholder="请输入菜单编码"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="访问路径" prop="path">
<el-input v-model.trim="menuForm.path" maxlength="128" placeholder="请输入访问路径"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="组件路径" prop="component">
<el-input v-model.trim="menuForm.component" maxlength="128" placeholder="请输入组件路径"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="图标" prop="icon">
<el-input v-model.trim="menuForm.icon" maxlength="64" placeholder="请输入图标"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="权限标识" prop="permissionCode">
<el-input v-model.trim="menuForm.permissionCode" maxlength="64" placeholder="请输入权限标识"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="8">
<el-form-item label="排序" prop="sort">
<el-input-number v-model="menuForm.sort" :min="0" :max="9999" controls-position="right" style="width: 100%;"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="是否显示" prop="visible">
<el-select v-model="menuForm.visible" placeholder="请选择" style="width: 100%;">
<el-option label="是" :value="1"></el-option>
<el-option label="否" :value="0"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="状态" prop="status">
<el-select v-model="menuForm.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-col>
</el-row>
</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>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { createMenu, deleteMenu, getMenuTree, updateMenu } from '@/api/rbacApi'
const getDefaultForm = () => ({
menuId: undefined,
parentId: 0,
name: '',
code: '',
type: 2,
path: '',
component: '',
icon: '',
permissionCode: '',
sort: 0,
visible: 1,
status: 1
})
export default {
name: 'MenuManage',
components: { PageSection },
data() {
return {
loading: false,
submitting: false,
dialogVisible: false,
dialogMode: 'create',
queryForm: {
status: ''
},
menuForm: getDefaultForm(),
menuRules: {
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入菜单编码', trigger: 'blur' }],
type: [{ required: true, message: '请选择菜单类型', trigger: 'change' }],
sort: [{ required: true, message: '请输入排序', trigger: 'change' }],
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
},
tableData: []
}
},
methods: {
fetchTree() {
this.loading = true
getMenuTree({ status: this.queryForm.status }).then(res => {
const data = res && res.data ? res.data : res || []
this.tableData = Array.isArray(data) ? data : (data.list || data.items || [])
}).catch(() => {
this.tableData = []
}).finally(() => {
this.loading = false
})
},
resetSearch() {
this.queryForm = {
status: ''
}
this.fetchTree()
},
formatType(type) {
const map = {
1: '目录',
2: '菜单',
3: '按钮'
}
return map[type] || type
},
flattenMenus(list, result) {
(list || []).forEach(item => {
result.push(item)
if (item.children && item.children.length) {
this.flattenMenus(item.children, result)
}
})
},
getParentName(parentId) {
if (!parentId) {
return '顶级菜单'
}
const result = []
this.flattenMenus(this.tableData, result)
const target = result.find(item => item.id === parentId)
return target ? target.name : '顶级菜单'
},
openCreate(parentId) {
this.dialogMode = 'create'
this.dialogVisible = true
this.$nextTick(() => {
this.menuForm = Object.assign(getDefaultForm(), { parentId: parentId || 0, sort: 0 })
if (this.$refs.menuForm) {
this.$refs.menuForm.clearValidate()
}
})
},
openEdit(row) {
this.dialogMode = 'edit'
this.dialogVisible = true
this.$nextTick(() => {
this.menuForm = Object.assign(getDefaultForm(), row, {
menuId: row.menuId || row.id,
parentId: row.parentId !== undefined ? row.parentId : (row.parent_id || 0),
permissionCode: row.permissionCode !== undefined ? row.permissionCode : (row.permission_code || ''),
sort: row.sort !== undefined && row.sort !== null ? Number(row.sort) : 0
})
if (this.$refs.menuForm) {
this.$refs.menuForm.clearValidate()
}
})
},
resetDialogForm() {
this.menuForm = getDefaultForm()
this.submitting = false
this.$nextTick(() => {
if (this.$refs.menuForm) {
this.$refs.menuForm.resetFields()
}
})
},
submitForm() {
this.$refs.menuForm.validate(valid => {
if (!valid) {
return
}
this.submitting = true
const basePayload = {
parentId: Number(this.menuForm.parentId || 0),
name: this.menuForm.name,
code: this.menuForm.code,
type: Number(this.menuForm.type),
path: this.menuForm.path,
component: this.menuForm.component,
icon: this.menuForm.icon,
permissionCode: this.menuForm.permissionCode,
sort: Number(this.menuForm.sort || 0),
visible: Number(this.menuForm.visible),
status: Number(this.menuForm.status)
}
const payload = this.dialogMode === 'create'
? basePayload
: Object.assign({ menuId: Number(this.menuForm.menuId) }, basePayload)
const request = this.dialogMode === 'create'
? createMenu(payload)
: updateMenu(payload)
request.then(res => {
if (res && res.code === 20000) {
this.$message.success((res && res.message) || (this.dialogMode === 'create' ? '菜单创建成功' : '菜单更新成功'))
this.dialogVisible = false
this.fetchTree()
return
}
this.$message.error((res && res.message) || (this.dialogMode === 'create' ? '菜单创建失败' : '菜单更新失败'))
}).finally(() => {
this.submitting = false
})
})
},
handleDelete(row) {
this.$confirm('确认删除该菜单吗?', '提示', {
type: 'warning'
}).then(() => {
deleteMenu({ menuId: row.menuId || row.id }).then(res => {
if (res && res.code !== 20000) {
this.$message.error((res && res.message) || '菜单删除失败')
return
}
this.$message.success((res && res.message) || '菜单删除成功')
this.fetchTree()
})
}).catch(() => {})
}
},
created() {
this.fetchTree()
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>

View File

@@ -0,0 +1,352 @@
<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="queryForm.keyword" 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="140"></el-table-column>
<el-table-column prop="name" label="角色名称" min-width="160"></el-table-column>
<el-table-column prop="description" label="描述" min-width="220" show-overflow-tooltip></el-table-column>
<el-table-column prop="is_system" label="系统角色" width="100">
<template slot-scope="scope">{{ (scope.row.is_system !== undefined ? scope.row.is_system : scope.row.isSystem) === 1 ? '是' : '否' }}</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template slot-scope="scope">{{ scope.row.status === 0 ? '禁用' : '启用' }}</template>
</el-table-column>
<el-table-column label="操作" width="240" fixed="right">
<template slot-scope="scope">
<el-button type="text" @click="openAssignMenus(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="520px" @close="resetDialogForm">
<el-form ref="roleForm" :model="roleForm" :rules="roleRules" label-width="94px" size="small">
<el-form-item label="角色编码" prop="code">
<el-input v-model.trim="roleForm.code" maxlength="64" placeholder="请输入角色编码" :disabled="dialogMode === 'edit'"></el-input>
</el-form-item>
<el-form-item label="角色名称" prop="name">
<el-input v-model.trim="roleForm.name" maxlength="64" placeholder="请输入角色名称"></el-input>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="roleForm.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="isSystem">
<el-select v-model="roleForm.isSystem" placeholder="请选择" style="width: 100%;" :disabled="dialogMode === 'edit'">
<el-option label="否" :value="0"></el-option>
<el-option label="是" :value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model.trim="roleForm.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="620px" @close="resetAssignForm">
<el-form label-width="90px" size="small">
<el-form-item label="角色">
<el-input :value="assignRoleName" disabled></el-input>
</el-form-item>
<el-form-item label="菜单权限">
<el-tree
ref="menuTree"
:data="menuTreeData"
node-key="id"
show-checkbox
default-expand-all
:props="treeProps">
</el-tree>
</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="submitAssignMenus">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { assignRoleMenus, createRole, deleteRole, getMenuTree, getRoleMenuList, getRoleMenuTree, getRolePageList, updateRole } from '@/api/rbacApi'
const getDefaultForm = () => ({
roleId: undefined,
code: '',
name: '',
description: '',
status: 1,
isSystem: 0,
createdBy: 1
})
export default {
name: 'RoleManage',
components: { PageSection },
data() {
return {
loading: false,
submitting: false,
assignSubmitting: false,
dialogVisible: false,
assignDialogVisible: false,
dialogMode: 'create',
queryForm: {
keyword: '',
status: ''
},
roleForm: getDefaultForm(),
roleRules: {
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
},
pageNo: 1,
pageSize: 10,
total: 0,
tableData: [],
assignRoleId: undefined,
assignRoleName: '',
menuTreeData: [],
treeProps: {
children: 'children',
label: 'name'
}
}
},
methods: {
fetchList() {
this.loading = true
getRolePageList({
pageNo: this.pageNo,
pageSize: this.pageSize,
keyword: this.queryForm.keyword,
status: this.queryForm.status
}).then(res => {
const data = res && res.data ? res.data : res || {}
this.tableData = Array.isArray(data) ? data : (data.items || data.list || data.data || [])
this.total = Array.isArray(data) ? data.length : (data.total || data.totalCount || this.tableData.length)
}).catch(() => {
this.tableData = []
this.total = 0
}).finally(() => {
this.loading = false
})
},
handleSearch() {
this.pageNo = 1
this.fetchList()
},
resetSearch() {
this.queryForm = {
keyword: '',
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.roleForm = getDefaultForm()
if (this.$refs.roleForm) {
this.$refs.roleForm.clearValidate()
}
})
},
openEdit(row) {
this.dialogMode = 'edit'
this.dialogVisible = true
this.$nextTick(() => {
this.roleForm = Object.assign(getDefaultForm(), row, {
roleId: row.roleId || row.id,
isSystem: row.isSystem !== undefined ? row.isSystem : (row.is_system || 0)
})
if (this.$refs.roleForm) {
this.$refs.roleForm.clearValidate()
}
})
},
openAssignMenus(row) {
this.assignRoleId = row.roleId || row.id
this.assignRoleName = row.name
this.assignDialogVisible = true
Promise.all([getMenuTree({}), getRoleMenuList(this.assignRoleId)]).then(([menuRes, assignRes]) => {
const menuData = menuRes && menuRes.data ? menuRes.data : menuRes || []
this.menuTreeData = Array.isArray(menuData) ? menuData : (menuData.list || menuData.items || [])
const assignData = assignRes && assignRes.data ? assignRes.data : assignRes || {}
const menuIds = Array.isArray(assignData)
? assignData.map(item => item.menuId || item.id)
: (assignData.menuIds || assignData.menu_ids || [])
this.$nextTick(() => {
if (this.$refs.menuTree) {
this.$refs.menuTree.setCheckedKeys(menuIds)
}
})
}).catch(() => {
this.menuTreeData = []
})
},
resetDialogForm() {
this.roleForm = getDefaultForm()
this.submitting = false
this.$nextTick(() => {
if (this.$refs.roleForm) {
this.$refs.roleForm.resetFields()
}
})
},
resetAssignForm() {
this.assignSubmitting = false
this.assignRoleId = undefined
this.assignRoleName = ''
this.menuTreeData = []
},
submitForm() {
this.$refs.roleForm.validate(valid => {
if (!valid) {
return
}
this.submitting = true
const payload = this.dialogMode === 'create'
? this.roleForm
: {
roleId: this.roleForm.roleId,
name: this.roleForm.name,
description: this.roleForm.description,
status: this.roleForm.status
}
const request = this.dialogMode === 'create'
? createRole(payload)
: updateRole(payload)
request.then(res => {
if (res && res.code === 20000) {
this.$message.success((res && res.message) || (this.dialogMode === 'create' ? '角色创建成功' : '角色更新成功'))
this.dialogVisible = false
this.pageNo = 1
this.fetchList()
return
}
this.$message.error((res && res.message) || (this.dialogMode === 'create' ? '角色创建失败' : '角色更新失败'))
}).finally(() => {
this.submitting = false
})
})
},
submitAssignMenus() {
this.assignSubmitting = true
const checkedKeys = this.$refs.menuTree ? this.$refs.menuTree.getCheckedKeys() : []
const halfCheckedKeys = this.$refs.menuTree ? this.$refs.menuTree.getHalfCheckedKeys() : []
const menuIds = Array.from(new Set([].concat(checkedKeys, halfCheckedKeys)))
assignRoleMenus({
roleId: this.assignRoleId,
menuIds
}).then(res => {
if (res && res.code !== 20000) {
this.$message.error((res && res.message) || '分配菜单失败')
return
}
this.$message.success((res && res.message) || '分配菜单成功')
this.assignDialogVisible = false
}).finally(() => {
this.assignSubmitting = false
})
},
handleDelete(row) {
this.$confirm('确认删除该角色吗?', '提示', {
type: 'warning'
}).then(() => {
deleteRole({ roleId: row.roleId || row.id }).then(res => {
if (res && 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(() => {})
}
},
created() {
this.fetchList()
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>
created() {
this.fetchList()
}
}
<style scoped>
.page-wrap {
padding: 20px;
}
</style>
reated() {
this.fetchList()
}
}
<style scoped>
.page-wrap {
padding: 20px;
}
</style>

View File

@@ -0,0 +1,358 @@
<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="queryForm.keyword" 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="username" label="用户名" min-width="140"></el-table-column>
<el-table-column prop="real_name" label="姓名" min-width="120">
<template slot-scope="scope">{{ scope.row.real_name || scope.row.realName }}</template>
</el-table-column>
<el-table-column prop="mobile" label="手机号" min-width="140"></el-table-column>
<el-table-column prop="email" label="邮箱" min-width="180" show-overflow-tooltip></el-table-column>
<el-table-column label="角色" min-width="180" show-overflow-tooltip>
<template slot-scope="scope">{{ getRoleNames(scope.row) }}</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template slot-scope="scope">{{ scope.row.status === 0 ? '禁用' : '启用' }}</template>
</el-table-column>
<el-table-column label="操作" width="240" 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="620px" @close="resetDialogForm">
<el-form ref="userForm" :model="userForm" :rules="userRules" label-width="100px" size="small">
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="用户名" prop="username">
<el-input v-model.trim="userForm.username" maxlength="64" placeholder="请输入用户名" :disabled="dialogMode === 'edit'"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="密码" prop="password">
<el-input v-model.trim="userForm.password" maxlength="64" placeholder="请输入密码" :disabled="dialogMode === 'edit'"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="姓名" prop="realName">
<el-input v-model.trim="userForm.realName" maxlength="64" placeholder="请输入姓名"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号" prop="mobile">
<el-input v-model.trim="userForm.mobile" maxlength="20" placeholder="请输入手机号"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model.trim="userForm.email" maxlength="128" placeholder="请输入邮箱"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态" prop="status">
<el-select v-model="userForm.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-col>
</el-row>
<el-form-item label="头像" prop="avatar">
<el-input v-model.trim="userForm.avatar" maxlength="255" 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="resetAssignForm">
<el-form label-width="90px" size="small">
<el-form-item label="用户">
<el-input :value="assignUserName" disabled></el-input>
</el-form-item>
<el-form-item label="角色选择">
<el-select v-model="selectedRoleIds" multiple filterable clearable collapse-tags 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 { assignUserRoles, createUser, deleteUser, getRoleList, getUserList, getUserRoleList, updateUser } from '@/api/rbacApi'
const getDefaultForm = () => ({
userId: undefined,
username: '',
password: '',
realName: '',
mobile: '',
email: '',
avatar: '',
status: 1,
createdBy: 1
})
export default {
name: 'UserManage',
components: { PageSection },
data() {
return {
loading: false,
submitting: false,
assignSubmitting: false,
dialogVisible: false,
assignDialogVisible: false,
dialogMode: 'create',
queryForm: {
keyword: '',
status: ''
},
userForm: getDefaultForm(),
userRules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
realName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
},
pageNo: 1,
pageSize: 10,
total: 0,
tableData: [],
roleOptions: [],
assignUserId: undefined,
assignUserName: '',
selectedRoleIds: []
}
},
methods: {
fetchList() {
this.loading = true
getUserList({
pageNo: this.pageNo,
pageSize: this.pageSize,
keyword: this.queryForm.keyword,
status: this.queryForm.status
}).then(res => {
const data = res && res.data ? res.data : res || {}
this.tableData = data.items || data.list || data.data || []
this.total = data.total || data.totalCount || this.tableData.length
}).catch(() => {
this.tableData = []
this.total = 0
}).finally(() => {
this.loading = false
})
},
fetchRoleOptions() {
return getRoleList({ pageNo: 1, pageSize: 9999 }).then(res => {
const data = res && res.data ? res.data : res || {}
const list = data.items || data.list || data.data || []
this.roleOptions = list.map(item => ({
id: item.id || item.roleId,
name: item.name
}))
}).catch(() => {
this.roleOptions = []
})
},
getRoleNames(row) {
const roleNames = row.role_names || row.roleNames || []
return Array.isArray(roleNames) ? roleNames.join('') : ''
},
handleSearch() {
this.pageNo = 1
this.fetchList()
},
resetSearch() {
this.queryForm = {
keyword: '',
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.userForm = getDefaultForm()
if (this.$refs.userForm) {
this.$refs.userForm.clearValidate()
}
})
},
openEdit(row) {
this.dialogMode = 'edit'
this.dialogVisible = true
this.$nextTick(() => {
this.userForm = Object.assign(getDefaultForm(), row, {
userId: row.userId || row.id,
realName: row.realName || row.real_name || '',
password: ''
})
if (this.$refs.userForm) {
this.$refs.userForm.clearValidate()
}
})
},
openAssignRoles(row) {
this.assignUserId = row.userId || row.id
this.assignUserName = row.username
this.assignDialogVisible = true
Promise.all([this.fetchRoleOptions(), getUserRoleList(this.assignUserId)]).then(([, res]) => {
const data = res && res.data ? res.data : res || {}
this.selectedRoleIds = data.roleIds || data.role_ids || []
}).catch(() => {
this.selectedRoleIds = []
})
},
resetDialogForm() {
this.userForm = getDefaultForm()
this.submitting = false
this.$nextTick(() => {
if (this.$refs.userForm) {
this.$refs.userForm.resetFields()
}
})
},
resetAssignForm() {
this.assignSubmitting = false
this.assignUserId = undefined
this.assignUserName = ''
this.selectedRoleIds = []
},
submitForm() {
this.$refs.userForm.validate(valid => {
if (!valid) {
return
}
this.submitting = true
const payload = this.dialogMode === 'create'
? this.userForm
: {
userId: this.userForm.userId,
realName: this.userForm.realName,
mobile: this.userForm.mobile,
email: this.userForm.email,
avatar: this.userForm.avatar,
status: this.userForm.status
}
const request = this.dialogMode === 'create'
? createUser(payload)
: updateUser(payload)
request.then(res => {
if (res && res.code === 20000) {
this.$message.success((res && res.message) || (this.dialogMode === 'create' ? '用户创建成功' : '用户更新成功'))
this.dialogVisible = false
this.pageNo = 1
this.fetchList()
return
}
this.$message.error((res && res.message) || (this.dialogMode === 'create' ? '用户创建失败' : '用户更新失败'))
}).finally(() => {
this.submitting = false
})
})
},
submitAssignRoles() {
this.assignSubmitting = true
assignUserRoles({
userId: this.assignUserId,
roleIds: this.selectedRoleIds
}).then(res => {
if (res && res.code !== 20000) {
this.$message.error((res && res.message) || '分配角色失败')
return
}
this.$message.success((res && res.message) || '分配角色成功')
this.assignDialogVisible = false
this.fetchList()
}).finally(() => {
this.assignSubmitting = false
})
},
handleDelete(row) {
this.$confirm('确认删除该用户吗?', '提示', {
type: 'warning'
}).then(() => {
deleteUser({ userId: row.userId || row.id }).then(res => {
if (res && 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(() => {})
}
},
created() {
this.fetchList()
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>

View File

@@ -0,0 +1,116 @@
<template>
<div class="page-wrap">
<page-section :title="form.id ? '编辑用例' : '新建用例'">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" size="small">
<el-form-item label="项目ID">
<el-input v-model="projectId" style="width: 200px;"></el-input>
</el-form-item>
<el-form-item label="标题" prop="title">
<el-input v-model="form.title"></el-input>
</el-form-item>
<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-input v-model="stepsText" type="textarea" :rows="10"></el-input>
</el-form-item>
<el-form-item label="优先级">
<el-select v-model="form.priority">
<el-option label="P0" :value="0"></el-option>
<el-option label="P1" :value="1"></el-option>
<el-option label="P2" :value="2"></el-option>
<el-option label="P3" :value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="form.case_type">
<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="tagsText" placeholder="多个标签用逗号分隔"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="saving" @click="submitForm">保存</el-button>
<el-button @click="$router.push('/test-platform/cases')">返回</el-button>
</el-form-item>
</el-form>
</page-section>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { createCase, getCaseDetail, updateCase } from '@/api/caseApi'
export default {
name: 'CaseEditor',
components: { PageSection },
data() {
return {
saving: false,
projectId: this.$route.query.projectId || 1,
form: {
id: '',
title: '',
preconditions: '',
steps: [],
priority: 2,
case_type: 1,
tags: []
},
stepsText: '[]',
tagsText: '',
rules: {
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
steps: [{ required: true, message: '请输入步骤', trigger: 'change' }]
}
}
},
methods: {
fetchDetail() {
const caseId = this.$route.query.caseId
if (!caseId) {
return
}
getCaseDetail(this.projectId, caseId).then(res => {
const data = (res && res.data) || res || {}
this.form = Object.assign({}, this.form, data)
this.stepsText = JSON.stringify(data.steps || [], null, 2)
this.tagsText = (data.tags || []).join(',')
})
},
submitForm() {
try {
this.form.steps = JSON.parse(this.stepsText || '[]')
} catch (e) {
this.$message({ type: 'error', message: '步骤 JSON 格式错误' })
return
}
this.form.tags = this.tagsText ? this.tagsText.split(',').map(item => item.trim()).filter(Boolean) : []
this.saving = true
const request = this.form.id || this.$route.query.caseId
? updateCase(this.projectId, this.form.id || this.$route.query.caseId, this.form)
: createCase(this.projectId, this.form)
request.then(() => {
this.$message({ type: 'success', message: '保存成功' })
this.$router.push({ path: '/test-platform/cases', query: { projectId: this.projectId } })
}).finally(() => {
this.saving = false
})
}
},
created() {
this.fetchDetail()
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>

View File

@@ -0,0 +1,110 @@
<template>
<div class="page-wrap">
<page-section title="用例管理">
<template slot="extra">
<el-button type="primary" size="small" @click="goEditor()">新建用例</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-item>
<el-form-item label="关键词">
<el-input v-model="queryForm.keyword" clearable @keyup.enter.native="fetchList"></el-input>
</el-form-item>
<el-form-item label="优先级">
<el-select v-model="queryForm.priority" clearable>
<el-option label="P0" :value="0"></el-option>
<el-option label="P1" :value="1"></el-option>
<el-option label="P2" :value="2"></el-option>
<el-option label="P3" :value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="fetchList">查询</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="tableData" border style="margin-top: 16px;">
<el-table-column prop="case_key" label="用例编号" min-width="120"></el-table-column>
<el-table-column prop="title" label="标题" min-width="220"></el-table-column>
<el-table-column prop="priority" label="优先级" width="100"></el-table-column>
<el-table-column prop="case_type" label="类型" width="100"></el-table-column>
<el-table-column prop="status" label="状态" width="100"></el-table-column>
<el-table-column label="操作" width="240">
<template slot-scope="scope">
<el-button type="text" @click="goEditor(scope.row)">编辑</el-button>
<el-button type="text" @click="goReview(scope.row)">评审</el-button>
<el-button type="text" style="color: #F56C6C;" @click="remove(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>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { deleteCase, getCaseList } from '@/api/caseApi'
export default {
name: 'CaseList',
components: { PageSection },
data() {
return {
loading: false,
projectId: this.$route.query.projectId || 1,
queryForm: {
keyword: '',
priority: ''
},
tableData: []
}
},
methods: {
fetchList() {
this.loading = true
getCaseList(this.projectId, this.queryForm).then(res => {
const data = (res && res.data) || res || {}
this.tableData = data.items || data.list || []
}).catch(() => {
this.tableData = []
}).finally(() => {
this.loading = false
})
},
goEditor(row) {
this.$router.push({ path: '/test-platform/cases/editor', query: { projectId: this.projectId, caseId: row && row.id } })
},
goReview(row) {
this.$router.push({ path: '/test-platform/cases/review', query: { projectId: this.projectId, caseId: row.id } })
},
remove(row) {
this.$confirm('确认删除该用例吗?', '提示', { type: 'warning' }).then(() => {
deleteCase(this.projectId, row.id).then(() => {
this.$message({ type: 'success', message: '删除成功' })
this.fetchList()
})
}).catch(() => {})
}
},
created() {
this.fetchList()
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>

View File

@@ -0,0 +1,64 @@
<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>
</el-form-item>
<el-form-item label="用例ID">
<el-input v-model="caseId" disabled style="width: 200px;"></el-input>
</el-form-item>
<el-form-item label="评审人ID">
<el-input v-model="reviewersText" placeholder="多个 ID 用逗号分隔"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.comments" type="textarea" :rows="4"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="submitting" @click="submitReview">提交评审</el-button>
</el-form-item>
</el-form>
</page-section>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { submitCaseReview } from '@/api/caseApi'
export default {
name: 'CaseReview',
components: { PageSection },
data() {
return {
projectId: this.$route.query.projectId || 1,
caseId: this.$route.query.caseId || '',
reviewersText: '',
submitting: false,
form: {
comments: ''
}
}
},
methods: {
submitReview() {
const reviewer_ids = this.reviewersText.split(',').map(item => item.trim()).filter(Boolean)
this.submitting = true
submitCaseReview(this.projectId, this.caseId, {
reviewer_ids,
comments: this.form.comments
}).then(() => {
this.$message({ type: 'success', message: '评审提交成功' })
}).finally(() => {
this.submitting = false
})
}
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>

View File

@@ -0,0 +1,82 @@
<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>
</el-form-item>
<el-form-item label="名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="form.builder_type">
<el-option label="流程编排" :value="1"></el-option>
<el-option label="SQL" :value="2"></el-option>
<el-option label="脚本" :value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="描述">
<el-input v-model="form.description" type="textarea" :rows="3"></el-input>
</el-form-item>
<el-form-item label="定义(JSON)">
<el-input v-model="definitionText" type="textarea" :rows="14"></el-input>
</el-form-item>
<el-form-item label="输入Schema(JSON)">
<el-input v-model="inputSchemaText" type="textarea" :rows="8"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="saving" @click="submitForm">保存</el-button>
</el-form-item>
</el-form>
</page-section>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { createBuilder } from '@/api/dataFactoryApi'
export default {
name: 'BuilderEditor',
components: { PageSection },
data() {
return {
saving: false,
projectId: this.$route.query.projectId || 1,
definitionText: '{\n "steps": [],\n "output": {}\n}',
inputSchemaText: '{\n "type": "object",\n "properties": {}\n}',
form: {
name: '',
builder_type: 1,
description: ''
}
}
},
methods: {
submitForm() {
let definition = {}
let input_schema = {}
try {
definition = JSON.parse(this.definitionText || '{}')
input_schema = JSON.parse(this.inputSchemaText || '{}')
} catch (e) {
this.$message({ type: 'error', message: 'JSON 格式错误' })
return
}
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 } })
}).finally(() => {
this.saving = false
})
}
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>

View File

@@ -0,0 +1,100 @@
<template>
<div class="page-wrap">
<page-section title="造数工厂">
<template slot="extra">
<el-button type="primary" size="small" @click="goEditor()">新建造数器</el-button>
<el-button size="small" @click="goTasks">任务历史</el-button>
<el-button size="small" @click="goMock">Mock服务</el-button>
</template>
<el-form :inline="true" size="small">
<el-form-item label="项目ID">
<el-input v-model="projectId" style="width: 120px;"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="fetchList">查询</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="160"></el-table-column>
<el-table-column prop="builder_type" label="类型" width="120"></el-table-column>
<el-table-column prop="description" label="描述" min-width="220"></el-table-column>
<el-table-column label="操作" width="240">
<template slot-scope="scope">
<el-button type="text" @click="goEditor(scope.row)">编辑</el-button>
<el-button type="text" @click="execute(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>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { executeBuilder, getBuilderList } from '@/api/dataFactoryApi'
export default {
name: 'BuilderList',
components: { PageSection },
data() {
return {
loading: false,
projectId: this.$route.query.projectId || 1,
tableData: []
}
},
methods: {
fetchList() {
this.loading = true
getBuilderList(this.projectId, {
pageNo: this.pageNo,
pageSize: this.pageSize
}).then(res => {
const data = (res && res.data) || res || []
this.tableData = data.items || data.list || data.data || data || []
this.total = data.total || data.totalCount || this.tableData.length
}).catch(() => {
this.tableData = []
this.total = 0
}).finally(() => {
this.loading = false
})
},
goEditor(row) {
this.$router.push({ path: '/test-platform/data-factory/editor', query: { projectId: this.projectId, builderId: row && row.id } })
},
goTasks() {
this.$router.push({ path: '/test-platform/data-factory/tasks', query: { projectId: this.projectId } })
},
goMock() {
this.$router.push({ path: '/test-platform/data-factory/mock', query: { projectId: this.projectId } })
},
execute(row) {
executeBuilder(this.projectId, row.id, { params: { count: 1 }, async: true }).then(() => {
this.$message({ type: 'success', message: '造数任务已提交' })
})
}
},
created() {
this.fetchList()
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>
style>

View File

@@ -0,0 +1,72 @@
<template>
<div class="page-wrap">
<page-section title="Mock 服务">
<el-form :model="form" label-width="120px" size="small">
<el-form-item label="项目ID">
<el-input v-model="projectId" style="width: 200px;"></el-input>
</el-form-item>
<el-form-item label="Path">
<el-input v-model="form.path"></el-input>
</el-form-item>
<el-form-item label="Method">
<el-select v-model="form.method">
<el-option label="GET" value="GET"></el-option>
<el-option label="POST" value="POST"></el-option>
<el-option label="PUT" value="PUT"></el-option>
<el-option label="DELETE" value="DELETE"></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态码">
<el-input v-model="form.status_code"></el-input>
</el-form-item>
<el-form-item label="延迟(ms)">
<el-input v-model="form.delay_ms"></el-input>
</el-form-item>
<el-form-item label="响应体(JSON)">
<el-input v-model="responseBodyText" type="textarea" :rows="10"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="saving" @click="submitForm">创建 Mock</el-button>
</el-form-item>
</el-form>
<el-alert v-if="mockUrl" :title="'Mock 地址:' + mockUrl" type="success" :closable="false"></el-alert>
</page-section>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
export default {
name: 'MockService',
components: { PageSection },
data() {
return {
saving: false,
mockUrl: '',
projectId: this.$route.query.projectId || 1,
responseBodyText: '{\n "code": 0,\n "message": "success"\n}',
form: {
path: '',
method: 'POST',
status_code: 200,
delay_ms: 0
}
}
},
methods: {
submitForm() {
this.$message({
type: 'warning',
message: '当前后端未提供 Mock 服务接口,页面暂为占位状态'
})
}
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>

View File

@@ -0,0 +1,55 @@
<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-item>
<el-form-item label="任务ID">
<el-input v-model="taskId" style="width: 160px;"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="fetchStatus">查询状态</el-button>
</el-form-item>
</el-form>
<json-viewer :value="taskResult"></json-viewer>
</page-section>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import JsonViewer from '@/components/TestPlatform/common/JsonViewer'
import { getDataTaskStatus } from '@/api/dataFactoryApi'
export default {
name: 'TaskHistory',
components: { PageSection, JsonViewer },
data() {
return {
projectId: this.$route.query.projectId || 1,
taskId: this.$route.query.taskId || '',
taskResult: {}
}
},
methods: {
fetchStatus() {
if (!this.taskId) {
this.$message({ type: 'warning', message: '请输入任务ID' })
return
}
getDataTaskStatus(this.projectId, this.taskId).then(res => {
this.taskResult = (res && res.data) || res || {}
}).catch(() => {
this.taskResult = {}
})
}
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>

View File

@@ -0,0 +1,69 @@
<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>
</el-form-item>
<el-form-item label="计划名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="版本">
<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>
<el-form-item label="环境ID">
<el-input v-model="form.environment_id"></el-input>
</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 type="primary" :loading="saving" @click="submitForm">保存计划</el-button>
</el-form-item>
</el-form>
</page-section>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { createPlan } from '@/api/planApi'
export default {
name: 'PlanBuilder',
components: { PageSection },
data() {
return {
saving: false,
projectId: this.$route.query.projectId || 1,
form: {
name: '',
version: '',
owner_id: '',
environment_id: '',
description: ''
}
}
},
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
})
}
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>

View File

@@ -0,0 +1,114 @@
<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>
</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'
export default {
name: 'PlanExecute',
components: { PageSection, KeyValueDescriptions },
data() {
return {
projectId: this.$route.query.projectId || 1,
planId: this.$route.query.planId || '',
detail: {},
submitting: false,
defectLinksText: '',
executeForm: {
planCaseId: '',
status: 1,
actual_result: ''
}
}
},
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 }
]
}
},
methods: {
fetchDetail() {
if (!this.planId) {
return
}
getPlanDetail(this.projectId, this.planId).then(res => {
this.detail = (res && res.data) || res || {}
}).catch(() => {
this.detail = {}
})
},
submitExecute() {
if (!this.executeForm.planCaseId) {
this.$message({ type: 'warning', message: '请输入计划用例ID' })
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) : [],
attachments: []
}).then(() => {
this.$message({ type: 'success', message: '执行结果已提交' })
}).finally(() => {
this.submitting = false
})
}
},
created() {
this.fetchDetail()
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>

View File

@@ -0,0 +1,106 @@
<template>
<div class="page-wrap">
<page-section title="测试计划">
<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-item>
<el-form-item label="关键词">
<el-input v-model="queryForm.keyword" clearable></el-input>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="queryForm.status" clearable>
<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-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="fetchList">查询</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">
<template slot-scope="scope">
<el-button type="text" @click="goExecute(scope.row)">执行</el-button>
<el-button type="text" @click="goProgress(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>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { getPlanList } from '@/api/planApi'
export default {
name: 'PlanList',
components: { PageSection },
data() {
return {
loading: false,
projectId: this.$route.query.projectId || 1,
queryForm: {
keyword: '',
status: ''
},
pageNo: 1,
pageSize: 10,
total: 0,
tableData: []
}
},
methods: {
fetchList() {
this.loading = true
getPlanList(this.projectId, this.queryForm).then(res => {
const data = (res && res.data) || res || {}
this.tableData = data.items || data.list || []
}).catch(() => {
this.tableData = []
}).finally(() => {
this.loading = false
})
},
goBuilder() {
this.$router.push({ path: '/test-platform/plans/builder', query: { projectId: this.projectId } })
},
goExecute(row) {
this.$router.push({ path: '/test-platform/plans/execute', query: { projectId: this.projectId, planId: row.id } })
},
goProgress(row) {
this.$router.push({ path: '/test-platform/plans/progress', query: { projectId: this.projectId, planId: row.id } })
}
},
created() {
this.fetchList()
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>

View File

@@ -0,0 +1,73 @@
<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-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="fetchProgress">刷新</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-col>
<el-col :span="8">
<page-section title="人员负载">
<json-viewer :value="progress.assignee_load || []"></json-viewer>
</page-section>
</el-col>
<el-col :span="8">
<page-section title="每日趋势">
<json-viewer :value="progress.daily_trend || []"></json-viewer>
</page-section>
</el-col>
</el-row>
</page-section>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import JsonViewer from '@/components/TestPlatform/common/JsonViewer'
import { getPlanProgress } from '@/api/planApi'
export default {
name: 'PlanProgress',
components: { PageSection, JsonViewer },
data() {
return {
projectId: this.$route.query.projectId || 1,
planId: this.$route.query.planId || '',
progress: {}
}
},
methods: {
fetchProgress() {
if (!this.planId) {
return
}
getPlanProgress(this.projectId, this.planId).then(res => {
this.progress = (res && res.data) || res || {}
}).catch(() => {
this.progress = {}
})
}
},
created() {
this.fetchProgress()
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>

View File

@@ -0,0 +1,223 @@
<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="queryForm.name" 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="120"></el-table-column>
<el-table-column prop="name" label="产品名称" min-width="160"></el-table-column>
<el-table-column prop="description" label="描述" min-width="220" show-overflow-tooltip></el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template slot-scope="scope">{{ scope.row.status === 0 ? '禁用' : '启用' }}</template>
</el-table-column>
<el-table-column label="操作" width="180" fixed="right">
<template slot-scope="scope">
<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="520px" @close="resetDialogForm">
<el-form ref="productForm" :model="productForm" :rules="productRules" label-width="94px" size="small">
<el-form-item label="产品名称" prop="name">
<el-input v-model.trim="productForm.name" maxlength="64" placeholder="请输入产品名称"></el-input>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="productForm.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="productForm.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>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { createProduct, deleteProduct, getProductList, updateProduct } from '@/api/productApi'
const getDefaultForm = () => ({
id: undefined,
name: '',
status: 1,
description: ''
})
export default {
name: 'ProductList',
components: { PageSection },
data() {
return {
loading: false,
submitting: false,
dialogVisible: false,
dialogMode: 'create',
queryForm: {
name: '',
status: ''
},
productForm: getDefaultForm(),
productRules: {
name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
},
pageNo: 1,
pageSize: 10,
total: 0,
tableData: []
}
},
methods: {
fetchList() {
this.loading = true
getProductList({
pageNo: this.pageNo,
pageSize: this.pageSize,
name: this.queryForm.name,
status: this.queryForm.status
}).then(res => {
const data = res && res.data ? res.data : res || {}
this.tableData = data.items || data.list || data.data || []
this.total = data.total || data.totalCount || this.tableData.length
}).catch(() => {
this.tableData = []
this.total = 0
}).finally(() => {
this.loading = false
})
},
handleSearch() {
this.pageNo = 1
this.fetchList()
},
resetSearch() {
this.queryForm = {
name: '',
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.productForm = getDefaultForm()
if (this.$refs.productForm) {
this.$refs.productForm.clearValidate()
}
})
},
openEdit(row) {
this.dialogMode = 'edit'
this.dialogVisible = true
this.$nextTick(() => {
this.productForm = Object.assign(getDefaultForm(), row, { id: row.id })
if (this.$refs.productForm) {
this.$refs.productForm.clearValidate()
}
})
},
resetDialogForm() {
this.productForm = getDefaultForm()
this.submitting = false
this.$nextTick(() => {
if (this.$refs.productForm) {
this.$refs.productForm.resetFields()
}
})
},
submitForm() {
this.$refs.productForm.validate(valid => {
if (!valid) {
return
}
this.submitting = true
const request = this.dialogMode === 'create'
? createProduct(this.productForm)
: updateProduct(this.productForm)
request.then(res => {
if (res && res.code === 20000) {
this.$message.success(res.message || (this.dialogMode === 'create' ? '产品创建成功' : '产品更新成功'))
this.dialogVisible = false
this.pageNo = 1
this.fetchList()
return
}
this.$message.error((res && res.message) || (this.dialogMode === 'create' ? '产品创建失败' : '产品更新失败'))
}).finally(() => {
this.submitting = false
})
})
},
handleDelete(row) {
this.$confirm('确认删除该产品吗?', '提示', {
type: 'warning'
}).then(() => {
deleteProduct({ id: row.id }).then(() => {
this.$message.success('产品删除成功')
if (this.tableData.length === 1 && this.pageNo > 1) {
this.pageNo = this.pageNo - 1
}
this.fetchList()
})
}).catch(() => {})
}
},
created() {
this.fetchList()
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>

View File

@@ -0,0 +1,55 @@
<template>
<div class="page-wrap">
<page-section title="项目详情">
<key-value-descriptions :items="descriptionItems"></key-value-descriptions>
</page-section>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import KeyValueDescriptions from '@/components/TestPlatform/common/KeyValueDescriptions'
import { getProjectDetail } from '@/api/projectApi'
export default {
name: 'ProjectDetail',
components: { PageSection, KeyValueDescriptions },
data() {
return {
detail: {}
}
},
computed: {
descriptionItems() {
return [
{ label: '项目ID', value: this.detail.id },
{ label: '项目标识', value: this.detail.key },
{ label: '项目名称', value: this.detail.name },
{ label: '部门', value: this.detail.department },
{ label: '状态', value: this.detail.status === 0 ? '禁用' : '启用' },
{ label: '描述', value: this.detail.description },
{ label: '扩展配置', value: this.detail.config }
]
}
},
methods: {
fetchDetail() {
const projectId = this.$route.query.projectId || 1
getProjectDetail(projectId).then(res => {
this.detail = (res && res.data) || res || {}
}).catch(() => {
this.detail = {}
})
}
},
created() {
this.fetchDetail()
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>

View File

@@ -0,0 +1,247 @@
<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="queryForm.keyword" placeholder="项目名称" clearable @keyup.enter.native="fetchList"></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="fetchList">查询</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="product_name" label="产品名称" min-width="160"></el-table-column>
<el-table-column prop="key" label="项目编码" min-width="120"></el-table-column>
<el-table-column prop="name" label="项目名称" min-width="160"></el-table-column>
<el-table-column prop="description" label="描述" min-width="220" show-overflow-tooltip></el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template slot-scope="scope">{{ scope.row.status === 0 ? '禁用' : '启用' }}</template>
</el-table-column>
<el-table-column label="操作" width="180" fixed="right">
<template slot-scope="scope">
<el-button type="text" @click="openEdit(scope.row)">编辑</el-button>
<el-button type="text" style="color: #F56C6C;" @click="handleDelete(scope.row)">删除</el-button>
<el-button type="text" @click="goSettings(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="createDialogVisible" width="520px" @close="resetCreateForm">
<el-form ref="createForm" :model="createForm" :rules="createRules" label-width="94px" size="small">
<el-form-item label="项目名称" prop="name">
<el-input v-model.trim="createForm.name" maxlength="64" placeholder="请输入项目名称"></el-input>
</el-form-item>
<el-form-item label="所属产品" prop="productId">
<el-select v-model="createForm.productId" placeholder="请选择所属产品" filterable clearable style="width: 100%;">
<el-option
v-for="item in productOptions"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="createForm.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="createForm.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="createDialogVisible = false">取消</el-button>
<el-button type="primary" size="small" :loading="createSubmitting" @click="submitCreate">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { createProject, deleteProject, getProjectList, updateProject } from '@/api/projectApi'
import { getProductList } from '@/api/productApi'
const getDefaultCreateForm = () => ({
id: undefined,
name: '',
productId: '',
status: 1,
description: ''
})
export default {
name: 'ProjectList',
components: { PageSection },
data() {
return {
loading: false,
createSubmitting: false,
createDialogVisible: false,
dialogMode: 'create',
queryForm: {
keyword: '',
status: ''
},
createForm: getDefaultCreateForm(),
createRules: {
name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
productId: [{ required: true, message: '请选择所属产品', trigger: 'change' }],
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
},
productOptions: [],
pageNo: 1,
pageSize: 10,
total: 0,
tableData: []
}
},
methods: {
fetchList() {
this.loading = true
getProjectList({
pageNo: this.pageNo,
pageSize: this.pageSize,
keyword: this.queryForm.keyword,
status: this.queryForm.status
}).then(res => {
const data = res && res.data ? res.data : res || {}
this.tableData = data.items || data.list || data.data || []
this.total = data.total || data.totalCount || this.tableData.length
}).catch(() => {
this.tableData = []
this.total = 0
}).finally(() => {
this.loading = false
})
},
handleSizeChange(val) {
this.pageSize = val
this.pageNo = 1
this.fetchList()
},
handleCurrentChange(val) {
this.pageNo = val
this.fetchList()
},
goSettings(row) {
this.$router.push({ path: '/test-platform/projects/settings', query: { projectId: row.id } })
},
fetchProductOptions() {
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 = []
})
},
openCreate() {
this.dialogMode = 'create'
this.createForm = getDefaultCreateForm()
this.fetchProductOptions()
this.createDialogVisible = true
this.$nextTick(() => {
if (this.$refs.createForm) {
this.$refs.createForm.clearValidate()
}
})
},
openEdit(row) {
this.dialogMode = 'edit'
this.fetchProductOptions()
this.createDialogVisible = true
this.$nextTick(() => {
this.createForm = Object.assign(getDefaultCreateForm(), row, {
id: row.id,
productId: row.productId || row.product_id || row.productId
})
if (this.$refs.createForm) {
this.$refs.createForm.clearValidate()
}
})
},
resetCreateForm() {
this.createForm = getDefaultCreateForm()
this.createSubmitting = false
this.$nextTick(() => {
if (this.$refs.createForm) {
this.$refs.createForm.resetFields()
}
})
},
submitCreate() {
this.$refs.createForm.validate(valid => {
if (!valid) {
return
}
this.createSubmitting = true
const request = this.dialogMode === 'create'
? createProject(this.createForm)
: updateProject(this.createForm)
request.then(res => {
const message = (res && res.message) || ''
if (res && res.code === 20000) {
this.$message.success(message || (this.dialogMode === 'create' ? '项目创建成功' : '项目更新成功'))
this.createDialogVisible = false
this.pageNo = 1
this.fetchList()
return
}
this.$message.error(message || (this.dialogMode === 'create' ? '项目创建失败' : '项目更新失败'))
}).finally(() => {
this.createSubmitting = false
})
})
},
handleDelete(row) {
this.$confirm('确认删除该项目吗?', '提示', {
type: 'warning'
}).then(() => {
deleteProject({ id: row.id }).then(() => {
this.$message.success('项目删除成功')
if (this.tableData.length === 1 && this.pageNo > 1) {
this.pageNo = this.pageNo - 1
}
this.fetchList()
})
}).catch(() => {})
}
},
created() {
this.fetchList()
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>

View File

@@ -0,0 +1,281 @@
<template>
<div class="page-wrap">
<page-section title="项目设置">
<el-tabs value="members">
<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>
<div style="margin-top: 16px; text-align: right;">
<el-pagination
:current-page="memberPageNo"
:page-size="memberPageSize"
:page-sizes="[10, 20, 50, 100]"
:total="memberTotal"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleMemberSizeChange"
@current-change="handleMemberCurrentChange">
</el-pagination>
</div>
</el-tab-pane>
<el-tab-pane label="环境配置" name="environments">
<div class="toolbar-wrap">
<el-button type="primary" size="small" @click="openEnvironmentDialog">新增环境</el-button>
</div>
<el-table :data="environments" border>
<el-table-column prop="name" label="环境"></el-table-column>
<el-table-column prop="variables" label="变量">
<template slot-scope="scope">
<json-viewer :value="scope.row.variables"></json-viewer>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 16px; text-align: right;">
<el-pagination
:current-page="environmentPageNo"
:page-size="environmentPageSize"
:page-sizes="[10, 20, 50, 100]"
:total="environmentTotal"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleEnvironmentSizeChange"
@current-change="handleEnvironmentCurrentChange">
</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>
</el-form>
<span slot="footer">
<el-button size="small" @click="memberDialogVisible = false">取消</el-button>
<el-button type="primary" size="small" :loading="memberSubmitting" @click="submitMember">确定</el-button>
</span>
</el-dialog>
<el-dialog title="新增环境" :visible.sync="environmentDialogVisible" width="520px" @close="resetEnvironmentForm">
<el-form ref="environmentForm" :model="environmentForm" :rules="environmentRules" label-width="94px" size="small">
<el-form-item label="环境名称" prop="name">
<el-input v-model.trim="environmentForm.name" maxlength="64" placeholder="请输入环境名称"></el-input>
</el-form-item>
<el-form-item label="变量JSON" prop="variablesText">
<el-input v-model.trim="environmentForm.variablesText" type="textarea" :rows="6" placeholder='请输入 JSON例如 {"baseUrl":"https://test.com"}'></el-input>
</el-form-item>
</el-form>
<span slot="footer">
<el-button size="small" @click="environmentDialogVisible = false">取消</el-button>
<el-button type="primary" size="small" :loading="environmentSubmitting" @click="submitEnvironment">确定</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'
const getDefaultMemberForm = () => ({
user_id: '',
role: ''
})
const getDefaultEnvironmentForm = () => ({
name: '',
variablesText: '{}'
})
export default {
name: 'ProjectSettings',
components: { PageSection, JsonViewer },
data() {
return {
memberPageNo: 1,
memberPageSize: 10,
memberTotal: 0,
environmentPageNo: 1,
environmentPageSize: 10,
environmentTotal: 0,
members: [],
environments: [],
memberDialogVisible: false,
environmentDialogVisible: false,
memberSubmitting: false,
environmentSubmitting: false,
memberForm: getDefaultMemberForm(),
environmentForm: getDefaultEnvironmentForm(),
memberRules: {
user_id: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
role: [{ required: true, message: '请输入角色', trigger: 'blur' }]
},
environmentRules: {
name: [{ required: true, message: '请输入环境名称', trigger: 'blur' }],
variablesText: [{ required: true, message: '请输入变量JSON', trigger: 'blur' }]
}
}
},
methods: {
getProjectId() {
return this.$route.query.projectId || 1
},
fetchData() {
const projectId = this.getProjectId()
getProjectMembers(projectId, {
pageNo: this.memberPageNo,
pageSize: this.memberPageSize
}).then(res => {
const data = (res && res.data) || res || []
this.members = data.items || data.list || data.data || data || []
this.memberTotal = data.total || data.totalCount || this.members.length
}).catch(() => {
this.members = []
this.memberTotal = 0
})
getProjectEnvironments(projectId, {
pageNo: this.environmentPageNo,
pageSize: this.environmentPageSize
}).then(res => {
const data = (res && res.data) || res || []
this.environments = data.items || data.list || data.data || data || []
this.environmentTotal = data.total || data.totalCount || this.environments.length
}).catch(() => {
this.environments = []
this.environmentTotal = 0
})
},
openMemberDialog() {
this.memberDialogVisible = true
this.$nextTick(() => {
this.memberForm = getDefaultMemberForm()
if (this.$refs.memberForm) {
this.$refs.memberForm.clearValidate()
}
})
},
resetMemberForm() {
this.memberForm = getDefaultMemberForm()
this.memberSubmitting = false
this.$nextTick(() => {
if (this.$refs.memberForm) {
this.$refs.memberForm.resetFields()
}
})
},
submitMember() {
this.$refs.memberForm.validate(valid => {
if (!valid) {
return
}
this.memberSubmitting = true
createProjectMember(Object.assign({ project_id: this.getProjectId() }, this.memberForm)).then(res => {
const message = (res && res.message) || ''
if (res && res.code === 20000) {
this.$message.success(message || '成员新增成功')
this.memberDialogVisible = false
this.memberPageNo = 1
this.fetchData()
return
}
this.$message.error(message || '成员新增失败')
}).finally(() => {
this.memberSubmitting = false
})
})
},
openEnvironmentDialog() {
this.environmentDialogVisible = true
this.$nextTick(() => {
this.environmentForm = getDefaultEnvironmentForm()
if (this.$refs.environmentForm) {
this.$refs.environmentForm.clearValidate()
}
})
},
resetEnvironmentForm() {
this.environmentForm = getDefaultEnvironmentForm()
this.environmentSubmitting = false
this.$nextTick(() => {
if (this.$refs.environmentForm) {
this.$refs.environmentForm.resetFields()
}
})
},
submitEnvironment() {
this.$refs.environmentForm.validate(valid => {
if (!valid) {
return
}
let variables = {}
try {
variables = JSON.parse(this.environmentForm.variablesText || '{}')
} catch (e) {
this.$message.error('变量JSON格式不正确')
return
}
this.environmentSubmitting = true
createEnvironment({
project_id: this.getProjectId(),
name: this.environmentForm.name,
variables
}).then(res => {
const message = (res && res.message) || ''
if (res && res.code === 20000) {
this.$message.success(message || '环境新增成功')
this.environmentDialogVisible = false
this.environmentPageNo = 1
this.fetchData()
return
}
this.$message.error(message || '环境新增失败')
}).finally(() => {
this.environmentSubmitting = false
})
})
},
handleMemberSizeChange(val) {
this.memberPageSize = val
this.memberPageNo = 1
this.fetchData()
},
handleMemberCurrentChange(val) {
this.memberPageNo = val
this.fetchData()
},
handleEnvironmentSizeChange(val) {
this.environmentPageSize = val
this.environmentPageNo = 1
this.fetchData()
},
handleEnvironmentCurrentChange(val) {
this.environmentPageNo = val
this.fetchData()
}
},
created() {
this.fetchData()
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
.toolbar-wrap {
margin-bottom: 16px;
text-align: right;
}
</style>

View File

@@ -0,0 +1,104 @@
<template>
<div class="page-wrap">
<page-section title="测试报告">
<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-item>
<el-form-item label="计划ID">
<el-input v-model="queryForm.plan_id" style="width: 120px;"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="fetchList">查询</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="操作" width="180">
<template slot-scope="scope">
<el-button type="text" @click="goViewer(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>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { generateReport, getReportList } from '@/api/reportApi'
export default {
name: 'ReportList',
components: { PageSection },
data() {
return {
loading: false,
generating: false,
projectId: this.$route.query.projectId || 1,
queryForm: {
plan_id: this.$route.query.planId || ''
},
tableData: []
}
},
methods: {
fetchList() {
this.loading = true
getReportList(this.projectId, Object.assign({}, this.queryForm, {
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
}).catch(() => {
this.tableData = []
this.total = 0
}).finally(() => {
this.loading = false
})
},
handleGenerate() {
if (!this.queryForm.plan_id) {
this.$message({ type: 'warning', message: '请先输入计划ID' })
return
}
this.generating = true
generateReport(this.projectId, { plan_id: this.queryForm.plan_id }).then(() => {
this.$message({ type: 'success', message: '报告生成任务已提交' })
}).finally(() => {
this.generating = false
})
},
goViewer(row) {
this.$router.push({ path: '/test-platform/reports/viewer', query: { projectId: this.projectId, reportId: row.id } })
}
},
created() {
this.fetchList()
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
</style>

View File

@@ -0,0 +1,58 @@
<template>
<div class="page-wrap">
<page-section title="报告查看">
<el-alert
v-if="!report.content"
title="当前无可展示内容,待后端返回 report.content HTML"
type="info"
:closable="false"
style="margin-bottom: 16px;">
</el-alert>
<div class="report-html" v-html="report.content || ''"></div>
<el-divider></el-divider>
<json-viewer :value="report.summary || {}"></json-viewer>
</page-section>
</div>
</template>
<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import JsonViewer from '@/components/TestPlatform/common/JsonViewer'
import { getReportDetail } from '@/api/reportApi'
export default {
name: 'ReportViewer',
components: { PageSection, JsonViewer },
data() {
return {
projectId: this.$route.query.projectId || 1,
reportId: this.$route.query.reportId || '',
report: {}
}
},
methods: {
fetchDetail() {
if (!this.reportId) {
return
}
getReportDetail(this.projectId, this.reportId).then(res => {
this.report = (res && res.data) || res || {}
}).catch(() => {
this.report = {}
})
}
},
created() {
this.fetchDetail()
}
}
</script>
<style scoped>
.page-wrap {
padding: 20px;
}
.report-html {
min-height: 200px;
}
</style>

View File

@@ -0,0 +1,40 @@
<template>
<pre class="json-viewer">{{ formattedValue }}</pre>
</template>
<script>
export default {
name: 'JsonViewer',
props: {
value: {
type: [Object, Array, String, Number, Boolean],
default: () => ({})
}
},
computed: {
formattedValue() {
if (typeof this.value === 'string') {
try {
return JSON.stringify(JSON.parse(this.value), null, 2)
} catch (e) {
return this.value
}
}
return JSON.stringify(this.value || {}, null, 2)
}
}
}
</script>
<style scoped>
.json-viewer {
margin: 0;
padding: 16px;
background: #0f172a;
color: #e2e8f0;
border-radius: 6px;
white-space: pre-wrap;
word-break: break-all;
line-height: 1.6;
}
</style>

View File

@@ -0,0 +1,37 @@
<template>
<el-descriptions :column="column" border>
<el-descriptions-item
v-for="item in items"
:key="item.label"
:label="item.label">
{{ formatValue(item.value) }}
</el-descriptions-item>
</el-descriptions>
</template>
<script>
export default {
name: 'KeyValueDescriptions',
props: {
items: {
type: Array,
default: () => []
},
column: {
type: Number,
default: 2
}
},
methods: {
formatValue(value) {
if (value === null || typeof value === 'undefined' || value === '') {
return '-'
}
if (typeof value === 'object') {
return JSON.stringify(value)
}
return String(value)
}
}
}
</script>

View File

@@ -0,0 +1,39 @@
<template>
<el-card shadow="never" class="page-section">
<div slot="header" class="section-header">
<span>{{ title }}</span>
<div v-if="$slots.extra" class="section-extra">
<slot name="extra"></slot>
</div>
</div>
<div class="section-body">
<slot></slot>
</div>
</el-card>
</template>
<script>
export default {
name: 'PageSection',
props: {
title: {
type: String,
default: ''
}
}
}
</script>
<style scoped>
.page-section {
margin-bottom: 16px;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.section-extra {
margin-left: 16px;
}
</style>

View File

@@ -12,7 +12,7 @@
<span class="ct-img-yhm">&nbsp;</span>
<input
id="username"
v-model="username"
v-model.trim="username"
name="username"
class="input_text"
tabindex="1"
@@ -20,7 +20,8 @@
type="text"
size="25"
autocomplete="off"
placeholder="学号">
placeholder="用户名"
@keyup.enter="handleLogin">
</div>
<div class="ct_input" style="height:60px;width: 254px">
<span class="ct_img_mm">&nbsp;</span>
@@ -34,14 +35,13 @@
type="password"
size="25"
autocomplete="off"
placeholder="密码">
placeholder="密码"
@keyup.enter="handleLogin">
</div>
<input class="btn_login" value="登录" @click="handleLogin">
</div>
<div class="account-oprate clearfix">
<router-link :to="{ name: 'register' }">
<a class="regist-btn">注册</a>
</router-link>
<router-link :to="{ name: 'register' }" class="regist-btn">注册</router-link>
</div>
</div>
</div>
@@ -49,31 +49,70 @@
<script>
import { Login } from '@/api/Userapi'
import { getRoleList } from '@/api/rbacApi'
export default {
name: 'Login',
data() {
return {
msg: '',
username: null,
password: null
username: '',
password: ''
}
},
methods: {
handleLogin() {
if (!this.username || !this.password) {
this.msg = 'username、password 为必传参数'
return
}
Login({
studentId: this.username,
username: this.username,
password: this.password
}).then(data => {
if (data.code === 200 && data.success === 'true') {
localStorage.setItem('userinfo', JSON.stringify(data.data.userinfo))
localStorage.setItem('Token', data.data.token)
this.$store.commit('SetRole', data.data.userinfo.userStatus)
}).then(res => {
if (res && res.code === 20000) {
const data = res.data || {}
const user = {
id: data.id,
username: data.username,
realName: data.real_name,
mobile: data.mobile,
email: data.email,
avatar: data.avatar,
status: data.status,
lastLoginTime: data.last_login_time,
createdBy: data.created_by,
createdTime: data.created_time,
updatedTime: data.updated_time,
roleIds: data.role_ids || []
}
localStorage.setItem('authUser', JSON.stringify(user))
if (data.token) {
localStorage.setItem('accessToken', data.token)
} else {
localStorage.removeItem('accessToken')
}
this.$store.commit('SetCurrentUser', user)
this.$store.commit('SetRole', user.roleIds)
this.$store.commit('SetUserMenus', [])
this.loadUserMenus(user)
this.msg = ''
this.$message.success('登录成功')
this.$router.push({ path: '/effekt' })
} else {
this.msg = data.message
this.msg = (res && res.message) || '用户名或密码错误!'
}
})
},
loadUserMenus(user) {
const roleId = user && user.roleIds && user.roleIds.length ? user.roleIds[0] : undefined
if (!roleId) {
return
}
getRoleList({ roleId }).then(res => {
const menus = res && Array.isArray(res.data) ? res.data : []
this.$store.commit('SetUserMenus', menus)
}).catch(() => {})
}
}
}

View File

@@ -5,8 +5,8 @@
<div class="location-title"><h1>注册</h1></div>
<el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
<el-form-item label="学号" prop="studentId">
<el-input v-model="ruleForm.studentId" type="text" placeholder="学号" autocomplete="off"></el-input>
<el-form-item label="用户名" prop="username">
<el-input v-model.trim="ruleForm.username" type="text" placeholder="用户名" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="ruleForm.password" type="password" placeholder="密码" autocomplete="off"></el-input>
@@ -14,22 +14,17 @@
<el-form-item label="确认密码" prop="checkPass">
<el-input v-model="ruleForm.checkPass" type="password" placeholder="确认密码" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="ruleForm.name" placeholder="姓名" autocomplete="off"></el-input>
<el-form-item label="手机号" prop="mobile">
<el-input v-model.trim="ruleForm.mobile" placeholder="手机号" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-input v-model="ruleForm.gender" placeholder="性别" autocomplete="off"></el-input>
<el-form-item label="邮箱" prop="email">
<el-input v-model.trim="ruleForm.email" type="text" placeholder="邮箱" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="学院" prop="faculty">
<el-input v-model="ruleForm.faculty" type="text" placeholder="学院" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年级" prop="grade">
<el-input v-model="ruleForm.grade" type="text" placeholder="年级" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-form-item class="register-actions">
<el-button class="enter-btn" type="primary" :disabled="!select" @click="submitForm('ruleForm')">
立即注册
</el-button>
<el-button class="login-link-btn" type="text" @click="goLogin">去登录</el-button>
</el-form-item>
</el-form>
</div>
@@ -61,9 +56,9 @@ export default {
callback()
}
}
const validateStudentId = (rule, value, callback) => {
const validateUsername = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入学号'))
callback(new Error('请输入用户名'))
return
}
callback()
@@ -72,22 +67,16 @@ export default {
return {
select: true,
ruleForm: {
studentId: '',
username: '',
password: '',
checkPass: '',
name: '',
gender: '',
faculty: '',
grade: ''
mobile: '',
email: ''
},
rules: {
studentId: [{ required: true, validator: validateStudentId, trigger: 'blur' }],
username: [{ required: true, validator: validateUsername, trigger: 'blur' }],
password: [{ required: true, validator: validatePass, trigger: 'blur' }],
checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }],
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
gender: [{ required: true, message: '请输入性别', trigger: 'blur' }],
faculty: [{ required: true, message: '请输入学院', trigger: 'blur' }],
grade: [{ required: true, message: '请输入年级', trigger: 'blur' }]
checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
}
}
},
@@ -99,18 +88,17 @@ export default {
},
handleRegister() {
Register({
studentId: this.ruleForm.studentId,
username: this.ruleForm.username,
password: this.ruleForm.password,
name: this.ruleForm.name,
gender: this.ruleForm.gender,
faculty: this.ruleForm.faculty,
grade: this.ruleForm.grade
mobile: this.ruleForm.mobile,
email: this.ruleForm.email,
createdBy: 1
}).then(data => {
if (data.code === 200 && data.success === 'true') {
if (data && data.id) {
this.open('注册成功')
this.$router.push({ name: 'login' })
} else {
this.open(data.message)
this.open(data.message || '注册失败')
}
})
},
@@ -120,6 +108,9 @@ export default {
this.handleRegister()
}
})
},
goLogin() {
this.$router.push({ name: 'login' })
}
}
}
@@ -140,4 +131,20 @@ export default {
float: left;
width: 80%;
}
.register-actions .el-form-item__content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.login-link-wrap {
width: 100%;
margin-top: 8px;
text-align: right;
}
.login-link-btn {
padding-right: 0;
}
</style>

View File

@@ -67,6 +67,146 @@ export default new Router({
components: {
Manage: (resolve) => require(['@/components/EffektHome'], resolve)
}
},
{
path: '/test-platform/projects',
name: 'ProjectList',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Project/ProjectList'], resolve)
}
},
{
path: '/test-platform/products',
name: 'ProductList',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Product/ProductList'], resolve)
}
},
{
path: '/test-platform/projects/detail',
name: 'ProjectDetail',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Project/ProjectDetail'], resolve)
}
},
{
path: '/test-platform/projects/settings',
name: 'ProjectSettings',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Project/ProjectSettings'], resolve)
}
},
{
path: '/test-platform/cases',
name: 'CaseList',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Case/CaseList'], resolve)
}
},
{
path: '/test-platform/cases/editor',
name: 'CaseEditor',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Case/CaseEditor'], resolve)
}
},
{
path: '/test-platform/cases/review',
name: 'CaseReview',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Case/CaseReview'], resolve)
}
},
{
path: '/test-platform/plans',
name: 'PlanList',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanList'], resolve)
}
},
{
path: '/test-platform/plans/builder',
name: 'PlanBuilder',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanBuilder'], resolve)
}
},
{
path: '/test-platform/plans/execute',
name: 'PlanExecute',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanExecute'], resolve)
}
},
{
path: '/test-platform/plans/progress',
name: 'PlanProgress',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanProgress'], resolve)
}
},
{
path: '/test-platform/reports',
name: 'ReportList',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Report/ReportList'], resolve)
}
},
{
path: '/test-platform/reports/viewer',
name: 'ReportViewer',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/Report/ReportViewer'], resolve)
}
},
{
path: '/test-platform/data-factory/builders',
name: 'BuilderList',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/DataFactory/BuilderList'], resolve)
}
},
{
path: '/test-platform/data-factory/editor',
name: 'BuilderEditor',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/DataFactory/BuilderEditor'], resolve)
}
},
{
path: '/test-platform/data-factory/tasks',
name: 'TaskHistory',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/DataFactory/TaskHistory'], resolve)
}
},
{
path: '/test-platform/data-factory/mock',
name: 'MockService',
components: {
Manage: (resolve) => require(['@/components/TestPlatform/DataFactory/MockService'], resolve)
}
},
{
path: '/system/roles',
name: 'RoleManage',
components: {
Manage: (resolve) => require(['@/components/System/RoleManage'], resolve)
}
},
{
path: '/system/users',
name: 'UserManage',
components: {
Manage: (resolve) => require(['@/components/System/UserManage'], resolve)
}
},
{
path: '/system/menus',
name: 'MenuManage',
components: {
Manage: (resolve) => require(['@/components/System/MenuManage'], resolve)
}
}
]
}

View File

@@ -3,8 +3,8 @@ import { Message } from 'element-ui';
import router from '../router/index'
const service = axios.create({
// baseURL: 'http://10.250.0.252:5010', // api 的 base_url
baseURL: '', // api 的 base_url
// baseURL: 'http://192.168.11.46:5010', // api 的 base_url
// baseURL: '', // api 的 base_url
baseURL: '/it/api', // api 的 base_url
timeout: 90000 // request timeout
})
@@ -12,7 +12,10 @@ const service = axios.create({
// 请求拦截 设置统一header
service.interceptors.request.use(
config => {
config.headers.Token=localStorage.getItem('Token')
const accessToken = localStorage.getItem('accessToken')
if (accessToken) {
config.headers.accessToken = accessToken
}
return config
},
error => {

View File

@@ -4,14 +4,27 @@ import vue from 'vue'
vue.use(vuex)
const state={
userRole:null
userRole:null,
currentUser: JSON.parse(localStorage.getItem('authUser') || 'null'),
userMenus: JSON.parse(localStorage.getItem('userMenus') || '[]')
}
const mutations={
SetRole(state,val){
state.userRole=val
},
SetCurrentUser(state, user) {
state.currentUser = user
},
SetUserMenus(state, menus) {
state.userMenus = menus || []
localStorage.setItem('userMenus', JSON.stringify(state.userMenus))
},
ClearCurrentUser(state) {
state.currentUser = null
state.userRole = null
state.userMenus = []
localStorage.removeItem('userMenus')
}
}