xiaoshi_system/src/views/project/components/dialog/BatchInstruction.vue

<template>
  <div>
    <el-dialog class="batch-instruction" title="批量上传说明书" :visible.sync="visible" width="500px" :close-on-click-modal="false" append-to-body destroy-on-close :before-close="close" top="10vh">
      <template v-if="upload">
        <el-alert title="注意" type="warning" show-icon>
          <b>1. 同时只允许一个导入任务进行</b><br>
          <b>2. 在"开始更新专利说明书"步骤前不要关闭此弹出框</b><br>
        </el-alert>
        <div class="record">
          <el-timeline>
            <el-timeline-item v-for="(activity, index) in activityList" :type="activity.code === 1 ? 'primary' : 'danger'" :timestamp="activity.createTime">
              {{ activity.status }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </template>
      <template v-else>
        <div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item label="文档类型" prop="type">
              <el-select v-model="ruleForm.type" class="width_100">
                <el-option label="公开文档" value="1"></el-option>
                <el-option label="授权文档" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="导入文件" required>
              <el-upload class="upload-file" drag action="#" :auto-upload="false" :show-file-list="true" :on-change="onChange">
                <i :class="!ruleForm.file ? 'el-icon-upload' : 'el-icon-refresh'"></i>
                <div class="el-upload__text">将<span style="color: rgb(244, 87, 87);">压缩包</span>文件拖到此处，或<em>点击上传</em><span style="color:  rgb(244, 87, 87);">压缩包</span></div>
                <div class="el-upload__tip" slot="tip"></div>
              </el-upload>
            </el-form-item>
            <el-form-item label="备注内容" prop="remark">
              <el-input v-model="ruleForm.remark" placeholder="请输入备注" type="textarea"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getFileMD5, createFileChunk } from "@/utils/file";
import { renderSize, formatDate } from "@/utils";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      visible: false,
      btnLoading: false,
      ruleForm: {
        type: '1',
        file: null
      },
      rules: {
        type: [{ required: true, message: '请选择文档类型', trigger: 'change' },],
      },
      upload: false,
      activityList: []
    }
  },
  computed: {
    ...mapGetters(['webSocket', 'userinfo'])
  },
  created() {

  },
  methods: {
    renderSize,
    open() {
      this.webSocket.onmessage = (e) => {
        const { code, data, message } = JSON.parse(e.data)
        if (code === 900) {
          const status = `开始更新专利说明书(${data.index + 1}/${data.total})`
          if (this.activityList.length < 5) {
            this.activityList = [{
              status: status,
              code: 1,
              createTime: formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss')
            }]
            this.upload = true
          } else {
            let record = this.activityList[4]
            record.status = status
          }
          if (data.index + 1 === data.total) {
            this.record('专利说明书更新完成')
          }
        } else if (code === 800) {
          this.$message.error(message)
        }
      }
      this.activityList = []
      this.upload = false
      this.visible = true
    },
    close() {
      this.visible = false
      this.ruleForm = {
        type: '1',
        file: null
      }
      this.$emit('close')
    },
    onChange(file, fileList) {
      this.ruleForm.file = file.raw
    },
    record(status, code = 1) {
      this.activityList.push({
        status: status,
        code: code,
        createTime: formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss')
      })
    },
    uploadChunks(fileChunks, md5, index) {
      return new Promise((resolve, reject) => {
        if (index >= fileChunks.length) {
          resolve(true)
        }
        let formData = new FormData()
        formData.append('file', fileChunks[index].file)
        formData.append('md5', md5)
        formData.append('index', index)
        this.$api.uploadChunks(formData).then(async (response) => {
          let record = this.activityList[2]
          const status = `将分片上传至服务器(${index + 1}/${fileChunks.length})`
          if (record) {
            record.status = status
          } else {
            this.record(status)
          }
          resolve(this.uploadChunks(fileChunks, md5, index + 1))
        })
      })
    },
    submit() {
      if (!this.ruleForm.file) {
        this.$message.error('请选择文件')
        return false
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // this.$showImportProgress(
          //   {
          //     data:this.ruleForm
          //   }
          // )
          // return
          this.upload = true
          this.record('等待读取文件MD5')
          getFileMD5(this.ruleForm.file, async (md5) => {
            this.record('文件MD5：' + md5)
            let fileChunks = createFileChunk(this.ruleForm.file)
            await this.uploadChunks(fileChunks, md5, 0)
            this.record('等待服务器合并分片')
            const response = await this.$api.mergeChunks({ md5: md5, fileName: this.ruleForm.file.name })
            let params = {
              url: response.data,
              type: this.ruleForm.type,
              remark: this.ruleForm.remark
            }
            await this.$api.batchUploadPatentInstruction(params)
            this.record('开始更新专利说明书')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.batch-instruction {
  .el-timeline {
    padding: 10px !important;
  }
  .record {
    height: 600px;
    overflow-y: auto;
    margin-top: 10px;
  }
}
</style>