~jinfei/pc-plat.git

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} 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 FormGroup from './formgroup'
import FormAction from './actionList'
import SubTable from '@/tabviews/subtable'
import NotFount from '@/components/404'
import {refreshTabView, modifyTabview} from '@/store/action'
import './index.scss'
 
const { TabPane } = Tabs
 
class NormalTable extends Component {
  static propTpyes = {
    // MenuNo: PropTypes.string,    // 菜单参数
    // MenuName: PropTypes.string,  // 菜单参数
    MenuID: PropTypes.string,       // 菜单Id
    param: PropTypes.any,           // 主表传递参数
    refresh: PropTypes.any          // 刷新主表页面
  }
 
  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    ContainerId: Utils.getuuid(), // 菜单外层html Id
    loadingview: true,    // 页面加载中
    viewlost: false,      // 页面丢失：1、未获取到配置-页面丢失；2、页面未启用
    lostmsg: '',          // 页面丢失时的提示信息
    config: {},           // 页面配置信息，包括按钮、表单、标签等
    groups: null,         // 表单组
    actions: null,        // 按钮集
    arr_field: '',        // 使用 sPC_Get_TableData 时的查询字段集
    setting: null,        // 页面全局设置：数据源、按钮及显示列固定、主键等
    data: null,           // 列表数据集
    configMap: {},        // 页面配置信息：下拉、按钮等
    BIDs: {},             // 上级表id
    setsingle: false,     // 主表单选多选切换
    pickup: false,        // 主表数据隐藏显示切换
    popData: false,       // 弹框页面，所选的表格数据
    visible: false,       // 弹框显示隐藏控制
    primaryId: 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 = []     // 字段集
 
      // if (this.props.param && this.props.param.arr_field) { // 使用显示列字段查询
      //   _arrField = this.props.param.arr_field
      // } else {
      config.groups.forEach(group => {
        group.sublist.forEach(item => {
          if (!item.field) return
 
          _arrField.push(item.field)
        })
      })
      _arrField = _arrField.join(',')
      // }
 
