You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
155 lines
4.0 KiB
155 lines
4.0 KiB
3 years ago
|
<!-- 上传组件 支持分片上传-->
|
||
|
<template>
|
||
|
<div>
|
||
|
<div v-if="drag">
|
||
|
<el-button v-if="fileName" type="warning" icon="el-icon-view" size="medium" style="margin: 5px auto;" @click="common.viewRawRecords(renwuId)">
|
||
|
预览{{ title }}
|
||
|
</el-button>
|
||
|
<el-upload
|
||
|
action=""
|
||
|
:accept="type === 'rawrecords' ? 'application/pdf' : 'application/msword'"
|
||
|
:http-request="handleUploadRequest"
|
||
|
:show-file-list="false"
|
||
|
class="upload-demo"
|
||
|
drag
|
||
|
>
|
||
|
<el-alert v-if="fileName" type="success" :closable="false" center>
|
||
|
<template slot="title">
|
||
|
<div>
|
||
|
<svg-icon icon-class="pdf" style="width: 67px;height: 50px;margin: 40px 0 16px;" /><br>
|
||
|
将文件拖到此处,或<em>点击上传</em><br>
|
||
|
{{ title }}:{{ fileName }}<br><br>
|
||
|
</div>
|
||
|
</template>
|
||
|
</el-alert>
|
||
|
<el-alert v-else type="warning" :closable="false" center>
|
||
|
<template slot="title">
|
||
|
<div style="align: center">
|
||
|
<i class="el-icon-upload" /><br>
|
||
|
将文件拖到此处,或<em>点击上传</em><br>
|
||
|
{{ title }}:未上传<br><br>
|
||
|
</div>
|
||
|
</template>
|
||
|
</el-alert>
|
||
|
</el-upload>
|
||
|
</div>
|
||
|
<el-upload
|
||
|
v-else
|
||
|
action=""
|
||
|
accept="application/pdf"
|
||
|
:http-request="handleUploadRequest"
|
||
|
:show-file-list="false"
|
||
|
>
|
||
|
<el-button :title="'上传' + title" circle size="medium" type="primary" icon="el-icon-upload" />
|
||
|
</el-upload>
|
||
|
<el-dialog title="上传进度" width="20%" :visible.sync="progressDialog" :modal="false" :show-close="false" :close-on-click-modal="false">
|
||
|
<el-progress type="circle" :percentage="progressNum" />
|
||
|
</el-dialog>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import { uploadByPieces } from '../../utils/sliceFile'
|
||
|
export default {
|
||
|
name: 'SliceUpload',
|
||
|
props: {
|
||
|
renwuId: {
|
||
|
required: true,
|
||
|
type: Number
|
||
|
},
|
||
|
drag: {
|
||
|
type: Boolean,
|
||
|
default: false
|
||
|
},
|
||
|
type: {
|
||
|
type: String,
|
||
|
default: 'rawrecords'
|
||
|
}
|
||
|
},
|
||
|
data() {
|
||
|
return {
|
||
|
fileName: '',
|
||
|
fileList: [],
|
||
|
progressNum: 0,
|
||
|
progressDialog: false,
|
||
|
loading: {},
|
||
|
title: ''
|
||
|
}
|
||
|
},
|
||
|
watch: {
|
||
|
fileList() {
|
||
|
this.$nextTick(() => {
|
||
|
this.dealUpload()
|
||
|
})
|
||
|
}
|
||
|
},
|
||
|
created() {
|
||
|
switch (this.type) {
|
||
|
case 'rawrecords':
|
||
|
this.title = '原始资料'
|
||
|
break
|
||
|
case 'ylgdyjfj':
|
||
|
this.title = '附件'
|
||
|
break
|
||
|
default:
|
||
|
break
|
||
|
}
|
||
|
if (this.drag && this.renwuId) {
|
||
|
// 根据路径存在与否判断是否存在原始资料pdf文件
|
||
|
this.preview({
|
||
|
url: '/download/pullRawRecordsPath',
|
||
|
method: 'get',
|
||
|
params: { renwuId: this.renwuId }
|
||
|
}).then(data => {
|
||
|
if (data) {
|
||
|
this.fileName = data.fileName
|
||
|
}
|
||
|
})
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
// 上传请求
|
||
|
handleUploadRequest(back) {
|
||
|
this.loading = this.$loading({
|
||
|
lock: true,
|
||
|
text: 'loading',
|
||
|
spinner: '',
|
||
|
background: 'rgba(0, 0, 0, 0.1)'
|
||
|
})
|
||
|
this.fileList.push(back.file)
|
||
|
},
|
||
|
// 处理上传文件
|
||
|
dealUpload() {
|
||
|
if (this.fileList.length === 0) return
|
||
|
this.progressDialog = true
|
||
|
const that = this
|
||
|
uploadByPieces({
|
||
|
files: this.fileList,
|
||
|
pieceSize: 5,
|
||
|
chunkUrl: '/upload/chunkFile',
|
||
|
fileUrl: '/upload/mergeFile',
|
||
|
renwuId: this.renwuId,
|
||
|
type: this.type,
|
||
|
progress: (num) => {
|
||
|
that.progressNum = num
|
||
|
},
|
||
|
success() {
|
||
|
that.$message.success('上传成功。')
|
||
|
that.progressDialog = false
|
||
|
that.progressNum = 0
|
||
|
that.fileName = that.fileList[0].name
|
||
|
that.fileList = []
|
||
|
that.loading.close()
|
||
|
},
|
||
|
error() {
|
||
|
that.progressDialog = false
|
||
|
that.progressNum = 0
|
||
|
that.fileList = []
|
||
|
that.loading.close()
|
||
|
}
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|