375 lines
18 KiB
HTML
375 lines
18 KiB
HTML
<!-- 页头 -->
|
|
<page-header-wrapper [logo]="logo" title="车辆详情" [ngClass]="{ affix: scrollTop > 210 }">
|
|
<ng-template #logo>
|
|
<button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
|
|
<i nz-icon nzType="left" nzTheme="outline"></i>
|
|
</button>
|
|
</ng-template>
|
|
<ng-template #content>
|
|
<sv-container col="3" class="new-sv-container">
|
|
<h2>车牌号：{{ detailData?.carNo }}
|
|
</h2>
|
|
<sv-title style="font-weight: 700">
|
|
<!-- <span *ngIf="detailData?.approvalStatus === 1 || detailData?.approvalStatus === '1'">未上传</span>
|
|
<span *ngIf="detailData?.approvalStatus === 0 || detailData?.approvalStatus === '0'">草稿</span>
|
|
<span *ngIf="detailData?.approvalStatus === 10 || detailData?.approvalStatus === '10'">待审核</span>
|
|
<span *ngIf="detailData?.approvalStatus === 20 || detailData?.approvalStatus === '20'">已审核</span>
|
|
<span *ngIf="detailData?.approvalStatus === 30 || detailData?.approvalStatus === '30'">已驳回</span>
|
|
<span *ngIf="detailData?.approvalStatus === 40 || detailData?.approvalStatus === '40'">证件过期</span> -->
|
|
<div style="float: right" *ngIf="detailData?.approvalStatus !== 20 && detailData?.approvalStatus !== '20'">
|
|
<ng-container *ngIf="!isEdit">
|
|
<button nz-button nzType="default" nzDanger (click)="approveDriver()" acl
|
|
acl-ability="VEHICLE-AUDIT-DETAIL-pass">通过</button>
|
|
<button nz-button nzType="default" nzDanger (click)="rejectedDriver()" acl
|
|
acl-ability="VEHICLE-AUDIT-DETAIL-reject"
|
|
*ngIf="detailData?.approvalStatus === 10 || detailData?.approvalStatus === '10'">驳回</button>
|
|
<button nz-button nzType="default" nzDanger (click)="ratify()" acl
|
|
acl-ability="VEHICLE-AUDIT-DETAIL-save">修改</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 label="申请时间">
|
|
{{ detailData?.createTime }}
|
|
</sv>
|
|
<sv label="录入人员">
|
|
{{ detailData?.saveUser }}
|
|
</sv>
|
|
</sv-container>
|
|
</ng-template>
|
|
</page-header-wrapper>
|
|
|
|
<nz-card [class]="isEdit ? 'edit-box' : 'readOnly-box'" [ngClass]="'mb0'" [nzBorderless]="true">
|
|
<div>
|
|
<div class="mb-xs common-order-header" nz-row>
|
|
<div style="display: flex;">
|
|
<button nz-button nzType="primary" nzSize="small" nzDanger>{{ carStatus[detailData?.approvalStatus] }}</button>
|
|
<b class="ml-md" style="font-size: 18px;padding-right: 10px;">车牌号: {{ detailData?.carNo }}</b>
|
|
</div>
|
|
<div>
|
|
<ng-container *ngIf="!isEdit">
|
|
<button nz-button nzType="default" nzDanger (click)="approveDriver()" acl
|
|
acl-ability="VEHICLE-AUDIT-DETAIL-pass">通过</button>
|
|
<button nz-button nzType="default" nzDanger (click)="rejectedDriver()" acl
|
|
acl-ability="VEHICLE-AUDIT-DETAIL-reject"
|
|
*ngIf="detailData?.approvalStatus === 10 || detailData?.approvalStatus === '10'">驳回</button>
|
|
<button nz-button nzType="default" nzDanger (click)="ratify()" acl
|
|
acl-ability="VEHICLE-AUDIT-DETAIL-save">修改</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>
|
|
</div>
|
|
</div>
|
|
<nz-divider class="divider-margin"></nz-divider>
|
|
<div class="mb-lg">
|
|
<div class="font-weight-blod text-md detail-title">
|
|
<a class="sign"></a>
|
|
<p style="margin-bottom: 0">
|
|
车辆基础信息
|
|
<label *ngIf="detailData?.carInfoVerifyResult" style="color: #ff4d4f"><i nz-icon nzType="info-circle"
|
|
nzTheme="fill" class="mr-xs"></i>验证不通过: <span nz-popover [nzPopoverTitle]="titleTemplate1" [nzPopoverContent]="contentTemplate1">
|
|
查看原因
|
|
<ng-template #titleTemplate1>
|
|
原因
|
|
</ng-template>
|
|
<ng-template #contentTemplate1>
|
|
{{detailData?.carInfoVerifyResult}}
|
|
</ng-template>
|
|
</span>
|
|
</label>
|
|
</p>
|
|
</div>
|
|
<sv-container col="3" labelWidth="140">
|
|
<sv label="车牌颜色">
|
|
<nz-select [(ngModel)]="detailData.carNoColor" [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit"
|
|
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
|
|
<nz-option *ngFor="let i of contenCarNoColor" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
|
|
</nz-select>
|
|
</sv>
|
|
<sv label="车辆类型">
|
|
<!-- <nz-select [(ngModel)]="detailData.carModel" [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit"
|
|
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
|
|
<nz-option *ngFor="let i of contencarModel" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
|
|
</nz-select> -->
|
|
<input nz-input type="text" [(ngModel)]="detailData.carModel ? detailData.carModel : detailData.carModelLabel" [readonly]="!isEdit" [nzBorderless]="!isEdit"
|
|
[placeholder]="isEdit ? '' : '-'" />
|
|
</sv>
|
|
<sv label="车长">
|
|
<nz-select [(ngModel)]="detailData.carLength" [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit"
|
|
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
|
|
<nz-option *ngFor="let i of contenCarLength" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
|
|
</nz-select>
|
|
</sv>
|
|
<sv label="车辆能源类型">
|
|
<nz-select [(ngModel)]="detailData.carEnergyType" [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit"
|
|
[nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
|
|
<nz-option *ngFor="let i of contenCarEnergy" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
|
|
</nz-select>
|
|
</sv>
|
|
<sv label="是否为挂车">
|
|
<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 label="是否挂靠">
|
|
<nz-select [(ngModel)]="detailData.isSelf" [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" class="mt-md" labelWidth="140">
|
|
<sv label="车头照">
|
|
<ng-container *ngTemplateOutlet="
|
|
uploadTemplate;
|
|
context: { image: detailData?.carFrontPhotoWatermark, key: 'carFrontPhotoWatermark', hover: 'PhotoWatermark2' }
|
|
">
|
|
</ng-container>
|
|
</sv>
|
|
</sv-container>
|
|
</div>
|
|
<div class="mb-lg">
|
|
<div class="font-weight-blod text-md detail-title">
|
|
<a class="sign"></a>
|
|
<span>行驶证信息</span>
|
|
</div>
|
|
<sv-container col="3" labelWidth="140" class="new-sv-container">
|
|
<sv label="档案编号">
|
|
<input nz-input type="text" [(ngModel)]="detailData.archivesNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
|
|
[placeholder]="isEdit ? '' : '-'" />
|
|
</sv>
|
|
<sv label="行驶证注册日期">
|
|
<!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseRegisterTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
|
|
[placeholder]="isEdit?'':'-'"> -->
|
|
<nz-date-picker [(ngModel)]="detailData.driverLicenseRegisterTime" [nzDisabled]="!isEdit"
|
|
[nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit ? 'calendar' : ''">
|
|
</nz-date-picker>
|
|
</sv>
|
|
</sv-container>
|
|
</div>
|
|
|
|
<div class="mb-lg">
|
|
<div class="font-weight-blod text-md detail-title">
|
|
<a class="sign"></a>
|
|
<p style="margin-bottom: 0">
|
|
行驶证信息
|
|
<label *ngIf="detailData?.driverLicenseVerifyResult" style="color: #ff4d4f"><i nz-icon nzType="info-circle"
|
|
nzTheme="fill" class="mr-xs"></i>验证不通过: <span nz-popover [nzPopoverTitle]="titleTemplate2" [nzPopoverContent]="contentTemplate2">
|
|
查看原因
|
|
<ng-template #titleTemplate2>
|
|
原因
|
|
</ng-template>
|
|
<ng-template #contentTemplate2>
|
|
{{detailData?.driverLicenseVerifyResult}}
|
|
</ng-template>
|
|
</span>
|
|
</label>
|
|
</p>
|
|
</div>
|
|
<sv-container col="3" class="new-sv-container" labelWidth="140">
|
|
<sv label="发动机号码">
|
|
<input
|
|
nz-input
|
|
type="text"
|
|
[(ngModel)]="detailData.engineNo"
|
|
[readonly]="!isEdit"
|
|
[nzBorderless]="!isEdit"
|
|
[placeholder]="isEdit ? '' : '-'"
|
|
/>
|
|
</sv>
|
|
<sv label="行驶证到期日">
|
|
<!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseEndTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
|
|
[placeholder]="isEdit?'':'-'"> -->
|
|
<nz-date-picker [(ngModel)]="detailData.driverLicenseEndTime" [nzDisabled]="!isEdit"
|
|
[nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit ? 'calendar' : ''">
|
|
</nz-date-picker>
|
|
</sv>
|
|
<sv label="行驶证签发机关">
|
|
<input nz-input style="width: '300px'" type="text" [(ngModel)]="detailData.driverLicenseSigningOrg"
|
|
[readonly]="!isEdit" [nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
|
|
</sv>
|
|
</sv-container>
|
|
|
|
<sv-container class="new-sv-container" labelWidth="140" col="3">
|
|
<sv label="行驶证发证日期">
|
|
<!-- <input nz-input type="text" [(ngModel)]="detailData.driverLicenseGetTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
|
|
[placeholder]="isEdit?'':'-'"> -->
|
|
<nz-date-picker [(ngModel)]="detailData.driverLicenseGetTime" [nzDisabled]="!isEdit"
|
|
[nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit ? 'calendar' : ''">
|
|
</nz-date-picker>
|
|
</sv>
|
|
<sv label="车辆识别代码">
|
|
<input nz-input type="text" [(ngModel)]="detailData.carDistinguishCode" [readonly]="!isEdit"
|
|
[nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
|
|
</sv>
|
|
<sv label="使用性质">
|
|
<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 class="new-sv-container" labelWidth="140" col="3">
|
|
<sv label="核定载质量（吨）">
|
|
<input nz-input type="text" [(ngModel)]="detailData.carLoad" [readonly]="!isEdit" [nzBorderless]="!isEdit"
|
|
[placeholder]="isEdit ? '' : '-'" />
|
|
</sv>
|
|
<sv label="整备质量">
|
|
<input nz-input type="text" [(ngModel)]="detailData.curbWeight" [readonly]="!isEdit" [nzBorderless]="!isEdit"
|
|
[placeholder]="isEdit ? '' : '-'" />
|
|
</sv>
|
|
<sv label="报废日期">
|
|
<nz-date-picker
|
|
[(ngModel)]="detailData.scrapTime"
|
|
[nzDisabled]="!isEdit"
|
|
[nzPlaceHolder]="isEdit ? '' : '-'"
|
|
[nzBorderless]="!isEdit"
|
|
[nzSuffixIcon]="isEdit ? 'calendar' : ''"
|
|
>
|
|
</nz-date-picker>
|
|
</sv>
|
|
<sv label="总质量">
|
|
<input nz-input type="text" [(ngModel)]="detailData.carTotalLoad" [readonly]="!isEdit" [nzBorderless]="!isEdit"
|
|
[placeholder]="isEdit ? '' : '-'" />
|
|
</sv>
|
|
<sv label="所有人">
|
|
<input nz-input style="width: '300px'" type="text" [(ngModel)]="detailData.carOwner" [readonly]="!isEdit"
|
|
[nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
|
|
</sv>
|
|
</sv-container>
|
|
<sv-container class="new-sv-container" labelWidth="140" col="1">
|
|
<sv label="行驶证照片">
|
|
<ng-container *ngTemplateOutlet="
|
|
uploadTemplate;
|
|
context: { image: detailData?.certificatePhotoFrontWatermark, key: 'certificatePhotoFrontWatermark', hover: 'FrontWatermark' }
|
|
">
|
|
</ng-container>
|
|
<ng-container *ngTemplateOutlet="
|
|
uploadTemplate;
|
|
context: { image: detailData?.certificatePhotoBackWatermark, key: 'certificatePhotoBackWatermark', hover: 'BackWatermark' }
|
|
">
|
|
</ng-container>
|
|
</sv>
|
|
</sv-container>
|
|
</div>
|
|
<div class="mb-lg">
|
|
<div class="font-weight-blod text-md detail-title">
|
|
<a class="sign"></a>
|
|
<p style="margin-bottom: 0">
|
|
道路运输证信息
|
|
<label *ngIf="!detailData?.roadTransportVerificationStatus" style="color: #ff4d4f"><i nz-icon nzType="info-circle"
|
|
nzTheme="fill" class="mr-xs"></i>验证不通过：<span nz-popover [nzPopoverTitle]="titleTemplate3" [nzPopoverContent]="contentTemplate3">
|
|
查看原因
|
|
<ng-template #titleTemplate3>
|
|
原因
|
|
</ng-template>
|
|
<ng-template #contentTemplate3>
|
|
{{detailData?.roadTransportVerifyResult}}
|
|
</ng-template>
|
|
</span>
|
|
</label>
|
|
<label *ngIf="detailData?.roadTransportVerificationStatus" style="color: #52c41a"><i nz-icon nzType="check-circle"
|
|
nzTheme="fill" class="mr-xs"></i>验证通过
|
|
</label>
|
|
</p>
|
|
</div>
|
|
<sv-container col="3" class="mt16 new-sv-container" labelWidth="140">
|
|
<sv label="道路运输证号">
|
|
<input nz-input type="text" [(ngModel)]="detailData.roadTransportNo" [readonly]="!isEdit"
|
|
[nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
|
|
</sv>
|
|
<sv label="经营许可证号">
|
|
<input nz-input type="text" [(ngModel)]="detailData.roadTransportLicenceNo" [readonly]="!isEdit"
|
|
[nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
|
|
</sv>
|
|
<sv label="发证日期">
|
|
<!-- <input nz-input type="text" [(ngModel)]="detailData.roadTransportStartTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
|
|
[placeholder]="isEdit?'':'-'"> -->
|
|
<nz-date-picker [(ngModel)]="detailData.roadTransportStartTime" [nzDisabled]="!isEdit"
|
|
[nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit ? 'calendar' : ''">
|
|
</nz-date-picker>
|
|
</sv>
|
|
<sv label="有效期至">
|
|
<!-- <input nz-input type="text" [(ngModel)]="detailData.roadTransportEndTime" [readonly]="!isEdit" [nzBorderless]="!isEdit"
|
|
[placeholder]="isEdit?'':'-'"> -->
|
|
<nz-date-picker [(ngModel)]="detailData.roadTransportEndTime" [nzDisabled]="!isEdit"
|
|
[nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit ? 'calendar' : ''">
|
|
</nz-date-picker>
|
|
</sv>
|
|
<sv label="道路运输证照片">
|
|
<ng-container *ngTemplateOutlet="
|
|
uploadTemplate;
|
|
context: { image: detailData?.roadTransportPhotoWatermark, key: 'roadTransportPhotoWatermark', hover: 'Watermark' }
|
|
">
|
|
</ng-container>
|
|
</sv>
|
|
</sv-container>
|
|
</div>
|
|
<div class="mb-lg">
|
|
<div class="font-weight-blod text-md detail-title">
|
|
<a class="sign"></a>
|
|
<span>认证司机</span>
|
|
</div>
|
|
<st #st [bordered]="true" [columns]="columns" [scroll]="{x: '1400px'}" [data]="service.$api_get_queryDriverByCarId"
|
|
[req]="{ method: 'POST', allInBody: true, params: reqParams }" [res]="{ reName: { list: 'data', total: 'data' } }"
|
|
[ngStyle]="{ margin: '1rem 0' }" multiSort size="small" [page]="{ show: false }">
|
|
<ng-template st-row="auditStatusEnum" let-item let-index="index">
|
|
<div>
|
|
<span *ngIf="item?.auditStatusEnum === -1 || item?.auditStatusEnum === '-1'">未上传</span>
|
|
<span *ngIf="item?.auditStatusEnum === 0 || item?.auditStatusEnum === '0'">草稿</span>
|
|
<span *ngIf="item?.auditStatusEnum === 10 || item?.auditStatusEnum === '10'">待审核</span>
|
|
<span *ngIf="item?.auditStatusEnum === 20 || item?.auditStatusEnum === '20'">已审核</span>
|
|
<span *ngIf="item?.auditStatusEnum === 30 || item?.auditStatusEnum === '30'">已驳回</span>
|
|
<span *ngIf="item?.auditStatusEnum === 40 || item?.auditStatusEnum === '40'">证件过期</span>
|
|
</div>
|
|
</ng-template>
|
|
</st>
|
|
</div>
|
|
</nz-card>
|
|
|
|
<ng-template #redectModal>
|
|
<div nz-row nzGutter="8">
|
|
<div nz-col nzSpan="24" se-container [labelWidth]="140">
|
|
<se [col]="1" label="车牌号">
|
|
{{ detailData?.carNo }}
|
|
</se>
|
|
<se [col]="1" label="备注" required>
|
|
<textarea nz-input rows="3" style="margin-left: 14px" [(ngModel)]="approvalOpinion"></textarea>
|
|
</se>
|
|
</div>
|
|
</div>
|
|
</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]="false ? '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 (click)="showImg(image)" [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>
|