2021-12-22

king

2021-12-22 bd1dfc9e6c9b9f8076ca2783ce598e0936b4c664

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
105
106
107
108
109
110
111
112
113
114
115
import React, {Component} from 'react'
import { Row, Col, Radio, Input } from 'antd'
import { CheckOutlined } from '@ant-design/icons'
import './index.scss'
 
const { Search } = Input
 
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}
    }, () => {
      this.props.changeCard(this.state.card)
    })
  }
 
  changeType = (e) => {
    const { card } = this.state
    this.setState({
      card: {...card, type: e.target.value}
    }, () => {
      this.props.changeCard(this.state.card)
    })
  }
 
  render() {
    const { card } = this.state
    return (
      <div className={'ant-card ant-card-bordered ' + (card.selected ? 'selected' : '')} >
        <div className="base" onClick={this.changeSelect}>
          <CheckOutlined />
          <p title={card.field}>字段： <span>{card.field}</span></p>
          <p title={card.label}>名称： <span>{card.label}</span></p>
        </div>
        <Radio.Group onChange={this.changeType} value={card.type} disabled={!card.selected}>
          <Radio value="text">text</Radio>
          <Radio value="number">number</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,
      selectCards: props.data.filter(item => item.selected),
      type: props.type,
      searchKey: ''
    }
  }
 
  changeCard = (item) => {
    let cards = JSON.parse(JSON.stringify(this.state.selectCards))
    let isAdd = true
    cards = cards.map(card => {
      if (card.field === item.field) {
        isAdd = false
        return item
      } else {
        return card
      }
    })
    if (isAdd) {
      cards.push(item)
    }
    this.setState({
      selectCards: cards
    })
  }
 
  render() {
    const { dataSource, type } = this.state
 
    return (
      <div className="modal-fields-edit-card">
        <Row className="search-row">
          <Col span={8}>
            <Search placeholder="请输入字段名" onSearch={value => {this.setState({searchKey: value})}} enterButton />
          </Col>
        </Row>
        <Row>
          {dataSource.map((item, index) => {
            if (item.field.toLowerCase().indexOf(this.state.searchKey.toLowerCase()) >= 0) {
              return (
                <Col key={index} span={8}>
                  <EditCardCell ref={'cellCard' + index} type={type} card={item} changeCard={this.changeCard} />
                </Col>
              )
            } else {
              return ''
            }
          })}
        </Row>
      </div>
    )
  }
}
 
export default EditCard