feat(finance): 添加退款审批功能并优化应付详情页面
- 新增退款详情页面，支持退款单信息展示和审批操作 - 添加退款相关API接口，包括退款列表和详情获取 - 在finance store中添加退款相关的状态管理和数据加载功能 - 优化应付详情页面的代码格式和结构 - 调整字典数据加载的字段名称，统一使用下划线格式 - 增加应付单详情中本次付款金额的显示 - 修复页面样式和组件布局问题master
chenhao
parent
15c24624b0
commit
38d3071ff9
|
|
@ -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}`)
|
||||
}
|
||||
|
|
@ -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}`)
|
||||
}
|
||||
|
|
@ -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')
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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('productType')
|
||||
getDicts('payment_method'),
|
||||
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;}
|
||||
.value { flex: 1; color: #333; word-break: break-all; text-align: right;}
|
||||
.amount { color: #f5222d; font-weight: 500; }
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -360,8 +394,15 @@ onMounted(() => {
|
|||
padding-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.code { font-weight: 600; font-size: 15px;}
|
||||
.amount { color: #f5222d; font-weight: 500; }
|
||||
.code {
|
||||
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;}
|
||||
.value { flex: 1; color: #333; word-break: break-all;}
|
||||
.label {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue