南宁网宿科技
160 lines
3.9 KiB
Vue
160 lines
3.9 KiB
Vue
<!-- 角色权限分配弹窗 -->
|
|
<template>
|
|
<ele-modal
|
|
:width="460"
|
|
title="分配权限"
|
|
:visible="visible"
|
|
:confirm-loading="loading"
|
|
@update:visible="updateVisible"
|
|
@ok="save"
|
|
>
|
|
<a-spin :spinning="authLoading">
|
|
<div style="height: 60vh" class="ele-scrollbar-hover">
|
|
<a-tree
|
|
:checkable="true"
|
|
:show-icon="true"
|
|
:tree-data="(authData as any)"
|
|
v-model:expandedKeys="expandKeys"
|
|
v-model:checkedKeys="checkedKeys"
|
|
>
|
|
<template #icon="{ menuIcon }">
|
|
<component v-if="menuIcon" :is="menuIcon" />
|
|
</template>
|
|
</a-tree>
|
|
</div>
|
|
</a-spin>
|
|
</ele-modal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, watch, nextTick } from 'vue';
|
|
import { message } from 'ant-design-vue/es';
|
|
import { toTreeData, eachTreeData } from 'ele-admin-pro/es';
|
|
import { listRoleMenus, updateRoleMenus } from '@/api/system/role';
|
|
import type { Role } from '@/api/system/role/model';
|
|
import type { Menu } from '@/api/system/menu/model';
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:visible', visible: boolean): void;
|
|
}>();
|
|
|
|
const props = defineProps<{
|
|
// 弹窗是否打开
|
|
visible: boolean;
|
|
// 当前角色数据
|
|
data?: Role | null;
|
|
}>();
|
|
|
|
// 权限数据
|
|
const authData = ref<Menu[]>([]);
|
|
|
|
// 权限数据请求状态
|
|
const authLoading = ref(false);
|
|
|
|
// 提交状态
|
|
const loading = ref(false);
|
|
|
|
// 角色权限展开的keys
|
|
const expandKeys = ref<number[]>([]);
|
|
|
|
// 角色权限选中的keys
|
|
const checkedKeys = ref<number[]>([]);
|
|
|
|
/* 查询权限数据 */
|
|
const query = () => {
|
|
authData.value = [];
|
|
expandKeys.value = [];
|
|
checkedKeys.value = [];
|
|
if (!props.data) {
|
|
return;
|
|
}
|
|
authLoading.value = true;
|
|
listRoleMenus(props.data.roleId)
|
|
.then((data) => {
|
|
authLoading.value = false;
|
|
// 转成树形结构的数据
|
|
authData.value = toTreeData({
|
|
data: data?.map((d) => ({
|
|
...d,
|
|
key: d.menuId,
|
|
icon: undefined,
|
|
menuIcon: d.icon
|
|
})),
|
|
idField: 'menuId',
|
|
parentIdField: 'parentId',
|
|
addParentIds: true,
|
|
parentIds: []
|
|
});
|
|
// 全部默认展开以及回显选中的数据
|
|
nextTick(() => {
|
|
const eks: number[] = [];
|
|
const cks: number[] = [];
|
|
eachTreeData(authData.value, (d) => {
|
|
if (d.key) {
|
|
if (d.children?.length) {
|
|
eks.push(d.key);
|
|
} else if (d.checked) {
|
|
cks.push(d.key);
|
|
}
|
|
}
|
|
});
|
|
expandKeys.value = eks;
|
|
checkedKeys.value = cks;
|
|
});
|
|
})
|
|
.catch((e) => {
|
|
authLoading.value = false;
|
|
message.error(e.message);
|
|
});
|
|
};
|
|
|
|
/* 保存权限分配 */
|
|
const save = () => {
|
|
loading.value = true;
|
|
// 获取选中的id，包含所有半选的父级的id
|
|
const ids = new Set<number>();
|
|
eachTreeData(authData.value, (d) => {
|
|
if (d.key && checkedKeys.value.some((c) => c === d.key)) {
|
|
ids.add(d.key);
|
|
if (d.parentIds) {
|
|
d.parentIds.forEach((id: number) => {
|
|
ids.add(id);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
updateRoleMenus(props.data?.roleId, Array.from(ids))
|
|
.then((msg) => {
|
|
loading.value = false;
|
|
message.success(msg);
|
|
updateVisible(false);
|
|
})
|
|
.catch((e) => {
|
|
loading.value = false;
|
|
message.error(e.message);
|
|
});
|
|
};
|
|
|
|
/* 更新visible */
|
|
const updateVisible = (value: boolean) => {
|
|
emit('update:visible', value);
|
|
};
|
|
|
|
watch(
|
|
() => props.visible,
|
|
(visible) => {
|
|
if (visible) {
|
|
query();
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import * as MenuIcons from '@/layout/menu-icons';
|
|
|
|
export default {
|
|
components: MenuIcons
|
|
};
|
|
</script>
|