From 8d8292227fe531370dbb2d2e78d6b89f2fe5ae23 Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Tue, 29 Dec 2020 14:15:58 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/main/java/io/metersphere/xpack    |   2 +-
 .../automation/scenario/api/ApiCaseList.vue   | 337 --------------
 .../automation/scenario/api/ApiDefinition.vue | 150 -------
 .../api/automation/scenario/api/ApiList.vue   | 412 ------------------
 .../automation/scenario/api/ApiRelevance.vue  |   4 +-
 ...evanceApiList.vue => RelevanceApiList.vue} |  21 +-
 ...anceCaseList.vue => RelevanceCaseList.vue} |  24 +-
 .../scenario/api/ScenarioRelevance.vue        |   4 +-
 .../components/list/ApiCaseSimpleList.vue     | 133 +-----
 .../definition/components/list/ApiList.vue    |  25 +-
 .../comonents/api/TestCaseApiRelevance.vue    |  38 +-
 .../comonents/base/TestCaseRelevanceBase.vue  | 110 ++---
 frontend/src/common/js/tableUtils.js          |  11 +-
 13 files changed, 97 insertions(+), 1174 deletions(-)
 delete mode 100644 frontend/src/business/components/api/automation/scenario/api/ApiCaseList.vue
 delete mode 100644 frontend/src/business/components/api/automation/scenario/api/ApiDefinition.vue
 delete mode 100644 frontend/src/business/components/api/automation/scenario/api/ApiList.vue
 rename frontend/src/business/components/api/automation/scenario/api/{ScenarioRelevanceApiList.vue => RelevanceApiList.vue} (93%)
 rename frontend/src/business/components/api/automation/scenario/api/{ScenarioRelevanceCaseList.vue => RelevanceCaseList.vue} (91%)

