Component

Form Designer（MakingForm）

API

Props

Parameter	Description	Type	Default
preview	Show the designer preview action button	Boolean	fasle
generate-json	Show the designer generates the JSON button	Boolean	false
generate-code	Show the designer generates the code button	Boolean	false
clearable	Show the designer empty button	Boolean	false
upload	Show the designer import JSON button	Boolean	false
basic-fields	Show the left base field configuration of the designer	Array	['input', 'textarea', 'number', 'radio', 'checkbox', 'time', 'date', 'rate', 'color', 'select', 'switch', 'slider', 'text']
advance-fields	Show the advanced field configuration on the left side of the designer	Array	['blank', 'imgupload', 'editor', 'cascader']
layout-fields	Show the layout field configuration on the left of the designer	Array	['grid']

Slots

name	Descriptions
action	Designer head action button custom area

Method

Through ref ↗, we can get MakingForm instance and invoke the instance methods.

Mthod Name	Descriptions	Parameter
getJSON	Get the JSON data for the designer configuration	-
getHtml	Get the HTML code generated by the designer that can be used directly	-
setJSON	Sets the configuration information for the designer	(value) The JSON data obtained through the getJSON method
clear	Empty the designer	-

Code Demonstration

Custom Action Buttons

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;" 
  >
    <template slot="action">
      <!-- Custom operation area slots -->
      <el-button type="text" icon="el-icon-upload">Save</el-button>
    </template>
  </fm-making-form>
</template>

Field Configuration

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;"
    :basic-fields="['input', 'textarea']"
    :advance-fields="['blank', 'fileupload']"
    :layout-fields="[]"
  >
  </fm-making-form>
</template>

Get JSON Data

<fm-making-form 
  ref="makingform" 
  style="height: 500px;" 
  preview 
  generate-code 
  generate-json
>
</fm-making-form>

const json = this.$refs.makingform.getJSON()

Form Generator（GenerateForm）

API

Props

Parameter	Descriptions	Type	Default
data	Form json configuration data	Object	-
value	Form data	Object	-
remote	remote method used for get Form data	Object	{}

Events

Event Name	Descriptions	CallBack Parameter
on-change	Triggered when the form data changes	field: The field identification of the data changed value: The value of the data after the changed data: Form data

Method

Through ref ↗, we can get GenerateForm instance and invoke the instance methods

Method Name	Descriptions	Parameter
getData	Get form data	-
reset	Reset form data	-

Code Demonstration

Form Generation

The form can be rendered directly according to the json generated in the designer, and the form data can be obtained.

<template>
  <div>
    <fm-generate-form 
      :data="jsonData" 
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleSubmit">Submit</el-button>
  </div>
</template>

export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1575897887618","remoteOption":"option_1575897887618"},"name":"单行文本","key":"1575897887618","model":"input_1575897887618","rules":[{"type":"string","message":"单行文本格式不正确"}]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.generateForm.getData().then(data => {
        alert(JSON.stringify(data))
      }).catch(e => {
      })
    }
  }
}

Loading Form Data

<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      :value="editData" 
      ref="generateForm"
    >
    </fm-generate-form>
  </div>
</template>

export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1575897887618","remoteOption":"option_1575897887618"},"name":"名称","key":"1575897887618","model":"name","rules":[{"type":"string","message":"名称格式不正确"}]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
      editData: {
        /* The form data to be loaded can be set here */
        name: 'Gavin'
      },
    }
  }
}

Form Field Value changed Event

The on-change event is triggered when the value of the form field changed.

<template>
  <div>
    <fm-generate-form 
      :data="jsonData" 
      @on-change="onChange"
      :value="formData"
      ref="generateForm"
    >
    </fm-generate-form>
  </div>
</template>

export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1575897887618","remoteOption":"option_1575897887618"},"name":"名称","key":"1575897887618","model":"name","rules":[{"type":"string","message":"名称格式不正确"}]},{"type":"text","icon":"icon-wenzishezhi-","options":{"defaultValue":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1575906202073","remoteOption":"option_1575906202073"},"name":"","key":"1575906202073","model":"show","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
      formData: {
        show: ''
      }
    }
  },
  methods: {
    onChange (field, value) {
      if (field == 'name') {
        this.formData.show = value
      }
    }
  }
}