feat: empty result when table-list no data

docs/Schema.md

@@ -0,0 +1,16 @@
+# 数据范式说明
+
+
+
+# 系统范式
+- _User 注册账号
+- _Role 用户组/角色
+- Profile 角色认证审核档案
+
+
+# 教材范式
+- EduTextbook
+
+
+# 合集范式
+- EduCollection

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

@@ -7,10 +7,8 @@
   </div>
 </div>
 
-<nz-table #editRowTable nzBordered [nzData]="list" *ngIf="showMode=='list'"
-  [nzNoResult]="currentLang=='cn'?'暂无数据':'No Data'"
-  [nzLoading]="isLoading" nzFrontPagination="false"
->
+<nz-table #editRowTable nzBordered [nzData]="list" *ngIf="showMode=='list'&&list?.length"
+  [nzLoading]="isLoading" nzFrontPagination="false">
     <thead>
       <tr>
         <ng-container *ngFor="let field of headerArray">
@@ -70,9 +68,24 @@
         <!-- <comp-monitor-card [monitor]="object"></comp-monitor-card> -->
       </div>
     </ng-container>
-    <nz-empty *ngIf="!list?.length" nzNotFoundImage="simple" [nzNotFoundContent]="currentLang=='cn'?'暂无数据':'No Data'"></nz-empty>
   </div>
 
+  <!-- 暂无数据：提示模板 -->
+  <ng-template #noResultTpl>
+    <nz-result [nzIcon]="emptyImgTpl" [nzTitle]="schema?.title+'管理'" [nzSubTitle]="'当前还没有'+schema?.title+'数据哦，请您点击创建。'">
+      <div nz-result-extra>
+        <button mat-raised-button color="primary">创建</button>
+      </div>
+    </nz-result>
+  </ng-template>
+  <ng-template #emptyImgTpl>
+    <img style="width:50%;max-width:300px;" [src]="schema?.emptyImg || '/img/404-empty.svg' " alt="">
+  </ng-template>
+
+  <ng-container *ngIf="!list?.length">
+    <ng-container *ngTemplateOutlet="noResultTpl"></ng-container>
+  </ng-container>
+
   <div style="width:100%;display: flex;justify-content: center;align-items: center;">
     <nz-pagination 
     [nzPageIndex]="pageIndex"

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

@@ -8,6 +8,7 @@ import { CommonModule } from '@angular/common';
 
 import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
+import { NzResultModule } from 'ng-zorro-antd/result';
 
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonModule } from '@angular/material/button';
@@ -30,7 +31,7 @@ interface SchemaFiled{
   imports:[CommonModule,
     UtilnowPipe,
     // TranslateModule,
-    NzPaginationModule,NzEmptyModule,NzTableModule,
+    NzPaginationModule,NzEmptyModule,NzTableModule,NzResultModule,
     MatButtonModule,MatCheckboxModule,MatSlideToggleModule,
   ],
   providers:[]

projects/textbook/src/modules/nav-admin/modules.routes.ts

@@ -1,5 +1,6 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
+import { PageCollectionComponent } from "./page-collection/page-collection.component";
 import { PageHomeComponent } from './page-home/page-home.component';
 import { PageRoleComponent } from "./page-role/page-role.component";
 import { PageUserComponent } from "./page-user/page-user.component";
@@ -27,6 +28,10 @@ const routes: Routes = [
         path: 'role',//列表
         component: PageRoleComponent,
       },
+      {
+        path: 'collection',//列表
+        component: PageCollectionComponent,
+      },
     ]
   }
 ];

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

