From 2603776911f8acfe970f8d79c2f57f2e5c22791d Mon Sep 17 00:00:00 2001
From: zhouwenxuan <1175765986@qq.com>
Date: 星期四, 21 十二月 2023 14:36:57 +0800
Subject: [PATCH] 用户导入
---
src/api/user.js | 23 +++++++++++
src/views/Admin/userManage.vue | 97 ++++++++++++++++++++++++++++++++++++++++++++++--
src/assets/userExample.xlsx | 0
3 files changed, 115 insertions(+), 5 deletions(-)
diff --git a/src/api/user.js b/src/api/user.js
index a8df775..819c7de 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -191,4 +191,25 @@
method: 'post',
data: data
})
-}
\ No newline at end of file
+}
+
+//下载区划对照表
+export function downLoadArea(){
+ return request({
+ url: '/sys/districtInfo/getDistrictInfoExcel',
+ method: 'get',
+ responseType: 'blob'
+ })
+}
+
+// 导入用户表
+export function importUserFile(data){
+ return request({
+ headers: {
+ "Content-Type": "multipart/form-data",
+ },
+ url: '/account/user/importNew',
+ method: 'post',
+ data: data
+ })
+}
diff --git a/src/assets/userExample.xlsx b/src/assets/userExample.xlsx
new file mode 100644
index 0000000..fa87d22
--- /dev/null
+++ b/src/assets/userExample.xlsx
Binary files differ
diff --git a/src/views/Admin/userManage.vue b/src/views/Admin/userManage.vue
index 5a207b6..756d6e8 100644
--- a/src/views/Admin/userManage.vue
+++ b/src/views/Admin/userManage.vue
@@ -1,10 +1,11 @@
<template>
<div class="inner">
<a-row type="flex" justify="space-between" style="margin-bottom: 20px">
- <a-col :span="4">
+ <a-col :span="6">
<a-button type="primary" @click="editData('add',{})">新增用户</a-button>
+ <a-button type="primary" @click="showDialog = true" style="margin-left: 12px">导入用户表</a-button>
</a-col>
- <a-col :span="20">
+ <a-col :span="18">
<a-row type="flex" justify="end" :gutter="12">
<a-col :span="4">
<a-cascader :options="areaData" v-model="areaVal" placeholder="行政规划" expandTrigger="hover" :fieldNames="fieldNames" changeOnSelect @change="onChange" style="width: 100%"/>
@@ -71,16 +72,34 @@
</div>
<user-mod ref="userMod" :unitType="unittype" @refresh="getUserList"></user-mod>
<pwd-mod ref="pwdMod" @refresh="getUserList"></pwd-mod>
+ <a-modal v-model="showDialog" title="导入用户" ok-text="导入用户" :confirmLoading="uploadLoading" cancel-text="取消" @ok="uploadFile" centered :afterClose="clearMod">
+ <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
+ <a-form-model-item label="用户表格模板" extra="导入用户须依据此模板">
+ <a-button type="primary" @click="downloadFile">下载模板</a-button>
+ </a-form-model-item>
+ <a-form-model-item label="区划对照表">
+ <a-button type="primary" @click="downloadAreaFile">下载区划表</a-button>
+ </a-form-model-item>
+ <a-form-model-item label="用户表格文件">
+ <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload" accept=".xlsx,.xls">
+ <a-button> <a-icon type="upload"/> 点击上传 </a-button>
+ </a-upload>
+ </a-form-model-item>
+ </a-form-model>
+ </a-modal>
</div>
</template>
<script>
-import {getUser,delUser} from '@/api/user'
+import {getUser, delUser, importFile, downLoadArea, importUserFile} from '@/api/user'
import userMod from "@/views/Admin/components/userMod"
import pwdMod from "@/views/Admin/components/pwdMod";
import {getDistrictInfo, loginOut} from "@/api/login";
import {getUserInfo, Session} from "@/util/storage";
import Cookies from "js-cookie";
+import userExampleFile from "@/assets/userExample.xlsx";
+import exampleFile from "@/assets/example.xlsx";
+import axios from "axios";
export default {
name: 'user',
components: {
@@ -166,7 +185,14 @@
label: 'name',
value: 'id',
children: 'children'
- }
+ },
+ userExampleFile,
+ labelCol: { span: 8 },
+ wrapperCol: { span: 14 },
+ fileList: [],
+ delList: [],
+ showDialog: false,
+ uploadLoading: false,
}
},
created() {
@@ -231,6 +257,69 @@
});
},
+ handleRemove(file) {
+ const index = this.fileList.indexOf(file)
+ const newFileList = this.fileList.slice()
+ newFileList.splice(index, 1)
+ this.fileList = newFileList;
+ },
+ beforeUpload(file) {
+ this.fileList = [...this.fileList, file]
+ this.fileList = this.fileList.slice(-1)
+ return false;
+ },
+
+ async uploadFile(){
+ if(this.fileList.length == 0){
+ this.$message.warning('请先上传用户表格');
+ return
+ }else{
+ this.uploadLoading = true
+ const { fileList } = this;
+ const formData = new FormData();
+ fileList.forEach((file) => {
+ formData.append('file', file)
+ })
+ const res = await importUserFile(formData)
+ if(res.data.code == 100){
+ this.$message.success(res.data.msg,2);
+ this.fileList = []
+ this.uploadLoading = false
+ this.showDialog = false
+ this.getUserList()
+ }else{
+ this.$message.warning(res.data.msg);
+ this.uploadLoading = false
+ }
+ }
+ },
+
+ downloadFile(){
+ const link = document.createElement('a')
+ link.href = userExampleFile
+ link.target = '_blank'
+ link.download = '用户导入模版(普通员工版).xlsx'
+ link.click()
+ },
+ async downloadAreaFile(){
+ const t = this
+ const res = await downLoadArea();
+ if (res) {
+ const link = document.createElement('a')
+ let blob = new Blob([res.data],{type: res.data.type})
+ link.style.display = "none";
+ link.href = URL.createObjectURL(blob); // 创建URL
+ link.setAttribute("download", '区划对照表');
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ } else {
+ this.$message.error('获取文件失败')
+ }
+ },
+ clearMod(){
+ this.fileList = []
+ },
resetSearch(){
const t = this
t.areaVal = []
--
Gitblit v1.9.2