update

examples/App-sofia.vue

@@ -37,18 +37,25 @@ export default {
               showProgress: true,
               progress: 0,
               get: {
-                action: '/zws/v1/enrollment/profiles?project_id=1001',
+                action: '/zws/v1/enrollment/profiles?project_id=1000',
                 callback(data) {
                   data.date_of_starting_to_work =
                     data.date_of_starting_to_work + ''
-                  data.city_select_str = ''
+                  let arr = []
+                  arr[0] = data.address_province
+                  arr[1] = data.address_city
+                  data.city_select_str = arr.join('-')
+                  console.log(1)
                   return data
                 }
               },
               update: {
                 action: '/zws/v1/enrollment/profiles',
-                data: { project_id: 1001 },
+                data: { project_id: 1000 },
                 callback(data) {
+                  let arr = data.city_select_str.split('-')
+                  data.address_province = arr[0]
+                  data.address_city = arr[1]
                   return data
                 }
               },
@@ -151,7 +158,6 @@ export default {
                     'label': '现居住城市',
                     'label-width': '160px',
                     'required': true,
-                    'disabled': false,
                     'model': 'city_select_str',
                     'separator': '-',
                     'model-width': '',
@@ -326,7 +332,55 @@ export default {
             {
               id: '0-4',
               title: '学习目的',
-              progress: 0
+              showProgress: true,
+              progress: 0,
+              get: {
+                action: '/zws/v1/enrollment/answers?project_id=1000',
+                callback(data) {
+                  let _data = {}
+                  data.forEach((item, i) => {
+                    _data['qid' + (i + 1)] = item.qid
+                    _data['learn_target_0' + (i + 1)] = item.answer
+                  })
+                  return _data
+                }
+              },
+              update: {
+                action: '/zws/v1/enrollment/answers/batch-upload',
+                data: { project_id: 1000 },
+                callback(data) {
+                  let _data = { records: [] }
+                  _data.records.push({ qid: data.qid1, answer: data.learn_target_01 })
+                  _data.records.push({ qid: data.qid2, answer: data.learn_target_02 })
+                  return _data
+                }
+              },
+              form: {
+                options: {
+                },
+                items: [
+                  /* 您为什么要申请索菲亚大学金融方向工商管理硕士项目？（60字以上，1000字以内） */
+                  {
+                    'type': 'textarea-form',
+                    'label': '您为什么要申请索菲亚大学金融方向工商管理硕士项目？（60字以上，1000字以内）',
+                    'labelWidth': 'auto',
+                    'required': true,
+                    'model': 'learn_target_01',
+                    'model-width': '100%',
+                    'placeholder': '您为什么要申请索菲亚大学金融方向工商管理硕士项目？（60字以上，1000字以内）'
+                  },
+                  /* 您的短期和长期职业发展目标是什么？您打算如何达成此愿景？（60字以上，1000字以内） */
+                  {
+                    'type': 'textarea-form',
+                    'label': '您的短期和长期职业发展目标是什么？您打算如何达成此愿景？（60字以上，1000字以内）',
+                    'labelWidth': 'auto',
+                    'required': true,
+                    'model': 'learn_target_02',
+                    'model-width': '100%',
+                    'placeholder': '您的短期和长期职业发展目标是什么？您打算如何达成此愿景？（60字以上，1000字以内）'
+                  }
+                ]
+              }
             },
             {
               id: '0-5',

examples/main.js

 import Vue from 'vue'
-import App from './App.vue'
-// import App from './App-sofia.vue'
+// import App from './App.vue'
+import App from './App-sofia.vue'
 import VueForm from '../src/index'
 
 Vue.use(VueForm)

src/components/elem-form/city-select-form/src/citySelectForm.vue

@@ -10,7 +10,7 @@
       :size="item.size"
     >
       <template v-for="(select, index) in selects">
-        <el-select v-bind:key="index" :style="{ 'width': item.labelWidth || item['model-width'] || '100px', 'float': 'left', 'marginRight': '10px' }"
+        <el-select v-bind:key="index" :style="{ 'width': item.modelWidth || item['model-width'] || '100px', 'float': 'left', 'marginRight': '10px' }"
           v-bind="item['attrs' + index]"
           v-on="$listeners"
           v-model="select['model']"
@@ -54,21 +54,24 @@ export default {
   },
   data () {
     return {
+      str: '', // 记录一下
       selects: [] // 动态添加，当前显示的选择框个数
     }
   },
   mounted () {
-    /* 按照配置项，解析返回数据 */
-    let _data = this.formData[this.item.model]
-    let arr = []
-    if (_data) {
-      arr = _data.split(this.item.separator)
-    }
-    /* 回显 */
-    this.analysisAddress(address, 0, arr[0] || '')
-    /* 第一个选项为空 */
-    for (let i = 0; i <= arr.length; i++) {
-      this.isSelectChange(i, arr[i + 1] || '')
+    if (this.str === '') {
+      /* 按照配置项，解析返回数据 */
+      let _data = this.formData[this.item.model]
+      let arr = []
+      if (_data) {
+        arr = _data.split(this.item.separator)
+      }
+      /* 回显 */
+      this.analysisAddress(address, 0, arr[0] || '')
+      /* 第一个选项为空 */
+      for (let i = 0; i <= arr.length; i++) {
+        this.isSelectChange(i, arr[i + 1] || '')
+      }
     }
   },
   methods: {
@@ -87,13 +90,17 @@ export default {
     /* 是否选择 */
     isSelectChange (index, val) {
       let json = address
-      for (let i = 0; i <= index; i++) {
+      let i = 0
+      for (; i <= index; i++) {
         /* 当前选中的 value值 */
-        let tempVal = this.selects[i].model
+        let tempVal = this.selects[i] && this.selects[i].model
         if (tempVal && json[tempVal] && json[tempVal].name) {
           json = json[tempVal]
+        } else {
+          break
         }
       }
+      if (i <= index) { return }
       /* 删除后续selects数据 */
       for (let j = index + 1; j < this.selects.length;) {
         this.selects.splice(j)
@@ -107,7 +114,31 @@ export default {
       for (let k = 0; k < this.selects.length; k++) {
         arr.push(this.selects[k].model)
       }
-      this.formData[this.item.model] = arr.join(this.item.separator)
+      this.formData[this.item.model] = this.str = arr.join(this.item.separator)
+    }
+  },
+  watch: {
+    formData: {
+      immediate: true,
+      deep: true,
+      handler (value) {
+        /* 单独处理 - ajax结果在组件渲染之后 */
+        if (value[this.item.model] && this.str === '' && value[this.item.model] !== this.str) {
+          this.str = value[this.item.model]
+          let _data = this.str
+          this.selects = []
+          let arr = []
+          if (_data) {
+            arr = _data.split(this.item.separator)
+          }
+          /* 回显 */
+          this.analysisAddress(address, 0, arr[0] || '')
+          /* 第一个选项为空 */
+          for (let i = 0; i <= arr.length; i++) {
+            this.isSelectChange(i, arr[i + 1] || '')
+          }
+        }
+      }
     }
   }
 }

src/components/elem-form/date-picker-form/src/datePickerForm.vue

@@ -9,7 +9,7 @@
       :rules="item.rules || []"
       :size="item.size"
     >
-      <el-date-picker :style="{ width: item.labelWidth || item['model-width'] || '100%' }"
+      <el-date-picker :style="{ width: item.modelWidth || item['model-width'] || '100%' }"
         :type="item.elemType || 'date'"
         v-bind="item.attrs"
         v-on="$listeners"

src/components/elem-form/date-picker-from-to-form/src/datePickerFromToForm.vue

@@ -9,7 +9,7 @@
       :rules="item.rules || []"
       :size="item.size"
     >
-      <el-date-picker :style="{ width: item.labelWidth || item['model-width'] || '100%' }"
+      <el-date-picker :style="{ width: item.modelWidth || item['model-width'] || '100%' }"
         :type="item.elemType || 'daterange'"
         v-bind="item.attrs"
         v-on="$listeners"

src/components/elem-form/input-form/src/inputForm.vue

@@ -9,7 +9,7 @@
       :rules="item.rules || []"
       :size="item.size"
     >
-      <el-input :style="{ width: item.labelWidth || item['model-width'] || '100%' }"
+      <el-input :style="{ width: item.modelWidth || item['model-width'] || '100%' }"
         v-bind="item.attrs || {}"
         v-on="$listeners"
         v-model="formData[item.model]"

src/components/elem-form/radio-group-form/src/radioGroupForm.vue

@@ -13,7 +13,7 @@
         v-bind="item.attrs"
         v-on="$listeners"
         v-model="formData[item.model]"
-        :style="{ width: item.labelWidth || item['model-width'] || '100%' }"
+        :style="{ width: item.modelWidth || item['model-width'] || '100%' }"
         :disabled="item.disabled || false"
       >
         <el-radio

src/components/elem-form/select-form/src/selectForm.vue

@@ -9,7 +9,7 @@
       :rules="item.rules || []"
       :size="item.size"
     >
-      <el-select :style="{ width: item.labelWidth || item['model-width'] || '100%' }"
+      <el-select :style="{ width: item.modelWidth || item['model-width'] || '100%' }"
         v-bind="item.attrs"
         v-on="$listeners"
         v-model="formData[item.model]"

src/components/elem-form/textarea-form/src/textareaForm.vue

@@ -9,7 +9,7 @@
       :rules="item.rules || []"
       :size="item.size"
     >
-      <el-input :style="{ width: item.labelWidth || item['model-width'] || '100%' }"
+      <el-input :style="{ width: item.modelWidth || item['model-width'] || '100%' }"
         type="textarea"
         :rows="item.rows || 3"
         v-bind="item.attrs || {}"