From f2d6c4b8e83786cc462f1974b754aed168fc9030 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:50:16 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D:=20=E6=9B=B4=E6=96=B0=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/transfer/index.vue          | 63 ++++++++++++++-----
 .../src/document/zh-CN/guide/changelog.md     |  1 +
 package/layer/src/utils/index.ts              | 14 +++--
 3 files changed, 60 insertions(+), 18 deletions(-)

diff --git a/package/component/src/component/transfer/index.vue b/package/component/src/component/transfer/index.vue
index f50d6e7e..9611736a 100644
--- a/package/component/src/component/transfer/index.vue
+++ b/package/component/src/component/transfer/index.vue
@@ -69,9 +69,7 @@ watch(
     } else {
       allLeftChecked.value = false;
     }
-    if (
-      leftSelectedKeys.value.length > 0 && leftDataSource.value.length != 0
-    ) {
+    if (leftSelectedKeys.value.length > 0 && leftDataSource.value.length != 0) {
       hasLeftChecked.value = true;
     } else {
       hasLeftChecked.value = false;
@@ -103,7 +101,8 @@ watch(
       allRightChecked.value = false;
     }
     if (
-      rightSelectedKeys.value.length > 0 && rightDataSource.value.length != 0
+      rightSelectedKeys.value.length > 0 &&
+      rightDataSource.value.length != 0
     ) {
       hasRightChecked.value = true;
     } else {
@@ -200,16 +199,30 @@ 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="hasLeftChecked" :is-indeterminate="!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,23 +230,45 @@ 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="hasRightChecked" :is-indeterminate="!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>
diff --git a/package/document-component/src/document/zh-CN/guide/changelog.md b/package/document-component/src/document/zh-CN/guide/changelog.md
index f88ca0ae..599395a6 100644
--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@@ -18,6 +18,7 @@
         <ul>
           <li>[修复] tooltip 组件设置isAutoShow 属性时，宽度设置max-width 时拖动浏览器时出现...时，tooltip不显示问题。 by @dingyongya</li>
           <li>[修复] table 组件设置 ellipsisTooltip 属性时 出现...时，tooltip不显示问题。by @dingyongya</li>
+          <li>[优化] transfer 组件 selectedKeys 选中效果, 加入 checkbox 半选状态。by @Jmysy</li>
         </ul>
       </li>
     </ul>
diff --git a/package/layer/src/utils/index.ts b/package/layer/src/utils/index.ts
index c3ba477b..b2b646a4 100644
--- a/package/layer/src/utils/index.ts
+++ b/package/layer/src/utils/index.ts
@@ -344,7 +344,9 @@ export function removeNotifiyFromQueen(layerId: string | undefined) {
   // 间隙
   let transOffsetTop = 15;
   // @ts-ignore 删除项的高度
-  let offsetHeight = document.getElementById(layerId)?.firstElementChild?.firstElementChild?.offsetHeight;
+  let offsetHeight =
+    document.getElementById(layerId)?.firstElementChild?.firstElementChild
+      ?.offsetHeight;
   // @ts-ignore
   window.NotifiyQueen = window.NotifiyQueen || [];
   // @ts-ignore
@@ -364,10 +366,14 @@ export function removeNotifiyFromQueen(layerId: string | undefined) {
       ?.firstElementChild;
     if (offsetType === "rt" || offsetType === "lt") {
       // @ts-ignore
-      dom.style["top"] = parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
+      dom.style["top"] =
+        parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
     } else {
       // @ts-ignore
-      let bottom = parseFloat(dom.style["top"].split(" - ")[1]) - transOffsetTop - offsetHeight;
+      let bottom =
+        parseFloat(dom.style["top"].split(" - ")[1]) -
+        transOffsetTop -
+        offsetHeight;
       // @ts-ignore
       dom.style["top"] = "calc(100vh - " + bottom + "px)";
     }
@@ -385,4 +391,4 @@ export function getNotifyAnimationClass(offset: any) {
     suffix = "rl";
   }
   return `${prefix}-${suffix}`;
-}
\ No newline at end of file
+}