From 6c68ddaac837ebed30d291f0f8b864b830afaa8a Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 21 七月 2022 01:01:22 +0800
Subject: [PATCH] 2022-07-21
---
src/tabviews/zshare/topSearch/index.jsx | 376 +++++++++++++++++++++++++++++++++++++----------------
1 files changed, 263 insertions(+), 113 deletions(-)
diff --git a/src/tabviews/zshare/topSearch/index.jsx b/src/tabviews/zshare/topSearch/index.jsx
index c2cf4ad..049729e 100644
--- a/src/tabviews/zshare/topSearch/index.jsx
+++ b/src/tabviews/zshare/topSearch/index.jsx
@@ -1,7 +1,8 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { is, fromJS } from 'immutable'
-import { Form, Row, Col, Button, notification, Modal, Icon } from 'antd'
+import { fromJS } from 'immutable'
+import { Form, Row, Col, Button, notification, Modal, Drawer } from 'antd'
+import { CloseOutlined, DownOutlined } from '@ant-design/icons'
import moment from 'moment'
import Api from '@/api'
@@ -9,13 +10,11 @@
import asyncComponent from '@/utils/asyncComponent'
import asyncSpinComponent from '@/utils/asyncSpinComponent'
import Utils from '@/utils/utils.js'
-import zhCN from '@/locales/zh-CN/main.js'
-import enUS from '@/locales/en-US/main.js'
import MKInput from './mkInput'
import './index.scss'
const MutilForm = asyncSpinComponent(() => import('./advanceform'))
-const MKCheckCard = asyncComponent(() => import('@/tabviews/zshare/mutilform/checkCard'))
+const MKCheckCard = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkCheckCard'))
const MKSelect = asyncComponent(() => import('./mkSelect'))
const DateGroup = asyncComponent(() => import('./dategroup'))
const MKDatePicker = asyncComponent(() => import('./mkDatePicker'))
@@ -31,16 +30,10 @@
}
state = {
- dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
searchlist: null, // 鎼滅储椤�
- reset: true, // 鎺у埗缁勫悎鎼滅储椤归噸缃�
- float: '', // 娴姩
- showButton: true, // 鏄惁鏄剧ず鎼滅储鎸夐挳
- showAdvanced: false, // 鏄惁鏄剧ず楂樼骇鎼滅储
- searchStyle: null, // 鎼滅储鏉′欢鏍峰紡
+ setting: {},
advanceValues: [], // 楂樼骇鎼滅储鏉′欢淇濆瓨鍊�
visible: false,
- adModelWidth: '1000px',
hasReqFields: false
}
@@ -54,50 +47,80 @@
let mainItems = [] // 浜戠鎴栧崟鐐规暟鎹�
let localItems = [] // 鏈湴鏁版嵁
let deForms = [] // 娴嬭瘯绯荤粺锛屽崟涓姹�
- let float = ''
- let showButton = true
- let searchStyle = null
let advanceValues = []
- let showAdvanced = false
- let adModelWidth = 1000
let linkFields = {}
let record = {}
let hasReqFields = false
- if (setting && setting.advanceWidth) {
- adModelWidth = setting.advanceWidth
- } else if (config && config.wrap && config.wrap.advanceWidth) {
- adModelWidth = config.wrap.advanceWidth
+ let forbid = false // header涓笉璁剧疆楂樼骇鎼滅储
+ let _setting = {showAdv: false, show: false}
+
+ if (setting) {
+ _setting.show = setting.show !== 'false'
+ _setting.float = setting.float || 'left'
+ _setting.advanceType = setting.advanceType || 'modal'
+ _setting.advWidth = setting.advanceWidth || 1000
+ _setting.placement = setting.drawerPlacement || 'right'
+ _setting.ratio = setting.searchRatio || 6
+ _setting.labelwidth = setting.searchLwidth !== undefined ? setting.searchLwidth : 33.3
+ _setting.style = null
+ } else if (config) {
+ if (config.wrap) {
+ _setting.show = config.wrap.show !== 'false'
+ _setting.advanceType = config.wrap.advanceType || 'modal'
+ _setting.advWidth = config.wrap.advanceWidth || 1000
+ _setting.placement = config.wrap.drawerPlacement || 'right'
+ _setting.ratio = config.wrap.searchRatio || 6
+ _setting.labelwidth = config.wrap.searchLwidth !== undefined ? config.wrap.searchLwidth : 33.3
+ _setting.style = null
+ }
+
+ if (config.type === 'search') {
+ _setting.float = config.wrap.float || 'left'
+ _setting.style = config.style
+ } else {
+ _setting.float = 'right'
+ _setting.show = false
+ forbid = true
+ }
}
- if (adModelWidth < 100) {
- adModelWidth = adModelWidth + 'vw'
- } else {
- adModelWidth = adModelWidth + 'px'
+ _setting.labelCol = {style: {width: _setting.labelwidth + '%'}}
+ _setting.wrapperCol = {style: {width: (100 - _setting.labelwidth) + '%'}}
+
+ if (_setting.advanceType === 'drawer') {
+ if (_setting.placement === 'top' || _setting.placement === 'bottom') {
+ _setting.advHeight = _setting.advWidth > 100 ? _setting.advWidth + 'px' : _setting.advWidth + 'vh'
+ _setting.advWidth = '100vw'
+ } else {
+ _setting.advWidth = _setting.advWidth > 100 ? _setting.advWidth + 'px' : _setting.advWidth + 'vw'
+ }
+ } else if (_setting.advanceType === 'modal') {
+ if (_setting.advWidth < 100) {
+ _setting.advWidth = _setting.advWidth + 'vw'
+ } else {
+ _setting.advWidth = _setting.advWidth + 'px'
+ }
}
if (searchlist) {
- if (setting && setting.show === 'false') {
- showButton = false
- }
_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.show !== 'false'
- searchStyle = config.style
- } else {
- showButton = false
- float = 'right'
- }
}
_searchlist.forEach(item => {
- if (item.type === 'link') {
+ if (item.linkField) {
linkFields[item.linkField] = linkFields[item.linkField] || []
linkFields[item.linkField].push({field: item.field, uuid: item.uuid})
}
+
+ let labelwidth = item.labelwidth || 33.3
+ if (item.labelShow === 'false') {
+ labelwidth = 0
+ }
+ item.labelCol = {style: {width: labelwidth + '%'}}
+ item.wrapperCol = {style: {width: (100 - labelwidth) + '%'}}
if (fieldMap.has(item.field)) {
item.field = item.field + '@tail@'
@@ -107,14 +130,22 @@
hasReqFields = true
}
- if (showButton && item.advanced) {
- showAdvanced = true
+ if (item.advanced && !forbid) {
+ _setting.showAdv = true
} else {
item.advanced = false
}
if (item.advanced && item.initval) {
- advanceValues.push({field: item.field, type: item.type, label: item.label, value: item.initval})
+ let val = item.initval
+ if (item.precision === 'hour') {
+ if (/,/ig.test(val)) {
+ val = val.split(',').map(m => m + ':00').join(',')
+ } else {
+ val = val + ':00'
+ }
+ }
+ advanceValues.push({field: item.field, type: item.type, label: item.label, value: val})
}
if (item.type === 'group') {
@@ -126,11 +157,13 @@
if (['select', 'link', 'multiselect', 'checkcard'].includes(item.type)) {
item.options = item.options || []
+ item.options = item.options.filter(op => !op.Hide)
if (item.setAll === 'true' && ['select', 'link'].includes(item.type)) {
item.options.unshift({
key: Utils.getuuid(),
Value: '',
- Text: this.state.dict['main.all']
+ Text: '鍏ㄩ儴',
+ ParentID: ''
})
}
@@ -164,11 +197,11 @@
let _list = _searchlist.map(item => {
if (item.hidden) return item
- if (linkFields[item.field]) {
+ if (linkFields[item.field] && (item.type === 'select' || item.type === 'link' || (item.type === 'checkcard' && item.multiple !== 'true'))) {
item.linkFields = linkFields[item.field]
}
- if (item.type === 'link') {
+ if (item.linkField) {
let supItem = fieldMap.get(item.linkField)
if (!supItem) {
@@ -188,12 +221,8 @@
})
this.setState({
- float,
- showButton,
- searchStyle,
+ setting: _setting,
hasReqFields,
- showAdvanced,
- adModelWidth,
advanceValues,
searchlist: _list
}, () => {
@@ -203,10 +232,6 @@
this.improveSearch(mainItems, localItems)
}
})
- }
-
- shouldComponentUpdate (nextProps, nextState) {
- return !is(fromJS(this.state), fromJS(nextState))
}
// 鏌ヨ涓嬫媺鑿滃崟
@@ -318,7 +343,7 @@
improveSimpleSearch = (deForms) => {
if (deForms.length === 0) return
- let deffers = deForms.map(item => {
+ let deffers = deForms.map((item, index) => {
let param = {
func: 'sPC_Get_SelectedList',
LText: item.data_sql,
@@ -335,16 +360,18 @@
return (
new Promise(resolve => {
- Api.getSystemCacheConfig(param).then(res => {
- if (!res.status) {
- notification.warning({
- top: 92,
- message: res.message,
- duration: 5
- })
- }
- resolve(res)
- })
+ setTimeout(() => {
+ Api.getSystemCacheConfig(param).then(res => {
+ if (!res.status) {
+ notification.warning({
+ top: 92,
+ message: res.message,
+ duration: 5
+ })
+ }
+ resolve(res)
+ })
+ }, index * 30)
})
)
})
@@ -385,7 +412,7 @@
_item = {..._item, ...cell}
}
- if (item.type === 'link') {
+ if (item.linkField) {
_item.ParentID = cell[item.linkField]
}
@@ -395,13 +422,13 @@
item.oriOptions = [...item.oriOptions, ...options]
}
- if (item.type === 'link') {
+ if (item.linkField) {
if (item.supInitVal) {
item.options = item.oriOptions.filter(option => option.ParentID === item.supInitVal || option.Value === '')
} else {
item.options = item.oriOptions
}
- } else if (item.type === 'select' || item.type === 'multiselect' || item.type === 'checkcard') {
+ } else if (item.oriOptions) {
item.options = item.oriOptions
}
@@ -423,7 +450,9 @@
this.handleSubmit()
}, 1000)
} else {
- this.handleSubmit()
+ setTimeout(() => {
+ this.handleSubmit()
+ }, 10)
}
}
@@ -434,14 +463,23 @@
this.handleSubmit()
}
+ cardChange = (val, item) => {
+ this.record[item.field] = val
+
+ if (!item.linkFields) {
+ setTimeout(() => {
+ this.handleSubmit()
+ }, 10)
+ }
+ }
+
getFields() {
const { getFieldDecorator } = this.props.form
- const { dict, showButton, showAdvanced, float, visible } = this.state
+ const { visible, setting } = this.state
const fields = []
- let lastRadio = 6
this.state.searchlist.forEach((item, index) => {
- if (item.hidden || item.advanced) return
+ if (item.hidden || (item.advanced && (setting.advanceType !== 'pulldown' || !visible))) return
const _rules = [
{
@@ -451,9 +489,7 @@
]
let content = null
- let className = ''
let field = item.field
- lastRadio = item.ratio || 6
if (item.type === 'text') {
content = (<MKInput config={item} onInputSubmit={this.handleSubmit} />)
@@ -465,14 +501,17 @@
field = item.datefield
content = <DateGroup position={index} config={item} onChange={(val, type) => this.dateGroupChange(val, type, item)} />
} else if (item.type === 'checkcard') {
- className = 'checkcard'
- content = <MKCheckCard card={item} onChange={this.handleSubmit} />
+ content = <MKCheckCard config={item} onChange={(val) => this.cardChange(val, item)} />
}
if (content) {
fields.push(
- <Col span={item.ratio || 6} key={index}>
- <Form.Item className={className} label={item.labelShow !== 'false' ? item.label : ''}>
+ <Col className="mk-search-col" span={item.ratio || 6} key={index}>
+ <Form.Item
+ label={item.labelShow !== 'false' ? item.label : ''}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ >
{getFieldDecorator(field, {
initialValue: item.initval,
rules: _rules
@@ -483,44 +522,88 @@
}
})
- if (showButton) {
- let action = (
- <Col span={lastRadio < 6 ? 6 : lastRadio} style={{ whiteSpace: 'nowrap' }} className="search-button" key="actions">
- <Form.Item label={' '} colon={false} style={{ minHeight: '40px' }}>
- <Button type="primary" onClick={this.handleSubmit}>
- {dict['main.search']}
- </Button>
- <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
- {dict['main.reset']}
- </Button>
- {showAdvanced && !visible ? <Button type="link" onClick={this.handleAdvance}>
- 楂樼骇
+ if (setting.show || setting.showAdv) {
+ fields.push(
+ <Col span={setting.searchRatio} style={{ whiteSpace: 'nowrap' }} className="mk-search-col search-button" key="actions">
+ <Form.Item
+ label={' '}
+ colon={false}
+ labelCol={setting.labelCol}
+ wrapperCol={setting.wrapperCol}
+ >
+ {setting.show ? <Button type="primary" onClick={this.handleSubmit}>
+ 鎼滅储
+ </Button> : null}
+ {setting.show ? <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
+ 閲嶇疆
+ </Button> : null}
+ {setting.showAdv ? <Button className={visible ? 'visible' : ''} type="link" onClick={this.handleAdvance}>
+ 楂樼骇{setting.advanceType === 'pulldown' ? <DownOutlined /> : null}
</Button> : null}
</Form.Item>
</Col>
)
- if (float === 'right') {
- fields.unshift(action)
- } else {
- fields.push(action)
- }
}
return fields
}
handleAdvance = () => {
- this.setState({visible: true})
+ const { setting, visible } = this.state
+
+ if (setting.advanceType !== 'pulldown' && visible) {
+ return
+ }
+
+ this.setState({visible: !visible})
+
+ if (setting.advanceType === 'pulldown') {
+ if (visible) {
+ let advanceValues = []
+ this.state.searchlist.forEach(item => {
+ if (!item.advanced) return
+
+ let val = this.record[item.field]
+ if (val || val === 0) {
+ if (item.precision === 'hour') {
+ if (/,/ig.test(val)) {
+ val = val.split(',').map(m => m + ':00').join(',')
+ } else {
+ val = val + ':00'
+ }
+ }
+ advanceValues.push({field: item.field, type: item.type, label: item.label, value: val})
+ }
+ })
+ this.setState({advanceValues})
+ } else {
+ let list = this.state.searchlist.map(item => {
+ if (!item.advanced) return item
+
+ item.initval = this.record[item.field]
+
+ return item
+ })
+ this.setState({searchlist: list})
+ }
+ }
}
handleSubmit = () => {
this.setState({}, () => {
this.props.form.validateFields((err, values) => {
if (err) return
+
+ let { searches, error } = this.getFieldsValues(values)
- let searches = this.getFieldsValues(values)
-
- if (this.state.hasReqFields) {
+ if (error) {
+ notification.warning({
+ top: 92,
+ message: error,
+ duration: 3
+ })
+ return
+ } else if (this.state.hasReqFields) {
let requireFields = searches.filter(item => item.required && item.value === '')
if (requireFields.length > 0) {
let labels = requireFields.map(item => item.label)
@@ -528,7 +611,7 @@
notification.warning({
top: 92,
- message: this.state.dict['form.required.input'] + labels.join('銆�') + ' !',
+ message: '璇疯緭鍏�' + labels.join('銆�') + ' !',
duration: 3
})
return
@@ -556,7 +639,15 @@
record[item.field] = item.initval
}
if (item.advanced && item.initval) {
- advanceValues.push({field: item.field, type: item.type, label: item.label, value: item.initval})
+ let val = item.initval
+ if (item.precision === 'hour') {
+ if (/,/ig.test(val)) {
+ val = val.split(',').map(m => m + ':00').join(',')
+ } else {
+ val = val + ':00'
+ }
+ }
+ advanceValues.push({field: item.field, type: item.type, label: item.label, value: val})
}
return item
@@ -578,6 +669,7 @@
// 鑾峰彇鎼滅储鏉′欢鍊�
let search = []
+ let error = null
searchlist.forEach(item => {
if (item.type === 'group') {
search.push({
@@ -586,7 +678,9 @@
value: values[item.datefield] || '',
label: item.label,
match: 'between',
- required: item.required
+ required: item.required,
+ precision: 'day',
+ forbid: item.$forbid
}, {
type: 'group',
key: item.field,
@@ -598,10 +692,39 @@
})
} else {
let type = item.type
+ let val = values[item.field] !== undefined ? values[item.field] : ''
+
if (type === 'multiselect' || (type === 'checkcard' && item.multiple === 'true')) {
type = 'multi'
+ } else if (type === 'text' && !error) {
+ if (/'/ig.test(val)) {
+ error = `鎼滅储鏉′欢${item.label}涓紝涓嶅彲浣跨敤鑻辨枃鐘舵�佺殑鍗曞紩鍙枫�俙
+ } else if (/--/ig.test(val)) {
+ error = `鎼滅储鏉′欢${item.label}涓紝涓嶅彲浣跨敤 -- 銆俙
+ } else if (/(^|\s)select\s/ig.test(val)) {
+ error = `鎼滅储鏉′欢${item.label}涓紝涓嶅彲浣跨敤鍏抽敭瀛梥elect銆俙
+ } else if (/\sfrom(\s|\()/ig.test(val)) {
+ error = `鎼滅储鏉′欢${item.label}涓紝涓嶅彲浣跨敤鍏抽敭瀛梖rom銆俙
+ } else if (/(^|\s)insert\s/ig.test(val)) {
+ error = `鎼滅储鏉′欢${item.label}涓紝涓嶅彲浣跨敤鍏抽敭瀛梚nsert銆俙
+ } else if (/(^|\s)delete\s/ig.test(val)) {
+ error = `鎼滅储鏉′欢${item.label}涓紝涓嶅彲浣跨敤鍏抽敭瀛梔elete銆俙
+ } else if (/(^|\s)update\s/ig.test(val)) {
+ error = `鎼滅储鏉′欢${item.label}涓紝涓嶅彲浣跨敤鍏抽敭瀛梪pdate銆俙
+ } else if (/(^|\s)where\s/ig.test(val)) {
+ error = `鎼滅储鏉′欢${item.label}涓紝涓嶅彲浣跨敤鍏抽敭瀛梬here銆俙
+ } else if (/(^|\s)drop\s/ig.test(val)) {
+ error = `鎼滅储鏉′欢${item.label}涓紝涓嶅彲浣跨敤鍏抽敭瀛梔rop銆俙
+ } else if (/(^|\s)exec\s/ig.test(val)) {
+ error = `鎼滅储鏉′欢${item.label}涓紝涓嶅彲浣跨敤鍏抽敭瀛梕xec銆俙
+ } else if (/(^|\s)truncate\s/ig.test(val)) {
+ error = `鎼滅储鏉′欢${item.label}涓紝涓嶅彲浣跨敤鍏抽敭瀛梩runcate銆俙
+ } else if (/(^|\s)while\s/ig.test(val)) {
+ error = `鎼滅储鏉′欢${item.label}涓紝涓嶅彲浣跨敤鍏抽敭瀛梬hile銆俙
+ } else if (/(^|\s)for\s/ig.test(val)) {
+ error = `鎼滅储鏉′欢${item.label}涓紝涓嶅彲浣跨敤鍏抽敭瀛梖or銆俙
+ }
}
- let val = values[item.field] !== undefined ? values[item.field] : ''
if (typeof(val) === 'string') {
val = val.replace(/(^\s*|\s*$)/ig, '')
@@ -613,12 +736,14 @@
value: val,
label: item.label,
match: item.match,
- required: item.required
+ required: item.required,
+ precision: item.precision || 'day',
+ forbid: item.$forbid
})
}
})
- return search
+ return {searches: search, error}
}
handleOk = (values) => {
@@ -630,6 +755,13 @@
let val = this.record[item.field]
if (val || val === 0) {
+ if (item.precision === 'hour') {
+ if (/,/ig.test(val)) {
+ val = val.split(',').map(m => m + ':00').join(',')
+ } else {
+ val = val + ':00'
+ }
+ }
advanceValues.push({field: item.field, type: item.type, label: item.label, value: val})
}
})
@@ -646,7 +778,7 @@
}
render() {
- const { float, searchStyle, visible, searchlist, showAdvanced, advanceValues, adModelWidth } = this.state
+ const { visible, searchlist, advanceValues, setting } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -660,26 +792,26 @@
return (
<>
- <Form {...formItemLayout} className={`top-search ${float}`} style={searchStyle}>
+ <Form {...formItemLayout} className={`top-search mk-float-${setting.float}`} style={setting.style}>
<Row gutter={24}>{this.getFields()}</Row>
- <Row gutter={24}>
- {showAdvanced ? <div className="advanced-list">
+ {advanceValues.length && (setting.advanceType !== 'pulldown' || (setting.advanceType === 'pulldown' && !visible)) ? <Row gutter={24}>
+ <div className="advanced-list">
{advanceValues.map((item, index) => {
return (
<div key={index}>
<span>{item.label}: </span>
<span className="advance-value">{item.value}</span>
- <Icon type="close" onClick={() => this.closeAdvanceForm(item)} />
+ <CloseOutlined onClick={() => this.closeAdvanceForm(item)} />
</div>)
})}
- </div> : null}
- </Row>
+ </div>
+ </Row> : null}
</Form>
- <Modal
+ {setting.advanceType === 'modal' ? <Modal
title="楂樼骇鎼滅储"
maskClosable={false}
visible={visible}
- width={adModelWidth}
+ width={setting.advWidth}
closable={false}
footer={null}
destroyOnClose
@@ -690,7 +822,25 @@
advanceSubmit={this.handleOk}
handleClose={() => this.setState({visible: false})}
/>
- </Modal>
+ </Modal> : null}
+ {setting.advanceType === 'drawer' ? <Drawer
+ title="楂樼骇鎼滅储"
+ className="mk-search-drawer"
+ width={setting.advWidth}
+ height={setting.advHeight}
+ maskClosable={false}
+ onClose={() => this.setState({visible: false})}
+ visible={visible}
+ placement={setting.placement}
+ destroyOnClose
+ >
+ <MutilForm
+ searchlist={searchlist}
+ record={this.record}
+ advanceSubmit={this.handleOk}
+ handleClose={() => this.setState({visible: false})}
+ />
+ </Drawer> : null}
</>
)
}
--
Gitblit v1.8.0