diff --git a/backend/src/main/java/io/metersphere/xpack b/backend/src/main/java/io/metersphere/xpack
index c10b11f224..f27d1609d7 160000
--- a/backend/src/main/java/io/metersphere/xpack
+++ b/backend/src/main/java/io/metersphere/xpack
@@ -1 +1 @@
-Subproject commit c10b11f224e4186306e6ae3a3976e29a42af96a5
+Subproject commit f27d1609d77f7d6c988d37d709466e844d350e17
diff --git a/frontend/src/business/components/api/automation/scenario/api/ApiCaseList.vue b/frontend/src/business/components/api/automation/scenario/api/ApiCaseList.vue
deleted file mode 100644
index 85bca98545..0000000000
--- a/frontend/src/business/components/api/automation/scenario/api/ApiCaseList.vue
+++ /dev/null
@@ -1,337 +0,0 @@
-<template>
-  <div>
-    <el-container style="padding-bottom: 300px">
-      <el-header style="width: 100% ;padding: 0px">
-        <el-card>
-          <el-row>
-            <el-col :span="2" class="ms-api-col">
-              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
-            </el-col>
-            <el-col :span="api.protocol==='HTTP'? 3:6" class="ms-api-col">
-              <div class="variable-combine"> {{api.name}}</div>
-            </el-col>
-            <el-col :span="api.protocol==='HTTP'? 1:3" class="ms-api-col">
-              <el-tag size="mini" :style="{'background-color': getColor(true, api.method), border: getColor(true, api.method)}" class="api-el-tag">
-                {{ api.method}}
-              </el-tag>
-            </el-col>
-            <el-col :span="api.protocol==='HTTP'? 5:0" class="ms-api-col">
-              <div class="variable-combine" style="margin-left: 10px">{{api.path ===null ? " " : api.path}}</div>
-            </el-col>
-            <el-col :span="2" class="ms-api-col">
-              <div>{{$t('test_track.plan_view.case_count')}}：{{apiCaseList.length}}</div>
-            </el-col>
-            <el-col :span="4">
-              <div>
-                <el-select size="small" :placeholder="$t('api_test.definition.request.grade_info')" v-model="priorityValue"
-                           class="ms-api-header-select" @change="getApiTest">
-                  <el-option v-for="grd in priority" :key="grd.id" :label="grd.name" :value="grd.id"/>
-                </el-select>
-              </div>
-            </el-col>
-            <el-col :span="4">
-              <div class="ms-api-header-select">
-                <el-input size="small" :placeholder="$t('api_test.definition.request.select_case')"
-                          v-model="name" @blur="getApiTest"/>
-              </div>
-            </el-col>
-
-            <el-col :span="2">
-              <button type="button" aria-label="Close" class="el-card-btn" @click="apiCaseClose()"><i
-                class="el-dialog__close el-icon el-icon-close"></i></button>
-            </el-col>
-
-          </el-row>
-        </el-card>
-      </el-header>
-
-      <!-- 用例部分 -->
-      <el-main v-loading="loading" style="overflow: auto;padding: 5px 10px 10px">
-        <el-checkbox-group v-model="checkedIndex" @change="handleCheckedChange">
-          <div v-for="(item,index) in apiCaseList" :key="index">
-            <el-card style="margin-top: 5px">
-              <el-row>
-                <el-col :span="1" class="ms-api-col">
-                  <el-checkbox :key="item.id" :label="index+1"/>
-                </el-col>
-                <el-col :span="3">
-                  <el-select size="small" v-model="item.priority" class="ms-api-select">
-                    <el-option v-for="grd in priority" :key="grd.id" :label="grd.name" :value="grd.id"/>
-                  </el-select>
-                </el-col>
-                <el-col :span="14">
-                  <span v-if="item.type!='create'" style="color: #303132;font-size: 13px">
-                    <i class="icon el-icon-arrow-right" :class="{'is-active': item.active}"
-                       @click="active(item)"/>
-                    {{item.name}}
-                  </span>
-                  <div v-if="item.type!='create'" style="color: #999999;font-size: 12px">
-                    <span>
-                      {{item.createTime | timestampFormatDate }}
-                      {{item.createUser}} {{$t('api_test.definition.request.create_info')}}
-                    </span>
-                    <span>
-                      {{item.updateTime | timestampFormatDate }}
-                      {{item.updateUser}} {{$t('api_test.definition.request.update_info')}}
-                    </span>
-                  </div>
-                </el-col>
-
-                <el-col :span="6">
-                  <div v-if="item.type!='create'">{{getResult(item.execResult)}}</div>
-                  <div v-if="item.type!='create'" style="color: #999999;font-size: 12px">
-                    <span> {{item.updateTime | timestampFormatDate }}</span>
-                    {{item.updateUser}}
-                  </div>
-                </el-col>
-              </el-row>
-              <!-- 请求参数-->
-              <el-collapse-transition>
-                <div v-if="item.active">
-                  <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
-
-                  <ms-api-request-form :is-read-only="isReadOnly" :headers="item.request.headers " :request="item.request" v-if="api.protocol==='HTTP'"/>
-                  <ms-tcp-basis-parameters :request="item.request" v-if="api.protocol==='TCP'"/>
-                  <ms-sql-basis-parameters :request="item.request" v-if="api.protocol==='SQL'"/>
-                  <ms-dubbo-basis-parameters :request="item.request" v-if="api.protocol==='DUBBO'"/>
-                  <!-- 保存操作 -->
-                  <el-button type="primary" size="small" style="margin: 20px; float: right" @click="saveTestCase(item)">
-                    {{$t('commons.save')}}
-                  </el-button>
-                </div>
-              </el-collapse-transition>
-            </el-card>
-          </div>
-        </el-checkbox-group>
-
-      </el-main>
-
-    </el-container>
-
-  </div>
-
-</template>
-<script>
-  import MsTag from "../../../../common/components/MsTag";
-  import MsTipButton from "../../../../common/components/MsTipButton";
-  import MsApiRequestForm from "../../../definition/components/request/http/ApiRequestForm";
-  import {downloadFile, getUUID, getCurrentProjectID} from "@/common/js/utils";
-  import {PRIORITY, RESULT_MAP} from "../../../definition/model/JsonData";
-  import MsApiAssertions from "../../../definition/components/assertion/ApiAssertions";
-  import MsSqlBasisParameters from "../../../definition/components/request/database/BasisParameters";
-  import MsTcpBasisParameters from "../../../definition/components/request/tcp/BasisParameters";
-  import MsDubboBasisParameters from "../../../definition/components/request/dubbo/BasisParameters";
-  import MsApiExtendBtns from "../../../definition/components/reference/ApiExtendBtns";
-  import {API_METHOD_COLOUR} from "../../../definition/model/JsonData";
-
-  export default {
-    name: 'ApiCaseList',
-    components: {
-      MsTag,
-      MsTipButton,
-      MsApiRequestForm,
-      MsApiAssertions,
-      MsSqlBasisParameters,
-      MsTcpBasisParameters,
-      MsDubboBasisParameters,
-      MsApiExtendBtns
-    },
-    props: {
-      api: {
-        type: Object
-      },
-      visible: {
-        type: String,
-      },
-      loaded: Boolean,
-      refreshSign: String,
-      currentRow: Object,
-    },
-    data() {
-      return {
-        grades: [],
-        environments: [],
-        environment: {},
-        name: "",
-        priorityValue: "",
-        isReadOnly: false,
-        selectedEvent: Object,
-        priority: PRIORITY,
-        apiCaseList: [],
-        loading: false,
-        runData: [],
-        reportId: "",
-        projectId: "",
-        methodColorMap: new Map(API_METHOD_COLOUR),
-
-        checkAll: false,
-        checkedIndex: [],
-        isIndeterminate: true
-
-      }
-    },
-    watch: {
-      // 初始化
-      api() {
-        this.getApiTest();
-      },
-      visible() {
-        this.getApiTest();
-      }
-    },
-    created() {
-      this.projectId = getCurrentProjectID();
-      this.getApiTest();
-    },
-    methods: {
-      getResult(data) {
-        if (RESULT_MAP.get(data)) {
-          return RESULT_MAP.get(data);
-        } else {
-          return RESULT_MAP.get("default");
-        }
-      },
-      showInput(row) {
-        row.type = "create";
-        row.active = true;
-        this.active(row);
-      },
-      apiCaseClose() {
-        this.apiCaseList = [];
-        this.$emit('apiCaseClose');
-      },
-
-      active(item) {
-        item.active = !item.active;
-      },
-      getApiTest() {
-        if (this.api) {
-          this.loading = true;
-          if (this.currentRow) {
-            this.currentRow.cases = [];
-          }
-          let condition = {};
-          condition.projectId = this.projectId;
-          condition.apiDefinitionId = this.api.id;
-          condition.priority = this.priorityValue;
-          condition.name = this.name;
-          this.$post("/api/testcase/list", condition, response => {
-            for (let index in response.data) {
-              let test = response.data[index];
-              test.checked = false;
-              test.request = JSON.parse(test.request);
-            }
-            this.loading = false;
-            this.apiCaseList = response.data;
-          });
-        }
-      },
-      validate(row) {
-        if (!row.name) {
-          this.$warning(this.$t('api_test.input_name'));
-          return true;
-        }
-      },
-
-      getColor(enable, method) {
-        if (enable) {
-          return this.methodColorMap.get(method);
-        }
-      },
-      handleCheckAllChange(val) {
-        this.currentRow.cases = [];
-        if (val) {
-          let index = 1;
-          this.apiCaseList.forEach(item => {
-            this.checkedIndex.push(index);
-            item.protocol = this.api.protocol;
-            item.hashTree = [];
-            this.currentRow.cases.push(item)
-            index++;
-          })
-        } else {
-          this.checkedIndex = [];
-        }
-        this.isIndeterminate = false;
-      },
-      handleCheckedChange(value) {
-        let checkedCount = value.length;
-        this.checkAll = checkedCount === this.apiCaseList.length;
-        this.isIndeterminate = checkedCount > 0 && checkedCount < this.apiCaseList.length;
-        this.currentRow.cases = [];
-        value.forEach(i => {
-          let index = i - 1;
-          let item = this.apiCaseList[index];
-          item.protocol = this.api.protocol;
-          item.hashTree = [];
-          this.currentRow.cases.push(item);
-        })
-      }
-    }
-  }
-</script>
-
-<style scoped>
-  .ms-api-select {
-    margin-left: 20px;
-    width: 80px;
-  }
-
-  .ms-api-header-select {
-    margin-left: 20px;
-    min-width: 100px;
-  }
-
-  .el-card-btn {
-    float: right;
-    top: 20px;
-    right: 0px;
-    padding: 0;
-    background: 0 0;
-    border: none;
-    outline: 0;
-    cursor: pointer;
-    font-size: 18px;
-    margin-left: 30px;
-  }
-
-  .ms-api-label {
-    /*color: #CCCCCC;*/
-  }
-
-  .ms-api-col {
-    margin-top: 5px;
-  }
-
-  .variable-combine {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 10px;
-  }
-
-  .icon.is-active {
-    transform: rotate(90deg);
-  }
-
-  .tip {
-    padding: 3px 5px;
-    font-size: 16px;
-    border-radius: 4px;
-    border-left: 4px solid #783887;
-    margin: 20px 0;
-  }
-
-  .environment-button {
-    margin-left: 20px;
-    padding: 7px;
-  }
-
-  .api-el-tag {
-    color: white;
-  }
-
-  .is-selected {
-    background: #EFF7FF;
-  }
-</style>
diff --git a/frontend/src/business/components/api/automation/scenario/api/ApiDefinition.vue b/frontend/src/business/components/api/automation/scenario/api/ApiDefinition.vue
deleted file mode 100644
index 3dec4fafcb..0000000000
--- a/frontend/src/business/components/api/automation/scenario/api/ApiDefinition.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<template>
-  <ms-container>
-    <ms-aside-container>
-      <ms-node-tree @nodeSelectEvent="selectModule" @getApiModuleTree="initTree" @protocolChange="changeProtocol"
-                    @refresh="refresh" @saveAsEdit="editApi" @exportAPI="exportAPI"/>
-    </ms-aside-container>
-
-    <ms-main-container>
-      <!-- 主框架列表 -->
-      <el-tabs v-model="apiDefaultTab">
-        <el-tab-pane
-          :key="item.name"
-          v-for="(item) in apiTabs"
-          :label="item.title"
-          :closable="item.closable"
-          :name="item.name">
-          <!-- 列表集合 -->
-          <ms-api-list
-            v-if="item.type === 'list'"
-            :current-protocol="currentProtocol"
-            :current-module="currentModule"
-            @editApi="editApi"
-            @handleCase="handleCase"
-            :visible="visible"
-            :currentRow="currentRow"
-            ref="apiList"/>
-        </el-tab-pane>
-      </el-tabs>
-    </ms-main-container>
-  </ms-container>
-
-</template>
-
-<script>
-  import MsNodeTree from '../../../definition/components/module/ApiModule';
-  import MsApiList from './ApiList';
-  import MsContainer from "../../../../common/components/MsContainer";
-  import MsMainContainer from "../../../../common/components/MsMainContainer";
-  import MsAsideContainer from "../../../../common/components/MsAsideContainer";
-  import {downloadFile, getCurrentUser, getUUID, getCurrentProjectID} from "@/common/js/utils";
-
-  export default {
-    name: "ApiDefinition",
-    components: {
-      MsNodeTree,
-      MsApiList,
-      MsMainContainer,
-      MsContainer,
-      MsAsideContainer,
-    },
-    props: {
-      visible: {
-        type: String,
-      },
-      currentRow: {
-        type: Object,
-      }
-    },
-    data() {
-      return {
-        isHide: true,
-        apiDefaultTab: 'default',
-        currentProtocol: null,
-        currentModule: null,
-        currentApi: {},
-        moduleOptions: {},
-        runTestData: {},
-        apiTabs: [{
-          title: this.$t('api_test.definition.api_title'),
-          name: 'default',
-          type: "list",
-          closable: false
-        }],
-      }
-    },
-    methods: {
-      editApi(row) {
-        this.currentApi = row;
-      },
-      handleCase(testCase) {
-        this.currentApi = testCase;
-        this.isHide = false;
-      },
-      apiCaseClose() {
-        this.isHide = true;
-      },
-      selectModule(data) {
-        this.currentModule = data.data;
-      },
-      exportAPI() {
-        if (!this.$refs.apiList[0].tableData) {
-          return;
-        }
-        let obj = {projectName: getCurrentProjectID(), protocol: this.currentProtocol, data: this.$refs.apiList[0].tableData}
-        downloadFile("导出API.json", JSON.stringify(obj));
-      },
-      refresh(data) {
-        this.$refs.apiList[0].initApiTable(data);
-      },
-      setTabTitle(data) {
-        for (let index in this.apiTabs) {
-          let tab = this.apiTabs[index];
-          if (tab.name === this.apiDefaultTab) {
-            tab.title = this.$t('api_test.definition.request.edit_api') + "-" + data.name;
-            break;
-          }
-        }
-        this.runTestData = data;
-      },
-      saveApi(data) {
-        this.setTabTitle(data);
-        this.$refs.apiList[0].initApiTable(data);
-      },
-      initTree(data) {
-        this.moduleOptions = data;
-      },
-      changeProtocol(data) {
-        this.currentProtocol = data;
-      }
-    }
-  }
-</script>
-
-<style scoped>
-  .ms-api-buttion {
-    position: absolute;
-    top: 100px;
-    right: 4px;
-    padding: 0;
-    background: 0 0;
-    border: none;
-    outline: 0;
-    cursor: pointer;
-    margin-right: 10px;
-    font-size: 16px;
-  }
-
-  .ms-api-div {
-    overflow-y: auto;
-    height: calc(100vh - 155px)
-  }
-
-  /deep/ .el-tabs__header {
-    margin: 0 0 5px;
-  }
-
-  /deep/ .el-main {
-    overflow: hidden;
-  }
-</style>
diff --git a/frontend/src/business/components/api/automation/scenario/api/ApiList.vue b/frontend/src/business/components/api/automation/scenario/api/ApiList.vue
deleted file mode 100644
index f0951dcf9f..0000000000
--- a/frontend/src/business/components/api/automation/scenario/api/ApiList.vue
+++ /dev/null
@@ -1,412 +0,0 @@
-<template>
-  <div id="svgBox" style="overflow: auto">
-    <div id="svgTop" style="background-color: white">
-      <el-card class="card-content">
-        <el-input placeholder="搜索" @blur="search" style="float: right ;width: 300px;margin-bottom: 20px;margin-right: 20px" size="small" v-model="condition.name"/>
-
-        <el-table border :data="tableData" row-key="id" class="test-content adjust-table"
-                  @select-all="handleSelectAll"
-                  @select="handleSelect" :height="screenHeight">
-          <el-table-column type="selection"/>
-          <el-table-column width="40" :resizable="false" align="center">
-            <template v-slot:default="scope">
-              <show-more-btn :is-show="scope.row.showMore" :buttons="buttons" :size="selectRows.size"/>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="name" :label="$t('api_test.definition.api_name')" show-overflow-tooltip/>
-          <el-table-column
-            prop="status"
-            column-key="api_status"
-            :label="$t('api_test.definition.api_status')"
-            show-overflow-tooltip>
-            <template v-slot:default="scope">
-              <ms-tag v-if="scope.row.status == 'Prepare'" type="info" effect="plain" :content="$t('test_track.plan.plan_status_prepare')"/>
-              <ms-tag v-if="scope.row.status == 'Underway'" type="warning" effect="plain" :content="$t('test_track.plan.plan_status_running')"/>
-              <ms-tag v-if="scope.row.status == 'Completed'" type="success" effect="plain" :content="$t('test_track.plan.plan_status_completed')"/>
-              <ms-tag v-if="scope.row.status == 'Trash'" type="danger" effect="plain" content="废弃"/>
-            </template>
-          </el-table-column>
-
-          <el-table-column
-            prop="method"
-            :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)}" class="api-el-tag">
-                {{ scope.row.method}}
-              </el-tag>
-            </template>
-          </el-table-column>
-
-          <el-table-column
-            prop="path"
-            :label="$t('api_test.definition.api_path')"
-            show-overflow-tooltip/>
-
-          <el-table-column
-            prop="userName"
-            :label="$t('api_test.definition.api_principal')"
-            show-overflow-tooltip/>
-
-          <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>
-            </template>
-          </el-table-column>
-
-          <el-table-column
-            prop="caseTotal"
-            :label="$t('api_test.definition.api_case_number')"
-            show-overflow-tooltip/>
-
-          <el-table-column
-            prop="caseStatus"
-            :label="$t('api_test.definition.api_case_status')"
-            show-overflow-tooltip/>
-
-          <!--          <el-table-column
-                      prop="casePassingRate"
-                      :label="$t('api_test.definition.api_case_passing_rate')"
-                      show-overflow-tooltip/>-->
-
-          <el-table-column :label="$t('commons.operating')" min-width="80" align="center">
-            <template v-slot:default="scope">
-              <el-button type="text" @click="handleTestCase(scope.row)">用例</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <ms-table-pagination :change="initTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
-                             :total="total"/>
-      </el-card>
-    </div>
-    <div id="svgResize"/>
-    <div id="svgDown">
-      <ms-bottom-container v-bind:enableAsideHidden="isHide">
-        <ms-api-case-list @apiCaseClose="apiCaseClose" @refresh="initTable" :visible="visible" :currentRow="currentRow" :api="selectApi"/>
-      </ms-bottom-container>
-    </div>
-  </div>
-
-</template>
-
-<script>
-
-  import MsTableHeader from '../../../../../components/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 "./ApiCaseList";
-  import MsContainer from "../../../../common/components/MsContainer";
-  import MsBottomContainer from "../../../definition/components/BottomContainer";
-  import ShowMoreBtn from "../../../../../components/track/case/components/ShowMoreBtn";
-  import {API_METHOD_COLOUR} from "../../../definition/model/JsonData";
-  import {getCurrentProjectID} from "@/common/js/utils";
-
-  export default {
-    name: "ApiList",
-    components: {
-      MsTableButton,
-      MsTableOperatorButton,
-      MsTableOperator,
-      MsTableHeader,
-      MsTablePagination,
-      MsTag,
-      MsApiCaseList,
-      MsContainer,
-      MsBottomContainer,
-      ShowMoreBtn
-    },
-    data() {
-      return {
-        condition: {},
-        isHide: true,
-        selectApi: {},
-        moduleId: "",
-        deletePath: "/test/case/delete",
-        selectRows: new Set(),
-        buttons: [{name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch}],
-        methodColorMap: new Map(API_METHOD_COLOUR),
-        tableData: [],
-        currentPage: 1,
-        pageSize: 10,
-        total: 0,
-        projectId: "",
-        screenHeight: document.documentElement.clientHeight - 330,//屏幕高度
-      }
-    },
-    props: {
-      currentProtocol: String,
-      currentModule: Object,
-      visible: {
-        type: String,
-      },
-      currentRow: {
-        type: Object,
-      }
-    },
-    created: function () {
-      this.projectId = getCurrentProjectID();
-      this.initTable();
-    },
-    mounted() {
-      this.dragControllerDiv();
-    },
-    watch: {
-      currentModule() {
-        this.initTable();
-        this.apiCaseClose();
-      },
-      visible() {
-        this.initTable();
-        this.apiCaseClose();
-      },
-      currentProtocol() {
-        this.initTable();
-        this.apiCaseClose();
-      },
-    },
-    methods: {
-      initTable() {
-        this.selectRows = new Set();
-        this.condition.filters = ["Prepare", "Underway", "Completed"];
-        if (this.currentModule) {
-          this.condition.moduleIds = [this.currentModule.id];
-        }
-        if (this.trashEnable) {
-          this.condition.filters = ["Trash"];
-          this.condition.moduleIds = [];
-        }
-        if (this.projectId != null) {
-          this.condition.projectId = this.projectId;
-        }
-        if (this.currentProtocol != null) {
-          this.condition.protocol = this.currentProtocol;
-        }
-        this.result = this.$post("/api/definition/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);
-        } else {
-          this.$set(row, "showMore", true);
-          this.selectRows.add(row);
-        }
-        let arr = Array.from(this.selectRows);
-        if (this.currentRow) {
-          this.currentRow.apis = arr;
-        }
-        // 选中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);
-          })
-        }
-      },
-      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);
-          })
-        }
-        if (this.currentRow) {
-          let arr = Array.from(this.selectRows);
-          this.currentRow.apis = arr;
-        }
-      },
-      search() {
-        this.initTable();
-      },
-      buildPagePath(path) {
-        return path + "/" + this.currentPage + "/" + this.pageSize;
-      },
-
-      editApi(row) {
-        this.$emit('editApi', row);
-      },
-      reductionApi(row) {
-        row.status = 'Underway';
-        row.request = null;
-        row.response = null;
-        this.$fileUpload("/api/definition/update", null, [], row, () => {
-          this.$success(this.$t('commons.save_success'));
-          this.search();
-        });
-      },
-      handleDeleteBatch() {
-        if (this.currentModule != undefined && this.currentModule.id == "gc") {
-          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);
-                this.$post('/api/definition/deleteBatch/', ids, () => {
-                  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);
-                this.$post('/api/definition/removeToGc/', ids, () => {
-                  this.selectRows.clear();
-                  this.initTable();
-                  this.$success(this.$t('commons.delete_success'));
-                });
-              }
-            }
-          });
-        }
-      },
-      handleTestCase(testCase) {
-        let h = window.screen.height;
-        let svgTop = document.getElementById("svgTop");
-        svgTop.style.height = h / 2 - 200 + "px";
-
-        let svgDown = document.getElementById("svgDown");
-        svgDown.style.height = h / 2 + "px";
-
-        this.selectApi = testCase;
-        let request = JSON.parse(testCase.request);
-        this.selectApi.url = request.path;
-        this.isHide = false;
-      },
-      handleDelete(api) {
-        if (this.currentModule != undefined && this.currentModule.id == "gc") {
-          this.$get('/api/definition/delete/' + api.id, () => {
-            this.$success(this.$t('commons.delete_success'));
-            this.initTable();
-          });
-          return;
-        }
-        this.$alert(this.$t('api_test.definition.request.delete_confirm') + ' ' + api.name + " ？", '', {
-          confirmButtonText: this.$t('commons.confirm'),
-          callback: (action) => {
-            if (action === 'confirm') {
-              let ids = [api.id];
-              this.$post('/api/definition/removeToGc/', ids, () => {
-                this.$success(this.$t('commons.delete_success'));
-                this.initTable();
-              });
-            }
-          }
-        });
-      },
-      apiCaseClose() {
-        this.selectApi = {};
-        let h = window.screen.height;
-        let svgTop = document.getElementById("svgTop");
-        svgTop.style.height = h - 200 + "px";
-
-        let svgDown = document.getElementById("svgDown");
-        svgDown.style.height = 0 + "px";
-        this.isHide = true;
-      },
-      getColor(enable, method) {
-        if (enable) {
-          return this.methodColorMap.get(method);
-        }
-      },
-      dragControllerDiv: function () {
-        let svgResize = document.getElementById("svgResize");
-        let svgTop = document.getElementById("svgTop");
-        let svgDown = document.getElementById("svgDown");
-        let svgBox = document.getElementById("svgBox");
-        svgResize.onmousedown = function (e) {
-          let startY = e.clientY;
-          svgResize.top = svgResize.offsetTop;
-          document.onmousemove = function (e) {
-            let endY = e.clientY;
-            let moveLen = svgResize.top + (endY - startY);
-            let maxT = svgBox.clientHeight - svgResize.offsetHeight;
-            if (moveLen < 30) moveLen = 30;
-            if (moveLen > maxT - 30) moveLen = maxT - 30;
-            svgResize.style.top = moveLen;
-            svgTop.style.height = moveLen + "px";
-            svgDown.style.height = (svgBox.clientHeight - moveLen - 5) + "px";
-          }
-          document.onmouseup = function (evt) {
-            document.onmousemove = null;
-            document.onmouseup = null;
-            svgResize.releaseCapture && svgResize.releaseCapture();
-          }
-          svgResize.setCapture && svgResize.setCapture();
-          return false;
-        }
-      },
-    }
-  }
-</script>
-
-<style scoped>
-  .operate-button > div {
-    display: inline-block;
-    margin-left: 10px;
-  }
-
-  .request-method {
-    padding: 0 5px;
-    color: #1E90FF;
-  }
-
-  .api-el-tag {
-    color: white;
-  }
-
-  #svgBox {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-  }
-
-  #svgTop {
-    height: calc(30% - 5px);
-    width: 100%;
-    float: left;
-    overflow: auto;
-  }
-
-  #svgResize {
-    position: relative;
-    height: 5px;
-    width: 100%;
-    cursor: s-resize;
-    float: left;
-  }
-
-  #svgDown {
-    height: 70%;
-    width: 100%;
-    float: left;
-    overflow: hidden;
-  }
-</style>
diff --git a/frontend/src/business/components/api/automation/scenario/api/ApiRelevance.vue b/frontend/src/business/components/api/automation/scenario/api/ApiRelevance.vue
index 27ceb47950..9bf29fdb91 100644
--- a/frontend/src/business/components/api/automation/scenario/api/ApiRelevance.vue
+++ b/frontend/src/business/components/api/automation/scenario/api/ApiRelevance.vue
@@ -36,12 +36,12 @@
 </template>
 
 <script>
-    import ScenarioRelevanceCaseList from "./ScenarioRelevanceCaseList";
+    import ScenarioRelevanceCaseList from "./RelevanceCaseList";
     import MsApiModule from "../../../definition/components/module/ApiModule";
     import MsContainer from "../../../../common/components/MsContainer";
     import MsAsideContainer from "../../../../common/components/MsAsideContainer";
     import MsMainContainer from "../../../../common/components/MsMainContainer";
-    import ScenarioRelevanceApiList from "./ScenarioRelevanceApiList";
+    import ScenarioRelevanceApiList from "./RelevanceApiList";
     import RelevanceDialog from "../../../../track/plan/view/comonents/base/RelevanceDialog";
     export default {
       name: "ApiRelevance",
diff --git a/frontend/src/business/components/api/automation/scenario/api/ScenarioRelevanceApiList.vue b/frontend/src/business/components/api/automation/scenario/api/RelevanceApiList.vue
similarity index 93%
rename from frontend/src/business/components/api/automation/scenario/api/ScenarioRelevanceApiList.vue
rename to frontend/src/business/components/api/automation/scenario/api/RelevanceApiList.vue
index 01f872c821..2ec3dfe33a 100644
--- a/frontend/src/business/components/api/automation/scenario/api/ScenarioRelevanceApiList.vue
+++ b/frontend/src/business/components/api/automation/scenario/api/RelevanceApiList.vue
@@ -3,6 +3,8 @@
     :is-api-list-enable="isApiListEnable"
     @isApiListEnableChange="isApiListEnableChange">
 
+    <ms-environment-select :project-id="projectId" v-if="isTestPlan" :is-read-only="isReadOnly" @setEnvironment="setEnvironment"/>
+
     <el-input placeholder="搜索" @blur="initTable" class="search-input" size="small" @keyup.enter.native="initTable" v-model="condition.name"/>
 
     <el-table v-loading="result.loading"
@@ -90,10 +92,12 @@
   import PriorityTableItem from "../../../../track/common/tableItems/planview/PriorityTableItem";
   import {_filter, _sort} from "../../../../../../common/js/utils";
   import {_handleSelect, _handleSelectAll} from "../../../../../../common/js/tableUtils";
+  import MsEnvironmentSelect from "../../../definition/components/case/MsEnvironmentSelect";
 
   export default {
-    name: "ScenarioRelevanceApiList",
+    name: "RelevanceApiList",
     components: {
+      MsEnvironmentSelect,
       PriorityTableItem,
       ApiListContainer,
       MsTableOperatorButton,
@@ -129,6 +133,7 @@
         currentPage: 1,
         pageSize: 10,
         total: 0,
+        environmentId: ""
       }
     },
     props: {
@@ -150,8 +155,8 @@
         type: Boolean,
         default: false,
       },
-      relevanceProjectId: String,
-      planId: String
+      projectId: String,
+      isTestPlan: Boolean
     },
     created: function () {
       this.initTable();
@@ -163,6 +168,9 @@
       currentProtocol() {
         this.initTable();
       },
+      projectId() {
+        this.initTable();
+      }
     },
     computed: {},
     methods: {
@@ -179,11 +187,13 @@
         }
         if (this.projectId != null) {
           this.condition.projectId = this.projectId;
+        } else {
+          this.condition.projectId = getCurrentProjectID();
+
         }
         if (this.currentProtocol != null) {
           this.condition.protocol = this.currentProtocol;
         }
