2019-12-31

king

2019-12-31 f9697383bc9097be8a444558e09ae21b27f1e831

 src/tabviews/subtable/index.jsx

@@ -1,27 +1,29 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { notification, Spin} from 'antd'
import { notification, Spin, Modal, Button} from 'antd'
import moment from 'moment'
import Api from '@/api'
import SubTable from './subTable'
import SubAction from '@/tabviews/tableshare/actionList'
import SubSearch from '@/tabviews/tableshare/topSearch'
// import asyncComponent from '@/utils/asyncLoadComponent'
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'))
const SubTabTable = asyncComponent(() => import('@/tabviews/subtabtable'))

export default class NormalTable extends Component {
  static propTpyes = {
    Tab: PropTypes.object,       // 标签信息
    BID: PropTypes.string,       // 上级数据ID
    MenuID: PropTypes.string,    // 菜单Id
    SupMenuID: PropTypes.string  // 上级菜单Id
    Tab: PropTypes.object,           // 标签信息
    BID: PropTypes.string,           // 上级数据ID
    MenuID: PropTypes.string,        // 菜单Id
    SupMenuID: PropTypes.string,     // 上级菜单Id
    handleTableId: PropTypes.func,   // 控制表格数据切换时，更新在主表中的id
    handleMainTable: PropTypes.func  // 控制表格数据切换时，更新在主表中的id
  }

  state = {
@@ -29,23 +31,29 @@
    loadingview: true,    // 页面加载中
    viewlost: false,      // 页面丢失：1、未获取到配置-页面丢失；2、页面未启用
    lostmsg: '',          // 页面丢失时的提示信息
    config: {},
    searchlist: null,
    actions: null,
    columns: null,
    arr_field: '',
    setting: null,
    data: [],
    total: 0,
    loading: false,
    pageIndex: 1,
    pageSize: 10,
    orderColumn: '',
    orderType: 'asc',
    search: '',
    configMap: {}
    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: {},        // 页面配置信息：下拉、按钮等
    popAction: false,     // 弹框页面，按钮信息
    popData: false,       // 弹框页面，所选的表格数据
    visible: false        // 弹框显示隐藏控制
  }

  /**
   * @description 上级菜单id变化时，刷新数据
   */
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.Tab.supMenu && !is(fromJS(this.props.BID), fromJS(nextProps.BID))) {
      this.loadmaindata()
@@ -165,6 +173,9 @@
    }
  }

  /**
   * @description 搜索条件下拉选项预加载
   */
  improveSearch = () => {
    let searchlist = JSON.parse(JSON.stringify(this.state.searchlist))
    let deffers = []
@@ -209,9 +220,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 => {
@@ -219,11 +231,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
@@ -240,7 +258,9 @@
    })
  }


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

    this.handleTableId('')

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

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

@@ -298,6 +323,9 @@
    return param
  }

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

@@ -329,8 +357,11 @@
    return param
  }

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

    this.setState({
@@ -342,8 +373,10 @@
    })
  }

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

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

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

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

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

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

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

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

  /**
   * @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 () {
@@ -490,7 +568,7 @@
   * @description 组件销毁，清除state更新
   */
  componentWillUnmount () {
    this.setState = (state, callback) => {
    this.setState = () => {
      return
    }
  }
@@ -518,6 +596,7 @@
            dict={this.state.dict}
            MenuID={this.props.SupMenuID}
            refreshdata={this.refreshbyaction}
            triggerPopview={this.triggerPopview}
            gettableselected={this.gettableselected}
          />
        }
@@ -533,9 +612,23 @@
            loading={this.state.loading}
            refreshdata={this.refreshbytable}
            buttonTrigger={this.buttonTrigger}
            handleTableId={this.handleTableId}
          />
        }
        {/* {<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>
        {viewlost ? <NotFount msg={this.state.lostmsg} /> : null}
      </div>
    )