feat: 🚀 用户页面展示部门

src/views/system/adminUser/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { columns } from '@/views/system/adminUser/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import AddFill from '@iconify-icons/ri/add-circle-line';
@@ -18,13 +18,16 @@ import Password from '@iconify-icons/ri/lock-password-line';
 import More from '@iconify-icons/ep/more-filled';
 import { useAdminUserStore } from '@/store/system/adminUser';
 import { sexConstant, tableSelectButtonClass, userStatus } from '@/enums/baseConstant';
-import { deviceDetection } from '@pureadmin/utils';
+import { deviceDetection, handleTree } from '@pureadmin/utils';
 import Tree from '@/views/system/adminUser/tree.vue';
 import Airplane from '@/assets/svg/airplane.svg';
+import { useDeptStore } from '@/store/system/dept';
 
 const tableRef = ref();
 const formRef = ref();
 const adminUserStore = useAdminUserStore();
+const deptStore = useDeptStore();
+const deptList = computed(() => handleTree(deptStore.allDeptList));
 
 /**
  * * 当前页改变时
@@ -53,14 +56,34 @@ const resetForm = async formEl => {
 	await onSearch();
 };
 
+/**
+ * * 加载部门列表
+ * @param deptName
+ */
+const onSearchDept = async (deptName: string) => {
+	deptStore.loading = true;
+	await deptStore.getAllDeptList();
+	deptStore.loading = false;
+};
+
+/**
+ * * 当树形结构选择时
+ * 搜索当前用户属于哪个部门
+ * @param dept
+ */
+const onTreeSelect = dept => {
+	console.log(dept);
+};
+
 onMounted(() => {
 	onSearch();
+	onSearchDept();
 });
 </script>
 
 <template>
 	<div :class="['flex', 'justify-between', deviceDetection() && 'flex-wrap']">
-		<tree ref="treeRef" :class="['mr-2', deviceDetection() ? 'w-full' : 'min-w-[200px]']" :treeData="[]" :treeLoading="false" @tree-select="() => {}" />
+		<tree ref="treeRef" :class="['mr-2', deviceDetection() ? 'w-full' : 'min-w-[200px]']" :treeData="deptList" :treeLoading="deptStore.loading" @tree-select="onTreeSelect" />
 		<div :class="[deviceDetection() ? ['w-full', 'mt-2'] : 'w-[calc(100%-200px)]']">
 			<el-form ref="formRef" :inline="true" :model="adminUserStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
 				<!-- 查询用户名 -->
