11 changed files with 269 additions and 32 deletions
@ -0,0 +1,28 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-label [nzSpan]="5" nzFor="result" nzRequired>检查结果</nz-form-label> |
||||
<nz-form-control [nzSpan]="12" nzErrorTip="请选择结果!" style="max-width: 100%;"> |
||||
<nz-select id="result" formControlName="result" nzPlaceHolder="请选择结果"> |
||||
<nz-option nzValue="未发现违法违规情况" nzLabel="未发现违法违规情况"></nz-option> |
||||
<nz-option nzValue="责令限期改正" nzLabel="责令限期改正"></nz-option> |
||||
<nz-option nzValue="因客观原因无法开展检查" nzLabel="因客观原因无法开展检查"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item style="margin-bottom: 0;"> |
||||
<nz-form-label [nzSpan]="5" nzFor="file">上传附件</nz-form-label> |
||||
<div class="uploadbox"> |
||||
<button nz-button [nzLoading]="isLoadingSave"> |
||||
<span nz-icon nzType="upload"></span> |
||||
点击上传 |
||||
</button> |
||||
<input type="file" name="" id="" (change)="filechange($event)" *ngIf="!isLoadingSave"> |
||||
<ul> |
||||
<li *ngFor="let item of fileList" (click)="lookfile(item)">{{item | fileName}}</li> |
||||
</ul> |
||||
</div> |
||||
|
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,37 @@
|
||||
.uploadbox { |
||||
display: flex; |
||||
flex-direction: column; |
||||
position: relative; |
||||
width: 75%; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
|
||||
button { |
||||
margin-bottom: 8px; |
||||
width: 110px; |
||||
} |
||||
|
||||
input { |
||||
opacity: 0; |
||||
width: 110px; |
||||
height: 32px; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
ul { |
||||
margin-bottom: 0; |
||||
li{ |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
li:hover { |
||||
text-decoration: underline; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,127 @@
|
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { Component, Input, OnInit } from '@angular/core'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||
import { ObjectsSimpleService } from 'src/app/service/objectsSimple.service'; |
||||
import Viewer from 'viewerjs'; |
||||
@Component({ |
||||
selector: 'app-upload', |
||||
templateUrl: './upload.component.html', |
||||
styleUrls: ['./upload.component.scss'] |
||||
}) |
||||
export class UploadComponent implements OnInit { |
||||
@Input() data?: any; |
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private objectsSrv: ObjectsSimpleService) { } |
||||
|
||||
ngOnInit(): void { |
||||
console.log(this.data) |
||||
this.data.resultAttachment ? this.fileList = this.data.resultAttachment : this.fileList = [] |
||||
this.validateForm = this.fb.group({ |
||||
result: [this.data.inspectionResult, [Validators.required]], |
||||
}); |
||||
} |
||||
destroyModal(): void { |
||||
this.modal.destroy({ data: 'this the result data' }); |
||||
} |
||||
|
||||
|
||||
fileList = [] |
||||
|
||||
isLoadingSave: boolean = false |
||||
uploadIndex: string |
||||
filechange(e) { |
||||
this.isLoadingSave = true |
||||
let file = e.target.files[0] || null //获取上传的文件
|
||||
this.openFileSelect(file, `resultAttachment/${this.data.id}/`) |
||||
} |
||||
//设置文件路径并上传
|
||||
postFilePath |
||||
async openFileSelect(file: File, extensionPath: string) { |
||||
this.postFilePath = extensionPath; |
||||
let fileSize = file.size || null //上传文件的总大小
|
||||
let shardSize = 5 * 1024 * 1024 //5MB 超过5MB要分块上传
|
||||
if (fileSize >= shardSize) // 超过5MB要分块上传
|
||||
{ |
||||
await this.postFileByMul(file); |
||||
} |
||||
else //普通上传
|
||||
{ |
||||
await this.postFile(file); |
||||
} |
||||
} |
||||
//上传文件
|
||||
async postFile(file: File) { |
||||
await new Promise((resolve, reject) => { |
||||
this.objectsSrv.postFile(this.postFilePath, file).subscribe(data => { |
||||
let dataObj = data as any; |
||||
let filePath: string = ObjectsSimpleService.baseUrl + dataObj.objectName; |
||||
this.fileList.push(filePath) |
||||
this.isLoadingSave = false |
||||
resolve('success') |
||||
}); |
||||
}) |
||||
} |
||||
|
||||
/** |
||||
* 分块上传 |
||||
* @param file
|
||||
*/ |
||||
postFileByMul(file: File) { |
||||
this.objectsSrv.postFile_MultipartUpload(this.postFilePath, file).then((value) => { |
||||
let dataObj = value as any; |
||||
let filePath = dataObj.filePath |
||||
this.fileList.push(filePath) |
||||
this.isLoadingSave = false |
||||
}); |
||||
|
||||
} |
||||
//获取文件格式
|
||||
getFileType(name: string): string { |
||||
let suffix |
||||
if (name.substring(name.length - 4).includes('png') || name.substring(name.length - 4).includes('jpg') || name.substring(name.length - 4).includes('jpeg') || name.substring(name.length - 4).includes('webp')) { |
||||
suffix = 'img' |
||||
} else if (name.substring(name.length - 4).includes('doc') || name.substring(name.length - 4).includes('docx')) { |
||||
suffix = 'word' |
||||
} else if (name.substring(name.length - 4).includes('pdf')) { |
||||
suffix = 'pdf' |
||||
} |
||||
return suffix |
||||
} |
||||
|
||||
lookfile(item) { |
||||
if (!item) { |
||||
return |
||||
} |
||||
if (this.getFileType(item) == 'word') { |
||||
let arr = item.split('.') |
||||
arr[arr.length - 1] = 'pdf' |
||||
window.open(arr.join('.')) |
||||
} else if (this.getFileType(item) == 'pdf') { |
||||
window.open(item) |
||||
} else { |
||||
this.viewImg(item) |
||||
} |
||||
} |
||||
|
||||
|
||||
//查看图片
|
||||
viewImg(url) { |
||||
let dom = document.getElementById(`viewerjs`) |
||||
let pObjs = dom.childNodes; |
||||
let node = document.createElement("img") |
||||
node.style.display = "none"; |
||||
node.src = url; |
||||
node.id = 'img' |
||||
dom.appendChild(node) |
||||
setTimeout(() => { |
||||
let viewer = new Viewer(document.getElementById(`viewerjs`), { |
||||
hidden: () => { |
||||
dom.removeChild(pObjs[0]); |
||||
viewer.destroy(); |
||||
} |
||||
}); |
||||
node.click(); |
||||
}, 0); |
||||
} |
||||
} |
||||
@ -1,17 +0,0 @@
|
||||
import { Pipe, PipeTransform } from '@angular/core'; |
||||
/* |
||||
* Raise the value exponentially |
||||
* Takes an exponent argument that defaults to 1. |
||||
* Usage: |
||||
* value | exponentialStrength:exponent |
||||
* Example: |
||||
* {{ 2 | exponentialStrength:10 }} |
||||
* formats to: 1024 |
||||
*/ |
||||
@Pipe({ name: 'cameraType' }) |
||||
export class cameraType implements PipeTransform { |
||||
transform(value: number): string { |
||||
let arr = ['进出口', '加油区', '卸油区', '便利店'] |
||||
return arr[value] |
||||
} |
||||
} |
||||
Loading…
Reference in new issue