素材和版本

tb-release：3.2.2

目标

梳理出现有tb的前端控件，将新增、编辑页面进行控件调整对应数据格式。

前端控件

必填：required

Gen代码生成器适配

为了适配好angular代码，需要增加适合于angular的前端代码生成逻辑，方便后续快速生成相应的代码。

src\app\modules\home\components\relation\relation-table.component.html

selector: 'tb-relation-table',

使用方法（src\app\modules\home\pages\asset\asset-tabs.component.html）：

一般会被运用于tab组件里面，直接用于关联。

<tb-relation-table [active]="relationsTab.isActive" [entityId]="entity.id"></tb-relation-table>

关联实体类型组件：

tb-relation-type-autocomplete

src\app\core\http\entity.service.ts-》prepareAllowedEntityTypesList

src\app\modules\home\components\relation\relation-dialog.component.html

关联类型：

<tb-relation-type-autocomplete

        formControlName="type"

        required="true">

      </tb-relation-type-autocomplete>

到实体（类型）：

<small>{{(direction === entitySearchDirection.FROM ?

          'relation.to-entity' : 'relation.from-entity') | translate}}</small>

      <tb-entity-list-select

        formControlName="targetEntityIds"

        required="true">

      </tb-entity-list-select>

<tb-entity-type-select

    style="min-width: 100px; padding-right: 8px;"

    *ngIf="displayEntityTypeSelect"

    [showLabel]="true"

    [required]="required"

    [useAliasEntityTypes]="useAliasEntityTypes"

    [allowedEntityTypes]="allowedEntityTypes"

    formControlName="entityType">

  </tb-entity-type-select>

实体列表：

<tb-entity-list

    [ngClass]="{'tb-not-empty': this.modelValue.ids?.length > 0}"

    fxFlex

    *ngIf="modelValue.entityType"

    [required]="required"

    [entityType]="modelValue.entityType"

    formControlName="entityIds">

  </tb-entity-list>

其实它这里是分两种获取方式，一种是获取所有数据，一种是按分页来获取。

1）后端

src/main/java/org/thingsboard/server/dao/entity/BaseEntityService.java

增加关联类型

下一步

Widget的开发运用

简介：

关注Scratch、Microbit、MCU、ESP、少儿编程、编程小车、开源IoT框架等

更多交流请嘉Q群：217567614