383 lines
10 KiB
Vue
383 lines
10 KiB
Vue
<template>
|
|
<div class="kvm-service-container">
|
|
<!-- 顶部操作栏 -->
|
|
<div class="toolbar">
|
|
<div class="toolbar-left">
|
|
<el-button type="primary" @click="handleAdd">
|
|
<el-icon><Plus /></el-icon>新建主控服务
|
|
</el-button>
|
|
<el-button @click="loadList">
|
|
<el-icon><Refresh /></el-icon>刷新
|
|
</el-button>
|
|
</div>
|
|
<div class="toolbar-right">
|
|
<el-input
|
|
v-model="searchKey"
|
|
placeholder="搜索服务名称/地址"
|
|
style="width: 260px"
|
|
clearable
|
|
@keyup.enter="handleSearch"
|
|
@clear="handleSearch"
|
|
>
|
|
<template #prefix>
|
|
<el-icon><Search /></el-icon>
|
|
</template>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 服务列表 -->
|
|
<el-table :data="serviceList" v-loading="loading" stripe style="width: 100%">
|
|
<el-table-column prop="id" label="ID" width="80" />
|
|
<el-table-column prop="name" label="服务名称" min-width="160" show-overflow-tooltip />
|
|
<el-table-column label="服务地址" min-width="220">
|
|
<template #default="{ row }">
|
|
<span class="host-addr">{{ row.host }}:{{ row.port }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="认证Token" min-width="160" show-overflow-tooltip>
|
|
<template #default="{ row }">
|
|
<span v-if="row.token" class="token-mask">{{ maskToken(row.token) }}</span>
|
|
<span v-else class="text-muted">未设置</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="note" label="备注" min-width="160" show-overflow-tooltip>
|
|
<template #default="{ row }">
|
|
{{ row.note || '-' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="创建时间" width="170">
|
|
<template #default="{ row }">
|
|
{{ formatTime(row.CreatedAt || row.created_at) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="200" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
|
|
<el-button link type="primary" @click="handleViewDetail(row)">详情/管理</el-button>
|
|
<el-button link type="danger" @click="handleDelete(row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 分页 -->
|
|
<div class="pagination-wrapper" v-if="total > 0">
|
|
<el-pagination
|
|
v-model:current-page="queryParams.page"
|
|
v-model:page-size="queryParams.page_size"
|
|
:page-sizes="[10, 20, 50]"
|
|
:total="total"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handlePageChange"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 新建/编辑弹窗 -->
|
|
<el-dialog
|
|
v-model="dialogVisible"
|
|
:title="dialogType === 'add' ? '新建主控服务' : '编辑主控服务'"
|
|
width="520px"
|
|
destroy-on-close
|
|
>
|
|
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
|
|
<el-form-item label="服务名称" prop="name">
|
|
<el-input v-model="formData.name" placeholder="请输入服务名称" />
|
|
</el-form-item>
|
|
<el-form-item label="服务地址" prop="host">
|
|
<el-input v-model="formData.host" placeholder="请输入服务地址，如 192.168.1.100 或域名" />
|
|
</el-form-item>
|
|
<el-form-item label="服务端口" prop="port">
|
|
<el-input v-model="formData.port" placeholder="请输入服务端口，如 8080" />
|
|
</el-form-item>
|
|
<el-form-item label="认证Token" prop="token">
|
|
<el-input v-model="formData.token" placeholder="请输入认证Token（可选）" show-password />
|
|
</el-form-item>
|
|
<el-form-item label="备注" prop="note">
|
|
<el-input v-model="formData.note" type="textarea" :rows="3" placeholder="备注说明（可选）" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { Plus, Refresh, Search } from '@element-plus/icons-vue'
|
|
import {
|
|
getKvmServiceList,
|
|
createKvmService,
|
|
updateKvmService,
|
|
deleteKvmService
|
|
} from '@/api/admin/kvmService'
|
|
import { extractApiError } from '@/utils/kvmErrorUtil'
|
|
import dayjs from 'dayjs'
|
|
|
|
const router = useRouter()
|
|
|
|
const loading = ref(false)
|
|
const submitLoading = ref(false)
|
|
const serviceList = ref([])
|
|
const total = ref(0)
|
|
const searchKey = ref('')
|
|
|
|
const queryParams = reactive({
|
|
page: 1,
|
|
page_size: 10,
|
|
key: ''
|
|
})
|
|
|
|
// 弹窗控制
|
|
const dialogVisible = ref(false)
|
|
const dialogType = ref('add')
|
|
const formRef = ref(null)
|
|
|
|
const formData = reactive({
|
|
id: undefined,
|
|
name: '',
|
|
host: '',
|
|
port: '',
|
|
token: '',
|
|
note: ''
|
|
})
|
|
|
|
const formRules = {
|
|
name: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
|
|
host: [{ required: true, message: '请输入服务地址', trigger: 'blur' }],
|
|
port: [{ required: true, message: '请输入服务端口', trigger: 'blur' }]
|
|
}
|
|
|
|
const normalizeService = (item) => {
|
|
if (!item) return item
|
|
return {
|
|
...item,
|
|
id: item.id ?? item.Id,
|
|
name: item.name ?? item.Name,
|
|
host: item.host ?? item.Host,
|
|
port: item.port ?? item.Port,
|
|
token: item.token ?? item.Token,
|
|
note: item.note ?? item.Note,
|
|
CreatedAt: item.CreatedAt ?? item.created_at,
|
|
UpdatedAt: item.UpdatedAt ?? item.updated_at,
|
|
}
|
|
}
|
|
|
|
// 加载列表
|
|
const loadList = async () => {
|
|
loading.value = true
|
|
try {
|
|
const res = await getKvmServiceList(queryParams)
|
|
// http2 返回完整 axios 响应，res.data 为 JSON body
|
|
const body = res?.data
|
|
console.debug('[KvmService] list response body:', JSON.stringify(body))
|
|
if (body?.code === 200 && body?.data) {
|
|
const inner = body.data // { all_count, data: [...] } 或直接是数组
|
|
const items = Array.isArray(inner) ? inner : (inner.data || inner.list || [])
|
|
serviceList.value = items.map(normalizeService)
|
|
total.value = inner.all_count ?? inner.total ?? items.length
|
|
console.debug('[KvmService] normalized list:', serviceList.value)
|
|
} else {
|
|
serviceList.value = []
|
|
total.value = 0
|
|
if (body?.message) {
|
|
ElMessage.warning(body.message)
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('获取主控服务列表失败:', error)
|
|
ElMessage.error('获取主控服务列表失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const handleSearch = () => {
|
|
queryParams.page = 1
|
|
queryParams.key = searchKey.value
|
|
loadList()
|
|
}
|
|
|
|
const handleSizeChange = (size) => {
|
|
queryParams.page_size = size
|
|
queryParams.page = 1
|
|
loadList()
|
|
}
|
|
|
|
const handlePageChange = (page) => {
|
|
queryParams.page = page
|
|
loadList()
|
|
}
|
|
|
|
// 遮掩Token
|
|
const maskToken = (token) => {
|
|
if (!token) return ''
|
|
if (token.length <= 8) return '****'
|
|
return token.substring(0, 4) + '****' + token.substring(token.length - 4)
|
|
}
|
|
|
|
// 格式化时间
|
|
const formatTime = (t) => {
|
|
if (!t) return '-'
|
|
return dayjs(t).format('YYYY-MM-DD HH:mm:ss')
|
|
}
|
|
|
|
// 重置表单
|
|
const resetForm = () => {
|
|
Object.assign(formData, {
|
|
id: undefined,
|
|
name: '',
|
|
host: '',
|
|
port: '',
|
|
token: '',
|
|
note: ''
|
|
})
|
|
}
|
|
|
|
// 新建
|
|
const handleAdd = () => {
|
|
dialogType.value = 'add'
|
|
resetForm()
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
const handleEdit = (row) => {
|
|
dialogType.value = 'edit'
|
|
Object.assign(formData, {
|
|
id: Number(row.id),
|
|
name: row.name,
|
|
host: row.host,
|
|
port: row.port,
|
|
token: row.token ?? '',
|
|
note: row.note ?? ''
|
|
})
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
// 提交表单
|
|
const handleSubmit = () => {
|
|
formRef.value?.validate(async (valid) => {
|
|
if (!valid) return
|
|
submitLoading.value = true
|
|
try {
|
|
const payload = {
|
|
name: formData.name,
|
|
host: formData.host,
|
|
port: formData.port,
|
|
token: formData.token,
|
|
note: formData.note
|
|
}
|
|
let res
|
|
if (dialogType.value === 'add') {
|
|
res = await createKvmService(payload)
|
|
} else {
|
|
const editId = Number(formData.id)
|
|
if (!editId) {
|
|
ElMessage.error('无法获取服务ID')
|
|
submitLoading.value = false
|
|
return
|
|
}
|
|
res = await updateKvmService(editId, payload)
|
|
}
|
|
const body = res?.data
|
|
if (body?.code === 200) {
|
|
ElMessage.success(dialogType.value === 'add' ? '创建成功' : '更新成功')
|
|
dialogVisible.value = false
|
|
loadList()
|
|
} else {
|
|
ElMessage.error(extractApiError(body, '操作失败'))
|
|
}
|
|
} catch (error) {
|
|
console.error('操作失败:', error)
|
|
ElMessage.error(extractApiError(error?.response?.data, '操作失败'))
|
|
} finally {
|
|
submitLoading.value = false
|
|
}
|
|
})
|
|
}
|
|
|
|
const handleDelete = (row) => {
|
|
if (!row.id) {
|
|
ElMessage.error('无法获取服务ID')
|
|
return
|
|
}
|
|
ElMessageBox.confirm(`确定要删除主控服务「${row.name}」吗？删除后不可恢复。`, '删除确认', {
|
|
confirmButtonText: '确定删除',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(async () => {
|
|
try {
|
|
const res = await deleteKvmService({ id: Number(row.id) })
|
|
const body = res?.data
|
|
if (body?.code === 200) {
|
|
ElMessage.success('删除成功')
|
|
loadList()
|
|
} else {
|
|
ElMessage.error(extractApiError(body, '删除失败'))
|
|
}
|
|
} catch (error) {
|
|
ElMessage.error(extractApiError(error?.response?.data, '删除失败'))
|
|
}
|
|
}).catch(() => {})
|
|
}
|
|
|
|
const handleViewDetail = (row) => {
|
|
const id = Number(row.id)
|
|
const name = row.name
|
|
if (!id) {
|
|
ElMessage.error('无法获取服务ID，请刷新列表后重试')
|
|
return
|
|
}
|
|
router.push({
|
|
path: '/virtualization/kvm-service-detail',
|
|
query: { service_id: id, service_name: name }
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadList()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.kvm-service-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.toolbar-left {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.toolbar-right {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.host-addr {
|
|
font-family: 'Consolas', 'Monaco', monospace;
|
|
color: #409eff;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.token-mask {
|
|
font-family: 'Consolas', 'Monaco', monospace;
|
|
color: #909399;
|
|
font-size: 13px;
|
|
}
|
|
|
|
</style>
|