From 961e0cc34681254a6ccd8f874b65b8e1ae566518 Mon Sep 17 00:00:00 2001
From: song-cc-rock <changchang.song@fit2cloud.com>
Date: Thu, 27 Jul 2023 15:39:38 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=BC=B9=E7=AA=97=E6=A8=A1=E5=9D=97=E6=A0=91?=
 =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E5=B7=A6=E5=8F=B3=E6=8B=96=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--story=1012494 --user=宋昌昌 #25502 取消模块树8层限制 https://www.tapd.cn/55049933/s/1398542
---
 .../src/components/MsAsideContainer.vue       |   7 +-
 .../dragbar/MsLeft2RightDragBar.vue           |   4 +-
 .../common/CaseRelevanceSideDialog.vue        |  66 ++++-----
 .../comonents/api/TestCaseApiRelevance.vue    |   6 +
 .../api/TestCaseScenarioRelevance.vue         |   8 ++
 .../api/module/ApiScenarioModule.vue          |   5 -
 .../view/comonents/base/RelevanceDialog.vue   | 125 ++++++++++++------
 .../functional/FunctionalRelevance.vue        |   7 +-
 .../ui/TestCaseUiScenarioRelevance.vue        |   8 ++
 .../view/comonents/ui/UiScenarioModule.vue    |   5 -
 .../view/components/TestReviewRelevance.vue   |  12 +-
 11 files changed, 164 insertions(+), 89 deletions(-)

