@yibozhang/pro-table 0.0.5 → 0.0.7

package/bundles/yibozhang-pro-table.umd.js

@@ -1,11 +1,31 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('lodash-es'), require('rxjs'), require('@angular/cdk/drag-drop'), require('@angular/common'), require('@angular/common/http'), require('@angular/forms'), require('@angular/router'), require('ng-zorro-antd/button'), require('ng-zorro-antd/checkbox'), require('ng-zorro-antd/date-picker'), require('ng-zorro-antd/form'), require('ng-zorro-antd/grid'), require('ng-zorro-antd/icon'), require('ng-zorro-antd/input'), require('ng-zorro-antd/modal'), require('ng-zorro-antd/popover'), require('ng-zorro-antd/select'), require('ng-zorro-antd/space'), require('ng-zorro-antd/table'), require('ng-zorro-antd/typography'), require('ng-zorro-antd/card'), require('sortablejs'), require('ng-zorro-antd/auto-complete'), require('ng-zorro-antd/input-number'), require('ng-zorro-antd/tooltip'), require('rxjs/operators'), require('uuid')) :
     typeof define === 'function' && define.amd ? define('@yibozhang/pro-table', ['exports', '@angular/core', 'lodash-es', 'rxjs', '@angular/cdk/drag-drop', '@angular/common', '@angular/common/http', '@angular/forms', '@angular/router', 'ng-zorro-antd/button', 'ng-zorro-antd/checkbox', 'ng-zorro-antd/date-picker', 'ng-zorro-antd/form', 'ng-zorro-antd/grid', 'ng-zorro-antd/icon', 'ng-zorro-antd/input', 'ng-zorro-antd/modal', 'ng-zorro-antd/popover', 'ng-zorro-antd/select', 'ng-zorro-antd/space', 'ng-zorro-antd/table', 'ng-zorro-antd/typography', 'ng-zorro-antd/card', 'sortablejs', 'ng-zorro-antd/auto-complete', 'ng-zorro-antd/input-number', 'ng-zorro-antd/tooltip', 'rxjs/operators', 'uuid'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.yibozhang = global.yibozhang || {}, global.yibozhang['pro-table'] = {}), global.ng.core, global.lodashEs, global.rxjs, global.ng.cdk.dragDrop, global.ng.common, global.ng.common.http, global.ng.forms, global.ng.router, global.button, global.checkbox, global.datePicker, global.form, global.grid, global.icon, global.input, global.modal, global.popover, global.select, global.space, global.table, global.typography, global.card, global.Sortable, global.autoComplete, global.inputNumber, global.tooltip, global.rxjs.operators, global.uuid));
