atr-components 0.2.1 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/shared/upload/upload.component.mjs +12 -4
- package/fesm2015/atr-components.mjs +10 -3
- package/fesm2015/atr-components.mjs.map +1 -1
- package/fesm2020/atr-components.mjs +10 -3
- package/fesm2020/atr-components.mjs.map +1 -1
- package/lib/shared/upload/upload.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -3128,19 +3128,26 @@ class UploadComponent {
|
|
|
3128
3128
|
this.opts.imageList = this.opts.imageList.filter((v, i) => i != numer);
|
|
3129
3129
|
// this.opts.imageList = numer
|
|
3130
3130
|
}
|
|
3131
|
-
priviewImg(
|
|
3131
|
+
priviewImg(img) {
|
|
3132
|
+
let url = ToolsUtil.getOssUrl(this.getImgUrl(img));
|
|
3132
3133
|
console.log(url);
|
|
3133
3134
|
this.nzImageService.preview([{
|
|
3134
3135
|
src: url,
|
|
3135
3136
|
alt: 'ng-zorro'
|
|
3136
3137
|
}], { nzZoom: 1.5, nzRotate: 0 });
|
|
3137
3138
|
}
|
|
3139
|
+
getImgUrl(img) {
|
|
3140
|
+
if (img.originFileObj && img.originFileObj.key) {
|
|
3141
|
+
return img.originFileObj.key;
|
|
3142
|
+
}
|
|
3143
|
+
return (img.url || img.thumbUrl);
|
|
3144
|
+
}
|
|
3138
3145
|
}
|
|
3139
3146
|
UploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadComponent, deps: [{ token: i0.Injector }, { token: i1$4.NzImageService }, { token: i2.HttpClient }, { token: i3$2.NzModalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3140
|
-
UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UploadComponent, selector: "atr-img-upload", inputs: { opts: "opts", isEdit: "isEdit", allowChangSeq: "allowChangSeq" }, outputs: { afterChange: "afterChange", optsChange: "optsChange" }, ngImport: i0, template: "<div class=\"clearfix\">\r\n <nz-upload\r\n *ngIf=\"opts && opts?.uploadType == 'drag'\"\r\n nzType=\"drag\"\r\n nzAction=\"\"\r\n [nzBeforeUpload]=\"beforeUpload\"\r\n [nzRemove]=\"remove\"\r\n [nzCustomRequest]=\"customReq\"\r\n (nzChange)=\"onChange($event)\"\r\n [nzType]=\"opts?.uploadType\"\r\n [nzAccept]=\"opts.nzFileType\"\r\n [nzLimit]=\"'1'\"\r\n >\r\n <p class=\"ant-upload-drag-icon\">\r\n <i nz-icon nzType=\"inbox\"></i>\r\n </p>\r\n <p class=\"ant-upload-text\">\u5355\u51FB\u6216\u62D6\u52A8\u6587\u4EF6\u5230\u6B64\u533A\u57DF\u4E0A\u4F20</p>\r\n </nz-upload>\r\n <nz-upload\r\n *ngIf=\"opts && opts?.uploadType != 'drag'\"\r\n nzAction=\"\"\r\n nzListType=\"picture-card\"\r\n [(nzFileList)]=\"opts.imageList\"\r\n [nzShowButton]=\"opts.imageList.length < opts.limit\"\r\n [nzShowUploadList]=\"showUploadList\"\r\n [nzPreview]=\"handlePreview\"\r\n [nzRemove]=\"remove\"\r\n [nzBeforeUpload]=\"beforeUpload\"\r\n [nzCustomRequest]=\"customReq\"\r\n (nzChange)=\"onChange($event)\"\r\n [nzType]=\"opts?.uploadType\"\r\n [nzAccept]=\"opts.nzFileType\"\r\n [nzDisabled]=\"!isEdit\"\r\n [nzLimit]=\"'1'\"\r\n [nzFileListRender]=\"opts && isEdit && allowChangSeq && opts.imageList.length > 0 ? fileListTmp : null\"\r\n >\r\n <i nz-icon nzType=\"plus\"></i>\r\n <div class=\"ant-upload-text\">\u4E0A\u4F20\u56FE\u7247</div>\r\n </nz-upload>\r\n <!-- <a *ngIf=\"allowChangSeq && isEdit && opts.imageList.length > 1\" (click)=\"openBannerSeq(imgsContent, tplFooter)\"\r\n style=\"margin-left: 10px; \"\r\n ><i nz-icon nzType=\"plus\" nzTheme=\"outline\" style=\"color: #1890ff; font-size: 15px\"></i>\u8C03\u6574\u56FE\u7247\u987A\u5E8F</a>-->\r\n <nz-modal\r\n [nzVisible]=\"previewVisible\"\r\n [nzContent]=\"modalContent\"\r\n [nzFooter]=\"null\"\r\n (nzOnCancel)=\"previewVisible = false\"\r\n >\r\n <ng-template #modalContent>\r\n <img *ngIf=\"!previewImage.endsWith('.mp4')\" [src]=\"previewImage\" [ngStyle]=\"{ width: '100%' }\"/>\r\n <div style=\"width: 100%;margin-top: 15px\">\r\n <app-video *ngIf=\"previewImage.endsWith('.mp4')\" [url]=\"previewImage\"></app-video>\r\n </div>\r\n </ng-template>\r\n </nz-modal>\r\n <ng-template #imgsContent>\r\n <ng-container *ngIf=\"opts && opts.imageList\">\r\n <ng-container *ngFor=\"let imgs of opts.imageList;let i = index\">\r\n <div class=\"img-div\">\r\n <img [src]=\"imgs.url || imgs.thumbUrl\" [ngStyle]=\"{ width: '100px',display: 'inline-block', margin:'10px' }\"/>\r\n <div style=\"margin-right: 20px\">\r\n <a title=\"\u4E0A\u79FB\" *ngIf=\" i > 0\" style=\"display: block;\" (click)=\"arrowUp(i)\"><i nz-icon nzType=\"arrow-up\"\r\n nzTheme=\"outline\"\r\n style=\"color: #1890ff; font-size: 15px;\"></i>\r\n \u4E0A\u79FB</a>\r\n <a title=\"\u4E0B\u79FB\" *ngIf=\" i < opts.imageList.length - 1\" (click)=\"arrowDown(i)\"><i nz-icon nzType=\"arrow-down\"\r\n nzTheme=\"outline\"\r\n style=\"color: #1890ff; font-size: 15px\"></i>\r\n \u4E0B\u79FB</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </ng-template>\r\n <!-- </nz-modal>-->\r\n</div>\r\n<ng-template #fileListTmp>\r\n <div dragula=\"dragulaBag\" [(dragulaModel)]=\"opts.imageList\" (dragulaModelChange)=\"dragnumber($event)\">\r\n <ng-container *ngFor=\"let imgs of opts.imageList;let i = index\">\r\n <div class=\"img-div img-pre\" style=\"\">\r\n <img [src]=\"imgs
|
|
3147
|
+
UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UploadComponent, selector: "atr-img-upload", inputs: { opts: "opts", isEdit: "isEdit", allowChangSeq: "allowChangSeq" }, outputs: { afterChange: "afterChange", optsChange: "optsChange" }, ngImport: i0, template: "<div class=\"clearfix\">\r\n <nz-upload\r\n *ngIf=\"opts && opts?.uploadType == 'drag'\"\r\n nzType=\"drag\"\r\n nzAction=\"\"\r\n [nzBeforeUpload]=\"beforeUpload\"\r\n [nzRemove]=\"remove\"\r\n [nzCustomRequest]=\"customReq\"\r\n (nzChange)=\"onChange($event)\"\r\n [nzType]=\"opts?.uploadType\"\r\n [nzAccept]=\"opts.nzFileType\"\r\n [nzLimit]=\"'1'\"\r\n >\r\n <p class=\"ant-upload-drag-icon\">\r\n <i nz-icon nzType=\"inbox\"></i>\r\n </p>\r\n <p class=\"ant-upload-text\">\u5355\u51FB\u6216\u62D6\u52A8\u6587\u4EF6\u5230\u6B64\u533A\u57DF\u4E0A\u4F20</p>\r\n </nz-upload>\r\n <nz-upload\r\n *ngIf=\"opts && opts?.uploadType != 'drag'\"\r\n nzAction=\"\"\r\n nzListType=\"picture-card\"\r\n [(nzFileList)]=\"opts.imageList\"\r\n [nzShowButton]=\"opts.imageList.length < opts.limit\"\r\n [nzShowUploadList]=\"showUploadList\"\r\n [nzPreview]=\"handlePreview\"\r\n [nzRemove]=\"remove\"\r\n [nzBeforeUpload]=\"beforeUpload\"\r\n [nzCustomRequest]=\"customReq\"\r\n (nzChange)=\"onChange($event)\"\r\n [nzType]=\"opts?.uploadType\"\r\n [nzAccept]=\"opts.nzFileType\"\r\n [nzDisabled]=\"!isEdit\"\r\n [nzLimit]=\"'1'\"\r\n [nzFileListRender]=\"opts && isEdit && allowChangSeq && opts.imageList.length > 0 ? fileListTmp : null\"\r\n >\r\n <i nz-icon nzType=\"plus\"></i>\r\n <div class=\"ant-upload-text\">\u4E0A\u4F20\u56FE\u7247</div>\r\n </nz-upload>\r\n <!-- <a *ngIf=\"allowChangSeq && isEdit && opts.imageList.length > 1\" (click)=\"openBannerSeq(imgsContent, tplFooter)\"\r\n style=\"margin-left: 10px; \"\r\n ><i nz-icon nzType=\"plus\" nzTheme=\"outline\" style=\"color: #1890ff; font-size: 15px\"></i>\u8C03\u6574\u56FE\u7247\u987A\u5E8F</a>-->\r\n <nz-modal\r\n [nzVisible]=\"previewVisible\"\r\n [nzContent]=\"modalContent\"\r\n [nzFooter]=\"null\"\r\n (nzOnCancel)=\"previewVisible = false\"\r\n >\r\n <ng-template #modalContent>\r\n <img *ngIf=\"!previewImage.endsWith('.mp4')\" [src]=\"previewImage\" [ngStyle]=\"{ width: '100%' }\"/>\r\n <div style=\"width: 100%;margin-top: 15px\">\r\n <app-video *ngIf=\"previewImage.endsWith('.mp4')\" [url]=\"previewImage\"></app-video>\r\n </div>\r\n </ng-template>\r\n </nz-modal>\r\n <ng-template #imgsContent>\r\n <ng-container *ngIf=\"opts && opts.imageList\">\r\n <ng-container *ngFor=\"let imgs of opts.imageList;let i = index\">\r\n <div class=\"img-div\">\r\n <img [src]=\"imgs.url || imgs.thumbUrl\" [ngStyle]=\"{ width: '100px',display: 'inline-block', margin:'10px' }\"/>\r\n <div style=\"margin-right: 20px\">\r\n <a title=\"\u4E0A\u79FB\" *ngIf=\" i > 0\" style=\"display: block;\" (click)=\"arrowUp(i)\"><i nz-icon nzType=\"arrow-up\"\r\n nzTheme=\"outline\"\r\n style=\"color: #1890ff; font-size: 15px;\"></i>\r\n \u4E0A\u79FB</a>\r\n <a title=\"\u4E0B\u79FB\" *ngIf=\" i < opts.imageList.length - 1\" (click)=\"arrowDown(i)\"><i nz-icon nzType=\"arrow-down\"\r\n nzTheme=\"outline\"\r\n style=\"color: #1890ff; font-size: 15px\"></i>\r\n \u4E0B\u79FB</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </ng-template>\r\n <!-- </nz-modal>-->\r\n</div>\r\n<ng-template #fileListTmp>\r\n <div dragula=\"dragulaBag\" [(dragulaModel)]=\"opts.imageList\" (dragulaModelChange)=\"dragnumber($event)\">\r\n <ng-container *ngFor=\"let imgs of opts.imageList;let i = index\">\r\n <div class=\"img-div img-pre\" style=\"\">\r\n <img [src]=\"getImgUrl(imgs) |ossImg\" [ngStyle]=\"{ width: '100px',display: 'inline-block', margin:'10px' }\"/>\r\n <div>\r\n <span (click)=\"priviewImg(imgs)\" nz-icon nzType=\"eye\" nzTheme=\"outline\"></span>\r\n <span (click)=\"delImg(i)\" nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n</ng-template>\r\n<ng-template #tplFooter>\r\n <button nz-button nzType=\"default\" (click)=\"destroyTplModal()\">\r\n \u53D6\u6D88\r\n </button>\r\n <button nz-button nzType=\"primary\" (click)=\"saveSeq()\">\r\n \u4FDD\u5B58\u987A\u5E8F\r\n </button>\r\n</ng-template>\r\n\r\n\r\n", styles: ["@import\"~dragula/dist/dragula.css\";i[nz-icon]{font-size:32px;color:#999}.ant-upload-text{margin-top:8px;color:#666}.img-div{padding:8px;border:1px solid #d9d9d9;border-radius:4px;margin-top:20px;display:flex;align-items:center;justify-content:space-between}:host .img-pre{display:inline-block;position:relative;margin-left:10px}:host .img-pre div{display:none;position:absolute;width:100%;height:100%;top:0;left:0;background:#0000006b;z-index:200;color:#fff;align-items:center;justify-content:center;font-size:16px}:host .img-pre div span{margin:10px;cursor:pointer}:host .img-pre:hover div{display:flex}\n"], components: [{ type: i1$2.NzUploadComponent, selector: "nz-upload", inputs: ["nzType", "nzLimit", "nzSize", "nzFileType", "nzAccept", "nzAction", "nzDirectory", "nzOpenFileDialogOnClick", "nzBeforeUpload", "nzCustomRequest", "nzData", "nzFilter", "nzFileList", "nzDisabled", "nzHeaders", "nzListType", "nzMultiple", "nzName", "nzShowUploadList", "nzShowButton", "nzWithCredentials", "nzRemove", "nzPreview", "nzPreviewFile", "nzPreviewIsImage", "nzTransformFile", "nzDownload", "nzIconRender", "nzFileListRender"], outputs: ["nzChange", "nzFileListChange"], exportAs: ["nzUpload"] }, { type: i3$2.NzModalComponent, selector: "nz-modal", inputs: ["nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzContent", "nzComponentParams", "nzFooter", "nzZIndex", "nzWidth", "nzWrapClassName", "nzClassName", "nzStyle", "nzTitle", "nzCloseIcon", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { type: VideoComponent, selector: "app-video", inputs: ["url"] }, { type: i2$2.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { type: i8.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10$1.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel"], outputs: ["dragulaModelChange"] }, { type: i5$1.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }], pipes: { "ossImg": OssImgPipe } });
|
|
3141
3148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadComponent, decorators: [{
|
|
3142
3149
|
type: Component,
|
|
3143
|
-
args: [{ selector: 'atr-img-upload', template: "<div class=\"clearfix\">\r\n <nz-upload\r\n *ngIf=\"opts && opts?.uploadType == 'drag'\"\r\n nzType=\"drag\"\r\n nzAction=\"\"\r\n [nzBeforeUpload]=\"beforeUpload\"\r\n [nzRemove]=\"remove\"\r\n [nzCustomRequest]=\"customReq\"\r\n (nzChange)=\"onChange($event)\"\r\n [nzType]=\"opts?.uploadType\"\r\n [nzAccept]=\"opts.nzFileType\"\r\n [nzLimit]=\"'1'\"\r\n >\r\n <p class=\"ant-upload-drag-icon\">\r\n <i nz-icon nzType=\"inbox\"></i>\r\n </p>\r\n <p class=\"ant-upload-text\">\u5355\u51FB\u6216\u62D6\u52A8\u6587\u4EF6\u5230\u6B64\u533A\u57DF\u4E0A\u4F20</p>\r\n </nz-upload>\r\n <nz-upload\r\n *ngIf=\"opts && opts?.uploadType != 'drag'\"\r\n nzAction=\"\"\r\n nzListType=\"picture-card\"\r\n [(nzFileList)]=\"opts.imageList\"\r\n [nzShowButton]=\"opts.imageList.length < opts.limit\"\r\n [nzShowUploadList]=\"showUploadList\"\r\n [nzPreview]=\"handlePreview\"\r\n [nzRemove]=\"remove\"\r\n [nzBeforeUpload]=\"beforeUpload\"\r\n [nzCustomRequest]=\"customReq\"\r\n (nzChange)=\"onChange($event)\"\r\n [nzType]=\"opts?.uploadType\"\r\n [nzAccept]=\"opts.nzFileType\"\r\n [nzDisabled]=\"!isEdit\"\r\n [nzLimit]=\"'1'\"\r\n [nzFileListRender]=\"opts && isEdit && allowChangSeq && opts.imageList.length > 0 ? fileListTmp : null\"\r\n >\r\n <i nz-icon nzType=\"plus\"></i>\r\n <div class=\"ant-upload-text\">\u4E0A\u4F20\u56FE\u7247</div>\r\n </nz-upload>\r\n <!-- <a *ngIf=\"allowChangSeq && isEdit && opts.imageList.length > 1\" (click)=\"openBannerSeq(imgsContent, tplFooter)\"\r\n style=\"margin-left: 10px; \"\r\n ><i nz-icon nzType=\"plus\" nzTheme=\"outline\" style=\"color: #1890ff; font-size: 15px\"></i>\u8C03\u6574\u56FE\u7247\u987A\u5E8F</a>-->\r\n <nz-modal\r\n [nzVisible]=\"previewVisible\"\r\n [nzContent]=\"modalContent\"\r\n [nzFooter]=\"null\"\r\n (nzOnCancel)=\"previewVisible = false\"\r\n >\r\n <ng-template #modalContent>\r\n <img *ngIf=\"!previewImage.endsWith('.mp4')\" [src]=\"previewImage\" [ngStyle]=\"{ width: '100%' }\"/>\r\n <div style=\"width: 100%;margin-top: 15px\">\r\n <app-video *ngIf=\"previewImage.endsWith('.mp4')\" [url]=\"previewImage\"></app-video>\r\n </div>\r\n </ng-template>\r\n </nz-modal>\r\n <ng-template #imgsContent>\r\n <ng-container *ngIf=\"opts && opts.imageList\">\r\n <ng-container *ngFor=\"let imgs of opts.imageList;let i = index\">\r\n <div class=\"img-div\">\r\n <img [src]=\"imgs.url || imgs.thumbUrl\" [ngStyle]=\"{ width: '100px',display: 'inline-block', margin:'10px' }\"/>\r\n <div style=\"margin-right: 20px\">\r\n <a title=\"\u4E0A\u79FB\" *ngIf=\" i > 0\" style=\"display: block;\" (click)=\"arrowUp(i)\"><i nz-icon nzType=\"arrow-up\"\r\n nzTheme=\"outline\"\r\n style=\"color: #1890ff; font-size: 15px;\"></i>\r\n \u4E0A\u79FB</a>\r\n <a title=\"\u4E0B\u79FB\" *ngIf=\" i < opts.imageList.length - 1\" (click)=\"arrowDown(i)\"><i nz-icon nzType=\"arrow-down\"\r\n nzTheme=\"outline\"\r\n style=\"color: #1890ff; font-size: 15px\"></i>\r\n \u4E0B\u79FB</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </ng-template>\r\n <!-- </nz-modal>-->\r\n</div>\r\n<ng-template #fileListTmp>\r\n <div dragula=\"dragulaBag\" [(dragulaModel)]=\"opts.imageList\" (dragulaModelChange)=\"dragnumber($event)\">\r\n <ng-container *ngFor=\"let imgs of opts.imageList;let i = index\">\r\n <div class=\"img-div img-pre\" style=\"\">\r\n <img [src]=\"imgs
|
|
3150
|
+
args: [{ selector: 'atr-img-upload', template: "<div class=\"clearfix\">\r\n <nz-upload\r\n *ngIf=\"opts && opts?.uploadType == 'drag'\"\r\n nzType=\"drag\"\r\n nzAction=\"\"\r\n [nzBeforeUpload]=\"beforeUpload\"\r\n [nzRemove]=\"remove\"\r\n [nzCustomRequest]=\"customReq\"\r\n (nzChange)=\"onChange($event)\"\r\n [nzType]=\"opts?.uploadType\"\r\n [nzAccept]=\"opts.nzFileType\"\r\n [nzLimit]=\"'1'\"\r\n >\r\n <p class=\"ant-upload-drag-icon\">\r\n <i nz-icon nzType=\"inbox\"></i>\r\n </p>\r\n <p class=\"ant-upload-text\">\u5355\u51FB\u6216\u62D6\u52A8\u6587\u4EF6\u5230\u6B64\u533A\u57DF\u4E0A\u4F20</p>\r\n </nz-upload>\r\n <nz-upload\r\n *ngIf=\"opts && opts?.uploadType != 'drag'\"\r\n nzAction=\"\"\r\n nzListType=\"picture-card\"\r\n [(nzFileList)]=\"opts.imageList\"\r\n [nzShowButton]=\"opts.imageList.length < opts.limit\"\r\n [nzShowUploadList]=\"showUploadList\"\r\n [nzPreview]=\"handlePreview\"\r\n [nzRemove]=\"remove\"\r\n [nzBeforeUpload]=\"beforeUpload\"\r\n [nzCustomRequest]=\"customReq\"\r\n (nzChange)=\"onChange($event)\"\r\n [nzType]=\"opts?.uploadType\"\r\n [nzAccept]=\"opts.nzFileType\"\r\n [nzDisabled]=\"!isEdit\"\r\n [nzLimit]=\"'1'\"\r\n [nzFileListRender]=\"opts && isEdit && allowChangSeq && opts.imageList.length > 0 ? fileListTmp : null\"\r\n >\r\n <i nz-icon nzType=\"plus\"></i>\r\n <div class=\"ant-upload-text\">\u4E0A\u4F20\u56FE\u7247</div>\r\n </nz-upload>\r\n <!-- <a *ngIf=\"allowChangSeq && isEdit && opts.imageList.length > 1\" (click)=\"openBannerSeq(imgsContent, tplFooter)\"\r\n style=\"margin-left: 10px; \"\r\n ><i nz-icon nzType=\"plus\" nzTheme=\"outline\" style=\"color: #1890ff; font-size: 15px\"></i>\u8C03\u6574\u56FE\u7247\u987A\u5E8F</a>-->\r\n <nz-modal\r\n [nzVisible]=\"previewVisible\"\r\n [nzContent]=\"modalContent\"\r\n [nzFooter]=\"null\"\r\n (nzOnCancel)=\"previewVisible = false\"\r\n >\r\n <ng-template #modalContent>\r\n <img *ngIf=\"!previewImage.endsWith('.mp4')\" [src]=\"previewImage\" [ngStyle]=\"{ width: '100%' }\"/>\r\n <div style=\"width: 100%;margin-top: 15px\">\r\n <app-video *ngIf=\"previewImage.endsWith('.mp4')\" [url]=\"previewImage\"></app-video>\r\n </div>\r\n </ng-template>\r\n </nz-modal>\r\n <ng-template #imgsContent>\r\n <ng-container *ngIf=\"opts && opts.imageList\">\r\n <ng-container *ngFor=\"let imgs of opts.imageList;let i = index\">\r\n <div class=\"img-div\">\r\n <img [src]=\"imgs.url || imgs.thumbUrl\" [ngStyle]=\"{ width: '100px',display: 'inline-block', margin:'10px' }\"/>\r\n <div style=\"margin-right: 20px\">\r\n <a title=\"\u4E0A\u79FB\" *ngIf=\" i > 0\" style=\"display: block;\" (click)=\"arrowUp(i)\"><i nz-icon nzType=\"arrow-up\"\r\n nzTheme=\"outline\"\r\n style=\"color: #1890ff; font-size: 15px;\"></i>\r\n \u4E0A\u79FB</a>\r\n <a title=\"\u4E0B\u79FB\" *ngIf=\" i < opts.imageList.length - 1\" (click)=\"arrowDown(i)\"><i nz-icon nzType=\"arrow-down\"\r\n nzTheme=\"outline\"\r\n style=\"color: #1890ff; font-size: 15px\"></i>\r\n \u4E0B\u79FB</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </ng-template>\r\n <!-- </nz-modal>-->\r\n</div>\r\n<ng-template #fileListTmp>\r\n <div dragula=\"dragulaBag\" [(dragulaModel)]=\"opts.imageList\" (dragulaModelChange)=\"dragnumber($event)\">\r\n <ng-container *ngFor=\"let imgs of opts.imageList;let i = index\">\r\n <div class=\"img-div img-pre\" style=\"\">\r\n <img [src]=\"getImgUrl(imgs) |ossImg\" [ngStyle]=\"{ width: '100px',display: 'inline-block', margin:'10px' }\"/>\r\n <div>\r\n <span (click)=\"priviewImg(imgs)\" nz-icon nzType=\"eye\" nzTheme=\"outline\"></span>\r\n <span (click)=\"delImg(i)\" nz-icon nzType=\"delete\" nzTheme=\"outline\"></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n</ng-template>\r\n<ng-template #tplFooter>\r\n <button nz-button nzType=\"default\" (click)=\"destroyTplModal()\">\r\n \u53D6\u6D88\r\n </button>\r\n <button nz-button nzType=\"primary\" (click)=\"saveSeq()\">\r\n \u4FDD\u5B58\u987A\u5E8F\r\n </button>\r\n</ng-template>\r\n\r\n\r\n", styles: ["@import\"~dragula/dist/dragula.css\";i[nz-icon]{font-size:32px;color:#999}.ant-upload-text{margin-top:8px;color:#666}.img-div{padding:8px;border:1px solid #d9d9d9;border-radius:4px;margin-top:20px;display:flex;align-items:center;justify-content:space-between}:host .img-pre{display:inline-block;position:relative;margin-left:10px}:host .img-pre div{display:none;position:absolute;width:100%;height:100%;top:0;left:0;background:#0000006b;z-index:200;color:#fff;align-items:center;justify-content:center;font-size:16px}:host .img-pre div span{margin:10px;cursor:pointer}:host .img-pre:hover div{display:flex}\n"] }]
|
|
3144
3151
|
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1$4.NzImageService }, { type: i2.HttpClient }, { type: i3$2.NzModalService }]; }, propDecorators: { opts: [{
|
|
3145
3152
|
type: Input
|
|
3146
3153
|
}], isEdit: [{
|