-        this.condition.projectId = getCurrentProjectID();
         this.result = this.$post("/api/definition/list/" + this.currentPage + "/" + this.pageSize, this.condition, response => {
           this.total = response.data.itemCount;
           this.tableData = response.data.listObject;
@@ -218,6 +228,9 @@
       getColor(method) {
         return this.methodColorMap.get(method);
       },
+      setEnvironment(data) {
+        this.environmentId = data.id;
+      }
     },
   }
 </script>
diff --git a/frontend/src/business/components/api/automation/scenario/api/ScenarioRelevanceCaseList.vue b/frontend/src/business/components/api/automation/scenario/api/RelevanceCaseList.vue
similarity index 91%
rename from frontend/src/business/components/api/automation/scenario/api/ScenarioRelevanceCaseList.vue
rename to frontend/src/business/components/api/automation/scenario/api/RelevanceCaseList.vue
index 546abcf4d2..5eea52ad38 100644
--- a/frontend/src/business/components/api/automation/scenario/api/ScenarioRelevanceCaseList.vue
+++ b/frontend/src/business/components/api/automation/scenario/api/RelevanceCaseList.vue
@@ -4,6 +4,8 @@
       :is-api-list-enable="isApiListEnable"
       @isApiListEnableChange="isApiListEnableChange">
 
