refactor: ♻️ 菜单管理重构完成

backend/dvadmin/system/views/menu.py

@@ -112,6 +112,18 @@ class MenuViewSet(CustomModelViewSet):
         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']
+        print(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
@@ -125,11 +137,11 @@ class MenuViewSet(CustomModelViewSet):
             del params['limit']
         if params:
             if parent:
-                queryset = self.queryset.filter(status=1, parent=parent)
+                queryset = self.queryset.filter(parent=parent)
             else:
-                queryset = self.queryset.filter(status=1)
+                queryset = self.queryset.filter()
         else:
-            queryset = self.queryset.filter(status=1, parent__isnull=True)
+            queryset = self.queryset.filter(parent__isnull=True)
         queryset = self.filter_queryset(queryset)
         serializer = MenuSerializer(queryset, many=True, request=request)
         data = serializer.data

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

@@ -9,13 +9,6 @@ export function GetList(query: PageQuery) {
 		params: query,
 	});
 }
-export function GetAllMenu(query: PageQuery) {
-	return request({
-		url: apiPrefix + 'get_all_menu/',
-		method: 'get',
-		params: query,
-	});
-}
 
 export function GetObj(id: InfoReq) {
 	return request({
@@ -46,3 +39,27 @@ export function DelObj(obj: DelReq) {
 		method: 'delete',
 	});
 }
+
+export function GetAllMenu(query: PageQuery) {
+	return request({
+		url: apiPrefix + 'get_all_menu/',
+		method: 'get',
+		params: query,
+	});
+}
+
+export function lazyLoadMenu(query: PageQuery) {
+	return request({
+		url: apiPrefix,
+		method: 'get',
+		params: query,
+	});
+}
+
+export function dragMenu(obj: AddReq) {
+	return request({
+		url: apiPrefix + 'drag_menu/',
+		method: 'post',
+		data: obj,
+	});
+}

web/src/views/system/menu/components/menuButton/curd.tsx

@@ -1,6 +1,6 @@
 import { CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose } from '@fast-crud/fast-crud';
 import _ from 'lodash-es';
-import * as api from "./api";
+import * as api from './api';
 import { dictionary } from '/@/utils/dictionary';
 
 interface CreateCrudOptionsTypes {
@@ -9,13 +9,9 @@ interface CreateCrudOptionsTypes {
 
 import { request } from '/@/utils/service';
 //此处为crudOptions配置
-export const createCrudOptions = function ({
+export const createCrudOptions = function ({ crudExpose, selectOptions }: { crudExpose: CrudExpose; selectOptions: any }): CreateCrudOptionsTypes {
-                                               crudExpose,
-                                               selectOptions
-                                           }: { crudExpose: CrudExpose, selectOptions: any }): CreateCrudOptionsTypes {
-
 	const pageRequest = async (query: any) => {
-        return await api.GetList({ menu: selectOptions.value.id});
+		return await api.GetList({ menu: selectOptions.value.id } as any);
 	};
 	const editRequest = async ({ form, row }: EditReq) => {
 		form.id = row.id;
@@ -29,6 +25,24 @@ export const createCrudOptions = function ({
 	};
 	return {
 		crudOptions: {
+			rowHandle: {
+				//固定右侧
+				fixed: 'right',
+				width: 200,
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+					},
+				},
+			},
 			request: {
 				pageRequest,
 				addRequest,
@@ -48,7 +62,7 @@ export const createCrudOptions = function ({
 					title: '序号',
 					form: { show: false },
 					column: {
-                        //type: 'index',
+						type: 'index',
 						align: 'center',
 						width: '70px',
 						columnSetDisabled: true, //禁止在列设置中选择
@@ -89,15 +103,13 @@ export const createCrudOptions = function ({
 								clearable: true,
 								allowCreate: true,
 								filterable: true,
-
+							},
-                            }
 						},
 						helper: {
 							render(h) {
-                                return (< el-alert title="手动输入" type="warning" description="页面中按钮的名称或者自定义一个名称"/>
+								return <el-alert title="手动输入" type="warning" description="页面中按钮的名称或者自定义一个名称" />;
-                                )
+							},
-                            }
+						},
-                        }
 					},
 				},
 				value: {
@@ -113,12 +125,10 @@ export const createCrudOptions = function ({
 						placeholder: '输入权限标识',
 						helper: {
 							render(h) {
-                                return (< el-alert title="唯一值" type="warning" description="用于判断前端按钮权限或接口权限"/>
+								return <el-alert title="唯一值" type="warning" description="用于判断前端按钮权限或接口权限" />;
-                                )
+							},
-                            }
+						},
-                        }
 					},
-
 				},
 				method: {
 					title: '请求方式',
@@ -133,12 +143,12 @@ export const createCrudOptions = function ({
 							{ label: 'GET', value: 0 },
 							{ label: 'POST', value: 1, color: 'success' },
 							{ label: 'PUT', value: 2, color: 'warning' },
-                            {label: 'DELETE', value: 3, color: 'danger'}
+							{ label: 'DELETE', value: 3, color: 'danger' },
-                        ]
+						],
 					}),
 					form: {
 						rules: [{ required: true, message: '必填项' }],
-                    }
+					},
 				},
 				api: {
 					title: '接口地址',
@@ -147,17 +157,17 @@ export const createCrudOptions = function ({
 					dict: dict({
 						getData() {
 							return request({ url: '/swagger.json' }).then((res: any) => {
-                                const ret = Object.keys(res.paths)
+								const ret = Object.keys(res.paths);
-                                const data = []
+								const data = [];
 								for (const item of ret) {
-                                    const obj: any = {}
+									const obj: any = {};
-                                    obj.label = item
+									obj.label = item;
-                                    obj.value = item
+									obj.value = item;
-                                    data.push(obj)
+									data.push(obj);
-                                }
-                                return data
-                            })
 								}
+								return data;
+							});
+						},
 					}),
 					column: {
 						minWidth: 200,
@@ -169,17 +179,16 @@ export const createCrudOptions = function ({
 							props: {
 								allowCreate: true,
 								filterable: true,
-                              clearable: true
+								clearable: true,
-                          }
+							},
 						},
 						helper: {
 							render(h) {
-                                return (< el-alert title="请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/" type="warning" />
+								return <el-alert title="请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/" type="warning" />;
-                                )
+							},
-                            }
+						},
-                        }
+					},
 				},
