2020-06-12

king

2020-06-12 89e7167a83e0d8409ca87698e4c08651a37cc26e

 src/tabviews/zshare/cardcomponent/index.jsx

@@ -1,70 +1,75 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Icon, Card, Dropdown, Menu, Spin, Empty, Tabs } from 'antd'
import { Icon, Card, Spin, Empty, Tabs } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const NormalButton = asyncComponent(() => import('@/tabviews/zshare/actionList/normalbutton'))
const PopupButton = asyncComponent(() => import('@/tabviews/zshare/actionList/popupbutton'))
const TabButton = asyncComponent(() => import('@/tabviews/zshare/actionList/tabbutton'))
const NewPageButton = asyncComponent(() => import('@/tabviews/zshare/actionList/newpagebutton'))
const ChangeUserButton = asyncComponent(() => import('@/tabviews/zshare/actionList/changeuserbutton'))
const PrintButton = asyncComponent(() => import('@/tabviews/zshare/actionList/printbutton'))

const { TabPane } = Tabs

class CardCell extends Component {
  static propTpyes = {
    card: PropTypes.object,
    data: PropTypes.object,
    selectKey: PropTypes.string,
    colMap: PropTypes.any,
    triggerBtn: PropTypes.func,
    switchCard: PropTypes.func
    BID: PropTypes.any,               // 主表ID
    BData: PropTypes.any,             // 主表数据
    Tab: PropTypes.any,               // 如果当前元素为标签时，tab为标签信息
    MenuID: PropTypes.string,         // 菜单ID
    setting: PropTypes.object,        // 页面设定
    logcolumns: PropTypes.array,      // 字段列
    card: PropTypes.object,           // 卡片设置信息
    data: PropTypes.object,           // 卡片数据
    selectKey: PropTypes.string,      // 选择卡片的序号
    colMap: PropTypes.any,            // 显示列信息，用于设置标记
    refreshdata: PropTypes.func,      // 按钮操作后数据刷新
    switchCard: PropTypes.func        // 卡片切换
  }

  state = {
    card: null,
    extra: null,
    actions: null
    extra: null,    // 顶部按钮信息
    actions: null   // 底部按钮行
  }

  UNSAFE_componentWillMount () {
    this.getCardActions()
  }

