From 4d2b5cb12dbfeeca70aea955018b4eb752f08fc7 Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Thu, 18 Jun 2026 09:30:40 +0800
Subject: [PATCH] 11

---
 src/views/mch/mch-manage/index.vue | 315 +++++++++++++++--------------
 1 file changed, 168 insertions(+), 147 deletions(-)

diff --git a/src/views/mch/mch-manage/index.vue b/src/views/mch/mch-manage/index.vue
index 2834ff2..dbada8a 100644
--- a/src/views/mch/mch-manage/index.vue
+++ b/src/views/mch/mch-manage/index.vue
@@ -1,158 +1,171 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<el-form v-if="showSearch" ref="queryRef" :inline="true" :model="state.queryForm"
-				@keyup.enter="getDataList">
-				<el-row>
-					<el-form-item style="width: 250px" label="商户名" prop="name">
-						<el-input v-model="state.queryForm.name" placeholder="商户名" />
-					</el-form-item>
-					<el-form-item style="width: 250px" label="商户类型" prop="types">
-						<dict-select v-model="state.queryForm.types" dict-code="merchant_type" />
-					</el-form-item>
-					<el-form-item style="width: 250px" label="是否显示在移动端" prop="visibleMobile">
-						<dict-select v-model="state.queryForm.visibleMobile" dict-code="yes_no_type" />
-					</el-form-item>
-					<el-form-item style="width: 250px" label="是否同步正元" prop="isSyncZy">
-						<dict-select v-model="state.queryForm.isSyncZy" dict-code="yes_no_type" />
-					</el-form-item>
-					<el-form-item style="width: 250px" label="是否对外开放" prop="canteenIsOpen">
-						<dict-select v-model="state.queryForm.canteenIsOpen" dict-code="yes_no_type" />
-					</el-form-item>
-					<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_mchManage_add'">
-						新 增
-					</el-button>
-					<el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'wallet_mchManage_del'"
-						@click="handleDelete(selectObjs)">
-						删 除
-					</el-button>
-					<right-toolbar v-model:showSearch="showSearch" :export="'wallet_mchManage_export'"
-						@exportExcel="exportExcel" class="ml10 mr20" style="float: right" @queryTable="getDataList" />
-				</div>
-			</el-row>
-			<el-table :data="state.dataList" v-loading="state.loading" :header-cell-style="tableStyle.headerCellStyle"
-				:row-class-name="tableRowClassName" @selection-change="selectionChangHandle"
-				@sort-change="sortChangeHandle" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-				:default-expand-all="false" :indent="30" row-key="id">
-				<el-table-column type="selection" width="40" align="center" />
-				<el-table-column type="index" label="#" width="50" align="center" />
-				<el-table-column prop="id" label="商户id" align="left" min-width="180" />
-				<el-table-column prop="name" label="商户名" align="left" min-width="160" />
-				<el-table-column prop="logoPic" label="logo" align="center">
-					<template #default="{ row }">
-						<preview-image :src="row.logoPic" />
-					</template>
-				</el-table-column>
-				<el-table-column prop="collectionCode" width="150" align="center" label="商户收款二维码">
-					<template #default="{ row }">
-						<div class="flex flex-col justify-center items-center">
-							<preview-image :src="row.collectionCode" download :downloadName="`${row.name} 收款二维码`" />
+			<DraggableDepTree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
+				@getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
+				:defaultTreeWidth="20" :nodeClickable="false" :props="{
+					label: 'name',
+					children: 'children',
+					value: 'id',
+					disabled: 'isLockNone',
+				}">
+				<template #default>
+					<el-form v-if="showSearch" ref="queryRef" :inline="true" :model="state.queryForm"
+						@keyup.enter="getDataList">
+						<el-row>
+							<el-form-item style="width: 250px" label="商户名" prop="name">
+								<el-input v-model="state.queryForm.name" placeholder="商户名" />
+							</el-form-item>
+							<el-form-item style="width: 250px" label="商户类型" prop="types">
+								<dict-select v-model="state.queryForm.types" dict-code="merchant_type" />
+							</el-form-item>
+							<el-form-item style="width: 250px" label="是否显示在移动端" prop="visibleMobile">
+								<dict-select v-model="state.queryForm.visibleMobile" dict-code="yes_no_type" />
+							</el-form-item>
+							<el-form-item style="width: 250px" label="是否同步正元" prop="isSyncZy">
+								<dict-select v-model="state.queryForm.isSyncZy" dict-code="yes_no_type" />
+							</el-form-item>
+							<el-form-item style="width: 250px" label="是否对外开放" prop="canteenIsOpen">
+								<dict-select v-model="state.queryForm.canteenIsOpen" dict-code="yes_no_type" />
+							</el-form-item>
+							<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_mchManage_add'">
+								新 增
+							</el-button>
+							<el-button plain :disabled="multiple" icon="Delete" type="primary"
+								v-auth="'wallet_mchManage_del'" @click="handleDelete(selectObjs)">
+								删 除
+							</el-button>
+							<right-toolbar v-model:showSearch="showSearch" :export="'wallet_mchManage_export'"
+								@exportExcel="exportExcel" class="ml10 mr20" style="float: right"
+								@queryTable="getDataList" />
 						</div>
