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

@@ -10,28 +10,17 @@
                                 <Menu/>
                             </el-icon>
                             菜单列表
-							<el-tooltip
+                            <el-tooltip effect="dark" placement="right"
-								effect="dark"
+                                        content="1.红色菜单代表状态禁用; 2.添加菜单，如果是目录，组件地址为空即可; 3.添加根节点菜单，父级ID为空即可; 4.支持拖拽菜单;">
-								placement="right"
-								content="1.红色菜单代表状态禁用; 2.添加菜单，如果是目录，组件地址为空即可; 3.添加根节点菜单，父级ID为空即可; 4.支持拖拽菜单;"
-							>
                                 <el-icon size="16" color="var(--el-color-primary)" class="mlt-tooltip">
                                     <QuestionFilled/>
                                 </el-icon>
                             </el-tooltip>
                         </div>
-						<el-tree
+                        <el-tree ref="treeRef" :data="data" :props="defaultTreeProps" :filter-node-method="filterNode"
-							ref="treeRef"
+                                 :load="loadNode" @node-drop="nodeDrop" lazy :indent="45" @node-click="handleNodeClick"
-							:data="data"
-							:props="defaultTreeProps"
-							:filter-node-method="filterNode"
-							: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">
@@ -87,7 +76,8 @@
             </el-col>
         </el-row>
 
-		<el-drawer v-model="drawerVisible" title="菜单配置" direction="rtl" size="500px" :close-on-click-modal="false" :before-close="handleDrawerClose">
+        <el-drawer v-model="drawerVisible" title="菜单配置" direction="rtl" size="500px" :close-on-click-modal="false"
+                   :before-close="handleDrawerClose">
             <div class="menu-box menu-drawer-box">
                 <div class="mcb-alert">
                     1.红色菜单代表状态禁用;<br/>
@@ -96,76 +86,49 @@
                     4.支持拖拽菜单;
                 </div>
                 <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
-					<el-form-item label="菜单名称" prop="name">
+                    <el-form-item label="菜单ID" prop="id">
-						<el-input v-model="formData.name" />
+                        <el-input v-model="form.id" disabled/>
                     </el-form-item>
-					<el-form-item label="父级菜单" prop="parent">
+                    <el-form-item label="父级ID" prop="parent">
-						<el-input v-model="formData.parent" />
+                        <el-input v-model="form.parent"/>
                     </el-form-item>
-					<el-form-item label="图标" prop="icon">
+                    <el-form-item required label="菜单名称" prop="name">
-						<IconSelector clearable v-model="formData.icon" />
+                        <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="输入组件地址"/>
+                    </el-form-item>
+                    <el-form-item required label="Url" prop="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-form-item>
-
-					<el-row>
-						<el-col :span="12">
                     <el-form-item label="状态">
-								<el-switch v-model="formData.show_status" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
+                        <el-radio-group v-model="form.status">
-							</el-form-item>
+                            <el-radio :label="true">启用</el-radio>
-						</el-col>
+                            <el-radio :label="false">禁用</el-radio>
-						<el-col :span="12">
-							<el-form-item v-if="formData.show_status" label="侧边显示">
-								<el-switch v-model="formData.slider_show" width="60" inline-prompt active-text="显示" inactive-text="隐藏" />
-							</el-form-item>
-						</el-col>
-					</el-row>
-
-					<el-form-item label="菜单状态">
-						<el-radio-group v-model="formData.menu_status">
-							<el-radio-button label="1" class="aaa">常规</el-radio-button>
-							<el-radio-button label="2">目录</el-radio-button>
-							<el-radio-button label="3">外链接</el-radio-button>
                         </el-radio-group>
                     </el-form-item>
-
+                    <el-form-item label="侧边可见">
-					<el-form-item label="备注" prop="remark">
+                        <el-radio-group v-model="form.visible">
-						<el-input v-model="formData.remark" maxlength="200" show-word-limit type="textarea" />
+                            <el-radio :label="true">启用</el-radio>
+                            <el-radio :label="false">禁用</el-radio>
+                        </el-radio-group>
                     </el-form-item>
-
+                    <el-form-item label="缓存">
-					<el-divider></el-divider>
+                        <el-radio-group v-model="form.cache">
-
+                            <el-radio :label="true">启用</el-radio>
-					<div style="min-height: 184px">
+                            <el-radio :label="false">禁用</el-radio>
-						<el-form-item v-if="formData.menu_status === '3'" required label="Url" prop="web_path">
+                        </el-radio-group>
-							<el-input v-model="formData.web_path" />
                     </el-form-item>
-
+                    <el-form-item label="图标" prop="icon">
-						<el-form-item v-if="formData.menu_status === '1'" label="路由地址" prop="route_path">
+                        <IconSelector clearable v-model="form.icon"/>
-							<el-input v-model="formData.route_path" />
                     </el-form-item>
-
-						<el-form-item v-if="formData.menu_status === '1'" label="组件名称" prop="route_name">
-							<el-input v-model="formData.route_name" />
-						</el-form-item>
-
-						<el-form-item v-if="formData.menu_status === '1'" label="组件地址" prop="component">
-							<el-autocomplete
-								class="w-full"
-								v-model="formData.component"
-								:fetch-suggestions="querySearch"
-								:trigger-on-focus="false"
-								clearable
-								:debounce="100"
-								placeholder="输入组件地址"
-							/>
-						</el-form-item>
-
-						<el-form-item v-if="formData.menu_status === '1'" label="缓存">
-							<el-switch v-model="formData.cache" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
-						</el-form-item>
-					</div>
-
-					<el-divider></el-divider>
                 </el-form>
