@pisell/materials 1.0.1051 → 1.0.1053

package/lowcode/data-source-form/constants.ts

@@ -17,6 +17,7 @@ import formItemRadioGroupMeta from '../form-item-radio.group/meta';
 import formItemSelectMeta from '../form-item-select/meta';
 import formItemTimePickerMeta from '../form-item-time-picker/meta';
 import formItemUploadMeta from '../form-item-upload/meta';
+import formItemRecordListWrapperMeta from '../form-item-record-list-wrapper/meta';
 
 export const metaAll = [
   formItemCheckboxMeta,
@@ -38,6 +39,7 @@ export const metaAll = [
   formItemSelectMeta,
   formItemTimePickerMeta,
   formItemUploadMeta,
+  formItemRecordListWrapperMeta,
 ]
 
 export const formItemMetaMap: Record<string, any> = metaAll.reduce((p, c) => {
@@ -75,6 +77,7 @@ export const nocobaseCpt2PisellCptMap: Record<string, any> = {
   Upload: 'FormItemUpload',
   Translation: "FormItemTranslation",
   IconPicker: "FormItemIconSelect",
+  RecordListWrapper: 'FormItemRecordListWrapper',
 };
 
 

package/lowcode/data-source-form/utils.ts

@@ -30,7 +30,8 @@ type UiSchema = {
     dataSource?: any;
     extraParams?: Record<string, any>;
   };
-  type: 'string' | 'number' | 'boolean' | 'array' | 'object';
+  'x-record-schema'?: Record<string, any> | Record<string, any>[] | string;
+  type: 'string' | 'number' | 'integer' | 'boolean' | 'array' | 'object';
 };
 
 // 创建表单组
@@ -131,6 +132,7 @@ export const createFormItemSchema = (
   item: {
     name: string;
     uiSchema: UiSchema;
+    schema?: Record<string, any>;
     children?: any[];
     _children?: any[];
     interface?: string;
@@ -304,11 +306,21 @@ export const createFormItemSchema = (
   }
 
   // 获取选项配置
-  const dataSourceConfig = (uiSchema as any)?.['x-data-source'];
+  const dataSourceConfig = (uiSchema as any)?.['x-data-source'] || item?.schema?.['x-data-source'];
+  const recordSchemaConfig = (uiSchema as any)?.['x-record-schema'] || item?.schema?.['x-record-schema'];
+  const isRecordListWrapper =
+    item?.interface === 'RecordListWrapper' || xComponent === 'RecordListWrapper';
+
+  if (isRecordListWrapper) {
+    cptTitle = '记录列表包装器';
+    componentName = 'RecordListWrapper';
+    props.xRecordSchema = recordSchemaConfig;
+  }
   
   if (
-    ['Select', 'Radio.Group', 'Checkbox.Group'].includes(xComponent) &&
-    (uiSchema?.enum?.length > 0 || dataSourceConfig)
+    (['Select', 'Radio.Group', 'Checkbox.Group'].includes(xComponent) ||
+      isRecordListWrapper) &&
+    (uiSchema?.enum?.length > 0 || dataSourceConfig || isRecordListWrapper)
   ) {
     if (['Radio.Group', 'Checkbox.Group'].includes(xComponent)) {
       props.direction = 'horizontal';
@@ -343,7 +355,7 @@ export const createFormItemSchema = (
     const optionConfig = dataSourceConfig || {};
     
     // 设置 optionSourceType
-    props.optionSourceType = optionConfig?.type || 'default';
+    props.optionSourceType = optionConfig?.type || '';
     
     // 根据 sourceType 设置不同的配置
     if (props.optionSourceType === 'default') {
@@ -427,6 +439,8 @@ export const createFormItemSchema = (
     schemaType = type as any;
   } else if (xComponent === 'InputNumber' || xComponent === 'Percent') {
     schemaType = 'number';
+  } else if (componentName === 'RecordListWrapper') {
+    schemaType = 'array';
   } else if (xComponent === 'Input.JSON' || item?.interface === 'i18nInput') {
     schemaType = 'object';
   } else if (['Checkbox.Group', 'Select'].includes(xComponent) && props.mode === 'multiple') {

package/lowcode/data-source-sub-form/meta.ts

@@ -0,0 +1,274 @@
+import snippets from './snippets';
+import { createFormItemSchema } from '../data-source-form/utils';
+
+/**
+ * @title 将 xRecordSchema JSON 字段定义转换为低代码子组件 Schema
+ * @description
+ * 解析 xRecordSchema（支持单对象、数组、字符串），对每个字段补全 uiSchema，
+ * 调用 createFormItemSchema 生成低代码引擎可识别的组件 Schema。
+ */
+const parseXRecordSchemaToChildSchemas = (value: any): any[] => {
+  let fields = value;
+
+  // 解析字符串
+  if (typeof fields === 'string') {
+    try {
+      fields = JSON.parse(fields);
+    } catch {
+      return [];
+    }
+  }
+
+  if (!fields) {
+    return [];
+  }
+
+  // 处理 properties 格式
+  if (fields.properties && typeof fields.properties === 'object') {
+    fields = Object.keys(fields.properties).map((name) => ({
+      ...fields.properties[name],
+      name,
+    }));
+  }
+
+  // 处理 fields 格式
+  if (fields.fields && Array.isArray(fields.fields)) {
+    fields = fields.fields;
+  }
+
+  // 处理 children 格式
+  if (fields.children && Array.isArray(fields.children)) {
+    fields = fields.children;
+  }
+
+  // 单对象转数组
+  if (!Array.isArray(fields)) {
+    fields = [fields];
+  }
+
+  // 补全每个字段的 uiSchema 并生成子组件 Schema
+  return fields
+    .filter(Boolean)
+    .map((field: any) => {
+      const uiSchema = { ...(field.uiSchema || {}) };
+
+      // 从 interface 映射 x-component（如 Select、Input 等）
+      if (!uiSchema['x-component'] && field.interface) {
+        uiSchema['x-component'] = field.interface;
+      }
+
+      // 兼容简单格式（只有 componentName/component，没有 interface 和 uiSchema）
+      if (!uiSchema['x-component']) {
+        uiSchema['x-component'] =
+          field.componentName || field.component || 'Input';
+      }
+
+      // 从 field.type 映射 uiSchema.type
+      if (!uiSchema.type && field.type) {
+        uiSchema.type = field.type;
+      }
+
+      // 确保 title 存在（用于生成 label）
+      if (!uiSchema.title && field.label) {
+        uiSchema.title = field.label;
+      }
+
+      return createFormItemSchema({ ...field, uiSchema }, 'edit');
+    })
+    .filter((schema: any) => !!schema?.componentName);
+};
+
+export default {
+  snippets,
+  componentName: 'DataSourceSubForm',
+  title: '子表单',
+  category: '无代码表单',
+  group: '无代码组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.3',
+    exportName: 'DataSourceSubForm',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  generalProps: [
+    {
+      type: 'group',
+      title: {
+        type: 'i18n',
+        'en-US': 'Data',
+        'zh-CN': '数据',
+      },
+      display: 'accordion',
+      items: [
+        {
+          name: 'value',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Value',
+              'zh-CN': '表单值',
+            },
+            tip: {
+              type: 'i18n',
+              'en-US': 'Form value object',
+              'zh-CN': '表单值对象',
+            },
+          },
+          setter: ['JsonSetter', 'VariableSetter'],
+        },
+        {
+          name: 'xRecordSchema',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Record Schema',
+              'zh-CN': '字段配置',
+            },
+            tip: {
+              type: 'i18n',
+              'en-US':
+                'Define form fields structure, supports JSON string, array, or object format',
+              'zh-CN': '定义表单字段结构，支持 JSON 字符串、数组或对象格式',
+            },
+          },
+          setter: ['JsonSetter', 'StringSetter', 'VariableSetter'],
+          extraProps: {
+            setValue(target: any, value: any) {
+              const parsedSchemas = parseXRecordSchemaToChildSchemas(value);
+
+              // 如果画布为空且有解析出的 Schema，自动导入
+              if (
+                target.node.children.isEmptyNode &&
+                parsedSchemas.length > 0
+              ) {
+                target.node.children.importSchema(parsedSchemas);
+              }
+
+              // 插入schema后 有概率不生效，所以这里手动rerender
+              setTimeout(() => {
+                target.document.project.simulatorHost.rerender();
+              });
+
+              return target.getProps().setPropValue('xRecordSchema', value);
+            },
+          },
+        },
+      ],
+    },
+    {
+      type: 'group',
+      title: {
+        type: 'i18n',
+        'en-US': 'Appearance',
+        'zh-CN': '外观',
+      },
+      display: 'accordion',
+      items: [
+        {
+          name: 'renderMode',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Render Mode',
+              'zh-CN': '渲染模式',
+            },
+          },
+          defaultValue: 'edit',
+          setter: [
+            {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { title: '编辑', value: 'edit' },
+                  { title: '禁用', value: 'disabled' },
+                  { title: '预览', value: 'preview' },
+                ],
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+        {
+          name: 'layout',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Layout',
+              'zh-CN': '布局方式',
+            },
+          },
+          defaultValue: 'vertical',
+          setter: [
+            {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { title: '垂直', value: 'vertical' },
+                  { title: '水平', value: 'horizontal' },
+                  { title: '行内', value: 'inline' },
+                ],
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+      ],
+    },
+  ],
+  configure: {
+    props: [
+      {
+        name: 'onChange',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'On Change',
+            'zh-CN': '值变化回调',
+          },
+        },
+        setter: {
+          componentName: 'FunctionSetter',
+          props: {
+            template:
+              'onChange(value,${extParams}){\n// 表单值变化时触发\nconsole.log("onChange", value);\n}',
+          },
+        },
+      },
+    ],
+    component: {
+      isContainer: true,
+      nestingRule: {
+        childWhitelist: [
+          'FormItemInput',
+          'FormItemInputNumber',
+          'FormItemSelect',
+          'FormItemCheckbox',
+          'FormItemSwitch',
+          'FormItemDatePicker',
+          'FormItemTimePicker',
+          'FormItemRadio',
+          'FormItemColorPicker',
+          'FormItemUpload',
+          'FormItemTranslation',
+          'FormItemIconSelect',
+        ],
+      },
+    },
+    supports: {
+      style: true,
+      className: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            'onChange(value,${extParams}){\n// 表单值变化时触发\nconsole.log("onChange", value);\n}',
+        },
+      ],
+    },
+  },
+};

package/lowcode/data-source-sub-form/snippets.ts

@@ -0,0 +1,135 @@
+/**
+ * @title DataSourceSubForm 组件片段
+ * @description 定义组件在低代码平台中的初始配置
+ */
+const snippets = [
+  {
+    title: '子表单',
+    screenshot: '',
+    schema: {
+      componentName: 'DataSourceSubForm',
+      props: {
+        renderMode: 'edit',
+        layout: 'vertical',
+        value: {},
+        xRecordSchema: [
+          {
+            name: 'code',
+            uiSchema: {
+              title: '代码',
+              'x-component': 'Input',
+              'x-component-props': {
+                placeholder: '请输入代码',
+                requiredobj: {
+                  required: true,
+                  message: '代码不能为空',
+                },
+              },
+            },
+          },
+          {
+            name: 'name',
+            uiSchema: {
+              title: '名称',
+              'x-component': 'Input',
+              'x-component-props': {
+                placeholder: '请输入名称',
+                requiredobj: {
+                  required: true,
+                },
+              },
+            },
+          },
+          {
+            name: 'description',
+            uiSchema: {
+              title: '描述',
+              'x-component': 'Input.TextArea',
+              'x-component-props': {
+                placeholder: '请输入描述',
+                rows: 4,
+              },
+            },
+          },
+          {
+            name: 'priority',
+            uiSchema: {
+              title: '优先级',
+              'x-component': 'InputNumber',
+              type: 'integer',
+              'x-component-props': {
+                placeholder: '请输入优先级（0-100）',
+                min: 0,
+                max: 100,
+                precision: 0,
+              },
+            },
+          },
+          {
+            name: 'status',
+            uiSchema: {
+              title: '状态',
+              'x-component': 'Select',
+              'x-component-props': {
+                placeholder: '请选择状态',
+              },
+              'x-data-source': {
+                type: 'default',
+                options: [
+                  {
+                    label: '启用',
+                    value: 'active',
+                  },
+                  {
+                    label: '禁用',
+                    value: 'inactive',
+                  },
+                  {
+                    label: '待审核',
+                    value: 'pending',
+                  },
+                ],
+              },
+            },
+          },
+          {
+            name: 'isEnabled',
+            uiSchema: {
+              title: '是否启用',
+              'x-component': 'Switch',
+              type: 'boolean',
+              'x-component-props': {
+                checkedChildren: '是',
+                unCheckedChildren: '否',
+              },
+            },
+          },
+          {
+            name: 'startDate',
+            uiSchema: {
+              title: '开始日期',
+              'x-component': 'DatePicker',
+              'x-component-props': {
+                placeholder: '请选择开始日期',
+                format: 'YYYY-MM-DD',
+              },
+            },
+          },
+          {
+            name: 'remarks',
+            uiSchema: {
+              title: '备注',
+              'x-component': 'Input.TextArea',
+              'x-component-props': {
+                placeholder: '请输入备注',
+                rows: 3,
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
+];
+
+export default snippets;