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

<template>
  <div
    class="__czr-dialog"
    v-drag="{ ...layout }"
    v-if="state.showDialog"
    :style="{ zIndex: state.zIndex }"
    @click="() => (state.zIndex = DialogStore.addZIndex())"
  >
    <div class="el-dialog" style="width: 100%; margin: 0">
      <div class="el-dialog__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>
      </div>
      <div class="el-dialog__body">
        <div
          class="__czr-dialog-main"
          :class="{ isFull: full !== false }"
          v-loading="loading"
        >
          <div class="__czr-dialog-content">
            <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>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useDialogStore } from '@/stores'

defineOptions({
  name: 'CzrDialogDrag',
})
import { isValue } from '@/utils/czr-util'
import { computed, onMounted, reactive, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { v4 } from 'uuid'

const DialogStore = useDialogStore()
const emit = defineEmits(['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' },
  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,
  },
  zIndex: {},
  layout: { default: {} },
})
const state = reactive({
  showDialog: false,
  closeConfirmTextTemp: {
    title: '提示',
    message: '请确认是否关闭？',
    submit: '确定',
    close: '取消',
  },
  uuid: v4(),
  zIndex: props.zIndex || DialogStore.addZIndex(),
})
watch(
  () => props.show,
  (n) => {
    state.showDialog = n
  },
)
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>