使用avue-form-design生成表单

前言

之前玩一些开源项目的时候有简单接触过可视化表单生成工具，也就是avue-form-design，当时重点都放在服务端了，前端的avue-form-design和avue并没有具体细看，这段时间刚好在搞码帮帮后台系统，于是就用了这个avue和avue-form-design，用的过程中还是有点小失望的，因为之前初略看这个功能的时候，还觉得有点小牛逼，在预期中感觉生成后的表单基本上不用怎么修改，自己搭建了一个后生成的表单发现有些功能无法做到，然后我就怀疑是不是我用的版本不是最新的，打开官网的表单生成界面时，发现原来就是这样，​​AVUE表单设计器​​​，害，细看之后感觉无论是从使用还是文档上感觉都不是很友好！基本能用吧，生成出来的东西还是需要修改一下的，而且看了官方文档，说实在话，这个官方文档还要出一份怎么看官方文档的文档才行！​​AVUE官方文档​​，这里就不在吐槽这玩意了吧，毕竟基本上还是能满足日常开发的，确实也提高了不少效率，但是上手成本还是有点点的，花个一两天时间跑跑基本上就行了。

avue-form-design表单生成器

废话
这个跑起来其实还比较简单的，随便找个文章CV一下即可，这里我也不逼逼这玩意，官网推一下，按照官网能弄个基本的用用！
​​​gitee地址​​

增强
这里增强主要就是可以保存我们使用avue-form-design拖拽生成的表单json，和读取保存起来的表单并渲染，官方给出在gitee上的文档我只能说是真的不全，github上的我没看，不知道是不是一样的，我感觉这玩意是咱中国人开发的吧，既然这么糊弄，说好的中国人不骗中国人呢！关于增强其实就是两个东西，一个是:options，这个就是做读取保存好的json初始化渲染的， 另一个就是@submit， @submit就是我们通过拖拽好的界面会对应一个json数据，提交就会将这个数据保存到数据库，这两个是配合使用的！

保存/读取

<template>
  <div class="webapp">
    <basic-container>
      <avue-form-design :options="options"
                        @submit="handleSubmit">
      </avue-form-design>
    </basic-container>
  </div>
</template>

<script>
    import {getForm, postForm} from '@/server/gen'
    import {validatenull} from "../../utils/validate";

    export default {
        data() {
            return {
                box: true,
                options: {
                    column: []
                }
            }
        },
        created() {
            this.getFormInfo()
        },
        methods: {
            handleSubmit(json) {
                let params = this.$route.query;
                if (validatenull(params)) {
                    return false
                }
                let result = JSON.stringify(json)
                postForm(result, params.tableName, params.dsName).then(response => {
                    this.$message.success('生成并保存成功')
                })
            },
            getFormInfo() {
                let params = this.$route.query;
                if (validatenull(params)) {
                    return false
                }
                getForm(params.tableName, params.dsName).then(data => {
                    if (!validatenull(data)) {
                        this.options = JSON.parse(data)
                    }
                })
            }
        }
    }
</script>
<style lang="scss">
  .webapp {
    background-color: #fff;
    position: relative;
    width: 100%;
    height: 100%;

    .form-designer {
      height: 800px;
    }

    .form-designer .widget-config-container .el-tabs__header {
      position: relative;
    }
  }
</style>

嗯~ 差不多就是这个意思！随便画画如下！

那么这里生成的json就是对应avue中的crud文件了！

关于avue的crud参数补全

