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.utils.json_response import SuccessResponse
+from dvadmin.system.models import Menu, RoleMenuPermission
+from dvadmin.utils.json_response import SuccessResponse, ErrorResponse
 from dvadmin.utils.serializers import CustomModelSerializer
 from dvadmin.utils.viewset import CustomModelViewSet
 
@@ -84,50 +84,6 @@ class MenuViewSet(CustomModelViewSet):
     search_fields = ['name', 'status']
     filter_fields = ['parent', 'name', 'status', 'is_link', 'visible', 'cache', 'is_catalog']
 
-    # extra_filter_class = []
-
-    @action(methods=['GET'], detail=False, permission_classes=[])
-    def web_router(self, request):
-        """用于前端获取当前角色的路由"""
-        user = request.user
-        is_admin = user.role.values_list('admin', flat=True)
-        if user.is_superuser or True in is_admin:
-            queryset = self.queryset.filter(status=1)
-        else:
-            role_list = user.role.values_list('id', flat=True)
-            menu_list = RoleMenuPermission.objects.filter(role__in=role_list).values_list('menu_id',flat=True)
-            print("role_list", role_list)
-            print("menu_list",menu_list)
-            queryset = Menu.objects.filter(id__in=menu_list)
-        print(queryset)
-        serializer = WebRouterSerializer(queryset, many=True, request=request)
-        data = serializer.data
-        return SuccessResponse(data=data, total=len(data), msg="获取成功")
-
-    @action(methods=['GET'], detail=False, permission_classes=[])
-    def get_all_menu(self, request):
-        """用于菜单管理获取所有的菜单"""
-        user = request.user
-        queryset = self.queryset.all()
-        if not user.is_superuser:
-            role_list = user.role.values_list('id', flat=True)
-            menu_list = RoleMenuPermission.objects.filter(role__in=role_list).values_list('menu_id')
-            queryset = Menu.objects.filter(id__in=menu_list)
-        serializer = WebRouterSerializer(queryset, many=True, request=request)
-        data = serializer.data
-        return SuccessResponse(data=data, total=len(data), msg="获取成功")
-
-    @action(methods=['POST'], detail=False, permission_classes=[])
-    def drag_menu(self, request):
-        """前端拖拽菜单之后重写parent"""
-        menu_id = request.data['menu_id']
-        parent_id = request.data['parent_id']
-        menu = Menu.objects.get(id=menu_id)
-        menu.parent_id = parent_id
-        menu.save()
-
-        return SuccessResponse(data=[], msg="拖拽菜单成功")
-
     def list(self, request):
         """懒加载"""
         request.query_params._mutable = True
@@ -150,3 +106,66 @@ class MenuViewSet(CustomModelViewSet):
         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):
+        """用于前端获取当前角色的路由"""
+        user = request.user
+        is_admin = user.role.values_list('admin', flat=True)
+        if user.is_superuser or True in is_admin:
+            queryset = self.queryset.filter(status=1)
+        else:
+            role_list = user.role.values_list('id', flat=True)
+            menu_list = RoleMenuPermission.objects.filter(role__in=role_list).values_list('menu_id', flat=True)
+            print("role_list", role_list)
+            print("menu_list", menu_list)
+            queryset = Menu.objects.filter(id__in=menu_list)
+        print(queryset)
+        serializer = WebRouterSerializer(queryset, many=True, request=request)
+        data = serializer.data
+        return SuccessResponse(data=data, total=len(data), msg="获取成功")
+
+    @action(methods=['GET'], detail=False, permission_classes=[])
+    def get_all_menu(self, request):
+        """用于菜单管理获取所有的菜单"""
+        user = request.user
+        queryset = self.queryset.all()
+        if not user.is_superuser:
+            role_list = user.role.values_list('id', flat=True)
+            menu_list = RoleMenuPermission.objects.filter(role__in=role_list).values_list('menu_id')
+            queryset = Menu.objects.filter(id__in=menu_list)
+        serializer = WebRouterSerializer(queryset, many=True, request=request)
+        data = serializer.data
+        return SuccessResponse(data=data, total=len(data), msg="获取成功")
+
+    @action(methods=['POST'], detail=False, permission_classes=[])
+    def move_up(self, request):
+        """菜单上移"""
+        menu_id = request.data.get('menu_id')
+        try:
+            menu = Menu.objects.get(id=menu_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="上移成功")
+
+    @action(methods=['POST'], detail=False, permission_classes=[])
+    def move_down(self, request):
+        """菜单下移"""
+        menu_id = request.data['menu_id']
+        try:
+            menu = Menu.objects.get(id=menu_id)
+        except Menu.DoesNotExist:
+            return ErrorResponse(msg="菜单不存在")
+        next_menu = Menu.objects.filter(sort__gt=menu.sort).order_by('sort').first()
+        if next_menu:
+            next_menu.sort, menu.sort = menu.sort, next_menu.sort
+            next_menu.save()
+            menu.save()
+
+        return SuccessResponse(data=[], msg="下移成功")

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

