阅读之前
你应该：
- 熟悉模型的增删改查相关内容。【界面设计器】模型增删改查基础
概述
他表字段是一种可以从关联关系字段中取出对应字段，并平铺在当前模型中的特殊字段。本质上是具有固定【计算公式】的字段。
其主要用于解决GQL在获取关联关系字段时层级过深的问题（非存储的他表字段），也可以用于解决字段冗余的数据同步问题（存储的他表字段）。
这里需要注意的一点是，他表字段的数据同步能力是在客户端进行处理的。无法完全保证数据同步的一致性。
场景描述
为了方便接下来的描述，我们需要先构建一个基本的业务场景，这个场景中包含【商品】、【商品订单】以及【商品订单明细】三个模型。
创建/编辑【商品订单明细】时使用【商品】，【商品】下拉选项中使用【商品编码】 - 【商品名称】格式展示。
在【商品订单明细】展开的表格中展示【商品编码】和【商品名称】，而不是使用【商品】。
其模型定义如下：
商品（Item）
| 名称 | API名称 | 业务类型 | 是否多值 | 长度(单值长度) | 关联模型 | 关联字段 | |
|---|---|---|---|---|---|---|---|
| ID | id | 整数 | 否 | – | – | – | – |
| 编码 | code | 文本 | 否 | 128 | – | – | – |
| 名称 | name | 文本 | 否 | 128 | – | – |
商品订单（ItemOrder）
| 名称 | API名称 | 业务类型 | 是否多值 | 长度(单值长度) | 关联模型 | 关联字段 | |
|---|---|---|---|---|---|---|---|
| ID | id | 整数 | 否 | 128 | – | – | |
| 编码 | code | 文本 | 否 | 128 | – | – | – |
| 订单明细 | details | 一对多 | 是 | – | 商品订单明细（ItemOrderDetail） | id – orderId |
商品订单明细（ItemOrderDetail）
| 名称 | API名称 | 业务类型 | 是否多值 | 长度(单值长度) | 关联模型 | 关联字段 |
|---|---|---|---|---|---|---|
| ID | id | 整数 | 否 | 128 | – | – |
| 订单 | order | 多对一 | 否 | – | 商品订单（ItemOrder） | orderId – id |
| 订单ID | orderId | 整数 | 否 | – | – | – |
| 商品 | item | 多对一 | 否 | – | 商品（Item） | itemId – id |
| 商品ID | itemId | 整数 | 否 | – | – | – |
| 数量 | count | 整数 | 否 | – | – | – |
准备工作
根据模型定义，我们要为【商品】和【商品订单】创建基本的增删改查操作，以此来进行我们接下来的步骤。
（下面仅展示了一些特殊页面，其他页面与基础的增删改查页面没有明显差别）
设计商品订单【表单】视图
将订单明细拖放至页面中，并使用【组件切换】功能将当前的【下拉多选】组件切换至【表格】组件。
对订单明细所展开的【内嵌表格】进行设计。将【商品】和【数量】两个字段放入表格中。
设计创建和编辑使用的弹窗视图。（两个按钮都需要设计，这里仅演示创建按钮的设计过程）
小贴士：
- 点击弹窗右上角的
X可关闭弹窗设计页面。 - 左侧【组件库】-【模型】中展示的【当前模型】在选中【订单明细】字段以及它内部的字段或动作时会变为【商品订单明细】关联模型。要想继续设计【商品订单】模型，需要选中任意一个不在【订单明细】字段范围内的组件。在当前视图中可以选中【编码】字段切换至【商品订单】模型。
- 多模型视图的设计总是需要关注【当前模型】这一信息的。
创建他表字段
目前仅能在界面设计器中通过他表字段组件创建他表字段，在低代码中使用Related定义他表字段。
拖入他表字段，创建【商品编码】字段
拖入他表字段，创建【商品名称】字段
隐藏表格中的【商品】字段
PS：由于他表字段本质上是通过引用的方式取得对象中的值，所以此处不能将该字段直接移除，而是需要隐藏。
在创建/编辑弹窗中添加他表字段并隐藏
PS：内嵌表格的创建/编辑功能同样会根据元数据进行裁剪，因此要想保证【商品编码】和【商品名称】被正确回填到表格中，这一步骤是必须的。并且为了避免由于使用不同字段导致无法回填的问题，你需要从【组件库】-【模型】中重复使用字段，而不是从【组件】拖入。这并非是他表字段的特性，而是所有内嵌表格都只能通过这种方式进行数据回填。
Oinone社区 作者：oinone原创文章，如若转载，请注明出处：https://doc.oinone.top/designer/60.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
