MakingForm 设计器

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

代码演示

基础用法

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

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

自定义操作按钮

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

设计器左侧字段配置

左侧中基础字段、高级字段、布局字段可以根据自己的需要分别进行配置。 可以在 字段说明 中查看字段的配置参数

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

获取设计器配置

<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)导入到新的设计器中。

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

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

初始化表单配置

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

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

表单字段默认配置

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

<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传入到设计器中，在设计的时候即可通过选择进行字段绑定。

<template>
  <fm-making-form
    :field-models="fieldModels"
  ></fm-making-form>
</template>
<script setup>
const fieldModels = [
  {
    fieldId: 'userId'
  },
  {
    fieldId: 'userName',
    fieldLabel: '用户名'
  }
]
</script>

API

属性

插槽

方法

事件

Global Config Options

字段说明

基础字段

高级字段

布局字段