基于jeecgboot的原先流程管理平台采用的在线表单设计是formgenerator，但功能还是稍微差了一些，所以确定修改成formdesigner。
1、根据官方的一些文档，把formdesigner这个src代码放到组件里，如下：
2、首先修改设计表单的保存
因为原先没有保存，我们需要把设计好的表单保存到数据库，以便后续审批的时候使用
这个主要在designer.vue里修改，增加保存按钮
<el-button icon="el-icon-plus" type="text" @click="save"> 保存 </el-button>
增加保存对话框，同时增加一些变量与api接口
<!--表单配置详情 add by nbacheng 2022-09-05--> <el-dialog :title="formTitle" :visible.sync="formOpen" width="500px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="表单名称" prop="formName"> <el-input v-model="form.formName" placeholder="请输入表单名称" /> </el-form-item> <el-form-item label="备注" prop="remark"> <el-input v-model="form.remark" placeholder="请输入备注" /> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog>
按钮save增加下面代码
save(){// add by nbacheng 2022-09-05 console.log("save inform=",this.inform); if (this.inform.id) { this.form.id = this.inform.id; this.form.formName = this.inform.formName; this.form.remark = this.inform.remark; } /** 表单保存基本信息 */ this.formData = { list: this.list, config: this.formConf } console.log("save this.formData=",this.formData); this.form.formContent = JSON.stringify(this.formData); this.formOpen = true; this.formTitle = "添加表单"; console.log("save form=",this.form); },
保存表单增加下面代码
/** 保存表单信息 */ submitForm(){ this.$refs["form"].validate(valid => { if (valid) { if (this.form.id != null) { updateForm(this.form).then(response => { this.$message.success("修改成功"); }); } else { addForm(this.form).then(response => { this.$message.success("新增成功"); }); } this.list = [] this.idGlobal = 100 this.formOpen = false; // 关闭当前标签页并返回上个页面 this.$router.go(-1) } }); },
当然根据这个formdesigner设计结构，对于修改还需要传入下面参数
inform: { type:Array, default:[] }, queryId: { type:String, default:'' }
3、调用原先表单设计的新增与修改
/** 新增按钮操作 */ handleAdd() { this.$router.push({ path: '/formdesigner/formdesigner', query: {id: null }}) },
增加一个formdesigner.vue
代码如下：
<template> <div> <form-designer ref="formDesigner" :queryId="routeQueryId" v-model="form.fdForm"></form-designer> </div> </template> <script> export default { name: 'designerExapmle', data() { return { form: { fdForm: '' }, routeQueryId: '', } }, created() { this.routeQueryId = this.$route.query && this.$route.query.id; }, mounted() { }, } </script>
4、上面主要是调用formDesigner组件同时传入调用的参数
formDesigner修改下面调用designer 的参数
<designer ref="designer" :queryId="routeQueryId" :list="designList" :formConfig="formConfig" :inform="inform" @clear="designList = []" @updateJSON="handlerUpdateJSON"
:activeData="activeData"/>
同时增加下面接收参数与代码
queryId:{ type:String, default:'' } }, created() {// add by nbacheng 2022-09-05 const that = this; const id = that.queryId; console.log("formDesigner mounted queryId",that.queryId); if (id) { getForm(id).then(res =>{ console.log("getForm res=",res); that.formConfig = JSON.parse(res.result.formContent); that.designList = that.formConfig.list; that.inform = res.result; }) } },
