pj_admin_cloud/src/components/DraggableDepTree/index.vue

<template>
	<Splitpanes @resize="state.treeWidth = $event[0].size">
		<pane :size="state.treeWidth">
			<!-- 树 -->
			<div class="h-full flex flex-col m-1">
				<!-- 头部区域 -->
				<div class="flex items-center pb-2 shadow-gray-400 z-10" style="box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.1)">
					<div class="w-4/5">
						<el-input v-model="state.searchName" suffix-icon="search" :placeholder="placeholder" clearable @change="getTreeData" />
					</div>
					<div class="flex-1 ml-[5%] leading-[100%]" 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="state.isExpand ? 'expand' : 'fold'"
											@click="toggleRowExpansionAll(state.isExpand ? false : true)"
										>
											{{ state.isExpand ? "折叠" : "展开" }}
										</el-button>
									</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
				</div>

				<!-- 树形结构 -->
				<div class="flex-1 overflow-hidden hover:overflow-auto">
					<el-tree
						ref="treeRef"
						:props="props.props"
						:data="state.treeDataList"
						:expand-on-click-node="false"
						:loading="state.loading"
						node-key="id"
						highlight-current
						default-expand-all
						@node-click="handleNodeClick"
						show-checkbox
						@check-change="handleCheckChange"
					/>
				</div>

				<!-- 底部区域 -->
				<div
					class="flex justify-center items-center pt-2 z-50 sticky bottom-0 overflow-hidden"
					style="box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.1)"
				>
					<el-switch
						v-model="state.switch"
						@change="handleSwitchChange"
						:inactive-text="switchInactiveText"
						:active-text="switchActiveText"
						:disabled="state.checkedTreeNodes.length > 0"
					/>
				</div>
			</div>
		</pane>

		<pane :size="100 - state.treeWidth" class="pl-4 relative">
			<!-- 折叠按钮 -->
			<div
				class="w-[12px] h-[56px] bg-gray-200 absolute left-0 top-[44vh] translate-y-[-50%] transition-all cursor-pointer rounded-tr-2xl rounded-br-2xl"
				@click="handleClickTreeFold()"
			>
				<i class="text-gray-400 inline-block text-center leading-[62px] hover:opacity-50">
					<el-icon>
						<ArrowLeftBold v-if="state.treeWidth > 0" />
						<ArrowRightBold v-else />
					</el-icon>
				</i>
			</div>

			<div class="w-full h-full overflow-auto">
				<slot name="default" />
			</div>
		</pane>
	</Splitpanes>
</template>

<script setup lang="ts" name="DraggableDepTree">
import { computed } from "vue"
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
		defaultTreeWidth?: number | string
	}>(),
	{
		placeholder: "",
		loading: false,
		showExpand: true,
		query: () => new Promise((resolve) => resolve([])),
		props: () => {
			return {
				label: "name",
				children: "children",
				value: "id",
			}
		},
		switchInactiveText: "当前级",
		switchActiveText: "当前级及子级",
		defaultTreeWidth: 20,
	},
)
const emit = defineEmits(["nodeClick", "treeNodeCheckChange", "treeDeepSearch"])

const treeRef = ref() // 树组件ref
const state = reactive({
	searchName: "", // 查询关键字
	isExpand: true, // 是否展开树所有节点
	treeWidth: Number(props.defaultTreeWidth), // 树组件宽度
	treeWidthMemo: Number(props.defaultTreeWidth), // 树组件宽度记录
	treeDataList: [],
	checkedTreeNodes: [], // 被勾选的树节点
	loading: props.loading,
	switch: false, // switch开关
})
// 是否折叠树组件
const treeVisible = computed(() => state.treeWidth > 0)

// 获取部门树形结构数据
const getTreeData = () => {
	if (props.query instanceof Function) {
		state.loading = true
		const result = props.query(state.searchName)
		// 如果查询结果为 Promise 类型，则进行后续处理
		if ((typeof result === "object" || typeof result === "function") && typeof result.then === "function") {
			result
				.then((r: any) => {
					state.treeDataList = r.data
				})
				.catch((err) => {
					useMessage().error(err.msg)
				})
				.finally(() => (state.loading = false))
		}
	}
}

// 点击折叠树组件
const handleClickTreeFold = () => {
	if (treeVisible.value) {
		state.treeWidthMemo = state.treeWidth
		state.treeWidth = 0
	} else {
		state.treeWidth = state.treeWidthMemo
	}
}

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

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

// 勾选树节点时
const handleCheckChange = (data: any, checked: boolean, indeterminate: boolean) => {
	const checkedNodes = treeRef.value.getCheckedNodes()
	state.checkedTreeNodes = checkedNodes
	emit("treeNodeCheckChange", checkedNodes)
}

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

// 勾选树节点时关闭switch
watch(
	() => state.checkedTreeNodes,
	(val) => {
		if (state.checkedTreeNodes.length > 0) {
			state.switch = false
		}
	},
)

// 重置数据
const resetData = () => {
	state.searchName = ""
	state.checkedTreeNodes = []
	state.switch = false
	getTreeData()
}
onMounted(() => {
	getTreeData()
})

defineExpose({
	getTreeData,
	resetData,
})
</script>

<style lang="scss">
.splitpanes--vertical > .splitpanes__splitter {
	background: var(--el-color-primary);
	/* min-width: 2px; */
	width: 2px;
	transition: all 0.3s ease;
}
.splitpanes--vertical > .splitpanes__splitter:active {
	background: var(--el-color-primary);
	opacity: 0.6;
}
.splitpanes--vertical > .splitpanes__splitter:hover {
	background: var(--el-color-primary);
	opacity: 0.6;
}
</style>