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-24 13:18:34 +08:00
parent dc28444d16
commit 336dfd81f5
19 changed files with 886 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
src/app/routes/ticket-management/components/invoice-detail/invoice-detail.component.html Normal file
View File

@ -0,0 +1,156 @@
<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 class="statistics-box">
<div nz-row nzGutter="8">
<div nz-col [nzXl]="8" [nzLg]="8" [nzSm]="8" [nzXs]="8" se-container [labelWidth]="100" col="1">
<se label="销售方">
天津怡亚通物流科技有限公司
</se>
<se label="申请编号">
VP2021012010
</se>
<se label="发票号码">
051010100
</se>
<se label="发票代码">
54364653
</se>
<se label="开票日期">
2021-10-11
</se>
<se label="价税合计">
2205.00
</se>
<se label="税额">
182.06
</se>
<se label="票面备注">
订单号11-12
</se>
</div>
<div nz-col [nzXl]="8" [nzLg]="8" [nzSm]="8" [nzXs]="8" se-container [labelWidth]="100" col="1">
<se label="购买方">
茅台股份有限公司
</se>
<se label="纳税号">
912301046656930913
</se>
<se label="地址">
贵州省贵阳市
</se>
<se label="电话">
075588393198
</se>
<se label="开户行">
中国工商银行股份有限公司哈贵阳支行
</se>
<se label="银行账户">
3500044119068126788
</se>
<se label="其他要求">
开票单位要吨
</se>
</div>
<div *ngIf="isCanEdit" nz-col [nzXl]="8" [nzLg]="8" [nzSm]="8" [nzXs]="8" class="text-right">
<ng-container *ngIf="isEdit; else elseTemplate">
<button nz-button (click)="isEdit = false;invoiceST?.load(1)">取消</button>
<button nz-button nzType="primary" (click)="saveInvoices()">保 存</button>
</ng-container>
<ng-template #elseTemplate>
<button nz-button nzType="primary" (click)="isEdit = true">修改</button>
</ng-template>
</div>
</div>
</nz-card>
<nz-card class="search-box" nzBordered>
<nz-tabset>
<nz-tab nzTitle="订单明细">
<div nz-row nzGutter="8" class="mb-md">
<div nz-col [nzXl]="18" [nzLg]="24" [nzSm]="24" [nzXs]="24">
<sf #orderSf [schema]="orderSchema"
[ui]="{ '*': { spanLabelFixed: 90,grid: { lg: 8, md: 12, sm: 12, xs: 24 } }}" [compact]="true"
[button]="'none'"></sf>
</div>
<div nz-col [nzXl]=" 6" [nzLg]="24" [nzSm]="24" [nzXs]="24" class="text-right">
<button nz-button nzType="primary" [nzLoading]="service.http.loading"
(click)="orderST?.load(1)">查询</button>
<button nz-button (click)="resetSF(1)">重置</button>
<button nz-button> 导出</button>
</div>
</div>
<st #orderST [data]="service.$mock_url" [columns]="orderColumns" size="small" bordered="true"
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: orderReqParams, process: beforeReq }"
[res]="{ reName: { list: 'data.records', total: 'data.total' } }"
[page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
[loading]="service.http.loading" [scroll]="{ x:'1200px',y: '250px' }"></st>
</nz-tab>
<nz-tab nzTitle="费用明细">
<div nz-row nzGutter="8" class="mb-md">
<div nz-col [nzXl]="18" [nzLg]="24" [nzSm]="24" [nzXs]="24">
<sf #costSf [schema]="costSchema"
[ui]="{ '*': { spanLabelFixed: 90,grid: { lg: 8, md: 12, sm: 12, xs: 24 } }}" [compact]="true"
[button]="'none'"></sf>
</div>
<div nz-col [nzXl]=" 6" [nzLg]="24" [nzSm]="24" [nzXs]="24" class="text-right">
<button nz-button nzType="primary" [nzLoading]="service.http.loading"
(click)="costST?.load(1)">查询</button>
<button nz-button (click)="resetSF(2)">重置</button>
<button nz-button> 导出</button>
</div>
</div>
<st #costST [data]="service.$mock_url" [columns]="costColumns" size="small" bordered="true"
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: orderReqParams, process: beforeReq }"
[res]="{ reName: { list: 'data.records', total: 'data.total' } }"
[page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
[loading]="service.http.loading" [scroll]="{ x:'1200px',y: '250px' }"></st>
</nz-tab>
<nz-tab nzTitle="发票明细">
<st #invoiceST [data]="service.$mock_url" [columns]="invoiceColumns" size="small" bordered="true"
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: invoiceReqParams, process: beforeReq }"
[res]="{ reName: { list: 'data.records', total: 'data.total' } }"
[page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
[loading]="service.http.loading" [scroll]="{ x:'1200px',y: '250px' }">
<ng-template st-row="owner" let-item let-index="index">
<nz-select *ngIf="isEdit" [ngModel]="item.owner"
(ngModelChange)="invoiceST.setRow(index, { owner: $event })" style="width: 100%;">
<nz-option nzValue="曲丽丽" nzLabel="曲丽丽"></nz-option>
<nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
</nz-select>
<ng-container *ngIf="!isEdit">{{ item.owner }}</ng-container>
</ng-template>
<ng-template st-row="callNo" let-item let-index="index">
<input *ngIf="isEdit" nz-input [ngModel]="item.callNo"
(ngModelChange)="invoiceST.setRow(index, { callNo: $event })" />
<ng-container *ngIf="!isEdit">{{ item.callNo }}</ng-container>
</ng-template>
<ng-template st-row="progress" let-item let-index="index">
<input *ngIf="isEdit" nz-input [ngModel]="item.progress"
(ngModelChange)="invoiceST.setRow(index, { progress: $event })" />
<ng-container *ngIf="!isEdit">{{ item.progress }}</ng-container>
</ng-template>
<ng-template st-row="status" let-item let-index="index">
<input *ngIf="isEdit" nz-input [ngModel]="item.status"
(ngModelChange)="invoiceST.setRow(index, { status: $event })" />
<ng-container *ngIf="!isEdit">{{ item.status }}</ng-container>
</ng-template>
</st>
</nz-tab>
<nz-tab nzTitle="快递轨迹">
<p style="font-weight: 600;">顺丰快递: SF123456789 <nz-tag [nzColor]="'#2db7f5'" class="ml-md">已签收</nz-tag>
</p>
<app-logistics-time-line></app-logistics-time-line>
</nz-tab>
</nz-tabset>
</nz-card>

35
src/app/routes/ticket-management/components/invoice-detail/invoice-detail.component.less Normal file
View File

@ -0,0 +1,35 @@
:host::ng-deep {
.search-box {
.ant-card-body {
padding-bottom: 8px;
padding-top : 8px;
}
}
.statistics-box {
.ant-card-body {
padding-bottom: 8px;
padding-top : 8px;
}
.ant-form-item {
margin-bottom: 0;
.ant-form-item-control-input-content {
color: #f5222d;
}
}
}
}
.expend-options {
margin-top: 0px;
}
@media (min-width: 990px) {
.expend-options {
margin-top: -40px;
}
}

177
src/app/routes/ticket-management/components/invoice-detail/invoice-detail.component.ts Normal file
View File

@ -0,0 +1,177 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { STComponent, STColumn, STChange, STRequestOptions } from '@delon/abc/st';
import { SFComponent, SFSchema } from '@delon/form';
import { NzModalService } from 'ng-zorro-antd/modal';
import { TicketService } from '../../services/ticket.service';
@Component({
selector: 'app-invoice-detail',
templateUrl: './invoice-detail.component.html',
styleUrls: ['./invoice-detail.component.less']
})
export class InvoiceDetailComponent implements OnInit {
@ViewChild('orderST', { static: true })
orderST!: STComponent;
@ViewChild('orderSf', { static: false })
orderSf!: SFComponent;
orderColumns: STColumn[] = this.initOrderST();
orderSchema: SFSchema = this.initOrderSF();
ordeReqParams = {};
@ViewChild('costST', { static: true })
costST!: STComponent;
@ViewChild('costSf', { static: false })
costSf!: SFComponent;
costColumns: STColumn[] = this.initCostST();
costSchema: SFSchema = this.initCostSF();
orderReqParams = {};
@ViewChild('invoiceST', { static: true })
invoiceST!: STComponent;
invoiceColumns: STColumn[] = this.initInvoiceST();
invoiceReqParams = {};
isCanEdit = false;
isEdit = false;
constructor(public service: TicketService, private route: ActivatedRoute) {
this.isCanEdit = !!route.snapshot.queryParams.type;
}
ngOnInit(): void {}
beforeReq = (requestOptions: STRequestOptions) => {
if (this.orderSf) {
this.orderReqParams = { ...this.orderSf.value };
}
if (this.costSf) {
this.orderReqParams = { ...this.costSf.value };
}
return requestOptions;
};
goBack() {
history.go(-1);
}
saveInvoices() {
console.log(this.invoiceST._data);
this.isEdit = false;
}
/**
* 重置表单
*/
resetSF(tab: number) {
switch (tab) {
case 1:
this.orderSf.reset();
break;
case 2:
this.costSf.reset();
break;
default:
break;
}
}
private initOrderSF(): SFSchema {
return {
properties: {
orderSn: {
type: 'string',
title: '订单号',
ui: {
autocomplete: 'off'
}
},
receiveName: {
type: 'string',
title: '订单类型',
enum: [{ label: '全部', value: '' }],
ui: {
widget: 'select',
placeholder: '请选择'
},
default: ''
},
receiveNa22me: {
type: 'string',
title: '所属项',
enum: [{ label: '全部', value: '' }],
ui: {
widget: 'select',
placeholder: '请选择'
},
default: ''
}
}
};
}
private initOrderST(): STColumn[] {
return [
{ title: '订单号', index: 'no' },
{ title: '订单完成日期', index: 'callNo', type: 'date' },
{ title: '所属项目', index: 'callNo' },
{ title: '订单类型', index: 'callNo' },
{ title: '装货地', index: 'callNo' },
{ title: '卸货地', index: 'callNo' },
{ title: '货物信息', index: 'callNo' },
{ title: '承运司机', index: 'callNo', format: item => `特朗普&#10; 13789040523 &#10;粤GT8419` },
{ title: '申请金额', index: 'callNo' },
{ title: '运输费', index: 'callNo' },
{ title: '附加费', index: 'callNo' },
{ title: '开票金额', index: 'callNo' }
];
}
private initCostSF(): SFSchema {
return {
properties: {
orderSn: {
type: 'string',
title: '订单号',
ui: {
autocomplete: 'off'
}
},
orderS2n: {
type: 'string',
title: '费用号',
ui: {
autocomplete: 'off'
}
}
}
};
}
private initCostST(): STColumn[] {
return [
{ title: '费用号', index: 'no' },
{ title: '订单号', index: 'callNo' },
{ title: '订单日期', index: 'callNo', type: 'date' },
{ title: '计费日期', index: 'callNo', type: 'date' },
{ title: '税率', index: 'callNo' },
{ title: '申请金额', index: 'callNo' },
{ title: '开票金额', index: 'callNo' }
];
}
private initInvoiceST(): STColumn[] {
return [
{ title: '服务名称', render: 'owner' },
{ title: '规格型号', render: 'callNo' },
{ title: '单位', render: 'progress' },
{ title: '数量', render: 'status' },
{ title: '金额', index: 'callNo' },
{ title: '税率', index: 'callNo' },
{ title: '税额', index: 'callNo' }
];
}
}