前言
之前玩一些开源项目的时候有简单接触过可视化表单生成工具，也就是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, //搜索菜单栏是否开启卡片模式
}常用的基本就这样了，有些效果对照官网看看弄弄就行了！官网还是香