素材和版本
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