修改优化8-6

projects/textbook/src/app/textbook/textbook.component.html

@@ -119,40 +119,139 @@
           [nzChecked]="setOfCheckedId.has(data.id)"
           (nzCheckedChange)="onItemChecked(data.id, $event)"
         ></td>
-        <td nzEllipsis (click)="toUrl(path + '/' + data.id)">
+        <td
+          nzEllipsis
+          (click)="toUrl(path + '/' + data.id)"
+          nz-popover
+          [nzPopoverContent]="contentTemplate"
+        >
           {{ data?.get("code") }}
+          <ng-template #contentTemplate>
+            <div style="max-width: 400px">
+              {{ data?.get("code") }}
+            </div>
+          </ng-template>
         </td>
         }@else {
-        <td nzEllipsis nzLeft>
+        <td nzEllipsis nzLeft nz-popover [nzPopoverContent]="contentTemplate">
           {{ data?.get("code") }}
+          <ng-template #contentTemplate>
+            <div style="max-width: 400px">
+              {{ data?.get("code") }}
+            </div>
+          </ng-template>
         </td>
         }
-        <td nzEllipsis class="activeTd" (click)="toUrl(path + '/' + data.id)">
+        <td
+          nzEllipsis
+          class="activeTd"
+          (click)="toUrl(path + '/' + data.id)"
+          nz-popover
+          [nzPopoverContent]="contentTemplate"
+        >
           {{ data?.get("title") || "-" }}
+          <ng-template #contentTemplate>
+            <div style="max-width: 400px">
+              {{ data?.get("title") || "-" }}
+            </div>
+          </ng-template>
         </td>
-        <td nzEllipsis>
-          {{fromatFiled(data?.get('childrens'), 'ISBN')}}
+        <td
+          nzEllipsis
+          nz-popover
+          [nzPopoverContent]="contentTemplateISBN"
+          #ISBN
+        >
+          {{ fromatFiled(data?.get("childrens"), "ISBN") }}
+          <ng-template #contentTemplateISBN>
+            <div style="max-width: 400px">
+              {{ ISBN.innerText }}
+            </div>
+          </ng-template>
         </td>
-        <td nzEllipsis>
-          {{fromatFiled(data?.get('childrens'), 'author')}}
+        <td
+          nzEllipsis
+          nz-popover
+          [nzPopoverContent]="contentTemplateauthor"
+          #author
+        >
+          {{ fromatFiled(data?.get("childrens"), "author") }}
+          <ng-template #contentTemplateauthor>
+            <div style="max-width: 400px">
+              {{ author.innerText }}
+            </div>
+          </ng-template>
         </td>
-        <td nzEllipsis>
-          {{fromatFiled(data?.get('childrens'), 'lang')}}
+        <td
+          nzEllipsis
+          nz-popover
+          [nzPopoverContent]="contentTemplatelang"
+          #lang
+        >
+          {{ fromatFiled(data?.get("childrens"), "lang") }}
+          <ng-template #contentTemplatelang>
+            <div style="max-width: 400px">
+              {{ lang.innerText }}
+            </div>
+          </ng-template>
         </td>
-        <td nzEllipsis>
-          {{ data?.get("majorPoniter")?.code + '/'+data?.get("majorPoniter")?.name || "-" }}
+        <td nzEllipsis nz-popover [nzPopoverContent]="contentTemplatemajor">
+          {{
+            (data?.get("majorPoniter")?.code || "") +
+              "/" +
+              (data?.get("majorPoniter")?.name || "")
+          }}
+          <ng-template #contentTemplatemajor>
+            <div style="max-width: 400px">
+              {{
+                (data?.get("majorPoniter")?.code || "") +
+                  "/" +
+                  (data?.get("majorPoniter")?.name || "")
+              }}
+            </div>
+          </ng-template>
         </td>
-        <td nzEllipsis>
-          {{fromatFiled(data?.get('childrens'), 'editionUnit')}}
+        <td
+          nzEllipsis
+          nz-popover
+          [nzPopoverContent]="contentTemplateeditionUnit"
+          #editionUnit
+        >
+          {{ fromatFiled(data?.get("childrens"), "editionUnit") }}
+          <ng-template #contentTemplateeditionUnit>
+            <div style="max-width: 400px">
+              {{ editionUnit.innerText }}
+            </div>
+          </ng-template>
         </td>
-        <td nzEllipsis>
+        <td nzEllipsis nz-popover [nzPopoverContent]="contentTemplateapproval">
           {{ data?.get("approval") || "-" }}
+          <ng-template #contentTemplateapproval>
+            <div style="max-width: 400px">
+              {{ data?.get("approval") || "-" }}
+            </div>
+          </ng-template>
         </td>
