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

src/api/admin/dept.ts

@@ -1,83 +1,83 @@
-import request from '/@/utils/request';
+import request from "/@/utils/request"
 
 export const deptTree = (params?: Object) => {
-    return request({
-        url: '/admin/dept/tree',
-        method: 'get',
-        params,
-    });
-};
+	return request({
+		url: "/admin/dept/tree",
+		method: "get",
+		params,
+	})
+}
 
 export const addObj = (obj: Object) => {
-    return request({
-        url: '/admin/dept',
-        method: 'post',
-        data: obj,
-    });
-};
+	return request({
+		url: "/admin/dept",
+		method: "post",
+		data: obj,
+	})
+}
 
 export const getObj = (id: string) => {
-    return request({
-        url: '/admin/dept/' + id,
-        method: 'get',
-    });
-};
+	return request({
+		url: "/admin/dept/" + id,
+		method: "get",
+	})
+}
 
 export const delObj = (id: string) => {
-    return request({
-        url: '/admin/dept/' + id,
-        method: 'delete',
-    });
-};
+	return request({
+		url: "/admin/dept/" + id,
+		method: "delete",
+	})
+}
 
 export const putObj = (obj: Object) => {
-    return request({
-        url: '/admin/dept',
-        method: 'put',
-        data: obj,
-    });
-};
+	return request({
+		url: "/admin/dept",
+		method: "put",
+		data: obj,
+	})
+}
 
 export const syncUser = () => {
-    return request({
-        url: '/admin/connect/sync/ding/user',
-        method: 'post',
-    });
-};
+	return request({
+		url: "/admin/connect/sync/ding/user",
+		method: "post",
+	})
+}
 
 export const syncDept = () => {
-    return request({
-        url: '/admin/connect/sync/ding/dept',
-        method: 'post',
-    });
-};
+	return request({
+		url: "/admin/connect/sync/ding/dept",
+		method: "post",
+	})
+}
 
 export const syncCpUser = () => {
-    return request({
-        url: '/admin/connect/sync/cp/user',
-        method: 'post',
-    });
-};
+	return request({
+		url: "/admin/connect/sync/cp/user",
+		method: "post",
+	})
+}
 
 export const syncCpDept = () => {
-    return request({
-        url: '/admin/connect/sync/cp/dept',
-        method: 'post',
-    });
-};
+	return request({
+		url: "/admin/connect/sync/cp/dept",
+		method: "post",
+	})
+}
 
 export const orgTree = (type: String, deptId: Number) => {
-    return request({
-        url: '/admin/dept/org',
-        method: 'get',
-        params: {type: type, parentDeptId: deptId},
-    });
+	return request({
+		url: "/admin/dept/org",
+		method: "get",
+		params: { type: type, parentDeptId: deptId },
+	})
 }
 
 export const orgTreeSearcheUser = (param: Object) => {
-    return request({
-        url: '/admin/dept/org/user/search',
-        method: 'get',
-        params: param
-    });
+	return request({
+		url: "/admin/dept/org/user/search",
+		method: "get",
+		params: param,
+	})
 }

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()
 }

src/views/admin/system/user/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"
@@ -227,40 +224,20 @@ const state: BasicTableProps = reactive<BasicTableProps>({
 })
 const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state)
 
-// 部门树使用的数据
-const deptData = reactive({
-	queryList: (name: string) => {
-		return deptTree({
-			deptName: name,
-		})
-	},
-})
-
 // 清空搜索条件
 const resetQuery = () => {
 	queryRef.value?.resetFields()
 	state.queryForm.deptId = ""
+	state.queryForm.deptIds = []
 	draggableDepTreeRef.value.resetData()
 	getDataList()
 }
 
-// 点击树
-const handleNodeClick = (clickedNode: any) => {
-	state.queryForm.deptId = clickedNode.id
-	getDataList()
-}
-
-// 树节点勾选改变
-const treeNodeCheckChange = (checkedNodes: any) => {
-	state.queryForm.deptIds = checkedNodes.map((item: any) => item.id)
-	state.queryForm.deptId = ""
-	state.queryForm.isDeepDept = false
-	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()
 }
 

src/views/hard/hard-after-sale/index.vue

