2020-11-05

king

2020-11-05 ee50d5424a093209d1c5c549f4578107893b22f8

2020-11-05

 src/menu/components/card/table-card/index.jsx

New file
@@ -0,0 +1,220 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Icon, Popover, Modal } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'

import MKEmitter from '@/utils/events.js'
import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import './index.scss'

const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const WrapComponent = asyncIconComponent(() => import('./wrapsetting'))
const CardComponent = asyncComponent(() => import('../cardcomponent'))

const { confirm } = Modal

class antvBarLineChart extends Component {
  static propTpyes = {
    card: PropTypes.object,
    deletecomponent: PropTypes.func,
    updateConfig: PropTypes.func,
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    card: null,
    back: false
  }

  UNSAFE_componentWillMount () {
    const { card } = this.props

    if (card.isNew) {
      let subcards = null

      if (card.config) {
        subcards = JSON.parse(card.config)
        subcards = subcards.map(scard => {
          scard.uuid = Utils.getuuid()
          scard.elements = scard.elements.map(elem => {
            elem.uuid = Utils.getuuid()
            return elem
          })
          scard.backElements = scard.backElements.map(elem => {
            elem.uuid = Utils.getuuid()
            return elem
          })
          return scard
        })
      } else {
        subcards = [{
          uuid: Utils.getuuid(),
          setting: { width: 6, type: 'simple'},
          style: {
            borderWidth: '1px', borderColor: '#e8e8e8',
            paddingTop: '15px', paddingBottom: '15px', paddingLeft: '15px', paddingRight: '15px',
            marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px'
          },
          backStyle: {},
          elements: [],
          backElements: []
        }]
      }

      let _card = {
        uuid: card.uuid,
        type: card.type,
        floor: card.floor,
        tabId: card.tabId || '',
        parentId: card.parentId || '',
        format: 'array',   // 组件属性 - 数据格式
        pageable: true,    // 组件属性 - 是否可分页
        switchable: true,  // 组件属性 - 数据是否可切换
        dataName: card.dataName || '',
        width: 24,
        name: card.name,
        subtype: card.subtype,
        setting: { interType: 'system' },
        wrap: { name: card.name, width: 24, addable: 'false', switch: 'false' },
        style: { marginLeft: '0px', marginRight: '0px', marginTop: '8px', marginBottom: '8px' },
        columns: [],
        scripts: [],
        subcards: subcards
      }
      this.setState({
        card: _card
      })
      this.props.updateConfig(_card)
    } else {
      this.setState({
        card: fromJS(card).toJS()
      })
    }
  }

  componentDidMount () {
    MKEmitter.addListener('submitStyle', this.getStyle)
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  /**
   * @description 组件销毁，清除state更新，清除快捷键设置
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('submitStyle', this.getStyle)
  }

  /**
   * @description 卡片行外层信息更新（数据源，样式等）
   */
  updateComponent = (component) => {
    this.setState({
      card: component
    })

    component.width = component.wrap.width
    component.name = component.wrap.name

    this.props.updateConfig(component)
  }

  /**
   * @description 单个卡片信息更新
   */
  updateCard = (cell) => {
    let card = fromJS(this.state.card).toJS()

    card.subcards = card.subcards.map(item => {
      if (item.uuid === cell.uuid) return cell
      return item
    })

    this.setState({card})

    this.props.updateConfig(card)
  }

  /**
   * @description 单个卡片信息更新
   */
  deleteCard = (cell) => {
    let card = fromJS(this.state.card).toJS()
    let _this = this

    confirm({
      content: '确定删除卡片吗？',
      onOk() {
        card.subcards = card.subcards.filter(item => item.uuid !== cell.uuid)
    
        _this.setState({card})
        _this.props.updateConfig(card)
      },
      onCancel() {}
    })
  }

  changeStyle = () => {
    const { card } = this.state

    MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin'], card.style)
  }

  getStyle = (comIds, style) => {
    const { card } = this.state

    if (comIds.length !== 1 || comIds[0] !== card.uuid) return

    let _card = {...card, style}

    this.setState({
      card: _card
    })
    
    this.props.updateConfig(_card)
  }

  render() {
    const { card } = this.state

    return (
      <div className="menu-data-card-edit-box" style={card.style}>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <WrapComponent config={card} updateConfig={this.updateComponent} />
            <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
            <Icon className="close" title="删除组件" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
            <SettingComponent config={card} updateConfig={this.updateComponent} />
          </div>
        } trigger="hover">
          <Icon type="tool" />
        </Popover>
        {card.subcards.map(subcard => (<CardComponent key={subcard.uuid} cards={card} card={subcard} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))}
        {card.wrap.addable === 'true' ? <div className="card-add-button"><Icon type="plus" /></div> : null}
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    menu: state.customMenu
  }
}

const mapDispatchToProps = () => {
  return {}
}

export default connect(mapStateToProps, mapDispatchToProps)(antvBarLineChart)

