From 7ec9e039849152e2cf27b6f5c580aa57a85dca49 Mon Sep 17 00:00:00 2001
From: Taric Xin <LincolnLin@swireproperties.com>
Date: Wed, 15 Dec 2021 16:32:11 +0800
Subject: [PATCH] edit

---
 src/app/core/startup/startup.service.ts       |   4 +-
 .../driver/detail/detail.component.html       | 396 ++++++++++--------
 .../driver/detail/detail.component.less       |   2 +-
 .../driver/detail/detail.component.ts         | 236 +++++++++--
 .../enterprise-audit/view/view.component.ts   |   1 -
 src/app/routes/usercenter/less/edit.less      | 113 +++++
 .../usercenter/services/usercenter.service.ts |   5 +
 .../shared/services/business/user.service.ts  |  22 +-
 src/assets/mocks/user-data.json               |   2 +-
 9 files changed, 563 insertions(+), 218 deletions(-)
 create mode 100644 src/app/routes/usercenter/less/edit.less

diff --git a/src/app/core/startup/startup.service.ts b/src/app/core/startup/startup.service.ts
index 9f8fb87b..705dd465 100644
--- a/src/app/core/startup/startup.service.ts
+++ b/src/app/core/startup/startup.service.ts
@@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Inject, Injectable } from '@angular/core';
 import { ACLService } from '@delon/acl';
 import { MenuService, SettingsService, TitleService, _HttpClient } from '@delon/theme';
+import { EAUserService } from '@shared';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzIconService } from 'ng-zorro-antd/icon';
 import { Observable, zip } from 'rxjs';
