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;