feat: 完善系统管理-用户管理页面 (#688)

* feat: 完善系统管理-用户管理页面

* feat: 上传头像

* feat: 重置密码

* feat: 分配角色

* chore: update type

* chore: done

src/views/system/user/tree.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { handleTree } from "@/utils/tree";
-import { getDeptList } from "@/api/system";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { ref, computed, watch, onMounted, getCurrentInstance } from "vue";
+import { ref, computed, watch, getCurrentInstance } from "vue";
 
 import Dept from "@iconify-icons/ri/git-branch-line";
-import Reset from "@iconify-icons/ri/restart-line";
+// import Reset from "@iconify-icons/ri/restart-line";
 import Search from "@iconify-icons/ep/search";
 import More2Fill from "@iconify-icons/ri/more-2-fill";
 import OfficeBuilding from "@iconify-icons/ep/office-building";
@@ -20,8 +18,14 @@ interface Tree {
   children?: Tree[];
 }
 
+const props = defineProps({
+  treeLoading: Boolean,
+  treeData: Array
+});
+
+const emit = defineEmits(["tree-select"]);
+
 const treeRef = ref();
-const treeData = ref([]);
 const isExpand = ref(true);
 const searchValue = ref("");
 const highlightMap = ref({});
@@ -59,6 +63,12 @@ function nodeClick(value) {
       v.highlight = false;
     }
   });
+  emit(
+    "tree-select",
+    highlightMap.value[nodeId]?.highlight
+      ? Object.assign({ ...value, selected: true })
+      : Object.assign({ ...value, selected: false })
+  );
 }
 
 function toggleRowExpansionAll(status) {
@@ -69,8 +79,8 @@ function toggleRowExpansionAll(status) {
   }
 }
 
-/** 重置状态（选中状态、搜索框值、树初始化） */
-function onReset() {
+/** 重置部门树状态（选中状态、搜索框值、树初始化） */
+function onTreeReset() {
   highlightMap.value = {};
   searchValue.value = "";
   toggleRowExpansionAll(true);
@@ -80,23 +90,18 @@ watch(searchValue, val => {
   treeRef.value!.filter(val);
 });
 
-onMounted(async () => {
-  const { data } = await getDeptList();
-  treeData.value = handleTree(data);
-});
+defineExpose({ onTreeReset });
 </script>
 
 <template>
   <div
+    v-loading="props.treeLoading"
     class="h-full bg-bg_color overflow-auto"
     :style="{ minHeight: `calc(100vh - 133px)` }"
   >
     <div class="flex items-center h-[34px]">
-      <p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
-        部门列表
-      </p>
       <el-input
-        style="flex: 2"
+        class="ml-2"
         size="small"
         v-model="searchValue"
         placeholder="请输入部门名称"
@@ -130,17 +135,17 @@ onMounted(async () => {
                 {{ isExpand ? "折叠全部" : "展开全部" }}
               </el-button>
             </el-dropdown-item>
-            <el-dropdown-item>
+            <!-- <el-dropdown-item>
               <el-button
                 :class="buttonClass"
                 link
                 type="primary"
                 :icon="useRenderIcon(Reset)"
-                @click="onReset"
+                @click="onTreeReset"
               >
                 重置状态
               </el-button>
-            </el-dropdown-item>
+            </el-dropdown-item> -->
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -148,7 +153,7 @@ onMounted(async () => {
     <el-divider />
     <el-tree
       ref="treeRef"
-      :data="treeData"
+      :data="props.treeData"
       node-key="id"
       size="small"
       :props="defaultProps"
@@ -166,12 +171,16 @@ onMounted(async () => {
             'flex',
             'items-center',
             'select-none',
+            'hover:text-primary',
             searchValue.trim().length > 0 &&
               node.label.includes(searchValue) &&
               'text-red-500',
             highlightMap[node.id]?.highlight ? 'dark:text-primary' : ''
           ]"
           :style="{
+            color: highlightMap[node.id]?.highlight
+              ? 'var(--el-color-primary)'
+              : '',
             background: highlightMap[node.id]?.highlight
               ? 'var(--el-color-primary-light-7)'
               : 'transparent'
@@ -197,4 +206,8 @@ onMounted(async () => {
 :deep(.el-divider) {
   margin: 0;
 }
+
+:deep(.el-tree) {
+  --el-tree-node-hover-bg-color: transparent;
+}
 </style>