update

src/components/elem-form/city-select-form/elemInfo.md

+## 组件简介
+
+|  字段值  | 说明                       | 字段属性 | 默认值 |
+| ------- | ------------------------- | ------- | ----- |
+| `type`  | 类型：`String`; 说明：组件类型名 | 自定义字段 | `city-select-form` |
+| `label` | 类型：`String`; 说明：组件左侧显示名称 | element-ui el-form-item对应字段 | `''` |
+| `label-width` | 类型：`String`; 说明：组件左侧显示名称宽度（加单位），父级设置可以子级继承 | element-ui el-form-item对应字段 | `''` |
+| `required` | 类型：`Boolean`; 说明：标识是否必填 | element-ui el-form-item对应字段 | `false` |
+| `disabled` | 类型：`Boolean`; 说明：标识是否只读 | element-ui el-form-item对应字段 | `false` |
+| `model` | 类型：`String`; 说明：表单提交name值和回显对照字段 | 自定义字段 | `''` |
+| `separator` | 类型：`String`; 说明：回显时，值间隔符 | 自定义字段 | `'-'` |
+| `model-width` | 类型：`String`; 说明：右侧输入组件,每一个单独宽度（加单位） | 自定义字段 | `'100px'` |
+| `placeholder$0` | 类型：`String`; 说明：组件input框中，默认提示文字 | element-ui el-input对应字段 | `''` |
+| `attrs$0` | 类型：`Object`; 说明：定义标签上Data属性值 | element-ui对应字段 | `{}` |
+| `rules` | 类型：`Array`; 说明：组件错误提示规则 | element-ui el-form-item对应字段 | `[]` |
+
+### Demo Example:
+``` js
+{
+  'type': 'city-select-form',
+  'label': '现居住城市',
+  'label-width': '160px',
+  'required': true,
+  'disabled': false,
+  'model': 'city_select_str',
+  'separator': '-',
+  'model-width': '',
+  'placeholder0': '请输入省份',
+  'placeholder1': '请输入城市',
+  'attrs0': {},
+  'attrs1': {},
+  'rules': []
+}
+```
+
+* 其他属性 [参考文档]([https://](https://element.eleme.cn/#/zh-CN/component/input))

src/components/elem-form/city-select-form/index.js

+import CitySelect from './src/citySelectForm'
+
+/* istanbul ignore next */
+CitySelect.install = function (Vue) {
+  Vue.component(CitySelect.name, CitySelect)
+}
+
+export default CitySelect

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

+<template>
+  <div class="input-form">
+    <el-form-item
+      :key="item.model"
+      :prop="item.model"
+      :label="item.label || ''"
+      :label-width="item.labelWidth || item['label-width'] || ''"
+      :required="item.required || false"
+      :rules="item.rules || []"
+      :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' }"
+          v-bind="item['attrs' + index]"
+          v-on="$listeners"
+          v-model="select['model']"
+          :placeholder="item['placeholder' + index]"
+          :disabled="item.disabled || false"
+          @change="isSelectChange(index)"
+        >
+          <el-option
+            v-for="option in select.arr"
+            :label="option.label"
+            :value="option.value"
+            :key="option.value"
+          ></el-option>
+        </el-select>
+      </template>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import address from './address'
+
+export default {
+  name: 'CitySelectForm',
+  componentName: 'CitySelectForm',
+  props: {
+    item: {
+      type: Object,
+      default () {
+        return {
+          separator: '-'
+        }
+      }
+    },
+    formData: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      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] || '')
+    }
+  },
+  methods: {
+    /* 解析地址 */
+    analysisAddress (json, i, val) {
+      let arr = []
+      for (let k in json) {
+        if (k !== 'name' && json[k].name) {
+          arr.push({ 'label': json[k].name, 'value': k })
+        }
+      }
+      if (arr.length) {
+        this.selects.push({ arr: arr, index: i, model: val || '' })
+      }
+    },
+    /* 是否选择 */
+    isSelectChange (index, val) {
+      let json = address
+      for (let i = 0; i <= index; i++) {
+        /* 当前选中的 value值 */
+        let tempVal = this.selects[i].model
+        if (tempVal && json[tempVal] && json[tempVal].name) {
+          json = json[tempVal]
+        }
+      }
+      /* 删除后续selects数据 */
+      for (let j = index + 1; j < this.selects.length;) {
+        this.selects.splice(j)
+      }
+      /* 如果有，则重新添加 */
+      if (json.name) {
+        this.analysisAddress(json, (index + 1), val || '')
+      }
+      /* 重新给 formData赋值 - 双向绑定 */
+      let arr = []
+      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)
+    }
+  }
+}
+</script>

