<template>
|
<a-modal
|
title="操作"
|
:width="800"
|
:visible="visible"
|
:confirmLoading="confirmLoading"
|
@ok="handleOk"
|
@cancel="handleCancel"
|
>
|
<a-steps :current="1">
|
<a-step>
|
<!-- <span slot="title">Finished</span> -->
|
<template slot="title">
|
Finished
|
</template>
|
<span slot="description">This is a description.</span>
|
</a-step>
|
<a-step title="In Progress" description="This is a description." />
|
<a-step title="Waiting" description="This is a description." />
|
</a-steps>
|
</a-modal>
|
</template>
|
|
<script>
|
import { getPermissions } from '@/api/manage'
|
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 () {
|
const that = this
|
getPermissions().then(res => {
|
const result = res.result
|
that.permissions = result.map(permission => {
|
const options = JSON.parse(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>
|
