2023-01-09

king

2023-01-09 4cd93a0c0525a22ec8798e51096fa5bfd448bde0

2023-01-09

 src/menu/components/card/balcony/options.jsx

@@ -257,7 +257,7 @@
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'multiselect',

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

@@ -149,7 +149,7 @@
      options: [
        {value: 'page', label: '页码'},
        {value: 'switch', label: '左右切换', forbid: appType === 'mob' || subtype === 'tablecard'},
        {value: 'slide', label: '滑动加载', forbid: appType !== 'mob'},
        {value: 'slide', label: '滑动加载', forbid: appType !== 'mob' || sessionStorage.getItem('editMenuType') === 'popview'},
        {value: 'more', label: '查看更多'},
      ],
      controlFields: [
@@ -499,7 +499,7 @@
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'multiselect',

 src/menu/components/carousel/data-card/options.jsx

@@ -211,7 +211,7 @@
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'multiselect',

 src/menu/components/chart/antv-G6/chartcompile/formconfig.jsx

@@ -87,7 +87,7 @@
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'multiselect',

 src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx

@@ -87,7 +87,7 @@
        {value: 'true', text: '启用'},
        {value: 'false', text: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'select',

 src/menu/components/chart/antv-dashboard/chartcompile/formconfig.jsx

@@ -61,7 +61,7 @@
        {value: 'true', text: '启用'},
        {value: 'false', text: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'select',

 src/menu/components/chart/antv-pie/chartcompile/formconfig.jsx

@@ -119,7 +119,7 @@
        {value: 'true', text: '启用'},
        {value: 'false', text: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'select',

 src/menu/components/chart/antv-scatter/chartcompile/formconfig.jsx

@@ -61,7 +61,7 @@
        {value: 'true', text: '启用'},
        {value: 'false', text: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'select',

 src/menu/components/chart/chart-custom/chartcompile/formconfig.jsx

@@ -72,7 +72,7 @@
        {value: 'true', text: '启用'},
        {value: 'false', text: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'select',

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

@@ -71,7 +71,7 @@
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'multiselect',

 src/menu/components/editor/braft-editor/options.jsx

@@ -99,7 +99,7 @@
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'multiselect',

 src/menu/components/form/simple-form/options.jsx

@@ -179,7 +179,7 @@
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'cascader',

 src/menu/components/form/step-form/options.jsx

@@ -130,7 +130,7 @@
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'cascader',

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

@@ -109,7 +109,7 @@
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'radio',

 src/menu/components/iframe/options.jsx

@@ -120,7 +120,7 @@
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'multiselect',

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

@@ -54,7 +54,7 @@
    {
      type: 'radio',
      field: 'drawerPlacement',
      label: '抽屉方向',
      label: '弹出方向',
      initval: wrap.drawerPlacement || 'right',
      required: false,
      options: [
@@ -129,7 +129,7 @@
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'multiselect',

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

@@ -18,7 +18,7 @@
  exec: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'anchors', 'width', 'openmenu', 'refreshTab', 'hidden'],
  excelIn: ['label', 'Ot', 'OpenType', 'intertype', 'show', 'icon', 'class', 'color', 'sheet', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'width', 'hidden'],
  excelOut: ['label', 'OpenType', 'intertype', 'show', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'pagination', 'search', 'width', 'hidden'],
  popview: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'color', 'popClose', 'width', 'display', 'ratio', 'syncComponent', 'clickouter', 'hidden'],
  popview: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'color', 'popClose', 'width', 'display', 'ratio', 'syncComponent', 'clickouter', 'maskStyle', 'closeButton', 'hidden'],
  tab: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'color', 'linkmenu', 'width', 'hidden'],
  innerpage: ['label', 'Ot', 'OpenType', 'pageTemplate', 'show', 'swipe', 'icon', 'class', 'color', 'width', 'hidden'],
  funcbutton: ['label', 'OpenType', 'funcType', 'show', 'swipe', 'icon', 'class', 'color', 'width', 'hidden'],
@@ -356,7 +356,9 @@
    } else if (openType === 'popview') {
      reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value))

      if (this.record.display === 'drawer') {
      if (appType === 'mob') {
        shows.push('placement')
      } else if (this.record.display === 'drawer') {
        shows.push('placement')
      }
      if (this.record.popClose === 'grid') {

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

@@ -126,7 +126,7 @@
    }
  }
  if (appType === 'mob') {
    opentypes = opentypes.filter(item => ['pop', 'prompt', 'exec', 'excelOut', 'innerpage', 'funcbutton'].includes(item.value))
    opentypes = opentypes.filter(item => ['pop', 'prompt', 'exec', 'excelOut', 'popview', 'innerpage', 'funcbutton'].includes(item.value))
    funTypes = [
      { value: 'print', text: '标签打印' },
      { value: 'scan', text: '扫码' },
@@ -829,23 +829,13 @@
      }, {
        value: 'drawer',
        text: '抽屉'
      }]
    },
    {
      type: 'number',
      key: 'ratio',
      min: 1,
      max: 3000,
      precision: 0,
      label: '比例',
      initVal: card.ratio || 85,
      tooltip: '模态框或抽屉的宽度，小于100为窗口宽度（或高度）百分比，大于100为像素值。',
      required: true
      }],
      forbid: appType === 'mob',
    },
    {
      type: 'radio',
      key: 'placement',
      label: '抽屉方向',
      label: '弹出方向',
      initVal: card.placement || 'right',
      required: false,
      options: [{
@@ -863,6 +853,17 @@
      }]
    },
    {
      type: 'number',
      key: 'ratio',
      min: 1,
      max: 3000,
      precision: 0,
      label: '比例',
      initVal: card.ratio || 85,
      tooltip: '模态框或抽屉的宽度，小于100为窗口宽度（或高度）百分比，大于100为像素值。',
      required: true
    },
    {
      type: 'radio',
      key: 'clickouter',
      label: '点击蒙层',
@@ -875,6 +876,36 @@
        value: 'close',
        text: '关闭'
      }]
    },
    {
      type: 'radio',
      key: 'maskStyle',
      label: '蒙层样式',
      initVal: card.maskStyle || 'default',
      required: false,
      options: [{
        value: 'default',
        text: '默认'
      }, {
        value: 'transparent',
        text: '透明'
      }],
      forbid: appType !== 'mob'
    },
    {
      type: 'radio',
      key: 'closeButton',
      label: '关闭按钮',
      initVal: card.closeButton || 'false',
      required: false,
      options: [{
        value: 'false',
        text: '隐藏'
      }, {
        value: 'true',
        text: '显示'
      }],
      forbid: appType !== 'mob'
    },
    {
      type: 'radio',
@@ -1678,7 +1709,7 @@
    {
      type: 'radio',
      key: 'placement',
      label: '抽屉方向',
      label: '弹出方向',
      initVal: card.placement || 'right',
      required: false,
      options: [{

 src/menu/components/table/edit-table/options.jsx

@@ -277,7 +277,7 @@
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'multiselect',

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

@@ -296,7 +296,7 @@
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'multiselect',

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

@@ -237,7 +237,7 @@
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'multiselect',

 src/menu/components/timeline/normal-timeline/options.jsx

@@ -140,7 +140,7 @@
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'multiselect',

 src/menu/components/tree/antd-tree/options.jsx

@@ -131,7 +131,7 @@
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
      forbid: !appType || sessionStorage.getItem('editMenuType') === 'popview'
    },
    {
      type: 'multiselect',

 src/menu/datasource/verifycard/index.jsx

@@ -433,13 +433,9 @@
      if (_loading) {
        notification.warning({
          top: 92,
          message: '存在未保存脚本，请点击确定保存，或点击取消放弃修改！',
          message: '存在未保存脚本！',
          duration: 5
        })
        this.setState({
          loading: false
        })
        return
      }

      this.setState({

 src/menu/datasource/verifycard/utils.jsx

@@ -132,7 +132,7 @@

    let _search = defSearch

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

 src/menu/pastecontroller/index.jsx

@@ -62,7 +62,11 @@
    let options = ['tabs', 'timeline', 'datacard', 'propcard', 'mainsearch', 'simpleform', 'stepform', 'tabform', 'balcony', 'group', 'normaltable', 'tablecard', 'line', 'bar', 'pie', 'dashboard', 'scatter', 'iframe', 'sandbox']

    if (appType === 'mob') {
      options.push('menubar', 'topbar')
      if (sessionStorage.getItem('editMenuType') !== 'popview') {
        options.push('menubar', 'topbar')
      } else {
        options.push('menubar')
      }
    } else {
      options.push('editable', 'antvG6')
    }

 src/mob/components/menubar/normal-menubar/options.jsx

@@ -74,7 +74,8 @@
      options: [
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ]
      ],
      forbid: sessionStorage.getItem('editMenuType') === 'popview'
    },
  ]


 src/mob/components/tabs/antv-tabs/options.jsx

@@ -185,7 +185,8 @@
      options: [
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ]
      ],
      forbid: sessionStorage.getItem('editMenuType') === 'popview'
    },
  ]


 src/mob/modulesource/index.jsx

