2021-01-21

king

2021-01-21 3a4f58e3883bd841f2658c38889fdc43a4b9cc8d

2021-01-21

 src/assets/css/main.scss

@@ -211,6 +211,9 @@
.ant-popover.popover-confirm {
  z-index: 1080!important;
}
.ant-message {
  z-index: 1110!important;
}

.ant-notification-notice.notification-custom-error {
  background: #f5222d;

 src/menu/components/code/sandbox/codecontent/index.jsx

@@ -1,13 +1,15 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Empty } from 'antd'
import { Empty, message } from 'antd'

import './index.scss'

class BraftContent extends Component {
  static propTpyes = {
    name: PropTypes.string,
    html: PropTypes.any,
    css: PropTypes.any,
    js: PropTypes.any,
  }

  state = {
@@ -32,6 +34,18 @@
    }
  }

  componentDidMount () {
    const { js, name } = this.props
    if (js) {
      try {
        // eslint-disable-next-line no-eval
        eval(js)
      } catch {
        message.warning(name + 'JS 执行失败！')
      }
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.css !== nextProps.css) {
      const { csselement } = this.state
@@ -47,6 +61,16 @@
        this.setState({csselement: ele})
      }
    }
    if (this.props.html !== nextProps.html || this.props.js !== nextProps.js) {
      if (nextProps.js) {
        try {
          // eslint-disable-next-line no-eval
          eval(nextProps.js)
        } catch {
          message.warning(nextProps.name + 'JS 执行失败！')
        }
      }
    }
  }

  render() {

 src/menu/components/code/sandbox/codecontent/index.scss

@@ -7,6 +7,7 @@
  }
  video {
    max-width: 100%;
    width: 100%;
  }
  table {
    width: 100%;

 src/menu/components/code/sandbox/editorcode/index.jsx

@@ -21,7 +21,8 @@
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    visible: false,
    html: '',
    css: ''
    css: '',
    js: ''
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -34,18 +35,19 @@
    this.setState({
      visible: true,
      html: config.html || '',
      css: config.css || ''
      css: config.css || '',
      js: config.js || '',
    })
  }

  verifySubmit = () => {
    const { config } = this.props
    const { html, css } = this.state
    const { html, css, js } = this.state

    this.setState({
      visible: false
    })
    this.props.updateConfig({...config, html, css})
    this.props.updateConfig({...config, html, css, js})
  }

  onHtmlChange = (val) => {
@@ -60,8 +62,14 @@
    })
  }

  onJsChange = (val) => {
    this.setState({
      js: val
    })
  }

  render () {
    const { visible, dict, html, css } = this.state
    const { visible, dict, html, css, js } = this.state

    return (
      <div style={{display: 'inline-block'}}>
@@ -79,10 +87,13 @@
        >
          <Tabs>
            <TabPane tab="HTML" key="HTML">
              <CodeMirror mode="text/xml" value={html} onChange={this.onHtmlChange} />
              <CodeMirror mode="text/xml" theme="cobalt" value={html} onChange={this.onHtmlChange} />
            </TabPane>
            <TabPane tab="CSS" key="CSS">
              <CodeMirror mode="text/css" value={css} onChange={this.onCssChange} />
              <CodeMirror mode="text/css" theme="cobalt" value={css} onChange={this.onCssChange} />
            </TabPane>
            <TabPane tab="JS" key="JS">
              <CodeMirror mode="text/javascript" theme="cobalt" value={js} onChange={this.onJsChange} />
            </TabPane>
          </Tabs>
        </Modal>

 src/menu/components/code/sandbox/editorcode/index.scss

@@ -4,11 +4,15 @@
    .ant-tabs-bar {
      margin: 0;
    }
    .ant-tabs-bar {
      border: 0;
    }

    .code-mirror-wrap .code-mirror-area {
      border-radius: 0;

      .CodeMirror {
        border-radius: 0;
        height: 400px;
      }
    }

 src/menu/components/code/sandbox/index.jsx

@@ -56,7 +56,8 @@
        columns: [],
        scripts: [],
        html: '',
        css: ''
        css: '',
        js: '',
      }

      if (card.config) {
@@ -67,6 +68,7 @@
        _card.style = config.style
        _card.html = config.html
        _card.css = config.css
        _card.js = config.js
      }
      
      this.setState({
@@ -167,7 +169,7 @@
        } trigger="hover">
          <Icon type="tool" />
        </Popover>
        <CodeContent html={card.html} css={card.css}/>
        <CodeContent name={card.name} html={card.html} css={card.css} js={card.js}/>
      </div>
    )
  }

 src/menu/components/share/usercomponent/index.jsx

