基于jeecgboot流程管理平台的在线表单设计修改成formdesigner（一）

       基于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;
       })
     }
   },