2025-01-24

king

2025-01-24 e1cee96b38805bcccf48e7bcb9d296f2bc54c720

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
122
123
124
125
126
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Form, Row, Col, Input, Button } from 'antd'
 
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'
 
const MKCheckCard = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkCheckCard'))
const MKSelect = asyncComponent(() => import('../mkSelect'))
const MKCheck = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkCheck'))
const MKSwitch = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkSwitch'))
const MKRadio = asyncComponent(() => import('../mkRadio'))
const MKDatePicker = asyncComponent(() => import('../mkDatePicker'))
const MKNumber = asyncComponent(() => import('../mkNumber'))
 
class AdvanceSearch extends Component {
  static propTpyes = {
    record: PropTypes.object,       // 搜索条件值
    searchlist: PropTypes.array,    // 搜索条件列表
    advanceSubmit: PropTypes.func,  // 搜索条件提交
    handleClose: PropTypes.func     // 关闭
  }
 
  state = {
    searchlist: fromJS(this.props.searchlist).toJS()
  }
 
  getFields() {
    const { getFieldDecorator } = this.props.form
    const { record } = this.props
    const fields = []
 
    this.state.searchlist.forEach((item, index) => {
      if (!item.advanced || item.hidden) return
      
      const _rules = [
        {
          required: item.required,
          message: item.label + '不可为空!'
        }
      ]
 
      let content = null
      item.initval = record[item.field] || ''
 
      if (item.type === 'text') {
        content = <Input allowClear placeholder={item.labelShow === 'false' ? item.label : ''} autoComplete="off" onPressEnter={this.handleSubmit} />
      } else if (item.type === 'select' || item.type === 'link' || item.type === 'multiselect') {
        content = (<MKSelect config={item}/>)
      } else if (item.type === 'date' || item.type === 'datemonth' || item.type === 'dateweek' || item.type === 'daterange') {
        content = (<MKDatePicker config={item}/>)
      } else if (item.type === 'checkcard') {
        content = <MKCheckCard config={item}/>
      } else if (item.type === 'radio') {
        content = <MKRadio config={item} onChange={(val) => this.recordChange(val, false, item)} />
      } else if (item.type === 'check') {
        content = <MKCheck config={item}/>
      } else if (item.type === 'switch') {
        content = <MKSwitch config={item}/>
      } else if (item.type === 'range') {
        content = <MKNumber config={item} onInputSubmit={this.handleSubmit} />
      }
 
      if (content) {
        fields.push(
          <Col className="mk-search-col" span={item.ratio || 6} key={index}>
            <Form.Item
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
              label={item.labelShow !== 'false' ? item.label : ''}
            >
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: _rules
              })(content)}
            </Form.Item>
          </Col>
        )
      }
    })
    
    return fields
  }
 
  handleSubmit = (e) => {
    e.stopPropagation()
    // 回车或点击搜索
    this.props.form.validateFields((err, values) => {
      if (err) return
        
      setTimeout(() => {
        this.props.advanceSubmit(values)
      }, 10)
    })
  }
 
  render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    }
 
    return (
      <Form {...formItemLayout} className="advance-search">
        <Row gutter={24}>{this.getFields()}</Row>
        <div className="advance-button">
          <Button style={{ marginRight: 8 }} onClick={this.props.handleClose}>
            关闭
          </Button>
          <Button type="primary" onClick={this.handleSubmit}>
            确定
          </Button>
        </div>
      </Form>
    )
  }
}
 
export default Form.create()(AdvanceSearch)