From 8d66ff34fae5b048a6b7923cc75d34f13a08be9d Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 02 八月 2022 11:42:43 +0800 Subject: [PATCH] Merge branch 'develop' --- src/tabviews/zshare/topSearch/index.jsx | 245 ++++++++++++++++++++++++++++++------------------ 1 files changed, 153 insertions(+), 92 deletions(-) diff --git a/src/tabviews/zshare/topSearch/index.jsx b/src/tabviews/zshare/topSearch/index.jsx index 58e423a..421f356 100644 --- a/src/tabviews/zshare/topSearch/index.jsx +++ b/src/tabviews/zshare/topSearch/index.jsx @@ -1,8 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { is, fromJS } from 'immutable' -import { Form, Row, Col, Button, notification, Modal } from 'antd' -import { CloseOutlined } from '@ant-design/icons' +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' @@ -10,8 +10,6 @@ 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' @@ -24,7 +22,6 @@ class MainSearch extends Component { static propTpyes = { BID: PropTypes.any, // 鐖剁骇Id锛岀敤浜庢煡璇笅鎷夐�夋嫨椤� - menuType: PropTypes.any, // 鑿滃崟鏉冮檺锛屾槸鍚︿负HS searchlist: PropTypes.array, // 鎼滅储鏉′欢鍒楄〃 config: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅(鑷畾涔夐〉闈�) setting: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅(鑷畾涔夐〉闈�) @@ -32,70 +29,89 @@ } 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 } record = {} UNSAFE_componentWillMount () { - const { config, menuType, searchlist, setting } = this.props + const { config, searchlist, setting } = this.props let _searchlist = [] let fieldMap = new Map() 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.labelCol = {style: {width: _setting.labelwidth + '%'}} + _setting.wrapperCol = {style: {width: (100 - _setting.labelwidth) + '%'}} + _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.labelCol = {style: {width: _setting.labelwidth + '%'}} + _setting.wrapperCol = {style: {width: (100 - _setting.labelwidth) + '%'}} + } + _setting.style = null + + if (config.type === 'search') { + _setting.float = config.wrap.float || 'left' + _setting.style = config.style + } else if (config.type === 'table' && (config.subtype === 'normaltable' || config.subtype === 'editable')) { + _setting.float = 'left' + } else { + _setting.float = 'right' + _setting.show = false + forbid = true + } } - if (adModelWidth < 100) { - adModelWidth = adModelWidth + 'vw' - } else { - adModelWidth = adModelWidth + 'px' + if (_setting.advanceType === 'drawer' && _setting.advWidth) { + 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' && _setting.advWidth) { + 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}) @@ -116,8 +132,8 @@ hasReqFields = true } - if (showButton && item.advanced) { - showAdvanced = true + if (item.advanced && !forbid) { + _setting.showAdv = true } else { item.advanced = false } @@ -143,6 +159,7 @@ 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(), @@ -157,7 +174,7 @@ let _option = Utils.getSelectQueryOptions(item) // 娴嬭瘯绯荤粺鍗曚釜璇锋眰 - if (menuType !== 'HS' && options.sysType === 'local' && !window.GLOB.systemType) { + if (!window.GLOB.mkHS && options.sysType === 'local' && !window.GLOB.systemType) { deForms.push({ ...item, arr_field: _option.field, @@ -206,16 +223,12 @@ }) this.setState({ - float, - showButton, - searchStyle, + setting: _setting, hasReqFields, - showAdvanced, - adModelWidth, advanceValues, searchlist: _list }, () => { - if (menuType !== 'HS' && options.sysType === 'local' && !window.GLOB.systemType) { + if (!window.GLOB.mkHS && options.sysType === 'local' && !window.GLOB.systemType) { this.improveSimpleSearch(deForms) } else { this.improveSearch(mainItems, localItems) @@ -223,16 +236,12 @@ }) } - shouldComponentUpdate (nextProps, nextState) { - return !is(fromJS(this.state), fromJS(nextState)) - } - // 鏌ヨ涓嬫媺鑿滃崟 improveSearch = (mainItems, localItems) => { - const { menuType, BID } = this.props + const { BID } = this.props let deffers = [] - if (menuType !== 'HS' && window.GLOB.systemType !== 'production') { + if (!window.GLOB.mkHS && window.GLOB.systemType !== 'production') { localItems = [...localItems, ...mainItems] mainItems = [] } @@ -255,7 +264,7 @@ param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') param.secretkey = Utils.encrypt(param.LText, param.timestamp) - if (menuType === 'HS') { // 浜戠鏁版嵁楠岃瘉 + if (window.GLOB.mkHS) { // 浜戠鏁版嵁楠岃瘉 param.open_key = Utils.encryptOpenKey(param.secretkey, param.timestamp) } @@ -293,7 +302,7 @@ mainparam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') mainparam.secretkey = Utils.encrypt(mainparam.LText, mainparam.timestamp) - if (menuType === 'HS') { // 浜戠鏁版嵁楠岃瘉 + if (window.GLOB.mkHS) { // 浜戠鏁版嵁楠岃瘉 mainparam.open_key = Utils.encryptOpenKey(mainparam.secretkey, mainparam.timestamp) if (options.cloudServiceApi) { mainparam.rduri = options.cloudServiceApi @@ -468,12 +477,11 @@ 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 = [ { @@ -483,9 +491,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} />) @@ -497,15 +503,13 @@ 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 config={item} onChange={(val) => this.cardChange(val, item)} /> } if (content) { fields.push( - <Col span={item.ratio || 6} key={index}> + <Col className="mk-search-col" span={item.ratio || 6} key={index}> <Form.Item - className={className} label={item.labelShow !== 'false' ? item.label : ''} labelCol={item.labelCol} wrapperCol={item.wrapperCol} @@ -520,34 +524,71 @@ } }) - 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.ratio} 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 = () => { @@ -572,7 +613,7 @@ notification.warning({ top: 92, - message: this.state.dict['form.required.input'] + labels.join('銆�') + ' !', + message: '璇疯緭鍏�' + labels.join('銆�') + ' !', duration: 3 }) return @@ -660,6 +701,8 @@ } 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)) { @@ -737,7 +780,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 }, @@ -751,10 +794,10 @@ 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}> @@ -763,14 +806,14 @@ <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 @@ -781,7 +824,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