-                }
 			},
 		},
 	};

web/src/views/system/menu/components/menuButton/index.vue

@@ -1,36 +1,51 @@
 <template>
-  <el-drawer
+	<el-drawer size="70%" v-model="menuButtonDrawer" direction="rtl" destroy-on-close :before-close="handleClose">
-      size="70%"
-      v-model="drawer"
-      direction="rtl"
-      destroy-on-close
-      :before-close="handleClose"
-  >
 		<template #header>
-      <div>当前菜单:
+			<div>
+				当前菜单:
 				<el-tag>{{ selectOptions.name }}</el-tag>
 			</div>
 		</template>
 		<div>
-      <fs-page style="margin-top: 60px;">
+			<fs-page style="margin-top: 60px">
-        <fs-crud ref="crudRef" v-bind="crudBinding">
+				<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
-        </fs-crud>
 			</fs-page>
-
 		</div>
 	</el-drawer>
 </template>
 
 <script lang="ts" setup>
-import {ref, onMounted} from 'vue';
+import { ref, defineProps, defineEmits, watch, toRaw } from 'vue';
 import { useExpose, useCrud } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './curd';
-import {ElMessageBox} from "element-plus";
+import { ElMessageBox } from 'element-plus';
-import * as api from './api'
 // 弹窗是否显示
-const drawer = ref(false)
+let menuButtonDrawer = ref(false);
 // 当前选择的菜单信息
-const selectOptions:any = ref({name:null})
+let selectOptions: any = ref({ name: null });
+const props = defineProps<{
+	drawerShow: {
+		type: boolean;
+		default: false;
+	};
+	selectMenu: object;
+}>();
+const emit = defineEmits<{
+	(e: 'drawer-close', value: boolean): void;
+}>();
+
+// 侦听弹窗变量
+watch(
+	() => props.drawerShow,
+	(newVal) => {
+		menuButtonDrawer.value = newVal ? true : false;
+	}
+);
+
+watch(props.selectMenu, (val) => {
+	selectOptions.value = val;
+	doRefresh();
+});
 
 //抽屉关闭确认
 const handleClose = (done: () => void) => {
@@ -40,30 +55,29 @@ const handleClose = (done: () => void) => {
 		type: 'warning',
 	})
 		.then(() => {
-        done()
+			done();
+			// @ts-ignore
+			emit('drawer-close', menuButtonDrawer);
 		})
 		.catch(() => {
 			// catch error
-      })
+		});
-}
+};
 // crud组件的ref
 const crudRef = ref();
 // crud 配置的ref
 const crudBinding = ref();
 // 暴露的方法
 const { crudExpose } = useExpose({ crudRef, crudBinding });
