From ecaf8d51e05b2b18e3d72ba700f1c108ea2b0cbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Thu, 20 Jul 2017 11:53:18 +0800
Subject: [PATCH] Date add transfer prop

---
 examples/routers/date.vue              |  2 +-
 examples/routers/modal.vue             |  4 +-
 examples/routers/select.vue            | 62 +++++++++++++-------------
 src/components/date-picker/picker.vue  | 29 +++++++++---
 src/components/select/select.vue       |  8 +++-
 src/styles/components/date-picker.less |  4 ++
 6 files changed, 71 insertions(+), 38 deletions(-)

diff --git a/examples/routers/date.vue b/examples/routers/date.vue
index 6abf0c37..aad3af9c 100644
--- a/examples/routers/date.vue
+++ b/examples/routers/date.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <Date-picker type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>
+        <Date-picker transfer type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>
         <Date-picker type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>
         <Date-picker type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>
     </div>
diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index 11a4957f..b1e3f701 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -5,7 +5,8 @@
         <Modal v-model="showModal" title="弹窗">
             <Tabs>
                 <Tab-pane label="演示" style="height: 80px;">
-                    <i-select transfer>
+                    <Date-picker transfer type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>
+                    <i-select transfer multiple v-model="m1">
                         <i-option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                     </i-select>
                 </Tab-pane>
@@ -22,6 +23,7 @@
     export default {
         data () {
             return {
+                m1: [],
                 showModal: false,
                 showModal2: false,
                 options: [
diff --git a/examples/routers/select.vue b/examples/routers/select.vue
index f1fa98d7..cf351e76 100644
--- a/examples/routers/select.vue
+++ b/examples/routers/select.vue
@@ -1,39 +1,41 @@
 <template>
-    <Row>
-        <Col span="12" style="padding-right:10px">
-        <Select
-                v-model="model13"
-                filterable
-                remote
-                :remote-method="remoteMethod1"
-                :loading="loading1">
-            <Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>
-        </Select>
-        </Col>
-        <Col span="12">
-        <Select
-                v-model="model14"
-                multiple
-                filterable
-                remote
-                :remote-method="remoteMethod2"
-                :loading="loading2">
-            <Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>
-        </Select>
-        </Col>
-    </Row>
+    <i-select transfer multiple v-model="m1">
+        <i-option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</i-option>
+    </i-select>
 </template>
 <script>
     export default {
         data () {
             return {
-                model13: '',
-                loading1: false,
-                options1: [],
-                model14: [],
-                loading2: false,
-                options2: [],
-                list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming'],
+                m1: [],
+                showModal: false,
+                showModal2: false,
+                options: [
+                    {
+                        value: 'beijing',
+                        label: '北京市'
+                    },
+                    {
+                        value: 'shanghai',
+                        label: '上海市'
+                    },
+                    {
+                        value: 'shenzhen',
+                        label: '深圳市'
+                    },
+                    {
+                        value: 'hangzhou',
+                        label: '杭州市'
+                    },
+                    {
+                        value: 'nanjing',
+                        label: '南京市'
+                    },
+                    {
+                        value: 'chongqing',
+                        label: '重庆市'
+                    }
+                ]
             }
         },
         methods: {
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index e311723a..c61a88db 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -1,7 +1,5 @@
 <template>
-    <div
-        :class="[prefixCls]"
-        v-clickoutside="handleClose">
+    <div :class="[prefixCls]" v-clickoutside="handleClose">
         <div ref="reference" :class="[prefixCls + '-rel']">
             <slot>
                 <i-input
@@ -20,7 +18,14 @@
             </slot>
         </div>
         <transition :name="transition">
-            <Drop v-show="opened" :placement="placement" ref="drop">
+            <Drop
+                @click.native="handleTransferClick"
+                v-show="opened"
+                :class="{ [prefixCls + '-transfer']: transfer }"
+                :placement="placement"
+                ref="drop"
+                :data-transfer="transfer"
+                v-transfer-dom>
                 <div ref="picker"></div>
             </Drop>
         </transition>
@@ -31,6 +36,7 @@
     import iInput from '../../components/input/input.vue';
     import Drop from '../../components/select/dropdown.vue';
     import clickoutside from '../../directives/clickoutside';
+    import TransferDom from '../../directives/transfer-dom';
     import { oneOf } from '../../utils/assist';
     import { formatDate, parseDate } from './util';
     import Emitter from '../../mixins/emitter';
@@ -142,7 +148,7 @@
         name: 'CalendarPicker',
         mixins: [ Emitter ],
         components: { iInput, Drop },
-        directives: { clickoutside },
+        directives: { clickoutside, TransferDom },
         props: {
             format: {
                 type: String
@@ -188,6 +194,10 @@
             },
             options: {
                 type: Object
+            },
+            transfer: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -198,6 +208,7 @@
                 picker: null,
                 internalValue: '',
                 disableClickOutSide: false,    // fixed when click a date,trigger clickoutside to close picker
+                disableCloseUnderTransfer: false,  // transfer 模式下，点击Drop也会触发关闭
                 currentValue: this.value
             };
         },
@@ -258,7 +269,15 @@
             }
         },
         methods: {
+            // 开启 transfer 时，点击 Drop 即会关闭，这里不让其关闭
+            handleTransferClick () {
+                if (this.transfer) this.disableCloseUnderTransfer = true;
+            },
             handleClose () {
+                if (this.disableCloseUnderTransfer) {
+                    this.disableCloseUnderTransfer = false;
+                    return false;
+                }
                 if (this.open !== null) return;
 //                if (!this.disableClickOutSide) this.visible = false;
                 this.visible = false;
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 98715626..e010a055 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -26,7 +26,7 @@
         </div>
         <transition :name="transitionName">
             <Drop
-                :class="{ [prefixCls + '-dropdown-transfer']: transfer }"
+                :class="dropdownCls"
                 v-show="dropVisible"
                 :placement="placement"
                 ref="dropdown"
@@ -157,6 +157,12 @@
                     }
                 ];
             },
+            dropdownCls () {
+                return {
+                    [prefixCls + '-dropdown-transfer']: this.transfer,
+                    [prefixCls + '-multiple']: this.multiple && this.transfer
+                };
+            },
             showPlaceholder () {
                 let status = false;
 
diff --git a/src/styles/components/date-picker.less b/src/styles/components/date-picker.less
index b50f0992..c008b63f 100644
--- a/src/styles/components/date-picker.less
+++ b/src/styles/components/date-picker.less
@@ -191,6 +191,10 @@
             }
         }
     }
+    &-transfer{
+        z-index: @zindex-transfer;
+        max-height: none;
+    }
 }
 
 .@{picker-prefix-cls} {