cutejava/cutejava-front/src/views/components/dev/CuteSimpleTable.vue

<!--
 * 简单表格组件：封装自定义逻辑与参数
 * @author odboy
 * @email tianjun@odboy.cn
 * @created 2025-08-01
 -->
<template>
  <div>
    <el-row>
      <el-col v-if="showSelect" :span="2" class="selection-box">
        已选 <font class="selection-count">{{ crud.selection && crud.selection.length }}</font> 条
      </el-col>
      <el-col :span="11" style="text-align: left">
        <!-- 通过  <template v-slot:batchArea> 插槽，数据表格上方左侧 添加 批量操作入口 -->
        <slot name="batchArea" />
      </el-col>
      <el-col :span="11" style="text-align: right">
        <!-- 通过  <template v-slot:toolArea> 插槽，数据表格上方右侧 添加 工具入口，比如导出 -->
        <slot name="toolArea" />
      </el-col>
    </el-row>
    <el-table
      ref="table"
      v-loading="crud.loading"
      stripe
      empty-text="暂无数据"
      :row-key="crud.primaryKey"
      fit
      :data="crud.dataSource"
      style="width: 100%;"
      :height="height"
      :max-height="height"
      highlight-current-row
      highlight-selection-row
      @sort-change="onTableSortChange"
      @selection-change="onTableSelectionChange"
    >
      <el-table-column v-if="showSelect" type="selection" width="55" />
      <slot />
    </el-table>
    <el-pagination
      v-if="paging"
      :current-page="pageProps.current"
      :page-sizes="[10, 20, 50]"
      :page-size="pageProps.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="pageProps.total"
      @size-change="(size) => crud.onPageChange(pageProps.current, size, pageProps.total)"
      @current-change="(current) => crud.onPageChange(current, pageProps.pageSize, pageProps.total)"
    />
  </div>
</template>

<script>

export default {
  name: 'CuteSimpleTable',
  props: {
    primaryKey: {
      type: String,
      required: true,
      default: null
    },
    fetch: {
      type: Function,
      required: false,
      default: null
    },
    paramsTransform: {
      type: Function,
      required: false,
      default: null
    },
    responseTransform: {
      type: Function,
      required: false,
      default: null
    },
    showSelect: {
      type: Boolean,
      required: false,
      default: false
    },
    paging: {
      type: Boolean,
      required: false,
      default: true
    },
    pageProps: {
      type: Object,
      required: true,
      default: function() {
        return {
          current: 1,
          pageSize: 10,
          total: 0
        }
      }
    },
    customHeight: {
      type: Number,
      required: false,
      default: null
    }
  },
  data() {
    return {
      crud: {
        loading: false,
        primaryKey: this.primaryKey ? this.primaryKey : 'id',
        fetchUrl: null,
        dataSource: [],
        onPageChange: (currentPage, pageSize) => {
          this.pageProps.current = currentPage
          this.pageProps.pageSize = pageSize
          console.log('on-page-change', currentPage, pageSize)
          // this.$emit('onPageChange', currentPage, pageSize, total)
          this.refresh()
        },
        orderBy: '',
        selection: []
      }
    }
  },
  computed: {
    height() {
      if (this.customHeight) {
        return this.customHeight
      }
      return document.documentElement.clientHeight - 300
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    refresh() {
      this.crud.orderBy = ''
      this.crud.selection = []
      this.initData()
    },
    async initData() {
      let params = {}
      // 自定义请求参数
      if (this.paramsTransform) {
        params = this.paramsTransform(this.pageProps)
      }
      // 排序字段
      if (this.crud.orderBy) {
        params.orderBy = this.crud.orderBy
      }
      if (this.fetch) {
        try {
          this.crud.loading = true
          // 请求远程数据
          const response = await this.fetch(params)
          // console.error('response', response)
          // { content: [], totalElements: 0 }
          // 转换为表格所需要的数据
          if (this.responseTransform) {
            return this.responseTransform(response)
          }
          if (response && response.hasOwnProperty('totalElements') && response.hasOwnProperty('content')) {
            this.pageProps.total = response.totalElements
            this.crud.dataSource = response.content
          }
          return response
        } catch (e) {
          console.error('CuteSimpleTable请求远程数据异常', e)
          this.pageProps.total = 0
          this.crud.dataSource = []
        } finally {
          this.crud.loading = false
        }
      }
    },
    onTableSelectionChange(selection) {
      this.crud.selection = selection
      this.$emit('selection-change', selection)
    },
    getDataSource() {
      return this.crud.dataSource
    },
    onTableSortChange(sortProps) {
      const prop = sortProps.prop
      const order = sortProps.order
      let result
      if (order === 'ascending') {
        result = { column: prop, orderType: 'asc' }
      } else if (order === 'descending') {
        result = { column: prop, orderType: 'desc' }
      } else {
        result = { column: prop, orderType: 'desc' }
      }
      // this.$emit('order-change', result)
      this.crud.orderBy = result
      this.refresh()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

.selection-box {
  text-align: left;
  font-size: 12px;
  padding-left: 10px;
  min-height: 26.7px;
  max-height: 26.7px;
  padding-top: 7px;
}

.selection-count {
  color: $menuActiveText;
}
</style>