解决所有bug 优化table内容

src/views/stuwork/dormhygienedaily/index.vue

@@ -39,7 +39,8 @@
               placeholder="请选择楼号" 
               clearable
               filterable 
-              style="width: 200px">
+              style="width: 200px"
+              @change="handleBuildingChange">
               <el-option
                 v-for="item in buildingList"
                 :key="item.buildingNo"
@@ -48,6 +49,22 @@
               </el-option>
             </el-select>
           </el-form-item>
+          <el-form-item label="宿舍号" prop="roomNo">
+            <el-select 
+              v-model="searchForm.roomNo" 
+              placeholder="请选择宿舍号" 
+              clearable
+              filterable
+              :disabled="!searchForm.buildingNo"
+              style="width: 200px">
+              <el-option
+                v-for="item in filteredRoomList"
+                :key="item.roomNo"
+                :label="item.roomNo"
+                :value="item.roomNo">
+              </el-option>
+            </el-select>
+          </el-form-item>
           <el-form-item>
             <el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>
             <el-button icon="Refresh" @click="handleReset">重置</el-button>
@@ -82,22 +99,60 @@
         :cell-style="tableStyle.cellStyle" 
         :header-cell-style="tableStyle.headerCellStyle"
         @sort-change="sortChangeHandle">
-        <el-table-column type="index" label="序号" width="60" align="center" />
-        <el-table-column prop="schoolYear" label="学年" show-overflow-tooltip align="center" />
-        <el-table-column prop="schoolTerm" label="学期" show-overflow-tooltip align="center">
-          <template #default="scope">
-            <span>{{ scope.row.schoolTerm === '1' ? '第一学期' : scope.row.schoolTerm === '2' ? '第二学期' : scope.row.schoolTerm }}</span>
+        <el-table-column type="index" label="序号" width="60" align="center">
+          <template #header>
+            <el-icon><List /></el-icon>
+          </template>
+        </el-table-column>
+        <el-table-column prop="schoolYear" label="学年" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><Calendar /></el-icon>
+            <span style="margin-left: 4px">学年</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="schoolTerm" label="学期" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><Clock /></el-icon>
+            <span style="margin-left: 4px">学期</span>
+          </template>
+          <template #default="scope">
+            <el-tag size="small" type="primary" effect="plain">
+              {{ scope.row.schoolTerm === '1' ? '第一学期' : scope.row.schoolTerm === '2' ? '第二学期' : scope.row.schoolTerm }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="buildingNo" label="楼号" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><OfficeBuilding /></el-icon>
+            <span style="margin-left: 4px">楼号</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="roomNo" label="宿舍号" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><House /></el-icon>
+            <span style="margin-left: 4px">宿舍号</span>
           </template>
         </el-table-column>
-        <el-table-column prop="buildingNo" label="楼号" show-overflow-tooltip align="center" />
-        <el-table-column prop="roomNo" label="宿舍号" show-overflow-tooltip align="center" />
         <el-table-column prop="recordDate" label="记录日期" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><Calendar /></el-icon>
+            <span style="margin-left: 4px">记录日期</span>
+          </template>
           <template #default="scope">
             <span>{{ scope.row.recordDate ? scope.row.recordDate.split(' ')[0] : '-' }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="note" label="情况记录" show-overflow-tooltip align="center" />
+        <el-table-column prop="note" label="情况记录" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><Document /></el-icon>
+            <span style="margin-left: 4px">情况记录</span>
+          </template>
+        </el-table-column>
         <el-table-column label="操作" width="150" align="center" fixed="right">
+          <template #header>
+            <el-icon><Setting /></el-icon>
+            <span style="margin-left: 4px">操作</span>
+          </template>
           <template #default="scope">
             <el-button 
               icon="Edit" 
@@ -134,12 +189,14 @@ import { ref, reactive, defineAsyncComponent, onMounted } from 'vue'
 import { BasicTableProps, useTable } from "/@/hooks/table";
 import { fetchList, delObjs } from "/@/api/stuwork/dormhygienedaily";
 import { getBuildingList } from "/@/api/stuwork/dormbuilding";
+import { getDormRoomDataByBuildingNo } from "/@/api/stuwork/dormroom";
 import { queryAllSchoolYear } from "/@/api/basic/basicyear";
 import { useMessage, useMessageBox } from "/@/hooks/message";
 import { getDicts } from "/@/api/admin/dict";
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+import { List, Calendar, Clock, OfficeBuilding, House, Document, Setting } from '@element-plus/icons-vue'
 
 // 定义变量内容
 const formDialogRef = ref()
@@ -148,12 +205,22 @@ const showSearch = ref(true)
 const schoolYearList = ref<any[]>([])
 const schoolTermList = ref<any[]>([])
 const buildingList = ref<any[]>([])
+const roomList = ref<any[]>([])
 
 // 搜索表单
 const searchForm = reactive({
   schoolYear: '',
   schoolTerm: '',
-  buildingNo: ''
+  buildingNo: '',
+  roomNo: ''
+})
+
+// 根据楼号筛选房间列表
+const filteredRoomList = computed(() => {
+  if (!searchForm.buildingNo) {
+    return []
+  }
+  return roomList.value.filter((item: any) => item.buildingNo === searchForm.buildingNo)
 })
 
 // 配置 useTable
@@ -180,12 +247,26 @@ const handleSearch = () => {
   getDataList()
 }
 
+// 楼号选择变化
+const handleBuildingChange = () => {
+  // 清空宿舍号选择
+  searchForm.roomNo = ''
+  // 重新加载房间列表
+  if (searchForm.buildingNo) {
+    getRoomListData(searchForm.buildingNo)
+  } else {
+    roomList.value = []
+  }
+}
+
 // 重置
 const handleReset = () => {
   searchFormRef.value?.formRef?.resetFields()
   searchForm.schoolYear = ''
   searchForm.schoolTerm = ''
   searchForm.buildingNo = ''
+  searchForm.roomNo = ''
+  roomList.value = []
   getDataList()
 }
 
@@ -252,6 +333,23 @@ const getBuildingListData = async () => {
   }
 }
 
+// 根据楼号获取房间列表
+const getRoomListData = async (buildingNo: string) => {
+  if (!buildingNo) {
+    roomList.value = []
+    return
+  }
+  try {
+    const res = await getDormRoomDataByBuildingNo({ buildingNo })
+    if (res.data) {
+      roomList.value = Array.isArray(res.data) ? res.data : []
+    }
+  } catch (err) {
+    console.error('获取房间列表失败', err)
+    roomList.value = []
+  }
+}
+
 // 初始化
 onMounted(() => {
   getSchoolYearList()