2022-09-06

king

2022-09-06 fa381753ef2a2b25b1c0722549ac17e333da79be

 src/views/menudesign/index.jsx

@@ -1,5 +1,6 @@
import React, { Component } from 'react'
import { DndProvider } from 'react-dnd'
import { withRouter } from 'react-router'
import { is, fromJS } from 'immutable'
import moment from 'moment'
import HTML5Backend from 'react-dnd-html5-backend'
@@ -12,7 +13,7 @@
import Utils, { setGLOBFuncs } from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
import antdEnUS from 'antd/es/locale/en_US'
// import antdEnUS from 'antd/es/locale/en_US'
import antdZhCN from 'antd/es/locale/zh_CN'
import MKEmitter from '@/utils/events.js'
import MenuUtils from '@/utils/utils-custom.js'
@@ -23,7 +24,7 @@
const { Panel } = Collapse
const { confirm } = Modal
const { Paragraph } = Typography
const _locale = sessionStorage.getItem('lang') !== 'en-US' ? antdZhCN : antdEnUS
const _locale = antdZhCN

const MenuForm = asyncComponent(() => import('./menuform'))
const HomeForm = asyncComponent(() => import('./homeform'))
@@ -31,10 +32,8 @@
const MenuShell = asyncComponent(() => import('@/menu/menushell'))
const PrintMenuForm = asyncComponent(() => import('./printmenuform'))
const SourceWrap = asyncComponent(() => import('@/menu/modulesource'))
const PopviewController = asyncComponent(() => import('@/menu/popview'))
const BgController = asyncComponent(() => import('@/menu/bgcontroller'))
const BgController = asyncComponent(() => import('@/pc/bgcontroller'))
const PasteController = asyncComponent(() => import('@/menu/pastecontroller'))
const PaddingController = asyncComponent(() => import('@/menu/padcontroller'))
const StyleController = asyncComponent(() => import('@/menu/stylecontroller'))
const ReplaceField = asyncComponent(() => import('@/menu/replaceField'))
const Versions = asyncComponent(() => import('@/menu/versions'))
@@ -47,13 +46,8 @@
const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent'))

sessionStorage.setItem('isEditState', 'true')
sessionStorage.setItem('editMenuType', 'menu') // 编辑菜单类型
sessionStorage.setItem('appType', '')          // 应用类型
document.body.className = ''
window.GLOB.UserComponentMap = new Map() // 缓存用户自定义组件
window.GLOB.TabsMap = new Map()          // 缓存用户操作的标签页
window.GLOB.urlFields = []               // url变量
window.GLOB.customMenu = null            // 保存菜单信息

class MenuDesign extends Component {
  state = {
@@ -65,20 +59,25 @@
    MenuNo: '',
    delButtons: [],
    copyButtons: [],
    thawButtons: [],
    activeKey: 'basedata',
    menuloading: false,
    oriConfig: null,
    config: null,
    popBtn: null,             // 弹窗标签页
    visible: false,
    customComponents: [],
    comloading: false,
    settingshow: true,
    eyeopen: false
    eyeopen: false,
    modalStatus: false       // 弹窗是否开启，判断ctrl+s是否可用
  }

