车辆对接

src/app/routes/order-management/modal/bulk/confir-receipt/confir-receipt.component.html

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-12-14 14:03:07
- * @LastEditTime: 2021-12-21 14:47:26
+ * @LastEditTime: 2021-12-22 18:53:54
  * @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\modal\bulk\update-freight\update-freight.component.html
@@ -42,12 +42,12 @@ nzMessage="签收后不可再修改运费，请确保运费等信息准确无误
         <div>{{detailList?.goodsInfoVO?.volume}}吨</div>
     </sv>
     <sv label="卸货体积">
-        <div>xx吨</div>
+        <div>{{detailList?.settlementVolume}}方</div>
     </sv>
   </sv-container>
   <sv-container col="1">
     <sv label="总运费">
-      <div>{{detailList?.goodsInfoVO?.freightPrice ? detailList?.goodsInfoVO?.freightPrice + '元' : ''}}  </div>
+      <div>{{detailList?.price}} 元</div>
   </sv>
   <sv label="司机车辆">
     <div>{{driverList?.nickName}} / {{driverList?.telephone}}/ {{carList?.carNo}}</div>
@@ -55,11 +55,29 @@ nzMessage="签收后不可再修改运费，请确保运费等信息准确无误
 <sv label="收款人">
   <div>{{payeeList?.nickName}} / {{payeeList?.telephone}}</div>
 </sv>
-  <sv label="回单凭证">
-    <!-- <app-imagelist
-      [imgList]="[userIdentityDetail?.certificatePhotoFrontWatermark,userIdentityDetail?.certificatePhotoBackWatermark]">
-    </app-imagelist> -->
-  </sv>
+<sv label="回单凭证">
+  <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-container>
 <div class="modal-footer">
   <button nz-button type="button" (click)="close()">关闭</button>

src/app/routes/order-management/modal/bulk/confir-receipt/confir-receipt.component.ts

@@ -2,7 +2,7 @@ import { preloaderFinished } from '@delon/theme';
 /*
  * @Author: your name
  * @Date: 2021-12-14 14:03:07
- * @LastEditTime: 2021-12-21 13:43:08
+ * @LastEditTime: 2021-12-22 19:10:07
  * @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\modal\bulk\update-freight\update-freight.component.ts
@@ -22,7 +22,16 @@ import { _HttpClient } from '@delon/theme';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalRef } from 'ng-zorro-antd/modal';
 import { OrderManagementService } from '../../../services/order-management.service';
-
+import { NzUploadChangeParam, NzUploadFile } from 'ng-zorro-antd/upload';
+import { Observable, Observer } from 'rxjs';
+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-order-management-confir-receipt',
   templateUrl: './confir-receipt.component.html',
@@ -36,6 +45,9 @@ export class ConfirReceiptComponent implements OnInit {
   driverList: any;
   payeeList: any;
   carList: any;
+  listImagUrls: any[] = [];
+  previewImage1 = '';
+  previewVisible1 = false;
   constructor(private modal: NzModalRef, private msgSrv: NzMessageService, public http: _HttpClient, public service: OrderManagementService) {}
 
   ngOnInit(): void {
@@ -44,10 +56,26 @@ export class ConfirReceiptComponent implements OnInit {
 
   save(): void {
     // 大宗
-    this.service.request(this.service.$api_get_signBulkOrder, {id: this.i?.id}).subscribe((res: any) => {
+    console.log(this.listImagUrls)
+    let imgList : any= [];
+    if(this.listImagUrls.length > 0) {
+      this.listImagUrls.forEach((res :any) => {
+        if(res.url) {
+          imgList.push(res.url)
+        }
+      })
+    }
+    console.log(imgList)
+    const params = {
+      id: this.i?.id,
+      filePathList: imgList,
+    }
+    console.log(params)
+    this.service.request(this.service.$api_get_signBulkOrder, params).subscribe((res: any) => {
       console.log(res.success)
       if(res) {
         this.service.msgSrv.success('确认签收成功！')
+        this.modal.destroy();
       } else {
         this.service.msgSrv.error(res.msg)
       }
@@ -58,6 +86,16 @@ export class ConfirReceiptComponent implements OnInit {
       this.service.request(this.service.$api_get_getBulkSignForDetail, {id: this.i?.id}).subscribe((res: any) => {
         console.log(res)
         this.detailList = 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;
         this.service.request(this.service.$api_getUserDetailByAppUserId, {id: this.detailList?.payeeId}).subscribe((res: any) => {
           console.log(res)
           this.payeeList = res;
@@ -81,5 +119,51 @@ export class ConfirReceiptComponent implements OnInit {
   userAction() {
 
   }
-
+  handlePreview1 = async (file: NzUploadFile) => {
+    if (!file.url && !file.preview) {
+      file.preview = await getBase64(file.originFileObj!);
+    }
+    this.previewImage1 = file.url || file.preview;
+    this.previewVisible1 = 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;
+        });
+        console.log(this.listImagUrls)
+        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();
+    });
+  };
 }