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

@ -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,25 +116,24 @@
<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 {
export default {
name: "ApiList",
components: {
MsTableSelectAll,
@ -172,8 +181,8 @@
screenHeight: document.documentElement.clientHeight - 330,//,
environmentId: undefined,
selectAll: false,
unSelection:[],
selectDataCounts:0,
unSelection: [],
selectDataCounts: 0,
}
},
props: {
@ -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);
})
});
}
},
@ -488,52 +501,57 @@
</script>
<style scoped>
.operate-button > div {
.operate-button > div {
display: inline-block;
margin-left: 10px;
}
}
.request-method {
.request-method {
padding: 0 5px;
color: #1E90FF;
}
}
.api-el-tag {
.api-el-tag {
color: white;
}
}
.search-input {
.search-input {
float: right;
width: 300px;
margin-right: 20px;
}
}
.api-list >>> th:first-child {
.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) {
.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 {
.api-list >>> th:first-child > .cell {
padding: 5px;
width: 30px;
}
.api-list >>> th:nth-child(2)>.cell {
/*background-color: black;*/
}
}
.api-list >>> .el-dropdown {
.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

@ -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>
@ -106,29 +115,28 @@
<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 {
export default {
name: "TestPlanApiCaseList",
components: {
TestPlanApiCaseResult,
@ -257,6 +265,9 @@
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) {
@ -443,29 +454,32 @@
});
},
},
}
}
</script>
<style scoped>
.operate-button > div {
.operate-button > div {
display: inline-block;
margin-left: 10px;
}
}
.request-method {
.request-method {
padding: 0 5px;
color: #1E90FF;
}
}
.api-el-tag {
.api-el-tag {
color: white;
}
}
.search-input {
.search-input {
float: right;
width: 300px;
/*margin-bottom: 20px;*/
margin-right: 20px;
}
}
.el-tag {
margin-left: 10px;
}
</style>