From c7aece35a62b6e91fd98a625bf0e53f64bfbd18d Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 17 八月 2023 16:22:15 +0800 Subject: [PATCH] 2023-08-17 --- src/tabviews/zshare/topSearch/index.jsx | 1246 +++++++++++++++++++++++++++-------------------------------- 1 files changed, 570 insertions(+), 676 deletions(-) diff --git a/src/tabviews/zshare/topSearch/index.jsx b/src/tabviews/zshare/topSearch/index.jsx index be6e6fe..11d86ec 100644 --- a/src/tabviews/zshare/topSearch/index.jsx +++ b/src/tabviews/zshare/topSearch/index.jsx @@ -1,107 +1,153 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Form, Row, Col, Input, Button, Select, DatePicker, notification, Modal, Icon } from 'antd' +import { Form, Row, Col, Button, notification, Modal, Drawer } from 'antd' +import { CloseOutlined, DownOutlined } from '@ant-design/icons' import moment from 'moment' +import md5 from 'md5' import Api from '@/api' -import options from '@/store/options.js' -import DateGroup from '@/tabviews/zshare/dategroup' +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 MKEmitter from '@/utils/events.js' +import MKInput from './mkInput' import './index.scss' -const { MonthPicker, WeekPicker, RangePicker } = DatePicker - const MutilForm = asyncSpinComponent(() => import('./advanceform')) +const MKCheckCard = asyncComponent(() => import('./mkCheckCard')) +const MKCheck = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkCheck')) +const MKSwitch = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkSwitch')) +const MKRadio = asyncComponent(() => import('./mkRadio')) +const MKSelect = asyncComponent(() => import('./mkSelect')) +const DateGroup = asyncComponent(() => import('./dategroup')) +const MKDatePicker = asyncComponent(() => import('./mkDatePicker')) class MainSearch extends Component { static propTpyes = { BID: PropTypes.any, // 鐖剁骇Id锛岀敤浜庢煡璇笅鎷夐�夋嫨椤� - menuType: PropTypes.any, // 鑿滃崟鏉冮檺锛屾槸鍚︿负HS - searchlist: PropTypes.array, // 鎼滅储鏉′欢鍒楄〃 - config: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅(鑷畾涔夐〉闈�) - setting: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅(鑷畾涔夐〉闈�) - refreshdata: PropTypes.func // 鍒锋柊鏁版嵁 + config: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅 } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, - oriId: Utils.getuuid(), // 鎼滅储琛ㄥ崟Id - formId: '', // 鎼滅储琛ㄥ崟Id searchlist: null, // 鎼滅储椤� - reset: true, // 鎺у埗缁勫悎鎼滅储椤归噸缃� - float: '', // 娴姩 - showButton: true, // 鏄惁鏄剧ず鎼滅储鎸夐挳 - showAdvanced: false, // 鏄惁鏄剧ず楂樼骇鎼滅储 - searchStyle: null, // 鎼滅储鏉′欢鏍峰紡 - searchValues: {}, // 鎼滅储鏉′欢淇濆瓨鍊� + setting: {}, advanceValues: [], // 楂樼骇鎼滅储鏉′欢淇濆瓨鍊� visible: false, - adModelWidth: '1000px', + hasReqFields: false } + record = {} + sign = '' + UNSAFE_componentWillMount () { - const { config, menuType, searchlist, setting } = this.props + const { config } = this.props let _searchlist = [] - let _list = [] let fieldMap = new Map() let mainItems = [] // 浜戠鎴栧崟鐐规暟鎹� let localItems = [] // 鏈湴鏁版嵁 let deForms = [] // 娴嬭瘯绯荤粺锛屽崟涓姹� - let float = '' - let showButton = true - let searchStyle = null - let searchValues = {} let advanceValues = [] - let showAdvanced = false - let adModelWidth = 1000 - let formId = Utils.getuuid() - - if (setting && setting.advanceWidth) { - adModelWidth = setting.advanceWidth - } else if (config && config.wrap && config.wrap.advanceWidth) { - adModelWidth = config.wrap.advanceWidth + let linkFields = {} + let record = {} + let forbid = false // header涓笉璁剧疆楂樼骇鎼滅储 + let _setting = {showAdv: false, show: false, style: null} + + 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.borderRadius = config.wrap.borderRadius + _setting.resetContrl = config.wrap.resetContrl || 'init' } - - if (adModelWidth < 100) { - adModelWidth = adModelWidth + 'vw' + + if (config.type === 'search') { + _setting.float = config.wrap.float || 'left' + _setting.style = config.style + } else if (config.type === 'table') { + _setting.float = 'left' } else { - adModelWidth = adModelWidth + 'px' + _setting.float = 'right' + _setting.show = false + forbid = true } - 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 + 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 { - formId = '' - showButton = false - float = 'right' + _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' } } + _searchlist = fromJS(config.search).toJS() + _searchlist.forEach(item => { + 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@' } - fieldMap.set(item.field, item) - item.required = item.required === 'true' + if (item.advanced && !forbid) { + _setting.showAdv = true + } else { + item.advanced = false + } - if (['select', 'link', 'multiselect'].includes(item.type)) { - if (item.setAll === 'true' && item.type !== 'multiselect') { + if (item.advanced && 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' + } + } + if (['text', 'date', 'datemonth', 'dateweek', 'daterange'].includes(item.type)) { + advanceValues.push({field: item.field, type: item.type, label: item.label, value: val}) + } + } + + if (item.type === 'group') { + record[item.field] = item.initType + record[item.datefield] = item.initval + } else { + record[item.field] = item.initval + } + + if (['select', 'link', 'multiselect', 'checkcard', 'radio'].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: '' }) } @@ -109,49 +155,45 @@ if (item.resourceType === '1' && item.dataSource) { let _option = Utils.getSelectQueryOptions(item) + if (window.GLOB.debugger === true) { + console.info(_option.sql) + } + // 娴嬭瘯绯荤粺鍗曚釜璇锋眰 - if (menuType !== 'HS' && options.sysType === 'local' && !window.GLOB.systemType) { + if (!window.GLOB.mkHS && window.GLOB.sysType === 'local' && !window.GLOB.systemType) { deForms.push({ ...item, arr_field: _option.field, data_sql: Utils.formatOptions(_option.sql) }) } else { // 鍚堝苟璇锋眰锛屽尯鍒嗘湰鍦板強绯荤粺 - // 澶栬仈鏁版嵁搴撴浛鎹� - if (window.GLOB.externalDatabase !== null) { - _option.sql = _option.sql.replace(/@db@/ig, window.GLOB.externalDatabase) - } if (item.database === 'sso') { - mainItems.push(`select '${item.field}' as obj_name,'${_option.field}' as arr_field,'${window.btoa(window.encodeURIComponent(_option.sql))}' as LText`) + mainItems.push(`select '${item.field}' as obj_name,'${_option.field}' as arr_field,'${window.btoa(window.encodeURIComponent(_option.sql.replace(/%/ig, ' mpercent ')))}' as LText`) } else { - localItems.push(`select '${item.field}' as obj_name,'${_option.field}' as arr_field,'${window.btoa(window.encodeURIComponent(_option.sql))}' as LText`) + localItems.push(`select '${item.field}' as obj_name,'${_option.field}' as arr_field,'${window.btoa(window.encodeURIComponent(_option.sql.replace(/%/ig, ' mpercent ')))}' as LText`) } } } item.oriOptions = fromJS(item.options).toJS() + + if (item.type === 'checkcard' && item.multiple === 'dropdown' && item.resourceType === '0') { + this.resetCheckcard(item) + } } - _list.push(item) + fieldMap.set(item.field, item) }) - _list = _list.map(item => { - if (item.Hide === 'true') { - searchValues[item.field] = this.getInitValue(item) - } else if (showButton && item.advanced === 'true') { - showAdvanced = true - let _value = this.getInitValue(item) - searchValues[item.field] = _value + this.record = record - let _val = this.getAdvanceValue(item, _value) - if (_val) { - advanceValues.push({field: item.field, type: item.type, label: item.label, value: _val}) - } - } else if (item.type === 'group') { - searchValues[item.datefield] = this.getInitValue(item) - searchValues[item.field] = item.initval && item.initval[0] ? item.initval[0] : '' + let _list = _searchlist.map(item => { + if (item.hidden) return item + + 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) { @@ -160,7 +202,7 @@ message: '鏈煡璇㈠埌鎼滅储鏉′欢銆�' + item.label + '銆嬪叧鑱斿瓧娈碉紒', duration: 5 }) - item.supInitVal = '' + item.type = 'select' } else { item.supInitVal = supItem.initval item.options = item.oriOptions.filter(option => option.ParentID === supItem.initval || option.Value === '') @@ -171,125 +213,55 @@ }) this.setState({ - float, - formId, - showButton, - searchStyle, - searchValues, - showAdvanced, - adModelWidth, + setting: _setting, + hasReqFields: config.$s_req, advanceValues, searchlist: _list }, () => { - if (menuType !== 'HS' && options.sysType === 'local' && !window.GLOB.systemType) { + if (!window.GLOB.mkHS && window.GLOB.sysType === 'local' && window.GLOB.systemType !== 'production') { this.improveSimpleSearch(deForms) - } else { + } else if (mainItems.length > 0 || localItems.length > 0) { this.improveSearch(mainItems, localItems) } }) } - getInitValue = (item) => { - let value = item.initval || '' - - if (item.type === 'multiselect') { // 涓嬫媺澶氶�� - value = item.initval ? item.initval.split(',').filter(Boolean) : [] - } else if (item.type === 'date') { // 鏃堕棿鎼滅储 - value = item.initval ? moment().subtract(item.initval, 'days') : '' - } else if (item.type === 'datemonth') { - value = item.initval ? moment().subtract(item.initval, 'month') : '' - } else if (item.type === 'dateweek') { - value = item.initval ? moment().subtract(item.initval * 7, 'days') : '' - } else if (item.type === 'daterange') { - if (item.initval) { - try { - let _initval = JSON.parse(item.initval) - value = [moment().subtract(_initval[0], 'days'), moment().subtract(_initval[1], 'days')] - } catch { - value = '' - } + resetCheckcard = (item) => { + let pid = item.resourceType === '0' ? 'pid' : item.parentField + let _options = [] + let _others = [] + item.oriOptions.forEach(op => { + if (op[pid] === item.mark) { + _options.push(op) + } else { + _others.push(op) } - } else if (item.type === 'group' && item.initval && item.initval.length > 0) { - let _type = item.initval[0] - let _val = item.initval[1] + }) - if (_type === 'day') { - value = [moment().subtract(_val, 'days').format('YYYY-MM-DD'), moment().subtract(_val, 'days').format('YYYY-MM-DD')] - } else if (_type === 'week') { - value = [moment().subtract(_val * 7, 'days').startOf('week').format('YYYY-MM-DD'), moment().subtract(_val * 7, 'days').endOf('week').format('YYYY-MM-DD')] - } else if (_type === 'month') { - value = [moment().subtract(_val, 'month').startOf('month').format('YYYY-MM-DD'), moment().subtract(_val, 'month').endOf('month').format('YYYY-MM-DD')] - } else if (_type === 'quarter') { - let _differ = parseInt(moment().format('MM')) % 3 - let _pdiffer = 0 - let _ndiffer = 0 + _options = _options.map(op => { + op.children = [] - // 宸�艰绠� - switch(_differ) { - case 0: - _pdiffer = 2 - _ndiffer = 0 - break - case 1: - _pdiffer = 0 - _ndiffer = -2 - break - case 2: - _pdiffer = 1 - _ndiffer = -1 - break - default: + _others = _others.filter(cell => { + if (cell[pid] === op.$value) { + op.children.push(cell) + return false } + return true + }) - value = [moment().subtract(_pdiffer + _val * 3, 'month').startOf('month').format('YYYY-MM-DD'), moment().subtract(_ndiffer + _val * 3, 'month').endOf('month').format('YYYY-MM-DD')] - } else if (_type === 'year') { - let _year = parseInt(moment().format('YYYY')) - _val - value = [_year + '-01-01', _year + '-12-31'] - } else if (_type === 'customized') { - try { - _val = JSON.parse(_val) - } catch { - _val = [0, 0] - } - value = [moment().subtract(_val[0], 'days').format('YYYY-MM-DD'), moment().subtract(_val[1], 'days').format('YYYY-MM-DD')] - } - } + op.subIds = op.children.map(cell => cell.$value) - return value - } + return op + }) - getAdvanceValue = (item, value) => { - if (!value || (Array.isArray(value) && value.length === 0)) return '' - - let val = '' - if (item.type === 'multiselect') { - val = value.join(', ') - } else if (item.type === 'daterange') { - if (value[0] && value[1]) { - val = `${moment(value[0]).format('YYYY-MM-DD')} ~ ${moment(value[1]).format('YYYY-MM-DD')}` - } - } else if (item.type === 'dateweek') { - val = `${moment(value).startOf('week').format('YYYY-MM-DD')} ~ ${moment(value).endOf('week').format('YYYY-MM-DD')}` - } else if (item.type === 'date') { - val = moment(value).format('YYYY-MM-DD') - } else if (item.type === 'datemonth') { - val = moment(value).format('YYYY-MM') - } else { - val = value.replace(/(^\s*|\s*$)/ig, '') - } - - return val + item.oriOptions = _options + item.options = _options } // 鏌ヨ涓嬫媺鑿滃崟 improveSearch = (mainItems, localItems) => { - const { menuType, BID } = this.props + const { BID } = this.props let deffers = [] - - if (menuType !== 'HS' && window.GLOB.systemType !== 'production') { - localItems = [...localItems, ...mainItems] - mainItems = [] - } // 鏈湴璇锋眰 let param = { @@ -309,7 +281,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) } @@ -347,10 +319,10 @@ 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 + if (window.GLOB.cloudServiceApi) { + mainparam.rduri = window.GLOB.cloudServiceApi mainparam.userid = sessionStorage.getItem('CloudUserID') || '' mainparam.LoginUID = sessionStorage.getItem('CloudLoginUID') || '' } @@ -382,42 +354,7 @@ delete result.message delete result.status - let _searchlist = this.state.searchlist.map(item => { - if (['select', 'link', 'multiselect'].includes(item.type) && result[item.field] && result[item.field].length > 0) { - let options = result[item.field].map(cell => { - let _item = { - key: Utils.getuuid(), - Value: cell[item.valueField], - Text: cell[item.valueText] - } - - if (item.type === 'link') { - _item.ParentID = cell[item.linkField] - } - - return _item - }) - - item.oriOptions = [...item.oriOptions, ...options] - } - return item - }) - - this.setState({ - searchlist: _searchlist.map(item => { - if (item.type === 'link') { - 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.options = item.oriOptions - } - - return item - }) - }) + this.resetSearch(result) }) } @@ -425,7 +362,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, @@ -440,18 +377,24 @@ param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') param.secretkey = Utils.encrypt(param.LText, param.timestamp) + if (item.database === 'sso' && window.GLOB.mainSystemApi) { + param.rduri = window.GLOB.mainSystemApi + } + 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) }) ) }) @@ -468,301 +411,194 @@ delete result.message delete result.status - let _searchlist = this.state.searchlist.map(item => { - if (['select', 'link', 'multiselect'].includes(item.type) && result[item.field] && result[item.field].length > 0) { - let options = result[item.field].map(cell => { - let _item = { - key: Utils.getuuid(), - Value: cell[item.valueField], - Text: cell[item.valueText] - } + this.resetSearch(result) + }) + } - if (item.type === 'link') { - _item.ParentID = cell[item.linkField] - } - - return _item - }) - - item.oriOptions = [...item.oriOptions, ...options] - } - return item - }) - - this.setState({ - searchlist: _searchlist.map(item => { - if (item.type === 'link') { - 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.options = item.oriOptions + resetSearch = (result) => { + let _searchlist = fromJS(this.state.searchlist).toJS().map(item => { + if (['select', 'link', 'multiselect', 'checkcard', 'radio'].includes(item.type) && result[item.field] && result[item.field].length > 0) { + let options = [] + let map = new Map() + let all = false + result[item.field].forEach(cell => { + let _item = { + key: Utils.getuuid(), + ParentID: '' } - return item + if (item.linkField) { + _item.ParentID = cell[item.linkField] + } + + if (item.type !== 'checkcard') { + _item.Value = cell[item.valueField] + _item.Text = cell[item.valueText] + '' + + if (map.has(_item.ParentID + _item.Value)) return + if (!_item.Text) { + if (!all) { + _item.Text = '鍏ㄩ儴' + all = true + } else { + return + } + } + + map.set(_item.ParentID + _item.Value, 0) + } else { + _item.$value = cell[item.cardValField] + _item = {..._item, ...cell} + + if (item.urlField) { + _item.$url = cell[item.urlField] || '' + } else if (item.colorField) { + _item.$color = cell[item.colorField] || '' + } + + if (map.has(_item.ParentID + _item.$value)) return + + map.set(_item.ParentID + _item.$value, 0) + } + + options.push(_item) }) - }) - }) - } - resetform = (formlist, supfields, index, fieldsvalue) => { - index++ - let subfields = [] + item.oriOptions = [...item.oriOptions, ...options] - 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) + if (item.type === 'checkcard' && item.multiple === 'dropdown') { + this.resetCheckcard(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) } + + 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.oriOptions) { + item.options = item.oriOptions + } + return item }) - if (subfields.length === 0) { - this.searchChange() - return - } - - formlist = this.resetform(formlist, subfields, 0, fieldsvalue) - - if (Object.keys(fieldsvalue).length > 0) { - this.props.form.setFieldsValue(fieldsvalue) - } - this.setState({ - searchlist: formlist - }, () => { - this.searchChange() + searchlist: _searchlist }) + } + + recordChange = (val, defer, item) => { + this.record[item.field] = val + + if (defer) return + + if (item.linkFields) { + setTimeout(() => { + this.handleSubmit() + }, 1000) + } else { + setTimeout(() => { + this.handleSubmit() + }, 10) + } + } + + dateGroupChange = (val, type, item) => { + this.record[item.datefield] = val + this.record[item.field] = type + + 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, formId, showAdvanced } = this.state + const { visible, setting } = this.state const fields = [] this.state.searchlist.forEach((item, index) => { - if (item.Hide === 'true' || (showAdvanced && item.advanced === 'true')) return - - 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: item.initval, - rules: [ - { - required: item.required, - message: dict['form.required.input'] + item.label + '!' - } - ] - })(<Input placeholder={item.labelShow === 'false' ? item.label : ''} autoComplete="off" onPressEnter={this.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: item.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') { // 涓嬫媺澶氶�� - let _initval = item.initval ? item.initval.split(',').filter(Boolean) : [] - 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" - onChange={this.searchChange} - 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: item.initval ? moment().subtract(item.initval, 'days') : null, - rules: [ - { - required: item.required, - message: dict['form.required.select'] + item.label + '!' - } - ] - })( - <DatePicker onChange={this.searchChange} 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: item.initval ? moment().subtract(item.initval, 'month') : null, - rules: [ - { - required: item.required, - message: dict['form.required.select'] + item.label + '!' - } - ] - })( - <MonthPicker onChange={this.searchChange} 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: item.initval ? moment().subtract(item.initval * 7, 'days') : null, - rules: [ - { - required: item.required, - message: dict['form.required.select'] + item.label + '!' - } - ] - })( - <WeekPicker onChange={this.searchChange} getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} /> - )} - </Form.Item> - </Col> - ) - } else if (item.type === 'daterange') { - let _defaultValue = [null, null] + if (item.hidden || (item.advanced && (setting.advanceType !== 'pulldown' || !visible))) return - if (item.initval) { - try { - let _initval = JSON.parse(item.initval) - _defaultValue = [moment().subtract(_initval[0], 'days'), moment().subtract(_initval[1], 'days')] - } catch { - _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'} - onChange={this.searchChange} - getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} - /> - )} - </Form.Item> - </Col> - ) + let content = null + let field = item.field + + if (item.type === 'text') { + content = (<MKInput config={item} onInputSubmit={this.handleSubmit} />) + } else if (item.type === 'select' || item.type === 'link' || item.type === 'multiselect') { + content = (<MKSelect config={item} onChange={(val, defer) => this.recordChange(val, defer, item)} />) + } else if (item.type === 'date' || item.type === 'datemonth' || item.type === 'dateweek' || item.type === 'daterange') { + content = (<MKDatePicker config={item} onChange={(val) => this.recordChange(val, false, item)} />) } else if (item.type === 'group') { + field = item.datefield + content = <DateGroup position={index} config={item} onChange={(val, type) => this.dateGroupChange(val, type, item)} /> + } else if (item.type === 'checkcard') { + content = <MKCheckCard config={item} onChange={(val) => this.cardChange(val, item)} /> + } else if (item.type === 'radio') { + content = <MKRadio config={item} onChange={(val) => this.recordChange(val, false, item)} /> + } else if (item.type === 'check') { + content = <MKCheck config={item} onChange={(val) => this.recordChange(val, false, item)} /> + } else if (item.type === 'switch') { + content = <MKSwitch config={item} onChange={(val) => this.recordChange(val, false, item)} /> + } + + if (content) { fields.push( - <Col span={item.ratio || 6} key={index}> - <Form.Item label={item.labelShow !== 'false' ? item.label : ''} className={item.required ? 'group-required' : ''}> - <DateGroup reset={this.state.reset} position={index} card={item} onGroupChange={this.onGroupChange} /> + <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 + })(content)} </Form.Item> </Col> ) } }) - if (showButton) { + if (setting.show || setting.showAdv) { + let style = {} + if (setting.borderRadius) { + style.borderRadius = setting.borderRadius + } + fields.push( - <Col span={6} style={{ whiteSpace: 'nowrap' }} className="search-button" 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> - {showAdvanced ? <Button type="link" onClick={this.handleAdvance}> - 楂樼骇 + <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 style={style} type="primary" onClick={this.handleSubmit}> + 鎼滅储 + </Button> : null} + {setting.show ? <Button style={{ marginLeft: 8, ...style }} 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> @@ -773,54 +609,91 @@ } 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' + } + } + if (['text', 'date', 'datemonth', 'dateweek', 'daterange'].includes(item.type)) { + 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}) + } + } } - handleSearch = () => { - // 鍥炶溅鎴栫偣鍑绘悳绱� - this.props.form.validateFields((err, values) => { - if (!err) { - let searches = this.getFieldsValues(values) + handleSubmit = () => { + this.setState({}, () => { + this.props.form.validateFields((err, values) => { + if (err) return - let requireFields = searches.filter(item => item.required && (!item.value || item.value.length === 0)) - if (requireFields.length > 0) { - let labels = requireFields.map(item => item.label) - labels = Array.from(new Set(labels)) - + let { searches, error } = this.getFieldsValues(values) + + if (error) { notification.warning({ top: 92, - message: this.state.dict['form.required.input'] + labels.join('銆�') + ' !', + message: error, duration: 3 }) return - } - - this.props.refreshdata(searches) - } - }) - } - - onGroupChange = (values) => { - const { searchValues } = this.state - - this.setState({ - searchValues: {...searchValues, ...values} - }) - this.searchChange() - } - - searchChange = () => { - this.setState({}, () => { - this.props.form.validateFields((err, values) => { - if (!err) { - let searches = this.getFieldsValues(values) - - let requireFields = searches.filter(item => item.required && (!item.value || item.value.length === 0)) + } 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) + labels = Array.from(new Set(labels)) + + notification.warning({ + top: 92, + message: '璇疯緭鍏�' + labels.join('銆�') + ' !', + duration: 3 + }) return } + } + let sign = md5(JSON.stringify(searches)) + + if (sign === this.sign) return + + this.sign = sign + setTimeout(() => { + this.sign = '' + }, 2000) + + if (this.props.refreshdata) { this.props.refreshdata(searches) + } else { + window.GLOB.SearchBox.set(this.props.config.$searchId, searches) + MKEmitter.emit('searchRefresh', this.props.config.$searchId) } }) }) @@ -830,162 +703,168 @@ * @description 鎼滅储鏉′欢閲嶇疆 */ handleReset = () => { - const { showAdvanced } = this.state + const { setting } = this.state - let searchValues = {} + let record = {} let advanceValues = [] let searchlist = this.state.searchlist.map(item => { item.initval = item.oriInitval - - if (item.Hide === 'true') { - searchValues[item.field] = this.getInitValue(item) - } else if (showAdvanced && item.advanced === 'true') { - let _value = this.getInitValue(item) - searchValues[item.field] = _value - let _val = this.getAdvanceValue(item, _value) - if (_val) { - advanceValues.push({field: item.field, type: item.type, label: item.label, value: _val}) - } - } else if (item.type === 'group') { - searchValues[item.datefield] = this.getInitValue(item) - searchValues[item.field] = item.initval && item.initval[0] ? item.initval[0] : '' - } - return item - }) - - this.setState({searchlist, searchValues, advanceValues, reset: !this.state.reset}, () => { - this.props.form.resetFields() - this.props.form.validateFields((err, values) => { - if (!err) { - let searches = this.getFieldsValues(values) - - let requireFields = searches.filter(item => item.required && (!item.value || item.value.length === 0)) - if (requireFields.length > 0) { - let labels = requireFields.map(item => item.label) - labels = Array.from(new Set(labels)) - - notification.warning({ - top: 92, - message: this.state.dict['form.required.input'] + labels.join('銆�') + ' !', - duration: 3 - }) - return - } - - this.props.refreshdata(searches) - } - }) - }) - } - - getFieldsValues = (values) => { - const { searchValues, searchlist } = this.state - // 鑾峰彇鎼滅储鏉′欢鍊� - let search = [] - searchlist.forEach(item => { - let cell = { - type: item.type, - key: item.field.replace(/@tail@$/, ''), - label: item.label, - match: item.match || '=', - required: item.required, - value: '' - } - if ((item.Hide === 'true' || item.advanced === 'true')) { - cell.value = searchValues[item.field] || '' + if (setting.resetContrl === 'clear' && ['text', 'date', 'datemonth', 'dateweek', 'daterange'].includes(item.type)) { + item.initval = '' } if (item.type === 'group') { - cell.type = 'daterange' - cell.key = item.datefield - cell.value = searchValues[item.datefield] || '' - cell.match = 'between' - - search.push(cell) - if (item.transfer === 'true') { - let copy = fromJS(cell).toJS() - copy.type = 'group' - copy.key = item.field.replace(/@tail@$/, '') - copy.value = searchValues[item.field] || '' - copy.match = '=' - copy.forbid = true - search.push(copy) - } + record[item.datefield] = item.initval + record[item.field] = item.initType } else { - let _value = values[item.field] || cell.value || '' - if (!_value) { - if (item.type === 'multiselect') { - cell.value = [] - } - search.push(cell) - } else { - if (item.type === 'daterange') { - if (_value[0] && _value[1]) { - _value = [moment(_value[0]).format('YYYY-MM-DD'), moment(_value[1]).format('YYYY-MM-DD')] - } else { - _value = '' - } - } else if (item.type === 'dateweek') { - _value = [moment(_value).startOf('week').format('YYYY-MM-DD'), moment(_value).endOf('week').format('YYYY-MM-DD')] - } else if (item.type === 'date') { - _value = moment(_value).format('YYYY-MM-DD') - } else if (item.type === 'datemonth') { - _value = moment(_value).format('YYYY-MM') - } else if (item.type === 'multiselect') { - + record[item.field] = item.initval + } + if (item.advanced && item.initval) { + let val = item.initval + if (item.precision === 'hour') { + if (/,/ig.test(val)) { + val = val.split(',').map(m => m + ':00').join(',') } else { - _value = _value.replace(/(^\s*|\s*$)/ig, '') + val = val + ':00' } + } + if (['text', 'date', 'datemonth', 'dateweek', 'daterange'].includes(item.type)) { + advanceValues.push({field: item.field, type: item.type, label: item.label, value: val}) + } + } - cell.value = _value - search.push(cell) + return item + }) + + this.record = record + + this.setState({searchlist: [], advanceValues}, () => { + this.setState({searchlist}, () => { + this.handleSubmit() + }) + }) + } + + getFieldsValues = (vals) => { + const { searchlist } = this.state + let values = {...this.record, ...vals} + this.record = values + + // 鑾峰彇鎼滅储鏉′欢鍊� + let search = [] + let error = null + searchlist.forEach(item => { + if (item.type === 'group') { + search.push({ + type: 'daterange', + key: item.datefield, + value: values[item.datefield] || '', + label: item.label, + match: 'between', + required: item.required, + precision: 'day', + forbid: item.$forbid + }, { + type: 'group', + key: item.field, + value: values[item.field] || '', + label: item.label, + match: '=', + forbid: true, + required: item.required + }) + } 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銆俙 + } + } + + if (typeof(val) === 'string') { + val = val.replace(/(^\s*|\s*$)/ig, '') + } + + search.push({ + type: type, + key: item.field.replace(/@tail@$/, ''), + value: val, + label: item.label, + match: item.match, + required: item.required, + precision: item.precision || 'day', + forbid: item.$forbid + }) + } + }) + + return {searches: search, error} + } + + handleOk = (values) => { + this.record = {...this.record, ...values} + + 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' + } + } + if (['text', 'date', 'datemonth', 'dateweek', 'daterange'].includes(item.type)) { + advanceValues.push({field: item.field, type: item.type, label: item.label, value: val}) } } }) - return search - } - - handleOk = () => { - const { searchValues, searchlist } = this.state - - this.formRef.handleConfirm().then(res => { - let values = {} - let advanceValues = [] - searchlist.forEach(item => { - if (item.advanced === 'true' && item.Hide !== 'true') { - let _value = res[item.field] || '' - - if (!_value && item.type === 'multiselect') { - _value = [] - } else if (typeof(_value) === 'string') { - _value = _value.replace(/(^\s*|\s*$)/ig, '') - } - values[item.field] = _value - - let _val = this.getAdvanceValue(item, _value) - if (_val) { - advanceValues.push({field: item.field, type: item.type, label: item.label, value: _val}) - } - } - }) - this.setState({searchValues: {...searchValues, ...values}, advanceValues, visible: false}, () => { - this.handleSearch() - }) - }) + this.setState({advanceValues, visible: false}) + this.handleSubmit() } closeAdvanceForm = (cell) => { - const { searchValues, advanceValues } = this.state + this.record[cell.field] = '' - this.setState({searchValues: {...searchValues, [cell.field]: ''}, advanceValues: advanceValues.filter(item => item.field !== cell.field)}, () => { - this.handleSearch() - }) + this.setState({advanceValues: this.state.advanceValues.filter(item => item.field !== cell.field)}) + this.handleSubmit() } render() { - const { float, searchStyle, visible, searchlist, searchValues, showAdvanced, advanceValues, adModelWidth } = this.state + const { visible, searchlist, advanceValues, setting } = this.state const formItemLayout = { labelCol: { xs: { span: 24 }, @@ -999,40 +878,55 @@ return ( <> - <Form {...formItemLayout} className={`top-search ${float}`} style={searchStyle} id={this.state.formId || this.state.oriId}> + <Form {...formItemLayout} className={`mk-search-wrap 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} - onOk={this.handleOk} - cancelText={'鍏抽棴'} - onCancel={() => this.setState({visible: false})} + footer={null} destroyOnClose > <MutilForm - dict={this.state.dict} searchlist={searchlist} - searchValues={searchValues} - handleSearch={this.handleOk} - wrappedComponentRef={(inst) => this.formRef = inst} + record={this.record} + 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