From e2ef163c031795e0e3f046d57f8280787e021318 Mon Sep 17 00:00:00 2001
From: song-tianyang <tianyang.song@fit2cloud.com>
Date: Fri, 5 May 2023 19:34:57 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA):=20?=
 =?UTF-8?q?=E9=AB=98=E7=BA=A7=E6=90=9C=E7=B4=A2=E5=90=8E=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE-=E6=90=9C=E7=B4=A2=E6=9D=A1=E4=BB=B6?=
 =?UTF-8?q?=E6=9C=AA=E9=87=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1025858 --user=宋天阳 【测试跟踪】测试计划-关联接口用例-高级搜索后切换项目-搜索条件未重置
https://www.tapd.cn/55049933/s/1369161
---
 .../environment/snippet/ext/ApiTableList.vue  | 228 +++++++++--------
 .../view/comonents/api/RelevanceCaseList.vue  | 240 ++++++++++--------
 .../comonents/api/RelevanceScenarioList.vue   |   9 +-
 3 files changed, 270 insertions(+), 207 deletions(-)

diff --git a/framework/sdk-parent/frontend/src/components/environment/snippet/ext/ApiTableList.vue b/framework/sdk-parent/frontend/src/components/environment/snippet/ext/ApiTableList.vue
index 8ca08e93dc..54da6794b6 100644
--- a/framework/sdk-parent/frontend/src/components/environment/snippet/ext/ApiTableList.vue
+++ b/framework/sdk-parent/frontend/src/components/environment/snippet/ext/ApiTableList.vue
@@ -1,33 +1,34 @@
 <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"
-              :screenHeight="screenHeight"
-              row-key="id"
-              :reserve-option="true"
-              :page-refresh="pageRefresh"
-              operator-width="170px"
-              @order="initTable"
-              @filter="search"
-              ref="apitable">
-      <ms-table-column
-        prop="num"
-        label="ID"
-        min-width="80px"
-        sortable>
-
+    <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"
+      :page-refresh="pageRefresh"
+      operator-width="170px"
+      @order="initTable"
+      @filter="search"
+      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,57 +58,70 @@
         :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">
-         <template v-slot:default="scope">
-            <el-tooltip class="item" effect="dark" placement="top">
-              <div v-html="getTagToolTips(scope.row.tags)" slot="content"></div>
-              <div class="oneLine">
-                <ms-tag
-                  v-for="(itemName, index) in scope.row.tags"
-                  :key="index"
-                  type="success"
-                  effect="plain"
-                  :show-tooltip="scope.row.tags.length === 1 && itemName.length * 12 <= 100"
-                  :content="itemName"
-                  style="margin-left: 0px; margin-right: 2px" />
-              </div>
-            </el-tooltip>
-          </template>
+      <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>
+            <div class="oneLine">
+              <ms-tag
+                v-for="(itemName, index) in scope.row.tags"
+                :key="index"
+                type="success"
+                effect="plain"
+                :show-tooltip="
+                  scope.row.tags.length === 1 && itemName.length * 12 <= 100
+                "
+                :content="itemName"
+                style="margin-left: 0px; margin-right: 2px"
+              />
+            </div>
+          </el-tooltip>
+        </template>
       </ms-table-column>
 
       <ms-table-column
-          v-if="versionEnable"
-          :label="$t('project.version.name')"
-          :filters="versionFilters"
-          min-width="100px"
-          prop="versionId">
+        v-if="versionEnable"
+        :label="$t('project.version.name')"
+        :filters="versionFilters"
+        min-width="100px"
+        prop="versionId"
+      >
         <template v-slot:default="scope">
           <span>{{ scope.row.versionName }}</span>
         </template>
       </ms-table-column>
 
