fix(测试跟踪): 功能用例关联侧边栏支持拖拽

--bug=1019694 --user=张大海 【测试跟踪】github #19757，测试计划>>关联测试用例>>在弹出的关联测试用例页面，其左侧模块显示不全，并且左侧显示框也无法向右拖拽调整窗口大小。请调整和测试用例列表显示一样，能拖拽调整窗体显示宽度。 https://www.tapd.cn/55049933/s/1301299

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

@@ -0,0 +1,140 @@
+<template>
+  <el-aside :width="width" class="ms-aside-container"
+            :id="id"
+            :style="{
+              'margin-left': !asideHidden ? 0 : '-' + width,
+              'min-width': minWidth + '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>
+      <slot></slot>
+    <ms-horizontal-drag-bar/>
+  </el-aside>
+</template>
+
+<script>
+import MsHorizontalDragBar from "./dragbar/MsLeft2RightDragBar";
+import {getUUID} from "../utils";
+
+export default {
+  name: "MsAsideContainer",
+  components: {MsHorizontalDragBar},
+  props: {
+    width: {
+      type: String,
+      default: '300px'
+    },
+    enableAsideHidden: {
+      type: Boolean,
+      default: true
+    },
+    minWidth: {
+      type: String,
+      default: null
+    },
+    height: {
+      type: String,
+      default: null
+    },
+    enableAutoHeight: {
+      type: Boolean,
+      default: false
+    },
+    defaultHiddenBottomTop: {
+      type: Number,
+      default: null
+    },
+  },
+  watch: {
+    asideHidden() {
+      this.$emit('setAsideHidden', this.asideHidden);
+    }
+  },
+  computed: {
+    calHeight() {
+      return this.height ? (this.height + 'px') : (this.enableAutoHeight ? null : 'calc(100vh - 50px)')
+    },
+    containerCalHeight() {
+      return this.height ? (this.height - 30 + 'px') : (this.enableAutoHeight ? null : 'calc(100vh - 50px)')
+    },
+  },
+  created() {
+    this.id = getUUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.setHiddenBottomTop();
+    });
+  },
+  data() {
+    return {
+      asideHidden: false,
+      hiddenBottomTop: null,
+      id: null
+    }
+  },
+  methods: {
+    setHiddenBottomTop() {
+      if (this.defaultHiddenBottomTop) {
+        this.hiddenBottomTop = this.defaultHiddenBottomTop + 'px';
+      } else {
+        let e = document.getElementById(this.id);
+        if (!e) return;
+        // 默认在 3/1 的位置
+        this.hiddenBottomTop = e.clientHeight / 3 + 'px';
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.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: 0px;
+  position: relative;
+  overflow: visible;
+}
+
+.hiddenBottom {
+  width: 8px;
+  height: 50px;
+  /*top: calc((100vh - 80px)/3);*/
+  right: -10px;
+  /*top: 0;*/
+  line-height: 50px;
+  border-radius: 0 15px 15px 0;
+  background-color: #acb7c1;
+  display: inline-block;
+  position: absolute;
+  cursor: pointer;
+  opacity: 0.4;
+  font-size: 2px;
+  margin-left: 1px;
+}
+
+.hiddenBottom i {
+  margin-left: -2px;
+}
+
+.hiddenBottom:hover {
+  background-color: #783887;
+  opacity: 0.8;
+  width: 12px;
+}
+
+.hiddenBottom:hover i {
+  margin-left: 0;
+  color: white;
+}
+
+</style>

framework/sdk-parent/frontend/src/components/module/MsNodeTree.vue

@@ -1,10 +1,100 @@
 <template>
   <div>
-    <slot name="header">
-      <el-input :placeholder="$t('test_track.module.search')" v-model="filterText" size="small" :clearable="true"/>
-    </slot>
 
+      <slot name="header">
+        <el-input :placeholder="$t('test_track.module.search')" v-model="filterText" size="small" :clearable="true"/>
+      </slot>
+    <ms-left-2-right-container v-if="scroll">
+      <el-tree
+        class="filter-tree node-tree"
+        :data="extendTreeNodes"
+        :default-expanded-keys="expandedNode"
+        :default-expand-all="defaultExpandAll"
+        node-key="id"
+        @node-drag-end="handleDragEnd"
+        @node-expand="nodeExpand"
+        @node-collapse="nodeCollapse"
+        :filter-node-method="filterNode"
+        :expand-on-click-node="false"
+        highlight-current
+        :draggable="!disabled&&!hideOpretor"
+        ref="tree">
+
+        <template v-slot:default="{node,data}">
+      <span class="custom-tree-node father" @click="handleNodeSelect(node)">
+
+        <span v-if="data.isEdit" @click.stop>
+          <el-input @blur.stop="save(node, data)" @keyup.enter.native.stop="$event.target.blur()" v-model="data.name"
+                    class="name-input" size="mini" ref="nameInput" :draggable="true"/>
+        </span>
+
+        <span v-if="!data.isEdit" class="node-icon">
+          <i class="el-icon-folder"/>
+        </span>
+        <el-tooltip class="item" effect="dark" :content="data.name" placement="top-start" :open-delay="1000">
+          <span v-if="!data.isEdit" class="node-title" v-text="isDefault(data) ? getLocalDefaultName() : data.name"/>
+        </el-tooltip>
+        <span class="count-title" v-if="showCaseNum && data.caseNum !== null && data.caseNum !== undefined">
+          <span style="color: var(--primary_color);">{{ data.caseNum }}</span>
+        </span>
+        <span v-if="!disabled" class="node-operate child">
+          <el-tooltip
+            v-if="data.id !== 'root' && data.name !== defaultLabel && !hideOpretor"
+            class="item"
+            effect="dark"
+            v-permission="updatePermission"
+            :open-delay="200"
+            :content="$t('test_track.module.rename')"
+            placement="top">
+            <i @click.stop="edit(node, data)" class="el-icon-edit"></i>
+          </el-tooltip>
+          <el-tooltip
+            v-if="data.name === defaultLabel && data.level !== 1 && !hideOpretor"
+            v-permission="updatePermission"
+            class="item"
+            effect="dark"
+            :open-delay="200"
+            :content="$t('test_track.module.rename')"
+            placement="top">
+            <i @click.stop="edit(node, data)" class="el-icon-edit"></i>
+          </el-tooltip>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :open-delay="200"
+            v-permission="addPermission"
+            v-if="!isDefault(data) && !hideOpretor"
+            :content="$t('test_track.module.add_submodule')"
+            placement="top">
+            <i @click.stop="append(node, data)" class="el-icon-circle-plus-outline"></i>
+          </el-tooltip>
+
+          <el-tooltip
+            v-if="data.name === defaultLabel && data.level !==1 && !hideOpretor"
+            class="item" effect="dark"
+            :open-delay="200"
+            v-permission="deletePermission"
+            :content="$t('commons.delete')"
+            placement="top">
+            <i @click.stop="remove(node, data)" class="el-icon-delete"></i>
+          </el-tooltip>
+
+          <el-tooltip
+            v-if="data.id !== 'root' && data.name !== defaultLabel && !hideOpretor"
+            class="item" effect="dark"
+            :open-delay="200"
+            :content="$t('commons.delete')"
+            v-permission="deletePermission"
+            placement="top">
+            <i @click.stop="remove(node, data)" class="el-icon-delete"></i>
+          </el-tooltip>
+        </span>
+      </span>
+        </template>
+      </el-tree>
+    </ms-left-2-right-container>
     <el-tree
+      v-else
       class="filter-tree node-tree"
       :data="extendTreeNodes"
       :default-expanded-keys="expandedNode"
@@ -91,14 +181,16 @@
       </span>
       </template>
     </el-tree>
+
   </div>
 </template>
 
 <script>
+import MsLeft2RightContainer from "../MsLeft2RightContainer";
 
 export default {
   name: "MsNodeTree",
-  components: {},
+  components: {MsLeft2RightContainer},
   data() {
     return {
       result: {},
@@ -113,6 +205,15 @@ export default {
     };
   },
   props: {
+    //是否允许拖拽隐藏侧边栏
+    scroll: {
+      type: Boolean,
+      default: false
+    },
+    existSlotContainer: {
+      type: Boolean,
+      default: false
+    },
     type: {
       type: String,
       default: "view"

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

@@ -10,6 +10,7 @@
 
     <template v-slot:aside>
       <node-tree class="node-tree"
+                 :scroll="true"
                  v-loading="nodeResult.loading"
                  local-suffix="test_case"
                  default-label="未规划用例"