2021-01-15

king

2021-01-15 ddddb07002201150da9551875c25e75499563249

2021-01-15

 src/assets/css/main.scss

@@ -256,7 +256,31 @@
}

.ant-modal.popview-modal {
  top: 80px;
  top: 70px;
  .ant-modal-body {
    min-height: 250px;
    max-height: calc(100vh - 210px);
    overflow-y: auto;
  }
  .ant-modal-body::-webkit-scrollbar {
    width: 7px;
  }
  .ant-modal-body::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
    background: rgba(0, 0, 0, 0.13);
  }
  .ant-modal-body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0);
  }
}
.ant-modal-wrap.popview-modal {
  .ant-modal {
    top: 70px;
  }
  .ant-modal-body {
    min-height: 250px;
    max-height: calc(100vh - 210px);

 src/components/header/index.jsx

@@ -25,6 +25,7 @@
import enUS from '@/locales/en-US/main.js'
import Utils from '@/utils/utils.js'
import avatar from '@/assets/img/avatar.jpg'
import MainLogo from '@/assets/img/main-logo.png'
import Resetpwd from './resetpwd'
import LoginForm from './loginform'
import './index.scss'
@@ -746,7 +747,7 @@

    return (
      <header className="header-container ant-menu-dark" id="main-header-container">
        <div className={'header-logo ' + (collapse ? 'collapse' : '')}><img src={this.state.logourl} alt=""/></div>
        <div className={'header-logo ' + (collapse ? 'collapse' : '')}><img src={!this.props.editState ? this.state.logourl : MainLogo} alt=""/></div>
        <div className={'header-collapse ' + (collapse ? 'collapse' : '')}>
          {menulist && menulist.length ? <Icon type={collapse ? 'menu-unfold' : 'menu-fold'} onClick={this.handleCollapse}/> : null}
        </div>

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

@@ -52,16 +52,17 @@
        pageable: true,    // 组件属性 - 是否可分页
        switchable: true,  // 组件属性 - 数据是否可切换
        dataName: card.dataName || '',
        width: 24,
        width: card.width || 24,
        name: card.name,
        subtype: card.subtype,
        setting: { interType: 'system' },
        wrap: { name: card.name, width: 24, title: '', pagestyle: 'page', switch: 'false' },
        wrap: { name: card.name, width: card.width || 24, title: '', pagestyle: 'page', switch: 'false' },
        style: { marginLeft: '0px', marginRight: '0px', marginTop: '8px', marginBottom: '8px' },
        headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' },
        columns: [],
        scripts: [],
        action: [],
        search: [],
        btnlog: [],
        subcards: [{
          uuid: Utils.getuuid(),
@@ -80,8 +81,8 @@
      if (card.config) {
        let config = fromJS(card.config).toJS()

        _card.setting = config.setting
        _card.wrap = config.wrap
        _card.wrap.name = card.name
        _card.style = config.style
        _card.headerStyle = config.headerStyle

@@ -97,15 +98,11 @@
          })
          return scard
        })
        _card.columns = config.columns.map(col => {
          col.uuid = Utils.getuuid()
          return col
        })
        _card.scripts = config.scripts.map(col => {
          col.uuid = Utils.getuuid()
          return col
        })
        _card.action = config.action.map(col => {
          col.uuid = Utils.getuuid()
          return col
        })
        _card.search = config.search.map(col => {
          col.uuid = Utils.getuuid()
          return col
        })
@@ -118,6 +115,7 @@
    } else {
      card.action = card.action || [] // 兼容
      card.search = card.search || [] // 兼容

      this.setState({
        card: fromJS(card).toJS()
      })

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

@@ -51,11 +51,11 @@
        pageable: false,    // 组件属性 - 是否可分页
        switchable: true,  // 组件属性 - 数据是否可切换
        dataName: card.dataName || '',
        width: 24,
        width: card.width || 24,
        name: card.name,
        subtype: card.subtype,
        setting: { interType: 'system' },
        wrap: { name: card.name, width: 24, title: '', addable: 'false', switch: 'false', datatype: 'static' },
        wrap: { name: card.name, width: card.width || 24, title: '', addable: 'false', switch: 'false', datatype: 'static' },
        style: { marginLeft: '0px', marginRight: '0px', marginTop: '8px', marginBottom: '8px' },
        headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' },
        columns: [],
@@ -78,8 +78,8 @@
      if (card.config) {
        let config = fromJS(card.config).toJS()

        _card.setting = config.setting
        _card.wrap = config.wrap
        _card.wrap.name = card.name
        _card.style = config.style
        _card.headerStyle = config.headerStyle

@@ -94,14 +94,6 @@
            return elem
          })
          return scard
        })
        _card.columns = config.columns.map(col => {
          col.uuid = Utils.getuuid()
          return col
        })
        _card.scripts = config.scripts.map(col => {
          col.uuid = Utils.getuuid()
          return col
        })
      }
      this.setState({
@@ -309,8 +301,10 @@

      card.btnlog = logs

      this.setState({ card: {...card, subcards: []} }, () => {
      this.setState({ card })
      this.props.updateConfig(card)
      })
      if (!done) {
        notification.warning({
          top: 92,

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

@@ -19,6 +19,7 @@
const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent'))
const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent'))
const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))

const { confirm } = Modal
@@ -40,29 +41,6 @@
    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
          })
          return scard
        })
      } else {
        subcards = [{
          uuid: Utils.getuuid(),
          setting: { width: 24, type: 'simple'},
          style: {
            paddingTop: '5px', paddingBottom: '5px', paddingLeft: '15px', paddingRight: '15px',
          },
          elements: []
        }]
      }

      let _card = {
        uuid: card.uuid,
        type: card.type,
@@ -73,20 +51,48 @@
        pageable: true,     // 组件属性 - 是否可分页
        switchable: false,  // 组件属性 - 数据是否可切换
        dataName: card.dataName || '',
        width: 12,
        width: card.width || 12,
        search: [],
        name: card.name,
        subtype: card.subtype,
        setting: { interType: 'system' },
        wrap: { name: card.name, width: 12, title: '' },
        wrap: { name: card.name, width: card.width || 12, title: '' },
        style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' },
        headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' },
        columns: [],
        scripts: [],
        subcards: subcards,
        subcards: [{
          uuid: Utils.getuuid(),
          setting: { width: 24, type: 'simple'},
          style: {
            paddingTop: '5px', paddingBottom: '5px', paddingLeft: '15px', paddingRight: '15px',
          },
          elements: []
        }],
        btnlog: [],
      }
      
      if (card.config) {
        let config = fromJS(card.config).toJS()

        _card.wrap = config.wrap
        _card.wrap.name = card.name
        _card.style = config.style
        _card.headerStyle = config.headerStyle

        _card.subcards = config.subcards.map(scard => {
          scard.uuid = Utils.getuuid()
          scard.elements = scard.elements.map(elem => {
            elem.uuid = Utils.getuuid()
            return elem
          })
          return scard
        })
        _card.search = config.search.map(col => {
          col.uuid = Utils.getuuid()
          return col
        })
      }
      this.setState({
        card: _card
      })
