151 lines
3.3 KiB
Vue
151 lines
3.3 KiB
Vue
<template>
|
|
<ResizablePage
|
|
:defaultWidth="200"
|
|
:minWidth="150"
|
|
:maxWidth="420"
|
|
bgColor="#fff"
|
|
>
|
|
<template #sidebar>
|
|
<div class="sidebar-content">
|
|
<FilterSelect
|
|
:list-data="listData"
|
|
node-key="moduleId"
|
|
label-key="moduleName"
|
|
@item-click="handleItemClick"
|
|
@edit="handleEdit"
|
|
@delete="handleDelete"
|
|
@view="handleView"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template #main>
|
|
<div class="main-content">
|
|
<vUser @refresh-role-list="getListData" />
|
|
</div>
|
|
</template>
|
|
</ResizablePage>
|
|
|
|
<PDialog
|
|
v-model="dialogVisible"
|
|
title="模块授权"
|
|
:loading="saveLoading"
|
|
@close="handleDialogClose"
|
|
@reset="handleDialogReset"
|
|
@confirm="handleSave"
|
|
>
|
|
<vRole ref="formComponentRef" :form-data="roleForm" />
|
|
</PDialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
|
|
import ResizablePage from '@/components/Table/proResizable.vue'
|
|
import FilterSelect from '@/components/Table/proFilterSelect.vue'
|
|
import PDialog from '@/components/Dialog/proDialog.vue'
|
|
import { getHomeModuleList } from '@/api/bizModule'
|
|
import { getHomeModuleUserSave , getHomeModuleUserDelete } from '@/api/bizModuleUser'
|
|
|
|
import vUser from './list.vue'
|
|
import vRole from './role.vue'
|
|
|
|
const FormValues = ref({
|
|
menuId: ''
|
|
});
|
|
|
|
const listData = ref([]);
|
|
const saveLoading = ref(false)
|
|
const dialogVisible = ref(false)
|
|
const roleForm = ref({})
|
|
const formComponentRef = ref(null)
|
|
|
|
const getListData = async () => {
|
|
try {
|
|
const res = await getHomeModuleList();
|
|
listData.value = res || []
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
const handleItemClick = (item) => {
|
|
console.log('选中了：', item)
|
|
}
|
|
|
|
const handleEdit = (item) => {
|
|
roleForm.value = { ...item }
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
const handleDelete = (item) => {
|
|
ElMessageBox.confirm('确定要删除当前模块吗?', '删除确认', {
|
|
type: 'warning',
|
|
closeOnClickModal: false,
|
|
showClose: false
|
|
})
|
|
.then(async () => {
|
|
const reqParams = {
|
|
roleId: item.roleId
|
|
}
|
|
const res = await getHomeModuleUserDelete(reqParams);
|
|
ElMessage.success(res.msg);
|
|
getListData();
|
|
})
|
|
.catch(() => {
|
|
ElMessage.info('已取消删除模块操作');
|
|
});
|
|
}
|
|
|
|
const handleView = (item) => {
|
|
console.log('查看', item)
|
|
}
|
|
|
|
const handleDialogClose = () => {
|
|
roleForm.value = {}
|
|
dialogVisible.value = false
|
|
}
|
|
|
|
const handleDialogReset = () => {
|
|
if (formComponentRef.value) {
|
|
formComponentRef.value.resetForm()
|
|
ElMessage.info('表单已重置')
|
|
}
|
|
}
|
|
|
|
const handleSave = async () => {
|
|
if (formComponentRef.value) {
|
|
const isValid = await formComponentRef.value.validate()
|
|
if (!isValid) {
|
|
ElMessage.warning('表单验证失败,请检查必填项');
|
|
return
|
|
}
|
|
}
|
|
const reqParams = {
|
|
... roleForm.value
|
|
}
|
|
saveLoading.value = true
|
|
const res = await getHomeModuleUserSave(reqParams);
|
|
setTimeout(() => {
|
|
ElMessage.success(res.msg)
|
|
saveLoading.value = false
|
|
dialogVisible.value = false
|
|
getListData()
|
|
}, 500)
|
|
}
|
|
|
|
onMounted(() => {
|
|
getListData();
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.sidebar-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.main-content {
|
|
padding: 0px;
|
|
height: 100%;
|
|
}
|
|
</style> |