@ebiz/designer-components 0.0.58 → 0.0.60

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

@@ -1,669 +1,669 @@
-<template>
-    <t-form ref="formRef" :class="['ebiz-s-form', className]" :colon="colon" :data="localFormData" :disabled="disabled"
-        :label-align="labelAlign" :label-width="labelWidth" :layout="layout" :reset-type="resetType"
-        :reset-on-semi-controlled="resetOnSemiControlled" :rules="formRules"
-        :scroll-to-first-error="scrollToFirstError"
-        :show-error-message="showErrorMessage" :status-icon="statusIcon" :style="customStyle" @reset="handleReset"
-        @submit="handleSubmit" @validate="handleValidate">
-
-        <slot></slot>
-
-        <ebiz-s-form-item label=" ">
-            <slot name="buttons">
-                <t-space>
-                    <t-button v-if="showCancelButton" :theme="cancelButtonTheme" type="reset" :loading="loading"
-                        :disabled="loading || disabled">{{
-                            cancelButtonText
-                        }}</t-button>
-                    <t-button v-if="showSubmitButton" theme="primary" :loading="loading" 
-                        :disabled="loading || disabled" type="submit">{{
-                        submitButtonText }}</t-button>
-                </t-space>
-            </slot>
-        </ebiz-s-form-item>
-    </t-form>
-</template>
-
-<script>
-/**
- * @displayName PC端表单
- * @description PC端表单组件，基于TDesign Form封装，支持表单验证、API提交等功能
- * @category 表单组件
- * @name EbizSForm
- */
-export default {
-    name: "EbizSForm"
-}
-</script>
-
-<script setup>
-import { defineProps, defineEmits, ref, watch, computed } from 'vue';
-import { Form as TForm, Button as TButton, Space as TSpace, MessagePlugin } from 'tdesign-vue-next';
-import dataService from "../../../apiService/simpleDataService";
-import EbizSFormItem from './item.vue';
-
-const props = defineProps({
-    /**
-     * 表单数据对象
-     */
-    data: {
-        type: Object,
-        default: () => ({})
-    },
-    /**
-     * 表单域标签的位置
-     * @options left|right|top
-     */
-    labelAlign: {
-        type: String,
-        default: 'right',
-        validator: (val) => ['left', 'right', 'top'].includes(val)
-    },
-    /**
-     * 表单布局
-     * @options vertical|inline
-     */
-    layout: {
-        type: String,
-        default: 'vertical',
-        validator: (val) => ['vertical', 'inline'].includes(val)
-    },
-    /**
-     * 是否显示必填标记
-     */
-    colon: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 是否禁用整个表单
-     */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 表单域标签的宽度
-     */
-    labelWidth: {
-        type: [String, Number],
-        default: '100px'
-    },
-    /**
-     * 表单校验规则
-     */
-    rules: {
-        type: Object,
-        default: () => ({})
-    },
-    /**
-     * 是否显示校验错误信息
-     */
-    showErrorMessage: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * 是否显示校验图标
-     */
-    statusIcon: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 表单重置时的方式
-     * @options empty|initial
-     */
-    resetType: {
-        type: String,
-        default: 'empty',
-        validator: (val) => ['empty', 'initial'].includes(val)
-    },
-    /**
-     * 重置时是否清空所有非受控字段
-     */
-    resetOnSemiControlled: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 表单校验不通过时，是否自动定位到第一个错误字段
-     */
-    scrollToFirstError: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * 自定义样式
-     */
-    customStyle: {
-        type: [String, Object],
-        default: ''
-    },
-    /**
-     * 自定义类名
-     */
-    className: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 是否显示表单按钮（提交和取消）
-     */
-    showButtons: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * 是否显示提交按钮
-     */
-    showSubmitButton: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * 提交按钮文字
-     */
-    submitButtonText: {
-        type: String,
-        default: '提交'
-    },
-    /**
-     * 是否显示取消按钮
-     */
-    showCancelButton: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * 取消按钮文字
-     */
-    cancelButtonText: {
-        type: String,
-        default: '取消'
-    },
-    /**
-     * 取消按钮主题
-     */
-    cancelButtonTheme: {
-        type: String,
-        default: 'default'
-    },
-    /**
-     * API配置，用于表单提交
-     */
-    apiConfig: {
-        type: Object,
-        default: () => null
-    },
-    /**
-     * 详情API配置，用于加载表单数据
-     */
-    detailApiConfig: {
-        type: Object,
-        default: () => null
-    },
-    /**
-     * 是否在提交成功后重置表单
-     */
-    resetOnSuccess: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 提交成功后的消息提示
-     */
-    successMessage: {
-        type: String,
-        default: '提交成功'
-    },
-    /**
-     * 提交失败后的消息提示
-     */
-    errorMessage: {
-        type: String,
-        default: '提交失败'
-    },
-    /**
-     * 是否显示提交结果消息
-     */
-    showResultMessage: {
-        type: Boolean,
-        default: true
-    }
-});
-
-const emit = defineEmits([
-    'reset',
-    'submit',
-    'validate',
-    'success',
-    'error',
-    'cancel',
-    'detail-loaded',
-    'detail-error'
-]);
-
-const formRef = ref(null);
-const loading = ref(false);
-const currentId = ref(null);
-const currentParams = ref({});
-const localFormData = ref({...props.data});
-
-// 合并rules并监听变化
-const formRules = computed(() => props.rules);
-
-// 监听props的data变化，同步到localFormData
-watch(() => props.data, (newData) => {
-    // 如果外部传入的数据变化，同步更新本地数据
-    if (newData && typeof newData === 'object') {
-        // 清空现有数据
-        Object.keys(localFormData.value).forEach(key => {
-            delete localFormData.value[key];
-        });
-        
-        // 写入新数据
-        Object.keys(newData).forEach(key => {
-            localFormData.value[key] = newData[key];
-        });
-    }
-}, { deep: true });
-
-/**
- * 获取错误消息
- * @param {Error} error 错误对象
- * @param {string} prefix 错误消息前缀
- * @returns {string} 格式化后的错误消息
- */
-const getErrorMessage = (error, prefix = '提交失败') => {
-    if (!error) return `${prefix}: 未知错误`;
-    
-    // 处理不同类型的错误
-    if (error.response && error.response.data) {
-        // API返回的详细错误信息
-        const { message, msg, error: errMsg } = error.response.data;
-        return `${prefix}: ${message || msg || errMsg || error.message || '服务器返回错误'}`;
-    } else if (error.message) {
-        // 标准错误对象
-        return `${prefix}: ${error.message}`;
-    } else if (typeof error === 'string') {
-        // 字符串错误
-        return `${prefix}: ${error}`;
-    } else {
-        // 未知错误
-        return `${prefix}: 未知错误`;
-    }
-};
-
-/**
- * 调用API提交表单数据
- */
-const submitFormData = async () => {
-    try {
-        loading.value = true;
-        
-        // 准备请求参数
-        const fetchParams = { ...localFormData.value };
-        
-        // 如果有ID，添加到请求参数中
-        if (currentId.value) {
-            fetchParams.id = currentId.value;
-        }
-        
-        // 合并当前参数到请求参数
-        if (currentParams.value && Object.keys(currentParams.value).length > 0) {
-            Object.keys(currentParams.value).forEach(key => {
-                fetchParams[key] = currentParams.value[key];
-            });
-        }
-
-        // 直接使用 apiConfig，不做任何处理
-        const response = await dataService.fetch(fetchParams, props.apiConfig);
-
-        // 直接使用响应数据
-        const transformedResponse = response;
-        if (props.showResultMessage) {
-            MessagePlugin.success(props.successMessage);
-        }
-
-        emit('success', transformedResponse);
-
-        if (props.resetOnSuccess && formRef.value) {
-            formRef.value.reset();
-        }
-
-        return transformedResponse;
-    } catch (error) {
-        if (props.showResultMessage) {
-            const errorMsg = getErrorMessage(error, props.errorMessage);
-            MessagePlugin.error(errorMsg);
-        }
-
-        emit('error', error);
-        return null;
-    } finally {
-        loading.value = false;
-    }
-};
-
-/**
- * 表单重置
- * @param {Object} context 表单上下文
- */
-const handleReset = (context) => {
-    emit('reset', context);
-};
-
-/**
- * 表单验证
- * @param {Object} result 表单验证结果
- */
-const handleValidate = (result) => {
-    emit('validate', result);
-};
-
-/**
- * 表单提交事件，由内置的HTML表单submit事件触发
- */
-const handleSubmit = async (_context) => {
-    try {
-        if (!formRef.value) return;
-
-        const validateResult = await formRef.value.validate();
-        
-        if (validateResult !== true) {
-            // 获取第一个错误信息
-            const firstKey = Object.keys(validateResult)[0];
-            const firstError = validateResult[firstKey]?.[0]?.message || '表单验证失败';
-            
-            if (props.showResultMessage) {
-                MessagePlugin.error(firstError);
-            }
-            
-            emit('error', { validateResult, firstError });
-            return;
-        }
-
-        emit('submit', localFormData.value);
-
-        if (props.apiConfig) {
-            await submitFormData();
-        }
-    } catch (error) {
-        if (props.showResultMessage) {
-            MessagePlugin.error(getErrorMessage(error));
-        }
-        
-        emit('error', error);
-    }
-};
-
-/**
- * 加载详情数据
- * @param {string|number} id 记录ID
- */
-const loadDetailData = async (id) => {
-    if (!props.detailApiConfig || !id) return null;
-    
-    try {
-        loading.value = true;
-        
-        // 准备请求参数
-        const fetchParams = { id };
-        
-        // 合并当前参数到请求参数
-        if (currentParams.value && Object.keys(currentParams.value).length > 0) {
-            Object.keys(currentParams.value).forEach(key => {
-                fetchParams[key] = currentParams.value[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 {
-        loading.value = false;
-    }
-};
-
-/**
- * 打开表单并设置参数
- * @param {Object} params 表单参数
- */
-const openForm = (params = {}) => {
-    // 处理传入的表单数据
-    if (params.formData) {
-        // 清空现有数据
-        Object.keys(localFormData.value).forEach(key => {
-            delete localFormData.value[key];
-        });
-        
-        // 写入新数据
-        Object.keys(params.formData).forEach(key => {
-            localFormData.value[key] = params.formData[key];
-        });
-    } else if (params.clearData) {
-        // 如果要求清空数据
-        Object.keys(localFormData.value).forEach(key => {
-            delete localFormData.value[key];
-        });
-    }
-    
-    // 存储ID
-    if (params.id) {
-        currentId.value = params.id;
-        
-        // 如果有detailApiConfig，加载详情数据
-        if (props.detailApiConfig) {
-            loadDetailData(params.id);
-        }
-    } else {
-        currentId.value = null;
-    }
-    
-    // 存储其他自定义参数
-    currentParams.value = params;
-    
-    return { success: true, message: '表单已准备就绪' };
-};
-
-/**
- * 设置表单数据
- * @param {Object} data 要设置的数据
- */
-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 clearFormData = () => {
-    // 清空表单数据
-    Object.keys(localFormData.value).forEach(key => {
-        delete localFormData.value[key];
-    });
-    
-    emit('reset', { type: 'clear' });
-    return { success: true, message: '表单数据已清空' };
-};
-
-/**
- * 提交表单
- */
-const submitForm = async () => {
-    try {
-        if (!formRef.value) {
-            return { success: false, message: '表单引用不存在' };
-        }
-        
-        const validateResult = await formRef.value.validate();
-        
-        if (validateResult === true) {
-            emit('submit', localFormData.value);
-            
-            if (props.apiConfig) {
-                const response = await submitFormData();
-                return { success: true, message: '提交成功', data: response };
-            }
-            
-            return { success: true, message: '表单验证通过', data: { ...localFormData.value } };
-        } else {
-            const firstKey = Object.keys(validateResult)[0];
-            const firstError = validateResult[firstKey]?.[0]?.message || '表单验证失败';
-            
-            return { success: false, message: firstError, errors: validateResult };
-        }
-    } catch (error) {
-        return { success: false, message: error.message || '提交过程中发生错误' };
-    }
-};
-
-// 暴露方法给父组件
-defineExpose({
-    /**
-     * 提交表单方法
-     */
-    submit: submitForm,
-    /**
-     * 重置表单方法
-     */
-    reset: () => {
-        if (formRef.value) {
-            formRef.value.reset();
-        }
-    },
-    /**
-     * 校验表单方法
-     * @returns {Promise} 校验结果Promise
-     */
-    validate: async () => {
-        if (formRef.value) {
-            return await formRef.value.validate();
-        }
-        return false;
-    },
-    /**
-     * 校验特定字段
-     * @param {Array|String} fields 字段名称或字段名称数组
-     * @returns {Promise} 校验结果Promise
-     */
-    validateFields: async (fields) => {
-        if (formRef.value) {
-            return await formRef.value.validateFields(fields);
-        }
-        return false;
-    },
-    /**
-     * 清除校验结果
-     * @param {Array|String} fields 字段名称或字段名称数组，不传则清除所有
-     */
-    clearValidate: (fields) => {
-        if (formRef.value) {
-            formRef.value.clearValidate(fields);
-        }
-    },
-    /**
-     * 获取表单DOM元素
-     */
-    getFormElement: () => formRef.value,
-    /**
-     * 打开表单并设置参数
-     */
-    openForm,
-    /**
-     * 加载详情数据
-     */
-    loadDetailData,
-    /**
-     * 清空表单数据
-     */
-    clearFormData,
-    /**
-     * 设置表单数据
-     */
-    setFormData,
-    /**
-     * 获取表单数据
-     */
-    getFormData,
-    /**
-     * 表单引用
-     */
-    formRef,
-    /**
-     * 当前ID
-     */
-    currentId,
-    /**
-     * 当前参数
-     */
-    currentParams,
-    /**
-     * 本地表单数据
-     */
-    localFormData
-});
-</script>
-
-<style scoped>
-.ebiz-s-form {
-    width: 100%;
-}
-
-.form-buttons {
-    margin-top: 24px;
-    padding: 8px 0;
-    display: flex;
-    justify-content: center;
-}
+<template>
+    <t-form ref="formRef" :class="['ebiz-s-form', className]" :colon="colon" :data="localFormData" :disabled="disabled"
+        :label-align="labelAlign" :label-width="labelWidth" :layout="layout" :reset-type="resetType"
+        :reset-on-semi-controlled="resetOnSemiControlled" :rules="formRules"
+        :scroll-to-first-error="scrollToFirstError"
+        :show-error-message="showErrorMessage" :status-icon="statusIcon" :style="customStyle" @reset="handleReset"
+        @submit="handleSubmit" @validate="handleValidate">
+
+        <slot></slot>
+
+        <ebiz-s-form-item label=" ">
+            <slot name="buttons">
+                <t-space>
+                    <t-button v-if="showCancelButton" :theme="cancelButtonTheme" type="reset" :loading="loading"
+                        :disabled="loading || disabled">{{
+                            cancelButtonText
+                        }}</t-button>
+                    <t-button v-if="showSubmitButton" theme="primary" :loading="loading" 
+                        :disabled="loading || disabled" type="submit">{{
+                        submitButtonText }}</t-button>
+                </t-space>
+            </slot>
+        </ebiz-s-form-item>
+    </t-form>
+</template>
+
+<script>
+/**
+ * @displayName PC端表单
+ * @description PC端表单组件，基于TDesign Form封装，支持表单验证、API提交等功能
+ * @category 表单组件
+ * @name EbizSForm
+ */
+export default {
+    name: "EbizSForm"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits, ref, watch, computed } from 'vue';
+import { Form as TForm, Button as TButton, Space as TSpace, MessagePlugin } from 'tdesign-vue-next';
+import dataService from "../../../apiService/simpleDataService";
+import EbizSFormItem from './item.vue';
+
+const props = defineProps({
+    /**
+     * 表单数据对象
+     */
+    data: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 表单域标签的位置
+     * @options left|right|top
+     */
+    labelAlign: {
+        type: String,
+        default: 'right',
+        validator: (val) => ['left', 'right', 'top'].includes(val)
+    },
+    /**
+     * 表单布局
+     * @options vertical|inline
+     */
+    layout: {
+        type: String,
+        default: 'vertical',
+        validator: (val) => ['vertical', 'inline'].includes(val)
+    },
+    /**
+     * 是否显示必填标记
+     */
+    colon: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 是否禁用整个表单
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 表单域标签的宽度
+     */
+    labelWidth: {
+        type: [String, Number],
+        default: '100px'
+    },
+    /**
+     * 表单校验规则
+     */
+    rules: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 是否显示校验错误信息
+     */
+    showErrorMessage: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 是否显示校验图标
+     */
+    statusIcon: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 表单重置时的方式
+     * @options empty|initial
+     */
+    resetType: {
+        type: String,
+        default: 'empty',
+        validator: (val) => ['empty', 'initial'].includes(val)
+    },
+    /**
+     * 重置时是否清空所有非受控字段
+     */
+    resetOnSemiControlled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 表单校验不通过时，是否自动定位到第一个错误字段
+     */
+    scrollToFirstError: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 自定义样式
+     */
+    customStyle: {
+        type: [String, Object],
+        default: ''
+    },
+    /**
+     * 自定义类名
+     */
+    className: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 是否显示表单按钮（提交和取消）
+     */
+    showButtons: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 是否显示提交按钮
+     */
+    showSubmitButton: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 提交按钮文字
+     */
+    submitButtonText: {
+        type: String,
+        default: '提交'
+    },
+    /**
+     * 是否显示取消按钮
+     */
+    showCancelButton: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 取消按钮文字
+     */
+    cancelButtonText: {
+        type: String,
+        default: '取消'
+    },
+    /**
+     * 取消按钮主题
+     */
+    cancelButtonTheme: {
+        type: String,
+        default: 'default'
+    },
+    /**
+     * API配置，用于表单提交
+     */
+    apiConfig: {
+        type: Object,
+        default: () => null
+    },
+    /**
+     * 详情API配置，用于加载表单数据
+     */
+    detailApiConfig: {
+        type: Object,
+        default: () => null
+    },
+    /**
+     * 是否在提交成功后重置表单
+     */
+    resetOnSuccess: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 提交成功后的消息提示
+     */
+    successMessage: {
+        type: String,
+        default: '提交成功'
+    },
+    /**
+     * 提交失败后的消息提示
+     */
+    errorMessage: {
+        type: String,
+        default: '提交失败'
+    },
+    /**
+     * 是否显示提交结果消息
+     */
+    showResultMessage: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const emit = defineEmits([
+    'reset',
+    'submit',
+    'validate',
+    'success',
+    'error',
+    'cancel',
+    'detail-loaded',
+    'detail-error'
+]);
+
+const formRef = ref(null);
+const loading = ref(false);
+const currentId = ref(null);
+const currentParams = ref({});
+const localFormData = ref({...props.data});
+
+// 合并rules并监听变化
+const formRules = computed(() => props.rules);
+
+// 监听props的data变化，同步到localFormData
+watch(() => props.data, (newData) => {
+    // 如果外部传入的数据变化，同步更新本地数据
+    if (newData && typeof newData === 'object') {
+        // 清空现有数据
+        Object.keys(localFormData.value).forEach(key => {
+            delete localFormData.value[key];
+        });
+        
+        // 写入新数据
+        Object.keys(newData).forEach(key => {
+            localFormData.value[key] = newData[key];
+        });
+    }
+}, { deep: true });
+
+/**
+ * 获取错误消息
+ * @param {Error} error 错误对象
+ * @param {string} prefix 错误消息前缀
+ * @returns {string} 格式化后的错误消息
+ */
+const getErrorMessage = (error, prefix = '提交失败') => {
+    if (!error) return `${prefix}: 未知错误`;
+    
+    // 处理不同类型的错误
+    if (error.response && error.response.data) {
+        // API返回的详细错误信息
+        const { message, msg, error: errMsg } = error.response.data;
+        return `${prefix}: ${message || msg || errMsg || error.message || '服务器返回错误'}`;
+    } else if (error.message) {
+        // 标准错误对象
+        return `${prefix}: ${error.message}`;
+    } else if (typeof error === 'string') {
+        // 字符串错误
+        return `${prefix}: ${error}`;
+    } else {
+        // 未知错误
+        return `${prefix}: 未知错误`;
+    }
+};
+
+/**
+ * 调用API提交表单数据
+ */
+const submitFormData = async () => {
+    try {
+        loading.value = true;
+        
+        // 准备请求参数
+        const fetchParams = { ...localFormData.value };
+        
+        // 如果有ID，添加到请求参数中
+        if (currentId.value) {
+            fetchParams.id = currentId.value;
+        }
+        
+        // 合并当前参数到请求参数
+        if (currentParams.value && Object.keys(currentParams.value).length > 0) {
+            Object.keys(currentParams.value).forEach(key => {
+                fetchParams[key] = currentParams.value[key];
+            });
+        }
+
+        // 直接使用 apiConfig，不做任何处理
+        const response = await dataService.fetch(fetchParams, props.apiConfig);
+
+        // 直接使用响应数据
+        const transformedResponse = response;
+        if (props.showResultMessage) {
+            MessagePlugin.success(props.successMessage);
+        }
+
+        emit('success', transformedResponse);
+
+        if (props.resetOnSuccess && formRef.value) {
+            formRef.value.reset();
+        }
+
+        return transformedResponse;
+    } catch (error) {
+        if (props.showResultMessage) {
+            const errorMsg = getErrorMessage(error, props.errorMessage);
+            MessagePlugin.error(errorMsg);
+        }
+
+        emit('error', error);
+        return null;
+    } finally {
+        loading.value = false;
+    }
+};
+
+/**
+ * 表单重置
+ * @param {Object} context 表单上下文
+ */
+const handleReset = (context) => {
+    emit('reset', context);
+};
+
+/**
+ * 表单验证
+ * @param {Object} result 表单验证结果
+ */
+const handleValidate = (result) => {
+    emit('validate', result);
+};
+
+/**
+ * 表单提交事件，由内置的HTML表单submit事件触发
+ */
+const handleSubmit = async (_context) => {
+    try {
+        if (!formRef.value) return;
+
+        const validateResult = await formRef.value.validate();
+        
+        if (validateResult !== true) {
+            // 获取第一个错误信息
+            const firstKey = Object.keys(validateResult)[0];
+            const firstError = validateResult[firstKey]?.[0]?.message || '表单验证失败';
+            
+            if (props.showResultMessage) {
+                MessagePlugin.error(firstError);
+            }
+            
+            emit('error', { validateResult, firstError });
+            return;
+        }
+
+        emit('submit', localFormData.value);
+
+        if (props.apiConfig) {
+            await submitFormData();
+        }
+    } catch (error) {
+        if (props.showResultMessage) {
+            MessagePlugin.error(getErrorMessage(error));
+        }
+        
+        emit('error', error);
+    }
+};
+
+/**
+ * 加载详情数据
+ * @param {string|number} id 记录ID
+ */
+const loadDetailData = async (id) => {
+    if (!props.detailApiConfig || !id) return null;
+    
+    try {
+        loading.value = true;
+        
+        // 准备请求参数
+        const fetchParams = { id };
+        
+        // 合并当前参数到请求参数
+        if (currentParams.value && Object.keys(currentParams.value).length > 0) {
+            Object.keys(currentParams.value).forEach(key => {
+                fetchParams[key] = currentParams.value[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 {
+        loading.value = false;
+    }
+};
+
+/**
+ * 打开表单并设置参数
+ * @param {Object} params 表单参数
+ */
+const openForm = (params = {}) => {
+    // 处理传入的表单数据
+    if (params.formData) {
+        // 清空现有数据
+        Object.keys(localFormData.value).forEach(key => {
+            delete localFormData.value[key];
+        });
+        
+        // 写入新数据
+        Object.keys(params.formData).forEach(key => {
+            localFormData.value[key] = params.formData[key];
+        });
+    } else if (params.clearData) {
+        // 如果要求清空数据
+        Object.keys(localFormData.value).forEach(key => {
+            delete localFormData.value[key];
+        });
+    }
+    
+    // 存储ID
+    if (params.id) {
+        currentId.value = params.id;
+        
+        // 如果有detailApiConfig，加载详情数据
+        if (props.detailApiConfig) {
+            loadDetailData(params.id);
+        }
+    } else {
+        currentId.value = null;
+    }
+    
+    // 存储其他自定义参数
+    currentParams.value = params;
+    
+    return { success: true, message: '表单已准备就绪' };
+};
+
+/**
+ * 设置表单数据
+ * @param {Object} data 要设置的数据
+ */
+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 clearFormData = () => {
+    // 清空表单数据
+    Object.keys(localFormData.value).forEach(key => {
+        delete localFormData.value[key];
+    });
+    
+    emit('reset', { type: 'clear' });
+    return { success: true, message: '表单数据已清空' };
+};
+
+/**
+ * 提交表单
+ */
+const submitForm = async () => {
+    try {
+        if (!formRef.value) {
+            return { success: false, message: '表单引用不存在' };
+        }
+        
+        const validateResult = await formRef.value.validate();
+        
+        if (validateResult === true) {
+            emit('submit', localFormData.value);
+            
+            if (props.apiConfig) {
+                const response = await submitFormData();
+                return { success: true, message: '提交成功', data: response };
+            }
+            
+            return { success: true, message: '表单验证通过', data: { ...localFormData.value } };
+        } else {
+            const firstKey = Object.keys(validateResult)[0];
+            const firstError = validateResult[firstKey]?.[0]?.message || '表单验证失败';
+            
+            return { success: false, message: firstError, errors: validateResult };
+        }
+    } catch (error) {
+        return { success: false, message: error.message || '提交过程中发生错误' };
+    }
+};
+
+// 暴露方法给父组件
+defineExpose({
+    /**
+     * 提交表单方法
+     */
+    submit: submitForm,
+    /**
+     * 重置表单方法
+     */
+    reset: () => {
+        if (formRef.value) {
+            formRef.value.reset();
+        }
+    },
+    /**
+     * 校验表单方法
+     * @returns {Promise} 校验结果Promise
+     */
+    validate: async () => {
+        if (formRef.value) {
+            return await formRef.value.validate();
+        }
+        return false;
+    },
+    /**
+     * 校验特定字段
+     * @param {Array|String} fields 字段名称或字段名称数组
+     * @returns {Promise} 校验结果Promise
+     */
+    validateFields: async (fields) => {
+        if (formRef.value) {
+            return await formRef.value.validateFields(fields);
+        }
+        return false;
+    },
+    /**
+     * 清除校验结果
+     * @param {Array|String} fields 字段名称或字段名称数组，不传则清除所有
+     */
+    clearValidate: (fields) => {
+        if (formRef.value) {
+            formRef.value.clearValidate(fields);
+        }
+    },
+    /**
+     * 获取表单DOM元素
+     */
+    getFormElement: () => formRef.value,
+    /**
+     * 打开表单并设置参数
+     */
+    openForm,
+    /**
+     * 加载详情数据
+     */
+    loadDetailData,
+    /**
+     * 清空表单数据
+     */
+    clearFormData,
+    /**
+     * 设置表单数据
+     */
+    setFormData,
+    /**
+     * 获取表单数据
+     */
+    getFormData,
+    /**
+     * 表单引用
+     */
+    formRef,
+    /**
+     * 当前ID
+     */
+    currentId,
+    /**
+     * 当前参数
+     */
+    currentParams,
+    /**
+     * 本地表单数据
+     */
+    localFormData
+});
+</script>
+
+<style scoped>
+.ebiz-s-form {
+    width: 100%;
+}
+
+.form-buttons {
+    margin-top: 24px;
+    padding: 8px 0;
+    display: flex;
+    justify-content: center;
+}
 </style>