From e2e538165b601d1b9b2abcd6ef12f2f62c54a6a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com>
Date: Tue, 12 Oct 2021 09:30:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(transfer):=20=E5=88=9D=E6=AD=A5=E9=9B=86?=
 =?UTF-8?q?=E6=88=90=20transfer=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/zh-CN/components/transfer.md |   5 +-
 src/module/transfer/index.vue          | 308 +++++--------------------
 2 files changed, 59 insertions(+), 254 deletions(-)

diff --git a/docs/docs/zh-CN/components/transfer.md b/docs/docs/zh-CN/components/transfer.md
index 2e77d27e..85a4208f 100644
--- a/docs/docs/zh-CN/components/transfer.md
+++ b/docs/docs/zh-CN/components/transfer.md
@@ -1,7 +1,7 @@
 ::: demo
 
 <template>
-  <lay-transfer><div style="padding: 30px;">面板</div></lay-transfer>
+  <lay-transfer :dataSource="dataSource"></lay-transfer>
 </template>
 
 <script>
@@ -10,7 +10,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
+    const dataSource = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
+
     return {
+      dataSource
     }
   }
 }
diff --git a/src/module/transfer/index.vue b/src/module/transfer/index.vue
index 60eb6685..15347af0 100644
--- a/src/module/transfer/index.vue
+++ b/src/module/transfer/index.vue
@@ -1,160 +1,24 @@
 <template>
   <div>
-    <div
-      class="layui-transfer layui-form layui-border-box"
-    >
-      <div
-        class="layui-transfer-box"
-        style="width: 200px; height: 360px"
-      >
+    <div class="layui-transfer layui-form layui-border-box">
+      <div class="layui-transfer-box" style="width: 200px; height: 360px">
         <div class="layui-transfer-header">
-          <input
-            type="checkbox"
-            name="layTransferLeftCheckAll"
-            lay-filter="layTransferCheckbox"
-            lay-type="all"
-            lay-skin="primary"
-            title="列表一"
-          />
-          <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
-            <span>列表一</span><i class="layui-icon layui-icon-ok"></i>
-          </div>
+          <lay-checkbox
+            skin="primary"
+            label="all"
+            v-model="allLeftSelectedKeys"
+          >
+            <span>列表一</span>
+          </lay-checkbox>
         </div>
         <ul class="layui-transfer-data" style="height: 320px">
-          <li>
-            <input
-              type="checkbox"
-              name="layTransferLeftCheck"
-              lay-skin="primary"
-              lay-filter="layTransferCheckbox"
-              title="油酥饼"
-              value="2"
-            />
-            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
-              <span>油酥饼</span><i class="layui-icon layui-icon-ok"></i>
-            </div>
-          </li>
-          <li>
-            <input
-              type="checkbox"
-              name="layTransferLeftCheck"
-              lay-skin="primary"
-              lay-filter="layTransferCheckbox"
-              title="串串香"
-              disabled=""
-              value="4"
-            />
-            <div
-              class="
-                layui-unselect
-                layui-form-checkbox
-                layui-checkbox-disabled
-                layui-disabled
-              "
-              lay-skin="primary"
+          <li v-for="dataSource in leftDataSource" :key="dataSource">
+            <lay-checkbox
+              v-model="leftSelectedKeys"
+              skin="primary"
+              :label="dataSource[id]"
+              ><span>{{ dataSource.title }}</span></lay-checkbox
             >
-              <span>串串香</span><i class="layui-icon layui-icon-ok"></i>
-            </div>
-          </li>
-          <li>
-            <input
-              type="checkbox"
-              name="layTransferLeftCheck"
-              lay-skin="primary"
-              lay-filter="layTransferCheckbox"
-              title="驴打滚"
-              value="6"
-            />
-            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
-              <span>驴打滚</span><i class="layui-icon layui-icon-ok"></i>
-            </div>
-          </li>
-          <li>
-            <input
-              type="checkbox"
-              name="layTransferLeftCheck"
-              lay-skin="primary"
-              lay-filter="layTransferCheckbox"
-              title="烤冷面"
-              value="8"
-            />
-            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
-              <span>烤冷面</span><i class="layui-icon layui-icon-ok"></i>
-            </div>
-          </li>
-          <li>
-            <input
-              type="checkbox"
-              name="layTransferLeftCheck"
-              lay-skin="primary"
-              lay-filter="layTransferCheckbox"
-              title="肉夹馍"
-              value="10"
-            />
-            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
-              <span>肉夹馍</span><i class="layui-icon layui-icon-ok"></i>
-            </div>
-          </li>
-          <li>
-            <input
-              type="checkbox"
-              name="layTransferLeftCheck"
-              lay-skin="primary"
-              lay-filter="layTransferCheckbox"
-              title="凉皮"
-              value="12"
-            />
-            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
-              <span>凉皮</span><i class="layui-icon layui-icon-ok"></i>
-            </div>
-          </li>
-          <li>
-            <input
-              type="checkbox"
-              name="layTransferLeftCheck"
-              lay-skin="primary"
-              lay-filter="layTransferCheckbox"
-              title="羊肉泡馍"
-              value="13"
-            />
-            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
-              <span>羊肉泡馍</span><i class="layui-icon layui-icon-ok"></i>
-            </div>
-          </li>
-          <li>
-            <input
-              type="checkbox"
-              name="layTransferLeftCheck"
-              lay-skin="primary"
-              lay-filter="layTransferCheckbox"
-              title="冰糖葫芦"
-              disabled=""
-              value="14"
-            />
-            <div
-              class="
-                layui-unselect
-                layui-form-checkbox
-                layui-checkbox-disabled
-                layui-disabled
-              "
-              lay-skin="primary"
-            >
-              <span>冰糖葫芦</span><i class="layui-icon layui-icon-ok"></i>
-            </div>
-          </li>
-          <li>
-            <input
-              type="checkbox"
-              name="layTransferLeftCheck"
-              lay-skin="primary"
-              lay-filter="layTransferCheckbox"
-              title="狼牙土豆"
-              value="15"
-            />
-            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
-              <span>狼牙土豆</span><i class="layui-icon layui-icon-ok"></i>
-            </div>
           </li>
         </ul>
       </div>
