2021-10-17

king

2021-10-17 35450c747d7497642119afb5db3bbbeec63c9214

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Select, Tooltip, Icon, Input } from 'antd'
 
import './index.scss'
 
class SettingForm extends Component {
  static propTpyes = {
    config: PropTypes.string,
    inputSubmit: PropTypes.func
  }
 
  state = {
    clearField: this.props.config.clearField || '',
    timer: this.props.config.timer || ''
  }
 
  handleConfirm = () => {
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          resolve(values)
        } else {
          reject(err)
        }
      })
    })
  }
 
  render() {
    const { config } = this.props
    const { clearField, timer } = this.state
    const { getFieldDecorator } = this.props.form
 
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    }
 
    return (
      <div>
        <Form {...formItemLayout}>
          <Row gutter={24}>
            <Col span={22}>
              <Form.Item label="定时器">
                {getFieldDecorator('timer', {
                  initialValue: config.timer || ''
                })(
                  <Select onChange={(val) => this.setState({timer: val})}>
                    <Select.Option value=""> 无 </Select.Option>
                    <Select.Option value="5s"> 5秒 </Select.Option>
                    <Select.Option value="15s"> 15秒 </Select.Option>
                    <Select.Option value="30s"> 30秒 </Select.Option>
                    <Select.Option value="1min"> 1分钟 </Select.Option>
                    <Select.Option value="5min"> 5分钟 </Select.Option>
                    <Select.Option value="10min"> 10分钟 </Select.Option>
                    <Select.Option value="15min"> 15分钟 </Select.Option>
                    <Select.Option value="30min"> 30分钟 </Select.Option>
                    <Select.Option value="1hour"> 1小时 </Select.Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
            {(config.subtype === 'balcony' || config.subtype === 'propcard') && timer ? <Col span={22}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="可以指定字段用于控制定时器的关闭。">
                  <Icon type="question-circle" style={{marginRight: '3px', color: '#c49f47'}} />
                  关闭定时
                </Tooltip>
              }>
                {getFieldDecorator('clearField', {
                  initialValue: clearField || ''
                })(
                  <Select allowClear onChange={(val) => this.setState({clearField: val})}>
                    {config.columns.map(col => (<Select.Option key={col.uuid} value={col.field}>{col.label}</Select.Option>))}
                  </Select>
                )}
              </Form.Item>
            </Col> : null}
            {(config.subtype === 'balcony' || config.subtype === 'propcard') && clearField && timer ? <Col span={22}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="当字段值与关闭值相等时，关闭定时器，多个值可用逗号分隔。">
                  <Icon type="question-circle" style={{marginRight: '3px', color: '#c49f47'}} />
                  关闭值
                </Tooltip>
              }>
                {getFieldDecorator('clearValue', {
                  initialValue: config.clearValue || ''
                })(<Input placeholder="" autoComplete="off" onPressEnter={this.props.inputSubmit}/>)}
              </Form.Item>
            </Col> : null}
          </Row>
        </Form>
      </div>
    )
  }
}
 
export default Form.create()(SettingForm)