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

import React from 'react';
import { Modal,Cascader,Checkbox, Row, Col,message,Select } from 'antd';

class EDUnitUseSettingModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          visible: false,
          pOptions :[],
          pDefaultValue:[],
          tOptions :[],
          tDefaultValue:"",
          boxData:[],
          boxDefaultValue:[],
        };
      };

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

    showModal = () => {
        this.getUnitNameCheckboxData();
        this.getProNameCheckboxData();
        this.getClassNameCheckboxData();
        this.setState({
          visible: true,
        });
      }
    
      handleOk = e => {
        this.ProNameSettingSave(this.state.boxDefaultValue,"ProNameSelect_" + this.props.login.userId + "_Select",true);
        this.ProNameSettingSave(this.state.boxDefaultValue,"ProNameSelect_" + this.props.login.userId,true);
        message.success("配置成功");
        var t = this.props.searchRules;
        this.setState({
          visible: false,
        },()=>{this.props.getUnitUseChartData(this.props.searchRules,false)});
      };
    
      handleCancel = e => {
        this.setState({
          visible: false,
        });
      };

      //获取生产单元数据（选择数据项）
      getUnitNameCheckboxData = () => {
        const json = {
          OrgId: this.props.login.OrgId,
          ParentIds: this.state.pDefaultValue,
          Code: "ProNameSelect_" + this.props.login.userId + "_Pro",
          IsFirst: false
        }
        this.props.dispatch({
          type: 'app/getDataByPost',
          url: 'BD/BDMeterNode/GetUnitSelectTreeData',
          payload: json,
          onlyData: false,
          onComplete: (re) => {
            if (re && re.IsSuccessful && re.Data) {
              this.setState({
                pOptions: re.Data.Options,
                pDefaultValue: re.Data.DefaultValue
              })
            }
          }
        })
      };
      
      //班组信息（选择数据项）
      getClassNameCheckboxData = () => {
        const json = {
          OrgId: this.props.login.OrgId,
        }
        this.props.dispatch({
          type: 'app/getDataByPost',
          url: 'BD/BDMeterNode/GetTeamSelectData',
          payload: json,
          onlyData: false,
          onComplete: (re) => {
            if (re && re.IsSuccessful && re.Data) {
              this.setState({
                tOptions: re.Data.Options,
                tDefaultValue: re.Data.DefaultValue
              })
            }
          }
        })
      };
      
      //产品名称（数据项）
      getProNameCheckboxData = () => {
        var pId = "";
        if(this.state.pDefaultValue && this.state.pDefaultValue.length > 0){
          pId = this.state.pDefaultValue[this.state.pDefaultValue.length-1]
        }

        const json = {
          OrgId: this.props.login.OrgId,
          ParentIds: this.state.boxDefaultValue,
          Code: "ProNameSelect_" + this.props.login.userId,
          IsFirst: false,
          UnitId: pId,
          TeamId: this.state.tDefaultValue
        }
        this.props.dispatch({
          type: 'app/getDataByPost',
          url: 'FM/Product/GetProNameList',
          payload: json,
          onlyData: false,
          onComplete: (re) => {
            if (re && re.IsSuccessful && re.Data) {
              this.setState({
                boxData: re.Data.Options,
                boxDefaultValue: re.Data.DefaultValue
              })
            }
          }
        })
      };

      onChange = (value) =>{
        this.setState({
            pDefaultValue: value
          },()=>{
            this.getProNameCheckboxData(false);
        }); 
      }

      onClassChange = (value) =>{
        this.setState({
            tDefaultValue: value
          },()=>{
            this.getProNameCheckboxData(false);
        }); 
      }

      onCheck = (checkedValues)=>
      {
        if(checkedValues && checkedValues.length > 8)
        {
          message.error("最多选择8个产品！");
          return;
        }
        this.setState({
            boxDefaultValue: checkedValues
          },()=>{
          });
      }

      //保存选中项
      ProNameSettingSave = (select,code,isReData = true) => {
        const json = {
          OrgId: this.props.login.OrgId,
          UserId: this.props.login.userId,
          ChildIds: select,
          Code: code
        }
        this.props.dispatch({
          type: 'app/getDataByPost',
          url: 'FM/Product/ProNameSelectSave',
          payload: json,
          onlyData: false,
          onComplete: (re) => {
            if (re && re.IsSuccessful && re.Data) {
            }
          }
        })
      }

    render(){
      
        const { pDefaultValue,pOptions,tDefaultValue,tOptions,boxData,boxDefaultValue } = this.state

        return(
            <Modal title="选择对比计量点"visible={this.state.visible}onOk={this.handleOk}onCancel={this.handleCancel}>
              <Cascader style={{ width: '50%' }} fieldNames={{ label: 'Label', value: 'Value', children: 'Children' }} value={this.state.pDefaultValue} options={this.state.pOptions} 
              onChange={this.onChange} changeOnSelect placeholder="生产单元" />
              
              <Select defaultValue={tDefaultValue} style={{ width: 150,marginLeft:10 }} onChange={this.onClassChange} placeholder="班组">
                    <Option value="">---班组---</Option>
                  {
                    tOptions.map(item => {
                      return (
                        <Option value={item.Value}>{item.Label}</Option>
                      )
                    })
                  }
              </Select>
              <Checkbox.Group style={{ width: '100%',fontSize:"24px" }} value={this.state.boxDefaultValue} onChange={this.onCheck}>
                  <Row>
                      {
                          boxData.map(item=>{
                              return (
                                  <Col span={24} key={item.Value}>
                                      <Checkbox value={item.Value}>{item.Label}</Checkbox>
                                  </Col>
                              );
                          })
                      }
                  </Row>
              </Checkbox.Group>
            </Modal>
        )
    }
}
export default EDUnitUseSettingModal