@@ -0,0 +1,107 @@ | |||
<template> | |||
<el-dialog | |||
class="attachment-dialog" | |||
title="附件" | |||
:close-on-click-modal="false" | |||
:append-to-body="true" | |||
:visible.sync="visible"> | |||
<!-- upload --> | |||
<div class="upload"> | |||
<el-upload | |||
class="upload-demo" | |||
action="https://jsonplaceholder.typicode.com/posts/" | |||
:on-preview="handlePreview" | |||
:on-remove="handleRemove" | |||
:before-remove="beforeRemove" | |||
:on-success="handleSuccess" | |||
multiple | |||
:show-file-list="false"> | |||
<el-button size="small" type="primary" class='btn-upload'>上传</el-button> | |||
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> --> | |||
</el-upload> | |||
<!-- filelist --> | |||
<div class="filelist"> | |||
<el-row :gutter="20"> | |||
<el-col :span="6" v-for="file in fileList" :key="file.name"> | |||
<div class="fileListItem"> | |||
<div class="filename">{{ file.name }}</div> | |||
<div class="file-actions"> | |||
<el-button type="text" size="small" icon="el-icon-view" @click="handlePreview(file)"></el-button> | |||
<el-button type="text" size="small" icon="el-icon-download" @click="handleDownload(file)"></el-button> | |||
<el-button type="text" size="small" icon="el-icon-delete" @click="handleRemove(file)"></el-button> | |||
</div> | |||
</div> | |||
</el-col> | |||
</el-row> | |||
</div> | |||
</div> | |||
</el-dialog> | |||
</template> | |||
<script> | |||
export default { | |||
name: "AttachmentDialog", | |||
props: {}, | |||
data() { | |||
return { | |||
visible: false, | |||
fileList: [], | |||
}; | |||
}, | |||
mounted() {}, | |||
methods: { | |||
init() { | |||
this.visible = true; | |||
}, | |||
close() { | |||
this.visible = false; | |||
}, | |||
// operations | |||
handlePreview(file) {}, | |||
handleDownload(file) {}, | |||
handleRemove(file) {}, | |||
// upload | |||
beforeRemove(file, fileList) {}, | |||
handleSuccess(response, file, fileList) { | |||
console.log("filelist", fileList, this.fileList); | |||
this.fileList.push({ name: file.name }); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped> | |||
.attachment-dialog >>> .el-dialog__body { | |||
padding: 8px 20px 20px; | |||
} | |||
.filelist { | |||
margin-top: 20px; | |||
max-height: 240px; | |||
overflow: hidden; | |||
overflow-y: auto; | |||
} | |||
.filename { | |||
} | |||
.file__actions { | |||
} | |||
.fileListItem { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
background: #0001; | |||
border-radius: 6px; | |||
padding: 0 12px; | |||
} | |||
.btn-upload { | |||
padding: 10px 56px; | |||
/* position: absolute; | |||
top: 12px; | |||
left: 100px; */ | |||
} | |||
</style> |
@@ -44,6 +44,9 @@ | |||
:dialog-visible.sync="carPayloadDialogVisible" | |||
:configs="carPayloadDialogConfigs" | |||
@refreshDataList="getList" /> | |||
<AttachmentDialog ref="attachmentDialog" v-if="needAttachmentDialog" /> | |||
<DialogUpload | |||
ref="upload-dialog" | |||
v-if="uploadDialogVisible" | |||
@@ -69,6 +72,7 @@ import DialogCarPayload from "@/components/DialogCarPayload.vue"; | |||
import DialogUpload from "@/components/DialogUpload.vue"; | |||
import Overlay from "@/components/Overlay.vue"; | |||
import moment from "moment"; | |||
import AttachmentDialog from "@/components/attachmentDialog.vue"; | |||
const DIALOG_WITH_MENU = "DialogWithMenu"; | |||
const DIALOG_JUST_FORM = "DialogJustForm"; | |||
@@ -84,6 +88,7 @@ export default { | |||
DialogCarPayload, | |||
DialogUpload, | |||
Overlay, | |||
AttachmentDialog, | |||
}, | |||
props: { | |||
navigator: { | |||
@@ -167,6 +172,7 @@ export default { | |||
uploadDialogVisible: false, | |||
overlayVisible: false, | |||
cachedSearchCondition: {}, | |||
needAttachmentDialog: false, | |||
}; | |||
}, | |||
inject: ["urls"], | |||
@@ -337,7 +343,11 @@ export default { | |||
break; | |||
} | |||
case "toggle-attachment-dialog": { | |||
alert("查看附件"); | |||
// alert("查看附件"); | |||
this.needAttachmentDialog = true; | |||
setTimeout(() => { | |||
this.$refs["attachmentDialog"].init(); | |||
}, 300); | |||
break; | |||
} | |||
case "view-blender-batch-details": { | |||
@@ -446,11 +456,12 @@ export default { | |||
if (shouldShowOverlay) this.overlayVisible = false; | |||
}) | |||
.catch((errMsg) => { | |||
errMsg !== 'cancel' && this.$message({ | |||
message: errMsg, | |||
type: "error", | |||
duration: 1500, | |||
}); | |||
errMsg !== "cancel" && | |||
this.$message({ | |||
message: errMsg, | |||
type: "error", | |||
duration: 1500, | |||
}); | |||
if (shouldShowOverlay) this.overlayVisible = false; | |||
}); | |||
break; | |||