Merge remote-tracking branch 'origin/v1.6' into v1.6

# Conflicts:
#	backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
#	frontend/src/business/components/api/definition/components/list/ApiList.vue

backend/src/main/java/io/metersphere/api/controller/ApiDefinitionController.java

@@ -41,6 +41,13 @@ public class ApiDefinitionController {
         return PageUtils.setPageInfo(page, apiDefinitionService.list(request));
     }
 
+    @PostMapping("/list/relevance/{goPage}/{pageSize}")
+    public Pager<List<ApiDefinitionResult>> listRelevance(@PathVariable int goPage, @PathVariable int pageSize, @RequestBody ApiDefinitionRequest request) {
+        Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
+        request.setWorkspaceId(SessionUtils.getCurrentWorkspaceId());
+        return PageUtils.setPageInfo(page, apiDefinitionService.listRelevance(request));
+    }
+
     @PostMapping("/list/all")
     public List<ApiDefinitionResult> list(@RequestBody ApiDefinitionRequest request) {
         return apiDefinitionService.list(request);

backend/src/main/java/io/metersphere/api/dto/definition/ApiDefinitionRequest.java

@@ -20,6 +20,7 @@ public class ApiDefinitionRequest {
     private String name;
     private String workspaceId;
     private String userId;
+    private String planId;
     private boolean recent = false;
     private List<OrderRequest> orders;
     private List<String> filters;

backend/src/main/java/io/metersphere/api/parse/Swagger2Parser.java

@@ -283,6 +283,12 @@ public class Swagger2Parser extends ApiImportAbstractParser {
                     } else {
                         jsonObject.put(key, new ArrayList<>());
                     }
+                } else if (value instanceof RefProperty) {
+                    RefProperty refProperty = (RefProperty) value;
+                    String simpleRef = refProperty.getSimpleRef();
+                    refSet.add(simpleRef);
+                    Model model = definitions.get(simpleRef);
+                    jsonObject.put(key, getBodyParameters(model.getProperties(), refSet));
                 } else {
                     jsonObject.put(key, getDefaultValueByPropertyType(value));
                 }

backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java

@@ -79,23 +79,7 @@ public class ApiDefinitionService {
     public List<ApiDefinitionResult> list(ApiDefinitionRequest request) {
         request.setOrders(ServiceUtils.getDefaultOrder(request.getOrders()));
         List<ApiDefinitionResult> resList = extApiDefinitionMapper.list(request);
-        if (!resList.isEmpty()) {
+        calculateResult(resList);
-            List<String> ids = resList.stream().map(ApiDefinitionResult::getId).collect(Collectors.toList());
-            List<ApiComputeResult> results = extApiDefinitionMapper.selectByIds(ids);
-            Map<String, ApiComputeResult> resultMap = results.stream().collect(Collectors.toMap(ApiComputeResult::getApiDefinitionId, Function.identity()));
-            for (ApiDefinitionResult res : resList) {
-                ApiComputeResult compRes = resultMap.get(res.getId());
-                if (compRes != null) {
-                    res.setCaseTotal(compRes.getCaseTotal());
-                    res.setCasePassingRate(compRes.getPassRate());
-                    res.setCaseStatus(compRes.getStatus());
-                } else {
-                    res.setCaseTotal("-");
-                    res.setCasePassingRate("-");
-                    res.setCaseStatus("-");
-                }
-            }
-        }
         return resList;
     }
 
@@ -517,4 +501,31 @@ public class ApiDefinitionService {
         }
         extApiDefinitionMapper.removeToGc(apiIds);
     }
+
+    public List<ApiDefinitionResult> listRelevance(ApiDefinitionRequest request) {
+        request.setOrders(ServiceUtils.getDefaultOrder(request.getOrders()));
+        List<ApiDefinitionResult> resList = extApiDefinitionMapper.listRelevance(request);
+        calculateResult(resList);
+        return resList;
+    }
+
+    public void calculateResult(List<ApiDefinitionResult> resList) {
+        if (!resList.isEmpty()) {
+            List<String> ids = resList.stream().map(ApiDefinitionResult::getId).collect(Collectors.toList());
+            List<ApiComputeResult> results = extApiDefinitionMapper.selectByIds(ids);
+            Map<String, ApiComputeResult> resultMap = results.stream().collect(Collectors.toMap(ApiComputeResult::getApiDefinitionId, Function.identity()));
+            for (ApiDefinitionResult res : resList) {
+                ApiComputeResult compRes = resultMap.get(res.getId());
+                if (compRes != null) {
+                    res.setCaseTotal(compRes.getCaseTotal());
+                    res.setCasePassingRate(compRes.getPassRate());
+                    res.setCaseStatus(compRes.getStatus());
+                } else {
+                    res.setCaseTotal("-");
+                    res.setCasePassingRate("-");
+                    res.setCaseStatus("-");
+                }
+            }
+        }
+    }
 }

backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionMapper.java

@@ -28,4 +28,6 @@ public interface ExtApiDefinitionMapper {
     List<ApiDataCountResult> countApiCoverageByProjectID(String projectId);
 
     ApiDefinition getNextNum(@Param("projectId") String projectId);
+
+    List<ApiDefinitionResult> listRelevance(@Param("request")ApiDefinitionRequest request);
 }

backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiDefinitionMapper.xml

@@ -295,4 +295,63 @@
     <select id="getNextNum" resultType="io.metersphere.base.domain.ApiDefinition">
         SELECT * FROM api_definition WHERE api_definition.project_id = #{projectId} ORDER BY num DESC LIMIT 1;
     </select>
+
+    <select id="listRelevance" resultType="io.metersphere.api.dto.definition.ApiDefinitionResult">
+        select api_definition.id, api_definition.project_id, api_definition.num,
+            api_definition.name,api_definition.protocol,api_definition.path,api_definition.module_id,api_definition.module_path,api_definition.method,
+            api_definition.description,api_definition.request,api_definition.response,api_definition.environment_id,
+            api_definition.status, api_definition.user_id, api_definition.create_time, api_definition.update_time
+        from api_definition
+        inner join
+          api_test_case c
+          on c.api_definition_id = api_definition.id
+          and not exists (
+            select id
+            from test_plan_api_case t
+            where t.api_case_id = c.id
+            and t.test_plan_id = #{request.planId}
+          )
+        <where>
+            <if test="request.combine != null">
+                <include refid="combine">
+                    <property name="condition" value="request.combine"/>
+                    <property name="name" value="request.name"/>
+                </include>
+            </if>
+
+            <if test="request.name != null">
+                and api_definition.name like CONCAT('%', #{request.name},'%')
+            </if>
+            <if test="request.protocol != null">
+                AND api_definition.protocol = #{request.protocol}
+            </if>
+            <if test="request.id != null">
+                AND api_definition.id = #{request.id}
+            </if>
+            <if test="request.moduleId != null">
+                AND api_definition.module_id = #{request.moduleId}
+            </if>
+            <if test="request.projectId != null">
+                AND api_definition.project_id = #{request.projectId}
+            </if>
+            <if test="request.moduleIds != null and request.moduleIds.size() > 0">
+                AND api_definition.module_id in
+                <foreach collection="request.moduleIds" item="nodeId" separator="," open="(" close=")">
+                    #{nodeId}
+                </foreach>
+            </if>
+            <if test="request.filters != null and request.filters.size() > 0">
+                and api_definition.status in
+                <foreach collection="request.filters" item="value" separator="," open="(" close=")">
+                    #{value}
+                </foreach>
+            </if>
+        </where>
+        <if test="request.orders != null and request.orders.size() > 0">
+            order by
+            <foreach collection="request.orders" separator="," item="order">
+                api_definition.${order.name} ${order.type}
+            </foreach>
+        </if>
+    </select>
 </mapper>

backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanApiCaseMapper.xml

@@ -19,7 +19,7 @@
     select
       t.id, t.environment_id, t.create_time, t.update_time,
       c.id as case_id, c.project_id, c.name, c.api_definition_id, c.priority, c.description, c.create_user_id, c.update_user_id,
-      a.module_id, a.path, a.protocol, ader.status execResult
+      a.module_id, a.path, a.protocol, t.status execResult
     from
       test_plan_api_case t
     inner join
@@ -32,24 +32,6 @@
       api_definition a
     on
       c.api_definition_id = a.id
-    left join (
-      select
-        e.status, e.id, e.resource_id
-      from
-        api_definition_exec_result e
-      left join (
-        select
-          max(start_time) start_time , resource_id
-        from
-          api_definition_exec_result
-        group by
-          resource_id
-      ) as b
-      on e.resource_id = b.resource_id
-      where
-        e.start_time = b.start_time and e.type = 'API_PLAN'
-    ) as ader
-    on t.id = ader.resource_id
     <if test="request.protocol != null and request.protocol!=''">
       and a.protocol = #{request.protocol}
     </if>

backend/src/main/java/io/metersphere/xpack

@@ -1 +1 @@
-Subproject commit c10b11f224e4186306e6ae3a3976e29a42af96a5
+Subproject commit f27d1609d77f7d6c988d37d709466e844d350e17

frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue

@@ -9,7 +9,7 @@
       <el-table ref="scenarioTable" border :data="tableData" class="adjust-table" @select-all="select" @select="select"
                 v-loading="loading">
         <el-table-column type="selection" width="38"/>
-        <el-table-column width="40" :resizable="false" align="center">
+        <el-table-column v-if="!referenced" width="40" :resizable="false" align="center">
           <el-dropdown slot="header" style="width: 14px">
               <span class="el-dropdown-link" style="width: 14px">
                 <i class="el-icon-arrow-down el-icon--right" style="margin-left: 0px"></i>
@@ -23,6 +23,7 @@
               </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
+
           <template v-slot:default="{row}">
             <show-more-btn :is-show="isSelect(row)" :buttons="buttons" :size="selectDataCounts"/>
           </template>

frontend/src/business/components/api/automation/scenario/ApiScenarioModule.vue

@@ -15,10 +15,9 @@
       ref="nodeTree">
 
       <template v-slot:header>
-        <el-input class="module-input" :placeholder="$t('test_track.module.search')" v-model="condition.filterText"
+        <el-input :placeholder="$t('test_track.module.search')" v-model="condition.filterText" size="small">
-                  size="small">
           <template v-slot:append>
-            <el-button icon="el-icon-folder-add" @click="addScenario" v-tester/>
+            <el-button v-if="!isReadOnly" icon="el-icon-folder-add" @click="addScenario" v-tester/>
           </template>
         </el-input>
         <module-trash-button v-if="!isReadOnly" :condition="condition" :exe="enableTrash"/>
@@ -247,7 +246,4 @@
     width: 30px;
   }
 
