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

功能变化: 菜单管理按钮配置

Browse Source
This commit is contained in:
猿小天
2023-02-08 17:30:56 +08:00
parent 507f40ae3d
commit 9b8766452c
7 changed files with 109 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
backend/dvadmin/system/views/role_menu_button_permission.py
View File

@@ -23,7 +23,7 @@ class RoleMenuButtonPermissionSerializer(CustomModelSerializer):
class Meta:
model = RoleMenuButtonPermission
fields = ['id', 'name', 'value', 'api', 'method']
fields = "__all__"
read_only_fields = ["id"]
@@ -34,7 +34,7 @@ class RoleMenuButtonPermissionInitSerializer(CustomModelSerializer):
class Meta:
model = RoleMenuButtonPermission
fields = ['id', 'name', 'value', 'api', 'method', 'menu']
fields = "__all__"
read_only_fields = ["id"]
class RoleMenuButtonPermissionCreateUpdateSerializer(CustomModelSerializer):

2
web/src/utils/service.ts
View File

@@ -33,7 +33,7 @@ function createService() {
// 根据 code 进行判断
if (code === undefined) {
// 如果没有 code 代表这不是项目后端开发的接口
errorCreate(`非标准返回：${dataAxios}， ${response.config.url}`);
errorCreate(`非标准返回：${dataAxios}， ${response.config.url}`,false);
return dataAxios;
} else {
// 有 code 代表这是一个后端接口 可以进行进一步的判断

11
web/src/utils/tools.ts
View File

@@ -48,19 +48,22 @@ export function responseError(data = {}, msg = "请求失败", code = 500) {
* @description 记录和显示错误
* @param {Error} error 错误对象
*/
export function errorLog(error) {
export function errorLog(error:any,notification=true) {
// 打印到控制台
console.error(error);
// 显示提示
if(notification){
uiContext.get().notification.error({ message: error.message });
}
}
/**
* @description 创建一个错误
* @param {String} msg 错误信息
*/
export function errorCreate(msg) {
export function errorCreate(msg:any,notification=true) {
const error = new Error(msg);
errorLog(error);
throw error;
errorLog(error,notification);
// throw error;
}

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

@@ -6,7 +6,7 @@ export function GetList(query: PageQuery) {
return request({
url: apiPrefix,
method: 'get',
params: query,
params: query
});
}
export function GetObj(id: InfoReq) {

145
web/src/views/system/menu/crud.tsx
View File

@@ -1,15 +1,12 @@
import * as api from "./api";
import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, } from "@fast-crud/fast-crud";
import { apiPrefix as menuPrefix } from './api'
import { request } from "/@/utils/service";
import XEUtils from "xe-utils";
import { dictionary } from "/@/utils/dictionary";
import iconSelector from '/@/components/iconSelector/index.vue'
interface CreateCrudOptionsTypes {
crudOptions: CrudOptions;
}
export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
export const createCrudOptions = function ({ crudExpose,menuButtonRef }: { crudExpose: CrudExpose,menuButtonRef:any }): CreateCrudOptionsTypes {
//验证路由地址
const validateWebPath = (rule: string, value: string, callback: Function) => {
const isLink = crudExpose.getFormData().is_link
@@ -26,10 +23,8 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
}
}
const pageRequest = async (query: PageQuery) => {
return await api.GetList(query);
return await api.GetList({});
};
const editRequest = async ({ form, row }: EditReq) => {
form.id = row.id;
@@ -41,6 +36,18 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
const addRequest = async ({ form }: AddReq) => {
return await api.AddObj(form);
};
/**
* 懒加载
* @param row
* @returns {Promise<unknown>}
*/
const loadContentMethod = (tree:any, treeNode:any, resolve:any)=>{
api.GetList({ parent: tree.id }).then((res:any) => {
resolve(res.data)
})
}
return {
crudOptions: {
request: {
@@ -49,21 +56,49 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
editRequest,
delRequest
},
pagination:{
show:false
},
table:{
rowKey:'id',
lazy:true,
load:loadContentMethod,
treeProps:{children: 'children', hasChildren: 'hasChild'}
},
rowHandle: {
buttons: {
custom: {
text: "按钮配置",
type:'warning',
tooltip: {
placement: "top",
content: "按钮配置"
},
click: (context:any):void => {
const {row} = context
menuButtonRef.value.drawer=true
menuButtonRef.value.selectOptions = row
menuButtonRef.value.initGet()
}
}
},
},
columns: {
_index: {
title: '序号',
form: { show: false },
column: {
//type: 'index',
type: 'index',
align: 'center',
width: '70px',
width: '80px',
columnSetDisabled: true, //禁止在列设置中选择
formatter: (context) => {
//计算序号,你可以自定义计算规则，此处为翻页累加
let index = context.index ?? 1;
let pagination = crudExpose.crudBinding.value.pagination;
return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
},
// formatter: (context) => {
// //计算序号,你可以自定义计算规则，此处为翻页累加
// let index = context.index ?? 1;
// let pagination = crudExpose.crudBinding.value.pagination;
// return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
// },
},
},
search: {
@@ -89,46 +124,46 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
}
},
},
parent: {
title: '父级菜单',
column: {
show: false
},
type: 'dict-cascader',
dict: dict({
url: menuPrefix,
value: "id",
label: "name",
children: "children",
isTree: true,
getData: async ({ url }: { url: string }) => {
return request({
url: url,
params: { limit: 999, status: 1, is_catalog: 1 },
}).then((ret: any) => {
const responseData = ret.data;
const result = XEUtils.toArrayTree(responseData, {
parentKey: "parent",
strict: true,
});
return [{ id: null, name: "根节点", children: result }];
});
}
}),
form: {
component: {
filterable: true,
placeholder: '请选择父级菜单',
props: {
props: {
checkStrictly: true,
value: "id",
label: "name",
}
}
},
}
},
// parent: {
// title: '父级菜单',
// column: {
// show: false
// },
// type: 'dict-cascader',
// dict: dict({
// url: menuPrefix,
// value: "id",
// label: "name",
// children: "children",
// isTree: true,
// getData: async ({ url }: { url: string }) => {
// return request({
// url: url,
// params: { limit: 100, status: 1, is_catalog: 1 },
// }).then((ret: any) => {
// const responseData = ret.data;
// const result = XEUtils.toArrayTree(responseData, {
// parentKey: "parent",
// strict: true,
// });
// return [{ id: null, name: "根节点", children: result }];
// });
// }
// }),
// form: {
// component: {
// filterable: true,
// placeholder: '请选择父级菜单',
// props: {
// props: {
// checkStrictly: true,
// value: "id",
// label: "name",
// }
// }
// },
// }
// },
name: {
title: '菜单名称',
search: {

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

@@ -1,6 +1,7 @@
<template>
<fs-page>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
<MenuButton ref="menuButtonRef"></MenuButton>
</fs-page>
</template>
@@ -8,6 +9,9 @@
import { ref, onMounted } from 'vue';
import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import MenuButton from './components/menuButton/index.vue'
const menuButtonRef = ref()
defineExpose(menuButtonRef);
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
@@ -15,7 +19,7 @@ const crudBinding = ref();
// 暴露的方法
const { crudExpose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions } = createCrudOptions({ crudExpose });
const { crudOptions } = createCrudOptions({ crudExpose,menuButtonRef });
// 初始化crud配置
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });

2
web/src/views/system/role/curd.tsx
View File

@@ -39,7 +39,7 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
placement: "top",
content: "删除"
},
click: (context:any) => {
click: (context:any):void => {
const {row} = context
rolePermission.value.drawer=true
rolePermission.value.editedRoleInfo = row