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;