@@ -1,7 +1,8 @@
-import { request } from '/@/utils/service';
-import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+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

@@ -3,31 +3,32 @@
         <el-row class="menu-el-row">
             <el-col :span="6">
                 <div class="menu-box menu-left-box">
-					<el-input v-model="filterText" :prefix-icon="Search" placeholder="请输入菜单名称" />
+                    <el-input v-model="filterText" :prefix-icon="Search" placeholder="请输入菜单名称"/>
                     <div class="menu-left-tree">
                         <div class="mlt-head">
                             <el-icon size="16" color="#606266" class="mlt-head-icon">
-								<Menu />
+                                <Menu/>
                             </el-icon>
                             菜单列表
                             <el-tooltip effect="dark" placement="right"
                                         content="1.红色菜单代表状态禁用; 2.添加菜单，如果是目录，组件地址为空即可; 3.添加根节点菜单，父级ID为空即可; 4.支持拖拽菜单;">
                                 <el-icon size="16" color="var(--el-color-primary)" class="mlt-tooltip">
-									<QuestionFilled />
+                                    <QuestionFilled/>
                                 </el-icon>
                             </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">
 									<span v-if="data.status" class="text-center font-black font-normal">
-										<SvgIcon :name="node.data.icon" color="var(--el-color-primary)" />
+										<SvgIcon :name="node.data.icon" color="var(--el-color-primary)"/>
 										&nbsp;{{ node.label }}
 									</span>
                                     <span v-else class="text-center font-black text-red-700 font-normal">
-										<SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }}
+										<SvgIcon :name="node.data.icon"/>&nbsp;{{ node.label }}
 									</span>
                                 </element-tree-line>
                             </template>
@@ -37,31 +38,31 @@
                     <div class="menu-left-tags">
                         <el-tooltip effect="dark" content="新增">
                             <el-icon size="16" @click="handleUpdateMenu('create')" class="mlt-icon">
-								<Plus />
+                                <Plus/>
                             </el-icon>
                         </el-tooltip>
 
                         <el-tooltip effect="dark" content="编辑">
                             <el-icon size="16" @click="handleUpdateMenu('update')" class="mlt-icon">
-								<Edit />
+                                <Edit/>
                             </el-icon>
                         </el-tooltip>
 
                         <el-tooltip effect="dark" content="上移">
                             <el-icon size="16" @click="handleSort('up')" class="mlt-icon">
-								<Top />
+                                <Top/>
                             </el-icon>
                         </el-tooltip>
 
                         <el-tooltip effect="dark" content="下移">
                             <el-icon size="16" @click="handleSort('down')" class="mlt-icon">
-								<Bottom />
+                                <Bottom/>
                             </el-icon>
                         </el-tooltip>
 
                         <el-tooltip effect="dark" content="删除">
                             <el-icon size="16" @click="handleDeleteMenu()" class="mlt-icon">
-								<Delete />
+                                <Delete/>
                             </el-icon>
                         </el-tooltip>
                     </div>
@@ -70,7 +71,7 @@
 
             <el-col :span="18">
                 <div class="menu-box menu-right-box">
-					<menuButton :select-menu="form" />
+                    <menuButton :select-menu="form"/>
                 </div>
             </el-col>
         </el-row>
@@ -79,30 +80,31 @@
                    :before-close="handleDrawerClose">
             <div class="menu-box menu-drawer-box">
                 <div class="mcb-alert">
-					1.红色菜单代表状态禁用;<br />
-					2.添加菜单，如果是目录，组件地址为空即可;<br />
-					3.添加根节点菜单，父级ID为空即可;<br />
+                    1.红色菜单代表状态禁用;<br/>
+                    2.添加菜单，如果是目录，组件地址为空即可;<br/>
+                    3.添加根节点菜单，父级ID为空即可;<br/>
                     4.支持拖拽菜单;
                 </div>
                 <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
                     <el-form-item label="菜单ID" prop="id">
