@yibozhang/pro-table 16.1.21 → 16.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,29 +4,23 @@ import * as i1 from "@angular/common";
4
4
  import * as i2 from "ng-zorro-antd/space";
5
5
  export class TableSearchBarComponent {
6
6
  constructor() {
7
- this.leftColSpan = 21;
8
- this.rightColSpan = 3;
9
7
  this.labelWidth = "90px";
10
8
  this.labelAlign = "right";
11
- this.formItemWidth = "270px";
9
+ this.searchColCount = null;
12
10
  }
13
11
  ngOnInit() { }
14
12
  ngAfterViewInit() { }
15
13
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableSearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
16
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableSearchBarComponent, selector: "app-table-search-bar", inputs: { leftColSpan: "leftColSpan", rightColSpan: "rightColSpan", labelWidth: "labelWidth", labelAlign: "labelAlign", formItemWidth: "formItemWidth" }, queries: [{ propertyName: "leftContentTpl", first: true, predicate: ["leftContent"], descendants: true }, { propertyName: "actionTextBtnTpl", first: true, predicate: ["actionTextBtn"], descendants: true }, { propertyName: "actionImgBtnTpl", first: true, predicate: ["actionImgBtn"], descendants: true }], ngImport: i0, template: "<div class=\"table-search-bar\">\r\n <div\r\n class=\"table-search-bar-left\"\r\n style=\"--label-width: {{ labelWidth }}; --label-align: {{ labelAlign }}; --form-item-width: {{ formItemWidth }};\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"leftContentTpl\"></ng-container>\r\n </div>\r\n <div class=\"table-search-bar-right\">\r\n <nz-space nzDirection=\"vertical\" nzAlign=\"end\">\r\n <ng-template nzSpaceItem>\r\n <ng-container *ngTemplateOutlet=\"actionTextBtnTpl\"></ng-container>\r\n </ng-template>\r\n <ng-template nzSpaceItem *ngIf=\"actionImgBtnTpl\">\r\n <ng-container *ngTemplateOutlet=\"actionImgBtnTpl\"></ng-container>\r\n </ng-template>\r\n </nz-space>\r\n <!-- <ng-container *ngTemplateOutlet=\"rightContentTpl\"></ng-container> -->\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .table-search-bar{display:flex;flex-wrap:wrap;width:100%;align-items:flex-start;gap:16px}::ng-deep .table-search-bar-left{display:flex;flex-wrap:wrap;flex:1;row-gap:0px;column-gap:48px;min-width:0}@media (min-width: 1920px){::ng-deep .table-search-bar-left{column-gap:56px}}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item{width:var(--form-item-width);flex-shrink:0;flex-wrap:nowrap}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label{flex-shrink:0;width:var(--label-width);text-align:var(--label-align)}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label label:after{content:\"\"}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-picker{width:100%}::ng-deep .table-search-bar-right{display:flex;flex-shrink:0;align-items:flex-start}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.NzSpaceComponent, selector: "nz-space, [nz-space]", inputs: ["nzDirection", "nzAlign", "nzSplit", "nzWrap", "nzSize"], exportAs: ["NzSpace"] }, { kind: "directive", type: i2.NzSpaceItemDirective, selector: "[nzSpaceItem]" }] }); }
14
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableSearchBarComponent, selector: "app-table-search-bar", inputs: { labelWidth: "labelWidth", labelAlign: "labelAlign", searchColCount: "searchColCount" }, queries: [{ propertyName: "leftContentTpl", first: true, predicate: ["leftContent"], descendants: true }, { propertyName: "actionTextBtnTpl", first: true, predicate: ["actionTextBtn"], descendants: true }, { propertyName: "actionImgBtnTpl", first: true, predicate: ["actionImgBtn"], descendants: true }], ngImport: i0, template: "<div class=\"table-search-bar\">\r\n <div\r\n class=\"table-search-bar-left\"\r\n [style.--search-col-count]=\"searchColCount\"\r\n [style.--label-width]=\"labelWidth\"\r\n [style.--label-align]=\"labelAlign\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"leftContentTpl\"></ng-container>\r\n </div>\r\n <div class=\"table-search-bar-right\">\r\n <nz-space nzDirection=\"vertical\" nzAlign=\"end\">\r\n <ng-template nzSpaceItem>\r\n <ng-container *ngTemplateOutlet=\"actionTextBtnTpl\"></ng-container>\r\n </ng-template>\r\n <ng-template nzSpaceItem *ngIf=\"actionImgBtnTpl\">\r\n <ng-container *ngTemplateOutlet=\"actionImgBtnTpl\"></ng-container>\r\n </ng-template>\r\n </nz-space>\r\n <!-- <ng-container *ngTemplateOutlet=\"rightContentTpl\"></ng-container> -->\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .table-search-bar{display:flex;flex-wrap:wrap;width:100%;align-items:flex-start;gap:16px}::ng-deep .table-search-bar-left{--search-col-count: 4;display:grid;grid-template-columns:repeat(var(--search-col-count),minmax(0,1fr));flex:1;row-gap:0px;column-gap:48px;min-width:0}@media (min-width: 1920px){::ng-deep .table-search-bar-left{column-gap:56px}}@media (max-width: 1600px){::ng-deep .table-search-bar-left{--search-col-count: 3}}@media (max-width: 1200px){::ng-deep .table-search-bar-left{--search-col-count: 2}}@media (max-width: 768px){::ng-deep .table-search-bar-left{--search-col-count: 1}}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item{width:auto;min-width:0;flex-wrap:nowrap}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label{flex-shrink:0;width:var(--label-width);text-align:var(--label-align)}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label label:after{content:\"\"}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-picker{width:100%}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-control,::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-control-input,::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-control-input-content{min-width:0}::ng-deep .table-search-bar-right{display:flex;flex-shrink:0;align-items:flex-start}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.NzSpaceComponent, selector: "nz-space, [nz-space]", inputs: ["nzDirection", "nzAlign", "nzSplit", "nzWrap", "nzSize"], exportAs: ["NzSpace"] }, { kind: "directive", type: i2.NzSpaceItemDirective, selector: "[nzSpaceItem]" }] }); }
17
15
  }
18
16
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableSearchBarComponent, decorators: [{
19
17
  type: Component,
20
- args: [{ selector: "app-table-search-bar", template: "<div class=\"table-search-bar\">\r\n <div\r\n class=\"table-search-bar-left\"\r\n style=\"--label-width: {{ labelWidth }}; --label-align: {{ labelAlign }}; --form-item-width: {{ formItemWidth }};\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"leftContentTpl\"></ng-container>\r\n </div>\r\n <div class=\"table-search-bar-right\">\r\n <nz-space nzDirection=\"vertical\" nzAlign=\"end\">\r\n <ng-template nzSpaceItem>\r\n <ng-container *ngTemplateOutlet=\"actionTextBtnTpl\"></ng-container>\r\n </ng-template>\r\n <ng-template nzSpaceItem *ngIf=\"actionImgBtnTpl\">\r\n <ng-container *ngTemplateOutlet=\"actionImgBtnTpl\"></ng-container>\r\n </ng-template>\r\n </nz-space>\r\n <!-- <ng-container *ngTemplateOutlet=\"rightContentTpl\"></ng-container> -->\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .table-search-bar{display:flex;flex-wrap:wrap;width:100%;align-items:flex-start;gap:16px}::ng-deep .table-search-bar-left{display:flex;flex-wrap:wrap;flex:1;row-gap:0px;column-gap:48px;min-width:0}@media (min-width: 1920px){::ng-deep .table-search-bar-left{column-gap:56px}}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item{width:var(--form-item-width);flex-shrink:0;flex-wrap:nowrap}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label{flex-shrink:0;width:var(--label-width);text-align:var(--label-align)}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label label:after{content:\"\"}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-picker{width:100%}::ng-deep .table-search-bar-right{display:flex;flex-shrink:0;align-items:flex-start}\n"] }]
21
- }], ctorParameters: function () { return []; }, propDecorators: { leftColSpan: [{
22
- type: Input
23
- }], rightColSpan: [{
24
- type: Input
25
- }], labelWidth: [{
18
+ args: [{ selector: "app-table-search-bar", template: "<div class=\"table-search-bar\">\r\n <div\r\n class=\"table-search-bar-left\"\r\n [style.--search-col-count]=\"searchColCount\"\r\n [style.--label-width]=\"labelWidth\"\r\n [style.--label-align]=\"labelAlign\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"leftContentTpl\"></ng-container>\r\n </div>\r\n <div class=\"table-search-bar-right\">\r\n <nz-space nzDirection=\"vertical\" nzAlign=\"end\">\r\n <ng-template nzSpaceItem>\r\n <ng-container *ngTemplateOutlet=\"actionTextBtnTpl\"></ng-container>\r\n </ng-template>\r\n <ng-template nzSpaceItem *ngIf=\"actionImgBtnTpl\">\r\n <ng-container *ngTemplateOutlet=\"actionImgBtnTpl\"></ng-container>\r\n </ng-template>\r\n </nz-space>\r\n <!-- <ng-container *ngTemplateOutlet=\"rightContentTpl\"></ng-container> -->\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .table-search-bar{display:flex;flex-wrap:wrap;width:100%;align-items:flex-start;gap:16px}::ng-deep .table-search-bar-left{--search-col-count: 4;display:grid;grid-template-columns:repeat(var(--search-col-count),minmax(0,1fr));flex:1;row-gap:0px;column-gap:48px;min-width:0}@media (min-width: 1920px){::ng-deep .table-search-bar-left{column-gap:56px}}@media (max-width: 1600px){::ng-deep .table-search-bar-left{--search-col-count: 3}}@media (max-width: 1200px){::ng-deep .table-search-bar-left{--search-col-count: 2}}@media (max-width: 768px){::ng-deep .table-search-bar-left{--search-col-count: 1}}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item{width:auto;min-width:0;flex-wrap:nowrap}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label{flex-shrink:0;width:var(--label-width);text-align:var(--label-align)}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label label:after{content:\"\"}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-picker{width:100%}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-control,::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-control-input,::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-control-input-content{min-width:0}::ng-deep .table-search-bar-right{display:flex;flex-shrink:0;align-items:flex-start}\n"] }]
19
+ }], ctorParameters: function () { return []; }, propDecorators: { labelWidth: [{
26
20
  type: Input
27
21
  }], labelAlign: [{
28
22
  type: Input
29
- }], formItemWidth: [{
23
+ }], searchColCount: [{
30
24
  type: Input
31
25
  }], leftContentTpl: [{
32
26
  type: ContentChild,
@@ -38,4 +32,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
38
32
  type: ContentChild,
39
33
  args: ["actionImgBtn"]
40
34
  }] } });
