eladmin 批量导入实现方法

批量导入就几步就可以实现我们直接开始这是页面显示一个批量导入得按钮

 <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <el-button
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-upload"
        @click="dialogVisible = true">批量导入</el-button>
      <el-dialog title="导入表单" :visible.sync="dialogVisible">
        <div class="app-container">
          <div>
            <el-button
              class="filter-item"
              size="mini"
              type="primary"
              icon="el-icon-download"
              @click="downloadExceltoLocalFile()">下载模板</el-button>
          </div>
          <upload-excel-component
            :on-success="handleSuccess"
            :before-upload="beforeUpload"/>
          <el-table
            max-height="300"
            :data="tableData"
            border
            highlight-current-row
            style="width: 100%; margin-top: 20px">
            <el-table-column
              v-for="item of tableHeader"
              :key="item"
              :prop="item"
              :label="item">
            </el-table-column>
          </el-table>
          <el-divider />
          <el-button
            style="float: right"
            type="primary"
            :loading="loading"
            @click="submitExcel()">确认并导入</el-button>
        </div>
      </el-dialog>

因为我是用的原有的组件在下面引入

import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import { downloadFile } from '@/utils/index'

还有这个位置不要忘了哦

 data() {
    return {
      tableData: [],
      formdata: [],
      tableHeader: [],
      dialogVisible: false,
      loading: false,
      files: [],
      deptUsersAll: [],

这个位置是因为我们批量上传得时候需要与我们系统人员做对比所以下面这个可以看看就行了获取全部得人员

downloadExceltoLocalFile  是模板下载得方法

beforeUpload   是在上传是做一个简单得限制

submitExcel    就是上传来的数据了   因为上传过来的对象属性是汉字，所以要根据汉字去对应转换为数据库字段    具体得上传后   就是你可以再去优化一下

  downloadExceltoLocalFile() {
      crudCustomer
        .downloadExcel()
        .then((res) => {
          downloadFile(res, '模板', 'xlsx')
        })
        .catch((err) => {
          this.$message.error = err.message
        })
    },
    // 导入功能
    beforeUpload(file) {
      this.files = file
      console.log(this.files)
      const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      const isLt5M = file.size / 1024 / 1024 < 50
      if (extension !== 'xlsx' && extension !== 'xls') {
        this.$message({
          message: '只能上传Excel（即后缀是.xlsx或者.xls)的文件.',
          type: 'warning'
        })
        return false
      }
      if (isLt5M) {
        return true
      }

      this.$message({
        message: '请不要上传大于50MB的文件.',
        type: 'warning'
      })
      return false
    },
    handleSuccess({ header, results }) {
      this.tableData = results
      this.tableHeader = header
    },
    submitExcel() {
      // 组装数据
      this.loading = true
      const nape = []
      // 遍历文件将对象得属性转换为数据库对应字段
      for (let i = 0; i < this.tableData.length; i++) {
        const res = JSON.parse(
          JSON.stringify(this.tableData[i])
            .replace(/客户姓名/g, 'username')
            .replace(/意向等级/g, 'intentionLevel')
            .replace(/客户状态/g, 'customerState')
            .replace(/手机号/g, 'mobile')
            .replace(/微信/g, 'emailAddress')
            .replace(/QQ/g, 'qq')
            .replace(/微信/g, 'wexin')
            .replace(/感兴趣的项目/g, 'interestItem')
            .replace(/客户等级/g, 'customerLevel')
            .replace(/单位/g, 'companyName')
            .replace(/科室/g, 'officeName')
            .replace(/联系地址/g, 'contactAddress')
            .replace(/职位/g, 'job')
            .replace(/课题经费/g, 'projectFunds')
            .replace(/业务人员/g, 'creatorId')
            .replace(/跟进人/g, 'followerId')
            .replace(/客户来源/g, 'customerSource')
            .replace(/备注/g, 'remark')
        )
        nape.push(res)
      }
      // this.deptUsersAll 为公司全部用户，表中存放得是id    表格中上传得是名字  所以根据表格名字  查询用户，将名字转换为   id
      for (let i = 0; i < nape.length; i++) {
        for (let j = 0; j < this.deptUsersAll.length; j++) {
          if (nape[i].creatorId === this.deptUsersAll[j].nickName) {
            nape[i].creatorId = this.deptUsersAll[j].id
          }
          if (nape[i].followerId === this.deptUsersAll[j].nickName) {
            nape[i].followerId = this.deptUsersAll[j].id
          }
        }
      }
      // 表格  意向等级  字典项
      for (let i = 0; i < nape.length; i++) {
        for (let j = 2; j < Object.keys(this.dict.label.intention_level).length; j++) {
          if (nape[i].intentionLevel === this.dict.label.intention_level[j]) {
            nape[i].intentionLevel = j
          }
        }
      }
      // 表格  客户状态  字典项
      for (let i = 0; i < nape.length; i++) {
        for (let j = 2; j < Object.keys(this.dict.label.customer_state).length; j++) {
          if (nape[i].customerState === this.dict.label.customer_state[j]) {
            nape[i].customerState = j
          }
        }
      }
      // 表格  感兴趣的项目  字典项
      for (let i = 0; i < nape.length; i++) {
        for (let j = 2; j < Object.keys(this.dict.label.interest_item).length; j++) {
          if (nape[i].interestItem === this.dict.label.interest_item[j]) {
            nape[i].interestItem = j
          }
        }
      }
      // 表格  客户等级  字典项
      for (let i = 0; i < nape.length; i++) {
        for (let j = 2; j < Object.keys(this.dict.label.customer_level).length; j++) {
          if (nape[i].customerLevel === this.dict.label.customer_level[j]) {
            nape[i].customerLevel = j
          }
        }
      }
      // 表格  职位  字典项
      for (let i = 0; i < nape.length; i++) {
        for (let j = 2; j < Object.keys(this.dict.label.job).length; j++) {
          if (nape[i].job === this.dict.label.job[j]) {
            nape[i].job = j
          }
        }
      }
      // 表格  课题经费  字典项
      for (let i = 0; i < nape.length; i++) {
        for (let j = 2; j < Object.keys(this.dict.label.project_funds).length; j++) {
          if (nape[i].projectFunds === this.dict.label.project_funds[j]) {
            nape[i].projectFunds = j
          }
        }
      }
      crudCustomer.importMaterial(nape).then(res => {
        if (res === 1) {
          this.$notify({
            title: '成功',
            message: '导入成功',
            type: 'success'
          })
          this.loading = false
          this.dialogVisible = false
        } else {
          this.$notify.error({
            title: '提示',
            message: '导入失败'
          })
        }
      })

crudCustomer.importMaterial（）这个就是你的api去请求你的后台将参数带过去

api

export function downloadExcel() {
  return request({
    url: 'customer/userAll',
    method: 'get'
  })
}

export function importMaterial(data) {
  return request({
    url: 'customer/importExcel',
    method: 'post',
    data
  })
}

export default { add, edit, del, get, getCustomers, downloadExcel, importMaterial }

后端接参因为是我传得是list 所以用postMaping最好后面得@RequestBody list<CustomerDTO> dto 这就是正常接参得方式也不用说啥下面我没有用单独得导入权限就是用了新增得权限 add么

  //客户信息导入
    @PostMapping("importExcel")
    @PreAuthorize("@el.check('customer:add')")
    public ResultWrapper<Long> importExcel( @RequestBody List<CustomerDTO> dto) {
       return ResultWrapper.ok(customerService.importExcel(dto));
    }

差不多就是这些了有什么其他问题也可以留言我们一起讨论一下

eladmin 批量导入实现方法

猜你喜欢