车辆对接

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

@@ -0,0 +1,377 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-12-03 15:31:52
+ * @LastEditTime: 2021-12-24 17:49:33
+ * @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
+-->
+<page-header-wrapper [title]="''" [logo]="logo" [content]="headerContent">
+  <ng-template #logo>
+    <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
+      <i nz-icon nzType="left" nzTheme="outline"></i>
+    </button>
+  </ng-template>
+  <ng-template #headerContent>
+    <div class="mb-xs" nz-row>
+      <h4 class="ml-md" style="font-size: 18px;">订单号: {{ i?.billCode }}</h4>
+    </div>
+    <div nz-row style="display: flex; justify-content: end;">
+      <div nz-col nzSpan="10">
+        <button nz-button (click)="cancelChange()">取消修改</button>
+        <button nz-button nzType="primary" (click)="save()" nzGhost>保存修改</button>
+      </div>
+    </div>
+   <div>
+     <div style="display: flex; justify-content: space-between;">
+      <div sv-container>
+        <sv label="货主">{{ i?.goodsResource?.[0]?.shipperAppUserName }} </sv>
+        <sv label="所属项目">{{i?.goodsResource?.[0]?.enterpriseProjectName}}</sv>
+        <sv label="服务类型">{{i?.goodsResource?.[0]?.serviceTypeLabel}}</sv>
+        <sv label="录单员">{{i?.goodsResource?.[0]?.dispatchName}} 18100000000 </sv>
+        <sv label="调度员">{{i?.goodsResource?.[0]?.dispatchName}} </sv>
+      </div>
+      <div>
+        <div>状态</div>
+        <div style="font-size: 22px;font-weight: 700;">{{i?.billStatusLabel}}</div>
+      </div>
+     </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>
+  </ng-template>
+</page-header-wrapper>
+<nz-card nzTitle="运单进度">
+  <div class="approval-status">
+    <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>
+
+        <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>
+  </div>
+</nz-card>
+
+
+<nz-card>
+  <div class="card-title" id="distannce1"
+    >装卸货信息<span class="tip-font">预计公里数：{{ totalDistance }}km，预计行程耗时：{{ totalTime }}小时</span></div
+  >
+  <form nz-form [formGroup]="validateForm1" role="form">
+    <div nz-row [nzGutter]="24">
+      <div nz-col [nzSpan]="8">
+        <div *ngFor="let data of startInfo; let idx = index">
+          <nz-form-item>
+            <nz-form-label [nzSpan]="4" nzRequired>装货地</nz-form-label>
+            <nz-form-control [nzErrorTip]="'请输入装货地'">
+              <div class="align-center">
+                <nz-input-group [nzSuffix]="endInconTemp1">
+                  <input
+                    nz-input
+                    [(ngModel)]="data.detailedAddress"
+                    (click)="openMap('start', idx)"
+                    formControlName="loadAddress{{ idx }}"
+                    placeholder="请输入装货地"
+                  />
+                </nz-input-group>
+                <span  style="padding: 0 10px"
+                  ><i nz-icon nzType="menu" nzTheme="outline" style="color: #1890ff" (click)="openMap('start', idx)"></i
+                ></span>
+              </div>
+            </nz-form-control>
+          </nz-form-item>
+          <nz-form-item>
+            <nz-form-label [nzSpan]="4" nzRequired>联系人</nz-form-label>
+            <nz-form-control [nzErrorTip]="'请输入联系人信息'">
+              <div class="align-center">
+                <input nz-input [(ngModel)]="data.appUserName" [ngModelOptions]="{ standalone: true }" maxlength="30" />
+                <input style="margin-left: 12px" nz-input [(ngModel)]="data.contractTelephone" [ngModelOptions]="{ standalone: true }" maxlength="11" />
+              </div>
+            </nz-form-control>
+          </nz-form-item>
+        </div>
+      </div>
+      <div nz-col [nzSpan]="8">
+        <div style="display: flex; justify-content: center">
+          <span style="padding: 24 px; font-size: 30px; color: #7d7d7d"><i nz-icon nzType="swap" nzTheme="outline"></i></span>
+        </div>
+      </div>
+      <div nz-col [nzSpan]="8">
+        <div *ngFor="let data of endInfo; let idx = index">
+          <nz-form-item>
+            <nz-form-label [nzSpan]="4" nzRequired>卸货地</nz-form-label>
+            <nz-form-control [nzErrorTip]="'请输入卸货地'">
+              <div class="align-center">
+                <nz-input-group [nzSuffix]="endInconTemp1">
+                  <input
+                    nz-input
+                    [(ngModel)]="data.detailedAddress"
+                    (click)="openMap('end', idx)"
+                    formControlName="unloadAddress{{ idx }}"
+                    placeholder="请输入卸货地"
+                  />
+                </nz-input-group>
+                <span  style="padding: 0 10px"><i nz-icon nzType="menu" nzTheme="outline" style="color: #1890ff"></i></span>
+              </div>
+            </nz-form-control>
+          </nz-form-item>
+          <nz-form-item>
+            <nz-form-label [nzSpan]="4" nzRequired>联系人</nz-form-label>
+            <nz-form-control [nzErrorTip]="'请输入联系人信息'">
+              <div class="align-center">
+                <input nz-input [(ngModel)]="data.appUserName" [ngModelOptions]="{ standalone: true }" maxlength="30" />
+                <input style="margin-left: 12px" nz-input [(ngModel)]="data.contractTelephone" [ngModelOptions]="{ standalone: true }" maxlength="11" />
+              </div>
+            </nz-form-control>
+          </nz-form-item>
+        </div>
+      </div>
+    </div>
+    <div  nz-row [nzGutter]="24" style="margin-top: 24px">
+      <div nz-col [nzSpan]="9">
+        <p class="time-info">计划装货时间：{{i?.loadPlanTime}}</p>
+      </div>
+      <div nz-col [nzSpan]="8">
+        <p class="time-info">计划卸货时间：{{i?.unloadPlanTime}}</p>
+      </div>
+    </div>
+    <ng-template #endInconTemp1><i nz-icon nzType="global"></i></ng-template>
+  </form>
+</nz-card>
+<nz-card nzTitle="基本信息" id="distannce2">
+  <!-- <sv-container col="1">
+      <sv label="网络货运人">
+        {{i?.goodsResource?.[0]?.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-container> -->
+  <div nz-row>
+    <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-item let-ui="ui">
+          <nz-input-group [nzAddOnAfter]="'吨'">
+            <input
+              nz-input
+              type="number"
+              [ngModel]="item.value"
+              min="0"
+              step="0.01"
+              (ngModelChange)="item.setValue($event)"
+              placeholder="总重量，必填"
+            />
+          </nz-input-group>
+        </ng-template>
+        <ng-template sf-template="volume" let-item let-ui="ui">
+          <nz-input-group [nzAddOnAfter]="'方'">
+            <input
+              nz-input
+              type="number"
+              [ngModel]="item.value"
+              min="0"
+              step="0.01"
+              (ngModelChange)="item.setValue($event)"
+              placeholder="总体积"
+            />
+          </nz-input-group>
+        </ng-template>
+ 
+        <ng-template sf-template="number" let-item let-ui="ui">
+          <nz-input-group [nzAddOnAfter]="'车'">
+            <input
+              nz-input
+              type="number"
+              [ngModel]="item.value"
+              min="0"
+              step="0.01"
+              (ngModelChange)="item.setValue($event)"
+              placeholder="总车次"
+            />
+          </nz-input-group>
+        </ng-template>
+
+        <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-item let-ui="ui">
+          {{i?.driverId}}
+      </ng-template>
+
+      <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="loadTime" let-item let-ui="ui">
+               <nz-date-picker nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss"  [(ngModel)]="loadTime"></nz-date-picker>
+        </ng-template>
+      <ng-template sf-template="unloadTime" let-item let-ui="ui">
+        <nz-date-picker nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss"  [(ngModel)]="unloadTime"></nz-date-picker>
+        </ng-template>
+
+      </sf>
+    </div>
+  </div>
+
+</nz-card>
+
+
+<nz-card nzTitle="运费信息" id="distannce3">
+  <st #st [data]="dirvingMessage" [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, { price: $event })" />
+    </ng-template>
+    <ng-template st-row="paymentMethodRate" let-item let-index="index">
+      <input  nz-input [ngModel]="item?.paymentMethodRate" (ngModelChange)="st.setRow(index, { paymentMethodRate: $event })" />
+    </ng-template> -->
+  </st>
+  <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?'是':'否'}} -->
+      <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">
+    <sf #sf mode="edit" [schema]="schema" [ui]="ui" [formData]="formData" button="none"></sf>
+  </sv-container>
+</nz-card>
+<nz-card nzTitle="补充信息">
+  <sv-container>
+    <sv label="是否回单">
+      {{i?.goodsResource?.stateReceipt ?'是':'否'}}
+    </sv>
+    <sv label="回单类型">
+      {{i?.goodsResource?.receiptTypeLabel}}
+    </sv>
+    <sv label="联系人">
+      {{i?.goodsResource?.receiptUserId}} / {{i?.supplementaryInformationVO?.phon}}
+    </sv>
+    <sv label="所在地区">
+      {{i?.goodsResource?.receiptAddress}}
+    </sv>
+    <sv label="详细地址">
+      {{i?.goodsResource?.receiptAddress}}
+    </sv>
+  </sv-container>
+  <sv-container col="1" class="mt-md">
+    <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 label="备注">
+      {{i?.goodsResource?.remarks}}
+    </sv>
+  </sv-container>
+</nz-card>
+
+<nz-card>
+  <div nz-row>
+    <nz-card nzTitle="轨迹信息" style="width: 100%;" id="distannce5">
+      <div nz-row > 
+        <div nz-col [nzSpan]='12'>
+    <!-- <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>
+    </nz-card>
+  </div>
+</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/bulk-detail-change/bulk-detail-change.component.less

