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

fix bug

Browse Source
This commit is contained in:
wangshiming
2021-12-14 20:24:42 +08:00
parent 553d22a01e
commit 7bbd8a8bc9
13 changed files with 452 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,7 +23,7 @@
}
nz-select-top-control {
padding-left: 0px !important;
padding-left: 0 !important;
}
}
@ -31,8 +31,8 @@
min-width: 250px;
nz-select-top-control {
cursor: text !important;
color : #000 !important;
cursor: text !important;
}
}
@ -54,18 +54,18 @@
.image-hover {
.delete-icon {
border-radius : 50%;
color : #F55656;
font-size : 28px;
position : absolute;
top : -15px;
right : -15px;
background-color: #ffffff;
color : #F55656;
font-size : 28px;
background-color: #fff;
border-radius : 50%;
cursor : pointer;
}
.show-icon {
color : #ffffff;
color : #fff;
font-size: 30px;
cursor : pointer;
}
@ -76,33 +76,33 @@
}
.mask {
position : absolute;
width : 200px;
height : 160px;
margin-top : -160px;
background-color : #4F4F4F;
opacity : 0;
position : absolute;
// top : 6px;
// left : 12px;
border-radius : 6px;
margin-top : -160px;
opacity : 0;
}
.mask-over {
position : absolute;
display : flex;
align-items : center;
justify-content : center;
width : 200px;
height : 160px;
position : absolute;
margin-top : -160px;
// top : 6px;
// left : 12px;
border-radius : 6px;
display : flex;
justify-content : center;
align-items : center;
margin-top : -160px;
label {
color : #FFF;
font-size : 20px;
line-height : 24px;
letter-spacing: 0.7px;
color : #FFFFFF;
}
}

122
src/app/routes/vehicle/components/list/detail/detail.component.html
View File

