fantasy-ngzorro 2.1.61 → 2.1.62

package/README.md

@@ -37,6 +37,8 @@
 | — | 2026-5-20 | 补充 hd-table、hd-detail-lines-page 等组件；完善公共子类型（SelectOption、FormItem 等）文档 |
 | — | 2026-9-18 | `hd-form-lines` 选中回显（nzHide）认 `showLabelAndValue`，与下拉 `[value]label` 一致（对齐 `hd-form`） |
 | — | 2026-9-18 | `hd-detail-lines-page` 对齐 `hd-table` 支持虚拟滚动（`virtualScroll` / `virtualItemSize`）；千行勾选时减少 DOM 卡顿 |
+| — | 2026-9-20 | hd-detail-form 附件图片：最多展示 4 张，超出末张蒙版 `+n`；弹窗预览支持左右翻页 |
+| — | 2026-9-20 | hd-detail-form 附件图片点击弹窗预览大图（不再 `window.open`） |
 | — | 2026-9-20 | hd-detail-form 支持附件图片字段（`HdDetailFormFieldType.Accessory`，Figma 48×48 缩略图横排，不复用 hd-accessory-list） |
 | — | 2026-9-17 | hd-table / hd-detail-lines / hd-detail-lines-page 支持 `selectDisabledField` / `rowInvalidField`：按行字段控制勾选禁用、失效行样式 |
 | — | 2026-9-14 | 新增 `hd-accessory-list` 附件列表组件（分组 name + accessoryList，点击下载/查看） |
@@ -611,9 +613,10 @@ formCols: HdOption[] = [
 
 附件字段 `type: HdDetailFormFieldType.Accessory`（或 `'accessory'`）：
 
-- 对齐 Figma `items/description-cell`「图片」：标签 + **48×48** 缩略图横排（间距 6px，边框 `#E5E6EB`，圆角 4px）
+- 对齐 Figma `items/description-cell`「图片」：标签 + **48×48** 缩略图横排（间距 6px，边框 `#E5E6EB`，圆角 4px）；标签与首图顶对齐
 - `value` 支持：图片地址 `string` / `string[]`，或 `{ name?, path?/url? }[]`
-- 点击缩略图默认 `window.open` 打开原图，并触发 `imageClick`
+- 最多直接展示 **4** 张；超出时第 4 张蒙版显示 `+n`（n 为剩余张数）
+- 点击缩略图弹窗预览大图（支持左右翻页），并触发 `imageClick`
 - 无图时展示 `<空>`
 - **不使用** `hd-accessory-list`（文件列表样式请用独立附件列表组件）
 

package/bundles/fantasy-ngzorro.umd.js

@@ -475,6 +475,11 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
+    /**
+     * 附件缩略图最多直接展示张数，超出末张蒙版 +n
+     * @type {?}
+     */
+    var MAX_VISIBLE_IMAGES = 4;
     var HdDetailFormComponent = /** @class */ (function () {
         function HdDetailFormComponent() {
             this.formCols = new Array();
@@ -487,7 +492,43 @@
              */
             this.imageClick = new core.EventEmitter();
             this.HdDetailFormFieldType = HdDetailFormFieldType;
+            /**
+             * 大图预览
+             */
+            this.previewVisible = false;
+            this.previewImagePath = "";
+            this.previewTitle = "图片预览";
+            /**
+             * 当前预览所属字段的图片列表（用于翻页）
+             */
+            this.previewImages = [];
+            this.previewIndex = 0;
+            /**
+             * 附件字段图片缓存（避免模板里反复 getImageList 导致 *ngFor 重建、点击丢失）
+             */
+            this.imageListCache = new Map();
+            this.displayListCache = new Map();
         }
+        Object.defineProperty(HdDetailFormComponent.prototype, "canPreviewPrev", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this.previewIndex > 0;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(HdDetailFormComponent.prototype, "canPreviewNext", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this.previewIndex < this.previewImages.length - 1;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * @return {?}
          */
@@ -502,6 +543,7 @@
                  */
                 function (item) { return !item.hide; }));
             }
+            this.refreshImageCache();
         };
         /**
          * @param {?} changes
@@ -522,6 +564,7 @@
                      */
                     function (item) { return !item.hide; }));
                 }