+      <ms-environment-select :project-id="projectId" v-if="isTestPlan" :is-read-only="isReadOnly" @setEnvironment="setEnvironment"/>
+
       <el-input placeholder="搜索" @blur="initTable" @keyup.enter.native="initTable" class="search-input" size="small" v-model="condition.name"/>
 
       <el-table v-loading="result.loading"
@@ -73,10 +75,12 @@
   import PriorityTableItem from "../../../../track/common/tableItems/planview/PriorityTableItem";
   import {_filter, _sort} from "../../../../../../common/js/utils";
   import {_handleSelect, _handleSelectAll} from "../../../../../../common/js/tableUtils";
+  import MsEnvironmentSelect from "../../../definition/components/case/MsEnvironmentSelect";
 
   export default {
-    name: "ScenarioRelevanceCaseList",
+    name: "RelevanceCaseList",
     components: {
+      MsEnvironmentSelect,
       PriorityTableItem,
       ApiListContainer,
       MsTableOperatorButton,
@@ -111,6 +115,7 @@
         currentPage: 1,
         pageSize: 10,
         total: 0,
+        environmentId: ""
       }
     },
     props: {
@@ -132,8 +137,8 @@
         type: Boolean,
         default: false,
       },
-      relevanceProjectId: String,
-      planId: String
+      projectId: String,
+      isTestPlan: Boolean
     },
     created: function () {
       this.initTable();
@@ -145,6 +150,9 @@
       currentProtocol() {
         this.initTable();
       },
+      projectId() {
+        this.initTable();
+      }
     },
     computed: {
 
@@ -157,10 +165,15 @@
         this.selectRows = new Set();
         this.condition.status = "";
         this.condition.moduleIds = this.selectNodeIds;
+        if (this.projectId != null) {
+          this.condition.projectId = this.projectId;
+        } else {
+          this.condition.projectId = getCurrentProjectID();
+
+        }
         if (this.currentProtocol != null) {
           this.condition.protocol = this.currentProtocol;
         }
-        this.condition.projectId = getCurrentProjectID();
         this.result = this.$post("/api/testcase/list/" + this.currentPage + "/" + this.pageSize, this.condition, response => {
           this.total = response.data.itemCount;
           this.tableData = response.data.listObject;
@@ -209,6 +222,9 @@
           this.$refs.caseList.open(selectApi, testCase.id);
         });
       },
