mb-tree回显bug，优化搜索，菜单只有第一级的时候出现bug修复

data/magic-api/api/系统管理/菜单管理/当前用户菜单.ms

@@ -5,7 +5,7 @@
   "groupId" : "67b2ce258e24491194b74992958c74aa",
   "name" : "当前用户菜单",
   "createTime" : null,
-  "updateTime" : 1648013721548,
+  "updateTime" : 1649558286068,
   "lock" : "0",
   "createBy" : null,
   "updateBy" : null,
@@ -598,6 +598,14 @@ nodes.each((key, node) => {
 var treeNodes = []
 nodes.each((key, node) => {
     if(node.pid == '0'){
+        if(node.component != 'Layout'){
+            node = {
+                isShow: 1,
+                component: 'Layout',
+                redirect: node.path,
+                children: [node]
+            }
+        }
         treeNodes.push(node)
     }
 })

magic-boot-ui/src/components/magic/form/mb-tree.vue

@@ -2,24 +2,24 @@
   <div>
     <div style="margin-bottom: 5px;" v-if="expand || checked">
       <el-button v-if="expand" type="primary" icon="ElSort" plain @click="doExpand">展开/折叠</el-button>
-      <el-button v-if="checked" type="primary" icon="ElCheck" plain @click="() => { treeAllChecked = !treeAllChecked; checkedAll(searchData, treeAllChecked) }">全选/全不选</el-button>
+      <el-button v-if="checked" type="primary" icon="ElCheck" plain @click="() => { treeAllChecked = !treeAllChecked; checkedAll(treeData, treeAllChecked) }">全选/全不选</el-button>
     </div>
     <div style="margin-bottom: 5px;" v-if="search">
-      <el-input v-model="searchValue" placeholder="输入关键字进行过滤" @input="searchTree" :style="{ width: searchWidth }" />
+      <el-input v-model="searchValue" placeholder="输入关键字进行过滤" @input="tree.filter(searchValue)" :style="{ width: searchWidth }" />
     </div>
     <el-tree
         v-if="refreshTree"
         ref="tree"
-      :data="searchData"
+        :data="treeData"
-      v-bind="el"
+        v-bind="props.props"
         node-key="id"
         :default-expand-all="defaultExpandAll"
         :default-checked-keys="checkedIds"
         @check-change="checkChange"
         @node-click="nodeClick"
         :props="defaultProps"
-      :style="{ 'max-height': maxHeight ? maxHeight : '100%' }"
+        :filter-node-method="searchTree"
-      style="overflow: auto"
+        :style="style"
     />
   </div>
 </template>
@@ -45,11 +45,11 @@ const props = defineProps({
     type: String,
     default: ''
   },
-  maxHeight: {
+  style: {
     type: String,
     default: ''
   },
-  el: {
+  props: {
     type: Object,
     default: () => {}
   },
@@ -68,22 +68,19 @@ const props = defineProps({
   searchWidth: {
     type: String,
     default: '230px'
-  },
-  checkedIds: {
-    type: Array,
-    default: () => []
   }
 })
 
+const checkedIds = ref(props.selectValues.split(','))
+
 const tree = ref()
 const treeData = ref([])
-const searchData = ref([])
 const defaultProps = reactive({
   children: 'children',
   label: 'name'
 })
 const defaultExpandAll = ref(true)
-const refreshTree = ref(true)
+const refreshTree = ref(false)
 const treeAllChecked = ref(false)
 const searchValue = ref('')
 
@@ -96,20 +93,12 @@ onMounted(() => {
 })
 
 watch(() => props.selectValues, async () => {
-  await loadTreeData()
+  checkedIds.value = props.selectValues.split(',')
-  checkedAll(searchData.value, false)
-  var values = props.selectValues.split(',');
-  for(var i in values){
-    tree.value.setChecked(values[i], true, false)
-  }
 })
 
-function searchTree() {
+function searchTree(value, data) {
-  if(searchValue.value){
+  if (!value) return true
-    searchData.value = proxy.$treeTable.recursionSearch(['name'], proxy.$common.copyNew(treeData.value), searchValue.value, false)
+  return data.name.includes(value)
-  }else{
-    searchData.value = treeData.value
-  }
 }
 
 function doExpand() {
@@ -122,8 +111,8 @@ async function loadTreeData() {
   if(treeData.value.length == 0){
     await proxy.$get(props.url, props.params).then((res) => {
       treeData.value = res.data.list
-      searchData.value = treeData.value
     })
+    refreshTree.value = true
   }
 }
 

magic-boot-ui/src/layout/layout.vue

@@ -8,8 +8,9 @@
         <div class="avatar">
           <el-dropdown>
             <el-col>
-              <el-avatar :size="40" fit="contain" :src="$global.baseApi + $global.user.info.headPortrait">
+              <el-avatar v-if="$global.user.info.headPortrait" :size="40" fit="contain" :src="$global.baseApi + $global.user.info.headPortrait"></el-avatar>
-                {{ !$global.user.info.headPortrait ? $global.user.info.name.substring(0,1) : '' }}
+              <el-avatar v-else :size="40" fit="contain">
+                {{ $global.user.info.name.substring(0,1) }}
               </el-avatar>
             </el-col>
             <el-col style="line-height: 40px;">

magic-boot-ui/src/permission.js

@@ -11,7 +11,7 @@ import { generateRoutes } from '@/scripts/routerPermission'
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
 const whiteList = ['/login'] // no redirect whitelist
-
+var loadInfo = false
 router.beforeEach(async(to, from, next) => {
   // start progress bar
   NProgress.start()
@@ -26,7 +26,7 @@ router.beforeEach(async(to, from, next) => {
       NProgress.done()
     } else {
       // determine whether the user has obtained his permission roles through getInfo
-      if (global.user.authorities.length > 0) {
+      if (loadInfo) {
         next()
       } else {
         try {
@@ -42,6 +42,7 @@ router.beforeEach(async(to, from, next) => {
               router.addRoute(it)
             })
           })
+          loadInfo = true
           // dynamically add accessible routes
           // hack method to ensure that addRoutes is complete
           // set the replace: true, so the navigation will not leave a history record

magic-boot-ui/src/views/login.vue

@@ -3,7 +3,6 @@
     <div class="magic-login-box">
 <!--      <div class="magic-login-logo"></div>-->
       <div class="magic-login-text">{{ $global.title }}</div>
-      <div class="magic-login-row error" v-if="error"><mb-icon icon="error"/><span>{{ error }}</span></div>
       <div class="magic-login-row">
         <input ref="username" class="magic-input" v-model="loginForm.username" placeholder="用户名" name="username" type="text" tabindex="1" auto-complete="on" />
         <mb-icon icon="user"/>
@@ -170,18 +169,6 @@ label {
   margin:25px auto;
   position: relative;
 }
-.magic-login-row.error{
-  background-color: #fff1f0;
-  border: 1px solid #ffa39e;
-  color: #000;
-  border-radius: 4px;
-  padding:10px 0;
-  padding-left: 40px;
-}
-.magic-login-row.error span{
-  font-size: 14px;
-  word-break: break-all;
-}
 .magic-login-row svg{
   position: absolute;
   width: 20px;
@@ -189,9 +176,6 @@ label {
   top: 15px;
   left: 15px;
 }
-.magic-login-row :deep(.magic-icon-error){
-  fill: red;
-}
 .magic-login-box .magic-input{
   height: 50px;
   line-height: 50px;

magic-boot-ui/src/views/system/menu/menu-form.vue

@@ -17,7 +17,7 @@
       </el-col>
       <el-col :span="12">
         <el-form-item label="上级菜单" prop="pid">
-          <treeselect v-model="temp.pid" :options="menuTree" :key="temp.pid" />
+          <treeselect v-model="temp.pid" :options="menuTree" :key="temp.pid" style="position: relative;z-index:999999;" />
         </el-form-item>
       </el-col>
     </el-row>
@@ -35,7 +35,7 @@
         placeholder=""
         :options="componentTree"
         :key="temp.componentName"
-        style="position: fixed;z-index:999999;width: 850px;"
+        style="position: fixed;z-index:999998;width: 850px;"
       />
     </el-form-item>
     <el-form-item label="权限标识" prop="permission" v-if="menuType == 'button'">

magic-boot-ui/src/views/system/role/role-assign-permissions.vue

@@ -1,5 +1,5 @@
 <template>
-  <mb-tree ref="tree" :el="{ 'show-checkbox': true }" url="/system/menu/tree" :search="true" search-width="230px" v-model:select-values="menus" />
+  <mb-tree ref="tree" :props="{ 'show-checkbox': true }" url="/system/menu/tree" :search="true" search-width="230px" v-model:select-values="menus" />
 </template>
 
 <script setup>
@@ -13,8 +13,6 @@ const props = defineProps({
   }
 })
 
-console.log(props.id)
-
 const menus = ref('')
 
 proxy.$get('/system/menu/by/role',{ roleId: props.id }).then(res => {

magic-boot-ui/src/views/system/role/role-list.vue

@@ -41,13 +41,13 @@
           <el-row :gutter="24">
             <el-col :span="12">
               <el-form-item label="菜单权限" prop="menus">
-                <mb-tree ref="tree" :el="{ 'show-checkbox': true }" max-height="270px" url="/system/menu/tree" :search="true" v-model:select-values="temp.menus" />
+                <mb-tree ref="tree" :props="{ 'show-checkbox': true }" style="height: 270px; overflow: auto" url="/system/menu/tree" :search="true" :select-values="temp.menus" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="数据权限" prop="permission">
                 <mb-select v-model="temp.permission" :options="permissionData" />
-                <mb-tree v-if="temp.permission == 1" max-height="270px" :el="{ 'check-strictly': true, 'show-checkbox': true }" ref="office" url="/system/office/tree" v-model:select-values="temp.offices" />
+                <mb-tree v-if="temp.permission == 1" style="height: 270px; overflow: auto" :props="{ 'check-strictly': true, 'show-checkbox': true }" ref="office" url="/system/office/tree" v-model:select-values="temp.offices" />
               </el-form-item>
             </el-col>
           </el-row>