fix
This commit is contained in:
@@ -90,12 +90,17 @@ const hasActions = computed(() => !!slots['header-actions'])
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: var(--van-text-color, #323233);
|
||||
/*超出长度*/
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.header-stats {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
@@ -104,10 +109,16 @@ const hasActions = computed(() => !!slots['header-actions'])
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: var(--van-text-color-2, #646566);
|
||||
flex: 1;
|
||||
grid-column: 2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 按钮区域放在右侧 */
|
||||
.header-stats :deep(> :last-child:not(.stats-text)) {
|
||||
grid-column: 3;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.popup-scroll-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
@@ -211,7 +211,7 @@ const props = defineProps({
|
||||
// 每页数量
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 20
|
||||
default: 5
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<van-button
|
||||
v-if="hasTransactions"
|
||||
:type="hasClassifiedResults ? 'success' : 'primary'"
|
||||
:type="buttonType"
|
||||
size="small"
|
||||
:loading="loading || saving"
|
||||
:disabled="loading || saving"
|
||||
@@ -9,17 +9,17 @@
|
||||
class="smart-classify-btn"
|
||||
>
|
||||
<template v-if="!loading && !saving">
|
||||
<van-icon :name="hasClassifiedResults ? 'success' : 'fire'" />
|
||||
<span style="margin-left: 4px;">{{ hasClassifiedResults ? '保存分类' : '智能分类' }}</span>
|
||||
<van-icon :name="buttonIcon" />
|
||||
<span style="margin-left: 4px;">{{ buttonText }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ saving ? '保存中...' : '分类中...' }}
|
||||
<span>{{ loadingText }}</span>
|
||||
</template>
|
||||
</van-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { ref, computed, nextTick } from 'vue'
|
||||
import { showToast, closeToast } from 'vant'
|
||||
import { smartClassify, batchUpdateClassify } from '@/api/transactionRecord'
|
||||
|
||||
@@ -34,11 +34,12 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update', 'save', 'beforeClassify'])
|
||||
const emit = defineEmits(['update', 'save', 'notifyDonedTransactionId'])
|
||||
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const classifiedResults = ref([])
|
||||
const isAllCompleted = ref(false)
|
||||
let toastInstance = null
|
||||
|
||||
const hasTransactions = computed(() => {
|
||||
@@ -46,7 +47,34 @@ const hasTransactions = computed(() => {
|
||||
})
|
||||
|
||||
const hasClassifiedResults = computed(() => {
|
||||
return classifiedResults.value.length > 0
|
||||
return isAllCompleted.value && classifiedResults.value.length > 0
|
||||
})
|
||||
|
||||
// 按钮类型
|
||||
const buttonType = computed(() => {
|
||||
if (saving.value) return 'warning'
|
||||
if (loading.value) return 'primary'
|
||||
if (hasClassifiedResults.value) return 'success'
|
||||
return 'primary'
|
||||
})
|
||||
|
||||
// 按钮图标
|
||||
const buttonIcon = computed(() => {
|
||||
if (hasClassifiedResults.value) return 'success'
|
||||
return 'fire'
|
||||
})
|
||||
|
||||
// 按钮文字(非加载状态)
|
||||
const buttonText = computed(() => {
|
||||
if (hasClassifiedResults.value) return '保存分类'
|
||||
return '智能分类'
|
||||
})
|
||||
|
||||
// 加载中文字
|
||||
const loadingText = computed(() => {
|
||||
if (saving.value) return '保存中...'
|
||||
if (loading.value) return '分类中...'
|
||||
return ''
|
||||
})
|
||||
|
||||
/**
|
||||
@@ -93,6 +121,7 @@ const handleSaveClassify = async () => {
|
||||
|
||||
// 清空已分类结果
|
||||
classifiedResults.value = []
|
||||
isAllCompleted.value = false
|
||||
|
||||
// 通知父组件刷新数据
|
||||
emit('save')
|
||||
@@ -126,10 +155,9 @@ const handleSmartClassify = async () => {
|
||||
}
|
||||
|
||||
// 清空之前的分类结果
|
||||
isAllCompleted.value = false
|
||||
classifiedResults.value = []
|
||||
|
||||
const allTransactions = props.transactions
|
||||
const totalCount = allTransactions.length
|
||||
const batchSize = 30
|
||||
let processedCount = 0
|
||||
|
||||
@@ -149,10 +177,15 @@ const handleSmartClassify = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
await nextTick()
|
||||
|
||||
const allTransactions = props.transactions
|
||||
const totalCount = allTransactions.length
|
||||
|
||||
toastInstance = showToast({
|
||||
message: '正在智能分类...',
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
forbidClick: false, // 允许用户点击页面其他地方
|
||||
loadingType: 'spinner'
|
||||
})
|
||||
|
||||
@@ -168,7 +201,7 @@ const handleSmartClassify = async () => {
|
||||
toastInstance = showToast({
|
||||
message: `正在处理第 ${currentBatch}/${totalBatches} 批 (${i + 1}-${Math.min(i + batchSize, totalCount)} / ${totalCount})...`,
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
forbidClick: false, // 允许用户点击
|
||||
loadingType: 'spinner'
|
||||
})
|
||||
|
||||
@@ -182,6 +215,8 @@ const handleSmartClassify = async () => {
|
||||
const reader = response.body.getReader()
|
||||
const decoder = new TextDecoder()
|
||||
let buffer = ''
|
||||
let lastUpdateTime = 0
|
||||
const updateInterval = 300 // 最多每300ms更新一次Toast,减少DOM操作
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
@@ -216,9 +251,10 @@ const handleSmartClassify = async () => {
|
||||
toastInstance = showToast({
|
||||
message: `${eventData} (批次 ${currentBatch}/${totalBatches})`,
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
forbidClick: false, // 允许用户点击
|
||||
loadingType: 'spinner'
|
||||
})
|
||||
lastUpdateTime = Date.now()
|
||||
} else if (eventType === 'data') {
|
||||
// 收到分类结果
|
||||
const data = JSON.parse(eventData)
|
||||
@@ -237,16 +273,21 @@ const handleSmartClassify = async () => {
|
||||
const transaction = props.transactions[index]
|
||||
transaction.upsetedClassify = data.Classify
|
||||
transaction.upsetedType = data.Type
|
||||
emit('notifyDonedTransactionId', data.id)
|
||||
}
|
||||
|
||||
// 更新进度
|
||||
closeToast()
|
||||
toastInstance = showToast({
|
||||
message: `已分类 ${processedCount}/${totalCount} 条 (批次 ${currentBatch}/${totalBatches})...`,
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
loadingType: 'spinner'
|
||||
})
|
||||
// 限制Toast更新频率,避免频繁的DOM操作
|
||||
const now = Date.now()
|
||||
if (now - lastUpdateTime > updateInterval) {
|
||||
closeToast()
|
||||
toastInstance = showToast({
|
||||
message: `已分类 ${processedCount}/${totalCount} 条 (批次 ${currentBatch}/${totalBatches})...`,
|
||||
duration: 0,
|
||||
forbidClick: false, // 允许用户点击
|
||||
loadingType: 'spinner'
|
||||
})
|
||||
lastUpdateTime = now
|
||||
}
|
||||
} else if (eventType === 'end') {
|
||||
// 当前批次完成
|
||||
console.log(`批次 ${currentBatch}/${totalBatches} 完成`)
|
||||
@@ -265,6 +306,7 @@ const handleSmartClassify = async () => {
|
||||
// 所有批次完成
|
||||
closeToast()
|
||||
toastInstance = null
|
||||
isAllCompleted.value = true
|
||||
showToast({
|
||||
type: 'success',
|
||||
message: `分类完成,共处理 ${processedCount} 条记录,请点击"保存分类"按钮保存结果`,
|
||||
@@ -295,6 +337,7 @@ const handleSmartClassify = async () => {
|
||||
* 重置组件状态
|
||||
*/
|
||||
const reset = () => {
|
||||
isAllCompleted.value = false
|
||||
classifiedResults.value = []
|
||||
loading.value = false
|
||||
saving.value = false
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
:transactions="dateTransactions"
|
||||
:loading="listLoading"
|
||||
:finished="true"
|
||||
:show-delete="false"
|
||||
:show-delete="true"
|
||||
@click="viewDetail"
|
||||
/>
|
||||
</PopupContainer>
|
||||
@@ -120,7 +120,7 @@ const fetchDateTransactions = async (date) => {
|
||||
.data
|
||||
.sort((a, b) => b.amount - a.amount);
|
||||
// 重置智能分类按钮
|
||||
smartClassifyButtonRef.value.reset()
|
||||
smartClassifyButtonRef.value?.reset()
|
||||
} else {
|
||||
dateTransactions.value = [];
|
||||
showToast(response.message || "获取交易列表失败");
|
||||
|
||||
@@ -290,6 +290,7 @@
|
||||
:transactions="categoryBills"
|
||||
:onBeforeClassify="beforeSmartClassify"
|
||||
@save="onSmartClassifySave"
|
||||
@notify-doned-transaction-id="handleNotifiedTransactionId"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -313,7 +314,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onActivated } from 'vue'
|
||||
import { ref, computed, onMounted, onActivated, nextTick } from 'vue'
|
||||
import { showToast } from 'vant'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getMonthlyStatistics, getCategoryStatistics, getTrendStatistics } from '@/api/statistics'
|
||||
@@ -684,7 +685,7 @@ const loadCategoryBills = async (customIndex = null, customSize = null) => {
|
||||
billPageIndex.value++
|
||||
}
|
||||
|
||||
smartClassifyButtonRef.value.reset()
|
||||
smartClassifyButtonRef.value?.reset()
|
||||
} else {
|
||||
showToast(response.message || '加载账单失败')
|
||||
billListFinished.value = true
|
||||
@@ -749,6 +750,25 @@ const onSmartClassifySave = async () => {
|
||||
showToast('智能分类已保存')
|
||||
}
|
||||
|
||||
const handleNotifiedTransactionId = async (transactionId) => {
|
||||
console.log('收到已处理交易ID通知:', transactionId)
|
||||
// 滚动到指定的交易项
|
||||
const index = categoryBills.value.findIndex(item => item.id === transactionId)
|
||||
if (index !== -1) {
|
||||
// 等待 DOM 更新
|
||||
await nextTick()
|
||||
|
||||
const listElement = document.querySelector('.transaction-list')
|
||||
if (listElement) {
|
||||
const items = listElement.querySelectorAll('.transaction-item')
|
||||
const itemElement = items[index]
|
||||
if (itemElement) {
|
||||
itemElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
fetchStatistics()
|
||||
|
||||
Reference in New Issue
Block a user