From 63c3d95049e9d101c273ee83379aef4c3d3d05f6 Mon Sep 17 00:00:00 2001
From: Odboy <tianjun@odboy.cn>
Date: Sat, 31 Jan 2026 08:59:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(CuteTransfer):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD=E5=92=8C=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加搜索输入框，支持关键字搜索功能
- 实现左侧表格搜索过滤逻辑
- 添加左右两侧表格的选择数量统计显示
- 为表格组件添加禁用属性支持
- 更新演示页面数据源，增加更多测试数据
- 添加相关的样式定义以美化统计显示区域
---
 .../src/views/components/dev/CuteTransfer.vue | 52 ++++++++++++++++++-
 .../views/componentsDemo/CuteOtherDemo.vue    | 21 ++++++--
 2 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/cutejava-front/src/views/components/dev/CuteTransfer.vue b/cutejava-front/src/views/components/dev/CuteTransfer.vue
index 4f4da631..05d3364b 100644
--- a/cutejava-front/src/views/components/dev/CuteTransfer.vue
+++ b/cutejava-front/src/views/components/dev/CuteTransfer.vue
@@ -8,8 +8,17 @@
   <el-row>
     <!--    <el-button @click="onTestValue">测试值</el-button>-->
     <el-col :span="11">
+      <el-input
+        v-model="searchValue"
+        size="mini"
+        placeholder="输入关键字搜索"
+        style="width: 100%;"
+        @input="onSearchValueChange"
+      />
       <el-table
+        ref="leftTableRef"
         v-loading="loading"
+        :disabled="disabled"
         stripe
         border
         empty-text="暂无数据"
@@ -25,6 +34,9 @@
         <el-table-column type="selection" width="55" />
         <slot />
       </el-table>
+      <el-col :span="24" class="selection-box">
+        共计 <font class="selection-count">{{ leftDataSource && leftDataSource.length }}</font> 条，已选 <font class="selection-count">{{ leftSelection && leftSelection.length }}</font> 条
+      </el-col>
     </el-col>
     <el-col :span="2" style="text-align: center">
       <el-row style="margin-top: 130px">
@@ -48,7 +60,8 @@
     </el-col>
     <el-col :span="11">
       <el-table
-        ref="selectedTable"
+        ref="rightTableRef"
+        :disabled="disabled"
         stripe
         border
         empty-text="暂无数据"
@@ -64,6 +77,9 @@
         <el-table-column type="selection" width="55" />
         <slot />
       </el-table>
+      <el-col :span="24" class="selection-box">
+        共计 <font class="selection-count">{{ rightDataSource && rightDataSource.length }}</font> 条，已选 <font class="selection-count">{{ rightSelection && rightSelection.length }}</font> 条
+      </el-col>
     </el-col>
   </el-row>
 </template>
@@ -118,11 +134,13 @@ export default {
   data() {
     return {
       height: 350,
+      searchValue: '',
       leftDataSource: [],
       leftSelection: [],
       rightDataSource: [],
       rightSelection: [],
-      rightValues: []
+      rightValues: [],
+      searchCacheDS: []
     }
   },
   mounted() {
@@ -147,6 +165,17 @@ export default {
     }
   },
   methods: {
+    onSearchValueChange(value) {
+      if (this.searchCacheDS.length === 0) {
+        this.searchCacheDS = this.leftDataSource
+      }
+      if (value) {
+        this.leftDataSource = this.searchCacheDS.filter(data => !value || JSON.stringify(data).includes(value))
+      } else {
+        this.leftDataSource = this.searchCacheDS
+        this.searchCacheDS = []
+      }
+    },
     onLeftTableSelectionChange(selection) {
       this.leftSelection = selection
     },
@@ -218,3 +247,22 @@ export default {
 }
 </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;
+  border-left: 1px solid #cccccc;
+  border-bottom: 1px solid #cccccc;
+  border-right: 1px solid #cccccc;
+}
+
+.selection-count {
+  color: $menuActiveText;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue b/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue
index 1df93146..fa80061e 100644
--- a/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue
@@ -90,10 +90,23 @@ export default {
       searchFormModel: {},
       leftDataSource: [
         { id: 1, name: '小明', description: '小明牛P' },
-        { id: 2, name: '小明', description: '小明牛P' },
-        { id: 3, name: '小明', description: '小明牛P' },
-        { id: 4, name: '小明', description: '小明牛P' },
-        { id: 5, name: '小明', description: '小明牛P' }
+        { id: 2, name: '小红', description: '小红牛P' },
+        { id: 3, name: '小蓝', description: '小蓝牛P' },
+        { id: 4, name: '小绿', description: '小绿牛P' },
+        { id: 5, name: '小黄', description: '小黄牛P' },
+        { id: 6, name: '小紫', description: '小紫牛P' },
+        { id: 7, name: '小青', description: '小青牛P' },
+        { id: 8, name: '小橙', description: '小橙牛P' },
+        { id: 9, name: '小贵', description: '小贵牛P' },
+        { id: 10, name: '小陈', description: '小陈牛P' },
+        { id: 11, name: '小勇', description: '小勇牛P' },
+        { id: 12, name: '小田', description: '小田牛P' },
+        { id: 13, name: '小天', description: '小天牛P' },
+        { id: 14, name: '小邓', description: '小邓牛P' },
+        { id: 15, name: '小周', description: '小周牛P' },
+        { id: 16, name: '小吴', description: '小吴牛P' },
+        { id: 17, name: '小郑', description: '小郑牛P' },
+        { id: 18, name: '小王', description: '小王牛P' }
       ]
     }
   },