@pisell/materials 1.0.449 → 1.0.451

package/lowcode/_utils/defaultSchema.ts

@@ -0,0 +1,430 @@
+import { getVariable } from '../data-source-form/utils';
+// 获取表单容器组件
+const getParentForm = (target: any) => {
+  let parent = target.node.parent;
+  while (parent.componentName !== 'DataSourceForm') {
+    parent = parent.parent;
+  }
+  return parent;
+}
+
+// 获取dataSourceform 中使用的字段
+const getDataSourceFormFields = (target: any) => {
+  const getFormItemFields = (node) => {
+    let fields = [];
+    node.children.forEach(child => {
+      if (child.componentName.startsWith('FormItem')) {
+        fields.push(child.getProps().getPropValue('name'));
+      } else if (child.children) {
+        fields = fields.concat(getFormItemFields(child));
+      }
+    });
+    return fields;
+  };
+
+  const parentForm = getParentForm(target);
+  const fieldsInUse = getFormItemFields(parentForm);
+  return fieldsInUse;
+}
+  
+
+export const formItemGeneralProps = [
+  {
+    name: 'label',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Title',
+        'zh-CN': '标题',
+      },
+      tip: '用于显示在表单项的标签文本，对应Label。',
+    },
+    propType: 'string',
+    setter: 'PisellI18nSetter',
+  },
+  {
+    name: 'name',
+    title: { label: '字段名', tip: '字段名' },
+    isRequired: true,
+    propType: 'string',
+    setter: [
+      {
+        componentName: 'SelectSetter',
+        condition: (target) => {
+          // 获取表单容器组件的currentFields
+          const fields = getVariable(getParentForm(target), 'currentFields');
+          // 如果fields存在且长度大于0，则显示选择器
+          return fields && fields.length > 0;
+        },
+        props: (target) => {
+          // 获取表单容器组件的currentFields
+          const fields = getVariable(getParentForm(target), 'currentFields');
+          // 已有字段key
+          const usedFields = getDataSourceFormFields(target);
+
+          const options = fields?.map?.((item) => ({
+            title: item.uiSchema.title,
+            value: item.name,
+            disabled: usedFields.includes(item.name),
+          }));
+
+          return {
+            mode: 'single',
+            options:options || [],
+          };
+        },
+      },
+      'StringSetter',
+    ],
+    extraProps: {
+      setValue(target: any, value: string | any) {
+        // 获取表单容器组件的currentFields
+        const fields = getVariable(getParentForm(target), 'currentFields');
+        // 根据value值找到对应的label
+        const field = fields.find((item: any) => item.name === value);
+        // 设置label
+        if (field) {
+          target.getProps().setPropValue('label', field.uiSchema.title);
+          // target.node.children.importSchema([createFormItemChildren(field)])
+          // 插入schema后 有概率不生效，所以这里手动rerender
+          // setTimeout(() => {
+          //   target.document.project.simulatorHost.rerender();
+          // });
+        }
+        return target.getProps().setPropValue('name', value);
+      },
+    },
+    supportVariable: true,
+  },
+  {
+    name: 'tooltip',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Tooltip',
+        'zh-CN': '提示',
+      },
+      tip: '标签提示信息，当需要对标签进行解释时，可以使用这个。',
+    },
+    propType: { type: 'oneOfType', value: ['string', 'node'] },
+    setter: ['PisellI18nSetter', 'SlotSetter'],
+  },
+  {
+    name: 'noStyle',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Show title area',
+        'zh-CN': '隐藏标题区域',
+      },
+      tip: '是否隐藏组件的Label，包括title和tooltip，但是不包括helper text。',
+    },
+    propType: 'bool',
+    defaultValue: false,
+    setter: 'BoolSetter',
+    supportVariable: true,
+  },
+  {
+    name: 'extra',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Helper text',
+        'zh-CN': '辅助说明',
+      },
+      tip: '在组件下方或上方显示的辅助说明文本。',
+    },
+    propType: { type: 'oneOfType', value: ['string', 'node'] },
+    setter: ['PisellI18nSetter', 'SlotSetter'],
+  },
+  {
+    name: 'placeholder',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Placeholder',
+        'zh-CN': '占位提示',
+      },
+      tip: '输入框为空时显示的提示文本。',
+    },
+    propType: 'string',
+    setter: 'PisellI18nSetter',
+  },
+  {
+    name: 'mode',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Status',
+        'zh-CN': '状态',
+      },
+      tip: '设置表单项的状态。',
+    },
+    setter: {
+      componentName: 'RadioGroupSetter',
+      props: {
+        options: [
+          {
+            title: '普通',
+            value: 'edit',
+          },
+          {
+            title: '禁用',
+            value: 'disabled',
+          },
+          {
+            title: '只读',
+            value: 'view',
+          },
+          {
+            title: '隐藏',
+            value: 'hidden',
+          },
+        ],
+      },
+      initialValue: 'edit',
+    },
+    propType: {
+      type: 'oneOf',
+      value: ['edit', 'disabled', 'view', 'hidden'],
+    },
+    defaultValue: 'edit',
+  },
+  {
+    name: 'defaultValue',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Default value',
+        'zh-CN': '默认值',
+      },
+      tip: '默认内容',
+    },
+    propType: 'string',
+    setter: 'StringSetter',
+  },
+  {
+    type: 'group',
+    title: {
+      type: 'i18n',
+      'en-US': 'Validation',
+      'zh-CN': '校验',
+    },
+    display: 'accordion',
+    items: [
+      {
+        name: 'requiredobj',
+        title: { label: '必填', tip: '必填' },
+        setter: {
+          componentName: 'ObjectSetter',
+          props: {
+            config: {
+              items: [
+                {
+                  name: 'required',
+                  title: '是否必填',
+                  propType: 'bool',
+                  setter: 'BoolSetter',
+                  isRequired: true,
+                },
+                {
+                  name: 'message',
+                  title: '错误信息提示',
+                  propType: 'string',
+                  setter: 'PisellI18nSetter',
+                },
+              ],
+            },
+            columns: 1,
+            forceInline: 1,
+            mode: 'popup',
+          },
+        },
+      },
+      {
+        name: 'minLengthobj',
+        title: { label: '最小长度', tip: '最小长度' },
+        setter: {
+          componentName: 'ObjectSetter',
+          props: {
+            config: {
+              items: [
+                {
+                  name: 'enabled',
+                  title: '是否启用',
+                  propType: 'bool',
+                  setter: 'BoolSetter',
+                  isRequired: true,
+                },
+                {
+                  name: 'min',
+                  title: '最小长度',
+                  propType: 'number',
+                  setter: 'NumberSetter',
+                },
+                {
+                  name: 'message',
+                  title: '错误信息提示',
+                  propType: 'string',
+                  setter: 'PisellI18nSetter',
+                },
+              ],
+            },
+            columns: 1,
+            forceInline: 1,
+            mode: 'popup',
+          },
+        },
+      },
+      {
+        name: 'maxLengthobj',
+        title: { label: '最大长度', tip: '最大长度' },
+        setter: {
+          componentName: 'ObjectSetter',
+          props: {
+            config: {
+              items: [
+                {
+                  name: 'enabled',
+                  title: '是否启用',
+                  propType: 'bool',
+                  setter: 'BoolSetter',
+                  isRequired: true,
+                },
+                {
+                  name: 'max',
+                  title: '最大长度',
+                  propType: 'number',
+                  setter: 'NumberSetter',
+                },
+                {
+                  name: 'message',
+                  title: '错误信息提示',
+                  propType: 'string',
+                  setter: 'PisellI18nSetter',
+                },
+              ],
+            },
+            columns: 1,
+            forceInline: 1,
+            mode: 'popup',
+          },
+        },
+      },
+      {
+        name: 'typeobj',
+        title: { label: '类型校验', tip: '类型校验' },
+        setter: {
+          componentName: 'ObjectSetter',
+          props: {
+            config: {
+              items: [
+                {
+                  name: 'enabled',
+                  title: '是否启用',
+                  propType: 'bool',
+                  setter: 'BoolSetter',
+                  isRequired: true,
+                },
+                {
+                  name: 'type',
+                  title: '类型',
+                  propType: 'string',
+                  setter: {
+                    componentName: 'SelectSetter',
+                    props: {
+                      options: [
+                        { title: '字符串', value: 'string' },
+                        { title: '邮箱', value: 'email' },
+                        { title: '网址', value: 'url' },
+                      ],
+                    },
+                  },
+                },
+                {
+                  name: 'message',
+                  title: '错误信息提示',
+                  propType: 'string',
+                  setter: 'PisellI18nSetter',
+                },
+              ],
+            },
+            columns: 1,
+            forceInline: 1,
+            mode: 'popup',
+          },
+        },
+      },
+      {
+        name: 'maxobj',
+        title: { label: '最大值校验设置', tip: '最大值校验设置' },
+        setter: {
+          componentName: 'ObjectSetter',
+          props: {
+            config: {
+              items: [
+                {
+                  name: 'enabled',
+                  title: '是否启用',
+                  propType: 'bool',
+                  setter: 'BoolSetter',
+                  isRequired: true,
+                },
+                {
+                  name: 'max',
+                  title: '最大值',
+                  propType: 'number',
+                  setter: 'NumberSetter',
+                },
+                {
+                  name: 'message',
+                  title: '错误信息提示',
+                  propType: 'string',
+                  setter: 'PisellI18nSetter',
+                },
+              ],
+            },
+            columns: 1,
+            forceInline: 1,
+            mode: 'popup',
+          },
+        },
+      },
+      {
+        name: 'minobj',
+        title: { label: '最小值校验设置', tip: '最小值校验设置' },
+        setter: {
+          componentName: 'ObjectSetter',
+          props: {
+            config: {
+              items: [
+                {
+                  name: 'enabled',
+                  title: '是否启用',
+                  propType: 'bool',
+                  setter: 'BoolSetter',
+                  isRequired: true,
+                },
+                {
+                  name: 'min',
+                  title: '最小值',
+                  propType: 'number',
+                  setter: 'NumberSetter',
+                },
+                {
+                  name: 'message',
+                  title: '错误信息提示',
+                  propType: 'string',
+                  setter: 'PisellI18nSetter',
+                },
+              ],
+            },
+            columns: 1,
+            forceInline: 1,
+            mode: 'popup',
+          },
+        },
+      },
+    ],
+  },
+];