perf(transfer): 初步集成穿梭框

docs/docs/zh-CN/components/checkbox.md

@@ -4,7 +4,7 @@
 
 <template>
   <lay-form>
-    <lay-checkbox name="like" skin="primary"  v-model:checked="checked1" label="1" >普通</lay-checkbox>
+    <lay-checkbox name="like" skin="primary"  v-model:checked="checked1" label="1" ></lay-checkbox>
  </lay-form>
 </template>
 

src/module/button/index.vue

@@ -7,6 +7,7 @@
       fluid ? 'layui-btn-fluid' : '',
       radius ? 'layui-btn-radius' : '',
       border ? 'layui-border-' + border : '',
+      disabled ? 'layui-btn-disabled': ''
     ]"
   >
     <slot />
@@ -22,5 +23,6 @@ const props = defineProps<{
   fluid?: boolean
   radius?: boolean
   border?: string
+  disabled?: boolean
 }>()
 </script>

src/module/checkbox/index.vue

@@ -16,7 +16,9 @@
 </template>
 
 <script setup name="LayCheckbox" lang="ts">
-import { defineProps } from 'vue'
+import { defineProps, useSlots } from 'vue'
+
+const slot = useSlots()
 
 const props =
   defineProps<{

src/module/table/component/checkbox.vue

@@ -8,13 +8,12 @@
           'layui-checkbox-disbaled layui-disabled': disabled,
         },
         'layui-form-checkbox',
-        props.modelValue.includes(props.label) ? 'layui-form-checked' : '',
+        modelValue.includes(label) ? 'layui-form-checked' : '',
       ]"
       :lay-skin="skin"
     >
       <span><slot /></span>
-      <i v-if="skin == 'primary'" class="layui-icon layui-icon-ok" />
+      <i class="layui-icon layui-icon-ok" />
-      <i v-if="!skin" class="layui-icon layui-icon-ok" />
     </div>
   </span>
 </template>

src/module/table/index.vue

@@ -183,7 +183,6 @@ const change = function (page: any) {
   emit('change', page)
 }
 
-/// 表格打印
 const print = function () {
   let subOutputRankPrint = document.getElementById('lay-table') as HTMLElement
   let newContent = subOutputRankPrint.innerHTML

src/module/transfer/component/checkbox.vue

@@ -0,0 +1,48 @@
+<template>
+  <span @click="handleClick">
+    <input type="checkbox" :name="name" :value="label" />
+    <div
+      class="layui-unselect"
+      :class="[
+        {
+          'layui-checkbox-disbaled layui-disabled': disabled,
+        },
+        'layui-form-checkbox',
+        modelValue.includes(label) ? 'layui-form-checked' : '',
+      ]"
+      :lay-skin="skin"
+    >
+      <span><slot /></span>
+      <i class="layui-icon layui-icon-ok" />
+    </div>
+  </span>
+</template>
+
+<script setup name="LayCheckbox" lang="ts">
+import { defineProps, ref } from 'vue'
+
+const props =
+  defineProps<{
+    modelValue: string[]
+    label: string
+    disabled?: boolean
+    name?: string
+    skin?: string
+  }>()
+
+const hasValue = ref(false)
+
+const emit = defineEmits(['update:modelValue'])
+
+const handleClick = function () {
+  if (!props.disabled) {
+    if (!props.modelValue.includes(props.label)) {
+      props.modelValue.push(props.label)
+    } else {
+      let index = props.modelValue.indexOf(props.label)
+      props.modelValue.splice(index, 1)
+    }
+    emit('update:modelValue', props.modelValue)
+  }
+}
+</script>

src/module/transfer/index.vue

@@ -4,59 +4,54 @@
       <div class="layui-transfer-box" style="width: 200px; height: 360px">
         <div class="layui-transfer-header">
           <lay-checkbox
-            v-model="allLeftSelectedKeys"
+            v-model:checked="allLeftChecked"
             skin="primary"
             label="all"
+            @change="allLeftChange"
           >
-            <span>列表一</span>
+            <span>{{ title[0] }}</span>
           </lay-checkbox>
         </div>
         <ul class="layui-transfer-data" style="height: 320px">
           <li v-for="dataSource in leftDataSource" :key="dataSource">
-            <lay-checkbox
+            <transfer-checkbox
               v-model="leftSelectedKeys"
               skin="primary"
               :label="dataSource[id]"
             >
               <span>{{ dataSource.title }}</span>
-            </lay-checkbox>
+            </transfer-checkbox>
           </li>
         </ul>
       </div>
       <div class="layui-transfer-active">