+                this.refreshImageCache();
             }
         };
         /**
@@ -534,8 +577,29 @@
          */
         function (col) {
             return !!(col &&
-                (col.type === HdDetailFormFieldType.Accessory ||
-                    col.type === "accessory"));
+                (col.type === HdDetailFormFieldType.Accessory || col.type === "accessory"));
+        };
+        /**
+         * @private
+         * @return {?}
+         */
+        HdDetailFormComponent.prototype.refreshImageCache = /**
+         * @private
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            this.imageListCache.clear();
+            this.displayListCache.clear();
+            (this.formCols || []).forEach((/**
+             * @param {?} col
+             * @return {?}
+             */
+            function (col) {
+                if (_this.isAccessory(col)) {
+                    _this.imageListCache.set(col, _this.parseImageList(col));
+                }
+            }));
         };
         /**
          * 解析附件图片列表。value 支持：
@@ -546,13 +610,15 @@
          * 解析附件图片列表。value 支持：
          * - string / string[]（图片地址）
          * - { name?, path? / url? }[]
+         * @private
          * @param {?} col
          * @return {?}
          */
-        HdDetailFormComponent.prototype.getImageList = /**
+        HdDetailFormComponent.prototype.parseImageList = /**
          * 解析附件图片列表。value 支持：
          * - string / string[]（图片地址）
          * - { name?, path? / url? }[]
+         * @private
          * @param {?} col
          * @return {?}
          */
@@ -590,6 +656,20 @@
             }));
             return result;
         };
+        /**
+         * @param {?} col
+         * @return {?}
+         */
+        HdDetailFormComponent.prototype.getImageList = /**
+         * @param {?} col
+         * @return {?}
+         */
+        function (col) {
+            if (!this.imageListCache.has(col)) {
+                this.imageListCache.set(col, this.parseImageList(col));
+            }
+            return this.imageListCache.get(col) || [];
+        };
         /**
          * @param {?} col
          * @return {?}
@@ -601,6 +681,42 @@
         function (col) {
             return this.getImageList(col).length > 0;
         };
+        /** 实际渲染的缩略图（最多 4 张） */
+        /**
+         * 实际渲染的缩略图（最多 4 张）
+         * @param {?} col
+         * @return {?}
+         */
+        HdDetailFormComponent.prototype.getDisplayImages = /**
+         * 实际渲染的缩略图（最多 4 张）
+         * @param {?} col
+         * @return {?}
+         */
+        function (col) {
+            if (this.displayListCache.has(col)) {
+                return this.displayListCache.get(col);
+            }
+            /** @type {?} */
+            var display = this.getImageList(col).slice(0, MAX_VISIBLE_IMAGES);
+            this.displayListCache.set(col, display);
+            return display;
+        };
+        /** 未展示张数（末张蒙版 +n） */
+        /**
+         * 未展示张数（末张蒙版 +n）
+         * @param {?} col
+         * @return {?}
+         */
+        HdDetailFormComponent.prototype.getMoreCount = /**
+         * 未展示张数（末张蒙版 +n）
+         * @param {?} col
+         * @return {?}
+         */
+        function (col) {
+            /** @type {?} */
+            var total = this.getImageList(col).length;
+            return total > MAX_VISIBLE_IMAGES ? total - MAX_VISIBLE_IMAGES : 0;
+        };
         /**
          * @param {?} image
          * @return {?}
@@ -613,18 +729,34 @@
             return (image && (image.path || image.url)) || "";
         };
         /**
+         * @param {?} index
+         * @param {?} image
+         * @return {?}
+         */
+        HdDetailFormComponent.prototype.trackByImage = /**
+         * @param {?} index
+         * @param {?} image
+         * @return {?}
+         */
+        function (index, image) {
+            return (image && (image.path || image.url)) || String(index);
+        };
+        /**
+         * @param {?} col
          * @param {?} image
          * @param {?} index
          * @param {?=} event
          * @return {?}
          */
         HdDetailFormComponent.prototype.onImageClick = /**
+         * @param {?} col
          * @param {?} image
          * @param {?} index
          * @param {?=} event
          * @return {?}
          */