-
+                <el-divider></el-divider>
                 <div class="menus-btns">
                     <el-button @click="saveMenu()" type="primary">保存</el-button>
                     <!-- <el-button @click="newMenu()" type="primary" round :disabled="!form.id">新建</el-button>
@@ -182,7 +145,7 @@
 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 {getElementLabelLine} from "element-tree-line";
 import * as api from './api';
 import {Search} from '@element-plus/icons-vue';
 import {errorMessage, successMessage, warningMessage} from '../../../utils/message';
@@ -197,23 +160,8 @@ const ElementTreeLine = getElementLabelLine(h);
 
 const filterText = ref('');
 const treeRef = ref<InstanceType<typeof ElTree>>();
-let drawerVisible = ref(false);
+let drawerVisible = ref(false)
-let treeSelectNode = ref<Node | null>(null);
+let treeSelectNode = ref<Node | null>(null)
-
-let formData = reactive({
-	name: '',
-	parent: '',
-	icon: '',
-	show_status: true,
-	slider_show: true,
-	menu_status: '1',
-	remark: '',
-	component: '',
-	web_path: '',
-	route_path: '',
-	route_name: '',
-	cache: true,
-});
 
 watch(filterText, (val) => {
     treeRef.value!.filter(val);
@@ -285,12 +233,9 @@ let form: FormTypes<any> = reactive({
     visible: true,
     cache: true,
 });
-
 const rules = reactive<FormRules>({
     // @ts-ignore
     web_path: [{validator: validateWebPath, trigger: 'blur'}],
-	name: [{ required: true, message: '菜单名称必填', trigger: 'blur' }],
-	parent: [{ required: true, message: '父级菜单必选', trigger: ['blur', 'change'] }],
 });
 
 const formRef = ref<InstanceType<typeof ElForm>>();
@@ -341,7 +286,7 @@ const saveMenu = () => {
                 api.UpdateObj(form).then((res: APIResponseData) => {
                     successMessage(res.msg as string);
                     getData();
-					handleDrawerClose();
+                    handleDrawerClose()
                 });
             } else {
                 // 新增菜单
@@ -349,7 +294,7 @@ const saveMenu = () => {
                 api.AddObj(form).then((res: APIResponseData) => {
                     successMessage(res.msg as string);
                     getData();
-					handleDrawerClose();
+                    handleDrawerClose()
                 });
             }
         } else {
@@ -361,7 +306,7 @@ const saveMenu = () => {
 const newMenu = () => {
     formRef.value?.resetFields();
     isAddNewMenu.value = true;
-	handleDrawerClose();
+    handleDrawerClose()
 };
 
 const addChildMenu = () => {
@@ -387,38 +332,42 @@ const handleNodeClick = (record: any, node: Node) => {
  */
 const handleUpdateMenu = (type: string) => {
     if (type === 'create') {
-		drawerVisible.value = true;
+        drawerVisible.value = true
-		return;
+        return
     }
     if (!form.id) {
-		warningMessage('请选择菜单！');
+        warningMessage('请选择菜单！')
-		return;
+        return
+    }
+    drawerVisible.value = true
 }
-	drawerVisible.value = true;
-};
 const handleDrawerClose = () => {
-	drawerVisible.value = false;
+    drawerVisible.value = false
-};
+}
 
 /**
  * 删除菜单
  */
 const handleDeleteMenu = () => {
     if (!form.id) {
-		warningMessage('请选择菜单！');
+        warningMessage('请选择菜单！')
-		return;
+        return
     }
-	ElMessageBox.confirm('您确认删除该菜单项吗?', '温馨提示', {
+    ElMessageBox.confirm(
+        '您确认删除该菜单项吗?',
+        '温馨提示',
+        {
             confirmButtonText: '确认',
             cancelButtonText: '取消',
             type: 'warning',
-	}).then(() => {
+        }
+    ).then(() => {
         api.DelObj(form).then((res: APIResponseData) => {
             successMessage(res.msg as string);
             getData();
             handleDrawerClose();
         });
-	});
+    })
 };
 
 /**
@@ -426,23 +375,27 @@ const handleDeleteMenu = () => {
  */
 const handleSort = (type: string) => {
     if (!form.id && treeSelectNode.value) {
-		warningMessage('请选择菜单！');
+        warningMessage('请选择菜单！')
-		return;
+        return
     }
     const parentList = treeSelectNode.value?.parent.childNodes || [];
-	const index = parentList.findIndex((i) => i.data.id === form.id);
+    const index = parentList.findIndex(i => i.data.id === form.id)
-	const record = parentList.find((i) => i.data.id === form.id);
+    const record = parentList.find(i => i.data.id === form.id)
 
     if (type === 'up') {
-		if (index === 0) return;
+        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);
+        });
+    }
 }
-};
 
 // 页面打开后获取列表数据
 onMounted(() => {
@@ -576,11 +529,11 @@ onMounted(() => {
     }
 
     .el-tree .el-tree-node__expand-icon.is-leaf {
-		margin-left: 0;
+        margin-left: 0
     }
 
     .el-tree .el-tree-node__expand-icon:before {
-		background: url('../../../assets/img/menu-tree-show-icon.png') no-repeat center / 100%;
+        background: url("../../../assets/img/menu-tree-show-icon.png") no-repeat center / 100%;
         content: '';
         display: block;
         width: 24px;
@@ -588,7 +541,7 @@ onMounted(() => {
     }
 
     .el-tree .el-tree-node__expand-icon.expanded:before {
-		background: url('../../../assets/img/menu-tree-hidden-icon.png') no-repeat center / 100%;
+        background: url("../../../assets/img/menu-tree-hidden-icon.png") no-repeat center / 100%;
         content: '';
         display: block;
         width: 24px;