@pisell/materials 3.0.62 → 6.0.2

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

@@ -0,0 +1,784 @@
+import snippets from './snippets';
+import { uuid } from '../_utils/utils';
+import {
+  createFormGroup,
+  createFormItemSchema,
+  formSchema2PisellFieldsOptions,
+  fields2ChildrenSchemas,
+  createSubmitButton,
+  getDataSourceVariables,
+  getVariable,
+  getCurrentValueVariables,
+  setBatchVariables,
+} from './utils';
+import { MetaType } from '../_utils/type';
+
+const dataSourceForm: MetaType = {
+  snippets,
+  componentName: 'DataSourceForm',
+  title: '表单',
+  category: '表单',
+  group: '无代码组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'DataSourceForm',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  generalProps: [
+    {
+      type: 'group',
+      title: {
+        type: 'i18n',
+        'en-US': 'Info',
+        'zh-CN': '信息',
+      },
+      display: 'accordion',
+      items: [
+        {
+          name: 'title',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Title',
+              'zh-CN': '标题',
+            },
+          },
+          // display: 'block',
+          setter: 'PisellI18nSetter',
+        },
+        {
+          name: 'description',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Description',
+              'zh-CN': '描述',
+            },
+          },
+          // display: 'block',
+          setter: 'PisellI18nSetter',
+        },
+      ],
+    },
+    {
+      type: 'group',
+      title: {
+        type: 'i18n',
+        'en-US': 'Data',
+        'zh-CN': '数据',
+      },
+      display: 'accordion',
+      items: [
+        {
+          name: 'dataSource',
+          title: {
+            type: 'i18n',
+            'en-US': 'Source',
+            'zh-CN': '数据源',
+          },
+          extraProps: {
+            setValue(target: any, value: any) {
+              // 如果value为空，则清空表单
+              if (!value.item) {
+                target.getProps().setPropValue('title', '');
+                setBatchVariables(target, [
+                  {
+                    label: 'currentFields',
+                    value: [],
+                  },
+                  {
+                    label: 'dataSourceTitle',
+                    value: '',
+                  },
+                  {
+                    label: 'dataSourceValue',
+                    value: '',
+                  },
+                ]);
+                target.node.children.importSchema([]);
+                return target.getProps().setPropValue('dataSource', '');
+              }
+
+              // 如果重新选择选择数据源，则清空表单
+              if (value.isSelect) {
+                target.getProps().setPropValue('title', '');
+                target.node.children.importSchema([]);
+              }
+
+              let childrenSchemas = fields2ChildrenSchemas(
+                value.item.fields,
+                target.getProps().getPropValue('renderMode')
+              );
+
+              if (target.node.children.isEmptyNode) {
+                target.node.children.importSchema([
+                  createFormGroup(childrenSchemas),
+                  createSubmitButton(),
+                ]);
+              }
+              // 如果Title是空：选择Source后，自动把Source的名称填写到Title里
+              if (
+                !target.node.getProps().getPropValue('title') &&
+                value.title
+              ) {
+                target.getProps().setPropValue('title', value.title);
+              }
+
+              const dataSource = value.isVariable ? value.value : value.item;
+
+              setBatchVariables(target, [
+                {
+                  label: 'currentFields',
+                  value: value.item.fields,
+                },
+                {
+                  label: 'dataSourceTitle',
+                  value: value.title,
+                },
+                {
+                  label: 'dataSourceValue',
+                  value: dataSource,
+                },
+              ]);
+
+              return target.getProps().setPropValue('dataSource', dataSource);
+            },
+          },
+          setter: {
+            componentName: 'PisellDataSourceSetter',
+            props: (target: any) => {
+              return {
+                mode: target.getProps().getPropValue('renderMode'),
+                variables: getDataSourceVariables(target),
+              };
+            },
+          },
+        },
+        {
+          title: '字段',
+          display: 'entry',
+          type: 'group',
+          items: [
+            {
+              title: {
+                type: 'i18n',
+                'en-US': 'Fields',
+                'zh-CN': '字段',
+              },
+              name: '_fields',
+              display: 'block',
+              setter: {
+                componentName: 'PisellFieldSetter',
+                props: (target: any) => {
+                  const formSchema = target.node.schema;
+                  const allFields = getVariable(target, 'currentFields');
+                  const options = formSchema2PisellFieldsOptions(
+                    formSchema,
+                    allFields
+                  );
+                  return {
+                    options,
+                  };
+                },
+              },
+              extraProps: {
+                setValue(target: any, value: any) {
+                  const { operate } = value;
+                  const { mode, field, group } = operate;
+                  if (value.operate.mode === 'hidden') {
+                    target.node.document.removeNode(field);
+                  } else if (value.operate.mode === 'show') {
+                    // 需要追加的元素容器 优先顺序 1.当前表单最后一个分组 -> 2.当前表单
+                    let appendContainer = target.node;
+                    let lastGroup: any;
+                    target.node.children.forEach((item: any) => {
+                      if (item.componentName === 'FormGroup') {
+                        lastGroup = item;
+                      }
+                    });
+                    appendContainer = lastGroup || appendContainer;
+                    // 全部字段
+                    const allFields = getVariable(target, 'currentFields');
+
+                    const nocobaseField = allFields.find(
+                      (item: any) => item.name === field
+                    );
+                    if (nocobaseField) {
+                      const appendSchema = createFormItemSchema(
+                        nocobaseField,
+                        target.getProps().getPropValue('renderMode')
+                      );
+                      const appendNode =
+                        target.node.document.createNode(appendSchema);
+                      appendContainer.children.insert(appendNode);
+                    }
+                  }
+                  // 插入schema后 有概率不生效，所以这里手动rerender
+                  // setTimeout(() => {
+                  //   target.node.document.project.simulatorHost.rerender();
+                  // });
+                  return {};
+                },
+              },
+            },
+          ],
+        },
+        {
+          name: 'currentValue',
+          title: {
+            type: 'i18n',
+            'en-US': 'Acquire data from',
+            'zh-CN': '从以下位置获取数据',
+          },
+          condition(target) {
+            return ['edit', 'view'].includes(
+              target.getProps().getPropValue('renderMode')
+            );
+          },
+          extraProps: {
+            setValue(target, value) {
+              if (!value.value) {
+                return target.getProps().setPropValue('currentValue', '');
+              }
+              return target
+                .getProps()
+                .setPropValue('currentValue', value.value);
+            },
+          },
+          setter: {
+            componentName: 'PisellDataSourceSetter',
+            props: (target) => {
+              return {
+                isShowOriginalDataSource: false,
+                variables: getCurrentValueVariables(target),
+              };
+            },
+          },
+        },
+      ],
+    },
+    {
+      type: 'group',
+      title: {
+        type: 'i18n',
+        'en-US': 'Variables',
+        'zh-CN': '变量',
+      },
+      display: 'accordion',
+      items: [],
+    },
+    {
+      type: 'group',
+      title: {
+        type: 'i18n',
+        'en-US': 'Appearance',
+        'zh-CN': '外观',
+      },
+      display: 'accordion',
+      items: [
+        {
+          name: 'showTitle',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Show form title',
+              'zh-CN': '显示表单标题',
+            },
+          },
+          defaultValue: true,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'showDescription',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Show description',
+              'zh-CN': '显示表单描述',
+            },
+          },
+          defaultValue: true,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'groupInfoPosition',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Group info position',
+              'zh-CN': '分组信息位置',
+            },
+          },
+          setter: [
+            {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  {
+                    title: 'Top',
+                    value: 'top',
+                  },
+                  {
+                    title: 'Side',
+                    value: 'side',
+                  },
+                ],
+              },
+            },
+            {
+              componentName: 'VariableSetter',
+            },
+          ],
+        },
+        {
+          name: 'layout',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Field label position',
+              'zh-CN': '字段标签位置',
+            },
+          },
+          setter: [
+            {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  {
+                    title: 'Top',
+                    value: 'vertical',
+                  },
+                  {
+                    title: 'Side',
+                    value: 'horizontal',
+                  },
+                ],
+              },
+            },
+            {
+              componentName: 'VariableSetter',
+            },
+          ],
+          extraProps: {
+            setValue(target: any, value: any) {
+              if (value === 'vertical') {
+                target.getProps().setPropValue('labelCol', {
+                  span: 24,
+                });
+                target.getProps().setPropValue('wrapperCol', {
+                  span: 24,
+                });
+              } else if (value === 'horizontal') {
+                target.getProps().setPropValue('labelCol', {
+                  flex: '142px',
+                });
+                target.getProps().setPropValue('wrapperCol', {
+                  flex: '1',
+                });
+              }
+              return target.getProps().setPropValue('layout', value);
+            },
+          },
+        },
+        {
+          name: 'size',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Size',
+              'zh-CN': '尺寸',
+            },
+          },
+          defaultValue: 'default',
+          setter: {
+            componentName: 'RadioGroupSetter',
+            props: {
+              options: [
+                {
+                  title: '小',
+                  value: 'small',
+                },
+                {
+                  title: '中',
+                  value: 'middle',
+                },
+                {
+                  title: '大',
+                  value: 'large',
+                },
+              ],
+            },
+          },
+        },
+      ],
+    },
+  ],
+  configure: {
+    props: [
+      {
+        name: 'ref',
+        title: {
+          label: 'ref',
+          tip: "ref | 通过 this.$('xxx') 获取到组件实例",
+        },
+        defaultValue: () => {
+          return `form_${uuid()}`;
+        },
+        setter: 'StringSetter',
+        supportVariable: true,
+      },
+      {
+        name: 'values',
+        title: { label: '表单数据源', tip: '表单数据源' },
+        setter: 'JsonSetter',
+        supportVariable: true,
+      },
+      {
+        name: 'colon',
+        title: { label: '展示冒号', tip: '' },
+        defaultValue: true,
+        setter: 'BoolSetter',
+        supportVariable: true,
+      },
+      {
+        name: 'hideRequiredMark',
+        title: { label: '隐藏必填标记', tip: '隐藏必填标记' },
+        defaultValue: false,
+        setter: 'BoolSetter',
+        supportVariable: true,
+      },
+      {
+        type: 'group',
+        title: '布局',
+        display: 'accordion',
+        items: [
+          {
+            name: 'labelCol',
+            title: '标签栅格布局设置',
+            display: 'inline',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'span',
+                      title: '宽度',
+                      setter: {
+                        componentName: 'NumberSetter',
+                        props: {
+                          min: 0,
+                          max: 24,
+                        },
+                      },
+                    },
+                    {
+                      name: 'offset',
+                      title: '偏移',
+                      setter: {
+                        componentName: 'NumberSetter',
+                        props: {
+                          min: 0,
+                          max: 24,
+                        },
+                      },
+                    },
+                  ],
+                },
+                extraSetter: [
+                  {
+                    name: 'span',
+                    title: '宽度',
+                    setter: {
+                      componentName: 'NumberSetter',
+                      props: {
+                        min: 0,
+                        max: 24,
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+            description:
+              'label 标签布局，同 `<Col>` 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效',
+          },
+          {
+            name: 'wrapperCol',
+            title: '内容栅格布局设置',
+            display: 'inline',
+            setter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'span',
+                      title: '宽度',
+                      setter: {
+                        componentName: 'NumberSetter',
+                        props: {
+                          min: 0,
+                          max: 24,
+                        },
+                      },
+                    },
+                    {
+                      name: 'offset',
+                      title: '偏移',
+                      setter: {
+                        componentName: 'NumberSetter',
+                        props: {
+                          min: 0,
+                          max: 24,
+                        },
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+            description:
+              '需要为输入控件设置布局样式时，使用该属性，用法同 labelCol',
+          },
+        ],
+      },
+      {
+        name: 'labelAlign',
+        title: {
+          label: '标签对齐',
+          tip: 'label 标签的文本对齐方式',
+        },
+        setter: {
+          componentName: 'RadioGroupSetter',
+          props: {
+            options: [
+              {
+                title: '左',
+                value: 'left',
+              },
+              {
+                title: '右',
+                value: 'right',
+              },
+            ],
+          },
+        },
+        defaultValue: 'right',
+      },
+      {
+        name: 'layout',
+        title: { label: '表单布局', tip: '表单布局' },
+        setter: {
+          componentName: 'RadioGroupSetter',
+          props: {
+            options: [
+              {
+                title: '水平',
+                value: 'horizontal',
+              },
+              {
+                title: '垂直',
+                value: 'vertical',
+              },
+              {
+                title: '行内',
+                value: 'inline',
+              },
+            ],
+          },
+        },
+        defaultValue: 'horizontal',
+      },
+      {
+        name: 'name',
+        title: {
+          label: '表单名称',
+          tip: '表单名称，会作为表单字段 `id` 前缀使用',
+        },
+        setter: 'StringSetter',
+        supportVariable: true,
+      },
+      {
+        name: 'preserve',
+        title: {
+          label: '删除时保留值',
+          tip: '当字段被删除时保留字段值',
+        },
+        defaultValue: true,
+        setter: 'BoolSetter',
+        supportVariable: true,
+      },
+      {
+        name: 'scrollToFirstError',
+        title: {
+          label: '滚至错误',
+          tip: '提交失败自动滚动到第一个错误字段',
+        },
+        defaultValue: true,
+        setter: 'BoolSetter',
+        supportVariable: true,
+      },
+      {
+        name: 'size',
+        title: {
+          label: '字段组件尺寸',
+          tip: '设置字段组件的尺寸（仅限 antd 组件）',
+        },
+        setter: {
+          componentName: 'RadioGroupSetter',
+          props: {
+            options: [
+              {
+                title: '大',
+                value: 'large',
+              },
+              {
+                title: '中',
+                value: 'middle',
+              },
+              {
+                title: '小',
+                value: 'small',
+              },
+            ],
+          },
+        },
+        defaultValue: 'middle',
+      },
+      {
+        name: 'validateMessages',
+        title: { label: '验证提示模板', tip: '验证提示模板' },
+        setter: 'JsonSetter',
+      },
+      {
+        name: 'validateTrigger',
+        title: { label: '校验时机', tip: '所有字段校验触发时机' },
+        setter: {
+          componentName: 'RadioGroupSetter',
+          props: {
+            options: [
+              {
+                title: '当前值变化时',
+                value: 'onChange',
+              },
+              {
+                title: '失去焦点时',
+                value: 'onBlur',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: 'onFinish',
+        title: {
+          label: '提交表单且数据验证成功后回调事件',
+          tip: '提交表单且数据验证成功后回调事件',
+        },
+      },
+      {
+        name: 'onFinishFailed',
+        title: {
+          label: '提交表单且数据验证失败后回调事件',
+          tip: '提交表单且数据验证失败后回调事件',
+        },
+      },
+      {
+        name: 'onFieldsChange',
+        title: {
+          label: '字段更新时触发回调事件',
+          tip: '字段更新时触发回调事件',
+        },
+      },
+      {
+        name: 'onValuesChange',
+        title: {
+          label: '字段值更新时触发回调事件',
+          tip: '字段值更新时触发回调事件',
+        },
+      },
+    ],
+    component: { isContainer: true },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onFinish',
+          template:
+            "onFinish(values,${extParams}){\n// 提交表单且数据验证成功后回调事件\nconsole.log('onFinish',values);}",
+        },
+        {
+          name: 'onFinishFailed',
+          template:
+            "onFinishFailed({values,errorFields,outOfDate},${extParams}){\n// 提交表单且数据验证失败后回调事件\nconsole.log('onFinishFailed',values, errorFields, outOfDate);}",
+        },
+        {
+          name: 'onFieldsChange',
+          template:
+            "onFieldsChange(changedFields,allFields,${extParams}){\n// 字段更新时触发回调事件\nconsole.log('onFieldsChange',changedFields,allFields);}",
+        },
+        {
+          name: 'onValuesChange',
+          template:
+            "onValuesChange(changedValues,allValues,${extParams}){\n// 字段值更新时触发回调事件\nconsole.log('onValuesChange',changedValues,allValues);}",
+        },
+      ],
+    },
+    advanced: {
+      callbacks: {
+        onNodeAdd: (dragment, currentNode) => {
+          const comps = [
+            'Input',
+            'Select',
+            'Radio',
+            'Checkbox',
+            'Switch',
+            'Upload',
+            'Datepicker',
+            'Rate',
+            'Transfer',
+          ];
+
+          if (
+            !dragment ||
+            !dragment.componentMeta ||
+            !dragment.componentMeta.npm ||
+            !dragment.componentMeta.npm.package ||
+            dragment.componentMeta.npm.package.indexOf(
+              '@alilc/antd-lowcode-materials'
+            ) === -1 ||
+            comps.every((comp) => dragment.componentName.indexOf(comp) === -1)
+          ) {
+            return;
+          }
+
+          // 为目标元素包裹一层P
+          const layoutPNode = currentNode?.document?.createNode({
+            componentName: 'Form.Item',
+            props: {
+              label: '表单项: ',
+            },
+            children: [(dragment as any).exportSchema()],
+          });
+          // 当前dragment还未添加入node子节点,需要setTimeout处理
+          setTimeout(() => {
+            (currentNode?.replaceChild as any)(
+              dragment,
+              (layoutPNode as any).exportSchema(),
+              // 避免生成新的 nodeId
+              { reserveSchemaNodeId: true }
+            );
+          }, 1);
+        },
+      },
+    },
+  },
+};
+export default dataSourceForm;