lisang
/
vue3-element-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
郝先瑞 2022-04-13 00:18:08 +08:00
parent 3e30a6eba8
commit c260d39b1c
4 changed files with 301 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/api/system/user.ts
View File

@ -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'
}
})
}

9
src/types/api/system/user.d.ts vendored
View File

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

6
src/utils/request.ts
View File

@ -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'

446
src/views/system/user/index.vue
View File

@ -4,23 +4,10 @@
<!-- 部门树 -->
<el-col :span="4" :xs="24">
<el-card class="box-card">
<el-input
v-model="deptName"
placeholder="部门名称"
clearable
: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-input v-model="deptName" placeholder="部门名称" clearable :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-button
type="success"
:icon="Plus"
@click="handleAdd"
v-hasPerm="['sys:user:add']"
>
新增
</el-button>
<el-button
type="danger"
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
v-hasPerm="['sys:user:delete']"
>
删除
</el-button>
</el-form-item>
<el-row>
<el-col :span="18" :xs="24" :sm="14">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd" v-hasPerm="['sys:user:add']">新增</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-input
v-model="queryParams.keywords"
placeholder="用户名/昵称/手机号"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item prop="keywords">
<el-input v-model="queryParams.keywords" placeholder="用户名/昵称/手机号" clearable style="width: 200px"
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item prop="status">
<el-select
v-model="queryParams.status"
placeholder="用户状态"
clearable
style="width: 200px"
>
<el-option label="正常" value="1" />
<el-option label="停用" value="0" />
</el-select>
</el-form-item>
<el-form-item prop="status">
<el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 200px">
<el-option label="正常" value="1" />
<el-option label="停用" value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery">
搜索
</el-button>
<el-button :icon="Refresh" @click="resetQuery"> 重置 </el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-col>
<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
v-loading="loading"
:data="userList"
@selection-change="handleSelectionChange"
>
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column
key="id"
label="用户编号"
align="center"
prop="id"
/>
<el-table-column
key="username"
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 key="id" label="用户编号" align="center" prop="id" />
<el-table-column key="username" label="用户名" align="center" prop="username" />
<el-table-column label="用户昵称" align="center" prop="nickname" />
<el-table-column label="性别" align="center" prop="gender" />
<el-table-column label="部门" align="center" prop="deptName" />
<el-table-column label="手机号码" align="center" prop="mobile" width="120" />
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<el-switch
v-model="scope.row.status"
:inactive-value="0"
:active-value="1"
@change="handleStatusChange(scope.row)"
/>
<el-switch v-model="scope.row.status" :inactive-value="0" :active-value="1"
@change="handleStatusChange(scope.row)" />
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="gmtCreate"
width="180"
>
</el-table-column>
<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
type="primary"
:icon="Edit"
circle
plain
@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>
<el-button type="primary" :icon="Edit" circle plain @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
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
</el-card>
</el-col>
</el-row>
<!-- 添加或修改参数配置对话框 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
width="600px"
append-to-body
@close="cancel"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="80px"
>
<el-dialog :title="dialog.title" 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
:readonly="!!formData.id"
v-model="formData.username"
placeholder="请输入用户名"
/>
<el-input :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">
<tree-select
v-model="formData.deptId"
:options="deptOptions"
placeholder="请选择归属部门"
/>
<el-form-item label="所属部门" prop="deptId">
<tree-select v-model="formData.deptId" :options="deptOptions" placeholder="请选择所属部门" />
</el-form-item>
<el-form-item label="手机号码" prop="mobile">
<el-input
v-model="formData.mobile"
placeholder="请输入手机号码"
maxlength="11"
/>
<el-input v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input
v-model="formData.email"
placeholder="请输入邮箱"
maxlength="50"
/>
<el-input 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
v-for="item in roleOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
<el-option 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 @click="cancel"> 取 消 </el-button>
<el-button type="primary" @click="submitForm">确 定</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元素的引用声明定义
const deptTreeRef = ref(ElTree); // 变量名和DOM的ref属性值一致
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
// DOM元素的引用声明定义 ，变量名和DOM的ref属性值一致
const deptTreeRef = ref(ElTree); // 部门树
const queryFormRef = 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;
resetForm();
cancel()
handleQuery();
});
} else {
addUser(state.formData).then((response: any) => {
ElMessage.success("新增用户成功");
state.dialog.visible = false;
resetForm();
cancel()
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>