@@ -1,95 +1,99 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-				<el-row :gutter="24">
-					<el-col :span="4">
-						<el-form-item class="w100" label="用户" prop="userIds">
-							<select-user v-model="state.queryForm.userIds" />
-						</el-form-item>
-					</el-col>
-					<el-col :span="4">
-						<el-form-item class="w100" label="退款状态" prop="status">
-							<dict-select v-model="state.queryForm.status" dict-code="hard_sale_status" />
-						</el-form-item>
-					</el-col>
-					<el-col :span="6">
-						<el-form-item class="w100" label="申请时间" prop="createTimeList">
-							<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD" type="daterange" />
-						</el-form-item>
-					</el-col>
-					<el-form-item>
-						<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
-						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-row>
-			</el-form>
-			<el-table
-				:data="state.dataList"
-				v-loading="state.loading"
-				border
-				:cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle"
-				@selection-change="selectionChangHandle"
-				@sort-change="sortChangeHandle"
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:show-expand="true"
+				@getSelectNode="handleGetSelectNode"
+				switch-inactive-text="当前部门"
+				switch-active-text="当前部门及子部门"
+				:defaultTreeWidth="20"
 			>
-				<el-table-column type="selection" width="40" align="center" />
-				<el-table-column type="index" label="#" width="40" />
-				<el-table-column prop="username" label="用户" />
-				<el-table-column prop="userAvatar" label="头像">
-					<template #default="{ row }">
-						<preview-image :src="row.userAvatar" />
-					</template>
-				</el-table-column>
-				<el-table-column prop="userMobile" width="120" label="手机号" />
-				<el-table-column label="支付金额" align="center" prop="practicalTotalPrice">
-					<template #default="{ row }">
-						<span class="color-primary">
-							{{ displayPrice(row.orderPayPrice) }}
-						</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="退款金额" align="center">
-					<template #default="{ row }">
-						<span class="color-success">
-							{{ displayPrice(row.refundPrice) }}
-						</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="退款状态" align="center">
-					<template #default="{ row }">
-						<dict-tag :options="hard_sale_status" :value="row.status" />
-					</template>
-				</el-table-column>
-				<el-table-column label="申请时间" align="center" width="180px" prop="createTime" />
-				<el-table-column label="操作" width="200">
-					<template #default="{ row }">
-						<el-button icon="ShoppingCartFull" text type="primary" @click="shopCarDialogRef.openDialog(row.orderId)"
-							>购物车</el-button
-						>
-						<el-button icon="WalletFilled" link type="primary" @click="doRefund(row)"> 退款 </el-button>
-						<el-button
-							v-if="false"
-							icon="edit-pen"
-							text
-							type="primary"
-							v-auth="'hard_hardAfterSale_edit'"
-							@click="formDialogRef.openDialog(row.id)"
-							>编辑</el-button
-						>
-						<el-button
-							v-if="false"
-							icon="delete"
-							text
-							type="primary"
-							v-auth="'hard_hardAfterSale_del'"
-							@click="handleDelete([row.id])"
-							>删除</el-button
-						>
-					</template>
-				</el-table-column>
-			</el-table>
-			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+				<template #default>
+					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+						<el-row :gutter="24">
+							<el-col :span="4">
+								<el-form-item class="w100" label="用户" prop="userIds">
+									<select-user v-model="state.queryForm.userIds" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="4">
+								<el-form-item class="w100" label="退款状态" prop="status">
+									<dict-select v-model="state.queryForm.status" dict-code="hard_sale_status" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="6">
+								<el-form-item class="w100" label="申请时间" prop="createTimeList">
+									<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD" type="daterange" />
+								</el-form-item>
+							</el-col>
+							<el-form-item>
+								<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
+								<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
+							</el-form-item>
+						</el-row>
+					</el-form>
+					<el-table
+						:data="state.dataList"
+						v-loading="state.loading"
+						border
+						:cell-style="tableStyle.cellStyle"
+						:header-cell-style="tableStyle.headerCellStyle"
+						@selection-change="selectionChangHandle"
+						@sort-change="sortChangeHandle"
+					>
+						<el-table-column type="selection" width="40" align="center" />
+						<el-table-column type="index" label="#" width="40" />
+						<el-table-column prop="username" label="用户" />
+						<el-table-column prop="userAvatar" label="头像">
+							<template #default="{ row }">
+								<preview-image :src="row.userAvatar" />
+							</template>
+						</el-table-column>
+						<el-table-column prop="userMobile" width="120" label="手机号" />
+						<el-table-column label="支付金额" align="center" prop="practicalTotalPrice">
+							<template #default="{ row }">
+								<span class="color-primary">
+									{{ displayPrice(row.orderPayPrice) }}
+								</span>
+							</template>
+						</el-table-column>
+						<el-table-column label="退款金额" align="center">
+							<template #default="{ row }">
+								<span class="color-success">
+									{{ displayPrice(row.refundPrice) }}
+								</span>
+							</template>
+						</el-table-column>
+						<el-table-column label="退款状态" align="center">
+							<template #default="{ row }">
+								<dict-tag :options="hard_sale_status" :value="row.status" />
+							</template>
+						</el-table-column>
+						<el-table-column label="申请时间" align="center" width="180px" prop="createTime" />
+						<el-table-column label="操作" width="200">
+							<template #default="{ row }">
+								<el-button icon="ShoppingCartFull" text type="primary" @click="shopCarDialogRef.openDialog(row.orderId)">购物车</el-button>
+								<el-button icon="WalletFilled" link type="primary" @click="doRefund(row)"> 退款 </el-button>
+								<el-button
+									v-if="false"
+									icon="edit-pen"
+									text
+									type="primary"
+									v-auth="'hard_hardAfterSale_edit'"
+									@click="formDialogRef.openDialog(row.id)"
+									>编辑</el-button
+								>
+								<el-button v-if="false" icon="delete" text type="primary" v-auth="'hard_hardAfterSale_del'" @click="handleDelete([row.id])"
+									>删除</el-button
+								>
+							</template>
+						</el-table-column>
+					</el-table>
+					<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+				</template>
+			</DraggableDepTree>
 		</div>
 
 		<!-- 编辑、新增  -->
