edit

2021-12-28 11:10:46 +08:00
parent 9ffc4c6f89
commit 1a4a0bbf15
3 changed files with 92 additions and 133 deletions
--- a/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.html
+++ b/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.html
@ -19,14 +19,14 @@
    </div>
    <div nz-row style="display: flex; justify-content: end;">
      <div nz-col nzSpan="10">
-        <button nz-button  >确认发车</button>
-        <button nz-button >取消订单</button>
-        <button nz-button  (click)="changeOrder()">修改订单</button>
-        <button nz-button nzType="primary" nzGhost >再下一单</button>
+        <button nz-button>确认发车</button>
+        <button nz-button>取消订单</button>
+        <button nz-button (click)="changeOrder()">修改订单</button>
+        <button nz-button nzType="primary" nzGhost>再下一单</button>
      </div>
    </div>
    <nz-divider></nz-divider>
-   <div>
+    <div>
      <div sv-container>
        <sv label="网络货运人">{{ i?.goodsResource?.enterpriseInfoName }} </sv>
        <sv label="货主">{{ i?.goodsResource?.shipperAppUserName }} </sv>
@ -34,86 +34,57 @@
        <sv label="服务类型">{{i?.goodsResource?.serviceTypeLabel}}</sv>
        <sv label="录单员">{{i?.goodsResource?.dispatchName}} 18100000000 </sv>
        <sv label="调度员">{{i?.goodsResource?.dispatchName}} </sv>
-     </div>
-     <nz-tabset nzType="card" style="margin-top: 15px;">
-      <nz-tab [nzTitle]="tempt" >
-        <ng-template #tempt>
-          <nz-anchor>
-            <nz-link nzHref="#distannce1" nzTitle="装卸货信息"></nz-link>
-          </nz-anchor>
-        </ng-template>
-      </nz-tab>
-      <nz-tab [nzTitle]="tempt2" >
-        <ng-template #tempt2>
-          <nz-anchor>
-            <nz-link nzHref="#distannce2" nzTitle="基本信息"></nz-link>
-          </nz-anchor>
-        </ng-template>
-      </nz-tab>
-      <nz-tab [nzTitle]="tempt3" >
-        <ng-template #tempt3>
-          <nz-anchor>
-            <nz-link nzHref="#distannce3" nzTitle="运费信息"></nz-link>
-          </nz-anchor>
-        </ng-template>
-      </nz-tab>
-      <nz-tab [nzTitle]="tempt4" >
-        <ng-template #tempt4>
-          <nz-anchor>
-            <nz-link nzHref="#distannce4" nzTitle="附件信息"></nz-link>
-          </nz-anchor>
-        </ng-template>
-      </nz-tab>
-      <nz-tab [nzTitle]="tempt5" >
-        <ng-template #tempt5>
-          <nz-anchor>
-            <nz-link nzHref="#distannce5" nzTitle="轨迹信息"></nz-link>
-          </nz-anchor>
-        </ng-template>
-      </nz-tab>
-    </nz-tabset>
-   </div>
+      </div>
+      <nz-tabset  style="margin-top: 15px;">
+        <nz-tab nzTitle="装卸货信息" (nzClick)="goDistance(distannce1)">
+        </nz-tab>
+        <nz-tab nzTitle="基本信息" (nzClick)="goDistance(distannce2)">
+        </nz-tab>
+        <nz-tab nzTitle="运费信息" (nzClick)="goDistance(distannce3)">
+        </nz-tab>
+        <nz-tab nzTitle="附件信息" (nzClick)="goDistance(distannce4)">
+        </nz-tab>
+        <nz-tab nzTitle="轨迹信息" (nzClick)="goDistance(distannce5)">
+        </nz-tab>
+      </nz-tabset>
+    </div>
  </ng-template>
 </page-header-wrapper>
-<nz-card nzTitle="运单进度">
+<nz-card nzTitle="运单进度" #distannce1>
  <div class="approval-status">
    <div style="width: 60%; margin: 0 auto">
        <nz-steps [nzCurrent]="approvalLsit?.length + 1" nzLabelPlacement="vertical">
-           <nz-step
-             *ngFor="let item of approvalLsit"
-             [nzTitle]="item?.state"
-             [nzSubtitle]="item?.stateTime"
-             [nzStatus]="item?.displayStatus === 'SHOW' ? 'finish' : 'wait'"
-           >
-          </nz-step>
+          <nz-step     *ngFor="let item of approvalLsit"     [nzTitle]="item?.state"     [nzSubtitle]="item?.stateTime"
+              [nzStatus]="item?.displayStatus === 'SHOW' ? 'finish' : 'wait'"  >
+            </nz-step>
         </nz-steps>
    </div>
  </div>
 </nz-card>

-<nz-card nzTitle="基本信息">
-    <sv-container col="1">
+<nz-card nzTitle="基本信息" #distannce2>
+  <sv-container col="1">
    <sv-title>货物信息</sv-title>
