Merge branch 'master' into positec

king

2024-05-21 8a6ce370f1aa1c061b76fa3e9d2d4d1df53ca4c5

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
116
117
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Col, Row } from 'antd'
 
import './index.scss'
 
class CheckCard extends Component {
  static propTpyes = {
    config: PropTypes.object,    // 表单配置信息
    onChange: PropTypes.func,    // 数据切换
  }
 
  state = {
    appType: sessionStorage.getItem('appType'),
  }
 
  getCards = () => {
    const { display, width, options, fields, ratio, picratio, backgroundColor, field, labelShow } = this.props.config
 
    let _options = []
    let _fields = fields || []
 
    if (options) {
      _options = options.filter(op => !op.Hide)
    }
 
    let cls = ''
    if (_options.length * width <= 24) {
      cls = 'no-margin-bottom'
    }
    if (display === 'picture') {
      let _ratio = picratio || ratio
      let paddingTop = '100%'
      if (_ratio === '4:3') {
        paddingTop = '75%'
      } else if (_ratio === '3:2') {
        paddingTop = '66.7%'
      } else if (_ratio === '16:9') {
        paddingTop = '56.25%'
      }
      if (_options.length === 0) {
        return <Col span={width}>
          <div className="card-pic-cell no-margin-bottom" style={{paddingTop, background: '#91d5ff'}}>
          </div>
        </Col>
      }
      return _options.map(item => {
        return <Col span={width} key={item.key}>
          <div className={'card-pic-cell ' + cls} style={{paddingTop, backgroundImage: `url(${item.$url})`}}>
            <div className="content-wrap">
              <div className="content-center">
                {_fields.map(col => {
                  return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
                })}
              </div>
            </div>
          </div>
        </Col>
      })
    } else if (display === 'color') {
      if (_options.length === 0) {
        return <Col span={width}>
          <div className="card-color-cell no-margin-bottom" style={{background: '#1890ff'}}>
          </div>
        </Col>
      }
      return _options.map(item => {
        return <Col span={width} key={item.key}>
          <div className={'card-color-cell ' + cls} style={{background: item.$color}}>
            {_fields.map(col => {
              return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
            })}
          </div>
        </Col>
      })
    } else {
      let _style = null
      let style = null
 
      if (backgroundColor) {
        _style = {backgroundColor}
        style = {borderColor: 'transparent'}
      }
 
      if (_options.length === 0) {
        return <Col span={width}>
          <div className="card-cell no-margin-bottom" style={style}>
            <div className="bg-mask" style={_style}></div>
            <span style={{color: '#000000', fontSize: '14px', height: '21px'}}>示例 {labelShow === 'false' ? field : ''}</span>
          </div>
        </Col>
      }
      return _options.map(item => {
        return <Col span={width} key={item.key}>
          <div className={'card-cell ' + cls} style={style}>
            <div className="bg-mask" style={_style}></div>
            {_fields.map(col => {
              return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
            })}
          </div>
        </Col>
      })
    }
  }
 
  render() {
    const { config } = this.props
    
    return (
      <div className={'check-card-edit-box border-' + (config.border || 'show')} style={{marginTop: '5px'}}>
        <Row gutter={12}>{this.getCards()}</Row>
      </div>
    )
  }
}
 
export default CheckCard