2022-11-21

king

2022-11-21 4c9741f851155a3ccbe7e1c1f36246575646d709

2022-11-21

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

@@ -4,85 +4,77 @@

import './index.scss'

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

  state = {
    csselement: null
  }
  state = {}

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

    if (css) {
      // let style = css.replace(/^[^}{]*{|}[^}{]*{/ig, (word) => {
      //   return word.replace(/}\n*/ig, `}\n#${mark}`).replace(/,/ig, `,#${mark} `)
      // })
      // style = `\n/* 自定义 */\n#${mark} ${style}\n`

    if (config.css) {
      let node = document.getElementById(config.uuid + 'style')
      node && node.remove()
      
      let ele = document.createElement('style')
      ele.innerHTML = css
      ele.id = config.uuid + 'style'
      ele.innerHTML = config.css
      document.getElementsByTagName('head')[0].appendChild(ele)
      // document.getElementsByTagName('head')[0].prepend(ele)

      this.setState({csselement: ele})
    }
  }

  componentDidMount () {
    const { js, name } = this.props
    if (js) {
    const { config } = this.props
    if (config.js && config.wrap.compileMode !== 'custom') {
      try {
        // eslint-disable-next-line no-eval
        eval(js)
        eval(config.js)
      } catch (e) {
        message.warning(name + 'JS 执行失败！')
        message.warning(config.name + 'JS 执行失败！')
        console.warn(config.name + e)
      }
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.css !== nextProps.css) {
      const { csselement } = this.state
      
      if (csselement && csselement.remove) {
        csselement.remove()
      }
      if (nextProps.css) {
        let ele = document.createElement('style')
        ele.innerHTML = nextProps.css
        document.getElementsByTagName('head')[0].appendChild(ele)
    const { config } = this.props

        this.setState({csselement: ele})
    if (config.css !== nextProps.config.css) {
      let node = document.getElementById(config.uuid + 'style')
      node && node.remove()

      if (nextProps.config.css) {
        let ele = document.createElement('style')
        ele.id = config.uuid + 'style'
        ele.innerHTML = nextProps.config.css
        document.getElementsByTagName('head')[0].appendChild(ele)
      }
    }
    if (this.props.html !== nextProps.html || this.props.js !== nextProps.js) {
      if (nextProps.js) {
    if (config.html !== nextProps.config.html || config.js !== nextProps.config.js) {
      if (nextProps.config.js && nextProps.config.wrap.compileMode !== 'custom') {
        try {
          // eslint-disable-next-line no-eval
          eval(nextProps.js)
          eval(nextProps.config.js)
        } catch (e) {
          message.warning(nextProps.name + 'JS 执行失败！')
          message.warning(config.name + 'JS 执行失败！')
          console.warn(config.name + e)
        }
      }
    }
  }

  render() {
    const { html } = this.props
    const { config } = this.props

    if (!html) return <Empty style={{padding: '10px 0px'}} description={null}/>
    if (!config.html) return <Empty style={{padding: '10px 0px'}} description={null}/>

    return (
      <div dangerouslySetInnerHTML={{ __html: html }}></div>
      <div dangerouslySetInnerHTML={{ __html: config.html }}></div>
    )
  }
}


export default BraftContent
export default CodeContent

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

@@ -38,7 +38,7 @@
      let _card = {
        uuid: card.uuid,
        type: card.type,
        format: 'object',   // 组件属性 - 数据格式
        format: 'array',    // 组件属性 - 数据格式
        pageable: false,    // 组件属性 - 是否可分页
        switchable: false,  // 组件属性 - 数据是否可切换
        width: card.width || 24,
@@ -71,8 +71,11 @@
      
      this.updateComponent(_card)
    } else {
      let _card = fromJS(card).toJS()
      _card.format = 'array'

      this.setState({
        card: fromJS(card).toJS()
        card: _card
      })
    }
  }
@@ -168,7 +171,7 @@
            <NormalForm title="自定义组件设置" width={700} update={this.updateWrap} getForms={this.getWrapForms}>
              <EditOutlined style={{color: '#1890ff'}} title="编辑"/>
            </NormalForm>
            <CopyComponent type="normaltable" card={card}/>
            <CopyComponent type="sandbox" card={card}/>
            <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/>
            <UserComponent config={card}/>
            <DeleteOutlined className="close" title="删除组件" onClick={() => this.props.deletecomponent(card.uuid)} />
@@ -179,7 +182,7 @@
        } trigger="hover">
          <ToolOutlined />
        </Popover>
        <CodeContent name={card.name} html={card.html} css={card.css} js={card.js}/>
        <CodeContent config={card}/>
        <div className="component-name">
          <div className="center">
            <div className="title">{card.name}</div>

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

@@ -45,6 +45,20 @@
      options: [
        {value: 'dynamic', label: '动态'},
        {value: 'static', label: '静态'},
      ],
      controlFields: [
        {field: 'compileMode', values: ['dynamic']}
      ]
    },
    {
      type: 'radio',
      field: 'compileMode',
      label: '编译方式',
      initval: wrap.compileMode || 'replace',
      required: false,
      options: [
        {value: 'replace', label: '字段替换'},
        {value: 'custom', label: '自定义'},
      ]
    },
    {

 src/menu/components/group/paste/index.jsx

@@ -24,7 +24,7 @@

  pasteSubmit = () => {
    let appType = sessionStorage.getItem('appType')
    let options = ['datacard', 'propcard', 'balcony', 'timeline', 'simpleform', 'stepform', 'tabform', 'normaltable', 'tablecard', 'line', 'bar', 'pie', 'dashboard', 'scatter', 'chart']
    let options = ['datacard', 'propcard', 'balcony', 'timeline', 'simpleform', 'stepform', 'tabform', 'normaltable', 'tablecard', 'line', 'bar', 'pie', 'dashboard', 'scatter', 'chart', 'sandbox']
    let types = {
      login: '登录',
      navbar: '导航栏',

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

@@ -48,6 +48,7 @@

      _val = window.btoa(window.encodeURIComponent(JSON.stringify(_val)))
    } catch (e) {
      console.warn(e)
      message.warning('复制失败，请重试！')
      _val = ''
    }

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

@@ -144,9 +144,13 @@
    _columns.unshift({field: '$Index', label: '序号'})

    let options = _columns.map(col => {
      let label = col.label
      if (col.label.toLowerCase() !== col.field.toLowerCase()) {
        label += `（${col.field}）`
      }
      return {
        value: col.field,
        label: col.label,
        label: label,
        isLeaf: false,
        children: [
          {
@@ -157,9 +161,13 @@
            value: 'dynamic',
            label: '动态值',
            children: _columns.map(cell => {
              let _label = cell.label
              if (cell.label.toLowerCase() !== cell.field.toLowerCase()) {
                _label += `（${cell.field}）`
              }
              return {
                value: cell.field,
                label: cell.label
                label: _label
              }
            })
          }

 src/menu/components/tabs/paste/index.jsx

@@ -60,7 +60,7 @@
  pasteSubmit = () => {
    const { Tab } = this.props
    let appType = sessionStorage.getItem('appType')
    let options = ['tabs', 'group', 'datacard', 'propcard', 'timeline', 'balcony', 'normaltable', 'mainsearch', 'simpleform', 'stepform', 'tabform', 'tablecard', 'line', 'bar', 'pie', 'dashboard', 'scatter', 'chart']
    let options = ['tabs', 'group', 'datacard', 'propcard', 'timeline', 'balcony', 'normaltable', 'mainsearch', 'simpleform', 'stepform', 'tabform', 'tablecard', 'line', 'bar', 'pie', 'dashboard', 'scatter', 'chart', 'sandbox']
    let types = {
      login: '登录',
      navbar: '导航栏',

 src/menu/pastecontroller/index.jsx

@@ -59,7 +59,7 @@

  pasteSubmit = () => {
    let appType = sessionStorage.getItem('appType')
    let options = ['tabs', 'timeline', 'datacard', 'propcard', 'mainsearch', 'simpleform', 'stepform', 'tabform', 'balcony', 'group', 'normaltable', 'tablecard', 'line', 'bar', 'pie', 'dashboard', 'scatter', 'iframe']
    let options = ['tabs', 'timeline', 'datacard', 'propcard', 'mainsearch', 'simpleform', 'stepform', 'tabform', 'balcony', 'group', 'normaltable', 'tablecard', 'line', 'bar', 'pie', 'dashboard', 'scatter', 'iframe', 'sandbox']

    if (appType === 'mob') {
      options.push('menubar', 'topbar')

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

@@ -48,15 +48,9 @@

      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 {
@@ -64,7 +58,11 @@
    }
    
    if (_config.css) {
      let node = document.getElementById(_config.uuid)
      node && node.remove()

      let ele = document.createElement('style')
      ele.id = _config.uuid
      ele.innerHTML = _config.css
      document.getElementsByTagName('head')[0].appendChild(ele)
    }
@@ -110,9 +108,6 @@
      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}, () => {
@@ -167,7 +162,7 @@

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

      this.setState({
        data: _data,
@@ -192,23 +187,34 @@
    const { html, js, wrap, columns } = this.state.config

    let _html = html
    if (_html && wrap.datatype !== 'static') {
    if (_html && wrap.datatype !== 'static' && wrap.compileMode !== 'custom') {
      let _data = data
      if (Array.isArray(_data)) {
        _data = _data[0] || {}
      }
      columns.forEach(col => {
        if (col.field) {
          let val = (data[col.field] || data[col.field] === 0) ? data[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)
          if (wrap.compileMode !== 'custom') {
            // eslint-disable-next-line no-eval
            eval(js)
          } else {
            // eslint-disable-next-line
            let evalfunc = eval('(true && function (data) {' + js + '})')
            evalfunc(data)
          }
        } catch (e) {
          console.warn('JS 执行失败！')
          console.warn(e)
        }
      }
    })