-  .module-input {
-    width: 275px;
-  }
 </style>

frontend/src/business/components/api/automation/scenario/EditApiScenario.vue

@@ -115,7 +115,6 @@
                   <el-checkbox v-model="enableCookieShare">共享cookie</el-checkbox>
                 </el-col>
                 <el-col :span="7" class="ms-font">
-                  {{$t('api_test.definition.request.run_env')}}：
                   <el-select v-model="currentEnvironmentId" size="small" class="ms-htt-width"
                              :placeholder="$t('api_test.definition.request.run_env')"
                              clearable>
@@ -177,19 +176,21 @@
           </el-col>
           <!-- 按钮列表 -->
           <el-col :span="3">
-            <vue-fab id="fab" mainBtnColor="#783887" size="small" :global-options="globalOptions"
+            <div @click="fabClick">
-                     :click-auto-close="false" v-outside-click="outsideClick">
+              <vue-fab id="fab" mainBtnColor="#783887" size="small" :global-options="globalOptions"
-              <fab-item
+                       :click-auto-close="false" v-outside-click="outsideClick">
-                v-for="(item, index) in buttons"
+                <fab-item
-                :key="index"
+                  v-for="(item, index) in buttons"
-                :idx="getIdx(index)"
+                  :key="index"
-                :title="item.title"
+                  :idx="getIdx(index)"
-                :title-bg-color="item.titleBgColor"
+                  :title="item.title"
-                :title-color="item.titleColor"
+                  :title-bg-color="item.titleBgColor"
-                :color="item.titleColor"
+                  :title-color="item.titleColor"
-                :icon="item.icon"
+                  :color="item.titleColor"
-                @clickItem="item.click"/>
+                  :icon="item.icon"
-            </vue-fab>
+                  @clickItem="item.click"/>
+              </vue-fab>
+            </div>
           </el-col>
         </el-row>
       </div>
@@ -248,7 +249,7 @@
   import InputTag from 'vue-input-tag'
   import "@/common/css/material-icons.css"
   import OutsideClick from "@/common/js/outside-click";
-  import ScenarioApiRelevance from "./api/ScenarioApiRelevance";
+  import ScenarioApiRelevance from "./api/ApiRelevance";
   import ScenarioRelevance from "./api/ScenarioRelevance";
 
   export default {
@@ -451,9 +452,14 @@
         return false;
       },
       outsideClick(e) {
-        e.stopPropagation()
+        e.stopPropagation();
         this.showAll();
       },
