因為這個項目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、效果圖