fix: 2.5.4 tree bugfix & magicBox版本升级

TencentBlueKing · Sep 21, 2023 · 03a36e0 · 03a36e0
1 parent 82cc18c
commit 03a36e0
Show file tree

Hide file tree

Showing 7 changed files with 1,603 additions and 1,483 deletions.
diff --git a/src/pages/package.json b/src/pages/package.json
@@ -46,7 +46,7 @@
         "art-template": "4.1.0",
         "axios": "^0.26.1",
         "babel-preset-env": "^1.7.0",
-        "bk-magic-vue": "2.5.4-beta.9",
+        "bk-magic-vue": "^2.5.7",
         "connect-history-api-fallback": "1.6.0",
         "cookie": "0.4.0",
         "cookie-parser": "1.4.4",

diff --git a/src/pages/src/components/organization/mixin.js b/src/pages/src/components/organization/mixin.js
@@ -136,9 +136,6 @@ export default {
         this.isDirectory = true;
         this.messageSuccess(msg);
         this.$emit('updateAcitveNode');
-        this.$nextTick(() => {
-          this.topTreeHeight = this.$refs.treebox.offsetHeight - this.$refs.bottomTree.offsetHeight;
-        });
       } catch (e) {
         console.warn(e);
       }

diff --git a/src/pages/src/language/lang/en.js b/src/pages/src/language/lang/en.js
@@ -574,4 +574,5 @@ export default {
   '确认要还原当前目录？': 'Restore the current directory?',
   无该应用访问权限: 'No access permission for the application',
   返回上一页: 'Return to previous page',
+  新建目录: 'New directory',
 };
diff --git a/src/pages/src/language/lang/zh.js b/src/pages/src/language/lang/zh.js
@@ -573,4 +573,5 @@ export default {
   '确认要还原当前目录？': '确认要还原当前目录？',
   无该应用访问权限: '无该应用访问权限',
   返回上一页: '返回上一页',
+  新建目录: '新建目录',
 };
diff --git a/src/pages/src/views/organization/index.vue b/src/pages/src/views/organization/index.vue
@@ -640,6 +640,7 @@ export default {
   methods: {
     async initData() {
       try {
+        this.treeLoading = true;
         const res = await this.$store.dispatch('organization/getOrganizationTree');
         if (!res.data || !res.data.length) return;
         this.treeDataList = res.data;
@@ -675,6 +676,8 @@ export default {
             });
           });
         }
+      } finally {
+        this.treeLoading = false;
       }
     },
 
