feat(import): 前端导入策略选择器 + 部分导入支持

- 新增导入策略单选:跳过重复行 / 覆盖更新
- 预览状态新增「将被更新」标签(橙色),区分「通过」「失败」
- 支持部分导入:有错误行时显示「忽略错误,仅导入正确的 N 条」按钮
- 预览时传递 mode 参数给后端
- 导入结果展示新增/更新/跳过数量
This commit is contained in:
yueli
2026-08-03 15:53:24 +08:00
parent 22c7d352d6
commit d0776f1036

View File

@ -42,6 +42,22 @@
</el-upload>
</div>
<!-- 导入策略选择仅基础信息 -->
<div v-if="importType === 'material'" class="import-strategy">
<el-divider />
<span class="step-label">3. 导入策略</span>
<el-radio-group v-model="importMode" class="strategy-group">
<el-radio value="skip">
<span class="strategy-label">跳过重复行</span>
<span class="strategy-desc">仅新增不重复的数据已存在的直接跳过</span>
</el-radio>
<el-radio value="update">
<span class="strategy-label">覆盖更新</span>
<span class="strategy-desc"> Excel 中的新数据覆盖更新数据库已有记录</span>
</el-radio>
</el-radio-group>
</div>
<div v-if="previewLoading" class="preview-loading">
<el-icon class="is-loading" style="font-size:20px"><Loading /></el-icon>
<span style="margin-left:8px">正在解析和验证数据...</span>
@ -60,11 +76,11 @@
<el-table :data="previewRows" border stripe max-height="450" style="width:100%">
<el-table-column type="index" label="#" width="50" align="center" />
<el-table-column label="状态" width="90" align="center">
<el-table-column label="状态" width="100" align="center">
<template #default="{ row }">
<el-tag :type="row.status === 'success' ? 'success' : 'danger'" size="small">
{{ row.status === 'success' ? '通过' : '失败' }}
</el-tag>
<el-tag v-if="row.status === 'success'" type="success" size="small">通过</el-tag>
<el-tag v-else-if="row.status === 'update'" type="warning" size="small">将被更新</el-tag>
<el-tag v-else type="danger" size="small">失败</el-tag>
</template>
</el-table-column>
<el-table-column label="错误信息" min-width="200" show-overflow-tooltip>
@ -91,12 +107,24 @@
<!-- Footer -->
<template #footer>
<el-button @click="handleClose" :disabled="executing">取消</el-button>
<!-- Step 1: 预览按钮 -->
<el-button v-if="step === 1" type="primary" @click="handlePreview" :loading="previewLoading" :disabled="!fileReady">
预览验证
</el-button>
<el-button v-if="step === 2" type="primary" @click="handleExecute" :loading="executing" :disabled="errorCount > 0 || executing">
{{ executing ? '导入中...' : `确认导入 (${successCount} )` }}
<!-- Step 2: 全部通过/将被更新 直接导入 -->
<el-button v-if="step === 2 && errorCount === 0" type="primary" @click="handleExecute" :loading="executing">
{{ executing ? '导入中...' : `全部导入 (${importableCount} )` }}
</el-button>
<!-- Step 2: 部分通过 允许跳过错误行导入 -->
<el-button v-else-if="step === 2 && importableCount > 0" type="warning" @click="handleExecute" :loading="executing">
{{ executing ? '导入中...' : `忽略错误仅导入正确的 ${importableCount} ` }}
</el-button>
<!-- Step 2: 全部失败 禁用 -->
<el-button v-else-if="step === 2" disabled>无可导入数据</el-button>
</template>
</el-dialog>
</template>
@ -138,12 +166,21 @@ const fileList = ref<any[]>([])
const fileReady = ref(false)
const rawFile = ref<File | null>(null)
// ★ 新增:导入策略(仅 material 类型生效)
const importMode = ref<'skip' | 'update'>('skip')
const previewRows = ref<any[]>([])
const successCount = computed(() => previewRows.value.filter(r => r.status === 'success').length)
const updateCount = computed(() => previewRows.value.filter(r => r.status === 'update').length)
const errorCount = computed(() => previewRows.value.filter(r => r.status === 'error').length)
const previewSummary = computed(() =>
`${previewRows.value.length} 条: ${successCount.value} 条通过, ${errorCount.value} 条失败`
)
const importableCount = computed(() => successCount.value + updateCount.value)
const previewSummary = computed(() => {
const parts = [`${previewRows.value.length}`]
if (successCount.value > 0) parts.push(`${successCount.value} 条通过`)
if (updateCount.value > 0) parts.push(`${updateCount.value} 条将被更新`)
if (errorCount.value > 0) parts.push(`${errorCount.value} 条失败`)
return parts.join('')
})
// ═══ Preview Columns (depends on type) ═══
const materialColumns = [
@ -218,6 +255,7 @@ const handlePreview = async () => {
const formData = new FormData()
formData.append('file', rawFile.value)
formData.append('type', props.importType)
formData.append('mode', importMode.value) // ★ 预览时传递导入策略
const res: any = await request({
url: '/v1/import/preview',
@ -240,7 +278,7 @@ const handlePreview = async () => {
}
const handleExecute = async () => {
if (errorCount.value > 0) return
if (importableCount.value === 0) return
executing.value = true
try {
const res: any = await request({
@ -248,12 +286,19 @@ const handleExecute = async () => {
method: 'post',
data: {
type: props.importType,
rows: previewRows.value
rows: previewRows.value,
mode: importMode.value,
}
})
if (res.code === 200) {
ElMessage.success(res.msg || '导入成功')
const detail = res.data || {}
// ★ 构建详细结果提示
const parts: string[] = []
if (detail.inserted > 0) parts.push(`新增 ${detail.inserted}`)
if (detail.updated > 0) parts.push(`更新 ${detail.updated}`)
if (detail.skipped > 0) parts.push(`跳过 ${detail.skipped} 条重复`)
ElMessage.success(parts.length > 0 ? parts.join('') : (res.msg || '导入完成'))
emit('success')
handleClose()
} else {
@ -272,6 +317,7 @@ const handleClose = () => {
rawFile.value = null
fileReady.value = false
previewRows.value = []
importMode.value = 'skip'
visible.value = false
}
@ -283,6 +329,7 @@ watch(visible, (val) => {
rawFile.value = null
fileReady.value = false
previewRows.value = []
importMode.value = 'skip'
}
})
</script>
@ -309,6 +356,38 @@ watch(visible, (val) => {
color: #909399;
font-size: 14px;
}
.import-strategy {
margin-top: 8px;
}
.strategy-group {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.strategy-group .el-radio {
margin-right: 0;
height: auto;
padding: 10px 14px;
border: 1px solid #DCDFE6;
border-radius: 6px;
transition: border-color 0.2s;
}
.strategy-group .el-radio.is-checked {
border-color: #409EFF;
background: #ECF5FF;
}
.strategy-label {
font-weight: 600;
font-size: 14px;
display: block;
}
.strategy-desc {
font-size: 12px;
color: #909399;
display: block;
margin-top: 2px;
}
:deep(.el-upload-dragger) {
width: 100%;
}