# vue3-form-create

**Repository Path**: github-26497262/vue3-form-create

## Basic Information

- **Project Name**: vue3-form-create
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-03
- **Last Updated**: 2022-09-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 表单设计器

## README

# vue3-form-create
基于 Vue3.0 + TS 的自定义表单生成器, UI 库使用 element-plus。

### 什么是表单设计器
- 表单设计器由两部分组成：表单设计器和表单生成器
- 特色功能：自定义扩展功能、组件之间交互方便
- 表单设计器地址：http://localhost:9527/#/
- 表单生成器案例地址：http://localhost:9527/#/example
- __建议在案例中学习用法__
- `yarn server` 启动后端接口（仅作为自动获取远端数据案例）
### 为什么要做表单设计器
  市面上现有的表单设计器不支持扩展功能，并且所有的交互代码都是设计器中编写。例如：Variant Form  
  在实际开发过程中，组件不可能跟得上产品的需求，为了单独的需求去封装组件又会增加开发成本，并且使得组件库臃肿不堪。所以支持用户自定义扩展功能尤为重要。所有的交互代码都是设计器中编写，编写的过程不能使用公共函数，三方库。需求变更的时候，还要去表单设计器复原代码之后才能修改。

### 支持功能

- 远端数据获取
- 图片上传
- 栅格布局
- 生成 JSON
- 生成代码
- 通过插槽完成自定义功能
- 动态隐藏展示form-item
- 动态修改表单状态
### 安装
全局注册组件：(目前npm包还未发布)
``` javascript
import { createApp } from 'vue'
import element from 'element-plus'
import { ElGenerateFormRegistry } from 'vue3-form-create'
import 'element-plus/dist/index.css'
import App from './App.vue'
import { responseBody } from './request'

createApp(App)
  .use(element)
  .use(ElGenerateFormRegistry, responseBody)
  .mount('#app')

```
### 建议项目目录  
>page  
>>index.vue  
>> widgetForm  
>>> formconfig.json  
>>> index.ts  

#### 项目示例
``` vue
<!-- index.vue -->
<template>
  <div>
    <el-generate-form ref="generateFormRef" v-model="formData" :data="widgetForm" >
      </el-generate-form>
    <el-button type="primary" @click="handleSubmit">提交</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import widgetForm from './widgetForm'

const generateFormRef = ref()
const formData = ref()

const handleSubmit = () => {
  generateFormRef.value
    .getData()
    .then((data) => {
      console.log(data, '表单数据')
    })
    .catch((err) => {
      console.log(err)
    })
}

watch(
  () => formData.value,
  (val) => {
    console.log(val)
  },
  { deep: true }
)
</script>
    
```

``` TS
// widgetForm/index.ts
import { merge } from 'lodash'
import formConfig from './formConfig.json'

// 这里修改国际化文件
const translate = {
  list: [
    {
      label: '栅格布局',
      columns: [
        {
          list: [
            {
              label: '单行文本',
            },
            {
              label: '多行文本',
            }
          ]
        },
      ],
    },
  ],
}
const config = merge(formConfig, translate)

export default config
```

