demo/vue-table/components/Table.vue

<!--
 * @Author: your name
 * @Date: 2020-09-08 16:22:26
 * @LastEditTime: 2021-02-04 16:52:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dbadmin\src\components\TableForm\Table.vue
-->
<template>
  <div class="table__component" ref="root" :style="rootStyle">
    <el-button-group>
      <!-- 普通功能按钮插槽 -->
      <slot
        name="btns"
        :selectable="multiselect && selectedRows.length > 0"
        :disabled="!multiselect || selectedRows.length === 0"
        :selectrows="selectedRows"
        :multiStepAction="multiStepReq"
      ></slot>

      <!-- 数据导出按钮插槽 -->
      <slot v-if="allowExport" name="export-btn" :disabled="selectedRows.length === 0" :action="exportData" :loading="exporting"></slot>
    </el-button-group>

    <el-table
      :data="list"
      @selection-change="onSelectionChange"
      @current-change="$emit('current-change', $event)"
      ref="table"
      :height="tableHeight"
      v-loading="loading"
      :span-method="SpanMethod"
      :default-expand-all="expandAll"
      :class="tableClass"
      v-bind="tableOptions"
    >
      <el-table-column v-if="enableDrag" v-bind="dragColumnOptions">
        <i slot-scope="{ row }" class="el-icon-s-fold handle" style="font-size: 16px; cursor: move"></i>
      </el-table-column>
      <el-table-column type="selection" v-if="multiselect || allowExport" />
      <slot></slot>
    </el-table>

    <!-- 分页 -->
    <div v-if="visiblePage" class="page">
      <el-pagination
        :total="total"
        :page-size="size"
        background
        layout="sizes, prev, pager, next"
        :current-page.sync="currentPage"
        :page-sizes="[...(isDev ? [1, 2, 5] : []), 10, 20, 50, 100, 200]"
        @size-change="onSizeChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { get, del as RequestDelete } from '@/utils/request'
import Vue from 'vue'
import { Component, Prop, Watch, Ref, ProvideReactive, Provide } from 'vue-property-decorator'
import { toTime, toDateTime, toDate } from '@/utils/util'
import { downloadXlsx } from '@/utils/excel'
import { debounce } from 'underscore'
import { getModule } from 'vuex-module-decorators'
import QueryStore, { DEFAULT_TAG as DEFAULT_QUERY_TAG } from '@/store/modules/query'
import Sortable from 'sortablejs'

// Table组件只读取不写vuex里面的查询参数，但会修改分页参数（入currentPage，pageSize）
import store from '@/store'
const queryStore = getModule(QueryStore, store)

@Component({
  name: 'Table'
})
export default class Table extends Vue {
  @Prop({ type: Boolean, default: false })
  enableDrag

  @Prop({ type: Object, default: () => ({}) })
  dragColumnOptions

  @Prop({ type: Object, default: () => ({}) })
  tableOptions

  @Prop({ type: Boolean, default: false })
  expandAll

  @Prop({ type: String })
  tableClass

  @Prop({ type: Boolean, default: false })
  multiselect

  @Prop({ type: Boolean, default: true })
  visiblePage

  @Prop({ type: Function })
  responseHandler

  /**
   * 是否允许导出数据
   */
  @Prop({ type: Boolean, default: false })
  allowExport

  /**
   * 导出数据时需要特殊处理的字段
   * {
   *  [字段名]:处理方式
   * }
   */
  @Prop({ type: Object, default: () => ({}) })
  exportSpecialField

  @Prop({ type: String, required: true })
  api

  @Prop({ type: Function })
  SpanMethod

  @Prop({ type: [String, Number] })
  height

  @Prop({ type: String, default: DEFAULT_QUERY_TAG })
  tag

  @Ref('table')
  tableRef

  @Ref('root')
  rootRef

  /**
   * 当前页码
   */
  // currentPage = 1

  get currentPage() {
    if (!this.pageData) return 1
    if (!this.pageData.page) this.pageData.page = 1
    return this.pageData.page
  }

  set currentPage(page) {
    if (!this.pageData) return
    this.pageData.page = page
    return page
  }

  // size = 20

  get size() {
    if (!this.pageData) return 20
    if (!this.pageData.size) this.pageData.size = 20
    return this.pageData.size
  }

