首页 > 特效插件 > 表单按钮 >  yx-form-create-next 基于form-create-design改造的 vue3 + form-create 表单设计器正文

yx-form-create-next 基于form-create-design改造的 vue3 + form-create 表单设计器

特效介绍

yx-form-create-next


yx-form-create-next 是基于 form-create-design 改造的 vue3 + form-create 表单设计器,支持查看和设计两种模式,支持传入数据库表列表用来做关联,切换数据库的表时,自动发送事件,请求表下的所有字段列表,这样方便将组件和字段对应起来,提交时,自动将表单数据emit出去,表单json里的对象、数组会自动转换成以 hxz1412350_ 开头的字符串,方便存入数据库,回显时也会自动解析。

使用方法

安装

1// 安装element-plus,若您的项目中已安装,这里可以忽略
2npm install element-plus --save
3// 安装form-create
4npm i @form-create/element-ui@next --save
5// 安装本插件
6npm install yx-form-create-next --save


初始化

01import ELEMENT from 'element-plus';
02import 'element-plus/dist/index.css';
03import formCreate from '@form-create/element-ui';
04// 导入yxFormCreateNext
05import yxFormCreateNext from "yx-form-create-next";
06const app = createApp(App)
07app.use(ELEMENT);
08app.use(formCreate);
09// use yxFormCreateNext
10app.use(yxFormCreate)
11app.mount('#app')


使用

1<yx-form-create-next />


参数

参数名默认值类型解释
type'design'String类型(design、viewer)
height500Number设计器高度
formRenderJson''String表单配置项,包含rule和config两个重要字段,JSON字符串
tableList[]Array数据库表列表,示例:[{value: '1', label: '部门表'}]
tableColumn[]Array字段列表,示例:[{value: '2', label: '姓名'}]
dictTypeList[]Array表列表,示例:[{value: '3', label: '部门表'}],原getDictTypeList返回
isReadonlyfalseBoolean禁用表单


事件

事件名事件参数解释
saveFormJsonjson提交给 setFormRenderJson 接口保存表单配置项的JSON字符串
getTableColtableId提交给 getTableCol 接口查询字段列表的


方法

方法名方法参数解释
setTableColcolumn设置字段下拉列表,[{value: '1', label: '部门表'}] 格式
refreshForm''刷新表单,当获取了表单的json数据等,如果此时组件已经显示,需要调用此方法刷新组件
getFormDatanull获取表单填写的数据
setFormDataObject回填表单的值,要在 formRenderJson 传过去后,表单显示了再调用这个方法


design 模式下使用示例

效果:

yx-form-create-next


代码:

