2020-02-25

king

2020-02-25 0c86e5e2eaf907dfcb63aea13e6efac3ccc52cce

2020-02-25

 src/components/header/index.jsx

@@ -4,7 +4,7 @@
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import moment from 'moment'
import {Dropdown, Menu, Icon, Modal, Form, notification, Switch } from 'antd'
import {Dropdown, Menu, Icon, Modal, Form, notification, Switch, Button } from 'antd'
import asyncComponent from '@/utils/asyncComponent'
import {
  toggleCollapse,
@@ -320,6 +320,26 @@
    // 进入编辑状态
    this.props.resetEditLevel('level1')
  }

  enterEditManage = () => {
    const { editLevel } = this.props

    if (editLevel === 'level4')  return

    this.props.resetEditLevel('level4')
    this.props.modifyMainMenu({
      MenuID: 'systemManageView'
    })
  }

  /**
   * @description 退出管理界面菜单
   */
  exitManage = () => {
    this.props.resetEditState(true)
    this.props.resetEditLevel(false)
    this.reload()
  }
  
  exitEdit = () => {
    // 退出编辑状态
@@ -378,7 +398,7 @@
        </div>
        {/* 正常菜单 */}
        {this.props.editLevel !== 'level1' && this.state.menulist &&
        <ul className="header-menu">{
        <ul className={'header-menu ' + this.props.editLevel}>{
          this.state.menulist.map(item => {
            return (
              <li key={item.MenuID} onClick={() => {this.changeMenu(item)}} className={this.props.selectmenu.MenuID === item.MenuID ? 'active' : ''}>
@@ -386,7 +406,13 @@
              </li>
            )
          })}
          {this.props.editState && (!this.props.editLevel || this.props.editLevel === 'level4') ?
            <li key="HS" onClick={this.enterEditManage} className={this.props.editLevel === 'level4' ? 'active' : ''}>
              <span>HS</span>
            </li> : null
          }
        </ul>}
        {this.props.editLevel === 'level4' ? <Button className="level4-close" type="primary" onClick={this.exitManage}>退出</Button> : null}
        {/* 进入编辑按钮 */}
        {this.props.editState && !this.props.editLevel && <Icon onClick={this.enterEdit} className="edit-check" type="edit" />}
        {/* 编辑菜单 */}

 src/components/header/index.scss

@@ -74,6 +74,26 @@
      }
    }
  }

  .header-menu.level4 {
    li {
      cursor: default;
      &:hover {
        span {
          cursor: default;
          color: rgba(255, 255, 255, 0.65);
          border-bottom: none;
        }
      }
      &.active {
        span {
          color: #ffffff;
          border-bottom: 4px solid #1890ff;
        }
      }
    }
  }

  .header-setting {
    float: right;
    line-height: 48px;
@@ -103,6 +123,13 @@
    margin-left: 10px;
    cursor: pointer;
  }
  .level4-close {
    position: relative;
    top: 13px;
    left: 20px;
    height: 26px;
    padding: 0 10px;
  }
}
.header-dropdown {
  li {

 src/components/sidemenu/index.jsx

@@ -8,6 +8,7 @@
import {modifyTabview, resetEditLevel} from '@/store/action'
import zhCN from '@/locales/zh-CN/header.js'
import enUS from '@/locales/en-US/header.js'
import Utils from '@/utils/utils.js'
import Api from '@/api'
import './index.scss'

@@ -167,8 +168,30 @@
    }
  }

  enterManageView = () => {
    let menulist = [{
      MenuID: Utils.getuuid(),
      text: '配置',
      PageParam: {Icon: 'folder'},
      children: [{
        src: '',
        PageParam: {OpenType: 'newtab', Template: 'ManageTable'},
        type: 'ManageTable',
        MenuID: '1581067625930haged11ieaivpavv77k',
        MenuNo: 'sDatasM',
        MenuName: '数据字典',
        text: '数据字典'
      }]
    }]
    this.setState({
      subMenulist: menulist,
      rootSubmenuKeys: menulist.map(item => item.MenuID),
      openKeys: this.props.collapse ? [] : [menulist[0].MenuID]
    })
  }

  changemenu(e) {
    if (this.props.editState) {
    if (this.props.editState && this.props.editLevel !== 'level4') {
      e.preventDefault()
      return
    }
@@ -194,7 +217,9 @@
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (!is(fromJS(this.props.mainMenu), fromJS(nextProps.mainMenu))) {
    if (nextProps.mainMenu && nextProps.mainMenu.MenuID === 'systemManageView') {
      this.enterManageView()
    } else if (!is(fromJS(this.props.mainMenu), fromJS(nextProps.mainMenu))) {
      // 主菜单切换，请求2、3级菜单数据
      this.loadsubmenu(nextProps.mainMenu)
    } else if (nextProps.collapse && this.props.collapse !== nextProps.collapse) {

 src/components/tabview/index.jsx

@@ -80,6 +80,8 @@
      return (<Comps.Home MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>)
    } else if (view.type === 'CommonTable') {
      return (<Comps.CommonTable MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>)
    } else if (view.type === 'ManageTable') {
      return (<Comps.CommonTable MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>)
    } else if (view.type === 'DataManage') {
      return (<Comps.DataManage MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>)
    } else if (view.type === 'RolePermission') {
@@ -159,6 +161,8 @@
          Comps.Home = asyncComponent(() => import('@/tabviews/home'))
        } else if (!Comps.CommonTable && newtab.type === 'CommonTable') {
          Comps.CommonTable = asyncComponent(() => import('@/tabviews/commontable'))
        } else if (!Comps.CommonTable && newtab.type === 'ManageTable') {
          Comps.CommonTable = asyncComponent(() => import('@/tabviews/managetable'))
        } else if (!Comps.Iframe && newtab.type === 'iframe') {
          Comps.Iframe = asyncComponent(() => import('@/tabviews/iframe'))
        } else if (!Comps.DataManage && newtab.type === 'DataManage') {
@@ -215,7 +219,7 @@
                      key={view.MenuID}
                    >
                      {this.selectcomponent(view)}
                      {view.type !== 'CommonTable' ?
                      {view.type !== 'CommonTable' && view.type !== 'ManageTable' ?
                        <Button
                          icon="copy"
                          shape="circle"

 src/tabviews/managesubtable/index.jsx

New file
@@ -0,0 +1,696 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { notification, Spin, Modal, Button} from 'antd'
import moment from 'moment'
import Api from '@/api'
import SubTable from '@/tabviews/subtable/subTable'
import SubAction from '@/tabviews/tableshare/actionList'
import SubSearch from '@/tabviews/tableshare/topSearch'
import asyncComponent from '@/utils/asyncLoadComponent'
import NotFount from '@/components/404'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
import Utils from '@/utils/utils.js'
import './index.scss'

const SubTabTable = asyncComponent(() => import('@/tabviews/subtabtable'))

class SubTabViewTable extends Component {
  static propTpyes = {
    Tab: PropTypes.object,           // 标签信息
    BID: PropTypes.string,           // 上级数据ID
    BData: PropTypes.any,            // 上级数据
    MenuID: PropTypes.string,        // 菜单Id
    SupMenuID: PropTypes.string,     // 上级菜单Id
    ContainerId: PropTypes.any,      // 三级菜单Container(html) ID
    handleTableId: PropTypes.func,   // 控制表格数据切换时，更新在主表中的id
    handleMainTable: PropTypes.func, // 刷新主表
    refreshtabs:PropTypes.any
  }

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    loadingview: true,    // 页面加载中
    viewlost: false,      // 页面丢失：1、未获取到配置-页面丢失；2、页面未启用
    lostmsg: '',          // 页面丢失时的提示信息
    config: null,         // 页面配置信息，包括按钮、搜索、显示列、标签等
    searchlist: null,     // 搜索条件
    actions: null,        // 按钮集
    columns: null,        // 显示列
    logcolumns: null,     // 日志中显示的列信息 (增加至全部列，除去合并列)
    arr_field: '',        // 使用 sPC_Get_TableData 时的查询字段集
    setting: null,        // 页面全局设置：数据源、按钮及显示列固定、主键等
    data: null,           // 列表数据集
    total: 0,             // 总数
    loading: false,       // 列表数据加载中
    pageIndex: 1,         // 页码
    pageSize: 10,         // 每页数据条数
    orderBy: '',          // 排序
    search: '',           // 搜索条件数组，使用时需分场景处理
    configMap: {},        // 页面配置信息：下拉、按钮等
    popAction: false,     // 弹框页面，按钮信息
    popData: false,       // 弹框页面，所选的表格数据
    visible: false        // 弹框显示隐藏控制
  }

  /**
   * @description 上级菜单id变化时，刷新数据
   */
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.state.config && this.props.Tab.supMenu && !is(fromJS(this.props.BID), fromJS(nextProps.BID))) {
      this.refs.subTable.resetTable()
      this.loadmaindata(nextProps.BID, 'refresh')
    } else if (this.state.config && nextProps.refreshtabs && nextProps.refreshtabs.includes(this.props.Tab.uuid)) {
      this.reloadtable()
    }
  }

  /**
   * @description 获取页面配置信息
   */
  async loadconfig () {
    const { Tab, BID } = this.props

    let param = {
      func: 'sPC_Get_LongParam',
      MenuID: this.props.MenuID
    }
    let result = await Api.getSystemCacheConfig(param)
    if (result.status) {
      let config = ''

      try { // 配置信息解析
        config = window.decodeURIComponent(window.atob(result.LongParam))
        config = JSON.parse(config)
      } catch (e) {
        config = ''
      }

      // 页面配置解析错误时提示
      if (!config) {
        this.setState({
          loadingview: false,
          viewlost: true
        })
        return
      }

      // 页面未启用时，显示未启用页面
      if (!config.enabled) {
        this.setState({
          loadingview: false,
          viewlost: true,
          lostmsg: this.state.dict['main.view.unenabled']
        })
        return
      }

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

      // 权限过滤
      // config.action = config.action.filter(item => permAction[item.uuid])

      // 1、筛选字段集，2、过滤隐藏列及合并列中的字段uuid
      config.columns.forEach(col => {
        if (col.field) {
          _arrField.push(col.field)

          _logcolumns.push(col)
        }
        if (col.type === 'colspan' && col.sublist) { // 筛选隐藏列
          _hideCol = _hideCol.concat(col.sublist)
        } else if (col.Hide === 'true') {
          _hideCol.push(col.uuid)
        }
        colMap.set(col.uuid, col)
      })

      // 生成显示列，处理合并列中的字段
      config.columns.forEach(col => {
        if (_hideCol.includes(col.uuid)) return

        if (col.type === 'colspan' && col.sublist) {
          let _col = JSON.parse(JSON.stringify(col))
          let subColumn = []
          _col.sublist.forEach(sub => {
            if (colMap.has(sub)) {
              subColumn.push(colMap.get(sub))
            }
          })
          _col.subColumn = subColumn
          _columns.push(_col)
        } else {
          _columns.push(col)
        }
      })

      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
        })
      }

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

        if (config.setting.onload !== 'false' && (!Tab.supMenu || BID)) { // 初始化可加载
          this.setState({
            loading: true
          })
          this.loadmaindata()
        }
      })
    } else {
      this.setState({
        loadingview: false,
        viewlost: true
      })
      notification.warning({
        top: 92,
        message: result.message,
        duration: 10
      })
    }
  }

  /**
   * @description 搜索条件下拉选项预加载
   */
  improveSearch = () => {
    let searchlist = JSON.parse(JSON.stringify(this.state.searchlist))
    let deffers = []
    searchlist.forEach(item => {
      if (item.type !== 'multiselect' && item.type !== 'select' && item.type !== 'link') return
      if (item.setAll === 'true') {
        item.options.unshift({
          key: Utils.getuuid(),
          Value: '',
          Text: this.state.dict['main.all']
        })
      }

      if (item.resourceType === '1' && item.dataSource) {
        let _option = Utils.getSelectQueryOptions(item)
        let _sql = Utils.formatOptions(_option.sql)
        let isSSO = item.database === 'sso'

        let param = {
          func: 'sPC_Get_SelectedList',
          LText: _sql,
          obj_name: 'data',
          arr_field: _option.field
        }

        param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
        param.secretkey = Utils.encrypt(param.LText, param.timestamp)

        let defer = new Promise(resolve => {
          Api.getSystemCacheConfig(param, isSSO).then(res => {
            res.search = item
            resolve(res)
          })
        })
        deffers.push(defer)
      } else if (item.resourceType === '1' && !item.dataSource) {
        notification.warning({
          top: 92,
          message: item.label + ': ' + this.state.dict['main.datasource.settingerror'],
          duration: 10
        })
      }
    })

    if (deffers.length === 0) {
      this.setState({searchlist: JSON.parse(JSON.stringify(searchlist))})
      return
    }

    Promise.all(deffers).then(result => {
      result.forEach(res => {
        if (res.status) {
          searchlist = searchlist.map(item => {
            if (item.uuid === res.search.uuid) {
              res.data.forEach(cell => {
                let _item = {
                  key: Utils.getuuid(),
                  Value: cell[res.search.valueField],
                  Text: cell[res.search.valueText]
                }

                if (res.search.type === 'link') {
                  _item.parentId = cell[res.search.linkField]
                }
                
                item.options.push(_item)
              })
            }
            return item
          })
        } else {
          notification.warning({
            top: 92,
            message: res.search.label + ':' + res.message,
            duration: 10
          })
        }
      })
      this.setState({searchlist})
    })
  }

  /**
   * @description 子表数据加载
   */
  async loadmaindata (bid, type) {
    const { setting } = this.state
    let param = ''
    let _BID = this.props.BID
    
    if (type === 'refresh') {
      _BID = bid
      if (!bid) { // 主表ID不存在时，不查询子表
        this.setState({
          data: [],
          total: 0,
          loading: false
        })

        return
      }
    }

    if (setting.interType !== 'inner' || (setting.interType === 'inner' && setting.innerFunc)) {
      param = this.getCustomParam(_BID)
    } else {
      param = this.getDefaultParam(_BID)
    }

    this.handleTableId()

    let result = await Api.genericInterface(param)
    if (result.status) {
      this.setState({
        data: result.data.map((item, index) => {
          item.key = index
          return item
        }),
        total: result.total,
        loading: false
      })
    } else {
      this.setState({
        loading: false
      })
      notification.error({
        top: 92,
        message: result.message,
        duration: 15
      })
    }
  }

  /**
   * @description 获取用户自定义存储过程传参
   */
  getCustomParam = (BID) => {
    const { pageIndex, pageSize, orderBy, search, setting } = this.state

    let _search = Utils.formatCustomMainSearch(search)

    let param = {
      PageIndex: pageIndex,
      PageSize: pageSize,
      OrderCol: orderBy || setting.order,
      BID: BID,
      ..._search
    }

    if (setting.interType === 'inner') {
      param.func = setting.innerFunc
    } else {
      if (setting.sysInterface === 'true') {
        param.rduri = window.GLOB.mainSystemApi || window.GLOB.subSystemApi
      } else {
        param.rduri = setting.interface
      }

      param.appkey = window.GLOB.appkey || '' // 调用外部接口增加appkey

      if (setting.outerFunc) {
        param.func = setting.outerFunc
      }
    }

    return param
  }

  /**
   * @description 获取系统存储过程 sPC_Get_TableData 的参数
   */
  getDefaultParam = (BID) => {
    const { arr_field, pageIndex, pageSize, orderBy, search, setting } = this.state

    let _search = Utils.joinMainSearchkey(search)
    _search = _search ? 'where ' + _search : ''

    let param = {
      func: 'sPC_Get_TableData',
      obj_name: 'data',
      arr_field: arr_field,
      BID: BID,
      appkey: window.GLOB.appkey || ''
    }

    let _orderBy = orderBy || setting.order
    let _dataresource = setting.dataresource

    if (/\s/.test(_dataresource)) {
      _dataresource = '(' + _dataresource + ') tb'
    }

    if (setting.queryType === 'statistics') { // 统计数据源，内容替换
      let fieldmap = new Map()
      let options = search.map(item => {
        let _field = item.key

        if (fieldmap.has(_field)) {
          _field = _field + '1'
        }

        fieldmap.set(item.key, true)

        return {
          reg: new RegExp('@' + _field, 'ig'),
          value: item.value
        }
      })

      options.reverse()

      options.forEach(item => {
        _dataresource = _dataresource.replace(item.reg, `'${item.value}'`)
      })

      _search = ''
    }

    let LText = `select top ${pageSize} ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${_orderBy}) as rows from ${_dataresource} ${_search}) tmptable where rows > ${pageSize * (pageIndex - 1)} order by tmptable.rows`
    let DateCount = `select count(1) as total from ${_dataresource} ${_search}`

    param.LText = Utils.formatOptions(LText)
    param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
    param.secretkey = Utils.encrypt(param.LText, param.timestamp)
    param.DateCount = Utils.formatOptions(DateCount)

    return param
  }

  /**
   * @description 搜索条件改变时，重置表格数据
   * 含有初始不加载的页面，修改设置
   */
  refreshbysearch = (searches) => {
    this.refs.subTable.resetTable()

    this.setState({
      loading: true,
      pageIndex: 1,
      search: searches
    }, () => {
      this.loadmaindata()
    })
  }

  /**
   * @description 表格条件改变时重置数据（分页或排序）
   */
  refreshbytable = (pagination, filters, sorter) => {
    if (sorter.order) {
      let _chg = {
        ascend: 'asc',
        descend: 'desc'
      }
      sorter.order = _chg[sorter.order]
    }

    this.setState({
      loading: true,
      pageIndex: pagination.current,
      pageSize: pagination.pageSize,
      orderBy: (sorter.field && sorter.order) ? `${sorter.field} ${sorter.order}` : ''
    }, () => {
      this.loadmaindata()
    })
  }

  /**
   * @description 表格刷新
   */
  reloadtable = () => {
    this.refs.subTable.resetTable()
    this.setState({
      loading: true,
      pageIndex: 1
    }, () => {
      this.loadmaindata()
    })
  }

  /**
   * @description 页面刷新，重新获取配置
   */
  reloadview = () => {
    this.setState({
      loadingview: true,
      viewlost: false,
      lostmsg: '',
      config: null,
      searchlist: null,
      actions: null,
      columns: null,
      arr_field: '',
      setting: null,
      data: null,
      total: 0,
      loading: false,
      pageIndex: 1,
      pageSize: 10,
      orderBy: '',
      search: '',
      configMap: {}
    }, () => {
      this.loadconfig()
    })
  }

  /**
   * @description 按钮操作完成后（成功或失败），页面刷新，重置页码及选择项
   */
  refreshbyaction = (btn, type) => {
    if (btn.execSuccess === 'grid' && type === 'success') {
      this.reloadtable()
    } else if (btn.execError === 'grid' && type === 'error') {
      this.reloadtable()
    } else if (btn.execSuccess === 'view' && type === 'success') {
      this.reloadview()
    } else if (btn.execError === 'view' && type === 'error') {
      this.reloadview()
    } else if (btn.popClose === 'grid' && type === 'pop') {
      this.reloadtable()
    } else if (btn.popClose === 'view' && type === 'pop') {
      this.reloadview()
    } else if (btn.popClose === 'maingrid' && type === 'pop') {
      this.props.handleMainTable('maingrid')
    } else if (btn.popClose === 'equaltab' && type === 'pop') {
      this.reloadtable()
      this.props.handleMainTable('equaltab')
    } else if (btn.execSuccess === 'maingrid' && type === 'success') {
      this.props.handleMainTable('maingrid')
    } else if (btn.execSuccess === 'equaltab' && type === 'success') {
      this.reloadtable()
      this.props.handleMainTable('equaltab')
    }
  }

  /**
   * @description 导出Excel时，获取页面搜索排序等参数
   */
  getexceloutparam = () => {
    const { Tab } = this.props
    const { arr_field, orderBy, search, setting} = this.state

    return {
      arr_field: arr_field,
      orderBy: orderBy || setting.order,
      search: search,
      menuName: Tab.label
    }
  }

  /**
   * @description 获取表格选择项
   */
  gettableselected = () => {
    let data = []
    this.refs.subTable.state.selectedRowKeys.forEach(item => {
      data.push(this.refs.subTable.props.data[item])
    })
    return data
  }

  /**
   * @description 表格中，按钮触发事件传递
   */
  buttonTrigger = (btn, record) => {
    this.refs.subButton.actionTrigger(btn, record)
  }

  /**
   * @description 表格Id变化
   */
  handleTableId = (id = '', data = '') => {
    this.props.handleTableId(this.props.Tab.uuid, id, data)
  }

  /**
   * @description 触发按钮弹窗（标签页）
   */
  triggerPopview = (btn, data) => {
    this.setState({
      popAction: btn,
      popData: data[0] ? data[0] : null,
      visible: true
    })
  }

  popclose = () => {
    this.setState({
      visible: false
    })
    this.refreshbyaction(this.state.popAction, 'pop')
  }

  UNSAFE_componentWillMount () {
    // 组件加载时，获取菜单数据
    this.loadconfig()
  }

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

  /**
   * @description 组件销毁，清除state更新
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
  }

  render() {
    const { setting, searchlist, actions, columns, loadingview, viewlost } = this.state

    return (
      <div className="subtable" id={'subtable' + this.props.MenuID}>
        {loadingview && <Spin size="large" />}
        {searchlist && searchlist.length > 0 ?
          <SubSearch
            refreshdata={this.refreshbysearch}
            searchlist={searchlist}
            dict={this.state.dict}
          /> : null
        }
        {actions &&
          <SubAction
            ref="subButton"
            type="sub"
            setting={setting}
            actions={actions}
            Tab={this.props.Tab}
            BID={this.props.BID}
            BData={this.props.BData}
            dict={this.state.dict}
            MenuID={this.props.SupMenuID}
            logcolumns={this.state.logcolumns}
            ContainerId={this.props.ContainerId}
            refreshdata={this.refreshbyaction}
            triggerPopview={this.triggerPopview}
            getexceloutparam={this.getexceloutparam}
            gettableselected={this.gettableselected}
          />
        }
        {columns &&
          <SubTable
            ref="subTable"
            dict={this.state.dict}
            MenuID={this.props.MenuID}
            setting={setting}
            columns={columns}
            data={this.state.data}
            total={this.state.total}
            loading={this.state.loading}
            refreshdata={this.refreshbytable}
            buttonTrigger={this.buttonTrigger}
            handleTableId={this.handleTableId}
          />
        }
        <Modal
          className="popview-modal"
          title={this.state.popAction.label}
          width={'80vw'}
          maskClosable={false}
          visible={this.state.visible}
          onCancel={this.popclose}
          footer={[
            <Button key="close" onClick={this.popclose}>{this.state.dict['main.close']}</Button>
          ]}
          destroyOnClose
        >
          {<SubTabTable
            BID={this.props.BID}
            BData={this.props.BData}
            SupMenuID={this.props.MenuID}
            ContainerId={this.props.ContainerId}
            MenuID={this.state.popAction.linkTab}
            ID={this.state.popData ? this.state.popData[setting.primaryKey] : ''}
            refreshSupView={this.reloadtable}
          />}
        </Modal>
        {viewlost ? <NotFount msg={this.state.lostmsg} /> : null}
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    permAction: state.permAction
  }
}

const mapDispatchToProps = () => {
  return {}
}

export default connect(mapStateToProps, mapDispatchToProps)(SubTabViewTable)

 src/tabviews/managesubtable/index.scss

New file
@@ -0,0 +1,37 @@
.subtable {
  position: relative;
  min-height: 200px;
  padding-top: 16px;
  > .top-search {
    padding: 0 0px 20px;
  }
  > .button-list {
    padding: 10px 0px 5px;
  }
  .box404 {
    padding-top: 30px;
  }
  .ant-modal-mask {
    position: absolute;
  }
  .ant-modal-wrap {
    position: absolute;
  }
  .action-modal .ant-modal {
    top: 40px;
    max-width: 95%;
    .ant-modal-body {
      max-height: calc(100vh - 265px);
    }
  }
  > .ant-spin {
    position: absolute;
    left: calc(50% - 22px);
    top: 100px;
  }
}
.popview-modal {
  .ant-modal-body {
    min-height: 300px;
  }
}

 src/tabviews/managetable/index.jsx

New file
@@ -0,0 +1,1006 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
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 {refreshTabView, modifyTabview} from '@/store/action'

import MainTable from '@/tabviews/commontable/mainTable'
import MainAction from '@/tabviews/tableshare/actionList'
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 { TabPane } = Tabs
const { TreeNode } = Tree
const { Paragraph } = Typography

class NormalTable extends Component {
  static propTpyes = {
    MenuNo: PropTypes.string,    // 菜单参数
    MenuName: PropTypes.string,  // 菜单参数
    MenuID: PropTypes.string     // 菜单Id
  }

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    ContainerId: Utils.getuuid(), // 菜单外层html Id
    view: 'commontable',  // 当前页面默认为主表
    loadingview: true,    // 页面加载中
    viewlost: false,      // 页面丢失：1、未获取到配置-页面丢失；2、页面未启用
    lostmsg: '',          // 页面丢失时的提示信息
    config: {},           // 页面配置信息，包括按钮、搜索、显示列、标签等
    searchlist: null,     // 搜索条件
    actions: null,        // 按钮集
    columns: null,        // 显示列
    logcolumns: null,     // 日志中显示的列信息 (增加至全部列，除去合并列)
    arr_field: '',        // 使用 sPC_Get_TableData 时的查询字段集
    setting: null,        // 页面全局设置：数据源、按钮及显示列固定、主键等
    data: null,           // 列表数据集
    total: 0,             // 总数
    loading: false,       // 列表数据加载中
    pageIndex: 1,         // 页码
    pageSize: 10,         // 每页数据条数
    orderBy: '',          // 排序
    search: '',           // 搜索条件数组，使用时需分场景处理
    BIDs: {},             // 上级表id
    setsingle: false,     // 主表单选多选切换
    pickup: false,        // 主表数据隐藏显示切换
    isLinkMain: false,    // 是否存在与主表关联的子表
    popAction: false,     // 弹框页面，按钮信息
    popData: false,       // 弹框页面，所选的表格数据
    visible: false,       // 弹框显示隐藏控制
    treevisible: false,   // 菜单结构树弹框显示隐藏控制
    tabBtn: null,         // 表单标签按钮
    tabParam: null,       // 表单标签参数
    refreshtabs: null     // 需要刷新的标签集
  }

  /**
   * @description 获取页面配置信息
   */
  async loadconfig () {
    // const { permAction } = this.props

    let param = {
      func: 'sPC_Get_LongParam',
      MenuID: this.props.MenuID
    }
    let result = await Api.getSystemCacheConfig(param)
    if (result.status) {
      let config = ''

      try { // 配置信息解析
        config = window.decodeURIComponent(window.atob(result.LongParam))
        config = JSON.parse(config)
      } catch (e) {
        config = ''
      }

      // 页面配置解析错误时提示
      if (!config) {
        this.setState({
          loadingview: false,
          viewlost: true
        })
        return
      }

      // 页面未启用时，显示未启用页面
      if (!config.enabled) {
        this.setState({
          loadingview: false,
          viewlost: true,
          lostmsg: this.state.dict['main.view.unenabled']
        })
        return
      }

      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])
      // })


      // 1、筛选字段集，2、过滤隐藏列及合并列中的字段uuid
      config.columns.forEach(col => {
        if (col.field) {
          _arrField.push(col.field)

          _logcolumns.push(col)
        }
        if (col.type === 'colspan' && col.sublist) { // 筛选隐藏列
          _hideCol = _hideCol.concat(col.sublist)
        } else if (col.Hide === 'true') {
          _hideCol.push(col.uuid)
        }
        colMap.set(col.uuid, col)
      })

      // 生成显示列，处理合并列中的字段
      config.columns.forEach(col => {
        if (_hideCol.includes(col.uuid)) return

        if (col.type === 'colspan' && col.sublist) {
          let _col = JSON.parse(JSON.stringify(col))
          let subColumn = []
          _col.sublist.forEach(sub => {
            if (colMap.has(sub)) {
              subColumn.push(colMap.get(sub))
            }
          })
          _col.subColumn = subColumn
          _columns.push(_col)
        } else {
          _columns.push(col)
        }
      })

      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,
        setting: config.setting,
        searchlist: config.search,
        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()
        }
      })
    } else {
      this.setState({
        loadingview: false,
        viewlost: true
      })
      notification.warning({
        top: 92,
        message: result.message,
        duration: 10
      })
    }
  }

  /**
   * @description 搜索条件下拉选项预加载
   */
  improveSearch = () => {
    let searchlist = JSON.parse(JSON.stringify(this.state.searchlist))
    let deffers = []
    searchlist.forEach(item => {
      if (item.type !== 'multiselect' && item.type !== 'select' && item.type !== 'link') return
      if (item.setAll === 'true') {
        item.options.unshift({
          key: Utils.getuuid(),
          Value: '',
          Text: this.state.dict['main.all']
        })
      }

      if (item.resourceType === '1' && item.dataSource) {
        let _option = Utils.getSelectQueryOptions(item)
        let _sql = Utils.formatOptions(_option.sql)
        let isSSO = item.database === 'sso'

        let param = {
          func: 'sPC_Get_SelectedList',
          LText: _sql,
          obj_name: 'data',
          arr_field: _option.field
        }

        param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
        param.secretkey = Utils.encrypt(param.LText, param.timestamp)

        let defer = new Promise(resolve => {
          Api.getSystemCacheConfig(param, isSSO).then(res => {
            res.search = item
            resolve(res)
          })
        })
        deffers.push(defer)
      } else if (item.resourceType === '1' && !item.dataSource) {
        notification.warning({
          top: 92,
          message: item.label + ': ' + this.state.dict['main.datasource.settingerror'],
          duration: 10
        })
      }
    })

    if (deffers.length === 0) {
      this.setState({searchlist: JSON.parse(JSON.stringify(searchlist))})
      return
    }

    Promise.all(deffers).then(result => {
      result.forEach(res => {
        if (res.status) {
          searchlist = searchlist.map(item => {
            if (item.uuid === res.search.uuid) {
              res.data.forEach(cell => {
                let _item = {
                  key: Utils.getuuid(),
                  Value: cell[res.search.valueField],
                  Text: cell[res.search.valueText]
                }

                if (res.search.type === 'link') {
                  _item.parentId = cell[res.search.linkField]
                }

                item.options.push(_item)
              })
            }
            return item
          })
        } else {
          notification.warning({
            top: 92,
            message: res.search.label + ':' + res.message,
            duration: 10
          })
        }
      })

      this.setState({searchlist})
    })
  }

  /**
   * @description 主表数据加载
   */ 
  async loadmaindata () {
    const { setting, BIDs } = this.state
    let param = ''

    if (setting.interType !== 'inner' || (setting.interType === 'inner' && setting.innerFunc)) {
      param = this.getCustomParam()
    } else {
      param = this.getDefaultParam()
    }

    this.setState({
      pickup: false
    })

    this.handleTableId('mainTable', '', '')

    if (!param) { // 未获取参数时，不发请求
      return
    }

    let result = await Api.genericInterface(param)
    if (result.status) {
      this.setState({
        data: result.data.map((item, index) => {
          item.key = index
          return item
        }),
        total: result.total,
        loading: false,
        BIDs: {
          ...BIDs,
          mainTable: ''
        }
      })
    } else {
      this.setState({
        loading: false
      })
      notification.error({
        top: 92,
        message: result.message,
        duration: 15
      })
    }
  }

  /**
   * @description 获取用户自定义存储过程传参
   */
  getCustomParam = () => {
    const { pageIndex, pageSize, orderBy, search, setting } = this.state

    let _search = Utils.formatCustomMainSearch(search)

    let param = {
      PageIndex: pageIndex,
      PageSize: pageSize,
      OrderCol: orderBy || setting.order,
      ..._search
    }

    if (setting.interType === 'inner') {
      param.func = setting.innerFunc
    } else {
      if (setting.sysInterface === 'true') {
        param.rduri = window.GLOB.mainSystemApi || window.GLOB.subSystemApi
      } else {
        param.rduri = setting.interface
      }

      param.appkey = window.GLOB.appkey || '' // 调用外部接口增加appkey

      if (setting.outerFunc) {
        param.func = setting.outerFunc
      }
    }

    return param
  }

  /**
   * @description 获取系统存储过程 sPC_Get_TableData 的参数
   */
  getDefaultParam = () => {
    const { arr_field, pageIndex, pageSize, orderBy, search, setting } = this.state

    if (!arr_field) {
      notification.warning({
        top: 92,
        message: '未设置显示列！',
        duration: 10
      })
      return null
    }

    let _search = Utils.joinMainSearchkey(search)

    _search = _search ? 'where ' + _search : ''
    
    let param = {
      func: 'sPC_Get_TableData',
      obj_name: 'data',
      arr_field: arr_field,
      appkey: window.GLOB.appkey || ''
    }
    
    let _orderBy = orderBy || setting.order
    let _dataresource = setting.dataresource

    if (/\s/.test(_dataresource)) {
      _dataresource = '(' + _dataresource + ') tb'
    }

    if (setting.queryType === 'statistics') { // 统计数据源，内容替换
      let fieldmap = new Map()
      let options = search.map(item => {
        let _field = item.key

        if (fieldmap.has(_field)) {
          _field = _field + '1'
        }

        fieldmap.set(item.key, true)

        return {
          reg: new RegExp('@' + _field, 'ig'),
          value: item.value
        }
      })

      options.reverse()

      options.forEach(item => {
        _dataresource = _dataresource.replace(item.reg, `'${item.value}'`)
      })

      _search = ''
    }

    let LText = `select top ${pageSize} ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${_orderBy}) as rows from ${_dataresource} ${_search}) tmptable where rows > ${pageSize * (pageIndex - 1)} order by tmptable.rows`
    let DateCount = `select count(1) as total from ${_dataresource} ${_search}`

    param.LText = Utils.formatOptions(LText)
    param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
    param.secretkey = Utils.encrypt(param.LText, param.timestamp)
    param.DateCount = Utils.formatOptions(DateCount)

    return param
  }

  /**
   * @description 搜索条件改变时，重置表格数据
   * 含有初始不加载的页面，修改设置
   */
  refreshbysearch = (searches) => {
    const { setting } = this.state

    if (setting.onload === 'false') {
      this.setState({
        loading: true,
        pageIndex: 1,
        search: searches,
        setting: {...setting, onload: 'true'}
      }, () => {
        this.loadmaindata()
      })
    } else {
      this.refs.mainTable.resetTable()

      this.setState({
        loading: true,
        pageIndex: 1,
        search: searches
      }, () => {
        this.loadmaindata()
      })
    }
  }

  /**
   * @description 表格条件改变时重置数据（分页或排序）
   */
  refreshbytable = (pagination, filters, sorter) => {
    if (sorter.order) {
      let _chg = {
        ascend: 'asc',
        descend: 'desc'
      }
      sorter.order = _chg[sorter.order]
    }

    this.setState({
      loading: true,
      pageIndex: pagination.current,
      pageSize: pagination.pageSize,
      orderBy: (sorter.field && sorter.order) ? `${sorter.field} ${sorter.order}` : ''
    }, () => {
      this.loadmaindata()
    })
  }

  /**
   * @description 表格刷新
   */
  reloadtable = () => {
    this.refs.mainTable.resetTable()
    this.setState({
      loading: true,
      pageIndex: 1
    }, () => {
      this.loadmaindata()
    })
  }

  /**
   * @description 页面刷新，重新获取配置
   */
  reloadview = () => {
    this.setState({
      view: 'commontable',
      loadingview: true,
      viewlost: false,
      lostmsg: '',
      config: {},
      searchlist: null,
      actions: null,
      columns: null,
      arr_field: '',
      setting: null,
      data: null,
      total: 0,
      loading: false,
      pageIndex: 1,
      pageSize: 10,
      orderBy: '',
      search: '',
      BIDs: {},
      setsingle: false,
      pickup: false,
      isLinkMain: false
    }, () => {
      this.loadconfig()
    })
  }

  /**
   * @description 按钮操作完成后（成功或失败），页面刷新，重置页码及选择项
   */
  refreshbyaction = (btn, type) => {
    if (btn.execSuccess === 'grid' && type === 'success') {
      this.reloadtable()
    } else if (btn.execError === 'grid' && type === 'error') {
      this.reloadtable()
    } else if (btn.execSuccess === 'view' && type === 'success') {
      this.reloadview()
    } else if (btn.execError === 'view' && type === 'error') {
      this.reloadview()
    } else if (btn.popClose === 'view' && type === 'pop') {
      this.reloadview()
    } else if (btn.popClose === 'grid' && type === 'pop') {
      this.reloadtable()
    }
  }

  /**
   * @description 表单操作完成后刷新主页面
   */
  refreshbyformtab = (type) => {
    this.setState({
      view: 'commontable',
      tabBtn: null,
      tabParam: null
    }, () => {
      if (type === 'grid') {
        this.reloadtable()
      } else if (type === 'view') {
        this.reloadview()
      }
    })
  }

  /**
   * @description 子表操作完成后刷新主表
   */
  handleMainTable = (type, tab) => {
    if (type === 'maingrid' && tab.supMenu === 'mainTable') {
      this.reloadtable()
    } else if (type === 'maingrid' && tab.supMenu) {
      this.setState({
        refreshtabs: [tab.supMenu]
      }, () => {
        this.setState({
          refreshtabs: null
        })
      })
    } else if (type === 'equaltab' && tab.equalTab && tab.equalTab.length > 0) {
      this.setState({
        refreshtabs: tab.equalTab
      }, () => {
        this.setState({
          refreshtabs: null
        })
      })
    }
  }

  /**
   * @description 导出Excel时，获取页面搜索排序等参数
   */
  getexceloutparam = () => {
    const { MenuName } = this.props
    const { arr_field, orderBy, search, setting} = this.state

    return {
      arr_field: arr_field,
      orderBy: orderBy || setting.order,
      search: search,
      menuName: MenuName
    }
  }

  /**
   * @description 获取表格选择项
   */
  gettableselected = () => {
    let data = []
    this.refs.mainTable.state.selectedRowKeys.forEach(item => {
      data.push(this.refs.mainTable.props.data[item])
    })
    return data
  }

  /**
   * @description 表格中，按钮触发事件传递
   */
  buttonTrigger = (btn, record) => {
    this.refs.mainButton.actionTrigger(btn, record)
  }

  /**
   * @description 表格Id变化
   */
  handleTableId = (type, id, data) => {
    const { BIDs } = this.state

    this.setState({
      BIDs: {
        ...BIDs,
        [type]: id,
        [type + 'data']: data
      }
    })
  }

  /**
   * @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 数据展开合并切换
   */
  pickupChange = () => {
    const { pickup } = this.state
    this.setState({
      pickup: !pickup
    })
  }

  /**
   * @description 触发按钮弹窗（标签页）
   */
  triggerPopview = (btn, data) => {
    const { setting } = this.state

    let _primaryId = ''

    if (data && data[0] && setting.primaryKey) {
      _primaryId = data[0][setting.primaryKey] || ''
    }

    if (btn.OpenType === 'popview') {
      this.setState({
        popAction: btn,
        popData: data[0] || null,
        visible: true
      })
    } else if (btn.OpenType === 'tab') {
      const { tabviews, MenuNo, MenuID } = this.props
      let newtab = {
        MenuNo: MenuNo,
        MenuID: btn.uuid,
        MenuName: btn.label,
        type: btn.tabTemplate,
        selected: true,
        param: {
          parentId: this.props.MenuID,
          btn: btn,
          data: data[0] || null,
          primaryId: btn.Ot !== 'notRequired' ? _primaryId : '',
          arr_field: this.state.arr_field
        }
      }

      let index = 0
      let isexit = false
      let tabs = tabviews.map((tab, i) => {
        tab.selected = false

        if (tab.MenuID === MenuID) {
          index = i
        } else if (tab.MenuID === btn.uuid) {
          tab.selected = true
          isexit = true
        }

        return tab
      })

      if (!isexit) {
        tabs.splice(index + 1, 0, newtab)
      }

      this.props.modifyTabview(tabs)
    } else if (btn.OpenType === 'blank') {
      this.setState({
        view: 'formtab',
        tabBtn: btn,
        tabParam: {
          btn: btn,
          data: data[0] || null,
          primaryId: btn.Ot !== 'notRequired' ? _primaryId : '',
          arr_field: this.state.arr_field
        }
      })
    }
  }

  popclose = () => {
    this.setState({
      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} />
    })
  }

  UNSAFE_componentWillMount () {
    // 组件加载时，获取菜单数据
    this.loadconfig()
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.refreshTab && nextProps.refreshTab.MenuID === this.props.MenuID) {
      if (nextProps.refreshTab.position === 'grid') {
        this.reloadtable()
      } else if (nextProps.refreshTab.position === 'view') {
        this.reloadview()
      }
      this.props.refreshTabView('')
    }
  }

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

  /**
   * @description 组件销毁，清除state更新
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
  }

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

    return (
      <div>
        {view === 'commontable' ? <div className={'commontable ' + (isLinkMain ? 'pick-control' : '')} id={this.state.ContainerId}>
          {loadingview && <Spin size="large" />}
          {searchlist && searchlist.length > 0 ?
            <MainSearch
              dict={this.state.dict}
              searchlist={searchlist}
              refreshdata={this.refreshbysearch}
            /> : 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
          }
          {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
              }
              <MainTable
                ref="mainTable"
                pickup={pickup}
                setting={setting}
                columns={columns}
                setsingle={setsingle}
                dict={this.state.dict}
                data={this.state.data}
                total={this.state.total}
                MenuID={this.props.MenuID}
                loading={this.state.loading}
                refreshdata={this.refreshbytable}
                buttonTrigger={this.buttonTrigger}
                handleTableId={this.handleTableId}
              />
            </div> : null
          }
          {setting && setting.onload !== 'false' &&
            config.tabgroups.map(group => {
              if (config[group].length === 0) return null

              return (
                <Tabs defaultActiveKey="0" key={group}>
                  {config[group].map((_tab, index) => {
                    return (
                      <TabPane tab={
                        <span>
                          {_tab.icon ? <Icon type={_tab.icon} /> : null}
                          {_tab.label}
                        </span>
                      } key={`${index}`}>
                        {_tab.type === 'SubTable' ?
                          <SubTable
                            Tab={_tab}
                            MenuID={_tab.linkTab}
                            SupMenuID={this.props.MenuID}
                            refreshtabs={this.state.refreshtabs}
                            ContainerId={this.state.ContainerId}
                            BID={this.state.BIDs[_tab.supMenu] || ''}
                            BData={this.state.BIDs[_tab.supMenu + 'data'] || ''}
                            handleTableId={this.handleTableId}
                            handleMainTable={(type) => this.handleMainTable(type, _tab)}
                          /> : null}
                      </TabPane>
                    )
                  })}
                </Tabs>
              )
            })
          }
          <Button
            icon="copy"
            shape="circle"
            className="common-table-copy"
            onClick={this.handleviewconfig}
          />
          <Modal
            className="popview-modal"
            title={this.state.popAction.label}
            width={'80vw'}
            maskClosable={false}
            visible={this.state.visible}
            onCancel={this.popclose}
            footer={[
              <Button key="close" onClick={this.popclose}>{this.state.dict['main.close']}</Button>
            ]}
            destroyOnClose
          >
            {<SubTabTable 
              BID={''}
              SupMenuID={this.props.MenuID}
              MenuID={this.state.popAction.linkTab}
              BData={this.state.BIDs['mainTabledata'] || ''}
              ContainerId={this.state.ContainerId}
              ID={this.state.popData ? this.state.popData[setting.primaryKey] : ''}
              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>
          {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}
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    tabviews: state.tabviews,
    refreshTab: state.refreshTab,
    permAction: state.permAction
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    refreshTabView: (refreshTab) => dispatch(refreshTabView(refreshTab)),
    modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(NormalTable)

 src/tabviews/managetable/index.scss

New file
@@ -0,0 +1,109 @@
.commontable {
  position: relative;
  min-height: calc(100vh - 94px);
  padding-top: 16px;
  padding-bottom: 80px;
  .box404 {
    padding-top: 30px;
  }
  .ant-modal-mask {
    position: absolute;
  }
  .ant-modal-wrap {
    position: absolute;
  }
  .action-modal .ant-modal {
    top: 40px;
    max-width: 95%;
    .ant-modal-body {
      max-height: calc(100vh - 265px);
    }
  }
  > .ant-spin {
    position: fixed;
    left: calc(50vw - 22px);
    top: calc(50vh - 70px);
  }
  > .ant-card {
    margin: 0 20px 20px;
    > .ant-card-head {
      border: 0;
      padding: 0;
      min-height: 30px;
      .ant-card-head-title {
        padding: 10px 0 0;
        span {
          color: #1890ff;
          display: inline-block;
          padding: 0 10px;
          font-size: 15px;
          border-bottom: 1px solid #1890ff;
          i {
            margin-right: 10px;
          }
        }
      }
    }
    > .ant-card-body {
      padding: 0;
    }
  }
  .main-table-box {
    position: relative;
    .pickchange {
      position: absolute;
      right: 0px;
      top: -25px;
      .ant-switch {
        z-index: 1;
        float: right;
        margin-right: 20px;
        margin-bottom: 5px;
      }
    }
  }
  > .ant-tabs {
    padding: 0px 20px;
    margin-bottom: 20px;
    .ant-tabs-tab:not(.ant-tabs-tab-active) {
      cursor: pointer;
    }
  }
  .common-table-copy {
    position: fixed;
    z-index: 2;
    bottom: 65px;
    right: 30px;
    width: 40px;
    height: 40px;
  }
}
.commontable.pick-control {
  >.button-list {
    padding-right: 140px;
  }
}
.popview-modal {
  .ant-modal-body {
    min-height: 300px;
  }
}
.menu-tree-modal {
  .ant-modal-body {
    min-height: 300px;
    .menu-header {
      text-align: center;
      span {
        font-weight: 600;
        margin-right: 20px;
      }
      .ant-typography {
        font-weight: 600;
        display: inline-block;
      }
    }
    .ant-tree li .ant-tree-node-content-wrapper {
      cursor: default;
    }
  }
}

 src/tabviews/subtable/index.jsx

@@ -288,6 +288,15 @@
    
    if (type === 'refresh') {
      _BID = bid
      if (!bid) { // 主表ID不存在时，不查询子表
        this.setState({
          data: [],
          total: 0,
          loading: false
        })

        return
      }
    }

    if (setting.interType !== 'inner' || (setting.interType === 'inner' && setting.innerFunc)) {

 src/tabviews/tableshare/actionList/index.jsx

@@ -247,7 +247,14 @@
            })

          } else if (btn.sql && btn.sqlType === 'insert') { // 系统函数添加时，生成uuid
            param.ID = Utils.getguid()
            primaryId = ''
            if (formdata && setting.primaryKey) { // 表单中存在主键字段，主键值以表单中的值为准
              let _form = formdata.filter(_form => _form.key === setting.primaryKey)[0]
              if (_form) {
                primaryId = _form.value
              }
            }
            param.ID = primaryId || Utils.getguid()
            param.LText = Utils.formatOptions(Utils.getSysDefaultSql(btn, setting, formdata, param, data[0], logcolumns)) // 数据源
            param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
            param.secretkey = Utils.encrypt(param.LText, param.timestamp)
@@ -268,6 +275,14 @@
          _resolve()
        })
      } else if (btn.Ot === 'required' || (btn.Ot === 'requiredOnce' && btn.OpenType === 'pop')) {
        let _formPrimaryId = ''
        if (formdata && setting.primaryKey) { // 表单中存在主键字段，主键值以表单中的值为准
          let _form = formdata.filter(_form => _form.key === setting.primaryKey)[0]
          if (_form) {
            _formPrimaryId = _form.value
          }
        }

        let _params = data.map((cell, index) => {
          let param = {
            func: 'sPC_TableData_InUpDe',
@@ -303,6 +318,11 @@
              if (setting.primaryKey) {
                param[setting.primaryKey] = primaryId
              }
            } else if (btn.sql && btn.sqlType === 'insert') { // 系统函数添加时，生成uuid
              param.ID = _formPrimaryId || Utils.getguid()
              param.LText = Utils.formatOptions(Utils.getSysDefaultSql(btn, setting, formdata, param, cell, logcolumns)) // 数据源
              param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
              param.secretkey = Utils.encrypt(param.LText, param.timestamp)
            } else if (btn.sql) {
              if (index !== 0) {
                formdata = formdata.map(_data => {

 src/templates/comtableconfig/index.jsx

@@ -1458,6 +1458,18 @@
          duration: 10
        })
        return
      } else if (card.OpenType === 'excelOut') {
        let _cols = _verify.columns.map(col => col.Column)
        let _vcols = Array.from(new Set(_cols))
        if (_cols.length > _vcols.length) {
          notification.warning({
            top: 92,
            message: 'Excel列字段名，不可重复!',
            duration: 10
          })
          
          return
        }
      }

      config.action = config.action.map(item => {

 src/templates/formtabconfig/actionform/index.jsx

@@ -388,7 +388,6 @@
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          values.id = this.props.card.id
          values.uuid = this.props.card.uuid
          values.verify = this.props.card.verify || null
          values.btnType = this.props.card.btnType || 'tabFormBtn'

 src/templates/formtabconfig/index.jsx

@@ -2229,7 +2229,7 @@
            </Card>
          </div>
        </DndProvider>
        {/* 编辑搜索条件 */}
        {/* 编辑表单 */}
        <Modal
          title={this.state.dict['header.modal.form.edit']}
          visible={modaltype === 'search'}

 src/templates/formtabconfig/source.jsx

