后台继续生成符合“取消需二次确认”的现有逻辑,但弹窗状态没有跟随任务完成状态更新,属于交互竞态问题 已修复
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
<div v-if="generateStatusVisible" class="generate-status-float">
|
||||
<el-tooltip :content="generateStatusTooltip" placement="bottom">
|
||||
<el-button class="generate-status-button" type="primary" plain size="small"
|
||||
:disabled="activeGenerateTask?.status === 'CANCEL_REQUESTED'" @click="cancelActiveGenerateTask">
|
||||
:disabled="!canCancelActiveGenerateTask" @click="cancelActiveGenerateTask">
|
||||
<span class="generate-progress-ring" :style="{ '--generate-progress': `${generateProgressDegree}deg` }" aria-hidden="true">
|
||||
<span class="generate-progress-value">{{ generateProgressText }}</span>
|
||||
</span>
|
||||
@@ -50,6 +50,16 @@
|
||||
|
||||
<bill-detail v-model="detailOpen" :detail="detail" :loading="detailLoading" @download="downloadExport" @export="exportBill(detail)" />
|
||||
<generate-bill-dialog v-model="generateOpen" @success="handleGenerateSuccess" />
|
||||
<el-dialog v-model="cancelConfirmVisible" title="取消账单生成" width="420px" append-to-body
|
||||
:close-on-click-modal="false" :close-on-press-escape="!cancelConfirmLoading"
|
||||
:show-close="!cancelConfirmLoading" @closed="handleCancelConfirmClosed">
|
||||
<p class="cancel-generate-message">账单正在后台生成,确定取消当前任务吗?</p>
|
||||
<template #footer>
|
||||
<el-button :disabled="cancelConfirmLoading" @click="cancelConfirmVisible = false">暂不取消</el-button>
|
||||
<el-button type="warning" :loading="cancelConfirmLoading" :disabled="cancelConfirmDisabled"
|
||||
@click="confirmCancelActiveGenerateTask">{{ cancelConfirmLoading ? '取消中' : '确定取消' }}</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -83,13 +93,27 @@ const generateTasks = reactive(new Map())
|
||||
const activeGenerateTasks = computed(() => Array.from(generateTasks.values()))
|
||||
const activeGenerateTask = computed(() => activeGenerateTasks.value[0])
|
||||
const generateStatusVisible = computed(() => activeGenerateTasks.value.length > 0)
|
||||
const cancelConfirmVisible = ref(false)
|
||||
const cancelConfirmLoading = ref(false)
|
||||
const cancelConfirmTaskId = ref()
|
||||
const cancelConfirmTask = computed(() => cancelConfirmTaskId.value ? generateTasks.get(cancelConfirmTaskId.value) : null)
|
||||
const canCancelActiveGenerateTask = computed(() => ['WAITING', 'RUNNING'].includes(activeGenerateTask.value?.status))
|
||||
const cancelConfirmDisabled = computed(() => {
|
||||
return cancelConfirmLoading.value || !['WAITING', 'RUNNING'].includes(cancelConfirmTask.value?.status)
|
||||
})
|
||||
const generateStatusTitle = computed(() => {
|
||||
const status = activeGenerateTask.value?.status
|
||||
if (status === 'WAITING') return '账单排队中'
|
||||
if (status === 'SUCCESS') return '账单生成完成'
|
||||
if (status === 'FAILED') return '账单生成失败'
|
||||
if (status === 'CANCELED') return '账单已取消'
|
||||
if (status === 'CANCEL_REQUESTED') return '账单取消中'
|
||||
return '账单生成中'
|
||||
})
|
||||
const generateStatusTooltip = computed(() => {
|
||||
if (['SUCCESS', 'FAILED', 'CANCELED'].includes(activeGenerateTask.value?.status)) {
|
||||
return '任务状态已更新'
|
||||
}
|
||||
return activeGenerateTask.value?.status === 'CANCEL_REQUESTED'
|
||||
? '正在清理已生成的账单数据,请稍候'
|
||||
: '点击取消当前账单生成任务'
|
||||
@@ -107,6 +131,8 @@ const generateProgressDegree = computed(() => {
|
||||
const generateStatusSummary = computed(() => {
|
||||
const task = activeGenerateTask.value
|
||||
if (!task) return '任务提交中'
|
||||
if (task.status === 'FAILED') return '任务执行失败'
|
||||
if (task.status === 'CANCELED') return '任务已取消'
|
||||
if (task.status === 'CANCEL_REQUESTED') return '正在清理数据'
|
||||
if (task.status === 'WAITING') return '等待后台处理'
|
||||
if (Number(task.totalCount) > 0) return `${Number(task.processedCount || 0)} / ${Number(task.totalCount)} 条`
|
||||
@@ -164,6 +190,7 @@ function startGeneratePolling(taskId) {
|
||||
|
||||
function finishGenerateTask(taskId, task) {
|
||||
stopGeneratePolling(taskId)
|
||||
closeCancelConfirm(taskId)
|
||||
if (generateFinishTimers.has(taskId)) return
|
||||
// 即使后台很快返回 SUCCESS,也延迟清理浮层,保证用户能看到结果反馈。
|
||||
const visibleSince = generateVisibleSince.get(taskId) || Date.now()
|
||||
@@ -200,12 +227,50 @@ function stopGeneratePolling(taskId) {
|
||||
|
||||
function cancelActiveGenerateTask() {
|
||||
const task = activeGenerateTask.value
|
||||
if (!task?.taskId) return
|
||||
proxy.$modal.confirm('账单正在后台生成,确定取消当前任务吗?').then(() => cancelArBillGenerateTask(task.taskId)).then(res => {
|
||||
if (!task?.taskId || !canCancelActiveGenerateTask.value) return
|
||||
cancelConfirmTaskId.value = task.taskId
|
||||
cancelConfirmLoading.value = false
|
||||
cancelConfirmVisible.value = true
|
||||
}
|
||||
|
||||
async function confirmCancelActiveGenerateTask() {
|
||||
const taskId = cancelConfirmTaskId.value
|
||||
const task = taskId ? generateTasks.get(taskId) : null
|
||||
if (!taskId || !['WAITING', 'RUNNING'].includes(task?.status)) {
|
||||
cancelConfirmVisible.value = false
|
||||
return
|
||||
}
|
||||
cancelConfirmLoading.value = true
|
||||
try {
|
||||
const res = await cancelArBillGenerateTask(taskId)
|
||||
const updated = res.data
|
||||
if (updated) generateTasks.set(updated.taskId, updated)
|
||||
proxy.$modal.msgSuccess('已提交取消请求')
|
||||
}).catch(() => {})
|
||||
let cancellationSubmitted = true
|
||||
if (updated?.taskId) {
|
||||
generateTasks.set(updated.taskId, updated)
|
||||
if (['SUCCESS', 'FAILED', 'CANCELED'].includes(updated.status)) {
|
||||
finishGenerateTask(updated.taskId, updated)
|
||||
cancellationSubmitted = false
|
||||
}
|
||||
}
|
||||
cancelConfirmVisible.value = false
|
||||
if (cancellationSubmitted) proxy.$modal.msgSuccess('已提交取消请求')
|
||||
} catch (error) {
|
||||
// 请求失败时保留弹窗,允许用户重新确认;全局请求拦截器负责展示错误信息。
|
||||
} finally {
|
||||
cancelConfirmLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function closeCancelConfirm(taskId) {
|
||||
if (cancelConfirmTaskId.value !== taskId) return
|
||||
cancelConfirmVisible.value = false
|
||||
cancelConfirmLoading.value = false
|
||||
cancelConfirmTaskId.value = undefined
|
||||
}
|
||||
|
||||
function handleCancelConfirmClosed() {
|
||||
cancelConfirmLoading.value = false
|
||||
cancelConfirmTaskId.value = undefined
|
||||
}
|
||||
|
||||
function loadActiveGenerateTasks() {
|
||||
@@ -390,6 +455,11 @@ function statusType(value) { return AR_BILL_STATUS_TYPES[value] || 'info' }
|
||||
.ar-bill-page .amount { color: #f56c6c; font-weight: 600; }
|
||||
.ar-bill-page .written { color: #67c23a; }
|
||||
.ar-bill-page .unwritten { color: #e6a23c; }
|
||||
.ar-bill-page .cancel-generate-message {
|
||||
margin: 0;
|
||||
color: var(--el-text-color-primary);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.ar-bill-page .generate-status-float {
|
||||
position: fixed;
|
||||
|
||||
Reference in New Issue
Block a user