@ -7,27 +7,52 @@
</button>
</ng-template>
<ng-template #content>
<sv-container col="1">
<sv-title style="font-weight: 700;">待审核
<div style="float: right;">
<ng-container *ngIf="!isEdit">
<button nz-button nzType="default" nzDanger (click)="ratify()">修改</button>
</ng-container>
<ng-container *ngIf="isEdit">
<button nz-button nzType="default" (click)="reset()">取消</button>
<button nz-button nzType="default" (click)="save()" nzDanger>保存</button>
</ng-container>
</div>
</sv-title>
</sv-container>
<sv-container col="3">
<sv-title style="font-weight: 700;">车辆基础信息</sv-title>
<sv label="车牌号">
{{ detailData?.carNo }}
<input nz-input type="text" [(ngModel)]="detailData.carNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
<sv label="车牌颜色">
{{ detailData?.carNoColor }}
<input nz-input type="text" [(ngModel)]="detailData.carNoColor" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
<sv label="车型">
{{ detailData?.carModel }}
<input nz-input type="text" [(ngModel)]="detailData.carModel" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
<sv label="车长">
{{ detailData?.carLength }}
<input nz-input type="text" [(ngModel)]="detailData.carLength" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
<sv label="是否为挂车">
{{ detailData?.isTrailer === true ? '是' : '否'}}
<nz-select [(ngModel)]="detailData.isTrailer" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
<nz-option [nzValue]="false" nzLabel="否"></nz-option>
<nz-option [nzValue]="true" nzLabel="是"></nz-option>
</nz-select>
</sv>
</sv-container>
<sv-container col="1">
<sv label="车头照">
<app-imagelist [imgList]="[detailData?.carFrontPhotoWatermark, detailData?.carFrontPhotoWatermark]"></app-imagelist>
<!-- <app-imagelist [imgList]="[detailData?.carFrontPhotoWatermark, detailData?.carFrontPhotoWatermark]"></app-imagelist> -->
<ng-container
*ngTemplateOutlet="uploadTemplate;context:{image:detailData?.carFrontPhotoWatermark,key:'carFrontPhotoWatermark'}">
</ng-container>
</sv>
</sv-container>
</ng-template>
@ -36,73 +61,98 @@
<sv-container col="3">
<sv-title style="font-weight: 700;">行驶证信息</sv-title>
<sv label="档案编号">
{{ detailData?.archivesNo }}
<input nz-input type="text" [(ngModel)]="detailData.archivesNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
<sv label="准驾车型">
{{ detailData?.carModel }}
<input nz-input type="text" [(ngModel)]="detailData.carModel" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
<sv label="行驶证注册日期">
{{ detailData?.driverLicenseRegisterTime }}
<input nz-input type="text" [(ngModel)]="detailData.driverLicenseRegisterTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
</sv-container>
<sv-container col="2">
<sv label="行驶证到期日">
{{ detailData?.driverLicenseEndTime }}
<input nz-input type="text" [(ngModel)]="detailData.driverLicenseEndTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
<sv label="行驶证签发机关">
{{ detailData?.driverLicenseSigningOrg }}
<input nz-input type="text" [(ngModel)]="detailData.driverLicenseSigningOrg" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
</sv-container>
<sv-container col="3">
<sv label="行驶证发证日期">
{{ detailData?.driverLicenseGetTime }}
<input nz-input type="text" [(ngModel)]="detailData.driverLicenseGetTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
<sv label="车辆识别代码">
{{ detailData?.carDistinguishCode }}
<input nz-input type="text" [(ngModel)]="detailData.carDistinguishCode" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
<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-container>
<sv-container col="3">
<sv label="载重（吨）">
{{ detailData?.carLoad }}
<input nz-input type="text" [(ngModel)]="detailData.carLoad" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
<sv label="整备质量">
{{ detailData?.curbWeight }}
<input nz-input type="text" [(ngModel)]="detailData.curbWeight" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
<sv label="所有人">
{{ detailData?.carOwner }}
<input nz-input type="text" [(ngModel)]="detailData.carOwner" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
</sv-container>
<sv-container col="1">
<sv label="自有载具">
{{ detailData?.contactsName }}
<input nz-input type="text" [(ngModel)]="detailData.contactsName" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
<sv label="行驶证照片">
<app-imagelist [imgList]="[detailData?.certificatePhotoFront,detailData?.certificatePhotoBack,detailData?.certificatePhotoFrontWatermark,detailData?.certificatePhotoBackWatermark]"></app-imagelist>
<!-- <app-imagelist [imgList]="[detailData?.certificatePhotoFront,detailData?.certificatePhotoBack,detailData?.certificatePhotoFrontWatermark,detailData?.certificatePhotoBackWatermark]"></app-imagelist> -->
<ng-container
*ngTemplateOutlet="uploadTemplate;context:{image:detailData?.certificatePhotoFront,key:'carFrontPhotoWatermark'}">
</ng-container>
</sv>
</sv-container>
<nz-divider></nz-divider>
<sv-container col="3" class="mt16">
<sv-title style="font-weight: 700;">道路运输证信息</sv-title>
<sv label="道路运输证号">
{{ detailData?.roadTransportNo }}
<input nz-input type="text" [(ngModel)]="detailData.roadTransportNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
<sv label="经营许可证号">
{{ detailData?.roadTransportLicenceNo }}
<input nz-input type="text" [(ngModel)]="detailData.roadTransportLicenceNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
<sv label="发证日期">
{{ detailData?.roadTransportStartTime }}
<input nz-input type="text" [(ngModel)]="detailData.roadTransportStartTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
<sv label="有效期至">
{{detailData?.roadTransportEndTime}}
<input nz-input type="text" [(ngModel)]="detailData.roadTransportEndTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'">
</sv>
<sv label="道路运输证照片">
<app-imagelist [imgList]="[detailData?.roadTransportPhoto,detailData?.roadTransportPhotoWatermark ]"></app-imagelist>
<!-- <app-imagelist [imgList]="[detailData?.roadTransportPhoto,detailData?.roadTransportPhotoWatermark ]"></app-imagelist> -->
<ng-container
*ngTemplateOutlet="uploadTemplate;context:{image:detailData?.certificatePhotoFront,key:'carFrontPhotoWatermark'}">
</ng-container>
</sv>
</sv-container>
<nz-divider></nz-divider>
@ -152,4 +202,26 @@
<button nz-button nzType="default" (click)="handleCancel('2')">取消</button>
<button nz-button nzType="primary" (click)="handleOK()">确定</button>
</ng-template>
</nz-modal>
</nz-modal>
<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>

72
src/app/routes/vehicle/components/list/detail/detail.component.ts
View File

@ -7,6 +7,9 @@ import { NzMessageService } from 'ng-zorro-antd/message';
import { VehicleService } from '../../../services/vehicle.service';
import { VehicleComponentsListEditComponent } from '../edit/edit.component';
import { VehicleImgViewComponent } from '../img-view/img-view.component';
import { apiConf } from '@conf/api.conf';
import { NzModalService } from 'ng-zorro-antd/modal';
import { ImageViewComponent } from 'src/app/shared/components/imagelist';
@Component({
selector: 'app-supplier-components-list-view',
@ -19,17 +22,21 @@ export class VehicleComponentsListDetailComponent implements OnInit {
@ViewChild('st', { static: false }) st!: STComponent;
isShow = false;
isVisible = false;
isEdit = false;
modalTitle = '有效期';
modalName = '';
ui!: SFUISchema;
columns!: STColumn[];
detailData: any;
uploadURl = apiConf.waterFileUpload;
schema!: SFSchema;
@ViewChild('sf', { static: false }) sf!: SFComponent;
schema1!: SFSchema;
@ViewChild('sf1', { static: false }) sf1!: SFComponent;
validData: any = ['suppliersType'];
suppliersData: any = {};
disabledUpload = false;
detailData: any = this.getDetailList();
tempalateData :any;
constructor(
private http: _HttpClient,
@ -38,6 +45,7 @@ export class VehicleComponentsListDetailComponent implements OnInit {
private route: ActivatedRoute,
private modalHelper: ModalHelper,
private msgSrv: NzMessageService,
private nzModalService: NzModalService
) {}
ngOnInit() {
@ -145,6 +153,7 @@ export class VehicleComponentsListDetailComponent implements OnInit {
this.service.request(`${this.service.$api_get_operate_get}`, params).subscribe((res) => {
console.log(res)
this.detailData = res;
this.tempalateData = res;
})
}
@ -177,4 +186,65 @@ export class VehicleComponentsListDetailComponent implements OnInit {
handleOK() {
}
ratify() {
this.isEdit = true;
}
changeUpload({ file, fileList, type }: any, key: string) {
console.log({ file, fileList, type });
if (type === 'success') {
this.detailData[key] = file.response.data.fullFileWatermarkPath;
}
}
deleteImg(key: string) {
this.nzModalService.warning({
nzTitle: '是否确认删除该图片',
nzOnOk: () => {
this.disabledUpload = true;
this.detailData[key] = '';
setTimeout(() => {
this.disabledUpload = false;
}, 100);
}
});
}
showImg(url: any) {
const params = {
imgList: [url],
index: 0
};
this.nzModalService.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
}
reset() {
this.detailData = { ...this.tempalateData };
this.isEdit = false;
}
save() {
this.isEdit = false;
}
private initData() {
return {
carNo: '',
carNoColor: '',
carModel: '',
carLength: '',
archivesNo: '',
driverLicenseSigningOrg: '',
carDistinguishCode: '',
carLoad: '',
curbWeight: '',
roadTransportNo: '',
roadTransportLicenceNo: '',
carOwner: '',
isTrailer: null,
useNature: null,
driverLicenseRegisterTime: null,
driverLicenseGetTime: null,
driverLicenseEndTime: null,
roadTransportStartTime: null,
roadTransportEndTime: null,
carFrontPhotoWatermark: ''
};
}
}

2
src/app/routes/vehicle/vehicle.module.ts
View File

@ -23,7 +23,7 @@ const COMPONENTS = [
VehicleComponentsListEditComponent,
VehicleImgViewComponent,
VehicleComponentsAuditComponent,
VehicleComponentsAuditDetailComponent
VehicleComponentsAuditDetailComponent,
];
@NgModule({