优化菜单页面卡顿

SERVER/ChickenFarmV3/vb-common/vb-common-core/src/main/java/cn/vber/common/core/constant/SystemConstants.java

@@ -163,4 +163,9 @@ public interface SystemConstants {
      * 默认组织机构 ID
      */
     Long DEFAULT_ORG_ID = 100L;
+
+     /**
+     * 根菜单ID
+     */
+    Long MENU_ROOT_ID = 0L;
 }

SERVER/ChickenFarmV3/vb-modules/vb-system/src/main/java/cn/vber/system/controller/system/SysMenuController.java

@@ -84,6 +84,23 @@ public class SysMenuController extends BaseController {
         return R.ok(menus);
     }
 
+    @SaCheckRole(value = {
+            TenantConstants.SUPER_ADMIN_ROLE_KEY,
+            TenantConstants.TENANT_ADMIN_ROLE_KEY
+    }, mode = SaMode.OR)
+    @SaCheckPermission("system:menu")
+    @GetMapping("/listByParentId")
+    public R<List<SysMenuVo>> listByParentId(SysMenuBo menu) {
+        if(menu.getMenuId() == null) {
+            menu.setParentId(SystemConstants.MENU_ROOT_ID);
+        }else{
+            menu.setParentId(menu.getMenuId());
+        }
+        List<SysMenuVo> menus = menuService.selectMenuChildrenList(menu);
+
+        return R.ok(menus);
+    }
+
     /**
      * 根据菜单编号获取详细信息
      *

SERVER/ChickenFarmV3/vb-modules/vb-system/src/main/java/cn/vber/system/domain/vo/SysMenuVo.java

@@ -123,4 +123,7 @@ public class SysMenuVo implements Serializable {
      */
     private List<SysMenuVo> children = new ArrayList<>();
 
+    private boolean isLeaf;
+
+
 }

SERVER/ChickenFarmV3/vb-modules/vb-system/src/main/java/cn/vber/system/mapper/SysMenuMapper.java

@@ -5,6 +5,7 @@ import cn.vber.common.core.constant.SystemConstants;
 import cn.vber.common.mybatis.core.mapper.BaseMapperPlus;
 import cn.vber.system.domain.SysMenu;
 import cn.vber.system.domain.vo.SysMenuVo;
+import org.apache.ibatis.annotations.Param;
 import org.springframework.stereotype.Repository;
 
 import java.util.List;
