<!--
|
* @Description: 通用Tree组件
|
* @Author: Ben Lin
|
* @version:
|
* @Date: 2024-06-19 11:07:21
|
* @LastEditors: Ben Lin
|
* @LastEditTime: 2024-07-23 21:29:52
|
-->
|
<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"
|
@select="handleSelect"
|
@handleAdd="handleAdd"
|
@unselect="UnSelect"
|
:beforeRightClick="props.beforeRightClick"
|
/>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { onMounted, ref } 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,
|
},
|
});
|
|
function handleSelect(keys, e) {
|
emit('select', keys[0], e);
|
}
|
|
function handleAdd() {
|
emit('handleAdd');
|
}
|
|
function UnSelect(node) {
|
emit('UnSelect', node);
|
}
|
|
onMounted(() => {});
|
</script>
|