 src/menu/components/card/table-card/index.scss

New file
@@ -0,0 +1,75 @@
.menu-data-card-edit-box {
  position: relative;
  box-sizing: border-box;
  background: #ffffff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 20px;
  
  .card-control {
    position: absolute;
    top: 0px;
    left: 0px;
    .anticon-tool {
      right: auto;
      left: 1px;
      padding: 1px;
    }
  }
  .anticon-tool {
    position: absolute;
    z-index: 1;
    font-size: 16px;
    right: 1px;
    top: 1px;
    cursor: pointer;
    padding: 5px;
    background: rgba(255, 255, 255, 0.55);
  }

  .card-item {
    overflow-y: hidden;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 20px;
  }
  
  .card-item:hover {
    box-shadow: 0px 0px 2px #e8e8e8;
  }

  .model-menu-card-cell-list .card-detail-row > .anticon-plus {
    position: absolute;
    right: -30px;
    font-size: 16px;
  }
  .model-menu-action-list {
    line-height: 40px;
    .ant-row > .anticon-plus {
      position: absolute;
      right: -30px;
      font-size: 16px;
    }
  }
  .card-add-button {
    text-align: right;
    clear: left;
    .anticon-plus {
      font-size: 20px;
      color: #26C281;
      padding: 5px;
      margin-right: 10px;
    }
  }
}
.menu-data-card-edit-box::after {
  display: block;
  content: ' ';
  clear: both;
}
.menu-data-card-edit-box:hover {
  box-shadow: 0px 0px 2px #e8e8e8;
}

 src/menu/components/card/table-card/wrapsetting/index.jsx

New file
@@ -0,0 +1,82 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Icon, Modal } from 'antd'

import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import SettingForm from './settingform'
import './index.scss'

class DataSource extends Component {
  static propTpyes = {
    config: PropTypes.any,
    updateConfig: PropTypes.func
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    visible: false,
    wrap: null
  }

  UNSAFE_componentWillMount () {
    const { config } = this.props

    this.setState({wrap: fromJS(config.wrap).toJS()})
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }

  editDataSource = () => {
    this.setState({
      visible: true
    })
  }

  verifySubmit = () => {
    const { config } = this.props

    this.verifyRef.handleConfirm().then(res => {

      this.setState({
        wrap: res,
        visible: false
      })
      this.props.updateConfig({...config, wrap: res})
    })
  }

  render () {
    const { config } = this.props
    const { visible, dict, wrap } = this.state

    return (
      <div className="model-menu-setting-wrap">
        <Icon type="edit" onClick={() => this.editDataSource()} />
        <Modal
          wrapClassName="popview-modal"
          title={'卡片设置'}
          visible={visible}
          width={700}
          maskClosable={false}
          okText={dict['model.submit']}
          onOk={this.verifySubmit}
          onCancel={() => { this.setState({ visible: false }) }}
          destroyOnClose
        >
          <SettingForm
            dict={dict}
            wrap={wrap}
            config={config}
            wrappedComponentRef={(inst) => this.verifyRef = inst}
          />
        </Modal>
      </div>
    )
  }
}

export default DataSource

 src/menu/components/card/table-card/wrapsetting/index.scss

New file
@@ -0,0 +1,7 @@
.model-menu-setting-wrap {
  display: inline-block;

  >.anticon-edit {
    color: #1890ff;
  }
}

 src/menu/components/card/table-card/wrapsetting/settingform/index.jsx

New file
@@ -0,0 +1,140 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Radio, Tooltip, Icon, InputNumber } from 'antd'

import './index.scss'

class SettingForm extends Component {
  static propTpyes = {
    dict: PropTypes.object,      // 字典项
    config: PropTypes.object,    // 卡片行信息
    wrap: PropTypes.object,      // 数据源配置
  }

  handleConfirm = () => {
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          resolve(values)
        } else {
          reject(err)
        }
      })
    })
  }

  render() {
    const { wrap, config } = this.props
    const { getFieldDecorator } = this.props.form

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    }

    return (
      <div className="model-menu-setting-form">
        <Form {...formItemLayout}>
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="用于组件间的区分。">
                  <Icon type="question-circle" />
                  组件名称
                </Tooltip>
              }>
                {getFieldDecorator('name', {
                  initialValue: wrap.name,
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.input'] + '组件名称!'
                    }
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="栅格布局，每行等分为24列。">
                  <Icon type="question-circle" />
                  宽度
                </Tooltip>
              }>
                {getFieldDecorator('width', {
                  initialValue: wrap.width || 24,
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.input'] + '宽度!'
                    }
                  ]
                })(<InputNumber min={1} max={24} precision={0} />)}
              </Form.Item>
            </Col>
            {config.subtype === 'propcard' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="选择静态值，无需配置数据源。">
                  <Icon type="question-circle" />
                  数据来源
                </Tooltip>
              }>
                {getFieldDecorator('datatype', {
                  initialValue: wrap.datatype || 'dynamic'
                })(
                  <Radio.Group>
                    <Radio value="dynamic">动态</Radio>
                    <Radio value="static">静态</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            {config.subtype === 'datacard' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="选择含有添加按钮时，请完善按钮配置信息。">
                  <Icon type="question-circle" />
                  添加按钮
                </Tooltip>
              }>
                {getFieldDecorator('addable', {
                  initialValue: wrap.addable || 'false'
                })(
                  <Radio.Group>
                    <Radio value="true">有</Radio>
                    <Radio value="false">无</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="选择卡片切换时，可向其他组件传递主键值。">
                  <Icon type="question-circle" />
                  是否切换
                </Tooltip>
              }>
                {getFieldDecorator('switch', {
                  initialValue: wrap.switch || 'false'
                })(
                  <Radio.Group>
                    <Radio value="true">是</Radio>
                    <Radio value="false">否</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>
    )
  }
}

export default Form.create()(SettingForm)

 src/menu/components/card/table-card/wrapsetting/settingform/index.scss

New file
@@ -0,0 +1,11 @@
.model-menu-setting-form {
  position: relative;

  .anticon-question-circle {
    color: #c49f47;
    margin-right: 3px;
  }
  .ant-input-number {
    width: 100%;
  }
}

 src/menu/components/chart/antv-bar/index.scss

@@ -24,6 +24,7 @@
      position: absolute;
      right: 1px;
      top: 1px;
      z-index: 1;
      font-size: 16px;
      padding: 5px;
      cursor: pointer;

 src/menu/components/chart/antv-pie/index.scss

@@ -23,6 +23,7 @@
      position: absolute;
      right: 1px;
      top: 1px;
      z-index: 1;
      font-size: 16px;
      padding: 5px;
      cursor: pointer;

 src/menu/datasource/index.jsx

@@ -35,9 +35,47 @@
  }

  editDataSource = () => {
    const { config, menu } = this.props

    let search = []
    let parents = []
    let _conf = config
    let getParents = (box) => {
      box.components.forEach(item => {
        if (item.type !== 'tabs') return

        item.subtabs.forEach(tab => {
          if (_conf.parentId === tab.parentId && _conf.tabId === tab.uuid) {
            parents.unshift(tab)
            _conf = item

            if (_conf.parentId && _conf.tabId) {
              getParents(menu)
            }
          } else {
            getParents(tab)
          }
        })
      })
    }

    if (config.parentId && config.tabId) {
      getParents(menu)
    }

    parents.unshift(menu)

    parents.forEach(parent => {
      parent.components.forEach(item => {
        if (item.type === 'search') {
          search = item.search
        }
      })
    })

    this.setState({
      visible: true,
      mainSearch: []
      mainSearch: search
    })
  }


 src/menu/datasource/verifycard/customscript/index.jsx

@@ -1,5 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Form, Row, Col, Button, notification, Select } from 'antd'

