# easy-form-design

**Repository Path**: jywud314/easy-form-design

## Basic Information

- **Project Name**: easy-form-design
- **Description**: 基于vue2和elementUI的自定义表单生成器
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2023-03-24
- **Last Updated**: 2023-07-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 自定义表单

## README

# easy-form-design

## 简介

easy-form-design 是一个基于 vue2, element-ui，vuedraggable 的自定义表单设计器。主要功能是能通过简单操作来生成配置表单，生成可保存的 JSON 数据，并能将 JSON 还原成表单，使表单开发更简单更快速。

- [demo 预览](https://jywud314.gitee.io/easy-form-design)
- [开源地址](https://gitee.com/jywud314/easy-form-design.git)

## 组件

- EasyFormDesign 表单设计器（基于可视化操作快速设计出表单页面，生成配置 json 或页面）
- EasyFormBuild 表单构建器（根据设计器中获取的配置 json 数据，快速构建出表单页面）

## 安装

```shell
// use npm
npm install easy-form-design -S

// use yarn
yarn add easy-form-design

// use pnpm
pnpm add easy-form-design
```

## 使用

> <font color= "#FF0000">使用前请确认已安装配置了 element-ui</font>

> 文档还未完善，先凑活看吧。或者看源码的 EasyFormBuild 和 EasyFormDesign 文件夹

#### 全局注册

```js
// main.js
import Vue from 'vue';
import 'easy-form-design/lib/easyFormDesign.css';
import EasyFormDesign from 'easy-form-design';

Vue.use(EasyFormDesign);
```

#### 局部注册

```js
import 'easy-form-design/lib/easyFormDesign.css'; // 这个可在项目入口文件引入
import { EasyFormDesign, EasyFormBuild } from 'easy-form-design';

export default {
  components: {
    EasyFormDesign,
    EasyFormBuild,
  },
};
```

#### 集成源码

` git 上下载源码，把 src/components 拷贝到自己的项目下，index.js 为入口文件可以通过 Vue.use 的方式注册或者局部注册。`

#### 使用方法

```html
<!-- 表单设计器 -->
<template>
  <div>
    <EasyFormDesign ref="formDesign"></EasyFormDesign>
  </div>
</template>
```

```js
export default {
  methods: {
    /* 初始化已有表单，例如已编辑过表单设计器导出json的，可以用这个方法还原 */
    initForm() {
      this.$refs.formDesign.initForm(fromJson); //fromJson导出的json
    },
    /* 导出表单json方法 */
    exportForm() {
      this.$refs.formDesign.exportForm();
    },
    /* 表单预览方法 */
    preViewForm() {
      this.$refs.formDesign.preViewForm();
    },
  },
};
```

```html
<!-- 表单构建器 -->
<template>
  <div>
    <EasyFormBuild ref="formBuild" @validateSuccess="validateSuccess"></EasyFormBuild>
  </div>
</template>
```

```js
export default {
  methods: {
    initForm() {
      // 初始化表单构建器
      this.$refs.formBuild.initForm(data); //data是表单设计器导出的json

      // 给表单构建器的组件设置默认的值
      this.$nextTick(() => {
        this.$refs.formBuild.setFormData(json); //json是个对象｛组件uuid：默认值，组件uuid：默认值｝
      });
    },
    /* 校验成功 */
    validateSuccess(ruleForm, formJsonList) {
      // ruleForm 用户填写的表单值json， formJsonList 原始表单json
    },
    /* 表单重置 */
    resetForm() {
      this.$refs.formBuild.resetForm();
    },
  },
};
```

### EasyFormDesign

#### props

| 参数   | 类型  | 默认值                                                                                                                                                                             | 说明               |
| ------ | ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| fields | Array | 全部组件 - ['BaseInput', 'BaseTextarea', 'BaseRadio', 'BaseCheckbox', 'BaseSelect', 'BaseCascader' ,'BaseColorPicker', 'BaseDatePicker', 'BaseDateRangePicker', 'BaseInputNumber'] | 自定义左侧控件列表 |

#### Methods

| 名称        | 说明       | 入参          | 回调参数  |
| ----------- | ---------- | ------------- | --------- |
| exportForm  | 导出 JSON  | -             | JSON 数组 |
| preViewForm | 表单预览   | -             | -         |
| initForm    | 初始化表单 | Array or 不传 | -         |

#### Attributes

| 名称     | 说明                                                     |
| -------- | -------------------------------------------------------- |
| formBtns | 表单设计器按钮组区域（默认展示按钮 预览表单、导出 JSON） |

### EasyFormBuild

#### Events

| 名称            | 说明             | 回调参数 |
| --------------- | ---------------- | -------- |
| validateSuccess | 表单校验成功回调 | Object   |

#### Methods

| 名称         | 说明       | 入参                        | 回调参数 |
| ------------ | ---------- | --------------------------- | -------- |
| validateForm | 表单校验   | -                           | Object   |
| resetForm    | 表单重置   | -                           | -        |
| initForm     | 初始化表单 | 表单 JSON                   | -        |
| setFormData  | 设置表单值 | JSON （{组件 uuid: value}） | -        |

#### slots

| 名称 | 说明                                                    |
| ---- | ------------------------------------------------------- |
| btns | 表单构造器按钮组（默认展示按钮 表单校验、表单重置按钮） |