优化权限和角色的编辑
This commit is contained in:
zhl
parent
7ae57fe31e
commit
7d9ea82b41
@ -249,7 +249,7 @@ export default class extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
private formatDept(row: number, column: number, cellValue: string, index: number) {
|
||||
private formatDept(row: number, column: number, cellValue: string) {
|
||||
let result = '未指定'
|
||||
for (const dep of this.allDepts) {
|
||||
if (dep._id === cellValue) {
|
||||
@ -260,7 +260,7 @@ export default class extends Vue {
|
||||
return result
|
||||
}
|
||||
|
||||
private formatBool(row: number, column: number, cellValue: boolean, index: number) {
|
||||
private formatBool(row: number, column: number, cellValue: boolean) {
|
||||
return cellValue ? '是' : '否'
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作名" prop="actions">
|
||||
<el-form-item label="操作" prop="actions">
|
||||
<el-select
|
||||
v-model="record.actions"
|
||||
multiple
|
||||
@ -119,8 +119,8 @@ export interface ITreeData{
|
||||
parent?: any
|
||||
id: string
|
||||
label: string
|
||||
actions?: string[]
|
||||
children?: ITreeData[]
|
||||
actions: string[]
|
||||
children: ITreeData[]
|
||||
}
|
||||
|
||||
@Component({
|
||||
@ -237,7 +237,7 @@ export default class extends Vue {
|
||||
private async saveVal() {
|
||||
try {
|
||||
const records = []
|
||||
for (const data of this.typeOptions[0].children!) {
|
||||
for (const data of this.typeOptions[0].children) {
|
||||
records.push({
|
||||
_id: data.id,
|
||||
name: data.label,
|
||||
@ -276,7 +276,7 @@ export default class extends Vue {
|
||||
try {
|
||||
await this.$refs.modalForm.validate()
|
||||
const subArr = []
|
||||
for (const s of this.record.actions!) {
|
||||
for (const s of this.record.actions) {
|
||||
subArr.push({
|
||||
id: `${this.record.id}:${s}`,
|
||||
label: s
|
||||
@ -303,37 +303,6 @@ export default class extends Vue {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bottom {
|
||||
margin-top: 13px;
|
||||
line-height: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.bottom span{
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0;
|
||||
min-height: auto;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.one-block{
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 3px;
|
||||
transition: .2s;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
@ -9,40 +9,34 @@
|
||||
|
||||
<el-table
|
||||
:data="rolesList"
|
||||
stripe
|
||||
style="width: 100%;margin-top:30px;"
|
||||
border
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="角色key"
|
||||
prop="key"
|
||||
>
|
||||
<template slot-scope="{row}">
|
||||
{{ row.key }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="角色名"
|
||||
prop="name"
|
||||
>
|
||||
<template slot-scope="{row}">
|
||||
{{ row.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="权限"
|
||||
prop="permissions"
|
||||
:formatter="formatPermissionCol"
|
||||
>
|
||||
<template slot-scope="{row}">
|
||||
{{ row.permissions.join(',') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="header-center"
|
||||
label="备注"
|
||||
prop="comment"
|
||||
>
|
||||
<template slot-scope="{row}">
|
||||
{{ row.comment }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
@ -89,12 +83,26 @@
|
||||
placeholder="角色名"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="权限">
|
||||
<tag-input
|
||||
placeholder="输入权限"
|
||||
v-model = "role.permissions"
|
||||
v-on:tag-change="tagChange"
|
||||
/>
|
||||
<el-form-item label="操作" prop="permissions">
|
||||
<el-select
|
||||
v-model="role.permissions"
|
||||
multiple
|
||||
filterable
|
||||
:filter-method = "filterPermission"
|
||||
allow-create
|
||||
default-first-option
|
||||
style="width: 60%"
|
||||
@change="permissionChange"
|
||||
placeholder="请选择权限">
|
||||
<el-option
|
||||
v-for="item in filterPermissions"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id">
|
||||
<span style="float: left">{{ item.label }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input
|
||||
@ -126,15 +134,20 @@
|
||||
<script lang="ts">
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { getRoles, saveRole, deleteRole } from '@/api/roles'
|
||||
import { deleteRole, getRoles, saveRole } from '@/api/roles'
|
||||
import TagInput from '@/components/TagInput/index.vue'
|
||||
import { getPermissions } from '@/api/permissions'
|
||||
|
||||
export interface IRole {
|
||||
key: string
|
||||
name: string
|
||||
comment: string
|
||||
permissions: string[]
|
||||
pstr: string
|
||||
}
|
||||
|
||||
export interface IPermission {
|
||||
id: string
|
||||
label: string
|
||||
}
|
||||
|
||||
const defaultRole: IRole = {
|
||||
@ -142,7 +155,6 @@ const defaultRole: IRole = {
|
||||
name: '',
|
||||
comment: '',
|
||||
permissions: [],
|
||||
pstr: ''
|
||||
}
|
||||
|
||||
@Component({
|
||||
@ -157,14 +169,12 @@ export default class extends Vue {
|
||||
private dialogVisible = false
|
||||
private dialogType = 'new'
|
||||
private checkStrictly = false
|
||||
private permissions: IPermission[] = []
|
||||
private filterPermissions: IPermission[] = []
|
||||
|
||||
created() {
|
||||
this.getRoles()
|
||||
}
|
||||
|
||||
private tagChange(vals: string[]) {
|
||||
console.log('tag change: ', vals)
|
||||
this.role.pstr = this.role.permissions.join(',')
|
||||
async created() {
|
||||
await this.getRoles()
|
||||
await this.getRemotePermissions()
|
||||
}
|
||||
|
||||
private async getRoles() {
|
||||
@ -184,7 +194,6 @@ export default class extends Vue {
|
||||
this.dialogVisible = true
|
||||
this.checkStrictly = true
|
||||
this.role = cloneDeep(scope.row)
|
||||
this.role.pstr = this.role.permissions.join(',')
|
||||
}
|
||||
|
||||
private handleDelete(scope: any) {
|
||||
@ -207,7 +216,6 @@ export default class extends Vue {
|
||||
|
||||
private async confirmRole() {
|
||||
const isEdit = this.dialogType === 'edit'
|
||||
this.role.permissions = this.role.pstr.split(',')
|
||||
await saveRole(this.role)
|
||||
|
||||
if (isEdit) {
|
||||
@ -234,5 +242,54 @@ export default class extends Vue {
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
|
||||
private async getRemotePermissions() {
|
||||
const { data } = await getPermissions()
|
||||
for (const sub of data) {
|
||||
for (const c of sub.children) {
|
||||
this.permissions.push({
|
||||
id: c.id,
|
||||
label: `${sub.label}:${c.label}`
|
||||
})
|
||||
}
|
||||
}
|
||||
this.filterPermission()
|
||||
}
|
||||
|
||||
private filterPermission(val?: string) {
|
||||
if (val) {
|
||||
this.filterPermissions = this.permissions.filter(data => {
|
||||
return data.id.indexOf(val) >= 0 || data.label.indexOf(val) >= 0
|
||||
})
|
||||
} else {
|
||||
this.filterPermissions = [...this.permissions]
|
||||
}
|
||||
}
|
||||
|
||||
private formatPermissionCol(row: number, column: number, cellValue: string[]) {
|
||||
const results: string[] = []
|
||||
for (const p of cellValue) {
|
||||
const data: IPermission | undefined = this.permissions.find(o => o.id === p)
|
||||
if (data) {
|
||||
results.push(data.label)
|
||||
} else {
|
||||
results.push(p)
|
||||
}
|
||||
}
|
||||
return results.join(',')
|
||||
}
|
||||
|
||||
private permissionChange(vals: string[]) {
|
||||
if (vals.length > 0) {
|
||||
const lastVal = this.role.permissions[this.role.permissions.length - 1]
|
||||
if (!/^([a-zA-Z0-9*]:[a-zA-Z0-9*]|\*)$/.test(lastVal)) {
|
||||
this.role.permissions.pop()
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: '权限的格式错误, 比如 app:read, app:*'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user