fantasy-ngzorro 2.1.58 → 2.1.59

package/README.md

@@ -35,6 +35,7 @@
 | MC | 2023-2-10 | Readme 创建；按钮、按钮组、通用表格、筛选器、状态、详情头、详情单头、详情明细文档 |
 | MC | 2023-2-13 | 表单、明细表单、间隔、小标题文档；组件字段增加必填说明 |
 | — | 2026-5-20 | 补充 hd-table、hd-detail-lines-page 等组件；完善公共子类型（SelectOption、FormItem 等）文档 |
+| — | 2026-9-18 | `hd-detail-lines-page` 对齐 `hd-table` 支持虚拟滚动（`virtualScroll` / `virtualItemSize`）；千行勾选时减少 DOM 卡顿 |
 | — | 2026-9-17 | hd-table / hd-detail-lines / hd-detail-lines-page 支持 `selectDisabledField` / `rowInvalidField`：按行字段控制勾选禁用、失效行样式 |
 | — | 2026-9-14 | 新增 `hd-accessory-list` 附件列表组件（分组 name + accessoryList，点击下载/查看） |
 | — | 2026-6-23 | hd-table 状态列支持 `stateField` 自定义取值字段、`isState` 按列名取值；hd-form Input 支持 `prefix` / `prefixIcon`；hd-detail-lines-page 支持 `isCrossPageSelect` 跨页勾选开关 |
