Skip to content

C
center-project
提交 45e753e8 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

feat: 权限配置

上级 021d0987
隐藏空白字符变更
内嵌 并排
正在显示 包含 125 行增加 和 90 行删除
src/assets/theme/style.scss
浏览文件 @ 45e753e8
$--color-primary: #3276fc;
$--color-info: #3c4043;
// border
$--border-radius-small: 8px !default;
// dialog
$--message-close-size: 20px !default;
......@@ -10,3 +8,7 @@ $--message-close-size: 20px !default;
$--font-path: 'element-ui/lib/theme-chalk/fonts';
@import 'element-ui/packages/theme-chalk/src/index';
.el-dialog {
border-radius: 8px;
}
src/modules/roles/api.js
浏览文件 @ 45e753e8
......@@ -39,17 +39,17 @@ export function deleteRole(data) {
* 获取权限列表
*/
export function getPermissionList(params) {
return httpRequest.get(`/api/xedu/admin/v1/${params.app_id}/application/permissions`, { params })
return httpRequest.get('/api/xedu/admin/v1/permissions', { params })
}
/**
* 获取角色所有权限
*/
export function getRolePermissions(params) {
return httpRequest.get(`/api/xedu/admin/v1/${params.app_id}/application/assign/role-permissions`, { params })
return httpRequest.get(`/api/xedu/admin/v1/assign/${params.role_id}/permissions`, { params })
}
/**
* 更新角色权限
*/
export function updateRolePermissions(data) {
return httpRequest.post(`/api/xedu/admin/v1/${data.app_id}/application/assign/permissions-to-role`, data)
return httpRequest.post('/api/xedu/admin/v1/assign/permissions-to-role', data)
}
src/modules/roles/components/Permissions.vue
浏览文件 @ 45e753e8
<template>
<el-dialog title="权限配置" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="700px">
<el-tabs v-model="activeName">
<el-tab-pane label="菜单权限" name="2"></el-tab-pane>
<el-tab-pane label="功能权限" name="1"></el-tab-pane>
<el-tab-pane label="资源权限" name="3"></el-tab-pane>
<el-tab-pane label="按钮权限" name="4"></el-tab-pane>
</el-tabs>
<el-tree
:data="permissions"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
:props="defaultProps"
:filter-node-method="filterNode"
v-loading="submitLoading"
>
</el-tree>
<el-dialog title="权限配置" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="800px">
<el-form ref="form" :model="form" :rules="rules" label-position="top" v-loading="loading">
<el-form-item label="选择系统" prop="system_tag">
<el-checkbox-group v-model="form.system_tag">
<el-checkbox v-for="item in options" :label="item.system_tag" :key="item.system_tag">
{{ item.name }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="权限设置" prop="name">
<div v-for="(item, index) in options" :key="index" v-show="form.system_tag.includes(item.system_tag)">
{{ item.name }}
<el-cascader-panel
:options="item.permissions"
:props="defaultProps"
v-model="item.value"
ref="tree"
@change="handleChange"
></el-cascader-panel>
</div>
</el-form-item>
</el-form>
<template #footer>
<el-button type="text" @click="onCancel">取消</el-button>&nbsp;&nbsp;
<el-button type="primary" size="medium" @click="onPrimary" :loading="submitLoading">保存</el-button>
......@@ -32,21 +36,21 @@ export default {
},
data() {
return {
activeName: '2',
loading: true,
form: {
system_tag: []
},
rules: {
system_tag: [{ required: true, message: '请选择系统', trigger: 'change' }]
},
permissions: [], // 所有权限
currentPermissions: [], // 当前角色权限
defaultProps: { children: 'children', label: 'name' },
submitLoading: false
}
},
computed: {
appid() {
return this.$store.state.appid
}
},
watch: {
activeName(val) {
this.$refs.tree && this.$refs.tree.filter(val)
defaultProps: { label: 'name', value: 'id', multiple: true, expandTrigger: 'hover', emitPath: false },
submitLoading: false,
options: [
{ name: '学校管理系统', system_tag: 1, permissions: [], value: [] },
{ name: '教师端', system_tag: 2, permissions: [], value: [] },
{ name: '学生端', system_tag: 3, permissions: [], value: [] }
]
}
},
async beforeMount() {
......@@ -60,31 +64,37 @@ export default {
if (!value) return true
return parseInt(value) === data.type
},
getTypeName(value) {
const map = { 1: '功能', 2: '菜单', 3: '资源', 4: '按钮' }
return map[value] || value
},
// 获取所有权限
getPermissions() {
return getPermissionList({ app_id: this.appid, limit: 500 }).then(res => {
this.permissions = res.data.data
this.$nextTick(() => {
this.$refs.tree.filter(this.activeName)
})
return getPermissionList({ is_format: 1 }).then(res => {
// 移除空数组
const permissions = JSON.parse(JSON.stringify(res.data).replaceAll(',"children":[]', ''))
this.options = permissions.reduce((result, item) => {
const index = result.findIndex(i => i.system_tag === item.system_tag)
if (index !== -1) {
result[index].permissions.push(item)
}
return result
}, this.options)
})
},
// 获取当前角色的权限
getRolePermissions() {
getRolePermissions({ app_id: this.appid, role_id: this.data.id }).then(res => {
if (res.data.length) {
this.currentPermissions = res.data.map(item => item.id)
// 有bug，暂时不用
// this.$refs.tree.setCheckedKeys(this.currentPermissions)
this.currentPermissions.forEach(id => {
this.$refs.tree.setChecked(id, true)
getRolePermissions({ role_id: this.data.id })
.then(res => {
res.data.items.forEach(permission => {
if (!this.form.system_tag.includes(permission.system_tag)) {
this.form.system_tag.push(permission.system_tag)
}
const index = this.options.findIndex(i => i.system_tag === permission.system_tag)
if (index !== -1) {
this.options[index].value.push(permission.id)
}
})
}
})
})
.finally(() => {
this.loading = false
})
},
// 取消
onCancel() {
......@@ -92,25 +102,30 @@ export default {
},
// 确定
onPrimary() {
// 选中的权限
const checkedKeys = this.$refs.tree.getCheckedKeys()
// 半选中的权限
const halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys()
const params = {
app_id: this.appid,
role_id: this.data.id,
permission_ids: JSON.stringify([...checkedKeys, ...halfCheckedKeys])
}
this.submitLoading = true
updateRolePermissions(params)
.then(res => {
this.$message.success('配置成功')
this.$emit('update:visible', false)
this.$emit('success', res.data)
})
.finally(() => {
this.submitLoading = false
})
this.$refs.form.validate().then(() => {
const params = {
role_id: this.data.id,
data: this.options.reduce((result, item) => {
if (this.form.system_tag.includes(item.system_tag)) {
result.push({ system_tag: item.system_tag, permission_ids: item.value })
}
return result
}, [])
}
this.submitLoading = true
updateRolePermissions(params)
.then(res => {
this.$message.success('配置成功')
this.$emit('update:visible', false)
this.$emit('success', res.data)
})
.finally(() => {
this.submitLoading = false
})
})
},
handleChange(e) {
console.log(e)
}
}
}
......
src/modules/roles/views/List.vue
浏览文件 @ 45e753e8
......@@ -5,9 +5,9 @@
<el-button type="primary" icon="el-icon-plus" @click="handleCreate">添加角色</el-button>
</template>
<template v-slot:table-x="{ row }">
<el-button type="primary" @click="handleUpdate(row)">修改</el-button>
<el-button type="danger" @click="onRemove(row)">删除</el-button>
<el-button type="info" @click="handlePermission(row)">权限配置</el-button>&nbsp;
<el-button type="primary" plain @click="handleUpdate(row)">修改</el-button>
<el-button type="danger" plain @click="onRemove(row)">删除</el-button>
<el-button type="info" plain @click="handlePermission(row)">权限配置</el-button>&nbsp;
</template>
</app-list>
<!-- 创建/编辑 -->
......
src/modules/school/index.js
浏览文件 @ 45e753e8
......@@ -5,7 +5,7 @@ const routes = [
meta: { title: '机构管理' },
children: [
{ path: '', component: () => import('./views/List.vue') },
{ path: 'view', component: () => import('./views/Detail.vue') }
{ path: 'view', component: () => import('./views/Detail.vue'), meta: { title: '机构详情' } }
]
}
]
......
src/modules/school/views/Detail.vue
浏览文件 @ 45e753e8
<template>
<app-card :title="detail.name">
<app-card :title="detail.name" v-loading="loading">
<template #header-aside>
<el-button type="primary" @click="visible = true">编辑</el-button>
</template>
......@@ -13,8 +13,8 @@
<el-descriptions-item label="机构角色">
<el-tag>{{ detail.role_name }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="有效期"
>{{ detail.validity_date }}
<el-descriptions-item label="有效期">
{{ detail.validity_date }}
<el-tag v-if="detail.is_valid">未过期</el-tag>
<el-tag type="danger" v-else>已过期</el-tag>
</el-descriptions-item>
......@@ -39,6 +39,7 @@ export default {
},
data() {
return {
loading: false,
visible: false,
detail: { name: '清华大学' }
}
......@@ -53,9 +54,17 @@ export default {
},
methods: {
getDetail() {
getOrg({ id: this.id }).then(res => {
this.detail = res.data
})
this.loading = true
getOrg({ id: this.id })
.then(res => {
this.detail = res.data
})
.catch(() => {
this.$router.replace('/school')
})
.finally(() => {
this.loading = false
})
},
// 更新成功
handleUpdateSuccess(data) {
......
src/modules/school/views/List.vue
浏览文件 @ 45e753e8
......@@ -13,10 +13,10 @@
</template>
<template v-slot:table-x="{ row }">
<router-link :to="{ path: 'school/view', query: { id: row.id } }" target="_blank" style="margin-right: 10px">
<el-button>查看</el-button>
<el-button plain>查看</el-button>
</router-link>
<el-button type="primary" @click="handleUpdate(row)">编辑</el-button>
<el-button type="danger" @click="onRemove(row)">删除</el-button>
<el-button type="primary" plain @click="handleUpdate(row)">编辑</el-button>
<el-button type="danger" plain @click="onRemove(row)">删除</el-button>
</template>
</app-list>
<!-- 创建/编辑 -->
......
src/utils/axios.js
浏览文件 @ 45e753e8
import axios from 'axios'
import queryString from 'query-string'
import { Message } from 'element-ui'
import router from '../router'
const httpRequest = axios.create({
timeout: 60000,
withCredentials: true,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
withCredentials: true
// headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
// 请求拦截
......@@ -36,7 +37,15 @@ httpRequest.interceptors.response.use(
if (data.code === 0) {
return data
}
Message({ message: data.message || data.msg, type: 'error' })
// 未登录
if (data.code === 4001) {
window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(window.location.href)}`
}
// 没有权限
if (data.code === 4008) {
router.push('/401')
}
Message({ message: data.message, type: 'error' })
return Promise.reject(data)
},
function (error) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论