@@ -119,6 +123,7 @@ const showSearch = ref(true)
 // 多选变量
 const selectObjs = ref([]) as any
 const multiple = ref(true)
+const draggableDepTreeRef = ref() // 树组件ref引用
 
 const { push } = useRouter()
 
@@ -128,8 +133,7 @@ const state: BasicTableProps = reactive<BasicTableProps>({
 })
 
 //  table hook
-const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } =
-	useTable(state)
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
 
 // 清空搜索条件
 const resetQuery = () => {
@@ -137,6 +141,9 @@ const resetQuery = () => {
 	queryRef.value?.resetFields()
 	// 清空多选
 	selectObjs.value = []
+	state.queryForm.deptId = ""
+	state.queryForm.deptIds = []
+	draggableDepTreeRef.value.resetData()
 	getDataList()
 }
 
@@ -151,6 +158,14 @@ const selectionChangHandle = (objs: { id: string }[]) => {
 	multiple.value = !objs.length
 }
 
+// 树节点选择时
+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()
+}
+
 const doRefund = (row: any) => {
 	push({ path: "/hard/hard-after-sale/order-refund", query: { id: row.orderId, type: "apply" } })
 }

src/views/hard/hard-invoice/index.vue

@@ -1,114 +1,120 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-				<el-row :gutter="24">
-					<el-col :span="4">
-						<el-form-item class="w100" label="用户" prop="userIdChild">
-							<select-user v-model="state.queryForm.userIdChild" />
-						</el-form-item>
-					</el-col>
-					<el-col :span="4">
-						<el-form-item class="w100" label="商户" prop="merchantIds">
-							<select-mch v-model="state.queryForm.merchantIds" />
-						</el-form-item>
-					</el-col>
-					<el-col :span="4">
-						<el-form-item class="w100" label="设备类型" prop="hardType">
-							<dict-select v-model="state.queryForm.hardType" dict-code="hard_type" />
-						</el-form-item>
-					</el-col>
-					<el-col :span="5">
-						<el-form-item class="w100" label="打印时间" prop="createTimeList">
-							<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD" type="daterange" />
-						</el-form-item>
-					</el-col>
-					<el-form-item>
-						<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
-						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-row>
-			</el-form>
-			<el-table
-				:data="state.dataList"
-				v-loading="state.loading"
-				border
-				:cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle"
-				@selection-change="selectionChangHandle"
-				@sort-change="sortChangeHandle"
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:show-expand="true"
+				@getSelectNode="handleGetSelectNode"
+				switch-inactive-text="当前部门"
+				switch-active-text="当前部门及子部门"
+				:defaultTreeWidth="20"
 			>