@@ -331,6 +337,7 @@
            <PasteComponent config={card} options={['cardcell', 'search', 'form']} updateConfig={this.updateComponent} />
            <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
            <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} />
            <UserComponent config={card}/>
            <Icon className="close" title="删除组件" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
            {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null}
          </div>

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

@@ -23,6 +23,7 @@
const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))
const ActionComponent = asyncComponent(() => import('@/menu/components/share/actioncomponent'))
const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent'))

class antvBarLineChart extends Component {
  static propTpyes = {
@@ -46,7 +47,7 @@
        enabled: 'false',     // 是否使用自定义设置
        datatype: 'query',    // 数据类型查询或统计
        customs: [],
        width: 24,
        width: card.width || 24,
        height: 400,
        barSize: 35,
        name: card.name
@@ -89,6 +90,24 @@
        action: [],
        plot: _plot,
        btnlog: [],
      }

      if (card.config) {
        let config = fromJS(card.config).toJS()

        _card.plot = config.plot
        _card.plot.name = card.name
        _card.style = config.style
        _card.headerStyle = config.headerStyle

        _card.action = config.action.map(col => {
          col.uuid = Utils.getuuid()
          return col
        })
        _card.search = config.search.map(col => {
          col.uuid = Utils.getuuid()
          return col
        })
      }
      this.setState({
        card: _card
@@ -202,7 +221,7 @@
        dv.transform({
          type: 'map',
          callback(row) {
            row.key = transfield[row.key]
            row.key = transfield[row.key] || row.key
            return row
          },
        })
@@ -272,12 +291,12 @@
        .line()
        .position(`${X_axis}*value`)
        .shape(plot.shape || 'smooth')
        .tooltip(`${X_axis}*value`, (name, value) => {
        .tooltip(`${X_axis}*value*key`, (name, value, type) => {
          if (plot.show === 'percent') {
            value = value + '%'
          }
          return {
            name: name,
            name: type,
            value: value
          }
        })
@@ -460,12 +479,12 @@
          .position(`${plot.Xaxis}*${item.name}`)
          .color(item.color)
          .shape(item.shape)
          .tooltip(`${plot.Xaxis}*${item.name}`, (name, value) => {
          .tooltip(`${item.name}`, (value) => {
            if (plot.show === 'percent') {
              value = value + '%'
            }
            return {
              name: name,
              name: item.name,
              value: value
            }
          })
@@ -492,12 +511,12 @@
          .position(`${plot.Xaxis}*${item.name}`)
          .color(item.color)
          .shape(item.shape)
          .tooltip(`${plot.Xaxis}*${item.name}`, (name, value) => {
          .tooltip(`${item.name}`, (value) => {
            if (plot.show === 'percent') {
              value = value + '%'
            }
            return {
              name: name,
              name: item.name,
              value: value
            }
          })
@@ -564,7 +583,7 @@
        dv.transform({
          type: 'map',
          callback(row) {
            row.key = transfield[row.key]
            row.key = transfield[row.key] || row.key
            return row
          },
        })
@@ -636,12 +655,12 @@
            }
          ])
          .shape(plot.shape || 'rect')
          .tooltip(`${X_axis}*value`, (name, value) => {
          .tooltip(`${X_axis}*value*key`, (name, value, key) => {
            if (plot.show === 'percent') {
              value = value + '%'
            }
            return {
              name: name,
              name: key,
              value: value
            }
          })
@@ -682,12 +701,12 @@
          .position(`${X_axis}*value`)
          .adjust('stack')
          .shape(plot.shape || 'rect')
          .tooltip(`${X_axis}*value`, (name, value) => {
          .tooltip(`${X_axis}*value*key`, (name, value, type) => {
            if (plot.show === 'percent') {
              value = value + '%'
            }
            return {
              name: name,
              name: type,
              value: value
            }
          })
@@ -875,6 +894,7 @@
            <PasteComponent config={card} options={['action', 'search', 'form']} updateConfig={this.updateComponent} />
            <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
            <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} />
            <UserComponent config={card}/>
            <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
            <SettingComponent config={card} updateConfig={this.updateComponent}/>
          </div>

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

@@ -21,6 +21,7 @@
const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent'))
const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))
const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent'))

class antvBarLineChart extends Component {
  static propTpyes = {
@@ -41,7 +42,7 @@
    if (card.isNew) {
      let _plot = {
        shape: card.subtype, // 图表类型
        width: 12,
        width: card.width || 12,
        height: 400,
        label: 'outer',
        name: card.name
@@ -77,6 +78,21 @@
        plot: _plot,
        btnlog: [],
      }

      if (card.config) {
        let config = fromJS(card.config).toJS()

        _card.plot = config.plot
        _card.plot.name = card.name
        _card.style = config.style
        _card.headerStyle = config.headerStyle

        _card.search = config.search.map(col => {
          col.uuid = Utils.getuuid()
          return col
        })
      }

      this.props.updateConfig(_card)
      this.setState({
        card: _card
@@ -441,6 +457,7 @@
            <PasteComponent config={card} options={['search', 'form']} updateConfig={this.updateComponent} />
            <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
            <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} />
            <UserComponent config={card}/>
            <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
            <SettingComponent config={card} updateConfig={this.updateComponent}/>
          </div>

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

@@ -22,7 +22,7 @@
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    visible: false,
    loading: false,
    name: ''
    name: '',
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -39,13 +39,110 @@
    })
  }

  getUserComponent = () => {
    let config = fromJS(this.props.config).toJS()
    let _config = {}

    _config.wrap = config.wrap || {}
    _config.type = config.type || ''
    _config.subtype = config.subtype || ''
    _config.style = config.style || {}
    _config.subcards = config.subcards || []
    _config.headerStyle = config.headerStyle || {}
    _config.action = config.action || []
    _config.search = config.search || []
    _config.cols = config.cols || []
    _config.plot = config.plot || {}

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

    _config.subcards = _config.subcards.map(card => {
      if (card.elements) {
        card.elements = card.elements.map(item => this.resetElement(item))
      }
      if (card.backElements) {
        card.backElements = card.backElements.map(item => this.resetElement(item))
      }
      return card
    })
    _config.action = _config.action.map(item => {
      item.verify = null
      return item
    })
    _config.search = _config.search.map(item => {
      if (item.resourceType === '1') {
        item.resourceType = '0'
        item.dataSource = ''
        item.valueText = ''
        item.valueText = ''
        item.options = ''
      }
      item.blacklist = []
      return item
    })

    _config.cols = _config.cols.map(col => {
      if (col.type === 'colspan' && col.subcols) {
        col = this.loopCol(col)
      } else if (col.type === 'custom' && col.elements) {
        col.elements = col.elements.map(cell => this.resetElement(cell))
      } else if (col.type === 'action' && col.elements) {
        col.elements = col.elements.map(cell => {
          cell.verify = null
          return cell
        })
      }
      col.marks = null
      return col
    })

    return _config
  }

  loopCol = (col) => {
    col.subcols = col.subcols.map(c => {
      if (c.type === 'colspan' && c.subcols) {
        c = this.loopCol(c)
      } else if (c.type === 'custom' && c.elements) {
        c.elements = c.elements.map(cell => this.resetElement(cell))
      }
      c.marks = null
      return c
    })

    return col
  }

  resetElement = (item) => {
    item.marks = null
    item.verify = null

    if (item.datatype === 'dynamic') {
      if (item.eleType ===  'icon') {
        item.tooltip = item.field
      } else if (item.eleType === 'slider') {
        item.value = 50
      } else {
        item.value = item.field
      }
      
      item.datatype = 'static'
      item.field = ''
    }
    if (item.link === 'dynamic') {
      item.link = 'static'
    }
    return item
  }

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

    this.verifyRef.handleConfirm().then(res => {
      this.setState({loading: true})
      document.getElementsByClassName('menu-view')[0].classList.add('saving')

      this.setState({loading: true})
      setTimeout(() => {
        let template = this.getUserComponent()
      html2canvas(document.getElementById(config.uuid)).then(canvas => {
        let img = canvas.toDataURL('image/png') // 获取生成的图片
        Api.fileuploadbase64(img, 'cloud').then(result => {
@@ -55,7 +152,7 @@
              c_id: config.uuid,
              images: Utils.getcloudurl(result.Images),
              c_name: res.name,
              long_param: window.btoa(window.encodeURIComponent(JSON.stringify(config))),
                long_param: window.btoa(window.encodeURIComponent(JSON.stringify(template))),
              del_type: ''
            }).then(response => {
              if (response.status) {
@@ -86,6 +183,7 @@
          }
        })
      })
      }, 300)
    })
  }


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

@@ -69,6 +69,10 @@
                    {
                      required: true,
                      message: this.props.dict['form.required.input'] + '组件名称!'
                    },
                    {
                      max: 15,
                      message: '组件名称最多15个字符!'
                    }
                  ]
                })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit}/>)}

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

@@ -19,6 +19,7 @@
const ActionComponent = asyncComponent(() => import('@/menu/components/share/actioncomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))
const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent'))
const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent'))
const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent'))
const ColumnComponent = asyncComponent(() => import('./columns'))
@@ -53,7 +54,7 @@
        pageable: true,     // 组件属性 - 是否可分页
        switchable: true,   // 组件属性 - 数据是否可切换
        dataName: card.dataName || '',
        width: 24,
        width: card.width || 24,
        search: [
          { origin: true, uuid: Utils.getuuid(), label: 'label', type: 'text', match: 'like' },
          { origin: true, uuid: Utils.getuuid(), label: 'label', type: 'select', match: 'equal' },
@@ -67,7 +68,7 @@
        name: card.name,
        subtype: card.subtype,
        setting: { interType: 'system' },
        wrap: { name: card.name, width: 24, bordered: 'true', tableType: 'checkbox' },
        wrap: { name: card.name, width: card.width || 24, bordered: 'true', tableType: 'checkbox' },
        style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' },
        headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' },
        columns: [],
@@ -78,6 +79,41 @@
        ],
        scripts: [],
        btnlog: [],
      }

      if (card.config) {
        let config = fromJS(card.config).toJS()

        _card.wrap = config.wrap
        _card.wrap.name = card.name
        _card.style = config.style
        _card.headerStyle = config.headerStyle

        _card.action = config.action.map(item => {
          item.uuid = Utils.getuuid()
          return item
        })
        _card.search = config.search.map(item => {
          item.uuid = Utils.getuuid()
          return item
        })
        _card.cols = config.cols.map(col => {
          col.uuid = Utils.getuuid()
          if (col.type === 'colspan' && col.subcols) {
            col = this.loopCol(col)
          } else if (col.type === 'custom' && col.elements) {
            col.elements = col.elements.map(cell => {
              cell.uuid = Utils.getuuid()
              return cell
            })
          } else if (col.type === 'action' && col.elements) {
            col.elements = col.elements.map(cell => {
              cell.uuid = Utils.getuuid()
              return cell
            })
          }
          return col
        })
      }
      
      this.setState({
@@ -111,6 +147,23 @@
    MKEmitter.removeListener('submitStyle', this.getStyle)
    MKEmitter.removeListener('submitModal', this.handleSave)
    MKEmitter.removeListener('logButton', this.logButton)
  }

  loopCol = (col) => {
    col.subcols = col.subcols.map(c => {
      c.uuid = Utils.getuuid()
      if (c.type === 'colspan' && c.subcols) {
        c = this.loopCol(c)
      } else if (c.type === 'custom' && c.elements) {
        c.elements = c.elements.map(cell => {
          cell.uuid = Utils.getuuid()
          return cell
        })
      }
      return c
    })

    return col
  }

  /**
@@ -341,6 +394,7 @@
            <PasteComponent config={card} options={['action', 'search', 'form', 'cols']} updateConfig={this.updateComponent} />
            <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
            <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} />
            <UserComponent config={card}/>
            <Icon className="close" title="删除组件" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
            <SettingComponent config={card} updateConfig={this.updateComponent} />
          </div>

 src/menu/header/index.jsx

@@ -2,11 +2,11 @@
import { is, fromJS } from 'immutable'

import avatar from '@/assets/img/avatar.jpg'
import MainLogo from '@/assets/img/main-logo.png'
import './index.scss'

class MenuHeader extends Component {
  state = {
    logourl: window.GLOB.mainlogo,
    avatar: sessionStorage.getItem('CloudAvatar') || avatar,
    userName: sessionStorage.getItem('CloudUserName')
  }
@@ -19,7 +19,7 @@

    return (
      <header className="menu-header-container">
        <div className="header-logo"><img src={this.state.logourl} alt=""/></div>
        <div className="header-logo"><img src={MainLogo} alt=""/></div>
          <div className="header-setting">
            <img src={this.state.avatar} alt=""/>
            <span>

 src/menu/modelsource/dragsource/index.jsx

@@ -1,13 +1,14 @@
import React from 'react'
import { useDrag } from 'react-dnd'
import { Icon } from 'antd'
import './index.scss'

const MobSourceElement = ({content}) => {
  const [, drag] = useDrag({ item: content })
const MobSourceElement = ({item, triggerDel}) => {
  const [, drag] = useDrag({ item })
  return (
    <div className="menu-source-item">
      <div className="property"><span>{content.title}</span></div>
      <img ref={drag} src={content.url} alt=""/>
      <div className="property"><span>{item.title}</span>{item.config ? <Icon onClick={() => triggerDel(item)} type="close-circle" /> : null}</div>
      <img ref={drag} src={item.url} alt=""/>
    </div>
  )
}

 src/menu/modelsource/dragsource/index.scss

@@ -8,6 +8,15 @@
  .property {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    margin-bottom: 2px;

    .anticon-close-circle {
      opacity: 0;
      cursor: pointer;
      padding: 0 3px;
      color: #ff4d4f;
      transition: all 0.3s;
    }
  }

  img {
@@ -23,6 +32,12 @@
  }
}

.menu-source-item:hover .property {
  .anticon-close-circle {
    opacity: 1;
  }
}

.menu-source-tooltip-box {
  margin-left: 20px;
  .ant-tooltip-content {

 src/menu/modelsource/index.jsx

@@ -1,9 +1,14 @@
import React, {Component} from 'react'
import { is, fromJS } from 'immutable'
import { Modal, notification } from 'antd'

import Api from '@/api'
import { menuOptions } from './option'
import SourceWrap from './dragsource'
import MKEmitter from '@/utils/events.js'
import './index.scss'

const { confirm } = Modal

class ModelSource extends Component {
  state = {
@@ -27,8 +32,53 @@
    })
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (nextProps.components && !is(fromJS(this.props.components), fromJS(nextProps.components))) {
      this.setState({
        menuOptions: fromJS(nextProps.components).toJS()
      })
    }
  }

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

  triggerDel = (item) => {
    confirm({
      title: `确定删除<${item.title}>吗？`,
      content: '',
      onOk() {
        return new Promise(resolve => {
          Api.getSystemConfig({
            func: 's_custom_components_adduptdel',
            c_id: item.uuid,
            images: '',
            c_name: item.title,
            long_param: '',
            del_type: 'Y'
          }).then(result => {
            if (result.status) {
              notification.success({
                top: 92,
                message: '删除成功！',
                duration: 5
              })

              MKEmitter.emit('updateCustomComponent')
            } else {
              notification.warning({
                top: 92,
                message: result.message,
                duration: 5
              })
            }
            resolve()
          })
        })
      },
      onCancel() {}
    })
  }

  render() {
@@ -36,7 +86,7 @@

    return (
      <div className="mob-card-source-box">
        {menuOptions.map((item, index) => (<SourceWrap key={index} content={item} />))}
        {menuOptions.map((item, index) => (<SourceWrap key={index} item={item} triggerDel={this.triggerDel} />))}
      </div>
    )
  }

 src/menu/modelsource/option.jsx

@@ -16,17 +16,17 @@
// 组件配置信息
export const menuOptions = [
  { type: 'menu', url: tabs, component: 'tabs', subtype: 'tabs', title: '标签页', width: 24, forbid: ['billPrint'] },
  { type: 'menu', url: group, component: 'group', subtype: 'normalgroup', title: '分组', width: 24, forbid: ['billPrint'] },
  { type: 'menu', url: Mainsearch, component: 'search', subtype: 'mainsearch', title: '搜索条件', width: 24, forbid: ['billPrint'] },
  { type: 'menu', url: card1, component: 'card', subtype: 'datacard', title: '数据卡', config: '' },
  { type: 'menu', url: card2, component: 'card', subtype: 'propcard', title: '属性卡', config: '' },
  { type: 'menu', url: card1, component: 'card', subtype: 'datacard', title: '数据卡', width: 24 },
  { type: 'menu', url: card2, component: 'card', subtype: 'propcard', title: '属性卡', width: 24 },
  { type: 'menu', url: NormalTable, component: 'table', subtype: 'normaltable', title: '常用表', width: 24 },
  { type: 'menu', url: TableCard, component: 'table', subtype: 'tablecard', title: '表格', width: 12 },
  { type: 'menu', url: line, component: 'line', subtype: 'line', title: '折线图' },
  { type: 'menu', url: line1, component: 'line', subtype: 'line1', title: '阶梯折线图' },
  { type: 'menu', url: bar, component: 'bar', subtype: 'bar', title: '柱状图' },
  { type: 'menu', url: bar1, component: 'bar', subtype: 'bar1', title: '条形图' },
  { type: 'menu', url: line, component: 'line', subtype: 'line', title: '折线图', width: 24 },
  { type: 'menu', url: line1, component: 'line', subtype: 'line1', title: '阶梯折线图', width: 24 },
  { type: 'menu', url: bar, component: 'bar', subtype: 'bar', title: '柱状图', width: 24 },
  { type: 'menu', url: bar1, component: 'bar', subtype: 'bar1', title: '条形图', width: 24 },
  { type: 'menu', url: Pie, component: 'pie', subtype: 'pie', title: '饼图', width: 12 },
  { type: 'menu', url: Pie1, component: 'pie', subtype: 'ring', title: '环图', width: 12 },
  { type: 'menu', url: Pie2, component: 'pie', subtype: 'nightingale', title: '南丁格尔图', width: 12 },
  { type: 'menu', url: group, component: 'group', subtype: 'normalgroup', title: '分组', width: 24, forbid: ['billPrint'] },
]

 src/mob/header/index.jsx

@@ -9,6 +9,7 @@
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
import avatar from '@/assets/img/avatar.jpg'
import MainLogo from '@/assets/img/main-logo.png'
import './index.scss'

const { confirm } = Modal
@@ -23,7 +24,6 @@

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    logourl: window.GLOB.mainlogo,
    avatar: sessionStorage.getItem('CloudAvatar') || avatar,
    userName: sessionStorage.getItem('CloudUserName')
  }
@@ -52,7 +52,7 @@

    return (
      <header className="mob-header-container">
        <div className="header-logo"><img src={this.state.logourl} alt=""/></div>
        <div className="header-logo"><img src={MainLogo} alt=""/></div>
        {view === 'manage' ?
          <div className="mob-manage-title">
            应用管理

 src/templates/zshare/editTable/index.jsx

@@ -471,8 +471,12 @@
        cell: EditableCell
      }
    }

    let moveprops = {}
    if (actions.includes('move')) {
      components.body.row = DragableBodyRow
      moveprops.moveAble = !this.state.editingKey
      moveprops.moveRow = this.moveRow
    }
    
    const columns = this.state.columns.map(col => {
@@ -509,8 +513,7 @@
              pagination={false}
              onRow={(record, index) => ({
                index,
                moveAble: !this.state.editingKey,
                moveRow: this.moveRow,
                ...moveprops
              })}
            />
          </DndProvider>

 src/views/menudesign/index.jsx

@@ -145,6 +145,7 @@
            url: item.images,
            component: config.type,
            subtype: config.subtype,
            width: config.width || 24,
            config
          })
        })