kede-client/js/component/common/mysuspend/selectList.jsx

import React, { Component } from "react";
import { Button, Modal, Checkbox, } from "antd";
import $ from "jquery/src/ajax";
import "./index.less";
import MySuspend from './index'; // 项目暂停

class SelectList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      plainOptions: [], // 多选渲染数据
      checkedList: [],  // 选中数据的id
      checkedValues: [], // 渲染数据的id 
      selectedRows: [], // 项目暂停用到的选中数据
      indeterminate: false,
      checkAll: false,
      suspendVisible: false,
    };
    this.onCheckAllChange = this.onCheckAllChange.bind(this);
    this.onChange = this.onChange.bind(this);
    this.onOk = this.onOk.bind(this);
    this.subClose = this.subClose.bind(this);
  }

  componentDidMount() {
    const { list = [], type } = this.props;
    let options = [];
    let defaultValue = [];
    let arr = [];
    if (type == "suspend") {
      // 项目暂停
      arr = list.filter(v => {
        return (v.stopType != 0 && v.projectStatus != 29)
      });
    } else if (type == "restart") {
      // 项目重启
      arr = list.filter(v => {
        return (v.stopType == 0 && v.stopStatus == 1)
      });
    }
    arr.forEach(item => {
      let obj = {
        label: item.commodityName + "-" + item.id,
        value: item.id
      };
      options.push(obj)
      defaultValue.push(item.id)
    })
    this.setState({
      plainOptions: options,
      checkedValues: defaultValue,
    })
  }
  // 全选
  onCheckAllChange(e) {
    const { checkedValues } = this.state
    this.setState({
      checkedList: e.target.checked ? checkedValues : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  }
  // 单选操作
  onChange(checkedList) {
    const { checkedValues } = this.state
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && (checkedList.length < checkedValues.length),
      checkAll: checkedList.length === checkedValues.length,
    });
  }
  // 确定
  onOk() {
    const { list } = this.props;
    const { checkedList } = this.state
    let rows = [];
    for (var i = 0; i < list.length; i++) {
      for (var j = 0; j < checkedList.length; j++) {
        if (list[i].id == checkedList[j]) {
          let obj = {
            commodityName: list[i].commodityName,
            id: list[i].id
          }
          rows.push(obj)
        }
      }
    }
    this.setState({
      selectedRows: rows,
      suspendVisible: true
    })
  }
  // 关闭
  subClose() {
    const { subClose } = this.props
    this.setState({
      suspendVisible: false,
    }, () => {
      subClose()
    })
  }


  render() {
    const { plainOptions, checkedValues, indeterminate, checkAll, checkedList } = this.state
    const { visible, subClose, } = this.props
    const CheckboxGroup = Checkbox.Group;
    return (
      <Modal
        maskClosable={false}
        visible={visible}
        width={"520px"}
        title="请勾选"
        footer=""
        onCancel={subClose}
      >
        <div>
          {
            plainOptions.length == 0
              ? <div
                style={{
                  margin: 50,
                  color: "red",
                  fontSize: "24px",
                  textAlign: "center"
                }}
              >暂无可操作的项目</div>
              : <div>
                <Checkbox
                  indeterminate={indeterminate}
                  onChange={this.onCheckAllChange}
                  checked={checkAll}>
                  全选
                </Checkbox>
                <CheckboxGroup
                  className={"selectlist"}
                  options={plainOptions}
                  value={checkedList}
                  onChange={this.onChange}
                />
              </div>
          }
          <div style={{ height: 30 }}>
            <Button
              disabled={checkedList.length == 0}
              type="primary"
              style={{
                float: "right",
              }}
              onClick={this.onOk}
            >
              确定
            </Button>
          </div>
        </div>
        {
          this.state.suspendVisible &&
          <MySuspend
            type={this.props.type}
            title={this.props.type == "suspend" ? "项目暂停" : "项目重启"}
            contractNo={this.props.contractNo}
            orderNo={this.props.orderNo}
            userName={this.props.userName}
            selectedRowKeys={this.state.checkedList}
            selectedRows={this.state.selectedRows}
            visible={this.state.suspendVisible}
            subClose={this.subClose}
          />
        }
      </Modal>
    );
  }
}

export default SelectList;