sea-warning-web/src/components/cus/CusDialog.vue

<template>
  <el-dialog
      :style="`
        --cus-dialog_height: ${height};
        --cus-dialog_max-height: ${maxHeight};
        --cus-dialog_min-height: ${minHeight};
        background-color: transparent;
      `"
      :modal-class="`
        ${uuid}
        __cus-dialog ${maxHeight === 'unset' ? '' : '__cus-dialog-auto-height'} ${hiddenStyle ? '__cus-dialog-hidden-style' : ''}
      `"
      v-bind="$attrs"
      v-model="showDialog"
      :title="title"
      :width="width"
      align-center
      :before-close="beforeClose"
      :show-close="false"
      :append-to-body="$util.isValue($attrs.appendToBody) ? $attrs.appendToBody : true"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
  >
    <template #header>
      <div class="_cus-dialog-head" v-if="title">
        <div class="__cdh-title">{{title}}</div>
        <div class="__cdh-slot">
          <slot name="head"/>
        </div>
        <div class="__cdh-close __hover" @click="CDClose()">
          <SvgIcon name="close_3" size="16" color="#ffffff"/>
        </div>
      </div>
    </template>
    <div class="__cus-dialog-main" :class="{isFull: full !== false}" v-loading="loading">
      <div class="__cus-dialog-content">
        <slot/>
      </div>
      <div class="__cus-dialog-foot" :style="`justify-content: ${footAlign};padding: ${footPadding};`" v-if="showSubmit || showClose || $slots.foot">
        <slot name="foot" :close="CDClose" :submit="CDSubmit"/>
        <template v-if="footAlign === 'center'">
          <div v-if="showSubmit" class="__cus-dialog-foot_submit __hover" @click="CDSubmit">{{submitText}}</div>
          <div v-if="showClose" class="__cus-dialog-foot_cancel __hover" @click="CDClose()">{{closeText}}</div>
        </template>
        <template v-else>
          <div v-if="showClose" class="__cus-dialog-foot_cancel __hover" @click="CDClose()">{{closeText}}</div>
          <div v-if="showSubmit" class="__cus-dialog-foot_submit __hover" @click="CDSubmit">{{submitText}}</div>
        </template>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import { v4 } from "uuid";
import {useDialogLevelStore} from "@/stores/dialog-level";

export default defineComponent({
  name: 'CusDialog',
  components: {},
  props: {
    show: {required: true, type: Boolean},
    title: {default: ''},
    width: {default: '50%'},
    full: {default: false},
    submitText: {default: '确定'},
    closeText: {default: '取消'},
    showClose: {default: true},
    showSubmit: {default: true},
    footAlign: {default: 'center'},
    footPadding: {default: '16px 26px'},
    height: {default: '60%'},
    maxHeight: {default: 'unset'},
    minHeight: {default: 'unset'},
    closeOnClickModal: {default: false},
    closeOnPressEscape: {default: false},
    closeConfirm: {default: false},
    closeConfirmText: {default: {
      title: null,
      message: null,
      submit: null,
      close: null,
    }},
    loading: {
      default: false,
      type: Boolean
    },
    hiddenStyle: {
      default: false
    }
  },
  setup(props, {emit}) {
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const DialogLevelStore = useDialogLevelStore()
    const state = reactive({
      showDialog: false,
      closeConfirmTextTemp: {
        title: '提示',
        message: '请确认是否关闭？',
        submit: '确定',
        close: '取消',
      },
      uuid: v4()
    })
    watch(() => props.show, (n) => {
      state.showDialog = n
      if (n) {
        DialogLevelStore.add(state.uuid)
      } else {
        DialogLevelStore.del(state.uuid)
      }
    }, {immediate: true})
    const beforeClose = (done) => {
      CDClose(done)
    }
    const closeConfirmTextCpt: any = computed(() => {
      return {
        title: that.$util.isValue(props.closeConfirmText.title) ? props.closeConfirmText.title : state.closeConfirmTextTemp.title,
        message: that.$util.isValue(props.closeConfirmText.message) ? props.closeConfirmText.message : state.closeConfirmTextTemp.message,
        submit: that.$util.isValue(props.closeConfirmText.submit) ? props.closeConfirmText.submit : state.closeConfirmTextTemp.submit,
        close: that.$util.isValue(props.closeConfirmText.close) ? props.closeConfirmText.close : state.closeConfirmTextTemp.close,
      }
    })
    const CDClose = async (done = () => {}) => {
      if (props.closeConfirm !== false) {
        await ElMessageBox.confirm(closeConfirmTextCpt.value.message, closeConfirmTextCpt.value.title, {
          confirmButtonText: closeConfirmTextCpt.value.submit,
          cancelButtonText: closeConfirmTextCpt.value.close,
          type: "warning",
        }).then(() => {
          emit('update:show', false)
          emit('onClose')
          done()
        }).catch(() => {})
      } else {
        emit('update:show', false)
        emit('onClose')
        done()
      }
    }
    const CDSubmit = () => {
      emit('onSubmit')
    }
    onMounted(() => {
      state.showDialog = props.show
    })
    return {
      ...toRefs(state),
      beforeClose,
      CDClose,
      CDSubmit,
    }
  },
})
</script>

<style scoped lang="scss">

</style>