2020-04-03

king

2020-04-03 4c6bdfe1f3557e49a315c1564bcb6164c0bc7faa

 src/tabviews/zshare/normalTable/index.jsx

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

const { Paragraph } = Typography
@@ -18,6 +18,7 @@
    loading: PropTypes.bool,       // 表格加载中
    refreshdata: PropTypes.func,   // 表格中排序列、页码的变化时刷新
    buttonTrigger: PropTypes.func, // 表格中按钮触发操作
    linkTrigger: PropTypes.func,   // 字段透视
    handleTableId: PropTypes.func  // 数据切换
  }

@@ -25,7 +26,9 @@
    selectedRowKeys: [],  // 表格中选中行
    pageIndex: 1,         // 初始页面索引
    pageSize: 10,         // 每页数据条数
    columns: null         // 显示列
    columns: null,        // 显示列
    imgShow: false,       // 图片放大模态框
    imgSrc: ''            // 图片路径
  }

  UNSAFE_componentWillMount () {
@@ -38,7 +41,7 @@
      let cell = {
        align: item.Align,
        dataIndex: item.field || item.uuid,
        title: item.label,
        title: <span>{item.label}{item.linkThdMenu ? <Icon type="link"/> : null}</span>,
        sorter: item.field && item.IsSort === 'true',
        width: item.Width || 120,
        render: (text, record) => {
@@ -62,6 +65,35 @@
    })
  }

  triggerLink = (item, record) => {
    let tabmenu = item.linkThdMenu
    let iframes = ['Main/Index', 'bda/rdt', 'Home/rdt']

    if (tabmenu.LinkUrl === 'CommonTable') {
      tabmenu.type = 'CommonTable'
    } else if (tabmenu.LinkUrl === 'DataManage') {
      tabmenu.type = 'DataManage'
    } else if (tabmenu.LinkUrl && iframes.includes(tabmenu.LinkUrl.split('?')[0])) {
      tabmenu.type = 'iframe'
    }

    if (tabmenu.type !== 'iframe') {
      try {
        tabmenu.PageParam = JSON.parse(tabmenu.PageParam)
      } catch (e) {
        tabmenu.PageParam = {}
      }
      tabmenu.type = tabmenu.PageParam.Template || tabmenu.type
    }

    tabmenu.param = {
      searchkey: item.field,
      searchval: record[item.field] || ''
    }

    this.props.linkTrigger(tabmenu)
  }

  getContent = (item, record) => {
    if (item.type === 'text') {
      let content = ''
@@ -76,14 +108,25 @@

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

      return (
        <div className={match ? item.color : ''}>
          <div className="background"></div>
          <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}>
            {content}
      if (item.linkThdMenu) {
        return (
          <div className={match ? item.color : ''}>
            <div className="background 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>
          </div>
        </div>
      )
        )
      } else {
        return (
          <div className={match ? item.color : ''}>
            <div className="background"></div>
            <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}>
              {content}
            </div>
          </div>
        )
      }
    } else if (item.type === 'number') {
      let content = ''
      let match = false
@@ -118,14 +161,25 @@

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

      return (
        <div className={match ? item.color : ''}>
          <div className={'background'}></div>
          <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}>
            {content}
      if (item.linkThdMenu) {
        return (
          <div className={match ? item.color : ''}>
            <div className="background 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>
          </div>
        </div>
      )
        )
      } else {
        return (
          <div className={match ? item.color : ''}>
            <div className={'background'}></div>
            <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}>
              {content}
            </div>
          </div>
        )
      }
    } else if (item.type === 'picture') {
      let photos = ''
      if (item.field && record.hasOwnProperty(item.field)) {
@@ -136,7 +190,11 @@
      return (
        <div className="picture-col" style={{ minWidth: (item.Width || 120) + 'px' }}>
          {photos && photos.map((url, i) => {
            return <img key={`${i}`} src={url} alt=""/>
            if (item.scale === 'true') {
              return <img className="image-scale" onClick={this.imgScale} key={`${i}`} src={url} alt=""/>
            } else {
              return <img key={`${i}`} src={url} alt=""/>
            }
          })}
        </div>
      )
@@ -286,6 +344,20 @@
          </div>
        </div>
      )
    }
  }

  imgScaleClose = () => {
    this.setState({
     imgShow: false
    })
  }
  imgScale = (e) => {
    if (e.target.nodeName === 'IMG') {
      this.setState({
        imgShow: true,
        imgSrc: e.target.src
      })
    }
  }

@@ -449,6 +521,18 @@
            showTotal: (total, range) => `${range[0]}-${range[1]} ${this.props.dict['main.pagination.of']} ${total} ${this.props.dict['main.pagination.items']}`
          }}
        />
        <Modal
          className="image-scale-modal"
          visible={this.state.imgShow}
          width="70vw"
          maskClosable={true}
          onCancel={this.imgScaleClose}
          title={this.props.dict['main.form.picture.check']}
          footer={[<span key="close" onClick={this.imgScaleClose}>{this.props.dict['main.close']}</span>]}
          destroyOnClose
        >
         <img style={{maxWidth:'100%'}} src={this.state.imgSrc} alt="" />
        </Modal>
      </div>
    )
  }