| | |
| | | <div class="el-upload__tip"> |
| | | {{ readonly ? '仅可预览、下载附件' : ((currentId || deferUpload) ? tip : emptyTip) }} |
| | | </div> |
| | | <el-upload v-if="!readonly" :action="uploadAction" :headers="uploadHeader" multiple |
| | | <el-upload v-if="!readonly" :action="uploadAction" :headers="uploadHeader" multiple :accept="accept" |
| | | :show-file-list="false" :disabled="!canUpload" :auto-upload="!deferUpload" |
| | | :on-change="handleFileChange" :on-success="handleUploadSuccess" |
| | | :on-error="handleUploadError"> |
| | |
| | | <el-table-column label="操作" width="170"> |
| | | <template #default="scope"> |
| | | <template v-if="scope.row.pending"> |
| | | <el-button link type="primary" @click="previewPending(scope.row)">预览</el-button> |
| | | <el-button link type="danger" @click="removePending(scope.row)">删除</el-button> |
| | | </template> |
| | | <template v-else> |
| | |
| | | <el-dialog v-else :title="dialogTitle" v-model="visible" width="760px" append-to-body @close="$emit('closed')"> |
| | | <div class="attachment-header"> |
| | | <div class="el-upload__tip">{{ readonly ? '仅可预览、下载附件' : tip }}</div> |
| | | <el-upload v-if="!readonly" :action="uploadAction" :headers="uploadHeader" multiple |
| | | <el-upload v-if="!readonly" :action="uploadAction" :headers="uploadHeader" multiple :accept="accept" |
| | | :show-file-list="false" :on-success="handleUploadSuccess" :on-error="handleUploadError"> |
| | | <el-button size="small" type="primary">上传附件</el-button> |
| | | </el-upload> |
| | |
| | | <el-button @click="visible = false">关 闭</el-button> |
| | | </template> |
| | | </el-dialog> |
| | | <el-dialog title="预览附件" v-model="previewVisible" fullscreen append-to-body> |
| | | <el-dialog title="预览附件" v-model="previewVisible" fullscreen append-to-body @close="releasePreviewBlob"> |
| | | <file-preview v-if="previewVisible" :file-url="previewUrl" :current-file="previewRow" /> |
| | | </el-dialog> |
| | | </div> |
| | |
| | | deferUpload: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | // 允许选择的文件类型,如 .jpg,.png;为空不限制 |
| | | accept: { |
| | | type: String, |
| | | default: '' |
| | | } |
| | | }, |
| | | watch: { |
| | |
| | | currentRow: {}, |
| | | previewVisible: false, |
| | | previewRow: {}, |
| | | previewUrl: '' |
| | | previewUrl: '', |
| | | previewBlobUrl: '' |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | uploadAction() { |
| | | return this.javaApi + this.uploadUrl + '?' + this.idParam + '=' + this.currentId |
| | | } |
| | | }, |
| | | beforeUnmount() { |
| | | this.releasePreviewBlob() |
| | | }, |
| | | methods: { |
| | | // 打开附件管理弹窗 |
| | |
| | | this.loadList() |
| | | }) |
| | | }, |
| | | // 待上传文件用本地临时地址预览,提交后再走正式地址 |
| | | previewPending(row) { |
| | | const item = this.pendingFiles.find(pending => pending.uid === row.uid) |
| | | if (!item) { |
| | | return |
| | | } |
| | | this.releasePreviewBlob() |
| | | this.previewBlobUrl = URL.createObjectURL(item.raw) |
| | | this.previewRow = { fileName: item.fileName, fileUrl: this.previewBlobUrl } |
| | | this.previewUrl = this.previewBlobUrl |
| | | this.previewVisible = true |
| | | }, |
| | | releasePreviewBlob() { |
| | | if (this.previewBlobUrl) { |
| | | URL.revokeObjectURL(this.previewBlobUrl) |
| | | this.previewBlobUrl = '' |
| | | } |
| | | }, |
| | | previewFile(row) { |
| | | this.releasePreviewBlob() |
| | | this.previewRow = row |
| | | this.previewUrl = this.fullUrl(row.fileUrl) |
| | | this.previewVisible = true |