admin/jurong_circle_frontdesk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

解决了/transfers按钮显示及交互的相关问题

Browse Source
This commit is contained in:
大脏狼
2025-08-12 16:38:44 +08:00
parent 99feae7c59
commit 81506b4a8f
1 changed files with 148 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
src/views/Transfers.vue
View File

@@ -5,9 +5,6 @@
<div class="nav-center">
<h1 class="nav-title">货款管理</h1>
</div>
<div class="nav-right">
<!-- 移除发起转账按钮 -->
</div>
</nav>
<!-- 待转账 -->
@@ -69,6 +66,17 @@
已回款
</el-tag>
</div>
<!-- 回款确认按钮 -->
<div v-if="!allocation.return_date && canConfirmReturn(allocation)" class="return-action">
<el-button
type="success"
size="small"
@click="showReturnConfirmDialog(allocation)"
>
确认收到回款
</el-button>
</div>
</div>
<!-- 超时警告 -->
@@ -122,7 +130,7 @@
@click="statusFilter = ''"
>
<span class="filter-text">全部</span>
<span class="filter-count">{{ totalCount }}</span>
<span class="filter-count">{{ pagination.total }}</span>
</div>
<div
class="filter-item"
@@ -195,7 +203,7 @@
</div>
<!-- 确认收款操作按钮 -->
<div
v-if="transfer.status === 'confirmed' && transfer.to_user_id !== userStore.user.id"
v-if="transfer.status === 'confirmed' && transfer.to_user_id === userStore.user.id"
class="transfer-actions"
>
<el-button
@@ -223,6 +231,20 @@
<el-empty :description="statusFilter === 'pending' ? '暂无待确认的转账' : '暂无转账记录'" />
</div>
</div>
<!-- 分页 -->
<div class="pagination" v-if="pagination.total > 0">
<el-pagination
v-model:current-page="pagination.page"
v-model:page-size="pagination.limit"
:page-sizes="[10, 20, 50]"
:total="pagination.total"
:layout="paginationLayout"
:small="isMobile"
@size-change="loadTransferHistory"
@current-change="loadTransferHistory"
/>
</div>
</el-card>
</div>
@@ -292,6 +314,45 @@
</span>
</template>
</el-dialog>
<!-- 回款确认对话框 -->
<el-dialog
v-model="showReturnDialog"
title="确认回款"
width="90%"
:style="{ maxWidth: '500px' }"
>
<el-form :model="returnForm" label-width="100px">
<el-form-item label="回款金额">
<el-input-number
v-model="returnForm.returnAmount"
:min="0"
:precision="2"
controls-position="right"
/>
</el-form-item>
<el-form-item label="备注说明">
<el-input
v-model="returnForm.description"
type="textarea"
:rows="3"
/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="showReturnDialog = false">取消</el-button>
<el-button
type="success"
@click="confirmReturn"
:loading="confirmLoading"
>
确认回款
</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
@@ -311,24 +372,11 @@ const userStore = useUserStore()
const loading = ref(false)
const submitLoading = ref(false)
const confirmLoading = ref(false)
const showCreateTransfer = ref(false)
const showVoucherDialog = ref(false)
const showReturnDialog = ref(false)
const statusFilter = ref('')
const currentTransfer = ref({})
const currentAllocation = ref({})
const confirmFormRef = ref(null)
const confirmForm = reactive({
confirmedAmount: '',
remarks: ''
})
const confirmRules = {
confirmedAmount: [
{ required: true, message: '请输入实际收到的金额', trigger: 'blur' },
{ type: 'number', min: 0, message: '金额必须大于0', trigger: 'blur' }
]
}
const pendingTransfers = ref([])
const pendingAllocations = ref([])
@@ -336,26 +384,48 @@ const allTransferHistory = ref([])
const filteredTransferHistory = ref([])
const userList = ref([])
// 移动端检测
const pagination = reactive({
page: 1,
limit: 10,
total: 0
})
const returnForm = reactive({
returnAmount: '',
description: ''
})
// 移动端检测和分页布局
const windowWidth = ref(window.innerWidth)
const isMobile = computed(() => {
return windowWidth.value <= 768
})
const paginationLayout = computed(() => {
if (windowWidth.value <= 480) {
return 'prev, pager, next'
} else if (windowWidth.value <= 768) {
return 'total, prev, pager, next'
} else {
return 'total, sizes, prev, pager, next, jumper'
}
})
// 计算属性
const totalCount = computed(() => allTransferHistory.value.length)
const pendingCount = computed(() => {
return allTransferHistory.value.filter(t =>
t.status === 'pending' &&
t.to_user_id === userStore.user.id
).length
})
const confirmedCount = computed(() => {
return allTransferHistory.value.filter(t =>
t.status === 'confirmed'
).length
})
const rejectedCount = computed(() => {
return allTransferHistory.value.filter(t =>
t.status === 'rejected'
@@ -382,22 +452,11 @@ onUnmounted(() => {
// 监听状态筛选
watch(statusFilter, () => {
filteredTransferHistory.value = filterTransfers(allTransferHistory.value)
pagination.page = 1
loadTransferHistory()
})
// 方法
const filterTransfers = (transfers) => {
if (!statusFilter.value) return transfers
return transfers.filter(transfer => {
if (statusFilter.value === 'pending') {
return transfer.status === 'pending' &&
transfer.to_user_id === userStore.user.id
}
return transfer.status === statusFilter.value
})
}
const loadPendingTransfers = async () => {
try {
const response = await api.get('/transfers/pending', {
@@ -431,10 +490,21 @@ const loadPendingAllocations = async () => {
const loadTransferHistory = async () => {
try {
loading.value = true
const response = await api.get(`/transfers/user/${userStore.user.id}`)
const params = {
page: pagination.page,
limit: pagination.limit
}
if (statusFilter.value) {
params.status = statusFilter.value
}
const response = await api.get(`/transfers/user/${userStore.user.id}`, { params })
if (response.data.success) {
allTransferHistory.value = response.data.data.transfers || []
filteredTransferHistory.value = filterTransfers(allTransferHistory.value)
filteredTransferHistory.value = allTransferHistory.value
pagination.total = response.data.data.pagination?.total || 0
console.log(allTransferHistory.value)
}
} catch (error) {
console.error('加载转账记录失败:', error)
@@ -504,7 +574,8 @@ const getStatusText = (status) => {
confirmed: '已确认',
rejected: '已拒绝',
received: '已收款',
not_received: '未收到款'
not_received: '未收到款',
cancelled: '已取消'
}
return texts[status] || '未知'
}
@@ -560,36 +631,31 @@ const canConfirmReturn = (allocation) => {
return now >= canReturnTime
}
const confirmReturn = async (allocation) => {
try {
await ElMessageBox.confirm(
`确定已收到¥${allocation.amount}回款吗？`,
'确认回款',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
const showReturnConfirmDialog = (allocation) => {
currentAllocation.value = allocation
returnForm.returnAmount = allocation.amount
returnForm.description = `匹配订单 ${allocation.matching_order_id} 回款确认`
showReturnDialog.value = true
}
)
const confirmReturn = async () => {
try {
confirmLoading.value = true
const response = await api.post(`/matching/confirm-return/${allocation.id}`, {
returnAmount: allocation.amount,
description: `匹配订单 ${allocation.matching_order_id} 回款确认`
const response = await api.post(`/matching/confirm-return/${currentAllocation.value.id}`, {
returnAmount: returnForm.returnAmount,
description: returnForm.description
})
if (response.data.success) {
ElMessage.success('回款确认成功')
showReturnDialog.value = false
await loadPendingAllocations()
await loadTransferHistory()
}
} catch (error) {
if (error !== 'cancel') {
console.error('确认回款失败:', error)
const errorMsg = error.response?.data?.message || '确认回款失败'
ElMessage.error(errorMsg)
}
ElMessage.error(error.response?.data?.message || '确认回款失败')
} finally {
confirmLoading.value = false
}
@@ -777,7 +843,7 @@ const confirmNotReceived = async (transferId) => {
.transfer-item.confirmed {
border-color: #67c23a;
background: #f0f9ff;
background: #f0f9eb;
}
.transfer-item.rejected {
@@ -917,30 +983,32 @@ const confirmNotReceived = async (transferId) => {
font-weight: 500;
}
.return-time-status {
font-size: 13px;
font-weight: 500;
margin-top: 4px;
.return-info {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed #ebeef5;
}
.return-time-status.can-return {
.return-time.can-return {
color: #67c23a;
font-weight: 500;
}
.return-time-status.waiting {
.return-time.waiting {
color: #e6a23c;
}
.return-time-status.normal {
color: #909399;
.return-status.can-return {
color: #67c23a;
font-weight: 500;
}
.transfer-header .el-tag {
margin-left: 8px;
font-size: 11px;
height: 20px;
line-height: 18px;
padding: 0 6px;
.return-status.waiting {
color: #e6a23c;
}
.return-action {
margin-top: 10px;
}
.empty-state {
@@ -1034,14 +1102,7 @@ const confirmNotReceived = async (transferId) => {
}
}
.confirm-form {
margin-top: 20px;
padding: 16px;
background-color: #f8f9fa;
border-radius: 8px;
}
/* 移动端适配 */
@media (max-width: 768px) {
.status-filter-nav {
overflow-x: auto;
@@ -1049,7 +1110,7 @@ const confirmNotReceived = async (transferId) => {
padding-bottom: 5px;
.filter-item {
min-width: 80px;
min-width: 80px; // 在移动端保持最小宽度
flex: none;
padding: 6px 0;
@@ -1117,4 +1178,11 @@ const confirmNotReceived = async (transferId) => {
border-radius: 12px 12px 0 0 !important;
}
}
.pagination {
margin-top: 20px;
display: flex;
justify-content: center;
}
</style>