update

examples/page/answer.js

@@ -6,37 +6,77 @@ export default {
   get: {
     action: '/zws/v1/enrollment/answers?project_id=1001',
     callback(data) {
-      data.date_of_starting_to_work = data.date_of_starting_to_work + ''
-      return data
+      let [first, second] = data
+      return {
+        qid1: first.qid,
+        question1: first.question,
+        answer1: first.answer,
+        qid2: second.qid,
+        question2: second.question,
+        answer2: second.answer
+      }
     }
   },
   update: {
     action: '/zws/v1/enrollment/answers/batch-upload',
     data: { project_id: 1001 },
-    callback(data) {
-      return data
+    beforeRequest(data) {
+      return {
+        records: [
+          { qid: data.qid1, question: data.question1, answer: data.answer1 },
+          { qid: data.qid2, question: data.question2, answer: data.answer2 }
+        ]
+      }
     }
   },
   form: {
-    options: {
-      labelWidth: '160px'
-    },
     items: [
       {
         type: 'input-form',
-        label: '姓名',
-        model: 'real_name_cn',
-        placeholder: '123123',
+        label:
+          '您为什么要申请美国印第安纳大学Kelley商学院金融学硕士项目？（200字以上，1000字以内）',
+        model: 'answer1',
+        attrs: {
+          type: 'textarea',
+          rows: '8',
+          maxlength: '1000',
+          'show-word-limit': true
+        },
+        rules: [
+          {
+            required: true,
+            message: '请输入',
+            trigger: 'blur'
+          },
+          {
+            min: 200,
+            max: 1000,
+            message: '长度在 200 到 1000 个字符',
+            trigger: 'blur'
+          }
+        ]
+      },
+      {
+        type: 'input-form',
+        label:
+          '您的短期和长期职业发展目标是什么？您打算如何达成此愿景？（200字以上，1000字以内）',
+        model: 'answer2',
+        attrs: {
+          type: 'textarea',
+          rows: '8',
+          maxlength: '1000',
+          'show-word-limit': true
+        },
         rules: [
           {
             required: true,
-            message: '请输入活动名称',
+            message: '请输入',
             trigger: 'blur'
           },
           {
-            min: 3,
-            max: 5,
-            message: '长度在 3 到 5 个字符',
+            min: 200,
+            max: 1000,
+            message: '长度在 200 到 1000 个字符',
             trigger: 'blur'
           }
         ]

examples/page/career.js

@@ -19,7 +19,7 @@ export default {
   form: {
     hasAdd: true,
     options: {
-      labelWidth: '160px'
+      labelWidth: '140px'
     },
     model: [
       {
@@ -34,7 +34,7 @@ export default {
     ],
     items: [
       {
-        type: 'date-picker-form',
+        type: 'date-picker-from-to-form',
         elemType: 'monthrange',
         label: '工作时间',
         model: 'times',
@@ -86,23 +86,39 @@ export default {
           { required: true, message: '请选择职位类型', trigger: 'change' }
         ]
       },
-
       {
         type: 'input-form',
         label: '工作年薪（万元）',
-        model: 'annual_salary'
+        model: 'annual_salary',
+        rules: [{ required: true, message: '请输入工作年薪', trigger: 'blur' }]
       },
       {
         type: 'input-form',
         label: '工作描述',
         model: 'job_desc_cn',
-        attrs: { type: 'textarea' }
+        attrs: {
+          type: 'textarea',
+          placeholder:
+            '请详细描述您的职责范围，工作任务以及取得的成绩等，填写文字在100个字以上评定等级，少于不计算，内容越详细，等级越高。（字限3000字以内）',
+          rows: '8',
+          maxlength: '3000',
+          'show-word-limit': true
+        },
+        rules: [{ required: true, message: '请输入工作描述', trigger: 'blur' }]
       },
       {
         type: 'input-form',
         label: '公司（单位）简介',
         model: 'company_profile',
-        attrs: { type: 'textarea' }
+        attrs: {
+          type: 'textarea',
+          placeholder:
+            '300字左右，包括所属行业在业内的位置，经营时间，业务规模，发展前景等信息',
+          rows: '4'
+        },
+        rules: [
+          { required: true, message: '请输入公司（单位）简介', trigger: 'blur' }
+        ]
       }
     ]
   }

examples/page/declare.js

@@ -18,26 +18,21 @@ export default {
     }
   },
   form: {
+    hint:
+      '我提供的所有报名材料信息皆准确和完整。我同意在需要的情况下提交原件以确认我的报名资格。由于报名材料中的虚假、错误信息或重大遗漏导致不录取或取消学籍的后果由我个人承担。 我理解并同意所有报名材料归紫荆教育所有，无论考生录取与否均不退回。我授权紫荆教育使用报名表中的信息查询本人学习和工作记录。',
     options: {
       labelWidth: '160px'
     },
     items: [
       {
-        type: 'input-form',
-        label: '姓名',
+        type: 'checkbox-form',
+        label: '我同意',
         model: 'real_name_cn',
-        placeholder: '123123',
         rules: [
           {
             required: true,
-            message: '请输入活动名称',
-            trigger: 'blur'
-          },
-          {
-            min: 3,
-            max: 5,
-            message: '长度在 3 到 5 个字符',
-            trigger: 'blur'
+            message: '请勾选',
+            trigger: 'change'
           }
         ]
       }

examples/page/education.js

@@ -28,9 +28,11 @@ export default {
     }
   },
   form: {
+    hint: `<div style="color:red;font-size:18px;">请务必如实提供高中以上所有学历学位的详细信息。</div>
+    <div>按照从最高学历至第一学历的顺序，请您依次填写：博士、硕士、本科、专科，<br>并且填写您获得学位所在学校的国家和城市</div>`,
     hasAdd: true,
     options: {
-      labelWidth: '160px'
+      labelWidth: '110px'
     },
     model: [
       {
@@ -49,7 +51,6 @@ export default {
         elemType: 'monthrange',
         label: '教育时间',
         model: 'times',
-        required: true,
         attrs: { 'value-format': 'yyyy-MM' },
         rules: [{ required: true, message: '请选择教育时间', trigger: 'blur' }]
       },

examples/page/honor.js

 export default {
   id: 'honor',
-  title: '学习目的',
+  title: '荣誉奖励',
   showProgress: true,
   progress: 0,
   get: {
@@ -19,24 +19,23 @@ export default {
   },
   form: {
     options: {
-      labelWidth: '160px'
+      labelWidth: '180px'
     },
     items: [
       {
         type: 'input-form',
-        label: '姓名',
-        model: 'real_name_cn',
-        placeholder: '123123',
+        label: '荣誉/奖励',
+        model: 'school_name_cn',
+        rules: [{ required: true, message: '请输入荣誉/奖励', trigger: 'blur' }]
+      },
+      {
+        type: 'input-form',
+        label: '证书颁发机构及获得时间',
+        model: 'school_country',
         rules: [
           {
             required: true,
-            message: '请输入活动名称',
-            trigger: 'blur'
-          },
-          {
-            min: 3,
-            max: 5,
-            message: '长度在 3 到 5 个字符',
+            message: '请输入证书颁发机构及获得时间',
             trigger: 'blur'
           }
         ]

examples/page/profile.js

@@ -7,19 +7,24 @@ export default {
     action: '/zws/v1/enrollment/profiles?project_id=1001',
     callback(data) {
       data.date_of_starting_to_work = data.date_of_starting_to_work + ''
+      data.city = `${data.address_province + ''}-${data.address_city + ''}`
       return data
     }
   },
   update: {
     action: '/zws/v1/enrollment/profiles',
     data: { project_id: 1001 },
-    callback(data) {
+    beforeRequest(data) {
+      let [province, city] = data.city.split('-')
+      data.address_province = province
+      data.address_city = city
+      delete data.city
       return data
     }
   },
   form: {
     options: {
-      labelWidth: '160px'
+      labelWidth: '150px'
     },
     mode: {
       real_name_cn: '',
@@ -46,7 +51,6 @@ export default {
         type: 'input-form',
         label: '姓名',
         model: 'real_name_cn',
-        placeholder: '123123',
         rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
       },
       {
@@ -104,11 +108,19 @@ export default {
         model: 'nationality',
         rules: [{ required: true, message: '请选择国籍', trigger: 'blur' }]
       },
+      {
+        type: 'city-select-form',
+        label: '现居住城市',
+        model: 'city',
+        separator: '-',
+        rules: [{ required: true, message: '请选择居住城市', trigger: 'blur' }]
+      },
       {
         type: 'date-picker-form',
+        elemType: 'year',
         label: '参加工作年份',
         model: 'date_of_starting_to_work',
-        attrs: { type: 'year', 'value-format': 'yyyy' },
+        attrs: { 'value-format': 'yyyy' },
         rules: [
           { required: true, message: '请选择参加工作年份', trigger: 'blur' }
         ]

examples/page/training.js

@@ -19,24 +19,32 @@ export default {
   },
   form: {
     options: {
-      labelWidth: '160px'
+      labelWidth: '80px'
     },
     items: [
+      {
+        type: 'date-picker-form',
+        elemType: 'monthrange',
+        label: '培训时间',
+        model: 'times',
+        required: true,
+        attrs: { 'value-format': 'yyyy-MM' },
+        rules: [{ required: true, message: '请选择培训时间', trigger: 'blur' }]
+      },
+      {
+        type: 'input-form',
+        label: '培训机构',
+        model: 'school_name_cn',
+        rules: [{ required: true, message: '请输入培训机构', trigger: 'blur' }]
+      },
       {
         type: 'input-form',
-        label: '姓名',
-        model: 'real_name_cn',
-        placeholder: '123123',
+        label: '课程名称',
+        model: 'school_country',
         rules: [
           {
             required: true,
-            message: '请输入活动名称',
-            trigger: 'blur'
-          },
-          {
-            min: 3,
-            max: 5,
-            message: '长度在 3 到 5 个字符',
+            message: '请输入课程名称',
             trigger: 'blur'
           }
         ]

src/FormPane.vue

 <template>
   <div class="ezj-form-pane">
+    <template v-if="form.hint">
+      <div class="ezj-form-pane__hint" v-html="form.hint"></div>
+    </template>
     <!-- 多个表单 -->
     <template v-if="form.hasAdd">
       <template v-for="(item, index) in formModel">
-        <form-form
-          :options="form.options"
-          :model="item"
-          :items="form.items"
-          @onSubmit="onSubmit"
-          :key="index"
-        >
-          <el-button>增加一项</el-button>
-          <el-button>保存</el-button>
-        </form-form>
+        <div class="ejz-form-pane_group" :key="index">
+          <div class="remove" @click="handleRemove(index)">
+            <i class="el-icon-close"></i>
+          </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>
     </template>
 
@@ -48,8 +50,6 @@ export default {
         return {}
       }
     },
-    data: Object,
-    headers: Object,
     form: Object
   },
   data() {
@@ -59,7 +59,7 @@ export default {
   },
   computed: {
     isMultiple() {
-      return Array.isArray(this.model)
+      return Array.isArray(this.form)
     },
     formModel() {
       return this.model || this.form.model
@@ -71,8 +71,17 @@ export default {
     },
     // 获取
     getData() {
-      const { action, data = {}, callback } = this.get
-      axios.get(action, { params: data }).then(res => {
+      let {
+        action,
+        headers = {},
+        data = {},
+        beforeRequest,
+        callback
+      } = this.get
+      if (beforeRequest) {
+        data = beforeRequest(data)
+      }
+      axios.get(action, { params: data, headers }).then(res => {
         let { data } = res
         if (callback) {
           data = callback(data)
@@ -81,19 +90,54 @@ export default {
       })
     },
     // 更新
-    updateData(params) {
-      const { action, data = {}, callback } = this.update
-      params = Object.assign({}, params, data)
-      if (callback) {
-        params = callback(params)
+    updateData(formData) {
+      let {
+        action,
+        headers = {},
+        data = {},
+        beforeRequest,
+        callback
+      } = this.update
+      if (beforeRequest) {
+        formData = beforeRequest(formData)
+      }
+      // 自定义数据和表单数据合并
+      formData = Object.assign({}, formData, data)
+      // 自定义header和默认header合并
+      headers = Object.assign(
+        { 'Content-Type': 'application/x-www-form-urlencoded' },
+        headers
+      )
+      // 表单数据序列化
+      if (headers['Content-Type'] === 'application/x-www-form-urlencoded') {
+        let params = new URLSearchParams()
+        for (let key in formData) {
+          let value = formData[key]
+          params.append(
+            key,
+            typeof value === 'object' ? JSON.stringify(value) : value
+          )
+        }
+        formData = params
       }
-      axios.post(action, params).then(res => {
-        this.$emit('update')
+      axios.post(action, formData, { headers }).then(res => {
+        let { data } = res
+        callback && callback(data)
+        this.$emit('update', data)
       })
     },
     onSubmit(data) {
       this.updateData(data)
-    }
+    },
+    // 新增表单
+    handleAdd() {
+      this.formModel.push(this.form.model)
+    },
+    // 删除表单
+    handleRemove(index) {
+      this.formModel.splice(0, index)
+    },
+    handleSubmit() {}
   },
   beforeMount() {
     this.init()
@@ -102,4 +146,31 @@ export default {
 </script>
 
 <style lang="scss">
+.ezj-form-pane__hint {
+  margin-bottom: 20px;
+}
+.ejz-form-pane_group {
+  position: relative;
+  margin-bottom: 20px;
+  padding: 15px;
+  border: 2px solid #c41230;
+  border-radius: 10px;
+
+  .remove {
+    position: absolute;
+    top: -12px;
+    right: -12px;
+    z-index: 999;
+    font-size: 20px;
+    line-height: 24px;
+    text-align: center;
+    color: #fff;
+    cursor: pointer;
+    background-color: #c41230;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+}
 </style>