From cebceeac1a79e217c60dc2e3ef0fefec11e8a0dc Mon Sep 17 00:00:00 2001
From: Odboy <tianjun@odboy.cn>
Date: Thu, 5 Feb 2026 20:24:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(table):=20=E6=96=B0=E5=A2=9E=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=8E=B0=E6=9C=89=E8=A1=A8=E6=A0=BC=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 CuteDynamicTable 组件支持拖拽排序功能
- 实现表格数据源动态获取和分页处理
- 集成 sortablejs 实现拖拽排序交互
- 优化 CuteDragTable 和 CuteSimpleTable 初始化逻辑
- 添加表格选择状态管理和排序功能
- 实现响应式高度计算和加载状态控制
---
 .../components/advanced/CuteDragTable.vue     |   2 +-
 .../components/advanced/CuteDynamicTable.vue  | 232 ++++++++++++++++++
 .../components/advanced/CuteSimpleTable.vue   |   2 +-
 3 files changed, 234 insertions(+), 2 deletions(-)
 create mode 100644 cutejava-front/src/views/components/advanced/CuteDynamicTable.vue

diff --git a/cutejava-front/src/views/components/advanced/CuteDragTable.vue b/cutejava-front/src/views/components/advanced/CuteDragTable.vue
index a93d7975..a5e1aa83 100644
--- a/cutejava-front/src/views/components/advanced/CuteDragTable.vue
+++ b/cutejava-front/src/views/components/advanced/CuteDragTable.vue
@@ -122,7 +122,7 @@ export default {
     }
   },
   mounted() {
-    this.initData()
+    this.refresh()
   },
   methods: {
     refresh() {
diff --git a/cutejava-front/src/views/components/advanced/CuteDynamicTable.vue b/cutejava-front/src/views/components/advanced/CuteDynamicTable.vue
new file mode 100644
index 00000000..bfd6e479
--- /dev/null
+++ b/cutejava-front/src/views/components/advanced/CuteDynamicTable.vue
@@ -0,0 +1,232 @@
+<!--
+ * 动态表格组件：封装自定义逻辑与参数，表格支持拖拽排序
+ * @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="showSelect ? 11 : 12" style="text-align: left">
+        <!-- 通过  <template v-slot:batchArea> 插槽，数据表格上方左侧 添加 批量操作入口 -->
+        <slot name="batchArea" />
+      </el-col>
+      <el-col :span="showSelect ? 11 : 12" style="text-align: left">
+        <!-- 通过  <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-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)"
+      />
+    </el-table></div>
+</template>
+
+<script>
+import Sortable from 'sortablejs'
+
+export default {
+  name: 'CuteDragTable',
+  props: {
+    primaryKey: {
+      type: String,
+      required: true,
+      default: 'id'
+    },
+    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: false,
+      default: function() {
+        return {
+          current: 1,
+          pageSize: 10,
+          total: 0
+        }
+      }
+    }
+  },
+  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
+          this.$emit('page-change', currentPage, pageSize)
+          this.refresh()
+        },
+        orderBy: '',
+        selection: []
+      }
+    }
+  },
+  computed: {
+    height() {
+      return document.documentElement.clientHeight - 300
+    }
+  },
+  mounted() {
+    this.refresh()
+  },
+  methods: {
+    refresh() {
+      this.crud.orderBy = ''
+      this.crud.selection = []
+      this.initData()
+      this.initDragTable()
+    },
+    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('CuteDragTable请求远程数据异常', 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.column, result.orderType)
+      this.crud.orderBy = result
+      this.refresh()
+    },
+    initDragTable() {
+      const that = this
+      const table = that.$refs.table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
+      Sortable.create(table, {
+        animation: 1000,
+        onEnd({ newIndex, oldIndex }) {
+          // 拖拽排序数据
+          that.crud.dataSource.splice(newIndex, 0, that.crud.dataSource.splice(oldIndex, 1)[0])
+          const newArray = that.crud.dataSource.slice(0)
+          that.crud.dataSource = [] // 必须有此步骤，不然拖拽后回弹
+          that.$nextTick(function() {
+            that.crud.dataSource = newArray // 重新赋值，用新数据来刷新视图
+            this.updateOrderNum(that.crud.dataSource)// 更改列表中的序号，使序号1.2.3.4.....显示，不然就是行拖拽后乱序显示如:3.2.4.1...
+          })
+        }
+      })
+    },
+    updateOrderNum(data) {
+      data.forEach((item, index) => {
+        item.orderNum = index + 1
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/variables";
+
+.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>
diff --git a/cutejava-front/src/views/components/advanced/CuteSimpleTable.vue b/cutejava-front/src/views/components/advanced/CuteSimpleTable.vue
index 97c767d1..c676da10 100644
--- a/cutejava-front/src/views/components/advanced/CuteSimpleTable.vue
+++ b/cutejava-front/src/views/components/advanced/CuteSimpleTable.vue
@@ -130,7 +130,7 @@ export default {
     }
   },
   mounted() {
-    this.initData()
+    this.refresh()
   },
   methods: {
     refresh() {