车辆UI优化

2022-04-29 18:05:41 +08:00
parent 0abc9c6412
commit f7628e9d1a
7 changed files with 377 additions and 439 deletions
--- a/src/app/routes/order-management/components/complaint-detail/complaint-detail.component.html
+++ b/src/app/routes/order-management/components/complaint-detail/complaint-detail.component.html
@ -1,5 +1,5 @@
 <!--
- * @Description  : 
+ * @Description  :
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2022-01-04 17:29:18
@ -13,41 +13,60 @@
    <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
      <i nz-icon nzType="left" nzTheme="outline"></i>
    </button>
-    
+
  </ng-template>
 </page-header-wrapper>
 <!-- [nzExtra]="extraTemplate" -->
-<nz-card nzTitle="投诉信息" [nzExtra]="cardTemplate">
+<nz-card [nzBorderless]="true" class="mb0">
  <ng-template #cardTemplate>
-    <button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="viewEvaluate()" *ngIf="complaint?.complaintStatus == 1" [disabled]="complaintStatus">处理</button>
-</ng-template>
-  <h2>投诉单号：{{datailList?.complaintCode}}</h2>
+    <button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="viewEvaluate()"
+      *ngIf="complaint?.complaintStatus == 1" [disabled]="complaintStatus">处理</button>
+  </ng-template>
+  <div class="mb-xs common-order-header" nz-row>
+    <div>
+      <button nz-button nzType="primary" nzSize="small" nzDanger>{{ datailList?.complaintStatusLabel }}</button>
+      <b class="ml-md text-md">投诉单号： : {{datailList?.complaintCode}}</b>
+    </div>
+    <div>
+      <button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="viewEvaluate()"
+        *ngIf="complaint?.complaintStatus == 1" [disabled]="complaintStatus">处理</button>
+    </div>
+  </div>
+  <nz-divider class="divider-margin"></nz-divider>
+  <div class="font-weight-blod text-md detail-title">
+    <a class="sign"></a>
+    <span>投诉信息</span>
+  </div>
+  <!-- <h2>投诉单号：{{datailList?.complaintCode}}</h2> -->
  <sf #sf [compact]="true" [ui]="ui" [schema]="schema" [button]="'none'" *ngIf="schema" [formData]="datailList">
    <ng-template sf-template="imgUrls" let-schema="schema" let-item let-ui="ui">
-     <!-- <app-imagelist [imgList]="datailList?.imgUrls"></app-imagelist> -->
+      <!-- <app-imagelist [imgList]="datailList?.imgUrls"></app-imagelist> -->

-    <img nz-image width="100px" height="100%" *ngFor="let item of datailList?.imgUrls" [nzSrc]="item"
-    style="margin:0 10px 0 0" alt="" />
+      <img nz-image width="100px" height="100%" *ngFor="let item of datailList?.imgUrls" [nzSrc]="item"
+        style="margin:0 10px 0 0" alt="" />
    </ng-template>

  </sf>
 </nz-card>
-
-
-<nz-card class="dealBox" nzTitle="投诉处理">
-<nz-timeline nzMode="left">
-  <nz-timeline-item *ngFor="let i of datailList?.processNodeVOS; let id = index" >
-    <div class="p mt-sm">{{i?.nodeNameLabel}}</div>
-    <p>
-      {{i?.timeLabel}}：<span class="p-line">{{i?.time}}</span>
-    </p>
-    <p >
-      {{i?.resultLabel}}：<span class="p-line">{{i?.result}}</span>
-    </p>
-  </nz-timeline-item>
-</nz-timeline>
+<nz-card nzTitle="投诉处理" [nzBorderless]="true" class="mb0 dealBox">
+  <div class="font-weight-blod text-md detail-title">
+    <a class="sign"></a>
+    <span>投诉处理</span>
+  </div>
+  <nz-timeline nzMode="left">
+    <nz-timeline-item *ngFor="let i of datailList?.processNodeVOS; let id = index">
+      <div class="p mt-sm">{{i?.nodeNameLabel}}</div>
+      <p>
+        {{i?.timeLabel}}：<span class="p-line">{{i?.time}}</span>
+      </p>
+      <p>
+        {{i?.resultLabel}}：<span class="p-line">{{i?.result}}</span>
+      </p>
+    </nz-timeline-item>
+  </nz-timeline>
 </nz-card>
