merge code

src/views/stuwork/classroomhygienemonthly/index.vue

@@ -1,9 +1,17 @@
 <template>
-  <div class="layout-padding">
-    <div class="layout-padding-auto layout-padding-view">
-      <!-- 搜索表单 -->
-      <el-row v-show="showSearch">
-        <el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
+  <div class="modern-page-container">
+    <div class="page-wrapper">
+      <!-- 搜索表单卡片 -->
+      <el-card v-show="showSearch" class="search-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span class="card-title">
+              <el-icon class="title-icon"><Search /></el-icon>
+              筛选条件
+            </span>
+          </div>
+        </template>
+        <el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
           <el-form-item label="学年" prop="schoolYear">
             <el-select 
               v-model="searchForm.schoolYear" 
@@ -71,75 +79,84 @@
             <el-button icon="Refresh" @click="handleReset">重置</el-button>
           </el-form-item>
         </el-form>
-      </el-row>
+      </el-card>
 
-      <!-- 操作按钮 -->
-      <el-row>
-        <div class="mb8" style="width: 100%">
-          <el-button 
-            icon="Upload" 
-            type="primary" 
-            class="ml10" 
-            @click="handleImport">
-            导入
-          </el-button>
-          <el-button 
-            icon="DocumentChecked" 
-            type="success" 
-            class="ml10" 
-            @click="handleCheck">
-            考核
-          </el-button>
-          <right-toolbar  
-            v-model:showSearch="showSearch" 
-            class="ml10" 
-            style="float: right;"
-            @queryTable="getDataList">
-            <TableColumnControl
-              ref="columnControlRef"
-              :columns="tableColumns"
-              v-model="visibleColumns"
-              trigger-type="default"
-              trigger-circle
-              @change="handleColumnChange"
-              @order-change="handleColumnOrderChange"
-            >
-              <template #trigger>
-                <el-tooltip class="item" effect="dark" content="列设置" placement="top">
-                  <el-button circle style="margin-left: 0;">
-                    <el-icon><Menu /></el-icon>
-                  </el-button>
-                </el-tooltip>
-              </template>
-            </TableColumnControl>
-          </right-toolbar>
-        </div>
-      </el-row>
+      <!-- 内容卡片 -->
+      <el-card class="content-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span class="card-title">
+              <el-icon class="title-icon"><Document /></el-icon>
+              教室卫生月度分析列表
+            </span>
+            <div class="header-actions">
+              <el-button 
+                icon="Upload" 
+                type="primary" 
+                @click="handleImport">
+                导入
+              </el-button>
+              <el-button 
+                icon="DocumentChecked" 
+                type="success" 
+                class="ml10" 
+                @click="handleCheck">
+                考核
+              </el-button>
+              <right-toolbar  
+                v-model:showSearch="showSearch" 
+                class="ml10"
+                @queryTable="getDataList">
+                <TableColumnControl
+                  ref="columnControlRef"
+                  :columns="tableColumns"
+                  v-model="visibleColumns"
+                  trigger-type="default"
+                  trigger-circle
+                  @change="handleColumnChange"
+                  @order-change="handleColumnOrderChange"
+                >
+                  <template #trigger>
+                    <el-tooltip class="item" effect="dark" content="列设置" placement="top">
+                      <el-button circle style="margin-left: 0;">
+                        <el-icon><Menu /></el-icon>
+                      </el-button>
+                    </el-tooltip>
+                  </template>
+                </TableColumnControl>
+              </right-toolbar>
+            </div>
+          </div>
+        </template>
 
-      <!-- 表格 -->
-      <el-table 
-        ref="tableRef"
-        :data="state.dataList" 
-        v-loading="state.loading" 
-        border 
-        :cell-style="tableStyle.cellStyle" 
-        :header-cell-style="tableStyle.headerCellStyle"
-        @sort-change="sortChangeHandle">
-        <el-table-column type="index" label="序号" width="60" align="center">
-          <template #header>
-            <el-icon><List /></el-icon>
-          </template>
-        </el-table-column>
-        <template v-for="col in sortedTableColumns" :key="col.prop">
-          <el-table-column 
-            v-if="checkColumnVisible(col.prop || '')"
-            :prop="col.prop" 
-            :label="col.label" 
-            show-overflow-tooltip>
+        <!-- 表格 -->
+        <el-table 
+          ref="tableRef"
+          :data="state.dataList" 
+          v-loading="state.loading" 
+          stripe
+          :cell-style="tableStyle.cellStyle" 
+          :header-cell-style="tableStyle.headerCellStyle"
+          class="modern-table"
+          @sort-change="sortChangeHandle">
+          <el-table-column type="index" label="序号" width="70" align="center">
             <template #header>