import Utils from '@/utils/utils.js'
@@ -42,7 +43,7 @@
      } else if (['dateweek', 'datemonth', 'daterange'].includes(item.type)) {
        _usefulFields.push(item.field)
        _usefulFields.push(item.field + '1')
      } else if (_usefulFields.includes(item.field)) {
      } else if (item.type === 'date' && _usefulFields.includes(item.field)) {
        _usefulFields.push(item.field + '1')
      } else {
        _usefulFields.push(item.field)
@@ -52,6 +53,35 @@
    this.setState({
      usefulFields: _usefulFields.join(', ')
    })
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (!is(fromJS(this.props.searches), fromJS(nextProps.searches))) {
      
      let _usefulFields = []
      nextProps.searches.forEach(item => {
        if (!item.field) return

        if (item.type === 'group') {
          if (item.transfer === 'true') {
            _usefulFields.push(item.field)
          }
          _usefulFields.push(item.datefield)
          _usefulFields.push(item.datefield + '1')
        } else if (['dateweek', 'datemonth', 'daterange'].includes(item.type)) {
          _usefulFields.push(item.field)
          _usefulFields.push(item.field + '1')
        } else if (item.type === 'date' && _usefulFields.includes(item.field)) {
          _usefulFields.push(item.field + '1')
        } else {
          _usefulFields.push(item.field)
        }
      })

      this.setState({
        usefulFields: _usefulFields.join(', ')
      })
    }
  }

  edit = (record) => {
@@ -69,7 +99,7 @@
      editItem: null
    })
    this.props.form.setFieldsValue({
      sql: ''
      sql: ' '
    })
  }

@@ -128,9 +158,13 @@
            loading: false
          })
          this.props.form.setFieldsValue({
            sql: ''
            sql: ' '
          })
          this.props.scriptSubmit(values)
        }, () => {
          this.setState({
            loading: false
          })
        })
      }
    })
@@ -185,7 +219,7 @@
          </Col>
          <Col span={24} className="sqlfield">
            <Form.Item label={'可用字段'}>
              id, bid, loginuid, sessionuid, userid, appkey, time_id, calendarDate, calendarDate1{usefulFields ? ', ' + usefulFields : ''}
              id, bid, loginuid, sessionuid, userid, appkey, time_id{usefulFields ? ', ' + usefulFields : ''}
            </Form.Item>
          </Col>
          <Col span={10}>

 src/menu/datasource/verifycard/index.jsx

