解决所有bug 优化table内容

src/views/basic/basicclass/index.vue

@@ -122,27 +122,84 @@
         border 
         :cell-style="tableStyle.cellStyle" 
         :header-cell-style="tableStyle.headerCellStyle"
+        row-key="id"
+        @selection-change="handleSelectionChange"
         @sort-change="sortChangeHandle">
-        <el-table-column type="index" label="序号" align="center" />
-        <el-table-column prop="deptName" label="学院" show-overflow-tooltip />
-        <el-table-column prop="classNo" label="班号" show-overflow-tooltip />
-        <el-table-column prop="classProName" label="班级规范名称" show-overflow-tooltip />
-        <el-table-column prop="teacherRealName" label="班主任" show-overflow-tooltip />
-        <el-table-column prop="teacherTel" label="班主任电话号码" show-overflow-tooltip />
-        <el-table-column label="班级人数/原始人数" show-overflow-tooltip>
-          <template #default="scope">
-            {{ scope.row.stuNum || 0 }}/{{ scope.row.preStuNum || 0 }}
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column type="index" label="序号" align="center">
+          <template #header>
+            <el-icon><List /></el-icon>
           </template>
         </el-table-column>
-        <el-table-column prop="ruleName" label="门禁规则" show-overflow-tooltip />
-        <el-table-column prop="classStatus" label="班级状态" show-overflow-tooltip>
+        <el-table-column prop="deptName" label="学院" show-overflow-tooltip>
+          <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>
+          <template #header>
+            <el-icon><Grid /></el-icon>
+            <span style="margin-left: 4px">班号</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="classProName" label="班级规范名称" show-overflow-tooltip>
+          <template #header>
+            <el-icon><Document /></el-icon>
+            <span style="margin-left: 4px">班级规范名称</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="teacherRealName" label="班主任" show-overflow-tooltip>
+          <template #header>
+            <el-icon><UserFilled /></el-icon>
+            <span style="margin-left: 4px">班主任</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="teacherTel" label="班主任电话号码" show-overflow-tooltip>
+          <template #header>
+            <el-icon><Phone /></el-icon>
+            <span style="margin-left: 4px">班主任电话</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="班级人数/原始人数" show-overflow-tooltip>
+          <template #header>
+            <el-icon><User /></el-icon>
+            <span style="margin-left: 4px">班级人数/原始人数</span>
+          </template>
           <template #default="scope">