+
+const { doRefresh } = crudExpose;
 // 你的crud配置
 const { crudOptions } = createCrudOptions({ crudExpose, selectOptions });
 // 初始化crud配置
+// @ts-ignore
 const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
 // 你可以调用此方法，重新初始化crud配置
 // resetCrudOptions(options)
-const initGet = ()=>{
-  api.GetList({menu:selectOptions.value.id}).then((res:any)=>{
-    const {data} = res
-    crudExpose.crudBinding.value.data=data
-  })
-}
 
-defineExpose({drawer, selectOptions,initGet})
+defineExpose({ menuButtonDrawer, selectOptions });
 </script>

web/src/views/system/menu/index.vue

@@ -16,11 +16,19 @@
 						:data="data"
 						:props="treeProps"
 						:filter-node-method="filterNode"
+						:load="loadNode"
+						:allow-drag="allowDrag"
+						:allow-drop="allowDrop"
+						@node-drop="nodeDrop"
+						lazy
+						icon="ArrowRightBold"
+						:indent="12"
+						draggable
 						@node-click="handleNodeClick"
 					>
 						<template #default="{ node, data }">
-							<span v-if="data.status" class="text-center font-black text-xl">{{ node.label }}</span>
+							<span v-if="data.status" class="text-center font-black text-xl"><SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }}</span>
-							<span v-else class="text-center font-black text-xl text-red-700">{{ node.label }}</span>
+							<span v-else class="text-center font-black text-xl text-red-700"><SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }}</span>
 						</template>
 					</el-tree>
 				</el-card>
@@ -28,6 +36,7 @@
 			<el-col :span="20" class="p-1">
 				<el-card :body-style="{ height: '100%' }">
 					<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
+						<el-alert :title="content" type="success" effect="dark" :closable="false" center />
 						<el-divider>
 							<strong>菜单配置</strong>
 						</el-divider>
@@ -36,7 +45,7 @@
 								<el-form-item label="菜单ID" prop="id"> <el-input v-model="form.id" disabled /> </el-form-item>
 							</el-col>
 							<el-col :span="10">
-								<el-form-item label="父级ID" prop="parent"> <el-input v-model="form.parent" disabled /> </el-form-item>
+								<el-form-item label="父级ID" prop="parent"> <el-input v-model="form.parent" /> </el-form-item>
 							</el-col>
 							<el-col :span="10">
 								<el-form-item required label="菜单名称" prop="name"> <el-input v-model="form.name" /> </el-form-item>
@@ -71,16 +80,13 @@
 								</el-form-item>
 							</el-col>
 							<el-col :span="20">
-								<el-form-item label="权限">
+								<el-form-item label="权限" class="flex flex-wrap w-full">
-									<el-checkbox-group v-model="form.permission">
+									<el-checkbox-group v-model="form.permission" :disabled="form.is_catalog" class="flex flex-wrap">
 										<el-checkbox v-model="form.permission">全选</el-checkbox>
-										<el-checkbox label="查询(Search)" />
+										<!-- TODO 选中没做 -->
-										<el-checkbox label="新增(Add)" />
+										<el-checkbox v-for="item in menuPermissonList" :checked="true" :label="`${item.name}(${item.value})`" />
-										<el-checkbox label="删除(Delete)" />
-										<el-checkbox label="编辑(Update)" />
-										<el-checkbox label="导入(Import)" />
-										<el-checkbox label="导出(Export)" />
 									</el-checkbox-group>
+									<el-button class="mx-2" @click="addPermission()">其他权限</el-button>
 								</el-form-item>
 							</el-col>
 							<el-col :span="20">
@@ -102,16 +108,15 @@
 				</el-card>
 			</el-col>
 		</el-row>
+		<menuButton :drawer-show="permissionDrawerVisible" @drawer-close="drawerClose()" :select-menu="form"></menuButton>
 	</fs-page>
 </template>
 
 <script lang="ts" setup>
 import * as api from './api';
