<template>
|
<a-modal
|
title="操作"
|
:width="800"
|
:visible="visible"
|
:confirmLoading="confirmLoading"
|
@ok="handleOk"
|
@cancel="handleCancel"
|
>
|
<a-spin :spinning="confirmLoading">
|
<a-form :form="form">
|
|
<a-form-item
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
label="唯一识别码"
|
hasFeedback
|
>
|
<a-input placeholder="唯一识别码" disabled="disabled" v-decorator="[ 'id', {rules: []} ]" />
|
</a-form-item>
|
|
<a-form-item
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
label="角色名称"
|
hasFeedback >
|
<a-input placeholder="起一个名字" v-decorator="[ 'name', {rules: [{ required: true, message: '不起一个名字吗？' }] }]" />
|
</a-form-item>
|
|
<a-form-item
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
label="状态"
|
hasFeedback >
|
<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
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
label="描述"
|
hasFeedback
|
>
|
<a-textarea :rows="5" placeholder="..." v-decorator="[ 'describe', { rules: [] } ]" />
|
</a-form-item>
|
|
<a-divider/>
|
|
<a-form-item
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
label="拥有权限"
|
hasFeedback
|
>
|
<a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
|
<a-col :span="4">
|
{{ permission.name }}：
|
</a-col>
|
<a-col :span="20">
|
<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>
|
</a-spin>
|
</a-modal>
|
</template>
|
|
<script>
|
import { getPermissions } from '@/api/manage'
|
import { actionToObject } from '@/utils/permissions'
|
import pick from 'lodash.pick'
|
|
export default {
|
name: "RoleModal",
|
data () {
|
return {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 },
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 },
|
},
|
visible: false,
|
confirmLoading: false,
|
mdl: {},
|
|
form: this.$form.createForm(this),
|
permissions: []
|
}
|
},
|
created () {
|
this.loadPermissions()
|
},
|
methods: {
|
add () {
|
this.edit({ id: 0 })
|
},
|
edit (record) {
|
this.mdl = Object.assign({}, record)
|
this.visible = true
|
|
// 有权限表，处理勾选
|
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)
|
|
},
|
close () {
|
this.$emit('close')
|
this.visible = false
|
},
|
handleOk () {
|
const _this = this
|
// 触发表单验证
|
this.form.validateFields((err, values) => {
|
// 验证表单没错误
|
if (!err) {
|
console.log('form values', values)
|
|
_this.confirmLoading = true
|
// 模拟后端请求 2000 毫秒延迟
|
new Promise((resolve) => {
|
setTimeout(() => resolve(), 2000)
|
}).then(() => {
|
// Do something
|
_this.$message.success('保存成功')
|
_this.$emit('ok')
|
}).catch(() => {
|
// Do something
|
}).finally(() => {
|
_this.confirmLoading = false
|
_this.close()
|
})
|
}
|
})
|
},
|
handleCancel () {
|
this.close()
|
},
|
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 => {
|
let 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>
|
