big-model-web/src/components/czr-ui/CzrDialog.vue

<template>
  <el-dialog
    :style="`
        --czr-dialog_height: ${height};
        --czr-dialog_max-height: ${maxHeight};
        --czr-dialog_min-height: ${minHeight};
      `"
    :modal-class="`
        ${state.uuid}
        __czr-dialog ${maxHeight === 'unset' ? '' : '__czr-dialog-auto-height'} ${hiddenStyle ? '__czr-dialog-hidden-style' : ''}
      `"
    v-bind="$attrs"
    v-model="state.showDialog"
    :title="title"
    :width="width"
    align-center
    :before-close="beforeClose"
    :show-close="false"
    :append-to-body="isValue($attrs.appendToBody) ? $attrs.appendToBody : true"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
  >
    <template #header>
      <div class="_czr-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="czr_close" size="16" color="#303133" />
        </div>
      </div>
    </template>
    <div
      class="__czr-dialog-main"
      :class="{ isFull: full !== false }"
      v-loading="loading"
    >
      <div
        class="__czr-dialog-content"
        :class="{ 'no-foot': !(showClose || showSubmit) }"
      >
        <slot />
      </div>
      <div
        class="__czr-dialog-foot"
        :style="`justify-content: ${footAlign};`"
        v-if="showSubmit || showClose || $slots.foot"
      >
        <slot name="foot" :close="CDClose" :submit="CDSubmit" />
        <template v-if="footAlign === 'center'">
          <div
            v-if="showSubmit"
            class="__czr-dialog-foot_submit __hover"
            @click="CDSubmit"
          >
            {{ submitText }}
          </div>
          <div
            v-if="showClose"
            class="__czr-dialog-foot_cancel __hover"
            @click="CDClose()"
          >
            {{ closeText }}
          </div>
        </template>
        <template v-else>
          <div
            v-if="showClose"
            class="__czr-dialog-foot_cancel __hover"
            @click="CDClose()"
          >
            {{ closeText }}
          </div>
          <div
            v-if="showSubmit"
            class="__czr-dialog-foot_submit __hover"
            @click="CDSubmit"
          >
            {{ submitText }}
          </div>
        </template>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
defineOptions({
  name: 'CzrDialog',
})
import { isValue } from '@/utils/czr-util'
import { computed, onMounted, reactive, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { v4 } from 'uuid'
import { useDialogStore } from '@/stores'

const emit = defineEmits(['onSubmit', 'update:show', 'onClose'])
const props = defineProps({
  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: 'auto' },
  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,
  },
})
const DialogLevelStore = useDialogStore()
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)
    }
  },
)
const beforeClose = (done) => {
  CDClose(done)
}
const closeConfirmTextCpt: any = computed(() => {
  return {
    title: isValue(props.closeConfirmText.title)
      ? props.closeConfirmText.title
      : state.closeConfirmTextTemp.title,
    message: isValue(props.closeConfirmText.message)
      ? props.closeConfirmText.message
      : state.closeConfirmTextTemp.message,
    submit: isValue(props.closeConfirmText.submit)
      ? props.closeConfirmText.submit
      : state.closeConfirmTextTemp.submit,
    close: 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
})
</script>

<style scoped lang="scss"></style>