antd form 复选框全选/单选

 

import React, {Component} from 'react';
import {Form, Button, Modal, Checkbox} from 'antd';

// 表单Layout布局
const formLayout = {
  labelCol: {span: 7, offset: 1},
  wrapperCol: {span: 21 - 6},
};
class Class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      serviceData: {
        serviceList: [ // 复选框数据
          {id: '1', serviceProviderName: '嘻嘻嘻'},
          {id: '2', serviceProviderName: '出场费'},
          {id: '3', serviceProviderName: '嘻嘻嘻'},
          {id: '4', serviceProviderName: '顶顶顶'},
          {id: '5', serviceProviderName: '大大大'},
          {id: '6', serviceProviderName: '啊啊啊'},
          {id: '7', serviceProviderName: '急急急'},
          {id: '8', serviceProviderName: '也一样'},
          {id: '9', serviceProviderName: '的关系'},
          {id: '10', serviceProviderName: '而法国'},
        ],
        serviceProviders: [ // 复选框数据回显
          {id: '10', serviceProviderName: '而法国'},
        ],
      },
    };
  }

  // 打开开票弹窗
  kpModal = (state) => {
    this.setState({modalShow: state});
  }

  render() {
    return (
      <div>
        <Button onClick={() => this.kpModal(true)}>开启弹窗</Button>
        {/* 开票弹窗 */}
        <KpModalForm
          modalShow={this.state.modalShow} // 控制弹窗打开/关闭
          serviceData={this.state.serviceData} // 子组件需要的数据
          closeModal={() => this.kpModal(false)} // 关闭弹窗
        />
      </div>
    );
  }
}


const KpModalForm = Form.create()(
  // eslint-disable-next-line
  class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      };
    }

    // 单选
    isCheckStatus() {
      const {form, serviceData} = this.props;
      const serviceProviderIds = form.getFieldValue('serviceProviderIds') || [];
      let indeterminate = false;
      let active = false;
      const arr1 = [];
      const arr2 = [];
      serviceData.serviceList.forEach((o) => {
        if (serviceProviderIds.indexOf(o.id) !== -1) {
          arr1.push(o);
        } else {
          arr2.push(o);
        }
      });

      if (arr1.length) indeterminate = true;
      if (arr2.length === 0) {
        active = true;
        indeterminate = false;
      }

      return {indeterminate, active};
    }

    // 全选
    checkAll(all) {
      const {form, serviceData} = this.props; // 这里能拿到 form 是因为上面 Form.create() 初始化了表单。
      if (all) { // 如果不是全选
        form.setFieldsValue({serviceProviderIds: []}); // 取消全选，把值设为空。
      } else {
        form.setFieldsValue({serviceProviderIds: serviceData.serviceList.map(item => item.id)}); // 全选，全部赋值。
      }
    }

    // 提交
    onSubmit(e, form) {
      e.preventDefault();
      form.validateFields({force: true}, (err, values) => {
        if (err) return false;
        console.log(values, 'values'); // 获取选择的值，获取到的值是根据 getFieldDecorator('serviceProviderIds', {}) 属性来的。
      });
    }

    render() {
      const {modalShow, form, serviceData} = this.props;
      const {getFieldDecorator} = this.props.form; // 表单验证需要用的

      const status = this.isCheckStatus(); // 页面变化就执行，作用是控制复选框全选按钮状态。

      return (
        <Modal
          title="新增开票类目"
          visible={modalShow}
          onOk={e => this.onSubmit(e, form)} // 把表单绑定到弹窗的确认按钮
          onCancel={() => this.props.closeModal()}
          width={600}
          afterClose={() => { // 弹窗关闭后，清空表单值。
            form.resetFields();
          }}
        >
          <Form {...formLayout} className="form">
            <Form.Item label="应用服务商">
              <Checkbox
                key={-1}
                value={'all'}
                style={{marginLeft: 8}}
                checked={status.active}
                indeterminate={status.indeterminate}
                onChange={() => this.checkAll(status.active)}
              >全选</Checkbox>
              {getFieldDecorator('serviceProviderIds', {
                // 数据回显，复选框的默认值
                initialValue: serviceData.serviceProviders ? serviceData.serviceProviders.map(e => e.id) : [],
                rules: [
                  {required: true, message: '请选择应用服务商'},
                ],
              })(
                <Checkbox.Group>{
                  serviceData.serviceList.map((o, index) => (
                    <Checkbox key={index} value={o.id}>{o.serviceProviderName}</Checkbox>))
                }
                </Checkbox.Group>
              )}
            </Form.Item>
          </Form>
        </Modal>
      );
    }
  }
);


export default Class;