容器实例

This commit is contained in:
qiuyuan 2026-01-30 10:30:33 +08:00
parent 15b9b28358
commit 043fcf83c3
3 changed files with 243 additions and 344 deletions

View File

@ -0,0 +1,10 @@
import request from '@/utils/request'
//容器/实例列表
export const getHostCasesList = (params) => request.basic.get('/api/v1/host-cases', params)
// 算力卡删除
export const deleteHostCases = (id) => request.basic.delete(`/api/v1/host-cases/${id}`)
// 容器实例下线
export const HandleOnline = (id) => request.basic.put(`/api/v1/containerHandleOnline/${id}`)

View File

@ -1,222 +1,94 @@
<template> <template>
<a-modal <a-modal :open="modal.open" :title="modal.title" :width="640" :confirm-loading="modal.confirmLoading"
:width="640" :after-close="onAfterClose" :cancel-text="cancelText" :ok-text="okText" @ok="handleOk" @cancel="handleCancel">
:open="modal.open" <a-form ref="formRef" :model="formData" :rules="formRules">
:title="modal.title"
:confirm-loading="modal.confirmLoading"
:after-close="onAfterClose"
:cancel-text="cancelText"
:ok-text="okText"
@ok="handleOk"
@cancel="handleCancel">
<a-form
layout="vertical"
ref="formRef"
:model="formData"
:rules="formRules">
<a-card class="mb-8-2"> <a-card class="mb-8-2">
<a-row :gutter="12"> <a-row :gutter="24">
<a-col :span="12"> <a-col :span="24">
<a-form-item <a-form-item :label="'算力中心名称'" name="name">
:label="$t('pages.system.menu.form.parent_name')"
name="parent_id">
<a-tree-select
v-model:value="formData.parent_id"
tree-default-expand-all></a-tree-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
:label="$t('pages.system.menu.form.type')"
name="type">
<a-radio-group
v-model:value="formData.type"
:options="menuTypeEnum.getOptions()"></a-radio-group>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
:label="$t('pages.system.menu.form.name')"
name="name">
<a-input v-model:value="formData.name"></a-input> <a-input v-model:value="formData.name"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12">
<a-form-item
:label="$t('pages.system.menu.resource.form.path')"
name="path">
<a-input v-model:value="formData.path"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item name="code">
<template #label>
<span class="mr-4-1">{{ $t('pages.system.menu.form.code') }}</span>
<a-tooltip :title="$t('pages.system.menu.form.code')">
<question-circle-outlined class="color-secondary"></question-circle-outlined>
</a-tooltip>
</template>
<a-input v-model:value="formData.code"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
:label="$t('pages.system.menu.form.status')"
name="status">
<a-radio-group
v-model:value="formData.status"
:options="statusTypeEnum.getOptions()"></a-radio-group>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
style="width: 200px"
:label="$t('pages.system.menu.form.sequence')"
name="sequence">
<a-input
:defaultValue="0"
type="number"
v-model:value="formData.sequence"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
:label="$t('pages.system.menu.form.description')"
name="description">
<a-input v-model:value="formData.description"></a-input>
</a-form-item>
</a-col>
<a-col :span="24"> <a-col :span="24">
<a-form-item <a-form-item :label="'区域编码'" name="code">
:label="$t('pages.system.menu.form.properties')" <a-input v-model:value="formData.code"></a-input>
name="properties"> </a-form-item>
<a-textarea v-model:value="formData.properties"></a-textarea> </a-col>
<a-col :span="24">
<a-form-item :label="'排序'" name="sort">
<a-input :defaultValue="0" type="number" v-model:value="formData.sort"></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item :label="$t('pages.system.role.form.status')" name="status">
<a-radio-group v-model:value="formData.status" :options="[
{ label: $t('pages.system.role.form.status.enabled'), value: 'ENABLED' },
{ label: $t('pages.system.role.form.status.disabled'), value: 'DISABLED' },
]"></a-radio-group>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item :label="'描述'" name="description">
<a-textarea v-model:value="formData.description"></a-textarea>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
</a-card> </a-card>
<a-card :title="$t('pages.system.menu.resource.form.title')">
<a-table
:columns="columns"
:data-source="formData.resources"
:pagination="false"
row-key="id">
<template #bodyCell="{ column, record, index }">
<template v-if="column.key === 'types'">
<a-form-item :label="$t('pages.system.menu.resource.form.method')">
<a-input-group
style="display: inline-block; vertical-align: middle"
:compact="true">
<a-form-item-rest>
<a-select
v-model:value="record.method"
:default-value="record.method || 'GET'"
style="width: 100px">
<a-select-option
v-for="item of reqType"
:key="item"
:value="item"
>{{ item }}</a-select-option
>
</a-select>
</a-form-item-rest>
<a-input
v-model:value="record.path"
:style="{ width: 'calc(100% - 100px)' }" />
</a-input-group>
</a-form-item>
</template>
<template v-if="column.key === 'action'">
<x-action-button @click="handleDelete(index)"> {{ $t('button.delete') }}</x-action-button>
</template>
</template>
</a-table>
<a-button
@click="handleAddApi"
block
class="mt-8-2"
type="dashed">
<template #icon>
<plus-outlined></plus-outlined>
</template>
{{ $t('button.add') }}
</a-button>
</a-card>
<template v-if="menuTypeEnum.is('menu', formData.type)"> </template>
<template v-if="statusTypeEnum.is('enabled', formData.status)"> </template>
</a-form> </a-form>
</a-modal> </a-modal>
</template> </template>
<script setup> <script setup>
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
import { QuestionCircleOutlined } from '@ant-design/icons-vue' import { message } from 'ant-design-vue'
import apis from '@/apis' import { ref, watch } from 'vue'
import { useModal, useForm } from '@/hooks'
import { menuTypeEnum, statusTypeEnum } from '@/enums/system'
import { ref } from 'vue'
import { config } from '@/config' import { config } from '@/config'
import { useI18n } from 'vue-i18n' import apis from '@/apis'
import { useForm, useModal } from '@/hooks'
import GxUpload from '@/components/GxUpload/index.vue'
const emit = defineEmits(['ok']) const emit = defineEmits(['ok'])
const { t } = useI18n() // t import { useI18n } from 'vue-i18n'
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal() const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formData, formRef, formRules, resetForm } = useForm() const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const { t } = useI18n() // t
formRules.value = {
name: { required: true, message: t('pages.system.menu.form.name.placeholder') },
code: { required: true, message: t('pages.system.menu.form.code.placeholder') },
}
const columns = [
{ title: t('pages.system.menu.form.path'), dataIndex: 'types', key: 'types' },
{ title: t('button.action'), dataIndex: 'action', key: 'action' },
]
const reqType = ['GET', 'POST', 'PUT', 'PATCH', 'HEAD', 'DELETE']
const cancelText = ref(t('button.cancel')) const cancelText = ref(t('button.cancel'))
const okText = ref(t('button.confirm')) const okText = ref(t('button.confirm'))
formData.value.enabled='enabled'
formRules.value = {
name: { required: true, message: t('pages.system.role.form.name.placeholder') },
code: { required: true, message: t('pages.system.role.form.code.placeholder') },
status: { required: true, message: t('pages.system.role.form.status.placeholder') },
}
/** /**
* 新建 * 新建
*/ */
function handleCreate() { function handleCreate() {
formData.value.resources = []
showModal({ showModal({
type: 'create', type: 'create',
title: t('pages.system.menu.add'), title: t('pages.system.role.add'),
}) })
} }
/**
* 添加下级
* handleCreateChild
*/
function handleCreateChild(record = {}) {
formData.value.resources = []
showModal({
type: 'create',
title: t('pages.system.menu.button.addChild'),
})
formData.value.parent_id = record.id
}
/** /**
* 编辑 * 编辑
*/ */
async function handleEdit(record = {}) { async function handleEdit(record = {}) {
showModal({ showModal({
type: 'edit', type: 'edit',
title: t('pages.system.menu.edit'), title: t('pages.system.role.edit'),
})
const { data } = await apis.menu.getMenu(record.id).catch(() => {
throw new Error()
}) })
const { data, success } = await apis.computing.editCeCenter(record.id).catch()
if (!success) {
message.error(t('component.message.error.save'))
hideModal()
return
}
formRecord.value = data
formData.value = cloneDeep(data) formData.value = cloneDeep(data)
formData.value.properties = formData.value.properties ? JSON.parse(formData.value.properties) : ''
formData.value.resources = formData.value.resources || (formData.value.resources = [])
} }
/** /**
@ -228,23 +100,18 @@ function handleOk() {
.then(async (values) => { .then(async (values) => {
try { try {
showLoading() showLoading()
const params = { console.log("===",values)
...values, values.sort = parseInt(values.sort)
} const params = {...values}
params.sequence = Number.parseInt(params.sequence) || 0
params.properties = JSON.stringify(params.properties)
let result = null let result = null
switch (modal.value.type) { switch (modal.value.type) {
case 'create': case 'create':
result = await apis.menu.createMenu(params).catch(() => { result = await apis.computing.addCenter(params).catch(() => {
throw new Error() throw new Error()
}) })
break break
case 'edit': case 'edit':
newApiData() result = await apis.computing.updateCenter(formData.value.id, params).catch(() => {
params.resources = formData.value.resources
result = await apis.menu.updateMenu(formData.value.id, params).catch(() => {
throw new Error() throw new Error()
}) })
break break
@ -270,16 +137,6 @@ function handleCancel() {
hideModal() hideModal()
} }
/**
* 针对API 做一次 menu_id
*/
function newApiData() {
if (formData.value.resources)
formData.value.resources.forEach((item) => {
item.menu_id = formData.value.id
})
}
/** /**
* 关闭后 * 关闭后
*/ */
@ -288,26 +145,8 @@ function onAfterClose() {
hideLoading() hideLoading()
} }
/**
* 添加API
*/
function handleAddApi() {
formData.value.resources.push({
method: 'GET',
path: '',
})
} /**
* 删除API
*/
function handleDelete(index) {
formData.value.resources.splice(index, 1)
}
defineExpose({ defineExpose({
handleCreate, handleCreate,
handleCreateChild,
handleEdit, handleEdit,
}) })
</script> </script>