@@ -897,14 +900,15 @@ export default {
     handleTableSearch(list) {
       this.isTableDataEmpty = false;
       this.basicLoading = true;
-      if (!list.length) return this.handleTableData();
+      if (!list.length) return this.handleClickEmpty();
       const valueList = [`category_id=${this.currentCategoryId}&page=${this.paginationConfig.current}&page_size=${this.paginationConfig.limit}`];
       let key = '';
       list.forEach((item) => {
         const value = [];
         if (Object.keys(this.enumList).includes(item.id)) {
           key = this.enumList[item.id];
         }
+        if (!item.values) return;
         item.values.forEach((v) => {
           value.push(v.id);
         });

diff --git a/src/pages/src/views/organization/tree/OrganizationTree.vue b/src/pages/src/views/organization/tree/OrganizationTree.vue
@@ -8,11 +8,9 @@
   - specific language governing permissions and limitations under the License.
   -->
 <template>
-  <div class="organization-tree-wrapper" ref="treebox">
+  <div class="organization-tree-wrapper">
     <bk-tree
-      ref="topTree"
       ext-cls="top-tree"
-      :style="topTreeStyle"
       draggable
       drag-sort
       :data="availableDirectory"
@@ -23,7 +21,7 @@
       @on-drag-node="handleDragNode"
       @async-load-nodes="handleClickToggle">
     </bk-tree>
-    <div class="bottom-tree" @click="clickBottomTree" ref="bottomTree" style="bottomTreeStyle">
+    <div class="bottom-tree">
       <p :class="['bottom-tree-header', { 'show-header': isDirectory }]" @click="handleClickDirectory">
         <i :class="isDirectory ? 'bk-icon icon-angle-down' : 'bk-icon icon-angle-right'"></i>{{ $t('不可用目录') }}
       </p>
@@ -85,29 +83,19 @@ export default {
       availableDirectory: [],
       // 不可用目录
       unavailableDirectory: [],
-      treeBoxHeight: document.body.clientHeight - 124,
-      topTreeHeight: document.body.clientHeight - 164,
-      bottomTreeHeight: 40,
-      timer: false,
       treeScrollTop: 0,
     };
   },
   computed: {
     topTreeStyle() {
       return {
-        '--top-tree-height': `${this.topTreeHeight}px`,
         'overflow-y': 'auto',
       };
     },
-    bottomTreeStyle() {
-      return {
-        '--bottom-tree-height': `${this.bottomTreeHeight}px`,
-      };
-    },
   },
   watch: {
     treeDataList: {
-      immediate: true,
+      // immediate: true,
       deep: true,
       handler(val) {
         this.availableDirectory = [];
@@ -119,9 +107,6 @@ export default {
             this.unavailableDirectory.push(item);
           }
         });
-        this.$nextTick(() => {
-          this.topTreeHeight = this.$refs.treebox.offsetHeight - this.$refs.bottomTree.offsetHeight;
-        });
       },
     },
     treeSearchResult() {
@@ -136,47 +121,16 @@ export default {
         });
       }
     },
-    treeBoxHeight(val) {
-      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
-      if (!this.timer) {
-        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
-        this.screenHeight = val;
-        this.timer = true;
-        const that = this;
-        setTimeout(() => {
-          that.timer = false;
-        }, 400);
-      }
-    },
   },
   mounted() {
-    window.onload = () => {
-      this.availableDirectoryHeight();
-    };
-    window.onresize = () => {
-      this.availableDirectoryHeight();
-    };
     const topTreeWrap = document.querySelector('.top-tree');
     topTreeWrap.addEventListener('scroll', this.scrollChange, true);
   },
   methods: {
-    // 可用目录高度
-    availableDirectoryHeight() {
-      window.screenHeight = document.body.clientHeight;
-      this.treeBoxHeight = window.screenHeight - 124;
-      this.topTreeHeight = this.treeBoxHeight - this.bottomTreeHeight;
-    },
     scrollChange(e) {
       this.treeScrollTop = e.target.scrollTop;
       this.$emit('updateScroll');
     },
-    clickBottomTree() {
-      this.bottomTreeHeight = this.$refs.bottomTree.offsetHeight;
-      this.topTreeHeight = this.treeBoxHeight - this.bottomTreeHeight;
-      const bottomTreeWrap = document.querySelector('.show-content');
-      if (!bottomTreeWrap) return;
-      bottomTreeWrap.addEventListener('scroll', this.scrollChange, true);
-    },
     handleClickToggle(item) {
       this.$emit('handleClickToggle', item);
     },
@@ -355,6 +309,9 @@ export default {
 .organization-tree-wrapper {
   position: relative;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+
   .icon {
     font-size: 18px;
     color: #C4C6CC;
@@ -379,16 +336,15 @@ export default {
     vertical-align: bottom;
   }
   .top-tree {
+    flex: 1;
     padding: 0 16px;
-    height: var(--top-tree-height);
     @include scroller($backgroundColor: #e6e9ea, $width: 4px);
     overflow-x: hidden;
   }
   .bottom-tree {
     font-size: 14px;
-    position: absolute;
     width: 100%;
-    height: var(--bottom-tree-height);
+    max-height: 440px;
     bottom: 0;
     background: #F5F7FA;
     .bottom-tree-header {