fix(测试跟踪): 高级搜索后切换项目-搜索条件未重置

--bug=1025858 --user=宋天阳 【测试跟踪】测试计划-关联接口用例-高级搜索后切换项目-搜索条件未重置
https://www.tapd.cn/55049933/s/1369161
This commit is contained in:
song-tianyang 2023-05-05 19:34:57 +08:00 committed by 建国
parent f7e8e33148
commit e2ef163c03
3 changed files with 270 additions and 207 deletions

View File

@ -1,13 +1,17 @@
<template>
<span>
<slot name="header"></slot>
<ms-search
:condition.sync="condition"
@search="search">
<ms-search v-if="resetOver" :condition.sync="condition" @search="search">
</ms-search>
<ms-table :data="tableData" :select-node-ids="selectNodeIds" :condition="condition" :page-size="pageSize"
:total="total" enableSelection @selectCountChange="selectCountChange"
<ms-table
:data="tableData"
:select-node-ids="selectNodeIds"
:condition="condition"
:page-size="pageSize"
:total="total"
enableSelection
@selectCountChange="selectCountChange"
:screenHeight="screenHeight"
row-key="id"
:reserve-option="true"
@ -15,19 +19,16 @@
operator-width="170px"
@order="initTable"
@filter="search"
ref="apitable">
<ms-table-column
prop="num"
label="ID"
min-width="80px"
sortable>
ref="apitable"
>
<ms-table-column prop="num" label="ID" min-width="80px" sortable>
</ms-table-column>
<ms-table-column
prop="name"
:label="$t('api_test.definition.api_name')"
sortable
width="120px"/>
width="120px"
/>
<ms-table-column
prop="method"
@ -35,11 +36,17 @@
column-key="method"
:filters="methodFilters"
:label="getApiRequestTypeName"
width="120px">
width="120px"
>
<template v-slot:default="scope">
<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),
}"
class="api-el-tag"
>
{{ scope.row.method }}
</el-tag>
</template>
@ -51,14 +58,21 @@
:filters="userFilters"
column-key="user_id"
:label="$t('api_test.definition.api_principal')"
width="100px"/>
width="100px"
/>
<ms-table-column
prop="path"
width="120px"
:label="$t('api_test.definition.api_path')"/>
:label="$t('api_test.definition.api_path')"
/>
<ms-table-column prop="tags" :label="$t('commons.tag')" width="120px" :show-overflow-tooltip="false">
<ms-table-column
prop="tags"
:label="$t('commons.tag')"
width="120px"
:show-overflow-tooltip="false"
>
<template v-slot:default="scope">
<el-tooltip class="item" effect="dark" placement="top">
<div v-html="getTagToolTips(scope.row.tags)" slot="content"></div>
@ -68,9 +82,12 @@
:key="index"
type="success"
effect="plain"
:show-tooltip="scope.row.tags.length === 1 && itemName.length * 12 <= 100"
:show-tooltip="
scope.row.tags.length === 1 && itemName.length * 12 <= 100
"
:content="itemName"
style="margin-left: 0px; margin-right: 2px" />
style="margin-left: 0px; margin-right: 2px"
/>
</div>
</el-tooltip>
</template>
@ -81,7 +98,8 @@
:label="$t('project.version.name')"
:filters="versionFilters"
min-width="100px"
prop="versionId">
prop="versionId"
>
<template v-slot:default="scope">
<span>{{ scope.row.versionName }}</span>
</template>
@ -91,7 +109,8 @@
sortable="createTime"
width="160px"
:label="$t('commons.create_time')"
prop="createTime">
prop="createTime"
>
<template v-slot:default="scope">
<span>{{ scope.row.createTime | datetimeFormat }}</span>
</template>
@ -101,7 +120,8 @@
width="160"
:label="$t('api_test.definition.api_last_time')"
sortable="custom"
prop="updateTime">
prop="updateTime"
>
<template v-slot:default="scope">
<span>{{ scope.row.updateTime | datetimeFormat }}</span>
</template>
@ -110,18 +130,19 @@
<ms-table-column
prop="caseTotal"
width="80px"
:label="$t('api_test.definition.api_case_number')"/>
:label="$t('api_test.definition.api_case_number')"
/>
</ms-table>
<ms-table-pagination :change="pageChange" :current-page.sync="currentPage" :page-size.sync="pageSize"
:total="total"/>
<ms-table-pagination
:change="pageChange"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:total="total"
/>
</span>
</template>
<script>
import MsTable from "../../../table/MsTable";
import MsTableColumn from "../../../table/MsTableColumn";
import MsTableOperator from "../../../MsTableOperator";
@ -131,15 +152,15 @@ import MsTag from "../../../MsTag";
import MsTableAdvSearchBar from "../../../search/MsTableAdvSearchBar";
import ShowMoreBtn from "../../../table/ShowMoreBtn";
import MsSearch from "../../../search/MsSearch";
import {API_METHOD_COLOUR} from "../../../../model/JsonData";
import { API_METHOD_COLOUR } from "../../../../model/JsonData";
import PriorityTableItem from "../PriorityTableItem";
import MsEnvironmentSelect from "./MsEnvironmentSelect";
import {getProtocolFilter} from "../api-definition";
import {getProjectMemberById} from "../../../../api/user";
import { getProtocolFilter } from "../api-definition";
import { getProjectMemberById } from "../../../../api/user";
import TableSelectCountBar from "../ext/TableSelectCountBar";
import {hasLicense} from "../../../../utils/permission";
import {isProjectVersionEnable} from "../../../../api/version";
import { hasLicense } from "../../../../utils/permission";
import { isProjectVersionEnable } from "../../../../api/version";
export default {
name: "ApiTableList",
@ -155,19 +176,17 @@ export default {
MsTable,
MsTableColumn,
MsTableAdvSearchBar,
MsSearch
MsSearch,
},
data() {
return {
moduleId: "",
typeArr: [
{id: 'priority', name: this.$t('test_track.case.priority')},
],
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'}
{ text: "P0", value: "P0" },
{ text: "P1", value: "P1" },
{ text: "P2", value: "P2" },
{ text: "P3", value: "P3" },
],
methodColorMap: new Map(API_METHOD_COLOUR),
methodFilters: [],
@ -176,6 +195,7 @@ export default {
pageSize: 10,
versionEnable: false,
pageRefresh: false,
resetOver: true,
};
},
props: {
@ -190,9 +210,9 @@ export default {
screenHeight: {
type: [Number, String],
default() {
return 'calc(100vh - 400px)';
}
}
return "calc(100vh - 400px)";
},
},
},
created() {
this.getUserFilter();
@ -215,9 +235,9 @@ export default {
},
mounted() {
if (this.$refs.apitable) {
this.$emit('setSelectRow', this.$refs.apitable.getSelectRows());
this.$emit("setSelectRow", this.$refs.apitable.getSelectRows());
} else {
this.$emit('setSelectRow', new Set());
this.$emit("setSelectRow", new Set());
}
if (this.$refs.apitable) {
@ -226,20 +246,20 @@ export default {
},
computed: {
getApiRequestTypeName() {
if (this.currentProtocol === 'TCP') {
return this.$t('api_test.definition.api_agreement');
if (this.currentProtocol === "TCP") {
return this.$t("api_test.definition.api_agreement");
} else {
return this.$t('api_test.definition.api_type');
return this.$t("api_test.definition.api_type");
}
},
},
methods: {
selectCountChange(value) {
this.$emit('selectCountChange', value)
this.$emit("selectCountChange", value);
if (this.$refs.apitable) {
this.$emit('setSelectRow', this.$refs.apitable.getSelectRows());
this.$emit("setSelectRow", this.$refs.apitable.getSelectRows());
} else {
this.$emit('setSelectRow', new Set());
this.$emit("setSelectRow", new Set());
}
},
getColor(flag, method) {
@ -261,21 +281,25 @@ export default {
},
initTable(data) {
this.pageRefresh = data === "page";
this.$emit('refreshTable');
this.$emit("refreshTable");
},
clear() {
if (this.$refs.apitable) {
this.$refs.apitable.clear();
}
this.resetOver = false;
this.$nextTick(() => {
this.resetOver = true;
});
},
checkVersionEnable() {
if (!this.projectId) {
return;
}
if (hasLicense()) {
isProjectVersionEnable(this.projectId).then(res => {
isProjectVersionEnable(this.projectId).then((res) => {
this.versionEnable = res.data;
})
});
}
},
getUserFilter() {
@ -283,21 +307,21 @@ export default {
if (!this.projectId) {
return;
}
getProjectMemberById(this.projectId).then(res => {
this.userFilters = res.data.map(u => {
return {text: u.name, value: u.id};
getProjectMemberById(this.projectId).then((res) => {
this.userFilters = res.data.map((u) => {
return { text: u.name, value: u.id };
});
});
},
getTagToolTips(tags) {
try {
let showTips = '';
let showTips = "";
tags.forEach((item) => {
showTips += item + ',';
showTips += item + ",";
});
return showTips.substr(0, showTips.length - 1);
} catch (e) {
return '';
return "";
}
},
},
@ -305,10 +329,9 @@ export default {
</script>
<style scoped>
.request-method {
padding: 0 5px;
color: #1E90FF;
color: #1e90ff;
}
.api-el-tag {
@ -331,5 +354,4 @@ export default {
white-space: nowrap;
text-overflow: ellipsis;
}
</style>

View File

@ -2,19 +2,31 @@
<div v-loading="loading">
<api-list-container
:is-api-list-enable="isApiListEnable"
@isApiListEnableChange="isApiListEnableChange">
@isApiListEnableChange="isApiListEnableChange"
>
<template>
<slot name="version"></slot>
</template>
<ms-environment-select :project-id="projectId" :is-read-only="isReadOnly"
@setEnvironment="setEnvironment" ref="msEnvironmentSelect"/>
<ms-environment-select
:project-id="projectId"
:is-read-only="isReadOnly"
@setEnvironment="setEnvironment"
ref="msEnvironmentSelect"
/>
<ms-search
:condition.sync="condition"
@search="initTable">
v-if="clearOver"
@search="initTable"
>
</ms-search>
<ms-table :data="tableData" :select-node-ids="selectNodeIds" :condition="condition" :page-size="pageSize"
:total="total" enableSelection
<ms-table
:data="tableData"
:select-node-ids="selectNodeIds"
:condition="condition"
:page-size="pageSize"
:total="total"
enableSelection
:screenHeight="screenHeight"
row-key="id"
:reserve-option="true"
@ -22,25 +34,26 @@
@refresh="initTable"
@selectCountChange="selectCountChange"
operator-width="170px"
ref="table">
<ms-table-column
prop="num"
label="ID"
width="80px"
sortable=true>
ref="table"
>
<ms-table-column prop="num" label="ID" width="80px" sortable="true">
</ms-table-column>
<ms-table-column prop="name" width="160px" :label="$t('test_track.case.name')"/>
<ms-table-column
prop="name"
width="160px"
:label="$t('test_track.case.name')"
/>
<ms-table-column
prop="priority"
:filters="priorityFilters"
column-key="priority"
width="120px"
:label="$t('test_track.case.priority')">
:label="$t('test_track.case.priority')"
>
<template v-slot:default="scope">
<priority-table-item :value="scope.row.priority"/>
<priority-table-item :value="scope.row.priority" />
</template>
</ms-table-column>
@ -48,9 +61,15 @@
sortable="custom"
prop="path"
width="180px"
:label="'API'+ $t('api_test.definition.api_path')"/>
:label="'API' + $t('api_test.definition.api_path')"
/>
<ms-table-column prop="tags" width="120px" :label="$t('commons.tag')" :show-overflow-tooltip="false">
<ms-table-column
prop="tags"
width="120px"
:label="$t('commons.tag')"
:show-overflow-tooltip="false"
>
<template v-slot:default="scope">
<el-tooltip class="item" effect="dark" placement="top">
<div v-html="getTagToolTips(scope.row.tags)" slot="content"></div>
@ -60,9 +79,12 @@
:key="index"
type="success"
effect="plain"
:show-tooltip="scope.row.tags.length === 1 && itemName.length * 12 <= 100"
:show-tooltip="
scope.row.tags.length === 1 && itemName.length * 12 <= 100
"
:content="itemName"
style="margin-left: 0px; margin-right: 2px" />
style="margin-left: 0px; margin-right: 2px"
/>
</div>
</el-tooltip>
</template>
@ -73,21 +95,21 @@
:label="$t('project.version.name')"
:filters="versionFilters"
min-width="100px"
prop="versionId">
prop="versionId"
>
<template v-slot:default="scope">
<span>{{ scope.row.versionName }}</span>
</template>
</ms-table-column>
<ms-table-column
prop="createUser"
:label="$t('commons.create_user')"/>
<ms-table-column prop="createUser" :label="$t('commons.create_user')" />
<ms-table-column
sortable="createTime"
width="160px"
:label="$t('commons.create_time')"
prop="createTime">
prop="createTime"
>
<template v-slot:default="scope">
<span>{{ scope.row.createTime | datetimeFormat }}</span>
</template>
@ -97,38 +119,45 @@
sortable="updateTime"
width="160px"
:label="$t('api_test.definition.api_last_time')"
prop="updateTime">
prop="updateTime"
>
<template v-slot:default="scope">
<span>{{ scope.row.updateTime | datetimeFormat }}</span>
</template>
</ms-table-column>
</ms-table>
<ms-table-pagination :change="pageChange" :current-page.sync="currentPage" :page-size.sync="pageSize"
:total="total"/>
<ms-table-pagination
:change="pageChange"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:total="total"
/>
</api-list-container>
</div>
</template>
<script>
import MsTable from "metersphere-frontend/src/components/table/MsTable";
import MsTableColumn from "metersphere-frontend/src/components/table/MsTableColumn";
import MsTablePagination from "metersphere-frontend/src/components/pagination/TablePagination";
import MsTag from "metersphere-frontend/src/components/MsTag";
import {API_METHOD_COLOUR, CASE_PRIORITY} from "metersphere-frontend/src/model/JsonData";
import {
API_METHOD_COLOUR,
CASE_PRIORITY,
} from "metersphere-frontend/src/model/JsonData";
import MsEnvironmentSelect from "metersphere-frontend/src/components/environment/snippet/ext/MsEnvironmentSelect";
import MsTableAdvSearchBar from "metersphere-frontend/src/components/search/MsTableAdvSearchBar";
import {
TEST_PLAN_RELEVANCE_API_CASE_CONFIGS
} from "metersphere-frontend/src/components/search/search-components";
import { TEST_PLAN_RELEVANCE_API_CASE_CONFIGS } from "metersphere-frontend/src/components/search/search-components";
import MsSearch from "metersphere-frontend/src/components/search/MsSearch";
import ApiListContainer from "@/business/plan/view/comonents/api/ApiListContainer";
import {buildBatchParam, hasLicense, isProjectVersionEnable, parseTag} from "@/business/utils/sdk-utils";
import {
buildBatchParam,
hasLicense,
isProjectVersionEnable,
} from "@/business/utils/sdk-utils";
import PriorityTableItem from "@/business/common/tableItems/planview/PriorityTableItem";
import {apiDefinitionGet} from "@/api/remote/api/api-definition";
import {testPlanApiCaseRelevanceList} from "@/api/remote/plan/test-plan-api-case";
import { apiDefinitionGet } from "@/api/remote/api/api-definition";
import { testPlanApiCaseRelevanceList } from "@/api/remote/plan/test-plan-api-case";
export default {
name: "RelevanceCaseList",
@ -141,37 +170,36 @@ export default {
MsTable,
MsTableColumn,
MsSearch,
MsTableAdvSearchBar
MsTableAdvSearchBar,
},
data() {
return {
condition: {
components: TEST_PLAN_RELEVANCE_API_CASE_CONFIGS
components: TEST_PLAN_RELEVANCE_API_CASE_CONFIGS,
},
selectCase: {},
loading: false,
moduleId: "",
typeArr: [
{id: 'priority', name: this.$t('test_track.case.priority')},
],
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'}
{ 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),
screenHeight: 'calc(100vh - 400px)',//
screenHeight: "calc(100vh - 400px)", //
tableData: [],
currentPage: 1,
clearOver: true,
pageSize: 10,
total: 0,
environmentId: "",
versionEnable: false,
pageRefresh: false
pageRefresh: false,
};
},
props: {
@ -189,7 +217,7 @@ export default {
},
isReadOnly: {
type: Boolean,
default: false
default: false,
},
projectId: String,
planId: String,
@ -208,7 +236,7 @@ export default {
},
projectId() {
this.condition = {
components: TEST_PLAN_RELEVANCE_API_CASE_CONFIGS
components: TEST_PLAN_RELEVANCE_API_CASE_CONFIGS,
};
this.selectNodeIds.length = 0;
this.initTable();
@ -217,7 +245,7 @@ export default {
currentVersion() {
this.condition.versionId = this.currentVersion;
this.initTable();
}
},
},
computed: {
selectRows() {
@ -226,14 +254,14 @@ export default {
} else {
return new Set();
}
}
},
},
methods: {
isApiListEnableChange(data) {
this.$emit('isApiListEnableChange', data);
this.$emit("isApiListEnableChange", data);
},
selectCountChange(data) {
this.$emit('selectCountChange', data);
this.$emit("selectCountChange", data);
},
pageChange() {
this.initTable(null, "page");
@ -242,7 +270,7 @@ export default {
this.pageRefresh = data === "page";
this.condition.status = "";
this.condition.moduleIds = this.selectNodeIds;
if (projectId != null && typeof projectId === 'string') {
if (projectId != null && typeof projectId === "string") {
this.condition.projectId = projectId;
} else if (this.projectId != null) {
this.condition.projectId = this.projectId;
@ -252,12 +280,14 @@ export default {
}
this.condition.planId = this.planId;
this.loading = true;
testPlanApiCaseRelevanceList({pageNum: this.currentPage, pageSize: this.pageSize}, this.condition)
.then(response => {
testPlanApiCaseRelevanceList(
{ pageNum: this.currentPage, pageSize: this.pageSize },
this.condition
).then((response) => {
this.loading = false;
this.total = response.data.itemCount;
this.tableData = response.data.listObject;
this.tableData.forEach(item => {
this.tableData.forEach((item) => {
if (item.tags && item.tags.length > 0) {
item.tags = JSON.parse(item.tags);
}
@ -268,6 +298,10 @@ export default {
if (this.$refs.table) {
this.$refs.table.clear();
}
this.clearOver = false;
this.$nextTick(() => {
this.clearOver = true;
});
},
clearEnvAndSelect() {
this.environmentId = "";
@ -279,29 +313,33 @@ export default {
},
getTagToolTips(tags) {
try {
let showTips = '';
let showTips = "";
tags.forEach((item) => {
showTips += item + ',';
showTips += item + ",";
});
return showTips.substr(0, showTips.length - 1);
} catch (e) {
return '';
return "";
}
},
showExecResult(row) {
this.visible = false;
this.$emit('showExecResult', row);
this.$emit("showExecResult", row);
},
buildPagePath(path) {
return path + "/" + this.currentPage + "/" + this.pageSize;
},
handleTestCase(testCase) {
apiDefinitionGet(testCase.apiDefinitionId)
.then((response) => {
apiDefinitionGet(testCase.apiDefinitionId).then((response) => {
let api = response.data;
let selectApi = api;
let request = {};
if (Object.prototype.toString.call(api.request).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
if (
Object.prototype.toString
.call(api.request)
.match(/\[object (\w+)\]/)[1]
.toLowerCase() === "object"
) {
request = api.request;
} else {
request = JSON.parse(api.request);
@ -332,8 +370,8 @@ export default {
} else {
param = batchParam;
}
param.ids = Array.from(sampleSelectRows).map(row => row.id);
let tableDataIds = Array.from(this.tableData).map(row => row.id);
param.ids = Array.from(sampleSelectRows).map((row) => row.id);
let tableDataIds = Array.from(this.tableData).map((row) => row.id);
param.ids.sort((a, b) => {
return tableDataIds.indexOf(a) - tableDataIds.indexOf(b);
});
@ -344,12 +382,11 @@ export default {
return;
}
if (hasLicense()) {
isProjectVersionEnable(this.projectId)
.then(response => {
isProjectVersionEnable(this.projectId).then((response) => {
this.versionEnable = response.data;
});
}
}
},
},
};
</script>
@ -362,7 +399,7 @@ export default {
.request-method {
padding: 0 5px;
color: #1E90FF;
color: #1e90ff;
}
.api-el-tag {
@ -385,5 +422,4 @@ export default {
white-space: nowrap;
text-overflow: ellipsis;
}
</style>

View File

@ -26,6 +26,7 @@
<ms-search
:base-search-tip="$t('api_test.definition.request.select_case')"
:condition.sync="condition"
v-if="clearOver"
style="margin-top: 10px"
@search="filterSearch"
>
@ -167,8 +168,7 @@
<script>
import MsTableHeader from "metersphere-frontend/src/components/MsTableHeader";
import MsTablePagination from "metersphere-frontend/src/components/pagination/TablePagination";
import MsTag from "metersphere-frontend/src/components/MsTag";
// import MsApiReportDetail from "../../../../../api/automation/report/ApiReportDetail";
import MsTag from "metersphere-frontend/src/components/MsTag"; // import MsApiReportDetail from "../../../../../api/automation/report/ApiReportDetail";
import TestPlanScenarioListHeader from "./TestPlanScenarioListHeader";
import PriorityTableItem from "@/business/common/tableItems/planview/PriorityTableItem";
import MsTableAdvSearchBar from "metersphere-frontend/src/components/search/MsTableAdvSearchBar";
@ -228,6 +228,7 @@ export default {
currentScenario: {},
schedule: {},
tableData: [],
clearOver: true,
currentPage: 1,
pageSize: 10,
total: 0,
@ -320,6 +321,10 @@ export default {
},
clear() {
this.selectRows.clear();
this.clearOver = false;
this.$nextTick(() => {
this.clearOver = true;
});
},
setProjectEnvMap(projectEnvMap) {
this.projectEnvMap = projectEnvMap;