From c41b93d4c5e2146a1d1568887fb8ce1e3144d7fb Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 31 十二月 2019 18:24:36 +0800
Subject: [PATCH] 2019-12-31
---
src/tabviews/tableshare/topSearch/index.jsx | 56 +++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 45 insertions(+), 11 deletions(-)
diff --git a/src/tabviews/tableshare/topSearch/index.jsx b/src/tabviews/tableshare/topSearch/index.jsx
index 9c59994..6d98e20 100644
--- a/src/tabviews/tableshare/topSearch/index.jsx
+++ b/src/tabviews/tableshare/topSearch/index.jsx
@@ -2,6 +2,7 @@
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Button, Select, DatePicker, notification } from 'antd'
import moment from 'moment'
+import Utils from '@/utils/utils.js'
import './index.scss'
const {MonthPicker, WeekPicker, RangePicker} = DatePicker
@@ -13,9 +14,10 @@
}
state = {
- match: null, // 鎼滅储鏉′欢鍖归厤瑙勫垯
+ match: null, // 鎼滅储鏉′欢鍖归厤瑙勫垯
style: null,
- searchlist: null
+ searchlist: null,
+ formId: Utils.getuuid()
}
UNSAFE_componentWillMount () {
@@ -72,8 +74,8 @@
})
}
- UNSAFE_componentWillReceiveProps() {
- let searchlist = JSON.parse(JSON.stringify(this.props.searchlist))
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ let searchlist = JSON.parse(JSON.stringify(nextProps.searchlist))
let _list = []
let fieldMap = new Map()
@@ -170,7 +172,10 @@
getFields() {
const { getFieldDecorator } = this.props.form
const fields = []
+
this.state.searchlist.forEach((item, index) => {
+ if (item.hidden) return
+
if (item.type === 'text') { // 鏂囨湰鎼滅储
fields.push(
<Col span={6} key={index}>
@@ -186,12 +191,33 @@
{getFieldDecorator(item.field, {initialValue: item.initval })(
<Select
showSearch
- // onChange={this.searchChange}
onChange={(value) => {this.selectChange(item, value)}}
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+ getPopupContainer={() => document.getElementById(this.state.formId)}
>
- {item.options.map(option =>
- <Select.Option id={option.key} title={option.Text} key={option.key} value={option.Value}>{option.Text}</Select.Option>
+ {item.options.map((option, i) =>
+ <Select.Option id={`${i}`} title={option.Text} key={`${i}`} value={option.Value}>{option.Text}</Select.Option>
+ )}
+ </Select>
+ )}
+ </Form.Item>
+ </Col>
+ )
+ } else if (item.type === 'multiselect') { // 涓嬫媺澶氶��
+ let _initval = item.initval ? item.initval.split(',').filter(Boolean) : []
+ fields.push(
+ <Col span={6} key={index}>
+ <Form.Item label={item.label}>
+ {getFieldDecorator(item.field, {initialValue: _initval })(
+ <Select
+ showSearch
+ mode="multiple"
+ // onChange={(value) => {this.selectChange(item, value)}}
+ filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+ getPopupContainer={() => document.getElementById(this.state.formId)}
+ >
+ {item.options.map((option, i) =>
+ <Select.Option id={`${i}`} title={option.Text} key={`${i}`} value={option.Value}>{option.Text}</Select.Option>
)}
</Select>
)}
@@ -203,7 +229,7 @@
<Col span={6} key={index}>
<Form.Item label={item.label}>
{getFieldDecorator(item.field, {initialValue: item.initval ? moment().subtract(item.initval, 'days') : null })(
- <DatePicker onChange={this.searchChange} />
+ <DatePicker onChange={this.searchChange} getCalendarContainer={() => document.getElementById(this.state.formId)} />
)}
</Form.Item>
</Col>
@@ -213,7 +239,7 @@
<Col span={6} key={index}>
<Form.Item label={item.label}>
{getFieldDecorator(item.field, {initialValue: item.initval ? moment().subtract(item.initval, 'month') : null })(
- <MonthPicker onChange={this.searchChange} />
+ <MonthPicker onChange={this.searchChange} getCalendarContainer={() => document.getElementById(this.state.formId)} />
)}
</Form.Item>
</Col>
@@ -223,7 +249,7 @@
<Col span={6} key={index}>
<Form.Item label={item.label}>
{getFieldDecorator(item.field, {initialValue: item.initval ? moment().subtract(item.initval * 7, 'days') : null })(
- <WeekPicker onChange={this.searchChange} />
+ <WeekPicker onChange={this.searchChange} getCalendarContainer={() => document.getElementById(this.state.formId)} />
)}
</Form.Item>
</Col>
@@ -251,6 +277,7 @@
placeholder={['寮�濮嬫棩鏈�', '缁撴潫鏃ユ湡']}
renderExtraFooter={() => 'extra footer'}
onChange={this.searchChange}
+ getCalendarContainer={() => document.getElementById(this.state.formId)}
/>
)}
</Form.Item>
@@ -361,6 +388,13 @@
value: _value,
match: this.state.match[key]
})
+ } else if (this.state.style[key] === 'multiselect') {
+ search.push({
+ type: this.state.style[key],
+ key: key.replace(/@tail@$/, ''),
+ value: values[key],
+ match: this.state.match[key]
+ })
} else {
search.push({
type: this.state.style[key],
@@ -375,7 +409,7 @@
render() {
return (
- <Form className="ant-advanced-search-form top-search" onSubmit={this.handleSearch}>
+ <Form className="ant-advanced-search-form top-search" id={this.state.formId} onSubmit={this.handleSearch}>
<Row gutter={24}>{this.getFields()}</Row>
</Form>
)
--
Gitblit v1.8.0