2021-09-01

king

2021-09-01 31ec63f0419895876cbaba99637a884a32d33d0d

 src/tabviews/zshare/cardcomponent/index.jsx

@@ -1,70 +1,121 @@
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 } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import asyncExcelComponent from './asyncButtonComponent'
import '@/assets/css/table.scss'
import './index.scss'

const { TabPane } = Tabs
const NormalButton = asyncComponent(() => import('@/tabviews/zshare/actionList/normalbutton'))
const PopupButton = asyncComponent(() => import('@/tabviews/zshare/actionList/popupbutton'))
const ExcelInButton = asyncExcelComponent(() => import('@/tabviews/zshare/actionList/excelInbutton'))
const ExcelOutButton = asyncExcelComponent(() => import('@/tabviews/zshare/actionList/exceloutbutton'))
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'))

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

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

  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))
  }

  componentDidMount() {
    if (this.insertRef) {
      let _width = this.insertRef.offsetWidth
      let _height = this.insertRef.offsetHeight

      if (this.props.card.header) {
        _height += 46
      }
      if (this.props.card.bottom) {
        _height += 49
      }
      this.setState({
        cardwidth: _width,
        cardheight: _height,
        plusSize: _width > _height ? _height / 2 : _width / 2
      })
    }
  }

  componentDidUpdate() {
    if (this.insertRef) {
      let _width = this.insertRef.offsetWidth
      let _height = this.insertRef.offsetHeight

      if (this.props.card.header) {
        _height += 46
      }
      if (this.props.card.bottom) {
        _height += 49
      }

      if (_height !== this.state.cardheight || _width !== this.state.cardwidth) {
        this.setState({
          cardwidth: _width,
          cardheight: _height,
          plusSize: _width > _height ? _height / 2 : _width / 2
        })
      }
    }
  }

  /**
   * @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 +123,99 @@
      extra: extra
    })
  }
  
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))

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

      return null
    })
  }

  triggerAction = (btn) => {
    this.props.triggerBtn(btn, [this.props.data])
  }

  /**
   * @description 卡片中元素标记设置
   */
  getMark = (record, marks) => {
    const { colMap } = this.props
    let className = ''
@@ -109,7 +244,7 @@
          if (isNaN(originVal) || isNaN(contrastVal)) {
            originVal = ''
          }
        } catch {
        } catch (e) {
          originVal = ''
        }
      }
@@ -117,6 +252,8 @@
      if (originVal === '' || contrastVal === '') return false

      if (mark.match === '=' && originVal === contrastVal) {
        className = mark.color[1]
      } else if (mark.match === '!=' && originVal !== contrastVal) {
        className = mark.color[1]
      } else if (mark.match === 'like' && originVal.indexOf(contrastVal) > -1) {
        className = mark.color[1]
@@ -150,6 +287,9 @@
    }
  }

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

@@ -177,9 +317,9 @@
      }

      return (
        <div className={className}>
        <span className={className}>
          {content}
        </div>
        </span>
      )
    } else if (col.type === 'number') {
      let content = ''
@@ -191,7 +331,7 @@
          if (isNaN(content)) {
            content = ''
          }
        } catch {
        } catch (e) {
          content = ''
        }
      }
@@ -225,13 +365,36 @@
      }

      return (
        <div className={className}>
        <span className={className}>
          {content}
        </div>
        </span>
      )
    } else if (col.type === 'link') {
      let content = col.nameField ? data[col.nameField] : ''
      let _href = data[col.field] || ''

      if (!content && _href) {
        content = _href
      } else if (!_href) {
        content = ''
      }

      if (col.joint === 'true' && _href) {
        let _param = window.btoa('id=' + data[this.props.setting.primaryKey] + '&userid=' + sessionStorage.getItem('UserID') + '&loginuid=' + sessionStorage.getItem('LoginUID'))
        _href += '?' + _param
      }

      return (
        <span>
          {_href ? <a href={_href} target="_blank" rel="noopener noreferrer">{content}</a> : null}
        </span>
      )
    }
  }

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

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

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

