381 lines
10 KiB
Vue
381 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="visible"
|
|||
|
|
title="付款记录详情"
|
|||
|
|
width="800px"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
@close="handleClose"
|
|||
|
|
>
|
|||
|
|
<div class="payment-detail-dialog" v-loading="loading">
|
|||
|
|
<div v-if="paymentData" class="detail-content">
|
|||
|
|
<!-- 基本信息 -->
|
|||
|
|
<div class="section">
|
|||
|
|
<div class="section-title">
|
|||
|
|
<span class="border"></span>
|
|||
|
|
<span class="title">基本信息</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-grid">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<label>创建日期：</label>
|
|||
|
|
<span>{{ formatDate(paymentData.created_at) }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<label>付款来源：</label>
|
|||
|
|
<span>{{ paymentData.country_name || '—' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<label>汇款人：</label>
|
|||
|
|
<span>{{ paymentData.remitter || '—' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<label>账户：</label>
|
|||
|
|
<span>{{ paymentData.account_name || '—' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<label>币种：</label>
|
|||
|
|
<span>{{ paymentData.currency_name || '—' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<label>金额：</label>
|
|||
|
|
<span class="amount">{{ paymentData.amount }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<label>付款水单:</label>
|
|||
|
|
<div>
|
|||
|
|
<p v-for="(item, index) in paymentData.voucher_file" :key="index">
|
|||
|
|
<el-image
|
|||
|
|
v-if="
|
|||
|
|
/\.(png|jpe?g|gif|webp|bmp|svg)(\?|$)/i.test(
|
|||
|
|
(item.file_full || '').split('?')[0]
|
|||
|
|
)
|
|||
|
|
"
|
|||
|
|
:src="item.file_full"
|
|||
|
|
:preview-src-list="item.file_full ? [item.file_full] : []"
|
|||
|
|
style="width: 100px; height: 100px"
|
|||
|
|
/>
|
|||
|
|
<a
|
|||
|
|
v-else
|
|||
|
|
:href="item.file_full"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener"
|
|||
|
|
style="
|
|||
|
|
flex: 1;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
width: 200px;
|
|||
|
|
"
|
|||
|
|
>{{ item.file_name }}</a
|
|||
|
|
>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 关联信息 -->
|
|||
|
|
<div class="section" v-if="paymentData.payment_apply_id">
|
|||
|
|
<div class="section-title">
|
|||
|
|
<span class="border"></span>
|
|||
|
|
<span class="title">关联信息</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-grid">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<label>付款申请ID：</label>
|
|||
|
|
<span>{{ paymentData.payment_apply_id }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<label>关联状态：</label>
|
|||
|
|
<el-tag :type="getStatusType(paymentData.status)">
|
|||
|
|
{{ getStatusText(paymentData.status) }}
|
|||
|
|
</el-tag>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 收款记录关联 -->
|
|||
|
|
<div
|
|||
|
|
class="section"
|
|||
|
|
v-if="paymentData.receipt_records && paymentData.receipt_records.length"
|
|||
|
|
>
|
|||
|
|
<div class="section-title">
|
|||
|
|
<span class="border"></span>
|
|||
|
|
<span class="title">关联收款记录</span>
|
|||
|
|
</div>
|
|||
|
|
<el-table :data="paymentData.receipt_records" style="margin-top: 12px">
|
|||
|
|
<el-table-column label="收款记录ID" prop="id" min-width="120" />
|
|||
|
|
<el-table-column label="创建日期" prop="created_at" min-width="140">
|
|||
|
|
<template #default="scope">
|
|||
|
|
{{ formatDate(scope.row.created_at) }}
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="金额" prop="amount" min-width="120">
|
|||
|
|
<template #default="scope">
|
|||
|
|
{{ formatAmount(scope.row.amount, scope.row.currency_name) }}
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="状态" prop="status" min-width="100">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-tag :type="getStatusType(scope.row.status)">
|
|||
|
|
{{ getStatusText(scope.row.status) }}
|
|||
|
|
</el-tag>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 备注信息 -->
|
|||
|
|
<div class="section" v-if="paymentData.remark">
|
|||
|
|
<div class="section-title">
|
|||
|
|
<span class="border"></span>
|
|||
|
|
<span class="title">备注信息</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="remark-content">
|
|||
|
|
{{ paymentData.remark }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 无数据状态 -->
|
|||
|
|
<div v-else-if="!loading" class="no-data">
|
|||
|
|
<i class="iconfont-sys"></i>
|
|||
|
|
<span>暂无数据</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- <div class="dialog-footer">
|
|||
|
|
<el-button @click="handleClose">关闭</el-button>
|
|||
|
|
</div> -->
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { financeService } from '@/api/admin/finance'
|
|||
|
|
|
|||
|
|
interface PaymentRecord {
|
|||
|
|
id: string | number
|
|||
|
|
created_at: string
|
|||
|
|
country_name: string
|
|||
|
|
remitter: string
|
|||
|
|
account_name: string
|
|||
|
|
currency_name: string
|
|||
|
|
amount: number
|
|||
|
|
status: string
|
|||
|
|
payment_apply_id?: string | number
|
|||
|
|
receipt_records?: any[]
|
|||
|
|
voucher_file?: any[]
|
|||
|
|
submit_files?: string[]
|
|||
|
|
remark?: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
modelValue: boolean
|
|||
|
|
paymentId?: string | number
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface Emits {
|
|||
|
|
(e: 'update:modelValue', value: boolean): void
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const props = defineProps<Props>()
|
|||
|
|
const emit = defineEmits<Emits>()
|
|||
|
|
|
|||
|
|
const visible = computed({
|
|||
|
|
get: () => props.modelValue,
|
|||
|
|
set: (value) => emit('update:modelValue', value)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const loading = ref(false)
|
|||
|
|
const paymentData = ref<PaymentRecord | null>(null)
|
|||
|
|
|
|||
|
|
// 获取付款记录详情
|
|||
|
|
const getPaymentDetail = async () => {
|
|||
|
|
if (!props.paymentId) return
|
|||
|
|
|
|||
|
|
loading.value = true
|
|||
|
|
try {
|
|||
|
|
const res = await financeService.getPaymentDetail({ id: props.paymentId })
|
|||
|
|
paymentData.value = res
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取付款记录详情失败:', error)
|
|||
|
|
paymentData.value = null
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 关闭对话框
|
|||
|
|
const handleClose = () => {
|
|||
|
|
visible.value = false
|
|||
|
|
paymentData.value = null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 打印功能
|
|||
|
|
const handlePrint = () => {
|
|||
|
|
window.print()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 格式化日期
|
|||
|
|
const formatDate = (dateStr: string) => {
|
|||
|
|
if (!dateStr) return '—'
|
|||
|
|
try {
|
|||
|
|
return new Date(dateStr).toLocaleString('zh-CN')
|
|||
|
|
} catch {
|
|||
|
|
return dateStr
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 格式化金额
|
|||
|
|
const formatAmount = (amount: number, currency: string) => {
|
|||
|
|
return `${currency || ''} ${amount?.toLocaleString() || 0}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取状态类型
|
|||
|
|
const getStatusType = (status: string): 'success' | 'info' | 'warning' | 'danger' | 'primary' => {
|
|||
|
|
const statusMap: Record<string, 'success' | 'info' | 'warning' | 'danger' | 'primary'> = {
|
|||
|
|
available: 'success',
|
|||
|
|
used: 'info',
|
|||
|
|
pending: 'warning',
|
|||
|
|
cancelled: 'danger',
|
|||
|
|
bound: 'success',
|
|||
|
|
unbound: 'info'
|
|||
|
|
}
|
|||
|
|
return statusMap[status] || 'info'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取状态文本
|
|||
|
|
const getStatusText = (status: string) => {
|
|||
|
|
const statusMap: Record<string, string> = {
|
|||
|
|
'available': '可用',
|
|||
|
|
'used': '已使用',
|
|||
|
|
'pending': '待处理',
|
|||
|
|
'cancelled': '已取消',
|
|||
|
|
'bound': '已绑定',
|
|||
|
|
'unbound': '未绑定'
|
|||
|
|
}
|
|||
|
|
return statusMap[status] || status
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 监听对话框显示状态
|
|||
|
|
watch(visible, (newVal) => {
|
|||
|
|
if (newVal && props.paymentId) {
|
|||
|
|
getPaymentDetail()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 监听付款ID变化
|
|||
|
|
watch(() => props.paymentId, (newId) => {
|
|||
|
|
if (visible.value && newId) {
|
|||
|
|
getPaymentDetail()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.payment-detail-dialog {
|
|||
|
|
.detail-content {
|
|||
|
|
.section {
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #222;
|
|||
|
|
|
|||
|
|
.border {
|
|||
|
|
width: 4px;
|
|||
|
|
height: 16px;
|
|||
|
|
background: #3d7bff;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|||
|
|
gap: 16px;
|
|||
|
|
|
|||
|
|
.info-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
// padding: 8px 0;
|
|||
|
|
|
|||
|
|
label {
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #666;
|
|||
|
|
min-width: 100px;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
color: #333;
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
&.amount {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #3d7bff;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remark-content {
|
|||
|
|
padding: 12px;
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
color: #666;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
min-height: 60px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.no-data {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 60px 0;
|
|||
|
|
color: #999;
|
|||
|
|
|
|||
|
|
i {
|
|||
|
|
font-size: 48px;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dialog-footer {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 打印样式
|
|||
|
|
@media print {
|
|||
|
|
.dialog-footer {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.payment-detail-dialog {
|
|||
|
|
.section-title {
|
|||
|
|
.border {
|
|||
|
|
background: #000 !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|