算力资源重构-算力资源分类修改1.0

src/views/compute/resourcecategory/ResourceCategoryForm.vue

@@ -7,18 +7,25 @@
       label-width="100px"
       label-width="100px"
       v-loading="formLoading"
       v-loading="formLoading"
     >
     >
-      <el-form-item label="分类名称（如：高性能计算服务资源）" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入分类名称（如：高性能计算服务资源）" />
+      <el-form-item label="分类名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入分类名称" />
       </el-form-item>
       </el-form-item>
-      <el-form-item label="分类图标地址" prop="picUrl">
-        <el-input v-model="formData.picUrl" placeholder="请输入分类图标地址" />
+      <el-form-item label="移动端分类图" prop="picUrl">
+        <UploadImg v-model="formData.picUrl" :limit="1" :is-show-tip="false" />
+        <div style="font-size: 10px" class="pl-10px">推荐 180x180 图片分辨率</div>
       </el-form-item>
       </el-form-item>
-      <el-form-item label="分类排序（数字越小越靠前）" prop="sort">
-        <el-input v-model="formData.sort" placeholder="请输入分类排序（数字越小越靠前）" />
+      <el-form-item label="分类排序" prop="sort">
+        <el-input v-model="formData.sort" placeholder="请输入分类排序" />
       </el-form-item>
       </el-form-item>
-      <el-form-item label="状态（0=启用，1=禁用）" prop="status">
+      <el-form-item label="开启状态" prop="status">
         <el-radio-group v-model="formData.status">
         <el-radio-group v-model="formData.status">
-          <el-radio value="1">请选择字典生成</el-radio>
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
         </el-radio-group>
         </el-radio-group>
       </el-form-item>
       </el-form-item>
     </el-form>
     </el-form>
@@ -30,6 +37,7 @@
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
 import { ResourceCategoryApi, ResourceCategory } from '@/api/compute/resourcecategory'
 import { ResourceCategoryApi, ResourceCategory } from '@/api/compute/resourcecategory'
+import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
 
 
 /** 算力资源分类表（仅用于算力服务器分类） 表单 */
 /** 算力资源分类表（仅用于算力服务器分类） 表单 */
 defineOptions({ name: 'ResourceCategoryForm' })
 defineOptions({ name: 'ResourceCategoryForm' })
@@ -49,9 +57,9 @@ const formData = ref({
   status: undefined
   status: undefined
 })
 })
 const formRules = reactive({
 const formRules = reactive({
-  name: [{ required: true, message: '分类名称（如：高性能计算服务资源）不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
   picUrl: [{ required: true, message: '分类图标地址不能为空', trigger: 'blur' }],
   picUrl: [{ required: true, message: '分类图标地址不能为空', trigger: 'blur' }],
-  status: [{ required: true, message: '状态（0=启用，1=禁用）不能为空', trigger: 'blur' }]
+  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
 })
 })
 const formRef = ref() // 表单 Ref
 const formRef = ref() // 表单 Ref
 
 

src/views/compute/resourcecategory/index.vue

@@ -8,41 +8,46 @@
       :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="请输入分类名称"
           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="picUrl">
-        <el-input
-          v-model="queryParams.picUrl"
-          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="状态（0=启用，1=禁用）" prop="status">
+<!--      <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="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
         <el-select
           v-model="queryParams.status"
           v-model="queryParams.status"
-          placeholder="请选择状态（0=启用，1=禁用）"
+          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">
@@ -101,10 +106,18 @@
     >
     >
     <el-table-column type="selection" width="55" />
     <el-table-column type="selection" width="55" />
       <el-table-column label="分类编号" align="center" prop="id" />
       <el-table-column label="分类编号" align="center" prop="id" />
-      <el-table-column label="分类名称（如：高性能计算服务资源）" align="center" prop="name" />
-      <el-table-column label="分类图标地址" align="center" prop="picUrl" />
-      <el-table-column label="分类排序（数字越小越靠前）" align="center" prop="sort" />
-      <el-table-column label="状态（0=启用，1=禁用）" align="center" prop="status" />
+      <el-table-column label="分类名称" align="center" prop="name" />
+      <el-table-column label="分类图标" align="center" min-width="80" prop="picUrl">
+        <template #default="scope">
+          <img :src="scope.row.picUrl" alt="移动端分类图" class="h-36px" />
+        </template>
+      </el-table-column>
+      <el-table-column label="分类排序" align="center" prop="sort" />
+      <el-table-column label="状态" align="center" min-width="150" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
       <el-table-column
       <el-table-column
         label="创建时间"
         label="创建时间"
         align="center"
         align="center"
@@ -152,6 +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";
 
 
 /** 算力资源分类表（仅用于算力服务器分类） 列表 */
 /** 算力资源分类表（仅用于算力服务器分类） 列表 */
 defineOptions({ name: 'ResourceCategory' })
 defineOptions({ name: 'ResourceCategory' })
@@ -174,6 +188,9 @@ 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 getList = async () => {
 const getList = async () => {
   loading.value = true
   loading.value = true