-						<el-input v-model="form.id" disabled />
+                        <el-input v-model="form.id" disabled/>
                     </el-form-item>
                     <el-form-item label="父级ID" prop="parent">
-						<el-input v-model="form.parent" />
+                        <el-input v-model="form.parent"/>
                     </el-form-item>
                     <el-form-item required label="菜单名称" prop="name">
-						<el-input v-model="form.name" />
+                        <el-input v-model="form.name"/>
                     </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" />
+                        <el-input v-model="form.web_path"/>
                     </el-form-item>
                     <el-form-item label="排序" prop="sort">
-						<el-input-number v-model="form.sort" controls-position="right" />
+                        <el-input-number v-model="form.sort" controls-position="right"/>
                     </el-form-item>
                     <el-form-item label="状态">
                         <el-radio-group v-model="form.status">
@@ -123,7 +125,7 @@
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item label="图标" prop="icon">
-						<IconSelector clearable v-model="form.icon" />
+                        <IconSelector clearable v-model="form.icon"/>
                     </el-form-item>
                 </el-form>
                 <el-divider></el-divider>
@@ -140,14 +142,14 @@
 </template>
 
 <script lang="ts" setup name="menuPages">
-import { ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, h } from 'vue';
+import {ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, h} from 'vue';
 import XEUtils from 'xe-utils';
-import { ElForm, ElTree, FormRules, ElMessageBox } from 'element-plus';
-import { getElementLabelLine } from "element-tree-line";
+import {ElForm, ElTree, FormRules, ElMessageBox} from 'element-plus';
+import {getElementLabelLine} from "element-tree-line";
 import * as api from './api';
-import { Search } from '@element-plus/icons-vue';
-import { errorMessage, successMessage, warningMessage } from '../../../utils/message';
-import { FormTypes, TreeTypes, APIResponseData, ComponentFileItem } from './types';
+import {Search} from '@element-plus/icons-vue';
+import {errorMessage, successMessage, warningMessage} from '../../../utils/message';
+import {FormTypes, TreeTypes, APIResponseData, ComponentFileItem} from './types';
 import type Node from 'element-plus/es/components/tree/src/model/node';
 
 const menuButton = defineAsyncComponent(() => import('./components/menuButton/index.vue'));
@@ -197,7 +199,7 @@ const loadNode = (node: Node, resolve: (data: TreeTypes[]) => void) => {
     // @ts-ignore
     if (node.level !== 0) {
         // @ts-ignore
-		api.lazyLoadMenu({ parent: node.data.id }).then((res: APIResponseData) => {
+        api.lazyLoadMenu({parent: node.data.id}).then((res: APIResponseData) => {
             resolve(res.data);
         });
     }
@@ -207,7 +209,7 @@ const nodeDrop = (draggingNode: Node, dropNode: Node) => {
     // @ts-ignore
     if (!dropNode.isLeaf) {
         // @ts-ignore
-		api.dragMenu({ menu_id: draggingNode.data.id, parent_id: dropNode.data.id }).then((res: APIResponseData) => {
+        api.dragMenu({menu_id: draggingNode.data.id, parent_id: dropNode.data.id}).then((res: APIResponseData) => {
             successMessage(res.msg as string);
         });
     }
@@ -233,7 +235,7 @@ let form: FormTypes<any> = reactive({
 });
 const rules = reactive<FormRules>({
     // @ts-ignore
-	web_path: [{ validator: validateWebPath, trigger: 'blur' }],
+    web_path: [{validator: validateWebPath, trigger: 'blur'}],
 });
 
 const formRef = ref<InstanceType<typeof ElForm>>();
@@ -382,12 +384,16 @@ const handleSort = (type: string) => {
 
     if (type === 'up') {
         if (index === 0) return
-		parentList.splice(index - 1, 0, record as any)
-		parentList.splice(index + 1, 1)
+        api.moveUp({'menu_id': form.id}).then((res: APIResponseData) => {
+            getData();
+            successMessage(res.msg as string);
+        });
     }
     if (type === 'down') {
-		parentList.splice(index + 2, 0, record as any)
-		parentList.splice(index, 1)
+        api.moveDown({'menu_id': form.id}).then((res: APIResponseData) => {
+            getData();
+            successMessage(res.msg as string);
+        });
     }
 }
 
@@ -510,7 +516,7 @@ onMounted(() => {
         font-size: 16px;
     }
 
-	.el-tree-node__content>.el-tree-node__expand-icon {
+    .el-tree-node__content > .el-tree-node__expand-icon {
         padding: 0;
         box-sizing: border-box;
         margin-right: 5px;