  UNSAFE_componentWillMount() {
    sessionStorage.setItem('editMenuType', 'menu') // 编辑菜单类型

    window.GLOB.UserComponentMap = new Map() // 缓存用户自定义组件
    window.GLOB.TabsMap = new Map()          // 缓存用户操作的标签页
    window.GLOB.urlFields = []               // url变量
    window.GLOB.customMenu = null            // 保存菜单信息

    try {
      let param = JSON.parse(window.decodeURIComponent(window.atob(this.props.match.params.param)))

@@ -106,16 +105,25 @@

  componentDidMount () {
    MKEmitter.addListener('delButtons', this.delButtons)
    MKEmitter.addListener('thawButtons', this.thawButtons)
    MKEmitter.addListener('modalStatus', this.modalStatus)
    // MKEmitter.addListener('thawButtons', this.thawButtons)
    MKEmitter.addListener('copyButtons', this.copyButtons)
    MKEmitter.addListener('changePopview', this.initPopview)
    MKEmitter.addListener('triggerMenuSave', this.triggerMenuSave)
    MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle)
    MKEmitter.addListener('updateCustomComponent', this.updateCustomComponent)
    setTimeout(() => {
      this.updateCustomComponent()
      if (sessionStorage.getItem('app_custom_components')) {
        let list = sessionStorage.getItem('app_custom_components')
        list = JSON.parse(list)

        this.setCustomComponent(list)
      } else {
        this.updateCustomComponent()
      }
      this.getAppPictures()
      this.getPrintTemp()
      this.getRoleFields()
      setGLOBFuncs()
    }, 1000)

@@ -138,10 +146,16 @@
      let _shortcut = `${preKey}+${keyCode}`

      if (_shortcut === 'ctrl+83') {
        let node = document.getElementById('save-modal-config')
        if (!node) {
          node = document.getElementById('save-pop-config')
        if (this.state.modalStatus) {
          notification.warning({
            top: 92,
            message: '请保存' + this.state.modalStatus,
            duration: 5
          })
          return false
        }

        let node = document.getElementById('save-modal-config')
        if (!node) {
          node = document.getElementById('save-config')
        }
@@ -162,7 +176,8 @@
      return
    }
    MKEmitter.removeListener('delButtons', this.delButtons)
    MKEmitter.removeListener('thawButtons', this.thawButtons)
    MKEmitter.removeListener('modalStatus', this.modalStatus)
    // MKEmitter.removeListener('thawButtons', this.thawButtons)
    MKEmitter.removeListener('copyButtons', this.copyButtons)
    MKEmitter.removeListener('changePopview', this.initPopview)
    MKEmitter.removeListener('triggerMenuSave', this.triggerMenuSave)
@@ -170,9 +185,11 @@
    MKEmitter.removeListener('updateCustomComponent', this.updateCustomComponent)
  }

  triggerMenuSave = () => {
    if (this.state.visible) return
  modalStatus = (val) => {
    this.setState({modalStatus: val})
  }

  triggerMenuSave = () => {
    this.submitConfig()
  }

@@ -265,36 +282,46 @@
      typename: '',
      typecharone: ''
    }).then(res => {
      let coms = []
      if (res.cus_list && res.cus_list.length > 0) {
        res.cus_list.forEach(item => {
          let config = ''

          try {
            config = JSON.parse(window.decodeURIComponent(window.atob(item.long_param)))
          } catch (e) {
            console.warn('Parse Failure')
            config = ''
          }

          if (!config || !item.c_name) return

          window.GLOB.UserComponentMap.set(item.c_id, item.c_name)
          coms.push({
            uuid: item.c_id,
            type: 'menu',
            title: item.c_name,
            url: item.images,
            component: config.type,
            subtype: config.subtype,
            width: config.width || 24,
            config
          })
      if (!res.status) {
        notification.warning({
          top: 92,
          message: res.message,
          duration: 5
        })
      } else if (res.cus_list) {
        sessionStorage.setItem('app_custom_components', JSON.stringify(res.cus_list))
        this.setCustomComponent(res.cus_list)
      }
      this.setState({customComponents: coms})
      this.getRoleFields()
    })
  }

  setCustomComponent = (cus_list) => {
    let coms = []

    cus_list.forEach(item => {
      let config = ''

      try {
        config = JSON.parse(window.decodeURIComponent(window.atob(item.long_param)))
      } catch (e) {
        console.warn('Parse Failure')
        config = ''
      }

      if (!config || !item.c_name) return

      window.GLOB.UserComponentMap.set(item.c_id, item.c_name)
      coms.push({
        uuid: item.c_id,
        type: 'menu',
        title: item.c_name,
        url: item.images,
        component: config.type,
        subtype: config.subtype,
        config
      })
    })
    this.setState({customComponents: coms})
  }

  updateComponentStyle = (parentId, keys, style) => {
@@ -327,9 +354,9 @@
    this.setState({copyButtons: [...this.state.copyButtons, ...items]})
  }
  
  thawButtons = (item) => {
    this.setState({thawButtons: [...this.state.thawButtons, item]})
  }
  // thawButtons = (item) => {
  //   this.setState({thawButtons: [...this.state.thawButtons, item]})
  // }

  initPopview = (card, btn) => {
    const { oriConfig, config } = this.state
@@ -343,20 +370,11 @@
      return
    }

    btn.config = fromJS(config).toJS()
    btn.component = card
    let _btn = fromJS(btn).toJS()
    _btn.MenuName = config.MenuName + '-' + card.name + '-' + btn.label
    _btn.ParentMenuID = config.uuid

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

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

  handleBack = () => {
    this.setState({popBtn: null, delButtons: [], copyButtons: []}, () => {
      sessionStorage.setItem('editMenuType', 'menu')
      window.GLOB.customMenu = this.state.config
      this.setState({visible: false})
    })
    this.props.history.push('/popdesign/' + window.btoa(window.encodeURIComponent((JSON.stringify(_btn)))))
  }

  closeView = () => {
@@ -436,9 +454,13 @@
          config.parentId = 'BillPrintTemp'
          config.MenuName = MenuName
          config.MenuNo = MenuNo
          config.firstCount = config.firstCount || 15

          if (config.everyPCount && !config.printPage) {
            config.printPage = 'page'
          }

          config.printPage = config.printPage || 'auto'
          config.everyPCount = config.everyPCount || 15
          config.lastCount = config.lastCount || ''
        }

        config.open_edition = result.open_edition || ''
@@ -478,7 +500,6 @@
              delButtons.push(btn.uuid)
              return
            }
            this.checkBtn(btn)
            buttons.push(`select '${btn.uuid}' as menuid, '${item.name + '-' + btn.label}' as menuname, '${_sort * 10}' as Sort`)
            _sort++
          })
@@ -489,7 +510,6 @@
                delButtons.push(cell.uuid)
                return
              }
              this.checkBtn(cell)
              buttons.push(`select '${cell.uuid}' as menuid, '${item.name + '-' + cell.label}' as menuname, '${_sort * 10}' as Sort`)
              _sort++
            })
