feat: 对接虚拟化平台管理
This commit is contained in:
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="snapshot-manage">
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="handleCreate"><el-icon><Plus /></el-icon>创建快照</el-button>
|
||||
<el-button @click="loadList"><el-icon><Refresh /></el-icon>刷新</el-button>
|
||||
</div>
|
||||
<el-table :data="list" v-loading="loading" stripe size="small" style="width: 100%">
|
||||
<el-table-column prop="id" label="ID" width="60" />
|
||||
<el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="vm_id" label="虚拟机ID" width="90" />
|
||||
<el-table-column prop="description" label="描述" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column label="状态" width="90">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status === 'completed' ? 'success' : row.status === 'failed' ? 'danger' : 'warning'" size="small">
|
||||
{{ statusLabel(row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" width="170">
|
||||
<template #default="{ row }">{{ formatTs(row.created_at) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click="handleRestore(row)">恢复</el-button>
|
||||
<el-button link type="info" size="small" @click="handleProgress(row)">进度</el-button>
|
||||
<el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-empty v-if="!list.length && !loading" description="暂无快照数据" />
|
||||
|
||||
<el-dialog v-model="createVisible" title="创建快照" width="480px" destroy-on-close>
|
||||
<el-form :model="createForm" label-width="100px">
|
||||
<el-form-item label="虚拟机" required>
|
||||
<el-select v-model="createForm.vm_id" placeholder="请选择虚拟机" filterable style="width: 100%" :loading="vmOptionsLoading">
|
||||
<el-option v-for="vm in vmOptions" :key="vm.id" :label="`${vm.name} (ID: ${vm.id})`" :value="vm.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="快照名称" required>
|
||||
<el-input v-model="createForm.name" placeholder="请输入快照名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="createForm.description" type="textarea" :rows="2" placeholder="可选描述" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="createVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitCreate">创建</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="progressVisible" title="快照任务进度" width="420px" destroy-on-close>
|
||||
<div v-loading="progressLoading">
|
||||
<el-descriptions :column="1" border size="small" v-if="progressData">
|
||||
<el-descriptions-item v-for="(val, key) in progressData" :key="key" :label="key">{{ val }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-empty v-else description="暂无进度信息" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="progressVisible = false">关闭</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, inject, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Refresh } from '@element-plus/icons-vue'
|
||||
import { getSnapshotList, createSnapshot, restoreSnapshot, deleteSnapshot, getSnapshotProgress, getVmList } from '@/api/admin/kvmService'
|
||||
import { extractApiError } from '@/utils/kvmErrorUtil'
|
||||
|
||||
const serviceId = inject('serviceId')
|
||||
const loading = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const list = ref([])
|
||||
|
||||
const statusLabel = (s) => ({ completed: '完成', pending: '等待', running: '运行中', failed: '失败' }[s] || s || '-')
|
||||
const formatTs = (ts) => {
|
||||
if (!ts) return '-'
|
||||
if (typeof ts === 'object' && ts.seconds) return new Date(Number(ts.seconds) * 1000).toLocaleString('zh-CN')
|
||||
return typeof ts === 'string' ? ts : '-'
|
||||
}
|
||||
|
||||
const loadList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getSnapshotList({ service_id: serviceId.value })
|
||||
if (res?.data?.code === 200 && res?.data?.data) {
|
||||
const d = res.data.data
|
||||
list.value = d.snapshots || d.data || d.list || (Array.isArray(d) ? d : [])
|
||||
} else list.value = []
|
||||
} catch { list.value = [] } finally { loading.value = false }
|
||||
}
|
||||
|
||||
const vmOptions = ref([])
|
||||
const vmOptionsLoading = ref(false)
|
||||
|
||||
const loadVmOptions = async () => {
|
||||
vmOptionsLoading.value = true
|
||||
try {
|
||||
const res = await getVmList({ service_id: serviceId.value, page: 1, page_size: 500 })
|
||||
if (res?.data?.code === 200 && res?.data?.data) {
|
||||
const inner = res.data.data
|
||||
vmOptions.value = inner.vms || inner.data || inner.list || (Array.isArray(inner) ? inner : [])
|
||||
}
|
||||
} catch { /* */ } finally { vmOptionsLoading.value = false }
|
||||
}
|
||||
|
||||
const createVisible = ref(false)
|
||||
const createForm = reactive({ vm_id: null, name: '', description: '' })
|
||||
|
||||
const handleCreate = async () => {
|
||||
Object.assign(createForm, { vm_id: null, name: '', description: '' })
|
||||
if (!vmOptions.value.length) await loadVmOptions()
|
||||
createVisible.value = true
|
||||
}
|
||||
|
||||
const submitCreate = async () => {
|
||||
if (!createForm.vm_id || !createForm.name) { ElMessage.warning('请填写必填项'); return }
|
||||
submitLoading.value = true
|
||||
try {
|
||||
const fd = new FormData()
|
||||
fd.append('service_id', serviceId.value)
|
||||
fd.append('vm_id', createForm.vm_id)
|
||||
fd.append('name', createForm.name)
|
||||
if (createForm.description) fd.append('description', createForm.description)
|
||||
const res = await createSnapshot(fd)
|
||||
if (res?.data?.code === 200) { ElMessage.success('快照创建成功'); createVisible.value = false; loadList() }
|
||||
else ElMessage.error(extractApiError(res?.data, '创建失败'))
|
||||
} catch (e) { ElMessage.error(extractApiError(e?.response?.data, '创建失败')) } finally { submitLoading.value = false }
|
||||
}
|
||||
|
||||
const handleRestore = (row) => {
|
||||
ElMessageBox.confirm(`确定要恢复快照「${row.name}」到虚拟机(ID:${row.vm_id})吗？`, '恢复确认', {
|
||||
confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const fd = new FormData()
|
||||
fd.append('service_id', serviceId.value)
|
||||
fd.append('snapshot_id', row.id)
|
||||
fd.append('vm_id', row.vm_id)
|
||||
const res = await restoreSnapshot(fd)
|
||||
if (res?.data?.code === 200) ElMessage.success('恢复操作已提交')
|
||||
else ElMessage.error(extractApiError(res?.data, '恢复失败'))
|
||||
} catch (e) { ElMessage.error(extractApiError(e?.response?.data, '恢复失败')) }
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(`确定要删除快照「${row.name}」吗？`, '删除确认', {
|
||||
confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const fd = new FormData()
|
||||
fd.append('service_id', serviceId.value)
|
||||
fd.append('snapshot_id', row.id)
|
||||
fd.append('vm_id', row.vm_id)
|
||||
const res = await deleteSnapshot(fd)
|
||||
if (res?.data?.code === 200) { ElMessage.success('删除成功'); loadList() }
|
||||
else ElMessage.error(extractApiError(res?.data, '删除失败'))
|
||||
} catch (e) { ElMessage.error(extractApiError(e?.response?.data, '删除失败')) }
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
const progressVisible = ref(false)
|
||||
const progressLoading = ref(false)
|
||||
const progressData = ref(null)
|
||||
|
||||
const handleProgress = async (row) => {
|
||||
progressData.value = null
|
||||
progressVisible.value = true
|
||||
progressLoading.value = true
|
||||
try {
|
||||
const res = await getSnapshotProgress({ service_id: serviceId.value, task_id: String(row.task_id || row.id) })
|
||||
if (res?.data?.code === 200) progressData.value = res.data.data
|
||||
else ElMessage.warning('暂无进度信息')
|
||||
} catch { ElMessage.warning('获取进度失败') } finally { progressLoading.value = false }
|
||||
}
|
||||
|
||||
onMounted(() => { loadList() })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.snapshot-manage { padding: 0; }
|
||||
.toolbar { display: flex; gap: 8px; margin-bottom: 16px; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user