diff --git a/framework/sdk-parent/frontend/src/components/MsAsideContainer.vue b/framework/sdk-parent/frontend/src/components/MsAsideContainer.vue
index cecaadc8db..e34776a8a8 100644
--- a/framework/sdk-parent/frontend/src/components/MsAsideContainer.vue
+++ b/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
diff --git a/framework/sdk-parent/frontend/src/components/dragbar/MsLeft2RightDragBar.vue b/framework/sdk-parent/frontend/src/components/dragbar/MsLeft2RightDragBar.vue
index 7f4ff15168..58250f8b5c 100644
--- a/framework/sdk-parent/frontend/src/components/dragbar/MsLeft2RightDragBar.vue
+++ b/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 {
diff --git a/test-track/frontend/src/business/case/components/common/CaseRelevanceSideDialog.vue b/test-track/frontend/src/business/case/components/common/CaseRelevanceSideDialog.vue
index e2dcc4f59f..765d981a9f 100644
--- a/test-track/frontend/src/business/case/components/common/CaseRelevanceSideDialog.vue
+++ b/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">
-            <span v-if="isAcrossSpace" class="menu-title"
-              >{{ $t("commons.space") }}:</span
-            >
-            <el-select
-              v-if="isAcrossSpace"
-              filterable
-              slot="prepend"
-              v-model="workspaceId"
-              @change="changeWorkspace"
-              class="ms-header-workspace"
-              size="small"
-            >
-              <el-option
-                v-for="(item, index) in workspaceList"
-                :key="index"
-                :label="item.name"
-                :value="item.id"
+          <ms-aside-container
+            :min-width="'350'"
+            :max-width="'800'"
+            :enable-aside-hidden="false"
+            :default-hidden-bottom-top="200"
+            :enable-auto-height="true"
+          >
+            <div class="aside-wrap">
+              <span v-if="isAcrossSpace" class="menu-title">{{ $t("commons.space") }}:</span>
+              <el-select
+                v-if="isAcrossSpace"
+                filterable
+                slot="prepend"
+                v-model="workspaceId"
+                @change="changeWorkspace"
+                class="ms-header-workspace"
+                size="small"
+              >
+                <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>
-            <select-menu
-              :data="projects"
-              v-if="multipleProject"
-              :current-data="currentProject"
-              :title="$t('case.project') + ':'"
-              @dataChange="changeProject"
-            />
-            <slot name="aside"> </slot>
-          </div>
+              <slot name="aside"> </slot>
+            </div>
+          </ms-aside-container>
 
           <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 {
diff --git a/test-track/frontend/src/business/plan/view/comonents/api/TestCaseApiRelevance.vue b/test-track/frontend/src/business/plan/view/comonents/api/TestCaseApiRelevance.vue
index efb7b92c75..726bc24a3b 100644
--- a/test-track/frontend/src/business/plan/view/comonents/api/TestCaseApiRelevance.vue
+++ b/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>
diff --git a/test-track/frontend/src/business/plan/view/comonents/api/TestCaseScenarioRelevance.vue b/test-track/frontend/src/business/plan/view/comonents/api/TestCaseScenarioRelevance.vue
index ab6cf941a7..4fb67764b3 100644
--- a/test-track/frontend/src/business/plan/view/comonents/api/TestCaseScenarioRelevance.vue
+++ b/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>
diff --git a/test-track/frontend/src/business/plan/view/comonents/api/module/ApiScenarioModule.vue b/test-track/frontend/src/business/plan/view/comonents/api/module/ApiScenarioModule.vue
index 2f7b70ba8d..786e3979b6 100644
--- a/test-track/frontend/src/business/plan/view/comonents/api/module/ApiScenarioModule.vue
+++ b/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;
diff --git a/test-track/frontend/src/business/plan/view/comonents/base/RelevanceDialog.vue b/test-track/frontend/src/business/plan/view/comonents/base/RelevanceDialog.vue
index f9186fc192..683d5cd8a8 100644
--- a/test-track/frontend/src/business/plan/view/comonents/base/RelevanceDialog.vue
+++ b/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'
-  import SelectMenu from "@/business/common/SelectMenu";
-
-  export default {
-    name: "RelevanceDialog",
-    components: {
-      SelectMenu,
-      MsDialogFooter,
+export default {
+  name: "RelevanceDialog",
+  components: {
+    MsHorizontalDragBar,
+    SelectMenu,
+    MsDialogFooter,
+  },
+  data() {
+    return {
+      result: {},
+      dialogVisible: false
+    };
+  },
+  props: {
+    title: {
+      type: String
     },
-    data() {
-      return {
-        result: {},
-        dialogVisible: false,
-      };
+    width: {
+      type: String
     },
-    props: ['title', 'width', 'fullScreen'],
-    methods: {
-      open() {
-        this.dialogVisible = true;
-      },
-      close() {
-        this.dialogVisible = false;
-        this.$emit("close");
-      },
+    fullScreen: {
+      type: Boolean
+    },
+    draggable: {
+      type: Boolean,
+      default: true
     }
+  },
+  computed: {
+    calHeight() {
+      return 'calc(75vh - 50px)'
+    }
+  },
+  methods: {
+    open() {
+      this.dialogVisible = true;
+    },
+    close() {
+      this.dialogVisible = false;
+      this.$emit("close");
+    },
   }
+}
 </script>
 
 <style scoped>
 
-  .el-dialog {
-    min-height: 600px;
-  }
+.el-dialog {
+  min-height: 600px;
+}
 
-  .tree-aside {
-    max-height: 600px;
-  }
+.tree-aside {
+  max-height: 600px;
+}
 
-  .el-dialog :deep(.el-dialog__body) {
-    padding: 10px 20px;
-  }
+.el-dialog :deep(.el-dialog__body) {
+  padding: 10px 20px;
+}
 
-  .header-btn {
-    position: absolute;
-    top: 40px;
-    right: 30px;
-    padding: 0;
-    background: 0 0;
-    border: none;
-    outline: 0;
-    cursor: pointer;
-    height: 30px;
-  }
+.header-btn {
+  position: absolute;
+  top: 40px;
+  right: 30px;
+  padding: 0;
+  background: 0 0;
+  border: none;
+  outline: 0;
+  cursor: pointer;
+  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>
diff --git a/test-track/frontend/src/business/plan/view/comonents/functional/FunctionalRelevance.vue b/test-track/frontend/src/business/plan/view/comonents/functional/FunctionalRelevance.vue
index 32170b3e42..63f0ca400f 100644
--- a/test-track/frontend/src/business/plan/view/comonents/functional/FunctionalRelevance.vue
+++ b/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>
diff --git a/test-track/frontend/src/business/plan/view/comonents/ui/TestCaseUiScenarioRelevance.vue b/test-track/frontend/src/business/plan/view/comonents/ui/TestCaseUiScenarioRelevance.vue
index 0337f2889d..614d66aa29 100644
--- a/test-track/frontend/src/business/plan/view/comonents/ui/TestCaseUiScenarioRelevance.vue
+++ b/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>
diff --git a/test-track/frontend/src/business/plan/view/comonents/ui/UiScenarioModule.vue b/test-track/frontend/src/business/plan/view/comonents/ui/UiScenarioModule.vue
index 15f686d17d..181c892333 100644
--- a/test-track/frontend/src/business/plan/view/comonents/ui/UiScenarioModule.vue
+++ b/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;
diff --git a/test-track/frontend/src/business/review/view/components/TestReviewRelevance.vue b/test-track/frontend/src/business/review/view/components/TestReviewRelevance.vue
index 30bf0c183d..ae5f2f93e1 100644
--- a/test-track/frontend/src/business/review/view/components/TestReviewRelevance.vue
+++ b/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,