  set size(size) {
    if (!this.pageData) return
    this.pageData.size = size
    return size
  }

  /**
   * 列表数据
   */
  @ProvideReactive('table_data')
  list = []

  /**
   * 列表数据是否加载中
   */
  loading = false

  /**
   * 列表数据总长度
   */
  total = 1

  /**
   * 选中的行
   */
  selectedRows = []

  /**
   * 数据导出处理中
   */
  exporting = false

  rootHeight = null

  tableHeightData = 50

  get tableHeight() {
    if (this.propHeightOk) {
      return this.height
    }

    return this.tableHeightData
  }

  get propHeightOk() {
    return ['string', 'number'].includes(typeof this.height)
  }

  get rootStyle() {
    const style = {}
    if (this.rootHeight) {
      style.height = `${this.rootHeight}px`
    }

    return style
  }

  pageData = {}

  get path() {
    return this.$route.path
  }

  async created() {
    queryStore.init({ path: this.path, tag: this.tag })
    queryStore.registerFetch({ path: this.path, func: this.fetch, tag: this.tag })

    this.$set(this, 'pageData', queryStore.pageData[this.$route.path][this.tag])
    await this.fetch()
    this.resizeHeight()
  }

  async mounted() {
    this.initSortable()
    window.addEventListener('resize', this.resizeHeight)
    await this.$nextTick()
  }

  initSortable() {
    if (!this.enableDrag) return
    const tbody = this.tableRef.$el.querySelector('.el-table__body-wrapper table tbody')
    if (!tbody) return

    const onEnd = async event => {
      const list = this.list.splice(0)
      await this.$nextTick()
      const { oldIndex, newIndex } = event
      const oldObj = list[oldIndex]
      const newObj = list[newIndex]
      oldObj.sort = newIndex
      newObj.sort = oldIndex
      list[oldIndex] = newObj
      list[newIndex] = oldObj
      this.list.push(...list)
      this.$emit('sort', this.list)
      this.$emit('sort-change', { newObj, oldObj })
    }

    new Sortable(tbody, {
      group: `TableComponent:${this._uid}`,
      handle: '.el-icon-s-fold.handle',
      draggable: 'tr.el-table__row',
      onEnd
    })
  }

  @Watch('api')
  onWatchApiChange(api) {
    this.currentPage = 1
    this.fetch()
  }

  beforeDestroy() {
    window.removeEventListener('resize', this.resizeHeight)
    queryStore.unregisterFetch(this.path, this.tag)
  }

  async setHeight() {
    if (this.propHeightOk) return
    if (!this.tableRef) await this.$nextTick()
    if (!this.tableRef || !this.tableRef.$el) return
    this.rootHeight = document.body.clientHeight - this.tableRef.$el.offsetTop - 60
    this.tableHeightData = this.rootHeight - 85
  }

  resizeHeight = debounce(this.setHeight.bind(this), 300)

  @Watch('currentPage')
  /**
   * 页码有变化时获取数据
   */
  onWatchCurrentPageChange(page) {
    this.fetch()
  }

  onSizeChange(size) {
    this.size = size
    this.currentPage = 1
    this.fetch()
  }

  onSelectionChange(rows) {
    this.$emit('selection-change', rows)
    this.$set(this, 'selectedRows', rows)
  }

  /**
   * 导出数据
   * @param {string} name 工作薄名
   * @param {string} filename 文件名
   * @param {Array} 英文字段-中文转换表
   */
  exportData(name, filename, fields) {
    if (this.exporting) return
    this.exporting = true
    const data = this.selectedRows.map(item => {
      const result = {}

      fields.forEach(([en, cn]) => {
        result[cn] = item[en]

        // 特殊处理的字段
        if (en in this.exportSpecialField) {
          const type = this.exportSpecialField[en]
          switch (type) {
            case 'time':
              result[cn] = toTime(result[cn])
              return
            case 'date-time':
              result[cn] = toDateTime(result[cn])
              return
            case 'date':
              result[cn] = toDate(result[cn])
              return
            default:
              break
          }
        } else if (typeof result[cn] === 'boolean') {
          result[cn] = result[cn] ? '是' : '否'
        }
      })

      return result
    })
    downloadXlsx(
      {
        [name]: data
      },
      filename
    )
    this.exporting = false
  }

