阅读本文前,推荐阅读之前的内容:基于Formily的FormDesigner实现原理解析及FormSchema定义详解。表单是前端常见的交互形式,广泛应用于业务数据采集场景。例如,新增员工时填写的员工信息表、申请固定资产时填写的申请表等。借助表单引擎,开发人员可以快速完成上述表单的设计和发布,提高企业管理效率。JSONSchemaJSONSchema是表单设计器和表单呈现组件之间的通信语言。它是一种JSON文件协议,用于标准化JSON文件的内容。它是平台无关的,可以描述任意复杂的数据结构。JSONSchema在JSON格式中加入了一系列标准化的属性来描述结构化数据。全享云平台表单设计器的输出是一个描述表单字段的JSONSchema。表单设计完成后,JSONSchema会直接存储在后台。表单发布后,前端根据JSONSchema渲染表单。Schema的简化定义下面是Schema的简化定义。具体定义请阅读FormSchema的详细定义。interfaceSchema{fields:Record;}interfaceFieldSchema{title:string;类型:“字符串”|'对象'|'数组'|'数字'|'布尔值';组件:字符串;componentProps:{[name:string]:any;};}在上面的类型定义中:FieldKey是表单中字段的唯一标识,不能从用户端泄露。title表示表单中字段对应的标签,其值是用户可读的。type指示组件接受并期望返回的数据类型。component指示用于呈现此字段的输入组件。componentProps表示传递给组件的props,用来控制组件的行为。表单数据展示全享云平台表单设计器目前提供基础字段、高级字段、布局字段等21个组件。开发人员可以使用这些组件快速构建表单。基本字段:单行文本、多行文本、单选框、复选框、数字、时间日期、下拉单选框、下拉复选框。高级字段:子表单、关联记录、人员选择器、部门选择器、附件、图片、级联选择、统计、序列号和关联数据。布局字段:网格、组、选项卡。通过FormDataValueRenderer()方法,将存储在服务器中的JSONSchema和值呈现出表单。FormDataValueRenderer实现了需要不同显示形式的不同类型的字段。比如显示基本字段时,只需要显示value值即可;显示子表单时,需要将数据显示为表格;显示附件时,附件需要以文件的形式显示;显示图片时,需要将图片显示为缩略图。复杂结构表单数据的展示采用策略模式,根据字段模式的组件属性,采用不同的策略处理展示到网页。下面是FormDataValueRenderer对不同字段组件的处理。导出默认函数FormDataValueRenderer({value,schema,className}:Props):JSX.Element{switch(schema['x-component']?.toLowerCase()){case'subtable':return();case'associatedrecords':return();case'associateddata':return();//其他组件默认:{constcontent=getBasicValue(schema,value);return({content});}}}其他字段值的转换除了特殊字段,对于其他字段,只需要将值以字符串的形式显示即可,下面是关于字段值的转换:getBasicValue()exportfunctiongetBasicValue(架构:ISchema,值:FormDataValue:字符串{开关(架构['x-component']?.toLowerCase()){案例'输入':案例'textarea':案例'radiogroup':案例'select':案例'丝丽al':以字符串形式返回值;case'numberpicker':returnnumberPickerValueRender({schema,value});case'checkboxgroup':case'multipleselect':returnstringListValue({schema,value});case'datepicker':returndatetimeValueRenderer({schema,value});case'associateddata':case'cascadeselector':case'userpicker':case'organizationpicker':returnlabelValueRenderer(value);case'aggregationrecords':returnstatisticValueRender({schema,value});默认值:logger.warn('遇到不支持的formDataValue:',value,'schema:',schema);返回值?.toString();}}1、单行文本、多行文本、单选按钮、下拉框、序号返回值2、number字段值需要处理成开发者设置的准确位数。functionnumberPickerValueRender({schema,value}:ValueRendererProps):string{returnNumber(value).toFixed(schema?.['x-component-props']?.precision||0);}3.关联记录,级联Select、人员选择器、部门选择器的值转换为字符串格式。exportfunctionlabelValueRenderer(value:FormDataValue):string{if(Array.isArray(value)){constlabels=(valueasFormBuilder.Option[]).map(({label})=>label).join(',');退货标签;}return(valueasFormBuilder.Option)?.label;}4.统计时,需要根据统计规则计算出value,然后返回结果。functionstatisticValueRender({schema,value}:ValueRendererProps):string{const{decimalPlaces,roundDecimal,displayFieldNull}=schema['x-component-props']作为{decimalPlaces:number,roundDecimal:RoundMethod,displayFieldmethodNull:stringthod;let=Math.round;if(roundDecimal==='round-up'){method=Math.ceil;}elseif(roundDecimal==='round-down'){method=Math.floor;}返回方法(parseFloat(值为字符串))。toFixed(decimalPlaces)+''||displayFieldNull;}总结这篇文章从Schema的定义到不同字段的展示,最终实现了复杂结构表单数据的展示功能。但是还有很多场景需要根据不同的业务需求进行分析,需要在实际业务中进一步细化。公众号:全享云低代码GitHub:https://github.com/quanxiang-...