From 89a845cc9cc049c85ec81190364ab35200808c38 Mon Sep 17 00:00:00 2001
From: weiwei <ctw@example.com>
Date: Tue, 18 Feb 2025 14:38:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E8=B7=A8=E5=8D=95=E4=BD=8D=E5=B0=B1?=
 =?UTF-8?q?=E9=A4=90=E3=80=81=E5=A4=96=E6=9D=A5=E4=BA=BA=E5=91=98=E9=A4=90?=
 =?UTF-8?q?=E5=88=B8=E3=80=81=E5=85=85=E5=80=BC=E6=B6=88=E8=B4=B9=E9=80=80?=
 =?UTF-8?q?=E6=AC=BE=E8=AE=B0=E5=BD=95=EF=BC=8C=E6=B7=BB=E5=8A=A0=E9=83=A8?=
 =?UTF-8?q?=E9=97=A8=E6=A0=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DraggableDepTree/index.vue |   2 +-
 src/views/admin/system/user/index.vue     |   2 +-
 src/views/wallet/wallet-cz/index.vue      | 232 +++++++++++---------
 src/views/wallet/wallet-foreign/index.vue | 245 ++++++++++++---------
 src/views/wallet/wallet-stride/index.vue  | 235 +++++++++++---------
 src/views/wallet/wallet-tk/index.vue      | 247 +++++++++++++---------
 src/views/wallet/wallet-xf/index.vue      | 238 +++++++++++++--------
 7 files changed, 703 insertions(+), 498 deletions(-)

diff --git a/src/components/DraggableDepTree/index.vue b/src/components/DraggableDepTree/index.vue
index 14f3148..bd5430a 100644
--- a/src/components/DraggableDepTree/index.vue
+++ b/src/components/DraggableDepTree/index.vue
@@ -211,7 +211,7 @@ defineExpose({
 })
 </script>
 
