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

src/router/modules/remaining.ts

@@ -696,6 +696,42 @@ const remainingRouter: AppRouteRecordRaw[] = [
     ]
   },
   {
+    path: '/compute',
+    component: Layout,
+    name: 'Compute',
+    meta: {
+      hidden: true
+    },
+    children: [
+      {
+        path: 'resource-spu/add',
+        component: () => import('@/views/compute/resourcespu/form/index.vue'),
+        name: 'ResourceSpuAdd',
+        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: '算力资源编辑',
+          activeMenu: '/compute/resource-spu'
+        }
+      }
+    ]
+  },
+  {
     path: '/:pathMatch(.*)*',
     component: () => import('@/views/Error/404.vue'),
     name: '',

src/views/compute/resourcespu/form/index.vue

+<template>
+  <ContentWrap v-loading="formLoading">
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
+      <!-- 1. 算力资源名称 -->
+      <el-form-item label="算力资源名称" prop="name">
+        <el-input
+          v-model="formData.name"
+          placeholder="请输入算力资源名称"
+          class="w-60!"
+          maxlength="64"
+          show-word-limit
+        />
+      </el-form-item>
+
+      <!-- 2. 商品封面图 -->
+      <el-form-item label="商品封面图" prop="picUrl">
+        <UploadImg v-model="formData.picUrl" height="80px" />
+      </el-form-item>
+
+      <!-- 3. 算力资源分类 -->
+      <el-form-item label="算力资源分类" prop="categoryId">
+        <el-select v-model="formData.categoryId" placeholder="请选择算力资源分类" clearable style="width: 200px;">
+          <el-option
+            v-for="category in categoryList"
+            :key="category.id"
+            :label="category.name"
+            :value="category.id"
+          />
+        </el-select>
+      </el-form-item>
+
+      <!-- 4. 硬件配置 - inline布局 -->
+      <div style="display: flex; margin-bottom: 16px;">
+        <el-form-item label="CPU配置" prop="cpu" style="margin-right: 20px; margin-bottom: 0;">
+          <el-select v-model="formData.cpu" placeholder="请选择CPU配置" clearable style="width: 180px;">
+            <el-option
+              v-for="option in cpuOptions"
+              :key="option.id"
+              :label="option.configOption"
+              :value="option.configOption"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="GPU配置" prop="gpu" style="margin-bottom: 0;">
+          <el-select v-model="formData.gpu" placeholder="请选择GPU配置" clearable style="width: 180px;">
+            <el-option
+              v-for="option in gpuOptions"
+              :key="option.id"
+              :label="option.configOption"
+              :value="option.configOption"
+            />
+          </el-select>
+        </el-form-item>
+      </div>
+
+      <div style="display: flex; margin-bottom: 24px;">
+        <el-form-item label="内存配置" prop="ram" style="margin-right: 20px; margin-bottom: 0;">
+          <el-select v-model="formData.ram" placeholder="请选择内存配置" clearable style="width: 180px;">
+            <el-option
+              v-for="option in ramOptions"
+              :key="option.id"
+              :label="option.configOption"
+              :value="option.configOption"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="存储配置" prop="storage" style="margin-bottom: 0;">
+          <el-select v-model="formData.storage" placeholder="请选择存储配置" clearable style="width: 180px;">
+            <el-option
+              v-for="option in storageOptions"
+              :key="option.id"
+              :label="option.configOption"
+              :value="option.configOption"
+            />
+          </el-select>
+        </el-form-item>
+      </div>
+
+      <!-- 5. 服务器信息 -->
+      <el-form-item label="服务器IP" prop="ip">
+        <el-input v-model="formData.ip" placeholder="请输入服务器IP" style="width: 300px;" />
+      </el-form-item>
+
+      <div style="display: flex; margin-bottom: 24px;">
+        <el-form-item label="初始用户名" prop="initUsername" style="margin-right: 20px; margin-bottom: 0;">
+          <el-input v-model="formData.initUsername" placeholder="请输入初始用户名" style="width: 180px;" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="初始密码" prop="initPassword" style="margin-bottom: 0;">
+          <el-input v-model="formData.initPassword" placeholder="请输入初始密码" type="password" style="width: 180px;" autocomplete="new-password" />
+        </el-form-item>
+      </div>
+
+      <!-- 6. 商品库存和销量 -->
+      <div style="display: flex; margin-bottom: 24px;">
+        <el-form-item label="库存数量" prop="stock" style="margin-right: 20px; margin-bottom: 0;">
+          <el-input v-model="formData.stock" placeholder="请输入库存数量" style="width: 150px;" />
+        </el-form-item>
+        <el-form-item label="商品销量" prop="sales" style="margin-bottom: 0;">
+          <el-input v-model="formData.sales" placeholder="请输入商品销量" style="width: 150px;" />
+        </el-form-item>
+      </div>
+
+      <!-- 7. 商品简介 -->
+      <el-form-item label="商品简介" prop="intro">
+        <el-input
+          v-model="formData.intro"
+          placeholder="请输入商品简介"
+          type="textarea"
+          rows="3"
+          style="width: 400px;"
+        />
+      </el-form-item>
+
+      <!-- 8. 轮播图地址 - 已隐藏 -->
+      <!-- <el-form-item label="轮播图地址" prop="sliderPicUrls">
+        <el-input
+          v-model="formData.sliderPicUrls"
+          placeholder="以逗号分隔，最多15张"
+          type="textarea"
+          rows="2"
+          style="width: 400px;"
+        />
+      </el-form-item> -->
+
+      <!-- 9. 状态 -->
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMPUTE_RESOURCE_SPU_STATUS)"
+            :key="dict.value"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <!-- 操作按钮 -->
+      <el-form-item style="text-align: center; margin-top: 30px;">
+        <el-button :loading="formLoading" type="primary" size="large" @click="submitForm">
+          保存
+        </el-button>
+        <el-button size="large" style="margin-left: 20px;" @click="close">返回</el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { UploadImg } from '@/components/UploadFile'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { ResourceConfigApi } from '@/api/compute/resourceconfig'
+import { ResourceSpu, ResourceSpuApi } from '@/api/compute/resourcespu'
+
+defineOptions({ name: 'ResourceSpuAdd' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const { push, currentRoute } = useRouter() // 路由
+const { params, name } = useRoute() // 查询参数
+const { delView } = useTagsViewStore() // 视图操作
+
+const formLoading = ref(false) // 表单的加载中
+const formRef = ref() // 表单 Ref
+const categoryList = ref<any[]>([])
+const cpuOptions = ref<any[]>([])
+const gpuOptions = ref<any[]>([])
+const ramOptions = ref<any[]>([])
+const storageOptions = ref<any[]>([])
+
+const formData = ref<ResourceSpu>({
+  id: undefined,
+  name: undefined,
+  cpu: undefined,
+  gpu: undefined,
+  ram: undefined,
+  storage: undefined,
+  ip: undefined,
+  initUsername: undefined,
+  initPassword: undefined,
+  intro: undefined,
+  categoryId: undefined,
+  picUrl: undefined,
+  sliderPicUrls: undefined,
+  stock: undefined,
+  sales: undefined,
+  status: undefined
+})
+
+const formRules = reactive({
+  name: [{ required: true, message: '算力资源名称不能为空', trigger: 'blur' }],
+  cpu: [{ required: true, message: 'CPU配置不能为空', trigger: 'blur' }],
+  gpu: [{ required: true, message: 'GPU配置不能为空', trigger: 'blur' }],
+  ram: [{ required: true, message: '内存配置不能为空', trigger: 'blur' }],
+  storage: [{ required: true, message: '存储配置不能为空', trigger: 'blur' }],
+  ip: [{ required: true, message: '服务器ip不能为空', trigger: 'blur' }],
+  initUsername: [{ required: true, message: '初始用户名不能为空', trigger: 'blur' }],
+  initPassword: [{ required: true, message: '初始密码不能为空', trigger: 'blur' }],
+  categoryId: [{ required: true, message: '算力资源分类编号不能为空', trigger: 'blur' }],
+  picUrl: [{ required: true, message: '商品封面图不能为空', trigger: 'blur' }],
+  stock: [{ required: true, message: '总库存数量不能为空', trigger: 'blur' }],
+  sales: [{ required: true, message: '商品销量不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
+})
+
+/** 加载配置选项 */
+const loadConfigOptions = async () => {
+  const [cpuRes, gpuRes, ramRes, storageRes] = await Promise.all([
+    ResourceConfigApi.listSimpleConfigByCategory('cpu'),
+    ResourceConfigApi.listSimpleConfigByCategory('gpu'),
+    ResourceConfigApi.listSimpleConfigByCategory('ram'),
+    ResourceConfigApi.listSimpleConfigByCategory('storage')
+  ])
+  cpuOptions.value = cpuRes
+  gpuOptions.value = gpuRes
+  ramOptions.value = ramRes
+  storageOptions.value = storageRes
+}
+
+/** 提交表单 */
+const submitForm = async () => {
+  await formRef.value.validate()
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ResourceSpu
+    if (params.id) {
+      // 编辑
+      await ResourceSpuApi.updateResourceSpu(data)
+      message.success(t('common.updateSuccess'))
+    } else {
+      // 新增
+      await ResourceSpuApi.createResourceSpu(data)
+      message.success(t('common.createSuccess'))
+    }
+    close()
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 返回列表 */
+const close = () => {
+  delView(unref(currentRoute))
+  push('/compute/resource-spu')
+}
+
+/** 初始化 */
+onMounted(async () => {
+  // 加载分类列表
+  const categoryResponse = await ResourceSpuApi.listSimpleCategory()
+  categoryList.value = categoryResponse
+
+  // 加载配置选项
+  await loadConfigOptions()
+
+  // 如果是编辑模式，获取数据
+  if (params.id) {
+    formLoading.value = true
+    try {
+      formData.value = await ResourceSpuApi.getResourceSpu(Number(params.id))
+    } finally {
+      formLoading.value = false
+    }
+  }
+})
+</script>
\ No newline at end of file

src/views/compute/resourcespu/index.vue

@@ -166,7 +166,7 @@
         <el-button
           type="primary"
           plain
-          @click="openForm('create')"
+          @click="openForm(undefined)"
           v-hasPermi="['compute:resource-spu:create']"
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
@@ -222,16 +222,15 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="CPU配置" align="center" prop="cpu" />
-      <el-table-column label="GPU配置" align="center" prop="gpu" />
-      <el-table-column label="内存" align="center" prop="ram" />
-      <el-table-column label="存储" align="center" prop="storage" />
-      <el-table-column label="商品简介" align="center" prop="intro" />
-      <el-table-column label="算力资源分类编号" align="center" prop="categoryId" />
-      <el-table-column label="商品轮播图地址" align="center" prop="sliderPicUrls" />
+      <!-- 硬件配置字段已隐藏 -->
+      <el-table-column label="商品简介" align="center" prop="intro" min-width="200" />
+<!--      <el-table-column label="算力资源分类编号" align="center" prop="categoryId" />-->
+      <el-table-column label="算力资源分类" align="center" prop="categoryName" min-width="150" />
+
+      <!-- 轮播图地址已隐藏 -->
       <el-table-column label="总库存数量" align="center" prop="stock" />
       <el-table-column label="商品销量" align="center" prop="sales" />
-      <el-table-column label="状态" align="center" min-width="150" prop="status">
+      <el-table-column label="状态" align="center" width="80" prop="status">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMPUTE_RESOURCE_SPU_STATUS" :value="scope.row.status" />
         </template>
@@ -248,7 +247,7 @@
           <el-button
             link
             type="primary"
-            @click="openForm('update', scope.row.id)"
+            @click="openForm(scope.row.id)"
             v-hasPermi="['compute:resource-spu:update']"
           >
             编辑
@@ -272,9 +271,6 @@
       @pagination="getList"
     />
   </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改 -->
-  <ResourceSpuForm ref="formRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
@@ -283,9 +279,10 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { createImageViewer } from '@/components/ImageViewer'
 import { ResourceSpuApi, ResourceSpu } from '@/api/compute/resourcespu'
-import ResourceSpuForm from './ResourceSpuForm.vue'
 import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
 
+const { push } = useRouter()
+
 /** 算力资源SPU表（基础配置信息） 列表 */
 defineOptions({ name: 'ResourceSpu' })
 
@@ -344,10 +341,15 @@ const resetQuery = () => {
   handleQuery()
 }
 
-/** 添加/修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+/** 新增或修改 */
+const openForm = (id?: number) => {
+  // 修改
+  if (typeof id === 'number') {
+    push({ name: 'ResourceSpuEdit', params: { id } })
+    return
+  }
+  // 新增
+  push({ name: 'ResourceSpuAdd' })
 }
 
 /** 删除按钮操作 */