mt-fe-group/pms-aomei
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update upload&download

Browse Source
This commit is contained in:
lb
2023-02-10 16:57:29 +08:00
parent 660803f34a
commit 39bf107fbe
5 changed files with 157 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/uploadBtn/components/FileList.vue
View File

@@ -7,8 +7,8 @@
{{ file.name }}
</span>
<div class="h-4 space-x-2">
<button class="el-icon-download text-blue-300" @click="handleDownload(file)"></button>
<button class="el-icon-delete text-red-300" @click="handleDelete(file)"></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>
</div>
</li>
<li v-if="filteredList.length === 0">无</li>
@@ -31,7 +31,7 @@
<!-- </div> -->
<div v-if="label" slot="reference" class="">{{ label }}</div>
<div v-else slot="reference" class="el-icon-folder-opened" style="margin-left: 24px; cursor: pointer;"> 已上传文件</div>
<div v-else slot="reference" class="el-icon-folder-opened" style="margin-left: 24px; cursor: pointer">已上传文件</div>
</el-popover>
</template>
@@ -58,6 +58,13 @@ export default {
searchCondition: "",
};
},
watch: {
fileList(val) {
if (val) {
console.log("[FileList] fileList prop:", val);
}
},
},
computed: {
filteredList() {
return this.fileList.filter((item) => item.name.startsWith(this.searchCondition));
@@ -65,10 +72,35 @@ export default {
},
methods: {
handleDownload(file) {
console.log("handleDownload", file);
console.log("[FileList] handleDownload", file);
this.$http
.get("/pms/attachment/downloadFile", {
params: {
attachmentId: file.id,
type: 1,
},
})
.then(({ data: res }) => {
const blob = new Blob([res]);
if ("download" in document.createElement("a")) {
const alink = document.createElement("a");
alink.download = file.name;
alink.style.display = "none";
alink.target = "_blank";
alink.href = URL.createObjectURL(blob);
document.body.appendChild(alink);
alink.click();
URL.revokeObjectURL(alink.href);
document.body.removeChild(alink);
} else {
navigator.msSaveBlob(blob, fileName);
}
});
},
handleDelete(file) {
console.log("handleDelete", file);
console.log("[FileList] handleDelete", file);
// TODO: 警示删除操作
this.$emit("delete-a-file", file.id);
},
handleSearchClick() {
console.log("[FileList] handleSearchClick()");
@@ -126,4 +158,27 @@ li {
width: 24px;
height: 24px;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
width: 8px;
}
::-webkit-scrollbar-button {
display: none;
}
::-webkit-scrollbar-thumb {
background: rgb(175, 175, 175);
border-radius: 4px;
}
.color-blue {
color: #0b58ff;
cursor: pointer;
}
.color-red {
color: rgba(222, 15, 15, 0.89);
cursor: pointer;
}
</style>

69
src/components/uploadBtn/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="" style="position: relative;">
<div class="" style="position: relative">
<el-upload
:disabled="disabled"
name="files"
@@ -18,10 +18,8 @@
<span key="uploaded" v-else class="success-msg"> {{ tips.success }} </span>
</transition>
</div>
</el-upload>
<FileList :file-list="fileList" style="display: inline-block; position: absolute; top: 0; left: 72px;" />
<FileList :file-list="uploadedFileList" @delete-a-file="handleRemoveFile" style="display: inline-block; position: absolute; top: 0; left: 72px" />
</div>
</template>
@@ -47,7 +45,7 @@ export default {
type: String,
default: "http://192.168.1.62:8080/pms-am/pms/attachment/uploadFileFormData?typeCode=equipmentType", //
},
fileListProp: {
fileList: {
type: Array,
default: () => [],
},
@@ -58,7 +56,17 @@ export default {
},
components: { FileList },
data() {
return { showMsg: false, fileList: [] };
return { showMsg: false, uploadedFileList: [] };
},
watch: {
// fileList: {
// handler: (arr) => {
// if (arr && arr.length > 0) {
// this.uploadedFileList = arr;
// }
// },
// immediate: true,
// },
},
computed: {
uploadHeaders() {
@@ -67,28 +75,34 @@ export default {
};
},
},
watch: {
fileListProp(list) {
this.fileList = list;
},
mounted() {
console.log("[UploadBtn] mounted()", this.fileList, this.uploadedFileList);
this.uploadedFileList = this.fileList ?? [];
},
methods: {
handleRemoveFile(fileId) {
this.uploadedFileList = this.uploadedFileList.filter((file) => file.id.toString() !== fileId.toString());
this.$emit("update-file-list", this.uploadedFileList);
},
handleUploadSuccess(response, file, fileList) {
/** 上传成功修改本地展示的文件名 */
console.log("[UploadBtn] uploadedFileList", response, file, fileList, this.uploadedFileList);
if (response.code === 0) {
// const { fileName } = response.data[0];
const fileName = response.data[0].fileUrl.split("/").pop();
file.name = fileName;
const uploadedFile = response.data[0];
const fileItem = {
id: uploadedFile.id,
name: uploadedFile.fileUrl.split("/").pop(),
url: uploadedFile.fileUrl,
typeCode: file.typeCode,
};
this.uploadedFileList.push(fileItem);
this.$emit("update-file-list", this.uploadedFileList);
this.showMsg = true;
setTimeout(() => {
this.showMsg = false;
}, 3000);
} else {
console.log("response, file, fileList", response, file, fileList);
}
this.fileList = fileList;
console.log("[vue] fileList", this.fileList);
},
},
};
@@ -96,7 +110,7 @@ export default {
<style scoped>
.upload-demo {
margin-top: 48px;
margin-top: 48px;
}
/* .upload-demo >>> .el-upload__tip {
@@ -114,20 +128,7 @@ export default {
transition: opacity 500ms ease-out;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
width: 8px;
}
::-webkit-scrollbar-button {
display: none;
}
::-webkit-scrollbar-thumb {
background: rgb(175, 175, 175);
border-radius: 4px;
}
.success-msg {
color: #67c23a;
color: #67c23a;
}
</style>