| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Icon, Tooltip, Modal, notification } from 'antd' |
| | | import { Icon, Tooltip, Modal, notification, Switch } from 'antd' |
| | | import moment from 'moment' |
| | | |
| | | import Api from '@/api' |
| | |
| | | |
| | | 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, |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | searchlist: null, // 搜索条件集 |
| | | sqlVerifing: false, // sql验证中 |
| | | visible: false, // 模态框控制 |
| | | showField: false, |
| | | card: null // 编辑中元素 |
| | | } |
| | | |
| | |
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
| | | 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))) { |
| | | if (!is(fromJS(nextProps.config.search), fromJS(this.props.config.search)) && !is(fromJS(nextProps.config.search), fromJS(searchlist))) { |
| | | let len = nextProps.config.search.length |
| | | let item = nextProps.config.search[len - 1] |
| | | if (item && item.focus) { |
| | | this.handleSearch(item) |
| | | } |
| | | this.setState({searchlist: fromJS(nextProps.config.search).toJS()}) |
| | | } |
| | | } |
| | |
| | | this.setState({ |
| | | visible: true, |
| | | card: card, |
| | | formlist: getSearchForm(card, this.props.sysRoles, linkableFields) |
| | | formlist: getSearchForm(card, linkableFields) |
| | | }) |
| | | } |
| | | |
| | |
| | | * @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, |
| | |
| | | * 4、下拉菜单数据源语法验证 |
| | | */ |
| | | handleSubmit = () => { |
| | | const { optionLibs, menu, config } = this.props |
| | | const { config } = this.props |
| | | let _searchlist = fromJS(this.state.searchlist).toJS() |
| | | |
| | | this.searchFormRef.handleConfirm().then(res => { |
| | |
| | | if (fieldrepet) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: this.state.dict['model.field.exist'] + ' !', |
| | | message: '字段已存在!', |
| | | 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.resourceType === '1' && /\s/.test(res.dataSource)) { |
| | | this.setState({ |
| | | sqlVerifing: true |
| | | }) |
| | | |
| | | let param = { |
| | | func: 's_debug_sql', |
| | | exec_type: 'y', |
| | | LText: res.dataSource |
| | | } |
| | | |
| | | param.LText = param.LText.replace(/@\$|\$@/ig, '') |
| | | |
| | | param.LText = Utils.formatOptions(param.LText) |
| | | param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000' |
| | | param.secretkey = Utils.encrypt(param.LText, param.timestamp) |
| | | 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 |
| | |
| | | searchlist: _searchlist, |
| | | visible: false |
| | | }, ()=> { |
| | | this.props.updatesearch({...config, search: _searchlist}, optionLibs) |
| | | this.props.updatesearch({...config, search: _searchlist}) |
| | | }) |
| | | } else { |
| | | this.setState({sqlVerifing: false}) |
| | |
| | | searchlist: _searchlist, |
| | | visible: false |
| | | }, ()=> { |
| | | this.props.updatesearch({...config, search: _searchlist}, optionLibs) |
| | | this.props.updatesearch({...config, search: _searchlist}) |
| | | }) |
| | | } |
| | | }) |
| | |
| | | }) |
| | | } |
| | | |
| | | onFieldChange = () => { |
| | | const { showField } = this.state |
| | | |
| | | this.setState({ |
| | | showField: !showField |
| | | }) |
| | | } |
| | | |
| | | |
| | | /** |
| | | * @description 组件销毁,清除state更新 |
| | | */ |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { dict, searchlist, visible, sqlVerifing, card } = this.state |
| | | const { dict, searchlist, visible, sqlVerifing, card, showField } = this.state |
| | | |
| | | return ( |
| | | <div className="model-table-search-list"> |
| | | <div className={'model-table-search-list length' + searchlist.length}> |
| | | <Tooltip placement="bottomLeft" overlayClassName="middle" title={dict['model.tooltip.search.guide']}> |
| | | <Icon type="question-circle" /> |
| | | </Tooltip> |
| | | <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={showField} onChange={this.onFieldChange} /> |
| | | <DragElement |
| | | list={searchlist} |
| | | showField={showField} |
| | | handleList={this.handleList} |
| | | handleMenu={this.handleSearch} |
| | | deleteMenu={this.deleteElement} |
| | |
| | | /> |
| | | {/* 编辑搜索条件 */} |
| | | <Modal |
| | | title={dict['model.searchCriteria'] + '-' + (card && card.copyType === 'search' ? dict['model.copy'] : dict['model.edit'])} |
| | | title={card && card.copyType === 'search' ? '搜索条件-复制' : '搜索条件-编辑'} |
| | | visible={visible} |
| | | width={850} |
| | | maskClosable={false} |
| | |
| | | card={this.state.card} |
| | | formlist={this.state.formlist} |
| | | inputSubmit={this.handleSubmit} |
| | | optionLibs={this.props.optionLibs} |
| | | wrappedComponentRef={(inst) => this.searchFormRef = inst} |
| | | /> |
| | | </Modal> |