export const tableOption = {

    column: [
        {
            type: 'input',
            label: '字典主键',
            prop: 'id',
            addDisplay: false,  //添加时是否存在
            addDisabled:true,    //添加是否时禁用
            editDisplay:true,  //编辑时是否存在
            editDisabled: true, //编辑时是否禁用
            hide:true,          //列隐藏 ，可通过列隐藏控制显示/隐藏
            //showColumn:false, //彻底不显示
        },
        {
            type: 'input',
            label: '字典名称',
            prop: 'dictName',
            addDisplay: true,
            search:true,
            rules: [{
                required: true,
                message: "字典名称必填",
                trigger: "blur"
            }],
            //searchValue:'应用类型',       //设置局部搜索默认内容
            //searchSpan:6,               //设置局部搜索时字段宽度
            //searchLabelWidth:85,        //设置局部搜索时字段宽度
            //searchLabelPosition: 'left',//设置局部搜索时字段对齐方式
            searchTip:'根据字典名称',       //搜索框提示语
            searchTipPlacement:'left',    //搜索框提示语显示位置
        },
        {
            type: 'input',
            label: '字典类型',
            prop: 'dictType',
            search:true,
            rules: [{
                required: true,
                message: "字典名称必填",
                trigger: "blur"
            }],
            //searchLabelWidth:85,//设置局部搜索时字段宽度
        },
        {
            type: 'radio',
            label: '状态',
            dicData: [
                {
                    label: '开启',
                    value: 1
                },
                {
                    label: '停用',
                    value: -1
                }
            ],
            span: 12,
            //display: true,  //编辑、添加都存在
            props: {
                label: 'label',
                value: 'value'
            },
            prop: 'status',
            addDisplay: false,  //添加时是否存在
            editDisplay:true,  //编辑时是否存在
            rules: [{
                required: true,
                message: "状态必选",
                trigger: "blur"
            }],
            search:true,
        },
        {
            type: 'input',
            label: '备注',
            prop: 'remark',
            search:true,
        },
        {
            type: 'input',
            label: '创建者',
            prop: 'createBy',
            addDisplay: false,  //添加时是否存在
            editDisplay:false,  //编辑时是否存在
        },
        {
            type: 'input',
            label: '创建时间',
            prop: 'createTime',
            addDisplay: false,  //添加时是否存在
            editDisplay:false,  //编辑时是否存在
        },
        {
            type: 'input',
            label: '更新者',
            prop: 'updateBy',
            addDisplay: false,  //添加时是否存在
            editDisplay:false,  //编辑时是否存在
        },
        {
            type: 'input',
            label: '更新时间',
            prop: 'updateTime',
            addDisplay: false,  //添加时是否存在
            editDisplay:false,  //编辑时是否存在
        }
    ],
    //弹窗相关
    dialogDrag:true,        //表单打开可拖拽
    //dialogType:'drawer',  //表单打开方式  drawer侧入
    //dialogWidth:200,      //打开表单宽度
    dialogDirection:'rtl',  //弹窗的位置  从左往右开、从右往左开、从上往下开、从下往上开  ltr、rtl、ttb、btt

    //列表相关
    align: 'center',        //控制列表数据对齐方式
    stripe: true,           //控制列表是否有条纹，可以理解为斑马纹显示列表数据
    indexLabel: '序号',      //控制索引名字
    index: true,            //控制列表是否开启索引，可以理解为排序
    border: true,           //控制列表数据是否带边框
    selection: false,       //控制列表是否显示多选框
    //height:500,           //控制列表总高度

    //列表操作相关
    menuAlign: 'center',    //列表操作按钮对齐方式
    menuWidth:270,          //控制列表操作宽  默认 270
    viewBtn:true,           //是否开启详情操作按钮
    //editBtn: false,       //是否开启编辑操作按钮
    //delBtn: false,        //是否开启删除操作按钮
    //addBtn: false,        //是否开启添加操作按钮

    //表单相关
    gutter: 1,              //表单字段间隔
    labelPosition: 'right',  //表单字段对齐     'left'/'center'/'right' 默认 left
    labelSuffix: '：',      //表单后缀： 如 标签 ：
    labelWidth: 120,        //表单宽度 默认120
    menuPosition: 'center', //表单按钮位置 'left'/'center'/'right' 默认'center'
    menuBtn: true,          //表单按钮  默认false
    submitBtn: true,        //表单是否开启提交 默认false
    submitText: '提交',      //表单提交文本
    emptyBtn: true,          //是否开启清空 默认false
    emptyText: '清空',       //清空按钮显示文本
    //readonly: true,        //全局只读
    //disabled: true,        //全局禁用


    //搜索相关
    //searchIndex:1,           //默认显示多少个搜索项
    //searchIcon:false,        //搜索图标是否开启
    //searchMenuSpan: 6,       //搜索菜单栏宽度
    //searchShow:true,        //搜索菜单栏默认不展示
    //searchShowBtn:false,
    card:false,               //搜索菜单栏是否开启卡片模式


}

常用的基本就这样了，有些效果对照官网看看弄弄就行了！​​官网还是香​​