2022-04-29

king

2022-04-29 eec619b6e3339e9999a7a1c2c5454cef5d763b24

 src/templates/zshare/unattended/settingform/index.jsx

@@ -1,17 +1,19 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Tooltip, Icon, Select, Radio } from 'antd'
import { Form, Row, Col, Tooltip, Select, Radio, InputNumber } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

// import './index.scss'

class SettingForm extends Component {
class UnattenSettingForm extends Component {
  static propTpyes = {
    autoMatic: PropTypes.object,
    actions: PropTypes.array
  }

  state = {
    enable: this.props.autoMatic.enable
    enable: this.props.autoMatic.enable,
    onFinish: this.props.autoMatic.onFinish || 'restart'
  }

  handleConfirm = () => {
@@ -30,7 +32,7 @@
  render() {
    const { actions, autoMatic } = this.props
    const { getFieldDecorator } = this.props.form
    const { enable } = this.state
    const { enable, onFinish } = this.state

    const formItemLayout = {
      labelCol: {
@@ -46,7 +48,7 @@
    return (
      <Form {...formItemLayout}>
        <Row gutter={24}>
          <Col span={20}>
          <Col span={12}>
            <Form.Item label="是否启用">
              {getFieldDecorator('enable', {
                initialValue: autoMatic.enable,
@@ -58,17 +60,17 @@
              )}
            </Form.Item>
          </Col>
          <Col span={20}>
          {enable === 'true' ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="用于自动执行的按钮。">
                <Icon type="question-circle" style={{color: '#c49f47', marginRight: '3px'}} />
                <QuestionCircleOutlined className="mk-form-tip" />
                按钮
              </Tooltip>
            }>
              {getFieldDecorator('action', {
                initialValue: autoMatic.action || '',
                rules: [{
                  required: enable === 'true',
                  required: true,
                  message: '请选择执行按钮！'
                }]
              })(
@@ -79,29 +81,93 @@
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={20}>
          </Col> : null}
          {enable === 'true' ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="按钮执行失败时，后续的处理方式。">
                <Icon type="question-circle" style={{color: '#c49f47', marginRight: '3px'}} />
                报错时
              <Tooltip placement="topLeft" title="按钮执行成功，后续的处理方式。">
                <QuestionCircleOutlined className="mk-form-tip" />
                成功后
              </Tooltip>
            }>
              {getFieldDecorator('onFail', {
                initialValue: autoMatic.onFail,
              {getFieldDecorator('onSuccess', {
                initialValue: autoMatic.onSuccess || 'stay',
              })(
                <Radio.Group onChange={(e) => this.setState({enable: e.target.value})}>
                  <Radio value="stop">停止</Radio>
                  <Radio value="skip">跳过</Radio>
                  <Radio value="again">重新执行</Radio>
                <Radio.Group>
                  <Radio value="next">下一行</Radio>
                  <Radio value="stay">当前行</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          </Col> : null}
          {enable === 'true' ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="按钮执行失败时，后续的处理方式。">
                <QuestionCircleOutlined className="mk-form-tip" />
                失败后
              </Tooltip>
            }>
              {getFieldDecorator('onFail', {
                initialValue: autoMatic.onFail || 'stop',
              })(
                <Radio.Group style={{whiteSpace: 'nowrap'}}>
                  <Radio value="next">下一行</Radio>
                  <Radio value="stay">当前行</Radio>
                  <Radio value="stop">停止</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          {enable === 'true' ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="相邻两条数据，执行时的间隔时间，最小为1s。">
                <QuestionCircleOutlined className="mk-form-tip" />
                数据间隔(s)
              </Tooltip>
            }>
              {getFieldDecorator('gap', {
                initialValue: autoMatic.gap || 2,
              })(
                <InputNumber style={{width: '100%'}} min={1} precision={0}/>
              )}
            </Form.Item>
          </Col> : null}
          {enable === 'true' ? <Col span={12}>
            <Form.Item label="完成后">
              {getFieldDecorator('onFinish', {
                initialValue: autoMatic.onFinish || 'restart',
              })(
                <Radio.Group onChange={(e) => this.setState({onFinish: e.target.value})}>
                  <Radio value="restart">重新启动</Radio>
                  <Radio value="over">结束</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          {enable === 'true' && onFinish === 'restart' ? <Col span={12}>
            <Form.Item label="启动间隔(s)">
              {getFieldDecorator('interval', {
                initialValue: autoMatic.interval === 0 ? 0 : (autoMatic.interval || 600),
              })(
                <InputNumber style={{width: '100%'}} min={0} precision={0}/>
              )}
            </Form.Item>
          </Col> : null}
          {enable === 'true' && onFinish === 'restart' ? <Col span={12}>
            <Form.Item label="重启时">
              {getFieldDecorator('restart', {
                initialValue: autoMatic.restart || 'first',
              })(
                <Radio.Group>
                  <Radio value="first">第一行</Radio>
                  <Radio value="next">下一行</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
        </Row>
      </Form>
    )
  }
}

export default Form.create()(SettingForm)
export default Form.create()(UnattenSettingForm)