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:33:44 +08:00
parent 9b8766452c
commit 9f845b9fde
4 changed files with 374 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
web/src/views/system/menu/components/menuButton/api.ts Normal file
View File

@@ -0,0 +1,41 @@
import { request } from '/@/utils/service';
import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
export const apiPrefix = '/api/system/menu_button/';
export function GetList(query: PageQuery) {
return request({
url: apiPrefix,
method: 'get',
params: query,
});
}
export function GetObj(id: InfoReq) {
return request({
url: apiPrefix + id,
method: 'get',
});
}
export function AddObj(obj: AddReq) {
return request({
url: apiPrefix,
method: 'post',
data: obj,
});
}
export function UpdateObj(obj: EditReq) {
return request({
url: apiPrefix + obj.id + '/',
method: 'put',
data: obj,
});
}
export function DelObj(id: DelReq) {
return request({
url: apiPrefix + id + '/',
method: 'delete',
data: { id },
});
}

224
web/src/views/system/menu/components/menuButton/curd.tsx Normal file
View File

@@ -0,0 +1,224 @@
import {CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose} from '@fast-crud/fast-crud';
import _ from 'lodash-es';
import * as api from "./api";
import { dictionary } from '/@/utils/dictionary';
interface CreateCrudOptionsTypes {
crudOptions: CrudOptions;
}
import { request } from '/@/utils/service';
//此处为crudOptions配置
export const createCrudOptions = function ({crudExpose,selectOptions}: {crudExpose: CrudExpose,selectOptions:any}): CreateCrudOptionsTypes {
const pageRequest = async (query: any) => {
return await api.GetList({...query,menu:selectOptions.value.id});
};
const editRequest = async ({ form, row }: EditReq) => {
form.id = row.id;
return await api.UpdateObj(form);
};
const delRequest = async ({ row }: DelReq) => {
return await api.DelObj(row.id);
};
const addRequest = async ({ form }: AddReq) => {
return await api.AddObj(form);
};
return {
crudOptions: {
request: {
pageRequest,
addRequest,
editRequest,
delRequest,
},
form: {
col: {span: 24},
labelWidth: '100px',
wrapper: {
is: 'el-dialog',
width: '600px',
},
},
columns: {
_index: {
title: '序号',
form: {show: false},
column: {
//type: 'index',
align: 'center',
width: '70px',
columnSetDisabled: true, //禁止在列设置中选择
formatter: (context) => {
//计算序号,你可以自定义计算规则，此处为翻页累加
let index = context.index ?? 1;
let pagination = crudExpose.crudBinding.value.pagination;
return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
},
},
},
search: {
title: '关键词',
column: {show: false},
type: 'text',
search: {show: true},
form: {
show: false,
component: {
placeholder: '输入关键词搜索',
},
},
},
id: {
title: 'ID',
type: 'text',
column: {show: false},
search: {show: false},
form: {show: false},
},
name: {
title: '权限名称',
type: 'dict-select',
search: {show: true},
dict:dict({
data:dictionary('system_button')
}),
column: {
minWidth: 120,
sortable: true,
},
form: {
rules: [{required: true, message: '角色名称必填'}],
component: {
placeholder: '输入角色名称搜索',
},
},
},
value: {
title: '权限值',
type: 'text',
search: {show: false},
column: {
width: 120,
sortable: true,
},
form: {
rules: [{required: true, message: '权限标识必填'}],
placeholder: '输入权限标识',
},
},
method: {
title: '请求方式',
search: {show: false},
type: 'dict-select',
column: {
width: 100,
sortable: true,
},
dict: dict({
data:[
{ label: 'GET', value: 0 },
{ label: 'POST', value: 1,color:'success' },
{ label: 'PUT', value: 2 },
{ label: 'DELETE', value: 3 ,color: 'danger'}
]
})
},
api: {
title: '接口地址',
minWidth:200,
search: {show: false},
type: 'dict-select',
dict: dict({
getData(){
return request({ url: '/swagger.json' }).then((res:any) => {
const ret = Object.keys(res.paths)
const data = []
for (const item of ret) {
const obj:any = {}
obj.label = item
obj.value = item
data.push(obj)
}
return data
})
}
}),
column: {
width: 130,
sortable: true,
},
form: {
value: false,
},
},
status: {
title: '状态',
search: {show: true},
type: 'dict-radio',
dict: dict({
data: [
{
label: '启用',
value: true,
color: 'success',
},
{
label: '禁用',
value: false,
color: 'danger',
},
],
}),
column: {
width: 90,
sortable: true,
},
form: {
value: true,
},
},
update_datetime: {
title: '更新时间',
type: 'text',
search: {show: false},
column: {
width: 170,
sortable: true,
},
form: {
show: false,
component: {
placeholder: '输入关键词搜索',
},
},
},
create_datetime: {
title: '创建时间',
type: 'text',
search: {show: false},
column: {
sortable: true,
width: 170,
},
form: {
show: false,
component: {
placeholder: '输入关键词搜索',
},
},
},
description: {
title: '备注',
type: 'textarea',
search: {show: false},
form: {
component: {
maxlength: 200,
placeholder: '输入备注',
},
},
},
},
},
};
};

68
web/src/views/system/menu/components/menuButton/index.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<el-drawer
size="70%"
v-model="drawer"
direction="rtl"
destroy-on-close
:before-close="handleClose"
>
<template #header>
<div>当前菜单:
<el-tag>{{ selectOptions.name }}</el-tag>
</div>
</template>
<div style="position: relative">
<fs-page>
<fs-crud ref="crudRef" v-bind="crudBinding">
</fs-crud>
</fs-page>
</div>
</el-drawer>
</template>
<script lang="ts" setup>
import {ref, onMounted} from 'vue';
import {useExpose, useCrud} from '@fast-crud/fast-crud';
import {createCrudOptions} from './curd';
import {ElMessageBox} from "element-plus";
import * as api from './api'
// 弹窗是否显示
const drawer = ref(false)
// 当前选择的菜单信息
const selectOptions = ref({name:null})
//抽屉关闭确认
const handleClose = (done: () => void) => {
ElMessageBox.confirm('您确定要关闭?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
done()
})
.catch(() => {
// catch error
})
}
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const {crudExpose} = useExpose({crudRef, crudBinding});
// 你的crud配置
const {crudOptions} = createCrudOptions({crudExpose, selectOptions});
// 初始化crud配置
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})
</script>

41
web/src/views/system/role/api.ts Normal file
View File

@@ -0,0 +1,41 @@
import { request } from '/@/utils/service';
import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
export const apiPrefix = '/api/system/role/';
export function GetList(query: PageQuery) {
return request({
url: apiPrefix,
method: 'get',
data: query,
});
}
export function GetObj(id: InfoReq) {
return request({
url: apiPrefix + id,
method: 'get',
});
}
export function AddObj(obj: AddReq) {
return request({
url: apiPrefix,
method: 'post',
data: obj,
});
}
export function UpdateObj(obj: EditReq) {
return request({
url: apiPrefix + obj.id + '/',
method: 'put',
data: obj,
});
}
export function DelObj(id: DelReq) {
return request({
url: apiPrefix + id + '/',
method: 'delete',
data: { id },
});
}