vue动态表单

项目需求，需要根据后台接口返回数据，动态添加表单内容

说明：此组件基于Ant Design of Vue

目前支持六种表单控件：文本输入框（TextInput）、文本域输入框（TextArea）、下拉选择框（SelectInput）、下拉多选（SelectMultiple）、日期（DataPicker）、日期精确到秒（DataPickerSen）

一、文本框

 <template>
   <a-form-item :label="label" v-bind="formItemLayout">
     <a-input
       v-decorator="[`${fieldName}`, {initialValue: currentValue}]"
       :placeholder="placeHolder"
       @input="onInputEvent"
     />
   </a-form-item>
 </template>

 <script>
 export default {
   name: 'TextInput',
   props: ['name', 'label', 'value', 'options', 'fieldName', 'placeHolder'],
   data() {
     return {
       currentValue: this.value,
       formItemLayout: {
         labelCol: {
           xs: { span: 24 },
           sm: { span: 8 }
         },
         wrapperCol: {
           xs: { span: 24 },
           sm: { span: 12 }
         }
       }
     }
   },
   methods: {
     onInputEvent(v) {
       this.$emit('input', this.name, v.target.value)
     }
   },
   watch: {
     value(val) {
       this.currentValue = val
     }
   }
 }
 </script>

二、文本域

 <template>
   <a-form-item :label="label" v-bind="formItemLayout">
     <a-textarea
       v-decorator="[`${fieldName}`, {initialValue: currentValue}]"
       :placeholder="placeHolder"
       @input="onInputEvent"
     />
   </a-form-item>
 </template>

 <script>
 export default {
   name: 'TextArea',
   props: ['name', 'label', 'value', 'options', 'fieldName', 'placeHolder'],
   data() {
     return {
       currentValue: this.currentValue,
       formItemLayout: {
         labelCol: {
           xs: { span: 24 },
           sm: { span: 8 }
         },
         wrapperCol: {
           xs: { span: 24 },
           sm: { span: 12 }
         }
       }
     }
   },
   methods: {
     onInputEvent(v) {
       this.$emit('input', this.name, v.target.value)
     }
   },
   watch: {
     currentValue(val) {
       this.currentValue = val
     }
   }
 }
 </script>

三、下拉框

 <template>
   <a-form-item :label="label" v-bind="formItemLayout">
     <a-select
       v-decorator="[`${fieldName}`, {initialValue: currentValue}]"
       :placeholder="placeHolder"
       @change="onInputEvent"
     >
       <a-select-option v-for="v in options" :key="v.dictId">{{v.dictName}}</a-select-option>
     </a-select>
   </a-form-item>
 </template>

 <script>
 export default {
   name: 'SelectInput',
   props: ['name', 'label', 'value', 'options', 'fieldName', 'placeHolder'],
   data() {
     return {
       currentValue: this.value,
       formItemLayout: {
         labelCol: {
           xs: { span: 24 },
           sm: { span: 8 }
         },
         wrapperCol: {
           xs: { span: 24 },
           sm: { span: 12 }
         }
       }
     }
   },
   methods: {
     onInputEvent(value) {
       this.$emit('input', this.name, value)
     }
   },
   watch: {
     value(val) {
       this.currentValue = val
     }
   }
 }
 </script>

四、日期

 <template>
   <a-form-item :label="label" v-bind="formItemLayout">
     <a-date-picker
       :defaultValue="moment(currentValue, 'YYYY-MM-DD')"
       :placeholder="placeHolder"
       @change="onInputEvent"
     />
   </a-form-item>
 </template>

 <script>
 import moment from 'moment'

 export default {
   name: 'DataPicker',
   props: ['name', 'label', 'value', 'options', 'fieldName', 'placeHolder'],
   data() {
     return {
       currentValue: this.value,
       formItemLayout: {
         labelCol: {
           xs: { span: 24 },
           sm: { span: 8 }
         },
         wrapperCol: {
           xs: { span: 24 },
           sm: { span: 12 }
         }
       }
     }
   },
   methods: {
     moment,
     onInputEvent(value) {
       this.$emit('input', this.name, value.format('YYYY-MM-DD'))
     }
   },
   watch: {
     value(val) {
       this.currentValue = val
     }
   }
 }
 </script>

