From bc4aba0210326d7afe4e9825fd901afc49322285 Mon Sep 17 00:00:00 2001
From: fit2-zhao <yong.zhao@fit2cloud.com>
Date: Thu, 26 Nov 2020 18:29:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=8E=A5=E5=8F=A3=E5=AE=9A=E4=B9=89):=20?=
 =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/definition/ApiDefinition.vue          |   8 +-
 .../api/definition/components/ApiCaseList.vue |  33 +--
 .../api/definition/components/ApiList.vue     | 247 ++++++++++++------
 .../definition/components/BottomContainer.vue |   5 +-
 4 files changed, 181 insertions(+), 112 deletions(-)

diff --git a/frontend/src/business/components/api/definition/ApiDefinition.vue b/frontend/src/business/components/api/definition/ApiDefinition.vue
index e1d201e944..ed7418e062 100644
--- a/frontend/src/business/components/api/definition/ApiDefinition.vue
+++ b/frontend/src/business/components/api/definition/ApiDefinition.vue
@@ -1,6 +1,5 @@
 <template>
   <ms-container>
-
     <ms-aside-container>
       <ms-node-tree @selectModule="selectModule" @getApiModuleTree="initTree" @changeProject="changeProject" @changeProtocol="changeProtocol"
                     @refresh="refresh" @saveAsEdit="editApi" @debug="debug" @exportAPI="exportAPI"/>
@@ -61,6 +60,8 @@
 
       </el-tabs>
     </ms-main-container>
+
+
   </ms-container>
 
 </template>
@@ -71,7 +72,6 @@
   import MsContainer from "../../common/components/MsContainer";
   import MsMainContainer from "../../common/components/MsMainContainer";
   import MsAsideContainer from "../../common/components/MsAsideContainer";
-  import MsBottomContainer from "./components/BottomContainer";
   import MsApiConfig from "./components/ApiConfig";
   import MsDebugHttpPage from "./components/debug/DebugHttpPage";
   import MsDebugJdbcPage from "./components/debug/DebugJdbcPage";
@@ -93,7 +93,6 @@
       MsMainContainer,
       MsContainer,
       MsAsideContainer,
-      MsBottomContainer,
       MsApiConfig,
       MsDebugHttpPage,
       MsRunTestHttpPage,
@@ -254,5 +253,8 @@
   /deep/ .el-tabs__header {
     margin-right: 82px;
   }
+  /deep/ .el-main{
+    overflow: hidden;
+  }
 
 </style>
diff --git a/frontend/src/business/components/api/definition/components/ApiCaseList.vue b/frontend/src/business/components/api/definition/components/ApiCaseList.vue
index ef122ebf66..2e78830a85 100644
--- a/frontend/src/business/components/api/definition/components/ApiCaseList.vue
+++ b/frontend/src/business/components/api/definition/components/ApiCaseList.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-container>
+    <el-container style="padding-bottom: 200px">
       <el-header style="width: 100% ;padding: 0px">
         <el-card>
           <el-row>
@@ -8,24 +8,17 @@
               <div class="variable-combine"> {{api.name}}</div>
             </el-col>
             <el-col :span="api.protocol==='HTTP'? 1:3">
-              <template>
-                <div>
-                  <ms-tag v-if="api.status == 'Prepare'" type="info"
-                          :content="$t('test_track.plan.plan_status_prepare')"/>
-                  <ms-tag v-if="api.status == 'Underway'" type="primary"
-                          :content="$t('test_track.plan.plan_status_running')"/>
-                  <ms-tag v-if="api.status == 'Completed'" type="success"
-                          :content="$t('test_track.plan.plan_status_completed')"/>
-                </div>
-              </template>
+              <ms-tag v-if="api.status == 'Prepare'" type="info" :content="$t('test_track.plan.plan_status_prepare')"/>
+              <ms-tag v-if="api.status == 'Underway'" type="primary" :content="$t('test_track.plan.plan_status_running')"/>
+              <ms-tag v-if="api.status == 'Completed'" type="success" :content="$t('test_track.plan.plan_status_completed')"/>
             </el-col>
             <el-col :span="api.protocol==='HTTP'? 4:0">