@@ -173,110 +37,24 @@
           <i class="layui-icon layui-icon-prev"></i>
         </button>
       </div>
-      <div
-        class="layui-transfer-box"
-        style="width: 200px; height: 360px"
-      >
+      <div class="layui-transfer-box" style="width: 200px; height: 360px">
         <div class="layui-transfer-header">
-          <input
-            type="checkbox"
-            name="layTransferRightCheckAll"
-            lay-filter="layTransferCheckbox"
-            lay-type="all"
-            lay-skin="primary"
-            title="列表二"
-          />
-          <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
-            <span>列表二</span><i class="layui-icon layui-icon-ok"></i>
-          </div>
+          <lay-checkbox
+            skin="primary"
+            label="all"
+            v-model="allRightSelectedKeys"
+          >
+            <span>列表二</span>
+          </lay-checkbox>
         </div>
         <ul class="layui-transfer-data" style="height: 320px">
-          <li>
-            <input
-              type="checkbox"
-              name="layTransferRightCheck"
-              lay-skin="primary"
-              lay-filter="layTransferCheckbox"
-              title="瓦罐汤"
-              value="1"
-            />
-            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
-              <span>瓦罐汤</span><i class="layui-icon layui-icon-ok"></i>
-            </div>
-          </li>
-          <li>
-            <input
-              type="checkbox"
-              name="layTransferRightCheck"
-              lay-skin="primary"
-              lay-filter="layTransferCheckbox"
-              title="炸酱面"
-              value="3"
-            />
-            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
-              <span>炸酱面</span><i class="layui-icon layui-icon-ok"></i>
-            </div>
-          </li>
-          <li>
-            <input
-              type="checkbox"
-              name="layTransferRightCheck"
-              lay-skin="primary"
-              lay-filter="layTransferCheckbox"
-              title="豆腐脑"
-              value="5"
-            />
-            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
-              <span>豆腐脑</span><i class="layui-icon layui-icon-ok"></i>
-            </div>
-          </li>
-          <li>
-            <input
-              type="checkbox"
-              name="layTransferRightCheck"
-              lay-skin="primary"
-              lay-filter="layTransferCheckbox"
-              title="北京烤鸭"
-              value="7"
-            />
-            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
-              <span>北京烤鸭</span><i class="layui-icon layui-icon-ok"></i>
-            </div>
-          </li>
-          <li>
-            <input
-              type="checkbox"
-              name="layTransferRightCheck"
-              lay-skin="primary"
-              lay-filter="layTransferCheckbox"
-              title="毛血旺"
-              disabled=""
-              value="9"
-            />
-            <div
-              class="
-                layui-unselect
-                layui-form-checkbox
-                layui-checkbox-disabled
-                layui-disabled
-              "
-              lay-skin="primary"
+          <li v-for="dataSource in rightDataSource" :key="dataSource">
+            <lay-checkbox
+              v-model="rightSelectedKeys"
+              skin="primary"
+              :label="dataSource[id]"
+              ><span>{{ dataSource.title }}</span></lay-checkbox
             >
-              <span>毛血旺</span><i class="layui-icon layui-icon-ok"></i>
-            </div>
-          </li>
-          <li>
-            <input
-              type="checkbox"
-              name="layTransferRightCheck"
-              lay-skin="primary"
-              lay-filter="layTransferCheckbox"
-              title="臊子面"
-              value="11"
-            />
-            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
-              <span>臊子面</span><i class="layui-icon layui-icon-ok"></i>
-            </div>
           </li>
         </ul>
       </div>
@@ -285,7 +63,31 @@
 </template>
 <script setup name="LayTransfer"></script>
 <script setup lang="ts">
-import { defineProps } from 'vue'
+import { defineProps, ref } from 'vue'
 
-const props = defineProps<{}>()
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    dataSource: Object[]
+    selectedKeys: Array<String>
+  }>(),
+  {
+    id: 'id',
+    dataSource: function () {
+      return []
+    },
+    selectedKeys: function () {
+      return []
+    },
+  }
+)
+
+const leftDataSource = ref([...props.dataSource])
+const rightDataSource = ref([])
+
+const leftSelectedKeys = ref([])
+const rightSelectedKeys = ref([])
+
+const allLeftSelectedKeys = ref([])
+const allRightSelectedKeys = ref([])
 </script>