From 2dc277134958684e77fbe5cdef9a8f297af3491f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Fri, 30 Dec 2016 17:00:26 +0800
Subject: [PATCH] update DateTimePicker

update DateTimePicker
---
 src/components/date-picker/base/confirm.vue   | 13 +++-
 .../date-picker/panel/date-range.vue          | 62 ++++++++++++++++---
 src/components/date-picker/panel/date.vue     |  6 +-
 .../date-picker/panel/time-range.vue          |  6 ++
 src/components/date-picker/panel/time.vue     | 26 +++-----
 src/styles/components/date-picker.less        |  4 ++
 src/styles/components/time-picker.less        |  3 +-
 test/routers/date.vue                         |  8 ++-
 8 files changed, 92 insertions(+), 36 deletions(-)

diff --git a/src/components/date-picker/base/confirm.vue b/src/components/date-picker/base/confirm.vue
index edc43e1e..bd527cb7 100644
--- a/src/components/date-picker/base/confirm.vue
+++ b/src/components/date-picker/base/confirm.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="[prefixCls + '-confirm']">
-        <span v-if="showTime" @click="handleToggleTime">
+        <span :class="timeClasses" v-if="showTime" @click="handleToggleTime">
             <template v-if="isTime">选择日期</template>
             <template v-else>选择时间</template>
         </span>
@@ -17,13 +17,21 @@
         components: { iButton },
         props: {
             showTime: false,
-            isTime: false
+            isTime: false,
+            timeDisabled: false
         },
         data () {
             return {
                 prefixCls: prefixCls
             };
         },
+        computed: {
+            timeClasses () {
+                return {
+                    [`${prefixCls}-confirm-time-disabled`]: this.timeDisabled
+                };
+            }
+        },
         methods: {
             handleClear () {
                 this.$emit('on-pick-clear');
@@ -32,6 +40,7 @@
                 this.$emit('on-pick-success');
             },
             handleToggleTime () {
+                if (this.timeDisabled) return;
                 this.$emit('on-pick-toggle-time');
             }
         }
diff --git a/src/components/date-picker/panel/date-range.vue b/src/components/date-picker/panel/date-range.vue
index 6b03bc95..b7d92e11 100644
--- a/src/components/date-picker/panel/date-range.vue
+++ b/src/components/date-picker/panel/date-range.vue
@@ -7,7 +7,7 @@
                 @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
         </div>
         <div :class="[prefixCls + '-body']">
-            <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
+            <div :class="[prefixCls + '-content', prefixCls + '-content-left']" v-show="!isTime">
                 <div :class="[datePrefixCls + '-header']" v-show="leftCurrentView !== 'time'">
                     <span
                         :class="iconBtnCls('prev', '-double')"
@@ -60,7 +60,7 @@
                     @on-pick="handleLeftMonthPick"
                     @on-pick-click="handlePickClick"></month-table>
             </div>
-            <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
+            <div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
                 <div :class="[datePrefixCls + '-header']" v-show="rightCurrentView !== 'time'">
                      <span
                          :class="iconBtnCls('prev', '-double')"
@@ -113,8 +113,18 @@
                     @on-pick="handleRightMonthPick"
                     @on-pick-click="handlePickClick"></month-table>
             </div>
+            <div :class="[prefixCls + '-content']" v-show="isTime">
+                <time-picker
+                    v-ref:time-picker
+                    v-show="isTime"
+                    @on-pick="handleTimePick"></time-picker>
+            </div>
             <Confirm
                 v-if="confirm"
+                :show-time="showTime"
+                :is-time="isTime"
+                :time-disabled="timeDisabled"
+                @on-pick-toggle-time="handleToggleTime"
                 @on-pick-clear="handlePickClear"
                 @on-pick-success="handlePickSuccess"></Confirm>
         </div>
@@ -125,6 +135,7 @@
     import DateTable from '../base/date-table.vue';
     import YearTable from '../base/year-table.vue';
     import MonthTable from '../base/month-table.vue';
+    import TimePicker from './time-range.vue';
     import Confirm from '../base/confirm.vue';
     import { toDate, prevMonth, nextMonth, initTimeDate } from '../util';
 
