form-generator

表单设计器，功能包括：表单编辑、表单填报及已填报表单显示

在线预览地址：http://47.96.66.232:8090/form-generator/index.html#/comsDesiger

[email protected] 新增

1. 多个布局组件及辅助型组件

2. 样式配置

• 局部样式：每个组件的配置面板单独提供样式配置
• 全局样式：所有代码均可配置，需要在每个组件的配置面板上选择

3. 事件配置 可以编写js代码，触发每个组件的对应事件时执行代码

• 局部事件：每个组件的配置面板单独提供事件代码编写
• 全局事件：所有代码均可配置，需要在每个组件的配置面板上选择

4. 接口返回格式

• 附件接口

使用文档

安装

npm install vrv-form-generator 

使用

完整引入

//main.js 中
import 'vrv-form-generator/dist/vrv-form-generator.css'
import vrvFormGenerator from 'vrv-form-generator'
// axios为父级项目中axios实例 这样插件中的接口就可以共用父级项目中的请求头之类的各种被配置，如果不加，就默认使用插件中自带的axios实例
// locale为国际化语言：zh-CN、en、zh-TW、de、fr、ru-RU  默认为zh-CN
Vue.use(vrvFormGenerator, {axios, locale})

// 如果需要使用插件自带的国际化功能，可以导入i18n实例
import { i18n } from 'vrv-form-generator'
// 然后可以在项目中使用 i18n.t('formGenerator.save') 等方式获取翻译文本

国际化配置

插件已内置国际化支持，支持以下语言：

• zh-CN (简体中文)
• en (英文)
• zh-TW (繁体中文)
• de (德语)
• fr (法语)
• ru-RU (俄语)

方法一：使用插件自带的i18n实例（推荐用于复杂项目）

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import vrvFormGenerator, { i18n as formGeneratorI18n } from 'vrv-form-generator'

Vue.use(VueI18n)

// 创建项目的i18n实例
const i18n = new VueI18n({
  locale: 'zh-CN',
  messages: {
    'zh-CN': {
      // 项目自身的中文翻译
      ...formGeneratorI18n.messages['zh-CN'] // 合并插件的中文翻译
    },
    'en': {
      // 项目自身的英文翻译
      ...formGeneratorI18n.messages['en'] // 合并插件的英文翻译
    }
  }
})

Vue.use(vrvFormGenerator, { axios: yourAxiosInstance, locale: 'zh-CN' })

方法二：在目标项目中使用插件的翻译

import { i18n } from 'vrv-form-generator'

// 直接使用插件的i18n实例获取翻译
const saveText = i18n.t('formGenerator.save')
const inputText = i18n.t('formGenerator.componentPlaceholder.pleaseInput')

包含组件

编辑器

pc端预览

移动端预览

表单数据查看

使用

<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

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |-------|-------|-------|-------|-------| | value / v-model | 为包含表单属性及组件列表的对象 | Object | - | - | | form | 为包含表单组件对应的key和value | Object | - | - | | enabled | 编辑器控件是否可以点击操作 | Boolean | - | false | | enabled | 编辑器控件是否可以点击操作 | Boolean | - | false | | options | 编辑器配置（如下） | Object | - | - |

编辑器配置options【FGPcForm/FGPhoneForm/FGPcShow/FGPhoneShow同理】

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

Methods

| 方法名 | 说明 | 参数 | |-------|-------|-------| | validate | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个个参数：校验是否通过、校验提示语 | Function(callback: Function(Boolean,Array)) | | submit | 对整个表单进行提交的方法，参数为一个回调函数。传入一个参数：即为已修改的value值 | Function(callback: Function(object)) |

Event

| 事件名称 | 说明 | 回调参数 | |-------|-------|-------| | save | 点击保存按钮触发 | 新状态的value值，新状态的组件列表，新状态的表单属性 | | change | 数据更改触发 | 新状态的value值 |

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

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |-------|-------|-------|-------| | value / v-model | 为包含表单属性及组件列表的对象 | String | - | - | | form | 为包含表单组件对应的key和value | Object | - | - |

Methods

| 方法名 | 说明 | 参数 | |-------|-------|-------| | validateForm | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入一个参数：即为校验通过的value值 | Function(callback: Function(object)) | | submitForm | 对整个表单进行提交的方法，参数为一个回调函数。传入一个参数：即为已修改的value值 | Function(callback: Function(object)) | | resetForm | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | - |

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

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |-------|-------|-------|-------|-------| | value / v-model | 为包含表单属性及组件列表的对象 | String | - | - | | form | 为包含表单组件对应的key和value | Object | - | - |

Methods

| 方法名 | 说明 | 参数 | |-------|-------|-------| | validateForm | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入一个参数：即为校验通过的value值 | Function(callback: Function(object)) | | submitForm | 对整个表单进行提交的方法，参数为一个回调函数。传入一个参数：即为已修改的value值 | Function(callback: Function(object)) | | resetForm | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | - |

phone表单详情

使用

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

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |-------|-------|-------|-------|-------| | value | 为包含表单属性及组件列表的对象 | String | - | - | | form | 为包含表单组件对应的key和value | Object | - | - |

PC表单详情

使用

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

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

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |-------|-------|-------|-------|-------| | value | 为包含表单属性及组件列表的对象 | String | - | - | | form | 为包含表单组件对应的key和value | Object | - | - |

Q: 在目标项目中使用插件后，所有占位符都没有翻译，显示为 formGenerator.save 之类的文本？

A: 这是由于国际化资源文件没有正确加载导致的。请确保：

1. 目标项目已安装 vue-i18n 依赖
2. 在安装插件时传入正确的 locale 参数：

   Vue.use(vrvFormGenerator, { 
     axios: yourAxiosInstance,
     locale: 'zh-CN' // 或 'en' 等支持的语言
   })

3. 或者使用插件自带的 i18n 实例：

   import { i18n } from 'vrv-form-generator'
   // 在项目中使用 i18n.t('formGenerator.save') 获取翻译文本

Q: 如何在目标项目中添加新的语言支持？

A: 可以通过以下方式添加新语言：

1. 在目标项目中扩展插件的 i18n 实例：

   import { i18n } from 'vrv-form-generator'
      
   // 添加新语言
   i18n.setLocaleMessage('ja', {
     formGenerator: {
       save: '保存',
       // 其他翻译...
     }
   })
      
   // 切换到新语言
   i18n.locale = 'ja'

2. 或者在目标项目的 i18n 实例中合并插件的翻译：

   const i18n = new VueI18n({
     locale: 'ja',
     messages: {
       'ja': {
         // 项目自身的日语翻译
         ...formGeneratorI18n.messages['zh-CN'], // 以中文为基础
         // 覆盖或添加特定翻译
         formGenerator: {
           save: '保存',
           // 其他翻译...
         }
       }
     }
   })