+      fabClick() {
+        if (this.operatingElements.length < 1) {
+          this.$info("引用的场景或接口无法添加配置");
+        }
+      },
       addComponent(type) {
         switch (type) {
           case ELEMENT_TYPE.IfController:

frontend/src/business/components/api/automation/scenario/api/ApiCaseList.vue

@@ -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>

frontend/src/business/components/api/automation/scenario/api/ApiDefinition.vue

@@ -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>

frontend/src/business/components/api/automation/scenario/api/ApiList.vue

@@ -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>

frontend/src/business/components/api/automation/scenario/api/ApiRelevance.vue

@@ -1,64 +1,56 @@
 <template>
-  <el-dialog class="api-relevance" :title="'接口导入'"
+  <relevance-dialog :title="'接口导入'" ref="relevanceDialog">
-             :visible.sync="dialogVisible"
-             width="70%"
-             :close-on-click-modal="false"
-             top="50px">
 
-    <ms-container>
+    <template v-slot:aside>
-      <ms-aside-container :enable-aside-hidden="false">
+      <ms-api-module
-        <ms-api-module
+        @nodeSelectEvent="nodeChange"
-          @nodeSelectEvent="nodeChange"
+        @protocolChange="handleProtocolChange"
-          @protocolChange="handleProtocolChange"
+        @refreshTable="refresh"
-          @refreshTable="refresh"
+        @setModuleOptions="setModuleOptions"
-          @setModuleOptions="setModuleOptions"
+        :is-read-only="true"
-          :is-read-only="true"
+        ref="nodeTree"/>
-          ref="nodeTree"/>
+    </template>
-      </ms-aside-container>
 
-      <ms-main-container>
+    <scenario-relevance-api-list
-        <scenario-relevance-api-list
+      v-if="isApiListEnable"
-          v-if="isApiListEnable"
+      :current-protocol="currentProtocol"
-          :current-protocol="currentProtocol"
+      :select-node-ids="selectNodeIds"
-          :select-node-ids="selectNodeIds"
+      :is-api-list-enable="isApiListEnable"
-          :is-api-list-enable="isApiListEnable"
+      @isApiListEnableChange="isApiListEnableChange"
-          @isApiListEnableChange="isApiListEnableChange"
+      ref="apiList"/>
-          ref="apiList"
-        />
 
-        <scenario-relevance-case-list
+    <scenario-relevance-case-list
-          v-if="!isApiListEnable"
+      v-if="!isApiListEnable"
-          :current-protocol="currentProtocol"
+      :current-protocol="currentProtocol"
-          :select-node-ids="selectNodeIds"
+      :select-node-ids="selectNodeIds"
-          :is-api-list-enable="isApiListEnable"
+      :is-api-list-enable="isApiListEnable"
-          @isApiListEnableChange="isApiListEnableChange"
+      @isApiListEnableChange="isApiListEnableChange"
-          ref="apiCaseList"/>
+      ref="apiCaseList"/>
-      </ms-main-container>
-    </ms-container>
 
     <template v-slot:footer>
       <el-button type="primary" @click="copy" @keydown.enter.native.prevent>复制</el-button>
       <el-button v-if="!isApiListEnable" type="primary" @click="reference" @keydown.enter.native.prevent>引用</el-button>
     </template>
 
-  </el-dialog>
+  </relevance-dialog>
 </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: "ScenarioApiRelevance",
+      name: "ApiRelevance",
       components: {
+        RelevanceDialog,
         ScenarioRelevanceApiList,
         MsMainContainer, MsAsideContainer, MsContainer, MsApiModule, ScenarioRelevanceCaseList},
       data() {
           return {
-            dialogVisible: false,
             result: {},
             currentProtocol: null,
             selectNodeIds: [],
@@ -91,10 +83,10 @@
         },
         close() {
           this.refresh();
-          this.dialogVisible = false;
+          this.$refs.relevanceDialog.close();
         },
         open() {
-          this.dialogVisible = true;
+          this.$refs.relevanceDialog.open();
         },
         isApiListEnableChange(data) {
           this.isApiListEnable = data;
@@ -120,13 +112,4 @@
 </script>
 
 <style scoped>
-
-  .ms-aside-container {
-    border: 0px;
-  }
-
-  .api-relevance >>> .el-dialog__body {
-    padding: 10px 20px;
-  }
-
 </style>

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"
@@ -43,11 +45,6 @@
         :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>
@@ -90,10 +87,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 +128,7 @@
         currentPage: 1,
         pageSize: 10,
         total: 0,
+        environmentId: ""
       }
     },
     props: {
@@ -150,8 +150,9 @@
         type: Boolean,
         default: false,
       },
-      relevanceProjectId: String,
+      projectId: String,
-      planId: String
+      planId: String,
+      isTestPlan: Boolean
     },
     created: function () {
       this.initTable();
@@ -163,6 +164,9 @@
       currentProtocol() {
         this.initTable();
       },
+      projectId() {
+        this.initTable();
+      }
     },
     computed: {},
     methods: {
@@ -179,12 +183,19 @@
         }
         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();
+        let url = '/api/definition/list/';
-        this.result = this.$post("/api/definition/list/" + this.currentPage + "/" + this.pageSize, this.condition, response => {
+        if (this.isTestPlan) {
+          url = '/api/definition/list/relevance/';
+          this.condition.planId = this.planId;
+        }
+        this.result = this.$post(url + this.currentPage + "/" + this.pageSize, this.condition, response => {
           this.total = response.data.itemCount;
           this.tableData = response.data.listObject;
         });
@@ -218,6 +229,9 @@
       getColor(method) {
         return this.methodColorMap.get(method);
       },
+      setEnvironment(data) {
+        this.environmentId = data.id;
+      }
     },
   }
 </script>

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,9 @@
         type: Boolean,
         default: false,
       },
-      relevanceProjectId: String,
+      projectId: String,
-      planId: String
+      planId: String,
+      isTestPlan: Boolean
     },
     created: function () {
       this.initTable();
@@ -145,6 +151,9 @@
       currentProtocol() {
         this.initTable();
       },
+      projectId() {
+        this.initTable();
+      }
     },
     computed: {
 
@@ -157,11 +166,22 @@
         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();
+        let url = '/api/testcase/list/';
-        this.result = this.$post("/api/testcase/list/" + this.currentPage + "/" + this.pageSize, this.condition, response => {
+        if (this.isTestPlan) {
+          url = '/test/plan/api/case/relevance/list/';
+          this.condition.planId = this.planId;
+        }
+
+        this.result = this.$post(url + this.currentPage + "/" + this.pageSize, this.condition, response => {
           this.total = response.data.itemCount;
           this.tableData = response.data.listObject;
         });
@@ -209,6 +229,9 @@
           this.$refs.caseList.open(selectApi, testCase.id);
         });
       },
+      setEnvironment(data) {
+        this.environmentId = data.id;
+      }
     },
   }
 </script>

frontend/src/business/components/api/automation/scenario/api/ScenarioRelevance.vue

@@ -1,12 +1,7 @@
 <template>
-  <el-dialog class="api-relevance" :title="'场景导入'"
+  <relevance-dialog :title="'场景导入'" ref="relevanceDialog">
-             :visible.sync="dialogVisible"
-             width="70%"
-             :close-on-click-modal="false"
-             top="50px">
 
-    <ms-container>
+    <template v-slot:aside>
-      <ms-aside-container :enable-aside-hidden="false">
         <ms-api-scenario-module
           @nodeSelectEvent="nodeChange"
           @refreshTable="refresh"
