<script lang="ts" setup>
|
import type { DmsPermissionResource } from '#/api/x/dms/permission';
|
|
import { nextTick, onMounted, ref } from 'vue';
|
|
import { BasicLeftTree } from '@jnpf/ui';
|
|
import { FileOutlined, FileTextOutlined, FolderOutlined } from '@ant-design/icons-vue';
|
|
import { getPermissionResourceTree } from '#/api/x/dms/permission';
|
|
interface ResourceTreeNode extends DmsPermissionResource {
|
children?: ResourceTreeNode[];
|
fullName: string;
|
isLeaf: boolean;
|
}
|
|
const emit = defineEmits<{
|
select: [resource: DmsPermissionResource];
|
}>();
|
|
const leftTreeRef = ref<Nullable<any>>(null);
|
const loading = ref(false);
|
const treeData = ref<ResourceTreeNode[]>([]);
|
|
function toTreeNode(resource: DmsPermissionResource): ResourceTreeNode {
|
return {
|
...resource,
|
fullName: resource.resourceType === 'FILE_VERSION' ? `${resource.name}（版本 ${resource.versionNo ?? '-'}）` : resource.name,
|
isLeaf: resource.resourceType === 'FILE_VERSION',
|
};
|
}
|
|
async function loadRoots() {
|
loading.value = true;
|
try {
|
const response = await getPermissionResourceTree({ pageSize: 100 });
|
treeData.value = (response.data || []).map((resource) => toTreeNode(resource));
|
await nextTick();
|
const first = treeData.value[0];
|
if (first) {
|
leftTreeRef.value?.setSelectedKeys([first.id]);
|
emit('select', first);
|
}
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
async function loadChildren(node: ResourceTreeNode & { eventKey?: string }) {
|
const response = await getPermissionResourceTree({ parentId: node.id, pageSize: 100 });
|
const children = (response.data || []).map((resource) => toTreeNode(resource));
|
leftTreeRef.value?.updateNodeByKey(node.eventKey || node.id, {
|
children,
|
isLeaf: children.length === 0,
|
});
|
}
|
|
async function refreshChildren(resource: DmsPermissionResource) {
|
await loadChildren(resource as ResourceTreeNode);
|
}
|
|
function handleSelect(_id: string, node: ResourceTreeNode) {
|
emit('select', node);
|
}
|
|
onMounted(loadRoots);
|
|
defineExpose({ refreshChildren, reload: loadRoots });
|
</script>
|
|
<template>
|
<BasicLeftTree
|
ref="leftTreeRef"
|
title="文件资源"
|
:default-expand-all="false"
|
:load-data="loadChildren"
|
:loading="loading"
|
:show-toolbar="false"
|
:tree-data="treeData"
|
@select="handleSelect">
|
<template #title="node">
|
<span class="resource-tree-title" :title="node.fullName">
|
<FolderOutlined v-if="node.resourceType === 'FOLDER'" />
|
<FileTextOutlined v-else-if="node.resourceType === 'DOCUMENT'" />
|
<FileOutlined v-else />
|
<span>{{ node.fullName }}</span>
|
</span>
|
</template>
|
</BasicLeftTree>
|
</template>
|
|
<style lang="scss" scoped>
|
.resource-tree-title {
|
display: inline-flex;
|
gap: 8px;
|
align-items: center;
|
max-width: 100%;
|
|
span {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
</style>
|