@@ -706,7 +707,9 @@ onDetailLinesPageSizeChange(pageSize: number) {
 | tablePageIndexChange | EventEmitter | — | 页码变化 |
 | tablePageSizeChange | EventEmitter | — | 每页条数变化（组件内会重置到第 1 页） |
 | pageChange | EventEmitter | — | 任意分页变化 |
-| showSelected / allowDrop / showTotal / selectDisabledField / rowInvalidField 等 | — | — | 同 hd-detail-lines |
+| showSelected / allowDrop / showTotal / selectDisabledField / rowInvalidField 等 | — | — | 同 hd-detail-lines；`allowDrop` 开启时虚拟滚动自动关闭 |
+| virtualScroll | boolean | true | 与 hd-table 一致：当前页行数多（或已设 `scroll.y`）时自动虚拟滚动，减轻千行勾选卡顿 |
+| virtualItemSize | number | — | 虚拟滚动行高；不传则默认/自动测量 |
 | isCrossPageSelect | boolean | — | 跨页勾选 |
 
 分页可选条数：`10 / 50 / 100 / 200 / 500 / 1000`。模板中 `index` 为**全局序号**：`(pageIndex - 1) * pageSize + 行号`。

package/bundles/fantasy-ngzorro.umd.js

@@ -1777,6 +1777,10 @@
             this.tableData = new Page();
             this.showSelected = false;
             this.allowDrop = false;
+            /**
+             * 与 hd-table 一致：行数多时自动虚拟滚动；拖拽排序开启时强制关闭
+             */
+            this.virtualScroll = true;
             /**
              * 不传则按列宽与容器宽度自动计算横向滚动
              */
@@ -1800,6 +1804,20 @@
             this.mapOfCheckedId = {};
             this.mapOfCheckList = {};
             this.isCrossPageSelectLocal = false;
+            this.showTable = true;
+            /**
+             * 自动测量前的兜底行高
+             */
+            this.measuredVirtualItemSize = 47;
+            this.virtualScrollActive = null;
+            /**
+             * 虚拟滚动按数组下标追踪，避免业务主键 trackBy 导致 CDK 行复用错位
+             */
+            this.virtualTrackByRow = (/**
+             * @param {?} index
+             * @return {?}
+             */
+            function (index) { return index; });
         }
         Object.defineProperty(HdDetailLinesPageComponent.prototype, "effectiveScroll", {
             get: /**
@@ -1811,6 +1829,79 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(HdDetailLinesPageComponent.prototype, "effectiveVirtualItemSize", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                if (this.virtualItemSize != null && this.virtualItemSize > 0) {
+                    return this.virtualItemSize;
+                }
+                return this.measuredVirtualItemSize;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(HdDetailLinesPageComponent.prototype, "needsVerticalScroll", {
+            /** 当前页内容高度是否超出视口 / 已指定 scroll.y */
+            get: /**
+             * 当前页内容高度是否超出视口 / 已指定 scroll.y
+             * @return {?}
+             */
+            function () {
+                /** @type {?} */
+                var rowCount = this.displayLines ? this.displayLines.length : 0;
+                if (rowCount <= 0) {
+                    return false;
+                }
+                /** @type {?} */
+                var base = this.effectiveScroll;
+                if (base && base.y) {
+                    // 父级已定高（如弹窗），行稍多就开虚拟，避免千行 DOM
+                    return rowCount > 20;
+                }
+                /** @type {?} */
+                var maxOffset = 200;
+                /** @type {?} */
+                var estimatedHeight = rowCount * this.effectiveVirtualItemSize;
+                if (typeof window !== "undefined") {
+                    return estimatedHeight > window.innerHeight - maxOffset;
+                }
+                return rowCount > 100;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(HdDetailLinesPageComponent.prototype, "useVirtualScroll", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                if (!this.virtualScroll || this.allowDrop) {
+                    return false;
+                }
+                return this.needsVerticalScroll;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(HdDetailLinesPageComponent.prototype, "resolvedScroll", {
+            /** 虚拟滚动时保证有 scroll.y，否则 nzVirtualScroll 无效 */
+            get: /**
+             * 虚拟滚动时保证有 scroll.y，否则 nzVirtualScroll 无效
+             * @return {?}
+             */
+            function () {
+                /** @type {?} */
+                var base = this.effectiveScroll ? __assign({}, this.effectiveScroll) : {};
+                if (this.useVirtualScroll && !base.y) {
+                    base.y = "calc(100vh - 200px)";
+                }
+                return base;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * @return {?}
          */
@@ -1832,6 +1923,7 @@
          */
         function () {
             this.scheduleSyncHorizontalScroll();
+            this.applyTableScrollMode(true);
         };
         /**
          * @param {?} changes
@@ -1852,6 +1944,7 @@
                         changes["tableData"]["previousValue"]["pageNumber"]) {
                     this.countSelected();
                     this.calculateTotal();
+                    this.applyTableScrollMode(false);
                     return;
                 }
                 if (!this.isCrossPageSelectLocal) {
@@ -1862,8 +1955,122 @@
             this.calculateTotal();
             if (changes["lines"] ||
                 changes["tableData"] ||
-                changes["showSelected"]) {
+                changes["showSelected"] ||
+                changes["scroll"] ||
+                changes["virtualScroll"] ||
+                changes["allowDrop"]) {
                 this.scheduleSyncHorizontalScroll();
+                this.applyTableScrollMode(false);
+            }
+        };
+        /** 虚拟/普通模式切换时重建表格，避免残留滚动容器 */
+        /**
+         * 虚拟/普通模式切换时重建表格，避免残留滚动容器
+         * @param {?=} forceRemount
+         * @return {?}
+         */
+        HdDetailLinesPageComponent.prototype.applyTableScrollMode = /**
+         * 虚拟/普通模式切换时重建表格，避免残留滚动容器
+         * @param {?=} forceRemount
+         * @return {?}
+         */
+        function (forceRemount) {
+            var _this = this;
+            if (forceRemount === void 0) { forceRemount = false; }
+            /** @type {?} */
+            var useVirtual = this.useVirtualScroll;
+            /** @type {?} */
+            var modeChanged = this.virtualScrollActive !== null &&
+                this.virtualScrollActive !== useVirtual;
+            this.virtualScrollActive = useVirtual;
+            if (forceRemount || modeChanged) {
+                this.showTable = false;
+                this.cdr.markForCheck();
+                setTimeout((/**
+                 * @return {?}
+                 */
+                function () {
+                    _this.showTable = true;
+                    _this.cdr.markForCheck();
+                    setTimeout((/**
+                     * @return {?}
+                     */
+                    function () {
+                        _this.afterTableRender(useVirtual);
+                    }));
+                }));
+                return;
+            }
+            this.cdr.markForCheck();
+            this.afterTableRender(useVirtual);
+        };
+        /**
+         * @private
+         * @param {?} useVirtual
+         * @return {?}
+         */
+        HdDetailLinesPageComponent.prototype.afterTableRender = /**
+         * @private
+         * @param {?} useVirtual
+         * @return {?}
+         */
+        function (useVirtual) {
+            this.scheduleSyncHorizontalScroll();
+            if (useVirtual) {
+                this.refreshVirtualScrollViewport(true);
+            }
+        };
+        /**
+         * @param {?=} forceMeasure
+         * @return {?}
+         */
+        HdDetailLinesPageComponent.prototype.refreshVirtualScrollViewport = /**
+         * @param {?=} forceMeasure
+         * @return {?}
+         */
+        function (forceMeasure) {
+            var _this = this;
+            if (forceMeasure === void 0) { forceMeasure = false; }
+            if (!this.useVirtualScroll) {
+                return;
+            }
+            setTimeout((/**
+             * @return {?}
+             */
+            function () {
+                _this.measureVirtualItemSize(forceMeasure);
+                /** @type {?} */
+                var viewport = _this.nzTableComponent && _this.nzTableComponent.cdkVirtualScrollViewport;
+                if (viewport) {
+                    viewport.checkViewportSize();
+                }
+                _this.cdr.markForCheck();
+            }));
+        };
+        /**
+         * @private
+         * @param {?=} force
+         * @return {?}
+         */
+        HdDetailLinesPageComponent.prototype.measureVirtualItemSize = /**
+         * @private
+         * @param {?=} force
+         * @return {?}
+         */
+        function (force) {
+            if (force === void 0) { force = false; }
+            if (this.virtualItemSize != null && this.virtualItemSize > 0 && !force) {
+                return;
+            }
+            /** @type {?} */
+            var viewport = this.nzTableComponent && this.nzTableComponent.cdkVirtualScrollViewport;
+            if (!viewport || !viewport.elementRef || !viewport.elementRef.nativeElement) {
+                return;
+            }
+            /** @type {?} */
+            var row = (/** @type {?} */ (viewport.elementRef.nativeElement.querySelector("tr.hd-detail-lines-page-virtual-row")));
+            if (row && row.offsetHeight > 0) {
+                this.measuredVirtualItemSize = row.offsetHeight;
             }
         };
         /**
@@ -1918,10 +2125,18 @@
             var nextScroll = resolveAutoTableScroll(this.nzTableComponent, hasData);
             /** @type {?} */
             var nextX = nextScroll ? nextScroll.x : null;
-            if (this.tableScroll && this.tableScroll.x === nextX) {
+            /** @type {?} */
+            var currentY = this.tableScroll ? this.tableScroll.y : null;
+            if (this.tableScroll &&
+                this.tableScroll.x === nextX &&
+                this.tableScroll.y === currentY) {
                 return;
             }
-            this.tableScroll = nextScroll;
+            this.tableScroll = nextScroll
+                ? { x: nextScroll.x, y: currentY }
+                : currentY
+                    ? { y: currentY }
+                    : null;
             this.cdr.markForCheck();
         };
         Object.defineProperty(HdDetailLinesPageComponent.prototype, "displayLines", {
@@ -1974,6 +2189,7 @@
             this.tablePageIndexChange.emit(this.tablePageIndex);
             this.pageChange.emit();
             this.scheduleSyncHorizontalScroll();
+            this.applyTableScrollMode(false);
         };
         /**
          * @param {?} pageSize
@@ -1990,6 +2206,7 @@
             this.tablePageIndexChange.emit(this.tablePageIndex);
             this.pageChange.emit();
             this.scheduleSyncHorizontalScroll();
+            this.applyTableScrollMode(true);
         };
         /**
          * @private
@@ -2130,7 +2347,11 @@
                 }
             }
             /** @type {?} */
-            var selectableList = this.listOfDisplayData.filter((/**
+            var sourceList = this.listOfDisplayData && this.listOfDisplayData.length
+                ? this.listOfDisplayData
+                : this.displayLines;
+            /** @type {?} */
+            var selectableList = (sourceList || []).filter((/**
              * @param {?} item
              * @return {?}
              */
@@ -2162,7 +2383,11 @@
          */
         function (value) {
             var _this = this;
-            this.listOfDisplayData.forEach((/**
+            /** @type {?} */
+            var sourceList = this.listOfDisplayData && this.listOfDisplayData.length
+                ? this.listOfDisplayData
+                : this.displayLines;
+            (sourceList || []).forEach((/**
              * @param {?} item
              * @return {?}
              */
@@ -2217,8 +2442,8 @@
         HdDetailLinesPageComponent.decorators = [
             { type: core.Component, args: [{
                         selector: "hd-detail-lines-page",
-                        template: "<ng-container>\n  <nz-table #hdTable [nzScroll]=\"effectiveScroll\" class=\"hd-table-container\" nzShowSizeChanger nzShowQuickJumper\n    nzFrontPagination=\"false\" nzSize=\"middle\" [nzData]=\"displayLines\" [nzTotal]=\"totalCount\"\n    [(nzPageIndex)]=\"tablePageIndex\" [(nzPageSize)]=\"tablePageSize\" [nzLoading]=\"tableLoading\"\n    [nzPageSizeOptions]=\"[ 10, 50, 100, 200, 500, 1000 ]\" (nzPageIndexChange)=\"onPageIndexChange($event)\"\n    (nzPageSizeChange)=\"onPageSizeChange($event)\" [nzShowTotal]=\"tableTotalTemplate\"\n    (nzCurrentPageDataChange)=\"showSelected ? currentPageDataChange($event) : null\">\n    <thead>\n      <tr>\n        <th *ngIf=\"showSelected\" nzWidth=\"40px\" nzLeft=\"0px\" nzShowCheckbox [(nzChecked)]=\"isAllDisplayDataChecked\"\n          [nzIndeterminate]=\"isIndeterminate\" (nzCheckedChange)=\"checkAll($event)\"></th>\n        <ng-container *ngTemplateOutlet=\"detailLineHead\"></ng-container>\n      </tr>\n    </thead>\n    <tbody *ngIf=\"!allowDrop;else allowDropTemplate\">\n      <tr *ngFor=\"let data of hdTable.data;index as i\" [class.hd-table-row-invalid]=\"isInvalidRow(data)\">\n        <td *ngIf=\"showSelected\" nzWidth=\"40px\" nzLeft=\"0px\" nzShowCheckbox\n          [nzChecked]=\"mapOfCheckedId[data[selectField]]\" [nzDisabled]=\"isSelectDisabled(data)\"\n          (nzCheckedChange)=\"refreshStatus($event, data)\"></td>\n        <ng-container\n          *ngTemplateOutlet=\"detailLineBody;context:{$implicit: data, index: getRowIndex(i)}\"></ng-container>\n      </tr>\n      <tr *ngIf=\"showTotal\" class=\"hd-table-total\">\n        <td *ngIf=\"showSelected\"></td>\n        <td>\u5408\u8BA1</td>\n        <ng-container *ngFor=\"let totalOption of totalOptionList\">\n          <td *ngIf=\"!totalOption.isHide\" [nzAlign]=\"totalOption.align ? totalOption.align : 'left'\">{{\n            (totalOption.value || totalOption.value ===\n            0) ? (((totalOption.value % 1 === 0) && !totalOption.showDecimal ) ? totalOption.value :\n            LodashRound(totalOption.value, totalOption.preserveNumber).toFixed(totalOption.preserveNumber)) : '' }} </td>\n        </ng-container>\n      </tr>\n    </tbody>\n    <ng-template #allowDropTemplate>\n      <tbody cdkDropList (cdkDropListDropped)=\"drop($event)\">\n        <tr *ngFor=\"let data of hdTable.data;index as i\" cdkDrag [class.hd-table-row-invalid]=\"isInvalidRow(data)\">\n          <td *ngIf=\"showSelected\" nzWidth=\"40px\" nzLeft=\"0px\" nzShowCheckbox\n            [nzChecked]=\"mapOfCheckedId[data[selectField]]\" [nzDisabled]=\"isSelectDisabled(data)\"\n            (nzCheckedChange)=\"refreshStatus($event, data)\"></td>\n          <ng-container\n            *ngTemplateOutlet=\"detailLineBody;context:{$implicit: data, index: getRowIndex(i)}\"></ng-container>\n        </tr>\n        <tr *ngIf=\"showTotal\" class=\"hd-table-total\">\n          <td *ngIf=\"showSelected\"></td>\n          <td>\u5408\u8BA1</td>\n          <ng-container *ngFor=\"let totalOption of totalOptionList\">\n            <td *ngIf=\"!totalOption.isHide\" [nzAlign]=\"totalOption.align ? totalOption.align : 'left'\">{{\n              (totalOption.value || totalOption.value\n              === 0) ? (((totalOption.value % 1 === 0) && !totalOption.showDecimal ) ? totalOption.value :\n              LodashRound(totalOption.value, totalOption.preserveNumber).toFixed(totalOption.preserveNumber)) : '' }} </td>\n          </ng-container>\n        </tr>\n      </tbody>\n    </ng-template>\n    <ng-template #tableTotalTemplate>\n      \u5171 {{totalCount}} \u6761\u6570\u636E\n    </ng-template>\n  </nz-table>\n</ng-container>\n",
-                        styles: ["::ng-deep .common-btn-group>a{font-size:14px;font-weight:400;color:#20b95d!important;white-space:nowrap}::ng-deep .common-btn-group .common-danger-btn:hover{color:#f05b24!important}::ng-deep .common-btn-group>a:hover{color:#20bd62!important}::ng-deep .common-btn-group>a:not(:last-child)::after{content:'';margin:0 2px}::ng-deep .common-billNumber>a{color:#3b77e3}button{box-shadow:unset;text-shadow:unset}::ng-deep .ant-form-item-label>label{color:#4b504e;font-size:14px}::ng-deep .ant-input-number-input{height:32px}::ng-deep .ant-input-number{height:32px}textarea.ant-input{height:auto;min-height:32px}::ng-deep .ant-select-selection--multiple{min-height:32px}::ng-deep .ant-select-selection__rendered>ul>li{height:26px!important;margin-top:3px!important;line-height:26px!important}::ng-deep .ant-advanced-search-form .ant-form-item{margin-bottom:0!important}::ng-deep .ant-select-selection--single{height:32px!important}::ng-deep .ant-input{height:32px}::ng-deep .ant-input[disabled]:hover{border-color:#d9d9d9!important}::ng-deep .ant-select-selection__rendered{line-height:32px!important}::ng-deep .ant-calendar-range-picker-input{text-align:left!important}::ng-deep .ant-calendar-picker{width:100%!important}::ng-deep .ant-row{margin-right:0!important;margin-left:0!important}::ng-deep .ant-col-6{padding-left:12px;padding-right:12px}::ng-deep .ant-col-12{padding-left:12px;padding-right:12px}::ng-deep .ant-col-18{padding-left:12px;padding-right:12px}::ng-deep .ant-col-24{padding-left:12px;padding-right:12px}::ng-deep .ant-alert-info{background-color:#f5f8f6;border:1px solid #cfe3d4}::ng-deep .hd-table-container .ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-th-left-sticky,::ng-deep .hd-table-container .ant-table-th-right-sticky{z-index:2;transform:translateZ(0)}::ng-deep .hd-table-container .ant-table-thead>tr>th.ant-table-th-left-sticky,::ng-deep .hd-table-container .ant-table-thead>tr>th.ant-table-th-right-sticky{background:#f5f8f6!important}::ng-deep .hd-table-container .ant-table-tbody>tr>td.ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr>td.ant-table-td-right-sticky{background:#fff}::ng-deep .hd-table-container .ant-table-tbody>tr.ant-table-row-hover>td.ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr.ant-table-row-hover>td.ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr:hover>td.ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr:hover>td.ant-table-td-right-sticky{background:#ecf8f1!important}::ng-deep .hd-table-container .ant-table-scroll-position-left .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-left .ant-table-th-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-middle .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-middle .ant-table-th-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-right .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-right .ant-table-th-right-sticky{box-shadow:none!important}::ng-deep .hd-table-container .ant-table-fixed-right{right:0!important}:host ::ng-deep th{background:#f5f8f6!important;font-weight:700!important;white-space:nowrap;font-size:14px;font-family:PingFangSC-Medium,PingFang SC;color:#2a3634;padding:8px!important;box-sizing:border-box}:host ::ng-deep td{font-weight:400;font-style:normal;font-size:14px;color:#2a3634;text-align:left;white-space:nowrap;padding:8px!important;box-sizing:border-box}::ng-deep .ant-pagination-options{display:inline-flex;align-items:center}::ng-deep .ant-pagination-options .ant-select,::ng-deep .ant-pagination-options .ant-select-selection--single{min-width:100px}::ng-deep .ant-pagination-options-size-changer.ant-select{min-width:100px}::ng-deep .ant-time-picker{width:100%}::ng-deep .cdk-overlay-pane .hd-cascader-menus.ant-cascader-menus>.ant-cascader-menu:only-child{width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;min-width:var(--hd-cascader-menu-min-width,auto);max-width:560px}::ng-deep .cdk-overlay-pane .hd-cascader-menus.ant-cascader-menus>.ant-cascader-menu:only-child .ant-cascader-menu-item{white-space:nowrap}.ant-input-number-disabled,.ant-input[disabled],.ant-select-disabled{color:#4b504e}.hd-table-container ::ng-deep .ant-pagination-options-quick-jumper input{border-radius:2px;border:1px solid #d9d9d9}.hd-table-container ::ng-deep .ant-pagination-options .ant-select-selection{border-radius:2px}.hd-table-container ::ng-deep .ant-table-thead>tr>th{border-bottom:1px solid #ecf1ed}.hd-table-container ::ng-deep .ant-table-tbody>tr>td{border-bottom:1px solid #ecf1ed}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid.ant-table-row-hover>td,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid.ant-table-row-hover>td.ant-table-td-left-sticky,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid.ant-table-row-hover>td.ant-table-td-right-sticky,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid:hover>td,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid:hover>td.ant-table-td-left-sticky,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid:hover>td.ant-table-td-right-sticky,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid>td,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid>td.ant-table-td-left-sticky,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid>td.ant-table-td-right-sticky{background:#f7f8fa!important;color:#868a9c!important}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .common-btn-group>a{color:#20b95d!important}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .common-btn-group>a:hover{color:#20bd62!important}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .common-btn-group .common-danger-btn:hover{color:#f05b24!important}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .hd-table-cell-value>a,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid>td>a{color:#20b95d}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .common-billNumber>a{color:#3b77e3}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .hd-status-text{color:#868a9c!important}.hd-table-container ::ng-deep .hd-table-total>td{border:0!important}"]
+                        template: "<ng-container>\n  <nz-table\n    *ngIf=\"showTable\"\n    #hdTable\n    class=\"hd-table-container\"\n    [class.hd-detail-lines-page--virtual]=\"useVirtualScroll\"\n    [class.hd-detail-lines-page--scroll-y]=\"!!(resolvedScroll && resolvedScroll.y)\"\n    [class.hd-detail-lines-page--scroll-x]=\"!!(resolvedScroll && resolvedScroll.x)\"\n    [nzScroll]=\"resolvedScroll\"\n    nzShowSizeChanger\n    nzShowQuickJumper\n    nzFrontPagination=\"false\"\n    nzSize=\"middle\"\n    [nzData]=\"displayLines\"\n    [nzTotal]=\"totalCount\"\n    [(nzPageIndex)]=\"tablePageIndex\"\n    [(nzPageSize)]=\"tablePageSize\"\n    [nzLoading]=\"tableLoading\"\n    [nzPageSizeOptions]=\"[ 10, 50, 100, 200, 500, 1000 ]\"\n    (nzPageIndexChange)=\"onPageIndexChange($event)\"\n    (nzPageSizeChange)=\"onPageSizeChange($event)\"\n    [nzShowTotal]=\"tableTotalTemplate\"\n    (nzCurrentPageDataChange)=\"showSelected ? currentPageDataChange($event) : null\"\n    [nzVirtualScroll]=\"useVirtualScroll\"\n    [nzVirtualItemSize]=\"useVirtualScroll ? effectiveVirtualItemSize : 0\"\n    [nzVirtualForTrackBy]=\"virtualTrackByRow\"\n  >\n    <thead>\n      <tr>\n        <th *ngIf=\"showSelected\" nzWidth=\"40px\" nzLeft=\"0px\" nzShowCheckbox [(nzChecked)]=\"isAllDisplayDataChecked\"\n          [nzIndeterminate]=\"isIndeterminate\" (nzCheckedChange)=\"checkAll($event)\"></th>\n        <ng-container *ngTemplateOutlet=\"detailLineHead\"></ng-container>\n      </tr>\n    </thead>\n    <tbody *ngIf=\"!allowDrop;else allowDropTemplate\">\n      <ng-template *ngIf=\"useVirtualScroll\" nz-virtual-scroll let-data let-index=\"index\">\n        <tr class=\"hd-detail-lines-page-virtual-row\" [class.hd-table-row-invalid]=\"isInvalidRow(data)\">\n          <td *ngIf=\"showSelected\" nzWidth=\"40px\" nzLeft=\"0px\" nzShowCheckbox\n            [nzChecked]=\"mapOfCheckedId[data[selectField]]\" [nzDisabled]=\"isSelectDisabled(data)\"\n            (nzCheckedChange)=\"refreshStatus($event, data)\"></td>\n          <ng-container\n            *ngTemplateOutlet=\"detailLineBody;context:{$implicit: data, index: getRowIndex(index)}\"></ng-container>\n        </tr>\n      </ng-template>\n      <ng-container *ngIf=\"!useVirtualScroll\">\n        <tr *ngFor=\"let data of hdTable.data;index as i\" [class.hd-table-row-invalid]=\"isInvalidRow(data)\">\n          <td *ngIf=\"showSelected\" nzWidth=\"40px\" nzLeft=\"0px\" nzShowCheckbox\n            [nzChecked]=\"mapOfCheckedId[data[selectField]]\" [nzDisabled]=\"isSelectDisabled(data)\"\n            (nzCheckedChange)=\"refreshStatus($event, data)\"></td>\n          <ng-container\n            *ngTemplateOutlet=\"detailLineBody;context:{$implicit: data, index: getRowIndex(i)}\"></ng-container>\n        </tr>\n        <tr *ngIf=\"showTotal\" class=\"hd-table-total\">\n          <td *ngIf=\"showSelected\"></td>\n          <td>\u5408\u8BA1</td>\n          <ng-container *ngFor=\"let totalOption of totalOptionList\">\n            <td *ngIf=\"!totalOption.isHide\" [nzAlign]=\"totalOption.align ? totalOption.align : 'left'\">{{\n              (totalOption.value || totalOption.value ===\n              0) ? (((totalOption.value % 1 === 0) && !totalOption.showDecimal ) ? totalOption.value :\n              LodashRound(totalOption.value, totalOption.preserveNumber).toFixed(totalOption.preserveNumber)) : '' }} </td>\n          </ng-container>\n        </tr>\n      </ng-container>\n    </tbody>\n    <tfoot *ngIf=\"useVirtualScroll && showTotal\">\n      <tr class=\"hd-table-total\">\n        <td *ngIf=\"showSelected\"></td>\n        <td>\u5408\u8BA1</td>\n        <ng-container *ngFor=\"let totalOption of totalOptionList\">\n          <td *ngIf=\"!totalOption.isHide\" [nzAlign]=\"totalOption.align ? totalOption.align : 'left'\">{{\n            (totalOption.value || totalOption.value ===\n            0) ? (((totalOption.value % 1 === 0) && !totalOption.showDecimal ) ? totalOption.value :\n            LodashRound(totalOption.value, totalOption.preserveNumber).toFixed(totalOption.preserveNumber)) : '' }} </td>\n        </ng-container>\n      </tr>\n    </tfoot>\n    <ng-template #allowDropTemplate>\n      <tbody cdkDropList (cdkDropListDropped)=\"drop($event)\">\n        <tr *ngFor=\"let data of hdTable.data;index as i\" cdkDrag [class.hd-table-row-invalid]=\"isInvalidRow(data)\">\n          <td *ngIf=\"showSelected\" nzWidth=\"40px\" nzLeft=\"0px\" nzShowCheckbox\n            [nzChecked]=\"mapOfCheckedId[data[selectField]]\" [nzDisabled]=\"isSelectDisabled(data)\"\n            (nzCheckedChange)=\"refreshStatus($event, data)\"></td>\n          <ng-container\n            *ngTemplateOutlet=\"detailLineBody;context:{$implicit: data, index: getRowIndex(i)}\"></ng-container>\n        </tr>\n        <tr *ngIf=\"showTotal\" class=\"hd-table-total\">\n          <td *ngIf=\"showSelected\"></td>\n          <td>\u5408\u8BA1</td>\n          <ng-container *ngFor=\"let totalOption of totalOptionList\">\n            <td *ngIf=\"!totalOption.isHide\" [nzAlign]=\"totalOption.align ? totalOption.align : 'left'\">{{\n              (totalOption.value || totalOption.value\n              === 0) ? (((totalOption.value % 1 === 0) && !totalOption.showDecimal ) ? totalOption.value :\n              LodashRound(totalOption.value, totalOption.preserveNumber).toFixed(totalOption.preserveNumber)) : '' }} </td>\n          </ng-container>\n        </tr>\n      </tbody>\n    </ng-template>\n    <ng-template #tableTotalTemplate>\n      \u5171 {{totalCount}} \u6761\u6570\u636E\n    </ng-template>\n  </nz-table>\n</ng-container>\n",
+                        styles: ["::ng-deep .common-btn-group>a{font-size:14px;font-weight:400;color:#20b95d!important;white-space:nowrap}::ng-deep .common-btn-group .common-danger-btn:hover{color:#f05b24!important}::ng-deep .common-btn-group>a:hover{color:#20bd62!important}::ng-deep .common-btn-group>a:not(:last-child)::after{content:'';margin:0 2px}::ng-deep .common-billNumber>a{color:#3b77e3}button{box-shadow:unset;text-shadow:unset}::ng-deep .ant-form-item-label>label{color:#4b504e;font-size:14px}::ng-deep .ant-input-number-input{height:32px}::ng-deep .ant-input-number{height:32px}textarea.ant-input{height:auto;min-height:32px}::ng-deep .ant-select-selection--multiple{min-height:32px}::ng-deep .ant-select-selection__rendered>ul>li{height:26px!important;margin-top:3px!important;line-height:26px!important}::ng-deep .ant-advanced-search-form .ant-form-item{margin-bottom:0!important}::ng-deep .ant-select-selection--single{height:32px!important}::ng-deep .ant-input{height:32px}::ng-deep .ant-input[disabled]:hover{border-color:#d9d9d9!important}::ng-deep .ant-select-selection__rendered{line-height:32px!important}::ng-deep .ant-calendar-range-picker-input{text-align:left!important}::ng-deep .ant-calendar-picker{width:100%!important}::ng-deep .ant-row{margin-right:0!important;margin-left:0!important}::ng-deep .ant-col-6{padding-left:12px;padding-right:12px}::ng-deep .ant-col-12{padding-left:12px;padding-right:12px}::ng-deep .ant-col-18{padding-left:12px;padding-right:12px}::ng-deep .ant-col-24{padding-left:12px;padding-right:12px}::ng-deep .ant-alert-info{background-color:#f5f8f6;border:1px solid #cfe3d4}::ng-deep .hd-table-container .ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-th-left-sticky,::ng-deep .hd-table-container .ant-table-th-right-sticky{z-index:2;transform:translateZ(0)}::ng-deep .hd-table-container .ant-table-thead>tr>th.ant-table-th-left-sticky,::ng-deep .hd-table-container .ant-table-thead>tr>th.ant-table-th-right-sticky{background:#f5f8f6!important}::ng-deep .hd-table-container .ant-table-tbody>tr>td.ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr>td.ant-table-td-right-sticky{background:#fff}::ng-deep .hd-table-container .ant-table-tbody>tr.ant-table-row-hover>td.ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr.ant-table-row-hover>td.ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr:hover>td.ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr:hover>td.ant-table-td-right-sticky{background:#ecf8f1!important}::ng-deep .hd-table-container .ant-table-scroll-position-left .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-left .ant-table-th-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-middle .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-middle .ant-table-th-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-right .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-right .ant-table-th-right-sticky{box-shadow:none!important}::ng-deep .hd-table-container .ant-table-fixed-right{right:0!important}:host ::ng-deep th{background:#f5f8f6!important;font-weight:700!important;white-space:nowrap;font-size:14px;font-family:PingFangSC-Medium,PingFang SC;color:#2a3634;padding:8px!important;box-sizing:border-box}:host ::ng-deep td{font-weight:400;font-style:normal;font-size:14px;color:#2a3634;text-align:left;white-space:nowrap;padding:8px!important;box-sizing:border-box}::ng-deep .ant-pagination-options{display:inline-flex;align-items:center}::ng-deep .ant-pagination-options .ant-select,::ng-deep .ant-pagination-options .ant-select-selection--single{min-width:100px}::ng-deep .ant-pagination-options-size-changer.ant-select{min-width:100px}::ng-deep .ant-time-picker{width:100%}::ng-deep .cdk-overlay-pane .hd-cascader-menus.ant-cascader-menus>.ant-cascader-menu:only-child{width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;min-width:var(--hd-cascader-menu-min-width,auto);max-width:560px}::ng-deep .cdk-overlay-pane .hd-cascader-menus.ant-cascader-menus>.ant-cascader-menu:only-child .ant-cascader-menu-item{white-space:nowrap}.ant-input-number-disabled,.ant-input[disabled],.ant-select-disabled{color:#4b504e}.hd-table-container ::ng-deep .ant-pagination-options-quick-jumper input{border-radius:2px;border:1px solid #d9d9d9}.hd-table-container ::ng-deep .ant-pagination-options .ant-select-selection{border-radius:2px}.hd-table-container ::ng-deep .ant-table-thead>tr>th{border-bottom:1px solid #ecf1ed}.hd-table-container ::ng-deep .ant-table-tbody>tr>td{border-bottom:1px solid #ecf1ed}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid.ant-table-row-hover>td,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid.ant-table-row-hover>td.ant-table-td-left-sticky,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid.ant-table-row-hover>td.ant-table-td-right-sticky,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid:hover>td,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid:hover>td.ant-table-td-left-sticky,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid:hover>td.ant-table-td-right-sticky,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid>td,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid>td.ant-table-td-left-sticky,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid>td.ant-table-td-right-sticky{background:#f7f8fa!important;color:#868a9c!important}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .common-btn-group>a{color:#20b95d!important}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .common-btn-group>a:hover{color:#20bd62!important}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .common-btn-group .common-danger-btn:hover{color:#f05b24!important}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .hd-table-cell-value>a,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid>td>a{color:#20b95d}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .common-billNumber>a{color:#3b77e3}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .hd-status-text{color:#868a9c!important}.hd-table-container ::ng-deep .hd-table-total>td{border:0!important}.hd-table-container ::ng-deep cdk-virtual-scroll-viewport.ant-table-body .hd-detail-lines-page-virtual-row>td{box-sizing:border-box}.hd-table-container:not(.hd-detail-lines-page--scroll-y):not(.hd-detail-lines-page--scroll-x) ::ng-deep .ant-table-body{max-height:none!important;overflow-y:visible!important}"]
                     }] }
         ];
         /** @nocollapse */
@@ -2231,6 +2456,8 @@
             tableData: [{ type: core.Input }],
             showSelected: [{ type: core.Input }],
             allowDrop: [{ type: core.Input }],
+            virtualScroll: [{ type: core.Input }],
+            virtualItemSize: [{ type: core.Input }],
             scroll: [{ type: core.Input }],
             selectField: [{ type: core.Input }],
             selectedField: [{ type: core.Input }],
@@ -2258,6 +2485,10 @@
             core$1.InputBoolean(),
             __metadata("design:type", Boolean)
         ], HdDetailLinesPageComponent.prototype, "allowDrop", void 0);
+        __decorate([
+            core$1.InputBoolean(),
+            __metadata("design:type", Boolean)
+        ], HdDetailLinesPageComponent.prototype, "virtualScroll", void 0);
         __decorate([
             core$1.InputBoolean(),
             __metadata("design:type", Boolean)
@@ -2278,6 +2509,16 @@
         HdDetailLinesPageComponent.prototype.showSelected;
         /** @type {?} */
         HdDetailLinesPageComponent.prototype.allowDrop;
+        /**
+         * 与 hd-table 一致：行数多时自动虚拟滚动；拖拽排序开启时强制关闭
+         * @type {?}
+         */
+        HdDetailLinesPageComponent.prototype.virtualScroll;
+        /**
+         * 手动指定行高；不传则用默认/测量值
+         * @type {?}
+         */
+        HdDetailLinesPageComponent.prototype.virtualItemSize;
         /**
          * 不传则按列宽与容器宽度自动计算横向滚动
          * @type {?}
@@ -2341,6 +2582,23 @@
         HdDetailLinesPageComponent.prototype.mapOfCheckList;
         /** @type {?} */
         HdDetailLinesPageComponent.prototype.isCrossPageSelectLocal;
+        /** @type {?} */
+        HdDetailLinesPageComponent.prototype.showTable;
+        /**
+         * 自动测量前的兜底行高
+         * @type {?}
+         */
+        HdDetailLinesPageComponent.prototype.measuredVirtualItemSize;
+        /**
+         * @type {?}
+         * @private
+         */
+        HdDetailLinesPageComponent.prototype.virtualScrollActive;
+        /**
+         * 虚拟滚动按数组下标追踪，避免业务主键 trackBy 导致 CDK 行复用错位
+         * @type {?}
+         */
+        HdDetailLinesPageComponent.prototype.virtualTrackByRow;
         /**
          * @type {?}
          * @private