From fb14f5d075b42b35c1a89b06f39d4ade41c43d04 Mon Sep 17 00:00:00 2001
From: valarchie <343928303@qq.com>
Date: Mon, 24 Jul 2023 19:46:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/user/index.vue | 328 +++++++++++++++++---------------
 1 file changed, 178 insertions(+), 150 deletions(-)

diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index ab32c30..272a71d 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,184 +1,212 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { useLoginLogHook } from "./utils/hook";
+import { ref, watch } from "vue";
+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 =
-  useUserStoreHook().dictionaryList["sysLoginLog.status"];
-
-const tableRef = ref();
-
-const searchFormRef = ref();
+const formRef = ref();
 const {
   searchFormParams,
   pageLoading,
   columns,
   dataList,
   pagination,
-  timeRange,
-  defaultSort,
-  multipleSelection,
+  buttonClass,
   onSearch,
   resetForm,
   exportAllExcel,
-  getLoginLogList,
+  openResetPasswordDialog,
   handleDelete,
-  handleBulkDelete
-} = useLoginLogHook();
+  openDialog,
+  getList,
+  openUploadDialog
+} = useHook();
+
+watch(
+  () => searchFormParams.deptId,
+  () => {
+    onSearch();
+  }
+);
 </script>
 
 <template>
   <div class="main">
-    <!-- 搜索栏 -->
-    <el-form
-      ref="searchFormRef"
-      :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-input
-          v-model="searchFormParams.ipAddress"
-          placeholder="请输入IP地址"
-          clearable
-          class="!w-[200px]"
-        />
-      </el-form-item>
-      <el-form-item label="用户名：" prop="username">
-        <el-input
-          v-model="searchFormParams.username"
-          placeholder="请选择用户名称"
-          clearable
-          class="!w-[200px]"
-        />
-      </el-form-item>
-
-      <el-form-item label="状态：" prop="status">
-        <el-select
-          v-model="searchFormParams.status"
-          placeholder="请选择状态"
-          clearable
-          class="!w-[180px]"
-        >
-          <el-option
-            v-for="dict in loginLogStatusList"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+    <tree class="w-[17%] float-left" v-model="searchFormParams.deptId" />
+    <div class="float-right w-[82%]">
+      <el-form
+        ref="formRef"
+        :inline="true"
+        :model="searchFormParams"
+        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      >
+        <el-form-item label="用户编号：" prop="userId">
+          <el-input
+            v-model="searchFormParams.userId"
+            placeholder="请输入用户编号"
+            clearable
+            class="!w-[160px]"
           />
-        </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"
-          :icon="useRenderIcon(Search)"
-          :loading="pageLoading"
-          @click="onSearch"
-        >
-          搜索
-        </el-button>
-        <el-button
-          :icon="useRenderIcon(Refresh)"
-          @click="resetForm(searchFormRef, tableRef)"
-        >
-          重置
-        </el-button>
-      </el-form-item>
-    </el-form>
+        </el-form-item>
+        <el-form-item label="用户名称：" prop="username">
+          <el-input
+            v-model="searchFormParams.username"
+            placeholder="请输入用户名称"
+            clearable
+            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="请选择"
+            clearable
+            class="!w-[160px]"
+          >
+            <el-option
+              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>
+          <el-button
+            type="primary"
+            :icon="useRenderIcon(Search)"
+            :loading="pageLoading"
+            @click="onSearch"
+          >
+            搜索
+          </el-button>
+          <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
 
-    <!-- table bar 包裹  table -->
-    <PureTableBar title="登录日志列表" :columns="columns" @refresh="onSearch">
-      <!-- 表格操作栏 -->
-      <template #buttons>
-        <el-button
-          type="danger"
-          :icon="useRenderIcon(Delete)"
-          @click="handleBulkDelete(tableRef)"
-        >
-          批量删除
-        </el-button>
-        <el-button
-          type="primary"
-          @click="CommonUtils.exportExcel(columns, dataList, '登录日志列表')"
-          >单页导出</el-button
-        >
-        <el-button type="primary" @click="exportAllExcel">全部导出</el-button>
-      </template>
-      <template v-slot="{ size, dynamicColumns }">
-        <pure-table
-          border
-          ref="tableRef"
-          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-current-change="getLoginLogList"
-          @sort-change="getLoginLogList"
-          @selection-change="
-            rows => (multipleSelection = rows.map(item => item.logId))
-          "
-        >
-          <template #operation="{ row }">
-            <el-popconfirm
-              :title="`是否确认删除编号为${row.logId}的这条日志`"
-              @confirm="handleDelete(row)"
-            >
-              <template #reference>
+      <PureTableBar title="用户管理" :columns="columns" @refresh="onSearch">
+        <template #buttons>
+          <el-button
+            type="primary"
+            :icon="useRenderIcon(AddFill)"
+            @click="openDialog('新增')"
+          >
+            新增用户
+          </el-button>
+          <el-button
+            type="info"
+            :icon="useRenderIcon(Upload)"
+            @click="openUploadDialog"
+          >
+            导入
+          </el-button>
+          <el-button
+            type="warning"
+            :icon="useRenderIcon(Download)"
+            @click="exportAllExcel"
+          >
+            导出
+          </el-button>
+        </template>
+        <template v-slot="{ size, dynamicColumns }">
+          <pure-table
+            border
+            adaptive
+            align-whole="center"
+            table-layout="auto"
+            :loading="pageLoading"
+            :size="size"
+            :data="dataList"
+            :columns="dynamicColumns"
+            :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="getList"
+            @page-current-change="getList"
+          >
+            <template #operation="{ row }">
+              <el-button
+                class="reset-margin"
+                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="primary"
+                    :size="size"
+                    :icon="useRenderIcon(Delete)"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-popconfirm>
+              <el-dropdown>
                 <el-button
-                  class="reset-margin"
+                  class="ml-3 mt-[2px]"
                   link
-                  type="danger"
+                  type="primary"
                   :size="size"
-                  :icon="useRenderIcon(Delete)"
-                >
-                  删除
-                </el-button>
-              </template>
-            </el-popconfirm>
-          </template>
-        </pure-table>
-      </template>
-    </PureTableBar>
+                  :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>