-}(this, (function (exports, i0, lodashEs, rxjs, dragDrop, common, http, i1, router, button, checkbox, datePicker, form, grid, icon, input, modal, popover, select, space, table, typography, card, Sortable, autoComplete, inputNumber, tooltip, operators, uuid) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.yibozhang = global.yibozhang || {}, global.yibozhang["pro-table"] = {}), global.ng.core, global.lodashEs, global.rxjs, global.ng.cdk.dragDrop, global.ng.common, global.ng.common.http, global.ng.forms, global.ng.router, global.button, global.checkbox, global.datePicker, global.form, global.grid, global.icon, global.input, global.modal, global.popover, global.select, global.space, global.table, global.typography, global.card, global.Sortable, global.autoComplete, global.inputNumber, global.tooltip, global.rxjs.operators, global.uuid));
+})(this, (function (exports, i0, lodashEs, rxjs, dragDrop, common, http, i1, router, button, checkbox, datePicker, form, grid, icon, input, modal, popover, select, space, table, typography, card, Sortable, autoComplete, inputNumber, tooltip, operators, uuid) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
 
     /******************************************************************************
@@ -669,8 +689,10 @@
             };
             this._loading = false;
             this._selectedTableRow = null;
-            // 选中的行数据（用于复选框选择）
+            // 选中的行数据（用于复选框选择）- 保留用于兼容性
             this._selectedRows = [];
+            // 使用 Set 存储选中项的 ID，支持跨页选中
+            this._selectedRowIds = new Set();
             // 全选状态
             this._checkedAll = false;
             // 半选状态（部分选中）
@@ -1267,7 +1289,12 @@
             return this._selectedTableRow;
         };
         ProTableComponent.prototype.getCheckedRows = function () {
-            return this._selectedRows;
+            if (!this.showCheckbox) {
+                return [];
+            }
+            // 返回当前数据源中所有 checked 为 true 的项
+            // 注意：如果需要获取所有页的选中项，需要遍历所有数据源或使用 _selectedRowIds
+            return this.dataSource.filter(function (row) { return row.checked === true; });
         };
         // 获取指定名称的模板
         ProTableComponent.prototype.getTemplate = function (name) {
@@ -1314,14 +1341,16 @@
                 return false;
             return this.rowDisabled ? this.rowDisabled(data) : false;
         };
-        // 检查行是否被复选框选中
+        // 检查行是否被复选框选中（数据驱动模式）
         ProTableComponent.prototype.isRowChecked = function (data) {
             if (!this.showCheckbox)
                 return false;
-            return this._selectedRows.some(function (row) { return JSON.stringify(row) === JSON.stringify(data); });
+            // 直接读取数据对象的 checked 属性
+            return data.checked === true;
         };
-        // 切换行的选中状态
+        // 切换行的选中状态（数据驱动模式，保留用于兼容）
         ProTableComponent.prototype.toggleRowChecked = function (data, checked, event) {
+            var _this = this;
             if (event) {
                 event.stopPropagation(); // 阻止事件冒泡，避免触发行点击
             }
@@ -1329,9 +1358,21 @@
             if (this.isRowDisabled(data)) {
                 return;
             }
-            var index = this._selectedRows.findIndex(function (row) { return JSON.stringify(row) === JSON.stringify(data); });
+            // 直接设置数据对象的 checked 属性
+            data.checked = checked;
+            // 同步更新 _selectedRowIds（用于跨页选中）
+            var id = this.getRowId(data);
+            if (id !== undefined) {
+                if (checked) {
+                    this._selectedRowIds.add(id);
+                }
+                else {
+                    this._selectedRowIds.delete(id);
+                }
+            }
+            // 同步更新 _selectedRows（用于兼容性）
+            var index = this._selectedRows.findIndex(function (row) { return _this.isSameRow(row, data); });
             if (checked) {
-                // 选中
                 if (index === -1) {
                     this._selectedRows.push(data);
                 }
@@ -1339,19 +1380,18 @@
                 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();
         };
-        // 更新全选状态
+        // 更新全选状态（数据驱动模式）
         ProTableComponent.prototype.updateCheckAllStatus = function () {
             var _this = this;
             if (!this.showCheckbox || !Array.isArray(this.dataSource)) {
@@ -1361,40 +1401,122 @@
             }
             // 只计算可用的行（未禁用的行）
             var availableRows = this.dataSource.filter(function (row) { return !_this.isRowDisabled(row); });
-            var checkedCount = this._selectedRows.length;
+            // 基于数据对象的 checked 属性计算
+            var checkedCount = availableRows.filter(function (row) { return row.checked === true; }).length;
             var totalCount = availableRows.length;
             this._checkedAll =
                 totalCount > 0 && checkedCount > 0 && checkedCount === totalCount;
             this._indeterminate = checkedCount > 0 && checkedCount < totalCount;
         };
-        // 全选/取消全选
+        // 全选/取消全选（数据驱动模式）
         ProTableComponent.prototype.toggleCheckAll = function (checked, event) {
             var _this = this;
             if (event) {
                 event.stopPropagation();
             }
+            // 只处理可用的行（未禁用的行）
+            var availableRows = this.dataSource.filter(function (row) { return !_this.isRowDisabled(row); });
+            // 批量设置 checked 属性
+            availableRows.forEach(function (row) {
+                row.checked = checked;
+                // 同步更新 _selectedRowIds（用于跨页选中）
+                var 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(function (row) { return !_this.isRowDisabled(row); });
+                this._selectedRows = __spread(availableRows);
                 // 同步设置高亮选中行为第一条可选数据
-                var availableRows = this._selectedRows;
                 this._selectedTableRow =
                     availableRows.length > 0 ? availableRows[0] : null;
             }
             else {
-                // 取消全选
                 this._selectedRows = [];
                 // 取消高亮
                 this._selectedTableRow = null;
             }
             this.updateCheckAllStatus();
         };
-        // 获取选中的行数据
+        // 获取选中的行数据（保留用于兼容性）
         ProTableComponent.prototype.getSelectedRows = function () {
-            return this._selectedRows;
+            return this.getCheckedRows();
         };
-        // 清空选中的行
+        // 处理行 checkbox 变化事件（数据驱动模式）
+        ProTableComponent.prototype.handleRowCheckedChange = function (data, checked) {
+            var _this = this;
+            if (this.isRowDisabled(data)) {
+                return;
+            }
+            // 数据对象的 checked 属性已经通过双向绑定自动更新
+            // 这里只需要同步更新 _selectedRowIds 和 _selectedRows
+            // 同步更新 _selectedRowIds（用于跨页选中）
+            var id = this.getRowId(data);
+            if (id !== undefined) {
+                if (checked) {
+                    this._selectedRowIds.add(id);
+                }
+                else {
+                    this._selectedRowIds.delete(id);
+                }
+            }
+            // 同步更新 _selectedRows（用于兼容性）
+            var index = this._selectedRows.findIndex(function (row) { return _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();
+        };
+        // 刷新全选状态（用于其他场景）
+        ProTableComponent.prototype.refreshCheckAllStatus = function () {
+            this.updateCheckAllStatus();
+        };
+        // 获取行的唯一标识（用于跨页选中）
+        ProTableComponent.prototype.getRowId = function (data) {
+            var _a, _b;
+            return (_b = (_a = data.id) !== null && _a !== void 0 ? _a : data.key) !== null && _b !== void 0 ? _b : undefined;
+        };
+        // 判断两行是否为同一行
+        ProTableComponent.prototype.isSameRow = function (row1, row2) {
+            var id1 = this.getRowId(row1);
+            var id2 = this.getRowId(row2);
+            if (id1 !== undefined && id2 !== undefined) {
+                return id1 === id2;
+            }
+            // fallback 到 JSON 比较
+            return JSON.stringify(row1) === JSON.stringify(row2);
+        };
+        // 清空选中的行（数据驱动模式）
         ProTableComponent.prototype.clearSelectedRows = function () {
+            // 清空当前数据源中所有项的 checked 状态
+            if (Array.isArray(this.dataSource)) {
+                this.dataSource.forEach(function (row) {
+                    row.checked = false;
+                });
+            }
+            // 清空选中集合
+            this._selectedRowIds.clear();
             this._selectedRows = [];
             this._checkedAll = false;
             this._indeterminate = false;
@@ -1466,7 +1588,8 @@
         };
         ProTableComponent.prototype.handleQuery = function (afterDelete) {
             return __awaiter(this, void 0, void 0, function () {
-                var result, error_4;
+                var previousDataSource, result, newDataIds_1, error_4;
+                var _this = this;
                 return __generator(this, function (_d) {
                     switch (_d.label) {
                         case 0:
@@ -1477,6 +1600,7 @@
                                 this._pageInfo.pageIndex > 1) {
                                 this._pageInfo.pageIndex = this._pageInfo.pageIndex - 1;
                             }
+                            previousDataSource = afterDelete && this.showCheckbox ? __spread(this.dataSource) : [];
                             this._loading = true;
                             if (!this.request) return [3 /*break*/, 6];
                             _d.label = 1;
@@ -1490,7 +1614,38 @@
                                     : {})))];
                         case 2:
                             result = _d.sent();
