feat: 新增用户导入导出和导入模板下载功能

src/api/system/user.ts

@@ -1,6 +1,6 @@
 import request from "@/utils/request";
 import { AxiosPromise } from "axios";
-import { UserFormData, UserInfo, UserPageResult, UserQueryParam } from "@/types";
+import { UserFormData, UserImportFormData, UserInfo, UserPageResult, UserQueryParam } from "@/types";
 
 /**
  * 登录成功后获取用户信息（昵称、头像、权限集合和角色集合）
@@ -30,9 +30,9 @@ export function listUsersPage(queryParams: UserQueryParam): AxiosPromise<UserPag
  *
  * @param userId
  */
-export function getUserFormDetail(userId: number):AxiosPromise<UserFormData> {
+export function getUserDetail(userId: number): AxiosPromise<UserFormData> {
     return request({
-        url: '/youlai-admin/api/v1/users/' + userId + '/form_detail',
+        url: '/youlai-admin/api/v1/users/' + userId,
         method: 'get'
     })
 }
@@ -80,6 +80,7 @@ export function updateUserPart(id: number, data: any) {
 
 /**
  * 删除用户
+ * 
  * @param ids
  */
 export function deleteUsers(ids: string) {
@@ -88,3 +89,51 @@ export function deleteUsers(ids: string) {
         method: 'delete',
     })
 }
+
+/**
+ * 下载用户导入模板
+ * 
+ * @returns 
+ */
+export function downloadTemplate() {
+    return request({
+        url: '/youlai-admin/api/v1/users/template',
+        method: 'get',
+        responseType: "arraybuffer"
+    })
+}
+
+/**
+ * 导出用户
+ * 
+ * @param queryParams 
+ * @returns 
+ */
+export function exportUser(queryParams: UserQueryParam) {
+    return request({
+        url: '/youlai-admin/api/v1/users/_export',
+        method: 'get',
+        responseType: "arraybuffer"
+    })
+}
+
+/**
+ * 导入用户
+ *
+ * @param file
+ */
+export function importUser(deptId: number, roleIds: string, file: File) {
+    let formData = new FormData()
+    formData.append('file', file)
+    formData.append('deptId',deptId.toString())
+    formData.append('roleIds',roleIds)
+    return request(
+        {
+            url: '/youlai-admin/api/v1/users/_import',
+            method: 'post',
+            data:formData,
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            }
+        })
+}

src/types/api/system/user.d.ts

@@ -58,4 +58,13 @@ export interface UserFormData {
     status: number,
     remark: string,
     roleIds: number[]
+}
+
+
+/**
+ * 用户导入表单类型声明 
+ */
+ export interface UserImportFormData {
+    deptId: number,
+    roleIds: number[]
 }

src/utils/request.ts

