@yibozhang/pro-table 0.0.5 → 0.0.7

package/fesm2015/yibozhang-pro-table.js

@@ -1,10 +1,12 @@
 import { __awaiter } from 'tslib';
-import { InjectionToken, EventEmitter, Component, Optional, Inject, Input, Output, ContentChild, ContentChildren, TemplateRef, NgModule, forwardRef, ChangeDetectorRef, ElementRef, ViewChild, ComponentFactoryResolver, ViewContainerRef, Injectable, ɵɵdefineInjectable, ɵɵinject } from '@angular/core';
+import * as i0 from '@angular/core';
+import { InjectionToken, EventEmitter, Component, Optional, Inject, Input, Output, ContentChild, ContentChildren, TemplateRef, NgModule, forwardRef, ChangeDetectorRef, ElementRef, 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';
 import { CommonModule } from '@angular/common';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
+import * as i1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup, FormBuilder } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -181,8 +183,10 @@ class ProTableComponent {
         };
         this._loading = false;
         this._selectedTableRow = null;
-        // 选中的行数据（用于复选框选择）
+        // 选中的行数据（用于复选框选择）- 保留用于兼容性
         this._selectedRows = [];
+        // 使用 Set 存储选中项的 ID，支持跨页选中
+        this._selectedRowIds = new Set();
         // 全选状态
         this._checkedAll = false;
         // 半选状态（部分选中）
