feat(CuteTransfer): 添加搜索功能和选择统计显示

- 添加搜索输入框，支持关键字搜索功能
- 实现左侧表格搜索过滤逻辑
- 添加左右两侧表格的选择数量统计显示
- 为表格组件添加禁用属性支持
- 更新演示页面数据源，增加更多测试数据
- 添加相关的样式定义以美化统计显示区域

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>

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: 2, name: '小红', description: '小红牛P' },
-        { id: 3, name: '小明', description: '小明牛P' },
+        { id: 3, name: '小蓝', description: '小蓝牛P' },
-        { id: 4, name: '小明', description: '小明牛P' },
+        { id: 4, name: '小绿', description: '小绿牛P' },
-        { id: 5, 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' }
       ]
     }
   },