2021-11-15

king

2021-11-15 ded0a522a7747fb841719c13c8c35f13cf5cda4c

 src/tabviews/custom/components/share/normalTable/index.jsx

@@ -3,9 +3,8 @@
import md5 from 'md5'
import { connect } from 'react-redux'
import { is, fromJS } from 'immutable'
import { Table, Typography, Icon, Col, Switch } from 'antd'
import { Table, Typography, Icon, Col, Switch, message } from 'antd'

import { modifyTabview } from '@/store/action'
import asyncComponent from '@/utils/asyncComponent'
import MKEmitter from '@/utils/events.js'
import zhCN from '@/locales/zh-CN/main.js'
@@ -15,7 +14,11 @@

const { Paragraph } = Typography
const CardCellComponent = asyncComponent(() => import('@/tabviews/custom/components/card/cardcellList'))

const PicRadio = {
  '4:3': '75%', '3:2': '66.67%', '16:9': '56.25%', '2:1': '50%', '3:1': '33.33%', '4:1': '25%',
  '5:1': '20%', '6:1': '16.67%', '7:1': '14.29%', '8:1': '12.5%', '9:1': '11.11%',
  '10:1': '10%', '3:4': '133.33%', '2:3': '150%', '9:16': '177.78%'
}
class BodyRow extends React.Component {
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props.data), fromJS(nextProps.data)) || !is(fromJS(this.props.className), fromJS(nextProps.className))
@@ -47,7 +50,7 @@
          try {
            originVal = parseFloat(originVal)
            contrastVal = parseFloat(contrastVal)
          } catch {
          } catch (e) {
            originVal = NaN
          }
  
@@ -58,7 +61,7 @@
          try {
            originVal = parseFloat(originVal)
            contrastVal = parseFloat(contrastVal)
          } catch {
          } catch (e) {
            originVal = NaN
          }
  
@@ -116,7 +119,7 @@
        try {
          originVal = parseFloat(originVal)
          contrastVal = parseFloat(contrastVal)
        } catch {
        } catch (e) {
          originVal = NaN
        }

@@ -127,7 +130,7 @@
        try {
          originVal = parseFloat(originVal)
          contrastVal = parseFloat(contrastVal)
        } catch {
        } catch (e) {
          originVal = NaN
        }

@@ -187,7 +190,7 @@
          content = `${content.substr(0, 4)}-${content.substr(5, 2)}-${content.substr(8, 2)} ${content.substr(11, 2)}:${content.substr(14, 2)}:${content.substr(17, 2)}`
        }
  
        content = col.prefix + content + col.postfix
        content = (col.prefix || '') + content + (col.postfix || '')
      }

      if (col.marks) {
@@ -219,7 +222,7 @@
        if (isNaN(content)) {
          content = ''
        }
      } catch {
      } catch (e) {
        content = ''
      }

@@ -271,20 +274,20 @@

      let cols = 24 / (col.picSort || 1)
      let paddingTop = '100%'
      let scale = col.scale === 'true'

      if (col.lenWidRadio === '16:9') {
        paddingTop = '56.25%'
      } else if (col.lenWidRadio === '3:2') {
        paddingTop = '66.67%'
      } else if (col.lenWidRadio === '4:3') {
        paddingTop = '75%'
      if (PicRadio[col.lenWidRadio]) {
        paddingTop = PicRadio[col.lenWidRadio]
      }

      resProps.children = (
        <div>
          {photos.map((url, i) => (
          {photos && photos.map((url, i) => (
            <Col key={i} span={cols}>
              <div className="ant-mk-picture" style={{paddingTop, backgroundImage: `url('${url}')`}}></div>
              <div className={'ant-mk-picture' + (scale ? ' scale' : '')} onClick={() => {
                if (!scale) return
                MKEmitter.emit('mkImageScale', url, photos)
              }} style={{paddingTop, backgroundImage: `url('${url}')`}}></div>
            </Col>
          ))}
        </div>
@@ -328,7 +331,7 @@
        
        try {
          _param = window.btoa(_quary)
        } catch {
        } catch (e) {
          _param = window.btoa(window.encodeURIComponent(_quary))
        }
        
@@ -348,8 +351,45 @@
          {content && _href ? <a href={_href} target="_blank" rel="noopener noreferrer">{content}</a> : null }
        </div>
      )
    } else if (col.type === 'formula') {
      let content = col.formula
      Object.keys(record).forEach(key => {
        let reg = new RegExp('@' + key + '@', 'ig')
        content = content.replace(reg, record[key])
      })

      if (col.eval !== 'false') {
        try {
          // eslint-disable-next-line
          content = eval(content)
        } catch (e) {
          content = ''
        }
      }

      content = content === undefined ? '' : content

      if (content !== '') {
        content = `${col.prefix || ''}${content}${col.postfix || ''}`

        if (col.eval === 'false') {
          content = content.replace(/\n/ig, '<br/>').replace(/\s/ig, '&nbsp;')
          content = <span dangerouslySetInnerHTML={{__html: content}}></span>
        }
      }

      if (col.marks) {
        style = style || {}
        content = this.getMark(record, col.marks, style, content)
      }

      resProps.children = content
    } else if (col.type === 'custom') {
      style.padding = '0px'
      if (col.style) {
        style = {...style, ...col.style}
      }

      resProps.children = (
        <CardCellComponent data={record} cards={config} elements={col.elements}/>
      )
@@ -392,7 +432,8 @@
    activeIndex: null,    // 标记当前选中行
    rowspans: null,       // 行合并字段信息
    pickup: false,        // 收起未选择项
    orderfields: {}       // 排序id与field转换
    orderfields: {},      // 排序id与field转换
    pageOptions: []
  }

  UNSAFE_componentWillMount () {
@@ -423,7 +464,10 @@
          if (item.rowspan === 'true') {
            rowspans.push(item.field)
          }
          if (_format && !Math.floor(Math.random() * radio)) {
          if (item.type === 'index') {
            item.field = '$Index'
            item.type = 'text'
          } else if (_format && !Math.floor(Math.random() * radio)) {
            item.blur = true
          }
  
@@ -476,7 +520,17 @@
      document.getElementsByTagName('head')[0].appendChild(ele)
    }

    let size = (setting.pageSize || 10) + ''
    let pageOptions = ['10', '25', '50', '100', '500', '1000']

    if (!pageOptions.includes(size)) {
      pageOptions.push(size)
      pageOptions = pageOptions.sort((a, b) => a - b)
    }

    this.setState({
      pageSize: setting.pageSize || 10,
      pageOptions,
      columns: _columns,
      rowspans,
      tableId,
@@ -489,6 +543,8 @@
  }

  componentDidMount () {
    MKEmitter.addListener('mkCheckTopLine', this.mkCheckTopLine)
    MKEmitter.addListener('mkCheckAll', this.mkCheckAll)
    MKEmitter.addListener('resetTable', this.resetTable)
  }

@@ -499,58 +555,112 @@
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('mkCheckTopLine', this.mkCheckTopLine)
    MKEmitter.removeListener('mkCheckAll', this.mkCheckAll)
    MKEmitter.removeListener('resetTable', this.resetTable)
  }

  mkCheckTopLine = (menuId) => {
    const { MenuID, data, setting } = this.props

    if (MenuID !== menuId || !data || data.length === 0) return

    this.changedata(0)
    this.setState({ selectedRowKeys: [0], activeIndex: 0 })
    this.props.chgSelectData([data[0]])

    if (setting.$hasSyncModule) {
      MKEmitter.emit('syncBalconyData', MenuID, [data[0]], data.length === 1)
    }
  }

  mkCheckAll = (menuId, checked) => {
    const { MenuID, data } = this.props

    if (MenuID !== menuId) return

    if (checked) {
      this.setState({
        activeIndex: '',
        selectedRowKeys: data.map((item, index) => index)
      })

      this.props.chgSelectData(data)

      MKEmitter.emit('resetSelectLine', MenuID, '', '')
      MKEmitter.emit('syncBalconyData', MenuID, data, data.length > 0)
      if (data.length === 0) {
        message.warning('未获取到数据！')
      }
    } else {
      this.setState({
        activeIndex: '',
        selectedRowKeys: [],
      })

      this.props.chgSelectData([])
  
      MKEmitter.emit('resetSelectLine', MenuID, '', '')
      MKEmitter.emit('syncBalconyData', MenuID, [], false)
    }
  }

  // 字段透视
  triggerLink = (e, item, record) => {
    const { tabviews } = this.props
    e.stopPropagation()

    let __param = {
      $searchkey: item.field,
      $searchval: record[item.field] || '',
      $BID: record.$$uuid
    }

    if (item.linkfields && item.linkfields.length > 0) {
      item.linkfields.forEach(field => {
        __param[field] = record[field] || ''
      })
    }

    if (item.linkThdMenu) {
      let tabmenu = item.linkThdMenu

      tabmenu.param = {
        searchkey: item.field,
        searchval: record[item.field] || '',
        BID: record.$$uuid
      tabmenu.param = __param

      if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) {
        MKEmitter.emit('modifyTabs', tabmenu, 'replace')
      } else {
        MKEmitter.emit('modifyTabs', tabmenu, 'plus', true)
      }
  
      tabmenu.selected = true
  
      let tabs = tabviews.filter((tab, i) => {
        tab.selected = false
        return tab.MenuID !== tabmenu.MenuID
      })
  
      if (tabviews.length > tabs.length) {
        this.props.modifyTabview(fromJS(tabs).toJS())
      }
  
      this.setState({}, () => {
        tabs.push(tabmenu)
        this.props.modifyTabview(tabs)
      })
    } else {
    } else if (item.linkurl) {
      let src = item.linkurl

      if (item.linkurl.indexOf('paramsmain/') > -1) {
      if (src.indexOf('paramsmain/') > -1) {
        try {
          let _url = item.linkurl.split('paramsmain/')[0] + 'paramsmain/'
          let _param = JSON.parse(window.decodeURIComponent(window.atob(item.linkurl.split('paramsmain/')[1])))
          let dataparam = {
            searchkey: item.field,
            searchval: record[item.field] || '',
            BID: record.$$uuid
          }
          _param.UserID = sessionStorage.getItem('UserID')
          _param.LoginUID = sessionStorage.getItem('LoginUID')
          _param.User_Name = sessionStorage.getItem('User_Name')
          _param.param = dataparam
          _param.param = __param
          src = _url + window.btoa(window.encodeURIComponent(JSON.stringify(_param)))
        } catch {
        } catch (e) {
          console.warn('菜单参数解析错误！')
        }
      } else {
        let con = '?'

        if (/\?/ig.test(src)) {
          con = '&'
        }

        if (item.linkfields && item.linkfields.length > 0) {
          item.linkfields.forEach(field => {
            if (field.toLowerCase() === 'id') return
            con += `${field}=${record[field] || ''}&`
          })
        }
        
        src = src + `${con}id=${record.$$uuid}&appkey=${window.GLOB.appkey}&userid=${sessionStorage.getItem('UserID')}&LoginUID=${sessionStorage.getItem('LoginUID') || ''}`
      }

      window.open(src)
@@ -561,7 +671,7 @@
   * 
   */
  onSelectChange = selectedRowKeys => {
    const { setting } = this.props
    const { setting, MenuID, data } = this.props

    let index = ''
    let _activeIndex = null
@@ -580,13 +690,16 @@
    let selects = this.props.data.filter((item, _index) => selectedRowKeys.includes(_index))

    this.props.chgSelectData(selects)
    if (setting.$hasSyncModule) {
      MKEmitter.emit('syncBalconyData', MenuID, selects, data.length === selects.length)
    }
  }

  /**
   * @description 点击整行，触发切换， 判断是否可选，单选或多选，进行对应操作
   */
  changeRow = (record, index) => {
    const { setting } = this.props
    const { setting, MenuID, data } = this.props

    if (!setting.tableType || this.state.pickup) return
    
@@ -616,6 +729,10 @@
    let selects = this.props.data.filter((item, _index) => newkeys.includes(_index))
    
    this.props.chgSelectData(selects)

    if (setting.$hasSyncModule) {
      MKEmitter.emit('syncBalconyData', MenuID, selects, data.length === selects.length)
    }
  }

  changeTable = (pagination, filters, sorter) => {
@@ -739,7 +856,7 @@

  render() {
    const { setting, statFValue, lineMarks, data } = this.props
    const { selectedRowKeys, activeIndex, pickup, tableId } = this.state
    const { selectedRowKeys, activeIndex, pickup, tableId, pageOptions } = this.state

    // 设置表格选择属性：单选、多选、不可选
    let rowSelection = null
@@ -772,7 +889,7 @@
      _pagination = {
        current: this.state.pageIndex,
        pageSize: this.state.pageSize,
        pageSizeOptions: ['10', '25', '50', '100', '500', '1000'],
        pageSizeOptions: pageOptions,
        showSizeChanger: true,
        total: this.props.total || 0,
        showTotal: (total, range) => `${range[0]}-${range[1]} ${this.state.dict['main.pagination.of']} ${total} ${this.state.dict['main.pagination.items']}`
@@ -785,20 +902,23 @@
      _footer = statFValue.map(f => `${f.label}(合计)：${f.value}`).join('；')
    }

    let height = setting.height || false

    return (
      <div className={'normal-custom-table ' + setting.tableHeader} id={tableId}>
      <div className={`normal-custom-table ${setting.tableHeader || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''}`} id={tableId}>
        {(setting.tableType === 'radio' || setting.tableType === 'checkbox') && data && data.length > 0 ?
          <Switch title="收起" className="main-pickup" checkedChildren="开" unCheckedChildren="关" defaultChecked={pickup} onChange={this.pickupChange} /> : null
          <Switch title="收起" className="main-pickup" checkedChildren="开" unCheckedChildren="关" checked={pickup} onChange={this.pickupChange} /> : null
        }
        <Table
          components={components}
          style={setting.style}
          size={setting.size || 'middle'}
          bordered={setting.bordered !== 'false'}
          rowSelection={rowSelection}
          columns={this.state.columns}
          dataSource={_data}
          loading={this.props.loading}
          scroll={{ x: '100%', y: false }}
          scroll={{ x: '100%', y: height }}
          onRow={(record, index) => {
            return {
              lineMarks,
@@ -820,15 +940,12 @@
const mapStateToProps = (state) => {
  return {
    menuType: state.editLevel,
    tabviews: state.tabviews,
    memberLevel: state.memberLevel
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
  }
const mapDispatchToProps = () => {
  return {}
}

export default connect(mapStateToProps, mapDispatchToProps)(NormalTable)