11

src/views/mch/mch-manage/index.vue

@@ -1,6 +1,15 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
+			<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>
@@ -33,18 +42,20 @@
 								v-auth="'wallet_mchManage_add'">
 								新 增
 							</el-button>
-					<el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'wallet_mchManage_del'"
+							<el-button plain :disabled="multiple" icon="Delete" type="primary"
-						@click="handleDelete(selectObjs)">
+								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" />
+								@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"
+					<el-table :data="state.dataList" v-loading="state.loading"
-				:row-class-name="tableRowClassName" @selection-change="selectionChangHandle"
+						:header-cell-style="tableStyle.headerCellStyle" :row-class-name="tableRowClassName"
-				@sort-change="sortChangeHandle" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+						@selection-change="selectionChangHandle" @sort-change="sortChangeHandle"
-				:default-expand-all="false" :indent="30" row-key="id">
+						: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" />
@@ -57,7 +68,8 @@
 						<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} 收款二维码`" />
+									<preview-image :src="row.collectionCode" download
+										:downloadName="`${row.name} 收款二维码`" />
 								</div>
 							</template>
 						</el-table-column>
@@ -84,7 +96,8 @@
 						<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)" />
+									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">
@@ -129,8 +142,8 @@
 							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'"
+								<el-button icon="RefreshRight" text type="primary"
-							@click="refreshQrcode(row)">
+									v-auth="'wallet_mchManage_refresh_qrcode'" @click="refreshQrcode(row)">
 									刷新二维码
 								</el-button>
 								<el-button icon="setting" text type="primary" v-auth="'wallet_mchManage_setting'"
@@ -148,11 +161,11 @@
 					</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()
 }