批量上传说明书

src/api/newApi/file.js

@@ -6,5 +6,20 @@ export default {
   },
   downLoadFile(params, prop = {}) {
     return axios.get('/fileManager/downloadFile', {params},prop)
+  },
+
+  //上传分片
+  uploadChunks(data) {
+    return axios.post('/fileManager/chunks?_=' + new Date().getTime(), data)
+  },
+  /**
+   * 合并分片
+   */
+  mergeChunks(params) {
+    return axios({
+      url: '/fileManager/merge',
+      method: 'post',
+      params: params
+    })
   }
 };

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

@@ -0,0 +1,183 @@
+<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.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>

src/views/project/patentCollection/index.vue

@@ -70,6 +70,8 @@
                   </el-dropdown>
                 </el-dropdown-item>
 
+                <el-dropdown-item @click.native="handleBatch" >批量上传说明书</el-dropdown-item>
+
                 <el-dropdown-item>
                   <el-dropdown trigger="hover" placement="right-start">
                     <p>
@@ -82,9 +84,6 @@
                   </el-dropdown>
                 </el-dropdown-item>
                 
-                <!-- <el-dropdown-item @click.native="handleBatch"
-                  :disabled="!($permission('/workspace/folder/batchUploadSpecification') && $r(projectId, [1, 2]))">批量上传说明书</el-dropdown-item>
-                <el-dropdown-item> -->
                 <el-dropdown trigger="hover" placement="right-start">
                   <p>
                     导出Excel档<i class="el-icon-arrow-right el-icon--right"></i>
@@ -213,6 +212,8 @@
     <patent-index-setting @submit="submitIndex" :projectId="projectId" ref="patentIndexSetting" />
     <!-- 合并发明人/合并权利人、申请人 -->
     <patentMergeDrawer ref="patentMergeDrawer" :projectId="projectId" @mergeClose="mergeClose"></patentMergeDrawer>
+    <!-- 批量上传说明书 -->
+    <batch-instruction-dialog ref="batchInstructionDialog" />
   </div>
 </template>
 
@@ -234,6 +235,8 @@ import PatentBatchIndexVue from './components/dialog/PatentBatchIndex.vue'
 import patentMergeDrawer from './components/drawer/merge.vue'
 import PatentIndexSetting from "./components/dialog/PatentIndexSetting"
 import PatentKeywordsHighlight from '../components/PatentKeywordsHighlight.vue'
+
+import BatchInstructionDialog from '@/views/project/components/dialog/BatchInstruction.vue'
 export default {
   mixins: [fastSelectPatent],
   components: {
@@ -249,7 +252,8 @@ export default {
     PatentBatchIndexVue,
     patentMergeDrawer,
     PatentIndexSetting,
-    PatentKeywordsHighlight
+    PatentKeywordsHighlight,
+    BatchInstructionDialog
   },
   props: {},
   data() {
@@ -801,6 +805,12 @@ export default {
       }
       this.$commonJS.toImportParent(form,type)
     },
+
+    //批量上传说明书
+    handleBatch(){
+      this.$refs.batchInstructionDialog.open()
+    },
+
     //合并发明人//合并申请人、权利人
     handleMerge(type) {
       let obj = {