commit：应用权限功能
This commit is contained in:
gesilong
233
src/views/system/role/RoleAssignAppForm.vue
Normal file
233
src/views/system/role/RoleAssignAppForm.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<DesignPopup v-model="dialogVisible" title="应用权限" :is-footer="true" width="40%">
|
||||
<div class="p-20px">
|
||||
<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
|
||||
<el-form-item label="角色名称">
|
||||
<el-tag>{{ formData.name }}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识">
|
||||
<el-tag>{{ formData.code }}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="应用权限">
|
||||
<el-card class="w-full h-400px !overflow-y-scroll" shadow="never">
|
||||
<template #header>
|
||||
全选/全不选:
|
||||
<el-switch
|
||||
v-model="treeNodeAll"
|
||||
active-text="是"
|
||||
inactive-text="否"
|
||||
inline-prompt
|
||||
@change="handleCheckedTreeNodeAll"
|
||||
/>
|
||||
</template>
|
||||
<!-- 修复：移除未使用的node变量，优化无子集Tree展示 -->
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="appOptions"
|
||||
:props="{ label: 'name', children: 'children' }"
|
||||
empty-text="暂无应用数据"
|
||||
node-key="id"
|
||||
show-checkbox
|
||||
check-strictly
|
||||
v-loading="tableLoading"
|
||||
class="app-tree-list"
|
||||
:indent="0"
|
||||
>
|
||||
<!-- 修复：只解构使用到的data，删除未使用的node -->
|
||||
<template #default="{ data }">
|
||||
<div class="app-tree-node">
|
||||
<span class="node-name">{{ data.name }}</span>
|
||||
<span class="node-clientId">客户端ID：{{ data.clientId }}</span>
|
||||
<span class="node-status">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="data.status" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-card>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</DesignPopup>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import * as RoleApi from '@/api/system/role'
|
||||
|
||||
defineOptions({ name: 'SystemRoleAssignAppForm' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const message = useMessage()
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const formLoading = ref(false)
|
||||
const tableLoading = ref(false)
|
||||
const formData = ref({
|
||||
id: 0,
|
||||
name: '',
|
||||
code: '',
|
||||
clientIds: [] as number[]
|
||||
})
|
||||
const formRef = ref()
|
||||
const treeRef = ref()
|
||||
const appOptions = ref<any[]>([])
|
||||
const treeNodeAll = ref(false)
|
||||
|
||||
// 优化Tree配置：明确指定无children，纯列表展示
|
||||
const treeProps = {
|
||||
label: 'name',
|
||||
children: () => [] // 强制返回空数组，彻底避免树形层级
|
||||
}
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (row: RoleApi.RoleVO) => {
|
||||
dialogVisible.value = true
|
||||
formLoading.value = true
|
||||
resetForm()
|
||||
// 设置角色信息
|
||||
formData.value.id = row.id
|
||||
formData.value.name = row.name
|
||||
formData.value.code = row.code
|
||||
try {
|
||||
// 加载应用列表（pageSize=99，模拟不分页）
|
||||
await getAppList()
|
||||
// 获取当前角色已有的应用ID
|
||||
const roleAppIds = await RoleApi.getRoleAppIds(row.id)
|
||||
formData.value.clientIds = roleAppIds
|
||||
// 设置Tree选中状态
|
||||
await nextTick()
|
||||
treeRef.value?.setCheckedNodes([])
|
||||
formData.value.clientIds.forEach(id => {
|
||||
treeRef.value?.setChecked(id, true, false)
|
||||
})
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
defineExpose({ open })
|
||||
|
||||
/** 获取应用列表（固定pageSize=99，不分页） */
|
||||
const getAppList = async () => {
|
||||
tableLoading.value = true
|
||||
try {
|
||||
const data = await RoleApi.getMyPage({
|
||||
pageNo: 1,
|
||||
pageSize: 99 // 设为99，覆盖大部分场景的数量，模拟不分页
|
||||
})
|
||||
// 优化：确保返回数据绝对没有children字段，避免树形展示
|
||||
appOptions.value = data.list.map(item => {
|
||||
const { children, ...rest } = item // 移除可能存在的children字段
|
||||
return { ...rest, children: [] } // 强制设置空children
|
||||
})
|
||||
} finally {
|
||||
tableLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 全选/全不选（适配Tree组件） */
|
||||
const handleCheckedTreeNodeAll = () => {
|
||||
if (treeNodeAll.value) {
|
||||
// 全选：选中所有节点
|
||||
treeRef.value?.setCheckedNodes(appOptions.value)
|
||||
formData.value.clientIds = appOptions.value.map(item => item.id)
|
||||
} else {
|
||||
// 全不选：清空选中
|
||||
treeRef.value?.setCheckedNodes([])
|
||||
formData.value.clientIds = []
|
||||
}
|
||||
}
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success'])
|
||||
const submitForm = async () => {
|
||||
if (!formRef) return
|
||||
const valid = await formRef.value.validate()
|
||||
if (!valid) return
|
||||
formLoading.value = true
|
||||
try {
|
||||
// 获取Tree选中的节点ID
|
||||
formData.value.clientIds = treeRef.value?.getCheckedKeys(false) as number[]
|
||||
const data = {
|
||||
roleId: formData.value.id,
|
||||
clientIds: formData.value.clientIds
|
||||
}
|
||||
await RoleApi.saveApp(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
dialogVisible.value = false
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
treeNodeAll.value = false
|
||||
formData.value = {
|
||||
id: 0,
|
||||
name: '',
|
||||
code: '',
|
||||
clientIds: []
|
||||
}
|
||||
appOptions.value = []
|
||||
treeRef.value?.setCheckedNodes([])
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 自定义Tree节点样式，模拟表格列布局
|
||||
.app-tree-list {
|
||||
::v-deep(.el-tree-node) {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #f5f7fa;
|
||||
}
|
||||
|
||||
::v-deep(.el-tree-node__content) {
|
||||
padding: 0 10px;
|
||||
height: 40px !important;
|
||||
// 移除树形节点的默认图标
|
||||
.el-tree-node__expand-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.el-tree-node__children) {
|
||||
padding-left: 0 !important; // 彻底去掉子节点缩进
|
||||
}
|
||||
}
|
||||
|
||||
// 节点内容布局
|
||||
.app-tree-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.node-name {
|
||||
flex: 0 0 120px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.node-clientId {
|
||||
flex: 0 0 150px;
|
||||
color: #666;
|
||||
}
|
||||
.node-status {
|
||||
flex: 0 0 80px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片样式优化
|
||||
::v-deep(.el-card__header) {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
::v-deep(.el-card__body) {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user