在vue3中使用form-create-designer

具体内容可参考官网因为我主要的需求只有两点，第一是自己设计表单，第二是根据表单规则在FcDesigner中回显表单主要用到了两个api。

淡绝

3515人浏览 · 2024-02-23 16:44:11

淡绝 · 2024-02-23 16:44:11 发布

需求背景

最近一直在将原vue2项目升级到vue3项目，原项目中有一个功能是修改表单，原来使用的组件是form-generator，但该组件在vue3项目中不兼容，最后选择了使用form-create-designer组件。刚开始在网上搜了很多案例，都不是很明白，没弄懂 <fc-designer ref="designer"/>和 <form-create/>有什么区别，后面又去仔细看了看官方文档，总算是会用了。

还是解释一下，我对于<fc-designer ref="designer"/>和 <form-create/>的理解：

<fc-designer ref="designer"/>属于表单设计器组件，用于设计和配置表单的外观、字段和校验规则等信息，我们可以通过可视化操作来创建和定制表单

<form-create/>则属于表单渲染器组件，用于根据表单配置信息动态生成具体的表单界面，我们在fc-designer上设计好表单后，后续可能需要在其他页面使用到我们需要的表单，此时就可以直接使用<form-create/>这个组件来展示

form-create-designer使用


<template>
<fc-designer ref="designer" >
    <template #handle>
      <el-button type="success" size="small" @click="saveForm" round plain><el-icon class="mr5"><Check /></el-icon>保存</el-button>
    </template>
</fc-designer>
</template>
  
<script>
import '@/styles/common.scss'
import { ElMessage  } from 'element-plus'
import {getForm,updateForm} from '@/api/flowable'
let rule= [
  {
    "type": "select",
    "field": "datasource",
    "title": "数据源",
    "info": "",
    "effect": {
      "fetch": ""
    },
    "options": [
      {
        "value": "1",
        "label": "选项1"
      },
      {
        "value": "2",
        "label": "选项2"
      }
    ],
    "_fc_drag_tag": "select",
    "hidden": false,
    "display": true,
    "$required": ""
  },
  {
    "type": "input",
    "field": "sqlText",
    "title": "SQL脚本",
    "info": "",
    "props": {
      "type": "textarea",
      "rows": 8
    },
    "_fc_drag_tag": "input",
    "hidden": false,
    "display": true,
    "$required": ""
  },
  {
    "type": "input",
    "field": "sqlDesc",
    "title": "脚本描述",
    "info": "",
    "props": {
      "type": "textarea",
      "rows": 5
    },
    "_fc_drag_tag": "input",
    "hidden": false,
    "display": true,
    "$required": ""
  }
]
let option={
  "form": {
    "labelPosition": "right",
    "size": "default",
    "labelWidth": "125px",
    "hideRequiredAsterisk": false,
    "showMessage": true,
    "inlineMessage": false
  },
  "submitBtn": false,
  "resetBtn": false
}
export default {
    name: 'app',
    data() {
        return {
            formKey: undefined,
            formData: {
                formKey: undefined,
                formName: '',
                formJson: ''
            }
        };
    },
    created(){
        if (this.$route.query && this.$route.query.formKey) {
            this.formKey = this.$route.query.formKey
            this.formData.formKey=this.$route.query.formKey
            }
            this.getFormData()
           
            // 静态数据测试
           /* const FcDesignerRule = JSON.stringify(rule)
            const FcDesignerOptions = JSON.stringify(option)
            this.$nextTick(()=>{
            console.log(this.$refs.designer);
            // 通过规则在FcDesigner中回显表单
            this.$refs.designer.setRule(FcDesignerRule);
            this.$refs.designer.setOption(FcDesignerOptions); 
            })*/
    },
    methods:{
        // 获取接口表单数据
        getFormData() {
            if (!this.formKey) {
                ElMessage.error('formKey is null')
                return
            }
            getForm({ id: this.formKey }).then(({ data }) => {
                this.formData = data
                const json = this.formData?.formJson || null
                 setTimeout(() => this.$refs.designer.setRule(json), 100)
            })
        },
        // 获取FcDesigner中表单的生成规则
        saveForm(){
            //FcDesigner 生成的`JSON`
            const FcDesignerRule = this.$refs.designer.getRule();
            //FcDesigner 生成的`options`
            const FcDesignerOptions = this.$refs.designer.getOption();
            console.log(FcDesignerRule,FcDesignerOptions);
            this.formData.formJson = JSON.stringify(FcDesignerRule)
            updateForm(this.formData).then(({ msg, data }) => {
                ElMessage.success(msg)
            })
        }
  }
};

</script>

简单介绍form-create-designer

具体内容可参考官网https://designer.form-create.com/

因为我主要的需求只有两点，第一是自己设计表单，第二是根据表单规则在FcDesigner中回显表单

主要用到了两个api

getRule 获取设计器表单区域生成表单的生成规则

setRule 根据表单规则在`FcDesigner`中回显表单

如何使用在上面代码中已经有展示，官网上也有举例

form-create使用


<template>
    <div class="container">
     测试 <el-icon><CaretBottom /></el-icon>
     <form-create
      v-model="fapi"
      :rule="rule"
      :option="option"
      @submit="onSubmit"
  ></form-create>
</div>
</template>
<style>
</style>
  
<script>
import '@/styles/common.scss'
import formCreate from "@form-create/element-ui";

const FcDesignerRule = '[{"type":"input","field":"cuk5qqdw3umc","title":"输入框","info":"","_fc_drag_tag":"input","hidden":false,"display":true}]';
const FcDesignerOptions = '{"form":{"labelPosition":"right","size":"small","labelWidth":"125px","hideRequiredAsterisk":false,"showMessage":true,"inlineMessage":false}}';

export default {
  name:'test1-1',
  data(){
    return {
      fapi: null,
      rule: formCreate.parseJson(FcDesignerRule),
      option: formCreate.parseJson(FcDesignerOptions)
    }
  },
  methods:{
    onSubmit (formData) {
      //todo 提交表单
      console.log(formData);
    }
  }
}
</script>

form-create中几个参数说明

详细介绍可参考官网https://form-create.com/

fapi 表单实例对象，需要调用方法都可以通过该实例对象来调用，比如表单重置，可直接定义一个重置方法，然后通过this.fapi.resetFields()来实现

rule 表单生成规则就是你表单的全貌

option 组件参数配置表单是由多个组件组成的，比如输入框，按钮，多选框等，这些组件label的位置，组件字体的大小，以及是否需要显示提交重置按钮等等配置

formdata 表单数据根据规则展示出表单后，表单中填写的数据就是formdata，formdata是一个对象，其中的键是对应rule中的field属性，field的值可以在表单设计器中修改

上面代码中的rule和option都是随便写的一个数据，用来测试的，到时候需要用的时候直接从接口获取数据处理就可以

表单设计器的页面

渲染表单的页面

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^