2021-01-06

king

2021-01-06 b6ccd63b80fc7017bfabc446787732a98c7cbab7

2021-01-06

 src/components/header/resetpwd/index.jsx

@@ -15,7 +15,29 @@
  onEnterSubmit = (e) => {
    // 表单回车提交
    if (e.key !== 'Enter') return
    this.props.resetPwdSubmit()
    
    if (!this.props.form.getFieldValue('originpwd')) {
      this.focusInput('originpwd')
    } else if (!this.props.form.getFieldValue('password')) {
      this.focusInput('password')
    } else if (!this.props.form.getFieldValue('confirm')) {
      this.focusInput('confirm')
    } else {
      this.props.resetPwdSubmit()
    }
  }

  focusInput = (selectId) => {
    let _form = document.getElementById('reset-password-form')
    let _inputs = _form.getElementsByTagName('input')
    _inputs = [..._inputs]
    _inputs.forEach(input => {
      if (!input || input.id !== selectId) return

      if (input.focus) {
        input.focus()
      }
    })
  }

  handleConfirm = () => {
@@ -68,7 +90,7 @@
    }

    return (
      <Form {...formItemLayout} onKeyDown={this.onEnterSubmit}>
      <Form {...formItemLayout} onKeyDown={this.onEnterSubmit} id="reset-password-form">
        <Form.Item label={this.props.dict['main.password.origin']}>
          {getFieldDecorator('originpwd', {
            rules: [
@@ -77,7 +99,7 @@
                message: this.props.dict['main.password.origin.required']
              }
            ]
          })(<Input.Password />)}
          })(<Input.Password autoFocus/>)}
        </Form.Item>
        <Form.Item label={this.props.dict['main.password.new']} hasFeedback>
          {getFieldDecorator('password', {

 src/menu/components/card/cardcellcomponent/dragaction/card.jsx

@@ -16,7 +16,7 @@
const BarCode = asyncComponent(() => import('@/components/barcode'))
const QrCode = asyncComponent(() => import('@/components/qrcode'))
const Video = asyncComponent(() => import('@/components/video'))
const MarkColumn = asyncIconComponent(() => import('@/menu/components/table/normal-table/columns/markcolumn'))
const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent'))

const Card = ({ id, fields, card, moveCard, findCard, editCard, delCard, copyCard, changeStyle, updateMarks }) => {
  const originalIndex = findCard(id).index
@@ -138,7 +138,7 @@
        <Icon className="copy" title="复制" type="copy" onClick={() => copyCard(id)} />
        <Icon className="close" title="删除" type="close" onClick={() => delCard(id)} />
        <Icon className="style" title="调整样式" onClick={() => changeStyle(id)} type="font-colors" />
        {['text', 'number'].includes(card.eleType) ? <MarkColumn columns={fields} marks={card.marks} onSubmit={(vals) => updateMarks({...card, marks: vals})} /> : null }
        {['text', 'number', 'slider'].includes(card.eleType) ? <MarkColumn columns={fields} type={card.eleType} marks={card.marks} onSubmit={(vals) => updateMarks({...card, marks: vals})} /> : null }
      </div>
    } trigger="hover">
      <div ref={node => drag(drop(node))} className={'ant-col card-cell ant-col-' + card.width}>

 src/menu/components/card/cardcellcomponent/index.jsx

@@ -476,7 +476,7 @@
    if (btn.OpenType === 'pop') {
      if (!btn.modal) {
        btn.modal = {
          setting: { title: btn.label, width: 60, cols: '2', container: 'tab', focus: '', finish: 'close', clickouter: 'unclose', display: 'modal' },
          setting: { title: btn.label, width: 60, cols: '2', container: 'view', focus: '', finish: 'close', clickouter: 'unclose', display: 'modal' },
          tables: [],
          groups: [],
          fields: []

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

@@ -284,7 +284,7 @@
    if (btn.OpenType === 'pop') {
      if (!btn.modal) {
        btn.modal = {
          setting: { title: btn.label, width: 60, cols: '2', container: 'tab', focus: '', finish: 'close', clickouter: 'unclose', display: 'modal' },
          setting: { title: btn.label, width: 60, cols: '2', container: 'view', focus: '', finish: 'close', clickouter: 'unclose', display: 'modal' },
          tables: [],
          groups: [],
          fields: []
@@ -360,6 +360,13 @@
    }
  }

  clickComponent = (e) => {
    if (sessionStorage.getItem('style-control') === 'true') {
      e.stopPropagation()
      MKEmitter.emit('clickComponent', this.state.card)
    }
  }

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

@@ -376,7 +383,7 @@
    }

    return (
      <div className="menu-data-card-edit-box" style={{...card.style}}>
      <div className="menu-data-card-edit-box" style={{...card.style}} onClick={this.clickComponent} id={card.uuid}>
        <NormalHeader defaultshow="hidden" config={card} updateComponent={this.updateComponent}/>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">

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

@@ -326,6 +326,13 @@
    this.props.updateConfig(card)
  }

  clickComponent = (e) => {
    if (sessionStorage.getItem('style-control') === 'true') {
      e.stopPropagation()
      MKEmitter.emit('clickComponent', this.state.card)
    }
  }

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

@@ -342,7 +349,7 @@
    }

    return (
      <div className="menu-prop-card-edit-box" style={{...card.style}}>
      <div className="menu-prop-card-edit-box" style={{...card.style}} onClick={this.clickComponent} id={card.uuid}>
        <NormalHeader defaultshow="hidden" config={card} updateComponent={this.updateComponent}/>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">

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

@@ -309,11 +309,18 @@
    }
  }

  clickComponent = (e) => {
    if (sessionStorage.getItem('style-control') === 'true') {
      e.stopPropagation()
      MKEmitter.emit('clickComponent', this.state.card)
    }
  }

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

    return (
      <div className="menu-table-card-edit-box" style={{...card.style, height: card.wrap.height}}>
      <div className="menu-table-card-edit-box" style={{...card.style, height: card.wrap.height}} onClick={this.clickComponent} id={card.uuid}>
        <NormalHeader config={card} updateComponent={this.updateComponent}/>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">

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

@@ -126,7 +126,7 @@
    const { card } = this.state

    if (parentId === card.parentId) {
      let _element = document.getElementById(card.uuid)
      let _element = document.getElementById(card.uuid + 'canvas')
      if (_element) {
        _element.innerHTML = ''
      }
@@ -209,7 +209,7 @@
      }

      const chart = new Chart({
        container: card.uuid,
        container: card.uuid + 'canvas',
        autoFit: true,
        height: plot.height || 400
      })
@@ -408,7 +408,7 @@
    })

    const chart = new Chart({
      container: card.uuid,
      container: card.uuid + 'canvas',
      autoFit: true,
      height: plot.height || 400
    })
@@ -571,7 +571,7 @@
      }

      const chart = new Chart({
        container: card.uuid,
        container: card.uuid + 'canvas',
        autoFit: true,
        height: plot.height || 400
      })
@@ -734,7 +734,7 @@
    const card = fromJS(this.state.card).toJS()
    let refresh = false
    if (!is(fromJS(component.plot), fromJS(card.plot))) {
      let _element = document.getElementById(card.uuid)
      let _element = document.getElementById(card.uuid + 'canvas')
      if (_element) {
        _element.innerHTML = ''
      }
@@ -852,11 +852,18 @@
    }
  }

  clickComponent = (e) => {
    if (sessionStorage.getItem('style-control') === 'true') {
      e.stopPropagation()
      MKEmitter.emit('clickComponent', this.state.card)
    }
  }

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

    return (
      <div className="menu-line-chart-edit-box" style={{...card.style, height: card.plot.height || 400}}>
      <div className="menu-line-chart-edit-box" style={{...card.style, height: card.plot.height || 400}} onClick={this.clickComponent} id={card.uuid}>
        <NormalHeader config={card} updateComponent={this.updateComponent}/>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
@@ -878,7 +885,7 @@
          config={card}
          updateaction={this.updateComponent}
        />
        <div className="canvas" id={card.uuid}></div>
        <div className="canvas" id={card.uuid + 'canvas'}></div>
      </div>
    )
  }

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

@@ -113,7 +113,7 @@
    const { card } = this.state

    if (parentId === card.parentId) {
      let _element = document.getElementById(card.uuid)
      let _element = document.getElementById(card.uuid + 'canvas')
      if (_element) {
        _element.innerHTML = ''
      }
@@ -162,7 +162,7 @@
    const dv = ds.createView().source(data)
    
    const chart = new Chart({
      container: card.uuid,
      container: card.uuid + 'canvas',
      autoFit: true,
      height: plot.height || 400
    })
@@ -335,7 +335,7 @@
    const card = fromJS(this.state.card).toJS()
    let refresh = false
    if (!is(fromJS(component.plot), fromJS(card.plot))) {
      let _element = document.getElementById(card.uuid)
      let _element = document.getElementById(card.uuid + 'canvas')
      if (_element) {
        _element.innerHTML = ''
      }
@@ -424,11 +424,18 @@
    }
  }

  clickComponent = (e) => {
    if (sessionStorage.getItem('style-control') === 'true') {
      e.stopPropagation()
      MKEmitter.emit('clickComponent', this.state.card)
    }
  }

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

    return (
      <div className="menu-pie-chart-edit-box" style={{...card.style, height: card.plot.height || 400}}>
      <div className="menu-pie-chart-edit-box" style={{...card.style, height: card.plot.height || 400}} onClick={this.clickComponent} id={card.uuid}>
        <NormalHeader config={card} updateComponent={this.updateComponent}/>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
@@ -444,7 +451,7 @@
        } trigger="hover">
          <Icon type="tool" />
        </Popover>
        <div className="canvas" id={card.uuid}></div>
        <div className="canvas" id={card.uuid + 'canvas'}></div>
      </div>
    )
  }

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

@@ -132,11 +132,18 @@
    this.props.updateConfig(group)
  }

  clickComponent = (e) => {
    if (sessionStorage.getItem('style-control') === 'true') {
      e.stopPropagation()
      MKEmitter.emit('clickComponent', this.state.group)
    }
  }

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

    return (
      <div className="menu-group-edit-box" style={group.style}>
      <div className="menu-group-edit-box" style={group.style} onClick={this.clickComponent} id={group.uuid}>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <SettingComponent config={group} updateConfig={this.updateComponent} />

 src/menu/components/search/main-search/index.jsx

@@ -339,11 +339,18 @@
    })
  }

  clickComponent = (e) => {
    if (sessionStorage.getItem('style-control') === 'true') {
      e.stopPropagation()
      MKEmitter.emit('clickComponent', this.state.card)
    }
  }

  render() {
    const { dict, card, visible, sqlVerifing } = this.state

    return (
      <div className={`main-search-edit-list ${card.wrap.float} ${card.wrap.show}`} style={card.style}>
      <div className={`main-search-edit-list ${card.wrap.float} ${card.wrap.show || ''}`} onClick={this.clickComponent} id={card.uuid} style={card.style}>
        <DragElement
          list={card.search}
          handleList={this.handleList}

 src/menu/components/share/actioncomponent/actionform/index.jsx

@@ -8,12 +8,12 @@

const { TextArea } = Input
const actionTypeOptions = {
  pop: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'syncComponent', 'width'],
  prompt: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'syncComponent', 'width'],
  exec: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'syncComponent', 'width'],
  excelIn: ['label', 'Ot', 'OpenType', 'intertype', 'show', 'icon', 'class', 'sheet', 'execSuccess', 'execError', 'syncComponent', 'width'],
  excelOut: ['label', 'OpenType', 'intertype', 'show', 'icon', 'class', 'execSuccess', 'execError', 'pagination', 'search', 'width'],
  popview: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'popClose', 'width'],
  pop: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'width'],
  prompt: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'width'],
  exec: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'width'],
  excelIn: ['label', 'Ot', 'OpenType', 'intertype', 'show', 'icon', 'class', 'sheet', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'width'],
  excelOut: ['label', 'OpenType', 'intertype', 'show', 'icon', 'class', 'execSuccess', 'execError', 'resetPageIndex', 'pagination', 'search', 'width'],
  popview: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'popClose', 'resetPageIndex', 'width'],
  tab: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'linkmenu', 'width'],
  innerpage: ['label', 'Ot', 'OpenType', 'pageTemplate', 'show', 'icon', 'class', 'width'],
  funcbutton: ['label', 'OpenType', 'funcType', 'show', 'icon', 'class', 'width']
@@ -137,7 +137,7 @@
      }
    } else if (_opentype === 'funcbutton') {
      if (_funcType === 'print') {
        _options.push('execMode', 'intertype', 'Ot', 'execSuccess', 'execError')
        _options.push('execMode', 'intertype', 'Ot', 'execSuccess', 'execError', 'resetPageIndex')
        if (_intertype === 'outer') {
          _options.push('innerFunc', 'sysInterface', 'interface', 'outerFunc', 'callbackFunc')
        } else if (_intertype === 'inner') {
@@ -221,7 +221,7 @@
      }, () => {
        if (value === 'excelIn') {
          _fieldval.label = this.props.dict['model.form.excelIn']
          _fieldval.class = 'border-dgreen'
          _fieldval.class = 'dgreen'
        } else if (value === 'excelOut') {
          _fieldval.label = this.props.dict['model.form.excelOut']
          _fieldval.class = 'dgreen'

 src/menu/components/share/actioncomponent/formconfig.jsx

@@ -44,15 +44,16 @@
  ]

  if (type === 'chart') {
    opentypes = [
      {
        value: 'excelIn',
        text: Formdict['model.form.excelIn']
      }, {
        value: 'excelOut',
        text: Formdict['model.form.excelOut']
      }
    ]
    opentypes = opentypes.filter(item => item.value === 'excelIn' || item.value === 'excelOut')
  }

  let refresh = []
  if (sessionStorage.getItem('editMenuType') === 'popview') { // 弹窗标签
    opentypes = opentypes.filter(item => item.value !== 'popview')
    refresh.push({
      value: 'popclose',
      text: '标签关闭刷新'
    })
  }

  let forms = [
@@ -226,45 +227,72 @@
      options: menulist
    },
    {
      type: 'radio',
      type: 'select',
      key: 'execSuccess',
      label: Formdict['model.form.afterSuccess'],
      initVal: card.execSuccess || 'never',
      tooltip: refresh.length ? '执行标签关闭刷新时，会同步刷新当前组件和上级组件-行。' : '刷新上级组件-行时，会同步刷新当前组件，注：上级组件在数据源中添加。',
      required: true,
      options: [{
        value: 'grid',
        text: Formdict['header.form.refresh']
      }, {
        value: 'never',
        text: Formdict['header.form.refresh.never']
      }]
      }, {
        value: 'grid',
        text: '刷新当前组件'
      }, {
        value: 'mainline',
        text: '刷新上级组件 - 行'
      },
      ...refresh]
    },
    {
      type: 'radio',
      type: 'select',
      key: 'execError',
      label: Formdict['model.form.afterError'],
      initVal: card.execError || 'never',
      tooltip: refresh.length ? '执行标签关闭刷新时，会同步刷新当前组件和上级组件-行。' : '刷新上级组件-行时，会同步刷新当前组件，注：上级组件在数据源中添加。',
      required: true,
      options: [{
        value: 'grid',
        text: Formdict['header.form.refresh']
      }, {
        value: 'never',
        text: Formdict['header.form.refresh.never']
      }]
      }, {
        value: 'grid',
        text: '刷新当前组件'
      }, {
        value: 'mainline',
        text: '刷新上级组件 - 行'
      },
      ...refresh]
    },
    {
      type: 'radio',
      type: 'select',
      key: 'popClose',
      label: Formdict['header.form.popClose'],
      initVal: card.popClose || 'never',
      required: true,
      options: [{
        value: 'grid',
        text: Formdict['header.form.refresh']
      }, {
        value: 'never',
        text: Formdict['header.form.refresh.never']
      }, {
        value: 'grid',
        text: '刷新当前组件'
      }, {
        value: 'mainline',
        text: '刷新上级组件 - 行'
      }]
    },
    {
      type: 'radio',
      key: 'resetPageIndex',
      label: '刷新时',
      initVal: card.resetPageIndex || 'true',
      required: false,
      options: [{
        value: 'true',
        text: '重置页码'
      }, {
        value: 'false',
        text: '不重置'
      }]
    },
    {

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

@@ -229,10 +229,10 @@
          if (btn.class !== item.class || btn.show !== item.show || !btn.btnstyle.color) {
            if (btn.show === 'link' || btn.show === 'icon') {
              btn.btnstyle.color = color[btn.class]
              btn.btnstyle.background = 'transparent'
              btn.btnstyle.backgroundColor = 'transparent'
            } else {
              btn.btnstyle.color = '#ffffff'
              btn.btnstyle.background = color[btn.class]
              btn.btnstyle.backgroundColor = color[btn.class]
            }
          }
          return btn

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

File was renamed from src/menu/components/table/normal-table/columns/markcolumn/index.jsx
@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Icon, Modal } from 'antd'
import { Icon, Modal, Col } from 'antd'

