2021-09-28

king

2021-09-28 432b788acf901b0720184b8ee8bc81a2e6fa47e0

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
118
119
120
121
import React, {Component} from 'react'
import { is, fromJS } from 'immutable'
import { Select } from 'antd'
 
import MKEmitter from '@/utils/events.js'
 
class MKSearchSelect extends Component {
  constructor(props) {
    super(props)
    
    const config = props.config
    let value = config.initval
 
    if (config.type === 'multiselect') {
      if (value) {
        value = value.split(',')
      } else {
        value = []
      }
    }
 
    this.state = {
      config: fromJS(config).toJS(),
      options: fromJS(config.options).toJS(),
      value,
    }
  }
 
  componentDidMount () {
    const { config } = this.state
 
    if (config.type !== 'multiselect') {
      MKEmitter.addListener('mkSP', this.mkFormHandle)
    }
  }
 
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }
 
  UNSAFE_componentWillReceiveProps (nextProps) {
    const { config } = this.state
 
    if (!is(fromJS(config.oriOptions), fromJS(nextProps.config.oriOptions))) {
      this.setState({
        config: fromJS(nextProps.config).toJS(),
        options: fromJS(nextProps.config.options).toJS()
      })
    }
  }
 
  componentWillUnmount () {
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('mkSP', this.mkFormHandle)
  }
 
  mkFormHandle = (uuid, parentId, level) => {
    const { config } = this.state
 
    if (uuid !== config.uuid) return
 
    let options = config.oriOptions.filter(option => option.ParentID === parentId || option.Value === '')
    let val = options[0] ? options[0].Value : ''
 
    this.setState({
      options,
      value: val
    })
 
    this.props.onChange(val, true)
 
    if (level < 7 && config.linkFields) {
      config.linkFields.forEach((m, i) => {
        setTimeout(() => {
          MKEmitter.emit('mkSP', m.uuid, val, level + 1)
        }, (i + 1) * 10)
      })
    }
  }
 
  selectChange = (val) => {
    const { config } = this.state
 
    if (config.type === 'multiselect') {
      this.props.onChange(val.join(','))
    } else {
      config.linkFields && config.linkFields.forEach((m, i) => {
        setTimeout(() => {
          MKEmitter.emit('mkSP', m.uuid, val, 0)
        }, (i + 1) * 10)
      })
 
      this.props.onChange(val)
    }
 
    this.setState({value: val})
  }
 
  render() {
    const { value, config, options } = this.state
 
    return (
      <Select
        showSearch
        mode={config.type === 'multiselect' ? 'multiple' : ''}
        dropdownMatchSelectWidth={config.dropdown !== 'false'}
        value={value}
        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
        onChange={this.selectChange}
      >
        {options.map(option =>
          <Select.Option id={option.key} key={option.key} title={option.Text} value={option.Value}>{option.Text}</Select.Option>
        )}
      </Select>
    )
  }
}
 
export default MKSearchSelect