-				<el-table-column type="selection" width="40" align="center" />
-				<el-table-column type="index" label="#" width="60" />
-				<el-table-column width="200" label="用户">
-					<template #default="{ row }">
-						<div class="flex flex-row items-center justify-center">
-							<preview-image width="50px" height="50px" :src="row.userAvatar" />
-							<div class="flex flex-col ml-2 items-start cursor-pointer hover:underline hover:text-blue-500">
-								<span> {{ row.username }}</span>
-								<span> {{ row.userMobile }}</span>
-							</div>
-						</div>
-					</template>
-				</el-table-column>
-				<el-table-column width="250px" label="设备信息">
-					<template #default="{ row }">
-						<div class="status">
-							<span>商户</span>
-							<span>
-								{{ row.merchantName }}
-							</span>
-						</div>
-						<div class="status">
-							<span>设备名</span>
-							<span>
-								{{ row.hardName }}
-							</span>
-						</div>
-						<div class="status">
-							<span>设备类型</span>
-							<span>
-								<dict-tag :options="hard_type" :value="row.hardType" />
-							</span>
-						</div>
-					</template>
-				</el-table-column>
-				<el-table-column prop="pic" label="发票">
-					<template #default="{ row }">
-						<preview-image v-if="row.pic" :src="row.pic" />
-					</template>
-				</el-table-column>
-				<el-table-column prop="status" label="打印状态">
-					<template #default="{ row }">
-						<dict-tag :options="hard_print_status" :value="row.status" />
-					</template>
-				</el-table-column>
-				<el-table-column prop="createTime" label="打印时间" />
-				<el-table-column label="操作" width="150">
-					<template #default="{ row }">
-						<el-button icon="InfoFilled" link type="primary" @click="doRefund(row)"> 订单详情 </el-button>
-						<el-button
-							v-if="false"
-							icon="edit-pen"
-							text
-							type="primary"
-							v-auth="'hard_hardInvoice_edit'"
-							@click="formDialogRef.openDialog(row.id)"
-							>编辑</el-button
-						>
-						<el-button
-							v-if="false"
-							icon="delete"
-							text
-							type="primary"
-							v-auth="'hard_hardInvoice_del'"
-							@click="handleDelete([row.id])"
-							>删除</el-button
-						>
-					</template>
-				</el-table-column>
-			</el-table>
-			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+				<template #default>
+					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+						<el-row :gutter="24">
+							<el-col :span="4">
+								<el-form-item class="w100" label="用户" prop="userIdChild">
+									<select-user v-model="state.queryForm.userIdChild" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="4">
+								<el-form-item class="w100" label="商户" prop="merchantIds">
+									<select-mch v-model="state.queryForm.merchantIds" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="4">
+								<el-form-item class="w100" label="设备类型" prop="hardType">
+									<dict-select v-model="state.queryForm.hardType" dict-code="hard_type" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="5">
+								<el-form-item class="w100" label="打印时间" prop="createTimeList">
+									<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD" type="daterange" />
+								</el-form-item>
+							</el-col>
+							<el-form-item>
+								<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
+								<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
+							</el-form-item>
+						</el-row>
+					</el-form>
+					<el-table
+						:data="state.dataList"
+						v-loading="state.loading"
+						border
+						:cell-style="tableStyle.cellStyle"
+						:header-cell-style="tableStyle.headerCellStyle"
+						@selection-change="selectionChangHandle"
+						@sort-change="sortChangeHandle"
+					>
+						<el-table-column type="selection" width="40" align="center" />
+						<el-table-column type="index" label="#" width="60" />
+						<el-table-column width="200" label="用户">
+							<template #default="{ row }">
+								<div class="flex flex-row items-center justify-center">
+									<preview-image width="50px" height="50px" :src="row.userAvatar" />
+									<div class="flex flex-col ml-2 items-start cursor-pointer hover:underline hover:text-blue-500">
+										<span> {{ row.username }}</span>
+										<span> {{ row.userMobile }}</span>
+									</div>
+								</div>
+							</template>
+						</el-table-column>
+						<el-table-column width="250px" label="设备信息">
+							<template #default="{ row }">
+								<div class="status">
+									<span>商户</span>
+									<span>
+										{{ row.merchantName }}
+									</span>
+								</div>
+								<div class="status">
+									<span>设备名</span>
+									<span>
+										{{ row.hardName }}
+									</span>
+								</div>
+								<div class="status">
+									<span>设备类型</span>
+									<span>
+										<dict-tag :options="hard_type" :value="row.hardType" />
+									</span>
+								</div>
+							</template>
+						</el-table-column>
+						<el-table-column prop="pic" label="发票">
+							<template #default="{ row }">
+								<preview-image v-if="row.pic" :src="row.pic" />
+							</template>
+						</el-table-column>
+						<el-table-column prop="status" label="打印状态">
+							<template #default="{ row }">
+								<dict-tag :options="hard_print_status" :value="row.status" />
+							</template>
+						</el-table-column>
+						<el-table-column prop="createTime" label="打印时间" />
+						<el-table-column label="操作" width="150">
+							<template #default="{ row }">
+								<el-button icon="InfoFilled" link type="primary" @click="doRefund(row)"> 订单详情 </el-button>
+								<el-button
+									v-if="false"
+									icon="edit-pen"
+									text
+									type="primary"
+									v-auth="'hard_hardInvoice_edit'"
+									@click="formDialogRef.openDialog(row.id)"
+									>编辑</el-button
+								>
+								<el-button v-if="false" icon="delete" text type="primary" v-auth="'hard_hardInvoice_del'" @click="handleDelete([row.id])"
+									>删除</el-button
+								>
+							</template>
+						</el-table-column>
+					</el-table>
+					<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+				</template>
+			</DraggableDepTree>
 		</div>
 
 		<!-- 编辑、新增  -->
@@ -140,6 +146,7 @@ const showSearch = ref(true)
 // 多选变量
 const selectObjs = ref([]) as any
 const multiple = ref(true)