-        <button
+        <lay-button @click="add" type="primary" :disabled="leftSelectedKeys.length==0"
-          type="button"
+          ><i class="layui-icon layui-icon-next"
-          class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled"
+        /></lay-button>
-          data-index="0"
+        <lay-button @click="remove" type="primary" :disabled="rightSelectedKeys.length==0"
-        >
+          ><i class="layui-icon layui-icon-prev"
-          <i class="layui-icon layui-icon-next" /></button
+        /></lay-button>
-        ><button
-          type="button"
-          class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled"
-          data-index="1"
-        >
-          <i class="layui-icon layui-icon-prev" />
-        </button>
       </div>
       <div class="layui-transfer-box" style="width: 200px; height: 360px">
         <div class="layui-transfer-header">
           <lay-checkbox
-            v-model="allRightSelectedKeys"
+            v-model:checked="allRightChecked"
             skin="primary"
             label="all"
+            @change="allRightChange"
           >
-            <span>列表二</span>
+            <span>{{ title[1] }}</span>
           </lay-checkbox>
         </div>
         <ul class="layui-transfer-data" style="height: 320px">
           <li v-for="dataSource in rightDataSource" :key="dataSource">
-            <lay-checkbox
+            <transfer-checkbox
               v-model="rightSelectedKeys"
               skin="primary"
               :label="dataSource[id]"
             >
               <span>{{ dataSource.title }}</span>
-            </lay-checkbox>
+            </transfer-checkbox>
           </li>
         </ul>
       </div>
@@ -65,17 +60,23 @@
 </template>
 <script setup name="LayTransfer"></script>
 <script setup lang="ts">
-import { defineProps, ref } from 'vue'
+import { defineProps, Ref, ref, watch } from 'vue'
 import { Recordable } from '/@src/module/type'
+import transferCheckbox from './component/checkbox.vue'
+import { check } from 'prettier'
 
 const props = withDefaults(
   defineProps<{
     id?: string
+    title?: string[]
     dataSource: Recordable[]
     selectedKeys: Array<string>
   }>(),
   {
     id: 'id',
+    title: function() {
+      return ['主列表','副列表']
+    },
     dataSource: function () {
       return []
     },
@@ -85,12 +86,64 @@ const props = withDefaults(
   }
 )
 
-const leftDataSource = ref([...props.dataSource])
+const leftDataSource: Ref<any[]> = ref([...props.dataSource])
-const rightDataSource = ref([])
+const rightDataSource: Ref<any[]> = ref([])
 
-const leftSelectedKeys = ref([])
+const leftSelectedKeys: Ref<string[]> = ref([])
-const rightSelectedKeys = ref([])
+const rightSelectedKeys: Ref<string[]> = ref([])
 
-const allLeftSelectedKeys = ref([])
+const allLeftChecked = ref(false)
-const allRightSelectedKeys = ref([])
+const allRightChecked = ref(false)
+
+const allLeftChange = function ({ checked }: any) {
+  if (checked) {
+    const ids = leftDataSource.value.map((item: any) => {
+      return item[props.id]
+    })
+    leftSelectedKeys.value = ids
+  } else {
+    leftSelectedKeys.value = []
+  }
+}
+
+watch(leftSelectedKeys, function(){
+  if(leftDataSource.value.length === leftSelectedKeys.value.length ) {
+    allLeftChecked.value = true
+  } else {
+    allLeftChecked.value = false
+  }
+},{deep:true})
+
+const allRightChange = function ({ checked }: any) {
+  if (checked) {
+    const ids = rightDataSource.value.map((item: any) => {
+      return item[props.id]
+    })
+    rightSelectedKeys.value = ids
+  } else {
+    rightSelectedKeys.value = []
+  }
+}
+
+watch(rightSelectedKeys, function(){
+  if(rightDataSource.value.length === rightSelectedKeys.value.length ) {
+    allRightChecked.value = true
+  } else {
+    allRightChecked.value = false
+  }
+},{deep:true})
+
+const add = function() {
+    // 删除 leftDataSource 选中的元素
+    rightDataSource.value = leftDataSource.value.filter(
+      item => leftSelectedKeys.value.indexOf(item.id) != -1
+    )
+}
+
+const remove = function() {
+    // 删除 rightDataSource 选中的元素
+    leftDataSource.value = rightDataSource.value.filter(
+      item => rightSelectedKeys.value.indexOf(item.id) != -1
+    )
+}
 </script>