iview-form-designs v1.1.4

正式版

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})

表单设计器

属性

方法

示例

<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
}

表单生成器

属性

方法

示例

<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>

更新日志