-              <el-icon><component :is="columnConfigMap[col.prop]?.icon || Calendar" /></el-icon>
-              <span style="margin-left: 4px">{{ col.label }}</span>
+              <el-icon><List /></el-icon>
             </template>
+            <template #default="{ $index }">
+              {{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
+            </template>
+          </el-table-column>
+          <template v-for="col in visibleColumnsSorted" :key="col.prop">
+            <el-table-column 
+              v-if="checkColumnVisible(col.prop || '')"
+              :prop="col.prop" 
+              :label="col.label" 
+              show-overflow-tooltip>
+              <template #header>
+                <el-icon><component :is="columnConfigMap[col.prop || '']?.icon || Calendar" /></el-icon>
+                <span style="margin-left: 4px">{{ col.label }}</span>
+              </template>
             <!-- 学期列特殊模板 -->
             <template v-if="col.prop === 'schoolTerm'" #default="scope">
               <el-tag size="small" type="primary" effect="plain">
@@ -160,30 +177,33 @@
               </el-tag>
               <span v-else>-</span>
             </template>
+            </el-table-column>
+          </template>
+          <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="Delete" 
+                link 
+                type="danger" 
+                @click="handleDelete([scope.row.id])">
+                删除
+              </el-button>
+            </template>
           </el-table-column>
-        </template>
-        <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="Delete" 
-              text 
-              type="danger" 
-              @click="handleDelete([scope.row.id])">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+        </el-table>
 
-      <!-- 分页 -->
-      <pagination 
-        @size-change="sizeChangeHandle" 
-        @current-change="currentChangeHandle" 
-        v-bind="state.pagination" />
+        <!-- 分页 -->
+        <div class="pagination-wrapper">
+          <pagination 
+            @size-change="sizeChangeHandle" 
+            @current-change="currentChangeHandle" 
+            v-bind="state.pagination" />
+        </div>
+      </el-card>
     </div>
 
     <!-- 导入对话框 -->
@@ -262,8 +282,9 @@ import type { TableInstance } from 'element-plus'
 
 // 引入组件
 const UploadExcel = defineAsyncComponent(() => import('/@/components/Upload/Excel.vue'));
-import { List, Calendar, Clock, OfficeBuilding, Grid, UserFilled, Location, DataAnalysis, Document, Setting, Menu } from '@element-plus/icons-vue'
-import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
+import { List, Calendar, Clock, OfficeBuilding, Grid, UserFilled, Location, DataAnalysis, Document, Setting, Menu, Search } from '@element-plus/icons-vue'
+import { useTableColumnControl } from '/@/hooks/tableColumn'
+import '/@/styles/modern-page.scss'
 
 // 定义变量内容
 const route = useRoute()
@@ -297,126 +318,14 @@ const tableColumns = [
   { prop: '操作', label: '操作', alwaysShow: true, fixed: 'right' as const }
 ]
 
-// 当前显示的列（从 localStorage 读取或默认全部显示）
-const visibleColumns = ref<string[]>([])
-// 列排序顺序
-const columnOrder = ref<string[]>([])
-
-// 从本地统一存储加载配置
-const loadSavedConfig = () => {
-  const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
-  const storageKey = `table-columns-${routePath}`
-  const savedConfig = getTableConfigFromLocal(storageKey)
-  
-  const validColumns = tableColumns
-    .filter(col => !col.alwaysShow && !col.fixed)
-    .map(col => col.prop || col.label)
-  
-  if (savedConfig && savedConfig.visibleColumns) {
-    const filteredSaved = savedConfig.visibleColumns.filter((col: string) => validColumns.includes(col))
-    visibleColumns.value = filteredSaved.length > 0 ? filteredSaved : validColumns
-  } else {
-    visibleColumns.value = validColumns
-  }
-  
-  if (savedConfig && savedConfig.columnOrder) {
-    columnOrder.value = savedConfig.columnOrder.filter((key: string) => validColumns.includes(key))
-    validColumns.forEach(key => {
-      if (!columnOrder.value.includes(key)) {
-        columnOrder.value.push(key)
-      }
-    })
-  } else {
-    columnOrder.value = validColumns
-  }
-}
-
-// 立即加载保存的配置
-loadSavedConfig()
-
-// 初始化可见列（已废弃，使用 loadSavedConfig 代替）
-const initVisibleColumns = () => {
-  // 配置已在组件创建时通过 loadSavedConfig() 加载
-  // 这里只做兼容性处理，不重复加载
-}
-
-// 列显示控制函数
-const checkColumnVisible = (prop: string): boolean => {
-  // 如果 visibleColumns 还没初始化，默认显示所有列
-  if (visibleColumns.value.length === 0) {
-    return true
-  }
-  
-  // 检查 prop 是否在可见列列表中
-  const isVisible = visibleColumns.value.includes(prop)
-  return isVisible
-}
-
-// 监听列变化
-const handleColumnChange = (columns: string[]) => {
-  visibleColumns.value = columns
-  const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
-  const storageKey = `table-columns-${routePath}`
-  const selectableColumns = columns.filter(col => {
-    const column = tableColumns.find(c => (c.prop || c.label) === col)
-    return column && !column.alwaysShow && !column.fixed
-  })
-  // 保存到本地统一存储
-  saveTableConfigToLocal(storageKey, { visibleColumns: selectableColumns })
-  // 异步保存到后端
-  updateUserTableConfig(storageKey, { visibleColumns: selectableColumns }).catch(() => {})
-}
-
-// 监听列排序变化
-const handleColumnOrderChange = (order: string[]) => {
-  columnOrder.value = order
-  const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
-  const storageKey = `table-columns-${routePath}`
-  // 保存到本地统一存储
-  saveTableConfigToLocal(storageKey, { columnOrder: order })
-  // 异步保存到后端
-  updateUserTableConfig(storageKey, { columnOrder: order }).catch(() => {})
-}
-
-// 初始化列排序顺序（已废弃，使用 loadSavedConfig 代替）
-const initColumnOrder = () => {
-  // 配置已在组件创建时通过 loadSavedConfig() 加载
-  // 这里只做兼容性处理，不重复加载
-}
-
-// 获取排序后的列配置
-const sortedTableColumns = computed(() => {
-  // 获取所有可排序的列
-  const allSortableColumns = tableColumns.filter(col => !col.alwaysShow && !col.fixed)
-  
-  if (columnOrder.value.length === 0) {
-    return allSortableColumns
-  }
-  
-  const orderedColumns: typeof tableColumns = []
-  const unorderedColumns: typeof tableColumns = []
-  
-  // 先按照保存的顺序添加列
-  columnOrder.value.forEach(key => {
-    const col = tableColumns.find(c => {
-      const colKey = c.prop || c.label
-      return colKey === key && !c.alwaysShow && !c.fixed
-    })
-    if (col) {
-      orderedColumns.push(col)
-    }
-  })
-  
-  // 添加未在排序列表中的列（新增的列）
-  allSortableColumns.forEach(col => {
-    const key = col.prop || col.label
-    if (!columnOrder.value.includes(key)) {
-      unorderedColumns.push(col)
-    }
-  })
-  
-  return [...orderedColumns, ...unorderedColumns]
-})
+// 使用表格列控制hook
+const {
+  visibleColumns,
+  visibleColumnsSorted,
+  checkColumnVisible,
+  handleColumnChange,
+  handleColumnOrderChange
+} = useTableColumnControl(tableColumns.filter(col => !col.alwaysShow && !col.fixed))
 
 // 列配置映射，包含每个列的渲染信息
 const columnConfigMap: Record<string, any> = {
@@ -674,15 +583,5 @@ onMounted(() => {
   getDeptListData()
   getClassListData()
   getSchoolTermDict()
-  // 配置已在组件创建时通过 loadSavedConfig() 加载
-  // 确保配置已同步到 TableColumnControl 组件
-  nextTick(() => {
-    // 确保 visibleColumns 已正确加载
-    if (visibleColumns.value.length === 0) {
-      // 如果 visibleColumns 为空，重新加载配置
-      loadSavedConfig()
-    }
-    // visibleColumns 已经通过 v-model 绑定到 TableColumnControl，应该会自动同步
-  })
 })
 </script>