feat:搜索条件

2026-09-09 09:57:48 +08:00
1 parent 5071dcbade
commit f4dff79f5a
@@ -0,0 +1,592 @@
+<template>
+	<Splitpanes class="draggable-dep-mch-tree" @resize="state.treeWidth = $event[0].size">
+		<pane :size="state.treeWidth" class="draggable-dep-mch-tree__tree-pane">
+			<!-- 树 -->
+			<div v-loading="activeState.loading" class="dep-mch-tree-panel">
+				<!-- tab区域：用户部门/商户部门，标签右上角显示当前勾选数量 -->
+				<div class="dep-mch-tree-panel__tabs">
+					<el-tabs v-model="state.activeTab" @tab-change="handleTabChange">
+						<el-tab-pane name="DEPT">
+							<template #label>
+								<span class="dep-mch-tree-panel__tab-label">
+									{{ deptTabLabel }}
+									<el-badge :value="state.dept.checkedTreeNodes.length"
+										:hidden="state.dept.checkedTreeNodes.length === 0" />
+								</span>
+							</template>
+						</el-tab-pane>
+						<el-tab-pane name="MCH_DEPT">
+							<template #label>
+								<span class="dep-mch-tree-panel__tab-label">
+									{{ mchTabLabel }}
+									<el-badge :value="state.mchDept.checkedTreeNodes.length"
+										:hidden="state.mchDept.checkedTreeNodes.length === 0" />
+								</span>
+							</template>
+						</el-tab-pane>
+					</el-tabs>
+				</div>
+
+				<!-- 头部区域 -->
+				<div class="dep-mch-tree-panel__header">
+					<el-input v-model="activeState.searchName" class="dep-mch-tree-panel__search" suffix-icon="search"
+						:placeholder="activePlaceholder" :aria-label="activePlaceholder || '搜索树节点'" size="small"
+						clearable @change="handleSearchInputChange" />
+					<div v-if="showExpand" class="dep-mch-tree-panel__operations">
+						<el-dropdown :hide-on-click="false">
+							<button type="button" class="dep-mch-tree-panel__more" title="树操作" aria-label="树操作">
+								<el-icon>
+									<MoreFilled />
+								</el-icon>
+							</button>
+							<template #dropdown>
+								<el-dropdown-menu>
+									<el-dropdown-item>
+										<el-button class="!h-5 !text-gray-500 dark:!text-white dark:hover:!text-primary"
+											link :icon="activeState.isExpand ? 'expand' : 'fold'"
+											@click="toggleRowExpansionAll(activeState.isExpand ? false : true)">
+											{{ activeState.isExpand ? "折叠" : "展开" }}
+										</el-button>
+									</el-dropdown-item>
+								</el-dropdown-menu>
+							</template>
+						</el-dropdown>
+					</div>
+				</div>
+
+				<!-- 树形结构：用户部门树 -->
+				<div v-show="state.activeTab === 'DEPT'" class="dep-mch-tree-panel__body">
+					<el-tree ref="deptTreeRef" class="dep-mch-tree-panel__tree" :props="props.props"
+						:data="state.dept.treeDataList" :expand-on-click-node="false" node-key="id"
+						:highlight-current="nodeClickable ? true : false" default-expand-all show-checkbox
+						@node-click="(data: any) => handleNodeClick(data, 'DEPT')"
+						@check="(data: any, checkStatus: any) => handleCheck(data, checkStatus, 'DEPT')">
+						<template #default="{ node, data }">
+							<el-tooltip v-if="data.isLock" effect="dark" :content="$t('sysuser.noDataScopeTip')"
+								placement="right">
+								<span class="dep-mch-tree-panel__locked-node">
+									{{ node.label }}
+									<SvgIcon name="ele-Lock" />
+								</span>
+							</el-tooltip>
+						</template>
+					</el-tree>
+				</div>
+
+				<!-- 树形结构：商户部门树 -->
+				<div v-show="state.activeTab === 'MCH_DEPT'" class="dep-mch-tree-panel__body">
+					<el-tree ref="mchDeptTreeRef" class="dep-mch-tree-panel__tree" :props="props.props"
+						:data="state.mchDept.treeDataList" :expand-on-click-node="false" node-key="id"
+						:highlight-current="nodeClickable ? true : false" default-expand-all show-checkbox
+						@node-click="(data: any) => handleNodeClick(data, 'MCH_DEPT')"
+						@check="(data: any, checkStatus: any) => handleCheck(data, checkStatus, 'MCH_DEPT')">
+						<template #default="{ node, data }">
+							<el-tooltip v-if="data.isLock" effect="dark" :content="$t('sysuser.noDataScopeTip')"
+								placement="right">
+								<span class="dep-mch-tree-panel__locked-node">
+									{{ node.label }}
+									<SvgIcon name="ele-Lock" />
+								</span>
+							</el-tooltip>
+						</template>
+					</el-tree>
+				</div>
+
+				<!-- 底部区域：当前tab的包含/不包含开关（包含=绿色，不包含=红色） -->
+				<div class="dep-mch-tree-panel__footer">
+					<el-switch v-model="activeState.switch" size="small" :inactive-text="switchInactiveText"
+						:active-text="switchActiveText" :inactive-color="switchInactiveColor"
+						:active-color="switchActiveColor" @change="handleSwitchChange"
+						:disabled="nodeClickable && activeState.checkedTreeNodes.length > 0" />
+				</div>
+			</div>
+		</pane>
+
+		<pane :size="100 - state.treeWidth" class="draggable-dep-mch-tree__content-pane">
+			<!-- 折叠按钮 -->
+			<button type="button" class="draggable-dep-mch-tree__fold"
+				:title="treeVisible ? `收起${activeTreeName}` : `展开${activeTreeName}`"
+				:aria-label="treeVisible ? `收起${activeTreeName}` : `展开${activeTreeName}`" @click="handleClickTreeFold()">
+				<el-icon>
+					<ArrowLeftBold v-if="treeVisible" />
+					<ArrowRightBold v-else />
+				</el-icon>
+			</button>
+
+			<div class="draggable-dep-mch-tree__content">
+				<slot name="default" />
+			</div>
+		</pane>
+	</Splitpanes>
+</template>
+
+<script setup lang="ts" name="DraggableDepMchTree">
+import { computed } from "vue"
+import { useMessage } from "/@/hooks/message"
+import { deptTree } from "/@/api/admin/dept"
+
+const props = withDefaults(
+	defineProps<{
+		placeholder?: string // 用户部门输入框占位符
+		mchPlaceholder?: string // 商户部门输入框占位符
+		deptTabLabel?: string // 用户部门tab文案
+		mchTabLabel?: string // 商户部门tab文案
+		showExpand?: boolean // 折叠控制
+		query?: (searchName?: string) => Promise<any> // 部门树查询函数（两个tab共用）
+		props?: object
+		nodeClickable?: boolean
+		switchInactiveText?: string | undefined
+		switchActiveText?: string | undefined
+		switchInactiveColor?: string // 包含状态开关颜色
+		switchActiveColor?: string // 不包含状态开关颜色
+		defaultTreeWidth?: number | string
+		defaultTab?: string // 默认tab：DEPT | MCH_DEPT
+	}>(),
+	{
+		placeholder: "",
+		mchPlaceholder: "",
+		deptTabLabel: "用户部门",
+		mchTabLabel: "商户部门",
+		showExpand: true,
+		query: (name?: string) => deptTree({ deptName: name || "" }),
+		props: () => {
+			return {
+				label: "name",
+				children: "children",
+				value: "id",
+				disabled: "isLock",
+			}
+		},
+		nodeClickable: true,
+		switchInactiveText: "包含",
+		switchActiveText: "不包含",
+		switchInactiveColor: "var(--el-color-success)",
+		switchActiveColor: "var(--el-color-danger)",
+		defaultTreeWidth: 20,
+		defaultTab: "DEPT",
+	},
+)
+const emit = defineEmits(["getSelectNode"])
+
+const deptTreeRef = ref() // 用户部门树组件ref
+const mchDeptTreeRef = ref() // 商户部门树组件ref
+
+const createTabState = () => ({
+	searchName: "", // 查询关键字
+	isExpand: true, // 是否展开树所有节点
+	treeDataList: [] as any[],
+	curClickedNode: {} as any,
+	checkedTreeNodes: [] as any[], // 被勾选的树节点
+	loading: false,
+	switch: false, // switch开关（false=包含 true=不包含）
+	inited: false, // 是否已加载过树数据
+})
+
+const state = reactive({
+	activeTab: props.defaultTab, // 当前tab：DEPT | MCH_DEPT
+	treeWidth: Number(props.defaultTreeWidth), // 树组件宽度
+	treeWidthMemo: Number(props.defaultTreeWidth), // 树组件宽度记录
+	dept: createTabState(), // 用户部门tab状态
+	mchDept: createTabState(), // 商户部门tab状态
+})
+
+// 当前tab状态
+const activeState = computed(() => (state.activeTab === "MCH_DEPT" ? state.mchDept : state.dept))
+// 当前tab的树ref
+const activeTreeRef = computed(() => (state.activeTab === "MCH_DEPT" ? mchDeptTreeRef : deptTreeRef))
+// 当前tab输入框占位符
+const activePlaceholder = computed(() =>
+	state.activeTab === "MCH_DEPT" ? props.mchPlaceholder || "请输入商户部门名称" : props.placeholder || "请输入用户部门名称",
+)
+// 当前tab树名称
+const activeTreeName = computed(() => (state.activeTab === "MCH_DEPT" ? "商户部门树" : "用户部门树"))
+
+// 是否折叠树组件
+const treeVisible = computed(() => state.treeWidth > 0)
+
+// 获取指定tab的部门树数据（两个tab共用同一棵部门树查询）
+const getTabTreeData = (tab: "DEPT" | "MCH_DEPT") => {
+	const tabState = tab === "MCH_DEPT" ? state.mchDept : state.dept
+	if (props.query instanceof Function) {
+		tabState.loading = true
+		tabState.inited = true
+		const result = props.query(tabState.searchName)
+		// 如果查询结果为 Promise 类型，则进行后续处理
+		if ((typeof result === "object" || typeof result === "function") && typeof result.then === "function") {
+			result
+				.then((r: any) => {
+					tabState.treeDataList = r.data
+				})
+				.catch((err) => {
+					useMessage().error(err.msg)
+				})
+				.finally(() => (tabState.loading = false))
+		}
+	}
+}
+
+// 获取当前tab树数据
+const getTreeData = () => getTabTreeData(state.activeTab as "DEPT" | "MCH_DEPT")
+
+// tab切换
+const handleTabChange = (tab: any) => {
+	state.activeTab = tab
+	// 懒加载：首次切换到该tab时才请求树数据
+	if (!activeState.value.inited) getTreeData()
+}
+
+// 点击折叠树组件
+const handleClickTreeFold = () => {
+	if (treeVisible.value) {
+		state.treeWidthMemo = state.treeWidth
+		state.treeWidth = 0
+	} else {
+		state.treeWidth = state.treeWidthMemo
+	}
+}
+
+// 输入框改变
+const handleSearchInputChange = () => {
+	activeTreeRef.value!.setCheckedKeys([], false)
+	activeState.value.checkedTreeNodes = []
+	activeState.value.curClickedNode = {}
+	getTreeData()
+}
+
+// 点击树形结构节点
+const handleNodeClick = (nodeData: any, tab: "DEPT" | "MCH_DEPT") => {
+	if (!props.nodeClickable) return
+	const tabState = tab === "MCH_DEPT" ? state.mchDept : state.dept
+	tabState.curClickedNode = nodeData
+	emit("getSelectNode", tabState.curClickedNode, tabState.checkedTreeNodes, tabState.switch, tab)
+}
+
+// 勾选树节点时
+const handleCheck = (_data: any, checkStatus: any, tab: "DEPT" | "MCH_DEPT") => {
+	const tabState = tab === "MCH_DEPT" ? state.mchDept : state.dept
+	const { checkedNodes } = checkStatus
+	tabState.checkedTreeNodes = checkedNodes
+	if (props.nodeClickable && tabState.checkedTreeNodes.length > 0) {
+		tabState.switch = false
+	}
+	emit("getSelectNode", tabState.curClickedNode, tabState.checkedTreeNodes, tabState.switch, tab)
+}
+
+// switch改变时
+const handleSwitchChange = () =>
+	emit("getSelectNode", activeState.value.curClickedNode, activeState.value.checkedTreeNodes, activeState.value.switch, state.activeTab)
+
+// 切换所有节点的展开/收起状态。status：true 为展开，false 为收起
+const toggleRowExpansionAll = (status: boolean) => {
+	activeState.value.isExpand = status
+	const nodes = activeTreeRef.value!.store._getAllNodes()
+	for (let i = 0; i < nodes.length; i++) {
+		nodes[i].expanded = status
+	}
+}
+
+// 重置数据（重置用户部门+商户部门两个tab）
+const resetData = () => {
+	state.dept = createTabState()
+	state.mchDept = createTabState()
+	// 保持当前tab，重新加载当前tab数据
+	getTreeData()
+}
+onMounted(() => {
+	getTreeData()
+})
+
+defineExpose({
+	getTreeData,
+	resetData,
+})
+</script>
+
+<style lang="scss">
+.draggable-dep-mch-tree {
+	min-width: 0;
+	background: var(--el-bg-color);
+}
+
+.draggable-dep-mch-tree__tree-pane,
+.draggable-dep-mch-tree__content-pane {
+	min-width: 0;
+}
+
+.dep-mch-tree-panel {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-width: 0;
+	margin-right: 8px;
+	padding: 8px 6px 6px 8px;
+	background: var(--el-bg-color);
+}
+
+.dep-mch-tree-panel__tabs {
+	flex: 0 0 auto;
+	padding-bottom: 2px;
+	border-bottom: 1px solid var(--el-border-color-extra-light);
+}
+
+.dep-mch-tree-panel__tabs .el-tabs {
+	--el-tabs-header-height: 28px;
+}
+
+.dep-mch-tree-panel__tabs .el-tabs__header {
+	margin: 0;
+}
+
+.dep-mch-tree-panel__tabs .el-tabs__nav-wrap::after {
+	display: none;
+}
+
+.dep-mch-tree-panel__tabs .el-tabs__item {
+	height: 28px;
+	padding: 0 12px;
+	font-size: var(--el-font-size-small);
+}
+
+.dep-mch-tree-panel__tab-label {
+	display: inline-flex;
+	align-items: center;
+	line-height: 1;
+}
+
+.dep-mch-tree-panel__tab-label .el-badge__content {
+	top: -6px;
+	right: -12px;
+}
+
+.dep-mch-tree-panel__header {
+	z-index: 2;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 6px 0;
+	border-bottom: 1px solid var(--el-border-color-extra-light);
+}
+
+.dep-mch-tree-panel__search {
+	flex: 1;
+	min-width: 0;
+}
+
+.dep-mch-tree-panel__operations {
+	display: flex;
+	flex: 0 0 auto;
+	align-items: center;
+}
+
+.dep-mch-tree-panel__more {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	padding: 0;
+	font: inherit;
+	color: var(--el-text-color-secondary);
+	cursor: pointer;
+	background: transparent;
+	border: 0;
+	border-radius: var(--el-border-radius-base);
+	outline: none;
+	transition: color 180ms ease, background-color 180ms ease;
+}
+
+.dep-mch-tree-panel__more .el-icon {
+	transform: rotate(90deg);
+}
+
+.dep-mch-tree-panel__more:hover {
+	color: var(--el-color-primary);
+	background: var(--el-color-primary-light-9);
+}
+
+.dep-mch-tree-panel__more:focus-visible {
+	color: var(--el-color-primary);
+	outline: 2px solid var(--el-color-primary-light-5);
+	outline-offset: 1px;
+}
+
+.dep-mch-tree-panel__body {
+	flex: 1;
+	min-height: 0;
+	padding: 4px 2px 4px 0;
+	overflow: auto;
+}
+
+.dep-mch-tree-panel__tree {
+	--el-tree-node-content-height: 26px;
+	width: 100%;
+	min-width: 0;
+	font-size: var(--el-font-size-extra-small);
+	background: transparent;
+}
+
+.dep-mch-tree-panel__tree .el-tree-node {
+	min-width: 0;
+}
+
+.dep-mch-tree-panel__tree .el-tree-node__content {
+	min-width: 0;
+	padding-right: 4px;
+	overflow: hidden;
+	border-radius: var(--el-border-radius-small);
+	transition: color 180ms ease, background-color 180ms ease;
+}
+
+.dep-mch-tree-panel__tree .el-tree-node__content>.el-tree-node__expand-icon {
+	padding: 3px;
+	font-size: 11px;
+}
+
+.dep-mch-tree-panel__tree .el-tree-node__content>label.el-checkbox {
+	--el-checkbox-input-height: 12px;
+	--el-checkbox-input-width: 12px;
+	margin-right: 3px;
+}
+
+.dep-mch-tree-panel__tree .el-tree-node__label,
+.dep-mch-tree-panel__locked-node {
+	display: inline-flex;
+	flex: 1;
+	align-items: center;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.dep-mch-tree-panel__locked-node .svg-icon {
+	flex: 0 0 auto;
+	margin-left: 4px;
+}
+
+.dep-mch-tree-panel__footer {
+	z-index: 2;
+	display: flex;
+	flex: 0 0 auto;
+	align-items: center;
+	justify-content: center;
+	min-height: 30px;
+	padding-top: 5px;
+	overflow: hidden;
+	background: var(--el-bg-color);
+	border-top: 1px solid var(--el-border-color-extra-light);
+}
+
+.dep-mch-tree-panel__footer .el-switch {
+	font-size: var(--el-font-size-extra-small);
+}
+
+.draggable-dep-mch-tree__content-pane {
+	position: relative;
+	/* 分隔线与折叠按钮使用同一定位容器，避免跨 pane 定位后被裁剪或覆盖。 */
+}
+
+.draggable-dep-mch-tree__content-pane::before {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 1;
+	width: 1px;
+	content: "";
+	background: var(--el-border-color-lighter);
+	transition: background-color 180ms ease, width 180ms ease;
+}
+
+.draggable-dep-mch-tree__content {
+	width: 100%;
+	height: 100%;
+	padding: 8px 8px 8px 16px;
+	overflow: auto;
+}
+
+.draggable-dep-mch-tree__fold {
+	position: absolute;
+	top: 50%;
+	left: 0;
+	z-index: 3;
+	display: inline-flex;
+	align-items: center;
+	justify-content: flex-start;
+	width: 20px;
+	height: 56px;
+	padding: 0;
+	font: inherit;
+	font-size: 12px;
+	color: var(--el-text-color-secondary);
+	cursor: pointer;
+	background: transparent;
+	border: 0;
+	border-radius: 0;
+	outline: none;
+	transform: translateY(-50%);
+	transition: color 180ms ease;
+}
+
+.draggable-dep-mch-tree__fold::before {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: 12px;
+	content: "";
+	background: var(--el-fill-color-dark);
+	border-radius: 0 var(--el-border-radius-round) var(--el-border-radius-round) 0;
+	transition: background-color 180ms ease;
+}
+
+.draggable-dep-mch-tree__fold .el-icon {
+	position: relative;
+	z-index: 1;
+	width: 12px;
+	color: inherit;
+}
+
+.draggable-dep-mch-tree__fold:hover {
+	color: var(--el-color-primary);
+}
+
+.draggable-dep-mch-tree__fold:hover::before,
+.draggable-dep-mch-tree__fold:focus-visible::before {
+	background: var(--el-color-primary-light-8);
+}
+
+.draggable-dep-mch-tree__fold:focus-visible {
+	color: var(--el-color-primary);
+	outline: 2px solid var(--el-color-primary-light-5);
+	outline-offset: 1px;
+}
+
+.draggable-dep-mch-tree.splitpanes--vertical>.splitpanes__splitter {
+	position: relative;
+	flex: 0 0 6px;
+	width: 6px;
+	background: transparent;
+}
+
+.draggable-dep-mch-tree.splitpanes--vertical>.splitpanes__splitter:hover+.draggable-dep-mch-tree__content-pane::before,
+.draggable-dep-mch-tree.splitpanes--vertical>.splitpanes__splitter:active+.draggable-dep-mch-tree__content-pane::before {
+	width: 2px;
+	background: var(--el-color-primary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+	.dep-mch-tree-panel__more,
+	.dep-mch-tree-panel__tree .el-tree-node__content,
+	.draggable-dep-mch-tree__fold,
+	.draggable-dep-mch-tree__fold::before,
+	.draggable-dep-mch-tree__content-pane::before {
+		transition: none;
+	}
+
+	.draggable-dep-mch-tree.splitpanes--vertical>.splitpanes__pane {
+		transition: none;
+	}
+}
+</style>
@@ -18,6 +18,7 @@ import PreviewJson from "/@/components/PreviewJson/index.vue"
 import PreviewText from "/@/components/PreviewText/index.vue"
 import PreviewXml from "/@/components/PreviewXml/index.vue"
 import DraggableDepTree from "/@/components/DraggableDepTree/index.vue"
+import DraggableDepMchTree from "/@/components/DraggableDepMchTree/index.vue"
 import SearchPanel from "/@/components/SearchPanel/index.vue"
 import UserInfoCell from "/@/components/UserInfoCell/index.vue"
 import UserIdentityInfo from "/@/components/UserIdentityInfo/index.vue"
@@ -88,6 +89,7 @@ export default {
 		app.component("PreviewText", PreviewText)
 		app.component("PreviewXml", PreviewXml)
 		app.component("DraggableDepTree", DraggableDepTree)
+		app.component("DraggableDepMchTree", DraggableDepMchTree)
 		app.component("SearchPanel", SearchPanel)
 		app.component("UserInfoCell", UserInfoCell)
 		app.component("UserIdentityInfo", UserIdentityInfo)
@@ -18,12 +18,16 @@
 					<el-form-item style="width: 250px" label="车牌号" prop="carNumber">
 						<el-input v-model="state.queryForm.carNumber" placeholder="请输入车牌号" />
 					</el-form-item>
-					<el-form-item style="width: 250px" label="车辆类型" prop="carType">
-						<dict-select v-model="state.queryForm.carType" dict-code="car_type" />
-					</el-form-item>
+
 					<el-form-item style="width: 250px" label="是否启用" prop="enableStatus">
 						<dict-select v-model="state.queryForm.enableStatus" dict-code="yes_no_type" />
 					</el-form-item>
+
+					<template #more>
+						<el-form-item style="width: 250px" label="车辆类型" prop="carType">
+							<dict-select v-model="state.queryForm.carType" dict-code="car_type" />
+						</el-form-item>
+					</template>
 				</SearchPanel>
 			</el-row>
 			<el-row>
@@ -18,18 +18,22 @@
 					<el-form-item style="width: 250px" label="调动类型" prop="bizType">
 						<dict-select v-model="state.queryForm.bizType" dict-code="user_transaction" />
 					</el-form-item>
-					<el-form-item style="width: 300px" label="自动转账到消费钱包" prop="isWalletTransaction">
-						<dict-select v-model="state.queryForm.isWalletTransaction" dict-code="yes_no_type" />
-					</el-form-item>
+
 					<el-form-item style="width: 450px" label="申请时间" prop="createTimeList">
 						<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
 					</el-form-item>
-					<el-form-item style="width: 450px" label="审核时间" prop="processTimeList">
-						<el-date-picker v-model="state.queryForm.processTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
-					</el-form-item>
-					<el-form-item style="width: 450px" label="自动转账时间" prop="walletTransactionTimeList">
-						<el-date-picker v-model="state.queryForm.walletTransactionTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
-					</el-form-item>
+
+					<template #more>
+						<el-form-item style="width: 300px" label="自动转账到消费钱包" prop="isWalletTransaction">
+							<dict-select v-model="state.queryForm.isWalletTransaction" dict-code="yes_no_type" />
+						</el-form-item>
+						<el-form-item style="width: 450px" label="审核时间" prop="processTimeList">
+							<el-date-picker v-model="state.queryForm.processTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
+						</el-form-item>
+						<el-form-item style="width: 450px" label="自动转账时间" prop="walletTransactionTimeList">
+							<el-date-picker v-model="state.queryForm.walletTransactionTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
+						</el-form-item>
+					</template>
 				</SearchPanel>
 			</el-row>
 			<el-row>
@@ -32,15 +32,18 @@
 							<el-form-item label="手机号" prop="phone">
 								<el-input v-model="state.queryForm.phone" placeholder="请输入手机号" clearable />
 							</el-form-item>
-							<el-form-item style="width: 250px" label="部门" prop="deptId">
-								<select-dept v-model="state.queryForm.deptId" clearable />
-							</el-form-item>
-							<el-form-item style="width: 250px" label="角色" prop="role">
-								<select-role v-model="state.queryForm.role" clearable />
-							</el-form-item>
-							<el-form-item style="width: 250px" label="编制情况" prop="staffingType">
-								<dict-select v-model="state.queryForm.staffingType" dict-code="user_staffing_type" />
-							</el-form-item>
+
+							<template #more>
+								<el-form-item style="width: 250px" label="部门" prop="deptId">
+									<select-dept v-model="state.queryForm.deptId" clearable />
+								</el-form-item>
+								<el-form-item style="width: 250px" label="角色" prop="role">
+									<select-role v-model="state.queryForm.role" clearable />
+								</el-form-item>
+								<el-form-item style="width: 250px" label="编制情况" prop="staffingType">
+									<dict-select v-model="state.queryForm.staffingType" dict-code="user_staffing_type" />
+								</el-form-item>
+							</template>
 						</SearchPanel>
 					</el-row>
 					<el-row>
@@ -1,7 +1,8 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<DraggableDepTree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
+			<DraggableDepMchTree ref="draggableDepMchTreeRef" placeholder="请输入用户部门名称"
+				mch-placeholder="请输入商户部门名称" :show-expand="true"
 				@getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
 				:defaultTreeWidth="20" :nodeClickable="false" :props="{
 					label: 'name',
@@ -58,7 +59,7 @@
 					<hard-sh-by-day v-if="activeTab === 'MCH'" ref="hardShByDayRef" />
 					<hard-sh-by-month v-if="activeTab === 'MONTH'" ref="hardShByMonthRef" />
 				</template>
-			</DraggableDepTree>
+			</DraggableDepMchTree>
 		</div>
 	</div>
 </template>
@@ -81,7 +82,7 @@ const hardShByMonthRef = ref()
 const queryRef = ref()
 const showSearch = ref(true)

-const draggableDepTreeRef = ref()
+const draggableDepMchTreeRef = ref()

 // tab变量
 const tabPane = ref([
@@ -179,15 +180,23 @@ const resetQuery = () => {
 	state.queryForm = { ...defaultQueryForm }
 	state.queryForm.deptId = ""
 	state.queryForm.userDeptIds = []
-	draggableDepTreeRef.value.resetData()
+	state.queryForm.merchantDeptIds = []
+	draggableDepMchTreeRef.value.resetData()
 	cancel()
 }

 // 树节点选择时
-const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
-	state.queryForm.deptId = curClickedNode.id
-	state.queryForm.userDeptIds = checkedTreeNodes.map((item: any) => item.id)
-	state.queryForm.isInclude = !isDeepTree
+const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any, tab?: string) => {
+	if (tab === "MCH_DEPT") {
+		// 商户部门tab：勾选的商户部门ids + 商户部门包含/不包含
+		state.queryForm.merchantDeptIds = checkedTreeNodes.map((item: any) => item.id)
+		state.queryForm.isIncludeMerchantDept = !isDeepTree
+	} else {
+		// 用户部门tab：点击的部门 + 勾选的部门ids + 用户部门包含/不包含
+		state.queryForm.deptId = curClickedNode.id
+		state.queryForm.userDeptIds = checkedTreeNodes.map((item: any) => item.id)
+		state.queryForm.isInclude = !isDeepTree
+	}
 	search()
 }
 </script>
@@ -14,21 +14,25 @@
 				<el-form-item style="width: 250px" label="订单号" prop="payNo">
 					<el-input v-model="state.queryForm.payNo" />
 				</el-form-item>
-				<el-form-item style="width: 250px" label="支付平台" prop="payPlatformType">
-					<dict-select v-model="state.queryForm.payPlatformType" dict-code="mini_platform_type" />
-				</el-form-item>
-				<el-form-item style="width: 250px" label="业务类型" prop="bizType">
-					<dict-select v-model="state.queryForm.bizType" dict-code="third_pay_order_biz_type" />
-				</el-form-item>
+
 				<el-form-item style="width: 250px" label="用户" prop="userId">
 					<select-user v-model="state.queryForm.userId" />
 				</el-form-item>
 				<el-form-item style="width: 450px" 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-form-item style="width: 450px" label="退款时间" prop="refundTimeList">
-					<el-date-picker v-model="state.queryForm.refundTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
-				</el-form-item>
+
+				<template #more>
+					<el-form-item style="width: 250px" label="支付平台" prop="payPlatformType">
+						<dict-select v-model="state.queryForm.payPlatformType" dict-code="mini_platform_type" />
+					</el-form-item>
+					<el-form-item style="width: 250px" label="业务类型" prop="bizType">
+						<dict-select v-model="state.queryForm.bizType" dict-code="third_pay_order_biz_type" />
+					</el-form-item>
+					<el-form-item style="width: 450px" label="退款时间" prop="refundTimeList">
+						<el-date-picker v-model="state.queryForm.refundTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
+					</el-form-item>
+				</template>
 			</SearchPanel>
 			<el-row>
 				<div class="mb8" style="width: 100%">
@@ -20,12 +20,15 @@
 				<el-form-item style="width: 250px" label="卡号" prop="cardNumber">
 					<el-input v-model="state.queryForm.cardNumber" placeholder="饭卡卡号" clearable />
 				</el-form-item>
-				<el-form-item style="width: 250px" label="是否绑定用户" prop="isBindUser">
-					<dict-select v-model="state.queryForm.isBindUser" dict-code="yes_no_type" />
-				</el-form-item>
-				<el-form-item style="width: 250px" label="是否硬件激活" prop="isMchActive">
-					<dict-select v-model="state.queryForm.isMchActive" dict-code="yes_no_type" />
-				</el-form-item>
+
+				<template #more>
+					<el-form-item style="width: 250px" label="是否绑定用户" prop="isBindUser">
+						<dict-select v-model="state.queryForm.isBindUser" dict-code="yes_no_type" />
+					</el-form-item>
+					<el-form-item style="width: 250px" label="是否硬件激活" prop="isMchActive">
+						<dict-select v-model="state.queryForm.isMchActive" dict-code="yes_no_type" />
+					</el-form-item>
+				</template>
 			</SearchPanel>

 			<el-row>
@@ -39,18 +39,22 @@
 					<el-form-item style="width: 200px" label="充值方式" prop="bizType">
 						<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz" />
 					</el-form-item>
-					<el-form-item v-if="false" style="width: 200px" label="充值类型" prop="type">
-						<dict-select v-model="state.queryForm.type" dict-code="wallet_biz_recharge" />
-					</el-form-item>
+
 					<el-form-item style="width: 250px" label="钱包类型" prop="walletTypeIdList">
 						<select-wallet-type multiple v-model="state.queryForm.walletTypeIdList" placeholder="饭卡类型" clearable />
 					</el-form-item>
 					<el-form-item style="width: 300px" label="充值时间" prop="createTimeList">
 						<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD" type="daterange" />
 					</el-form-item>
-					<el-form-item style="width: 260px" label="操作标签" prop="tagList">
-						<dict-select v-model="state.queryForm.tagList" dict-code="wallet_transaction_tag" multiple />
-					</el-form-item>
+
+					<template #more>
+						<el-form-item v-if="false" style="width: 200px" label="充值类型" prop="type">
+							<dict-select v-model="state.queryForm.type" dict-code="wallet_biz_recharge" />
+						</el-form-item>
+						<el-form-item style="width: 260px" label="操作标签" prop="tagList">
+							<dict-select v-model="state.queryForm.tagList" dict-code="wallet_transaction_tag" multiple />
+						</el-form-item>
+					</template>
 				</SearchPanel>
 				<el-row>
 					<div class="mb8" style="width: 100%">
@@ -28,18 +28,22 @@
 						<el-form-item style="width: 200px" label="充值方式" prop="bizType">
 							<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz" />
 						</el-form-item>
-						<el-form-item v-if="false" style="width: 200px" label="充值类型" prop="type">
-							<dict-select v-model="state.queryForm.type" dict-code="wallet_biz_recharge" />
-						</el-form-item>
+
 						<el-form-item style="width: 250px" label="钱包类型" prop="walletTypeIdList">
 							<select-wallet-type multiple v-model="state.queryForm.walletTypeIdList" placeholder="饭卡类型" clearable />
 						</el-form-item>
 						<el-form-item style="width: 300px" label="充值时间" prop="createTimeList">
 							<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD" type="daterange" />
 						</el-form-item>
-						<el-form-item style="width: 260px" label="操作标签" prop="tagList">
-							<dict-select v-model="state.queryForm.tagList" dict-code="wallet_transaction_tag" multiple />
-						</el-form-item>
+
+						<template #more>
+							<el-form-item v-if="false" style="width: 200px" label="充值类型" prop="type">
+								<dict-select v-model="state.queryForm.type" dict-code="wallet_biz_recharge" />
+							</el-form-item>
+							<el-form-item style="width: 260px" label="操作标签" prop="tagList">
+								<dict-select v-model="state.queryForm.tagList" dict-code="wallet_transaction_tag" multiple />
+							</el-form-item>
+						</template>
 					</SearchPanel>
 					<el-row>
 						<div class="mb8" style="width: 100%">
@@ -14,21 +14,26 @@
 				<el-form-item style="width: 300px" label="用户" prop="userIds">
 					<select-user v-model="state.queryForm.userIds" placeholder="用户" />
 				</el-form-item>
-				<el-form-item style="width: 200px" label="饭卡类型" prop="walletTypeId">
-					<select-wallet-type v-model="state.queryForm.walletTypeId" placeholder="饭卡类型" clearable />
-				</el-form-item>
+
 				<el-form-item style="width: 200px" label="充值类型" prop="bizType">
 					<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz_recharge" placeholder="充值类型" />
 				</el-form-item>
-				<el-form-item style="width: 250px" label="发票号" prop="invoiceCode">
-					<el-input v-model="state.queryForm.invoiceCode" placeholder="发票号" />
-				</el-form-item>
+
 				<el-form-item style="width: 450px" label="创建时间" prop="createTimeList">
 					<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
 				</el-form-item>
-				<el-form-item style="width: 450px" label="审核时间" prop="processTimeList">
-					<el-date-picker v-model="state.queryForm.processTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
-				</el-form-item>
+
+				<template #more>
+					<el-form-item style="width: 200px" label="饭卡类型" prop="walletTypeId">
+						<select-wallet-type v-model="state.queryForm.walletTypeId" placeholder="饭卡类型" clearable />
+					</el-form-item>
+					<el-form-item style="width: 250px" label="发票号" prop="invoiceCode">
+						<el-input v-model="state.queryForm.invoiceCode" placeholder="发票号" />
+					</el-form-item>
+					<el-form-item style="width: 450px" label="审核时间" prop="processTimeList">
+						<el-date-picker v-model="state.queryForm.processTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
+					</el-form-item>
+				</template>
 			</SearchPanel>
 			<el-row>
 				<div class="mb8" style="width: 100%">
@@ -23,15 +23,18 @@
 				<el-form-item style="width: 350px" label="发票号" prop="code">
 					<el-input v-model="state.queryForm.code" />
 				</el-form-item>
-				<el-form-item style="width: 350px" label="备注" prop="remark">
-					<el-input v-model="state.queryForm.remark" />
-				</el-form-item>
-				<el-form-item style="width: 450px" label="创建时间" prop="createTimeList">
-					<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
-				</el-form-item>
-				<el-form-item style="width: 450px" label="审核时间" prop="processTimeList">
-					<el-date-picker v-model="state.queryForm.processTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
-				</el-form-item>
+
+				<template #more>
+					<el-form-item style="width: 350px" label="备注" prop="remark">
+						<el-input v-model="state.queryForm.remark" />
+					</el-form-item>
+					<el-form-item style="width: 450px" label="创建时间" prop="createTimeList">
+						<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
+					</el-form-item>
+					<el-form-item style="width: 450px" label="审核时间" prop="processTimeList">
+						<el-date-picker v-model="state.queryForm.processTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
+					</el-form-item>
+				</template>
 			</SearchPanel>
 			<el-row>
 				<div class="mb8" style="width: 100%">
@@ -25,18 +25,23 @@
 						<el-form-item style="width: 300px" label="用户" prop="userId">
 							<select-user v-model="state.queryForm.userId" placeholder="用户" />
 						</el-form-item>
-						<el-form-item style="width: 200px" label="充值类型" prop="bizType">
-							<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz_recharge" />
-						</el-form-item>
+
 						<el-form-item style="width: 200px" label="审核状态" prop="processStatus">
 							<dict-select v-model="state.queryForm.processStatus" dict-code="check_status" />
 						</el-form-item>
-						<el-form-item style="width: 200px" label="钱包类型" prop="walletTypeId">
-							<select-wallet-type v-model="state.queryForm.walletTypeId" placeholder="饭卡类型" clearable />
-						</el-form-item>
+
 						<el-form-item style="width: 450px" label="审核时间" prop="processTimeList">
 							<el-date-picker v-model="state.queryForm.processTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
 						</el-form-item>
+
+						<template #more>
+							<el-form-item style="width: 200px" label="充值类型" prop="bizType">
+								<dict-select v-model="state.queryForm.bizType" dict-code="wallet_biz_recharge" />
+							</el-form-item>
+							<el-form-item style="width: 200px" label="钱包类型" prop="walletTypeId">
+								<select-wallet-type v-model="state.queryForm.walletTypeId" placeholder="饭卡类型" clearable />
+							</el-form-item>
+						</template>
 					</SearchPanel>
 					<el-row>
 						<div class="mb8" style="width: 100%">
@@ -24,19 +24,24 @@
 					<el-form-item style="width: 250px" label="用户" prop="userId">
 						<select-user v-model="state.queryForm.userId" />
 					</el-form-item>
-					<el-form-item style="width: 250px" label="是否退回" prop="isRefund">
-						<dict-select v-model="state.queryForm.isRefund" dict-code="yes_no_type" />
-					</el-form-item>
+
 					<el-form-item style="width: 250px" label="转账类型" prop="bizType">
 						<dict-select v-model="state.queryForm.bizType" dict-code="wallet_rule_transation_type" />
 					</el-form-item>
 					<el-form-item style="width: 350px" label="转账时间" prop="createTimeList">
 						<el-date-picker v-model="state.queryForm.createTimeList" value-format="YYYY-MM-DD" type="daterange" />
 					</el-form-item>
-					<el-form-item style="width: 350px" label="退回时间" prop="refundTimeList">
-						<el-date-picker v-model="state.queryForm.refundTimeList" value-format="YYYY-MM-DD" type="daterange" />
-					</el-form-item>
+
 					<el-row> </el-row>
+
+					<template #more>
+						<el-form-item style="width: 250px" label="是否退回" prop="isRefund">
+							<dict-select v-model="state.queryForm.isRefund" dict-code="yes_no_type" />
+						</el-form-item>
+						<el-form-item style="width: 350px" label="退回时间" prop="refundTimeList">
+							<el-date-picker v-model="state.queryForm.refundTimeList" value-format="YYYY-MM-DD" type="daterange" />
+						</el-form-item>
+					</template>
 				</SearchPanel>
 				<el-row>
 					<div class="mb8" style="width: 100%">