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

src/views/wallet/wallet-cz/index.vue

@@ -4,11 +4,8 @@
 			<DraggableDepTree
 				ref="draggableDepTreeRef"
 				placeholder="请输入部门名称"
-				:query="deptData.queryList"
 				:show-expand="true"
-				@node-click="handleNodeClick"
-				@treeNodeCheckChange="treeNodeCheckChange"
-				@treeDeepSearch="treeDeepSearch"
+				@getSelectNode="handleGetSelectNode"
 				switch-inactive-text="当前部门"
 				switch-active-text="当前部门及子部门"
 				:defaultTreeWidth="20"
@@ -149,6 +146,7 @@ const resetQuery = () => {
 	// 清空多选
 	selectObjs.value = []
 	state.queryForm.deptId = ""
+	state.queryForm.deptIds = []
 	draggableDepTreeRef.value.resetData()
 	getDataList()
 }
@@ -201,30 +199,11 @@ const handleDelete = async (ids: string[]) => {
 	}
 }
 
-// 部门树使用的数据
-const deptData = reactive({
-	queryList: (name: string) => {
-		return deptTree({
-			deptName: name,
-		})
-	},
-})
-
-// 点击树
-const handleNodeClick = (clickedNode: any) => {
-	state.queryForm.deptId = clickedNode.id
-	getDataList()
-}
-
-// 树节点勾选改变
-const treeNodeCheckChange = (checkedNodes: any) => {
-	state.queryForm.deptId = checkedNodes.map((item: any) => item.id)
-	getDataList()
-}
-
-// 是否深度搜索
-const treeDeepSearch = (isDeep: boolean) => {
-	state.queryForm.isDeepDept = isDeep
+// 树节点选择时
+const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
+	state.queryForm.deptId = curClickedNode.id
+	state.queryForm.deptIds = checkedTreeNodes.map((item: any) => item.id)
+	state.queryForm.isDeepDept = isDeepTree
 	getDataList()
 }
 </script>

src/views/wallet/wallet-foreign/index.vue

@@ -4,11 +4,8 @@
 			<DraggableDepTree
 				ref="draggableDepTreeRef"
 				placeholder="请输入部门名称"
-				:query="deptData.queryList"
 				:show-expand="true"
-				@node-click="handleNodeClick"
-				@treeNodeCheckChange="treeNodeCheckChange"
-				@treeDeepSearch="treeDeepSearch"
+				@getSelectNode="handleGetSelectNode"
 				switch-inactive-text="当前部门"
 				switch-active-text="当前部门及子部门"
 				:defaultTreeWidth="20"
@@ -157,6 +154,7 @@ const resetQuery = () => {
 	// 清空多选
 	selectObjs.value = []
 	state.queryForm.deptId = ""
+	state.queryForm.deptIds = []
 	draggableDepTreeRef.value.resetData()
 	getDataList()
 }
@@ -193,30 +191,11 @@ const handleDelete = async (ids: string[]) => {
 	}
 }
 
-// 部门树使用的数据
-const deptData = reactive({
-	queryList: (name: string) => {
-		return deptTree({
-			deptName: name,
-		})
-	},
-})
-
-// 点击树
-const handleNodeClick = (clickedNode: any) => {
-	state.queryForm.deptId = clickedNode.id
-	getDataList()
-}
-
-// 树节点勾选改变
-const treeNodeCheckChange = (checkedNodes: any) => {
-	state.queryForm.deptId = checkedNodes.map((item: any) => item.id)
-	getDataList()
-}
-
-// 是否深度搜索
-const treeDeepSearch = (isDeep: boolean) => {
-	state.queryForm.isDeepDept = isDeep
+// 树节点选择时
+const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
+	state.queryForm.deptId = curClickedNode.id
+	state.queryForm.deptIds = checkedTreeNodes.map((item: any) => item.id)
+	state.queryForm.isDeepDept = isDeepTree
 	getDataList()
 }
 </script>

src/views/wallet/wallet-stride/index.vue

@@ -4,11 +4,8 @@
 			<DraggableDepTree
 				ref="draggableDepTreeRef"
 				placeholder="请输入部门名称"
-				:query="deptData.queryList"
 				:show-expand="true"
-				@node-click="handleNodeClick"
-				@treeNodeCheckChange="treeNodeCheckChange"
-				@treeDeepSearch="treeDeepSearch"
+				@getSelectNode="handleGetSelectNode"
 				switch-inactive-text="当前部门"
 				switch-active-text="当前部门及子部门"
 				:defaultTreeWidth="20"
@@ -152,6 +149,7 @@ const resetQuery = () => {
 	// 清空多选
 	selectObjs.value = []
 	state.queryForm.deptId = ""
+	state.queryForm.deptIds = []
 	draggableDepTreeRef.value.resetData()
 	getDataList()
 }
@@ -188,30 +186,11 @@ const handleDelete = async (ids: string[]) => {
 	}
 }
 
