@cainiaofe/cn-ui-lowcode/src/common/util/dialog.js

## 在线文档

import {
  handleComponentTitle,
  handleI18nLabel,
} from '@/common/util/util';
import { getItemListByPosition } from '@/common/manager/filter-item';
import { DisplayPosition } from '@/common/manager/position/display-position';
import { getJSExpressionPrototype } from '@/common/manager/common-style';
import DocLinkSetter from '@/common/setter/doc-link-setter';
import isEmpty from 'lodash/isEmpty';

export function getDialogBasePrototype(config) {
  const { position } = config || {};
  const titleSetter = [
    {
      componentName: 'CnI18nSetter',
      title: '纯文本',
    },
    {
      componentName: 'SelectSetter',
      props: () => {
        return {
          showSearch: true,
          options: getItemListByPosition({
            position: DisplayPosition.dialogTitle,
          }),
        };
      },
      title: '选择业务组件',
    },
  ];
  if ([DisplayPosition.formDialog, DisplayPosition.dialog].includes(position)) {
    titleSetter.push(getJSExpressionPrototype({ type: 'formDialogTitle' }));
  }
  return [
    {
      name: 'isCnDialog',
      title: 'cnDialog',
      initialValue: true,
      display: 'none',
    },
    {
      name: 'dialogProps',
      title: '弹窗配置',
      type: 'group',
      display: 'accordion',
      items: [
        {
          name: 'doc',
          title: '使用文档',
          display: 'inline',
          setter: (
            <DocLinkSetter
              link={
                'https://alidocs.dingtalk.com/i/nodes/NkPaj7GAXdpWOkPeZ6p0Wqwgylnomz9B?iframeQuery=anchorId%3Dlc5uwarcdbha95lzh'
              }
              content={'点击查看弹窗的正确使用姿势'}
            />
          ),
        },
        {
          name: 'title',
          title: '弹窗标题',
          display: 'inline',
          setter: {
            componentName: 'MixedSetter',
            props: {
              setters: titleSetter,
            },
          },
          initialValue: '标题',
          // supportVariable: true,
          mutator(value) {
            let name = '弹窗';
            const isCnFormDialog =
              this?.getNode?.().getPropValue?.('isCnFormDialog');
            const title = handleI18nLabel(value || '');
            if (isCnFormDialog) {
              name = '表单弹窗';
            }
            this?.setExtraPropValue?.(
              'title',
              `${name}_${handleComponentTitle(title)}`,
            );
          },
        },
        {
          name: 'titleDescription',
          title: '弹窗描述',
          display: 'inline',
          setter: 'StringSetter',
          initialValue: '',
        },
        {
          name: 'dialogMode',
          title: '展示样式',
          display: 'inline',
          initialValue: 'dialog',
          setter: {
            componentName: 'RadioGroupSetter',
            props: {
              options: [
                {
                  title: '弹窗',
                  value: 'dialog',
                },
                {
                  title: '抽屉',
                  value: 'drawer',
                },
              ],
            },
          },
          // supportVariable: true,
        },
        {
          name: 'size',
          title: '弹窗大小',
          display: 'inline',
          initialValue: 'medium',
          setter: {
            componentName: 'RadioGroupSetter',
            props: {
              options: [
                { title: '自动大小', value: 'autoLarge' },
                { title: '大', value: 'large' },
                { title: '中', value: 'medium' },
                { title: '小', value: 'small' },
              ],
            },
          },
          // supportVariable: true,
        },
        {
          name: 'closeMode',
          title: '关闭方式',
          tip: '不选就默认行为',
          display: 'inline',
          supportVariable: true,
          setter: {
            componentName: 'SelectSetter',
            props: {
              mode: 'multiple',
              hasClear: true,
              options: [
                { title: '遮罩层', value: 'mask' },
                { title: '关闭按钮', value: 'close' },
                { title: 'esc', value: 'esc' },
                { title: '只能按钮关闭(选了其他不生效)', value: 'cancel' },
              ],
            },
            // supportVariable: true,
          },
          mutator(value) {
            if (isEmpty(value)) {
              this?.setPropValue?.(
                'closeMode',
                undefined,
              );
            }
          },
        },
        {
          name: 'hasMask',
          title: '是否显示遮罩',
          display: 'inline',
          initialValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'transparencyMask',
          title: '遮罩层透明',
          display: 'inline',
          setter: 'BoolSetter',
          disabled() {
            return (
              this?.getNode?.().getPropValue?.('hasMask') !== true ||
              this?.getNode?.().getPropValue?.('dialogMode') !== 'drawer'
            );
          },
        },
      ],
    },
  ];
}