@@ -24,6 +25,7 @@ export class StartupService {
     private aclService: ACLService,
     private titleService: TitleService,
     private httpClient: _HttpClient,
+    private userSrv: EAUserService,
     private coreSrv: CoreService
   ) {
     iconSrv.addIcon(...ICONS_AUTO, ...ICONS);
@@ -94,7 +96,7 @@ export class StartupService {
     const appData = this.httpClient.get(`assets/mocks/app-data.json`).pipe(map((res: any) => res.app));
 
     // 用户数据
-    const userData = this.httpClient.get('assets/mocks/user-data.json').pipe(map((res: any) => res.user));
+    const userData = this.httpClient.post(this.userSrv.$api_get_user_by_token,{}).pipe(map((res: any) => res.data));
 
     // 菜单数据
     const menuData = this.httpClient.get('assets/mocks/menu-data.json').pipe(map((res: any) => res.menu));
diff --git a/src/app/routes/usercenter/components/driver/detail/detail.component.html b/src/app/routes/usercenter/components/driver/detail/detail.component.html
index 8009f0ee..048eb3af 100644
--- a/src/app/routes/usercenter/components/driver/detail/detail.component.html
+++ b/src/app/routes/usercenter/components/driver/detail/detail.component.html
@@ -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>
\ No newline at end of file
diff --git a/src/app/routes/usercenter/components/driver/detail/detail.component.less b/src/app/routes/usercenter/components/driver/detail/detail.component.less
index 609160eb..23a3e79e 100644
--- a/src/app/routes/usercenter/components/driver/detail/detail.component.less
+++ b/src/app/routes/usercenter/components/driver/detail/detail.component.less
@@ -1,4 +1,4 @@
-@import '~@delon/theme/index';
+@import '../../../less/edit.less';
 
 :host {
   ::ng-deep {
diff --git a/src/app/routes/usercenter/components/driver/detail/detail.component.ts b/src/app/routes/usercenter/components/driver/detail/detail.component.ts
index 508573cd..8b253b1c 100644
--- a/src/app/routes/usercenter/components/driver/detail/detail.component.ts
+++ b/src/app/routes/usercenter/components/driver/detail/detail.component.ts
@@ -1,23 +1,30 @@
+import { DatePipe } from '@angular/common';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { apiConf } from '@conf/api.conf';
 import { STColumn, STComponent } from '@delon/abc/st';
 import { SFComponent, SFDateWidgetSchema, SFSchema, SFTagWidgetSchema, SFTextWidgetSchema, SFUISchema } from '@delon/form';
 import { ModalHelper, _HttpClient } from '@delon/theme';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalService } from 'ng-zorro-antd/modal';
+import { ImageViewComponent } from 'src/app/shared/components/imagelist';
 import { UsermanageService } from '../../../services/usercenter.service';
 
 @Component({
   selector: 'app-usercenter-components-driver-detail',
   templateUrl: './detail.component.html',
-  styleUrls: ['./detail.component.less']
+  styleUrls: ['./detail.component.less'],
+  providers: [DatePipe]
 })
 export class UserCenterComponentsDriverDetailComponent implements OnInit {
   detailData: any;
   userDetail: any;
-  userIdentityDetail: any;
-  driverDetail: any;
-  licenseDetail: any;
+  userIdentityDetail: any = {};
+  tempalateUserIdentityDetail = { ...this.userIdentityDetail };
+  driverDetail: any = {};
+  tempalateDriverData = { ...this.driverDetail };
+  licenseDetail: any = {};
+  tempalateLicenseDetail = { ...this.licenseDetail };
   carList: any = [];
 
   @ViewChild('redectModal', { static: false })
@@ -25,7 +32,18 @@ export class UserCenterComponentsDriverDetailComponent implements OnInit {
   @ViewChild('rejectedDriverModal', { static: false })
   rejectedDriverModal!: any;
   approvalOpinion = '';
-  constructor(private nzModalService: NzModalService, public service: UsermanageService, private route: ActivatedRoute) {}
+
+  isEditUser = false;
+  isEditDriver = false;
+
+  uploadURl = apiConf.waterFileUpload;
+  disabledUpload = false;
+  constructor(
+    private nzModalService: NzModalService,
+    public service: UsermanageService,
+    private route: ActivatedRoute,
+    private datePipe: DatePipe
+  ) {}
 
   ngOnInit() {
     this.initData();
@@ -49,34 +67,32 @@ export class UserCenterComponentsDriverDetailComponent implements OnInit {
       .subscribe(res => {
         if (res) {
           this.userIdentityDetail = res;
+          this.tempalateUserIdentityDetail = { ...this.userIdentityDetail };
         }
       });
     // 获取驾驶证信息
-    this.service
-      .request(this.service.$api_get_driver_license, { appUserId: this.route.snapshot.params.id })
-      .subscribe(res => {
-        if (res) {
-          this.driverDetail = res;
-        }
-      });
+    this.service.request(this.service.$api_get_driver_license, { appUserId: this.route.snapshot.params.id }).subscribe(res => {
+      if (res) {
+        this.driverDetail = res;
+        this.tempalateDriverData = { ...this.driverDetail };
+      }
+    });
     // 获取从业资格证信息
-    this.service
-      .request(this.service.$api_get_driver_practice_seniority, { appUserId: this.route.snapshot.params.id })
-      .subscribe(res => {
-        if (res) {
-          this.licenseDetail = res;
-        }
-      });
+    this.service.request(this.service.$api_get_driver_practice_seniority, { appUserId: this.route.snapshot.params.id }).subscribe(res => {
+      if (res) {
+        this.licenseDetail = res;
+        this.tempalateLicenseDetail = { ...this.licenseDetail };
+      }
+    });
     // 获取载具信息
-    this.service
-      .request(this.service.$api_get_driver_car_license, { appUserId: this.route.snapshot.params.id })
-      .subscribe(res => {
-        if (res) {
-          this.carList = res;
-        }
-      });
+    // this.service.request(this.service.$api_get_driver_car_license, { appUserId: this.route.snapshot.params.id }).subscribe(res => {
+    //   if (res) {
+    //     this.carList = res;
+    //   }
+    // });
   }
 
+  /** 启用/冻结司机 */
   userAction(status: number) {
     this.nzModalService.warning({
       nzTitle: status === 1 ? '确定启用该司机吗？' : '确定冻结该司机吗？',
@@ -88,16 +104,18 @@ export class UserCenterComponentsDriverDetailComponent implements OnInit {
     });
   }
 
+  /** 审核通过个人信息 */
   approveUser() {
     this.nzModalService.confirm({
       nzTitle: '审核通过',
-      nzContent: `是否确认通过(姓名:${this.userDetail?.name})审核`,
+      nzContent: `是否确认通过(姓名:${this.userIdentityDetail.name})审核`,
       nzOnOk: () => {
         this.adjuctUser({ auditStatus: 0, auditType: 0, identityId: this.userIdentityDetail?.id }, '审核通过');
       }
     });
   }
 
+  /** 驳回个人信息 */
   rejectedUser() {
     this.approvalOpinion = '';
     this.nzModalService.create({
@@ -121,21 +139,24 @@ export class UserCenterComponentsDriverDetailComponent implements OnInit {
     });
   }
 
+  /** 审核通过驾驶员信息 */
   approveDriver() {
     this.nzModalService.confirm({
       nzTitle: '审核通过',
       nzContent: `<p>驾驶证号：${this.driverDetail?.licenseNo}</p><p>从业资格证号：${this.licenseDetail?.licenseNo}</p><p>是否确认通过审核`,
-      nzOnOk: () => { 
+      nzOnOk: () => {
         this.adjuctDriverLicense(
-        {
-          auditStatus: 20,
-          appUserId: this.userDetail?.appUserId,
-        },
-        '审核成功'
-      );}
+          {
+            approvalStatus: 20,
+            appUserId: this.userDetail?.appUserId
+          },
+          '审核成功'
+        );
+      }
     });
   }
 
+  /** 驳回驾驶员信息 */
   rejectedDriver() {
     this.approvalOpinion = '';
     this.nzModalService.create({
@@ -147,7 +168,7 @@ export class UserCenterComponentsDriverDetailComponent implements OnInit {
         }
         this.adjuctDriverLicense(
           {
-            auditStatus: 30,
+            approvalStatus: 30,
             appUserId: this.userDetail?.appUserId,
             approvalOpinion: this.approvalOpinion
           },
@@ -158,6 +179,7 @@ export class UserCenterComponentsDriverDetailComponent implements OnInit {
     });
   }
 
+  /** 个人信息审核 */
   private adjuctUser(params: any, msg: string) {
     this.service.request(this.service.$api_approve_identity, { ...params }).subscribe(res => {
       if (res) {
@@ -167,6 +189,7 @@ export class UserCenterComponentsDriverDetailComponent implements OnInit {
     });
   }
 
+  /** 驾驶员审核 */
   private adjuctDriverLicense(params: any, msg: string) {
     this.service.request(this.service.$api_approve_driver_license, { ...params }).subscribe(res => {
       if (res) {
@@ -176,7 +199,148 @@ export class UserCenterComponentsDriverDetailComponent implements OnInit {
     });
   }
 
-  ratify() {}
+  /**
+   * 开启修改
+   * @param type 修改类型
+   */
+  ratify(type: number) {
+    if (type) {
+      this.isEditDriver = true;
+    } else {
+      this.isEditUser = true;
+    }
+  }
+
+  /**
+   * 需求修改
+   * @param type 修改类型
+   */
+  reset(type: number) {
+    if (type) {
+      this.driverDetail = { ...this.tempalateDriverData };
+      this.licenseDetail = { ...this.tempalateLicenseDetail };
+      this.isEditDriver = false;
+    } else {
+      this.userIdentityDetail = { ...this.tempalateUserIdentityDetail };
+      this.isEditUser = false;
+    }
+  }
+
+  /**
+   * 修改驾驶证，从业资格证信息
+   */
+  saveDriver() {
+    const driverDetail = this.driverDetail;
+    const licenseDetail = this.licenseDetail;
+    const params = {
+      userId: this.route.snapshot.params.id,
+      userDriverLicenseDTO: {
+        appUserId: driverDetail.appUserId,
+        certificatePhoto: driverDetail.certificatePhoto,
+        certificatePhotoWatermark: driverDetail.certificatePhotoWatermark,
+        driverModel: driverDetail.driverModel,
+        id: driverDetail.id,
+        licenseNo: driverDetail.licenseNo,
+        signingOrganization: driverDetail.signingOrganization,
+        validEndTime:
+          driverDetail.validEndTime?.length === 10
+            ? driverDetail.validEndTime
+            : this.datePipe.transform(driverDetail.validEndTime, 'yyyy-MM-dd'),
+        validStartTime:
+          driverDetail.validStartTime?.length === 10
+            ? driverDetail.validStartTime
+            : this.datePipe.transform(driverDetail.validStartTime, 'yyyy-MM-dd')
+      },
+      userPracticeSeniorityDTO: {
+        appUserId: licenseDetail.appUserId,
+        approvalStatus: licenseDetail.approvalStatus,
+        certificatePhoto: licenseDetail.certificatePhoto,
+        certificatePhotoWatermark: licenseDetail.certificatePhotoWatermark,
+        id: licenseDetail.id,
+        licenseNo: licenseDetail.licenseNo,
+        regionCode: licenseDetail.regionCode,
+        validEndTime:
+          licenseDetail.validEndTime?.length === 10
+            ? licenseDetail.validEndTime
+            : this.datePipe.transform(licenseDetail.validEndTime, 'yyyy-MM-dd'),
+        validStartTime:
+          licenseDetail.validStartTime?.length === 10
+            ? licenseDetail.validStartTime
+            : this.datePipe.transform(licenseDetail.validStartTime, 'yyyy-MM-dd')
+      }
+    };
+    this.service.request(this.service.$api_update_driver_license, params).subscribe(res => {
+      if (res) {
+        this.service.msgSrv.success('修改成功');
+        this.isEditDriver = false;
+        this.initData();
+      }
+    });
+  }
+
+  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')
+    };
+    console.log(this.userIdentityDetail);
+    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);
diff --git a/src/app/routes/usercenter/components/freight/enterprise-audit/view/view.component.ts b/src/app/routes/usercenter/components/freight/enterprise-audit/view/view.component.ts
index 0c589129..d729517c 100644
--- a/src/app/routes/usercenter/components/freight/enterprise-audit/view/view.component.ts
+++ b/src/app/routes/usercenter/components/freight/enterprise-audit/view/view.component.ts
@@ -135,7 +135,6 @@ export class FreightComponentsEnterpriseAuditViewComponent implements OnInit {
   }
 
   changeUpload({ file, fileList, type }: any, key: string) {
-    console.log({ file, fileList, type });
     if (type === 'success') {
       this.detailData[key] = file.response.data.fullFileWatermarkPath;
     }
diff --git a/src/app/routes/usercenter/less/edit.less b/src/app/routes/usercenter/less/edit.less
new file mode 100644
index 00000000..9652786c
--- /dev/null
+++ b/src/app/routes/usercenter/less/edit.less
@@ -0,0 +1,113 @@
+:host {
+  ::ng-deep {
+    sv-title {
+      font-weight: 700;
+    }
+
+
+    .sv__label,
+    .sv__detail {
+      line-height: 30px;
+    }
+
+    .edit-box {
+      input {
+        max-width: 250px;
+      }
+
+      nz-date-picker {
+        min-width: 250px;
+      }
+    }
+
+    .readOnly-box {
+      input {
+        padding-left: 0;
+        color       : #000;
+        border      : 0;
+      }
+
+      nz-select-top-control {
+        padding-left: 0px !important;
+      }
+    }
+
+    .ant-select {
+      min-width: 250px;
+
+      nz-select-top-control {
+        cursor: text !important;
+        color : #000 !important;
+      }
+    }
+
+    // 图片展示工具样式改造
+    .ant-upload.ant-upload-disabled {
+      cursor: pointer;
+    }
+
+    .ant-upload.ant-upload-select-picture-card {
+      width : 200px;
+      height: 160px;
+    }
+
+    .ant-upload-picture-card-wrapper {
+      width: auto;
+    }
+  }
+}
+
+.image-hover {
+  .delete-icon {
+    border-radius   : 50%;
+    color           : #F55656;
+    font-size       : 28px;
+    position        : absolute;
+    top             : -15px;
+    right           : -15px;
+    background-color: #ffffff;
+    cursor          : pointer;
+  }
+
+  .show-icon {
+    color    : #ffffff;
+    font-size: 30px;
+    cursor   : pointer;
+  }
+}
+
+.image-hover:hover .mask {
+  opacity: 0.8;
+}
+
+.mask {
+  width              : 200px;
+  height             : 160px;
+  background-color   : #4F4F4F;
+  opacity            : 0;
+  position           : absolute;
+  // top             : 6px;
+  // left            : 12px;
+  border-radius      : 6px;
+  margin-top         : -160px;
+}
+
+.mask-over {
+  width                : 200px;
+  height               : 160px;
+  position             : absolute;
+  // top               : 6px;
+  // left           : 12px;
+  border-radius        : 6px;
+  display              : flex;
+  justify-content      : center;
+  align-items          : center;
+  margin-top           : -160px;
+
+  label {
+    font-size     : 20px;
+    line-height   : 24px;
+    letter-spacing: 0.7px;
+    color         : #FFFFFF;
+  }
+}
\ No newline at end of file
diff --git a/src/app/routes/usercenter/services/usercenter.service.ts b/src/app/routes/usercenter/services/usercenter.service.ts
index fecca58b..377d6121 100644
--- a/src/app/routes/usercenter/services/usercenter.service.ts
+++ b/src/app/routes/usercenter/services/usercenter.service.ts
@@ -60,6 +60,11 @@ export class UsermanageService extends BaseService {
   // 司机详情查看-载具信息
   $api_get_driver_car_license = '/api/mdc/cuc/driver/getUserCarLicense';
 
+  // 修改实名认证-【司机】
+  $api_update_driver_identity = '/api/mdc/cuc/identityInfo/save';
+  // 修改驾驶证信息
+  $api_update_driver_license = '/api/mdc/cuc/driver/updateDriverLicense';
+
   // 人工审核实名认证
   $api_approve_identity = '/api/mdc/cuc/identityInfo/identityAudit';
   // 审核驾驶证信息
diff --git a/src/app/shared/services/business/user.service.ts b/src/app/shared/services/business/user.service.ts
index 96894893..f578d559 100644
--- a/src/app/shared/services/business/user.service.ts
+++ b/src/app/shared/services/business/user.service.ts
@@ -19,7 +19,7 @@ import { BaseService } from '../core/base.service';
 import { EACacheService } from '../core/cache.service';
 import { EAEventService } from '../core/event.service';
 @Injectable({
-  providedIn: 'root',
+  providedIn: 'root'
 })
 export class EAUserService extends BaseService {
   /**
@@ -57,7 +57,7 @@ export class EAUserService extends BaseService {
   /**
    * 根据Token获取用户详情
    */
-  $api_get_user_by_token = `/scce/cuc/cuc/user/getUserDetail`;
+  $api_get_user_by_token = `/api/mdc/cuc/user/getUserDetail`;
   /**
    * 获取用户菜单
    */
@@ -72,10 +72,11 @@ export class EAUserService extends BaseService {
     public injector: Injector,
     public cacheSrv: EACacheService,
     public eventSrv: EAEventService,
+    public settings: SettingsService,
     public router: Router,
     public ar: ActivatedRoute,
     @Inject(DA_SERVICE_TOKEN) public tokenSrv: ITokenService,
-    private settingSrv: SettingsService,
+    private settingSrv: SettingsService
   ) {
     super(injector);
   }
@@ -97,7 +98,7 @@ export class EAUserService extends BaseService {
    * @param captcha 验证码
    */
   loginByMobile(mobile: string, captcha: string, sc: string) {
-    this.asyncRequest(this.$api_login_by_mobile, { phone: mobile, smsCode: captcha, sc }, 'POST', true, 'FORM').then((res) => {
+    this.asyncRequest(this.$api_login_by_mobile, { phone: mobile, smsCode: captcha, sc }, 'POST', true, 'FORM').then(res => {
       if (res?.token) {
         // this.cacheSrv.set(cacheConf.token, res.token);
         this.tokenSrv.set({ token: res.token });
@@ -123,7 +124,7 @@ export class EAUserService extends BaseService {
   }
 
   async doAfterLogin() {
-    // await this.loadUserInfo();
+    await this.loadUserInfo();
     // await this.loadUserMenus();
     await this.loadUserRoles();
   }
@@ -132,8 +133,9 @@ export class EAUserService extends BaseService {
    * 加载用户信息
    */
   async loadUserInfo() {
-    return this.asyncRequest(this.$api_get_user_by_token).then((res) => {
-      this.cacheSrv.set(cacheConf.user, res);
+    return this.asyncRequest(this.$api_get_user_by_token).then(res => {
+      this.cacheSrv.set(cacheConf.user, res.data);
+      this.settings.setUser(res.data);
     });
   }
 
@@ -141,7 +143,7 @@ export class EAUserService extends BaseService {
    * 加载用户菜单
    */
   async loadUserMenus() {
-    return this.asyncRequest(this.$api_get_user_menus, { appId: sysConf.appId }).then((res) => {
+    return this.asyncRequest(this.$api_get_user_menus, { appId: sysConf.appId }).then(res => {
       this.cacheSrv.set(cacheConf.menu, res);
     });
   }
@@ -182,7 +184,7 @@ export class EAUserService extends BaseService {
         if (res.success === true) {
           return true;
         }
-      }),
+      })
     );
   }
 
@@ -198,7 +200,7 @@ export class EAUserService extends BaseService {
         if (res.success === true) {
           return true;
         }
-      }),
+      })
     );
   }
 }
diff --git a/src/assets/mocks/user-data.json b/src/assets/mocks/user-data.json
index 7d544ed1..4eeb76a4 100644
--- a/src/assets/mocks/user-data.json
+++ b/src/assets/mocks/user-data.json
@@ -1,7 +1,7 @@
 {
   "user": {
     "name": "Admin",
-    "avatar": "./assets/tmp/img/avatar.jpg",
+    "avatar": "./assets/images/user/logo.svg",
     "email": "cipchk@qq.com"
   }
 }