@@ -0,0 +1,9 @@
+<comp-table-list
+  #list
+  [schema]="EduCollection"
+  *ngIf="className && fieldsArray"
+  [className]="className"
+  [fieldsArray]="fieldsArray"
+  [queryParams]="queryParams"
+  [showMode]="'grid'"
+></comp-table-list>

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { PageCollectionComponent } from './page-collection.component';
+
+describe('PageCollectionComponent', () => {
+  let component: PageCollectionComponent;
+  let fixture: ComponentFixture<PageCollectionComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [PageCollectionComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PageCollectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,50 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, RouterOutlet } from '@angular/router';
+import { CompTableListComponent } from '../../../app/comp-table/comp-table-list/comp-table-list.component';
+import EduCollection from '../../../schemas/EduCollection';
+// import { TranslateService } from '@ngx-translate/core';
+import * as Parse from "parse";
+import { CommonModule } from '@angular/common';
+
+
+@Component({
+  selector: 'app-page-collection',
+  templateUrl: './page-collection.component.html',
+  styleUrls: ['./page-collection.component.scss'],
+  imports: [CommonModule,RouterOutlet,CompTableListComponent],
+  standalone: true,
+})
+export class PageCollectionComponent  implements OnInit {
+  @ViewChild(CompTableListComponent) list:CompTableListComponent|undefined
+
+  EduCollection = EduCollection
+  className:string|undefined
+  queryParams:any|undefined
+  fieldsArray:Array<any>|undefined
+
+  constructor(
+    private route: ActivatedRoute,
+    private activeRoute: ActivatedRoute,
+    // private translate:TranslateService,
+  ) {
+    this.className = this.EduCollection.className
+    this.fieldsArray = this.EduCollection.fieldsArray
+    this.queryParams = {where:{
+      // Collection:this.Collection?.toPointer(),
+      isDeleted:{$ne:true},
+    }}
+  }
+
+  ngOnInit(): void {
+    this.activeRoute.paramMap.subscribe(async (params) => {
+      let isDeleted = params.get('isDeleted')
+      if(isDeleted){
+        this.queryParams.where['isDeleted'] = {$eq:true}
+      }else{
+        this.queryParams.where['isDeleted'] = {$ne:true}
+      }
+      this.list?.ngOnInit()
+    });
+  }
+
+}

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

@@ -19,6 +19,7 @@ export class PageHomeComponent  implements OnInit {
       child:[
         {
           name:'报送合集',
+          path:"/nav-admin/manage/collection",
           id:'1-1',
         },
         {

projects/textbook/src/schemas/EduCollection.ts

@@ -0,0 +1,61 @@
+import { MatDialog } from "@angular/material/dialog";
+import { openObjectEditDialog, ParseSchema } from "./func-parse";
+
+
+    const EduCollection:ParseSchema = {
+        "title":"报送合集",
+        "className": "EduCollection",
+        emptyImg:"/img/webhook-empty.png",
+        "fieldsArray": [
+            {
+                "key":"title",
+                "name":"合集名称",
+                "type": "String",
+                isHeader:true
+            },
+            {
+                "key":"name",
+                "name":"合集CODE",
+                "type": "String",
+                isHeader:true
+            },
+            {
+                "key":"desc",
+                "name":"合集描述",
+                "type": "String",
+                isHeader:true
+            },
+            {
+                "key":"profileSubmitted",
+                "name":"合集报送人",
+                "type": "Pointer",
+                "className":"Profile",
+                isHeader:true
+            },
+            {
+                "key":"status",
+                "name":"合集状态",
+                "type": "String",
+                "options":[
+                    {label:"遴选中",value:"遴选中"},
+                    {label:"公示中",value:"公示中"},
+                    {label:"已完成",value:"已完成"}
+                ],
+                isHeader:true
+            },
+        ],
+        buttons:[
+            {
+                name:"编辑",
+                place:"item",
+                show:(options:{object:Parse.Object})=>{
+                    return true
+                },
+                handle:(options:{dialog:MatDialog,object:Parse.Object})=>{
+                    openObjectEditDialog(options?.dialog,EduCollection,options?.object)
+                }
+            },
+        ]
+      };
+      
+      export default EduCollection;

projects/textbook/src/schemas/EduTextbook.ts

@@ -5,24 +5,9 @@ import { ParseSchema } from "./func-parse";
 export const EduTextbook:ParseSchema = {
     title:"教材",
     className:"EduTextbook",
+    emptyImg:"/img/webhook-empty.png",
     include:["user"],
     buttons:[
-        // 行内操作
-        {
-            name:"绑定",
-            place:"item",
-            show:(options:{object:Parse.Object})=>{
-                if(options?.object?.get("type")=="unit") {return true} else return false
-            },
-            handle:(options:{dialog:MatDialog,object:Parse.Object,callback:any})=>{
-                // options?.clusterServ?.openMinerDialog(options?.dialog,options?.object)
-                console.log(options?.object.toJSON())
-                console.log(options)
-                if(options?.callback){
-                    options?.callback(options?.object)
-                }
-            }
-        },
         {
             name:"编辑",
             place:"item",

projects/textbook/src/schemas/_Role.ts

@@ -5,6 +5,7 @@ import { openObjectEditDialog, ParseSchema } from "./func-parse";
     const _Role:ParseSchema = {
         "title":"用户组",
         "className": "_Role",
+        emptyImg:"/img/group-empty.png",
         "fieldsArray": [
             {
                 "key":"title",

projects/textbook/src/schemas/_User.ts

@@ -5,6 +5,7 @@ import { openObjectEditDialog, ParseSchema } from "./func-parse";
     const _User:ParseSchema = {
         "title":"注册帐号",
         "className": "_User",
+        emptyImg:"/img/group-empty.png",
         "fieldsArray": [
             // {
             //     "key":"avatar",

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

@@ -2,22 +2,29 @@ import { MatDialog } from "@angular/material/dialog";
 import { CompComfirmDialogComponent } from "../app/comp-comfirm-dialog/comp-comfirm-dialog.component";
 import { CompEditObjectComponent } from "../app/comp-table/comp-edit-object/comp-edit-object.component";
 
-export interface ParseField{
-    key:string
-    name:string
-    type:string
-    isDisabled?:boolean
-    className?:string
-    showName?:string
-    isHeader?:boolean
-}
+
 export interface ParseSchema{
     title:string
     className:string,
-    fieldsArray:Array<ParseField>
+    fieldsArray:Array<ParseField>,
+    emptyImg?:String,
     include?:Array<string>,
     buttons?:Array<any>,
 }
+export interface ParseField{
+  key:string
+  name:string
+  type:string
+  isDisabled?:boolean
+  className?:string
+  showName?:string
+  isHeader?:boolean
+  options?:Array<ParseFiledOption>
+}
+export interface ParseFiledOption{
+  label:string
+  value:string
+}
 
 /**
    * 创建集装箱