-      <sv label="网络货运人">
-        {{i?.goodsResource?.enterpriseInfoName}}
-      </sv>
-      <sv label="货物名称">
-        {{i?.goodsInfoList?.[0]?.goodsName}}
-      </sv>
+    <sv label="网络货运人">
+      {{i?.goodsResource?.enterpriseInfoName}}
+    </sv>
+    <sv label="货物名称">
+      {{i?.goodsInfoList?.[0]?.goodsName}}
+    </sv>
  </sv-container>
  <sv-container col="2">
-      <sv label="货物数量">
-        {{i?.goodsInfoList?.[0]?.weight}}顿,{{i?.goodsInfoList?.[0]?.volume}}方,{{i?.goodsInfoList?.[0]?.number}}件
-      </sv>
-      <sv label="用车需求">
-        {{i?.goodsInfoList?.[0]?.maxWeightLabel}}/{{i?.goodsInfoList?.[0]?.maxCube}}
-      </sv>
-      <sv label="承运司机">
-        <!-- {{i?.driverId}} -->
-      </sv>
-      <sv label="车型车长载重">
-        {{i?.goodsInfoList?.[0]?.weight}}顿,{{i?.goodsInfoList?.[0]?.volume}}方,{{i?.goodsInfoList?.[0]?.number}}件
-      </sv>
+    <sv label="货物数量">
+      {{i?.goodsInfoList?.[0]?.weight}}顿,{{i?.goodsInfoList?.[0]?.volume}}方,{{i?.goodsInfoList?.[0]?.number}}件
+    </sv>
+    <sv label="用车需求">
+      {{i?.goodsInfoList?.[0]?.maxWeightLabel}}/{{i?.goodsInfoList?.[0]?.maxCube}}
+    </sv>
+    <sv label="承运司机">
+      <!-- {{i?.driverId}} -->
+    </sv>
+    <sv label="车型车长载重">
+      {{i?.goodsInfoList?.[0]?.weight}}顿,{{i?.goodsInfoList?.[0]?.volume}}方,{{i?.goodsInfoList?.[0]?.number}}件
+    </sv>
  </sv-container>
  <div class="mt-md">
    <h4 class="text-md">装货卸货信息
@ -158,7 +129,7 @@
 <nz-card nzTitle="保险待定">
 </nz-card>

-<nz-card nzTitle="运费信息" id="distannce3">
+<nz-card nzTitle="运费信息" id="distannce3" #distannce3>
  <st #st [data]="i?.billExpenseDetails" [columns]="logColumns" [ps]="0" [page]="{ show: false, showSize: false }">

  </st>
@ -166,7 +137,7 @@
  <div>收款人：</div>
 </nz-card>

-<nz-card nzTitle="附件信息" id="distannce4">
+<nz-card nzTitle="附件信息" id="distannce4" #distannce4>
  <sv-container>
    <sv label="协议附件">
      <!-- {{i?.supplementaryInformationVO?.stateReceipt?'是':'否'}} -->
@ -202,11 +173,11 @@
    <sv label="详细地址">
      {{i?.goodsResource?.receiptAddress}}
    </sv>
-  
+
  </sv-container>
  <sv-container col="1" class="mt-md">
    <sv label="回单凭证">
-      <app-imagelist [imgList]="[i?.receiptFilePath]"></app-imagelist>
+      <app-imagelist [imgList]="i?.receiptFilePath"></app-imagelist>
    </sv>
    <sv label="备注">
      {{i?.goodsResource?.remarks}}
@ -216,26 +187,27 @@

 <nz-card>
  <div nz-row>
-    <nz-card nzTitle="轨迹信息" style="width: 100%;" id="distannce5">
-      <div nz-row > 
+    <nz-card nzTitle="轨迹信息" style="width: 100%;" id="distannce5" #distannce5>
+      <div nz-row>
        <div nz-col [nzSpan]='12'>
-    <!-- <st #st [data]="i?.auditRecordList" [columns]="logColumns" [ps]="0" [page]="{ show: false, showSize: false }">
+          <!-- <st #st [data]="i?.auditRecordList" [columns]="logColumns" [ps]="0" [page]="{ show: false, showSize: false }">
    </st> -->
-  </div>
-  <div nz-col [nzSpan]='12'>
-     <amap-path-simplifier></amap-path-simplifier>
-   </div>
-   </div>
+        </div>
+        <div nz-col [nzSpan]='12'>
+          <amap-path-simplifier></amap-path-simplifier>
+        </div>
+      </div>
    </nz-card>
  </div>
 </nz-card>

-<nz-modal [(nzVisible)]="isVisible"   [nzFooter]="nzModalFooter" nzTitle="附件信息" (nzOnOk)="handleOK()" (nzOnCancel)="handleCancel()">
+<nz-modal [(nzVisible)]="isVisible" [nzFooter]="nzModalFooter" nzTitle="附件信息" (nzOnOk)="handleOK()"
+  (nzOnCancel)="handleCancel()">
  <ng-container *nzModalContent>
    <app-imagelist [imgList]="[imges]"></app-imagelist>
  </ng-container>
  <ng-template #nzModalFooter>
    <button nz-button nzType="primary" (click)="handleOK()" [disabled]="">取消</button>
