form

src/views/haomo/components/forms/HmComplexForm.vue

@@ -58,8 +58,9 @@
           </el-form-item>
           <el-form-item v-if="buttons && buttons.length > 0">
             <el-col :span="12" v-for="(btn,key) in buttons" :key="key">
-              <el-button v-if="btn === '确定' || btn === '提交'" type="primary" @click="onSubmit()">{{btn}}</el-button>
-              <el-button v-if="btn === '取消' || btn === '重置'" type="primary" @click="resetForm()">{{btn}}</el-button>
+              <el-button v-if="btn === '确定' || btn === '提交' || btn === '保存'" type="primary" @click="onSubmit()">{{btn}}</el-button>
+              <el-button v-if="btn === '重置'" type="primary" @click="resetForm()">{{btn}}</el-button>
+              <el-button v-if="btn === '取消'" type="primary" @click="cancelFunction?cancelFunction():''">{{btn}}</el-button>
             </el-col>
           </el-form-item>
         </el-form>
@@ -122,7 +123,9 @@
         }
       },
       /**
-       * 非必传，指定要显示的按钮(确定、保存、取消、提交、重置)。默认不显示。示例：['确定', '取消']
+       * 非必传，指定要显示的按钮(确定、保存、取消、提交、重置)，默认不显示。
+       * 如果要传入了确定/取消的回调函数，请先传入对应的按钮
+       * 示例：['确定', '取消']
        */
       buttons: {
         type: Array,
@@ -134,6 +137,22 @@
       tableId: {
         type: String,
         required: false
+      },
+      /**
+       * 非必传，传入点击'确定'后的回调函数，该回调函数会在form组件onSubmit函数的成功回调中调用
+       * 如果要传入该函数，请先传入对应的按钮
+       */
+      confirmFunction: {
+        type: Function,
+        required: false
+      },
+      /**
+       * 非必传，传入点击'取消'后的回调函数，该回调函数会在点击'取消'后直接调用
+       * 如果要传入该函数，请先传入对应的按钮
+       */
+      cancelFunction: {
+        type: Function,
+        required: false
       }
     },
     data() {
@@ -358,6 +377,7 @@
               }).then(resp => {
                 console.log('修改成功')
                 self.resetForm()
+                self.confirmFunction && self.confirmFunction()
               })
             } else { // 不存在tableId 则创建一条数据
               request(self.schema.modelUnderscorePlural + '/new', {
@@ -375,6 +395,7 @@
               }).then(resp => {
                 console.log('创建成功')
                 self.resetForm()
+                self.confirmFunction && self.confirmFunction()
               })
             }
           } else {
@@ -394,7 +415,7 @@
        * 清空所有输入及提示信息。
        */
       resetForm() {
-        console.log('chongzhi')
+        console.log('重置')
         this.$refs.form.resetFields()
       }
     }

src/views/haomo/components/forms/index.vue

 <template>
   <div>
-    <hm-complex-form :schema="schema['HmUser']" :columns="showUserColumns" :buttons="showUserButtons" :tableId="tableId">
+    <hm-complex-form :schema="schema['HmUser']"
+                     :columns="showUserColumns"
+                     :buttons="showUserButtons"
+                     :confirmFunction="confirm"
+                     :cancelFunction="cancel"
+                     :tableId="tableId">
     </hm-complex-form>
   </div>
 </template>
@@ -19,7 +24,6 @@
     },
     data() {
       return {
-        // showUserColumns: ['username', 'loginid', 'password', 'mobile', 'email', 'createTime']
         // widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框
         showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'securityLevel', widgetType: 5 }, { name: 'type', widgetType: 2, options: ['选项1', '选项2'] }, { name: 'avatar', widgetType: 3, options: ['美女', '帅哥'] }, { name: 'departmentId', widgetType: 4 }, { name: 'createTime', widgetType: 6 }, { name: 'loginid', widgetType: 7, options: ['会员', '访客'] }],
         // 要显示按钮 暂只支持确定、保存、取消、提交、重置
@@ -36,7 +40,14 @@
       // console.log(this.schema)
       this.tableId = '0e26566e953449a7a7500c34be39fd26'
     },
-    methods: {}
+    methods: {
+      confirm() {
+        console.log('确定')
+      },
+      cancel() {
+        console.log('取消')
+      }
+    }
   }
 </script>
 <style scoped>