【Vue2】可视化表单编辑器插件 @huliuyu/form-generator

介绍

这是一款基于 Vue2 + ElementUI+ Vant UI开发的可视化表单编辑器插件，功能包括：表单的设计、填报及已填报表单的显示，适用于各种动态表单项目；生成表单预览样式支持PC端（ ElementUI）及移动端（ Vant UI）两种形式。
在线预览地址：http://47.96.66.232:8090/form-generator/index.html#/comsDesiger
码云地址：https://gitee.com/deer_bambi_hly/form-generator
npm地址：https://www.npmjs.com/package/@huliuyu/form-generator

• 该插件包含五个组件，分为两个阶段：
  • 设计阶段
    表单设计：可以通过拖拽的方式，将单个的组件组合成一个完整的表单，生成JSON数据
    FGDesigner
  • 用户阶段
    表单填报：传入从表单设计组件得到的JSON表单数据，可以实现表单的显示及填报
    FGPcForm
    FGPhoneForm
  • 详情显示：完成表单填报后的表单详情数据的显示
    FGPcShow
    FGPhoneShow

表单设计器预览

PC端预览

移动端预览

安装

npm install @huliuyu/form-generator 

使用

完整引入

main.js 中
import FG from '@huliuyu/form-generator'
或者 import FG from '@huliuyu/form-generator/form-generator.umd.js'
import '@huliuyu/form-generator/form-generator.css'
Vue.use(FG)

包含组件

编辑器

 <FGDesigner />

表单编辑器分为组件库、表单画板、属性面板三个区域：

1. 组件库

组件库面板提供两种方式添加组件：点击（组件置于最下方）和拖拽（可手动拖拽到任意位置），将一个组件添加到画板中后，它会被自动选中，配置面板会显示该组件的所有属性，并且可以任意更改这些属性，例如组件类型、字段名称、标题、校验规则等。

2. 表单画板

表单画板是表单编辑器的主要工作区域，提供了一种直观的方式来构建和设计表单，在表单画板中，可以使用拖放和单击等交互式操作，完成复制、删除和移动表单组件

3. 属性面板（组件属性+表单属性）

表单属性：用于配置表单属性的区域。
组件属性：用于配置组件属性的区域。当添加或选择表单中的一个组件时，该组件的属性将在属性面板中显示，可以任意修改该组件的属性配置。

• 基础属性配置
  
• 正则验证配置
  
• css 及样式配置
  
  
• event 事件配置
  

使用

<template>
  <div style="height: 100%">
    <el-button type="primary" @click="handlePublish">发布</el-button>
    <el-button type="primary" @click="handleValidate">校验</el-button>
    <FGDesigner ref="FGDesigner"  v-model="formConf" />
  </div>
</template>
export default {
  data() {
    return {
      formConf: {},
    };
  },
  methods: {
    handleValidate() {
      this.$refs.FGDesigner.validate((valid, message) => {
        if (valid) {
        } else {
          this.$message.error(message);
        }
      });
    },
    handlePublish() {
      this.$refs.FGDesigner.submit((value) => {
        console.log(value);
      });
    },
  },
};

Attributes

编辑器配置options

【FGPcForm/FGPhoneForm/FGPcShow/FGPhoneShow同理】

<FGDesigner :options='options' />
options: {
  themeColor:'', // 编辑器主题色
  header: {   // 接口请求头内容，如果存在则将其放置到表单编辑器的接口请求头上
   // 如果编辑器配置的接口需要带上token，可以从此处传入，参数名自定义
   // "token": '',
  },
  hideTemps: false,// 是否隐藏模板
  hideOutline: false,// 是否隐藏大纲
  hidePhone: false // 是否隐藏手机端
}

Methods

Event

PC表单渲染

使用

<template>
  <FGPcForm ref="FGPcForm" v-model="drawingDefalut" :form='form' @submit='handleSubmit'/>
  <el-button @click='submitForm'>提交</el-button>
</template>

<script>
export default {
  data() {
    return {
      drawingDefalut: '',
      form:{}
    };
  },

  methods: {
    submitForm() {
      this.$refs["FGPcForm"].validateForm((form) => {
        console.log("form", form);
      });
    },
    resetForm() {
      this.$refs["FGPcForm"].resetForm();
    },
    handleSubmit(form,list) {

    }
  },
};
</script>

Attributes

Methods

phone表单渲染

使用

<template>
  <FGPhoneForm ref="FGPhoneForm" v-model="drawingDefalut" />
</template>

<script>
export default {
  data() {
    return {
      drawingDefalut: '',
    };
  },

  methods: {
    submitForm() {
      this.$refs["FGPhoneForm"].validateForm((form) => {
        console.log("form", form);
      });
    },
    resetForm() {
      this.$refs["FGPhoneForm"].resetForm();
    },
  },
};
</script> 

Attributes

Methods

PC表单详情

使用

<template>
  <FGPcShow :value="drawingDefalut" />
</template>

<script>
export default {
  data() {
    return {
      drawingDefalut: '',
    };
  },
};
</script>

Attributes

phone表单详情

使用

<template>
  <FGPhoneShow :value="drawingDefalut" />
</template>
<script>
export default {
  data() {
    return {
      drawingDefalut: '',
    };
  },
};
</script>

Attributes