2024-04-12

king

2024-04-12 f308a19516f0f15c0aca1af87c1aa722af0fee5c

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

@@ -1,22 +1,35 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Select } from 'antd'
import { Form, Row, Col, Select, Tooltip, Input, InputNumber, notification } 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 = () => {
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          if (values.timer === '2s') {
            if (!values.timerRepeats) {
              notification.warning({ top: 92, message: '请设置2s定时器执行次数。', duration: 3 })
              return
            } else if (values.timerRepeats > 3) {
              notification.warning({ top: 92, message: '2s定时器执行次数不可超过3次。', duration: 3 })
              return
            }
          }
          resolve(values)
        } else {
          reject(err)
@@ -26,6 +39,8 @@
  }

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

    const formItemLayout = {
@@ -44,12 +59,22 @@
        <Form {...formItemLayout}>
          <Row gutter={24}>
            <Col span={22}>
              <Form.Item label="定时器">
              <Form.Item label={
                <Tooltip placement="topLeft" title="2s定时器最多只能执行三次，定时器执行3次以上需要在单点系统设置权限。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  定时器
                </Tooltip>
              }>
                {getFieldDecorator('timer', {
                  initialValue: this.props.timer || ''
                  initialValue: config.timer || ''
                })(
                  <Select>
                  <Select onChange={(val) => this.setState({timer: val}, () => {
                    if (val === '2s') {
                      this.props.form.setFieldsValue({timerRepeats: 1})
                    }
                  })}>
                    <Select.Option value=""> 无 </Select.Option>
                    <Select.Option value="2s"> 2秒 </Select.Option>
                    <Select.Option value="5s"> 5秒 </Select.Option>
                    <Select.Option value="15s"> 15秒 </Select.Option>
                    <Select.Option value="30s"> 30秒 </Select.Option>
@@ -63,6 +88,46 @@
                )}
              </Form.Item>
            </Col>
            {timer ? <Col span={22}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="定时器执行次数。注：0表示没有限制。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  执行次数
                </Tooltip>
              }>
                {getFieldDecorator('timerRepeats', {
                  initialValue: config.timerRepeats || 0,
                })(<InputNumber min={0} max={500} precision={0} />)}
              </Form.Item>
            </Col> : null}
            {timer && timer !== '2s' ? <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}
            {clearField && timer && timer !== '2s' ? <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>