车辆对接

src/app/routes/order-management/components/vehicle-detail-change/vehicle-detail-change.component.html

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-12-03 15:31:52
- * @LastEditTime: 2021-12-23 14:33:37
+ * @LastEditTime: 2021-12-23 16:36:42
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \tms-obc-web\src\app\routes\order-management\components\vehicle-detail\vehicle-detail.component.html
@@ -81,9 +81,11 @@
     <div style="width: 60%; margin: 0 auto">
       <nz-steps [nzLabelPlacement]="'vertical'">
         <nz-step [nzStatus]="i?.resourceStatus !== '1'?'finish':'process'" nzIcon="solution"
-          [nzDescription]="i?.createAt" nzTitle="下单"></nz-step>
+        [nzDescription]="i?.createAt" nzTitle="下单"></nz-step>
+
         <nz-step *ngIf="i?.resourceStatus === '1' || i?.resourceStatus === '2' "
           [nzStatus]="i?.resourceStatus=== '1'? 'wait':'finish'" nzIcon="file-done" [nzTitle]="'接单'"></nz-step>
+          
         <nz-step nzStatus="finish" nzIcon="close-circle" nzTitle="取消货源" *ngIf="i?.resourceStatus === '3'"></nz-step>
       </nz-steps>
     </div>
@@ -202,38 +204,6 @@
     <ng-template #endInconTemp1><i nz-icon nzType="global"></i></ng-template>
   </form>
 </nz-card>
-<!-- <nz-card nzTitle="装卸货信息(一装一卸)" id="distannce1" >
-  <div class="mt-md">
-    <div nz-row [nzGutter]="24">
-      <div nz-col [nzSpan]="12">
-        <div class="handling-info p-md">
-          <div class="flex" *ngFor="let item of i?.unLoadingPlaceList;let idx = index">
-            <div *ngIf="item?.type === '1'" class="loading-row">
-              <div class="info">
-                <h4>装货地：{{item?.province}}{{item?.city}}{{item?.area}}{{item?.detailedAddress}}</h4>
-                <p>联系人：{{item?.appUserName}}/{{item?.contractTelephone}}</p>
-              </div>
-            </div>
-          </div>
-          <p class="time-info">计划装货时间：{{i?.goodsResource?.[0]?.loadingTime}}</p>
-        </div>
-      </div>
-      <div nz-col [nzSpan]="12">
-        <div class="handling-info p-md">
-          <div class="flex" *ngFor="let item of i?.unLoadingPlaceList;let idx = index">
-            <div *ngIf="item?.type === '2'" class="loading-row">
-              <div class="info">
-                <h4>卸货地：{{item?.province}}{{item?.city}}{{item?.area}}{{item?.detailedAddress}}</h4>
-                <p>联系人：{{item?.appUserName}}/{{item?.contractTelephone}}</p>
-              </div>
-            </div>
-          </div>
-          <p class="time-info">计划卸货时间：{{i?.goodsResource?.[0]?.unloadingTime}}</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</nz-card> -->
 <nz-card nzTitle="基本信息" id="distannce2">
   <!-- <sv-container col="1">
       <sv label="网络货运人">
@@ -261,59 +231,66 @@
     <div nz-col nzSpan="12">
       <sf #sf3 [schema]="schema3" [formData]="sf3data" [button]="'none'" [ui]="ui3"></sf>
       <sf #sf4 [schema]="schema4" [formData]="sf4data" [button]="'none'" [ui]="ui4">
-        <ng-template sf-template="weight" let-i let-ui="ui">
+        <ng-template sf-template="weight" let-item let-ui="ui">
           <nz-input-group [nzAddOnAfter]="'吨'">
             <input
               nz-input
               type="number"
-              [ngModel]="i.value"
+              [ngModel]="item.value"
               min="0"
               step="0.01"
-              (ngModelChange)="i.setValue($event)"
+              (ngModelChange)="item.setValue($event)"
               placeholder="总重量，必填"
             />
           </nz-input-group>
         </ng-template>
