- 新增 AddDataDialog 组件用于数据批量上传 - 在 TokenManageView 中集成数据上传对话框 - 实现按行分割数据并逐条上传的功能 - 添加上传进度显示和计数功能 - 集成 API 接口进行数据提交 - 添加上传状态控制和错误处理机制
This commit is contained in:
@@ -0,0 +1,150 @@
|
||||
<script setup lang="ts">
|
||||
import {ref, computed} from "vue"
|
||||
import axios from "@/axios.ts"
|
||||
import {ElMessage} from 'element-plus'
|
||||
import {Upload} from '@element-plus/icons-vue'
|
||||
import * as timers from "node:timers";
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
token?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
}>()
|
||||
|
||||
const inputData = ref('')
|
||||
const uploading = ref(false)
|
||||
const uploadedCount = ref(0)
|
||||
const totalCount = computed(() => {
|
||||
const lines = inputData.value.split('\n').filter(line => line.trim())
|
||||
return lines.length
|
||||
})
|
||||
|
||||
const close = () => {
|
||||
emit('update:modelValue', false)
|
||||
inputData.value = ''
|
||||
uploadedCount.value = 0
|
||||
}
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (!inputData.value.trim()) {
|
||||
ElMessage.warning('请输入数据')
|
||||
return
|
||||
}
|
||||
|
||||
uploading.value = true
|
||||
uploadedCount.value = 0
|
||||
|
||||
const lines = inputData.value.split('\n').filter(line => line.trim())
|
||||
const total = lines.length
|
||||
uploadedCount.value = 0
|
||||
|
||||
for (const line of lines) {
|
||||
try {
|
||||
await axios.post('/api/data', {}, {
|
||||
params: {
|
||||
data: line,
|
||||
token: props.token || ''
|
||||
}
|
||||
})
|
||||
uploadedCount.value++
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.response?.data?.error || '上传失败')
|
||||
uploading.value = false
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
uploading.value = false
|
||||
ElMessage({message: '已上传成功 ' + uploadedCount.value + ' 条数据', type: 'success'})
|
||||
setTimeout(() => {
|
||||
close()
|
||||
}, 2000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="modelValue"
|
||||
@update:model-value="emit('update:modelValue', $event)"
|
||||
width="700px"
|
||||
:close-on-click-modal="false"
|
||||
@close="close"
|
||||
>
|
||||
<template #title>
|
||||
添加数据
|
||||
<el-tag type="primary" effect="plain">{{ props.token }}</el-tag>
|
||||
</template>
|
||||
<div class="add-data-dialog">
|
||||
<el-input
|
||||
v-model="inputData"
|
||||
type="textarea"
|
||||
:rows="18"
|
||||
placeholder="请输入数据,每行一条"
|
||||
:disabled="uploading"
|
||||
class="textarea-input"
|
||||
/>
|
||||
|
||||
<div class="footer">
|
||||
<div class="progress">
|
||||
<el-progress
|
||||
:percentage="totalCount > 0 ? Math.round((uploadedCount / totalCount) * 100) : 0"
|
||||
:show-text="false"
|
||||
/>
|
||||
<span class="progress-text">已上传 {{ uploadedCount }}/{{ totalCount }} 行</span>
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="uploading"
|
||||
@click="handleUpload"
|
||||
>
|
||||
<el-icon v-if="!uploading">
|
||||
<Upload/>
|
||||
</el-icon>
|
||||
上传
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.add-data-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.textarea-input :deep(.el-textarea__inner) {
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.footer .el-progress {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -5,6 +5,7 @@ import {ElMessage} from 'element-plus'
|
||||
import {useCounterStore} from "@/stores/counter.ts"
|
||||
import {useRouter} from "vue-router"
|
||||
import {Plus, View, Edit, Delete, Key, Document, Memo, Search, Lock, DocumentAdd} from '@element-plus/icons-vue'
|
||||
import AddDataDialog from '@/components/AddDataDialog.vue'
|
||||
|
||||
const store = useCounterStore()
|
||||
const router = useRouter()
|
||||
@@ -19,6 +20,7 @@ const inputPassWord = ref('')
|
||||
const passwordVisible = ref(true)
|
||||
|
||||
const rowOut = ref<any>(null)
|
||||
const addDataDialogVisible = ref(false)
|
||||
const dedupObjectVisible = ref(false)
|
||||
const dataFormatVisible = ref(false)
|
||||
const inputNotesVisible = ref(false)
|
||||
@@ -116,6 +118,7 @@ const dialogNotesVisible = (row: any) => {
|
||||
|
||||
const dialogDataADDVisible = (row: any) => {
|
||||
rowOut.value = row
|
||||
addDataDialogVisible.value = true
|
||||
}
|
||||
|
||||
const updateDedupObject = async () => {
|
||||
@@ -307,7 +310,7 @@ const deleteToken = async (row: any) => {
|
||||
</el-icon>
|
||||
详情
|
||||
</el-button>
|
||||
<el-button size="small" text @click="dialogNotesVisible(row)">
|
||||
<el-button size="small" text @click="dialogDataADDVisible(row)">
|
||||
<el-icon>
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
@@ -381,6 +384,11 @@ const deleteToken = async (row: any) => {
|
||||
<el-button type="primary" @click="updateNotes">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<AddDataDialog
|
||||
v-model="addDataDialogVisible"
|
||||
:token="rowOut?.token"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user