2020-03-16

king

2020-03-16 8eb9303af35b6bee86daaa9ff478b623516fc183

 src/tabviews/commontable/index.jsx

@@ -2,26 +2,31 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { notification, Spin, Tabs, Icon, Switch, Modal, Button} from 'antd'
import { notification, Spin, Tabs, Icon, Switch, Modal, Button, message, Tree, Typography } from 'antd'
import moment from 'moment'

import Api from '@/api'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
import Utils from '@/utils/utils.js'
import asyncComponent from '@/utils/asyncLoadComponent'
import asyncComponent from '@/utils/asyncComponent'
import asyncLoadComponent from '@/utils/asyncLoadComponent'
import {refreshTabView, modifyTabview} from '@/store/action'

import MainTable from './mainTable'
import MainAction from '@/tabviews/tableshare/actionList'
import VerifyCard from '@/tabviews/tableshare/verifycard'
import MainSearch from '@/tabviews/tableshare/topSearch'
import SubTable from '@/tabviews/subtable'
import NotFount from '@/components/404'
import './index.scss'

const SubTabTable = asyncComponent(() => import('@/tabviews/subtabtable'))
const FormTab = asyncComponent(() => import('@/tabviews/formtab'))
const MainAction = asyncComponent(() => import('@/tabviews/tableshare/actionList'))
const SubTable = asyncLoadComponent(() => import('@/tabviews/subtable'))
const SubTabTable = asyncLoadComponent(() => import('@/tabviews/subtabtable'))
const FormTab = asyncLoadComponent(() => import('@/tabviews/formtab'))

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

class NormalTable extends Component {
  static propTpyes = {
@@ -52,15 +57,16 @@
    orderBy: '',          // 排序
    search: '',           // 搜索条件数组，使用时需分场景处理
    BIDs: {},             // 上级表id
    setsingle: false,     // 主表单选多选切换
    pickup: false,        // 主表数据隐藏显示切换
    isLinkMain: false,    // 是否存在与主表关联的子表
    popAction: false,     // 弹框页面，按钮信息
    popData: false,       // 弹框页面，所选的表格数据
    visible: false,       // 弹框显示隐藏控制
    treevisible: false,   // 菜单结构树弹框显示隐藏控制
    tabBtn: null,         // 表单标签按钮
    tabParam: null,       // 表单标签参数
    refreshtabs: null     // 需要刷新的标签集
    refreshtabs: null,    // 需要刷新的标签集
    confirmLoading: false,// 自定义设置模态框加载中
    settingVisible: false // 自定义设置模态框
  }

