|
|
@@ -1,161 +1,169 @@
|
|
|
-<template>
|
|
|
- <a-card :bordered="false" :style="{ height: '100%' }">
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :md="4">
|
|
|
- <a-list itemLayout="vertical" :dataSource="roles">
|
|
|
- <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
|
|
|
- <a-list-item-meta :style="{ marginBottom: '0' }">
|
|
|
- <span slot="description" style="text-align: center; display: block">{{ item.describe }}</span>
|
|
|
- <a slot="title" style="text-align: center; display: block" @click="edit(item)">{{ item.name }}</a>
|
|
|
- </a-list-item-meta>
|
|
|
- </a-list-item>
|
|
|
- </a-list>
|
|
|
- </a-col>
|
|
|
- <a-col :md="20">
|
|
|
- <div style="max-width: 800px">
|
|
|
- <a-divider v-if="isMobile()" />
|
|
|
- <div v-if="mdl.id">
|
|
|
- <h3>角色：{{ mdl.name }}</h3>
|
|
|
- </div>
|
|
|
- <a-form :form="form" :layout="isMobile() ? 'vertical' : 'horizontal'">
|
|
|
- <a-form-item label="唯一键">
|
|
|
- <a-input v-decorator="[ 'id', {rules: [{ required: true, message: 'Please input unique key!' }]} ]" placeholder="请填写唯一键" />
|
|
|
- </a-form-item>
|
|
|
-
|
|
|
- <a-form-item label="角色名称">
|
|
|
- <a-input v-decorator="[ 'name', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
|
|
|
- </a-form-item>
|
|
|
-
|
|
|
- <a-form-item label="状态">
|
|
|
- <a-select v-decorator="[ 'status', {rules: []} ]">
|
|
|
- <a-select-option :value="1">正常</a-select-option>
|
|
|
- <a-select-option :value="2">禁用</a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-form-item>
|
|
|
-
|
|
|
- <a-form-item label="备注说明">
|
|
|
- <a-textarea :row="3" v-decorator="[ 'describe', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
|
|
|
- </a-form-item>
|
|
|
-
|
|
|
- <a-form-item label="拥有权限">
|
|
|
- <a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
|
|
|
- <a-col :xl="4" :lg="24">
|
|
|
- {{ permission.name }}：
|
|
|
- </a-col>
|
|
|
- <a-col :xl="20" :lg="24">
|
|
|
- <a-checkbox
|
|
|
- v-if="permission.actionsOptions.length > 0"
|
|
|
- :indeterminate="permission.indeterminate"
|
|
|
- :checked="permission.checkedAll"
|
|
|
- @change="onChangeCheckAll($event, permission)">
|
|
|
- 全选
|
|
|
- </a-checkbox>
|
|
|
- <a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form-item>
|
|
|
-
|
|
|
- </a-form>
|
|
|
- </div>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-card>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import { getRoleList, getPermissions } from '@/api/manage'
|
|
|
- import { mixinDevice } from '@/utils/mixin'
|
|
|
- import { actionToObject } from '@/utils/permissions'
|
|
|
- import pick from 'lodash.pick'
|
|
|
-
|
|
|
- export default {
|
|
|
- name: 'RoleList',
|
|
|
- mixins: [mixinDevice],
|
|
|
- components: {},
|
|
|
- data () {
|
|
|
- return {
|
|
|
- form: this.$form.createForm(this),
|
|
|
- mdl: {},
|
|
|
-
|
|
|
- roles: [],
|
|
|
- permissions: []
|
|
|
- }
|
|
|
- },
|
|
|
- created () {
|
|
|
- getRoleList().then((res) => {
|
|
|
- this.roles = res.result.data
|
|
|
- this.roles.push({
|
|
|
- id: '-1',
|
|
|
- name: '新增角色',
|
|
|
- describe: '新增一个角色'
|
|
|
- })
|
|
|
- console.log('this.roles', this.roles)
|
|
|
- })
|
|
|
- this.loadPermissions()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- callback (val) {
|
|
|
- console.log(val)
|
|
|
- },
|
|
|
-
|
|
|
- add () {
|
|
|
- this.edit({ id: 0 })
|
|
|
- },
|
|
|
-
|
|
|
- edit (record) {
|
|
|
- this.mdl = Object.assign({}, record)
|
|
|
- // 有权限表，处理勾选
|
|
|
- if (this.mdl.permissions && this.permissions) {
|
|
|
- // 先处理要勾选的权限结构
|
|
|
- const permissionsAction = {}
|
|
|
- this.mdl.permissions.forEach(permission => {
|
|
|
- permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
|
|
|
- })
|
|
|
- // 把权限表遍历一遍，设定要勾选的权限 action
|
|
|
- this.permissions.forEach(permission => {
|
|
|
- permission.selected = permissionsAction[permission.id]
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- this.$nextTick(() => {
|
|
|
- this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
|
|
|
- })
|
|
|
- console.log('this.mdl', this.mdl)
|
|
|
- },
|
|
|
-
|
|
|
- onChangeCheck (permission) {
|
|
|
- permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
|
|
|
- permission.checkedAll = permission.selected.length === permission.actionsOptions.length
|
|
|
- },
|
|
|
- onChangeCheckAll (e, permission) {
|
|
|
- Object.assign(permission, {
|
|
|
- selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
|
|
|
- indeterminate: false,
|
|
|
- checkedAll: e.target.checked
|
|
|
- })
|
|
|
- },
|
|
|
- loadPermissions () {
|
|
|
- getPermissions().then(res => {
|
|
|
- const result = res.result
|
|
|
- this.permissions = result.map(permission => {
|
|
|
- const options = actionToObject(permission.actionData)
|
|
|
- permission.checkedAll = false
|
|
|
- permission.selected = []
|
|
|
- permission.indeterminate = false
|
|
|
- permission.actionsOptions = options.map(option => {
|
|
|
- return {
|
|
|
- label: option.describe,
|
|
|
- value: option.action
|
|
|
- }
|
|
|
- })
|
|
|
- return permission
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-
|
|
|
+<template>
|
|
|
+ <a-card :bordered="false" :style="{ height: '100%' }">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :md="4">
|
|
|
+ <a-list itemLayout="vertical" :dataSource="roles">
|
|
|
+ <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
|
|
|
+ <a-list-item-meta :style="{ marginBottom: '0' }">
|
|
|
+ <span slot="description" style="text-align: center; display: block">{{ item.describe }}</span>
|
|
|
+ <a slot="title" style="text-align: center; display: block" @click="edit(item)">{{ item.name }}</a>
|
|
|
+ </a-list-item-meta>
|
|
|
+ </a-list-item>
|
|
|
+ </a-list>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="20">
|
|
|
+ <div style="max-width: 800px">
|
|
|
+ <a-divider v-if="isMobile()" />
|
|
|
+ <div v-if="mdl.id">
|
|
|
+ <h3>角色：{{ mdl.name }}</h3>
|
|
|
+ </div>
|
|
|
+ <a-form :form="form" :layout="isMobile() ? 'vertical' : 'horizontal'">
|
|
|
+ <a-form-item label="唯一键">
|
|
|
+ <a-input v-decorator="[ 'id', {rules: [{ required: true, message: 'Please input unique key!' }]} ]" placeholder="请填写唯一键" />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item label="角色名称">
|
|
|
+ <a-input v-decorator="[ 'name', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item label="状态">
|
|
|
+ <a-select v-decorator="[ 'status', {rules: []} ]">
|
|
|
+ <a-select-option :value="1">正常</a-select-option>
|
|
|
+ <a-select-option :value="2">禁用</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item label="备注说明">
|
|
|
+ <a-textarea :row="3" v-decorator="[ 'describe', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item label="拥有权限">
|
|
|
+ <a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
|
|
|
+ <a-col :xl="4" :lg="24">
|
|
|
+ {{ permission.name }}：
|
|
|
+ </a-col>
|
|
|
+ <a-col :xl="20" :lg="24">
|
|
|
+ <a-checkbox
|
|
|
+ v-if="permission.actionsOptions.length > 0"
|
|
|
+ :indeterminate="permission.indeterminate"
|
|
|
+ :checked="permission.checkedAll"
|
|
|
+ @change="onChangeCheckAll($event, permission)">
|
|
|
+ 全选
|
|
|
+ </a-checkbox>
|
|
|
+ <a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { getRoleList, getPermissions } from '@/api/manage'
|
|
|
+ import { mixinDevice } from '@/utils/mixin'
|
|
|
+ import { actionToObject } from '@/utils/permissions'
|
|
|
+ import pick from 'lodash.pick'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'RoleList',
|
|
|
+ mixins: [mixinDevice],
|
|
|
+ components: {},
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ mdl: {},
|
|
|
+
|
|
|
+ roles: [],
|
|
|
+ permissions: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ getRoleList().then((res) => {
|
|
|
+ this.roles = res.result.data
|
|
|
+ this.roles.push({
|
|
|
+ id: '-1',
|
|
|
+ name: '新增角色',
|
|
|
+ describe: '新增一个角色'
|
|
|
+ })
|
|
|
+ console.log('this.roles', this.roles)
|
|
|
+ })
|
|
|
+ this.loadPermissions()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ callback (val) {
|
|
|
+ console.log(val)
|
|
|
+ },
|
|
|
+
|
|
|
+ add () {
|
|
|
+ this.edit({ id: 0 })
|
|
|
+ },
|
|
|
+
|
|
|
+ edit (record) {
|
|
|
+ this.mdl = Object.assign({}, record)
|
|
|
+ // 有权限表，处理勾选
|
|
|
+ if (this.mdl.permissions && this.permissions) {
|
|
|
+ // 先处理要勾选的权限结构
|
|
|
+ const permissionsAction = {}
|
|
|
+ this.mdl.permissions.forEach(permission => {
|
|
|
+ permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
|
|
|
+ })
|
|
|
+
|
|
|
+ console.log('permissionsAction', permissionsAction)
|
|
|
+ // 把权限表遍历一遍，设定要勾选的权限 action
|
|
|
+ this.permissions.forEach(permission => {
|
|
|
+ const selected = permissionsAction[permission.id]
|
|
|
+ permission.selected = selected || []
|
|
|
+ })
|
|
|
+
|
|
|
+ console.log('this.permissions', this.permissions)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
|
|
|
+ })
|
|
|
+ console.log('this.mdl', this.mdl)
|
|
|
+ },
|
|
|
+
|
|
|
+ onChangeCheck (permission) {
|
|
|
+ permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
|
|
|
+ permission.checkedAll = permission.selected.length === permission.actionsOptions.length
|
|
|
+ },
|
|
|
+ onChangeCheckAll (e, permission) {
|
|
|
+
|
|
|
+ console.log('permission:', permission)
|
|
|
+
|
|
|
+ Object.assign(permission, {
|
|
|
+ selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
|
|
|
+ indeterminate: false,
|
|
|
+ checkedAll: e.target.checked
|
|
|
+ })
|
|
|
+ },
|
|
|
+ loadPermissions () {
|
|
|
+ getPermissions().then(res => {
|
|
|
+ const result = res.result
|
|
|
+ this.permissions = result.map(permission => {
|
|
|
+ const options = actionToObject(permission.actionData)
|
|
|
+ permission.checkedAll = false
|
|
|
+ permission.selected = []
|
|
|
+ permission.indeterminate = false
|
|
|
+ permission.actionsOptions = options.map(option => {
|
|
|
+ return {
|
|
|
+ label: option.describe,
|
|
|
+ value: option.action
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return permission
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
</style>
|
Anan Yang