在前两篇文章中，我们介绍了阿里的表单设计器及其应用。在本文中，我们将回归到我们的流程设计中，将表单模板与流程可视化的编辑功能关联起来，修改表单模板可以修改节点或连接的属性编辑，达到真正的动态属性编辑效果。通用表单渲染我们修改之前表单模板的预览，提供一个formily渲染模板生成功能。新建playground/temp-schemaField.tsx:importReactfrom'react';import{createSchemaField}from'@formily/react';import{Form,FormItem,DatePicker,Checkbox,Cascader,Editable,Input,NumberPicker,Switch,Password,PreviewText,Radio,Reset,Select,Space,Submit,TimePicker,Transfer,TreeSelect,Upload,FormGrid,FormLayout,FormTab,FormCollapse,ArrayTable,ArrayCards,}from'@formily/antd';import{Card,Slider,Rate}来自'antd';const文本：React.FC<{value?:string;内容？：字符串；模式？：'正常'|'h1'|'h2'|'h3'|'p';}>=({value,mode,content,...props})=>{consttagName=mode==='normal'||！模式？'div'：模式；returnReact.createElement(tagName,props,value||content);};constTempSchemaField=(scope?:any)=>{constSchemaField=createSchemaField({组件：{Space,FormGrid,FormLayout,FormTab,FormCollapse,ArrayTable,数组Cards,FormItem,DatePicker,Checkbox,Cascader,Editable,Input,Text,NumberPicker,Switch,Password,PreviewText,Radio,Reset,Select,Submit,TimePicker,Transfer,TreeSelect,Upload,Card,Slider,Rate,},范围,});returnSchemaField;};exportdefaultTempSchemaField;原来的预览playground/Preview.tsx修改为：import{FC,Ref,useEffect,useImperativeHandle,useState}from'react';import{Modal}from'antd';import{request}from'umi';import{Form,Submit}from'@formily/antd';importtempSchemaFieldfrom'@/pages/playground/temp-schemaField';import{LgetItem}from'@/utils/storage';import{createForm}from'@formily/core';interfacePreviewProps{previewRef:Ref<{setVisible:(flag:boolean)=>void}>;modalConfig:{[key:string]:any};}constPreview:FC=({previewRef,modalConfig})=>{const[visible,setVisible]=useState(false);const[params,setParams]=useState<{[key:string]:any}>({});constnormalForm=createForm({});constSchemaField=tempSchemaField({$fetch:请求,});useImperativeHandle(previewRef,()=>({setVisible,}));useEffect(()=>{if(modalConfig&&visible){constplaygroundList=LgetItem('playgroundList')||[];constdata=playgroundList.find((s:{id:string})=>s.id===modalConfig.id,);setParams(data?.params||{});}request('/api/users',{params:{id:1,},}).then((res)=>{console.log(res);});},[modalConfig,visible]);consthandleCancel=()=>{setVisible(false);};return(保存);};exportdefaultPreview;节点编辑修改import{FC,useEffect,useState}from'react';import{Button,Empty,message}from'antd';import{NsJsonSchemaForm,useXFlowApp}from'@antv/xflow';import{Form,Submit}from'@formily/antd';import{createForm}from'@formily/core';import{set}from'lodash';import{request}from'umi';importtempSchemaFieldfrom'@/pages/playground/temp-schemaField';importHeaderfrom'../Header'；从'./index.less'导入样式；从'@/utils/storage'导入{LgetItem}；interfaceNodeComponentProps{updateNode:any;targetData:NsJsonSchemaForm.TargetData;readOnly?:boolean;}constNodeComponent:FC=(props)=>{const[formilySchema,setFormilySchema]=useState<{[key:string]:any}>({},);const{更新节点，目标tData,readOnly=false}=道具;constSchemaField=tempSchemaField({$fetch:请求,});constxflowApp=useXFlowApp();constform=createForm({values:{label:targetData?.label,...targetData?.attrs?.attribute,},readOnly,});constonFinish=async(values:any)=>{constgrap=awaitxflowApp.getGraphInstance();常量数据：任意={...targetData,};对象.keys(values).forEach((key:any)=>{if(key==='label'){set(data,key,values[key]);}else{set(data.attrs.attribute,键,值[键]);}});更新节点（数据）；message.success('暂存成功');//失去焦点grap.resetSelection();};constdelBtn=async()=>{constgrap=awaitxflowApp.getGraphInstance();grap.removeNode(targetData!.id);};useEffect(()=>{//这里使用接口获取节点id关联的表单模板，我简写了if(targetData?.renderKey){constplaygroundList=LgetItem('playgroundList')||[];setFormilySchema(playgroundList[0]?.params??{});}},[目标数据]);const{form:formProps,schema}=formilySchema;返回({schema&&Object.keys(schema)?.length?({readOnly?null:Save}):(<空图像={空.PRESENTED_IMAGE_SIMPLE}description="Noformtemplate"/>)}
