feat(transfer): 新增 showSearch 属性

src/component/page/index.vue

@@ -56,12 +56,7 @@ const maxPage = ref(0);
 const totalPage = computed(() => {
   maxPage.value = Math.ceil(props.total / props.limit);
   let r: number[] = [],
-    start =
-      maxPage.value <= props.pages
-        ? 1
-        : currentPage.value > pages
-        ? currentPage.value - pages
-        : 1;
+    start = maxPage.value <= props.pages ? 1 : currentPage.value > pages ? currentPage.value - pages : 1;
   for (let i = start; ; i++) {
     if (r.length >= props.pages || i > maxPage.value) {
       break;
@@ -100,7 +95,6 @@ const jumpPage = function () {
 
 watch(inlimit, function () {
   currentPage.value = 1;
-  // maxPage.value = Math.ceil(props.total / inlimit.value);
 });
 
 watch(currentPage, function () {

src/component/table/index.vue

@@ -202,11 +202,12 @@ onMounted(() => {
                 <template v-for="column in columns" :key="column">
                   <th v-if="tableColumnKeys.includes(column.key)">
                     <!-- TODO Table header slot  -->
-                    <div
-                      class="layui-table-cell"
-                      :style="{ width: column.width }"
-                    >
+                    <div class="layui-table-cell" :style="{ width: column.width }">
                       <span>{{ column.title }}</span>
+                      <span v-if="column.sort" class="layui-table-sort layui-inline" lay-sort="">
+                        <i class="layui-edge layui-table-sort-asc" title="升序"></i>
+                        <i class="layui-edge layui-table-sort-desc" title="降序"></i>
+                      </span>
                     </div>
                   </th>
                 </template>

src/component/transfer/index.vue

@@ -6,12 +6,14 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
+import LayScroll from "../scroll";
 import { Ref, ref, useSlots, watch } from "vue";
 import { Recordable } from "../../types";
 
 export interface LayTransferProps {
   id?: string;
   title?: string[];
+  showSearch?: boolean;
   dataSource: Recordable[];
 }
 
@@ -21,12 +23,16 @@ const props = withDefaults(defineProps<LayTransferProps>(), {
   id: "id",
   title: () => ["主列表", "副列表"],
   dataSource: () => [],
+  showSearch: false,
   selectedKeys: () => [],
 });
 
 const leftDataSource: Ref<any[]> = ref([...props.dataSource]);
 const rightDataSource: Ref<any[]> = ref([]);
 
+const _leftDataSource: Ref<any[]> = ref([...props.dataSource]);
+const _rightDataSource: Ref<any[]> = ref([]);
+
 const leftSelectedKeys: Ref<string[]> = ref([]);
 const rightSelectedKeys: Ref<string[]> = ref([]);
 
@@ -97,6 +103,14 @@ const add = function () {
   leftDataSource.value = leftDataSource.value.filter(
     (item) => leftSelectedKeys.value.indexOf(item.id) === -1
   );
+  _leftDataSource.value.forEach((item) => {
+    if (leftSelectedKeys.value.indexOf(item.id) != -1) {
+      _rightDataSource.value.push(item);
+    }
+  });
+  _leftDataSource.value = _leftDataSource.value.filter(
+    (item) => leftSelectedKeys.value.indexOf(item.id) === -1
+  );
   leftSelectedKeys.value = [];
 };
 
@@ -112,8 +126,38 @@ const remove = function () {
   rightDataSource.value = rightDataSource.value.filter(
     (item) => rightSelectedKeys.value.indexOf(item.id) === -1
   );
+  _rightDataSource.value.forEach((item) => {
+    if (rightSelectedKeys.value.indexOf(item.id) != -1) {
+      _leftDataSource.value.push(item);
+    }
+  });
+  _rightDataSource.value = _rightDataSource.value.filter(
+    (item) => rightSelectedKeys.value.indexOf(item.id) === -1
+  );
   rightSelectedKeys.value = [];
 };
+
+const searchLeft = (e: any) => {
+    if(e.target.value === "") {
+      leftDataSource.value = _leftDataSource.value;
+    }
+    leftDataSource.value = _leftDataSource.value.filter((item) => {
+      if(item.title.indexOf(e.target.value) != -1) {
+        return item;
+      };
+    })
+}
+
+const searchRight = (e: any) => {
+    if(e.target.value === "") {
+      rightDataSource.value = _rightDataSource.value;
+    }
+    rightDataSource.value = _rightDataSource.value.filter((item) => {
+      if(item.title.indexOf(e.target.value) != -1) {
+        return item;
+      };
+    })
+}
 </script>
 
 <template>
@@ -130,6 +174,10 @@ const remove = function () {
             <span>{{ title[0] }}</span>
           </lay-checkbox>
         </div>
+        <div class="layui-transfer-search" v-if="showSearch">
+          <i class="layui-icon layui-icon-search"></i
+          ><input type="input" class="layui-input" @input="searchLeft" placeholder="关键词搜索" />
+        </div>
         <ul class="layui-transfer-data" style="height: 320px">
           <li v-for="dataSource in leftDataSource" :key="dataSource">
             <lay-checkbox
@@ -168,6 +216,10 @@ const remove = function () {
             <span>{{ title[1] }}</span>
           </lay-checkbox>
         </div>
+        <div class="layui-transfer-search" v-if="showSearch">
+          <i class="layui-icon layui-icon-search"></i
+          ><input type="input" class="layui-input" @input="searchRight" placeholder="关键词搜索" />
+        </div>
         <ul class="layui-transfer-data" style="height: 320px">
           <li v-for="dataSource in rightDataSource" :key="dataSource">
             <lay-checkbox