From 106263ec10e60ce6c406e4fd5eb76d195772d0f0 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 18 十二月 2020 18:07:05 +0800
Subject: [PATCH] 2020-12-18
---
src/tabviews/zshare/topSearch/index.jsx | 123 ++++++++++++++++++++++++++---------------
1 files changed, 78 insertions(+), 45 deletions(-)
diff --git a/src/tabviews/zshare/topSearch/index.jsx b/src/tabviews/zshare/topSearch/index.jsx
index 161d170..6f1400d 100644
--- a/src/tabviews/zshare/topSearch/index.jsx
+++ b/src/tabviews/zshare/topSearch/index.jsx
@@ -12,28 +12,35 @@
import enUS from '@/locales/en-US/main.js'
import './index.scss'
-const {MonthPicker, WeekPicker, RangePicker} = DatePicker
+const { MonthPicker, WeekPicker, RangePicker } = DatePicker
class MainSearch extends Component {
static propTpyes = {
BID: PropTypes.any, // 鐖剁骇Id锛岀敤浜庢煡璇笅鎷夐�夋嫨椤�
menuType: PropTypes.any, // 鑿滃崟鏉冮檺锛屾槸鍚︿负HS
searchlist: PropTypes.array, // 鎼滅储鏉′欢鍒楄〃
+ config: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅(鑷畾涔夐〉闈�)
+ refreshdata: PropTypes.func // 鍒锋柊鏁版嵁
}
state = {
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
- match: null, // 鎼滅储鏉′欢鍖归厤瑙勫垯
- style: null, // 鎼滅储鏉′欢绫诲瀷
- label: null, // 鎻愮ず鏂囧瓧
- required: null, // 鏄惁蹇呭～
- searchlist: null, // 鎼滅储椤�
- groups: null, // 缁勫悎鎼滅储椤�
- formId: Utils.getuuid() // 鎼滅储琛ㄥ崟Id
+ formId: '', // 鎼滅储琛ㄥ崟Id
+ match: null, // 鎼滅储鏉′欢鍖归厤瑙勫垯
+ style: null, // 鎼滅储鏉′欢绫诲瀷
+ label: null, // 鎻愮ず鏂囧瓧
+ required: null, // 鏄惁蹇呭～
+ searchlist: null, // 鎼滅储椤�
+ groups: null, // 缁勫悎鎼滅储椤�
+ float: '', // 娴姩
+ showButton: true, // 鏄惁鏄剧ず鎼滅储鎸夐挳
+ searchStyle: null // 鎼滅储鏉′欢鏍峰紡
}
UNSAFE_componentWillMount () {
- let searchlist = fromJS(this.props.searchlist).toJS()
+ const { config, menuType, searchlist } = this.props
+
+ let _searchlist = []
let match = {}
let label = {}
let style = {}
@@ -43,8 +50,27 @@
let mainItems = [] // 浜戠鎴栧崟鐐规暟鎹�
let localItems = [] // 鏈湴鏁版嵁
let deForms = [] // 娴嬭瘯绯荤粺锛屽崟涓姹�
+ let float = ''
+ let showButton = true
+ let searchStyle = null
+ let formId = Utils.getuuid()
- searchlist.forEach(item => {
+ if (searchlist) {
+ _searchlist = fromJS(searchlist).toJS()
+ } else if (config) {
+ _searchlist = fromJS(config.search).toJS()
+ if (config.type === 'search' && config.subtype === 'mainsearch') {
+ float = config.wrap.float
+ showButton = config.wrap.float === 'left' && config.wrap.show === 'true'
+ searchStyle = config.style
+ } else {
+ formId = ''
+ showButton = false
+ float = 'right'
+ }
+ }
+
+ _searchlist.forEach(item => {
if (fieldMap.has(item.field)) {
item.field = item.field + '@tail@'
}
@@ -76,7 +102,7 @@
}
// 娴嬭瘯绯荤粺鍗曚釜璇锋眰
- if (this.props.menuType !== 'HS' && options.sysType === 'local' && !window.GLOB.systemType) {
+ if (menuType !== 'HS' && options.sysType === 'local' && !window.GLOB.systemType) {
deForms.push({
...item,
arr_field: _option.field,
@@ -124,14 +150,18 @@
})
this.setState({
- match: match,
- label: label,
- style: style,
- required: required,
+ match,
+ label,
+ style,
+ float,
+ formId,
+ required,
+ showButton,
+ searchStyle,
searchlist: _list,
groups: _groups
}, () => {
- if (this.props.menuType !== 'HS' && options.sysType === 'local' && !window.GLOB.systemType) {
+ if (menuType !== 'HS' && options.sysType === 'local' && !window.GLOB.systemType) {
this.improveSimpleSearch(deForms)
} else {
this.improveSearch(mainItems, localItems)
@@ -431,7 +461,7 @@
getFields() {
const { getFieldDecorator } = this.props.form
- const { dict } = this.state
+ const { dict, showButton, formId } = this.state
const fields = []
this.state.searchlist.forEach((item, index) => {
@@ -440,7 +470,7 @@
if (item.type === 'text') { // 鏂囨湰鎼滅储
fields.push(
<Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.label}>
+ <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
{getFieldDecorator(item.field, {
initialValue: item.initval,
rules: [
@@ -449,14 +479,14 @@
message: dict['form.required.input'] + item.label + '!'
}
]
- })(<Input placeholder="" autoComplete="off" />)}
+ })(<Input placeholder={item.labelShow === 'false' ? item.label : ''} autoComplete="off" onPressEnter={this.handleSearch} />)}
</Form.Item>
</Col>
)
} else if (item.type === 'select') { // 涓嬫媺鎼滅储
fields.push(
<Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.label}>
+ <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
{getFieldDecorator(item.field, {
initialValue: item.initval,
rules: [
@@ -470,7 +500,7 @@
showSearch
onChange={(value) => {this.selectChange(item, value)}}
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
- getPopupContainer={() => document.getElementById(this.state.formId)}
+ getPopupContainer={() => formId ? document.getElementById(formId) : document.body}
>
{item.options.map((option, i) =>
<Select.Option id={`${i}`} title={option.Text} key={`${i}`} value={option.Value}>{option.Text}</Select.Option>
@@ -484,7 +514,7 @@
let _initval = item.initval ? item.initval.split(',').filter(Boolean) : []
fields.push(
<Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.label}>
+ <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
{getFieldDecorator(item.field, {
initialValue: _initval,
rules: [
@@ -499,7 +529,7 @@
mode="multiple"
onChange={this.searchChange}
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
- getPopupContainer={() => document.getElementById(this.state.formId)}
+ getPopupContainer={() => formId ? document.getElementById(formId) : document.body}
>
{item.options.map((option, i) =>
<Select.Option id={`${i}`} title={option.Text} key={`${i}`} value={option.Value}>{option.Text}</Select.Option>
@@ -512,7 +542,7 @@
} else if (item.type === 'date') { // 鏃堕棿鎼滅储
fields.push(
<Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.label}>
+ <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
{getFieldDecorator(item.field, {
initialValue: item.initval ? moment().subtract(item.initval, 'days') : null,
rules: [
@@ -522,7 +552,7 @@
}
]
})(
- <DatePicker onChange={this.searchChange} getCalendarContainer={() => document.getElementById(this.state.formId)} />
+ <DatePicker onChange={this.searchChange} getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} />
)}
</Form.Item>
</Col>
@@ -530,7 +560,7 @@
} else if (item.type === 'datemonth') {
fields.push(
<Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.label}>
+ <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
{getFieldDecorator(item.field, {
initialValue: item.initval ? moment().subtract(item.initval, 'month') : null,
rules: [
@@ -540,7 +570,7 @@
}
]
})(
- <MonthPicker onChange={this.searchChange} getCalendarContainer={() => document.getElementById(this.state.formId)} />
+ <MonthPicker onChange={this.searchChange} getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} />
)}
</Form.Item>
</Col>
@@ -548,7 +578,7 @@
} else if (item.type === 'dateweek') {
fields.push(
<Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.label}>
+ <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
{getFieldDecorator(item.field, {
initialValue: item.initval ? moment().subtract(item.initval * 7, 'days') : null,
rules: [
@@ -558,7 +588,7 @@
}
]
})(
- <WeekPicker onChange={this.searchChange} getCalendarContainer={() => document.getElementById(this.state.formId)} />
+ <WeekPicker onChange={this.searchChange} getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} />
)}
</Form.Item>
</Col>
@@ -577,7 +607,7 @@
fields.push(
<Col className="daterange" span={item.ratio || 6} key={index}>
- <Form.Item label={item.label}>
+ <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
{getFieldDecorator(item.field,
{
initialValue: _defaultValue,
@@ -592,7 +622,7 @@
placeholder={['寮�濮嬫棩鏈�', '缁撴潫鏃ユ湡']}
renderExtraFooter={() => 'extra footer'}
onChange={this.searchChange}
- getCalendarContainer={() => document.getElementById(this.state.formId)}
+ getCalendarContainer={() => formId ? document.getElementById(formId) : document.body}
/>
)}
</Form.Item>
@@ -601,7 +631,7 @@
} else if (item.type === 'group') {
fields.push(
<Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.label} className={item.required === 'true' ? 'group-required' : ''}>
+ <Form.Item label={item.labelShow !== 'false' ? item.label : ''} className={item.required === 'true' ? 'group-required' : ''}>
<DateGroup ref={item.uuid} position={index} card={item} onGroupChange={this.searchChange} />
</Form.Item>
</Col>
@@ -609,18 +639,20 @@
}
})
- fields.push(
- <Col span={6} style={{ whiteSpace: 'nowrap' }} key="actions">
- <Form.Item label={' '} colon={false} style={{ minHeight: '40px' }}>
- <Button type="primary" htmlType="submit">
- {dict['main.search']}
- </Button>
- <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
- {dict['main.reset']}
- </Button>
- </Form.Item>
- </Col>
- )
+ if (showButton) {
+ fields.push(
+ <Col span={6} style={{ whiteSpace: 'nowrap' }} key="actions">
+ <Form.Item label={' '} colon={false} style={{ minHeight: '40px' }}>
+ <Button type="primary" onClick={this.handleSearch}>
+ {dict['main.search']}
+ </Button>
+ <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
+ {dict['main.reset']}
+ </Button>
+ </Form.Item>
+ </Col>
+ )
+ }
return fields
}
@@ -768,6 +800,7 @@
}
render() {
+ const { float, searchStyle } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -780,7 +813,7 @@
}
return (
- <Form {...formItemLayout} className="top-search" id={this.state.formId} onSubmit={this.handleSearch}>
+ <Form {...formItemLayout} className={`top-search ${float}`} style={searchStyle} id={this.state.formId}>
<Row gutter={24}>{this.getFields()}</Row>
</Form>
)
--
Gitblit v1.8.0