79 lines
2.3 KiB
JavaScript
79 lines
2.3 KiB
JavaScript
import React from "react";
|
|
import { WeaCheckbox } from "ecCom";
|
|
import { Col, Icon, Row } 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>
|
|
<div style={{ margin: "10px 0", 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>
|
|
);
|
|
}
|
|
}
|