From 9e61163fa227c038fc25492a5fd2e3b6d7dddcdb Mon Sep 17 00:00:00 2001
From: "WIN-JHFT4D3SIVT\\caoxiaozhu" <leocaoxiaozhu@163.com>
Date: Thu, 30 Apr 2026 17:10:47 +0800
Subject: [PATCH] feat: redesign RequestsView with travel expense table, KPIs
 and pagination

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/views/RequestsView.vue | 545 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 539 insertions(+), 6 deletions(-)

diff --git a/src/views/RequestsView.vue b/src/views/RequestsView.vue
index 53d4ca4..fe2081b 100644
--- a/src/views/RequestsView.vue
+++ b/src/views/RequestsView.vue
@@ -1,20 +1,553 @@
 <template>
-  <section class="view single">
-    <RequestTable :requests="filteredRequests" expanded @ask="emit('ask', $event)" @approve="emit('approve', $event)" @reject="emit('reject', $event)" />
+  <section class="travel-page">
+    <div class="travel-kpis">
+      <article v-for="item in kpis" :key="item.label" class="travel-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>单</small></strong>
+          <span :class="item.trend">较上月 {{ item.delta }} <i :class="item.arrow"></i></span>
+        </div>
+      </article>
+    </div>
+
+    <article class="travel-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="filter === '出差月份' ? 'pi pi-calendar' : 'pi pi-angle-down'"></i>
+          </button>
+        </div>
+
+        <div class="toolbar-actions">
+          <button class="export-btn" type="button">
+            <i class="pi pi-upload"></i>
+            <span>导出</span>
+          </button>
+          <button class="create-btn" type="button" @click="emit('createRequest')">
+            <i class="pi pi-plus"></i>
+            <span>发起报销</span>
+          </button>
+        </div>
+      </div>
+
+      <p class="hint"><i class="pi pi-info-circle"></i> 点击任意行可查看单据详情</p>
+
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>单号</th>
+              <th>出差事由</th>
+              <th>出差城市</th>
+              <th>出差时间</th>
+              <th>申请金额</th>
+              <th>当前节点</th>
+              <th>审批状态</th>
+              <th>商旅状态</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in visibleRows" :key="row.id" @click="emit('ask', row)">
+              <td><strong class="doc-id">{{ row.id }}</strong></td>
+              <td>{{ row.reason }}</td>
+              <td>{{ row.city }}</td>
+              <td>{{ row.period }}</td>
+              <td>{{ row.amount }}</td>
+              <td>{{ row.node }}</td>
+              <td><span class="status-tag" :class="row.approvalTone">{{ row.approval }}</span></td>
+              <td><span class="status-tag" :class="row.travelTone">{{ row.travel }}</span></td>
+              <td>
+                <div class="row-actions">
+                  <button type="button" @click.stop="emit('ask', row)">查看</button>
+                  <button type="button" aria-label="更多操作" @click.stop>
+                    <i class="pi pi-ellipsis-h"></i>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <footer class="list-foot">
+        <span class="page-summary">共 26 条，目前第 1 页</span>
+        <div class="pager" aria-label="分页">
+          <button class="page-nav" type="button" aria-label="上一页"><i class="pi pi-angle-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-nav" type="button" aria-label="下一页"><i class="pi pi-angle-right"></i></button>
+        </div>
+        <button class="page-size" type="button">10 条/页 <i class="pi pi-angle-down"></i></button>
+      </footer>
+    </article>
   </section>
 </template>
 
 <script setup>
-import RequestTable from '../components/business/RequestTable.vue'
+import { computed, ref } from 'vue'
 
 defineProps({
   filteredRequests: { type: Array, required: true }
 })
 
