167 lines
3.8 KiB
Java
167 lines
3.8 KiB
Java
<!--用户管理-角色配置弹框-->
|
|
<template>
|
|
<a-modal
|
|
:title="title"
|
|
:width="650"
|
|
:closable="true"
|
|
:visible="visible"
|
|
:footer='null'
|
|
@cancel="handleCancel"
|
|
>
|
|
<div class='diolag-area'>
|
|
<a-spin :spinning='spinLoading'>
|
|
<a-form-model
|
|
class='tag-module'
|
|
ref='ruleForm'
|
|
:model='form'
|
|
:rules='rules'
|
|
:label-col='labelCol'
|
|
:wrapper-col='wrapperCol'
|
|
>
|
|
<a-row :gutter='24'>
|
|
<a-col :span='24'>
|
|
<a-form-item label="角色配置" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<a-select mode="multiple" placeholder="请选择角色" v-model="selectedRole">
|
|
<a-select-option v-for="(role) in roleList" :key="role.id" :value="role.id">
|
|
<span style="display: inline-block;width: 100%">
|
|
{{ role.roleName }}
|
|
</span>
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form-model>
|
|
</a-spin>
|
|
<div class='drawer-bootom-button'>
|
|
<a-button style='margin-right: .8rem' @click='handleCancel'>取消</a-button>
|
|
<a-button @click='handleSubmit' type='primary' :loading='confirmLoading'>提交</a-button>
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import { postAction, getAction } from '@/api/manage'
|
|
import Vue from 'vue'
|
|
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
|
|
|
export default {
|
|
name: 'RoleAssignment',
|
|
components: {},
|
|
data () {
|
|
return {
|
|
token: Vue.ls.get(ACCESS_TOKEN),
|
|
title: '角色配置',
|
|
total: 0,
|
|
selectedRowKeysDate: {},
|
|
loading: false,
|
|
editId: '',
|
|
visible: false,
|
|
selectedRole: undefined,
|
|
labelCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 7 }
|
|
},
|
|
wrapperCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 14 }
|
|
},
|
|
form: {},
|
|
rules: {},
|
|
areaTable: [],
|
|
flag: false, // 表单提交标识
|
|
spinLoading: false,
|
|
confirmLoading: false,
|
|
selectedRowKeys: [],
|
|
roleList: [],
|
|
defaultValue: undefined
|
|
}
|
|
},
|
|
props: {
|
|
selectedRowKeysArray: {
|
|
type: Array,
|
|
default: () => [],
|
|
require: true
|
|
}
|
|
},
|
|
mounted () {
|
|
this.loadData()
|
|
},
|
|
methods: {
|
|
loadData () {
|
|
this.loading = true
|
|
getAction(`sys/role/queryall`, {}).then(res => {
|
|
if (res.success) {
|
|
this.roleList = [...res.result]
|
|
}
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
show () {
|
|
this.visible = true
|
|
},
|
|
handleCancel () {
|
|
this.visible = false
|
|
this.$emit('rolevisible', false)
|
|
},
|
|
// 保存
|
|
handleSubmit () {
|
|
const param = { ids: this.selectedRowKeysArray.join(','), selectedroles: `${this.selectedRole.join(',')}` }
|
|
postAction('/sys/user/setRole', param).then((res) => {
|
|
this.visible = false
|
|
if (res.success) {
|
|
this.$emit('ok', false)
|
|
this.$message.success(res.message)
|
|
this.selectedRole = []
|
|
} else {
|
|
this.$message.warning(res.message)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='less' scoped>
|
|
@import '~@assets/less/common.less';
|
|
|
|
.diolag-area {
|
|
.table-area {
|
|
margin: 20px 0;
|
|
|
|
.action-edit {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.table-del {
|
|
color: red;
|
|
}
|
|
}
|
|
.drawer-bootom-button{
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
::v-deep .page{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
<style lang='less'>
|
|
.area-module {
|
|
.ant-modal-wrap {
|
|
.ant-modal {
|
|
.ant-modal-content {
|
|
.ant-modal-footer {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|