edit

src/app/routes/waybill-management/components/abnormal-appear/abnormal-appear.component.html

@@ -12,16 +12,8 @@
   <div nz-row nzGutter="8">
     <!-- 查询字段小于或等于3个时，不显示伸缩按钮 -->
     <div nz-col nzSpan="24" *ngIf="queryFieldCount <= 4">
-      <sf
+      <sf #sf [schema]="schema" [ui]="ui" [mode]="'search'" [disabled]="!sf?.valid" [loading]="false"
-        #sf
+        (formSubmit)="search()" (formReset)="resetSF()"></sf>
-        [schema]="schema"
-        [ui]="ui"
-        [mode]="'search'"
-        [disabled]="!sf?.valid"
-        [loading]="false"
-        (formSubmit)="search()"
-        (formReset)="resetSF()"
-      ></sf>
     </div>
 
     <!-- 查询字段大于3个时，根据展开状态调整布局 -->
@@ -30,7 +22,8 @@
         <sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
       </div>
       <div nz-col [nzSpan]="_$expand ? 24 : 6" [class.text-right]="_$expand">
-        <button nz-button nzType="primary" [disabled]="!sf.valid" [nzLoading]="isLoading && st.loading" (click)="search()"  acl  [acl-ability]="['WAYBILL-ABNORMAL-search']">查询</button>
+        <button nz-button nzType="primary" [disabled]="!sf.valid" [nzLoading]="isLoading && st.loading"
+          (click)="search()" acl [acl-ability]="['WAYBILL-ABNORMAL-search']">查询</button>
         <button nz-button (click)="resetSF()">重置</button>
         <button nz-button nzType="link" (click)="expandToggle()">
           {{ !_$expand ? '展开' : '收起' }}
@@ -44,56 +37,104 @@
 <nz-card class="content-box">
   <nz-tabset [(nzSelectedIndex)]="selectedIndex" (nzSelectedIndexChange)="selectChange($event)">
     <nz-tab [nzTitle]="'待回复(' + tabs?.stayQuantity + ')'">
