车辆对接

2021-12-23 16:41:02 +08:00
parent e974ca1593
commit 532755c8a9
4 changed files with 311 additions and 91 deletions
--- a/src/app/routes/order-management/components/vehicle-detail-change/vehicle-detail-change.component.html
+++ b/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">
-            {{i?.goodsInfoList?.[0]?.maxWeightLabel}}/{{i?.goodsInfoList?.[0]?.maxCube}}
+        <ng-template sf-template="carmand" let-item let-ui="ui">
+        {{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>收款人：</div>
+  <div style="margin-top: 15px;">总计：{{i?.total | currency: '￥'}}（运费￥3500.00，附加运费￥191.98，附加费率3.5%）</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>
+      <!-- <app-imagelist [imgList]="[i?.goodsResource]">
+      </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>
+      <!-- <app-imagelist [imgList]="[i?.goodsResource]">
+      </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>
--- a/src/app/routes/order-management/components/vehicle-detail-change/vehicle-detail-change.component.ts
+++ b/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[] = [
-    { 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' },
-      },
-    },
-  ];
+  logColumns: STColumn[] =[]
  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
+}
 }
--- 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
@ -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>
--- 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
@ -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
+  }
 }