41
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtc2VhcmNoLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm8tdGFibGUvc3JjL2xpYi90YWJsZS1zZWFyY2gtYmFyL3RhYmxlLXNlYXJjaC1iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvLXRhYmxlL3NyYy9saWIvdGFibGUtc2VhcmNoLWJhci90YWJsZS1zZWFyY2gtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssR0FHTixNQUFNLGVBQWUsQ0FBQzs7OztBQU92QixNQUFNLE9BQU8sdUJBQXVCO0lBVWxDO1FBVFMsZ0JBQVcsR0FBVyxFQUFFLENBQUM7UUFDekIsaUJBQVksR0FBVyxDQUFDLENBQUM7UUFDekIsZUFBVSxHQUFXLE1BQU0sQ0FBQztRQUM1QixlQUFVLEdBQVcsT0FBTyxDQUFDO1FBQzdCLGtCQUFhLEdBQVcsT0FBTyxDQUFDO0lBSzFCLENBQUM7SUFFaEIsUUFBUSxLQUFVLENBQUM7SUFFbkIsZUFBZSxLQUFVLENBQUM7K0dBZGYsdUJBQXVCO21HQUF2Qix1QkFBdUIsdWdCQ2RwQyxrMEJBbUJBOzs0RkRMYSx1QkFBdUI7a0JBTG5DLFNBQVM7K0JBQ0Usc0JBQXNCOzBFQUt2QixXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ3VCLGNBQWM7c0JBQTFDLFlBQVk7dUJBQUMsYUFBYTtnQkFDSSxnQkFBZ0I7c0JBQTlDLFlBQVk7dUJBQUMsZUFBZTtnQkFDQyxlQUFlO3NCQUE1QyxZQUFZO3VCQUFDLGNBQWMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gIEFmdGVyVmlld0luaXQsXHJcbiAgQ29tcG9uZW50LFxyXG4gIENvbnRlbnRDaGlsZCxcclxuICBJbnB1dCxcclxuICBPbkluaXQsXHJcbiAgVGVtcGxhdGVSZWYsXHJcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiBcImFwcC10YWJsZS1zZWFyY2gtYmFyXCIsXHJcbiAgdGVtcGxhdGVVcmw6IFwiLi90YWJsZS1zZWFyY2gtYmFyLmNvbXBvbmVudC5odG1sXCIsXHJcbiAgc3R5bGVVcmxzOiBbXCIuL3RhYmxlLXNlYXJjaC1iYXIuY29tcG9uZW50Lmxlc3NcIl0sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBUYWJsZVNlYXJjaEJhckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCB7XHJcbiAgQElucHV0KCkgbGVmdENvbFNwYW46IG51bWJlciA9IDIxO1xyXG4gIEBJbnB1dCgpIHJpZ2h0Q29sU3BhbjogbnVtYmVyID0gMztcclxuICBASW5wdXQoKSBsYWJlbFdpZHRoOiBzdHJpbmcgPSBcIjkwcHhcIjtcclxuICBASW5wdXQoKSBsYWJlbEFsaWduOiBzdHJpbmcgPSBcInJpZ2h0XCI7XHJcbiAgQElucHV0KCkgZm9ybUl0ZW1XaWR0aDogc3RyaW5nID0gXCIyNzBweFwiO1xyXG4gIEBDb250ZW50Q2hpbGQoXCJsZWZ0Q29udGVudFwiKSBsZWZ0Q29udGVudFRwbCE6IFRlbXBsYXRlUmVmPGFueT47XHJcbiAgQENvbnRlbnRDaGlsZChcImFjdGlvblRleHRCdG5cIikgYWN0aW9uVGV4dEJ0blRwbCE6IFRlbXBsYXRlUmVmPGFueT47XHJcbiAgQENvbnRlbnRDaGlsZChcImFjdGlvbkltZ0J0blwiKSBhY3Rpb25JbWdCdG5UcGwhOiBUZW1wbGF0ZVJlZjxhbnk+O1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHt9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge31cclxuXHJcbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge31cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwidGFibGUtc2VhcmNoLWJhclwiPlxyXG4gIDxkaXZcclxuICAgIGNsYXNzPVwidGFibGUtc2VhcmNoLWJhci1sZWZ0XCJcclxuICAgIHN0eWxlPVwiLS1sYWJlbC13aWR0aDoge3sgbGFiZWxXaWR0aCB9fTsgLS1sYWJlbC1hbGlnbjoge3sgbGFiZWxBbGlnbiB9fTsgLS1mb3JtLWl0ZW0td2lkdGg6IHt7IGZvcm1JdGVtV2lkdGggfX07XCJcclxuICA+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwibGVmdENvbnRlbnRUcGxcIj48L25nLWNvbnRhaW5lcj5cclxuICA8L2Rpdj5cclxuICA8ZGl2IGNsYXNzPVwidGFibGUtc2VhcmNoLWJhci1yaWdodFwiPlxyXG4gICAgPG56LXNwYWNlIG56RGlyZWN0aW9uPVwidmVydGljYWxcIiBuekFsaWduPVwiZW5kXCI+XHJcbiAgICAgIDxuZy10ZW1wbGF0ZSBuelNwYWNlSXRlbT5cclxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiYWN0aW9uVGV4dEJ0blRwbFwiPjwvbmctY29udGFpbmVyPlxyXG4gICAgICA8L25nLXRlbXBsYXRlPlxyXG4gICAgICA8bmctdGVtcGxhdGUgbnpTcGFjZUl0ZW0gKm5nSWY9XCJhY3Rpb25JbWdCdG5UcGxcIj5cclxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiYWN0aW9uSW1nQnRuVHBsXCI+PC9uZy1jb250YWluZXI+XHJcbiAgICAgIDwvbmctdGVtcGxhdGU+XHJcbiAgICA8L256LXNwYWNlPlxyXG4gICAgPCEtLSA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwicmlnaHRDb250ZW50VHBsXCI+PC9uZy1jb250YWluZXI+IC0tPlxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19
35
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtc2VhcmNoLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm8tdGFibGUvc3JjL2xpYi90YWJsZS1zZWFyY2gtYmFyL3RhYmxlLXNlYXJjaC1iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvLXRhYmxlL3NyYy9saWIvdGFibGUtc2VhcmNoLWJhci90YWJsZS1zZWFyY2gtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssR0FHTixNQUFNLGVBQWUsQ0FBQzs7OztBQU92QixNQUFNLE9BQU8sdUJBQXVCO0lBUWxDO1FBUFMsZUFBVSxHQUFXLE1BQU0sQ0FBQztRQUM1QixlQUFVLEdBQVcsT0FBTyxDQUFDO1FBQzdCLG1CQUFjLEdBQWtCLElBQUksQ0FBQztJQUsvQixDQUFDO0lBRWhCLFFBQVEsS0FBVSxDQUFDO0lBRW5CLGVBQWUsS0FBVSxDQUFDOytHQVpmLHVCQUF1QjttR0FBdkIsdUJBQXVCLCtjQ2RwQyxvMUJBcUJBOzs0RkRQYSx1QkFBdUI7a0JBTG5DLFNBQVM7K0JBQ0Usc0JBQXNCOzBFQUt2QixVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDdUIsY0FBYztzQkFBMUMsWUFBWTt1QkFBQyxhQUFhO2dCQUNJLGdCQUFnQjtzQkFBOUMsWUFBWTt1QkFBQyxlQUFlO2dCQUNDLGVBQWU7c0JBQTVDLFlBQVk7dUJBQUMsY0FBYyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQWZ0ZXJWaWV3SW5pdCxcclxuICBDb21wb25lbnQsXHJcbiAgQ29udGVudENoaWxkLFxyXG4gIElucHV0LFxyXG4gIE9uSW5pdCxcclxuICBUZW1wbGF0ZVJlZixcclxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6IFwiYXBwLXRhYmxlLXNlYXJjaC1iYXJcIixcclxuICB0ZW1wbGF0ZVVybDogXCIuL3RhYmxlLXNlYXJjaC1iYXIuY29tcG9uZW50Lmh0bWxcIixcclxuICBzdHlsZVVybHM6IFtcIi4vdGFibGUtc2VhcmNoLWJhci5jb21wb25lbnQubGVzc1wiXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFRhYmxlU2VhcmNoQmFyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0IHtcclxuICBASW5wdXQoKSBsYWJlbFdpZHRoOiBzdHJpbmcgPSBcIjkwcHhcIjtcclxuICBASW5wdXQoKSBsYWJlbEFsaWduOiBzdHJpbmcgPSBcInJpZ2h0XCI7XHJcbiAgQElucHV0KCkgc2VhcmNoQ29sQ291bnQ6IG51bWJlciB8IG51bGwgPSBudWxsO1xyXG4gIEBDb250ZW50Q2hpbGQoXCJsZWZ0Q29udGVudFwiKSBsZWZ0Q29udGVudFRwbCE6IFRlbXBsYXRlUmVmPGFueT47XHJcbiAgQENvbnRlbnRDaGlsZChcImFjdGlvblRleHRCdG5cIikgYWN0aW9uVGV4dEJ0blRwbCE6IFRlbXBsYXRlUmVmPGFueT47XHJcbiAgQENvbnRlbnRDaGlsZChcImFjdGlvbkltZ0J0blwiKSBhY3Rpb25JbWdCdG5UcGwhOiBUZW1wbGF0ZVJlZjxhbnk+O1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHt9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge31cclxuXHJcbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge31cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwidGFibGUtc2VhcmNoLWJhclwiPlxyXG4gIDxkaXZcclxuICAgIGNsYXNzPVwidGFibGUtc2VhcmNoLWJhci1sZWZ0XCJcclxuICAgIFtzdHlsZS4tLXNlYXJjaC1jb2wtY291bnRdPVwic2VhcmNoQ29sQ291bnRcIlxyXG4gICAgW3N0eWxlLi0tbGFiZWwtd2lkdGhdPVwibGFiZWxXaWR0aFwiXHJcbiAgICBbc3R5bGUuLS1sYWJlbC1hbGlnbl09XCJsYWJlbEFsaWduXCJcclxuICA+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwibGVmdENvbnRlbnRUcGxcIj48L25nLWNvbnRhaW5lcj5cclxuICA8L2Rpdj5cclxuICA8ZGl2IGNsYXNzPVwidGFibGUtc2VhcmNoLWJhci1yaWdodFwiPlxyXG4gICAgPG56LXNwYWNlIG56RGlyZWN0aW9uPVwidmVydGljYWxcIiBuekFsaWduPVwiZW5kXCI+XHJcbiAgICAgIDxuZy10ZW1wbGF0ZSBuelNwYWNlSXRlbT5cclxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiYWN0aW9uVGV4dEJ0blRwbFwiPjwvbmctY29udGFpbmVyPlxyXG4gICAgICA8L25nLXRlbXBsYXRlPlxyXG4gICAgICA8bmctdGVtcGxhdGUgbnpTcGFjZUl0ZW0gKm5nSWY9XCJhY3Rpb25JbWdCdG5UcGxcIj5cclxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiYWN0aW9uSW1nQnRuVHBsXCI+PC9uZy1jb250YWluZXI+XHJcbiAgICAgIDwvbmctdGVtcGxhdGU+XHJcbiAgICA8L256LXNwYWNlPlxyXG4gICAgPCEtLSA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwicmlnaHRDb250ZW50VHBsXCI+PC9uZy1jb250YWluZXI+IC0tPlxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19
@@ -1,6 +1,6 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { InjectionToken, Component, Input, ContentChild, Directive, Optional, HostListener, forwardRef, Inject, EventEmitter, Output, ViewChild, ViewContainerRef, TemplateRef, ContentChildren, NgModule, Injectable } from '@angular/core';
3
- import { hasIn, cloneDeep, isNil, debounce } from 'lodash-es';
3
+ import { isNil, hasIn, cloneDeep, debounce } from 'lodash-es';
4
4
  import { isObservable, lastValueFrom } from 'rxjs';
5
5
  import * as i1 from '@angular/common';
6
6
  import { CommonModule } from '@angular/common';
@@ -154,11 +154,11 @@ class PageContainerComponent {
154
154
  }
155
155
  ngOnInit() { }
