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

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

* feat: 上传头像

* feat: 重置密码

* feat: 分配角色

* chore: update type

* chore: done

src/views/system/user/index.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import tree from "./tree.vue";
-import { useUser } from "./hook";
+import { useUser } from "./utils/hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
+import Upload from "@iconify-icons/ri/upload-line";
 import Role from "@iconify-icons/ri/admin-line";
 import Password from "@iconify-icons/ri/lock-password-line";
 import More from "@iconify-icons/ep/more-filled";
@@ -18,28 +19,47 @@ defineOptions({
   name: "User"
 });
 
+const treeRef = ref();
 const formRef = ref();
+const tableRef = ref();
+
 const {
   form,
   loading,
   columns,
   dataList,
+  treeData,
+  treeLoading,
+  selectedNum,
   pagination,
   buttonClass,
   onSearch,
   resetForm,
+  onbatchDel,
+  openDialog,
+  onTreeSelect,
   handleUpdate,
   handleDelete,
+  handleUpload,
+  handleReset,
+  handleRole,
   handleSizeChange,
+  onSelectionCancel,
   handleCurrentChange,
   handleSelectionChange
-} = useUser();
+} = useUser(tableRef, treeRef);
 </script>
 
 <template>
-  <div class="main">
-    <tree class="w-[17%] float-left" />
-    <div class="float-right w-[82%]">
+  <div class="flex justify-between">
+    <tree
+      ref="treeRef"
+      class="min-w-[200px] mr-2"
+      :treeData="treeData"
+      :treeLoading="treeLoading"
+      @tree-select="onTreeSelect"
+    />
+    <div class="w-[calc(100%-200px)]">
       <el-form
         ref="formRef"
         :inline="true"
@@ -54,9 +74,9 @@ const {
             class="!w-[160px]"
           />
         </el-form-item>
-        <el-form-item label="手机号码：" prop="mobile">
+        <el-form-item label="手机号码：" prop="phone">
           <el-input
-            v-model="form.mobile"
+            v-model="form.phone"
             placeholder="请输入手机号码"
             clearable
             class="!w-[160px]"
@@ -88,15 +108,48 @@ const {
         </el-form-item>
       </el-form>
 
-      <PureTableBar title="用户管理" :columns="columns" @refresh="onSearch">
+      <PureTableBar
+        title="用户管理（仅演示，操作后不生效）"
+        :columns="columns"
+        @refresh="onSearch"
+      >
         <template #buttons>
-          <el-button type="primary" :icon="useRenderIcon(AddFill)">
+          <el-button
+            type="primary"
+            :icon="useRenderIcon(AddFill)"
+            @click="openDialog()"
+          >
             新增用户
           </el-button>
         </template>
         <template v-slot="{ size, dynamicColumns }">
+          <div
+            v-if="selectedNum > 0"
+            v-motion-fade
+            class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+          >
+            <div class="flex-auto">
+              <span
+                style="font-size: var(--el-font-size-base)"
+                class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
+              >
+                已选 {{ selectedNum }} 项
+              </span>
+              <el-button type="primary" text @click="onSelectionCancel">
+                取消选择
+              </el-button>
+            </div>
+            <el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
+              <template #reference>
+                <el-button type="danger" text class="mr-1">
+                  批量删除
+                </el-button>
+              </template>
+            </el-popconfirm>
+          </div>
           <pure-table
-            border
+            row-key="id"
+            ref="tableRef"
             adaptive
             align-whole="center"
             table-layout="auto"
@@ -107,7 +160,7 @@ const {
             :pagination="pagination"
             :paginationSmall="size === 'small' ? true : false"
             :header-cell-style="{
-              background: 'var(--el-table-row-hover-bg-color)',
+              background: 'var(--el-fill-color-light)',
               color: 'var(--el-text-color-primary)'
             }"
             @selection-change="handleSelectionChange"
@@ -120,12 +173,15 @@ const {
                 link
                 type="primary"
                 :size="size"
-                @click="handleUpdate(row)"
                 :icon="useRenderIcon(EditPen)"
+                @click="openDialog('编辑', row)"
               >
                 修改
               </el-button>
-              <el-popconfirm title="是否确认删除?">
+              <el-popconfirm
+                :title="`是否确认删除用户编号为${row.id}的这条数据`"
+                @confirm="handleDelete(row)"
+              >
                 <template #reference>
                   <el-button
                     class="reset-margin"
@@ -133,7 +189,6 @@ const {
                     type="primary"
                     :size="size"
                     :icon="useRenderIcon(Delete)"
-                    @click="handleDelete(row)"
                   >
                     删除
                   </el-button>
@@ -145,11 +200,23 @@ const {
                   link
                   type="primary"
                   :size="size"
-                  @click="handleUpdate(row)"
                   :icon="useRenderIcon(More)"
+                  @click="handleUpdate(row)"
                 />
                 <template #dropdown>
                   <el-dropdown-menu>
+                    <el-dropdown-item>
+                      <el-button
+                        :class="buttonClass"
+                        link
+                        type="primary"
+                        :size="size"
+                        :icon="useRenderIcon(Upload)"
+                        @click="handleUpload(row)"
+                      >
+                        上传头像
+                      </el-button>
+                    </el-dropdown-item>
                     <el-dropdown-item>
                       <el-button
                         :class="buttonClass"
@@ -157,6 +224,7 @@ const {
                         type="primary"
                         :size="size"
                         :icon="useRenderIcon(Password)"
+                        @click="handleReset(row)"
                       >
                         重置密码
                       </el-button>
@@ -168,6 +236,7 @@ const {
                         type="primary"
                         :size="size"
                         :icon="useRenderIcon(Role)"
+                        @click="handleRole(row)"
                       >
                         分配角色
                       </el-button>
@@ -188,6 +257,10 @@ const {
   margin: 0;
 }
 
+:deep(.el-button:focus-visible) {
+  outline: none;
+}
+
 .search-form {
   :deep(.el-form-item) {
     margin-bottom: 12px;