pms-aomei/src/views/modules/pms/order/components/DialogUpload.vue

219 lines
4.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<el-dialog
class="dialog-just-form"
:visible="visible"
@close="handleClose"
width="30%"
:title="title"
:destroy-on-close="false"
:close-on-click-modal="configs.clickModalToClose ?? true">
<el-upload
style="margin-top: 24px; text-align: center"
drag
:action="actionUrl"
:headers="uploadHeaders"
:show-file-list="false"
:on-error="handleError"
:on-success="handleSuccess">
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">{{ hint }}</div>
</el-upload>
<div slot="footer">
<el-button
type="success"
@click="
handleBtnClick({
name: 'download-template',
filename: savedFilename,
url: templateUrl,
})
">
下载模板
</el-button>
<el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
</div>
</el-dialog>
</template>
<script>
import { pick as __pick } from "@/utils/filters";
import Cookies from "js-cookie";
// import moment from "moment";
export default {
name: "DialogUpload",
props: {
title: {
type: String,
default: "导入",
},
hint: {
hint: String,
default: "只能上传 Excel 文件",
},
filename: {
hint: String,
default: "default_file.xlsx",
},
url: {
// 下载地址
hint: String,
default: "/importTemplates/orderImport.xlsx",
},
configs: {
type: Object,
default: () => ({
clickModalToClose: true,
forms: null,
}),
},
},
inject: ["urls"],
data() {
return {
loadingStatus: false,
visible: false,
};
},
computed: {
uploadHeaders() {
return {
token: Cookies.get("token") || "",
};
},
actionUrl() {
return window.SITE_CONFIG["apiURL"] + this.urls.importUrl;
},
savedFilename() {
return "templateUrl" in this.urls ? this.urls.templateUrl.split("/").pop() : this.filename;
},
templateUrl() {
return "templateUrl" in this.urls ? this.urls.templateUrl : this.url ?? "#";
},
},
methods: {
init(data) {
this.visible = true;
},
fileTypeCheck() {
// 上传前检查文件类型: Boolean
},
fileSizeCheck() {
// 上传前检查文件大小: Boolean
},
handleSuccess(response, file, fileList) {
// console.log("success response", response);
if ("code" in response && response.code === 500) {
this.$message({
message: response.msg,
type: "error",
duration: 1500,
});
return;
}
let message = "";
let isError = false;
if (typeof response === "object" && "msg" in response) message = response.msg;
if (typeof response === "object" && "data" in response) message = response.data.toString();
if (typeof response === "string") {
message = response;
isError = true;
}
this.handleClose();
this.$message({
message,
type: isError ? "error" : "info",
duration: 2000,
});
},
handleError(err, file, fileList) {
console.log("err", err);
},
handleBtnClick(payload) {
if ("name" in payload) {
switch (payload.name) {
case "cancel":
this.handleClose();
break;
case "download-template":
this.handleDownloadTemplate(payload.filename, payload.url);
break;
}
}
},
handleDownloadTemplate(filename, href) {
this.$notify({
title: "提示",
message: "开始下载,请稍后检查浏览器的下载选项或者下载目录",
type: "success",
});
// 下载模板
let a = document.createElement("a");
a.href = href;
a.download = filename ?? "orderTemplate.xlsx";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
},
handleUploadChange(file, fileList) {
// console.log("[Upload] handleUploadChange...", file, fileList);
},
handleClose() {
this.visible = false;
setTimeout(() => {
this.$emit("destroy-dialog");
}, 200);
},
},
};
</script>
<style scoped>
.dialog-just-form >>> .el-dialog__body {
/* padding-top: 16px !important;
padding-bottom: 16px !important; */
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.el-select,
.el-cascader,
.el-date-editor {
width: 100% !important;
}
.dialog-just-form >>> .el-dialog__header {
padding: 10px 20px 10px;
/* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
}
.h0 {
height: 0;
width: 0;
}
.dialog-just-form >>> .dialog-demo {
text-align: center;
}
</style>