用户管理样式

src/views/setting/user/index.vue

@@ -1,30 +1,36 @@
 <template>
 	<div class="pageWrap bgc">
-		<div class="aside-box-system">
-			<el-aside width="200px" style="height: 100%">
-				<el-container>
-					<el-header>
-						<el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable style="margin-top: 10px" />
-					</el-header>
-					<el-main class="nopadding">
-						<el-tree
-							ref="treeRef"
-							class="menu-tree"
-							:data="treeData"
-							node-key="id"
-							:current-node-key="''"
-							:highlight-current="true"
-							:expand-on-click-node="false"
-							:props="defaultProps"
-							default-expand-all
-							:filter-node-method="filterNode"
-							@node-click="roleClick"
-						/>
-					</el-main>
-				</el-container>
-			</el-aside>
+		<div class="h-full mr-2">
+			<el-card :body-style="{ height: '100%', width: '300px' }" class="h-full border-none menu-card" shadow="hidden">
+				<template #header>
+					<div class="flex justify-between">
+						<div class="card-header">
+							<span>用户列表</span>
+						</div>
+						<div class="">
+							<el-icon class="cursor-pointer" @click="getGroup" size="22"><Refresh /></el-icon>
+						</div>
+					</div>
+				</template>
+
+				<el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable />
+				<el-tree
+					v-loading="showGroupLoading"
+					ref="treeRef"
+					class="menu-tree-box py-3"
+					:data="treeData"
+					node-key="id"
+					:current-node-key="''"
+					:highlight-current="true"
+					:expand-on-click-node="false"
+					:props="defaultProps"
+					default-expand-all
+					:filter-node-method="filterNode"
+					@node-click="departMentClick"
+				/>
+			</el-card>
 		</div>
-		<!--		<el-divider direction="vertical" style="height: 100%" />-->
+
 		<div class="content-warp flex-column-page-wrap">
 			<!-- 公用搜索组件 -->
 			<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"></LeSearchForm>
@@ -200,7 +206,7 @@ const treeRef = ref<InstanceType<typeof ElTree>>()
 
 const defaultProps = {
 	children: 'children',
-	label: 'label'
+	label: 'name'
 }
 
 const filterNode = (value: string, data: Tree) => {
@@ -214,10 +220,11 @@ const typeModel = ref('')
 // 获取左侧菜单数据
 const getGroup = async () => {
 	showGroupLoading.value = true
-	let data = await role.roleListTreeApi()
+	const data = await department.departmentPageApi({})
 	showGroupLoading.value = false
-	data.unshift({ id: '', label: '所有' })
-	treeData.value = data // console.log('获取左侧菜单数据')
+	// data.unshift({ id: '', label: '所有' })
+	// treeData.value = data // console.log('获取左侧菜单数据')
+	treeData.value = [{ id: '', name: '所有', children: data }]
 }
 
 // 获取全部的角色列表
@@ -245,11 +252,9 @@ const getDepartmentsList = async () => {
 }
 
 // 左侧菜单点击
-const roleClick = data => {
-	console.log(data.id, 'data.id')
+const departMentClick = data => {
 	// 修改search参数 watch 变更 自动刷新 列表
-	// searchData.value = { ...searchData.value, data: { roleId: data.id ? data.id : null } }
-	searchData.value = { ...searchData.value, roleId: data.id || null }
+	searchData.value = { ...searchData.value, departmentId: data.id || null }
 }
 
 // 表格搜索条件
@@ -498,9 +503,29 @@ nextTick(() => {
 watch(groupFilterText, val => {
 	treeRef.value!.filter(val)
 })
+
 </script>
 <style scoped lang="scss">
-.nopadding {
-	padding: 0px;
+:deep(.menu-card) {
+	.el-card__header {
+		font-size: 16px;
+		font-weight: 500;
+		padding: 12px 16px;
+		border-bottom: none;
+	}
+
+	.el-card__body {
+		padding: 0 16px 12px 16px;
+	}
+}
+
+:deep(.menu-tree-box) {
+	.el-tree-node__content {
+		height: 36px!important;
+	}
+
+	.el-tree-node__content .el-tree-node__label .icon {
+		margin-right: 5px;
+	}
 }
 </style>