@ebiz/designer-components 0.1.2 → 0.1.5

package/src/components/EbizAutoForm.vue

@@ -1,597 +1,597 @@
-<template>
-  <div class="ebiz-auto-form">
-    <t-form
-      ref="formRef"
-      :data="formData"
-      :rules="formRules"
-      :label-width="labelWidth"
-      :label-align="labelAlign"
-      :layout="layout"
-      :colon="colon"
-      :show-error-message="showErrorMessage"
-      :reset-type="resetType"
-      @reset="handleReset"
-      @submit="handleSubmit"
-      @validate="handleValidate"
-    >
-      <t-form-item
-        v-for="field in formFields"
-        :key="field.name"
-        :name="field.name"
-        :label="field.label"
-        :rules="field.rules"
-      >
-        <!-- 文本输入框 -->
-        <t-input
-          v-if="field.componentType === 'input'"
-          v-model="formData[field.name]"
-          :placeholder="field.placeholder || `请输入${field.label}`"
-          :type="getInputType(field.fieldType)"
-        />
-
-        <!-- 长文本 -->
-        <t-textarea
-          v-else-if="field.componentType === 'textarea'"
-          v-model="formData[field.name]"
-          :placeholder="field.placeholder || `请输入${field.label}`"
-        />
-
-        <!-- 单选框组 -->
-        <t-radio-group
-          v-else-if="field.componentType === 'radio'"
-          v-model="formData[field.name]"
-        >
-          <t-radio
-            v-for="option in field.options"
-            :key="option.value"
-            :value="option.value"
-          >
-            {{ option.label }}
-          </t-radio>
-        </t-radio-group>
-
-        <!-- 多选框组 -->
-        <t-checkbox-group
-          v-else-if="field.componentType === 'checkbox'"
-          v-model="formData[field.name]"
-        >
-          <t-checkbox
-            v-for="option in field.options"
-            :key="option.value"
-            :value="option.value"
-          >
-            {{ option.label }}
-          </t-checkbox>
-        </t-checkbox-group>
-
-        <!-- 日期选择器 -->
-        <t-date-picker
-          v-else-if="field.componentType === 'date'"
-          v-model="formData[field.name]"
-          :placeholder="field.placeholder || `请选择${field.label}`"
-          :format="field.format || 'YYYY-MM-DD'"
-        />
-
-        <!-- 时间选择器 -->
-        <t-time-picker
-          v-else-if="field.componentType === 'time'"
-          v-model="formData[field.name]"
-          :placeholder="field.placeholder || `请选择${field.label}`"
-          :format="field.format || 'HH:mm:ss'"
-        />
-
-        <!-- 日期时间选择器 -->
-        <t-date-picker
-          v-else-if="field.componentType === 'datetime'"
-          v-model="formData[field.name]"
-          :placeholder="field.placeholder || `请选择${field.label}`"
-          :format="field.format || 'YYYY-MM-DD HH:mm:ss'"
-          enable-time-picker
-        />
-
-        <!-- 下拉选择器 -->
-        <t-select
-          v-else-if="field.componentType === 'select'"
-          v-model="formData[field.name]"
-          :placeholder="field.placeholder || `请选择${field.label}`"
-          :multiple="field.multiple"
-          :options="field.options"
-        />
-
-        <!-- 文件上传 -->
-        <t-upload
-          v-else-if="field.componentType === 'upload'"
-          v-model="formData[field.name]"
-          :placeholder="field.placeholder || `请上传${field.label}`"
-          :accept="field.accept"
-          :theme="field.theme || 'file'"
-          :multiple="field.multiple"
-          :draggable="field.draggable"
-          :action="uploadAction"
-          @success="handleUploadSuccess($event, field)"
-        />
-
-        <!-- 开关 -->
-        <t-switch
-          v-else-if="field.componentType === 'switch'"
-          v-model="formData[field.name]"
-        />
-
-        <!-- 数字输入框 -->
-        <t-input-number
-          v-else-if="field.componentType === 'number'"
-          v-model="formData[field.name]"
-          :placeholder="field.placeholder || `请输入${field.label}`"
-          :step="field.step || 1"
-          :min="field.min"
-          :max="field.max"
-        />
-
-        <!-- 默认为文本输入框 -->
-        <t-input 
-          v-else 
-          v-model="formData[field.name]" 
-          :placeholder="field.placeholder || `请输入${field.label}`"
-        />
-      </t-form-item>
-
-      <!-- 子表单处理 -->
-      <div v-for="subEntity in subEntities" :key="subEntity.name" class="ebiz-auto-form-sub-table">
-        <h3>{{ subEntity.label || subEntity.name }}</h3>
-        
-        <t-table
-          :data="formData[subEntity.name] || []"
-          :columns="subEntity.columns"
-          row-key="id"
-          size="small"
-          bordered
-        >
-          <template #operation="{ row }">
-            <t-space>
-              <t-button size="small" variant="text" @click="handleEditSubRow(subEntity.name, row)">编辑</t-button>
-              <t-button size="small" variant="text" theme="danger" @click="handleDeleteSubRow(subEntity.name, row)">删除</t-button>
-            </t-space>
-          </template>
-        </t-table>
-        
-        <t-button style="margin-top: 8px;" theme="primary" variant="outline" size="small" @click="handleAddSubRow(subEntity.name)">
-          添加{{ subEntity.label || subEntity.name }}
-        </t-button>
-      </div>
-
-      <div class="ebiz-auto-form-footer" v-if="showSubmitButton || showResetButton">
-        <t-space>
-          <t-button v-if="showResetButton" @click="handleReset">{{ resetButtonText }}</t-button>
-          <t-button v-if="showSubmitButton" theme="primary" type="submit" @click="handleSubmit">{{ submitButtonText }}</t-button>
-        </t-space>
-      </div>
-    </t-form>
-
-    <!-- 子表单编辑对话框 -->
-    <t-dialog
-      v-model:visible="subFormDialogVisible"
-      :header="subFormDialogTitle"
-      width="650px"
-      attach="body"
-      @confirm="handleSubFormConfirm"
-      @close="handleSubFormCancel"
-    >
-      <template v-if="currentSubForm">
-        <t-form
-          ref="subFormRef"
-          :data="subFormData"
-        >
-          <t-form-item
-            v-for="field in currentSubForm.fields"
-            :key="field.name"
-            :name="field.name"
-            :label="field.label"
-          >
-            <t-input
-              v-if="!field.componentType || field.componentType === 'input'"
-              v-model="subFormData[field.name]"
-              :placeholder="field.placeholder || `请输入${field.label}`"
-            />
-            
-            <!-- 可以根据需要添加更多类型的组件 -->
-          </t-form-item>
-        </t-form>
-      </template>
-    </t-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "EbizAutoForm"
-}
-</script>
-
-<script setup>
-import { ref, reactive, computed, onMounted, watch } from 'vue';
-import { Form as TForm, FormItem as TFormItem, Button as TButton, Input as TInput, 
-  Textarea as TTextarea, RadioGroup as TRadioGroup, Radio as TRadio, 
-  CheckboxGroup as TCheckboxGroup, Checkbox as TCheckbox, DatePicker as TDatePicker, 
-  TimePicker as TTimePicker, Select as TSelect, Upload as TUpload, Switch as TSwitch, 
-  InputNumber as TInputNumber, Space as TSpace, Table as TTable, Dialog as TDialog } from 'tdesign-vue-next';
-import { MessagePlugin } from 'tdesign-vue-next';
-
-const props = defineProps({
-  apiConfig: {
-    type: Object,
-    required: true,
-    default: () => ({})
-  },
-  initialData: {
-    type: Object,
-    default: () => ({})
-  },
-  labelWidth: {
-    type: [String, Number],
-    default: '120px'
-  },
-  labelAlign: {
-    type: String,
-    default: 'right',
-    validator: (val) => ['left', 'right', 'top'].includes(val)
-  },
-  layout: {
-    type: String,
-    default: 'vertical',
-    validator: (val) => ['vertical', 'inline'].includes(val)
-  },
-  colon: {
-    type: Boolean,
-    default: true
-  },
-  showErrorMessage: {
-    type: Boolean,
-    default: true
-  },
-  resetType: {
-    type: String,
-    default: 'initial',
-    validator: (val) => ['empty', 'initial'].includes(val)
-  },
-  showSubmitButton: {
-    type: Boolean,
-    default: true
-  },
-  showResetButton: {
-    type: Boolean,
-    default: true
-  },
-  submitButtonText: {
-    type: String,
-    default: '提交'
-  },
-  resetButtonText: {
-    type: String,
-    default: '重置'
-  },
-  uploadAction: {
-    type: String,
-    default: '/api/file/upload'
-  }
-});
-
-const emit = defineEmits(['submit', 'reset', 'validate', 'change', 'field-change', 'upload-success']);
-
-// 表单引用
-const formRef = ref(null);
-const formData = ref({...props.initialData});
-const formFields = ref([]);
-const formRules = ref({});
-const subEntities = ref([]);
-
-// 子表单相关
-const subFormRef = ref(null);
-const subFormDialogVisible = ref(false);
-const subFormDialogTitle = ref('');
-const subFormData = ref({});
-const currentSubForm = ref(null);
-const currentSubFormIndex = ref(-1);
-const currentSubFormEntityName = ref('');
-
-// 将字段类型映射到表单组件类型
-const fieldTypeToComponentMap = {
-  'TEXT': 'input',
-  'LONG_TEXT': 'textarea',
-  'RADIO': 'radio',
-  'CHECKBOX': 'checkbox',
-  'ID_NUMBER': 'input',
-  'ADDRESS': 'textarea',
-  'VIDEO': 'upload',
-  'IMAGE': 'upload',
-  'DATE': 'date',
-  'TIME': 'time',
-  'DATETIME': 'datetime',
-  'TIMESTAMP': 'datetime',
-  'CITY': 'select',
-  'PHONE': 'input',
-  'MOBILE': 'input',
-  'EMAIL': 'input',
-  'FILE': 'upload',
-  'TAGS': 'select',
-  'GEOGRAPHY': 'input',
-  'HTML_TEXT': 'textarea',
-  'INT': 'number',
-  'NUMBER': 'number',
-  'AMOUNT': 'number',
-  'BOOLEAN': 'switch',
-  'JSON': 'textarea',
-  'FORMULA': 'input',
-  'ENUM': 'select'
-};
-
-// 根据字段类型获取 input 的 type 属性
-const getInputType = (fieldType) => {
-  switch (fieldType) {
-    case 'EMAIL':
-      return 'email';
-    case 'PHONE':
-    case 'MOBILE':
-      return 'tel';
-    case 'ID_NUMBER':
-      return 'text';
-    case 'PASSWORD':
-      return 'password';
-    default:
-      return 'text';
-  }
-};
-
-// 监听初始数据变化
-watch(() => props.initialData, (newVal) => {
-  formData.value = {...newVal};
-}, { deep: true });
-
-// 监听 apiConfig 变化
-watch(() => props.apiConfig, () => {
-  fetchFormConfig();
-}, { deep: true });
-
-// 初始化表单配置
-onMounted(() => {
-  fetchFormConfig();
-});
-
-// 从 apiConfig 获取表单配置
-const fetchFormConfig = async () => {
-  try {
-    if (!props.apiConfig || !props.apiConfig.apiId) {
-      console.error('apiConfig 或 apiId 未提供');
-      return;
-    }
-
-    // 这里实际项目中需要发送请求获取实体字段定义
-    // 以下是模拟从接口获取字段定义的代码
-    await processEntityFields(props.apiConfig);
-
-  } catch (error) {
-    console.error('获取表单配置失败:', error);
-    MessagePlugin.error('获取表单配置失败');
-  }
-};
-
-// 处理实体字段
-const processEntityFields = async (apiConfig) => {
-  try {
-    // 实际项目中，这里应该是调用接口获取实体字段定义
-    // const response = await fetchEntityFields(apiConfig);
-    // const fields = response.data.fields;
-
-    // 模拟字段数据
-    const mockFields = [
-      { name: 'name', label: '姓名', fieldType: 'TEXT', required: true },
-      { name: 'age', label: '年龄', fieldType: 'INT', required: true },
-      { name: 'email', label: '邮箱', fieldType: 'EMAIL', required: false },
-      { name: 'gender', label: '性别', fieldType: 'RADIO', required: false, options: [
-        { label: '男', value: 'male' },
-        { label: '女', value: 'female' }
-      ]},
-      { name: 'hobbies', label: '爱好', fieldType: 'CHECKBOX', required: false, options: [
-        { label: '阅读', value: 'reading' },
-        { label: '运动', value: 'sports' },
-        { label: '旅游', value: 'travel' },
-        { label: '音乐', value: 'music' }
-      ]},
-      { name: 'birthday', label: '生日', fieldType: 'DATE', required: false },
-      { name: 'memo', label: '备注', fieldType: 'LONG_TEXT', required: false }
-    ];
-    
-    // 模拟子实体数据
-    const mockSubEntities = [
-      {
-        name: 'contacts',
-        label: '联系人',
-        type: 'subEntity',
-        columns: [
-          { colKey: 'name', title: '姓名' },
-          { colKey: 'phone', title: '电话' },
-          { colKey: 'relationship', title: '关系' },
-          { colKey: 'operation', title: '操作' }
-        ],
-        fields: [
-          { name: 'name', label: '姓名', fieldType: 'TEXT', required: true },
-          { name: 'phone', label: '电话', fieldType: 'PHONE', required: true },
-          { name: 'relationship', label: '关系', fieldType: 'TEXT', required: false }
-        ]
-      }
-    ];
-
-    // 初始化表单数据
-    const initialFormData = {...props.initialData};
-    const fields = [];
-    const rules = {};
-
-    // 处理普通字段
-    mockFields.forEach(field => {
-      // 转换字段定义为表单字段
-      const formField = {
-        name: field.name,
-        label: field.label,
-        fieldType: field.fieldType,
-        componentType: fieldTypeToComponentMap[field.fieldType] || 'input',
-        placeholder: `请输入${field.label}`,
-        options: field.options || [],
-        required: field.required
-      };
-
-      // 添加验证规则
-      if (field.required) {
-        rules[field.name] = [{ required: true, message: `请输入${field.label}`, type: 'error' }];
-      }
-
-      // 设置默认值
-      if (!(field.name in initialFormData)) {
-        if (field.fieldType === 'CHECKBOX') {
-          initialFormData[field.name] = [];
-        } else if (field.fieldType === 'BOOLEAN') {
-          initialFormData[field.name] = false;
-        } else if (field.fieldType === 'INT' || field.fieldType === 'NUMBER' || field.fieldType === 'AMOUNT') {
-          initialFormData[field.name] = null;
-        } else {
-          initialFormData[field.name] = '';
-        }
-      }
-
-      fields.push(formField);
-    });
-
-    // 处理子实体
-    mockSubEntities.forEach(subEntity => {
-      if (!(subEntity.name in initialFormData)) {
-        initialFormData[subEntity.name] = [];
-      }
-    });
-
-    // 更新组件状态
-    formFields.value = fields;
-    formRules.value = rules;
-    formData.value = initialFormData;
-    subEntities.value = mockSubEntities;
-
-  } catch (error) {
-    console.error('处理实体字段失败:', error);
-    MessagePlugin.error('处理实体字段失败');
-  }
-};
-
-// 处理表单提交
-const handleSubmit = (e) => {
-  e.preventDefault();
-  formRef.value.validate().then(result => {
-    if (result === true) {
-      emit('submit', formData.value);
-    }
-  });
-};
-
-// 处理表单重置
-const handleReset = (e) => {
-  formRef.value.reset();
-  emit('reset');
-};
-
-// 处理表单验证
-const handleValidate = (params) => {
-  emit('validate', params);
-};
-
-// 处理文件上传成功
-const handleUploadSuccess = (info, field) => {
-  emit('upload-success', info, field);
-};
-
-// 子表单相关方法
-const handleAddSubRow = (entityName) => {
-  const entity = subEntities.value.find(item => item.name === entityName);
-  if (!entity) return;
-
-  currentSubForm.value = entity;
-  currentSubFormEntityName.value = entityName;
-  currentSubFormIndex.value = -1;
-  subFormDialogTitle.value = `添加${entity.label || entity.name}`;
-  subFormData.value = {};
-  subFormDialogVisible.value = true;
-};
-
-const handleEditSubRow = (entityName, row) => {
-  const entity = subEntities.value.find(item => item.name === entityName);
-  if (!entity) return;
-
-  const index = formData.value[entityName].findIndex(item => item.id === row.id);
-  if (index === -1) return;
-
-  currentSubForm.value = entity;
-  currentSubFormEntityName.value = entityName;
-  currentSubFormIndex.value = index;
-  subFormDialogTitle.value = `编辑${entity.label || entity.name}`;
-  subFormData.value = {...formData.value[entityName][index]};
-  subFormDialogVisible.value = true;
-};
-
-const handleDeleteSubRow = (entityName, row) => {
-  const index = formData.value[entityName].findIndex(item => item.id === row.id);
-  if (index !== -1) {
-    formData.value[entityName].splice(index, 1);
-    emit('change', formData.value);
-  }
-};
-
-const handleSubFormConfirm = () => {
-  const entityName = currentSubFormEntityName.value;
-  if (!entityName) return;
-
-  // 确保数组初始化
-  if (!formData.value[entityName]) {
-    formData.value[entityName] = [];
-  }
-
-  // 添加或更新数据
-  if (currentSubFormIndex.value === -1) {
-    // 新增
-    const newRow = {...subFormData.value, id: Date.now()};
-    formData.value[entityName].push(newRow);
-  } else {
-    // 更新
-    formData.value[entityName][currentSubFormIndex.value] = {...subFormData.value};
-  }
-
-  subFormDialogVisible.value = false;
-  emit('change', formData.value);
-};
-
-const handleSubFormCancel = () => {
-  subFormDialogVisible.value = false;
-};
-
-// 暴露方法给父组件
-defineExpose({
-  formRef,
-  validate: () => formRef.value?.validate(),
-  reset: () => formRef.value?.reset(),
-  submit: handleSubmit,
-  getFormData: () => formData.value,
-  setFormData: (data) => {
-    formData.value = {...data};
-  }
-});
-</script>
-
-<style lang="less" scoped>
-.ebiz-auto-form {
-  width: 100%;
-  
-  &-sub-table {
-    margin-bottom: 24px;
-  }
-  
-  &-footer {
-    margin-top: 24px;
-    display: flex;
-    justify-content: center;
-  }
-}
+<template>
+  <div class="ebiz-auto-form">
+    <t-form
+      ref="formRef"
+      :data="formData"
+      :rules="formRules"
+      :label-width="labelWidth"
+      :label-align="labelAlign"
+      :layout="layout"
+      :colon="colon"
+      :show-error-message="showErrorMessage"
+      :reset-type="resetType"
+      @reset="handleReset"
+      @submit="handleSubmit"
+      @validate="handleValidate"
+    >
+      <t-form-item
+        v-for="field in formFields"
+        :key="field.name"
+        :name="field.name"
+        :label="field.label"
+        :rules="field.rules"
+      >
+        <!-- 文本输入框 -->
+        <t-input
+          v-if="field.componentType === 'input'"
+          v-model="formData[field.name]"
+          :placeholder="field.placeholder || `请输入${field.label}`"
+          :type="getInputType(field.fieldType)"
+        />
+
+        <!-- 长文本 -->
+        <t-textarea
+          v-else-if="field.componentType === 'textarea'"
+          v-model="formData[field.name]"
+          :placeholder="field.placeholder || `请输入${field.label}`"
+        />
+
+        <!-- 单选框组 -->
+        <t-radio-group
+          v-else-if="field.componentType === 'radio'"
+          v-model="formData[field.name]"
+        >
+          <t-radio
+            v-for="option in field.options"
+            :key="option.value"
+            :value="option.value"
+          >
+            {{ option.label }}
+          </t-radio>
+        </t-radio-group>
+
+        <!-- 多选框组 -->
+        <t-checkbox-group
+          v-else-if="field.componentType === 'checkbox'"
+          v-model="formData[field.name]"
+        >
+          <t-checkbox
+            v-for="option in field.options"
+            :key="option.value"
+            :value="option.value"
+          >
+            {{ option.label }}
+          </t-checkbox>
+        </t-checkbox-group>
+
+        <!-- 日期选择器 -->
+        <t-date-picker
+          v-else-if="field.componentType === 'date'"
+          v-model="formData[field.name]"
+          :placeholder="field.placeholder || `请选择${field.label}`"
+          :format="field.format || 'YYYY-MM-DD'"
+        />
+
+        <!-- 时间选择器 -->
+        <t-time-picker
+          v-else-if="field.componentType === 'time'"
+          v-model="formData[field.name]"
+          :placeholder="field.placeholder || `请选择${field.label}`"
+          :format="field.format || 'HH:mm:ss'"
+        />
+
+        <!-- 日期时间选择器 -->
+        <t-date-picker
+          v-else-if="field.componentType === 'datetime'"
+          v-model="formData[field.name]"
+          :placeholder="field.placeholder || `请选择${field.label}`"
+          :format="field.format || 'YYYY-MM-DD HH:mm:ss'"
+          enable-time-picker
+        />
+
+        <!-- 下拉选择器 -->
+        <t-select
+          v-else-if="field.componentType === 'select'"
+          v-model="formData[field.name]"
+          :placeholder="field.placeholder || `请选择${field.label}`"
+          :multiple="field.multiple"
+          :options="field.options"
+        />
+
+        <!-- 文件上传 -->
+        <t-upload
+          v-else-if="field.componentType === 'upload'"
+          v-model="formData[field.name]"
+          :placeholder="field.placeholder || `请上传${field.label}`"
+          :accept="field.accept"
+          :theme="field.theme || 'file'"
+          :multiple="field.multiple"
+          :draggable="field.draggable"
+          :action="uploadAction"
+          @success="handleUploadSuccess($event, field)"
+        />
+
+        <!-- 开关 -->
+        <t-switch
+          v-else-if="field.componentType === 'switch'"
+          v-model="formData[field.name]"
+        />
+
+        <!-- 数字输入框 -->
+        <t-input-number
+          v-else-if="field.componentType === 'number'"
+          v-model="formData[field.name]"
+          :placeholder="field.placeholder || `请输入${field.label}`"
+          :step="field.step || 1"
+          :min="field.min"
+          :max="field.max"
+        />
+
+        <!-- 默认为文本输入框 -->
+        <t-input 
+          v-else 
+          v-model="formData[field.name]" 
+          :placeholder="field.placeholder || `请输入${field.label}`"
+        />
+      </t-form-item>
+
+      <!-- 子表单处理 -->
+      <div v-for="subEntity in subEntities" :key="subEntity.name" class="ebiz-auto-form-sub-table">
+        <h3>{{ subEntity.label || subEntity.name }}</h3>
+        
+        <t-table
+          :data="formData[subEntity.name] || []"
+          :columns="subEntity.columns"
+          row-key="id"
+          size="small"
+          bordered
+        >
+          <template #operation="{ row }">
+            <t-space>
+              <t-button size="small" variant="text" @click="handleEditSubRow(subEntity.name, row)">编辑</t-button>
+              <t-button size="small" variant="text" theme="danger" @click="handleDeleteSubRow(subEntity.name, row)">删除</t-button>
+            </t-space>
+          </template>
+        </t-table>
+        
+        <t-button style="margin-top: 8px;" theme="primary" variant="outline" size="small" @click="handleAddSubRow(subEntity.name)">
+          添加{{ subEntity.label || subEntity.name }}
+        </t-button>
+      </div>
+
+      <div class="ebiz-auto-form-footer" v-if="showSubmitButton || showResetButton">
+        <t-space>
+          <t-button v-if="showResetButton" @click="handleReset">{{ resetButtonText }}</t-button>
+          <t-button v-if="showSubmitButton" theme="primary" type="submit" @click="handleSubmit">{{ submitButtonText }}</t-button>
+        </t-space>
+      </div>
+    </t-form>
+
+    <!-- 子表单编辑对话框 -->
+    <t-dialog
+      v-model:visible="subFormDialogVisible"
+      :header="subFormDialogTitle"
+      width="650px"
+      attach="body"
+      @confirm="handleSubFormConfirm"
+      @close="handleSubFormCancel"
+    >
+      <template v-if="currentSubForm">
+        <t-form
+          ref="subFormRef"
+          :data="subFormData"
+        >
+          <t-form-item
+            v-for="field in currentSubForm.fields"
+            :key="field.name"
+            :name="field.name"
+            :label="field.label"
+          >
+            <t-input
+              v-if="!field.componentType || field.componentType === 'input'"
+              v-model="subFormData[field.name]"
+              :placeholder="field.placeholder || `请输入${field.label}`"
+            />
+            
+            <!-- 可以根据需要添加更多类型的组件 -->
+          </t-form-item>
+        </t-form>
+      </template>
+    </t-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EbizAutoForm"
+}
+</script>
+
+<script setup>
+import { ref, reactive, computed, onMounted, watch } from 'vue';
+import { Form as TForm, FormItem as TFormItem, Button as TButton, Input as TInput, 
+  Textarea as TTextarea, RadioGroup as TRadioGroup, Radio as TRadio, 
+  CheckboxGroup as TCheckboxGroup, Checkbox as TCheckbox, DatePicker as TDatePicker, 
+  TimePicker as TTimePicker, Select as TSelect, Upload as TUpload, Switch as TSwitch, 
+  InputNumber as TInputNumber, Space as TSpace, Table as TTable, Dialog as TDialog } from 'tdesign-vue-next';
+import { MessagePlugin } from 'tdesign-vue-next';
+
+const props = defineProps({
+  apiConfig: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  initialData: {
+    type: Object,
+    default: () => ({})
+  },
+  labelWidth: {
+    type: [String, Number],
+    default: '120px'
+  },
+  labelAlign: {
+    type: String,
+    default: 'right',
+    validator: (val) => ['left', 'right', 'top'].includes(val)
+  },
+  layout: {
+    type: String,
+    default: 'vertical',
+    validator: (val) => ['vertical', 'inline'].includes(val)
+  },
+  colon: {
+    type: Boolean,
+    default: true
+  },
+  showErrorMessage: {
+    type: Boolean,
+    default: true
+  },
+  resetType: {
+    type: String,
+    default: 'initial',
+    validator: (val) => ['empty', 'initial'].includes(val)
+  },
+  showSubmitButton: {
+    type: Boolean,
+    default: true
+  },
+  showResetButton: {
+    type: Boolean,
+    default: true
+  },
+  submitButtonText: {
+    type: String,
+    default: '提交'
+  },
+  resetButtonText: {
+    type: String,
+    default: '重置'
+  },
+  uploadAction: {
+    type: String,
+    default: '/api/file/upload'
+  }
+});
+
+const emit = defineEmits(['submit', 'reset', 'validate', 'change', 'field-change', 'upload-success']);
+
+// 表单引用
+const formRef = ref(null);
+const formData = ref({...props.initialData});
+const formFields = ref([]);
+const formRules = ref({});
+const subEntities = ref([]);
+
+// 子表单相关
+const subFormRef = ref(null);
+const subFormDialogVisible = ref(false);
+const subFormDialogTitle = ref('');
+const subFormData = ref({});
+const currentSubForm = ref(null);
+const currentSubFormIndex = ref(-1);
+const currentSubFormEntityName = ref('');
+
+// 将字段类型映射到表单组件类型
+const fieldTypeToComponentMap = {
+  'TEXT': 'input',
+  'LONG_TEXT': 'textarea',
+  'RADIO': 'radio',
+  'CHECKBOX': 'checkbox',
+  'ID_NUMBER': 'input',
+  'ADDRESS': 'textarea',
+  'VIDEO': 'upload',
+  'IMAGE': 'upload',
+  'DATE': 'date',
+  'TIME': 'time',
+  'DATETIME': 'datetime',
+  'TIMESTAMP': 'datetime',
+  'CITY': 'select',
+  'PHONE': 'input',
+  'MOBILE': 'input',
+  'EMAIL': 'input',
+  'FILE': 'upload',
+  'TAGS': 'select',
+  'GEOGRAPHY': 'input',
+  'HTML_TEXT': 'textarea',
+  'INT': 'number',
+  'NUMBER': 'number',
+  'AMOUNT': 'number',
+  'BOOLEAN': 'switch',
+  'JSON': 'textarea',
+  'FORMULA': 'input',
+  'ENUM': 'select'
+};
+
+// 根据字段类型获取 input 的 type 属性
+const getInputType = (fieldType) => {
+  switch (fieldType) {
+    case 'EMAIL':
+      return 'email';
+    case 'PHONE':
+    case 'MOBILE':
+      return 'tel';
+    case 'ID_NUMBER':
+      return 'text';
+    case 'PASSWORD':
+      return 'password';
+    default:
+      return 'text';
+  }
+};
+
+// 监听初始数据变化
+watch(() => props.initialData, (newVal) => {
+  formData.value = {...newVal};
+}, { deep: true });
+
+// 监听 apiConfig 变化
+watch(() => props.apiConfig, () => {
+  fetchFormConfig();
+}, { deep: true });
+
+// 初始化表单配置
+onMounted(() => {
+  fetchFormConfig();
+});
+
+// 从 apiConfig 获取表单配置
+const fetchFormConfig = async () => {
+  try {
+    if (!props.apiConfig || !props.apiConfig.apiId) {
+      console.error('apiConfig 或 apiId 未提供');
+      return;
+    }
+
+    // 这里实际项目中需要发送请求获取实体字段定义
+    // 以下是模拟从接口获取字段定义的代码
+    await processEntityFields(props.apiConfig);
+
+  } catch (error) {
+    console.error('获取表单配置失败:', error);
+    MessagePlugin.error('获取表单配置失败');
+  }
+};
+
+// 处理实体字段
+const processEntityFields = async (apiConfig) => {
+  try {
+    // 实际项目中，这里应该是调用接口获取实体字段定义
+    // const response = await fetchEntityFields(apiConfig);
+    // const fields = response.data.fields;
+
+    // 模拟字段数据
+    const mockFields = [
+      { name: 'name', label: '姓名', fieldType: 'TEXT', required: true },
+      { name: 'age', label: '年龄', fieldType: 'INT', required: true },
+      { name: 'email', label: '邮箱', fieldType: 'EMAIL', required: false },
+      { name: 'gender', label: '性别', fieldType: 'RADIO', required: false, options: [
+        { label: '男', value: 'male' },
+        { label: '女', value: 'female' }
+      ]},
+      { name: 'hobbies', label: '爱好', fieldType: 'CHECKBOX', required: false, options: [
+        { label: '阅读', value: 'reading' },
+        { label: '运动', value: 'sports' },
+        { label: '旅游', value: 'travel' },
+        { label: '音乐', value: 'music' }
+      ]},
+      { name: 'birthday', label: '生日', fieldType: 'DATE', required: false },
+      { name: 'memo', label: '备注', fieldType: 'LONG_TEXT', required: false }
+    ];
+    
+    // 模拟子实体数据
+    const mockSubEntities = [
+      {
+        name: 'contacts',
+        label: '联系人',
+        type: 'subEntity',
+        columns: [
+          { colKey: 'name', title: '姓名' },
+          { colKey: 'phone', title: '电话' },
+          { colKey: 'relationship', title: '关系' },
+          { colKey: 'operation', title: '操作' }
+        ],
+        fields: [
+          { name: 'name', label: '姓名', fieldType: 'TEXT', required: true },
+          { name: 'phone', label: '电话', fieldType: 'PHONE', required: true },
+          { name: 'relationship', label: '关系', fieldType: 'TEXT', required: false }
+        ]
+      }
+    ];
+
+    // 初始化表单数据
+    const initialFormData = {...props.initialData};
+    const fields = [];
+    const rules = {};
+
+    // 处理普通字段
+    mockFields.forEach(field => {
+      // 转换字段定义为表单字段
+      const formField = {
+        name: field.name,
+        label: field.label,
+        fieldType: field.fieldType,
+        componentType: fieldTypeToComponentMap[field.fieldType] || 'input',
+        placeholder: `请输入${field.label}`,
+        options: field.options || [],
+        required: field.required
+      };
+
+      // 添加验证规则
+      if (field.required) {
+        rules[field.name] = [{ required: true, message: `请输入${field.label}`, type: 'error' }];
+      }
+
+      // 设置默认值
+      if (!(field.name in initialFormData)) {
+        if (field.fieldType === 'CHECKBOX') {
+          initialFormData[field.name] = [];
+        } else if (field.fieldType === 'BOOLEAN') {
+          initialFormData[field.name] = false;
+        } else if (field.fieldType === 'INT' || field.fieldType === 'NUMBER' || field.fieldType === 'AMOUNT') {
+          initialFormData[field.name] = null;
+        } else {
+          initialFormData[field.name] = '';
+        }
+      }
+
+      fields.push(formField);
+    });
+
+    // 处理子实体
+    mockSubEntities.forEach(subEntity => {
+      if (!(subEntity.name in initialFormData)) {
+        initialFormData[subEntity.name] = [];
+      }
+    });
+
+    // 更新组件状态
+    formFields.value = fields;
+    formRules.value = rules;
+    formData.value = initialFormData;
+    subEntities.value = mockSubEntities;
+
+  } catch (error) {
+    console.error('处理实体字段失败:', error);
+    MessagePlugin.error('处理实体字段失败');
+  }
+};
+
+// 处理表单提交
+const handleSubmit = (e) => {
+  e.preventDefault();
+  formRef.value.validate().then(result => {
+    if (result === true) {
+      emit('submit', formData.value);
+    }
+  });
+};
+
+// 处理表单重置
+const handleReset = (e) => {
+  formRef.value.reset();
+  emit('reset');
+};
+
+// 处理表单验证
+const handleValidate = (params) => {
+  emit('validate', params);
+};
+
+// 处理文件上传成功
+const handleUploadSuccess = (info, field) => {
+  emit('upload-success', info, field);
+};
+
+// 子表单相关方法
+const handleAddSubRow = (entityName) => {
+  const entity = subEntities.value.find(item => item.name === entityName);
+  if (!entity) return;
+
+  currentSubForm.value = entity;
+  currentSubFormEntityName.value = entityName;
+  currentSubFormIndex.value = -1;
+  subFormDialogTitle.value = `添加${entity.label || entity.name}`;
+  subFormData.value = {};
+  subFormDialogVisible.value = true;
+};
+
+const handleEditSubRow = (entityName, row) => {
+  const entity = subEntities.value.find(item => item.name === entityName);
+  if (!entity) return;
+
+  const index = formData.value[entityName].findIndex(item => item.id === row.id);
+  if (index === -1) return;
+
+  currentSubForm.value = entity;
+  currentSubFormEntityName.value = entityName;
+  currentSubFormIndex.value = index;
+  subFormDialogTitle.value = `编辑${entity.label || entity.name}`;
+  subFormData.value = {...formData.value[entityName][index]};
+  subFormDialogVisible.value = true;
+};
+
+const handleDeleteSubRow = (entityName, row) => {
+  const index = formData.value[entityName].findIndex(item => item.id === row.id);
+  if (index !== -1) {
+    formData.value[entityName].splice(index, 1);
+    emit('change', formData.value);
+  }
+};
+
+const handleSubFormConfirm = () => {
+  const entityName = currentSubFormEntityName.value;
+  if (!entityName) return;
+
+  // 确保数组初始化
+  if (!formData.value[entityName]) {
+    formData.value[entityName] = [];
+  }
+
+  // 添加或更新数据
+  if (currentSubFormIndex.value === -1) {
+    // 新增
+    const newRow = {...subFormData.value, id: Date.now()};
+    formData.value[entityName].push(newRow);
+  } else {
+    // 更新
+    formData.value[entityName][currentSubFormIndex.value] = {...subFormData.value};
+  }
+
+  subFormDialogVisible.value = false;
+  emit('change', formData.value);
+};
+
+const handleSubFormCancel = () => {
+  subFormDialogVisible.value = false;
+};
+
+// 暴露方法给父组件
+defineExpose({
+  formRef,
+  validate: () => formRef.value?.validate(),
+  reset: () => formRef.value?.reset(),
+  submit: handleSubmit,
+  getFormData: () => formData.value,
+  setFormData: (data) => {
+    formData.value = {...data};
+  }
+});
+</script>
+
+<style lang="less" scoped>
+.ebiz-auto-form {
+  width: 100%;
+  
+  &-sub-table {
+    margin-bottom: 24px;
+  }
+  
+  &-footer {
+    margin-top: 24px;
+    display: flex;
+    justify-content: center;
+  }
+}
 </style>