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

页面优化

Browse Source
This commit is contained in:
潘晓云
2022-05-16 15:21:29 +08:00
parent ee141d1248
commit 8802b49c95
1 changed files with 279 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<ng-container> <ng-container>
<!-- 页头 --> <!-- 页头 -->
<page-header-wrapper [logo]="logo" title="车辆详情" [content]="content"> <page-header-wrapper [logo]="logo" title="车辆详情">
<ng-template #logo> <ng-template #logo>
<button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()"> <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
<i nz-icon nzType="left" nzTheme="outline"></i> <i nz-icon nzType="left" nzTheme="outline"></i>
@ -22,8 +22,12 @@
</sv-title> </sv-title>
</sv-container> </sv-container>
<div class="font-weight-blod text-md detail-title">
<a class="sign"></a>
<span>车辆基础信息</span>
</div>
<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="车牌号" col="1"> <sv label="车牌号" col="1">
<div style="display: flex;"> <div style="display: flex;">
<input nz-input type="text" [(ngModel)]="detailData.carNo" [readonly]="!isEdit" [nzBorderless]="!isEdit" <input nz-input type="text" [(ngModel)]="detailData.carNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
@ -48,8 +52,8 @@
</nz-select> </nz-select>
</sv> </sv>
<sv label="车辆类型"> <sv label="车辆类型">
<input nz-input type="text" [(ngModel)]="detailData.carModel ? detailData.carModel : detailData.carModelLabel" [readonly]="!isEdit" [nzBorderless]="!isEdit" <input nz-input type="text" [(ngModel)]="detailData.carModel ? detailData.carModel : detailData.carModelLabel"
[placeholder]="isEdit ? '' : '-'" /> [readonly]="!isEdit" [nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
<!-- <nz-select *ngIf="detailData.carModel ? detailData.carModel : detailData.carModelLabel" [(ngModel)]="detailData.carModel ? detailData.carModel : detailData.carModelLabel" <!-- <nz-select *ngIf="detailData.carModel ? detailData.carModel : detailData.carModelLabel" [(ngModel)]="detailData.carModel ? detailData.carModel : detailData.carModelLabel"
[nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit" [nzShowArrow]="isEdit" [nzDisabled]="!isEdit"> [nzPlaceHolder]="isEdit ? '' : '-'" [nzBorderless]="!isEdit" [nzShowArrow]="isEdit" [nzDisabled]="!isEdit">
<nz-option *ngFor="let i of contencarModel" [nzLabel]="i.label" [nzValue]="i.value"></nz-option> <nz-option *ngFor="let i of contencarModel" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
@ -97,8 +101,113 @@
</ng-template> </ng-template>
</page-header-wrapper> </page-header-wrapper>
<nz-card> <nz-card>
<div>
<div class="mb-xs common-order-header" nz-row>
<div style="display: flex;">
<button nz-button nzType="primary" style="background-color: green;" nzSize="small"
*ngIf="detailData.networkStatus">
</button>
<button *ngIf="!detailData.networkStatus" nz-button nzType="primary" nzSize="small" nzDanger>未入网</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)="ratify()" acl
acl-ability="VEHICLE-LIST-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>
<span>车辆基础信息</span>
</div>
<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="车牌号" col="1">
<div style="display: flex;">
<input nz-input type="text" [(ngModel)]="detailData.carNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'" />
<!-- <div style="display: flex;">
<div *ngIf="detailData.networkStatus"> <span
style="height: 5px; width: 5px; border-radius: 50%; background-color: green;display: inline-block;"></span>
已入网</div>
<div *ngIf="!detailData.networkStatus"><span
style="height: 5px; width: 5px; border-radius: 50%; background-color: red;display: inline-block;"></span>未入网
</div>
</div> -->
</div>
</sv>
<sv label="车牌颜色">
<!-- <input nz-input type="text" [(ngModel)]="detailData.carNoColor" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'"> -->
<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="车辆类型">
<input nz-input type="text" [(ngModel)]="detailData.carModel ? detailData.carModel : detailData.carModelLabel"
[readonly]="!isEdit" [nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
<!-- <nz-select *ngIf="detailData.carModel ? detailData.carModel : detailData.carModelLabel" [(ngModel)]="detailData.carModel ? detailData.carModel : detailData.carModelLabel"
[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> -->
</sv>
<sv label="车长(米)">
<!-- <input nz-input type="text" [(ngModel)]="detailData.carLength" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit?'':'-'"> -->
<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.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 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-container>
<sv-container col="1">
<sv label="车头照">
<!-- <app-imagelist [imgList]="[detailData?.carFrontPhotoWatermark, detailData?.carFrontPhotoWatermark]"></app-imagelist> -->
<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">
<!-- <sv-title style="font-weight: 700">行驶证信息</sv-title> -->
<sv label="档案编号"> <sv label="档案编号">
<input nz-input type="text" [(ngModel)]="detailData.archivesNo" [readonly]="!isEdit" [nzBorderless]="!isEdit" <input nz-input type="text" [(ngModel)]="detailData.archivesNo" [readonly]="!isEdit" [nzBorderless]="!isEdit"
[placeholder]="isEdit ? '' : '-'" /> [placeholder]="isEdit ? '' : '-'" />
@ -179,8 +288,8 @@
</nz-date-picker> </nz-date-picker>
</sv> </sv>
<sv label="总质量"> <sv label="总质量">
<input nz-input type="text" [(ngModel)]="detailData.carTotalLoad" [readonly]="!isEdit" [nzBorderless]="!isEdit" <input nz-input type="text" [(ngModel)]="detailData.carTotalLoad" [readonly]="!isEdit"
[placeholder]="isEdit ? '' : '-'" /> [nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
</sv> </sv>
<sv label="所有人"> <sv label="所有人">
<ng-container *ngIf="isEdit; else carOwnerTemplate"> <ng-container *ngIf="isEdit; else carOwnerTemplate">
@ -206,9 +315,21 @@
</ng-container> </ng-container>
</sv> </sv>
</sv-container> </sv-container>
<nz-divider></nz-divider> </div>
<div class="mb-lg">
<div class="font-weight-blod text-md detail-title">
<a class="sign"></a>
<span>道路运输证信息</span>
<label *ngIf="!detailData?.roadTransportVerificationStatus" style="color: #ff4d4f"><i nz-icon
nzType="info-circle" nzTheme="fill" class="mr-xs"></i>验证不通过
</label>
<label *ngIf="detailData?.roadTransportVerificationStatus" style="color: #52c41a"><i nz-icon
nzType="check-circle" nzTheme="fill" class="mr-xs"></i>验证通过
</label>
</div>
<sv-container col="3" class="mt16"> <sv-container col="3" class="mt16">
<sv-title style="font-weight: 700">
<!-- <sv-title style="font-weight: 700">
<p style="margin-bottom: 0"> <p style="margin-bottom: 0">
道路运输证信息 道路运输证信息
<label *ngIf="!detailData?.roadTransportVerificationStatus" style="color: #ff4d4f"><i nz-icon <label *ngIf="!detailData?.roadTransportVerificationStatus" style="color: #ff4d4f"><i nz-icon
@ -218,7 +339,7 @@
nzType="check-circle" nzTheme="fill" class="mr-xs"></i>验证通过 nzType="check-circle" nzTheme="fill" class="mr-xs"></i>验证通过
</label> </label>
</p> </p>
</sv-title> </sv-title> -->
<sv label="道路运输证号"> <sv label="道路运输证号">
<input nz-input type="text" [(ngModel)]="detailData.roadTransportNo" [readonly]="!isEdit" <input nz-input type="text" [(ngModel)]="detailData.roadTransportNo" [readonly]="!isEdit"
[nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" /> [nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" />
@ -250,10 +371,15 @@
</ng-container> </ng-container>
</sv> </sv>
</sv-container> </sv-container>
<nz-divider></nz-divider> </div>
<sv-container col="2" class="mt16"> <div class="mb-lg">
<div class="font-weight-blod text-md detail-title">
<a class="sign"></a>
<span>认证司机</span>
</div>
<!-- <sv-container col="2" class="mt16">
<sv-title style="font-weight: 700">认证司机</sv-title> <sv-title style="font-weight: 700">认证司机</sv-title>
</sv-container> </sv-container> -->
<st #st [bordered]="true" [columns]="columns" [scroll]="{ x: '1200px' }" <st #st [bordered]="true" [columns]="columns" [scroll]="{ x: '1200px' }"
[data]="service.$api_get_queryDriverByCarId" [req]="{ method: 'POST', allInBody: true, params: reqParams }" [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" [res]="{ reName: { list: 'data', total: 'data' } }" [ngStyle]="{ margin: '1rem 0' }" multiSort size="small"
@ -269,7 +395,9 @@
</div> </div>
</ng-template> </ng-template>
</st> </st>
</div>
</nz-card> </nz-card>
</ng-container> </ng-container>
<nz-modal [(nzVisible)]="isVisible" [nzWidth]="600" [nzFooter]="nzModalFooterEvaluate" (nzOnOk)="handleOK()" <nz-modal [(nzVisible)]="isVisible" [nzWidth]="600" [nzFooter]="nzModalFooterEvaluate" (nzOnOk)="handleOK()"