From 3dc30cbfbc20c422c9171cdde15501f60197cdbc Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Sun, 14 Sep 2025 15:59:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E7=94=A8=E6=88=B7=E9=83=A8=E9=97=A8?=
 =?UTF-8?q?=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/admin/system/user/index.vue | 244 ++++++++++++--------------
 1 file changed, 116 insertions(+), 128 deletions(-)

diff --git a/src/views/admin/system/user/index.vue b/src/views/admin/system/user/index.vue
index e3aff1c..978386c 100644
--- a/src/views/admin/system/user/index.vue
+++ b/src/views/admin/system/user/index.vue
@@ -1,134 +1,111 @@
 <template>
 	<div class="layout-padding">
-		<splitpanes>
-			<pane size="15">
-				<div class="layout-padding-auto layout-padding-view">
-					<el-scrollbar>
-						<query-tree :placeholder="$t('common.queryDeptTip')" :query="deptData.queryList"
-							:show-expand="true" @node-click="handleNodeClick">
-							<!-- 没有数据权限提示 -->
-							<template #default="{ node, data }">
-								<el-tooltip v-if="data.isLock" class="item" effect="dark"
-									:content="$t('sysuser.noDataScopeTip')" placement="right-start">
-									<span>{{ node.label }}
-										<SvgIcon name="ele-Lock" />
+		<draggable-dept-tree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
+			@getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
+			:defaultTreeWidth="20" :nodeClickable="false">
+			<div class="layout-padding-auto layout-padding-view">
+				<el-row v-show="showSearch">
+					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+						<el-form-item :label="$t('sysuser.username')" prop="username">
+							<el-input v-model="state.queryForm.username" :placeholder="$t('sysuser.inputUsernameTip')"
+								clearable />
+						</el-form-item>
+						<el-form-item :label="$t('sysuser.phone')" prop="phone">
+							<el-input v-model="state.queryForm.phone" :placeholder="$t('sysuser.inputPhoneTip')"
+								clearable />
+						</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-form>
+				</el-row>
+				<el-row>
+					<div class="mb8" style="width: 100%">
+						<el-button v-auth="'sys_user_add'" icon="folder-add" type="primary"
+							@click="userDialogRef.openDialog()">
+							{{ $t('common.addBtn') }}
+						</el-button>
+						<el-button plain v-auth="'sys_user_add'" class="ml10" icon="upload-filled" type="primary"
+							@click="excelUploadRef.show()">
+							{{ $t('common.importBtn') }}
+						</el-button>
+
+						<el-button plain v-auth="'sys_user_del'" :disabled="multiple" class="ml10" icon="Delete"
+							type="primary" @click="handleDelete(selectObjs)">
+							{{ $t('common.delBtn') }}
+						</el-button>
+
+						<right-toolbar v-model:showSearch="showSearch" :export="'sys_user_export'"
+							@exportExcel="exportExcel" @queryTable="getDataList" class="ml10 mr20"
+							style="float: right" />
+					</div>
+				</el-row>
+				<el-table v-loading="state.loading" :data="state.dataList" @selection-change="handleSelectionChange"
+					row-key="userId" border :cell-style="tableStyle.cellStyle"
+					:header-cell-style="tableStyle.headerCellStyle">
+					<el-table-column :selectable="handleSelectable" type="selection" width="40" />
+					<el-table-column :label="$t('sysuser.index')" type="index" width="60" fixed="left" />
+					<el-table-column :label="$t('sysuser.username')" prop="username" fixed="left"
+						show-overflow-tooltip></el-table-column>
+					<el-table-column :label="$t('sysuser.name')" prop="name" show-overflow-tooltip></el-table-column>
+					<el-table-column :label="$t('sysuser.phone')" prop="phone" show-overflow-tooltip></el-table-column>
+					<el-table-column :label="$t('sysuser.post')" show-overflow-tooltip>
+						<template #default="scope">
+							<el-tag v-for="(item, index) in scope.row.postList" :key="index">{{ item.postName
+							}}</el-tag>
+						</template>
+					</el-table-column>
+					<el-table-column :label="$t('sysuser.role')" show-overflow-tooltip>
+						<template #default="scope">
+							<el-tag v-for="(item, index) in scope.row.roleList" :key="index">{{ item.roleName
+							}}</el-tag>
+						</template>
+					</el-table-column>
+					<el-table-column :label="$t('sysuser.lockFlag')" show-overflow-tooltip>
+						<template #default="scope">
+							<el-switch v-model="scope.row.lockFlag" @change="changeSwitch(scope.row)" active-value="0"
+								inactive-value="9"></el-switch>
+						</template>
+					</el-table-column>
+					<el-table-column :label="$t('common.action')" width="200" fixed="right">
+						<template #default="scope">
+							<div style="display: flex">
+								<!-- 重置密码 -->
+								<popover-input v-model="inputPassword" @confirm="changePassword(scope.row)">
+									<template #default>
+										<el-button v-auth="'sys_user_edit'" icon="RefreshLeft" text type="primary"
+											class="mr-4">
+											{{ $t('sysuser.passwordBtn') }}
+										</el-button>
+									</template>
+								</popover-input>
+								<!-- 修改信息 -->
+								<el-button v-auth="'sys_user_edit'" icon="edit-pen" text type="primary"
+									@click="userDialogRef.openDialog(scope.row.userId)">
+									{{ $t('common.editBtn') }}
+								</el-button>
+								<!-- 删除用户 -->
+								<el-tooltip :content="$t('sysuser.deleteDisabledTip')"
+									:disabled="scope.row.userId !== '1'" placement="top">
+									<span style="margin-left: 12px">
+										<el-button icon="delete" v-auth="'sys_user_del'"
+											:disabled="scope.row.username === 'admin'" text type="primary"
+											@click="handleDelete([scope.row.userId])">{{ $t('common.delBtn') }}
+										</el-button>
 									</span>
 								</el-tooltip>