-					</template>
-				</el-table-column>
-				<el-table-column prop="collectionUrlCode" width="150" align="center" label="商户url收款码">
-					<template #default="{ row }">
-						<div class="flex flex-col justify-center items-center">
-							<preview-image :src="row.collectionUrlCode" download
-								:downloadName="`${row.name} 商户url收款码`" />
-						</div>
-					</template>
-				</el-table-column>
-				<el-table-column prop="merchantType" label="商户类型" align="center" :min-width="160">
-					<template #default="{ row }">
-						<div class="flex">
-							<div class="flex justify-center items-center">
-								<div v-for="(v, i) in row.types?.split(',')" :key="i" class="mr-1">
-									<dict-tag :options="merchant_type" :value="v" />
+					</el-row>
+					<el-table :data="state.dataList" v-loading="state.loading"
+						:header-cell-style="tableStyle.headerCellStyle" :row-class-name="tableRowClassName"
+						@selection-change="selectionChangHandle" @sort-change="sortChangeHandle"
+						:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :default-expand-all="false"
+						:indent="30" row-key="id">
+						<el-table-column type="selection" width="40" align="center" />
+						<el-table-column type="index" label="#" width="50" align="center" />
+						<el-table-column prop="id" label="商户id" align="left" min-width="180" />
+						<el-table-column prop="name" label="商户名" align="left" min-width="160" />
+						<el-table-column prop="logoPic" label="logo" align="center">
+							<template #default="{ row }">
+								<preview-image :src="row.logoPic" />
+							</template>
+						</el-table-column>
+						<el-table-column prop="collectionCode" width="150" align="center" label="商户收款二维码">
+							<template #default="{ row }">
+								<div class="flex flex-col justify-center items-center">
+									<preview-image :src="row.collectionCode" download
+										:downloadName="`${row.name} 收款二维码`" />
 								</div>
