refactor: 接口定义页面优化

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

@@ -1 +1 @@
-Subproject commit 905ca8af61ce966d26109e9c5c8c0aee3ca1324e
+Subproject commit bb494fc68a2367359c9048fa7250c7618de4afb6

frontend/src/business/components/api/definition/ApiDefinition.vue

@@ -15,52 +15,54 @@
           <el-dropdown-item command="closeAll">{{$t('api_test.definition.request.close_all_label')}}</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
-      <!-- 主框架列表 -->
+
+        <!-- 主框架列表 -->
       <el-tabs v-model="apiDefaultTab" @edit="handleTabsEdit">
-        <el-tab-pane
+          <el-tab-pane
-          :key="item.name"
+            :key="item.name"
-          v-for="(item) in apiTabs"
+            v-for="(item) in apiTabs"
-          :label="item.title"
+            :label="item.title"
-          :closable="item.closable"
+            :closable="item.closable"
-          :name="item.name">
+            :name="item.name">
-          <!-- 列表集合 -->
+            <!-- 列表集合 -->
-          <ms-api-list
+            <ms-api-list
-            v-if="item.type === 'list'"
+              v-if="item.type === 'list'"
-            :current-project="currentProject"
+              :current-project="currentProject"
-            :current-protocol="currentProtocol"
+              :current-protocol="currentProtocol"
-            :current-module="currentModule"
+              :current-module="currentModule"
-            @editApi="editApi"
+              @editApi="editApi"
-            @handleCase="handleCase"
+              @handleCase="handleCase"
-            :visible="visible"
+              :visible="visible"
-            :currentRow="currentRow"
+              :currentRow="currentRow"
-            ref="apiList"/>
+              ref="apiList"/>
 
-          <!-- 添加测试窗口-->
+            <!-- 添加测试窗口-->
-          <div v-else-if="item.type=== 'add'" class="ms-api-div">
+            <div v-else-if="item.type=== 'add'" class="ms-api-div">
-            <ms-api-config @runTest="runTest" @saveApi="saveApi" :current-api="currentApi"
+              <ms-api-config @runTest="runTest" @saveApi="saveApi" :current-api="currentApi"
-                           :currentProject="currentProject"
+                             :currentProject="currentProject"
-                           :currentProtocol="currentProtocol"
+                             :currentProtocol="currentProtocol"
-                           :moduleOptions="moduleOptions" ref="apiConfig"/>
+                             :moduleOptions="moduleOptions" ref="apiConfig"/>
-          </div>
+            </div>
 
-          <!-- 快捷调试 -->
+            <!-- 快捷调试 -->
-          <div v-else-if="item.type=== 'debug'" class="ms-api-div">
+            <div v-else-if="item.type=== 'debug'" class="ms-api-div">
-            <ms-debug-http-page :currentProtocol="currentProtocol" @saveAs="editApi" v-if="currentProtocol==='HTTP'"/>
+              <ms-debug-http-page :currentProtocol="currentProtocol" @saveAs="editApi" v-if="currentProtocol==='HTTP'"/>
-            <ms-debug-jdbc-page :currentProtocol="currentProtocol" :currentProject="currentProject" @saveAs="editApi" v-if="currentProtocol==='SQL'"/>
+              <ms-debug-jdbc-page :currentProtocol="currentProtocol" :currentProject="currentProject" @saveAs="editApi" v-if="currentProtocol==='SQL'"/>
-            <ms-debug-tcp-page :currentProtocol="currentProtocol" :currentProject="currentProject" @saveAs="editApi" v-if="currentProtocol==='TCP'"/>
+              <ms-debug-tcp-page :currentProtocol="currentProtocol" :currentProject="currentProject" @saveAs="editApi" v-if="currentProtocol==='TCP'"/>
-            <ms-debug-dubbo-page :currentProtocol="currentProtocol" :currentProject="currentProject" @saveAs="editApi" v-if="currentProtocol==='DUBBO'"/>
+              <ms-debug-dubbo-page :currentProtocol="currentProtocol" :currentProject="currentProject" @saveAs="editApi" v-if="currentProtocol==='DUBBO'"/>
-          </div>
+            </div>
 