-								<span v-if="!data.isLock">{{ node.label }}</span>
-							</template>
-						</query-tree>
-					</el-scrollbar>
-				</div>
-			</pane>
-			<pane class="ml8">
-				<div class="layout-padding-auto layout-padding-view">
-					<el-row v-show="showSearch">
-						<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
-							<el-form-item :label="$t('sysuser.username')" prop="username">
-								<el-input v-model="state.queryForm.username"
-									:placeholder="$t('sysuser.inputUsernameTip')" clearable />
-							</el-form-item>
-							<el-form-item :label="$t('sysuser.phone')" prop="phone">
-								<el-input v-model="state.queryForm.phone" :placeholder="$t('sysuser.inputPhoneTip')"
-									clearable />
-							</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-form>
-					</el-row>
-					<el-row>
-						<div class="mb8" style="width: 100%">
-							<el-button v-auth="'sys_user_add'" icon="folder-add" type="primary"
-								@click="userDialogRef.openDialog()">
-								{{ $t('common.addBtn') }}
-							</el-button>
-							<el-button plain v-auth="'sys_user_add'" class="ml10" icon="upload-filled" type="primary"
-								@click="excelUploadRef.show()">
-								{{ $t('common.importBtn') }}
-							</el-button>
-
-							<el-button plain v-auth="'sys_user_del'" :disabled="multiple" class="ml10" icon="Delete"
-								type="primary" @click="handleDelete(selectObjs)">
-								{{ $t('common.delBtn') }}
-							</el-button>
-
-							<right-toolbar v-model:showSearch="showSearch" :export="'sys_user_export'"
-								@exportExcel="exportExcel" @queryTable="getDataList" class="ml10 mr20"
-								style="float: right" />
-						</div>
-					</el-row>
-					<el-table v-loading="state.loading" :data="state.dataList" @selection-change="handleSelectionChange"
-						row-key="userId" border :cell-style="tableStyle.cellStyle"
-						:header-cell-style="tableStyle.headerCellStyle">
-						<el-table-column :selectable="handleSelectable" type="selection" width="40" />
-						<el-table-column :label="$t('sysuser.index')" type="index" width="60" fixed="left" />
-						<el-table-column :label="$t('sysuser.username')" prop="username" fixed="left"
-							show-overflow-tooltip></el-table-column>
-						<el-table-column :label="$t('sysuser.name')" prop="name"
-							show-overflow-tooltip></el-table-column>
-						<el-table-column :label="$t('sysuser.phone')" prop="phone"
-							show-overflow-tooltip></el-table-column>
-						<el-table-column :label="$t('sysuser.post')" show-overflow-tooltip>
-							<template #default="scope">
-								<el-tag v-for="(item, index) in scope.row.postList" :key="index">{{ item.postName
-								}}</el-tag>
-							</template>
-						</el-table-column>
-						<el-table-column :label="$t('sysuser.role')" show-overflow-tooltip>
-							<template #default="scope">
-								<el-tag v-for="(item, index) in scope.row.roleList" :key="index">{{ item.roleName
-								}}</el-tag>
-							</template>
-						</el-table-column>
-						<el-table-column :label="$t('sysuser.lockFlag')" show-overflow-tooltip>
-							<template #default="scope">
-								<el-switch v-model="scope.row.lockFlag" @change="changeSwitch(scope.row)"
-									active-value="0" inactive-value="9"></el-switch>
-							</template>
-						</el-table-column>
-						<el-table-column :label="$t('common.action')" width="200" fixed="right">
-							<template #default="scope">
-								<div style="display: flex">
-									<!-- 重置密码 -->
-									<popover-input v-model="inputPassword" @confirm="changePassword(scope.row)">
-										<template #default>
-											<el-button v-auth="'sys_user_edit'" icon="RefreshLeft" text type="primary"
-												class="mr-4">
-												{{ $t('sysuser.passwordBtn') }}
-											</el-button>
-										</template>
-									</popover-input>
-									<!-- 修改信息 -->
-									<el-button v-auth="'sys_user_edit'" icon="edit-pen" text type="primary"
-										@click="userDialogRef.openDialog(scope.row.userId)">
-										{{ $t('common.editBtn') }}
-									</el-button>
-									<!-- 删除用户 -->
-									<el-tooltip :content="$t('sysuser.deleteDisabledTip')"
-										:disabled="scope.row.userId !== '1'" placement="top">
-										<span style="margin-left: 12px">
-											<el-button icon="delete" v-auth="'sys_user_del'"
-												:disabled="scope.row.username === 'admin'" text type="primary"
-												@click="handleDelete([scope.row.userId])">{{ $t('common.delBtn') }}
-											</el-button>
-										</span>
-									</el-tooltip>
-								</div>
-							</template>
-						</el-table-column>
-					</el-table>
-					<pagination v-bind="state.pagination" @current-change="currentChangeHandle"
-						@size-change="sizeChangeHandle">
-					</pagination>
-				</div>
-			</pane>
-		</splitpanes>
-
+							</div>
+						</template>
+					</el-table-column>
+				</el-table>
+				<pagination v-bind="state.pagination" @current-change="currentChangeHandle"
+					@size-change="sizeChangeHandle">
+				</pagination>
+			</div>
+		</draggable-dept-tree>
 		<user-form ref="userDialogRef" @refresh="getDataList(false)" :deptId="state.queryForm.deptId" />