@@ -122,19 +122,77 @@
  }

  UNSAFE_componentWillMount() {
    const { config, mainSearch } = this.props
    const { config, mainSearch, menu } = this.props

    let search = config.search || []
    search = [...search, ...mainSearch]

    if (config.setting.useMSearch === 'true') { // 使用主搜索条件
      search = [...search, ...mainSearch]
    }

    let Marks = []
    let getcomponentmarks = (box, conf) => {
      if (!conf.parentId && box.Template === 'CustomPage') {
        box.components.forEach(item => {
          if (item.uuid !== conf.uuid && item.setting && item.setting.varMark) {
            Marks.push(item.setting.varMark)
          }
        })
      } else if (conf.parentId === box.parentId && conf.tabId === box.uuid) {
        box.components.forEach(item => {
          if (item.uuid !== conf.uuid && item.setting && item.setting.varMark) {
            Marks.push(item.setting.varMark)
          }
        })
      } else {
        box.components.forEach(item => {
          if (item.type !== 'tabs') return
  
          item.subtabs.forEach(tab => {
            getcomponentmarks(tab, conf)
          })
        })
      }
    }

    getcomponentmarks(menu, config)

    let _setting = fromJS(config.setting).toJS()

    if (!_setting.varMark) {
      _setting.varMark = this.getMark(Marks)
    }

    this.setState({
      columns: fromJS(config.columns).toJS(),
      setting: fromJS(config.setting).toJS(),
      setting: _setting,
      scripts: fromJS(config.scripts).toJS(),
      searches: search
      searches: search,
      varMarks: Marks
    })

    this.getsysScript()
  }

  getMark = (varMarks) => {
    let m = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
    let i = 0
    let n = 25

    let name = ''
    while (!name) {
      name = `${m[n]}${m[i]}_`
      if (varMarks.includes(name) && n > 0) {
        i++
        if (i >= 26) {
          n--
          i = 0
        }
        name = ''
      }
    }

    return name
  }

  getsysScript = () => {
@@ -309,12 +367,32 @@
  }

  changeTab = (val) => {
    const { activeKey } = this.state
    const { config, mainSearch } = this.props
    const { activeKey, varMarks } = this.state

    this.setState({loading: true})
    if (activeKey === 'setting') {
      this.settingForm.handleConfirm().then(res => {
        let search = config.search || []

        if (res.useMSearch === 'true') { // 使用主搜索条件
          search = [...search, ...mainSearch]
        }

        if (res.varMark && varMarks.includes(res.varMark)) {
          notification.warning({
            top: 92,
            message: '变量标识不可重复！',
            duration: 5
          })
          this.setState({
            loading: false
          })
          return
        }

        this.setState({
          searches: search,
          setting: res
        }, () => {
          this.sqlverify(() => { // 验证成功
@@ -324,6 +402,7 @@
            })
          }, () => {             // 验证失败
            this.setState({
              activeKey: val,
              loading: false
            })
          }, true)
@@ -340,7 +419,7 @@
      let _loading = false
      if (this.scriptsForm && this.scriptsForm.state.editItem) {
        _loading = true
      } else if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql')) {
      } else if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && this.scriptsForm.props.form.getFieldValue('sql') !== ' ') {
        _loading = true
      }

@@ -360,27 +439,34 @@
        activeKey: val,
        loading: false
      })

      // this.sqlverify(() => { // 验证成功
      //   this.setState({
      //     activeKey: val,
      //     loading: false
      //   })
      // }, () => {             // 验证失败
      //   this.setState({
      //     loading: false
      //   })
      // }, true)
    }
  }

  submitDataSource = () => {
    const { activeKey, setting, columns, scripts } = this.state
    const { config, mainSearch } = this.props
    const { activeKey, setting, columns, scripts, varMarks } = this.state

    return new Promise((resolve, reject) => {
      if (activeKey === 'setting') {
        this.settingForm.handleConfirm().then(res => {
          let search = config.search || []

          if (res.useMSearch === 'true') { // 使用主搜索条件
            search = [...search, ...mainSearch]
          }

          if (res.varMark && varMarks.includes(res.varMark)) {
            notification.warning({
              top: 92,
              message: '变量标识不可重复！',
              duration: 5
            })
            reject()
            return
          }

          this.setState({
            searches: search,
            setting: res
          }, () => {
            this.sqlverify(() => { resolve({setting: res, columns, scripts }) }, reject, false)
@@ -394,7 +480,7 @@
        let _loading = false
        if (this.scriptsForm && this.scriptsForm.state.editItem) {
          _loading = true
        } else if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql')) {
        } else if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && this.scriptsForm.props.form.getFieldValue('sql') !== ' ') {
          _loading = true
        }

@@ -432,9 +518,21 @@
    }

    if ((setting.interType === 'system' && setting.execute !== 'false') || _scripts.length > 0) {
      let result = SettingUtils.getDebugSql(setting, _scripts, columns, searches)

      if (result.error) {
        notification.warning({
          top: 92,
          message: result.error,
          duration: 5
        })
        reject()
        return
      }

      let param = {
        func: 's_debug_sql',
        LText: SettingUtils.getDebugSql(setting, _scripts, columns, searches)
        LText: result.sql
      }
      param.LText = Utils.formatOptions(param.LText)
      param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')

 src/menu/datasource/verifycard/settingform/index.jsx

@@ -20,6 +20,7 @@

  state = {
    interType: this.props.setting.interType || 'system',
    laypage: this.props.setting.laypage || 'true',
    modules: [],
    useMSearch: this.props.setting.useMSearch || 'false'
  }
@@ -174,7 +175,7 @@
  render() {
    const { setting, menu, columns, config } = this.props
    const { getFieldDecorator } = this.props.form
    const { interType, modules, useMSearch } = this.state
    const { interType, modules, useMSearch, laypage } = this.state

    const formItemLayout = {
      labelCol: {
@@ -237,6 +238,32 @@
                </Radio.Group>)}
              </Form.Item>
            </Col>
            {interType === 'system' ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'自定义脚本中的变量（除报错及可用字段外），需以此标识开头。'}>
                  <Icon type="question-circle" />
                  变量标识
                </Tooltip>
              }>
                {getFieldDecorator('varMark', {
                  initialValue: setting.varMark || '',
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.input'] + '变量标识!'
                    },
                    {
                      pattern: /^[a-zA-Z_]*$/ig,
                      message: '请使用字母或_'
                    },
                    {
                      max: 3,
                      message: '最多三个字符。'
                    }
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
              </Form.Item>
            </Col> : null}
            {interType === 'inner' ? <Col span={8}>
              <Form.Item label={tooltip ?
                <Tooltip placement="topLeft" title={tooltip}>
@@ -367,29 +394,12 @@
                )}
              </Form.Item>
            </Col>
            {!config.pageable ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'初始化加载时，是否与其他组件一同加载数据，注：仅在使用系统函数，且初始化加载数据时有效，分页请求时无效。'}>
                  <Icon type="question-circle" />
                  同步查询
                </Tooltip>
              }>
                {getFieldDecorator('sync', {
                  initialValue: setting.sync || 'true'
                })(
                  <Radio.Group>
                    <Radio value="true">是</Radio>
                    <Radio value="false">否</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            {config.pageable ? <Col span={8}>
              <Form.Item label="分页">
                {getFieldDecorator('laypage', {
                  initialValue: setting.laypage || 'false'
                  initialValue: setting.laypage || 'true'
                })(
                  <Radio.Group>
                  <Radio.Group onChange={(e) => this.setState({laypage: e.target.value})}>
                    <Radio value="true">是</Radio>
                    <Radio value="false">否</Radio>
                  </Radio.Group>
@@ -414,6 +424,23 @@
                })(<InputNumber min={1} max={500} precision={0} />)}
              </Form.Item>
            </Col> : null}
            {!config.pageable || (config.pageable && laypage === 'false') ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'初始化加载时，是否与其他组件一同加载数据，注：仅在使用系统函数，且初始化加载数据时有效，分页请求时无效。'}>
                  <Icon type="question-circle" />
                  同步查询
                </Tooltip>
              }>
                {getFieldDecorator('sync', {
                  initialValue: setting.sync || 'true'
                })(
                  <Radio.Group>
                    <Radio value="true">是</Radio>
                    <Radio value="false">否</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'优先使用同级的搜索条件组件，同级搜索不存在时，依次向上选取，与当前组件的搜索条件一同用作数据过滤（当前组件的搜索条件优先）。'}>

 src/menu/datasource/verifycard/utils.jsx

@@ -9,6 +9,7 @@
   */
  static getDebugSql (setting, scripts, columns, searches = []) {
    let sql = ''
    let error = ''
    let _dataresource = ''
    let _customScript = ''
    let arr_field = columns.map(item => item.field).join(',')
@@ -21,12 +22,6 @@
      })
    }

    if (_customScript) {
      _customScript = `declare @ErrorCode nvarchar(50),@retmsg nvarchar(4000) select @ErrorCode='',@retmsg =''
        ${_customScript}
      `
    }

    if (setting.interType === 'system' && setting.execute !== 'false') {
      _dataresource = setting.dataresource
    }
@@ -37,53 +32,107 @@
    if (_customScript) {
      _customScript = _customScript.replace(/@\$|\$@/ig, '')
    }

    if (_customScript) {
      _customScript = `declare @ErrorCode nvarchar(50),@retmsg nvarchar(4000) select @ErrorCode='',@retmsg =''
        ${_customScript}
      `
    }
    
    // 正则替换
    let _regoptions = searches.map(item => {
      return {
        reg: new RegExp('@' + item.key + '@', 'ig'),
        value: `'${item.value}'`
    let _regoptions = []
    let _fields = []

    searches.forEach(item => {
      if (item.datefield) {
        _regoptions.push({
          var: new RegExp('@' + item.datefield, 'ig'),
          reg: new RegExp('@' + item.datefield + '@', 'ig')
        })
        _regoptions.push({
          var: new RegExp('@' + item.datefield + '1', 'ig'),
          reg: new RegExp('@' + item.datefield + '1@', 'ig')
        })
      }
      if (['dateweek', 'datemonth', 'daterange'].includes(item.type)) {
        _regoptions.push({
          var: new RegExp('@' + item.field, 'ig'),
          reg: new RegExp('@' + item.field + '@', 'ig')
        })
        _regoptions.push({
          var: new RegExp('@' + item.field + '1', 'ig'),
          reg: new RegExp('@' + item.field + '1@', 'ig')
        })
      } else if (item.type === 'date') {
        if (_fields.includes(item.field)) {
          _regoptions.push({
            var: new RegExp('@' + item.field + '1', 'ig'),
            reg: new RegExp('@' + item.field + '1@', 'ig')
          })
        } else {
          _fields.push(item.field)
          _regoptions.push({
            var: new RegExp('@' + item.field, 'ig'),
            reg: new RegExp('@' + item.field + '@', 'ig')
          })
        }
      } else {
        _regoptions.push({
          var: new RegExp('@' + item.field, 'ig'),
          reg: new RegExp('@' + item.field + '@', 'ig')
        })
      }
    })
    let _search = ''

    // 日历中的年份替换
    if (setting.queryType === 'statistics' || _customScript) {
      _regoptions.push({
        reg: new RegExp('@calendarDate@', 'ig'),
        value: `1970-01-01 00:00:00.000`
      })
      _regoptions.push({
        reg: new RegExp('@calendarDate1@', 'ig'),
        value: `2030-12-31 23:59:59.999`
      })
    }
    let _search = ''

    if (setting.queryType === 'statistics' && _dataresource) {
      _regoptions.forEach(item => {
        _dataresource = _dataresource.replace(item.reg, item.value)
        _dataresource = _dataresource.replace(item.reg, '0')
      })

      _search = ''
    }

    let originscript = _customScript

    if (_customScript) {
      _regoptions.push({
        var: new RegExp('@orderBy', 'ig'),
        reg: new RegExp('@orderBy@', 'ig'),
        value: setting.order
      })
      if (setting.laypage !== 'false') {
        _regoptions.push({
          var: new RegExp('@pageSize', 'ig'),
          reg: new RegExp('@pageSize@', 'ig'),
          value: 10
        }, {
          var: new RegExp('@pageIndex', 'ig'),
          reg: new RegExp('@pageIndex@', 'ig'),
          value: 1
        })
      }
      _regoptions.forEach(item => {
        _customScript = _customScript.replace(item.reg, item.value)
        _customScript = _customScript.replace(item.reg, '0')
        originscript = originscript.replace(item.reg, '0')
        originscript = originscript.replace(item.var, '0')
      })

      if (setting.varMark) {
        originscript = originscript.replace(/@ErrorCode/ig, '')
        originscript = originscript.replace(/@retmsg/ig, '')
        originscript = originscript.replace(/@id@/ig, '').replace(/@id/ig, '')
        originscript = originscript.replace(/@bid@/ig, '').replace(/@bid/ig, '')
        originscript = originscript.replace(/@loginuid@/ig, '').replace(/@loginuid/ig, '')
        originscript = originscript.replace(/@sessionuid@/ig, '').replace(/@sessionuid/ig, '')
        originscript = originscript.replace(/@userid@/ig, '').replace(/@userid/ig, '')
        originscript = originscript.replace(/@appkey@/ig, '').replace(/@appkey/ig, '')
        originscript = originscript.replace(/@time_id@/ig, '').replace(/@time_id/ig, '')
  
        originscript = originscript.replace(new RegExp('@' + setting.varMark, 'ig'), '')

        if (/@/ig.test(originscript)) {
          error = '使用了变量标识外的字段！'
        }
      }
    }

    // 数据源处理, 存在显示列时 
@@ -106,6 +155,6 @@
      sql = _dataresource
    }
    
    return sql
    return { error, sql }
  }
}

 src/tabviews/custom/components/card/data-card/index.jsx

@@ -28,15 +28,25 @@
    pageIndex: 1,
    activeKey: '',             // 选中卡
    loading: false,            // 数据加载状态
    sync: false,               // 是否统一请求数据
    card: null,                // 卡片设置
    data: null,                // 数据
    total: null
  }

  UNSAFE_componentWillMount () {
    const { data } = this.props
    let _config = fromJS(this.props.config).toJS()
    let _card = _config.subcards[0]
    let _cols = new Map()

    let _data = null
    let _sync = _config.setting.sync === 'true'

    if (_config.setting.sync === 'true' && data) {
      _data = data[_config.dataName] || []
      _sync = false
    }

    _config.columns.forEach(item => {
      _cols.set(item.field, item)
@@ -56,11 +66,19 @@
    })

    this.setState({
      sync: _sync,
      data: _data,
      config: _config,
      card: _card,
      arr_field: _config.columns.map(col => col.field).join(','),
    }, () => {
      this.loadData()
      if (_config.setting.sync !== 'true' && _config.setting.onload === 'true') {
        this.loadData()
      } else if (_sync && !_data) {
        this.setState({
          loading: true
        })
      }
    })
  }

@@ -70,6 +88,25 @@

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    const { sync, config } = this.state

    if (sync && !is(fromJS(this.props.data), fromJS(nextProps.data))) {
      let _data = []
      if (nextProps.data && nextProps.data[config.dataName]) {
        _data = nextProps.data[config.dataName] || []
      }

      this.setState({sync: false, loading: false, data: _data})
    } else if (!is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) {
      if (config.setting.syncRefresh === 'true') {
        this.setState({}, () => {
          this.loadData()
        })
      }
    }
  }

  componentWillUnmount () {
@@ -94,10 +131,15 @@
  async loadData () {
    const { mainSearch, BID, menuType, dataManager } = this.props
    const { config, arr_field, pageIndex } = this.state
    

    let searches = []
    if (mainSearch && mainSearch.length > 0) { // 主表搜索条件
      searches = [...mainSearch, ...searches]
      let keys = searches.map(item => item.key)
      mainSearch.forEach(item => {
        if (!keys.includes(item.key)) {
          searches.push(item)
        }
      })
    }

    this.setState({

 src/tabviews/custom/components/card/prop-card/index.jsx

@@ -23,14 +23,29 @@

  state = {
    config: null,              // 图表配置信息
    loading: true,             // 数据加载状态
    loading: false,            // 数据加载状态
    activeKey: '',             // 选中数据
    sync: false,               // 是否统一请求数据
    data: null,                // 数据
  }

  UNSAFE_componentWillMount () {
    const { data } = this.props
    let _config = fromJS(this.props.config).toJS()
    let _cols = new Map()

    let _data = null
    let _sync = false
    if (_config.setting && _config.wrap.datatype !== 'static') {
      _sync = _config.setting.sync === 'true'

      if (_config.setting.sync === 'true' && data) {
        _data = data[_config.dataName] || []
        _sync = false
      }
    } else {
      _data = []
    }

    _config.columns.forEach(item => {
      _cols.set(item.field, item)
@@ -52,10 +67,18 @@
    })

    this.setState({
      sync: _sync,
      data: _data,
      config: _config,
      arr_field: _config.columns.map(col => col.field).join(','),
    }, () => {
      this.loadData()
      if (_config.wrap.datatype !== 'static' && _config.setting && _config.setting.sync !== 'true' && _config.setting.onload === 'true') {
        this.loadData()
      } else if (_sync && !_data) {
        this.setState({
          loading: true
        })
      }
    })
  }

@@ -74,6 +97,30 @@
    MKEmitter.removeListener('syncRefreshComponentId', this.reload)
  }

  /**
   * @description 图表数据更新，刷新内容
   */
  UNSAFE_componentWillReceiveProps (nextProps) {
    const { sync, config } = this.state

    if (sync && !is(fromJS(this.props.data), fromJS(nextProps.data))) {
      let _data = []
      if (nextProps.data && nextProps.data[config.dataName]) {
        _data = nextProps.data[config.dataName] || []
      }

      this.setState({sync: false, loading: false, data: _data}, () => {
        this.handleData()
      })
    } else if (!is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) {
      if (config.wrap.datatype !== 'static' && config.setting.syncRefresh === 'true') {
        this.setState({}, () => {
          this.loadData()
        })
      }
    }
  }

  reload = (syncId) => {
    const { config } = this.state

@@ -85,10 +132,15 @@
  async loadData () {
    const { mainSearch, BID, menuType, dataManager } = this.props
    const { config, arr_field } = this.state
    

    let searches = []
    if (mainSearch && mainSearch.length > 0) { // 主表搜索条件
      searches = [...mainSearch, ...searches]
      let keys = searches.map(item => item.key)
      mainSearch.forEach(item => {
        if (!keys.includes(item.key)) {
          searches.push(item)
        }
      })
    }

    if (config.wrap.datatype === 'static') {

 src/tabviews/custom/components/chart/antv-bar-line/index.jsx

@@ -125,7 +125,7 @@
      search: Utils.initMainSearch(config.search),
      showHeader
    }, () => {
      if (config.setting.sync !== 'true') {
      if (config.setting.sync !== 'true' && config.setting.onload === 'true') {
        this.loadData()
      } else if (config.setting.sync === 'true') {
        if (!_data) {
@@ -161,6 +161,12 @@
      this.setState({sync: false, loading: false, data: _data}, () => {
        this.handleData()
      })
    } else if (!is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) {
      if (config.setting.syncRefresh === 'true') {
        this.setState({}, () => {
          this.loadData()
        })
      }
    }
  }

@@ -197,10 +203,15 @@
  async loadData () {
    const { mainSearch, BID, menuType, dataManager } = this.props
    const { config, arr_field, search } = this.state
    

    let searches = fromJS(search).toJS()
    if (mainSearch && mainSearch.length > 0) { // 主表搜索条件
      searches = [...mainSearch, ...searches]
      let keys = searches.map(item => item.key)
      mainSearch.forEach(item => {
        if (!keys.includes(item.key)) {
          searches.push(item)
        }
      })
    }

    this.setState({

 src/tabviews/custom/components/chart/antv-pie/index.jsx

@@ -70,7 +70,7 @@
      search: Utils.initMainSearch(config.search),
      showHeader
    }, () => {
      if (config.setting.sync !== 'true') {
      if (config.setting.sync !== 'true' && config.setting.onload === 'true') {
        this.loadData()
      } else if (config.setting.sync === 'true') {
        if (!_data) {
@@ -106,6 +106,12 @@
      this.setState({sync: false, loading: false, data: _data}, () => {
        this.handleData()
      })
    } else if (!is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) {
      if (config.setting.syncRefresh === 'true') {
        this.setState({}, () => {
          this.loadData()
        })
      }
    }
  }

@@ -124,10 +130,15 @@
  async loadData () {
    const { mainSearch, BID, menuType, dataManager } = this.props
    const { config, arr_field, search } = this.state
    

    let searches = fromJS(search).toJS()
    if (mainSearch && mainSearch.length > 0) { // 主表搜索条件
      searches = [...mainSearch, ...searches]
      let keys = searches.map(item => item.key)
      mainSearch.forEach(item => {
        if (!keys.includes(item.key)) {
          searches.push(item)
        }
      })
    }

    this.setState({

 src/tabviews/custom/components/share/tabtransfer/index.jsx

@@ -68,16 +68,17 @@
    }

    let params = []
    config.components.forEach(component => {
      if (component.type === 'tabs') return
    config.components.forEach(item => {
      if (item.type === 'tabs') return

      if (!component.format || (component.subtype === 'propcard' && component.wrap.datatype === 'static')) return
      if (!item.setting || item.setting.interType !== 'system') return
      if (!item.format || (item.subtype === 'propcard' && item.wrap.datatype === 'static')) return

      if (component.dataName && !component.pageable && component.setting.interType === 'system' && component.setting.onload === 'true' && component.setting.sync === 'true') {
        let param = this.getDefaultParam(component, _mainSearch)
      if (item.dataName && (!item.pageable || (item.pageable && !item.setting.laypage)) && item.setting.onload === 'true' && item.setting.sync === 'true') {
        let param = this.getDefaultParam(item, _mainSearch)
        params.push(param)
      } else {
        component.setting.sync = 'false'
        item.setting.sync = 'false'
      }
    })

@@ -103,8 +104,14 @@
    if (search && search.length > 0) {
      searchlist = Utils.initMainSearch(search)
    }

    if (setting.useMSearch === 'true') {
      searchlist = [...mainSearch, ...searchlist]
      let keys = searchlist.map(item => item.key)
      mainSearch.forEach(item => {
        if (!keys.includes(item.key)) {
          searchlist.push(item)
        }
      })
    }

    let arr_field = columns.map(col => col.field)
@@ -255,7 +262,7 @@
        if (item.subtype === 'datacard') {
          return (
            <Col span={item.width} key={item.uuid}>
              <DataCard config={item} BID={BID} mainSearch={mainSearch} menuType={menuType} dataManager={dataManager} />
              <DataCard config={item} data={data} BID={BID} mainSearch={mainSearch} menuType={menuType} dataManager={dataManager} />
            </Col>
          )
        } else if (item.subtype === 'propcard') {

 src/tabviews/custom/index.jsx

@@ -181,7 +181,12 @@
        }
      }

      if (!component.setting) return component // 不使用系统函数时
      if (!component.format || (component.subtype === 'propcard' && component.wrap.datatype === 'static')) return component // 没有动态数据  数据格式 array 或 object
      if (component.setting.interType !== 'system') { // 不使用系统函数时
        component.setting.sync = 'false'
        return component
      }

      let _customScript = ''
      component.scripts && component.scripts.forEach(script => {
@@ -193,36 +198,32 @@
      })
      delete component.scripts

      if (component.setting && component.setting.interType === 'system') { // 使用系统函数
        component.setting.execute = component.setting.execute !== 'false'  // 默认sql是否执行，转为boolean 统一格式
        component.setting.laypage = component.setting.laypage === 'true'   // 是否分页，转为boolean 统一格式
      component.setting.execute = component.setting.execute !== 'false'  // 默认sql是否执行，转为boolean 统一格式
      component.setting.laypage = component.setting.laypage === 'true'   // 是否分页，转为boolean 统一格式

        if (!component.setting.execute) {
          component.setting.dataresource = ''
        }
        if (/\s/.test(component.setting.dataresource)) {
          component.setting.dataresource = '(' + component.setting.dataresource + ') tb'
        }
    
        if (this.props.dataManager) { // 数据权限
          component.setting.dataresource = component.setting.dataresource.replace(/\$@/ig, '/*')
          component.setting.dataresource = component.setting.dataresource.replace(/@\$/ig, '*/')
          _customScript = _customScript.replace(/\$@/ig, '/*')
          _customScript = _customScript.replace(/@\$/ig, '*/')
        } else {
          component.setting.dataresource = component.setting.dataresource.replace(/@\$|\$@/ig, '')
          _customScript = _customScript.replace(/@\$|\$@/ig, '')
        }
      if (!component.setting.execute) {
        component.setting.dataresource = ''
      }
      if (/\s/.test(component.setting.dataresource)) {
        component.setting.dataresource = '(' + component.setting.dataresource + ') tb'
      }
  
      if (this.props.dataManager) { // 数据权限
        component.setting.dataresource = component.setting.dataresource.replace(/\$@/ig, '/*')
        component.setting.dataresource = component.setting.dataresource.replace(/@\$/ig, '*/')
        _customScript = _customScript.replace(/\$@/ig, '/*')
        _customScript = _customScript.replace(/@\$/ig, '*/')
      } else {
        component.setting.dataresource = component.setting.dataresource.replace(/@\$|\$@/ig, '')
        _customScript = _customScript.replace(/@\$|\$@/ig, '')
      }

      if (component.setting) {
        component.setting.customScript = _customScript // 整理后自定义脚本
      }
      component.setting.customScript = _customScript // 整理后自定义脚本

      // floor    组件的层级
      // dataName 系统生成的数据源名称
      // pageable 是否分页，组件属性，不分页的组件才可以统一查询
      if (component.floor === 1 && component.dataName && !component.pageable && component.setting.interType === 'system' && component.setting.onload === 'true' && component.setting.sync === 'true') {
      if (component.floor === 1 && component.dataName && (!component.pageable || (component.pageable && !component.setting.laypage)) && component.setting.onload === 'true' && component.setting.sync === 'true') {
        let param = this.getDefaultParam(component, mainSearch)
        params.push(param)
      } else if (component.floor === 1) {
@@ -243,8 +244,14 @@
    if (search && search.length > 0) {
      searchlist = Utils.initMainSearch(search)
    }

    if (setting.useMSearch === 'true') {
      searchlist = [...mainSearch, ...searchlist]
      let keys = searchlist.map(item => item.key)
      mainSearch.forEach(item => {
        if (!keys.includes(item.key)) {
          searchlist.push(item)
        }
      })
    }

    let arr_field = columns.map(col => col.field)
@@ -440,7 +447,7 @@
        if (item.subtype === 'datacard') {
          return (
            <Col span={item.width} key={item.uuid}>
              <DataCard config={item} BID={BID} mainSearch={mainSearch} menuType={menuType} dataManager={dataManager} />
              <DataCard config={item} data={data} BID={BID} mainSearch={mainSearch} menuType={menuType} dataManager={dataManager} />
            </Col>
          )
        } else if (item.subtype === 'propcard') {

 src/views/menudesign/index.jsx

@@ -17,7 +17,6 @@

import './index.scss'

// const { TabPane } = Tabs
const { Panel } = Collapse
const { confirm } = Modal
const _locale = localStorage.getItem('lang') !== 'en-US' ? antdZhCN : antdEnUS