Files
crawler-plugin/admin-frontend-vue/src/pages/records/RecordsSoftwareVersionPage.vue
T

112 lines
3.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<script setup lang="ts">
import { formatDateTime } from '@/utils/datetime'
/** 软件版本管理页:客户端版本列表 + 上传新版本。 */
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { fetchSoftwareVersions, uploadSoftwareVersion } from './version-api.ts'
import type { SoftwareVersionItem } from './version-dto.ts'
import { isNonEmptyVersion } from './version-dto.ts'
const loading = ref(false)
const items = ref<SoftwareVersionItem[]>([])
const uploadVisible = ref(false)
const uploading = ref(false)
const newVersion = ref('')
const pickedFile = ref<File | null>(null)
async function load() {
loading.value = true
try {
items.value = (await fetchSoftwareVersions()).items
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '版本列表加载失败')
} finally {
loading.value = false
}
}
function onFileChange(file: File) {
pickedFile.value = file
}
async function submitUpload() {
if (!isNonEmptyVersion(newVersion.value)) {
ElMessage.warning('版本号不能为空')
return
}
if (!pickedFile.value) {
ElMessage.warning('请选择程序压缩包')
return
}
uploading.value = true
try {
await uploadSoftwareVersion(newVersion.value.trim(), pickedFile.value, pickedFile.value.name)
ElMessage.success('上传成功')
uploadVisible.value = false
newVersion.value = ''
pickedFile.value = null
load()
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '上传失败')
} finally {
uploading.value = false
}
}
onMounted(load)
</script>
<template>
<div class="page-stack">
<div class="page-heading">
<div>
<h2>软件版本管理</h2>
<p>管理客户端更新包版本用于 /api/version/latest 下发)。</p>
</div>
<div class="actions">
<el-button type="primary" @click="uploadVisible = true">上传新版本</el-button>
</div>
</div>
<el-card shadow="never">
<el-table v-loading="loading" :data="items" stripe border>
<el-table-column prop="version" label="版本号" min-width="180" />
<el-table-column label="下载" min-width="260">
<template #default="{ row }">
<el-link v-if="(row as SoftwareVersionItem).fileUrl" type="primary" :href="(row as SoftwareVersionItem).fileUrl" target="_blank">{{ (row as SoftwareVersionItem).fileUrl }}</el-link>
<span v-else class="dim"></span>
</template>
</el-table-column>
<el-table-column prop="createdAt" label="创建时间" min-width="190">
<template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog v-model="uploadVisible" title="上传软件版本" width="520px">
<el-form label-width="110px">
<el-form-item label="版本号" required>
<el-input v-model="newVersion" placeholder="如 1.0.2" />
</el-form-item>
<el-form-item label="程序压缩包" required>
<el-upload :auto-upload="false" :limit="1" accept=".zip,.rar,.7z,.exe" :on-change="(file: any) => onFileChange(file.raw)" :on-remove="() => (pickedFile = null)">
<el-button>选择文件</el-button>
</el-upload>
<div v-if="pickedFile" class="dim">{{ pickedFile.name }}</div>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="uploadVisible = false">取消</el-button>
<el-button type="primary" :loading="uploading" @click="submitUpload">上传</el-button>
</template>
</el-dialog>
</div>
</template>
<style scoped>
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.actions { display: flex; align-items: center; gap: 10px; }
.dim { color: var(--el-text-color-secondary); font-size: 12px; }
</style>