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

e3a046d6 · Jony.L · b2977701 · e3a046d6 · e3a046d6 · e3a046d6
Commit e3a046d6 authored Oct 01, 2025 by Jony.L
Showing with 207 additions and 130 deletions

src/router/modules/remaining.ts
+3 -16

src/views/compute/resourceconfig/index.vue
+23 -8

src/views/compute/resourcespu/form/index.vue
+53 -42

src/views/compute/resourcespu/index.vue
+128 -64

No files found.
--- a/src/router/modules/remaining.ts
+++ b/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: '算力资源添加',
+          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'
        }
      }

--- a/src/views/compute/resourceconfig/index.vue
+++ b/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="主键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="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
        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() // 国际化

--- a/src/views/compute/resourcespu/form/index.vue
+++ b/src/views/compute/resourcespu/form/index.vue
 <template>
  <ContentWrap v-loading="formLoading">
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
+    <el-form ref="formRef" :model="formData" :rules="!isDetailMode ? formRules : {}" label-width="120px">
      <!-- 1. 算力资源名称 -->
      <el-form-item label="算力资源名称" prop="name">
        <el-input
@@ -9,17 +9,18 @@
          class="w-60!"
          maxlength="64"
          show-word-limit
+          :disabled="isDetailMode"
        />
      </el-form-item>
      <!-- 2. 商品封面图 -->
      <el-form-item label="商品封面图" prop="picUrl">
-        <UploadImg v-model="formData.picUrl" height="80px" />
+        <UploadImg v-model="formData.picUrl" height="80px" :disabled="isDetailMode" />
      </el-form-item>
      <!-- 3. 算力资源分类 -->
      <el-form-item label="算力资源分类" prop="categoryId">
-        <el-select v-model="formData.categoryId" placeholder="请选择算力资源分类" clearable style="width: 200px;">
+        <el-select v-model="formData.categoryId" placeholder="请选择算力资源分类" clearable style="width: 200px;" :disabled="isDetailMode">
          <el-option
            v-for="category in categoryList"
            :key="category.id"
@@ -32,7 +33,7 @@
      <!-- 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-select v-model="formData.cpu" placeholder="请选择CPU配置" clearable style="width: 180px;" :disabled="isDetailMode">
            <el-option
              v-for="option in cpuOptions"
              :key="option.id"
@@ -42,7 +43,7 @@
          </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-select v-model="formData.gpu" placeholder="请选择GPU配置" clearable style="width: 180px;" :disabled="isDetailMode">
            <el-option
              v-for="option in gpuOptions"
              :key="option.id"
@@ -55,7 +56,7 @@
      <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-select v-model="formData.ram" placeholder="请选择内存配置" clearable style="width: 180px;" :disabled="isDetailMode">
            <el-option
              v-for="option in ramOptions"
              :key="option.id"
@@ -65,7 +66,7 @@
          </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-select v-model="formData.storage" placeholder="请选择存储配置" clearable style="width: 180px;" :disabled="isDetailMode">
            <el-option
              v-for="option in storageOptions"
              :key="option.id"
@@ -78,25 +79,25 @@
      <!-- 5. 服务器信息 -->
      <el-form-item label="服务器IP" prop="ip">
-        <el-input v-model="formData.ip" placeholder="请输入服务器IP" style="width: 300px;" />
+        <el-input v-model="formData.ip" placeholder="请输入服务器IP" style="width: 300px;" :disabled="isDetailMode" />
      </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-input v-model="formData.initUsername" placeholder="请输入初始用户名" style="width: 180px;" autocomplete="off" :disabled="isDetailMode" />
        </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-input v-model="formData.initPassword" placeholder="请输入初始密码" type="password" style="width: 180px;" autocomplete="new-password" :disabled="isDetailMode" />
        </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-input v-model="formData.stock" placeholder="请输入库存数量" style="width: 150px;" :disabled="isDetailMode" />
        </el-form-item>
        <el-form-item label="商品销量" prop="sales" style="margin-bottom: 0;">
-          <el-input v-model="formData.sales" placeholder="请输入商品销量" style="width: 150px;" />
+          <el-input v-model="formData.sales" placeholder="请输入商品销量" style="width: 150px;" :disabled="isDetailMode" />
        </el-form-item>
      </div>
@@ -108,6 +109,7 @@
          type="textarea"
          rows="3"
          style="width: 400px;"
+          :disabled="isDetailMode"
        />
      </el-form-item>
@@ -124,7 +126,7 @@
      <!-- 9. 状态 -->
      <el-form-item label="状态" prop="status">