-          <!-- 测试-->
+            <!-- 测试-->
-          <div v-else-if="item.type=== 'test'" class="ms-api-div">
+            <div v-else-if="item.type=== 'test'" class="ms-api-div">
-            <ms-run-test-http-page :currentProtocol="currentProtocol" :api-data="runTestData" @saveAsApi="editApi" :currentProject="currentProject" v-if="currentProtocol==='HTTP'"/>
+              <ms-run-test-http-page :currentProtocol="currentProtocol" :api-data="runTestData" @saveAsApi="editApi" :currentProject="currentProject" v-if="currentProtocol==='HTTP'"/>
-            <ms-run-test-tcp-page :currentProtocol="currentProtocol" :api-data="runTestData" @saveAsApi="editApi" :currentProject="currentProject" v-if="currentProtocol==='TCP'"/>
+              <ms-run-test-tcp-page :currentProtocol="currentProtocol" :api-data="runTestData" @saveAsApi="editApi" :currentProject="currentProject" v-if="currentProtocol==='TCP'"/>
-            <ms-run-test-sql-page :currentProtocol="currentProtocol" :api-data="runTestData" @saveAsApi="editApi" :currentProject="currentProject" v-if="currentProtocol==='SQL'"/>
+              <ms-run-test-sql-page :currentProtocol="currentProtocol" :api-data="runTestData" @saveAsApi="editApi" :currentProject="currentProject" v-if="currentProtocol==='SQL'"/>
-            <ms-run-test-dubbo-page :currentProtocol="currentProtocol" :api-data="runTestData" @saveAsApi="editApi" :currentProject="currentProject" v-if="currentProtocol==='DUBBO'"/>
+              <ms-run-test-dubbo-page :currentProtocol="currentProtocol" :api-data="runTestData" @saveAsApi="editApi" :currentProject="currentProject" v-if="currentProtocol==='DUBBO'"/>
-          </div>
+            </div>
-        </el-tab-pane>
+          </el-tab-pane>
+
+        </el-tabs>
 
-      </el-tabs>
     </ms-main-container>
 
 
@@ -273,4 +275,11 @@
   /deep/ .el-main {
     overflow: hidden;
   }
+
+  /deep/ .el-card {
+    /*border: 1px solid #EBEEF5;*/
+    /*border-style: none;*/
+    border-top: none;
+  }
+
 </style>

frontend/src/business/components/api/definition/components/ApiCaseList.vue

@@ -1,156 +1,163 @@
 <template>
-  <div>
+  <div v-if="visible" v-loading="result.loading">
-    <el-container style="padding-bottom: 200px">
+    <ms-drawer :size="40" direction="bottom">
-      <el-header style="width: 100% ;padding: 0px">
-        <el-card>
-          <el-row>
-            <el-col :span="api.protocol==='HTTP'? 3:5">
-              <div class="variable-combine"> {{api.name}}</div>
-            </el-col>
-            <el-col :span="api.protocol==='HTTP'? 1:3">
-              <ms-tag v-if="api.status == 'Prepare'" type="info" effect="plain" :content="$t('test_track.plan.plan_status_prepare')"/>
-              <ms-tag v-if="api.status == 'Underway'" type="warning" effect="plain" :content="$t('test_track.plan.plan_status_running')"/>
-              <ms-tag v-if="api.status == 'Completed'" type="success" effect="plain" :content="$t('test_track.plan.plan_status_completed')"/>
-            </el-col>
-            <el-col :span="api.protocol==='HTTP'? 4:0">
-              <div class="variable-combine" style="margin-left: 10px">{{api.path ===null ? " " : api.path}}</div>
-            </el-col>
-            <el-col :span="2">
-              <div>{{$t('test_track.plan_view.case_count')}}：{{apiCaseList.length}}</div>
-            </el-col>
-            <el-col :span="3">
-              <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>
-                <el-select :disabled="isReadOnly" v-model="environment" size="small" class="ms-api-header-select"
-                           :placeholder="$t('api_test.definition.request.run_env')"
-                           @change="environmentChange" clearable>
-                  <el-option v-for="(environment, index) in environments" :key="index"
-                             :label="environment.name + (environment.config.httpConfig.socket ? (': ' + environment.config.httpConfig.protocol + '://' + environment.config.httpConfig.socket) : '')"
-                             :value="environment.id"/>
-                  <el-button class="environment-button" size="mini" type="primary" @click="openEnvironmentConfig">
-                    {{ $t('api_test.environment.environment_config') }}
-                  </el-button>
-                  <template v-slot:empty>
-                    <div class="empty-environment">
-                      <el-button class="environment-button" size="mini" type="primary" @click="openEnvironmentConfig">
-                        {{ $t('api_test.environment.environment_config') }}
-                      </el-button>
-                    </div>
-                  </template>
-                </el-select>
-              </div>
-            </el-col>
-            <el-col :span="3">
-              <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">
-              <el-dropdown size="small" split-button type="primary" class="ms-api-header-select" @click="addCase"
-                           @command="handleCommand">
-                +{{$t('api_test.definition.request.case')}}
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item command="run">{{$t('commons.test')}}</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
 
-
+      <template v-slot:header>
-            </el-col>
+        <el-header style="width: 100% ;padding: 0px">
-            <el-col :span="2">
+          <el-card>
-              <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>
-
-        <!-- 环境 -->
-        <api-environment-config ref="environmentConfig" @close="environmentConfigClose"/>
-
-      </el-header>
-
-      <!-- 用例部分 -->
-      <el-main v-loading="loading" style="overflow: auto">
-        <div v-for="(item,index) in apiCaseList" :key="index">
-          <el-card style="margin-top: 5px" @click.native="selectTestCase(item,$event)">
             <el-row>
