2020-11-10

king

2020-11-10 a9ac16fecc0cf9bc66dfaefe4e9b35fa3c722812

 src/tabviews/custom/components/card/cardcellList/index.jsx

@@ -1,19 +1,36 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Button, Icon, Col, Tooltip } from 'antd'
import { Icon, Col, Tooltip, notification } from 'antd'
import moment from 'moment'

import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import asyncComponent from './asyncButtonComponent'
import asyncElementComponent from '@/utils/asyncComponent'

import './index.scss'

const NormalButton = asyncComponent(() => import('@/tabviews/zshare/actionList/normalbutton'))
const ExcelInButton = asyncComponent(() => import('@/tabviews/zshare/actionList/excelInbutton'))
const ExcelOutButton = asyncComponent(() => import('@/tabviews/zshare/actionList/exceloutbutton'))
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 BarCode = asyncElementComponent(() => import('@/components/barcode'))
const QrCode = asyncElementComponent(() => import('@/components/qrcode'))

class CardCellComponent extends Component {
  static propTpyes = {
    BID: PropTypes.any,              // 上级ID
    seq: PropTypes.any,              // 序号
    cards: PropTypes.object,         // 菜单配置信息
    cardCell: PropTypes.object,
    data: PropTypes.object,
    elements: PropTypes.array,       // 元素集
    updateStatus: PropTypes.func,    // 状态更新
  }

  state = {
@@ -34,7 +51,7 @@
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
    return !is(fromJS(this.state), fromJS(nextState)) || !is(fromJS(this.props), fromJS(nextProps))
  }

