@cainiaofe/cn-ui-lowcode/src/common/setter/form-export-setter/index.js

## 在线文档

import React from 'react';
import { Button, CnBalloon, CnMessage } from '@cainiaofe/cn-ui';
const { CodeControl } = window?.VisualEngineUtils || {};

export default class FormExportSetter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      config: '',
      importConfig: '',
    };
  }

  exportConfig = () => {
    const { prop } = this.props;
    const config = prop?.getNode?.()?.getPropValue?.('config');
    if (Array.isArray(config) && config.length > 0) {
      try {
        this.setState({
          config: JSON.stringify(config, null, '\t'),
        });
      } catch (e) {}
    }
  };
  importConfig = () => {
    const { importConfig } = this.state;
    const { prop } = this.props;
    let newConfig;
    try {
      newConfig = JSON.parse(importConfig);
    } catch (e) {
      CnMessage.error('表单配置不符合JSON格式');
    }
    if (prop && Array.isArray(newConfig) && newConfig.length > 0) {
      const node = prop?.getNode?.();
      const currentId = node?.id;
      const sel = window?.AliLowCodeEngine?.project?.currentDocument?.selection;
      sel?.select?.();
      node?.setPropValue?.('config', newConfig);
      if (currentId && sel) {
        setTimeout(() => {
          sel?.select?.(currentId);
        });
      }
    }
  };

  render() {
    const { config, importConfig } = this.state;
    return (
      <div className=''>
        <CnBalloon
          align={'tr'}
          v2
          closable
          triggerType={'click'}
          title={'您可以将表单配置复制到粘贴板'}
          trigger={<Button onClick={this.exportConfig}>查看表单配置</Button>}
        >
          <CodeControl
            value={config}
            options={{ minimap: { enabled: false }, lineNumbers: 'off' }}
            mode='json' // 'javascript', 'json', 'html', 'css', 'jsx'
            fontSize={14}
            tabSize={2}
            // readOnly={false}
            style={{ width: '100%', height: 200 }}
            // // 如果为 false 或者 0 则不启动节流阀
            throttle={600}
            lineNumbers={'off'}
            enableOutline={false}
            // enableSuggestion
            // defaultSuggestion
            // enableBlurChange
            // diyWordSuggestion
            // checkSyntax // 是否开启预编译检查（限js）
            // // customeSuggestion={getSuggestion}
            // onEditorDidMount={(editor, monaco) => {
            //   console.log('editor, monaco:::>>>', editor, monaco);
            // }} // 编辑器初始化完成
          />
        </CnBalloon>
        <CnBalloon
          // type={'primary'}
          align={'tr'}
          v2
          closable
          triggerType={'click'}
          title={'您可以将表单配置粘贴到输入框中导入'}
          trigger={<Button>导入表单配置</Button>}
        >
          <CodeControl
            value={importConfig}
            options={{ minimap: { enabled: false }, lineNumbers: 'off' }}
            mode='json' // 'javascript', 'json', 'html', 'css', 'jsx'
            fontSize={14}
            tabSize={2}
            onChange={(code) => {
              this.setState({
                importConfig: code,
              });
            }}
            // readOnly={false}
            style={{ width: '100%', height: 200 }}
            // // 如果为 false 或者 0 则不启动节流阀
            throttle={600}
            lineNumbers={'off'}
            enableOutline={false}
            // enableSuggestion
            // defaultSuggestion
            // enableBlurChange
            // diyWordSuggestion
            // checkSyntax // 是否开启预编译检查（限js）
            // // customeSuggestion={getSuggestion}
            // onEditorDidMount={(editor, monaco) => {
            //   console.log('editor, monaco:::>>>', editor, monaco);
            // }} // 编辑器初始化完成
          />
          <div
            style={{
              paddingTop: '10px',
              borderTop: '1px solid #ddd',
              display: 'flex',
              justifyContent: 'flex-end',
            }}
          >
            <Button
              type={'secondary'}
              size={'small'}
              onClick={this.importConfig}
            >
              确定导入
            </Button>
          </div>
        </CnBalloon>
      </div>
    );
  }
}