edit
This commit is contained in:
Taric Xin
@ -0,0 +1,142 @@
|
||||
<!-- 页头 -->
|
||||
<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;width: 100%;justify-content: space-between;">
|
||||
<p style="padding-right: 80px; width: 400px;">{{ userDetail?.name }}
|
||||
<nz-badge nzStatus="success" nzText="正常" *ngIf="!userDetail?.stateLocked" class="ml-xl">
|
||||
</nz-badge>
|
||||
<nz-badge nzStatus="warning" nzText="冻结" *ngIf="userDetail?.stateLocked" class="ml-xl">
|
||||
</nz-badge>
|
||||
</p>
|
||||
<div style="margin-right: 24px;">
|
||||
<button *ngIf="userDetail?.stateLocked" [nzLoading]="service.http.loading" nz-button
|
||||
nzType="primary" nzGhost (click)="userAction(1)">
|
||||
启用
|
||||
</button>
|
||||
<button *ngIf="!userDetail?.stateLocked" [nzLoading]="service.http.loading" nz-button
|
||||
nzDanger nzGhost (click)="userAction(0)">
|
||||
冻结
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<p style="padding-right: 80px; width: 400px;">手机号：{{ userDetail?.phone }}
|
||||
</p>
|
||||
<p>注册时间：{{ userDetail?.createTime }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nz-skeleton>
|
||||
</ng-template>
|
||||
|
||||
</page-header-wrapper>
|
||||
|
||||
|
||||
<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;" class="ml-md"><i
|
||||
nz-icon nzType="check-circle" nzTheme="fill" class="mr-xs"></i>审核通过
|
||||
</label>
|
||||
<label *ngIf="userIdentityDetail?.certificationStatus===2" style="color: #ff4d4f;" class="ml-md"><i
|
||||
nz-icon nzType="close-circle" nzTheme="fill" class="mr-xs"></i>驳回
|
||||
</label>
|
||||
<div style="float: right;">
|
||||
<ng-container *ngIf="isEditUser; else elseTemplate">
|
||||
<button [nzLoading]="service.http.loading" nz-button (click)="reset()">
|
||||
取消
|
||||
</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()">修改</button>
|
||||
</ng-template>
|
||||
</div>
|
||||
</sv-title>
|
||||
<sv label="姓名">
|
||||
<input nz-input type="text" [(ngModel)]="userIdentityDetail.name" [readonly]="!isEditUser"
|
||||
[nzBorderless]="!isEditUser" [placeholder]="isEditUser?'':'-'">
|
||||
</sv>
|
||||
<sv label="身份证号">
|
||||
<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>
|
||||
|
||||
|
||||
<sv-container col="3" class="mt-md">
|
||||
<sv-title>银行结算信息</sv-title>
|
||||
<sv label="开户银行">
|
||||
<!-- {{ detailData?.name }} -->
|
||||
</sv>
|
||||
<sv label="银行卡号">
|
||||
<!-- {{ detailData?.certificateNumber }} -->
|
||||
</sv>
|
||||
</sv-container>
|
||||
|
||||
</nz-card>
|
||||
|
||||
|
||||
<ng-template #redectModal>
|
||||
<div nz-row nzGutter="8">
|
||||
<div nz-col nzSpan="24" se-container [labelWidth]="120">
|
||||
<se [col]="1" label="姓名">
|
||||
{{ userIdentityDetail?.name }}
|
||||
</se>
|
||||
<se [col]="1" label="备注" required>
|
||||
<textarea nz-input rows="3" style="width: 325px;margin-left: 14px;"
|
||||
[(ngModel)]="approvalOpinion"></textarea>
|
||||
</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;" (click)="showImg(data[key])" />
|
||||
<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>
|
||||
@ -0,0 +1,24 @@
|
||||
@import '../../../../less/edit.less';
|
||||
|
||||
:host {
|
||||
::ng-deep {
|
||||
|
||||
.sv__title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.user-info {
|
||||
display : flex;
|
||||
font-size: 16px;
|
||||
|
||||
img {
|
||||
width : 64px;
|
||||
height : 64px;
|
||||
margin-right : 15px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,215 @@
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { apiConf } from '@conf/api.conf';
|
||||
import { NzModalService } from 'ng-zorro-antd/modal';
|
||||
import { UsermanageService } from 'src/app/routes/usercenter/services/usercenter.service';
|
||||
import { ImageViewComponent } from 'src/app/shared/components/imagelist';
|
||||
|
||||
@Component({
|
||||
selector: 'app-captain-detail',
|
||||
templateUrl: './captain-detail.component.html',
|
||||
styleUrls: ['./captain-detail.component.less'],
|
||||
providers: [DatePipe]
|
||||
})
|
||||
export class CaptainDetailComponent implements OnInit {
|
||||
userDetail: any;
|
||||
userIdentityDetail: any = {};
|
||||
tempalateUserIdentityDetail = { ...this.userIdentityDetail };
|
||||
|
||||
@ViewChild('redectModal', { static: false })
|
||||
redectModal!: any;
|
||||
@ViewChild('rejectedDriverModal', { static: false })
|
||||
rejectedDriverModal!: any;
|
||||
approvalOpinion = '';
|
||||
|
||||
isEditUser = false;
|
||||
|
||||
uploadURl = apiConf.waterFileUpload;
|
||||
disabledUpload = false;
|
||||
constructor(
|
||||
private nzModalService: NzModalService,
|
||||
public service: UsermanageService,
|
||||
private route: ActivatedRoute,
|
||||
private datePipe: DatePipe
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.initData();
|
||||
}
|
||||
initData() {
|
||||
// 获取司机头部信息
|
||||
this.service
|
||||
.request(this.service.$api_get_user_detail, {
|
||||
appUserId: this.route.snapshot.params.id
|
||||
})
|
||||
.subscribe(res => {
|
||||
if (res) {
|
||||
this.userDetail = res;
|
||||
}
|
||||
});
|
||||
// 获取用户个人信息
|
||||
this.service
|
||||
.request(this.service.$api_get_user_identity, {
|
||||
id: this.route.snapshot.params.id
|
||||
})
|
||||
.subscribe(res => {
|
||||
if (res) {
|
||||
this.userIdentityDetail = res;
|
||||
this.tempalateUserIdentityDetail = { ...this.userIdentityDetail };
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 启用/冻结司机 */
|
||||
userAction(status: number) {
|
||||
console.log(this.userDetail);
|
||||
|
||||
this.nzModalService.warning({
|
||||
nzTitle: status === 1 ? '确定启用该司机吗？' : '确定冻结该司机吗？',
|
||||
nzContent: status === 1 ? '启用后，该司机将恢复正常使用功能，请再次确认！' : '冻结后，司机将被限制使用，无法登陆，请谨慎操作！',
|
||||
nzOnOk: () => {
|
||||
this.service
|
||||
.request(this.service.$api_lock_or_free_user, {
|
||||
appUserId: [this.userDetail.appUserId],
|
||||
freezeOrResume: !!!status,
|
||||
pageName: '司机详情',
|
||||
telephone: this.userDetail.phone
|
||||
})
|
||||
.subscribe(res => {
|
||||
if (res) {
|
||||
this.service.msgSrv.success('操作成功');
|
||||
}
|
||||
this.initData();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 审核通过个人信息 */
|
||||
approveUser() {
|
||||
this.nzModalService.confirm({
|
||||
nzTitle: '审核通过',
|
||||
nzContent: `是否确认通过(姓名:${this.userIdentityDetail.name})审核`,
|
||||
nzOnOk: () => {
|
||||
this.adjuctUser({ auditStatus: 0, auditType: 0, identityId: this.userIdentityDetail?.id }, '审核通过');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 驳回个人信息 */
|
||||
rejectedUser() {
|
||||
this.approvalOpinion = '';
|
||||
this.nzModalService.create({
|
||||
nzTitle: '审核驳回',
|
||||
nzContent: this.redectModal,
|
||||
nzOnOk: () => {
|
||||
if (!this.approvalOpinion) {
|
||||
return false;
|
||||
}
|
||||
this.adjuctUser(
|
||||
{
|
||||
auditStatus: 1,
|
||||
auditType: 0,
|
||||
identityId: this.userIdentityDetail?.id,
|
||||
certificationOpinions: this.approvalOpinion
|
||||
},
|
||||
'审核驳回成功'
|
||||
);
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 个人信息审核 */
|
||||
private adjuctUser(params: any, msg: string) {
|
||||
this.service.request(this.service.$api_approve_identity, { ...params }).subscribe(res => {
|
||||
if (res) {
|
||||
this.service.msgSrv.success(msg);
|
||||
}
|
||||
this.initData();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 开启修改
|
||||
*/
|
||||
ratify() {
|
||||
this.isEditUser = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 需求修改
|
||||
*/
|
||||
reset() {
|
||||
this.userIdentityDetail = { ...this.tempalateUserIdentityDetail };
|
||||
this.isEditUser = false;
|
||||
}
|
||||
|
||||
saveUser() {
|
||||
const userIdentity = this.userIdentityDetail;
|
||||
const params = {
|
||||
certificateNumber: userIdentity.certificateNumber,
|
||||
certificatePhotoBack: userIdentity.certificatePhotoBack,
|
||||
certificatePhotoBackWatermark: userIdentity.certificatePhotoBackWatermark,
|
||||
certificatePhotoFront: userIdentity.certificatePhotoFront,
|
||||
certificatePhotoFrontWatermark: userIdentity.certificatePhotoFrontWatermark,
|
||||
certificateType: userIdentity.certificateType,
|
||||
handCertificate: userIdentity.handCertificate,
|
||||
id: userIdentity.id,
|
||||
name: userIdentity.name,
|
||||
souceType: userIdentity.souceType,
|
||||
sourceAppId: userIdentity.sourceAppId,
|
||||
tenantId: userIdentity.tenantId,
|
||||
userId: userIdentity.userId,
|
||||
validEndTime:
|
||||
userIdentity.validEndTime?.length === 10
|
||||
? userIdentity.validEndTime
|
||||
: this.datePipe.transform(userIdentity.validEndTime, 'yyyy-MM-dd'),
|
||||
validStartTime:
|
||||
userIdentity.validStartTime?.length === 10
|
||||
? userIdentity.validStartTime
|
||||
: this.datePipe.transform(userIdentity.validStartTime, 'yyyy-MM-dd')
|
||||
};
|
||||
this.service.request(this.service.$api_update_driver_identity, params).subscribe(res => {
|
||||
if (res) {
|
||||
this.service.msgSrv.success('修改成功');
|
||||
this.isEditUser = false;
|
||||
this.initData();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
changeUpload({ file, fileList, type }: any, data: any, key: string, key2: string) {
|
||||
if (type === 'success') {
|
||||
data[key] = file.response.data?.fullFileWatermarkPath;
|
||||
data[key2] = file.response.data?.fullFilePath;
|
||||
}
|
||||
}
|
||||
|
||||
showImg(url: any) {
|
||||
const params = {
|
||||
imgList: [url],
|
||||
index: 0
|
||||
};
|
||||
this.nzModalService.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
|
||||
}
|
||||
|
||||
deleteImg(data: any, key: string, key2: string) {
|
||||
this.nzModalService.warning({
|
||||
nzTitle: '是否确认删除该图片',
|
||||
nzOnOk: () => {
|
||||
this.disabledUpload = true;
|
||||
data[key] = '';
|
||||
data[key2] = '';
|
||||
setTimeout(() => {
|
||||
this.disabledUpload = false;
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
goBack() {
|
||||
window.history.go(-1);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user