@@ -55,6 +55,7 @@
    _config.plot = config.plot || {}
    _config.html = config.html || ''
    _config.css = config.css || ''
    _config.js = config.js || ''

    _config.width = _config.wrap.width || _config.plot.width || config.width || 24


 src/menu/popview/index.jsx

@@ -497,7 +497,7 @@

    config.components.forEach(item => {
      if (error) return
      if ((item.subtype === 'propcard' || item.subtype === 'brafteditor') && item.wrap.datatype === 'static') return
      if (['propcard', 'brafteditor', 'sandbox'].includes(item.subtype) && item.wrap.datatype === 'static') return

      if (item.setting) {
        if (item.setting.interType === 'system' && item.setting.execute !== 'false' && !item.setting.dataresource) {

 src/tabviews/custom/components/code/sand-box/index.jsx

New file
@@ -0,0 +1,222 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Spin, notification } from 'antd'

import Api from '@/api'
import UtilsDM from '@/utils/utils-datamanage.js'
import MKEmitter from '@/utils/events.js'
import './index.scss'

class SandBoxComponent extends Component {
  static propTpyes = {
    BID: PropTypes.any,              // 父级Id
    data: PropTypes.array,           // 统一查询数据
    config: PropTypes.object,        // 组件配置信息
    mainSearch: PropTypes.any,       // 外层搜索条件
    menuType: PropTypes.any,         // 菜单类型
  }

  state = {
    BID: '',                   // 上级ID
    config: null,              // 图表配置信息
    loading: false,            // 数据加载状态
    sync: false,               // 是否统一请求数据
    data: {},                  // 数据
    html: '',
  }

  UNSAFE_componentWillMount () {
    const { data, initdata, BID } = this.props
    let _config = fromJS(this.props.config).toJS()

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

      if (_sync && data) {
        _data = data[_config.dataName] || {}
        if (_data && Array.isArray(_data)) {
          _data = _data[0] || {}
        }
        _sync = false
      } else if (_sync && initdata) {
        _data = initdata || {}
        if (_data && Array.isArray(_data)) {
          _data = _data[0] || {}
        }
        _sync = false
      }
    } else {
      _data = {}
    }
    
    if (_config.css) {
      let ele = document.createElement('style')
      ele.innerHTML = _config.css
      document.getElementsByTagName('head')[0].appendChild(ele)
    }

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

  componentDidMount () {
    MKEmitter.addListener('reloadData', this.reloadData)
  }

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

  componentWillUnmount () {
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('reloadData', this.reloadData)
  }

  /**
   * @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]
        if (_data && Array.isArray(_data)) {
          _data = _data[0]
        }
      }

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

  reloadData = (menuId) => {
    const { config } = this.state

    if (menuId !== config.uuid) return

    this.loadData()
  }

  async loadData () {
    const { mainSearch, menuType } = this.props
    const { config, arr_field, BID } = this.state

    if (config.wrap.datatype === 'static') {
      this.setState({
        data: {},
        loading: false
      })
      return
    } else if (config.setting.supModule && !BID) { // BID 不存在时，不做查询
      this.setState({
        data: {},
        loading: false
      })
      return
    }

    let searches = []
    if (mainSearch && mainSearch.length > 0) { // 主表搜索条件
      searches = mainSearch
    }

    this.setState({
      loading: true
    })

    let _orderBy = config.setting.order || ''
    let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, 1, 1, BID, menuType)

    let result = await Api.genericInterface(param)
    if (result.status) {
      let _data = result.data && result.data[0] ? result.data[0] : {}

      this.setState({
        data: _data,
        loading: false
      }, () => {
        this.renderView()
      })
    } else {
      this.setState({
        loading: false
      })
      notification.error({
        top: 92,
        message: result.message,
        duration: 10
      })
    }
  }

  renderView = () => {
    const { data } = this.state
    const { html, js, wrap, columns } = this.state.config

    let _html = html
    if (_html && wrap.datatype !== 'static') {
      columns.forEach(col => {
        if (col.field) {
          let val = (data[col.field] || data[col.field] === 0) ? data[col.field] : ''
          let reg = new RegExp('@' + col.field + '@', 'ig')

          _html = _html.replace(reg, val)
        }
      })
    }
    this.setState({html: _html}, () => {
      if (js) {
        try {
          // eslint-disable-next-line no-eval
          eval(js)
        } catch {
          console.warn('JS 执行失败！')
        }
      }
    })
  }

  render() {
    const { config, loading, html } = this.state

    return (
      <div className="custom-sand-box" style={{...config.style}}>
        {loading ?
          <div className="loading-mask">
            <div className="ant-spin-blur"></div>
            <Spin />
          </div> : null
        }
        <div dangerouslySetInnerHTML={{ __html: html }}></div>
      </div>
    )
  }
}

export default SandBoxComponent

 src/tabviews/custom/components/code/sand-box/index.scss

New file
@@ -0,0 +1,34 @@
.custom-sand-box {
  background: #ffffff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

  .loading-mask {
    position: absolute;
    left: 40px;
    top: 0;
    right: 40px;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: justify;
    z-index: 1;

    .ant-spin-blur {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0.5;
      background: #ffffff;
    }
  }
}

.custom-sand-box::after {
  content: ' ';
  display: block;
  clear: both;
}

 src/tabviews/custom/components/editor/braft-editor/index.jsx

@@ -137,12 +137,7 @@

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

    this.setState({

 src/tabviews/custom/components/editor/braft-editor/index.scss

@@ -6,47 +6,6 @@
  min-height: 20px;
  position: relative;

  .card-row-list::after {
    content: ' ';
    display: block;
    clear: both;
  }

  .card-row-list {
    .card-item-box {
      background-color: #ffffff;
      transition: all 0.3s;
    }
    >.active >.card-item-box {
      border-color: #1890ff!important;
      box-shadow: 0 0 4px #1890ff;
    }
  }
  .card-row-list.radio, .card-row-list.checkbox {
    >.ant-col:not(.active):not(.selected):hover {
      >.card-item-box {
        border-color: #69c0ff!important;
        box-shadow: 0 0 4px #69c0ff!important;
      }
    }
  }
  .card-row-list.true {
    >.ant-col:hover {
      >.card-item-box {
        z-index: 1;
        transform: scale(1.05);
      }
    }
  }

  .card-item-box {
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.3s;
  }

  .loading-mask {
    position: absolute;
    left: 40px;

 src/tabviews/custom/components/group/normal-group/index.jsx

@@ -19,6 +19,7 @@
const TableCard = asyncComponent(() => import('@/tabviews/custom/components/card/table-card'))
const PropCard = asyncComponent(() => import('@/tabviews/custom/components/card/prop-card'))
const BraftEditor = asyncComponent(() => import('@/tabviews/custom/components/editor/braft-editor'))
const SandBox = asyncComponent(() => import('@/tabviews/custom/components/code/sand-box'))

class TabTransfer extends Component {
  static propTpyes = {
@@ -274,6 +275,12 @@
            <BraftEditor config={item} data={data} BID={_bid} mainSearch={mainSearch} menuType={menuType} />
          </Col>
        )
      } else if (item.type === 'code') {
        return (
          <Col span={item.width} key={item.uuid}>
            <SandBox config={item} data={data} BID={_bid} mainSearch={mainSearch} menuType={menuType} />
          </Col>
        )
      } else {
        return null
      }

 src/tabviews/custom/components/share/braftContent/index.scss

@@ -7,6 +7,7 @@
  }
  video {
    max-width: 100%;
    width: 100%;
  }
  table {
    width: 100%;

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

@@ -22,6 +22,7 @@
const PropCard = asyncComponent(() => import('@/tabviews/custom/components/card/prop-card'))
const NormalGroup = asyncComponent(() => import('@/tabviews/custom/components/group/normal-group'))
const BraftEditor = asyncComponent(() => import('@/tabviews/custom/components/editor/braft-editor'))
const SandBox = asyncComponent(() => import('@/tabviews/custom/components/code/sand-box'))

class TabTransfer extends Component {
  static propTpyes = {
@@ -311,6 +312,12 @@
            <BraftEditor config={item} data={data} BID={BID} mainSearch={mainSearch} menuType={menuType} />
          </Col>
        )
      } else if (item.type === 'code') {
        return (
          <Col span={item.width} key={item.uuid}>
            <SandBox config={item} data={data} BID={BID} mainSearch={mainSearch} menuType={menuType} />
          </Col>
        )
      } else {
        return null
      }

 src/tabviews/custom/index.jsx

@@ -27,6 +27,7 @@
const NormalTable = asyncComponent(() => import('./components/table/normal-table'))
const NormalGroup = asyncComponent(() => import('./components/group/normal-group'))
const BraftEditor = asyncComponent(() => import('./components/editor/braft-editor'))
const SandBox = asyncComponent(() => import('./components/code/sand-box'))
const SettingComponent = asyncComponent(() => import('@/tabviews/zshare/settingcomponent'))
const PagemsgComponent = asyncComponent(() => import('@/tabviews/zshare/pageMessage'))

@@ -483,7 +484,7 @@
        return component
      }

      if ((component.subtype === 'propcard' || component.subtype === 'brafteditor') && component.wrap.datatype === 'static') {
      if (['propcard', 'brafteditor', 'sandbox'].includes(component.subtype) && component.wrap.datatype === 'static') {
        component.format = ''
      }

@@ -833,6 +834,12 @@
            <BraftEditor config={item} data={data} BID={_bid} mainSearch={mainSearch} menuType={menuType} />
          </Col>
        )
      } else if (item.type === 'code') {
        return (
          <Col span={item.width} key={item.uuid}>
            <SandBox config={item} data={data} BID={_bid} mainSearch={mainSearch} menuType={menuType} />
          </Col>
        )
      } else {
        return null
      }

 src/tabviews/zshare/actionList/normalbutton/index.jsx

@@ -927,6 +927,7 @@
        let param = this.state.checkParam
        confirm({
          title: res.message || res.ErrMesg,
          content: '继续执行？',
          onOk() {
            return new Promise(resolve => {
              Api.genericInterface(param).then((result) => {
@@ -1198,9 +1199,9 @@
   */
  getModels = () => {
    const { setting, BID, btn } = this.props
    const { btnconfig } = this.state
    const { btnconfig, visible } = this.state

    if (!this.state.visible || !btnconfig || !btnconfig.setting) return null
    if (!btnconfig || !btnconfig.setting) return null

    let title = btnconfig.setting.title
    let width = btnconfig.setting.width + 'vw'
@@ -1225,7 +1226,7 @@
        maskClosable={clickouter}
        getContainer={container}
        wrapClassName='action-modal'
        visible={this.state.visible}
        visible={visible}
        width={width}
        onOk={this.handleOk}
        confirmLoading={this.state.confirmLoading}
@@ -1248,7 +1249,7 @@

  render() {
    const { btn, show, style } = this.props
    const { loadingNumber, loading } = this.state
    const { loadingNumber, loading, visible } = this.state

    if (show === 'actionList') {
      return <div style={{display: 'inline-block'}} onClick={(e) => e.stopPropagation()}>
@@ -1259,7 +1260,7 @@
          className={'mk-btn mk-' + btn.class}
          onClick={() => {this.actionTrigger()}}
        >{loadingNumber ? `(${loadingNumber})` : '' + btn.label}</Button>
        {this.getModels()}
        {visible ? this.getModels() : null}
      </div>
    } else if (show && show.indexOf('plus') > -1) {
      return <div className="mk-btn-wrap">
@@ -1270,7 +1271,7 @@
          style={{fontSize: show.substring(4) + 'px'}}
          onClick={() => {this.actionTrigger()}}
        ></Button>
        {this.getModels()}
        {visible ? this.getModels() : null}
      </div>
    } else { // icon、text、 all 卡片
      return <div style={{display: 'inline-block'}} onClick={(e) => e.stopPropagation()}>
@@ -1282,7 +1283,7 @@
          icon={show === 'text' ? '' : (btn.icon || '')}
          onClick={() => {this.actionTrigger()}}
        >{show === 'icon' && btn.icon ? '' : btn.label}</Button>
        {this.getModels()}
        {visible ? this.getModels() : null}
      </div>
    }
  }

 src/templates/zshare/verifycard/customscript/index.jsx

@@ -263,7 +263,12 @@
            </Button>
          </Col>
          <Col span={24} className="sql">
            <Form.Item label={'sql'}>
            <Form.Item label={
              <Tooltip placement="topLeft" title={'数据检查替换符 $check@ -> /* 或 \'\'、 @check$ -> */ 或 \'\''}>
                <Icon type="question-circle" />
                sql
              </Tooltip>
            }>
              {getFieldDecorator('sql', {
                initialValue: '',
                rules: [

 src/views/billprint/index.jsx

@@ -22,6 +22,7 @@
const TableCard = asyncComponent(() => import('@/tabviews/custom/components/card/table-card'))
const NormalTable = asyncComponent(() => import('@/tabviews/custom/components/table/normal-table'))
const BraftEditor = asyncComponent(() => import('@/tabviews/custom/components/editor/braft-editor'))
const SandBox = asyncComponent(() => import('@/tabviews/custom/components/code/sand-box'))

class BillPrint extends Component {
  state = {
@@ -155,7 +156,7 @@
          if (component.search) component.search = []
          component.data = [] // 初始化数据为空

          if ((component.subtype === 'propcard' || component.subtype === 'brafteditor') && component.wrap.datatype === 'static') {
          if (['propcard', 'brafteditor', 'sandbox'].includes(component.subtype) && component.wrap.datatype === 'static') {
            component.format = ''
          }
    
@@ -577,6 +578,12 @@
            <BraftEditor config={item} initdata={item.data} mainSearch={[]} menuType="" />
          </Col>
        )
      } else if (item.type === 'code') {
        return (
          <Col span={item.width} key={item.uuid}>
            <SandBox config={item} initdata={item.data} mainSearch={[]} menuType="" />
          </Col>
        )
      } else {
        return null
      }

 src/views/menudesign/index.jsx

@@ -792,7 +792,7 @@

    config.components.forEach(item => {
      if (error) return
      if ((item.subtype === 'propcard' || item.subtype === 'brafteditor') && item.wrap.datatype === 'static') return
      if (['propcard', 'brafteditor', 'sandbox'].includes(item.subtype) && item.wrap.datatype === 'static') return

      if (item.setting) {
        if (item.setting.interType === 'system' && item.setting.execute !== 'false' && !item.setting.dataresource) {