@@ -705,7 +709,12 @@ class ProTableComponent {
         return this._selectedTableRow;
     }
     getCheckedRows() {
-        return this._selectedRows;
+        if (!this.showCheckbox) {
+            return [];
+        }
+        // 返回当前数据源中所有 checked 为 true 的项
+        // 注意：如果需要获取所有页的选中项，需要遍历所有数据源或使用 _selectedRowIds
+        return this.dataSource.filter((row) => row.checked === true);
     }
     // 获取指定名称的模板
     getTemplate(name) {
@@ -752,13 +761,14 @@ class ProTableComponent {
             return false;
         return this.rowDisabled ? this.rowDisabled(data) : false;
     }
-    // 检查行是否被复选框选中
+    // 检查行是否被复选框选中（数据驱动模式）
     isRowChecked(data) {
         if (!this.showCheckbox)
             return false;
-        return this._selectedRows.some((row) => JSON.stringify(row) === JSON.stringify(data));
+        // 直接读取数据对象的 checked 属性
+        return data.checked === true;
     }
-    // 切换行的选中状态
+    // 切换行的选中状态（数据驱动模式，保留用于兼容）
     toggleRowChecked(data, checked, event) {
         if (event) {
             event.stopPropagation(); // 阻止事件冒泡，避免触发行点击
@@ -767,9 +777,21 @@ class ProTableComponent {
         if (this.isRowDisabled(data)) {
             return;
         }
-        const index = this._selectedRows.findIndex((row) => JSON.stringify(row) === JSON.stringify(data));
+        // 直接设置数据对象的 checked 属性
+        data.checked = checked;
+        // 同步更新 _selectedRowIds（用于跨页选中）
+        const id = this.getRowId(data);
+        if (id !== undefined) {
+            if (checked) {
+                this._selectedRowIds.add(id);
+            }
+            else {
+                this._selectedRowIds.delete(id);
+            }
+        }
+        // 同步更新 _selectedRows（用于兼容性）
+        const index = this._selectedRows.findIndex((row) => this.isSameRow(row, data));
         if (checked) {
-            // 选中
             if (index === -1) {
                 this._selectedRows.push(data);
             }
@@ -777,19 +799,18 @@ class ProTableComponent {
             this._selectedTableRow = data;
         }
         else {
-            // 取消选中
             if (index > -1) {
                 this._selectedRows.splice(index, 1);
             }
             // 若当前高亮行为该行，则取消高亮
             if (this._selectedTableRow &&
-                JSON.stringify(this._selectedTableRow) === JSON.stringify(data)) {
+                this.isSameRow(this._selectedTableRow, data)) {
                 this._selectedTableRow = null;
             }
         }
         this.updateCheckAllStatus();
     }
-    // 更新全选状态
+    // 更新全选状态（数据驱动模式）
     updateCheckAllStatus() {
         if (!this.showCheckbox || !Array.isArray(this.dataSource)) {
             this._checkedAll = false;
@@ -798,39 +819,120 @@ class ProTableComponent {
         }
         // 只计算可用的行（未禁用的行）
         const availableRows = this.dataSource.filter((row) => !this.isRowDisabled(row));
-        const checkedCount = this._selectedRows.length;
+        // 基于数据对象的 checked 属性计算
+        const checkedCount = availableRows.filter((row) => row.checked === true).length;
         const totalCount = availableRows.length;
         this._checkedAll =
             totalCount > 0 && checkedCount > 0 && checkedCount === totalCount;
         this._indeterminate = checkedCount > 0 && checkedCount < totalCount;
     }
-    // 全选/取消全选
+    // 全选/取消全选（数据驱动模式）
     toggleCheckAll(checked, event) {
         if (event) {
             event.stopPropagation();
         }
+        // 只处理可用的行（未禁用的行）
+        const availableRows = this.dataSource.filter((row) => !this.isRowDisabled(row));
+        // 批量设置 checked 属性
+        availableRows.forEach((row) => {
+            row.checked = checked;
+            // 同步更新 _selectedRowIds（用于跨页选中）
+            const id = this.getRowId(row);
+            if (id !== undefined) {
+                if (checked) {
+                    this._selectedRowIds.add(id);
+                }
+                else {
+                    this._selectedRowIds.delete(id);
+                }
+            }
+        });
+        // 同步更新 _selectedRows（用于兼容性）
         if (checked) {
-            // 全选：只选中未禁用的行
-            this._selectedRows = this.dataSource.filter((row) => !this.isRowDisabled(row));
+            this._selectedRows = [...availableRows];
             // 同步设置高亮选中行为第一条可选数据
-            const availableRows = this._selectedRows;
             this._selectedTableRow =
                 availableRows.length > 0 ? availableRows[0] : null;
         }
         else {
-            // 取消全选
             this._selectedRows = [];
             // 取消高亮
             this._selectedTableRow = null;
         }
         this.updateCheckAllStatus();
     }
-    // 获取选中的行数据
+    // 获取选中的行数据（保留用于兼容性）
     getSelectedRows() {
-        return this._selectedRows;
+        return this.getCheckedRows();
     }
-    // 清空选中的行
+    // 处理行 checkbox 变化事件（数据驱动模式）
+    handleRowCheckedChange(data, checked) {
+        if (this.isRowDisabled(data)) {
+            return;
+        }
+        // 数据对象的 checked 属性已经通过双向绑定自动更新
+        // 这里只需要同步更新 _selectedRowIds 和 _selectedRows
+        // 同步更新 _selectedRowIds（用于跨页选中）
+        const id = this.getRowId(data);
+        if (id !== undefined) {
+            if (checked) {
+                this._selectedRowIds.add(id);
+            }
+            else {
+                this._selectedRowIds.delete(id);
+            }
+        }
+        // 同步更新 _selectedRows（用于兼容性）
+        const index = this._selectedRows.findIndex((row) => this.isSameRow(row, data));
+        if (checked) {
+            if (index === -1) {
+                this._selectedRows.push(data);
+            }
+            // 勾选复选框时同步设置高亮选中行
+            this._selectedTableRow = data;
+        }
+        else {
+            if (index > -1) {
+                this._selectedRows.splice(index, 1);
+            }
+            // 若当前高亮行为该行，则取消高亮
+            if (this._selectedTableRow &&
+                this.isSameRow(this._selectedTableRow, data)) {
+                this._selectedTableRow = null;
+            }
+        }
+        // 更新全选状态
+        this.updateCheckAllStatus();
+    }
+    // 刷新全选状态（用于其他场景）
+    refreshCheckAllStatus() {
+        this.updateCheckAllStatus();
+    }
+    // 获取行的唯一标识（用于跨页选中）
+    getRowId(data) {
+        var _a, _b;
+        return (_b = (_a = data.id) !== null && _a !== void 0 ? _a : data.key) !== null && _b !== void 0 ? _b : undefined;
+    }
+    // 判断两行是否为同一行
+    isSameRow(row1, row2) {
+        const id1 = this.getRowId(row1);
+        const id2 = this.getRowId(row2);
+        if (id1 !== undefined && id2 !== undefined) {
+            return id1 === id2;
+        }
+        // fallback 到 JSON 比较
+        return JSON.stringify(row1) === JSON.stringify(row2);
+    }
+    // 清空选中的行（数据驱动模式）
     clearSelectedRows() {
+        // 清空当前数据源中所有项的 checked 状态
+        if (Array.isArray(this.dataSource)) {
+            this.dataSource.forEach((row) => {
+                row.checked = false;
+            });
+        }
+        // 清空选中集合
+        this._selectedRowIds.clear();
         this._selectedRows = [];
         this._checkedAll = false;
         this._indeterminate = false;
@@ -907,6 +1009,8 @@ class ProTableComponent {
                 this._pageInfo.pageIndex > 1) {
                 this._pageInfo.pageIndex = this._pageInfo.pageIndex - 1;
             }
+            // 保存删除前的数据源（用于删除后查询时移除被删除项的选中状态）
+            const previousDataSource = afterDelete && this.showCheckbox ? [...this.dataSource] : [];
             this._loading = true;
             if (this.request) {
                 try {
@@ -916,7 +1020,38 @@ class ProTableComponent {
                         } }, (this.sortMode === "server"
                         ? { sort: this.buildServerSortPayload() }
                         : {})));
-                    this.dataSource = result.data || [];
+                    // 自动注入 checked 字段，支持跨页选中
+                    if (this.showCheckbox) {
+                        this.dataSource = (result.data || []).map((item) => {
+                            const id = this.getRowId(item);
+                            // 如果数据已有 checked 属性，保留；否则根据 _selectedRowIds 判断
+                            const checked = item.checked !== undefined
+                                ? item.checked
+                                : id !== undefined
+                                    ? this._selectedRowIds.has(id)
+                                    : false;
+                            return Object.assign(Object.assign({}, item), { checked: checked });
+                        });
+                        // 删除后查询：移除被删除项的选中状态
+                        if (afterDelete && previousDataSource.length > 0) {
+                            const newDataIds = new Set(this.dataSource.map((item) => this.getRowId(item)));
+                            // 遍历之前的数据源，如果不在新数据源中，说明被删除了，需要清除其选中状态
+                            previousDataSource.forEach((oldItem) => {
+                                const oldId = this.getRowId(oldItem);
+                                if (oldId !== undefined && !newDataIds.has(oldId)) {
+                                    // 被删除的项，从选中集合中移除
+                                    this._selectedRowIds.delete(oldId);
+                                    // 如果数据对象还在其他地方引用，清除其选中状态
+                                    if (oldItem.checked !== undefined) {
+                                        oldItem.checked = false;
+                                    }
+                                }
+                            });
+                        }
+                    }
+                    else {
+                        this.dataSource = result.data || [];
+                    }
                     this.summaryData = result.summaryData || null;
                     // 本地排序模式：拿到数据后在前端排序
                     if (this.sortMode === "local") {
@@ -937,15 +1072,13 @@ class ProTableComponent {
                 finally {
                     this._loading = false;
                     this._selectedTableRow = null;
-                    // 清空选中行（可选，根据业务需求决定是否保留跨页选中）
-                    // this.clearSelectedRows();
                 }
             }
             else {
                 console.warn("未提供 _request 回调函数");
                 this._loading = false;
             }
-            this.clearSelectedRows();
+            // 不再调用 clearSelectedRows()，保留跨页选中状态
         });
     }
     // 触发列排序变更
@@ -1052,7 +1185,7 @@ class ProTableComponent {
 ProTableComponent.decorators = [
     { type: Component, args: [{
                 selector: "app-pro-table",
-                template: "<app-page-container [title]=\"title\">\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    >\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            >\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            <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          </nz-space-item>\r\n        </nz-space>\r\n      </ng-template>\r\n    </app-table-search-bar>\r\n  </ng-template>\r\n  <ng-template #body>\r\n    <div class=\"mb-12\">\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      #basicTable\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          >\r\n            <label\r\n              nz-checkbox\r\n              [(ngModel)]=\"_checkedAll\"\r\n              [nzIndeterminate]=\"_indeterminate\"\r\n              (ngModelChange)=\"toggleCheckAll($event)\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            ></label>\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: basicTable.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\"\r\n            (click)=\"$event.stopPropagation()\"\r\n          >\r\n            <label\r\n              nz-checkbox\r\n              [ngModel]=\"isRowChecked(data)\"\r\n              [nzDisabled]=\"isRowDisabled(data)\"\r\n              (ngModelChange)=\"toggleRowChecked(data, $event)\"\r\n            ></label>\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            class=\"pro-ellipsis\"\r\n            [title]=\"data[column.prop]\"\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              {{ data[column.prop] }}\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    >\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            >\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            <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          </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-12\">\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            class=\"pro-ellipsis\"\r\n            [title]=\"data[column.prop]\"\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              {{ data[column.prop] }}\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;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:8px}"]
             },] }
 ];
@@ -1099,19 +1232,21 @@ ProTableComponent.propDecorators = {
 class PageContainerComponent {
     constructor() {
         this.title = "";
+        this.showHeader = true;
     }
     ngOnInit() { }
 }
 PageContainerComponent.decorators = [
     { type: Component, args: [{
                 selector: "app-page-container",
-                template: "<nz-card\r\n  [nzBorderless]=\"true\"\r\n  [nzBodyStyle]=\"{ padding: '10px', width: '100%' }\"\r\n>\r\n  <div class=\"page-container-title\" *ngIf=\"title\">{{ title }}</div>\r\n  <div class=\"page-container-header\">\r\n    <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\r\n  </div>\r\n  <div class=\"page-container-body\">\r\n    <ng-container *ngTemplateOutlet=\"bodyTpl\"></ng-container>\r\n  </div>\r\n</nz-card>\r\n",
+                template: "<nz-card\r\n  [nzBorderless]=\"true\"\r\n  [nzBodyStyle]=\"{ padding: '10px', width: '100%' }\"\r\n>\r\n  <div class=\"page-container-title\" *ngIf=\"title\">{{ title }}</div>\r\n  <div class=\"page-container-header\" *ngIf=\"showHeader\">\r\n    <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\r\n  </div>\r\n  <div class=\"page-container-body\">\r\n    <ng-container *ngTemplateOutlet=\"bodyTpl\"></ng-container>\r\n  </div>\r\n</nz-card>\r\n",
                 styles: [".page-container-title{border-left:3px solid #096dd9;color:#1d1d1d;font-size:16px;margin-bottom:16px;padding-left:10px}.page-container-body,.page-container-header{box-sizing:border-box;padding:7px}"]
             },] }
 ];
 PageContainerComponent.ctorParameters = () => [];
 PageContainerComponent.propDecorators = {
     title: [{ type: Input }],
+    showHeader: [{ type: Input }],
     headerTpl: [{ type: ContentChild, args: ["header",] }],
     bodyTpl: [{ type: ContentChild, args: ["body",] }]
 };
@@ -1718,6 +1853,7 @@ class AntdFormService {
         this.formStore = {};
         this.formModifyType = "create";
         // ==================== 私有属性 ====================
+        this.formRegisterStore = {};
         this.labelWidth = "120px";
         this.labelAlign = "right";
         this.labelObservers = {};
@@ -1732,18 +1868,62 @@ class AntdFormService {
         };
     }
     // ==================== 表单创建和初始化 ====================
+    // 判断是否为嵌套 FormGroup 配置
+    isFormGroupConfig(config) {
+        return (typeof config === "object" &&
+            config !== null &&
+            "type" in config &&
+            config.type === "group");
+    }
+    // 递归创建嵌套 FormGroup
+    createNestedFormGroup(fields, disabled) {
+        const groupConfig = {};
+        Object.entries(fields).forEach(([key, fieldConfig]) => {
+            var _a, _b, _c, _d, _e;
+            if (this.isFormGroupConfig(fieldConfig)) {
+                // 递归创建嵌套的 FormGroup
+                groupConfig[key] = this.createNestedFormGroup(fieldConfig.fields, (_a = fieldConfig.disabled) !== null && _a !== void 0 ? _a : disabled);
+            }
+            else {
+                // 创建普通 FormControl
+                groupConfig[key] = [
+                    {
+                        value: fieldConfig.value,
+                        disabled: (_c = (_b = fieldConfig.disabled) !== null && _b !== void 0 ? _b : disabled) !== null && _c !== void 0 ? _c : false,
+                    },
+                    (_e = (_d = fieldConfig.validators) === null || _d === void 0 ? void 0 : _d.call(fieldConfig)) !== null && _e !== void 0 ? _e : [],
+                ];
+            }
+        });
+        return this.fb.group(groupConfig);
+    }
     // 初始化表单
     createFormGroup(name, config, options) {
         const groupConfig = {};
         this.errorMessageStore[name] = {};
         Object.entries(config).forEach(([key, fieldConfig]) => {
             var _a, _b, _c;
-            groupConfig[key] = [
-                { value: fieldConfig.value, disabled: (_a = fieldConfig.disabled) !== null && _a !== void 0 ? _a : false },
-                (_c = (_b = fieldConfig.validators) === null || _b === void 0 ? void 0 : _b.call(fieldConfig)) !== null && _c !== void 0 ? _c : [],
-            ];
-            if (fieldConfig.errorMessages) {
-                this.errorMessageStore[name][key] = fieldConfig.errorMessages;
+            if (this.isFormGroupConfig(fieldConfig)) {
+                // 处理嵌套 FormGroup
+                const nestedGroup = this.createNestedFormGroup(fieldConfig.fields, fieldConfig.disabled);
+                groupConfig[key] = nestedGroup;
+                // 存储嵌套 FormGroup 的错误消息（如果需要）
+                if (fieldConfig.errorMessages) {
+                    this.errorMessageStore[name][key] = fieldConfig.errorMessages;
+                }
+            }
+            else {
+                // 处理普通字段
+                groupConfig[key] = [
+                    {
+                        value: fieldConfig.value,
+                        disabled: (_a = fieldConfig.disabled) !== null && _a !== void 0 ? _a : false,
+                    },
+                    (_c = (_b = fieldConfig.validators) === null || _b === void 0 ? void 0 : _b.call(fieldConfig)) !== null && _c !== void 0 ? _c : [],
+                ];
+                if (fieldConfig.errorMessages) {
+                    this.errorMessageStore[name][key] = fieldConfig.errorMessages;
+                }
             }
         });
         if (options === null || options === void 0 ? void 0 : options.labelWidth) {
@@ -1753,6 +1933,7 @@ class AntdFormService {
             this.labelAlign = options.labelAlign;
         }
         this.formStore[name] = this.fb.group(groupConfig);
+        this.formRegisterStore[name] = true;
         this.setCSSVariablesToTarget(name);
         return this.formStore[name];
     }
@@ -1762,6 +1943,46 @@ class AntdFormService {
         var _a;
         (_a = this.formStore[name]) === null || _a === void 0 ? void 0 : _a.reset(value);
     }
+    // 检测表单是否完成注册
+    isFormRegistered(name) {
+        var _a;
+        return (_a = this.formRegisterStore[name]) !== null && _a !== void 0 ? _a : false;
+    }
+    // 销毁对应的表单
+    destory(names) {
+        names.forEach((name) => {
+            // 2. 清理错误消息存储
+            if (this.errorMessageStore[name]) {
+                delete this.errorMessageStore[name];
+            }
+            // 3. 清理表单注册标记
+            if (this.formRegisterStore[name]) {
+                delete this.formRegisterStore[name];
+            }
+            // 4. 清理表单组（Angular 会自动处理 FormGroup 的清理）
+            if (this.formStore[name]) {
+                delete this.formStore[name];
+            }
+        });
+    }
+    // 根据路径获取嵌套的 FormGroup
+    getNestedFormGroup(formGroup, path) {
+        if (!path || path.trim() === "") {
+            return formGroup;
+        }
+        const pathParts = path.split(".").filter((p) => p.trim() !== "");
+        let currentGroup = formGroup;
+        for (const part of pathParts) {
+            if (!currentGroup || !(currentGroup instanceof FormGroup)) {
+                return null;
+            }
+            currentGroup = currentGroup.get(part);
+            if (!currentGroup || !(currentGroup instanceof FormGroup)) {
+                return null;
+            }
+        }
+        return currentGroup instanceof FormGroup ? currentGroup : null;
+    }
     // 批量添加字段配置
     addFieldsConfig(formName, fieldsConfig, options) {
         var _a;
@@ -1771,8 +1992,8 @@ class AntdFormService {
             failed: [],
         };
         // 1. 验证表单是否存在
-        const formGroup = this.formStore[formName];
-        if (!formGroup) {
+        const rootFormGroup = this.formStore[formName];
+        if (!rootFormGroup) {
             // 如果表单不存在，所有字段都失败
             Object.keys(fieldsConfig).forEach((fieldName) => {
                 var _a;
@@ -1786,20 +2007,41 @@ class AntdFormService {
             result.success = false;
             return result;
         }
-        // 2. 初始化 errorMessageStore（如果不存在）
+        // 2. 获取目标 FormGroup（支持嵌套路径）
+        const targetPath = options === null || options === void 0 ? void 0 : options.targetPath;
+        const targetFormGroup = targetPath
+            ? this.getNestedFormGroup(rootFormGroup, targetPath)
+            : rootFormGroup;
+        if (!targetFormGroup) {
+            // 如果目标 FormGroup 不存在，所有字段都失败
+            Object.keys(fieldsConfig).forEach((fieldName) => {
+                var _a;
+                const error = targetPath
+                    ? `Target FormGroup at path "${targetPath}" not found`
+                    : `FormGroup not found`;
+                result.failed.push({
+                    fieldName,
+                    error,
+                });
+                (_a = options === null || options === void 0 ? void 0 : options.onFieldAdded) === null || _a === void 0 ? void 0 : _a.call(options, fieldName, false, error);
+            });
+            result.success = false;
+            return result;
+        }
+        // 3. 初始化 errorMessageStore（如果不存在）
         if (!this.errorMessageStore[formName]) {
             this.errorMessageStore[formName] = {};
         }
-        // 3. 批量构建控件配置
+        // 4. 批量构建控件配置
         const controlsToAdd = {};
         const errorMessagesToAdd = {};
-        // 4. 遍历所有字段配置，进行验证和构建
+        // 5. 遍历所有字段配置，进行验证和构建
         Object.entries(fieldsConfig).forEach(([fieldName, fieldConfig]) => {
             var _a, _b, _c, _d, _e;
             try {
-                // 4.1 检查字段是否已存在
-                if (formGroup.get(fieldName)) {
-                    const error = `Field "${fieldName}" already exists`;
+                // 5.1 检查字段是否已存在
+                if (targetFormGroup.get(fieldName)) {
+                    const error = `Field "${fieldName}" already exists${targetPath ? ` in "${targetPath}"` : ""}`;
                     result.failed.push({
                         fieldName,
                         error,
@@ -1807,20 +2049,38 @@ class AntdFormService {
                     (_a = options === null || options === void 0 ? void 0 : options.onFieldAdded) === null || _a === void 0 ? void 0 : _a.call(options, fieldName, false, error);
                     return;
                 }
-                // 4.2 创建控件
-                const controlOptions = {
-                    validators: (_c = (_b = fieldConfig.validators) === null || _b === void 0 ? void 0 : _b.call(fieldConfig)) !== null && _c !== void 0 ? _c : [],
-                };
-                const control = this.fb.control(fieldConfig.value, controlOptions);
-                // 设置 disabled 状态
-                if (fieldConfig.disabled) {
-                    control.disable();
+                // 5.2 创建控件
+                let control;
+                if (this.isFormGroupConfig(fieldConfig)) {
+                    // 创建嵌套 FormGroup
+                    control = this.createNestedFormGroup(fieldConfig.fields, fieldConfig.disabled);
+                    // 存储嵌套 FormGroup 的错误消息（如果需要）
+                    if (fieldConfig.errorMessages) {
+                        const errorMessageKey = targetPath
+                            ? `${targetPath}.${fieldName}`
+                            : fieldName;
+                        errorMessagesToAdd[errorMessageKey] = fieldConfig.errorMessages;
+                    }
                 }
-                controlsToAdd[fieldName] = control;
-                // 存储错误消息
-                if (fieldConfig.errorMessages) {
-                    errorMessagesToAdd[fieldName] = fieldConfig.errorMessages;
+                else {
+                    // 创建普通 FormControl
+                    const controlOptions = {
+                        validators: (_c = (_b = fieldConfig.validators) === null || _b === void 0 ? void 0 : _b.call(fieldConfig)) !== null && _c !== void 0 ? _c : [],
+                    };
+                    control = this.fb.control(fieldConfig.value, controlOptions);
+                    // 设置 disabled 状态
+                    if (fieldConfig.disabled) {
+                        control.disable();
+                    }
+                    // 存储错误消息
+                    if (fieldConfig.errorMessages) {
+                        const errorMessageKey = targetPath
+                            ? `${targetPath}.${fieldName}`
+                            : fieldName;
+                        errorMessagesToAdd[errorMessageKey] = fieldConfig.errorMessages;
+                    }
                 }
+                controlsToAdd[fieldName] = control;
                 result.added.push(fieldName);
                 (_d = options === null || options === void 0 ? void 0 : options.onFieldAdded) === null || _d === void 0 ? void 0 : _d.call(options, fieldName, true);
             }
@@ -1833,18 +2093,18 @@ class AntdFormService {
                 (_e = options === null || options === void 0 ? void 0 : options.onFieldAdded) === null || _e === void 0 ? void 0 : _e.call(options, fieldName, false, errorMessage);
             }
         });
-        // 5. 批量添加到 FormGroup
+        // 6. 批量添加到目标 FormGroup
         if (Object.keys(controlsToAdd).length > 0) {
             Object.entries(controlsToAdd).forEach(([fieldName, control]) => {
-                formGroup.addControl(fieldName, control);
+                targetFormGroup.addControl(fieldName, control);
             });
-            // 6. 批量存储错误消息
+            // 7. 批量存储错误消息
             Object.entries(errorMessagesToAdd).forEach(([key, messages]) => {
                 this.errorMessageStore[formName][key] = messages;
             });
-            // 7. 更新表单验证状态
+            // 8. 更新表单验证状态
             if (options === null || options === void 0 ? void 0 : options.updateValueAndValidity) {
-                formGroup.updateValueAndValidity({
+                targetFormGroup.updateValueAndValidity({
                     emitEvent: (_a = options === null || options === void 0 ? void 0 : options.emitEvent) !== null && _a !== void 0 ? _a : true,
                 });
             }
@@ -2040,10 +2300,17 @@ class AntdFormService {
             let appliedCount = 0;
             dom.forEach((item) => {
                 const target = item;
-                if (target.style.width !== this.labelWidth ||
-                    target.style.textAlign !== this.labelAlign) {
-                    target.style.width = this.labelWidth;
-                    target.style.textAlign = this.labelAlign;
+                if (target.closest(".pro-table-container")) {
+                    return;
+                }
+                const customWidth = target.getAttribute("custom-width");
+                const customAlign = target.getAttribute("custom-align");
+                const finalWidth = customWidth || this.labelWidth;
+                const finalTextAlign = customAlign || this.labelAlign;
+                if (target.style.width !== finalWidth ||
+                    target.style.textAlign !== finalTextAlign) {
+                    target.style.width = finalWidth;
+                    target.style.textAlign = finalTextAlign;
                     appliedCount++;
                 }
             });
@@ -2105,7 +2372,7 @@ class AntdFormService {
         return valueChanges$.subscribe(handler);
     }
 }
-AntdFormService.ɵprov = ɵɵdefineInjectable({ factory: function AntdFormService_Factory() { return new AntdFormService(ɵɵinject(FormBuilder)); }, token: AntdFormService, providedIn: "root" });
+AntdFormService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AntdFormService_Factory() { return new AntdFormService(i0.ɵɵinject(i1.FormBuilder)); }, token: AntdFormService, providedIn: "root" });
 AntdFormService.decorators = [
     { type: Injectable, args: [{ providedIn: "root" },] }
 ];
@@ -2441,8 +2708,36 @@ class ArrayFormService {
         }
         return form.data.some((item) => item.isEdit);
     }
+    // 销毁对应的表单
+    destory(names) {
+        names.forEach((name) => {
+            if (this.formStore[name]) {
+                // 清理表单数据
+                delete this.formStore[name];
+            }
+        });
+    }
+    // 重置表单数组
+    resetFormArray(name) {
+        const form = this.formStore[name];
+        if (!form) {
+            return;
+        }
+        // 1. 清空数据数组
+        form.data = [];
+        // 2. 清理所有快照
+        form.initialSnapshot = {};
+        form.editingSnapshot = {};
+        // 3. 清理校验结果
+        form.validationResults = {};
+        // 4. 重置 touched 状态
+        form.allTouched = false;
+        form.rowTouched = {};
+        // 5. 如果配置了自动更新，更新外部数组引用
+        this.autoUpdateArrayReference(name);
+    }
 }
-ArrayFormService.ɵprov = ɵɵdefineInjectable({ factory: function ArrayFormService_Factory() { return new ArrayFormService(); }, token: ArrayFormService, providedIn: "root" });
+ArrayFormService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ArrayFormService_Factory() { return new ArrayFormService(); }, token: ArrayFormService, providedIn: "root" });
 ArrayFormService.decorators = [
     { type: Injectable, args: [{
                 providedIn: "root",