2023-08-11

king

2023-08-11 4adb8b8868aeed1f5f3b89ae269a7724c6b451ad

 src/tabviews/zshare/pageMessage/index.jsx

@@ -1,28 +1,350 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Button } from 'antd'
import { is, fromJS } from 'immutable'
import { Button, Modal, Typography, Tree } from 'antd'

import options from '@/store/options.js'
import Api from '@/api'
import Utils from '@/utils/utils.js'

import './index.scss'

const { TreeNode } = Tree
const { Paragraph } = Typography

class PageMessage extends Component {
  static propTpyes = {
    BID: PropTypes.any,          // 父级Id，用于查询下拉选择项
    menuType: PropTypes.any,     // 菜单权限，是否为HS
  }

  state = {
    debug: sessionStorage.getItem('debug') === 'true'
    debug: sessionStorage.getItem('debug') === 'true',
    visible: false,
    key: '',        // 更新指针
    data: []
  }

  render() {
    const { debug } = this.state
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

    return (debug && options.sysType !== 'cloud' ? <Button
      icon="copy"
      shape="circle"
      className="page-message"
      onClick={this.handleviewconfig}
    /> : null)
  /**
   * @description 组件销毁，清除state更新
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
  }

  handleviewconfig = (e) => {
    const { config } = this.props
    let data = []
    e.stopPropagation()

    if (config.Template === 'CustomPage') {
      data = this.getCusData(config)
    } else {
      data = this.getData(config)
    }

    this.setState({
      visible: true,
      data: data
    })
  }

  getBtnCell = (cell, item) => {
    let _cell = { uuid: cell.uuid, title: `按钮(${cell.label})：` }
    let _others = []
    let tablename = cell.OpenType === 'excelIn' ? (cell.sheet || '') : (cell.sql || '')

    if (cell.OpenType === 'excelOut' && cell.intertype === 'system') {
      tablename = item.setting.tableName || ''
    }
    if (['pop', 'prompt', 'exec', 'excelIn', 'excelOut'].includes(cell.OpenType)) {
      if (tablename) {
        _others.push(`${tablename}(表名)`)
      }
      if (cell.innerFunc) {
        _others.push(`${cell.innerFunc}(内部函数)`)
      }
      if (cell.outerFunc) {
        _others.push(`${cell.outerFunc}(外部函数)`)
      }
    } else if (cell.OpenType === 'popview') {
      _cell.sublist = []
      Api.getLocalCacheConfig({
        func: 'sPC_Get_LongParam',
        MenuID: cell.uuid
      }).then(res => {
        if (res.LongParam) {
          let _config
          try { // 配置信息解析
            _config = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
          } catch (e) {
            _config = ''
          }

          if (_config) {
            _cell.sublist = this.getCusData(_config)
            this.setState({key: cell.uuid})
          }
        }
      })
    }

    _cell.title = _cell.title + _others.join('、')

    return _cell
  }

  getCusData = (config) => {
    let data = []
    config.components.forEach(item => {
      let _item = { uuid: item.uuid, title: item.name, sublist: [] }
      if (item.type === 'tabs') {
        item.subtabs.forEach(tab => {
          let cell = { uuid: tab.uuid, title: tab.label }

          cell.sublist = this.getCusData(tab)

          _item.sublist.push(cell)
        })
      } else if (item.type === 'group') {
        _item.sublist = this.getCusData(item)
      } else if (item.type === 'search' || (item.type === 'card' && item.subtype === 'propcard' && item.wrap.datatype === 'static')) {
        let cell = { uuid: Utils.getuuid(), title: '数据源：(无)' }
        _item.sublist.push(cell)
      } else if (item.setting) {
        let cell = { uuid: Utils.getuuid(), title: '数据源：' }
        let _others = []

        if (item.setting.tableName) {
          _others.push(`${item.setting.tableName}(表名)`)
        }
        if (item.setting.innerFunc) {
          _others.push(`${item.setting.innerFunc}(内部函数)`)
        }
        if (item.setting.outerFunc) {
          _others.push(`${item.setting.outerFunc}(外部函数)`)
        }
        cell.title = cell.title + _others.join('、')

        _item.sublist.push(cell)
      }

      if (item.action) {
        item.action.forEach(cell => {
          let _cell = this.getBtnCell(cell, item)
          _item.sublist.push(_cell)
        })
      }

      if (item.type === 'card') {
        item.subcards.forEach(card => {
          card.elements && card.elements.forEach(cell => {
            if (cell.eleType === 'button') {
              let _cell = this.getBtnCell(cell, item)
              _item.sublist.push(_cell)
            }
          })
          card.backElements && card.backElements.forEach(cell => {
            if (cell.eleType === 'button') {
              let _cell = this.getBtnCell(cell, item)
              _item.sublist.push(_cell)
            }
          })
        })
      } else if (item.type === 'table') {
        item.cols.forEach(col => {
          if (col.type !== 'action') return
          col.elements && col.elements.forEach(cell => {
            let _cell = this.getBtnCell(cell, item)
            _item.sublist.push(_cell)
          })
        })
      }

      data.push(_item)
    })

    return data
  }

  getData = (config) => {
    let data = []
    let item = {uuid: Utils.getuuid(), title: '数据源：'}
    let _others = []

    if (config.Template === 'SubTable') {
      if (config.tabNo) {
        _others.push(`${config.tabNo}(菜单参数)`)
      }
    }

    if (config.setting.tableName) {
      _others.push(`${config.setting.tableName}(表名)`)
    }
    if (config.setting.innerFunc) {
      _others.push(`${config.setting.innerFunc}(内部函数)`)
    }
    if (config.setting.outerFunc) {
      _others.push(`${config.setting.outerFunc}(外部函数)`)
    }
    item.title = item.title + _others.join('、')
    data.push(item)

    // 按钮
    config.action && config.action.forEach(item => {
      let _item = {uuid: Utils.getuuid(), title: `按钮(${item.label})：`}
      let _others = []

      let tablename = item.OpenType === 'excelIn' ? (item.sheet || '') : (item.sql || '')
  
      if (item.OpenType === 'excelOut' && item.intertype === 'system') {
        tablename = config.setting.tableName || ''
      }
  
      if (item.OpenType === 'popview') {
        _item.sublist = []
        Api.getLocalCacheConfig({
          func: 'sPC_Get_LongParam',
          MenuID: item.linkTab
        }).then(res => {
          if (res.LongParam) {
            let _config
            try { // 配置信息解析
              _config = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
            } catch (e) {
              _config = ''
            }

            if (_config) {
              _item.sublist = this.getData(_config)
              this.setState({key: item.uuid})
            }
          }
        })
      } else if (['pop', 'prompt', 'exec', 'excelIn', 'excelOut'].includes(item.OpenType)) {
        if (tablename) {
          _others.push(`${tablename}(表名)`)
        }
        if (item.innerFunc) {
          _others.push(`${item.innerFunc}(内部函数)`)
        }
        if (item.outerFunc) {
          _others.push(`${item.outerFunc}(外部函数)`)
        }
      }
      _item.title = _item.title + _others.join('、')
      
      data.push(_item)
    })

    // 标签页
    config.tabgroups && config.tabgroups.forEach(group => {
      group.sublist.forEach(tab => {
        let _item = {uuid: Utils.getuuid(), title: `标签(${tab.label})：`, sublist: []}
    
        Api.getLocalCacheConfig({
          func: 'sPC_Get_LongParam',
          MenuID: tab.linkTab
        }).then(res => {
          if (res.LongParam) {
            let _config
            try { // 配置信息解析
              _config = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
            } catch (e) {
              _config = ''
            }

            if (_config) {
              _item.sublist = this.getData(_config)
              this.setState({key: tab.uuid})
            }
          }
        })

        data.push(_item)
      })
    })

    if (config.Template === 'CalendarPage' && config.tab) {
      let _item = {uuid: Utils.getuuid(), title: `标签(${config.tab.label})：`, sublist: []}
    
      Api.getLocalCacheConfig({
        func: 'sPC_Get_LongParam',
        MenuID: config.tab.linkTab
      }).then(res => {
        if (res.LongParam) {
          let _config
          try { // 配置信息解析
            _config = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
          } catch (e) {
            _config = ''
          }

          if (_config) {
            _item.sublist = this.getData(_config)
            this.setState({key: config.tab.linkTab})
          }
        }
      })

      data.push(_item)
    }

    return data
  }

  getTreeNode = (data) => {
    return data.map(item => {
      if (item.sublist && item.sublist.length) {
        return (
          <TreeNode title={item.title} key={item.uuid} selectable={false}>
            {this.getTreeNode(item.sublist)}
          </TreeNode>
        )
      }
      return <TreeNode key={item.uuid} title={item.title} isLeaf selectable={false} />
    })
  }


  render() {
    const { menu } = this.props
    const { debug, visible, data } = this.state

    return (
      <div className={'page-message-wrap ' + (debug && window.GLOB.sysType !== 'cloud' ? 'exist' : '')}>
        {debug && window.GLOB.sysType !== 'cloud' ? <Button
          icon="copy"
          shape="circle"
          className="page-message"
          onClick={this.handleviewconfig}
        /> : null}
        <Modal
          className="menu-tree-modal"
          title={'菜单信息'}
          width={'850px'}
          maskClosable={false}
          visible={visible}
          onCancel={() => this.setState({visible: false})}
          footer={[
            <Button key="close" onClick={() => this.setState({visible: false})}>关闭</Button>
          ]}
          destroyOnClose
        >
          <div className="menu-header">
            <span>菜单名称：{menu.MenuName}</span>
            {menu.MenuNo ? <span>菜单参数：<Paragraph copyable>{menu.MenuNo}</Paragraph></span> : null}
          </div>
          {visible ? <Tree defaultExpandAll showLine={true}>
            {this.getTreeNode(data)}
          </Tree> : null}
        </Modal>
      </div>
    )
  }
}