156
156
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PageContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
157
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PageContainerComponent, selector: "app-page-container", inputs: { title: "title", showHeader: "showHeader", bodyStyle: "bodyStyle", headerStyle: "headerStyle" }, queries: [{ propertyName: "headerTpl", first: true, predicate: ["header"], descendants: true }, { propertyName: "bodyTpl", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "<nz-card\r\n [nzBorderless]=\"true\"\r\n [nzBodyStyle]=\"{ padding: '8px', width: '100%' }\"\r\n>\r\n <div class=\"page-container-title\" *ngIf=\"title\">{{ title }}</div>\r\n <div class=\"page-container-header\" *ngIf=\"showHeader\" [ngStyle]=\"headerStyle\">\r\n <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\r\n </div>\r\n <div class=\"page-container-body\" [ngStyle]=\"bodyStyle\">\r\n <ng-container *ngTemplateOutlet=\"bodyTpl\"></ng-container>\r\n </div>\r\n</nz-card>\r\n", styles: [".page-container-title{padding-left:8px;font-size:16px;color:#1d1d1d;margin-bottom:8px}.page-container-title:before{content:\"\";display:inline-block;width:2px;height:16px;position:relative;left:-8px;top:3px;background-color:#096dd9}.page-container-header{box-sizing:border-box;padding:12px 24px;background:#f4f4f5}.page-container-body{box-sizing:border-box;padding:8px 0 0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzBorderless", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }] }); }
157
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PageContainerComponent, selector: "app-page-container", inputs: { title: "title", showHeader: "showHeader", bodyStyle: "bodyStyle", headerStyle: "headerStyle" }, queries: [{ propertyName: "customContentTpl", first: true, predicate: ["customContent"], descendants: true }, { propertyName: "headerTpl", first: true, predicate: ["header"], descendants: true }, { propertyName: "bodyTpl", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "<nz-card\r\n [nzBorderless]=\"true\"\r\n [nzBodyStyle]=\"{ padding: '8px', width: '100%' }\"\r\n>\r\n <div class=\"page-container-title\" *ngIf=\"title\">{{ title }}</div>\r\n <div class=\"page-container-custom-content\" *ngIf=\"customContentTpl\">\r\n <ng-container *ngTemplateOutlet=\"customContentTpl\"></ng-container>\r\n </div>\r\n <div class=\"page-container-header\" *ngIf=\"showHeader\" [ngStyle]=\"headerStyle\">\r\n <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\r\n </div>\r\n <div class=\"page-container-body\" [ngStyle]=\"bodyStyle\">\r\n <ng-container *ngTemplateOutlet=\"bodyTpl\"></ng-container>\r\n </div>\r\n</nz-card>\r\n", styles: [".page-container-title{padding-left:8px;font-size:16px;color:#1d1d1d;margin-bottom:8px}.page-container-title:before{content:\"\";display:inline-block;width:2px;height:16px;position:relative;left:-8px;top:3px;background-color:#096dd9}.page-container-custom-content{box-sizing:border-box;padding:0 0 8px;min-width:0;overflow-x:hidden}.page-container-header{box-sizing:border-box;padding:12px 24px;background:#f4f4f5}.page-container-body{box-sizing:border-box;padding:8px 0 0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.NzCardComponent, selector: "nz-card", inputs: ["nzBordered", "nzBorderless", "nzLoading", "nzHoverable", "nzBodyStyle", "nzCover", "nzActions", "nzType", "nzSize", "nzTitle", "nzExtra"], exportAs: ["nzCard"] }] }); }
158
158
  }
159
159
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PageContainerComponent, decorators: [{
160
160
  type: Component,
161
- args: [{ selector: "app-page-container", template: "<nz-card\r\n [nzBorderless]=\"true\"\r\n [nzBodyStyle]=\"{ padding: '8px', width: '100%' }\"\r\n>\r\n <div class=\"page-container-title\" *ngIf=\"title\">{{ title }}</div>\r\n <div class=\"page-container-header\" *ngIf=\"showHeader\" [ngStyle]=\"headerStyle\">\r\n <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\r\n </div>\r\n <div class=\"page-container-body\" [ngStyle]=\"bodyStyle\">\r\n <ng-container *ngTemplateOutlet=\"bodyTpl\"></ng-container>\r\n </div>\r\n</nz-card>\r\n", styles: [".page-container-title{padding-left:8px;font-size:16px;color:#1d1d1d;margin-bottom:8px}.page-container-title:before{content:\"\";display:inline-block;width:2px;height:16px;position:relative;left:-8px;top:3px;background-color:#096dd9}.page-container-header{box-sizing:border-box;padding:12px 24px;background:#f4f4f5}.page-container-body{box-sizing:border-box;padding:8px 0 0}\n"] }]
161
+ args: [{ selector: "app-page-container", template: "<nz-card\r\n [nzBorderless]=\"true\"\r\n [nzBodyStyle]=\"{ padding: '8px', width: '100%' }\"\r\n>\r\n <div class=\"page-container-title\" *ngIf=\"title\">{{ title }}</div>\r\n <div class=\"page-container-custom-content\" *ngIf=\"customContentTpl\">\r\n <ng-container *ngTemplateOutlet=\"customContentTpl\"></ng-container>\r\n </div>\r\n <div class=\"page-container-header\" *ngIf=\"showHeader\" [ngStyle]=\"headerStyle\">\r\n <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\r\n </div>\r\n <div class=\"page-container-body\" [ngStyle]=\"bodyStyle\">\r\n <ng-container *ngTemplateOutlet=\"bodyTpl\"></ng-container>\r\n </div>\r\n</nz-card>\r\n", styles: [".page-container-title{padding-left:8px;font-size:16px;color:#1d1d1d;margin-bottom:8px}.page-container-title:before{content:\"\";display:inline-block;width:2px;height:16px;position:relative;left:-8px;top:3px;background-color:#096dd9}.page-container-custom-content{box-sizing:border-box;padding:0 0 8px;min-width:0;overflow-x:hidden}.page-container-header{box-sizing:border-box;padding:12px 24px;background:#f4f4f5}.page-container-body{box-sizing:border-box;padding:8px 0 0}\n"] }]
162
162
  }], ctorParameters: function () { return []; }, propDecorators: { title: [{
163
163
  type: Input
164
164
  }], showHeader: [{
@@ -167,6 +167,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
167
167
  type: Input
168
168
  }], headerStyle: [{
169
169
  type: Input
170
+ }], customContentTpl: [{
171
+ type: ContentChild,
172
+ args: ["customContent"]
170
173
  }], headerTpl: [{
171
174
  type: ContentChild,
172
175
  args: ["header"]
@@ -177,29 +180,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
177
180
 
178
181
  class TableSearchBarComponent {
179
182
  constructor() {
180
- this.leftColSpan = 21;
181
- this.rightColSpan = 3;
182
183
  this.labelWidth = "90px";
183
184
  this.labelAlign = "right";
184
- this.formItemWidth = "270px";
185
+ this.searchColCount = null;
185
186
  }
186
187
  ngOnInit() { }
187
188
  ngAfterViewInit() { }
188
189
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableSearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
189
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableSearchBarComponent, selector: "app-table-search-bar", inputs: { leftColSpan: "leftColSpan", rightColSpan: "rightColSpan", labelWidth: "labelWidth", labelAlign: "labelAlign", formItemWidth: "formItemWidth" }, queries: [{ propertyName: "leftContentTpl", first: true, predicate: ["leftContent"], descendants: true }, { propertyName: "actionTextBtnTpl", first: true, predicate: ["actionTextBtn"], descendants: true }, { propertyName: "actionImgBtnTpl", first: true, predicate: ["actionImgBtn"], descendants: true }], ngImport: i0, template: "<div class=\"table-search-bar\">\r\n <div\r\n class=\"table-search-bar-left\"\r\n style=\"--label-width: {{ labelWidth }}; --label-align: {{ labelAlign }}; --form-item-width: {{ formItemWidth }};\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"leftContentTpl\"></ng-container>\r\n </div>\r\n <div class=\"table-search-bar-right\">\r\n <nz-space nzDirection=\"vertical\" nzAlign=\"end\">\r\n <ng-template nzSpaceItem>\r\n <ng-container *ngTemplateOutlet=\"actionTextBtnTpl\"></ng-container>\r\n </ng-template>\r\n <ng-template nzSpaceItem *ngIf=\"actionImgBtnTpl\">\r\n <ng-container *ngTemplateOutlet=\"actionImgBtnTpl\"></ng-container>\r\n </ng-template>\r\n </nz-space>\r\n <!-- <ng-container *ngTemplateOutlet=\"rightContentTpl\"></ng-container> -->\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .table-search-bar{display:flex;flex-wrap:wrap;width:100%;align-items:flex-start;gap:16px}::ng-deep .table-search-bar-left{display:flex;flex-wrap:wrap;flex:1;row-gap:0px;column-gap:48px;min-width:0}@media (min-width: 1920px){::ng-deep .table-search-bar-left{column-gap:56px}}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item{width:var(--form-item-width);flex-shrink:0;flex-wrap:nowrap}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label{flex-shrink:0;width:var(--label-width);text-align:var(--label-align)}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label label:after{content:\"\"}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-picker{width:100%}::ng-deep .table-search-bar-right{display:flex;flex-shrink:0;align-items:flex-start}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.NzSpaceComponent, selector: "nz-space, [nz-space]", inputs: ["nzDirection", "nzAlign", "nzSplit", "nzWrap", "nzSize"], exportAs: ["NzSpace"] }, { kind: "directive", type: i2$1.NzSpaceItemDirective, selector: "[nzSpaceItem]" }] }); }
190
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableSearchBarComponent, selector: "app-table-search-bar", inputs: { labelWidth: "labelWidth", labelAlign: "labelAlign", searchColCount: "searchColCount" }, queries: [{ propertyName: "leftContentTpl", first: true, predicate: ["leftContent"], descendants: true }, { propertyName: "actionTextBtnTpl", first: true, predicate: ["actionTextBtn"], descendants: true }, { propertyName: "actionImgBtnTpl", first: true, predicate: ["actionImgBtn"], descendants: true }], ngImport: i0, template: "<div class=\"table-search-bar\">\r\n <div\r\n class=\"table-search-bar-left\"\r\n [style.--search-col-count]=\"searchColCount\"\r\n [style.--label-width]=\"labelWidth\"\r\n [style.--label-align]=\"labelAlign\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"leftContentTpl\"></ng-container>\r\n </div>\r\n <div class=\"table-search-bar-right\">\r\n <nz-space nzDirection=\"vertical\" nzAlign=\"end\">\r\n <ng-template nzSpaceItem>\r\n <ng-container *ngTemplateOutlet=\"actionTextBtnTpl\"></ng-container>\r\n </ng-template>\r\n <ng-template nzSpaceItem *ngIf=\"actionImgBtnTpl\">\r\n <ng-container *ngTemplateOutlet=\"actionImgBtnTpl\"></ng-container>\r\n </ng-template>\r\n </nz-space>\r\n <!-- <ng-container *ngTemplateOutlet=\"rightContentTpl\"></ng-container> -->\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .table-search-bar{display:flex;flex-wrap:wrap;width:100%;align-items:flex-start;gap:16px}::ng-deep .table-search-bar-left{--search-col-count: 4;display:grid;grid-template-columns:repeat(var(--search-col-count),minmax(0,1fr));flex:1;row-gap:0px;column-gap:48px;min-width:0}@media (min-width: 1920px){::ng-deep .table-search-bar-left{column-gap:56px}}@media (max-width: 1600px){::ng-deep .table-search-bar-left{--search-col-count: 3}}@media (max-width: 1200px){::ng-deep .table-search-bar-left{--search-col-count: 2}}@media (max-width: 768px){::ng-deep .table-search-bar-left{--search-col-count: 1}}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item{width:auto;min-width:0;flex-wrap:nowrap}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label{flex-shrink:0;width:var(--label-width);text-align:var(--label-align)}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label label:after{content:\"\"}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-picker{width:100%}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-control,::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-control-input,::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-control-input-content{min-width:0}::ng-deep .table-search-bar-right{display:flex;flex-shrink:0;align-items:flex-start}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.NzSpaceComponent, selector: "nz-space, [nz-space]", inputs: ["nzDirection", "nzAlign", "nzSplit", "nzWrap", "nzSize"], exportAs: ["NzSpace"] }, { kind: "directive", type: i2$1.NzSpaceItemDirective, selector: "[nzSpaceItem]" }] }); }
190
191
  }
191
192
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableSearchBarComponent, decorators: [{
192
193
  type: Component,
193
- args: [{ selector: "app-table-search-bar", template: "<div class=\"table-search-bar\">\r\n <div\r\n class=\"table-search-bar-left\"\r\n style=\"--label-width: {{ labelWidth }}; --label-align: {{ labelAlign }}; --form-item-width: {{ formItemWidth }};\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"leftContentTpl\"></ng-container>\r\n </div>\r\n <div class=\"table-search-bar-right\">\r\n <nz-space nzDirection=\"vertical\" nzAlign=\"end\">\r\n <ng-template nzSpaceItem>\r\n <ng-container *ngTemplateOutlet=\"actionTextBtnTpl\"></ng-container>\r\n </ng-template>\r\n <ng-template nzSpaceItem *ngIf=\"actionImgBtnTpl\">\r\n <ng-container *ngTemplateOutlet=\"actionImgBtnTpl\"></ng-container>\r\n </ng-template>\r\n </nz-space>\r\n <!-- <ng-container *ngTemplateOutlet=\"rightContentTpl\"></ng-container> -->\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .table-search-bar{display:flex;flex-wrap:wrap;width:100%;align-items:flex-start;gap:16px}::ng-deep .table-search-bar-left{display:flex;flex-wrap:wrap;flex:1;row-gap:0px;column-gap:48px;min-width:0}@media (min-width: 1920px){::ng-deep .table-search-bar-left{column-gap:56px}}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item{width:var(--form-item-width);flex-shrink:0;flex-wrap:nowrap}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label{flex-shrink:0;width:var(--label-width);text-align:var(--label-align)}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label label:after{content:\"\"}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-picker{width:100%}::ng-deep .table-search-bar-right{display:flex;flex-shrink:0;align-items:flex-start}\n"] }]
194
- }], ctorParameters: function () { return []; }, propDecorators: { leftColSpan: [{
195
- type: Input
196
- }], rightColSpan: [{
197
- type: Input
198
- }], labelWidth: [{
194
+ args: [{ selector: "app-table-search-bar", template: "<div class=\"table-search-bar\">\r\n <div\r\n class=\"table-search-bar-left\"\r\n [style.--search-col-count]=\"searchColCount\"\r\n [style.--label-width]=\"labelWidth\"\r\n [style.--label-align]=\"labelAlign\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"leftContentTpl\"></ng-container>\r\n </div>\r\n <div class=\"table-search-bar-right\">\r\n <nz-space nzDirection=\"vertical\" nzAlign=\"end\">\r\n <ng-template nzSpaceItem>\r\n <ng-container *ngTemplateOutlet=\"actionTextBtnTpl\"></ng-container>\r\n </ng-template>\r\n <ng-template nzSpaceItem *ngIf=\"actionImgBtnTpl\">\r\n <ng-container *ngTemplateOutlet=\"actionImgBtnTpl\"></ng-container>\r\n </ng-template>\r\n </nz-space>\r\n <!-- <ng-container *ngTemplateOutlet=\"rightContentTpl\"></ng-container> -->\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .table-search-bar{display:flex;flex-wrap:wrap;width:100%;align-items:flex-start;gap:16px}::ng-deep .table-search-bar-left{--search-col-count: 4;display:grid;grid-template-columns:repeat(var(--search-col-count),minmax(0,1fr));flex:1;row-gap:0px;column-gap:48px;min-width:0}@media (min-width: 1920px){::ng-deep .table-search-bar-left{column-gap:56px}}@media (max-width: 1600px){::ng-deep .table-search-bar-left{--search-col-count: 3}}@media (max-width: 1200px){::ng-deep .table-search-bar-left{--search-col-count: 2}}@media (max-width: 768px){::ng-deep .table-search-bar-left{--search-col-count: 1}}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item{width:auto;min-width:0;flex-wrap:nowrap}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label{flex-shrink:0;width:var(--label-width);text-align:var(--label-align)}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label label:after{content:\"\"}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-picker{width:100%}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-control,::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-control-input,::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-control-input-content{min-width:0}::ng-deep .table-search-bar-right{display:flex;flex-shrink:0;align-items:flex-start}\n"] }]
195
+ }], ctorParameters: function () { return []; }, propDecorators: { labelWidth: [{
199
196
  type: Input
200
197
  }], labelAlign: [{
201
198
  type: Input
202
- }], formItemWidth: [{
199
+ }], searchColCount: [{
203
200
  type: Input
204
201
  }], leftContentTpl: [{
205
202
  type: ContentChild,
@@ -741,6 +738,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
741
738
  }] } });
742
739
 
743
740
  class ProTableComponent {
741
+ set searchColCount(value) {
742
+ this._searchColCount = isNil(value) ? null : Number(value);
743
+ }
744
+ get searchColCount() {
745
+ return this._searchColCount ?? 4;
746
+ }
747
+ get tableSearchColCount() {
748
+ return this._searchColCount;
749
+ }
744
750
  get _computedScroll() {
745
751
  if (!this.scroll || this.scroll.x !== 'auto')
746
752
  return this.scroll;
@@ -752,6 +758,7 @@ class ProTableComponent {
752
758
  this.showSearchBtn = true;
753
759
  this.showClearBtn = true;
754
760
  this.title = null;
761
+ this.bodyStyle = {};
755
762
  this.tableName = "";
756
763
  this.multiRow = false;
757
764
  this.columns = [];
@@ -761,7 +768,7 @@ class ProTableComponent {
761
768
  this.clearBtnText = "清空";
762
769
  this.labelWidth = "90px";
763
770
  this.labelAlign = "right";
764
- this.formItemWidth = "330px";
771
+ this._searchColCount = null;
765
772
  this.dataSource = [];
766
773
  this.bordered = true;
767
774
  this.outerBordered = true;
@@ -948,8 +955,14 @@ class ProTableComponent {
948
955
  // 计算需要的模板总数
949
956
  const customRenderCount = columnsWithCustomRender.length;
950
957
  const totalNeededTemplates = customRenderCount + columnsWithCustomLabel.length;
951
- // 识别并排除特殊模板(actionBar 和 imgActionBar)
958
+ // 识别并排除特殊模板(customContent、actionBar 和 imgActionBar)
952
959
  const specialTemplateIndices = new Set();
960
+ if (this.customContentTpl) {
961
+ const customContentIndex = this.findTemplateIndex(allTemplatesArray, this.customContentTpl);
962
+ if (customContentIndex !== -1) {
963
+ specialTemplateIndices.add(customContentIndex);
964
+ }
965
+ }
953
966
  // 尝试找到 actionBarTpl 在 allTemplatesArray 中的位置
954
967
  if (this.actionBarTpl) {
955
968
  const actionBarIndex = this.findTemplateIndex(allTemplatesArray, this.actionBarTpl);
@@ -966,7 +979,9 @@ class ProTableComponent {
966
979
  }
967
980
  // 如果无法通过引用找到特殊模板,使用备用策略
968
981
  // 备用策略:假设最后的模板是特殊模板
969
- const specialTemplateCount = (this.actionBarTpl ? 1 : 0) + (this.imgActionBarTpl ? 1 : 0);
982
+ const specialTemplateCount = (this.customContentTpl ? 1 : 0) +
983
+ (this.actionBarTpl ? 1 : 0) +
984
+ (this.imgActionBarTpl ? 1 : 0);
970
985
  if (specialTemplateIndices.size === 0 && specialTemplateCount > 0) {
971
986
  for (let i = allTemplatesArray.length - specialTemplateCount; i < allTemplatesArray.length; i++) {
972
987
  specialTemplateIndices.add(i);
@@ -1711,11 +1726,11 @@ class ProTableComponent {
1711
1726
  return `pro-table-${fieldName}-form-item`;
1712
1727
  }
1713
1728
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProTableComponent, deps: [{ token: PRO_TABLE_COLUMN_REMOTE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
1714
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProTableComponent, selector: "app-pro-table", inputs: { showSearchBtn: "showSearchBtn", showClearBtn: "showClearBtn", title: "title", tableName: "tableName", multiRow: "multiRow", columns: "columns", showSearchBar: "showSearchBar", showActionBar: "showActionBar", confirmBtnText: "confirmBtnText", clearBtnText: "clearBtnText", labelWidth: "labelWidth", labelAlign: "labelAlign", formItemWidth: "formItemWidth", dataSource: "dataSource", bordered: "bordered", outerBordered: "outerBordered", showPagination: "showPagination", frontPagination: "frontPagination", scroll: "scroll", request: "request", summaryData: "summaryData", sortMode: "sortMode", showColumnSetting: "showColumnSetting", multipleSort: "multipleSort", showCheckbox: "showCheckbox", rowDisabled: "rowDisabled", autoTriggerRequest: "autoTriggerRequest", customTableRender: "customTableRender" }, outputs: { onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", onValuesChange: "onValuesChange", onResetFormBeforeReload: "onResetFormBeforeReload" }, queries: [{ propertyName: "actionBarTpl", first: true, predicate: ["actionBar"], descendants: true }, { propertyName: "imgActionBarTpl", first: true, predicate: ["ImgActionBar"], descendants: true }, { propertyName: "allTemplates", predicate: TemplateRef }], ngImport: i0, template: "<app-page-container\r\n [title]=\"title\"\r\n [showHeader]=\"showSearchBar\"\r\n ngClass=\"pro-table-container\"\r\n>\r\n <ng-template #header>\r\n <app-table-search-bar\r\n *ngIf=\"showSearchBar\"\r\n [labelWidth]=\"labelWidth\"\r\n [labelAlign]=\"labelAlign\"\r\n [formItemWidth]=\"formItemWidth\"\r\n >\r\n <ng-template #leftContent>\r\n <nz-form-item\r\n *ngFor=\"let column of _searchFiledColumns\"\r\n [ngClass]=\"getFormItemClassName(column)\"\r\n >\r\n <nz-form-label *ngIf=\"!getFieldProps(column).hideLabel\" nzNoColon>\r\n <!-- \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49label\u6A21\u677F -->\r\n <ng-container\r\n *ngIf=\"\r\n column.customLabelRender &&\r\n getLabelTemplate(column.customLabelRender);\r\n else defaultLabel\r\n \"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"getLabelTemplate(column.customLabelRender)\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: column,\r\n column: column,\r\n fieldProps: getFieldProps(column)\r\n }\"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #defaultLabel>\r\n {{ getFieldProps(column).label || column.title }}\r\n </ng-template>\r\n </nz-form-label>\r\n <nz-form-control *ngIf=\"column.valueType === 'input'\">\r\n <input\r\n nz-input\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [placeholder]=\"getFieldProps(column).placeHolder\"\r\n [disabled]=\"getFieldProps(column).disabled\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n />\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'inputPlate'\">\r\n <app-plate-input\r\n [usage]=\"'filter'\"\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n ></app-plate-input>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'select'\">\r\n <nz-select\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [nzOptions]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [nzShowSearch]=\"getFieldProps(column).showSearch\"\r\n >\r\n </nz-select>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'selectMultiple'\">\r\n <nz-select\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [nzOptions]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [nzShowSearch]=\"getFieldProps(column).showSearch\"\r\n nzMode=\"multiple\"\r\n [nzMaxTagCount]=\"2\"\r\n [nzMaxTagPlaceholder]=\"nzMaxTagPlaceholder\"\r\n [nzCustomTemplate]=\"defaultTemplate\"\r\n >\r\n <ng-template #nzMaxTagPlaceholder>\r\n +\r\n {{\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n ?.length\r\n }}\r\n </ng-template>\r\n <ng-template #defaultTemplate let-selected>\r\n {{ selected.nzLabel.length > 4 ? selected.nzLabel.substring(0, 4) + '...' : selected.nzLabel }}\r\n </ng-template>\r\n </nz-select>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'date'\">\r\n <nz-date-picker\r\n [nzShowTime]=\"getFieldProps(column).showTime\"\r\n [nzFormat]=\"getFieldProps(column).format\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzMode]=\"getFieldProps(column).mode\"\r\n ></nz-date-picker>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'checkbox'\">\r\n <nz-checkbox-group\r\n [class]=\"\r\n getFieldProps(column).noStyle\r\n ? 'pro-table-checkboxgroup-nostyle'\r\n : ''\r\n \"\r\n [(ngModel)]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n (ngModelChange)=\"\r\n handleFieldCheckBoxChange(\r\n $event,\r\n getFieldProps(column).name || column.prop\r\n )\r\n \"\r\n ></nz-checkbox-group>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'autoComplete'\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column)?.name || column.prop]\r\n \"\r\n (input)=\"handleAutoCompleteInput($event, column)\"\r\n [nzAutocomplete]=\"auto\"\r\n [disabled]=\"getFieldProps(column)?.disabled\"\r\n [placeholder]=\"getFieldProps(column)?.placeHolder\"\r\n />\r\n <nz-autocomplete\r\n [nzBackfill]=\"getFieldProps(column).backFill\"\r\n [nzDefaultActiveFirstOption]=\"\r\n getFieldProps(column).defaultActiveFirstOption\r\n \"\r\n [nzWidth]=\"getFieldProps(column).width\"\r\n #auto\r\n >\r\n <nz-auto-option\r\n *ngFor=\"let option of getAutoCompleteDataSource(column)\"\r\n [nzValue]=\"\r\n getFieldProps(column).returnFullData ? option : option.value\r\n \"\r\n [nzLabel]=\"option.label\"\r\n [nzDisabled]=\"option.disabled\"\r\n >\r\n {{ option.label }}\r\n </nz-auto-option>\r\n </nz-autocomplete>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'custom'\">\r\n <app-dynamic-search-field\r\n [component]=\"getFieldProps(column).component\"\r\n [value]=\"_searchParams[getFieldProps(column).name || column.prop]\"\r\n [props]=\"getFieldProps(column)\"\r\n (valueChange)=\"\r\n setFieldValue(getFieldProps(column).name || column.prop, $event)\r\n \"\r\n ></app-dynamic-search-field>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'inputNumber'\">\r\n <nz-input-number\r\n [style.width]=\"'100%'\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [nzFormatter]=\"getFieldProps(column).formatterPercent\"\r\n [nzParser]=\"getFieldProps(column).parserPercent\"\r\n ></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </ng-template>\r\n <ng-template #actionTextBtn>\r\n <nz-space [nzSize]=\"4\">\r\n <ng-template nzSpaceItem *ngIf=\"showSearchBtn\">\r\n <button nz-button nzType=\"primary\" (click)=\"handleSearch()\">\r\n {{ confirmBtnText }}\r\n </button>\r\n </ng-template>\r\n <ng-template nzSpaceItem *ngIf=\"showClearBtn\">\r\n <button nz-button (click)=\"handleResetForm()\">\r\n {{ clearBtnText }}\r\n </button>\r\n </ng-template>\r\n </nz-space>\r\n </ng-template>\r\n <ng-container *ngIf=\"imgActionBarTpl || showColumnSetting\">\r\n <ng-template #actionImgBtn>\r\n <nz-space>\r\n <ng-container *ngTemplateOutlet=\"imgActionBarTpl\"></ng-container>\r\n <ng-template nzSpaceItem class=\"setting-space-item\" *ngIf=\"showColumnSetting\">\r\n <span nz-tooltip nzTooltipTitle=\"\u8BBE\u7F6E\u5B57\u6BB5\">\r\n <app-colmuns-setting\r\n [columns]=\"columns\"\r\n [selectedColumns]=\"_serverColumns\"\r\n [tableName]=\"tableName\"\r\n (afterConfirm)=\"handleColumnsSettingConfirm()\"\r\n ></app-colmuns-setting>\r\n </span>\r\n </ng-template>\r\n </nz-space>\r\n </ng-template>\r\n </ng-container>\r\n </app-table-search-bar>\r\n </ng-template>\r\n\r\n <ng-template #body>\r\n <div class=\"mb-4\">\r\n <ng-container *ngIf=\"showActionBar\">\r\n <ng-container *ngTemplateOutlet=\"actionBarTpl\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"customTableRender\">\r\n <ng-container *ngTemplateOutlet=\"customTableRender\"></ng-container>\r\n </ng-container>\r\n <div [class.pro-table-auto-scroll]=\"scroll?.x === 'auto'\">\r\n <nz-table\r\n *ngIf=\"!customTableRender && _columnsReady\"\r\n #dynamicTable\r\n nzSize=\"small\"\r\n nzShowSizeChanger\r\n [nzBordered]=\"bordered\"\r\n [nzOuterBordered]=\"outerBordered\"\r\n [nzData]=\"dataSource\"\r\n [nzPageIndex]=\"_pageInfo.pageIndex\"\r\n [nzPageSize]=\"_pageInfo.pageSize\"\r\n [nzTotal]=\"_pageInfo.total\"\r\n [nzPageSizeOptions]=\"_pageInfo.pageSizeOptions\"\r\n [nzShowPagination]=\"showPagination\"\r\n [nzShowTotal]=\"totalTemplate\"\r\n [nzLoading]=\"_loading\"\r\n [nzFrontPagination]=\"frontPagination\"\r\n [nzScroll]=\"_computedScroll\"\r\n (nzPageIndexChange)=\"handlePageIndexChange($event)\"\r\n (nzPageSizeChange)=\"handlePageSizeChange($event)\"\r\n >\r\n <thead>\r\n <tr>\r\n <!-- \u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF09 -->\r\n <th\r\n *ngIf=\"showCheckbox\"\r\n [nzWidth]=\"'50px'\"\r\n [nzAlign]=\"'center'\"\r\n style=\"text-align: center\"\r\n [(nzChecked)]=\"_checkedAll\"\r\n [nzIndeterminate]=\"_indeterminate\"\r\n (nzCheckedChange)=\"toggleCheckAll($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n ></th>\r\n <th\r\n *ngFor=\"let column of _columns\"\r\n [nzWidth]=\"column.width\"\r\n [nzAlign]=\"column.align\"\r\n [nzLeft]=\"column._nzLeft\"\r\n [nzRight]=\"column._nzRight\"\r\n [nzShowSort]=\"!!column.sorter\"\r\n [nzSortOrder]=\"getSortOrder(column.prop)\"\r\n (nzSortOrderChange)=\"onSortChange(column.prop, $event)\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr\r\n style=\"cursor: pointer\"\r\n *ngFor=\"let data; let i = index; of: dynamicTable.data\"\r\n [ngClass]=\"{\r\n 'ant-table-custom-row-selected': !!getTableRowChecked(data),\r\n 'ant-table-custom-row-even': i % 2 === 0,\r\n 'ant-table-custom-row-odd': i % 2 !== 0\r\n }\"\r\n (click)=\"handleTableRowClick(data)\"\r\n (dblclick)=\"handleTableRowDbClick(data)\"\r\n >\r\n <!-- \u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF09 -->\r\n <td\r\n *ngIf=\"showCheckbox\"\r\n [nzAlign]=\"'center'\"\r\n style=\"text-align: center; width: 50px\"\r\n [(nzChecked)]=\"data.checked\"\r\n [nzDisabled]=\"isRowDisabled(data)\"\r\n (nzCheckedChange)=\"handleRowCheckedChange(data, $event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n ></td>\r\n <td\r\n *ngFor=\"let column of _columns\"\r\n [nzLeft]=\"column._nzLeft\"\r\n [nzRight]=\"column._nzRight\"\r\n [nzAlign]=\"column.align\"\r\n [ngClass]=\"{\r\n 'pro-nowrap': true\r\n }\"\r\n >\r\n <!-- \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49\u6A21\u677F -->\r\n <ng-container\r\n *ngIf=\"\r\n column.customRender && getTemplate(column.customRender);\r\n let template\r\n \"\r\n >\r\n <ng-template\r\n [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: data,\r\n data: data,\r\n column: column,\r\n index: i,\r\n pageInfo: _pageInfo\r\n }\"\r\n >\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- \u9ED8\u8BA4\u6E32\u67D3\u903B\u8F91 -->\r\n <ng-container\r\n *ngIf=\"!column.customRender || !getTemplate(column.customRender)\"\r\n >\r\n <ng-container *ngIf=\"column.ellipsis\">\r\n <div\r\n class=\"pro-ellipsis\"\r\n [title]=\"data[column.prop]\"\r\n [ngStyle]=\"{\r\n width: 'calc(' + column.width + ' - 25px)'\r\n }\"\r\n >\r\n {{ data[column.prop] }}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!column.ellipsis\">\r\n {{ data[column.prop] }}\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"summaryData && _pageInfo.total > 0\">\r\n <!-- \u6C47\u603B\u884C\u7684\u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF0C\u4F46\u4E3A\u7A7A\uFF09 -->\r\n <td\r\n *ngIf=\"showCheckbox\"\r\n style=\"font-weight: bold; border-right: 1px solid #e8e8e8\"\r\n ></td>\r\n <td\r\n *ngFor=\"let column; let i = index; of: _columns\"\r\n [nzLeft]=\"column._nzLeft\"\r\n [nzRight]=\"column._nzRight\"\r\n style=\"font-weight: bold; border-right: 1px solid #e8e8e8\"\r\n [nzAlign]=\"column.align\"\r\n >\r\n <span *ngIf=\"i === 0\">\u603B\u8BA1</span>\r\n <ng-container *ngIf=\"i !== 0 && column.summary\">\r\n {{\r\n column.summary?.format\r\n ? column.summary?.format(\r\n summaryData[column.summary?.name || column.prop]\r\n )\r\n : summaryData[column.summary?.name || column.prop]\r\n }}\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </tbody>\r\n <ng-template #totalTemplate let-total\r\n >\u5171 {{ _pageInfo.total }} \u6761\u8BB0\u5F55</ng-template\r\n >\r\n </nz-table>\r\n </div>\r\n </ng-template>\r\n</app-page-container>\r\n", styles: [".pro-ellipsis{overflow:hidden;text-overflow:ellipsis}.pro-nowrap{white-space:nowrap}::ng-deep .setting-space-item{margin-right:0!important}::ng-deep .pro-table-checkboxgroup-nostyle{white-space:nowrap}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body table{border-collapse:separate;border-spacing:0}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr>td{border-right:1px solid #e8e8e8!important}::ng-deep .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>thead>tr>th{border-right:1px solid #e8e8e8!important;border-bottom:1px solid #e8e8e8!important;white-space:nowrap}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-thead>tr>th:first-child,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr>td:first-child{border-left:none!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-cell-fix-left,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-cell-fix-right{border-right:1px solid #e8e8e8!important;border-bottom:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-header .ant-table-thead>tr>th.ant-table-cell-fix-left,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-header .ant-table-thead>tr>th.ant-table-cell-fix-right{border-right:1px solid #e8e8e8!important;border-bottom:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-header .ant-table-thead>tr>th{border-top:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-thead>tr>th:last-child,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr>td:last-child{border-right:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr:last-child>td{border-bottom:1px solid #e8e8e8!important}::ng-deep .table-search-bar-left .ant-form-item{margin-bottom:4px}::ng-deep .table-search-bar-left .ant-form-item .ant-form-item-label>label{color:#5a5a5a}::ng-deep .pro-table-container .page-container-body{padding:8px 0 0!important}::ng-deep .pro-table-auto-scroll .ant-table-content,::ng-deep .pro-table-auto-scroll .ant-table-body{overflow-x:auto!important}::ng-deep .pro-table-auto-scroll .ant-table-content table,::ng-deep .pro-table-auto-scroll .ant-table-body table{table-layout:auto!important}::ng-deep .pro-table-auto-scroll .ant-table-content table td,::ng-deep .pro-table-auto-scroll .ant-table-body table td{white-space:nowrap}::ng-deep .ant-table-cell-fix-left-last{box-shadow:6px 0 8px -4px #00000026;clip-path:inset(0px -8px 0px 0px)}::ng-deep .ant-table-cell-fix-right-first{box-shadow:-6px 0 8px -4px #00000026;clip-path:inset(0px 0px 0px -8px)}::ng-deep .ant-table-tbody>tr:hover>td.ant-table-cell-fix-left,::ng-deep .ant-table-tbody>tr:hover>td.ant-table-cell-fix-right,::ng-deep .ant-table-tbody>tr.ant-table-custom-row-selected>td.ant-table-cell-fix-left,::ng-deep .ant-table-tbody>tr.ant-table-custom-row-selected>td.ant-table-cell-fix-right{background:#e8f0fb}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i3.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i4$1.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i4$1.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i4$1.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "component", type: i5$2.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "component", type: i2$1.NzSpaceComponent, selector: "nz-space, [nz-space]", inputs: ["nzDirection", "nzAlign", "nzSplit", "nzWrap", "nzSize"], exportAs: ["NzSpace"] }, { kind: "directive", type: i2$1.NzSpaceItemDirective, selector: "[nzSpaceItem]" }, { kind: "directive", type: i3$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i8$1.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i5$1.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i10.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: PageContainerComponent, selector: "app-page-container", inputs: ["title", "showHeader", "bodyStyle", "headerStyle"] }, { kind: "component", type: TableSearchBarComponent, selector: "app-table-search-bar", inputs: ["leftColSpan", "rightColSpan", "labelWidth", "labelAlign", "formItemWidth"] }, { kind: "component", type: i13.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "component", type: i13.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i13.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i13.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i13.NzTdAddOnComponent, selector: "td[nzChecked], td[nzDisabled], td[nzIndeterminate], td[nzIndentSize], td[nzExpand], td[nzShowExpand], td[nzShowCheckbox]", inputs: ["nzChecked", "nzDisabled", "nzIndeterminate", "nzIndentSize", "nzShowExpand", "nzShowCheckbox", "nzExpand"], outputs: ["nzCheckedChange", "nzExpandChange"] }, { kind: "component", type: i13.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i13.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i13.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i13.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "directive", type: i13.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "component", type: i13.NzThSelectionComponent, selector: "th[nzSelections],th[nzChecked],th[nzShowCheckbox],th[nzShowRowSelection]", inputs: ["nzSelections", "nzChecked", "nzDisabled", "nzIndeterminate", "nzShowCheckbox", "nzShowRowSelection"], outputs: ["nzCheckedChange"] }, { kind: "component", type: PlateInputComponent, selector: "app-plate-input", inputs: ["usage"] }, { kind: "component", type: i15.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "component", type: i7.NzCheckboxGroupComponent, selector: "nz-checkbox-group", inputs: ["nzDisabled"], exportAs: ["nzCheckboxGroup"] }, { kind: "component", type: i17.NzAutocompleteComponent, selector: "nz-autocomplete", inputs: ["nzWidth", "nzOverlayClassName", "nzOverlayStyle", "nzDefaultActiveFirstOption", "nzBackfill", "compareWith", "nzDataSource"], outputs: ["selectionChange"], exportAs: ["nzAutocomplete"] }, { kind: "component", type: i17.NzAutocompleteOptionComponent, selector: "nz-auto-option", inputs: ["nzValue", "nzLabel", "nzDisabled"], outputs: ["selectionChange", "mouseEntered"], exportAs: ["nzAutoOption"] }, { kind: "directive", type: i17.NzAutocompleteTriggerDirective, selector: "input[nzAutocomplete], textarea[nzAutocomplete]", inputs: ["nzAutocomplete"], exportAs: ["nzAutocompleteTrigger"] }, { kind: "component", type: i18.NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzSize", "nzMin", "nzMax", "nzParser", "nzPrecision", "nzPrecisionMode", "nzPlaceHolder", "nzStatus", "nzStep", "nzInputMode", "nzId", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBorderless", "nzFormatter"], outputs: ["nzBlur", "nzFocus"], exportAs: ["nzInputNumber"] }, { kind: "directive", type: i19.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "component", type: ColmunsSettingComponent, selector: "app-colmuns-setting", inputs: ["columns", "selectedColumns", "tableName"], outputs: ["afterConfirm"] }, { kind: "component", type: DynamicSearchFieldComponent, selector: "app-dynamic-search-field", inputs: ["component", "value", "props"], outputs: ["valueChange"] }] }); }
1729
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProTableComponent, selector: "app-pro-table", inputs: { showSearchBtn: "showSearchBtn", showClearBtn: "showClearBtn", title: "title", bodyStyle: "bodyStyle", tableName: "tableName", multiRow: "multiRow", columns: "columns", showSearchBar: "showSearchBar", showActionBar: "showActionBar", confirmBtnText: "confirmBtnText", clearBtnText: "clearBtnText", labelWidth: "labelWidth", labelAlign: "labelAlign", searchColCount: "searchColCount", dataSource: "dataSource", bordered: "bordered", outerBordered: "outerBordered", showPagination: "showPagination", frontPagination: "frontPagination", scroll: "scroll", request: "request", summaryData: "summaryData", sortMode: "sortMode", showColumnSetting: "showColumnSetting", multipleSort: "multipleSort", showCheckbox: "showCheckbox", rowDisabled: "rowDisabled", autoTriggerRequest: "autoTriggerRequest", customTableRender: "customTableRender" }, outputs: { onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", onValuesChange: "onValuesChange", onResetFormBeforeReload: "onResetFormBeforeReload" }, queries: [{ propertyName: "customContentTpl", first: true, predicate: ["customContent"], descendants: true }, { propertyName: "actionBarTpl", first: true, predicate: ["actionBar"], descendants: true }, { propertyName: "imgActionBarTpl", first: true, predicate: ["ImgActionBar"], descendants: true }, { propertyName: "allTemplates", predicate: TemplateRef }], ngImport: i0, template: "<app-page-container\r\n [title]=\"title\"\r\n [showHeader]=\"showSearchBar\"\r\n [bodyStyle]=\"bodyStyle\"\r\n ngClass=\"pro-table-container\"\r\n>\r\n <!-- \u589E\u52A0\u81EA\u5B9A\u4E49\u5185\u5BB9\u533A-->\r\n <ng-template #customContent>\r\n <ng-container\r\n *ngIf=\"customContentTpl\"\r\n [ngTemplateOutlet]=\"customContentTpl\"\r\n ></ng-container>\r\n </ng-template>\r\n\r\n <ng-template #header>\r\n <app-table-search-bar\r\n *ngIf=\"showSearchBar\"\r\n [labelWidth]=\"labelWidth\"\r\n [labelAlign]=\"labelAlign\"\r\n [searchColCount]=\"tableSearchColCount\"\r\n >\r\n <ng-template #leftContent>\r\n <nz-form-item\r\n *ngFor=\"let column of _searchFiledColumns\"\r\n [ngClass]=\"getFormItemClassName(column)\"\r\n >\r\n <nz-form-label *ngIf=\"!getFieldProps(column).hideLabel\" nzNoColon>\r\n <!-- \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49label\u6A21\u677F -->\r\n <ng-container\r\n *ngIf=\"\r\n column.customLabelRender &&\r\n getLabelTemplate(column.customLabelRender);\r\n else defaultLabel\r\n \"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"getLabelTemplate(column.customLabelRender)\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: column,\r\n column: column,\r\n fieldProps: getFieldProps(column)\r\n }\"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #defaultLabel>\r\n {{ getFieldProps(column).label || column.title }}\r\n </ng-template>\r\n </nz-form-label>\r\n <nz-form-control *ngIf=\"column.valueType === 'input'\">\r\n <input\r\n nz-input\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [placeholder]=\"getFieldProps(column).placeHolder\"\r\n [disabled]=\"getFieldProps(column).disabled\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n />\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'inputPlate'\">\r\n <app-plate-input\r\n [usage]=\"'filter'\"\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n ></app-plate-input>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'select'\">\r\n <nz-select\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [nzOptions]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [nzShowSearch]=\"getFieldProps(column).showSearch\"\r\n >\r\n </nz-select>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'selectMultiple'\">\r\n <nz-select\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [nzOptions]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [nzShowSearch]=\"getFieldProps(column).showSearch\"\r\n nzMode=\"multiple\"\r\n [nzMaxTagCount]=\"2\"\r\n [nzMaxTagPlaceholder]=\"nzMaxTagPlaceholder\"\r\n [nzCustomTemplate]=\"defaultTemplate\"\r\n >\r\n <ng-template #nzMaxTagPlaceholder>\r\n +\r\n {{\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n ?.length\r\n }}\r\n </ng-template>\r\n <ng-template #defaultTemplate let-selected>\r\n {{\r\n selected.nzLabel.length > 4\r\n ? selected.nzLabel.substring(0, 4) + \"...\"\r\n : selected.nzLabel\r\n }}\r\n </ng-template>\r\n </nz-select>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'date'\">\r\n <nz-date-picker\r\n [nzShowTime]=\"getFieldProps(column).showTime\"\r\n [nzFormat]=\"getFieldProps(column).format\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzMode]=\"getFieldProps(column).mode\"\r\n ></nz-date-picker>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'checkbox'\">\r\n <nz-checkbox-group\r\n [class]=\"\r\n getFieldProps(column).noStyle\r\n ? 'pro-table-checkboxgroup-nostyle'\r\n : ''\r\n \"\r\n [(ngModel)]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n (ngModelChange)=\"\r\n handleFieldCheckBoxChange(\r\n $event,\r\n getFieldProps(column).name || column.prop\r\n )\r\n \"\r\n ></nz-checkbox-group>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'autoComplete'\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column)?.name || column.prop]\r\n \"\r\n (input)=\"handleAutoCompleteInput($event, column)\"\r\n [nzAutocomplete]=\"auto\"\r\n [disabled]=\"getFieldProps(column)?.disabled\"\r\n [placeholder]=\"getFieldProps(column)?.placeHolder\"\r\n />\r\n <nz-autocomplete\r\n [nzBackfill]=\"getFieldProps(column).backFill\"\r\n [nzDefaultActiveFirstOption]=\"\r\n getFieldProps(column).defaultActiveFirstOption\r\n \"\r\n [nzWidth]=\"getFieldProps(column).width\"\r\n #auto\r\n >\r\n <nz-auto-option\r\n *ngFor=\"let option of getAutoCompleteDataSource(column)\"\r\n [nzValue]=\"\r\n getFieldProps(column).returnFullData ? option : option.value\r\n \"\r\n [nzLabel]=\"option.label\"\r\n [nzDisabled]=\"option.disabled\"\r\n >\r\n {{ option.label }}\r\n </nz-auto-option>\r\n </nz-autocomplete>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'custom'\">\r\n <app-dynamic-search-field\r\n [component]=\"getFieldProps(column).component\"\r\n [value]=\"_searchParams[getFieldProps(column).name || column.prop]\"\r\n [props]=\"getFieldProps(column)\"\r\n (valueChange)=\"\r\n setFieldValue(getFieldProps(column).name || column.prop, $event)\r\n \"\r\n ></app-dynamic-search-field>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'inputNumber'\">\r\n <nz-input-number\r\n [style.width]=\"'100%'\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [nzFormatter]=\"getFieldProps(column).formatterPercent\"\r\n [nzParser]=\"getFieldProps(column).parserPercent\"\r\n ></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </ng-template>\r\n <ng-template #actionTextBtn>\r\n <nz-space [nzSize]=\"4\">\r\n <ng-template nzSpaceItem *ngIf=\"showSearchBtn\">\r\n <button nz-button nzType=\"primary\" (click)=\"handleSearch()\">\r\n {{ confirmBtnText }}\r\n </button>\r\n </ng-template>\r\n <ng-template nzSpaceItem *ngIf=\"showClearBtn\">\r\n <button nz-button (click)=\"handleResetForm()\">\r\n {{ clearBtnText }}\r\n </button>\r\n </ng-template>\r\n </nz-space>\r\n </ng-template>\r\n <ng-container *ngIf=\"imgActionBarTpl || showColumnSetting\">\r\n <ng-template #actionImgBtn>\r\n <nz-space>\r\n <ng-container *ngTemplateOutlet=\"imgActionBarTpl\"></ng-container>\r\n <ng-template\r\n nzSpaceItem\r\n class=\"setting-space-item\"\r\n *ngIf=\"showColumnSetting\"\r\n >\r\n <span nz-tooltip nzTooltipTitle=\"\u8BBE\u7F6E\u5B57\u6BB5\">\r\n <app-colmuns-setting\r\n [columns]=\"columns\"\r\n [selectedColumns]=\"_serverColumns\"\r\n [tableName]=\"tableName\"\r\n (afterConfirm)=\"handleColumnsSettingConfirm()\"\r\n ></app-colmuns-setting>\r\n </span>\r\n </ng-template>\r\n </nz-space>\r\n </ng-template>\r\n </ng-container>\r\n </app-table-search-bar>\r\n </ng-template>\r\n\r\n <ng-template #body>\r\n <div class=\"mb-4\">\r\n <ng-container *ngIf=\"showActionBar\">\r\n <ng-container *ngTemplateOutlet=\"actionBarTpl\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"customTableRender\">\r\n <ng-container *ngTemplateOutlet=\"customTableRender\"></ng-container>\r\n </ng-container>\r\n <div [class.pro-table-auto-scroll]=\"scroll?.x === 'auto'\">\r\n <nz-table\r\n *ngIf=\"!customTableRender && _columnsReady\"\r\n #dynamicTable\r\n nzSize=\"small\"\r\n nzShowSizeChanger\r\n [nzBordered]=\"bordered\"\r\n [nzOuterBordered]=\"outerBordered\"\r\n [nzData]=\"dataSource\"\r\n [nzPageIndex]=\"_pageInfo.pageIndex\"\r\n [nzPageSize]=\"_pageInfo.pageSize\"\r\n [nzTotal]=\"_pageInfo.total\"\r\n [nzPageSizeOptions]=\"_pageInfo.pageSizeOptions\"\r\n [nzShowPagination]=\"showPagination\"\r\n [nzShowTotal]=\"totalTemplate\"\r\n [nzLoading]=\"_loading\"\r\n [nzFrontPagination]=\"frontPagination\"\r\n [nzScroll]=\"_computedScroll\"\r\n (nzPageIndexChange)=\"handlePageIndexChange($event)\"\r\n (nzPageSizeChange)=\"handlePageSizeChange($event)\"\r\n >\r\n <thead>\r\n <tr>\r\n <!-- \u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF09 -->\r\n <th\r\n *ngIf=\"showCheckbox\"\r\n [nzWidth]=\"'50px'\"\r\n [nzAlign]=\"'center'\"\r\n style=\"text-align: center\"\r\n [(nzChecked)]=\"_checkedAll\"\r\n [nzIndeterminate]=\"_indeterminate\"\r\n (nzCheckedChange)=\"toggleCheckAll($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n ></th>\r\n <th\r\n *ngFor=\"let column of _columns\"\r\n [nzWidth]=\"column.width\"\r\n [nzAlign]=\"column.align\"\r\n [nzLeft]=\"column._nzLeft\"\r\n [nzRight]=\"column._nzRight\"\r\n [nzShowSort]=\"!!column.sorter\"\r\n [nzSortOrder]=\"getSortOrder(column.prop)\"\r\n (nzSortOrderChange)=\"onSortChange(column.prop, $event)\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr\r\n style=\"cursor: pointer\"\r\n *ngFor=\"let data; let i = index; of: dynamicTable.data\"\r\n [ngClass]=\"{\r\n 'ant-table-custom-row-selected': !!getTableRowChecked(data),\r\n 'ant-table-custom-row-even': i % 2 === 0,\r\n 'ant-table-custom-row-odd': i % 2 !== 0\r\n }\"\r\n (click)=\"handleTableRowClick(data)\"\r\n (dblclick)=\"handleTableRowDbClick(data)\"\r\n >\r\n <!-- \u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF09 -->\r\n <td\r\n *ngIf=\"showCheckbox\"\r\n [nzAlign]=\"'center'\"\r\n style=\"text-align: center; width: 50px\"\r\n [(nzChecked)]=\"data.checked\"\r\n [nzDisabled]=\"isRowDisabled(data)\"\r\n (nzCheckedChange)=\"handleRowCheckedChange(data, $event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n ></td>\r\n <td\r\n *ngFor=\"let column of _columns\"\r\n [nzLeft]=\"column._nzLeft\"\r\n [nzRight]=\"column._nzRight\"\r\n [nzAlign]=\"column.align\"\r\n [ngClass]=\"{\r\n 'pro-nowrap': true\r\n }\"\r\n >\r\n <!-- \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49\u6A21\u677F -->\r\n <ng-container\r\n *ngIf=\"\r\n column.customRender && getTemplate(column.customRender);\r\n let template\r\n \"\r\n >\r\n <ng-template\r\n [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: data,\r\n data: data,\r\n column: column,\r\n index: i,\r\n pageInfo: _pageInfo\r\n }\"\r\n >\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- \u9ED8\u8BA4\u6E32\u67D3\u903B\u8F91 -->\r\n <ng-container\r\n *ngIf=\"\r\n !column.customRender || !getTemplate(column.customRender)\r\n \"\r\n >\r\n <ng-container *ngIf=\"column.ellipsis\">\r\n <div\r\n class=\"pro-ellipsis\"\r\n [title]=\"data[column.prop]\"\r\n [ngStyle]=\"{\r\n width: 'calc(' + column.width + ' - 25px)'\r\n }\"\r\n >\r\n {{ data[column.prop] }}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!column.ellipsis\">\r\n {{ data[column.prop] }}\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"summaryData && _pageInfo.total > 0\">\r\n <!-- \u6C47\u603B\u884C\u7684\u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF0C\u4F46\u4E3A\u7A7A\uFF09 -->\r\n <td\r\n *ngIf=\"showCheckbox\"\r\n style=\"font-weight: bold; border-right: 1px solid #e8e8e8\"\r\n ></td>\r\n <td\r\n *ngFor=\"let column; let i = index; of: _columns\"\r\n [nzLeft]=\"column._nzLeft\"\r\n [nzRight]=\"column._nzRight\"\r\n style=\"font-weight: bold; border-right: 1px solid #e8e8e8\"\r\n [nzAlign]=\"column.align\"\r\n >\r\n <span *ngIf=\"i === 0\">\u603B\u8BA1</span>\r\n <ng-container *ngIf=\"i !== 0 && column.summary\">\r\n {{\r\n column.summary?.format\r\n ? column.summary?.format(\r\n summaryData[column.summary?.name || column.prop]\r\n )\r\n : summaryData[column.summary?.name || column.prop]\r\n }}\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </tbody>\r\n <ng-template #totalTemplate let-total\r\n >\u5171 {{ _pageInfo.total }} \u6761\u8BB0\u5F55</ng-template\r\n >\r\n </nz-table>\r\n </div>\r\n </ng-template>\r\n</app-page-container>\r\n", styles: [".pro-ellipsis{overflow:hidden;text-overflow:ellipsis}.pro-nowrap{white-space:nowrap}::ng-deep .setting-space-item{margin-right:0!important}::ng-deep .pro-table-checkboxgroup-nostyle{white-space:nowrap}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body table{border-collapse:separate;border-spacing:0}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr>td{border-right:1px solid #e8e8e8!important}::ng-deep .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>thead>tr>th{border-right:1px solid #e8e8e8!important;border-bottom:1px solid #e8e8e8!important;white-space:nowrap}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-thead>tr>th:first-child,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr>td:first-child{border-left:none!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-cell-fix-left,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-cell-fix-right{border-right:1px solid #e8e8e8!important;border-bottom:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-header .ant-table-thead>tr>th.ant-table-cell-fix-left,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-header .ant-table-thead>tr>th.ant-table-cell-fix-right{border-right:1px solid #e8e8e8!important;border-bottom:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-header .ant-table-thead>tr>th{border-top:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-thead>tr>th:last-child,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr>td:last-child{border-right:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr:last-child>td{border-bottom:1px solid #e8e8e8!important}::ng-deep .table-search-bar-left .ant-form-item{margin-bottom:4px}::ng-deep .table-search-bar-left .ant-form-item .ant-form-item-label>label{color:#5a5a5a}::ng-deep .pro-table-container .page-container-body{padding:8px 0 0!important}::ng-deep .pro-table-auto-scroll .ant-table-content,::ng-deep .pro-table-auto-scroll .ant-table-body{overflow-x:auto!important}::ng-deep .pro-table-auto-scroll .ant-table-content table,::ng-deep .pro-table-auto-scroll .ant-table-body table{table-layout:auto!important}::ng-deep .pro-table-auto-scroll .ant-table-content table td,::ng-deep .pro-table-auto-scroll .ant-table-body table td{white-space:nowrap}::ng-deep .ant-table-cell-fix-left-last{box-shadow:6px 0 8px -4px #00000026;clip-path:inset(0px -8px 0px 0px)}::ng-deep .ant-table-cell-fix-right-first{box-shadow:-6px 0 8px -4px #00000026;clip-path:inset(0px 0px 0px -8px)}::ng-deep .ant-table-tbody>tr:hover>td.ant-table-cell-fix-left,::ng-deep .ant-table-tbody>tr:hover>td.ant-table-cell-fix-right,::ng-deep .ant-table-tbody>tr.ant-table-custom-row-selected>td.ant-table-cell-fix-left,::ng-deep .ant-table-tbody>tr.ant-table-custom-row-selected>td.ant-table-cell-fix-right{background:#e8f0fb}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i3.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i4$1.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i4$1.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i4$1.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "component", type: i5$2.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "component", type: i2$1.NzSpaceComponent, selector: "nz-space, [nz-space]", inputs: ["nzDirection", "nzAlign", "nzSplit", "nzWrap", "nzSize"], exportAs: ["NzSpace"] }, { kind: "directive", type: i2$1.NzSpaceItemDirective, selector: "[nzSpaceItem]" }, { kind: "directive", type: i3$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i8$1.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i5$1.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i10.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: PageContainerComponent, selector: "app-page-container", inputs: ["title", "showHeader", "bodyStyle", "headerStyle"] }, { kind: "component", type: TableSearchBarComponent, selector: "app-table-search-bar", inputs: ["labelWidth", "labelAlign", "searchColCount"] }, { kind: "component", type: i13.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzCustomColumn", "nzPaginationPosition", "nzScroll", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange", "nzCustomColumnChange"], exportAs: ["nzTable"] }, { kind: "component", type: i13.NzThAddOnComponent, selector: "th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]", inputs: ["nzColumnKey", "nzFilterMultiple", "nzSortOrder", "nzSortPriority", "nzSortDirections", "nzFilters", "nzSortFn", "nzFilterFn", "nzShowSort", "nzShowFilter", "nzCustomFilter"], outputs: ["nzCheckedChange", "nzSortOrderChange", "nzFilterChange"] }, { kind: "directive", type: i13.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { kind: "directive", type: i13.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { kind: "component", type: i13.NzTdAddOnComponent, selector: "td[nzChecked], td[nzDisabled], td[nzIndeterminate], td[nzIndentSize], td[nzExpand], td[nzShowExpand], td[nzShowCheckbox]", inputs: ["nzChecked", "nzDisabled", "nzIndeterminate", "nzIndentSize", "nzShowExpand", "nzShowCheckbox", "nzExpand"], outputs: ["nzCheckedChange", "nzExpandChange"] }, { kind: "component", type: i13.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { kind: "component", type: i13.NzTbodyComponent, selector: "tbody" }, { kind: "directive", type: i13.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { kind: "directive", type: i13.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { kind: "directive", type: i13.NzCellAlignDirective, selector: "th[nzAlign],td[nzAlign]", inputs: ["nzAlign"] }, { kind: "component", type: i13.NzThSelectionComponent, selector: "th[nzSelections],th[nzChecked],th[nzShowCheckbox],th[nzShowRowSelection]", inputs: ["nzSelections", "nzChecked", "nzDisabled", "nzIndeterminate", "nzShowCheckbox", "nzShowRowSelection"], outputs: ["nzCheckedChange"] }, { kind: "component", type: PlateInputComponent, selector: "app-plate-input", inputs: ["usage"] }, { kind: "component", type: i15.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "component", type: i7.NzCheckboxGroupComponent, selector: "nz-checkbox-group", inputs: ["nzDisabled"], exportAs: ["nzCheckboxGroup"] }, { kind: "component", type: i17.NzAutocompleteComponent, selector: "nz-autocomplete", inputs: ["nzWidth", "nzOverlayClassName", "nzOverlayStyle", "nzDefaultActiveFirstOption", "nzBackfill", "compareWith", "nzDataSource"], outputs: ["selectionChange"], exportAs: ["nzAutocomplete"] }, { kind: "component", type: i17.NzAutocompleteOptionComponent, selector: "nz-auto-option", inputs: ["nzValue", "nzLabel", "nzDisabled"], outputs: ["selectionChange", "mouseEntered"], exportAs: ["nzAutoOption"] }, { kind: "directive", type: i17.NzAutocompleteTriggerDirective, selector: "input[nzAutocomplete], textarea[nzAutocomplete]", inputs: ["nzAutocomplete"], exportAs: ["nzAutocompleteTrigger"] }, { kind: "component", type: i18.NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzSize", "nzMin", "nzMax", "nzParser", "nzPrecision", "nzPrecisionMode", "nzPlaceHolder", "nzStatus", "nzStep", "nzInputMode", "nzId", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBorderless", "nzFormatter"], outputs: ["nzBlur", "nzFocus"], exportAs: ["nzInputNumber"] }, { kind: "directive", type: i19.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "component", type: ColmunsSettingComponent, selector: "app-colmuns-setting", inputs: ["columns", "selectedColumns", "tableName"], outputs: ["afterConfirm"] }, { kind: "component", type: DynamicSearchFieldComponent, selector: "app-dynamic-search-field", inputs: ["component", "value", "props"], outputs: ["valueChange"] }] }); }
1715
1730
  }
1716
1731
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProTableComponent, decorators: [{
1717
1732
  type: Component,
1718
- args: [{ selector: "app-pro-table", template: "<app-page-container\r\n [title]=\"title\"\r\n [showHeader]=\"showSearchBar\"\r\n ngClass=\"pro-table-container\"\r\n>\r\n <ng-template #header>\r\n <app-table-search-bar\r\n *ngIf=\"showSearchBar\"\r\n [labelWidth]=\"labelWidth\"\r\n [labelAlign]=\"labelAlign\"\r\n [formItemWidth]=\"formItemWidth\"\r\n >\r\n <ng-template #leftContent>\r\n <nz-form-item\r\n *ngFor=\"let column of _searchFiledColumns\"\r\n [ngClass]=\"getFormItemClassName(column)\"\r\n >\r\n <nz-form-label *ngIf=\"!getFieldProps(column).hideLabel\" nzNoColon>\r\n <!-- \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49label\u6A21\u677F -->\r\n <ng-container\r\n *ngIf=\"\r\n column.customLabelRender &&\r\n getLabelTemplate(column.customLabelRender);\r\n else defaultLabel\r\n \"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"getLabelTemplate(column.customLabelRender)\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: column,\r\n column: column,\r\n fieldProps: getFieldProps(column)\r\n }\"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #defaultLabel>\r\n {{ getFieldProps(column).label || column.title }}\r\n </ng-template>\r\n </nz-form-label>\r\n <nz-form-control *ngIf=\"column.valueType === 'input'\">\r\n <input\r\n nz-input\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [placeholder]=\"getFieldProps(column).placeHolder\"\r\n [disabled]=\"getFieldProps(column).disabled\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n />\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'inputPlate'\">\r\n <app-plate-input\r\n [usage]=\"'filter'\"\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n ></app-plate-input>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'select'\">\r\n <nz-select\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [nzOptions]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [nzShowSearch]=\"getFieldProps(column).showSearch\"\r\n >\r\n </nz-select>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'selectMultiple'\">\r\n <nz-select\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [nzOptions]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [nzShowSearch]=\"getFieldProps(column).showSearch\"\r\n nzMode=\"multiple\"\r\n [nzMaxTagCount]=\"2\"\r\n [nzMaxTagPlaceholder]=\"nzMaxTagPlaceholder\"\r\n [nzCustomTemplate]=\"defaultTemplate\"\r\n >\r\n <ng-template #nzMaxTagPlaceholder>\r\n +\r\n {{\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n ?.length\r\n }}\r\n </ng-template>\r\n <ng-template #defaultTemplate let-selected>\r\n {{ selected.nzLabel.length > 4 ? selected.nzLabel.substring(0, 4) + '...' : selected.nzLabel }}\r\n </ng-template>\r\n </nz-select>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'date'\">\r\n <nz-date-picker\r\n [nzShowTime]=\"getFieldProps(column).showTime\"\r\n [nzFormat]=\"getFieldProps(column).format\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzMode]=\"getFieldProps(column).mode\"\r\n ></nz-date-picker>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'checkbox'\">\r\n <nz-checkbox-group\r\n [class]=\"\r\n getFieldProps(column).noStyle\r\n ? 'pro-table-checkboxgroup-nostyle'\r\n : ''\r\n \"\r\n [(ngModel)]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n (ngModelChange)=\"\r\n handleFieldCheckBoxChange(\r\n $event,\r\n getFieldProps(column).name || column.prop\r\n )\r\n \"\r\n ></nz-checkbox-group>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'autoComplete'\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column)?.name || column.prop]\r\n \"\r\n (input)=\"handleAutoCompleteInput($event, column)\"\r\n [nzAutocomplete]=\"auto\"\r\n [disabled]=\"getFieldProps(column)?.disabled\"\r\n [placeholder]=\"getFieldProps(column)?.placeHolder\"\r\n />\r\n <nz-autocomplete\r\n [nzBackfill]=\"getFieldProps(column).backFill\"\r\n [nzDefaultActiveFirstOption]=\"\r\n getFieldProps(column).defaultActiveFirstOption\r\n \"\r\n [nzWidth]=\"getFieldProps(column).width\"\r\n #auto\r\n >\r\n <nz-auto-option\r\n *ngFor=\"let option of getAutoCompleteDataSource(column)\"\r\n [nzValue]=\"\r\n getFieldProps(column).returnFullData ? option : option.value\r\n \"\r\n [nzLabel]=\"option.label\"\r\n [nzDisabled]=\"option.disabled\"\r\n >\r\n {{ option.label }}\r\n </nz-auto-option>\r\n </nz-autocomplete>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'custom'\">\r\n <app-dynamic-search-field\r\n [component]=\"getFieldProps(column).component\"\r\n [value]=\"_searchParams[getFieldProps(column).name || column.prop]\"\r\n [props]=\"getFieldProps(column)\"\r\n (valueChange)=\"\r\n setFieldValue(getFieldProps(column).name || column.prop, $event)\r\n \"\r\n ></app-dynamic-search-field>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'inputNumber'\">\r\n <nz-input-number\r\n [style.width]=\"'100%'\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [nzFormatter]=\"getFieldProps(column).formatterPercent\"\r\n [nzParser]=\"getFieldProps(column).parserPercent\"\r\n ></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </ng-template>\r\n <ng-template #actionTextBtn>\r\n <nz-space [nzSize]=\"4\">\r\n <ng-template nzSpaceItem *ngIf=\"showSearchBtn\">\r\n <button nz-button nzType=\"primary\" (click)=\"handleSearch()\">\r\n {{ confirmBtnText }}\r\n </button>\r\n </ng-template>\r\n <ng-template nzSpaceItem *ngIf=\"showClearBtn\">\r\n <button nz-button (click)=\"handleResetForm()\">\r\n {{ clearBtnText }}\r\n </button>\r\n </ng-template>\r\n </nz-space>\r\n </ng-template>\r\n <ng-container *ngIf=\"imgActionBarTpl || showColumnSetting\">\r\n <ng-template #actionImgBtn>\r\n <nz-space>\r\n <ng-container *ngTemplateOutlet=\"imgActionBarTpl\"></ng-container>\r\n <ng-template nzSpaceItem class=\"setting-space-item\" *ngIf=\"showColumnSetting\">\r\n <span nz-tooltip nzTooltipTitle=\"\u8BBE\u7F6E\u5B57\u6BB5\">\r\n <app-colmuns-setting\r\n [columns]=\"columns\"\r\n [selectedColumns]=\"_serverColumns\"\r\n [tableName]=\"tableName\"\r\n (afterConfirm)=\"handleColumnsSettingConfirm()\"\r\n ></app-colmuns-setting>\r\n </span>\r\n </ng-template>\r\n </nz-space>\r\n </ng-template>\r\n </ng-container>\r\n </app-table-search-bar>\r\n </ng-template>\r\n\r\n <ng-template #body>\r\n <div class=\"mb-4\">\r\n <ng-container *ngIf=\"showActionBar\">\r\n <ng-container *ngTemplateOutlet=\"actionBarTpl\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"customTableRender\">\r\n <ng-container *ngTemplateOutlet=\"customTableRender\"></ng-container>\r\n </ng-container>\r\n <div [class.pro-table-auto-scroll]=\"scroll?.x === 'auto'\">\r\n <nz-table\r\n *ngIf=\"!customTableRender && _columnsReady\"\r\n #dynamicTable\r\n nzSize=\"small\"\r\n nzShowSizeChanger\r\n [nzBordered]=\"bordered\"\r\n [nzOuterBordered]=\"outerBordered\"\r\n [nzData]=\"dataSource\"\r\n [nzPageIndex]=\"_pageInfo.pageIndex\"\r\n [nzPageSize]=\"_pageInfo.pageSize\"\r\n [nzTotal]=\"_pageInfo.total\"\r\n [nzPageSizeOptions]=\"_pageInfo.pageSizeOptions\"\r\n [nzShowPagination]=\"showPagination\"\r\n [nzShowTotal]=\"totalTemplate\"\r\n [nzLoading]=\"_loading\"\r\n [nzFrontPagination]=\"frontPagination\"\r\n [nzScroll]=\"_computedScroll\"\r\n (nzPageIndexChange)=\"handlePageIndexChange($event)\"\r\n (nzPageSizeChange)=\"handlePageSizeChange($event)\"\r\n >\r\n <thead>\r\n <tr>\r\n <!-- \u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF09 -->\r\n <th\r\n *ngIf=\"showCheckbox\"\r\n [nzWidth]=\"'50px'\"\r\n [nzAlign]=\"'center'\"\r\n style=\"text-align: center\"\r\n [(nzChecked)]=\"_checkedAll\"\r\n [nzIndeterminate]=\"_indeterminate\"\r\n (nzCheckedChange)=\"toggleCheckAll($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n ></th>\r\n <th\r\n *ngFor=\"let column of _columns\"\r\n [nzWidth]=\"column.width\"\r\n [nzAlign]=\"column.align\"\r\n [nzLeft]=\"column._nzLeft\"\r\n [nzRight]=\"column._nzRight\"\r\n [nzShowSort]=\"!!column.sorter\"\r\n [nzSortOrder]=\"getSortOrder(column.prop)\"\r\n (nzSortOrderChange)=\"onSortChange(column.prop, $event)\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr\r\n style=\"cursor: pointer\"\r\n *ngFor=\"let data; let i = index; of: dynamicTable.data\"\r\n [ngClass]=\"{\r\n 'ant-table-custom-row-selected': !!getTableRowChecked(data),\r\n 'ant-table-custom-row-even': i % 2 === 0,\r\n 'ant-table-custom-row-odd': i % 2 !== 0\r\n }\"\r\n (click)=\"handleTableRowClick(data)\"\r\n (dblclick)=\"handleTableRowDbClick(data)\"\r\n >\r\n <!-- \u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF09 -->\r\n <td\r\n *ngIf=\"showCheckbox\"\r\n [nzAlign]=\"'center'\"\r\n style=\"text-align: center; width: 50px\"\r\n [(nzChecked)]=\"data.checked\"\r\n [nzDisabled]=\"isRowDisabled(data)\"\r\n (nzCheckedChange)=\"handleRowCheckedChange(data, $event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n ></td>\r\n <td\r\n *ngFor=\"let column of _columns\"\r\n [nzLeft]=\"column._nzLeft\"\r\n [nzRight]=\"column._nzRight\"\r\n [nzAlign]=\"column.align\"\r\n [ngClass]=\"{\r\n 'pro-nowrap': true\r\n }\"\r\n >\r\n <!-- \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49\u6A21\u677F -->\r\n <ng-container\r\n *ngIf=\"\r\n column.customRender && getTemplate(column.customRender);\r\n let template\r\n \"\r\n >\r\n <ng-template\r\n [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: data,\r\n data: data,\r\n column: column,\r\n index: i,\r\n pageInfo: _pageInfo\r\n }\"\r\n >\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- \u9ED8\u8BA4\u6E32\u67D3\u903B\u8F91 -->\r\n <ng-container\r\n *ngIf=\"!column.customRender || !getTemplate(column.customRender)\"\r\n >\r\n <ng-container *ngIf=\"column.ellipsis\">\r\n <div\r\n class=\"pro-ellipsis\"\r\n [title]=\"data[column.prop]\"\r\n [ngStyle]=\"{\r\n width: 'calc(' + column.width + ' - 25px)'\r\n }\"\r\n >\r\n {{ data[column.prop] }}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!column.ellipsis\">\r\n {{ data[column.prop] }}\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"summaryData && _pageInfo.total > 0\">\r\n <!-- \u6C47\u603B\u884C\u7684\u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF0C\u4F46\u4E3A\u7A7A\uFF09 -->\r\n <td\r\n *ngIf=\"showCheckbox\"\r\n style=\"font-weight: bold; border-right: 1px solid #e8e8e8\"\r\n ></td>\r\n <td\r\n *ngFor=\"let column; let i = index; of: _columns\"\r\n [nzLeft]=\"column._nzLeft\"\r\n [nzRight]=\"column._nzRight\"\r\n style=\"font-weight: bold; border-right: 1px solid #e8e8e8\"\r\n [nzAlign]=\"column.align\"\r\n >\r\n <span *ngIf=\"i === 0\">\u603B\u8BA1</span>\r\n <ng-container *ngIf=\"i !== 0 && column.summary\">\r\n {{\r\n column.summary?.format\r\n ? column.summary?.format(\r\n summaryData[column.summary?.name || column.prop]\r\n )\r\n : summaryData[column.summary?.name || column.prop]\r\n }}\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </tbody>\r\n <ng-template #totalTemplate let-total\r\n >\u5171 {{ _pageInfo.total }} \u6761\u8BB0\u5F55</ng-template\r\n >\r\n </nz-table>\r\n </div>\r\n </ng-template>\r\n</app-page-container>\r\n", styles: [".pro-ellipsis{overflow:hidden;text-overflow:ellipsis}.pro-nowrap{white-space:nowrap}::ng-deep .setting-space-item{margin-right:0!important}::ng-deep .pro-table-checkboxgroup-nostyle{white-space:nowrap}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body table{border-collapse:separate;border-spacing:0}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr>td{border-right:1px solid #e8e8e8!important}::ng-deep .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>thead>tr>th{border-right:1px solid #e8e8e8!important;border-bottom:1px solid #e8e8e8!important;white-space:nowrap}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-thead>tr>th:first-child,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr>td:first-child{border-left:none!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-cell-fix-left,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-cell-fix-right{border-right:1px solid #e8e8e8!important;border-bottom:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-header .ant-table-thead>tr>th.ant-table-cell-fix-left,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-header .ant-table-thead>tr>th.ant-table-cell-fix-right{border-right:1px solid #e8e8e8!important;border-bottom:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-header .ant-table-thead>tr>th{border-top:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-thead>tr>th:last-child,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr>td:last-child{border-right:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr:last-child>td{border-bottom:1px solid #e8e8e8!important}::ng-deep .table-search-bar-left .ant-form-item{margin-bottom:4px}::ng-deep .table-search-bar-left .ant-form-item .ant-form-item-label>label{color:#5a5a5a}::ng-deep .pro-table-container .page-container-body{padding:8px 0 0!important}::ng-deep .pro-table-auto-scroll .ant-table-content,::ng-deep .pro-table-auto-scroll .ant-table-body{overflow-x:auto!important}::ng-deep .pro-table-auto-scroll .ant-table-content table,::ng-deep .pro-table-auto-scroll .ant-table-body table{table-layout:auto!important}::ng-deep .pro-table-auto-scroll .ant-table-content table td,::ng-deep .pro-table-auto-scroll .ant-table-body table td{white-space:nowrap}::ng-deep .ant-table-cell-fix-left-last{box-shadow:6px 0 8px -4px #00000026;clip-path:inset(0px -8px 0px 0px)}::ng-deep .ant-table-cell-fix-right-first{box-shadow:-6px 0 8px -4px #00000026;clip-path:inset(0px 0px 0px -8px)}::ng-deep .ant-table-tbody>tr:hover>td.ant-table-cell-fix-left,::ng-deep .ant-table-tbody>tr:hover>td.ant-table-cell-fix-right,::ng-deep .ant-table-tbody>tr.ant-table-custom-row-selected>td.ant-table-cell-fix-left,::ng-deep .ant-table-tbody>tr.ant-table-custom-row-selected>td.ant-table-cell-fix-right{background:#e8f0fb}\n"] }]
1733
+ args: [{ selector: "app-pro-table", template: "<app-page-container\r\n [title]=\"title\"\r\n [showHeader]=\"showSearchBar\"\r\n [bodyStyle]=\"bodyStyle\"\r\n ngClass=\"pro-table-container\"\r\n>\r\n <!-- \u589E\u52A0\u81EA\u5B9A\u4E49\u5185\u5BB9\u533A-->\r\n <ng-template #customContent>\r\n <ng-container\r\n *ngIf=\"customContentTpl\"\r\n [ngTemplateOutlet]=\"customContentTpl\"\r\n ></ng-container>\r\n </ng-template>\r\n\r\n <ng-template #header>\r\n <app-table-search-bar\r\n *ngIf=\"showSearchBar\"\r\n [labelWidth]=\"labelWidth\"\r\n [labelAlign]=\"labelAlign\"\r\n [searchColCount]=\"tableSearchColCount\"\r\n >\r\n <ng-template #leftContent>\r\n <nz-form-item\r\n *ngFor=\"let column of _searchFiledColumns\"\r\n [ngClass]=\"getFormItemClassName(column)\"\r\n >\r\n <nz-form-label *ngIf=\"!getFieldProps(column).hideLabel\" nzNoColon>\r\n <!-- \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49label\u6A21\u677F -->\r\n <ng-container\r\n *ngIf=\"\r\n column.customLabelRender &&\r\n getLabelTemplate(column.customLabelRender);\r\n else defaultLabel\r\n \"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"getLabelTemplate(column.customLabelRender)\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: column,\r\n column: column,\r\n fieldProps: getFieldProps(column)\r\n }\"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #defaultLabel>\r\n {{ getFieldProps(column).label || column.title }}\r\n </ng-template>\r\n </nz-form-label>\r\n <nz-form-control *ngIf=\"column.valueType === 'input'\">\r\n <input\r\n nz-input\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [placeholder]=\"getFieldProps(column).placeHolder\"\r\n [disabled]=\"getFieldProps(column).disabled\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n />\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'inputPlate'\">\r\n <app-plate-input\r\n [usage]=\"'filter'\"\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n ></app-plate-input>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'select'\">\r\n <nz-select\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [nzOptions]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [nzShowSearch]=\"getFieldProps(column).showSearch\"\r\n >\r\n </nz-select>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'selectMultiple'\">\r\n <nz-select\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [nzOptions]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [nzShowSearch]=\"getFieldProps(column).showSearch\"\r\n nzMode=\"multiple\"\r\n [nzMaxTagCount]=\"2\"\r\n [nzMaxTagPlaceholder]=\"nzMaxTagPlaceholder\"\r\n [nzCustomTemplate]=\"defaultTemplate\"\r\n >\r\n <ng-template #nzMaxTagPlaceholder>\r\n +\r\n {{\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n ?.length\r\n }}\r\n </ng-template>\r\n <ng-template #defaultTemplate let-selected>\r\n {{\r\n selected.nzLabel.length > 4\r\n ? selected.nzLabel.substring(0, 4) + \"...\"\r\n : selected.nzLabel\r\n }}\r\n </ng-template>\r\n </nz-select>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'date'\">\r\n <nz-date-picker\r\n [nzShowTime]=\"getFieldProps(column).showTime\"\r\n [nzFormat]=\"getFieldProps(column).format\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzMode]=\"getFieldProps(column).mode\"\r\n ></nz-date-picker>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'checkbox'\">\r\n <nz-checkbox-group\r\n [class]=\"\r\n getFieldProps(column).noStyle\r\n ? 'pro-table-checkboxgroup-nostyle'\r\n : ''\r\n \"\r\n [(ngModel)]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n (ngModelChange)=\"\r\n handleFieldCheckBoxChange(\r\n $event,\r\n getFieldProps(column).name || column.prop\r\n )\r\n \"\r\n ></nz-checkbox-group>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'autoComplete'\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column)?.name || column.prop]\r\n \"\r\n (input)=\"handleAutoCompleteInput($event, column)\"\r\n [nzAutocomplete]=\"auto\"\r\n [disabled]=\"getFieldProps(column)?.disabled\"\r\n [placeholder]=\"getFieldProps(column)?.placeHolder\"\r\n />\r\n <nz-autocomplete\r\n [nzBackfill]=\"getFieldProps(column).backFill\"\r\n [nzDefaultActiveFirstOption]=\"\r\n getFieldProps(column).defaultActiveFirstOption\r\n \"\r\n [nzWidth]=\"getFieldProps(column).width\"\r\n #auto\r\n >\r\n <nz-auto-option\r\n *ngFor=\"let option of getAutoCompleteDataSource(column)\"\r\n [nzValue]=\"\r\n getFieldProps(column).returnFullData ? option : option.value\r\n \"\r\n [nzLabel]=\"option.label\"\r\n [nzDisabled]=\"option.disabled\"\r\n >\r\n {{ option.label }}\r\n </nz-auto-option>\r\n </nz-autocomplete>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'custom'\">\r\n <app-dynamic-search-field\r\n [component]=\"getFieldProps(column).component\"\r\n [value]=\"_searchParams[getFieldProps(column).name || column.prop]\"\r\n [props]=\"getFieldProps(column)\"\r\n (valueChange)=\"\r\n setFieldValue(getFieldProps(column).name || column.prop, $event)\r\n \"\r\n ></app-dynamic-search-field>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'inputNumber'\">\r\n <nz-input-number\r\n [style.width]=\"'100%'\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [nzFormatter]=\"getFieldProps(column).formatterPercent\"\r\n [nzParser]=\"getFieldProps(column).parserPercent\"\r\n ></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </ng-template>\r\n <ng-template #actionTextBtn>\r\n <nz-space [nzSize]=\"4\">\r\n <ng-template nzSpaceItem *ngIf=\"showSearchBtn\">\r\n <button nz-button nzType=\"primary\" (click)=\"handleSearch()\">\r\n {{ confirmBtnText }}\r\n </button>\r\n </ng-template>\r\n <ng-template nzSpaceItem *ngIf=\"showClearBtn\">\r\n <button nz-button (click)=\"handleResetForm()\">\r\n {{ clearBtnText }}\r\n </button>\r\n </ng-template>\r\n </nz-space>\r\n </ng-template>\r\n <ng-container *ngIf=\"imgActionBarTpl || showColumnSetting\">\r\n <ng-template #actionImgBtn>\r\n <nz-space>\r\n <ng-container *ngTemplateOutlet=\"imgActionBarTpl\"></ng-container>\r\n <ng-template\r\n nzSpaceItem\r\n class=\"setting-space-item\"\r\n *ngIf=\"showColumnSetting\"\r\n >\r\n <span nz-tooltip nzTooltipTitle=\"\u8BBE\u7F6E\u5B57\u6BB5\">\r\n <app-colmuns-setting\r\n [columns]=\"columns\"\r\n [selectedColumns]=\"_serverColumns\"\r\n [tableName]=\"tableName\"\r\n (afterConfirm)=\"handleColumnsSettingConfirm()\"\r\n ></app-colmuns-setting>\r\n </span>\r\n </ng-template>\r\n </nz-space>\r\n </ng-template>\r\n </ng-container>\r\n </app-table-search-bar>\r\n </ng-template>\r\n\r\n <ng-template #body>\r\n <div class=\"mb-4\">\r\n <ng-container *ngIf=\"showActionBar\">\r\n <ng-container *ngTemplateOutlet=\"actionBarTpl\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"customTableRender\">\r\n <ng-container *ngTemplateOutlet=\"customTableRender\"></ng-container>\r\n </ng-container>\r\n <div [class.pro-table-auto-scroll]=\"scroll?.x === 'auto'\">\r\n <nz-table\r\n *ngIf=\"!customTableRender && _columnsReady\"\r\n #dynamicTable\r\n nzSize=\"small\"\r\n nzShowSizeChanger\r\n [nzBordered]=\"bordered\"\r\n [nzOuterBordered]=\"outerBordered\"\r\n [nzData]=\"dataSource\"\r\n [nzPageIndex]=\"_pageInfo.pageIndex\"\r\n [nzPageSize]=\"_pageInfo.pageSize\"\r\n [nzTotal]=\"_pageInfo.total\"\r\n [nzPageSizeOptions]=\"_pageInfo.pageSizeOptions\"\r\n [nzShowPagination]=\"showPagination\"\r\n [nzShowTotal]=\"totalTemplate\"\r\n [nzLoading]=\"_loading\"\r\n [nzFrontPagination]=\"frontPagination\"\r\n [nzScroll]=\"_computedScroll\"\r\n (nzPageIndexChange)=\"handlePageIndexChange($event)\"\r\n (nzPageSizeChange)=\"handlePageSizeChange($event)\"\r\n >\r\n <thead>\r\n <tr>\r\n <!-- \u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF09 -->\r\n <th\r\n *ngIf=\"showCheckbox\"\r\n [nzWidth]=\"'50px'\"\r\n [nzAlign]=\"'center'\"\r\n style=\"text-align: center\"\r\n [(nzChecked)]=\"_checkedAll\"\r\n [nzIndeterminate]=\"_indeterminate\"\r\n (nzCheckedChange)=\"toggleCheckAll($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n ></th>\r\n <th\r\n *ngFor=\"let column of _columns\"\r\n [nzWidth]=\"column.width\"\r\n [nzAlign]=\"column.align\"\r\n [nzLeft]=\"column._nzLeft\"\r\n [nzRight]=\"column._nzRight\"\r\n [nzShowSort]=\"!!column.sorter\"\r\n [nzSortOrder]=\"getSortOrder(column.prop)\"\r\n (nzSortOrderChange)=\"onSortChange(column.prop, $event)\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr\r\n style=\"cursor: pointer\"\r\n *ngFor=\"let data; let i = index; of: dynamicTable.data\"\r\n [ngClass]=\"{\r\n 'ant-table-custom-row-selected': !!getTableRowChecked(data),\r\n 'ant-table-custom-row-even': i % 2 === 0,\r\n 'ant-table-custom-row-odd': i % 2 !== 0\r\n }\"\r\n (click)=\"handleTableRowClick(data)\"\r\n (dblclick)=\"handleTableRowDbClick(data)\"\r\n >\r\n <!-- \u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF09 -->\r\n <td\r\n *ngIf=\"showCheckbox\"\r\n [nzAlign]=\"'center'\"\r\n style=\"text-align: center; width: 50px\"\r\n [(nzChecked)]=\"data.checked\"\r\n [nzDisabled]=\"isRowDisabled(data)\"\r\n (nzCheckedChange)=\"handleRowCheckedChange(data, $event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n ></td>\r\n <td\r\n *ngFor=\"let column of _columns\"\r\n [nzLeft]=\"column._nzLeft\"\r\n [nzRight]=\"column._nzRight\"\r\n [nzAlign]=\"column.align\"\r\n [ngClass]=\"{\r\n 'pro-nowrap': true\r\n }\"\r\n >\r\n <!-- \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49\u6A21\u677F -->\r\n <ng-container\r\n *ngIf=\"\r\n column.customRender && getTemplate(column.customRender);\r\n let template\r\n \"\r\n >\r\n <ng-template\r\n [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: data,\r\n data: data,\r\n column: column,\r\n index: i,\r\n pageInfo: _pageInfo\r\n }\"\r\n >\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- \u9ED8\u8BA4\u6E32\u67D3\u903B\u8F91 -->\r\n <ng-container\r\n *ngIf=\"\r\n !column.customRender || !getTemplate(column.customRender)\r\n \"\r\n >\r\n <ng-container *ngIf=\"column.ellipsis\">\r\n <div\r\n class=\"pro-ellipsis\"\r\n [title]=\"data[column.prop]\"\r\n [ngStyle]=\"{\r\n width: 'calc(' + column.width + ' - 25px)'\r\n }\"\r\n >\r\n {{ data[column.prop] }}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!column.ellipsis\">\r\n {{ data[column.prop] }}\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"summaryData && _pageInfo.total > 0\">\r\n <!-- \u6C47\u603B\u884C\u7684\u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF0C\u4F46\u4E3A\u7A7A\uFF09 -->\r\n <td\r\n *ngIf=\"showCheckbox\"\r\n style=\"font-weight: bold; border-right: 1px solid #e8e8e8\"\r\n ></td>\r\n <td\r\n *ngFor=\"let column; let i = index; of: _columns\"\r\n [nzLeft]=\"column._nzLeft\"\r\n [nzRight]=\"column._nzRight\"\r\n style=\"font-weight: bold; border-right: 1px solid #e8e8e8\"\r\n [nzAlign]=\"column.align\"\r\n >\r\n <span *ngIf=\"i === 0\">\u603B\u8BA1</span>\r\n <ng-container *ngIf=\"i !== 0 && column.summary\">\r\n {{\r\n column.summary?.format\r\n ? column.summary?.format(\r\n summaryData[column.summary?.name || column.prop]\r\n )\r\n : summaryData[column.summary?.name || column.prop]\r\n }}\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </tbody>\r\n <ng-template #totalTemplate let-total\r\n >\u5171 {{ _pageInfo.total }} \u6761\u8BB0\u5F55</ng-template\r\n >\r\n </nz-table>\r\n </div>\r\n </ng-template>\r\n</app-page-container>\r\n", styles: [".pro-ellipsis{overflow:hidden;text-overflow:ellipsis}.pro-nowrap{white-space:nowrap}::ng-deep .setting-space-item{margin-right:0!important}::ng-deep .pro-table-checkboxgroup-nostyle{white-space:nowrap}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body table{border-collapse:separate;border-spacing:0}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr>td{border-right:1px solid #e8e8e8!important}::ng-deep .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table>thead>tr>th{border-right:1px solid #e8e8e8!important;border-bottom:1px solid #e8e8e8!important;white-space:nowrap}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-thead>tr>th:first-child,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr>td:first-child{border-left:none!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-cell-fix-left,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-cell-fix-right{border-right:1px solid #e8e8e8!important;border-bottom:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-header .ant-table-thead>tr>th.ant-table-cell-fix-left,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-header .ant-table-thead>tr>th.ant-table-cell-fix-right{border-right:1px solid #e8e8e8!important;border-bottom:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-header .ant-table-thead>tr>th{border-top:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-thead>tr>th:last-child,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr>td:last-child{border-right:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr:last-child>td{border-bottom:1px solid #e8e8e8!important}::ng-deep .table-search-bar-left .ant-form-item{margin-bottom:4px}::ng-deep .table-search-bar-left .ant-form-item .ant-form-item-label>label{color:#5a5a5a}::ng-deep .pro-table-container .page-container-body{padding:8px 0 0!important}::ng-deep .pro-table-auto-scroll .ant-table-content,::ng-deep .pro-table-auto-scroll .ant-table-body{overflow-x:auto!important}::ng-deep .pro-table-auto-scroll .ant-table-content table,::ng-deep .pro-table-auto-scroll .ant-table-body table{table-layout:auto!important}::ng-deep .pro-table-auto-scroll .ant-table-content table td,::ng-deep .pro-table-auto-scroll .ant-table-body table td{white-space:nowrap}::ng-deep .ant-table-cell-fix-left-last{box-shadow:6px 0 8px -4px #00000026;clip-path:inset(0px -8px 0px 0px)}::ng-deep .ant-table-cell-fix-right-first{box-shadow:-6px 0 8px -4px #00000026;clip-path:inset(0px 0px 0px -8px)}::ng-deep .ant-table-tbody>tr:hover>td.ant-table-cell-fix-left,::ng-deep .ant-table-tbody>tr:hover>td.ant-table-cell-fix-right,::ng-deep .ant-table-tbody>tr.ant-table-custom-row-selected>td.ant-table-cell-fix-left,::ng-deep .ant-table-tbody>tr.ant-table-custom-row-selected>td.ant-table-cell-fix-right{background:#e8f0fb}\n"] }]
1719
1734
  }], ctorParameters: function () { return [{ type: undefined, decorators: [{
1720
1735
  type: Optional
1721
1736
  }, {
@@ -1727,6 +1742,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
1727
1742
  type: Input
1728
1743
  }], title: [{
1729
1744
  type: Input
1745
+ }], bodyStyle: [{
1746
+ type: Input
1730
1747
  }], tableName: [{
1731
1748
  type: Input
1732
1749
  }], multiRow: [{
@@ -1745,7 +1762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
1745
1762
  type: Input
1746
1763
  }], labelAlign: [{
1747
1764
  type: Input
1748
- }], formItemWidth: [{
1765
+ }], searchColCount: [{
1749
1766
  type: Input
1750
1767
  }], dataSource: [{
1751
1768
  type: Input
@@ -1785,6 +1802,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
1785
1802
  type: Output
1786
1803
  }], onResetFormBeforeReload: [{
1787
1804
  type: Output
1805
+ }], customContentTpl: [{
1806
+ type: ContentChild,
1807
+ args: ["customContent"]
1788
1808
  }], actionBarTpl: [{
1789
1809
  type: ContentChild,
1790
1810
  args: ["actionBar"]