|
@@ -9,13 +9,13 @@
|
|
|
>
|
|
>
|
|
|
<!-- 步骤圆圈 -->
|
|
<!-- 步骤圆圈 -->
|
|
|
<div class="step-circle">
|
|
<div class="step-circle">
|
|
|
- <div v-if="step.status === '处理完成'" class="step-icon completed">
|
|
|
|
|
|
|
+ <div v-if="step.status === tCompleted.value" class="step-icon completed">
|
|
|
<el-icon><Check /></el-icon>
|
|
<el-icon><Check /></el-icon>
|
|
|
</div>
|
|
</div>
|
|
|
- <div v-else-if="step.status === '正在处理'" class="step-icon processing">
|
|
|
|
|
|
|
+ <div v-else-if="step.status === tProcessing.value" class="step-icon processing">
|
|
|
{{ index + 1 }}
|
|
{{ index + 1 }}
|
|
|
</div>
|
|
</div>
|
|
|
- <div v-else-if="step.status === '处理失败'" class="step-icon failed">
|
|
|
|
|
|
|
+ <div v-else-if="step.status === tFailed.value" class="step-icon failed">
|
|
|
<el-icon><Close /></el-icon>
|
|
<el-icon><Close /></el-icon>
|
|
|
</div>
|
|
</div>
|
|
|
<div v-else class="step-icon waiting">
|
|
<div v-else class="step-icon waiting">
|
|
@@ -28,16 +28,14 @@
|
|
|
<div class="step-title">{{ step.name }}</div>
|
|
<div class="step-title">{{ step.name }}</div>
|
|
|
<div class="step-status">
|
|
<div class="step-status">
|
|
|
{{ getStepTitle(step) }}
|
|
{{ getStepTitle(step) }}
|
|
|
- <div v-if="step.status !== '等待处理'" class="step-details">
|
|
|
|
|
- 第{{ step.current }}/{{ step.total }}款
|
|
|
|
|
|
|
+ <div v-if="step.status !== tWaiting.value" class="step-details">
|
|
|
|
|
+ {{ tCurrentProgress.value.replace('{current}', step.current).replace('{total}', step.total) }}
|
|
|
{{ getCurrentGoodsNo(step) }}
|
|
{{ getCurrentGoodsNo(step) }}
|
|
|
- <span v-if="step.error" style="color: red; margin-left:5px;">失败:{{step.error}}款</span>
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
|
|
+ <span v-if="step.error" style="color: red; margin-left:5px;">{{ tFailedCount.value.replace('{count}', step.error) }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div v-if="step.folder" class="step-actions">
|
|
<div v-if="step.folder" class="step-actions">
|
|
|
- <span class="view-results" @click="handleViewResults(step)">查看结果</span>
|
|
|
|
|
|
|
+ <span class="view-results" @click="handleViewResults(step)">{{ tViewResults }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
@@ -55,7 +53,7 @@
|
|
|
class="completion-button"
|
|
class="completion-button"
|
|
|
@click="handleComplete"
|
|
@click="handleComplete"
|
|
|
>
|
|
>
|
|
|
- 处理完毕,点击打开最终图片目录
|
|
|
|
|
|
|
+ {{ tProcessComplete }}
|
|
|
</el-button>
|
|
</el-button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -64,16 +62,17 @@
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { ref, computed, watch } from 'vue'
|
|
import { ref, computed, watch } from 'vue'
|
|
|
import { Check, Close } from '@element-plus/icons-vue'
|
|
import { Check, Close } from '@element-plus/icons-vue'
|
|
|
|
|
+import i18n from '@/locales'
|
|
|
|
|
|
|
|
interface StepData {
|
|
interface StepData {
|
|
|
msg_type: string
|
|
msg_type: string
|
|
|
goods_art_no: string
|
|
goods_art_no: string
|
|
|
name: string
|
|
name: string
|
|
|
- status: '等待处理' | '正在处理' | '处理完成' | '处理失败'
|
|
|
|
|
|
|
+ status: string
|
|
|
current: number
|
|
current: number
|
|
|
total: number
|
|
total: number
|
|
|
error: number
|
|
error: number
|
|
|
- folder?: string // 添加folder字段
|
|
|
|
|
|
|
+ folder?: string
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
interface Props {
|
|
interface Props {
|
|
@@ -96,19 +95,28 @@ const emit = defineEmits<{
|
|
|
(e: 'complete'): void
|
|
(e: 'complete'): void
|
|
|
}>()
|
|
}>()
|
|
|
|
|
|
|
|
|
|
+// i18n 翻译
|
|
|
|
|
+const tWaiting = computed(() => i18n.global.t('loadingDialog.waiting'))
|
|
|
|
|
+const tProcessing = computed(() => i18n.global.t('loadingDialog.processing'))
|
|
|
|
|
+const tCompleted = computed(() => i18n.global.t('loadingDialog.completed'))
|
|
|
|
|
+const tFailed = computed(() => i18n.global.t('loadingDialog.failed'))
|
|
|
|
|
+const tViewResults = computed(() => i18n.global.t('loadingDialog.viewResults'))
|
|
|
|
|
+const tProcessComplete = computed(() => i18n.global.t('loadingDialog.processComplete'))
|
|
|
|
|
+const tCurrentProgress = computed(() => i18n.global.t('loadingDialog.currentProgress'))
|
|
|
|
|
+const tFailedCount = computed(() => i18n.global.t('loadingDialog.failedCount'))
|
|
|
|
|
|
|
|
// 获取步骤标题
|
|
// 获取步骤标题
|
|
|
const getStepTitle = (step: StepData) => {
|
|
const getStepTitle = (step: StepData) => {
|
|
|
- return step.status
|
|
|
|
|
|
|
+ return step.status
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 获取步骤样式类
|
|
// 获取步骤样式类
|
|
|
const getStepClass = (step: StepData) => {
|
|
const getStepClass = (step: StepData) => {
|
|
|
return {
|
|
return {
|
|
|
- 'step-completed': step.status === '处理完成',
|
|
|
|
|
- 'step-processing': step.status === '正在处理',
|
|
|
|
|
- 'step-failed': step.status === '处理失败',
|
|
|
|
|
- 'step-waiting': step.status === '等待处理'
|
|
|
|
|
|
|
+ 'step-completed': step.status === tCompleted.value,
|
|
|
|
|
+ 'step-processing': step.status === tProcessing.value,
|
|
|
|
|
+ 'step-failed': step.status === tFailed.value,
|
|
|
|
|
+ 'step-waiting': step.status === tWaiting.value
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|