正式版

iview-form-designs

简介

本项目是一款基于 Vue-cli3 + iViewUI 的表单设计器，拖拽式操作让你快速构建一个表单。

依赖

view-design 4.0.0+ UI框架

$ npm i view-design

vuedraggable 2.20.0+ 拖拽插件

$ npm i vuedraggable

vue-json-viewer 2.2.0+ JSON数据展示

$ npm i vue-json-viewer

vuex 3.0.0+

$ npm i vuex

安装、配置和使用

1、安装

$ npm i iview-form-designs

2、配置

import store from '../vuex/store'
import FormDesign from 'iview-form-designs'

Vue.use(FormDesign, {store})

表单设计器

属性

| 参数 | 说明 | 类型 | | ----------------- | -------------------------------------- | --------------- | | frame | 绑定表单模板框架【格式按照保存的格式】 | String / Object | | clearable | 关闭表单设计器是否清空表单内容 | Boolean | | dictionaryListUrl | 字典列表链接 | String | | dictionaryDataUrl | 字典数据链接 | String |

方法

| 参数 | 说明 | 类型 | 返回值 | | --------- | ------------------ | -------- | ------ | | saveForm | 保存表单设计器内容 | function | data | | closeForm | 关闭表单设计器 | function | — |

示例

<template>
    <FormDesign
        :frame="formData"
        :dictionaryListUrl="URL"
        :dictionaryDataUrl="URL"
        @saveForm="save"
        @closeForm="close"
        clearable />
</template>

<script>
export default {
    data() {
        return {
            formData: {},
        }
    },

    methods: {
        //获取表单数据
        get() {
            this.axios({
                method: 'get',
                url: 'url'
            }).then(success => {
                this.formData = success.data.data;
            })
        },

        //保存表单数据
        save(data) {
            this.axios({
                method: 'post',
                url: 'url',
                data: data
            }).then(success => {
                console.log('保存成功');
            })
        },

        //删除表单数据
        close() {
            this.$router.go(-1);
        },
    }
}
</script>

响应式布局介绍

xs（<576px）：最小栅格数 24

sm（>=576px）：最小栅格数 24

md（>=768px）：最小栅格数 12，大于 12 按照自己设的栅格展示

lg（>=992px）：最小栅格数 8，大于 8 按照自己设的栅格展示

xl（>=1200px）：完全按照自己设的栅格展示

默认字段设置

1、进入表单设计器设置默认字段，然后点击左上角的 “生成JSON” 并复制 JSON 数据

2、将 JSON 数据内的 list 数组字段 defaultField 改为 true ，并绑定到 frame 属性即可

{
	"list": [
		{
			"id": "rate_srdhqouv7no",
             "key": "rate_srdhqouv7no",
             "title": "星级评分",
             "labelWidth": null,
             "itemWidth": "100%",
             "gridWidth": 24,
             "rules": "{'pattern': '','message': '该项格式不正确'}",
             "icon": "iconstar",
             "type": "rate",
             "category": "base",
             "starCount": 5,
             "allowHalf": false,
             "showText": false,
             "defaultField": false,
             "defaultValue": 0,
             "disabled": false,
             "hide": false,
             "required": false,
             "requiredMsg": "",
             "requiredType": "1",
             "changeList": [
				"id",
                  "key",
                  "title",
                  "labelWidth",
                  "itemWidth",
                  "gridWidth",
                  "starCount",
                  "allowHalf",
                  "showText",
                  "operator",
                  "defaultValue",
                  "required"
			],
             "componentType": "base"
		}
	],
	"config": {
		"labelWidth": 150,
         "labelTextAlign": "right",
         "itemSize": "default"
	},
	"current": 0
}

表单生成器

属性

| 参数 | 说明 | 类型 | 默认值 | | ----- | -------------------------------------- | --------------- | ------ | | ref | 被用来给DOM元素或子组件注册引用信息 | String | — | | frame | 绑定表单模板框架【格式按照保存的格式】 | String / Object | — | | data | 绑定表单数据内容 | String / Object | — |

方法

| 参数 | 说明 | 类型 | 返回值 | | ------ | ------------------------------------------------------------ | -------- | ------------ | | submit | 对整个表单内容进行校验，校验成功返回内容，校验失败返回undefined | function | status, data | | reset | 对整个表单内容进行重置 | function | — |

示例

<template>
    <ViewForm
        ref="viewRef"
        :frame="formData"
        :data="data" />
</template>

<script>
export default {
    data() {
        return {
            formData: {},
            data: {}
        }
    },

    methods: {
        //提交表单内容
        submit() {
            this.$refs.viewRef.submit((status, data) => {
                if(status) {
                    //校验成功，弹出表单内容
                    alert(data);
                } else {
                    //校验失败
                }
            })
        }

        //重置表单内容
        reset() {
            this.$refs.viewRef.reset();
        },
    }
}
</script>

更新日志

| 版本 | 说明 | | ------ | ------------------------------------------------------------ | | v1.1.4 | 1、新增修饰字段，文本组件；2、新增字段属性，标题宽度，标题宽度设置后不跟随全局标题宽度（字段属性的层级高于表单属性）；3、修复表单内容出现的校验问题；4、优化星级评分组件，已选评分支持再次点击取消选择；5、所有选择组件现在默认返回key和value组成的字符串对象；6、表单设计器做了自适应展示；7、新增字段属性，默认字段，当默认字段为 true 时字段删除功能隐藏，清空表单设计器默认字段不会清空； | | v1.1.2 | 1、表单设计器兼容iView4.5.0+版本（iView版本更新到了4.5.0后，对原有的栅格布局组件样式进行了修改【强制使用flex布局】，通过样式权重修改用回旧版本的样式代码） | | v1.1.0 | 1、表单设计器和生成器 data 属性改名 frame，绑定表单框架数据；2、修复因为修饰字段没有给栅格布局，导致基础字段被覆盖导致无法填写的问题；3、修复表单设计器关闭按钮只生效一次的问题；4、修复表单设计器的框架JSON数据改变时，渲染界面没发生改变的问题；5、表单生成器新增 data 属性，绑定表单内容数据；6、修复表单生成器多次引用，导致框架数据相互干扰的问题 | | v1.0.5 | 1、新增表单生成器，可通过表单生成器将表单设计器设计好的内容生成出来；2、基础字段新增栅格布局 | | v1.0.2 | 1、修复动态获取字典接口请求报错的问题；2、修复表单数据获取解析报错的问题 | | v1.0.1 | 1、新增基础字段，数字文本组件；2、修复自定义方法，保存表单获取不到表单内容的问题3、修复自定义方法，关闭表单内容未重置的问题；4、修复拖入字段组件和展示的字段组件不一样，增删改查报错的问题 |