  /**
@@ -76,12 +82,22 @@
    let result = await Api.getSystemCacheConfig(param)
    if (result.status) {
      let config = ''
      let userConfig = ''

      try { // 配置信息解析
        config = window.decodeURIComponent(window.atob(result.LongParam))
        config = JSON.parse(config)
        config = JSON.parse(window.decodeURIComponent(window.atob(result.LongParam)))
      } catch (e) {
        console.warn('Parse Failure')
        config = ''
      }
      
      if (result.LongParamUser) {
        try { // 配置信息解析
          userConfig = JSON.parse(window.decodeURIComponent(window.atob(result.LongParamUser)))
        } catch (e) {
          console.warn('Parse Failure')
          userConfig = ''
        }
      }

      // 页面配置解析错误时提示
@@ -103,18 +119,57 @@
        return
      }

      // 权限过滤
      config.action = config.action.filter(item => permAction[item.uuid])
      config.tabgroups.forEach(group => {
        if (!config[group]) return

        config[group] = config[group].filter(tab => permAction[tab.linkTab])
      })

      if (userConfig) {
        config.setting = {...config.setting, ...userConfig.setting}
        let _actions = {}
        userConfig.action.forEach(item => {
          _actions[item.uuid] = item
        })

        config.action = config.action.map(item => {
          if (_actions[item.uuid]) {
            item = {...item, ..._actions[item.uuid]}
          }

          return item
        })
      }

      let _arrField = []     // 字段集
      let _columns = []      // 显示列
      let _logcolumns = []   // 日志显示列
      let _hideCol = []      // 隐藏及合并列中字段的uuid集
      let colMap = new Map() // 用于字段过滤

      // 权限过滤
      config.action = config.action.filter(item => permAction[item.uuid])
      // config.tabgroups.forEach(group => {
      //   if (!config[group]) return
      //   config[group] = config[group].filter(tab => permAction[tab.uuid])
      // })
      let _actions = []     // 工具栏按钮
      let _operations = []  // 操作列按钮（存在时）

      config.action.forEach(item => {
        if (item.execMode) {
          item.OpenType = 'funcbutton'
        }

        if (item.position === 'toolbar') {
          _actions.push(item)
        } else if (item.position === 'grid') {
          _operations.push(item)
        }
      })

      if (config.gridBtn && config.gridBtn.display && _operations.length > 0) {
        _columns.push({
          ...config.gridBtn,
          operations: _operations
        })
      }


      // 1、筛选字段集，2、过滤隐藏列及合并列中的字段uuid
@@ -155,28 +210,6 @@
        }
      })

      let _actions = config.action.filter(item => item.position === 'toolbar') // 过滤工具栏按钮
      let _operations = config.action.filter(item => item.position === 'grid') // 添加操作列（存在时）

      if (config.gridBtn && config.gridBtn.display && _operations.length > 0) {
        _columns.push({
          ...config.gridBtn,
          operations: _operations
        })
      }

      
      let _isLinkMain = false // 检查是否有与主表关联的子表
      config.tabgroups.forEach(groupId => {
        if (!config[groupId] || config[groupId].length === 0) return

        config[groupId].forEach(tab => {
          if (tab.supMenu === 'mainTable') {
            _isLinkMain = true
          }
        })
      })

      this.setState({
        loadingview: false,
        config: config,
@@ -185,18 +218,17 @@
        actions: _actions,
        columns: _columns,
        logcolumns: _logcolumns,
        isLinkMain: _isLinkMain,
        arr_field: _arrField.join(','),
        search: Utils.initMainSearch(config.search) // 搜索条件初始化（含有时间格式，需要转化）
      }, () => {
        this.improveSearch()

        if (config.setting.onload !== 'false') { // 初始化可加载
          this.setState({
            loading: true
          })
          this.loadmaindata()
        }
        this.setShortcut()
      })
    } else {
      this.setState({
@@ -207,6 +239,36 @@
        top: 92,
        message: result.message,
        duration: 10
      })
    }
  }

  setShortcut = () => {
    const { actions } = this.state
    if (!actions) return

    document.onkeydown = (event) => {
      let e = event || window.event
      let keyCode = e.keyCode || e.which || e.charCode
      let preKey = ''

      if (e.ctrlKey) {
        preKey = 'ctrl'
      } else if (e.shiftKey) {
        preKey = 'shift'
      } else if (e.altKey) {
        preKey = 'alt'
      }
      
      let istrigger = false
      actions.forEach(item => {
        if (!item.shortcut || istrigger) return

        if (preKey === item.shortcut && keyCode === item.shortcutkey) {
          e.preventDefault()
          istrigger = true
          this.refs.mainButton.actionTrigger(item)
        }
      })
    }
  }
@@ -537,9 +599,7 @@
      orderBy: '',
      search: '',
      BIDs: {},
      setsingle: false,
      pickup: false,
      isLinkMain: false
      pickup: false
    }, () => {
      this.loadconfig()
    })
@@ -653,22 +713,6 @@
      }
    })
  }

  /**
   * @description 表格单选多选切换
   */
  checkChange = () => {
    const { setsingle, BIDs } = this.state

    let _BIDs = JSON.parse(JSON.stringify(BIDs))
    _BIDs.mainTable = ''

    this.setState({
      setsingle: !setsingle,
      pickup: false,
      BIDs: _BIDs
    })
  }
  