@@ -0,0 +1,86 @@
+:host {
+    .btn-size {
+        font-size: 14px;
+    }
+
+    .bdr {
+        border-right: 1px solid #ccc;
+    }
+
+    .bdl {
+        border-left: 1px solid #ccc;
+    }
+
+    .source-info {
+        p {
+            margin-bottom: .5em;
+        }
+    }
+
+    .freight-info-box {
+        width: 95%;
+    }
+
+    .freigth-label {
+        display   : inline-block;
+        width     : 50px;
+        text-align: right;
+    }
+
+    ::ng-deep {
+        .approval-status {
+            .ant-steps {
+                width : 70%;
+                margin: 0 auto;
+            }
+        }
+
+        .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 {
+        padding-right: 100px;
+    }
+
+    .tip-font {
+        margin-left: 16px;
+        font-weight: 500;
+        font-size  : 12px;
+    }
+
+    .card-title {
+        margin-bottom: 24px;
+        font-weight  : bold;
+        font-size    : 16px;
+    }
+
+    .align-center {
+        display        : flex;
+        align-items    : center;
+        justify-content: center;
+    }
+
+    #container {
+        width : 300px;
+        height: 180px;
+    }
+    .ant-col-10 {
+        flex: none;
+    }
+}

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

@@ -0,0 +1,24 @@
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { OrderManagementBulkDetailChangeComponent } from './bulk-detail-change.component';
+
+describe('OrderManagementBulkDetailChangeComponent', () => {
+  let component: OrderManagementBulkDetailChangeComponent;
+  let fixture: ComponentFixture<OrderManagementBulkDetailChangeComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OrderManagementBulkDetailChangeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrderManagementBulkDetailChangeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,752 @@
+import { ViewChild } from '@angular/core';
+/*
+ * @Author: your name
+ * @Date: 2021-12-03 15:31:52
+ * @LastEditTime: 2021-12-24 17:49:31
+ * @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
+ */
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { STColumn, STComponent } from '@delon/abc/st';
+import { SFComponent, SFSchema, SFSelectWidgetSchema, SFUISchema, SFUploadWidgetSchema } from '@delon/form';
+import { _HttpClient } from '@delon/theme';
+import { AmapPoiPickerComponent, AmapService, EAEnvironmentService, 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 { apiConf } from '@conf/api.conf';
+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-bulk-detail-change',
+  templateUrl: './bulk-detail-change.component.html',
+  styleUrls: ['./bulk-detail-change.component.less']
+})
+export class OrderManagementBulkDetailChangeComponent implements OnInit {
+  validateForm1: FormGroup;
+  id = this.route.snapshot.params.id;
+  @ViewChild('distannce3', { static: false })
+  i: any= {unLoadingPlaceList:[]};
+  logColumns: STColumn[] =[]
+  totalDistance = 0.0; //总里程
+  totalTime = 0.0; //路程总时间
+  startInfo: any = [];  // 装货信息
+  endInfo: any = [];   // 卸货信息
+  unloadTime: any; // 货源单设置回显
+loadTime: any; // 货源单设置回显
+  sf3data: any; // 货源单设置回显
+  sf4data: any; // 货源单设置回显
+  dirverPhone: any; // 货源单设置回显
+  dirverBankCard: any; // 货源单设置回显
+  listImagUrls: any[] = []; // 货源单设置回显
+  dirvingMessage = [];
+  imges: any;
+  previewImage1 = '';
+  previewVisible1 = 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;
+  formData: any;
+  @ViewChild('sf', { static: false }) sf!: SFComponent;
+  schema: SFSchema = {};
+  ui: SFUISchema = {};
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private msgSrv: NzMessageService,
+    public service: OrderManagementService,
+    private modalService: NzModalService,
+    private amapService: AmapService,
+    public service2: ShipperBaseService,
+    fb: FormBuilder, 
+    private envSrv: EAEnvironmentService,
+  ) {
+    this.validateForm1 = fb.group({
+    loadTime: [null, []],
+      unloadTime: [null, []],
+    });
+  }
+
+  ngOnInit(): void {
+    console.log(this.id)
+    this.initST();
+    this.initSF();
+    this.initSF3();
+    this.initSF4();
+    this.initData()
+  }
+  initSF() {
+    this.schema = {
+      properties: {
+        loadingLadingBillFilePath: {
+          type: 'string',
+          title: '装货凭证',
+          ui: {
+            widget: 'upload',
+            action: apiConf.fileUpload,
+            fileType: 'image/png,image/jpeg,image/jpg,image/gif',
+            limit: 1,
+            limitFileCount: 1,
+            resReName: 'data.fullFileWatermarkPath',
+            urlReName: 'data.fullFileWatermarkPath',
+            descriptionI18n: '提货单',
+            data: {
+              appId: this.envSrv.env.appId,
+            },
+            name: 'multipartFile',
+            beforeUpload: (file: any, fileList: any) => {
+              return new Observable((observer: Observer<boolean>) => {
+                const isLt1M = file.size / 1024 / 1024 < 5;
+                const fileType = 'image/png,image/jpeg';
+                if (fileType.indexOf(file.type) === -1) {
+                  this.service.msgSrv.warning('图片格式不正确！');
+                  observer.complete();
+                  return;
+                }
+                if (!isLt1M) {
+                  this.service.msgSrv.warning('图片大小超过5M!');
+                  observer.complete();
+                  return;
+                }
+                observer.next(isLt1M);
+                observer.complete();
+              });
+            },
+            multiple: false,
+            listType: 'picture-card',
+          } as SFUploadWidgetSchema,
+        },
+        loadingPeopleVehiclesGoodsFilePath: {
+          type: 'string',
+          title: '',
+          ui: {
+            widget: 'upload',
+            action: apiConf.fileUpload,
+            fileType: 'image/png,image/jpeg,image/jpg,image/gif',
+            limit: 1,
+            limitFileCount: 1,
+            resReName: 'data.fullFileWatermarkPath',
+            urlReName: 'data.fullFileWatermarkPath',
+            descriptionI18n: '人车货照片',
+            data: {
+              appId: this.envSrv.env.appId,
+            },
+            name: 'multipartFile',
+            beforeUpload: (file: any, fileList: any) => {
+              return new Observable((observer: Observer<boolean>) => {
+                const isLt1M = file.size / 1024 / 1024 < 5;
+                const fileType = 'image/png,image/jpeg';
+                if (fileType.indexOf(file.type) === -1) {
+                  this.service.msgSrv.warning('图片格式不正确！');
+                  observer.complete();
+                  return;
+                }
+                if (!isLt1M) {
+                  this.service.msgSrv.warning('图片大小超过5M!');
+                  observer.complete();
+                  return;
+                }
+                observer.next(isLt1M);
+                observer.complete();
+              });
+            },
+            multiple: false,
+            listType: 'picture-card',
+          } as SFUploadWidgetSchema,
+        },
+        no4: {
+          type: 'string',
+          title: '',
+          ui: {
+            widget: 'text',
+           },
+           default: '',
+        },
+        unloadingLadingBillFilePath: {
+          type: 'string',
+          title: '卸货凭证',
+          ui: {
+            widget: 'upload',
+            action: apiConf.fileUpload,
+            fileType: 'image/png,image/jpeg,image/jpg,image/gif',
+            limit: 1,
+            limitFileCount: 1,
+            resReName: 'data.fullFileWatermarkPath',
+            urlReName: 'data.fullFileWatermarkPath',
+            descriptionI18n: '提货单',
+            data: {
+              appId: this.envSrv.env.appId,
+            },
+            name: 'multipartFile',
+            beforeUpload: (file: any, fileList: any) => {
+              return new Observable((observer: Observer<boolean>) => {
+                const isLt1M = file.size / 1024 / 1024 < 5;
+                const fileType = 'image/png,image/jpeg';
+                if (fileType.indexOf(file.type) === -1) {
+                  this.service.msgSrv.warning('图片格式不正确！');
+                  observer.complete();
+                  return;
+                }
+                if (!isLt1M) {
+                  this.service.msgSrv.warning('图片大小超过5M!');
+                  observer.complete();
+                  return;
+                }
+                observer.next(isLt1M);
+                observer.complete();
+              });
+            },
+            multiple: false,
+            listType: 'picture-card',
+          } as SFUploadWidgetSchema,
+        },
+        unloadingPeopleVehiclesGoodsFilePath: {
+          type: 'string',
+          title: '',
+          ui: {
+            widget: 'upload',
+            action: apiConf.fileUpload,
+            fileType: 'image/png,image/jpeg,image/jpg,image/gif',
+            limit: 1,
+            limitFileCount: 1,
+            resReName: 'data.fullFileWatermarkPath',
+            urlReName: 'data.fullFileWatermarkPath',
+            descriptionI18n: '人车货照片',
+            data: {
+              appId: this.envSrv.env.appId,
+            },
+            name: 'multipartFile',
+            beforeUpload: (file: any, fileList: any) => {
+              return new Observable((observer: Observer<boolean>) => {
+                const isLt1M = file.size / 1024 / 1024 < 5;
+                const fileType = 'image/png,image/jpeg';
+                if (fileType.indexOf(file.type) === -1) {
+                  this.service.msgSrv.warning('图片格式不正确！');
+                  observer.complete();
+                  return;
+                }
+                if (!isLt1M) {
+                  this.service.msgSrv.warning('图片大小超过5M!');
+                  observer.complete();
+                  return;
+                }
+                observer.next(isLt1M);
+                observer.complete();
+              });
+            },
+            multiple: false,
+            listType: 'picture-card',
+          } as SFUploadWidgetSchema,
+        },
+        no5: {
+          type: 'string',
+          title: '',
+          ui: {
+            widget: 'text',
+           },
+           default: '',
+        },
+        no6: {
+          type: 'string',
+          title: '',
+          ui: {
+            widget: 'text',
+           },
+           default: '',
+        },
+      },
+      required: ['loadingLadingBillFilePath','unloadingLadingBillFilePath']
+    };
+    this.ui = {
+      '*': {
+        spanLabelFixed: 100,
+        grid: { span: 20 }
+      },
+      $unloadingLadingBillFilePath: { grid: { span: 12} },
+      $unloadingPeopleVehiclesGoodsFilePath: { grid: { span: 12} },
+      $loadingLadingBillFilePath: { grid: { span: 12} },
+      $loadingPeopleVehiclesGoodsFilePath: { grid: { span: 12} },
+      $no5: { grid: { span: 24} },
+    };
+  }
+  initData() {
+    this.service.request(this.service.$api_set_getBulkOrderDetail, {id: this.id}).subscribe(res => {
+      console.log(res)
+      if (res) {
+        this.i = res;
+        // 对装货凭证进行初始化
+        let arr : any= []
+        res?.receiptFilePath.forEach((element: any, index: any) => {
+          console.log(index)
+         arr.push(  {
+          url: element,
+          status: 'done',
+          uid: index
+        })
+        });
+        this.listImagUrls = arr;
+        this.sf4data = res?.goodsInfoList?.[0]
+        // 对装卸货信息进行初始化
+        res?.unLoadingPlaceList.forEach((element: any) => {
+          if(element.type === 1 || element.type === '1') {
+            const controlId = this.startInfo.length;
+              this.startInfo.push({
+                detailedAddress: element.detailedAddress,
+                appUserName: element.appUserName,
+                contractTelephone: element.contractTelephone,
+                latitude: element.latitude,
+                longitude: element.longitude,
+                province: element.province,
+                city: element.city,
+                area: element.area,
+                type: element.type,
+                id: element.id
+              })
+            this.validateForm1.addControl(`loadAddress${controlId}`, new FormControl(null, Validators.required));
+            this.validateForm1.addControl(`loadName${controlId}`, new FormControl(null, Validators.required));
+            this.validateForm1.addControl(`loadPhone${controlId}`, new FormControl(null, Validators.required));
+          } else if(element.type === 2 || element.type === '2') {
+            const controlId = this.endInfo.length;
+              this.endInfo.push({
+                detailedAddress: element?.detailedAddress,
+                appUserName: element?.appUserName,
+                contractTelephone: element?.contractTelephone,
+                latitude: element.latitude,
+                longitude: element.longitude,
+                province: element.province,
+                city: element.city,
+                area: element.area,
+                type: element.type,
+                id: element.id
+              })
+            this.validateForm1.addControl(`unloadAddress${controlId}`, new FormControl(null, Validators.required));
+            this.validateForm1.addControl(`unloadName${controlId}`, new FormControl(null, Validators.required));
+            this.validateForm1.addControl(`unloadPhone${controlId}`, new FormControl(null, Validators.required));
+          }
+        });
+        // 对装货凭证进行初始化
+        if (res.loadingLadingBillFilePath) {
+          this.formData = {
+            loadingLadingBillFilePath: [
+              {
+                uid: 'logo',
+                name: 'LOGO',
+                status: 'done',
+                url: res.loadingLadingBillFilePath,
+                response: {
+                  url: res.loadingLadingBillFilePath,
+                },
+              },
+        ],
+        loadingPeopleVehiclesGoodsFilePath: [
+              {
+                uid: 'logo',
+                name: 'LOGO',
+                status: 'done',
+                url: res.loadingPeopleVehiclesGoodsFilePath,
+                response: {
+                  url: res.loadingPeopleVehiclesGoodsFilePath,
+                },
+              },
+        ],
+        unloadingLadingBillFilePath: [
+              {
+                uid: 'logo',
+                name: 'LOGO',
+                status: 'done',
+                url: res.unloadingLadingBillFilePath,
+                response: {
+                  url: res.unloadingLadingBillFilePath,
+                },
+              },
+        ],
+        unloadingPeopleVehiclesGoodsFilePath: [
+              {
+                uid: 'logo',
+                name: 'LOGO',
+                status: 'done',
+                url: res.unloadingPeopleVehiclesGoodsFilePath,
+                response: {
+                  url: res.unloadingPeopleVehiclesGoodsFilePath,
+                },
+              },
+        ],
+          };
+        }
+        // 发车时间到车时间初始化
+        this.loadTime = res.loadTime
+        this.unloadTime = res.unloadTime
+        this.dirvingMessage = res.billExpenseDetails;
+        
+      }
+    })
+  }
+
+  goBack() {
+    window.history.go(-1);
+  }
+  // 取消修改
+  cancelChange() {
+    window.history.go(-1);
+  }
+  // 保存修改
+  save() {
+    let imgList : any= [];
+    if(this.listImagUrls.length > 0) {
+      this.listImagUrls?.forEach((res :any) => {
+        if(res.url) {
+          imgList.push(res.url)
+        }
+      })
+    }
+    if(typeof(this.unloadTime) !== 'string' ){
+      var c = new Date(this.unloadTime);  
+      this.unloadTime = c.getFullYear() + '-' + this.addPreZero(c.getMonth() + 1) + '-' + this.addPreZero(c.getDate()) + ' ' + this.addPreZero(c.getHours()) + ':' + this.addPreZero(c.getMinutes()) + ':' + this.addPreZero(c.getSeconds())
+    }
+    if(typeof(this.loadTime) !== 'string' ) {
+      var c = new Date(this.loadTime);  
+      this.loadTime = c.getFullYear() + '-' + this.addPreZero(c.getMonth() + 1) + '-' + this.addPreZero(c.getDate()) + ' ' + this.addPreZero(c.getHours()) + ':' + this.addPreZero(c.getMinutes()) + ':' + this.addPreZero(c.getSeconds())
+    }
+    console.log('dirvingMessage=>>>>>>'+ this.dirvingMessage)
+    console.log( this.dirvingMessage)
+    console.log( this.st._data)
+    const params = {
+      id: this.id,
+      unLoadingPlaceDTOList: [...this.startInfo, ...this.endInfo,], 
+      receiptFilePath: imgList,
+      goodsInfoDTOList: [{
+        id: this.i?.goodsInfoList?.[0].id,
+        goodsName: this.sf3.value?.goodsName,
+        ...this.sf4.value
+      }],
+      // 运费信息
+      // 收款人
+      payeeId: this.dirverPhone,
+      dirverBankCard: this.dirverBankCard, // 银行卡
+      // 发车时间
+    loadTime: this.loadTime,
+      // 到车时间
+      unloadTime: this.unloadTime,
+      loadingLadingBillFilePath: this.sf.value?.loadingLadingBillFilePath?.data ? this.sf.value?.loadingLadingBillFilePath.data.fullFilePath : this.sf.value?.loadingLadingBillFilePath?.url,
+
+      loadingPeopleVehiclesGoodsFilePath: this.sf.value?.loadingPeopleVehiclesGoodsFilePath?.data ? this.sf.value?.loadingPeopleVehiclesGoodsFilePath.data.fullFilePath : this.sf.value?.loadingPeopleVehiclesGoodsFilePath?.url,
+
+      unloadingLadingBillFilePath: this.sf.value?.unloadingLadingBillFilePath?.data ? this.sf.value?.unloadingLadingBillFilePath.data.fullFilePath : this.sf.value?.unloadingLadingBillFilePath?.url,
+
+      unloadingPeopleVehiclesGoodsFilePath: this.sf.value?.unloadingPeopleVehiclesGoodsFilePath?.data ? this.sf.value?.unloadingPeopleVehiclesGoodsFilePath.data.fullFilePath : this.sf.value?.unloadingPeopleVehiclesGoodsFilePath?.url,
+    }
+    console.log(params)
+    this.service.request(this.service.$api_set_modifyBulkOrder, params).subscribe((res: any) => {
+      console.log(res)
+      if(res) {
+        this.service.msgSrv.success('修改成功！');
+        this.router.navigate(['/order-management/vehicle']);
+      } else {
+        this.service.msgSrv.error(res?.msg);
+      }
+    })
+  }
+  addPreZero(num: any){
+    if(num<10){
+     return '0'+num;
+    } else {
+     return num;
+    }
+   }
+  // -------------------装卸货信息处理
+   // 打开地图
+ openMap(type: string, index: number) {
+  const modalRef = this.modalService.create({
+    nzTitle: '',
+    nzContent: AmapPoiPickerComponent,
+    nzWidth: 900,
+    nzOnOk: item => {
+      const poi = item.poi;
+      const locList = poi.pois;
+      switch (type) {
+        case 'start':
+          this.startInfo[index].detailedAddress = poi.formattedAddress;
+          this.startInfo[index].longitude = locList[0];
+          this.startInfo[index].latitude = locList[1];
+          this.startInfo[index].province = poi.addressComponent.province;
+          this.startInfo[index].city = poi.addressComponent.city;
+          this.startInfo[index].area = poi.addressComponent.district;
+          this.startInfo[index].address = poi.formattedAddress;
+          break;
+        case 'end':
+          this.endInfo[index].detailedAddress = poi.formattedAddress;
+          this.endInfo[index].longitude = locList[0];
+          this.endInfo[index].latitude = locList[1];
+          this.endInfo[index].province = poi.addressComponent.province;
+          this.endInfo[index].city = poi.addressComponent.city;
+          this.endInfo[index].area = poi.addressComponent.district;
+          this.endInfo[index].address = poi.formattedAddress;
+          break;
+        default:
+          break;
+      }
+
+      if (this.startInfo[0]?.area && this.endInfo[0]?.area) {
+        this.amapService.drivingCompute([...this.startInfo], [...this.endInfo]).subscribe((res: any) => {
+          this.totalDistance = res.distance;
+          this.totalTime = res.time;
+        });
+      }
+    }
+  });
+}
+
+initSF3() {
+  this.schema3 = {
+    properties: {
+      // enterpriseInfoId: {
+      //   title: '网络货运人',
+      //   type: 'string',
+      //   ui: {
+      //     placeholder: '请选择',
+      //     widget: 'select',
+      //     asyncData: () => this.service2.getNetworkFreightForwarder(),
+      //     visibleIf: {
+      //       _$expand: (value: boolean) => value,
+      //     },
+      //   }
+      // },
+      goodsName: {
+        type: 'string',
+        title: '货物名称',
+        ui: {
+          widget: 'dict-select',
+          params: { dictKey: 'GoodsName' },
+          placeholder: '请选择'
+        }
+      },
+      qita: {
+        type: 'string',
+        title: '',
+        ui: {
+          visibleIf: {
+            goodsName: value => value === '3'
+          }
+        }
+      }
+    },
+    required: ['goodsName',]
+  };
+  this.ui3 = {
+    '*': {
+      spanLabelFixed: 110,
+      grid: { span: 12 }
+    },
+    $goodsName: {
+      grid: { span: 12 }
+    },
+    $qita: {
+      grid: { span: 12 }
+    }
+  };
+}
+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: {
+      weight: {
+        type: 'string',
+        title: '货物数量',
+        ui: {
+          widget: 'custom',
+          placeholder: '请输入',
+          errors: { required: '必填项' }
+        }
+      },
+      volume: {
+        type: 'string',
+        title: '',
+        ui: {
+          widget: 'custom',
+          placeholder: '请输入'
+        }
+      },
+      number: {
+        type: 'string',
+        title: '',
+        ui: {
+          widget: 'custom',
+          placeholder: '请输入'
+        }
+      },
+      carmand: {
+        type: 'string',
+        title: '用车需求',
+        ui: {
+          widget: 'custom',
+          placeholder: '请输入'
+        }
+      },
+      drivers: {
+        type: 'string',
+        title: '承运司机',
+        ui: {
+          widget: 'custom',
+          placeholder: '请输入'
+        }
+      },
+      weightModel: {
+        type: 'string',
+        title: '车型车长承重',
+        ui: {
+          widget: 'custom',
+          placeholder: '请输入'
+        }
+      },
+    loadTime: {
+        type: 'string',
+        title: '发车时间',
+        ui: {
+          widget: 'custom',
+          placeholder: '请输入'
+        }
+      },
+      unloadTime: {
+        type: 'string',
+        title: '到车时间',
+        ui: {
+          widget: 'custom',
+          placeholder: '请输入'
+        }
+      },
+   
+    },
+    required: ['weight','loadTime','unloadTime']
+  };
+  this.ui4 = {
+    '*': {
+      spanLabelFixed: 90,
+      grid: { span: 24 }
+    },
+    $weight: {
+      grid: { span: 8 }
+    },
+    $volume: {
+      grid: { span: 8 }
+    },
+    $number: {
+      grid: { span: 8 }
+    },
+    $carmand: {
+      grid: { span: 24 }
+    },
+    $weightModel: {
+      grid: { span: 12 }
+    },
+    $drivers: {
+      grid: { span: 12 }
+    },
+    $loadTime: {
+      grid: { span: 12 }
+    },
+    $unloadTime: {
+      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;
+};
+
+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/bulk-detail/bulk-detail.component.html

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-12-03 15:31:52
- * @LastEditTime: 2021-12-23 13:38:07
+ * @LastEditTime: 2021-12-24 17:39:12
  * @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
@@ -20,18 +20,18 @@
       <div nz-col nzSpan="10">
         <button nz-button  >确认发车</button>
         <button nz-button >取消订单</button>
-        <button nz-button  >修改订单</button>
+        <button nz-button  (click)="changeOrder()">修改订单</button>
         <button nz-button nzType="primary" nzGhost >再下一单</button>
       </div>
     </div>
    <div>
      <div style="display: flex; justify-content: space-between;">
       <div sv-container>
-        <sv label="货主">{{ i?.goodsResource[0]?.shipperAppUserName }} </sv>
+        <sv label="货主">{{ i?.goodsResource?.[0]?.shipperAppUserName }} </sv>
-        <sv label="所属项目">{{i?.goodsResource[0]?.enterpriseProjectName}}</sv>
+        <sv label="所属项目">{{i?.goodsResource?.[0]?.enterpriseProjectName}}</sv>
-        <sv label="服务类型">{{i?.goodsResource[0]?.serviceTypeLabel}}</sv>
+        <sv label="服务类型">{{i?.goodsResource?.[0]?.serviceTypeLabel}}</sv>
-        <sv label="录单员">{{i?.goodsResource[0]?.dispatchName}} 18100000000 </sv>
+        <sv label="录单员">{{i?.goodsResource?.[0]?.dispatchName}} 18100000000 </sv>
-        <sv label="调度员">{{i?.goodsResource[0]?.dispatchName}} </sv>
+        <sv label="调度员">{{i?.goodsResource?.[0]?.dispatchName}} </sv>
       </div>
       <div>
         <div>状态</div>
@@ -81,18 +81,18 @@
 <nz-card nzTitle="运单进度">
   <div class="approval-status">
     <div style="width: 60%; margin: 0 auto">
-      <nz-steps [nzLabelPlacement]="'vertical'">
+      <!-- <nz-steps [nzLabelPlacement]="'vertical'">
         <nz-step [nzStatus]="i?.resourceStatus !== '1'?'finish':'process'" nzIcon="solution"
           [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>
+      </nz-steps> -->
     </div>
   </div>
 </nz-card>
 
-<nz-card nzTitle="装卸货信息(一装一卸)" id="distannce1">
+<nz-card nzTitle="装卸货信息(一装一卸)" id="distannce1" >
   <div class="mt-md">
     <div nz-row [nzGutter]="24">
       <div nz-col [nzSpan]="12">
@@ -105,7 +105,6 @@
               </div>
             </div>
           </div>
-          <p class="time-info">计划装货时间：{{i?.goodsResource[0]?.loadingTime}}</p>
         </div>
       </div>
       <div nz-col [nzSpan]="12">
@@ -118,42 +117,51 @@
               </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="网络货运人">
-        {{i?.goodsResource[0]?.enterpriseInfoName}}
-      </sv>
       <sv label="货物名称">
-        {{i?.goodsInfoList[0]?.goodsName}}
+        {{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}}件
+        {{i?.goodsInfoList?.[0]?.weight}}吨,{{i?.goodsInfoList?.[0]?.volume}}方,{{i?.goodsInfoList?.[0]?.number}}件
       </sv>
       <sv label="用车需求">
-        {{i?.goodsInfoList[0]?.maxWeightLabel}}/{{i?.goodsInfoList[0]?.maxCube}}
+        {{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}}件
+        {{i?.goodsInfoList?.[0]?.weight}}吨,{{i?.goodsInfoList?.[0]?.volume}}方,{{i?.goodsInfoList?.[0]?.number}}件
+      </sv>
+      <sv label="计划装货时间">
+        {{i?.loadPlanTime}}
+      </sv>
+      <sv label="计划卸货时间">
+        {{i?.unloadPlanTime}}
+      </sv>
+      <sv label="接单数量">
+        {{i?.acceptWeight}}吨,{{i?.acceptVolume}}方,{{i?.acceptNumber}}件
+      </sv>
+      <sv label="装货数量">
+        {{i?.acceptWeight}}吨,{{i?.acceptVolume}}方,{{i?.acceptNumber}}件
+      </sv>
+      <sv label="卸货数量">
+        {{i?.settlementWeight}}吨,{{i?.settlementVolume}}方,{{i?.acceptNumber}}件
       </sv>
   </sv-container>
-
-
-</nz-card>
-<nz-card nzTitle="保险待定">
 </nz-card>
 
 <nz-card nzTitle="运费信息" id="distannce3">
+  <h2>{{i?.freightPrice}}{{i?.freightTypeLabel}}（以发货为准，保留小数）</h2>
   <st #st [data]="i?.billExpenseDetails" [columns]="logColumns" [ps]="0" [page]="{ show: false, showSize: false }">
 
   </st>
@@ -164,16 +172,18 @@
 <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?.loadingLadingBillFilePath,i?.loadingPeopleVehiclesGoodsFilePath]">
       </app-imagelist>
     </sv>
     <sv label="卸货凭证">
-      <app-imagelist [imgList]="[i?.goodsResource]">
+      <app-imagelist [imgList]="[i?.unloadingLadingBillFilePath,i?.unloadingPeopleVehiclesGoodsFilePath]">
       </app-imagelist>
     </sv>
   </sv-container>
@@ -195,11 +205,12 @@
     <sv label="详细地址">
       {{i?.goodsResource?.receiptAddress}}
     </sv>
-    <sv label="回单凭证">
+  
-      {{i?.goodsResource?.receiptAddress}}
-    </sv>
   </sv-container>
   <sv-container col="1" class="mt-md">
+    <sv label="回单凭证">
+      <app-imagelist [imgList]="[i?.receiptFilePath]"></app-imagelist>
+    </sv>
     <sv label="备注">
       {{i?.goodsResource?.remarks}}
     </sv>
@@ -211,8 +222,8 @@
     <nz-card nzTitle="轨迹信息" style="width: 100%;" id="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>
+    </st> -->
   </div>
   <div nz-col [nzSpan]='12'>
      <amap-path-simplifier></amap-path-simplifier>
@@ -220,4 +231,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/bulk-detail/bulk-detail.component.less

@@ -45,16 +45,17 @@
         .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 {
         padding-right: 100px;
     }
 
-    .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
-    }
 }

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

