cbjsxt-front-master/src/components/costAudit/CostAuditDialog.vue

<template>
  <el-dialog
    :title="title"
    :visible="visible"
    :width="width"
    :top="top"
    :modal="modal"
    :modal-append-to-body="modalAppendToBody"
    :append-to-body="appendToBody"
    :lock-scroll="lockScroll"
    :custom-class="customClass"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :show-close="showClose"
    :before-close="handleBeforeClose"
    v-bind="mergedDialogProps"
    :style="{ minWidth: '650px' }"
    @open="handleOpen"
    @close="handleClose"
    @closed="handleClosed"
  >
    <!-- 弹窗内容 -->
    <div class="dialog-content">
      <slot></slot>
    </div>

    <!-- 弹窗底部按钮 -->
    <div v-if="showFooter" slot="footer" class="dialog-footer">
      <slot name="footer">
        <el-button
          v-if="showConfirmBtn"
          :type="confirmBtnType"
          :loading="confirmLoading"
          :disabled="confirmDisabled"
          @click="handleConfirm"
        >
          {{ confirmText }}
        </el-button>
        <el-button @click="handleCancel">
          {{ cancelText }}
        </el-button>
      </slot>
    </div>
  </el-dialog>
</template>

<script>
  import PopupManager from 'element-ui/lib/utils/popup'

  export default {
    name: 'CostAuditDialog',
    props: {
      // 弹窗标题
      title: {
        type: String,
        default: '提示',
      },
      // 弹窗是否可见
      visible: {
        type: Boolean,
        default: false,
      },
      // 弹窗宽度
      width: {
        type: String,
        default: '50%',
      },
      // 弹窗距离顶部的距离
      top: {
        type: String,
        default: '15vh',
      },
      // 是否显示遮罩
      modal: {
        type: Boolean,
        default: true,
      },
      // 遮罩是否插入至body元素上
      modalAppendToBody: {
        type: Boolean,
        default: true,
      },
      // 弹窗是否插入至body元素上
      appendToBody: {
        type: Boolean,
        default: true,
      },
      // 是否在显示弹窗时将body滚动锁定
      lockScroll: {
        type: Boolean,
        default: true,
      },
      // 自定义类名
      customClass: {
        type: String,
        default: '',
      },
      // 是否可以通过点击遮罩关闭弹窗
      closeOnClickModal: {
        type: Boolean,
        default: true,
      },
      // 是否可以通过按下ESC键关闭弹窗
      closeOnPressEscape: {
        type: Boolean,
        default: true,
      },
      // 是否显示关闭按钮
      showClose: {
        type: Boolean,
        default: true,
      },
      // 是否显示确认按钮
      showConfirmBtn: {
        type: Boolean,
        default: true,
      },
      // 确认按钮文本
      confirmText: {
        type: String,
        default: '确认',
      },
      // 取消按钮文本
      cancelText: {
        type: String,
        default: '取消',
      },
      // 确认按钮类型
      confirmBtnType: {
        type: String,
        default: 'primary',
      },
      // 确认按钮加载状态
      confirmLoading: {
        type: Boolean,
        default: false,
      },
      // 确认按钮是否禁用
      confirmDisabled: {
        type: Boolean,
        default: false,
      },
      // 额外的弹窗属性
      dialogProps: {
        type: Object,
        default: () => ({}),
      },
      // 弹窗层级
      zIndex: {
        type: Number,
        default: 2000,
      },
      // 是否显示底部按钮
      showFooter: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        currentZIndex: 2000,
      }
    },
    computed: {
      mergedDialogProps() {
        return {
          ...this.dialogProps,
          // 保留用户传入的值，不硬编码覆盖
          'modal-append-to-body': this.modalAppendToBody,
          'append-to-body': this.appendToBody,
        }
      },
      effectiveZIndex() {
        // 确保返回的zIndex值总是有效且足够大
        return this.currentZIndex || this.zIndex || 2000
      },
    },
    methods: {
      // 处理弹窗打开前的钩子
      handleBeforeClose(done) {
        this.$emit('cancel')
      },

      // 处理弹窗打开
      handleOpen() {
        // 打开时获取下一个可用的全局zIndex，确保位于最顶层
        try {
          const next =
            PopupManager && typeof PopupManager.nextZIndex === 'function'
              ? PopupManager.nextZIndex()
              : this.zIndex || 2000
          // 如果外部已传更高的zIndex，则取更高值
          this.currentZIndex = Math.max(next, this.zIndex || 0)
        } catch (e) {
          this.currentZIndex = this.zIndex || 2000
        }
        this.$emit('open')
      },

      // 处理弹窗关闭
      handleClose() {
        this.$emit('update:visible', false)
        this.$emit('close')
      },

      // 处理弹窗关闭后的钩子
      handleClosed() {
        this.$emit('closed')
      },

      // 处理确认按钮点击
      handleConfirm() {
        this.$emit('confirm')
      },

      // 处理取消按钮点击
      handleCancel() {
        this.$emit('cancel')
      },

      // 手动关闭弹窗
      close() {
        this.$emit('update:visible', false)
      },

      // 手动打开弹窗
      open() {
        this.$emit('update:visible', true)
      },
    },
  }
</script>

<style scoped>
  .dialog-content {
    min-height: 50px;
    max-height: 520px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .dialog-footer {
    text-align: right;
  }
</style>