批量导入说明书

src/main.js

@@ -33,8 +33,13 @@ Vue.prototype.$permission = permission
 
 import eventVisual from "@/views/event/components/details/showDialog";
 Vue.prototype.$eventVisual = eventVisual;
+
 import showTiShi from "./utils/model/tishi/index";
 Vue.prototype.$showTiShi = showTiShi;
+
+import ImportProgress from "./utils/model/ImportProgress/index";
+Vue.prototype.$showImportProgress = ImportProgress;
+
 import showPermissionDialog from "./utils/model/noPermission/index";
 Vue.prototype.$showPermissionDialog = showPermissionDialog;
 

src/utils/model/ImportProgress/index.js

@@ -0,0 +1,51 @@
+import showImportProgress from './index.vue'
+import Vue from "vue"; // 导入vue
+ 
+// 将组件作为参数，使用vue提供的全局方法，创建一个构造函数
+let DrawerConstructor = Vue.extend(showImportProgress);
+ 
+let instance;
+ 
+/**
+ * 打开查看事件流程详情
+ * @param {Object} value 
+ * @example
+ * {Scenario:[],eventId:'',eventName:''}
+ * @returns 
+ */
+const ImportProgress = function({data,position,duration}) {
+    return new Promise((resolve, reject) => {
+        // 初始化实例，此时instance是一个组件实例，但未初始化未完成,这里的变量和方法优先组件内的变量和方法
+        instance = new DrawerConstructor({
+            data: function() {
+                return {
+                    form:data || null,
+                    position:position||'right',
+                    duration:duration||0
+                };
+            },
+            methods: {
+                onSelect: res => {
+                    unmount();
+                    resolve(res);
+                },
+                handleClose: () => {
+                    unmount();
+                    // reject();
+                }
+            }
+        });
+        // 卸载组件
+        const unmount = () => {
+            instance.visible = false;
+        };
+        // 完成初始化
+        instance.$mount();
+       
+        document.body.appendChild(instance.$el);
+        
+        instance.visible = true;
+    });
+};
+ 
+export default ImportProgress;

src/utils/model/ImportProgress/index.vue

@@ -0,0 +1,231 @@
+<template>
+  <div ref="myImportProgress" :class="[ 'importProgress',position,'el-notification']" :style="{'top':top,'z-index':zIndex}" v-if="visible">
+    <div class="icon">
+        <img class="img" src="@/assets/rar.png" alt="">
+    </div>
+    <div class="line"></div>
+    <div class="message">
+        <div class="name">{{ file.name }}</div>
+        <div class="progress">
+            <div class="progress_title">{{recordMessage}}</div>
+            <div>
+                <el-progress style="width:100%" :percentage="percentage"></el-progress>
+            </div>
+        </div>
+        <div class="btn">
+            <el-button size="mini" v-if="isStop" @click="stop">暂停</el-button>
+            <el-button size="mini" v-else @click="keepOn">继续</el-button>
+            <el-button size="mini" @click="cancel">取消</el-button>
+        </div>
+    </div>
+    <div class="close">
+        <i class="el-icon-close" @click="del"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getFileMD5, createFileChunk } from "@/utils/file";
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {
+        duration:0,
+        form:null,
+        position:'right',
+        visible:false,
+        percentage:0,
+        top:'16px',
+        zIndex:'2200',
+        md5:null,
+        isStop:false,
+        file:{},
+        recordMessage:'',
+        len:0,
+        currentIndex:0
+    };
+  },
+  watch: {
+    visible(val){
+        if(val){
+            this.getStyle()
+            this.init()
+            if(this.duration != 0){
+                this.timedShutdown()
+            }
+        }
+    },
+    percentage(val){
+        if(val == 100){
+            this.del()
+        }
+    },
+  },
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {
+    init(){
+        console.log(this.form)
+        if(!this.form){
+            return
+        }
+        if(!this.form.file){
+            return
+        }
+        this.file = {
+            name:this.form.file.name
+        }
+        // this.record('等待读取文件MD5')
+        this.recordMessage = '等待读取文件MD5'
+        let fileChunks = createFileChunk(this.form.file)
+        this.len = fileChunks.length + 3
+        
+          getFileMD5(this.form.file, async (md5) => {
+            this.record('文件MD5：' + md5)
+            
+            await this.uploadChunks(fileChunks, md5, 0)
+            this.record('等待服务器合并分片')
+            const response = await this.$api.mergeChunks({ md5: md5, fileName: this.form.file.name })
+            let params = {
+              url: response.data,
+              type: this.form.type,
+              remark: this.form.remark
+            }
+            await this.$api.batchUploadPatentInstruction(params)
+            this.record('开始更新专利说明书')
+          })
+    },
+    record(status, ) {
+      this.recordMessage = status
+      this.currentIndex += 1
+      this.percentage =parseInt( this.currentIndex / this.len * 100)
+    },
+    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) => {
+            const status = `将分片上传至服务器(${index + 1}/${fileChunks.length})`
+            this.record(status)
+          resolve(this.uploadChunks(fileChunks, md5, index + 1))
+        })
+      })
+    },
+    getStyle(){
+        var doms = document.getElementsByClassName('el-notification')
+        var len = doms.length
+        if(len == 0){
+            this.top = '16px'
+            this.zIndex = '2200'
+        }else{
+            var dom = doms[len - 1]
+            var top = dom.offsetTop
+            var height = dom.offsetHeight
+            var zIndex = dom.style.zIndex
+            this.top = top + height + 16 + 'px'
+            this.zIndex = Number(zIndex) + 10
+        }
+    },
+    del(){
+        var current = this.$refs.myImportProgress
+        var offsetTop = current.offsetTop
+        var height =  current.offsetHeight
+        this.visible = false
+        var doms = document.getElementsByClassName('el-notification')
+        for(var i = 0;i<doms.length;i++){
+            if(doms[i].offsetTop <= offsetTop){
+                continue
+            }
+            doms[i].style.top = doms[i].offsetTop - height - 16 + 'px'
+            doms[i].style.zIndex = Number(doms[i].style.zIndex) - 10
+        }
+    },
+    //暂停
+    stop(){
+        this.isStop = true
+    },
+    //继续
+    keepOn(){
+        this.isStop = false
+    },
+    //取消
+    cancel(){
+
+    },
+    timedShutdown(){
+        setTimeout(function() {
+            this.del()
+        }, this.duration);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+    .importProgress{
+        padding: 0 10px;
+        width: 330px;
+        height: auto;
+        border-radius: 8px;
+        border: 1px solid #ebeef5;
+        position: fixed;
+        background-color: #fff;
+        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+        transition: opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s;
+        overflow: hidden;
+        display: flex;
+        // align-items: center;
+        .close{
+            padding-top: 10px;
+            width: 20px;
+            height: 100%;
+        }
+        .icon{
+            padding-top: 10px;
+            width: 50px;
+            .img{
+                width: 30px;
+                height: 30px;
+                margin-left: 10px;
+            }
+        }
+        .line{
+            width: 1px;
+            height: auto;
+            background: #d8d8d8;
+        }
+        .message{
+            width: 260px;
+            padding: 10px ;
+            .name{
+                font-size: 14px;
+                width: 100%;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow:ellipsis;
+            }
+            .progress_title{
+                color: rgb(123 126 130);
+                font-size: 12px;
+                margin-top: 6px;
+                min-height: 0;
+                overflow: hidden;
+                text-decoration: none;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+        .btn{
+            text-align: left;
+        }
+    }
+    .right{
+        right: 16px;
+    }
+</style>

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

@@ -146,6 +146,12 @@ export default {
       }
       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) => {