-      <st
+      <st #st [data]="service.$api_get_listOperatePage" [columns]="columns"
-        #st
-        [data]="service.$api_get_listOperatePage"
-        [columns]="columns"
         [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
         [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
-        [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
+        [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }" [loading]="false"
-        [loading]="false"
+        [scroll]="{ x: '2000px' }">
-        [scroll]="{ x: '2000px' }"
-      >
         <ng-template st-row="exceptionCertificateFirstFilePath" let-item let-index="index">
           <div class="imgBox">
             <div *ngIf="item?.exceptionCertificateFirstFilePath">
-              <app-imagelist style="width: 40px;height: 40px" [imgList]="[item?.exceptionCertificateFirstFilePath]"> </app-imagelist>
+              <app-imagelist style="width: 40px;height: 40px" [imgList]="[item?.exceptionCertificateFirstFilePath]">
+              </app-imagelist>
             </div>
             <div *ngIf="item?.exceptionCertificateSecondFilePath">
-            <app-imagelist style="width: 40px;height: 40px" [imgList]="[item?.exceptionCertificateSecondFilePath]"> </app-imagelist>
+              <app-imagelist style="width: 40px;height: 40px" [imgList]="[item?.exceptionCertificateSecondFilePath]">
-          </div>
+              </app-imagelist>
+            </div>
             <div *ngIf="item?.exceptionCertificateThirdFilePath">
-            <app-imagelist style="width: 40px;height: 40px" [imgList]="[item?.exceptionCertificateThirdFilePath]"> </app-imagelist>
+              <app-imagelist style="width: 40px;height: 40px" [imgList]="[item?.exceptionCertificateThirdFilePath]">
-          </div>
+              </app-imagelist>
+            </div>
           </div>
         </ng-template>
       </st>
     </nz-tab>
-    <nz-tab    [nzTitle]="'已回复(' + tabs?.receivedQuantity + ')'">
+    <nz-tab [nzTitle]="'已回复(' + tabs?.receivedQuantity + ')'">
-      <st
+      <st #st2 [data]="service.$api_get_listOperatePage" [columns]="columns2"
-        #st2
-        [data]="service.$api_get_listOperatePage"
-        [columns]="columns2"
         [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams2 }"
         [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
-        [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
+        [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }" [loading]="false"
-        [loading]="false"
+        [scroll]="{ x: '2000px' }">
-        [scroll]="{ x: '2000px' }"
-      >
         <ng-template st-row="exceptionCertificateFirstFilePath" let-item let-index="index">
           <div class="imgBox">
             <div *ngIf="item?.exceptionCertificateFirstFilePath">
-              <app-imagelist  [imgList]="[item?.exceptionCertificateFirstFilePath]"> </app-imagelist>
+              <app-imagelist [imgList]="[item?.exceptionCertificateFirstFilePath]"> </app-imagelist>
             </div>
             <div *ngIf="item?.exceptionCertificateSecondFilePath">
-            <app-imagelist  [imgList]="[item?.exceptionCertificateSecondFilePath]"> </app-imagelist>
+              <app-imagelist [imgList]="[item?.exceptionCertificateSecondFilePath]"> </app-imagelist>
-          </div>
+            </div>
             <div *ngIf="item?.exceptionCertificateThirdFilePath">
-            <app-imagelist  [imgList]="[item?.exceptionCertificateThirdFilePath]"> </app-imagelist>
+              <app-imagelist [imgList]="[item?.exceptionCertificateThirdFilePath]"> </app-imagelist>
-          </div>
+            </div>
           </div>
         </ng-template>
       </st>
     </nz-tab>
   </nz-tabset>
 </nz-card>
+
+<ng-template #detailModal>
+  <div nz-row nzGutter="8">
+    <div nz-col nzSpan="24" se-container [labelWidth]="110" [col]="1">
+      <se label="异常编号">
+        {{itemInfo.exceptionCode}}
+      </se>
+      <se label="装货地">
+        {{itemInfo.loadingAddressArr}}
+      </se>
+      <se label="卸货地">
+        {{itemInfo.unloadingAddressArr}}
+      </se>
+      <se label="异常信息">
+        {{itemInfo.exceptionContent}}
+      </se>
+      <se label="异常图片">
+        <div style="display: flex;">
+          <div *ngIf="itemInfo?.exceptionCertificateFirstFilePath" style="cursor: pointer;">
+            <app-imagelist [imgList]="[itemInfo?.exceptionCertificateFirstFilePath]"> </app-imagelist>
+          </div>
+          <div *ngIf="itemInfo?.exceptionCertificateSecondFilePath" style="cursor: pointer;">
+            <app-imagelist [imgList]="[itemInfo?.exceptionCertificateSecondFilePath]"> </app-imagelist>
+          </div>
+          <div *ngIf="itemInfo?.exceptionCertificateThirdFilePath" style="cursor: pointer;">
+            <app-imagelist [imgList]="[itemInfo?.exceptionCertificateThirdFilePath]"> </app-imagelist>
+          </div>
+        </div>
+      </se>
+      <ng-container *ngIf="itemInfo.replyAppUserName">
+        <se label="回复内容">
+          {{itemInfo.replyContent}}
+        </se>
+        <se label="回复人">
+          {{itemInfo.replyAppUserName}}
+        </se>
+        <se label="回复时间">
+          {{itemInfo.replyTime}}
+        </se>
+      </ng-container>
+
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #replyModal>
+  <div nz-row nzGutter="8">
+    <div nz-col nzSpan="24" se-container [labelWidth]="110">
+      <se [col]="1" label="回复内容" required>
+        <textarea nz-input rows="3" placeholder="请填写回复内容" [(ngModel)]="replyContent"
+          style="width: 325px; margin-left: 14px"></textarea>
+      </se>
+    </div>
+  </div>
+</ng-template>

src/app/routes/waybill-management/components/abnormal-appear/abnormal-appear.component.ts

@@ -21,6 +21,10 @@ import { WaybillManagementServe } from '../../services/waybill-management.servic
   styleUrls: ['./abnormal-appear.component.less']
 })
 export class WaybillManagementAbnormalAppearComponent implements OnInit {
+  @ViewChild('detailModal', { static: true })
+  detailModal!: any;
+  @ViewChild('replyModal', { static: true })
+  replyModal!: any;
   @ViewChild('st', { static: true })
   st!: STComponent;
   @ViewChild('st2', { static: true })
@@ -44,7 +48,14 @@ export class WaybillManagementAbnormalAppearComponent implements OnInit {
   };
 
   columns: STColumn[] = [
-    { title: '异常编号', index: 'exceptionCode', width: '180px', className: 'text-left' },
+    {
+      title: '异常编号',
+      index: 'exceptionCode',
+      width: '180px',
+      className: 'text-left',
+      type: 'link',
+      click: item => this.reviewDetailAction(item)
+    },
     { title: '异常类型', index: 'exceptionTypeLabel', width: '180px', className: 'text-left' },
     { title: '关联运单号', index: 'wayBillCode', width: '180px', className: 'text-left' },
     { title: '网络货运人', index: 'enterpriseInfoName', width: '250px', className: 'text-left' },
@@ -54,10 +65,24 @@ export class WaybillManagementAbnormalAppearComponent implements OnInit {
     { title: '承运司机', index: 'driver', width: '250px', className: 'text-left' },
     { title: '异常信息', index: 'exceptionContent', width: '250px', className: 'text-left' },
     { title: '异常图片', render: 'exceptionCertificateFirstFilePath', width: '300px', className: 'text-left' },
-    { title: '上报时间', index: 'createTime', width: '180px', className: 'text-left' }
+    { title: '上报时间', index: 'createTime', width: '180px', className: 'text-center' },
+    {
+      title: '操作',
+      fixed: 'right',
+      width: '100px',
+      className: 'text-center',
+      buttons: [{ text: '回复', click: item => this.replyAction(item) }]
+    }
   ];
   columns2: STColumn[] = [
-    { title: '异常编号', index: 'exceptionCode', width: '180px', className: 'text-left' },
+    {
+      title: '异常编号',
+      index: 'exceptionCode',
+      width: '180px',
+      className: 'text-left',
+      type: 'link',
+      click: item => this.reviewDetailAction(item)
+    },
     { title: '异常类型', index: 'exceptionTypeLabel', width: '180px', className: 'text-left' },
     { title: '关联运单号', index: 'wayBillCode', width: '180px', className: 'text-left' },
     { title: '网络货运人', index: 'enterpriseInfoName', width: '180px', className: 'text-left' },
@@ -74,7 +99,6 @@ export class WaybillManagementAbnormalAppearComponent implements OnInit {
   ];
   resourceStatus: number | undefined;
 
-
   get reqParams() {
     return {
       ...this.sf?.value,
@@ -82,7 +106,7 @@ export class WaybillManagementAbnormalAppearComponent implements OnInit {
       reportingTime: {
         start: this.sf?.value?.reportingTime?.[0] || '',
         end: this.sf?.value?.reportingTime?.[1] || ''
-      },
+      }
     };
   }
   get reqParams2() {
@@ -92,11 +116,12 @@ export class WaybillManagementAbnormalAppearComponent implements OnInit {
       reportingTime: {
         start: this.sf?.value?.reportingTime?.[0] || '',
         end: this.sf?.value?.reportingTime?.[1] || ''
-      },
+      }
     };
   }
-
+  itemInfo: any = {};
-  constructor(public service: WaybillManagementServe, private nzModalService: NzModalService, public shipperSrv: ShipperBaseService) { }
+  replyContent = '';
+  constructor(public service: WaybillManagementServe, private nzModalService: NzModalService, public shipperSrv: ShipperBaseService) {}
 
   ngOnInit(): void {
     this.initSF();
@@ -116,6 +141,51 @@ export class WaybillManagementAbnormalAppearComponent implements OnInit {
   get queryFieldCount(): number {
     return Object.keys(this.schema?.properties || {}).length;
   }
+
+  reviewDetailAction(item: any) {
+    this.itemInfo = {};
+    this.service.request(this.service.$api_get_listOperate_detail, { id: item.id }).subscribe(res => {
+      if (res) {
+        this.itemInfo = res;
+        const modal = this.nzModalService.create({
+          nzContent: this.detailModal,
+          nzWidth: 600,
+          nzTitle: '异常详情',
+          nzFooter: []
+        });
+      }
+    });
+  }
+
+  replyAction(item: any) {
+    this.replyContent = '';
+    const modal = this.nzModalService.create({
+      nzContent: this.replyModal,
+      nzTitle: '回复',
+      nzOnOk: () => {
+        if (!this.replyContent) {
+          this.service.msgSrv.warning('请填写回复内容');
+          return false;
+        }
+        this.service
+          .request(this.service.$api_operate_reply, [
+            {
+              id: item.id,
+              replyContent: this.replyContent
+            }
+          ])
+          .subscribe(res => {
+            if (res) {
+              this.service.msgSrv.success('回复成功');
+              this.st.load(1);
+              this.getGoodsSourceStatistical();
+            }
+          });
+        return true;
+      }
+    });
+  }
+
   initSF() {
     this.schema = {
       properties: {
@@ -265,7 +335,7 @@ export class WaybillManagementAbnormalAppearComponent implements OnInit {
    */
   resetSF() {
     this.sf.reset();
-    this.isLoading = true
+    this.isLoading = true;
   }
   // 获取城市列表
   getRegionCode(regionCode: any) {

src/app/routes/waybill-management/services/waybill-management.service.ts

@@ -51,6 +51,10 @@ export class WaybillManagementServe extends BaseService {
 
   // 查询运营端异常上报
   $api_get_listOperatePage = '/api/sdc/exceptionReport/listOperatePage';
+  // 查询运营端异常上报详情
+  $api_get_listOperate_detail = '/api/sdc/exceptionReport/getOperateDetail';
+  // 运营端异常回复
+  $api_operate_reply = '/api/sdc/exceptionReport/operateReply';
   // 查询运营端异常上报数据统计
   $api_get_listOperateStatus = '/api/sdc/exceptionReport/listOperateStatus';
   // // 查询运营端已回复异常上报