+const draggableDepTreeRef = ref() // 树组件ref引用
 
 const { push } = useRouter()
 
@@ -149,8 +156,7 @@ const state: BasicTableProps = reactive<BasicTableProps>({
 })
 
 //  table hook
-const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } =
-	useTable(state)
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
 
 // 清空搜索条件
 const resetQuery = () => {
@@ -158,6 +164,9 @@ const resetQuery = () => {
 	queryRef.value?.resetFields()
 	// 清空多选
 	selectObjs.value = []
+	state.queryForm.deptId = ""
+	state.queryForm.deptIds = []
+	draggableDepTreeRef.value.resetData()
 	getDataList()
 }
 
@@ -192,6 +201,14 @@ const handleDelete = async (ids: string[]) => {
 		useMessage().error(err.msg)
 	}
 }
+
+// 树节点选择时
+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>
 
 <style scoped lang="scss">

src/views/hard/hard-order/index.vue

@@ -1,237 +1,256 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-				<el-row :gutter="24">
-					<el-col :span="4">
-						<el-form-item class="w100" label="用户" prop="userIds">
-							<select-user v-model="state.queryForm.userIds" />
-						</el-form-item>
-					</el-col>
-					<el-col :span="4">
-						<el-form-item class="w100" label="商户" prop="mchIds">
-							<select-mch v-model="state.queryForm.mchIds" />
-						</el-form-item>
-					</el-col>
-					<el-col :span="4">
-						<el-form-item class="w100" label="用户部门" prop="deptIdIdDeepen">
-							<select-dept v-model="state.queryForm.deptIdIdDeepen" />
-						</el-form-item>
-					</el-col>
-					<el-col :span="4">
-						<el-form-item class="w100" label="用餐时间段" prop="hourType">
-							<dict-select v-model="state.queryForm.hourType" dict-code="daily_menu" />
-						</el-form-item>
-					</el-col>
-					<el-col :span="5">
-						<el-form-item class="w100" label="创建时间" prop="payTimeList">
-							<el-date-picker v-model="state.queryForm.payTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
-						</el-form-item>
-					</el-col>
-					<el-form-item>
-						<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
-						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
-					</el-form-item>
-				</el-row>
-			</el-form>
-			<div class="flex justify-between items-center">
-				<el-tabs class="flex-1" v-if="tabList && tabList.length" v-model="activeName" @tab-click="handleClick">
-					<div v-for="v in tabList" :key="v.value">
-						<el-tab-pane :label="v.label" :name="v.value">
-							<div></div>
-						</el-tab-pane>
-					</div>
-				</el-tabs>
-				<right-toolbar
-					v-model:showSearch="showSearch"
-					:export="'sys_audit_export'"
-					@exportExcel="exportExcel"
-					class="ml10"
-					style="float: right; margin-right: 20px"
-					@queryTable="getDataList"
-				/>
-			</div>
-			<el-table
-				:data="state.dataList"
-				v-loading="state.loading"
-				border
-				:cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle"
-				@selection-change="selectionChangHandle"
-				@sort-change="sortChangeHandle"
-				show-summary
-				:summary-method="getSummaries"
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:show-expand="true"
+				@getSelectNode="handleGetSelectNode"
+				switch-inactive-text="当前部门"
+				switch-active-text="当前部门及子部门"
+				:defaultTreeWidth="20"
 			>
-				<el-table-column type="selection" width="60" align="center" />
-				<el-table-column type="index" label="#" width="50" />
-				<el-table-column width="200" label="用户">
-					<template #default="{ row }">
-						<div class="flex flex-row items-center justify-center">
-							<preview-image width="50px" height="50px" :src="row.userAvatar" />
-							<div class="flex flex-col ml-2 items-start cursor-pointer hover:underline hover:text-blue-500">
-								<span> {{ row.username }}</span>
-								<span> {{ row.userMobile }}</span>
+				<template #default>
+					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+						<el-row :gutter="24">
+							<el-col :span="4">
+								<el-form-item class="w100" label="用户" prop="userIds">
+									<select-user v-model="state.queryForm.userIds" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="4">
+								<el-form-item class="w100" label="商户" prop="mchIds">
+									<select-mch v-model="state.queryForm.mchIds" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="4">
+								<el-form-item class="w100" label="用户部门" prop="deptIdIdDeepen">
+									<select-dept v-model="state.queryForm.deptIdIdDeepen" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="4">
+								<el-form-item class="w100" label="用餐时间段" prop="hourType">
+									<dict-select v-model="state.queryForm.hourType" dict-code="daily_menu" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="5">
+								<el-form-item class="w100" label="创建时间" prop="payTimeList">
+									<el-date-picker v-model="state.queryForm.payTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
+								</el-form-item>
+							</el-col>
+							<el-form-item>
+								<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
+								<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
+							</el-form-item>
+						</el-row>
+					</el-form>
+					<div class="flex justify-between items-center">
+						<el-tabs class="flex-1" v-if="tabList && tabList.length" v-model="activeName" @tab-click="handleClick">
+							<div v-for="v in tabList" :key="v.value">
+								<el-tab-pane :label="v.label" :name="v.value">
+									<div></div>
+								</el-tab-pane>
 							</div>
