dc/src/pages/fengkong/features/group/add/index.js

import React from 'react'
import { Form, Input, Row, Col, 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'
import { connect } from 'dva'
import router from 'umi/router'

const formItemLayout = {
  layout: 'vertical'
}
@connect(({ user }) => ({
  currentUser: user.currentUser
}))
@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: this.props.currentUser.name, // 创建人
          updateUser: this.props.currentUser.name // 最后修改人
        }).then(res => {
          if (res.code === 0) {
            this.setState({ ...values })
            Modal.success({
              title: '提交成功',
              content: '策略代码编译正常，点击“测试按钮”可以继续测试策略逻辑'
            })
            // 跳转到列表页
            router.push('/fengkong/features/group')
          }
        })
      }
    })
  }

  test =() => {
    if (!this.state.name) {
      message.warn('请先提交分组内容!')
      return false
    }
    test({
      name: this.state.name,
      input: 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('features')(<Input placeholder="，号分割" />)}
              </Form.Item>
              <Form.Item label="分组描述">
                {getFieldDecorator('description')(<Input.TextArea placeholder="多行输入" />)}
              </Form.Item>
              <Form.Item label="前置函数">
                {getFieldDecorator('preScript')(<Input placeholder="预处理分组函数" />)}
              </Form.Item>
              <Form.Item label="后置函数">
                {getFieldDecorator('postScript')(<Input placeholder="后处理分组函数" />)}
              </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