From 9e68d8fe31b3b4c4f9cbf2d1edafe65da225a312 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E4=BC=9F=E5=BA=9A?= <zhaoweigeng@wodcloud.com>
Date: Mon, 31 Oct 2022 15:04:42 +0800
Subject: [PATCH] =?UTF-8?q?update=EF=BC=9A=E6=96=B0=E5=A2=9E=E8=A7=92?=
 =?UTF-8?q?=E8=89=B2=E8=A1=A8=E5=8D=95=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=EF=BC=8C=E8=8F=9C=E5=8D=95=E7=AE=A1=E7=90=86=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/main/develop/menu/index.vue        | 56 ++++++++++++++++-----
 src/page/main/system/role/add/role_form.vue |  2 +-
 2 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/page/main/develop/menu/index.vue b/src/page/main/develop/menu/index.vue
index 2c3d232..4a9321d 100644
--- a/src/page/main/develop/menu/index.vue
+++ b/src/page/main/develop/menu/index.vue
@@ -17,7 +17,8 @@
                 />
              </div>
              <div class="tree">
-              <el-tree 
+              <el-tree
+                class="file-tree"
                 :data="data" 
                 :props="defaultProps" 
                 @node-click="handleNodeClick" 
@@ -26,6 +27,7 @@
                 node-key="menu_id"
                 ref="menuTree"
                 :filter-node-method="filterNode"
+                :expand-on-click-node="false"
               >
                 <template #default="{ node, data }">
                   <div class="custom-tree-node" pointer-events="none">
@@ -36,9 +38,12 @@
                       >{{ data.menu_name }}</span
                     >
                   </div>
-                  <span class="tree-action-box">
+                  <span 
+                    class="tree-action-box" 
+                    :class="{'position_sticky': isSticky(data.name) }"
+                    @click.stop="showAction($event, data,node)"
+                  >
                     <bg-icon
-                      @click.stop="showAction($event, data,node)"
                       class="tree-more"
                       icon="#bg-ic-s-more"
                     ></bg-icon>
@@ -145,19 +150,29 @@ watch(() => state.search,(n,o) => {
   }, 500);
 }) // 树形搜索值
 
-const getMenuTree = () => {
+const getMenuTree = (type) => {
   axios
     .get(`/apaas/system/v5/menu/tree`)
     .then((res) => {
       if (res.data.code == 200) {
         state.data = res.data.data || []
         nextTick().then(() => {
-          if (state.selectData) {
-            state.menuTree && state.menuTree.setCurrentKey(state.selectData.menu_id);
-            handleNodeClick(state.selectData);
-          }else {
-            state.menuTree && state.menuTree.setCurrentKey(state.data[0].menu_id);
-            handleNodeClick(state.data[0]);
+          if (type) {
+            if (type == 1) { // 删除数据后默认选中父节点或第一个节点
+              state.menuTree && state.menuTree.setCurrentKey(state.selectParentData.menu_id);
+              handleNodeClick(state.selectParentData);
+            }else {
+              state.menuTree && state.menuTree.setCurrentKey(state.data[0].menu_id);
+              handleNodeClick(state.data[0]);
+            }
+          }else { // 新建，上下移，初始化时默认选中节点
+            if (state.selectData) {
+              state.menuTree && state.menuTree.setCurrentKey(state.selectData.menu_id);
+              handleNodeClick(state.selectData);
+            }else {
+              state.menuTree && state.menuTree.setCurrentKey(state.data[0].menu_id);
+              handleNodeClick(state.data[0]);
+            }
           }
         })
 
@@ -179,6 +194,14 @@ const findIndex= (code,arr) => {
   })
 } // 处理数据 用于判断能否上下移
 
+const isSticky = (data) => {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  context.font = '14px MicrosoftYaHei';
+  const { width } = context.measureText(data);
+  return width > 255 ? true : false;
+}
+
 const showAction = (e, data,node) => {
   acTop.value = ''
   acLeft.value = ''
@@ -279,7 +302,8 @@ const fileAction = (val,data,parent,disabled=false) => {
         if (res.data.code == 200) {
           ElMessage.success(res.data.data)
           state.selectData = null
-          getMenuTree()
+          let type = parent ? 1 : 2 // 1--有父级  2--无父级
+          getMenuTree(type)
         }else {
           ElMessage.error(res.data.data)
         }
@@ -478,17 +502,25 @@ const {
   overflow: unset;
   /* padding-left: 16px; */
 }
-
+.file-tree :deep() .el-tree-node__content {
+  position: relative;
+}
 .tree-action-box {
   display: none;
   position: absolute;
   right: 0px;
+  top: 0px;
   background-color: #f2f3f7;
   width: 44px;
   text-align: center;
   height: 36px;
   line-height: 36px;
 }
+.position_sticky {
+  position: sticky;
+  position: -webkit-sticky;
+}
+
 .tree .el-tree-node__content:hover .tree-action-box {
   display: inline-block;
 }
diff --git a/src/page/main/system/role/add/role_form.vue b/src/page/main/system/role/add/role_form.vue
index f355f43..f4f0184 100644
--- a/src/page/main/system/role/add/role_form.vue
+++ b/src/page/main/system/role/add/role_form.vue
@@ -9,7 +9,7 @@
       </el-breadcrumb>
     </div>
     <div class="main_container">
-      <div class="top_form">
+      <div class="top_form bg-scroll">
         <el-form
           ref="form"
           :rules="rules"
-- 
2.26.0