feat(finance): 添加退款审批功能并优化应付详情页面

- 新增退款详情页面，支持退款单信息展示和审批操作
- 添加退款相关API接口，包括退款列表和详情获取
- 在finance store中添加退款相关的状态管理和数据加载功能
- 优化应付详情页面的代码格式和结构
- 调整字典数据加载的字段名称，统一使用下划线格式
- 增加应付单详情中本次付款金额的显示
- 修复页面样式和组件布局问题

src/api/finance.ts

@@ -0,0 +1,55 @@
+import http from '@/utils/http'
+import type { ApiResponse, FinancePayable, FinancePayableListParams } from '@/types'
+import type { AxiosResponse } from 'axios'
+
+/**
+ * 获取应付审批列表
+ */
+export const getPayableList = (params: FinancePayableListParams): Promise<AxiosResponse<ApiResponse<{
+    total: number
+    rows: FinancePayable[]
+}>>> => {
+    // 使用 FormData 传递参数
+    const formData = new FormData()
+    formData.append('pageNum', params.pageNum.toString())
+    formData.append('pageSize', params.pageSize.toString())
+    formData.append('processKey', params.processKey)
+    
+    // 如果有其他参数，也可以追加
+    if (params.keyword) {
+        // 虽然prompt没 explicitly ask for keyword search in the list params beyond page/processKey, 
+        // usually search is needed. But strict adherence to prompt: "参数为分页参数pageNum 和pageSize processKey:finance_payment"
+        // I will adhere to prompt strict parameters for now.
+    }
+
+    return http.post('/finance/payment/approve/list', formData)
+}
+
+/**
+ * 获取应付审批详情
+ */
+export const getPayableDetail = (paymentBillCode: string | number): Promise<AxiosResponse<ApiResponse<any>>> => {
+    return http.get(`/finance/payment/code/${paymentBillCode}`)
+}
+
+/**
+ * 获取退款审批列表
+ */
+export const getReceiveList = (params: FinancePayableListParams): Promise<AxiosResponse<ApiResponse<{
+    total: number
+    rows: any[] // 使用 generic any 或 FinanceReceive
+}>>> => {
+    const formData = new FormData()
+    formData.append('pageNum', params.pageNum.toString())
+    formData.append('pageSize', params.pageSize.toString())
+    formData.append('processKey', params.processKey)
+    
+    return http.post('/finance/receipt/approve/list', formData)
+}
+
+/**
+ * 获取退款审批详情
+ */
+export const getReceiveDetail = (code: string | number): Promise<AxiosResponse<ApiResponse<any>>> => {
+    return http.get(`/finance/receipt/code/${code}`)
+}

src/api/system.ts

@@ -0,0 +1,25 @@
+import http from '@/utils/http'
+import type { ApiResponse } from '@/types'
+import type { AxiosResponse } from 'axios'
+
+export interface DictData {
+  dictCode: number
+  dictSort: number
+  dictLabel: string
+  dictValue: string
+  dictType: string
+  cssClass: string
+  listClass: string
+  isDefault: string
+  status: string
+  default: boolean
+  remark?: string
+}
+
+/**
+ * 根据字典类型查询字典数据信息
+ * @param dictType 字典类型
+ */
+export const getDicts = (dictType: string): Promise<AxiosResponse<ApiResponse<DictData[]>>> => {
+  return http.get(`/system/dict/data/type/${dictType}`)
+}

src/api/todo.ts

@@ -0,0 +1,17 @@
+import http from '@/utils/http'
+import type { ApiResponse } from '@/types'
+import type { AxiosResponse } from 'axios'
+
+export interface TodoStatistics {
+  purchase_order_online: number
+  order_approve: number
+  finance_payment: number
+  finance_receipt_refound: number
+}
+
+/**
+ * 获取待办事项统计
+ */
+export const getTodoStatistics = (): Promise<AxiosResponse<ApiResponse<TodoStatistics>>> => {
+  return http.get('/flow/todo/statistics')
+}

src/router/index.ts

@@ -52,6 +52,15 @@ const routes: RouteRecordRaw[] = [
       title: '应付详情',
       requiresAuth: true
     }
