Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
Taric Xin
2021-12-14 16:08:59 +08:00
parent a0e0199cee
commit 19fcbbed7c
3 changed files with 189 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/app/routes/vehicle/components/audit/detail/detail.component.html
View File

@ -16,9 +16,8 @@
</ng-container> </ng-container>
<ng-container *ngIf="isEdit"> <ng-container *ngIf="isEdit">
<button nz-button nzType="default" (click)="reset()">取消</button> <button nz-button nzType="default" (click)="reset()">取消</button>
<button nz-button nzType="default" nzDanger>保存</button> <button nz-button nzType="default" (click)="save()" nzDanger>保存</button>
</ng-container> </ng-container>
</div> </div>
</sv-title> </sv-title>
<sv label="申请时间"> <sv label="申请时间">
@ -62,17 +61,9 @@
</sv-container> </sv-container>
<sv-container col="1" class="mt-md"> <sv-container col="1" class="mt-md">
<sv label="车头照"> <sv label="车头照">
<nz-upload [nzAction]="uploadURl" nzListType="picture-card" nzFileType="image/png,image/jpeg,image/jpg,image/gif" <ng-container
nzName="multipartFile" [(nzFileList)]="carPhoto" [nzShowButton]="carPhoto?.length<2 && isEdit" *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.carFrontPhotoWatermark,key:'carFrontPhotoWatermark'}">
[nzPreview]="handlePreview" </ng-container>
(nzChange)="changeUpload($event,detailData?.carFrontPhotoWatermark?'carFrontPhotoWatermark':'carFrontPhotoWatermark')">
<div>
<i nz-icon nzType="plus"></i>
<div style="margin-top: 8px">上传</div>
</div>
</nz-upload>
<!-- <app-imagelist [imgList]="[detailData?.carFrontPhotoWatermark, detailData?.carFrontPhotoWatermark]">
</app-imagelist> -->
</sv> </sv>
</sv-container> </sv-container>
<nz-divider></nz-divider> <nz-divider></nz-divider>
@ -80,76 +71,86 @@
<sv-container col="3"> <sv-container col="3">
<sv-title style="font-weight: 700;">行驶证信息</sv-title> <sv-title style="font-weight: 700;">行驶证信息</sv-title>
<sv label="档案编号"> <sv label="档案编号">
{{ detailData?.archivesNo }} <input nz-input type="text" [(ngModel)]="detailData.archivesNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv> </sv>
<sv label="准驾车型"> <sv label="准驾车型">
{{ detailData?.carModel }} <input nz-input type="text" [(ngModel)]="detailData.carModel" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv> </sv>
<sv label="行驶证注册日期"> <sv label="行驶证注册日期">
{{ detailData?.driverLicenseRegisterTime }} <nz-date-picker [(ngModel)]="detailData.driverLicenseRegisterTime" [nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
</sv> </sv>
</sv-container> <sv label="行驶证到期日" col="3">
<nz-date-picker [(ngModel)]="detailData.driverLicenseEndTime" [nzDisabled]="!isEdit"
<sv-container col="2"> [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
<sv label="行驶证到期日">
{{ detailData?.driverLicenseEndTime }}
</sv> </sv>
<sv label="行驶证签发机关"> <sv label="行驶证签发机关" col="2">
{{ detailData?.driverLicenseSigningOrg }} <input nz-input type="text" [(ngModel)]="detailData.driverLicenseSigningOrg" [readonly]="!isEdit"
[nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
</sv> </sv>
</sv-container>
<sv-container col="3">
<sv label="行驶证发证日期"> <sv label="行驶证发证日期">
{{ detailData?.driverLicenseGetTime }} <nz-date-picker [(ngModel)]="detailData.driverLicenseGetTime" [nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
</sv> </sv>
<sv label="车辆识别代码"> <sv label="车辆识别代码">
{{ detailData?.carDistinguishCode }} <input nz-input type="text" [(ngModel)]="detailData.carDistinguishCode" [readonly]="!isEdit"
[nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
</sv> </sv>
<sv label="使用性质"> <sv label="使用性质">
{{ detailData?.useNature === '1' ? '营运' : '非营运'}} <nz-select [(ngModel)]="detailData.useNature" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
<nz-option [nzValue]="1" nzLabel="营运"></nz-option>
<nz-option [nzValue]="0" nzLabel="非营运"></nz-option>
</nz-select>
</sv> </sv>
</sv-container>
<sv-container col="3">
<sv label="载重（吨）"> <sv label="载重（吨）">
{{ detailData?.carLoad }} <input nz-input type="text" [(ngModel)]="detailData.carLoad" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv> </sv>
<sv label="整备质量"> <sv label="整备质量">
{{ detailData?.curbWeight }} <input nz-input type="text" [(ngModel)]="detailData.curbWeight" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv> </sv>
<sv label="所有人"> <sv label="所有人">
{{ detailData?.carOwner }} <input nz-input type="text" [(ngModel)]="detailData.carOwner" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv> </sv>
</sv-container> <sv label="行驶证照片" col="1">
<sv-container col="1"> <div class="d-flex">
<sv label="自有载具"> <ng-container
{{ detailData?.contactsName }} *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.certificatePhotoFront,key:'certificatePhotoFront'}">
</sv> </ng-container>
<sv label="行驶证照片"> <ng-container
<app-imagelist *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.certificatePhotoFrontWatermark,key:'certificatePhotoFrontWatermark'}">
[imgList]="[detailData?.certificatePhotoFront,detailData?.certificatePhotoBack,detailData?.certificatePhotoFrontWatermark,detailData?.certificatePhotoBackWatermark]"> </ng-container>
</app-imagelist> </div>
</sv> </sv>
</sv-container> </sv-container>
<nz-divider></nz-divider> <nz-divider></nz-divider>
<sv-container col="3" class="mt16"> <sv-container col="3" class="mt16">
<sv-title style="font-weight: 700;">道路运输证信息</sv-title> <sv-title style="font-weight: 700;">道路运输证信息</sv-title>
<sv label="道路运输证号"> <sv label="道路运输证号">
{{ detailData?.roadTransportNo }} <input nz-input type="text" [(ngModel)]="detailData.roadTransportNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv> </sv>
<sv label="经营许可证号"> <sv label="经营许可证号">
{{ detailData?.roadTransportLicenceNo }} <input nz-input type="text" [(ngModel)]="detailData.roadTransportLicenceNo" [readonly]="!isEdit"
[nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
</sv> </sv>
<sv label="发证日期"> <sv label="发证日期">
{{ detailData?.roadTransportStartTime }} <nz-date-picker [(ngModel)]="detailData.roadTransportStartTime" [nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
</sv> </sv>
<sv label="有效期至"> <sv label="有效期至">
{{detailData?.roadTransportEndTime}} <nz-date-picker [(ngModel)]="detailData.roadTransportEndTime" [nzDisabled]="!isEdit"
[nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
</sv> </sv>
<sv label="道路运输证照片"> <sv label="道路运输证照片">
<app-imagelist [imgList]="[detailData?.roadTransportPhoto,detailData?.roadTransportPhotoWatermark ]"> <ng-container
</app-imagelist> *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.roadTransportPhoto,key:'roadTransportPhoto'}">
</ng-container>
</sv> </sv>
</sv-container> </sv-container>
<nz-divider></nz-divider> <nz-divider></nz-divider>
@ -182,3 +183,25 @@
</div> </div>
</div> </div>
</ng-template> </ng-template>
<ng-template #uploadTemplate let-image="image" let-key="key" let-hover="hover">
<nz-upload class="avatar-uploader" [nzAction]="uploadURl" nzName="multipartFile" nzListType="picture-card"
[nzShowUploadList]="false" nzFileType="image/png,image/jpeg,image/jpg,image/gif"
[nzDisabled]="!isEdit || disabledUpload" (nzChange)="changeUpload($event,key)">
<ng-container *ngIf="!image && isEdit">
<i class="upload-icon" nz-icon [nzType]="service.http.loading ? 'loading' : 'plus'"></i>
<div class="ant-upload-text">上传</div>
</ng-container>
<div *ngIf="image" (mouseover)="detailData[hover]=true" (mouseleave)="detailData[hover]=false"
(click)="$event.cancelBubble=true" class="image-hover">
<img [src]="image" style="width: 200px;height: 160px;" />
<div class="mask" *ngIf="detailData[hover] && isEdit"></div>
<div class="mask-over" *ngIf="detailData[hover] && isEdit">
<i nz-icon nzType="close-circle" nzTheme="fill" class="delete-icon" (click)="deleteImg(key)"></i>
<div style="display: flex;align-items: center;">
<i nz-icon nzType="eye" nzTheme="fill" class="show-icon" (click)="showImg(image)"></i>
</div>
</div>
</div>
</nz-upload>
</ng-template>

74
src/app/routes/vehicle/components/audit/detail/detail.component.less
View File

@ -10,11 +10,16 @@
input { input {
max-width: 250px; max-width: 250px;
} }
nz-date-picker {
min-width: 250px;
}
} }
.readOnly-box { .readOnly-box {
input { input {
padding-left: 0; padding-left: 0;
color : #000;
} }
nz-select-top-control { nz-select-top-control {
@ -30,5 +35,74 @@
color : #000 !important; color : #000 !important;
} }
} }
// 图片展示工具样式改造
.ant-upload.ant-upload-disabled {
cursor: pointer;
}
.ant-upload.ant-upload-select-picture-card {
width : 200px;
height: 160px;
}
.ant-upload-picture-card-wrapper {
width: auto;
}
}
}
.image-hover {
.delete-icon {
border-radius : 50%;
color : #F55656;
font-size : 28px;
position : absolute;
top : -15px;
right : -15px;
background-color: #ffffff;
cursor : pointer;
}
.show-icon {
color : #ffffff;
font-size: 30px;
cursor : pointer;
}
}
.image-hover:hover .mask {
opacity: 0.8;
}
.mask {
width : 200px;
height : 160px;
background-color : #4F4F4F;
opacity : 0;
position : absolute;
// top : 6px;
// left : 12px;
border-radius : 6px;
margin-top : -160px;
}
.mask-over {
width : 200px;
height : 160px;
position : absolute;
// top : 6px;
// left : 12px;
border-radius : 6px;
display : flex;
justify-content : center;
align-items : center;
margin-top : -160px;
label {
font-size : 20px;
line-height : 24px;
letter-spacing: 0.7px;
color : #FFFFFF;
} }
} }

