update 上传组件

This commit is contained in:
lb 2023-02-13 09:58:31 +08:00
parent 39bf107fbe
commit 2dc7550754
2 changed files with 39 additions and 9 deletions

View File

@ -8,7 +8,7 @@
</span> </span>
<div class="h-4 space-x-2"> <div class="h-4 space-x-2">
<button class="el-icon-download color-blue" @click="handleDownload(file)" title="点击下载"></button> <button class="el-icon-download color-blue" @click="handleDownload(file)" title="点击下载"></button>
<button class="el-icon-delete color-red" @click="handleDelete(file)" title="点击删除"></button> <button class="el-icon-delete color-red" v-if="!detailMode" @click="handleDelete(file)" title="点击删除"></button>
</div> </div>
</li> </li>
<li v-if="filteredList.length === 0"></li> <li v-if="filteredList.length === 0"></li>
@ -51,6 +51,10 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
detailMode: {
type: Boolean,
default: false
}
}, },
data() { data() {
return { return {

View File

@ -11,15 +11,20 @@
> >
<el-button :disabled="disabled" size="small" type="primary">{{ buttonText }}</el-button> <el-button :disabled="disabled" size="small" type="primary">{{ buttonText }}</el-button>
<div slot="tip" class="el-upload__tip"> <div slot="tip" class="el-upload__tip">
<span key="noupload">
{{ tips.hint }}
</span>
</div>
<!-- <div slot="tip" class="el-upload__tip">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<span key="noupload" v-if="!showMsg"> <span key="noupload" v-if="!showMsg">
{{ tips.hint }} {{ tips.hint }}
</span> </span>
<span key="uploaded" v-else class="success-msg"> {{ tips.success }} </span> <span key="uploaded" v-else class="success-msg"> {{ tips.success }} </span>
</transition> </transition>
</div> </div> -->
</el-upload> </el-upload>
<FileList :file-list="uploadedFileList" @delete-a-file="handleRemoveFile" style="display: inline-block; position: absolute; top: 0; left: 72px" /> <FileList :detail-mode="disabled" :file-list="uploadedFileList" @delete-a-file="handleRemoveFile" style="display: inline-block; position: absolute; top: 0; left: 72px" />
</div> </div>
</template> </template>
@ -81,8 +86,21 @@ export default {
}, },
methods: { methods: {
handleRemoveFile(fileId) { handleRemoveFile(fileId) {
console.log("[UploadBtn] handleRemoveFile", fileId);
this.$confirm("确定删除此文件?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.uploadedFileList = this.uploadedFileList.filter((file) => file.id.toString() !== fileId.toString()); this.uploadedFileList = this.uploadedFileList.filter((file) => file.id.toString() !== fileId.toString());
this.$emit("update-file-list", this.uploadedFileList); this.$emit("update-file-list", this.uploadedFileList);
this.$message({
type: "success",
message: "删除成功!",
});
})
.catch(() => {});
}, },
handleUploadSuccess(response, file, fileList) { handleUploadSuccess(response, file, fileList) {
@ -96,12 +114,20 @@ export default {
url: uploadedFile.fileUrl, url: uploadedFile.fileUrl,
typeCode: file.typeCode, typeCode: file.typeCode,
}; };
/** 通知 */
this.$notify({
title: "成功",
message: "上传成功",
type: "success",
});
this.uploadedFileList.push(fileItem); this.uploadedFileList.push(fileItem);
this.$emit("update-file-list", this.uploadedFileList); this.$emit("update-file-list", this.uploadedFileList);
this.showMsg = true; // this.showMsg = true;
setTimeout(() => { // setTimeout(() => {
this.showMsg = false; // this.showMsg = false;
}, 3000); // }, 3000);
} }
}, },
}, },