This commit is contained in:
Taric Xin
2021-12-22 11:06:53 +08:00
parent 657cd16ab1
commit 70aef3b778
3 changed files with 273 additions and 293 deletions

View File

@ -1,37 +1,21 @@
<!--
* @Author: your name
* @Date: 2021-12-03 11:10:14
* @LastEditTime: 2021-12-16 20:16:30
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \tms-obc-web\src\app\routes\supply-management\components\vehicle\vehicle.component.html
-->
<!-- 搜索表单 -->
<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 nz-col [nzXl]="_$expand ? 24 : 18" [nzLg]="24" [nzSm]="24" [nzXs]="24">
<sf #sf [schema]="schema" [ui]="{ '*': { spanLabelFixed: 110,grid: { lg: 8, md: 12, sm: 12, xs: 24, gutter: 4 } }}"
[compact]="true" [button]="'none'"></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">
<div nz-col [nzXl]="_$expand ? 24 : 6" [nzLg]="24" [nzSm]="24" [nzXs]="24" [class.expend-options]="_$expand"
class="text-right">
<button nz-button nzType="primary" [disabled]="!sf.valid" [nzLoading]="service.http.loading"
(click)="st?.load(1)">查询</button>
<button nz-button nzType="primary"
>导出</button>
<button nz-button nzType="primary">导出</button>
<button nz-button (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>
@ -40,8 +24,7 @@
<nz-tab *ngFor="let tab of tabs; let i = index" [nzTitle]="tab.name + ' (' + tab.count + ') '" (nzClick)="tabChange(i)">
</nz-tab>
</nz-tabset> -->
<nz-tabset (nzSelectedIndexChange)="selectChange($event)"
[nzTabBarExtraContent]="extraTemplate">
<nz-tabset (nzSelectedIndexChange)="selectChange($event)" [nzTabBarExtraContent]="extraTemplate">
<nz-tab [nzTitle]="'全部('+tabs?.totalQuantity+')'"></nz-tab>
<nz-tab [nzTitle]="'待接单('+tabs?.stayQuantity+')'"></nz-tab>
<nz-tab [nzTitle]="'已接单('+tabs?.receivedQuantity+')'"></nz-tab>
@ -50,40 +33,23 @@
<div style="margin-top: 15px;">
<!-- 选中提示框 -->
<div style="position: relative">
<nz-alert
nzType="info"
[nzMessage]="'当前共' + st?.total + '行记录已选择' + selectedRows.length + ''"
nzShowIcon
[ngStyle]="{ margin: '0 0 1rem 0' }"
>
<nz-alert nzType="info" [nzMessage]="'当前共' + st?.total + '行记录已选择' + selectedRows.length + ''" nzShowIcon
[ngStyle]="{ margin: '0 0 1rem 0' }">
</nz-alert>
</div>
<st
#st
size="small"
[bordered]="true"
[scroll]="{ x: '2000px' }"
[data]="service.$api_get_wholePage_list"
<st #st size="small" [bordered]="true" [scroll]="{ x: '2000px' }" [data]="service.$api_get_wholePage_list"
[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] }"
[loadingDelay]="500"
[loading]="service.http.loading"
>
[loadingDelay]="500" [loading]="service.http.loading" [scroll]="{ x: '1200px',y:'500px' }">
<ng-template st-row="resourceCode" let-item let-index="index">
<a [routerLink]="'/supply-management/vehicle-detail/'+item.id">{{item.resourceCode}}</a>
</ng-template>
<ng-template st-row="vehicleDemand" let-item let-index="index">
<div>车型: {{item?.vehicleDemand?.maxWeight}}</div>
<div class="error">车长: {{item?.vehicleDemand?.maxCube}} 米</div>
</ng-template>
<ng-template st-row="serviceType" let-item let-index="index">
<span *ngIf="item?.serviceType === 1 || item?.serviceType === '1'">抢单</span>
<span *ngIf="item?.serviceType === 2 || item?.serviceType === '2'">指派</span>
<p>{{item.resourceTypeLabel}}{{item.serviceTypeLabel}}</p>
</ng-template>
<ng-template st-row="totalAmount" let-item let-index="index">
<div class="mr-xs" nzPopoverTitle="Title" nz-popover [nzPopoverContent]="contentTemplate">{{item.totalAmount}}</div>
<div class="mr-xs" nzPopoverTitle="Title" nz-popover [nzPopoverContent]="contentTemplate">{{item.totalAmount}}
</div>
</ng-template>
<ng-template #contentTemplate>
<div>
@ -106,15 +72,11 @@ size="small"
</div>
</ng-template>
<nz-modal [(nzVisible)]="isVisible" [nzFooter]="nzModalFooter" nzTitle="货源审核" (nzOnOk)="handleOK()" (nzOnCancel)="handleCancel('suppliersType')">
<nz-modal [(nzVisible)]="isVisible" [nzFooter]="nzModalFooter" nzTitle="货源审核" (nzOnOk)="handleOK()"
(nzOnCancel)="handleCancel('suppliersType')">
<ng-container *nzModalContent>
<div style="position: relative" *ngIf="auditMany">
<nz-alert
nzType="info"
[nzMessage]="'已选择' + 6 + ''"
nzShowIcon
[ngStyle]="{ margin: '0 0 1rem 0' }"
>
<nz-alert nzType="info" [nzMessage]="'已选择' + 6 + ''" nzShowIcon [ngStyle]="{ margin: '0 0 1rem 0' }">
</nz-alert>
</div>
<sf #sfFre [schema]="freightSchema" [ui]="ui2" [compact]="false" [button]="'none'">