-                            this.dataSource = result.data || [];
+                            // 自动注入 checked 字段，支持跨页选中
+                            if (this.showCheckbox) {
+                                this.dataSource = (result.data || []).map(function (item) {
+                                    var id = _this.getRowId(item);
+                                    // 如果数据已有 checked 属性，保留；否则根据 _selectedRowIds 判断
+                                    var 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) {
+                                    newDataIds_1 = new Set(this.dataSource.map(function (item) { return _this.getRowId(item); }));
+                                    // 遍历之前的数据源，如果不在新数据源中，说明被删除了，需要清除其选中状态
+                                    previousDataSource.forEach(function (oldItem) {
+                                        var oldId = _this.getRowId(oldItem);
+                                        if (oldId !== undefined && !newDataIds_1.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") {
@@ -1518,9 +1673,7 @@
                             console.warn("未提供 _request 回调函数");
                             this._loading = false;
                             _d.label = 7;
-                        case 7:
-                            this.clearSelectedRows();
-                            return [2 /*return*/];
+                        case 7: return [2 /*return*/];
                     }
                 });
             });
@@ -1632,7 +1785,7 @@
     ProTableComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -1679,6 +1832,7 @@
     var PageContainerComponent = /** @class */ (function () {
         function PageContainerComponent() {
             this.title = "";
+            this.showHeader = true;
         }
         PageContainerComponent.prototype.ngOnInit = function () { };
         return PageContainerComponent;
@@ -1686,13 +1840,14 @@
     PageContainerComponent.decorators = [
         { type: i0.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 = function () { return []; };
     PageContainerComponent.propDecorators = {
         title: [{ type: i0.Input }],
+        showHeader: [{ type: i0.Input }],
         headerTpl: [{ type: i0.ContentChild, args: ["header",] }],
         bodyTpl: [{ type: i0.ContentChild, args: ["body",] }]
     };
@@ -1995,7 +2150,7 @@
                 this.sortableInstance = null;
             }
             if (this.sortableContainer && this.sortableContainer.nativeElement) {
-                this.sortableInstance = new Sortable__default['default'](this.sortableContainer.nativeElement, {
+                this.sortableInstance = new Sortable__default["default"](this.sortableContainer.nativeElement, {
                     animation: 150,
                     ghostClass: "sortable-ghost",
                     chosenClass: "sortable-chosen",
@@ -2324,6 +2479,7 @@
             this.formStore = {};
             this.formModifyType = "create";
             // ==================== 私有属性 ====================
+            this.formRegisterStore = {};
             this.labelWidth = "120px";
             this.labelAlign = "right";
             this.labelObservers = {};
@@ -2338,6 +2494,37 @@
             };
         }
         // ==================== 表单创建和初始化 ====================
+        // 判断是否为嵌套 FormGroup 配置
+        AntdFormService.prototype.isFormGroupConfig = function (config) {
+            return (typeof config === "object" &&
+                config !== null &&
+                "type" in config &&
+                config.type === "group");
+        };
+        // 递归创建嵌套 FormGroup
+        AntdFormService.prototype.createNestedFormGroup = function (fields, disabled) {
+            var _this = this;
+            var groupConfig = {};
+            Object.entries(fields).forEach(function (_f) {
+                var _g = __read(_f, 2), key = _g[0], fieldConfig = _g[1];
+                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);
+        };
         // 初始化表单
         AntdFormService.prototype.createFormGroup = function (name, config, options) {
             var _this = this;
@@ -2346,12 +2533,27 @@
             Object.entries(config).forEach(function (_f) {
                 var _g = __read(_f, 2), key = _g[0], fieldConfig = _g[1];
                 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
+                    var 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) {
@@ -2361,6 +2563,7 @@
                 this.labelAlign = options.labelAlign;
             }
             this.formStore[name] = this.fb.group(groupConfig);
+            this.formRegisterStore[name] = true;
             this.setCSSVariablesToTarget(name);
             return this.formStore[name];
         };
@@ -2370,6 +2573,58 @@
             var _a;
             (_a = this.formStore[name]) === null || _a === void 0 ? void 0 : _a.reset(value);
         };
+        // 检测表单是否完成注册
+        AntdFormService.prototype.isFormRegistered = function (name) {
+            var _a;
+            return (_a = this.formRegisterStore[name]) !== null && _a !== void 0 ? _a : false;
+        };
+        // 销毁对应的表单
+        AntdFormService.prototype.destory = function (names) {
+            var _this = this;
+            names.forEach(function (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
+        AntdFormService.prototype.getNestedFormGroup = function (formGroup, path) {
+            var e_1, _f;
+            if (!path || path.trim() === "") {
+                return formGroup;
+            }
+            var pathParts = path.split(".").filter(function (p) { return p.trim() !== ""; });
+            var currentGroup = formGroup;
+            try {
+                for (var pathParts_1 = __values(pathParts), pathParts_1_1 = pathParts_1.next(); !pathParts_1_1.done; pathParts_1_1 = pathParts_1.next()) {
+                    var part = pathParts_1_1.value;
+                    if (!currentGroup || !(currentGroup instanceof i1.FormGroup)) {
+                        return null;
+                    }
+                    currentGroup = currentGroup.get(part);
+                    if (!currentGroup || !(currentGroup instanceof i1.FormGroup)) {
+                        return null;
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (pathParts_1_1 && !pathParts_1_1.done && (_f = pathParts_1.return)) _f.call(pathParts_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return currentGroup instanceof i1.FormGroup ? currentGroup : null;
+        };
         // 批量添加字段配置
         AntdFormService.prototype.addFieldsConfig = function (formName, fieldsConfig, options) {
             var _this = this;
@@ -2380,8 +2635,8 @@
                 failed: [],
             };
             // 1. 验证表单是否存在
-            var formGroup = this.formStore[formName];
-            if (!formGroup) {
+            var rootFormGroup = this.formStore[formName];
+            if (!rootFormGroup) {
                 // 如果表单不存在，所有字段都失败
                 Object.keys(fieldsConfig).forEach(function (fieldName) {
                     var _a;
@@ -2395,21 +2650,42 @@
                 result.success = false;
                 return result;
             }
-            // 2. 初始化 errorMessageStore（如果不存在）
+            // 2. 获取目标 FormGroup（支持嵌套路径）
+            var targetPath = options === null || options === void 0 ? void 0 : options.targetPath;
+            var targetFormGroup = targetPath
+                ? this.getNestedFormGroup(rootFormGroup, targetPath)
+                : rootFormGroup;
+            if (!targetFormGroup) {
+                // 如果目标 FormGroup 不存在，所有字段都失败
+                Object.keys(fieldsConfig).forEach(function (fieldName) {
+                    var _a;
+                    var error = targetPath
+                        ? "Target FormGroup at path \"" + targetPath + "\" not found"
+                        : "FormGroup not found";
+                    result.failed.push({
+                        fieldName: fieldName,
+                        error: 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. 批量构建控件配置
             var controlsToAdd = {};
             var errorMessagesToAdd = {};
-            // 4. 遍历所有字段配置，进行验证和构建
+            // 5. 遍历所有字段配置，进行验证和构建
             Object.entries(fieldsConfig).forEach(function (_f) {
                 var _g = __read(_f, 2), fieldName = _g[0], fieldConfig = _g[1];
                 var _a, _b, _c, _d, _e;
                 try {
-                    // 4.1 检查字段是否已存在
-                    if (formGroup.get(fieldName)) {
-                        var error = "Field \"" + fieldName + "\" already exists";
+                    // 5.1 检查字段是否已存在
+                    if (targetFormGroup.get(fieldName)) {
+                        var error = "Field \"" + fieldName + "\" already exists" + (targetPath ? " in \"" + targetPath + "\"" : "");
                         result.failed.push({
                             fieldName: fieldName,
                             error: error,
@@ -2417,20 +2693,38 @@
                         (_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 创建控件
-                    var controlOptions = {
-                        validators: (_c = (_b = fieldConfig.validators) === null || _b === void 0 ? void 0 : _b.call(fieldConfig)) !== null && _c !== void 0 ? _c : [],
-                    };
-                    var control = _this.fb.control(fieldConfig.value, controlOptions);
-                    // 设置 disabled 状态
-                    if (fieldConfig.disabled) {
-                        control.disable();
+                    // 5.2 创建控件
+                    var control = void 0;
+                    if (_this.isFormGroupConfig(fieldConfig)) {
+                        // 创建嵌套 FormGroup
+                        control = _this.createNestedFormGroup(fieldConfig.fields, fieldConfig.disabled);
+                        // 存储嵌套 FormGroup 的错误消息（如果需要）
+                        if (fieldConfig.errorMessages) {
+                            var errorMessageKey = targetPath
+                                ? targetPath + "." + fieldName
+                                : fieldName;
+                            errorMessagesToAdd[errorMessageKey] = fieldConfig.errorMessages;
+                        }
                     }
-                    controlsToAdd[fieldName] = control;
-                    // 存储错误消息
-                    if (fieldConfig.errorMessages) {
-                        errorMessagesToAdd[fieldName] = fieldConfig.errorMessages;
+                    else {
+                        // 创建普通 FormControl
+                        var 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) {
+                            var 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);
                 }
@@ -2443,20 +2737,20 @@
                     (_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(function (_f) {
                     var _g = __read(_f, 2), fieldName = _g[0], control = _g[1];
-                    formGroup.addControl(fieldName, control);
+                    targetFormGroup.addControl(fieldName, control);
                 });
-                // 6. 批量存储错误消息
+                // 7. 批量存储错误消息
                 Object.entries(errorMessagesToAdd).forEach(function (_f) {
                     var _g = __read(_f, 2), key = _g[0], messages = _g[1];
                     _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,
                     });
                 }
@@ -2587,7 +2881,7 @@
         // ==================== 错误消息相关 ====================
         // 获取字段首条错误提示
         AntdFormService.prototype.getFieldErrorMessage = function (name, controlName) {
-            var e_1, _f;
+            var e_2, _f;
             var _a;
             var formGroup = this.formStore[name];
             if (!formGroup) {
@@ -2615,12 +2909,12 @@
                     }
                 }
             }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
             finally {
                 try {
                     if (_h && !_h.done && (_f = _g.return)) _f.call(_g);
                 }
-                finally { if (e_1) throw e_1.error; }
+                finally { if (e_2) throw e_2.error; }
             }
             return "";
         };
@@ -2666,10 +2960,17 @@
                 var appliedCount = 0;
                 dom.forEach(function (item) {
                     var 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;
+                    }
+                    var customWidth = target.getAttribute("custom-width");
+                    var customAlign = target.getAttribute("custom-align");
+                    var finalWidth = customWidth || _this.labelWidth;
+                    var finalTextAlign = customAlign || _this.labelAlign;
+                    if (target.style.width !== finalWidth ||
+                        target.style.textAlign !== finalTextAlign) {
+                        target.style.width = finalWidth;
+                        target.style.textAlign = finalTextAlign;
                         appliedCount++;
                     }
                 });
@@ -2734,7 +3035,7 @@
         };
         return AntdFormService;
     }());
-    AntdFormService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AntdFormService_Factory() { return new AntdFormService(i0.ɵɵinject(i1.FormBuilder)); }, token: AntdFormService, providedIn: "root" });
+    AntdFormService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function AntdFormService_Factory() { return new AntdFormService(i0__namespace.ɵɵinject(i1__namespace.FormBuilder)); }, token: AntdFormService, providedIn: "root" });
     AntdFormService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: "root" },] }
     ];
@@ -3111,9 +3412,38 @@
             }
             return form.data.some(function (item) { return item.isEdit; });
         };
+        // 销毁对应的表单
+        ArrayFormService.prototype.destory = function (names) {
+            var _this = this;
+            names.forEach(function (name) {
+                if (_this.formStore[name]) {
+                    // 清理表单数据
+                    delete _this.formStore[name];
+                }
+            });
+        };
+        // 重置表单数组
+        ArrayFormService.prototype.resetFormArray = function (name) {
+            var 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);
+        };
         return ArrayFormService;
     }());
-    ArrayFormService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ArrayFormService_Factory() { return new ArrayFormService(); }, token: ArrayFormService, providedIn: "root" });
+    ArrayFormService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ArrayFormService_Factory() { return new ArrayFormService(); }, token: ArrayFormService, providedIn: "root" });
     ArrayFormService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: "root",
@@ -3139,18 +3469,18 @@
     exports.PlateInputModule = PlateInputModule;
     exports.ProTableComponent = ProTableComponent;
     exports.ProTableModule = ProTableModule;
-    exports.ɵ0 = ɵ0;
-    exports.ɵ1 = ɵ1;
-    exports.ɵ2 = ɵ2;
-    exports.ɵa = PageContainerModule;
-    exports.ɵb = PageContainerComponent;
-    exports.ɵc = TableSearchBarModule;
-    exports.ɵd = TableSearchBarComponent;
-    exports.ɵe = PlateInputComponent;
-    exports.ɵf = ColmunsSettingComponent;
-    exports.ɵg = DynamicSearchFieldComponent;
+    exports["ɵ0"] = ɵ0;
+    exports["ɵ1"] = ɵ1;
+    exports["ɵ2"] = ɵ2;
+    exports["ɵa"] = PageContainerModule;
+    exports["ɵb"] = PageContainerComponent;
+    exports["ɵc"] = TableSearchBarModule;
+    exports["ɵd"] = TableSearchBarComponent;
+    exports["ɵe"] = PlateInputComponent;
+    exports["ɵf"] = ColmunsSettingComponent;
+    exports["ɵg"] = DynamicSearchFieldComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=yibozhang-pro-table.umd.js.map