素材和版本
tb-release：3.2.2
目標(biāo)
梳理出現(xiàn)有tb的前端控件，將新增、編輯頁面進(jìn)行控件調(diào)整對應(yīng)數(shù)據(jù)格式。
前端控件
必填：required
Gen代碼生成器適配
為了適配好angular代碼，需要增加適合于angular的前端代碼生成邏輯，方便后續(xù)快速生成相應(yīng)的代碼。
src\app\modules\home\components\relation\relation-table.component.html
selector:?'tb-relation-table',
使用方法（src\app\modules\home\pages\asset\asset-tabs.component.html）：
一般會被運(yùn)用于tab組件里面，直接用于關(guān)聯(lián)。
<tb-relation-table?[active]="relationsTab.isActive"?[entityId]="entity.id"></tb-relation-table>
關(guān)聯(lián)實體類型組件：
tb-relation-type-autocomplete
src\app\core\http\entity.service.ts-》prepareAllowedEntityTypesList
src\app\modules\home\components\relation\relation-dialog.component.html
關(guān)聯(lián)類型：
<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>
其實它這里是分兩種獲取方式，一種是獲取所有數(shù)據(jù)，一種是按分頁來獲取。
1）后端
src/main/java/org/thingsboard/server/dao/entity/BaseEntityService.java
增加關(guān)聯(lián)類型
下一步
Widget的開發(fā)運(yùn)用
簡介：
關(guān)注Scratch、Microbit、MCU、ESP、少兒編程、編程小車、開源IoT框架等
更多交流請嘉Q群：217567614
