From 31871ca836e6fcbea9b1c54e2ec15f49667bf093 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 23 十二月 2022 14:14:04 +0800 Subject: [PATCH] 2022-12-23 --- src/menu/components/search/main-search/index.jsx | 152 ++++++++++++++++++++++++++++---------------------- 1 files changed, 84 insertions(+), 68 deletions(-) diff --git a/src/menu/components/search/main-search/index.jsx b/src/menu/components/search/main-search/index.jsx index 0531cbe..8407229 100644 --- a/src/menu/components/search/main-search/index.jsx +++ b/src/menu/components/search/main-search/index.jsx @@ -1,24 +1,27 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Modal, notification, Popover, Icon, Switch } from 'antd' +import { Modal, notification, Popover, Switch } from 'antd' +import { PlusOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' import Utils from '@/utils/utils.js' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import { getSearchForm } from '@/templates/zshare/formconfig' import { resetStyle } from '@/utils/utils-custom.js' +import { getTables } from '@/utils/utils-custom.js' +import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' -import SearchForm from '@/templates/sharecomponent/searchcomponent/searchform' import DragElement from './dragsearch' +import getWrapForm from './options' import MKEmitter from '@/utils/events.js' import './index.scss' const { confirm } = Modal -const WrapComponent = asyncIconComponent(() => import('./wrapsetting')) +const NormalForm = asyncIconComponent(() => import('@/components/normalform')) +const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent')) +const SearchForm = asyncIconComponent(() => import('@/templates/sharecomponent/searchcomponent/searchform')) const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent')) @@ -30,7 +33,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, appType: sessionStorage.getItem('appType'), searchlist: null, // 鎼滅储鏉′欢闆� sqlVerifing: false, // sql楠岃瘉涓� @@ -49,13 +51,10 @@ let _card = { uuid: card.uuid, type: card.type, - floor: card.floor, - tabId: card.tabId || '', - parentId: card.parentId || '', width: 24, name: card.name, subtype: card.subtype, - wrap: { name: card.name, width: 24, show: 'true', float: 'left' }, + wrap: { name: card.name, width: 24, show: this.state.appType === 'mob' ? 'false' : 'true', float: 'left' }, style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' }, @@ -73,7 +72,7 @@ } componentDidMount () { - MKEmitter.addListener('submitStyle', this.getStyle) + MKEmitter.addListener('plusSearch', this.plusSearch) } /** @@ -83,43 +82,41 @@ this.setState = () => { return } - MKEmitter.removeListener('submitStyle', this.getStyle) + MKEmitter.removeListener('plusSearch', this.plusSearch) } shouldComponentUpdate (nextProps, nextState) { return !is(fromJS(this.state), fromJS(nextState)) } - getStyle = (comIds, style) => { - const { card } = this.state - - if (comIds.length !== 1 || comIds[0] !== card.uuid) return - - let _card = {...card, style} + getStyle = (style) => { + let _card = {...this.state.card, style} this.setState({ card: _card }) - this.props.updateConfig(_card) + this.updateComponent(_card) } changeStyle = () => { const { card } = this.state - MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin'], card.style) + MKEmitter.emit('changeStyle', ['background', 'border', 'padding', 'margin', 'shadow', 'clear'], card.style, this.getStyle) } /** * @description 鍗$墖琛屽灞備俊鎭洿鏂帮紙鏁版嵁婧愶紝鏍峰紡绛夛級 */ updateComponent = (component) => { - this.setState({ - card: component - }) + component.$tables = getTables(component) component.width = component.wrap.width component.name = component.wrap.name + + this.setState({ + card: component + }) this.props.updateConfig(component) } @@ -149,9 +146,7 @@ this.setState({card: _card}) this.handleSearch(newcell) } else { - this.setState({card: _card}, ()=> { - this.props.updateConfig(_card) - }) + this.updateComponent(_card) } } @@ -163,12 +158,14 @@ let linkableFields = [] card.search.forEach(item => { - if (item.uuid !== cell.uuid && (item.type === 'select' || item.type === 'link')) { - linkableFields.push({ - value: item.field, - text: item.label - }) - } + if (item.uuid === cell.uuid) return + if (!['select', 'link', 'checkcard'].includes(item.type)) return + if (item.type === 'checkcard' && item.multiple === 'true') return + + linkableFields.push({ + value: item.field, + text: item.label + }) }) this.setState({ @@ -210,7 +207,6 @@ this.searchFormRef.handleConfirm().then(res => { let fieldrepet = false // 瀛楁閲嶅 - let labelrepet = false // 鎻愮ず鏂囧瓧閲嶅 card.search = card.search.map(item => { // 鏁版嵁鏇存柊鍙婇噸澶嶆娴� if (item.uuid !== res.uuid && res.field && item.field) { @@ -236,8 +232,6 @@ if (setFields.length < itemFields.length + resFields.length && (res.type !== 'date' || item.type !== 'date')) { fieldrepet = true - } else if (item.label === res.label) { - labelrepet = true } } @@ -255,13 +249,6 @@ duration: 5 }) return - } else if (labelrepet) { - notification.warning({ - top: 92, - message: '鍚嶇О宸插瓨鍦�!', - duration: 5 - }) - return } if (['select', 'multiselect', 'link', 'checkcard'].includes(res.type) && res.resourceType === '1' && /\s/.test(res.dataSource)) { @@ -275,24 +262,24 @@ LText: res.dataSource } - param.LText = param.LText.replace(/@\$|\$@/ig, '') + param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + param.LText = param.LText.replace(/@\$|\$@/ig, '').replace(/@(BID|ID|LoginUID|SessionUid|UserID|Appkey|time_id)@/ig, `'${param.timestamp}'`) + param.LText = param.LText.replace(/\n/g, ' ') param.LText = Utils.formatOptions(param.LText) - param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') param.secretkey = Utils.encrypt('', param.timestamp) if (window.GLOB.mainSystemApi && res.database === 'sso') { param.rduri = window.GLOB.mainSystemApi } - Api.getLocalConfig(param).then(result => { + Api.genericInterface(param).then(result => { if (result.status) { this.setState({ - card: card, sqlVerifing: false, visible: false }, ()=> { - this.props.updateConfig(card) + this.updateComponent(card) }) } else { this.setState({sqlVerifing: false}) @@ -304,10 +291,9 @@ }) } else { this.setState({ - card: card, visible: false }, ()=> { - this.props.updateConfig(card) + this.updateComponent(card) }) } }) @@ -317,20 +303,15 @@ * @description 鎼滅储鏉′欢鍒犻櫎 */ deleteElement = (cell) => { - const { dict } = this.state let _this = this confirm({ - content: dict['model.confirm'] + dict['model.delete'] + ` - ${cell.label} 锛焋, + content: `纭畾鍒犻櫎 - ${cell.label} 锛焋, onOk() { let _card = fromJS(_this.state.card).toJS() _card.search = _card.search.filter(item => item.uuid !== cell.uuid) - _this.setState({ - card: _card - }, () => { - _this.props.updateConfig(_card) - }) + _this.updateComponent(_card) }, onCancel() {} }) @@ -363,40 +344,76 @@ }) } + plusSearch = (MenuId, item, type) => { + const { card } = this.state + + if (MenuId !== card.uuid) return + + let _card = fromJS(card).toJS() + + if (type === 'simple') { + _card.search.push(item) + + this.updateComponent(_card) + } else if (type === 'multil') { + _card.search.push(...item) + + this.updateComponent(_card) + } + } + + getWrapForms = () => { + const { wrap, action } = this.state.card + + return getWrapForm(wrap, action) + } + + updateWrap = (res) => { + this.updateComponent({...this.state.card, wrap: res}) + } + clickComponent = (e) => { if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { e.stopPropagation() - MKEmitter.emit('clickComponent', this.state.card) + MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { + let _card = {...this.state.card} + _card.style = {..._card.style, ...style} + + this.updateComponent(_card) + }) } } render() { - const { dict, card, visible, sqlVerifing, showField } = this.state + const { card, visible, sqlVerifing, showField } = this.state let _style = resetStyle(card.style) return ( - <div className={`main-search-edit-list ${card.wrap.float} ${card.wrap.show || ''}`} onClick={this.clickComponent} id={card.uuid} style={_style}> - <Switch checkedChildren={dict['model.switch.open']} size="small" unCheckedChildren={dict['model.switch.close']} defaultChecked={showField} onChange={this.onFieldChange} /> + <div className={`main-search-edit-list ${card.wrap.float} ${showField ? 'show-field' : ''}`} onClick={this.clickComponent} id={card.uuid} style={_style}> + <FieldsComponent config={card} type="search" /> + <Switch checkedChildren="寮�" size="small" unCheckedChildren="鍏�" defaultChecked={showField} onChange={this.onFieldChange} /> <DragElement list={card.search} - showField={showField} + setting={card.wrap} handleList={this.handleList} handleMenu={this.handleSearch} deleteMenu={this.deleteElement} - placeholder={dict['header.form.search.placeholder']} /> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞" onClick={this.addSearch} type="plus" /> - <WrapComponent config={card} updateConfig={this.updateComponent}/> + <PlusOutlined className="plus" title="娣诲姞" onClick={this.addSearch}/> + <NormalForm title="鎼滅储璁剧疆" width={800} update={this.updateWrap} getForms={this.getWrapForms}> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> + </NormalForm> <CopyComponent type="mainsearch" card={card}/> <PasteComponent config={card} options={['search', 'form']} updateConfig={this.checkComponent} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> - <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> + <DeleteOutlined className="close" onClick={() => this.props.deletecomponent(card.uuid)} /> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> + <div className="component-name"><div className="center">{card.name}</div></div> {/* 缂栬緫鎼滅储鏉′欢 */} <Modal title="鎼滅储鏉′欢-缂栬緫" @@ -409,7 +426,6 @@ destroyOnClose > <SearchForm - dict={dict} card={this.state.editcard} formlist={this.state.formlist} inputSubmit={this.handleSubmit} -- Gitblit v1.8.0