11

src/components/DraggableDepTree/index.vue

@@ -4,15 +4,11 @@
 			<!-- 树 -->
 			<div v-loading="state.loading" class="h-full flex flex-col m-1">
 				<!-- 头部区域 -->
-				<div class="flex items-center pb-2 shadow-gray-400 z-10" style="box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.1)">
+				<div class="flex items-center pb-2 shadow-gray-400 z-10"
+					style="box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.1)">
 					<div class="w-4/5">
-						<el-input
+						<el-input v-model="state.searchName" suffix-icon="search" :placeholder="placeholder" clearable
-							v-model="state.searchName"
+							@change="handleSearchInputChange" />
-							suffix-icon="search"
-							:placeholder="placeholder"
-							clearable
-							@change="handleSearchInputChange"
-						/>
 					</div>
 					<div class="flex-1 ml-[5%] leading-none" v-if="showExpand">
 						<el-dropdown :hide-on-click="false">
@@ -24,10 +20,8 @@
 									<el-dropdown-item>
 										<el-button
 											class="!h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
-											link
+											link :icon="state.isExpand ? 'expand' : 'fold'"
-											:icon="state.isExpand ? 'expand' : 'fold'"
+											@click="toggleRowExpansionAll(state.isExpand ? false : true)">
-											@click="toggleRowExpansionAll(state.isExpand ? false : true)"
-										>
 											{{ state.isExpand ? "折叠" : "展开" }}
 										</el-button>
 									</el-dropdown-item>
@@ -39,20 +33,12 @@
 
 				<!-- 树形结构 -->
 				<div class="flex-1 overflow-hidden hover:overflow-auto">
-					<el-tree
+					<el-tree ref="treeRef" :props="props.props" :data="state.treeDataList" :expand-on-click-node="false"
-						ref="treeRef"
+						node-key="id" :highlight-current="nodeClickable ? true : false" default-expand-all show-checkbox
-						:props="props.props"
+						@node-click="handleNodeClick" @check="handleCheck">
-						:data="state.treeDataList"
-						:expand-on-click-node="false"
-						node-key="id"
-						:highlight-current="nodeClickable ? true : false"
-						default-expand-all
-						show-checkbox
-						@node-click="handleNodeClick"
-						@check="handleCheck"
-					>
 						<template #default="{ node, data }">
-							<el-tooltip v-if="data.isLock" effect="dark" :content="$t('sysuser.noDataScopeTip')" placement="right">
+							<el-tooltip v-if="data.isLock" effect="dark" :content="$t('sysuser.noDataScopeTip')"
+								placement="right">
 								<span>
 									{{ node.label }}
 									<SvgIcon name="ele-Lock" />
@@ -63,27 +49,19 @@
 				</div>
 
 				<!-- 底部区域 -->
-				<div
+				<div class="flex justify-center items-center pt-2 z-50 sticky bottom-0 overflow-hidden"
-					class="flex justify-center items-center pt-2 z-50 sticky bottom-0 overflow-hidden"
+					style="box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.1)">
-					style="box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.1)"
+					<el-switch v-model="state.switch" @change="handleSwitchChange" :inactive-text="switchInactiveText"
-				>
-					<el-switch
-						v-model="state.switch"
-						@change="handleSwitchChange"
-						:inactive-text="switchInactiveText"
 						:active-text="switchActiveText"
-						:disabled="nodeClickable && state.checkedTreeNodes.length > 0"
+						:disabled="nodeClickable && state.checkedTreeNodes.length > 0" />
-					/>
 				</div>
 			</div>
 		</pane>
 
 		<pane :size="100 - state.treeWidth" class="pl-1 relative">
 			<!-- 折叠按钮 -->
-			<div
+			<div class="w-[12px] h-[56px] bg-gray-200 absolute left-0 top-[44vh] translate-y-[-50%] transition-all cursor-pointer rounded-tr-2xl rounded-br-2xl"
-				class="w-[12px] h-[56px] bg-gray-200 absolute left-0 top-[44vh] translate-y-[-50%] transition-all cursor-pointer rounded-tr-2xl rounded-br-2xl"
+				@click="handleClickTreeFold()">
-				@click="handleClickTreeFold()"
-			>
 				<i class="text-gray-400 inline-block text-center leading-[62px] hover:opacity-50">
 					<el-icon>
 						<ArrowLeftBold v-if="state.treeWidth > 0" />
