MakingForm

A form designer component that visualizes form pages

Code Demonstration

Basic Usage

<template>
  <fm-making-form
    style="height: 700px;"
    preview 
    generate-code 
    generate-json
  >
  </fm-making-form>
</template>

notice

The default height is 100% of the height of the parent element, but if the parent element does not specify a height, the form designer can specify a specific height.

Customize Action Buttons

<template>
  <fm-making-form 
    style="height: 700px;" 
    v-bind="actionButton"
  >
    <template #action>
      <!-- Customize the operation area slot -->
      <el-button type="primary">
        <el-icon><Upload /></el-icon> Save
      </el-button>
    </template>
  </fm-making-form>
</template>

<script setup>
import { Upload } from '@element-plus/icons-vue'
import { reactive } from 'vue'

const actionButton = reactive({
  clearable: true,
  preview: true
})
</script>

Designer Left Field Configuration

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

Gets the Form JSON

<template>
  <fm-making-form 
    style="height: 700px;"
    ref="makingFormRef"
  >
    <template #action>
      <el-button type="text"  @click="handleJson">Get JSON</el-button>
    </template>
  </fm-making-form>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

const makingFormRef = ref()

const handleJson = () => {
  const json = makingFormRef.value.getJSON() 

  ElMessageBox.alert(json)
}
</script>

Importing Form JSON

Import the designed form JSON Schema into the new designer.

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 700px;" 
    preview 
    generate-code 
    generate-json
    @ready="handleFormReady"
  >
  </fm-making-form>
</template>

<script setup>
import { ref } from 'vue'

const makingform = ref()

const handleFormReady = () => {
  const newJson = { "list": [ { "type": "input", "icon": "icon-input", "options": { "width": "", "defaultValue": "", "required": false, "requiredMessage": "", "dataType": "", "dataTypeCheck": false, "dataTypeMessage": "", "pattern": "", "patternCheck": false, "patternMessage": "", "validatorCheck": false, "validator": "", "placeholder": "", "customClass": "", "disabled": false, "labelWidth": 100, "isLabelWidth": false, "hidden": false, "dataBind": true, "showPassword": false, "remoteFunc": "func_f7vuj1ic", "remoteOption": "option_f7vuj1ic" }, "events": { "onChange": "", "onFocus": "", "onBlur": "" }, "name": "Input", "key": "f7vuj1ic", "model": "input_f7vuj1ic", "rules": [] } ], "config": { "labelWidth": 100, "labelPosition": "right", "size": "default", "customClass": "", "ui": "element", "layout": "horizontal", "labelCol": 3, "width": "100%", "hideLabel": false, "hideErrorMessage": false, "eventScript": [ { "key": "mounted", "name": "mounted", "func": "" } ] } }

  makingform.value.setJSON(newJson)
}
</script>

notice

We need to import the json after the designer is initialized and do that in the ready event

Initialize the Form Stylesheet

<template>
  <fm-making-form
    :global-config="globalConfig">
  </fm-making-form>
</template>

<script setup>
const globalConfig = {
  // Configure the default stylesheet for the designer
  styleSheets: '.a .el-form-item__label{color: red;}',

  // 数据源配置
  dataSource: [
    {
      key: 'getoptions', // The unique value specified
      name: 'Get Options', // Data source name, unique value
      url: 'https://tools-server.making.link/api/new/options', //  Request interface address
      method: 'GET',
      auto: true, // Whether to send a request on form initialization
      responseFunc: 'return res.data', // Data manipulation function contents
      headers: {}, // Data request header, optional
      params: {}, // Data request parameter, optional, (query parameter)
    }
  ]
}
</script>

TIP

When the designer initializes, it will automatically parse the configured style sheet, take out the first-class Class name, and configure it in the Custom Class.

Form Field Default Configuration

The default properties of the fields in the designer can be configured via field-config.

<template>
  <fm-making-form
    :field-config="fieldConfig"
  ></fm-making-form>
</template>

