dc/src/pages/fengkong/strategies/add/index.js

import React from 'react'
import { Form, Input, Row, Col, Switch, Button, Modal, message } from 'antd'
import AceEditor from 'react-ace'
import { create, test } from '../service'

import 'ace-builds/src-noconflict/mode-java'
import 'ace-builds/src-noconflict/theme-monokai'

const formItemLayout = {
  layout: 'vertical'
}

@Form.create()
class Add extends React.PureComponent {
  state = {
    content: '',
    showTest: false, // 是否展示测试内容
    testContent: '', // 测试数据
    testResult: '' // 测试结果
  }

  create = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        create({
          ...values,
          createUser: '马喆诚', // 创建人
          updateUser: '马喆诚' // 最后修改人
        }).then(res => {
          if (res.code === 0) {
            this.setState({ ...values })
            Modal.success({
              title: '提交成功',
              content: '策略代码编译正常，点击“测试按钮”可以继续测试策略逻辑'
            })
          }
        })
      }
    })
  }

  test =() => {
    if (!this.state.name) {
      message.warn('请先提交策略内容!')
      return false
    }
    test({
      name: this.state.name,
      content: this.state.testContent
    }).then(res => {
      if (res.code === 0) {
        this.setState({ testResult: res.data })
      }
    })
  }

  render () {
    const { getFieldDecorator } = this.props.form

    return (
      <div>
        <h1>新增策略</h1>
        <Row>
          <Col span={12}>
            <Form {...formItemLayout}>
              <Form.Item label="策略名称">
                {getFieldDecorator('name')(<Input placeholder="全英文或英文带下划线" />)}
              </Form.Item>
              <Form.Item label="策略描述">
                {getFieldDecorator('description')(<Input.TextArea placeholder="多行输入" />)}
              </Form.Item>
              <Form.Item label="是否启用">
                {getFieldDecorator('enabled')(<Switch />)}
              </Form.Item>
              <Form.Item label="策略逻辑开发">
                {getFieldDecorator('content')(
                  <AceEditor
                    style={{ width: this.state.showTest ? '100%' : '200%' }}
                    mode="java"
                    theme="monokai"
                    name="content"
                    onChange={(value) => this.setState({ content: value })}
                    fontSize={14}
                    showPrintMargin={true}
                    showGutter={true}
                    highlightActiveLine={true}
                    value={''}
                    setOptions={{
                      enableBasicAutocompletion: true,
                      enableLiveAutocompletion: true,
                      enableSnippets: true,
                      showLineNumbers: true,
                      tabSize: 2
                    }}
                  />
                )}
              </Form.Item>
              <Form.Item>
                <Button type="primary" onClick={this.create}>提交</Button>&emsp;
                <Button onClick={() => this.setState({ showTest: true })}>测试</Button>
              </Form.Item>
            </Form>
          </Col>
          <Col span={12}>
            <div style={{ paddingLeft: '20px', display: this.state.showTest ? 'block' : 'none' }}>
              <Form.Item label="输入数据">
                <AceEditor
                  mode="json"
                  theme="monokai"
                  onChange={(value) => this.setState({ testContent: value })}
                  fontSize={14}
                  showPrintMargin={true}
                  showGutter={true}
                  highlightActiveLine={true}
                  value={this.state.testContent}
                  height="300px"
                  setOptions={{
                    enableBasicAutocompletion: true,
                    enableLiveAutocompletion: true,
                    enableSnippets: true,
                    showLineNumbers: true,
                    tabSize: 2
                  }}
                />
              </Form.Item>

              <Button type="primary" onClick={this.test}>执行测试</Button>&emsp;
              <Form.Item label="输出结果">
                <AceEditor
                  mode="json"
                  theme="monokai"
                  fontSize={14}
                  showPrintMargin={true}
                  showGutter={true}
                  highlightActiveLine={true}
                  value={this.state.testResult}
                  setOptions={{
                    enableBasicAutocompletion: true,
                    enableLiveAutocompletion: true,
                    enableSnippets: true,
                    showLineNumbers: true,
                    tabSize: 2
                  }}
                />
              </Form.Item>
            </div>

          </Col>
        </Row>

      </div>
    )
  }
}

export default Add