2021-06-27

king

2021-06-27 69cd43786253e299f6856a200554ae7fc0621877

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
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 { Search } = Input
const MKCheckCard = asyncComponent(() => import('@/tabviews/zshare/mutilform/checkCard'))
const MKSelect = asyncComponent(() => import('../mkSelect'))
const MKDatePicker = asyncComponent(() => import('../mkDatePicker'))
 
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') {
        if (item.inputType === 'search') {
          content = <Search placeholder={item.labelShow === 'false' ? item.label : ''} autoComplete="off" onSearch={this.handleSubmit} enterButton/>
        } else {
          content = <Input 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 card={item}/>
      }
 
      if (content) {
        fields.push(
          <Col span={item.ratio || 6} key={index}>
            <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: _rules
              })(content)}
            </Form.Item>
          </Col>
        )
      }
    })
    
    return fields
  }
 
  handleSubmit = () => {
    // 回车或点击搜索
    this.props.form.validateFields((err, values) => {
      if (err) return
        
      this.props.advanceSubmit(values)
    })
  }
 
  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)