2025.9.18 数据产品（待完成）

riku

2025-09-18 c1d2051abc8ca88cd07f0d7c56c0dbf8165d5c33

 src/components/table/FYTable.vue

@@ -1,10 +1,10 @@
<template>
  <el-row ref="searchRef">
    <FYSearchBar @search="onSearch">
      <template #options>
      <template #options v-if="$slots.options">
        <slot name="options"></slot>
      </template>
      <template #buttons>
      <template #buttons v-if="$slots.buttons">
        <slot name="buttons"></slot>
      </template>
    </FYSearchBar>
@@ -28,12 +28,19 @@
    <slot name="options-expand2"></slot>
  </div>
  <el-table
    v-bind="$attrs"
    ref="tableRef"
    :data="tableData"
    v-loading="loading"
    table-layout="fixed"
    :row-class-name="tableRowClassName"
    :height="tableHeight"
    :size="fontSize"
    @cell-click="cellClick"
    :cell-class-name="cellClassName"
    @paste="handlePaste"
    @sort-change="handleSortChange"
    :show-overflow-tooltip="true"
    border
  >
    <slot name="table-column" :size="fontSize"></slot>
@@ -62,8 +69,10 @@
 * 使用时需要在<slot #options>中添加自定义查询选项，在<slot #table-column>中添加自定义表格列，同时实现触发函数search
 */
export default {
  inject: ['contentMaxHeight'],
  props: {
    rowClassName: undefined,
    cellClassName: Function || String,
    pagination: {
      type: Boolean,
      default: true
@@ -72,6 +81,19 @@
    size: {
      type: String,
      default: 'default'
    },
    data: {
      type: Array,
      default: () => []
    },
    totalCount: {
      type: Number,
      default: 0
    },
    // 额外的高度，用于计算表格高度
    extraHeight: {
      type: Number,
      default: 0
    }
  },
  data() {
@@ -85,7 +107,7 @@
      fontSize: 'default'
    };
  },
  emits: ['search'],
  emits: ['search', 'cellClick', 'tablePaste', 'sortChange'],
  watch: {
    currentPage(nValue, oValue) {
      if (nValue != oValue) {
@@ -104,24 +126,26 @@
        }
      },
      immediate: true
    }
  },
  computed: {
    cTableHeight() {
      if (this.$refs.searchRef) {
        const h1 = this.$refs.searchRef.$el.offsetHeight;
        const h2 = this.$refs.paginationRef ? this.$refs.paginationRef.$el.offsetHeight : 0;
        const h3 = this.$refs.expandRef.$el.offsetHeight;
        const h4 = this.$refs.expand2Ref.offsetHeight;

        const h = h1 + h2 + h3 + h4;
        // return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`;
        return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
      } else {
        return '500';
    },
    data(nValue, oValue) {
      if (nValue != oValue) {
        this.tableData = nValue;
      }
    },
    totalCount(nValue, oValue) {
      if (nValue != oValue) {
        this.total = nValue;
      }
    },
    extraHeight: {
      handler(nValue, oValue) {
        if (nValue != oValue) {
          this.tableHeight = this.calcTableHeight();
        }
      },
    }
  },
  computed: {},
  methods: {
    /**
     * 表格数据查询，传递两组参数，分页信息和回调函数
@@ -137,21 +161,30 @@
          pageSize: this.pageSize
        },
        (res) => {
          this.tableData = res.data;
          this.total = res.total ? res.total : 0;
          if (res) {
            if (res.data) {
              this.tableData = res.data;
            }
            if (res.total) {
              this.total = res.total;
            }
          }
          this.loading = false;
          this.doLayout();
        }
      );
    },
    calcTableHeight() {
      const h1 = this.$refs.searchRef.$el.offsetHeight;
      const h2 = this.$refs.paginationRef ? this.$refs.paginationRef.$el.offsetHeight : 0;
      const h2 = this.$refs.paginationRef
        ? this.$refs.paginationRef.$el.offsetHeight
        : 0;
      const h3 = this.$refs.expandRef.$el.offsetHeight;
      const h4 = this.$refs.expand2Ref.offsetHeight;

      const h = h1 + h2 + h3 + h4;
      // return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`;
      return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
      const h = h1 + h2 + h3 + h4 + this.extraHeight;
      return this.contentMaxHeight.value - h + 'px';
      // return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
    },
    tableRowClassName({ row }) {
      if (this.rowClassName) {
@@ -163,6 +196,21 @@
      } else {
        return row.extension1 != '0' ? 'online-row' : 'offline-row';
      }
    },
    cellClick(row, column, cell, event) {
      this.$emit('cellClick', row, column, cell, event);
    },
    handlePaste(event) {
      this.$emit('tablePaste', event);
    },
    doLayout() {
      this.$refs.tableRef.doLayout();
    },
    handleSortChange({ column, prop, order }) {
      this.$emit('sortChange', { column, prop, order });
    },
    clearSort() {
      this.$refs.tableRef.clearSort();
    }
  },
  mounted() {