@@ -135,7 +146,7 @@
 
     export default {
         mixins: [Mixin],
-        components: { Icon, DateTable, YearTable, MonthTable, Confirm },
+        components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
         data () {
             return {
                 prefixCls: prefixCls,
@@ -156,7 +167,9 @@
                 rightCurrentView: 'date',
                 selectionMode: 'range',
                 leftTableYear: null,
-                rightTableYear: null
+                rightTableYear: null,
+                isTime: false,
+                format: 'yyyy-MM-dd'
             };
         },
         computed: {
@@ -231,6 +244,9 @@
                     newDate.setMonth(month + 1);
                 }
                 return newDate;
+            },
+            timeDisabled () {
+                return !(this.minDate && this.maxDate);
             }
         },
         watch: {
@@ -243,6 +259,19 @@
                     this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
                     if (this.minDate) this.date = new Date(this.minDate);
                 }
+                if (this.showTime) this.$refs.timePicker.value = newVal;
+            },
+            minDate (val) {
+                if (this.showTime) this.$refs.timePicker.date = val;
+            },
+            maxDate (val) {
+                if (this.showTime) this.$refs.timePicker.dateEnd = val;
+            },
+            format (val) {
+                if (this.showTime) this.$refs.timePicker.format = val;
+            },
+            isTime (val) {
+                if (val) this.$refs.timePicker.updateScroll();
             }
         },
         methods: {
@@ -256,6 +285,7 @@
                 this.maxDate = null;
                 this.date = new Date();
                 this.handleConfirm();
+                if (this.showTime) this.$refs.timePicker.handleClear();
             },
             resetView() {
                 this.leftCurrentView = 'date';
@@ -343,14 +373,32 @@
                 this.maxDate = val.maxDate;
 
                 if (!close) return;
-                if (!this.showTime) {
-                    this.handleConfirm(false);
-                }
+//                if (!this.showTime) {
+//                    this.handleConfirm(false);
+//                }
+                this.handleConfirm(false);
             },
             handleChangeRange (val) {
                 this.minDate = val.minDate;
                 this.maxDate = val.maxDate;
                 this.rangeState = val.rangeState;
+            },
+            handleToggleTime () {
+                this.isTime = !this.isTime;
+            },
+            handleTimePick (date) {
+                this.minDate = date[0];
+                this.maxDate = date[1];
+                this.handleConfirm(false);
+            }
+        },
+        compiled () {
+            if (this.showTime) {
+                this.$refs.timePicker.date = this.minDate;
+                this.$refs.timePicker.dateEnd = this.maxDate;
+                this.$refs.timePicker.value = this.value;
+                this.$refs.timePicker.format = this.format;
+                this.$refs.timePicker.showDate = true;
             }
         }
     };
diff --git a/src/components/date-picker/panel/date.vue b/src/components/date-picker/panel/date.vue
index 6235b5f4..64a2cccd 100644
--- a/src/components/date-picker/panel/date.vue
+++ b/src/components/date-picker/panel/date.vue
@@ -61,11 +61,8 @@
                     @on-pick-click="handlePickClick"></month-table>
                 <time-picker
                     v-ref:time-picker
-                    v-show="currentView === 'time'"
-                    :date="date"
-                    :value="value"
-                    :format="format"
                     show-date
+                    v-show="currentView === 'time'"
                     @on-pick="handleTimePick"></time-picker>
             </div>
             <Confirm
@@ -276,6 +273,7 @@
                 this.month = this.date.getMonth();
             }
             if (this.showTime) {
+                // todo 这里可能有问题，并不能进入到这里，但不影响正常使用
                 this.$refs.timePicker.date = this.date;
                 this.$refs.timePicker.value = this.value;
                 this.$refs.timePicker.format = this.format;
diff --git a/src/components/date-picker/panel/time-range.vue b/src/components/date-picker/panel/time-range.vue
index dd1a71ea..2caa5cc0 100644
--- a/src/components/date-picker/panel/time-range.vue
+++ b/src/components/date-picker/panel/time-range.vue
@@ -4,6 +4,7 @@
             <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
                 <div :class="[timePrefixCls + '-header']">开始时间</div>
                 <time-spinner
+                    v-ref:time-spinner
                     :show-seconds="showSeconds"
                     :hours="hours"
                     :minutes="minutes"
@@ -18,6 +19,7 @@
             <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
                 <div :class="[timePrefixCls + '-header']">结束时间</div>
                 <time-spinner
+                    v-ref:time-spinner-end
                     :show-seconds="showSeconds"
                     :hours="hoursEnd"
                     :minutes="minutesEnd"
@@ -170,6 +172,10 @@
             },
             handleEndChange (date) {
                 this.handleChange({}, date);
+            },
+            updateScroll () {
+                this.$refs.timeSpinner.updateScroll();
+                this.$refs.timeSpinnerEnd.updateScroll();
             }
         }
     };
