修改可拖拽部门树

2025-02-18 11:12:15 +08:00
1 parent 2d0948e7ba
commit a6b0903481
@@ -8,18 +8,18 @@ VITE_OPEN = true
 ENV = 'development'

 # ADMIN 服务地址
-# VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/ # 线上
+VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/ # 线上
 # VITE_ADMIN_PROXY_PATH = http://pjcloud.center.takin.cc/
 # VITE_ADMIN_PROXY_PATH = http://localhost:9999/
-VITE_ADMIN_PROXY_PATH = http://192.168.101.50:9999/ # 邓-本地
+# VITE_ADMIN_PROXY_PATH = http://192.168.101.50:9999/ # 邓-本地
 # VITE_ADMIN_PROXY_PATH = http://59.202.170.152:81/api # 正式环境


 # 图片访问基础地址
-# VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api # 线上
+VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api # 线上
 # VITE_IMAGE_BASE_PATH = http://pjcloud.center.takin.cc
 # VITE_IMAGE_BASE_PATH = http://localhost:9999
-VITE_IMAGE_BASE_PATH = http://192.168.101.50:9999 # 邓-本地
+# VITE_IMAGE_BASE_PATH = http://192.168.101.50:9999 # 邓-本地
 # VITE_IMAGE_BASE_PATH = http://59.202.170.152:81/api/ # 正式环境

 # 代码生成服务地址
@@ -1,13 +1,14 @@
 <template>
-	<Splitpanes @resize="treeWidth = $event[0].size">
-		<pane :size="treeWidth">
-			<div class="container">
+	<Splitpanes @resize="state.treeWidth = $event[0].size">
+		<pane :size="state.treeWidth">
+			<!-- 树 -->
+			<div class="h-full flex flex-col m-1">
 				<!-- 头部区域 -->
-				<div class="container-header">
-					<div class="container-header-input">
-						<el-input v-model="searchName" suffix-icon="search" :placeholder="placeholder" clearable @change="getTreeData" />
+				<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="container-header-dropdown" v-if="showExpand">
+					<div class="flex-1 ml-[5%] leading-[100%]" v-if="showExpand">
 						<el-dropdown :hide-on-click="false">
 							<el-icon style="transform: rotate(90deg)">
 								<MoreFilled />
@@ -18,10 +19,10 @@
 										<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)"
+											:icon="state.isExpand ? 'expand' : 'fold'"
+											@click="toggleRowExpansionAll(state.isExpand ? false : true)"
 										>
-											{{ isExpand ? "折叠" : "展开" }}
+											{{ state.isExpand ? "折叠" : "展开" }}
 										</el-button>
 									</el-dropdown-item>
 								</el-dropdown-menu>
@@ -31,7 +32,7 @@
 				</div>

 				<!-- 树形结构 -->
-				<div class="container-tree">
+				<div class="flex-1 overflow-hidden hover:overflow-auto">
 					<el-tree
 						ref="treeRef"
 						:props="props.props"
@@ -48,28 +49,30 @@
 				</div>

 				<!-- 底部区域 -->
-				<div class="container-switch">
+				<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.isDeep"
-						@change="handleTreeDeepSearch"
+						v-model="state.switch"
+						@change="handleSwitchChange"
 						:inactive-text="switchInactiveText"
 						:active-text="switchActiveText"
-						:disabled="checkedTreeNodes.length > 0"
+						:disabled="state.checkedTreeNodes.length > 0"
 					/>
 				</div>
 			</div>
 		</pane>

-		<pane :size="100 - treeWidth" class="pl-4 relative">
-			<!-- 拖拽线 -->
+		<pane :size="100 - state.treeWidth" class="pl-4 relative">
+			<!-- 折叠按钮 -->
 			<div
-				class="w-[12px] h-[56px] absolute left-0 top-[44vh] translate-y-[-50%] transition-all cursor-pointer"
-				@click="handleClickDepTreeDrawer(isOpen)"
-				style="background-color: #e3e9ed; border-top-right-radius: 10px; border-bottom-right-radius: 10px"
+				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="drawer-icon">
+				<i class="text-gray-400 inline-block text-center leading-[62px] hover:opacity-50">
 					<el-icon>
-						<ArrowLeftBold v-if="treeWidth > 0" />
+						<ArrowLeftBold v-if="state.treeWidth > 0" />
 						<ArrowRightBold v-else />
 					</el-icon>
 				</i>