@@ -116,7 +139,7 @@ onMounted(() => {
 				<template v-slot="{ size, dynamicColumns }">
 					<pure-table
 						ref="tableRef"
-						:adaptiveConfig="{ offsetBottom: 45 }"
+						:adaptiveConfig="{ offsetBottom: 96 }"
 						:columns="dynamicColumns"
 						:data="adminUserStore.datalist"
 						:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"

src/views/system/adminUser/tree.vue

@@ -11,7 +11,7 @@ import Reset from '@iconify-icons/ri/restart-line';
 
 interface Tree {
 	id: number;
-	name: string;
+	deptName: string;
 	highlight?: boolean;
 	children?: Tree[];
 }
@@ -30,13 +30,14 @@ const highlightMap = ref({});
 const { proxy } = getCurrentInstance();
 const defaultProps = {
 	children: 'children',
-	label: 'name',
+	value: 'id',
+	label: 'deptName',
 };
 const buttonClass = computed(() => ['!h-[20px]', '!text-sm', 'reset-margin', '!text-[var(--el-text-color-regular)]', 'dark:!text-white', 'dark:hover:!text-primary']);
 
 const filterNode = (value: string, data: Tree) => {
 	if (!value) return true;
-	return data.name.includes(value);
+	return data.deptName.includes(value);
 };
 
 function nodeClick(value) {
@@ -87,7 +88,7 @@ defineExpose({ onTreeReset });
 </script>
 
 <template>
-	<div v-loading="treeLoading" :style="{ minHeight: `calc(100vh - 141px)` }" class="h-full bg-bg_color overflow-hidden relative">
+	<div v-loading="treeLoading" :style="{ minHeight: `calc(100vh - 130px)` }" class="h-full bg-bg_color overflow-hidden relative">
 		<div class="flex items-center h-[34px]">
 			<el-input v-model="searchValue" class="ml-2" clearable placeholder="请输入部门名称" size="small">
 				<template #suffix>

src/views/system/adminUser/utils/hooks.tsx

@@ -16,7 +16,7 @@ import { useUserStore } from '@/store/system/user';
 
 const adminUserStore = useAdminUserStore();
 const userStore = useUserStore();
-export const formRef = ref();
+const formRef = ref();
 const cropRef = ref();
 const assignRolesRef = ref();
 // 上传头像信息

src/views/system/dept/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { columns } from '@/views/system/dept/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import AddFill from '@iconify-icons/ri/add-circle-line';
@@ -17,6 +17,7 @@ import { handleTree } from '@/utils/tree';
 const tableRef = ref();
 const formRef = ref();
 const deptStore = useDeptStore();
+const datalist = computed(() => handleTree(deptStore.datalist));
 
 /**
  * * 当前页改变时
@@ -73,7 +74,7 @@ onMounted(() => {
 			</el-form-item>
 		</el-form>
 
-		<PureTableBar :columns="columns" :title="$t('dept')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
+		<PureTableBar :columns="columns" :isExpandAll="true" :tableRef="tableRef?.getTableRef()" :title="$t('dept')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
 			<template #buttons>
 				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd()"> {{ $t('add_new') }}</el-button>
 
@@ -86,9 +87,9 @@ onMounted(() => {
 			<template v-slot="{ size, dynamicColumns }">
 				<pure-table
 					ref="tableRef"
-					:adaptiveConfig="{ offsetBottom: 45 }"
+					:adaptiveConfig="{ offsetBottom: 96 }"
 					:columns="dynamicColumns"
-					:data="handleTree(deptStore.datalist)"
+					:data="datalist"
 					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
 					:loading="deptStore.loading"
 					:pagination="deptStore.pagination"
@@ -96,6 +97,7 @@ onMounted(() => {
 					adaptive
 					align-whole="center"
 					border
+					default-expand-all
 					highlight-current-row
 					row-key="id"
 					showOverflowTooltip

src/views/system/dept/utils/columns.ts

@@ -5,11 +5,10 @@ import { $t } from '@/plugins/i18n';
 export const columns: TableColumnList = [
 	{ type: 'selection', align: 'left' },
 	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
-	{ label: $t('id'), prop: 'id', width: 250 },
 	// 部门名称
 	{ label: $t('dept_deptName'), prop: 'deptName', width: 160 },
 	// 管理者
-	{ label: $t('dept_manager'), prop: 'manager', width: 200 },
+	{ label: $t('dept_manager'), prop: 'manager' },
 	// 部门简介
 	{ label: $t('dept_summary'), prop: 'summary', width: 360 },
 	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },

src/views/system/menu/index.vue

@@ -84,7 +84,7 @@ onMounted(() => {
 			<template v-slot="{ size, dynamicColumns }">
 				<pure-table
 					ref="tableRef"
-					:adaptiveConfig="{ offsetBottom: 45 }"
+					:adaptiveConfig="{ offsetBottom: 96 }"
 					:columns="dynamicColumns"
 					:data="routerStore.datalist"
 					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"

src/views/system/menuIcon/index.vue

@@ -86,7 +86,7 @@ onMounted(() => {
 			<template v-slot="{ size, dynamicColumns }">
 				<pure-table
 					ref="tableRef"
-					:adaptiveConfig="{ offsetBottom: 45 }"
+					:adaptiveConfig="{ offsetBottom: 96 }"
 					:columns="dynamicColumns"
 					:data="menuIconStore.datalist"
 					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"

src/views/system/power/index.vue

@@ -94,7 +94,7 @@ onMounted(() => {
 			<template v-slot="{ size, dynamicColumns }">
 				<pure-table
 					ref="tableRef"
-					:adaptiveConfig="{ offsetBottom: 45 }"
+					:adaptiveConfig="{ offsetBottom: 96 }"
 					:columns="dynamicColumns"
 					:data="powerStore.datalist"
 					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"

src/views/system/role/index.vue

@@ -85,7 +85,7 @@ onMounted(() => {
 			<template v-slot="{ size, dynamicColumns }">
 				<pure-table
 					ref="tableRef"
-					:adaptiveConfig="{ offsetBottom: 45 }"
+					:adaptiveConfig="{ offsetBottom: 96 }"
 					:columns="dynamicColumns"
 					:data="roleStore.datalist"
 					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"