``` json
{
  "list": [
    {
      "label": "栅格布局",
      "type": "grid",
      "display": true,
      "columns": [
        {
          "span": 12,
          "list": [
            {
              "label": "单行文本",
              "type": "input",
              "display": true,
              "options": {
                "width": "100%",
                "defaultValue": "",
                "placeholder": "",
                "maxlength": 100,
                "prefix": "",
                "suffix": "",
                "prepend": "",
                "append": "",
                "disabled": false,
                "clearable": false,
                "readonly": false,
                "rules": [
                  {
                    "required": true,
                    "trigger": "blur",
                    "message": ""
                  }
                ]
              },
              "key": "b84fcaffc0324f20aef15ec8904cecd3",
              "model": "input_b84fcaffc0324f20aef15ec8904cecd3"
            },
            {
              "label": "多行文本",
              "type": "textarea",
              "display": true,
              "options": {
                "width": "100%",
                "defaultValue": "",
                "placeholder": "",
                "maxlength": 500,
                "rows": 4,
                "autosize": false,
                "showWordLimit": true,
                "disabled": false,
                "clearable": false,
                "readonly": false,
                "rules": [
                  {
                    "required": true,
                    "trigger": "blur",
                    "message": ""
                  }
                ]
              },
              "key": "b6be27eed7954ebea0d62961811bdd50",
              "model": "textarea_b6be27eed7954ebea0d62961811bdd50"
            }
          ]
        },
        {
          "span": 12,
          "list": [
            {
              "label": "密码框",
              "type": "password",
              "display": true,
              "options": {
                "width": "100%",
                "defaultValue": "",
                "placeholder": "",
                "maxlength": null,
                "prefix": "",
                "suffix": "",
                "prepend": "",
                "append": "",
                "showPassword": true,
                "disabled": false,
                "clearable": false,
                "readonly": false,
                "rules": [
                  {
                    "required": true,
                    "trigger": "blur",
                    "message": ""
                  }
                ]
              },
              "key": "9a3cb3b878ec40009a4c3c8207d12493",
              "model": "password_9a3cb3b878ec40009a4c3c8207d12493"
            },
            {
              "label": "文字",
              "type": "text",
              "display": true,
              "options": {
                "defaultValue": "This is a text"
              },
              "key": "300ac82499164dbc911b439c80e9bae5",
              "model": "text_300ac82499164dbc911b439c80e9bae5"
            }
          ]
        }
      ],
      "options": {
        "gutter": 0,
        "justify": "start",
        "align": "top"
      },
      "key": "0dc0c1170a5b4a478119673233f9ad53",
      "model": "grid_0dc0c1170a5b4a478119673233f9ad53"
    },
    {
      "label": "单选框组",
      "type": "radio",
      "display": true,
      "options": {
        "defaultValue": "",
        "width": "",
        "inline": true,
        "remote": false,
        "showLabel": true,
        "remoteFunc": "/mock/mock.json",
        "remoteArg": {},
        "options": [
          {
            "value": "1",
            "label": "Option 1"
          },
          {
            "value": "2",
            "label": "Option 2"
          },
          {
            "value": "3",
            "label": "Option 3"
          }
        ],
        "remoteOptions": [],
        "props": {
          "value": "value",
          "label": "label"
        },
        "disabled": false,
        "rules": [
          {
            "required": true,
            "trigger": "change",
            "message": ""
          }
        ]
      },
      "key": "ac02174ef0544a8db20310b8232a7fad",
      "model": "radio_ac02174ef0544a8db20310b8232a7fad"
    },
    {
      "label": "多选框组",
      "type": "checkbox",
      "display": true,
      "options": {
        "defaultValue": [],
        "width": "",
        "inline": true,
        "remote": false,
        "showLabel": true,
        "remoteFunc": "/mock/mock.json",
        "remoteArg": {},
        "options": [
          {
            "value": "1",
            "label": "Option 1"
          },
          {
            "value": "2",
            "label": "Option 2"
          },
          {
            "value": "3",
            "label": "Option 3"
          }
        ],
        "remoteOptions": [],
        "props": {
          "value": "value",
          "label": "label"
        },
        "disabled": false,
        "rules": [
          {
            "required": true,
            "trigger": "change",
            "message": ""
          }
        ]
      },
      "key": "6a595f9dfbc7476fad8a0b48a15b3669",
      "model": "checkbox_6a595f9dfbc7476fad8a0b48a15b3669"
    },
    {
      "label": "时间选择器",
      "type": "time",
      "display": true,
      "options": {
        "defaultValue": "",
        "width": "",
        "placeholder": "请选择时间",
        "format": "HH:mm:ss",
        "readonly": false,
        "editable": true,
        "clearable": true,
        "disabled": false,
        "rules": [
          {
            "required": true,
            "trigger": "change",
            "message": ""
          }
        ]
      },
      "key": "aad0314594d74fc59f830afab60b1ad9",
      "model": "time_aad0314594d74fc59f830afab60b1ad9"
    },
    {
      "label": "日期选择器",
      "type": "date",
      "display": true,
      "options": {
        "defaultValue": "",
        "width": "",
        "placeholder": "请选择时间",
        "format": "YYYY-MM-DD",
        "readonly": false,
        "editable": true,
        "clearable": true,
        "disabled": false,
        "rules": [
          {
            "required": true,
            "trigger": "change",
            "message": ""
          }
        ]
      },
      "key": "414f0e5ae93f4c6581f0162714500c9a",
      "model": "date_414f0e5ae93f4c6581f0162714500c9a"
    },
    {
      "label": "评分",
      "type": "rate",
      "display": true,
      "options": {
        "defaultValue": 0,
        "max": 5,
        "allowHalf": false,
        "disabled": false,
        "rules": [
          {
            "required": true,
            "trigger": "change",
            "message": ""
          }
        ]
      },
      "key": "ac0f50b28ce14f7696895e3b7e59b7f8",
      "model": "rate_ac0f50b28ce14f7696895e3b7e59b7f8"
    },
    {
      "label": "下拉选择框",
      "type": "select",
      "display": true,
      "options": {
        "defaultValue": "",
        "width": "",
        "multiple": false,
        "placeholder": "",
        "remote": false,
        "showLabel": true,
        "filterable": false,
        "clearable": false,
        "disabled": false,
        "props": {
          "label": "label",
          "value": "value"
        },
        "options": [
          {
            "label": "Option 1",
            "value": "1"
          },
          {
            "label": "Option 2",
            "value": "2"
          },
          {
            "label": "Option 3",
            "value": "3"
          }
        ],
        "remoteOptions": [],
        "remoteFunc": "/mock/mock.json",
        "remoteArg": {},
        "rules": [
          {
            "required": true,
            "trigger": "change",
            "message": ""
          }
        ]
      },
      "key": "8ff6750a5a074580bcf8aef17e17ac78",
      "model": "select_8ff6750a5a074580bcf8aef17e17ac78"
    },
    {
      "label": "开关",
      "type": "switch",
      "display": true,
      "options": {
        "defaultValue": false,
        "disabled": false,
        "activeText": "",
        "inactiveText": ""
      },
      "key": "077ef4fd729646cd8b2def409296d28e",
      "model": "switch_077ef4fd729646cd8b2def409296d28e"
    },
    {
      "label": "滑块",
      "type": "slider",
      "display": true,
      "options": {
        "defaultValue": 0,
        "width": "",
        "min": 0,
        "max": 100,
        "step": 1,
        "disabled": false,
        "range": false,
        "rules": [
          {
            "required": true,
            "trigger": "change",
            "message": ""
          }
        ]
      },
      "key": "7881835c93074210a87a9abd8c926784",
      "model": "slider_7881835c93074210a87a9abd8c926784"
    },
    {
      "label": "计数器",
      "type": "number",
      "display": true,
      "options": {
        "width": "",
        "defaultValue": 0,
        "min": 0,
        "max": 100,
        "step": 1,
        "disabled": false,
        "rules": [
          {
            "required": true,
            "trigger": "change",
            "message": ""
          }
        ]
      },
      "key": "cb7da047a04d425d90ffbc616f6b11ab",
      "model": "number_cb7da047a04d425d90ffbc616f6b11ab"
    }
  ],
  "config": {
    "size": "default",
    "hideRequiredAsterisk": false,
    "labelWidth": 100,
    "labelPosition": "right",
    "disabled": false
  }
}
```



