mh_jy_safe_web/src/components/CustomPages/ED/EDBenchMarkingModel.js

import React from 'react'
import {  Modal, Checkbox, Row, message } from 'antd'

class EDBenchMarkingModel extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      visible: false,
      options: [],
      defaultValue: [],
      boxData: [],
      boxDefaultValue: [],   
      indeterminate: false,
      // 全反选
      checkAll: true
    }
  };

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

  showModal = () => {
    this.getCheckboxData(true)
    this.setState({
      visible: true,
    })
  }

  handleOk = e => {
    this.SettingSave()
  };

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

  getCheckboxData = (isFirst) => {
    const json = {
      OrgId: this.props.login.OrgId,
      ParentIds: this.state.defaultValue,
      IsFirst: isFirst
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'ED/EDProdRecord/GetEnergyMeasuringData',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data) {
          let tmp = []
          re.Data.DefaultValue.forEach(element => {
            tmp.push(element)
          })
          this.setState({
            boxData: re.Data.Options
          }, () => {
            const checkedValues = re.Data.DefaultValue
            this.setState({
              boxDefaultValue: checkedValues,
              indeterminate: !!checkedValues.length && checkedValues.length < this.state.boxData.length,
              checkAll: checkedValues.length === this.state.boxData.length
            })
          })
        }
      }
    })
  };

  SettingSave = () => {
    const json = {
      OrgId: this.props.login.OrgId,
      ParentIds: this.state.defaultValue,
      ChildIds: this.state.boxDefaultValue,
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'ED/EDProdRecord/SettingSave',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data) {
          if (re.Data.IsSucceed) {
            message.success(re.Data.Msg)
            this.setState({
              visible: false,
            }, () => { this.props.getTableData() })
          }
          else
            message.error(re.Data.Msg)
        }
      }
    })
  };


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

  onCheckAllChange = (e) => {
    const checkedValues = e.target.checked ? this.state.boxData.map(item => item.Value) : []
    this.setState({
      boxDefaultValue: checkedValues,
      indeterminate: false,
      checkAll: e.target.checked
    })
  }

  render() {
    return (
      <Modal title="选择对标节点" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel}>            
        <div style={{ margin: '4px 0', borderBottom: '1px solid #e9e9e9' }}>
          <Checkbox
            indeterminate={this.state.indeterminate}
            onChange={this.onCheckAllChange}
            checked={this.state.checkAll}
          >
            全/反选
                </Checkbox>
        </div>
        <Checkbox.Group style={{ width: '100%', fontSize: "24px" }} value={this.state.boxDefaultValue} onChange={this.onCheck}>
          <Row>
            {
              this.state.boxData.map(item => {
                return (
                  <div key={item.Value} style={{ marginBottom: 8 }}>
                    <Checkbox
                      value={item.Value}
                    >
                      {item.Label}
                    </Checkbox>
                  </div>
                )
              })
            }
          </Row>
        </Checkbox.Group>
      </Modal>
    )
  }
}
export default EDBenchMarkingModel