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

src/router/modules/remaining.ts

@@ -704,28 +704,15 @@ const remainingRouter: AppRouteRecordRaw[] = [
     },
     children: [
       {
-        path: 'resource-spu/add',
+        path: 'resource-spu/form/:mode(add|edit|detail)?/:id(\\d+)?',
         component: () => import('@/views/compute/resourcespu/form/index.vue'),
-        name: 'ResourceSpuAdd',
+        name: 'ResourceSpuForm',
         meta: {
           noCache: false,
           hidden: true,
           canTo: true,
           icon: 'ep:edit',
-          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: '算力资源编辑',
+          title: '算力资源表单',
           activeMenu: '/compute/resource-spu'
         }
       }

src/views/compute/resourceconfig/index.vue

@@ -9,13 +9,19 @@
       label-width="68px"
     >
       <el-form-item label="配置类别" prop="configCategory">
-        <el-input
+        <el-select
           v-model="queryParams.configCategory"
-          placeholder="请输入配置类别"
+          placeholder="请选择配置类别"
           clearable
-          @keyup.enter="handleQuery"
           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 label="配置选项" prop="configOption">
         <el-input
@@ -114,12 +120,20 @@
         @selection-change="handleRowCheckboxChange"
     >
     <el-table-column type="selection" width="55" />
-      <el-table-column label="主键ID" align="center" prop="id" />
-      <el-table-column label="配置类别" align="center" prop="configCategory" />
+      <!-- <el-table-column label="主键ID" align="center" prop="id" /> -->
+      <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="sort" />
-      <el-table-column label="状态" align="center" prop="status" />
-      <el-table-column label="详情备注" align="center" prop="detailRemark" />
+      <el-table-column label="状态" align="center" prop="status">
+        <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
         label="创建时间"
         align="center"
@@ -167,12 +181,13 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { ResourceConfigApi, ResourceConfig } from '@/api/compute/resourceconfig'
 import ResourceConfigForm from './ResourceConfigForm.vue'
-import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
+import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from "@/utils/dict";
 
 /** 算力资源配置 列表 */
 defineOptions({ name: 'ResourceConfig' })
 
 const statusOptions = getIntDictOptions(DICT_TYPE.COMMON_ENABLE_DISABLE)
+const categoryOptions = getStrDictOptions(DICT_TYPE.COMPUTE_RESOURCE_CONFIG_CATEGORY)
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 

src/views/compute/resourcespu/index.vue

@@ -8,7 +8,7 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="算力资源名称" prop="name">
+      <el-form-item label="资源名称" prop="name">
         <el-input
           v-model="queryParams.name"
           placeholder="请输入算力资源名称"
@@ -17,51 +17,75 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="CPU配置" prop="cpu">
-        <el-input
+      <el-form-item label="CPU" prop="cpu">
+        <el-select
           v-model="queryParams.cpu"
-          placeholder="请输入CPU配置"
+          placeholder="请选择CPU配置"
           clearable
-          @keyup.enter="handleQuery"
           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 label="GPU配置" prop="gpu">
-        <el-input
+      <el-form-item label="GPU" prop="gpu">
+        <el-select
           v-model="queryParams.gpu"
-          placeholder="请输入GPU配置"
+          placeholder="请选择GPU配置"
           clearable
-          @keyup.enter="handleQuery"
           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 label="内存配置" prop="ram">
-        <el-input
+      <el-form-item label="内存" prop="ram">
+        <el-select
           v-model="queryParams.ram"
-          placeholder="请输入内存配置"
+          placeholder="请选择内存配置"
           clearable
-          @keyup.enter="handleQuery"
           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 label="存储配置" prop="storage">
-        <el-input
+      <el-form-item label="存储" prop="storage">
+        <el-select
           v-model="queryParams.storage"
-          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"
+          placeholder="请选择存储配置"
           clearable
-          @keyup.enter="handleQuery"
           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 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-input-->
 <!--          v-model="queryParams.initUsername"-->
@@ -89,24 +113,30 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="算力资源分类编号" prop="categoryId">
-        <el-input
+      <el-form-item label="资源分类" prop="categoryId">
+        <el-select
           v-model="queryParams.categoryId"
-          placeholder="请输入算力资源分类编号"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="商品封面图" prop="picUrl">
-        <el-input
-          v-model="queryParams.picUrl"
-          placeholder="请输入商品封面图"
+          placeholder="请选择资源分类"
           clearable
-          @keyup.enter="handleQuery"
           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 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-input-->
 <!--          v-model="queryParams.sliderPicUrls"-->
@@ -116,24 +146,24 @@
 <!--          class="!w-240px"-->
 <!--        />-->
 <!--      </el-form-item>-->
-      <el-form-item label="总库存数量" prop="stock">
-        <el-input
-          v-model="queryParams.stock"
-          placeholder="请输入总库存数量"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="商品销量" prop="sales">
-        <el-input
-          v-model="queryParams.sales"
-          placeholder="请输入商品销量"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
+<!--      <el-form-item label="总库存数量" prop="stock">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.stock"-->
+<!--          placeholder="请输入总库存数量"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="商品销量" prop="sales">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.sales"-->
+<!--          placeholder="请输入商品销量"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
       <el-form-item label="状态" prop="status">
         <el-select
           v-model="queryParams.status"
@@ -242,7 +272,7 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center" min-width="120px">
+      <el-table-column label="操作" align="center" min-width="180px">
         <template #default="scope">
           <el-button
             link
@@ -254,6 +284,14 @@
           </el-button>
           <el-button
             link
+            type="success"
+            @click="openDetail(scope.row.id)"
+            v-hasPermi="['compute:resource-spu:query']"
+          >
+            详情
+          </el-button>
+          <el-button
+            link
             type="danger"
             @click="handleDelete(scope.row.id)"
             v-hasPermi="['compute:resource-spu:delete']"
@@ -274,14 +312,17 @@
 </template>
 
 <script setup lang="ts">
+import { ref, reactive, computed, onMounted, onActivated } from 'vue'
 import { isEmpty } from '@/utils/is'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { createImageViewer } from '@/components/ImageViewer'
 import { ResourceSpuApi, ResourceSpu } from '@/api/compute/resourcespu'
 import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
+import { useHardwareConfigStore } from '@/store/modules/compute/hardwareConfig'
 
 const { push } = useRouter()
+const hardwareConfigStore = useHardwareConfigStore()
 
 /** 算力资源SPU表（基础配置信息） 列表 */
 defineOptions({ name: 'ResourceSpu' })
@@ -292,6 +333,7 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<ResourceSpu[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
+const categoryList = ref<any[]>([]) // 分类列表
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -343,13 +385,18 @@ const resetQuery = () => {
 
 /** 新增或修改 */
 const openForm = (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 () => {
 }
 
 /** 初始化 **/
-onMounted(() => {
+onMounted(async () => {
+  try {
+    // 并行加载数据
+    const [categoryResponse] = await Promise.all([
+      ResourceSpuApi.listSimpleCategory(),
+      hardwareConfigStore.loadConfigOptions()
+    ])
+    categoryList.value = categoryResponse
+
+    // 加载列表数据
+    getList()
+  } catch (error) {
+    console.error('初始化失败:', error)
+  }
+})
+
+// 监听路由变化，当从新增/编辑页面返回时刷新列表
+onActivated(() => {
   getList()
 })
 </script>