开票申请

src/app/routes/ticket-management/components/invoice-requested/invoice-requested-detail/invoice-requested-detail.component.ts

@@ -4,6 +4,7 @@ import { STComponent, STColumn, STChange } from '@delon/abc/st';
 import { SFComponent, SFSchema, SFDateWidgetSchema, SFTextWidgetSchema } from '@delon/form';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { TicketService } from '../../../services/ticket.service';
+import { RequestedDetailComponent } from '../requested-detail/requested-detail.component';
 import { RequestedInvoiceModalComponent } from '../requested-invoice-modal/requested-invoice-modal.component';
 
 @Component({
@@ -44,7 +45,7 @@ export class InvoiceRequestedDetailComponent implements OnInit {
   openRequestedModal() {
     const modal = this.nzModalService.create({
       nzTitle: '开票',
-      nzContent: RequestedInvoiceModalComponent,
+      nzContent: RequestedDetailComponent,
       nzWidth: 800,
       nzFooter: [
         {
@@ -65,8 +66,13 @@ export class InvoiceRequestedDetailComponent implements OnInit {
     });
   }
 
+  /**
+   * 移除订单
+   * @returns
+   */
   removeOrder() {
     if (this.selectedRows?.length <= 0) {
+      this.service.msgSrv.warning('请选择订单');
       return;
     }
     this.nzModalService.warning({
@@ -199,7 +205,7 @@ export class InvoiceRequestedDetailComponent implements OnInit {
       { title: '装货地', index: 'callNo', width: 90 },
       { title: '卸货地', index: 'callNo', width: 90 },
       { title: '货物信息', index: 'callNo', width: 100 },
-      { title: '承运司机', index: 'callNo', width: 100 },
+      { title: '承运司机', index: 'callNo', width: 140, format: item => `特朗普</br>13789040523</br>粤GT8419` },
       { title: '申请金额', index: 'callNo', width: 100 },
       { title: '运输费', index: 'callNo', width: 90 },
       { title: '附加费', index: 'callNo', width: 90 },

src/app/routes/ticket-management/components/invoice-requested/invoice-requested.component.html

@@ -37,8 +37,8 @@
                 <strong class="text-red">{{totalCallNo }}</strong>
                 <a *ngIf="totalCallNo > 0" (click)="st.clearCheck()" class="ml-lg">清空</a>
             </div>
-            <button nz-button (click)="this.auditAction(null)">开票</button>
+            <button nz-button (click)="this.batchRequested()">开票</button>
-            <button nz-button (click)="this.auditAction(null)">驳回</button>
+            <button nz-button (click)="this.rejectAction(selectedRows)">驳回</button>
         </div>
     </ng-template>
 
@@ -50,12 +50,11 @@
         [loading]="service.http.loading" [scroll]="{ x:'1200px',y: '370px' }" (change)="stChange($event)"></st>
 </nz-card>
 
-<ng-template #auditModal>
+<ng-template #rejectModal>
     <div nz-row nzGutter="8">
         <div nz-col nzSpan="24" se-container [labelWidth]="80">
-            <se [col]="1" label="备注">
+            <se [col]="1" label="备注" required>
-                <textarea nz-input rows="3" placeholder="同意可以不用填写原因 ，拒绝必须说明原因"
+                <textarea nz-input rows="3" placeholder="请说明驳回原因" style="width: 325px;margin-left: 14px;"></textarea>
-                    style="width: 325px;margin-left: 14px;"></textarea>
             </se>
         </div>
     </div>

src/app/routes/ticket-management/components/invoice-requested/invoice-requested.component.less

@@ -19,4 +19,8 @@
         padding-left : 16px;
         padding-right: 16px;
     }
+
+    .text-truncate {
+        white-space: normal;
+    }
 }

src/app/routes/ticket-management/components/invoice-requested/invoice-requested.component.ts

@@ -5,6 +5,7 @@ import { SFComponent, SFSchema, SFDateWidgetSchema, SFUISchema } from '@delon/fo
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { TicketService } from '../../services/ticket.service';
+import { RequestedInvoiceModalComponent } from './requested-invoice-modal/requested-invoice-modal.component';
 
 @Component({
   selector: 'app-invoice-requested',
@@ -17,8 +18,8 @@ export class InvoiceRequestedComponent implements OnInit {
   st!: STComponent;
   @ViewChild('sf', { static: false })
   sf!: SFComponent;
-  @ViewChild('auditModal', { static: false })
+  @ViewChild('rejectModal', { static: false })
-  auditModal!: any;
+  rejectModal!: any;
   columns: STColumn[] = this.initST();
   searchSchema: SFSchema = this.initSF();
 
@@ -52,14 +53,10 @@ export class InvoiceRequestedComponent implements OnInit {
 
   add(): void {}
 
-  routeTo(item: any) {
+  rejectAction(item: any[]) {
-    this.router.navigate(['/ticket/invoice-requested/detail/1']);
-  }
-
-  auditAction(item: any) {
     const modal = this.nzModalService.create({
-      nzTitle: '审核',
+      nzTitle: '驳回',
-      nzContent: this.auditModal,
+      nzContent: this.rejectModal,
       nzFooter: [
         {
           label: '拒绝',
@@ -98,6 +95,64 @@ export class InvoiceRequestedComponent implements OnInit {
     });
   }
 
+  batchRequested() {
+    if (this.selectedRows?.length <= 0) {
+      this.service.msgSrv.warning('请选择订单');
+      return;
+    }
+    const modal = this.nzModalService.create({
+      nzTitle: '开票',
+      nzContent: '确认对所有申请单进行批量开票？',
+      nzFooter: [
+        {
+          type: 'default',
+          label: '手工处理',
+          onClick: () => {
+            modal.destroy();
+          }
+        },
+        {
+          type: 'primary',
+          label: '自动开票',
+          onClick: () => {
+            modal.destroy();
+          }
+        }
+      ]
+    });
+  }
+
+  requestedInvoiceAction(item: any) {
+    const modal = this.nzModalService.create({
+      nzTitle: '开票',
+      nzContent: RequestedInvoiceModalComponent,
+      nzWidth: 1200,
+      nzFooter: [
+        {
+          type: 'default',
+          label: '移除',
+          onClick: (com) => {
+            com?.removeOrder(com.data)
+          }
+        },
+        {
+          type: 'default',
+          label: '手工处理',
+          onClick: () => {
+            modal.destroy();
+          }
+        },
+        {
+          type: 'primary',
+          label: '自动开票',
+          onClick: () => {
+            modal.destroy();
+          }
+        }
+      ]
+    });
+  }
+
   /**
    * 重置表单
    */
@@ -242,33 +297,35 @@ export class InvoiceRequestedComponent implements OnInit {
   private initST(): STColumn[] {
     return [
       { title: '', index: 'key', type: 'checkbox' },
-      { title: '申请编号', index: 'no' },
+      { title: '申请编号', index: 'no', width: 150, format: item => `VP202110012313</br><label class="text-primary">待受理</label>` },
-      { title: '网络货运人', index: 'callNo' },
+      { title: '网络货运人', index: 'callNo', width: 120 },
-      { title: '购买方', index: 'callNo' },
+      { title: '购买方', index: 'callNo', width: 90 },
-      { title: '订单数', index: 'callNo' },
+      { title: '订单数', index: 'callNo', width: 90 },
-      { title: '申请金额', index: 'callNo' },
+      { title: '申请金额', index: 'callNo', width: 100 },
-      { title: '运输费', index: 'callNo' },
+      { title: '运输费', index: 'callNo', width: 90 },
-      { title: '附加费', index: 'callNo' },
+      { title: '附加费', index: 'callNo', width: 90 },
-      { title: '已开票金额', index: 'callNo' },
+      { title: '已开票金额', index: 'callNo', width: 120 },
-      { title: '开户行', index: 'callNo' },
+      { title: '开户行', index: 'callNo', width: 90 },
-      { title: '银行账户', index: 'callNo' },
+      { title: '银行账户', index: 'callNo', width: 100 },
-      { title: '注册地址', index: 'callNo' },
+      { title: '注册地址', index: 'callNo', width: 100 },
-      { title: '注册电话', index: 'callNo' },
+      { title: '注册电话', index: 'callNo', width: 100 },
-      { title: '服务名称', index: 'callNo' },
+      { title: '服务名称', index: 'callNo', width: 100 },
-      { title: '销货清单', index: 'callNo' },
+      { title: '销货清单', index: 'callNo', width: 100 },
-      { title: '其他要求', index: 'callNo' },
+      { title: '其他要求', index: 'callNo', width: 100 },
-      { title: '申请人', index: 'callNo' },
+      { title: '申请人', index: 'callNo', width: 90 },
-      { title: '申请时间', index: 'updatedAt', type: 'date' },
+      { title: '申请时间', index: 'updatedAt', type: 'date', width: 150 },
       {
         title: '操作',
+        width: 150,
+        fixed: 'right',
         buttons: [
           {
             text: '开票',
-            click: item => this.routeTo(item)
+            click: item => this.requestedInvoiceAction(item)
           },
           {
             text: '驳回',
-            click: item => this.routeTo(item)
+            click: item => this.rejectAction([item])
           },
           {
             text: '查看原因',
@@ -276,11 +333,11 @@ export class InvoiceRequestedComponent implements OnInit {
           },
           {
             text: '订单明细',
-            click: item => this.routeTo(item)
+            click: item => this.router.navigate(['/ticket/invoice-requested/detail/1'])
           },
           {
-            text: '下载对账单',
+            text: '下载对账单'
-            click: item => this.auditAction(item)
+            // click: item => this.rejectAction(item)
           }
         ]
       }

src/app/routes/ticket-management/components/invoice-requested/requested-detail/requested-detail.component.html

@@ -0,0 +1,49 @@
+<div nz-row nzGutter="8" class="statistics-box">
+    <div nz-col nzSpan="12" 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="票面备注">
+            <p style="margin-bottom: 0;margin-top: 5px;">起运地:广东省深圳市南山区</p>
+            <p style="margin-bottom: 0;">目的地:湖北省武汉市青山区</p>
+            <p style="margin-bottom: 0;">货物名称:钢材</p>
+            <p style="margin-bottom: 0;">车型车牌:高栏车 粤B36889</p>
+        </se>
+    </div>
+    <div nz-col nzSpan="12" se-container [labelWidth]="100" col="1">
+        <se label="销售方">
+            天津怡亚通物流科技有限公司
+        </se>
+        <se label="订单数">
+            100笔
+        </se>
+        <se label="开票金额">
+            300,000.00元
+        </se>
+        <se label="服务名称">
+            运输服务费
+        </se>
+        <se label="销货清单">
+            需要
+        </se>
+        <se label="其他要求">
+            单位按吨
+        </se>
+
+    </div>
+</div>

src/app/routes/ticket-management/components/invoice-requested/requested-detail/requested-detail.component.less

@@ -0,0 +1,13 @@
+:host::ng-deep {
+
+    .statistics-box {
+        .ant-form-item {
+            margin-bottom: 0;
+
+            .ant-form-item-control-input-content {
+                color: #f5222d;
+            }
+        }
+    }
+
+}

src/app/routes/ticket-management/components/invoice-requested/requested-detail/requested-detail.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-requested-detail',
+  templateUrl: './requested-detail.component.html',
+  styleUrls: ['./requested-detail.component.less']
+})
+export class RequestedDetailComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/routes/ticket-management/components/invoice-requested/requested-invoice-modal/requested-invoice-modal.component.html

@@ -1,49 +1,3 @@
-<div nz-row nzGutter="8" class="statistics-box">
+<app-requested-detail></app-requested-detail>
-    <div nz-col nzSpan="12" 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="票面备注">
-            <p style="margin-bottom: 0;margin-top: 5px;">起运地:广东省深圳市南山区</p>
-            <p style="margin-bottom: 0;">目的地:湖北省武汉市青山区</p>
-            <p style="margin-bottom: 0;">货物名称:钢材</p>
-            <p style="margin-bottom: 0;">车型车牌:高栏车 粤B36889</p>
-        </se>
-    </div>
-    <div nz-col nzSpan="12" se-container [labelWidth]="100" col="1">
-        <se label="销售方">
-            天津怡亚通物流科技有限公司
-        </se>
-        <se label="订单数">
-            100笔
-        </se>
-        <se label="开票金额">
-            300,000.00元
-        </se>
-        <se label="服务名称">
-            运输服务费
-        </se>
-        <se label="销货清单">
-            需要
-        </se>
-        <se label="其他要求">
-            单位按吨
-        </se>
 
-    </div>
+<st #st [data]="data" [columns]="columns" [page]="{ show: false}" [scroll]="{ x:'1200px',y: '300px' }" class="mt-md"></st>
-</div>

src/app/routes/ticket-management/components/invoice-requested/requested-invoice-modal/requested-invoice-modal.component.ts

@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { STColumn, STComponent } from '@delon/abc/st';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { TicketService } from '../../../services/ticket.service';
 
 @Component({
   selector: 'app-requested-invoice-modal',
@@ -6,10 +9,75 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./requested-invoice-modal.component.less']
 })
 export class RequestedInvoiceModalComponent implements OnInit {
+  @ViewChild('st', { static: false })
+  st!: STComponent;
+  columns: STColumn[] = this.initST();
+  data = [
+    {
+      key: 0,
+      disabled: true,
+      href: 'https://ant.design',
+      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+      no: 'TradeCode 0'
+    },
+    {
+      key: 1,
+      disabled: false,
+      href: 'https://ant.design',
+      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+      no: 'TradeCode 1'
+    }
+  ];
 
-  constructor() { }
+  info = {};
 
-  ngOnInit(): void {
+  constructor(public service: TicketService, private nzModalService: NzModalService) {}
+
+  ngOnInit(): void {}
+
+  /**
+   * 移除订单
+   * @returns
+   */
+  removeOrder(item: any[]) {
+    if (this.data?.length <= 0) {
+      this.service.msgSrv.warning('无订单');
+      return;
+    }
+    this.nzModalService.warning({
+      nzTitle: '确定从当前批次中移除所有订单？',
+      nzContent: '移除后相关订单可以重新提交开票申请',
+      nzOnOk: () => {
+        console.log(this.data);
+      }
+    });
   }
 
+  private initST(): STColumn[] {
+    return [
+      { title: '订单号', index: 'no', width: 150 },
+      { title: '订单完成日期', index: 'updatedAt', type: 'date', width: 150 },
+      { title: '所属项目', index: 'callNo', width: 120 },
+      { title: '订单类型', index: 'callNo', width: 90 },
+      { title: '装货地', index: 'callNo', width: 90 },
+      { title: '卸货地', index: 'callNo', width: 100 },
+      { title: '货物信息', index: 'callNo', width: 90 },
+      { title: '承运司机', index: 'callNo', width: 140, format: item => `特朗普</br>13789040523</br>粤GT8419` },
+      { title: '总费用', index: 'callNo', width: 90 },
+      { title: '运输费', index: 'callNo', width: 90 },
+      { title: '附加费', index: 'callNo', width: 90 },
+      {
+        title: '操作',
+        width: 80,
+        fixed: 'right',
+        className: 'text-center',
+        buttons: [
+          {
+            text: '移除',
+            click: item => this.removeOrder([item])
+          }
+        ]
+      }
+    ];
+  }
 }

src/app/routes/ticket-management/ticket-management.module.ts

@@ -12,6 +12,7 @@ import { InvoiceRequestedDetailComponent } from './components/invoice-requested/
 import { InvoicedListDetailComponent } from './components/invoiced-list/invoiced-list-detail/invoiced-list-detail.component';
 import { TransactionDetailsComponent } from './components/etc-invoiced-list/transaction-details/transaction-details.component';
 import { RequestedInvoiceModalComponent } from './components/invoice-requested/requested-invoice-modal/requested-invoice-modal.component';
+import { RequestedDetailComponent } from './components/invoice-requested/requested-detail/requested-detail.component';
 
 const COMPONENTS: any = [
   ETCInvoicedListComponent,
@@ -23,7 +24,7 @@ const COMPONENTS: any = [
   InvoiceRequestedDetailComponent,
   InvoicedListDetailComponent
 ];
-const NOTROUTECOMPONENTS: any = [TransactionDetailsComponent, RequestedInvoiceModalComponent];
+const NOTROUTECOMPONENTS: any = [TransactionDetailsComponent, RequestedInvoiceModalComponent, RequestedDetailComponent];
 @NgModule({
   declarations: [...COMPONENTS, ...NOTROUTECOMPONENTS],
   imports: [CommonModule, TicketManagementRoutingModule, SharedModule]