解决所有bug 优化table内容

src/views/stuwork/classleaveapply/index.vue

@@ -131,61 +131,173 @@
         border 
         :cell-style="tableStyle.cellStyle"
         :header-cell-style="tableStyle.headerCellStyle">
-        <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>{{ formatSchoolTerm(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">
+              {{ formatSchoolTerm(scope.row.schoolTerm) }}
+            </el-tag>
+          </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="classNo" 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="teacherRealName" label="班主任" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><UserFilled /></el-icon>
+            <span style="margin-left: 4px">班主任</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="num" label="人数" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><UserFilled /></el-icon>
+            <span style="margin-left: 4px">人数</span>
+          </template>
+          <template #default="scope">
+            <el-tag v-if="scope.row.num" size="small" type="success" effect="plain">
+              {{ scope.row.num }}
+            </el-tag>
+            <span v-else>-</span>
           </template>
         </el-table-column>
-        <el-table-column prop="deptName" label="学院" show-overflow-tooltip align="center" />
-        <el-table-column prop="classNo" label="班号" show-overflow-tooltip align="center" />
-        <el-table-column prop="teacherRealName" label="班主任" show-overflow-tooltip align="center" />
-        <el-table-column prop="num" label="人数" show-overflow-tooltip align="center" />
         <el-table-column prop="startTime" label="请假开始时间" show-overflow-tooltip align="center" width="180">
+          <template #header>
+            <el-icon><Calendar /></el-icon>
+            <span style="margin-left: 4px">请假开始时间</span>
+          </template>
           <template #default="scope">
             <span>{{ scope.row.startTime ? formatDateTime(scope.row.startTime) : '-' }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="endTime" label="请假结束时间" show-overflow-tooltip align="center" width="180">
+          <template #header>
+            <el-icon><Calendar /></el-icon>
+            <span style="margin-left: 4px">请假结束时间</span>
+          </template>
           <template #default="scope">
             <span>{{ scope.row.endTime ? formatDateTime(scope.row.endTime) : '-' }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="leaveType" label="请假类型" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><Collection /></el-icon>
+            <span style="margin-left: 4px">请假类型</span>
+          </template>
           <template #default="scope">
-            <span>{{ formatLeaveType(scope.row.leaveType) }}</span>
+            <el-tag size="small" type="info" effect="plain">
+              {{ formatLeaveType(scope.row.leaveType) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="reason" label="请假事由" show-overflow-tooltip align="center" min-width="150">
+          <template #header>
+            <el-icon><Document /></el-icon>
+            <span style="margin-left: 4px">请假事由</span>
           </template>
         </el-table-column>
-        <el-table-column prop="reason" label="请假事由" show-overflow-tooltip align="center" min-width="150" />
         <el-table-column prop="stayDorm" label="是否住宿" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><House /></el-icon>
+            <span style="margin-left: 4px">是否住宿</span>
+          </template>
           <template #default="scope">
-            <span>{{ formatYesNo(scope.row.stayDorm) }}</span>
+            <StatusTag 
+              :value="scope.row.stayDorm"
+              :options="[{ label: '是', value: '1' }, { label: '否', value: '0' }]"
+              :type-map="{ '1': { type: 'success', effect: 'light' }, '0': { type: 'info', effect: 'light' } }"
+            />
           </template>
         </el-table-column>
         <el-table-column prop="isSegment" label="时段请假" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><Clock /></el-icon>
+            <span style="margin-left: 4px">时段请假</span>
+          </template>
           <template #default="scope">
-            <span>{{ formatYesNo(scope.row.isSegment) }}</span>
+            <StatusTag 
+              :value="scope.row.isSegment"
+              :options="[{ label: '是', value: '1' }, { label: '否', value: '0' }]"
+              :type-map="{ '1': { type: 'success', effect: 'light' }, '0': { type: 'info', effect: 'light' } }"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="segmentString" label="请假时段" show-overflow-tooltip align="center" min-width="150">
+          <template #header>
+            <el-icon><Clock /></el-icon>
+            <span style="margin-left: 4px">请假时段</span>
           </template>
         </el-table-column>
-        <el-table-column prop="segmentString" label="请假时段" show-overflow-tooltip align="center" min-width="150" />
         <el-table-column prop="schoolDoor" label="请假校门" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><Location /></el-icon>
+            <span style="margin-left: 4px">请假校门</span>
+          </template>
           <template #default="scope">
-            <span>{{ formatSchoolDoor(scope.row.schoolDoor) }}</span>
+            <el-tag size="small" type="warning" effect="plain">
+              {{ formatSchoolDoor(scope.row.schoolDoor) }}
+            </el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="deptAudit" label="基础部审核" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><CircleCheck /></el-icon>
+            <span style="margin-left: 4px">基础部审核</span>
+          </template>
           <template #default="scope">
-            <span>{{ formatAuditType(scope.row.deptAudit) }}</span>
+            <StatusTag 
+              :value="scope.row.deptAudit"
+              :options="[{ label: '待审核', value: '0' }, { label: '通过', value: '1' }, { label: '驳回', value: '2' }]"
+              :type-map="{ '0': { type: 'warning', effect: 'light' }, '1': { type: 'success', effect: 'light' }, '2': { type: 'danger', effect: 'light' } }"
+            />
           </template>
         </el-table-column>
         <el-table-column prop="schoolAudit" label="学工处审批" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><CircleCheck /></el-icon>
+            <span style="margin-left: 4px">学工处审批</span>
+          </template>
           <template #default="scope">
-            <span>{{ formatAuditType(scope.row.schoolAudit) }}</span>
+            <StatusTag 
+              :value="scope.row.schoolAudit"
+              :options="[{ label: '待审核', value: '0' }, { label: '通过', value: '1' }, { label: '驳回', value: '2' }]"
+              :type-map="{ '0': { type: 'warning', effect: 'light' }, '1': { type: 'success', effect: 'light' }, '2': { type: 'danger', effect: 'light' } }"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="rejectReason" label="驳回原因" show-overflow-tooltip align="center" min-width="150">
+          <template #header>
+            <el-icon><Warning /></el-icon>
+            <span style="margin-left: 4px">驳回原因</span>
           </template>
         </el-table-column>
-        <el-table-column prop="rejectReason" label="驳回原因" show-overflow-tooltip align="center" min-width="150" />
         <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="View" 
@@ -231,6 +343,9 @@ import { getClassListByRole } from "/@/api/basic/basicclass";
 import { useMessage, useMessageBox } from "/@/hooks/message";
 import FormDialog from './form.vue'
 import DetailDialog from './detail.vue'
+import { List, Calendar, Clock, OfficeBuilding, Grid, UserFilled, Collection, Document, House, Location, CircleCheck, Warning, Setting } from '@element-plus/icons-vue'
+import { defineAsyncComponent } from 'vue'
+const StatusTag = defineAsyncComponent(() => import('/@/components/StatusTag/index.vue'))
 
 // 定义变量内容
 const searchFormRef = ref()