134 lines
2.8 KiB
Vue
134 lines
2.8 KiB
Vue
<template>
|
|
<a-modal
|
|
:open="visible"
|
|
title="同名文件提示"
|
|
:footer="null"
|
|
width="600px"
|
|
:mask-closable="false"
|
|
@cancel="handleSkipAll"
|
|
>
|
|
<div class="duplicate-file-modal">
|
|
<!-- 警告提示 -->
|
|
<a-alert
|
|
message="上传的文件存在同名文件，是否覆盖？"
|
|
type="warning"
|
|
show-icon
|
|
class="warning-alert"
|
|
/>
|
|
|
|
<!-- 文件列表 -->
|
|
<a-table
|
|
:columns="columns"
|
|
:data-source="duplicateFiles"
|
|
:pagination="false"
|
|
size="small"
|
|
class="file-table"
|
|
:scroll="{ y: 300 }"
|
|
>
|
|
<template #bodyCell="{ column, record, index }">
|
|
<template v-if="column.key === 'index'">
|
|
{{ index + 1 }}
|
|
</template>
|
|
<template v-if="column.key === 'name'">
|
|
<span class="file-name">{{ record.path || record.name }}</span>
|
|
</template>
|
|
<template v-if="column.key === 'size'">
|
|
<span class="file-size">{{ formatSize(record.size) }}</span>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
|
|
<!-- 底部按钮 -->
|
|
<div class="modal-footer">
|
|
<a-space>
|
|
<a-button @click="handleSkipAll">跳过</a-button>
|
|
<a-button type="primary" @click="handleOverwriteAll">覆盖</a-button>
|
|
</a-space>
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { DuplicateFile } from '@/types'
|
|
|
|
defineProps<{
|
|
visible: boolean
|
|
duplicateFiles: DuplicateFile[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:visible', value: boolean): void
|
|
(e: 'skip-all'): void
|
|
(e: 'overwrite-all'): void
|
|
}>()
|
|
|
|
const columns = [
|
|
{ title: '序号', key: 'index', width: 60 },
|
|
{ title: '名称', key: 'name', ellipsis: true },
|
|
{ title: '文件大小', key: 'size', width: 120 }
|
|
]
|
|
|
|
/**
|
|
* 格式化文件大小
|
|
*/
|
|
function formatSize(bytes: number): string {
|
|
if (bytes === 0) return '0 B'
|
|
const k = 1024
|
|
const sizes = ['B', 'KB', 'MB', 'GB']
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
|
}
|
|
|
|
/**
|
|
* 跳过所有
|
|
*/
|
|
function handleSkipAll() {
|
|
emit('skip-all')
|
|
emit('update:visible', false)
|
|
}
|
|
|
|
/**
|
|
* 覆盖所有
|
|
*/
|
|
function handleOverwriteAll() {
|
|
emit('overwrite-all')
|
|
emit('update:visible', false)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.duplicate-file-modal {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.warning-alert {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.file-table {
|
|
border: 1px solid #f0f0f0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.file-name {
|
|
font-size: 13px;
|
|
color: #333;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.file-size {
|
|
font-size: 13px;
|
|
color: #666;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding-top: 16px;
|
|
border-top: 1px solid #f0f0f0;
|
|
}
|
|
</style>
|