fantasy-ngzorro 2.1.63 → 2.1.65

package/README.md

@@ -42,6 +42,8 @@
 | — | 2026-9-22 | `hd-tip` 支持右侧展开/收起（`showCollapse` / `[(expanded)]`），暴露 `expand` / `collapse` / `toggle` 供父组件控制其它区块 |
 | — | 2026-9-22 | `hd-form-lines` 勾选提示改为 `tableTotal` 插槽（同 hd-table），组件内不再默认渲染已选中块 |
 | — | 2026-9-22 | `hd-table` / `hd-detail-form` 字段值后支持编辑笔图标（`editable` + `edit` 回调，图标对齐 Figma） |
+| — | 2026-9-24 | `hd-detail-lines`：补 `scroll.y` 后重建表格并同步表头横滚，修复列头不跟随左右滚动 |
+| — | 2026-9-24 | `hd-detail-lines` / `hd-detail-lines-page`：自动或仅传 `scroll.x` 时补 `scroll.y`，修复窄屏下无法纵向滚动 |
 | — | 2026-9-22 | `hd-table` 支持 `pagination` / `frontPagination`：全量 `content` 可「不分页展示」或「前端切片分页」，列表默认仍为服务端分页 |
 | — | 2026-9-21 | hd-table 列 `color` 支持函数，按行给某一个字段标红 |
 | — | 2026-9-20 | hd-detail-form 附件图片：最多展示 4 张，超出末张蒙版 `+n`；弹窗预览支持左右翻页 |
@@ -709,7 +711,7 @@ formCols: HdOption[] = [
 | 参数 | 类型 | 默认值 | 说明 |
 | ---- | ---- | ------ | ---- |
 | lines | any[] | — | 明细数据 |
-| scroll | object | { x: '1px' } | 横向滚动 |
+| scroll | object | 自动 | 不传则按列宽自动算横向滚动；有 `x` 时自动补 `y`（`calc(100vh - …)`），避免窄屏无法纵向滚动 |
 | showSearch | boolean | false | 行内搜索 |
 | searchFields | string[] | [] | 搜索字段，空则搜全部字段 |
 | hdFrontPagination | boolean | false | 前端分页 |

package/bundles/fantasy-ngzorro.umd.js

@@ -1553,13 +1553,28 @@
              */
             this.isFilterData = false;
             this.storeFormLinesData = []; // 缓存的总的列表数据
+            // 缓存的总的列表数据
+            /**
+             * 控制 nz-table 重建：scroll.y 从无到有时必须重建，否则表头不跟横滚
+             */
+            this.showTable = true;
+            this.bodyScrollListener = null;
         }
         Object.defineProperty(HdDetailLinesComponent.prototype, "effectiveScroll", {
             get: /**
              * @return {?}
              */
             function () {
-                return this.scroll != null ? this.scroll : this.tableScroll;
+                /** @type {?} */
+                var base = this.scroll != null ? this.scroll : this.tableScroll;
+                if (!base) {
+                    return null;
+                }
+                // 仅有 x 无 y 时补 y，避免窄屏 / 手动传 scroll.x 时无法纵向滚动
+                if (base.x && !base.y) {
+                    return { x: base.x, y: this.getAutoScrollY() };
+                }
+                return base;
             },
             enumerable: true,
             configurable: true
@@ -1585,6 +1600,15 @@
         function () {
             this.scheduleSyncHorizontalScroll();
         };
+        /**
+         * @return {?}
+         */
+        HdDetailLinesComponent.prototype.ngOnDestroy = /**
+         * @return {?}
+         */
+        function () {
+            this.unbindHeaderBodyScrollSync();
+        };
         /**
          * @param {?} changes
          * @return {?}
@@ -1624,6 +1648,11 @@
             var _this = this;
             if (retry === void 0) { retry = 0; }
             if (this.scroll != null) {
+                // 外部传了 scroll：首屏就带 y 时仍需绑一次兜底同步
+                setTimeout((/**
+                 * @return {?}
+                 */
+                function () { return _this.bindHeaderBodyScrollSync(); }));
                 return;
             }
             /** @type {?} */
@@ -1644,6 +1673,27 @@
                 }
             }), delay);
         };
