2024-03-03

king

2024-03-03 67036fb0ed31d77ca33b660ce5f9f47c29ae65c0

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

@@ -110,7 +110,7 @@
    let { col, config, record, className, style, triggerLink, ...resProps } = this.props

    if (!col) return (<td {...resProps} className={className} style={style}/>)
    

    if (col.type === 'text') {
      let content = ''
      if (record[col.field] !== undefined) {
@@ -126,15 +126,19 @@
          content = <span>{col.prefix || ''}<Encrypts value={content} />{col.postfix || ''}</span>
        }

        if (col.noValue === 'hide' && content < '1949-10-02') {
          content = ''
        }

        if (col.textFormat !== 'encryption') {
          content = (col.prefix || '') + content + (col.postfix || '')
        }
      }

      if (col.marks) {
        let mark = getMark(col.marks, record, style)
        style = style ? {...style} : {}

        style = mark.style
        let mark = getMark(col.marks, record, style)

        if (mark.icon) {
          if (mark.position === 'front') {
@@ -144,6 +148,14 @@
          }
        } else if (mark.innerStyle) {
          content = <span style={mark.innerStyle}>{content}</span>
        } else if (mark.space) {
          content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</>
        } else if (mark.point) {
          if (mark.position === 'front') {
            content = <>{mark.point}{content}</>
          } else {
            content = <>{content}{mark.point}</>
          }
        }
      }
      if (col.blur) {
@@ -154,21 +166,22 @@
        resProps.rowSpan = record['$$' + col.field]
      }
      
      if (!record.$disabled && (col.linkThdMenu || col.linkurl)) {
        content = (
          <div>
            <div className="link-menu" onDoubleClick={(e) => triggerLink(e, col, record)}></div>
            {content}
          </div>
        )
      }

      resProps.children = content

      if (!record.$disabled && (col.linkThdMenu || col.linkurl)) {
        style = style || {}
        style.cursor = 'pointer'

        return (<td {...resProps} className={className} onDoubleClick={() => triggerLink(col, record)} style={style}/>)
      }
    } else if (col.type === 'number') {
      let content = ''
      try {
        content = parseFloat(record[col.field])
        if (isNaN(content)) {
          content = ''
        }
        if (col.noValue === 'hide' && content === 0) {
          content = ''
        }
      } catch (e) {
@@ -196,9 +209,9 @@
      }

      if (col.marks) {
        let mark = getMark(col.marks, record, style)
        style = style ? {...style} : {}

        style = mark.style
        let mark = getMark(col.marks, record, style)

        if (mark.icon) {
          if (mark.position === 'front') {
@@ -208,6 +221,14 @@
          }
        } else if (mark.innerStyle) {
          content = <span style={mark.innerStyle}>{content}</span>
        } else if (mark.space) {
          content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</>
        } else if (mark.point) {
          if (mark.position === 'front') {
            content = <>{mark.point}{content}</>
          } else {
            content = <>{content}{mark.point}</>
          }
        }
      }

@@ -219,16 +240,14 @@
        resProps.rowSpan = record['$$' + col.field]
      }

      if (!record.$disabled && (col.linkThdMenu || col.linkurl)) {
        content = (
          <div>
            <div className="link-menu" onDoubleClick={(e) => triggerLink(e, col, record)}></div>
            {content}
          </div>
        )
      }

      resProps.children = content

      if (!record.$disabled && (col.linkThdMenu || col.linkurl)) {
        style = style || {}
        style.cursor = 'pointer'

        return (<td {...resProps} className={className} onDoubleClick={() => triggerLink(col, record)} style={style}/>)
      }
    } else if (col.type === 'picture') {
      let photos = ''
      if (record[col.field]) {
@@ -252,7 +271,7 @@
        <div>
          {photos.map((url, i) => (
            <Col key={i} span={col.span || 24}>
              <MkPicture style={{paddingTop, backgroundSize: col.backgroundSize || 'cover'}} scale={scale} url={url} urls={photos}/>
              <MkPicture lostTip={col.lostTip !== 'false'} style={{paddingTop, backgroundSize: col.backgroundSize || 'cover'}} scale={scale} url={url} urls={photos}/>
            </Col>
          ))}
        </div>
@@ -336,10 +355,12 @@
          // eslint-disable-next-line
          let func = new Function('data', col.formula)
          content = func([record])
        } catch (e) {
          if (window.debugger) {
            console.warn(e)

          if (col.noValue === 'hide' && content === 0) {
            content = ''
          }
        } catch (e) {
          console.warn(e)
          content = ''
        }
      } else {
@@ -351,11 +372,13 @@
          try {
            // eslint-disable-next-line
            content = eval(content)
          } catch (e) {
            if (window.debugger) {
              console.info(content)
              console.warn(e)

            if (col.noValue === 'hide' && content === 0) {
              content = ''
            }
          } catch (e) {
            console.info(content)
            console.warn(e)
            content = ''
          }
  
@@ -377,9 +400,9 @@
      }

      if (col.marks) {
        let mark = getMark(col.marks, record, style)
        style = style ? {...style} : {}

        style = mark.style
        let mark = getMark(col.marks, record, style)

        if (mark.icon) {
          if (mark.position === 'front') {
@@ -389,6 +412,14 @@
          }
        } else if (mark.innerStyle) {
          content = <span style={mark.innerStyle}>{content}</span>
        } else if (mark.space) {
          content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</>
        } else if (mark.point) {
          if (mark.position === 'front') {
            content = <>{mark.point}{content}</>
          } else {
            content = <>{content}{mark.point}</>
          }
        }
      }

@@ -422,7 +453,9 @@
    loading: PropTypes.bool,         // 表格加载中
    refreshdata: PropTypes.func,     // 表格中排序列、页码的变化时刷新
    chgSelectData: PropTypes.func,   // 数据切换
    autoMatic: PropTypes.any
    autoMatic: PropTypes.any,
    allSearch: PropTypes.any,
    colsCtrls: PropTypes.any
  }

  state = {
@@ -435,11 +468,13 @@
    rowspans: null,       // 行合并字段信息
    pickup: false,        // 收起未选择项
    orderfields: {},      // 排序id与field转换
    pageOptions: []
    pageOptions: [],
    allColumns: null,
    reseting: false
  }

  UNSAFE_componentWillMount () {
    const { setting, fields, columns } = this.props
    const { setting, columns, fields, colsCtrls } = this.props
    let radio = 5          // 虚化比例
    let _format = false    // 是否虚化处理
    let rowspans = []
@@ -463,7 +498,7 @@
          let cell = null
    
          if (item.type === 'colspan') {
            cell = { title: item.label, align: item.Align }
            cell = { title: item.label, align: item.Align, $key: item.uuid }
            cell.children = getColumns(item.subcols)
          } else {
            if (item.rowspan === 'true') {
@@ -475,20 +510,19 @@
            } else if (_format && !Math.floor(Math.random() * radio)) {
              item.blur = true
            }
    
            if (item.marks && item.marks.length === 0) {
              item.marks = ''
            }
  
            if (item.field) {
              orderfields[item.uuid] = item.field
            } else if (item.sortField) {
              orderfields[item.uuid] = item.sortField
            }
  
            cell = {
              $key: item.uuid,
              align: item.Align,
              dataIndex: item.uuid,
              title: item.label,
              sorter: item.field && item.IsSort === 'true',
              sorter: (item.field || item.sortField) && item.IsSort === 'true',
              width: item.Width || 120,
              onCell: record => ({
                record,
@@ -510,6 +544,7 @@
        fields.push(item.field)

        _columns.push({
          $key: item.uuid,
          align: item.Align,
          dataIndex: item.field,
          title: item.label,
@@ -542,24 +577,44 @@
      pageOptions = pageOptions.sort((a, b) => a - b)
    }

    if (setting.maxPageSize) {
      pageOptions = pageOptions.filter(item => item <= setting.maxPageSize)
    }

    let allColumns = null
    if (colsCtrls) {
      rowspans = null
      allColumns = [..._columns]
      _columns = this.getCurColumns(_columns, this.props.allSearch)
    }

    this.setState({
      pageSize: setting.pageSize || 10,
      pageOptions,
      allColumns,
      columns: _columns,
      rowspans,
      tableId,
      orderfields
    }, () => {
      const element = document.getElementById(tableId)
      element && element.style.setProperty('--mk-table-border-color', setting.borderColor || '#e8e8e8')
      element && element.style.setProperty('--mk-table-color', setting.color || 'rgba(0, 0, 0, 0.65)')
      element && element.style.setProperty('--mk-table-font-size', setting.fontSize || '14px')
      element && element.style.setProperty('--mk-table-font-weight', setting.fontWeight || 'normal')
    })
  }

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

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { allSearch } = this.props
    const { allColumns } = this.state

    if (allSearch && !is(fromJS(allSearch), fromJS(nextProps.allSearch))) {
      this.setState({
        reseting: true,
        columns: this.getCurColumns(allColumns, nextProps.allSearch)
      }, () => {
        this.setState({reseting: false})
      })
    }
  }

  componentDidMount () {
@@ -588,6 +643,50 @@
    MKEmitter.removeListener('autoQueryData', this.autoQueryData)
    MKEmitter.removeListener('autoSelectData', this.autoSelectData)
    MKEmitter.removeListener('mkCheckTopLine', this.mkCheckTopLine)
  }

  getCurColumns = (columns, allSearch) => {
    const { colsCtrls } = this.props

    let values = {}
    allSearch.forEach(item => {
      values[item.key] = item.value
    })
    let cols = null
    colsCtrls.some(item => {
      let originVal = item.field.map(f => values[f] || '').join('')
      let contrastVal = item.contrastValue
      let result = false

      if (item.match === '=') {
        result = originVal === contrastVal
      } else if (item.match === '!=') {
        result = originVal !== contrastVal
      } else if (item.match === 'regexp') {
        let reg = new RegExp(item.contrastValue, 'ig')
        result = reg.test(originVal)
      } else {
        originVal = isNaN(originVal) ? originVal : +originVal
        contrastVal = isNaN(contrastVal) ? contrastVal : +contrastVal
        if (item.match === '>') {
          result = originVal > contrastVal
        } else if (item.match === '<') {
          result = originVal < contrastVal
        }
      }

      if (!result) return false

      cols = item.cols

      return true
    })

    if (cols) {
      return columns.filter(col => cols.includes(col.$key))
    }

    return columns
  }

  autoSelectData = (id, index) => {
@@ -707,9 +806,7 @@
  }

  // 字段透视
  triggerLink = (e, item, record) => {
    e.stopPropagation()

  triggerLink = (item, record) => {
    let __param = {
      $searchkey: item.field,
      $searchval: record[item.field] || '',
@@ -752,6 +849,8 @@

  onSelectChange = (selectedRowKeys, e) => {
    const { setting, MenuID, data } = this.props

    if (this.state.pickup) return

    let index = ''
    let _activeIndex = null
@@ -982,7 +1081,9 @@

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

    if (reseting) return null

    // 设置表格选择属性：单选、多选、不可选
    let rowSelection = null
@@ -1050,8 +1151,15 @@
      }
    }

    let style = {
      '--mk-table-border-color': setting.borderColor || '#e8e8e8',
      '--mk-table-color': setting.color || 'rgba(0, 0, 0, 0.65)',
      '--mk-table-font-size': setting.fontSize || '14px',
      '--mk-table-font-weight': setting.fontWeight || 'normal'
    }

    return (
      <div className={`normal-custom-table ${setting.tableHeader || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''} table-vertical-${setting.vertical || 'middle'} table-col-${columns.length} ${fixed}`} id={tableId}>
      <div className={`normal-custom-table ${setting.tableHeader || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''} table-vertical-${setting.vertical || 'middle'} table-col-${columns.length} ${fixed}`} style={style}>
        {(setting.tableType === 'radio' || setting.tableType === 'checkbox') && data && data.length > 0 ?
          <Switch title="收起" className="main-pickup" checkedChildren="开" unCheckedChildren="关" checked={pickup} onChange={this.pickupChange} /> : null
        }