-        <ng-template sf-template="volume" let-i let-ui="ui">
+        <ng-template sf-template="volume" let-item let-ui="ui">
           <nz-input-group [nzAddOnAfter]="'方'">
             <input
               nz-input
               type="number"
-              [ngModel]="i.value"
+              [ngModel]="item.value"
               min="0"
               step="0.01"
-              (ngModelChange)="i.setValue($event)"
+              (ngModelChange)="item.setValue($event)"
               placeholder="总体积"
             />
           </nz-input-group>
         </ng-template>
  
-        <ng-template sf-template="number" let-i let-ui="ui">
+        <ng-template sf-template="number" let-item let-ui="ui">
           <nz-input-group [nzAddOnAfter]="'车'">
             <input
               nz-input
               type="number"
-              [ngModel]="i.value"
+              [ngModel]="item.value"
               min="0"
               step="0.01"
-              (ngModelChange)="i.setValue($event)"
+              (ngModelChange)="item.setValue($event)"
               placeholder="总车次"
             />
           </nz-input-group>
         </ng-template>
 
-        <ng-template sf-template="carmand" let-i let-ui="ui">
+        <ng-template sf-template="carmand" let-item let-ui="ui">
-            {{i?.goodsInfoList?.[0]?.maxWeightLabel}}/{{i?.goodsInfoList?.[0]?.maxCube}}
+        {{i?.goodsInfoList?.[0]?.maxWeightLabel}}/{{i?.goodsInfoList?.[0]?.maxCubeLabel}}
         </ng-template>
 
-        <ng-template sf-template="drivers" let-i let-ui="ui">
+        <ng-template sf-template="drivers" let-item let-ui="ui">
           {{i?.driverId}}
       </ng-template>
 
-      <ng-template sf-template="weightModel" let-i let-ui="ui">
+      <ng-template sf-template="weightModel" let-item let-ui="ui">
           {{i?.goodsInfoList?.[0]?.weight}}顿,{{i?.goodsInfoList?.[0]?.volume}}方,{{i?.goodsInfoList?.[0]?.number}}件
         </ng-template>
 
+      <ng-template sf-template="loadingTime" let-item let-ui="ui">
+               <nz-date-picker nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss"  [(ngModel)]="loadingTime"></nz-date-picker>
+        </ng-template>
+      <ng-template sf-template="unloadingTime" let-item let-ui="ui">
+        <nz-date-picker nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss"  [(ngModel)]="unloadingTime"></nz-date-picker>
+        </ng-template>
+
       </sf>
     </div>
   </div>
@@ -321,31 +298,83 @@
 </nz-card>
 
 
-<nz-card nzTitle="保险待定">
-</nz-card>
-
 <nz-card nzTitle="运费信息" id="distannce3">
   <st #st [data]="i?.billExpenseDetails" [columns]="logColumns" [ps]="0" [page]="{ show: false, showSize: false }">
-
+    <ng-template st-row="price" let-item let-index="index">
+      <input  nz-input [ngModel]="item?.price" (ngModelChange)="st.setRow(index, { name: $event })" />
+    </ng-template>
+    <ng-template st-row="paymentMethodRate" let-item let-index="index">
+      <input  nz-input [ngModel]="item?.paymentMethodRate" (ngModelChange)="st.setRow(index, { name: $event })" />
+    </ng-template>
   </st>
-  <div>总计：{{i?.total | currency: '￥'}}（运费￥3500.00，附加运费￥191.98，附加费率3.5%）</div>
+  <div style="margin-top: 15px;">总计：{{i?.total | currency: '￥'}}（运费￥3500.00，附加运费￥191.98，附加费率3.5%）</div>
-  <div>收款人：</div>
+  <div style="display: flex;">收款人：
+    <div style="display: flex;">
+      <input nz-input placeholder="请输入司机手机号" [(ngModel)]="dirverPhone" />
+    &nbsp;&nbsp;&nbsp;&nbsp;<input nz-input placeholder="选择银行卡" [(ngModel)]="dirverBankCard" />
+    </div>
+    
+  </div>
 </nz-card>
 
 <nz-card nzTitle="附件信息" id="distannce4">
   <sv-container>
     <sv label="协议附件">
