2019-11-19

king

2019-11-19 233709a44a2f5cfff9b8fb955ebcdc6889c0d40b

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import React, {Component} from 'react'
import { Row, Col, Icon, Radio } from 'antd'
import './index.scss'
 
class EditCardCell extends Component {
  constructor(props) {
    super(props)
 
    this.state = {
      selected: false,
      card: props.card
    }
  }
 
  changeSelect = () => {
    this.setState({
      selected: !this.state.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
    return (
      <div className={'ant-card ant-card-bordered ' + (this.state.selected ? 'selected' : '')} >
        <div className="base" onClick={this.changeSelect}>
          <Icon type="check" />
          <p>字段名: {card.label}</p>
          <p>提示文字: {card.field}</p>
        </div>
        <label>类型:</label>
        <Radio.Group onChange={this.changeType} value={this.state.card.type} disabled={!this.state.selected}>
          <Radio value="text">text</Radio>
          <Radio value="select">select</Radio>
          <Radio value="date">date</Radio>
        </Radio.Group>
      </div>
    )
  }
}
 
class EditCard extends Component {
  constructor(props) {
    super(props)
 
    this.state = {
      dataSource: props.data,
      title: props.title
    }
  }
 
  getSelectedCard = () => {
    let box = []
    this.state.dataSource.forEach((item, index) => {
      if (this.refs['cellCard' + index].state.selected) {
        box.push(this.refs['cellCard' + index].state.card)
      }
    })
    return box
  }
 
  render() {
    const { dataSource, title } = 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} />
            </Col>
          ))}
        </Row>
      </div>
    )
  }
}
 
export default EditCard