fix(测试跟踪): 添加弹窗模块树左侧左右拖拽

--story=1012494 --user=宋昌昌 #25502 取消模块树8层限制 https://www.tapd.cn/55049933/s/1398542

framework/sdk-parent/frontend/src/components/MsAsideContainer.vue

@@ -4,13 +4,14 @@
             :style="{
               'margin-left': !asideHidden ? 0 : '-' + width,
               'min-width': minWidth + 'px',
+              'max-width': maxWidth + 'px',
               'height': calHeight,
              }">
     <div v-if="enableAsideHidden" class="hiddenBottom" :style="{'top': hiddenBottomTop ? hiddenBottomTop : 0}" @click="asideHidden = !asideHidden">
       <i v-if="!asideHidden" class="el-icon-arrow-left"/>
       <i v-if="asideHidden" class="el-icon-arrow-right"/>
     </div>
-    <div style="overflow: scroll" class="ms-aside-node-tree" :style="{'height': containerCalHeight }">
+    <div class="ms-aside-node-tree" :style="{'height': containerCalHeight }">
       <slot></slot>
     </div>
     <ms-horizontal-drag-bar v-if="draggable"/>
@@ -38,6 +39,10 @@ export default {
       type: String,
       default: null
     },
+    maxWidth: {
+      type: String,
+      default: null
+    },
     height: {
       type: String,
       default: null

framework/sdk-parent/frontend/src/components/dragbar/MsLeft2RightDragBar.vue

@@ -14,11 +14,11 @@ export default {
   height: 100%;
   width: 1px;
   position: absolute;
-  right: 0px;
+  right: 0;
   top: 0;
   cursor: w-resize;
   background-color: #E6E6E6;
-  border: 0px;
+  border: 0;
 }
 
 .drag-bar:hover {

test-track/frontend/src/business/case/components/common/CaseRelevanceSideDialog.vue

@@ -47,35 +47,41 @@
 
       <div class="content-box">
         <div class="body-wrap">
-          <div class="aside-wrap">
+          <ms-aside-container
-            <span v-if="isAcrossSpace" class="menu-title"
+            :min-width="'350'"
-              >{{ $t("commons.space") }}:</span
+            :max-width="'800'"
-            >
+            :enable-aside-hidden="false"
-            <el-select
+            :default-hidden-bottom-top="200"
-              v-if="isAcrossSpace"
+            :enable-auto-height="true"
-              filterable
+          >
-              slot="prepend"
+            <div class="aside-wrap">
-              v-model="workspaceId"
+              <span v-if="isAcrossSpace" class="menu-title">{{ $t("commons.space") }}:</span>
-              @change="changeWorkspace"
+              <el-select
-              class="ms-header-workspace"
+                v-if="isAcrossSpace"
-              size="small"
+                filterable
-            >
+                slot="prepend"
-              <el-option
+                v-model="workspaceId"
-                v-for="(item, index) in workspaceList"
+                @change="changeWorkspace"
-                :key="index"
+                class="ms-header-workspace"
-                :label="item.name"
+                size="small"
-                :value="item.id"
+              >
+                <el-option
+                  v-for="(item, index) in workspaceList"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+              <select-menu
+                :data="projects"
+                v-if="multipleProject"
+                :current-data="currentProject"
+                :title="$t('case.project') + ':'"
+                @dataChange="changeProject"
               />
-            </el-select>
+              <slot name="aside"> </slot>
-            <select-menu
+            </div>
-              :data="projects"
+          </ms-aside-container>
-              v-if="multipleProject"
-              :current-data="currentProject"
-              :title="$t('case.project') + ':'"
-              @dataChange="changeProject"
-            />
-            <slot name="aside"> </slot>
-          </div>
 
           <div class="content-wrap">
             <slot></slot>
@@ -115,6 +121,7 @@
 </template>
 
 <script>
+import MsAsideContainer from "metersphere-frontend/src/components/MsAsideContainer";
 import MsDialogHeader from "metersphere-frontend/src/components/MsDialogHeader";
 import SelectMenu from "./SelectMenu";
 import {
@@ -132,6 +139,7 @@ export default {
     SelectMenu,
     MsDialogHeader,
     TableSelectCountBar,
+    MsAsideContainer
   },
   data() {
     return {
@@ -305,8 +313,6 @@ export default {
   /* min-height: px2rem(763); */
   flex: 9;
   .aside-wrap {
-    width: px2rem(268);
-    border-right: 1px solid rgba(31, 35, 41, 0.15);
     padding: px2rem(24) px2rem(24) 0 px2rem(24);
   }
   .content-wrap {

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

@@ -9,6 +9,7 @@
   >
     <template v-slot:aside>
       <ms-api-module
+        class="node-tree"
         :relevance-project-id="projectId"
         @nodeSelectEvent="nodeChange"
         @protocolChange="handleProtocolChange"
@@ -299,4 +300,9 @@ export default {
   float: right;
   margin-right: 10px;
 }
+
+.node-tree {
+  max-height: calc(75vh - 120px);
+  overflow-y: auto;
+}
 </style>

test-track/frontend/src/business/plan/view/comonents/api/TestCaseScenarioRelevance.vue

@@ -9,6 +9,7 @@
   >
     <template v-slot:aside>
       <ms-api-scenario-module
+        class="node-tree"
         @nodeSelectEvent="nodeChange"
         @refreshTable="refresh"
         @setModuleOptions="setModuleOptions"
@@ -219,4 +220,11 @@ export default {
 :deep(.module-input) {
   width: 243px;
 }
+
+.node-tree {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  max-height: calc(75vh - 120px);
+  overflow-y: auto;
+}
 </style>

test-track/frontend/src/business/plan/view/comonents/api/module/ApiScenarioModule.vue

@@ -204,11 +204,6 @@ export default {
 </script>
 
 <style scoped>
-.node-tree {
-  margin-top: 15px;
-  margin-bottom: 15px;
-}
-
 .ms-el-input {
   height: 25px;
   line-height: 25px;

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

@@ -17,8 +17,15 @@
     </el-header>
 
     <el-container v-if="dialogVisible" 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>
@@ -37,59 +44,91 @@
 </template>
 
 <script>
+import MsHorizontalDragBar from "metersphere-frontend/src/components/dragbar/MsLeft2RightDragBar"
+import MsDialogFooter from 'metersphere-frontend/src/components/MsDialogFooter'
+import SelectMenu from "@/business/common/SelectMenu";
 
-  import MsDialogFooter from 'metersphere-frontend/src/components/MsDialogFooter'
+export default {
-  import SelectMenu from "@/business/common/SelectMenu";
+  name: "RelevanceDialog",
-
+  components: {
-  export default {
+    MsHorizontalDragBar,
-    name: "RelevanceDialog",
+    SelectMenu,
-    components: {
+    MsDialogFooter,
-      SelectMenu,
+  },
-      MsDialogFooter,
+  data() {
+    return {
+      result: {},
+      dialogVisible: false
+    };
+  },
+  props: {
+    title: {
+      type: String
     },
-    data() {
+    width: {
-      return {
+      type: String
-        result: {},
-        dialogVisible: false,
-      };
     },
-    props: ['title', 'width', 'fullScreen'],
+    fullScreen: {
-    methods: {
+      type: Boolean
-      open() {
+    },
-        this.dialogVisible = true;
+    draggable: {
-      },
+      type: Boolean,
-      close() {
+      default: true
-        this.dialogVisible = false;
-        this.$emit("close");
-      },
     }
+  },
+  computed: {
+    calHeight() {
+      return 'calc(75vh - 50px)'
+    }
+  },
+  methods: {
+    open() {
+      this.dialogVisible = true;
+    },
+    close() {
+      this.dialogVisible = false;
+      this.$emit("close");
+    },
   }
+}
 </script>
 
 <style scoped>
 
-  .el-dialog {
+.el-dialog {
-    min-height: 600px;
+  min-height: 600px;
-  }
+}
 
-  .tree-aside {
+.tree-aside {
-    max-height: 600px;
+  max-height: 600px;
-  }
+}
 
-  .el-dialog :deep(.el-dialog__body) {
+.el-dialog :deep(.el-dialog__body) {
-    padding: 10px 20px;
+  padding: 10px 20px;
-  }
+}
 
-  .header-btn {
+.header-btn {
-    position: absolute;
+  position: absolute;
-    top: 40px;
+  top: 40px;
-    right: 30px;
+  right: 30px;
-    padding: 0;
+  padding: 0;
-    background: 0 0;
+  background: 0 0;
-    border: none;
+  border: none;
-    outline: 0;
+  outline: 0;
-    cursor: pointer;
+  cursor: pointer;
-    height: 30px;
+  height: 30px;
-  }
+}
+
+.ms-aside-container {
+  border: 1px solid #E6E6E6;
+  padding: 10px;
+  border-radius: 2px;
+  box-sizing: border-box;
+  background-color: #FFF;
+  /*height: calc(100vh - 80px);*/
+  border-right: 0;
+  position: relative;
+  overflow: visible;
+}
 
 </style>

test-track/frontend/src/business/plan/view/comonents/functional/FunctionalRelevance.vue

@@ -12,7 +12,7 @@
 
     <template v-slot:aside>
       <node-tree class="node-tree"
-                 :scroll="true"
+                 :scroll="false"
                  v-loading="nodeResult.loading"
                  local-suffix="test_case"
                  default-label="未规划用例"
@@ -371,4 +371,9 @@ export default {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+.node-tree {
+  max-height: calc(75vh - 120px);
+  overflow-y: auto;
+}
 </style>

test-track/frontend/src/business/plan/view/comonents/ui/TestCaseUiScenarioRelevance.vue

@@ -9,6 +9,7 @@
   >
     <template v-slot:aside>
       <ui-scenario-module
+        class="node-tree"
         @nodeSelectEvent="nodeChange"
         @refreshTable="refresh"
         @setModuleOptions="setModuleOptions"
@@ -230,4 +231,11 @@ export default {
   left: -30px;
   width: 30px;
 }
+
+.node-tree {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  max-height: calc(75vh - 120px);
+  overflow-y: auto;
+}
 </style>

test-track/frontend/src/business/plan/view/comonents/ui/UiScenarioModule.vue

@@ -158,11 +158,6 @@ export default {
 </script>
 
 <style scoped>
-.node-tree {
-  margin-top: 15px;
-  margin-bottom: 15px;
-}
-
 .ms-el-input {
   height: 25px;
   line-height: 25px;

test-track/frontend/src/business/review/view/components/TestReviewRelevance.vue

@@ -20,7 +20,13 @@
       </template>
 
       <el-container class="main-content">
-        <el-aside class="tree-aside" width="270px">
+        <ms-aside-container
+          :min-width="'350'"
+          :max-width="'600'"
+          :enable-aside-hidden="false"
+          :default-hidden-bottom-top="200"
+          :enable-auto-height="true"
+        >
           <select-menu
             :data="projects"
             width="173px"
@@ -35,7 +41,7 @@
                      @nodeSelectEvent="nodeChange"
                      :tree-nodes="treeNodes"
                      ref="nodeTree"/>
-        </el-aside>
+        </ms-aside-container>
 
         <el-container>
           <el-main class="case-content">
@@ -138,6 +144,7 @@
 
 <script>
 
+import MsAsideContainer from "metersphere-frontend/src/components/MsAsideContainer";
 import NodeTree from "metersphere-frontend/src/components/module/MsNodeTree";
 import MsDialogFooter from "metersphere-frontend/src/components/MsDialogFooter";
 import PriorityTableItem from "@/business/common/tableItems/planview/PriorityTableItem";
@@ -171,6 +178,7 @@ import {getProjectApplicationConfig} from "@/api/project-application";
 export default {
   name: "TestReviewRelevance",
   components: {
+    MsAsideContainer,
     TableSelectCountBar,
     SelectMenu,
     NodeTree,