-<nz-modal [(nzVisible)]="isVisibleRE"  [nzWidth]="600" [nzFooter]="nzModalFooterview2"  (nzOnOk)="handleOK()" nzTitle="处理" (nzOnCancel)="Cancel()">
+<nz-modal [(nzVisible)]="isVisibleRE" [nzWidth]="600" [nzFooter]="nzModalFooterview2" (nzOnOk)="handleOK()" nzTitle="处理"
+  (nzOnCancel)="Cancel()">
  <ng-container *nzModalContent>
    <sf #sfView [schema]="schemaView" [ui]="uiView" [compact]="true" [button]="'none'">
    </sf>
@ -57,4 +76,4 @@
    <button nz-button nzType="primary" (click)="handleOK()">通过</button>
    <button nz-button nzType="primary" (click)="handleCancel2()">强制取消</button>
  </ng-template>
-</nz-modal>
+</nz-modal>
--- a/src/app/routes/order-management/components/risk-detail/risk-detail.component.html
+++ b/src/app/routes/order-management/components/risk-detail/risk-detail.component.html
@ -1,5 +1,5 @@
 <!--
- * @Description  : 
+ * @Description  :
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2021-12-16 10:19:08
@ -15,14 +15,27 @@
    </button>
  </ng-template>
 </page-header-wrapper>
-<nz-card nzTitle="运单信息">
-  <sv-container labelWidth="150" col="2">
-    <sv label="订单号">{{i?.billCode}}</sv>
+<nz-card [nzBorderless]="true" class="mb0">
+  <div class="mb-xs" nz-row>
+    <div nz-col nzSpan="16">
+      <button nz-button nzType="primary" nzSize="small" nzDanger>{{ i?.representationsStatusLabel }}</button>
+      <b class="ml-md text-md">订单号 : {{ i?.billCode }}</b>
+    </div>
+  </div>
+  <nz-divider class="divider-margin"></nz-divider>
+  <div class="font-weight-blod text-md detail-title">
+    <a class="sign"></a>
+    <span>运单信息</span>
+  </div>
+  <sv-container labelWidth="100" col="3" class="new-sv-container">
+    <!-- <sv label="订单号">{{i?.billCode}}</sv>
    <sv label="申诉状态">
      <span >{{i?.representationsStatusLabel}}</span>
-    </sv>
-    <sv label="承运司机">{{i?.driverName ? i?.driverName + '/': ''}} {{i?.driverPhone ?i?.driverPhone + '/': '' }}  {{i?.carNo}}</sv>
-    <sv label="车队长"  *ngIf="i?.payeeId !== i?.driverId"> {{i?.carCaptainName ? i?.carCaptainName+ '/' : ''}}{{i?.carCaptainPhone}} </sv>
+    </sv> -->
+    <sv label="承运司机">{{i?.driverName ? i?.driverName + '/': ''}} {{i?.driverPhone ?i?.driverPhone + '/': '' }}
+      {{i?.carNo}}</sv>
+    <sv label="车队长" *ngIf="i?.payeeId !== i?.driverId"> {{i?.carCaptainName ? i?.carCaptainName+ '/' :
+      ''}}{{i?.carCaptainPhone}} </sv>
    <sv label="装货时间">{{i?.loadTime}}</sv>
    <sv label="卸货时间">{{i?.unloadTime}}</sv>
    <sv label="装货地">{{i?.loadingPlace}}</sv>
@ -43,8 +56,13 @@
    </ng-template>
  </sf>
 </nz-card> -->
-<nz-card nzTitle="申诉信息" >
-  <sf #sf [compact]="true" [ui]="ui" [schema]="schema" [button]="'none'" *ngIf="i" [formData]="i">
+<nz-card [nzBorderless]="true" class="mb0">
+  <div class="font-weight-blod text-md detail-title">
+    <a class="sign"></a>
+    <span>申诉信息</span>
+  </div>
+  <sf #sf [compact]="true" [ui]="ui" [schema]="schema" [button]="'none'" *ngIf="i" [formData]="i"
+    class="new-sf-container">
    <ng-template sf-template="uploadVanchor" let-schema="schema" let-me let-ui="ui">
      <!-- <nz-upload *ngIf="me.formProperty.value" [nzFileList]="me.formProperty.value" [nzShowButton]="false"
        [nzShowUploadList]="{showRemoveIcon:false}">
