From f4ed5b4d9bb67ad65ec7862a44dc0727b1f3f26a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Thu, 30 Jun 2022 23:46:23 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20=E7=A9=BF=E6=A2=AD?=
 =?UTF-8?q?=E6=A1=86=E9=80=89=E4=B8=AD=E6=95=88=E6=9E=9C=E5=8A=A0=E5=85=A5?=
 =?UTF-8?q?=E5=8D=8A=E9=80=89=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/transfer/index.vue          | 83 +++++++------------
 1 file changed, 31 insertions(+), 52 deletions(-)

diff --git a/package/component/src/component/transfer/index.vue b/package/component/src/component/transfer/index.vue
index 16f65c66..f50d6e7e 100644
--- a/package/component/src/component/transfer/index.vue
+++ b/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
-            v-model="allLeftChecked"
-            skin="primary"
-            label="all"
-            @change="allLeftChange"
-          >
+          <LayCheckbox v-model="hasLeftChecked" :is-indeterminate="!allLeftChecked" skin="primary" label="all" @change="allLeftChange">
             <span>{{ title[0] }}</span>
           </LayCheckbox>
         </div>
         <div class="layui-transfer-search" v-if="showSearch">
-          <lay-input
-            prefix-icon="layui-icon-search"
-            @input="searchLeft"
-            placeholder="关键词搜索"
-          ></lay-input>
+          <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
-              v-model="leftSelectedKeys"
-              skin="primary"
-              :label="dataSource[id]"
-            >
+            <LayCheckbox 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
-          type="primary"
-          :disabled="leftSelectedKeys.length == 0"
-          @click="add"
-          ><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>
+        <LayButton type="primary" :disabled="leftSelectedKeys.length == 0" @click="add"><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
-            v-model="allRightChecked"
-            skin="primary"
-            label="all"
-            @change="allRightChange"
-          >
+          <LayCheckbox v-model="hasRightChecked" :is-indeterminate="!allRightChecked" skin="primary" label="all" @change="allRightChange">
             <span>{{ title[1] }}</span>
           </LayCheckbox>
         </div>
         <div class="layui-transfer-search" v-if="showSearch">
-          <lay-input
-            prefix-icon="layui-icon-search"
-            @input="searchRight"
-            placeholder="关键词搜索"
-          ></lay-input>
+          <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
-              v-model="rightSelectedKeys"
-              skin="primary"
-              :label="dataSource[id]"
-            >
+            <LayCheckbox 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>