|
@@ -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>
|