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"
-      v-bind="el"
-      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%' }"
-      style="overflow: auto"
+        v-if="refreshTree"
+        ref="tree"
+        :data="treeData"
+        v-bind="props.props"
+        node-key="id"
+        :default-expand-all="defaultExpandAll"
+        :default-checked-keys="checkedIds"
+        @check-change="checkChange"
+        @node-click="nodeClick"
+        :props="defaultProps"
+        :filter-node-method="searchTree"
+        :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()
-  checkedAll(searchData.value, false)
-  var values = props.selectValues.split(',');
-  for(var i in values){
-    tree.value.setChecked(values[i], true, false)
-  }
+  checkedIds.value = props.selectValues.split(',')
 })
 
-function searchTree() {
-  if(searchValue.value){
-    searchData.value = proxy.$treeTable.recursionSearch(['name'], proxy.$common.copyNew(treeData.value), searchValue.value, false)
-  }else{
-    searchData.value = treeData.value
-  }
+function searchTree(value, data) {
+  if (!value) return true
+  return data.name.includes(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">
-                {{ !$global.user.info.headPortrait ? $global.user.info.name.substring(0,1) : '' }}
+              <el-avatar v-if="$global.user.info.headPortrait" :size="40" fit="contain" :src="$global.baseApi + $global.user.info.headPortrait"></el-avatar>
+              <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

@@ -30,10 +30,10 @@
             <el-col :span="24">
               <el-form-item label="角色描述" prop="descRibe">
                 <el-input
-                  type="textarea"
-                  :rows="4"
-                  placeholder="请输入描述"
-                  v-model="temp.descRibe">
+                    type="textarea"
+                    :rows="4"
+                    placeholder="请输入描述"
+                    v-model="temp.descRibe">
                 </el-input>
               </el-form-item>
             </el-col>
@@ -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>
@@ -71,112 +71,112 @@ import RoleAssignPermissions from './role-assign-permissions'
 const { proxy } = getCurrentInstance()
 
 const permissionData = reactive([{
-        label: '全部',
-        value: '0'
-      }, {
-        label: '自定义',
-        value: '1'
-      }, {
-        label: '本级及子级',
-        value: '2'
-      }, {
-        label: '本级',
-        value: '3'
-      }])
+  label: '全部',
+  value: '0'
+}, {
+  label: '自定义',
+  value: '1'
+}, {
+  label: '本级及子级',
+  value: '2'
+}, {
+  label: '本级',
+  value: '3'
+}])
 const assignPermissions = ref()
 const assignPermissionsDialog = ref()
 const table = ref()
 const roleFormDialog = ref()
 const dataForm = ref()
 const tableOptions = reactive({
-        url: '/system/role/list',
-        where: {
-          name: {
-            type: 'input',
-            label: '角色名称',
-            value: ''
+  url: '/system/role/list',
+  where: {
+    name: {
+      type: 'input',
+      label: '角色名称',
+      value: ''
+    }
+  },
+  cols: [
+    {
+      field: 'name',
+      label: '角色名称'
+    },
+    {
+      field: 'code',
+      label: '角色编码'
+    },
+    {
+      field: 'descRibe',
+      label: '角色描述'
+    },
+    {
+      field: 'permission',
+      label: '数据权限',
+      templet: (row) => {
+        return permissionData[row.permission].label
+      }
+    },
+    {
+      label: '操作',
+      type: 'btns',
+      width: 270,
+      fixed: 'right',
+      btns: [
+        {
+          permission: 'role:save',
+          label: '修改',
+          type: 'text',
+          icon: 'ElEdit',
+          click: (row) => {
+            handleUpdate(row)
           }
         },
-        cols: [
-          {
-            field: 'name',
-            label: '角色名称'
-          },
-          {
-            field: 'code',
-            label: '角色编码'
-          },
-          {
-            field: 'descRibe',
-            label: '角色描述'
-          },
-          {
-            field: 'permission',
-            label: '数据权限',
-            templet: (row) => {
-              return permissionData[row.permission].label
-            }
-          },
-          {
-            label: '操作',
-            type: 'btns',
-            width: 270,
-            fixed: 'right',
-            btns: [
-              {
-                permission: 'role:save',
-                label: '修改',
-                type: 'text',
-                icon: 'ElEdit',
-                click: (row) => {
-                  handleUpdate(row)
-                }
-              },
-              {
-                permission: 'role:delete',
-                label: '删除',
-                type: 'text',
-                icon: 'ElDelete',
-                click: (row) => {
-                  proxy.$common.handleDelete({
-                    url: '/system/role/delete',
-                    id: row.id,
-                    done: () => reloadTable()
-                  })
-                }
-              },
-              {
-                permission: 'role:permission',
-                label: '权限',
-                type: 'text',
-                icon: 'ElPlus',
-                click: (row) => {
-                  temp.value.id = row.id
-                  assignPermissionsDialog.value.show()
-                }
-              },
-              {
-                permission: 'role:user:list',
-                label: '用户列表',
-                type: 'text',
-                icon: 'ElUserFilled',
-                click: (row) => {
-                  proxy.$router.push({
-                    path: '/system/user/user-list',
-                    query: { roleId: row.id }
-                  })
-                }
-              }
-            ]
+        {
+          permission: 'role:delete',
+          label: '删除',
+          type: 'text',
+          icon: 'ElDelete',
+          click: (row) => {
+            proxy.$common.handleDelete({
+              url: '/system/role/delete',
+              id: row.id,
+              done: () => reloadTable()
+            })
           }
-        ]
-      })
+        },
+        {
+          permission: 'role:permission',
+          label: '权限',
+          type: 'text',
+          icon: 'ElPlus',
+          click: (row) => {
+            temp.value.id = row.id
+            assignPermissionsDialog.value.show()
+          }
+        },
+        {
+          permission: 'role:user:list',
+          label: '用户列表',
+          type: 'text',
+          icon: 'ElUserFilled',
+          click: (row) => {
+            proxy.$router.push({
+              path: '/system/user/user-list',
+              query: { roleId: row.id }
+            })
+          }
+        }
+      ]
+    }
+  ]
+})
 const dialogTitle = ref('')
 const temp = ref(getTemp())
 const rules = reactive({
-        name: [{ required: true, message: '请输入角色名称', trigger: 'change' }],
-        code: [{ required: true, message: '请输入角色编码', trigger: 'change' }]
-      })
+  name: [{ required: true, message: '请输入角色名称', trigger: 'change' }],
+  code: [{ required: true, message: '请输入角色编码', trigger: 'change' }]
+})
 const downloadLoading = ref(false)
 
 watch(() => temp.value.permission,() => {