2020-05-12

king

2020-05-12 d21470fe80e265cda2c355f636c3258eb0f56636

 src/tabviews/zshare/normalTable/index.jsx

@@ -1,8 +1,9 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import md5 from 'md5'
import { Table, message, Affix, Button, Typography, Modal } from 'antd'
import { Table, message, Affix, Button, Typography, Modal, Icon } from 'antd'
import './index.scss'
import '@/assets/css/table.scss'

const { Paragraph } = Typography

@@ -17,6 +18,7 @@
    menuType: PropTypes.any,       // 三级菜单类型，HS需特殊处理
    tableId: PropTypes.string,     // 列表Id
    dict: PropTypes.object,        // 字典项
    config: PropTypes.object,      // 页面配置
    MenuID: PropTypes.string,      // 菜单Id
    setting: PropTypes.object,     // 表格全局设置：tableType（表格是否可选、单选、多选）、columnfixed（列固定）、actionfixed（按钮固定）
    pickup: PropTypes.any,         // 数据收起
@@ -28,6 +30,7 @@
    buttonTrigger: PropTypes.func, // 表格中按钮触发操作
    linkTrigger: PropTypes.func,   // 字段透视
    handleTableId: PropTypes.func, // 数据切换
    memberLevel: PropTypes.any,    // 会员等级
    pagination: PropTypes.any      // 数据分页
  }

