解决所有bug 优化table内容

2026-01-21 18:43:39 +08:00
parent 9984200814
commit 7f0280ec8a
80 changed files with 5202 additions and 744 deletions
--- a/src/views/stuwork/dormreform/index.vue
+++ b/src/views/stuwork/dormreform/index.vue
@@ -10,7 +10,8 @@
              placeholder="请选择楼号" 
              clearable
              filterable 
-              style="width: 200px">
+              style="width: 200px"
+              @change="handleBuildingChange">
              <el-option
                v-for="item in buildingList"
                :key="item.buildingNo"
@@ -20,11 +21,20 @@
            </el-select>
          </el-form-item>
          <el-form-item label="房间号" prop="roomNo">
-            <el-input 
+            <el-select 
              v-model="searchForm.roomNo" 
-              placeholder="请输入房间号" 
+              placeholder="请选择房间号" 
              clearable
-              style="width: 200px" />
+              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 label="月份" prop="month">
            <el-date-picker
@@ -76,23 +86,68 @@
        :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="deptName" label="学院" show-overflow-tooltip align="center" />
-        <el-table-column prop="classNos" label="班级" show-overflow-tooltip align="center" />
-        <el-table-column prop="roomNo" label="房间号" show-overflow-tooltip align="center" />
+        <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="deptName" 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="classNos" label="班级" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><Grid /></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="reformDate" 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.reformDate ? scope.row.reformDate.split(' ')[0] : '-' }}</span>
          </template>
        </el-table-column>
-        <el-table-column prop="reformContent" label="整改内容" show-overflow-tooltip align="center" />
-        <el-table-column prop="reformStatus" label="整改结果" show-overflow-tooltip align="center">
-          <template #default="scope">
-            <span>{{ formatReformStatus(scope.row.reformStatus) }}</span>
+        <el-table-column prop="reformContent" 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 prop="reformStatus" label="整改结果" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><CircleCheck /></el-icon>
+            <span style="margin-left: 4px">整改结果</span>
+          </template>
+          <template #default="scope">
+            <StatusTag 
+              :value="scope.row.reformStatus"
+              :options="[{ label: '合格', value: '合格' }, { label: '不合格', value: '不合格' }, { label: '未整改', value: '未整改' }]"
+              :type-map="{ '合格': { type: 'success', effect: 'light' }, '不合格': { type: 'danger', effect: 'light' }, '未整改': { type: 'warning', effect: 'light' } }"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="remarks" label="关联扣分明细" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><EditPen /></el-icon>
+            <span style="margin-left: 4px">关联扣分明细</span>
          </template>
        </el-table-column>
-        <el-table-column prop="remarks" label="关联扣分明细" show-overflow-tooltip align="center" />
        <el-table-column label="操作" width="350" align="center" fixed="right">
+          <template #header>
+            <el-icon><Setting /></el-icon>
+            <span style="margin-left: 4px">操作</span>
+          </template>
          <template #default="scope">
            <el-button 
              text 
@@ -146,22 +201,27 @@
 </template>

 <script setup lang="ts" name="DormHygieneMonthly">
-import { ref, reactive, defineAsyncComponent, onMounted } from 'vue'
+import { ref, reactive, defineAsyncComponent, computed, onMounted } from 'vue'
 import { BasicTableProps, useTable } from "/@/hooks/table";
 import { fetchList, putObj, delObjs } from "/@/api/stuwork/dormreform";
 import { getBuildingList } from "/@/api/stuwork/dormbuilding";
+import { getDormRoomDataByBuildingNo } from "/@/api/stuwork/dormroom";
 import { useMessage, useMessageBox } from "/@/hooks/message";
 import { getDicts } from "/@/api/admin/dict";
 import { downBlobFile, adaptationUrl } from "/@/utils/other";

 // 引入组件
 const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+import { List, OfficeBuilding, Grid, House, Calendar, Document, CircleCheck, EditPen, Setting } from '@element-plus/icons-vue'
+import { defineAsyncComponent as defineStatusTag } from 'vue'
+const StatusTag = defineStatusTag(() => import('/@/components/StatusTag/index.vue'))

 // 定义变量内容
 const formDialogRef = ref()
 const searchFormRef = ref()
 const showSearch = ref(true)
 const buildingList = ref<any[]>([])
+const roomList = ref<any[]>([])
 const reformStatusDict = ref<any[]>([])

 // 搜索表单
@@ -171,6 +231,14 @@ const searchForm = reactive({
  month: ''
 })

+// 根据楼号筛选房间列表
+const filteredRoomList = computed(() => {
+  if (!searchForm.buildingNo) {
+    return []
+  }
+  return roomList.value.filter((item: any) => item.buildingNo === searchForm.buildingNo)
+})
+
 // 配置 useTable
 const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: searchForm,
@@ -191,6 +259,18 @@ const {
  tableStyle
 } = useTable(state)

+// 楼号选择变化
+const handleBuildingChange = () => {
+  // 清空房间号选择
+  searchForm.roomNo = ''
+  // 重新加载房间列表
+  if (searchForm.buildingNo) {
+    getRoomListData(searchForm.buildingNo)
+  } else {
+    roomList.value = []
+  }
+}
+
 // 查询
 const handleSearch = () => {
  getDataList()
@@ -284,6 +364,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 = []
+  }
+}
+
 // 获取整改结果字典
 const getReformStatusDict = async () => {
  try {