✨(component): 穿梭框选中效果加入半选状态

package/component/src/component/transfer/index.vue

@@ -38,17 +38,16 @@ const props = withDefaults(defineProps<LayTransferProps>(), {
 
 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([]);
-
 const allLeftChecked = ref(false);
 const allRightChecked = ref(false);
+const hasLeftChecked = ref(false);
+const hasRightChecked = ref(false);
 
-const allLeftChange = function (checked: any) {
+const allLeftChange = (checked: any) => {
   if (checked) {
     const ids = leftDataSource.value.map((item: any) => {
       return item[props.id];
@@ -70,11 +69,18 @@ watch(
     } else {
       allLeftChecked.value = false;
     }
+    if (
+      leftSelectedKeys.value.length > 0 && leftDataSource.value.length != 0
+    ) {
+      hasLeftChecked.value = true;
+    } else {
+      hasLeftChecked.value = false;
+    }
   },
   { deep: true }
 );
 
-const allRightChange = function (checked: any) {
+const allRightChange = (checked: any) => {
   if (checked) {
     const ids = rightDataSource.value.map((item: any) => {
       return item[props.id];
@@ -90,17 +96,24 @@ watch(
   () => {
     if (
       rightDataSource.value.length === rightSelectedKeys.value.length &&
-      rightDataSource.value.length != 0
+      rightDataSource.value.length > 0
     ) {
       allRightChecked.value = true;
     } else {
       allRightChecked.value = false;
     }
+    if (
+      rightSelectedKeys.value.length > 0 && rightDataSource.value.length != 0
+    ) {
+      hasRightChecked.value = true;
+    } else {
+      hasRightChecked.value = false;
+    }
   },
   { deep: true }
 );
 
-const add = function () {
+const add = () => {
   if (leftSelectedKeys.value.length === 0) {
     return;
   }
@@ -123,7 +136,7 @@ const add = function () {
   leftSelectedKeys.value = [];
 };
 
-const remove = function () {
+const remove = () => {
   if (rightSelectedKeys.value.length === 0) {
     return;
   }
@@ -187,29 +200,16 @@ const dataStyle = computed(() => {
     <div class="layui-transfer layui-form layui-border-box">
       <div class="layui-transfer-box" :style="boxStyle">
         <div class="layui-transfer-header">
-          <LayCheckbox
+          <LayCheckbox v-model="hasLeftChecked" :is-indeterminate="!allLeftChecked" skin="primary" label="all" @change="allLeftChange">
-            v-model="allLeftChecked"
-            skin="primary"
-            label="all"
-            @change="allLeftChange"
-          >
             <span>{{ title[0] }}</span>
           </LayCheckbox>
         </div>
         <div class="layui-transfer-search" v-if="showSearch">
-          <lay-input
+          <lay-input prefix-icon="layui-icon-search" @input="searchLeft" placeholder="关键词搜索"></lay-input>
-            prefix-icon="layui-icon-search"
-            @input="searchLeft"
-            placeholder="关键词搜索"
-          ></lay-input>
         </div>
         <ul class="layui-transfer-data" :style="dataStyle">
           <li v-for="dataSource in leftDataSource" :key="dataSource">
-            <LayCheckbox
+            <LayCheckbox v-model="leftSelectedKeys" skin="primary" :label="dataSource[id]">
-              v-model="leftSelectedKeys"
-              skin="primary"
-              :label="dataSource[id]"
-            >
               <slot v-if="slot.item" name="item" :data="dataSource"></slot>
               <span v-else>{{ dataSource.title }}</span>
             </LayCheckbox>
@@ -217,44 +217,23 @@ const dataStyle = computed(() => {
         </ul>
       </div>
       <div class="layui-transfer-active">
-        <LayButton
+        <LayButton type="primary" :disabled="leftSelectedKeys.length == 0" @click="add"><i
-          type="primary"
+            class="layui-icon layui-icon-next"></i></LayButton>
-          :disabled="leftSelectedKeys.length == 0"
+        <LayButton type="primary" :disabled="rightSelectedKeys.length == 0" @click="remove"><i
-          @click="add"
+            class="layui-icon layui-icon-prev"></i></LayButton>
-          ><i class="layui-icon layui-icon-next"></i
-        ></LayButton>
-        <LayButton
-          type="primary"
-          :disabled="rightSelectedKeys.length == 0"
-          @click="remove"
-          ><i class="layui-icon layui-icon-prev"></i
-        ></LayButton>
       </div>
       <div class="layui-transfer-box" :style="boxStyle">
         <div class="layui-transfer-header">
-          <LayCheckbox
+          <LayCheckbox v-model="hasRightChecked" :is-indeterminate="!allRightChecked" skin="primary" label="all" @change="allRightChange">
-            v-model="allRightChecked"
-            skin="primary"
-            label="all"
-            @change="allRightChange"
-          >
             <span>{{ title[1] }}</span>
           </LayCheckbox>
         </div>
         <div class="layui-transfer-search" v-if="showSearch">
-          <lay-input
+          <lay-input prefix-icon="layui-icon-search" @input="searchRight" placeholder="关键词搜索"></lay-input>
-            prefix-icon="layui-icon-search"
-            @input="searchRight"
-            placeholder="关键词搜索"
-          ></lay-input>
         </div>
         <ul class="layui-transfer-data" :style="dataStyle">
           <li v-for="dataSource in rightDataSource" :key="dataSource">
-            <LayCheckbox
+            <LayCheckbox v-model="rightSelectedKeys" skin="primary" :label="dataSource[id]">
-              v-model="rightSelectedKeys"
-              skin="primary"
-              :label="dataSource[id]"
-            >
               <slot v-if="slot.item" name="item" :data="dataSource"></slot>
               <span v-else>{{ dataSource.title }}</span>
             </LayCheckbox>