- 新增 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 {useCounterStore} from "@/stores/counter.ts"
|
||||||
import {useRouter} from "vue-router"
|
import {useRouter} from "vue-router"
|
||||||
import {Plus, View, Edit, Delete, Key, Document, Memo, Search, Lock, DocumentAdd} from '@element-plus/icons-vue'
|
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 store = useCounterStore()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@@ -19,6 +20,7 @@ const inputPassWord = ref('')
|
|||||||
const passwordVisible = ref(true)
|
const passwordVisible = ref(true)
|
||||||
|
|
||||||
const rowOut = ref<any>(null)
|
const rowOut = ref<any>(null)
|
||||||
|
const addDataDialogVisible = ref(false)
|
||||||
const dedupObjectVisible = ref(false)
|
const dedupObjectVisible = ref(false)
|
||||||
const dataFormatVisible = ref(false)
|
const dataFormatVisible = ref(false)
|
||||||
const inputNotesVisible = ref(false)
|
const inputNotesVisible = ref(false)
|
||||||
@@ -116,6 +118,7 @@ const dialogNotesVisible = (row: any) => {
|
|||||||
|
|
||||||
const dialogDataADDVisible = (row: any) => {
|
const dialogDataADDVisible = (row: any) => {
|
||||||
rowOut.value = row
|
rowOut.value = row
|
||||||
|
addDataDialogVisible.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateDedupObject = async () => {
|
const updateDedupObject = async () => {
|
||||||
@@ -307,7 +310,7 @@ const deleteToken = async (row: any) => {
|
|||||||
</el-icon>
|
</el-icon>
|
||||||
详情
|
详情
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button size="small" text @click="dialogNotesVisible(row)">
|
<el-button size="small" text @click="dialogDataADDVisible(row)">
|
||||||
<el-icon>
|
<el-icon>
|
||||||
<Plus/>
|
<Plus/>
|
||||||
</el-icon>
|
</el-icon>
|
||||||
@@ -381,6 +384,11 @@ const deleteToken = async (row: any) => {
|
|||||||
<el-button type="primary" @click="updateNotes">确定</el-button>
|
<el-button type="primary" @click="updateNotes">确定</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
|
<AddDataDialog
|
||||||
|
v-model="addDataDialogVisible"
|
||||||
|
:token="rowOut?.token"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user