@@ -261,8 +427,8 @@
  }

  render() {
    const { card, selectKey, data } = this.props
    const { extra, actions } = this.state
    const { card, selectKey, data, type } = this.props
    const { extra, actions, plusSize } = this.state

    let title = null
    if (card.header) {
@@ -274,8 +440,8 @@
    }

    return (
      <div className={'chart-card-box ' + card.outclass} style={card.outstyle || null} >
        <Card
      <div className={'chart-card-box ' + card.outclass}>
        {type !== 'insert' ? <Card
          size="small"
          className={'chart-card ' + (selectKey === data.key ? 'chart-card-selected' : '')}
          title={title}
@@ -283,25 +449,52 @@
          extra={extra}
          actions={actions}
        >
          <div className={'ant-card-meta' + (card.switch ? ' switch' : '')} onClick={this.switchCard}>
          <div className={'ant-card-meta' + (card.switch ? ' switch' : '')} style={card.flex ? {display: 'flex'} : null} onClick={this.switchCard}>
            {card.avatar ?
              <div className="ant-card-meta-avatar">
                <span className="ant-avatar ant-avatar-circle ant-avatar-image" style={card.avatar.class}>
              <div className="ant-card-meta-avatar" style={card.avatar.class}>
                <span className="ant-avatar ant-avatar-image" style={card.avatar.radius ? {borderRadius: '50%'} : null}>
                  {this.getAvatar()}
                </span>
              </div> : null
            }
            <div className="ant-card-meta-detail" style={card.marginLeft || null}>
            <div className="ant-card-meta-detail" style={card.flex ? {flex: 1} : null}>
              {card.details.map((detail, i) => {
                return (
                  <div className={detail.class} key={i}>
                    {this.getContent(detail.column)}
                  <div className={detail.class} style={detail.style} key={i}>
                    {detail.column ? this.getContent(detail.column) : detail.content}
                  </div>
                )
              })}
            </div>
          </div>
        </Card>
        </Card> : null}
        {type === 'insert' ? <Card
          size="small"
          className="chart-card insert"
          title={card.header ? ' ' : null}
          bordered={card.bordered}
          actions={card.bottom.actions ? [''] : null}
        >
          <div className="ant-card-meta" ref={(ref) => this.insertRef = ref} style={card.flex ? {display: 'flex'} : null}>
            {card.avatar ? <div className="ant-card-meta-avatar" style={card.avatar.class}> </div> : null }
            <div className="ant-card-meta-detail" style={card.flex ? {flex: 1} : null}>
              {card.details.map((detail, i) => (<div className={detail.class} style={detail.style} key={i}></div>))}
            </div>
          </div>
          <div className="mk-card-insert">
            <NormalButton
              BID={this.props.BID}
              Tab={this.props.Tab}
              btn={card.insertAction}
              show={'plus' + plusSize}
              BData={this.props.BData}
              setting={this.props.setting}
              columns={this.props.columns}
              selectedData={[]}
              ContainerId={this.props.ContainerId}
            />
          </div>
        </Card> : null}
      </div>
    )
  }
@@ -309,21 +502,30 @@

class CardChart extends Component {
  static propTpyes = {
    BID: PropTypes.any,               // 主表ID
    BData: PropTypes.any,             // 主表数据
    Tab: PropTypes.any,               // 如果当前元素为标签时，tab为标签信息
    MenuID: PropTypes.string,         // 菜单ID
    config: PropTypes.object,         // 页面配置信息
    columns: 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,
    handleTableId: PropTypes.func
  }

  state = {
    card: null,
    colMap: null,
    selectKey: ''
    selectKey: '',
    actionList: null
  }