diff --git a/src/components/date-picker/panel/time.vue b/src/components/date-picker/panel/time.vue
index 5ed1835f..0c0fa60f 100644
--- a/src/components/date-picker/panel/time.vue
+++ b/src/components/date-picker/panel/time.vue
@@ -37,31 +37,19 @@
     export default {
         mixins: [Mixin],
         components: { TimeSpinner, Confirm },
-//        props: {
-//            date: {
-//                default () {
-//                    return initTimeDate();
-//                }
-//            },
-//            value: {
-//                default: ''
-//            },
-//            showDate: {
-//                type: Boolean,
-//                default: false
-//            },
-//            format: {
-//                type: String,
-//                default: 'HH:mm:ss'
-//            }
-//        },
+        props: {
+            showDate: {
+                type: Boolean,
+                default: false
+            }
+        },
         data () {
             return {
                 prefixCls: prefixCls,
                 timePrefixCls: timePrefixCls,
                 date: initTimeDate(),
                 value: '',
-                showDate: false,
+//                showDate: false,
                 format: 'HH:mm:ss',
                 hours: '',
                 minutes: '',
diff --git a/src/styles/components/date-picker.less b/src/styles/components/date-picker.less
index b1d7a776..e71a5da4 100644
--- a/src/styles/components/date-picker.less
+++ b/src/styles/components/date-picker.less
@@ -258,5 +258,9 @@
                 color: @link-active-color;
             }
         }
+        & > span&-time-disabled{
+            color: @btn-disable-color;
+            cursor: @cursor-disabled;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/styles/components/time-picker.less b/src/styles/components/time-picker.less
index 7f62e78b..a8d3b553 100644
--- a/src/styles/components/time-picker.less
+++ b/src/styles/components/time-picker.less
@@ -93,7 +93,8 @@
                     top: 31px;
                     bottom: 0;
                     right: -2px;
-                    background: @border-color-split
+                    background: @border-color-split;
+                    z-index: 1;
                 }
 
                 &-right{
diff --git a/test/routers/date.vue b/test/routers/date.vue
index 992f2912..d7f1b05c 100644
--- a/test/routers/date.vue
+++ b/test/routers/date.vue
@@ -6,6 +6,7 @@
 <template>
     <row>
         <i-col span="12">
+            <Date-picker format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 300px" @on-change="c"></Date-picker>
             <Time-picker :value="value" type="time" placeholder="选择时间" style="width: 168px"></Time-picker>
         </i-col>
         <!--<i-col span="12">-->
@@ -24,7 +25,7 @@
                 <!--style="width: 168px"></time-picker>-->
         <!--</i-col>-->
         <i-col span="12">
-            <Date-picker :value="value1" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px" @on-change="c"></Date-picker>
+            <Date-picker format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placeholder="选择日期时间" style="width: 300px" @on-change="c"></Date-picker>
             <!--<time-picker-->
                 <!--:value="value2"-->
                 <!--type="timerange"-->
@@ -44,11 +45,12 @@
         data () {
             return {
 //                value: '2016-12-12 03:03:03',
-                value1: '2015-12-12 09:41',
+                value1: '2015-12-12 09:41:00',
                 value: '03:12:01',
                 value2: ['08:40:00', '09:40:00'],
 //                value2: [new Date(), new Date()],
-                value3: ['2016-12-01', '2016-12-25']
+                value3: ['2016-12-01', '2016-12-25'],
+                val4: ['2016-12-01 09:41:12', '2016-12-25 12:23:32']
             }
         },
         methods: {