2019-12-31

king

2019-12-31 f9697383bc9097be8a444558e09ae21b27f1e831

 src/tabviews/commontable/index.jsx

@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { BackTop, notification, Spin, Tabs, Icon, Switch} from 'antd'
import { BackTop, notification, Spin, Tabs, Icon, Switch, Modal, Button} from 'antd'
import moment from 'moment'
import Api from '@/api'
import MainTable from './mainTable'
@@ -9,13 +9,13 @@
import MainSearch from '@/tabviews/tableshare/topSearch'
import SubTable from '@/tabviews/subtable'
import NotFount from '@/components/404'
// import asyncComponent from '@/utils/asyncLoadComponent'
import asyncComponent from '@/utils/asyncLoadComponent'
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'))
const SubTabTable = asyncComponent(() => import('@/tabviews/subtabtable'))
const { TabPane } = Tabs

export default class NormalTable extends Component {
@@ -30,25 +30,28 @@
    loadingview: true,    // 页面加载中
    viewlost: false,      // 页面丢失：1、未获取到配置-页面丢失；2、页面未启用
    lostmsg: '',          // 页面丢失时的提示信息
    config: {},
    searchlist: null,
    actions: null,
    columns: null,
    arr_field: '',
    setting: null,
    data: null,
    total: 0,
    loading: false,
    pageIndex: 1,
    pageSize: 10,
    orderColumn: '',
    orderType: 'asc',
    search: '',
    configMap: {},
    BIDs: {},
    setsingle: false,
    pickup: false,
    isLinkMain: false
    config: {},           // 页面配置信息，包括按钮、搜索、显示列、标签等
    searchlist: null,     // 搜索条件
    actions: null,        // 按钮集
    columns: null,        // 显示列
    arr_field: '',        // 使用 sPC_Get_TableData 时的查询字段集
    setting: null,        // 页面全局设置：数据源、按钮及显示列固定、主键等
    data: null,           // 列表数据集
    total: 0,             // 总数
    loading: false,       // 列表数据加载中
    pageIndex: 1,         // 页码
    pageSize: 10,         // 每页数据条数
    orderColumn: '',      // 排序字段
    orderType: 'asc',     // 排序方式
    search: '',           // 搜索条件数组，使用时需分场景处理
    configMap: {},        // 页面配置信息：下拉、按钮等
    BIDs: {},             // 上级表id
    setsingle: false,     // 主表单选多选切换
    pickup: false,        // 主表数据隐藏显示切换
    isLinkMain: false,    // 是否存在与主表关联的子表
    popAction: false,     // 弹框页面，按钮信息
    popData: false,       // 弹框页面，所选的表格数据
    visible: false        // 弹框显示隐藏控制
  }

  /**
@@ -134,9 +137,28 @@
        })
      }

      // 过滤工具栏按钮（未经过权限过滤）
      let _actions = config.action.filter(item => item.position === 'toolbar')
      let _tab = config.tabs.filter(tab => tab.supMenu === 'mainTable')
      let _actions = config.action.filter(item => item.position === 'toolbar') // 过滤工具栏按钮（未经过权限过滤）
      let _tab = config.tabs.filter(tab => tab.supMenu === 'mainTable')        // 检查是否有与主表关联的子表

      let supmenus = {}
      config.tabgroups.forEach(group => {
        if (config[group] && config[group].length > 0) {
          config[group] = config[group].map(tab => {
            if (tab.subtabs.length > 0) {
              tab.subtabs.forEach(id => {
                supmenus[id] = tab.uuid
              })
            }
            if (config.setting.subtabs.includes(tab.uuid)) {
              tab.supMenu = 'mainTable'
            } else if (supmenus[tab.uuid]) {
              tab.supMenu = supmenus[tab.uuid]
            }

            return tab
          })
        }
      })

      this.setState({
        loadingview: false,
@@ -169,6 +191,9 @@
    }
  }

  /**
   * @description 搜索条件下拉选项预加载
   */
  improveSearch = () => {
    let searchlist = JSON.parse(JSON.stringify(this.state.searchlist))
    let deffers = []
@@ -213,9 +238,10 @@
      }
    })

    this.setState({searchlist: JSON.parse(JSON.stringify(searchlist))})

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

    Promise.all(deffers).then(result => {
      result.forEach(res => {
@@ -223,11 +249,17 @@
          searchlist = searchlist.map(item => {
            if (item.uuid === res.search.uuid) {
              res.data.forEach(cell => {
                item.options.push({
                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
@@ -244,7 +276,9 @@
    })
  }


  /**
   * @description 主表数据加载
   */ 
  async loadmaindata () {
    const { setting, BIDs } = this.state
    let param = ''
@@ -254,6 +288,8 @@
    } else {
      param = this.getDefaultParam()
    }

    this.handleTableId('mainTable', '')

    let result = await Api.genericInterface(param)
    if (result.status) {
@@ -281,6 +317,9 @@
    }
  }

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

@@ -306,6 +345,9 @@
    return param
  }

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

@@ -337,9 +379,12 @@
    return param
  }

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

    if (setting.onload === 'false') {
      this.setState({
@@ -363,8 +408,10 @@
    }
  }

  /**
   * @description 表格条件改变时重置数据（分页或排序）
   */
  refreshbytable = (pagination, filters, sorter) => {
    // 表格查询条件修改
    if (sorter.order) {
      let _chg = {
        ascend: 'asc',
@@ -384,6 +431,9 @@
    })
  }

  /**
   * @description 表格刷新
   */
  reloadtable = () => {
    this.refs.mainTable.resetTable()
    this.setState({
@@ -394,11 +444,14 @@
    })
  }

  /**
   * @description 页面刷新，重新获取配置
   */
  reloadview = () => {
    this.setState({
      loadingview: true,    // 页面加载中
      viewlost: false,      // 页面丢失：1、未获取到配置-页面丢失；2、页面未启用
      lostmsg: '',          // 页面丢失时的提示信息
      loadingview: true,
      viewlost: false,
      lostmsg: '',
      config: {},
      searchlist: null,
      actions: null,
@@ -423,8 +476,10 @@
    })
  }

  /**
   * @description 按钮操作完成后（成功或失败），页面刷新，重置页码及选择项
   */
  refreshbyaction = (btn, type) => {
    // 按钮操作后刷新表格,重置页码及选择项
    if (btn.execSuccess === 'grid' && type === 'success') {
      this.reloadtable()
    } else if (btn.execError === 'grid' && type === 'error') {
@@ -433,11 +488,25 @@
      this.reloadtable()
    } 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()
    } else if (type === 'excelOut') {
      this.handleDefaultExcelout(btn)
    }
  }

  /**
   * @description 子表操作完成后刷新主表
   */
  handleMainTable = () => {
    this.reloadtable()
  }

  /**
   * @description 使用默认存储过程 sPC_Get_TableData 导出excel表格
   */
  handleDefaultExcelout = (btn) => {
    const { MenuName } = this.props
    const { arr_field, orderColumn, orderType, search, setting, config } = this.state
@@ -456,8 +525,9 @@
    _arr_label_field = _arr_label_field.join(',')

    let _search = Utils.joinMainSearchkey(search)
    _search = _search ? 'where (' + _search + ')' : ''
    // 获取列表数据
    _search = _search ? 'where ' + _search : ''

    // 获取excel数据，与获取列表数据不同为未设置页码等参数
    let param = {
      func: 'sPC_Get_TableData',
      obj_name: 'data',
@@ -489,8 +559,10 @@
    })
  }

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

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

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

@@ -513,6 +591,9 @@
    })
  }

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

@@ -526,11 +607,32 @@
    })
  }
  
  /**
   * @description 数据展开合并切换
   */
  pickupChange = () => {
    const { pickup } = this.state
    this.setState({
      pickup: !pickup
    })
  }

  /**
   * @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 () {
@@ -546,7 +648,7 @@
   * @description 组件销毁，清除state更新
   */
  componentWillUnmount () {
    this.setState = (state, callback) => {
    this.setState = () => {
      return
    }
  }
@@ -574,6 +676,7 @@
            dict={this.state.dict}
            MenuID={this.props.MenuID}
            refreshdata={this.refreshbyaction}
            triggerPopview={this.triggerPopview}
            gettableselected={this.gettableselected}
          /> : null
        }