  /**
   * @description 卡片初始化，设置卡片的配置信息
   */
  UNSAFE_componentWillMount () {
    const { plot, config } = this.props
    let card = {}
@@ -332,6 +534,8 @@
    let actionMap = new Map() // 按钮组
    let columns = fromJS(config.columns).toJS()
    let actions = fromJS(config.action).toJS()
    let insertAction = null
    let actionList = []

    columns.forEach(col => {
      if (col.field) {
@@ -339,9 +543,20 @@
      }
    })

    if (plot.widthType === 'absolute') {
      plot.cardWidth = 6
    }
    if (plot.avatar && plot.avatar.widthType === 'absolute') {
      card.avatar.width = 32
    }

    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)
      } else if (plot.extraAction && plot.extraAction === item.uuid && ['pop', 'prompt', 'exec'].includes(item.OpenType) && item.Ot === 'notRequired') {
        insertAction = item
      } else if (plot.actions && plot.actions.length > 0 && plot.actions.includes(item.uuid) && (item.OpenType === 'excelOut' || (item.OpenType === 'excelIn' && item.Ot === 'notRequired'))) {
        actionList.push(item)
      }
    })

@@ -362,6 +577,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
@@ -369,7 +585,7 @@
    }

    if (plot.subelement.includes('avatar')) {
      card.avatar = { type: plot.avatar.type }
      card.avatar = { type: plot.avatar.type, display: plot.avatar.display || 'inline' }
      if (card.avatar.type === 'icon' && colMap.get(plot.avatar.field)) {
        let col = fromJS(colMap.get(plot.avatar.field)).toJS()
        let _marks = []
@@ -381,44 +597,50 @@
          card.avatar = null
        } else {
          card.avatar.marks = _marks
          card.avatar.outWidth = plot.avatar.size + 16
          card.avatar.class = {width: plot.avatar.size, fontSize: plot.avatar.size + 'px'}
          card.avatar.width = plot.avatar.size
          card.avatar.class = {width: plot.avatar.size, paddingTop: plot.avatar.size, fontSize: plot.avatar.size + 'px'}
        }
      } else if (card.avatar.type === 'picture' && colMap.get(plot.avatar.field)) {
        card.avatar.field = plot.avatar.field
        card.avatar.outWidth = plot.avatar.width + 16
        card.avatar.width = plot.avatar.width
        card.avatar.radius = plot.avatar.radius !== 'false'

        card.avatar.class = {width: plot.avatar.width}
        let _width = card.avatar.width + '%'

        card.avatar.class = {width: _width, paddingTop: _width}
      }
    }

    if (card.avatar) {
      card.marginLeft = {marginLeft: card.avatar.outWidth}
    }

    card.details = []
    if (plot.details.length > 0) {
      card.details = plot.details.map(item => {
      card.details = plot.details.map(_item => {
        let item = fromJS(_item).toJS()

        if (item.datatype === 'dynamic' && colMap.get(item.field)) {
          item.column = colMap.get(item.field)
        } else {
          item.datatype = 'static'
        }

        let _class = ''
        if (item.bold === 'true') {
          _class = ' ant-card-meta-title'
        } else {
          _class = ' ant-card-meta-description'
        }
      
        if (item.width) {
          _class += ' ' + item.width
        }
        item.fontSize = item.fontSize || 14
        item.height = item.height || 1
        item.fontWeight = item.fontWeight || 'normal'
        item.width = item.width + '%'

        let _style = {}
        _style.fontWeight = item.fontWeight
        _style.width = item.width
        _style.fontSize = item.fontSize + 'px'
        _style.height = item.height * item.fontSize * 1.5

        item.style = _style

        let _class = 'mk-card-detail-item '
        if (item.align) {
          _class += ' ' + item.align
          _class += item.align + ' '
        }

        _class += 'line' + item.height
        item.class = _class

        return item
@@ -441,18 +663,8 @@
      }
    }

    let outclass = ''

    if (plot.widthType === 'ratio' && plot.over !== 'roll') {
      outclass += ' ant-col ant-col-' + plot.cardWidth
    }

    card.outclass = outclass
    card.outclass = ' ant-col ant-col-' + plot.cardWidth
    card.bordered = plot.border !== 'hidden'
    
    if (plot.widthType === 'absolute') {
      card.outstyle = { width: plot.cardWidth }
    }

    if (plot.bgfield && colMap.get(plot.bgfield)) {
      let col = fromJS(colMap.get(plot.bgfield)).toJS()
@@ -468,7 +680,9 @@

    card.switch = plot.switch !== 'false'

    this.setState({card: card, colMap: colMap})
    card.insertAction = insertAction // 添加卡片

    this.setState({card: card, colMap: colMap, actionList: actionList})
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
@@ -482,10 +696,38 @@
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }
  triggerBtn = (btn, data) => {
    this.props.buttonTrigger(btn, data)

  componentDidMount () {
    const { plot } = this.props
    const { card } = this.state

    if (card.avatar) {
      let _flex = false
      let _cardWidth = 300

      let _outWidth = document.body.offsetWidth - 260
      if (this.cardRef.offsetWidth) {
        _outWidth = this.cardRef.offsetWidth
      }
      _cardWidth = Math.floor(_outWidth * plot.cardWidth / 24 - 20)

      if (card.avatar.display !== 'block') {
        if (card.avatar.width < 90) {
          _flex = true
        }
      } else if (card.avatar.width < _cardWidth * 0.9 && card.avatar.display !== 'block') {
        _flex = true
      }

      this.setState({
        card: {...this.state.card, flex: _flex}
      })
    }
  }

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

@@ -497,48 +739,84 @@
  }

  render() {
    const { plot, data, loading } = this.props
    const { card, colMap, selectKey } = this.state

    const { plot, data, loading, BID, BData, Tab, MenuID, config, columns, ContainerId } = this.props
    const { card, colMap, selectKey, actionList } = this.state
    
    return (
      <div className="card-row-box mingke-table">
      <div className="card-row-box mingke-table" ref={(ref) => this.cardRef = ref} style={!plot.title ? {paddingTop: '15px'} : null}>
        {loading ?
          <div className="loading-mask">
            <div className="ant-spin-blur"></div>
            <Spin />
          </div> : null
        }
        {plot.title ? <p className="chart-title">{plot.title}</p> : null}
        {plot.over !== 'roll' && data && data.length > 0 &&
        <div>
          {plot.title ? <p className="chart-title">{plot.title}</p> : null}
          <div style={{float: 'right', marginRight: 10}}>
            {actionList && actionList.map(action => {
              if (action.OpenType === 'excelIn') {
                return (
                  <ExcelInButton
                    key={action.uuid}
                    BID={BID}
                    Tab={Tab}
                    show="icon"
                    btn={action}
                    setting={config.setting}
                  />
                )
              } else {
                return (
                  <ExcelOutButton
                    key={action.uuid}
                    BID={BID}
                    Tab={Tab}
                    show="icon"
                    btn={action}
                    setting={config.setting}
                  />
                )
              }
            })}
          </div>
          <div style={{clear: 'both'}}></div>
        </div>
        {data && data.length > 0 &&
          data.map((item, i) => (
            <CardCell
              key={i}
              BID={BID}
              Tab={Tab}
              card={card}
              data={item}
              BData={BData}
              MenuID={MenuID}
              colMap={colMap}
              columns={columns}
              selectKey={selectKey}
              triggerBtn={this.triggerBtn}
              setting={config.setting}
              ContainerId={ContainerId}
              switchCard={this.switchCard}
            />
          ))
        }
        {plot.over === 'roll' && data && data.length > 0 ?
          <Tabs activeKey="">
            {data.map((item, i) => (
              <TabPane tab={<CardCell
                // key={i}
                card={card}
                data={item}
                colMap={colMap}
                selectKey={selectKey}
                triggerBtn={this.triggerBtn}
                switchCard={this.switchCard}
              />} key={i}></TabPane>
              
            ))}
          </Tabs> : null
        {!loading && card.insertAction ?
          <CardCell
            key="insert"
            type="insert"
            BID={BID}
            Tab={Tab}
            card={card}
            data={{key: 'insert'}}
            BData={BData}
            MenuID={MenuID}
            setting={config.setting}
            ContainerId={ContainerId}
            switchCard={() => {}}
          /> : null
        }
        {!data || data.length === 0 ? <Empty description={false}/> : null}
        {(loading || !card.insertAction) && (!data || data.length === 0) ? <Empty description={false}/> : null}
        <div className="clear"></div>
      </div>
    )
  }