-    <button nz-button nzType="default" (click)="handleCancel()">确定  </button>
+    <button nz-button nzType="default" (click)="handleCancel()">确定 </button>
  </ng-template>
 </nz-modal>
--- a/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.less
+++ b/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.less
@ -35,23 +35,6 @@
            }
        }

-        .ant-tabs-top>.ant-tabs-nav,
-        .ant-tabs-bottom>.ant-tabs-nav,
-        .ant-tabs-top>div>.ant-tabs-nav,
-        .ant-tabs-bottom>div>.ant-tabs-nav {
-            margin: 0;
-        }
-
-        .ant-anchor-ink::before {
-            width: 0;
-        }
-
-        .ant-tabs-card.ant-tabs-top>.ant-tabs-nav .ant-tabs-tab+.ant-tabs-tab,
-        .ant-tabs-card.ant-tabs-bottom>.ant-tabs-nav .ant-tabs-tab+.ant-tabs-tab,
-        .ant-tabs-card.ant-tabs-top>div>.ant-tabs-nav .ant-tabs-tab+.ant-tabs-tab,
-        .ant-tabs-card.ant-tabs-bottom>div>.ant-tabs-nav .ant-tabs-tab+.ant-tabs-tab {
-            margin-left: 40px
-        }
    }

    .leftPadding {
--- a/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts
+++ b/src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts
@ -11,6 +11,7 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { STColumn } from '@delon/abc/st';
 import { _HttpClient } from '@delon/theme';
+import { NzCardComponent } from 'ng-zorro-antd/card';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { OrderManagementService } from '../../services/order-management.service';
@ -20,12 +21,11 @@ import { OrderManagementService } from '../../services/order-management.service'
  styleUrls: ['./vehicle-detail.component.less']
 })
 export class OrderManagementVehicleDetailComponent implements OnInit {
-
  id = this.route.snapshot.params.id;
-  i: any= {
-    unLoadingPlaceList:[],
+  i: any = {
+    unLoadingPlaceList: [],
    billExpenseDetails: [],
-    goodsInfoList:[],
+    goodsInfoList: [],
    goodsResource: []
  };
  imges: any;
@ -48,9 +48,9 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
        '1': { text: '待申请', color: 'warning' },
        '2': { text: '已支付', color: 'success' },
        '3': { text: '已拒绝', color: 'warning' },
-        '4': { text: '申请中', color: 'warning' },
-      },
-    },
+        '4': { text: '申请中', color: 'warning' }
+      }
+    }
  ];

  constructor(
@ -59,30 +59,28 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
    private service: OrderManagementService,
    private modalService: NzModalService,
    private router: Router
-  ) {
-
-  }
+  ) {}

  ngOnInit(): void {
-    console.log(this.id)
-    this.initData()
+    console.log(this.id);
+    this.initData();
  }

  initData() {
-    this.service.request(this.service.$api_get_getWholeBillDetail, {id: this.id}).subscribe(res => {
-      console.log(res)
+    this.service.request(this.service.$api_get_getWholeBillDetail, { id: this.id }).subscribe(res => {
+      console.log(res);
      if (res) {
-        this.i =res;
-        this.approvalLsit =  res.scheduleVOList
+        this.i = res;
+        this.approvalLsit = res.scheduleVOList;
        this.approvalLsit.map((item: any, key: any) => {
-          console.log(item)
-          if(item.displayStatus === 'HIDE') {
-            delete(this.approvalLsit[key])
+          console.log(item);
+          if (item.displayStatus === 'HIDE') {
+            delete this.approvalLsit[key];
          }
-        })
-        console.log(this.approvalLsit)
+        });
+        console.log(this.approvalLsit);
      }
-    })
+    });
  }

  goBack() {
@ -90,21 +88,27 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
  }
  // 修改订单
  changeOrder() {
-    console.log(this.id)
-    this.router.navigate(['order-management/vehicle-detailChange', this.id])
+    console.log(this.id);
+    this.router.navigate(['order-management/vehicle-detailChange', this.id]);
  }
  agreement(value: any) {
-    if(value === '1') {
-      this.imges = this.i?.agreementFilePath
+    if (value === '1') {
+      this.imges = this.i?.agreementFilePath;
    } else if (value === '2') {
-      this.imges = this.i?.agreementFilePath
-     }
+      this.imges = this.i?.agreementFilePath;
+    }
    this.isVisible = true;
  }
  handleCancel() {
-    this.isVisible = false
+    this.isVisible = false;
  }
  handleOK() {
-  this.isVisible = false
+    this.isVisible = false;
+  }
+
+  goDistance(elf: NzCardComponent) {
+    if (elf) {
+      elf['elementRef'].nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
+    }
  }
 }