-import { ElForm, ElTree, FormInstance, FormRules } from 'element-plus';
+import * as menuButoonApi from './components/menuButton/api';
-import type Node from 'element-plus/es/components/tree/src/model/node';
+import { ElForm, ElTree, FormRules } from 'element-plus';
-import { ref, onMounted, computed, watch, reactive, toRaw, defineAsyncComponent, nextTick, shallowRef } from 'vue';
+import { ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, nextTick, shallowRef } from 'vue';
-import { useExpose, useCrud } from '@fast-crud/fast-crud';
-import { createCrudOptions } from './crud';
 import XEUtils from 'xe-utils';
 import { errorMessage, successMessage } from '../../../utils/message';
 
@@ -121,21 +126,26 @@ interface Tree {
 	status: boolean;
 	children?: Tree[];
 }
+
 interface APIResponseData {
 	code?: number;
 	data: [];
 	msg?: string;
 }
+
 interface Form<T> {
 	[key: string]: T;
 }
+
 interface ComponentFileItem {
 	value: string;
 	label: string;
 }
 
 // 引入组件
+const menuButton = defineAsyncComponent(() => import('./components/menuButton/index.vue'));
 const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelector/index.vue'));
+const SvgIcon = defineAsyncComponent(() => import('/@/components/svgIcon/index.vue'));
 const placeholder = ref('请输入菜单名称');
 const filterText = ref('');
 const treeRef = ref<InstanceType<typeof ElTree>>();
@@ -143,6 +153,15 @@ const treeRef = ref<InstanceType<typeof ElTree>>();
 const treeProps = {
 	children: 'children',
 	label: 'name',
+	icon: 'icon',
+	isLeaf: (data: Tree[], node: Node) => {
+		// @ts-ignore
+		if (node.data.is_catalog) {
+			return false;
+		} else {
+			return true;
+		}
+	},
 };
 
 const validateWebPath = (rule: string, value: string, callback: Function) => {
@@ -163,17 +182,59 @@ const filterNode = (value: string, data: Tree) => {
 	return toRaw(data).name.indexOf(value) !== -1;
 };
 
+// 懒加载
+const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
+	// @ts-ignore
+	if (node.level !== 0) {
+		// @ts-ignore
+		api.lazyLoadMenu({ parent: node.data.id }).then((res: APIResponseData) => {
+			resolve(res.data);
+		});
+	}
+};
+
+// 判断是否可以拖动
+const allowDrag = (node: Node) => {
+	// @ts-ignore
+	if (node.data.is_catalog) {
+		return false;
+	} else {
+		return true;
+	}
+};
+
+// 判断是否可以被放置
+const allowDrop = (draggingNode: Node, dropNode: Node, type: string) => {
+	// @ts-ignore
+	if (!dropNode.isLeaf) {
+		return true;
+	}
+};
+
+const nodeDrop = (draggingNode: Node, dropNode: Node, dropType: string, event: any) => {
+	// @ts-ignore
+	if (!dropNode.isLeaf) {
+		// @ts-ignore
+		api.dragMenu({ menu_id: draggingNode.data.id, parent_id: dropNode.data.id }).then((res: APIResponseData) => {
+			successMessage(res.msg as string);
+		});
+	}
+};
+
 let data = ref([]);
 
 let isAddNewMenu = ref(false); // 判断当前是新增菜单，还是更新保存当前菜单
 
+const permissionDrawerVisible = ref(false);
+
 const content = `
 1.红色菜单代表状态禁用;
-2.添加菜单是，如果是目录，组件地址为空即可;
+2.添加菜单，如果是目录，组件地址为空即可;
-3.添加根节点菜单，父级ID为空即可
+3.添加根节点菜单，父级ID为空即可;
+4.支持拖拽菜单;
 `;
 