-              <el-col :span="1">
+              <el-col :span="api.protocol==='HTTP'? 3:5">
-                <el-checkbox v-if="visible" @change="caseChecked(item)"/>
+                <div class="variable-combine"> {{api.name}}</div>
               </el-col>
-
+              <el-col :span="api.protocol==='HTTP'? 1:3">
-              <el-col :span="5">
+                <ms-tag v-if="api.status == 'Prepare'" type="info" effect="plain" :content="$t('test_track.plan.plan_status_prepare')"/>
-                <div class="el-step__icon is-text ms-api-col">
+                <ms-tag v-if="api.status == 'Underway'" type="warning" effect="plain" :content="$t('test_track.plan.plan_status_running')"/>
-                  <div class="el-step__icon-inner">{{index+1}}</div>
+                <ms-tag v-if="api.status == 'Completed'" type="success" effect="plain" :content="$t('test_track.plan.plan_status_completed')"/>
-                </div>
-
-                <label class="ms-api-label">{{$t('test_track.case.priority')}}</label>
-                <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="10">
+              <el-col :span="api.protocol==='HTTP'? 4:0">
-                <i class="icon el-icon-arrow-right" :class="{'is-active': item.active}"
+                <div class="variable-combine" style="margin-left: 10px">{{api.path ===null ? " " : api.path}}</div>
-                   @click="active(item)"/>
-
-                <el-input v-if="item.type==='create'" size="small" v-model="item.name" :name="index" :key="index"
-                          class="ms-api-header-select" style="width: 180px"
-                          @blur="saveTestCase(item)"/>
-                <span v-else>
-                  {{item.type!= 'create' ? item.name:''}}
-                  <i class="el-icon-edit" style="cursor:pointer" @click="showInput(item)"/>
-                </span>
-                <div v-if="item.type!='create'" style="color: #999999;font-size: 12px">
-                  <span> {{item.createTime | timestampFormatDate }}</span> {{item.createUser}} 创建
-                  <span> {{item.updateTime | timestampFormatDate }}</span> {{item.updateUser}} 更新
-                </div>
               </el-col>
-
+              <el-col :span="2">
-              <el-col :span="4">
+                <div>{{$t('test_track.plan_view.case_count')}}：{{apiCaseList.length}}</div>
-                <ms-tip-button @click="singleRun(item)" :tip="$t('api_test.run')" icon="el-icon-video-play"
-                               style="background-color: #409EFF;color: white" size="mini" circle/>
-                <ms-tip-button @click="copyCase(item)" :tip="$t('commons.copy')" icon="el-icon-document-copy"
-                               size="mini" circle/>
-                <ms-tip-button @click="deleteCase(index,item)" :tip="$t('commons.delete')" icon="el-icon-delete"
-                               size="mini"
-                               circle/>
               </el-col>
-
               <el-col :span="3">
-                <div v-if="item.type!='create'">{{getResult(item.execResult)}}</div>
+                <div>
-                <div v-if="item.type!='create'" style="color: #999999;font-size: 12px">
+                  <el-select size="small" :placeholder="$t('api_test.definition.request.grade_info')" v-model="priorityValue"
-                  <span> {{item.updateTime | timestampFormatDate }}</span>
+                             class="ms-api-header-select" @change="getApiTest">
-                  {{item.updateUser}}
+                    <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>
+                  <el-select :disabled="isReadOnly" v-model="environment" size="small" class="ms-api-header-select"
+                             :placeholder="$t('api_test.definition.request.run_env')"
+                             @change="environmentChange" clearable>
+                    <el-option v-for="(environment, index) in environments" :key="index"
+                               :label="environment.name + (environment.config.httpConfig.socket ? (': ' + environment.config.httpConfig.protocol + '://' + environment.config.httpConfig.socket) : '')"
+                               :value="environment.id"/>
+                    <el-button class="environment-button" size="mini" type="primary" @click="openEnvironmentConfig">
+                      {{ $t('api_test.environment.environment_config') }}
+                    </el-button>
+                    <template v-slot:empty>
+                      <div class="empty-environment">
+                        <el-button class="environment-button" size="mini" type="primary" @click="openEnvironmentConfig">
+                          {{ $t('api_test.environment.environment_config') }}
+                        </el-button>
+                      </div>
+                    </template>
+                  </el-select>
+                </div>
+              </el-col>
+              <el-col :span="3">
+                <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">
+                <el-dropdown size="small" split-button type="primary" class="ms-api-header-select" @click="addCase"
+                             @command="handleCommand">
+                  +{{$t('api_test.definition.request.case')}}
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="run">{{$t('commons.test')}}</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+
+
+              </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-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" :currentProject="currentProject" v-if="api.protocol==='TCP'"/>
-                <ms-sql-basis-parameters :request="item.request" :currentProject="currentProject" v-if="api.protocol==='SQL'"/>
-                <ms-dubbo-basis-parameters :request="item.request" :currentProject="currentProject" 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-main>
 