@@ -499,7 +519,6 @@
                delButtons.push(cell.uuid)
                return
              }
              this.checkBtn(cell)
              buttons.push(`select '${cell.uuid}' as menuid, '${item.name + '-' + cell.label}' as menuname, '${_sort * 10}' as Sort`)
              _sort++
            })
@@ -512,7 +531,6 @@
                delButtons.push(cell.uuid)
                return
              }
              this.checkBtn(cell)
              buttons.push(`select '${cell.uuid}' as menuid, '${item.name + '-' + cell.label}' as menuname, '${_sort * 10}' as Sort`)
              _sort++
            })
@@ -524,7 +542,6 @@
              delButtons.push(cell.uuid)
              return
            }
            this.checkBtn(cell)
            buttons.push(`select '${cell.uuid}' as menuid, '${item.name + '-' + cell.label}' as menuname, '${_sort * 10}' as Sort`)
            _sort++
          })
@@ -534,7 +551,6 @@
              delButtons.push(btn.uuid)
              return
            }
            this.checkBtn(btn)
            buttons.push(`select '${btn.uuid}' as menuid, '${item.name + '-' + btn.label}' as menuname, '${_sort * 10}' as Sort`)
            _sort++
          })
@@ -544,7 +560,6 @@
              delButtons.push(btn.uuid)
              return
            }
            this.checkBtn(btn)
            buttons.push(`select '${btn.uuid}' as menuid, '${item.name + '-' + btn.label}' as menuname, '${_sort * 10}' as Sort`)
            _sort++
          })
@@ -555,7 +570,6 @@
                delButtons.push(btn.uuid)
                return
              }
              this.checkBtn(btn)
              buttons.push(`select '${btn.uuid}' as menuid, '${item.name + '-' + btn.label}' as menuname, '${_sort * 10}' as Sort`)
              _sort++
            })
