FormMaking 官方文档

简体中文

English

简体中文

English

Appearance

关注微信公众号，获取最新动态
官方QQ交流群：985558286

MakingForm ​

表单设计器组件，通过可视化方式制作表单页面

代码演示 ​

基础用法 ​

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

注意

默认高度是根据父元素高度 100% 来渲染的，如果父级元素没有指定高度，可以为表单设计器指定具体的高度

自定义操作按钮 ​

vue
<template>
  <fm-making-form 
    style="height: 700px;" 
    v-bind="actionButton"
  >
    <template #action>
      <!-- 自定义操作区域插槽 -->
      <el-button type="primary">
        <el-icon><Upload /></el-icon> 保存
      </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>

设计器左侧字段配置 ​

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

获取设计器配置 ​

vue
<template>
  <fm-making-form 
    style="height: 700px;"
    ref="makingFormRef"
  >
    <template #action>
      <el-button type="text"  @click="handleJson">获取配置</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>

导入表单配置 ​

将设计好的表单配置 JSON Schema 导入到新的设计器中。

vue
<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>

注意

需要在设计器初始化完成后导入json，在 ready 事件中进行操作

初始化表单配置 ​

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

<script setup>
const globalConfig = {
  // 为设计器配置默认样式表
  styleSheets: '.a .el-form-item__label{color: red;}',

  // 数据源配置
  dataSource: [
    {
      key: 'getoptions', // 指定的唯一值
      name: 'Get Options', // 数据源名称，唯一值
      url: 'https://tools-server.making.link/api/new/options', // 请求接口地址
      method: 'GET',
      auto: true, // 是否表单初始化时发送请求
      responseFunc: 'return res.data', // 数据处理函数内容
      headers: {}, // 数据请求头部，可选
      params: {}, // 数据请求参数，可选，（查询参数）
    }
  ]
}
</script>

TIP

设计器初始化时会自动解析配置的样式表，取出一级类名，在 自定义Class 中进行配置。

表单字段默认配置 ​

可以通过 field-config 对设计器中字段的默认属性进行配置。

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

<script setup>
const fieldConfig = [
  {
    type: 'fileupload',
    options: {
      // 对上传组件地址进行配置
      domain: 'https://tcdn.form.making.link/',
      action: 'https://tools-server.making.link/api/transfer',
    }
  },
  {
    type: 'select',
    options: {
      // 对下拉框组件配置静态选项数据
      options: [
        {value: '1111'},
        {value: '2222'},
        {value: '3333'}
      ]
    }
  }
]
</script>

更多字段可配置属性可以参考 字段可配置项。

字段标识下拉选择绑定 ​

有时候我们在设计表单时，数据字段标识已经指定好，这时候可以通过field-models传入到设计器中，在设计的时候即可通过选择进行字段绑定。

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

<script setup>
const fieldModels = [
  {
    fieldId: 'userId'
  },
  {
    fieldId: 'userName',
    fieldLabel: '用户名'
  }
]
</script>

字段属性自定义扩展 ​

在字段属性配置中，我们可以通过插槽引入自己的扩展配置。

vue
<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>

这里我们通过widgetconfig插槽自由配置字段的属性，并且接收 type:(字段类型) data:(字段json数据) customProps:(字段自定义扩展的属性，用于绑定配置项) 参数。

API ​

属性 ​

参数说明类型默认值
preview预览操作booleanfalse
generate-json生成json操作booleanfalse
generate-code生成代码操作booleanfalse
clearable清空操作booleanfalse
upload导入json操作booleanfalse
basic-fields左侧基础字段配置，
配置项见 字段说明-基础字段		array-
advance-fields左侧高级字段配置，
配置项见 字段说明-高级字段		array-
layout-fields左侧布局字段配置，
配置项见 字段说明-布局字段		array-
collection-fields左侧容器字段配置，
配置项见 字段说明-容器字段		array-
custom-fields自定字段配置array-
global-config表单初始化全局配置，
配置项参考 Global Config Options		object-
field-config表单字段默认配置项，配置项参考字段可配置项array-
name设计器名称
cache是否将json缓存到浏览器，可以通过配置name属性进行差异化存储booleanfalse
json-templates模板库配置； 
{
  title: '中文模板名称',
  enTitle: '英文模板名称',
  json: '模板json',
  url: '模板预览缩略图'
}
array[]
init-from-template初始化时是否开启从模板库选择booleanfalse
field-models字段标识配置，为设计器字段标识提供下拉绑定。 
{
  fieldId: 绑定字段标识,
  fieldLabel: 显示名称
}
array[]
panel ^3.3.2左侧面板默认展示类型：
field : 组件库面板
outline : 大纲树面板		stringfield
use-antd-form ^3.7.0是否开启Antd样式表单booleanfalse

插槽 ​

name说明
action设计器头部操作按钮自定义区域
widgetConfig ^3.4.0
widgetconfig ^3.5.2
字段属性自定义扩展区域，参见字段属性自定义扩展

方法 ​

方法名说明参数
getJSON获取设计器配置的json数据-
getHtml获取设计器生成的可以直接使用的代码-
setJSON设置设计器配置的json数据（value) 设计器获取的json数据
clear清空设计器操作-
handleUndo撤销-
handleRedo重做-
setSelect设置设计器目前选中的组件(field) 字段标识
getFormModels ^3.5.3获取表单字段结构列表 -
generatePreviewQrcode ^3.5.5生成手机预览二维码 (url) 二维码地址

事件 ​

事件名说明回调参数
ready设计器初始化完成-
preview ^3.5.5表单预览(json) 表单JSON配置

Global Config Options ​

参数说明类型默认值
ui表单使用的UI组件库string (element | antd)element
width表单宽度string100%
customClass自定义样式表类名string-
styleSheets参见初始化表单配置string-
dataSource参见初始化表单配置array-
eventScript表单事件array-
platform设备，可选 pc、pad、mobilestring-

Copyright © 2019-present FormMaking