View File

@ -1,28 +1,36 @@
<template> <template>
<x-search-bar class="mb-8-2"> <x-search-bar class="mb-8-2">
<template #default="{ gutter, colSpan }"> <template #default="{ gutter, colSpan }">
<a-form :label-col="{ style: { width: '100px' } }" :model="searchFormData" layout="inline"> <a-form :model="searchFormData" layout="inline">
<a-row :gutter="gutter"> <a-row :gutter="gutter">
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item :label="$t('pages.system.menu.form.name')" name="name"> <a-form-item :label="'实例名称'" name="caseName">
<a-input :placeholder="$t('pages.system.menu.form.name.placeholder')" <a-input :placeholder="'实例名称'" v-model:value="searchFormData.caseName"></a-input>
v-model:value="searchFormData.name"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col v-bind="colSpan">
<a-form-item name="code"> <a-col :span="6">
<template #label> <a-form-item :label="'手机号'" name="phone">
{{ $t('pages.system.menu.form.code') }} <a-input :placeholder="'手机号'" v-model:value="searchFormData.phone"></a-input>
<a-tooltip :title="$t('pages.system.menu.form.code')">
<question-circle-outlined class="ml-4-1 color-placeholder" />
</a-tooltip>
</template>
<a-input :placeholder="$t('pages.system.menu.form.code.placeholder')"
v-model:value="searchFormData.code"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="6">
<a-form-item :label="'用户名'" name="userName">
<a-input :placeholder="'用户名'" v-model:value="searchFormData.userName"></a-input>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="健康状态" name="status">
<a-select v-model:value="searchFormData.healthStatus" placeholder="请选择健康状态">
<a-select-option v-for="item in healthStatus.options" :key="item.value"
:value="item.value">
{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col class="align-right" v-bind="colSpan"> <a-col class="align-right" v-bind="colSpan">
<a-space> <a-space>
<a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button> <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
@ -35,126 +43,130 @@
</a-form> </a-form>
</template> </template>
</x-search-bar> </x-search-bar>
<a-card> <a-row :gutter="8" :wrap="false">
<i class="iconfont icon-gonggao" style="color: red;"></i> <a-col flex="auto">
<span>引入阿里巴巴图标</span> <a-card type="flex">
<x-action-bar class="mb-8-2"> <!-- <x-action-bar class="mb-8-2">
<a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()"> <a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
<template #icon> <template #icon>
<plus-outlined></plus-outlined> <plus-outlined></plus-outlined>
</template> </template>
{{ $t('pages.system.menu.add') }} 增加算力中心
</a-button> </a-button>
</x-action-bar> </x-action-bar> -->
<a-table rowKey="id" :loading="loading" :pagination="true" :columns="columns" :data-source="listData"> <a-table :columns="columns" :data-source="listData" :loading="loading" :pagination="paginationState"
:scroll="{ x: 1000 }" @change="onTableChange">
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="'menuType' === column.key"> <template v-if="'status' === column.key">
<!--菜单--> <!--状态-->
<a-tag v-if="menuTypeEnum.is('page', record.type)" color="processing"> <a-tag v-if="record.status == 'ENABLED'" color="processing">
{{ menuTypeEnum.getDesc(record.type) }} 启用
</a-tag> </a-tag>
<!--按钮--> <!--状态-->
<a-tag v-if="menuTypeEnum.is('button', record.type)" color="success"> <a-tag v-else color="processing">
{{ menuTypeEnum.getDesc(record.type) }} 禁用
</a-tag> </a-tag>
</template> </template>
<template v-if="'createAt' === column.key"> <template v-if="'createAt' === column.key">
{{ formatUtcDateTime(record.created_at) }} {{ formatUtcDateTime(record.created_at) }}
</template> </template>
<template v-if="'statusType' === column.key">
<!--状态-->
<a-tag v-if="statusTypeEnum.is('enabled', record.status)" color="processing">
{{ statusTypeEnum.getDesc(record.status) }}
</a-tag>
<!--状态-->
<a-tag v-if="statusTypeEnum.is('disabled', record.status)" color="processing">
{{ statusTypeEnum.getDesc(record.status) }}
</a-tag>
</template>
<template v-if="'action' === column.key"> <template v-if="'action' === column.key">
<x-action-button @click="$refs.editDialogRef.handleEdit(record)"> <x-action-button @click="handleOnline(record)">
<a-tooltip> 下线
<template #title>{{ $t('pages.system.menu.edit') }}</template>
<edit-outlined />
</a-tooltip>
</x-action-button> </x-action-button>
<x-action-button @click="handleRemove(record)">
<x-action-button @click="$refs.editDialogRef.handleCreateChild(record)"> 删除
<a-tooltip>
<template #title>{{ $t('pages.system.menu.button.addChild') }}</template>
<plus-circle-outlined />
</a-tooltip>
</x-action-button>
<x-action-button @click="handleDelete(record)">
<a-tooltip>
<template #title>{{ $t('pages.system.delete') }}</template>
<delete-outlined style="color: #ff4d4f" />
</a-tooltip>
</x-action-button> </x-action-button>
</template> </template>
</template> </template>
</a-table> </a-table>
</a-card> </a-card>
</a-col>
</a-row>
<edit-dialog @ok="onOk" ref="editDialogRef" /> <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
</template> </template>
<script setup> <script setup>
import { Modal, message } from 'ant-design-vue' import { message, Modal } from 'ant-design-vue'
import { ref } from 'vue' import { ref } from 'vue'
import { PlusOutlined, EditOutlined, DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons-vue'
import apis from '@/apis' import apis from '@/apis'
import { config } from '@/config'
import { menuTypeEnum, statusTypeEnum } from '@/enums/system'
import { usePagination, useForm } from '@/hooks'
import { formatUtcDateTime } from '@/utils/util' import { formatUtcDateTime } from '@/utils/util'
import { config } from '@/config'
import { usePagination, useForm } from '@/hooks'
import EditDialog from './components/EditDialog.vue' import EditDialog from './components/EditDialog.vue'
import { PlusOutlined, EditOutlined, DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { disabledDict, payType, payStatusDict, payTypeDict, healthStatus, runningStatus } from '@/enums/dict'
defineOptions({ defineOptions({
// eslint-disable-next-line vue/no-reserved-component-names name: 'systemRole',
name: 'menu',
}) })
const { t } = useI18n() // t const { t } = useI18n() // t
const columns = ref([ const columns = [
{ title: t('pages.system.menu.form.name'), dataIndex: 'name', key: 'name', fixed: true }, { title: '实例名称', dataIndex: 'caseName', width: 200, fixed: 'left' },
{ title: t('pages.system.menu.form.code'), dataIndex: 'code', key: 'code' }, { title: '用户名', dataIndex: 'userName', width: 200 },
{ title: '手机号', dataIndex: 'phone', width: 200 },
{ title: '镜像标识', dataIndex: 'image', width: 150 },
{ title: 'GPU类型', dataIndex: 'gpuType', width: 150 },
{ title: 'GPU数量', dataIndex: 'gpuCount', width: 150 },
{
title: '计费方式',
key: 'billingMethod',
dataIndex: 'billingMethod',
width: 120,
customRender: ({ text }) => payType.getLabel(text) || text,
},
{ title: '价格(单价)', dataIndex: 'unitPrice', width: 150 },
{ title: '计费时长', dataIndex: 'billingTime', width: 150 },
{ title: '到期时间', dataIndex: 'expirationTime', width: 150 },
{ title: '最后一次扣费时间', dataIndex: 'lastDeductionTime', width: 150 },
{
title: '健康状态',
key: 'healthStatus',
dataIndex: 'healthStatus',
width: 120,
customRender: ({ text }) => healthStatus.getLabel(text) || text,
},
{
title: '运行状态',
key: 'runningStatus',
dataIndex: 'runningStatus',
width: 120,
customRender: ({ text }) => runningStatus.getLabel(text) || text,
},
{ title: t('button.action'), key: 'action', fixed: 'right', width: 200 },
];
{ title: t('pages.system.menu.form.type'), dataIndex: 'type', key: 'menuType', width: 80 }, const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
{ title: t('pages.system.menu.form.status'), dataIndex: 'status', key: 'statusType', width: 80 },
{ title: t('pages.system.menu.form.sequence'), dataIndex: 'sequence', width: 100 },
{ title: t('pages.system.menu.form.created_at'), dataIndex: 'created_at', key: 'createAt', width: 180 },
{ title: t('button.action'), key: 'action', width: 180 },
])
const { listData, loading, showLoading, hideLoading, searchFormData, paginationState, resetPagination } =
usePagination() usePagination()
const { resetForm } = useForm() const { resetForm } = useForm()
const editDialogRef = ref() const editDialogRef = ref()
getMenuList() getPageList()
/** /**
* 获取菜单列表 * 获取用户列表
* @return {Promise<void>} * @returns {Promise<void>}
*/ */
async function getMenuList() { async function getPageList() {
try { try {
showLoading() showLoading()
// const { current } = paginationState const { pageSize, current } = paginationState
const { data, success, total } = await apis.menu const { data, total } = await apis.container
.getMenuList({ .getHostCasesList({
pageSize,
current: current,
...searchFormData.value, ...searchFormData.value,
}) })
.catch(() => { .catch(() => {
throw new Error() throw new Error()
}) })
hideLoading() hideLoading()
if (config('http.code.success') === success) { if (data.length > 0) {
data.forEach((item) => {
item.name = t(item.code) || item.name
})
listData.value = data listData.value = data
paginationState.total = total paginationState.total = total
} }
@ -162,42 +174,53 @@ async function getMenuList() {
hideLoading() hideLoading()
} }
} }
/** /**
* 搜索 * 移除
*/ */
function handleSearch() { function handleRemove({ id }) {
resetForm()
resetPagination()
getMenuList()
}
/**
* 重置
*/
function handleResetSearch() {
searchFormData.value = {}
resetPagination()
getMenuList()
}
/**
* 删除
* @param id
*/
function handleDelete({ id }) {
Modal.confirm({ Modal.confirm({
title: t('pages.system.menu.delTip'), title: '提示',
content: t('button.confirm'), content: '是否删除容器/实例?',
okText: t('button.confirm'), okText: t('button.confirm'),
onOk: () => { onOk: () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
; (async () => { ; (async () => {
try { try {
const { success } = await apis.menu.delMenu(id).catch(() => { const { success } = await apis.container.deleteHostCases(id).catch(() => {
throw new Error() throw new Error()
}) })
if (config('http.code.success') === success) { if (config('http.code.success') === success) {
resolve() resolve()
message.success(t('component.message.success.delete')) message.success(t('component.message.success.delete'))
await getMenuList() await getPageList()
}
} catch (error) {
reject()
}
})()
})
},
})
}
// 线
function handleOnline({ id }) {
Modal.confirm({
title: '提示',
content: '是否下线容器/实例?',
okText: t('button.confirm'),
onOk: () => {
return new Promise((resolve, reject) => {
; (async () => {
try {
const { success } = await apis.container.HandleOnline(id).catch(() => {
throw new Error()
})
if (config('http.code.success') === success) {
resolve()
message.success('操作成功')
await getPageList()
} }
} catch (error) { } catch (error) {
reject() reject()
@ -207,11 +230,38 @@ function handleDelete({ id }) {
}, },
}) })
} }
/**
* 分页
*/
function onTableChange({ current, pageSize }) {
paginationState.current = current
paginationState.pageSize = pageSize
getPageList()
}
/**
* 重置
*/
function handleResetSearch() {
searchFormData.value = {}
resetPagination()
getPageList()
}
/**
* 搜索
*/
function handleSearch() {
resetForm()
resetPagination()
getPageList()
}
/** /**
* 编辑完成 * 编辑完成
*/ */
async function onOk() { async function onOk() {
await getMenuList() await getPageList()
} }
</script> </script>