@@ -236,17 +214,19 @@ defineExpose({
 </script>
 
 <style>
-.splitpanes--vertical > .splitpanes__splitter {
+.splitpanes--vertical>.splitpanes__splitter {
 	background: var(--el-color-primary);
 	/* min-width: 2px; */
 	width: 2px;
 	transition: all 0.3s ease;
 }
-.splitpanes--vertical > .splitpanes__splitter:active {
+
+.splitpanes--vertical>.splitpanes__splitter:active {
 	background: var(--el-color-primary);
 	opacity: 0.6;
 }
-.splitpanes--vertical > .splitpanes__splitter:hover {
+
+.splitpanes--vertical>.splitpanes__splitter:hover {
 	background: var(--el-color-primary);
 	opacity: 0.6;
 }

src/views/admin/system/userFaceApprove/index.vue

@@ -1,16 +1,9 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<DraggableDepTree
+			<DraggableDepTree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
-				ref="draggableDepTreeRef"
+				@getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含"
-				placeholder="请输入部门名称"
+				:defaultTreeWidth="20" :nodeClickable="false">
-				:show-expand="true"
-				@getSelectNode="handleGetSelectNode"
-				switch-inactive-text="包含"
-				switch-active-text="不包含"
-				:defaultTreeWidth="20"
-				:nodeClickable="false"
-			>
 				<template #default>
 					<el-row v-show="showSearch">
 						<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
@@ -31,27 +24,12 @@
 					</el-row>
 					<el-row>
 						<div class="mb8" style="width: 100%">
-							<el-button
+							<el-button plain v-auth="'userFace_sysUserFace_del'" :disabled="multiple" class="ml10"
-								plain
+								icon="Delete" type="primary" @click="handleDelete(selectIds)">
-								v-auth="'userFace_sysUserFace_del'"
-								:disabled="multiple"
-								class="ml10"
-								icon="Delete"
-								type="primary"
-								@click="handleDelete(selectIds)"
-							>
 								删除
 							</el-button>
-							<el-button
+							<el-button plain v-auth="'sys_user_del'" v-if="activeName == '1'" :disabled="multiple"
-								plain
+								class="ml10" icon="VideoPlay" type="primary" @click="doBatchDeal">
-								v-auth="'sys_user_del'"
-								v-if="activeName == '1'"
-								:disabled="multiple"
-								class="ml10"
-								icon="VideoPlay"
-								type="primary"
-								@click="doBatchDeal"
-							>
 								审批
 							</el-button>
 						</div>
@@ -59,15 +37,9 @@
 					<el-tabs class="flex-1" v-model="activeName" @tab-click="handleClickTabItem">
 						<el-tab-pane v-for="v in tabItems" :key="v.id" :label="v.label" :name="v.value" />
 					</el-tabs>
-					<el-table
+					<el-table v-loading="state.loading" :data="state.dataList" row-key="userId"
-						v-loading="state.loading"
+						@selection-change="handleSelectionChange" border :cell-style="tableStyle.cellStyle"
-						:data="state.dataList"
+						:header-cell-style="tableStyle.headerCellStyle">
-						row-key="userId"
-						@selection-change="handleSelectionChange"
-						border
-						:cell-style="tableStyle.cellStyle"
-						:header-cell-style="tableStyle.headerCellStyle"
-					>
 						<el-table-column :selectable="handleSelectable" type="selection" width="40" />
 						<el-table-column label="#" type="index" width="60" fixed="left" />
 						<el-table-column label="姓名" prop="username" fixed="left" show-overflow-tooltip />
@@ -87,21 +59,17 @@
 						<el-table-column label="审核时间" prop="processTime" show-overflow-tooltip min-width="160" />
 						<el-table-column label="操作" min-width="160" fixed="right">
 							<template #default="{ row }">
-								<el-button
+								<el-button type="primary" v-if="row.isCheckUser && row.processStatus != '2'"
-									type="primary"
+									size="small" link icon="VideoPlay" @click="deal(row)">
-									v-if="row.isCheckUser && row.processStatus != '2'"
-									size="small"
-									link
-									icon="VideoPlay"
-									@click="deal(row)"
-								>
 									开始处理
 								</el-button>
-								<el-button v-auth="'userFace_sysUserFace_del'" link type="danger" icon="Delete" @click="delFace(row)">删除</el-button>
+								<el-button v-auth="'userFace_sysUserFace_del'" link type="danger" icon="Delete"
+									@click="delFace(row)">删除</el-button>
 							</template>
 						</el-table-column>
 					</el-table>
-					<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle" />
+					<pagination v-bind="state.pagination" @current-change="currentChangeHandle"
+						@size-change="sizeChangeHandle" />
 				</template>
 			</DraggableDepTree>
 		</div>