@@ -37,18 +40,70 @@
    pageSize: 10,         // 每页数据条数
    columns: null,        // 显示列
    imgShow: false,       // 图片放大模态框
    imgSrc: ''            // 图片路径
    imgSrc: '',           // 图片路径
    lineMarks: null,      // 行标记
    colMap: null          // 列信息（全部）
  }

  UNSAFE_componentWillMount () {
    const { columns, menuType } = this.props
    const { menuType, config, memberLevel } = this.props
    let columns = JSON.parse(JSON.stringify(this.props.columns))
    let lineMarks = []
    let _columns = []
    
    let colMap = new Map() // 用于获取字段信息
    let radio = 5          // 虚化比例
    let _format = false    // 是否虚化处理

    if (window.GLOB.dataFormat && menuType !== 'HS' && memberLevel) {
      _format = true

      if (memberLevel >= 30) {
        radio = 20
      } else if (memberLevel >= 20) {
        radio = 10
      }
    }

    config.columns.forEach(col => {
      if (!col.field) return

      colMap.set(col.field, col)
    })

    columns.forEach((item, index) => {
      if (item.hidden === true || item.Hide === 'true') return

      if (window.GLOB.dataFormat && menuType !== 'HS' && !Math.floor(Math.random() * 5)) {
      if (_format && !Math.floor(Math.random() * radio)) {
        item.format = true
      }

      if (item.marks) {
        item.marks = item.marks.filter(mark => {
          let originField = colMap.get(mark.field)
          let contrastField = mark.contrastType === 'dynamic' ? colMap.get(mark.contrastField) : ''

          if (!originField || (mark.contrastType === 'dynamic' && !contrastField)) return false
          if (contrastField && originField.type !== contrastField.type) return false
          if (mark.contrastType === 'static') {
            if (originField.type === 'text' && typeof(mark.contrastValue) === 'number') {
              return false
            } else if (originField.type === 'number' && typeof(mark.contrastValue) === 'string') {
              return false
            } else if (!['number', 'text'].includes(originField.type)) {
              return false
            }
          }

          if (mark.signType === 'line') {
            lineMarks.push(mark)
            return false
          }
          return true
        })

        if (item.marks.length === 0) {
          item.marks = ''
        }
      }

      let cell = {
@@ -74,7 +129,9 @@
    })

    this.setState({
      columns: _columns
      columns: _columns,
      lineMarks: lineMarks,
      colMap: colMap
    })
  }

@@ -107,28 +164,110 @@
    this.props.linkTrigger(tabmenu)
  }

  getMark = (record, marks) => {
    const { colMap } = this.state
    let className = ''
    let isIcon = false
    let position = 'back'
    let icon = ''

    marks.some(mark => {
      let originType = colMap.get(mark.field).type

      let originVal = record.hasOwnProperty(mark.field) ? record[mark.field] : ''
      let contrastVal = ''
      if (mark.contrastType === 'static') {
        contrastVal = mark.contrastValue
      } else {
        contrastVal = record.hasOwnProperty(mark.contrastField) ? record[mark.contrastField] : ''
      }

      if (originType === 'text') {
        originVal = '' + originVal
        contrastVal = '' + contrastVal
      } else if (originType === 'number' && originVal !== '' && contrastVal !== '') {
        try {
          originVal = parseFloat(originVal)
          contrastVal = parseFloat(contrastVal)
          if (isNaN(originVal) || isNaN(contrastVal)) {
            originVal = ''
          }
        } catch {
          originVal = ''
        }
      }

      if (originVal === '' || contrastVal === '') return false

      if (mark.match === '=' && originVal === contrastVal) {
        className = mark.color[1]
      } else if (mark.match === 'like' && originVal.indexOf(contrastVal) > -1) {
        className = mark.color[1]
      } else if (mark.match === '>' && originVal > contrastVal) {
        className = mark.color[1]
      } else if (mark.match === '<' && originVal < contrastVal) {
        className = mark.color[1]
      }

      if (!className) return false

      if (mark.signType === 'font') {
        className = 'font ' + className
      } else if (mark.signType === 'background') {
        className = 'background ' + className
      } else if (mark.signType === 'icon') {
        isIcon = true
        if (mark.position === 'front') {
          position = 'front'
        }
        icon = <Icon className={'font ' + className} type={mark.icon} />
        className = ''
      }

      return true
    })

    return {
      className: className,
      isIcon: isIcon,
      position: position,
      icon: icon
    }
  }

  getContent = (item, record) => {
    if (item.type === 'text') {
      let content = ''
      let match = false
      let className = ''
      if (item.field && record.hasOwnProperty(item.field)) {
        content = `${record[item.field]}`
      }
      
      content = content ? (item.prefix || '') + content + (item.postfix || '') : ''

      if (content && item.matchVal && content.indexOf(item.matchVal) > 0) {
        match = true
      if (item.marks) {
        let result = this.getMark(record, item.marks)

        if (result.className) {
          className = result.className
        } else if (result.isIcon) {
          if (result.position === 'front') {
            content = <span>{result.icon} {content}</span>
          } else {
            content = <span>{content} {result.icon}</span>
          }
        }
      }

      content = (item.prefix || '') + content + (item.postfix || '')

      if (item.format) {
        className = ''
        content = md5(content)
      }

      if (item.linkThdMenu) {
        return (
          <div className={match ? item.color : ''}>
            <div className="background link-menu" onDoubleClick={() => this.triggerLink(item, record)}></div>
          <div className={className}>
            <div className="baseboard link-menu" onDoubleClick={() => this.triggerLink(item, record)}></div>
            <div className="content link-menu" style={{ minWidth: (item.Width || 120) + 'px' }} onDoubleClick={() => this.triggerLink(item, record)}>
              {content}
            </div>
@@ -136,8 +275,8 @@
        )
      } else {
        return (
          <div className={match ? item.color : ''}>
            <div className="background"></div>
          <div className={className}>
            <div className="baseboard"></div>
            <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}>
              {content}
            </div>
@@ -146,7 +285,7 @@
      }
    } else if (item.type === 'number') {
      let content = ''
      let match = false
      let className = ''

      if (item.field && record.hasOwnProperty(item.field)) {
        try {
@@ -160,26 +299,6 @@
      }

      if (content !== '') {
        if (item.match && item.matchVal) {
          if (item.match === '>') {
            if (content > item.matchVal) {
              match = true
            }
          } else if (item.match === '<') {
            if (content < item.matchVal) {
              match = true
            }
          } else if (item.match === '>=') {
            if (content >= item.matchVal) {
              match = true
            }
          } else if (item.match === '<=') {
            if (content <= item.matchVal) {
              match = true
            }
          }
        }

        if (item.format === 'percent') {
          content = content * 100
        }
@@ -193,14 +312,29 @@
        content = (item.prefix || '') + content + (item.postfix || '')
      }

      if (item.marks) {
        let result = this.getMark(record, item.marks)

        if (result.className) {
          className = result.className
        } else if (result.isIcon) {
          if (result.position === 'front') {
            content = <span>{result.icon} {content}</span>
          } else {
            content = <span>{content} {result.icon}</span>
          }
        }
      }

      if (item.format) {
        className = ''
        content = md5(content)
      }

      if (item.linkThdMenu) {
        return (
          <div className={match ? item.color : ''}>
            <div className="background link-menu" onDoubleClick={() => this.triggerLink(item, record)}></div>
          <div className={className}>
            <div className="baseboard link-menu" onDoubleClick={() => this.triggerLink(item, record)}></div>
            <div className="content link-menu" style={{ minWidth: (item.Width || 120) + 'px' }} onDoubleClick={() => this.triggerLink(item, record)}>
              {content}
            </div>
@@ -208,8 +342,8 @@
        )
      } else {
        return (
          <div className={match ? item.color : ''}>
            <div className={'background'}></div>
          <div className={className}>
            <div className="baseboard"></div>
            <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}>
              {content}
            </div>
@@ -238,24 +372,20 @@
      )
    } else if (item.type === 'textarea') {
      let content = ''
      let match = false

      if (item.field && record.hasOwnProperty(item.field)) {
        content = `${record[item.field]}`
      }

      if (content && item.matchVal && content.indexOf(item.matchVal) > 0) {
        match = true
      }

      content = (item.prefix || '') + content + (item.postfix || '')
      content = content ? (item.prefix || '') + content + (item.postfix || '') : ''

      if (item.format) {
        content = md5(content)
      }

      return (
        <div className={match ? item.color : ''}>
          <div className="background"></div>
        <div>
          <div className="baseboard"></div>
          <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}>
            {content ? <Paragraph copyable ellipsis={{ rows: 3, expandable: true }}>{content}</Paragraph> : null }
          </div>
@@ -308,6 +438,20 @@
            content = (col.prefix || '') + content + (col.postfix || '')
          }

          if (col.marks) {
            let result = this.getMark(record, col.marks)
    
            if (result.className && result.className.indexOf('font') > -1) {
              content = <span className={result.className}>{content}</span>
            } else if (result.isIcon) {
              if (result.position === 'front') {
                content = <span>{result.icon} {content}</span>
              } else {
                content = <span>{content} {result.icon}</span>
              }
            }
          }

          if (item.format) {
            content = md5(content)
          }
@@ -324,6 +468,32 @@
          photos.forEach(photo => {
            images.push({url: photo, scale: col.scale === 'true', maxHeight: col.maxHeight || 128})
          })
        } else if (col.type === 'text') {
          let content = record[col.field]

          if (content !== '') {
            content = (col.prefix || '') + record[col.field] + (col.postfix || '')
          }

          if (col.marks) {
            let result = this.getMark(record, col.marks)
    
            if (result.className && result.className.indexOf('font') > -1) {
              content = <span className={result.className}>{content}</span>
            } else if (result.isIcon) {
              if (result.position === 'front') {
                content = <span>{result.icon} {content}</span>
              } else {
                content = <span>{content} {result.icon}</span>
              }
            }
          }

          if (item.format) {
            content = md5(content)
          }

          contents.push(content)
        } else {
          let content = record[col.field]

@@ -528,7 +698,7 @@

  render() {
    const { setting, pickup, pagination } = this.props
    let { selectedRowKeys } = this.state
    const { selectedRowKeys, lineMarks, colMap } = this.state

    // 设置表格选择属性：单选、多选、不可选
    let rowSelection = null
@@ -573,10 +743,9 @@
        showTotal: (total, range) => `${range[0]}-${range[1]} ${this.props.dict['main.pagination.of']} ${total} ${this.props.dict['main.pagination.items']}`
      }
    }
    // rowClassName={(record) => record.$className || ''}

    return (
      <div className="normal-data-table">
      <div className="normal-data-table mingke-table">
        {offset && <Affix offsetTop={offset} className="fix-header">
          <Table
            size="middle"
@@ -598,6 +767,55 @@
          rowSelection={rowSelection}
          columns={this.state.columns}
          dataSource={_data}
          rowClassName={(record) => {
            if (lineMarks.length === 0) return ''

            let className = ''

            lineMarks.some(mark => {
              let originType = colMap.get(mark.field).type

              let originVal = record.hasOwnProperty(mark.field) ? record[mark.field] : ''
              let contrastVal = ''
              if (mark.contrastType === 'static') {
                contrastVal = mark.contrastValue
              } else {
                contrastVal = record.hasOwnProperty(mark.contrastField) ? record[mark.contrastField] : ''
              }

              if (originType === 'text') {
                originVal = '' + originVal
                contrastVal = '' + contrastVal
              } else if (originType === 'number' && originVal !== '' && contrastVal !== '') {
                try {
                  originVal = parseFloat(originVal)
                  contrastVal = parseFloat(contrastVal)
                  if (isNaN(originVal) || isNaN(contrastVal)) {
                    originVal = ''
                  }
                } catch {
                  originVal = ''
                }
              }

              if (originVal === '' || contrastVal === '') return false

              if (mark.match === '=' && originVal === contrastVal) {
                className = 'background ' + mark.color[1]
              } else if (mark.match === 'like' && originVal.indexOf(contrastVal) > -1) {
                className = 'background ' + mark.color[1]
              } else if (mark.match === '>' && originVal > contrastVal) {
                className = 'background ' + mark.color[1]
              } else if (mark.match === '<' && originVal < contrastVal) {
                className = 'background ' + mark.color[1]
              }

              if (!className) return false
              return true
            })

            return className
          }}
          loading={this.props.loading}
          scroll={{ x: '100%', y: false }}
          onRow={(record, index) => {