feat: page-collection with select batch toolbar & delete works

projects/textbook/src/app/comp-comfirm-dialog/comp-comfirm-dialog.component.html

@@ -3,6 +3,8 @@
   <p>{{data?.message}}</p>
 </div>
 <div mat-dialog-actions>
-  <button mat-button (click)="confirm(false)" >{{'取消'|translate}}</button>
-  <button mat-button (click)="confirm(true)" >{{'确认'|translate}}</button>
+  <!-- <button mat-button (click)="confirm(false)" >{{'取消'}}</button>
+  <button mat-button (click)="confirm(true)">{{'确认'}}</button> -->
+  <button nz-button nzType="text" nzShape="round" (click)="confirm(false)" >取消</button>
+  <button nz-button nzType="text" [nzDanger]="data?.danger" nzShape="round" (click)="confirm(true)">确认</button>
 </div>

projects/textbook/src/app/comp-comfirm-dialog/comp-comfirm-dialog.component.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { Component, Inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { TranslateModule } from '@ngx-translate/core';
+import { NzButtonModule } from 'ng-zorro-antd/button';
 
 @Component({
   selector: 'app-comp-comfirm-dialog',
@@ -11,7 +11,7 @@ import { TranslateModule } from '@ngx-translate/core';
     CommonModule,
     MatButtonModule,
     MatDialogModule,
-    TranslateModule,
+    NzButtonModule,
   ],
   templateUrl: './comp-comfirm-dialog.component.html',
   styleUrls: ['./comp-comfirm-dialog.component.scss']
@@ -22,6 +22,8 @@ export class CompComfirmDialogComponent {
     @Inject(MAT_DIALOG_DATA) public data: {
       title:string|null,
       message:string|null,
+      mode?:string|null,
+      danger?:boolean|null,
     },
   ){
   }

projects/textbook/src/app/comp-table/comp-table-list/comp-table-list.component.html

@@ -1,5 +1,6 @@
-<div style="width:100%;display: flex;justify-content: end;">
 
+
+<div style="width:100%;display: flex;justify-content: end;">
   <div style="width:30%;display: flex;justify-content: end;align-items: flex-end;">
     <ng-container *ngFor="let button of schema?.buttons">
       <button *ngIf="button?.place=='top'&&button?.show({queryParams:queryParams})" mat-raised-button color="primary" (click)="batchHandle(button)" >{{button?.name }}</button>
@@ -7,6 +8,7 @@
   </div>
 </div>
 
+<!-- 数据表格：渲染当前页 -->
 <nz-table #editRowTable [nzData]="list" *ngIf="showMode=='list'&&list?.length"
   [nzLoading]="isLoading" nzFrontPagination="false">
     <thead>
@@ -120,7 +122,7 @@
     <div class="batch-toolbar-actions">
       <div class="ant-space ant-space-horizontal ant-space-align-center">
         <div class="ant-space-item" style="margin-right: 16px;">
-          <button nz-button nzType="text">
+          <button nz-button nzType="text" (click)="deleteSelected()">
             <span nz-icon nzType="delete"></span>
             删除
           </button>

projects/textbook/src/app/comp-table/comp-table-list/comp-table-list.component.ts

@@ -15,9 +15,12 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { UtilnowPipe } from '../../../pipes/utilnow.pipe';
 import { NzTableModule } from 'ng-zorro-antd/table';
-import { openObjectEditDialog } from '../../../schemas/func-parse';
+import { confirmDialog, openObjectEditDialog } from '../../../schemas/func-parse';
 import { MatIconModule } from '@angular/material/icon';
 import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
+import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
+import { NzTagModule } from 'ng-zorro-antd/tag';
 
 interface SchemaFiled{
   key:string,
@@ -202,4 +205,28 @@ export class CompTableListComponent {
       .forEach(({ id }) => this.updateCheckedSet(id, checked));
     this.refreshCheckedStatus();
   }
+  /**
+   * 选择快捷功能：批量处理
+   */
+  // 批量删除
+   deleteSelected(){
+    confirmDialog(this.dialog,{
+      title:"批量删除",
+      message:"删除后数据不可恢复，请谨慎操作",
+      danger:true,
+      handleOK:async ()=>{
+        let selectedList = this.list.filter(item=>this.setOfCheckedId.has(item?.id))
+        let deletePromiseList = selectedList.map(item=>{
+          return new Promise((resolve=>{
+            item.set("isDeleted",true);
+            item.save();
+          }))
+        })
+        try{
+          await Promise.all(deletePromiseList)
+        }catch(err){}
+        this.refresh();
+      }
+    })
+   }
 }

projects/textbook/src/modules/nav-admin/page-collection/page-collection.component.html

@@ -1,3 +1,27 @@
+
+<!-- 表格头部 -->
+<nz-page-header *ngIf="list?.schema?.title">
+  <!--breadcrumb-->
+  <nz-breadcrumb nz-page-header-breadcrumb>
+    <nz-breadcrumb-item>国家级管理</nz-breadcrumb-item>
+    <nz-breadcrumb-item><a>报送合集</a></nz-breadcrumb-item>
+  </nz-breadcrumb>
+
+  <!--title-->
+  <nz-page-header-title>{{list?.schema?.title}}
+    <br>
+    <div class="subtitle">{{list?.schema?.subTitle}}</div>
+  </nz-page-header-title>
+
+  <!--extra-->
+  <nz-page-header-extra>
+    <nz-space>
+      <button *nzSpaceItem nz-button nzType="primary" (click)="list?.createObject()">创建合集</button>
+    </nz-space>
+  </nz-page-header-extra>
+</nz-page-header>
+
+
 <comp-table-list
   #list
   [schema]="EduCollection"

projects/textbook/src/modules/nav-admin/page-collection/page-collection.component.scss

@@ -0,0 +1,10 @@
+.subtitle{
+        margin-right: 12px;
+        color: #00000073;
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 1.5715;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+}

projects/textbook/src/modules/nav-admin/page-collection/page-collection.component.ts

@@ -5,13 +5,24 @@ import EduCollection from '../../../schemas/EduCollection';
 // import { TranslateService } from '@ngx-translate/core';
 import * as Parse from "parse";
 import { CommonModule } from '@angular/common';
+import { NzTagModule } from 'ng-zorro-antd/tag';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
+import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 
 
 @Component({
   selector: 'app-page-collection',
   templateUrl: './page-collection.component.html',
   styleUrls: ['./page-collection.component.scss'],
-  imports: [CommonModule,RouterOutlet,CompTableListComponent],
+  imports: [
+    CommonModule,RouterOutlet,CompTableListComponent,
+    NzPageHeaderModule,NzBreadCrumbModule,NzTagModule,NzButtonModule,NzIconModule,NzSpaceModule,
+    NzDropDownModule,
+  ],
   standalone: true,
 })
 export class PageCollectionComponent  implements OnInit {

projects/textbook/src/schemas/EduCollection.ts

@@ -4,6 +4,7 @@ import { openObjectEditDialog, ParseSchema } from "./func-parse";
 
 const EduCollection:ParseSchema = {
     "title":"报送合集",
+    "subTitle":"创建报送合集，分配合集管理员，统一管理各地区的教材推荐报送流程和配额。",
     "className": "EduCollection",
     emptyImg:"/img/webhook-empty.png",
     emptyDesc:"请您创建报送合集，分配合集管理员，统一管理各地区的教材推荐报送流程和配额。",

projects/textbook/src/schemas/func-parse.ts

@@ -4,7 +4,8 @@ import { CompEditObjectComponent } from "../app/comp-table/comp-edit-object/comp
 
 
 export interface ParseSchema{
-    title:string
+    title:string,
+    subTitle?:string,
     className:string,
     fieldsArray:Array<ParseField>,
     include?:Array<string>,
@@ -55,6 +56,8 @@ export interface ParseFiledOption{
   }
   export function confirmDialog(dialog:MatDialog, options: {
     title: string,
+    mode?: string,
+    danger?: boolean,
     message?: string,
     handleOK?: Function
   }) {
@@ -62,6 +65,8 @@ export interface ParseFiledOption{
       data: {
         title: options?.title,
         message: options?.message,
+        mode: options?.mode,
+        danger: options?.danger,
       },
     });