  /**
   * @description 数据展开合并切换
@@ -707,6 +751,7 @@
        type: btn.tabTemplate,
        selected: true,
        param: {
          menuType: 'main',
          parentId: this.props.MenuID,
          btn: btn,
          data: data[0] || null,
@@ -740,6 +785,7 @@
        view: 'formtab',
        tabBtn: btn,
        tabParam: {
          menuType: 'main',
          btn: btn,
          data: data[0] || null,
          primaryId: btn.Ot !== 'notRequired' ? _primaryId : '',
@@ -754,6 +800,106 @@
      visible: false
    })
    this.refreshbyaction(this.state.popAction, 'pop')
  }

  handleviewconfig = (e) => {
    e.stopPropagation()

    const { MenuNo } = this.props
    const { config } = this.state

    if (config && config.funcs && config.funcs.length > 0) {
      this.setState({
        treevisible: true
      })
    } else {
      let oInput = document.createElement('input')
      oInput.value = MenuNo || ''
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      document.body.removeChild(oInput)
      message.success(this.state.dict['main.copy.success'])
    }
  }

  getTreeNode = (data) => {
    let _type = {
      view: '页面',
      btn: '按钮',
      tab: '标签'
    }

    return data.map(item => {
      let _title = _type[item.subtype]
      let _others = []

      _others.push(
        (item.menuNo ? item.menuNo + '(菜单参数)' : ''),
        (item.tableName ? item.tableName + '(表名) ' : ''),
        (item.innerFunc ? item.innerFunc + '(内部函数) ' : ''),
        (item.outerFunc ? item.outerFunc + '(外部函数)' : '')
      )
      _others = _others.filter(Boolean)
      _others = _others.join('、')

      if (item.label) {
        _title = _title + '(' + item.label + ')'
      }
      if (_others) {
        _title = _title + ': ' + _others
      }

      if (item.subfuncs && item.subfuncs.length > 0) {
        return (
          <TreeNode title={_title} key={item.uuid} dataRef={item} selectable={false}>
            {this.getTreeNode(item.subfuncs)}
          </TreeNode>
        )
      }
      return <TreeNode key={item.uuid} title={_title} isLeaf selectable={false} />
    })
  }

  controlCustomSetting = () => {
    this.setState({
      settingVisible: true,
      confirmLoading: false
    })
  }

  settingSubmit = () => {
    this.verifyRef.handleConfirm().then(res => {
      let _LongParam = ''

      try {
        _LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(res)))
      } catch (e) {
        notification.warning({
          top: 92,
          message: '编译错误',
          duration: 10
        })
        return
      }

      let param = {
        func: 'sPC_TrdMenu_UserParam',
        MenuID: this.props.MenuID,
        LongParam: _LongParam
      }

      this.setState({
        confirmLoading: true
      })

      Api.getSystemConfig(param).then(result => {
        this.setState({
          settingVisible: false,
          confirmLoading: false
        })
      })
    })
  }

  UNSAFE_componentWillMount () {
@@ -786,11 +932,11 @@
  }

  render() {
    const { view, setting, searchlist, actions, columns, loadingview, viewlost, setsingle, pickup, isLinkMain, config } = this.state
    const { view, setting, searchlist, actions, columns, loadingview, viewlost, pickup, config } = this.state

    return (
      <div>
        {view === 'commontable' ? <div className={'commontable ' + (isLinkMain ? 'pick-control' : '')} id={this.state.ContainerId}>
        {view === 'commontable' ? <div className="commontable pick-control" id={this.state.ContainerId}>
          {loadingview && <Spin size="large" />}
          {searchlist && searchlist.length > 0 ?
            <MainSearch
@@ -800,36 +946,36 @@
            /> : null
          }
          {actions && setting.onload !== 'false' ?
            <MainAction
              ref="mainButton"
              BID=""
              type="main"
              setting={setting}
              actions={actions}
              dict={this.state.dict}
              MenuID={this.props.MenuID}
              logcolumns={this.state.logcolumns}
              ContainerId={this.state.ContainerId}
              refreshdata={this.refreshbyaction}
              triggerPopview={this.triggerPopview}
              getexceloutparam={this.getexceloutparam}
              gettableselected={this.gettableselected}
            /> : null
            <div style={{minHeight: '45px'}}>
              <MainAction
                ref="mainButton"
                BID=""
                type="main"
                menuType="main"
                setting={setting}
                actions={actions}
                dict={this.state.dict}
                MenuID={this.props.MenuID}
                logcolumns={this.state.logcolumns}
                ContainerId={this.state.ContainerId}
                refreshdata={this.refreshbyaction}
                triggerPopview={this.triggerPopview}
                getexceloutparam={this.getexceloutparam}
                gettableselected={this.gettableselected}
              />
            </div> : null
          }
          {columns && setting.onload !== 'false' ?
            <div className="main-table-box">
              {isLinkMain ?
                <div className="pickchange">
                  {setting.tableType === 'checkbox' ? <Switch title="单选切换" checkedChildren="单" unCheckedChildren="多" defaultChecked={setsingle} onChange={this.checkChange} /> : null}
                  {this.state.BIDs.mainTable && (setting.tableType === 'radio' || setsingle) ? <Switch title="收起" checkedChildren="开" unCheckedChildren="关" defaultChecked={pickup} onChange={this.pickupChange} /> : null}
                </div> : null
              <Icon className="custom-control" type="setting" onClick={this.controlCustomSetting} />
              {this.state.data && this.state.data.length > 0 ?
                <Switch title="收起" className="main-pickup" checkedChildren="开" unCheckedChildren="关" defaultChecked={pickup} onChange={this.pickupChange} /> : null
              }
              <MainTable
                ref="mainTable"
                pickup={pickup}
                setting={setting}
                columns={columns}
                setsingle={setsingle}
                dict={this.state.dict}
                data={this.state.data}
                total={this.state.total}
@@ -858,6 +1004,7 @@
                        {_tab.type === 'SubTable' ?
                          <SubTable
                            Tab={_tab}
                            menuType="main"
                            MenuID={_tab.linkTab}
                            SupMenuID={this.props.MenuID}
                            refreshtabs={this.state.refreshtabs}
@@ -878,7 +1025,7 @@
            icon="copy"
            shape="circle"
            className="common-table-copy"
            onClick={this.copyMenuNo}
            onClick={this.handleviewconfig}
          />
          <Modal
            className="popview-modal"
@@ -894,6 +1041,7 @@
          >
            {<SubTabTable 
              BID={''}
              menuType="main"
              SupMenuID={this.props.MenuID}
              MenuID={this.state.popAction.linkTab}
              BData={this.state.BIDs['mainTabledata'] || ''}
@@ -902,6 +1050,45 @@
              refreshSupView={this.reloadtable}
            />}
          </Modal>
          <Modal
            className="menu-tree-modal"
            title={'菜单结构树'}
            width={'650px'}
            maskClosable={false}
            visible={this.state.treevisible}
            onCancel={() => this.setState({treevisible: false})}
            footer={[
              <Button key="close" onClick={() => this.setState({treevisible: false})}>{this.state.dict['main.close']}</Button>
            ]}
            destroyOnClose
          >
            <div className="menu-header">
              <span>菜单名称：{this.props.MenuName}</span>
              <span>菜单参数：{<Paragraph copyable>{this.props.MenuNo}</Paragraph>}</span>
            </div>
            {this.state.treevisible ? <Tree defaultExpandAll showLine={true}>
              {this.getTreeNode(config.funcs)}
            </Tree> : null}
          </Modal>
          {/* 按钮使用系统存储过程时，验证信息模态框 */}
          <Modal
            wrapClassName="common-table-custom-modal"
            title={'自定义设置'}
            maskClosable={false}
            width={850}
            visible={this.state.settingVisible}
            onOk={this.settingSubmit}
            onCancel={() => { this.setState({ settingVisible: false }) }}
            confirmLoading={this.state.confirmLoading}
            destroyOnClose
          >
            {this.state.config ?
              <VerifyCard
                config={this.state.config}
                wrappedComponentRef={(inst) => this.verifyRef = inst}
              /> : null
            }
          </Modal>
          {viewlost ? <NotFount msg={this.state.lostmsg} /> : null}
        </div> : null}
        {view === 'formtab' ? <FormTab MenuID={this.state.tabBtn.uuid} param={this.state.tabParam} refresh={this.refreshbyformtab}/> : null}