-    </el-container>
+          <!-- 环境 -->
+          <api-environment-config ref="environmentConfig" @close="environmentConfigClose"/>
+
+        </el-header>
+      </template>
+
+      <el-container style="padding-bottom: 200px">
+
+
+        <!-- 用例部分 -->
+        <el-main v-loading="loading" style="overflow: auto">
+          <div v-for="(item,index) in apiCaseList" :key="index">
+            <el-card style="margin-top: 5px" @click.native="selectTestCase(item,$event)">
+              <el-row>
+                <el-col :span="1">
+                  <el-checkbox v-if="visible" @change="caseChecked(item)"/>
+                </el-col>
+
+                <el-col :span="5">
+                  <div class="el-step__icon is-text ms-api-col">
+                    <div class="el-step__icon-inner">{{index+1}}</div>
+                  </div>
+
+                  <label class="ms-api-label">{{$t('test_track.case.priority')}}</label>
+                  <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="10">
+                  <i class="icon el-icon-arrow-right" :class="{'is-active': item.active}"
+                     @click="active(item)"/>
+
+                  <el-input v-if="item.type==='create'" size="small" v-model="item.name" :name="index" :key="index"
+                            class="ms-api-header-select" style="width: 180px"
+                            @blur="saveTestCase(item)"/>
+                  <span v-else>
+                {{item.type!= 'create' ? item.name:''}}
+                <i class="el-icon-edit" style="cursor:pointer" @click="showInput(item)"/>
+              </span>
+                  <div v-if="item.type!='create'" style="color: #999999;font-size: 12px">
+                    <span> {{item.createTime | timestampFormatDate }}</span> {{item.createUser}} 创建
+                    <span> {{item.updateTime | timestampFormatDate }}</span> {{item.updateUser}} 更新
+                  </div>
+                </el-col>
+
+                <el-col :span="4">
+                  <ms-tip-button @click="singleRun(item)" :tip="$t('api_test.run')" icon="el-icon-video-play"
+                                 style="background-color: #409EFF;color: white" size="mini" circle/>
+                  <ms-tip-button @click="copyCase(item)" :tip="$t('commons.copy')" icon="el-icon-document-copy"
+                                 size="mini" circle/>
+                  <ms-tip-button @click="deleteCase(index,item)" :tip="$t('commons.delete')" icon="el-icon-delete"
+                                 size="mini"
+                                 circle/>
+                </el-col>
+
+                <el-col :span="3">
+                  <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" :currentProject="currentProject" v-if="api.protocol==='TCP'"/>
+                  <ms-sql-basis-parameters :request="item.request" :currentProject="currentProject" v-if="api.protocol==='SQL'"/>
+                  <ms-dubbo-basis-parameters :request="item.request" :currentProject="currentProject" 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-main>
+
+      </el-container>
+    </ms-drawer>
 
     <!-- 执行组件 -->
     <ms-run :debug="false" :environment="environment" :reportId="reportId" :run-data="runData"
@@ -172,10 +179,12 @@
   import MsSqlBasisParameters from "./request/database/BasisParameters";
   import MsTcpBasisParameters from "./request/tcp/BasisParameters";
   import MsDubboBasisParameters from "./request/dubbo/BasisParameters";
+  import MsDrawer from "../../../common/components/MsDrawer";
 
   export default {
     name: 'ApiCaseList',
     components: {
+      MsDrawer,
       MsTag,
       MsTipButton,
       MsApiRequestForm,
@@ -191,10 +200,6 @@
         type: Object
       },
       createCase: String,
-      visible: {
-        type: Boolean,
-        default: false,
-      },
       loaded: Boolean,
       currentProject: {},
       refreshSign: String,
@@ -202,6 +207,7 @@
     },
     data() {
       return {
+        result: {},
         grades: [],
         environments: [],
         environment: {},
@@ -215,6 +221,7 @@
         runData: [],
         reportId: "",
         checkedCases: new Set(),
+        visible: false
 
       }
     },
