zhangwencui
昨天 b64327757facf54c63c6b8cb5aedfd18ea8cdc33
src/components/Dialog/FormDialog.vue
@@ -1,24 +1,20 @@
<template>
  <el-dialog
    v-model="dialogVisible"
    :title="computedTitle"
    :width="width"
    @close="handleClose"
  >
  <el-dialog v-model="dialogVisible"
             :title="computedTitle"
             :width="width"
             @close="handleClose">
    <slot></slot>
    <template #footer>
      <div class="dialog-footer">
        <!-- 自定义按钮插槽 -->
        <slot name="footer">
          <!-- 默认按钮 -->
          <el-button
            v-if="showConfirm"
            type="primary"
            @click="handleConfirm"
          >
          <el-button v-if="showConfirm"
                     type="primary"
                     :loading="loading"
                     @click="handleConfirm">
            确认
          </el-button>
          <el-button @click="handleCancel">取消</el-button>
          <el-button :disabled="loading" @click="handleCancel">取消</el-button>
        </slot>
      </div>
    </template>
@@ -26,61 +22,65 @@
</template>
<script setup>
import { computed } from 'vue'
  import { computed } from "vue";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: [String, Function],
    default: ''
  },
  operationType: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '70%'
  }
})
  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    title: {
      type: [String, Function],
      default: "",
    },
    operationType: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "70%",
    },
    loading: {
      type: Boolean,
      default: false,
    },
  });
const emit = defineEmits(['update:modelValue', 'close', 'confirm', 'cancel'])
  const emit = defineEmits(["update:modelValue", "close", "confirm", "cancel"]);
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})
  const dialogVisible = computed({
    get: () => props.modelValue,
    set: val => emit("update:modelValue", val),
  });
// 详情模式不展示“确认”按钮,其它类型正常显示
const showConfirm = computed(() => props.operationType !== 'detail')
  // 详情模式不展示“确认”按钮,其它类型正常显示
  const showConfirm = computed(() => props.operationType !== "detail");
const computedTitle = computed(() => {
  if (typeof props.title === 'function') {
    return props.title(props.operationType)
  }
  return props.title
})
  const computedTitle = computed(() => {
    if (typeof props.title === "function") {
      return props.title(props.operationType);
    }
    return props.title;
  });
const handleClose = () => {
  emit('close')
}
  const handleClose = () => {
    emit("close");
  };
const handleConfirm = () => {
  emit('confirm')
}
  const handleConfirm = () => {
    emit("confirm");
  };
const handleCancel = () => {
  emit('cancel')
  dialogVisible.value = false
}
  const handleCancel = () => {
    emit("cancel");
    dialogVisible.value = false;
  };
</script>
<style scoped>
.dialog-footer {
  text-align: center;
}
  .dialog-footer {
    text-align: center;
  }
</style>