-              <div class="variable-combine">{{api.path ===null ? " " : api.path}}</div>
+              <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="4">
+            <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">
@@ -71,7 +64,7 @@
 
 
             </el-col>
-            <el-col :span="1">
+            <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>
@@ -87,10 +80,9 @@
       <!-- 用例部分 -->
       <el-main v-loading="loading">
         <div v-for="(item,index) in apiCaseList" :key="index">
-          <el-card style="margin-top: 10px" @click.native="selectTestCase(item,$event)">
+          <el-card style="margin-top: 5px" @click.native="selectTestCase(item,$event)">
             <el-row>
               <el-col :span="5">
-
                 <div class="el-step__icon is-text ms-api-col">
                   <div class="el-step__icon-inner">{{index+1}}</div>
                 </div>
@@ -100,14 +92,13 @@
                   <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)"
-                />
+                          @blur="saveTestCase(item)"/>
                 <span v-else>
                   {{item.type!= 'create' ? item.name:''}}
                   <i class="el-icon-edit" style="cursor:pointer" @click="showInput(item)"/>
@@ -117,6 +108,7 @@
                   <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/>
@@ -487,8 +479,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: 14px;
-    width: 100%;
+    font-size: 10px;
   }
 
   .icon.is-active {
diff --git a/frontend/src/business/components/api/definition/components/ApiList.vue b/frontend/src/business/components/api/definition/components/ApiList.vue
index 4153a8d929..d095037fbc 100644
--- a/frontend/src/business/components/api/definition/components/ApiList.vue
+++ b/frontend/src/business/components/api/definition/components/ApiList.vue
@@ -1,100 +1,102 @@
 <template>
 
-  <div class="card-container">
-    <el-card class="card-content">
-      <template v-slot:header>
-        <ms-table-header :showCreate="false" :condition.sync="condition" @search="search"
-                         :title="$t('api_test.definition.api_title')"/>
-      </template>
-      <el-table border :data="tableData" row-key="id" class="test-content adjust-table"
-                @select-all="handleSelectAll"
-                @select="handleSelect">
-        <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"
-                    :content="$t('test_track.plan.plan_status_prepare')"/>
-            <ms-tag v-if="scope.row.status == 'Underway'" type="primary"
-                    :content="$t('test_track.plan.plan_status_running')"/>
-            <ms-tag v-if="scope.row.status == 'Completed'" type="success"
-                    :content="$t('test_track.plan.plan_status_completed')"/>
-          </template>
-        </el-table-column>
+  <div id="svgBox" style="overflow: auto">
+    <div id="svgTop" style="background-color: white">
+      <el-card class="card-content">
+        <!--<ms-table-header :showCreate="false" :condition.sync="condition" @search="search"-->
+        <!--:title="$t('api_test.definition.api_title')"/>-->
+        <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="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="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"
+                      :content="$t('test_track.plan.plan_status_prepare')"/>
+              <ms-tag v-if="scope.row.status == 'Underway'" type="primary"
+                      :content="$t('test_track.plan.plan_status_running')"/>
+              <ms-tag v-if="scope.row.status == 'Completed'" type="success"
+                      :content="$t('test_track.plan.plan_status_completed')"/>
+            </template>
+          </el-table-column>
 
-        <el-table-column
-          prop="path"
-          :label="$t('api_test.definition.api_path')"
-          show-overflow-tooltip/>
+          <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="userName"
-          :label="$t('api_test.definition.api_principal')"
-          show-overflow-tooltip/>
+          <el-table-column
+            prop="path"
+            :label="$t('api_test.definition.api_path')"
+            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="userName"
+            :label="$t('api_test.definition.api_principal')"
+            show-overflow-tooltip/>
 
-        <el-table-column
-          prop="caseTotal"
-          :label="$t('api_test.definition.api_case_number')"
-          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="caseStatus"
-          :label="$t('api_test.definition.api_case_status')"
-          show-overflow-tooltip/>
+          <el-table-column
+            prop="caseTotal"
+            :label="$t('api_test.definition.api_case_number')"
+            show-overflow-tooltip/>
 
-        <el-table-column
-          prop="casePassingRate"
-          :label="$t('api_test.definition.api_case_passing_rate')"
-          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="130" align="center">
-          <template v-slot:default="scope">
-            <el-button type="text" @click="editApi(scope.row)">编辑</el-button>
-            <el-button type="text" @click="handleTestCase(scope.row)">用例</el-button>
-            <el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <ms-table-pagination :change="initApiTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
-                           :total="total"/>
-
-    </el-card>
-
-    <ms-bottom-container v-bind:enableAsideHidden="isHide">
-      <ms-api-case-list @apiCaseClose="apiCaseClose" @refresh="initApiTable" :api="selectApi" :current-project="currentProject"/>
-    </ms-bottom-container>
-
+          <el-table-column :label="$t('commons.operating')" min-width="130" align="center">
+            <template v-slot:default="scope">
+              <el-button type="text" @click="editApi(scope.row)">编辑</el-button>
+              <el-button type="text" @click="handleTestCase(scope.row)">用例</el-button>
+              <el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <ms-table-pagination :change="initApiTable" :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="initApiTable" :api="selectApi" :current-project="currentProject"/>
+      </ms-bottom-container>
+    </div>
   </div>
+
 </template>
 
 <script>
@@ -140,6 +142,7 @@
         currentPage: 1,
         pageSize: 10,
         total: 0,
+        screenHeight: document.documentElement.clientHeight - 350,//屏幕高度
       }
     },
     props: {
@@ -150,6 +153,9 @@
     created: function () {
       this.initApiTable();
     },
+    mounted() {
+      this.dragControllerDiv();
+    },
     watch: {
       currentProject() {
         this.initApiTable();
@@ -162,7 +168,7 @@
       currentProtocol() {
         this.initApiTable();
         this.apiCaseClose();
-      }
+      },
     },
     methods: {
       initApiTable() {
@@ -247,6 +253,14 @@
         });
       },
       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;
