<!--
|
* @Description: 通用Tree组件
|
* @Author: Ben Lin
|
* @version:
|
* @Date: 2024-06-19 11:07:21
|
* @LastEditors: Ben Lin
|
* @LastEditTime: 2024-10-22 10:34:03
|
-->
|
<template>
|
<div class="m-4 mr-0 overflow-hidden bg-white">
|
<TigerTree
|
:title="title"
|
toolbar
|
search
|
:add="add"
|
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
|
:clickRowToExpand="false"
|
:treeData="treeData"
|
:renderIcon="createIcon"
|
:fieldNames="fieldNames"
|
:selectedKeys="selectedKeys"
|
@select="handleSelect"
|
@handleAdd="handleAdd"
|
@unselect="UnSelect"
|
:beforeRightClick="props.beforeRightClick"
|
:defaultExpandAll="true"
|
ref="tigerTree"
|
/>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { onMounted, ref, watch } from 'vue';
|
import {
|
ContextMenuItem,
|
ContextMenuOptions,
|
FieldNames,
|
TigerTree,
|
TreeItem,
|
} from '/@/components/TigerTree';
|
import { EventDataNode } from 'ant-design-vue/lib/tree';
|
|
defineOptions({ name: 'CustTree' });
|
|
const emit = defineEmits(['select', 'handleAdd', 'UnSelect']);
|
const props = defineProps({
|
title: {
|
// type: [Function, String] as PropType<string | ((data) => string)>,
|
type: String,
|
},
|
treeData: {
|
type: Array as PropType<TreeItem[]>,
|
},
|
createIcon: {
|
type: Function as PropType<(params: Recordable<any>) => string>,
|
},
|
add: { type: Boolean },
|
fieldNames: { type: Object as PropType<FieldNames> },
|
beforeRightClick: {
|
type: Function as PropType<(...arg: any) => ContextMenuItem[] | ContextMenuOptions>,
|
default: undefined,
|
},
|
});
|
const tigerTree = ref(null);
|
const selectedKeys = ref<KeyType[]>([])
|
|
function handleSelect(keys, e) {
|
emit('select', keys[0], e);
|
}
|
|
function handleAdd() {
|
emit('handleAdd');
|
}
|
|
function UnSelect(node) {
|
emit('UnSelect', node);
|
}
|
|
function expandAll(expandAll: boolean) {
|
if (tigerTree.value) {
|
tigerTree.value.expandAll(expandAll);
|
}
|
}
|
|
function getExpandedKeys() {
|
if (tigerTree.value) {
|
return tigerTree.value.getExpandedKeys();
|
}
|
return [];
|
}
|
|
function setSelectedKeys(keys: KeyType[]) {
|
selectedKeys.value = keys;
|
if (tigerTree.value) {
|
tigerTree.value.setSelectedKeys(keys);
|
}
|
}
|
|
function getSelectedKeys() {
|
if (tigerTree.value) {
|
return tigerTree.value.getSelectedKeys();
|
}
|
return [];
|
}
|
|
function getNodeById(Id: string) {
|
if (tigerTree.value) {
|
return tigerTree.value.getNodeById(Id);
|
}
|
return {};
|
}
|
|
defineExpose({
|
getExpandedKeys,
|
expandAll,
|
setSelectedKeys,
|
getSelectedKeys,
|
getNodeById
|
});
|
|
onMounted(() => {});
|
</script>
|
