功能变化: 菜单管理改懒加载

backend/dvadmin/system/views/menu.py

@@ -21,6 +21,7 @@ class MenuSerializer(CustomModelSerializer):
     菜单表的简单序列化器
     """
     menuPermission = serializers.SerializerMethodField(read_only=True)
+    hasChild = serializers.SerializerMethodField()
 
     def get_menuPermission(self, instance):
         queryset = instance.menuPermission.order_by('-name').values_list('name', flat=True)
@@ -29,6 +30,12 @@ class MenuSerializer(CustomModelSerializer):
         else:
             return None
 
+    def get_hasChild(self, instance):
+        hasChild = Menu.objects.filter(parent=instance.id)
+        if hasChild:
+            return True
+        return False
+
     class Meta:
         model = Menu
         fields = "__all__"
@@ -171,3 +178,21 @@ class MenuViewSet(CustomModelViewSet):
         serializer = WebRouterSerializer(queryset, many=True, request=request)
         data = serializer.data
         return SuccessResponse(data=data, total=len(data), msg="获取成功")
+
+    def list(self,request):
+        """
+        懒加载
+        """
+        params = request.query_params
+        parent = params.get('parent', None)
+        if params:
+            if parent:
+                queryset = self.queryset.filter(status=1, parent=parent)
+            else:
+                queryset = self.queryset.filter(status=1)
+        else:
+            queryset = self.queryset.filter(status=1, parent__isnull=True)
+        queryset = self.filter_queryset(queryset)
+        serializer = MenuSerializer(queryset, many=True, request=request)
+        data = serializer.data
+        return SuccessResponse(data=data)

web/src/views/system/menu/api.js

@@ -14,14 +14,12 @@ export const urlPrefix = '/api/system/menu/'
  * 列表查询
  */
 export function GetList (query) {
-  query.limit = 999
   return request({
     url: urlPrefix,
     method: 'get',
-    params: { ...query, limit: 999 }
+    params: { ...query }
   }).then(res => {
     // 将列表数据转换为树形数据
-    // res.data.data = XEUtils.toArrayTree(res.data.data, { parentKey: 'parent', strict: false })
     return res
   })
 }

web/src/views/system/menu/crud.js

@@ -34,7 +34,10 @@ export const crudOptions = (vm) => {
         transform: true,
         rowField: 'id',
         parentField: 'parent',
-        expandAll: true
+        expandAll: true,
+        hasChild: 'hasChild',
+        lazy: true,
+        loadMethod: vm.loadContentMethod
       }
     },
     rowHandle: {

web/src/views/system/menu/index.vue

@@ -86,6 +86,18 @@ export default {
         })
       })
       return result
+    },
+    /**
+     * 懒加载
+     * @param row
+     * @returns {Promise<unknown>}
+     */
+    loadContentMethod ({ row }) {
+      return new Promise(resolve => {
+        api.GetList({ parent: row.id }).then(res => {
+          resolve(res.data.data)
+        })
+      })
     }
   }
 }