@@ -603,23 +706,46 @@
            if (config[group].length === 0) return null

            return (
              <Tabs defaultActiveKey="0" tabPosition="top" key={group}>
              <Tabs defaultActiveKey="0" key={group}>
                {config[group].map((_tab, index) => {
                  return !_tab.supMenu || (_tab.supMenu && this.state.BIDs[_tab.supMenu]) ?
                  // return !_tab.supMenu || (_tab.supMenu && this.state.BIDs[_tab.supMenu]) ?
                  return (
                    <TabPane tab={
                      <span>
                        {_tab.icon ? <Icon type={_tab.icon} /> : null}
                        {_tab.label}
                      </span>
                    } key={`${index}`}>
                      {_tab.type === 'SubTable' ? <SubTable SupMenuID={this.props.MenuID} MenuID={_tab.linkTab} Tab={_tab} BID={this.state.BIDs[_tab.supMenu] || ''} /> : null}
                    </TabPane> : null
                      {_tab.type === 'SubTable' ?
                        <SubTable
                          Tab={_tab}
                          MenuID={_tab.linkTab}
                          SupMenuID={this.props.MenuID}
                          BID={this.state.BIDs[_tab.supMenu] || ''}
                          handleTableId={this.handleTableId}
                          handleMainTable={this.handleMainTable}
                        /> : null}
                    </TabPane>
                  )
                })}
              </Tabs>
            )
          })
        }
        {/* {<SubTabTable SupMenuID={this.props.SupMenuID} MenuID={this.props.MenuID} Tab={this.props.Tab} BID={this.props.BID} />} */}
        <Modal
          className="popview-modal"
          title={this.state.popAction.label}
          width={'80vw'}
          maskClosable={false}
          visible={this.state.visible}
          onCancel={this.popclose}
          footer={[
            <Button key="cancel" onClick={this.popclose}>{this.state.dict['main.close']}</Button>
          ]}
          destroyOnClose
        >
          {<SubTabTable SupMenuID={this.props.MenuID} MenuID={this.state.popAction.linkTab} BID={''} ID={this.state.popData ? this.state.popData[setting.primaryKey] : ''} />}
        </Modal>
        <BackTop>
          <div className="ant-back-top">
            <div className="ant-back-top-content">