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

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

@@ -9,8 +9,8 @@
from rest_framework import serializers from rest_framework import serializers
from rest_framework.decorators import action 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.serializers import CustomModelSerializer
from dvadmin.utils.viewset import CustomModelViewSet from dvadmin.utils.viewset import CustomModelViewSet
@@ -84,50 +84,6 @@ class MenuViewSet(CustomModelViewSet):
search_fields = ['name', 'status'] search_fields = ['name', 'status']
filter_fields = ['parent', 'name', 'status', 'is_link', 'visible', 'cache', 'is_catalog'] 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): def list(self, request):
"""懒加载""" """懒加载"""
request.query_params._mutable = True request.query_params._mutable = True
@@ -150,3 +106,66 @@ class MenuViewSet(CustomModelViewSet):
serializer = MenuSerializer(queryset, many=True, request=request) serializer = MenuSerializer(queryset, many=True, request=request)
data = serializer.data data = serializer.data
return SuccessResponse(data=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="下移成功")

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

@@ -1,65 +1,82 @@
import { request } from '/@/utils/service'; import {request} from '/@/utils/service';
import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud'; import {UserPageQuery, AddReq, DelReq, EditReq, InfoReq} from '@fast-crud/fast-crud';
export const apiPrefix = '/api/system/menu/'; export const apiPrefix = '/api/system/menu/';
export function GetList(query: UserPageQuery) { export function GetList(query: UserPageQuery) {
return request({ return request({
url: apiPrefix, url: apiPrefix,
method: 'get', method: 'get',
params: query, params: query,
}); });
} }
export function GetObj(id: InfoReq) { export function GetObj(id: InfoReq) {
return request({ return request({
url: apiPrefix + id + '/', url: apiPrefix + id + '/',
method: 'get', method: 'get',
}); });
} }
export function AddObj(obj: AddReq) { export function AddObj(obj: AddReq) {
return request({ return request({
url: apiPrefix, url: apiPrefix,
method: 'post', method: 'post',
data: obj, data: obj,
}); });
} }
export function UpdateObj(obj: EditReq) { export function UpdateObj(obj: EditReq) {
return request({ return request({
url: apiPrefix + obj.id + '/', url: apiPrefix + obj.id + '/',
method: 'put', method: 'put',
data: obj, data: obj,
}); });
} }
export function DelObj(obj: DelReq) { export function DelObj(obj: DelReq) {
return request({ return request({
url: apiPrefix + obj.id + '/', url: apiPrefix + obj.id + '/',
method: 'delete', method: 'delete',
}); });
} }
export function GetAllMenu(query: UserPageQuery) { export function GetAllMenu(query: UserPageQuery) {
return request({ return request({
url: apiPrefix + 'get_all_menu/', url: apiPrefix + 'get_all_menu/',
method: 'get', method: 'get',
params: query, params: query,
}); });
} }
export function lazyLoadMenu(query: UserPageQuery) { export function lazyLoadMenu(query: UserPageQuery) {
return request({ return request({
url: apiPrefix, url: apiPrefix,
method: 'get', method: 'get',
params: query, params: query,
}); });
} }
export function dragMenu(obj: AddReq) { export function dragMenu(obj: AddReq) {
return request({ return request({
url: apiPrefix + 'drag_menu/', url: apiPrefix + 'drag_menu/',
method: 'post', method: 'post',
data: obj, 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,
});
} }

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

@@ -1,153 +1,155 @@
<template> <template>
<fs-page> <fs-page>
<el-row class="menu-el-row"> <el-row class="menu-el-row">
<el-col :span="6"> <el-col :span="6">
<div class="menu-box menu-left-box"> <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="menu-left-tree">
<div class="mlt-head"> <div class="mlt-head">
<el-icon size="16" color="#606266" class="mlt-head-icon"> <el-icon size="16" color="#606266" class="mlt-head-icon">
<Menu /> <Menu/>
</el-icon> </el-icon>
菜单列表 菜单列表
<el-tooltip effect="dark" placement="right" <el-tooltip effect="dark" placement="right"
content="1.红色菜单代表状态禁用; 2.添加菜单，如果是目录，组件地址为空即可; 3.添加根节点菜单，父级ID为空即可; 4.支持拖拽菜单;"> content="1.红色菜单代表状态禁用; 2.添加菜单，如果是目录，组件地址为空即可; 3.添加根节点菜单，父级ID为空即可; 4.支持拖拽菜单;">
<el-icon size="16" color="var(--el-color-primary)" class="mlt-tooltip"> <el-icon size="16" color="var(--el-color-primary)" class="mlt-tooltip">
<QuestionFilled /> <QuestionFilled/>
</el-icon> </el-icon>
</el-tooltip> </el-tooltip>
</div> </div>
<el-tree ref="treeRef" :data="data" :props="defaultTreeProps" :filter-node-method="filterNode" <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"
default-expand-all> highlight-current
<template #default="{ node, data }"> default-expand-all>
<element-tree-line :node="node" :showLabelLine="false" :indent="32"> <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"> <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 }} &nbsp;{{ node.label }}
</span> </span>
<span v-else class="text-center font-black text-red-700 font-normal"> <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> </span>
</element-tree-line> </element-tree-line>
</template> </template>
</el-tree> </el-tree>
</div> </div>
<div class="menu-left-tags"> <div class="menu-left-tags">
<el-tooltip effect="dark" content="新增"> <el-tooltip effect="dark" content="新增">
<el-icon size="16" @click="handleUpdateMenu('create')" class="mlt-icon"> <el-icon size="16" @click="handleUpdateMenu('create')" class="mlt-icon">
<Plus /> <Plus/>
</el-icon> </el-icon>
</el-tooltip> </el-tooltip>
<el-tooltip effect="dark" content="编辑"> <el-tooltip effect="dark" content="编辑">
<el-icon size="16" @click="handleUpdateMenu('update')" class="mlt-icon"> <el-icon size="16" @click="handleUpdateMenu('update')" class="mlt-icon">
<Edit /> <Edit/>
</el-icon> </el-icon>
</el-tooltip> </el-tooltip>
<el-tooltip effect="dark" content="上移"> <el-tooltip effect="dark" content="上移">
<el-icon size="16" @click="handleSort('up')" class="mlt-icon"> <el-icon size="16" @click="handleSort('up')" class="mlt-icon">
<Top /> <Top/>
</el-icon> </el-icon>
</el-tooltip> </el-tooltip>
<el-tooltip effect="dark" content="下移"> <el-tooltip effect="dark" content="下移">
<el-icon size="16" @click="handleSort('down')" class="mlt-icon"> <el-icon size="16" @click="handleSort('down')" class="mlt-icon">
<Bottom /> <Bottom/>
</el-icon> </el-icon>
</el-tooltip> </el-tooltip>
<el-tooltip effect="dark" content="删除"> <el-tooltip effect="dark" content="删除">
<el-icon size="16" @click="handleDeleteMenu()" class="mlt-icon"> <el-icon size="16" @click="handleDeleteMenu()" class="mlt-icon">
<Delete /> <Delete/>
</el-icon> </el-icon>
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<div class="menu-box menu-right-box"> <div class="menu-box menu-right-box">
<menuButton :select-menu="form" /> <menuButton :select-menu="form"/>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-drawer v-model="drawerVisible" title="菜单配置" direction="rtl" size="500px" :close-on-click-modal="false" <el-drawer v-model="drawerVisible" title="菜单配置" direction="rtl" size="500px" :close-on-click-modal="false"
:before-close="handleDrawerClose"> :before-close="handleDrawerClose">
<div class="menu-box menu-drawer-box"> <div class="menu-box menu-drawer-box">
<div class="mcb-alert"> <div class="mcb-alert">
1.红色菜单代表状态禁用;<br /> 1.红色菜单代表状态禁用;<br/>
2.添加菜单，如果是目录，组件地址为空即可;<br /> 2.添加菜单，如果是目录，组件地址为空即可;<br/>
3.添加根节点菜单，父级ID为空即可;<br /> 3.添加根节点菜单，父级ID为空即可;<br/>
4.支持拖拽菜单; 4.支持拖拽菜单;
</div> </div>
<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right"> <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
<el-form-item label="菜单ID" prop="id"> <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>
<el-form-item label="父级ID" prop="parent"> <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>
<el-form-item required label="菜单名称" prop="name"> <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>
<el-form-item label="组件地址" prop="component"> <el-form-item label="组件地址" prop="component">
<el-autocomplete class="w-full" v-model="form.component" :fetch-suggestions="querySearch" <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"
</el-form-item> placeholder="输入组件地址"/>
<el-form-item required label="Url" prop="web_path"> </el-form-item>
<el-input v-model="form.web_path" /> <el-form-item required label="Url" prop="web_path">
</el-form-item> <el-input v-model="form.web_path"/>
<el-form-item label="排序" prop="sort"> </el-form-item>
<el-input-number v-model="form.sort" controls-position="right" /> <el-form-item label="排序" prop="sort">
</el-form-item> <el-input-number v-model="form.sort" controls-position="right"/>
<el-form-item label="状态"> </el-form-item>
<el-radio-group v-model="form.status"> <el-form-item label="状态">
<el-radio :label="true">启用</el-radio> <el-radio-group v-model="form.status">
<el-radio :label="false">禁用</el-radio> <el-radio :label="true">启用</el-radio>
</el-radio-group> <el-radio :label="false">禁用</el-radio>
</el-form-item> </el-radio-group>
<el-form-item label="侧边可见"> </el-form-item>
<el-radio-group v-model="form.visible"> <el-form-item label="侧边可见">
<el-radio :label="true">启用</el-radio> <el-radio-group v-model="form.visible">
<el-radio :label="false">禁用</el-radio> <el-radio :label="true">启用</el-radio>
</el-radio-group> <el-radio :label="false">禁用</el-radio>
</el-form-item> </el-radio-group>
<el-form-item label="缓存"> </el-form-item>
<el-radio-group v-model="form.cache"> <el-form-item label="缓存">
<el-radio :label="true">启用</el-radio> <el-radio-group v-model="form.cache">
<el-radio :label="false">禁用</el-radio> <el-radio :label="true">启用</el-radio>
</el-radio-group> <el-radio :label="false">禁用</el-radio>
</el-form-item> </el-radio-group>
<el-form-item label="图标" prop="icon"> </el-form-item>
<IconSelector clearable v-model="form.icon" /> <el-form-item label="图标" prop="icon">
</el-form-item> <IconSelector clearable v-model="form.icon"/>
</el-form> </el-form-item>
<el-divider></el-divider> </el-form>
<div class="menus-btns"> <el-divider></el-divider>
<el-button @click="saveMenu()" type="primary">保存</el-button> <div class="menus-btns">
<!-- <el-button @click="newMenu()" type="primary" round :disabled="!form.id">新建</el-button> <el-button @click="saveMenu()" type="primary">保存</el-button>
<el-button @click="addChildMenu()" type="primary" round :disabled="!form.id">添加子级 <!-- <el-button @click="newMenu()" type="primary" round :disabled="!form.id">新建</el-button>
</el-button> --> <el-button @click="addChildMenu()" type="primary" round :disabled="!form.id">添加子级
<el-button @click="handleDrawerClose()">取消</el-button> </el-button> -->
</div> <el-button @click="handleDrawerClose()">取消</el-button>
</div> </div>
</el-drawer> </div>
</fs-page> </el-drawer>
</fs-page>
</template> </template>
<script lang="ts" setup name="menuPages"> <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 XEUtils from 'xe-utils';
import { ElForm, ElTree, FormRules, ElMessageBox } from 'element-plus'; 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 * as api from './api';
import { Search } from '@element-plus/icons-vue'; import {Search} from '@element-plus/icons-vue';
import { errorMessage, successMessage, warningMessage } from '../../../utils/message'; import {errorMessage, successMessage, warningMessage} from '../../../utils/message';
import { FormTypes, TreeTypes, APIResponseData, ComponentFileItem } from './types'; import {FormTypes, TreeTypes, APIResponseData, ComponentFileItem} from './types';
import type Node from 'element-plus/es/components/tree/src/model/node'; import type Node from 'element-plus/es/components/tree/src/model/node';
const menuButton = defineAsyncComponent(() => import('./components/menuButton/index.vue')); const menuButton = defineAsyncComponent(() => import('./components/menuButton/index.vue'));
@@ -162,55 +164,55 @@ let drawerVisible = ref(false)
let treeSelectNode = ref<Node | null>(null) let treeSelectNode = ref<Node | null>(null)
watch(filterText, (val) => { watch(filterText, (val) => {
treeRef.value!.filter(val); treeRef.value!.filter(val);
}); });
const defaultTreeProps: any = { const defaultTreeProps: any = {
children: 'children', children: 'children',
label: 'name', label: 'name',
icon: 'icon', icon: 'icon',
isLeaf: (data: TreeTypes[], node: Node) => { isLeaf: (data: TreeTypes[], node: Node) => {
if (node.data.is_catalog) { if (node.data.is_catalog) {
return false; return false;
} else { } else {
return true; return true;
} }
}, },
}; };
const validateWebPath = (rule: string, value: string, callback: Function) => { const validateWebPath = (rule: string, value: string, callback: Function) => {
let pattern = /^\/.*?/; let pattern = /^\/.*?/;
if (!pattern.test(value)) { if (!pattern.test(value)) {
callback(new Error('请输入正确的地址')); callback(new Error('请输入正确的地址'));
} else { } else {
callback(); callback();
} }
}; };
const filterNode = (value: string, data: any) => { const filterNode = (value: string, data: any) => {
if (!value) return true; if (!value) return true;
return toRaw(data).name.indexOf(value) !== -1; return toRaw(data).name.indexOf(value) !== -1;
}; };
// 懒加载 // 懒加载
const loadNode = (node: Node, resolve: (data: TreeTypes[]) => void) => { const loadNode = (node: Node, resolve: (data: TreeTypes[]) => void) => {
// @ts-ignore // @ts-ignore
if (node.level !== 0) { if (node.level !== 0) {
// @ts-ignore // @ts-ignore
api.lazyLoadMenu({ parent: node.data.id }).then((res: APIResponseData) => { api.lazyLoadMenu({parent: node.data.id}).then((res: APIResponseData) => {
resolve(res.data); resolve(res.data);
}); });
} }
}; };
const nodeDrop = (draggingNode: Node, dropNode: Node) => { const nodeDrop = (draggingNode: Node, dropNode: Node) => {
// @ts-ignore // @ts-ignore
if (!dropNode.isLeaf) { if (!dropNode.isLeaf) {
// @ts-ignore // @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); successMessage(res.msg as string);
}); });
} }
}; };
let data = ref([]); let data = ref([]);
@@ -218,337 +220,341 @@ let data = ref([]);
let isAddNewMenu = ref(false); // 判断当前是新增菜单，还是更新保存当前菜单 let isAddNewMenu = ref(false); // 判断当前是新增菜单，还是更新保存当前菜单
let form: FormTypes<any> = reactive({ let form: FormTypes<any> = reactive({
id: '', id: '',
parent: '', parent: '',
name: '', name: '',
component: '', component: '',
web_path: '', web_path: '',
sort: 0, sort: 0,
status: true, status: true,
is_catalog: false, is_catalog: false,
permission: '', permission: '',
icon: '', icon: '',
visible: true, visible: true,
cache: true, cache: true,
}); });
const rules = reactive<FormRules>({ const rules = reactive<FormRules>({
// @ts-ignore // @ts-ignore
web_path: [{ validator: validateWebPath, trigger: 'blur' }], web_path: [{validator: validateWebPath, trigger: 'blur'}],
}); });
const formRef = ref<InstanceType<typeof ElForm>>(); const formRef = ref<InstanceType<typeof ElForm>>();
const querySearch = (queryString: string, cb: any) => { const querySearch = (queryString: string, cb: any) => {
const files: any = import.meta.glob('@views/**/*.vue'); const files: any = import.meta.glob('@views/**/*.vue');
let fileLists: Array<any> = []; let fileLists: Array<any> = [];
Object.keys(files).forEach((queryString: string) => { Object.keys(files).forEach((queryString: string) => {
fileLists.push({ fileLists.push({
label: queryString.replace(/(\.\/|\.vue)/g, ''), label: queryString.replace(/(\.\/|\.vue)/g, ''),
value: queryString.replace(/(\.\/|\.vue)/g, ''), value: queryString.replace(/(\.\/|\.vue)/g, ''),
}); });
}); });
const results = queryString ? fileLists.filter(createFilter(queryString)) : fileLists; const results = queryString ? fileLists.filter(createFilter(queryString)) : fileLists;
// 统一去掉/src/views/前缀 // 统一去掉/src/views/前缀
results.forEach((val) => { results.forEach((val) => {
val.label = val.label.replace('/src/views/', ''); val.label = val.label.replace('/src/views/', '');
val.value = val.value.replace('/src/views/', ''); val.value = val.value.replace('/src/views/', '');
}); });
cb(results); cb(results);
}; };
const createFilter = (queryString: string) => { const createFilter = (queryString: string) => {
return (file: ComponentFileItem) => { return (file: ComponentFileItem) => {
return file.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1; return file.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
}; };
}; };
const getData = () => { const getData = () => {
api.GetList({}).then((ret: APIResponseData) => { api.GetList({}).then((ret: APIResponseData) => {
const responseData = ret.data; const responseData = ret.data;
const result = XEUtils.toArrayTree(responseData, { const result = XEUtils.toArrayTree(responseData, {
parentKey: 'parent', parentKey: 'parent',
children: 'children', children: 'children',
strict: true, strict: true,
}); });
data.value = result; data.value = result;
}); });
}; };
const saveMenu = () => { const saveMenu = () => {
formRef.value?.validate((valid, fields) => { formRef.value?.validate((valid, fields) => {
if (valid) { if (valid) {
if (!isAddNewMenu.value) { if (!isAddNewMenu.value) {
// 保存菜单 // 保存菜单
form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false); form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
api.UpdateObj(form).then((res: APIResponseData) => { api.UpdateObj(form).then((res: APIResponseData) => {
successMessage(res.msg as string); successMessage(res.msg as string);
getData(); getData();
handleDrawerClose() handleDrawerClose()
}); });
} else { } else {
// 新增菜单 // 新增菜单
form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false); form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
api.AddObj(form).then((res: APIResponseData) => { api.AddObj(form).then((res: APIResponseData) => {
successMessage(res.msg as string); successMessage(res.msg as string);
getData(); getData();
handleDrawerClose() handleDrawerClose()
}); });
} }
} else { } else {
errorMessage('请填写检查表单'); errorMessage('请填写检查表单');
} }
}); });
}; };
const newMenu = () => { const newMenu = () => {
formRef.value?.resetFields(); formRef.value?.resetFields();
isAddNewMenu.value = true; isAddNewMenu.value = true;
handleDrawerClose() handleDrawerClose()
}; };
const addChildMenu = () => { const addChildMenu = () => {
let parentId = form.id; let parentId = form.id;
formRef.value?.resetFields(); formRef.value?.resetFields();
form.parent = parentId; form.parent = parentId;
isAddNewMenu.value = true; isAddNewMenu.value = true;
handleDrawerClose(); handleDrawerClose();
}; };
const handleNodeClick = (record: any, node: Node) => { const handleNodeClick = (record: any, node: Node) => {
treeSelectNode.value = node; treeSelectNode.value = node;
Object.keys(toRaw(data)).forEach((key: string) => { Object.keys(toRaw(data)).forEach((key: string) => {
form[key] = record[key]; form[key] = record[key];
}); });
delete form.component_name; delete form.component_name;
form.id = record.id; form.id = record.id;
isAddNewMenu.value = false; isAddNewMenu.value = false;
}; };
/** /**
* 点击左侧编辑按钮 * 点击左侧编辑按钮
*/ */
const handleUpdateMenu = (type: string) => { const handleUpdateMenu = (type: string) => {
if (type === 'create') { if (type === 'create') {
drawerVisible.value = true drawerVisible.value = true
return return
} }
if (!form.id) { if (!form.id) {
warningMessage('请选择菜单！') warningMessage('请选择菜单！')
return return
} }
drawerVisible.value = true drawerVisible.value = true
} }
const handleDrawerClose = () => { const handleDrawerClose = () => {
drawerVisible.value = false drawerVisible.value = false
} }
/** /**
* 删除菜单 * 删除菜单
*/ */
const handleDeleteMenu = () => { const handleDeleteMenu = () => {
if (!form.id) { if (!form.id) {
warningMessage('请选择菜单！') warningMessage('请选择菜单！')
return return
} }
ElMessageBox.confirm( ElMessageBox.confirm(
'您确认删除该菜单项吗?', '您确认删除该菜单项吗?',
'温馨提示', '温馨提示',
{ {
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
} }
).then(() => { ).then(() => {
api.DelObj(form).then((res: APIResponseData) => { api.DelObj(form).then((res: APIResponseData) => {
successMessage(res.msg as string); successMessage(res.msg as string);
getData(); getData();
handleDrawerClose(); handleDrawerClose();
}); });
}) })
}; };
/** /**
* 移动操作 * 移动操作
*/ */
const handleSort = (type: string) => { const handleSort = (type: string) => {
if (!form.id && treeSelectNode.value) { if (!form.id && treeSelectNode.value) {
warningMessage('请选择菜单！') warningMessage('请选择菜单！')
return return
} }
const parentList = treeSelectNode.value?.parent.childNodes || []; 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 (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) }
parentList.splice(index, 1) if (type === 'down') {
} api.moveDown({'menu_id': form.id}).then((res: APIResponseData) => {
getData();
successMessage(res.msg as string);
});
}
} }
// 页面打开后获取列表数据 // 页面打开后获取列表数据
onMounted(() => { onMounted(() => {
getData(); getData();
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.menu-el-row { .menu-el-row {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
.el-col { .el-col {
height: 100%; height: 100%;
padding: 10px 0; padding: 10px 0;
box-sizing: border-box; box-sizing: border-box;
} }
} }
.menu-box { .menu-box {
height: 100%; height: 100%;
padding: 10px; padding: 10px;
background-color: #fff; background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
} }
.menu-left-box { .menu-left-box {
position: relative; position: relative;
border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0;
margin-right: 10px; margin-right: 10px;
.mlt-head { .mlt-head {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: -8px; margin-left: -8px;
color: #606266; color: #606266;
font-weight: 600; font-weight: 600;
.mlt-head-icon { .mlt-head-icon {
margin-right: 8px; margin-right: 8px;
position: relative; position: relative;
top: -1px; top: -1px;
} }
.mlt-tooltip { .mlt-tooltip {
margin-left: 5px; margin-left: 5px;
position: relative; position: relative;
top: -1px; top: -1px;
} }
} }
.menu-left-tags { .menu-left-tags {
height: 40px; height: 40px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
padding: 0 20px; padding: 0 20px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
box-sizing: border-box; box-sizing: border-box;
.mlt-icon { .mlt-icon {
cursor: pointer; cursor: pointer;
color: var(--el-color-primary); color: var(--el-color-primary);
} }
} }
} }
.menu-right-box { .menu-right-box {
border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px;
} }
.menus-btns { .menus-btns {
padding-bottom: 10px; padding-bottom: 10px;
box-sizing: border-box; box-sizing: border-box;
} }
.menu-drawer-box { .menu-drawer-box {
border-radius: 8px; border-radius: 8px;
margin: 0 10px; margin: 0 10px;
overflow-y: auto; overflow-y: auto;
.mcb-alert { .mcb-alert {
color: #fff; color: #fff;
line-height: 24px; line-height: 24px;
padding: 8px 16px; padding: 8px 16px;
margin-bottom: 20px; margin-bottom: 20px;
border-radius: 4px; border-radius: 4px;
background-color: var(--el-color-primary); background-color: var(--el-color-primary);
} }
} }
.font-normal { .font-normal {
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
} }
</style> </style>
<style lang="scss"> <style lang="scss">
.menu-left-tree { .menu-left-tree {
height: calc(100% - 60px); height: calc(100% - 60px);
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
.el-tree-node__content { .el-tree-node__content {
height: 32px !important; height: 32px !important;
} }
.el-tree .el-tree-node__expand-icon svg { .el-tree .el-tree-node__expand-icon svg {
display: none !important; display: none !important;
height: 0; height: 0;
width: 0; width: 0;
} }
.el-tree-node__expand-icon { .el-tree-node__expand-icon {
font-size: 16px; font-size: 16px;
} }
.el-tree-node__content>.el-tree-node__expand-icon { .el-tree-node__content > .el-tree-node__expand-icon {
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
margin-right: 5px; margin-right: 5px;
margin-left: 24px; margin-left: 24px;
} }
.el-tree .el-tree-node__expand-icon.expanded { .el-tree .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
} }
.el-tree .el-tree-node__expand-icon.is-leaf { .el-tree .el-tree-node__expand-icon.is-leaf {
margin-left: 0 margin-left: 0
} }
.el-tree .el-tree-node__expand-icon:before { .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: ''; content: '';
display: block; display: block;
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
.el-tree .el-tree-node__expand-icon.expanded:before { .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: ''; content: '';
display: block; display: block;
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
.el-tree .is-leaf.el-tree-node__expand-icon::before { .el-tree .is-leaf.el-tree-node__expand-icon::before {
display: block; display: block;
background: none !important; background: none !important;
content: ''; content: '';
width: 18px; width: 18px;
height: 18px; height: 18px;
border: none; border: none;
} }
} }
</style> </style>