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

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',