Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
Taric Xin
2022-03-22 09:22:45 +08:00
parent cd48729a4b
commit 9c97943076
5 changed files with 564 additions and 483 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/app/routes/order-management/components/vehicle/vehicle.component.html
View File

@ -10,29 +10,15 @@
--> -->
<!-- 搜索表单 --> <!-- 搜索表单 -->
<page-header-wrapper [title]="''"> </page-header-wrapper> <page-header-wrapper [title]="''"> </page-header-wrapper>
<nz-card> <!-- <nz-card class="search-box">
<div nz-row nzGutter="8"> <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]="false"
(formSubmit)="st?.load(1)"
(formReset)="resetSF()"
></sf>
</div>
<!-- 查询字段大于3个时，根据展开状态调整布局 -->
<ng-container *ngIf="queryFieldCount > 4"> <ng-container *ngIf="queryFieldCount > 4">
<div nz-col [nzSpan]="_$expand ? 24 : 18"> <div nz-col [nzSpan]="_$expand ? 24 : 18">
<sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'"></sf> <sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
</div> </div>
<div nz-col [nzSpan]="_$expand ? 24 : 6" class="text-right"> <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" [nzLoading]="loading" (click)="search()" acl
[acl-ability]="['ORDER-VEHICLE-search']">查询</button>
<button nz-button nzType="primary" [disabled]="loading">导出</button> <button nz-button nzType="primary" [disabled]="loading">导出</button>
<button nz-button [disabled]="loading" (click)="resetSF()">重置</button> <button nz-button [disabled]="loading" (click)="resetSF()">重置</button>
<button nz-button nzType="link" (click)="expandToggle()"> <button nz-button nzType="link" (click)="expandToggle()">
@ -42,9 +28,9 @@
</div> </div>
</ng-container> </ng-container>
</div> </div>
</nz-card> </nz-card> -->
<nz-card> <nz-card class="content-box">
<nz-tabset (nzSelectedIndexChange)="selectChange($event)" [nzTabBarExtraContent]="extraTemplate"> <nz-tabset (nzSelectedIndexChange)="selectChange($event)" [nzTabBarExtraContent]="extraTemplate">
<nz-tab [nzTitle]="'全部(' + tabs?.totalCount + ')'"></nz-tab> <nz-tab [nzTitle]="'全部(' + tabs?.totalCount + ')'"></nz-tab>
<nz-tab [nzTitle]="'待接单(' + tabs?.receivedQuantity + ')'"></nz-tab> <nz-tab [nzTitle]="'待接单(' + tabs?.receivedQuantity + ')'"></nz-tab>
@ -54,18 +40,11 @@
<nz-tab [nzTitle]="'已完成(' + tabs?.compolatelQuantity + ')'"></nz-tab> <nz-tab [nzTitle]="'已完成(' + tabs?.compolatelQuantity + ')'"></nz-tab>
<nz-tab [nzTitle]="'已取消(' + tabs?.cancelQuantity + ')'"></nz-tab> <nz-tab [nzTitle]="'已取消(' + tabs?.cancelQuantity + ')'"></nz-tab>
</nz-tabset> </nz-tabset>
<div style="margin-top: 15px"> <div>
<st <st #st [bordered]="true" multiSort [scroll]="{ x:'1200px',y:scrollY }" [data]="service.$api_get_listWholePage"
#st [columns]="columns" [req]="{ process: beforeReq }"
[bordered]="true"
multiSort
[scroll]="{ x: '1200px' }"
[data]="service.$api_get_listWholePage"
[columns]="columns"
[req]="{ process: beforeReq }"
[res]="{ reName: { list: 'data.records', total: 'data.total' } , process: afterRes}" [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] }" [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"> <ng-template st-row="billCode" let-item let-index="index">
<a [routerLink]="'vehicle-detail/' + item.id">{{ item.billCode }}</a> <a [routerLink]="'vehicle-detail/' + item.id">{{ item.billCode }}</a>
<div> <div>
@ -97,8 +76,9 @@
<ng-template st-row="mybidDetailInfo" let-item let-index="index"> <ng-template st-row="mybidDetailInfo" let-item let-index="index">
<div *ngIf="item.mybidDetailInfo.length > 0"> <div *ngIf="item.mybidDetailInfo.length > 0">
<div *ngFor="let data of item.mybidDetailInfo"> <div *ngFor="let data of item.mybidDetailInfo">
{{ data.expenseName }}：{{ data.price | currency }} {{ 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 === '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 === '2'" style="color: #f59a63">已支付</span>
<span *ngIf="data.paymentStatus && data.paymentStatus === '3'" 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 === '4'" style="color: #f59a63">申请中</span>
@ -124,20 +104,18 @@
</ng-template> </ng-template>
</st> </st>
</div> </div>
<div class="footer-page">
</div>
</nz-card> </nz-card>
<nz-modal [(nzVisible)]="isVisible" [nzWidth]="600" [nzFooter]="nzModalFooter" nzTitle="运费变更记录" (nzOnCancel)="handleCancel('0')"> <nz-modal [(nzVisible)]="isVisible" [nzWidth]="600" [nzFooter]="nzModalFooter" nzTitle="运费变更记录"
(nzOnCancel)="handleCancel('0')">
<ng-container *nzModalContent> <ng-container *nzModalContent>
<st <st #stFloat multiSort size="small" [bordered]="true" [data]="service.$api_get_listChangeApply"
#stFloat
multiSort
size="small"
[bordered]="true"
[data]="service.$api_get_listChangeApply"
[columns]="columnsFloat" [columns]="columnsFloat"
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: changeParams }" [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: changeParams }"
[res]="{ reName: { list: 'data', total: 'data.total' } }" [res]="{ reName: { list: 'data', total: 'data.total' } }">
>
<ng-template st-row="order" let-item let-index="index"> <ng-template st-row="order" let-item let-index="index">
{{ index + 1 }} {{ index + 1 }}
</ng-template> </ng-template>
@ -149,31 +127,23 @@
</ng-template> </ng-template>
</nz-modal> </nz-modal>
<nz-modal [(nzVisible)]="isVisibleView" [nzWidth]="600" [nzFooter]="nzModalFooterview" nzTitle="查看" (nzOnCancel)="handleCancel('1')"> <nz-modal [(nzVisible)]="isVisibleView" [nzWidth]="600" [nzFooter]="nzModalFooterview" nzTitle="查看"
(nzOnCancel)="handleCancel('1')">
<ng-container *nzModalContent> <ng-container *nzModalContent>
<st <st #stFloatView size="small" [bordered]="true" [data]="service.$api_getChangeRecordWholeDetail"
#stFloatView [columns]="columnsFloatView" [req]="{ method: 'POST', allInBody: true, params: changeViewParams }"
size="small" [res]="{ reName: { list: 'data.list', total: 'data.total' } }">
[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"> <ng-template st-row="amountBeforeChange" let-item let-index="index">
{{ item.amountBeforeChange | currency }} {{ item.amountBeforeChange | currency }}
</ng-template> </ng-template>
<ng-template st-row="amountchangeValue" let-item let-index="index"> ￥{{ item.amountchangeValue | number: '0.2-2' }} </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"> <ng-template st-row="amountAfterChange" let-item let-index="index">
{{ item.amountAfterChange | currency }} {{ item.amountAfterChange | currency }}
</ng-template> </ng-template>
</st> </st>
<div <div><span>变更原因：{{ ViewCause?.changeCause }}</span></div>
><span>变更原因：{{ ViewCause?.changeCause }}</span></div <div><span>拒绝原因：{{ ViewCause?.refuseCause }}</span></div>
>
<div
><span>拒绝原因：{{ ViewCause?.refuseCause }}</span></div
>
<div><span>注：附加费依据调整后的运输费用重新计算</span></div> <div><span>注：附加费依据调整后的运输费用重新计算</span></div>
</ng-container> </ng-container>
<ng-template #nzModalFooterview> <ng-template #nzModalFooterview>
@ -182,7 +152,8 @@
</ng-template> </ng-template>
</nz-modal> </nz-modal>
<nz-modal [(nzVisible)]="isVisibleEvaluate" [nzWidth]="600" [nzFooter]="nzModalFooterEvaluate" (nzOnCancel)="handleCancel('2')"> <nz-modal [(nzVisible)]="isVisibleEvaluate" [nzWidth]="600" [nzFooter]="nzModalFooterEvaluate"
(nzOnCancel)="handleCancel('2')">
<ng-container *nzModalContent> <ng-container *nzModalContent>
<nz-tabset> <nz-tabset>
<nz-tab nzTitle="货主评价"> <nz-tab nzTitle="货主评价">
@ -208,31 +179,41 @@
<button nz-button nzType="primary" (click)="handleCancel('2')">确定</button> <button nz-button nzType="primary" (click)="handleCancel('2')">确定</button>
</ng-template> </ng-template>
</nz-modal> </nz-modal>
<nz-drawer [nzBodyStyle]="{ overflow: 'auto' }" [nzMaskClosable]="false" [nzWidth]="500" [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 style="margin-right: 8px;" (click)="visible=false">关闭</button>
<button nz-button nzType="primary" (click)="search();;">搜索</button>
</div>
</ng-template>
</nz-drawer>
<ng-template #extraTemplate> <ng-template #extraTemplate>
<div> <div>
<button nz-button nzType="primary" (click)="modifyRate()" acl [acl-ability]="['ORDER-VEHICLE-modificationAdditional']"> 修改附加费率 </button> <button nz-button nzType="primary" (click)="modifyRate()" acl
<button nz-button nzType="primary" (click)="modifyFreightPeople()" acl [acl-ability]="['ORDER-VEHICLE-modificationNetworkFreight']"> 修改网络货运人 </button> [acl-ability]="['ORDER-VEHICLE-modificationAdditional']"> 修改附加费率 </button>
<button nz-button nzType="primary" (click)="modifycaptain()" acl [acl-ability]="['ORDER-VEHICLE-modificationCarCaptain']"> 修改车队长 </button> <button nz-button nzType="primary" (click)="modifyFreightPeople()" acl
<button [acl-ability]="['ORDER-VEHICLE-modificationNetworkFreight']"> 修改网络货运人 </button>
*ngIf="resourceStatus == 4" <button nz-button nzType="primary" (click)="modifycaptain()" acl
nz-button [acl-ability]="['ORDER-VEHICLE-modificationCarCaptain']"> 修改车队长 </button>
nzType="primary" <button *ngIf="resourceStatus == 4" nz-button nzType="primary" nzGhost nz-popconfirm [nzPopconfirmTitle]="enable"
nzGhost (nzOnConfirm)="userAction()" nzPopconfirmPlacement="bottomRight" acl
nz-popconfirm [acl-ability]="['ORDER-VEHICLE-batchSignWholeOrder']">
[nzPopconfirmTitle]="enable"
(nzOnConfirm)="userAction()"
nzPopconfirmPlacement="bottomRight"
acl [acl-ability]="['ORDER-VEHICLE-batchSignWholeOrder']"
>
批量签收 批量签收
</button> </button>
<button nz-button nzType="primary" (click)="visible=true;" class="mr-sm">搜索</button>
</div> </div>
</ng-template> </ng-template>
<ng-template #enable> <ng-template #enable>
<div class="ant-popover-message"> <div class="ant-popover-message">
<i nz-icon nzType="info-circle" nzTheme="fill"></i> <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" <div class="ant-popover-message-title ng-star-inserted self-ant-popover-title" style="font-size: 16px">已选择{{
>已选择{{ selectedRows?.length || 0 }}条订单，确认批量签收吗？ selectedRows?.length || 0 }}条订单，确认批量签收吗？
</div> </div>
<div class="ant-popover-message-title ng-star-inserted"> 签收后不可再修改运费，请确保运费等信息准确无误后，再进行签收。 </div> <div class="ant-popover-message-title ng-star-inserted"> 签收后不可再修改运费，请确保运费等信息准确无误后，再进行签收。 </div>
</div> </div>

114
src/app/routes/order-management/components/vehicle/vehicle.component.less
View File

@ -1,5 +1,117 @@
:host { :host {
p{ p {
margin-bottom: 0 margin-bottom: 0
} }
::ng-deep {
// .ant-table-content {
// transform: scaleY(-1);
// table {
// transform: inherit
// }
// }
.page-header {
border : 0;
padding: 8px 8px 0;
.ant-breadcrumb {
margin-bottom: 8px;
}
}
nz-range-picker {
width: 100%;
}
nz-card {
margin: -24px -24px 0;
.ant-tabs-nav {
margin: 0;
}
}
// .footer-page {
// position : fixed;
// bottom : 0px;
// width : calc(100% - 300px);
// right : 48px;
// background-color: #ffffff;
// height : 56px;
// }
// nz-pagination {
// position: fixed;
// bottom : 0px;
// width : 800px;
// right : 48px;
// z-index : 999;
// }
.ant-tabs-tab {
padding: 12px 0px;
margin : 0 0 0 16px;
}
.ant-table-body {
border-bottom: 1px solid #f0f0f0;
}
.search-box {
.ant-card-body {
padding-bottom: 18px;
}
}
.content-box {
.ant-card-body {
padding: 0px;
}
}
.ant-table-pagination.ant-pagination {
margin: 8px;
}
.ant-table-thead>tr>th,
.ant-table-tbody>tr>td,
.ant-table tfoot>tr>th,
.ant-table tfoot>tr>td {
padding: 8px;
}
.ant-table.ant-table-bordered>.ant-table-container {
border-top: 0;
}
.ant-pagination-item {
min-width : 24px;
height : 24px;
line-height: 21px;
}
.ant-pagination-total-text {
height : 24px;
line-height: 24px;
}
.ant-pagination-prev,
.ant-pagination-next,
.ant-pagination-jump-prev,
.ant-pagination-jump-next {
min-width : 24px;
height : 24px;
line-height: 21px;
}
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
height: 24px;
}
.ant-select-single .ant-select-selector .ant-select-selection-item,
.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
line-height: 21px;
}
}
} }

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

