From 69cd43786253e299f6856a200554ae7fc0621877 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期日, 27 六月 2021 21:26:20 +0800
Subject: [PATCH] 2021-06-27
---
src/tabviews/zshare/topSearch/advanceform/index.jsx | 292 +++++++++------------------------------------------------
1 files changed, 49 insertions(+), 243 deletions(-)
diff --git a/src/tabviews/zshare/topSearch/advanceform/index.jsx b/src/tabviews/zshare/topSearch/advanceform/index.jsx
index 8c47589..dd07f57 100644
--- a/src/tabviews/zshare/topSearch/advanceform/index.jsx
+++ b/src/tabviews/zshare/topSearch/advanceform/index.jsx
@@ -1,268 +1,68 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
-import { Form, Row, Col, Input, Select, DatePicker } from 'antd'
+import { Form, Row, Col, Input, Button } from 'antd'
import asyncComponent from '@/utils/asyncComponent'
-import Utils from '@/utils/utils.js'
import './index.scss'
-const { MonthPicker, WeekPicker, RangePicker } = DatePicker
-const CheckCard = asyncComponent(() => import('@/tabviews/zshare/mutilform/checkCard'))
+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 = {
- dict: PropTypes.object, // 瀛楀吀
- searchValues: PropTypes.object, // 鎼滅储鏉′欢鍊�
+ record: PropTypes.object, // 鎼滅储鏉′欢鍊�
searchlist: PropTypes.array, // 鎼滅储鏉′欢鍒楄〃
- handleSearch: PropTypes.func // 鎼滅储鏉′欢鎻愪氦
+ advanceSubmit: PropTypes.func, // 鎼滅储鏉′欢鎻愪氦
+ handleClose: PropTypes.func // 鍏抽棴
}
state = {
- dict: this.props.dict,
- formId: Utils.getuuid(), // 鎼滅储琛ㄥ崟Id
searchlist: fromJS(this.props.searchlist).toJS()
- }
-
- resetform = (formlist, supfields, index, fieldsvalue) => {
- index++
- let subfields = []
-
- supfields.forEach(supfield => {
- formlist = formlist.map(item => {
- if (item.type === 'link' && item.linkField === supfield.field) {
- item.options = item.oriOptions.filter(option => option.ParentID === supfield.initval || option.Value === '')
- item.initval = item.options[0] ? item.options[0].Value : ''
-
- if (this.props.form.getFieldValue(item.field) !== undefined) {
- fieldsvalue[item.field] = item.initval
- }
-
- subfields.push(item)
- }
- return item
- })
- })
-
- if (subfields.length === 0 || index > 6) {
- return formlist
- } else {
- return this.resetform(formlist, subfields, index, fieldsvalue)
- }
- }
-
- selectChange = (_field, value) => {
- let formlist = fromJS(this.state.searchlist).toJS()
-
- let subfields = []
- let fieldsvalue = {}
- formlist = formlist.map(item => {
- if (item.type === 'link' && item.linkField === _field.field) {
- item.options = item.oriOptions.filter(option => option.ParentID === value || option.Value === '')
- item.initval = item.options[0] ? item.options[0].Value : ''
-
- if (this.props.form.getFieldValue(item.field) !== undefined) {
- fieldsvalue[item.field] = item.initval
- }
-
- subfields.push(item)
- }
- return item
- })
-
- if (subfields.length === 0) {
- return
- }
-
- formlist = this.resetform(formlist, subfields, 0, fieldsvalue)
-
- if (Object.keys(fieldsvalue).length > 0) {
- this.props.form.setFieldsValue(fieldsvalue)
- }
-
- this.setState({
- searchlist: formlist
- })
}
getFields() {
const { getFieldDecorator } = this.props.form
- const { searchValues } = this.props
- const { dict, formId } = this.state
+ const { record } = this.props
const fields = []
this.state.searchlist.forEach((item, index) => {
- if (item.advanced !== 'true' || item.Hide === 'true') return
+ if (!item.advanced || item.hidden) return
- let initval = searchValues[item.field] || ''
- if (item.type === 'text') { // 鏂囨湰鎼滅储
- fields.push(
- <Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
- {getFieldDecorator(item.field, {
- initialValue: initval,
- rules: [
- {
- required: item.required,
- message: dict['form.required.input'] + item.label + '!'
- }
- ]
- })(<Input placeholder={item.labelShow === 'false' ? item.label : ''} autoComplete="off" onPressEnter={this.props.handleSearch} />)}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'select' || item.type === 'link') { // 涓嬫媺鎼滅储
- fields.push(
- <Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
- {getFieldDecorator(item.field, {
- initialValue: initval,
- rules: [
- {
- required: item.required,
- message: dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <Select
- showSearch
- onChange={(value) => {this.selectChange(item, value)}}
- filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 || option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0}
- 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>
- )}
- </Select>
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'multiselect') { // 涓嬫媺澶氶��
- fields.push(
- <Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
- {getFieldDecorator(item.field, {
- initialValue: initval,
- rules: [
- {
- required: item.required,
- message: dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <Select
- showSearch
- mode="multiple"
- filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
- 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>
- )}
- </Select>
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'date') { // 鏃堕棿鎼滅储
- fields.push(
- <Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
- {getFieldDecorator(item.field, {
- initialValue: initval || null,
- rules: [
- {
- required: item.required,
- message: dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <DatePicker getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} />
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'datemonth') {
- fields.push(
- <Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
- {getFieldDecorator(item.field, {
- initialValue: initval || null,
- rules: [
- {
- required: item.required,
- message: dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <MonthPicker getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} />
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'dateweek') {
- fields.push(
- <Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
- {getFieldDecorator(item.field, {
- initialValue: initval || null,
- rules: [
- {
- required: item.required,
- message: dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <WeekPicker getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} />
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'daterange') {
- let _defaultValue = initval
-
- if (!initval) {
- _defaultValue = [null, null]
+ const _rules = [
+ {
+ required: item.required,
+ message: item.label + '涓嶅彲涓虹┖!'
}
+ ]
- fields.push(
- <Col className="daterange" span={item.ratio || 6} key={index}>
- <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
- {getFieldDecorator(item.field,
- {
- initialValue: _defaultValue,
- rules: [
- {
- required: item.required,
- message: dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <RangePicker
- placeholder={['寮�濮嬫棩鏈�', '缁撴潫鏃ユ湡']}
- renderExtraFooter={() => 'extra footer'}
- getCalendarContainer={() => formId ? document.getElementById(formId) : document.body}
- />
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'checkcard') { // 澶氶�夋
+ 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: [
- {
- required: item.required,
- message: dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <CheckCard card={item} />
- )}
+ rules: _rules
+ })(content)}
</Form.Item>
</Col>
)
@@ -272,14 +72,12 @@
return fields
}
- handleConfirm = () => {
+ handleSubmit = () => {
// 鍥炶溅鎴栫偣鍑绘悳绱�
- return new Promise((resolve, reject) => {
- this.props.form.validateFields((err, values) => {
- if (!err) {
- resolve(values)
- }
- })
+ this.props.form.validateFields((err, values) => {
+ if (err) return
+
+ this.props.advanceSubmit(values)
})
}
@@ -296,8 +94,16 @@
}
return (
- <Form {...formItemLayout} className="advance-search" id={this.state.formId}>
+ <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>
)
}
--
Gitblit v1.8.0