X-Financial/web/src/views/ApprovalCenterView.vue

<template>
  <section class="approval-page">
    <TravelRequestDetailView
      v-if="selectedRow"
      :request="selectedRow"
      back-label="返回审批列表"
      approval-mode
      @back-to-requests="closeSelectedDetail"
      @request-updated="handleDetailUpdated"
      @request-deleted="handleDetailDeleted"
    />

    <article v-else class="approval-list panel">
      <nav class="status-tabs" aria-label="审批状态">
        <button
          v-for="tab in tabs"
          :key="tab"
          type="button"
          :class="{ active: activeTab === tab }"
          @click="activeTab = tab"
        >
          {{ tab }}
        </button>
      </nav>

      <div class="list-toolbar">
        <div class="filter-set">
          <div class="list-search">
            <i class="mdi mdi-magnify"></i>
            <input v-model="listKeyword" type="search" placeholder="搜索单号、申请人、部门、报销类型..." />
          </div>

          <button v-for="filter in filters" :key="filter" type="button" class="filter-btn">
            <span>{{ filter }}</span>
            <i class="mdi mdi-chevron-down"></i>
          </button>
        </div>
      </div>

      <p class="hint"><i class="mdi mdi-information-outline"></i> 点击单据行查看审批详情</p>

      <div class="table-wrap" :class="{ 'is-empty': showEmpty }">
        <div v-if="loading" class="table-state">
          <TableLoadingState
            title="审批待办同步中"
            message="正在加载当前可见的待审报销单据"
            icon="mdi mdi-clipboard-check-outline"
          />
        </div>

        <div v-else-if="error" class="table-state error">
          <i class="mdi mdi-alert-circle-outline"></i>
          <strong>审批列表加载失败</strong>
          <p>{{ error }}</p>
          <button class="state-action" type="button" @click="reload">重新加载</button>
        </div>

        <TableEmptyState
          v-else-if="showEmpty"
          :eyebrow="approvalEmptyState.eyebrow"
          :title="approvalEmptyState.title"
          :description="approvalEmptyState.desc"
          :icon="approvalEmptyState.icon"
          :action-label="approvalEmptyState.actionLabel"
          :action-icon="approvalEmptyState.actionIcon"
          :tone="approvalEmptyState.tone"
          :art-label="approvalEmptyState.artLabel"
          :tips="approvalEmptyState.tips"
          @action="handleEmptyAction"
        />

        <table v-else>
          <colgroup>
            <col><col><col><col><col><col><col><col><col><col><col>
          </colgroup>
          <thead>
            <tr>
              <th>单号</th>
              <th>申请人</th>
              <th>申请部门</th>
              <th>报销类型</th>
              <th>金额</th>
              <th>提交时间 <i class="mdi mdi-sort"></i></th>
              <th>风险等级</th>
              <th>SLA剩余</th>
              <th>当前节点</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in visibleRows" :key="row.id" :class="{ spotlight: row.spotlight }" @click="selectedRow = row">
              <td><strong class="doc-id">{{ row.id }}</strong></td>
              <td>
                <span class="person">
                  <span class="avatar">{{ row.avatar }}</span>
                  {{ row.applicant }}
                </span>
              </td>
              <td>{{ row.department }}</td>
              <td>{{ row.type }}</td>
              <td>{{ row.amount }}</td>
              <td>{{ row.time }}</td>
              <td><span class="risk-tag" :class="row.riskTone">{{ row.risk }}</span></td>
              <td><strong class="sla" :class="row.slaTone">{{ row.sla }}</strong></td>
              <td>{{ row.node }}</td>
              <td><span class="status-tag" :class="row.statusTone">{{ row.status }}</span></td>
              <td>
                <button class="more-btn" type="button" aria-label="查看审批详情" @click.stop="selectedRow = row">
                  <i class="mdi mdi-dots-horizontal"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </article>
  </section>
</template>

<script src="./scripts/ApprovalCenterView.js"></script>

<style scoped src="../assets/styles/views/approval-center-view.css"></style>
<style scoped src="../assets/styles/views/approval-center-view-part2.css"></style>