01<template>
02    <div id="app">
03        <yx-form-create-next ref="yx-form-create-next" type="design" :height="850" :tableList="tableList" :formRenderJson="formRenderJson" @getTableCol="getTableCol" />
04    </div>
05</template>
06<script>
07export default {
08    data() {
09        return {
10            formRenderJson: '',
11            tableList: [{
12                'label''漏洞处置工单',
13                'value''asdfasfwfra1sdfasdfwe'
14            },{
15                'label''漏洞_整改',
16                'value''asdfasfwfra2sdfasdfwe'
17            },{
18                'label''漏洞_响应',
19                'value''asdfasfwfrasdf3asdfwe'
20            },{
21                'label''漏洞_漏洞复测',
22                'value''asdfasfwfrasdf4asdfwe'
23            }]
24        }
25    },
26    created() {
27        // 模拟获取数据
28        setTimeout(() => {
29            this.formRenderJson = `{"rule":[{"type":"input","field":"iw21nbcgffyz1","title":"输入框","info":"","_fc_drag_tag":"input","hidden":false,"display":true},{"type":"switch","field":"v091nbcgfhdqw","title":"开关","info":"","_fc_drag_tag":"switch","hidden":false,"display":true},{"type":"upload","field":"iye1nbcgfiudf","title":"上传","info":"","props":{"action":"/api/tool/oss/upload"},"_fc_drag_tag":"upload","hidden":false,"display":true},{"type":"datePicker","field":"zky1nbcgfl7my","title":"日期选择器","info":"","_fc_drag_tag":"datePicker","hidden":false,"display":true},{"type":"colorPicker","field":"09o1nbcgfmhux","title":"颜色选择器","info":"","_fc_drag_tag":"colorPicker","hidden":false,"display":true},{"type":"fc-editor","field":"s4t1nbcgfo8to","title":"富文本框","info":"","_fc_drag_tag":"fc-editor","hidden":false,"display":true}],"config":{"form":{"formInDatabase":"","labelPosition":"right","size":"small","labelWidth":"125px","hideRequiredAsterisk":false,"showMessage":true,"inlineMessage":false}}}`
30            this.$refs['yx-form-create-next'].refreshForm()
31        },1000)
32    },
33    methods: {
34        saveFormJson(json) {
35            console.log(json)
36        },
37        // 获取表字段
38        getTableCol() {
39            this.tableColumn = [{
40                'label''随机数字' + Math.floor(10 * Math.random()),
41                'value': Math.floor(1000 * Math.random()) + ''
42            },{
43                'label''主键 ID',
44                'value''asdfa2sfwfra1sdfasdfwe'
45            },{
46                'label''是否已修复',
47                'value''asdf3asfwfra2sdfasdfwe'
48            },{
49                'label''描述',
50                'value''asdfas4fwfrasdf3asdfwe'
51            },{
52                'label''关联主表ID',
53                'value''as5dfasfwfrasdf4asdfwe'
54            }]
55            this.$refs['yx-form-create-next'].setTableCol(this.tableColumn)
56        }
57    }
58}
59</script>


viewer 模式下使用示例

效果:

2.png


代码:

01<template>
02    <div id="app">
03        <yx-form-create-next ref="yx-form-create-next" type="viewer" :isReadonly="isReadonly" :formRenderJson="formRenderJson" />
04        <button @click="getFormData">获取表单的值</button>
05        <button @click="setFormData">设置表单的值</button>
06    </div>
07</template>
08<script>
09export default {
10    data() {
11        return {
12            formRenderJson: '',
13            isReadonly: false,
14        }
15    },
16    created() {
17        // 模拟获取数据
18        setTimeout(() => {
19            this.formRenderJson = `{"rule":[{"type":"input","field":"iw21nbcgffyz1","title":"输入框","info":"","_fc_drag_tag":"input","hidden":false,"display":true},{"type":"switch","field":"v091nbcgfhdqw","title":"开关","info":"","_fc_drag_tag":"switch","hidden":false,"display":true},{"type":"upload","field":"iye1nbcgfiudf","title":"上传","info":"","props":{"action":"/api/tool/oss/upload"},"_fc_drag_tag":"upload","hidden":false,"display":true},{"type":"datePicker","field":"zky1nbcgfl7my","title":"日期选择器","info":"","_fc_drag_tag":"datePicker","hidden":false,"display":true},{"type":"colorPicker","field":"09o1nbcgfmhux","title":"颜色选择器","info":"","_fc_drag_tag":"colorPicker","hidden":false,"display":true},{"type":"fc-editor","field":"s4t1nbcgfo8to","title":"富文本框","info":"","_fc_drag_tag":"fc-editor","hidden":false,"display":true}],"config":{"form":{"formInDatabase":"","labelPosition":"right","size":"small","labelWidth":"125px","hideRequiredAsterisk":false,"showMessage":true,"inlineMessage":false}}}`
20            this.$refs['yx-form-create-next'].refreshForm()
21        },1000)
22    },
23    methods: {
24        getFormData() {
25            const formData = this.$refs['yx-form-create-next'].getFormData()
26            console.log(formData)
27        },
28        setFormData() {
29            const formData = {
30                "iw21nbcgffyz1""111",
31                "v091nbcgfhdqw"'1',
32                "zky1nbcgfl7my""2023-01-27",
33                "09o1nbcgfmhux""#BA3636",
34                "s4t1nbcgfo8to""&lt;p&gt;撒打发士大夫&lt;/p&gt;&lt;table border=\"0\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;"
35            }
36            this.$refs['yx-form-create-next'].setFormData(formData)
37        },
38    }
39}
40</script>