五、表单生成逻辑

 <template>
   <div class="my-class">
     <a-form class="ant-advanced-search-form" :form="form">
       <a-row :gutter="24">
         <div v-for="(fieldConfig, index) in config.fieldsConfig" :key="index">
           <a-col :span="24">
             <a-divider>{{fieldConfig.fieldClassify}}</a-divider>
           </a-col>
           <a-col :span="12" v-for="(field, index) in fieldConfig.fields" :key="index">
             <component
               :key="index"
               :is="field.fieldType"
               :label="field.label"
               :fieldName="field.fieldName"
               :placeHolder="field.placeHolder"
               :value="value[field.name]"
               @input="updateForm"
               v-bind="field"
               :options="field.options"
               :ref="field.name"
             ></component>
           </a-col>
         </div>
       </a-row>
       <a-row>
         <a-col :span="24" :style="{ textAlign: 'center', marginTop: '20px' }">
           <a-button :style="{ marginRight: '8px' }" @click="reset">{{onResetText}}</a-button>
           <a-button type="primary" @click="submit">{{onSubmitText}}</a-button>
         </a-col>
       </a-row>
     </a-form>
   </div>
 </template>
 <script>
 import TextInput from './TextInput'
 import TextArea from './TextArea'
 import SelectInput from './SelectInput'
 import SelectMultiple from './SelectMultiple'
 import DataPicker from './PickerData'
 import DataPickerSen from './PickerDataSen'

 export default {
   name: 'FormGenerator',
   components: { TextArea, TextInput, SelectInput, SelectMultiple, DataPicker, DataPickerSen },
   props: ['config', 'value'],
   data() {
     return {
       form: this.$form.createForm(this),
       onSubmitText: this.config.buttons.onSubmitText || '提交',
       onResetText: this.config.buttons.onResetText || '重置'
     }
   },
   methods: {
     updateForm(fieldName, v) {
       this.value[fieldName] = v
     },
     submit() {
       this.form.validateFields((error, values) => {
         if (!error) {
           this.$emit('submit')
         }
       })
     },
     reset() {
       this.form.resetFields()
     }
   }
 }
 </script>

 <style lang="less" scoped>
 .my-class {
   height: 600px;
   overflow-y: scroll;
   overflow-x: hidden;
 }

 .ant-advanced-search-form .ant-form-item {
   display: flex;
 }

 .ant-advanced-search-form .ant-form-item-control-wrapper {
   flex: 1;
 }

 #components-form-demo-advanced-search .ant-form {
   max-width: none;
 }
 </style>

六、调用

 <template>
   <div>
     <form-generator :config="config" @submit="getFormData" :value="formData"></form-generator>
   </div>
 </template>
 <script>
 import { axios } from '@/utils/request'
 import FormGenerator from './form/FormGenerator'

 export default {
   name: '',
   props: {},
   components: { FormGenerator },
   data() {
     return {
       formData: {},
       config: {
         fieldsConfig: [],
         buttons: {
           onSubmitText: '确定',
           onResetText: '取消'
         }
       }
     }
   },
   methods: {
     getFormData() {
       console.log('formData', this.formData)
     },
     queryAllFields() {
       axios.get(``).then(result => {
         if (result && result.code === 0) {
           this.config.fieldsConfig = result.fieldConfig
         } else {
           this.$message.error(result.msg)
         }
       })
     }
   }
 }
 </script>
 <style lang="less" scoped>
 </style>

后台接口数据格式和页面样式可以参考，请根据自己的业务需求做相应调整，以下为我的项目后台接口数据格式

 formData: {
     "river_name": '',
     "sp_code": '',
     "brief_name": '',
     "simplegeometry": ''
 },
 config: {
     fieldsConfig: [{
         "fields"： [{
             "fieldName": "river_name",
             "name": "river_name",
             "options": [],
             "label": "河道（段）名称",
             "fieldType": "TextInput",
             "placeHolder": null
         }, {
             "fieldName": "sp_code",
             "name": "sp_code",
             "options": [],
             "label": "水普编号",
             "fieldType": "TextInput",
             "placeHolder": null
         }], "fieldClassify": '基本信息'
     }, {
         "fields"： [{
             "fieldName": "brief_name",
             "name": "brief_name",
             "options": [],
             "label": "河道（段）简称",
             "fieldType": "TextInput",
             "placeHolder": null
         }, {
             "fieldName": "simplegeometry",
             "name": "simplegeometry",
             "options": [],
             "label": "抽稀几何",
             "fieldType": "TextInput",
             "placeHolder": null
         }], "fieldClassify": '附件信息'
     }, ],
     buttons: {
         onSubmitText: '确定',
         onResetText: '取消'
     }
 }