-<style lang="scss">
+<style>
 .splitpanes--vertical > .splitpanes__splitter {
 	background: var(--el-color-primary);
 	/* min-width: 2px; */
diff --git a/src/views/admin/system/user/index.vue b/src/views/admin/system/user/index.vue
index 11497c5..0a5bbf9 100644
--- a/src/views/admin/system/user/index.vue
+++ b/src/views/admin/system/user/index.vue
@@ -229,7 +229,7 @@ const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableS
 
 // 部门树使用的数据
 const deptData = reactive({
-	queryList: (name: String) => {
+	queryList: (name: string) => {
 		return deptTree({
 			deptName: name,
 		})
diff --git a/src/views/wallet/wallet-cz/index.vue b/src/views/wallet/wallet-cz/index.vue
index a999fbf..179cc4f 100644
--- a/src/views/wallet/wallet-cz/index.vue
+++ b/src/views/wallet/wallet-cz/index.vue
@@ -1,101 +1,111 @@
 <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="6">
-						<el-form-item class="w100" label="充值时间" prop="payTimeList">
-							<el-date-picker v-model="state.queryForm.payTimeList" 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-row>
-				<div class="mb8" style="width: 100%">
-					<right-toolbar
-						:search="false"
-						v-model:showSearch="showSearch"
-						:export="'wallet_walletTransaction_export'"
-						@exportExcel="exportExcel"
-						class="ml10 mr20"
-						style="float: right"
-						@queryTable="getDataList"
-					></right-toolbar>
-				</div>
-			</el-row>
-			<el-table
-				:data="state.dataList"
-				v-loading="state.loading"
-				border
-				:summary-method="getSummaries"
-				show-summary
-				:cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle"
-				@selection-change="selectionChangHandle"
-				@sort-change="sortChangeHandle"
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:query="deptData.queryList"
+				:show-expand="true"
+				@node-click="handleNodeClick"
+				@treeNodeCheckChange="treeNodeCheckChange"
+				@treeDeepSearch="treeDeepSearch"
+				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 prop="walletTypeUniqueCode" width="200" label="饭卡类型">
-					<template #default="{ row }">
-						<div class="flex items-center justify-center">
-							<div class="color-primary">{{ row.walletTypeName }}</div>
-							<div class="flex items-center just ml5">
-								<dict-tag :options="wallet_type" :value="row.walletTypeUniqueCode" />
-							</div>
+				<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="6">
+								<el-form-item class="w100" label="充值时间" prop="payTimeList">
+									<el-date-picker v-model="state.queryForm.payTimeList" 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-row>
+						<div class="mb8" style="width: 100%">
+							<right-toolbar
+								:search="false"
+								v-model:showSearch="showSearch"
+								:export="'wallet_walletTransaction_export'"
+								@exportExcel="exportExcel"
+								class="ml10 mr20"
+								style="float: right"
+								@queryTable="getDataList"
+							></right-toolbar>
 						</div>
-					</template>
-				</el-table-column>
-				<el-table-column prop="wallet_biz" width="200" label="交易类型">
-					<template #default="{ row }">
-						<dict-tag :options="wallet_biz" :value="row.bizType" />
-					</template>
-				</el-table-column>
-				<el-table-column prop="price" width="200" align="center" label="充值金额">
-					<template #default="{ row }">
-						<div class="color-success">{{ displayPrice(row.price) }}</div>
-					</template>
-				</el-table-column>
-				<el-table-column prop="balance" width="200" align="center" label="饭卡余额">
-					<template #default="{ row }">
-						<div class="color-primary">{{ displayPrice(row.balance) }}</div>
-					</template>
-				</el-table-column>
-				<el-table-column prop="createTime" width="200" label="充值时间" />
-				<el-table-column v-if="false" label="操作" width="150">
-					<template #default="scope">
-						<el-button
-							icon="delete"
-							text
-							type="primary"
-							v-auth="'wallet_walletRecharge_del'"
-							@click="handleDelete([scope.row.id])"
-							>删除</el-button
-						>
-					</template>
-				</el-table-column>
-			</el-table>
-			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+					</el-row>
+					<el-table
+						:data="state.dataList"
+						v-loading="state.loading"
+						border
+						:summary-method="getSummaries"
+						show-summary
+						: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 prop="walletTypeUniqueCode" width="200" label="饭卡类型">
+							<template #default="{ row }">
+								<div class="flex items-center justify-center">
+									<div class="color-primary">{{ row.walletTypeName }}</div>
+									<div class="flex items-center just ml5">
+										<dict-tag :options="wallet_type" :value="row.walletTypeUniqueCode" />
+									</div>
+								</div>
+							</template>
+						</el-table-column>
+						<el-table-column prop="wallet_biz" width="200" label="交易类型">
+							<template #default="{ row }">
+								<dict-tag :options="wallet_biz" :value="row.bizType" />
+							</template>
+						</el-table-column>
+						<el-table-column prop="price" width="200" align="center" label="充值金额">
+							<template #default="{ row }">
+								<div class="color-success">{{ displayPrice(row.price) }}</div>
+							</template>
+						</el-table-column>
+						<el-table-column prop="balance" width="200" align="center" label="饭卡余额">
+							<template #default="{ row }">
+								<div class="color-primary">{{ displayPrice(row.balance) }}</div>
+							</template>
+						</el-table-column>
+						<el-table-column prop="createTime" width="200" label="充值时间" />
+						<el-table-column v-if="false" label="操作" width="150">
+							<template #default="scope">
+								<el-button icon="delete" text type="primary" v-auth="'wallet_walletRecharge_del'" @click="handleDelete([scope.row.id])"
+									>删除</el-button
+								>
+							</template>
+						</el-table-column>
+					</el-table>
+					<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+				</template>
+			</DraggableDepTree>
 		</div>
 		<!-- 编辑、新增  -->
 		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
@@ -108,6 +118,7 @@ import { pageCz } from "/@/api/wallet/wallet-transaction"
 import { useMessage, useMessageBox } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
 import { displayPrice } from "/@/utils/formatMoney"
+import { deptTree } from "/@/api/admin/dept"
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import("./form.vue"))
@@ -121,6 +132,7 @@ const showSearch = ref(true)
 // 多选变量
 const selectObjs = ref([]) as any
 const multiple = ref(true)
+const draggableDepTreeRef = ref() // 树组件ref引用
 
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {},
@@ -128,8 +140,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 +148,8 @@ const resetQuery = () => {
 	queryRef.value?.resetFields()
 	// 清空多选
 	selectObjs.value = []
+	state.queryForm.deptId = ""
+	draggableDepTreeRef.value.resetData()
 	getDataList()
 }
 
@@ -180,11 +193,38 @@ const handleDelete = async (ids: string[]) => {
 	}
 
 	try {
-		await delObjs(ids)``
+		await delObjs(ids)
 		getDataList()
 		useMessage().success("删除成功")
 	} catch (err: any) {
 		useMessage().error(err.msg)
 	}
 }
+
+// 部门树使用的数据
+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
+	getDataList()
+}
 </script>
diff --git a/src/views/wallet/wallet-foreign/index.vue b/src/views/wallet/wallet-foreign/index.vue
index f6d31ab..5f19815 100644
--- a/src/views/wallet/wallet-foreign/index.vue
+++ b/src/views/wallet/wallet-foreign/index.vue
@@ -1,105 +1,114 @@
 <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-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-row>
-				<div class="mb8" style="width: 100%">
-					<el-button
-						icon="folder-add"
-						type="primary"
-						class="ml10"
-						@click="formDialogRef.openDialog()"
-						v-auth="'wallet_walletForeign_add'"
-					>
-						申 请
-					</el-button>
-					<el-button
-						plain
-						:disabled="multiple"
-						icon="Delete"
-						type="primary"
-						v-auth="'wallet_walletForeign_del'"
-						@click="handleDelete(selectObjs)"
-					>
-						删除
-					</el-button>
-					<right-toolbar
-						v-model:showSearch="showSearch"
-						:export="'wallet_walletForeign_export'"
-						@exportExcel="exportExcel"
-						class="ml10 mr20"
-						style="float: right"
-						@queryTable="getDataList"
-					></right-toolbar>
-				</div>
-			</el-row>
-			<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="请输入部门名称"
+				:query="deptData.queryList"
+				:show-expand="true"
+				@node-click="handleNodeClick"
+				@treeNodeCheckChange="treeNodeCheckChange"
+				@treeDeepSearch="treeDeepSearch"
+				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="deptName" label="部门" />
-				<el-table-column prop="applyStartTime" label="申请使用时间">
-					<template #default="{ row }">
-						<span>{{ row.applyStartTime }}</span>
-						<span class="mx-1">-</span>
-						<span>{{ row.applyEndTime }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="count" width="100" label="申请数量" />
-				<el-table-column prop="useCount" width="100" label="使用数量" />
-				<el-table-column prop="processStatus" width="100" label="审核状态">
-					<template #default="{ row }">
-						<dict-tag :options="check_status" :value="row.processStatus" />
-					</template>
-				</el-table-column>
-				<el-table-column prop="processTime" label="审核时间" />
-				<el-table-column prop="createTime" label="创建时间" />
-				<el-table-column label="操作" width="200">
-					<template #default="{ row }">
-						<el-button icon="Promotion" text type="primary" @click="doInfo(row)"> 查看审批 </el-button>
-						<el-button
-							v-if="row.processStatus == 2"
-							icon="InfoFilled"
-							text
-							type="primary"
-							@click="codeUseTableRef.openDialog(row.id)"
-						>
-							使用情况
-						</el-button>
-						<el-button
-							v-if="false"
-							icon="delete"
-							text
-							type="primary"
-							v-auth="'wallet_walletForeign_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-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-row>
+						<div class="mb8" style="width: 100%">
+							<el-button
+								icon="folder-add"
+								type="primary"
+								class="ml10"
+								@click="formDialogRef.openDialog()"
+								v-auth="'wallet_walletForeign_add'"
+							>
+								申 请
+							</el-button>
+							<el-button
+								plain
+								:disabled="multiple"
+								icon="Delete"
+								type="primary"
+								v-auth="'wallet_walletForeign_del'"
+								@click="handleDelete(selectObjs)"
+							>
+								删除
+							</el-button>
+							<right-toolbar
+								v-model:showSearch="showSearch"
+								:export="'wallet_walletForeign_export'"
+								@exportExcel="exportExcel"
+								class="ml10 mr20"
+								style="float: right"
+								@queryTable="getDataList"
+							></right-toolbar>
+						</div>
+					</el-row>
+					<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="deptName" label="部门" />
+						<el-table-column prop="applyStartTime" label="申请使用时间">
+							<template #default="{ row }">
+								<span>{{ row.applyStartTime }}</span>
+								<span class="mx-1">-</span>
+								<span>{{ row.applyEndTime }}</span>
+							</template>
+						</el-table-column>
+						<el-table-column prop="count" width="100" label="申请数量" />
+						<el-table-column prop="useCount" width="100" label="使用数量" />
+						<el-table-column prop="processStatus" width="100" label="审核状态">
+							<template #default="{ row }">
+								<dict-tag :options="check_status" :value="row.processStatus" />
+							</template>
+						</el-table-column>
+						<el-table-column prop="processTime" label="审核时间" />
+						<el-table-column prop="createTime" label="创建时间" />
+						<el-table-column label="操作" width="200">
+							<template #default="{ row }">
+								<el-button icon="Promotion" text type="primary" @click="doInfo(row)"> 查看审批 </el-button>
+								<el-button v-if="row.processStatus == 2" icon="InfoFilled" text type="primary" @click="codeUseTableRef.openDialog(row.id)">
+									使用情况
+								</el-button>
+								<el-button
+									v-if="false"
+									icon="delete"
+									text
+									type="primary"
+									v-auth="'wallet_walletForeign_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>
 
 		<!-- 编辑、新增  -->
@@ -113,6 +122,7 @@ import { BasicTableProps, useTable } from "/@/hooks/table"
 import { fetchList, pageJoin, delObjs } from "/@/api/wallet/wallet-foreign"
 import { useMessage, useMessageBox } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
+import { deptTree } from "/@/api/admin/dept"
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import("./form.vue"))
@@ -128,6 +138,7 @@ const showSearch = ref(true)
 // 多选变量
 const selectObjs = ref([]) as any
 const multiple = ref(true)
+const draggableDepTreeRef = ref() // 树组件ref引用
 
 const { push } = useRouter()
 
@@ -137,8 +148,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 = () => {
@@ -146,6 +156,8 @@ const resetQuery = () => {
 	queryRef.value?.resetFields()
 	// 清空多选
 	selectObjs.value = []
+	state.queryForm.deptId = ""
+	draggableDepTreeRef.value.resetData()
 	getDataList()
 }
 
@@ -155,11 +167,7 @@ const doInfo = (row: any) => {
 
 // 导出excel
 const exportExcel = () => {
-	downBlobFile(
-		"/wallet/walletForeign/export",
-		Object.assign(state.queryForm, { ids: selectObjs }),
-		"walletForeign.xlsx",
-	)
+	downBlobFile("/wallet/walletForeign/export", Object.assign(state.queryForm, { ids: selectObjs }), "walletForeign.xlsx")
 }
 
 // 多选事件
@@ -184,4 +192,31 @@ const handleDelete = async (ids: string[]) => {
 		useMessage().error(err.msg)
 	}
 }
+
+// 部门树使用的数据
+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
+	getDataList()
+}
 </script>
diff --git a/src/views/wallet/wallet-stride/index.vue b/src/views/wallet/wallet-stride/index.vue
index ba04a09..e7636e3 100644
--- a/src/views/wallet/wallet-stride/index.vue
+++ b/src/views/wallet/wallet-stride/index.vue
@@ -1,106 +1,109 @@
 <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-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-row>
-				<div class="mb8" style="width: 100%">
-					<el-button
-						icon="folder-add"
-						type="primary"
-						class="ml10"
-						@click="formDialogRef.openDialog()"
-						v-auth="'admin_walletStride_add'"
-					>
-						申 请
-					</el-button>
-					<el-button
-						plain
-						:disabled="multiple"
-						icon="Delete"
-						type="primary"
-						v-auth="'admin_walletStride_del'"
-						@click="handleDelete(selectObjs)"
-					>
-						删除
-					</el-button>
-					<right-toolbar
-						v-model:showSearch="showSearch"
-						:export="'admin_walletStride_export'"
-						@exportExcel="exportExcel"
-						class="ml10 mr20"
-						style="float: right"
-						@queryTable="getDataList"
-					></right-toolbar>
-				</div>
-			</el-row>
-			<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="请输入部门名称"
+				:query="deptData.queryList"
+				:show-expand="true"
+				@node-click="handleNodeClick"
+				@treeNodeCheckChange="treeNodeCheckChange"
+				@treeDeepSearch="treeDeepSearch"
+				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="deptName" label="部门" />
-				<el-table-column prop="count" width="100" label="申请数量" />
-				<el-table-column prop="useCount" width="100" label="使用数量" />
-				<el-table-column prop="processStatus" width="100" label="审核状态">
-					<template #default="{ row }">
-						<dict-tag :options="check_status" :value="row.processStatus" />
-					</template>
-				</el-table-column>
-				<el-table-column prop="processTime" label="审核时间" />
-				<el-table-column prop="createTime" label="创建时间" />
-				<el-table-column label="操作" width="200">
-					<template #default="{ row }">
-						<el-button
-							v-if="false"
-							icon="edit-pen"
-							text
-							type="primary"
-							v-auth="'admin_walletStride_edit'"
-							@click="formDialogRef.openDialog(row.id)"
-							>编辑</el-button
-						>
-						<el-button
-							v-if="false"
-							icon="delete"
-							text
-							type="primary"
-							v-auth="'admin_walletStride_del'"
-							@click="handleDelete([row.id])"
-							>删除</el-button
-						>
-						<el-button icon="Promotion" text type="primary" @click="doInfo(row)"> 查看审批 </el-button>
-						<el-button
-							v-if="row.processStatus == 2"
-							icon="InfoFilled"
-							text
-							type="primary"
-							@click="codeUseTableRef.openDialog(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-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-row>
+						<div class="mb8" style="width: 100%">
+							<el-button
+								icon="folder-add"
+								type="primary"
+								class="ml10"
+								@click="formDialogRef.openDialog()"
+								v-auth="'admin_walletStride_add'"
+							>
+								申 请
+							</el-button>
+							<el-button
+								plain
+								:disabled="multiple"
+								icon="Delete"
+								type="primary"
+								v-auth="'admin_walletStride_del'"
+								@click="handleDelete(selectObjs)"
+							>
+								删除
+							</el-button>
+							<right-toolbar
+								v-model:showSearch="showSearch"
+								:export="'admin_walletStride_export'"
+								@exportExcel="exportExcel"
+								class="ml10 mr20"
+								style="float: right"
+								@queryTable="getDataList"
+							></right-toolbar>
+						</div>
+					</el-row>
+					<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="deptName" label="部门" />
+						<el-table-column prop="count" width="100" label="申请数量" />
+						<el-table-column prop="useCount" width="100" label="使用数量" />
+						<el-table-column prop="processStatus" width="100" label="审核状态">
+							<template #default="{ row }">
+								<dict-tag :options="check_status" :value="row.processStatus" />
+							</template>
+						</el-table-column>
+						<el-table-column prop="processTime" label="审核时间" />
+						<el-table-column prop="createTime" label="创建时间" />
+						<el-table-column label="操作" width="200">
+							<template #default="{ row }">
+								<el-button
+									v-if="false"
+									icon="edit-pen"
+									text
+									type="primary"
+									v-auth="'admin_walletStride_edit'"
+									@click="formDialogRef.openDialog(row.id)"
+									>编辑</el-button
+								>
+								<el-button v-if="false" icon="delete" text type="primary" v-auth="'admin_walletStride_del'" @click="handleDelete([row.id])"
+									>删除</el-button
+								>
+								<el-button icon="Promotion" text type="primary" @click="doInfo(row)"> 查看审批 </el-button>
+								<el-button v-if="row.processStatus == 2" icon="InfoFilled" text type="primary" @click="codeUseTableRef.openDialog(row.id)">
+									使用情况
+								</el-button>
+							</template>
+						</el-table-column>
+					</el-table>
+					<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+				</template>
+			</DraggableDepTree>
 		</div>
 
 		<!-- 编辑、新增  -->
@@ -114,6 +117,7 @@ import { BasicTableProps, useTable } from "/@/hooks/table"
 import { fetchList, delObjs, pageJoin } from "/@/api/wallet/wallet-stride"
 import { useMessage, useMessageBox } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
+import { deptTree } from "/@/api/admin/dept"
 
 const { push } = useRouter()
 
@@ -131,6 +135,7 @@ const showSearch = ref(true)
 // 多选变量
 const selectObjs = ref([]) as any
 const multiple = ref(true)
+const draggableDepTreeRef = ref() // 树组件ref引用
 
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {},
@@ -138,8 +143,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 = () => {
@@ -147,6 +151,8 @@ const resetQuery = () => {
 	queryRef.value?.resetFields()
 	// 清空多选
 	selectObjs.value = []
+	state.queryForm.deptId = ""
+	draggableDepTreeRef.value.resetData()
 	getDataList()
 }
 
@@ -181,4 +187,31 @@ const handleDelete = async (ids: string[]) => {
 		useMessage().error(err.msg)
 	}
 }
+
+// 部门树使用的数据
+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
+	getDataList()
+}
 </script>
diff --git a/src/views/wallet/wallet-tk/index.vue b/src/views/wallet/wallet-tk/index.vue
index 6e285cb..a3cab7a 100644
--- a/src/views/wallet/wallet-tk/index.vue
+++ b/src/views/wallet/wallet-tk/index.vue
@@ -1,107 +1,122 @@
 <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="6">
-						<el-form-item class="w100" label="退款时间" prop="payTimeList">
-							<el-date-picker v-model="state.queryForm.payTimeList" 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-row>
-				<div class="mb8" style="width: 100%">
-					<right-toolbar
-						:search="false"
-						v-model:showSearch="showSearch"
-						:export="'wallet_walletTransaction_export'"
-						@exportExcel="exportExcel"
-						class="ml10 mr20"
-						style="float: right"
-						@queryTable="getDataList"
-					></right-toolbar>
-				</div>
-			</el-row>
-			<el-table
-				:data="state.dataList"
-				v-loading="state.loading"
-				border
-				:summary-method="getSummaries"
-				show-summary
-				:cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle"
-				@selection-change="selectionChangHandle"
-				@sort-change="sortChangeHandle"
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:query="deptData.queryList"
+				:show-expand="true"
+				@node-click="handleNodeClick"
+				@treeNodeCheckChange="treeNodeCheckChange"
+				@treeDeepSearch="treeDeepSearch"
+				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="用户" show-overflow-tooltip />
-				<el-table-column prop="userAvatar" label="头像" show-overflow-tooltip>
-					<template #default="{ row }">
-						<preview-image :src="row.userAvatar" />
-					</template>
-				</el-table-column>
-				<el-table-column prop="userMobile" width="120" label="手机号" show-overflow-tooltip />
-				<el-table-column prop="walletTypeUniqueCode" width="200" label="饭卡类型">
-					<template #default="{ row }">
-						<div class="flex items-center justify-center">
-							<div class="color-primary">{{ row.walletTypeName }}</div>
-							<div class="flex items-center just ml5">
-								<dict-tag :options="wallet_type" :value="row.walletTypeUniqueCode" />
-							</div>
+				<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="6">
+								<el-form-item class="w100" label="退款时间" prop="payTimeList">
+									<el-date-picker v-model="state.queryForm.payTimeList" 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-row>
+						<div class="mb8" style="width: 100%">
+							<right-toolbar
+								:search="false"
+								v-model:showSearch="showSearch"
+								:export="'wallet_walletTransaction_export'"
+								@exportExcel="exportExcel"
+								class="ml10 mr20"
+								style="float: right"
+								@queryTable="getDataList"
+							></right-toolbar>
 						</div>
-					</template>
-				</el-table-column>
-				<el-table-column prop="wallet_biz" width="200" label="交易类型">
-					<template #default="{ row }">
-						<dict-tag :options="wallet_biz" :value="row.bizType" />
-					</template>
-				</el-table-column>
-				<el-table-column prop="price" align="center" width="200" label="退款金额">
-					<template #default="{ row }">
-						<div class="color-success">{{ displayPrice(row.price) }}</div>
-					</template>
-				</el-table-column>
-				<el-table-column prop="createTime" width="200" 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="'wallet_walletRecharge_edit'"
-							@click="formDialogRef.openDialog(row.id)"
-							>编辑</el-button
-						>
-						<el-button
-							v-if="false"
-							icon="delete"
-							text
-							type="primary"
-							v-auth="'wallet_walletRecharge_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-row>
+					<el-table
+						:data="state.dataList"
+						v-loading="state.loading"
+						border
+						:summary-method="getSummaries"
+						show-summary
+						: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="用户" show-overflow-tooltip />
+						<el-table-column prop="userAvatar" label="头像" show-overflow-tooltip>
+							<template #default="{ row }">
+								<preview-image :src="row.userAvatar" />
+							</template>
+						</el-table-column>
+						<el-table-column prop="userMobile" width="120" label="手机号" show-overflow-tooltip />
+						<el-table-column prop="walletTypeUniqueCode" width="200" label="饭卡类型">
+							<template #default="{ row }">
+								<div class="flex items-center justify-center">
+									<div class="color-primary">{{ row.walletTypeName }}</div>
+									<div class="flex items-center just ml5">
+										<dict-tag :options="wallet_type" :value="row.walletTypeUniqueCode" />
+									</div>
+								</div>
+							</template>
+						</el-table-column>
+						<el-table-column prop="wallet_biz" width="200" label="交易类型">
+							<template #default="{ row }">
+								<dict-tag :options="wallet_biz" :value="row.bizType" />
+							</template>
+						</el-table-column>
+						<el-table-column prop="price" align="center" width="200" label="退款金额">
+							<template #default="{ row }">
+								<div class="color-success">{{ displayPrice(row.price) }}</div>
+							</template>
+						</el-table-column>
+						<el-table-column prop="createTime" width="200" 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="'wallet_walletRecharge_edit'"
+									@click="formDialogRef.openDialog(row.id)"
+									>编辑</el-button
+								>
+								<el-button
+									v-if="false"
+									icon="delete"
+									text
+									type="primary"
+									v-auth="'wallet_walletRecharge_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>
 
 		<!-- 编辑、新增  -->
@@ -116,6 +131,7 @@ import { useMessage, useMessageBox } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
 import * as hardAfterSaleApi from "/@/api/hard/hard-after-sale"
 import { displayPrice } from "/@/utils/formatMoney"
+import { deptTree } from "/@/api/admin/dept"
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import("./form.vue"))
@@ -129,6 +145,7 @@ const showSearch = ref(true)
 // 多选变量
 const selectObjs = ref([]) as any
 const multiple = ref(true)