@@ -83,6 +86,7 @@
 </template>

 <script setup lang="ts" name="DraggableDepTree">
+import { computed } from "vue"
 import { useMessage } from "/@/hooks/message"

 const props = withDefaults(
@@ -113,28 +117,27 @@ const props = withDefaults(
 		defaultTreeWidth: 20,
 	},
 )
-const emit = defineEmits(["nodeClick", "treeDeepSearch", "treeNodeCheckChange"])
+const emit = defineEmits(["nodeClick", "treeNodeCheckChange", "treeDeepSearch"])

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

 // 获取部门树形结构数据
 const getTreeData = () => {
 	if (props.query instanceof Function) {
 		state.loading = true
-
-		// 调用传入的查询函数，并将查询关键字作为参数传入
-		const result = props.query(unref(searchName))
-
+		const result = props.query(state.searchName)
 		// 如果查询结果为 Promise 类型，则进行后续处理
 		if ((typeof result === "object" || typeof result === "function") && typeof result.then === "function") {
 			result
@@ -149,100 +152,66 @@ const getTreeData = () => {
 	}
 }

-const tempTreeWidth = ref()
-// 点击展开树组件
-const handleClickDepTreeDrawer = (isDrawerOpen: boolean) => {
-	if (isDrawerOpen) {
-		tempTreeWidth.value = treeWidth.value
-		treeWidth.value = 0
+// 点击折叠树组件
+const handleClickTreeFold = () => {
+	if (treeVisible.value) {
+		state.treeWidthMemo = state.treeWidth
+		state.treeWidth = 0
 	} else {
-		treeWidth.value = tempTreeWidth.value
+		state.treeWidth = state.treeWidthMemo
 	}
-	isOpen.value = !isOpen.value
 }

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

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

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

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

-// 勾选树节点关闭switch
-watch(checkedTreeNodes, (val) => {
-	if (checkedTreeNodes.value.length > 0) {
-		state.isDeep = false
-	}
-})
+// 勾选树节点时关闭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">
-.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: 999;
-		position: sticky;
-		bottom: 0;
-		overflow: hidden;
-	}
-}
 .splitpanes--vertical > .splitpanes__splitter {
 	background: var(--el-color-primary);
 	/* min-width: 2px; */
@@ -257,21 +226,4 @@ defineExpose({
 	background: var(--el-color-primary);
 	opacity: 0.6;
 }
-.drawer-icon {
-	color: #b7bdc8;
-	font-size: 1rem;
-	display: inline-block;
-	text-align: center;
-	line-height: 64px;
-}
-.drawer-icon:hover {
-	opacity: 0.5;
-}
-/* .drawer-icon::before {
-	content: "<";
-	background: none;
-	box-sizing: inherit;
-	color: #b7bdc8;
-	font-size: 1em;
-} */
 </style>
@@ -7,8 +7,8 @@
 				:query="deptData.queryList"
 				:show-expand="true"
 				@node-click="handleNodeClick"
-				@treeDeepSearch="treeDeepSearch"
 				@treeNodeCheckChange="treeNodeCheckChange"
+				@treeDeepSearch="treeDeepSearch"
 				switch-inactive-text="当前部门"
 				switch-active-text="当前部门及子部门"
 				:defaultTreeWidth="20"
@@ -236,23 +236,17 @@ const deptData = reactive({
 	},
 })

-// 是否深度搜索
-const treeDeepSearch = (isDeep: boolean) => {
-	state.queryForm.isDeepDept = isDeep
-	getDataList()
-}
-
 // 清空搜索条件
 const resetQuery = () => {
 	queryRef.value?.resetFields()
 	state.queryForm.deptId = ""
-	draggableDepTreeRef.value.getTreeData()
+	draggableDepTreeRef.value.resetData()
 	getDataList()
 }

 // 点击树
-const handleNodeClick = (e: any) => {
-	state.queryForm.deptId = e.id
+const handleNodeClick = (clickedNode: any) => {
+	state.queryForm.deptId = clickedNode.id
 	getDataList()
 }

@@ -262,6 +256,12 @@ const treeNodeCheckChange = (checkedNodes: any) => {
 	getDataList()
 }

+// 是否深度搜索
+const treeDeepSearch = (isDeep: boolean) => {
+	state.queryForm.isDeepDept = isDeep
+	getDataList()
+}
+
 // 导出excel
 const exportExcel = () => {
 	downBlobFile("/admin/user/export", Object.assign(state.queryForm, { ids: selectObjs }), "users.xlsx")