supervise/base-ui/src/views/kucun/kcxxcx/index.vue

<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>导入库存信息查询</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="resetCache">缓存数据重置(监管商品、仓店索引、供应商索引)</el-button>
      </div>
      <div>
        <el-upload
          ref="upload"
          class="upload-demo"
          :action="updateAction"
          :on-change="handleChange"
          :on-progress="handleProgress"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :file-list="fileList"
          :auto-upload="false"
          :multiple="false"
          :limit="1"
        >
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">上传 《库存信息查询.xlsx》文件</div>
        </el-upload>
      </div>
      <div>
        <h3>文件上传结果</h3>
        <el-card class="box-card">
          <div>{{ uploadResultMesssage }}</div>
        </el-card>
      </div>
      <div>
        <h3>库存汇总数据</h3>
        <el-card class="box-card">
          <div>{{ hzResultMesssage }}</div>
          <div>
            <el-button :disabled="!hzFilePath" size="small" type="primary" @click="doDownloadHz">下载汇总文件</el-button>
            <el-button :disabled="!ychzFilePath" size="small" type="primary" @click="doDownloadHzYc">下载烟草汇总文件</el-button>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import { kchz, kchzyc, resetAllCache } from '@/api/kucun/kucun'
export default {
  name: 'KucunKcxxcxIndex',
  // components: {  },
  data() {
    return {
      updateAction: process.env.VUE_APP_BASE_API + '/kucun/uploadGdData',
      name: '库存数据导入',
      fileList: [],
      uploadResultMesssage: '',
      hzResultMesssage: '',
      hzFilePath: '',
      ychzFilePath: '',
      fullscreenloading: null
    }
  },
  created() {
    // 初始化变量
    this.init()
    // 加载列表
    // this.getList()
  },
  methods: {
    init() {},
    getList() {},
    // 返回
    handleReturn() {
      this.$router.go(-1)
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log('handlePreview', file)
    },
    handleChange(file) {
      console.log(this.fileList)
    },
    handleProgress(event, file, fileList) {
      // this.progressFlag = true; // 显示进度条
      // this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
      // if (this.loadProgress >= 100) {
      //     this.loadProgress = 100
      //     setTimeout( () => {this.progressFlag = false}, 1000) // 一秒后关闭进度条
      // }
      const _this = this
      this.fullscreenloading = this.$loading({
        lock: true,
        text: '文件正在上传',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      console.log('111', event.percent)
      if (event.percent >= 100) {
        _this.fullscreenloading.text = '上传完成，正在导入数据库'
      }
    },
    handleSuccess(resp, file, fileList) {
      // if (this.fullscreenloading) this.fullscreenloading.close()
      // this.fullscreenloading = null
      console.log('222', resp)
      const rdata = resp.data
      const _this = this
      _this.fullscreenloading.text = '数据导入完成，进行汇总'
      _this.uploadResultMesssage = '共导入数据：' + rdata.allNum + ' 条；符合监管条件的数据：' + rdata.validNum + ' 条；用时：' + rdata.durations + ' 毫秒。'

      kchz()
        .then(res => {
          if (this.fullscreenloading) this.fullscreenloading.close()
          this.fullscreenloading = null
          console.log('333', res)
          _this.hzFilePath = res.data
        })
        .catch(e => {
          if (this.fullscreenloading) this.fullscreenloading.close()
          this.fullscreenloading = null
        })
      kchzyc()
        .then(res => {
          if (this.fullscreenloading) this.fullscreenloading.close()
          this.fullscreenloading = null
          console.log('444', res)
          _this.ychzFilePath = res.data
        })
        .catch(e => {
          if (this.fullscreenloading) this.fullscreenloading.close()
          this.fullscreenloading = null
        })
    },
    doDownloadHz() {
      window.open(this.hzFilePath, '_blank')
      //   downloadhz({ filepath: this.hzFilePath })
      //     .then(res => {
      //       console.log('xxx', res)
      //       const blob = new Blob([res.data])
      //       const url = window.URL.createObjectURL(blob) // 创建 url 并指向 blob
      //       const a = document.createElement('a')
      //       a.href = url
      //       a.download = '导出数据.xlsx'
      //       a.click()
      //       window.URL.revokeObjectURL(url) // 释放该 ur
      //     })
      //     .catch(e => {
      //       console.log(e)
      //     })
    },
    doDownloadHzYc() {
      window.open(this.ychzFilePath, '_blank')
    },
    resetCache() {
      resetAllCache()
        .then()(res => {
          this.$message({
            message: '缓存数据已重置！',
            type: 'success'
          })
        })
        .catch(e => {
          console.log('resetAllCache', e)
        })
    }
  }
}
</script>
<style scoped>
.wenjiantit {
  font-size: 16px;
  font-weight: bold;
  margin: 25px 0 10px 0;
}
.forminfo {
  margin: 0;
  padding: 0;
}
.listcon {
  height: calc(100vh - 250px);
  overflow-y: auto;
  overflow-x: hidden;
}
</style>