@@ -33,6 +33,12 @@ service.interceptors.response.use(
         if (code === '00000') {
             return response.data;
         } else {
+
+             // 响应数据为二进制流处理(Excel导出)
+             if (response.data instanceof ArrayBuffer) {
+                return response
+            }
+
             ElMessage({
                 message: msg || '系统出错',
                 type: 'error'

src/views/system/user/index.vue

@@ -4,23 +4,10 @@
       <!-- 部门树 -->
       <el-col :span="4" :xs="24">
         <el-card class="box-card">
-          <el-input
+          <el-input v-model="deptName" placeholder="部门名称" clearable :prefix-icon="Search" style="margin-bottom: 20px" />
-            v-model="deptName"
+          <el-tree ref="deptTreeRef" :data="deptOptions" :props="{ children: 'children', label: 'label', disabled: '' }"
-            placeholder="部门名称"
+            :expand-on-click-node="false" :filter-node-method="filterDeptNode" default-expand-all
-            clearable
+            @node-click="handleDeptNodeClick"></el-tree>
-            :prefix-icon="Search"
-            style="margin-bottom: 20px"
-          />
-          <el-tree
-            ref="deptTreeRef"
-            :data="deptOptions"
-            :props="{ children: 'children', label: 'label', disabled: '' }"
-            :expand-on-click-node="false"
-            :filter-node-method="filterDeptNode"
-            default-expand-all
-            @node-click="handleDeptNodeClick"
-          >
-          </el-tree>
         </el-card>
       </el-col>
 
@@ -28,202 +15,105 @@
       <el-col :span="20" :xs="24">
         <el-card class="box-card">
           <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item>
+            <el-row>
-              <el-button
+              <el-col :span="18" :xs="24" :sm="14">
-                type="success"
+                <el-form-item>
-                :icon="Plus"
+                  <el-button type="success" :icon="Plus" @click="handleAdd" v-hasPerm="['sys:user:add']">新增</el-button>
-                @click="handleAdd"
+                  <el-button type="danger" :icon="Delete" :disabled="multiple" @click="handleDelete"
-                v-hasPerm="['sys:user:add']"
+                    v-hasPerm="['sys:user:delete']">删除</el-button>
-              >
+                </el-form-item>
-                新增
-              </el-button>
-              <el-button
-                type="danger"
-                :icon="Delete"
-                :disabled="multiple"
-                @click="handleDelete"
-                v-hasPerm="['sys:user:delete']"
-              >
-                删除
-              </el-button>
-            </el-form-item>
 
-            <el-form-item prop="keywords">
+                <el-form-item prop="keywords">
-              <el-input
+                  <el-input v-model="queryParams.keywords" placeholder="用户名/昵称/手机号" clearable style="width: 200px"
-                v-model="queryParams.keywords"
+                    @keyup.enter="handleQuery" />
-                placeholder="用户名/昵称/手机号"
+                </el-form-item>
-                clearable
-                style="width: 200px"
-                @keyup.enter="handleQuery"
-              />
-            </el-form-item>
 
-            <el-form-item prop="status">
+                <el-form-item prop="status">
-              <el-select
+                  <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 200px">
-                v-model="queryParams.status"
+                    <el-option label="正常" value="1" />
-                placeholder="用户状态"
+                    <el-option label="停用" value="0" />
-                clearable
+                  </el-select>
-                style="width: 200px"
+                </el-form-item>
-              >
-                <el-option label="正常" value="1" />
-                <el-option label="停用" value="0" />
-              </el-select>
-            </el-form-item>
 
-            <el-form-item>
+                <el-form-item>
-              <el-button type="primary" :icon="Search" @click="handleQuery">
+                  <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
-                搜索
+                  <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
-              </el-button>
+                </el-form-item>
-              <el-button :icon="Refresh" @click="resetQuery"> 重置 </el-button>
+              </el-col>
-            </el-form-item>
+
+              <el-col :span="6" :xs="24" :sm="10" style="text-align: right;">
+                <el-form-item>
+                  <el-dropdown split-button style="margin-left: 12px;">
+                    导入
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item :icon="Download" @click="handleDownloadTemplate">下载模板</el-dropdown-item>
+                        <el-dropdown-item :icon="Top" @click="showImportDialog">导入数据</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                  <el-button :icon="Download" style="margin-left: 12px;" @click="handleExport">导出</el-button>
+                </el-form-item>
+              </el-col>
+            </el-row>
           </el-form>
 
-          <el-table
+          <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-            v-loading="loading"
-            :data="userList"
-            @selection-change="handleSelectionChange"
-          >
             <el-table-column type="selection" width="50" align="center" />
-            <el-table-column
+            <el-table-column key="id" label="用户编号" align="center" prop="id" />
-              key="id"
+            <el-table-column key="username" label="用户名" align="center" prop="username" />
-              label="用户编号"
+            <el-table-column label="用户昵称" align="center" prop="nickname" />
-              align="center"
+
-              prop="id"
+            <el-table-column label="性别" align="center" prop="gender" />
-            />
+
-            <el-table-column
+            <el-table-column label="部门" align="center" prop="deptName" />
-              key="username"
+            <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
-              label="用户名称"
-              align="center"
-              prop="username"
-              :show-overflow-tooltip="true"
-            />
-            <el-table-column
-              label="用户昵称"
-              align="center"
-              prop="nickname"
-              :show-overflow-tooltip="true"
-            />
-            <el-table-column
-              label="部门"
-              align="center"
-              prop="deptName"
-              :show-overflow-tooltip="true"
-            />
-            <el-table-column
-              label="手机号码"
-              align="center"
-              prop="mobile"
-              width="120"
-            />
 
             <el-table-column label="状态" align="center" prop="status">
               <template #default="scope">
-                <el-switch
+                <el-switch v-model="scope.row.status" :inactive-value="0" :active-value="1"
-                  v-model="scope.row.status"
+                  @change="handleStatusChange(scope.row)" />
-                  :inactive-value="0"
-                  :active-value="1"
-                  @change="handleStatusChange(scope.row)"
-                />
               </template>
             </el-table-column>
-            <el-table-column
+            <el-table-column label="创建时间" align="center" prop="gmtCreate" width="180"></el-table-column>
-              label="创建时间"
-              align="center"
-              prop="gmtCreate"
-              width="180"
-            >
-            </el-table-column>
             <el-table-column label="操作" align="center" width="150">
               <template #default="scope">
-                <el-button
+                <el-button type="primary" :icon="Edit" circle plain @click="handleUpdate(scope.row)"
-                  type="primary"
+                  v-hasPerm="['sys:user:edit']"></el-button>
-                  :icon="Edit"
+                <el-button type="danger" :icon="Delete" circle plain @click="handleDelete(scope.row)"
-                  circle
+                  v-hasPerm="['sys:user:delete']"></el-button>
-                  plain
+                <el-button type="warning" :icon="Lock" circle plain @click="resetPassword(scope.row)"></el-button>
-                  @click="handleUpdate(scope.row)"
-                  v-hasPerm="['sys:user:edit']"
-                >
-                </el-button>
-                <el-button
-                  type="danger"
-                  :icon="Delete"
-                  circle
-                  plain
-                  @click="handleDelete(scope.row)"
-                  v-hasPerm="['sys:user:delete']"
-                >
-                </el-button>
-                <el-button
-                  type="warning"
-                  :icon="Lock"
-                  circle
-                  plain
-                  @click="resetPassword(scope.row)"
-                >
-                </el-button>
               </template>
             </el-table-column>
           </el-table>
 
-          <pagination
+          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-            v-show="total > 0"
+            v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
-            :total="total"
-            v-model:page="queryParams.pageNum"
-            v-model:limit="queryParams.pageSize"
-            @pagination="handleQuery"
-          />
         </el-card>
       </el-col>
     </el-row>
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" append-to-body @close="cancel">
-      :title="dialog.title"
+      <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="80px">
-      v-model="dialog.visible"
-      width="600px"
-      append-to-body
-      @close="cancel"
-    >
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="80px"
-      >
         <el-form-item label="用户名" prop="username">
-          <el-input
+          <el-input :readonly="!!formData.id" v-model="formData.username" placeholder="请输入用户名" />
-            :readonly="!!formData.id"
-            v-model="formData.username"
-            placeholder="请输入用户名"
-          />
         </el-form-item>
 
         <el-form-item label="用户昵称" prop="nickname">
           <el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
         </el-form-item>
 
-        <el-form-item label="归属部门" prop="deptId">
+        <el-form-item label="所属部门" prop="deptId">
-          <tree-select
+          <tree-select v-model="formData.deptId" :options="deptOptions" placeholder="请选择所属部门" />
-            v-model="formData.deptId"
-            :options="deptOptions"
-            placeholder="请选择归属部门"
-          />
         </el-form-item>
 
         <el-form-item label="手机号码" prop="mobile">
-          <el-input
+          <el-input v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" />
-            v-model="formData.mobile"
-            placeholder="请输入手机号码"
-            maxlength="11"
-          />
         </el-form-item>
 
         <el-form-item label="邮箱" prop="email">
-          <el-input
+          <el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
-            v-model="formData.email"
-            placeholder="请输入邮箱"
-            maxlength="50"
-          />
         </el-form-item>
 
         <el-form-item label="状态" prop="status">
@@ -243,19 +133,52 @@
 
         <el-form-item label="角色" prop="roleIds">
           <el-select v-model="formData.roleIds" multiple placeholder="请选择">
-            <el-option
+            <el-option v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id" />
-              v-for="item in roleOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
           </el-select>
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm"> 确 定 </el-button>
+          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel"> 取 消 </el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog :title="importDialog.title" v-model="importDialog.visible" width="600px" append-to-body
+      @close="closeImportDialog">
+      <el-form ref="importFormRef" :model="importFormData" :rules="rules" label-width="80px">
+        <el-form-item label="所属部门" prop="deptId">
+          <tree-select v-model="importFormData.deptId" :options="deptOptions" placeholder="请选择所属部门" />
+        </el-form-item>
+
+        <el-form-item label="角色" prop="roleIds">
+          <el-select v-model="importFormData.roleIds" multiple placeholder="请选择">
+            <el-option v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="Excel">
+          <el-upload class="upload-demo" action="" drag :auto-upload="false"
+            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+            :file-list="excelFilelist" :on-change="handleExcelChange" :limit="1">
+            <el-icon class="el-icon--upload">
+              <upload-filled />
+            </el-icon>
+            <div class="el-upload__text">
+              将文件拖到此处，或
+              <em>点击上传</em>
+            </div>
+            <template #tip>
+              <div class="el-upload__tip">xls/xlsx files </div>
+            </template>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitImportForm">确 定</el-button>
+          <el-button @click="closeImportDialog">取 消</el-button>
         </div>
       </template>
     </el-dialog>
@@ -267,27 +190,29 @@
 import {
   reactive,
   ref,
-  unref,
   watchEffect,
   onMounted,
   getCurrentInstance,
-  toRefs,
+  toRefs
 } from "vue";
 
-// API依赖
+// 导入API
 import {
   listUsersPage,
-  getUserFormDetail,
+  getUserDetail,
   deleteUsers,
   addUser,
   updateUser,
   updateUserPart,
+  downloadTemplate,
+  exportUser,
+  importUser
 } from "@/api/system/user";
 import { listSelectDepartments } from "@/api/system/dept";
 import { listRoles } from "@/api/system/role";
 
 // 组件依赖
-import { ElMessage, ElMessageBox, ElTree, ElForm } from "element-plus";
+import { ElMessage, ElMessageBox, ElTree, ElForm, UploadRequestOptions } from "element-plus";
 import {
   Search,
   Plus,
@@ -295,6 +220,9 @@ import {
   Refresh,
   Delete,
   Lock,
+  Download,
+  Top,
+  UploadFilled
 } from "@element-plus/icons-vue";
 import TreeSelect from "@/components/TreeSelect/index.vue";
 import {
@@ -303,13 +231,16 @@ import {
   UserFormData,
   Option,
   RoleItem,
-  Dialog
+  Dialog,
+  UserImportFormData
 } from "@/types";
+import { assertFile } from "@babel/types";
 
-// DOM元素的引用声明定义
+// DOM元素的引用声明定义 ，变量名和DOM的ref属性值一致
-const deptTreeRef = ref(ElTree); // 变量名和DOM的ref属性值一致
+const deptTreeRef = ref(ElTree);  // 部门树
-const queryFormRef = ref(ElForm);
+const queryFormRef = ref(ElForm); // 部门树
-const dataFormRef = ref(ElForm);
+const dataFormRef = ref(ElForm); // 部门树
+const importFormRef = ref(ElForm); // 导入
 
 const { proxy }: any = getCurrentInstance();
 
@@ -352,7 +283,7 @@ const state = reactive({
       { required: true, message: "用户昵称不能为空", trigger: "blur" },
     ],
     deptId: [{ required: true, message: "归属部门不能为空", trigger: "blur" }],
-    roleId: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
+    roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
     email: [
       {
         pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
@@ -367,7 +298,16 @@ const state = reactive({
         trigger: "blur",
       },
     ],
+
   },
+
+  importDialog: {
+    title: '用户导出',
+    visible: false,
+  } as Dialog,
+  importFormData: {} as UserImportFormData,
+  excelFile: undefined as any,
+  excelFilelist: [] as File[]
 });
 
 const {
@@ -383,6 +323,9 @@ const {
   deptName,
   deptOptions,
   roleOptions,
+  importDialog,
+  importFormData,
+  excelFilelist
 } = toRefs(state);
 
 /**
@@ -397,6 +340,9 @@ watchEffect(
   }
 );
 
+/**
+ * 部门列表筛选
+ */
 function filterDeptNode(value: string, data: any) {
   if (!value) {
     return true;
@@ -498,7 +444,7 @@ function resetPassword(row: { [key: string]: any }) {
         ElMessage.success("修改成功，新密码是：" + value);
       });
     })
-    .catch(() => {});
+    .catch(() => { });
 }
 
 /**
@@ -524,7 +470,7 @@ async function handleUpdate(row: { [key: string]: any }) {
     title: "修改用户",
     visible: true,
   };
-  getUserFormDetail(userId).then(({ data }) => {
+  getUserDetail(userId).then(({ data }) => {
     state.formData = data;
   });
 }
@@ -539,15 +485,13 @@ function submitForm() {
       if (userId) {
         updateUser(userId, state.formData).then(() => {
           ElMessage.success("修改用户成功");
-          state.dialog.visible = false;
+          cancel()
-          resetForm();
           handleQuery();
         });
       } else {
         addUser(state.formData).then((response: any) => {
           ElMessage.success("新增用户成功");
-          state.dialog.visible = false;
+          cancel()
-          resetForm();
           handleQuery();
         });
       }
@@ -555,14 +499,6 @@ function submitForm() {
   });
 }
 
-/**
- * 重置表单
- */
-function resetForm() {
-  state.formData.id = undefined;
-  dataFormRef.value.resetFields();
-}
-
 /**
  * 删除用户
  */
@@ -591,7 +527,8 @@ function handleDelete(row: { [key: string]: any }) {
  */
 function cancel() {
   state.dialog.visible = false;
-  resetForm();
+  state.formData.id = undefined;
+  dataFormRef.value.resetFields();
 }
 
 /**
@@ -612,6 +549,90 @@ function loadGenderOptions() {
   });
 }
 
+/**
+ * 下载用户导入模板
+ */
+function handleDownloadTemplate() {
+  downloadTemplate().then((response: any) => {
+    const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
+    const a = document.createElement('a')
+    const href = window.URL.createObjectURL(blob) // 下载链接
+    a.href = href
+    a.download = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]); // 获取后台设置的文件名称
+    document.body.appendChild(a)
+    a.click() // 点击下载
+    document.body.removeChild(a) // 下载完成移除元素
+    window.URL.revokeObjectURL(href) // 释放掉blob对象
+  })
+}
+
+/**
+ * 导入用户表单弹窗
+ */
+async function showImportDialog() {
+  await loadDeptOptions();
+  await loadRoleOptions();
+  state.importDialog.visible = true
+}
+
+
+function handleExcelChange(file: any, fileList: File[]) {
+  const fileName = file.name;
+  if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
+    ElMessage.warning('上传Excel只能为xlsx、xls格式');
+    state.excelFile = undefined
+    state.excelFilelist = []
+    return false;
+  }
+  state.excelFile = file.raw
+}
+
+function submitImportForm() {
+  importFormRef.value.validate((valid: any) => {
+    if (valid) {
+      if (!state.excelFile) {
+        ElMessage.warning('上传Excel文件不能为空');
+        return false
+      }
+
+      const deptId = state.importFormData.deptId
+      const roleIds = state.importFormData.roleIds.join(',')
+      importUser(deptId, roleIds, state.excelFile).then((response) => {
+        ElMessage.success(response.data);
+        closeImportDialog();
+        handleQuery();
+      })
+    }
+  });
+}
+
+/**
+ * 关闭导入弹窗
+ */
+function closeImportDialog() {
+  state.importDialog.visible = false
+  state.excelFile = undefined
+  state.excelFilelist = []
+  importFormRef.value.resetFields();
+}
+
+/**
+ * 导出用户
+ */
+function handleExport() {
+  exportUser(queryParams.value).then((response: any) => {
+    const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
+    const a = document.createElement('a')
+    const href = window.URL.createObjectURL(blob) // 下载的链接
+    a.href = href
+    a.download = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]); // 获取后台设置的文件名称
+    document.body.appendChild(a)
+    a.click() // 点击导出
+    document.body.removeChild(a) // 下载完成移除元素
+    window.URL.revokeObjectURL(href) // 释放掉blob对象
+  })
+}
+
 /**
  * 初始化数据
  */
@@ -628,5 +649,6 @@ onMounted(() => {
   loadData();
 });
 </script>
+
 <style lang="scss" scoped>
 </style>