为部分页面添加部门树组件

src/components/DraggableDepTree/index.vue

@@ -2,13 +2,19 @@
 	<Splitpanes @resize="state.treeWidth = $event[0].size">
 		<pane :size="state.treeWidth">
 			<!-- 树 -->
-			<div class="h-full flex flex-col m-1">
+			<div v-loading="state.loading" 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" />
+						<el-input
+							v-model="state.searchName"
+							suffix-icon="search"
+							:placeholder="placeholder"
+							clearable
+							@change="handleSearchInputChange"
+						/>
 					</div>
-					<div class="flex-1 ml-[5%] leading-[100%]" v-if="showExpand">
+					<div class="flex-1 ml-[5%] leading-none" v-if="showExpand">
 						<el-dropdown :hide-on-click="false">
 							<el-icon style="transform: rotate(90deg)">
 								<MoreFilled />
@@ -38,13 +44,12 @@
 						: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"
+						@node-click="handleNodeClick"
+						@check="handleCheck"
 					/>
 				</div>
 
@@ -88,11 +93,11 @@
 <script setup lang="ts" name="DraggableDepTree">
 import { computed } from "vue"
 import { useMessage } from "/@/hooks/message"
+import { deptTree } from "/@/api/admin/dept"
 
 const props = withDefaults(
 	defineProps<{
 		placeholder?: string // 输入框占位符
-		loading?: boolean // 加载中的状态
 		showExpand?: boolean // 折叠控制
 		query?: (searchName?: string) => Promise<any> // 查询函数
 		props?: object
@@ -102,9 +107,8 @@ const props = withDefaults(
 	}>(),
 	{
 		placeholder: "",
-		loading: false,
 		showExpand: true,
-		query: () => new Promise((resolve) => resolve([])),
+		query: (name?: string) => deptTree({ deptName: name || "" }),
 		props: () => {
 			return {
 				label: "name",
@@ -117,7 +121,7 @@ const props = withDefaults(
 		defaultTreeWidth: 20,
 	},
 )
-const emit = defineEmits(["nodeClick", "treeNodeCheckChange", "treeDeepSearch"])
+const emit = defineEmits(["getSelectNode"])
 
 const treeRef = ref() // 树组件ref
 const state = reactive({
@@ -126,8 +130,9 @@ const state = reactive({
 	treeWidth: Number(props.defaultTreeWidth), // 树组件宽度
 	treeWidthMemo: Number(props.defaultTreeWidth), // 树组件宽度记录
 	treeDataList: [],
+	curClickedNode: {},
 	checkedTreeNodes: [], // 被勾选的树节点
-	loading: props.loading,
+	loading: false,
 	switch: false, // switch开关
 })
 // 是否折叠树组件
@@ -162,19 +167,34 @@ const handleClickTreeFold = () => {
 	}
 }
 
-// 点击树形结构节点
-const handleNodeClick = (nodeData: any) => emit("nodeClick", nodeData)
+// 输入框改变
+const handleSearchInputChange = () => {
+	treeRef.value!.setCheckedKeys([], false)
+	state.checkedTreeNodes = []
+	state.curClickedNode = {}
+	getTreeData()
+}
 
-// 节点深度搜索
-const handleSwitchChange = () => emit("treeDeepSearch", state.switch)
+// 点击树形结构节点
+const handleNodeClick = (nodeData: any) => {
+	state.curClickedNode = nodeData
+	emit("getSelectNode", state.curClickedNode, state.checkedTreeNodes, state.switch)
+}
 
 // 勾选树节点时
-const handleCheckChange = (data: any, checked: boolean, indeterminate: boolean) => {
-	const checkedNodes = treeRef.value.getCheckedNodes()
+const handleCheck = (data: any, checkStatus: any) => {
+	const { checkedNodes } = checkStatus
+	console.log("checkedNodes", checkedNodes)
 	state.checkedTreeNodes = checkedNodes
-	emit("treeNodeCheckChange", checkedNodes)
+	if (state.checkedTreeNodes.length > 0) {
+		state.switch = false
+	}
+	emit("getSelectNode", state.curClickedNode, state.checkedTreeNodes, state.switch)
 }
 
+// switch改变时
+const handleSwitchChange = () => emit("getSelectNode", state.curClickedNode, state.checkedTreeNodes, state.switch)
+
 // 切换所有节点的展开/收起状态。status：true 为展开，false 为收起
 const toggleRowExpansionAll = (status: boolean) => {
 	state.isExpand = status
@@ -198,6 +218,7 @@ watch(
 const resetData = () => {
 	state.searchName = ""
 	state.checkedTreeNodes = []
+	state.curClickedNode = {}
 	state.switch = false
 	getTreeData()
 }