@pisell/materials 1.0.463 → 1.0.465

package/lowcode/_utils/defaultSchema.ts

@@ -1,4 +1,9 @@
-import { getVariable } from '../data-source-form/utils';
+import {
+  getVariable,
+  getDataSourceValue,
+  setBatchVariables,
+} from '../data-source-form/utils';
+
 // 获取表单容器组件
 const getParentForm = (target: any) => {
   let parent = target.node.parent;
@@ -6,13 +11,13 @@ const getParentForm = (target: any) => {
     parent = parent.parent;
   }
   return parent;
-}
+};
 
 // 获取dataSourceform 中使用的字段
 const getDataSourceFormFields = (target: any) => {
   const getFormItemFields = (node) => {
     let fields = [];
-    node.children.forEach(child => {
+    node.children.forEach((child) => {
       if (child.componentName.startsWith('FormItem')) {
         fields.push(child.getProps().getPropValue('name'));
       } else if (child.children) {
@@ -25,8 +30,671 @@ const getDataSourceFormFields = (target: any) => {
   const parentForm = getParentForm(target);
   const fieldsInUse = getFormItemFields(parentForm);
   return fieldsInUse;
-}
-  
+};
+
+export const generalItemMap = {
+  label: {
+    name: 'label',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Title',
+        'zh-CN': '标题',
+      },
+      tip: '用于显示在表单项的标签文本，对应Label。',
+    },
+    propType: 'string',
+    setter: 'PisellI18nSetter',
+  },
+  name: {
+    name: 'name',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Field',
+        'zh-CN': '字段',
+      },
+      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,
+  },
+  tooltip: {
+    name: 'tooltip',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Tooltip',
+        'zh-CN': '提示',
+      },
+      tip: '标签提示信息，当需要对标签进行解释时，可以使用这个。',
+    },
+    propType: { type: 'oneOfType', value: ['string', 'node'] },
+    setter: ['PisellI18nSetter', 'SlotSetter'],
+  },
+  noStyle: {
+    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,
+  },
+  extra: {
+    name: 'extra',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Helper text',
+        'zh-CN': '辅助说明',
+      },
+      tip: '在组件下方或上方显示的辅助说明文本。',
+    },
+    propType: { type: 'oneOfType', value: ['string', 'node'] },
+    setter: ['PisellI18nSetter', 'SlotSetter'],
+  },
+  placeholder: {
+    name: 'placeholder',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Placeholder',
+        'zh-CN': '占位提示',
+      },
+      tip: '输入框为空时显示的提示文本。',
+    },
+    propType: 'string',
+    setter: 'PisellI18nSetter',
+  },
+  mode: {
+    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',
+  },
+  defaultValue: {
+    name: 'defaultValue',
+    title: {
+      label: {
+        type: 'i18n',
+        'en-US': 'Default value',
+        'zh-CN': '默认值',
+      },
+      tip: '默认内容',
+    },
+    propType: 'string',
+    setter: 'StringSetter',
+  },
+  requiredobj: {
+    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',
+      },
+    },
+  },
+  minLengthobj: {
+    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',
+      },
+    },
+  },
+  maxLengthobj: {
+    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',
+      },
+    },
+  },
+  typeobj: {
+    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',
+      },
+    },
+  },
+  maxobj: {
+    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',
+      },
+    },
+  },
+  minobj: {
+    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',
+      },
+    },
+  },
+  direction: {
+    name: 'direction',
+    title: {
+      type: 'i18n',
+      'en-US': 'Direction',
+      'zh-CN': '排布方向',
+    },
+    setter: {
+      componentName: 'RadioGroupSetter',
+      props: {
+        options: [
+          { title: '水平', value: 'horizontal' },
+          { title: '垂直', value: 'vertical' },
+        ],
+      },
+    },
+  },
+};
+
+export const formItemGeneralDataGroup = {
+  type: 'group',
+  title: {
+    type: 'i18n',
+    'en-US': 'Data',
+    'zh-CN': '数据',
+  },
+  display: 'accordion',
+  items: [
+    {
+      name: 'dataSource',
+      title: {
+        type: 'i18n',
+        'en-US': 'Source',
+        'zh-CN': '数据源',
+      },
+      extraProps: {
+        getValue(target: any) {
+          return getDataSourceValue(target);
+        },
+      },
+      setter: {
+        componentName: 'PisellDataSourceSetter',
+        props: {
+          disabled: true,
+        },
+      },
+    },
+    generalItemMap['name'],
+  ],
+};
+
+export const formItemGeneralOptionTypeGroup = {
+  type: 'group',
+  title: {
+    type: 'i18n',
+    'en-US': 'Option type',
+    'zh-CN': '选项类型',
+  },
+  display: 'accordion',
+  items: [
+    {
+      name: 'optionSourceType',
+      title: {
+        type: 'i18n',
+        'en-US': 'Type',
+        'zh-CN': '类型',
+      },
+      setter: {
+        componentName: 'SelectSetter',
+        props: {
+          options: [
+            { title: '默认', value: 'default' },
+            { title: '自定义', value: 'custom' },
+            { title: 'API', value: 'api' },
+          ],
+        },
+      },
+    },
+    {
+      name: 'dataSource',
+      condition: (target) => {
+        const optionType = target.getProps().getPropValue('optionSourceType');
+        return optionType === 'api';
+      },
+      title: {
+        type: 'i18n',
+        'en-US': 'Data Source',
+        'zh-CN': '数据源',
+      },
+      extraProps: {
+        setValue(target: any, value: any) {
+          if (!value.item) {
+            target.getProps().setPropValue('currentFields', []);
+            return target.getProps().setPropValue('dataSource', null);
+          }
+          if (value.isSelect) {
+            target.getProps().setPropValue('currentFields', []);
+          }
+          setBatchVariables(target, [
+            {
+              label: 'currentFields',
+              value: value.item.fields,
+            },
+          ]);
+          return target.getProps().setPropValue('dataSource', value.item);
+        },
+      },
+      setter: {
+        componentName: 'PisellDataSourceSetter',
+        props: {
+          mode: 'list',
+        },
+      },
+    },
+    {
+      name: 'labelField',
+      condition: (target) => {
+        const optionSourceType = target
+          .getProps()
+          .getPropValue('optionSourceType');
+        return optionSourceType === 'api';
+      },
+      title: {
+        type: 'i18n',
+        'en-US': 'Label Field',
+        'zh-CN': '选项文本字段',
+      },
+      setter: {
+        componentName: 'SelectSetter',
+        props: (target) => {
+          const fields = getVariable(target, 'currentFields');
+          return {
+            options: fields?.map?.((item) => ({
+              title: item.uiSchema.title,
+              value: item.name,
+            })),
+          };
+        },
+      },
+    },
+    {
+      name: 'valueField',
+      condition: (target) => {
+        const optionSourceType = target
+          .getProps()
+          .getPropValue('optionSourceType');
+        return optionSourceType === 'api';
+      },
+      title: {
+        type: 'i18n',
+        'en-US': 'Value Field',
+        'zh-CN': '选项值字段',
+      },
+      setter: {
+        componentName: 'SelectSetter',
+        props: (target) => {
+          // 获取表单容器组件的currentFields
+          const fields = getVariable(target, 'currentFields');
+
+          const options = fields?.map?.((item) => ({
+            title: item.uiSchema.title,
+            value: item.name,
+          }));
+
+          return {
+            mode: 'single',
+            options: options || [],
+          };
+        },
+      },
+    },
+    {
+      name: 'options',
+      condition: (target) => {
+        const optionSourceType = target
+          .getProps()
+          .getPropValue('optionSourceType');
+        return ['custom', 'default'].includes(optionSourceType);
+      },
+      title: {
+        type: 'i18n',
+        'en-US': 'Options',
+        'zh-CN': '选项',
+      },
+      setter: {
+        componentName: 'ArraySetter',
+        props: (target) => {
+          const optionSourceType = target
+            .getProps()
+            .getPropValue('optionSourceType');
+          const optionsLength = target
+            .getProps()
+            .getPropValue('options')?.length;
+          return {
+            itemMaxLength:
+              optionSourceType === 'default' ? optionsLength : 1000,
+            itemSetter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'label',
+                      title: '选项文本',
+                      propType: 'string',
+                      setter: 'PisellI18nSetter',
+                      isRequired: true,
+                    },
+                    {
+                      name: 'value',
+                      title: '选项值',
+                      propType: 'string',
+                      setter: 'StringSetter',
+                      disabled: true,
+                      isRequired: true,
+                    },
+                  ],
+                },
+              },
+            },
+          };
+        },
+      },
+    },
+  ],
+};
+
+// 信息分组
+export const getFormItemGeneralInfoGroup = (children: any) => {
+  return {
+    type: 'group',
+    title: {
+      type: 'i18n',
+      'en-US': 'Info',
+      'zh-CN': '信息',
+    },
+    display: 'accordion',
+    items: children,
+  };
+};
+
+// 校验分组
+export const getFormItemValidateGroup = (children: any) => {
+  return {
+    type: 'group',
+    title: {
+      type: 'i18n',
+      'en-US': 'Validation',
+      'zh-CN': '校验',
+    },
+    display: 'accordion',
+    items: children,
+  };
+};
+
+// 外观分组
+export const getFormItemGeneralAppearanceGroup = (children: any) => {
+  return {
+    type: 'group',
+    title: {
+      type: 'i18n',
+      'en-US': 'Appearance',
+      'zh-CN': '外观',
+    },
+    display: 'accordion',
+    items: children,
+  };
+};
 
 export const formItemGeneralProps = [
   {
@@ -70,7 +738,7 @@ export const formItemGeneralProps = [
 
           return {
             mode: 'single',
-            options:options || [],
+            options: options || [],
           };
         },
       },

package/lowcode/_utils/utils.ts

@@ -4,3 +4,12 @@ export { get, set, has } from 'lodash';
 export function uuid() {
   return ((Math.random() * 1e6) >> 0).toString(36);
 }
+
+export const omit = (obj: Record<string, any>, keys: string[]) => {
+  const shallowCopy = Object.assign({}, obj);
+  for (let i = 0; i < keys.length; i += 1) {
+    const key = keys[i];
+    delete shallowCopy[key];
+  }
+  return shallowCopy;
+};