-        <el-radio-group v-model="formData.status">
+        <el-radio-group v-model="formData.status" :disabled="isDetailMode">
          <el-radio
            v-for="dict in getIntDictOptions(DICT_TYPE.COMPUTE_RESOURCE_SPU_STATUS)"
            :key="dict.value"
@@ -137,10 +139,12 @@
      <!-- 操作按钮 -->
      <el-form-item style="text-align: center; margin-top: 30px;">
-        <el-button :loading="formLoading" type="primary" size="large" @click="submitForm">
+        <el-button v-if="!isDetailMode" :loading="formLoading" type="primary" size="large" @click="submitForm">
          保存
        </el-button>
-        <el-button size="large" style="margin-left: 20px;" @click="close">返回</el-button>
+        <el-button size="large" style="margin-left: 20px;" @click="close">
+          {{ isDetailMode ? '返回' : '取消' }}
+        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
@@ -150,7 +154,7 @@
 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 { useHardwareConfigStore } from '@/store/modules/compute/hardwareConfig'
 import { ResourceSpu, ResourceSpuApi } from '@/api/compute/resourcespu'
 defineOptions({ name: 'ResourceSpuAdd' })
@@ -159,15 +163,27 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const { push, currentRoute } = useRouter() // 路由
 const { params, name } = useRoute() // 查询参数
+// 获取路由参数
+const { mode, id } = params as { mode?: string, id?: string }
+// 判断当前模式
+const currentMode = computed(() => mode || 'add')
+const isDetailMode = computed(() => currentMode.value === 'detail')
+const isEditMode = computed(() => currentMode.value === 'edit')
+const isAddMode = computed(() => currentMode.value === 'add')
 const { delView } = useTagsViewStore() // 视图操作
+const hardwareConfigStore = useHardwareConfigStore() // 硬件配置store
 const formLoading = ref(false) // 表单的加载中
 const formRef = ref() // 表单 Ref
 const categoryList = ref<any[]>([])
-const cpuOptions = ref<any[]>([])
-const gpuOptions = ref<any[]>([])
+// 从store获取硬件配置选项
-const ramOptions = ref<any[]>([])
+const cpuOptions = computed(() => hardwareConfigStore.getOptionsByType('cpu'))
-const storageOptions = ref<any[]>([])
+const gpuOptions = computed(() => hardwareConfigStore.getOptionsByType('gpu'))
+const ramOptions = computed(() => hardwareConfigStore.getOptionsByType('ram'))
+const storageOptions = computed(() => hardwareConfigStore.getOptionsByType('storage'))
 const formData = ref<ResourceSpu>({
  id: undefined,
@@ -204,27 +220,15 @@ const formRules = reactive({
  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 emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
  await formRef.value.validate()
  formLoading.value = true
  try {
    const data = formData.value as unknown as ResourceSpu
-    if (params.id) {
+    if (isEditMode.value) {
      // 编辑
      await ResourceSpuApi.updateResourceSpu(data)
      message.success(t('common.updateSuccess'))
@@ -234,6 +238,8 @@ const submitForm = async () => {
      message.success(t('common.createSuccess'))
    }
    close()
+    // 发送操作成功的事件
+    emit('success')
  } finally {
    formLoading.value = false
  }
@@ -247,21 +253,25 @@ const close = () => {
 /** 初始化 */
 onMounted(async () => {
-  // 加载分类列表
+  try {
-  const categoryResponse = await ResourceSpuApi.listSimpleCategory()
+    // 并行加载分类列表和硬件配置选项
+    const [categoryResponse] = await Promise.all([
+      ResourceSpuApi.listSimpleCategory(),
+      hardwareConfigStore.loadConfigOptions()
+    ])
    categoryList.value = categoryResponse
-  // 加载配置选项
+    // 编辑模式或详情模式需要获取数据
-  await loadConfigOptions()
+    if (isEditMode.value || isDetailMode.value) {
-  // 如果是编辑模式，获取数据
-  if (params.id) {
      formLoading.value = true
      try {
-      formData.value = await ResourceSpuApi.getResourceSpu(Number(params.id))
+        formData.value = await ResourceSpuApi.getResourceSpu(Number(id))
      } finally {
        formLoading.value = false
      }
    }
+  } catch (error) {
+    console.error('初始化失败:', error)
+  }
 })
 </script>
\ No newline at end of file
--- a/src/views/compute/resourcespu/index.vue
+++ b/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-form-item label="CPU" prop="cpu">
-        <el-input
+        <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-form-item label="GPU" prop="gpu">
-        <el-input
+        <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-form-item label="内存" prop="ram">
-        <el-input
+        <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-form-item label="存储" prop="storage">
-        <el-input
+        <el-select
          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
-          @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-form-item label="资源分类" prop="categoryId">
-        <el-input
+        <el-select
          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
-          @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-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-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>