feat: 新增用户管理

src/views/system/user/index.vue

@@ -1,101 +1,100 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
-import { useLoginLogHook } from "./utils/hook";
+import tree from "./tree.vue";
+import { useHook } from "./hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
+import Password from "@iconify-icons/ri/lock-password-line";
+import More from "@iconify-icons/ep/more-filled";
 import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Download from "@iconify-icons/ep/download";
+import Upload from "@iconify-icons/ep/upload";
 import Search from "@iconify-icons/ep/search";
 import Refresh from "@iconify-icons/ep/refresh";
+import AddFill from "@iconify-icons/ri/add-circle-line";
 import { useUserStoreHook } from "@/store/modules/user";
-// TODO 这个导入声明好长  看看如何优化
-import { CommonUtils } from "@/utils/common";
 
-/** 组件name最好和菜单表中的router_name一致 */
 defineOptions({
-  name: "SystemOperationLog"
+  name: "SystemUser"
 });
 
-const loginLogStatusList =
+const formRef = ref();
-  useUserStoreHook().dictionaryList["sysLoginLog.status"];
-
-const tableRef = ref();
-
-const searchFormRef = ref();
 const {
   searchFormParams,
   pageLoading,
   columns,
   dataList,
   pagination,
-  timeRange,
+  buttonClass,
-  defaultSort,
-  multipleSelection,
   onSearch,
   resetForm,
   exportAllExcel,
-  getLoginLogList,
+  openResetPasswordDialog,
   handleDelete,
-  handleBulkDelete
+  openDialog,
-} = useLoginLogHook();
+  getList,
+  openUploadDialog
+} = useHook();
+
+watch(
+  () => searchFormParams.deptId,
+  () => {
+    onSearch();
+  }
+);
 </script>
 
 <template>
   <div class="main">
-    <!-- 搜索栏 -->
+    <tree class="w-[17%] float-left" v-model="searchFormParams.deptId" />
+    <div class="float-right w-[82%]">
       <el-form
-      ref="searchFormRef"
+        ref="formRef"
         :inline="true"
         :model="searchFormParams"
         class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
       >
-      <el-form-item label="登录IP：" prop="ipAddress">
+        <el-form-item label="用户编号：" prop="userId">
           <el-input
-          v-model="searchFormParams.ipAddress"
+            v-model="searchFormParams.userId"
-          placeholder="请输入IP地址"
+            placeholder="请输入用户编号"
             clearable
-          class="!w-[200px]"
+            class="!w-[160px]"
           />
         </el-form-item>
-      <el-form-item label="用户名：" prop="username">
+        <el-form-item label="用户名称：" prop="username">
           <el-input
             v-model="searchFormParams.username"
-          placeholder="请选择用户名称"
+            placeholder="请输入用户名称"
             clearable
-          class="!w-[200px]"
+            class="!w-[160px]"
+          />
+        </el-form-item>
+        <el-form-item label="手机号码：" prop="phoneNumber">
+          <el-input
+            v-model="searchFormParams.phoneNumber"
+            placeholder="请输入手机号码"
+            clearable
+            class="!w-[160px]"
           />
         </el-form-item>
-
         <el-form-item label="状态：" prop="status">
           <el-select
             v-model="searchFormParams.status"
-          placeholder="请选择状态"
+            placeholder="请选择"
             clearable
-          class="!w-[180px]"
+            class="!w-[160px]"
           >
             <el-option
-            v-for="dict in loginLogStatusList"
+              v-for="dict in useUserStoreHook().dictionaryList['common.status']"
               :key="dict.value"
               :label="dict.label"
               :value="dict.value"
             />
           </el-select>
         </el-form-item>
-      <el-form-item>
-        <label class="el-form-item__label is-required font-bold"
-          >登录时间：</label
-        >
-        <!-- TODO 如何消除这个v-model的warning -->
-        <el-date-picker
-          class="!w-[240px]"
-          v-model="timeRange"
-          value-format="YYYY-MM-DD"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        />
-      </el-form-item>
         <el-form-item>
           <el-button
             type="primary"