@@ -14,51 +9,48 @@
           @enableTrash="false"
           :is-read-only="true"
           ref="nodeTree"/>
-      </ms-aside-container>
+    </template>
 
-      <ms-main-container>
+    <ms-api-scenario-list
-        <ms-api-scenario-list
+      :select-node-ids="selectNodeIds"
-          :select-node-ids="selectNodeIds"
+      :referenced="true"
-          :referenced="true"
+      :trash-enable="false"
-          :trash-enable="false"
+      @selection="setData"
-          @selection="setData"
+      ref="apiScenarioList"/>
-          ref="apiScenarioList"/>
-      </ms-main-container>
-    </ms-container>
 
     <template v-slot:footer>
       <el-button type="primary" @click="copy" @keydown.enter.native.prevent>复制</el-button>
       <el-button type="primary" @click="reference" @keydown.enter.native.prevent>引用</el-button>
     </template>
 
-  </el-dialog>
+  </relevance-dialog>
 </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";
+    import RelevanceDialog from "../../../../track/plan/view/comonents/base/RelevanceDialog";
     export default {
       name: "ScenarioRelevance",
       components: {
+        RelevanceDialog,
         MsApiScenarioList,
         MsApiScenarioModule,
         MsMainContainer, MsAsideContainer, MsContainer},
       data() {
           return {
-            dialogVisible: false,
             result: {},
             currentProtocol: null,
             selectNodeIds: [],
             moduleOptions: {},
             isApiListEnable: true,
-
             currentScenario: [],
             currentScenarioIds: [],
           }
@@ -97,10 +89,10 @@
         },
         close() {
           this.refresh();
-          this.dialogVisible = false;
+          this.$refs.relevanceDialog.close();
         },
         open() {
-          this.dialogVisible = true;
+          this.$refs.relevanceDialog.open();
           if (this.$refs.apiScenarioList) {
             this.$refs.apiScenarioList.search();
           }
@@ -127,12 +119,4 @@
 
 <style scoped>
 
-  .ms-aside-container {
-    border: 0px;
-  }
-
-  .api-relevance >>> .el-dialog__body {
-    padding: 10px 20px;
-  }
-
 </style>

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 placeholder="搜索" @blur="search" @keyup.enter.native="search" class="search-input" size="small" v-model="condition.name"/>
-
-      <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-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 = [];
+        _handleSelect(this, selection, row, this.selectRows);
-        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);
-          })
-        }
       },
       showExecResult(row) {
         this.visible = false;
@@ -322,23 +255,7 @@
         this.initTable();
       },
       handleSelectAll(selection) {
-        if (selection.length > 0) {
+        _handleSelectAll(this, selection, this.tableData, this.selectRows);
-          if (selection.length === 1) {
-            selection.hashTree = [];
-            this.selectRows.add(selection[0]);
-          } else {
-            this.tableData.forEach(item => {
-              item.hashTree = [];
-              this.$set(item, "showMore", true);
-              this.selectRows.add(item);
-            });
-          }
-        } else {
-          this.selectRows.clear();
-          this.tableData.forEach(row => {
-            this.$set(row, "showMore", false);
-          })
-        }
       },
       search() {
         this.initTable();
@@ -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;
       }

frontend/src/business/components/api/definition/components/list/ApiList.vue

@@ -8,7 +8,7 @@
 
       <el-input placeholder="搜索" @blur="search" class="search-input" size="small" @keyup.enter.native="search" v-model="condition.name"/>
 
-      <el-table v-loading="result.loading" ref="apiDefinitionTable"
+      <el-table v-loading="result.loading"
                 border
                 :data="tableData" row-key="id" class="test-content adjust-table"
                 @select-all="handleSelectAll"
@@ -29,7 +29,7 @@
             </el-dropdown-menu>
           </el-dropdown>
           <template v-slot:default="scope">
-            <show-more-btn :is-show="scope.row.showMore && !isReadOnly && !isRelevance" :buttons="buttons" :size="selectDataCounts"/>
+            <show-more-btn :is-show="scope.row.showMore && !isReadOnly" :buttons="buttons" :size="selectDataCounts"/>
           </template>
         </el-table-column>
 
@@ -127,12 +127,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,
@@ -200,8 +198,6 @@
         type: Boolean,
         default: false
       },
-      relevanceProjectId: String,
-      isRelevance: Boolean
     },
     created: function () {
       this.initTable();
@@ -218,9 +214,6 @@
         if (this.trashEnable) {
           this.initTable();
         }
-      },
-      relevanceProjectId() {
-        this.initTable();
       }
     },
     methods: {
@@ -242,7 +235,7 @@
           this.condition.moduleIds = [];
         }
 
-        this.condition.projectId = this.getProjectId();
+        this.condition.projectId = getCurrentProjectID();
         if (this.currentProtocol != null) {
           this.condition.protocol = this.currentProtocol;
         }
@@ -427,16 +420,6 @@
       showExecResult(row) {
         this.$emit('showExecResult', row);
       },