  /**
@@ -46,10 +63,48 @@
    }
  }

  getContent = (card) => {
    const { data } = this.props
  openNewView = (card, url) => {
    const { cardCell, data, cards } = this.props
    if (!url) {
      notification.warning({
        top: 92,
        message: '地址链接不可为空！',
        duration: 5
      })
      return
    }
    let Id = ''
    let con = '?'

    if (card.eleType === 'text' || card.eleType === 'number') {
    if (/\?/ig.test(url)) {
      con = '&'
    }

    if (cards.subtype === 'propcard') {
      Id = cardCell.setting.primaryId || ''
    } else {
      Id = data[cards.setting.primaryKey] || ''
    }
    
    if (card.joint === 'true') {
      url = url + `${con}id=${Id}&appkey=${window.GLOB.appkey}&userid=${sessionStorage.getItem('UserID')}&LoginUID=${sessionStorage.getItem('LoginUID') || ''}`
    }

    window.open(url)
  }

  getContent = (card) => {
    const { data, BID, cards, seq } = this.props

    if (card.eleType === 'sequence') {
      return (
        <Col key={card.uuid} span={card.width}>
          <div style={card.style}>
            <div className={'ant-mk-text'}>{seq}</div>
          </div>
        </Col>
      )
    } else if (card.eleType === 'text') {
      let val = ''

      if (card.datatype === 'static') {
@@ -58,13 +113,77 @@
        val = data[card.field]
      }

      if (val !== '' && card.format) {
        if (card.format === 'YYYY-MM-DD' && /^[1-9]\d{3}(-|\/)(0[1-9]|1[0-2])(-|\/)(0[1-9]|[1-2][0-9]|3[0-1])/.test(val)) {
          val = `${val.substr(0, 4)}-${val.substr(5, 2)}-${val.substr(8, 2)}`
        }
      }

      if (val !== '') {
        val = `${card.prefix || ''}${val}${card.postfix || ''}`
      }

      return (
        <Col key={card.uuid} span={card.width}>
          <div style={card.style}>{val}</div>
          <div style={card.style}>
            <div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>{val}</div>
          </div>
        </Col>
      )
    } else if (card.eleType === 'number') {
      let val = ''

      if (card.datatype === 'static') {
        val = card.value
      } else if (data.hasOwnProperty(card.field)) {
        val = data[card.field]
      }

      if (val !== '' && typeof(val) === 'number') {
        if (card.format === 'percent') {
          val = val * 100
        }

        if (card.col && card.col.type === 'number') {
          val = val.toFixed(card.col.decimal || 0)
        } else {
          val = '' + val
        }
        
        if (card.format === 'thdSeparator') {
          val = val.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
        }
      }

      if (val !== '') {
        val = `${card.prefix || ''}${val}${card.postfix || ''}`
      }

      return (
        <Col key={card.uuid} span={card.width}>
          <div style={card.style}>
            <div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>{val}</div>
          </div>
        </Col>
      )
    } else if (card.eleType === 'link') {
      let url = ''

      if (card.datatype === 'static') {
        url = card.value
      } else if (data.hasOwnProperty(card.field)) {
        url = data[card.field]
      }

      let val = card.label || url

      return (
        <Col key={card.uuid} span={card.width}>
          <div style={card.style}>
            <div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>
              <span style={{cursor: 'pointer'}} onClick={(e) => {e.stopPropagation(); this.openNewView(card, url)}}>{val}</span>
            </div>
          </div>
        </Col>
      )
    } else if (card.eleType === 'icon') {
@@ -151,44 +270,188 @@
        </Col>
      )
    } else if (card.eleType === 'splitline') {
      let _borderWidth = card.borderWidth === undefined ? 1 : card.borderWidth
      return (
        <Col key={card.uuid} span={card.width}>
          <div style={card.style}>
            <div className="ant-mk-splitline" style={{backgroundColor: card.color}}></div>
            <div className="ant-mk-splitline" style={{borderColor: card.color, borderWidth: _borderWidth}}></div>
          </div>
        </Col>
      )
    } else if (card.eleType === 'barcode') {
      let val = ''

      if (card.datatype === 'static') {
        val = card.value
      } else if (data.hasOwnProperty(card.field)) {
        val = data[card.field]
      }

      return (
        <Col key={card.uuid} span={card.width}>
          <div style={card.style}>
            <div style={{height: card.innerHeight || 25}}>
              {val ? <BarCode card={card} value={val}/> : null}
            </div>
          </div>
        </Col>
      )
    } else if (card.eleType === 'qrcode') {
      let val = ''

      if (card.datatype === 'static') {
        val = card.value
      } else if (data.hasOwnProperty(card.field)) {
        val = data[card.field]
      }

      return (
        <Col key={card.uuid} span={card.width}>
          <div style={card.style}>
            <div style={{minHeight: card.qrWidth || 50}}>
              {val ? <QrCode card={card} value={val}/> : null}
            </div>
          </div>
        </Col>
      )
    } else if (card.eleType === 'currentDate') {
      return (
        <Col key={card.uuid} span={card.width}>
          <div className="ant-mk-date" style={card.style}>
            {card.dateFormat ? `${card.prefix || ''}${moment().format(card.dateFormat)}${card.postfix || ''}` : null}
          </div>
        </Col>
      )
    } else if (card.eleType === 'button') {
      if (card.show === 'icon') {
      if (['exec', 'prompt', 'pop'].includes(card.OpenType)) {
        return (
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <Button className={'mk-link mk-' + card.class} style={card.btnstyle} type="link"><Icon type={card.icon}/></Button>
            </div>
          </Col>
        )
      } else if (card.show === 'link') {
        return (
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <Button className={'mk-link mk-' + card.class} style={card.btnstyle} type="link">{card.label}{card.icon ? <Icon type={card.icon}/> : null}</Button>
            </div>
          </Col>
        )
      } else {
        return (
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <Button
                className={'mk-btn mk-' + card.class}
                icon={card.icon}
              <NormalButton
                BID={BID}
                btn={card}
                show={card.show}
                style={card.btnstyle}
              >
                {card.label}
              </Button>
                setting={cards.setting}
                columns={cards.columns}
                selectedData={[data]}
                updateStatus={this.props.updateStatus}
              />
            </div>
          </Col>
        )
      } else if (card.OpenType === 'excelIn') {
        return (
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <ExcelInButton
                BID={BID}
                btn={card}
                show={card.show}
                style={card.btnstyle}
                setting={cards.setting}
                selectedData={[data]}
                updateStatus={this.props.updateStatus}
              />
            </div>
          </Col>
        )
      } else if (card.OpenType === 'excelOut') {
        return (
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <ExcelOutButton
                BID={BID}
                btn={card}
                show={card.show}
                style={card.btnstyle}
                setting={cards.setting}
                // getexceloutparam={getexceloutparam}
                updateStatus={this.props.updateStatus}
              />
            </div>
          </Col>
        )
      } else if (card.OpenType === 'popview') {
        return (
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <PopupButton
                BID={BID}
                btn={card}
                show={card.show}
                style={card.btnstyle}
                setting={cards.setting}
                selectedData={[data]}
                updateStatus={this.props.updateStatus}
              />
            </div>
          </Col>
        )
      } else if (card.OpenType === 'tab') {
        return (
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <TabButton
                btn={card}
                show={card.show}
                style={card.btnstyle}
                setting={cards.setting}
                selectedData={[data]}
                updateStatus={this.props.updateStatus}
              />
            </div>
          </Col>
        )
      } else if (card.OpenType === 'innerpage') {
        return (
          <Col key={card.uuid} span={card.width}>
            <div style={card.style}>
              <NewPageButton
                btn={card}
                show={card.show}
                style={card.btnstyle}
                setting={cards.setting}
                selectedData={[data]}
                updateStatus={this.props.updateStatus}
              />
            </div>
          </Col>
        )
      } else if (card.OpenType === 'funcbutton') {
        if (card.funcType === 'changeuser') {
          return (
            <Col key={card.uuid} span={card.width}>
              <div style={card.style}>
                <ChangeUserButton
                  BID={BID}
                  btn={card}
                  show={card.show}
                  style={card.btnstyle}
                  setting={cards.setting}
                  selectedData={[data]}
                  updateStatus={this.props.updateStatus}
                />
              </div>
            </Col>
          )
        } else if (card.funcType === 'print') {
          return (
            <Col key={card.uuid} span={card.width}>
              <div style={card.style}>
                <PrintButton
                  BID={BID}
                  btn={card}
                  show={card.show}
                  style={card.btnstyle}
                  setting={cards.setting}
                  selectedData={[data]}
                  updateStatus={this.props.updateStatus}
                />
              </div>
            </Col>
          )
        }
      }
    }
  }