+        /**
+         * 开启 scroll.x 后 ant-table body 会变成 overflow:scroll 容器，
+         * 若不设 scroll.y，内容再高也不会表内纵向滚动，且滚轮无法冒泡到页面。
+         */
+        /**
+         * 开启 scroll.x 后 ant-table body 会变成 overflow:scroll 容器，
+         * 若不设 scroll.y，内容再高也不会表内纵向滚动，且滚轮无法冒泡到页面。
+         * @private
+         * @return {?}
+         */
+        HdDetailLinesComponent.prototype.getAutoScrollY = /**
+         * 开启 scroll.x 后 ant-table body 会变成 overflow:scroll 容器，
+         * 若不设 scroll.y，内容再高也不会表内纵向滚动，且滚轮无法冒泡到页面。
+         * @private
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var offset = this.showSearch ? 320 : 280;
+            return "calc(100vh - " + offset + "px)";
+        };
         /**
          * @private
          * @return {?}
@@ -1653,6 +1703,7 @@
          * @return {?}
          */
         function () {
+            var _this = this;
             if (this.scroll != null) {
                 return;
             }
@@ -1662,11 +1713,122 @@
             var nextScroll = resolveAutoTableScroll(this.nzTableComponent, hasData);
             /** @type {?} */
             var nextX = nextScroll ? nextScroll.x : null;
-            if (this.tableScroll && this.tableScroll.x === nextX) {
+            // 有横向滚动时必须带 y，否则窄屏下无法纵向滚动
+            /** @type {?} */
+            var nextY = nextX ? this.getAutoScrollY() : null;
+            /** @type {?} */
+            var prevHasY = !!(this.tableScroll && this.tableScroll.y);
+            /** @type {?} */
+            var nextHasY = !!nextY;
+            if (this.tableScroll &&
+                this.tableScroll.x === nextX &&
+                this.tableScroll.y === nextY) {
+                return;
+            }
+            this.tableScroll = nextX
+                ? { x: nextX, y: nextY }
+                : null;
+            // ng-zorro 只在 AfterViewInit 绑一次 header/body 横滚同步；
+            // 运行中从无 y 变为有 y 会丢监听，表现为列头不跟着横滚 → 必须重建表格
+            if (prevHasY !== nextHasY) {
+                this.remountTable();
                 return;
             }
-            this.tableScroll = nextScroll;
             this.cdr.markForCheck();
+            setTimeout((/**
+             * @return {?}
+             */
+            function () { return _this.bindHeaderBodyScrollSync(); }));
+        };
+        /** 重建 nz-table，让 header/body 滚动同步在 AfterViewInit 重新绑定 */
+        /**
+         * 重建 nz-table，让 header/body 滚动同步在 AfterViewInit 重新绑定
+         * @private
+         * @return {?}
+         */
+        HdDetailLinesComponent.prototype.remountTable = /**
+         * 重建 nz-table，让 header/body 滚动同步在 AfterViewInit 重新绑定
+         * @private
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            this.unbindHeaderBodyScrollSync();
+            setTimeout((/**
+             * @return {?}
+             */
+            function () {
+                _this.showTable = false;
+                _this.cdr.markForCheck();
+                setTimeout((/**
+                 * @return {?}
+                 */
+                function () {
+                    _this.showTable = true;
+                    _this.cdr.markForCheck();
+                    setTimeout((/**
+                     * @return {?}
+                     */
+                    function () { return _this.bindHeaderBodyScrollSync(); }));
+                }));
+            }));
+        };
+        /** 表体横滚时同步表头（兜底 ng-zorro 监听丢失） */
+        /**
+         * 表体横滚时同步表头（兜底 ng-zorro 监听丢失）
+         * @private
+         * @return {?}
+         */
+        HdDetailLinesComponent.prototype.bindHeaderBodyScrollSync = /**
+         * 表体横滚时同步表头（兜底 ng-zorro 监听丢失）
+         * @private
+         * @return {?}
+         */
+        function () {
+            this.unbindHeaderBodyScrollSync();
+            if (!this.nzTableComponent) {
+                return;
+            }
+            /** @type {?} */
+            var nzTable = (/** @type {?} */ (this.nzTableComponent));
+            /** @type {?} */
+            var header = (/** @type {?} */ (nzTable.tableHeaderNativeElement));
+            /** @type {?} */
+            var body = (/** @type {?} */ (nzTable.mixTableBodyNativeElement));
+            if (!header || !body) {
+                return;
+            }
+            this.bodyScrollListener = (/**
+             * @return {?}
+             */
+            function () {
+                if (header.scrollLeft !== body.scrollLeft) {
+                    header.scrollLeft = body.scrollLeft;
+                }
+            });
+            body.addEventListener("scroll", this.bodyScrollListener);
+            this.bodyScrollListener();
+        };
+        /**
+         * @private
+         * @return {?}
+         */
+        HdDetailLinesComponent.prototype.unbindHeaderBodyScrollSync = /**
+         * @private
+         * @return {?}
+         */
+        function () {
+            if (!this.bodyScrollListener || !this.nzTableComponent) {
+                this.bodyScrollListener = null;
+                return;
+            }
+            /** @type {?} */
+            var body = (/** @type {?} */ (((/** @type {?} */ (this.nzTableComponent)))
+                .mixTableBodyNativeElement));
+            if (body) {
+                body.removeEventListener("scroll", this.bodyScrollListener);
+            }
+            this.bodyScrollListener = null;
         };
         /**
          * @private
@@ -2027,7 +2189,7 @@
         HdDetailLinesComponent.decorators = [
             { type: core.Component, args: [{
                         selector: "hd-detail-lines",
-                        template: "<ng-container>\n  <hd-button-group *ngIf=\"showSearch\">\n    <ng-template #buttonGroupLeft>\n      <nz-input-group [nzSuffix]=\"suffixIconSearch\">\n        <input type=\"text\" nz-input (keyup.enter)=\"searchLines()\" placeholder=\"\u8BF7\u8F93\u5165\u5185\u5BB9\u641C\u7D22\" style=\"width: 300px;\"\n          [(ngModel)]=\"filterStr\" />\n      </nz-input-group>\n      <ng-template #suffixIconSearch>\n        <i nz-icon nzType=\"search\" (click)=\"searchLines()\"></i>\n      </ng-template>\n    </ng-template>\n  </hd-button-group>\n\n  <hd-space *ngIf=\"showSearch\" background=\"transparent\" type=\"row\" size=\"16\"></hd-space>\n\n  <nz-table #hdTable [nzScroll]=\"effectiveScroll\" class=\"hd-table-container\" nzShowSizeChanger\n    [nzFrontPagination]=\"hdFrontPagination\" [nzShowQuickJumper]=\"hdFrontPagination\" [nzShowTotal]=\"tableTotalTemplate\"\n    nzSize=\"middle\" [nzData]=\"displayLines\" [nzLoading]=\"tableLoading\" [(nzPageSize)]=\"tablePageSize\"\n    [nzPageSizeOptions]=\"[ 10, 50, 100, 200, 500, 1000 ]\"\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 *ngTemplateOutlet=\"detailLineBody;context:{$implicit: data, index: i}\"></ng-container>\n      </tr>\n      <!-- \u5408\u8BA1\u533A\u57DF -->\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 *ngTemplateOutlet=\"detailLineBody;context:{$implicit: data, index: i}\"></ng-container>\n        </tr>\n        <!-- \u5408\u8BA1\u533A\u57DF -->\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 {{displayLines.length}} \u6761\u6570\u636E\n    </ng-template>\n  </nz-table>\n</ng-container>\n",
+                        template: "<ng-container>\n  <hd-button-group *ngIf=\"showSearch\">\n    <ng-template #buttonGroupLeft>\n      <nz-input-group [nzSuffix]=\"suffixIconSearch\">\n        <input type=\"text\" nz-input (keyup.enter)=\"searchLines()\" placeholder=\"\u8BF7\u8F93\u5165\u5185\u5BB9\u641C\u7D22\" style=\"width: 300px;\"\n          [(ngModel)]=\"filterStr\" />\n      </nz-input-group>\n      <ng-template #suffixIconSearch>\n        <i nz-icon nzType=\"search\" (click)=\"searchLines()\"></i>\n      </ng-template>\n    </ng-template>\n  </hd-button-group>\n\n  <hd-space *ngIf=\"showSearch\" background=\"transparent\" type=\"row\" size=\"16\"></hd-space>\n\n  <nz-table *ngIf=\"showTable\" #hdTable [nzScroll]=\"effectiveScroll\" class=\"hd-table-container\" nzShowSizeChanger\n    [nzFrontPagination]=\"hdFrontPagination\" [nzShowQuickJumper]=\"hdFrontPagination\" [nzShowTotal]=\"tableTotalTemplate\"\n    nzSize=\"middle\" [nzData]=\"displayLines\" [nzLoading]=\"tableLoading\" [(nzPageSize)]=\"tablePageSize\"\n    [nzPageSizeOptions]=\"[ 10, 50, 100, 200, 500, 1000 ]\"\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 *ngTemplateOutlet=\"detailLineBody;context:{$implicit: data, index: i}\"></ng-container>\n      </tr>\n      <!-- \u5408\u8BA1\u533A\u57DF -->\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 *ngTemplateOutlet=\"detailLineBody;context:{$implicit: data, index: i}\"></ng-container>\n        </tr>\n        <!-- \u5408\u8BA1\u533A\u57DF -->\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 {{displayLines.length}} \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}"]
                     }] }
         ];
@@ -2162,6 +2324,16 @@
         HdDetailLinesComponent.prototype.isFilterData;
         /** @type {?} */
         HdDetailLinesComponent.prototype.storeFormLinesData;