+      setEnvironment(data) {
+        this.environmentId = data.id;
+      }
     },
   }
 </script>
diff --git a/frontend/src/business/components/api/automation/scenario/api/ScenarioRelevance.vue b/frontend/src/business/components/api/automation/scenario/api/ScenarioRelevance.vue
index 42df3555c8..2cf19af777 100644
--- a/frontend/src/business/components/api/automation/scenario/api/ScenarioRelevance.vue
+++ b/frontend/src/business/components/api/automation/scenario/api/ScenarioRelevance.vue
@@ -27,12 +27,12 @@
 </template>
 
 <script>
-    import ScenarioRelevanceCaseList from "./ScenarioRelevanceCaseList";
+    import ScenarioRelevanceCaseList from "./RelevanceCaseList";
     import MsApiModule from "../../../definition/components/module/ApiModule";
     import MsContainer from "../../../../common/components/MsContainer";
     import MsAsideContainer from "../../../../common/components/MsAsideContainer";
     import MsMainContainer from "../../../../common/components/MsMainContainer";
-    import ScenarioRelevanceApiList from "./ScenarioRelevanceApiList";
+    import ScenarioRelevanceApiList from "./RelevanceApiList";
     import MsApiScenarioModule from "../ApiScenarioModule";
     import MsApiScenarioList from "../ApiScenarioList";
     import {getUUID} from "../../../../../../common/js/utils";
diff --git a/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue b/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
index 55d70b2764..c2fb3b5fbc 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
@@ -1,24 +1,10 @@
 <template>
   <div>
     <api-list-container
-      :is-show-change-button="!isPlanModel"
       :is-api-list-enable="isApiListEnable"
       @isApiListEnableChange="isApiListEnableChange">
 
-      <ms-environment-select v-if="isRelevanceModel" :project-id="relevanceProjectId" :is-read-only="isReadOnly" @setEnvironment="setEnvironment"/>
-
-      <el-input v-if="!isPlanModel" placeholder="搜索" @blur="search" @keyup.enter.native="search" class="search-input" size="small" v-model="condition.name"/>
-
-      <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"/>
-      </template>
+      <el-input placeholder="搜索" @blur="search" @keyup.enter.native="search" class="search-input" size="small" v-model="condition.name"/>
 
       <el-table v-loading="result.loading"
                 border
@@ -30,7 +16,7 @@
         <el-table-column type="selection"/>
         <el-table-column width="40" :resizable="false" align="center">
           <template v-slot:default="scope">
-            <show-more-btn :is-show="scope.row.showMore && !isReadOnly && !isRelevanceModel" :buttons="buttons" :size="selectRows.size"/>
+            <show-more-btn :is-show="scope.row.showMore && !isReadOnly" :buttons="buttons" :size="selectRows.size"/>
           </template>
         </el-table-column>
 
@@ -69,7 +55,7 @@
           </template>
         </el-table-column>
 
-        <el-table-column v-if="!isReadOnly && !isRelevanceModel" :label="$t('commons.operating')" min-width="130" align="center">
+        <el-table-column v-if="!isReadOnly" :label="$t('commons.operating')" min-width="130" align="center">
           <template v-slot:default="scope">
             <!--<el-button type="text" @click="reductionApi(scope.row)" v-if="trashEnable">{{$t('commons.reduction')}}</el-button>-->
             <el-button type="text" @click="handleTestCase(scope.row)" v-if="!trashEnable">{{$t('commons.edit')}}</el-button>
@@ -82,9 +68,9 @@
                            :total="total"/>
     </api-list-container>
 
-    <api-case-list v-if="!isRelevanceModel" @showExecResult="showExecResult" @refresh="initTable" :currentApi="selectCase" ref="caseList"/>
+    <api-case-list @showExecResult="showExecResult" @refresh="initTable" :currentApi="selectCase" ref="caseList"/>
     <!--批量编辑-->
-    <ms-batch-edit v-if="!isRelevanceModel" ref="batchEdit" @batchEdit="batchEdit" :typeArr="typeArr" :value-arr="valueArr"/>
+    <ms-batch-edit ref="batchEdit" @batchEdit="batchEdit" :typeArr="typeArr" :value-arr="valueArr"/>
   </div>
 
 </template>
@@ -109,12 +95,11 @@
   import {_filter, _sort} from "../../../../../../common/js/utils";
   import TestPlanCaseListHeader from "../../../../track/plan/view/comonents/api/TestPlanCaseListHeader";
   import MsEnvironmentSelect from "../case/MsEnvironmentSelect";
+  import {_handleSelect, _handleSelectAll} from "../../../../../../common/js/tableUtils";
 
   export default {
     name: "ApiCaseSimpleList",
     components: {
-      MsEnvironmentSelect,
-      TestPlanCaseListHeader,
       ApiCaseList,
       PriorityTableItem,
       ApiListContainer,
@@ -213,14 +198,7 @@
       }
     },
     computed: {
-      // 测试计划关联测试列表
-      isRelevanceModel() {
-        return this.model === 'relevance'
-      },
-      // 测试计划接口用例列表
-      isPlanModel() {
-        return this.model === 'plan'
-      },
+
       // 接口定义用例列表
       isApiModel() {
         return this.model === 'api'
@@ -232,7 +210,6 @@
       },
       initTable() {
         this.selectRows = new Set();
-        // this.condition.filters = ["Prepare", "Underway", "Completed"];
         this.condition.status = "";
         this.condition.moduleIds = this.selectNodeIds;
         if (this.trashEnable) {
@@ -240,46 +217,18 @@
           this.condition.moduleIds = [];
         }
 
-        this.buildCondition(this.condition);
+        this.condition.projectId = getCurrentProjectID();
 
         if (this.currentProtocol != null) {
           this.condition.protocol = this.currentProtocol;
         }
         if (this.condition.projectId) {
-          this.result = this.$post(this.getListUrl() + this.currentPage + "/" + this.pageSize, this.condition, response => {
+          this.result = this.$post('/api/testcase/list/' + this.currentPage + "/" + this.pageSize, this.condition, response => {
             this.total = response.data.itemCount;
             this.tableData = response.data.listObject;
           });
         }
       },
-      buildCondition(condition) {
-        if (this.isPlanModel) {
-          condition.planId = this.planId;
-        } else if (this.isRelevanceModel) {
-          condition.planId = this.planId;
-          condition.projectId = this.getProjectId();
-        } else {
-          condition.projectId = this.getProjectId();
-        }
-      },
-      getListUrl() {
-        if (this.isPlanModel) {
-          return '/test/plan/api/case/list/';
-        } else if (this.isRelevanceModel) {
-          return '/test/plan/api/case/relevance/list/';
-        } else {
-          return '/api/testcase/list/';
-        }
-      },
-      getDeleteUrl(apiCase) {
-        if (this.isPlanModel) {
-          return '/test/plan/api/case/delete/' + this.planId + '/' + apiCase.id;
-        } else if (this.isRelevanceModel) {
-          return '/api/testcase/delete/' + apiCase.id;
-        } else {
-          return '/api/testcase/delete/' + apiCase.id;
-        }
-      },
       // getMaintainerOptions() {
       //   let workspaceId = localStorage.getItem(WORKSPACE_ID);
       //   this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
@@ -287,23 +236,7 @@
       //   });
       // },
       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);
-          })
-        }
+        _handleSelect(this, selection, row, this.selectRows);
       },
       showExecResult(row) {
         this.visible = false;
@@ -322,23 +255,7 @@
         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);
