test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: 显示标签列

This commit is contained in:
Captain.B 2021-01-07 17:53:36 +08:00
parent a2c1baece6
commit 460b4daff6
4 changed files with 627 additions and 578 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanApiCaseMapper.xml
View File

@ -18,7 +18,7 @@
<select id="list" resultType="io.metersphere.api.dto.definition.TestPlanApiCaseDTO"> <select id="list" resultType="io.metersphere.api.dto.definition.TestPlanApiCaseDTO">
select select
t.id, t.environment_id, t.create_time, t.update_time, t.id, t.environment_id, t.create_time, t.update_time,
c.id as case_id, c.project_id, c.name, c.api_definition_id, c.priority, c.description, c.create_user_id, c.update_user_id, c.num, c.id as case_id, c.project_id, c.name, c.api_definition_id, c.priority, c.description, c.create_user_id, c.update_user_id, c.num, c.tags,
a.module_id, a.path, a.protocol, t.status execResult a.module_id, a.path, a.protocol, t.status execResult
from from
test_plan_api_case t test_plan_api_case t

478
frontend/src/business/components/api/definition/components/list/ApiList.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<api-list-container <api-list-container
:is-api-list-enable="isApiListEnable" :is-api-list-enable="isApiListEnable"
@isApiListEnableChange="isApiListEnableChange"> @isApiListEnableChange="isApiListEnableChange">
<el-input placeholder="搜索" @blur="search" class="search-input" size="small" @keyup.enter.native="search" <el-input placeholder="搜索" @blur="search" class="search-input" size="small" @keyup.enter.native="search"
v-model="condition.name"/> v-model="condition.name"/>
@ -47,8 +47,9 @@
:label="$t('api_test.definition.api_type')" :label="$t('api_test.definition.api_type')"
show-overflow-tooltip> show-overflow-tooltip>
<template v-slot:default="scope" class="request-method"> <template v-slot:default="scope" class="request-method">
<el-tag size="mini" :style="{'background-color': getColor(true, scope.row.method), border: getColor(true, scope.row.method)}" class="api-el-tag"> <el-tag size="mini" :style="{'background-color': getColor(true, scope.row.method), border: getColor(true, scope.row.method)}"
{{ scope.row.method}} class="api-el-tag">
{{ scope.row.method }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
@ -63,6 +64,15 @@
:label="$t('api_test.definition.api_principal')" :label="$t('api_test.definition.api_principal')"
show-overflow-tooltip/> show-overflow-tooltip/>
<el-table-column prop="tags" :label="$t('commons.tag')">
<template v-slot:default="scope">
<ms-tag v-for="(tag, index) in scope.row.showTags"
:key="tag + '_' + index"
:effect="'light'"
:content="tag"/>
</template>
</el-table-column>
<el-table-column width="160" :label="$t('api_test.definition.api_last_time')" prop="updateTime"> <el-table-column width="160" :label="$t('api_test.definition.api_last_time')" prop="updateTime">
<template v-slot:default="scope"> <template v-slot:default="scope">
<span>{{ scope.row.updateTime | timestampFormatDate }}</span> <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
@ -87,10 +97,10 @@
<el-table-column v-if="!isReadOnly" :label="$t('commons.operating')" min-width="130" align="center"> <el-table-column v-if="!isReadOnly" :label="$t('commons.operating')" min-width="130" align="center">
<template v-slot:default="scope"> <template v-slot:default="scope">
<el-button type="text" @click="reductionApi(scope.row)" v-if="trashEnable" v-tester>{{$t('commons.reduction')}}</el-button> <el-button type="text" @click="reductionApi(scope.row)" v-if="trashEnable" v-tester>{{ $t('commons.reduction') }}</el-button>
<el-button type="text" @click="editApi(scope.row)" v-else v-tester>{{$t('commons.edit')}}</el-button> <el-button type="text" @click="editApi(scope.row)" v-else v-tester>{{ $t('commons.edit') }}</el-button>
<el-button type="text" @click="handleTestCase(scope.row)">{{$t('api_test.definition.request.case')}}</el-button> <el-button type="text" @click="handleTestCase(scope.row)">{{ $t('api_test.definition.request.case') }}</el-button>
<el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C" v-tester>{{$t('commons.delete')}}</el-button> <el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C" v-tester>{{ $t('commons.delete') }}</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -106,133 +116,132 @@
<script> <script>
import MsTableHeader from '../../../../common/components/MsTableHeader'; import MsTableHeader from '../../../../common/components/MsTableHeader';
import MsTableOperator from "../../../../common/components/MsTableOperator"; import MsTableOperator from "../../../../common/components/MsTableOperator";
import MsTableOperatorButton from "../../../../common/components/MsTableOperatorButton"; import MsTableOperatorButton from "../../../../common/components/MsTableOperatorButton";
import MsTableButton from "../../../../common/components/MsTableButton"; import MsTableButton from "../../../../common/components/MsTableButton";
import {LIST_CHANGE, TrackEvent} from "@/business/components/common/head/ListEvent"; import MsTablePagination from "../../../../common/pagination/TablePagination";
import MsTablePagination from "../../../../common/pagination/TablePagination"; import MsTag from "../../../../common/components/MsTag";
import MsTag from "../../../../common/components/MsTag"; import MsApiCaseList from "../case/ApiCaseList";
import MsApiCaseList from "../case/ApiCaseList"; import MsContainer from "../../../../common/components/MsContainer";
import MsContainer from "../../../../common/components/MsContainer"; import MsBottomContainer from "../BottomContainer";
import MsBottomContainer from "../BottomContainer"; import ShowMoreBtn from "../../../../track/case/components/ShowMoreBtn";
import ShowMoreBtn from "../../../../track/case/components/ShowMoreBtn"; import MsBatchEdit from "../basis/BatchEdit";
import MsBatchEdit from "../basis/BatchEdit"; import {API_METHOD_COLOUR, API_STATUS, REQ_METHOD} from "../../model/JsonData";
import {API_METHOD_COLOUR, REQ_METHOD, API_STATUS} from "../../model/JsonData"; import {getCurrentProjectID} from "@/common/js/utils";
import {getCurrentProjectID} from "@/common/js/utils"; import {WORKSPACE_ID} from '@/common/js/constants';
import {WORKSPACE_ID} from '../../../../../../common/js/constants'; import ApiListContainer from "./ApiListContainer";
import ApiListContainer from "./ApiListContainer"; import MsTableSelectAll from "../../../../common/components/table/MsTableSelectAll";
import MsTableSelectAll from "../../../../common/components/table/MsTableSelectAll";
export default { export default {
name: "ApiList", name: "ApiList",
components: { components: {
MsTableSelectAll, MsTableSelectAll,
ApiListContainer, ApiListContainer,
MsTableButton, MsTableButton,
MsTableOperatorButton, MsTableOperatorButton,
MsTableOperator, MsTableOperator,
MsTableHeader, MsTableHeader,
MsTablePagination, MsTablePagination,
MsTag, MsTag,
MsApiCaseList, MsApiCaseList,
MsContainer, MsContainer,
MsBottomContainer, MsBottomContainer,
ShowMoreBtn, ShowMoreBtn,
MsBatchEdit MsBatchEdit
},
data() {
return {
condition: {},
selectApi: {},
result: {},
moduleId: "",
selectDataRange: "all",
deletePath: "/test/case/delete",
selectRows: new Set(),
buttons: [
{name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch},
{name: this.$t('api_test.definition.request.batch_edit'), handleClick: this.handleEditBatch}
],
typeArr: [
{id: 'status', name: this.$t('api_test.definition.api_status')},
{id: 'method', name: this.$t('api_test.definition.api_type')},
{id: 'userId', name: this.$t('api_test.definition.api_principal')},
],
valueArr: {
status: API_STATUS,
method: REQ_METHOD,
userId: [],
},
methodColorMap: new Map(API_METHOD_COLOUR),
tableData: [],
currentPage: 1,
pageSize: 10,
total: 0,
screenHeight: document.documentElement.clientHeight - 330,//屏幕高度,
environmentId: undefined,
selectAll: false,
unSelection: [],
selectDataCounts: 0,
}
},
props: {
currentProtocol: String,
selectNodeIds: Array,
isSelectThisWeek: String,
visible: {
type: Boolean,
default: false,
}, },
data() { isCaseRelevance: {
return { type: Boolean,
condition: {}, default: false,
selectApi: {},
result: {},
moduleId: "",
selectDataRange: "all",
deletePath: "/test/case/delete",
selectRows: new Set(),
buttons: [
{name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch},
{name: this.$t('api_test.definition.request.batch_edit'), handleClick: this.handleEditBatch}
],
typeArr: [
{id: 'status', name: this.$t('api_test.definition.api_status')},
{id: 'method', name: this.$t('api_test.definition.api_type')},
{id: 'userId', name: this.$t('api_test.definition.api_principal')},
],
valueArr: {
status: API_STATUS,
method: REQ_METHOD,
userId: [],
},
methodColorMap: new Map(API_METHOD_COLOUR),
tableData: [],
currentPage: 1,
pageSize: 10,
total: 0,
screenHeight: document.documentElement.clientHeight - 330,//屏幕高度,
environmentId: undefined,
selectAll: false,
unSelection:[],
selectDataCounts:0,
}
}, },
props: { trashEnable: {
currentProtocol: String, type: Boolean,
selectNodeIds: Array, default: false,
isSelectThisWeek: String,
visible: {
type: Boolean,
default: false,
},
isCaseRelevance: {
type: Boolean,
default: false,
},
trashEnable: {
type: Boolean,
default: false,
},
isApiListEnable: Boolean,
isReadOnly: {
type: Boolean,
default: false
},
}, },
created: function () { isApiListEnable: Boolean,
isReadOnly: {
type: Boolean,
default: false
},
},
created: function () {
this.initTable();
this.getMaintainerOptions();
},
watch: {
selectNodeIds() {
this.initTable(); this.initTable();
this.getMaintainerOptions();
}, },
watch: { currentProtocol() {
selectNodeIds() { this.initTable();
},
trashEnable() {
if (this.trashEnable) {
this.initTable(); this.initTable();
},
currentProtocol() {
this.initTable();
},
trashEnable() {
if (this.trashEnable) {
this.initTable();
}
} }
}
},
methods: {
isApiListEnableChange(data) {
this.$emit('isApiListEnableChange', data);
}, },
methods: { initTable() {
isApiListEnableChange(data) { this.selectRows = new Set();
this.$emit('isApiListEnableChange', data);
},
initTable() {
this.selectRows = new Set();
this.selectAll = false; this.selectAll = false;
this.unSelection = []; this.unSelection = [];
this.selectDataCounts = 0; this.selectDataCounts = 0;
this.condition.filters = ["Prepare", "Underway", "Completed"]; this.condition.filters = ["Prepare", "Underway", "Completed"];
this.condition.moduleIds = this.selectNodeIds; this.condition.moduleIds = this.selectNodeIds;
if (this.trashEnable) { if (this.trashEnable) {
this.condition.filters = ["Trash"]; this.condition.filters = ["Trash"];
this.condition.moduleIds = []; this.condition.moduleIds = [];
} }
this.condition.projectId = getCurrentProjectID(); this.condition.projectId = getCurrentProjectID();
if (this.currentProtocol != null) { if (this.currentProtocol != null) {
@ -243,7 +252,7 @@
this.getSelectDataRange(); this.getSelectDataRange();
this.condition.selectThisWeedData = false; this.condition.selectThisWeedData = false;
this.condition.apiCaseCoverage = null; this.condition.apiCaseCoverage = null;
switch (this.selectDataRange){ switch (this.selectDataRange) {
case 'thisWeekCount': case 'thisWeekCount':
this.condition.selectThisWeedData = true; this.condition.selectThisWeedData = true;
break; break;
@ -268,6 +277,10 @@
this.total = response.data.itemCount; this.total = response.data.itemCount;
this.tableData = response.data.listObject; this.tableData = response.data.listObject;
this.unSelection = response.data.listObject.map(s => s.id); this.unSelection = response.data.listObject.map(s => s.id);
this.tableData.forEach(row => {
row.showTags = JSON.parse(row.tags);
})
}); });
} }
}, },
@ -325,76 +338,76 @@
return path + "/" + this.currentPage + "/" + this.pageSize; return path + "/" + this.currentPage + "/" + this.pageSize;
}, },
editApi(row) { editApi(row) {
this.$emit('editApi', row); this.$emit('editApi', row);
}, },
reductionApi(row) { reductionApi(row) {
row.request = null; row.request = null;
row.response = null; row.response = null;
let rows = [row]; let rows = [row];
this.$post('/api/definition/reduction/', rows, () => { this.$post('/api/definition/reduction/', rows, () => {
this.$success(this.$t('commons.save_success')); this.$success(this.$t('commons.save_success'));
this.search(); this.search();
});
},
handleDeleteBatch() {
if (this.trashEnable) {
this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
let deleteParam = {};
let ids = Array.from(this.selectRows).map(row => row.id);
deleteParam.dataIds = ids;
deleteParam.projectId = getCurrentProjectID();
deleteParam.selectAllDate = this.isSelectAllDate;
deleteParam.unSelectIds = this.unSelection;
deleteParam = Object.assign(deleteParam, this.condition);
this.$post('/api/definition/deleteBatchByParams/', deleteParam, () => {
this.selectRows.clear();
this.initTable();
this.$success(this.$t('commons.delete_success'));
});
}
}
}); });
}, } else {
handleDeleteBatch() { this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
if (this.trashEnable) { confirmButtonText: this.$t('commons.confirm'),
this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', { callback: (action) => {
confirmButtonText: this.$t('commons.confirm'), if (action === 'confirm') {
callback: (action) => { let ids = Array.from(this.selectRows).map(row => row.id);
if (action === 'confirm') { let deleteParam = {};
let deleteParam = {}; deleteParam.dataIds = ids;
let ids = Array.from(this.selectRows).map(row => row.id); deleteParam.projectId = getCurrentProjectID();
deleteParam.dataIds = ids; deleteParam.selectAllDate = this.isSelectAllDate;
deleteParam.projectId = getCurrentProjectID(); deleteParam.unSelectIds = this.unSelection;
deleteParam.selectAllDate = this.isSelectAllDate; deleteParam = Object.assign(deleteParam, this.condition);
deleteParam.unSelectIds = this.unSelection; this.$post('/api/definition/removeToGcByParams/', deleteParam, () => {
deleteParam = Object.assign(deleteParam, this.condition); this.selectRows.clear();
this.$post('/api/definition/deleteBatchByParams/', deleteParam, () => { this.initTable();
this.selectRows.clear(); this.$success(this.$t('commons.delete_success'));
this.initTable(); this.$refs.caseList.apiCaseClose();
this.$success(this.$t('commons.delete_success')); });
});
}
} }
}); }
} else { });
this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', { }
confirmButtonText: this.$t('commons.confirm'), },
callback: (action) => { handleEditBatch() {
if (action === 'confirm') { this.$refs.batchEdit.open();
let ids = Array.from(this.selectRows).map(row => row.id); },
let deleteParam = {}; batchEdit(form) {
deleteParam.dataIds = ids; let arr = Array.from(this.selectRows);
deleteParam.projectId = getCurrentProjectID(); let ids = arr.map(row => row.id);
deleteParam.selectAllDate = this.isSelectAllDate; let param = {};
deleteParam.unSelectIds = this.unSelection; param[form.type] = form.value;
deleteParam = Object.assign(deleteParam, this.condition); param.ids = ids;
this.$post('/api/definition/removeToGcByParams/', deleteParam, () => {
this.selectRows.clear();
this.initTable();
this.$success(this.$t('commons.delete_success'));
this.$refs.caseList.apiCaseClose();
});
}
}
});
}
},
handleEditBatch() {
this.$refs.batchEdit.open();
},
batchEdit(form) {
let arr = Array.from(this.selectRows);
let ids = arr.map(row => row.id);
let param = {};
param[form.type] = form.value;
param.ids = ids;
param.projectId = getCurrentProjectID(); param.projectId = getCurrentProjectID();
param.selectAllDate = this.isSelectAllDate; param.selectAllDate = this.isSelectAllDate;
param.unSelectIds = this.unSelection; param.unSelectIds = this.unSelection;
param = Object.assign(param, this.condition); param = Object.assign(param, this.condition);
this.$post('/api/definition/batch/editByParams', param, () => { this.$post('/api/definition/batch/editByParams', param, () => {
this.$success(this.$t('commons.save_success')); this.$success(this.$t('commons.save_success'));
@ -488,52 +501,57 @@
</script> </script>
<style scoped> <style scoped>
.operate-button > div { .operate-button > div {
display: inline-block; display: inline-block;
margin-left: 10px; margin-left: 10px;
} }
.request-method { .request-method {
padding: 0 5px; padding: 0 5px;
color: #1E90FF; color: #1E90FF;
} }
.api-el-tag { .api-el-tag {
color: white; color: white;
} }
.search-input { .search-input {
float: right; float: right;
width: 300px; width: 300px;
margin-right: 20px; margin-right: 20px;
} }
.api-list >>> th:first-child { .api-list >>> th:first-child {
/*border: 1px solid #DCDFE6;*/ /*border: 1px solid #DCDFE6;*/
/*border-right: 0px;*/ /*border-right: 0px;*/
/*border-top-left-radius:5px;*/ /*border-top-left-radius:5px;*/
/*border-bottom-left-radius:5px;*/ /*border-bottom-left-radius:5px;*/
/*width: 20px;*/ /*width: 20px;*/
} }
.api-list >>> th:nth-child(2) { .api-list >>> th:nth-child(2) {
/*border: 1px solid #DCDFE6;*/ /*border: 1px solid #DCDFE6;*/
/*border-left: 0px;*/ /*border-left: 0px;*/
/*border-top-right-radius:5px;*/ /*border-top-right-radius:5px;*/
/*border-bottom-right-radius:5px;*/ /*border-bottom-right-radius:5px;*/
} }
.api-list >>> th:first-child>.cell { .api-list >>> th:first-child > .cell {
padding: 5px; padding: 5px;
width: 30px; width: 30px;
} }
.api-list >>> th:nth-child(2)>.cell {
/*background-color: black;*/
}
.api-list >>> .el-dropdown { .api-list >>> th:nth-child(2) > .cell {
float: left; /*background-color: black;*/
} }
.api-list >>> .el-dropdown {
float: left;
}
.el-tag {
margin-left: 10px;
}
</style> </style>

19
frontend/src/business/components/track/case/components/TestCaseList.vue
View File

@ -111,6 +111,15 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="tags" :label="$t('commons.tag')">
<template v-slot:default="scope">
<ms-tag v-for="(tag, index) in scope.row.showTags"
:key="tag + '_' + index"
:effect="'light'"
:content="tag"/>
</template>
</el-table-column>
<el-table-column <el-table-column
prop="nodePath" prop="nodePath"
:label="$t('test_track.case.module')" :label="$t('test_track.case.module')"
@ -175,6 +184,7 @@ import StatusTableItem from "@/business/components/track/common/tableItems/planv
import TestCaseDetail from "./TestCaseDetail"; import TestCaseDetail from "./TestCaseDetail";
import ReviewStatus from "@/business/components/track/case/components/ReviewStatus"; import ReviewStatus from "@/business/components/track/case/components/ReviewStatus";
import {getCurrentProjectID} from "../../../../../common/js/utils"; import {getCurrentProjectID} from "../../../../../common/js/utils";
import MsTag from "@/business/components/common/components/MsTag";
export default { export default {
name: "TestCaseList", name: "TestCaseList",
@ -195,7 +205,8 @@ export default {
BatchEdit, BatchEdit,
StatusTableItem, StatusTableItem,
TestCaseDetail, TestCaseDetail,
ReviewStatus ReviewStatus,
MsTag,
}, },
data() { data() {
return { return {
@ -308,6 +319,9 @@ export default {
this.tableData = data.listObject; this.tableData = data.listObject;
// this.selectIds.clear(); // this.selectIds.clear();
this.selectRows.clear(); this.selectRows.clear();
this.tableData.forEach(row => {
row.showTags = JSON.parse(row.tags);
})
}); });
} }
}, },
@ -537,4 +551,7 @@ export default {
cursor: pointer; cursor: pointer;
} }
.el-tag {
margin-left: 10px;
}
</style> </style>

706
frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiCaseList.vue
View File

@ -2,14 +2,14 @@
<div class="card-container"> <div class="card-container">
<el-card class="card-content" v-loading="result.loading"> <el-card class="card-content" v-loading="result.loading">
<template v-slot:header> <template v-slot:header>
<test-plan-case-list-header <test-plan-case-list-header
:project-id="getProjectId()" :project-id="getProjectId()"
:condition="condition" :condition="condition"
:plan-id="planId" :plan-id="planId"
@refresh="initTable" @refresh="initTable"
@relevanceCase="$emit('relevanceCase')" @relevanceCase="$emit('relevanceCase')"
@setEnvironment="setEnvironment" @setEnvironment="setEnvironment"
v-if="isPlanModel"/> v-if="isPlanModel"/>
</template> </template>
<el-table v-loading="result.loading" <el-table v-loading="result.loading"
@ -60,8 +60,17 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="tags" :label="$t('commons.tag')">
<template v-slot:default="scope">
<ms-tag v-for="(tag, index) in scope.row.showTags"
:key="tag + '_' + index"
:effect="'light'"
:content="tag"/>
</template>
</el-table-column>
<el-table-column :label="'执行状态'" min-width="130" align="center"> <el-table-column :label="'执行状态'" min-width="130" align="center">
<template v-slot:default="scope" > <template v-slot:default="scope">
<div v-loading="rowLoading === scope.row.id"> <div v-loading="rowLoading === scope.row.id">
<el-link type="danger" <el-link type="danger"
v-if="scope.row.execResult && scope.row.execResult === 'error'" v-if="scope.row.execResult && scope.row.execResult === 'error'"
@ -73,8 +82,8 @@
<div v-else v-text="getResult(scope.row.execResult)"/> <div v-else v-text="getResult(scope.row.execResult)"/>
<div v-if="scope.row.id" style="color: #999999;font-size: 12px"> <div v-if="scope.row.id" style="color: #999999;font-size: 12px">
<span> {{scope.row.updateTime | timestampFormatDate }}</span> <span> {{ scope.row.updateTime | timestampFormatDate }}</span>
{{scope.row.updateUser}} {{ scope.row.updateUser }}
</div> </div>
</div> </div>
</template> </template>
@ -82,10 +91,10 @@
<el-table-column v-if="!isReadOnly" :label="$t('commons.operating')" align="center"> <el-table-column v-if="!isReadOnly" :label="$t('commons.operating')" align="center">
<template v-slot:default="scope"> <template v-slot:default="scope">
<ms-table-operator-button class="run-button" :is-tester-permission="true" :tip="$t('api_test.run')" icon="el-icon-video-play" <ms-table-operator-button class="run-button" :is-tester-permission="true" :tip="$t('api_test.run')" icon="el-icon-video-play"
@exec="singleRun(scope.row)" v-tester/> @exec="singleRun(scope.row)" v-tester/>
<ms-table-operator-button :is-tester-permission="true" :tip="$t('test_track.plan_view.cancel_relevance')" <ms-table-operator-button :is-tester-permission="true" :tip="$t('test_track.plan_view.cancel_relevance')"
icon="el-icon-unlock" type="danger" @exec="handleDelete(scope.row)" v-tester/> icon="el-icon-unlock" type="danger" @exec="handleDelete(scope.row)" v-tester/>
</template> </template>
</el-table-column> </el-table-column>
@ -106,366 +115,371 @@
<script> <script>
import MsTableOperator from "../../../../../common/components/MsTableOperator"; import MsTableOperator from "../../../../../common/components/MsTableOperator";
import MsTableOperatorButton from "../../../../../common/components/MsTableOperatorButton"; import MsTableOperatorButton from "../../../../../common/components/MsTableOperatorButton";
import {LIST_CHANGE, TrackEvent} from "@/business/components/common/head/ListEvent"; import MsTablePagination from "../../../../../common/pagination/TablePagination";
import MsTablePagination from "../../../../../common/pagination/TablePagination"; import MsTag from "../../../../../common/components/MsTag";
import MsTag from "../../../../../common/components/MsTag"; import MsApiCaseList from "../../../../../api/definition/components/case/ApiCaseList";
import MsApiCaseList from "../../../../../api/definition/components/case/ApiCaseList"; import ApiCaseList from "../../../../../api/definition/components/case/ApiCaseList";
import MsContainer from "../../../../../common/components/MsContainer"; import MsContainer from "../../../../../common/components/MsContainer";
import MsBottomContainer from "../../../../../api/definition/components/BottomContainer"; import MsBottomContainer from "../../../../../api/definition/components/BottomContainer";
import ShowMoreBtn from "../../../../case/components/ShowMoreBtn"; import ShowMoreBtn from "../../../../case/components/ShowMoreBtn";
import MsBatchEdit from "../../../../../api/definition/components/basis/BatchEdit"; import MsBatchEdit from "../../../../../api/definition/components/basis/BatchEdit";
import {API_METHOD_COLOUR, CASE_PRIORITY, RESULT_MAP} from "../../../../../api/definition/model/JsonData"; import {API_METHOD_COLOUR, CASE_PRIORITY, RESULT_MAP} from "../../../../../api/definition/model/JsonData";
import {getCurrentProjectID} from "@/common/js/utils"; import {getCurrentProjectID} from "@/common/js/utils";
import ApiListContainer from "../../../../../api/definition/components/list/ApiListContainer"; import ApiListContainer from "../../../../../api/definition/components/list/ApiListContainer";
import PriorityTableItem from "../../../../common/tableItems/planview/PriorityTableItem"; import PriorityTableItem from "../../../../common/tableItems/planview/PriorityTableItem";
import ApiCaseList from "../../../../../api/definition/components/case/ApiCaseList"; import {_filter, _sort, getBodyUploadFiles, getUUID} from "../../../../../../../common/js/utils";
import {_filter, _sort, getUUID, getBodyUploadFiles} from "../../../../../../../common/js/utils"; import TestPlanCaseListHeader from "./TestPlanCaseListHeader";
import TestPlanCaseListHeader from "./TestPlanCaseListHeader"; import MsRun from "../../../../../api/definition/components/Run";
import MsRun from "../../../../../api/definition/components/Run"; import TestPlanApiCaseResult from "./TestPlanApiCaseResult";
import TestPlanApiCaseResult from "./TestPlanApiCaseResult"; import TestPlan from "../../../../../api/definition/components/jmeter/components/test-plan";
import TestPlan from "../../../../../api/definition/components/jmeter/components/test-plan"; import ThreadGroup from "../../../../../api/definition/components/jmeter/components/thread-group";
import ThreadGroup from "../../../../../api/definition/components/jmeter/components/thread-group";
export default { export default {
name: "TestPlanApiCaseList", name: "TestPlanApiCaseList",
components: { components: {
TestPlanApiCaseResult, TestPlanApiCaseResult,
MsRun, MsRun,
TestPlanCaseListHeader, TestPlanCaseListHeader,
ApiCaseList, ApiCaseList,
PriorityTableItem, PriorityTableItem,
ApiListContainer, ApiListContainer,
MsTableOperatorButton, MsTableOperatorButton,
MsTableOperator, MsTableOperator,
MsTablePagination, MsTablePagination,
MsTag, MsTag,
MsApiCaseList, MsApiCaseList,
MsContainer, MsContainer,
MsBottomContainer, MsBottomContainer,
ShowMoreBtn, ShowMoreBtn,
MsBatchEdit MsBatchEdit
},
data() {
return {
condition: {},
selectCase: {},
result: {},
moduleId: "",
deletePath: "/test/case/delete",
selectRows: new Set(),
buttons: [
{name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch},
{name: this.$t('api_test.automation.batch_execute'), handleClick: this.handleBatchExecute}
],
typeArr: [
{id: 'priority', name: this.$t('test_track.case.priority')},
],
priorityFilters: [
{text: 'P0', value: 'P0'},
{text: 'P1', value: 'P1'},
{text: 'P2', value: 'P2'},
{text: 'P3', value: 'P3'}
],
valueArr: {
priority: CASE_PRIORITY,
},
methodColorMap: new Map(API_METHOD_COLOUR),
tableData: [],
currentPage: 1,
pageSize: 10,
total: 0,
screenHeight: document.documentElement.clientHeight - 330,//屏幕高度
// environmentId: undefined,
currentCaseProjectId: "",
runData: [],
reportId: "",
response: {},
rowLoading: ""
}
},
props: {
currentProtocol: String,
selectNodeIds: Array,
visible: {
type: Boolean,
default: false,
}, },
data() { isApiListEnable: {
return { type: Boolean,
condition: {}, default: false,
selectCase: {}, },
result: {}, isReadOnly: {
moduleId: "", type: Boolean,
deletePath: "/test/case/delete", default: false
selectRows: new Set(), },
buttons: [ isCaseRelevance: {
{name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch}, type: Boolean,
{name: this.$t('api_test.automation.batch_execute'), handleClick: this.handleBatchExecute} default: false,
], },
typeArr: [ model: {
{id: 'priority', name: this.$t('test_track.case.priority')}, type: String,
], default() {
priorityFilters: [ 'api'
{text: 'P0', value: 'P0'},
{text: 'P1', value: 'P1'},
{text: 'P2', value: 'P2'},
{text: 'P3', value: 'P3'}
],
valueArr: {
priority: CASE_PRIORITY,
},
methodColorMap: new Map(API_METHOD_COLOUR),
tableData: [],
currentPage: 1,
pageSize: 10,
total: 0,
screenHeight: document.documentElement.clientHeight - 330,//屏幕高度
// environmentId: undefined,
currentCaseProjectId: "",
runData: [],
reportId: "",
response: {},
rowLoading: ""
} }
}, },
props: { planId: String
currentProtocol: String, },
selectNodeIds: Array, created: function () {
visible: { this.initTable();
type: Boolean, },
default: false, watch: {
}, selectNodeIds() {
isApiListEnable: {
type: Boolean,
default: false,
},
isReadOnly: {
type: Boolean,
default: false
},
isCaseRelevance: {
type: Boolean,
default: false,
},
model: {
type: String,
default() {
'api'
}
},
planId: String
},
created: function () {
this.initTable(); this.initTable();
}, },
watch: { currentProtocol() {
selectNodeIds() { this.initTable();
this.initTable(); },
}, planId() {
currentProtocol() { this.initTable();
this.initTable(); }
}, },
planId() { computed: {
this.initTable(); // 测试计划关联测试列表
isRelevanceModel() {
return this.model === 'relevance'
},
// 测试计划接口用例列表
isPlanModel() {
return this.model === 'plan'
},
// 接口定义用例列表
isApiModel() {
return this.model === 'api'
},
},
methods: {
isApiListEnableChange(data) {
this.$emit('isApiListEnableChange', data);
},
initTable() {
this.selectRows = new Set();
this.condition.status = "";
this.condition.moduleIds = this.selectNodeIds;
this.condition.planId = this.planId;
if (this.currentProtocol != null) {
this.condition.protocol = this.currentProtocol;
}
this.result = this.$post('/test/plan/api/case/list/' + this.currentPage + "/" + this.pageSize, this.condition, response => {
this.total = response.data.itemCount;
this.tableData = response.data.listObject;
this.tableData.forEach(row => {
row.showTags = JSON.parse(row.tags);
})
});
},
handleSelect(selection, row) {
row.hashTree = [];
if (this.selectRows.has(row)) {
this.$set(row, "showMore", false);
this.selectRows.delete(row);
} else {
this.$set(row, "showMore", true);
this.selectRows.add(row);
}
let arr = Array.from(this.selectRows);
// 选中1个以上的用例时显示更多操作
if (this.selectRows.size === 1) {
this.$set(arr[0], "showMore", false);
} else if (this.selectRows.size === 2) {
arr.forEach(row => {
this.$set(row, "showMore", true);
})
} }
}, },
computed: { showExecResult(row) {
// 测试计划关联测试列表 this.$emit('showExecResult', row);
isRelevanceModel() {
return this.model === 'relevance'
},
// 测试计划接口用例列表
isPlanModel() {
return this.model === 'plan'
},
// 接口定义用例列表
isApiModel() {
return this.model === 'api'
},
}, },
methods: { filter(filters) {
isApiListEnableChange(data) { _filter(filters, this.condition);
this.$emit('isApiListEnableChange', data); this.initTable();
}, },
initTable() { sort(column) {
this.selectRows = new Set(); // 每次只对一个字段排序
this.condition.status = ""; if (this.condition.orders) {
this.condition.moduleIds = this.selectNodeIds; this.condition.orders = [];
}
this.condition.planId = this.planId; _sort(column, this.condition);
this.initTable();
if (this.currentProtocol != null) { },
this.condition.protocol = this.currentProtocol; handleSelectAll(selection) {
} if (selection.length > 0) {
this.result = this.$post('/test/plan/api/case/list/' + this.currentPage + "/" + this.pageSize, this.condition, response => { if (selection.length === 1) {
this.total = response.data.itemCount; selection.hashTree = [];
this.tableData = response.data.listObject; this.selectRows.add(selection[0]);
});
},
handleSelect(selection, row) {
row.hashTree = [];
if (this.selectRows.has(row)) {
this.$set(row, "showMore", false);
this.selectRows.delete(row);
} else { } else {
this.$set(row, "showMore", true); this.tableData.forEach(item => {
this.selectRows.add(row); item.hashTree = [];
this.$set(item, "showMore", true);
this.selectRows.add(item);
});
} }
let arr = Array.from(this.selectRows); } else {
// 选中1个以上的用例时显示更多操作 this.selectRows.clear();
if (this.selectRows.size === 1) { this.tableData.forEach(row => {
this.$set(arr[0], "showMore", false); this.$set(row, "showMore", false);
} else if (this.selectRows.size === 2) { })
arr.forEach(row => { }
this.$set(row, "showMore", true); },
}) search() {
} this.initTable();
}, },
showExecResult(row) { buildPagePath(path) {
this.$emit('showExecResult', row); return path + "/" + this.currentPage + "/" + this.pageSize;
}, },
filter(filters) { reductionApi(row) {
_filter(filters, this.condition); let ids = [row.id];
this.initTable(); this.$post('/api/testcase/reduction/', ids, () => {
}, this.$success(this.$t('commons.save_success'));
sort(column) { this.search();
// 每次只对一个字段排序 });
if (this.condition.orders) { },
this.condition.orders = []; handleDeleteBatch() {
} this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
_sort(column, this.condition); confirmButtonText: this.$t('commons.confirm'),
this.initTable(); callback: (action) => {
}, if (action === 'confirm') {
handleSelectAll(selection) { let param = {};
if (selection.length > 0) { param.ids = Array.from(this.selectRows).map(row => row.id);
if (selection.length === 1) { param.planId = this.planId;
selection.hashTree = []; this.$post('/test/plan/api/case/batch/delete', param, () => {
this.selectRows.add(selection[0]); this.selectRows.clear();
} else { this.initTable();
this.tableData.forEach(item => { this.$emit('refresh');
item.hashTree = []; this.$success(this.$t('test_track.cancel_relevance_success'));
this.$set(item, "showMore", true);
this.selectRows.add(item);
}); });
} }
} else {
this.selectRows.clear();
this.tableData.forEach(row => {
this.$set(row, "showMore", false);
})
} }
}, });
search() { },
this.initTable(); getResult(data) {
}, if (RESULT_MAP.get(data)) {
buildPagePath(path) { return RESULT_MAP.get(data);
return path + "/" + this.currentPage + "/" + this.pageSize; } else {
}, return RESULT_MAP.get("default");
reductionApi(row) { }
let ids = [row.id]; },
this.$post('/api/testcase/reduction/', ids, () => { runRefresh(data) {
this.$success(this.$t('commons.save_success')); this.rowLoading = "";
this.search(); this.$success(this.$t('schedule.event_success'));
}); this.initTable();
}, },
handleDeleteBatch() { singleRun(row) {
this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', { if (!row.environmentId) {
confirmButtonText: this.$t('commons.confirm'), this.$warning(this.$t('api_test.environment.select_environment'));
callback: (action) => { return;
if (action === 'confirm') { }
let param = {}; this.runData = [];
param.ids = Array.from(this.selectRows).map(row => row.id);
param.planId = this.planId;
this.$post('/test/plan/api/case/batch/delete', param, () => {
this.selectRows.clear();
this.initTable();
this.$emit('refresh');
this.$success(this.$t('test_track.cancel_relevance_success'));
});
}
}
});
},
getResult(data) {
if (RESULT_MAP.get(data)) {
return RESULT_MAP.get(data);
} else {
return RESULT_MAP.get("default");
}
},
runRefresh(data) {
this.rowLoading = "";
this.$success(this.$t('schedule.event_success'));
this.initTable();
},
singleRun(row) {
if (!row.environmentId) {
this.$warning(this.$t('api_test.environment.select_environment'));
return;
}
this.runData = [];
this.rowLoading = row.id; this.rowLoading = row.id;
this.$get('/api/testcase/get/' + row.caseId, (response) => {
let apiCase = response.data;
let request = JSON.parse(apiCase.request);
request.name = row.id;
request.id = row.id;
request.useEnvironment = row.environmentId;
this.runData.push(request);
/*触发执行操作*/
this.reportId = getUUID().substring(0, 8);
});
},
batchEdit(form) {
let arr = Array.from(this.selectRows);
let ids = arr.map(row => row.id);
let param = {};
param[form.type] = form.value;
param.ids = ids;
this.$post('/api/testcase/batch/edit', param, () => {
this.$success(this.$t('commons.save_success'));
this.initTable();
});
},
handleBatchExecute() {
this.selectRows.forEach(row => {
this.$get('/api/testcase/get/' + row.caseId, (response) => { this.$get('/api/testcase/get/' + row.caseId, (response) => {
let apiCase = response.data; let apiCase = response.data;
let request = JSON.parse(apiCase.request); let request = JSON.parse(apiCase.request);
request.name = row.id; request.name = row.id;
request.id = row.id; request.id = row.id;
request.useEnvironment = row.environmentId; request.useEnvironment = row.environmentId;
this.runData.push(request); let runData = [];
/*触发执行操作*/ runData.push(request);
this.reportId = getUUID().substring(0, 8); this.batchRun(runData, getUUID().substring(0, 8));
}); });
}, });
batchEdit(form) { this.$message('任务执行中，请稍后刷新查看结果');
let arr = Array.from(this.selectRows); this.search();
let ids = arr.map(row => row.id);
let param = {};
param[form.type] = form.value;
param.ids = ids;
this.$post('/api/testcase/batch/edit', param, () => {
this.$success(this.$t('commons.save_success'));
this.initTable();
});
},
handleBatchExecute() {
this.selectRows.forEach(row => {
this.$get('/api/testcase/get/' + row.caseId, (response) => {
let apiCase = response.data;
let request = JSON.parse(apiCase.request);
request.name = row.id;
request.id = row.id;
request.useEnvironment = row.environmentId;
let runData = [];
runData.push(request);
this.batchRun(runData, getUUID().substring(0, 8));
});
});
this.$message('任务执行中，请稍后刷新查看结果');
this.search();
},
batchRun(runData, reportId) {
let testPlan = new TestPlan();
let threadGroup = new ThreadGroup();
threadGroup.hashTree = [];
testPlan.hashTree = [threadGroup];
runData.forEach(item => {
threadGroup.hashTree.push(item);
});
let reqObj = {id: reportId, testElement: testPlan, type: 'API_PLAN', reportId: "run"};
let bodyFiles = getBodyUploadFiles(reqObj, runData);
this.$fileUpload("/api/definition/run", null, bodyFiles, reqObj, response => {
});
},
handleDelete(apiCase) {
this.$get('/test/plan/api/case/delete/' + apiCase.id, () => {
this.$success(this.$t('test_track.cancel_relevance_success'));
this.$emit('refresh');
this.initTable();
});
return;
},
getProjectId() {
if (!this.isRelevanceModel) {
return getCurrentProjectID();
} else {
return this.currentCaseProjectId;
}
},
setEnvironment(data) {
// this.environmentId = data.id;
},
getReportResult(apiCase) {
let url = "/api/definition/report/getReport/" + apiCase.id + '/' + 'API_PLAN';
this.$get(url, response => {
if (response.data) {
this.response = JSON.parse(response.data.content);
this.$refs.apiCaseResult.open();
}
});
},
}, },
} batchRun(runData, reportId) {
let testPlan = new TestPlan();
let threadGroup = new ThreadGroup();
threadGroup.hashTree = [];
testPlan.hashTree = [threadGroup];
runData.forEach(item => {
threadGroup.hashTree.push(item);
});
let reqObj = {id: reportId, testElement: testPlan, type: 'API_PLAN', reportId: "run"};
let bodyFiles = getBodyUploadFiles(reqObj, runData);
this.$fileUpload("/api/definition/run", null, bodyFiles, reqObj, response => {
});
},
handleDelete(apiCase) {
this.$get('/test/plan/api/case/delete/' + apiCase.id, () => {
this.$success(this.$t('test_track.cancel_relevance_success'));
this.$emit('refresh');
this.initTable();
});
return;
},
getProjectId() {
if (!this.isRelevanceModel) {
return getCurrentProjectID();
} else {
return this.currentCaseProjectId;
}
},
setEnvironment(data) {
// this.environmentId = data.id;
},
getReportResult(apiCase) {
let url = "/api/definition/report/getReport/" + apiCase.id + '/' + 'API_PLAN';
this.$get(url, response => {
if (response.data) {
this.response = JSON.parse(response.data.content);
this.$refs.apiCaseResult.open();
}
});
},
},
}
</script> </script>
<style scoped> <style scoped>
.operate-button > div { .operate-button > div {
display: inline-block; display: inline-block;
margin-left: 10px; margin-left: 10px;
} }
.request-method { .request-method {
padding: 0 5px; padding: 0 5px;
color: #1E90FF; color: #1E90FF;
} }
.api-el-tag { .api-el-tag {
color: white; color: white;
} }
.search-input { .search-input {
float: right; float: right;
width: 300px; width: 300px;
/*margin-bottom: 20px;*/ /*margin-bottom: 20px;*/
margin-right: 20px; margin-right: 20px;
} }
.el-tag {
margin-left: 10px;
}
</style> </style>