116 lines
3.6 KiB
Vue
116 lines
3.6 KiB
Vue
<template>
|
|
<a-drawer
|
|
v-model:visible="data.isShow"
|
|
:title=" data.isAdd ? '新增角色' : '修改角色' "
|
|
width="600"
|
|
:mask-closable="false"
|
|
@close="data.isShow = false"
|
|
>
|
|
<a-form
|
|
ref="infoFormModel"
|
|
:model="data.saveObject"
|
|
:label-col="{span: 4}"
|
|
:rules="data.rules"
|
|
>
|
|
<a-form-item label="角色名称：" name="roleName">
|
|
<a-input :disabled="!$access('ENT_UR_ROLE_EDIT')" v-model:value="data.saveObject['roleName']" />
|
|
</a-form-item>
|
|
</a-form>
|
|
|
|
<!-- 角色权限分配 -->
|
|
<RoleDist ref="roleDist" />
|
|
|
|
<div class="drawer-btn-center">
|
|
<a-button
|
|
:style="{ marginRight: '8px' }"
|
|
|
|
@click="data.isShow = false"
|
|
>
|
|
<close-outlined />
|
|
取消
|
|
</a-button>
|
|
<a-button
|
|
type="primary"
|
|
:loading="data.confirmLoading"
|
|
|
|
@click="handleOkFunc"
|
|
>
|
|
<check-outlined />
|
|
保存
|
|
</a-button>
|
|
</div>
|
|
</a-drawer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { API_URL_ROLE_LIST, req } from '@/api/manage'
|
|
import RoleDist from './RoleDist.vue'
|
|
import {ref,reactive,nextTick,getCurrentInstance} from 'vue'
|
|
import {message} from 'ant-design-vue'
|
|
const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties
|
|
const props= defineProps ({
|
|
callbackFunc: { type: Function,default:null }
|
|
})
|
|
const roleDist = ref()
|
|
const infoFormModel = ref()
|
|
const data = reactive({
|
|
confirmLoading: false, // 显示确定按钮loading图标
|
|
isAdd: true, // 新增 or 修改页面标识
|
|
isShow: false, // 是否显示弹层/抽屉
|
|
saveObject: {}, // 数据对象
|
|
recordId: null, // 更新对象ID
|
|
rules: {
|
|
roleName: [
|
|
{ required: true, message: '请输入角色名称', trigger: 'blur' }
|
|
]
|
|
}
|
|
})
|
|
|
|
defineExpose({show})
|
|
function show(recordId) { // 弹层打开事件
|
|
data.isAdd = !recordId
|
|
data.saveObject = {} // 数据清空
|
|
data.confirmLoading = false // 关闭loading
|
|
|
|
if (infoFormModel.value !== undefined) {
|
|
infoFormModel.value.resetFields()
|
|
}
|
|
if (!data.isAdd) { // 修改信息 延迟展示弹层
|
|
data.recordId = recordId
|
|
req.getById(API_URL_ROLE_LIST, recordId).then(res => { data.saveObject = res })
|
|
data.isShow = true
|
|
} else {
|
|
data.isShow = true // 立马展示弹层信息
|
|
}
|
|
// 初始化角色权限分配功能
|
|
nextTick(()=>{
|
|
roleDist.value.initTree(recordId)
|
|
})
|
|
}
|
|
|
|
function handleOkFunc () { // 点击【确认】按钮事件
|
|
infoFormModel.value.validate().then(valid =>{
|
|
data.confirmLoading = true // 显示loading
|
|
|
|
// 保存选择的权限信息
|
|
const selectedEntIdList = roleDist.value.getSelectedEntIdList()
|
|
data.saveObject['entIdListStr'] = selectedEntIdList ? JSON.stringify(selectedEntIdList) : ''
|
|
|
|
if (data.isAdd) {
|
|
req.add(API_URL_ROLE_LIST, data.saveObject).then(res => {
|
|
message.success('新增成功')
|
|
data.isShow = false
|
|
props.callbackFunc() // 刷新列表
|
|
}).catch(res => { data.confirmLoading = false })
|
|
} else {
|
|
req.updateById(API_URL_ROLE_LIST, data.recordId, data.saveObject).then(res => {
|
|
message.success('修改成功')
|
|
data.isShow = false
|
|
props.callbackFunc() // 刷新列表
|
|
}).catch(res => { data.confirmLoading = false })
|
|
}
|
|
})
|
|
}
|
|
|
|
</script>
|