| | |
| | | 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 = { |
| | |
| | | } |
| | | |
| | | state = { |
| | | dict: sessionStorage.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 |
| | | } |
| | | |
| | | /** |
| | |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @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 (!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) { |
| | | if (MenuId !== config.uuid) return |
| | | |
| | | if (type === 'simple') { |
| | | this.setState({ |
| | | searchlist: [...searchlist, item], |
| | | }, () => { |
| | | this.handleSearch(item) |
| | | } |
| | | this.setState({searchlist: fromJS(nextProps.config.search).toJS()}) |
| | | }) |
| | | } else if (type === 'replace') { |
| | | delete item.focus |
| | | this.setState({ |
| | | searchlist: searchlist.map(cell => { |
| | | if (cell.field && cell.field.toLowerCase() === item.field.toLowerCase()) { |
| | | return item |
| | | } |
| | | return cell |
| | | }), |
| | | }, () => { |
| | | 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}) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | * @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, linkableFields) |
| | | formlist: getSearchForm(card, linkableFields, columns) |
| | | }) |
| | | } |
| | | |
| | |
| | | |
| | | this.searchFormRef.handleConfirm().then(res => { |
| | | let fieldrepet = false // 字段重复 |
| | | let labelrepet = false // 提示文字重复 |
| | | |
| | | _searchlist = _searchlist.filter(item => !item.origin || item.uuid === res.uuid) // 去除系统项 |
| | | |
| | |
| | | |
| | | if (setFields.length < itemFields.length + resFields.length && (res.type !== 'date' || item.type !== 'date')) { |
| | | fieldrepet = true |
| | | } else if (item.label === res.label) { |
| | | labelrepet = true |
| | | } |
| | | } |
| | | |
| | |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } else if (labelrepet) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '名称已存在!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | 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', |
| | | exec_type: 'y', |
| | | 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.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, |
| | |
| | | */ |
| | | deleteElement = (card) => { |
| | | const { config } = this.props |
| | | const { dict } = this.state |
| | | let _this = this |
| | | let that = this |
| | | |
| | | confirm({ |
| | | content: dict['model.confirm'] + dict['model.delete'] + ` - ${card.label} ?`, |
| | | content: `确定删除 - ${card.label} ?`, |
| | | onOk() { |
| | | let _searchlist = fromJS(_this.state.searchlist).toJS() |
| | | let _searchlist = fromJS(that.state.searchlist).toJS() |
| | | |
| | | _searchlist = _searchlist.filter(item => item.uuid !== card.uuid) |
| | | |
| | | _this.setState({ |
| | | that.setState({ |
| | | searchlist: _searchlist |
| | | }, () => { |
| | | _this.props.updatesearch({...config, search: _searchlist}) |
| | | that.props.updatesearch({...config, search: _searchlist}) |
| | | }) |
| | | }, |
| | | onCancel() {} |
| | | }) |
| | | } |
| | | |
| | | 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) { // 自定义页面table |
| | | _config = {...config, wrap: {...config.wrap, ...res}} |
| | | } else { |
| | | _config = {...config, setting: {...config.setting, ...res}} |
| | | } |
| | | |
| | | this.props.updatesearch(_config) |
| | | }) |
| | | } |
| | | |
| | |
| | | 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-order-' + config.wrap.searchSize |
| | | } |
| | | |
| | | return ( |
| | | <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> |
| | | <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={card && card.copyType === 'search' ? '搜索条件-复制' : '搜索条件-编辑'} |
| | | wrapClassName="mk-scroll-modal" |
| | | visible={visible} |
| | | width={850} |
| | | width={950} |
| | | maskClosable={false} |
| | | onOk={this.handleSubmit} |
| | | confirmLoading={sqlVerifing} |
| | |
| | | destroyOnClose |
| | | > |
| | | <SearchForm |
| | | dict={dict} |
| | | card={this.state.card} |
| | | formlist={this.state.formlist} |
| | | inputSubmit={this.handleSubmit} |
| | | 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> |
| | | ) |
| | | } |