feat: 菜单管理-上下移动功能

backend/dvadmin/system/views/menu.py

@@ -9,8 +9,8 @@
 from rest_framework import serializers
 from rest_framework.decorators import action
 
-from dvadmin.system.models import Menu, MenuButton, RoleMenuPermission
+from dvadmin.system.models import Menu, RoleMenuPermission
-from dvadmin.utils.json_response import SuccessResponse
+from dvadmin.utils.json_response import SuccessResponse, ErrorResponse
 from dvadmin.utils.serializers import CustomModelSerializer
 from dvadmin.utils.viewset import CustomModelViewSet
 
@@ -84,7 +84,28 @@ class MenuViewSet(CustomModelViewSet):
     search_fields = ['name', 'status']
     filter_fields = ['parent', 'name', 'status', 'is_link', 'visible', 'cache', 'is_catalog']
 
-    # extra_filter_class = []
+    def list(self, request):
+        """懒加载"""
+        request.query_params._mutable = True
+        params = request.query_params
+        parent = params.get('parent', None)
+        page = params.get('page', None)
+        limit = params.get('limit', None)
+        if page:
+            del params['page']
+        if limit:
+            del params['limit']
+        if params:
+            if parent:
+                queryset = self.queryset.filter(parent=parent)
+            else:
+                queryset = self.queryset.filter()
+        else:
+            queryset = self.queryset.filter(parent__isnull=True)
+        queryset = self.filter_queryset(queryset)
+        serializer = MenuSerializer(queryset, many=True, request=request)
+        data = serializer.data
+        return SuccessResponse(data=data)
 
     @action(methods=['GET'], detail=False, permission_classes=[])
     def web_router(self, request):
@@ -118,35 +139,33 @@ class MenuViewSet(CustomModelViewSet):
         return SuccessResponse(data=data, total=len(data), msg="获取成功")
 
     @action(methods=['POST'], detail=False, permission_classes=[])
-    def drag_menu(self, request):
+    def move_up(self, request):
-        """前端拖拽菜单之后重写parent"""
+        """菜单上移"""
-        menu_id = request.data['menu_id']
+        menu_id = request.data.get('menu_id')
-        parent_id = request.data['parent_id']
+        try:
             menu = Menu.objects.get(id=menu_id)
-        menu.parent_id = parent_id
+        except Menu.DoesNotExist:
+            return ErrorResponse(msg="菜单不存在")
+        previous_menu = Menu.objects.filter(sort__lt=menu.sort).order_by('-sort').first()
+        if previous_menu:
+            previous_menu.sort, menu.sort = menu.sort, previous_menu.sort
+            previous_menu.save()
             menu.save()
 
-        return SuccessResponse(data=[], msg="拖拽菜单成功")
+        return SuccessResponse(data=[], msg="上移成功")
 
-    def list(self, request):
+    @action(methods=['POST'], detail=False, permission_classes=[])
-        """懒加载"""
+    def move_down(self, request):
-        request.query_params._mutable = True
+        """菜单下移"""
-        params = request.query_params
+        menu_id = request.data['menu_id']
-        parent = params.get('parent', None)
+        try:
-        page = params.get('page', None)
+            menu = Menu.objects.get(id=menu_id)
-        limit = params.get('limit', None)
+        except Menu.DoesNotExist:
-        if page:
+            return ErrorResponse(msg="菜单不存在")
-            del params['page']
+        next_menu = Menu.objects.filter(sort__gt=menu.sort).order_by('sort').first()
-        if limit:
+        if next_menu:
-            del params['limit']
+            next_menu.sort, menu.sort = menu.sort, next_menu.sort
-        if params:
+            next_menu.save()
-            if parent:
+            menu.save()
-                queryset = self.queryset.filter(parent=parent)
+
-            else:
+        return SuccessResponse(data=[], msg="下移成功")
-                queryset = self.queryset.filter()
-        else:
-            queryset = self.queryset.filter(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.ts

@@ -2,6 +2,7 @@ import { request } from '/@/utils/service';
 import {UserPageQuery, AddReq, DelReq, EditReq, InfoReq} from '@fast-crud/fast-crud';
 
 export const apiPrefix = '/api/system/menu/';
+
 export function GetList(query: UserPageQuery) {
     return request({
         url: apiPrefix,
@@ -63,3 +64,19 @@ export function dragMenu(obj: AddReq) {
         data: obj,
     });
 }
+
+export function moveUp(obj: AddReq) {
+    return request({
+        url: apiPrefix + 'move_up/',
+        method: 'post',
+        data: obj,
+    });
+}
+
+export function moveDown(obj: AddReq) {
+    return request({
+        url: apiPrefix + 'move_down/',
+        method: 'post',
+        data: obj,
+    });
+}

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

@@ -18,7 +18,8 @@
                             </el-tooltip>
                         </div>
                         <el-tree ref="treeRef" :data="data" :props="defaultTreeProps" :filter-node-method="filterNode"
-							:load="loadNode" @node-drop="nodeDrop" lazy :indent="45" @node-click="handleNodeClick" highlight-current
+                                 :load="loadNode" @node-drop="nodeDrop" lazy :indent="45" @node-click="handleNodeClick"
+                                 highlight-current
                                  default-expand-all>
                             <template #default="{ node, data }">
                                 <element-tree-line :node="node" :showLabelLine="false" :indent="32">
@@ -96,7 +97,8 @@
                     </el-form-item>
                     <el-form-item label="组件地址" prop="component">
                         <el-autocomplete class="w-full" v-model="form.component" :fetch-suggestions="querySearch"
-							:trigger-on-focus="false" clearable :debounce="100" placeholder="输入组件地址" />
+                                         :trigger-on-focus="false" clearable :debounce="100"
+                                         placeholder="输入组件地址"/>
                     </el-form-item>
                     <el-form-item required label="Url" prop="web_path">
                         <el-input v-model="form.web_path"/>
@@ -382,12 +384,16 @@ const handleSort = (type: string) => {
 
     if (type === 'up') {
         if (index === 0) return
-		parentList.splice(index - 1, 0, record as any)
+        api.moveUp({'menu_id': form.id}).then((res: APIResponseData) => {
-		parentList.splice(index + 1, 1)
+            getData();
+            successMessage(res.msg as string);
+        });
     }
     if (type === 'down') {
-		parentList.splice(index + 2, 0, record as any)
+        api.moveDown({'menu_id': form.id}).then((res: APIResponseData) => {
-		parentList.splice(index, 1)
+            getData();
+            successMessage(res.msg as string);
+        });
     }
 }