Files
bbq/src/app/routes/order-management/components/vehicle/vehicle.component.html
Taric Xin 1e3e5ea830 edit
2022-03-22 15:39:43 +08:00

225 lines
11 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-03-02 14:57:31
* @FilePath : \\tms-obc-web\\src\\app\\routes\\order-management\\components\\vehicle\\vehicle.component.html
* Copyright (C) 2022 huzhenhong. All rights reserved.
-->
<!-- 搜索表单 -->
<!-- <page-header-wrapper [title]="''"> </page-header-wrapper> -->
<!-- <nz-card class="search-box">
<div nz-row nzGutter="8">
<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" [class.expend-options]="_$expand">
<button nz-button nzType="primary" [nzLoading]="loading" (click)="search()" acl
[acl-ability]="['ORDER-VEHICLE-search']">查询</button>
<button nz-button nzType="primary" [disabled]="loading">导出</button>
<button nz-button [disabled]="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 class="table-box">
<div style="display: flex;align-items: center;">
<label style="font-weight: bold;font-size: 17px;">
<label style="color: #ff4d4f;margin-left: 17px;margin-right: 6px;">|</label>
整车订单</label>
<nz-tabset (nzSelectedIndexChange)="selectChange($event)" [nzTabBarExtraContent]="extraTemplate" style="flex: 1;">
<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>
<div>
<st #st [bordered]="true" multiSort [scroll]="{ x:'1200px',y:scrollY }" [data]="service.$api_get_listWholePage"
[columns]="columns" [req]="{ process: beforeReq }"
[res]="{ reName: { list: 'data.records', total: 'data.total' } , process: afterRes}"
[page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }">
<ng-template st-row="billCode" let-item let-index="index">
<a [routerLink]="'vehicle-detail/' + item.id">{{ item.billCode }}</a>
<div>
<span>{{ item?.billTypeLabel }}{{ item?.serviceTypeLabel }}</span>
</div>
<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="createUserName" let-item let-index="index">
<div> {{ item?.createUserName }}/{{ item?.createUserPhone }} </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 | number: '0.2-2' }}
<span *ngIf="data.paymentStatusLabel" style="color: #f59a63">{{ data.paymentStatusLabel }}</span>
</p>
</div>
</ng-template> -->
<ng-template st-row="mybidDetailInfo" let-item let-index="index">
<div *ngIf="item.mybidDetailInfo.length > 0">
<div *ngFor="let data of item.mybidDetailInfo">
{{ data.expenseName }}{{ data.price | currency }}
<span *ngIf="data.paymentStatus && data.paymentStatus === '1' && data.price>0"
style="color: #f59a63">待申请</span>
<span *ngIf="data.paymentStatus && data.paymentStatus === '2'" style="color: #f59a63">已支付</span>
<span *ngIf="data.paymentStatus && data.paymentStatus === '3'" style="color: #f59a63">已拒绝</span>
<span *ngIf="data.paymentStatus && data.paymentStatus === '4'" style="color: #f59a63">申请中</span>
<span *ngIf="data.paymentStatus && data.paymentStatus === '5'" style="color: #f59a63">退款中</span>
<span *ngIf="data.paymentStatus && data.paymentStatus === '6'" style="color: #f59a63">退款成功</span>
</div>
</div>
</ng-template>
<ng-template st-row="billExpenseDetailVOList" let-item let-index="index">
<div *ngFor="let i of item?.billExpenseDetailVOList; let ii = index">
<span>{{ i?.costName }}{{ i?.price }}</span>
</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="loadingTime" let-item let-index="index">
<div *ngIf="item?.loadingTime">装 | {{ item?.loadingTime }}</div>
<div *ngIf="item?.unloadingTime">卸 | {{ item?.unloadingTime }}</div>
</ng-template>
</st>
</div>
</nz-card>
<nz-modal [(nzVisible)]="isVisible" [nzWidth]="600" [nzFooter]="nzModalFooter" nzTitle="运费变更记录"
(nzOnCancel)="handleCancel('0')">
<ng-container *nzModalContent>
<st #stFloat multiSort 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' } }">
<ng-template st-row="order" let-item let-index="index">
{{ index + 1 }}
</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="查看"
(nzOnCancel)="handleCancel('1')">
<ng-container *nzModalContent>
<st #stFloatView size="small" [bordered]="true" [data]="service.$api_getChangeRecordWholeDetail"
[columns]="columnsFloatView" [req]="{ method: 'POST', allInBody: true, 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"
(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)="handleCancel('2')">确定</button>
</ng-template>
</nz-modal>
<nz-drawer [nzBodyStyle]="{ overflow: 'auto' }" [nzMaskClosable]="false" [nzWidth]="420" [nzVisible]="visible"
[nzMaskClosable]="true" nzTitle="筛选" [nzFooter]="footerTpl" (nzOnClose)="visible=false">
<div *nzDrawerContent>
<sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
</div>
<ng-template #footerTpl>
<div style="float: right">
<button nz-button (click)="visible=false">关闭</button>
<button nz-button [disabled]="loading" (click)="resetSF()">重置</button>
<button nz-button nzType="primary" (click)="search();;">搜索</button>
</div>
</ng-template>
</nz-drawer>
<ng-template #extraTemplate>
<div>
<button nz-button nzType="primary" (click)="modifyRate()" acl
[acl-ability]="['ORDER-VEHICLE-modificationAdditional']"> 修改附加费率 </button>
<button nz-button nzType="primary" (click)="modifyFreightPeople()" acl
[acl-ability]="['ORDER-VEHICLE-modificationNetworkFreight']"> 修改网络货运人 </button>
<button nz-button nzType="primary" (click)="modifycaptain()" acl
[acl-ability]="['ORDER-VEHICLE-modificationCarCaptain']"> 修改车队长 </button>
<button *ngIf="resourceStatus == 4" nz-button nzType="primary" nzGhost nz-popconfirm [nzPopconfirmTitle]="enable"
(nzOnConfirm)="userAction()" nzPopconfirmPlacement="bottomRight" acl
[acl-ability]="['ORDER-VEHICLE-batchSignWholeOrder']">
批量签收
</button>
<button nz-button nzType="primary" [disabled]="loading">导出</button>
<button nz-button nzType="primary" (click)="visible=true;" class="mr-sm">筛选</button>
</div>
</ng-template>
<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>