update 上传组件
This commit is contained in:
parent
39bf107fbe
commit
2dc7550754
@ -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 {
|
||||||
|
@ -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) {
|
||||||
this.uploadedFileList = this.uploadedFileList.filter((file) => file.id.toString() !== fileId.toString());
|
console.log("[UploadBtn] handleRemoveFile", fileId);
|
||||||
this.$emit("update-file-list", this.uploadedFileList);
|
this.$confirm("确定删除此文件?", "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.uploadedFileList = this.uploadedFileList.filter((file) => file.id.toString() !== fileId.toString());
|
||||||
|
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);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user