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

## 在线文档

import React from 'react';
import { Bundle } from '@ali/visualengine';
import Icon from './logo';
import { getDialogBasePrototype } from '@/common/manager/dialog';
import { DisplayPosition } from '@/type/display-position';
import { handleDesignFormConfig } from '@/common/util/util';
import {
  createFormDefaultValueSetters,
  createFormItemSetters,
} from '@/lowcode/cn-form/form-item';
import { createButtonListSetters } from '@/common/manager/button';
import { ButtonPosition } from '@/type/button-position';
import {
  createFormDataSourceSetters,
  createFormStyleSetters,
} from '@/common/manager/setter-snippet';

// 原型配置请参考：https://lark.alipay.com/vision/docs/prototype
export default Bundle.createPrototype({
  title: '弹窗表单',
  componentName: 'CnFormDialog',
  category: '表单',
  disableBehaviors: ['copy'],
  icon: Icon,
  docUrl:
    'https://cone.cainiao-inc.com/market/awesome?business=internationality&id=3313',
  hasSlot: false,
  isInline: false,
  isContainer: false,
  isModal: true,
  enableCopy: true,
  rectSelector: 'div.cn-dialog-alc',
  configure: [
    {
      name: 'isCnFormDialog',
      title: 'cnDialog',
      initialValue: true,
      display: 'none',
    },
    ...getDialogBasePrototype({ position: DisplayPosition.formDialog }),
    {
      name: '_context',
      title: '上下文',
      initialValue: {
        type: 'JSExpression',
        value: 'this',
      },
      display: 'none',
    },
    {
      name: 'config',
      title: '表单项配置',
      display: 'accordion',
      initialValue: [
        {
          label: '名称',
          name: 'name',
          componentName: 'CnInput',
          options: {},
        },
      ],
      mutator(value) {
        const nodeId = this?.getNode?.()?._id;
        setTimeout(() => {
          if (nodeId && Array.isArray(value)) {
            handleDesignFormConfig({
              newFormConfig: value,
              nodeId,
            });
          }
        });
      },
      setter: createFormItemSetters({ position: DisplayPosition.formDialog }),
      // supportVariable: true,
    },
    {
      name: 'buttons',
      title: '底部按钮栏',
      display: 'accordion',
      // collapsed:false,
      initialValue: [
        {
          children: '取消',
          optType: 'cancel',
          primaryKey: 'cancel',
        },
        {
          primaryKey: 'reset',
          children: '重置',
          optType: 'reset',
        },
        {
          children: '提交',
          optType: 'submit',
          primaryKey: 'submit',
          type: 'primary',
        },
      ],
      // supportVariable: true,
      setter: createButtonListSetters({ position: ButtonPosition.formDialog }),
    },
    {
      name: 'formStyle',
      display: 'accordion',
      title: '表单样式',
      collapsed: true,
      extraProps: {
        defaultCollapsed: true,
      },
      setter: {
        componentName: 'ObjectSetter',
        props: {
          config: {
            items: [
              ...createFormStyleSetters({
                position: ButtonPosition.formDialog,
              }),
            ],
          },
        },
      },
    },
    ...createFormDefaultValueSetters({
      position: DisplayPosition.formDialog,
    }),
    ...createFormDataSourceSetters(),
  ],
});