-      {{i?.supplementaryInformationVO?.stateReceipt?'是':'否'}}
+      <!-- {{i?.supplementaryInformationVO?.stateReceipt?'是':'否'}} -->
+      <a href="javascript:;" (click)="agreement('1')">查看附件</a>&nbsp;&nbsp;&nbsp;&nbsp;
+      <a href="javascript:;" (click)="agreement('2')">补充协议</a>
     </sv>
   </sv-container>
   <sv-container col="2" class="mt-md">
     <sv label="装货凭证">
-      <app-imagelist [imgList]="[i?.goodsResource]">
+      <!-- <app-imagelist [imgList]="[i?.goodsResource]">
-      </app-imagelist>
+      </app-imagelist> -->
+      <nz-upload
+    class="avatar-uploader"
+    [nzAction]="service.$api_upload_url"
+    [nzName]="'multipartFile'"
+    nzListType="picture-card"
+    [(nzFileList)]="listImagUrls"
+    [nzShowButton]="listImagUrls.length < 5"
+    [nzPreview]="handlePreview1"
+    [nzBeforeUpload]="beforeUpload"
+    (nzChange)="handleChange1($event)"
+  >
+    <div>
+      <i nz-icon nzType="plus"></i>
+      <div style="margin-top: 8px">请上传图片</div>
+    </div>
+  </nz-upload>
+  <nz-modal [nzVisible]="previewVisible1" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible1 = false">
+    <ng-template #modalContent>
+      <img [src]="previewImage1" [ngStyle]="{ width: '100%' }" />
+    </ng-template>
+  </nz-modal>
     </sv>
     <sv label="卸货凭证">
-      <app-imagelist [imgList]="[i?.goodsResource]">
+      <!-- <app-imagelist [imgList]="[i?.goodsResource]">
-      </app-imagelist>
+      </app-imagelist> -->
+      <nz-upload
+      class="avatar-uploader"
+      [nzAction]="service.$api_upload_url"
+      [nzName]="'multipartFile'"
+      nzListType="picture-card"
+      [(nzFileList)]="listImagUrls2"
+      [nzShowButton]="listImagUrls2.length < 5"
+      [nzPreview]="handlePreview2"
+      [nzBeforeUpload]="beforeUpload"
+      (nzChange)="handleChange1($event)"
+    >
+      <div>
+        <i nz-icon nzType="plus"></i>
+        <div style="margin-top: 8px">请上传图片</div>
+      </div>
+    </nz-upload>
+    <nz-modal [nzVisible]="previewVisible2" [nzContent]="modalContent2" [nzFooter]="null" (nzOnCancel)="previewVisible2 = false">
+      <ng-template #modalContent2>
+        <img [src]="previewImage2" [ngStyle]="{ width: '100%' }" />
+      </ng-template>
+    </nz-modal>
     </sv>
   </sv-container>
 </nz-card>
@@ -391,4 +420,13 @@
    </div>
     </nz-card>
   </div>
-</nz-card>
+</nz-card>
+<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>
+  </ng-template>
+</nz-modal>

src/app/routes/order-management/components/vehicle-detail-change/vehicle-detail-change.component.ts

