king
2021-01-15 76a4300654a18d228838c3f27455dc8e7a8cd616
src/tabviews/zshare/settingcomponent/index.jsx
@@ -1,23 +1,28 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Icon, Button, Modal, notification } from 'antd'
import { Button, Modal, notification, Spin, Empty } from 'antd'
import Api from '@/api'
import MKEmitter from '@/utils/events.js'
import UtilsUpdate from '@/utils/utils-update.js'
import options from '@/store/options.js'
import asyncComponent from '@/utils/asyncSpinComponent'
import './index.scss'
const VerifyCard = asyncComponent(() => import('@/tabviews/zshare/verifycard'))
const EditTable = asyncComponent(() => import('./editTable'))
class CustomSetting extends Component {
  static propTpyes = {
    dict: PropTypes.any,              // 字典表
    reloadview: PropTypes.func,       // 页面刷新
    dict: PropTypes.object,           // 字典表
    config: PropTypes.object,         // 页面配置信息
    shortcuts: PropTypes.any,         // 自定义设置
    permAction: PropTypes.object,     // 按钮权限
  }
  state = {
    userParam: null,       // 保存用户编辑中的配置
    visible: false,        // 模态框控制
    components: null,      // 组件集合
    revertLoading: false,  // 恢复默认设置
    confirmLoading: false, // 自定义设置模态框加载中
  }
@@ -26,22 +31,357 @@
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }
  controlCustomSetting = () => {
  trigger = () => {
    const { config } = this.props
    this.setState({
      visible: true,
      confirmLoading: false,
      revertLoading: false
    })
    if (config.Template === 'CommonTable' || config.Template === 'TreePage') {
      this.getPageConfig()
    } else if (config.Template === 'CustomPage') {
      this.getCustomPageConfig()
    } else {
      notification.warning({
        top: 92,
        message: '配置信息格式错误!',
        duration: 5
      })
    }
  }
  changeMenuParam = (param) => {
    this.setState({userParam: param})
  getCustomPageConfig = () => {
    const { shortcuts } = this.props
    let config = fromJS(this.props.config).toJS()
    let userConfig = {}
    let printbtns = []
    let _components = []
    shortcuts.forEach(item => {
      userConfig[item.uuid] = item
    })
    let filterComponent = (components) => {
      components.forEach(item => {
        if (item.type === 'tabs') {
          item.subtabs.forEach(tab => {
            filterComponent(tab.components)
          })
          return
        } else if (item.type === 'group') {
          filterComponent(item.components)
          return
        }
        let _comp = {title: item.name, uuid: item.uuid, action: []}
        item.action && item.action.forEach(cell => {
          cell.$expanded = false
          if (cell.OpenType === 'funcbutton' && cell.funcType === 'print') {
            cell.$port = cell.verify ? cell.verify.linkUrl : ''
            if (cell.verify && cell.verify.printerTypeList) {
              cell.verify.printerTypeList = cell.verify.printerTypeList.map(_cell => {
                _cell.parentId = cell.uuid
                _cell.$port = cell.$port
                return _cell
              })
              cell.$expanded = true
            }
            printbtns.push(cell)
          }
          _comp.action.push({...cell, ...(userConfig[cell.uuid] || {})})
        })
        if (item.type === 'card' || (item.type === 'table' && item.subtype === 'tablecard')) {
          item.subcards.forEach(card => {
            card.elements && card.elements.forEach(cell => {
              if (cell.eleType !== 'button') return
              cell.$expanded = false
              if (cell.OpenType === 'funcbutton' && cell.funcType === 'print') {
                cell.$port = cell.verify ? cell.verify.linkUrl : ''
                if (cell.verify && cell.verify.printerTypeList) {
                  cell.verify.printerTypeList = cell.verify.printerTypeList.map(_cell => {
                    _cell.parentId = cell.uuid
                    _cell.$port = cell.$port
                    return _cell
                  })
                  cell.$expanded = true
                }
                printbtns.push(cell)
              }
              _comp.action.push({...cell, ...(userConfig[cell.uuid] || {})})
            })
            card.backElements && card.backElements.forEach(cell => {
              if (cell.eleType !== 'button') return
              cell.$expanded = false
              if (cell.OpenType === 'funcbutton' && cell.funcType === 'print') {
                cell.$port = cell.verify ? cell.verify.linkUrl : ''
                if (cell.verify && cell.verify.printerTypeList) {
                  cell.verify.printerTypeList = cell.verify.printerTypeList.map(_cell => {
                    _cell.parentId = cell.uuid
                    _cell.$port = cell.$port
                    return _cell
                  })
                  cell.$expanded = true
                }
                printbtns.push(cell)
              }
              _comp.action.push({...cell, ...(userConfig[cell.uuid] || {})})
            })
          })
        } else if (item.type === 'table' && item.subtype === 'normaltable') {
          item.cols && item.cols.forEach(col => {
            if (col.type !== 'action') return
            col.elements && col.elements.forEach(cell => {
              cell.$expanded = false
              if (cell.OpenType === 'funcbutton' && cell.funcType === 'print') {
                cell.$port = cell.verify ? cell.verify.linkUrl : ''
                if (cell.verify && cell.verify.printerTypeList) {
                  cell.verify.printerTypeList = cell.verify.printerTypeList.map(_cell => {
                    _cell.parentId = cell.uuid
                    _cell.$port = cell.$port
                    return _cell
                  })
                  cell.$expanded = true
                }
                printbtns.push(cell)
              }
              _comp.action.push({...cell, ...(userConfig[cell.uuid] || {})})
            })
          })
        }
        if (_comp.action.length > 0) {
          _components.push(_comp)
        }
      })
    }
    filterComponent(config.components)
    this.setState({components: _components})
    this.getPrinter(printbtns)
  }
  getPageConfig = () => {
    const { shortcuts, permAction } = this.props
    let config = fromJS(this.props.config).toJS()
    let userConfig = {}
    let components = []
    let _component = { title: '主表', uuid: config.MenuID, action: [] }
    let printbtns = []
    shortcuts.forEach(item => {
      userConfig[item.uuid] = item
    })
    config.action && config.action.forEach(item => {
      item.$expanded = false
      if (item.OpenType === 'funcbutton' && item.funcType === 'print') {
        item.$port = item.verify ? item.verify.linkUrl : ''
        printbtns.push(item)
        if (item.verify && item.verify.printerTypeList && item.verify.printerTypeList.length > 0) {
          item.verify.printerTypeList = item.verify.printerTypeList.map(cell => {
            cell.parentId = item.uuid
            cell.$port = item.$port
            return cell
          })
          item.$expanded = true
        }
      }
      _component.action.push({...item, ...(userConfig[item.uuid] || {})})
    })
    if (_component.action.length > 0) {
      components.push(_component)
    }
    let deffers = []
    config.tabgroups && config.tabgroups.forEach(group => {
      group.sublist.forEach(tab => {
        deffers.push(new Promise(resolve => {
          let param = {
            func: 'sPC_Get_LongParam',
            MenuID: tab.linkTab
          }
          Api.getCacheConfig(param).then(res => {
            res.tab = tab
            resolve(res)
          })
        }))
      })
    })
    if (deffers.length > 0) {
      Promise.all(deffers).then(result => {
        let errors = result.filter(res => !res.status)
        if (errors.length > 0) {
          notification.warning({
            top: 92,
            message: errors[0].message,
            duration: 5
          })
          return
        }
        result.forEach(res => {
          if (!res.LongParam) return
          let subconfig = ''
          try {
            subconfig = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
          } catch (e) {
            console.warn('Parse Failure')
            subconfig = ''
          }
          if (!subconfig || !subconfig.enabled) return
          subconfig = UtilsUpdate.updateSubTable(subconfig)
          let _comp = {title: res.tab.label, uuid: res.tab.uuid, action: []}
          subconfig.action.forEach(item => {
            if (!permAction[item.uuid]) return
            item.$expanded = false
            if (item.OpenType === 'funcbutton' && item.funcType === 'print') {
              let _item = window.GLOB.UserCacheMap.get(res.tab.uuid + item.uuid)
              item.printer = _item ? (_item.printer || '') : ''
              item.$port = item.verify ? item.verify.linkUrl : ''
              if (item.verify && item.verify.printerTypeList) {
                item.verify.printerTypeList = item.verify.printerTypeList.map(cell => {
                  cell.parentId = item.uuid
                  cell.$port = item.$port
                  cell.printer = _item && _item.printerList ? (_item.printerList[cell.Value] || '') : ''
                  return cell
                })
                item.$expanded = true
              }
              printbtns.push(item)
            }
            _comp.action.push({...item, ...(userConfig[item.uuid] || {})})
          })
          if (_comp.action.length > 0) {
            components.push(_comp)
          }
        })
        this.setState({components})
        this.getPrinter(printbtns)
      })
    } else {
      this.setState({components})
      this.getPrinter(printbtns)
    }
  }
  getPrinter = (printbtns) => {
    let links = []
    printbtns.forEach(item => {
      if (!item.verify || !item.verify.linkUrl) {
        notification.warning({
          top: 92,
          message: '按钮《' + item.label + '》设置错误!',
          duration: 5
        })
      } else if (!links.includes(item.verify.linkUrl)) {
        links.push(item.verify.linkUrl)
        let socket = null
        socket = new WebSocket('ws://' + item.verify.linkUrl)
        // 打开Socket
        socket.onopen = () =>{
          let request  = {
            requestID: '',
            version: '',
            cmd: 'getPrinters'
          }
          socket.send(JSON.stringify(request))
        }
        // 监听消息
        socket.onmessage = (event) => {
          let data = ''
          try {
            data = JSON.parse(event.data)
          } catch {
            data = ''
          }
          if (data && data.cmd === 'getPrinters' && (data.status === true || data.status === 'success')) {
            let _printers = []
            let _printer = data.printers[0]
            if (_printer && typeof(_printer) === 'string') {
              _printers = Array.from(new Set(data.printers))
              _printers = _printers.map(print => {
                return {
                  value: print,
                  text: print
                }
              })
            } else if (_printer && typeof(_printer) === 'object') {
              _printers = data.printers.map(p => p.name)
              _printers = Array.from(new Set(_printers))
              _printers = _printers.map(print => {
                return {
                  value: print,
                  text: print
                }
              })
            }
            window.GLOB.UserCacheMap.set(item.verify.linkUrl, _printers)
          } else if (data && data.cmd === 'getPrinters') {
            notification.warning({
              top: 92,
              message: data.message,
              duration: 5
            })
          }
        }
        socket.onerror = () => {
          let tool = item.verify.linkUrl
          if (item.verify.linkUrl === '127.0.0.1:13529') {
            tool = '明科通讯组件'
          } else if (item.verify.linkUrl === '127.0.0.1:13528') {
            tool = 'CAINIAO打印组件'
          }
          notification.warning({
            top: 92,
            message: '无法连接到: ' + tool,
            duration: 5
          })
        }
      }
    })
  }
  settingRevert = () => {
    const { config } = this.props
    let param = {
      func: 's_TrdMenu_UserParam_del',
      MenuID: this.props.MenuID
      MenuID: config.MenuID
    }
    this.setState({
      revertLoading: true
@@ -59,22 +399,50 @@
        })
        return
      }
      this.setState({
        visible: false,
        revertLoading: false
      }, () => {
        window.GLOB.CacheMap = new Map()
        this.props.reloadview()
      Api.deleteMenuStorage(config.MenuID).then(() => {
        this.setState({
          visible: false,
          revertLoading: false
        }, () => {
          window.GLOB.CacheMap = new Map()
          MKEmitter.emit('reloadMenuView', config.MenuID)
        })
      })
    })
  }
  settingSubmit = () => {
    const { userParam } = this.state
    let _LongParam = ''
    const { config } = this.props
    const { components } = this.state
    let _LongParam = {version: '1.0', action: [], printers: []}
    components.forEach(com => {
      com.action.forEach(item => {
        if (item.shortcut && item.shortcut.length > 0) {
          _LongParam.action.push({uuid: item.uuid, parentId: com.uuid, shortcut: item.shortcut, $shortcut: item.shortcut.join('+')})
        }
        if (item.funcType === 'print' && (item.printer || item.verify.printerTypeList)) {
          let printerList = {}
          if (item.verify.printerTypeList) {
            item.verify.printerTypeList.forEach(cell => {
              printerList[cell.Value] = cell.printer || ''
            })
          }
          _LongParam.printers.push({
            uuid: item.uuid,
            parentId: com.uuid,
            printer: item.printer || '',
            printerList
          })
        }
      })
    })
    try {
      _LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(userParam)))
      _LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(_LongParam)))
    } catch (e) {
      notification.warning({
        top: 92,
@@ -84,12 +452,10 @@
      return
    }
    let easyCode = userParam[this.props.MenuID] ? userParam[this.props.MenuID].easyCode : ''
    let param = {
      func: 'sPC_TrdMenu_UserParam',
      MenuID: this.props.MenuID,
      EasyCode: easyCode || '',
      MenuID: config.MenuID,
      EasyCode: config.easyCode || '',
      LongParam: _LongParam
    }
@@ -110,29 +476,48 @@
        return
      }
      Api.deleteMenuStorage(this.props.MenuID).then(() => {
      Api.deleteMenuStorage(config.MenuID).then(() => {
        this.setState({
          visible: false,
          confirmLoading: false
        }, () => {
          window.GLOB.CacheMap = new Map()
          this.props.reloadview()
          MKEmitter.emit('reloadMenuView', config.MenuID)
        })
      })
    })
  }
  onChange = (list, parentId) => {
    const { components } = this.state
    this.setState({
      components: components.map(item => {
        if (item.uuid === parentId) {
          item.action = list
        }
        return item
      })
    })
  }
  render() {
    const { components, visible } = this.state
    
    return (
      <div>
        <Icon className="custom-control" type="setting" onClick={this.controlCustomSetting} />
      <div className="page-setting-wrap">
        {options.sysType === 'local' ? <Button
          icon="setting"
          shape="circle"
          className="page-setting"
          onClick={this.trigger}
        /> : null}
        <Modal
          wrapClassName="common-table-custom-modal"
          wrapClassName="custom-setting-modal"
          title={'自定义设置'}
          maskClosable={false}
          width={950}
          visible={this.state.visible}
          visible={visible}
          onCancel={() => { this.setState({ visible: false }) }}
          footer={[
            <Button key="revert" type="danger" loading={this.state.revertLoading} onClick={this.settingRevert}>{this.props.dict['main.revert.default']}</Button>,
@@ -141,17 +526,14 @@
          ]}
          destroyOnClose
        >
          {this.state.visible ?
            <VerifyCard
              MenuID={this.props.MenuID}
              MenuName={this.props.MenuName}
              permAction={this.props.permAction}
              config={this.props.config}
              userConfig={this.props.userConfig}
              columns={this.props.columns}
              handleParam={this.changeMenuParam}
            /> : null
          }
          {components && components.length > 0 ? components.map(item => (
            <div key={item.uuid}>
              <p className="component-title">{item.title}</p>
              <EditTable data={item.action} onChange={(list) => this.onChange(list, item.uuid)}/>
            </div>
          )) : null}
          {components && components.length === 0 ? <Empty /> : null}
          {!components ? <Spin size="large" /> : null}
        </Modal>
      </div>
    )