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,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 {
--- 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,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>
--- 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,