DigitalHuman-web/src/components/CustomDialog/index.vue

<template>
  <el-dialog
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :title="parameter.title"
    :destroy-on-close="true"
    :width="parameter.width"
    :top="parameter.top"
    draggable
  >
    <slot name="default" :parameter="parameter"></slot>
    <template #footer>
      <span class="dialog-footer">
        <slot name="footer" :parameter="parameter"></slot>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="FormDialog">
export interface FormParameterProps {
  title: string // 标题
  width?: number // 弹框宽度
  isEdit?: boolean // 是否编辑
  top?: string // 离顶部距离
  model: Record<string, any>
  api?: (params: any) => Promise<any> // 提交api
}
// dialog状态
const dialogVisible = ref(false)
const butLoading = ref(false)
// 父组件传过来的参数
const parameter = ref<FormParameterProps>({
  title: '',
  width: 1250,
  top: '8vh',
  isEdit: true,
  model: {},
  api: undefined
})

// 取消按钮，重置表单，关闭弹框
const handleCancel = () => {
  butLoading.value = false
  dialogVisible.value = false
}

// 接收父组件参数
const openDialog = (params: FormParameterProps) => {
  parameter.value = { ...parameter.value, ...params }
  butLoading.value = false
  dialogVisible.value = true
}

defineExpose({
  openDialog,
  handleCancel
})
</script>