@@ -251,6 +258,10 @@
       }
     },
     methods: {
+      open() {
+        // this.apiCaseList = [];
+        this.visible = true;
+      },
       sysAddition() {
         let condition = {};
         condition.projectId = this.api.projectId;
@@ -285,7 +296,7 @@
       },
       apiCaseClose() {
         this.apiCaseList = [];
-        this.$emit('apiCaseClose');
+        this.visible = false;
       },
       batchRun() {
         if (!this.environment) {
@@ -396,7 +407,7 @@
         condition.apiDefinitionId = this.api.id;
         condition.priority = this.priorityValue;
         condition.name = this.name;
-        this.$post("/api/testcase/list", condition, response => {
+        this.result = this.$post("/api/testcase/list", condition, response => {
           for (let index in response.data) {
             let test = response.data[index];
             test.request = JSON.parse(test.request);
@@ -494,6 +505,9 @@
         }
         let arr = Array.from(this.checkedCases);
         this.currentRow.cases = arr;
+      },
+      handleClose() {
+        this.visible = false;
       }
     }
   }

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

@@ -1,8 +1,7 @@
 <template>
-  <div id="svgBox" style="overflow: auto">
+  <div>
-    <div id="svgTop" style="background-color: white">
+    <el-card class="card-content">
-      <el-card class="card-content">
+        <el-input placeholder="搜索" @blur="search" class="search-input" size="small" v-model="condition.name"/>
-        <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"
@@ -82,13 +81,8 @@
         <ms-table-pagination :change="initApiTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
                              :total="total"/>
       </el-card>
-    </div>
+    <ms-api-case-list @refresh="initApiTable"  :currentRow="currentRow"
-    <div id="svgResize"/>
+                      :api="selectApi" :current-project="currentProject" ref="caseList"/>
-    <div id="svgDown">
-      <ms-bottom-container v-bind:enableAsideHidden="isHide">
-        <ms-api-case-list @apiCaseClose="apiCaseClose" @refresh="initApiTable" :visible="visible" :currentRow="currentRow" :api="selectApi" :current-project="currentProject"/>
-      </ms-bottom-container>
-    </div>
   </div>
 
 </template>
@@ -125,7 +119,6 @@
     data() {
       return {
         condition: {},
-        isHide: true,
         selectApi: {},
         moduleId: "",
         deletePath: "/test/case/delete",
@@ -154,21 +147,15 @@
     created: function () {
       this.initApiTable();
     },
-    mounted() {
-      this.dragControllerDiv();
-    },
     watch: {
       currentProject() {
         this.initApiTable();
-        this.apiCaseClose();
       },
       currentModule() {
         this.initApiTable();
-        this.apiCaseClose();
       },
       currentProtocol() {
         this.initApiTable();
-        this.apiCaseClose();
       },
     },
     methods: {
@@ -283,17 +270,10 @@
         }
       },
       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;
+        this.$refs.caseList.open();
       },
       handleDelete(api) {
         if (this.currentModule != undefined && this.currentModule.id == "gc") {
@@ -316,48 +296,11 @@
           }
         });
       },
-      apiCaseClose() {
-        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>
@@ -377,32 +320,11 @@
     color: white;
   }
 
-  #svgBox {
+  .search-input {
-    width: 100%;
+    float: right;
-    height: 100%;
+    width: 300px;
-    position: relative;
+    /*margin-bottom: 20px;*/
-    overflow: hidden;
+    margin-right: 20px;
   }
 
-  #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/common/components/MsDragMoveBar.vue

@@ -0,0 +1,90 @@
+<template>
+  <div direction="vertical" :class="direction" @mousedown="mouseDown"></div>
+</template>
+
+<script>
+  export default {
+    name: "MsDragMoveBar",
+    data() {
+      return {
+        lastX: '',
+        lastY: '',
+      };
+    },
+
+    props: {
+      direction: {
+        type: String,
+        default() {
+          return 'vertical';
+        }
+      }
+    },
+
+    created() {
+      document.addEventListener("mouseup", this.mouseUp);
+    },
+
+    destroyed() {
+      document.removeEventListener("mouseup", this.mouseUp);
+    },
+
+    methods: {
+      mouseDown(event) {
+        document.addEventListener("mousemove", this.mouseMove);
+        this.lastX = event.screenX;
+        this.lastY = event.screenY;
+      },
+      mouseMove(event) {
+        this.$emit("widthChange", this.lastX - event.screenX);
+        this.$emit("heightChange", this.lastY - event.screenY);
+        this.lastX = event.screenX;
+        this.lastY = event.screenY;
+      },
+      mouseUp() {
+        this.lastX = "";
+        this.lastY = "";
+        document.removeEventListener("mousemove", this.mouseMove);
+      }
+    }
+  };
+</script>
+<style >
+  .drag-bar {
+    width: 100%;
+    height: 2px;
+    cursor: row-resize;
+    z-index: 10;
+    background: #ccc;
+  }
+
+  .horizontal {
+    width: 2px;
+    height: 100%;
+    cursor: col-resize;
+    z-index: 10;
+  }
+
+  .vertical {
+    width: 100%;
+    height: 2px;
+    cursor: row-resize;
+    z-index: 10;
+  }
+
+  .vertical:hover {
+    height: 3px;
+    background-color: #ccc;
+    /*-webkit-box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);*/
+    /*box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);*/
+  }
+
+  .horizontal:hover {
+    width: 3px;
+    /*background-color: #7C3985;*/
+    background-color: #ccc;
+  }
+
+
+</style>
+

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

@@ -0,0 +1,180 @@
+<template>
+  <div id="ms-drawer" class="ms-drawer" :class="directionStyle" :style="{width: w + 'px', height: h + 'px'}" ref="msDrawer">
+    <ms-drag-move-bar :direction="dragBarDirection" @widthChange="widthChange" @heightChange="heightChange"/>
+    <div class="ms-drawer-header" >
+      <slot name="header"></slot>
+    </div>
+    <div class="ms-drawer-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+    import MsDragMoveBar from "./MsDragMoveBar";
+    export default {
+      name: "MsDrawer",
+      components: {MsDragMoveBar},
+      data() {
+        return {
+          x: 0,
+          y: 0,
+          w: 100,
+          h: 100,
+          directionStyle: 'left-style',
+          dragBarDirection: 'vertical',
+        }
+      },
+      props: {
+        direction: {
+          type: String,
+          default() {
+            return "left";
+          }
+        },
+        size: {
+          type: Number,
+          default() {
+            return 40;
+          }
+        }
+      },
+      mounted() {
+        this.init();
+      },
+      methods: {
+        init() {
+          //  todo 其他方向待优化
+          switch (this.direction) {
+            case 'left':
+              this.w = this.getWidthPercentage(this.size);
+              this.h = this.getHeightPercentage(100);
+              this.x = 0;
+              this.y = 0;
+              this.directionStyle = 'left-style';
+              this.dragBarDirection = 'horizontal';
+              break;
+            case 'right':
+              this.w = this.getWidthPercentage(this.size);
+              this.h = this.getHeightPercentage(100);
+              this.x = document.body.clientWidth - this.w;
+              this.y = 0;
+              this.directionStyle = 'right-style';
+              this.dragBarDirection = 'horizontal';
+              break;
+            case 'top':
+              this.w = this.getWidthPercentage(100);
+              this.h = this.getHeightPercentage(this.size);
+              this.x = 0;
+              this.y = 0;
+              this.directionStyle = 'top-style';
+              this.dragBarDirection = 'vertical';
+              break;
+            case 'bottom':
+              this.w = this.getWidthPercentage(100);
+              this.h = this.getHeightPercentage(this.size);
+              this.x = 0;
+              this.y = document.body.clientHeight - this.h;
+              this.directionStyle = 'bottom-style';
+              this.dragBarDirection = 'vertical';
+              break;
+          }
+        },
+        resize() {
+        },
+        getWidthPercentage(per) {
+          return document.body.clientWidth * per / 100.0;
+        },
+        getHeightPercentage(per) {
+          return document.body.clientHeight * per / 100.0;
+        },
+        widthChange(movement) {
+          if (this.direction != 'left' && this.direction != 'right') {
+            return;
+          }
+          switch (this.direction) {
+            case 'top':
+              this.w -= movement;
+              break;
+            case 'bottom':
+              this.w += movement;
+              break;
+          }
+          this._widthChange();
+        },
+        heightChange(movement) {
+          if (this.direction != 'top' && this.direction != 'bottom') {
+            return;
+          }
+          switch (this.direction) {
+            case 'top':
+              this.h -= movement;
+              break;
+            case 'bottom':
+              this.h += movement;
+              break;
+          }
+          this._heightChange();
+        },
+        _heightChange() {
+          if (this.h < 0) {
+            this.h = 0;
+          }
+          if (this.h > document.body.clientHeight) {
+            this.h = document.body.clientHeight;
+          }
+        },
+        _widthChange() {
+          if (this.w < 0) {
+            this.w = 0;
+          }
+          if (this.w > document.body.clientWidth) {
+            this.w = document.body.clientWidth;
+          }
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .ms-drawer {
+    background-color: white;
+    border: 1px #DCDFE6 solid;
+    -webkit-box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);
+    box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);
+    z-index: 999 !important;
+    position: fixed;
+    overflow: auto;
+  }
+
+  .left-style {
+    top: 0;
+    left: 0;
+  }
+
+  .right-style {
+    top: 0;
+    right: 0;
+  }
+
+  .top-style {
+    top: 0;
+    left: 0;
+  }
+
+  .bottom-style {
+    bottom: 0;
+    left: 0;
+    border-top: 5px;
+  }
+
+  .ms-drawer-body {
+    overflow: scroll;
+  }
+
+  .ms-drawer-header {
+    position: relative;
+  }
+
+</style>

frontend/src/business/components/common/router/View.vue

@@ -15,7 +15,7 @@
   #body {
     width: 100%;
     height: calc(100vh - 40px);
-    background-color: #F5F5F5;
+    /*background-color: #F5F5F5;*/
   }
 
   .sidebar {

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

@@ -1,6 +1,10 @@
 <template>
 
-  <test-case-relevance-base ref="baseRelevance">
+  <test-case-relevance-base
+    @setProject="setProject"
+    @save="saveCaseRelevance"
+    :plan-id="planId"
+    ref="baseRelevance">
 
     <template v-slot:aside>
       <node-tree class="node-tree"
@@ -11,7 +15,9 @@
     </template>
 
     <ms-table-header :condition.sync="condition" @search="search" title="" :show-create="false"/>
+
     <el-table
+      v-loading="result.loading"
       :data="testCases"
       @filter-change="filter"
       row-key="id"
@@ -58,104 +64,19 @@
     <div v-if="!lineStatus" style="text-align: center">{{$t('test_track.review_view.last_page')}}</div>
     <div style="text-align: center">共 {{total}} 条</div>
 
-
   </test-case-relevance-base>
 
-  <!--<div>-->
-    <!--<el-dialog :title="$t('test_track.plan_view.relevance_test_case')"-->
-               <!--:visible.sync="dialogFormVisible"-->
-               <!--@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">-->
-          <!--<el-link type="primary" class="project-link" @click="switchProject">{{projectName ? projectName :-->
-            <!--$t('test_track.switch_project') }}-->
-          <!--</el-link>-->
-          <!--<node-tree class="node-tree"-->
-                     <!--@nodeSelectEvent="nodeChange"-->
-                     <!--@refresh="refresh"-->
-                     <!--:tree-nodes="treeNodes"-->
-                     <!--ref="nodeTree"/>-->
-        <!--</el-aside>-->
-
-        <!--<el-container>-->
-          <!--<el-main class="case-content">-->
-            <!--<ms-table-header :condition.sync="condition" @search="search" title="" :show-create="false"/>-->
-            <!--<el-table-->
-              <!--:data="testCases"-->
-              <!--@filter-change="filter"-->
-              <!--row-key="id"-->
-              <!--@mouseleave.passive="leave"-->
-              <!--v-el-table-infinite-scroll="scrollLoading"-->
-              <!--@select-all="handleSelectAll"-->
-              <!--@select="handleSelectionChange"-->
-              <!--height="50vh"-->
-              <!--ref="table">-->
-
-              <!--<el-table-column-->
-                <!--type="selection"></el-table-column>-->
-
-              <!--<el-table-column-->
-                <!--prop="name"-->
-                <!--:label="$t('test_track.case.name')"-->
-                <!--style="width: 100%">-->
-                <!--<template v-slot:default="scope">-->
-                  <!--{{scope.row.name}}-->
-                <!--</template>-->
-              <!--</el-table-column>-->
-              <!--<el-table-column-->
-                <!--prop="priority"-->
-                <!--:filters="priorityFilters"-->
-                <!--column-key="priority"-->
-                <!--:label="$t('test_track.case.priority')"-->
-                <!--show-overflow-tooltip>-->
-                <!--<template v-slot:default="scope">-->
-                  <!--<priority-table-item :value="scope.row.priority"/>-->
-                <!--</template>-->
-              <!--</el-table-column>-->
-              <!--<el-table-column-->
-                <!--prop="type"-->
-                <!--:filters="typeFilters"-->
-                <!--column-key="type"-->
-                <!--:label="$t('test_track.case.type')"-->
-                <!--show-overflow-tooltip>-->
-                <!--<template v-slot:default="scope">-->
-                  <!--<type-table-item :value="scope.row.type"/>-->
-                <!--</template>-->
-              <!--</el-table-column>-->
-            <!--</el-table>-->
-
-            <!--<div v-if="!lineStatus" style="text-align: center">{{$t('test_track.review_view.last_page')}}</div>-->
-            <!--<div style="text-align: center">共 {{total}} 条</div>-->
-          <!--</el-main>-->
-        <!--</el-container>-->
-      <!--</el-container>-->
-
-      <!--<template v-slot:footer>-->
-        <!--<ms-dialog-footer @cancel="dialogFormVisible = false" @confirm="saveCaseRelevance"/>-->
-      <!--</template>-->
-
-    <!--</el-dialog>-->
-
-    <!--<switch-project ref="switchProject" @getProjectNode="getProjectNode"/>-->
-  <!--</div>-->
-
 </template>
 
 <script>
 
   import NodeTree from '../../../../common/NodeTree';
-  import MsDialogFooter from '../../../../../common/components/MsDialogFooter'
   import PriorityTableItem from "../../../../common/tableItems/planview/PriorityTableItem";
   import TypeTableItem from "../../../../common/tableItems/planview/TypeTableItem";
   import MsTableSearchBar from "../../../../../common/components/MsTableSearchBar";
   import MsTableAdvSearchBar from "../../../../../common/components/search/MsTableAdvSearchBar";
   import MsTableHeader from "../../../../../common/components/MsTableHeader";
   import {TEST_CASE_CONFIGS} from "../../../../../common/components/search/search-components";
-  import SwitchProject from "../../../../case/components/SwitchProject";
   import elTableInfiniteScroll from 'el-table-infinite-scroll';
   import TestCaseRelevanceBase from "../base/TestCaseRelevanceBase";
   import {_filter} from "../../../../../../../common/js/utils";
@@ -165,13 +86,11 @@
     components: {
       TestCaseRelevanceBase,
       NodeTree,
-      MsDialogFooter,
       PriorityTableItem,
       TypeTableItem,
       MsTableSearchBar,
       MsTableAdvSearchBar,
       MsTableHeader,
-      SwitchProject
     },
     directives: {
       'el-table-infinite-scroll': elTableInfiniteScroll
@@ -179,7 +98,6 @@
     data() {
       return {
         result: {},
-        dialogFormVisible: false,
         isCheckAll: false,
         testCases: [],
         selectIds: new Set(),
@@ -219,13 +137,12 @@
         this.condition.planId = this.planId;
       },
       selectNodeIds() {
-        if (this.dialogFormVisible) {
+        this.search();
-          this.search();
-        }
       },
       projectId() {
         this.condition.projectId = this.projectId;
         this.getProjectNode();
+        this.search();
       }
     },
     updated() {
@@ -235,8 +152,10 @@
 
       open() {
         this.$refs.baseRelevance.open();
+      },
 
-        //
+      setProject(projectId) {
+        this.projectId = projectId;
       },
 
       saveCaseRelevance() {
@@ -251,7 +170,9 @@
         this.result = this.$post('/test/plan/relevance', param, () => {
           this.selectIds.clear();
           this.$success(this.$t('commons.save_success'));
-          this.dialogFormVisible = false;
+
+          this.$refs.baseRelevance.close();
+
           this.$emit('refresh');
         });
       },
@@ -274,7 +195,27 @@
         }
         if (this.projectId) {
           this.condition.projectId = this.projectId;
-          this.result = this.$post(this.buildPagePath('/test/case/name'), this.condition, response => {
+          // this.result = this.$post(this.buildPagePath('/test/case/name'), this.condition, response => {
+          //   let data = response.data;
+          //   this.total = data.itemCount;
+          //   let tableData = data.listObject;
+          //   tableData.forEach(item => {
+          //     item.checked = false;
+          //   });
+          //   flag ? this.testCases = tableData : this.testCases = this.testCases.concat(tableData);
+          //   // 去重处理
+          //   let hash = {}
+          //   this.testCases = this.testCases.reduce((item, next) => {
+          //     if (!hash[next.id]) {
+          //       hash[next.id] = true
+          //       item.push(next)
+          //     }
+          //     return item
+          //   }, [])
+          //
+          //   this.lineStatus = tableData.length === 50 && this.testCases.length < this.total;
+          // });
+          this.result = this.$post('/api/definition/list/1/10', this.condition, response => {
             let data = response.data;
             this.total = data.itemCount;
             let tableData = data.listObject;
@@ -295,7 +236,6 @@
             this.lineStatus = tableData.length === 50 && this.testCases.length < this.total;
           });
         }
-
       },
       handleSelectAll(selection) {
         if (selection.length > 0) {
@@ -325,7 +265,7 @@
         this.close();
       },
       scrollLoading() {
-        if (this.dialogFormVisible && this.lineStatus) {
+        if (this.lineStatus) {
           this.currentPage += 1;
           this.getTestCases();
         }
@@ -336,7 +276,7 @@
             testPlanId: this.planId,
             projectId: this.projectId
           };
-          this.result = this.$post("/case/node/list/all/plan", param, response => {
+          this.result = this.$get('/api/module/list/' + this.project + '/HTTP', response => {
             this.treeNodes = response.data;
           });
         }
@@ -361,24 +301,6 @@
           })
         })
       },
-      getProject() {
-        if (this.planId) {
-          this.result = this.$post("/test/plan/project/", {planId: this.planId}, res => {
-            let data = res.data;
-            if (data) {
-              this.projects = data;
-              this.projectId = data[0].id;
-              this.projectName = data[0].name;
-              this.search();
-              // 获取项目时刷新该项目模块
-              this.getProjectNode(this.projectId)
-            }
-          })
-        }
-      },
-      switchProject() {
-        this.$refs.switchProject.open({id: this.planId, url: '/test/plan/project/', type: 'plan'});
-      },
       getProjectNode(projectId) {
         const index = this.projects.findIndex(project => project.id === projectId);
         if (index !== -1) {
@@ -387,11 +309,13 @@
         if (projectId) {
           this.projectId = projectId;
         }
-        this.result = this.$post("/case/node/list/all/plan",
+        this.$refs.nodeTree.result = this.$get('/api/module/list/' + this.projectId + '/HTTP', response => {
-          {testPlanId: this.planId, projectId: this.projectId}, response => {
             this.treeNodes = response.data;
           });
-
+        // this.$refs.nodeTree.result = this.$post('/api/module/list/' + this.project + '/HTTP',
+        //   {testPlanId: this.planId, projectId: this.projectId}, response => {
+        //     this.treeNodes = response.data;
+        //   });
         this.selectNodeIds = [];
       }
     }
@@ -399,53 +323,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/components/xpack

@@ -1 +1 @@
-Subproject commit 29a8fc09602fde5708af06582ac972d98eb69836
+Subproject commit a22a3005d9bd254793fcf634d72539cbdf31be3a

frontend/src/common/css/main.css

@@ -16,6 +16,11 @@ body {
   margin: 0;
 }
 
+/* 解决 document.body.clientHeight 为0 */
+html,body {
+  height:100%
+}
+
 .main-content span.title {
   font-size: 16px;
   font-weight: 500;