70 lines
2.7 KiB
JavaScript
70 lines
2.7 KiB
JavaScript
import React from 'react'
|
|
import { WeaCheckbox } from 'ecCom';
|
|
import { Row, Col, Icon } from 'antd';
|
|
|
|
export default class SelectItemsWrapper extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
showContent: true,
|
|
checkStatus: false
|
|
}
|
|
}
|
|
|
|
handleAllChecked(value) {
|
|
value = value == 1 ? true : false
|
|
let items = [...this.props.items]
|
|
items.map(item => { item.checked = value })
|
|
this.setState({
|
|
checkStatus: value
|
|
})
|
|
this.props.onChange(items)
|
|
}
|
|
|
|
handleItemChange(value, record) {
|
|
value = value == 1 ? true : false
|
|
let items = [...this.props.items]
|
|
items.map(item => {
|
|
if(item.id == record.id) {
|
|
item.checked = value
|
|
}
|
|
})
|
|
this.props.onChange(items)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div style={{ margin: "10px 20px" }}>
|
|
<div style={{marginBottom: "10px", cursor: "pointer"}} >
|
|
<div style={{display: "inline-block"}}><WeaCheckbox content={<span style={{fontWeight: "600"}}>{this.props.title}</span>} onChange={(value) => {this.handleAllChecked(value)}} value={this.state.checkStatus}/></div>
|
|
<div style={{float: 'right', fontWeight: "600"}} onClick={() => this.setState({
|
|
showContent: !this.state.showContent
|
|
})}>已选中{this.props.items ? this.props.items.filter(item => item.checked).length : 0}个字段
|
|
<span style={{marginLeft: "10px", fontWeight: "400"}}>
|
|
{
|
|
this.state.showContent ? <Icon type="down" /> : <Icon type="left" />
|
|
}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{
|
|
this.state.showContent && <div style={{height: "160px",
|
|
border: "1px solid #eee",
|
|
padding: "10px",
|
|
overflowY: "scroll",
|
|
borderRadius: "5px"
|
|
}}>
|
|
<Row>
|
|
{
|
|
this.props.items && this.props.items.map(item => (
|
|
<Col span={6}><WeaCheckbox content={item.name} value={item.checked} onChange={(value) => {this.handleItemChange(value, item)}}/></Col>
|
|
))
|
|
}
|
|
</Row>
|
|
</div>
|
|
}
|
|
|
|
</div>
|
|
)
|
|
}
|
|
} |