  /**
   * @description 数据切换，重新绑定按钮数据
   */
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!is(fromJS(this.props.data), fromJS(nextProps.data))) {
      this.setState({}, () => {
        this.getCardActions()
      })
    }
  }
  
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }

  /**
   * @description 获取顶部及按钮行的按钮集
   */
  getCardActions = () => {
    const { card } = this.props
    
    let extra = null
    if (card.header && card.header.actions) {
      let actions = card.header.actions.map(item => {
        let _action = null
        if (card.header.show === 'icon') {
          _action = <span className="action-cell" onClick={() => this.triggerAction(item)} key={item.uuid}><Icon type={item.icon || 'dash'} /></span>
        } else if (card.bottom.show === 'text') {
          _action = <span className="action-cell" onClick={() => this.triggerAction(item)} key={item.uuid}>{item.label}</span>
        } else {
          _action = <span className="action-cell" onClick={() => this.triggerAction(item)} key={item.uuid}><Icon type={item.icon || 'dash'} /> {item.label}</span>
        }

        return _action
      })
      if (actions.length === 1) {
        extra = actions[0]
      } else {
        extra = <Dropdown overlay={
          <Menu>{actions.map((item, i) => <Menu.Item key={i}> {item} </Menu.Item>)}</Menu>
        } placement="bottomRight">
          Action
        </Dropdown>
      }
      let actions = this.getActionList(card.header.actions, card.header.show)
      extra = actions[0]
    }

    let _actions = null
    if (card.bottom && card.bottom.actions) {
      _actions = card.bottom.actions.map(item => {
        let _action = null
        if (card.bottom.show === 'icon') {
          _action = <span className="action-cell" onClick={() => this.triggerAction(item)} key={item.uuid}><Icon type={item.icon || 'dash'} /></span>
        } else if (card.bottom.show === 'text') {
          _action = <span className="action-cell" onClick={() => this.triggerAction(item)} key={item.uuid}>{item.label}</span>
        } else {
          _action = <span className="action-cell" onClick={() => this.triggerAction(item)} key={item.uuid}><Icon type={item.icon || 'dash'} /> {item.label}</span>
        }

        return _action
      })
      _actions = this.getActionList(card.bottom.actions, card.bottom.show)
    }

    this.setState({
@@ -72,15 +77,113 @@
      extra: extra
    })
  }
  
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))

  /**
   * @description 获取按钮元素
   */
  getActionList = (actions, show) => {
    const { BID, BData, Tab, setting, logcolumns, ContainerId, data, MenuID } = this.props
    
    return actions.map(item => {
      if (['exec', 'prompt', 'pop'].includes(item.OpenType)) {
        return (
          <NormalButton
            key={item.uuid}
            BID={BID}
            Tab={Tab}
            btn={item}
            show={show}
            BData={BData}
            setting={setting}
            columns={logcolumns}
            selectedData={[data]}
            ContainerId={ContainerId}
            updateStatus={this.updateStatus}
          />
        )
      } else if (item.OpenType === 'popview') {
        return (
          <PopupButton
            key={item.uuid}
            BID={BID}
            Tab={Tab}
            btn={item}
            show={show}
            BData={BData}
            setting={setting}
            selectedData={[data]}
            updateStatus={this.updateStatus}
          />
        )
      } else if (item.OpenType === 'tab' || item.OpenType === 'blank') {
        return (
          <TabButton
            key={item.uuid}
            btn={item}
            show={show}
            MenuID={MenuID}
            setting={setting}
            selectedData={[data]}
            updateStatus={this.updateStatus}
          />
        )
      } else if (item.OpenType === 'innerpage' || item.OpenType === 'outerpage') {
        return (
          <NewPageButton
            key={item.uuid}
            btn={item}
            show={show}
            setting={setting}
            selectedData={[data]}
          />
        )
      } else if (item.OpenType === 'funcbutton') {
        if (item.funcType === 'changeuser') {
          return (
            <ChangeUserButton
              key={item.uuid}
              BID={BID}
              btn={item}
              show={show}
              setting={setting}
              selectedData={[data]}
              updateStatus={this.updateStatus}
            />
          )
        } else if (item.funcType === 'print') {
          return (
            <PrintButton
              key={item.uuid}
              BID={BID}
              Tab={Tab}
              btn={item}
              show={show}
              BData={BData}
              setting={setting}
              selectedData={[data]}
              ContainerId={ContainerId}
              updateStatus={this.updateStatus}
            />
          )
        }
      }

      return null
    })
  }

  triggerAction = (btn) => {
    this.props.triggerBtn(btn, [this.props.data])
  /**
   * @description 操作完成后，数据刷新
   */
  updateStatus = (type, positon) => {
    if (type === 'refresh') {
      this.props.refreshdata(positon)
    }
  }

  /**
   * @description 卡片中元素标记设置
   */
  getMark = (record, marks) => {
    const { colMap } = this.props
    let className = ''
@@ -150,6 +253,9 @@
    }
  }

  /**
   * @description 获取卡片内容
   */
  getContent = (col) => {
    const { data } = this.props

@@ -232,6 +338,9 @@
    }
  }

  /**
   * @description 获取卡片中图片或图标设置
   */
  getAvatar = () => {
    const { card, data } = this.props

@@ -252,6 +361,9 @@
    }
  }

  /**
   * @description 卡片点击切换事件
   */
  switchCard = () => {
    const { card, data } = this.props

@@ -309,12 +421,18 @@

class CardChart extends Component {
  static propTpyes = {
    BID: PropTypes.any,               // 主表ID
    BData: PropTypes.any,             // 主表数据
    Tab: PropTypes.any,               // 如果当前元素为标签时，tab为标签信息
    MenuID: PropTypes.string,         // 菜单ID
    config: PropTypes.object,         // 页面配置信息
    logcolumns: PropTypes.array,      // 显示列
    ContainerId: PropTypes.any,       // tab页面ID，用于弹窗控制
    plot: PropTypes.object,
    config: PropTypes.object,
    tableId: PropTypes.string,
    loading: PropTypes.bool,
    data: PropTypes.array,
    buttonTrigger: PropTypes.func,
    refreshdata: PropTypes.func,
    handleTableId: PropTypes.func
  }

@@ -324,6 +442,9 @@
    selectKey: ''
  }

  /**
   * @description 卡片初始化，设置卡片的配置信息
   */
  UNSAFE_componentWillMount () {
    const { plot, config } = this.props
    let card = {}
@@ -340,7 +461,7 @@
    })

    actions.forEach(item => {
      if (item.Ot && item.Ot !== 'notRequired' && !['excelIn', 'excelOut'].includes(item.OpenType)) {
      if ((item.Ot && item.Ot !== 'notRequired' && !['excelIn', 'excelOut'].includes(item.OpenType)) || item.funcType === 'changeuser') {
        actionMap.set(item.uuid, item)
      }
    })
@@ -362,6 +483,7 @@
          if (!actionMap.get(item.value)) return
          card.header.actions.push(actionMap.get(item.value))
        })
        card.header.actions.length = 1
      }
      if (card.header.actions.length === 0) {
        card.header.actions = null
@@ -482,10 +604,10 @@
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }
  triggerBtn = (btn, data) => {
    this.props.buttonTrigger(btn, data)
  }

  /**
   * @description 卡片切换
   */
  switchCard = (data) => {
    const { config } = this.props

@@ -497,7 +619,7 @@
  }

  render() {
    const { plot, data, loading } = this.props
    const { plot, data, loading, BID, BData, Tab, MenuID, config, logcolumns, ContainerId } = this.props
    const { card, colMap, selectKey } = this.state

    return (
@@ -513,12 +635,19 @@
          data.map((item, i) => (
            <CardCell
              key={i}
              BID={BID}
              Tab={Tab}
              card={card}
              data={item}
              BData={BData}
              MenuID={MenuID}
              colMap={colMap}
              selectKey={selectKey}
              triggerBtn={this.triggerBtn}
              logcolumns={logcolumns}
              setting={config.setting}
              ContainerId={ContainerId}
              switchCard={this.switchCard}
              refreshdata={this.props.refreshdata}
            />
          ))
        }
@@ -526,12 +655,19 @@
          <Tabs activeKey="">
            {data.map((item, i) => (
              <TabPane tab={<CardCell
                BID={BID}
                Tab={Tab}
                card={card}
                data={item}
                BData={BData}
                MenuID={MenuID}
                colMap={colMap}
                selectKey={selectKey}
                triggerBtn={this.triggerBtn}
                logcolumns={logcolumns}
                setting={config.setting}
                ContainerId={ContainerId}
                switchCard={this.switchCard}
                refreshdata={this.props.refreshdata}
              />} key={i}></TabPane>
              
            ))}