kxs-java/kxs-admin-ui/src/components/QueryTree/index.vue

<template>
	<div class="head-container">
		<div class="head-container-header">
			<div class="head-container-header-input">
				<el-input v-model="searchName" suffix-icon="search" :placeholder="placeholder" clearable @change="getdeptTree" />
			</div>
			<div class="head-container-header-dropdown" v-if="showExpand">
				<el-dropdown :hide-on-click="false">
					<el-icon style="transform: rotate(90deg)">
						<MoreFilled />
					</el-icon>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item>
								<el-button
									:class="buttonClass"
									link
									type="primary"
									:icon="isExpand ? 'expand' : 'fold'"
									@click="toggleRowExpansionAll(isExpand ? false : true)"
								>
									{{ isExpand ? '折叠' : '展开' }}
								</el-button>
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</div>
		<el-tree
			class="mt20"
			:data="state.List"
			:props="props.props"
			:expand-on-click-node="false"
			ref="deptTreeRef"
			:loading="state.localLoading"
			node-key="id"
			highlight-current
			default-expand-all
			@node-click="handleNodeClick"
		>
			<template #default="{ node, data }" v-if="$slots.default">
				<slot :node="node" :data="data"></slot>
			</template>
		</el-tree>
	</div>
</template>

<script setup lang="ts" name="query-tree">
import { useMessage } from '/@/hooks/message';
const emit = defineEmits(['search', 'nodeClick']);

const props = defineProps({
	/**
	 * 树结构属性配置。
	 *
	 * @default { label: 'name', children: 'children', value: 'id' }
	 */
	props: {
		type: Object,
		default: () => {
			return {
				label: 'name',
				children: 'children',
				value: 'id',
			};
		},
	},

	/**
	 * 输入框占位符。
	 *
	 * @default ''
	 */
	placeholder: {
		type: String,
		default: '',
	},

	/**
	 * 是否显示加载中状态。
	 *
	 * @default false
	 */
	loading: {
		type: Boolean,
		default: false,
	},

	/**
	 * 查询函数，必须返回 Promise 类型数据。
	 */
	query: {
		type: Function,
		required: true,
	},

	/**
	 * 是否显示折叠控制
	 */
	showExpand: {
		type: Boolean,
		default: false,
	},
});

const state = reactive({
	List: [], // 树形结构列表数据
	localLoading: props.loading, // 是否加载中
});

const deptTreeRef = ref(); // 部门树形结构组件实例引用
const searchName = ref(); // 查询关键字
const isExpand = ref(true); // 是否展开所有节点

const buttonClass = computed(() => {
	return ['!h-[20px]', 'reset-margin', '!text-gray-500', 'dark:!text-white', 'dark:hover:!text-primary'];
});

/**
 * 点击树形结构节点触发的事件。
 *
 * @param item 被点击的节点数据。
 */
const handleNodeClick = (item: any) => {
	emit('nodeClick', item);
};

/**
 * 获取部门树形结构数据。
 */
const getdeptTree = () => {
	if (props.query instanceof Function) {
		state.localLoading = true;

		// 调用传入的查询函数，并将查询关键字作为参数传入
		const result = props.query(unref(searchName));

		// 如果查询结果为 Promise 类型，则进行后续处理
		if ((typeof result === 'object' || typeof result === 'function') && typeof result.then === 'function') {
			result
				.then((r: any) => {
					state.List = r.data;
				})
				.catch((err) => {
					useMessage().error(err.msg);
				});
		}
	}
};

/**
 * 切换所有节点的展开/收起状态。
 *
 * @param status 目标状态，true 为展开，false 为收起。
 */
const toggleRowExpansionAll = (status) => {
	isExpand.value = status;
	const nodes = deptTreeRef.value.store._getAllNodes();
	for (let i = 0; i < nodes.length; i++) {
		nodes[i].expanded = status;
	}
};

onMounted(() => {
	getdeptTree();
});

// 方便父组件调用刷新树方法
defineExpose({
	getdeptTree,
});
</script>
<style lang="scss" scoped>
.head-container {
	&-header {
		display: flex;
		align-items: center;
		&-input {
			width: 90%;
		}
		&-dropdown {
			flex: 1;
			margin-left: 5%;
		}
	}
}
</style>