### 字段说明

基础字段（basicFields）

|   type   |   字段名   |
| :------: | :--------: |
|  input   |  单行文本  |
| password |   密码框   |
| textarea |  多行文本  |
|  number  |   计数器   |
|  radio   |  单选框组  |
| checkbox |  多选框组  |
|   time   | 时间选择器 |
|   date   | 日期选择器 |
|   rate   |    评分    |
|  select  | 下拉选择框 |
|  switch  |    开关    |
|  slider  |    滑块    |
|   text   |    文字    |

高级字段（advanceFields）

|      type       |    字段名    |
| :-------------: | :----------: |
|   img-upload    |     图片     |
| richtext-editor | 富文本编辑器 |
|    cascader     |  级联选择器  |

布局字段（layoutFields）

| type |  字段名  |
| :--: | :------: |
| grid | 栅格布局 |


### API

通过 ref 可以获取到实例并调用实例方法

|  api   | 说明  |
|  ----  | ----  |
| getData  | 表单检验通过后返回formData |
| reset  | 重置表单并重新初始化formData |
| getConfig  | 根据model获取当前配置 |
| setConfig  | 根据model设置当前配置 |
| remove  | 根据model隐藏当前元素 |
| add | 根据model展示当前元素 |
| setOptions | 根据model设置options |