素材和版本

tb-release：3.2.2

目标

为了熟悉“关联”这个组件的功能，也看是否能运用到当期系统上：

比如针对“车辆”，那可以用关联关系，从项目那引出“包含”车辆关系，从“工人”那引出使用车辆关系，从“工单”那引出“使用”车辆关系。总之是能使用任何关系将多个实体进行关联。优势在于灵活，劣势在于数据量会级数增长，并且查询关系会稍微复杂一些。

有点类似以前设计的中间关联表的概念，这里的关联属于通用类型的中间关联表。

涉及表“relation”

涉及代码

1）前端

srcappcorehttpentity-relation.service.ts

srcappmoduleshomecomponents elation elation-dialog.component.html

srcappmoduleshomecomponents elation elation-dialog.component.scss

srcappmoduleshomecomponents elation elation-dialog.component.ts

srcappmoduleshomecomponents elation elation-filters.component.html

srcappmoduleshomecomponents elation elation-filters.component.scss

srcappmoduleshomecomponents elation elation-filters.component.ts

srcappmoduleshomecomponents elation elation-table.component.html

srcappmoduleshomecomponents elation elation-table.component.scss

srcappmoduleshomecomponents elation elation-table.component.ts

srcappsharedmodels elation.models.ts

srcappsharedcomponents elation elation-type-autocomplete.component.html

srcappsharedcomponents elation elation-type-autocomplete.component.ts

srcappmoduleshomecomponents elation elation-table.component.html

selector: 'tb-relation-table',

使用方法（srcappmoduleshomepagesassetasset-tabs.component.html）：

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

关联实体类型组件：

tb-relation-type-autocomplete

srcappcorehttpentity.service.ts-》prepareAllowedEntityTypesList

srcappmoduleshomecomponents elation elation-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>