@@ -2,7 +2,7 @@ import { ViewChild } from '@angular/core';
 /*
  * @Author: your name
  * @Date: 2021-12-03 15:31:52
- * @LastEditTime: 2021-12-23 14:33:36
+ * @LastEditTime: 2021-12-23 16:34:02
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \tms-obc-web\src\app\routes\order-management\components\vehicle-detail\vehicle-detail.component.ts
@@ -10,13 +10,23 @@ import { ViewChild } from '@angular/core';
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
-import { STColumn } from '@delon/abc/st';
+import { STColumn, STComponent } from '@delon/abc/st';
 import { SFComponent, SFSchema, SFSelectWidgetSchema, SFUISchema } from '@delon/form';
 import { _HttpClient } from '@delon/theme';
 import { AmapPoiPickerComponent, AmapService, ShipperBaseService } from '@shared';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalService } from 'ng-zorro-antd/modal';
+import { NzUploadChangeParam, NzUploadFile } from 'ng-zorro-antd/upload';
+import { Observable, Observer } from 'rxjs';
 import { OrderManagementService } from '../../services/order-management.service';
+function getBase64(file: File): Promise<string | ArrayBuffer | null> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+  });
+}
 @Component({
   selector: 'app-supply-management-vehicle-detail-change',
   templateUrl: './vehicle-detail-change.component.html',
@@ -27,27 +37,7 @@ export class OrderManagementVehicleDetailChangeComponent implements OnInit {
   id = this.route.snapshot.params.id;
   @ViewChild('distannce3', { static: false })
   i: any= {unLoadingPlaceList:[]};
-  logColumns: STColumn[] = [
+  logColumns: STColumn[] =[]
-    { title: '款项', index: 'costName' },
-    { title: '总费用（元）', index: 'price' },
-    { title: '协议金额（元）', index: 'price' },
-    { title: '附加费（元）', index: 'surcharge' },
-    { title: '附加费率（%）', index: 'paymentMethodRate' },
-    { title: '支付时间', index: ' paymentTime' },
-    {
-      title: '支付状态',
-      className: 'text-center',
-      index: 'paymentStatus',
-      type: 'badge',
-      width: '120px',
-      badge: {
-        '1': { text: '待申请', color: 'warning' },
-        '2': { text: '已支付', color: 'success' },
-        '3': { text: '已拒绝', color: 'warning' },
-        '4': { text: '申请中', color: 'warning' },
-      },
-    },
-  ];
   totalDistance = 0.0; //总里程
   totalTime = 0.0; //路程总时间
   startInfo: any = [];  // 装货信息
@@ -56,17 +46,27 @@ export class OrderManagementVehicleDetailChangeComponent implements OnInit {
   loadingTime: any; // 货源单设置回显
   sf3data: any; // 货源单设置回显
   sf4data: any; // 货源单设置回显
+  dirverPhone: any; // 货源单设置回显
+  dirverBankCard: any; // 货源单设置回显
+  listImagUrls: any[] = []; // 货源单设置回显
+  listImagUrls2: any[] = []; // 货源单设置回显
+  imges: any;
+  previewImage1 = '';
+  previewVisible1 = false;
+  previewImage2 = '';
+  previewVisible2 = false;
   @ViewChild('sf3', { static: false }) sf3!: SFComponent;
   schema3: SFSchema = {};
   ui3!: SFUISchema;
-
+  @ViewChild('st') st!: STComponent;
   @ViewChild('sf4', { static: false }) sf4!: SFComponent;
   schema4: SFSchema = {};
+  isVisible = false;
   ui4!: SFUISchema;
   constructor(
     private route: ActivatedRoute,
     private msgSrv: NzMessageService,
-    private service: OrderManagementService,
+    public service: OrderManagementService,
     private modalService: NzModalService,
     private amapService: AmapService,
     public service2: ShipperBaseService,
@@ -80,6 +80,7 @@ export class OrderManagementVehicleDetailChangeComponent implements OnInit {
 
   ngOnInit(): void {
     console.log(this.id)
+    this.initST();
     this.initSF3();
     this.initSF4();
     this.initData()
@@ -90,6 +91,28 @@ export class OrderManagementVehicleDetailChangeComponent implements OnInit {
       console.log(res)
       if (res) {
         this.i = res;
+        // 对装货凭证进行初始化
+        let arr : any= []
+        res.filePathList.forEach((element: any, index: any) => {
+          console.log(index)
+         arr.push(  {
+          url: element,
+          status: 'done',
+          uid: index
+        })
+        });
+        this.listImagUrls = arr;
+        let arr2 : any= []
+        res.filePathList.forEach((element: any, index: any) => {
+         arr2.push(  {
+          url: element,
+          status: 'done',
+          uid: index
+        })
+        });
+        this.listImagUrls2 = arr2;
+
+        // 对装卸货信息进行初始化
         res?.unLoadingPlaceList.forEach((element: any) => {
           if(element.type === 1 || element.type === '1') {
             const controlId = this.startInfo.length;
@@ -148,6 +171,24 @@ export class OrderManagementVehicleDetailChangeComponent implements OnInit {
   }
   // 保存修改
   save() {
+    let imgList : any= [];
+    if(this.listImagUrls.length > 0) {
+      this.listImagUrls.forEach((res :any) => {
+        if(res.url) {
+          imgList.push(res.url)
+        }
+      })
+    }
+    console.log(imgList)
+    let imgList2 : any= [];
+    if(this.listImagUrls2.length > 0) {
+      this.listImagUrls2.forEach((res :any) => {
+        if(res.url) {
+          imgList2.push(res.url)
+        }
+      })
+    }
+    console.log(imgList2)
     if(typeof(this.validateForm1.value.unloadingTime) !== 'string' ) {
       var c = new Date(this.validateForm1.value.unloadingTime);  
       this.validateForm1.value.unloadingTime = c.getFullYear() + '-' + this.addPreZero(c.getMonth() + 1) + '-' + this.addPreZero(c.getDate()) + ' ' + this.addPreZero(c.getHours()) + ':' + this.addPreZero(c.getMinutes()) + ':' + this.addPreZero(c.getSeconds())
@@ -303,11 +344,11 @@ initSF3() {
         }
       }
     },
-    required: ['goodsName', ]
+    required: ['goodsName', 'enterpriseInfoId']
   };
   this.ui3 = {
     '*': {
-      spanLabelFixed: 90,
+      spanLabelFixed: 110,
       grid: { span: 12 }
     },
     $enterpriseInfoId: {
@@ -321,6 +362,29 @@ initSF3() {
     }
   };
 }
+initST() {
+ this.logColumns = [
+    { title: '款项', index: 'costName' },
+    { title: '总费用（元）', index: 'price' },
+    { title: '协议金额（元）', render: 'price' },
+    { title: '附加费（元）', index: 'surcharge' },
+    { title: '附加费率（%）', render: 'paymentMethodRate' },
+    { title: '支付时间', index: ' paymentTime' },
+    {
+      title: '支付状态',
+      className: 'text-center',
+      index: 'paymentStatus',
+      type: 'badge',
+      width: '120px',
+      badge: {
+        '1': { text: '待申请', color: 'warning' },
+        '2': { text: '已支付', color: 'success' },
+        '3': { text: '已拒绝', color: 'warning' },
+        '4': { text: '申请中', color: 'warning' },
+      },
+    },
+  ];
+}
 initSF4() {
   this.schema4 = {
     properties: {
@@ -373,9 +437,25 @@ initSF4() {
           placeholder: '请输入'
         }
       },
+      loadingTime: {
+        type: 'string',
+        title: '发车时间',
+        ui: {
+          widget: 'custom',
+          placeholder: '请输入'
+        }
+      },
+      unloadingTime: {
+        type: 'string',
+        title: '到车时间',
+        ui: {
+          widget: 'custom',
+          placeholder: '请输入'
+        }
+      },
    
     },
-    required: ['weight',]
+    required: ['weight','loadingTime','unloadingTime']
   };
   this.ui4 = {
     '*': {
@@ -400,6 +480,80 @@ initSF4() {
     $drivers: {
       grid: { span: 12 }
     },
+    $loadingTime: {
+      grid: { span: 12 }
+    },
+    $unloadingTime: {
+      grid: { span: 12 }
+    },
   };
 }
+// 处理上传图片
+handlePreview1 = async (file: NzUploadFile) => {
+  if (!file.url && !file.preview) {
+    file.preview = await getBase64(file.originFileObj!);
+  }
+  this.previewImage1 = file.url || file.preview;
+  this.previewVisible1 = true;
+};
+handlePreview2 = async (file: NzUploadFile) => {
+  if (!file.url && !file.preview) {
+    file.preview = await getBase64(file.originFileObj!);
+  }
+  this.previewImage2 = file.url || file.preview;
+  this.previewVisible2 = true;
+};
+handleChange1(info: NzUploadChangeParam): void {
+  switch (info.file.status) {
+    case 'uploading':
+      break;
+    case 'done':
+      let fileList = [...info.fileList];
+      // 2. Read from response and show file link
+      console.log(fileList)
+      fileList = fileList.map((file: any) => {
+        if (file.response) {
+          file.url = file.response.data.fullFilePath;
+        }
+        return file;
+      });
+      break;
+    case 'error':
+      this.service.msgSrv.error('网络错误');
+      break;
+  }
+}
+beforeUpload = (file: NzUploadFile, _fileList: NzUploadFile[]) => {
+  return new Observable((observer: Observer<boolean>) => {
+    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmp';
+    if (!isJpgOrPng) {
+      this.service.msgSrv.warning('只能上传图片!');
+      observer.complete();
+      return;
+    }
+    // tslint:disable-next-line: no-non-null-assertion
+    const isLt2M = file.size! / 1024 / 1024 < 3;
+    if (!isLt2M) {
+      this.service.msgSrv.warning('图片大小超过3兆!');
+      observer.complete();
+      return;
+    }
+    observer.next(isJpgOrPng && isLt2M);
+    observer.complete();
+  });
+};
+agreement(value: any) {
+  if(value === '1') {
+    this.imges = this.i?.supplementAgreement
+  } else if (value === '2') {
+    this.imges = this.i?.supplementAgreement
+   }
+  this.isVisible = true;
+}
+handleCancel() {
+  this.isVisible = false
+}
+handleOK() {
+this.isVisible = false
+}
 }

src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.html

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-12-03 15:31:52
- * @LastEditTime: 2021-12-23 13:39:32
+ * @LastEditTime: 2021-12-23 16:36:44
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \tms-obc-web\src\app\routes\order-management\components\vehicle-detail\vehicle-detail.component.html
@@ -164,7 +164,9 @@
 <nz-card nzTitle="附件信息" id="distannce4">
   <sv-container>
     <sv label="协议附件">
-      {{i?.supplementaryInformationVO?.stateReceipt?'是':'否'}}
+      <!-- {{i?.supplementaryInformationVO?.stateReceipt?'是':'否'}} -->
+      <a href="javascript:;" (click)="agreement('1')">查看附件</a> &nbsp;&nbsp;&nbsp;&nbsp;
+      <a href="javascript:;" (click)="agreement('2')">补充协议</a>
     </sv>
   </sv-container>
   <sv-container col="2" class="mt-md">
@@ -220,4 +222,14 @@
    </div>
     </nz-card>
   </div>
-</nz-card>
+</nz-card>
+
+<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>
+  </ng-template>
+</nz-modal>

src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts

@@ -2,7 +2,7 @@ import { ViewChild } from '@angular/core';
 /*
  * @Author: your name
  * @Date: 2021-12-03 15:31:52
- * @LastEditTime: 2021-12-23 13:47:57
+ * @LastEditTime: 2021-12-23 16:35:59
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \tms-obc-web\src\app\routes\order-management\components\vehicle-detail\vehicle-detail.component.ts
@@ -24,6 +24,8 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
   id = this.route.snapshot.params.id;
   @ViewChild('distannce3', { static: false })
   i: any= {unLoadingPlaceList:[]};
+  imges: any;
+  isVisible = false;
   logColumns: STColumn[] = [
     { title: '款项', index: 'costName' },
     { title: '总费用（元）', index: 'price' },
@@ -86,4 +88,18 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
     console.log(this.id)
     this.router.navigate(['order-management/vehicle-detailChange', this.id])
   }
+  agreement(value: any) {
+    if(value === '1') {
+      this.imges = this.i?.supplementAgreement
+    } else if (value === '2') {
+      this.imges = this.i?.supplementAgreement
+     }
+    this.isVisible = true;
+  }
+  handleCancel() {
+    this.isVisible = false
+  }
+  handleOK() {
+  this.isVisible = false
+  }
 }