# form-generator

**Repository Path**: gx_cjj/form-generator

## Basic Information

- **Project Name**: form-generator
- **Description**: 表单设计器，功能包括：表单编辑、表单填报及已填报表单显示
在线预览地址：
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: dev@1.0.0
- **Homepage**: http://47.96.66.232:8090/form-generator/index.html#/comsDesiger
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 16
- **Created**: 2025-06-20
- **Last Updated**: 2025-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# form-generator

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

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

![输入图片说明](public/img/show/PixPin_2024-07-17_16-25-59.gif)
# dev@1.0.0 新增
1. 多个布局组件及辅助型组件

![输入图片说明](public/img/show/image.png)

2. 样式配置
* 局部样式：每个组件的配置面板单独提供样式配置
![输入图片说明](public/img/show/%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7.png)
* 全局样式：所有代码均可配置，需要在每个组件的配置面板上选择
![输入图片说明](public/img/show/%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F.png)

3. 事件配置
可以编写js代码，触发每个组件的对应事件时执行代码
* 局部事件：每个组件的配置面板单独提供事件代码编写
![输入图片说明](public/img/show/%E4%BA%8B%E4%BB%B6.png)
* 全局事件：所有代码均可配置，需要在每个组件的配置面板上选择
![输入图片说明](public/img/show/%E5%85%A8%E5%B1%80%E4%BA%8B%E4%BB%B6.png)

4. 接口返回格式
* 附件接口
![输入图片说明](public/img/show/file.png)


# 使用文档

## 安装
```
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)
```

## 包含组件
### 编辑器
![Alt text](/public/img/show/PixPin_2024-07-17_16-33-51.png)
#### pc端预览
![Alt text](/public/img/show/%E7%BC%96%E8%BE%91%E5%99%A83.png)
#### 移动端预览
![Alt text](/public/img/show/%E7%BC%96%E8%BE%91%E5%99%A84.png)
#### 表单数据查看
![Alt text](/public/img/show/%E7%BC%96%E8%BE%91%E5%99%A82.png)
#### 使用
```
<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表单渲染
![Alt text](/public/img/show/pc%E7%AB%AF%E6%B8%B2%E6%9F%93.png)
#### 使用
```
<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表单渲染
![Alt text](/public/img/show/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%B8%B2%E6%9F%93.png)
#### 使用
```
<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表单详情
![Alt text](/public/img/show/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%AF%A6%E6%83%85.png)
#### 使用
```
<template>
  <FGPhoneShow :value="drawingDefalut" />
</template>
<script>
export default {
  data() {
    return {
      drawingDefalut: '',
    };
  },
};
</script>
```
#### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-------|-------|-------|-------|-------|
| value | 为包含表单属性及组件列表的对象 | String | - | - |
| form | 为包含表单组件对应的key和value | Object | - | - |


### PC表单详情
![Alt text](/public/img/show/pc%E7%AB%AF%E8%AF%A6%E6%83%85.png)
#### 使用
```
<template>
  <FGPcShow :value="drawingDefalut" />
</template>

<script>
export default {
  data() {
    return {
      drawingDefalut: '',
    };
  },
};
</script>
```
#### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-------|-------|-------|-------|-------|
| value | 为包含表单属性及组件列表的对象 | String | - | - |
| form | 为包含表单组件对应的key和value | Object | - | - |