@@ -105,69 +104,72 @@ const {
           >
             搜索
           </el-button>
-        <el-button
+          <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
-          :icon="useRenderIcon(Refresh)"
-          @click="resetForm(searchFormRef, tableRef)"
-        >
             重置
           </el-button>
         </el-form-item>
       </el-form>
 
-    <!-- table bar 包裹  table -->
+      <PureTableBar title="用户管理" :columns="columns" @refresh="onSearch">
-    <PureTableBar title="登录日志列表" :columns="columns" @refresh="onSearch">
-      <!-- 表格操作栏 -->
         <template #buttons>
           <el-button
-          type="danger"
+            type="primary"
-          :icon="useRenderIcon(Delete)"
+            :icon="useRenderIcon(AddFill)"
-          @click="handleBulkDelete(tableRef)"
+            @click="openDialog('新增')"
           >
-          批量删除
+            新增用户
           </el-button>
           <el-button
-          type="primary"
+            type="info"
-          @click="CommonUtils.exportExcel(columns, dataList, '登录日志列表')"
+            :icon="useRenderIcon(Upload)"
-          >单页导出</el-button
+            @click="openUploadDialog"
           >
-        <el-button type="primary" @click="exportAllExcel">全部导出</el-button>
+            导入
+          </el-button>
+          <el-button
+            type="warning"
+            :icon="useRenderIcon(Download)"
+            @click="exportAllExcel"
+          >
+            导出
+          </el-button>
         </template>
         <template v-slot="{ size, dynamicColumns }">
           <pure-table
             border
-          ref="tableRef"
+            adaptive
             align-whole="center"
-          showOverflowTooltip
             table-layout="auto"
             :loading="pageLoading"
             :size="size"
-          adaptive
             :data="dataList"
             :columns="dynamicColumns"
-          :default-sort="defaultSort"
             :pagination="pagination"
             :paginationSmall="size === 'small' ? true : false"
             :header-cell-style="{
               background: 'var(--el-table-row-hover-bg-color)',
               color: 'var(--el-text-color-primary)'
             }"
-          @page-size-change="getLoginLogList"
+            @page-size-change="getList"
-          @page-current-change="getLoginLogList"
+            @page-current-change="getList"
-          @sort-change="getLoginLogList"
-          @selection-change="
-            rows => (multipleSelection = rows.map(item => item.logId))
-          "
           >
             <template #operation="{ row }">
-            <el-popconfirm
+              <el-button
-              :title="`是否确认删除编号为${row.logId}的这条日志`"
+                class="reset-margin"
-              @confirm="handleDelete(row)"
+                link
+                type="primary"
+                :size="size"
+                @click="openDialog('编辑', row)"
+                :icon="useRenderIcon(EditPen)"
               >
+                修改
+              </el-button>
+              <el-popconfirm title="是否确认删除?" @confirm="handleDelete(row)">
                 <template #reference>
                   <el-button
                     class="reset-margin"
                     link
-                  type="danger"
+                    type="primary"
                     :size="size"
                     :icon="useRenderIcon(Delete)"
                   >
@@ -175,11 +177,37 @@ const {
                   </el-button>
                 </template>
               </el-popconfirm>
+              <el-dropdown>
+                <el-button
+                  class="ml-3 mt-[2px]"
+                  link
+                  type="primary"
+                  :size="size"
+                  :icon="useRenderIcon(More)"
+                />
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item>
+                      <el-button
+                        :class="buttonClass"
+                        link
+                        type="primary"
+                        :size="size"
+                        :icon="useRenderIcon(Password)"
+                        @click="openResetPasswordDialog(row)"
+                      >
+                        重置密码
+                      </el-button>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
             </template>
           </pure-table>
         </template>
       </PureTableBar>
     </div>
+  </div>
 </template>
 
 <style scoped lang="scss">