-        <td nzEllipsis>
-          {{fromatFiled(data?.get('childrens'), 'carrierShape')}}
+        <td
+          nzEllipsis
+          nz-popover
+          [nzPopoverContent]="contentTemplatecarrierShape"
+          #carrierShape
+        >
+          {{ fromatFiled(data?.get("childrens"), "carrierShape") }}
+          <ng-template #contentTemplatecarrierShape>
+            <div style="max-width: 400px">
+              {{ carrierShape.innerText }}
+            </div>
+          </ng-template>
         </td>
-        <td nzEllipsis>
+        <td nzEllipsis nz-popover [nzPopoverContent]="contentTemplatename">
           {{ data?.get("department")?.get("name") || "-" }}
+          <ng-template #contentTemplatename>
+            <div style="max-width: 400px">
+              {{ data?.get("department")?.get("name") || "-" }}
+            </div>
+          </ng-template>
         </td>
         <td nzEllipsis nzRight>
           @if(manage){
@@ -181,9 +280,7 @@
               <li nz-menu-item>
                 <button
                   nz-button
-                  (click)="
-                    toUrl('/common/textbook/details/' + data.id)
-                  "
+                  (click)="toUrl('/common/textbook/details/' + data.id)"
                   nzType="link"
                   style="color: #231c1f"
                 >
@@ -298,13 +395,13 @@
           (nzCheckedChange)="onAllChecked($event)"
         ></th>
         @if (!filterObj?.btns?.submit) {
-        <th nzEllipsis nzWidth="80px">申报编号</th>
+        <th nzEllipsis nzWidth="100px">申报编号</th>
         }
         <th nzEllipsis nzWidth="120px">教材名称</th>
         }@else if(filterObj?.btns?.submit){
         <th nzEllipsis nzLeft nzWidth="120px">教材名称</th>
         }@else {
-        <th nzEllipsis nzWidth="80px" nzLeft>申报编号</th>
+        <th nzEllipsis nzWidth="100px" nzLeft>申报编号</th>
         <th nzEllipsis nzWidth="120px">教材名称</th>
         }
         <th nzEllipsis nzWidth="50px">册数</th>
@@ -329,12 +426,34 @@
           (nzCheckedChange)="onItemChecked(data.id, $event)"
         ></td>
         @if (!filterObj?.btns?.submit) {
-        <td nzEllipsis class="activeTd" (click)="toUrl(path + '/' + data.id)">
+        <td
+          nzEllipsis
+          class="activeTd"
+          (click)="toUrl(path + '/' + data.id)"
+          nz-popover
+          [nzPopoverContent]="contentTemplate"
+        >
           {{ data?.get("code") }}
+          <ng-template #contentTemplate>
+            <div style="max-width: 400px">
+              {{ data?.get("code") }}
+            </div>
+          </ng-template>
         </td>
         }
-        <td nzEllipsis class="activeTd" (click)="toUrl(path + '/' + data.id)">
+        <td
+          nzEllipsis
+          class="activeTd"
+          (click)="toUrl(path + '/' + data.id)"
+          nz-popover
+          [nzPopoverContent]="contentTemplatetitle"
+        >
           {{ data?.get("title") || "-" }}
+          <ng-template #contentTemplatetitle>
+            <div style="max-width: 400px">
+              {{ data?.get("title") || "-" }}
+            </div>
+          </ng-template>
         </td>
         }@else if(filterObj?.btns?.submit){
         <td
@@ -342,42 +461,112 @@
           nzLeft
           class="activeTd"
           (click)="toUrl(path + '/' + data.id)"
+          nz-popover
+          [nzPopoverContent]="contentTemplatetitle"
         >
           {{ data?.get("title") || "-" }}
+          <ng-template #contentTemplatetitle>
+            <div style="max-width: 400px">
+              {{ data?.get("title") || "-" }}
+            </div>
+          </ng-template>
         </td>
         } @else {
-        <td nzEllipsis nzLeft>
+        <td nzLeft nz-popover [nzPopoverContent]="contentTemplate">
           {{ data?.get("code") }}
+          <ng-template #contentTemplate>
+            <div style="max-width: 400px">
+              {{ data?.get("code") || "-" }}
+            </div>
+          </ng-template>
         </td>
-        <td nzEllipsis class="activeTd" (click)="toUrl(path + '/' + data.id)">
+        <td
+          nzEllipsis
+          class="activeTd"
+          (click)="toUrl(path + '/' + data.id)"
+          nz-popover
+          [nzPopoverContent]="contentTemplatetitle"
+        >
           {{ data?.get("title") || "-" }}
+          <ng-template #contentTemplatetitle>
+            <div style="max-width: 400px">
+              {{ data?.get("title") || "-" }}
+            </div>
+          </ng-template>
         </td>
         }
 