@@ -1,7 +1,8 @@
+import { Router } from '@angular/router';
 /*
  * @Author: your name
  * @Date: 2021-12-03 15:31:52
- * @LastEditTime: 2021-12-22 10:02:00
+ * @LastEditTime: 2021-12-24 17:40:51
  * @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
@@ -23,12 +24,12 @@ export class OrderManagementBulkeDetailComponent implements OnInit {
  
   id = this.route.snapshot.params.id;
   i: any;
+  imges: any;
+  isVisible = false;
   logColumns: STColumn[] = [
-    { title: '款项', index: 'costName' },
+    { title: '款项', index: 'expenseName' },
-    { title: '总费用（元）', index: 'price' },
+    { title: '运输费（元）', index: 'price' },
-    { title: '协议金额（元）', index: 'price' },
     { title: '附加费（元）', index: 'surcharge' },
-    { title: '附加费率（%）', index: 'paymentMethodRate' },
     { title: '支付时间', index: ' paymentTime' },
     {
       title: '支付状态',
@@ -49,6 +50,7 @@ export class OrderManagementBulkeDetailComponent implements OnInit {
     private route: ActivatedRoute,
     private msgSrv: NzMessageService,
     private service: OrderManagementService,
+    private router: Router,
   ) {
 
   }
@@ -72,4 +74,23 @@ export class OrderManagementBulkeDetailComponent implements OnInit {
   goBack() {
     window.history.go(-1);
   }
+    // 修改订单
+  changeOrder() {
+      console.log(this.id)
+      this.router.navigate(['order-management/bulk-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
+  }
 }

src/app/routes/order-management/components/bulk/bulk.component.html

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-12-03 11:10:14
- * @LastEditTime: 2021-12-22 19:58:23
+ * @LastEditTime: 2021-12-24 17:32:00
  * @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\supply-management\components\vehicle\vehicle.component.html
@@ -61,7 +61,7 @@
     [loading]="service.http.loading"
     >
     <ng-template st-row="billCode" let-item let-index="index">
-      <a [routerLink]="'/order-management/bulk-detail/'+item.id">{{item.wayBillCode}}</a>
+      <a [routerLink]="'/order-management/bulk-detail/'+item.id">{{item.billCode}}</a>
       <div>
         <span>{{item?.billStatusLabel}}</span>
       </div>

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-24 13:58:21
+ * @LastEditTime: 2021-12-24 17:20:40
  * @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

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

@@ -1,3 +1,4 @@
+import { Router } from '@angular/router';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { STColumn, STComponent } from '@delon/abc/st';
 import { SFComponent, SFDateWidgetSchema, SFSchema, SFSchemaEnum, SFSelectWidgetSchema, SFUISchema } from '@delon/form';
@@ -60,7 +61,12 @@ tabs = {
   stayQuantity: 0
 };
 resourceStatus: any;
-  constructor(public service: OrderManagementService, private modal: NzModalService,public service2: ShipperBaseService,) { }
+  constructor(
+    public service: OrderManagementService,
+    private modal: NzModalService,
+    public service2: ShipperBaseService,
+    public router: Router,
+     ) { }
 
   /**
  * 查询参数
@@ -399,7 +405,7 @@ resourceStatus: any;
           },
           {
             text: '修改订单',
-            click: (_record) => this.cancellation(_record),
+            click: (_record) => this.amendlation(_record),
             iif: item => item.billStatus == '4' || item.billStatus == '5' || item.billStatus == '2' || item.billStatus == '3',
           },
           {
@@ -661,4 +667,8 @@ resourceStatus: any;
         }
       });
     }
+    // 修改订单
+    amendlation(value: any) {
+      this.router.navigate(['order-management/vehicle-detailChange', value.id])
+    }
 }

src/app/routes/order-management/order-management-routing.module.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-12-03 15:31:52
- * @LastEditTime: 2021-12-23 13:41:54
+ * @LastEditTime: 2021-12-24 17:48: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\order-management-routing.module.ts
@@ -10,6 +10,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { OrderManagementAdditionalcDetailComponent } from './components/additionalc-detail/additionalc-detail.component';
 import { OrderManagementAdditionalcComponent } from './components/additionalc/additionalc.component';
+import { OrderManagementBulkDetailChangeComponent } from './components/bulk-detail-change/bulk-detail-change.component';
 import { OrderManagementBulkeDetailComponent } from './components/bulk-detail/bulk-detail.component';
 import { OrderManagementBulkComponent } from './components/bulk/bulk.component';
 import { OrderManagementCarManageComponent } from './components/car-manage/car-manage.component';
@@ -27,6 +28,7 @@ const routes: Routes = [
   { path: 'vehicle-detailChange/:id', component: OrderManagementVehicleDetailChangeComponent },
   { path: 'bulk', component: OrderManagementBulkComponent },
   { path: 'bulk-detail/:id', component: OrderManagementBulkeDetailComponent },
+  { path: 'bulk-detailChange/:id', component: OrderManagementBulkDetailChangeComponent },
   { path: 'driver-manage', component: OrderManagementDriverManageComponent },
   { path: 'car-manage', component: OrderManagementCarManageComponent },
   { path: 'additionalc', component: OrderManagementAdditionalcComponent },

src/app/routes/order-management/order-management.module.ts

@@ -10,6 +10,7 @@ import { NgModule, Type } from '@angular/core';
 import { SharedModule } from '@shared';
 import { OrderManagementAdditionalcDetailComponent } from './components/additionalc-detail/additionalc-detail.component';
 import { OrderManagementAdditionalcComponent } from './components/additionalc/additionalc.component';
+import { OrderManagementBulkDetailChangeComponent } from './components/bulk-detail-change/bulk-detail-change.component';
 import { OrderManagementBulkeDetailComponent } from './components/bulk-detail/bulk-detail.component';
 import { OrderManagementBulkComponent } from './components/bulk/bulk.component';
 import { OrderManagementCarManageComponent } from './components/car-manage/car-manage.component';
@@ -51,7 +52,8 @@ const COMPONENTS: Type<void>[] = [
   VehicleSureArriveComponent,
   OrderManagementRiskDetailComponent,
   OneCarOrderCancelComponent,
-  OrderManagementVehicleDetailChangeComponent
+  OrderManagementVehicleDetailChangeComponent,
+  OrderManagementBulkDetailChangeComponent
 ];
 
 @NgModule({