2021-11-12

king

2021-11-12 0c84df247914f893ef5e41d57a422e10a2dc814c

 src/menu/components/share/clockcomponent/settingform/index.jsx

@@ -1,16 +1,20 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Select } from 'antd'
import { Form, Row, Col, Select, Tooltip, Input } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

import './index.scss'

class SettingForm extends Component {
  static propTpyes = {
    timer: PropTypes.string,      // 组件名称
    inputSubmit: PropTypes.func   // 回车事件
    config: PropTypes.string,
    inputSubmit: PropTypes.func
  }

  state = {}
  state = {
    clearField: this.props.config.clearField || '',
    timer: this.props.config.timer || ''
  }

  handleConfirm = () => {
    // 表单提交时检查输入值是否正确
@@ -26,6 +30,8 @@
  }

  render() {
    const { config } = this.props
    const { clearField, timer } = this.state
    const { getFieldDecorator } = this.props.form

    const formItemLayout = {
@@ -46,9 +52,9 @@
            <Col span={22}>
              <Form.Item label="定时器">
                {getFieldDecorator('timer', {
                  initialValue: this.props.timer || ''
                  initialValue: config.timer || ''
                })(
                  <Select>
                  <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>
@@ -63,6 +69,34 @@
                )}
              </Form.Item>
            </Col>
            {(config.subtype === 'balcony' || config.subtype === 'propcard') && timer ? <Col span={22}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="可以指定字段用于控制定时器的关闭。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  关闭定时
                </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="当字段值与关闭值相等时，关闭定时器，多个值可用逗号分隔。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  关闭值
                </Tooltip>
              }>
                {getFieldDecorator('clearValue', {
                  initialValue: config.clearValue || ''
                })(<Input placeholder="" autoComplete="off" onPressEnter={this.props.inputSubmit}/>)}
              </Form.Item>
            </Col> : null}
          </Row>
        </Form>
      </div>