update：新增角色表单样式优化，菜单管理优化部分交互

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;
 }

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"