<script setup lang="ts">
|
import type { TreeActionItem, TreeActionType } from '@jnpf/ui';
|
|
import { h, nextTick, onMounted, reactive, ref, toRefs, unref, watch } from 'vue';
|
|
import { BasicLeftTree, BasicTree } from '@jnpf/ui';
|
|
import { Tag } from 'ant-design-vue';
|
|
import { getAuthGroup, getAuthList } from '#/api/permission/user';
|
import { useBaseStore } from '#/store';
|
import { filterPermissionSourceGroups } from '#/utils/permissionSwitch';
|
|
interface State {
|
activeKey: string;
|
authData: any;
|
loading: boolean;
|
treeLoading: boolean;
|
treeData: any[];
|
authGroupData: any[];
|
key: number;
|
selectedId: string;
|
}
|
|
const props = defineProps({
|
userId: { default: '', type: String },
|
});
|
const baseStore = useBaseStore();
|
const state = reactive<State>({
|
activeKey: 'module',
|
authData: {},
|
loading: false,
|
treeLoading: false,
|
treeData: [],
|
authGroupData: [],
|
key: Date.now(),
|
selectedId: '',
|
});
|
const { activeKey, loading, treeLoading, key, treeData, authGroupData } = toRefs(state);
|
const leftTreeRef = ref<Nullable<TreeActionType>>(null);
|
const treeRef = ref<Nullable<TreeActionType>>(null);
|
const extraInfo: TreeActionItem = {
|
render: (node) => {
|
return h('div', { class: 'flex' }, [
|
node.pcCurStand && h(Tag, { color: 'processing' }, () => 'PC'),
|
node.appCurStand && h(Tag, { class: 'mr-0', color: 'processing' }, () => 'APP'),
|
]);
|
},
|
};
|
|
watch(
|
() => state.activeKey,
|
(val) => {
|
state.treeData = state.authData[val] || [];
|
state.key = Date.now();
|
},
|
);
|
|
function init() {
|
state.selectedId = '';
|
state.activeKey = 'module';
|
state.authGroupData = [];
|
state.authData = [];
|
state.treeLoading = true;
|
getAuthGroup({ userId: props.userId }).then((res) => {
|
const permissionSourceGroups = filterPermissionSourceGroups(res.data || [], baseStore.sysConfigInfo);
|
state.authGroupData = permissionSourceGroups.map((o) => ({
|
...o,
|
disabled: !!o.hasChildren,
|
children: o.children.map((o) => ({ ...o, disabled: !!o.hasChildren })),
|
}));
|
state.treeLoading = false;
|
nextTick(() => {
|
state.authGroupData?.length && unref(leftTreeRef)?.setSelectedKeys([state.authGroupData[0]?.id]);
|
handleTreeSelect(state.authGroupData[0]?.id, state.authGroupData[0]);
|
});
|
});
|
}
|
function getAuthData(objectId, objectType) {
|
state.loading = true;
|
getAuthList({ userId: props.userId, objectId, objectType }).then((res) => {
|
state.authData = res.data;
|
state.treeData = state.authData[state.activeKey] || [];
|
state.key = Date.now();
|
nextTick(() => {
|
state.activeKey = 'module';
|
state.loading = false;
|
});
|
});
|
}
|
function handleTreeSelect(id, item) {
|
if (state.selectedId == id || item.hasChildren) return;
|
state.selectedId = id;
|
getAuthData(id, item.type);
|
}
|
function getTree() {
|
const tree = unref(treeRef);
|
if (!tree) throw new Error('tree is null!');
|
return tree;
|
}
|
function handleExpandAll(boo) {
|
getTree()?.expandAll(boo);
|
}
|
|
onMounted(() => {
|
init();
|
});
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper authorize">
|
<div class="jnpf-content-wrapper-left">
|
<BasicLeftTree
|
ref="leftTreeRef"
|
:show-search="false"
|
:show-toolbar="false"
|
title="查看范围"
|
:tree-data="authGroupData"
|
:extra-info="extraInfo"
|
:loading="treeLoading"
|
@select="handleTreeSelect" />
|
</div>
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<a-tabs v-model:active-key="activeKey">
|
<a-tab-pane tab="菜单权限" key="module" />
|
<a-tab-pane tab="按钮权限" key="button" />
|
<a-tab-pane tab="列表权限" key="column" />
|
<a-tab-pane tab="表单权限" key="form" />
|
<a-tab-pane tab="数据权限" key="resource" />
|
<a-tab-pane tab="流程权限" key="flow" />
|
<a-tab-pane tab="打印文件权限" key="print" />
|
<template #rightExtra>
|
<div class="tool-container pr-[10px]">
|
<a-button type="text" :disabled="loading" @click="handleExpandAll(true)">展开全部</a-button>
|
<a-button type="text" :disabled="loading" @click="handleExpandAll(false)">折叠全部</a-button>
|
</div>
|
</template>
|
</a-tabs>
|
<div class="auth-tree">
|
<BasicTree ref="treeRef" :tree-data="treeData" :loading="loading" :default-expand-level="1" :key="key" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
.authorize {
|
height: 100%;
|
|
.jnpf-content-wrapper-left {
|
margin-right: unset;
|
border-right: 1px solid var(--border-color-base);
|
border-radius: unset;
|
}
|
|
:deep(.ant-tabs-nav) {
|
height: 50px;
|
|
.ant-tabs-tab:first-child {
|
padding-left: 10px;
|
}
|
}
|
|
.auth-tree {
|
height: calc(100% - 64px);
|
overflow: auto;
|
}
|
|
.tool-container {
|
.ant-btn-text {
|
padding: 4px 8px;
|
}
|
}
|
}
|
</style>
|