@@ -569,31 +583,11 @@
    return buttons
  }

  checkBtn = (btn) => {
    if (['prompt', 'exec', 'pop'].includes(btn.OpenType) && btn.Ot === 'required' && btn.verify && btn.verify.scripts && btn.verify.scripts.length > 0) {
      let hascheck = false
      btn.verify.scripts.forEach(item => {
        if (item.status === 'false') return
  
        if (/\$check@|@check\$/ig.test(item.sql)) {
          hascheck = true
        }
      })
      if (hascheck) {
        notification.warning({
          top: 92,
          message: `可选择多行的按钮《${btn.label}》中 $check@ 或 @check$ 将不会生效！`,
          duration: 5
        })
      }
    }
  }

  submitConfig = () => {
    const { MenuType, copyButtons, thawButtons } = this.state
    const { MenuType, copyButtons } = this.state
    let config = fromJS(this.state.config).toJS()

    if (MenuType === 'billPrint' && (!config.firstCount || !config.everyPCount)) {
    if (MenuType === 'billPrint' && config.printPage === 'page' && !config.everyPCount) {
      notification.warning({
        top: 92,
        message: '请完善基本信息！',
@@ -732,28 +726,28 @@
          }
          return Api.getSystemConfig(_param)
        }
      }).then(res => { // 按钮解除冻结
        if (!res) return
        if (!res.status) {
          notification.warning({
            top: 92,
            message: res.message,
            duration: 5
          })
          return false
        }
      // }).then(res => { // 按钮解除冻结
      //   if (!res) return
      //   if (!res.status) {
      //     notification.warning({
      //       top: 92,
      //       message: res.message,
      //       duration: 5
      //     })
      //     return false
      //   }

        let ids = thawButtons.filter(item => btnIds.indexOf(item) !== -1)
        if (ids.length === 0) {
          return {
            status: true
          }
        } else {
          return Api.getSystemConfig({
            func: 'sPC_MainMenu_ReDel',
            MenuID: ids.join(',')
          })
        }
      //   let ids = thawButtons.filter(item => btnIds.indexOf(item) !== -1)
      //   if (ids.length === 0) {
      //     return {
      //       status: true
      //     }
      //   } else {
      //     return Api.getSystemConfig({
      //       func: 'sPC_MainMenu_ReDel',
      //       MenuID: ids.join(',')
      //     })
      //   }
      }).then(res => { // 页面保存
        if (!res) return

@@ -771,6 +765,12 @@
        if (!res) return

        if (res.status) {
          if (MenuType !== 'billPrint') { // 基本信息改变时，通知菜单列表更新
            let ori = this.state.oriConfig
            if (config.MenuName !== ori.MenuName || config.MenuNo !== ori.MenuNo || config.parentId !== ori.parentId) {
              localStorage.setItem('menuUpdate', new Date().getTime())
            }
          }
          config.open_edition = res.open_edition || ''
          this.setState({
            config,
@@ -891,7 +891,6 @@
          this.setState({
            delButtons: [],
            copyButtons: [],
            thawButtons: [],
            menuloading: false
          })
          notification.success({
@@ -906,10 +905,11 @@
        }
        MKEmitter.emit('completeSave')
      })
    }, 300)
    }, 300 + (+sessionStorage.getItem('mkDelay')))
  }

  getRoleFields = () => {
    if (sessionStorage.getItem('sysRoles') || sessionStorage.getItem('permFuncField')) return
    Api.getSystemConfig({func: 'sPC_Get_Roles_sModular'}).then(res => {
      if (res.status) {
        let _permFuncField = []
@@ -959,6 +959,7 @@
    let check = (components) => {
      components.forEach(item => {
        if (error) return
        
        if (item.type === 'tabs') {
          item.subtabs.forEach(tab => {
            check(tab.components)
@@ -967,46 +968,14 @@
        } else if (item.type === 'group') {
          check(item.components)
          return
        } else if (item.subtype === 'propcard' && item.subcards.length === 0) {
          error = `组件《${item.name}》中卡片不可为空！`
        } else if (!item.errors || item.errors.length === 0) {
          return
        }
        
        if (['voucher'].includes(item.subtype)) return
        if (['propcard', 'brafteditor', 'sandbox', 'stepform', 'tabform'].includes(item.subtype) && item.wrap.datatype === 'static') return
        if (['balcony'].includes(item.type) && item.wrap.datatype === 'static') return
  
        if (item.setting) {
          if (item.setting.interType === 'system' && item.setting.execute !== 'false' && !item.setting.dataresource) {
            error = `组件《${item.name}》未设置数据源！`
          } else if (item.setting.interType === 'system' && item.setting.execute === 'false' && item.scripts.length === 0) {
            error = `组件《${item.name}》未设置数据源！`
          } else if (!item.setting.primaryKey) {
            error = `组件《${item.name}》未设置主键！`
          } else if (!item.setting.supModule && item.type !== 'balcony' && (!item.wrap || item.wrap.supType !== 'multi')) {
            error = `组件《${item.name}》未设置上级组件！`
          }
        }
        if (item.type === 'bar' || item.type === 'line' || item.type === 'pie') {
          if (!item.plot.Xaxis) {
            error = `组件《${item.name}》图表字段尚未设置！`
          }
        } else if (item.type === 'dashboard' && !item.plot.valueField) {
          error = `组件《${item.name}》显示值尚未设置！`
        } else if (item.type === 'scatter' && (!item.plot.Xaxis || !item.plot.Yaxis || !item.plot.gender)) {
          error = `组件《${item.name}》坐标轴尚未设置！`
        } else if (item.type === 'tree' && (!item.wrap.valueField || !item.wrap.labelField || !item.wrap.parentField)) {
          error = `组件《${item.name}》基本信息尚未设置！`
        } else if (item.type === 'table' && item.wrap.doubleClick) {
          let _actions = [...item.action]
          item.cols.forEach(col => {
            if (col.type !== 'action') return
            _actions.push(...col.elements)
          })
          if (_actions.findIndex((m) => m.uuid === item.wrap.doubleClick) === -1) {
            error = `组件《${item.name}》绑定的双击按钮已删除！`
          }
        }

        item.errors.forEach(err => {
          if (err.level !== 0 || error) return
          error = `组件《${item.name}》${err.detail}`
        })
      })
    }

@@ -1100,13 +1069,13 @@
  }

  render () {
    const { activeKey, comloading, MenuType, popBtn, visible, dict, MenuId, config, settingshow, ParentId, MenuName, MenuNo, menuloading, customComponents, eyeopen } = this.state
    const { activeKey, comloading, MenuType, dict, MenuId, config, settingshow, ParentId, menuloading, customComponents, eyeopen } = this.state

    return (
      <ConfigProvider locale={_locale}>
        <div className={'pc-menu-view ' + (MenuType || '')} id="mk-menu-design-view">
        <div className={'pc-menu-view ' + (MenuType || '')}>
          <Header />
          {!popBtn && !visible ? <DndProvider backend={HTML5Backend}>
          <DndProvider backend={HTML5Backend}>
            <div className="menu-body">
              <div className={'menu-setting ' + (!settingshow ? 'hidden' : '')}>
                <div className="draw">
@@ -1114,15 +1083,15 @@
                </div>
                <Collapse accordion activeKey={activeKey} bordered={false} onChange={(key) => this.setState({activeKey: key})}>
                  {/* 基本信息 */}
                  <Panel header={dict['mob.basemsg']} key="basedata">
                  <Panel header="基本信息" key="basedata">
                    {/* 菜单信息 */}
                    {config && MenuType === 'custom' ? <MenuForm
                      dict={dict}
                      config={config}
                      MenuId={MenuId}
                      parentId={ParentId}
                      MenuName={MenuName}
                      MenuNo={MenuNo}
                      MenuName={config.MenuName}
                      MenuNo={config.MenuNo}
                      updateConfig={this.updateConfig}
                    /> : null}
                    {config && MenuType === 'home' ? <HomeForm
@@ -1144,17 +1113,14 @@
                    {config ? <Paragraph style={{padding: '15px 0px 0px 18px'}} copyable={{ text: MenuId }}>菜单ID</Paragraph> : null}
                  </Panel>
                  {/* 组件添加 */}
                  <Panel header={dict['mob.component']} key="component">
                  <Panel header="组件" key="component">
                    <SourceWrap MenuType={MenuType} />
                  </Panel>
                  {customComponents && customComponents.length ? <Panel header="自定义组件" key="cuscomponent">
                    <SourceWrap components={customComponents} MenuType={MenuType} />
                  </Panel> : null}
                  <Panel header={'页面背景'} key="background">
                  <Panel header="页面样式" key="background">
                    {config ? <BgController config={config} updateConfig={this.updateConfig} /> : null}
                  </Panel>
                  <Panel header={'页面内边距'} key="padding">
                    {config ? <PaddingController config={config} updateConfig={this.updateConfig} /> : null}
                  </Panel>
                </Collapse>
              </div>
@@ -1179,8 +1145,7 @@
                </Card>
              </div>
            </div>
          </DndProvider> : null}
          {popBtn && visible ? <PopviewController btn={popBtn} handleBack={this.handleBack}/> : null}
          </DndProvider>
          <StyleController />
          <StyleCombController />
          <ModalController />
@@ -1190,4 +1155,4 @@
  }
}

export default MenuDesign
export default withRouter(MenuDesign)