erp-el-element/Dialog/Exceldown.vue

187 lines
4.4 KiB
Vue
Raw Normal View History

2024-05-07 11:30:13 +08:00
<template>
<div class="popup-message warning" :class="type">
<div class="pop-view">
<div style="font-size: 20px;display:flex;justify-content:space-between;align-items:center;">
<div>
<i class="el-icon-warning-outline" style="color:#f39c12;margin-right:5px"></i>
<span style="color:#3498db">导出任务创建成功!</span>
</div>
<i class="el-icon-close" @click="closeMessage"></i>
</div>
<div style="color:#3498db;margin-top:10px">
<span>任务名称:{{tips}}</span>
<span style="margin-left: 10px;">任务编号:{{msg}}</span>
</div>
<div style=";margin-top:10px">
是否立即前往下载管理!
</div>
<!-- <span class="pop-title">{{ this.tips || ''}}</span>
<p class="pop-content" v-if="this.msg">{{ this.msg }}</p> -->
<div class="pop-btn" v-if="button">
<el-button type="primary" class="save" @click="okMessage">确定</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Exceldown',
// props: ["timeVisible", "cfgData", "timeTitle"],
data() {
return {
//
callback: null,
tips: '',
type: '',
msg: '',
button: false,
duration: 0,
};
},
computed: {
//
},
methods: {
getParams(options) {
this.callBack = options.callBack;
this.type = options.type || ''
this.tips = options.tips || ''
this.msg = options.msg || ''
this.button = options.button || false
this.duration = options.duration || 0
this.changePosition()
if(this.duration > 0){
window.setTimeout(() => {
this.$destroy(true)
if(this.$el.parentNode){ // 当前节点是否已经被手动移除
this.$el.parentNode.removeChild(this.$el)
}
this.changePosition()
}, this.duration)
}
},
changePosition() {
let doc = document.body.getElementsByClassName('popup-message')
let sum = 0;
for(let i=0; i< doc.length; i++){
this.$nextTick(() => {
if(i>0){
sum = sum + document.body.getElementsByClassName('popup-message')[i-1].clientHeight + 5
document.body.getElementsByClassName('popup-message')[i].style = `top: ${sum}px`
}else{
document.body.getElementsByClassName('popup-message')[i].style = `top: 50%`
}
})
}
},
okMessage(){
this.$destroy(true)
this.$el.parentNode.removeChild(this.$el)
this.changePosition()
this.callBack()
},
closeMessage(){
this.$destroy(true)
this.$el.parentNode.removeChild(this.$el)
this.changePosition()
}
},
mounted() {
},
};
</script>
<style lang="scss" scoped>
.popup-message {
font-family: "Source Han Sans Regular";
color: #333333;
position: fixed;
top: 50%;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 500px;
height: fit-content;
border-radius: 8px;
background: #FFFFFF;
border: 1px solid #C2C2C2;
z-index: 9999;
.pop-view{
position: relative;
min-height: 120px;
height: auto;
padding: 15px;
padding-bottom: 13px;
.pop-title{
display: block;
font-size: 18px;
font-weight: 500;
padding: 13px 52px 9px 52px;
position: relative;
&::before{
position: absolute;
content: '';
// background-image: url('~@/assets/popup/warning.png');
width: 22px;
height: 22px;
left: 20px;
}
}
.pop-content{
font-weight: 400;
font-size: 14px;
padding: 0 52px 5px 52px;
}
.pop-btn{
display: flex;
justify-content: flex-end;
.save{
margin-right: 20px;
}
}
.delete{
position: absolute;
content: '';
// background-image: url('~@/assets/popup/delete.png');
width: 22px;
height: 22px;
top: 18px;
right: 23px;
}
}
}
.success{
background: #F6FFED;
border: 1px solid #73D13D;
color: #73D13D;
.pop-view{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.pop-view>.pop-title{
&::before{
// background-image: url('~@/assets/popup/success.png');
}
}
}
.error{
background: #FFF1F0;
border: 1px solid #FF7875;
// color: #FF7875;
.pop-view>.pop-title{
&::before{
// background-image: url('~@/assets/popup/error.png');
}
}
}
</style>