yw-common-list/packages/a-common-list/src/list.js

基于vxe-table封装的自定义可配置表格

/**
 * lz，2022-07-18 23:18
 * 通用列表
 */

import { Table } from '../../table'
import { Column } from '../../column'

// import tableEventMixins from './tableEventMixins'

// 使用vxeTable的默认配置
import GlobalConfig from '../../v-x-e-table/src/conf'

import { formatDateDay, formatDateHours } from './format'

export default {
  name: 'aCommonList',
  inheritAttrs: false,
  // mixins: [tableEventMixins],
  data () {
    return {}
  },
  props: {
    tableOption: {
      type: Object,
      default: () => GlobalConfig.table
    },
    tableData: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      required: true,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    // 表格的key
    tableKey: {
      type: String
    }
  },
  methods: {
    // 初始化表格行插槽
    initSlots (column, h) {
      const $scopedSlots = this.$scopedSlots
      const header = `${column.field}Header`
      let scopedSlots = {}
      if ($scopedSlots[header]) {
        scopedSlots = {
          header (props) {
            if (!$scopedSlots[header]) return
            return h('div', $scopedSlots[header](props))
          },
          ...scopedSlots
        }
      }
      return scopedSlots || {}
    },
    // 渲染表格行
    renderColumns (h) {
      const { columns, tableOption } = this.$props
      const renderCol = []
      const $scopedSlots = this.$scopedSlots
      columns.map(column => {
        // showOverflow: true，默认超出隐藏，鼠标悬浮tooltip显示
        const attrs = { showOverflow: true, ...column, sortable: column.whetherSort === '1' }
        // 设置字典取值
        if (column.data?.dictType > 0) {
          attrs.field = `${column.field}_dictText`
        }
        // 设置锁定
        const lock = column.columnLock
        if (lock) {
          switch (lock) {
            case 'left':
            case 'right':
              attrs.fixed = lock
              break
          }
        }
        // 设置对齐方式
        const align = column.columnDataAlign || tableOption.columnTitleAlign || 'left'
        if (align) {
          switch (align) {
            case 'left':
            case 'right':
              attrs.align = align
              break
            default:
              attrs.align = 'center'
          }
        }
        const type = column.columnAttributes
        let scopedSlots = this.initSlots(column, h)
        switch (type) {
          case '-3': // checkbox列
            attrs.type = 'checkbox'
            break
          case '-2': // 自定义列
            if ($scopedSlots[column.field]) {
              scopedSlots = {
                default (props) {
                  // console.log('ac-default', props)
                  return h('div', $scopedSlots[column.field](props))
                },
                ...scopedSlots
              }
            }
            break
          case '-1': // 只传值不显示
            break
          case '0': // 只显示
            break
          case '1': // 即传值又显示
            break
          case '2': // AD全名变简名
            break
          case '3': // 只显示时间的日期部分
            attrs.formatter = formatDateDay
            break
          case '4': // 既不显示也不传值
            break
          case '5': // 只显示时间的秒之前的部分
            attrs.formatter = formatDateHours
            break
        }
        const showColumnsType = ['-3', '-2', '0', '1', '2', '3', '5']
        if (this.isNotEmptyNumber(type)) {
          if (showColumnsType.indexOf(type) !== -1) {
            renderCol.push(h(Column, { attrs, scopedSlots }))
          }
        } else {
          renderCol.push(h(Column, { attrs, scopedSlots }))
        }
      })
      return renderCol
    },
    // 判断不为空数字
    isNotEmptyNumber (str) {
      return str !== '' && str !== null && typeof str !== 'undefined'
    },
    // 初始化表格事件
    initEvent () {
      // const eventData = { ...this.eventData }
      // const events = {}
      // for (const event in eventData) {
      //   events[event] = (data) => this.$emit(event, data)
      // }
      // return events
    }
  },
  render (h) {
    const { tableOption, loading, tableData } = this.$props
    const sortConfig = { remote: true, trigger: 'cell' }
    const ref = this.tableKey
    const columnConfig = { resizable: true }
    const $scopedSlots = this.$scopedSlots
    // const events = this.initEvent()
    const tooltipConfig = {
      enterable: true
    }
    const rowConfig = {
      isCurrent: true,
      isHover: true
    }
    // 设置行高
    if (tableOption.rowHeight) rowConfig.height = tableOption.rowHeight
    tableOption.height = tableOption.tableHeight || 'auto'
    return h('div', { class: 'a-common-list' },
      [h(
        Table,
        {
          ref,
          attrs: { ...this.$attrs, ...tableOption, loading, data: tableData, menuConfig: {}, tooltipConfig, rowConfig, columnConfig, sortConfig },
          scopedSlots: {
            header (props) {
              return h('div', $scopedSlots.tableHeader(props))
            }
          },
          on: this.$listeners
        },
        this.renderColumns(h))]
    )
  }
}