File diff suppressed because it is too large Load Diff

4
src/app/shared/shared-zorro.module.ts
View File

@ -47,6 +47,7 @@ import { NzAffixModule } from 'ng-zorro-antd/affix';
import { NzTypographyModule } from 'ng-zorro-antd/typography'; import { NzTypographyModule } from 'ng-zorro-antd/typography';
import { NzSwitchModule } from 'ng-zorro-antd/switch'; import { NzSwitchModule } from 'ng-zorro-antd/switch';
import { NzImageModule } from 'ng-zorro-antd/image'; import { NzImageModule } from 'ng-zorro-antd/image';
import { NzDrawerModule } from 'ng-zorro-antd/drawer';
export const SHARED_ZORRO_MODULES = [ export const SHARED_ZORRO_MODULES = [
NzButtonModule, NzButtonModule,
NzGridModule, NzGridModule,
@ -87,5 +88,6 @@ export const SHARED_ZORRO_MODULES = [
NzAffixModule, NzAffixModule,
NzTypographyModule, NzTypographyModule,
NzSwitchModule, NzSwitchModule,
NzImageModule NzImageModule,
NzDrawerModule
]; ];

59
src/styles.less
View File

@ -7,59 +7,64 @@
@import './styles/theme'; @import './styles/theme';
.icon { .icon {
width : 18px; width : 18px;
fill : currentColor; fill : currentColor;
overflow : hidden; overflow : hidden;
font-size: 18px !important; font-size : 18px !important;
color : #ffffff; color : #ffffff;
margin-right: 10px; margin-right: 10px;
} }
@layout-gutter: 8px; @layout-gutter: 8px;
/* 全局滚动条美化 */ /* 全局滚动条美化 */
*::-webkit-scrollbar { *::-webkit-scrollbar {
width : (@layout-gutter); width : (@layout-gutter);
height: (@layout-gutter); height: (@layout-gutter);
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
background : #d9d9d9; background : #d9d9d9;
cursor : pointer; cursor : pointer;
border-radius: (@layout-gutter) / 2; border-radius: (@layout-gutter) / 2;
} }
/* 全局隐藏input-number上下箭头 谷歌*/ /* 全局隐藏input-number上下箭头 谷歌*/
input::-webkit-outer-spin-button, input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { input::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
} }
/* 全局隐藏input-number上下箭头 火狐*/ /* 全局隐藏input-number上下箭头 火狐*/
input[type="number"] { input[type="number"] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
.alain-pro__sider-logo { .alain-pro__sider-logo {
padding-left: 12px; padding-left: 12px;
} }
.break-word-all { .break-word-all {
word-break: break-all; word-break: break-all;
word-wrap : break-word; word-wrap : break-word;
} }
st {
.block-td {
.ant-divider-vertical {
display: none;
margin: 0;
border-left: none;
}
st-td { st {
span>a { .block-td {
display: block; .ant-divider-vertical {
} display : none;
margin : 0;
border-left: none;
}
st-td {
span>a {
display: block;
} }
} }
} }
}
nz-range-picker {
width: 100%;
}