阅读本文前，推荐阅读之前的内容：基于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-...
