因为这个项目license问题无法开源，更多技术支持与服务请加入我的知识星球。

接上一节

4、编辑好后进行保存，保存代码如下：

/*保存流程定义*/
  const save = (data: any) => {
    //console.log("save data", data); // { process: {...}, xml: '...', svg: '...' }
    let params = {
      name: data.process.name,
      category: modelForm.processType.id,
      xml: data.xml
    }
    if (modelForm.processType == null) {
      createMessage.success('请选择流程分类！');
      return '';
    }
    saveXml(params).then(res => {
      // 关闭当前标签页并返回上个页面
      getList()
      designerOpen.value = false
    })
  }

5、保存后效果图

6、里面可以进行流程与表单的预览

查看流程图

/** 查看流程图 */
  const handleProcessView = (deploymentId: string) => {
    processView.title = "流程图";
    processView.index = deploymentId;
    // 发送请求，获取xml
    readXml(deploymentId).then(res => {
      if (res.success) {
        processView.xmlData = res.result;
      } else {
        createMessage.error("获取流程图失败！")
      }
    })
    processView.open = true;
  }

预览表单

// 打开业务表单
  const handleForm = (formId: string) => {
    getForm(formId).then(res => {
      formTitle.value = "表单详情";
      console.log("handleForm res",res);
      formConfOpen.value = true;
      nextTick(async () => {
        vfRenderRef.value.setFormJson(res.result.formContent || {formConfig: {}, widgetList: []});
      });
    })
  }

7、效果图