|
|
@@ -5,44 +5,50 @@ |
|
|
|
:close-on-click-modal="false" |
|
|
|
:append-to-body="true" |
|
|
|
:visible.sync="visible"> |
|
|
|
<!-- upload --> |
|
|
|
<div class="upload"> |
|
|
|
<!-- actionUrl() { |
|
|
|
<div v-loading="loading"> |
|
|
|
<!-- upload --> |
|
|
|
<div class="upload"> |
|
|
|
<!-- actionUrl() { |
|
|
|
return window.SITE_CONFIG["apiURL"] + this.urls.importUrl; |
|
|
|
}, --> |
|
|
|
<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 + Math.random()"> |
|
|
|
<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> |
|
|
|
<el-upload |
|
|
|
class="upload-demo" |
|
|
|
:on-preview="handlePreview" |
|
|
|
:on-remove="handleRemove" |
|
|
|
:before-remove="beforeRemove" |
|
|
|
:http-request="handleUpload" |
|
|
|
:action="actionUrl" |
|
|
|
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" v-if="fileList && fileList.length != 0"> |
|
|
|
<div style="">文件列表</div> |
|
|
|
<el-row :gutter="20"> |
|
|
|
<el-col :span="8" v-for="file in fileList" :key="file.name + Math.random()"> |
|
|
|
<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> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
<p v-else>无附件</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import Cookies from "js-cookie"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "AttachmentDialog", |
|
|
|
props: {}, |
|
|
@@ -51,13 +57,26 @@ export default { |
|
|
|
visible: false, |
|
|
|
fileList: [], |
|
|
|
shapeId: null, |
|
|
|
shapeInfo: null |
|
|
|
shapeInfo: null, |
|
|
|
loading: false, |
|
|
|
actionUrl: window.SITE_CONFIG["apiURL"] + "/pms/attachment/uploadFileFormData?typeCode=shape", |
|
|
|
}; |
|
|
|
}, |
|
|
|
inject: ["urls"], |
|
|
|
mounted() {}, |
|
|
|
mounted() { |
|
|
|
this.clearInfo(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
clearInfo() { |
|
|
|
this.shapeId = null; |
|
|
|
this.shapeInfo = null; |
|
|
|
this.fileList = []; |
|
|
|
}, |
|
|
|
init(shapeId) { |
|
|
|
if (!shapeId) { |
|
|
|
this.$message.error("shapeId is required"); |
|
|
|
return; |
|
|
|
} |
|
|
|
this.shapeId = shapeId; |
|
|
|
this.getFileList(); |
|
|
|
this.visible = true; |
|
|
@@ -67,26 +86,184 @@ export default { |
|
|
|
}, |
|
|
|
// requests |
|
|
|
async getFileList() { |
|
|
|
this.loading = true; |
|
|
|
// get shape info |
|
|
|
try { |
|
|
|
this.shapeInfo = await this.$http.get(this.urls.base + `/${this.shapeId}`); |
|
|
|
// extract filelist and save filelist seperately |
|
|
|
this.fileList = this.shapeInfo.files; |
|
|
|
// TODO.... |
|
|
|
const { data } = await this.$http.get(this.urls.base + `/${this.shapeId}`); |
|
|
|
if (data.code !== 0) { |
|
|
|
throw new Error(data.msg); |
|
|
|
} |
|
|
|
this.shapeInfo = data.data; |
|
|
|
// this.fileList = (this.shapeInfo?.files || []).map((file) => ({ |
|
|
|
// ...file, |
|
|
|
// name: file.fileName + "." + file.fileUrl.split(".").pop(), |
|
|
|
// })); |
|
|
|
this.fileList = (this.shapeInfo?.files || []).map((file) => ({ |
|
|
|
...file, |
|
|
|
name: file.fileName, |
|
|
|
})); |
|
|
|
// 删除 shapeInfo 的 files 字段 |
|
|
|
delete this.shapeInfo.files; |
|
|
|
this.loading = false; |
|
|
|
} catch (error) { |
|
|
|
this.$message.error(error.msg); |
|
|
|
this.loading = false; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// operations |
|
|
|
handlePreview(file) {}, |
|
|
|
handleDownload(file) {}, |
|
|
|
handleRemove(file) {}, |
|
|
|
handlePreview(file) { |
|
|
|
// 加载图片 |
|
|
|
this.$http |
|
|
|
.get("/pms/attachment/downloadFile", { |
|
|
|
params: { |
|
|
|
attachmentId: file.id, |
|
|
|
type: 0, // 0 预览,1 下载 |
|
|
|
}, |
|
|
|
responseType: "blob", |
|
|
|
}) |
|
|
|
.then(({ data: res }) => { |
|
|
|
if (/image/i.test(res.type) || /pdf/i.test(res.type)) { |
|
|
|
let a = document.createElement("a"); |
|
|
|
a.setAttribute("target", "_blank"); |
|
|
|
a.href = URL.createObjectURL(res); |
|
|
|
a.click(); |
|
|
|
a.remove(); |
|
|
|
} else { |
|
|
|
this.$message({ |
|
|
|
message: "非图片和PDF文件请下载后预览", |
|
|
|
type: "error", |
|
|
|
duration: 1500, |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
handleDownload(file) { |
|
|
|
this.$http |
|
|
|
.get("/pms/attachment/downloadFile", { |
|
|
|
params: { |
|
|
|
attachmentId: file.id, |
|
|
|
type: 1, |
|
|
|
}, |
|
|
|
responseType: "blob", |
|
|
|
}) |
|
|
|
.then(({ data: res }) => { |
|
|
|
const blob = new Blob([res]); |
|
|
|
/** 通知 */ |
|
|
|
this.$notify({ |
|
|
|
title: "成功", |
|
|
|
message: "开始下载", |
|
|
|
type: "success", |
|
|
|
duration: 1200, |
|
|
|
}); |
|
|
|
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); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
async handleRemove(file) { |
|
|
|
try { |
|
|
|
await this.$confirm("确定删除此文件?", "提示", { |
|
|
|
confirmButtonText: "确定", |
|
|
|
cancelButtonText: "取消", |
|
|
|
type: "warning", |
|
|
|
}); |
|
|
|
this.loading = true; |
|
|
|
this.fileList = this.fileList.filter((f) => f.id.toString() !== file.id.toString()); |
|
|
|
await this.updateShapeInfo(); |
|
|
|
this.loading = false; |
|
|
|
this.$message({ |
|
|
|
type: "success", |
|
|
|
message: "删除成功!", |
|
|
|
}); |
|
|
|
} catch (err) { |
|
|
|
this.$message({ |
|
|
|
type: "info", |
|
|
|
message: "已取消删除", |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
// upload |
|
|
|
async handleUpload(params) { |
|
|
|
// params: |
|
|
|
// { header, withCredentials, file, data, filename, action, onProgress, onSuccess, onError, onPreview, onRemove, beforeUpload, beforeRemove, } |
|
|
|
// upload file |
|
|
|
const formData = new FormData(); |
|
|
|
formData.append("files", params.file); |
|
|
|
|
|
|
|
try { |
|
|
|
const { data: res } = await this.$http({ |
|
|
|
url: params.action, |
|
|
|
method: "post", |
|
|
|
headers: { |
|
|
|
token: Cookies.get("token"), |
|
|
|
// 'Content-Type': 'multipart/form-data' |
|
|
|
}, |
|
|
|
data: formData, |
|
|
|
}); |
|
|
|
const { code, data, msg } = res; |
|
|
|
// data is an array! |
|
|
|
if (code != 0) throw new Error(msg || "上传出错"); |
|
|
|
this.fileList.push({ |
|
|
|
name: data[0].fileName, |
|
|
|
id: data[0].id, |
|
|
|
fileName: data[0].fileName, |
|
|
|
fileUrl: data[0].fileUrl, |
|
|
|
typeCode: data[0].typeCode, |
|
|
|
}); |
|
|
|
|
|
|
|
// upload shape info |
|
|
|
this.loading = true |
|
|
|
await this.updateShapeInfo(); |
|
|
|
this.loading = false |
|
|
|
this.$message.success("上传成功"); |
|
|
|
} catch (error) { |
|
|
|
this.$message.error(error.msg); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
async updateShapeInfo() { |
|
|
|
try { |
|
|
|
const { data: res } = await this.$http({ |
|
|
|
url: this.urls.base, |
|
|
|
method: "put", |
|
|
|
data: { |
|
|
|
...this.shapeInfo, |
|
|
|
fileIds: this.fileList.map((file) => file.id), |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
const { code, msg } = res; |
|
|
|
if (code != 0) throw new Error(msg || "上传出错"); |
|
|
|
} catch (err) { |
|
|
|
this.$message.error(err.msg); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
beforeRemove(file, fileList) {}, |
|
|
|
handleSuccess(response, file, fileList) { |
|
|
|
console.log("filelist", fileList, this.fileList); |
|
|
|
this.fileList.push({ name: file.name }); |
|
|
|
|
|
|
|
handleUploadCheck(file) { |
|
|
|
const LIMIT = 2 * 1024 * 1024; // bytes |
|
|
|
if (file.size > LIMIT) { |
|
|
|
this.$message({ |
|
|
|
message: "文件大小不能超过 2MB", |
|
|
|
type: "error", |
|
|
|
duration: 1500, |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} else return true; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
@@ -105,6 +282,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.filename { |
|
|
|
user-select: none; |
|
|
|
} |
|
|
|
|
|
|
|
.file__actions { |
|
|
@@ -117,12 +295,10 @@ export default { |
|
|
|
background: #0001; |
|
|
|
border-radius: 6px; |
|
|
|
padding: 0 12px; |
|
|
|
margin-top: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-upload { |
|
|
|
padding: 10px 56px; |
|
|
|
/* position: absolute; |
|
|
|
top: 12px; |
|
|
|
left: 100px; */ |
|
|
|
} |
|
|
|
</style> |