super-fusion-platform/src/components/common/modal/ModalPanel.vue

<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="关闭"/>
        <a-icon v-if="showOK" type="check-circle" class="ok-style" title="确定" @click.stop="optionClick($event,'ok')"/>
        <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>