@ebiz/designer-components 0.1.1 → 0.1.4

package/src/components/senior/EbizSDialog/index.vue

@@ -1,716 +1,716 @@
-<template>
-  <div class="ebiz-tdesign-button-dialog">
-    <div v-if="$slots.trigger" @click="openDialog">
-      <slot name="trigger"></slot>
-    </div>
-    <t-dialog v-model:visible="dialogVisible" :header="title || computedTitle" :width="dialogWidth" :top="dialogTop"
-      :attach="dialogAttach" :destroy-on-close="dialogDestroyOnClose" :mode="dialogMode" :placement="dialogPlacement"
-      :show-overlay="dialogShowOverlay" :close-on-esc-keydown="dialogCloseOnEscKeydown"
-      :close-on-overlay-click="dialogCloseOnOverlayClick" :show-footer="dialogShowFooter" @close="handleDialogClose"
-      @confirm="handleDialogConfirm" @cancel="handleDialogCancel">
-      <template #header>
-        <slot name="header">
-          <div :class="['dialog-header', dialogType === 'delete' ? 'dialog-header-delete' : '']">
-            {{ title || computedTitle }}
-          </div>
-        </slot>
-      </template>
-
-      <template #body>
-        <div v-if="dialogType === 'normal'">
-          <slot name="body"></slot>
-        </div>
-        <div v-else-if="dialogType === 'add'">
-          <t-form ref="formRef" :colon="colon" :data="localFormData" :disabled="disabled" :label-align="labelAlign"
-            :label-width="labelWidth" :layout="layout" :reset-type="resetType"
-            :reset-on-semi-controlled="resetOnSemiControlled" :rules="rules" :show-error-message="showErrorMessage"
-            :status-icon="statusIcon" :style="customStyle" @reset="handleReset" @submit="handleSubmit"
-            @validate="handleValidate">
-            <slot name="body"></slot>
-          </t-form>
-        </div>
-        <div v-else-if="dialogType === 'edit'">
-          <t-form ref="formRef" :colon="colon" :data="localFormData" :disabled="disabled" :label-align="labelAlign"
-            :label-width="labelWidth" :layout="layout" :reset-type="resetType"
-            :reset-on-semi-controlled="resetOnSemiControlled" :rules="rules" :show-error-message="showErrorMessage"
-            :status-icon="statusIcon" :style="customStyle" @reset="handleReset" @submit="handleSubmit"
-            @validate="handleValidate">
-            <slot name="body"></slot>
-          </t-form>
-        </div>
-        <slot v-else-if="dialogType === 'delete'" name="body">
-          <div class="delete-confirm-content">
-            <t-icon name="error-circle" size="large" class="delete-icon" />
-            <p class="delete-message">{{ deleteConfirmMessage }}</p>
-          </div>
-        </slot>
-      </template>
-    </t-dialog>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch } from 'vue'
-import { Dialog as TDialog, MessagePlugin, Icon as TIcon, Form as TForm } from 'tdesign-vue-next'
-import dataService from '../../../apiService/simpleDataService'
-
-const props = defineProps({
-  // 弹窗类型
-  dialogType: {
-    type: String,
-    default: 'normal', // 'normal', 'add', 'delete'
-    validator: (value) => ['normal', 'add', 'edit', 'delete'].includes(value)
-  },
-
-  // 删除确认消息
-  deleteConfirmMessage: {
-    type: String,
-    default: '确定要删除该数据吗？此操作不可逆，请谨慎操作。'
-  },
-
-  // 按钮基础属性
-  buttonText: {
-    type: String,
-    default: ''
-  },
-  // 按钮样式属性
-  buttonTheme: {
-    type: String,
-    default: ''
-  },
-  buttonVariant: {
-    type: String,
-    default: 'base'
-  },
-  buttonSize: {
-    type: String,
-    default: 'medium'
-  },
-  buttonBlock: {
-    type: Boolean,
-    default: false
-  },
-  buttonShape: {
-    type: String,
-    default: 'rectangle'
-  },
-  buttonDisabled: {
-    type: Boolean,
-    default: false
-  },
-  buttonLoading: {
-    type: Boolean,
-    default: false
-  },
-  buttonIcon: {
-    type: String,
-    default: ''
-  },
-
-  // 弹窗基础属性
-  title: {
-    type: String,
-    default: ''
-  },
-  visible: {
-    type: Boolean,
-    default: false
-  },
-  confirmText: {
-    type: String,
-    default: undefined
-  },
-  cancelText: {
-    type: String,
-    default: undefined
-  },
-
-  // 弹窗样式和行为属性
-  dialogWidth: {
-    type: [String, Number],
-    default: '500px'
-  },
-  dialogTop: {
-    type: [String, Number],
-    default: '15vh'
-  },
-  dialogAttach: {
-    type: [String, Function],
-    default: 'body'
-  },
-  dialogDestroyOnClose: {
-    type: Boolean,
-    default: false
-  },
-  dialogMode: {
-    type: String,
-    default: 'modal'
-  },
-  dialogPlacement: {
-    type: String,
-    default: 'top'
-  },
-  dialogShowOverlay: {
-    type: Boolean,
-    default: true
-  },
-  dialogCloseOnEscKeydown: {
-    type: Boolean,
-    default: true
-  },
-  dialogCloseOnOverlayClick: {
-    type: Boolean,
-    default: true
-  },
-  dialogShowFooter: {
-    type: Boolean,
-    default: true
-  },
-
-  // API配置
-  apiConfig: {
-    type: Object,
-    default: () => null
-  },
-
-  // 请求参数
-  params: {
-    type: Object,
-    default: () => null
-  },
-
-  // 表单数据
-  formData: {
-    type: Object,
-    default: () => null
-  },
-
-  // 表单验证规则
-  rules: {
-    type: Object,
-    default: () => null
-  },
-
-  // 是否在API调用成功后自动关闭弹窗
-  closeOnSuccess: {
-    type: Boolean,
-    default: true
-  },
-  // 是否显示API调用的结果消息
-  showResultMessage: {
-    type: Boolean,
-    default: true
-  },
-
-  // 表单组件属性
-  colon: {
-    type: Boolean,
-    default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  labelAlign: {
-    type: String,
-    default: 'right'
-  },
-  labelWidth: {
-    type: [String, Number],
-    default: '100px'
-  },
-  layout: {
-    type: String,
-    default: 'vertical'
-  },
-  resetType: {
-    type: String,
-    default: 'empty'
-  },
-  resetOnSemiControlled: {
-    type: Boolean,
-    default: false
-  },
-  showErrorMessage: {
-    type: Boolean,
-    default: true
-  },
-  statusIcon: {
-    type: Boolean,
-    default: false
-  },
-  customStyle: {
-    type: Object,
-    default: () => ({})
-  },
-
-  // 详情API配置，用于编辑模式加载数据
-  detailApiConfig: {
-    type: Object,
-    default: () => null
-  },
-})
-
-const emit = defineEmits([
-  'update:visible',
-  'button-click',
-  'dialog-close',
-  'dialog-confirm',
-  'dialog-cancel',
-  'api-success',
-  'api-error',
-  'reset',
-  'submit',
-  'submit-error',
-  'validate',
-  'detail-loaded',
-  'detail-error'
-])
-
-const computedTitle = computed(() => {
-  switch (props.dialogType) {
-    case 'add': return '添加数据';
-    case 'delete': return '删除确认';
-    case 'edit': return '编辑数据';
-    default: return '标题';
-  }
-})
-
-// 初始化dialogVisible
-const dialogVisible = ref(props.visible)
-const apiLoading = ref(false)
-const formRef = ref(null)
-const currentId = ref(null)
-const currentParams = ref({})
-// 本地维护一份表单数据的副本
-const localFormData = computed(() => {
-  return props.formData ? { ...props.formData } : {}
-})
-
-// 监听props的visible变化
-watch(() => props.visible, (newVal) => {
-  dialogVisible.value = newVal
-})
-
-// 监听dialogVisible变化，同步更新modelValue
-watch(dialogVisible, (newVal) => {
-  emit('update:visible', newVal)
-})
-
-// 弹窗关闭事件
-const handleDialogClose = (e) => {
-  dialogVisible.value = false
-  emit('dialog-close', e)
-}
-
-// API调用方法
-// 获取错误消息
-const getErrorMessage = (error, dialogType) => {
-  const errorPrefix = dialogType === 'delete'
-    ? '删除失败'
-    : dialogType === 'add'
-      ? '添加失败'
-      : dialogType === 'edit'
-        ? '修改失败'
-        : '操作失败'
-
-  if (!error) return `${errorPrefix}: 未知错误`
-
-  // 处理不同类型的错误
-  if (error.response && error.response.data) {
-    // API返回的详细错误信息
-    const { message, msg, error: errMsg } = error.response.data
-    return `${errorPrefix}: ${message || msg || errMsg || error.message || '服务器返回错误'}`
-  } else if (error.message) {
-    // 标准错误对象
-    return `${errorPrefix}: ${error.message}`
-  } else if (typeof error === 'string') {
-    // 字符串错误
-    return `${errorPrefix}: ${error}`
-  } else {
-    // 未知错误
-    return `${errorPrefix}: 未知错误`
-  }
-}
-
-const callApi = async (config = props.apiConfig) => {
-  if (!config) return null
-
-  try {
-    apiLoading.value = true
-
-    // 准备请求参数
-    const fetchParams = { ...localFormData.value, ...props.formData }
-
-    // 如果有ID，添加到请求参数中
-    if (currentId.value) {
-      fetchParams.id = currentId.value
-    }
-
-    // 合并当前参数到请求参数
-    if (currentParams.value && Object.keys(currentParams.value).length > 0) {
-      Object.keys(currentParams.value).forEach(key => {
-        if (key !== 'formData') { // 避免重复添加表单数据
-          fetchParams[key] = currentParams.value[key]
-        }
-      })
-    }
-
-    // 调用dataService进行API请求，直接使用config
-    config.apiType = 'PROCESS'
-    const response = await dataService.fetch({ detailId: fetchParams.detailId || fetchParams.id, saveData: { ...fetchParams } }, config)
-
-    // 显示成功消息
-    if (props.showResultMessage) {
-      const successMessage = props.dialogType === 'delete'
-        ? '删除成功'
-        : props.dialogType === 'add'
-          ? '添加成功'
-          : props.dialogType === 'edit'
-            ? '修改成功'
-            : '操作成功'
-      MessagePlugin.success(successMessage)
-    }
-
-    // 触发成功事件
-    emit('api-success', response)
-
-    // 如果设置了成功后关闭，则关闭弹窗
-    if (props.closeOnSuccess) {
-      dialogVisible.value = false
-    }
-
-    return response
-  } catch (error) {
-    // 错误处理和错误消息展示
-    const errorMessage = getErrorMessage(error, props.dialogType)
-
-    // 显示错误消息
-    if (props.showResultMessage) {
-      MessagePlugin.error(errorMessage)
-    }
-
-    // 触发错误事件
-    emit('api-error', error)
-
-    throw error // 继续抛出错误以便上层捕获
-  } finally {
-    apiLoading.value = false
-  }
-}
-
-// 弹窗确认事件
-const handleDialogConfirm = async (e) => {
-  emit('dialog-confirm', e)
-
-  // 对于非普通类型的弹窗，总是尝试调用API
-  if (props.dialogType !== 'normal') {
-    if (props.apiConfig) {
-
-      // 如果是表单类型（添加或编辑），先进行表单校验
-      if ((props.dialogType === 'add' || props.dialogType === 'edit') && formRef.value) {
-
-        try {
-          // 显示加载状态
-          apiLoading.value = true
-
-          // 使用表单的validate方法进行校验
-          const validateResult = await formRef.value.validate()
-
-          // 校验成功，执行提交操作
-          if (validateResult === true) {
-            // 直接调用callApi传入props.apiConfig
-            await callApi(props.apiConfig)
-          } else {
-            // 校验失败，显示第一个错误信息
-            const firstError = validateResult[Object.keys(validateResult)[0]]?.[0]?.message || '表单校验失败'
-            MessagePlugin.error(firstError)
-            emit('submit-error', { validateResult, firstError })
-            return // 阻止关闭弹窗
-          }
-        } catch (error) {
-          // 校验或API调用过程中的错误
-          MessagePlugin.error(`操作失败: ${error.message || '未知错误'}`)
-          emit('submit-error', { error })
-          return // 阻止关闭弹窗
-        } finally {
-          apiLoading.value = false
-        }
-      } else if (props.dialogType === 'delete') {
-        try {
-          // 显示加载状态
-          apiLoading.value = true
-
-          // 删除操作直接调用API
-          await callApi(props.apiConfig)
-        } catch (error) {
-          // API调用过程中的错误
-          MessagePlugin.error(`删除失败: ${error.message || '未知错误'}`)
-          emit('api-error', error)
-          return // 阻止关闭弹窗
-        } finally {
-          apiLoading.value = false
-        }
-      }
-    } else {
-      dialogVisible.value = false
-    }
-  } else {
-    // 普通弹窗的行为
-    if (props.apiConfig) {
-      try {
-        // 显示加载状态
-        apiLoading.value = true
-
-        // 直接调用API，不修改apiConfig
-        await callApi(props.apiConfig)
-      } catch (error) {
-        // API调用过程中的错误
-        MessagePlugin.error(`操作失败: ${error.message || '未知错误'}`)
-        emit('api-error', error)
-        return // 阻止关闭弹窗
-      } finally {
-        apiLoading.value = false
-      }
-    } else {
-      dialogVisible.value = false
-    }
-  }
-}
-
-// 弹窗取消事件
-const handleDialogCancel = (e) => {
-  dialogVisible.value = false
-  emit('dialog-cancel', e)
-}
-
-// 表单重置事件
-const handleReset = (e) => {
-  emit('reset', e)
-}
-
-// 表单提交事件
-const handleSubmit = async ({ validateResult, firstError, e }) => {
-  if (validateResult === true) {
-    emit('submit', { e, formData: localFormData.value })
-  } else {
-    MessagePlugin.error(firstError)
-    emit('submit-error', { validateResult, firstError })
-  }
-}
-
-// 表单验证事件
-const handleValidate = (params) => {
-  emit('validate', params)
-}
-
-// 加载详情数据
-const loadDetailData = async (id) => {
-  if (!props.detailApiConfig) return null
-
-  try {
-    // 显示加载状态
-    apiLoading.value = true
-
-    // 准备请求参数
-    const fetchParams = { id }
-
-    // 合并当前参数到请求参数
-    if (currentParams.value && Object.keys(currentParams.value).length > 0) {
-      // 过滤掉id和formData，避免重复
-      const { id: _id, formData: _formData, ...otherParams } = currentParams.value
-      Object.keys(otherParams).forEach(key => {
-        fetchParams[key] = otherParams[key]
-      })
-    }
-
-    // 调用dataService进行API请求，直接使用detailApiConfig
-    const response = await dataService.fetch(fetchParams, props.detailApiConfig)
-
-    // 获取详情数据
-    const detailData = response.data || response
-
-    // 更新本地表单数据
-    if (detailData) {
-      // 清空现有数据
-      Object.keys(localFormData.value).forEach(key => {
-        delete localFormData.value[key]
-      })
-
-      // 写入新数据
-      Object.keys(detailData).forEach(key => {
-        localFormData.value[key] = detailData[key]
-      })
-    }
-
-    // 触发加载成功事件
-    emit('detail-loaded', detailData)
-    return detailData
-  } catch (error) {
-    // 显示错误消息
-    if (props.showResultMessage) {
-      MessagePlugin.error(`加载详情失败: ${error.message || '未知错误'}`)
-    }
-
-    // 触发错误事件
-    emit('detail-error', error)
-    return null
-  } finally {
-    apiLoading.value = false
-  }
-}
-
-// 打开弹窗并传递参数
-const openDialog = (params = {}) => {
-  params = { ...params, ...props.params }
-  // 重置状态
-  if (props.dialogType === 'add') {
-    // 添加模式：清空表单数据
-    Object.keys(localFormData.value).forEach(key => {
-      delete localFormData.value[key]
-    })
-  }
-
-  // 处理传入的表单数据
-  if (params.formData && (props.dialogType === 'add' || props.dialogType === 'edit')) {
-    // 更新本地表单数据副本
-    Object.keys(params.formData).forEach(key => {
-      localFormData.value[key] = params.formData[key]
-    })
-  }
-
-  // 存储其他参数，如删除ID等
-  if (params.id) {
-    currentId.value = params.id
-
-    // 如果是编辑模式且有detailApiConfig，加载详情数据
-    if (props.dialogType === 'edit' && props.detailApiConfig) {
-      loadDetailData(params.id)
-    }
-  } else {
-    currentId.value = null
-  }
-
-  // 存储其他自定义参数
-  currentParams.value = params
-
-  // 打开弹窗
-  dialogVisible.value = true
-
-  return { success: true, message: '弹窗已打开' }
-}
-
-// 关闭弹窗
-const closeDialog = () => {
-  dialogVisible.value = false
-  return { success: true, message: '弹窗已关闭' }
-}
-
-// 重置表单数据到初始状态
-const resetFormData = () => {
-  if (formRef.value) {
-    formRef.value.reset()
-    emit('reset', { type: 'manual' })
-  }
-
-  return { success: true, message: '表单已重置' }
-}
-
-// 清空表单数据
-const clearFormData = () => {
-  // 清空表单数据
-  Object.keys(localFormData.value).forEach(key => {
-    delete localFormData.value[key]
-  })
-
-  emit('reset', { type: 'clear' })
-  return { success: true, message: '表单数据已清空' }
-}
-
-// 设置表单数据
-const setFormData = (data) => {
-  if (!data || typeof data !== 'object') {
-    return { success: false, message: '数据必须是一个对象' }
-  }
-
-  // 清空现有数据
-  Object.keys(localFormData.value).forEach(key => {
-    delete localFormData.value[key]
-  })
-
-  // 写入新数据
-  Object.keys(data).forEach(key => {
-    localFormData.value[key] = data[key]
-  })
-
-  return { success: true, message: '表单数据已设置' }
-}
-
-// 获取表单数据
-const getFormData = () => {
-  return { ...localFormData.value }
-}
-
-// 获取表单的当前验证状态
-const validateForm = async () => {
-  if (!formRef.value) {
-    return { success: false, message: '表单引用不存在' }
-  }
-
-  try {
-    const validateResult = await formRef.value.validate()
-
-    if (validateResult === true) {
-      return { success: true, message: '表单验证通过', data: getFormData() }
-    } else {
-      const firstError = validateResult[Object.keys(validateResult)[0]]?.[0]?.message || '表单校验失败'
-      return { success: false, message: firstError, errors: validateResult }
-    }
-  } catch (error) {
-    return { success: false, message: error.message || '表单验证过程中发生错误' }
-  }
-}
-
-// 暴露给父组件的方法
-defineExpose({
-  openDialog,
-  closeDialog,
-  resetFormData,
-  clearFormData,
-  setFormData,
-  getFormData,
-  validateForm,
-  loadDetailData,
-  currentId,
-  currentParams,
-  formRef
-})
-</script>
-
-<style scoped>
-.ebiz-tdesign-button-dialog {
-  display: inline-block;
-}
-
-.dialog-header-delete {
-  color: var(--td-error-color, #e34d59);
-}
-
-.delete-confirm-content {
-  display: flex;
-  align-items: center;
-  padding: 16px;
-}
-
-.delete-icon {
-  font-size: 24px;
-  color: var(--td-error-color, #e34d59);
-  margin-right: 12px;
-}
-
-.delete-message {
-  margin: 0;
-  font-size: 14px;
-  line-height: 22px;
-}
+<template>
+  <div class="ebiz-tdesign-button-dialog">
+    <div v-if="$slots.trigger" @click="openDialog">
+      <slot name="trigger"></slot>
+    </div>
+    <t-dialog v-model:visible="dialogVisible" :header="title || computedTitle" :width="dialogWidth" :top="dialogTop"
+      :attach="dialogAttach" :destroy-on-close="dialogDestroyOnClose" :mode="dialogMode" :placement="dialogPlacement"
+      :show-overlay="dialogShowOverlay" :close-on-esc-keydown="dialogCloseOnEscKeydown"
+      :close-on-overlay-click="dialogCloseOnOverlayClick" :show-footer="dialogShowFooter" @close="handleDialogClose"
+      @confirm="handleDialogConfirm" @cancel="handleDialogCancel">
+      <template #header>
+        <slot name="header">
+          <div :class="['dialog-header', dialogType === 'delete' ? 'dialog-header-delete' : '']">
+            {{ title || computedTitle }}
+          </div>
+        </slot>
+      </template>
+
+      <template #body>
+        <div v-if="dialogType === 'normal'">
+          <slot name="body"></slot>
+        </div>
+        <div v-else-if="dialogType === 'add'">
+          <t-form ref="formRef" :colon="colon" :data="localFormData" :disabled="disabled" :label-align="labelAlign"
+            :label-width="labelWidth" :layout="layout" :reset-type="resetType"
+            :reset-on-semi-controlled="resetOnSemiControlled" :rules="rules" :show-error-message="showErrorMessage"
+            :status-icon="statusIcon" :style="customStyle" @reset="handleReset" @submit="handleSubmit"
+            @validate="handleValidate">
+            <slot name="body"></slot>
+          </t-form>
+        </div>
+        <div v-else-if="dialogType === 'edit'">
+          <t-form ref="formRef" :colon="colon" :data="localFormData" :disabled="disabled" :label-align="labelAlign"
+            :label-width="labelWidth" :layout="layout" :reset-type="resetType"
+            :reset-on-semi-controlled="resetOnSemiControlled" :rules="rules" :show-error-message="showErrorMessage"
+            :status-icon="statusIcon" :style="customStyle" @reset="handleReset" @submit="handleSubmit"
+            @validate="handleValidate">
+            <slot name="body"></slot>
+          </t-form>
+        </div>
+        <slot v-else-if="dialogType === 'delete'" name="body">
+          <div class="delete-confirm-content">
+            <t-icon name="error-circle" size="large" class="delete-icon" />
+            <p class="delete-message">{{ deleteConfirmMessage }}</p>
+          </div>
+        </slot>
+      </template>
+    </t-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { Dialog as TDialog, MessagePlugin, Icon as TIcon, Form as TForm } from 'tdesign-vue-next'
+import dataService from '../../../apiService/simpleDataService'
+
+const props = defineProps({
+  // 弹窗类型
+  dialogType: {
+    type: String,
+    default: 'normal', // 'normal', 'add', 'delete'
+    validator: (value) => ['normal', 'add', 'edit', 'delete'].includes(value)
+  },
+
+  // 删除确认消息
+  deleteConfirmMessage: {
+    type: String,
+    default: '确定要删除该数据吗？此操作不可逆，请谨慎操作。'
+  },
+
+  // 按钮基础属性
+  buttonText: {
+    type: String,
+    default: ''
+  },
+  // 按钮样式属性
+  buttonTheme: {
+    type: String,
+    default: ''
+  },
+  buttonVariant: {
+    type: String,
+    default: 'base'
+  },
+  buttonSize: {
+    type: String,
+    default: 'medium'
+  },
+  buttonBlock: {
+    type: Boolean,
+    default: false
+  },
+  buttonShape: {
+    type: String,
+    default: 'rectangle'
+  },
+  buttonDisabled: {
+    type: Boolean,
+    default: false
+  },
+  buttonLoading: {
+    type: Boolean,
+    default: false
+  },
+  buttonIcon: {
+    type: String,
+    default: ''
+  },
+
+  // 弹窗基础属性
+  title: {
+    type: String,
+    default: ''
+  },
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  confirmText: {
+    type: String,
+    default: undefined
+  },
+  cancelText: {
+    type: String,
+    default: undefined
+  },
+
+  // 弹窗样式和行为属性
+  dialogWidth: {
+    type: [String, Number],
+    default: '500px'
+  },
+  dialogTop: {
+    type: [String, Number],
+    default: '15vh'
+  },
+  dialogAttach: {
+    type: [String, Function],
+    default: 'body'
+  },
+  dialogDestroyOnClose: {
+    type: Boolean,
+    default: false
+  },
+  dialogMode: {
+    type: String,
+    default: 'modal'
+  },
+  dialogPlacement: {
+    type: String,
+    default: 'top'
+  },
+  dialogShowOverlay: {
+    type: Boolean,
+    default: true
+  },
+  dialogCloseOnEscKeydown: {
+    type: Boolean,
+    default: true
+  },
+  dialogCloseOnOverlayClick: {
+    type: Boolean,
+    default: true
+  },
+  dialogShowFooter: {
+    type: Boolean,
+    default: true
+  },
+
+  // API配置
+  apiConfig: {
+    type: Object,
+    default: () => null
+  },
+
+  // 请求参数
+  params: {
+    type: Object,
+    default: () => null
+  },
+
+  // 表单数据
+  formData: {
+    type: Object,
+    default: () => null
+  },
+
+  // 表单验证规则
+  rules: {
+    type: Object,
+    default: () => null
+  },
+
+  // 是否在API调用成功后自动关闭弹窗
+  closeOnSuccess: {
+    type: Boolean,
+    default: true
+  },
+  // 是否显示API调用的结果消息
+  showResultMessage: {
+    type: Boolean,
+    default: true
+  },
+
+  // 表单组件属性
+  colon: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  labelAlign: {
+    type: String,
+    default: 'right'
+  },
+  labelWidth: {
+    type: [String, Number],
+    default: '100px'
+  },
+  layout: {
+    type: String,
+    default: 'vertical'
+  },
+  resetType: {
+    type: String,
+    default: 'empty'
+  },
+  resetOnSemiControlled: {
+    type: Boolean,
+    default: false
+  },
+  showErrorMessage: {
+    type: Boolean,
+    default: true
+  },
+  statusIcon: {
+    type: Boolean,
+    default: false
+  },
+  customStyle: {
+    type: Object,
+    default: () => ({})
+  },
+
+  // 详情API配置，用于编辑模式加载数据
+  detailApiConfig: {
+    type: Object,
+    default: () => null
+  },
+})
+
+const emit = defineEmits([
+  'update:visible',
+  'button-click',
+  'dialog-close',
+  'dialog-confirm',
+  'dialog-cancel',
+  'api-success',
+  'api-error',
+  'reset',
+  'submit',
+  'submit-error',
+  'validate',
+  'detail-loaded',
+  'detail-error'
+])
+
+const computedTitle = computed(() => {
+  switch (props.dialogType) {
+    case 'add': return '添加数据';
+    case 'delete': return '删除确认';
+    case 'edit': return '编辑数据';
+    default: return '标题';
+  }
+})
+
+// 初始化dialogVisible
+const dialogVisible = ref(props.visible)
+const apiLoading = ref(false)
+const formRef = ref(null)
+const currentId = ref(null)
+const currentParams = ref({})
+// 本地维护一份表单数据的副本
+const localFormData = computed(() => {
+  return props.formData ? { ...props.formData } : {}
+})
+
+// 监听props的visible变化
+watch(() => props.visible, (newVal) => {
+  dialogVisible.value = newVal
+})
+
+// 监听dialogVisible变化，同步更新modelValue
+watch(dialogVisible, (newVal) => {
+  emit('update:visible', newVal)
+})
+
+// 弹窗关闭事件
+const handleDialogClose = (e) => {
+  dialogVisible.value = false
+  emit('dialog-close', e)
+}
+
+// API调用方法
+// 获取错误消息
+const getErrorMessage = (error, dialogType) => {
+  const errorPrefix = dialogType === 'delete'
+    ? '删除失败'
+    : dialogType === 'add'
+      ? '添加失败'
+      : dialogType === 'edit'
+        ? '修改失败'
+        : '操作失败'
+
+  if (!error) return `${errorPrefix}: 未知错误`
+
+  // 处理不同类型的错误
+  if (error.response && error.response.data) {
+    // API返回的详细错误信息
+    const { message, msg, error: errMsg } = error.response.data
+    return `${errorPrefix}: ${message || msg || errMsg || error.message || '服务器返回错误'}`
+  } else if (error.message) {
+    // 标准错误对象
+    return `${errorPrefix}: ${error.message}`
+  } else if (typeof error === 'string') {
+    // 字符串错误
+    return `${errorPrefix}: ${error}`
+  } else {
+    // 未知错误
+    return `${errorPrefix}: 未知错误`
+  }
+}
+
+const callApi = async (config = props.apiConfig) => {
+  if (!config) return null
+
+  try {
+    apiLoading.value = true
+
+    // 准备请求参数
+    const fetchParams = { ...localFormData.value, ...props.formData }
+
+    // 如果有ID，添加到请求参数中
+    if (currentId.value) {
+      fetchParams.id = currentId.value
+    }
+
+    // 合并当前参数到请求参数
+    if (currentParams.value && Object.keys(currentParams.value).length > 0) {
+      Object.keys(currentParams.value).forEach(key => {
+        if (key !== 'formData') { // 避免重复添加表单数据
+          fetchParams[key] = currentParams.value[key]
+        }
+      })
+    }
+
+    // 调用dataService进行API请求，直接使用config
+    config.apiType = 'PROCESS'
+    const response = await dataService.fetch({ detailId: fetchParams.detailId || fetchParams.id, saveData: { ...fetchParams } }, config)
+
+    // 显示成功消息
+    if (props.showResultMessage) {
+      const successMessage = props.dialogType === 'delete'
+        ? '删除成功'
+        : props.dialogType === 'add'
+          ? '添加成功'
+          : props.dialogType === 'edit'
+            ? '修改成功'
+            : '操作成功'
+      MessagePlugin.success(successMessage)
+    }
+
+    // 触发成功事件
+    emit('api-success', response)
+
+    // 如果设置了成功后关闭，则关闭弹窗
+    if (props.closeOnSuccess) {
+      dialogVisible.value = false
+    }
+
+    return response
+  } catch (error) {
+    // 错误处理和错误消息展示
+    const errorMessage = getErrorMessage(error, props.dialogType)
+
+    // 显示错误消息
+    if (props.showResultMessage) {
+      MessagePlugin.error(errorMessage)
+    }
+
+    // 触发错误事件
+    emit('api-error', error)
+
+    throw error // 继续抛出错误以便上层捕获
+  } finally {
+    apiLoading.value = false
+  }
+}
+
+// 弹窗确认事件
+const handleDialogConfirm = async (e) => {
+  emit('dialog-confirm', e)
+
+  // 对于非普通类型的弹窗，总是尝试调用API
+  if (props.dialogType !== 'normal') {
+    if (props.apiConfig) {
+
+      // 如果是表单类型（添加或编辑），先进行表单校验
+      if ((props.dialogType === 'add' || props.dialogType === 'edit') && formRef.value) {
+
+        try {
+          // 显示加载状态
+          apiLoading.value = true
+
+          // 使用表单的validate方法进行校验
+          const validateResult = await formRef.value.validate()
+
+          // 校验成功，执行提交操作
+          if (validateResult === true) {
+            // 直接调用callApi传入props.apiConfig
+            await callApi(props.apiConfig)
+          } else {
+            // 校验失败，显示第一个错误信息
+            const firstError = validateResult[Object.keys(validateResult)[0]]?.[0]?.message || '表单校验失败'
+            MessagePlugin.error(firstError)
+            emit('submit-error', { validateResult, firstError })
+            return // 阻止关闭弹窗
+          }
+        } catch (error) {
+          // 校验或API调用过程中的错误
+          MessagePlugin.error(`操作失败: ${error.message || '未知错误'}`)
+          emit('submit-error', { error })
+          return // 阻止关闭弹窗
+        } finally {
+          apiLoading.value = false
+        }
+      } else if (props.dialogType === 'delete') {
+        try {
+          // 显示加载状态
+          apiLoading.value = true
+
+          // 删除操作直接调用API
+          await callApi(props.apiConfig)
+        } catch (error) {
+          // API调用过程中的错误
+          MessagePlugin.error(`删除失败: ${error.message || '未知错误'}`)
+          emit('api-error', error)
+          return // 阻止关闭弹窗
+        } finally {
+          apiLoading.value = false
+        }
+      }
+    } else {
+      dialogVisible.value = false
+    }
+  } else {
+    // 普通弹窗的行为
+    if (props.apiConfig) {
+      try {
+        // 显示加载状态
+        apiLoading.value = true
+
+        // 直接调用API，不修改apiConfig
+        await callApi(props.apiConfig)
+      } catch (error) {
+        // API调用过程中的错误
+        MessagePlugin.error(`操作失败: ${error.message || '未知错误'}`)
+        emit('api-error', error)
+        return // 阻止关闭弹窗
+      } finally {
+        apiLoading.value = false
+      }
+    } else {
+      dialogVisible.value = false
+    }
+  }
+}
+
+// 弹窗取消事件
+const handleDialogCancel = (e) => {
+  dialogVisible.value = false
+  emit('dialog-cancel', e)
+}
+
+// 表单重置事件
+const handleReset = (e) => {
+  emit('reset', e)
+}
+
+// 表单提交事件
+const handleSubmit = async ({ validateResult, firstError, e }) => {
+  if (validateResult === true) {
+    emit('submit', { e, formData: localFormData.value })
+  } else {
+    MessagePlugin.error(firstError)
+    emit('submit-error', { validateResult, firstError })
+  }
+}
+
+// 表单验证事件
+const handleValidate = (params) => {
+  emit('validate', params)
+}
+
+// 加载详情数据
+const loadDetailData = async (id) => {
+  if (!props.detailApiConfig) return null
+
+  try {
+    // 显示加载状态
+    apiLoading.value = true
+
+    // 准备请求参数
+    const fetchParams = { id }
+
+    // 合并当前参数到请求参数
+    if (currentParams.value && Object.keys(currentParams.value).length > 0) {
+      // 过滤掉id和formData，避免重复
+      const { id: _id, formData: _formData, ...otherParams } = currentParams.value
+      Object.keys(otherParams).forEach(key => {
+        fetchParams[key] = otherParams[key]
+      })
+    }
+
+    // 调用dataService进行API请求，直接使用detailApiConfig
+    const response = await dataService.fetch(fetchParams, props.detailApiConfig)
+
+    // 获取详情数据
+    const detailData = response.data || response
+
+    // 更新本地表单数据
+    if (detailData) {
+      // 清空现有数据
+      Object.keys(localFormData.value).forEach(key => {
+        delete localFormData.value[key]
+      })
+
+      // 写入新数据
+      Object.keys(detailData).forEach(key => {
+        localFormData.value[key] = detailData[key]
+      })
+    }
+
+    // 触发加载成功事件
+    emit('detail-loaded', detailData)
+    return detailData
+  } catch (error) {
+    // 显示错误消息
+    if (props.showResultMessage) {
+      MessagePlugin.error(`加载详情失败: ${error.message || '未知错误'}`)
+    }
+
+    // 触发错误事件
+    emit('detail-error', error)
+    return null
+  } finally {
+    apiLoading.value = false
+  }
+}
+
+// 打开弹窗并传递参数
+const openDialog = (params = {}) => {
+  params = { ...params, ...props.params }
+  // 重置状态
+  if (props.dialogType === 'add') {
+    // 添加模式：清空表单数据
+    Object.keys(localFormData.value).forEach(key => {
+      delete localFormData.value[key]
+    })
+  }
+
+  // 处理传入的表单数据
+  if (params.formData && (props.dialogType === 'add' || props.dialogType === 'edit')) {
+    // 更新本地表单数据副本
+    Object.keys(params.formData).forEach(key => {
+      localFormData.value[key] = params.formData[key]
+    })
+  }
+
+  // 存储其他参数，如删除ID等
+  if (params.id) {
+    currentId.value = params.id
+
+    // 如果是编辑模式且有detailApiConfig，加载详情数据
+    if (props.dialogType === 'edit' && props.detailApiConfig) {
+      loadDetailData(params.id)
+    }
+  } else {
+    currentId.value = null
+  }
+
+  // 存储其他自定义参数
+  currentParams.value = params
+
+  // 打开弹窗
+  dialogVisible.value = true
+
+  return { success: true, message: '弹窗已打开' }
+}
+
+// 关闭弹窗
+const closeDialog = () => {
+  dialogVisible.value = false
+  return { success: true, message: '弹窗已关闭' }
+}
+
+// 重置表单数据到初始状态
+const resetFormData = () => {
+  if (formRef.value) {
+    formRef.value.reset()
+    emit('reset', { type: 'manual' })
+  }
+
+  return { success: true, message: '表单已重置' }
+}
+
+// 清空表单数据
+const clearFormData = () => {
+  // 清空表单数据
+  Object.keys(localFormData.value).forEach(key => {
+    delete localFormData.value[key]
+  })
+
+  emit('reset', { type: 'clear' })
+  return { success: true, message: '表单数据已清空' }
+}
+
+// 设置表单数据
+const setFormData = (data) => {
+  if (!data || typeof data !== 'object') {
+    return { success: false, message: '数据必须是一个对象' }
+  }
+
+  // 清空现有数据
+  Object.keys(localFormData.value).forEach(key => {
+    delete localFormData.value[key]
+  })
+
+  // 写入新数据
+  Object.keys(data).forEach(key => {
+    localFormData.value[key] = data[key]
+  })
+
+  return { success: true, message: '表单数据已设置' }
+}
+
+// 获取表单数据
+const getFormData = () => {
+  return { ...localFormData.value }
+}
+
+// 获取表单的当前验证状态
+const validateForm = async () => {
+  if (!formRef.value) {
+    return { success: false, message: '表单引用不存在' }
+  }
+
+  try {
+    const validateResult = await formRef.value.validate()
+
+    if (validateResult === true) {
+      return { success: true, message: '表单验证通过', data: getFormData() }
+    } else {
+      const firstError = validateResult[Object.keys(validateResult)[0]]?.[0]?.message || '表单校验失败'
+      return { success: false, message: firstError, errors: validateResult }
+    }
+  } catch (error) {
+    return { success: false, message: error.message || '表单验证过程中发生错误' }
+  }
+}
+
+// 暴露给父组件的方法
+defineExpose({
+  openDialog,
+  closeDialog,
+  resetFormData,
+  clearFormData,
+  setFormData,
+  getFormData,
+  validateForm,
+  loadDetailData,
+  currentId,
+  currentParams,
+  formRef
+})
+</script>
+
+<style scoped>
+.ebiz-tdesign-button-dialog {
+  display: inline-block;
+}
+
+.dialog-header-delete {
+  color: var(--td-error-color, #e34d59);
+}
+
+.delete-confirm-content {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+}
+
+.delete-icon {
+  font-size: 24px;
+  color: var(--td-error-color, #e34d59);
+  margin-right: 12px;
+}
+
+.delete-message {
+  margin: 0;
+  font-size: 14px;
+  line-height: 22px;
+}
 </style>