save-form 优化

src/components/save-form/index.vue

@@ -3,6 +3,8 @@
     class="save-form"
     v-bind="{...$attrs, ...$props}"
     v-on="$listeners"
+    @submit.stop.native="submit"
+    @reset.stop.native="reset"
     ref="form"
   >
     <slot/>
@@ -30,6 +32,21 @@ export default {
     }
   },
   methods: {
+    submit(evt) {
+      evt.stopPropagation()
+      evt.stopImmediatePropagation()
+      evt.preventDefault()
+      this.searchs.update(this.model, undefined, 'form')
+      if (this.$listeners.submit) {
+        this.$listeners.submit(evt)
+      }
+    },
+    reset() {
+      this.resetFields()
+      if (this.$listeners.reset) {
+        this.$listeners.reset()
+      }
+    },
     save(search = null, type = 'form') {
       this.searchs.update(search, undefined, type)
     },

src/views/save-form-test/README.md

@@ -14,3 +14,17 @@ demo/modals // 模块需要的弹窗放在这里
 ###### 列表注意点
 1. 列表最多不超过两行，多余的鼠标移入显示
 1. 操作按钮尽量右边fliex显示
+
+
+###### 推荐使用原生submit提交
+
+按照以下代码使用会默认保存数据，也会默认清空，不需要额外保存
+
+``` html
+<save-form ref="form" :model.sync="form" inline>
+  <el-form-item>
+    <el-button type="primary" native-type="submit">提交</el-button>
+    <el-button type="danger" native-type="reset">重置</el-button>
+  </el-form-item>
+</save-form>
+```

src/views/save-form-test/index.vue

@@ -4,7 +4,7 @@
       <div class="squrt"></div>保存表单演示
     </h2>
     <div class="m-core">
-      <save-form ref="form" :model.sync="form" inline>
+      <save-form ref="form" :model.sync="form" inline @submit="submit" @reset="reset">
         <el-form-item
           prop="input"
         >
@@ -54,8 +54,8 @@
           </el-date-picker>
         </el-form-item>
         <div>
-          <el-button type="primary" @click="submit">提交</el-button>
-          <el-button type="danger" @click="reset">重置</el-button>
+          <el-button type="primary" native-type="submit">提交</el-button>
+          <el-button type="danger" native-type="reset">重置</el-button>
         </div>
       </save-form>
     </div>
@@ -148,10 +148,8 @@ export default {
     getList() {
       return Promise.resolve()
     },
-    submit() {
-      this.$refs.form.validate(valid => {
-        console.log(valid)
-      })
+    submit(evt) {
+      console.log(evt)
     },
     reset() {
       this.$refs.form.resetFields()