@yibozhang/pro-table 0.1.13 → 0.1.15

package/fesm2015/yibozhang-pro-table.js

@@ -1,6 +1,6 @@
 import { __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Component, Optional, Inject, Input, Output, ContentChild, ContentChildren, TemplateRef, NgModule, forwardRef, ChangeDetectorRef, ElementRef, Directive, HostListener, ViewChild, ComponentFactoryResolver, ViewContainerRef, Injectable } from '@angular/core';
+import { InjectionToken, EventEmitter, Component, Optional, Inject, Input, Output, ContentChild, ContentChildren, TemplateRef, HostListener, NgModule, forwardRef, ChangeDetectorRef, ElementRef, Directive, ViewChild, ComponentFactoryResolver, ViewContainerRef, Injectable } from '@angular/core';
 import { isEqual, hasIn, cloneDeep, isNil, debounce } from 'lodash-es';
 import { isObservable } from 'rxjs';
 import { DragDropModule } from '@angular/cdk/drag-drop';
@@ -34,7 +34,7 @@ const ɵ0 = () => [], ɵ1 = (value) => `${value}`, ɵ2 = (value) => value;
 const PRO_TABLE_DEFAULT_PROPS = {
     input: {
         name: "",
-        placeHolder: "",
+        placeHolder: "请输入",
         disabled: false,
         label: "",
         value: "",
@@ -46,7 +46,7 @@ const PRO_TABLE_DEFAULT_PROPS = {
         label: "",
         value: "",
         allowClear: true,
-        placeHolder: "",
+        placeHolder: "请选择",
     },
     selectMultiple: {
         name: "",
@@ -153,6 +153,7 @@ class ProTableComponent {
         this.showCheckbox = false;
         // 判断行是否禁用的函数
         this.rowDisabled = () => false;
+        this.rerenderOnResize = true;
         // 是否自动触发请求
         this.autoTriggerRequest = true;
         this.onRowClick = new EventEmitter();
@@ -197,6 +198,22 @@ class ProTableComponent {
         this._serverColumns = [];
         // 存储 autoComplete 字段的数据源
         this._autoCompleteDataSources = {};
+        // 控制表格显示状态，用于重新挂载
+        this._showTable = true;
+    }
+    onWindowResize() {
+        if (!this.rerenderOnResize)
+            return;
+        if (this.resizeDebounce) {
+            clearTimeout(this.resizeDebounce);
+        }
+        this.resizeDebounce = setTimeout(() => {
+            // 通过 ngIf 重新挂载表格
+            this._showTable = false;
+            setTimeout(() => {
+                this._showTable = true;
+            }, 0);
+        }, 150);
     }
     fetchRemoteColumns() {
         var _a;
@@ -1191,7 +1208,7 @@ class ProTableComponent {
 ProTableComponent.decorators = [
     { type: Component, 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              [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            >\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              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          <nz-space-item *ngIf=\"showSearchBtn\">\r\n            <button nz-button nzType=\"primary\" (click)=\"handleSearch()\">\r\n              {{ confirmBtnText }}\r\n            </button>\r\n          </nz-space-item>\r\n          <nz-space-item *ngIf=\"showClearBtn\">\r\n            <button nz-button (click)=\"handleResetForm()\">\r\n              {{ clearBtnText }}\r\n            </button>\r\n          </nz-space-item>\r\n        </nz-space>\r\n      </ng-template>\r\n      <ng-template #actionImgBtn>\r\n        <nz-space>\r\n          <ng-container *ngTemplateOutlet=\"imgActionBarTpl\"></ng-container>\r\n          <nz-space-item 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          </nz-space-item>\r\n        </nz-space>\r\n      </ng-template>\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    <nz-table\r\n      *ngIf=\"!customTableRender\"\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]=\"scroll\"\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.fixedLeft\"\r\n            [nzRight]=\"column.fixedRight\"\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.fixedLeft\"\r\n            [nzRight]=\"column.fixedRight\"\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.fixedLeft\"\r\n            [nzRight]=\"column.fixedRight\"\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  </ng-template>\r\n</app-page-container>\r\n",
+                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              [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            >\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              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          <nz-space-item *ngIf=\"showSearchBtn\">\r\n            <button nz-button nzType=\"primary\" (click)=\"handleSearch()\">\r\n              {{ confirmBtnText }}\r\n            </button>\r\n          </nz-space-item>\r\n          <nz-space-item *ngIf=\"showClearBtn\">\r\n            <button nz-button (click)=\"handleResetForm()\">\r\n              {{ clearBtnText }}\r\n            </button>\r\n          </nz-space-item>\r\n        </nz-space>\r\n      </ng-template>\r\n      <ng-template #actionImgBtn>\r\n        <nz-space>\r\n          <ng-container *ngTemplateOutlet=\"imgActionBarTpl\"></ng-container>\r\n          <nz-space-item 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          </nz-space-item>\r\n        </nz-space>\r\n      </ng-template>\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    <nz-table\r\n      *ngIf=\"!customTableRender && _showTable\"\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]=\"scroll\"\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.fixedLeft\"\r\n            [nzRight]=\"column.fixedRight\"\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.fixedLeft\"\r\n            [nzRight]=\"column.fixedRight\"\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.fixedLeft\"\r\n            [nzRight]=\"column.fixedRight\"\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  </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-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-thead>tr>th{border-bottom:1px solid #e8e8e8!important;border-right:1px solid #e8e8e8!important;white-space:nowrap}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr>td:first-child,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-thead>tr>th: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,::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-bottom:1px solid #e8e8e8!important;border-right: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-tbody>tr>td:last-child,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-thead>tr>th: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}"]
             },] }
 ];
@@ -1225,6 +1242,7 @@ ProTableComponent.propDecorators = {
     multipleSort: [{ type: Input }],
     showCheckbox: [{ type: Input }],
     rowDisabled: [{ type: Input }],
+    rerenderOnResize: [{ type: Input }],
     autoTriggerRequest: [{ type: Input }],
     customTableRender: [{ type: Input }],
     onRowClick: [{ type: Output }],
@@ -1233,7 +1251,8 @@ ProTableComponent.propDecorators = {
     onResetFormBeforeReload: [{ type: Output }],
     actionBarTpl: [{ type: ContentChild, args: ["actionBar",] }],
     imgActionBarTpl: [{ type: ContentChild, args: ["ImgActionBar",] }],
-    allTemplates: [{ type: ContentChildren, args: [TemplateRef,] }]
+    allTemplates: [{ type: ContentChildren, args: [TemplateRef,] }],
+    onWindowResize: [{ type: HostListener, args: ['window:resize',] }]
 };
 
 class PageContainerComponent {
@@ -1411,7 +1430,7 @@ class PlateInputComponent {
 PlateInputComponent.decorators = [
     { type: Component, args: [{
                 selector: "app-plate-input",
-                template: "<div\r\n  class=\"plate-antd-input-container\"\r\n  [class.plate-antd-input-disabled]=\"disabled\"\r\n>\r\n  <div\r\n    class=\"plate-input-prefix\"\r\n    [class.plate-input-prefix-disabled]=\"disabled\"\r\n    nz-popover\r\n    nzPopoverPlacement=\"bottom\"\r\n    nzPopoverOverlayClassName=\"plate-input-popover\"\r\n    [(nzPopoverVisible)]=\"nzPopoverVisible\"\r\n    [nzPopoverTrigger]=\"'manual'\"\r\n    [nzPopoverContent]=\"contentTemplate\"\r\n    (click)=\"handlePrefixClick($event)\"\r\n  >\r\n    {{ platePrefix | uppercase }}\r\n    <i\r\n      class=\"plate-input-icon-down\"\r\n      [nzRotate]=\"nzPopoverVisible ? 180 : 0\"\r\n      nz-icon\r\n      nzType=\"down\"\r\n      nzTheme=\"outline\"\r\n    ></i>\r\n  </div>\r\n  <ng-template #contentTemplate>\r\n    <div nz-row style=\"height: 100%\">\r\n      <div\r\n        nz-col\r\n        nzSpan=\"4\"\r\n        *ngFor=\"let item of platePrefixOptions\"\r\n        class=\"plate-input-popover-item\"\r\n        (click)=\"!disabled && handlePlatePrefix(item.value)\"\r\n        [ngClass]=\"{\r\n          'plate-input-popover-item-active': item.value === platePrefix,\r\n          'plate-input-popover-item-default': item.value !== platePrefix\r\n        }\"\r\n      >\r\n        <div class=\"plate-input-popover-item-label\">\r\n          {{ item.label }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n  <input\r\n    class=\"plate-input-suffix\"\r\n    type=\"text\"\r\n    nz-input\r\n    allow-trim\r\n    style=\"width: 75%\"\r\n    [value]=\"plateSuffix | uppercase\"\r\n    [disabled]=\"disabled\"\r\n    (blur)=\"!disabled && handleAntdPlateSuffixBlur($event)\"\r\n    maxlength=\"7\"\r\n  />\r\n</div>\r\n",
+                template: "<div\r\n  class=\"plate-antd-input-container\"\r\n  [class.plate-antd-input-disabled]=\"disabled\"\r\n>\r\n  <div\r\n    class=\"plate-input-prefix\"\r\n    [class.plate-input-prefix-disabled]=\"disabled\"\r\n    nz-popover\r\n    nzPopoverPlacement=\"bottom\"\r\n    nzPopoverOverlayClassName=\"plate-input-popover\"\r\n    [(nzPopoverVisible)]=\"nzPopoverVisible\"\r\n    [nzPopoverTrigger]=\"'manual'\"\r\n    [nzPopoverContent]=\"contentTemplate\"\r\n    (click)=\"handlePrefixClick($event)\"\r\n  >\r\n    {{ platePrefix | uppercase }}\r\n    <i\r\n      class=\"plate-input-icon-down\"\r\n      [nzRotate]=\"nzPopoverVisible ? 180 : 0\"\r\n      nz-icon\r\n      nzType=\"down\"\r\n      nzTheme=\"outline\"\r\n    ></i>\r\n  </div>\r\n  <ng-template #contentTemplate>\r\n    <div nz-row style=\"height: 100%\">\r\n      <div\r\n        nz-col\r\n        nzSpan=\"4\"\r\n        *ngFor=\"let item of platePrefixOptions\"\r\n        class=\"plate-input-popover-item\"\r\n        (click)=\"!disabled && handlePlatePrefix(item.value)\"\r\n        [ngClass]=\"{\r\n          'plate-input-popover-item-active': item.value === platePrefix,\r\n          'plate-input-popover-item-default': item.value !== platePrefix\r\n        }\"\r\n      >\r\n        <div class=\"plate-input-popover-item-label\">\r\n          {{ item.label }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n  <input\r\n    class=\"plate-input-suffix\"\r\n    type=\"text\"\r\n    nz-input\r\n    allow-trim\r\n    style=\"width: 75%\"\r\n    [value]=\"plateSuffix | uppercase\"\r\n    [disabled]=\"disabled\"\r\n    (blur)=\"!disabled && handleAntdPlateSuffixBlur($event)\"\r\n    placeholder=\"\u8BF7\u8F93\u5165\"\r\n    maxlength=\"7\"\r\n  />\r\n</div>\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,