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

1.菜单和按钮基本授权完成;

Browse Source 
2. todo:
a.按钮数据权限;
b.字段权限
This commit is contained in:
猿小天
2023-08-15 23:55:46 +08:00
committed by 李强
parent d290836f4f
commit ea335922b2
11 changed files with 237 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
backend/dvadmin/system/views/role.py
View File

@@ -79,6 +79,28 @@ class MenuPermissionSerializer(CustomModelSerializer):
fields = ['id', 'parent', 'name', 'menuPermission']
class MenuButtonPermissionSerializer(CustomModelSerializer):
"""
菜单和按钮权限
"""
isCheck = serializers.SerializerMethodField()
def get_isCheck(self, instance):
is_superuser = self.request.user.is_superuser
if is_superuser:
return True
else:
return MenuButton.objects.filter(
menu__id=instance.id,
role__id__in=self.request.user.role.values_list('id', flat=True),
).exists()
class Meta:
model = Menu
fields = '__all__'
class RoleViewSet(CustomModelViewSet, FastCrudMixin):
"""
角色管理接口

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

@@ -28,16 +28,6 @@ class RoleMenuButtonPermissionSerializer(CustomModelSerializer):
read_only_fields = ["id"]
class RoleMenuButtonPermissionInitSerializer(CustomModelSerializer):
"""
初始化菜单按钮-序列化器
"""
class Meta:
model = RoleMenuButtonPermission
fields = "__all__"
read_only_fields = ["id"]
class RoleMenuButtonPermissionCreateUpdateSerializer(CustomModelSerializer):
"""
@@ -52,6 +42,46 @@ class RoleMenuButtonPermissionCreateUpdateSerializer(CustomModelSerializer):
read_only_fields = ["id"]
class RoleButtonPermissionSerializer(CustomModelSerializer):
"""
角色按钮权限
"""
isCheck = serializers.SerializerMethodField()
def get_isCheck(self, instance):
params = self.request.query_params
return RoleMenuButtonPermission.objects.filter(
menu_button__id=instance['id'],
role__id=params.get('role'),
).exists()
class Meta:
model = MenuButton
fields = ['id','name','value','isCheck']
class RoleMenuPermissionSerializer(CustomModelSerializer):
"""
菜单和按钮权限
"""
isCheck = serializers.SerializerMethodField()
btns = serializers.SerializerMethodField()
def get_isCheck(self, instance):
params = self.request.query_params
return RoleMenuPermission.objects.filter(
menu__id=instance['id'],
role__id=params.get('role'),
).exists()
def get_btns(self, instance):
btn_list = MenuButton.objects.filter(menu__id=instance['id']).values('id', 'name', 'value')
serializer = RoleButtonPermissionSerializer(btn_list,many=True,request=self.request)
return serializer.data
class Meta:
model = Menu
fields = ['id','name','isCheck','btns']
class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
"""
菜单按钮接口
@@ -68,40 +98,49 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
extra_filter_class = []
@action(methods=['GET'], detail=False, permission_classes=[IsAuthenticated])
def role_get_menu(self, request):
"""根据当前用户的角色返回角色拥有的菜单"""
data = []
def get_role_premission(self, request):
"""
角色授权获取:
:param request: role
:return: menu,btns,columns
"""
params = request.query_params
role = params.get('role',None)
if role is None:
return ErrorResponse(msg="未获取到角色信息")
is_superuser = request.user.is_superuser
is_admin = request.user.role.values_list('admin', flat=True)
if is_superuser or True in is_admin:
queryset = Menu.objects.filter(status=1).values('name', 'parent', 'is_catalog', menu_id=F('id'))
for item in queryset:
btn_name = MenuButton.objects.filter(menu=item['menu_id']).values_list('name', flat=True)
data.append({
'menu_id': item['menu_id'],
'name': item['name'],
'parent': item['parent'],
'permission': btn_name,
'is_catalog': item['is_catalog']
})
if is_superuser:
queryset = Menu.objects.filter(status=1,is_catalog=False).values('name', 'id').all()
else:
role_id = request.user.role.values_list('id', flat=True)
queryset = RoleMenuPermission.objects.filter(role__in=role_id).values(
'menu_id', name=F('menu__name'), parent=F('menu__parent'), is_catalog=F('menu__is_catalog')
).distinct()
for item in queryset:
btn_name = RoleMenuButtonPermission.objects.filter(
menu_button__menu=item['menu_id']
).values_list('menu_button__name', flat=True)
data.append({
'menu_id': item['menu_id'],
'name': item['name'],
'parent': item['parent'],
'permission': btn_name,
'is_catalog': item['is_catalog']
})
menu_list = RoleMenuPermission.objects.filter(role__in=role_id).values_list('id',flat=True)
queryset = Menu.objects.filter(status=1, is_catalog=False,id__in=menu_list).values('name', 'id').all()
serializer = RoleMenuPermissionSerializer(queryset,many=True,request=request)
data = serializer.data
return DetailResponse(data=data)
@action(methods=['PUT'], detail=True, permission_classes=[IsAuthenticated])
def set_role_premission(self,request,pk):
"""
对角色授权:
:param request:
:param pk: role
:return:
"""
body = request.data
RoleMenuPermission.objects.filter(role=pk).delete()
RoleMenuButtonPermission.objects.filter(role=pk).delete()
for menu in body:
if menu.get('isCheck'):
menu_parent = Menu.objects.filter(id=menu.get('id')).values('parent').first()
RoleMenuPermission.objects.create(role_id=pk, menu_id=menu_parent.get('parent'))
RoleMenuPermission.objects.create(role_id=pk, menu_id=menu.get('id'))
for btn in menu.get('btns'):
if btn.get('isCheck'):
RoleMenuButtonPermission.objects.create(role_id=pk, menu_button_id=btn.get('id'))
return DetailResponse(msg="授权成功")
@action(methods=['GET'], detail=False, permission_classes=[IsAuthenticated])
def role_menu_get_button(self, request):
"""

