| | |
| | | import React, { Component } from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Modal, notification, Popover, Switch } from 'antd' |
| | | import { Modal, notification, Popover, Switch, message } 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 DragElement from './dragsearch' |
| | |
| | | } |
| | | |
| | | state = { |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | appType: sessionStorage.getItem('appType'), |
| | | searchlist: null, // 搜索条件集 |
| | | sqlVerifing: false, // sql验证中 |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | width: 24, |
| | | name: card.name, |
| | | subtype: card.subtype, |
| | |
| | | card: _card |
| | | }) |
| | | |
| | | this.props.updateConfig(_card) |
| | | this.updateComponent(_card) |
| | | } |
| | | |
| | | changeStyle = () => { |
| | | const { card } = this.state |
| | | |
| | | MKEmitter.emit('changeStyle', ['background', 'border', 'padding', 'margin', 'shadow'], card.style, this.getStyle) |
| | | 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) |
| | | } |
| | | |
| | | checkComponent = (component) => { |
| | | this.updateComponent(component) |
| | | // checkComponent = (component) => { |
| | | // this.updateComponent(component) |
| | | |
| | | let _item = null |
| | | component.search.forEach(item => { |
| | | if (!_item && item.focus) { |
| | | _item = item |
| | | } |
| | | }) |
| | | if (_item) { |
| | | this.handleSearch(_item) |
| | | } |
| | | } |
| | | // let _item = null |
| | | // component.search.forEach(item => { |
| | | // if (!_item && item.focus) { |
| | | // _item = item |
| | | // } |
| | | // }) |
| | | // if (_item) { |
| | | // this.handleSearch(_item) |
| | | // } |
| | | // } |
| | | |
| | | /** |
| | | * @description 搜索条件顺序调整,或拖拽添加 |
| | |
| | | this.setState({card: _card}) |
| | | this.handleSearch(newcell) |
| | | } else { |
| | | this.setState({card: _card}, ()=> { |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | this.updateComponent(_card) |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | 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) { |
| | |
| | | |
| | | 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 (['select', 'multiselect', 'link', 'checkcard'].includes(res.type) && res.resourceType === '1' && /\s/.test(res.dataSource)) { |
| | | if (['select', 'multiselect', 'link', 'checkcard'].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.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}'`) |
| | | 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.secretkey = Utils.encrypt('', param.timestamp) |
| | | |
| | | if (window.GLOB.mainSystemApi && res.database === 'sso') { |
| | | param.rduri = window.GLOB.mainSystemApi |
| | | } |
| | | |
| | | Api.genericInterface(param).then(result => { |
| | | if (result.status) { |
| | | Api.sDebug(sql).then(result => { |
| | | if (result.status || result.ErrCode === '-2') { |
| | | this.setState({ |
| | | card: card, |
| | | sqlVerifing: false, |
| | | visible: false |
| | | }, ()=> { |
| | | this.props.updateConfig(card) |
| | | this.updateComponent(card) |
| | | }) |
| | | } else { |
| | | this.setState({sqlVerifing: false}) |
| | |
| | | }) |
| | | } else { |
| | | this.setState({ |
| | | card: card, |
| | | visible: false |
| | | }, ()=> { |
| | | this.props.updateConfig(card) |
| | | this.updateComponent(card) |
| | | }) |
| | | } |
| | | }) |
| | |
| | | * @description 搜索条件删除 |
| | | */ |
| | | deleteElement = (cell) => { |
| | | const { dict } = this.state |
| | | let _this = this |
| | | let that = this |
| | | |
| | | confirm({ |
| | | content: dict['model.confirm'] + dict['model.delete'] + ` - ${cell.label} ?`, |
| | | content: `确定删除 - ${cell.label} ?`, |
| | | onOk() { |
| | | let _card = fromJS(_this.state.card).toJS() |
| | | let _card = fromJS(that.state.card).toJS() |
| | | _card.search = _card.search.filter(item => item.uuid !== cell.uuid) |
| | | |
| | | _this.setState({ |
| | | card: _card |
| | | }, () => { |
| | | _this.props.updateConfig(_card) |
| | | }) |
| | | that.updateComponent(_card) |
| | | }, |
| | | onCancel() {} |
| | | }) |
| | |
| | | match: 'like', |
| | | focus: true |
| | | } |
| | | |
| | | if (card.search.length) { |
| | | item.ratio = card.search[card.search.length - 1].ratio |
| | | } |
| | | |
| | | card.search.push(item) |
| | | |
| | | this.setState({card}, () => { |
| | |
| | | |
| | | if (type === 'simple') { |
| | | _card.search.push(item) |
| | | this.setState({ |
| | | card: _card, |
| | | }, () => { |
| | | this.props.updateConfig(_card) |
| | | |
| | | this.updateComponent(_card) |
| | | this.handleSearch(item) |
| | | } else if (type === 'replace') { |
| | | delete item.focus |
| | | _card.search = _card.search.map(cell => { |
| | | if (cell.field && cell.field.toLowerCase() === item.field.toLowerCase()) { |
| | | return item |
| | | } |
| | | return cell |
| | | }) |
| | | |
| | | this.updateComponent(_card) |
| | | this.handleSearch(item) |
| | | } else if (type === 'multil') { |
| | | _card.search.push(...item) |
| | | this.setState({ |
| | | card: _card, |
| | | }, () => { |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | |
| | | this.updateComponent(_card) |
| | | } |
| | | } |
| | | |
| | | getWrapForms = () => { |
| | | const { wrap, action } = this.state.card |
| | | const { card } = this.state |
| | | |
| | | return getWrapForm(wrap, action) |
| | | return getWrapForm(card.wrap, card.uuid) |
| | | } |
| | | |
| | | updateWrap = (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} ${showField ? 'show-field' : ''}`} onClick={this.clickComponent} id={card.uuid} style={_style}> |
| | | <div className={`main-search-edit-list ${card.wrap.float} ${showField ? 'show-field' : ''} mk-order-${card.wrap.searchSize || ''}`} 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} /> |
| | | <Switch checkedChildren="开" size="small" unCheckedChildren="关" defaultChecked={showField} onChange={this.onFieldChange} /> |
| | | <DragElement |
| | | list={card.search} |
| | | setting={card.wrap} |
| | |
| | | <EditOutlined style={{color: '#1890ff'}} title="编辑"/> |
| | | </NormalForm> |
| | | <CopyComponent type="mainsearch" card={card}/> |
| | | <PasteComponent config={card} options={['search', 'form']} updateConfig={this.checkComponent} /> |
| | | {/* <PasteComponent config={card} options={['search', 'form']} updateConfig={this.checkComponent} /> */} |
| | | <PasteComponent config={card} options={['search', 'form']} /> |
| | | <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/> |
| | | <DeleteOutlined className="close" onClick={() => this.props.deletecomponent(card.uuid)} /> |
| | | </div> |
| | | } trigger="hover"> |
| | | <ToolOutlined /> |
| | | </Popover> |
| | | <div className="component-name"><div className="center">{card.name}</div></div> |
| | | <div className="component-name"> |
| | | <div className="center" onDoubleClick={() => { |
| | | let oInput = document.createElement('input') |
| | | oInput.value = 'anchor' + card.uuid |
| | | document.body.appendChild(oInput) |
| | | oInput.select() |
| | | document.execCommand('Copy') |
| | | document.body.removeChild(oInput) |
| | | message.success('复制成功。') |
| | | }}>{card.name}</div> |
| | | </div> |
| | | {/* 编辑搜索条件 */} |
| | | <Modal |
| | | title="搜索条件-编辑" |
| | | wrapClassName="mk-scroll-modal" |
| | | visible={visible} |
| | | width={850} |
| | | width={950} |
| | | maskClosable={false} |
| | | onOk={this.handleSubmit} |
| | | confirmLoading={sqlVerifing} |
| | |
| | | destroyOnClose |
| | | > |
| | | <SearchForm |
| | | dict={dict} |
| | | card={this.state.editcard} |
| | | formlist={this.state.formlist} |
| | | inputSubmit={this.handleSubmit} |