<template>
|
<page-header-wrapper
|
:breadcrumb="false"
|
>
|
<a-spin
|
v-bind="loadingProps"
|
>
|
<a-card :bordered="false">
|
<a-form
|
:form="form"
|
:model="formData"
|
:label-col="labelCol"
|
:wrapper-col="wrapperCol"
|
>
|
<a-form-item
|
label="角色名称"
|
name="rolename">
|
<a-input style="width: 50%" v-decorator="['rolename', {initialValue:formData.rolename,rules: [{required: true, message: '请填写角色名称'}]}]"/>
|
</a-form-item>
|
<a-form-item
|
label="备注"
|
name="memo">
|
<a-input style="width: 50%" v-decorator="['memo', {initialValue:formData.memo,rules: [{required: false, message: ''}]}]"/>
|
</a-form-item>
|
<a-form-item
|
label="权限设置"
|
name="theme">
|
<a-tree
|
style="width: 100%"
|
:tree-data="treeData"
|
:checkable="true"
|
v-model:checkedKeys="checked"
|
@check="checkNode"
|
/>
|
</a-form-item>
|
|
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
|
<a-button type="primary" @click="handleAddTask">{{ this.btntxt }}</a-button>
|
<a-button @click="backList" style="margin-left: 10px">取消</a-button>
|
</a-form-item>
|
</a-form>
|
</a-card>
|
</a-spin>
|
|
</page-header-wrapper>
|
</template>
|
|
<script>
|
import { GetMenuRole, AddRoleSet, GetRoleDetail, EditRole } from '@/api/rolemanage'
|
export default {
|
name: 'Roleset',
|
components: {
|
},
|
data () {
|
return {
|
loadingProps:
|
{
|
spinning: false
|
},
|
btntxt: '创建角色',
|
treeData: [],
|
checked: [],
|
halfChecked: [],
|
formData: {
|
rolename: '',
|
memo: ''
|
},
|
roleId: '',
|
labelCol: { span: 4 },
|
wrapperCol: { span: 14 },
|
formLayout: 'horizontal',
|
form: this.$form.createForm(this, { name: 'coordinated' })
|
}
|
},
|
created () {
|
this.getRoleList()
|
const roleId = this.$router.currentRoute.query.roleid
|
if (roleId != undefined) {
|
this.roleId = roleId
|
this.btntxt = '修改角色'
|
} else {
|
this.roleId = ''
|
}
|
this.getDetail()
|
},
|
methods: {
|
// 获取详情
|
getDetail () {
|
if (this.roleId != '') {
|
const parameter = {
|
RoleId: this.roleId
|
}
|
GetRoleDetail(parameter).then(res => {
|
this.formData.rolename = res.result.name
|
this.formData.memo = res.result.memo
|
const check = res.result.roles.split(',')
|
const hasCheck = []
|
check.forEach(element => {
|
if (element.indexOf('role_') < 0) {
|
hasCheck.push(element)
|
}
|
})
|
this.checked = hasCheck
|
})
|
}
|
},
|
// 获取权限数据
|
getRoleList () {
|
GetMenuRole().then(res => {
|
this.treeData = res.result
|
})
|
},
|
checkNode (check, event) {
|
this.checked = check
|
this.halfChecked = event.halfCheckedKeys
|
},
|
backList () {
|
this.$router.push({ path: '/opsystem/rolelist' })
|
},
|
// 新增
|
handleAddTask () {
|
this.form.validateFields((err, values) => {
|
if (!err) {
|
if (this.checked == null || this.checked.length == 0) {
|
this.$message.error(`请设置菜单权限`)
|
return
|
}
|
const hasCheckstr = this.checked.join(',')
|
const hasCheck = hasCheckstr.split(',')
|
this.halfChecked.forEach(element => {
|
hasCheck.push(element)
|
})
|
const parameter = {
|
Name: values.rolename,
|
Roles: hasCheck.join(','),
|
Memo: values.memo
|
}
|
this.loadingProps.spinning = true
|
if (this.roleId != '') { // 修改
|
parameter.RoleId = this.roleId
|
EditRole(parameter).then(res => {
|
if (res.result) {
|
this.$message.success(`修改成功！`)
|
this.$router.push({ path: '/opsystem/rolelist' })
|
}
|
}).finally(() => {
|
this.loadingProps.spinning = false
|
})
|
} else { // 新增
|
AddRoleSet(parameter).then(res => {
|
if (res.result) {
|
this.$message.success(`创建成功！`)
|
this.$router.push({ path: '/opsystem/rolelist' })
|
}
|
}).finally(() => {
|
this.loadingProps.spinning = false
|
})
|
}
|
}
|
})
|
}
|
}
|
}
|
</script>
|
