d2-04-search-delete-page

第 2 天 · 步骤 4 — 基于功能的搜索页面

**注意：**此技能会根据在 d2-03-main-menu 中选择的功能进行调整：

• 如果选择了 search：显示带有“编辑”按钮的列表
• 如果还选择了 delete：添加带有内联确认弹窗的“删除”按钮
• 如果只选择了 search：不显示“删除”按钮

up-app/src/app/pages/<entity>-search/<entity>-search.component.ts（独立组件）：

• 使用 signal<Entity[]>([]) 存储项目列表；获取数据时，调用 .set() 进行更新。
• 初始化时，调用 <entity>Service.getAll()，并通过 this.items.set(data) 更新信号。
• 如果启用了 create 功能：添加带有添加按钮的标题栏 → router.navigate(['/<entity>/new'])。
• 添加返回按钮，导航到主页/菜单 → router.navigate(['/'])。
• 每行（使用 @for，并通过 track item.id 跟踪）：
  • 编辑按钮 → router.navigate(['/<entity>', item.id, 'edit'])（始终包含）
  • 删除按钮（仅在选择了 delete 功能时）→ 显示确认弹窗；确认后，调用 <entity>Service.delete(id)，并在成功后通过 .set() 更新信号。

**路由：**已在 d2-03-main-menu 中定义（完整的 app.routes.ts）。此技能使用这些路由进行导航。

组件 TypeScript：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CommonModule } from '@angular/common';
import { signal } from '@angular/core';
import { <Entity>Service, <Entity> } from '../../services/<entity>.service';

@Component({
  selector: 'app-<entity>-search',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './<entity>-search.component.html',
  styleUrls: ['./<entity>-search.component.css']
})
export class <Entity>SearchComponent implements OnInit {
  items = signal<<Entity>[]>([]);
  
  // Capability flags (set based on selections from d2-03)
  hasCreateCapability = true;   // Set to false if 'create' not selected
  hasDeleteCapability = true;   // Set to false if 'delete' not selected

  constructor(
    private router: Router,
    private <entity>Service: <Entity>Service
  ) {}

  ngOnInit() {
    this.<entity>Service.getAll().subscribe(data => {
      this.items.set(data);
    });
  }

  onBack() {
    this.router.navigate(['/']);  // Navigate back to menu/home
  }

  onAdd() {
    this.router.navigate([`/<entity>/new`]);
  }

  onEdit(id: number | undefined) {
    if (id) {
      this.router.navigate(['/<entity>', id, 'edit']);
    }
  }

  onDelete(item: <Entity>) {
    if (confirm(`Delete "<property name from item>"?`)) {
      if (item.id) {
        this.<entity>Service.delete(item.id).subscribe(() => {
          const current = this.items();
          this.items.set(current.filter(i => i.id !== item.id));
        });
      }
    }
  }
}

模板（包含灵活的列、“返回”按钮和基于功能的“删除”按钮）：

<div class="min-h-screen bg-gray-50">
  <div class="max-w-4xl mx-auto p-6">
    
    <div class="flex justify-between items-center mb-6">
      <div class="flex items-center gap-4">
        <button
          (click)="onBack()"
          class="bg-gray-500 hover:bg-gray-600 text-white font-semibold px-4 py-2 rounded-lg transition"
        >
          ← Back
        </button>
        <h1 class="text-4xl font-bold text-gray-900"><Entity> List</h1>
      </div>
      @if (hasCreateCapability) {
        <button
          (click)="onAdd()"
          class="bg-green-500 hover:bg-green-600 text-white font-semibold px-6 py-3 rounded-lg transition shadow-md"
        >
          + Add New
        </button>
      }
    </div>

    
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
      <div class="overflow-x-auto">
        <table class="min-w-full">
          <thead>
            <tr class="bg-gray-100 border-b border-gray-200">
              
              <th class="px-6 py-3 text-left font-semibold text-gray-700">Code</th>
              <th class="px-6 py-3 text-left font-semibold text-gray-700">Name</th>
              <th class="px-6 py-3 text-left font-semibold text-gray-700">Address</th>
              <th class="px-6 py-3 text-left font-semibold text-gray-700">Phone</th>
              <th class="px-6 py-3 text-center font-semibold text-gray-700">Actions</th>
            </tr>
          </thead>
          <tbody>
            @for (item of items(); track item.id) {
              <tr class="border-b border-gray-100 hover:bg-gray-50 transition">
                
                <td class="px-6 py-3 text-gray-900 font-medium">{{ item.empCode }}</td>
                <td class="px-6 py-3 text-gray-900">{{ item.empName }}</td>
                <td class="px-6 py-3 text-gray-700">{{ item.address || "-" }}</td>
                <td class="px-6 py-3 text-gray-700">{{ item.phoneNo || "-" }}</td>
                <td class="px-6 py-3 text-center">
                  <button
                    (click)="onEdit(item.id)"
                    class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg mr-2 transition text-sm font-semibold"
                  >
                    Edit
                  </button>
                  @if (hasDeleteCapability) {
                    <button
                      (click)="onDelete(item)"
                      class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition text-sm font-semibold"
                    >
                      Delete
                    </button>
                  }
                </td>
              </tr>
            }
          </tbody>
        </table>
      </div>

      @if (items().length === 0) {
        <div class="text-center py-8 text-gray-600">
          <p class="text-lg">No <entity> found. 
            @if (hasCreateCapability) {
              <a href="javascript:" (click)="onAdd()" class="text-blue-500 hover:underline">Create one</a>.
            } @else {
              Contact your administrator to create records.
            }
          </p>
        </div>
      }
    </div>
  </div>
</div>

列自定义：

• 将 empCode、empName、address、phoneNo 替换为实体实际的属性名称
• 添加/删除表格标题 <th> 和表格数据 <td> 列，以匹配实体结构
• 使用 || "-" 为值为空或为 null 的可选字段显示短横线

功能标志：

• 根据在 d2-03 中的选择设置 hasCreateCapability 和 hasDeleteCapability
• 如果值为 false，则不会显示“添加”和“删除”按钮
• 根据 CRUD 需求动态调整按钮