@ebiz/designer-components 0.0.19 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -22,7 +22,7 @@
     "@opentiny/vue-icon": "~3.20.0",
     "axios": "^1.8.1",
     "echarts": "^5.6.0",
-    "tdesign-vue-next": "^1.11.5",
+    "tdesign-vue-next": "^1.12.0",
     "unplugin-auto-import": "^19.0.0",
     "unplugin-vue-components": "^28.0.0",
     "vue": "^3.5.13",

package/src/components/Button.vue

@@ -115,7 +115,7 @@ const click = async (e) => {
         emit('loading', true)
 
         // 调用前置处理并获取返回值
-        const shouldContinue = props.onPrepare()
+        const shouldContinue = await Promise.resolve(props.onPrepare())
         emit('prepare', shouldContinue)
 
         // 只有当返回值明确为false时才中断，undefined或其他值都继续执行

package/src/components/DataContainer.vue

@@ -1,6 +1,7 @@
 <template>
     <div>
-        <slot name="content" :row="data"></slot>
+        <slot></slot>
+        <slot v-if="$slots.content" name="content" :row="data"></slot>
     </div>
 </template>
 

package/src/components/EbizAutoForm.vue

@@ -0,0 +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;
+  }
+}
+</style>