4
backend/requirements.txt
View File

@@ -18,7 +18,7 @@ requests==2.28.2
typing-extensions==4.4.0
smmap==5.0.0
tzlocal==4.1
channels==3.0.5
channels==4.0.0
channels-redis==4.0.0
websockets==10.4
user-agents==2.2.0
@@ -28,4 +28,4 @@ psycopg2==2.9.5
uvicorn==0.20.0
gunicorn==20.1.0
gevent==22.10.2
Pillow==8.3.1
Pillow==8.3.2

2
web/package.json
View File

@@ -25,7 +25,7 @@
"echarts": "^5.4.1",
"echarts-gl": "^2.0.9",
"echarts-wordcloud": "^2.1.0",
"element-plus": "^2.2.26",
"element-plus": "^2.3.9",
"element-tree-line": "^0.2.1",
"font-awesome": "^4.7.0",
"js-cookie": "^3.0.1",

6
web/src/i18n/index.ts
View File

@@ -14,9 +14,9 @@ import { useThemeConfig } from '/@/stores/themeConfig';
*/
// element plus 自带国际化
import enLocale from 'element-plus/lib/locale/lang/en';
import zhcnLocale from 'element-plus/lib/locale/lang/zh-cn';
import zhtwLocale from 'element-plus/lib/locale/lang/zh-tw';
import enLocale from 'element-plus/es/locale/lang/en';
import zhcnLocale from 'element-plus/es/locale/lang/zh-cn';
import zhtwLocale from 'element-plus/es/locale/lang/zh-tw';
// 定义变量内容
const messages = {};

2
web/src/main.ts
View File

@@ -2,7 +2,7 @@ import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { directive } from '/@/utils/directive';
import { i18n } from '/@/i18n/index';
import { i18n } from '/@/i18n';
import other from '/@/utils/other';
import '/@/assets/style/tailwind.css'; // 先引入tailwind css, 以免element-plus冲突
import ElementPlus from 'element-plus';

28
web/src/views/system/role/components/PermissionComNew/api.ts
View File

@@ -1,5 +1,31 @@
import { request } from "/@/utils/service";
/**
* 获取角色的授权列表
* @param roleId
* @param query
*/
export function getRolePremission(query:object) {
return request({
url: '/api/system/role_menu_button_permission/get_role_premission/',
method: 'get',
params:query
})
}
/***
* 设置角色的权限
* @param roleId
* @param data
*/
export function setRolePremission(roleId:any,data:object) {
return request({
url: `/api/system/role_menu_button_permission/${roleId}/set_role_premission/`,
method: 'put',
data
})
}
export function getDataPermissionRange() {
return request({
url: '/api/system/role_menu_button_permission/data_scope/',
@@ -18,4 +44,4 @@ export function getDataPermissionMenu() {
url: '/api/system/role_menu_button_permission/get_role_permissions/',
method: 'get'
})
}
}

