2020-05-06

king

2020-05-06 4e1938344ca46c0cbe699756ecaffa630e698aec

 src/tabviews/subtabtable/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { notification, Spin} from 'antd'
import { notification, Spin, Col, Icon, Tabs} from 'antd'
import moment from 'moment'

import Api from '@/api'
@@ -11,6 +11,7 @@
import Utils from '@/utils/utils.js'
import options from '@/store/options.js'

import ChartComponent from '@/tabviews/zshare/chartcomponent'
import asyncComponent from '@/utils/asyncComponent'
import SubTable from '@/tabviews/zshare/normalTable'
import SubSearch from '@/tabviews/zshare/topSearch'
@@ -18,6 +19,7 @@

import './index.scss'

const { TabPane } = Tabs
const SubAction = asyncComponent(() => import('@/tabviews/zshare/actionList'))

class SubTabModalTable extends Component {
@@ -37,7 +39,7 @@
    loadingview: true,    // 页面加载中
    viewlost: false,      // 页面丢失：1、未获取到配置-页面丢失；2、页面未启用
    lostmsg: '',          // 页面丢失时的提示信息
    config: {},           // 页面配置信息，包括按钮、搜索、显示列、标签等
    config: null,         // 页面配置信息，包括按钮、搜索、显示列、标签等
    searchlist: null,     // 搜索条件
    actions: null,        // 按钮集
    columns: null,        // 显示列
@@ -100,6 +102,20 @@
      let _hideCol = []      // 隐藏及合并列中字段的uuid集
      let colMap = new Map()

      // 兼容图表
      if (!config.charts) {
        config.expand = false
        config.charts = [{
          uuid: Utils.getuuid(),
          label: '',
          title: '',
          chartType: 'table',
          icon: 'table',
          Hide: 'false',
          blacklist: []
        }]
      }

      // 仅支持exec、prompt、pop 三种类型按钮
      config.action = config.action.filter(item => ['exec', 'prompt', 'pop'].includes(item.OpenType))

@@ -135,6 +151,25 @@
            return true
          }
        })

        // 视图权限
        config.charts = config.charts.filter(item => {
          if (!item.blacklist || item.blacklist.length === 0) return true

          let _black = item.blacklist.filter(v => {
            return this.props.permRoles.indexOf(v) !== -1
          })

          if (_black.length > 0 || item.Hide === 'true') {
            return false
          } else {
            return true
          }
        })
      }

      if (config.charts.length <= 1) {
        config.expand = true
      }

      // 1、筛选字段集，2、过滤隐藏列及合并列中的字段uuid
@@ -375,10 +410,13 @@
    let _search = Utils.formatCustomMainSearch(search)

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

    if (setting.laypage !== 'false') {
      param.PageIndex = pageIndex
      param.PageSize = pageSize
    }

    if (setting.interType === 'inner') {
@@ -419,7 +457,9 @@
      func: 'sPC_Get_TableData',
      obj_name: 'data',
      arr_field: arr_field,
      BID: this.props.BID
      BID: this.props.BID,
      custom_script: setting.customScript || '',
      default_sql: setting.default || 'true'
    }

    let _orderBy = orderBy || setting.order