-        function (image, index, event) {
+        function (col, image, index, event) {
+            var _this = this;
             if (event) {
                 event.preventDefault();
                 event.stopPropagation();
@@ -632,9 +764,85 @@
             /** @type {?} */
             var path = this.getImagePath(image);
             this.imageClick.emit({ image: image, path: path, index: index });
-            if (path) {
-                window.open(path, "_blank");
+            if (!path) {
+                return;
             }
+            this.previewImages = this.getImageList(col).slice();
+            this.previewIndex = index >= 0 ? index : 0;
+            this.applyPreviewImage();
+            setTimeout((/**
+             * @return {?}
+             */
+            function () {
+                _this.previewVisible = true;
+            }));
+        };
+        /**
+         * @param {?=} event
+         * @return {?}
+         */
+        HdDetailFormComponent.prototype.previewPrev = /**
+         * @param {?=} event
+         * @return {?}
+         */
+        function (event) {
+            if (event) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            if (!this.canPreviewPrev) {
+                return;
+            }
+            this.previewIndex -= 1;
+            this.applyPreviewImage();
+        };
+        /**
+         * @param {?=} event
+         * @return {?}
+         */
+        HdDetailFormComponent.prototype.previewNext = /**
+         * @param {?=} event
+         * @return {?}
+         */
+        function (event) {
+            if (event) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            if (!this.canPreviewNext) {
+                return;
+            }
+            this.previewIndex += 1;
+            this.applyPreviewImage();
+        };
+        /**
+         * @private
+         * @return {?}
+         */
+        HdDetailFormComponent.prototype.applyPreviewImage = /**
+         * @private
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var image = this.previewImages[this.previewIndex];
+            /** @type {?} */
+            var path = this.getImagePath(image);
+            this.previewImagePath = path;
+            this.previewTitle =
+                (image && image.name) || "图片" + (this.previewIndex + 1);
+        };
+        /**
+         * @return {?}
+         */
+        HdDetailFormComponent.prototype.closePreview = /**
+         * @return {?}
+         */
+        function () {
+            this.previewVisible = false;
+            this.previewImages = [];
+            this.previewIndex = 0;
+            this.previewImagePath = "";
         };
         /** HdOption.width：默认 1，最大 4 */
         /**
@@ -671,8 +879,8 @@
         HdDetailFormComponent.decorators = [
             { type: core.Component, args: [{
                         selector: "hd-detail-form",
-                        template: "<nz-content class=\"hd-detail-form-container\">\n  <nz-descriptions [nzColumn]=\"nzColumn\">\n    <ng-container *ngFor=\"let col of formCols\">\n      <!-- \u9644\u4EF6\u56FE\u7247\uFF1A\u6807\u7B7E\u4E0E\u9996\u56FE\u5DE6\u4E0A\u89D2\u9876\u5BF9\u9F50\uFF08Figma description-cell / \u56FE\u7247\uFF09 -->\n      <nz-descriptions-item *ngIf=\"isAccessory(col)\" [nzTitle]=\"col.label\" [nzSpan]=\"getColSpan(col)\">\n        <div class=\"hd-detail-form-images\" *ngIf=\"hasImages(col)\">\n          <a class=\"hd-detail-form-image\" *ngFor=\"let image of getImageList(col); let i = index\"\n            href=\"javascript:void(0)\"\n            (click)=\"onImageClick(image, i, $event)\"\n            [attr.title]=\"image.name || ('\u56FE\u7247' + (i + 1))\">\n            <img [src]=\"getImagePath(image)\" [alt]=\"image.name || ('\u56FE\u7247' + (i + 1))\" />\n          </a>\n        </div>\n        <span *ngIf=\"!hasImages(col)\">&lt;\u7A7A&gt;</span>\n      </nz-descriptions-item>\n      <!-- \u666E\u901A\u6587\u672C -->\n      <nz-descriptions-item *ngIf=\"!isAccessory(col) && !col.click\" [nzTitle]=\"col.label\" [nzSpan]=\"getColSpan(col)\">\n        <span [ngStyle]=\"{'color': col?.color ? col.color : null}\">{{(col.value === '0' || col.value === 0 || col.value\n          )? col.value : '&lt;\u7A7A&gt;'}}</span>\n      </nz-descriptions-item>\n      <!-- \u53EF\u70B9\u51FB -->\n      <nz-descriptions-item *ngIf=\"!isAccessory(col) && col.click\" [nzTitle]=\"col.label\" [nzSpan]=\"getColSpan(col)\">\n        <span [ngStyle]=\"{'color': col?.color ? col.color : null}\" *ngIf=\"col.clickText\">\n          {{(col.value === '0' || col.value === 0 || col.value\n            )? col.value : '&lt;\u7A7A&gt;'}}\n          <a (click)=\"triggerEvent(col.click || null)\">&nbsp;&nbsp;&nbsp;&nbsp;{{ col.clickText }}</a>\n          <a *ngIf=\"col.clickText1\" (click)=\"triggerEvent(col.click1 || null)\">&nbsp;&nbsp;&nbsp;&nbsp;{{ col.clickText1 }}</a>\n        </span>\n        <span [ngStyle]=\"{'color': col?.color ? col.color : null}\" *ngIf=\"!col.clickText\">\n          <a (click)=\"triggerEvent(col.click || null)\">{{(col.value === '0' || col.value === 0 || col.value\n            )? col.value : '&lt;\u7A7A&gt;'}}</a>\n          <a *ngIf=\"col.clickText1\" (click)=\"triggerEvent(col.click1 || null)\">&nbsp;&nbsp;&nbsp;&nbsp;{{ col.clickText1 }}</a>\n        </span>\n      </nz-descriptions-item>\n    </ng-container>\n  </nz-descriptions>\n</nz-content>\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-detail-form-container{font-size:14px}.hd-detail-form-container ::ng-deep td.ant-descriptions-item{vertical-align:top;padding-top:6px!important;padding-bottom:6px!important;padding-left:0!important;font-size:14px}.hd-detail-form-container ::ng-deep .ant-descriptions-item>span{vertical-align:top}.hd-detail-form-container ::ng-deep .ant-descriptions-item-label{color:#4b504e;font-size:14px;line-height:22px;padding-top:1px;vertical-align:top}.hd-detail-form-container ::ng-deep .ant-descriptions-item-content{word-break:break-all;color:rgba(0,0,0,.85);font-weight:400;font-size:14px;vertical-align:top;line-height:22px}.hd-detail-form-container ::ng-deep a{font-size:14px}.hd-detail-form-container ::ng-deep td{white-space:unset!important}.hd-detail-form-container .hd-detail-form-images{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px}.hd-detail-form-container .hd-detail-form-image{display:inline-flex;flex-shrink:0;box-sizing:border-box;width:48px;height:48px;overflow:hidden;border:1px solid #e5e6eb;border-radius:4px;cursor:pointer;line-height:0}.hd-detail-form-container .hd-detail-form-image img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.hd-detail-form-container .hd-detail-form-image:hover{border-color:#20b95d}"]
+                        template: "<nz-content class=\"hd-detail-form-container\">\n  <nz-descriptions [nzColumn]=\"nzColumn\">\n    <ng-container *ngFor=\"let col of formCols\">\n      <!-- \u9644\u4EF6\u56FE\u7247\uFF1A\u6700\u591A\u5C55\u793A 4 \u5F20\uFF0C\u8D85\u51FA\u672B\u5F20\u8499\u7248 +n -->\n      <nz-descriptions-item *ngIf=\"isAccessory(col)\" [nzTitle]=\"col.label\" [nzSpan]=\"getColSpan(col)\">\n        <div class=\"hd-detail-form-images\" *ngIf=\"hasImages(col)\">\n          <div class=\"hd-detail-form-image-item\"\n            *ngFor=\"let image of getDisplayImages(col); let i = index; trackBy: trackByImage\"\n            (click)=\"onImageClick(col, image, i, $event)\">\n            <img class=\"hd-detail-form-image\"\n              [src]=\"getImagePath(image)\"\n              [alt]=\"image.name || ('\u56FE\u7247' + (i + 1))\"\n              [attr.title]=\"image.name || ('\u56FE\u7247' + (i + 1))\" />\n            <span class=\"hd-detail-form-image-mask\"\n              *ngIf=\"getMoreCount(col) > 0 && i === getDisplayImages(col).length - 1\">\n              +{{ getMoreCount(col) }}\n            </span>\n          </div>\n        </div>\n        <span *ngIf=\"!hasImages(col)\">&lt;\u7A7A&gt;</span>\n      </nz-descriptions-item>\n      <!-- \u666E\u901A\u6587\u672C -->\n      <nz-descriptions-item *ngIf=\"!isAccessory(col) && !col.click\" [nzTitle]=\"col.label\" [nzSpan]=\"getColSpan(col)\">\n        <span [ngStyle]=\"{'color': col?.color ? col.color : null}\">{{(col.value === '0' || col.value === 0 || col.value\n          )? col.value : '&lt;\u7A7A&gt;'}}</span>\n      </nz-descriptions-item>\n      <!-- \u53EF\u70B9\u51FB -->\n      <nz-descriptions-item *ngIf=\"!isAccessory(col) && col.click\" [nzTitle]=\"col.label\" [nzSpan]=\"getColSpan(col)\">\n        <span [ngStyle]=\"{'color': col?.color ? col.color : null}\" *ngIf=\"col.clickText\">\n          {{(col.value === '0' || col.value === 0 || col.value\n          )? col.value : '&lt;\u7A7A&gt;'}}\n          <a (click)=\"triggerEvent(col.click || null)\">&nbsp;&nbsp;&nbsp;&nbsp;{{ col.clickText }}</a>\n          <a *ngIf=\"col.clickText1\" (click)=\"triggerEvent(col.click1 || null)\">&nbsp;&nbsp;&nbsp;&nbsp;{{ col.clickText1\n            }}</a>\n        </span>\n        <span [ngStyle]=\"{'color': col?.color ? col.color : null}\" *ngIf=\"!col.clickText\">\n          <a (click)=\"triggerEvent(col.click || null)\">{{(col.value === '0' || col.value === 0 || col.value\n            )? col.value : '&lt;\u7A7A&gt;'}}</a>\n          <a *ngIf=\"col.clickText1\" (click)=\"triggerEvent(col.click1 || null)\">&nbsp;&nbsp;&nbsp;&nbsp;{{ col.clickText1\n            }}</a>\n        </span>\n      </nz-descriptions-item>\n    </ng-container>\n  </nz-descriptions>\n</nz-content>\n\n<nz-modal [(nzVisible)]=\"previewVisible\" [nzTitle]=\"previewTitle\" [nzFooter]=\"null\" [nzWidth]=\"960\"\n  [nzContent]=\"previewModalContent\" (nzOnCancel)=\"closePreview()\">\n</nz-modal>\n<ng-template #previewModalContent>\n  <div class=\"hd-detail-form-preview\">\n    <button type=\"button\" class=\"hd-detail-form-preview-nav hd-detail-form-preview-nav--prev\"\n      *ngIf=\"previewImages.length > 1\" [disabled]=\"!canPreviewPrev\" (click)=\"previewPrev($event)\"\n      title=\"\u4E0A\u4E00\u5F20\">\n      <i nz-icon nzType=\"left\" nzTheme=\"outline\"></i>\n    </button>\n    <div class=\"hd-detail-form-preview-body\">\n      <img *ngIf=\"previewImagePath\" [src]=\"previewImagePath\" [alt]=\"previewTitle\" />\n      <div class=\"hd-detail-form-preview-index\" *ngIf=\"previewImages.length > 1\">\n        {{ previewIndex + 1 }} / {{ previewImages.length }}\n      </div>\n    </div>\n    <button type=\"button\" class=\"hd-detail-form-preview-nav hd-detail-form-preview-nav--next\"\n      *ngIf=\"previewImages.length > 1\" [disabled]=\"!canPreviewNext\" (click)=\"previewNext($event)\"\n      title=\"\u4E0B\u4E00\u5F20\">\n      <i nz-icon nzType=\"right\" nzTheme=\"outline\"></i>\n    </button>\n  </div>\n</ng-template>\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-detail-form-container{font-size:14px}.hd-detail-form-container ::ng-deep td.ant-descriptions-item{vertical-align:top;padding-top:6px!important;padding-bottom:6px!important;padding-left:0!important;font-size:14px}.hd-detail-form-container ::ng-deep .ant-descriptions-item>span{vertical-align:top}.hd-detail-form-container ::ng-deep .ant-descriptions-item-label{color:#4b504e;font-size:14px;line-height:22px;padding-top:1px;vertical-align:top}.hd-detail-form-container ::ng-deep .ant-descriptions-item-content{word-break:break-all;color:rgba(0,0,0,.85);font-weight:400;font-size:14px;vertical-align:top;line-height:22px}.hd-detail-form-container ::ng-deep a{font-size:14px}.hd-detail-form-container ::ng-deep td{white-space:unset!important}.hd-detail-form-container .hd-detail-form-images{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:6px}.hd-detail-form-container .hd-detail-form-image-item{position:relative;flex-shrink:0;box-sizing:border-box;width:48px;height:48px;overflow:hidden;border:1px solid #e5e6eb;border-radius:4px;cursor:pointer}.hd-detail-form-container .hd-detail-form-image-item:hover{border-color:#20b95d}.hd-detail-form-container .hd-detail-form-image{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.hd-detail-form-container .hd-detail-form-image-mask{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff;font-size:14px;line-height:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.hd-detail-form-preview{position:relative;display:flex;align-items:center;justify-content:center;min-height:200px;max-height:70vh}.hd-detail-form-preview .hd-detail-form-preview-body{flex:1;min-width:0;text-align:center;max-height:70vh;overflow:auto}.hd-detail-form-preview img{display:inline-block;max-width:100%;max-height:calc(70vh - 32px);-o-object-fit:contain;object-fit:contain}.hd-detail-form-preview .hd-detail-form-preview-index{margin-top:8px;color:#4b504e;font-size:14px;line-height:22px}.hd-detail-form-preview .hd-detail-form-preview-nav{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 8px;padding:0;border:1px solid #e5e6eb;border-radius:50%;background:#fff;color:rgba(0,0,0,.85);cursor:pointer;outline:0}.hd-detail-form-preview .hd-detail-form-preview-nav i{font-size:16px}.hd-detail-form-preview .hd-detail-form-preview-nav:hover:not(:disabled){border-color:#20b95d;color:#20b95d}.hd-detail-form-preview .hd-detail-form-preview-nav:disabled{color:#c9cdd4;cursor:not-allowed;background:#f7f8fa}"]
                     }] }
         ];
         /** @nocollapse */
@@ -699,6 +907,33 @@
         HdDetailFormComponent.prototype.imageClick;
         /** @type {?} */
         HdDetailFormComponent.prototype.HdDetailFormFieldType;
+        /**
+         * 大图预览
+         * @type {?}
+         */
+        HdDetailFormComponent.prototype.previewVisible;
+        /** @type {?} */
+        HdDetailFormComponent.prototype.previewImagePath;
+        /** @type {?} */
+        HdDetailFormComponent.prototype.previewTitle;
+        /**
+         * 当前预览所属字段的图片列表（用于翻页）
+         * @type {?}
+         */
+        HdDetailFormComponent.prototype.previewImages;
+        /** @type {?} */
+        HdDetailFormComponent.prototype.previewIndex;
+        /**
+         * 附件字段图片缓存（避免模板里反复 getImageList 导致 *ngFor 重建、点击丢失）
+         * @type {?}
+         * @private
+         */
+        HdDetailFormComponent.prototype.imageListCache;
+        /**
+         * @type {?}
+         * @private
+         */
+        HdDetailFormComponent.prototype.displayListCache;
     }
 
     /**
@@ -2150,19 +2385,25 @@
                 this.virtualScrollActive !== useVirtual;
             this.virtualScrollActive = useVirtual;
             if (forceRemount || modeChanged) {
-                this.showTable = false;
-                this.cdr.markForCheck();
+                // 延后销毁/重建，避免当前 CD 周期内 ngIf 变更触发 ExpressionChanged
                 setTimeout((/**
                  * @return {?}
                  */
                 function () {
-                    _this.showTable = true;
+                    _this.showTable = false;
                     _this.cdr.markForCheck();
                     setTimeout((/**
                      * @return {?}
                      */
                     function () {
-                        _this.afterTableRender(useVirtual);
+                        _this.showTable = true;
+                        _this.cdr.markForCheck();
+                        setTimeout((/**
+                         * @return {?}
+                         */
+                        function () {
+                            _this.afterTableRender(useVirtual);
+                        }));
                     }));
                 }));
                 return;