-const emit = defineEmits(['ask', 'approve', 'reject'])
+const emit = defineEmits(['ask', 'approve', 'reject', 'createRequest'])
+
+const activeTab = ref('全部')
+const tabs = ['全部', '待提交', '审批中', '待出行', '已完成']
+const filters = ['出差月份', '报销状态', '出差城市', '费用类型']
+
+const kpis = [
+  { label: '全部单据', value: 26, delta: '+8', trend: 'up good', arrow: 'pi pi-arrow-up', icon: 'pi pi-clipboard', accent: '#10b981' },
+  { label: '待提交', value: 4, delta: '-1', trend: 'down good', arrow: 'pi pi-arrow-down', icon: 'pi pi-send', accent: '#f59e0b' },
+  { label: '审批中', value: 7, delta: '+2', trend: 'up bad', arrow: 'pi pi-arrow-up', icon: 'pi pi-clock', accent: '#3b82f6' },
+  { label: '已完成', value: 15, delta: '+7', trend: 'up good', arrow: 'pi pi-arrow-up', icon: 'pi pi-check', accent: '#10b981' }
+]
+
+const rows = [
+  { id: 'BR240712001', reason: '华东区域客户拜访', city: '上海、苏州、杭州', period: '07-08~07-11 (4天)', amount: '￥3,680.00', node: '部门负责人审批', approval: '审批中', approvalTone: 'info', travel: '已订酒店/机票', travelTone: 'success' },
+  { id: 'BR240711008', reason: '产品培训与交流', city: '深圳', period: '07-10~07-12 (3天)', amount: '￥2,150.00', node: '待提交', approval: '待提交', approvalTone: 'info', travel: '待订机票', travelTone: 'warning' },
+  { id: 'BR240709005', reason: '客户方案汇报', city: '北京', period: '07-06~07-08 (3天)', amount: '￥1,980.00', node: '财务审核', approval: '审批中', approvalTone: 'info', travel: '已订酒店/机票', travelTone: 'success' },
+  { id: 'BR240708012', reason: '供应商现场考察', city: '广州', period: '07-04~07-05 (2天)', amount: '￥860.00', node: '部门负责人审批', approval: '审批中', approvalTone: 'info', travel: '无需预订', travelTone: 'neutral' },
+  { id: 'BR240707003', reason: '项目启动会', city: '成都', period: '07-01~07-03 (3天)', amount: '￥2,420.00', node: '财务审核', approval: '审批中', approvalTone: 'info', travel: '待预订酒店', travelTone: 'warning' },
+  { id: 'BR240706009', reason: '客户拜访与市场调研', city: '南京、合肥', period: '06-28~06-30 (3天)', amount: '￥1,750.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
+  { id: 'BR240705007', reason: '技术交流会', city: '武汉', period: '06-25~06-26 (2天)', amount: '￥1,120.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '无需预订', travelTone: 'neutral' },
+  { id: 'BR240704004', reason: '渠道合作洽谈', city: '西安', period: '06-20~06-21 (2天)', amount: '￥780.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' }
+]
+
+const visibleRows = computed(() => {
+  if (activeTab.value === '全部') return rows
+  return rows.filter((row) => row.approval === activeTab.value || row.travel.includes(activeTab.value.replace('待出行', '待订')))
+})
 </script>
 
 <style scoped>
-.view { display: grid; gap: 22px; animation: fadeUp 220ms var(--ease) both; }
-.view.single { max-width: 1120px; }
+.travel-page {
+  height: 100%;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 14px;
+  animation: fadeUp 220ms var(--ease) both;
+  overflow: hidden;
+}
+
+.travel-kpis {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.travel-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;
+}
+
+.travel-kpi p {
+  color: #334155;
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.travel-kpi strong {
+  display: block;
+  margin-top: 5px;
+  color: #0f172a;
+  font-size: 26px;
+  font-weight: 850;
+  line-height: 1;
+}
+
+.travel-kpi small {
+  color: #0f172a;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.travel-kpi span:not(.kpi-icon) {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 7px;
+  color: #64748b;
+  font-size: 14px;
+}
+
+.travel-kpi .good i {
+  color: #059669;
+}
+
+.travel-kpi .bad i {
+  color: #ef4444;
+}
+
+.travel-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,
+.export-btn,
+.create-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,
+.export-btn,
+.page-size {
+  border: 1px solid #d7e0ea;
+  background: #fff;
+  color: #334155;
+}
+
+.filter-btn {
+  min-width: 132px;
+  justify-content: space-between;
+}
+
+.filter-btn:hover,
+.export-btn:hover,
+.page-size:hover {
+  border-color: rgba(16, 185, 129, .32);
+  color: #0f9f78;
+}
+
+.create-btn {
+  border: 0;
+  background: #059669;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(5, 150, 105, .18);
+}
+
+.create-btn:hover {
+  background: #047857;
+}
+
+.hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  margin-top: 10px;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.hint .pi {
+  color: #64748b;
+}
+
+.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: 1040px;
+  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:nth-child(2) {
+  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: #059669;
+  font-weight: 800;
+}
+
+.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;
+}
+
+.status-tag.info {
+  border-color: #bfdbfe;
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.status-tag.success {
+  border-color: #bbf7d0;
+  background: #ecfdf5;
+  color: #059669;
+}
+
+.status-tag.warning {
+  border-color: #fed7aa;
+  background: #fff7ed;
+  color: #f97316;
+}
+
+.status-tag.neutral {
+  border-color: #cbd5e1;
+  background: #f8fafc;
+  color: #475569;
+}
+
+.row-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.row-actions button {
+  border: 0;
+  background: transparent;
+  color: #2563eb;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.row-actions button: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);
+}
+
+.page-nav {
+  color: #64748b;
+}
+
+.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: 1200px) {
+  .travel-kpis {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .list-toolbar,
+  .list-foot {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 760px) {
+  .travel-kpis {
+    grid-template-columns: 1fr;
+  }
+
+  .travel-list,
+  .travel-kpi {
+    padding: 16px;
+  }
+
+  .status-tabs {
+    gap: 18px;
+    overflow-x: auto;
+  }
+
+  .filter-btn,
+  .export-btn,
+  .create-btn,
+  .page-size {
+    width: 100%;
+  }
+
+  .toolbar-actions,
+  .filter-set {
+    width: 100%;
+  }
+
+  .list-foot {
+    display: grid;
+    justify-items: stretch;
+  }
+
+  .pager,
+  .page-size {
+    justify-self: stretch;
+  }
+}
 </style>