chenh
/
OMS_H5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

- 新增应付详情页面，支持查看付款信息和应付单列表
- 实现应付审批流程，包含通过和驳回功能
- 添加应付列表页面，支持待审批和已审批分类查看
- 集成审批意见标签功能，提供常用审批意见选择
- 扩展 finance store 状态管理，添加应付相关数据处理
- 添加应付审批相关路由配置和类型定义
- 在首页添加应付审批入口和统计数据展示
master
chenhao 2026-01-06 18:02:44 +08:00
parent 14726a5592
commit 15c24624b0
7 changed files with 1075 additions and 1744 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/router/index.ts
View File

@ -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
}
}
]

158
src/store/finance.ts 100644
View File

@ -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
}
})

40
src/types/index.ts
View File

@ -302,4 +302,44 @@ export interface PurchaseDetail {
attachmentList?: AttachmentFile[] // 其他附件列表
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
}

12
src/views/Home/index.vue
View File

@ -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
}
})

437
src/views/finance/payable/detail.vue 100644
View File

@ -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>

234
src/views/finance/payable/index.vue 100644
View File

@ -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>

1929
概要设计文档.md
View File

File diff suppressed because it is too large Load Diff