mh_jy_safe_web/src/components/CustomPages/KR/EnergySystemSettingModal.js

import React from 'react'
import { connect } from 'dva'
import { Modal, Form, Checkbox, Row, Col, Input, message } from 'antd'

class EnergySystemSettingModal extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      loading: false,
      boxData: [],
      showBoxData: [],
      boxDefaultValue: [],
    }
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this)
    }
  }

  showModal = () => {
    this.getCheckboxData()
    this.setState({
      visible: true
    })
  }
  getCheckboxData = () => {
    const json = {
      OrgId: this.props.login.OrgId
    };
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'KR/Statistics/GetMeterNodeCheckbox',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re.IsSuccessful && re.Data) {
          const { boxData,boxDefaultValue } = re.Data
          this.setState({
            boxData,
            boxDefaultValue,
            showBoxData: boxData
          })
        }
      }
    })
  };

  handleCancel = e => {
    this.setState({
      visible: false,
    })
  }

  onCheck = (checkedValues) => {
    this.setState({
      boxDefaultValue: checkedValues
    });
  }

  handleOk = () => {
    if (this.state.boxDefaultValue.length == 0) {
      message.error("至少选中1个节点！");
      return
    }
    if (this.state.boxDefaultValue.length > 20) {
      message.error("最多选中20个变量！");
      return
    }
    const json = {
      OrgId: this.props.login.OrgId,
      Keyword: this.state.boxDefaultValue.join(','),
    };
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'KR/Statistics/EnergySystemSave',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re.IsSuccessful && re.Data) {
          if (re.Data.IsSucceed) {
            message.success(re.Data.Msg);
            this.setState({
              visible: false,
            }, () => { this.props.onLoadData()});
          }
          else
            message.error(re.Data.Msg);
        }
      }
    })
  }

  InputOnChange = (e) => {
    const { boxData, boxDefaultValue } = this.state
    if (e.target.value) {
      let tmp = []
      boxData.forEach(item => {
        if (item.NAME.indexOf(e.target.value) != -1 || boxDefaultValue.indexOf(item.ID) != -1) {
          tmp.push(item);
        }
      });
      this.setState({ showBoxData: tmp })
    }
    else {
      this.setState({ showBoxData: boxData })
    }
  }


  render() {
    const { visible, boxDefaultValue, showBoxData } = this.state
    return (
      <Modal
        title='节点配置'
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
      >
        <Form.Item
          label='节点名称'
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          style={{ marginBottom: 0 }}
        >
          <Input onChange={this.InputOnChange} />
        </Form.Item>

        <Checkbox.Group style={{ width: '100%', fontSize: "24px" }} value={boxDefaultValue} onChange={this.onCheck}>
          <Row>
            {
              showBoxData.map(item => {
                return (
                  <Col span={24} key={item.ID}>
                    <Checkbox value={item.ID}>{item.NAME}</Checkbox>
                  </Col>
                );
              })
            }
          </Row>
        </Checkbox.Group>
      </Modal>
    )
  }
}
export default connect(({ app, editPage, loading, login }) => ({ app, editPage, loading, login }))(Form.create()(EnergySystemSettingModal))