Project-Annex/operationSupport/src/components/common/alertModal.vue

<!--
 * @Author: wf
 * @Date: 2021-08-12 16:12:17
 * @LastEditors: wfmodal.customClass
 * @LastEditTime: 2021-08-13 09:15:25
 * @Description: element-ui Dialog弹窗封装
-->
<template>
    <!-- <transition name="el-zoom-in-center"> -->
    <el-dialog
        v-if="modal.show"
        :visible.sync="modal.show"
        class="alert-modal"
        :width="modal.width"
        :fullscreen="modal.fullscreen"
        :custom-class="modal.customClass || 'alert-el-modal'"
        :class="{ 'is-modal': !modal.fullscreen, newpop: modal.class }"
        :append-to-body="true"
        :lock-scroll="true"
        @closed="close"
        ref="alertModal"
        top="0"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
        <div slot="title">
            <div class="title_row">
                <strong class="title">{{ modal.title }}</strong>
                {{ modal.star }}
                <span v-if="modal.hideStar"></span>
                <span v-else-if="modal.title && !modal.notip"> (<span class="color-danger">*为必填项</span>) </span>
                <!-- <i class="close" @click="close"></i> -->
            </div>
        </div>
        <!-- :style="`height:${modal.showFooter ? 'calc(100% - 50px)' : 'calc(100% - 54px)'}`" -->
        <!-- <div class="body_content"> -->
        <div class="content" v-scroll>
            <component :id="modal.id" :is="modal.component" :params="modal.props" :ref="modal.id" @close="close"></component>
        </div>
        <!-- </div> -->
        <span slot="footer" class="dialog-footer" v-if="!modal.fullscreen || modal.showFooter">
            <el-button @click="alertReset(modal.id)" class="reset" v-if="modal.showResetButton">重置</el-button>
            <el-button @click="close" class="reset" v-if="!modal.showCancelButton">{{ modal.cancelButtonText || '取消' }}</el-button>
            <el-button type="primary" v-if="!modal.showConfirmButton" @click="submit(modal.id)">{{
                modal.confirmButtonText || '保存'
            }}</el-button>
        </span>
    </el-dialog>
    <!-- </transition> -->
</template>

<script>
const preventBrowserBack = () => {
    history.pushState(null, null, document.URL);
};
/* 
  使用vuex this.$store.dispatch("openModal", {})打开弹窗,具体参数去store查看
*/
export default {
    name: 'alert-modal',
    props: {
        params: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            // modal:{}
        };
    },
    computed: {
        modal() {
            // const xx = this.$store.getters['getPopups'];
            let obj = this.params;
            if (obj && obj.height) {
                this.$nextTick(() => {
                    if (this.$refs.alertModal && this.$refs.alertModal.$el && this.$refs.alertModal.$el.childNodes) {
                        this.$refs.alertModal.$el.childNodes[0].style.height = obj.height;
                    }
                });
            }
            if (obj.show) {
                history.pushState(null, null, document.URL);
                window.addEventListener('popstate', preventBrowserBack, false);
            } else {
                window.removeEventListener('popstate', preventBrowserBack);
            }
            return obj;
        }
    },
    watch: {},
    methods: {
        close() {
            if (this.$route.fullPath == '/assetManagement/shopManagement/index?showDialog=true') {
                this.$router.replace('/workbench/index');
            }
            this.$store.dispatch('delPopup', this.modal.id);
        },
        // 弹窗重置，执行弹出组件的reset方法
        alertReset(id) {
            const component = this.$refs[id];
            component.reset && component.reset();
        },
        submit(id) {
            const component = this.$refs[id];
            component.submit && component.submit();
        }
    },
    created() {
        // debugger
        // this.modal=this.params;
    }
};
</script>

<style lang="scss" scoped>
@import '@assets/css/public-style.scss';
.alert-modal {
    overflow: hidden;
    /deep/.el-dialog {
        .el-dialog__header {
            height: 54px;
            border-radius: 6px 6px 0 0;
            background: rgba(248, 252, 255, 1);
            padding: 0 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;
        }
        .el-dialog__body {
            padding: 20px;
            overflow: auto;
            .content {
                height: 100%;
            }
            // margin-bottom: 20px;
            .el-form {
                .el-select,
                .el-cascader {
                    width: 100%;
                }
            }
            &::-webkit-scrollbar {
                display: none;
            }
        }
        .el-dialog__footer {
            border-top: none;
            position: relative;
            bottom: 10px;
            margin-top: 10px;
            .dialog-footer .reset {
                border: 1px solid #0eaeff;
                color: #0eaeff;
            }
            .el-button--primary {
                background-color: #0eaeff;
                // border-color: #0eaeff;
            }
        }
        &.is-fullscreen {
            height: 100% !important;
            border-radius: 0;
            .el-dialog__body {
                position: absolute;
                left: 0;
                bottom: 0;
                top: 54px;
                right: 0;
                display: flex;
                justify-content: center;
            }
        }
    }
}
.is-modal {
    .el-dialog {
        border-radius: 8px;
        width: auto;
        max-height: 80%;
        min-height: 210px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        .el-dialog__body {
            /deep/ .content {
                height: 100% !important;
            }
        }
    }
    //     .el-dialog__body::-webkit-scrollbar {
    // 	display: none;
    // }
}

.newpop .el-dialog {
    background: transparent;
}
.newpop .el-dialog .el-dialog__header {
    height: 50px;
    background: rgba(13, 21, 41, 0.3);
}
.newpop .el-dialog .el-dialog__body {
    height: 100%;
    padding: 0;
}
.newpop .el-dialog .el-dialog__footer {
    display: none;
}
.newpop .title {
    color: #fff;
}
.color-danger {
    color: red;
}
</style>