-							</div>
-							<el-tag v-if="row.catgoryName" type="primary">{{ row.catgoryName }}</el-tag>
-						</div>
-					</template>
-				</el-table-column>
-				<el-table-column prop="isSyncZy" label="是否同步正元" min-width="120" align="center">
-					<template #default="{ row }">
-						<el-switch :disabled="!useUserInfo().userInfos.roleCodes.includes('ROLE_ADMIN')"
-							active-value="1" inactive-value="0" v-model="row.isSyncZy" @change="isSyncZyChange(row)" />
-					</template>
-				</el-table-column>
-				<el-table-column label="是否在移动端展示" min-width="150" align="center">
-					<template #default="{ row }">
-						<el-switch :disabled="!useUserInfo().userInfos.roleCodes.includes('ROLE_ADMIN')"
-							active-value="1" inactive-value="0" v-model="row.visibleMobile"
-							@change="visibleMobileChange(row)" />
-					</template>
-				</el-table-column>
-				<el-table-column width="200" label="支付默认钱包" align="center">
-					<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="deptName" label="部门" align="center" min-width="100" />
-				<el-table-column prop="phone" label="联系电话" :min-width="120" align="center" />
-				<el-table-column prop="sort" label="排序" :min-width="100" align="center">
-					<template #default="{ row }">
-						<span class="color-success">{{ row.sort }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="mchCount" label="分店数量" :min-width="100" align="center">
-					<template #default="{ row }">
-						<span class="color-primary">{{ row.mchCount || 0 }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="businessTime" label="营业时间" :min-width="160" align="center">
-					<template #default="{ row }">
-						<div>{{ row.jobTime?.split(",")[0] ? "早上：" + row.jobTime?.split(",")[0] : "" }}</div>
-						<div>{{ row.jobTime?.split(",")[1] ? "中午：" + row.jobTime?.split(",")[1] : "" }}</div>
-						<div>{{ row.jobTime?.split(",")[2] ? "晚上：" + row.jobTime?.split(",")[2] : "" }}</div>
-					</template>
-				</el-table-column>
-				<el-table-column prop="addressDes" label="地址" :min-width="160" align="center" />
-				<el-table-column prop="createTime" label="创建时间" :min-width="160" align="center" />
-				<el-table-column label="操作" fixed="right"
-					v-auths="['wallet_mchManage_refresh_qrcode', 'wallet_mchManage_setting', 'wallet_mchManage_edit', 'wallet_mchManage_del']"
-					min-width="300" align="center">
-					<template #default="{ row }">
-						<el-button icon="RefreshRight" text type="primary" v-auth="'wallet_mchManage_refresh_qrcode'"
-							@click="refreshQrcode(row)">
-							刷新二维码
-						</el-button>
-						<el-button icon="setting" text type="primary" v-auth="'wallet_mchManage_setting'"
-							@click="settingDialogRef.openDialog(row.id)">
-							配置
-						</el-button>
-						<el-button icon="edit-pen" text type="primary" v-auth="'wallet_mchManage_edit'"
-							@click="formDialogRef.openDialog(row.id)">
-							编辑
-						</el-button>
-						<el-button icon="delete" text type="primary" v-auth="'wallet_mchManage_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>
+						</el-table-column>
+						<el-table-column prop="collectionUrlCode" width="150" align="center" label="商户url收款码">
+							<template #default="{ row }">
+								<div class="flex flex-col justify-center items-center">
+									<preview-image :src="row.collectionUrlCode" download
+										:downloadName="`${row.name} 商户url收款码`" />
+								</div>
+							</template>
+						</el-table-column>
+						<el-table-column prop="merchantType" label="商户类型" align="center" :min-width="160">
+							<template #default="{ row }">
+								<div class="flex">
+									<div class="flex justify-center items-center">
+										<div v-for="(v, i) in row.types?.split(',')" :key="i" class="mr-1">
+											<dict-tag :options="merchant_type" :value="v" />
+										</div>
+									</div>
+									<el-tag v-if="row.catgoryName" type="primary">{{ row.catgoryName }}</el-tag>
+								</div>
+							</template>
+						</el-table-column>
+						<el-table-column prop="isSyncZy" label="是否同步正元" min-width="120" align="center">
+							<template #default="{ row }">
+								<el-switch :disabled="!useUserInfo().userInfos.roleCodes.includes('ROLE_ADMIN')"
+									active-value="1" inactive-value="0" v-model="row.isSyncZy"
+									@change="isSyncZyChange(row)" />
+							</template>
+						</el-table-column>
+						<el-table-column label="是否在移动端展示" min-width="150" align="center">
+							<template #default="{ row }">
+								<el-switch :disabled="!useUserInfo().userInfos.roleCodes.includes('ROLE_ADMIN')"
+									active-value="1" inactive-value="0" v-model="row.visibleMobile"
+									@change="visibleMobileChange(row)" />
+							</template>
+						</el-table-column>
+						<el-table-column width="200" label="支付默认钱包" align="center">
+							<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="deptName" label="部门" align="center" min-width="100" />
+						<el-table-column prop="phone" label="联系电话" :min-width="120" align="center" />
+						<el-table-column prop="sort" label="排序" :min-width="100" align="center">
+							<template #default="{ row }">
+								<span class="color-success">{{ row.sort }}</span>
+							</template>
+						</el-table-column>
+						<el-table-column prop="mchCount" label="分店数量" :min-width="100" align="center">
+							<template #default="{ row }">
+								<span class="color-primary">{{ row.mchCount || 0 }}</span>
+							</template>
+						</el-table-column>
+						<el-table-column prop="businessTime" label="营业时间" :min-width="160" align="center">
+							<template #default="{ row }">
+								<div>{{ row.jobTime?.split(",")[0] ? "早上：" + row.jobTime?.split(",")[0] : "" }}</div>
+								<div>{{ row.jobTime?.split(",")[1] ? "中午：" + row.jobTime?.split(",")[1] : "" }}</div>
+								<div>{{ row.jobTime?.split(",")[2] ? "晚上：" + row.jobTime?.split(",")[2] : "" }}</div>
+							</template>
+						</el-table-column>
+						<el-table-column prop="addressDes" label="地址" :min-width="160" align="center" />
+						<el-table-column prop="createTime" label="创建时间" :min-width="160" align="center" />
+						<el-table-column label="操作" fixed="right"
+							v-auths="['wallet_mchManage_refresh_qrcode', 'wallet_mchManage_setting', 'wallet_mchManage_edit', 'wallet_mchManage_del']"
+							min-width="300" align="center">
+							<template #default="{ row }">
+								<el-button icon="RefreshRight" text type="primary"
+									v-auth="'wallet_mchManage_refresh_qrcode'" @click="refreshQrcode(row)">
+									刷新二维码
+								</el-button>
+								<el-button icon="setting" text type="primary" v-auth="'wallet_mchManage_setting'"
+									@click="settingDialogRef.openDialog(row.id)">
+									配置
+								</el-button>
+								<el-button icon="edit-pen" text type="primary" v-auth="'wallet_mchManage_edit'"
+									@click="formDialogRef.openDialog(row.id)">
+									编辑
+								</el-button>
+								<el-button icon="delete" text type="primary" v-auth="'wallet_mchManage_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>
-
 		<!-- 编辑、新增  -->
 		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-
 		<!-- 商户配置 -->
 		<Setting ref="settingDialogRef" @refresh="getDataList(false)" />
 	</div>
@@ -198,6 +211,14 @@ const resetQuery = () => {
 	queryRef.value?.resetFields()
 	// 清空多选
 	selectObjs.value = []
+	state.queryForm.deptIds = []
+	getDataList()
+}
+
+const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
+	// state.queryForm.deptId = curClickedNode.id
+	state.queryForm.deptIds = checkedTreeNodes.map((item: any) => item.id)
+	state.queryForm.isInclude = !isDeepTree
 	getDataList()
 }