merge code

2026-01-27 00:27:46 +08:00
parent 302581289f
commit 8ebb8949d8
69 changed files with 9859 additions and 12987 deletions
--- a/src/views/stuwork/classpaper/index.vue
+++ b/src/views/stuwork/classpaper/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="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
+  <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="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList" class="search-form">
          <el-form-item label="学年" prop="schoolYear">
            <el-select 
              v-model="state.queryForm.schoolYear" 
@@ -89,23 +97,27 @@
            <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="Plus" 
-            type="primary" 
-            class="ml10" 
-            @click="formDialogRef.openDialog()">
-            新增
-          </el-button>
-          <right-toolbar  
-            v-model:showSearch="showSearch" 
-            class="ml10"
-            style="float: right;"
-            @queryTable="getDataList">
+      <!-- 内容卡片 -->
+      <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="Plus" 
+                type="primary" 
+                @click="formDialogRef.openDialog()">
+                新增
+              </el-button>
+              <right-toolbar  
+                v-model:showSearch="showSearch" 
+                class="ml10"
+                @queryTable="getDataList">
            <TableColumnControl
              ref="columnControlRef"
              :columns="tableColumns"
@@ -124,34 +136,39 @@
              </template>
            </TableColumnControl>
          </right-toolbar>
-        </div>
-      </el-row>
+            </div>
+          </div>
+        </template>

-      <!-- 表格 -->
-      <el-table 
-        :data="state.dataList" 
-        v-loading="state.loading"
-        border 
-        :cell-style="tableStyle.cellStyle"
-        :header-cell-style="tableStyle.headerCellStyle">
-        <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 || col.label">
-          <el-table-column 
-            v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
-            :prop="col.prop" 
-            :label="col.label" 
-            show-overflow-tooltip
-            align="center"
-            :min-width="col.minWidth"
-            :width="col.width">
+        <!-- 表格 -->
+        <el-table 
+          :data="state.dataList" 
+          v-loading="state.loading"
+          stripe
+          :cell-style="tableStyle.cellStyle"
+          :header-cell-style="tableStyle.headerCellStyle"
+          class="modern-table">
+          <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 || col.label">
+            <el-table-column 
+              v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
+              :prop="col.prop" 
+              :label="col.label" 
+              :width="col.width"
+              :min-width="col.minWidth"
+              :show-overflow-tooltip="col.showOverflowTooltip !== false"
+              :align="col.align || 'center'">
+              <template #header>
+                <el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
+                <span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
+              </template>
            <!-- 学期列特殊模板 -->
            <template v-if="col.prop === 'schoolTerm'" #default="scope">
              <el-tag size="small" type="primary" effect="plain">
@@ -183,46 +200,56 @@
            </template>
          </el-table-column>
        </template>
-        <el-table-column label="操作" width="250" align="center" fixed="right">
-          <template #default="scope">
-            <el-button 
-              icon="View" 
-              text 
-              type="primary" 
-              @click="handleView(scope.row)">
-              查看
-            </el-button>
-            <el-button 
-              icon="Edit" 
-              text 
-              type="primary" 
-              @click="handleEdit(scope.row)">
-              编辑
-            </el-button>
-            <el-button 
-              v-if="scope.row.isAddScore !== '1'"
-              icon="Plus" 
-              text 
-              type="success" 
-              @click="handleAddScore(scope.row)">
-              加分
-            </el-button>
-            <el-button 
-              icon="Delete" 
-              text 
-              type="danger" 
-              @click="handleDelete(scope.row)">
-              删除
-            </el-button>
+          <el-table-column label="操作" width="250" align="center" fixed="right">
+            <template #header>
+              <el-icon><Setting /></el-icon>
+              <span style="margin-left: 4px">操作</span>
+            </template>
+            <template #default="scope">
+              <el-button 
+                icon="View" 
+                link
+                type="primary" 
+                @click="handleView(scope.row)">
+                查看
+              </el-button>
+              <el-button 
+                icon="Edit" 
+                link
+                type="primary" 
+                @click="handleEdit(scope.row)">
+                编辑
+              </el-button>
+              <el-button 
+                v-if="scope.row.isAddScore !== '1'"
+                icon="Plus" 
+                link
+                type="success" 
+                @click="handleAddScore(scope.row)">
+                加分
+              </el-button>
+              <el-button 
+                icon="Delete" 
+                link
+                type="danger" 
+                @click="handleDelete(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+          <template #empty>
+            <el-empty description="暂无数据" :image-size="120" />
          </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>

    <!-- 新增/编辑表单弹窗 -->
@@ -234,8 +261,7 @@
 </template>

 <script setup lang="ts" name="ClassPaper">
-import { reactive, ref, onMounted, computed, nextTick } from 'vue'
-import { useRoute } from 'vue-router'
+import { reactive, ref, onMounted } from 'vue'
 import { BasicTableProps, useTable } from "/@/hooks/table";
 import { fetchList, delObj, addScore } from "/@/api/stuwork/classpaper";
 import { getDeptList } from "/@/api/basic/basicclass";
@@ -246,11 +272,10 @@ import { useMessage, useMessageBox } from "/@/hooks/message";
 import TableColumnControl from '/@/components/TableColumnControl/index.vue'
 import FormDialog from './form.vue'
 import DetailDialog from './detail.vue'
