Подключение PBC Расширенные атрибуты

    "projects": {
        "<project_name>": {
        ...
        "architect": {
                "build": {
                ...
                  "options": {
                  ...
                    "assets": [
                      ...
                        {
                          "glob": "**/*",
                          "input": "node_modules/@diasoft/qdattui-lib",
                          "output": "assets/qdatt"
                        }
                      ],

<q-web-component
  [endpoint]="endpoint"
  bundleUrl="/api/serviceName/componentName/assets/qdatt/main.js"
></q-web-component>

endpoint!: QEndpoint;
 
this.endpoint = {
      service: 'qdattui',
      component: 'qdatt',
      route: 'preconfigured-attribute' или 'attribute-data' или 'attribute-mask',
      caption: '',
      properties: {
        qdattConfig: {
          bundle: { service: serviceName, component: componentName },
          service: 'qdattattribute/qdattattribute', // указывается свой сервис. Параметр для перенаправления запросов к бэкенду
        }
      },
    };

if (tab == "attribute-diagram") {
  title = "Схема атрибутов № ";
  this.rootEvents.openNewTab({
    caption: objectID ? `${title} ${objectID}` : "Схема атрибутов",
    url: `${getTabBaseUrl()}/${tab}/?objectID=${objectID}&code=${code}&localName=${localName}&description=${description}&status=${status}`,
  });
  return;
}

<dependencies>
  <dependency>
    <groupId>ru.diasoft.micro</groupId>
    <artifactId>qdattattribute</artifactId>
    <version>S-Q.UP-00002-25030307</version>
    <classifier>archlib</classifier>
  </dependency>
</dependencies>

<plugin>
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-dependency-plugin</artifactId>
  <executions>
    <execution>
      <id>unpack</id>
      <phase>generate-resources</phase>
      <goals>
        <goal>unpack</goal>
      </goals>
      <configuration>
        <artifactItems>
          <artifactItem>
            <groupId>ru.diasoft.micro</groupId>
            <artifactId>qdattattribute-db</artifactId>
            <version>S-Q.UP-00002-25030307</version>
            <type>jar</type>
            <overWrite>false</overWrite>
            <outputDirectory>
              ${project.build.directory}/classes/qdattattribute
            </outputDirectory>
            <includes>**/**.xml,**/**.sql</includes>
            <excludes>META-INF/, version/</excludes>
          </artifactItem>
        </artifactItems>
      </configuration>
    </execution>
  </executions>
</plugin>

import {
  QdattColumnsPipe,
  QdattFiltersPipe,
  QdattTableColumnsComponent,
  QdattTableFiltersComponent,
} from "@diasoft/q-bpm-qdatt-table";
 
@NgModule({
  imports: [
    //...ваши модули,
    QdattFiltersPipe,
    QdattColumnsPipe,
    QdattTableColumnsComponent,
    QdattTableFiltersComponent,
  ],
})
export class myModule {}

<p-table
  [scrollable]="false"
  [rows]="10"
  [columns]="(columns | qdattColumns: 'TableConfig' | async) ?? []"
  [value]="tableData"
  [lazy]="true"
  (onLazyLoad)="loadLazy($event)"
></p-table>

<p-dialog header="Отображение колонок" [(visible)]="colsToggle">
  <p-listbox
    [options]="cols | qdattColumns | async"
    [(ngModel)]="dv.columns"
    [metaKeySelection]="false"
    [checkbox]="true"
    [filter]="true"
    [multiple]="true"
    optionLabel="header"
  >
  </p-listbox>
</p-dialog>

<ng-template pTemplate="body" let-row let-columns="columns">
  <tr>
    @for (col of columns; track col.id) { @if (!col.isQdattColumn) {
    <!--собственные колонки компонента, если они есть-->
    } @else {
    <td>
      <!--расширенные колонки-->
      <lib-qdatt-table-columns
        [column]="col"
        [value]="row"
      ></lib-qdatt-table-columns>
    </td>
    } }
  </tr>
</ng-template>

<ng-template pTemplate="caption">
  <form [formGroup]="filterFormData">
    <!--собственные фильтры компонента, если они есть-->
    <q-filter-wrapper label="Наименование:">
      <input
        pInputText
        type="text"
        class="p-inputtext-sm"
        formControlName="localNameSearch"
      />
    </q-filter-wrapper>
 
    <!--расширенные фильтры-->
    <lib-qdatt-table-filters
      [selectedFiltersNames]="selectedFilters"
      (valueChanges)="dattFiltersChanged($event)"
    ></lib-qdatt-table-filters>
  </form>
</ng-template>

// в компоненте таблицы добавляем функцию, которая будет обрабатывать событие изменения фильтров из `QdattTableFiltersComponent`
  public dattFiltersChanged(filters: Record<string, any>) {
    // можем записать значение в глобальную переменную, если оно нам еще где-то может понадобиться
    this.qdattFilters = filters;
    this.onLazyLoad();
  }
 
  public onLazyLoad(): void {
    const filter: any = {
      size: 20,
      page: 0,
      sort: 'appNumber,desc'
    };
    // передаем собственные фильтры компонента и фильтры, полученные из расширенных атрибутов в функцию, где будет осуществляться запрос к апи
    this.getList({...filter, ...this.qdattFilters});
  }

@ViewChild(QdattTableFiltersComponent) qdattFiltersComponent!: QdattTableFiltersComponent;
 
public clearFilters(): void {
    // сброс собственных фильтров
    this.filtersForm.reset();
 
    // сброс расширенных фильтров
    this.qdattFiltersComponent.clearAllFilters();
    this.onLazyLoad();
  }

<!--Пример кнопки, которая вызывает окно с настройкой видимости фильтров-->
<button
  (click)="op.toggle($event)"
  pButton
  class="p-button-md p-button-text p-button-raised"
  icon="pi pi-filter"
  iconPos="left"
></button>
 
<p-overlayPanel #op appendTo="body">
  <ng-template pTemplate>
    <p-listbox
      [options]="(filters | qdattFilters | async) ?? []"
      [(ngModel)]="selectedFilters"
      (ngModelChange)="onSelectFilter($event)"
      [filter]="true"
      [multiple]="true"
      [checkbox]="true"
    >
    </p-listbox>
  </ng-template>
</p-overlayPanel>

import { QDynamicFormComponent } from "@diasoft/qpalette-form-addons";
 
@NgModule({
  imports: [
    //...ваши модули,
    QDynamicFormComponent,
  ],
})
export class myModule {}

<q-dynamic-form
  *ngIf="config"
  [config]="config"
  [formData]="formData"
  [showActionButtons]="showActionButtons"
  (getDynamicForm)="onGetDynamicForm($event)"
  (formSubmit)="onFormSubmit($event)"
>
</q-dynamic-form>

export class MyComponent {
  config: any;
  formData: any;
  showActionButtons = true;
  dynamicForm!: FormGroup;
 
  onGetDynamicForm(form: FormGroup) {
    this.dynamicForm = form;
    this.dynamicForm.valueChanges.subscribe(value => {
      console.log('Значения формы:', value);
    });
  }
 
  onFormSubmit(formValue: any) {
    console.log("Данные из dynamic-form:", formValue);
  }
}

import { HttpClient, HttpParams } from '@angular/common/http';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';
 
private loadAttributeConfig(): void {
  const url = this.qpdmiappApplicationFormUrlService0.url('/AttributeSchemes');
  const httpParams = new HttpParams().set('code', 'TableConfig');
 
  this.httpClient.get<any>(url, { params: httpParams })
    .pipe(
      takeUntilDestroyed(this.destroyRef),
      catchError((error) => {
        this.qMessagesService.error({
          severity: 'error',
          summary: 'Ошибка загрузки конфигурации',
          detail: `${error.message}`
        });
        return of(null);
      })
    )
    .subscribe({
      next: (response) => {
        if (!response?.content?.[0]) {
          this.qMessagesService.error({
            severity: 'error',
            summary: 'Схема атрибутов не найдена',
            detail: 'Сервер вернул пустой ответ'
          });
          return;
        }
 
        try {
          this.config = JSON.parse(response.content[0].json);
        } catch (e) {
          this.qMessagesService.error({
            severity: 'error',
            summary: 'Ошибка парсинга конфигурации',
            detail: `${e}`
          });
        }
      }
    });
}