解决所有bug 优化table内容

src/views/stuwork/stuleaveapply/index.vue

@@ -190,59 +190,157 @@
         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="realName" label="姓名" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><Avatar /></el-icon>
+            <span style="margin-left: 4px">姓名</span>
           </template>
         </el-table-column>
-        <el-table-column prop="deptName" label="学院" show-overflow-tooltip align="center" />
-        <el-table-column prop="realName" 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="isFever" label="是否发热" show-overflow-tooltip align="center">
+          <template #header>
+            <el-icon><Warning /></el-icon>
+            <span style="margin-left: 4px">是否发热</span>
+          </template>
           <template #default="scope">
-            <span>{{ formatYesNo(scope.row.isFever) }}</span>
+            <StatusTag 
+              :value="scope.row.isFever"
+              :options="[{ label: '是', value: '1' }, { label: '否', value: '0' }]"
+              :type-map="{ '1': { type: 'danger', effect: 'light' }, '0': { type: 'success', effect: 'light' } }"
+            />
           </template>
         </el-table-column>
         <el-table-column prop="classAudit" 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.classAudit) }}</span>
+            <StatusTag 
+              :value="scope.row.classAudit"
+              :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="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="remarks" label="备注" show-overflow-tooltip align="center" min-width="150">
+          <template #header>
+            <el-icon><EditPen /></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">
+          <template #header>
+            <el-icon><Warning /></el-icon>
+            <span style="margin-left: 4px">驳回原因</span>
           </template>
         </el-table-column>
-        <el-table-column prop="remarks" label="备注" show-overflow-tooltip align="center" min-width="150" />
-        <el-table-column prop="rejectReason" label="驳回原因" show-overflow-tooltip align="center" min-width="150" />
         <el-table-column label="操作" width="100" align="center" fixed="right">
+          <template #header>
+            <el-icon><Setting /></el-icon>
+            <span style="margin-left: 4px">操作</span>
+          </template>
           <template #default="scope">
             <el-button 
               icon="CircleClose" 
@@ -277,6 +375,9 @@ import { getDeptListByLevelTwo } from "/@/api/basic/basicdept";
 import { getClassListByRole } from "/@/api/basic/basicclass";
 import { useMessage, useMessageBox } from "/@/hooks/message";
 import FormDialog from './form.vue'
+import { List, Calendar, Clock, OfficeBuilding, Avatar, Collection, Document, House, Warning, CircleCheck, EditPen, Setting } from '@element-plus/icons-vue'
+import { defineAsyncComponent } from 'vue'
+const StatusTag = defineAsyncComponent(() => import('/@/components/StatusTag/index.vue'))
 
 // 定义变量内容
 const searchFormRef = ref()