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

--story=1012494 --user=宋昌昌 #25502 取消模块树8层限制 https://www.tapd.cn/55049933/s/1398542
2023-07-27 15:39:38 +08:00 · 2023-07-27 15:39:38 +08:00 · 961e0cc346
parent 3e80901b0e
commit 961e0cc346
11 changed files with 164 additions and 89 deletions
--- 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
--- 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 {
--- a/test-track/frontend/src/business/case/components/common/CaseRelevanceSideDialog.vue
+++ b/test-track/frontend/src/business/case/components/common/CaseRelevanceSideDialog.vue
@ -47,10 +47,15 @@

      <div class="content-box">
        <div class="body-wrap">
-          <div class="aside-wrap">
-            <span v-if="isAcrossSpace" class="menu-title"
-              >{{ $t("commons.space") }}:</span
+          <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
@ -76,6 +81,7 @@
              />
              <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 {
--- 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>
--- 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>
--- 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;
--- 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,23 +44,43 @@
 </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";

 export default {
  name: "RelevanceDialog",
  components: {
+    MsHorizontalDragBar,
    SelectMenu,
    MsDialogFooter,
  },
  data() {
    return {
      result: {},
-        dialogVisible: false,
+      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;
@ -92,4 +119,16 @@
  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>
--- 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>
--- 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>
--- 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;
--- 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,