用户导入

zhouwenxuan

2023-12-21 2603776911f8acfe970f8d79c2f57f2e5c22791d

用户导入

 src/api/user.js

@@ -192,3 +192,24 @@
        data: data
    })
}

//下载区划对照表
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
    })
}

 src/assets/userExample.xlsx

Binary files differ

 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 = []