src/components/elem-form/date-picker-form/elemInfo.md

@@ -4,6 +4,15 @@
 | ------- | ------------------------- | ------- | ----- |
 | `type`  | 类型：`String`; 说明：组件类型名 | 自定义字段 | `date-picker-form` |
 | `elemType`  | 类型：`String`; 说明：组件类型选择 | element-ui el-date-picker对应字段 | `date` |
+| `label` | 类型：`String`; 说明：组件左侧显示名称 | element-ui el-form-item对应字段 | `''` |
+| `label-width` | 类型：`String`; 说明：组件左侧显示名称宽度（加单位），父级设置可以子级继承 | element-ui el-form-item对应字段 | `''` |
+| `required` | 类型：`Boolean`; 说明：标识是否必填 | element-ui el-form-item对应字段 | `false` |
+| `disabled` | 类型：`Boolean`; 说明：标识是否只读 | element-ui el-form-item对应字段 | `false` |
+| `model` | 类型：`String`; 说明：表单提交name值和回显对照字段 | 自定义字段 | `''` |
+| `model-width` | 类型：`String`; 说明：右侧输入组件宽度（加单位） | 自定义字段 | `'100%'` |
+| `placeholder` | 类型：`String`; 说明：组件input框中，默认提示文字 | element-ui el-input对应字段 | `''` |
+| `attrs` | 类型：`Object`; 说明：定义标签上Data属性值 | element-ui对应字段 | `{}` |
+| `rules` | 类型：`Array`; 说明：组件错误提示规则 | element-ui el-form-item对应字段 | `[]` |
 
 ### Demo:
 ``` js
@@ -11,12 +20,12 @@
   'type': 'date-picker-form',
   'elemType': '',
   'label': '出生日期',
+  'label-width': '160px',
   'required': true,
   'disabled': false,
-  'label-width': '160px',
   'model': 'birthday',
   'model-width': '',
-  'placeholder': '请选择',
+  'placeholder': '请选择出生日期',
   'attrs': { 'value-format': 'yyyy-MM-dd' },
   'rules': []
 }

src/components/elem-form/index.js

@@ -27,6 +27,7 @@ import {
 import InputForm from './input-form'
 import TextareaForm from './textarea-form'
 import SelectForm from './select-form'
+import CitySelectForm from './city-select-form'
 import DatePickerForm from './date-picker-form'
 import DatePickerFromToForm from './date-picker-from-to-form'
 import RadioGroupForm from './radio-group-form'
@@ -35,6 +36,7 @@ const components = [
   InputForm,
   TextareaForm,
   SelectForm,
+  CitySelectForm,
   DatePickerForm,
   DatePickerFromToForm,
   RadioGroupForm
@@ -91,6 +93,7 @@ export default {
   InputForm,
   TextareaForm,
   SelectForm,
+  CitySelectForm,
   DatePickerForm,
   DatePickerFromToForm,
   RadioGroupForm

src/components/elem-form/input-form/elemInfo.md

@@ -13,13 +13,13 @@
 | `attrs` | 类型：`Object`; 说明：定义标签上Data属性值 | element-ui对应字段 | `{}` |
 | `rules` | 类型：`Array`; 说明：组件错误提示规则 | element-ui el-form-item对应字段 | `[]` |
 
-### Demo:
+### Demo Example:
 ``` js
 {
   'type': 'input-form',
   'label': '姓名',
   'label-width': '160px',
-  'required': false,
+  'required': true,
   'disabled': false,
   'model': 'real_name_cn',
   'model-width': '',
@@ -28,7 +28,7 @@
   'rules': [
     {
       'required': true,
-      'message': '请输入活动名称',
+      'message': '请输入姓名',
       'trigger': 'blur'
     },
     {

src/components/elem-form/radio-group-form/elemInfo.md

@@ -3,18 +3,28 @@
 |  字段值  | 说明                       | 字段属性 | 默认值 |
 | ------- | ------------------------- | ------- | ----- |
 | `type`  | 类型：`String`; 说明：组件类型名 | 自定义字段 | `radio-group-form` |
+| `label` | 类型：`String`; 说明：组件左侧显示名称 | element-ui el-form-item对应字段 | `''` |
+| `label-width` | 类型：`String`; 说明：组件左侧显示名称宽度（加单位），父级设置可以子级继承 | element-ui el-form-item对应字段 | `''` |
+| `required` | 类型：`Boolean`; 说明：标识是否必填 | element-ui el-form-item对应字段 | `false` |
+| `disabled` | 类型：`Boolean`; 说明：标识是否只读 | element-ui el-form-item对应字段 | `false` |
+| `model` | 类型：`String`; 说明：表单提交name值和回显对照字段 | 自定义字段 | `''` |
+| `model-width` | 类型：`String`; 说明：右侧输入组件宽度（加单位） | 自定义字段 | `'100%'` |
+| `placeholder` | 类型：`String`; 说明：组件input框中，默认提示文字 | element-ui el-input对应字段 | `''` |
+| `values` | 类型：`Array`; 说明：里面是选择类型值label和value(值可以是 int 或 str)，选择组 | 自定义字段 | `[]` |
+| `attrs` | 类型：`Object`; 说明：定义标签上Data属性值 | element-ui对应字段 | `{}` |
+| `rules` | 类型：`Array`; 说明：组件错误提示规则 | element-ui el-form-item对应字段 | `[]` |
 
 ### Demo:
 ``` js
 {
   'type': 'radio-group-form',
   'label': '性别',
+  'label-width': '160px',
   'required': true,
   'disabled': false,
-  'label-width': '160px',
   'model': 'gender',
   'model-width': '',
-  'values': [{ 'label': '男', 'value': '1' }, { 'label': '女', 'value': '2' }],
+  'values': [{ 'label': '男', 'value': 1 }, { 'label': '女', 'value': 2 }],
   'attrs': {},
   'rules': []
 }

src/components/elem-form/select-form/elemInfo.md

@@ -3,24 +3,34 @@
 |  字段值  | 说明                       | 字段属性 | 默认值 |
 | ------- | ------------------------- | ------- | ----- |
 | `type`  | 类型：`String`; 说明：组件类型名 | 自定义字段 | `select-form` |
+| `label` | 类型：`String`; 说明：组件左侧显示名称 | element-ui el-form-item对应字段 | `''` |
+| `label-width` | 类型：`String`; 说明：组件左侧显示名称宽度（加单位），父级设置可以子级继承 | element-ui el-form-item对应字段 | `''` |
+| `required` | 类型：`Boolean`; 说明：标识是否必填 | element-ui el-form-item对应字段 | `false` |
+| `disabled` | 类型：`Boolean`; 说明：标识是否只读 | element-ui el-form-item对应字段 | `false` |
+| `model` | 类型：`String`; 说明：表单提交name值和回显对照字段 | 自定义字段 | `''` |
+| `model-width` | 类型：`String`; 说明：右侧输入组件宽度（加单位） | 自定义字段 | `'100%'` |
+| `placeholder` | 类型：`String`; 说明：组件input框中，默认提示文字 | element-ui el-input对应字段 | `''` |
+| `values` | 类型：`Array`; 说明：里面是选择类型值label和value(值可以是 int 或 str) | 自定义字段 | `[]` |
+| `attrs` | 类型：`Object`; 说明：定义标签上Data属性值 | element-ui对应字段 | `{}` |
+| `rules` | 类型：`Array`; 说明：组件错误提示规则 | element-ui el-form-item对应字段 | `[]` |
 
-### Demo:
+### Demo Example:
 ``` js
 {
   'type': 'select-form',
   'label': '证件类型',
+  'label-width': '160px',
   'required': true,
   'disabled': false,
-  'label-width': '160px',
   'model': 'id_type',
   'model-width': '',
-  'placeholder': '请选择',
+  'placeholder': '请选择证件类型',
   'values': [
-    { 'label': '居民身份证', 'value': '0' },
-    { 'label': '港澳台身份证', 'value': '1' },
-    { 'label': '护照号', 'value': '2' },
-    { 'label': '军官证', 'value': '3' },
-    { 'label': '其他', 'value': '9' }
+    { 'label': '居民身份证', 'value': 0 },
+    { 'label': '港澳台身份证', 'value': 1 },
+    { 'label': '护照号', 'value': 2 },
+    { 'label': '军官证', 'value': 3 },
+    { 'label': '其他', 'value': 9 }
   ],
   'attrs': {},
   'rules': []