fantasy-ngzorro 2.1.60 → 2.1.62

package/README.md

@@ -37,6 +37,9 @@
 | — | 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，点击下载/查看） |
 | — | 2026-6-23 | hd-table 状态列支持 `stateField` 自定义取值字段、`isState` 按列名取值；hd-form Input 支持 `prefix` / `prefixIcon`；hd-detail-lines-page 支持 `isCrossPageSelect` 跨页勾选开关 |
@@ -578,14 +581,27 @@ this.hdFormLines.batchFillSelected({ remark: '批量备注' }); // 批量填充
 ### 示例
 
 ```html
-<hd-detail-form [formCols]="formCols"></hd-detail-form>
+<hd-detail-form [formCols]="formCols" (imageClick)="onDetailFormImageClick($event)"></hd-detail-form>
 ```
 
 ```typescript
+import { HdDetailFormFieldType, HdOption } from 'fantasy-ngzorro';
+
 formCols: HdOption[] = [
   { label: '收货单号', value: '202111030001' },
   { label: '地址', value: '江苏/南京市/玄武区 某某路', width: 2 },
-  { label: '备注', value: '...' }
+  { label: '备注', value: '...' },
+  // 附件图片：label + 图片地址列表（Figma 48×48 缩略图横排）
+  {
+    label: '食品经营许可证',
+    type: HdDetailFormFieldType.Accessory,
+    width: 2,
+    value: [
+      { name: '正面', path: 'https://oss.xxx.com/a.png' },
+      { name: '背面', path: 'https://oss.xxx.com/b.png' },
+      'https://oss.xxx.com/c.png', // 也支持纯地址字符串
+    ],
+  },
 ];
 ```
 
@@ -593,6 +609,16 @@ formCols: HdOption[] = [
 | ---- | ---- | ------ | ---- |
 | formCols | HdOption[] | — | 展示字段，见 [HdOption](#hdoption键值展示项) |
 | nzColumn | number \| object | `4` | 一行列数，默认固定 4 列 |
+| imageClick | EventEmitter | — | 附件图片点击回调 `{ image, path, index }`（`type=accessory` 时） |
+
+附件字段 `type: HdDetailFormFieldType.Accessory`（或 `'accessory'`）：
+
+- 对齐 Figma `items/description-cell`「图片」：标签 + **48×48** 缩略图横排（间距 6px，边框 `#E5E6EB`，圆角 4px）；标签与首图顶对齐
+- `value` 支持：图片地址 `string` / `string[]`，或 `{ name?, path?/url? }[]`
+- 最多直接展示 **4** 张；超出时第 4 张蒙版显示 `+n`（n 为剩余张数）
+- 点击缩略图弹窗预览大图（支持左右翻页），并触发 `imageClick`
+- 无图时展示 `<空>`
+- **不使用** `hd-accessory-list`（文件列表样式请用独立附件列表组件）
 
 ---
 
@@ -904,7 +930,8 @@ selectOption: {
 | 参数 | 类型 | 说明 |
 | ---- | ---- | ---- |
 | label | string | 标签 |
-| value | any | 值 |
+| value | any | 值；附件类型时为图片地址 `string` / `string[]` 或 `{ name?, path?/url? }[]` |
+| type | string / HdDetailFormFieldType | 字段类型，默认文本；`accessory` 为附件图片缩略图 |
 | width | number | 占据列数，默认 1，最大 4；未传按 1 |
 | color | string | 文字颜色 |
 | hide | boolean | 是否隐藏 |

package/bundles/fantasy-ngzorro.umd.js

@@ -437,6 +437,49 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
+    /** @enum {string} */
+    var HdDetailFormFieldType = {
+        /** 普通文本（默认） */
+        Text: "text",
+        /** 附件图片（描述项内横排缩略图） */
+        Accessory: "accessory",
+    };
+    /**
+     * 附件图片项（path 为图片地址）
+     * @record
+     */
+    function HdDetailFormImage() { }
+    if (false) {
+        /** @type {?|undefined} */
+        HdDetailFormImage.prototype.name;
+        /** @type {?|undefined} */
+        HdDetailFormImage.prototype.path;
+        /** @type {?|undefined} */
+        HdDetailFormImage.prototype.url;
+    }
+    var HdDetailFormService = /** @class */ (function () {
+        function HdDetailFormService() {
+        }
+        HdDetailFormService.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: "root",
+                    },] }
+        ];
+        /** @nocollapse */
+        HdDetailFormService.ctorParameters = function () { return []; };
+        /** @nocollapse */ HdDetailFormService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function HdDetailFormService_Factory() { return new HdDetailFormService(); }, token: HdDetailFormService, providedIn: "root" });
+        return HdDetailFormService;
+    }());
+
+    /**
+     * @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();
@@ -444,7 +487,48 @@
              * 一行列数，默认固定 4 列（不再按屏幕宽度自适应）
              */
             this.nzColumn = 4;
+            /**
+             * 附件图片点击回调
+             */
+            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 {?}
          */