@ -53,7 +71,11 @@
    </ng-template>
  </sf>
 </nz-card>
-<nz-card class="dealBox" nzTitle="申诉处理">
+<nz-card [nzBorderless]="true" class="dealBox mb0">
+  <div class="font-weight-blod text-md detail-title">
+    <a class="sign"></a>
+    <span>申诉处理</span>
+  </div>
  <nz-timeline nzMode="left">
    <nz-timeline-item [nzLabel]="item?.operatorTimestamp" nzColor="green" *ngFor="let item of logList">
      <div>{{item?.operationContent}}</div>
--- a/src/app/routes/order-management/components/risk-detail/risk-detail.component.ts
+++ b/src/app/routes/order-management/components/risk-detail/risk-detail.component.ts
@ -31,12 +31,11 @@ export class OrderManagementRiskDetailComponent implements OnInit {
  }

  ngOnInit(): void {
-    if (this.id)
-    {
+    if (this.id) {
      this.getDetail(this.id);
      this.initSF();
-    } 
-    
+    }
+
  }
  initSF() {
    this.schema = {
@ -77,53 +76,43 @@ export class OrderManagementRiskDetailComponent implements OnInit {

    this.ui = {
      '*': {
-        spanLabelFixed: 180,
+        spanLabelFixed: 100,
        grid: { span: 18 },
      },
-      $title1: {
-        spanLabelFixed: 0,
-      },
-      $title2: {
-        spanLabelFixed: 0,
-      },
-      $title3: {
-        spanLabelFixed: 0,
-      },
-      $unit: {
-        spanLabelFixed: 20,
-        grid: { span: 3 },
-      },
      $uploadVanchor: {
-        spanLabelFixed: 180,
+        spanLabelFixed: 100,
        grid: { span: 24 },
      },
+      $representationsDescribe: {
+        grid: { span: 24 },
+      }
    };
  }
-    /**
-   * 获取详情
-   * @param id
-   */
-     getDetail(id: string) {
-      this.service.request(this.service.$api_get_getRiskDetail, { id }).subscribe(res => {
-        if (res) {
-          this.i = Object.assign({}, res);
-          console.log(this.i);
-          let list: any = [];
-          this.i.fileArr.map((item: any, index: number) => {
-            const obj = {
-              uid: index,
-              name: '文件' + (index + 1),
-              status: 'done',
-              url: item,
-            };
-            list.push(obj);
-          });
-          this.i.uploadVanchor = list;
-          this.initSF();
-          this.getLog(this.i?.billCode);
-        }
-      })
-    }
+  /**
+ * 获取详情
+ * @param id
+ */
+  getDetail(id: string) {
+    this.service.request(this.service.$api_get_getRiskDetail, { id }).subscribe(res => {
+      if (res) {
+        this.i = Object.assign({}, res);
+        console.log(this.i);
+        let list: any = [];
+        this.i.fileArr.map((item: any, index: number) => {
+          const obj = {
+            uid: index,
+            name: '文件' + (index + 1),
+            status: 'done',
+            url: item,
+          };
+          list.push(obj);
+        });
+        this.i.uploadVanchor = list;
+        this.initSF();
+        this.getLog(this.i?.billCode);
+      }
+    })
+  }
  // getDetail(id: string) {

  //   this.service.request(this.service.$api_get_getRiskDetail, { id }).subscribe(res => {
@ -152,9 +141,9 @@ export class OrderManagementRiskDetailComponent implements OnInit {
  goBack() {
    window.history.go(-1)
  }
- /**
-   * 获取操作日志
-   */
+  /**
+    * 获取操作日志
+    */
  getLog(operateObject: any) {
    this.service.request(this.service.$api_get_risk_order_log, { operateObject, operateType: '8', size: 100 }).subscribe(res => {
      this.logList = res?.records;