X-Financial/src/views/ApprovalCenterView.vue

<template>
  <section class="approval-page">
    <div class="approval-kpis">
      <article v-for="item in kpis" :key="item.label" class="approval-kpi panel" :style="{ '--accent': item.accent }">
        <span class="kpi-icon"><i :class="item.icon"></i></span>
        <div>
          <p>{{ item.label }}</p>
          <strong>{{ item.value }} <small>{{ item.unit }}</small></strong>
          <span :class="item.tone">{{ item.meta }} <i v-if="item.trendIcon" :class="item.trendIcon"></i></span>
        </div>
      </article>
    </div>

    <article class="approval-list panel">
      <header class="list-head">
        <h2>待审批列表</h2>
      </header>

      <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">
          <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 class="toolbar-actions">
          <button class="sort-btn" type="button">
            <i class="mdi mdi-sort"></i>
            <span>按提交时间</span>
            <i class="mdi mdi-chevron-down"></i>
          </button>
          <button class="export-btn" type="button">
            <i class="mdi mdi-download"></i>
            <span>导出</span>
          </button>
          <button class="return-btn" type="button">
            <i class="mdi mdi-undo"></i>
            <span>批量退回</span>
          </button>
          <button class="approve-btn" type="button">
            <i class="mdi mdi-check-circle"></i>
            <span>批量通过</span>
          </button>
        </div>
      </div>

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

      <div class="table-wrap">
        <table>
          <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 }">
              <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="更多操作">
                  <i class="mdi mdi-dots-horizontal"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <footer class="list-foot">
        <span class="page-summary">共 126 条，当前第 1 页</span>
        <div class="pager" aria-label="分页">
          <button class="page-nav" type="button" aria-label="上一页"><i class="mdi mdi-chevron-left"></i></button>
          <button class="page-number active" type="button" aria-current="page">1</button>
          <button class="page-number" type="button">2</button>
          <button class="page-number" type="button">3</button>
          <button class="page-number" type="button">4</button>
          <button class="page-number" type="button">5</button>
          <span>...</span>
          <button class="page-number" type="button">13</button>
          <button class="page-nav" type="button" aria-label="下一页"><i class="mdi mdi-chevron-right"></i></button>
        </div>
        <button class="page-size" type="button">10 条/页 <i class="mdi mdi-chevron-down"></i></button>
      </footer>
    </article>
  </section>
</template>

<script setup>
import { computed, ref } from 'vue'

const activeTab = ref('全部待审')
const tabs = ['全部待审', '高风险', '即将超时', '已处理']
const filters = ['法人主体', '费用类型', '风险等级', '金额区间', '所属部门']

const kpis = [
  { label: '待审批单据', value: 12, unit: '单', meta: '较昨日 +3', tone: 'up bad', trendIcon: 'mdi mdi-arrow-up', icon: 'mdi mdi-clipboard-text-outline', accent: '#059669' },
  { label: '高风险单据', value: 4, unit: '单', meta: '较昨日 +1', tone: 'up bad', trendIcon: 'mdi mdi-arrow-up', icon: 'mdi mdi-alert', accent: '#ef4444' },
  { label: '即将超时', value: 3, unit: '单', meta: '30 分钟内', tone: 'neutral', icon: 'mdi mdi-clock-outline', accent: '#f59e0b' },
  { label: '今日已处理', value: 28, unit: '单', meta: '通过率 86%', tone: 'good', icon: 'mdi mdi-check', accent: '#10b981' }
]

const rows = [
  { id: 'RE240712001', applicant: '李文静', avatar: '李', department: '市场部', type: '差旅报销', amount: '￥3,680', time: '07-12 09:20', risk: '中风险', riskTone: 'medium', sla: '4.2h', slaTone: 'safe', node: '财务审批', status: '待审批', statusTone: 'pending' },
  { id: 'RE240712002', applicant: '王志强', avatar: '王', department: '销售部', type: '招待费', amount: '￥1,280', time: '07-12 08:15', risk: '低风险', riskTone: 'low', sla: '8.5h', slaTone: 'safe', node: '部门负责人', status: '待审批', statusTone: 'pending' },
  { id: 'RE240711098', applicant: '刘思雨', avatar: '刘', department: '市场部', type: '差旅报销', amount: '￥6,920', time: '07-11 18:46', risk: '高风险', riskTone: 'high', sla: '0.8h', slaTone: 'danger', node: '财务审批', status: '即将超时', statusTone: 'urgent', spotlight: true },
  { id: 'RE240711087', applicant: '陈晓琳', avatar: '陈', department: '行政部', type: '办公采购', amount: '￥860', time: '07-11 17:32', risk: '低风险', riskTone: 'low', sla: '6.1h', slaTone: 'safe', node: '预算校验', status: '待审批', statusTone: 'pending' },
  { id: 'RE240711076', applicant: '赵明', avatar: '赵', department: '研发中心', type: '其他费用', amount: '￥4,250', time: '07-11 15:10', risk: '中风险', riskTone: 'medium', sla: '2.4h', slaTone: 'warning', node: '部门负责人', status: '待审批', statusTone: 'pending' },
  { id: 'RE240711065', applicant: '孙楠', avatar: '孙', department: '财务部', type: '招待费', amount: '￥560', time: '07-11 13:42', risk: '低风险', riskTone: 'low', sla: '5.7h', slaTone: 'safe', node: '财务审批', status: '待审批', statusTone: 'pending' },
  { id: 'RE240711054', applicant: '周晓彤', avatar: '周', department: '市场部', type: '办公采购', amount: '￥2,150', time: '07-11 11:28', risk: '中风险', riskTone: 'medium', sla: '1.9h', slaTone: 'warning', node: '预算校验', status: '即将超时', statusTone: 'urgent' },
  { id: 'RE240711043', applicant: '吴磊', avatar: '吴', department: '销售部', type: '其他费用', amount: '￥980', time: '07-11 09:05', risk: '低风险', riskTone: 'low', sla: '7.3h', slaTone: 'safe', node: '部门负责人', status: '待审批', statusTone: 'pending' }
]

