salary-management-front/pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrapper.js

47 lines
1.9 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
}
}
render() {
return (
<div style={{ margin: "10px 20px" }}>
<div style={{marginBottom: "10px", cursor: "pointer"}} onClick={() => this.setState({
showContent: !this.state.showContent
})}>
<div style={{display: "inline-block"}}><WeaCheckbox content={<span style={{fontWeight: "600"}}>{this.props.title}</span>} /></div>
<div style={{float: 'right', fontWeight: "600"}}>已选中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.title} value={item.checked}/></Col>
))
}
</Row>
</div>
}
</div>
)
}
}