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

View File

@ -18,7 +18,7 @@
<select id="list" resultType="io.metersphere.api.dto.definition.TestPlanApiCaseDTO">
select
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
from
test_plan_api_case t

View File

@ -1,8 +1,8 @@
<template>
<div>
<api-list-container
:is-api-list-enable="isApiListEnable"
@isApiListEnableChange="isApiListEnableChange">
:is-api-list-enable="isApiListEnable"
@isApiListEnableChange="isApiListEnableChange">
<el-input placeholder="搜索" @blur="search" class="search-input" size="small" @keyup.enter.native="search"
v-model="condition.name"/>
@ -47,8 +47,9 @@
:label="$t('api_test.definition.api_type')"
show-overflow-tooltip>
<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">
{{ scope.row.method}}
<el-tag size="mini" :style="{'background-color': getColor(true, scope.row.method), border: getColor(true, scope.row.method)}"
class="api-el-tag">
{{ scope.row.method }}
</el-tag>
</template>
</el-table-column>
@ -63,6 +64,15 @@
:label="$t('api_test.definition.api_principal')"
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">
<template v-slot:default="scope">
<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">
<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="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="handleDelete(scope.row)" style="color: #F56C6C" v-tester>{{$t('commons.delete')}}</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="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>
</template>
</el-table-column>
</el-table>
@ -106,133 +116,132 @@
<script>
import MsTableHeader from '../../../../common/components/MsTableHeader';
import MsTableOperator from "../../../../common/components/MsTableOperator";
import MsTableOperatorButton from "../../../../common/components/MsTableOperatorButton";
import MsTableButton from "../../../../common/components/MsTableButton";
import {LIST_CHANGE, TrackEvent} from "@/business/components/common/head/ListEvent";
import MsTablePagination from "../../../../common/pagination/TablePagination";
import MsTag from "../../../../common/components/MsTag";
import MsApiCaseList from "../case/ApiCaseList";
import MsContainer from "../../../../common/components/MsContainer";
import MsBottomContainer from "../BottomContainer";
import ShowMoreBtn from "../../../../track/case/components/ShowMoreBtn";
import MsBatchEdit from "../basis/BatchEdit";
import {API_METHOD_COLOUR, REQ_METHOD, API_STATUS} from "../../model/JsonData";
import {getCurrentProjectID} from "@/common/js/utils";
import {WORKSPACE_ID} from '../../../../../../common/js/constants';
import ApiListContainer from "./ApiListContainer";
import MsTableSelectAll from "../../../../common/components/table/MsTableSelectAll";
import MsTableHeader from '../../../../common/components/MsTableHeader';
import MsTableOperator from "../../../../common/components/MsTableOperator";
import MsTableOperatorButton from "../../../../common/components/MsTableOperatorButton";
import MsTableButton from "../../../../common/components/MsTableButton";
import MsTablePagination from "../../../../common/pagination/TablePagination";
import MsTag from "../../../../common/components/MsTag";
import MsApiCaseList from "../case/ApiCaseList";
import MsContainer from "../../../../common/components/MsContainer";
import MsBottomContainer from "../BottomContainer";
import ShowMoreBtn from "../../../../track/case/components/ShowMoreBtn";
import MsBatchEdit from "../basis/BatchEdit";
import {API_METHOD_COLOUR, API_STATUS, REQ_METHOD} from "../../model/JsonData";
import {getCurrentProjectID} from "@/common/js/utils";
import {WORKSPACE_ID} from '@/common/js/constants';
import ApiListContainer from "./ApiListContainer";
import MsTableSelectAll from "../../../../common/components/table/MsTableSelectAll";
export default {
name: "ApiList",
components: {
MsTableSelectAll,
ApiListContainer,
MsTableButton,
MsTableOperatorButton,
MsTableOperator,
MsTableHeader,
MsTablePagination,
MsTag,
MsApiCaseList,
MsContainer,
MsBottomContainer,
ShowMoreBtn,
MsBatchEdit
export default {
name: "ApiList",
components: {
MsTableSelectAll,
ApiListContainer,
MsTableButton,
MsTableOperatorButton,
MsTableOperator,
MsTableHeader,
MsTablePagination,
MsTag,
MsApiCaseList,
MsContainer,
MsBottomContainer,
ShowMoreBtn,
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() {
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,
}
isCaseRelevance: {
type: Boolean,
default: false,
},
props: {
currentProtocol: String,
selectNodeIds: Array,
isSelectThisWeek: String,
visible: {
type: Boolean,
default: false,
},
isCaseRelevance: {
type: Boolean,
default: false,
},
trashEnable: {
type: Boolean,
default: false,
},
isApiListEnable: Boolean,
isReadOnly: {
type: Boolean,
default: false
},
trashEnable: {
type: Boolean,
default: false,
},
created: function () {
isApiListEnable: Boolean,
isReadOnly: {
type: Boolean,
default: false
},
},
created: function () {
this.initTable();
this.getMaintainerOptions();
},
watch: {
selectNodeIds() {
this.initTable();
this.getMaintainerOptions();
},
watch: {
selectNodeIds() {
currentProtocol() {
this.initTable();
},
trashEnable() {
if (this.trashEnable) {
this.initTable();
},
currentProtocol() {
this.initTable();
},
trashEnable() {
if (this.trashEnable) {
this.initTable();
}
}
}
},
methods: {
isApiListEnableChange(data) {
this.$emit('isApiListEnableChange', data);
},
methods: {
isApiListEnableChange(data) {
this.$emit('isApiListEnableChange', data);
},
initTable() {
this.selectRows = new Set();
initTable() {
this.selectRows = new Set();
this.selectAll = false;
this.unSelection = [];
this.selectDataCounts = 0;
this.selectAll = false;
this.unSelection = [];
this.selectDataCounts = 0;
this.condition.filters = ["Prepare", "Underway", "Completed"];
this.condition.filters = ["Prepare", "Underway", "Completed"];
this.condition.moduleIds = this.selectNodeIds;
if (this.trashEnable) {
this.condition.filters = ["Trash"];
this.condition.moduleIds = [];
}
this.condition.moduleIds = this.selectNodeIds;
if (this.trashEnable) {
this.condition.filters = ["Trash"];
this.condition.moduleIds = [];
}
this.condition.projectId = getCurrentProjectID();
if (this.currentProtocol != null) {
@ -243,7 +252,7 @@
this.getSelectDataRange();
this.condition.selectThisWeedData = false;
this.condition.apiCaseCoverage = null;
switch (this.selectDataRange){
switch (this.selectDataRange) {
case 'thisWeekCount':
this.condition.selectThisWeedData = true;
break;
@ -268,6 +277,10 @@
this.total = response.data.itemCount;
this.tableData = response.data.listObject;
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;
},
editApi(row) {
this.$emit('editApi', row);
},
reductionApi(row) {
row.request = null;
row.response = null;
let rows = [row];
this.$post('/api/definition/reduction/', rows, () => {
this.$success(this.$t('commons.save_success'));
this.search();
editApi(row) {
this.$emit('editApi', row);
},
reductionApi(row) {
row.request = null;
row.response = null;
let rows = [row];
this.$post('/api/definition/reduction/', rows, () => {
this.$success(this.$t('commons.save_success'));
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'));
});
}
}
});
},
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 {
this.$alert(this.$t('api_test.definition.request.delete_confirm') + "", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
let ids = Array.from(this.selectRows).map(row => row.id);
let deleteParam = {};
deleteParam.dataIds = ids;
deleteParam.projectId = getCurrentProjectID();
deleteParam.selectAllDate = this.isSelectAllDate;
deleteParam.unSelectIds = this.unSelection;
deleteParam = Object.assign(deleteParam, this.condition);
this.$post('/api/definition/removeToGcByParams/', deleteParam, () => {
this.selectRows.clear();
this.initTable();
this.$success(this.$t('commons.delete_success'));
this.$refs.caseList.apiCaseClose();
});
}
});
} else {
this.$alert(this.$t('api_test.definition.request.delete_confirm') + "", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
let ids = Array.from(this.selectRows).map(row => row.id);
let deleteParam = {};
deleteParam.dataIds = ids;
deleteParam.projectId = getCurrentProjectID();
deleteParam.selectAllDate = this.isSelectAllDate;
deleteParam.unSelectIds = this.unSelection;
deleteParam = Object.assign(deleteParam, this.condition);
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;
}
});
}
},
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.selectAllDate = this.isSelectAllDate;
param.unSelectIds = this.unSelection;
param = Object.assign(param, this.condition);
param.projectId = getCurrentProjectID();
param.selectAllDate = this.isSelectAllDate;
param.unSelectIds = this.unSelection;
param = Object.assign(param, this.condition);
this.$post('/api/definition/batch/editByParams', param, () => {
this.$success(this.$t('commons.save_success'));
@ -488,52 +501,57 @@
</script>
<style scoped>
.operate-button > div {
display: inline-block;
margin-left: 10px;
}
.operate-button > div {
display: inline-block;
margin-left: 10px;
}
.request-method {
padding: 0 5px;
color: #1E90FF;
}
.request-method {
padding: 0 5px;
color: #1E90FF;
}
.api-el-tag {
color: white;
}
.api-el-tag {
color: white;
}
.search-input {
float: right;
width: 300px;
margin-right: 20px;
}
.search-input {
float: right;
width: 300px;
margin-right: 20px;
}
.api-list >>> th:first-child {
/*border: 1px solid #DCDFE6;*/
/*border-right: 0px;*/
/*border-top-left-radius:5px;*/
/*border-bottom-left-radius:5px;*/
/*width: 20px;*/
.api-list >>> th:first-child {
/*border: 1px solid #DCDFE6;*/
/*border-right: 0px;*/
/*border-top-left-radius:5px;*/
/*border-bottom-left-radius:5px;*/
/*width: 20px;*/
}
}
.api-list >>> th:nth-child(2) {
/*border: 1px solid #DCDFE6;*/
/*border-left: 0px;*/
/*border-top-right-radius:5px;*/
/*border-bottom-right-radius:5px;*/
}
.api-list >>> th:nth-child(2) {
/*border: 1px solid #DCDFE6;*/
/*border-left: 0px;*/
/*border-top-right-radius:5px;*/
/*border-bottom-right-radius:5px;*/
}
.api-list >>> th:first-child>.cell {
padding: 5px;
width: 30px;
}
.api-list >>> th:nth-child(2)>.cell {
/*background-color: black;*/
}
.api-list >>> th:first-child > .cell {
padding: 5px;
width: 30px;
}
.api-list >>> .el-dropdown {
float: left;
}
.api-list >>> th:nth-child(2) > .cell {
/*background-color: black;*/
}
.api-list >>> .el-dropdown {
float: left;
}
.el-tag {
margin-left: 10px;
}
</style>

View File

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

View File

@ -2,14 +2,14 @@
<div class="card-container">
<el-card class="card-content" v-loading="result.loading">
<template v-slot:header>
<test-plan-case-list-header
:project-id="getProjectId()"
:condition="condition"
:plan-id="planId"
@refresh="initTable"
@relevanceCase="$emit('relevanceCase')"
@setEnvironment="setEnvironment"
v-if="isPlanModel"/>
<test-plan-case-list-header
:project-id="getProjectId()"
:condition="condition"
:plan-id="planId"
@refresh="initTable"
@relevanceCase="$emit('relevanceCase')"
@setEnvironment="setEnvironment"
v-if="isPlanModel"/>
</template>
<el-table v-loading="result.loading"
@ -60,8 +60,17 @@
</template>
</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">
<template v-slot:default="scope" >
<template v-slot:default="scope">
<div v-loading="rowLoading === scope.row.id">
<el-link type="danger"
v-if="scope.row.execResult && scope.row.execResult === 'error'"
@ -73,8 +82,8 @@
<div v-else v-text="getResult(scope.row.execResult)"/>
<div v-if="scope.row.id" style="color: #999999;font-size: 12px">
<span> {{scope.row.updateTime | timestampFormatDate }}</span>
{{scope.row.updateUser}}
<span> {{ scope.row.updateTime | timestampFormatDate }}</span>
{{ scope.row.updateUser }}
</div>
</div>
</template>
@ -82,10 +91,10 @@
<el-table-column v-if="!isReadOnly" :label="$t('commons.operating')" align="center">
<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"
@exec="singleRun(scope.row)" v-tester/>
<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/>
<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/>
<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/>
</template>
</el-table-column>
@ -106,366 +115,371 @@
<script>
import MsTableOperator from "../../../../../common/components/MsTableOperator";
import MsTableOperatorButton from "../../../../../common/components/MsTableOperatorButton";
import {LIST_CHANGE, TrackEvent} from "@/business/components/common/head/ListEvent";
import MsTablePagination from "../../../../../common/pagination/TablePagination";
import MsTag from "../../../../../common/components/MsTag";
import MsApiCaseList from "../../../../../api/definition/components/case/ApiCaseList";
import MsContainer from "../../../../../common/components/MsContainer";
import MsBottomContainer from "../../../../../api/definition/components/BottomContainer";
import ShowMoreBtn from "../../../../case/components/ShowMoreBtn";
import MsBatchEdit from "../../../../../api/definition/components/basis/BatchEdit";
import {API_METHOD_COLOUR, CASE_PRIORITY, RESULT_MAP} from "../../../../../api/definition/model/JsonData";
import {getCurrentProjectID} from "@/common/js/utils";
import ApiListContainer from "../../../../../api/definition/components/list/ApiListContainer";
import PriorityTableItem from "../../../../common/tableItems/planview/PriorityTableItem";
import ApiCaseList from "../../../../../api/definition/components/case/ApiCaseList";
import {_filter, _sort, getUUID, getBodyUploadFiles} from "../../../../../../../common/js/utils";
import TestPlanCaseListHeader from "./TestPlanCaseListHeader";
import MsRun from "../../../../../api/definition/components/Run";
import TestPlanApiCaseResult from "./TestPlanApiCaseResult";
import TestPlan from "../../../../../api/definition/components/jmeter/components/test-plan";
import ThreadGroup from "../../../../../api/definition/components/jmeter/components/thread-group";
import MsTableOperator from "../../../../../common/components/MsTableOperator";
import MsTableOperatorButton from "../../../../../common/components/MsTableOperatorButton";
import MsTablePagination from "../../../../../common/pagination/TablePagination";
import MsTag from "../../../../../common/components/MsTag";
import MsApiCaseList from "../../../../../api/definition/components/case/ApiCaseList";
import ApiCaseList from "../../../../../api/definition/components/case/ApiCaseList";
import MsContainer from "../../../../../common/components/MsContainer";
import MsBottomContainer from "../../../../../api/definition/components/BottomContainer";
import ShowMoreBtn from "../../../../case/components/ShowMoreBtn";
import MsBatchEdit from "../../../../../api/definition/components/basis/BatchEdit";
import {API_METHOD_COLOUR, CASE_PRIORITY, RESULT_MAP} from "../../../../../api/definition/model/JsonData";
import {getCurrentProjectID} from "@/common/js/utils";
import ApiListContainer from "../../../../../api/definition/components/list/ApiListContainer";
import PriorityTableItem from "../../../../common/tableItems/planview/PriorityTableItem";
import {_filter, _sort, getBodyUploadFiles, getUUID} from "../../../../../../../common/js/utils";
import TestPlanCaseListHeader from "./TestPlanCaseListHeader";
import MsRun from "../../../../../api/definition/components/Run";
import TestPlanApiCaseResult from "./TestPlanApiCaseResult";
import TestPlan from "../../../../../api/definition/components/jmeter/components/test-plan";
import ThreadGroup from "../../../../../api/definition/components/jmeter/components/thread-group";
export default {
name: "TestPlanApiCaseList",
components: {
TestPlanApiCaseResult,
MsRun,
TestPlanCaseListHeader,
ApiCaseList,
PriorityTableItem,
ApiListContainer,
MsTableOperatorButton,
MsTableOperator,
MsTablePagination,
MsTag,
MsApiCaseList,
MsContainer,
MsBottomContainer,
ShowMoreBtn,
MsBatchEdit
export default {
name: "TestPlanApiCaseList",
components: {
TestPlanApiCaseResult,
MsRun,
TestPlanCaseListHeader,
ApiCaseList,
PriorityTableItem,
ApiListContainer,
MsTableOperatorButton,
MsTableOperator,
MsTablePagination,
MsTag,
MsApiCaseList,
MsContainer,
MsBottomContainer,
ShowMoreBtn,
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() {
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: ""
isApiListEnable: {
type: Boolean,
default: false,
},
isReadOnly: {
type: Boolean,
default: false
},
isCaseRelevance: {
type: Boolean,
default: false,
},
model: {
type: String,
default() {
'api'
}
},
props: {
currentProtocol: String,
selectNodeIds: Array,
visible: {
type: Boolean,
default: false,
},
isApiListEnable: {
type: Boolean,
default: false,
},
isReadOnly: {
type: Boolean,
default: false
},
isCaseRelevance: {
type: Boolean,
default: false,
},
model: {
type: String,
default() {
'api'
}
},
planId: String
},
created: function () {
planId: String
},
created: function () {
this.initTable();
},
watch: {
selectNodeIds() {
this.initTable();
},
watch: {
selectNodeIds() {
this.initTable();
},
currentProtocol() {
this.initTable();
},
planId() {
this.initTable();
currentProtocol() {
this.initTable();
},
planId() {
this.initTable();
}
},
computed: {
//
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: {
//
isRelevanceModel() {
return this.model === 'relevance'
},
//
isPlanModel() {
return this.model === 'plan'
},
//
isApiModel() {
return this.model === 'api'
},
showExecResult(row) {
this.$emit('showExecResult', row);
},
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;
});
},
handleSelect(selection, row) {
row.hashTree = [];
if (this.selectRows.has(row)) {
this.$set(row, "showMore", false);
this.selectRows.delete(row);
filter(filters) {
_filter(filters, this.condition);
this.initTable();
},
sort(column) {
//
if (this.condition.orders) {
this.condition.orders = [];
}
_sort(column, this.condition);
this.initTable();
},
handleSelectAll(selection) {
if (selection.length > 0) {
if (selection.length === 1) {
selection.hashTree = [];
this.selectRows.add(selection[0]);
} else {
this.$set(row, "showMore", true);
this.selectRows.add(row);
this.tableData.forEach(item => {
item.hashTree = [];
this.$set(item, "showMore", true);
this.selectRows.add(item);
});
}
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);
})
}
},
showExecResult(row) {
this.$emit('showExecResult', row);
},
filter(filters) {
_filter(filters, this.condition);
this.initTable();
},
sort(column) {
//
if (this.condition.orders) {
this.condition.orders = [];
}
_sort(column, this.condition);
this.initTable();
},
handleSelectAll(selection) {
if (selection.length > 0) {
if (selection.length === 1) {
selection.hashTree = [];
this.selectRows.add(selection[0]);
} else {
this.tableData.forEach(item => {
item.hashTree = [];
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();
},
buildPagePath(path) {
return path + "/" + this.currentPage + "/" + this.pageSize;
},
reductionApi(row) {
let ids = [row.id];
this.$post('/api/testcase/reduction/', ids, () => {
this.$success(this.$t('commons.save_success'));
this.search();
});
},
handleDeleteBatch() {
this.$alert(this.$t('api_test.definition.request.delete_confirm') + "", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
let param = {};
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'));
});
}
} else {
this.selectRows.clear();
this.tableData.forEach(row => {
this.$set(row, "showMore", false);
})
}
},
search() {
this.initTable();
},
buildPagePath(path) {
return path + "/" + this.currentPage + "/" + this.pageSize;
},
reductionApi(row) {
let ids = [row.id];
this.$post('/api/testcase/reduction/', ids, () => {
this.$success(this.$t('commons.save_success'));
this.search();
});
},
handleDeleteBatch() {
this.$alert(this.$t('api_test.definition.request.delete_confirm') + "", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
let param = {};
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 = [];
});
},
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) => {
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);
let runData = [];
runData.push(request);
this.batchRun(runData, 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) => {
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();
}
});
},
});
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();
}
});
},
},
}
</script>
<style scoped>
.operate-button > div {
display: inline-block;
margin-left: 10px;
}
.operate-button > div {
display: inline-block;
margin-left: 10px;
}
.request-method {
padding: 0 5px;
color: #1E90FF;
}
.request-method {
padding: 0 5px;
color: #1E90FF;
}
.api-el-tag {
color: white;
}
.api-el-tag {
color: white;
}
.search-input {
float: right;
width: 300px;
/*margin-bottom: 20px;*/
margin-right: 20px;
}
.search-input {
float: right;
width: 300px;
/*margin-bottom: 20px;*/
margin-right: 20px;
}
.el-tag {
margin-left: 10px;
}
</style>