From b8aa5da1b2873bea760483cc5ab335fde9fb6de6 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 12 五月 2022 18:15:56 +0800 Subject: [PATCH] 2022-05-12 --- src/menu/components/search/main-search/index.jsx | 80 +++++++++++++++++++++++++++++++--------- 1 files changed, 62 insertions(+), 18 deletions(-) diff --git a/src/menu/components/search/main-search/index.jsx b/src/menu/components/search/main-search/index.jsx index 0531cbe..78e8eb4 100644 --- a/src/menu/components/search/main-search/index.jsx +++ b/src/menu/components/search/main-search/index.jsx @@ -1,7 +1,8 @@ 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' @@ -10,15 +11,18 @@ import enUS from '@/locales/en-US/model.js' import { getSearchForm } from '@/templates/zshare/formconfig' import { resetStyle } 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')) @@ -49,13 +53,12 @@ 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' }, @@ -74,6 +77,7 @@ componentDidMount () { MKEmitter.addListener('submitStyle', this.getStyle) + MKEmitter.addListener('plusSearch', this.plusSearch) } /** @@ -84,6 +88,7 @@ return } MKEmitter.removeListener('submitStyle', this.getStyle) + MKEmitter.removeListener('plusSearch', this.plusSearch) } shouldComponentUpdate (nextProps, nextState) { @@ -107,7 +112,7 @@ changeStyle = () => { const { card } = this.state - MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin'], card.style) + MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin', 'shadow'], card.style) } /** @@ -163,12 +168,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 === card.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({ @@ -363,6 +370,40 @@ }) } + 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.setState({ + card: _card, + }, () => { + this.props.updateConfig(_card) + }) + } else if (type === 'multil') { + _card.search.push(...item) + this.setState({ + card: _card, + }, () => { + this.props.updateConfig(_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() @@ -376,6 +417,7 @@ return ( <div className={`main-search-edit-list ${card.wrap.float} ${card.wrap.show || ''}`} onClick={this.clickComponent} id={card.uuid} style={_style}> + <FieldsComponent config={card} type="search" /> <Switch checkedChildren={dict['model.switch.open']} size="small" unCheckedChildren={dict['model.switch.close']} defaultChecked={showField} onChange={this.onFieldChange} /> <DragElement list={card.search} @@ -383,20 +425,22 @@ 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="鎼滅储鏉′欢-缂栬緫" -- Gitblit v1.8.0