update

examples/kelley-form/career.js

@@ -17,21 +17,19 @@ export default {
     }
   },
   form: {
-    hasAdd: true,
     options: {
       labelWidth: '140px'
     },
-    model: [
-      {
-        times: [],
-        start_date: null,
-        end_date: null,
-        school_name_cn: '',
-        school_city: '',
-        major_cn: '',
-        degree: 0
-      }
-    ],
+    hasAdd: true,
+    defaultModel: {
+      times: [],
+      start_date: null,
+      end_date: null,
+      school_name_cn: '',
+      school_city: '',
+      major_cn: '',
+      degree: 0
+    },
     items: [
       {
         type: 'date-picker-from-to-form',

examples/kelley-form/declare.js

@@ -21,7 +21,6 @@ export default {
     hint:
       '我提供的所有报名材料信息皆准确和完整。我同意在需要的情况下提交原件以确认我的报名资格。由于报名材料中的虚假、错误信息或重大遗漏导致不录取或取消学籍的后果由我个人承担。 我理解并同意所有报名材料归紫荆教育所有，无论考生录取与否均不退回。我授权紫荆教育使用报名表中的信息查询本人学习和工作记录。',
     options: {
-      labelWidth: '160px'
     },
     items: [
       {

examples/kelley-form/education.js

@@ -18,33 +18,32 @@ export default {
   update: {
     action: '/zws/v1/enrollment/educations/batch-upload',
     data: { project_id: 1001 },
-    callback(data) {
-      return data.map(item => {
+    beforeRequest(data) {
+      const records = data.map(item => {
         let [startDate, endDate] = item.times
-        item.start_date = startDate
-        item.end_date = endDate
+        item.start_date = startDate.replace(/-/, '')
+        item.end_date = endDate.replace(/-/, '')
         return item
       })
+      return { records }
     }
   },
   form: {
     hint: `<div style="color:red;font-size:18px;">请务必如实提供高中以上所有学历学位的详细信息。</div>
     <div>按照从最高学历至第一学历的顺序，请您依次填写：博士、硕士、本科、专科，<br>并且填写您获得学位所在学校的国家和城市</div>`,
-    hasAdd: true,
     options: {
       labelWidth: '110px'
     },
-    model: [
-      {
-        times: [],
-        start_date: null,
-        end_date: null,
-        school_name_cn: '',
-        school_city: '',
-        major_cn: '',
-        degree: 0
-      }
-    ],
+    hasAdd: true,
+    defaultModel: {
+      times: [],
+      start_date: null,
+      end_date: null,
+      school_name_cn: '',
+      school_city: '',
+      major_cn: '',
+      degree: 0
+    },
     items: [
       {
         type: 'date-picker-form',

examples/kelley-form/honor.js

@@ -4,34 +4,35 @@ export default {
   showProgress: true,
   progress: 0,
   get: {
-    action: '/zws/v1/enrollment/profiles?project_id=1001',
-    callback(data) {
-      data.date_of_starting_to_work = data.date_of_starting_to_work + ''
-      return data
-    }
+    action: '/zws/v1/enrollment/honors?project_id=1001'
   },
   update: {
-    action: '/zws/v1/enrollment/profiles',
+    action: '/zws/v1/enrollment/honors/batch-upload',
     data: { project_id: 1001 },
-    callback(data) {
-      return data
+    beforeRequest(data) {
+      return { records: data }
     }
   },
   form: {
     options: {
       labelWidth: '180px'
     },
+    hasAdd: true,
+    defaultModel: {
+      title: '',
+      summary: ''
+    },
     items: [
       {
         type: 'input-form',
         label: '荣誉/奖励',
-        model: 'school_name_cn',
+        model: 'title',
         rules: [{ required: true, message: '请输入荣誉/奖励', trigger: 'blur' }]
       },
       {
         type: 'input-form',
         label: '证书颁发机构及获得时间',
-        model: 'school_country',
+        model: 'summary',
         rules: [
           {
             required: true,

examples/kelley-form/training.js

@@ -6,21 +6,28 @@ export default {
   get: {
     action: '/zws/v1/enrollment/trainings?project_id=1001',
     callback(data) {
-      data.date_of_starting_to_work = data.date_of_starting_to_work + ''
       return data
     }
   },
   update: {
-    action: '/api/v1/enrollment/trainings',
+    action: '/zws/v1/enrollment/trainings/batch-upload',
     data: { project_id: 1001 },
     callback(data) {
-      return data
+      return { records: data }
     }
   },
   form: {
     options: {
       labelWidth: '80px'
     },
+    hasAdd: true,
+    defaultModel: {
+      times: [],
+      start_date: null,
+      end_date: null,
+      school_name_cn: '',
+      school_country: ''
+    },
     items: [
       {
         type: 'date-picker-form',

src/VueForm.vue

@@ -5,7 +5,9 @@
     </ezj-aside>
     <ezj-main :title="currentPage.title" v-if="currentPage" :key="activeId">
       <slot>
-        <ezj-form-pane v-bind="currentPage" v-if="currentPage.form"></ezj-form-pane>
+        <template v-if="currentPage.form">
+          <ezj-form-pane v-bind="currentPage"></ezj-form-pane>
+        </template>
       </slot>
     </ezj-main>
   </div>

src/components/form-form/src/formForm.vue

@@ -4,7 +4,7 @@
       <template v-for="item in items">
         <component :is="item.type" v-bind:key="item.model" :item="item" :formData="ruleForm"></component>
       </template>
-      <el-form-item>
+      <el-form-item v-if="hasButton">
         <slot>
           <el-button type="primary" @click="onSubmit">保存</el-button>
         </slot>
@@ -35,6 +35,10 @@ export default {
       default() {
         return []
       }
+    },
+    hasButton: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

src/components/layout/FormPane.vue

@@ -5,16 +5,23 @@
     </template>
     <!-- 多个表单 -->
     <template v-if="form.hasAdd">
-      <template v-for="(item, index) in formModel">
-        <div class="ejz-form-pane_group" :key="index">
-          <div class="remove" @click="handleRemove(index)">
-            <i class="el-icon-close"></i>
+      <template v-if="isMultiple">
+        <template v-for="(item, index) in model">
+          <div class="ejz-form-pane_group" :key="index">
+            <div class="remove" @click="handleRemove(index)" v-if="index">
+              <i class="el-icon-close"></i>
+            </div>
+            <form-form
+              :options="form.options"
+              :model="item"
+              :items="form.items"
+              :hasButton="false"
+              ref="form"
+            ></form-form>
           </div>
-          <form-form :options="form.options" :model="item" :items="form.items" @onSubmit="onSubmit">
-            <el-button @click="handleAdd">增加一项</el-button>
-            <el-button @click="handleSubmit">保存</el-button>
-          </form-form>
-        </div>
+        </template>
+        <el-button @click="handleAdd">增加一项</el-button>
+        <el-button @click="handleSubmit">保存</el-button>
       </template>
     </template>
 
@@ -22,9 +29,10 @@
     <template v-else>
       <form-form
         :options="form.options"
-        :model="formModel"
+        :model="model"
         :items="form.items"
         @onSubmit="onSubmit"
+        ref="form"
       ></form-form>
     </template>
   </div>
@@ -50,19 +58,24 @@ export default {
         return {}
       }
     },
-    form: Object
+    form: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
   },
   data() {
+    let model =
+      this.form.model ||
+      (this.form.hasAdd ? [Object.assign({}, this.form.defaultModel)] : {})
     return {
-      model: null
+      model
     }
   },
   computed: {
     isMultiple() {
-      return Array.isArray(this.form)
-    },
-    formModel() {
-      return this.model || this.form.model
+      return Array.isArray(this.model)
     }
   },
   methods: {
@@ -83,6 +96,10 @@ export default {
       }
       axios.get(action, { params: data, headers }).then(res => {
         let { data } = res
+        // 默认数据设置
+        if (this.form.hasAdd && Array.isArray(data) && !data.length) {
+          data.push(Object.assign({}, this.form.defaultModel))
+        }
         if (callback) {
           data = callback(data)
         }
@@ -131,13 +148,20 @@ export default {
     },
     // 新增表单
     handleAdd() {
-      this.formModel.push(this.form.model)
+      this.model.push(Object.assign({}, this.form.defaultModel))
     },
     // 删除表单
     handleRemove(index) {
-      this.formModel.splice(0, index)
+      this.model.splice(index, 1)
     },
-    handleSubmit() {}
+    // 提交
+    handleSubmit() {
+      const formCompoents = this.$refs.form
+      let allPromise = formCompoents.map(form => form.validate())
+      Promise.all(allPromise).then(() => {
+        this.updateData(this.model)
+      })
+    }
   },
   beforeMount() {
     this.init()