+        /**
+         * 控制 nz-table 重建：scroll.y 从无到有时必须重建，否则表头不跟横滚
+         * @type {?}
+         */
+        HdDetailLinesComponent.prototype.showTable;
+        /**
+         * @type {?}
+         * @private
+         */
+        HdDetailLinesComponent.prototype.bodyScrollListener;
         /**
          * @type {?}
          * @private
@@ -2319,16 +2491,16 @@
             configurable: true
         });
         Object.defineProperty(HdDetailLinesPageComponent.prototype, "resolvedScroll", {
-            /** 虚拟滚动时保证有 scroll.y，否则 nzVirtualScroll 无效 */
+            /** 虚拟滚动 / 仅有 x 时保证有 scroll.y，否则窄屏无法纵向滚动 */
             get: /**
-             * 虚拟滚动时保证有 scroll.y，否则 nzVirtualScroll 无效
+             * 虚拟滚动 / 仅有 x 时保证有 scroll.y，否则窄屏无法纵向滚动
              * @return {?}
              */
             function () {
                 /** @type {?} */
                 var base = this.effectiveScroll ? __assign({}, this.effectiveScroll) : {};
-                if (this.useVirtualScroll && !base.y) {
-                    base.y = "calc(100vh - 200px)";
+                if ((this.useVirtualScroll || base.x) && !base.y) {
+                    base.y = this.getAutoScrollY();
                 }
                 return base;
             },
@@ -2546,6 +2718,25 @@
                 }
             }), delay);
         };
