feat: 菜单管理-上下移动功能
This commit is contained in:
H0nGzA1
@@ -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="下移成功")
|
||||
|
||||
@@ -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,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -3,43 +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-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"
|
||||
<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
|
||||
>
|
||||
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)"/>
|
||||
{{ node.label }}
|
||||
</span>
|
||||
<span v-else class="text-center font-black text-red-700 font-normal">
|
||||
<SvgIcon :name="node.data.icon" /> {{ node.label }}
|
||||
<SvgIcon :name="node.data.icon"/> {{ node.label }}
|
||||
</span>
|
||||
</element-tree-line>
|
||||
</template>
|
||||
@@ -49,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>
|
||||
@@ -82,90 +71,64 @@
|
||||
|
||||
<el-col :span="18">
|
||||
<div class="menu-box menu-right-box">
|
||||
<menuButton :select-menu="form" />
|
||||
<menuButton :select-menu="form"/>
|
||||
</div>
|
||||
</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 />
|
||||
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="菜单名称" prop="name">
|
||||
<el-input v-model="formData.name" />
|
||||
<el-form-item label="菜单ID" prop="id">
|
||||
<el-input v-model="form.id" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="父级菜单" prop="parent">
|
||||
<el-input v-model="formData.parent" />
|
||||
<el-form-item label="父级ID" prop="parent">
|
||||
<el-input v-model="form.parent"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<IconSelector clearable v-model="formData.icon" />
|
||||
<el-form-item required label="菜单名称" prop="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="输入组件地址"/>
|
||||
</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-form-item>
|
||||
</el-col>
|
||||
<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 v-model="form.status">
|
||||
<el-radio :label="true">启用</el-radio>
|
||||
<el-radio :label="false">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="formData.remark" maxlength="200" show-word-limit type="textarea" />
|
||||
<el-form-item label="侧边可见">
|
||||
<el-radio-group v-model="form.visible">
|
||||
<el-radio :label="true">启用</el-radio>
|
||||
<el-radio :label="false">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider></el-divider>
|
||||
|
||||
<div style="min-height: 184px">
|
||||
<el-form-item v-if="formData.menu_status === '3'" required label="Url" prop="web_path">
|
||||
<el-input v-model="formData.web_path" />
|
||||
<el-form-item label="缓存">
|
||||
<el-radio-group v-model="form.cache">
|
||||
<el-radio :label="true">启用</el-radio>
|
||||
<el-radio :label="false">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="formData.menu_status === '1'" label="路由地址" prop="route_path">
|
||||
<el-input v-model="formData.route_path" />
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<IconSelector clearable v-model="form.icon"/>
|
||||
</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>
|
||||
@@ -179,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,23 +160,8 @@ const ElementTreeLine = getElementLabelLine(h);
|
||||
|
||||
const filterText = ref('');
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>();
|
||||
let drawerVisible = ref(false);
|
||||
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,
|
||||
});
|
||||
let drawerVisible = ref(false)
|
||||
let treeSelectNode = ref<Node | null>(null)
|
||||
|
||||
watch(filterText, (val) => {
|
||||
treeRef.value!.filter(val);
|
||||
@@ -251,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);
|
||||
});
|
||||
}
|
||||
@@ -261,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);
|
||||
});
|
||||
}
|
||||
@@ -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'] }],
|
||||
web_path: [{validator: validateWebPath, trigger: 'blur'}],
|
||||
});
|
||||
|
||||
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;
|
||||
return;
|
||||
drawerVisible.value = true
|
||||
return
|
||||
}
|
||||
if (!form.id) {
|
||||
warningMessage('请选择菜单！');
|
||||
return;
|
||||
warningMessage('请选择菜单！')
|
||||
return
|
||||
}
|
||||
drawerVisible.value = true;
|
||||
};
|
||||
drawerVisible.value = true
|
||||
}
|
||||
const handleDrawerClose = () => {
|
||||
drawerVisible.value = false;
|
||||
};
|
||||
drawerVisible.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除菜单
|
||||
*/
|
||||
const handleDeleteMenu = () => {
|
||||
if (!form.id) {
|
||||
warningMessage('请选择菜单！');
|
||||
return;
|
||||
warningMessage('请选择菜单！')
|
||||
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('请选择菜单！');
|
||||
return;
|
||||
warningMessage('请选择菜单！')
|
||||
return
|
||||
}
|
||||
const parentList = treeSelectNode.value?.parent.childNodes || [];
|
||||
const index = parentList.findIndex((i) => i.data.id === form.id);
|
||||
const record = parentList.find((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)
|
||||
|
||||
if (type === 'up') {
|
||||
if (index === 0) return;
|
||||
parentList.splice(index - 1, 0, record as any);
|
||||
parentList.splice(index + 1, 1);
|
||||
if (index === 0) return
|
||||
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);
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user