133
web/src/views/system/role/components/PermissionComNew/index.vue
View File

@@ -1,9 +1,13 @@
<template>
<el-drawer v-model="drawerVisible" title="权限配置" direction="rtl" size="60%" :close-on-click-modal="false" :before-close="handleDrawerClose">
<template #header>
<div>当前角色: <el-tag>{{props.roleName}}</el-tag></div>
</template>
<div class="permission-com">
<el-button type="primary" class="pc-save-btn">保存菜单授权</el-button>
<el-button type="primary" class="pc-save-btn" @click="handleSavePermission">保存菜单授权</el-button>
<el-collapse v-model="collapseCurrent" @change="handleCollapseChange" accordion>
<el-collapse-item v-for="item in menuData" :key="item.key" :name="item.key">
<el-collapse-item v-for="(item,mIndex) in menuData" :key="mIndex" :name="mIndex">
<template #title>
<div @click.stop="null">
<p class="pc-collapse-title">
@@ -11,8 +15,8 @@
<span>{{ item.name }}</span>
</el-checkbox>
</p>
<div v-show="!collapseCurrent.includes(item.key)">
<el-checkbox v-for="btn in item.btns" :key="btn.value" :label="btn.value" v-model="btn.isCheck">{{ btn.label }}</el-checkbox>
<div v-show="!collapseCurrent.includes(mIndex)">
<el-checkbox v-for="btn in item.btns" :key="btn.value" :label="btn.value" v-model="btn.isCheck">{{ btn.name }}</el-checkbox>
</div>
</div>
</template>
@@ -21,7 +25,7 @@
<p>允许对这些数据有以下操作</p>
<el-checkbox v-for="btn in item.btns" :key="btn.value" v-model="btn.isCheck" :label="btn.value">
<p class="btn-item">
{{ btn.role ? `${btn.label}(${btn.role})` : btn.label }}
{{ btn.role ? `${btn.label}(${btn.role})` : btn.name }}
<span @click.stop.prevent="handleSettingClick(item, btn.value)">
<el-icon><Setting /></el-icon>
</span>
@@ -90,14 +94,46 @@
</template>
</el-dialog>
</div>
</el-drawer>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ref, onMounted, defineProps,watch } from 'vue';
import XEUtils from 'xe-utils';
import { errorNotification } from '/@/utils/message';
import { getDataPermissionRange, getDataPermissionDept } from './api';
import {getDataPermissionRange, getDataPermissionDept, getRolePremission,setRolePremission} from './api';
import { MenuDataType, DataPermissionRangeType, CustomDataPermissionDeptType } from './types';
import { ElMessage } from 'element-plus'
const props= defineProps({
roleId:{
type: Number,
default: -1
},
roleName:{
type: String,
default: ''
},
drawerVisible:{
type: Boolean,
default: false
}
})
const emit = defineEmits(['update:drawerVisible'])
const drawerVisible = ref(false)
watch(
() => props.drawerVisible,
(val) => {
drawerVisible.value = val;
getMenuBtnPermission()
}
);
const handleDrawerClose = ()=>{
emit('update:drawerVisible', false);
}
const defaultTreeProps = {
children: 'children',
@@ -106,39 +142,39 @@ const defaultTreeProps = {
};
let menuData = ref<MenuDataType[]>([
{
key: '1',
name: '用户管理',
isCheck: true,
radio: '1',
btns: [
{ label: '新增', value: 'create', isCheck: true, role: '' },
{ label: '编辑', value: 'edit', isCheck: true, role: '' },
{ label: '查询', value: 'look', isCheck: true, role: '' },
],
columns: [
{ name: '姓名', create: true, edit: true, delete: true, look: true },
{ name: '性别', create: false, edit: true, delete: false, look: true },
{ name: '地址', create: true, edit: false, delete: true, look: false },
],
},
{
key: '2',
name: '系统管理',
isCheck: false,
radio: '2',
btns: [
{ label: '新增', value: 'create', isCheck: false, role: '' },
{ label: '编辑', value: 'edit', isCheck: true, role: '' },
{ label: '删除', value: 'delete', isCheck: false, role: '' },
{ label: '查询', value: 'look', isCheck: true, role: '' },
],
columns: [
{ name: '姓名', create: false, edit: true, delete: false, look: true },
{ name: '性别', create: true, edit: true, delete: true, look: true },
{ name: '地址', create: true, edit: false, delete: true, look: false },
],
},
// {
// key: '1',
// name: '用户管理',
// isCheck: true,
// radio: '1',
// btns: [
// { label: '新增', value: 'create', isCheck: true, role: '' },
// { label: '编辑', value: 'edit', isCheck: true, role: '' },
// { label: '查询', value: 'look', isCheck: true, role: '' },
// ],
// columns: [
// { name: '姓名', create: true, edit: true, delete: true, look: true },
// { name: '性别', create: false, edit: true, delete: false, look: true },
// { name: '地址', create: true, edit: false, delete: true, look: false },
// ],
// },
// {
// key: '2',
// name: '系统管理',
// isCheck: false,
// radio: '2',
// btns: [
// { label: '新增', value: 'create', isCheck: false, role: '' },
// { label: '编辑', value: 'edit', isCheck: true, role: '' },
// { label: '删除', value: 'delete', isCheck: false, role: '' },
// { label: '查询', value: 'look', isCheck: true, role: '' },
// ],
// columns: [
// { name: '姓名', create: false, edit: true, delete: false, look: true },
// { name: '性别', create: true, edit: true, delete: true, look: true },
// { name: '地址', create: true, edit: false, delete: true, look: false },
// ],
// },
]);
let collapseCurrent = ref(['1']);
let menuCurrent = ref<Partial<MenuDataType>>({});
@@ -149,6 +185,12 @@ let deptData = ref<CustomDataPermissionDeptType[]>([]);
let dataPermission = ref();
let customDataPermission = ref([]);
//获取菜单,按钮,权限
const getMenuBtnPermission = async () => {
const resMenu = await getRolePremission({role:props.roleId})
menuData.value = resMenu.data
}
const fetchData = async () => {
try {
const resRange = await getDataPermissionRange();
@@ -209,8 +251,19 @@ const handleDialogClose = () => {
dataPermission.value = null;
};
//保存权限
const handleSavePermission = () => {
setRolePremission(props.roleId, menuData.value).then(res=>{
ElMessage({
message: res.msg,
type: 'success',
})
})
}
onMounted(() => {
fetchData();
});
</script>

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

@@ -84,7 +84,7 @@ export const createCrudOptions = function ({
},
click: (context: any): void => {
const { row } = context;
handleDrawerOpen();
handleDrawerOpen(row);
},
},
},

15
web/src/views/system/role/index.vue
View File

@@ -8,12 +8,9 @@
<permission ref="rolePermission"></permission>
<el-drawer v-model="drawerVisible" title="权限配置" direction="rtl" size="60%" :close-on-click-modal="false" :before-close="handleDrawerClose">
<template #header>
<div>当前角色: <el-tag>管理员</el-tag></div>
</template>
<PermissionComNew v-if="drawerVisible" @drawerClose="handleDrawerClose" />
</el-drawer>
<PermissionComNew v-model:drawerVisible="drawerVisible" :roleId="roleId" :roleName="roleName" @drawerClose="handleDrawerClose" />
</fs-page>
</template>
@@ -25,6 +22,8 @@ import permission from './components/PermissionCom/index.vue';
import PermissionComNew from './components/PermissionComNew/index.vue';
let drawerVisible = ref(false);
let roleId = ref(null);
let roleName = ref(null);
const rolePermission = ref();
// crud组件的ref
@@ -34,7 +33,9 @@ const crudBinding = ref();
// 暴露的方法
const { crudExpose } = useExpose({ crudRef, crudBinding });
const handleDrawerOpen = () => {
const handleDrawerOpen = (row:any) => {
roleId.value = row.id
roleName.value = row.name
drawerVisible.value = true;
};

2
web/vite.config.ts
View File

@@ -22,7 +22,7 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
resolve: { alias },
base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,
optimizeDeps: {
include: ['element-plus/lib/locale/lang/zh-cn', 'element-plus/lib/locale/lang/en', 'element-plus/lib/locale/lang/zh-tw'],
include: ['element-plus/es/locale/lang/zh-cn', 'element-plus/es/locale/lang/en', 'element-plus/es/locale/lang/zh-tw'],
},
server: {
host: '0.0.0.0',