@@ -453,13 +537,13 @@
          */
         function () {
             if (this.formCols && this.formCols.length > 0) {
-                // 剔除掉formCols里面不需要显示的内容
                 this.formCols = this.formCols.filter((/**
                  * @param {?} item
                  * @return {?}
                  */
                 function (item) { return !item.hide; }));
             }
+            this.refreshImageCache();
         };
         /**
          * @param {?} changes
@@ -470,16 +554,295 @@
          * @return {?}
          */
         function (changes) {
-            if (changes['formCols'] && JSON.stringify(changes['formCols'].currentValue) !== JSON.stringify(changes['formCols'].previousValue)) {
+            if (changes["formCols"] &&
+                JSON.stringify(changes["formCols"].currentValue) !==
+                    JSON.stringify(changes["formCols"].previousValue)) {
                 if (this.formCols && this.formCols.length > 0) {
-                    // 剔除掉formCols里面不需要显示的内容
                     this.formCols = this.formCols.filter((/**
                      * @param {?} item
                      * @return {?}
                      */
                     function (item) { return !item.hide; }));
                 }
+                this.refreshImageCache();
+            }
+        };
+        /**
+         * @param {?} col
+         * @return {?}
+         */
+        HdDetailFormComponent.prototype.isAccessory = /**
+         * @param {?} col
+         * @return {?}
+         */
+        function (col) {
+            return !!(col &&
+                (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 支持：
+         * - string / string[]（图片地址）
+         * - { name?, path? / url? }[]
+         */
+        /**
+         * 解析附件图片列表。value 支持：
+         * - string / string[]（图片地址）
+         * - { name?, path? / url? }[]
+         * @private
+         * @param {?} col
+         * @return {?}
+         */
+        HdDetailFormComponent.prototype.parseImageList = /**
+         * 解析附件图片列表。value 支持：
+         * - string / string[]（图片地址）
+         * - { name?, path? / url? }[]
+         * @private
+         * @param {?} col
+         * @return {?}
+         */
+        function (col) {
+            /** @type {?} */
+            var value = col && col.value;
+            if (value == null || value === "") {
+                return [];
+            }
+            /** @type {?} */
+            var list = Array.isArray(value) ? value : [value];
+            /** @type {?} */
+            var result = [];
+            list.forEach((/**
+             * @param {?} item
+             * @return {?}
+             */
+            function (item) {
+                if (item == null || item === "") {
+                    return;
+                }
+                if (typeof item === "string") {
+                    result.push({ path: item });
+                    return;
+                }
+                /** @type {?} */
+                var path = item.path || item.url || item.address || "";
+                if (!path) {
+                    return;
+                }
+                result.push({
+                    name: item.name || item.fileName,
+                    path: String(path),
+                });
+            }));
+            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 {?}
+         */
+        HdDetailFormComponent.prototype.hasImages = /**
+         * @param {?} col
+         * @return {?}
+         */
+        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 {?}
+         */
+        HdDetailFormComponent.prototype.getImagePath = /**
+         * @param {?} image
+         * @return {?}
+         */
+        function (image) {
+            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 (col, image, index, event) {
+            var _this = this;
+            if (event) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            /** @type {?} */
+            var path = this.getImagePath(image);
+            this.imageClick.emit({ image: image, path: path, index: index });
+            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 */
         /**
@@ -515,16 +878,17 @@
         };
         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      <nz-descriptions-item *ngIf=\"!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      <nz-descriptions-item *ngIf=\"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-label{color:#4b504e;font-size:14px}.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}.hd-detail-form-container ::ng-deep a{font-size:14px}.hd-detail-form-container ::ng-deep td{white-space:unset!important}"]
+                        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\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 */
         HdDetailFormComponent.ctorParameters = function () { return []; };
         HdDetailFormComponent.propDecorators = {
             formCols: [{ type: core.Input }],
-            nzColumn: [{ type: core.Input }]
+            nzColumn: [{ type: core.Input }],
+            imageClick: [{ type: core.Output }]
         };
         return HdDetailFormComponent;
     }());
@@ -536,6 +900,40 @@
          * @type {?}
          */
         HdDetailFormComponent.prototype.nzColumn;
+        /**
+         * 附件图片点击回调
+         * @type {?}
+         */
+        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;
     }
 
     /**
@@ -547,12 +945,9 @@
         }
         HdDetailFormModule.decorators = [
             { type: core.NgModule, args: [{
-                        imports: [
-                            common.CommonModule,
-                            ngZorroAntd.NgZorroAntdModule
-                        ],
+                        imports: [common.CommonModule, ngZorroAntd.NgZorroAntdModule],
                         exports: [HdDetailFormComponent],
-                        declarations: [HdDetailFormComponent]
+                        declarations: [HdDetailFormComponent],
                     },] }
         ];
         return HdDetailFormModule;
@@ -727,6 +1122,12 @@
          * @type {?}
          */
         HdOption.prototype.width;
+        /**
+         * 字段类型，默认文本。
+         * `accessory`：附件图片，value 为图片地址 string / string[] 或 { name?, path?/url? }[]
+         * @type {?}
+         */
+        HdOption.prototype.type;
         /** @type {?} */
         HdOption.prototype.clickText;
         /** @type {?} */
@@ -1984,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;
@@ -10910,24 +11317,6 @@
         TableTotalOption.prototype.insertName;
     }
 
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var HdDetailFormService = /** @class */ (function () {
-        function HdDetailFormService() {
-        }
-        HdDetailFormService.decorators = [
-            { type: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        HdDetailFormService.ctorParameters = function () { return []; };
-        /** @nocollapse */ HdDetailFormService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function HdDetailFormService_Factory() { return new HdDetailFormService(); }, token: HdDetailFormService, providedIn: "root" });
-        return HdDetailFormService;
-    }());
-
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -11381,6 +11770,7 @@
     exports.HdAccessoryListComponent = HdAccessoryListComponent;
     exports.HdButtonService = HdButtonService;
     exports.HdCurrentTableComponent = HdCurrentTableComponent;
+    exports.HdDetailFormFieldType = HdDetailFormFieldType;
     exports.HdDetailFormService = HdDetailFormService;
     exports.HdFilterService = HdFilterService;
     exports.HdFormLinesService = HdFormLinesService;