yss-project/src/app/shared/components/settlement-card/settlement-card.html

<div class="settlement-card">
  <!-- 自动化控制头部 -->
  @if (showAutomationControls) {
    <div class="automation-header">
      <div class="automation-title">
        <mat-icon>auto_awesome</mat-icon>
        <span>自动化结算处理</span>
      </div>
      <div class="automation-actions">
        <button 
          mat-raised-button 
          color="primary"
          [disabled]="isProcessing()"
          (click)="processAllAutomation()"
          matTooltip="批量处理所有待结算项">
          @if (isProcessing()) {
            <mat-spinner diameter="16"></mat-spinner>
            <span>处理中...</span>
          } @else {
            <ng-container>
              <mat-icon>play_arrow</mat-icon>
              <span>批量处理</span>
            </ng-container>
          }
        </button>
      </div>
    </div>
  }

  <div class="settlement-card">
    <!-- 统计概览 -->
    <div class="stats-overview">
      <div class="stats-title">
        <mat-icon>account_balance_wallet</mat-icon>
        <span>尾款结算统计</span>
      </div>
      <div class="stats-grid">
        <div class="stat-item total">
          <div class="stat-value">{{ formatAmount(stats().totalAmount) }}</div>
          <div class="stat-label">总金额 ({{ stats().totalCount }}项)</div>
        </div>
        <div class="stat-item pending">
          <div class="stat-value">{{ formatAmount(stats().pendingAmount) }}</div>
          <div class="stat-label">待结算 ({{ stats().pendingCount }}项)</div>
        </div>
        <div class="stat-item overdue">
          <div class="stat-value">{{ formatAmount(stats().overdueAmount) }}</div>
          <div class="stat-label">逾期 ({{ stats().overdueCount }}项)</div>
        </div>
        <div class="stat-item completed">
          <div class="stat-value">{{ formatAmount(stats().completedAmount) }}</div>
          <div class="stat-label">已结算 ({{ stats().completedCount }}项)</div>
        </div>
      </div>
    </div>
  
    <!-- 筛选区域 -->
    <div class="filter-section">
      <div class="search-box">
        <mat-icon>search</mat-icon>
        <input 
          type="text" 
          placeholder="搜索项目名称或阶段..."
          [value]="searchKeyword()"
          (input)="updateSearchKeyword($event.target.value)">
      </div>
      <div class="filter-buttons">
        <button 
          class="filter-btn"
          [class.active]="statusFilter() === 'all'"
          (click)="updateStatusFilter('all')">
          全部
        </button>
        <button 
          class="filter-btn"
          [class.active]="statusFilter() === '待结算'"
          (click)="updateStatusFilter('待结算')">
          待结算
        </button>
        <button 
          class="filter-btn"
          [class.active]="statusFilter() === '已结算'"
          (click)="updateStatusFilter('已结算')">
          已结算
        </button>
        <button 
          class="filter-btn overdue"
          [class.active]="statusFilter() === 'overdue'"
          (click)="updateStatusFilter('overdue')">
          逾期
        </button>
      </div>
    </div>
  
    <!-- 结算列表 -->
    <div class="settlement-list">
      @if (filteredSettlements().length > 0) {
        <div class="list-header">
          <span class="col-project">项目信息</span>
          <span class="col-amount">金额</span>
          <span class="col-status">状态</span>
          <span class="col-actions">操作</span>
          <span class="col-date">日期</span>
        </div>
        <div class="list-body">
          @for (settlement of filteredSettlements(); track settlement.id) {
            <div class="settlement-item" [class]="getStatusClass(settlement)">
              <div class="col-project">
                <div class="project-name">{{ settlement.projectName || '结算项' }}</div>
                <div class="stage-name">{{ settlement.stage || '阶段' }}</div>
              </div>
              <div class="col-amount">
                <div class="amount">{{ formatAmount(settlement.amount || 0) }}</div>
                <div class="percentage">{{ settlement.percentage }}%</div>
              </div>
              <div class="col-status">
                <span class="status-badge" [class]="getStatusClass(settlement)">
                  {{ settlement.status }}
                </span>
                @if (isOverdue(settlement)) {
                  <div class="overdue-days">逾期 {{ getDaysOverdue(settlement) }} 天</div>
                }
                
                <!-- 自动化处理按钮 -->
                @if (showAutomationControls && settlement.status === '待结算' && !isOverdue(settlement)) {
                  <button 
                    class="auto-process-btn"
                    mat-icon-button
                    color="primary"
                    [disabled]="isProcessing() && processingSettlementId() !== settlement.id"
                    (click)="processSettlementAutomation(settlement); $event.stopPropagation()"
                    matTooltip="自动处理此结算">
                    @if (processingSettlementId() === settlement.id) {
                      <mat-spinner diameter="16"></mat-spinner>
                    } @else {
                      <mat-icon>auto_awesome</mat-icon>
                    }
                  </button>
                }
              </div>
              
              <!-- 新增操作列 -->
              <div class="col-actions">
                <div class="action-buttons">
                  <!-- 项目验收确认按钮 -->
                  @if (settlement.status === '待结算') {
                    <button 
                      mat-stroked-button
                      [color]="getAcceptanceStatus(settlement.projectId) === 'confirmed' ? 'primary' : 'accent'"
                      [disabled]="getAcceptanceStatus(settlement.projectId) === 'confirming'"
                      (click)="confirmProjectAcceptance(settlement)"
                      matTooltip="技术确认项目验收"
                      class="acceptance-btn">
                      @if (getAcceptanceStatus(settlement.projectId) === 'confirming') {
                        <mat-spinner diameter="16"></mat-spinner>
                        <span>确认中</span>
                      } @else if (getAcceptanceStatus(settlement.projectId) === 'confirmed') {
                        <ng-container>
                          <mat-icon>check_circle</mat-icon>
                          <span>已验收</span>
                        </ng-container>
                      } @else {
                        <ng-container>
                          <mat-icon>task_alt</mat-icon>
                          <span>确认验收</span>
                        </ng-container>
                      }
                    </button>
                  }
                  
                  <!-- 客服跟进提醒按钮 -->
                  @if (settlement.status === '待结算' && getAcceptanceStatus(settlement.projectId) === 'confirmed') {
                    <button 
                      mat-stroked-button
                      color="warn"
                      [disabled]="getReminderStatus(settlement.projectId) === 'creating' || getReminderStatus(settlement.projectId) === 'created'"
                      (click)="createCustomerServiceReminder(settlement, 'payment_follow_up')"
                      matTooltip="创建客服跟进尾款提醒"
                      class="reminder-btn">
                      @if (getReminderStatus(settlement.projectId) === 'creating') {
                        <mat-spinner diameter="16"></mat-spinner>
                        <span>创建中</span>
                      } @else if (getReminderStatus(settlement.projectId) === 'created') {
                        <ng-container>
                          <mat-icon>notifications_active</mat-icon>
                          <span>已提醒</span>
                        </ng-container>
                      } @else {
                        <ng-container>
                          <mat-icon>notification_add</mat-icon>
                          <span>跟进尾款</span>
                        </ng-container>
                      }
                    </button>
                  }
                  
                  <!-- 一键发图到企业微信群按钮 -->
                  @if (canSendImages(settlement)) {
                    <button 
                      mat-raised-button
                      color="primary"
                      [disabled]="isSendingImagesForProject(settlement.projectId)"
                      (click)="sendImagesToWeChatGroup(settlement)"
                      matTooltip="收款后一键发送大图到企业微信群"
                      class="wechat-send-btn">
                      @if (isSendingImagesForProject(settlement.projectId)) {
                        <mat-spinner diameter="16"></mat-spinner>
                        <span>发送中</span>
                      } @else {
                        <ng-container>
                          <mat-icon>send</mat-icon>
                          <span>发图到群</span>
                        </ng-container>
                      }
                    </button>
                  }
                  
                  <!-- 原有的处理结算按钮 -->
                  <button 
                    mat-raised-button
                    color="primary"
                    [disabled]="settlement.status === '已结算'"
                    (click)="processSettlement(settlement.id)"
                    class="process-btn">
                    @if (settlement.status === '待结算') {
                      处理结算
                    } @else if (settlement.status === '逾期') {
                      逾期处理
                    } @else {
                      已完成
                    }
                  </button>
                  
                  @if (isOverdue(settlement)) {
                    <button 
                      mat-stroked-button
                      color="warn"
                      (click)="sendReminder(settlement.id)"
                      class="reminder-btn">
                      发送催款
                    </button>
                  }
                </div>
              </div>
              
              <div class="col-date">
                @if (settlement.settledAt) {
                  <div class="settled-date">{{ settlement.settledAt | date:'yyyy-MM-dd' }}</div>
                  <div class="date-label">结算日期</div>
                } @else {
                  <div class="due-date">{{ settlement.createdAt | date:'yyyy-MM-dd' }}</div>
                  <div class="date-label">创建日期</div>
                }
              </div>
            </div>
          }
        </div>
      } @else {
        <div class="empty-state">
          <div class="empty-icon">💰</div>
          <div class="empty-title">暂无结算信息</div>
          <div class="empty-desc">当前筛选条件下没有找到相关的结算记录</div>
        </div>
      }
    </div>
  </div>
</div>