for_client/src/global/components/hc-dialog/index.vue

<template>
    <el-dialog :id="uuid"
               v-model="isShow"
               :before-close="beforeClose"
               :class="[isTable?'hc-modal-table':'', isSlotExtra?'hc-modal-header-extra':'', padding ? '':'hc-modal-no-padding', ui]"
               :close-on-click-modal="false" :destroy-on-close="!isLoading" :show-close="isClose"
               :style="isBgColor?'--el-dialog-bg-color:' + isBgColor:''" :title="title" :width="isWidth"
               class="hc-modal-border"
               close-on-press-escape
               draggable
    >
        <template v-if="isSlotHeader || isSlotExtra" #header>
            <slot v-if="isSlotHeader" name='header'/>
            <div v-if="!isSlotHeader && isSlotExtra" class="el-dialog__title" role="heading">{{ title }}</div>
            <slot v-if="isSlotExtra" name='extra'/>
        </template>
        <slot></slot>
        <template v-if="footer" #footer>
            <slot v-if="isSlotFooter" name='footer'/>
            <div v-else-if="isRowFooter" class="lr-dialog-footer">
                <div class="left">
                    <slot name='leftRowFooter'/>
                </div>
                <div class="right flex">
                    <slot name='rightRowFooter'/>
                </div>
            </div>
            <div v-else :class="isFooterCenter?'text-center':''" class="dialog-footer">
                <el-button :disabled="isLoading" size="large" @click="dialogClosed">
                    <HcIcon name="close"/>
                    <span>取消</span>
                </el-button>
                <el-button :loading="isLoading" hc-btn type="primary" @click="buttonSaveClick">
                    <HcIcon name="check"/>
                    <span>{{ saveText }}</span>
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import {ref, watch, useSlots, onMounted} from "vue";
import {getRandom} from "vue-utils-plus"

const props = defineProps({
    ui: {
        type: String,
        default: ''
    },
    show: {
        type: Boolean,
        default: false
    },
    title: {
        type: [String, Number],
        default: 'dialog'
    },
    widths: {
        type: String,
        default: '38rem'
    },
    loading: {
        type: Boolean,
        default: false
    },
    loadingText: {
        type: String,
        default: '请求中，请耐心等待...'
    },
    footer: {
        type: Boolean,
        default: true
    },
    saveText: {
        type: [String, Number],
        default: '提交'
    },
    bgColor: {
        type: [String, Number],
        default: '#f1f5f8'
    },
    isTable: {
        type: Boolean,
        default: false
    },
    isRowFooter: {
        type: Boolean,
        default: false
    },
    isClose: {
        type: Boolean,
        default: true
    },
    padding: {
        type: Boolean,
        default: true
    },
    isFooterCenter: {
        type: Boolean,
        default: false
    },
})

//变量
const uuid = getRandom()
const isShow = ref(props.show)
const isWidth = ref(props.widths)
const isLoading = ref(props.loading)
const isBgColor = ref(props.bgColor)
const loadingText = ref(props.loadingText)

onMounted(() => {
    setLoading(props.loading)
})

//监听
watch(() => [
    props.show,
    props.widths,
    props.loading,
    props.bgColor,
    props.loadingText,
], ([show, width, loading, bgColor, loadingText1]) => {
    isShow.value = show
    isWidth.value = width
    isLoading.value = loading
    isBgColor.value = bgColor
    loadingText.value = loadingText1
    setLoading(loading)
})

//判断<slot>是否有传值
const slots = useSlots()
const isSlotHeader = ref(!!slots.header);
const isSlotExtra = ref(!!slots.extra);
const isSlotFooter = ref(!!slots.footer);

const emit = defineEmits(['close', 'save'])

const loadingInstance = ref(null);
const setLoading = (val) => {
    if (val) {
        const dom = document.getElementById(uuid)
        loadingInstance.value = window.$loading.service({
            target: dom,
            text: loadingText.value,
        })
    } else {
        if (loadingInstance.value) {
            loadingInstance.value.close()
        }
    }
}

//关闭
const dialogClosed = () => {
    isShow.value = false
    emit('close', false)
}

const beforeClose = (done) => {
    if (!isLoading.value) {
        isShow.value = false
        done()
        emit('close', false)
    }
}

//按钮保存
const buttonSaveClick = () => {
    emit('save')
}
</script>

<style lang="scss">
.el-overlay-dialog {
    .el-dialog.hc-modal-border.hc-modal-header-extra,
    .el-dialog.hc-modal-header-extra {
        .el-dialog__header {
            position: relative;
            display: flex;
            align-items: center;
            padding: 8px var(--el-dialog-padding-primary);
            .el-dialog__title {
                flex: 1;
            }
            .el-dialog__headerbtn {
                position: relative;
                top: initial;
                right: initial;
                width: auto;
                height: inherit;
                margin-left: 24px;
                font-size: 18px;
            }
        }
    }
    .el-dialog.hc-modal-no-padding .el-dialog__body {
        padding: 0;
    }
}
</style>