Merge branch 'st_ui' into develop

This commit is contained in:
Taric Xin
2022-03-22 14:28:18 +08:00
7 changed files with 606 additions and 527 deletions

View File

@ -0,0 +1,71 @@
:host {
::ng-deep {
nz-card {
margin: -24px -24px 0;
.ant-tabs-nav {
margin: 0;
}
}
.ant-tabs-tab {
padding: 12px 0px;
margin : 0 0 0 16px;
}
.ant-table-body {
border-bottom: 1px solid #f0f0f0;
}
.table-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;
}
}
}

View File

@ -9,30 +9,16 @@
* Copyright (C) 2022 huzhenhong. All rights reserved. * Copyright (C) 2022 huzhenhong. All rights reserved.
--> -->
<!-- 搜索表单 --> <!-- 搜索表单 -->
<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,30 +28,29 @@
</div> </div>
</ng-container> </ng-container>
</div> </div>
</nz-card> </nz-card> -->
<nz-card> <nz-card class="table-box">
<nz-tabset (nzSelectedIndexChange)="selectChange($event)" [nzTabBarExtraContent]="extraTemplate"> <div style="display: flex;align-items: center;">
<nz-tab [nzTitle]="'全部(' + tabs?.totalCount + ')'"></nz-tab> <label style="font-weight: bold;font-size: 17px;">
<nz-tab [nzTitle]="'待接单(' + tabs?.receivedQuantity + ')'"></nz-tab> <label style="color: #ff4d4f;margin-left: 17px;margin-right: 6px;">|</label>
<nz-tab [nzTitle]="'待发车(' + tabs?.stayQuantity + ')'"></nz-tab> 整车订单</label>
<nz-tab [nzTitle]="'运输中(' + tabs?.GoingQuantity + ')'"></nz-tab> <nz-tabset (nzSelectedIndexChange)="selectChange($event)" [nzTabBarExtraContent]="extraTemplate" style="flex: 1;">
<nz-tab [nzTitle]="'待签收(' + tabs?.signQuantity + ')'"></nz-tab> <nz-tab [nzTitle]="'全部(' + tabs?.totalCount + ')'"></nz-tab>
<nz-tab [nzTitle]="'已完成(' + tabs?.compolatelQuantity + ')'"></nz-tab> <nz-tab [nzTitle]="'待接单(' + tabs?.receivedQuantity + ')'"></nz-tab>
<nz-tab [nzTitle]="'已取消(' + tabs?.cancelQuantity + ')'"></nz-tab> <nz-tab [nzTitle]="'待发车(' + tabs?.stayQuantity + ')'"></nz-tab>
</nz-tabset> <nz-tab [nzTitle]="'运输中(' + tabs?.GoingQuantity + ')'"></nz-tab>
<div style="margin-top: 15px"> <nz-tab [nzTitle]="'待签收(' + tabs?.signQuantity + ')'"></nz-tab>
<st <nz-tab [nzTitle]="'已完成(' + tabs?.compolatelQuantity + ')'"></nz-tab>
#st <nz-tab [nzTitle]="'已取消(' + tabs?.cancelQuantity + ')'"></nz-tab>
[bordered]="true" </nz-tabset>
multiSort </div>
[scroll]="{ x: '1200px' }"
[data]="service.$api_get_listWholePage" <div>
[columns]="columns" <st #st [bordered]="true" multiSort [scroll]="{ x:'1200px',y:scrollY }" [data]="service.$api_get_listWholePage"
[req]="{ process: beforeReq }" [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 +82,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 +110,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 +133,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 +158,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,32 +185,44 @@
<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]="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> <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" [disabled]="loading">导出</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>
</ng-template> </ng-template>

View File

@ -1,5 +0,0 @@
:host {
p{
margin-bottom: 0
}
}

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
]; ];

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 { st {
.block-td { .block-td {
.ant-divider-vertical { .ant-divider-vertical {
display: none; display : none;
margin: 0; margin : 0;
border-left: none; border-left: none;
} }
st-td { st-td {
span>a { span>a {
display: block; display: block;
}
} }
} }
} }
}
nz-range-picker {
width: 100%;
}

View File

@ -1,80 +1,112 @@
.alain-pro__sider-logo h1 {
.alain-pro__sider-logo h1{
font-size: 15px !important; font-size: 15px !important;
} }
.page-header__title{
.page-header__title {
font-size: 14px !important; font-size: 14px !important;
} }
.alain-pro__body{
.alain-pro__body {
margin: 12px 12px 0px !important; margin: 12px 12px 0px !important;
} }
.alain-pro__page-header-content{
.alain-pro__page-header-content {
margin: 8px 8px 0 !important; margin: 8px 8px 0 !important;
} }
.ant-card { .ant-card {
margin-bottom: 8px !important; margin-bottom: 8px !important;
} }
.ant-table tfoot>tr>td, .ant-table tfoot>tr>th, .ant-table-tbody>tr>td, .ant-table-thead>tr>th{
.ant-table tfoot>tr>td,
.ant-table tfoot>tr>th,
.ant-table-tbody>tr>td,
.ant-table-thead>tr>th {
padding: 6px 10px; padding: 6px 10px;
} }
.alain-pro__page-header-wrapper{
.alain-pro__page-header-wrapper {
margin: 0 !important margin: 0 !important
} }
.alain-pro__menu-icon{
margin: 3px 5px 0 0 ; .alain-pro__menu-icon {
margin : 3px 5px 0 0;
font-size: 14px !important; font-size: 14px !important;
} }
.sf__compact .ant-form-item { .sf__compact .ant-form-item {
margin-top: 4px !important; margin-top : 4px !important;
margin-bottom: 4px !important; margin-bottom: 4px !important;
} }
.body-box{
.body-box {
max-width: 760px !important; max-width: 760px !important;
.box-content{
.box-content {
height: 77% !important; height: 77% !important;
} }
} }
.login-logo{
width:250px !important; .login-logo {
width : 250px !important;
height: 100% !important; height: 100% !important;
} }
.ant-tabs-tab-btn{
.ant-tabs-tab-btn {
font-size: 18px !important; font-size: 18px !important;
} }
.login-box-content{
.login-box-content {
max-width: 300px !important; max-width: 300px !important;
height: 100% !important; height : 100% !important;
padding: 58px 0 38px !important; padding : 58px 0 38px !important;
} }
.total-footer { .total-footer {
bottom: 10px !important; bottom: 10px !important;
} }
.ant-layout-header{
height: 44px; .ant-layout-header {
padding: 0 25px; height : 44px;
padding : 0 25px;
line-height: 44px; line-height: 44px;
img{
img {
width: 22px width: 22px
} }
.title{
.title {
font-size: 14px; font-size: 14px;
} }
} }
.ant-tabs-tab-btn{
.ant-tabs-tab-btn {
font-size: 14px !important; font-size: 14px !important;
} }
.ant-row{
margin-left: 0px !important; .ant-row {
margin-left : 0px !important;
margin-right: 0px !important; margin-right: 0px !important;
} }
h2{
h2 {
font-size: 16px !important; font-size: 16px !important;
} }
.sv__container{
.sv__container {
padding: 0 !important; padding: 0 !important;
} }
.alain-pro__menu-side .alain-pro__main .affix { .alain-pro__menu-side .alain-pro__main .affix {
top: 0 !important; top : 0 !important;
left: 215px !important; left: 215px !important;
}
.table-box {
margin: -12px -12px 0 !important;
.ant-tabs-tab {
padding: 12px 0px !important;
margin : 0 0 0 16px !important;
}
} }