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: class Meta:
model = RoleMenuButtonPermission model = RoleMenuButtonPermission
fields = ['id', 'name', 'value', 'api', 'method'] fields = "__all__"
read_only_fields = ["id"] read_only_fields = ["id"]
@@ -34,7 +34,7 @@ class RoleMenuButtonPermissionInitSerializer(CustomModelSerializer):
class Meta: class Meta:
model = RoleMenuButtonPermission model = RoleMenuButtonPermission
fields = ['id', 'name', 'value', 'api', 'method', 'menu'] fields = "__all__"
read_only_fields = ["id"] read_only_fields = ["id"]
class RoleMenuButtonPermissionCreateUpdateSerializer(CustomModelSerializer): class RoleMenuButtonPermissionCreateUpdateSerializer(CustomModelSerializer):

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

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

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

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

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

@@ -6,7 +6,7 @@ export function GetList(query: PageQuery) {
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) {

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

@@ -1,15 +1,12 @@
import * as api from "./api"; import * as api from "./api";
import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, } from "@fast-crud/fast-crud"; 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 { dictionary } from "/@/utils/dictionary";
import iconSelector from '/@/components/iconSelector/index.vue' import iconSelector from '/@/components/iconSelector/index.vue'
interface CreateCrudOptionsTypes { interface CreateCrudOptionsTypes {
crudOptions: CrudOptions; 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 validateWebPath = (rule: string, value: string, callback: Function) => {
const isLink = crudExpose.getFormData().is_link const isLink = crudExpose.getFormData().is_link
@@ -26,10 +23,8 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
} }
} }
const pageRequest = async (query: PageQuery) => { const pageRequest = async (query: PageQuery) => {
return await api.GetList(query); return await api.GetList({});
}; };
const editRequest = async ({ form, row }: EditReq) => { const editRequest = async ({ form, row }: EditReq) => {
form.id = row.id; form.id = row.id;
@@ -41,6 +36,18 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
const addRequest = async ({ form }: AddReq) => { const addRequest = async ({ form }: AddReq) => {
return await api.AddObj(form); 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 { return {
crudOptions: { crudOptions: {
request: { request: {
@@ -49,21 +56,49 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
editRequest, editRequest,
delRequest 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: { columns: {
_index: { _index: {
title: '序号', title: '序号',
form: { show: false }, form: { show: false },
column: { column: {
//type: 'index', type: 'index',
align: 'center', align: 'center',
width: '70px', width: '80px',
columnSetDisabled: true, //禁止在列设置中选择 columnSetDisabled: true, //禁止在列设置中选择
formatter: (context) => { // formatter: (context) => {
//计算序号,你可以自定义计算规则，此处为翻页累加 // //计算序号,你可以自定义计算规则，此处为翻页累加
let index = context.index ?? 1; // let index = context.index ?? 1;
let pagination = crudExpose.crudBinding.value.pagination; // let pagination = crudExpose.crudBinding.value.pagination;
return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1; // return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
}, // },
}, },
}, },
search: { search: {
@@ -89,46 +124,46 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
} }
}, },
}, },
parent: { // parent: {
title: '父级菜单', // title: '父级菜单',
column: { // column: {
show: false // show: false
}, // },
type: 'dict-cascader', // type: 'dict-cascader',
dict: dict({ // dict: dict({
url: menuPrefix, // url: menuPrefix,
value: "id", // value: "id",
label: "name", // label: "name",
children: "children", // children: "children",
isTree: true, // isTree: true,
getData: async ({ url }: { url: string }) => { // getData: async ({ url }: { url: string }) => {
return request({ // return request({
url: url, // url: url,
params: { limit: 999, status: 1, is_catalog: 1 }, // params: { limit: 100, status: 1, is_catalog: 1 },
}).then((ret: any) => { // }).then((ret: any) => {
const responseData = ret.data; // const responseData = ret.data;
const result = XEUtils.toArrayTree(responseData, { // const result = XEUtils.toArrayTree(responseData, {
parentKey: "parent", // parentKey: "parent",
strict: true, // strict: true,
}); // });
return [{ id: null, name: "根节点", children: result }]; // return [{ id: null, name: "根节点", children: result }];
}); // });
} // }
}), // }),
form: { // form: {
component: { // component: {
filterable: true, // filterable: true,
placeholder: '请选择父级菜单', // placeholder: '请选择父级菜单',
props: { // props: {
props: { // props: {
checkStrictly: true, // checkStrictly: true,
value: "id", // value: "id",
label: "name", // label: "name",
} // }
} // }
}, // },
} // }
}, // },
name: { name: {
title: '菜单名称', title: '菜单名称',
search: { search: {

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

@@ -1,13 +1,17 @@
<template> <template>
<fs-page> <fs-page>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud> <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
</fs-page> <MenuButton ref="menuButtonRef"></MenuButton>
</fs-page>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { useExpose, useCrud } from '@fast-crud/fast-crud'; import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud'; import { createCrudOptions } from './crud';
import MenuButton from './components/menuButton/index.vue'
const menuButtonRef = ref()
defineExpose(menuButtonRef);
// crud组件的ref // crud组件的ref
const crudRef = ref(); const crudRef = ref();
// crud 配置的ref // crud 配置的ref
@@ -15,7 +19,7 @@ const crudBinding = ref();
// 暴露的方法 // 暴露的方法
const { crudExpose } = useExpose({ crudRef, crudBinding }); const { crudExpose } = useExpose({ crudRef, crudBinding });
// 你的crud配置 // 你的crud配置
const { crudOptions } = createCrudOptions({ crudExpose }); const { crudOptions } = createCrudOptions({ crudExpose,menuButtonRef });
// 初始化crud配置 // 初始化crud配置
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions }); 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", placement: "top",
content: "删除" content: "删除"
}, },
click: (context:any) => { click: (context:any):void => {
const {row} = context const {row} = context
rolePermission.value.drawer=true rolePermission.value.drawer=true
rolePermission.value.editedRoleInfo = row rolePermission.value.editedRoleInfo = row