@@ -16,7 +16,7 @@
  }

  UNSAFE_componentWillMount () {
    const { components } = this.props
    const { components, viewType } = this.props
    let options = []
    
    if (components) {
@@ -29,6 +29,10 @@
      }
    }

    if (viewType === 'popview') {
      options = options.filter(item => !['topbar', 'navbar', 'login', 'officialAccount'].includes(item.component))
    }

    this.setState({
      menuOptions: options
    })

 src/templates/modalconfig/settingform/index.jsx

@@ -256,7 +256,7 @@
            </Form.Item>
          </Col> : null}
          {display === 'drawer' ? <Col span={12}>
            <Form.Item label="抽屉方向">
            <Form.Item label="弹出方向">
              {getFieldDecorator('placement', {
                initialValue: placement
              })(

 src/templates/sharecomponent/actioncomponent/verifyexcelout/index.jsx

@@ -868,10 +868,9 @@
      if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && !/^\s+$/.test(this.scriptsForm.props.form.getFieldValue('sql'))) {
        notification.warning({
          top: 92,
          message: '存在未保存脚本，请点击确定保存，或点击取消放弃修改！',
          message: '存在未保存脚本！',
          duration: 5
        })
        return
      }

      this.setState({loading: true})

 src/templates/sharecomponent/actioncomponent/verifyprint/index.jsx

@@ -554,10 +554,9 @@
      if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && !/^\s+$/.test(this.scriptsForm.props.form.getFieldValue('sql'))) {
        notification.warning({
          top: 92,
          message: '存在未保存脚本，请点击确定保存，或点击取消放弃修改！',
          message: '存在未保存脚本！',
          duration: 5
        })
        return
      }

      this.setState({loading: true})

 src/templates/sharecomponent/searchcomponent/settingform/index.jsx

@@ -89,7 +89,7 @@
            <Form.Item label={
              <Tooltip placement="topLeft" title="抽屉展开的方向。">
                <QuestionCircleOutlined className="mk-form-tip" />
                抽屉方向
                弹出方向
              </Tooltip>
            }>
              {getFieldDecorator('drawerPlacement', {

 src/templates/sharecomponent/settingcalcomponent/verifycard/index.jsx

@@ -182,10 +182,9 @@
      if (_loading) {
        notification.warning({
          top: 92,
          message: '存在未保存脚本，请点击确定保存，或点击取消放弃修改！',
          message: '存在未保存脚本！',
          duration: 5
        })
        return
      }

      this.setState({loading: true})

 src/templates/sharecomponent/settingcomponent/settingform/index.jsx

@@ -363,10 +363,9 @@
    if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && !/^\s+$/.test(this.scriptsForm.props.form.getFieldValue('sql'))) {
      notification.warning({
        top: 92,
        message: '存在未保存脚本，请点击确定保存，或点击取消放弃修改！',
        message: '存在未保存的脚本！',
        duration: 5
      })
      return
    }

    if (activeKey === 'setting') {

 src/templates/sharecomponent/treesettingcomponent/settingform/index.jsx

@@ -212,10 +212,9 @@
      if (_loading) {
        notification.warning({
          top: 92,
          message: '存在未保存脚本，请点击确定保存，或点击取消放弃修改！',
          message: '存在未保存脚本！',
          duration: 5
        })
        return
      }
      this.setState({loading: true})
      this.sqlverify(() => { // 验证成功

 src/templates/zshare/formconfig.jsx

@@ -1447,7 +1447,7 @@
    {
      type: 'radio',
      key: 'placement',
      label: '抽屉方向',
      label: '弹出方向',
      initVal: card.placement || 'right',
      required: false,
      options: [{

 src/views/mobdesign/index.jsx

@@ -45,6 +45,7 @@
const StyleCombController = asyncComponent(() => import('@/menu/stylecombcontroller'))
const StyleCombControlButton = asyncComponent(() => import('@/menu/stylecombcontrolbutton'))
const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent'))
const PopView = asyncComponent(() => import('./popview'))

sessionStorage.setItem('isEditState', 'true')
sessionStorage.setItem('editMenuType', 'menu') // 编辑菜单类型
@@ -73,6 +74,7 @@
    comloading: false,
    adapters: [],
    viewType: 'menu',
    view: '',
    eyeopen: false,
    needUpdate: false
  }
@@ -140,6 +142,7 @@
      document.getElementById('mk-mob-design-view').innerHTML = '<div style="text-align: center; font-size: 30px; margin-top: 40vh; height: 100vh; background: #fff;">本应用没有PC端页面的编辑权限，请联系管理员！</div>'
      return
    }
    MKEmitter.addListener('changePopview', this.initPopview)
    MKEmitter.addListener('triggerMenuSave', this.submitConfig)
    MKEmitter.addListener('changeEditMenu', this.changeEditMenu)
    setTimeout(() => {
@@ -210,8 +213,129 @@
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('changePopview', this.initPopview)
    MKEmitter.removeListener('triggerMenuSave', this.submitConfig)
    MKEmitter.removeListener('changeEditMenu', this.changeEditMenu)
  }

  initPopview = (card, btn) => {
    const { config } = this.state

    if (!this.checkBase()) {
      return
    }

    let _btn = fromJS(btn).toJS()

    if (_btn.config) {
      _btn.config.uuid = _btn.uuid
      _btn.config.MenuID = _btn.uuid
      _btn.config.ParentId = card.uuid
      _btn.config.MenuName = _btn.label
    } else {
      _btn.config = {
        uuid: _btn.uuid,
        MenuID: _btn.uuid,
        ParentId: card.uuid,
        enabled: false,
        MenuName: _btn.label,
        tables: config.tables || [],
        Template: 'CustomPage',
        components: [],
        viewType: 'popview',
        style: { backgroundColor: '#ffffff', backgroundImage: '', paddingTop: '16px', paddingBottom: '40px', paddingLeft: '16px', paddingRight: '16px' }
      }
    }

    this.setState({view: 'popview', popConfig: _btn})
  }

  closePop = () => {
    const {config} = this.state

    sessionStorage.setItem('editMenuType', 'menu')

    window.GLOB.urlFields = config.urlFields || []
    window.GLOB.customMenu = config

    this.setState({view: '', popConfig: null})
  }

  submitPopConfig = (btnconfig) => {
    let parents = {[btnconfig.ParentId]: true}
    let popbtns = {[btnconfig.uuid]: fromJS(btnconfig).toJS()}
    let config = fromJS(this.state.config).toJS()

    config.components = this.setPopView(config.components, parents, popbtns)

    this.setState({ config }, () => {
      this.submitConfig()
    })
  }

  setPopView = (components, parents, popbtns) => {
    return components.map(item => {
      if (item.type === 'tabs') {
        item.subtabs.forEach(tab => {
          tab.components = this.setPopView(tab.components, parents, popbtns)
        })
      } else if (item.type === 'group') {
        item.components = this.setPopView(item.components, parents, popbtns)
      } else if (parents[item.uuid]) {
        this.setpopConfig(item, popbtns)
      }
      return item
    })
  }

  setpopConfig = (config, popbtns) => {
    config.subcards && config.subcards.forEach(item => {
      item.elements.forEach(cell => {
        if (cell.eleType !== 'button') return
        if (cell.OpenType === 'popview' && popbtns[cell.uuid]) {
          cell.config = popbtns[cell.uuid]
        }
      })
    })

    config.cols && config.cols.forEach(col => {
      if (col.type === 'action') {
        col.elements.forEach(cell => {
          if (cell.OpenType === 'popview' && popbtns[cell.uuid]) {
            cell.config = popbtns[cell.uuid]
          }
        })
      }
    })

    config.elements && config.elements.forEach(cell => {
      if (cell.eleType !== 'button') return
      if (cell.OpenType === 'popview' && popbtns[cell.uuid]) {
        cell.config = popbtns[cell.uuid]
      }
    })
  
    config.action && config.action.forEach(cell => {
      if (cell.OpenType === 'popview' && popbtns[cell.uuid]) {
        cell.config = popbtns[cell.uuid]
      }
    })

    config.$tables = getTables(config)
  }

  checkBase = () => {
    const { config } = this.state

    if (!config.MenuName || !config.MenuNo) {
      notification.warning({
        top: 92,
        message: '请完善菜单基本信息！',
        duration: 5
      })
      return false
    }
    return true
  }

  getSmStemp = () => {
@@ -1868,7 +1992,7 @@


  render () {
    const { viewType, comloading, loading, settingshow, controlshow, activeKey, MenuId, config, menuloading, adapters, eyeopen, needUpdate } = this.state
    const { view, viewType, comloading, loading, settingshow, controlshow, activeKey, MenuId, config, menuloading, adapters, eyeopen, needUpdate } = this.state

    return (
      <ConfigProvider locale={antdZhCN}>
@@ -1876,7 +2000,7 @@
          <Header/>
          {loading ? <Spin className="view-spin" size="large" /> : null}
          <DndProvider backend={HTML5Backend}>
            <div className={'menu-setting ' + (!settingshow ? 'hidden' : '')}>
            {view !== 'popview' ? <><div className={'menu-setting ' + (!settingshow ? 'hidden' : '')}>
              <div className="draw">
                {settingshow ? <DoubleLeftOutlined onClick={() => {this.setState({settingshow: false})}} /> : null}
                {!settingshow ? <DoubleRightOutlined onClick={() => {this.setState({settingshow: true})}} /> : null}
@@ -1947,7 +2071,7 @@
              {config && !comloading ? <div className="mob-shell" style={{width: window.GLOB.shellWidth, height: window.GLOB.shellHeight}}>
                <MobShell menu={config} handleList={this.updateConfig} />
              </div> : null}
            </div>
            </div></> : <PopView btn={this.state.popConfig} save={this.submitPopConfig} cancel={this.closePop}/>}
          </DndProvider>
          <StyleController />
          <StyleCombController />

 src/views/mobdesign/popview/index.jsx

New file
@@ -0,0 +1,306 @@
import React, { Component } from 'react'
import { is, fromJS } from 'immutable'
import PropTypes from 'prop-types'
import { notification, Modal, Collapse, Switch, Button } from 'antd'
import { DoubleLeftOutlined, DoubleRightOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons'

import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'

import './index.scss'

const { Panel } = Collapse
const { confirm } = Modal

const MenuForm = asyncComponent(() => import('./menuform'))
const MobShell = asyncComponent(() => import('@/mob/mobshell'))
const SourceWrap = asyncComponent(() => import('@/mob/modulesource'))
const Modulecell = asyncComponent(() => import('@/menu/modulecell'))
const BgController = asyncComponent(() => import('@/pc/bgcontroller'))
const ReplaceField = asyncComponent(() => import('@/menu/replaceField'))
const PasteController = asyncComponent(() => import('@/menu/pastecontroller'))
const StyleCombControlButton = asyncComponent(() => import('@/menu/stylecombcontrolbutton'))
const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent'))

class PopViewDesign extends Component {
  static propTpyes = {
    btn: PropTypes.object,
    save: PropTypes.func,
    cancel: PropTypes.func
  }

  state = {
    menuloading: false,
    oriConfig: null,
    config: null,
    comloading: false,
    settingshow: true,
    controlshow: true,
    eyeopen: false
  }

  UNSAFE_componentWillMount() {
    const { btn } = this.props
    sessionStorage.setItem('editMenuType', 'popview')

    let config = fromJS(btn.config).toJS()

    window.GLOB.urlFields = []               // url变量
    window.GLOB.customMenu = config          // 保存菜单信息

    this.setState({config: config, oriConfig: fromJS(config).toJS()})
  }

  componentDidMount () {
    MKEmitter.addListener('completeSave', this.completeSave)
    MKEmitter.addListener('triggerMenuSave', this.submitConfig)
  }

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

  /**
   * @description 组件销毁，清除state更新
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('completeSave', this.completeSave)
    MKEmitter.removeListener('triggerMenuSave', this.submitConfig)
  }

  closeView = () => {
    const { oriConfig, config } = this.state

    if (!is(fromJS(oriConfig), fromJS(config))) {
      const _this = this

      confirm({
        title: '配置已修改，放弃保存吗？',
        content: '',
        onOk() {
          _this.props.cancel()
        },
        onCancel() {}
      })
    } else {
      this.props.cancel()
    }
  }

  getMenuMessage = (config) => {
    let tbs = []

    let traversal = (components) => {
      components.forEach(item => {
        if (item.$tables) {
          tbs.push(...item.$tables)
        }
        if (item.type === 'tabs') {
          item.subtabs.forEach(tab => {
            traversal(tab.components)
          })
        } else if (item.type === 'group') {
          traversal(item.components)
        }
      })
    }

    traversal(config.components)

    config.$tables = Array.from(new Set(tbs))
  }

  completeSave = () => {
    this.setState({
      oriConfig: fromJS(this.state.config).toJS(),
      menuloading: false
    })
  }

  submitConfig = () => {
    let config = fromJS(this.state.config).toJS()

    if (config.cacheUseful === 'true' && !config.cacheTime) {
      notification.warning({
        top: 92,
        message: '请完善缓存设置！',
        duration: 5
      })
      return
    }

    if (config.enabled && this.verifyConfig()) {
      config.enabled = false
    }

    this.getMenuMessage(config)

    this.setState({
      config: config,
      menuloading: true
    })

    window.GLOB.customMenu = config

    this.props.save(fromJS(config).toJS())
  }

  onEnabledChange = () => {
    const { config } = this.state

    if (!config.enabled && this.verifyConfig(true)) {
      return
    }

    this.setState({
      config: {...config, enabled: !config.enabled}
    })
  }

  verifyConfig = (show) => {
    const { config } = this.state
    let error = ''

    let check = (components) => {
      components.forEach(item => {
        if (error) return
        if (item.type === 'tabs') {
          item.subtabs.forEach(tab => {
            check(tab.components)
          })
          return
        } else if (item.type === 'group') {
          check(item.components)
          return
        } else if (!item.errors || item.errors.length === 0) {
          return
        }
        
        item.errors.forEach(err => {
          if (err.level !== 0 || error) return
          error = `组件《${item.name}》${err.detail}`
        })
      })
    }

    check(config.components)

    if (show && error) {
      notification.warning({
        top: 92,
        message: error,
        duration: 5
      })
    }

    return error
  }

  // 更新配置信息
  updateConfig = (config) => {
    this.setState({
      config: config
    })

    window.GLOB.customMenu = config
  }

  resetConfig = (config) => {
    this.setState({
      config,
      comloading: true
    }, () => {
      this.setState({
        comloading: false
      })
    })

    window.GLOB.customMenu = config
  }

  /**
   * @description 更新常用表信息，快捷添加后更新配置信息
   */
  updatetable = (config) => {
    this.setState({ config })

    window.GLOB.customMenu = config
  }

  insert = (item) => {
    let config = fromJS(this.state.config).toJS()

    config.components.push(item)

    this.setState({config})

    window.GLOB.customMenu = config
    
    notification.success({
      top: 92,
      message: '粘贴成功！',
      duration: 2
    })
  }

  render () {
    const { settingshow, controlshow, comloading, config, menuloading, eyeopen } = this.state

    return (
      <div className="mob-poper-view">
        <div className={'menu-setting ' + (!settingshow ? 'hidden' : '')}>
          <div className="draw">
            {settingshow ? <DoubleLeftOutlined onClick={() => {this.setState({settingshow: false})}} /> : null}
            {!settingshow ? <DoubleRightOutlined onClick={() => {this.setState({settingshow: true})}} /> : null}
          </div>
          <div className="pc-setting-tools">
            <Collapse accordion defaultActiveKey="component" bordered={false}>
              {/* 基本信息 */}
              <Panel header="基本信息" forceRender className="basedata" key="basedata">
                {/* 菜单信息 */}
                <MenuForm config={config} updateConfig={this.updateConfig}/>
                {/* 表名添加 */}
                <TableComponent config={config} updatetable={this.updateConfig}/>
              </Panel>
              {/* 组件添加 */}
              <Panel header="组件" className="component" key="component">
                <SourceWrap viewType="popview"/>
              </Panel>
              <Panel header="元素" key="element">
                <Modulecell />
              </Panel>
              <Panel header={'页面样式'} key="background">
                <BgController config={config} updateConfig={this.updateConfig} />
              </Panel>
            </Collapse>
          </div>
        </div>
        <div className={'menu-control' + (!controlshow ? ' hidden' : '')}>
          <div className="draw">
            {controlshow ? <DoubleRightOutlined onClick={() => {this.setState({controlshow: false})}}/> : null}
            {!controlshow ? <DoubleLeftOutlined onClick={() => {this.setState({controlshow: true})}}/> : null}
          </div>
          <div className="wrap">
            <Button type="primary" onClick={this.submitConfig} id="save-config" loading={menuloading}>保存</Button>
            <Switch className="big" checkedChildren="启" unCheckedChildren="停" checked={config && config.enabled} onChange={this.onEnabledChange} />
            <Button className="mk-border-purple" onClick={() => this.setState({eyeopen: !eyeopen})}>{!eyeopen ? <EyeOutlined /> : <EyeInvisibleOutlined />} 组件名</Button>
            <PasteController insert={this.insert} />
            <StyleCombControlButton menu={config} />
            <ReplaceField type="custom" config={config} updateConfig={this.resetConfig}/>
            <Button type="default" onClick={this.closeView}>返回</Button>
          </div>
        </div>
        <div className={'menu-body menu-view' + (menuloading ? ' saving' : '') + (eyeopen ? ' eye-open' : '')}>
          {config && !comloading ? <div className="mob-shell" style={{width: window.GLOB.shellWidth, height: window.GLOB.shellHeight}}>
            <MobShell menu={config} handleList={this.updateConfig} />
          </div> : null}
        </div>
      </div>
    )
  }
}

export default PopViewDesign

 src/views/mobdesign/popview/index.scss

New file
@@ -0,0 +1,4 @@
.mob-poper-view {
  background: #000;
  min-height: 100vh;
}

 src/views/mobdesign/popview/menuform/index.jsx

New file
@@ -0,0 +1,98 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Radio, Tooltip, InputNumber } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

// import './index.scss'

class CustomMenuForm extends Component {
  static propTpyes = {
    config: PropTypes.object,
    updateConfig: PropTypes.func
  }
  
  changeCacheDay = (val) => {
    if (typeof(val) !== 'number') {
      val = ''
    }
    this.props.updateConfig({...this.props.config, cacheTime: val})
  }

  selectChange = (key, value) => {
    const { config } = this.props

    if (key === 'cacheUseful') {
      this.props.updateConfig({...config, cacheUseful: value})
    } else if (key === 'timeUnit') {
      this.props.updateConfig({...config, timeUnit: value})
    }
  }

  render() {
    const { config } = this.props
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    }

    return (
      <Form {...formItemLayout}>
        <Row>
          <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="对于不经常性变动的信息，缓存数据有助于提高查询效率。">
                <QuestionCircleOutlined className="mk-form-tip" />
                缓存数据
              </Tooltip>
            }>
              {getFieldDecorator('cacheUseful', {
                initialValue: config.cacheUseful || 'false'
              })(
                <Radio.Group onChange={(e) => {this.selectChange('cacheUseful', e.target.value)}}>
                  <Radio value="true">使用</Radio>
                  <Radio value="false">不使用</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          {config.cacheUseful === 'true' ? <Col span={24}>
            <Form.Item label="单位">
              {getFieldDecorator('timeUnit', {
                initialValue: config.timeUnit || 'day'
              })(
                <Radio.Group onChange={(e) => {this.selectChange('timeUnit', e.target.value)}}>
                  <Radio value="day">天</Radio>
                  <Radio value="hour">小时</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          {config.cacheUseful === 'true' ? <Col span={24}>
            <Form.Item label="时长">
              {getFieldDecorator('cacheTime', {
                initialValue: config.cacheTime,
                rules: [
                  {
                    required: true,
                    message: '请输入时长!'
                  }
                ]
              })(
                <InputNumber min={1} max={config.timeUnit !== 'hour' ? 7 : 23} precision={0} onChange={this.changeCacheDay}/>
              )}
            </Form.Item>
          </Col> : null}
        </Row>
      </Form>
    )
  }
}

export default Form.create()(CustomMenuForm)

 src/views/mobdesign/popview/menuform/index.scss

 src/views/pcdesign/index.jsx

@@ -1686,7 +1686,7 @@
    return (
      <ConfigProvider locale={antdZhCN}>
        <DndProvider backend={HTML5Backend}>
          {view !== 'popview' ?<div className={'mk-pc-view '} id="mk-pc-design-view">
          {view !== 'popview' ? <div className={'mk-pc-view '} id="mk-pc-design-view">
            {loading ? <Spin className="view-spin" size="large" /> : null}
            <div className={'menu-setting ' + (!settingshow ? 'hidden' : '')}>
              <div className="draw">