-						</div>
-					</template>
-				</el-table-column>
-				<el-table-column width="200px" label="商品">
-					<template #default="{ row }">
-						<div class="desc">
-							<span>商品</span>
-							<el-tooltip :content="row.productDesc" placement="top-start">
-								<span class="text-line">{{ row.productDesc }}</span>
-							</el-tooltip>
-						</div>
-						<div class="status" v-if="row.hourType">
-							<span>用餐时间段</span>
-							<span>
-								<dict-tag :options="daily_menu" :value="row.hourType" />
-							</span>
-						</div>
-					</template>
-				</el-table-column>
-				<el-table-column width="250px" label="设备信息">
-					<template #default="{ row }">
-						<div class="status">
-							<span>商户</span>
-							<span>
-								{{ row.merchantName }}
-							</span>
-						</div>
-						<div class="status">
-							<span>设备名</span>
-							<span>
-								{{ row.hardName }}
-							</span>
-						</div>
-						<div class="status">
-							<span>设备类型</span>
-							<span>
-								<dict-tag :options="hard_type" :value="row.hardType" />
-							</span>
-						</div>
-					</template>
-				</el-table-column>
-				<el-table-column width="250px" label="订单信息">
-					<template #default="{ row }">
-						<div class="status">
-							<span>订单类型</span>
-							<span>
-								<dict-tag :options="hard_order_type" :value="row.orderType" />
-							</span>
-						</div>
-						<div class="status">
-							<span>支付方式</span>
-							<span>
-								<dict-tag :options="hard_pay_type" :value="row.payType" />
-							</span>
-						</div>
-						<div class="status">
-							<span>订单状态</span>
-							<span>
-								<dict-tag :options="hard_order_status" :value="row.orderStatus" />
-							</span>
-						</div>
-					</template>
-				</el-table-column>
-				<el-table-column width="200px" prop="paymentInformation" label="付款信息">
-					<template #default="{ row }">
-						<div class="status">
-							<span>商品总价</span>
-							<span class="color-success">
-								{{ displayPrice(row.totalPrice) }}
-							</span>
-						</div>
-						<div class="status">
-							<span>额外支付</span>
-							<span class="color-danger">
-								{{ displayPrice(row.extraPrice) }}
-							</span>
-						</div>
-						<div class="status">
-							<span>实际支付</span>
-							<span class="color-primary">
-								{{ displayPrice(row.payPrice) }}
-							</span>
-						</div>
-					</template>
-				</el-table-column>
-				<el-table-column width="270px" label="退款信息">
-					<template #default="{ row }">
-						<div v-if="row.payRefundId">
-							<div class="status">
-								<span>退款金额</span>
-								<span class="color-success">
-									{{ displayPrice(row.refundPrice) }}
-								</span>
-							</div>
-							<div class="status">
-								<span>退款状态</span>
-								<span class="color-success">
-									<dict-tag :options="hard_refund_status" :value="row.refundStatus" />
-								</span>
-							</div>
-							<div class="status">
-								<span>退款时间</span>
-								<span>
-									{{ row.refundTime }}
-								</span>
-							</div>
-						</div>
-					</template>
-				</el-table-column>
-				<el-table-column label="支付时间" align="center" prop="payTime" width="250px">
-					<template #default="{ row }">
-						<div class="status">
-							<span>创建时间</span>
-							<span>{{ row.createTime }} </span>
-						</div>
-						<div class="status">
-							<span>支付时间</span>
-							<span>{{ row.payTime }} </span>
-						</div>
-					</template>
-				</el-table-column>
-				<el-table-column fixed="right" label="操作" width="200">
-					<template #default="{ row }">
-						<div class="grid grid-cols-2 justify-between">
-							<el-button icon="Printer" text type="primary" @click="print(row)" v-auth="'hard_hardInvoice_admin_print'">
-								打印发票
-							</el-button>
-							<el-button icon="ShoppingCartFull" text type="primary" @click="shopCarDialogRef.openDialog(row.id)"> 购物车 </el-button>
-							<el-button icon="Money" link type="primary" @click="transactionListRef.openDialog(row.walletId)"> 钱包明细 </el-button>
-							<el-button icon="InfoFilled" link type="primary" v-auth="'wallet_walletTransaction_update_balance'" @click="doRefund(row)">
-								订单详情
-							</el-button>
-						</div>
-						<el-button
-							v-if="false"
-							icon="edit-pen"
-							text
-							type="primary"
-							v-auth="'hard_hardwareOrder_edit'"
-							@click="formDialogRef.openDialog(row.id)"
-							>编辑
-						</el-button>
-						<el-button
-							v-if="!row.payRefundId"
-							icon="stamp"
-							text
-							type="primary"
-							v-auth="'hard_hardAfterSale_adminRefund'"
-							@click="adminRefundDailogRef.openDialog(row.id)"
-						>
-							退款
-						</el-button>
-						<el-button v-if="false" icon="delete" text type="primary" v-auth="'hard_hardwareOrder_del'" @click="handleDelete([row.id])"
-							>删除</el-button
-						>
-					</template>
-				</el-table-column>
-			</el-table>
-			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+						</el-tabs>
+						<right-toolbar
+							v-model:showSearch="showSearch"
+							:export="'sys_audit_export'"
+							@exportExcel="exportExcel"
+							class="ml10"
+							style="float: right; margin-right: 20px"
+							@queryTable="getDataList"
+						/>
+					</div>
+					<el-table
+						:data="state.dataList"
+						v-loading="state.loading"
+						border
+						:cell-style="tableStyle.cellStyle"
+						:header-cell-style="tableStyle.headerCellStyle"
+						@selection-change="selectionChangHandle"
+						@sort-change="sortChangeHandle"
+						show-summary
+						:summary-method="getSummaries"
+					>
+						<el-table-column type="selection" width="60" align="center" />
+						<el-table-column type="index" label="#" width="50" />
+						<el-table-column width="200" label="用户">
+							<template #default="{ row }">
+								<div class="flex flex-row items-center justify-center">
+									<preview-image width="50px" height="50px" :src="row.userAvatar" />
+									<div class="flex flex-col ml-2 items-start cursor-pointer hover:underline hover:text-blue-500">
+										<span> {{ row.username }}</span>
+										<span> {{ row.userMobile }}</span>
+									</div>
+								</div>
+							</template>
+						</el-table-column>
+						<el-table-column width="200px" label="商品">
+							<template #default="{ row }">
+								<div class="desc">
+									<span>商品</span>
+									<el-tooltip :content="row.productDesc" placement="top-start">
+										<span class="text-line">{{ row.productDesc }}</span>
+									</el-tooltip>
+								</div>
+								<div class="status" v-if="row.hourType">
+									<span>用餐时间段</span>
+									<span>
+										<dict-tag :options="daily_menu" :value="row.hourType" />
+									</span>
+								</div>
+							</template>
+						</el-table-column>
+						<el-table-column width="250px" label="设备信息">
+							<template #default="{ row }">
+								<div class="status">
+									<span>商户</span>
+									<span>
+										{{ row.merchantName }}
+									</span>
+								</div>
+								<div class="status">
+									<span>设备名</span>
+									<span>
+										{{ row.hardName }}
+									</span>
+								</div>
+								<div class="status">
+									<span>设备类型</span>
+									<span>
+										<dict-tag :options="hard_type" :value="row.hardType" />
+									</span>
+								</div>
+							</template>
+						</el-table-column>
+						<el-table-column width="250px" label="订单信息">
+							<template #default="{ row }">
+								<div class="status">
+									<span>订单类型</span>
+									<span>
+										<dict-tag :options="hard_order_type" :value="row.orderType" />
+									</span>
+								</div>
+								<div class="status">
+									<span>支付方式</span>
+									<span>
+										<dict-tag :options="hard_pay_type" :value="row.payType" />
+									</span>
+								</div>
+								<div class="status">
+									<span>订单状态</span>
+									<span>
+										<dict-tag :options="hard_order_status" :value="row.orderStatus" />
+									</span>
+								</div>
+							</template>
+						</el-table-column>
+						<el-table-column width="200px" prop="paymentInformation" label="付款信息">
+							<template #default="{ row }">
+								<div class="status">
+									<span>商品总价</span>
+									<span class="color-success">
+										{{ displayPrice(row.totalPrice) }}
+									</span>
+								</div>
+								<div class="status">
+									<span>额外支付</span>
+									<span class="color-danger">
+										{{ displayPrice(row.extraPrice) }}
+									</span>
+								</div>
+								<div class="status">
+									<span>实际支付</span>
+									<span class="color-primary">
+										{{ displayPrice(row.payPrice) }}
+									</span>
+								</div>
+							</template>
+						</el-table-column>
+						<el-table-column width="270px" label="退款信息">
+							<template #default="{ row }">
+								<div v-if="row.payRefundId">
+									<div class="status">
+										<span>退款金额</span>
+										<span class="color-success">
+											{{ displayPrice(row.refundPrice) }}
+										</span>
+									</div>
+									<div class="status">
+										<span>退款状态</span>
+										<span class="color-success">
+											<dict-tag :options="hard_refund_status" :value="row.refundStatus" />
+										</span>
+									</div>
+									<div class="status">
+										<span>退款时间</span>
+										<span>
+											{{ row.refundTime }}
+										</span>
+									</div>
+								</div>
+							</template>
+						</el-table-column>
+						<el-table-column label="支付时间" align="center" prop="payTime" width="250px">
+							<template #default="{ row }">
+								<div class="status">
+									<span>创建时间</span>
+									<span>{{ row.createTime }} </span>
+								</div>
+								<div class="status">
+									<span>支付时间</span>
+									<span>{{ row.payTime }} </span>
+								</div>
+							</template>
+						</el-table-column>
+						<el-table-column fixed="right" label="操作" width="200">
+							<template #default="{ row }">
+								<div class="grid grid-cols-2 justify-between">
+									<el-button icon="Printer" text type="primary" @click="print(row)" v-auth="'hard_hardInvoice_admin_print'">
+										打印发票
+									</el-button>
+									<el-button icon="ShoppingCartFull" text type="primary" @click="shopCarDialogRef.openDialog(row.id)"> 购物车 </el-button>
+									<el-button icon="Money" link type="primary" @click="transactionListRef.openDialog(row.walletId)"> 钱包明细 </el-button>
+									<el-button
+										icon="InfoFilled"
+										link
+										type="primary"
+										v-auth="'wallet_walletTransaction_update_balance'"
+										@click="doRefund(row)"
+									>
+										订单详情
+									</el-button>
+								</div>
+								<el-button
+									v-if="false"
+									icon="edit-pen"
+									text
+									type="primary"
+									v-auth="'hard_hardwareOrder_edit'"
+									@click="formDialogRef.openDialog(row.id)"
+									>编辑
+								</el-button>
+								<el-button
+									v-if="!row.payRefundId"
+									icon="stamp"
+									text
+									type="primary"
+									v-auth="'hard_hardAfterSale_adminRefund'"
+									@click="adminRefundDailogRef.openDialog(row.id)"
+								>
+									退款
+								</el-button>
+								<el-button v-if="false" icon="delete" text type="primary" v-auth="'hard_hardwareOrder_del'" @click="handleDelete([row.id])"
+									>删除</el-button
+								>
+							</template>
+						</el-table-column>
+					</el-table>
+					<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+				</template>
+			</DraggableDepTree>
 		</div>