+const draggableDepTreeRef = ref() // 树组件ref引用
 
 const { push } = useRouter()
 
@@ -138,8 +155,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 = () => {
@@ -147,6 +163,8 @@ const resetQuery = () => {
 	queryRef.value?.resetFields()
 	// 清空多选
 	selectObjs.value = []
+	state.queryForm.deptId = ""
+	draggableDepTreeRef.value.resetData()
 	getDataList()
 }
 
@@ -205,4 +223,31 @@ const handleDelete = async (ids: string[]) => {
 		useMessage().error(err.msg)
 	}
 }
+
+// 部门树使用的数据
+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
+	getDataList()
+}
 </script>
diff --git a/src/views/wallet/wallet-xf/index.vue b/src/views/wallet/wallet-xf/index.vue
index 0d9b724..22461df 100644
--- a/src/views/wallet/wallet-xf/index.vue
+++ b/src/views/wallet/wallet-xf/index.vue
@@ -1,101 +1,122 @@
 <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="6">
-						<el-form-item class="w100" label="消费时间" prop="payTimeList">
-							<el-date-picker v-model="state.queryForm.payTimeList" 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-row>
-				<div class="mb8" style="width: 100%">
-					<right-toolbar
-						:search="false"
-						v-model:showSearch="showSearch"
-						:export="'wallet_walletTransaction_export'"
-						@exportExcel="exportExcel"
-						class="ml10 mr20"
-						style="float: right"
-						@queryTable="getDataList"
-					></right-toolbar>
-				</div>
-			</el-row>
-			<el-table
-				:data="state.dataList"
-				v-loading="state.loading"
-				border
-				:summary-method="getSummaries"
-				show-summary
-				:cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle"
-				@selection-change="selectionChangHandle"
-				@sort-change="sortChangeHandle"
+			<DraggableDepTree
+				ref="draggableDepTreeRef"
+				placeholder="请输入部门名称"
+				:query="deptData.queryList"
+				:show-expand="true"
+				@node-click="handleNodeClick"
+				@treeNodeCheckChange="treeNodeCheckChange"
+				@treeDeepSearch="treeDeepSearch"
+				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="用户" show-overflow-tooltip />
-				<el-table-column prop="userAvatar" label="头像" show-overflow-tooltip>
-					<template #default="{ row }">
-						<preview-image :src="row.userAvatar" />
-					</template>
-				</el-table-column>
-				<el-table-column prop="userMobile" width="120" label="手机号" show-overflow-tooltip />
-				<el-table-column prop="walletTypeUniqueCode" width="200" label="饭卡类型">
-					<template #default="{ row }">
-						<div class="flex items-center justify-center">
-							<div class="color-primary">{{ row.walletTypeName }}</div>
-							<div class="flex items-center just ml5">
-								<dict-tag :options="wallet_type" :value="row.walletTypeUniqueCode" />
-							</div>
+				<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="6">
+								<el-form-item class="w100" label="消费时间" prop="payTimeList">
+									<el-date-picker v-model="state.queryForm.payTimeList" 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-row>
+						<div class="mb8" style="width: 100%">
+							<right-toolbar
+								:search="false"
+								v-model:showSearch="showSearch"
+								:export="'wallet_walletTransaction_export'"
+								@exportExcel="exportExcel"
+								class="ml10 mr20"
+								style="float: right"
+								@queryTable="getDataList"
+							></right-toolbar>
 						</div>
