(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210441677.3 (22)申请日 2022.04.25 (71)申请人 杭州每刻科技有限公司 地址 310000 浙江省杭州市钱塘新区万晶 湖畔中心西区2幢15 01室 (72)发明人 张鑫波　黄渊　盖建华　魏美钟　 (74)专利代理 机构 杭州裕阳联合专利代理有限 公司 33289 专利代理师 张解翠 (51)Int.Cl. G06F 3/0482(2013.01) G06F 3/0484(2022.01) G06F 9/451(2018.01) (54)发明名称 一种明细组件在全屏状态下的展示方法 (57)摘要 本申请涉及一种明细组件在全屏状态下的 展示方法， 通过从服务器获取明细组件数据在非 全屏状态下配置好每一个明细组件元素的组件 属性， 完成明细数据的初始化， 进而打开全屏组 件以开启全屏状态， 对所有明细组件 元素在处于 全屏状态下的浏览器页面中进行展示， 在用户对 明细组件元素有修改操作时， 对全屏状态下展示 的明细组件 元素进行实时更新， 最终当退出全屏 状态时， 对全屏状态下展示的明细组件 元素和非 全屏状态下展示的明细组件元素进行同步， 有效 建立了各种类型明细组件元素全屏展示的功能 逻辑， 减少了代码量， 极大提升 了开发效率。 权利要求书3页 说明书10页 附图4页 CN 115061612 A 2022.09.16 CN 115061612 A 1.一种明细组件在全屏状态下的展示方法， 其特 征在于， 所述方法包括： 从服务器获取明细组件数据； 所述明细组件数据用于在浏 览器页面渲染多个明细组件 元素； 所述明细组件元素包括明细添加按钮、 明细列头、 明细行、 单元格组件、 全屏图标和明 细内容中的一种； 配置每一个明细组件元 素的组件属性； 打开全屏组件以开启全屏状态， 对所有明细组件元素在处于全屏状态下的浏 览器页面 中进行展示； 对全屏状态下展示的明细组件元 素进行实时更新； 当退出全屏状态时， 对全屏状态下展示的明细组件元素和非全屏状态下展示的明细组 件元素进行同步。 2.根据权利要求1所述的明细组件在全屏状态下的展示方法， 其特征在于， 所述明细组 件数据包括单据模块信息数据和表单 数据； 所述单据模块信息数据包括唯一标识码和组件类型中的一种或多种； 所述表单数据包括明细数据、 明细添加按钮和 组件属性中的一种或多种； 所述组件属 性包括只读属性、 必填属 性、 明细列属性、 明细行属性、 单元格属 性和自定义属性中的一种 或多种。 3.根据权利要求2所述的明细组件在全屏状态下的展示方法， 所述配置每一个明细组 件元素的属性包括： 生成不同组件属性之间的耦合关系公式； 生成不同单元格所需展示的明细数据之间的耦合关系公式， 生成每一个明细行属性和 该明细行下每一个单元格的单元格属性之 间的耦合关系公式， 生成每一个单元格所需展示 的明细数据和单 元格属性之间的耦合关系公式； 依据不同组件属性之间的耦合关系公式、 不同单元格所需展示的明细数据之间的耦合 关系公式、 每一个明细行属性和该明细行下每一个单元格的单元格属性之 间的耦合关系公 式、 以及每一个单元格所需展示的明细数据和单元格属 性之间的耦合关系公式， 生成每一 个单元格所需展示的初始化明细数据； 调取明细基础组件文件包， 将每一个明细组件元素的属性、 每一个单元格所需展示的 初始化明细数据、 不同组件属 性之间的耦合关系公式、 不同单元格所需展示的明细数据之 间的耦合关系公式、 每一个明细行属性和该明细行下每一个单元格的单元格属性之 间的耦 合关系公式、 以及每一个单元格所需展示的明细数据和单元格属性之 间的耦合关系公式传 入所述明细基础组件文件 包中； 将每一个单 元格所需展示的初始化明细数据存 储入明细数据库； 在全屏图标上配置onClick点击事件， 并将onClick点击事件和确认弹框进行耦合关系 的绑定。 4.根据权利要求3所述的明细组件在全屏状态下的展示方法， 其特征在于， 所述打开全 屏组件以开启全屏状态， 对所有明细组件元素在处于全屏状态下的浏览器页面中进行展 示， 包括： 检测对在非全屏状态下浏览器页面中全屏图标的点击操作； 响应于在非全屏状态下浏览器页面中全屏图标的点击操作， 弹出第一确认弹框； 所述权　利　要　求　书 1/3 页 2 CN 115061612 A 2第一确认弹框包括定位在所述第一确认弹框中的第一确认按 钮和第一取消按 钮； 检测对所述第一确认按 钮的点击操作； 响应于对所述第一确认按 钮的点击操作， 打开全屏组件。 5.根据权利要求4所述的明细组件在全屏状态下的展示方法， 其特征在于， 所述打开全 屏组件以开启全屏状态， 对所有明细组件元素在处于全屏状态下的浏览器页面中进行展 示， 还包括： 在打开全屏组件之后， 将明细列属性传入明细基础组件文件包中的表格组件中， 以显 示每一个明细列头； 将每一个单 元格对应的初始化明细数据传入至表格组件中； 依据不同组件属性之间的耦合关系公式、 以及每一个单元格所需展示的明细数据和单 元格属性之间的耦合关系公式， 对所有明细组件元素在全屏状态下的浏览器页面进行渲 染。 6.根据权利要求5所述的明细组件在全屏状态下的展示方法， 其特征在于， 所述对全屏 状态下展示的明细组件元 素进行实时更新， 包括： 基于react ‑hook‑form表单监控修改操作； 当出现修改操作时， 分析修改操作的类型； 当修改操作的类型为 修改明细行时， 获取修改目标 单元格的可读属性； 依据修改目标 单元格的可读属性判断所述 修改目标 单元格是否处于可编辑状态； 若所述修改目标单元格处于可编 辑状态， 则从明细数据库中获取与 所述修改目标单元 格对应的修改前的明细数据； 获取修改操作中修改后的明细数据； 将明细数据库中与所述修改目标单元格对应的修改前的明细数据替换为修改后的明 细数据。 7.根据权利要求6所述的明细组件在全屏状态下的展示方法， 其特征在于， 所述对全屏 状态下展示的明细组件元 素进行实时更新还 包括： 当修改操作的类型为 新增明细行时， 生成一个新的唯一标识码； 依据不同组件属性之间的耦合关系公式、 不同单元格所需展示的明细数据之间的耦合 关系公式、 每一个明细行属性和该明细行下每一个单元格的单元格属性之 间的耦合关系公 式、 以及每一个单元格所需展示的明细数据和单元格属性之间的耦合关系公式生成每一个 单元格的初始化明细数据； 依据每一个单 元格的初始化明细数据和新的唯一标识码渲染新增的明细行； 将每一个单 元格的初始化明细数据存 储至明细数据库。 8.根据权利要求7所述的明细组件在全屏状态下的展示方法， 其特征在于， 所述对全屏 状态下展示的明细组件元 素进行实时更新， 还 包括： 当修改操作的类型为删除明细行时， 获取删除目标明细行的唯一标识码； 从明细数据库中删除与删除目标明细行的唯一标识码对应的所有明细数据。 9.根据权利要求8所述的明细组件在全屏状态下的展示方法， 其特征在于， 在所述当退 出全屏状态时， 在 对全屏状态下展示的明细组件元素和非全屏状态下展示的明细组件元素 进行同步之前， 所述方法还 包括：权　利　要　求　书 2/3 页 3 CN 115061612 A 3