      // 权限过滤
      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])
      // })
 
      this.setState({
        config: config,
        setting: config.setting,
        actions: config.action,
        arr_field: _arrField,
        primaryId: this.props.param.primaryId || '',
        data: config.setting.datatype === 'query' ? null : this.props.param.data,
        BIDs: {
          mainTable: this.props.param.primaryId || '',
          mainTabledata: config.setting.datatype === 'query' ? '' : this.props.param.data
        }
      }, () => {
        this.improveSelectOption(config.groups)
 
        if (config.setting.datatype === 'query' && this.props.param.primaryId) {
          this.loadmaindata()
        }
      })
    } else {
      this.setState({
        loadingview: false,
        viewlost: true
      })
      notification.warning({
        top: 92,
        message: result.message,
        duration: 10
      })
    }
  }
 
  /**
   * @description 表单下拉选项加载
   */
  improveSelectOption = (groups) => {
    let deffers = []
    groups.forEach(group => {
      group.sublist = group.sublist.map(item => {
        if (item.type !== 'multiselect' && item.type !== 'select' && item.type !== 'link') return item
 
        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
          })
        }
 
        return item
      })
    })
    
    if (deffers.length === 0) {
      this.setState({
        loadingview: false,
        groups: groups
      })
      return
    }
 
    Promise.all(deffers).then(result => {
      let _result = {}
      result.forEach(res => {
        if (res.status) {
          let _options = res.data.map(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]
            } else if (res.search.type === 'select' && res.search.linkSubField && res.search.linkSubField.length > 0) {
              res.search.linkSubField.forEach(_field => {
                _item[_field] = (cell[_field] || cell[_field] === 0) ? cell[_field] : ''
              })
            }
 
            return _item
          })
 
          _result[res.search.uuid] = _options
        } else {
          notification.warning({
            top: 92,
            message: res.search.label + ':' + res.message,
            duration: 10
          })
        }
      })
 
      groups.forEach(group => {
        group.sublist = group.sublist.map(item => {
          if (item.type === 'select' || item.type === 'link' || item.type === 'multiselect') {
            if (_result[item.uuid]) {
              item.options = [...item.options, ..._result[item.uuid]]
            }
            item.oriOptions = JSON.parse(JSON.stringify(item.options))
          }
          
          return item
        })
      })
 
      this.setState({
        loadingview: false,
        groups: groups
      })
    })
  }
 
  /**
   * @description 主表数据加载
   */ 
  async loadmaindata () {
    const { setting, BIDs } = this.state
 
    if (setting.datatype !== 'query') {
      notification.warning({
        top: 92,
        message: '未设置数据查询配置！',
        duration: 10
      })
      return
    }
 
    let param = null
 
    if (setting.interType !== 'inner' || (setting.interType === 'inner' && setting.innerFunc)) {
      param = this.getCustomParam()
    } else {
      param = this.getDefaultParam()
    }
 
    if (!param) return // 未获取参数时，不发请求
 
    let result = await Api.genericInterface(param)
    if (result.status) {
      let _data = result.data[0] || ''
      let _primaryId = ''
 
      if (_data) {
        _primaryId = _data[setting.primaryKey] || ''
      }
 
      this.setState({
        data: _data,
        primaryId: _primaryId,
        BIDs: {
          ...BIDs,
          mainTable: _primaryId,
          mainTabledata: _data
        }
      })
    } else {
      notification.error({
        top: 92,
        message: result.message,
        duration: 15
      })
    }
  }
 
  /**
   * @description 获取系统存储过程 sPC_Get_TableData 的参数
   */
  getDefaultParam = () => {
    const { arr_field, setting, primaryId } = this.state
 
    if (!arr_field) {
      notification.warning({
        top: 92,
        message: '未设置表单字段！',
        duration: 10
      })
      return null
    } else if (!primaryId) {
      notification.warning({
        top: 92,
        message: '未获取到主键值！',
        duration: 10
      })
      return null
    }
 
    
    let param = {
      func: 'sPC_Get_TableData',
      obj_name: 'data',
      arr_field: arr_field,
      appkey: window.GLOB.appkey || ''
    }
    
    let _dataresource = setting.dataresource
 
    if (/\s/.test(_dataresource)) {
      _dataresource = '(' + _dataresource + ') tb'
    }
 
    let LText = `select ${arr_field} from (select ${arr_field} ,ROW_NUMBER() from ${_dataresource}) tmptable where ${setting.primaryKey}=${primaryId}`
 
    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 = ''
 
    return param
  }
 
  /**
   * @description 获取用户自定义存储过程传参
   */
  getCustomParam = () => {
    const { setting, primaryId } = this.state
 
    let param = {}
 
    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
      }
    }
 
    param[setting.primaryKey] = primaryId
 
    return param
  }
 
  /**
   * @description 按钮操作完成后（成功或失败），页面刷新，重置页码及选择项
   */
  refreshbyaction = (btn, type, primaryId, formdata) => {
    const { BIDs } = this.state
 
    if (type === 'success' && btn.afterExecSuccess === 'notclose') {
      this.setState({
        primaryId: primaryId
      }, () => {
        if (btn.execSuccess === 'refresh') {
          this.loadmaindata()
        } else {
          let data = {}
 
          if (formdata && formdata.length > 0) {
            formdata.forEach(item => {
              data[item.key] = item.value
            })
          }
 
          this.setState({
            BIDs: {
              ...BIDs,
              mainTable: primaryId,
              mainTabledata: data
            }
          })
        }
      })
    } else if (type === 'success' && btn.afterExecSuccess === 'close') {
      if (this.props.refresh) {
        this.props.refresh(btn.execSuccess)
      } else {
        if (btn.execSuccess !== 'never') {
          let PMenu = {
            MenuID: this.props.param.parentId || '',
            position: btn.execSuccess
          }
          this.props.refreshTabView(PMenu)
        }
 
        let tabs = this.props.tabviews.filter(tab => {
          tab.selected = false
          if (tab.MenuID === this.props.param.parentId) {
            tab.selected = true
          }
 
          return tab.MenuID !== this.props.MenuID
        })
 
        this.props.modifyTabview(tabs)
      }
    } else if (type === 'error' && btn.afterExecError === 'notclose') {
      if (btn.execSuccess === 'refresh') {
        this.loadmaindata()
      }
    } else if (type === 'error' && btn.afterExecError === 'close') {
      if (this.props.refresh) {
        this.props.refresh(btn.execError)
      } else {
        if (btn.execError !== 'never') {
          let PMenu = {
            MenuID: this.props.param.parentId || '',
            position: btn.execError
          }
          this.props.refreshTabView(PMenu)
        }
 
        let tabs = this.props.tabviews.filter(tab => {
          tab.selected = false
          if (tab.MenuID === this.props.param.parentId) {
            tab.selected = true
          }
 
          return tab.MenuID !== this.props.MenuID
        })
 
        this.props.modifyTabview(tabs)
      }
    }
  }
 
  /**
   * @description 表格Id变化
   */
  handleTableId = (type, id, data) => {
    const { BIDs } = this.state
 
    this.setState({
      BIDs: {
        ...BIDs,
        [type]: id,
        [type + 'data']: data
      }
    })
  }
 
  /**
   * @description 子表操作完成后刷新主表
   */
  handleMainTable = (type, tab) => {
    if (type === 'maingrid' && tab.supMenu === 'mainTable') {
      this.loadmaindata()
    } 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 获取表单参数
   */
  getFormData = () => {
    return this.formGroupRef.handleConfirm()
  }
 
  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, actions, loadingview, viewlost, config, groups, data } = this.state
    let hasform = false
 
    if (groups && (groups.length > 1 || groups[0].sublist.length > 0)) {
      hasform = true
    }
 
    return (
      <div className="formtab" id={this.state.ContainerId}>
        {loadingview && <Spin size="large" />}
        {hasform ?
          <FormGroup
            dict={this.state.dict}
            data={data}
            groups={groups}
            setting={setting}
            wrappedComponentRef={(inst) => this.formGroupRef = inst}
          /> : null
        }
        {hasform ?
          <FormAction
            logcolumns={[]}
            setting={setting}
            actions={actions}
            dict={this.state.dict}
            data={this.state.data}
            MenuID={this.props.MenuID}
            primaryId={this.state.primaryId}
            getFormData={this.getFormData}
            refreshdata={this.refreshbyaction}
          /> : null
        }
        {!loadingview && !viewlost && 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>
            )
          })
        }
        {viewlost ? <NotFount msg={this.state.lostmsg} /> : 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)