-        <td nzEllipsis>
+        <td
+          nzEllipsis
+          nz-popover
+          [nzPopoverContent]="contentTemplatetypeNumber"
+        >
           {{
             data?.get("type") == "单本"
               ? "单本"
-              : '全册 - ' + data?.get("typeNumber") || "-"
+              : "全册 - " + data?.get("typeNumber") || "-"
           }}
+          <ng-template #contentTemplatetypeNumber>
+            <div style="max-width: 400px">
+              {{
+                data?.get("type") == "单本"
+                  ? "单本"
+                  : "全册 - " + data?.get("typeNumber") || "-"
+              }}
+            </div>
+          </ng-template>
         </td>
-        <td nzEllipsis>
-          {{fromatFiled(data?.get('childrens'), 'author')}}
+        <td nzEllipsis nz-popover [nzPopoverContent]="contentTemplateauthor" #author>
+          {{ fromatFiled(data?.get("childrens"), "author") }}
+          <ng-template #contentTemplateauthor>
+            <div style="max-width: 400px">
+              {{ author.innerText }}
+            </div>
+          </ng-template>
         </td>
-        <td nzEllipsis>
-          {{fromatFiled(data?.get('childrens'), 'unit')}}
+        <td nzEllipsis nz-popover [nzPopoverContent]="contentTemplateunit" #unit>
+          {{ fromatFiled(data?.get("childrens"), "unit") }}
+          <ng-template #contentTemplateunit>
+            <div style="max-width: 400px">
+              {{ unit.innerText }}
+            </div>
+          </ng-template>
         </td>
-        <td nzEllipsis>
+        <td nzEllipsis nz-popover [nzPopoverContent]="contentTemplatemajor">
           {{ data?.get("major")?.name || "-" }}
+          <ng-template #contentTemplatemajor>
+            <div style="max-width: 400px">
+              {{ data?.get("major")?.name || "-" }}
+            </div>
+          </ng-template>
         </td>
-        <td nzEllipsis>
-          {{fromatFiled(data?.get('childrens'), 'lang')}}
+        <td nzEllipsis nz-popover [nzPopoverContent]="contentTemplatelang" #lang>
+          {{ fromatFiled(data?.get("childrens"), "lang") }}
+          <ng-template #contentTemplatelang>
+            <div style="max-width: 400px">
+              {{ lang.innerText }}
+            </div>
+          </ng-template>
         </td>
-        <td nzEllipsis>
-          {{fromatFiled(data?.get('childrens'), 'ISBN')}}
+        <td nzEllipsis nz-popover [nzPopoverContent]="contentTemplateISBN" #ISBN>
+          {{ fromatFiled(data?.get("childrens"), "ISBN") }}
+          <ng-template #contentTemplateISBN>
+            <div style="max-width: 400px">
+              {{ ISBN.innerText }}
+            </div>
+          </ng-template>
         </td>
-        <td nzEllipsis>
-          {{fromatFiled(data?.get('childrens'), 'editionUnit')}}
+        <td nzEllipsis
+          nz-popover
+          [nzPopoverContent]="contentTemplateeditionUnit"
+          #editionUnit
+        >
+          {{ fromatFiled(data?.get("childrens"), "editionUnit") }}
+          <ng-template #contentTemplateeditionUnit>
+            <div style="max-width: 400px">
+              {{ editionUnit.innerText }}
+            </div>
+          </ng-template>
         </td>
         <td nzEllipsis nzRight>
           @if(manage){
@@ -406,9 +595,7 @@
               <li nz-menu-item>
                 <button
                   nz-button
-                  (click)="
-                    toUrl('/common/textbook/details/' + data.id)
-                  "
+                  (click)="toUrl('/common/textbook/details/' + data.id)"
                   nzType="link"
                   style="color: #231c1f"
                 >

projects/textbook/src/app/textbook/textbook.component.ts

@@ -11,6 +11,7 @@ import { NzRadioModule } from 'ng-zorro-antd/radio';
 import { DatePipe } from '@angular/common';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
 import * as major from '../../services/majors.map';
+import { NzPopoverModule } from 'ng-zorro-antd/popover';
 interface filter {
   lang: any;
   majorPoniter: any;
@@ -30,7 +31,7 @@ interface filter {
     MatButtonModule,
     NzRadioModule,
     DatePipe,
-    NzEmptyModule,
+    NzEmptyModule,NzPopoverModule
   ],
   standalone: true,
   providers: [DatePipe],