@@ -106,6 +107,8 @@ public interface SysMenuMapper extends BaseMapperPlus<SysMenu, SysMenuVo> {
                 """.formatted(perm);
     }
 
+
+
     /**
      * 根据用户所有权限
      *
@@ -225,5 +228,7 @@ public interface SysMenuMapper extends BaseMapperPlus<SysMenu, SysMenuVo> {
                 .orderByAsc(SysMenu::getOrderNum);
         return this.selectVoList(lqw);
     }
+    //    List<SysMenuVo> selectBtnListByPerms(@Param("perms") String perms);
+    List<SysMenuVo> selectChildListById(@Param("menuId") Long menuId);
 
 }

SERVER/ChickenFarmV3/vb-modules/vb-system/src/main/java/cn/vber/system/service/ISysMenuService.java

@@ -34,7 +34,7 @@ public interface ISysMenuService {
      */
     List<SysMenuVo> selectMenuList(SysMenuBo menu, Long userId);
 
-
+    List<SysMenuVo> selectMenuChildrenList(SysMenuBo menu);
     /**
      * 根据权限名称查询按钮列表
      *

SERVER/ChickenFarmV3/vb-modules/vb-system/src/main/java/cn/vber/system/service/impl/SysMenuServiceImpl.java

@@ -33,6 +33,8 @@ import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
 import java.util.*;
+import java.util.function.Function;
+import java.util.stream.Collectors;
 
 /**
  * 菜单 业务层处理
@@ -66,6 +68,7 @@ public class SysMenuServiceImpl implements ISysMenuService {
      * 查询系统菜单列表
      *
      * @param menu 菜单信息
+     * @param userId 用户ID
      * @return 菜单列表
      */
     @Override
@@ -85,8 +88,19 @@ public class SysMenuServiceImpl implements ISysMenuService {
                         .eq(ObjectUtil.isNotNull(menu.getParentId()), SysMenu::getParentId, menu.getParentId())
                         .orderByAsc(SysMenu::getParentId)
                         .orderByAsc(SysMenu::getOrderNum));
+        
         return menuList;
     }
+    /**
+     * 查询系统菜单列表
+     *
+     * @param menu 菜单信息
+     * @return 菜单列表
+     */
+    @Override
+    public List<SysMenuVo> selectMenuChildrenList(SysMenuBo menu) {
+         return baseMapper.selectChildListById(menu.getMenuId());
+    }
 
     /**
      * 根据权限名称查询按钮列表
@@ -426,4 +440,6 @@ public class SysMenuServiceImpl implements ISysMenuService {
         }
     }
 
-}
+
+
+}

SERVER/ChickenFarmV3/vb-modules/vb-system/src/main/resources/mapper/system/SysMenuMapper.xml

@@ -58,4 +58,9 @@
           AND m.status = '0'
           AND m.btn_script != ''
     </select>
+
+    <select id="selectChildListById" resultType="cn.vber.system.domain.vo.SysMenuVo">
+        SELECT m.* ,CASE WHEN EXISTS(select 1 from sys_menu where parent_id=m.menu_id) THEN 0 ELSE 1 END as isLeaf FROM `sys_menu` as m where m.parent_id =#{menuId}
+        ORDER BY m.order_num
+    </select>
 </mapper>

UI/VB.VUE/src/api/system/_menu.ts

@@ -11,6 +11,15 @@ class menuApi {
 			loading: false
 		})
 	}
+	// 查询菜单列表
+	listMenuByParentId = (query: any) => {
+		return Rs.get({
+			url: "/system/menu/listByParentId",
+			method: "get",
+			params: query,
+			loading: false
+		})
+	}
 
 	// 查询子菜单列表
 	listChildren = (query: any) => {

UI/VB.VUE/src/components/icon/IconSelect.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
+console.log("0000000")
 import icons from "bootstrap-icons/font/bootstrap-icons.json"
 
 defineProps<{ activeIcon: string }>()
 
 const iconKeys = Object.keys(icons)
 const searchKeywork = ref("")
+console.log("11111122")
 const iconList = ref(Object.keys(icons))
 
 const emit = defineEmits(["selected"])

UI/VB.VUE/src/components/table/VbDataTable.vue

@@ -874,8 +874,8 @@ const onReset = () => {
 }
 const onTreeToggle = (v: any) => {
 	const row = toValue(v)
-	const id = "tr_" + row[keyField.value]
-	const tr = tableBoxRef.value?.querySelector(`#${id}`)
+	const tr_id = "tr_" + row[keyField.value]
+	const tr = tableBoxRef.value?.querySelector(`#${tr_id}`)
 	const icon = tr?.querySelector(".icon")
 	if (!tr || !icon) {
 		return
@@ -884,21 +884,21 @@ const onTreeToggle = (v: any) => {
 		// 已有children可展开的直接展开,不在调用懒加载
 		if (tr.className.search("hasChildren") >= 0) {
 			if (tr.className.search("tr-expand") >= 0 || !props.isLazySearch) {
-				toggle(tr, icon, id)
+				toggle(tr, icon, tr_id)
 				return
 			}
 		}
-		remote(id).then((res) => {
+		remote(row[keyField.value]).then((res) => {
 			if (res == 1 && props.isLazySearch) {
 				nextTick(() => {
-					showChildren(id)
+					showChildren(tr_id)
 				})
 			}
 		})
 		tr.className = tr.className.replace("tr-collapse", "tr-expand")
 		icon.className = icon.className.replace("ki-add-folder", "ki-minus-folder")
 	} else {
-		toggle(tr, icon, id)
+		toggle(tr, icon, tr_id)
 	}
 	function toggle(_tr: HTMLElement, _icon: HTMLElement, id: string) {
 		if (_tr.className.search("tr-expand") >= 0) {

UI/VB.VUE/src/views/system/menu/index.vue

@@ -6,6 +6,7 @@ const { sys_normal_disable, sys_show_hide } = useDict("sys_normal_disable", "sys
 
 const tableRef = ref()
 const modalRef = ref()
+const iconShow = ref(false)
 const opts = reactive({
 	columns: [
 		{ field: "menuId", name: "菜单ID", width: 100, isSort: true, visible: false },
@@ -21,7 +22,7 @@ const opts = reactive({
 		{ field: "status", name: "菜单状态", visible: true, width: 80 },
 		{ field: "perms", name: "权限标识", visible: true },
 		{ field: "actions", name: `操作`, width: 150 }
-	],
+	] as any,
 	queryParams: {
 		menuName: undefined,
 		visible: undefined,
@@ -222,8 +223,8 @@ function defaultBtnChange(v: any) {
 
 function getTableData(q: any) {
 	return new Promise((resolve) => {
-		apis.system.menuApi.listMenu(q).then((res) => {
-			res.data = handleTree(res.data, "menuId")
+		apis.system.menuApi.listMenuByParentId(q).then((res) => {
+			//res.data = handleTree(res.data, "menuId")
 			resolve(res)
 		})
 	})
@@ -242,16 +243,25 @@ function selected(name: string) {
 	form.value.icon = name
 	showChooseIcon.value = false
 }
+
+onMounted(() => {
+	setTimeout(() => {
+		iconShow.value = true
+	}, 500)
+})
 </script>
 <template>
 	<div>
 		<VbDataTable
 			ref="tableRef"
 			:is-tree="true"
+			:is-lazy="true"
 			keyField="menuId"
 			iconField="menuName"
 			parentField="parentId"
+			root-id="0"
 			childrenField="children"
+			leaf-field="leaf"
 			:check-multiple="false"
 			:has-checkbox="false"
 			:no-page="true"
@@ -408,8 +418,8 @@ function selected(name: string) {
 							</el-radio-group>
 						</el-form-item>
 					</el-col>
-					<el-col :span="24">
-						<el-form-item label="菜单图标" prop="icon">
+					<el-col :span="24" v-if="iconShow">
+						<!-- <el-form-item label="菜单图标" prop="icon">
 							<el-popover
 								placement="bottom-start"
 								:width="600"
@@ -431,6 +441,9 @@ function selected(name: string) {
 								</template>
 								<icon-select ref="iconSelectRef" @selected="selected" :active-icon="form.icon" />
 							</el-popover>
+						</el-form-item> -->
+						<el-form-item label="菜单图标" prop="icon">
+							<el-input v-model="form.icon" placeholder="请输入菜单图标" class="w-100" />
 						</el-form-item>
 					</el-col>
 					<el-col :span="12">