kede-client/js/component/manageCenter/order/orderNew/chooseList.jsx

import React, { Component } from "react";
import { Form, Upload, Modal, Button, message, Table, Input, Checkbox } from "antd";
import "../../../../../css/base.less"

class ChooseList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      confirmLoading: false,
      columns: [],
      // 复选框数组
      options: [],
      defaultValue: [],
      // 被选中的数组
      checkedValues: [],
      flag: false
    };
    this.showModal = this.showModal.bind(this);
    this.handleOk = this.handleOk.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
    this.onChange = this.onChange.bind(this);
    this.allChange = this.allChange.bind(this);
    this.load = this.load.bind(this);
  }
  // componentWillReceiveProps(nextProp) {
  //   this.setState({

  //   })
  // }
  componentDidMount() {
    this.load()
  }

  load() {
    const options = [];
    const defaultValue = [];
    this.props.columns.forEach(item => {
      let obj = {
        label: item.title,
        value: item.title
      };
      options.push(obj);
      defaultValue.push(item.title);
    });
    this.setState({
      columns: this.props.columns,
      options: options,
      defaultValue,
      checkedValues: defaultValue,
      flag: true
    });
  }

  onChange(checkedValues) {
    this.setState({
      checkedValues
    });
    let flag = false
    // checkedValues.forEach((v) => {
    //   this.props.columns.forEach((i) => {
    //     if( v != i.title ) {
    //       flag = false
    //       return
    //     }
    //     flag = true;
    //   })
    // })
    if (checkedValues.length == this.props.columns.length) {
      flag = true
    }
    this.setState({
      flag
    })
  }

  showModal() {
    this.load()
    this.setState({
      visible: true
    });
    if (this.props.changeList != undefined) {
      const arr = []
      this.props.changeList.forEach((i) => {
        arr.push(i.title)
      })
      let flag = false
      if (arr.length == this.state.columns.length) {
        flag = true
      }
      this.setState({
        checkedValues: arr,
        flag
      })
    } else {
      const arr = [];
      this.props.columns.forEach(i => {
        arr.push(i.title);
      });
      let flag = false;
      if (arr.length == this.state.columns.length) {
        flag = true;
      }
      this.setState({
        checkedValues: arr,
        flag
      });
    }
  }

  handleOk() {
    this.setState({
      confirmLoading: true
    });
    setTimeout(() => {
      this.setState({
        visible: false,
        confirmLoading: false
      });
      this.props.changeFn(this.state.checkedValues);
    }, 0);
  }

  handleCancel() {
    // this.load()
    this.setState({
      visible: false
    });
  }

  allChange() {
    if (this.state.flag) {
      this.setState({
        checkedValues: []
      });
    } else {
      this.setState({
        checkedValues: this.state.defaultValue
      });
    }
    this.setState({
      flag: !this.state.flag
    })

  }

  render() {
    const { visible, confirmLoading, columns } = this.state;
    return (
      // style={{ position: "absolute", right: "187px", top: this.props.top }}
      <div style={{ display: this.props.display }}>
        <Button type="primary" onClick={this.showModal} style={{ marginBottom: 10, marginTop: this.props.margin }}>
          更改表格显示数据
        </Button>
        <Modal
          maskClosable={false}
          title="更改表格显示数据"
          visible={visible}
          onOk={this.handleOk}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}
        >
          <div>
            <Checkbox onChange={this.allChange} checked={this.state.flag}>
              全选
            </Checkbox>
            <Checkbox.Group
              options={this.state.options}
              defaultValue={this.state.defaultValue}
              onChange={this.onChange}
              className={"chooseList"}
              value={this.state.checkedValues}
            />
          </div>
        </Modal>
      </div>
    );
  }
}
export { ChooseList };