51
src/app/routes/vehicle/components/audit/detail/detail.component.ts
View File

@ -7,6 +7,7 @@ import { ModalHelper, _HttpClient } from '@delon/theme';
import { NzMessageService } from 'ng-zorro-antd/message'; import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal'; import { NzModalService } from 'ng-zorro-antd/modal';
import { NzUploadFile } from 'ng-zorro-antd/upload'; import { NzUploadFile } from 'ng-zorro-antd/upload';
import { ImageViewComponent } from 'src/app/shared/components/imagelist';
import { VehicleService } from '../../../services/vehicle.service'; import { VehicleService } from '../../../services/vehicle.service';
// import { VehicleComponentsListEditComponent } from '../edit/edit.component'; // import { VehicleComponentsListEditComponent } from '../edit/edit.component';
// import { VehicleImgViewComponent } from '../img-view/img-view.component'; // import { VehicleImgViewComponent } from '../img-view/img-view.component';
@ -28,7 +29,7 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
approvalOpinion = ''; approvalOpinion = '';
uploadURl = apiConf.waterFileUpload; uploadURl = apiConf.waterFileUpload;
carPhoto: any = []; disabledUpload = false;
constructor(public service: VehicleService, private route: ActivatedRoute, private nzModalService: NzModalService) {} constructor(public service: VehicleService, private route: ActivatedRoute, private nzModalService: NzModalService) {}
ngOnInit() { ngOnInit() {
@ -113,6 +114,10 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
this.isEdit = false; this.isEdit = false;
} }
save() {
this.isEdit = false;
}
ratify() { ratify() {
this.isEdit = true; this.isEdit = true;
} }
@ -128,13 +133,26 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
window.history.go(-1); window.history.go(-1);
} }
handlePreview = async (file: NzUploadFile): Promise<void> => { showImg(url: any) {
// if (!file.url && !file.preview) { const params = {
// file.preview = await getBase64(file.originFileObj!); imgList: [url],
// } index: 0
// this.previewImage = file.url || file.preview; };
// this.previewVisible = true; this.nzModalService.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
}; }
deleteImg(key: string) {
this.nzModalService.warning({
nzTitle: '是否确认删除该图片',
nzOnOk: () => {
this.disabledUpload = true;
this.detailData[key] = '';
setTimeout(() => {
this.disabledUpload = false;
}, 100);
}
});
}
private adjuctUser(params: any, msg: string) { private adjuctUser(params: any, msg: string) {
this.service.request(this.service.$api_get_operate_get, { ...params }).subscribe(res => { this.service.request(this.service.$api_get_operate_get, { ...params }).subscribe(res => {
@ -151,7 +169,22 @@ export class VehicleComponentsAuditDetailComponent implements OnInit {
carNoColor: '', carNoColor: '',
carModel: '', carModel: '',
carLength: '', carLength: '',
isTrailer: null archivesNo: '',
driverLicenseSigningOrg: '',
carDistinguishCode: '',
carLoad: '',
curbWeight: '',
roadTransportNo: '',
roadTransportLicenceNo: '',
carOwner: '',
isTrailer: null,
useNature: null,
driverLicenseRegisterTime: null,
driverLicenseGetTime: null,
driverLicenseEndTime: null,
roadTransportStartTime: null,
roadTransportEndTime: null,
carFrontPhotoWatermark: ''
}; };
} }
} }