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

       基于jeecgboot的原先流程管理平台采用的在线表单设计是formgenerator，但功能还是稍微差了一些，所以确定修改成formdesigner。

      1、根据官方的一些文档，把formdesigner这个src代码放到组件里，如下：

 2、首先修改设计表单的保存

     因为原先没有保存，我们需要把设计好的表单保存到数据库，以便后续审批的时候使用

这个主要在designer.vue里修改，增加保存按钮

        保存
 

增加保存对话框，同时增加一些变量与api接口

 
   
     
       
         
       
       
         
       
     
     

   

按钮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

代码如下：

4、上面主要是调用formDesigner组件同时传入调用的参数

formDesigner修改下面调用designer 的参数

同时增加下面接收参数与代码

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