@@ -449,6 +489,12 @@
    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}`

    if (setting.laypage === 'false') {
      LText = `select ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${_orderBy}) as rows from ${_dataresource} ${_search}) tmptable order by tmptable.rows`
      DateCount = ''
    }

    param.custom_script = Utils.formatOptions(param.custom_script)
    param.LText = Utils.formatOptions(LText)
    param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
    param.secretkey = Utils.encrypt(param.LText, param.timestamp)
@@ -513,7 +559,7 @@
      loadingview: true,
      viewlost: false,
      lostmsg: '',
      config: {},
      config: null,
      searchlist: null,
      actions: null,
      columns: null,
@@ -594,7 +640,7 @@
  }

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

    return (
      <div className="subtabtable" id={'subtabtable' + this.props.MenuID}>
@@ -606,43 +652,118 @@
            dict={this.state.dict}
          /> : null
        }
        {actions ?
          <div style={{minHeight: '25px'}}>
            <SubAction
              type="subtab"
              triggerBtn={triggerBtn}
              menuType={this.props.menuType}
              setting={setting}
              actions={actions}
              BID={this.props.BID}
              dict={this.state.dict}
              BData={this.props.BData}
              MenuID={this.props.SupMenuID}
              permRoles={this.props.permRoles}
              logcolumns={this.state.logcolumns}
              refreshdata={this.refreshbyaction}
              ContainerId={this.props.ContainerId}
              gettableselected={this.gettableselected}
            />
          </div> : null
        }
        {columns &&
          <SubTable
            ref="subTable"
            menuType={this.props.menuType}
            tableId=""
            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={() => {}}
          />
        }
        {config ? <div className="chart-view">
          {/* 视图组 */}
          {!config.expand ? <Tabs>
            {config.charts.map(item => (
              <TabPane tab={
                <Icon type={item.icon} />
              } key={item.uuid}>
                {item.chartType === 'table' ? 
                  <Col span={item.width || 24} key={item.uuid}>
                    {config.charts.length > 1 ? <p className="chart-table chart-title">{item.title}</p> : null}
                    <div style={{minHeight: '25px'}}>
                      <SubAction
                        type="subtab"
                        triggerBtn={triggerBtn}
                        menuType={this.props.menuType}
                        setting={setting}
                        actions={actions}
                        BID={this.props.BID}
                        dict={this.state.dict}
                        BData={this.props.BData}
                        MenuID={this.props.SupMenuID}
                        permRoles={this.props.permRoles}
                        logcolumns={this.state.logcolumns}
                        refreshdata={this.refreshbyaction}
                        ContainerId={this.props.ContainerId}
                        gettableselected={this.gettableselected}
                      />
                    </div>
                    <SubTable
                      ref="subTable"
                      menuType={this.props.menuType}
                      tableId=""
                      dict={this.state.dict}
                      MenuID={this.props.MenuID}
                      setting={setting}
                      columns={columns}
                      data={this.state.data}
                      total={this.state.total}
                      loading={this.state.loading}
                      pagination={setting.laypage !== 'false'}
                      refreshdata={this.refreshbytable}
                      buttonTrigger={this.buttonTrigger}
                      handleTableId={() => {}}
                    />
                  </Col> : null
                }
                {item.chartType !== 'table' ? 
                  <Col span={item.width} key={item.uuid}>
                    <ChartComponent
                      plot={item}
                      data={this.state.data}
                      config={config}
                    />
                  </Col> : null
                }
              </TabPane>
            ))}
          </Tabs> : null}
          {config.expand && config.charts.map(item => {
            if (item.chartType === 'table') {
              return (
                <Col span={item.width || 24} key={item.uuid}>
                  {config.charts.length > 1 ? <p className="chart-table chart-title">{item.title}</p> : null}
                  <div style={{minHeight: '25px'}}>
                    <SubAction
                      type="subtab"
                      triggerBtn={triggerBtn}
                      menuType={this.props.menuType}
                      setting={setting}
                      actions={actions}
                      BID={this.props.BID}
                      dict={this.state.dict}
                      BData={this.props.BData}
                      MenuID={this.props.SupMenuID}
                      permRoles={this.props.permRoles}
                      logcolumns={this.state.logcolumns}
                      refreshdata={this.refreshbyaction}
                      ContainerId={this.props.ContainerId}
                      gettableselected={this.gettableselected}
                    />
                  </div>
                  <SubTable
                    ref="subTable"
                    menuType={this.props.menuType}
                    tableId=""
                    dict={this.state.dict}
                    MenuID={this.props.MenuID}
                    setting={setting}
                    columns={columns}
                    data={this.state.data}
                    total={this.state.total}
                    loading={this.state.loading}
                    pagination={setting.laypage !== 'false'}
                    refreshdata={this.refreshbytable}
                    buttonTrigger={this.buttonTrigger}
                    handleTableId={() => {}}
                  />
                </Col>
              )
            } else {
              return (
                <Col span={item.width} key={item.uuid}>
                  <ChartComponent
                    plot={item}
                    data={this.state.data}
                    config={config}
                  />
                </Col>
              )
            }
          })}
        </div> : null }
        {viewlost ? <NotFount msg={this.state.lostmsg} /> : null}
      </div>
    )