Files
bbq/src/app/routes/supply-management/components/bulk-detail/bulk-detail.component.html
潘晓云 e233980308 UI优化
2022-04-28 15:34:14 +08:00

267 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div *ngIf="i">
<page-header-wrapper [title]="'大宗货源详情'" [logo]="logo">
<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-sm common-order-header" nz-row>
<button nz-button nzType="primary" nzSize="small" nzDanger>{{ i?.resourceStatusLabel }}</button>
<b class="ml-md">货源编码 : {{ i?.resourceCode }}</b>
</div>
<div>
<button nz-button (click)="cancleGoodsSource()" *ngIf="i?.resourceStatus === '1'" acl
[acl-ability]="['SUPPLY-BULK-DETAIL-cancelSupply']">取消货源</button>
<button nz-button (click)="updatePrice(i)" *ngIf="i?.resourceStatus === '1'" acl
[acl-ability]="['SUPPLY-BULK-DETAIL-updatePrice']">修改单价</button>
<button nz-button nzType="primary" nzGhost (click)="placeOrder(i)" acl
[acl-ability]="['SUPPLY-BULK-DETAIL-bulkAnotherOrder']">再下一单</button>
</div>
<!-- <div class="common-order-header" nz-row>
<div class="common-grey">网络货运人:{{ i?.shipperAppUserName }}</div>
<div>
<button nz-button (click)="cancleGoodsSource()" *ngIf="i?.resourceStatus === '1'" acl
[acl-ability]="['SUPPLY-BULK-DETAIL-cancelSupply']">取消货源</button>
<button nz-button (click)="updatePrice(i)" *ngIf="i?.resourceStatus === '1'" acl
[acl-ability]="['SUPPLY-BULK-DETAIL-updatePrice']">修改单价</button>
<button nz-button nzType="primary" nzGhost (click)="placeOrder(i)" acl
[acl-ability]="['SUPPLY-BULK-DETAIL-bulkAnotherOrder']">再下一单</button>
</div>
</div> -->
<!-- <div class="mt-sm mb-sm" nz-row>
<div>
<b>总费用:<span class="text-red-light text-md">{{ i?.totalAmount | currency: '¥' }}</span></b>
</div>
</div> -->
<nz-divider></nz-divider>
<div sv-container>
<sv label="网络货运人">{{ i?.shipperAppUserName }}</sv>
<sv label="项目">{{ i?.enterpriseProjectName }}</sv>
<sv label="截止时间">{{ i?.deadlineTime }}</sv>
<sv label="录单员">{{ i?.createUserName }}/{{ i?.createUserPhone }}</sv>
<sv label="调度员">{{ i?.dispatchName }}/{{ i?.dispatchPhone }} </sv>
<sv label="服务类型">{{ i?.serviceTypeLabel }} </sv>
</div>
</ng-template>
</page-header-wrapper>
<nz-card [nzBorderless]="true" class="mb0">
<div class="mb-sm common-order-header" nz-row>
<div>
<button nz-button nzType="primary" nzSize="small" nzDanger>{{ i?.resourceStatusLabel }}</button>
<b class="ml-md">货源编码 : {{ i?.resourceCode }}</b>
</div>
<div>
<button nz-button (click)="cancleGoodsSource()" *ngIf="i?.resourceStatus === '1'" acl
[acl-ability]="['SUPPLY-BULK-DETAIL-cancelSupply']">取消货源</button>
<button nz-button (click)="updatePrice(i)" *ngIf="i?.resourceStatus === '1'" acl
[acl-ability]="['SUPPLY-BULK-DETAIL-updatePrice']">修改单价</button>
<button nz-button nzType="primary" nzGhost (click)="placeOrder(i)" acl
[acl-ability]="['SUPPLY-BULK-DETAIL-bulkAnotherOrder']">再下一单</button>
</div>
</div>
<!-- <div class="mt-sm mb-sm" nz-row>
<div>
<b>总费用:<span class="text-red-light text-md">{{ i?.totalAmount | currency: '¥' }}</span></b>
</div>
</div> -->
<nz-divider class="divider-margin"></nz-divider>
<div class="mb-lg" sv-container>
<sv label="网络货运人">{{ i?.shipperAppUserName }}</sv>
<sv label="项目">{{ i?.enterpriseProjectName }}</sv>
<sv label="截止时间">{{ i?.deadlineTime }}</sv>
<sv label="录单员">{{ i?.createUserName }}/{{ i?.createUserPhone }}</sv>
<sv label="调度员">{{ i?.dispatchName }}/{{ i?.dispatchPhone }} </sv>
<sv label="服务类型">{{ i?.serviceTypeLabel }} </sv>
</div>
<div class="approval-status">
<div class="step-row">
<nz-steps [nzLabelPlacement]="'vertical'">
<nz-step [nzStatus]="i?.resourceStatus !== '1'?'finish':'process'" nzIcon="solution"
[nzDescription]="i?.createTime" nzTitle="下单"></nz-step>
<nz-step *ngIf="i?.resourceStatus === '1' || i?.resourceStatus === '4' "
[nzStatus]="i?.resourceStatus=== '1'? 'wait':'finish'" nzIcon="file-done"
[nzTitle]="i?.resourceStatus === '4'?'已完结':'完结'" [nzDescription]="i?.endTime"></nz-step>
<nz-step nzStatus="finish" nzIcon="close-circle" nzTitle="取消货源" *ngIf="i?.resourceStatus === '3'"
[nzDescription]="i?.endTime"></nz-step>
</nz-steps>
</div>
</div>
<div class="mt-md">
<div class="font-weight-blod text-md detail-title">
<a class="sign mr-xs"></a>
<span>装货卸货信息</span>
<span class="ml-sm text-sm">(
<label>{{ i?.loadingCount || '一' }}装</label>
<label>{{ i?.unloadingCount || '一' }}卸</label>
)
</span>
</div>
<!-- <h4 class="text-md">装货卸货信息
<span class="ml-sm text-sm">(
<label>{{ i?.loadingCount || '一' }}装</label>
<label>{{ i?.unloadingCount || '一' }}卸</label>
)
</span>
</h4> -->
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="12">
<div class="handling-info p-md">
<div class="flex" *ngFor="let item of i?.unLoadingPlaceVOList">
<div *ngIf="item?.type === '1'" class="loading-row">
<div class="handling-info-icon loading-bg"></div>
<div class="info">
<h4>装货地:{{ item?.province }}{{ item?.city }}{{ item?.area }}{{ item?.detailedAddress }}</h4>
<p class="mb0">联系人:{{ item?.appUserName }}/{{ item?.contractTelephone }}</p>
</div>
</div>
</div>
<!-- <p class="time-info">装货时间:{{i?.loadingTime}}</p> -->
</div>
</div>
<div nz-col [nzSpan]="12">
<div class="handling-info p-md">
<div class="flex" *ngFor="let item of i?.unLoadingPlaceVOList">
<div *ngIf="item?.type === '2'" class="loading-row">
<div class="handling-info-icon unloaing-bg"></div>
<div class="info">
<h4>卸货地:{{ item?.province }}{{ item?.city }}{{ item?.area }}{{ item?.detailedAddress }}</h4>
<p class="mb0">联系人:{{ item?.appUserName }}/{{ item?.contractTelephone }}</p>
</div>
</div>
</div>
<!-- <p class="time-info">卸货时间:{{i?.unloadingTime}}</p> -->
</div>
</div>
</div>
</div>
</nz-card>
<nz-card [nzBorderless]="true" class="mb0">
<div class="font-weight-blod text-md detail-title">
<a class="sign mr-xs"></a>
<span>基本信息</span>
</div>
<sv-container col="3">
<!-- <sv-title>货物信息</sv-title> -->
<ng-container *ngFor="let item of i?.goodsInfoVOList">
<sv label="货物名称">
{{item.goodsTypeName}} > {{item.goodsName}}
</sv>
<sv label="货物数量">
{{item.weight}}吨 / {{item.volume>=0?item.volume:'-'}}方
</sv>
<sv label="剩余">
{{i?.surplusWeight!==null?i?.surplusWeight:'--'}}吨 / {{i?.surplusVolume!==null?i?.surplusVolume:'-'}}方
</sv>
<sv label="用车需求">
{{item.carModelLabel || '--'}} / {{item.carLengthLabel || '--'}}<span *ngIf="item.carLength !=='999'"></span>
</sv>
<sv label="承运司机"
*ngIf="i?.carrierInformationVO?.driverTelephone && (i?.carrierInformationVO?.driverTelephone !== i?.payeePhone)">
{{i?.carrierInformationVO?.driverName || '--'}} / {{i?.carrierInformationVO?.driverTelephone || '--'}} /
{{i?.carrierInformationVO?.driverLicensePlate || '--'}}
</sv>
<sv label="车型车长载重">
{{i?.driverCarModelLabel || '--'}} / {{(i?.driverCarLength || '--') +'米'}} / {{(i?.driverCarWeight ||
'--')+'吨'}}
</sv>
<!-- <sv label="承运信息">
{{i?.carrierInformationVO?.driverName}} / {{i?.carrierInformationVO?.driverTelephone}} /
{{i?.carrierInformationVO?.driverLicensePlate}}
</sv> -->
<!-- <sv label="当前指派">
<a (click)="viewCurrentAssign(i)">查看</a>
</sv> -->
</ng-container>
</sv-container>
</nz-card>
<nz-card [nzBorderless]="true" class="mb0">
<div class="font-weight-blod text-md detail-title">
<a class="sign mr-xs"></a>
<span>运费信息</span>
<span class="pl-sm text-warning">(到货后{{i?.paymentDays}}天内支付运费)</span>
</div>
<div>
<div nz-row>
<div *ngFor="let item of i?.goodsInfoVOList" nz-col nzSpan="24">
<div class="text-right">
<label>运费单价:</label>
<span class="text-error-dark text-xxl">{{ item?.freightPrice | currency: '¥' }} {{
freightType[item?.freightType] }}</span>
<span>(附加费率{{i?.rate * 100 | number: '0.2-2'}}%</span>
</div>
<nz-divider class="mb-xs mt-xs"></nz-divider>
<div>
<!-- <p class="text-warning-light mb-xs text-right">收货后{{ i?.paymentDays }}天内支付运费</p> -->
<p class="mb0 text-right"> {{ settlementBasis[item?.settlementBasis] }}{{ rule[item?.rule] }}</p>
</div>
</div>
</div>
</div>
</nz-card>
<nz-card [nzBorderless]="true" class="mb0">
<div class="font-weight-blod text-md detail-title">
<a class="sign mr-xs"></a>
<span>关联订单</span>
</div>
<sv-container col="5">
<sv [label]="item?.wayBillStatusLabel" *ngFor="let item of i?.wayBillClassifiedStatisticsVOList">
(<span [ngClass]="{ 'text-primary': item?.count > 0 }">{{ item?.count }}</span>)
</sv>
<!-- <sv label="运输中">
(<span [ngClass]="{ 'text-primary': i?.id > 0 }">{{ i?.id }}</span>)
</sv>
<sv label="待签收">
(<span [ngClass]="{ 'text-primary': i?.id > 0 }">{{ i?.id }}</span>)
</sv>
<sv label="已完成">
(<span [ngClass]="{ 'text-primary': i?.id > 0 }">{{ i?.id }}</span>)
</sv>
<sv label="已取消">
(<span [ngClass]="{ 'text-primary': i?.id > 0 }">{{ i?.id }}</span>)
</sv> -->
</sv-container>
</nz-card>
<nz-card [nzBorderless]="true" class="mb0">
<div class="font-weight-blod text-md detail-title">
<a class="sign mr-xs"></a>
<span>补充信息</span>
</div>
<sv-container>
<sv label="是否回单">
{{ i?.supplementaryInformationVO?.stateReceipt ? '是' : '否' }}
</sv>
<sv label="回单类型" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
{{ i?.supplementaryInformationVO?.receiptTypeLabel }}
</sv>
<sv label="联系人" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
{{ i?.supplementaryInformationVO?.receiptUserName ? i?.supplementaryInformationVO?.receiptUserName + '/' : '' }}
{{ i?.supplementaryInformationVO?.phon }}
</sv>
<sv label="所在地区" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
{{ i?.supplementaryInformationVO?.area }}
</sv>
<sv label="详细地址" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
{{ i?.supplementaryInformationVO?.address }}
</sv>
<sv label="备注">
{{ i?.supplementaryInformationVO?.remarks }}
</sv>
</sv-container>
</nz-card>
<nz-card [nzBorderless]="true" class="mb0">
<div class="font-weight-blod text-md detail-title">
<a class="sign mr-xs"></a>
<span>操作日志</span>
</div>
<st #st [data]="service.$api_getOperationLogRecordsList" [columns]="logColumns" [page]="{}"
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
[res]="{ reName: { list: 'data.records', total: 'data.total' } }" [size]="'small'">
</st>
</nz-card>
</div>