@cainiaofe/cn-ui-lowcode/src/lowcode/cn-form-alc/prototype.js

## 在线文档

import { Bundle } from '@ali/visualengine';
import React from 'react';
// import { createSlot } from '@ali/vu-slot-property';
import Icon from './logo.tsx';
import {
  createDataSourceSetters,
  createDynamicConfigSetter,
  createDynamicFormConfigSetter,
  createFormDataSourceSetters,
  createFormDefaultValueSetters,
  createFormItemSetters,
  createFormStyleSetters,
} from './prototype/form-item';
import { getItemInitialValue } from '@/common/manager/filter-item';
import { DisplayPosition } from '@/common/manager/position/display-position';
import { createButtonListSetters } from '@/common/manager/button';
import { ButtonPosition } from '@/common/manager/position/button-position';
import { getBizExtendPrototype } from '@/common/manager/plugin';

import {
  handleDesignFormConfig,
  isFormListCurrent,
  removeDataSourceByNode,
} from '@/common/util/util';
import { CnMessage, CnIcon, CnTooltip } from '@cainiaofe/cn-ui';
import DocLinkSetter from '@/common/setter/doc-link-setter';
import IdSetter from '@/common/setter/id-setter';
import {
  getCnFormStepConfigSnippet,
  getNodeIdSetterSnippet,
} from '@/common/manager/setter-snippet';
import { getJSExpressionPrototype } from '@/common/manager/common-style';

const CnFormBundle = Bundle.createPrototype({
  title: '表单（CnForm）',
  componentName: 'CnForm',
  category: '表单',
  enableCopy: true,
  // disableBehaviors: ['copy'],
  icon: Icon,
  docUrl:
    'https://cone.cainiao-inc.com/market/awesome?business=internationality&id=3313',
  isInline: false,
  isContainer: false,
  hasSlot: true,
  snippets: [
    {
      screenshot:
        'https://img.alicdn.com/tfs/TB1gaZrr.T1gK0jSZFhXXaAtVXa-1048-366.png',
      label: 'CnForm',
      schema: {
        componentName: 'CnForm',
        props: {},
      },
    },
  ],
  onNodeRemoveByUser(node) {
    removeDataSourceByNode(node);
  },
  configure: [
    {
      name: 'isCnForm',
      title: 'cnForm',
      initialValue: true,
      display: 'none',
    },
    {
      name: '_context',
      title: '上下文',
      initialValue: {
        type: 'JSExpression',
        value: 'this',
      },
      display: 'none',
    },
    {
      name: 'title',
      title: '表单名称',
      display: 'inline',
      initialValue: '表单1',
      tip: '当前表单的名称，方便检索使用',
      setter: 'StringSetter',
    },
    {
      name: 'doc',
      title: '使用文档',
      display: 'inline',
      setter: (
        <DocLinkSetter
          link={
            'https://alidocs.dingtalk.com/i/nodes/NkPaj7GAXdpWOkPeZ6p0Wqwgylnomz9B?iframeQuery=anchorId%3Dlc5ux3tsgrby21r5jjt'
          }
          content={'点击查看表单的正确使用姿势'}
        />
      ),
    },
    {
      name: 'config',
      title: '表单项配置',
      display: 'accordion',
      initialValue: [
        {
          label: '卡片',
          name: 'card',
          componentName: 'CnCard',
          options: {
            title: '卡片标题',
          },
        },
        {
          label: '子卡片',
          name: 'subCard',
          componentName: 'CnCardSubCard',
          options: {
            subTitle: '二级标题',
          },
        },
        getItemInitialValue({
          position: DisplayPosition.form,
        }),
      ],
      mutator(value) {
        const nodeId = this?.getNode?.()?._id;
        setTimeout(() => {
          if (nodeId && Array.isArray(value)) {
            handleDesignFormConfig({
              newFormConfig: value,
              nodeId,
            });
          }
        });
        // const current = isFormListCurrent(value);
        // if(!current) {
        //   CnMessage.error('表单项不能位于卡片外面')
        // }
      },
      setter: createFormItemSetters({ position: DisplayPosition.form }),
      // supportVariable: true,
    },
    {
      name: 'buttons',
      title: '底部按钮栏',
      display: 'accordion',
      // collapsed:false,
      initialValue: [
        {
          primaryKey: 'reset',
          children: '重置',
          optType: 'reset',
        },
        {
          children: '提交',
          optType: 'submit',
          primaryKey: 'submit',
          type: 'primary',
        },
      ],
      // supportVariable: true,
      setter: createButtonListSetters({ position: ButtonPosition.form }),
    },
    {
      name: 'formStyle',
      display: 'accordion',
      title: '表单样式',
      collapsed: true,
      extraProps: {
        defaultCollapsed: true,
      },
      setter: {
        componentName: 'ObjectSetter',
        props: {
          config: {
            items: [
              ...createFormStyleSetters({
                position: DisplayPosition.form,
              }),
            ],
          },
        },
      },
    },
    ...createFormDefaultValueSetters({
      afterRequestSuccessPosition:
        ButtonPosition.formDefaultValueAfterRequestSuccess,
      position: DisplayPosition.form,
    }),
    ...createDynamicFormConfigSetter(),
    ...getCnFormStepConfigSnippet(),
    ...getBizExtendPrototype({
      componentName: 'CnForm',
    }),
    {
      title: '高级配置',
      type: 'group',
      collapsed: true,
      display: 'accordion',
      items: [
        getNodeIdSetterSnippet(),
        {
          name: 'handleProps',
          title: '手动设置组件props',
          display: 'inline',
          setter: getJSExpressionPrototype({
            type: 'props',
          }),
        },
        ...createDataSourceSetters(),
        {
          name: 'beta',
          tip: '测试中，不建议存量页面直接开启',
          title:{
            label:<div style={{display:'flex',alignItems:'center'}}>高性能版<CnTooltip 
              trigger={<CnIcon type='exclamation-r'/>}
            >
              测试中，不建议存量页面直接开启
            </CnTooltip></div>
          },
          display: 'inline',
          setter: 'BoolSetter'
        },
        ...createDynamicConfigSetter(),
      ],
    },
  ],
});

export default CnFormBundle;