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

edit

Browse Source
This commit is contained in:
Taric Xin
2021-12-27 13:26:43 +08:00
parent 6a3f551509
commit 358ba2708e
13 changed files with 469 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/app/routes/financial-management/components/cost-management/expenses-receivable/expenses-receivable.component.html Normal file
View File

@ -0,0 +1,56 @@
<page-header-wrapper title="应收费用单" [logo]="logo">
<ng-template #logo>
<button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
<i nz-icon nzType="left" nzTheme="outline"></i>
</button>
</ng-template>
</page-header-wrapper>
<nz-card [nzExtra]="cardTemplate" nzTitle="基本信息">
<ng-template #cardTemplate>
<button nz-button nzType="primary" [nzLoading]="service.http.loading">保存</button>
</ng-template>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24">
<sf #sf [schema]="schema" [ui]="{ '*': { spanLabelFixed: 110,grid: { lg: 8, md: 12, sm: 12, xs: 24 } }}"
[button]="'none'"></sf>
</div>
</div>
<st #st [data]="data" [columns]="columns" [page]="{ show: false}" [loading]="service.http.loading" size="small"
[scroll]="{ y: '370px' }" class="mt-sm">
<ng-template st-row="description1" let-item let-index="index">
<nz-select [ngModel]="item.description" (ngModelChange)="st.setRow(index, { description: $event })"
style="width: 100%;">
<nz-option nzValue="曲丽丽" nzLabel="曲丽丽"></nz-option>
<nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
</nz-select>
</ng-template>
<ng-template st-row="description2" let-item let-index="index">
<nz-select [ngModel]="item.description" (ngModelChange)="st.setRow(index, { description: $event })"
style="width: 100%;">
<nz-option nzValue="曲丽丽" nzLabel="曲丽丽"></nz-option>
<nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
</nz-select>
</ng-template>
<ng-template st-row="description3" let-item let-index="index">
<nz-select [ngModel]="item.description" (ngModelChange)="st.setRow(index, { description: $event })"
style="width: 100%;">
<nz-option nzValue="曲丽丽" nzLabel="曲丽丽"></nz-option>
<nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
</nz-select>
</ng-template>
<ng-template st-row="num" let-item let-index="index">
<nz-input-number [ngModel]="item.num" (ngModelChange)="st.setRow(index, { num: $event })"
[nzMin]="0" style="width: 100%;"></nz-input-number>
</ng-template>
<ng-template st-row="description5" let-item let-index="index">
<input nz-input [ngModel]="item.description5"
(ngModelChange)="st.setRow(index, { description5: $event })" />
</ng-template>
</st>
<button nz-button nzType="dashed" nzBlock class="mt-md" (click)="addRow()"><i nz-icon nzType="plus"
nzTheme="outline"></i>添加</button>
</nz-card>

13
src/app/routes/financial-management/components/cost-management/expenses-receivable/expenses-receivable.component.less Normal file
View File

@ -0,0 +1,13 @@
:host::ng-deep {
.content-box {
.ant-card-body {
padding-top: 14px;
}
}
nz-range-picker {
width: 100%;
}
}

148
src/app/routes/financial-management/components/cost-management/expenses-receivable/expenses-receivable.component.ts Normal file
View File

@ -0,0 +1,148 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { STColumn, STComponent } from '@delon/abc/st';
import { SFComponent, SFDateWidgetSchema, SFSchema } from '@delon/form';
import { FreightAccountService } from '../../../services/freight-account.service';
@Component({
selector: 'app-expenses-receivable',
templateUrl: './expenses-receivable.component.html',
styleUrls: ['./expenses-receivable.component.less']
})
export class ExpensesReceivableComponent implements OnInit {
@ViewChild('st', { static: true })
st!: STComponent;
@ViewChild('sf', { static: false })
sf!: SFComponent;
schema!: SFSchema;
columns: STColumn[] = this.initST();
id = null;
data: any[] = [
{
id: 1,
description1: '',
description2: '',
description3: '',
num: null,
description5: ''
}
];
constructor(public service: FreightAccountService, private route: ActivatedRoute) {
this.id = route.snapshot.queryParams.id;
if (this.id) {
this.schema = this.initSF({ page2: '天津怡亚通物流科技有限公司', pag2e21: '茅台集团' });
} else {
this.schema = this.initSF();
}
}
ngOnInit(): void {}
addRow() {
this.data.push({
id: this.data.length + 1,
description1: '',
description2: '',
description3: '',
num: null,
description5: ''
});
this.st.reload();
}
goBack() {
history.go(-1);
}
private initSF(data?: any): SFSchema {
return {
properties: {
page2: {
type: 'string',
title: '网络货运人',
enum: [],
ui: {
widget: data ? 'text' : 'select',
placeholder: '请选择'
},
default: data?.page2 || ''
},
pag2e21: {
title: '应收对象',
type: 'string',
enum: [],
ui: {
widget: data ? 'text' : 'select',
placeholder: '请选择'
},
default: data?.pag2e21 || ''
},
dee: {
title: '',
type: 'string',
ui: {
widget: 'text'
},
default: ' '
},
createTi2me: {
title: '费用日期',
type: 'string',
ui: {
widget: 'date',
mode: 'range',
format: 'yyyy-MM-dd'
} as SFDateWidgetSchema,
default: data?.createTi2me || ''
},
pa2ge2: {
type: 'string',
title: '开票方式',
enum: [],
ui: {
widget: 'select',
placeholder: '请选择'
},
default: data?.pa2ge2 || ''
},
page: {
type: 'string',
title: '应收备注',
ui: {
placeholder: '请输入'
},
default: data?.page || ''
}
},
required: ['page2', 'pag2e21', 'createTi2me', 'pa2ge2']
};
}
private initST(): STColumn[] {
return [
{ title: '结算客户', render: 'description1', width: 150 },
{ title: '费用科目', render: 'description2', width: 120 },
{ title: '税率', render: 'description3', width: 120 },
{ title: '应收金额', render: 'num', width: 120 },
{ title: '备注', render: 'description5', width: 150 },
{
title: '操作',
fixed: 'right',
className: 'text-center',
width: 90,
buttons: [
{
text: '删除',
click: item => {
this.st.removeRow(item);
this.data = this.data.filter(i => i.id !== item.id);
console.log(this.st.data, this.st._data);
}
}
]
}
];
}
}