| | |
| | | super(props) |
| | | |
| | | this.state = { |
| | | selected: false, |
| | | card: props.card |
| | | card: props.card, |
| | | type: props.type |
| | | } |
| | | } |
| | | |
| | | changeSelect = () => { |
| | | const { card } = this.state |
| | | this.setState({ |
| | | selected: !this.state.selected |
| | | card: {...card, selected: !card.selected} |
| | | }) |
| | | } |
| | | |
| | | changeType = (e) => { |
| | | console.log(e.target.value) |
| | | const { card } = this.state |
| | | this.setState({ |
| | | card: {...card, type: e.target.value} |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { card } = this.state |
| | | const { card, type } = this.state |
| | | return ( |
| | | <div className={'ant-card ant-card-bordered ' + (this.state.selected ? 'selected' : '')} > |
| | | <div className={'ant-card ant-card-bordered ' + (card.selected ? 'selected' : '')} > |
| | | <div className="base" onClick={this.changeSelect}> |
| | | <Icon type="check" /> |
| | | <p>字段名: {card.label}</p> |
| | | <p>提示文字: {card.field}</p> |
| | | <p title={card.field}>字段名: {card.field}</p> |
| | | <p title={card.label}>提示文字: {card.label}</p> |
| | | </div> |
| | | <label>类型:</label> |
| | | <Radio.Group onChange={this.changeType} value={this.state.card.type} disabled={!this.state.selected}> |
| | | {type === 'search' && <Radio.Group onChange={this.changeType} value={card.type} disabled={!card.selected}> |
| | | <Radio value="text">text</Radio> |
| | | <Radio value="select">select</Radio> |
| | | <Radio value="date">date</Radio> |
| | | </Radio.Group> |
| | | <Radio value="datetime">datetime</Radio> |
| | | </Radio.Group>} |
| | | {type === 'columns' && <Radio.Group onChange={this.changeType} value={card.type} disabled={!card.selected}> |
| | | <Radio value="text">text</Radio> |
| | | <Radio value="picture">picture</Radio> |
| | | </Radio.Group>} |
| | | </div> |
| | | ) |
| | | } |
| | |
| | | |
| | | this.state = { |
| | | dataSource: props.data, |
| | | title: props.title |
| | | type: props.type |
| | | } |
| | | } |
| | | |
| | | getSelectedCard = () => { |
| | | let box = [] |
| | | this.state.dataSource.forEach((item, index) => { |
| | | if (this.refs['cellCard' + index].state.selected) { |
| | | box.push(this.refs['cellCard' + index].state.card) |
| | | } |
| | | box.push(this.refs['cellCard' + index].state.card) |
| | | }) |
| | | return box |
| | | } |
| | | |
| | | render() { |
| | | const { dataSource, title } = this.state |
| | | const { dataSource, type } = this.state |
| | | |
| | | return ( |
| | | <div className="common-modal-edit-card"> |
| | | {title && <h4>{title}</h4>} |
| | | <Row> |
| | | {dataSource.map((item, index) => ( |
| | | <Col key={index} span={8}> |
| | | <EditCardCell ref={'cellCard' + index} card={item} /> |
| | | <EditCardCell ref={'cellCard' + index} type={type} card={item} /> |
| | | </Col> |
| | | ))} |
| | | </Row> |