feat 优化反应器列表页面

src/api/types/ReactorType.ts

@@ -1,5 +1,5 @@
 import { ServiceResponse } from './response';
-import { ServiceRequstPage } from './pageInput'
+import { ServiceRequestPage } from './pageInput'
 import { PageResponse } from './pageResponse'
 
 // 设备状态枚举
@@ -106,7 +106,7 @@ export interface ReactorTypeEnumItem {
 }
 
 // API 类型定义
-export type ReactorPageInput = ServiceRequstPage<ReactorFilter>;
+export type ReactorPageInput = ServiceRequestPage<ReactorFilter>;
 export type ReactorPageResponse = ServiceResponse<PageResponse<ReactorDto>>;
 export type ReactorOutput = ServiceResponse<ReactorDto[]>;
 export type ReactorAddInput = ReactorDto;

src/api/types/pageInput.ts

@@ -1,4 +1,4 @@
-export interface ServiceRequstPage<T> {
+export interface ServiceRequestPage<T> {
   dynamicFilter?: DynamicFilterInfo;
   /** 排序列表 */
   sortList?: SortInput[] | null;

src/views/admin/reactor/index.vue

@@ -3,7 +3,8 @@
     <el-card class="my-query-box mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
       <el-form :inline="true" label-width="auto" :label-position="'left'" @submit.stop.prevent>
         <el-form-item label="关键字" prop="keyWord">
-          <el-input v-model="state.filter.keyWord" placeholder="请输入设备编号/资产编号/产品ID/型号" clearable style="width: 300px" @keyup.enter="handleQuery" />
+          <el-input v-model="state.filter.keyWord" placeholder="请输入设备编号/资产编号/产品ID/型号" clearable style="width: 300px"
+            @keyup.enter="handleQuery" />
         </el-form-item>
         <el-form-item label="房间" prop="roomID">
           <el-select v-model="state.filter.roomID" placeholder="请选择房间" clearable style="width: 200px">
@@ -20,7 +21,8 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" icon="ele-Search" @click="handleQuery">查询</el-button>
-          <el-button v-auth="'api:admin:equ-reactor:add'" type="primary" icon="ele-Plus" @click="handleAdd">新增</el-button>
+          <el-button v-auth="'api:admin:equ-reactor:add'" type="primary" icon="ele-Plus"
+            @click="handleAdd">新增</el-button>
         </el-form-item>
       </el-form>
     </el-card>
@@ -29,33 +31,30 @@
       <el-table v-loading="loading" :data="state.reactorList" row-key="id" style="width: 100%" border>
         <el-table-column prop="deviceNo" label="设备编号" min-width="120" show-overflow-tooltip />
         <el-table-column prop="assetNo" label="资产编号" min-width="120" show-overflow-tooltip />
-        <el-table-column prop="productID" label="产品ID" min-width="120" show-overflow-tooltip />
-        <el-table-column prop="model" label="型号" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="model" label="设备型号" width="100">
+          <template #default="{ row }">
+            {{ getDeviceModelDesc(row.model) }}
+          </template>
+        </el-table-column>
         <el-table-column prop="specification" label="规格" min-width="120" show-overflow-tooltip />
         <el-table-column prop="capacity" label="容量(g)" min-width="100" show-overflow-tooltip />
-        <el-table-column prop="roomName" label="房间名称" min-width="120" show-overflow-tooltip />
-        <el-table-column prop="principalName" label="负责人" min-width="100" show-overflow-tooltip />
+        <el-table-column prop="roomId" label="房间" width="100">
+          <template #default="{ row }">
+            {{ getRoomName(row.roomID) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="roomId" label="负责人" width="200">
+          <template #default="{ row }">
+            {{ getPrincipalName(row.principalId) }}
+          </template>
+        </el-table-column>
         <el-table-column prop="deviceStatus" label="设备状态" width="100">
           <template #default="{ row }">
-            <el-tag :type="getDeviceStatusType(row.deviceStatus)">
+            <el-tag>
               {{ getDeviceStatusDesc(row.deviceStatus) }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="维护标志" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag :type="getMaintenanceFlagType(row.maintenanceFlag)">
-              {{ row.maintenanceFlagDesc }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="是否维护中" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag :type="row.isMaintenance ? 'warning' : 'info'">
-              {{ row.isMaintenance ? '是' : '否' }}
-            </el-tag>
-          </template>
-        </el-table-column>
         <el-table-column prop="createdTime" label="创建时间" min-width="160" show-overflow-tooltip />
         <el-table-column label="操作" width="180" fixed="right" header-align="center" align="center">
           <template #default="{ row }">
@@ -82,13 +81,15 @@ import { ref, reactive, onMounted, onBeforeMount } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ReactorApi } from '/@/api/admin/reactor'
 import { RoomApi } from '/@/api/admin/Room'
+import { UserApi } from '/@/api/admin/User'
+import { DictApi } from '/@/api/admin/Dict'
+
 import eventBus from '/@/utils/mitt'
 import type {
   ReactorPageInput,
   ReactorDto,
   ReactorTypeEnumItem
 } from '/@/api/types/ReactorType'
-import { DeviceStatusEnum, MaintenanceFlagEnum } from '/@/api/types/ReactorType'
 
 import ReactorForm from './components/reactor-form.vue'
 
@@ -119,58 +120,10 @@ const state = reactive({
   reactorList: [] as Array<ReactorDto>,
   roomOptions: [] as Array<{ id: number; name: string }>,
   principalOptions: [] as Array<{ id: number; name: string }>,
-  deviceStatusOptions: [] as ReactorTypeEnumItem[]
+  deviceStatusOptions: [] as ReactorTypeEnumItem[],
+  deviceModelOptions: [] as Array<{ id: string; name: string }>,
 })
 
-/** 获取设备状态枚举列表 */
-const getDeviceStatusOptions = async () => {
-  try {
-    const res = await new ReactorApi().getDeviceStatusEnumList()
-    state.deviceStatusOptions = res.data ?? []
-  } catch (error) {
-    console.error('获取设备状态枚举列表失败:', error)
-  }
-}
-
-/** 获取设备状态描述 */
-const getDeviceStatusDesc = (value: number) => {
-  const item = state.deviceStatusOptions.find(item => item.value === value)
-  return item?.label || '未知'
-}
-
-/** 获取设备状态类型 */
-const getDeviceStatusType = (value: number) => {
-  switch (value) {
-    case DeviceStatusEnum.Normal:
-      return 'success'
-    case DeviceStatusEnum.Fault:
-      return 'danger'
-    case DeviceStatusEnum.Maintenance:
-      return 'warning'
-    default:
-      return 'info'
-  }
-}
-
-/** 获取维护标志描述 */
-const getMaintenanceFlagDesc = (flag: MaintenanceFlagEnum) => {
-  const flagMap = {
-    [MaintenanceFlagEnum.None]: '无',
-    [MaintenanceFlagEnum.Regular]: '定期维护',
-    [MaintenanceFlagEnum.Emergency]: '紧急维护'
-  }
-  return flagMap[flag] || '未知'
-}
-
-/** 获取维护标志标签类型 */
-const getMaintenanceFlagType = (flag: MaintenanceFlagEnum) => {
-  const typeMap = {
-    [MaintenanceFlagEnum.None]: 'info',
-    [MaintenanceFlagEnum.Regular]: 'warning',
-    [MaintenanceFlagEnum.Emergency]: 'danger'
-  }
-  return typeMap[flag] || 'info'
-}
 
 /** 查询列表 */
 const getList = async () => {
@@ -178,6 +131,8 @@ const getList = async () => {
   state.filter.pageIndex = state.pageInput.currentPage ?? 1
   state.filter.pageSize = state.pageInput.pageSize ?? 20
   try {
+
+    console.log(state.filter);
     const res = await new ReactorApi().getPage(state.filter)
     state.reactorList = res.data?.list || []
     state.total = res.data?.total || 0
@@ -237,6 +192,16 @@ const handleCurrentChange = (val: number) => {
   getList()
 }
 
+/** 获取设备状态枚举列表 */
+const getDeviceStatusOptions = async () => {
+  try {
+    const res = await new ReactorApi().getDeviceStatusEnumList()
+    state.deviceStatusOptions = res.data ?? []
+  } catch (error) {
+    console.error('获取设备状态枚举列表失败:', error)
+  }
+}
+
 /** 获取房间列表 */
 const getRoomOptions = async () => {
   try {
@@ -245,6 +210,7 @@ const getRoomOptions = async () => {
       pageSize: 1000,
       filter: {}
     })
+
     state.roomOptions = res.data?.list?.map((item: any) => ({
       id: item.id,
       name: item.roomName
@@ -257,21 +223,65 @@ const getRoomOptions = async () => {
 /** 获取负责人列表 */
 const getPrincipalOptions = async () => {
   try {
-    // TODO: 调用获取负责人列表API
-    state.principalOptions = [
-      { id: 1, name: '张三' },
-      { id: 2, name: '李四' }
-    ]
+    const res = await new UserApi().getPage({
+      currentPage: 1,
+      pageSize: 1000,
+      filter: {}
+    })
+
+    state.principalOptions = res.data?.list?.map((item: any) => ({
+      id: item.id,
+      name: item.userName
+    })) || []
   } catch (error) {
-    console.error('获取负责人列表失败:', error)
+    console.error('获取用户列表失败:', error)
   }
 }
 
+const getDeviceModelOptions = async () => {
+  try {
+    const res = await new DictApi().getList(['ReactorModel'])
+    state.deviceModelOptions = res.data?.reactorModel?.map((item: any) => ({
+      id: item.value,
+      name: item.name
+    })) || []
+  }
+  catch (error) {
+    console.error('获取设备型号列表失败:', error)
+  }
+}
+
+/** 获取设备型号描述 */
+const getDeviceModelDesc = (value: string) => {
+  const item = state.deviceModelOptions.find(item => item.id === value)
+  return item?.name || '未知'
+}
+
+/** 获取设备状态描述 */
+const getDeviceStatusDesc = (value: number) => {
+  const item = state.deviceStatusOptions.find(item => item.value === value)
+  return item?.label || '未知'
+}
+
+/** 获取设备状态描述 */
+const getRoomName = (value: number) => {
+  const item = state.roomOptions.find(item => item.id === value)
+  return item?.name || '未知'
+}
+
+/** 获取负责人名称 */
+const getPrincipalName = (value: number) => {
+  const item = state.principalOptions.find(item => item.id === value)
+  return item?.name || '未知'
+}
+
 onMounted(() => {
-  getList()
   getRoomOptions()
   getPrincipalOptions()
   getDeviceStatusOptions()
+  getDeviceModelOptions()
+
+  getList()
   eventBus.on('refreshReactor', getList)
 })