|
|
|
|
@ -0,0 +1,237 @@
|
|
|
|
|
<template>
|
|
|
|
|
<a-modal :centered="true" :footer="null" :mask="mask" :title="title" :destroyOnClose="destroyOnClose"
|
|
|
|
|
:closable="showCancel"
|
|
|
|
|
:visible="show_modal" :dialogClass="(className!==''?className:'')+ ' dialog-style'" :maskClosable="false"
|
|
|
|
|
:width="width !== ''?width:'30%'" @cancel.stop="optionClick($event,'cancel')" :zIndex="modalZIndex"
|
|
|
|
|
:bodyStyle="{maxHeight:'calc(95vh - 33px)',overflow:'auto'}"
|
|
|
|
|
:class="{'party-dialog-style':isPartyCenter}"
|
|
|
|
|
>
|
|
|
|
|
<a-icon slot="closeIcon" type="close-circle" style="color: #999999;font-size: 1rem" title="关闭"/>
|
|
|
|
|
<component v-if="addChildType === 'event' && show_modal" :is="childDom" v-bind="propsData" ref="dom"/>
|
|
|
|
|
<slot v-else-if="addChildType === 'slot'"></slot>
|
|
|
|
|
</a-modal>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {Icon, Modal} from 'ant-design-vue'
|
|
|
|
|
import {EventConfig} from "../../../utils/eventConfig"
|
|
|
|
|
export default {
|
|
|
|
|
name: "ModalPanel",
|
|
|
|
|
props: {
|
|
|
|
|
addChildType: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: "event" //添加子组件方式 "event":事件方式 "slot":插槽方式
|
|
|
|
|
},
|
|
|
|
|
modalTitle: {//标题
|
|
|
|
|
type: String,
|
|
|
|
|
default: ""
|
|
|
|
|
},
|
|
|
|
|
show: {//是否显示
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false,
|
|
|
|
|
},
|
|
|
|
|
destroyOnClose: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: true,
|
|
|
|
|
},
|
|
|
|
|
url: {//事件方式加载子组件时，子组件的文件目录
|
|
|
|
|
type: String,
|
|
|
|
|
default: "",
|
|
|
|
|
},
|
|
|
|
|
OKButton: {//是否显示确定按钮
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: true,
|
|
|
|
|
},
|
|
|
|
|
CancelButton: {//是否显示取消按钮
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: true,
|
|
|
|
|
},
|
|
|
|
|
modalWidth: {//面板宽度
|
|
|
|
|
type: String,
|
|
|
|
|
default: "",
|
|
|
|
|
},
|
|
|
|
|
modalClassName: {//面板类名
|
|
|
|
|
type: String,
|
|
|
|
|
default: "",
|
|
|
|
|
},
|
|
|
|
|
zIndex: {
|
|
|
|
|
type: Number,
|
|
|
|
|
default: 100000
|
|
|
|
|
},
|
|
|
|
|
mask: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
AIcon: Icon,
|
|
|
|
|
AModal: Modal
|
|
|
|
|
},
|
|
|
|
|
data: function () {
|
|
|
|
|
return {
|
|
|
|
|
title: this.modalTitle,
|
|
|
|
|
show_modal: this.show,
|
|
|
|
|
dom_url: this.url,
|
|
|
|
|
propsData: {},
|
|
|
|
|
showOK: this.OKButton,
|
|
|
|
|
showCancel: this.CancelButton,
|
|
|
|
|
callback: null,
|
|
|
|
|
width: this.modalWidth,
|
|
|
|
|
className: this.modalClassName,
|
|
|
|
|
modalZIndex: this.zIndex,
|
|
|
|
|
isPartyCenter: false,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
$route: {
|
|
|
|
|
handler(val, oldval){
|
|
|
|
|
if (val.path === '/partyCenter/party') {
|
|
|
|
|
this.isPartyCenter = true
|
|
|
|
|
} else {
|
|
|
|
|
this.isPartyCenter = false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
childDom: function () {
|
|
|
|
|
return this.dom_url === "" ? null : () => import(`@/${this.dom_url}`);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getHref()
|
|
|
|
|
if (this.addChildType === 'event') {
|
|
|
|
|
this.$bus.on(EventConfig.MODAL_SHOW, this.showModal);
|
|
|
|
|
this.$bus.on(EventConfig.MODAL_CLOSE, this.closeModal);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy(){
|
|
|
|
|
if (this.addChildType === 'event') {
|
|
|
|
|
this.$bus.off(EventConfig.MODAL_SHOW, this.showModal);
|
|
|
|
|
this.$bus.off(EventConfig.MODAL_CLOSE, this.closeModal);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getHref(){
|
|
|
|
|
this.href = window.location.hash
|
|
|
|
|
if (this.href === '#/partyCenter/party') {
|
|
|
|
|
this.isPartyCenter = true
|
|
|
|
|
} else {
|
|
|
|
|
this.isPartyCenter = false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
showModal: function (arys) {
|
|
|
|
|
this.title = arys[0].title;
|
|
|
|
|
this.dom_url = arys[0].dom_url;
|
|
|
|
|
this.propsData = arys[0].propsData;
|
|
|
|
|
this.showOK = arys[0].showOK;
|
|
|
|
|
this.showCancel = arys[0].showCancel;
|
|
|
|
|
this.callback = arys[0].callback;
|
|
|
|
|
this.width = arys[0].width;
|
|
|
|
|
this.className = arys[0].className;
|
|
|
|
|
this.show_modal = true;
|
|
|
|
|
},
|
|
|
|
|
closeModal: function () {
|
|
|
|
|
this.show_modal = false;
|
|
|
|
|
},
|
|
|
|
|
optionClick: function (evt, type) {
|
|
|
|
|
if (this.addChildType === "event") {
|
|
|
|
|
if (this.callback) {
|
|
|
|
|
this.show_modal = !this.callback(type, this.$refs.dom) !== false
|
|
|
|
|
} else {
|
|
|
|
|
this.show_modal = false;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this.$emit("callback", [type]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
modalTitle: function (newData) {
|
|
|
|
|
this.title = newData;
|
|
|
|
|
},
|
|
|
|
|
show: function (newData) {
|
|
|
|
|
this.show_modal = newData
|
|
|
|
|
},
|
|
|
|
|
OKButton: function (newData) {
|
|
|
|
|
this.showOK = newData;
|
|
|
|
|
},
|
|
|
|
|
CancelButton: function (newData) {
|
|
|
|
|
this.showCancel = newData;
|
|
|
|
|
},
|
|
|
|
|
modalWidth: function (newData) {
|
|
|
|
|
this.width = newData;
|
|
|
|
|
},
|
|
|
|
|
modalClassName: function (newData) {
|
|
|
|
|
this.className = newData;
|
|
|
|
|
},
|
|
|
|
|
$route(val, oldval){
|
|
|
|
|
if (val.path === '/partyCenter/party') {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
/deep/ .dialog-style {
|
|
|
|
|
min-width: 200px;
|
|
|
|
|
width: 30%;
|
|
|
|
|
max-width: 95% !important;
|
|
|
|
|
color: #fff;
|
|
|
|
|
.ant-modal-content {
|
|
|
|
|
border: 1px solid #31a8fa;
|
|
|
|
|
box-shadow: 0 4px 12px rgba(49, 168, 250, 0.5);
|
|
|
|
|
background: #01123E;
|
|
|
|
|
}
|
|
|
|
|
.ant-modal-header {
|
|
|
|
|
padding: 36px 24px !important;
|
|
|
|
|
background: #01123E;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border-bottom: 1px solid #1067B0;
|
|
|
|
|
.ant-modal-title {
|
|
|
|
|
line-height: 2rem !important;
|
|
|
|
|
font-size: 1.6rem !important;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.ant-modal-close-x {
|
|
|
|
|
height: 2rem !important;
|
|
|
|
|
width: 2rem !important;
|
|
|
|
|
line-height: 2rem !important;
|
|
|
|
|
.anticon {
|
|
|
|
|
color: #fff !important;
|
|
|
|
|
font-size: 2.5rem !important;
|
|
|
|
|
position: absolute !important;
|
|
|
|
|
top: 13px !important;
|
|
|
|
|
right: 20px !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.ok-style {
|
|
|
|
|
position: absolute;
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
color: #31a8fa;
|
|
|
|
|
top: 0.5rem;
|
|
|
|
|
right: 2rem;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.party-dialog-style {
|
|
|
|
|
/deep/ .dialog-style {
|
|
|
|
|
.ant-modal-content {
|
|
|
|
|
border: 1px solid #FFFE00 !important;
|
|
|
|
|
box-shadow: 0 4px 12px rgba(178, 34, 34, 0.5) !important;
|
|
|
|
|
background: #961E03 !important;
|
|
|
|
|
.ant-modal-header {
|
|
|
|
|
background: #961E03 !important;
|
|
|
|
|
border-bottom: 1px solid #FFFE00 !important;
|
|
|
|
|
}
|
|
|
|
|
.info-content-style {
|
|
|
|
|
background: none !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
