This commit is contained in:
Taric Xin
2021-12-15 16:32:11 +08:00
parent 3485744f47
commit 7ec9e03984
9 changed files with 563 additions and 218 deletions

View File

@ -1,66 +1,66 @@
<ng-container>
<!-- 页头 -->
<page-header-wrapper [logo]="logo" [title]="'司机详情'" [content]="content">
<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>
<nz-skeleton [nzLoading]="service.http.loading">
<div class="user-info">
<img [src]="userDetail?.avatar" />
<div style="flex: 1">
<div style="display: flex;">
<p style="padding-right: 80px; width: 400px;">{{ userDetail?.name }}</p>
<nz-badge nzStatus="error" nzText="正常" *ngIf="userDetail?.stateLocked"></nz-badge>
<nz-badge nzStatus="warning" nzText="冻结" *ngIf="!userDetail?.stateLocked"></nz-badge>
</div>
<div style="display: flex;">
<p style="padding-right: 80px; width: 400px;">手机号:{{ userDetail?.phone }}
</p>
<p>注册时间:{{ userDetail?.createTime }}</p>
</div>
<!-- 页头 -->
<page-header-wrapper [logo]="logo" [title]="'司机详情'" [content]="content">
<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>
<nz-skeleton [nzLoading]="service.http.loading">
<div class="user-info">
<img [src]="userDetail?.avatar" />
<div style="flex: 1">
<div style="display: flex;">
<p style="padding-right: 80px; width: 400px;">{{ userDetail?.name }}</p>
<nz-badge nzStatus="error" nzText="正常" *ngIf="userDetail?.stateLocked"></nz-badge>
<nz-badge nzStatus="warning" nzText="冻结" *ngIf="!userDetail?.stateLocked"></nz-badge>
</div>
<div style="display: flex;">
<p style="padding-right: 80px; width: 400px;">手机号:{{ userDetail?.phone }}
</p>
<p>注册时间:{{ userDetail?.createTime }}</p>
</div>
<div style="float: right;margin-right: 24px;">
<button [nzLoading]="service.http.loading" nz-button nzType="primary" nzGhost nz-popconfirm
[nzPopconfirmTitle]="enable" (nzOnConfirm)="userAction(1)" nzPopconfirmPlacement="bottomRight">
启用
</button>
<button [nzLoading]="service.http.loading" nz-button nzDanger nz-popconfirm [nzPopconfirmTitle]="frozen"
(nzOnConfirm)="userAction(0)" nzPopconfirmPlacement="bottomRight">
冻结
</button>
</div>
<div style="float: right;margin-right: 24px;">
<button [nzLoading]="service.http.loading" nz-button nzType="primary" nzGhost nz-popconfirm
[nzPopconfirmTitle]="enable" (nzOnConfirm)="userAction(1)" nzPopconfirmPlacement="bottomRight">
启用
</button>
<button [nzLoading]="service.http.loading" nz-button nzDanger nz-popconfirm [nzPopconfirmTitle]="frozen"
(nzOnConfirm)="userAction(0)" nzPopconfirmPlacement="bottomRight">
冻结
</button>
</div>
</div>
</nz-skeleton>
</ng-template>
<ng-template #frozen>
<div class="ant-popover-message">
<i nz-icon nzType="info-circle" nzTheme="fill"></i>
<div class="ant-popover-message-title ng-star-inserted self-ant-popover-title" style="font-size: 16px">确定冻结该企业吗?
</div>
<div class="ant-popover-message-title ng-star-inserted">
停用后,该企业将被限制使用,不限于访问受限、无法发布货源等,请谨慎操作
</div>
</div>
</ng-template>
<ng-template #enable>
<div class="ant-popover-message">
<i nz-icon nzType="info-circle" nzTheme="fill"></i>
<div class="ant-popover-message-title ng-star-inserted self-ant-popover-title" style="font-size: 16px">确定启用该企业吗?
</div>
<div class="ant-popover-message-title ng-star-inserted">
启用后,该企业将恢复正常使用功能,请再次确认
</div>
</nz-skeleton>
</ng-template>
<ng-template #frozen>
<div class="ant-popover-message">
<i nz-icon nzType="info-circle" nzTheme="fill"></i>
<div class="ant-popover-message-title ng-star-inserted self-ant-popover-title" style="font-size: 16px">确定冻结该企业吗?
</div>
</ng-template>
</page-header-wrapper>
<div class="ant-popover-message-title ng-star-inserted">
停用后,该企业将被限制使用,不限于访问受限、无法发布货源等,请谨慎操作
</div>
</div>
</ng-template>
<ng-template #enable>
<div class="ant-popover-message">
<i nz-icon nzType="info-circle" nzTheme="fill"></i>
<div class="ant-popover-message-title ng-star-inserted self-ant-popover-title" style="font-size: 16px">确定启用该企业吗?
</div>
<div class="ant-popover-message-title ng-star-inserted">
启用后,该企业将恢复正常使用功能,请再次确认
</div>
</div>
</ng-template>
</page-header-wrapper>
<nz-card [nzLoading]="service.http.loading">
<nz-card [nzLoading]="service.http.loading">
<div [class]="isEditUser?'edit-box':'readOnly-box'">
<sv-container col="2">
<sv-title>个人信息
<label *ngIf="userIdentityDetail?.certificationStatus===1" style="color: #52c41a;"><i nz-icon
@ -70,29 +70,46 @@
nzType="close-circle" nzTheme="fill" class="mr-xs"></i>驳回
</label>
<div style="float: right;">
<button nz-button nzType="default" nzDanger (click)="approveUser()"
*ngIf="userIdentityDetail?.certificationStatus===0">审核通过</button>
<button nz-button nzType="default" nzDanger (click)="rejectedUser()"
*ngIf="userIdentityDetail?.certificationStatus===0">驳回审核</button>
<button nz-button nzType="default" nzDanger *ngIf="userIdentityDetail?.certificationStatus!==1">修改</button>
<ng-container *ngIf="isEditUser; else elseTemplate">
<button [nzLoading]="service.http.loading" nz-button (click)="reset(0)">
取消
</button>
<button [nzLoading]="service.http.loading" nz-button nzDanger (click)="saveUser()">
保存
</button>
</ng-container>
<ng-template #elseTemplate>
<button nz-button nzType="default" nzDanger (click)="approveUser()"
*ngIf="userIdentityDetail?.certificationStatus===0">审核通过</button>
<button nz-button nzType="default" nzDanger (click)="rejectedUser()"
*ngIf="userIdentityDetail?.certificationStatus===0">驳回审核</button>
<button nz-button nzType="default" nzDanger (click)="ratify(0)">修改</button>
</ng-template>
</div>
</sv-title>
<sv label="姓名">
{{ userIdentityDetail?.name }}
<input nz-input type="text" [(ngModel)]="userIdentityDetail.name" [readonly]="!isEditUser"
[nzBorderless]="!isEditUser" [placeholder]="isEditUser?'':'-'">
</sv>
<sv label="身份证号">
{{ userIdentityDetail?.certificateNumber }}
</sv>
</sv-container>
<sv-container col="1">
<sv label="企业授权函">
<app-imagelist
[imgList]="[userIdentityDetail?.certificatePhotoFrontWatermark,userIdentityDetail?.certificatePhotoBackWatermark]">
</app-imagelist>
<input nz-input type="text" [(ngModel)]="userIdentityDetail.certificateNumber" [readonly]="!isEditUser"
[nzBorderless]="!isEditUser" [placeholder]="isEditUser?'':'-'">
</sv>
<sv label="身份证照" col="1">
<div class="d-flex">
<ng-container
*ngTemplateOutlet="uploadTemplate;context:{data:userIdentityDetail,status:isEditUser,key:'certificatePhotoFrontWatermark',key2:'certificatePhotoFront',hover:'certificateBackFront'}">
</ng-container>
<ng-container
*ngTemplateOutlet="uploadTemplate;context:{data:userIdentityDetail,status:isEditUser,key:'certificatePhotoBackWatermark',key2:'certificatePhotoBack',hover:'certificateBack'}">
</ng-container>
</div>
</sv>
</sv-container>
</div>
<nz-divider></nz-divider>
<nz-divider></nz-divider>
<div [class]="isEditDriver?'edit-box':'readOnly-box'">
<sv-container col="3" class="mt16">
<sv-title>驾驶证信息
<label *ngIf="driverDetail?.approvalStatus===20" style="color: #52c41a;"><i nz-icon nzType="check-circle"
@ -102,32 +119,49 @@
nzTheme="fill" class="mr-xs"></i>驳回
</label>
<div style="float: right;">
<button nz-button nzType="default" nzDanger (click)="approveDriver()">审核通过</button>
<button nz-button nzType="default" nzDanger (click)="rejectedDriver()">驳回审核</button>
<button nz-button nzType="default" *ngIf="driverDetail?.approvalStatus!==20" nzDanger
(click)="ratify()">修改</button>
<ng-container *ngIf="isEditDriver;else editDriverButton">
<button [nzLoading]="service.http.loading" nz-button (click)="reset(1)">
取消
</button>
<button [nzLoading]="service.http.loading" nz-button nzDanger (click)="saveDriver()">
保存
</button>
</ng-container>
<ng-template #editDriverButton>
<button *ngIf="driverDetail?.approvalStatus==10" nz-button nzType="default" nzDanger
(click)="approveDriver()">审核通过</button>
<button *ngIf="driverDetail?.approvalStatus==10" nz-button nzType="default" nzDanger
(click)="rejectedDriver()">驳回审核</button>
<button nz-button nzType="default" nzDanger (click)="ratify(1)">修改</button>
</ng-template>
</div>
</sv-title>
<sv label="驾驶证号">
{{ driverDetail?.licenseNo }}
<input nz-input type="text" [(ngModel)]="driverDetail.licenseNo" [readonly]="!isEditDriver"
[nzBorderless]="!isEditDriver" [placeholder]="isEditDriver?'':'-'">
</sv>
<sv label="准驾车型">
{{ driverDetail?.driverModel }}
<input nz-input type="text" [(ngModel)]="driverDetail.driverModel" [readonly]="!isEditDriver"
[nzBorderless]="!isEditDriver" [placeholder]="isEditDriver?'':'-'">
</sv>
<sv label="有效期起">
{{ driverDetail?.validStartTime }}
<nz-date-picker [(ngModel)]="driverDetail.validStartTime" [nzDisabled]="!isEditDriver"
[nzPlaceHolder]="isEditDriver?'':'-'" [nzBorderless]="!isEditDriver"
[nzSuffixIcon]="isEditDriver?'calendar':''"></nz-date-picker>
</sv>
</sv-container>
<sv-container col="2" class="mt16">
<sv label="有效期至">
{{ driverDetail?.validEndTime }}
<span *ngIf="driverDetail?.registrationCapital">万元</span>
<sv label="有效期至" col="3">
<nz-date-picker [(ngModel)]="driverDetail.validEndTime" [nzDisabled]="!isEditDriver" dateFormat="yyyy-MM-dd"
[nzPlaceHolder]="isEditDriver?'':'-'" [nzBorderless]="!isEditDriver"
[nzSuffixIcon]="isEditDriver?'calendar':''"></nz-date-picker>
</sv>
<sv label="驾驶证签发机关">
{{ driverDetail?.signingOrganization }}
<sv label="驾驶证签发机关" col="2">
<input nz-input type="text" [(ngModel)]="driverDetail.signingOrganization" [readonly]="!isEditDriver"
[nzBorderless]="!isEditDriver" [placeholder]="isEditDriver?'':'-'">
</sv>
<sv label="驾驶证照片">
<app-imagelist [imgList]="[detailData?.certificatePhotoWatermark]"></app-imagelist>
<sv label="驾驶证照片" col="1">
<ng-container
*ngTemplateOutlet="uploadTemplate;context:{data:driverDetail,status:isEditDriver,key:'certificatePhotoWatermark',key2:'certificatePhoto',hover:'driverCertificate'}">
</ng-container>
</sv>
</sv-container>
@ -142,101 +176,105 @@
</label>
</sv-title>
<sv label="从业资格证号">
{{ licenseDetail?.licenseNo }}
<input nz-input type="text" [(ngModel)]="licenseDetail.licenseNo" [readonly]="!isEditDriver"
[nzBorderless]="!isEditDriver" [placeholder]="isEditDriver?'':'-'">
</sv>
<sv label="发证日期">
{{ licenseDetail?.validStartTime }}
<nz-date-picker [(ngModel)]="licenseDetail.validStartTime" [nzDisabled]="!isEditDriver"
[nzPlaceHolder]="isEditDriver?'':'-'" [nzBorderless]="!isEditDriver"
[nzSuffixIcon]="isEditDriver?'calendar':''"></nz-date-picker>
</sv>
<sv label="有效期至">
{{ licenseDetail?.validEndTime }}
</sv>
</sv-container>
<sv-container col="1">
<sv label="从业资格证照片">
<app-imagelist [imgList]="[licenseDetail?.certificatePhotoWatermark]"></app-imagelist>
<nz-date-picker [(ngModel)]="licenseDetail.validEndTime" [nzDisabled]="!isEditDriver"
[nzPlaceHolder]="isEditDriver?'':'-'" [nzBorderless]="!isEditDriver"
[nzSuffixIcon]="isEditDriver?'calendar':''"></nz-date-picker>
</sv>
<sv label="从业资格证照片" col="1">
<ng-container
*ngTemplateOutlet="uploadTemplate;context:{data:licenseDetail,status:isEditDriver,key:'certificatePhotoWatermark',key2:'certificatePhoto',hover:'licenseCertificate'}">
</ng-container>
</sv>
</sv-container>
</div>
<nz-divider></nz-divider>
<sv-container col="3" class="mt16">
<sv-title>载具信息</sv-title>
<ng-container *ngFor="let carDatail of carList">
<sv label="车牌号">
{{ carDatail?.carNo }}
</sv>
<sv label="车牌颜色">
{{ carDatail?.carNoColor }}
</sv>
<sv label="车型">
{{ carDatail?.carModel }}
</sv>
<sv label="车长">
{{ carDatail?.carLength }}
</sv>
<sv label="是否为当前车辆">
{{ carDatail?.isDefault?'是':'否' }}
</sv>
<sv label="自有载具">
{{ carDatail?.isSelf?'否':'是' }}
</sv>
<sv label="行驶证照片" col="3">
<app-imagelist
[imgList]="[carDatail?.certificatePhotoFrontWatermark,carDatail?.certificatePhotoBackWatermark]">
</app-imagelist>
</sv>
<sv label="道路运输证照片" col="3">
<app-imagelist [imgList]="[carDatail?.roadTransportPhotoWatermark]"></app-imagelist>
</sv>
<sv label="车头照" col="3">
<app-imagelist [imgList]="[carDatail?.carFrontPhotoWatermark]"></app-imagelist>
</sv>
<nz-divider></nz-divider>
</ng-container>
<nz-divider></nz-divider>
<sv-container col="3" class="mt16">
<sv-title>载具信息</sv-title>
<ng-container *ngFor="let carDatail of carList">
<sv label="车牌号">
{{ carDatail?.carNo }}
</sv>
<sv label="车牌颜色">
{{ carDatail?.carNoColor }}
</sv>
<sv label="车型">
{{ carDatail?.carModel }}
</sv>
<sv label="车长">
{{ carDatail?.carLength }}
</sv>
<sv label="是否为当前车辆">
{{ carDatail?.isDefault?'是':'否' }}
</sv>
<sv label="自有载具">
{{ carDatail?.isSelf?'否':'是' }}
</sv>
<sv label="行驶证照片" col="3">
<app-imagelist [imgList]="[carDatail?.certificatePhotoFrontWatermark,carDatail?.certificatePhotoBackWatermark]">
</app-imagelist>
</sv>
<sv label="道路运输证照片" col="3">
<app-imagelist [imgList]="[carDatail?.roadTransportPhotoWatermark]"></app-imagelist>
</sv>
<sv label="车头照" col="3">
<app-imagelist [imgList]="[carDatail?.carFrontPhotoWatermark]"></app-imagelist>
</sv>
<nz-divider></nz-divider>
</ng-container>
</sv-container>
</sv-container>
<sv-container col="3" class="mt-md">
<sv-title>银行结算信息</sv-title>
<sv label="开户银行">
{{ detailData?.name }}
</sv>
<sv label="银行卡号">
{{ detailData?.certificateNumber }}
</sv>
</sv-container>
<sv-container col="3" class="mt-md">
<sv-title>银行结算信息</sv-title>
<sv label="开户银行">
{{ detailData?.name }}
</sv>
<sv label="银行卡号">
{{ detailData?.certificateNumber }}
</sv>
</sv-container>
<nz-divider></nz-divider>
<sv-container col="3" class="mt16">
<sv-title>服务评级</sv-title>
<sv label="服务评级">
<nz-rate [ngModel]="2" nzDisabled></nz-rate>
</sv>
<sv label="运输效率">
<nz-rate [ngModel]="2" nzDisabled></nz-rate>
</sv>
<sv label="运输安全">
<nz-rate [ngModel]="2" nzDisabled></nz-rate>
</sv>
<sv label="服务质量">
<nz-rate [ngModel]="2" nzDisabled></nz-rate>
</sv>
<sv label="客户满意度">
<nz-rate [ngModel]="2" nzDisabled></nz-rate>
</sv>
<sv label="车辆整洁程度">
<nz-rate [ngModel]="2" nzDisabled></nz-rate>
</sv>
<nz-divider></nz-divider>
<sv-container col="3" class="mt16">
<sv-title>服务评级</sv-title>
<sv label="服务评级">
<nz-rate [ngModel]="2" nzDisabled></nz-rate>
</sv>
<sv label="运输效率">
<nz-rate [ngModel]="2" nzDisabled></nz-rate>
</sv>
<sv label="运输安全">
<nz-rate [ngModel]="2" nzDisabled></nz-rate>
</sv>
<sv label="服务质量">
<nz-rate [ngModel]="2" nzDisabled></nz-rate>
</sv>
<sv label="客户满意度">
<nz-rate [ngModel]="2" nzDisabled></nz-rate>
</sv>
<sv label="车辆整洁程度">
<nz-rate [ngModel]="2" nzDisabled></nz-rate>
</sv>
</sv-container>
</sv-container>
<sv-container col="3" class="mt16">
<sv-title>关联企业</sv-title>
<!-- <st #st [bordered]="true" [columns]="columns" [data]="detailData.goodsList" [ngStyle]="{ margin: '1rem 0' }"
<sv-container col="3" class="mt16">
<sv-title>关联企业</sv-title>
<!-- <st #st [bordered]="true" [columns]="columns" [data]="detailData.goodsList" [ngStyle]="{ margin: '1rem 0' }"
multiSort size="small" [page]="{ show: false }">
</st> -->
</sv-container>
</nz-card>
</ng-container>
</sv-container>
</nz-card>
<ng-template #redectModal>
@ -266,4 +304,26 @@
</se>
</div>
</div>
</ng-template>
<ng-template #uploadTemplate let-data="data" let-status="status" let-key="key" let-key2="key2" 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]="!status || disabledUpload" (nzChange)="changeUpload($event,data,key,key2)">
<ng-container *ngIf="!data[key] && status">
<i class="upload-icon" nz-icon [nzType]="service.http.loading ? 'loading' : 'plus'"></i>
<div class="ant-upload-text">上传</div>
</ng-container>
<div *ngIf="data[key]" (mouseover)="data[hover]=true" (mouseleave)="data[hover]=false"
(click)="$event.cancelBubble=true" class="image-hover">
<img [src]="data[key]" style="width: 200px;height: 160px;" />
<div class="mask" *ngIf="data[hover] && status"></div>
<div class="mask-over" *ngIf="data[hover] && status">
<i nz-icon nzType="close-circle" nzTheme="fill" class="delete-icon" (click)="deleteImg(data,key,key2)"></i>
<div style="display: flex;align-items: center;">
<i nz-icon nzType="eye" nzTheme="fill" class="show-icon" (click)="showImg(data[key])"></i>
</div>
</div>
</div>
</nz-upload>
</ng-template>