fix(接口测试): 场景步骤接口导入及场景导入弹窗拖拽问题

--bug=1028183 --user=宋昌昌 【弹窗拖动】部分位置未加左右拖拽-模块树层数多了受影响 https://www.tapd.cn/55049933/s/1400323

api-test/frontend/src/business/automation/scenario/api/ApiRelevance.vue

@@ -6,6 +6,7 @@
     ref="baseRelevance">
     <template v-slot:aside>
       <ms-api-module
+        class="node-tree"
         @nodeSelectEvent="nodeChange"
         @protocolChange="handleProtocolChange"
         @refreshTable="refresh"
@@ -284,4 +285,12 @@ export default {
 .version-select {
   padding-left: 10px;
 }
+
+.node-tree {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  max-height: calc(75vh - 120px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
 </style>

api-test/frontend/src/business/automation/scenario/api/ScenarioRelevance.vue

@@ -8,6 +8,7 @@
     <template v-slot:aside>
       <ms-api-scenario-module
         style="margin-top: 5px"
+        class="node-tree"
         @nodeSelectEvent="nodeChange"
         @refreshTable="refresh"
         @setModuleOptions="setModuleOptions"
@@ -285,4 +286,12 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.node-tree {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  max-height: calc(75vh - 120px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+</style>

api-test/frontend/src/business/commons/RelevanceDialog.vue

@@ -19,10 +19,18 @@
     </el-header>
 
     <el-container class="main-content">
-      <el-aside class="tree-aside" width="250px">
+      <el-aside class="ms-aside-container"
+                :style="{
+        'min-width': '300px',
+        'max-width': '600px',
+        'height': calHeight,
+        'max-height': calHeight,
+        }">
         <slot name="aside"></slot>
+        <ms-horizontal-drag-bar v-if="draggable"/>
       </el-aside>
 
+
       <el-container>
         <el-main class="case-content">
           <slot></slot>
@@ -37,6 +45,7 @@
 </template>
 
 <script>
+import MsHorizontalDragBar from "metersphere-frontend/src/components/dragbar/MsLeft2RightDragBar"
 import MsDialogFooter from 'metersphere-frontend/src/components/MsDialogFooter';
 import SelectMenu from '@/business/commons/SelectMenu';
 
@@ -45,6 +54,7 @@ export default {
   components: {
     SelectMenu,
     MsDialogFooter,
+    MsHorizontalDragBar
   },
   data() {
     return {
@@ -52,7 +62,26 @@ export default {
       dialogVisible: false,
     };
   },
-  props: ['title', 'width', 'fullScreen'],
+  props: {
+    title: {
+      type: String
+    },
+    width: {
+      type: String
+    },
+    fullScreen: {
+      type: Boolean
+    },
+    draggable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    calHeight() {
+      return 'calc(75vh - 50px)'
+    }
+  },
   methods: {
     open() {
       this.dialogVisible = true;
@@ -88,4 +117,15 @@ export default {
   cursor: pointer;
   height: 30px;
 }
+
+.ms-aside-container {
+  border: 1px solid #E6E6E6;
+  padding: 10px;
+  border-radius: 2px;
+  box-sizing: border-box;
+  background-color: #FFF;
+  border-right: 0;
+  position: relative;
+  overflow: visible;
+}
 </style>