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

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

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

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

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

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

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

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

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

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

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

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

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