View File

@ -1,2 +1,25 @@
:host {
.expend-options {
margin-top: 0px;
}
@media (min-width: 1200px) {
.expend-options {
margin-top: -40px;
max-width : 400px;
position : absolute;
right : 0;
bottom : 30px;
}
}
:host::ng-deep {
p {
margin-bottom: 0;
}
.text-truncate {
white-space: normal;
}
}

View File

@ -16,9 +16,8 @@ import { SupplyManagementUpdateFreightComponent } from '../update-freight/update
styleUrls: ['./vehicle.component.less']
})
export class SupplyManagementVehicleComponent implements OnInit {
ui: SFUISchema = {};
ui2: SFUISchema = {};
schema: SFSchema = {};
schema: SFSchema = this.initSF();
freightSchema: SFSchema = {};
auditMany = false;
isVisible = false;
@ -43,111 +42,26 @@ export class SupplyManagementVehicleComponent implements OnInit {
get reqParams() {
const a: any = {};
if (this.resourceStatus) {
a.resourceStatus = this.resourceStatus
a.resourceStatus = this.resourceStatus;
}
return {
...a,
...this.sf?.value,
...this.sf?.value
};
}
get selectedRows() {
return this.st?.list.filter((item) => item.checked) || [];
return this.st?.list.filter(item => item.checked) || [];
}
ngOnInit(): void {
this.initSF();
this.initST();
this.initSFFre();
this.getGoodsSourceStatistical();
}
/**
* 初始化查询表单
*/
initSF() {
this.schema = {
properties: {
_$expand: { type: 'boolean', ui: { hidden: true } },
resourceCode: {
type: 'string',
title: '货源编号',
},
serviceType: {
title: '服务类型',
type: 'string',
ui: {
widget: 'dict-select',
containsAllLable: true,
params: { dictKey: 'service:type' },
} as SFSelectWidgetSchema,
},
goodsName: {
title: '货物名称',
type: 'string',
default: '',
ui: {
widget: 'select',
// asyncData: () =>[]
} as SFSelectWidgetSchema,
},
loadingPlace: {
type: 'string',
title: '装货地',
ui: {
visibleIf: {
_$expand: (value: boolean) => value,
},
}
},
dischargePlace: {
type: 'string',
title: '卸货地',
ui: {
visibleIf: {
_$expand: (value: boolean) => value,
},
}
},
shipperAppUserName: {
type: 'string',
title: '货主',
ui: {
visibleIf: {
_$expand: (value: boolean) => value,
},
}
},
auditStatus: {
title: '审核状态',
type: 'string',
ui: {
widget: 'dict-select',
params: { dictKey: 'goodresource:audit:status' },
visibleIf: {
_$expand: (value: boolean) => value,
},
} as SFSelectWidgetSchema,
},
enterpriseInfoName: {
type: 'string',
title: '网络货运人',
ui: {
widget: 'select',
placeholder: '请选择',
visibleIf: {
_$expand: (value: boolean) => value,
},
allowClear: true,
// asyncData: () => this.getCatalogueMember(),
},
},
},
type: 'object',
};
this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
}
initSFFre() {
this.freightSchema = {
properties: {
@ -157,9 +71,9 @@ export class SupplyManagementVehicleComponent implements OnInit {
maxLength: 50,
ui: {
placeholder: '请输入备注',
widget: 'textarea',
},
},
widget: 'textarea'
}
}
}
};
this.ui2 = { '*': { spanLabelFixed: 120, grid: { span: 24 } } };
@ -176,43 +90,46 @@ export class SupplyManagementVehicleComponent implements OnInit {
className: 'text-center',
render: 'resourceCode'
},
{ title: '服务类型', index: 'serviceTypeLabel', width: '120px', className: 'text-center',render: 'serviceType'},
{ title: '货主', index: 'shipperAppUserName', width: '120px', className: 'text-center' },
// {
// title: '服务类型',
// index: 'serviceType',
// width: '120px',
// className: 'text-center',
// type: 'enum',
// enum: { '1': '抢单', '2': '指派' }
// },
{ title: '货主', index: 'shipperAppUserNmae', width: '120px' },
{
title: '项目名称',
index: 'enterpriseProjectName',
className: 'text-center',
width: '120px',
width: '120px'
},
{
title: '装货地',
index: 'loadingAddressArr',
className: 'text-center',
width: '120px',
}, {
width: '120px'
},
{
title: '卸货地',
index: 'unloadingAddressArr',
className: 'text-center',
width: '120px',
width: '120px'
},
{
title: '货物名称',
index: 'goodsName',
className: 'text-center',
width: '120px',
width: '120px'
},
{
title: '货物数量',
className: 'text-center',
width: '120px',
index: 'goodsNumber',
format: item => item.goodsNumber.join('/')
},
{
title: '用车需求',
className: 'text-center',
width: '120px',
render: 'vehicleDemand'
format: (item: any) => `<p>车型: ${item.vehicleDemand?.maxWeight || ''}</p><p>车长: ${item.vehicleDemand?.maxCube || ''}米</p>`,
index: 'vehicleDemand'
},
{
title: '总费用',
@ -221,11 +138,18 @@ export class SupplyManagementVehicleComponent implements OnInit {
index: 'totalAmount',
render: 'totalAmount'
},
{
title: '总运费',
className: 'text-center',
width: '120px',
index: '总运费'
},
{
title: '附加费',
className: 'text-center',
width: '120px',
index: 'surcharge',
format: item => `${item.surcharge}`
},
{
title: '货源状态',
@ -234,15 +158,16 @@ export class SupplyManagementVehicleComponent implements OnInit {
type: 'badge',
width: '120px',
badge: {
1: { text: '待接单', color: 'success' },
2: { text: '已接单', color: 'warning' },
},
'1': { text: '待接单', color: 'warning' },
'2': { text: '已接单', color: 'success' }
}
},
{
title: '创建时间',
width: '170px',
index: 'createTime',
className: 'text-center',
type: 'date'
},
{
title: '审核状态',
@ -253,46 +178,47 @@ export class SupplyManagementVehicleComponent implements OnInit {
badge: {
'1': { text: '待审核', color: 'warning' },
'2': { text: '审核通过', color: 'success' },
'3': { text: '不通过', color: 'default' },
'4': { text: '已取消', color: 'default' },
},
'3': { text: '不通过', color: 'error' },
'4': { text: '已取消', color: 'default' }
}
},
{
title: '操作',
fixed: 'right',
width: '200px',
className: 'text-left',
width: '110px',
className: 'text-center',
buttons: [
{
text: '货源审核',
click: (_record) => this.audit(_record, 1),
// iif: item => item.auditStatus === 1,
click: _record => this.audit(_record, 1),
iif: item => item.auditStatus === '1'
},
{
text: '修改货源',
click: (_record) => this.amend(_record),
// iif: item => item.auditStatus === 1 || item.auditStatus === 2,
click: _record => this.amend(_record),
iif: item => item.resourceStatus === '1'
},
{
text: '修改运费',
click: (_record) => this.updateFreight(_record),
click: _record => this.updateFreight(_record),
iif: item => item.resourceStatus === '1' && item.serviceType === '2'
},
{
text: '取消货源',
// iif: item => item.auditStatus === 1 || item.auditStatus === 2,
click: (_record) => this.cancleGoodsSource(_record),
click: _record => this.cancleGoodsSource(_record),
iif: item => item.resourceStatus === '1'
},
{
text: '再下一单',
click: (_record) => this.nextOrder(_record),
click: _record => this.nextOrder(_record)
},
{
text: '重新指派',
click: (_record) => this.assignedCar(_record),
// iif: item => item.auditStatus === 2,
},
],
},
click: _record => this.assignedCar(_record),
iif: item => item.resourceStatus === '1' && item.serviceType === '2'
}
]
}
];
}
add(): void {
@ -300,12 +226,7 @@ export class SupplyManagementVehicleComponent implements OnInit {
// .createStatic(FormEditComponent, { i: { id: 0 } })
// .subscribe(() => this.st.reload());
}
/**
* 查询字段个数
*/
get queryFieldCount(): number {
return Object.keys(this.schema?.properties || {}).length;
}
/**
* 伸缩查询条件
*/
@ -314,7 +235,7 @@ export class SupplyManagementVehicleComponent implements OnInit {
this.sf?.setValue('/_$expand', this._$expand);
}
tabChange(item: any) {
console.log(item)
console.log(item);
}
/**
* 重置表单
@ -324,9 +245,6 @@ export class SupplyManagementVehicleComponent implements OnInit {
this._$expand = false;
}
selectChange(e: number) {
console.log(e);
this.resourceStatus = e;
@ -345,7 +263,7 @@ export class SupplyManagementVehicleComponent implements OnInit {
nzWidth: '400px',
nzContent: SupplyManagementUpdateExternalSnComponent,
nzComponentParams: {
orderObject: item,
orderObject: item
},
nzFooter: null,
nzClosable: false
@ -355,9 +273,7 @@ export class SupplyManagementVehicleComponent implements OnInit {
/**
* 导入货源
*/
importGoodsSource() {
}
importGoodsSource() {}
/**
* 修改运费
@ -368,9 +284,9 @@ export class SupplyManagementVehicleComponent implements OnInit {
nzWidth: '40%',
nzContent: SupplyManagementUpdateFreightComponent,
nzComponentParams: {
i: item,
i: item
},
nzFooter: null,
nzFooter: null
});
}
@ -389,10 +305,9 @@ export class SupplyManagementVehicleComponent implements OnInit {
// url: this.service.$api_save_assign_vehicle,
params: { resourceId }
},
nzFooter: null,
nzFooter: null
});
modalRef.afterClose.subscribe((result) => {
modalRef.afterClose.subscribe(result => {
if (result) {
this.st.reload();
}
@ -403,8 +318,8 @@ export class SupplyManagementVehicleComponent implements OnInit {
* 审核
*/
audit(value: any, status?: any) {
console.log(value)
console.log(status)
console.log(value);
console.log(status);
if (status === 2) {
this.auditMany = true;
} else {
@ -416,31 +331,29 @@ export class SupplyManagementVehicleComponent implements OnInit {
* 审核关闭弹窗
*/
handleCancel(type: any) {
this.isVisible = false
this.isVisible = false;
}
/**
* 审核通过按钮
*/
handleOK() {
}
handleOK() {}
/**
* 跳转修改货源
*/
amend(item: any) {
console.log(item)
console.log(item);
this.router.navigate(['/supply-management/vehicle-amend', item.id], {
queryParams: {
sta: 1
},
})
}
});
}
nextOrder(item: any) {
this.router.navigate(['/supply-management/vehicle-amend', item.id,],{
this.router.navigate(['/supply-management/vehicle-amend', item.id], {
queryParams: {
sta: 2
},
})
}
});
}
/**
* 取消货源
@ -450,22 +363,104 @@ export class SupplyManagementVehicleComponent implements OnInit {
nzTitle: '<b>确定取消货源吗?</b>',
nzContent: `<b>取消后不可恢复,谨慎操作</b>`,
nzOnOk: () =>
this.service.request(this.service.$api_cancle_goods_source, [record.id]).subscribe((res) => {
this.service.request(this.service.$api_cancle_goods_source, [record.id]).subscribe(res => {
if (res === true) {
this.service.msgSrv.success('操作成功!');
this.st?.reload();
this.getGoodsSourceStatistical();
}
}),
})
});
}
// 获取货源状态统计
getGoodsSourceStatistical() {
this.service.request(this.service.$api_get_goods_resource_statistical, { resourceType: 1 }).subscribe(res => {
if (res) {
console.log(res)
console.log(res);
this.tabs = res;
}
})
});
}
private initSF(): SFSchema {
return {
properties: {
_$expand: { type: 'boolean', ui: { hidden: true } },
resourceCode: {
type: 'string',
title: '货源编号',
ui: { placeholder: '请输入' }
},
loadingPlace: {
type: 'string',
title: '装货地',
ui: {
placeholder: '请输入'
}
},
dischargePlace: {
type: 'string',
title: '卸货地',
ui: { placeholder: '请输入' }
},
shipperAppUserName: {
type: 'string',
title: '货主',
ui: {
visibleIf: {
_$expand: (value: boolean) => value
}
}
},
goodsName: {
title: '所属项目',
type: 'string',
default: '',
ui: {
widget: 'select',
visibleIf: {
_$expand: (value: boolean) => value
}
// asyncData: () =>[]
} as SFSelectWidgetSchema
},
serviceType: {
title: '服务类型',
type: 'string',
ui: {
widget: 'dict-select',
containsAllLable: true,
params: { dictKey: 'service:type' },
visibleIf: {
_$expand: (value: boolean) => value
}
} as SFSelectWidgetSchema
},
auditStatus: {
title: '审核状态',
type: 'string',
ui: {
widget: 'dict-select',
params: { dictKey: 'goodresource:audit:status' },
visibleIf: {
_$expand: (value: boolean) => value
}
} as SFSelectWidgetSchema
},
enterpriseInfoName: {
type: 'string',
title: '网络货运人',
ui: {
widget: 'select',
placeholder: '请选择',
visibleIf: {
_$expand: (value: boolean) => value
},
allowClear: true
// asyncData: () => this.getCatalogueMember(),
}
}
}
};
}
}