import Utils from '@/utils/utils.js'
import asyncComponent from '@/utils/asyncComponent'
@@ -127,6 +127,7 @@

  resetMark = () => {
    const { marks, columns, type } = this.props
    let markColumns = fromJS(this.state.markColumns).toJS()

    let options = columns.map(col => {
      return {
@@ -251,12 +252,18 @@

    if (type === 'line') {
      signs.pop()
    } else if (type === 'slider') {
      markColumns = markColumns.filter(col => {
        col.width = '20%'
        return col.dataIndex !== 'signType'
      })
      signs = []
    }

    this.setState({
      visible: true,
      marks: marks ? fromJS(marks).toJS() : [],
      markColumns: this.state.markColumns.map(col => {
      markColumns: markColumns.map(col => {
        if (col.dataIndex === 'field') {
          col.options = options
        } else if (col.dataIndex === 'signType') {
@@ -276,7 +283,7 @@
    })

    let marks = this.state.marks.map(item => {
      if (item.signType[0] === 'background') {
      if (item.signType && item.signType[0] === 'background') {
        try {
          let colors = item.color.match(/\d+/g)
          if ((colors[0] * 0.299 + colors[1] * 0.578 + colors[2] * 0.114) * colors[3] < 192) {
@@ -313,6 +320,7 @@
          destroyOnClose
        >
          <MarkForm dict={dict} signs={signs} columns={options} markChange={this.markChange}/>
          <Col style={{fontSize: '12px', color: '#757575', paddingLeft: '10px'}} span={24}>注：从上到下，匹配第一个符合条件的标记。</Col>
          <EditTable actions={['edit', 'move', 'del']} data={marks} columns={markColumns} onChange={(marks) => this.setState({marks})}/>
        </Modal>
      </div>

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

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

File was renamed from src/menu/components/table/normal-table/columns/markcolumn/markform/index.jsx
@@ -68,7 +68,7 @@
                <Select>
                  <Select.Option value="="> = </Select.Option>
                  <Select.Option value="!="> != </Select.Option>
                  <Select.Option value=">"> > </Select.Option>
                  <Select.Option value=">"> &gt; </Select.Option>
                  <Select.Option value="<"> &lt; </Select.Option>
                  <Select.Option value="like"> like </Select.Option>
                </Select>
@@ -101,7 +101,7 @@
              )}
            </Form.Item>
          </Col>
          <Col span={6}>
          {signs.length ? <Col span={6}>
            <Form.Item label="标记方式">
              {getFieldDecorator('signType', {
                initialValue: [],
@@ -115,8 +115,8 @@
                <Cascader options={signs} placeholder=""/>
              )}
            </Form.Item>
          </Col>
          <Col span={18} style={{textAlign: 'right', marginBottom: 10}}>
          </Col> : null}
          <Col span={signs.length ? 18 : 24} style={{textAlign: 'right'}}>
            <Button onClick={this.handleConfirm} type="primary" className="mk-green">
              添加
            </Button>

 src/menu/components/share/markcomponent/markform/index.scss

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

@@ -14,7 +14,7 @@

const { confirm } = Modal
const EditColumn = asyncIconComponent(() => import('./editColumn'))
const MarkColumn = asyncIconComponent(() => import('./markcolumn'))
const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent'))
const CardCellComponent = asyncComponent(() => import('@/menu/components/card/cardcellcomponent'))

class HeaderCol extends Component {

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

@@ -245,7 +245,7 @@
    if (btn.OpenType === 'pop') {
      if (!btn.modal) {
        btn.modal = {
          setting: { title: btn.label, width: 60, cols: '2', container: 'tab', focus: '', finish: 'close', clickouter: 'unclose', display: 'modal' },
          setting: { title: btn.label, width: 60, cols: '2', container: 'view', focus: '', finish: 'close', clickouter: 'unclose', display: 'modal' },
          tables: [],
          groups: [],
          fields: []
@@ -318,11 +318,18 @@
    }
  }

  clickComponent = (e) => {
    if (sessionStorage.getItem('style-control') === 'true') {
      e.stopPropagation()
      MKEmitter.emit('clickComponent', this.state.card)
    }
  }

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

    return (
      <div className="menu-normal-table-edit-box" style={{...card.style, height: card.wrap.height}}>
      <div className="menu-normal-table-edit-box" style={{...card.style, height: card.wrap.height}} onClick={this.clickComponent} id={card.uuid}>
        <NormalHeader defaultshow="hidden" hideSearch="true" config={card} updateComponent={this.updateComponent}/>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">

 src/menu/components/tabs/antv-tabs/index.jsx

@@ -253,11 +253,18 @@
    this.props.updateConfig(tabs)
  }

  clickComponent = (e) => {
    if (sessionStorage.getItem('style-control') === 'true') {
      e.stopPropagation()
      MKEmitter.emit('clickComponent', this.state.tabs)
    }
  }

  render() {
    const { tabs, dict, labelvisible, editab } = this.state

    return (
      <div className="menu-tabs-edit-box" style={tabs.style}>
      <div className="menu-tabs-edit-box" style={tabs.style} onClick={this.clickComponent} id={tabs.uuid}>
        <DraggableTabs tabPosition={tabs.setting.position} type={tabs.setting.tabStyle} tabsMove={this.moveSwitch}>
          {tabs.subtabs.map(tab => (
            <TabPane tab={

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

@@ -220,7 +220,7 @@
          </Col>
          <Col span={24} className="sqlfield">
            <Form.Item label={'可用字段'}>
              id, bid, loginuid, sessionuid, userid, username, fullname, appkey, time_id{usefulFields ? ', ' + usefulFields : ''}
              id, bid, loginuid, sessionuid, userid, username, fullname, appkey, time_id, orderBy, pageSize, pageIndex{usefulFields ? ', ' + usefulFields : ''}
            </Form.Item>
          </Col>
          <Col span={10} style={{width: '43%'}}>

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

@@ -340,7 +340,7 @@
              <Form.Item label={
                <Tooltip placement="topLeft" title={'该组件如果受其他组件控制，请选项相应的组件，没有时选“无”。'}>
                  <Icon type="question-circle" />
                  上级模块
                  上级组件
                </Tooltip>
              }>
                {getFieldDecorator('supModule', {
@@ -348,7 +348,7 @@
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.select'] + '上级模块!'
                      message: this.props.dict['form.required.select'] + '上级组件!'
                    }
                  ]
                })(

 src/menu/stylecombcontrolbutton/index.jsx

New file
@@ -0,0 +1,130 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Button } from 'antd'

import MKEmitter from '@/utils/events.js'
import './index.scss'

class StyleCombControlButton extends Component {
  static propTpyes = {
    menu: PropTypes.any
  }

  state = {
    label: '调整',
    parent: null,
    components: []
  }

  componentDidMount () {
    MKEmitter.addListener('clickComponent', this.clickComponent)
    MKEmitter.addListener('submitCombineStyle', this.submitCombineStyle)
  }

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

  submitCombineStyle = (style) => {
    const { components } = this.state

    components.forEach((item, i) => {
      setTimeout(() => {
        MKEmitter.emit('submitStyle', [item.uuid], {...item.style, ...style})
      }, i * 5)
    })
  }

  clickComponent = (card) => {
    const { menu } = this.props
    const { parent } = this.state
    let components = fromJS(this.state.components).toJS()

    if (!parent) {
      let _parent = null
      let getParents = (box) => {
        box.components.forEach(item => {
          if (item.type === 'tabs') {
            item.subtabs.forEach(tab => {
              if (tab.components.findIndex(cell => cell.uuid === card.uuid) > -1) {
                _parent = tab
              } else {
                getParents(tab)
              }
            })
          } else if (item.type === 'group') {
            if (item.components.findIndex(cell => cell.uuid === card.uuid) > -1) {
              _parent = item
            }
          }
        })
      }

      if (menu.components.findIndex(cell => cell.uuid === card.uuid) > -1) {
        _parent = menu
      } else {
        getParents(menu)
      }

      document.getElementById(card.uuid).classList.add('selected-control-element')
      MKEmitter.emit('changeCombineStyle', ['margin', 'padding', 'border', 'background'])

      this.setState({
        parent: _parent,
        components: [card]
      })
    } else {
      if (components.findIndex(cell => cell.uuid === card.uuid) > -1) {
        components = components.filter(cell => cell.uuid !== card.uuid)
        document.getElementById(card.uuid).classList.remove('selected-control-element')
      } else if (parent.components.findIndex(cell => cell.uuid === card.uuid) > -1) {
        components.push(card)
        document.getElementById(card.uuid).classList.add('selected-control-element')
      }

      this.setState({
        components: components,
        parent: components.length ? parent : null
      })
    }
  }

  triggerStyleChange = () => {
    const { label } = this.state

    if (label === '调整') {
      document.body.className = 'style-control'
      sessionStorage.setItem('style-control', 'true')
      this.setState({label: '退出'})
    } else {
      document.body.className = ''
      sessionStorage.setItem('style-control', 'false')

      let eles = document.getElementsByClassName('selected-control-element')
      for (let i = 0; i < eles.length; i++) {
        eles[i].classList.remove('selected-control-element')
      }

      MKEmitter.emit('closeCombineStyle')

      this.setState({label: '调整', parent: null, components: []})
    }
  }
  
  render() {
    const { label } = this.state
    return (
      <Button className="style-control-button" type="link" icon="font-colors" title="调整样式" onClick={this.triggerStyleChange}>{label}</Button>
    )
  }
}

export default StyleCombControlButton

 src/menu/stylecombcontrolbutton/index.scss

New file
@@ -0,0 +1,33 @@

.style-control-button.ant-btn-link, .style-control-button.ant-btn-link:hover, .style-control-button.ant-btn-link:focus {
  color: orange;
  position: relative;
  z-index: 13;
  background: #ffffff;
}
body.style-control {
  .pc-menu-view::before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 12;
    background:rgba(0, 0, 0, 0.3);
  }
  .menu-body .menu-view >.ant-card >.ant-card-body {
    position: relative;
    z-index: 13;
    .anticon-tool {
      display: none;
    }
  }
  .mk-popover-control-wrap {
    display: none;
  }

  .selected-control-element {
    box-shadow: 0px 0px 4px orange;
  }
}

 src/menu/stylecombcontroller/index.jsx

New file
@@ -0,0 +1,564 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Collapse, Form, Col, Icon, InputNumber, Select, Radio, Drawer, Button } from 'antd'

import MKEmitter from '@/utils/events.js'
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
import ColorSketch from '@/mob/colorsketch'
import StyleInput from './styleInput'
import './index.scss'

const { Panel } = Collapse
const { Option } = Select

class MobController extends Component {
  static propTpyes = {
    editElem: PropTypes.any,
    updateStyle: PropTypes.func,
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    options: [],
    style: {},
    borposition: 'outer'
  }

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

  componentDidMount () {
    MKEmitter.addListener('changeCombineStyle', this.initStyle)
    MKEmitter.addListener('closeCombineStyle', this.closeStyle)
  }

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

  closeStyle = () => {
    this.setState({
      visible: false
    })
  }

  initStyle = (options) => {
    this.setState({
      visible: true,
      style: {},
      options: options,
      borposition: 'outer'
    })
  }

  onCloseDrawer = () => {
    MKEmitter.emit('submitCombineStyle', this.state.style)
  }

  updateStyle = (style) => {
    this.setState({style: {...this.state.style, ...style}})
  }

  /**
   * @description 字体大小切换，超出范围忽略
   */
  changeFontSize = (val) => {
    let value = parseInt(val)

    if (isNaN(value) || value < 12 || value > 100) return

    this.updateStyle({fontSize: `${value}px`})
  }

  /**
   * @description 修改行间距，超出范围忽略
   */
  changeLineHeight = (val) => {
    let value = parseFloat(val)

    if (isNaN(value) || value < 1 || value > 10) return

    this.updateStyle({lineHeight: value})
  }

  /**
   * @description 字体间距修改，超出范围忽略
   */
  changeLetterSpacing = (val) => {
    let value = parseFloat(val)

    if (isNaN(value) || value < 0 || value > 100) return

    this.updateStyle({letterSpacing: `${value}px`})
  }

  /**
   * @description 修改字体粗细
   */
  boldChange = (val) => {
    this.updateStyle({fontWeight: val})
  }

  /**
   * @description 修改字体颜色 ，颜色控件
   */
  changeFontColor = (val) => {
    this.updateStyle({color: val})
  }

  /**
   * @description 字体对齐
   */
  changeTextAlign = (e) => {
    this.updateStyle({textAlign: e.target.value})
  }

  /**
   * @description 字体样式，倾斜
   */
  changeFontStyle = (e) => {
    this.updateStyle({fontStyle: e.target.value})
  }

  /**
   * @description 字体装饰，下划线、贯穿线、上划线
   */
  changeTextDecoration = (e) => {
    this.updateStyle({textDecoration: e.target.value})
  }

  /**
   * @description 修改背景颜色 ，颜色控件
   */
  changeBackgroundColor = (val) => {
    this.updateStyle({backgroundColor: val})
  }

  /**
   * @description 修改阴影颜色 ，颜色控件
   */
  changeShadowColor = (val) => {
    this.updateStyle({shadow: val})
  }

  changeBorderStyle = (val) => {
    const { borposition } = this.state
    let _style = {}

    if (borposition === 'outer') {
      _style.borderStyle = val
    } else if (borposition === 'left') {
      _style.borderLeftStyle = val
    } else if (borposition === 'right') {
      _style.borderRightStyle = val
    } else if (borposition === 'top') {
      _style.borderTopStyle = val
    } else if (borposition === 'bottom') {
      _style.borderBottomStyle = val
    }

    this.updateStyle(_style)
  }

  changeBorderWidth = (val) => {
    const { borposition } = this.state
    let _style = {}

    if (borposition === 'outer') {
      _style.borderWidth = val
    } else if (borposition === 'left') {
      _style.borderLeftWidth = val
    } else if (borposition === 'right') {
      _style.borderRightWidth = val
    } else if (borposition === 'top') {
      _style.borderTopWidth = val
    } else if (borposition === 'bottom') {
      _style.borderBottomWidth = val
    }
    
    this.updateStyle(_style)
  }

  changeBorderColor = (val) => {
    const { borposition } = this.state
    let _style = {}

    if (borposition === 'outer') {
      _style.borderColor = val
    } else if (borposition === 'left') {
      _style.borderLeftColor = val
    } else if (borposition === 'right') {
      _style.borderRightColor = val
    } else if (borposition === 'top') {
      _style.borderTopColor = val
    } else if (borposition === 'bottom') {
      _style.borderBottomColor = val
    }
    
    this.updateStyle(_style)
  }

  changeHeight = (val) => {
    let _val = val
    if (_val === '0px') {
      _val = 'auto'
    }

    this.updateStyle({height: _val})
  }

  changeNormalStyle = (val, type) => {
    this.updateStyle({[type]: val})
  }

  render () {
    const { options, borposition } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    }

    return (
      <Drawer
        title={
          <div className="header-logo">
            <img src={window.GLOB.mainlogo} alt=""/>
          </div>
        }
        placement="left"
        width="300"
        mask={false}
        closable={false}
        className="menu-style-drawer"
        visible={this.state.visible}
      >
        <div className="menu-combine-style-controller">
          <Form {...formItemLayout}>
            <Collapse expandIconPosition="right" destroyInactivePanel={true} defaultActiveKey={options[0]}>
              {options.includes('height') ? <Panel header="高度" key="height">
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="高度" type="column-height" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={''} options={['px']} onChange={this.changeHeight}/>
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('font') ? <Panel header="字体" key="font">
                <Col span={12}>
                  <Form.Item colon={false} label={<Icon title="字体大小" type="font-size" />}>
                    <InputNumber defaultValue={''} min={12} max={100} precision={0} onChange={this.changeFontSize} />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item colon={false} label={<Icon title="字体粗细" type="bold" />}>
                    <Select defaultValue={''} onChange={this.boldChange}>
                      <Option value="normal">normal</Option>
                      <Option value="bold">bold</Option>
                      <Option value="bolder">bolder</Option>
                      <Option value="lighter">lighter</Option>
                      <Option value="100">100</Option>
                      <Option value="200">200</Option>
                      <Option value="300">300</Option>
                      <Option value="400">400</Option>
                      <Option value="500">500</Option>
                      <Option value="600">600</Option>
                      <Option value="700">700</Option>
                      <Option value="800">800</Option>
                      <Option value="900">900</Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item colon={false} label={<Icon title="行高" type="line-height" />}>
                    <InputNumber defaultValue={''} min={1} max={10} precision={1} onChange={this.changeLineHeight} />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item colon={false} label={<Icon title="字间距" type="column-width" />}>
                    <InputNumber defaultValue={''} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="字体颜色" type="font-colors" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <ColorSketch value={''} onChange={this.changeFontColor} />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={' '}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Radio.Group defaultValue={''} onChange={this.changeFontStyle}>
                      <Radio.Button value="normal"><span title="标准">N</span></Radio.Button>
                      <Radio.Button value="italic"><Icon title="斜体" type="italic" /></Radio.Button>
                      <Radio.Button value="oblique" style={{fontStyle: 'oblique'}}><span title="倾斜">B</span></Radio.Button>
                    </Radio.Group>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={' '}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Radio.Group className="text-align" defaultValue={''} onChange={this.changeTextAlign}>
                      <Radio.Button value="left"><Icon title="左对齐" type="align-left" /></Radio.Button>
                      <Radio.Button value="center"><Icon title="居中对齐" type="align-center" /></Radio.Button>
                      <Radio.Button value="right"><Icon title="右对齐" type="align-right" /></Radio.Button>
                    </Radio.Group>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={' '}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Radio.Group className="text-decoration" defaultValue={''} onChange={this.changeTextDecoration}>
                      <Radio.Button value="none"><span title="标准">N</span></Radio.Button>
                      <Radio.Button value="underline"><Icon title="下划线" type="underline" /></Radio.Button>
                      <Radio.Button value="line-through"><Icon title="中划线" type="strikethrough" /></Radio.Button>
                      <Radio.Button value="overline" style={{textDecoration: 'overline'}}><span title="上划线">O</span></Radio.Button>
                    </Radio.Group>
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('background') ? <Panel header="背景" key="background">
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="背景颜色" type="bg-colors" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <ColorSketch value={''} onChange={this.changeBackgroundColor} />
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('border') ? <Panel header="边框" key="border">
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="边框位置" type="border" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Radio.Group className="border-position" defaultValue={'outer'} onChange={(e) => this.setState({borposition: e.target.value})}>
                      <Radio value="outer"><Icon title="外边框" type="border-outer" /></Radio>
                      <Radio value="left"><Icon title="左边框" type="border-left" /></Radio>
                      <Radio value="right"><Icon title="右边框" type="border-right" /></Radio>
                      <Radio value="top"><Icon title="上边框" type="border-top" /></Radio>
                      <Radio value="bottom"><Icon title="下边框" type="border-bottom" /></Radio>
                    </Radio.Group>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="边框样式" type="border-outer" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    {borposition === 'outer' ? <Select defaultValue={'solid'} onChange={this.changeBorderStyle}>
                      <Option value="solid">实线</Option>
                      <Option value="dotted">点划线</Option>
                      <Option value="dashed">虚线</Option>
                      <Option value="double">双线</Option>
                    </Select> : null}
                    {borposition === 'left' ? <Select defaultValue={'solid'} onChange={this.changeBorderStyle}>
                      <Option value="solid">实线</Option>
                      <Option value="dotted">点划线</Option>
                      <Option value="dashed">虚线</Option>
                      <Option value="double">双线</Option>
                    </Select> : null}
                    {borposition === 'right' ? <Select defaultValue={'solid'} onChange={this.changeBorderStyle}>
                      <Option value="solid">实线</Option>
                      <Option value="dotted">点划线</Option>
                      <Option value="dashed">虚线</Option>
                      <Option value="double">双线</Option>
                    </Select> : null}
                    {borposition === 'top' ? <Select defaultValue={'solid'} onChange={this.changeBorderStyle}>
                      <Option value="solid">实线</Option>
                      <Option value="dotted">点划线</Option>
                      <Option value="dashed">虚线</Option>
                      <Option value="double">双线</Option>
                    </Select> : null}
                    {borposition === 'bottom' ? <Select defaultValue={'solid'} onChange={this.changeBorderStyle}>
                      <Option value="solid">实线</Option>
                      <Option value="dotted">点划线</Option>
                      <Option value="dashed">虚线</Option>
                      <Option value="double">双线</Option>
                    </Select> : null}
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="边框宽度" type="column-width" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    {borposition === 'outer' ? <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'left' ? <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'right' ? <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'top' ? <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/> : null}
                    {borposition === 'bottom' ? <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/> : null}
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="边框颜色" type="bg-colors" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    {borposition === 'outer' ? <ColorSketch defaultValue={'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'left' ? <ColorSketch defaultValue={'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'right' ? <ColorSketch defaultValue={'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'top' ? <ColorSketch defaultValue={'transparent'} onChange={this.changeBorderColor} /> : null}
                    {borposition === 'bottom' ? <ColorSketch defaultValue={'transparent'} onChange={this.changeBorderColor} /> : null}
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="圆角" type="radius-setting" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={'0px'} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/>
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('shadow') ? <Panel header="阴影" key="shadow">
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="阴影颜色" type="bg-colors" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <ColorSketch value={'transparent'} onChange={this.changeShadowColor} />
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('margin') ? <Panel header="外边距" key="margin">
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="上边距" type="arrow-up"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="下边距" type="arrow-down"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="左边距" type="arrow-left"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="右边距" type="arrow-right"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/>
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('padding') ? <Panel header="内边距" key="padding">
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="上边距" type="arrow-up"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="下边距" type="arrow-down"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="左边距" type="arrow-left"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="右边距" type="arrow-right"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/>
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('float') ? <Panel header="浮动" key="float">
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<Icon title="浮动" type="swap" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Radio.Group defaultValue={''} onChange={(e) => this.changeNormalStyle(e.target.value, 'float')}>
                      <Radio value="left">左浮动</Radio>
                      <Radio value="right">右浮动</Radio>
                      <Radio value="none">不浮动</Radio>
                    </Radio.Group>
                  </Form.Item>
                </Col>
              </Panel> : null}
            </Collapse>
          </Form>
          <div style={{textAlign: 'right'}}>
            <Button style={{margin: '30px 10px 30px 0px'}} onClick={this.onCloseDrawer}>确定</Button>
          </div>
        </div>
      </Drawer>
    )
  }
}

export default MobController

 src/menu/stylecombcontroller/index.scss

New file
@@ -0,0 +1,216 @@
.menu-combine-style-controller {
  width: 100%;
  overflow: hidden;

  >.ant-form >.ant-collapse {
    border: 0;
    background: #262E3F;

    > .ant-collapse-item {
      border-color: #202735;
      > .ant-collapse-header {
        padding: 7px 40px 7px 16px;
        background: #262E3F;
        color: rgba(255, 255, 255, 0.85);
      }
      >.ant-collapse-content {
        color: rgba(255, 255, 255, 0.85);
        background-color: #202735;
        border-top: 1px solid #202735;
        .ant-collapse-content-box {
          padding: 5px 10px;
        }
        .ant-collapse-content-box::after {
          content: ' ';
          display: block;
          clear: both;
        }
        .ant-input-number {
          width: 100%;
        }
        .ant-form-item {
          margin-bottom: 2px;

          .ant-form-item-label > label {
            color: rgba(255, 255, 255, 0.85);
            .anticon {
              vertical-align: middle;
              font-size: 18px;
            }
          }
          .ant-form-item-control-wrapper  {
            .ant-form-item-control {
              .border-position {
                .ant-radio-wrapper {
                  margin-right: 0px;

                  span.ant-radio + * {
                    padding-left: 4px;
                  }
                }
              }
              input {
                background: transparent;
                color: rgba(255, 255, 255, 0.65);
              }
              .ant-input {
                height: 28px;
              }
              .ant-input-number {
                height: 28px;
                background: transparent;
                .ant-input-number-input {
                  height: 28px;
                }
              }
              .ant-input-group-addon {
                background: transparent;
              }
              .ant-select-selection {
                background: transparent;
                color: rgba(255, 255, 255, 0.65);
              }
              .color-sketch-block {
                position: relative;
                top: 10px;
              }
              .color-sketch-block + .ant-input {
                float: right;
                width: 70%;
                margin-top: 9px;
                padding-right: 5px;
                padding-left: 5px;
              }
              .ant-select-arrow {
                color: inherit;
              }
              .ant-input-number-handler-wrap {
                background: transparent;
                .ant-input-number-handler {
                  color: rgba(255, 255, 255, 0.65);
                  .ant-input-number-handler-up-inner, .ant-input-number-handler-down-inner {
                    color: rgba(255, 255, 255, 0.65);
                  }
                }
                .ant-input-number-handler:active {
                  background: transparent;
                }
              }
              .ant-radio-group {
                span {
                  color: rgba(255, 255, 255, 0.65);
                }
                .ant-radio-button-wrapper {
                  background: transparent;
                  color: rgba(255, 255, 255, 0.65);
                  height: 27px;
                  line-height: 25px;
                  span {
                    font-style: inherit;
                  }
                }
              }
              .fileupload-form-container {
                .ant-btn {
                  height: 28px;
                }
                .ant-upload-list-item {
                  .ant-upload-list-item-info {
                    background: transparent;
                    color: rgba(255, 255, 255, 0.85);
                    i {
                      color: rgba(255, 255, 255, 0.85);
                    }
                  }
                  .anticon-close {
                    color: rgba(255, 255, 255, 0.85);
                  }
                  .anticon-close:hover {
                    color: rgba(255, 255, 255, 0.85);
                  }
                }
                .ant-upload-list-item:hover .ant-upload-list-item-info {
                  background: transparent;
                }
              }
            }
          }
        }
      }
    }
  }
}

.margin-popover {
  padding-top: 0px;
  .ant-popover-inner-content {
    width: 90px;
    padding: 0px 5px;
    .ant-menu-root.ant-menu-vertical {
      border: 0;
      .ant-menu-item {
        height: 30px;
        cursor: pointer;
        line-height: 30px;
      }
      .ant-menu-item:not(:last-child) {
        margin-bottom: 0px;
      }
      .ant-menu-item:first-child {
        margin-top: 10px;
      }
      .ant-menu-item:last-child {
        margin-bottom: 10px;
      }
    }
  }
  .ant-popover-arrow {
    display: none;
  }
}

.menu-style-drawer {
  .ant-drawer-body {
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
  .ant-drawer-body::-webkit-scrollbar {
    display: none;
  }
  .ant-drawer-wrapper-body {
    background: #262E3F;
    .ant-drawer-header {
      background: #001529;
      padding: 0px;
      height: 48px;
      border-radius: 0;
      border: 0;
      .header-logo {
        width: 180px;
        line-height: 48px;
        height: 48px;
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
      .ant-drawer-close {
        height: 48px;
        width: 48px;
        line-height: 48px;
        color: #ffffff;
      }
    }
  }
  .ant-drawer-body {
    padding: 0;
    .color-sketch-block {
      .color-sketch-block-inner {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
      }
      .color-sketch-value {
        color: rgba(255, 255, 255, 0.65);
      }
    }
  }
}

 src/menu/stylecombcontroller/styleInput/index.jsx

New file
@@ -0,0 +1,153 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Select, Input } from 'antd'

import './index.scss'

const { Option } = Select

class StyleInput extends Component {
  static propTpyes = {
    defaultValue: PropTypes.any,
    options: PropTypes.any,
    value: PropTypes.any,
    onChange: PropTypes.func,
  }

  state = {
    value: '',
    unit: '',
    options: null
  }

  UNSAFE_componentWillMount () {
    const { defaultValue, value, options } = this.props
    let val = ''
    let unit = ''
    let _options = ['px']

    if (value !== undefined) {
      val = value
    } else if (defaultValue !== undefined) {
      val = defaultValue
    }

    if (options && options.length > 0) {
      _options = options
    }

    unit = _options[0]

    if (val) {
      if (val.indexOf('px') > -1) {
        unit = 'px'
      } else if (val.indexOf('%') > -1) {
        unit = '%'
      } else if (val.indexOf('vw') > -1) {
        unit = 'vw'
      } else if (val.indexOf('vh') > -1) {
        unit = 'vh'
      }
    }

    let _val = parseInt(val)

    if (isNaN(_val)) {
      _val = ''
    }

    this.setState({value: _val, options: _options, unit})
  }

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

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.value !== undefined && nextProps.value !== this.state.value) {
      let val = nextProps.value
      let unit = this.state.unit

      if (val) {
        if (val.indexOf('px') > -1) {
          unit = 'px'
        } else if (val.indexOf('%') > -1) {
          unit = '%'
        } else if (val.indexOf('vw') > -1) {
          unit = 'vw'
        } else if (val.indexOf('vh') > -1) {
          unit = 'vh'
        }
      }

      let _val = parseInt(val)

      if (isNaN(_val)) {
        _val = ''
      }

      this.setState({value: _val, unit})
    }
  }

  componentDidMount () {}

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

  changeValue = (e) => {
    const { unit } = this.state
    let val = e.target.value
    let _val = parseInt(val)
    
    if (isNaN(_val)) {
      _val = ''
    }

    this.setState({
      value: _val,
    })

    if (this.props.onChange) {
      if (!_val) {
        this.props.onChange('0px')
      } else {
        this.props.onChange(`${_val}${unit}`)
      }
    }
  }

  changeUnit = (val) => {
    const { value } = this.state

    this.setState({unit: val})
    if (value && this.props.onChange) {
      this.props.onChange(`${value}${val}`)
    }
  }

  render () {
    const { value, options, unit } = this.state

    return (
      <div className="style-input-box">
        <Input value={value} addonAfter={
          options.length > 1 ?
          <Select value={unit} onChange={this.changeUnit}>
            {options.map(item => <Option key={item} value={item}>{item}</Option>)}
          </Select> :
          <div className="single-unit">{unit}</div>
        } onChange={this.changeValue}/>
      </div>
    )
  }
}

export default StyleInput

 src/menu/stylecombcontroller/styleInput/index.scss

New file
@@ -0,0 +1,11 @@
.style-input-box {
  line-height: 32px;
  .ant-select {
    width: 60px!important;
  }
  .single-unit {
    width: 38px;
    text-align: left;
    color: rgba(255, 255, 255, 0.65);
  }
}

 src/mob/colorsketch/index.scss

@@ -3,11 +3,10 @@
  width: 100%;

  .color-sketch-block-box {
    // border-radius: 4px;
    display: inline-block;
    width: calc(100% - 160px);
    height: 100%;
    border-radius: 2px;
    border-radius: 4px;
    background: #ffffff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==') left center;
  }
  .color-sketch-block-inner {

 src/tabviews/custom/components/card/cardcellList/index.jsx

@@ -180,7 +180,7 @@
        }
      }

      if (result) {
      if (result && mark.signType) {
        if (mark.signType[0] === 'font') {
          style.color = mark.color
        } else if (mark.signType[0] === 'background') {
@@ -207,6 +207,60 @@
    })

    return content
  }

  getColor = (marks) => {
    const { data } = this.props
    let color = ''

    marks.some(mark => {
      let originVal = data[mark.field[0]] + ''
      let contrastVal = ''
      let result = false

      if (mark.field[1] === 'static') {
        contrastVal = mark.contrastValue + ''
      } else {
        contrastVal = data[mark.field[2]] + ''
      }

      if (mark.match === '=') {
        result = originVal === contrastVal
      } else if (mark.match === '!=') {
        result = originVal !== contrastVal
      } else if (mark.match === 'like') {
        result = originVal.indexOf(contrastVal) > -1
      } else if (mark.match === '>') {
        try {
          originVal = parseFloat(originVal)
          contrastVal = parseFloat(contrastVal)
        } catch {
          originVal = NaN
        }

        if (!isNaN(originVal) && !isNaN(contrastVal) && originVal > contrastVal) {
          result = true
        }
      } else if (mark.match === '<') {
        try {
          originVal = parseFloat(originVal)
          contrastVal = parseFloat(contrastVal)
        } catch {
          originVal = NaN
        }

        if (!isNaN(originVal) && !isNaN(contrastVal) && originVal < contrastVal) {
          result = true
        }
      }

      if (result) {
        color = mark.color
      }
      return result
    })

    return color
  }

  getContent = (card) => {
@@ -327,6 +381,7 @@
      )
    } else if (card.eleType === 'slider') {
      let val = 0
      let color = card.color

      if (card.datatype === 'static') {
        val = card.value
@@ -347,14 +402,19 @@
        _val = `${val}%`
      }

      if (card.marks) {
        let _color = this.getColor(card.marks)
        color = _color ? _color : color
      }

      return (
        <Col key={card.uuid} span={card.width}>
          <div style={card.style}>
            <div className="ant-mk-slider">
              <div className="ant-mk-slider-rail"></div>
              <div className="ant-mk-slider-track" style={{width: _val, backgroundColor: card.color}}></div>
              <div className="ant-mk-slider-track" style={{width: _val, backgroundColor: color}}></div>
              <Tooltip title={`${val}%`}>
                <div className="ant-mk-slider-handle" style={{left: _val, borderColor: card.color}}></div>
                <div className="ant-mk-slider-handle" style={{left: _val, borderColor: color}}></div>
              </Tooltip>
            </div>
          </div>

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

@@ -102,6 +102,7 @@
  componentDidMount () {
    MKEmitter.addListener('syncRefreshComponentId', this.reload)
    MKEmitter.addListener('resetSelectLine', this.resetParentParam)
    MKEmitter.addListener('getexceloutparam', this.getexceloutparam)
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -140,6 +141,7 @@
    }
    MKEmitter.removeListener('syncRefreshComponentId', this.reload)
    MKEmitter.removeListener('resetSelectLine', this.resetParentParam)
    MKEmitter.removeListener('getexceloutparam', this.getexceloutparam)
  }

  reload = (syncId) => {
@@ -165,6 +167,33 @@
    }
  }

  /**
   * @description 导出Excel时，获取页面搜索排序等参数
   */
  getexceloutparam = (menuId, btnId) => {
    const { mainSearch } = this.props
    const { arr_field, config, search } = this.state

    if (config.uuid !== menuId) return

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

    MKEmitter.emit('execExcelout', config.uuid, btnId, {
      arr_field: arr_field,
      orderBy: config.setting.order || '',
      search: searches,
      menuName: config.name
    })
  }

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

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

@@ -104,6 +104,7 @@
  componentDidMount () {
    MKEmitter.addListener('syncRefreshComponentId', this.reload)
    MKEmitter.addListener('resetSelectLine', this.resetParentParam)
    MKEmitter.addListener('getexceloutparam', this.getexceloutparam)
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -116,6 +117,7 @@
    }
    MKEmitter.removeListener('syncRefreshComponentId', this.reload)
    MKEmitter.removeListener('resetSelectLine', this.resetParentParam)
    MKEmitter.removeListener('getexceloutparam', this.getexceloutparam)
  }

  /**
@@ -170,6 +172,33 @@
    })
  }

   /**
   * @description 导出Excel时，获取页面搜索排序等参数
   */
  getexceloutparam = (menuId, btnId) => {
    const { mainSearch } = this.props
    const { arr_field, config, search } = this.state

    if (config.uuid !== menuId) return

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

    MKEmitter.emit('execExcelout', config.uuid, btnId, {
      arr_field: arr_field,
      orderBy: config.setting.order || '',
      search: searches,
      menuName: config.name
    })
  }

  async loadData () {
    const { mainSearch, menuType } = this.props
    const { config, arr_field, pageIndex, search, BID } = this.state
@@ -183,7 +212,7 @@
      return
    }

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

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

@@ -233,6 +233,7 @@

  componentDidMount () {
    MKEmitter.addListener('resetSelectLine', this.resetParentParam)
    MKEmitter.addListener('getexceloutparam', this.getexceloutparam)
  }

  /**
@@ -243,6 +244,7 @@
      return
    }
    MKEmitter.removeListener('resetSelectLine', this.resetParentParam)
    MKEmitter.removeListener('getexceloutparam', this.getexceloutparam)
  }

  resetParentParam = (MenuID, id) => {
@@ -254,6 +256,33 @@
        this.loadData()
      })
    }
  }

  /**
   * @description 导出Excel时，获取页面搜索排序等参数
   */
  getexceloutparam = (menuId, btnId) => {
    const { mainSearch } = this.props
    const { arr_field, config, search } = this.state

    if (config.uuid !== menuId) return

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

    MKEmitter.emit('execExcelout', config.uuid, btnId, {
      arr_field: arr_field,
      orderBy: config.setting.order || '',
      search: searches,
      menuName: config.name
    })
  }

  /**
@@ -272,7 +301,7 @@
      return
    }

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

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

@@ -11,9 +11,12 @@
    position: relative;
    .chart-action {
      position: absolute;
      top: 2px;
      top: 0px;
      right: 5px;
      z-index: 1;
      .ant-btn {
        float: right;
      }
    }
  }


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

@@ -411,14 +411,25 @@
   * @description 导出Excel时，获取页面搜索排序等参数
   */
  getexceloutparam = (menuId, btnId) => {
    const { mainSearch } = this.props
    const { arr_field, config, orderBy, search, setting} = this.state

    if (config.uuid !== menuId) return

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

    MKEmitter.emit('execExcelout', config.uuid, btnId, {
      arr_field: arr_field,
      orderBy: orderBy || setting.order,
      search: search,
      search: searches,
      menuName: config.name
    })
  }

 src/templates/menuconfig/editfirstmenu/index.jsx

@@ -363,6 +363,7 @@
            dict={dict}
            type="add"
            menu={null}
            inputSubmit={this.addMemuSubmit}
            wrappedComponentRef={(inst) => this.addMenuFormRef = inst}
          />
        </Modal>
@@ -392,6 +393,7 @@
            dict={dict}
            type="edit"
            menu={this.state.editMenu}
            inputSubmit={this.editMemuSubmit}
            wrappedComponentRef={(inst) => this.editMenuFormRef = inst}
          />
        </Modal>

 src/templates/menuconfig/editfirstmenu/menuform/index.jsx

@@ -6,9 +6,10 @@

class MainSearch extends Component {
  static propTpyes = {
    menu: PropTypes.any, // 搜索条件列表
    dict: PropTypes.object, // 字典项
    type: PropTypes.string // 字典项
    menu: PropTypes.any,         // 菜单信息，新建时为null
    dict: PropTypes.object,      // 字典项
    type: PropTypes.string,      // 操作类型
    inputSubmit: PropTypes.func
  }

  state = {
@@ -115,7 +116,7 @@
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly} />)}
              })(<Input placeholder="" autoFocus={item.key.toLowerCase() === 'menuname'} autoComplete="off" disabled={item.readonly} />)}
            </Form.Item>
          </Col>
        )
@@ -136,7 +137,7 @@
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  onChange={(value) => {this.openTypeChange(item.key, value)}}
                  getPopupContainer={() => document.getElementById('form-box')}
                  getPopupContainer={() => document.getElementById('first-menu-form-box')}
                >
                  {item.options.map(option =>
                    <Select.Option key={option.id} value={option.id}>{option.text}</Select.Option>
@@ -209,6 +210,13 @@
    })
  }

  onEnterSubmit = (e) => {
    // 表单回车提交
    if (e.key !== 'Enter') return
    
    this.props.inputSubmit && this.props.inputSubmit()
  }

  render() {
    const formItemLayout = {
      labelCol: {
@@ -221,7 +229,7 @@
      }
    }
    return (
      <Form {...formItemLayout} className="ant-advanced-search-form" id="form-box">
      <Form {...formItemLayout} className="ant-advanced-search-form" id="first-menu-form-box" onKeyDown={this.onEnterSubmit}>
        <Row gutter={24}>{this.getFields()}</Row>
      </Form>
    )

 src/templates/menuconfig/editsecmenu/index.jsx

@@ -444,6 +444,7 @@
          {this.state.formlist ?
            <MenuForm
              dict={dict}
              inputSubmit={this.memuHandleSubmit}
              formlist={this.state.formlist}
              wrappedComponentRef={(inst) => this.menuFormRef = inst}
            /> : null}

 src/templates/menuconfig/editthdmenu/index.jsx

@@ -685,7 +685,6 @@
    })
  }


  UNSAFE_componentWillMount () {
    this.getUsedTemplate()

@@ -883,6 +882,7 @@
          <MenuForm
            menu={this.state.sysMenu}
            dict={dict}
            inputSubmit={this.memuSubmit}
            wrappedComponentRef={(inst) => this.menuFormRef = inst}
          />
        </Modal>

 src/templates/menuconfig/editthdmenu/menuform/index.jsx

@@ -6,9 +6,10 @@

class MainSearch extends Component {
  static propTpyes = {
    menu: PropTypes.object,     // 菜单信息
    dict: PropTypes.object,     // 字典项
    supMenuList: PropTypes.any  // 表格数据
    menu: PropTypes.object,      // 菜单信息
    dict: PropTypes.object,      // 字典项
    supMenuList: PropTypes.any,  // 表格数据
    inputSubmit: PropTypes.func  // 回车提交
  }

  state = {
@@ -48,6 +49,13 @@
    })
  }

  onEnterSubmit = (e) => {
    // 表单回车提交
    if (e.key !== 'Enter') return
    
    this.props.inputSubmit && this.props.inputSubmit()
  }

  render() {
    const { getFieldDecorator } = this.props.form
    const { menu } = this.state
@@ -63,7 +71,7 @@
    }

    return (
      <Form {...formItemLayout} style={{paddingRight: '20px'}}>
      <Form {...formItemLayout} style={{paddingRight: '20px'}} onKeyDown={this.onEnterSubmit}>
        <Row gutter={24}>
          <Col span={24}>
            <Form.Item label={'一级菜单'}>
@@ -120,7 +128,7 @@
                    message: this.props.dict['form.required.input'] + '菜单名称!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" />)}
              })(<Input placeholder="" autoFocus autoComplete="off" />)}
            </Form.Item>
          </Col>
          <Col span={24}>

 src/templates/menuconfig/menuform/index.jsx

@@ -5,8 +5,9 @@

class MainSearch extends Component {
  static propTpyes = {
    dict: PropTypes.object, // 字典项
    formlist: PropTypes.array
    dict: PropTypes.object,     // 字典项
    formlist: PropTypes.array,
    inputSubmit: PropTypes.func
  }

  openTypeChange = (key, value) => {
@@ -46,7 +47,7 @@
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly} />)}
              })(<Input placeholder="" autoFocus={item.key.toLowerCase() === 'menuname'} autoComplete="off" disabled={item.readonly} />)}
            </Form.Item>
          </Col>
        )
@@ -97,6 +98,13 @@
    })
  }

  onEnterSubmit = (e) => {
    // 表单回车提交
    if (e.key !== 'Enter') return
    
    this.props.inputSubmit && this.props.inputSubmit()
  }

  render() {
    const formItemLayout = {
      labelCol: {
@@ -109,7 +117,7 @@
      }
    }
    return (
      <Form {...formItemLayout} className="ant-advanced-search-form" id="form-box">
      <Form {...formItemLayout} className="ant-advanced-search-form" id="form-box" onKeyDown={this.onEnterSubmit}>
        <Row gutter={24}>{this.getFields()}</Row>
      </Form>
    )

 src/utils/utils-datamanage.js

@@ -135,7 +135,7 @@
        value: orderBy
      }, {
        reg: new RegExp('@pageSize@', 'ig'),
        value: pageSize
        value: setting.laypage ? pageSize : '9999'
      }, {
        reg: new RegExp('@pageIndex@', 'ig'),
        value: pageIndex

 src/views/menudesign/index.jsx

@@ -33,11 +33,14 @@
const PasteController = asyncComponent(() => import('@/menu/pastecontroller'))
const PaddingController = asyncComponent(() => import('@/menu/padcontroller'))
const StyleController = asyncComponent(() => import('@/menu/stylecontroller'))
const StyleCombController = asyncComponent(() => import('@/menu/stylecombcontroller'))
const StyleCombControlButton = asyncComponent(() => import('@/menu/stylecombcontrolbutton'))
const ModalController = asyncComponent(() => import('@/menu/modalconfig/controller'))
const PopviewController = asyncComponent(() => import('@/menu/popview'))
const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent'))

sessionStorage.setItem('isEditState', 'true')
sessionStorage.setItem('editMenuType', 'menu') // 编辑菜单类型
document.body.className = ''

class MenuDesign extends Component {
@@ -129,11 +132,14 @@
    btn.config = _config
    btn.component = card

    sessionStorage.setItem('editMenuType', 'popview') // 编辑弹窗标签

    this.setState({popBtn: btn, visible: true})
  }

  handleBack = () => {
    this.setState({popBtn: null, delButtons: []}, () => {
      sessionStorage.setItem('editMenuType', 'menu')
      this.setState({visible: false})
    })
  }
@@ -698,6 +704,7 @@
                  <div> {config && config.MenuName} </div>
                } bordered={false} extra={
                  <div>
                    <StyleCombControlButton menu={config} />
                    <PasteController type="menu" Tab={null} insert={this.insert} />
                    {config ? <Switch className="big" checkedChildren={dict['mob.enable']} unCheckedChildren={dict['mob.disable']} checked={config.enabled} onChange={this.onEnabledChange} /> : null}
                    <Button type="primary" onClick={this.submitConfig} loading={menuloading}>{dict['mob.save']}</Button>
@@ -711,6 +718,7 @@
          </DndProvider> : null}
          {popBtn && visible ? <PopviewController btn={popBtn} handleBack={this.handleBack}/> : null}
          <StyleController />
          <StyleCombController />
          <ModalController />
        </div>
      </ConfigProvider>

 src/views/menudesign/index.scss

@@ -8,15 +8,7 @@
    position: relative;
    background: #ffffff;
    padding: 50px 0px 0px 0px;
    
    // .menu-setting::before {
    //   content: ' ';
    //   position: absolute;
    //   width: 300px;
    //   height: 100%;
    //   left: 0;
    //   top: 0;
    // }

    .menu-setting {
      position: fixed;
      left: 0;
@@ -27,6 +19,7 @@
      background: #ffffff;
      box-shadow: 0px 2px 5px #bcbcbc;
      overflow-y: auto;
      overflow-x: hidden;

      > .ant-collapse {
        background-color: #ffffff;
@@ -116,6 +109,7 @@
      > .ant-card {
        >.ant-card-head {
          margin-bottom: 0px;
          position: relative;
          .ant-card-head-title {
            color: #1890ff;
            padding: 5px 0;