React ant design Checkbox多选框 (代码区域主要方法: onCheckAllChange() onChange() )

 

import React, { Component } from 'react'
import { Input, Divider, Checkbox,Form,Button,message,Modal} from 'antd';
import Mobx from './../mobx/index';
import { observer } from 'mobx-react';
import { Netx } from '../../MyApi'
const CheckboxGroup = Checkbox.Group;
const FormItem = Form.Item;
@observer
class NewSalesman extends Component {
  constructor(props) {
    super(props);
    this.Mobx= Mobx.testStore;
    this.state={
      checkList:[]
    }
  }
  //新增业务员
  handleSubmit=(e)=>{
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if(values.status===true){
          values.status=1
        }else{
          values.status=0;
        }
        values.id=this.Mobx.operator.id;
        values.access_id=Array.from(new Set(this.Mobx.operator.access_id));
        this.qr_add_staff(values)
      }
  })
}
     //保存___发送给服务器
     async qr_add_staff(obj){
       let  qr_add_staff =await Netx.qr_add_staff(obj);
         if(qr_add_staff.status===1){//成功的标记
          message.success(qr_add_staff.info.tips);
          this.props.form.resetFields();
          this.Mobx.ResetOperator();
          let  shuju=this.Mobx.jurisdiction
          for(var i=0;i<shuju.length;i++){
              shuju[i].indeterminate=false
          }
          this.props.camel();
        }else{//失败的标记
          message.error(qr_add_staff.info.tips);  
      }
       this.props.refresh(); 
     }
     onChange(index,checkedList) {
      let dataList = this.Mobx.jurisdiction;
      let arr=[];
        for(var j=0;j<dataList[index].child.length;j++){
          arr.push(dataList[index].child[j].value)
        }
        let  flag= this.containAnotherArr(checkedList,arr)
        if(flag){
          dataList[index].indeterminate=true
        }else{
          dataList[index].indeterminate=false
        }
        this.Mobx.AlterJurisdiction(dataList);
        this.Mobx.AlterOperator('access_id', Array.from(new Set(checkedList)));
        this.Mobx.AlterOperator('checkedAll', Array.from(new Set(checkedList)));
    }
    //检测数组是否包含另一个数组
    containAnotherArr(aa,bb){
      if(!(aa instanceof Array)||!(bb instanceof Array)||((aa.length < bb.length))){
        return false;
      }
      var aaStr = aa.toString();
      for (var i = 0 ;i < bb.length;i++) {
        if(aaStr.indexOf(bb[i]) < 0) return false;
      }
      return true;
    }
  onCheckAllChange (index,e){
    let flag=e.target.checked;
    let data=this.Mobx.jurisdiction;
    data[index]['indeterminate']=flag;
    let arr=[];
    if(flag){
      let list =this.Mobx.jurisdiction[index].child
      for(var i=0;i<list.length;i++){
        let value= list[i].value
        arr.push(value);//放到新数组里
      }
      for(var n=0;n<this.Mobx.operator.checkedAll.length;n++){
        arr.push(this.Mobx.operator.checkedAll[n])
      }
      this.Mobx.AlterOperator('checkedAll',Array.from(new Set(arr)));
      this.Mobx.AlterOperator('access_id',Array.from(new Set(arr)));
    }else{
      let list =this.Mobx.jurisdiction[index].child;
      let arr2=[];
      arr2=this.Mobx.operator.checkedAll
      for(var s=0;s<list.length;s++){
        var index1 = arr2.indexOf(list[s].value);
        arr2.splice(index1, 1);
      }
        this.Mobx.AlterOperator('checkedAll',Array.from(new Set(arr2)));
        this.Mobx.AlterOperator('access_id',Array.from(new Set(arr2)));
    }
  }
  //点击取消
  cancel(){
    this.props.camel();
  }
  //权限列表
  render_jurisdiction1(){
    return this.Mobx.jurisdiction.map((info,index)=>{
        return <div key={index}>
          <Checkbox 
        onChange={this.onCheckAllChange.bind(this,index)} 
        checked={info.indeterminate}
        >
        {info.desc}
        </Checkbox>
        <CheckboxGroup style={{marginLeft:'20px',marginTop:'20px'}}  options={info.child} value={this.Mobx.operator.access_id} onChange={this.onChange.bind(this,index)} />
        <Divider></Divider>
     </div>
      }
 )
    }
  render_jurisdiction2(){
    return( <p style={{width: '310px',textAlign: 'center',margin:'12px auto'}}>该账号是系统的管理员，默认拥有所有权限，且处于启用状态，不可停用。</p> )
}
  render() {
    const { getFieldDecorator } = this.props.form;
    let Enable=null;
    if(this.props.default==="非默认"){
      Enable=(
          <FormItem 
            style={{textAlign:'right',marginBottom:'0px'}}
            wrapperCol={{ span: 12 }}
          >
          {getFieldDecorator('status',{ valuePropName: 'checked',initialValue:this.Mobx.operator.status || false, })(
              <Checkbox >
            启用
            </Checkbox>
            )}
          </FormItem>
        ) 
    }
    return (
      <div>
      <Modal
          title={this.props.title}
          visible={this.props.visible}
          onCancel={this.props.camel}
          maskClosable={false}
          width={561}
          style={{ minWidth: '561px' }}
          bodyStyle={{ padding: '0px' }}
          centered={false}
          footer={[
            <Button key="1" type="primary" onClick={this.handleSubmit.bind(this)}>
              确定
            </Button>,
            <Button key="2" type="primary"  style={{marginLeft:'8px'}} onClick={this.cancel.bind(this)}>
                取消
            </Button> 
          ]}
        >
        {/* border:'1px solid red' */}
      <div style={{padding: '20px 20px 0px 20px',}}>
          <Form onSubmit={this.handleSubmit}>
            <FormItem
              label="登录名"
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 12 }}
            >
              {getFieldDecorator('name', {
                rules: [{ required: true, message: '请输入登录员名!' }],
                initialValue:this.Mobx.operator.name
              })(
                <Input placeholder="请输入登录员名"/>
              )}
            </FormItem>
            <FormItem
              label="操作员:"
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 12 }}
            >
              {getFieldDecorator('nickname', {
                rules: [{ required: true, message: '请输入操作员姓名' }],
                initialValue:this.Mobx.operator.nickname
              })(
                <Input placeholder="请输入操作员姓名"/>
              )}
            </FormItem>
            <FormItem
              label="密码:"
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 12 }}
            >
              {getFieldDecorator('pwd', {
                rules: [{ required: true, message: '请输入密码!' }],
                initialValue:this.Mobx.operator.pwd
              })(
                <Input placeholder="请输入密码"/>
              )}
            </FormItem>
            <Divider dashed={true} orientation="left" style={{ width: '100%' }}>权限分配</Divider>
            {this.props.default==="非默认"? this.render_jurisdiction1():this.render_jurisdiction2()} 
            {Enable}
          </Form>
          </div>
          </Modal>
     </div>
    )
  }
}
export default NewSalesman = Form.create()(NewSalesman);