-// 部门树使用的数据
-const deptData = reactive({
-	queryList: (name: string) => {
-		return deptTree({
-			deptName: name,
-		})
-	},
-})
-
-// 点击树
-const handleNodeClick = (clickedNode: any) => {
-	state.queryForm.deptId = clickedNode.id
-	getDataList()
-}
-
-// 树节点勾选改变
-const treeNodeCheckChange = (checkedNodes: any) => {
-	state.queryForm.deptId = checkedNodes.map((item: any) => item.id)
-	getDataList()
-}
-
-// 是否深度搜索
-const treeDeepSearch = (isDeep: boolean) => {
-	state.queryForm.isDeepDept = isDeep
+// 树节点选择时
+const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
+	state.queryForm.deptId = curClickedNode.id
+	state.queryForm.deptIds = checkedTreeNodes.map((item: any) => item.id)
+	state.queryForm.isDeepDept = isDeepTree
 	getDataList()
 }
 </script>

src/views/wallet/wallet-tk/index.vue

@@ -4,11 +4,8 @@
 			<DraggableDepTree
 				ref="draggableDepTreeRef"
 				placeholder="请输入部门名称"
-				:query="deptData.queryList"
 				:show-expand="true"
-				@node-click="handleNodeClick"
-				@treeNodeCheckChange="treeNodeCheckChange"
-				@treeDeepSearch="treeDeepSearch"
+				@getSelectNode="handleGetSelectNode"
 				switch-inactive-text="当前部门"
 				switch-active-text="当前部门及子部门"
 				:defaultTreeWidth="20"
@@ -164,6 +161,7 @@ const resetQuery = () => {
 	// 清空多选
 	selectObjs.value = []
 	state.queryForm.deptId = ""
+	state.queryForm.deptIds = []
 	draggableDepTreeRef.value.resetData()
 	getDataList()
 }
@@ -224,30 +222,11 @@ const handleDelete = async (ids: string[]) => {
 	}
 }
 
-// 部门树使用的数据
-const deptData = reactive({
-	queryList: (name: string) => {
-		return deptTree({
-			deptName: name,
-		})
-	},
-})
-
-// 点击树
-const handleNodeClick = (clickedNode: any) => {
-	state.queryForm.deptId = clickedNode.id
-	getDataList()
-}
-
-// 树节点勾选改变
-const treeNodeCheckChange = (checkedNodes: any) => {
-	state.queryForm.deptId = checkedNodes.map((item: any) => item.id)
-	getDataList()
-}
-
-// 是否深度搜索
-const treeDeepSearch = (isDeep: boolean) => {
-	state.queryForm.isDeepDept = isDeep
+// 树节点选择时
+const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
+	state.queryForm.deptId = curClickedNode.id
+	state.queryForm.deptIds = checkedTreeNodes.map((item: any) => item.id)
+	state.queryForm.isDeepDept = isDeepTree
 	getDataList()
 }
 </script>

src/views/wallet/wallet-xf/index.vue

@@ -4,11 +4,8 @@
 			<DraggableDepTree
 				ref="draggableDepTreeRef"
 				placeholder="请输入部门名称"
-				:query="deptData.queryList"
 				:show-expand="true"
-				@node-click="handleNodeClick"
-				@treeNodeCheckChange="treeNodeCheckChange"
-				@treeDeepSearch="treeDeepSearch"
+				@getSelectNode="handleGetSelectNode"
 				switch-inactive-text="当前部门"
 				switch-active-text="当前部门及子部门"
 				:defaultTreeWidth="20"
@@ -163,6 +160,7 @@ const resetQuery = () => {
 	// 清空多选
 	selectObjs.value = []
 	state.queryForm.deptId = ""
+	state.queryForm.deptIds = []
 	draggableDepTreeRef.value.resetData()
 	getDataList()
 }
@@ -219,30 +217,11 @@ const handleDelete = async (ids: string[]) => {
 	}
 }
 
-// 部门树使用的数据
-const deptData = reactive({
-	queryList: (name: string) => {
-		return deptTree({
-			deptName: name,
-		})
-	},
-})
-
-// 点击树
-const handleNodeClick = (clickedNode: any) => {
-	state.queryForm.deptId = clickedNode.id
-	getDataList()
-}
-
-// 树节点勾选改变
-const treeNodeCheckChange = (checkedNodes: any) => {
-	state.queryForm.deptId = checkedNodes.map((item: any) => item.id)
-	getDataList()
-}
-
-// 是否深度搜索
-const treeDeepSearch = (isDeep: boolean) => {
-	state.queryForm.isDeepDept = isDeep
+// 树节点选择时
+const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
+	state.queryForm.deptId = curClickedNode.id
+	state.queryForm.deptIds = checkedTreeNodes.map((item: any) => item.id)
+	state.queryForm.isDeepDept = isDeepTree
 	getDataList()
 }
 </script>