2019-11-23-01

king

2019-11-23 9f9d68cf40f1d7470bfb49220266b26663cbb722

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
99
100
101
102
103
104
import React, {Component} from 'react'
import { Row, Col, Icon, Radio } from 'antd'
import './index.scss'
 
class EditCardCell extends Component {
  constructor(props) {
    super(props)
 
    let _type = props.card.type
    if (props.type === 'columns') {
      if (_type !== 'picture') {
        _type = 'text'
      }
    } else if (props.type === 'search') {
      if (_type === 'number') {
        _type = 'text'
      } else if (_type === 'datetime') {
        _type = 'date'
      }
    }
 
    this.state = {
      card: {...props.card, type: _type},
      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
    return (
      <div className={'ant-card ant-card-bordered ' + (card.selected ? 'selected' : '')} >
        <div className="base" onClick={this.changeSelect}>
          <Icon type="check" />
          <p title={card.field}>字段： <span>{card.field}</span></p>
          <p title={card.label}>名称： <span>{card.label}</span></p>
        </div>
        {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> : null
        }
        {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> : null
        }
      </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