算力资源重构-算力资源SPU管理、资源配置管理修改

src/api/compute/resourcecategory/index.ts

 import request from '@/config/axios'
 import request from '@/config/axios'
-import type { Dayjs } from 'dayjs';
 
 
 /** 算力资源分类表（仅用于算力服务器分类）信息 */
 /** 算力资源分类表（仅用于算力服务器分类）信息 */
 export interface ResourceCategory {
 export interface ResourceCategory {

src/api/compute/resourceconfig/index.ts

+import request from '@/config/axios'
+import type { Dayjs } from 'dayjs';
+
+/** 算力资源配置信息 */
+export interface ResourceConfig {
+          id: number; // 主键ID
+          configCategory?: string; // 配置类别
+          configOption?: string; // 配置选项
+          sort: number; // 排序
+          status?: number; // 状态：0=启用,1=禁用
+          detailRemark: string; // 详情备注（如：i7-13700K 16核24线程）
+  }
+
+// 算力资源配置 API
+export const ResourceConfigApi = {
+  // 查询算力资源配置分页
+  getResourceConfigPage: async (params: any) => {
+    return await request.get({ url: `/compute/resource-config/page`, params })
+  },
+
+  // 查询算力资源配置详情
+  getResourceConfig: async (id: number) => {
+    return await request.get({ url: `/compute/resource-config/get?id=` + id })
+  },
+
+  // 新增算力资源配置
+  createResourceConfig: async (data: ResourceConfig) => {
+    return await request.post({ url: `/compute/resource-config/create`, data })
+  },
+
+  // 修改算力资源配置
+  updateResourceConfig: async (data: ResourceConfig) => {
+    return await request.put({ url: `/compute/resource-config/update`, data })
+  },
+
+  // 删除算力资源配置
+  deleteResourceConfig: async (id: number) => {
+    return await request.delete({ url: `/compute/resource-config/delete?id=` + id })
+  },
+
+  /** 批量删除算力资源配置 */
+  deleteResourceConfigList: async (ids: number[]) => {
+    return await request.delete({ url: `/compute/resource-config/delete-list?ids=${ids.join(',')}` })
+  },
+
+  // 导出算力资源配置 Excel
+  exportResourceConfig: async (params) => {
+    return await request.download({ url: `/compute/resource-config/export-excel`, params })
+  },
+
+  // 根据类别获取精简配置选项列表
+  listSimpleConfigByCategory: async (category: string) => {
+    return await request.get({ url: `/compute/resource-config/list-simple-config-by-category?category=${category}` })
+  }
+}
\ No newline at end of file

src/api/compute/resourcespu/index.ts

 import request from '@/config/axios'
 import request from '@/config/axios'
-import type { Dayjs } from 'dayjs';
 
 
 /** 算力资源SPU表（基础配置信息）信息 */
 /** 算力资源SPU表（基础配置信息）信息 */
 export interface ResourceSpu {
 export interface ResourceSpu {
@@ -27,7 +26,10 @@ export const ResourceSpuApi = {
   getResourceSpuPage: async (params: any) => {
   getResourceSpuPage: async (params: any) => {
     return await request.get({ url: `/compute/resource-spu/page`, params })
     return await request.get({ url: `/compute/resource-spu/page`, params })
   },
   },
-
+  //查询精简算力资源分类列表
+  listSimpleCategory: async () =>{
+    return await request.get({ url: `/compute/resource-category/list-simple`})
+  },
   // 查询算力资源SPU表（基础配置信息）详情
   // 查询算力资源SPU表（基础配置信息）详情
   getResourceSpu: async (id: number) => {
   getResourceSpu: async (id: number) => {
     return await request.get({ url: `/compute/resource-spu/get?id=` + id })
     return await request.get({ url: `/compute/resource-spu/get?id=` + id })

src/utils/dict.ts

@@ -110,6 +110,7 @@ export const getDictLabel = (dictType: string, value: any): string => {
 export enum DICT_TYPE {
 export enum DICT_TYPE {
   USER_TYPE = 'user_type',
   USER_TYPE = 'user_type',
   COMMON_STATUS = 'common_status',
   COMMON_STATUS = 'common_status',
+  COMMON_ENABLE_DISABLE = 'common_enable_disable',
   TERMINAL = 'terminal', // 终端
   TERMINAL = 'terminal', // 终端
   DATE_INTERVAL = 'date_interval', // 数据间隔
   DATE_INTERVAL = 'date_interval', // 数据间隔
 
 
@@ -173,6 +174,10 @@ export enum DICT_TYPE {
   MEMBER_EXPERIENCE_BIZ_TYPE = 'member_experience_biz_type', // 会员经验业务类型
   MEMBER_EXPERIENCE_BIZ_TYPE = 'member_experience_biz_type', // 会员经验业务类型
   CHECK_STATUS = 'check_status', // 客户企业管理审核
   CHECK_STATUS = 'check_status', // 客户企业管理审核
 
 
+  // ==========Compute 算力资源模块========
+  COMPUTE_RESOURCE_SPU_STATUS = 'compute_resource_spu_status',
+  COMPUTE_RESOURCE_CONFIG_CATEGORY = 'compute_resource_config_category',
+
   // ========== MALL - 商品模块 ==========
   // ========== MALL - 商品模块 ==========
   PRODUCT_SPU_STATUS = 'product_spu_status', //商品状态
   PRODUCT_SPU_STATUS = 'product_spu_status', //商品状态
 
 

src/views/compute/resourcecategory/ResourceCategoryForm.vue

@@ -15,12 +15,12 @@
         <div style="font-size: 10px" class="pl-10px">推荐 180x180 图片分辨率</div>
         <div style="font-size: 10px" class="pl-10px">推荐 180x180 图片分辨率</div>
       </el-form-item>
       </el-form-item>
       <el-form-item label="分类排序" prop="sort">
       <el-form-item label="分类排序" prop="sort">
-        <el-input v-model="formData.sort" placeholder="请输入分类排序" />
+        <el-input-number v-model="formData.sort" controls-position="right" :min="0" />
       </el-form-item>
       </el-form-item>
       <el-form-item label="开启状态" prop="status">
       <el-form-item label="开启状态" prop="status">
         <el-radio-group v-model="formData.status">
         <el-radio-group v-model="formData.status">
           <el-radio
           <el-radio
-            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_ENABLE_DISABLE)"
             :key="dict.value"
             :key="dict.value"
             :value="dict.value"
             :value="dict.value"
           >
           >

src/views/compute/resourcecategory/index.vue

@@ -115,7 +115,7 @@
       <el-table-column label="分类排序" align="center" prop="sort" />
       <el-table-column label="分类排序" align="center" prop="sort" />
       <el-table-column label="状态" align="center" min-width="150" prop="status">
       <el-table-column label="状态" align="center" min-width="150" prop="status">
         <template #default="scope">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+          <dict-tag :type="DICT_TYPE.COMMON_ENABLE_DISABLE" :value="scope.row.status" />
         </template>
         </template>
       </el-table-column>
       </el-table-column>
       <el-table-column
       <el-table-column
@@ -165,7 +165,7 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import download from '@/utils/download'
 import { ResourceCategoryApi, ResourceCategory } from '@/api/compute/resourcecategory'
 import { ResourceCategoryApi, ResourceCategory } from '@/api/compute/resourcecategory'
 import ResourceCategoryForm from './ResourceCategoryForm.vue'
 import ResourceCategoryForm from './ResourceCategoryForm.vue'
-import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
+import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from "@/utils/dict";
 
 
 /** 算力资源分类表（仅用于算力服务器分类） 列表 */
 /** 算力资源分类表（仅用于算力服务器分类） 列表 */
 defineOptions({ name: 'ResourceCategory' })
 defineOptions({ name: 'ResourceCategory' })
@@ -188,8 +188,8 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 const exportLoading = ref(false) // 导出的加载中
 
 
-// 3. 调用方法获取数字字典（替换 'sys_status' 为你的实际字典类型）
-const statusOptions = getIntDictOptions(DICT_TYPE.COMMON_STATUS);
+// 调用方法获取数字字典
+const statusOptions = getStrDictOptions(DICT_TYPE.COMMON_ENABLE_DISABLE);
 
 
 /** 查询列表 */
 /** 查询列表 */
 const getList = async () => {
 const getList = async () => {

src/views/compute/resourceconfig/ResourceConfigForm.vue

+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="配置类别" prop="configCategory">
+        <!--        <el-input v-model="formData.configCategory" placeholder="请输入配置类别" />-->
+        <el-select
+          v-model="formData.configCategory"
+          placeholder="请选择状态"
+          clearable
+          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 v-model="formData.configOption" placeholder="请输入配置选项"/>
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input-number v-model="formData.sort" controls-position="right" :min="0"/>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio
+          v-model="formData.status"
+          v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+          :key="dict.value"
+          :value="dict.value"
+        >
+          {{ dict.label }}
+        </el-radio>
+      </el-form-item>
+      <el-form-item label="详情备注" prop="detailRemark">
+        <el-input v-model="formData.detailRemark" placeholder="请输入详情备注"/>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import {ResourceConfig, ResourceConfigApi} from '@/api/compute/resourceconfig'
+import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from "@/utils/dict";
+
+/** 算力资源配置 表单 */
+defineOptions({name: 'ResourceConfigForm'})
+
+const {t} = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+
+const categoryOptions = getStrDictOptions(DICT_TYPE.COMPUTE_RESOURCE_CONFIG_CATEGORY);
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  configCategory: undefined,
+  configOption: undefined,
+  sort: undefined,
+  status: undefined,
+  detailRemark: undefined
+})
+const formRules = reactive({
+  configCategory: [{required: true, message: '配置类别不能为空', trigger: 'blur'}],
+  configOption: [{required: true, message: '配置选项不能为空', trigger: 'blur'}],
+  status: [{required: true, message: '状态：0=启用,1=禁用不能为空', trigger: 'blur'}]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ResourceConfigApi.getResourceConfig(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({open}) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ResourceConfig
+    if (formType.value === 'create') {
+      await ResourceConfigApi.createResourceConfig(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ResourceConfigApi.updateResourceConfig(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    configCategory: undefined,
+    configOption: undefined,
+    sort: undefined,
+    status: undefined,
+    detailRemark: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/compute/resourceconfig/index.vue

+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="配置类别" prop="configCategory">
+        <el-input
+          v-model="queryParams.configCategory"
+          placeholder="请输入配置类别"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="配置选项" prop="configOption">
+        <el-input
+          v-model="queryParams.configOption"
+          placeholder="请输入配置选项"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input
+          v-model="queryParams.sort"
+          placeholder="请输入排序"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in statusOptions"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="详情备注" prop="detailRemark">
+        <el-input
+          v-model="queryParams.detailRemark"
+          placeholder="请输入详情备注"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-220px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['compute:resource-config:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['compute:resource-config:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+        <el-button
+            type="danger"
+            plain
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-hasPermi="['compute:resource-config:delete']"
+        >
+          <Icon icon="ep:delete" class="mr-5px" /> 批量删除
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        :show-overflow-tooltip="true"
+        @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="配置选项" 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="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['compute:resource-config:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['compute:resource-config:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ResourceConfigForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+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";
+
+/** 算力资源配置 列表 */
+defineOptions({ name: 'ResourceConfig' })
+
+const statusOptions = getIntDictOptions(DICT_TYPE.COMMON_ENABLE_DISABLE)
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<ResourceConfig[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  configCategory: undefined,
+  configOption: undefined,
+  sort: undefined,
+  status: undefined,
+  detailRemark: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ResourceConfigApi.getResourceConfigPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ResourceConfigApi.deleteResourceConfig(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除算力资源配置 */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await ResourceConfigApi.deleteResourceConfigList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: ResourceConfig[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ResourceConfigApi.exportResourceConfig(queryParams)
+    download.excel(data, '算力资源配置.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

src/views/compute/resourcespu/index.vue

@@ -62,24 +62,24 @@
           class="!w-240px"
           class="!w-240px"
         />
         />
       </el-form-item>
       </el-form-item>
-      <el-form-item label="初始用户名" prop="initUsername">
-        <el-input
-          v-model="queryParams.initUsername"
-          placeholder="请输入初始用户名"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="初始密码" prop="initPassword">
-        <el-input
-          v-model="queryParams.initPassword"
-          placeholder="请输入初始密码"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
+<!--      <el-form-item label="初始用户名" prop="initUsername">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.initUsername"-->
+<!--          placeholder="请输入初始用户名"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="初始密码" prop="initPassword">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.initPassword"-->
+<!--          placeholder="请输入初始密码"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
       <el-form-item label="商品简介" prop="intro">
       <el-form-item label="商品简介" prop="intro">
         <el-input
         <el-input
           v-model="queryParams.intro"
           v-model="queryParams.intro"
@@ -107,15 +107,15 @@
           class="!w-240px"
           class="!w-240px"
         />
         />
       </el-form-item>
       </el-form-item>
-      <el-form-item label="商品轮播图地址，以逗号分隔，最多15张" prop="sliderPicUrls">
-        <el-input
-          v-model="queryParams.sliderPicUrls"
-          placeholder="请输入商品轮播图地址，以逗号分隔，最多15张"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
+<!--      <el-form-item label="商品轮播图地址" prop="sliderPicUrls">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.sliderPicUrls"-->
+<!--          placeholder="请输入商品轮播图地址"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </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"
@@ -134,14 +134,19 @@
           class="!w-240px"
           class="!w-240px"
         />
         />
       </el-form-item>
       </el-form-item>
-      <el-form-item label="状态（0 下架，1 上架，2 回收）" prop="status">
+      <el-form-item label="状态" prop="status">
         <el-select
         <el-select
           v-model="queryParams.status"
           v-model="queryParams.status"
-          placeholder="请选择状态（0 下架，1 上架，2 回收）"
+          placeholder="请选择状态"
           clearable
           clearable
           class="!w-240px"
           class="!w-240px"
         >
         >
-          <el-option label="请选择字典生成" value="" />
+          <el-option
+            v-for="dict in statusOptions"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
         </el-select>
         </el-select>
       </el-form-item>
       </el-form-item>
       <el-form-item label="创建时间" prop="createTime">
       <el-form-item label="创建时间" prop="createTime">
@@ -199,22 +204,38 @@
         @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="算力资源名称" align="center" prop="name" />
+<!--      <el-table-column label="主键ID" align="center" prop="id" />-->
+      <el-table-column label="算力资源名称" min-width="200">
+        <template #default="{ row }">
+          <div class="flex">
+            <el-image
+              fit="cover"
+              :src="row.picUrl"
+              class="flex-none w-50px h-50px"
+              @click="imagePreview(row.picUrl)"
+            />
+            <div class="ml-4 overflow-hidden">
+              <el-tooltip effect="dark" :content="row.name" placement="top">
+                <div>{{ row.name }}</div>
+              </el-tooltip>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column label="CPU配置" align="center" prop="cpu" />
       <el-table-column label="CPU配置" align="center" prop="cpu" />
       <el-table-column label="GPU配置" align="center" prop="gpu" />
       <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="服务器ip" align="center" prop="ip" />
-      <el-table-column label="初始用户名" align="center" prop="initUsername" />
-      <el-table-column label="初始密码" align="center" prop="initPassword" />
+      <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="intro" />
       <el-table-column label="算力资源分类编号" align="center" prop="categoryId" />
       <el-table-column label="算力资源分类编号" align="center" prop="categoryId" />
-      <el-table-column label="商品封面图" align="center" prop="picUrl" />
-      <el-table-column label="商品轮播图地址，以逗号分隔，最多15张" align="center" prop="sliderPicUrls" />
+      <el-table-column label="商品轮播图地址" align="center" prop="sliderPicUrls" />
       <el-table-column label="总库存数量" align="center" prop="stock" />
       <el-table-column label="总库存数量" align="center" prop="stock" />
       <el-table-column label="商品销量" align="center" prop="sales" />
       <el-table-column label="商品销量" align="center" prop="sales" />
-      <el-table-column label="状态（0 下架，1 上架，2 回收）" align="center" prop="status" />
+      <el-table-column label="状态" align="center" min-width="150" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMPUTE_RESOURCE_SPU_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
       <el-table-column
       <el-table-column
         label="创建时间"
         label="创建时间"
         align="center"
         align="center"
@@ -260,8 +281,10 @@
 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 { ResourceSpuApi, ResourceSpu } from '@/api/compute/resourcespu'
 import { ResourceSpuApi, ResourceSpu } from '@/api/compute/resourcespu'
 import ResourceSpuForm from './ResourceSpuForm.vue'
 import ResourceSpuForm from './ResourceSpuForm.vue'
+import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
 
 
 /** 算力资源SPU表（基础配置信息） 列表 */
 /** 算力资源SPU表（基础配置信息） 列表 */
 defineOptions({ name: 'ResourceSpu' })
 defineOptions({ name: 'ResourceSpu' })
@@ -295,6 +318,8 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 const exportLoading = ref(false) // 导出的加载中
 
 
+
+const statusOptions = getIntDictOptions(DICT_TYPE.COMPUTE_RESOURCE_SPU_STATUS)
 /** 查询列表 */
 /** 查询列表 */
 const getList = async () => {
 const getList = async () => {
   loading.value = true
   loading.value = true
@@ -354,6 +379,13 @@ const handleRowCheckboxChange = (records: ResourceSpu[]) => {
   checkedIds.value = records.map((item) => item.id);
   checkedIds.value = records.map((item) => item.id);
 }
 }
 
 
+/** 商品图预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+
 /** 导出按钮操作 */
 /** 导出按钮操作 */
 const handleExport = async () => {
 const handleExport = async () => {
   try {
   try {