-            <span>{{ scope.row.classStatus === '0' ? '正常' : scope.row.classStatus === '1' ? '离校' : '-' }}</span>
+            <el-tag size="small" type="primary" effect="plain">
+              {{ scope.row.stuNum || 0 }}/{{ scope.row.preStuNum || 0 }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="ruleName" label="门禁规则" show-overflow-tooltip>
+          <template #header>
+            <el-icon><Lock /></el-icon>
+            <span style="margin-left: 4px">门禁规则</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="classStatus" label="班级状态" show-overflow-tooltip>
+          <template #header>
+            <el-icon><CircleCheck /></el-icon>
+            <span style="margin-left: 4px">班级状态</span>
+          </template>
+          <template #default="scope">
+            <StatusTag 
+              :value="scope.row.classStatus"
+              :options="[{ label: '正常', value: '0' }, { label: '离校', value: '1' }]"
+              :type-map="{ '0': { type: 'success', effect: 'light' }, '1': { type: 'warning', effect: 'light' } }"
+            />
           </template>
         </el-table-column>
         <el-table-column prop="stuLoseRate" label="流失率" show-overflow-tooltip>
+          <template #header>
+            <el-icon><TrendCharts /></el-icon>
+            <span style="margin-left: 4px">流失率</span>
+          </template>
           <template #default="scope">
-            <span>{{ scope.row.stuLoseRate ? `${scope.row.stuLoseRate}%` : '-' }}</span>
+            <el-tag size="small" type="danger" effect="plain">
+              {{ scope.row.stuLoseRate ? `${scope.row.stuLoseRate}%` : '0%' }}
+            </el-tag>
           </template>
         </el-table-column>
         <el-table-column label="操作" align="center" fixed="right" width="200">
@@ -193,22 +250,6 @@
       draggable
       width="600px">
       <el-form :model="linkRuleForm" label-width="120px">
-        <el-form-item label="选择班级">
-          <el-select 
-            v-model="linkRuleForm.classCodes" 
-            placeholder="请选择班级" 
-            clearable
-            filterable
-            multiple
-            style="width: 100%">
-            <el-option
-              v-for="item in classList"
-              :key="item.classCode"
-              :label="item.classNo"
-              :value="item.classCode">
-            </el-option>
-          </el-select>
-        </el-form-item>
         <el-form-item label="选择规则">
           <el-select 
             v-model="linkRuleForm.ruleId" 
@@ -242,6 +283,9 @@ import { fetchList, delObj, putObjs, classExportData, getDeptList, getClassListB
 import { useMessage, useMessageBox } from "/@/hooks/message";
 import { fetchList as getRuleList } from "/@/api/stuwork/entrancerule";
 import { downBlobFile, adaptationUrl } from "/@/utils/other";
+import { List, OfficeBuilding, Grid, Document, UserFilled, Phone, User, Lock, CircleCheck, TrendCharts, Setting } from '@element-plus/icons-vue'
+import { defineAsyncComponent as defineStatusTag } from 'vue'
+const StatusTag = defineStatusTag(() => import('/@/components/StatusTag/index.vue'))
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import('./form.vue'));
@@ -258,6 +302,7 @@ const classList = ref<any[]>([])
 const ruleList = ref<any[]>([])
 const linkRuleDialogVisible = ref(false)
 const linkRuleLoading = ref(false)
+const selectedClassCodes = ref<string[]>([])
 
 // 搜索表单
 const searchForm = reactive({
@@ -272,7 +317,6 @@ const searchForm = reactive({
 
 // 关联门禁规则表单
 const linkRuleForm = reactive({
-  classCodes: [] as string[],
   ruleId: ''
 })
 
@@ -296,6 +340,13 @@ const {
   tableStyle
 } = useTable(state)
 
+// 表格多选
+const handleSelectionChange = (rows: any[]) => {
+  selectedClassCodes.value = (rows || [])
+    .map((item) => item.classCode)
+    .filter((item) => !!item)
+}
+
 // 学院选择变化
 const handleDeptChange = () => {
   // 可以根据需要清空班号选择
@@ -352,8 +403,11 @@ const handleViewDetail = (row: any) => {
 
 // 关联门禁规则
 const handleLinkRule = () => {
+  if (!selectedClassCodes.value.length) {
+    useMessage().warning('请先勾选要关联的班级')
+    return
+  }
   linkRuleDialogVisible.value = true
-  linkRuleForm.classCodes = []
   linkRuleForm.ruleId = ''
   // 加载规则列表
   getRuleListData()
@@ -361,12 +415,12 @@ const handleLinkRule = () => {
 
 // 确认关联门禁规则
 const confirmLinkRule = async () => {
-  if (!linkRuleForm.ruleId) {
-    useMessage().warning('请选择门禁规则')
+  if (!selectedClassCodes.value.length) {
+    useMessage().warning('请先勾选要关联的班级')
     return
   }
-  if (!linkRuleForm.classCodes || linkRuleForm.classCodes.length === 0) {
-    useMessage().warning('请选择班级')
+  if (!linkRuleForm.ruleId) {
+    useMessage().warning('请选择门禁规则')
     return
   }
 
@@ -374,7 +428,7 @@ const confirmLinkRule = async () => {
     linkRuleLoading.value = true
     await putObjs({
       ruleId: linkRuleForm.ruleId,
-      classCodes: linkRuleForm.classCodes
+      classCodes: selectedClassCodes.value
     })
     useMessage().success('关联成功')
     linkRuleDialogVisible.value = false
@@ -396,10 +450,9 @@ const handleExport = async () => {
   }
 }
 
-// 生成考核班级
+// 生成考核班级（占位，待确认接口）
 const handleGenerateAssessment = () => {
-  // TODO: 需要确认接口地址
-  useMessage().warning('生成考核班级功能待实现，请确认接口地址')
+  useMessage().warning('生成考核班级功能待确认接口后启用')
 }
 
 // 获取学院列表