-      getProjectId() {
-        if (!this.isCaseRelevance) {
-          return getCurrentProjectID();
-        } else {
-          return this.relevanceProjectId;
-        }
-      },
-      setEnvironment(data) {
-        this.environmentId = data.id;
-      },
       selectRowsCount(selection){
         let selectedIDs = this.getIds(selection);
         let allIDs = this.tableData.map(s=>s.id);

frontend/src/business/components/api/test/components/ApiScenarioConfig.vue

@@ -50,6 +50,7 @@
         <el-button slot="reference" :disabled="isReadOnly" class="scenario-create" type="primary" size="mini"
                    icon="el-icon-plus" plain/>
       </el-popover>
+      <ms-horizontal-drag-bar/>
     </el-aside>
 
     <el-main class="scenario-main">
@@ -76,11 +77,13 @@ import {Request, Scenario} from "../model/ScenarioModel";
 import draggable from 'vuedraggable';
 import MsApiScenarioSelect from "@/business/components/api/test/components/ApiScenarioSelect";
 import {parseEnvironment} from "../model/EnvironmentModel";
+import MsHorizontalDragBar from "../../../common/components/MsHorizontalDragBar";
 
 export default {
   name: "MsApiScenarioConfig",
 
   components: {
+    MsHorizontalDragBar,
     MsApiScenarioSelect,
     MsApiRequestConfig,
     MsApiScenarioForm,
@@ -111,7 +114,6 @@ export default {
       currentScenario: {}
     }
   },
-
   watch: {
     test() {
       this.initScenarioEnvironment();
@@ -337,4 +339,5 @@ export default {
   border-right: 2px solid #909399;
   color: #8a8b8d;
 }
+
 </style>

frontend/src/business/components/common/components/MsAsideContainer.vue

@@ -1,17 +1,20 @@
 <template>
   <el-aside :width="width" class="ms-aside-container"
             :style="{'margin-left': !asideHidden ? 0 : '-' + width}">
-    <div v-if="enableAsideHidden" class="hiddenBottom" @click="asideHidden = !asideHidden" :style="{'left': asideHidden ? 0 : width}">
+    <!--<div v-if="enableAsideHidden" class="hiddenBottom" @click="asideHidden = !asideHidden">-->
-      <i v-if="!asideHidden" class="el-icon-arrow-left"/>
+      <!--<i v-if="!asideHidden" class="el-icon-arrow-left"/>-->
-      <i v-if="asideHidden" class="el-icon-arrow-right"/>
+      <!--<i v-if="asideHidden" class="el-icon-arrow-right"/>-->
-    </div>
+    <!--</div>-->
     <slot></slot>
+    <ms-horizontal-drag-bar/>
   </el-aside>
 </template>
 
 <script>
+    import MsHorizontalDragBar from "./MsHorizontalDragBar";
     export default {
       name: "MsAsideContainer",
+      components: {MsHorizontalDragBar},
       props: {
         width: {
           type: String,
@@ -39,12 +42,16 @@
     box-sizing: border-box;
     background-color: #FFF;
     height: calc(100vh - 80px);
+    border-right: 0px;
+    position: relative;
   }
 
   .hiddenBottom {
     width: 8px;
     height: 50px;
     top: calc((100vh - 80px)/3);
+    right: -10px;
+    /*top: 0;*/
     line-height: 50px;
     border-radius: 0 15px 15px 0;
     background-color: #acb7c1;

frontend/src/business/components/common/components/MsHorizontalDragBar.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="drag-bar" v-horizontal-drag/>
+</template>
+
+<script>
+    export default {
+        name: "MsHorizontalDragBar"
+    }
+</script>
+
+<style scoped>
+
+  .drag-bar {
+    height: 100%;
+    width: 1px;
+    position: absolute;
+    right: 0px;
+    top: 0;
+    cursor: col-resize;
+    background-color: #E6E6E6;
+    border: 0px;
+  }
+
+  .drag-bar:hover {
+    width: 3px;
+  }
+
+</style>

frontend/src/business/components/track/plan/view/comonents/api/TestCaseApiRelevance.vue

@@ -12,42 +12,32 @@
         @protocolChange="handleProtocolChange"
         @refreshTable="refresh"
         @setModuleOptions="setModuleOptions"
-        :relevance-project-id="projectId"
         :is-read-only="true"
-        :type="'edit'"
         ref="nodeTree"/>
     </template>
 
-    <!-- 列表集合 -->
+    <relevance-api-list
-    <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"
+      :project-id="projectId"
-      :relevance-project-id="projectId"
+      :is-test-plan="true"
-      :is-relevance="true"
+      :plan-id="planId"
       @isApiListEnableChange="isApiListEnableChange"
       ref="apiList"/>
 
-    <!--测试用例列表-->
+    <relevance-case-list
-    <api-case-simple-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"
+      :project-id="projectId"
-      :relevance-project-id="projectId"
+      :is-test-plan="true"
       :plan-id="planId"
-      :model="'relevance'"
       @isApiListEnableChange="isApiListEnableChange"
       ref="apiCaseList"/>
 
-
   </test-case-relevance-base>
 
 </template>
@@ -56,15 +46,14 @@
 
   import TestCaseRelevanceBase from "../base/TestCaseRelevanceBase";
   import MsApiModule from "../../../../../api/definition/components/module/ApiModule";
-  import {getCurrentProjectID} from "../../../../../../../common/js/utils";
+  import RelevanceApiList from "../../../../../api/automation/scenario/api/RelevanceApiList";
-  import ApiList from "../../../../../api/definition/components/list/ApiList";
+  import RelevanceCaseList from "../../../../../api/automation/scenario/api/RelevanceCaseList";
-  import ApiCaseSimpleList from "../../../../../api/definition/components/list/ApiCaseSimpleList";
 
   export default {
     name: "TestCaseApiRelevance",
     components: {
-      ApiCaseSimpleList,
+      RelevanceCaseList,
-      ApiList,
+      RelevanceApiList,
       MsApiModule,
       TestCaseRelevanceBase,
     },
@@ -94,8 +83,20 @@
     },
     methods: {
       open() {
+        this.init();
         this.$refs.baseRelevance.open();
       },
+      init() {
+        if (this.$refs.apiList) {
+          this.$refs.apiList.initTable();
+        }
+        if (this.$refs.apiCaseList) {
+          this.$refs.apiCaseList.initTable();
+        }
+        if (this.$refs.nodeTree) {
+          this.$refs.nodeTree.list();
+        }
+      },
       setProject(projectId) {
         this.projectId = projectId;
       },
@@ -145,11 +146,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'));

frontend/src/business/components/track/plan/view/comonents/api/TestPlanApi.vue

@@ -162,18 +162,6 @@
           this.moduleOptions = data;
         },
 
-        saveCaseRelevance() {
-          let url = '';
-          let selectIds = [];
-          let param = {};
-          param.planId = this.planId;
-          param.selectIds = selectIds;
-          this.result = this.$post(url, param, () => {
-            this.$success(this.$t('commons.save_success'));
-            this.refresh();
-            this.$refs.baseRelevance.close();
-          });
-        },
         openTestCaseRelevanceDialog(model) {
           if (model === 'scenario') {
             this.$refs.scenarioCaseRelevance.open();
@@ -194,4 +182,9 @@
     margin: 5px 10px;
   }
 
+  /deep/ .run-button {
+    background-color: #409EFF;
+    border-color: #409EFF;
+  }
+
 </style>

frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiCaseList.vue

@@ -81,8 +81,10 @@
 
         <el-table-column v-if="!isReadOnly" :label="$t('commons.operating')" align="center">
           <template v-slot:default="scope">
-            <el-button type="text" @click="singleRun(scope.row)">{{$t('api_test.run')}}</el-button>
+              <ms-table-operator-button class="run-button" :is-tester-permission="true" :tip="$t('api_test.run')" icon="el-icon-video-play"
-            <el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C">{{$t('commons.delete')}}</el-button>
+                                        @exec="singleRun(scope.row)" v-tester/>
+              <ms-table-operator-button :is-tester-permission="true" :tip="$t('test_track.plan_view.cancel_relevance')"
+                                        icon="el-icon-unlock" type="danger" @exec="handleDelete(scope.row)" v-tester/>
           </template>
         </el-table-column>
 
@@ -334,7 +336,7 @@
                 this.selectRows.clear();
                 this.initTable();
                 this.$emit('refresh');
-                this.$success(this.$t('commons.delete_success'));
+                this.$success(this.$t('test_track.cancel_relevance_success'));
               });
             }
           }
@@ -414,7 +416,7 @@
       },
       handleDelete(apiCase) {
         this.$get('/test/plan/api/case/delete/' + this.planId + '/' + apiCase.id, () => {
-          this.$success(this.$t('commons.delete_success'));
+          this.$success(this.$t('test_track.cancel_relevance_success'));
           this.$emit('refresh');
           this.initTable();
         });

frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiScenarioList.vue

@@ -51,8 +51,10 @@
                          show-overflow-tooltip/>
         <el-table-column :label="$t('commons.operating')" width="200px" v-if="!referenced">
           <template v-slot:default="{row}">
-            <el-button type="text" @click="execute(row)">{{ $t('api_test.automation.execute') }}</el-button>
+            <ms-table-operator-button class="run-button" :is-tester-permission="true" :tip="$t('api_test.run')" icon="el-icon-video-play"
-            <el-button type="text" @click="remove(row)">{{ $t('api_test.automation.remove') }}</el-button>
+                                      @exec="execute(row)" v-tester/>
+            <ms-table-operator-button :is-tester-permission="true" :tip="$t('test_track.plan_view.cancel_relevance')"
+                                      icon="el-icon-unlock" type="danger" @exec="remove(row)" v-tester/>
           </template>
         </el-table-column>
       </el-table>
@@ -81,10 +83,12 @@
   import MsTestPlanList from "../../../../../api/automation/scenario/testplan/TestPlanList";
   import TestPlanScenarioListHeader from "./TestPlanScenarioListHeader";
   import {_handleSelect, _handleSelectAll} from "../../../../../../../common/js/tableUtils";
+  import MsTableOperatorButton from "../../../../../common/components/MsTableOperatorButton";
 
   export default {
     name: "MsTestPlanApiScenarioList",
     components: {
+      MsTableOperatorButton,
       TestPlanScenarioListHeader,
       MsTablePagination, MsTableMoreBtn, ShowMoreBtn, MsTableHeader, MsTag, MsApiReportDetail, MsScenarioExtendButtons, MsTestPlanList},
     props: {
@@ -189,7 +193,7 @@
       },
       remove(row) {
         this.$get('/test/plan/scenario/case/delete/' + this.planId + '/' + row.id, () => {
-          this.$success(this.$t('commons.delete_success'));
+          this.$success(this.$t('test_track.cancel_relevance_success'));
           this.$emit('refresh');
           this.search();
         });
@@ -215,7 +219,7 @@
               this.$post('/test/plan/scenario/case/batch/delete', param, () => {
                 this.selectRows.clear();
                 this.search();
-                this.$success(this.$t('commons.delete_success'));
+                this.$success(this.$t('test_track.cancel_relevance_success'));
                 this.$emit('refresh');
               });
             }

frontend/src/business/components/track/plan/view/comonents/base/RelevanceDialog.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-dialog :title="title"
+             :visible.sync="dialogVisible"
+             @close="close"
+             width="60%" v-loading="result.loading"
+             :close-on-click-modal="false"
+             top="50px">
+
+    <el-container class="main-content">
+
+      <el-aside class="tree-aside" width="250px">
+        <slot name="aside"></slot>
+      </el-aside>
+
+      <el-container>
+        <el-main class="case-content">
+          <slot></slot>
+        </el-main>
+      </el-container>
+
+    </el-container>
+
+    <template v-slot:footer>
+      <slot name="footer"></slot>
+    </template>
+
+  </el-dialog>
+</template>
+
+<script>
+
+  import MsDialogFooter from '../../../../../common/components/MsDialogFooter'
+  import SelectMenu from "../../../../common/SelectMenu";
+
+  export default {
+    name: "RelevanceDialog",
+    components: {
+      SelectMenu,
+      MsDialogFooter,
+    },
+    data() {
+      return {
+        result: {},
+        dialogVisible: false,
+      };
+    },
+    props: ['title'],
+    methods: {
+      open() {
+        this.dialogVisible = true;
+      },
+      close() {
+        this.dialogVisible = false;
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+  .el-dialog {
+    min-height: 700px;
+  }
+
+  .el-dialog >>> .el-dialog__body {
+    padding: 10px 20px;
+  }
+
+</style>

frontend/src/business/components/track/plan/view/comonents/base/TestCaseRelevanceBase.vue

@@ -1,55 +1,45 @@
 <template>
-  <div>
+  <relevance-dialog :title="$t('test_track.plan_view.relevance_test_case')"  ref="relevanceDialog">
-    <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">
 
-      <el-container class="main-content">
+    <template v-slot:aside>
-        <el-aside class="tree-aside" width="250px">
+      <select-menu
-          <select-menu
+        :data="projects"
-            :data="projects"
+        width="160px"
-            width="160px"
+        :current-data="currentProject"
-            :current-data="currentProject"
+        :title="$t('test_track.switch_project')"
-            :title="$t('test_track.switch_project')"
+        @dataChange="changeProject"/>
-            @dataChange="changeProject"/>
+      <slot name="aside"></slot>
-          <slot name="aside"></slot>
+    </template>
-        </el-aside>
 
-        <el-container>
+    <slot></slot>
-          <el-main class="case-content">
-            <slot></slot>
-          </el-main>
-        </el-container>
-      </el-container>
 
-      <template v-slot:footer>
+    <template v-slot:footer>
-        <ms-dialog-footer @cancel="dialogVisible = false" @confirm="save"/>
+      <ms-dialog-footer @cancel="close" @confirm="save"/>
-      </template>
+    </template>
 
-    </el-dialog>
+    <template v-slot:footer>
-
+      <ms-dialog-footer @cancel="close" @confirm="save"/>
-  </div>
+    </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>

frontend/src/business/main.js

@@ -18,6 +18,7 @@ import '../common/css/menu-header.css';
 import '../common/css/main.css';
 import CKEditor from '@ckeditor/ckeditor5-vue';
 import VueFab from 'vue-float-action-button'
+import {horizontalDrag} from "../common/js/directive";
 
 Vue.config.productionTip = false;
 Vue.use(icon);
@@ -43,6 +44,9 @@ Vue.directive('xpack', xpack);
 
 Vue.directive('tester', tester);
 
+//支持左右拖拽
+Vue.directive('horizontal-drag', horizontalDrag);
+
 new Vue({
   el: '#app',
   router,

frontend/src/common/js/directive.js

@@ -0,0 +1,17 @@
+export const horizontalDrag = {
+  inserted(el, binding) {
+    el.onmousedown = function (e) {
+      const init = e.clientX;
+      const parent = el.parentNode;
+      const initWidth = parent.offsetWidth;
+      document.onmousemove = function (e) {
+        const end = e.clientX;
+        const newWidth = end - init + initWidth;
+        parent.style.width = newWidth + "px";
+      };
+      document.onmouseup = function () {
+        document.onmousemove = document.onmouseup = null;
+      };
+    };
+  }
+};

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个以上的用例时显示更多操作
+  arr.forEach(row => {
-  if (selectRows.size === 1) {
+    component.$set(row, "showMore", true);
-    component.$set(arr[0], "showMore", false);
+  })
-  } else if (selectRows.size === 2) {
-    arr.forEach(row => {
-      component.$set(row, "showMore", true);
-    })
-  }
 }