<script setup>
const fieldConfig = [
  {
    type: 'fileupload',
    options: {
      // Configure the upload component address
      domain: 'https://tcdn.form.making.link/',
      action: 'https://tools-server.making.link/api/transfer',
    }
  },
  {
    type: 'select',
    options: {
      // Configure static option data for the drop-down box component
      options: [
        {value: '1111'},
        {value: '2222'},
        {value: '3333'}
      ]
    }
  }
]
</script>

For more field configurable property, you can refer toField Configurable Property.

Field identity drop-down select binding

Sometimes when we design a form, the data field identity is already specified, which can be passed to the designer via field-models, and the field binding can be selected at design time.

<template>
  <fm-making-form
    :field-models="fieldModels"
  ></fm-making-form>
</template>

<script setup>
const fieldModels = [
  {
    fieldId: 'userId'
  },
  {
    fieldId: 'userName',
    fieldLabel: 'User Name'
  }
]
</script>

Field property Custom Extensions

In the field property configuration, we can introduce our own extended configuration through the slot.

<fm-making-form>
  <template #widgetConfig="{type, data, customProps}">
    <el-form-item v-if="type === 'button'" label="Loading">
      <el-switch v-model="customProps.loading"></el-switch>
    </el-form-item>
  </template>
</fm-making-form>

Here we freely configure the properties of the field via the widgetConfig slot and receive the type:(field type) data:(field json data) customProps:(property of the field custom extension to bind the configuration item).

API

Property

Property	Description	Type	Default
preview	Preview operation	boolean	false
generate-json	Generate json operation	boolean	false
generate-code	Generate code operation	boolean	false
clearable	Clear operation	boolean	false
upload	Import json operation	boolean	false
basic-fields	Basic field configuration, refer to Field Description-Basic Field	array	-
advance-fields	Basic field configuration, refer to Field Description-Basic Field	array	-
layout-fields	Layout field configuration， refer to Field Description-Layout Field	array	-
collection-fields	Collection field configuration, refer to Field Description-Collection Field	array	-
custom-fields	Custom field configuration	array	-
global-config	The form initializes global configuration, refer to Global Config Options	object	-
field-config	Form field default configuration item, configuration item reference field configurable item	array	-
name	Name of designer
cache	You can configure the name property to differentiate whether json is cached to the browser	boolean	false
json-templates	Template library configuration; { title: 'Chinese template name', enTitle: 'English template name', json: 'Template json', url: 'Template preview thumbnail' }	array	[]
init-from-template	Whether to enable selection from the template library during initialization	boolean	false
field-models	Field identity configuration, which provides a drop-down binding for designer field identity. { fieldId: Binding field identification, fieldLabel: Name of display }	array	[]
panel ^3.3.2	Left panel default display type: field : Component Library Panel outline : Outline Tree Panel	string	field

Slot

name	Description
action	Designer header action button customization area
widgetConfig ^3.4.0 widgetconfig ^3.5.2	Field property custom extension area, please refer to Field Property Custom Extension

Method

Method name	Description	Parameter
getJSON	Get the json data for the designer configuration	-
getHtml	Get the code generated by the designer that can be used directly -	-
setJSON	Set the json data for the designer	（value) json data obtained by the designer
clear	Clear the designer form data	-
handleUndo	Undo	-
handleRedo	Redo	-
setSelect	Set the component currently selected by the designer	(field) ID
getFormModels ^3.5.3	Gets a list of form field structures	-
generatePreviewQrcode ^3.5.5	生成手机预览二维码	(url) 二维码地址

Event

Event name	Description	Callback parameter
ready	The designer initialization is complete	-
preview ^3.5.5	表单预览	(json) 表单JSON配置

Global Config Options

Parameter	Description	Type	Default
ui	The UI component library used by the form	string (element | antd)	element
width	Form width	string	100%
customClass	Custom style sheet class name	string	-
styleSheets	Refer to Default Configured for Form Fields	string	-
dataSource	Refer to Default Configured for Form Fields	array	-
eventScript	Form event	array	-
platform	Device,optional pc、pad、mobile	string	-