-
 		<upload-excel ref="excelUploadRef" :title="$t('sysuser.importUserTip')"
 			temp-url="/admin/sys-file/local/file/user.xlsx" url="/admin/user/import" @refreshDataList="getDataList" />
 	</div>
@@ -154,6 +131,7 @@ const excelUploadRef = ref();
 const queryRef = ref();
 const showSearch = ref(true);
 const inputPassword = ref();
+const draggableDepTreeRef = ref()
 
 // 多选rows
 const selectObjs = ref([]) as any;
@@ -184,9 +162,21 @@ const deptData = reactive({
 const resetQuery = () => {
 	queryRef.value?.resetFields();
 	state.queryForm.deptId = '';
+	// 清空树状选择
+	state.queryForm.deptId = ""
+	state.queryForm.deptCodes = []
+	draggableDepTreeRef.value.resetData()
 	getDataList();
 };
 
+// 树节点选择时
+const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
+	state.queryForm.deptId = curClickedNode.id
+	state.queryForm.deptCodes = checkedTreeNodes.map((item: any) => item.id)
+	state.queryForm.isInclude = !isDeepTree
+	getDataList()
+}
+
 // 点击树
 const handleNodeClick = (e: any) => {
 	state.queryForm.deptId = e.id;
@@ -216,7 +206,6 @@ const handleDelete = async (ids: string[]) => {
 	} catch {
 		return;
 	}
-
 	try {
 		await delObj(ids);
 		getDataList();
@@ -242,7 +231,6 @@ const changePassword = async (row: any) => {
 		useMessage().error(t('sysuser.inputPasswordTip'));
 		return;
 	}
-
 	row.phone = undefined;
 	row.password = inputPassword.value;
 	await putObj(row);