pj_admin_cloud/src/components/DepTree/index.vue

<template>
	<div class="container">
		<!-- 头部区域 -->
		<div class="container-header">
			<div class="container-header-input">
				<el-input
					v-model="searchName"
					suffix-icon="search"
					:placeholder="placeholder"
					clearable
					@change="getTreeData"
				/>
			</div>
			<div class="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="!h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
									link
									:icon="isExpand ? 'expand' : 'fold'"
									@click="toggleRowExpansionAll(isExpand ? false : true)"
								>
									{{ isExpand ? "折叠" : "展开" }}
								</el-button>
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</div>

		<!-- 树形结构 -->
		<div class="container-tree">
			<el-tree
				ref="depTreeRef"
				:props="props.props"
				:data="state.treeList"
				:expand-on-click-node="false"
				:loading="state.loading"
				node-key="id"
				highlight-current
				default-expand-all
				@node-click="handleNodeClick"
			>
				<template #default="{ node, data }" v-if="$slots.default">
					<slot :node="node" :data="data" />
				</template>
			</el-tree>
		</div>

		<!-- 底部区域 -->
		<div class="container-switch">
			<el-switch
				v-model="state.isDeep"
				@change="handleTreeDeepSearch"
				:inactive-text="switchInactiveText"
				:active-text="switchActiveText"
			/>
		</div>
	</div>
</template>

<script setup lang="ts" name="dep-tree">
import { useMessage } from "/@/hooks/message"

const props = withDefaults(
	defineProps<{
		placeholder?: string // 输入框占位符
		loading?: boolean // 加载中的状态
		showExpand?: boolean // 折叠控制
		query?: (searchName?: string) => Promise<any> // 查询函数
		props?: object
		switchInactiveText?: string | undefined
		switchActiveText?: string | undefined
	}>(),
	{
		placeholder: "",
		loading: false,
		showExpand: true,
		query: () => new Promise((resolve) => resolve([])),
		props: () => {
			return {
				label: "name",
				children: "children",
				value: "id",
			}
		},
		switchInactiveText: "当前级",
		switchActiveText: "当前级及子级",
	},
)
const emit = defineEmits(["nodeClick", "treeDeepSearch"])

const state = reactive({
	treeList: [],
	loading: props.loading,
	isDeep: false,
})

const depTreeRef = ref()
const searchName = ref() // 查询关键字
const isExpand = ref(true) // 是否展开所有节点

// 获取部门树形结构数据
const getTreeData = () => {
	if (props.query instanceof Function) {
		state.loading = true

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

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

// 点击树形结构节点
const handleNodeClick = (item: any) => emit("nodeClick", item)

// 节点深度搜索
const handleTreeDeepSearch = () => emit("treeDeepSearch", state.isDeep)

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

onMounted(() => {
	getTreeData()
})

defineExpose({
	getTreeData,
})
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	display: flex;
	flex-direction: column;

	&-header {
		display: flex;
		align-items: center;
		padding-bottom: 10px;
		box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.1);
		z-index: 10;

		&-input {
			width: 90%;
		}
		&-dropdown {
			flex: 1;
			margin-left: 5%;
			line-height: 100%;
		}
	}

	&-tree {
		flex: 1;
		overflow: hidden;

		&:hover {
			overflow: auto;
		}
	}

	&-switch {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 10px;
		box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.1);
		z-index: 10;
		position: sticky;
		bottom: 0;
	}
}
</style>