const visibleRows = computed(() => {
  if (activeTab.value === '全部待审') return rows
  if (activeTab.value === '高风险') return rows.filter((row) => row.risk === '高风险')
  if (activeTab.value === '即将超时') return rows.filter((row) => row.status === '即将超时')
  return rows.slice(0, 3).map((row) => ({ ...row, status: '已处理', statusTone: 'done' }))
})
</script>

<style scoped>
.approval-page {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
  animation: fadeUp 220ms var(--ease) both;
}

.approval-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.approval-kpi {
  min-height: 96px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
}

.kpi-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, white);
  color: var(--accent);
  font-size: 22px;
}

.approval-kpi p {
  color: #334155;
  font-size: 14px;
  font-weight: 650;
}

.approval-kpi strong {
  display: block;
  margin-top: 5px;
  color: #0f172a;
  font-size: 26px;
  font-weight: 850;
  line-height: 1;
}

.approval-kpi small {
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
}

.approval-kpi span:not(.kpi-icon) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: #64748b;
  font-size: 14px;
}

.approval-kpi .bad i {
  color: #ef4444;
}

.approval-kpi .good {
  color: #059669 !important;
}

.approval-list {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  padding: 16px 18px;
  overflow: hidden;
}

.list-head h2 {
  color: #0f172a;
  font-size: 19px;
  font-weight: 850;
}

.status-tabs {
  display: flex;
  gap: 28px;
  margin-top: 14px;
  border-bottom: 1px solid #dbe4ee;
}

.status-tabs button {
  position: relative;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  font-weight: 750;
}

.status-tabs button.active {
  color: #059669;
}

.status-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: #10b981;
}

.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}

.filter-set,
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-btn,
.sort-btn,
.export-btn,
.return-btn,
.approve-btn,
.page-size {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
}

.filter-btn,
.sort-btn,
.export-btn,
.return-btn,
.page-size {
  border: 1px solid #d7e0ea;
  background: #fff;
  color: #334155;
}

.filter-btn {
  min-width: 104px;
  justify-content: space-between;
}

.sort-btn {
  min-width: 138px;
}

.approve-btn {
  border: 0;
  background: #059669;
  color: #fff;
  box-shadow: 0 8px 18px rgba(5, 150, 105, .18);
}

.approve-btn:hover {
  background: #047857;
}

.filter-btn:hover,
.sort-btn:hover,
.export-btn:hover,
.return-btn:hover,
.page-size:hover {
  border-color: rgba(16, 185, 129, .32);
  color: #0f9f78;
}

.hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: #64748b;
  font-size: 13px;
}

.table-wrap {
  min-height: 0;
  margin-top: 10px;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid #edf2f7;
  border-radius: 10px;
}

table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
}

th,
td {
  padding: 15px 12px;
  border-bottom: 1px solid #edf2f7;
  color: #24324a;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  vertical-align: middle;
}

th {
  background: #f7fafc;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

tbody tr {
  cursor: pointer;
}

tbody tr:hover,
tbody tr.spotlight {
  background: linear-gradient(90deg, rgba(16, 185, 129, .08), rgba(16, 185, 129, .03));
}

tbody tr:last-child td {
  border-bottom: 0;
}

.doc-id {
  color: #1d4ed8;
  font-weight: 800;
}

.person {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.avatar {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}

.risk-tag,
.status-tag {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.risk-tag.low {
  background: #dcfce7;
  color: #059669;
}

.risk-tag.medium {
  background: #ffedd5;
  color: #f97316;
}

.risk-tag.high {
  background: #fee2e2;
  color: #ef4444;
}

.sla {
  font-size: 13px;
  font-weight: 850;
}

.sla.safe {
  color: #059669;
}

.sla.warning {
  color: #f97316;
}

.sla.danger {
  color: #ef4444;
}

.status-tag.pending {
  background: #eff6ff;
  color: #2563eb;
}

.status-tag.urgent {
  background: #fff7ed;
  color: #f97316;
}

.status-tag.done {
  background: #ecfdf5;
  color: #059669;
}

.more-btn {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #2563eb;
  font-size: 13px;
  font-weight: 800;
}

.more-btn:hover {
  color: #059669;
}

.list-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.page-summary {
  color: #64748b;
  font-size: 14px;
  font-weight: 650;
}

.pager {
  display: inline-flex;
  justify-content: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.pager button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #334155;
  font-size: 14px;
  font-weight: 800;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.pager button:hover:not(.active) {
  background: #fff;
  color: #059669;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}

.pager button.active {
  background: #059669;
  color: #fff;
  box-shadow: 0 8px 16px rgba(5, 150, 105, .20);
}

.pager span {
  color: #64748b;
  font-weight: 800;
}

.page-size {
  justify-self: end;
  min-width: 112px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

@media (max-width: 1320px) {
  .approval-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .list-toolbar,
  .list-foot {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .approval-kpis {
    grid-template-columns: 1fr;
  }

  .approval-list,
  .approval-kpi {
    padding: 16px;
  }

  .status-tabs {
    gap: 18px;
    overflow-x: auto;
  }

  .filter-set,
  .toolbar-actions {
    width: 100%;
  }

  .filter-btn,
  .sort-btn,
  .export-btn,
  .return-btn,
  .approve-btn,
  .page-size {
    width: 100%;
  }

  .list-foot {
    justify-items: stretch;
  }

  .pager,
  .page-size {
    justify-self: stretch;
  }
}
</style>