fhbAdmin之异步导入excel ---VS----scm之同步导入Excel

scm之 同步导入excel：

导入之后：

实现思路：先封装一个基本的上传文件的组件：src/components/base/upload.vue

在使用导入excel页面引入并使用该组件：src/components/end/adjuster/detail/accountAdjust.vue

上传导入的公共组件：src/components/base/upload.vue：

<template>
  <label class="btn-file">
    <slot></slot>
    <input type="file" :name="name" :multiple="multiple">
  </label>
</template>
<script>
  import {dataServiceConfig} from 'src/config/index.js'
  import {dotData, alert} from 'assets/scripts/base/functions'
  import store from 'store'
  import {loginUserKey} from 'config/index.js'
  export default {
    name: 'upload',
    props: {
      url: {
        type: String,
        required: true
      },
      multiple: {
        type: Boolean,
        default: true
      },
      name: {
        type: String,
        default: 'file'
      },
      formData: {
        type: Object,
        default () {
          return {}
        }
        // required: true
      },
      acceptFileTypes: {
        type: RegExp,
        default: undefined
      },
      autoUpload: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        fileList: []
      }
    },
    mounted () {
      const ele = this.$el.querySelector('input[type="file"]')
      const token = dotData(store.get(loginUserKey), 'token')
      window.$(ele).fileupload({
        formData: this.formData,
        acceptFileTypes: this.acceptFileTypes,
        url: dataServiceConfig.urlPrefix + '/zuul' + this.url,
        headers: {token: token},
        dropZone: ele,
        dataType: 'json',
        autoUpload: this.autoUpload,
        fail: () => {
          alert('文件上传失败')
        },
        process: (e, data) => {},
        processstart: (e) => {},
        processdone: (e, data) => {
          this.fileList.push(data)
          this.$emit('file', data)
          this.$emit('files', this.fileList)
        },
        processfail: (e, data) => {
          const file = dotData(data, 'files[0]')
          alert('验证失败：' + file.error)
        }
      })
    },
    methods: {
      upload (file) {
        file.submit()
      },
      // 一次点击事件
      addFile ($event) {
        const ele = this.$el.querySelector('input[type="file"]')
        window.$(ele).click()
      }
    }
  }
</script>

二、异步导入excel:

点击下载模板，请求下载模板接口，得到模板excel后修改数据，然后回来添加文件，选中该文件，确认上传：

实现思路：

1、先封装一个公共的上传文件的组件，放在公共组件内： src/components/Upload/Upload.vue：

<template>
  <label class="btn-file">
    <input type="file" :name="name" :multiple="multiple">
    <slot></slot>
  </label>
</template>
<script>
import {dotData, alert} from '@/utils'
import {getToken} from '@/utils/auth'
import {urlPrefix} from '@/config/index.js'

