parent
dd634a2666
commit
64f3c0b0c6
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<modal-panel addChildType="slot" :modalTitle="title" :show="showPanel" modalClassName="import-excel-style"
|
||||
@callback="modalCallback">
|
||||
<div class="card-container">
|
||||
<div class="row-style">
|
||||
<div class="icon-style">
|
||||
<a-icon type="upload" ref="abc"/>
|
||||
</div>
|
||||
<div class="text-style">
|
||||
<label for="fileUpload" class="upload-button-style" title="上传文件">上传文件</label>
|
||||
<a-input id="fileUpload" type="file" style="display: none"
|
||||
accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||
ref="fileInputRef"
|
||||
@change="uploadFile"
|
||||
/>
|
||||
<div id="fileNameId" class="file-name-style"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tipsId" class="tips-style" style="display:none">
|
||||
{{"*"+tips}}
|
||||
</div>
|
||||
</div>
|
||||
</modal-panel>
|
||||
</template>
|
||||
<script>
|
||||
/*
|
||||
* 模板导入组件
|
||||
* */
|
||||
import ModalPanel from '../modal/ModalPanel';
|
||||
import {Icon, Input} from 'ant-design-vue';
|
||||
export default{
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
modalTitle: {
|
||||
type: String,
|
||||
default: "请选择导入文件"
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
title: this.modalTitle,//弹出框标题
|
||||
showPanel: this.show,//是否显示
|
||||
file: "",//导入文件
|
||||
tips:"",
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modalTitle: function (newData) {
|
||||
this.title = newData;
|
||||
},
|
||||
show: function (newData) {
|
||||
this.showPanel = newData;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
uploadFile:function () {
|
||||
this.tips = "";
|
||||
document.getElementById("tipsId").style.display = "none";
|
||||
const fileInput = document.getElementById("fileUpload");
|
||||
this.file = fileInput.files[0];
|
||||
// let filesize = oFile.size;
|
||||
// document.getElementById("tipsId").style.display = "none";
|
||||
// document.getElementById("errorDivId").style.display = "none";
|
||||
document.getElementById("fileNameId").innerHTML = this.file.name;
|
||||
document.getElementById("fileNameId").title = this.file.name;
|
||||
},
|
||||
modalCallback: function (ary) {
|
||||
if (ary[0] === "ok") {
|
||||
if(this.file === ""){
|
||||
document.getElementById("tipsId").style.display = "block";
|
||||
this.tips = "请选择模板文件";
|
||||
return;
|
||||
}
|
||||
this.$emit("submitData", this.file)
|
||||
} else {
|
||||
this.file === "";
|
||||
this.$emit("cancel", [])
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
ModalPanel,
|
||||
AInput: Input,
|
||||
AIcon: Icon
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.import-excel-style {
|
||||
width: 800px !important;
|
||||
.ant-modal-body {
|
||||
padding: 0 !important;
|
||||
.card-container {
|
||||
background: #f5f5f5;
|
||||
overflow: hidden;
|
||||
padding: 0.5rem;
|
||||
.row-style{
|
||||
display: flex;
|
||||
.text-style{
|
||||
display: flex;
|
||||
.upload-button-style{
|
||||
cursor: pointer;
|
||||
color: #31a8fa;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tips-style{
|
||||
text-align: center;
|
||||
color: red;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue