From 21dad188c11ae33e6cb4a940a5ea1ae01b23fee2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Mon, 13 Mar 2017 18:58:31 +0800
Subject: [PATCH] prevent dispatch form event

when component import an Input, prevent dispatch event from Input to
Form
---
 examples/routers/form.vue                     | 64 ++++++++++++-------
 examples/routers/message.vue                  | 24 +++----
 .../base/notification/notification.vue        |  3 +-
 .../date-picker/panel/time-range.vue          |  1 +
 src/components/date-picker/panel/time.vue     |  1 +
 src/components/date-picker/picker.vue         | 23 +++----
 src/components/input/input.vue                | 10 ++-
 src/utils/assist.js                           | 20 +++++-
 8 files changed, 92 insertions(+), 54 deletions(-)

diff --git a/examples/routers/form.vue b/examples/routers/form.vue
index 472b44ec..985a00cc 100644
--- a/examples/routers/form.vue
+++ b/examples/routers/form.vue
@@ -1,35 +1,48 @@
 <template>
-    <i-form ref="formInline" :model="formInline" :rules="ruleInline" inline>
-        <Form-item prop="user">
-            <Input type="text" v-model="formInline.user" placeholder="Username">
-                <Icon type="ios-person-outline" slot="prepend"></Icon>
-            </Input>
-        </Form-item>
-        <Form-item prop="password">
-            <Input type="password" v-model="formInline.password" placeholder="Password">
-                <Icon type="ios-locked-outline" slot="prepend"></Icon>
-            </Input>
-        </Form-item>
-        <Form-item>
-            <Button type="primary" @click.native="handleSubmit('formInline')">登录</Button>
-        </Form-item>
-    </i-form>
+    <div>
+        date: {{ formInline.date }}
+        <i-form ref="formInline" :model="formInline" :rules="ruleInline">
+            <Form-item prop="date">
+                <Date-picker type="date" placeholder="选择日期" v-model="formInline.date"></Date-picker>
+            </Form-item>
+            <Form-item prop="user">
+                <Input v-model="formInline.user">
+            </Form-item>
+            <Form-item>
+                <i-button type="primary" @click.native="handleSubmit('formInline')">登录</i-button>
+            </Form-item>
+        </i-form>
+    </div>
 </template>
 <script>
     export default {
         data () {
             return {
                 formInline: {
-                    user: '',
-                    password: ''
+                    date: new Date(),
+                    user: ''
                 },
                 ruleInline: {
-                    user: [
-                        { required: true, message: '请填写用户名', trigger: 'blur' }
+                    date: [
+                        {
+                            required: true,
+                            type: 'date',
+                            message: '请选择日期',
+                            trigger: 'change'
+                        }
                     ],
-                    password: [
-                        { required: true, message: '请填写密码', trigger: 'blur' },
-                        { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
+                    user: [
+                        {
+                            required: true,
+                            message: '请输入',
+                            trigger: 'change',
+                            min: 10
+                        },
+                        {
+                            required: true,
+                            message: '请输入2',
+                            trigger: 'blur'
+                        }
                     ]
                 }
             }
@@ -38,11 +51,14 @@
             handleSubmit(name) {
                 this.$refs[name].validate((valid) => {
                     if (valid) {
-                        console.log('success');
+                        this.$Message.success('提交成功!');
                     } else {
-                        console.log('fail')
+                        this.$Message.error('表单验证失败!');
                     }
                 })
+            },
+            handleInput (val) {
+                console.log(val)
             }
         }
     }
diff --git a/examples/routers/message.vue b/examples/routers/message.vue
index 1112b0f3..d51f25d4 100644
--- a/examples/routers/message.vue
+++ b/examples/routers/message.vue
@@ -1,20 +1,22 @@
 <template>
-    <i-button @click.native="time">显示一个10秒的提示</i-button>
+    <div>
+        <i-button @click.native="success">显示成功提示</i-button>
+        <i-button @click.native="warning">显示警告提示</i-button>
+        <i-button @click.native="error">显示错误提示</i-button>
+    </div>
 </template>
 <script>
     export default {
         methods: {
-            time () {
-                this.$Message.info('我将在10秒后消失', 3, () => {
-                    console.log(1111)
-                });
+            success () {
+                this.$Message.success('这是一条成功的提示');
+            },
+            warning () {
+                this.$Message.warning('这是一条警告的提示');
+            },
+            error () {
+                this.$Message.error('对方不想说话，并且向你抛出了一个异常');
             }
-        },
-        mounted () {
-            this.$Message.config({
-                top: 50,
-                duration: 3
-            });
         }
     }
 </script>
diff --git a/src/components/base/notification/notification.vue b/src/components/base/notification/notification.vue
index f9b3ace6..5409079a 100644
--- a/src/components/base/notification/notification.vue
+++ b/src/components/base/notification/notification.vue
@@ -2,7 +2,7 @@
     <div :class="classes" :style="styles">
         <Notice
             v-for="notice in notices"
-            :key="notice"
+            :key="notice.name"
             :prefix-cls="prefixCls"
             :styles="notice.styles"
             :content="notice.content"
@@ -15,7 +15,6 @@
     </div>
 </template>
 <script>
-    // todo :key="notice"
     import Notice from './notice.vue';
 
     const prefixCls = 'ivu-notification';
diff --git a/src/components/date-picker/panel/time-range.vue b/src/components/date-picker/panel/time-range.vue
index 97d6f5fb..4a18c3bd 100644
--- a/src/components/date-picker/panel/time-range.vue
+++ b/src/components/date-picker/panel/time-range.vue
@@ -57,6 +57,7 @@
     const timePrefixCls = 'ivu-time-picker';
 
     export default {
+        name: 'TimePicker',
         mixins: [ Mixin, Locale ],
         components: { TimeSpinner, Confirm },
         data () {
diff --git a/src/components/date-picker/panel/time.vue b/src/components/date-picker/panel/time.vue
index c85b8379..fd7c13f3 100644
--- a/src/components/date-picker/panel/time.vue
+++ b/src/components/date-picker/panel/time.vue
@@ -36,6 +36,7 @@
     const timePrefixCls = 'ivu-time-picker';
 
     export default {
+        name: 'TimePicker',
         mixins: [ Mixin, Locale ],
         components: { TimeSpinner, Confirm },
         data () {
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 1513f9c0..e9495829 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -139,6 +139,7 @@
     };
 
     export default {
+        name: 'CalendarPicker',
         mixins: [ Emitter ],
         components: { iInput, Drop },
         directives: { clickoutside },
@@ -344,6 +345,7 @@
                 this.visualValue = correctValue;
                 event.target.value = correctValue;
                 this.internalValue = correctDate;
+                this.currentValue = correctDate;
 
                 if (correctValue !== oldValue) this.emitChange(correctDate);
             },
@@ -418,6 +420,12 @@
                 this.picker.resetView && this.picker.resetView();
             },
             emitChange (date) {
+                const newDate = this.formattingDate(date);
+
+                this.$emit('on-change', newDate);
+                this.dispatch('FormItem', 'on-form-change', newDate);
+            },
+            formattingDate (date) {
                 const type = this.type;
                 const format = this.format || DEFAULT_FORMATS[type];
                 const formatter = (
@@ -429,9 +437,7 @@
                 if (type === 'daterange' || type === 'timerange') {
                     newDate = [newDate.split(RANGE_SEPARATOR)[0], newDate.split(RANGE_SEPARATOR)[1]];
                 }
-
-                this.$emit('on-change', newDate);
-                this.dispatch('FormItem', 'on-form-change', newDate);
+                return newDate;
             }
         },
         watch: {
@@ -450,7 +456,7 @@
                 if (!val && this.picker && typeof this.picker.handleClear === 'function') {
                     this.picker.handleClear();
                 }
-                this.$emit('input', val);
+//                this.$emit('input', val);
             },
             value (val) {
                 this.currentValue = val;
@@ -492,14 +498,5 @@
         mounted () {
             if (this.open !== null) this.visible = this.open;
         }
-        // todo 事件
-//        events: {
-//            'on-form-blur' () {
-//                return false;
-//            },
-//            'on-form-change' () {
-//                return false;
-//            }
-//        }
     };
 </script>
diff --git a/src/components/input/input.vue b/src/components/input/input.vue
index 8f6b4d61..0c6c9099 100644
--- a/src/components/input/input.vue
+++ b/src/components/input/input.vue
@@ -43,7 +43,7 @@
     </div>
 </template>
 <script>
-    import { oneOf } from '../../utils/assist';
+    import { oneOf, findComponentUpward } from '../../utils/assist';
     import calcTextareaHeight from '../../utils/calcTextareaHeight';
     import Emitter from '../../mixins/emitter';
 
@@ -152,7 +152,9 @@
             },
             handleBlur () {
                 this.$emit('on-blur');
-                this.dispatch('FormItem', 'on-form-blur', this.currentValue);
+                if (!findComponentUpward(this, ['DatePicker', 'TimePicker'])) {
+                    this.dispatch('FormItem', 'on-form-blur', this.currentValue);
+                }
             },
             handleInput (event) {
                 const value = event.target.value;
@@ -169,7 +171,9 @@
                     this.resizeTextarea();
                 });
                 this.currentValue = value;
-                this.dispatch('FormItem', 'on-form-change', value);
+                if (!findComponentUpward(this, ['DatePicker', 'TimePicker'])) {
+                    this.dispatch('FormItem', 'on-form-change', value);
+                }
             },
             resizeTextarea () {
                 const autosize = this.autosize;
diff --git a/src/utils/assist.js b/src/utils/assist.js
index 04456cea..6ba371b2 100644
--- a/src/utils/assist.js
+++ b/src/utils/assist.js
@@ -165,4 +165,22 @@ export function scrollTop(el, from = 0, to, duration = 500) {
         window.requestAnimationFrame(() => scroll(d, end, step));
     }
     scroll(from, to, step);
-}
\ No newline at end of file
+}
+
+// Find components upward
+function findComponentUpward (content, componentName, componentNames) {
+    if (typeof componentName === 'string') {
+        componentNames = [componentName];
+    } else {
+        componentNames = componentName;
+    }
+
+    let parent = content.$parent;
+    let name = parent.$options.name;
+    while (parent && (!name || componentNames.indexOf(name) < 0)) {
+        parent = parent.$parent;
+        if (parent) name = parent.$options.name;
+    }
+    return parent;
+}
+export {findComponentUpward};
\ No newline at end of file