From ed719ec5d86d3373ee95df8262eba3f456f94d60 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 12 六月 2024 17:28:09 +0800 Subject: [PATCH] 2024-06-12 --- src/templates/sharecomponent/searchcomponent/index.jsx | 236 ++++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 146 insertions(+), 90 deletions(-) diff --git a/src/templates/sharecomponent/searchcomponent/index.jsx b/src/templates/sharecomponent/searchcomponent/index.jsx index aeb9569..f6e9073 100644 --- a/src/templates/sharecomponent/searchcomponent/index.jsx +++ b/src/templates/sharecomponent/searchcomponent/index.jsx @@ -1,37 +1,34 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Tooltip, Modal, notification } from 'antd' -import moment from 'moment' +import { Modal, notification, Switch } from 'antd' 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 SearchForm from './searchform' +import asyncComponent from '@/utils/asyncComponent' +import MKEmitter from '@/utils/events.js' import DragElement from './dragsearch' +import SearchForm from './searchform' +import SettingForm from './settingform' import './index.scss' const { confirm } = Modal +const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent')) + class SearchComponent extends Component { static propTpyes = { - menu: PropTypes.object, // 褰撳墠鑿滃崟淇℃伅 config: PropTypes.object, // 閰嶇疆淇℃伅 - pasteContent: PropTypes.object, // 绮樿创閰嶇疆淇℃伅 - optionLibs: PropTypes.any, // 涓嬫媺瀛楀吀 - sysRoles: PropTypes.array, // 瑙掕壊鍒楄〃锛岄粦鍚嶅崟 updatesearch: PropTypes.func // 鏇存柊 } state = { - dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, - searchlist: null, // 鎼滅储鏉′欢闆� - sqlVerifing: false, // sql楠岃瘉涓� - visible: false, // 妯℃�佹鎺у埗 - card: null // 缂栬緫涓厓绱� + searchlist: null, + sqlVerifing: false, + visible: false, + showField: false, + setVisible: false, + card: null } /** @@ -43,17 +40,36 @@ }) } - /** - * @description 鐩戝惉鍒版悳绱㈡潯浠跺鍒舵椂锛岃Е鍙戞悳绱㈡潯浠剁紪杈� - */ - UNSAFE_componentWillReceiveProps (nextProps) { + componentDidMount () { + MKEmitter.addListener('plusSearch', this.plusSearch) + // MKEmitter.addListener('revert', this.revert) + } + + // revert = () => { + // this.setState({searchlist: fromJS(this.props.config.search).toJS()}) + // } + + plusSearch = (MenuId, item, type) => { + const { config } = this.props const { searchlist } = this.state - if (nextProps.pasteContent && nextProps.pasteContent.copyType === 'search') { - this.setState({searchlist: [...searchlist, nextProps.pasteContent]}) - this.handleSearch(nextProps.pasteContent) - } else if (!is(fromJS(nextProps.config.search), fromJS(this.props.config.search)) && !is(fromJS(nextProps.config.search), fromJS(searchlist))) { - this.setState({searchlist: fromJS(nextProps.config.search).toJS()}) + if (MenuId !== config.uuid) return + + if (type === 'simple') { + this.setState({ + searchlist: [...searchlist, item], + }, () => { + this.handleSearch(item) + }) + } else if (type === 'multil') { + let list = [...searchlist, ...item] + list = list.filter(item => !item.origin) // 鍘婚櫎绯荤粺椤� + + this.setState({ + searchlist: list + }, () => { + this.props.updatesearch({...config, search: list}) + }) } } @@ -77,22 +93,32 @@ * @description 鎼滅储鏉′欢缂栬緫锛岃幏鍙栨悳绱㈡潯浠惰〃鍗曚俊鎭� */ handleSearch = (card) => { + const { config } = this.props const { searchlist } = this.state let linkableFields = [] searchlist.forEach(item => { - if (item.uuid !== card.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 + }) }) + + let columns = null + if (config.columns && config.columns.length) { + columns = config.columns.map(item => { + return {key: item.uuid, text: item.field, value: item.field, label: item.label} + }) + } this.setState({ visible: true, card: card, - formlist: getSearchForm(card, this.props.sysRoles, linkableFields) + formlist: getSearchForm(card, linkableFields, columns) }) } @@ -100,18 +126,18 @@ * @description 鍙栨秷淇濆瓨锛屽鏋滃厓绱犱负鏂版坊鍏冪礌锛屽垯浠庡簭鍒椾腑鍒犻櫎 */ editModalCancel = () => { - const { card } = this.state + const { config } = this.props + const { card, searchlist } = this.state if (card.focus) { - let searchlist = fromJS(this.state.searchlist).toJS() - - searchlist = searchlist.filter(item => item.uuid !== card.uuid) + let _searchlist = searchlist.filter(item => item.uuid !== card.uuid) this.setState({ card: null, - searchlist: searchlist, + searchlist: _searchlist, visible: false }) + this.props.updatesearch({...config, search: _searchlist}) } else { this.setState({ card: null, @@ -128,12 +154,11 @@ * 4銆佷笅鎷夎彍鍗曟暟鎹簮璇硶楠岃瘉 */ handleSubmit = () => { - const { optionLibs, menu, config } = this.props + const { config } = this.props let _searchlist = fromJS(this.state.searchlist).toJS() this.searchFormRef.handleConfirm().then(res => { let fieldrepet = false // 瀛楁閲嶅 - let labelrepet = false // 鎻愮ず鏂囧瓧閲嶅 _searchlist = _searchlist.filter(item => !item.origin || item.uuid === res.uuid) // 鍘婚櫎绯荤粺椤� @@ -161,8 +186,6 @@ if (setFields.length < itemFields.length + resFields.length && (res.type !== 'date' || item.type !== 'date')) { fieldrepet = true - } else if (item.label === res.label) { - labelrepet = true } } @@ -176,57 +199,29 @@ if (fieldrepet) { notification.warning({ top: 92, - message: this.state.dict['model.field.exist'] + ' !', - duration: 5 - }) - return - } else if (labelrepet) { - notification.warning({ - top: 92, - message: this.state.dict['model.name.exist'] + ' !', + message: '瀛楁宸插瓨鍦�!', duration: 5 }) return } - if ( res.options && res.options.length > 0 ) { // 涓嬫媺鑿滃崟鍙�夐泦鍚� - optionLibs.set(menu.MenuID + res.uuid, { - uuid: menu.MenuID + res.uuid, - label: res.label, - parname: menu.MenuName, - type: 'search', - options: res.options - }) - } - - if ((res.type === 'select' || res.type === 'multiselect' || res.type === 'link') && res.resourceType === '1' && /\s/.test(res.dataSource)) { + if (['checkcard', 'select', 'multiselect', 'link'].includes(res.type) && res.resourceType === '1' && res.database !== 'sso' && /\s/.test(res.dataSource)) { this.setState({ sqlVerifing: true }) - let param = { - func: 's_debug_sql', - LText: res.dataSource - } - - param.LText = param.LText.replace(/@\$|\$@/ig, '') + let sql = `declare @mk_departmentcode nvarchar(512),@mk_organization nvarchar(512),@mk_user_type nvarchar(20) + ${res.dataSource}` + sql = sql.replace(/@\$|\$@/ig, '') - param.LText = Utils.formatOptions(param.LText) - param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') - param.secretkey = Utils.encrypt(param.LText, param.timestamp) - - if (window.GLOB.mainSystemApi && res.database === 'sso') { - param.rduri = window.GLOB.mainSystemApi - } - - Api.getLocalConfig(param).then(result => { - if (result.status) { + Api.sDebug(sql).then(result => { + if (result.status || result.ErrCode === '-2') { this.setState({ sqlVerifing: false, searchlist: _searchlist, visible: false }, ()=> { - this.props.updatesearch({...config, search: _searchlist}, optionLibs) + this.props.updatesearch({...config, search: _searchlist}) }) } else { this.setState({sqlVerifing: false}) @@ -241,7 +236,7 @@ searchlist: _searchlist, visible: false }, ()=> { - this.props.updatesearch({...config, search: _searchlist}, optionLibs) + this.props.updatesearch({...config, search: _searchlist}) }) } }) @@ -252,11 +247,10 @@ */ deleteElement = (card) => { const { config } = this.props - const { dict } = this.state let _this = this confirm({ - content: dict['model.confirm'] + dict['model.delete'] + ` - ${card.label} 锛焋, + content: `纭畾鍒犻櫎 - ${card.label} 锛焋, onOk() { let _searchlist = fromJS(_this.state.searchlist).toJS() @@ -272,6 +266,40 @@ }) } + onFieldChange = () => { + const { showField } = this.state + + this.setState({ + showField: !showField + }) + } + + handleSetting = () => { + this.setState({ + setVisible: true + }) + } + + settingSubmit = () => { + const { config } = this.props + + this.settingFormRef.handleConfirm().then(res => { + this.setState({ + setVisible: false + }) + + let _config = null + + if (config.wrap) { // 鑷畾涔夐〉闈able + _config = {...config, wrap: {...config.wrap, ...res}} + } else { + _config = {...config, setting: {...config.setting, ...res}} + } + + this.props.updatesearch(_config) + }) + } + /** * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊 */ @@ -279,30 +307,45 @@ this.setState = () => { return } + // MKEmitter.removeListener('revert', this.revert) + MKEmitter.removeListener('plusSearch', this.plusSearch) } shouldComponentUpdate (nextProps, nextState) { - return !is(fromJS(this.state), fromJS(nextState)) + if (!is(fromJS(this.state), fromJS(nextState))) { + return true + } else if (this.props.config.wrap) { + return !is(fromJS(nextProps.config.wrap), fromJS(this.props.config.wrap)) + } else { + return !is(fromJS(nextProps.config.setting), fromJS(this.props.config.setting)) + } } render() { - const { dict, searchlist, visible, sqlVerifing, card } = this.state + const { config } = this.props + const { searchlist, visible, sqlVerifing, card, showField, setVisible } = this.state + + let size = '' + if (config.wrap && config.wrap.searchSize) { + size = ' mk-size-' + config.wrap.searchSize + } return ( - <div className="model-table-search-list"> - <Tooltip placement="bottomLeft" overlayClassName="middle" title={dict['model.tooltip.search.guide']}> - <Icon type="question-circle" /> - </Tooltip> + <div className={'model-table-search-list length' + searchlist.length + (showField ? ' show-field' : '') + size}> + <FieldsComponent config={{uuid: config.uuid, search: searchlist}} type="search" /> + <Switch className="switch-field-show" checkedChildren="寮�" unCheckedChildren="鍏�" defaultChecked={showField} onChange={this.onFieldChange} /> <DragElement list={searchlist} + setting={config.wrap || config.setting} handleList={this.handleList} handleMenu={this.handleSearch} deleteMenu={this.deleteElement} - placeholder={dict['header.form.search.placeholder']} + handleSetting={this.handleSetting} /> {/* 缂栬緫鎼滅储鏉′欢 */} <Modal - title={dict['model.searchCriteria'] + '-' + (card && card.copyType === 'search' ? dict['model.copy'] : dict['model.edit'])} + title={card && card.copyType === 'search' ? '鎼滅储鏉′欢-澶嶅埗' : '鎼滅储鏉′欢-缂栬緫'} + wrapClassName="mk-scroll-modal" visible={visible} width={850} maskClosable={false} @@ -312,14 +355,27 @@ destroyOnClose > <SearchForm - dict={dict} card={this.state.card} formlist={this.state.formlist} inputSubmit={this.handleSubmit} - optionLibs={this.props.optionLibs} wrappedComponentRef={(inst) => this.searchFormRef = inst} /> </Modal> + <Modal + title={'鎼滅储璁剧疆'} + visible={setVisible} + width={800} + maskClosable={false} + onOk={this.settingSubmit} + onCancel={() => this.setState({setVisible: false})} + destroyOnClose + > + <SettingForm + setting={config.wrap || config.setting} + inputSubmit={this.settingSubmit} + wrappedComponentRef={(inst) => this.settingFormRef = inst} + /> + </Modal> </div> ) } -- Gitblit v1.8.0