Files
bbq/src/app/routes/order-management/components/bulk/bulk.component.html
2022-01-25 16:55:03 +08:00

243 lines
10 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.

<!--
* @Description :
* @Version : 1.0
* @Author : Shiming
* @Date : 2022-01-12 10:52:50
* @LastEditors : Shiming
* @LastEditTime : 2022-01-25 16:52:29
* @FilePath : \\tms-obc-web\\src\\app\\routes\\order-management\\components\\bulk\\bulk.component.html
* Copyright (C) 2022 huzhenhong. All rights reserved.
-->
<!-- 搜索表单 -->
<page-header-wrapper [title]="''">
</page-header-wrapper>
<nz-card>
<div nz-row nzGutter="8">
<!-- 查询字段小于或等于3个时不显示伸缩按钮 -->
<div nz-col nzSpan="24" *ngIf="queryFieldCount <= 4">
<sf #sf [schema]="schema" [ui]="ui" [mode]="'search'" [disabled]="!sf?.valid" [loading]="service.http.loading"
(formSubmit)="st?.load(1)" (formReset)="resetSF()"></sf>
</div>
<!-- 查询字段大于3个时根据展开状态调整布局 -->
<ng-container *ngIf="queryFieldCount > 4">
<div nz-col [nzSpan]="_$expand ? 24 : 18">
<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" [nzLoading]="service.http.loading"
(click)="search()">查询</button>
<button nz-button nzType="primary" [disabled]="service.http.loading"
>导出</button>
<button nz-button [disabled]="service.http.loading" (click)="resetSF()">重置</button>
<button nz-button nzType="link" (click)="expandToggle()">
{{ !_$expand ? '展开' : '收起' }}
<i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
</button>
</div>
</ng-container>
</div>
</nz-card>
<nz-card>
<nz-tabset (nzSelectedIndexChange)="selectChange($event)"
[nzTabBarExtraContent]="extraTemplate">
<nz-tab [nzTitle]="'全部('+tabs?.totalCount+')'"></nz-tab>
<nz-tab [nzTitle]="'待接单('+tabs?.receivedQuantity+')'"></nz-tab>
<nz-tab [nzTitle]="'待发车('+tabs?.stayQuantity+')'"></nz-tab>
<nz-tab [nzTitle]="'运输中('+tabs?.GoingQuantity+')'"></nz-tab>
<nz-tab [nzTitle]="'待签收('+tabs?.signQuantity+')'"></nz-tab>
<nz-tab [nzTitle]="'已完成('+tabs?.compolatelQuantity+')'"></nz-tab>
<nz-tab [nzTitle]="'已取消('+tabs?.cancelQuantity+')'"></nz-tab>
</nz-tabset>
<div style="margin-top: 15px;">
<st
#st
[bordered]="true"
[scroll]="{ x: '2000px' }"
[data]="service.$api_get_listBulkPage"
[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] }"
[loading]="service.http.loading"
>
<ng-template st-row="freightPrice" let-item let-index="index">
{{ item.freightPrice | currency}}
</ng-template>
<ng-template st-row="loadingTime" let-item let-index="index">
<div *ngIf="item?.loadPlanTime">装 | {{item?.loadPlanTime}}</div>
<div *ngIf="item?.unloadPlanTime">卸 | {{item?.unloadPlanTime}}</div>
</ng-template>
<ng-template st-row="driverName" let-item let-index="index">
<div>
{{item?.driverName}}/{{item?.driverPhone}}/{{item?.carNo}}
</div>
</ng-template>
<ng-template st-row="payeeName" let-item let-index="index">
<div>
{{item?.payeeName}}/{{item?.payeePhone}}
</div>
</ng-template>
<ng-template st-row="billCode" let-item let-index="index">
<a [routerLink]="'/order-management/bulk-detail/'+item.id">{{item.billCode}}</a>
<div>
<span>{{item?.billStatusLabel}}</span>
</div>
</ng-template>
<ng-template st-row="goodsName" let-item let-index="index">
<div>{{item?.goodsName}}</div>
<div>
<span>{{item?.weight ? item?.weight + '吨/' : '' }}</span>
<span>{{item?.volume ? item?.volume + '方/' : '' }}</span>
<span>{{item?.goodsNumber ? item?.goodsNumber + '吨' : '' }}</span>
</div>
</ng-template>
<ng-template st-row="mybidDetailInfo" let-item let-index="index">
<div *ngIf="item.mybidDetailInfo.length > 0">
<p *ngFor="let data of item.mybidDetailInfo">
{{ data.expenseName }}{{ data.price | currency }}
<span *ngIf="data.paymentStatusLabel" style="color: #f59a63">{{ data.paymentStatusLabel }}</span>
</p>
</div>
</ng-template>
<!-- <ng-template st-row="externalSn" let-item let-index="index">
<span class="mr-xs">{{111111}}</span>
<a (click)="editEnternalSn(item)">编辑</a>
</ng-template> -->
<ng-template st-row="enStatusStr27878" let-item let-index="index">
<div class="mr-xs" nzPopoverTitle="Title" nz-popover [nzPopoverContent]="contentTemplate">{{item.no}}</div>
</ng-template>
<ng-template #contentTemplate>
<div>
<p>预付¥200.00</p>
<p>到付¥200.00</p>
<p>油卡¥200.00</p>
<p>回单付¥200.00</p>
<p>小计¥200.00</p>
<p>附加费¥200.00</p>
</div>
</ng-template>
</st>
</div>
</nz-card>
<nz-modal [(nzVisible)]="isVisible" [nzWidth]="600" [nzFooter]="nzModalFooter" nzTitle="运费变更记录" (nzOnOk)="handleOK()" (nzOnCancel)="handleCancel('0')">
<ng-container *nzModalContent>
<st
#stFloat
size="small"
[bordered]="true"
[data]="service.$api_get_listChangeApply"
[columns]="columnsFloat"
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: changeParams }"
[res]="{ reName: { list: 'data', total: 'data.total' } }"
[page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
>
<ng-template st-row="order" let-item let-index="index">
{{ index + 1 }}
</ng-template>
<ng-template st-row="externalSn" let-item let-index="index">
<div>
<span *ngIf="item?.externalSn == '1'">待确认</span>
<span *ngIf="item?.externalSn == '2'">已确认</span>
<span *ngIf="item?.externalSn == '3'">已撤销</span>
<span *ngIf="item?.externalSn == '4'">拒绝</span>
</div>
</ng-template>
</st>
</ng-container>
<ng-template #nzModalFooter>
<button nz-button nzType="primary" (click)="handleCancel('0')">取消</button>
<button nz-button nzType="default" (click)="handleCancel('0')">确定</button>
</ng-template>
</nz-modal>
<nz-modal [(nzVisible)]="isVisibleView" [nzWidth]="600" [nzFooter]="nzModalFooterview" nzTitle="查看" (nzOnOk)="handleOK()" (nzOnCancel)="handleCancel('1')">
<ng-container *nzModalContent>
<sf #sfView [schema]="schemaView" [ui]="uiView" [formData]="ViewCause" [compact]="true" [button]="'none'">
<ng-template sf-template="no" let-me let-ui="uiView" let-schema="schemaView">
<div style="display: flex;">
<nz-input-number [(ngModel)]="demoValue" [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
<div class="left_btn">元/吨</div>
</div>
</ng-template>
</sf>
<st
#stFloatView
multiSort
size="small"
[bordered]="true"
[data]="service.$api_getChangeRecordBulkDetail"
[columns]="columnsFloatView"
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: changeViewParams }"
[res]="{ reName: { list: 'data.list', total: 'data.total' } }"
>
<ng-template st-row="amountBeforeChange" let-item let-index="index">
{{ item.amountBeforeChange | currency}}
</ng-template>
<ng-template st-row="amountchangeValue" let-item let-index="index">
¥{{ item.amountchangeValue | number: '0.2-2'}}
</ng-template>
<ng-template st-row="amountAfterChange" let-item let-index="index">
{{ item.amountAfterChange | currency}}
</ng-template>
</st>
<div><span>变更原因:{{ViewCause?.changeCause}}</span></div>
<div><span>拒绝原因:{{ViewCause?.refuseCause}}</span></div>
<div><span>注:附加费依据调整后的运输费用重新计算</span></div>
</ng-container>
<ng-template #nzModalFooterview>
<button nz-button nzType="default" (click)="handleCancel('1')">取消</button>
<button nz-button nzType="primary" (click)="handleCancel('1')">确定</button>
</ng-template>
</nz-modal>
<nz-modal [(nzVisible)]="isVisibleEvaluate" [nzWidth]="600" [nzFooter]="nzModalFooterEvaluate" (nzOnOk)="handleOK()" (nzOnCancel)="handleCancel('2')">
<ng-container *nzModalContent>
<nz-tabset>
<nz-tab nzTitle="货主评价">
<sv-container col="1" labelWidth="90">
<sv [label]="i.evaluateTypeLabel"*ngFor="let i of shipList" >
<nz-rate [ngModel]="i.evaluateFraction" nzDisabled="true"></nz-rate>
</sv>
</sv-container>
<div *ngIf="shipList.length < 1">暂无评价内容</div>
</nz-tab>
<nz-tab nzTitle="司机评价">
<sv-container col="1" labelWidth="90">
<sv [label]="i.evaluateTypeLabel"*ngFor="let i of diverList" >
<nz-rate [ngModel]="i.evaluateFraction" nzDisabled="true"></nz-rate>
</sv>
</sv-container>
<div *ngIf="diverList.length < 1">暂无评价内容</div>
</nz-tab>
</nz-tabset>
</ng-container>
<ng-template #nzModalFooterEvaluate>
<button nz-button nzType="default" (click)="handleCancel('2')">取消</button>
<button nz-button nzType="primary" (click)="handleOK()">确定</button>
</ng-template>
</nz-modal>
<ng-template #enable>
<div class="ant-popover-message">
<i nz-icon nzType="info-circle" nzTheme="fill"></i>
<div class="ant-popover-message-title ng-star-inserted self-ant-popover-title" style="font-size: 16px">已选择{{selectedRows?.length || 0}}条订单,确认批量签收吗?
</div>
<div class="ant-popover-message-title ng-star-inserted">
签收后不可再修改运费,请确保运费等信息准确无误后,再进行签收。
</div>
</div>
</ng-template>
<ng-template #extraTemplate>
<div>
<button nz-button nzType="primary" nzGhost nz-popconfirm
[nzPopconfirmTitle]="enable" (nzOnConfirm)="userAction()" nzPopconfirmPlacement="bottomRight">
批量签收
</button>
</div>
</ng-template>