2019-11-21-01

king

2019-11-21 f0734d1c09b377d91953491f29c7af7e631fe729

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
88
89
90
91
92
93
94
95
96
97
98
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 = {
      card: props.card,
      type: props.type
    }
  }
 
  changeSelect = () => {
    const { card } = this.state
    this.setState({
      card: {...card, selected: !card.selected}
    })
  }
 
  changeType = (e) => {
    const { card } = this.state
    this.setState({
      card: {...card, type: e.target.value}
    })
  }
 
  render() {
    const { card, type } = this.state
    let _type = card.type
    if (type === 'columns') {
      if (_type !== 'picture') {
        _type = 'text'
      }
    } else if (type === 'search') {
      if (_type === 'number') {
        _type = 'text'
      }
    }
    return (
      <div className={'ant-card ant-card-bordered ' + (card.selected ? 'selected' : '')} >
        <div className="base" onClick={this.changeSelect}>
          <Icon type="check" />
          <p title={card.field}>字段名: {card.field}</p>
          <p title={card.label}>提示文字: {card.label}</p>
        </div>
        {type === 'search' && <Radio.Group onChange={this.changeType} value={_type} disabled={!card.selected}>
          <Radio value="text">text</Radio>
          <Radio value="select">select</Radio>
          <Radio value="date">date</Radio>
          <Radio value="datetime">datetime</Radio>
        </Radio.Group>}
        {type === 'columns' && <Radio.Group onChange={this.changeType} value={_type} disabled={!card.selected}>
          <Radio value="text">text</Radio>
          <Radio value="picture">picture</Radio>
        </Radio.Group>}
      </div>
    )
  }
}
 
class EditCard extends Component {
  constructor(props) {
    super(props)
 
    this.state = {
      dataSource: props.data,
      type: props.type
    }
  }
 
  getSelectedCard = () => {
    let box = []
    this.state.dataSource.forEach((item, index) => {
      box.push(this.refs['cellCard' + index].state.card)
    })
    return box
  }
 
  render() {
    const { dataSource, type } = this.state
 
    return (
      <div className="common-modal-edit-card">
        <Row>
          {dataSource.map((item, index) => (
            <Col key={index} span={8}>
              <EditCardCell ref={'cellCard' + index} type={type} card={item} />
            </Col>
          ))}
        </Row>
      </div>
    )
  }
}
 
export default EditCard