-          })
-        }
+        _handleSelectAll(this, selection, this.tableData, this.selectRows);
       },
       search() {
         this.initTable();
@@ -377,7 +294,7 @@
             confirmButtonText: this.$t('commons.confirm'),
             callback: (action) => {
               if (action === 'confirm') {
-                this.$post(this.getBatchDeleteParam(), this.buildBatchDeleteParam(), () => {
+                this.$post('/api/testcase/deleteBatch/',  Array.from(this.selectRows).map(row => row.id), () => {
                   this.selectRows.clear();
                   this.initTable();
                   this.$success(this.$t('commons.delete_success'));
@@ -401,23 +318,6 @@
         //   });
         // }
       },
-      buildBatchDeleteParam() {
-        if (this.isPlanModel) {
-          let request = {};
-          request.ids = Array.from(this.selectRows).map(row => row.id);
-          request.planId = this.planId;
-          return request;
-        } else {
-          return Array.from(this.selectRows).map(row => row.id);
-        }
-      },
-      getBatchDeleteParam() {
-        if (this.isPlanModel) {
-         return '/test/plan/api/case/batch/delete';
-        } else {
-          return '/api/testcase/deleteBatch/';
-        }
-      },
       handleEditBatch() {
         this.$refs.batchEdit.open();
       },
@@ -434,7 +334,7 @@
       },
       handleDelete(apiCase) {
         // if (this.trashEnable) {
-          this.$get(this.getDeleteUrl(apiCase), () => {
+          this.$get('/api/testcase/delete/' + apiCase.id, () => {
             this.$success(this.$t('commons.delete_success'));
             this.initTable();
           });
@@ -453,13 +353,6 @@
         //   }
         // });
       },
-      getProjectId() {
-        if (!this.isRelevanceModel) {
-          return getCurrentProjectID();
-        } else {
-          return this.relevanceProjectId;
-        }
-      },
       setEnvironment(data) {
         this.environmentId = data.id;
       }
diff --git a/frontend/src/business/components/api/definition/components/list/ApiList.vue b/frontend/src/business/components/api/definition/components/list/ApiList.vue
index 77021a8c52..d1fbc6994e 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiList.vue
@@ -4,8 +4,6 @@
       :is-api-list-enable="isApiListEnable"
       @isApiListEnableChange="isApiListEnableChange">
 
-      <ms-environment-select :project-id="relevanceProjectId" v-if="isRelevance" :is-read-only="isReadOnly" @setEnvironment="setEnvironment"/>
-
       <el-input placeholder="搜索" @blur="search" class="search-input" size="small" @keyup.enter.native="search" v-model="condition.name"/>
 
       <el-table v-loading="result.loading"
@@ -16,7 +14,7 @@
         <el-table-column type="selection"/>
         <el-table-column width="40" :resizable="false" align="center">
           <template v-slot:default="scope">
-            <show-more-btn :is-show="scope.row.showMore && !isReadOnly && !isRelevance" :buttons="buttons" :size="selectRows.size"/>
+            <show-more-btn :is-show="scope.row.showMore && !isReadOnly" :buttons="buttons" :size="selectRows.size"/>
           </template>
         </el-table-column>
 
@@ -77,7 +75,7 @@
           :label="$t('api_test.definition.api_case_passing_rate')"
           show-overflow-tooltip/>
 
-        <el-table-column v-if="!isReadOnly && !isRelevance" :label="$t('commons.operating')" min-width="130" align="center">
+        <el-table-column v-if="!isReadOnly" :label="$t('commons.operating')" min-width="130" align="center">
           <template v-slot:default="scope">
             <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>
@@ -114,12 +112,10 @@
   import {getCurrentProjectID} from "@/common/js/utils";
   import {WORKSPACE_ID} from '../../../../../../common/js/constants';
   import ApiListContainer from "./ApiListContainer";
-  import MsEnvironmentSelect from "../case/MsEnvironmentSelect";
 
   export default {
     name: "ApiList",
     components: {
-      MsEnvironmentSelect,
       ApiListContainer,
       MsTableButton,
       MsTableOperatorButton,
@@ -184,8 +180,6 @@
         type: Boolean,
         default: false
       },
-      relevanceProjectId: String,
-      isRelevance: Boolean
     },
     created: function () {
       this.initTable();
@@ -202,9 +196,6 @@
         if (this.trashEnable) {
           this.initTable();
         }
-      },
-      relevanceProjectId() {
-        this.initTable();
       }
     },
     methods: {
@@ -221,7 +212,7 @@
           this.condition.moduleIds = [];
         }
 
-        this.condition.projectId = this.getProjectId();
+        this.condition.projectId = getCurrentProjectID();
         if (this.currentProtocol != null) {
           this.condition.protocol = this.currentProtocol;
         }
@@ -385,16 +376,6 @@
       showExecResult(row) {
         this.$emit('showExecResult', row);
       },
-      getProjectId() {
-        if (!this.isCaseRelevance) {
-          return getCurrentProjectID();
-        } else {
-          return this.relevanceProjectId;
-        }
-      },
-      setEnvironment(data) {
-        this.environmentId = data.id;
-      }
     },
   }
 </script>
diff --git a/frontend/src/business/components/track/plan/view/comonents/api/TestCaseApiRelevance.vue b/frontend/src/business/components/track/plan/view/comonents/api/TestCaseApiRelevance.vue
index 57693c9f1a..a4d9f046f4 100644
--- a/frontend/src/business/components/track/plan/view/comonents/api/TestCaseApiRelevance.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/api/TestCaseApiRelevance.vue
@@ -12,42 +12,30 @@
         @protocolChange="handleProtocolChange"
         @refreshTable="refresh"
         @setModuleOptions="setModuleOptions"
-        :relevance-project-id="projectId"
         :is-read-only="true"
-        :type="'edit'"
         ref="nodeTree"/>
     </template>
 
-    <!-- 列表集合 -->
-    <api-list
+    <relevance-api-list
       v-if="isApiListEnable"
       :current-protocol="currentProtocol"
-      :currentRow="currentRow"
       :select-node-ids="selectNodeIds"
-      :trash-enable="trashEnable"
       :is-api-list-enable="isApiListEnable"
-      :is-case-relevance="true"
-      :relevance-project-id="projectId"
-      :is-relevance="true"
+      :project-id="projectId"
+      :is-test-plan="true"
       @isApiListEnableChange="isApiListEnableChange"
       ref="apiList"/>
 
-    <!--测试用例列表-->
-    <api-case-simple-list
+    <relevance-case-list
       v-if="!isApiListEnable"
       :current-protocol="currentProtocol"
-      :currentRow="currentRow"
       :select-node-ids="selectNodeIds"
-      :trash-enable="trashEnable"
       :is-api-list-enable="isApiListEnable"
-      :is-case-relevance="true"
-      :relevance-project-id="projectId"
-      :plan-id="planId"
-      :model="'relevance'"
+      :project-id="projectId"
+      :is-test-plan="true"
       @isApiListEnableChange="isApiListEnableChange"
       ref="apiCaseList"/>
 
-
   </test-case-relevance-base>
 
 </template>
@@ -56,15 +44,14 @@
 
   import TestCaseRelevanceBase from "../base/TestCaseRelevanceBase";
   import MsApiModule from "../../../../../api/definition/components/module/ApiModule";
-  import {getCurrentProjectID} from "../../../../../../../common/js/utils";
-  import ApiList from "../../../../../api/definition/components/list/ApiList";
-  import ApiCaseSimpleList from "../../../../../api/definition/components/list/ApiCaseSimpleList";
+  import RelevanceApiList from "../../../../../api/automation/scenario/api/RelevanceApiList";
+  import RelevanceCaseList from "../../../../../api/automation/scenario/api/RelevanceCaseList";
 
   export default {
     name: "TestCaseApiRelevance",
     components: {
-      ApiCaseSimpleList,
-      ApiList,
+      RelevanceCaseList,
+      RelevanceApiList,
       MsApiModule,
       TestCaseRelevanceBase,
     },
@@ -145,11 +132,6 @@
         param.planId = this.planId;
         param.selectIds = selectIds;
         param.environmentId = environmentId;
-        // param.request = this.condition;
-        // 选择全选则全部加入到评审，无论是否加载完全部
-        // if (this.testCases.length === param.testCaseIds.length) {
-        //   param.testCaseIds = ['all'];
-        // }
 
         this.result = this.$post(url, param, () => {
           this.$success(this.$t('commons.save_success'));
diff --git a/frontend/src/business/components/track/plan/view/comonents/base/TestCaseRelevanceBase.vue b/frontend/src/business/components/track/plan/view/comonents/base/TestCaseRelevanceBase.vue
index 6be80f9c4e..e2a3f23ffc 100644
--- a/frontend/src/business/components/track/plan/view/comonents/base/TestCaseRelevanceBase.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/base/TestCaseRelevanceBase.vue
@@ -1,55 +1,45 @@
 <template>
-  <div>
-    <el-dialog :title="$t('test_track.plan_view.relevance_test_case')"
-               :visible.sync="dialogVisible"
-               @close="close"
-               width="60%" v-loading="result.loading"
-               :close-on-click-modal="false"
-               top="50px">
+  <relevance-dialog :title="$t('test_track.plan_view.relevance_test_case')"  ref="relevanceDialog">
 
-      <el-container class="main-content">
-        <el-aside class="tree-aside" width="250px">
-          <select-menu
-            :data="projects"
-            width="160px"
-            :current-data="currentProject"
-            :title="$t('test_track.switch_project')"
-            @dataChange="changeProject"/>
-          <slot name="aside"></slot>
-        </el-aside>
+    <template v-slot:aside>
+      <select-menu
+        :data="projects"
+        width="160px"
+        :current-data="currentProject"
+        :title="$t('test_track.switch_project')"
+        @dataChange="changeProject"/>
+      <slot name="aside"></slot>
+    </template>
 
-        <el-container>
-          <el-main class="case-content">
-            <slot></slot>
-          </el-main>
-        </el-container>
-      </el-container>
+    <slot></slot>
 
-      <template v-slot:footer>
-        <ms-dialog-footer @cancel="dialogVisible = false" @confirm="save"/>
-      </template>
+    <template v-slot:footer>
+      <ms-dialog-footer @cancel="close" @confirm="save"/>
+    </template>
 
-    </el-dialog>
-
-  </div>
+    <template v-slot:footer>
+      <ms-dialog-footer @cancel="close" @confirm="save"/>
+    </template>
 
+  </relevance-dialog>
 </template>
 
 <script>
 
   import MsDialogFooter from '../../../../../common/components/MsDialogFooter'
   import SelectMenu from "../../../../common/SelectMenu";
+  import RelevanceDialog from "./RelevanceDialog";
 
   export default {
     name: "TestCaseRelevanceBase",
     components: {
+      RelevanceDialog,
       SelectMenu,
       MsDialogFooter,
     },
     data() {
       return {
         result: {},
-        dialogVisible: false,
         currentProject: {},
         projectId: '',
         projectName: '',
@@ -66,10 +56,6 @@
 
     },
     methods: {
-      open() {
-        this.getProject();
-        this.dialogVisible = true;
-      },
 
       refreshNode() {
         this.$emit('refresh');
@@ -80,7 +66,12 @@
       },
 
       close() {
-        this.dialogVisible = false;
+        this.$refs.relevanceDialog.close();
+      },
+
+      open() {
+        this.getProject();
+        this.$refs.relevanceDialog.open();
       },
 
       getProject() {
@@ -108,53 +99,4 @@
 </script>
 
 <style scoped>
-
-  .tb-edit .el-input {
-    display: none;
-    color: black;
-  }
-
-  .tb-edit .current-row .el-input {
-    display: block;
-
-  }
-
-  .tb-edit .current-row .el-input + span {
-    display: none;
-
-  }
-
-  .node-tree {
-    margin-right: 10px;
-  }
-
-  .el-header {
-    background-color: darkgrey;
-    color: #333;
-    line-height: 60px;
-  }
-
-  .case-content {
-    padding: 0px 20px;
-    height: 100%;
-    /*border: 1px solid #EBEEF5;*/
-  }
-
-  .tree-aside {
-    min-height: 300px;
-    max-height: 100%;
-  }
-
-  .main-content {
-    min-height: 300px;
-    height: 100%;
-    /*border: 1px solid #EBEEF5;*/
-  }
-
-  .project-link {
-    float: right;
-    margin-right: 12px;
-    margin-bottom: 10px;
-  }
-
 </style>
diff --git a/frontend/src/common/js/tableUtils.js b/frontend/src/common/js/tableUtils.js
index 44ed9b0cfa..fcd06333bd 100644
--- a/frontend/src/common/js/tableUtils.js
+++ b/frontend/src/common/js/tableUtils.js
@@ -29,12 +29,7 @@ export function _handleSelect(component, selection, row, selectRows) {
     selectRows.add(row);
   }
   let arr = Array.from(selectRows);
-  // 选中1个以上的用例时显示更多操作
-  if (selectRows.size === 1) {
-    component.$set(arr[0], "showMore", false);
-  } else if (selectRows.size === 2) {
-    arr.forEach(row => {
-      component.$set(row, "showMore", true);
-    })
-  }
+  arr.forEach(row => {
+    component.$set(row, "showMore", true);
+  })
 }