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

import React from 'react'
import { Form, Input, Row, Col, Switch, Button, Modal, message, Select, Icon } from 'antd'
import AceEditor from 'react-ace'
import { create, test, groupList } 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 = {
    type: 0,
    content: '',
    enabled: false,
    timeTaskEnabled: false,
    showTest: false, // 是否展示测试内容
    testContent: '', // 测试数据
    testResult: '', // 测试结果
    dos: [],
    groupList: [],
    group: '',
    features: ''
  }

  componentDidMount () {
    groupList({ pageNum: 999 }).then(res => this.setState({ groupList: res.data.list, group: res.data.list[0].name, features: res.data.list[0].features }))
  }

  create = () => {
    this.props.form.validateFields((err, values) => {
      if (this.state.type === 4) {
        values.content = JSON.stringify({ group: this.state.group, dos: this.state.dos })
      }
      if (!err) {
        create({
          ...values,
          createUser: this.props.currentUser.name, // 创建人
          updateUser: this.props.currentUser.name // 最后修改人
        }).then(res => {
          console.log(res)
          if (res.code === 0) {
            this.setState({ ...values })
            Modal.success({
              title: '提交成功',
              content: '决策代码编译正常，点击“测试按钮”可以继续测试决策逻辑'
            })
            // 跳转到列表页
            router.push('/fengkong/strategies/strategies')
          }
        })
      }
    })
  }

  test =() => {
    if (!this.state.name) {
      message.warn('请先提交决策内容!')
      return false
    }
    if (this.state.timeTaskEnabled) {
      message.warn('定时启用不能测试,请先关闭!')
      return false
    }
    test({
      name: this.state.name,
      type: this.state.type,
      input: JSON.parse(this.state.testContent)
    }).then(res => {
      if (res.code === 0) {
        this.setState({ testResult: JSON.stringify(res) })
      }
    })
  }

  addDos = () => {
    const dos = this.state.dos.slice()
    dos.push({
      r: { ep: '', f: '', v: '' }, ep: '', v: ''
    })
    this.setState({ dos: dos })
  }

  changeDos = (index, key, value) => {
    const dos = this.state.dos.slice()
    const keyList = key.split('.')

    if (keyList.length > 1) {
      dos[index][keyList[0]][keyList[1]] = value
    } else {
      dos[index][keyList[0]] = value
    }
    this.setState({ dos: dos })
  }

  removeDos = (index) => {
    const dos = this.state.dos.slice()
    dos.slice(index, 1)
    this.setState({ dos: dos })
  }

  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('type', { initialValue: this.state.type })(
                  <Select placeholder={'请选择类型'} onChange={value => this.setState({ type: value })}>
                    <Select.Option value= {0}>策略</Select.Option>
                    <Select.Option value= {1}>流程</Select.Option>
                    <Select.Option value= {2}>模型</Select.Option>
                    <Select.Option value= {3}>调度</Select.Option>
                    <Select.Option value= {4}>规则</Select.Option>
                  </Select>)
                }
              </Form.Item>
              {
                this.state.type === 4 && (
                  <Form.Item label="特征分组">
                    {getFieldDecorator('group', { initialValue: this.state.group })(
                      <Select placeholder={'请选择分组'} onChange={value => this.setState({ group: value }, () => this.setState({ dos: [], features: this.state.groupList.filter(item => item.name === value)[0].features }))}>
                        {
                          this.state.groupList.map(item => <Select.Option value={item.name}>{item.name}</Select.Option>)
                        }
                      </Select>)
                    }
                  </Form.Item>
                )
              }

              <Form.Item label="是否启用">
                {getFieldDecorator('enabled', {
                  initialValue: this.state.enabled
                })(<Switch checked={this.state.enabled} onChange={checked => this.setState({ enabled: checked })} />)}
              </Form.Item>
              {
                this.state.type === 3 && (
                  <Form.Item label="定时是否启用">
                    {getFieldDecorator('timeTaskEnabled', {
                      initialValue: this.state.timeTaskEnabled
                    })(<Switch checked={this.state.timeTaskEnabled} onChange={checked => this.setState({ timeTaskEnabled: checked })} />)}
                  </Form.Item>
                )
              }

              {
                this.state.type === 4 && (
                  <Form.Item label="决策规则开发">
                    <Button onClick={this.addDos}>点击创建规则</Button>
                    {
                      this.state.dos.map((item, index) => (
                        <div style={{ margin: '10px 0' }}>
                          <Select value={item.r.f} style={{ width: '150px' }} onChange={(value) => this.changeDos(index, 'r.f', value)}>
                            {
                              this.state.features.split(',').map(item => (<Select.Option value={item}>{item}</Select.Option>))
                            }
                          </Select>&emsp;
                          <Select value={item.r.ep} style={{ width: '60px' }} onChange={(value) => this.changeDos(index, 'r.ep', value)}>
                            <Select.Option value=">">{'>'}</Select.Option>
                            <Select.Option value=">=">{'>='}</Select.Option>
                            <Select.Option value="<">{'<'}</Select.Option>
                            <Select.Option value="<=">{'<='}</Select.Option>
                            <Select.Option value="!=">{'!='}</Select.Option>
                          </Select>&emsp;
                          <Input defaultValue={item.r.v} style={{ width: '50px' }} onChange={(e) => this.changeDos(index, 'r.v', e.target.value)} />&emsp;
                          <Select value={item.ep} style={{ width: '50px' }} onChange={(value) => this.changeDos(index, 'ep', value)}>
                            <Select.Option value="+">{'+'}</Select.Option>
                            <Select.Option value="-">{'-'}</Select.Option>
                            <Select.Option value="*">{'*'}</Select.Option>
                            <Select.Option value="/">{'/'}</Select.Option>
                          </Select>&emsp;
                          <Input defaultValue={item.v} style={{ width: '50px' }} onChange={(e) => this.changeDos(index, 'v', e.target.value)} />&emsp;
                          <Icon
                            type="minus-circle-o"
                            theme="twoTone"
                            twoToneColor="#eb2f96"
                            onClick={() => this.removeDos(index)}
                          />
                        </div>
                      ))
                    }
                  </Form.Item>
                )
              }
              {
                this.state.type !== 4 && (<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