@dignite-ng/expand.file-explorer 0.0.21 → 0.0.27
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/README.md +24 -24
- package/config/providers/route.provider.d.ts +1 -1
- package/esm2022/config/dignite-ng-expand.file-explorer-config.mjs +1 -1
- package/esm2022/config/enums/index.mjs +1 -1
- package/esm2022/config/enums/route-names.mjs +1 -1
- package/esm2022/config/file-config.module.mjs +5 -5
- package/esm2022/config/providers/index.mjs +1 -1
- package/esm2022/config/providers/route.provider.mjs +1 -1
- package/esm2022/config/public-api.mjs +1 -1
- package/esm2022/dignite-ng-expand.file-explorer.mjs +1 -1
- package/esm2022/lib/components/dome/file-dome.component.mjs +13 -15
- package/esm2022/lib/components/dynamic-form/file-explorer/file-explorer-config.component.mjs +5 -14
- package/esm2022/lib/components/dynamic-form/file-explorer/file-explorer-config.mjs +5 -5
- package/esm2022/lib/components/dynamic-form/file-explorer/file-explorer-control.component.mjs +14 -22
- package/esm2022/lib/components/dynamic-form/file-explorer/index.mjs +1 -1
- package/esm2022/lib/components/dynamic-form/form-control-group.mjs +1 -1
- package/esm2022/lib/components/file-edit/file-edit.component.mjs +19 -23
- package/esm2022/lib/components/file-modal/file-modal.component.mjs +58 -72
- package/esm2022/lib/components/file-modal-tree/file-modal-tree.component.mjs +25 -40
- package/esm2022/lib/components/file-picker/file-picker.component.mjs +14 -17
- package/esm2022/lib/components/index.mjs +1 -1
- package/esm2022/lib/file-explorer-routing.module.mjs +5 -5
- package/esm2022/lib/file-explorer.module.mjs +7 -7
- package/esm2022/lib/previews/file-preview.component.mjs +26 -30
- package/esm2022/lib/previews/index.mjs +1 -1
- package/esm2022/lib/previews/models.mjs +1 -1
- package/esm2022/lib/proxy/dignite/file-explorer/directories/file-descriptor.service.mjs +33 -35
- package/esm2022/lib/proxy/dignite/file-explorer/directories/index.mjs +1 -1
- package/esm2022/lib/proxy/dignite/file-explorer/directories/models.mjs +1 -1
- package/esm2022/lib/proxy/dignite/file-explorer/files/file-descriptor.service.mjs +45 -47
- package/esm2022/lib/proxy/dignite/file-explorer/files/index.mjs +1 -1
- package/esm2022/lib/proxy/dignite/file-explorer/files/models.mjs +1 -1
- package/esm2022/lib/proxy/dignite/file-explorer/index.mjs +1 -1
- package/esm2022/lib/proxy/dignite/index.mjs +1 -1
- package/esm2022/lib/proxy/index.mjs +1 -1
- package/esm2022/lib/proxy/microsoft/asp-net-core/index.mjs +1 -1
- package/esm2022/lib/proxy/microsoft/asp-net-core/mvc/index.mjs +1 -1
- package/esm2022/lib/proxy/microsoft/asp-net-core/mvc/models.mjs +1 -1
- package/esm2022/lib/proxy/microsoft/extensions/index.mjs +1 -1
- package/esm2022/lib/proxy/microsoft/extensions/primitives/index.mjs +1 -1
- package/esm2022/lib/proxy/microsoft/extensions/primitives/models.mjs +1 -1
- package/esm2022/lib/proxy/microsoft/index.mjs +1 -1
- package/esm2022/lib/proxy/microsoft/net/http/headers/index.mjs +1 -1
- package/esm2022/lib/proxy/microsoft/net/http/headers/models.mjs +1 -1
- package/esm2022/lib/proxy/microsoft/net/http/index.mjs +1 -1
- package/esm2022/lib/proxy/microsoft/net/index.mjs +1 -1
- package/esm2022/lib/proxy/volo/abp/content/index.mjs +1 -1
- package/esm2022/lib/proxy/volo/abp/content/models.mjs +1 -1
- package/esm2022/lib/proxy/volo/abp/index.mjs +1 -1
- package/esm2022/lib/proxy/volo/index.mjs +1 -1
- package/esm2022/lib/services/file-api.service.mjs +7 -4
- package/esm2022/lib/services/index.mjs +1 -1
- package/esm2022/public-api.mjs +1 -1
- package/fesm2022/dignite-ng-expand.file-explorer-config.mjs +4 -4
- package/fesm2022/dignite-ng-expand.file-explorer-config.mjs.map +1 -1
- package/fesm2022/dignite-ng-expand.file-explorer.mjs +255 -303
- package/fesm2022/dignite-ng-expand.file-explorer.mjs.map +1 -1
- package/lib/components/dome/file-dome.component.d.ts +1 -0
- package/lib/components/dynamic-form/file-explorer/file-explorer-config.component.d.ts +1 -1
- package/lib/components/dynamic-form/file-explorer/file-explorer-control.component.d.ts +1 -1
- package/lib/components/file-modal/file-modal.component.d.ts +2 -2
- package/package.json +3 -7
|
@@ -61,6 +61,9 @@ class FileApiService {
|
|
|
61
61
|
else if (obj[key] instanceof RegExp) {
|
|
62
62
|
result[key] = new RegExp(obj[key]);
|
|
63
63
|
}
|
|
64
|
+
else if (obj[key] instanceof File) {
|
|
65
|
+
result[key] = obj[key];
|
|
66
|
+
}
|
|
64
67
|
else {
|
|
65
68
|
result[key] = this.deepClone(obj[key]);
|
|
66
69
|
}
|
|
@@ -72,10 +75,10 @@ class FileApiService {
|
|
|
72
75
|
}
|
|
73
76
|
return result;
|
|
74
77
|
}
|
|
75
|
-
static
|
|
76
|
-
static
|
|
78
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
79
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileApiService, providedIn: 'root' }); }
|
|
77
80
|
}
|
|
78
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
81
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileApiService, decorators: [{
|
|
79
82
|
type: Injectable,
|
|
80
83
|
args: [{
|
|
81
84
|
providedIn: 'root'
|
|
@@ -158,27 +161,30 @@ let ImageTypeOption = [{
|
|
|
158
161
|
];
|
|
159
162
|
|
|
160
163
|
class FilePreviewComponent {
|
|
161
|
-
modalService;
|
|
162
|
-
/**文件宽度 */
|
|
163
|
-
width = '100px';
|
|
164
|
-
/*文件链接 */
|
|
165
|
-
src = '';
|
|
166
|
-
/**是否支持大图预览 */
|
|
167
|
-
preview = true;
|
|
168
|
-
/**文件类型 */
|
|
169
|
-
type = '';
|
|
170
|
-
/**文件名称 */
|
|
171
|
-
name = '';
|
|
172
|
-
/**是否是文件 */
|
|
173
|
-
isImage = true;
|
|
174
|
-
/**是否是视频 */
|
|
175
|
-
isAudio = false;
|
|
176
|
-
/**是否是音频 */
|
|
177
|
-
isVideo = false;
|
|
178
|
-
/**文件类型及图标 */
|
|
179
|
-
_ImageTypeOption = ImageTypeOption;
|
|
180
164
|
constructor(modalService) {
|
|
181
165
|
this.modalService = modalService;
|
|
166
|
+
/**文件宽度 */
|
|
167
|
+
this.width = '100px';
|
|
168
|
+
/*文件链接 */
|
|
169
|
+
this.src = '';
|
|
170
|
+
/**是否支持大图预览 */
|
|
171
|
+
this.preview = true;
|
|
172
|
+
/**文件类型 */
|
|
173
|
+
this.type = '';
|
|
174
|
+
/**文件名称 */
|
|
175
|
+
this.name = '';
|
|
176
|
+
/**是否是文件 */
|
|
177
|
+
this.isImage = true;
|
|
178
|
+
/**是否是视频 */
|
|
179
|
+
this.isAudio = false;
|
|
180
|
+
/**是否是音频 */
|
|
181
|
+
this.isVideo = false;
|
|
182
|
+
/**文件类型及图标 */
|
|
183
|
+
this._ImageTypeOption = ImageTypeOption;
|
|
184
|
+
/**放大倍数 */
|
|
185
|
+
this.zoom = 10;
|
|
186
|
+
/**旋转 */
|
|
187
|
+
this.rotate = 0;
|
|
182
188
|
}
|
|
183
189
|
ngAfterContentInit() {
|
|
184
190
|
//Called after ngOnInit when the component's or directive's content has been initialized.
|
|
@@ -193,12 +199,6 @@ class FilePreviewComponent {
|
|
|
193
199
|
/**预览图片 */
|
|
194
200
|
previewImage() {
|
|
195
201
|
}
|
|
196
|
-
/**模态框实例 */
|
|
197
|
-
modalRef;
|
|
198
|
-
/**放大倍数 */
|
|
199
|
-
zoom = 10;
|
|
200
|
-
/**旋转 */
|
|
201
|
-
rotate = 0;
|
|
202
202
|
/**打开预览弹窗 */
|
|
203
203
|
OpenPreviewImage(content) {
|
|
204
204
|
this.modalRef = this.modalService.open(content, {
|
|
@@ -232,10 +232,10 @@ class FilePreviewComponent {
|
|
|
232
232
|
return this.rotate = 0;
|
|
233
233
|
this.rotate += 90;
|
|
234
234
|
}
|
|
235
|
-
static
|
|
236
|
-
static
|
|
235
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FilePreviewComponent, deps: [{ token: i8.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
236
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FilePreviewComponent, selector: "fe-file-preview", inputs: { width: "width", src: "src", preview: "preview", type: "type", name: "name" }, ngImport: i0, template: "<div class=\"image_box\" [style]=\"{width:width}\">\n <div class=\"img_box\" *ngIf=\"isImage\">\n <img [src]=\"src\" />\n <div class=\"option_box\" *ngIf=\"preview\">\n <i class=\"fa fa-eye \" (click.stop)=\"OpenPreviewImage(content)\"></i>\n </div>\n </div>\n <a [href]=\"src\" [download]=\"name\" target>\n <i class=\"fa fa-file-audio-o fs-1\" *ngIf=\"isAudio\"></i>\n <i class=\"fa fa-file-video-o fs-1\" *ngIf=\"isVideo\"></i>\n <ng-container *ngIf=\"!(isImage||isAudio||isVideo)\">\n <ng-container *ngFor=\"let item of _ImageTypeOption; let i=index\">\n <i class=\"fs-1\" [ngClass]=\"item.icon\" *ngIf=\"item.type===type\"></i>\n </ng-container>\n </ng-container>\n </a>\n</div>\n\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <div class=\"d-flex justify-content-end w-100 fs-3\">\n <i class=\"mx-2 fa fa fa-repeat\" aria-hidden=\"true\" title=\"\u53F3\u65CB\u8F6C\" role=\"button\" (click)=\"RotateRight()\"></i>\n <i class=\"mx-2 fa fa-search-minus\" aria-hidden=\"true\" title=\"\u7F29\u5C0F\" role=\"button\" (click)=\"zoomOut()\"></i>\n <i class=\"mx-2 fa fa-search-plus\" aria-hidden=\"true\" title=\"\u653E\u5927\" role=\"button\" (click)=\"zoomIn()\"></i>\n <i class=\"mx-2 fa fa-times\" aria-hidden=\"true\" role=\"button\" (click)=\"modal.dismiss('Cross click')\"></i>\n </div>\n </div> \n <div class=\"modal-body d-flex justify-content-center align-items-center \">\n <img width=\"400\" class=\"modal-body-preview\" [src]=\"src\" [style.transform]=\"'scale('+zoom/10+') rotate('+rotate+'deg)'\" >\n </div>\n</ng-template>", styles: [".image_box{text-align:center;position:relative}.image_box img{width:100%}.image_box .img_box:hover .option_box{display:flex}.image_box .option_box{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000040;align-items:center;justify-content:center;display:none;transition:all .2s linear}.image_box .option_box i{cursor:pointer;font-size:18px;color:#fff}.modal-body-preview{transition:all .2s}::ng-deep .dignite-preview .modal-content{background-color:transparent;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }] }); }
|
|
237
237
|
}
|
|
238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
238
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FilePreviewComponent, decorators: [{
|
|
239
239
|
type: Component,
|
|
240
240
|
args: [{ selector: 'fe-file-preview', template: "<div class=\"image_box\" [style]=\"{width:width}\">\n <div class=\"img_box\" *ngIf=\"isImage\">\n <img [src]=\"src\" />\n <div class=\"option_box\" *ngIf=\"preview\">\n <i class=\"fa fa-eye \" (click.stop)=\"OpenPreviewImage(content)\"></i>\n </div>\n </div>\n <a [href]=\"src\" [download]=\"name\" target>\n <i class=\"fa fa-file-audio-o fs-1\" *ngIf=\"isAudio\"></i>\n <i class=\"fa fa-file-video-o fs-1\" *ngIf=\"isVideo\"></i>\n <ng-container *ngIf=\"!(isImage||isAudio||isVideo)\">\n <ng-container *ngFor=\"let item of _ImageTypeOption; let i=index\">\n <i class=\"fs-1\" [ngClass]=\"item.icon\" *ngIf=\"item.type===type\"></i>\n </ng-container>\n </ng-container>\n </a>\n</div>\n\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <div class=\"d-flex justify-content-end w-100 fs-3\">\n <i class=\"mx-2 fa fa fa-repeat\" aria-hidden=\"true\" title=\"\u53F3\u65CB\u8F6C\" role=\"button\" (click)=\"RotateRight()\"></i>\n <i class=\"mx-2 fa fa-search-minus\" aria-hidden=\"true\" title=\"\u7F29\u5C0F\" role=\"button\" (click)=\"zoomOut()\"></i>\n <i class=\"mx-2 fa fa-search-plus\" aria-hidden=\"true\" title=\"\u653E\u5927\" role=\"button\" (click)=\"zoomIn()\"></i>\n <i class=\"mx-2 fa fa-times\" aria-hidden=\"true\" role=\"button\" (click)=\"modal.dismiss('Cross click')\"></i>\n </div>\n </div> \n <div class=\"modal-body d-flex justify-content-center align-items-center \">\n <img width=\"400\" class=\"modal-body-preview\" [src]=\"src\" [style.transform]=\"'scale('+zoom/10+') rotate('+rotate+'deg)'\" >\n </div>\n</ng-template>", styles: [".image_box{text-align:center;position:relative}.image_box img{width:100%}.image_box .img_box:hover .option_box{display:flex}.image_box .option_box{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000040;align-items:center;justify-content:center;display:none;transition:all .2s linear}.image_box .option_box i{cursor:pointer;font-size:18px;color:#fff}.modal-body-preview{transition:all .2s}::ng-deep .dignite-preview .modal-content{background-color:transparent;color:#fff}\n"] }]
|
|
241
241
|
}], ctorParameters: () => [{ type: i8.NgbModal }], propDecorators: { width: [{
|
|
@@ -251,39 +251,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
|
|
|
251
251
|
}] } });
|
|
252
252
|
|
|
253
253
|
class FileEditComponent {
|
|
254
|
-
_FileApiService;
|
|
255
254
|
constructor(_FileApiService) {
|
|
256
255
|
this._FileApiService = _FileApiService;
|
|
256
|
+
/**是否多选 */
|
|
257
|
+
this._multiple = true;
|
|
258
|
+
/**文件数据--已上传的数据 */
|
|
259
|
+
this._fileData = [];
|
|
260
|
+
/** 跟随表单提交--已提交的数据,或选择的数据源--回调*/
|
|
261
|
+
this.fileDataChange = new EventEmitter();
|
|
262
|
+
/**文件大小限制
|
|
263
|
+
* @param 1mb
|
|
264
|
+
*/
|
|
265
|
+
this.sizeLimit = 1048576;
|
|
266
|
+
/**文件表格数据 */
|
|
267
|
+
this.filesTableData = [];
|
|
268
|
+
/** 待删除已上传的文件们*/
|
|
269
|
+
this.deleteTheUploadedFiles = [];
|
|
257
270
|
}
|
|
258
|
-
/**是否多选 */
|
|
259
|
-
_multiple = true;
|
|
260
271
|
set multiple(v) {
|
|
261
272
|
this._multiple = v;
|
|
262
273
|
if (v) { }
|
|
263
274
|
}
|
|
264
|
-
/**文件数据--已上传的数据 */
|
|
265
|
-
_fileData = [];
|
|
266
275
|
set fileData(v) {
|
|
267
276
|
this._fileData = v;
|
|
268
277
|
if (v.length > 0) {
|
|
269
278
|
this.getFileChange({ target: { files: v } });
|
|
270
279
|
}
|
|
271
280
|
}
|
|
272
|
-
/** 跟随表单提交--已提交的数据,或选择的数据源--回调*/
|
|
273
|
-
fileDataChange = new EventEmitter();
|
|
274
|
-
/**文件大小限制
|
|
275
|
-
* @param 1mb
|
|
276
|
-
*/
|
|
277
|
-
sizeLimit = 1048576;
|
|
278
281
|
set limit(v) {
|
|
279
282
|
this.sizeLimit = v;
|
|
280
283
|
}
|
|
281
|
-
/**文件表格数据 */
|
|
282
|
-
filesTableData = [];
|
|
283
|
-
/** 待删除已上传的文件们*/
|
|
284
|
-
deleteTheUploadedFiles = [];
|
|
285
|
-
/**获取文件选择框的元素 */
|
|
286
|
-
fileEdit;
|
|
287
284
|
/**获取文件信息改变 */
|
|
288
285
|
async getFileChange(event) {
|
|
289
286
|
let files = new Array(...event.target.files);
|
|
@@ -327,10 +324,10 @@ class FileEditComponent {
|
|
|
327
324
|
resolve(files);
|
|
328
325
|
});
|
|
329
326
|
}
|
|
330
|
-
static
|
|
331
|
-
static
|
|
327
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileEditComponent, deps: [{ token: FileApiService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
328
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FileEditComponent, selector: "fe-file-edit", inputs: { multiple: "multiple", fileData: "fileData", limit: "limit" }, outputs: { fileDataChange: "fileDataChange" }, viewQueries: [{ propertyName: "fileEdit", first: true, predicate: ["fileEdit"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"input-group mb-2\">\n <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" (change)=\"getFileChange($event)\">\n</div>\n\n<table class=\"table\" *ngIf=\"filesTableData.length>0\">\n <thead>\n <tr>\n <th scope=\"col\"></th>\n <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n <th scope=\"col\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let item of filesTableData;let i =index\">\n <tr>\n <td>\n <fe-file-preview [width]=\"'80px'\" [src]=\"item.src\" [name]=\"item.name\" [type]=\"item.type\" [preview]=\"true\"></fe-file-preview>\n </td>\n <th scope=\"row\">\n <div>{{item.name}}</div>\n <div class=\"form-text text-danger\" *ngIf=\"item.size > sizeLimit\">\n {{'FileExplorer::ExceedsMaximumSize' |\n abpLocalization:_FileApiService.formatFileSize(sizeLimit)}}</div>\n </th>\n <td>{{item.fileSize}}</td>\n <td>\n <button class=\"btn btn-sm p-0 btn-light \" (click.stop)=\"deleteFileTableItem(i,item)\">\n <i class=\"fas fa-trash p-2\"></i>\n </button>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
|
|
332
329
|
}
|
|
333
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
330
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileEditComponent, decorators: [{
|
|
334
331
|
type: Component,
|
|
335
332
|
args: [{ selector: 'fe-file-edit', template: "<div class=\"input-group mb-2\">\n <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" (change)=\"getFileChange($event)\">\n</div>\n\n<table class=\"table\" *ngIf=\"filesTableData.length>0\">\n <thead>\n <tr>\n <th scope=\"col\"></th>\n <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n <th scope=\"col\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let item of filesTableData;let i =index\">\n <tr>\n <td>\n <fe-file-preview [width]=\"'80px'\" [src]=\"item.src\" [name]=\"item.name\" [type]=\"item.type\" [preview]=\"true\"></fe-file-preview>\n </td>\n <th scope=\"row\">\n <div>{{item.name}}</div>\n <div class=\"form-text text-danger\" *ngIf=\"item.size > sizeLimit\">\n {{'FileExplorer::ExceedsMaximumSize' |\n abpLocalization:_FileApiService.formatFileSize(sizeLimit)}}</div>\n </th>\n <td>{{item.fileSize}}</td>\n <td>\n <button class=\"btn btn-sm p-0 btn-light \" (click.stop)=\"deleteFileTableItem(i,item)\">\n <i class=\"fas fa-trash p-2\"></i>\n </button>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>" }]
|
|
336
333
|
}], ctorParameters: () => [{ type: FileApiService }], propDecorators: { multiple: [{
|
|
@@ -347,55 +344,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
|
|
|
347
344
|
}] } });
|
|
348
345
|
|
|
349
346
|
let FileDescriptorService$1 = class FileDescriptorService {
|
|
350
|
-
restService;
|
|
351
|
-
apiName = 'FileExplorer';
|
|
352
|
-
create = (input, config) => this.restService.request({
|
|
353
|
-
method: 'POST',
|
|
354
|
-
url: '/api/file-explorer/files',
|
|
355
|
-
params: { containerName: input.containerName, cellName: input.cellName, directoryId: input.directoryId, entityId: input.entityId },
|
|
356
|
-
body: input.file,
|
|
357
|
-
}, { apiName: this.apiName, ...config });
|
|
358
|
-
delete = (id, config) => this.restService.request({
|
|
359
|
-
method: 'DELETE',
|
|
360
|
-
url: `/api/file-explorer/files/${id}`,
|
|
361
|
-
}, { apiName: this.apiName, ...config });
|
|
362
|
-
download = (containerName, blobName, fileName, config) => this.restService.request({
|
|
363
|
-
method: 'GET',
|
|
364
|
-
url: `/api/file-explorer/files/download/${containerName}/${blobName}`,
|
|
365
|
-
params: { fileName },
|
|
366
|
-
}, { apiName: this.apiName, ...config });
|
|
367
|
-
get = (id, config) => this.restService.request({
|
|
368
|
-
method: 'GET',
|
|
369
|
-
url: `/api/file-explorer/files/${id}`,
|
|
370
|
-
}, { apiName: this.apiName, ...config });
|
|
371
|
-
getFileContainerConfiguration = (containerName, config) => this.restService.request({
|
|
372
|
-
method: 'GET',
|
|
373
|
-
url: '/api/file-explorer/files/configuration',
|
|
374
|
-
params: { containerName },
|
|
375
|
-
}, { apiName: this.apiName, ...config });
|
|
376
|
-
getList = (input, config) => this.restService.request({
|
|
377
|
-
method: 'GET',
|
|
378
|
-
url: '/api/file-explorer/files',
|
|
379
|
-
params: { containerName: input.containerName, directoryId: input.directoryId, creatorId: input.creatorId, filter: input.filter, entityId: input.entityId, sorting: input.sorting, skipCount: input.skipCount, maxResultCount: input.maxResultCount },
|
|
380
|
-
}, { apiName: this.apiName, ...config });
|
|
381
|
-
getStream = (containerName, blobName, imageResize, config) => this.restService.request({
|
|
382
|
-
method: 'GET',
|
|
383
|
-
responseType: 'blob',
|
|
384
|
-
url: `/api/file-explorer/files/${containerName}/${blobName}`,
|
|
385
|
-
params: { width: imageResize.width, height: imageResize.height },
|
|
386
|
-
}, { apiName: this.apiName, ...config });
|
|
387
|
-
update = (id, input, config) => this.restService.request({
|
|
388
|
-
method: 'PUT',
|
|
389
|
-
url: `/api/file-explorer/files/${id}`,
|
|
390
|
-
body: input,
|
|
391
|
-
}, { apiName: this.apiName, ...config });
|
|
392
347
|
constructor(restService) {
|
|
393
348
|
this.restService = restService;
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
349
|
+
this.apiName = 'FileExplorer';
|
|
350
|
+
this.create = (input, config) => this.restService.request({
|
|
351
|
+
method: 'POST',
|
|
352
|
+
url: '/api/file-explorer/files',
|
|
353
|
+
params: { containerName: input.containerName, cellName: input.cellName, directoryId: input.directoryId, entityId: input.entityId },
|
|
354
|
+
body: input.file,
|
|
355
|
+
}, { apiName: this.apiName, ...config });
|
|
356
|
+
this.delete = (id, config) => this.restService.request({
|
|
357
|
+
method: 'DELETE',
|
|
358
|
+
url: `/api/file-explorer/files/${id}`,
|
|
359
|
+
}, { apiName: this.apiName, ...config });
|
|
360
|
+
this.download = (containerName, blobName, fileName, config) => this.restService.request({
|
|
361
|
+
method: 'GET',
|
|
362
|
+
url: `/api/file-explorer/files/download/${containerName}/${blobName}`,
|
|
363
|
+
params: { fileName },
|
|
364
|
+
}, { apiName: this.apiName, ...config });
|
|
365
|
+
this.get = (id, config) => this.restService.request({
|
|
366
|
+
method: 'GET',
|
|
367
|
+
url: `/api/file-explorer/files/${id}`,
|
|
368
|
+
}, { apiName: this.apiName, ...config });
|
|
369
|
+
this.getFileContainerConfiguration = (containerName, config) => this.restService.request({
|
|
370
|
+
method: 'GET',
|
|
371
|
+
url: '/api/file-explorer/files/configuration',
|
|
372
|
+
params: { containerName },
|
|
373
|
+
}, { apiName: this.apiName, ...config });
|
|
374
|
+
this.getList = (input, config) => this.restService.request({
|
|
375
|
+
method: 'GET',
|
|
376
|
+
url: '/api/file-explorer/files',
|
|
377
|
+
params: { containerName: input.containerName, directoryId: input.directoryId, creatorId: input.creatorId, filter: input.filter, entityId: input.entityId, sorting: input.sorting, skipCount: input.skipCount, maxResultCount: input.maxResultCount },
|
|
378
|
+
}, { apiName: this.apiName, ...config });
|
|
379
|
+
this.getStream = (containerName, blobName, imageResize, config) => this.restService.request({
|
|
380
|
+
method: 'GET',
|
|
381
|
+
responseType: 'blob',
|
|
382
|
+
url: `/api/file-explorer/files/${containerName}/${blobName}`,
|
|
383
|
+
params: { width: imageResize.width, height: imageResize.height },
|
|
384
|
+
}, { apiName: this.apiName, ...config });
|
|
385
|
+
this.update = (id, input, config) => this.restService.request({
|
|
386
|
+
method: 'PUT',
|
|
387
|
+
url: `/api/file-explorer/files/${id}`,
|
|
388
|
+
body: input,
|
|
389
|
+
}, { apiName: this.apiName, ...config });
|
|
390
|
+
}
|
|
391
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileDescriptorService, deps: [{ token: i3.RestService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
392
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileDescriptorService, providedIn: 'root' }); }
|
|
397
393
|
};
|
|
398
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
394
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileDescriptorService$1, decorators: [{
|
|
399
395
|
type: Injectable,
|
|
400
396
|
args: [{
|
|
401
397
|
providedIn: 'root',
|
|
@@ -408,43 +404,42 @@ var index$e = /*#__PURE__*/Object.freeze({
|
|
|
408
404
|
});
|
|
409
405
|
|
|
410
406
|
class FileDescriptorService {
|
|
411
|
-
restService;
|
|
412
|
-
apiName = 'FileExplorer';
|
|
413
|
-
create = (input, config) => this.restService.request({
|
|
414
|
-
method: 'POST',
|
|
415
|
-
url: '/api/file-explorer/directories',
|
|
416
|
-
body: input,
|
|
417
|
-
}, { apiName: this.apiName, ...config });
|
|
418
|
-
delete = (id, config) => this.restService.request({
|
|
419
|
-
method: 'DELETE',
|
|
420
|
-
url: `/api/file-explorer/directories/${id}`,
|
|
421
|
-
}, { apiName: this.apiName, ...config });
|
|
422
|
-
get = (id, config) => this.restService.request({
|
|
423
|
-
method: 'GET',
|
|
424
|
-
url: `/api/file-explorer/directories/${id}`,
|
|
425
|
-
}, { apiName: this.apiName, ...config });
|
|
426
|
-
getList = (input, config) => this.restService.request({
|
|
427
|
-
method: 'GET',
|
|
428
|
-
url: '/api/file-explorer/directories',
|
|
429
|
-
params: { containerName: input.containerName },
|
|
430
|
-
}, { apiName: this.apiName, ...config });
|
|
431
|
-
move = (id, input, config) => this.restService.request({
|
|
432
|
-
method: 'PUT',
|
|
433
|
-
url: `/api/file-explorer/directories/${id}/move`,
|
|
434
|
-
body: input,
|
|
435
|
-
}, { apiName: this.apiName, ...config });
|
|
436
|
-
update = (id, input, config) => this.restService.request({
|
|
437
|
-
method: 'PUT',
|
|
438
|
-
url: `/api/file-explorer/directories/${id}`,
|
|
439
|
-
body: input,
|
|
440
|
-
}, { apiName: this.apiName, ...config });
|
|
441
407
|
constructor(restService) {
|
|
442
408
|
this.restService = restService;
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
409
|
+
this.apiName = 'FileExplorer';
|
|
410
|
+
this.create = (input, config) => this.restService.request({
|
|
411
|
+
method: 'POST',
|
|
412
|
+
url: '/api/file-explorer/directories',
|
|
413
|
+
body: input,
|
|
414
|
+
}, { apiName: this.apiName, ...config });
|
|
415
|
+
this.delete = (id, config) => this.restService.request({
|
|
416
|
+
method: 'DELETE',
|
|
417
|
+
url: `/api/file-explorer/directories/${id}`,
|
|
418
|
+
}, { apiName: this.apiName, ...config });
|
|
419
|
+
this.get = (id, config) => this.restService.request({
|
|
420
|
+
method: 'GET',
|
|
421
|
+
url: `/api/file-explorer/directories/${id}`,
|
|
422
|
+
}, { apiName: this.apiName, ...config });
|
|
423
|
+
this.getList = (input, config) => this.restService.request({
|
|
424
|
+
method: 'GET',
|
|
425
|
+
url: '/api/file-explorer/directories',
|
|
426
|
+
params: { containerName: input.containerName },
|
|
427
|
+
}, { apiName: this.apiName, ...config });
|
|
428
|
+
this.move = (id, input, config) => this.restService.request({
|
|
429
|
+
method: 'PUT',
|
|
430
|
+
url: `/api/file-explorer/directories/${id}/move`,
|
|
431
|
+
body: input,
|
|
432
|
+
}, { apiName: this.apiName, ...config });
|
|
433
|
+
this.update = (id, input, config) => this.restService.request({
|
|
434
|
+
method: 'PUT',
|
|
435
|
+
url: `/api/file-explorer/directories/${id}`,
|
|
436
|
+
body: input,
|
|
437
|
+
}, { apiName: this.apiName, ...config });
|
|
438
|
+
}
|
|
439
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileDescriptorService, deps: [{ token: i3.RestService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
440
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileDescriptorService, providedIn: 'root' }); }
|
|
446
441
|
}
|
|
447
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
442
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileDescriptorService, decorators: [{
|
|
448
443
|
type: Injectable,
|
|
449
444
|
args: [{
|
|
450
445
|
providedIn: 'root',
|
|
@@ -458,44 +453,44 @@ var index$d = /*#__PURE__*/Object.freeze({
|
|
|
458
453
|
|
|
459
454
|
var that$1;
|
|
460
455
|
class FileModalTreeComponent {
|
|
461
|
-
_DescriptorService;
|
|
462
|
-
fb;
|
|
463
|
-
toaster;
|
|
464
|
-
_FileApiService;
|
|
465
|
-
_LocalizationService;
|
|
466
456
|
constructor(_DescriptorService, fb, toaster, _FileApiService, _LocalizationService) {
|
|
467
457
|
this._DescriptorService = _DescriptorService;
|
|
468
458
|
this.fb = fb;
|
|
469
459
|
this.toaster = toaster;
|
|
470
460
|
this._FileApiService = _FileApiService;
|
|
471
461
|
this._LocalizationService = _LocalizationService;
|
|
462
|
+
/**文件分组列表 */
|
|
463
|
+
this.fileGroupList = [];
|
|
464
|
+
/**选择的tree节点 */
|
|
465
|
+
this._theSelectedTreeNode = '';
|
|
466
|
+
/**正在编辑的节点 */
|
|
467
|
+
this.theNodeBeingEdited = '';
|
|
468
|
+
/**已展开的节点 */
|
|
469
|
+
this.anExpandedNode = [];
|
|
470
|
+
/**tree节点选择回调 */
|
|
471
|
+
this.nodeClick = new EventEmitter();
|
|
472
|
+
this.handleClick = (event) => event.stopPropagation();
|
|
473
|
+
/**判断节点是否选中 */
|
|
474
|
+
this.isNodeSelected = (el) => el.key === this._theSelectedTreeNode?.key;
|
|
475
|
+
/**分组 */
|
|
476
|
+
/**模态框-状态-是否打开 */
|
|
477
|
+
this.ModalDescriptorOpen = false;
|
|
478
|
+
/**模态框-descriptor-繁忙状态-用于确定模态的繁忙状态是否为真 */
|
|
479
|
+
this.ModalDescriptorBusy = false;
|
|
472
480
|
that$1 = this;
|
|
473
481
|
}
|
|
474
|
-
/**文件分组列表 */
|
|
475
|
-
fileGroupList = [];
|
|
476
|
-
/**选择的tree节点 */
|
|
477
|
-
_theSelectedTreeNode = '';
|
|
478
482
|
set theSelectedTreeNode(v) {
|
|
479
483
|
this._theSelectedTreeNode = v;
|
|
480
484
|
if (v.length > 0) {
|
|
481
485
|
this.loadData();
|
|
482
486
|
}
|
|
483
487
|
}
|
|
484
|
-
/**正在编辑的节点 */
|
|
485
|
-
theNodeBeingEdited = '';
|
|
486
|
-
/**已展开的节点 */
|
|
487
|
-
anExpandedNode = [];
|
|
488
|
-
/**图片容器 */
|
|
489
|
-
_fileContainerName;
|
|
490
|
-
/**tree节点选择回调 */
|
|
491
|
-
nodeClick = new EventEmitter();
|
|
492
488
|
set fileContainerName(v) {
|
|
493
489
|
if (v) {
|
|
494
490
|
this._fileContainerName = v;
|
|
495
491
|
this.loadData();
|
|
496
492
|
}
|
|
497
493
|
}
|
|
498
|
-
handleClick = (event) => event.stopPropagation();
|
|
499
494
|
loadData() {
|
|
500
495
|
if (this._fileContainerName) {
|
|
501
496
|
this.getFileGroupList();
|
|
@@ -546,8 +541,6 @@ class FileModalTreeComponent {
|
|
|
546
541
|
this._theSelectedTreeNode = event.node;
|
|
547
542
|
this.nodeClick.emit(event.node);
|
|
548
543
|
}
|
|
549
|
-
/**判断节点是否选中 */
|
|
550
|
-
isNodeSelected = (el) => el.key === this._theSelectedTreeNode?.key;
|
|
551
544
|
/**点击展开树节点图标触发 */
|
|
552
545
|
nzExpandChange(event) {
|
|
553
546
|
let anExpandedNode = this.anExpandedNode;
|
|
@@ -584,15 +577,6 @@ class FileModalTreeComponent {
|
|
|
584
577
|
this.getFileGroupList();
|
|
585
578
|
});
|
|
586
579
|
}
|
|
587
|
-
/**分组 */
|
|
588
|
-
/**模态框-状态-是否打开 */
|
|
589
|
-
ModalDescriptorOpen = false;
|
|
590
|
-
/**模态框-descriptor-繁忙状态-用于确定模态的繁忙状态是否为真 */
|
|
591
|
-
ModalDescriptorBusy = false;
|
|
592
|
-
/**模态框-descriptor-表单 */
|
|
593
|
-
ModalDescriptorForm;
|
|
594
|
-
/**模态框-descriptor-表单--控件模板-动态赋值表单控件 */
|
|
595
|
-
ModalFormDescriptorSubmit;
|
|
596
580
|
/**模态框-descriptor-状态改变回调 */
|
|
597
581
|
ModalDescriptorVisibleChange(event) {
|
|
598
582
|
if (!event) {
|
|
@@ -616,12 +600,12 @@ class FileModalTreeComponent {
|
|
|
616
600
|
this.getFileGroupList();
|
|
617
601
|
});
|
|
618
602
|
}
|
|
619
|
-
static
|
|
620
|
-
static
|
|
603
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileModalTreeComponent, deps: [{ token: FileDescriptorService }, { token: i1.FormBuilder }, { token: i2$1.ToasterService }, { token: FileApiService }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
604
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FileModalTreeComponent, selector: "fe-file-modal-tree", inputs: { theSelectedTreeNode: "theSelectedTreeNode", fileContainerName: "fileContainerName" }, outputs: { nodeClick: "nodeClick" }, viewQueries: [{ propertyName: "ModalFormDescriptorSubmit", first: true, predicate: ["ModalFormDescriptorSubmit"], descendants: true }], ngImport: i0, template: "<div class=\"card-header p-0 mb-1 d-flex justify-content-between align-items-center\">\n <h6 class=\"h6 mb-0\">{{'FileExplorer::MyDirectories' | abpLocalization}}</h6>\n <button type=\"button\" class=\"btn btn-light btn-sm ms-2\" (click.stop)=\"addDescriptorBtn()\"><i\n class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i></button>\n</div>\n<nz-tree [nzData]=\"fileGroupList\" class=\"ng-zorro-antd-tree\" nzDraggable nzBlockNode nzShowIcon\n [nzExpandedIcon]=\"multiExpandedIconTpl\" (nzOnDrop)=\"nzEvent($event)\" [nzBeforeDrop]=\"beforeDrop\"\n (nzClick)=\"activeNode($event)\" (nzExpandChange)=\"nzExpandChange($event)\" [nzTreeTemplate]=\"nzTreeTemplate\">\n <ng-template #nzTreeTemplate let-node let-origin=\"origin\">\n <div class=\"custom-node d-inline-block ng-star-inserted dropdown\" [title]=\"node.title\">\n <div #dropdown=\"ngbDropdown\" class=\"d-inline-block\" ngbDropdown placement=\"bottom\" container=\"body\">\n <div class=\"btn-group\" [class.selected]=\"isNodeSelected(node)\">\n <button class=\"btn btn-sm p-0 px-1\">{{ node.title }}</button>\n <button class=\"btn btn-sm p-0\" (click)=\"handleClick($event)\" ngbDropdownToggle\n [class.dropdown-toggle]=\"false\" aria-hidden=\"true\">\n <i class=\"fas fa-caret-down text-muted p-1\"></i>\n </button>\n </div>\n <div ngbDropdownMenu>\n <button ngbDropdownItem\n (click.stop)=\"addDescriptorBtn(node)\">{{'FileExplorer::NewDirectory' | abpLocalization}}</button>\n <button ngbDropdownItem\n (click.stop)=\"addDescriptorBtn(node,true)\">{{'AbpUi::Edit' | abpLocalization}}</button>\n <button ngbDropdownItem\n (click.stop)=\"deleteDescriptorBtn(node)\">{{'AbpUi::Delete' | abpLocalization}}</button>\n </div>\n </div>\n </div>\n </ng-template>\n <ng-template #multiExpandedIconTpl let-node let-origin=\"origin\">\n <ng-container *ngIf=\"node.children.length > 0\">\n <i [class]=\"node.isExpanded ? 'fas fa-caret-down' : 'fas fa-caret-right'\"></i>\n </ng-container>\n </ng-template>\n</nz-tree>\n\n\n<abp-modal [(visible)]=\"ModalDescriptorOpen\" [busy]=\"ModalDescriptorBusy\"\n (visibleChange)=\"ModalDescriptorVisibleChange($event)\">\n <ng-template #abpHeader>\n <h3>{{theNodeBeingEdited?('AbpUi::Edit' | abpLocalization):('FileExplorer::NewDirectory' | abpLocalization)}}</h3>\n </ng-template>\n <ng-template #abpBody>\n <ng-template #loaderRef>\n <div class=\"text-center\"><i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i></div>\n </ng-template>\n <ng-container *ngIf=\"ModalDescriptorForm; else loaderRef\">\n <form class=\"sites-modal-form\" #myForm=\"ngForm\" [formGroup]=\"ModalDescriptorForm\"\n (keydown.enter)=\"$event.preventDefault()\" (submit)=\"createOrEditSave()\">\n <button type=\"submit\" #ModalFormDescriptorSubmit style=\"display: none\"></button>\n <div class=\"mb-3\">\n <label class=\"form-label\">{{'FileExplorer::DirectoryName' | abpLocalization}}</label>\n <input type=\"email\" class=\"form-control\" formControlName=\"name\">\n </div>\n </form>\n </ng-container>\n </ng-template>\n <ng-template #abpFooter>\n <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n <abp-button iconClass=\"fa fa-check\"\n (click)=\"ModalFormDescriptorSubmit.nativeElement.click()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n </ng-template>\n</abp-modal>", styles: [""], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "directive", type: i3$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3$1.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i2$1.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i2$1.ModalCloseDirective, selector: "[abpClose]" }, { kind: "directive", type: i8.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i8.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i8.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i8.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i8.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "component", type: i9.NzTreeComponent, selector: "nz-tree", inputs: ["nzShowIcon", "nzHideUnMatched", "nzBlockNode", "nzExpandAll", "nzSelectMode", "nzCheckStrictly", "nzShowExpand", "nzShowLine", "nzCheckable", "nzAsyncData", "nzDraggable", "nzMultiple", "nzExpandedIcon", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualHeight", "nzTreeTemplate", "nzBeforeDrop", "nzData", "nzExpandedKeys", "nzSelectedKeys", "nzCheckedKeys", "nzSearchValue", "nzSearchFunc"], outputs: ["nzExpandedKeysChange", "nzSelectedKeysChange", "nzCheckedKeysChange", "nzSearchValueChange", "nzClick", "nzDblClick", "nzContextMenu", "nzCheckBoxChange", "nzExpandChange", "nzOnDragStart", "nzOnDragEnter", "nzOnDragOver", "nzOnDragLeave", "nzOnDrop", "nzOnDragEnd"], exportAs: ["nzTree"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
|
|
621
605
|
}
|
|
622
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
606
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileModalTreeComponent, decorators: [{
|
|
623
607
|
type: Component,
|
|
624
|
-
args: [{ selector: 'fe-file-modal-tree', template: "<div class=\"card-header p-0 mb-1 d-flex justify-content-between align-items-center\">\n <h6 class=\"h6 mb-0\">{{'FileExplorer::MyDirectories' | abpLocalization}}</h6>\n <button type=\"button\" class=\"btn btn-light btn-sm ms-2\" (click.stop)=\"addDescriptorBtn()\"><i\n class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i></button>\n</div>\n<nz-tree [nzData]=\"fileGroupList\" class=\"ng-zorro-antd-tree\" nzDraggable nzBlockNode nzShowIcon\n [nzExpandedIcon]=\"multiExpandedIconTpl\" (nzOnDrop)=\"nzEvent($event)\" [nzBeforeDrop]=\"beforeDrop\"\n (nzClick)=\"activeNode($event)\" (nzExpandChange)=\"nzExpandChange($event)\" [nzTreeTemplate]=\"nzTreeTemplate\">\n <ng-template #nzTreeTemplate let-node let-origin=\"origin\">\n <div class=\"custom-node d-inline-block ng-star-inserted dropdown\" [title]=\"node.title\">\n <div #dropdown=\"ngbDropdown\" class=\"d-inline-block\" ngbDropdown placement=\"bottom\" container=\"body\">\n <div class=\"btn-group\" [class.selected]=\"isNodeSelected(node)\">\n <button class=\"btn btn-sm p-0 px-1\">{{ node.title }}</button>\n <button class=\"btn btn-sm p-0\" (click)=\"handleClick($event)\" ngbDropdownToggle\n [class.dropdown-toggle]=\"false\" aria-hidden=\"true\">\n <i class=\"fas fa-caret-down text-muted p-1\"></i>\n </button>\n </div>\n <div ngbDropdownMenu>\n <button ngbDropdownItem\n (click.stop)=\"addDescriptorBtn(node)\">{{'FileExplorer::NewDirectory' | abpLocalization}}</button>\n <button ngbDropdownItem\n (click.stop)=\"addDescriptorBtn(node,true)\">{{'AbpUi::Edit' | abpLocalization}}</button>\n <button ngbDropdownItem\n (click.stop)=\"deleteDescriptorBtn(node)\">{{'AbpUi::Delete' | abpLocalization}}</button>\n </div>\n </div>\n </div>\n </ng-template>\n <ng-template #multiExpandedIconTpl let-node let-origin=\"origin\">\n <ng-container *ngIf=\"node.children.length > 0\">\n <i [class]=\"node.isExpanded ? 'fas fa-caret-down' : 'fas fa-caret-right'\"></i>\n </ng-container>\n </ng-template>\n</nz-tree>\n\n\n<abp-modal [(visible)]=\"ModalDescriptorOpen\" [busy]=\"ModalDescriptorBusy\"\n (visibleChange)=\"ModalDescriptorVisibleChange($event)\">\n <ng-template #abpHeader>\n <h3>{{theNodeBeingEdited?('AbpUi::Edit' | abpLocalization):('FileExplorer::NewDirectory' | abpLocalization)}}</h3>\n </ng-template>\n <ng-template #abpBody>\n <ng-template #loaderRef>\n <div class=\"text-center\"><i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i></div>\n </ng-template>\n <ng-container *ngIf=\"ModalDescriptorForm; else loaderRef\">\n <form class=\"sites-modal-form\" #myForm=\"ngForm\" [formGroup]=\"ModalDescriptorForm\"\n (
|
|
608
|
+
args: [{ selector: 'fe-file-modal-tree', template: "<div class=\"card-header p-0 mb-1 d-flex justify-content-between align-items-center\">\n <h6 class=\"h6 mb-0\">{{'FileExplorer::MyDirectories' | abpLocalization}}</h6>\n <button type=\"button\" class=\"btn btn-light btn-sm ms-2\" (click.stop)=\"addDescriptorBtn()\"><i\n class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i></button>\n</div>\n<nz-tree [nzData]=\"fileGroupList\" class=\"ng-zorro-antd-tree\" nzDraggable nzBlockNode nzShowIcon\n [nzExpandedIcon]=\"multiExpandedIconTpl\" (nzOnDrop)=\"nzEvent($event)\" [nzBeforeDrop]=\"beforeDrop\"\n (nzClick)=\"activeNode($event)\" (nzExpandChange)=\"nzExpandChange($event)\" [nzTreeTemplate]=\"nzTreeTemplate\">\n <ng-template #nzTreeTemplate let-node let-origin=\"origin\">\n <div class=\"custom-node d-inline-block ng-star-inserted dropdown\" [title]=\"node.title\">\n <div #dropdown=\"ngbDropdown\" class=\"d-inline-block\" ngbDropdown placement=\"bottom\" container=\"body\">\n <div class=\"btn-group\" [class.selected]=\"isNodeSelected(node)\">\n <button class=\"btn btn-sm p-0 px-1\">{{ node.title }}</button>\n <button class=\"btn btn-sm p-0\" (click)=\"handleClick($event)\" ngbDropdownToggle\n [class.dropdown-toggle]=\"false\" aria-hidden=\"true\">\n <i class=\"fas fa-caret-down text-muted p-1\"></i>\n </button>\n </div>\n <div ngbDropdownMenu>\n <button ngbDropdownItem\n (click.stop)=\"addDescriptorBtn(node)\">{{'FileExplorer::NewDirectory' | abpLocalization}}</button>\n <button ngbDropdownItem\n (click.stop)=\"addDescriptorBtn(node,true)\">{{'AbpUi::Edit' | abpLocalization}}</button>\n <button ngbDropdownItem\n (click.stop)=\"deleteDescriptorBtn(node)\">{{'AbpUi::Delete' | abpLocalization}}</button>\n </div>\n </div>\n </div>\n </ng-template>\n <ng-template #multiExpandedIconTpl let-node let-origin=\"origin\">\n <ng-container *ngIf=\"node.children.length > 0\">\n <i [class]=\"node.isExpanded ? 'fas fa-caret-down' : 'fas fa-caret-right'\"></i>\n </ng-container>\n </ng-template>\n</nz-tree>\n\n\n<abp-modal [(visible)]=\"ModalDescriptorOpen\" [busy]=\"ModalDescriptorBusy\"\n (visibleChange)=\"ModalDescriptorVisibleChange($event)\">\n <ng-template #abpHeader>\n <h3>{{theNodeBeingEdited?('AbpUi::Edit' | abpLocalization):('FileExplorer::NewDirectory' | abpLocalization)}}</h3>\n </ng-template>\n <ng-template #abpBody>\n <ng-template #loaderRef>\n <div class=\"text-center\"><i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i></div>\n </ng-template>\n <ng-container *ngIf=\"ModalDescriptorForm; else loaderRef\">\n <form class=\"sites-modal-form\" #myForm=\"ngForm\" [formGroup]=\"ModalDescriptorForm\"\n (keydown.enter)=\"$event.preventDefault()\" (submit)=\"createOrEditSave()\">\n <button type=\"submit\" #ModalFormDescriptorSubmit style=\"display: none\"></button>\n <div class=\"mb-3\">\n <label class=\"form-label\">{{'FileExplorer::DirectoryName' | abpLocalization}}</label>\n <input type=\"email\" class=\"form-control\" formControlName=\"name\">\n </div>\n </form>\n </ng-container>\n </ng-template>\n <ng-template #abpFooter>\n <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n <abp-button iconClass=\"fa fa-check\"\n (click)=\"ModalFormDescriptorSubmit.nativeElement.click()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n </ng-template>\n</abp-modal>" }]
|
|
625
609
|
}], ctorParameters: () => [{ type: FileDescriptorService }, { type: i1.FormBuilder }, { type: i2$1.ToasterService }, { type: FileApiService }, { type: i3.LocalizationService }], propDecorators: { theSelectedTreeNode: [{
|
|
626
610
|
type: Input
|
|
627
611
|
}], nodeClick: [{
|
|
@@ -635,13 +619,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
|
|
|
635
619
|
|
|
636
620
|
var that;
|
|
637
621
|
class FileModalComponent {
|
|
638
|
-
_FileService;
|
|
639
|
-
toaster;
|
|
640
|
-
list;
|
|
641
|
-
_FileApiService;
|
|
642
|
-
restService;
|
|
643
|
-
confirmation;
|
|
644
|
-
_LocalizationService;
|
|
645
622
|
constructor(_FileService, toaster, list, _FileApiService, restService, confirmation, _LocalizationService) {
|
|
646
623
|
this._FileService = _FileService;
|
|
647
624
|
this.toaster = toaster;
|
|
@@ -650,35 +627,75 @@ class FileModalComponent {
|
|
|
650
627
|
this.restService = restService;
|
|
651
628
|
this.confirmation = confirmation;
|
|
652
629
|
this._LocalizationService = _LocalizationService;
|
|
630
|
+
this._FileDescriptorService = inject(FileDescriptorService$1);
|
|
631
|
+
/**目录的权限名称 */
|
|
632
|
+
this.createDirectoryPermissionName = null;
|
|
633
|
+
/**是否多选 */
|
|
634
|
+
this._multiple = false;
|
|
635
|
+
/**文件大小限制
|
|
636
|
+
* @param 1mb
|
|
637
|
+
*/
|
|
638
|
+
this.sizeLimit = 1048576;
|
|
639
|
+
/**模态框状态回调 */
|
|
640
|
+
this.visibleChange = new EventEmitter();
|
|
641
|
+
/**模态框-状态-是否打开 */
|
|
642
|
+
this.ModalOpen = false;
|
|
643
|
+
/**模态框-繁忙状态-用于确定模态的繁忙状态是否为真 */
|
|
644
|
+
this.ModalBusy = false;
|
|
645
|
+
/**dignite-file-modal-tree */
|
|
646
|
+
/**选择的tree节点 */
|
|
647
|
+
this._theSelectedTreeNode = '';
|
|
648
|
+
/**图片上传-要上传图片的状态文件列表 */
|
|
649
|
+
this.uploadPictureStatusList = [];
|
|
650
|
+
/**文件表格-数据*/
|
|
651
|
+
this.data = {
|
|
652
|
+
items: [],
|
|
653
|
+
totalCount: 0,
|
|
654
|
+
};
|
|
655
|
+
/**文件表格-条件*/
|
|
656
|
+
this.filters = {};
|
|
657
|
+
/**文件表格-表格自带选择类型 */
|
|
658
|
+
this.SelectionType = SelectionType;
|
|
659
|
+
/**文件表格-选择的表格数据项 */
|
|
660
|
+
this.selectedTable = [];
|
|
661
|
+
/**当前选择的table项 id */
|
|
662
|
+
this.nowSelectId = '';
|
|
663
|
+
/**选择文件回调 */
|
|
664
|
+
this.selectFilefn = new EventEmitter();
|
|
665
|
+
/**一个布尔or函数,可用于检查是否要根据条件选择特定行。 */
|
|
666
|
+
this.selectCheck = (row, column, value) => {
|
|
667
|
+
this.nowSelectId = row.id;
|
|
668
|
+
return true;
|
|
669
|
+
};
|
|
670
|
+
/**判断row是否选中 */
|
|
671
|
+
this.selectedcheckbox = (id) => {
|
|
672
|
+
return this.selectedTable.some(el => el.id == id);
|
|
673
|
+
};
|
|
674
|
+
/**创建图片的接口,代理中的file类型不匹配,切换为any类型 */
|
|
675
|
+
this.createFile = (input, config) => this.restService.request({
|
|
676
|
+
method: 'POST',
|
|
677
|
+
url: '/api/file-explorer/files',
|
|
678
|
+
params: { containerName: input.containerName, cellName: input.cellName, directoryId: input.directoryId, entityId: input.entityId },
|
|
679
|
+
body: input.file,
|
|
680
|
+
}, { apiName: 'FileExplorer', ...config });
|
|
653
681
|
that = this;
|
|
654
682
|
}
|
|
655
|
-
_FileDescriptorService = inject(FileDescriptorService$1);
|
|
656
683
|
/**获取目录配置 */
|
|
657
684
|
getFilesConfiguration() {
|
|
658
685
|
this._FileDescriptorService.getFileContainerConfiguration(this._fileContainerName).subscribe(res => {
|
|
659
686
|
this.createDirectoryPermissionName = res.createDirectoryPermissionName;
|
|
660
687
|
});
|
|
661
688
|
}
|
|
662
|
-
/**目录的权限名称 */
|
|
663
|
-
createDirectoryPermissionName = null;
|
|
664
|
-
/**图片容器 */
|
|
665
|
-
_fileContainerName;
|
|
666
689
|
set fileContainerName(v) {
|
|
667
690
|
if (v) {
|
|
668
691
|
this._fileContainerName = v;
|
|
669
692
|
this.loadData();
|
|
670
693
|
}
|
|
671
694
|
}
|
|
672
|
-
/**是否多选 */
|
|
673
|
-
_multiple = false;
|
|
674
695
|
set multiple(v) {
|
|
675
696
|
this._multiple = v;
|
|
676
697
|
if (v) { }
|
|
677
698
|
}
|
|
678
|
-
/**文件大小限制
|
|
679
|
-
* @param 1mb
|
|
680
|
-
*/
|
|
681
|
-
sizeLimit = 1048576;
|
|
682
699
|
set limit(v) {
|
|
683
700
|
this.sizeLimit = v;
|
|
684
701
|
}
|
|
@@ -689,12 +706,6 @@ class FileModalComponent {
|
|
|
689
706
|
this.loadData();
|
|
690
707
|
}
|
|
691
708
|
}
|
|
692
|
-
/**模态框状态回调 */
|
|
693
|
-
visibleChange = new EventEmitter();
|
|
694
|
-
/**模态框-状态-是否打开 */
|
|
695
|
-
ModalOpen = false;
|
|
696
|
-
/**模态框-繁忙状态-用于确定模态的繁忙状态是否为真 */
|
|
697
|
-
ModalBusy = false;
|
|
698
709
|
/**模态框-状态改变回调 */
|
|
699
710
|
ModalVisibleChange(event) {
|
|
700
711
|
if (!event) {
|
|
@@ -708,9 +719,6 @@ class FileModalComponent {
|
|
|
708
719
|
this.selectFilefn.emit(selectedTablearr);
|
|
709
720
|
this.ModalVisibleChange(false);
|
|
710
721
|
}
|
|
711
|
-
/**dignite-file-modal-tree */
|
|
712
|
-
/**选择的tree节点 */
|
|
713
|
-
_theSelectedTreeNode = '';
|
|
714
722
|
/**初始化数据 */
|
|
715
723
|
loadData() {
|
|
716
724
|
if (this.ModalOpen && this._fileContainerName) {
|
|
@@ -723,8 +731,6 @@ class FileModalComponent {
|
|
|
723
731
|
this._theSelectedTreeNode = event;
|
|
724
732
|
this.list.get();
|
|
725
733
|
}
|
|
726
|
-
/**图片上传-要上传图片的状态文件列表 */
|
|
727
|
-
uploadPictureStatusList = [];
|
|
728
734
|
/**图片上传-获取文件信息改变 */
|
|
729
735
|
async getFileChange(event) {
|
|
730
736
|
let files = new Array(...event.target.files);
|
|
@@ -774,28 +780,11 @@ class FileModalComponent {
|
|
|
774
780
|
});
|
|
775
781
|
});
|
|
776
782
|
}
|
|
777
|
-
/**文件表格-数据*/
|
|
778
|
-
data = {
|
|
779
|
-
items: [],
|
|
780
|
-
totalCount: 0,
|
|
781
|
-
};
|
|
782
|
-
/**文件表格-条件*/
|
|
783
|
-
filters = {};
|
|
784
|
-
/**文件表格-表格自带选择类型 */
|
|
785
|
-
SelectionType = SelectionType;
|
|
786
|
-
/**文件表格-选择的表格数据项 */
|
|
787
|
-
selectedTable = [];
|
|
788
|
-
/**已选定的文件 */
|
|
789
|
-
selectPickerFile;
|
|
790
783
|
ngOnChanges(changes) {
|
|
791
784
|
//Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
|
|
792
785
|
//Add '${implements OnChanges}' to the class.
|
|
793
786
|
this.selectedTable = this._FileApiService.deepClone(this.selectPickerFile);
|
|
794
787
|
}
|
|
795
|
-
/**当前选择的table项 id */
|
|
796
|
-
nowSelectId = '';
|
|
797
|
-
/**选择文件回调 */
|
|
798
|
-
selectFilefn = new EventEmitter();
|
|
799
788
|
/**文件表格-获取表格数据 */
|
|
800
789
|
hookToQuery() {
|
|
801
790
|
const getData = (query) => this._FileService.getList({
|
|
@@ -832,15 +821,6 @@ class FileModalComponent {
|
|
|
832
821
|
return false;
|
|
833
822
|
});
|
|
834
823
|
}
|
|
835
|
-
/**一个布尔or函数,可用于检查是否要根据条件选择特定行。 */
|
|
836
|
-
selectCheck = (row, column, value) => {
|
|
837
|
-
this.nowSelectId = row.id;
|
|
838
|
-
return true;
|
|
839
|
-
};
|
|
840
|
-
/**判断row是否选中 */
|
|
841
|
-
selectedcheckbox = (id) => {
|
|
842
|
-
return this.selectedTable.some(el => el.id == id);
|
|
843
|
-
};
|
|
844
824
|
/**删除图片 */
|
|
845
825
|
deleteFile(file) {
|
|
846
826
|
this.confirmation
|
|
@@ -858,24 +838,17 @@ class FileModalComponent {
|
|
|
858
838
|
closeFileStatusModal() {
|
|
859
839
|
this.uploadPictureStatusList = [];
|
|
860
840
|
}
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
method: 'POST',
|
|
864
|
-
url: '/api/file-explorer/files',
|
|
865
|
-
params: { containerName: input.containerName, cellName: input.cellName, directoryId: input.directoryId, entityId: input.entityId },
|
|
866
|
-
body: input.file,
|
|
867
|
-
}, { apiName: 'FileExplorer', ...config });
|
|
868
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FileModalComponent, deps: [{ token: FileDescriptorService$1 }, { token: i2$1.ToasterService }, { token: i3.ListService }, { token: FileApiService }, { token: i3.RestService }, { token: i2$1.ConfirmationService }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
869
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FileModalComponent, selector: "fe-file-modal", inputs: { fileContainerName: "fileContainerName", multiple: "multiple", limit: "limit", visible: "visible", selectPickerFile: "selectPickerFile" }, outputs: { visibleChange: "visibleChange", selectFilefn: "selectFilefn" }, providers: [
|
|
841
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileModalComponent, deps: [{ token: FileDescriptorService$1 }, { token: i2$1.ToasterService }, { token: i3.ListService }, { token: FileApiService }, { token: i3.RestService }, { token: i2$1.ConfirmationService }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
842
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FileModalComponent, selector: "fe-file-modal", inputs: { fileContainerName: "fileContainerName", multiple: "multiple", limit: "limit", visible: "visible", selectPickerFile: "selectPickerFile" }, outputs: { visibleChange: "visibleChange", selectFilefn: "selectFilefn" }, providers: [
|
|
870
843
|
// [Required]
|
|
871
844
|
ListService,
|
|
872
845
|
// [Optional]
|
|
873
846
|
// Provide this token if you want a different debounce time.
|
|
874
847
|
// Default is 300. Cannot be 0. Any value below 100 is not recommended.
|
|
875
848
|
{ provide: LIST_QUERY_DEBOUNCE_TIME, useValue: 500 },
|
|
876
|
-
], usesOnChanges: true, ngImport: i0, template: "<abp-modal [(visible)]=\"ModalOpen\" (visibleChange)=\"ModalVisibleChange($event)\"\n [options]=\"{ size: 'xl', scrollable: false }\">\n <ng-template #abpHeader>\n <h3>{{'FileExplorer::FileExplorer' | abpLocalization}}</h3>\n </ng-template>\n <ng-template #abpBody>\n <div class=\"row file-explorer-modal-body file-modal\">\n <div class=\"col-3\" *ngIf=\"createDirectoryPermissionName\" style=\"overflow: auto; height: calc(100vh - 240px)\">\n <fe-file-modal-tree [theSelectedTreeNode]=\"_theSelectedTreeNode\" (nodeClick)=\"_nodeClick($event)\"\n [fileContainerName]=\"_fileContainerName\"></fe-file-modal-tree>\n </div>\n <div [class]=\"createDirectoryPermissionName?'col-9':'col-12'\" style=\"height: calc(100vh - 240px)\">\n <div class=\"mb-2 d-flex justify-content-between align-items-center\">\n <div class=\"btn-link\" role=button style=\"flex: 2\" (click)=\"lookAllFile()\">{{'FileExplorer::AllFiles' | abpLocalization}}</div>\n <div class=\"input-group form-file\" style=\"flex: 2\">\n <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" \n (change)=\"getFileChange($event)\" />\n <!-- accept=\".jpg,.jpeg,.png,.gif,.webp\" -->\n </div>\n </div>\n <div>\n <ngx-datatable class=\"material container-height\" [rows]=\"data.items\" [list]=\"list\" columnMode=\"flex\"\n [columns]=\"columns\" [headerHeight]=\"50\" [footerHeight]=\"50\" rowHeight=\"auto\" [scrollbarV]=\"true\"\n [virtualization]=\"false\" [externalPaging]=\"true\" [count]=\"data.totalCount\" [selected]=\"selectedTable\"\n [selectCheck]=\"selectCheck\" [selectionType]=\"_multiple?SelectionType.multiClick:SelectionType.single\" (select)=\"onSelectTableItem($event)\">\n <ngx-datatable-column [width]=\"50\" prop=\"id\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\"\n [resizeable]=\"false\">\n <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\n let-selectFn=\"selectFn\">\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"allRowsSelected\"\n (change)=\"selectFn(!allRowsSelected)\" />\n </ng-template>\n <ng-template ngx-datatable-cell-template let-row=\"row\" let-value=\"value\" let-isSelected=\"isSelected\"\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"selectedcheckbox(value)\"\n (change)=\"onCheckboxChangeFn($event)\" />\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [flexGrow]=\"2\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n <fe-file-preview [width]=\"'80px'\" [src]=\"row.url\" [name]=\"row.name\" [type]=\"row.mimeType\" [preview]=\"true\"></fe-file-preview>\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::FileName' | abpLocalization\" prop=\"name\" [flexGrow]=\"4\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ value }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::FileSize' | abpLocalization\" prop=\"size\" [flexGrow]=\"1.5\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ _FileApiService.formatFileSize(value) }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::Directory' | abpLocalization\" prop=\"cellName\" [flexGrow]=\"1\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ value }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::CreationTime' | abpLocalization\" prop=\"creationTime\" [flexGrow]=\"2\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ value | date : 'YYYY/MM/dd HH:mm:s' }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [flexGrow]=\"1\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n <button class=\"btn btn-sm btn-light p-0\" (click.stop)=\"deleteFile(row)\">\n <i class=\"fas fa-trash text-primary p-2\"></i>\n </button>\n </ng-template>\n </ngx-datatable-column>\n </ngx-datatable>\n </div>\n <div *ngIf=\"uploadPictureStatusList.length > 0\"\n class=\"position-fixed bottom-0 end-0 shadow-lg file-status-modal m-5\"\n style=\"border-radius: 10px\">\n <div class=\"card p-1\">\n <div class=\"card-header d-flex align-items-center justify-content-between p-0 py-1 border-bottom\">\n <div>{{'FileExplorer::UploadFiles' | abpLocalization}}</div>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click.stop)=\"closeFileStatusModal()\"></button>\n </div>\n <div class=\"card-body\">\n <table class=\"table\">\n <thead>\n <tr>\n <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n <th scope=\"col\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let item of uploadPictureStatusList; let i = index\">\n <tr>\n <th scope=\"row\">\n <div>{{ item.name }}</div>\n <div class=\"form-text text-danger\" *ngIf=\"item.size > sizeLimit\">\n {{'FileExplorer::ExceedsMaximumSize' | abpLocalization:_FileApiService.formatFileSize(sizeLimit)}}\n </div>\n </th>\n <td>{{ item.fileSize }}</td>\n <td>\n <i *ngIf=\"item.status === 1\" class=\"fas fa-check text-primary\"></i>\n <i *ngIf=\"item.status === 2\" class=\"fas fa-times-circle text-danger\"></i>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n <ng-template #abpFooter>\n <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n <abp-button iconClass=\"fa fa-check\" (click)=\"modalSave()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n </ng-template>\n</abp-modal>", styles: ["::ng-deep .file-modal .container-height{height:calc(100vh - 284px)}::ng-deep .file-modal .file-status-modal{background:#fff}::ng-deep .file-modal .file-status-modal .card-body{max-height:300px;overflow-y:auto}::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group{background-color:transparent!important}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper{padding:0}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .custom-node{width:100%}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .selected{background-color:var(--lpx-brand)!important}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .selected .btn{color:var(--lpx-navbar-color)}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:transparent}::ng-deep .file-modal .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell,::ng-deep .file-modal .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell{overflow:initial;line-break:anywhere}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "component", type: i6.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i6.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { kind: "directive", type: i6.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i6.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: i2$1.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i2$1.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i2$1.NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "directive", type: i2$1.ModalCloseDirective, selector: "[abpClose]" }, { kind: "component", type: FileModalTreeComponent, selector: "fe-file-modal-tree", inputs: ["theSelectedTreeNode", "fileContainerName"], outputs: ["nodeClick"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] });
|
|
849
|
+
], usesOnChanges: true, ngImport: i0, template: "<abp-modal [(visible)]=\"ModalOpen\" (visibleChange)=\"ModalVisibleChange($event)\"\n [options]=\"{ size: 'xl', scrollable: false }\">\n <ng-template #abpHeader>\n <h3>{{'FileExplorer::FileExplorer' | abpLocalization}}</h3>\n </ng-template>\n <ng-template #abpBody>\n <div class=\"row file-explorer-modal-body file-modal\">\n <div class=\"col-3\" *ngIf=\"createDirectoryPermissionName\" style=\"overflow: auto; height: calc(100vh - 240px)\">\n <fe-file-modal-tree [theSelectedTreeNode]=\"_theSelectedTreeNode\" (nodeClick)=\"_nodeClick($event)\"\n [fileContainerName]=\"_fileContainerName\"></fe-file-modal-tree>\n </div>\n <div [class]=\"createDirectoryPermissionName?'col-9':'col-12'\" style=\"height: calc(100vh - 240px)\">\n <div class=\"mb-2 d-flex justify-content-between align-items-center\">\n <div class=\"btn-link\" role=button style=\"flex: 2\" (click)=\"lookAllFile()\">{{'FileExplorer::AllFiles' | abpLocalization}}</div>\n <div class=\"input-group form-file\" style=\"flex: 2\">\n <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" \n (change)=\"getFileChange($event)\" />\n </div>\n </div>\n <div>\n <ngx-datatable class=\"material container-height\" [rows]=\"data.items\" [list]=\"list\" columnMode=\"flex\"\n [columns]=\"columns\" [headerHeight]=\"50\" [footerHeight]=\"50\" rowHeight=\"auto\" [scrollbarV]=\"true\"\n [virtualization]=\"false\" [externalPaging]=\"true\" [count]=\"data.totalCount\" [selected]=\"selectedTable\"\n [selectCheck]=\"selectCheck\" [selectionType]=\"_multiple?SelectionType.multiClick:SelectionType.single\" (select)=\"onSelectTableItem($event)\">\n <ngx-datatable-column [width]=\"50\" prop=\"id\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\"\n [resizeable]=\"false\">\n <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\n let-selectFn=\"selectFn\">\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"allRowsSelected\"\n (change)=\"selectFn(!allRowsSelected)\" />\n </ng-template>\n <ng-template ngx-datatable-cell-template let-row=\"row\" let-value=\"value\" let-isSelected=\"isSelected\"\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"selectedcheckbox(value)\"\n (change)=\"onCheckboxChangeFn($event)\" />\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [flexGrow]=\"2\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n <fe-file-preview [width]=\"'80px'\" [src]=\"row.url\" [name]=\"row.name\" [type]=\"row.mimeType\" [preview]=\"true\"></fe-file-preview>\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::FileName' | abpLocalization\" prop=\"name\" [flexGrow]=\"4\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ value }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::FileSize' | abpLocalization\" prop=\"size\" [flexGrow]=\"1.5\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ _FileApiService.formatFileSize(value) }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::Directory' | abpLocalization\" prop=\"cellName\" [flexGrow]=\"1\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ value }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::CreationTime' | abpLocalization\" prop=\"creationTime\" [flexGrow]=\"2\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ value | date : 'YYYY/MM/dd HH:mm:s' }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [flexGrow]=\"1\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n <button class=\"btn btn-sm btn-light p-0\" (click.stop)=\"deleteFile(row)\">\n <i class=\"fas fa-trash text-primary p-2\"></i>\n </button>\n </ng-template>\n </ngx-datatable-column>\n </ngx-datatable>\n </div>\n <div *ngIf=\"uploadPictureStatusList.length > 0\"\n class=\"position-fixed bottom-0 end-0 shadow-lg file-status-modal m-5\"\n style=\"border-radius: 10px\">\n <div class=\"card p-1\">\n <div class=\"card-header d-flex align-items-center justify-content-between p-0 py-1 border-bottom\">\n <div>{{'FileExplorer::UploadFiles' | abpLocalization}}</div>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click.stop)=\"closeFileStatusModal()\"></button>\n </div>\n <div class=\"card-body\">\n <table class=\"table\">\n <thead>\n <tr>\n <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n <th scope=\"col\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let item of uploadPictureStatusList; let i = index\">\n <tr>\n <th scope=\"row\">\n <div>{{ item.name }}</div>\n <div class=\"form-text text-danger\" *ngIf=\"item.size > sizeLimit\">\n {{'FileExplorer::ExceedsMaximumSize' | abpLocalization:_FileApiService.formatFileSize(sizeLimit)}}\n </div>\n </th>\n <td>{{ item.fileSize }}</td>\n <td>\n <i *ngIf=\"item.status === 1\" class=\"fas fa-check text-primary\"></i>\n <i *ngIf=\"item.status === 2\" class=\"fas fa-times-circle text-danger\"></i>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n <ng-template #abpFooter>\n <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n <abp-button iconClass=\"fa fa-check\" (click)=\"modalSave()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n </ng-template>\n</abp-modal>", styles: ["::ng-deep .file-modal .container-height{height:calc(100vh - 284px)}::ng-deep .file-modal .file-status-modal{background:#fff}::ng-deep .file-modal .file-status-modal .card-body{max-height:300px;overflow-y:auto}::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group{background-color:transparent!important}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper{padding:0}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .custom-node{width:100%}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .selected{background-color:var(--lpx-brand)!important}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .selected .btn{color:var(--lpx-navbar-color)}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:transparent}::ng-deep .file-modal .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell,::ng-deep .file-modal .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell{overflow:initial;line-break:anywhere}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "component", type: i6.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i6.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { kind: "directive", type: i6.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i6.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i2$1.NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i2$1.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i2$1.ModalCloseDirective, selector: "[abpClose]" }, { kind: "component", type: FileModalTreeComponent, selector: "fe-file-modal-tree", inputs: ["theSelectedTreeNode", "fileContainerName"], outputs: ["nodeClick"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
|
|
877
850
|
}
|
|
878
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
851
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileModalComponent, decorators: [{
|
|
879
852
|
type: Component,
|
|
880
853
|
args: [{ selector: 'fe-file-modal', providers: [
|
|
881
854
|
// [Required]
|
|
@@ -884,7 +857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
|
|
|
884
857
|
// Provide this token if you want a different debounce time.
|
|
885
858
|
// Default is 300. Cannot be 0. Any value below 100 is not recommended.
|
|
886
859
|
{ provide: LIST_QUERY_DEBOUNCE_TIME, useValue: 500 },
|
|
887
|
-
], template: "<abp-modal [(visible)]=\"ModalOpen\" (visibleChange)=\"ModalVisibleChange($event)\"\n [options]=\"{ size: 'xl', scrollable: false }\">\n <ng-template #abpHeader>\n <h3>{{'FileExplorer::FileExplorer' | abpLocalization}}</h3>\n </ng-template>\n <ng-template #abpBody>\n <div class=\"row file-explorer-modal-body file-modal\">\n <div class=\"col-3\" *ngIf=\"createDirectoryPermissionName\" style=\"overflow: auto; height: calc(100vh - 240px)\">\n <fe-file-modal-tree [theSelectedTreeNode]=\"_theSelectedTreeNode\" (nodeClick)=\"_nodeClick($event)\"\n [fileContainerName]=\"_fileContainerName\"></fe-file-modal-tree>\n </div>\n <div [class]=\"createDirectoryPermissionName?'col-9':'col-12'\" style=\"height: calc(100vh - 240px)\">\n <div class=\"mb-2 d-flex justify-content-between align-items-center\">\n <div class=\"btn-link\" role=button style=\"flex: 2\" (click)=\"lookAllFile()\">{{'FileExplorer::AllFiles' | abpLocalization}}</div>\n <div class=\"input-group form-file\" style=\"flex: 2\">\n <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" \n (change)=\"getFileChange($event)\" />\n
|
|
860
|
+
], template: "<abp-modal [(visible)]=\"ModalOpen\" (visibleChange)=\"ModalVisibleChange($event)\"\n [options]=\"{ size: 'xl', scrollable: false }\">\n <ng-template #abpHeader>\n <h3>{{'FileExplorer::FileExplorer' | abpLocalization}}</h3>\n </ng-template>\n <ng-template #abpBody>\n <div class=\"row file-explorer-modal-body file-modal\">\n <div class=\"col-3\" *ngIf=\"createDirectoryPermissionName\" style=\"overflow: auto; height: calc(100vh - 240px)\">\n <fe-file-modal-tree [theSelectedTreeNode]=\"_theSelectedTreeNode\" (nodeClick)=\"_nodeClick($event)\"\n [fileContainerName]=\"_fileContainerName\"></fe-file-modal-tree>\n </div>\n <div [class]=\"createDirectoryPermissionName?'col-9':'col-12'\" style=\"height: calc(100vh - 240px)\">\n <div class=\"mb-2 d-flex justify-content-between align-items-center\">\n <div class=\"btn-link\" role=button style=\"flex: 2\" (click)=\"lookAllFile()\">{{'FileExplorer::AllFiles' | abpLocalization}}</div>\n <div class=\"input-group form-file\" style=\"flex: 2\">\n <input type=\"file\" class=\"form-control\" #fileEdit [multiple]=\"_multiple\" \n (change)=\"getFileChange($event)\" />\n </div>\n </div>\n <div>\n <ngx-datatable class=\"material container-height\" [rows]=\"data.items\" [list]=\"list\" columnMode=\"flex\"\n [columns]=\"columns\" [headerHeight]=\"50\" [footerHeight]=\"50\" rowHeight=\"auto\" [scrollbarV]=\"true\"\n [virtualization]=\"false\" [externalPaging]=\"true\" [count]=\"data.totalCount\" [selected]=\"selectedTable\"\n [selectCheck]=\"selectCheck\" [selectionType]=\"_multiple?SelectionType.multiClick:SelectionType.single\" (select)=\"onSelectTableItem($event)\">\n <ngx-datatable-column [width]=\"50\" prop=\"id\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\"\n [resizeable]=\"false\">\n <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\n let-selectFn=\"selectFn\">\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"allRowsSelected\"\n (change)=\"selectFn(!allRowsSelected)\" />\n </ng-template>\n <ng-template ngx-datatable-cell-template let-row=\"row\" let-value=\"value\" let-isSelected=\"isSelected\"\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"selectedcheckbox(value)\"\n (change)=\"onCheckboxChangeFn($event)\" />\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [flexGrow]=\"2\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n <fe-file-preview [width]=\"'80px'\" [src]=\"row.url\" [name]=\"row.name\" [type]=\"row.mimeType\" [preview]=\"true\"></fe-file-preview>\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::FileName' | abpLocalization\" prop=\"name\" [flexGrow]=\"4\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ value }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::FileSize' | abpLocalization\" prop=\"size\" [flexGrow]=\"1.5\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ _FileApiService.formatFileSize(value) }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::Directory' | abpLocalization\" prop=\"cellName\" [flexGrow]=\"1\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ value }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [name]=\"'FileExplorer::CreationTime' | abpLocalization\" prop=\"creationTime\" [flexGrow]=\"2\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n {{ value | date : 'YYYY/MM/dd HH:mm:s' }}\n </ng-template>\n </ngx-datatable-column>\n <ngx-datatable-column [flexGrow]=\"1\">\n <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n <button class=\"btn btn-sm btn-light p-0\" (click.stop)=\"deleteFile(row)\">\n <i class=\"fas fa-trash text-primary p-2\"></i>\n </button>\n </ng-template>\n </ngx-datatable-column>\n </ngx-datatable>\n </div>\n <div *ngIf=\"uploadPictureStatusList.length > 0\"\n class=\"position-fixed bottom-0 end-0 shadow-lg file-status-modal m-5\"\n style=\"border-radius: 10px\">\n <div class=\"card p-1\">\n <div class=\"card-header d-flex align-items-center justify-content-between p-0 py-1 border-bottom\">\n <div>{{'FileExplorer::UploadFiles' | abpLocalization}}</div>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click.stop)=\"closeFileStatusModal()\"></button>\n </div>\n <div class=\"card-body\">\n <table class=\"table\">\n <thead>\n <tr>\n <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n <th scope=\"col\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let item of uploadPictureStatusList; let i = index\">\n <tr>\n <th scope=\"row\">\n <div>{{ item.name }}</div>\n <div class=\"form-text text-danger\" *ngIf=\"item.size > sizeLimit\">\n {{'FileExplorer::ExceedsMaximumSize' | abpLocalization:_FileApiService.formatFileSize(sizeLimit)}}\n </div>\n </th>\n <td>{{ item.fileSize }}</td>\n <td>\n <i *ngIf=\"item.status === 1\" class=\"fas fa-check text-primary\"></i>\n <i *ngIf=\"item.status === 2\" class=\"fas fa-times-circle text-danger\"></i>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n <ng-template #abpFooter>\n <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n <abp-button iconClass=\"fa fa-check\" (click)=\"modalSave()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n </ng-template>\n</abp-modal>", styles: ["::ng-deep .file-modal .container-height{height:calc(100vh - 284px)}::ng-deep .file-modal .file-status-modal{background:#fff}::ng-deep .file-modal .file-status-modal .card-body{max-height:300px;overflow-y:auto}::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group{background-color:transparent!important}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper{padding:0}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .custom-node{width:100%}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .selected{background-color:var(--lpx-brand)!important}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper .selected .btn{color:var(--lpx-navbar-color)}::ng-deep .file-modal .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:transparent}::ng-deep .file-modal .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell,::ng-deep .file-modal .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell{overflow:initial;line-break:anywhere}\n"] }]
|
|
888
861
|
}], ctorParameters: () => [{ type: FileDescriptorService$1 }, { type: i2$1.ToasterService }, { type: i3.ListService }, { type: FileApiService }, { type: i3.RestService }, { type: i2$1.ConfirmationService }, { type: i3.LocalizationService }], propDecorators: { fileContainerName: [{
|
|
889
862
|
type: Input
|
|
890
863
|
}], multiple: [{
|
|
@@ -901,31 +874,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
|
|
|
901
874
|
type: Output
|
|
902
875
|
}] } });
|
|
903
876
|
|
|
877
|
+
/* eslint-disable @angular-eslint/component-selector */
|
|
904
878
|
class FilePickerComponent {
|
|
905
|
-
_FileApiService;
|
|
906
879
|
constructor(_FileApiService) {
|
|
907
880
|
this._FileApiService = _FileApiService;
|
|
881
|
+
/**是否多选 */
|
|
882
|
+
this._multiple = false;
|
|
883
|
+
/**图片容器 */
|
|
884
|
+
this._fileContainerName = 'Images';
|
|
885
|
+
this.selectedFileChange = new EventEmitter();
|
|
886
|
+
this._fileShowTable = [];
|
|
887
|
+
/**模态框-状态-是否打开 */
|
|
888
|
+
this.ModalOpen = false;
|
|
908
889
|
}
|
|
909
|
-
/**是否多选 */
|
|
910
|
-
_multiple = false;
|
|
911
890
|
set multiple(v) {
|
|
912
891
|
this._multiple = v;
|
|
913
892
|
}
|
|
914
|
-
/**图片容器 */
|
|
915
|
-
_fileContainerName = 'images';
|
|
916
893
|
set fileContainerName(v) {
|
|
917
894
|
this._fileContainerName = v;
|
|
918
895
|
}
|
|
919
|
-
/**已选定的文件 */
|
|
920
|
-
selectFormFile;
|
|
921
896
|
ngOnChanges(changes) {
|
|
922
897
|
let selectFormFilengOnChanges = changes.selectFormFile['currentValue'];
|
|
923
898
|
if (selectFormFilengOnChanges.length > 0) {
|
|
924
899
|
this._fileShowTable = selectFormFilengOnChanges;
|
|
925
900
|
}
|
|
926
901
|
}
|
|
927
|
-
selectedFileChange = new EventEmitter();
|
|
928
|
-
_fileShowTable = [];
|
|
929
902
|
/**表格选择的文件回调 */
|
|
930
903
|
_selectFilefn(event) {
|
|
931
904
|
let _fileShowTable = this._FileApiService.deepClone(event);
|
|
@@ -933,8 +906,6 @@ class FilePickerComponent {
|
|
|
933
906
|
this.selectFormFile = _fileShowTable;
|
|
934
907
|
this.selectedFileChange.emit(_fileShowTable);
|
|
935
908
|
}
|
|
936
|
-
/**模态框-状态-是否打开 */
|
|
937
|
-
ModalOpen = false;
|
|
938
909
|
/**删除文件表格项 */
|
|
939
910
|
deleteFileTableItem(i, file) {
|
|
940
911
|
this._fileShowTable.splice(i, 1);
|
|
@@ -942,12 +913,12 @@ class FilePickerComponent {
|
|
|
942
913
|
this.selectedFileChange.emit([]);
|
|
943
914
|
this.selectedFileChange.emit(this.selectFormFile);
|
|
944
915
|
}
|
|
945
|
-
static
|
|
946
|
-
static
|
|
916
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FilePickerComponent, deps: [{ token: FileApiService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
917
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FilePickerComponent, selector: "fe-file-picker", inputs: { multiple: "multiple", fileContainerName: "fileContainerName", selectFormFile: "selectFormFile" }, outputs: { selectedFileChange: "selectedFileChange" }, usesOnChanges: true, ngImport: i0, template: "<button class=\"btn btn-sm btn-primary ms-2 float-end\" type=\"button\" (click.stop)=\"ModalOpen = true\">{{'FileExplorer::SelectFile' | abpLocalization}}</button>\n<fe-file-modal [(visible)]=\"ModalOpen\" [selectPickerFile]=\"selectFormFile\" [multiple]=\"_multiple\" (selectFilefn)=\"_selectFilefn($event)\" [fileContainerName]=\"_fileContainerName\"></fe-file-modal>\n<table class=\"table\" *ngIf=\"_fileShowTable.length>0\">\n <thead>\n <tr>\n <th scope=\"col\"></th>\n <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n <th scope=\"col\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let item of _fileShowTable;let i =index\">\n <tr>\n <td>\n <fe-file-preview [width]=\"'80px'\" [src]=\"item.url||item.Url\" [name]=\"item.name||item.Name\" [type]=\"item.mimeType||item.MimeType\" [preview]=\"true\"></fe-file-preview>\n </td>\n <th scope=\"row\">\n <div>{{item.name||item.Name}}</div>\n </th>\n <td >{{_FileApiService.formatFileSize(item.Size||item.size)}}</td>\n <td>\n <button class=\"btn btn-sm p-0 btn-light \" (click.stop)=\"deleteFileTableItem(i,item)\">\n <i class=\"fas fa-trash p-2\"></i>\n </button>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "component", type: FileModalComponent, selector: "fe-file-modal", inputs: ["fileContainerName", "multiple", "limit", "visible", "selectPickerFile"], outputs: ["visibleChange", "selectFilefn"] }, { kind: "component", type: FilePreviewComponent, selector: "fe-file-preview", inputs: ["width", "src", "preview", "type", "name"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
|
|
947
918
|
}
|
|
948
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
919
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FilePickerComponent, decorators: [{
|
|
949
920
|
type: Component,
|
|
950
|
-
args: [{ selector: 'fe-file-picker', template: "<button class=\"btn btn-sm btn-primary ms-2 float-end\" type=\"button\" (click.stop)=\"ModalOpen = true\">{{'FileExplorer::SelectFile' | abpLocalization}}</button>\n<fe-file-modal [(visible)]=\"ModalOpen\" [selectPickerFile]=\"selectFormFile\" [multiple]=\"_multiple\" (selectFilefn)=\"_selectFilefn($event)\" [fileContainerName]=\"_fileContainerName\"></fe-file-modal>\n<table class=\"table\" *ngIf=\"_fileShowTable.length>0\">\n <thead>\n <tr>\n <th scope=\"col\"></th>\n <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n <th scope=\"col\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let item of _fileShowTable;let i =index\">\n <tr>\n <td>\n <fe-file-preview [width]=\"'80px'\" [src]=\"item.url\" [name]=\"item.name\" [type]=\"item.mimeType\" [preview]=\"true\"></fe-file-preview>\n </td>\n <th scope=\"row\">\n <div>{{item.name}}</div>\n </th>\n <td >{{_FileApiService.formatFileSize(item.size)}}</td>\n <td>\n <button class=\"btn btn-sm p-0 btn-light \" (click.stop)=\"deleteFileTableItem(i,item)\">\n <i class=\"fas fa-trash p-2\"></i>\n </button>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>\n\n\n" }]
|
|
921
|
+
args: [{ selector: 'fe-file-picker', template: "<button class=\"btn btn-sm btn-primary ms-2 float-end\" type=\"button\" (click.stop)=\"ModalOpen = true\">{{'FileExplorer::SelectFile' | abpLocalization}}</button>\n<fe-file-modal [(visible)]=\"ModalOpen\" [selectPickerFile]=\"selectFormFile\" [multiple]=\"_multiple\" (selectFilefn)=\"_selectFilefn($event)\" [fileContainerName]=\"_fileContainerName\"></fe-file-modal>\n<table class=\"table\" *ngIf=\"_fileShowTable.length>0\">\n <thead>\n <tr>\n <th scope=\"col\"></th>\n <th scope=\"col\">{{'FileExplorer::FileName' | abpLocalization}}</th>\n <th scope=\"col\">{{'FileExplorer::FileSize' | abpLocalization}}</th>\n <th scope=\"col\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let item of _fileShowTable;let i =index\">\n <tr>\n <td>\n <fe-file-preview [width]=\"'80px'\" [src]=\"item.url||item.Url\" [name]=\"item.name||item.Name\" [type]=\"item.mimeType||item.MimeType\" [preview]=\"true\"></fe-file-preview>\n </td>\n <th scope=\"row\">\n <div>{{item.name||item.Name}}</div>\n </th>\n <td >{{_FileApiService.formatFileSize(item.Size||item.size)}}</td>\n <td>\n <button class=\"btn btn-sm p-0 btn-light \" (click.stop)=\"deleteFileTableItem(i,item)\">\n <i class=\"fas fa-trash p-2\"></i>\n </button>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>\n\n\n" }]
|
|
951
922
|
}], ctorParameters: () => [{ type: FileApiService }], propDecorators: { multiple: [{
|
|
952
923
|
type: Input
|
|
953
924
|
}], fileContainerName: [{
|
|
@@ -959,28 +930,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
|
|
|
959
930
|
}] } });
|
|
960
931
|
|
|
961
932
|
class FileDomeComponent {
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
fileDataToBeSubmitted;
|
|
933
|
+
constructor() {
|
|
934
|
+
/**跟随表单提交--已提交的数据,或选择的数据源 */
|
|
935
|
+
this.fileSubmittedData = [];
|
|
936
|
+
this.FileApiService = inject(FileApiService);
|
|
937
|
+
/**选择文件-弹窗的-已选定的文件 */
|
|
938
|
+
this.selectedFileGroup = [];
|
|
939
|
+
}
|
|
970
940
|
/**跟随表单提交--数据发生改变回调 */
|
|
971
941
|
fileDataChange(event) {
|
|
972
942
|
this.fileDataToBeSubmitted = event;
|
|
973
943
|
}
|
|
974
|
-
/**选择文件-弹窗的-已选定的文件 */
|
|
975
|
-
selectedFileGroup = [];
|
|
976
944
|
/**_selectedFile改变回调 */
|
|
977
945
|
_selectedFileChange(event) {
|
|
978
946
|
this.selectedFileGroup = event;
|
|
979
947
|
}
|
|
980
|
-
static
|
|
981
|
-
static
|
|
948
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileDomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
949
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FileDomeComponent, selector: "fe-file-dome", ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col\">\r\n <div class=\"card\">\r\n <div class=\"card-header py-2 border-bottom\">Send file stream with form</div>\r\n <div class=\"card-body\">\r\n <fe-file-edit [(fileData)]=\"fileSubmittedData\" (fileDataChange)=\"fileDataChange($event)\"></fe-file-edit>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"card\">\r\n <div class=\"card-header py-2 border-bottom\">Send file stream with form</div>\r\n <div class=\"card-body\">\r\n <fe-file-picker [selectFormFile]=\"selectedFileGroup\" fileContainerName=\"SampleContainer\" (selectedFileChange)=\"_selectedFileChange($event)\" ></fe-file-picker>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: FileEditComponent, selector: "fe-file-edit", inputs: ["multiple", "fileData", "limit"], outputs: ["fileDataChange"] }, { kind: "component", type: FilePickerComponent, selector: "fe-file-picker", inputs: ["multiple", "fileContainerName", "selectFormFile"], outputs: ["selectedFileChange"] }] }); }
|
|
982
950
|
}
|
|
983
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
951
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileDomeComponent, decorators: [{
|
|
984
952
|
type: Component,
|
|
985
953
|
args: [{ selector: 'fe-file-dome', template: "<div class=\"row\">\r\n <div class=\"col\">\r\n <div class=\"card\">\r\n <div class=\"card-header py-2 border-bottom\">Send file stream with form</div>\r\n <div class=\"card-body\">\r\n <fe-file-edit [(fileData)]=\"fileSubmittedData\" (fileDataChange)=\"fileDataChange($event)\"></fe-file-edit>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"card\">\r\n <div class=\"card-header py-2 border-bottom\">Send file stream with form</div>\r\n <div class=\"card-body\">\r\n <fe-file-picker [selectFormFile]=\"selectedFileGroup\" fileContainerName=\"SampleContainer\" (selectedFileChange)=\"_selectedFileChange($event)\" ></fe-file-picker>\r\n </div>\r\n </div>\r\n </div>\r\n</div>" }]
|
|
986
954
|
}] });
|
|
@@ -992,11 +960,11 @@ const routes = [
|
|
|
992
960
|
},
|
|
993
961
|
];
|
|
994
962
|
class FileExplorerRoutingModule {
|
|
995
|
-
static
|
|
996
|
-
static
|
|
997
|
-
static
|
|
963
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
964
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerRoutingModule, imports: [i1$1.RouterModule], exports: [RouterModule] }); }
|
|
965
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
|
|
998
966
|
}
|
|
999
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
967
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerRoutingModule, decorators: [{
|
|
1000
968
|
type: NgModule,
|
|
1001
969
|
args: [{
|
|
1002
970
|
imports: [RouterModule.forChild(routes)],
|
|
@@ -1005,11 +973,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
|
|
|
1005
973
|
}] });
|
|
1006
974
|
|
|
1007
975
|
class FileExplorerConfig {
|
|
1008
|
-
/**文件容器名称 */
|
|
1009
|
-
'FileExplorer.FileContainerName' = ['', [Validators.required]];
|
|
1010
|
-
/**多选 */
|
|
1011
|
-
'FileExplorer.UploadFileMultiple' = [false, []];
|
|
1012
976
|
constructor(data) {
|
|
977
|
+
/**文件容器名称 */
|
|
978
|
+
this['FileExplorer.FileContainerName'] = ['', [Validators.required]];
|
|
979
|
+
/**多选 */
|
|
980
|
+
this['FileExplorer.UploadFileMultiple'] = [false, []];
|
|
1013
981
|
if (data) {
|
|
1014
982
|
for (const key in data) {
|
|
1015
983
|
if (data.hasOwnProperty(key)) {
|
|
@@ -1021,24 +989,17 @@ class FileExplorerConfig {
|
|
|
1021
989
|
}
|
|
1022
990
|
|
|
1023
991
|
class FileExplorerConfigComponent {
|
|
1024
|
-
fb;
|
|
1025
992
|
constructor(fb) {
|
|
1026
993
|
this.fb = fb;
|
|
1027
994
|
}
|
|
1028
|
-
/**表单控件类型 */
|
|
1029
|
-
_type;
|
|
1030
995
|
set type(v) {
|
|
1031
996
|
this._type = v;
|
|
1032
997
|
this.dataLoaded();
|
|
1033
998
|
}
|
|
1034
|
-
/**表单实体 */
|
|
1035
|
-
_Entity;
|
|
1036
999
|
set Entity(v) {
|
|
1037
1000
|
this._Entity = v;
|
|
1038
1001
|
this.dataLoaded();
|
|
1039
1002
|
}
|
|
1040
|
-
/**选择的表单信息 */
|
|
1041
|
-
_selected;
|
|
1042
1003
|
set selected(v) {
|
|
1043
1004
|
this._selected = v;
|
|
1044
1005
|
this.dataLoaded();
|
|
@@ -1046,7 +1007,6 @@ class FileExplorerConfigComponent {
|
|
|
1046
1007
|
get formConfiguration() {
|
|
1047
1008
|
return this._Entity.get('formConfiguration');
|
|
1048
1009
|
}
|
|
1049
|
-
submitclick;
|
|
1050
1010
|
async dataLoaded() {
|
|
1051
1011
|
if (this._Entity && this._type) {
|
|
1052
1012
|
await this.AfterInit();
|
|
@@ -1064,10 +1024,10 @@ class FileExplorerConfigComponent {
|
|
|
1064
1024
|
resolve(true);
|
|
1065
1025
|
});
|
|
1066
1026
|
}
|
|
1067
|
-
static
|
|
1068
|
-
static
|
|
1027
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerConfigComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1028
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FileExplorerConfigComponent, selector: "fe-file-explorer-config", inputs: { type: "type", Entity: "Entity", selected: "selected" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"_Entity\">\n <div formGroupName=\"formConfiguration\">\n <div class=\"mb-2\">\n <label class=\"form-label\">{{'DigniteAbpDynamicFormsFileExplorer::FileContainerName' | abpLocalization}}</label>\n <input type=\"text\" class=\"form-control\" formControlName=\"FileExplorer.FileContainerName\">\n </div>\n <div class=\"mb-2\">\n <div class=\"form-check form-check-inline\">\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"FileExplorer.UploadFileMultiple\" id=\"flexRadioDefault1\">\n <label class=\"form-check-label\" for=\"flexRadioDefault1\">\n {{'DigniteAbpDynamicFormsFileExplorer::UploadFileMultiple' | abpLocalization}}\n </label>\n </div>\n </div>\n <button type=\"submit\" (abpInit)=\"submitclick?.nativeElement?.click()\" style=\"display: none;\"\n #submitclick></button>\n </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.InitDirective, selector: "[abpInit]", outputs: ["abpInit"] }, { kind: "directive", type: i3$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3$1.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
|
|
1069
1029
|
}
|
|
1070
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1030
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerConfigComponent, decorators: [{
|
|
1071
1031
|
type: Component,
|
|
1072
1032
|
args: [{ selector: 'fe-file-explorer-config', template: "<form [formGroup]=\"_Entity\">\n <div formGroupName=\"formConfiguration\">\n <div class=\"mb-2\">\n <label class=\"form-label\">{{'DigniteAbpDynamicFormsFileExplorer::FileContainerName' | abpLocalization}}</label>\n <input type=\"text\" class=\"form-control\" formControlName=\"FileExplorer.FileContainerName\">\n </div>\n <div class=\"mb-2\">\n <div class=\"form-check form-check-inline\">\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"FileExplorer.UploadFileMultiple\" id=\"flexRadioDefault1\">\n <label class=\"form-check-label\" for=\"flexRadioDefault1\">\n {{'DigniteAbpDynamicFormsFileExplorer::UploadFileMultiple' | abpLocalization}}\n </label>\n </div>\n </div>\n <button type=\"submit\" (abpInit)=\"submitclick?.nativeElement?.click()\" style=\"display: none;\"\n #submitclick></button>\n </div>\n</form>" }]
|
|
1073
1033
|
}], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { type: [{
|
|
@@ -1082,39 +1042,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImpor
|
|
|
1082
1042
|
}] } });
|
|
1083
1043
|
|
|
1084
1044
|
class FileExplorerControlComponent {
|
|
1085
|
-
fb;
|
|
1086
1045
|
constructor(fb) {
|
|
1087
1046
|
this.fb = fb;
|
|
1047
|
+
/**字段配置列表 */
|
|
1048
|
+
this._fields = '';
|
|
1049
|
+
/**字段配置 */
|
|
1050
|
+
this.formConfiguration = '';
|
|
1051
|
+
/**文件容器名称 */
|
|
1052
|
+
this.FileContainerName = '';
|
|
1053
|
+
/**选择文件-弹窗的-已选定的文件 */
|
|
1054
|
+
this.selectedFileGroup = [];
|
|
1088
1055
|
}
|
|
1089
|
-
/**表单实体 */
|
|
1090
|
-
_entity;
|
|
1091
1056
|
set entity(v) {
|
|
1092
1057
|
this._entity = v;
|
|
1093
1058
|
if (v)
|
|
1094
1059
|
this.dataLoaded();
|
|
1095
1060
|
}
|
|
1096
|
-
/**字段配置列表 */
|
|
1097
|
-
_fields = '';
|
|
1098
1061
|
set fields(v) {
|
|
1099
1062
|
this._fields = v;
|
|
1100
1063
|
if (v)
|
|
1101
1064
|
this.dataLoaded();
|
|
1102
1065
|
}
|
|
1103
|
-
/**父级字段名称,用于为表单设置控件赋值 */
|
|
1104
|
-
_parentFiledName;
|
|
1105
1066
|
set parentFiledName(v) {
|
|
1106
1067
|
this._parentFiledName = v;
|
|
1107
1068
|
if (v)
|
|
1108
1069
|
this.dataLoaded();
|
|
1109
1070
|
}
|
|
1110
|
-
/**父级字段名称,用于为表单设置控件赋值 */
|
|
1111
|
-
_selected;
|
|
1112
1071
|
set selected(v) {
|
|
1113
1072
|
this._selected = v;
|
|
1114
1073
|
if (v && v.length > 0)
|
|
1115
1074
|
this.dataLoaded();
|
|
1116
1075
|
}
|
|
1117
|
-
submitclick;
|
|
1118
1076
|
get extraProperties() {
|
|
1119
1077
|
return this._entity.get('extraProperties');
|
|
1120
1078
|
}
|
|
@@ -1125,10 +1083,6 @@ class FileExplorerControlComponent {
|
|
|
1125
1083
|
this.submitclick.nativeElement.click();
|
|
1126
1084
|
}
|
|
1127
1085
|
}
|
|
1128
|
-
/**字段配置 */
|
|
1129
|
-
formConfiguration = '';
|
|
1130
|
-
/**文件容器名称 */
|
|
1131
|
-
FileContainerName = '';
|
|
1132
1086
|
AfterInit() {
|
|
1133
1087
|
return new Promise((resolve, rejects) => {
|
|
1134
1088
|
let ValidatorsArray = [];
|
|
@@ -1145,8 +1099,6 @@ class FileExplorerControlComponent {
|
|
|
1145
1099
|
resolve(true);
|
|
1146
1100
|
});
|
|
1147
1101
|
}
|
|
1148
|
-
/**选择文件-弹窗的-已选定的文件 */
|
|
1149
|
-
selectedFileGroup = [];
|
|
1150
1102
|
/**_selectedFile改变回调 */
|
|
1151
1103
|
_selectedFileChange(event) {
|
|
1152
1104
|
this.selectedFileGroup = event;
|
|
@@ -1155,10 +1107,10 @@ class FileExplorerControlComponent {
|
|
|
1155
1107
|
obj[fieldName] = event;
|
|
1156
1108
|
this.extraProperties.patchValue(obj);
|
|
1157
1109
|
}
|
|
1158
|
-
static
|
|
1159
|
-
static
|
|
1110
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerControlComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: FileExplorerControlComponent, selector: "fe-file-explorer-control", inputs: { entity: "entity", fields: "fields", parentFiledName: "parentFiledName", selected: "selected" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"_entity\">\n <div formGroupName=\"extraProperties\">\n <div class=\"mb-2\">\n <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n <fe-file-picker [selectFormFile]=\"selectedFileGroup\" [multiple]=\"formConfiguration['FileExplorer.UploadFileMultiple']\"\n (selectedFileChange)=\"_selectedFileChange($event)\" [fileContainerName]=\"FileContainerName\"></fe-file-picker>\n <div class=\"form-text\" *ngIf=\"_fields.field.description\">{{_fields.field.description}}</div>\n </div>\n </div>\n <button type=\"submit\" style=\"display: none;\" #submitclick></button>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "component", type: FilePickerComponent, selector: "fe-file-picker", inputs: ["multiple", "fileContainerName", "selectFormFile"], outputs: ["selectedFileChange"] }] }); }
|
|
1160
1112
|
}
|
|
1161
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerControlComponent, decorators: [{
|
|
1162
1114
|
type: Component,
|
|
1163
1115
|
args: [{ selector: 'fe-file-explorer-control', template: "<form [formGroup]=\"_entity\">\n <div formGroupName=\"extraProperties\">\n <div class=\"mb-2\">\n <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n <fe-file-picker [selectFormFile]=\"selectedFileGroup\" [multiple]=\"formConfiguration['FileExplorer.UploadFileMultiple']\"\n (selectedFileChange)=\"_selectedFileChange($event)\" [fileContainerName]=\"FileContainerName\"></fe-file-picker>\n <div class=\"form-text\" *ngIf=\"_fields.field.description\">{{_fields.field.description}}</div>\n </div>\n </div>\n <button type=\"submit\" style=\"display: none;\" #submitclick></button>\n</form>" }]
|
|
1164
1116
|
}], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { entity: [{
|
|
@@ -1195,8 +1147,8 @@ function AddFieldControlGroup(array = []) {
|
|
|
1195
1147
|
}
|
|
1196
1148
|
|
|
1197
1149
|
class FileExplorerModule {
|
|
1198
|
-
static
|
|
1199
|
-
static
|
|
1150
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1151
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerModule, declarations: [FileEditComponent,
|
|
1200
1152
|
FilePickerComponent,
|
|
1201
1153
|
FileModalComponent,
|
|
1202
1154
|
FileModalTreeComponent,
|
|
@@ -1215,17 +1167,17 @@ class FileExplorerModule {
|
|
|
1215
1167
|
FileModalComponent,
|
|
1216
1168
|
FileModalTreeComponent,
|
|
1217
1169
|
FileDomeComponent,
|
|
1218
|
-
FilePreviewComponent] });
|
|
1219
|
-
static
|
|
1170
|
+
FilePreviewComponent] }); }
|
|
1171
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerModule, imports: [FormsModule,
|
|
1220
1172
|
CoreModule,
|
|
1221
1173
|
ThemeSharedModule,
|
|
1222
1174
|
ReactiveFormsModule,
|
|
1223
1175
|
NgbDropdownModule,
|
|
1224
1176
|
NzTreeModule,
|
|
1225
1177
|
NgxValidateCoreModule,
|
|
1226
|
-
FileExplorerRoutingModule] });
|
|
1178
|
+
FileExplorerRoutingModule] }); }
|
|
1227
1179
|
}
|
|
1228
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: FileExplorerModule, decorators: [{
|
|
1229
1181
|
type: NgModule,
|
|
1230
1182
|
args: [{
|
|
1231
1183
|
declarations: [
|