@@ -84,7 +84,7 @@
        errorTime: 15,
        OpenType: 'exec',
        icon: '',
        class: 'green',
        class: 'border-primary',
        verify: null
      }, {
        btnType: 'cancel',
@@ -97,7 +97,7 @@
        pageTemplate: '',
        url: '',
        icon: '',
        class: 'danger'
        class: 'border-danger'
      }
    ],
    tabs: [

 src/templates/modalconfig/index.jsx

@@ -971,6 +971,35 @@
    })
  }

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

    if (card.focus) {
      let _config = null
      if (config.groups.length > 0) {
        let _groups = config.groups.map(group => {
          group.sublist = group.sublist.filter(item => item.uuid !== card.uuid)
          return group
        })
        _config = {...config, groups: _groups}
      } else {
        let _fields = config.fields.filter(item => item.uuid !== card.uuid)
        _config = {...config, fields: _fields}
      }

      this.setState({
        card: null,
        config: _config,
        visible: false
      })
    } else {
      this.setState({
        card: null,
        visible: false
      })
    }
  }

  render () {
    const { config } = this.state

@@ -1098,7 +1127,7 @@
          title={this.state.dict['header.edit']}
          visible={this.state.visible}
          width={700}
          onCancel={() => { this.setState({ visible: false }) }}
          onCancel={this.editModalCancel}
          onOk={this.handleSubmit}
          destroyOnClose
        >

 src/templates/subtableconfig/index.jsx

@@ -1213,6 +1213,18 @@
          duration: 10
        })
        return
      } else if (card.OpenType === 'excelOut') {
        let _cols = _verify.columns.map(col => col.Column)
        let _vcols = Array.from(new Set(_cols))
        if (_cols.length > _vcols.length) {
          notification.warning({
            top: 92,
            message: 'Excel列字段名，不可重复!',
            duration: 10
          })
          
          return
        }
      }

      config.action = config.action.map(item => {
@@ -2248,6 +2260,7 @@
            dict={this.state.dict}
            card={this.state.card}
            formlist={this.state.formlist}
            optionLibs={this.state.optionLibs}
            wrappedComponentRef={(inst) => this.searchFormRef = inst}
          />
        </Modal>

 src/templates/tableshare/verifycard/index.jsx

@@ -303,14 +303,22 @@
        width: '13%',
        render: (text, record) => {
          let _text = ''

          let _type = record.Type
          if (_type && typeof(_type) === 'string') {
            _type = parseInt(_type)
          } else {
            _type = 4
          }

          if (record.TypeCharOne === 'n') {
            _text = record.ModularDetailCode + Array(record.Type).join('0') + '1'
            _text = record.ModularDetailCode + Array(_type).join('0') + '1'
          } else if (record.TypeCharOne === 'Y') {
            _text = record.ModularDetailCode + moment().format('YYYYMMDD') + Array(record.Type).join('0') + '1'
            _text = record.ModularDetailCode + moment().format('YYYYMMDD') + Array(_type).join('0') + '1'
          } else if (record.TypeCharOne === 'Lp') {
            _text = Array(record.Type).join('0') + '10'
            _text = Array(_type).join('0') + '10'
          } else if (record.TypeCharOne === 'BN') {
            _text = moment().format('YYYYMMDD') + Array(record.Type).join('0') + '1'
            _text = moment().format('YYYYMMDD') + Array(_type).join('0') + '1'
          }
          return _text
        }
@@ -434,14 +442,14 @@
            _fields = _LongParam.fields
          }

          let _usefulfields = ['BID', 'ID', 'LoginUID', 'SessionUid', 'UserID', 'Appkey']
          let _usefulfields = ['BID', 'ID', 'LoginUID', 'SessionUid', 'UserID', 'Appkey', 'UserName', 'FullName']
          let hasBid = false

          _fields.forEach(_f => {
            if (_f.field) {
              _usefulfields.push(_f.field)
            }
            if (_f.field.toLowerCase() === 'bid') {
            if (_f.field && _f.field.toLowerCase() === 'bid') {
              hasBid = true
            }
          })
@@ -480,7 +488,7 @@
        }
      })
    } else {
      let _usefulfields = ['BID', 'ID', 'LoginUID', 'SessionUid', 'UserID', 'Appkey']
      let _usefulfields = ['BID', 'ID', 'LoginUID', 'SessionUid', 'UserID', 'Appkey', 'UserName', 'FullName']

      if (columns && columns.length > 0 && this.props.card.Ot !== 'notRequired') {
        columns.forEach(_f => {

 src/templates/tableshare/verifycardexcelin/columnform/index.jsx

@@ -7,7 +7,7 @@
class UniqueForm extends Component {
  static propTpyes = {
    dict: PropTypes.object,         // 字典项
    range: PropTypes.any,           // 字典项
    columns: PropTypes.array,       // 列名集合
    columnChange: PropTypes.func    // 修改函数
  }

@@ -68,6 +68,7 @@


  handleConfirm = () => {
    // const { columns } = this.props
    // 表单提交时检查输入值是否正确
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
@@ -81,10 +82,21 @@
          values.limit = ''
        }

        // let _col = columns.filter(col => col.uuid !== values.uuid && col.Column === values.Column)
        // if (_col.length > 0) {
        //   notification.warning({
        //     top: 92,
        //     message: 'Excel列字段名，不可重复!',
        //     duration: 10
        //   })
        //   return
        // }

        this.props.columnChange(values)
        this.setState({
          editItem: null,
          locked: false
          locked: false,
          type: 'Nvarchar(50)'
        })
        this.props.form.setFieldsValue({
          Column: '',

 src/templates/tableshare/verifycardexcelin/customscript/index.jsx

@@ -8,12 +8,41 @@
class CustomForm extends Component {
  static propTpyes = {
    dict: PropTypes.object,         // 字典项
    btn: PropTypes.object,          // 按钮信息
    scripts: PropTypes.array,       // 自定义脚本列表
    isdefault: PropTypes.any,       // 是否使用默认sql
    usefulfields: PropTypes.string, // 可用字段
    scriptsChange: PropTypes.func   // 表单
  }

  state = {
    editItem: null
    editItem: null,
    usefulfields: null
  }

  UNSAFE_componentWillMount () {
    const {usefulfields} = this.props

    let fields = usefulfields.map(item => item.Column)
    fields = ['BID', 'ID', ...fields]
    fields = Array.from(new Set(fields))

    this.setState({
      usefulfields: fields.join(', ')
    })
  }

  componentDidMount () {
    const { btn, isdefault, usefulfields, scripts } = this.props

    if (isdefault === 'false' && scripts.length === 0) {
      let fields = usefulfields.map(col => col.Column).join(',')

      this.props.form.setFieldsValue({
        sql: `Insert into ${btn.sheet} (${fields},createuserid,createuser,createstaff,bid) 
        Select ${fields},@userid,@username,@fullname,@BID From @${btn.sheet}`
      })
    }
  }

  edit = (record) => {
@@ -24,6 +53,19 @@
    this.props.form.setFieldsValue({
      sql: record.sql
    })
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    const { btn, usefulfields, scripts } = this.props

    if (nextProps.isdefault ==='false' && this.props.isdefault !== nextProps.isdefault && scripts.length === 0) {
      let fields = usefulfields.map(col => col.Column).join(',')

      this.props.form.setFieldsValue({
        sql: `Insert into ${btn.sheet} (${fields},createuserid,createuser,createstaff,bid) 
        Select ${fields},@userid,@username,@fullname,@BID From @${btn.sheet}`
      })
    }
  }


@@ -76,7 +118,7 @@
  }

  render() {
    const { usefulfields } = this.props
    const { usefulfields } = this.state
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
@@ -89,14 +131,12 @@
      }
    }

    let _fields = usefulfields.map(item => item.Column).join(', ')

    return (
      <Form {...formItemLayout} className="verify-form" id="verifycard2">
        <Row gutter={24}>
          {_fields ? <Col span={21} className="sqlfield">
          {usefulfields ? <Col span={21} className="sqlfield">
            <Form.Item label={'可用字段'}>
              {_fields}
              {usefulfields}
            </Form.Item>
          </Col> : null}
          <Col span={21} className="sql">

 src/templates/tableshare/verifycardexcelin/index.jsx

@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Tabs, Row, Col, Input, Button, Table, Popconfirm, Icon, notification, Modal, message, InputNumber } from 'antd'
import { Form, Tabs, Row, Col, Input, Button, Table, Popconfirm, Icon, notification, Modal, message, InputNumber, Radio } from 'antd'

import Utils from '@/utils/utils.js'

@@ -148,6 +148,7 @@
    this.setState({
      verify: {
        ..._verify,
        default: _verify.default || 'true',
        sheet: _verify.sheet || 'Sheet1',
        range: _verify.range || 0,
        columns: _columns,
@@ -336,6 +337,15 @@
    })
  }

  onOptionChange = (e, key) => {
    const { verify } = this.state
    let value = e.target.value

    this.setState({
      verify: {...verify, default: value}
    })
  }

  showError = (errorType) => {
    if (errorType === 'S') {
      notification.success({
@@ -413,13 +423,21 @@
                    })(<InputNumber min={0} max={100} precision={0} />)}
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label={'默认sql'}>
                    <Radio.Group value={verify.default} onChange={this.onOptionChange}>
                      <Radio value="true">执行</Radio>
                      <Radio value="false">不执行</Radio>
                    </Radio.Group>
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </TabPane>
          <TabPane tab="Excel列设置" key="2x">
            <ColumnForm
              dict={this.props.dict}
              range={verify.range}
              columns={verify.columns}
              columnChange={this.columnChange}
              wrappedComponentRef={(inst) => this.columnForm = inst}
            />
@@ -434,8 +452,11 @@
          </TabPane>
          <TabPane tab="自定义脚本" key="6">
            <CustomScript
              usefulfields={verify.columns}
              dict={this.props.dict}
              btn={this.props.card}
              isdefault={verify.default}
              usefulfields={verify.columns}
              scripts={verify.scripts}
              scriptsChange={this.scriptsChange}
              wrappedComponentRef={(inst) => this.scriptsForm = inst}
            />

 src/templates/tableshare/verifycardexcelout/columnform/index.jsx

@@ -3,11 +3,10 @@
import { Form, Row, Col, Button, Input, InputNumber } from 'antd'
import './index.scss'


class UniqueForm extends Component {
  static propTpyes = {
    dict: PropTypes.object,         // 字典项
    range: PropTypes.any,           // 字典项
    columns: PropTypes.array,       // 列名集合
    columnChange: PropTypes.func    // 修改函数
  }

@@ -29,11 +28,22 @@


  handleConfirm = () => {
    // const { columns } = this.props
    // 表单提交时检查输入值是否正确
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.uuid = this.state.editItem ? this.state.editItem.uuid : ''

        // let _col = columns.filter(col => col.uuid !== values.uuid && col.Column === values.Column)
        // if (_col.length > 0) {
        //   notification.warning({
        //     top: 92,
        //     message: 'Excel列字段名，不可重复!',
        //     duration: 10
        //   })
        //   return
        // }

        this.props.columnChange(values)
        this.setState({
          editItem: null

 src/templates/tableshare/verifycardexcelout/index.jsx

@@ -196,7 +196,6 @@
          <TabPane tab="Excel导出列" key="1">
            <ColumnForm
              dict={this.props.dict}
              range={verify.range}
              columnChange={this.columnChange}
              wrappedComponentRef={(inst) => this.columnForm = inst}
            />

 src/utils/utils.js

@@ -550,6 +550,25 @@

      fields = fields.join(',')

      let _insert = ''

      if (btn.default !== 'false') {
        _insert = `
        Insert into ${item.sheet} (${fields},createuserid,createuser,createstaff,bid) 
        Select ${fields},@userid@,@username,@fullname,@BID@ From @${item.sheet}
        `
      }

      if (btn.scripts && btn.scripts.length > 0) {
        btn.scripts.forEach(script => {
          if (script.status === 'false') return

          _insert += `
          ${script.sql}
          `
        })
      }

      _sql = `declare @${item.sheet} table (${declarefields.join(',')},jskey nvarchar(50) )
      Declare @UserName nvarchar(50),@FullName nvarchar(50),@ErrorCode nvarchar(50),@retmsg nvarchar(4000)

@@ -559,10 +578,7 @@
      
      Insert into  @${item.sheet} (${fields},jskey)
      ${_Ltext}

      Insert into ${item.sheet} (${fields},createuserid,createuser,createstaff,bid) 
      Select ${fields},@userid@,@username,@fullname,@BID@ From @${item.sheet}

      ${_insert}
      Delete @${item.sheet}

      aaa: select @ErrorCode as ErrorCode,@retmsg as retmsg`