+  },
+  {
+    path: '/finance/receive/detail/:code',
+    name: 'FinanceReceiveDetail',
+    component: () => import('@/views/finance/receive/detail.vue'),
+    meta: {
+      title: '退款详情',
+      requiresAuth: true
+    }
   }
 ]
 

src/store/finance.ts

@@ -31,6 +31,15 @@ export const useFinanceStore = defineStore('finance', () => {
   const currentPayableTodo = ref<any>(null)
   const detailLoading = ref(false)
 
+  // Receive State
+  const receiveList = ref<any[]>([])
+  const receiveLoading = ref(false)
+  const receiveFinished = ref(false)
+  const receivePage = ref(1)
+  const receiveTotal = ref(0)
+  const currentReceive = ref<any>({})
+  const currentReceiveTodo = ref<any>(null)
+
   // Actions
   const loadPayableList = async (refresh = false) => {
     if (refresh) {
@@ -71,7 +80,47 @@ export const useFinanceStore = defineStore('finance', () => {
     }
   }
 
-  const loadCompletedList = async (refresh = false) => {
+  const loadReceiveList = async (refresh = false) => {
+    if (refresh) {
+      receivePage.value = 1
+      receiveFinished.value = false
+      receiveList.value = []
+    }
+
+    receiveLoading.value = true
+    try {
+      const { getReceiveList } = await import('@/api/finance')
+      const res = await getReceiveList({
+        pageNum: receivePage.value,
+        pageSize: pageSize.value, // reusing pageSize from payable or create new? reusing is fine for now
+        processKey: 'finance_receipt_refound'
+      })
+
+      if (res.data.code === 0) {
+        const rows = res.data.rows || []
+        
+        if (refresh) {
+          receiveList.value = rows
+        } else {
+          receiveList.value = [...receiveList.value, ...rows]
+        }
+
+        receiveTotal.value = res.data.total || 0
+        if (receiveList.value.length >= receiveTotal.value || rows.length < pageSize.value) {
+          receiveFinished.value = true
+        } else {
+          receivePage.value++
+        }
+      }
+    } catch (error) {
+      console.error('Failed to load receive list', error)
+      receiveFinished.value = true
+    } finally {
+      receiveLoading.value = false
+    }
+  }
+
+  const loadCompletedList = async (refresh = false, processKey = 'finance_payment') => {
       if (refresh) {
           completedPage.value = 1
           completedFinished.value = false
@@ -83,7 +132,7 @@ export const useFinanceStore = defineStore('finance', () => {
           const formData = new FormData()
           formData.append('page', completedPage.value.toString())
           formData.append('pageSize', completedPageSize.value.toString())
-          formData.append('processKeyList', 'finance_payment') 
+          formData.append('processKeyList', processKey) 
           
           const res = await http.post('/flow/completed/list', formData)
 
@@ -133,11 +182,34 @@ export const useFinanceStore = defineStore('finance', () => {
       }
   }
 
+  const fetchReceiveDetail = async (id: string | number) => {
+      detailLoading.value = true
+      try {
+          const { getReceiveDetail } = await import('@/api/finance')
+          const res = await getReceiveDetail(id)
+          if (res.data.code === 0) {
+              currentReceive.value = res.data.data || res.data.rows || {}
+              if (res.data.data?.todo) {
+                  currentReceiveTodo.value = res.data.data.todo
+              }
+          }
+      } catch (error) {
+          console.error('Failed to load receive detail', error)
+      } finally {
+          detailLoading.value = false
+      }
+  }
+
   const resetState = () => {
       page.value = 1
       payableList.value = []
       finished.value = false
       loading.value = false
+      
+      receivePage.value = 1
+      receiveList.value = []
+      receiveFinished.value = false
+      receiveLoading.value = false
   }
 
   return {
@@ -153,6 +225,13 @@ export const useFinanceStore = defineStore('finance', () => {
     currentPayableTodo,
     detailLoading,
     fetchPayableDetail,
+    receiveList,
+    receiveLoading,
+    receiveFinished,
+    loadReceiveList,
+    currentReceive,
+    currentReceiveTodo,
+    fetchReceiveDetail,
     resetState
   }
 })

src/types/index.ts

@@ -343,3 +343,25 @@ export interface FinancePayableListParams {
     processKey: string
     [key: string]: any
 }
+
+export interface FinanceReceive {
+    receiptBillCode: string // 退款单编号
+    partnerName: string // 客户名称
+    totalPriceWithTax: number // 退款金额
+    applyTime: string // 申请时间
+    
+    // Detail fields
+    refundReason?: string // 退款原因
+    refundMethod?: string // 退款方式
+    bankAccount?: string // 银行账号
+    bankName?: string // 银行名称
+    
+    [key: string]: any
+}
+
+export interface FinanceReceiveListParams {
+    pageNum: number
+    pageSize: number
+    processKey: string
+    [key: string]: any
+}

src/views/Home/index.vue

@@ -61,6 +61,9 @@
 
       <!-- 应付审批 -->
       <FinancePayableList v-if="currentMenu === 'finance_payment'" />
+
+      <!-- 应收-退款审批 -->
+      <FinanceReceiveList v-if="currentMenu === 'finance_receipt_refound'" />
     </div>
   </div>
 </template>
@@ -75,6 +78,7 @@ import { storeToRefs } from 'pinia'
 import OrderList from '@/views/List/index.vue'
 import PurchaseList from '@/views/Purchase/index.vue'
 import FinancePayableList from '@/views/finance/payable/index.vue'
+import FinanceReceiveList from '@/views/finance/receive/index.vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -107,6 +111,12 @@ const menuList = computed(() => [
     title: '应付审批',
     icon: 'gold-coin-o',
     count: statistics.value?.finance_payment || 0
+  },
+  {
+    key: 'finance_receipt_refound',
+    title: '应收-退款审批',
+    icon: 'refund-o',
+    count: statistics.value?.finance_receipt_refound || 0
   }
 ])
 
@@ -126,7 +136,7 @@ const selectMenu = (key: string) => {
 onMounted(() => {
   todoStore.fetchTodoStatistics()
   const tab = route.query.tab as string
-  if (tab && ['order', 'purchase', 'finance_payment'].includes(tab)) {
+  if (tab && ['order', 'purchase', 'finance_payment', 'finance_receipt_refound'].includes(tab)) {
     currentMenu.value = tab
   }
 })

src/views/finance/payable/detail.vue

@@ -84,10 +84,14 @@
                   class="detail-item"
               >
                 <div class="item-header">
-                            <span class="code">{{ item.payableBillCode }}</span>
+                  <span class="code">应付单信息</span>
                   <span class="amount">{{ formatAmount(item.paymentAmount) }}</span>
                 </div>
                 <div class="item-body">
+                  <div class="info-row">
+                    <span class="label">应付单编号：</span>
+                    <span class="value">{{ item.payableBillCode }}</span>
+                  </div>
                   <div class="info-row">
                     <span class="label">项目名称：</span>
                     <span class="value">{{ item.projectName }}</span>
@@ -95,10 +99,15 @@
                   <div class="info-row">
                     <span class="label">产品类型：</span>
                     <span class="value">{{ formatDictLabel(productTypeOptions, item.productType) }}</span>
-                                                        </div>                            <div class="info-row">
+                  </div>
+                  <div class="info-row">
                     <span class="label">含税总价：</span>
                     <span class="value">{{ formatAmount(item.totalPriceWithTax) }}</span>
                   </div>
+                  <div class="info-row">
+                    <span class="label">本次付款金额：</span>
+                    <span class="value">{{ formatAmount(item.paymentAmount) }}</span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -198,8 +207,8 @@ const formatDictLabel = (datas: DictData[], value: string | undefined) => {
 const loadDicts = async () => {
   try {
     const [paymentRes, productRes] = await Promise.all([
-            getDicts('paymentMethod'),
+      getDicts('payment_method'),
-            getDicts('productType')
+      getDicts('product_type')
     ])
 
     if (paymentRes.data.code === 0) {
@@ -295,10 +304,12 @@ onMounted(() => {
   background: #f5f5f5;
   padding-bottom: 80px;
 }
+
 .loading-container {
   text-align: center;
   padding: 50px;
 }
+
 .header-info {
   background: #fff;
   padding: 16px;
@@ -316,10 +327,19 @@ onMounted(() => {
     padding: 4px 12px;
     border-radius: 4px;
     font-size: 12px;
-        &.pending { background: #fff7e6; color: #fa8c16; }
+
-        &.completed { background: #f6ffed; color: #52c41a; }
+    &.pending {
+      background: #fff7e6;
+      color: #fa8c16;
+    }
+
+    &.completed {
+      background: #f6ffed;
+      color: #52c41a;
     }
   }
+}
+
 .info-card {
   background: #fff;
   margin: 12px 0;
@@ -338,9 +358,23 @@ onMounted(() => {
     margin-bottom: 12px;
     font-size: 14px;
 
-        .label { color: #666; width: 100px; flex-shrink: 0;}
+    .label {
-        .value { flex: 1; color: #333; word-break: break-all; text-align: right;}
+      color: #666;
-        .amount { color: #f5222d; font-weight: 500; }
+      width: 100px;
+      flex-shrink: 0;
+    }
+
+    .value {
+      flex: 1;
+      color: #333;
+      word-break: break-all;
+      text-align: right;
+    }
+
+    .amount {
+      color: #f5222d;
+      font-weight: 500;
+    }
   }
 }
 
@@ -360,8 +394,15 @@ onMounted(() => {
       padding-bottom: 8px;
       margin-bottom: 8px;
 
-            .code { font-weight: 600; font-size: 15px;}
+      .code {
-            .amount { color: #f5222d; font-weight: 500; }
+        font-weight: 600;
+        font-size: 15px;
+      }
+
+      .amount {
+        color: #f5222d;
+        font-weight: 500;
+      }
     }
 
     .item-body {
@@ -370,8 +411,16 @@ onMounted(() => {
         margin-bottom: 6px;
         font-size: 13px;
 
-                .label { color: #666; width: 80px;}
+        .label {
-                .value { flex: 1; color: #333; word-break: break-all;}
+          color: #666;
+          width: 150px;
+        }
+
+        .value {
+          flex: 1;
+          color: #333;
+          word-break: break-all;
+        }
       }
     }
   }
@@ -389,8 +438,10 @@ onMounted(() => {
   gap: 16px;
   z-index: 99;
 }
+
 .dialog-content {
   padding: 16px;
+
   .dialog-header {
     display: flex;
     justify-content: space-between;
@@ -398,6 +449,7 @@ onMounted(() => {
     font-size: 16px;
     font-weight: 600;
   }
+
   .dialog-footer {
     margin-top: 16px;
   }

src/views/finance/receive/detail.vue

@@ -0,0 +1,433 @@
+<template>
+  <div class="receive-detail-page">
+    <van-nav-bar
+      title="退款详情"
+      left-arrow
+      @click-left="goBack"
+    />
+
+    <van-loading v-if="detailLoading" class="loading-container" size="24px">
+      加载中...
+    </van-loading>
+
+    <div v-else class="page-content">
+      <div class="header-info">
+        <div class="title">{{ currentReceive.receiptBillCode || '未知编号' }}</div>
+        <div class="status-badge" :class="isReadOnly ? 'completed' : 'pending'">
+            {{ isReadOnly ? '已审批' : '待审批' }}
+        </div>
+      </div>
+
+      <van-tabs v-model:active="activeTab" sticky>
+        <!-- Tab 1: 退款信息 -->
+        <van-tab title="退款信息" name="info">
+          <div class="info-card">
+            <div class="card-title">基本信息</div>
+            <div class="info-row">
+                <span class="label">收款单编号</span>
+                <span class="value">{{ currentReceive.receiptBillCode }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">进货商名称</span>
+                <span class="value">{{ currentReceive.partnerName }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">含税总价(元)</span>
+                <span class="value amount">{{ formatAmount(currentReceive.totalPriceWithTax) }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">未税总价(元)</span>
+                <span class="value amount">{{ formatAmount(currentReceive.totalPriceWithoutTax) }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">税额</span>
+                <span class="value amount">{{ formatAmount(currentReceive.taxAmount) }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">支付方式</span>
+                <span class="value">{{ formatDictLabel(paymentMethodOptions, currentReceive.receiptMethod) }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">银行账号</span>
+                <span class="value">{{ currentReceive.receiptBankNumber }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">账户名称</span>
+                <span class="value">{{ currentReceive.receiptAccountName }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">银行开户行</span>
+                <span class="value">{{ currentReceive.receiptBankOpenAddress }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">银行行号</span>
+                <span class="value">{{ currentReceive.bankNumber }}</span>
+            </div>
+          </div>
+        </van-tab>
+
+        <!-- Tab 2: 关联单据 (if any, keeping structure flexible) -->
+        <!-- Maybe list of items being refunded? -->
+        <van-tab title="应收单信息" name="list">
+             <div class="detail-list-container">
+                <div v-if="currentReceive.detailDTOList && currentReceive.detailDTOList.length > 0">
+                    <div 
+                        v-for="(item, index) in currentReceive.detailDTOList"
+                        :key="index"
+                        class="detail-item"
+                    >
+                         <!-- Assuming some fields for refund details -->
+                        <div class="item-header">
+                            <span class="code"> 应收单信息 </span>
+                             <span class="amount">{{ formatAmount(item.receiptAmount) }}</span>
+                        </div>
+                        <div class="item-body">
+                             <div class="info-row">
+                                <span class="label">应收单编号：</span>
+                                <span class="value">{{ item.receivableBillCode }}</span>
+                            </div>
+                            <div class="info-row">
+                                <span class="label">项目名称：</span>
+                                <span class="value">{{ item.projectName }}</span>
+                            </div>
+                          <div class="info-row">
+                                <span class="label">产品类型：</span>
+                                <span class="value">{{  formatDictLabel(productTypeOptions, item.productType) }}</span>
+                            </div>
+                          <div class="info-row">
+                                <span class="label">含税总价：</span>
+                                <span class="value amount">{{ formatAmount(item.totalPriceWithTax) }}</span>
+                            </div>
+                          <div class="info-row">
+                                <span class="label">本次收款金额：</span>
+                                <span class="value amount">{{ formatAmount(item.receiptAmount) }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <van-empty v-else description="暂无明细数据" />
+            </div>
+        </van-tab>
+      </van-tabs>
+
+      <!-- Approval Action Bar -->
+      <div v-if="!isReadOnly" class="action-bar">
+          <van-button type="danger" block plain @click="showApprovalDialog(0)">驳回</van-button>
+          <van-button type="primary" block @click="showApprovalDialog(1)">通过</van-button>
+      </div>
+    </div>
+    
+    <!-- Approval Dialog -->
+    <van-popup v-model:show="showDialog" position="bottom" round>
+        <div class="dialog-content">
+            <div class="dialog-header">
+                <span>{{ actionType === 1 ? '审批通过' : '审批驳回' }}</span>
+                <van-icon name="cross" @click="showDialog = false" />
+            </div>
+            <div class="dialog-body">
+                <!-- 默认意见标签 -->
+                <div class="opinion-tags">
+                    <div class="tags-title">常用意见</div>
+                    <div class="tags-container">
+                        <van-tag
+                            v-for="tag in getOpinionTags()"
+                            :key="tag"
+                            :type="selectedTag === tag ? 'primary' : 'default'"
+                            size="medium"
+                            @click="selectTag(tag)"
+                            class="opinion-tag"
+                        >
+                            {{ tag }}
+                        </van-tag>
+                    </div>
+                </div>
+
+                <van-field
+                    v-model="comment"
+                    rows="3"
+                    autosize
+                    type="textarea"
+                    placeholder="请输入审批意见"
+                />
+            </div>
+            <div class="dialog-footer">
+                <van-button block type="primary" :loading="submitting" @click="submit">
+                    提交
+                </van-button>
+            </div>
+        </div>
+    </van-popup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { storeToRefs } from 'pinia'
+import { useFinanceStore } from '@/store/finance'
+import { formatAmount } from '@/utils'
+import { showToast, showSuccessToast } from 'vant'
+import http from '@/utils/http'
+import { getDicts, type DictData } from '@/api/system'
+
+const route = useRoute()
+const router = useRouter()
+const financeStore = useFinanceStore()
+const { currentReceive, currentReceiveTodo, detailLoading } = storeToRefs(financeStore)
+
+const activeTab = ref('info')
+const showDialog = ref(false)
+const actionType = ref(1) // 1: pass, 0: reject
+const comment = ref('')
+const submitting = ref(false)
+const selectedTag = ref('')
+
+const paymentMethodOptions = ref<DictData[]>([])
+const productTypeOptions = ref<DictData[]>([])
+const isReadOnly = computed(() => route.query.readonly === 'true')
+
+const goBack = () => {
+    router.back()
+}
+
+// 字典翻译
+const formatDictLabel = (datas: DictData[], value: string | undefined) => {
+    if (!value) return ''
+    const action = datas.find(d => d.dictValue === value)
+    return action ? action.dictLabel : value
+}
+
+const loadDicts = async () => {
+    try {
+        const [paymentRes, productRes] = await Promise.all([
+            getDicts('payment_method'),
+            getDicts('product_type')
+        ])
+
+      if (paymentRes.data.code === 0) {
+        paymentMethodOptions.value = paymentRes.data.data || []
+      }
+      if (productRes.data.code === 0) {
+        productTypeOptions.value = productRes.data.data || []
+      }
+    } catch (error) {
+        console.error('加载字典数据失败', error)
+    }
+}
+
+const showApprovalDialog = (type: number) => {
+    actionType.value = type
+    comment.value = '' 
+    selectedTag.value = ''
+    showDialog.value = true
+}
+
+// 获取默认意见标签
+const getOpinionTags = () => {
+  if (actionType.value === 0) {
+    return ['经审查有问题,驳回']
+  } else {
+    return ['所有信息已阅,审核通过']
+  }
+}
+
+// 选择标签
+const selectTag = (tag: string) => {
+  if (selectedTag.value === tag) {
+    selectedTag.value = ''
+    comment.value = ''
+  } else {
+    selectedTag.value = tag
+    comment.value = tag
+  }
+}
+
+const submit = async () => {
+    if (!comment.value && actionType.value === 0) {
+        showToast('请输入驳回意见')
+        return
+    }
+    
+    const taskId = (route.query.taskId as string) || currentReceiveTodo.value?.taskId;
+    
+    if (!taskId && !isReadOnly.value) {
+        showToast('无法获取审批任务ID')
+        return
+    }
+
+    submitting.value = true
+    try {
+        await http.post('/flow/todo/approve', {
+            taskId: taskId,
+            processKey: 'finance_receipt_refound',
+            businessKey: currentReceive.value.receiptBillCode,
+            variables: {
+                approveBtn: actionType.value,
+                comment: comment.value
+            }
+        })
+        showSuccessToast('审批成功')
+        showDialog.value = false
+        router.back()
+    } catch (e) {
+        console.error(e)
+        showToast('审批失败')
+    } finally {
+        submitting.value = false
+    }
+}
+
+onMounted(() => {
+    const code = route.params.code
+    if (code) {
+        financeStore.fetchReceiveDetail(code as string)
+    }
+    loadDicts()
+})
+</script>
+
+<style lang="scss" scoped>
+.receive-detail-page {
+    min-height: 100vh;
+    background: #f5f5f5;
+    padding-bottom: 80px;
+}
+.loading-container {
+    text-align: center;
+    padding: 50px;
+}
+.header-info {
+    background: #fff;
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #eee;
+    
+    .title {
+        font-size: 18px;
+        font-weight: 600;
+    }
+    
+    .status-badge {
+        padding: 4px 12px;
+        border-radius: 4px;
+        font-size: 12px;
+        &.pending { background: #fff7e6; color: #fa8c16; }
+        &.completed { background: #f6ffed; color: #52c41a; }
+    }
+}
+.info-card {
+    background: #fff;
+    margin: 12px 0;
+    padding: 16px;
+    
+    .card-title {
+        font-size: 16px;
+        font-weight: 600;
+        margin-bottom: 12px;
+        border-left: 4px solid #1989fa;
+        padding-left: 8px;
+    }
+    
+    .info-row {
+        display: flex;
+        margin-bottom: 12px;
+        font-size: 14px;
+        
+        .label { color: #666; width: 150px; flex-shrink: 0;}
+        .value { flex: 1; color: #333; word-break: break-all; text-align: right;}
+        .amount { color: #f5222d; font-weight: 500; }
+    }
+}
+
+.detail-list-container {
+    padding: 12px;
+    
+    .detail-item {
+        background: #fff;
+        border-radius: 8px;
+        padding: 12px;
+        margin-bottom: 12px;
+        
+        .item-header {
+            display: flex;
+            justify-content: space-between;
+            border-bottom: 1px solid #f0f0f0;
+            padding-bottom: 8px;
+            margin-bottom: 8px;
+            
+            .code { font-weight: 600; font-size: 15px;}
+            .amount { color: #f5222d; font-weight: 500; }
+        }
+        
+        .item-body {
+            .info-row {
+                display: flex;
+                margin-bottom: 6px;
+                font-size: 13px;
+                
+                .label { color: #666; width: 150px;}
+                .value { flex: 1; color: #333; word-break: break-all;}
+            }
+        }
+    }
+}
+
+.action-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 12px 16px;
+    background: #fff;
+    box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
+    display: flex;
+    gap: 16px;
+    z-index: 99;
+}
+.dialog-content {
+    padding: 16px;
+    .dialog-header {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 16px;
+        font-size: 16px;
+        font-weight: 600;
+    }
+    .dialog-footer {
+        margin-top: 16px;
+    }
+}
+
+.opinion-tags {
+  margin-bottom: 12px;
+
+  .tags-title {
+    font-size: 14px;
+    color: #999;
+    margin-bottom: 8px;
+    font-weight: 500;
+  }
+
+  .tags-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    .opinion-tag {
+      cursor: pointer;
+      padding: 4px 12px;
+      transition: all 0.2s ease;
+
+      &:hover {
+        transform: translateY(-1px);
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+    }
+  }
+}
+</style>

src/views/finance/receive/index.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="receive-list-page">
+    <van-tabs v-model:active="currentTab" class="approval-tabs">
+      <!-- 待审批 -->
+      <van-tab name="pending" title="待审批">
+        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+          <van-list
+            v-model:loading="receiveLoading"
+            :finished="receiveFinished"
+            finished-text="没有更多了"
+            @load="onLoad"
+          >
+            <div 
+              v-for="item in receiveList" 
+              :key="item.receiptBillCode"
+              class="list-item"
+              @click="goToDetail(item)"
+            >
+              <div class="item-header">
+                <span class="code">{{ item.receiptBillCode }}</span>
+              </div>
+              <div class="item-content">
+                <div class="info-row">
+                  <span class="label">客户名称：</span>
+                  <span class="value">{{ item.partnerName }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="label">退款金额：</span>
+                  <span class="value amount">{{ formatAmount(item.totalPriceWithTax) }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="label">申请时间：</span>
+                  <span class="value">{{ item.applyTime }}</span>
+                </div>
+              </div>
+            </div>
+            <van-empty v-if="!receiveLoading && receiveList.length === 0" description="暂无待审批数据" />
+          </van-list>
+        </van-pull-refresh>
+      </van-tab>
+
+      <!-- 已审批 -->
+      <van-tab name="completed" title="已审批">
+        <van-pull-refresh v-model="completedRefreshing" @refresh="onCompletedRefresh">
+          <van-list
+            v-model:loading="completedLoading"
+            :finished="completedFinished"
+            finished-text="没有更多了"
+            @load="onCompletedLoad"
+          >
+             <div 
+              v-for="item in completedList" 
+              :key="item.businessKey" 
+              class="list-item"
+              @click="goToDetail(item, true)"
+            >
+              <div class="item-header">
+                <span class="code">{{ item.businessKey }}</span>
+                <span :class="['status-tag', getStatusClass(item.approveStatus)]">
+                    {{ getStatusText(item.approveStatus) }}
+                </span>
+              </div>
+              <div class="item-content">
+                <div class="info-row">
+                  <span class="label">流程名称：</span>
+                  <span class="value">{{ item.processName }}</span>
+                </div>
+                 <div class="info-row">
+                  <span class="label">发起人：</span>
+                  <span class="value">{{ item.applyUserName }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="label">审批时间：</span>
+                  <span class="value">{{ item.approveTime }}</span>
+                </div>
+              </div>
+            </div>
+            <van-empty v-if="!completedLoading && completedList.length === 0" description="暂无已审批数据" />
+          </van-list>
+        </van-pull-refresh>
+      </van-tab>
+    </van-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { storeToRefs } from 'pinia'
+import { useFinanceStore } from '@/store/finance'
+import { formatAmount } from '@/utils'
+
+const router = useRouter()
+const financeStore = useFinanceStore()
+const { receiveList, receiveLoading, receiveFinished, completedList, completedLoading, completedFinished } = storeToRefs(financeStore)
+
+const currentTab = ref('pending')
+const refreshing = ref(false)
+const completedRefreshing = ref(false)
+const processKey = 'finance_receipt_refound'
+
+const onLoad = async () => {
+  await financeStore.loadReceiveList()
+}
+
+const onRefresh = async () => {
+  await financeStore.loadReceiveList(true)
+  refreshing.value = false
+}
+
+const onCompletedLoad = async () => {
+  await financeStore.loadCompletedList(false, processKey)
+}
+
+const onCompletedRefresh = async () => {
+  await financeStore.loadCompletedList(true, processKey)
+  completedRefreshing.value = false
+}
+
+const goToDetail = (item: any, isCompleted = false) => {
+    // 如果是待审批，将待办信息存储到 store
+    if (!isCompleted) {
+        financeStore.currentReceiveTodo = {
+            taskId: item.taskId,
+            processKey: processKey,
+          receiptBillCode: item.businessKey
+        }
+    }
+
+    router.push({
+        name: 'FinanceReceiveDetail',
+        params: { code: item.receiptBillCode || item.businessKey },
+        query: { 
+            readonly: isCompleted ? 'true' : 'false',
+            taskId: item.taskId
+        }
+    })
+}
+
+const getStatusText = (status: number) => {
+    switch (status) {
+        case 2: return '驳回'
+        case 3: return '通过'
+        default: return '审批中'
+    }
+}
+
+const getStatusClass = (status: number) => {
+    switch (status) {
+        case 2: return 'rejected'
+        case 3: return 'approved'
+        default: return 'pending'
+    }
+}
+
+onMounted(() => {
+    financeStore.resetState()
+    financeStore.loadReceiveList(true)
+})
+</script>
+
+<style lang="scss" scoped>
+.receive-list-page {
+  min-height: 100vh;
+  background-color: var(--van-background-color);
+}
+
+.approval-tabs {
+  :deep(.van-tabs__wrap) {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+}
+
+.list-item {
+  background: #fff;
+  margin: 12px;
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
+
+  .item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #f5f5f5;
+
+    .code {
+      font-weight: 600;
+      font-size: 16px;
+    }
+  }
+
+  .item-content {
+    .info-row {
+      display: flex;
+      margin-bottom: 8px;
+      font-size: 14px;
+      
+      .label {
+        color: #666;
+        width: 90px;
+      }
+      
+      .value {
+        color: #333;
+        flex: 1;
+        
+        &.amount {
+          color: #1989fa;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+}
+
+.status-tag {
+    font-size: 12px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    
+    &.pending { color: #ff976a; background: #fff3e0; }
+    &.approved { color: #07c160; background: #e8f5e9; }
+    &.rejected { color: #ee0a24; background: #ffebee; }
+}
+</style>