export default {
  name: 'BaseUpload',
  props: {
    url: {
      type: String,
      required: true
    },
    multiple: {
      type: Boolean,
      default: true
    },
    name: {
      type: String,
      default: 'file'
    },
    formData: {
      type: Object,
      required: true
    },
    acceptFileTypes: {
      type: RegExp,
      default: undefined
    },
    autoUpload: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  mounted() {
    let id = 1
    const ele = this.$el.querySelector('input[type="file"]')
    const token = getToken()
    window.$(ele).fileupload({
      formData: this.formData,
      acceptFileTypes: this.acceptFileTypes,
      url: urlPrefix + '/zuul' + this.url,
      headers: {token: token},
      dropZone: ele,
      dataType: 'json',
      autoUpload: this.autoUpload,
      fail: () => {
        alert('文件上传失败')
      },
      processstart: (e) => {
      },
      processdone: (e, data) => {
        data.indexId = id
        this.fileList.push(data)
        this.$emit('file', data) // 上传成功后的回调 及传参给父级
        this.$emit('files', this.fileList)
        id++
      },
      processfail: (e, data) => {
        const file = dotData(data, 'files[0]')
        alert('验证失败：' + file.error)
      }
    })
  },
  methods: {
    upload(file) {
      file.submit()
    }
  }
}
</script>

2、在使用页面：src/views/product/PriceIntervalIndex.vue 引用组件：src/components/ImportExcelModal.vue，ImportExcelModal组件又引用了之前封装的upload公共组件

连接消息服务器，监听服务器下的消息：话题‘fhbClearingInstallExcel’，该登录用户下的这个话题，

当收到消息推送来时，自动去刷新该列表 refresh()

导入模态框：ImportExcelModal

<template>
  <el-dialog center :title="title" :visible.sync="innerVisible">
    <el-row>
      <el-col :span="24">
        <Upload class="pull-left" name="file" :formData="{fileType: fileType}" @file="setFile" :url="url"
                :acceptFileTypes="/(\.|\/)(xls?x?)$/i">
          <el-button size="small" type="primary">添加文件</el-button>
        </Upload>
        <el-button type="danger" size="small" @click.prevent="del" style="margin: 0 10px;">移除</el-button>
        <a class="font-light-blue font-blue" :href="downLoadUrl">下载模板</a>
        <div class="clearfix"></div>
        <slot name="tips">
        </slot>
      </el-col>
      <el-col :span="24">
        <el-table
          border
          ref="elTable"
          max-height="300"
          :data="files"
          @selection-change="selectionChange"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="files.0.name"
            label="文件名">
          </el-table-column>
          <el-table-column
            prop="files.0.size"
            label="文件大小">
            <template slot-scope="scope">
              {{ scope.row['files'][0]['size'] / 1024 | decimalNumFilter }}k
            </template>
          </el-table-column>
          <el-table-column
            prop="process"
            label="上传进度">
            <template slot-scope="scope">
              <span class="text-danger" v-if="scope.row['errorMessage']">{{ scope.row['errorMessage'] }}</span>
              <span v-else>
                {{ (parseInt(scope.row['progress']().loaded / scope.row['progress']().total * 100, 10) - waitNumber) | NaNToZero
                }} %
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click.prevent="submit" type="primary" :loading="loading">确认上传</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Upload from '@/components/Upload/Upload'
import {decimalNumFilter} from '@/filters'
import {confirm} from '@/utils'

export default {
  components: {
    Upload
  },
  filters: {
    decimalNumFilter,
    NaNToZero(val) {
      if (isNaN(val)) {
        val = 0
      }
      if (val < 0) {
        val = 0
      }
      return val
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '导入excel'
    },
    url: {
      type: String,
      default: '/ms-common-excelupload/excel/fileImport'
    },
    downLoadUrl: {
      type: String,
      default: '/ms-mongodb/file/photo/upload'
    },
    fileType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      innerVisible: this.visible,
      files: [],
      checkedRow: [],
      loading: false,
      waitNumber: 10
    }
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.files = []
      this.innerVisible = val
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  methods: {
    setFile(file) {
      this.files.push(file)
    },
    selectionChange(rows) {
      this.checkedRow = rows
    },
    submit() {
      if (Array.isArray(this.files)) {
        this.waitNumber = 10
        this.loading = true
        let pArr = []
        this.files.forEach(v => {
          if (v.hadUpdated) {
            return
          }
          let p = v.submit().then(response => {
            v.hadUpdated = true
            if (!response.success) {
              v.errorMessage = response.error_message || '上传错误'
            } else {
              v.errorMessage = ''
            }
          })
          pArr.push(p)
        })
        Promise.all(pArr).finally(_ => {
          this.loading = false
          this.waitNumber = 0
          let message = '上传成功'
          let type = 'success'
          if (Array.isArray(this.files)) {
            this.files.forEach(v => {
              if (v.errorMessage) {
                message = v.errorMessage
                type = 'warning'
              }
            })
          }
          this.files.length > 0 && confirm(message, undefined, {type})
          this.$emit('refresh', true)
        })
      }
    },
    del() {
      this.checkedRow.forEach(v => {
        for (let k in this.files) {
          if (this.files[k] === v) {
            this.files.splice(k, 1)
          }
        }
      })
    }
  }
}
</script>

fhbAdmin之异步导入excel ---VS----scm之同步导入Excel

猜你喜欢