-import { List, Document, Calendar, Clock, OfficeBuilding, Grid, UserFilled, Collection, Setting, Menu } from '@element-plus/icons-vue'
-import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
+import { List, Document, Calendar, Clock, OfficeBuilding, Grid, UserFilled, Collection, Setting, Menu, Search } from '@element-plus/icons-vue'
+import { useTableColumnControl } from '/@/hooks/tableColumn'

 // 定义变量内容
-const route = useRoute()
 const formDialogRef = ref()
 const columnControlRef = ref<any>()
 const detailDialogRef = ref()
@@ -267,132 +292,27 @@ const typeList = ref<any[]>([

 // 表格列配置
 const tableColumns = [
-  { prop: 'title', label: '标题', minWidth: 200 },
-  { prop: 'schoolYear', label: '学年' },
-  { prop: 'schoolTerm', label: '学期' },
-  { prop: 'deptName', label: '学院' },
-  { prop: 'classNo', label: '班号' },
-  { prop: 'teacherRealName', label: '班主任' },
-  { prop: 'type', label: '类型' },
-  { prop: 'journal', label: '发表刊物', minWidth: 150 },
-  { prop: 'page', label: '发表页码' },
-  { prop: 'isAddScore', label: '加分' },
-  { prop: 'attachment', label: '附件', width: 100 }
+  { prop: 'title', label: '标题', icon: Document, minWidth: 200 },
+  { prop: 'schoolYear', label: '学年', icon: Calendar },
+  { prop: 'schoolTerm', label: '学期', icon: Clock },
+  { prop: 'deptName', label: '学院', icon: OfficeBuilding },
+  { prop: 'classNo', label: '班号', icon: Grid },
+  { prop: 'teacherRealName', label: '班主任', icon: UserFilled },
+  { prop: 'type', label: '类型', icon: Collection },
+  { prop: 'journal', label: '发表刊物', icon: Document, minWidth: 150 },
+  { prop: 'page', label: '发表页码', icon: Document },
+  { prop: 'isAddScore', label: '加分', icon: Document },
+  { prop: 'attachment', label: '附件', icon: Document, width: 100 }
 ]

-// 列配置映射（用于图标）
-const columnConfigMap: Record<string, { icon: any }> = {
-  title: { icon: Document },
-  schoolYear: { icon: Calendar },
-  schoolTerm: { icon: Clock },
-  deptName: { icon: OfficeBuilding },
-  classNo: { icon: Grid },
-  teacherRealName: { icon: UserFilled },
-  type: { icon: Collection },
-  journal: { icon: Document },
-  page: { icon: Document },
-  isAddScore: { icon: Document },
-  attachment: { icon: Document }
-}
-
-// 当前显示的列
-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)
-  
-  if (savedConfig && savedConfig.visibleColumns) {
-    const validColumns = tableColumns.map(col => col.prop || col.label)
-    const filteredSaved = savedConfig.visibleColumns.filter((col: string) => validColumns.includes(col))
-    visibleColumns.value = filteredSaved.length > 0 ? filteredSaved : validColumns
-  } else {
-    visibleColumns.value = tableColumns.map(col => col.prop || col.label)
-  }
-  
-  if (savedConfig && savedConfig.columnOrder) {
-    const validColumns = tableColumns.map(col => col.prop || col.label)
-    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 = tableColumns.map(col => col.prop || col.label)
-  }
-}
-
-loadSavedConfig()
-
-// 排序后的表格列
-const sortedTableColumns = computed(() => {
-  const columns = tableColumns.filter(col => {
-    const key = col.prop || col.label
-    return visibleColumns.value.includes(key)
-  })
-  
-  if (columnOrder.value.length > 0) {
-    const orderedColumns: typeof tableColumns = []
-    const unorderedColumns: typeof tableColumns = []
-    
-    columnOrder.value.forEach(key => {
-      const col = columns.find(c => (c.prop || c.label) === key)
-      if (col) {
-        orderedColumns.push(col)
-      }
-    })
-    
-    columns.forEach(col => {
-      const key = col.prop || col.label
-      if (!columnOrder.value.includes(key)) {
-        unorderedColumns.push(col)
-      }
-    })
-    
-    return [...orderedColumns, ...unorderedColumns]
-  }
-  
-  return columns
-})
-
-// 列显示控制函数
-const checkColumnVisible = (prop: string): boolean => {
-  if (visibleColumns.value.length === 0) {
-    return true
-  }
-  return visibleColumns.value.includes(prop)
-}
-
-// 监听列变化
-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(() => {})
-}
+// 使用表格列控制 Hook
+const {
+  visibleColumns,
+  visibleColumnsSorted,
+  checkColumnVisible,
+  handleColumnChange,
+  handleColumnOrderChange
+} = useTableColumnControl(tableColumns)

 // 配置 useTable
 const state: BasicTableProps = reactive<BasicTableProps>({
@@ -568,13 +488,9 @@ onMounted(() => {
  getSchoolTermDict()
  getDeptListData()
  getClassListData()
-  nextTick(() => {
-    if (visibleColumns.value.length === 0) {
-      loadSavedConfig()
-    }
-  })
 })
 </script>

 <style scoped lang="scss">
+@import '/@/assets/styles/modern-page.scss';
 </style>