+        /**
+         * 开启 scroll.x 后 ant-table body 会变成 overflow:scroll 容器，
+         * 若不设 scroll.y，窄屏下滚轮无法纵向滚动。
+         */
+        /**
+         * 开启 scroll.x 后 ant-table body 会变成 overflow:scroll 容器，
+         * 若不设 scroll.y，窄屏下滚轮无法纵向滚动。
+         * @private
+         * @return {?}
+         */
+        HdDetailLinesPageComponent.prototype.getAutoScrollY = /**
+         * 开启 scroll.x 后 ant-table body 会变成 overflow:scroll 容器，
+         * 若不设 scroll.y，窄屏下滚轮无法纵向滚动。
+         * @private
+         * @return {?}
+         */
+        function () {
+            return "calc(100vh - 280px)";
+        };
         /**
          * @private
          * @return {?}
@@ -2564,18 +2755,28 @@
             var nextScroll = resolveAutoTableScroll(this.nzTableComponent, hasData);
             /** @type {?} */
             var nextX = nextScroll ? nextScroll.x : null;
+            // 父级已指定 y（如虚拟滚动）优先保留；否则有 x 时自动补 y
             /** @type {?} */
             var currentY = this.tableScroll ? this.tableScroll.y : null;
+            /** @type {?} */
+            var nextY = currentY || (nextX ? this.getAutoScrollY() : null);
+            /** @type {?} */
+            var prevHasY = !!(this.tableScroll && this.tableScroll.y);
+            /** @type {?} */
+            var nextHasY = !!nextY;
             if (this.tableScroll &&
                 this.tableScroll.x === nextX &&
-                this.tableScroll.y === currentY) {
+                this.tableScroll.y === nextY) {
+                return;
+            }
+            this.tableScroll = nextX || nextY
+                ? { x: nextX, y: nextY }
+                : null;
+            // y 从无到有必须重建，否则表头不跟横滚
+            if (prevHasY !== nextHasY) {
+                this.applyTableScrollMode(true);
                 return;
             }
-            this.tableScroll = nextScroll
-                ? { x: nextScroll.x, y: currentY }
-                : currentY
-                    ? { y: currentY }
-                    : null;
             this.cdr.markForCheck();
         };
         Object.defineProperty(HdDetailLinesPageComponent.prototype, "displayLines", {