Commit e3a046d6 by Jony.L

算力资源重构-算力资源SPU管理修改1.2

parent b2977701
...@@ -704,28 +704,15 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -704,28 +704,15 @@ const remainingRouter: AppRouteRecordRaw[] = [
}, },
children: [ children: [
{ {
path: 'resource-spu/add', path: 'resource-spu/form/:mode(add|edit|detail)?/:id(\\d+)?',
component: () => import('@/views/compute/resourcespu/form/index.vue'), component: () => import('@/views/compute/resourcespu/form/index.vue'),
name: 'ResourceSpuAdd', name: 'ResourceSpuForm',
meta: { meta: {
noCache: false, noCache: false,
hidden: true, hidden: true,
canTo: true, canTo: true,
icon: 'ep:edit', icon: 'ep:edit',
title: '算力资源添加', title: '算力资源表单',
activeMenu: '/compute/resource-spu'
}
},
{
path: 'resource-spu/edit/:id(\\d+)',
component: () => import('@/views/compute/resourcespu/form/index.vue'),
name: 'ResourceSpuEdit',
meta: {
noCache: true,
hidden: true,
canTo: true,
icon: 'ep:edit',
title: '算力资源编辑',
activeMenu: '/compute/resource-spu' activeMenu: '/compute/resource-spu'
} }
} }
......
...@@ -9,13 +9,19 @@ ...@@ -9,13 +9,19 @@
label-width="68px" label-width="68px"
> >
<el-form-item label="配置类别" prop="configCategory"> <el-form-item label="配置类别" prop="configCategory">
<el-input <el-select
v-model="queryParams.configCategory" v-model="queryParams.configCategory"
placeholder="请输入配置类别" placeholder="请选择配置类别"
clearable clearable
@keyup.enter="handleQuery"
class="!w-240px" class="!w-240px"
>
<el-option
v-for="dict in categoryOptions"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/> />
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="配置选项" prop="configOption"> <el-form-item label="配置选项" prop="configOption">
<el-input <el-input
...@@ -114,12 +120,20 @@ ...@@ -114,12 +120,20 @@
@selection-change="handleRowCheckboxChange" @selection-change="handleRowCheckboxChange"
> >
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
<el-table-column label="主键ID" align="center" prop="id" /> <!-- <el-table-column label="主键ID" align="center" prop="id" /> -->
<el-table-column label="配置类别" align="center" prop="configCategory" /> <el-table-column label="配置类别" align="center" prop="configCategory">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMPUTE_RESOURCE_CONFIG_CATEGORY" :value="scope.row.configCategory" />
</template>
</el-table-column>
<el-table-column label="配置选项" align="center" prop="configOption" /> <el-table-column label="配置选项" align="center" prop="configOption" />
<el-table-column label="排序" align="center" prop="sort" /> <el-table-column label="排序" align="center" prop="sort" />
<el-table-column label="状态" align="center" prop="status" /> <el-table-column label="状态" align="center" prop="status">
<el-table-column label="详情备注" align="center" prop="detailRemark" /> <template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_ENABLE_DISABLE" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="详情备注" align="center" prop="detailRemark" min-width="200" />
<el-table-column <el-table-column
label="创建时间" label="创建时间"
align="center" align="center"
...@@ -167,12 +181,13 @@ import { dateFormatter } from '@/utils/formatTime' ...@@ -167,12 +181,13 @@ import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download' import download from '@/utils/download'
import { ResourceConfigApi, ResourceConfig } from '@/api/compute/resourceconfig' import { ResourceConfigApi, ResourceConfig } from '@/api/compute/resourceconfig'
import ResourceConfigForm from './ResourceConfigForm.vue' import ResourceConfigForm from './ResourceConfigForm.vue'
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict"; import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from "@/utils/dict";
/** 算力资源配置 列表 */ /** 算力资源配置 列表 */
defineOptions({ name: 'ResourceConfig' }) defineOptions({ name: 'ResourceConfig' })
const statusOptions = getIntDictOptions(DICT_TYPE.COMMON_ENABLE_DISABLE) const statusOptions = getIntDictOptions(DICT_TYPE.COMMON_ENABLE_DISABLE)
const categoryOptions = getStrDictOptions(DICT_TYPE.COMPUTE_RESOURCE_CONFIG_CATEGORY)
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
:inline="true" :inline="true"
label-width="68px" label-width="68px"
> >
<el-form-item label="算力资源名称" prop="name"> <el-form-item label="资源名称" prop="name">
<el-input <el-input
v-model="queryParams.name" v-model="queryParams.name"
placeholder="请输入算力资源名称" placeholder="请输入算力资源名称"
...@@ -17,51 +17,75 @@ ...@@ -17,51 +17,75 @@
class="!w-240px" class="!w-240px"
/> />
</el-form-item> </el-form-item>
<el-form-item label="CPU配置" prop="cpu"> <el-form-item label="CPU" prop="cpu">
<el-input <el-select
v-model="queryParams.cpu" v-model="queryParams.cpu"
placeholder="请输入CPU配置" placeholder="请选择CPU配置"
clearable clearable
@keyup.enter="handleQuery"
class="!w-240px" class="!w-240px"
>
<el-option
v-for="option in hardwareConfigStore.getOptionsByType('cpu')"
:key="option.id"
:label="option.configOption"
:value="option.configOption"
/> />
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="GPU配置" prop="gpu"> <el-form-item label="GPU" prop="gpu">
<el-input <el-select
v-model="queryParams.gpu" v-model="queryParams.gpu"
placeholder="请输入GPU配置" placeholder="请选择GPU配置"
clearable clearable
@keyup.enter="handleQuery"
class="!w-240px" class="!w-240px"
>
<el-option
v-for="option in hardwareConfigStore.getOptionsByType('gpu')"
:key="option.id"
:label="option.configOption"
:value="option.configOption"
/> />
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="内存配置" prop="ram"> <el-form-item label="内存" prop="ram">
<el-input <el-select
v-model="queryParams.ram" v-model="queryParams.ram"
placeholder="请输入内存配置" placeholder="请选择内存配置"
clearable clearable
@keyup.enter="handleQuery"
class="!w-240px" class="!w-240px"
>
<el-option
v-for="option in hardwareConfigStore.getOptionsByType('ram')"
:key="option.id"
:label="option.configOption"
:value="option.configOption"
/> />
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="存储配置" prop="storage"> <el-form-item label="存储" prop="storage">
<el-input <el-select
v-model="queryParams.storage" v-model="queryParams.storage"
placeholder="请输入存储配置" placeholder="请选择存储配置"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="服务器ip" prop="ip">
<el-input
v-model="queryParams.ip"
placeholder="请输入服务器ip"
clearable clearable
@keyup.enter="handleQuery"
class="!w-240px" class="!w-240px"
>
<el-option
v-for="option in hardwareConfigStore.getOptionsByType('storage')"
:key="option.id"
:label="option.configOption"
:value="option.configOption"
/> />
</el-select>
</el-form-item> </el-form-item>
<!-- <el-form-item label="服务器ip" prop="ip">-->
<!-- <el-input-->
<!-- v-model="queryParams.ip"-->
<!-- placeholder="请输入服务器ip"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-240px"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="初始用户名" prop="initUsername">--> <!-- <el-form-item label="初始用户名" prop="initUsername">-->
<!-- <el-input--> <!-- <el-input-->
<!-- v-model="queryParams.initUsername"--> <!-- v-model="queryParams.initUsername"-->
...@@ -89,24 +113,30 @@ ...@@ -89,24 +113,30 @@
class="!w-240px" class="!w-240px"
/> />
</el-form-item> </el-form-item>
<el-form-item label="算力资源分类编号" prop="categoryId"> <el-form-item label="资源分类" prop="categoryId">
<el-input <el-select
v-model="queryParams.categoryId" v-model="queryParams.categoryId"
placeholder="请输入算力资源分类编号" placeholder="请选择资源分类"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="商品封面图" prop="picUrl">
<el-input
v-model="queryParams.picUrl"
placeholder="请输入商品封面图"
clearable clearable
@keyup.enter="handleQuery"
class="!w-240px" class="!w-240px"
>
<el-option
v-for="category in categoryList"
:key="category.id"
:label="category.name"
:value="category.id"
/> />
</el-select>
</el-form-item> </el-form-item>
<!-- <el-form-item label="商品封面图" prop="picUrl">-->
<!-- <el-input-->
<!-- v-model="queryParams.picUrl"-->
<!-- placeholder="请输入商品封面图"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery"-->
<!-- class="!w-240px"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="商品轮播图地址" prop="sliderPicUrls">--> <!-- <el-form-item label="商品轮播图地址" prop="sliderPicUrls">-->
<!-- <el-input--> <!-- <el-input-->
<!-- v-model="queryParams.sliderPicUrls"--> <!-- v-model="queryParams.sliderPicUrls"-->
...@@ -116,24 +146,24 @@ ...@@ -116,24 +146,24 @@
<!-- class="!w-240px"--> <!-- class="!w-240px"-->
<!-- />--> <!-- />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item label="总库存数量" prop="stock"> <!-- <el-form-item label="总库存数量" prop="stock">-->
<el-input <!-- <el-input-->
v-model="queryParams.stock" <!-- v-model="queryParams.stock"-->
placeholder="请输入总库存数量" <!-- placeholder="请输入总库存数量"-->
clearable <!-- clearable-->
@keyup.enter="handleQuery" <!-- @keyup.enter="handleQuery"-->
class="!w-240px" <!-- class="!w-240px"-->
/> <!-- />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="商品销量" prop="sales"> <!-- <el-form-item label="商品销量" prop="sales">-->
<el-input <!-- <el-input-->
v-model="queryParams.sales" <!-- v-model="queryParams.sales"-->
placeholder="请输入商品销量" <!-- placeholder="请输入商品销量"-->
clearable <!-- clearable-->
@keyup.enter="handleQuery" <!-- @keyup.enter="handleQuery"-->
class="!w-240px" <!-- class="!w-240px"-->
/> <!-- />-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-select <el-select
v-model="queryParams.status" v-model="queryParams.status"
...@@ -242,7 +272,7 @@ ...@@ -242,7 +272,7 @@
:formatter="dateFormatter" :formatter="dateFormatter"
width="180px" width="180px"
/> />
<el-table-column label="操作" align="center" min-width="120px"> <el-table-column label="操作" align="center" min-width="180px">
<template #default="scope"> <template #default="scope">
<el-button <el-button
link link
...@@ -254,6 +284,14 @@ ...@@ -254,6 +284,14 @@
</el-button> </el-button>
<el-button <el-button
link link
type="success"
@click="openDetail(scope.row.id)"
v-hasPermi="['compute:resource-spu:query']"
>
详情
</el-button>
<el-button
link
type="danger" type="danger"
@click="handleDelete(scope.row.id)" @click="handleDelete(scope.row.id)"
v-hasPermi="['compute:resource-spu:delete']" v-hasPermi="['compute:resource-spu:delete']"
...@@ -274,14 +312,17 @@ ...@@ -274,14 +312,17 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, computed, onMounted, onActivated } from 'vue'
import { isEmpty } from '@/utils/is' import { isEmpty } from '@/utils/is'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download' import download from '@/utils/download'
import { createImageViewer } from '@/components/ImageViewer' import { createImageViewer } from '@/components/ImageViewer'
import { ResourceSpuApi, ResourceSpu } from '@/api/compute/resourcespu' import { ResourceSpuApi, ResourceSpu } from '@/api/compute/resourcespu'
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict"; import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import { useHardwareConfigStore } from '@/store/modules/compute/hardwareConfig'
const { push } = useRouter() const { push } = useRouter()
const hardwareConfigStore = useHardwareConfigStore()
/** 算力资源SPU表(基础配置信息) 列表 */ /** 算力资源SPU表(基础配置信息) 列表 */
defineOptions({ name: 'ResourceSpu' }) defineOptions({ name: 'ResourceSpu' })
...@@ -292,6 +333,7 @@ const { t } = useI18n() // 国际化 ...@@ -292,6 +333,7 @@ const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中 const loading = ref(true) // 列表的加载中
const list = ref<ResourceSpu[]>([]) // 列表的数据 const list = ref<ResourceSpu[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数 const total = ref(0) // 列表的总页数
const categoryList = ref<any[]>([]) // 分类列表
const queryParams = reactive({ const queryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
...@@ -343,13 +385,18 @@ const resetQuery = () => { ...@@ -343,13 +385,18 @@ const resetQuery = () => {
/** 新增或修改 */ /** 新增或修改 */
const openForm = (id?: number) => { const openForm = (id?: number) => {
// 修改
if (typeof id === 'number') { if (typeof id === 'number') {
push({ name: 'ResourceSpuEdit', params: { id } }) // 修改
return push({ name: 'ResourceSpuForm', params: { mode: 'edit', id } })
} } else {
// 新增 // 新增
push({ name: 'ResourceSpuAdd' }) push({ name: 'ResourceSpuForm', params: { mode: 'add' } })
}
}
/** 查看详情 */
const openDetail = (id: number) => {
push({ name: 'ResourceSpuForm', params: { mode: 'detail', id } })
} }
/** 删除按钮操作 */ /** 删除按钮操作 */
...@@ -404,7 +451,24 @@ const handleExport = async () => { ...@@ -404,7 +451,24 @@ const handleExport = async () => {
} }
/** 初始化 **/ /** 初始化 **/
onMounted(() => { onMounted(async () => {
try {
// 并行加载数据
const [categoryResponse] = await Promise.all([
ResourceSpuApi.listSimpleCategory(),
hardwareConfigStore.loadConfigOptions()
])
categoryList.value = categoryResponse
// 加载列表数据
getList()
} catch (error) {
console.error('初始化失败:', error)
}
})
// 监听路由变化,当从新增/编辑页面返回时刷新列表
onActivated(() => {
getList() getList()
}) })
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment