fixed(student tablecols): 调整columns的数据类型

Author: dodolalorc

src/stores/student-store.ts

@@ -6,6 +6,8 @@ import {
   formatEthnicity,
   formatCollege,
   formatMajor,
+  formatFundType,
+  formatPunishType,
   formatAssistLevel,
   formatCampus,
   formatDegree,
@@ -37,6 +39,23 @@ interface StudentTableColumn {
 
 type DetailSection = 'project' | 'punish' | 'scholarship'
 
+interface DetailColumn {
+  key: string
+  prop: string
+  label: string
+  minWidth: number
+  formatter?: (row: Record<string, any>) => string
+}
+
+interface DetailTabConfig {
+  section: DetailSection
+  label: string
+  rows: any[]
+  total: number
+  currentPage: number
+  columns: DetailColumn[]
+}
+
 export const useStudentStore = defineStore('student', () => {
   const getDisplayValue = getFieldDisplayValue
   const formatEdu = formatDegree
@@ -132,6 +151,57 @@ export const useStudentStore = defineStore('student', () => {
   const punishTotal = computed(() => fundPunishVo.value.length)
   const scholarshipTotal = computed(() => fundScholarshipVo.value.length)
 
+  const detailTabConfigs = computed<DetailTabConfig[]>(() => [
+    {
+      section: 'punish',
+      label: '个人处分',
+      rows: paginatedPunishVo.value,
+      total: punishTotal.value,
+      currentPage: punishPage.value,
+      columns: [
+        {
+          key: 'category',
+          prop: 'category',
+          label: '类别',
+          minWidth: 180,
+          formatter: (row) => formatPunishType(Number(row.category)),
+        },
+        { key: 'reason', prop: 'reason', label: '原因', minWidth: 180 },
+        { key: 'punishTime', prop: 'punishTime', label: '处分时间', minWidth: 180 },
+      ],
+    },
+    {
+      section: 'scholarship',
+      label: '个人奖励',
+      rows: paginatedScholarshipVo.value,
+      total: scholarshipTotal.value,
+      currentPage: scholarshipPage.value,
+      columns: [
+        {
+          key: 'type',
+          prop: 'type',
+          label: '类型',
+          minWidth: 180,
+          formatter: (row) => formatFundType(Number(row.type)),
+        },
+        { key: 'grantDate', prop: 'grantDate', label: '授予日期', minWidth: 180 },
+        { key: 'amount', prop: 'amount', label: '金额', minWidth: 180 },
+      ],
+    },
+    {
+      section: 'project',
+      label: '社会经历',
+      rows: paginatedProjectVo.value,
+      total: projectTotal.value,
+      currentPage: projectPage.value,
+      columns: [
+        { key: 'startDate', prop: 'startDate', label: '开始日期', minWidth: 180 },
+        { key: 'endDate', prop: 'endDate', label: '结束日期', minWidth: 180 },
+        { key: 'experience', prop: 'experience', label: '经历描述', minWidth: 180 },
+      ],
+    },
+  ])
+
   const hasSelectedItems = computed(() => selectedIds.value.length > 0)
 
   const handleSelectionChange = (selection: StudentRow[]) => {
@@ -291,6 +361,10 @@ export const useStudentStore = defineStore('student', () => {
     await getList(val, query.pageSize)
   }
 
+  const initPage = async () => {
+    await getList(1, query.pageSize)
+  }
+
   const setDetailPage = (section: DetailSection, page: number) => {
     if (section === 'project') {
       projectPage.value = page
@@ -317,15 +391,7 @@ export const useStudentStore = defineStore('student', () => {
     studentRow,
     visible,
     detailPageSize,
-    projectTotal,
-    punishTotal,
-    scholarshipTotal,
-    projectPage,
-    punishPage,
-    scholarshipPage,
-    paginatedProjectVo,
-    paginatedPunishVo,
-    paginatedScholarshipVo,
+    detailTabConfigs,
 
     getList,
     resetSearchForm,
@@ -337,6 +403,7 @@ export const useStudentStore = defineStore('student', () => {
     exportStudentInfo,
     handleSizeChange,
     handleCurrentChange,
+    initPage,
     setDetailPage,
   }
 })

src/views/student/index.vue

@@ -52,62 +52,28 @@
         </el-descriptions-item>
       </el-descriptions>
       <el-tabs type="border-card" style="margin-top: 20px">
-        <el-tab-pane label="个人处分">
-          <el-table :data="paginatedPunishVo" height="350">
-            <el-table-column prop="category" label="类别" minWidth="180">
-              <template #default="{ row }">
-                {{ formatPunishType(+row.category) }}
+        <el-tab-pane v-for="tab in detailTabConfigs" :key="tab.section" :label="tab.label">
+          <el-table :data="tab.rows" height="350">
+            <el-table-column
+              v-for="column in tab.columns"
+              :key="column.key"
+              :prop="column.prop"
+              :label="column.label"
+              :min-width="column.minWidth"
+            >
+              <template #default="{ row }" v-if="column.formatter">
+                {{ column.formatter(row) }}
               </template>
             </el-table-column>
-            <el-table-column prop="reason" label="原因" minWidth="180"></el-table-column>
-            <el-table-column prop="punishTime" label="处分时间" minWidth="180"></el-table-column>
           </el-table>
           <el-pagination
             background
             layout="prev, pager, next"
-            :total="punishTotal"
+            :total="tab.total"
             :page-size="detailPageSize"
-            v-model:current-page="punishPage"
+            :current-page="tab.currentPage"
             pager-count="50"
-            @current-change="setDetailPage.bind(null, 'punish')"
-            class="pagination"
-          />
-        </el-tab-pane>
-        <el-tab-pane label="个人奖励">
-          <el-table :data="paginatedScholarshipVo" height="350">
-            <el-table-column prop="category" label="类型" minWidth="180">
-              <template #default="{ row }">
-                {{ formatFundType(+row.type) }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="grantDate" label="授予日期" minWidth="180"></el-table-column>
-            <el-table-column prop="amount" label="金额" minWidth="180"></el-table-column>
-          </el-table>
-          <el-pagination
-            background
-            layout="prev, pager, next"
-            :total="scholarshipTotal"
-            :page-size="detailPageSize"
-            v-model:current-page="scholarshipPage"
-            pager-count="50"
-            @current-change="setDetailPage.bind(null, 'scholarship')"
-            class="pagination"
-          />
-        </el-tab-pane>
-        <el-tab-pane label="社会经历">
-          <el-table :data="paginatedProjectVo" height="350">
-            <el-table-column prop="startDate" label="开始日期" minWidth="180"></el-table-column>
-            <el-table-column prop="endDate" label="结束日期" minWidth="180"></el-table-column>
-            <el-table-column prop="experience" label="经历描述" minWidth="180"></el-table-column>
-          </el-table>
-          <el-pagination
-            background
-            layout="prev, pager, next"
-            :total="projectTotal"
-            :page-size="detailPageSize"
-            v-model:current-page="projectPage"
-            pager-count="50"
-            @current-change="setDetailPage.bind(null, 'project')"
+            @current-change="setDetailPage(tab.section, $event)"
             class="pagination"
           />
         </el-tab-pane>
@@ -123,14 +89,14 @@
 
 <script setup lang="ts">
 import SearchBox from './components/search-box.vue'
-import { onMounted } from 'vue'
+import { onActivated, onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
-import { formatFundType, formatPunishType } from '@/constants/default'
 import { useStudentStore } from '@/stores/student-store'
 
 const studentStore = useStudentStore()
 
 const {
+  tableColumns,
   getDisplayValue,
   handleSelectionChange,
   handleViewDetail,
@@ -139,11 +105,10 @@ const {
   handleSizeChange,
   handleCurrentChange,
   setDetailPage,
-  getList,
+  initPage,
 } = studentStore
 
 const {
-  tableColumns,
   fieldConfigs,
   tableData,
   query,
@@ -152,19 +117,17 @@ const {
   studentRow,
   visible,
   detailPageSize,
-  projectTotal,
-  punishTotal,
-  scholarshipTotal,
-  projectPage,
-  punishPage,
-  scholarshipPage,
-  paginatedProjectVo,
-  paginatedPunishVo,
-  paginatedScholarshipVo,
+  detailTabConfigs,
 } = storeToRefs(studentStore)
 
 onMounted(() => {
-  getList()
+  void initPage()
+})
+
+onActivated(() => {
+  if (!tableData.value.length) {
+    void initPage()
+  }
 })
 </script>