-let form: Form<string> = reactive({
+let form: Form<any> = reactive({
 	id: '',
 	parent: '',
 	name: '',
@@ -181,13 +242,17 @@ let form: Form<string> = reactive({
 	web_path: '',
 	sort: '',
 	status: '',
+	is_catalog: false,
 	permission: '',
 	icon: '',
 });
+
+let menuPermissonList = ref([]);
+
 const formRef = ref<InstanceType<typeof ElForm>>();
 
 const querySearch = (queryString: string, cb: any) => {
-	const files: any = import.meta.globEager('@views/**/*.vue');
+	const files: any = import.meta.glob('@views/**/*.vue');
 	let fileLists: Array<any> = [];
 	Object.keys(files).forEach((queryString: string) => {
 		fileLists.push({
@@ -196,6 +261,11 @@ const querySearch = (queryString: string, cb: any) => {
 		});
 	});
 	const results = queryString ? fileLists.filter(createFilter(queryString)) : fileLists;
+	// 统一去掉/src/views/前缀
+	results.forEach((val) => {
+		val.label = val.label.replace('/src/views/', '');
+		val.value = val.value.replace('/src/views/', '');
+	});
 	cb(results);
 };
 
@@ -211,7 +281,7 @@ const rules = reactive<FormRules>({
 });
 
 const getData = () => {
-	api.GetAllMenu({}).then((ret: APIResponseData) => {
+	api.GetList({}).then((ret: APIResponseData) => {
 		const responseData = ret.data;
 		const result = XEUtils.toArrayTree(responseData, {
 			parentKey: 'parent',
@@ -222,17 +292,26 @@ const getData = () => {
 	});
 };
 
+const getPermissions = (menu: object) => {
+	menuButoonApi.GetList(menu).then((res: APIResponseData) => {
+		menuPermissonList.value = res.data;
+	});
+};
+
 const saveMenu = () => {
 	formRef.value?.validate((valid, fields) => {
 		if (valid) {
 			if (!isAddNewMenu.value) {
 				// 保存菜单
+
+				form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
 				api.UpdateObj(form).then((res: APIResponseData) => {
 					successMessage(res.msg as string);
 					getData();
 				});
 			} else {
 				// 新增菜单
+				form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
 				api.AddObj(form).then((res: APIResponseData) => {
 					successMessage(res.msg as string);
 					getData();
@@ -243,22 +322,26 @@ const saveMenu = () => {
 		}
 	});
 };
+
 const newMenu = () => {
 	formRef.value?.resetFields();
 	isAddNewMenu.value = true;
 };
+
 const addChildMenu = () => {
 	let parentId = form.id;
 	formRef.value?.resetFields();
 	form.parent = parentId;
 	isAddNewMenu.value = true;
 };
+
 const addSameLevelMenu = () => {
 	let parentId = form.parent;
 	formRef.value?.resetFields();
 	form.parent = parentId;
 	isAddNewMenu.value = true;
 };
+
 const deleteMenu = () => {
 	api.DelObj(form).then((res: APIResponseData) => {
 		successMessage(res.msg as string);
@@ -270,8 +353,19 @@ const handleNodeClick = (data: any, node: any, prop: any) => {
 	Object.keys(toRaw(data)).forEach((key: string) => {
 		form[key] = data[key];
 	});
+	delete form.component_name;
 	form.id = data.id;
 	isAddNewMenu.value = false;
+
+	// 点击tree node时，加载对应的权限菜单
+	getPermissions({ menu: form.id });
+};
+
+const addPermission = () => {
+	!form.is_catalog ? (permissionDrawerVisible.value = true) : errorMessage('目录没有菜单权限');
+};
+const drawerClose = () => {
+	permissionDrawerVisible.value = false;
 };
 
 // 页面打开后获取列表数据
@@ -292,12 +386,4 @@ onMounted(() => {
 .el-card {
 	height: 100%;
 }
-.custom-tree-node {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	font-size: 14px;
-	padding-right: 8px;
-}
 </style>

web/src/views/system/user/crud.tsx

@@ -31,7 +31,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 			rowHandle: {
 				//固定右侧
 				fixed: 'right',
-				width: 300,
+				width: 200,
 				buttons: {
 					view: {
 						show: false,

web/src/views/system/user/index.vue

@@ -1,14 +1,14 @@
 <template>
 	<fs-page>
-		<el-row>
+		<el-row class="mx-2">
-			<el-col :span="4">
+			<el-col :span="4" class="p-1">
 				<el-card :body-style="{ height: '100%' }">
 					<el-input v-model="filterText" :placeholder="placeholder" />
 
 					<el-tree ref="treeRef" class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode" />
 				</el-card>
 			</el-col>
-			<el-col :span="20" :offset="0">
+			<el-col :span="20" :offset="0" class="p-1">
 				<el-card :body-style="{ height: '100%' }">
 					<fs-crud class="h-full w-full" ref="crudRef" v-bind="crudBinding"> </fs-crud>
 				</el-card>