-					</template>
-				</el-table-column>
-				<el-table-column prop="wallet_biz" width="200" label="交易类型">
-					<template #default="{ row }">
-						<dict-tag :options="wallet_biz" :value="row.bizType" />
-					</template>
-				</el-table-column>
-				<el-table-column prop="price" align="center" width="200" label="消费金额">
-					<template #default="{ row }">
-						<div class="color-danger">{{ displayPrice(row.price) }}</div>
-					</template>
-				</el-table-column>
-				<el-table-column prop="createTime" width="200" 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="'wallet_walletRecharge_edit'"
-							@click="formDialogRef.openDialog(row.id)"
-							>编辑</el-button
-						>
-						<el-button v-if="false" icon="delete" text type="primary" v-auth="'wallet_walletRecharge_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-row>
+					<el-table
+						:data="state.dataList"
+						v-loading="state.loading"
+						border
+						:summary-method="getSummaries"
+						show-summary
+						: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="用户" show-overflow-tooltip />
+						<el-table-column prop="userAvatar" label="头像" show-overflow-tooltip>
+							<template #default="{ row }">
+								<preview-image :src="row.userAvatar" />
+							</template>
+						</el-table-column>
+						<el-table-column prop="userMobile" width="120" label="手机号" show-overflow-tooltip />
+						<el-table-column prop="walletTypeUniqueCode" width="200" label="饭卡类型">
+							<template #default="{ row }">
+								<div class="flex items-center justify-center">
+									<div class="color-primary">{{ row.walletTypeName }}</div>
+									<div class="flex items-center just ml5">
+										<dict-tag :options="wallet_type" :value="row.walletTypeUniqueCode" />
+									</div>
+								</div>
+							</template>
+						</el-table-column>
+						<el-table-column prop="wallet_biz" width="200" label="交易类型">
+							<template #default="{ row }">
+								<dict-tag :options="wallet_biz" :value="row.bizType" />
+							</template>
+						</el-table-column>
+						<el-table-column prop="price" align="center" width="200" label="消费金额">
+							<template #default="{ row }">
+								<div class="color-danger">{{ displayPrice(row.price) }}</div>
+							</template>
+						</el-table-column>
+						<el-table-column prop="createTime" width="200" 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="'wallet_walletRecharge_edit'"
+									@click="formDialogRef.openDialog(row.id)"
+									>编辑</el-button
+								>
+								<el-button
+									v-if="false"
+									icon="delete"
+									text
+									type="primary"
+									v-auth="'wallet_walletRecharge_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>
 
 		<!-- 编辑、新增  -->
@@ -109,6 +130,7 @@ import { pageXf } from "/@/api/wallet/wallet-transaction"
 import { useMessage, useMessageBox } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
 import { displayPrice } from "/@/utils/formatMoney"
+import { deptTree } from "/@/api/admin/dept"
 
 const { push } = useRouter()
 
@@ -124,6 +146,7 @@ const showSearch = ref(true)
 // 多选变量
 const selectObjs = ref([]) as any
 const multiple = ref(true)
+const draggableDepTreeRef = ref() // 树组件ref引用
 
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {},
@@ -139,6 +162,8 @@ const resetQuery = () => {
 	queryRef.value?.resetFields()
 	// 清空多选
 	selectObjs.value = []
+	state.queryForm.deptId = ""
+	draggableDepTreeRef.value.resetData()
 	getDataList()
 }
 
@@ -193,4 +218,31 @@ const handleDelete = async (ids: string[]) => {
 		useMessage().error(err.msg)
 	}
 }
+
+// 部门树使用的数据
+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
+	getDataList()
+}
 </script>