feat(finance): 添加应付审批功能模块

- 新增应付详情页面，支持查看付款信息和应付单列表
- 实现应付审批流程，包含通过和驳回功能
- 添加应付列表页面，支持待审批和已审批分类查看
- 集成审批意见标签功能，提供常用审批意见选择
- 扩展 finance store 状态管理，添加应付相关数据处理
- 添加应付审批相关路由配置和类型定义
- 在首页添加应付审批入口和统计数据展示

src/router/index.ts

@@ -43,6 +43,15 @@ const routes: RouteRecordRaw[] = [
       title: '采购详情',
       requiresAuth: true
     }
+  },
+  {
+    path: '/finance/payable/detail/:paymentBillCode',
+    name: 'FinancePayableDetail',
+    component: () => import('@/views/finance/payable/detail.vue'),
+    meta: {
+      title: '应付详情',
+      requiresAuth: true
+    }
   }
 ]
 

src/store/finance.ts

@@ -0,0 +1,158 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { getPayableList } from '@/api/finance' // borrowing completed from finance api if I add it, or use generic
+// Actually I didn't add getCompleted to finance.ts, I should probably add it or use the one from purchase/order?
+// Better to add a generic one or specific one in finance.ts
+// Let's modify api/finance.ts to include getCompletedPayableList which calls /flow/completed/list
+import type { FinancePayable } from '@/types'
+
+// Re-importing getCompletedPurchaseList is wrong if it's not there.
+// I will just use the same pattern as PurchaseStore.
+import http from '@/utils/http' // Direct call if needed or add to api
+
+export const useFinanceStore = defineStore('finance', () => {
+  // State
+  const payableList = ref<FinancePayable[]>([])
+  const loading = ref(false)
+  const finished = ref(false)
+  const page = ref(1)
+  const pageSize = ref(10)
+  const total = ref(0)
+
+  // Completed State
+  const completedList = ref<any[]>([])
+  const completedLoading = ref(false)
+  const completedFinished = ref(false)
+  const completedPage = ref(1)
+  const completedPageSize = ref(10)
+
+  // Detail State
+  const currentPayable = ref<any>({})
+  const currentPayableTodo = ref<any>(null)
+  const detailLoading = ref(false)
+
+  // Actions
+  const loadPayableList = async (refresh = false) => {
+    if (refresh) {
+      page.value = 1
+      finished.value = false
+      payableList.value = []
+    }
+
+    loading.value = true
+    try {
+      const res = await getPayableList({
+        pageNum: page.value,
+        pageSize: pageSize.value,
+        processKey: 'finance_payment'
+      })
+
+      if (res.data.code === 0) {
+        const rows = res.data.rows || []
+        
+        if (refresh) {
+          payableList.value = rows
+        } else {
+          payableList.value = [...payableList.value, ...rows]
+        }
+
+        total.value = res.data.total || 0
+        if (payableList.value.length >= total.value || rows.length < pageSize.value) {
+          finished.value = true
+        } else {
+          page.value++
+        }
+      }
+    } catch (error) {
+      console.error('Failed to load payable list', error)
+      finished.value = true
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const loadCompletedList = async (refresh = false) => {
+      if (refresh) {
+          completedPage.value = 1
+          completedFinished.value = false
+          completedList.value = []
+      }
+
+      completedLoading.value = true
+      try {
+          const formData = new FormData()
+          formData.append('page', completedPage.value.toString())
+          formData.append('pageSize', completedPageSize.value.toString())
+          formData.append('processKeyList', 'finance_payment') 
+          
+          const res = await http.post('/flow/completed/list', formData)
+
+          if (res.data.code === 0) {
+              const rows = res.data.rows || []
+              if (refresh) {
+                  completedList.value = rows
+              } else {
+                  completedList.value = [...completedList.value, ...rows]
+              }
+              
+              if (rows.length < completedPageSize.value) {
+                  completedFinished.value = true
+              } else {
+                  completedPage.value++
+              }
+          }
+      } catch (error) {
+          console.error('Failed to load completed list', error)
+          completedFinished.value = true
+      } finally {
+          completedLoading.value = false
+      }
+  }
+
+  const fetchPayableDetail = async (id: string | number) => {
+      detailLoading.value = true
+      try {
+          // Import getPayableDetail dynamically to avoid circular dependency if any? No, it's fine.
+          // But I need to import it at the top.
+          const { getPayableDetail } = await import('@/api/finance')
+          const res = await getPayableDetail(id)
+          if (res.data.code === 0) {
+              currentPayable.value = res.data.data || res.data.rows || {} // handle structure
+              // Attempt to extract todo info from response if available, similar to Purchase/Order
+              // If not available in detail, we might need to rely on list passing it or separate call.
+              // For now, assume it's in the detail or passed via other means.
+              // If the detail response has 'todo' field:
+              if (res.data.data?.todo) {
+                  currentPayableTodo.value = res.data.data.todo
+              }
+          }
+      } catch (error) {
+          console.error('Failed to load payable detail', error)
+      } finally {
+          detailLoading.value = false
+      }
+  }
+
+  const resetState = () => {
+      page.value = 1
+      payableList.value = []
+      finished.value = false
+      loading.value = false
+  }
+
+  return {
+    payableList,
+    loading,
+    finished,
+    loadPayableList,
+    completedList,
+    completedLoading,
+    completedFinished,
+    loadCompletedList,
+    currentPayable,
+    currentPayableTodo,
+    detailLoading,
+    fetchPayableDetail,
+    resetState
+  }
+})

src/types/index.ts

@@ -303,3 +303,43 @@ export interface PurchaseDetail {
     fileLog?: AttachmentFile // 单个附件
     [key: string]: any
 }
+
+// ============= 应付审批相关类型定义 =============
+
+export interface PayableDetailItem {
+    payableBillCode: string
+    projectName: string
+    productType: string
+    totalPriceWithTax: number
+    paymentAmount: number
+    [key: string]: any
+}
+
+export interface FinancePayable {
+    paymentBillCode: string // 付款单编号 (was businessKey)
+    vendorName: string // 制造商名称
+    totalPriceWithTax: number // 含税总价
+    applyTime: string // 申请时间
+    
+    // Detail fields
+    payType?: string // 付款条件
+    payConfigDay?: number // 付款周期
+    totalPriceWithoutTax?: number // 未税总价
+    taxAmount?: number // 税额
+    paymentMethod?: string // 支付方式
+    payBankNumber?: string // 银行账号
+    payName?: string // 账户名称
+    payBankOpenAddress?: string // 银行开户行
+    bankNumber?: string // 银行行号
+    
+    payableDetails?: PayableDetailItem[] // 应付单列表
+    
+    [key: string]: any
+}
+
+export interface FinancePayableListParams {
+    pageNum: number
+    pageSize: number
+    processKey: string
+    [key: string]: any
+}

src/views/Home/index.vue

@@ -58,6 +58,9 @@
 
       <!-- 采购审批 -->
       <PurchaseList v-if="currentMenu === 'purchase'" />
+
+      <!-- 应付审批 -->
+      <FinancePayableList v-if="currentMenu === 'finance_payment'" />
     </div>
   </div>
 </template>
@@ -71,6 +74,7 @@ import { useTodoStore } from '@/store/todo'
 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'
 
 const router = useRouter()
 const route = useRoute()
@@ -97,6 +101,12 @@ const menuList = computed(() => [
     title: '采购审批',
     icon: 'shopping-cart-o',
     count: statistics.value?.purchase_order_online || 0
+  },
+  {
+    key: 'finance_payment',
+    title: '应付审批',
+    icon: 'gold-coin-o',
+    count: statistics.value?.finance_payment || 0
   }
 ])
 
@@ -116,7 +126,7 @@ const selectMenu = (key: string) => {
 onMounted(() => {
   todoStore.fetchTodoStatistics()
   const tab = route.query.tab as string
-  if (tab && ['order', 'purchase'].includes(tab)) {
+  if (tab && ['order', 'purchase', 'finance_payment'].includes(tab)) {
     currentMenu.value = tab
   }
 })

src/views/finance/payable/detail.vue

@@ -0,0 +1,437 @@
+<template>
+  <div class="payable-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">{{ currentPayable.paymentBillCode || '未知编号' }}</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">{{ currentPayable.paymentBillCode }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">制造商名称</span>
+                <span class="value">{{ currentPayable.vendorName }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">付款条件</span>
+                <span class="value">{{ currentPayable.payType }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">付款周期</span>
+                <span class="value">{{ currentPayable.payConfigDay }}</span>
+            </div>
+             <div class="info-row">
+                <span class="label">含税总价</span>
+                <span class="value amount">{{ formatAmount(currentPayable.totalPriceWithTax) }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">未税总价</span>
+                <span class="value">{{ formatAmount(currentPayable.totalPriceWithoutTax) }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">税额</span>
+                <span class="value">{{ formatAmount(currentPayable.taxAmount) }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">支付方式</span>
+                <span class="value">{{ formatDictLabel(paymentMethodOptions, currentPayable.paymentMethod) }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">银行账号</span>
+                <span class="value">{{ currentPayable.payBankNumber }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">账户名称</span>
+                <span class="value">{{ currentPayable.payName }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">银行开户行</span>
+                <span class="value">{{ currentPayable.payBankOpenAddress }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">银行行号</span>
+                <span class="value">{{ currentPayable.bankNumber }}</span>
+            </div>
+          </div>
+        </van-tab>
+
+        <!-- Tab 2: 应付单列表 -->
+        <van-tab title="应付单列表" name="list">
+            <div class="detail-list-container">
+                <div v-if="currentPayable.payableDetails && currentPayable.payableDetails.length > 0">
+                    <div 
+                        v-for="(item, index) in currentPayable.payableDetails" 
+                        :key="index"
+                        class="detail-item"
+                    >
+                        <div class="item-header">
+                            <span class="code">{{ item.payableBillCode }}</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.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">{{ formatAmount(item.totalPriceWithTax) }}</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 { currentPayable, currentPayableTodo, 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('paymentMethod'),
+            getDicts('productType')
+        ])
+        
+        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 = '' // Clear comment initially
+    selectedTag.value = '' // Clear selected tag
+    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
+    }
+    
+    // 优先从列表传递的 taskId 获取
+    const taskId = (route.query.taskId as string) || currentPayableTodo.value?.taskId;
+    
+    if (!taskId && !isReadOnly.value) {
+        showToast('无法获取审批任务ID')
+        return
+    }
+
+    submitting.value = true
+    try {
+        await http.post('/flow/todo/approve', {
+            taskId: taskId,
+            processKey: 'finance_payment',
+            businessKey: currentPayable.value.paymentBillCode, // Updated to use paymentBillCode
+            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 paymentBillCode = route.params.paymentBillCode
+    if (paymentBillCode) {
+        financeStore.fetchPayableDetail(paymentBillCode as string)
+    }
+    loadDicts()
+})
+</script>
+
+<style lang="scss" scoped>
+.payable-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: 100px; 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: 80px;}
+                .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/payable/index.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="payable-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="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+            @load="onLoad"
+          >
+            <div 
+              v-for="item in payableList" 
+              :key="item.paymentBillCode" 
+              class="list-item"
+              @click="goToDetail(item)"
+            >
+              <div class="item-header">
+                <span class="code">{{ item.paymentBillCode }}</span>
+              </div>
+              <div class="item-content">
+                <div class="info-row">
+                  <span class="label">制造商名称：</span>
+                  <span class="value">{{ item.vendorName }}</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="!loading && payableList.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' // Assuming this exists or I'll implement a simple one locally if not found? 
+// Checking imports: src/utils/index.ts usually has formatAmount. I saw it used in Purchase/index.vue.
+
+const router = useRouter()
+const financeStore = useFinanceStore()
+const { payableList, loading, finished, completedList, completedLoading, completedFinished } = storeToRefs(financeStore)
+
+const currentTab = ref('pending')
+const refreshing = ref(false)
+const completedRefreshing = ref(false)
+
+const onLoad = async () => {
+  await financeStore.loadPayableList()
+}
+
+const onRefresh = async () => {
+  await financeStore.loadPayableList(true)
+  refreshing.value = false
+}
+
+const onCompletedLoad = async () => {
+  await financeStore.loadCompletedList()
+}
+
+const onCompletedRefresh = async () => {
+  await financeStore.loadCompletedList(true)
+  completedRefreshing.value = false
+}
+
+const goToDetail = (item: any, isCompleted = false) => {
+    // 如果是待审批，将待办信息存储到 store
+    if (!isCompleted) {
+        financeStore.currentPayableTodo = {
+            taskId: item.taskId,
+            processKey: 'finance_payment',
+            paymentBillCode: item.businessKey
+        }
+    }
+
+    // Note: The detail interface is finance/payment/code/{paymentBillCode}.
+    router.push({
+        name: 'FinancePayableDetail',
+        params: { paymentBillCode: item.paymentBillCode || 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.loadPayableList(true)
+    // completed list lazy load when tab clicked usually? or just load.
+    // Purchase/index.vue loads on tab change. 
+    // But here I'll just let the list component trigger load via v-model:loading which calls @load immediately if not full.
+})
+</script>
+
+<style lang="scss" scoped>
+.payable-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>