  /**
   * 获取列表数据
   */
  @Provide('fetch')
  async fetch(query) {
    if (this.loading) return
    this.loading = true
    let data, params

    if (query) {
      this.currentPage = 1
      params = query
    } else {
      params = queryStore.data[this.path][this.tag]
    }

    Object.entries(params).forEach(([key, value]) => {
      if ([undefined, NaN, null, ''].includes(value) || key === '__ob__') {
        delete params[key]
      }
    })

    const page_params = {}

    if (this.visiblePage) {
      page_params.limit = this.size
      page_params.page = this.currentPage
    }

    try {
      data = await get(this.api, {
        params: {
          ...params,
          ...page_params
        }
      })
      this.$emit('response', data)
    } catch (err) {
      this.loading = false
      return
    }
    this.total = data.count
    this.currentPage = data.page || data.currentPage
    const list = data.results.map(detail => {
      if (detail.created_time) {
        detail.created_time = toDateTime(detail.created_time)
      }
      if (detail.date_joined) {
        detail.date_joined = toDateTime(detail.date_joined)
      }
      if (detail.release_time) {
        detail.release_time = toDateTime(detail.release_time)
      }
      if (this.responseHandler) return this.responseHandler(detail)
      return detail
    })
    this.$emit('fetch-success', list)
    this.list.splice(0)
    this.$set(this, 'list', list)
    await this.$nextTick()
    this.$emit('get-table-ref', this.$refs.table)
    this.loading = false
  }

  /**
   * 下一页
   */
  nextPage() {
    this.currentPage++
  }

  /**
   * 上一页
   */
  prevPage() {
    this.currentPage--
  }

  /**
   * 重置当前页码
   */
  resetPage() {
    this.currentPage = 1
  }

  /**
   * 切换某行某列的布尔值
   * @param {number} rowIndex 行
   * @param {string} name 字段
   * @param {boolean} status 修改的布尔值
   */
  toggleColumnBoolean(rowIndex, name, status) {
    const detail = this.list[rowIndex]
    if (!detail) throw new Error(`列${rowIndex}不存在`)
    if (typeof detail[name] !== 'boolean') throw new Error(`列${rowIndex}-键${name}不是布尔值`)
    const oldValue = detail[name]
    detail[name] = status
    this.$emit('column-bool-change', {
      row: rowIndex,
      name,
      value: status,
      oldValue
    })
    return status
  }

  /**
   * 设置某行某列的值
   * @param {number} rowIndex 行
   * @param {string} name 字段
   * @param {any} value 修改的值
   */
  setColumnValue(rowIndex, name, value) {
    const detail = this.list[rowIndex]
    if (!detail) throw new Error(`列${rowIndex}不存在`)
    const oldValue = detail[name]
    detail[name] = value
    this.$emit('column-value-change', {
      row: rowIndex,
      name,
      value,
      oldValue
    })
    return value
  }

  /**
   * 格式化日期对象
   * @param {string|Date} date 日期对象/字符串
   * @returns {string}
   */
  formatDate(date, time = true) {
    return time ? toDateTime(date) : toDate(date)
  }

  /**
   * 格式化日期对象
   * @param {string|Date} date 日期对象/字符串
   * @returns {string}
   */
  formatTime(date) {
    return toTime(date)
  }

  /**
   * 调用删除接口
   * @param {string} api 接口地址
   * @param {string} message 提示消息
   * @returns {Promise<boolean>} 是否删除成功
   */
  async del(api, message = '是否确认删除') {
    await this.$confirm(message)
    try {
      await RequestDelete(api)
    } catch (err) {
      console.error(`
Table组件调用删除接口失败
接口地址   ${api}
原因：
${err.message || err}
`)
      return false
    }
    this.fetch()
    return true
  }

  async multiStepReq(ids, req, options = {}) {
    const baseOptions = {
      confirmMessage: '是否确认此操作？',
      successMessage: '批量操作成功'
    }
    options = Object.assign({}, baseOptions, options)
    await this.$confirm(options.confirmMessage)
    for (const id of ids) {
      await req(id, this.selectedRows)
    }
    this.$message.success(options.successMessage)
    this.fetch()
  }
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  justify-content: center;
  margin-top: 1em;
}
</style>

<style lang="scss">
.mo3 {
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  text-overflow: ellipsis;
}

.el-tooltip__popper {
  max-width: 500px;
}
</style>