@@ -259,6 +273,13 @@
         });
       },
       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) {
@@ -266,6 +287,33 @@
           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>
@@ -284,4 +332,33 @@
   .api-el-tag {
     color: white;
   }
+
+  #svgBox {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+
+  #svgTop {
+    height: calc(30% - 5px);
+    width: 100%;
+    float: left;
+    overflow: auto;
+  }
+
+  #svgResize {
+    position: relative;
+    height: 5px;
+    width: 100%;
+    cursor: s-resize;
+    float: left;
+  }
+
+  #svgDown {
+    height: 70%;
+    width: 100%;
+    float: left;
+    overflow: hidden;
+  }
 </style>
diff --git a/frontend/src/business/components/api/definition/components/BottomContainer.vue b/frontend/src/business/components/api/definition/components/BottomContainer.vue
index b91056fd06..371fdc7cdc 100644
--- a/frontend/src/business/components/api/definition/components/BottomContainer.vue
+++ b/frontend/src/business/components/api/definition/components/BottomContainer.vue
@@ -1,6 +1,6 @@
 <template>
   <el-aside :width="width" class="ms-aside-container"
-            :style="{'margin-left': !enableAsideHidden ? 0 : '-' + width}">
+              :style="{'margin-left': !enableAsideHidden ? 0 : '-' + width}">
     <slot></slot>
   </el-aside>
 </template>
@@ -23,9 +23,8 @@
 
 <style scoped>
   .ms-aside-container {
-    border: 1px solid #E6E6E6;
-    border-radius: 2px;
     margin-top: 10px;
+    height: 600px;
     box-sizing: border-box;
     background-color: #FFF;
   }