因为这个项目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;// 发送请求，获取xmlreadXml(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、效果图