From 122e69ee97cb8c68fc6933652a784860c2b5dd30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Fri, 18 Nov 2016 14:37:02 +0800
Subject: [PATCH] update Transfer

update Transfer
---
 src/components/checkbox/checkbox.vue  |  4 +++-
 src/components/transfer/list.vue      | 12 +++++++-----
 src/styles/components/transfer.less   | 27 ++++++++++++++++++++++-----
 src/styles/themes/default/custom.less |  1 +
 test/routers/radio.vue                |  1 +
 test/routers/transfer.vue             | 12 ++++++++++--
 6 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 15aa16fa..4ff2c82d 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -18,7 +18,7 @@
                 v-model="checked"
                 @change="change">
         </span>
-        <slot v-if="showSlot"><span v-el:slot>{{ value }}</span></slot>
+        <slot v-if="showSlot"><span v-el:slot style="display:none">{{ value }}</span></slot>
     </label>
 </template>
 <script>
@@ -78,6 +78,8 @@
                 this.updateModel();
                 if (this.$els.slot && this.$els.slot.innerHTML === '') {
                     this.showSlot = false;
+                } else {
+                    this.$els.slot.style.display = 'inline';
                 }
             }
         },
diff --git a/src/components/transfer/list.vue b/src/components/transfer/list.vue
index 784f3cec..7fa2bdeb 100644
--- a/src/components/transfer/list.vue
+++ b/src/components/transfer/list.vue
@@ -1,7 +1,8 @@
 <template>
     <div :class="prefixCls" :style="style">
         <div :class="prefixCls + '-header'">
-            <Checkbox :checked.sync="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll">{{ title }}</Checkbox>
+            <Checkbox :checked.sync="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll"></Checkbox>
+            <span>{{ title }}</span>
             <span :class="prefixCls + '-header-count'">{{ count }}</span>
         </div>
         <div :class="bodyClasses">
@@ -15,7 +16,10 @@
                 <li
                     v-for="item in showItems | filterBy filterData"
                     :class="[prefixCls + '-content-item', {[prefixCls + '-content-item-disabled']: item.disabled}]"
-                    @click.prevent="select(item)"><Checkbox :checked="isCheck(item)" :disabled="item.disabled">{{ showLabel(item) }}</Checkbox></li>
+                    @click.prevent="select(item)">
+                    <Checkbox :checked="isCheck(item)" :disabled="item.disabled"></Checkbox>
+                    <span>{{ showLabel(item) }}</span>
+                </li>
                 <li :class="prefixCls + '-content-not-found'">{{ notFoundText }}</li>
             </ul>
         </div>
@@ -82,9 +86,7 @@
                 index > -1 ? this.checkedKeys.splice(index, 1) : this.checkedKeys.push(item.key);
             },
             updateFilteredData () {
-                this.showItems = this.data.map(item => {
-                    return item;
-                })
+                this.showItems = this.data;
             },
             toggleSelectAll (status) {
                 this.checkedKeys = status ?
diff --git a/src/styles/components/transfer.less b/src/styles/components/transfer.less
index c5bf038c..62f5429d 100644
--- a/src/styles/components/transfer.less
+++ b/src/styles/components/transfer.less
@@ -12,14 +12,14 @@
         font-size: @font-size-small;
         vertical-align: middle;
         border: 1px solid @border-color-base;
-        border-radius: @border-radius-base;
+        border-radius: @border-radius-base @border-radius-base 0 0;
         position: relative;
         padding-top: 35px;
 
         &-header {
             padding: 8px 16px;
             border-radius: @border-radius-base @border-radius-base 0 0;
-            background: #fff;
+            background: @head-bg;
             color: @text-color;
             border-bottom: 1px solid @border-color-split;
             overflow: hidden;
@@ -28,6 +28,10 @@
             left: 0;
             width: 100%;
 
+            & > span{
+                padding-left: 4px;
+            }
+
             &-count {
                 margin: 0 !important;
                 float: right;
@@ -39,7 +43,7 @@
             position: relative;
 
             &-with-search{
-                padding-top: 40px;
+                padding-top: 34px;
             }
         }
 
@@ -52,6 +56,10 @@
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
+
+                & > span{
+                    padding-left: 4px;
+                }
             }
 
             &-not-found{
@@ -64,11 +72,11 @@
             }
         }
         &-body-with-search &-content{
-            padding: 0;
+            padding: 6px 0 0;
         }
 
         &-body-search-wrapper{
-            padding: 8px;
+            padding: 8px 8px 0;
             position: absolute;
             top: 0;
             left: 0;
@@ -78,6 +86,15 @@
         &-search{
             position: relative;
         }
+
+        &-footer{
+            margin: 0 -1px;
+            border: 1px solid @border-color-base;
+            border-top: none;
+            border-radius: 0 0 @border-radius-base @border-radius-base;
+
+            .clearfix();
+        }
     }
     &-operation {
         display: inline-block;
diff --git a/src/styles/themes/default/custom.less b/src/styles/themes/default/custom.less
index 80af7614..d2174cd3 100644
--- a/src/styles/themes/default/custom.less
+++ b/src/styles/themes/default/custom.less
@@ -37,6 +37,7 @@
 @background-color-base        : #f7f7f7;  // base
 @background-color-select-hover: @input-disabled-bg;
 @tooltip-bg                   : rgba(70, 76, 91, .9);
+@head-bg                      : #f9fafc;
 
 // Shadow
 @shadow-color           : rgba(0, 0, 0, .2);
diff --git a/test/routers/radio.vue b/test/routers/radio.vue
index 62b6eca1..2c3f4d20 100644
--- a/test/routers/radio.vue
+++ b/test/routers/radio.vue
@@ -1,5 +1,6 @@
 <template>
     <div>
+        <Checkbox>hello</Checkbox>
         <Radio-group :model.sync="phone">
             <Radio value="apple">
                 <Icon type="social-apple"></Icon>
diff --git a/test/routers/transfer.vue b/test/routers/transfer.vue
index a80d29d3..5a1454c5 100644
--- a/test/routers/transfer.vue
+++ b/test/routers/transfer.vue
@@ -10,11 +10,16 @@
             filterable
             :target-keys.sync="targetKeys"
             :operations="['向左移动','向右移动']"
-            @on-change="change"></Transfer>
+            :filter-method="filterMethod"
+            @on-change="change">
+            <div :style="{float: 'right', margin: '5px'}">
+                <i-button type="ghost" size="small" @click="getMock">刷新</i-button>
+            </div>
+        </Transfer>
     </div>
 </template>
 <script>
-    import { Transfer } from 'iview';
+    import { Transfer, iButton } from 'iview';
 
     export default {
         props: {
@@ -38,6 +43,9 @@
             filterMethod (data, query) {
                 if (query === '') return true;
                 return data.label === query;
+            },
+            getMock () {
+
             }
         }
     }