From b330e57051e54789eb83d10dc58c4d9d10c608e1 Mon Sep 17 00:00:00 2001
From: feiyu02 <risaku@163.com>
Date: 星期三, 17 九月 2025 09:55:19 +0800
Subject: [PATCH] 2025.9.17 数据产品模块（待完成）

---
 src/components/table/FYTable.vue |  129 ++++++++++++++++++++++++++++++++++++++++--
 1 files changed, 121 insertions(+), 8 deletions(-)

diff --git a/src/components/table/FYTable.vue b/src/components/table/FYTable.vue
index d87d4c8..b759ee0 100644
--- a/src/components/table/FYTable.vue
+++ b/src/components/table/FYTable.vue
@@ -4,20 +4,50 @@
       <template #options>
         <slot name="options"></slot>
       </template>
+      <template #buttons>
+        <slot name="buttons"></slot>
+      </template>
     </FYSearchBar>
   </el-row>
-
+  <el-row ref="expandRef" justify="space-between">
+    <el-col span="22">
+      <slot name="options-expand"></slot>
+    </el-col>
+    <el-col span="2">
+      <el-space :wrap="false">
+        <el-text size="small">瀛椾綋</el-text>
+        <el-radio-group v-model="fontSize" size="small">
+          <el-radio-button value="small">灏�</el-radio-button>
+          <el-radio-button value="default">涓�</el-radio-button>
+          <el-radio-button value="large">澶�</el-radio-button>
+        </el-radio-group>
+      </el-space>
+    </el-col>
+  </el-row>
+  <div ref="expand2Ref">
+    <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"></slot>
+    <slot name="table-column" :size="fontSize"></slot>
   </el-table>
 
   <el-pagination
+    v-if="pagination"
     ref="paginationRef"
     class="el-pagination"
     v-model:current-page="currentPage"
@@ -41,6 +71,24 @@
 export default {
   props: {
     rowClassName: undefined,
+    cellClassName: Function || String,
+    pagination: {
+      type: Boolean,
+      default: true
+    },
+    // '' | 'small' | 'default' | 'large'
+    size: {
+      type: String,
+      default: 'default'
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    totalCount: {
+      type: Number,
+      default: 0
+    }
   },
   data() {
     return {
@@ -50,9 +98,10 @@
       currentPage: 1,
       pageSize: 20,
       loading: false,
+      fontSize: 'default'
     };
   },
-  emits: ['search'],
+  emits: ['search', 'cellClick', 'tablePaste', 'sortChange'],
   watch: {
     currentPage(nValue, oValue) {
       if (nValue != oValue) {
@@ -64,6 +113,42 @@
         this.onSearch();
       }
     },
+    size: {
+      handler(nValue, oValue) {
+        if (nValue != oValue) {
+          this.fontSize = nValue;
+        }
+      },
+      immediate: true
+    },
+    data(nValue, oValue) {
+      if (nValue != oValue) {
+        this.tableData = nValue;
+      }
+    },
+    totalCount(nValue, oValue) {
+      if (nValue != oValue) {
+        this.total = nValue;
+      }
+    }
+  },
+  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';
+      }
+    }
   },
   methods: {
     /**
@@ -77,20 +162,33 @@
         'search',
         {
           currentPage: this.currentPage,
-          pageSize: this.pageSize,
+          pageSize: this.pageSize
         },
         (res) => {
-          this.tableData = res.data;
-          this.total = res.total;
+          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.$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 - ${h1}px - ${h2}px - 60px - var(--el-main-padding) * 2)`;
+      return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
     },
     tableRowClassName({ row }) {
       if (this.rowClassName) {
@@ -103,6 +201,21 @@
         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() {
     this.tableHeight = this.calcTableHeight();

--
Gitblit v1.9.3