admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
H0nGzA1
2023-07-28 16:13:33 +08:00
parent 9114c6bf81
commit 252b6a8328
3 changed files with 531 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
backend/dvadmin/system/views/menu.py
View File

@@ -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,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):
"""前端拖拽菜单之后重写parent"""
menu_id = request.data['menu_id']
parent_id = request.data['parent_id']
def move_up(self, request):
"""菜单上移"""
menu_id = request.data.get('menu_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):
"""懒加载"""
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=['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="下移成功")

17
web/src/views/system/menu/api.ts
View File

@@ -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,
});
}

18
web/src/views/system/menu/index.vue
View File

@@ -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)
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);
});
}
}