-       <ms-table-column
-           sortable="createTime"
-           width="160px"
-           :label="$t('commons.create_time')"
-           prop="createTime">
-          <template v-slot:default="scope">
-            <span>{{ scope.row.createTime | datetimeFormat }}</span>
-          </template>
-        </ms-table-column>
+      <ms-table-column
+        sortable="createTime"
+        width="160px"
+        :label="$t('commons.create_time')"
+        prop="createTime"
+      >
+        <template v-slot:default="scope">
+          <span>{{ scope.row.createTime | datetimeFormat }}</span>
+        </template>
+      </ms-table-column>
 
       <ms-table-column
-          width="160"
-          :label="$t('api_test.definition.api_last_time')"
-          sortable="custom"
-          prop="updateTime">
+        width="160"
+        :label="$t('api_test.definition.api_last_time')"
+        sortable="custom"
+        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>
diff --git a/test-track/frontend/src/business/plan/view/comonents/api/RelevanceCaseList.vue b/test-track/frontend/src/business/plan/view/comonents/api/RelevanceCaseList.vue
index e2ecae8255..7df024335a 100644
--- a/test-track/frontend/src/business/plan/view/comonents/api/RelevanceCaseList.vue
+++ b/test-track/frontend/src/business/plan/view/comonents/api/RelevanceCaseList.vue
@@ -2,45 +2,58 @@
   <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
-                :screenHeight="screenHeight"
-                row-key="id"
-                :reserve-option="true"
-                :page-refresh="pageRefresh"
-                @refresh="initTable"
-                @selectCountChange="selectCountChange"
-                operator-width="170px"
-                ref="table">
-
-        <ms-table-column
-          prop="num"
-          label="ID"
-          width="80px"
-          sortable=true>
+      <ms-table
+        :data="tableData"
+        :select-node-ids="selectNodeIds"
+        :condition="condition"
+        :page-size="pageSize"
+        :total="total"
+        enableSelection
+        :screenHeight="screenHeight"
+        row-key="id"
+        :reserve-option="true"
+        :page-refresh="pageRefresh"
+        @refresh="initTable"
+        @selectCountChange="selectCountChange"
+        operator-width="170px"
+        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,22 +280,28 @@ export default {
       }
       this.condition.planId = this.planId;
       this.loading = true;
-      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 => {
-            if (item.tags && item.tags.length > 0) {
-              item.tags = JSON.parse(item.tags);
-            }
-          });
+      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) => {
+          if (item.tags && item.tags.length > 0) {
+            item.tags = JSON.parse(item.tags);
+          }
         });
+      });
     },
     clear() {
       if (this.$refs.table) {
         this.$refs.table.clear();
       }
+      this.clearOver = false;
+      this.$nextTick(() => {
+        this.clearOver = true;
+      });
     },
     clearEnvAndSelect() {
       this.environmentId = "";
@@ -279,39 +313,43 @@ 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) => {
-          let api = response.data;
-          let selectApi = api;
-          let request = {};
-          if (Object.prototype.toString.call(api.request).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
-            request = api.request;
-          } else {
-            request = JSON.parse(api.request);
-          }
-          if (!request.hashTree) {
-            request.hashTree = [];
-          }
-          selectApi.url = request.path;
-          this.$refs.caseList.open(selectApi, testCase.id);
-        });
+      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"
+        ) {
+          request = api.request;
+        } else {
+          request = JSON.parse(api.request);
+        }
+        if (!request.hashTree) {
+          request.hashTree = [];
+        }
+        selectApi.url = request.path;
+        this.$refs.caseList.open(selectApi, testCase.id);
+      });
     },
     setEnvironment(data) {
       this.environmentId = data.id;
@@ -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 => {
-            this.versionEnable = response.data;
-          });
+        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>
diff --git a/test-track/frontend/src/business/plan/view/comonents/api/RelevanceScenarioList.vue b/test-track/frontend/src/business/plan/view/comonents/api/RelevanceScenarioList.vue
index 540fbca4b8..98827cc3de 100644
--- a/test-track/frontend/src/business/plan/view/comonents/api/RelevanceScenarioList.vue
+++ b/test-track/frontend/src/business/plan/view/comonents/api/RelevanceScenarioList.vue
@@ -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;