+
 		<!-- 编辑、新增  -->
 		<transaction-list ref="transactionListRef" @refresh="getDataList(false)" />
 		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
@@ -280,6 +299,7 @@ const showSearch = ref(true)
 // 多选变量
 const selectObjs = ref([]) as any
 const multiple = ref(true)
+const draggableDepTreeRef = ref() // 树组件ref引用
 
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {},
@@ -301,6 +321,9 @@ const resetQuery = () => {
 	queryRef.value?.resetFields()
 	// 清空多选
 	selectObjs.value = []
+	state.queryForm.deptId = ""
+	state.queryForm.deptIds = []
+	draggableDepTreeRef.value.resetData()
 	getDataList()
 }
 
@@ -329,6 +352,14 @@ const print = async (row: any) => {
 	}
 }
 
+// 树节点选择时
+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()
+}
+
 // const adminRefund = async (row: any) => {
 // 	let loading: any = null
 // 	try {

src/views/supermarketerp/smErpCgDd/index.vue

@@ -79,7 +79,7 @@
 	</div>
 </template>
 
-<script setup lang="ts" name="systemSmErpCgDd">
+<script setup lang="ts" name="index">
 import { useRouter } from "vue-router"
 import { BasicTableProps, useTable } from "/@/hooks/table"
 import { fetchList, delObjs } from "/@/api/supermarketerp/smErpCgDd"

src/views/supermarketerp/smErpCgDd/smErpCgDdOption.vue

@@ -285,7 +285,7 @@
 	</div>
 </template>
 
-<script setup lang="ts" name="SmErpCgPlanDialog">
+<script setup lang="ts" name="smErpCgDd">
 import { ref, reactive, computed, onMounted } from "vue"
 import { useRouter, useRoute } from "vue-router"
 import { useDict } from "/@/hooks/dict"

src/views/supermarketerp/smErpCgPlan/cgPlanOption.vue

@@ -251,7 +251,7 @@
 	</div>
 </template>
 
-<script setup lang="ts" name="SmErpCgPlanDialog">
+<script setup lang="ts" name="cgPlanOption">
 import { ref, reactive, computed, onMounted } from "vue"
 import { useRouter, useRoute } from "vue-router"
 import { useDict } from "/@/hooks/dict"

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>