人才培养

frontend/src/views/classHour/plan/index.vue

@@ -15,97 +15,108 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="handleQuery">查询</el-button>
-          <el-button type="primary" plain @click="handleAdd">新增{{ currentTitle }}</el-button>
         </el-form-item>
       </el-form>
     </el-card>
 
     <!-- ==================== 2. 数据表格 ==================== -->
     <el-card shadow="never" class="table-card">
-      <!-- 课时费方案 -->
+      <div class="table-title">{{ currentTitle }}</div>
-      <el-table v-if="activeTab === 'fee'" v-loading="feeState.loading" :data="feeState.list" border stripe style="width: 100%">
+      <div class="list-toolbar">
+        <el-button type="primary" plain size="small" @click="handleAdd">新增{{ currentTitle }}</el-button>
+      </div>
+
+      <el-table
+        ref="tableRef"
+        v-loading="currentState.loading"
+        :data="currentState.list"
+        border
+        stripe
+        style="width: 100%"
+      >
+        <template v-if="activeTab === 'fee'">
           <el-table-column type="index" label="序号" width="55" align="center" />
           <el-table-column prop="bh" label="编号" width="150" align="center" show-overflow-tooltip />
           <el-table-column prop="mc" label="名称" min-width="130" show-overflow-tooltip />
-        <el-table-column prop="mrbzksl" label="默认标准课时量" width="120" align="right">
+          <el-table-column prop="mrbzksl" label="默认标准课时量" width="120" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.mrbzksl) }}</template>
           </el-table-column>
-        <el-table-column prop="mrksfbz" label="默认课时费标准" width="120" align="right">
+          <el-table-column prop="mrksfbz" label="默认课时费标准" width="120" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.mrksfbz) }}</template>
           </el-table-column>
-        <el-table-column prop="mrclksfbz" label="默认超量课时费标准" width="150" align="right">
+          <el-table-column prop="mrclksfbz" label="默认超量课时费标准" width="150" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.mrclksfbz) }}</template>
           </el-table-column>
-        <el-table-column prop="xgjxbzksfbz" label="相关教学补助课时费标准" width="180" align="right">
+          <el-table-column prop="xgjxbzksfbz" label="相关教学补助课时费标准" width="180" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.xgjxbzksfbz) }}</template>
           </el-table-column>
-        <el-table-column prop="jxyxbz" label="绩效优秀补助" width="110" align="right">
+          <el-table-column prop="jxyxbz" label="绩效优秀补助" width="110" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.jxyxbz) }}</template>
           </el-table-column>
-        <el-table-column prop="jxlhbz" label="绩效良好补助" width="110" align="right">
+          <el-table-column prop="jxlhbz" label="绩效良好补助" width="110" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.jxlhbz) }}</template>
           </el-table-column>
-        <el-table-column prop="jxzdbz" label="绩效中等补助" width="110" align="right">
+          <el-table-column prop="jxzdbz" label="绩效中等补助" width="110" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.jxzdbz) }}</template>
           </el-table-column>
-        <el-table-column prop="jxjgbz" label="绩效及格补助" width="110" align="right">
+          <el-table-column prop="jxjgbz" label="绩效及格补助" width="110" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.jxjgbz) }}</template>
           </el-table-column>
-        <el-table-column prop="jxbjgbz" label="绩效不及格补助" width="120" align="right">
+          <el-table-column prop="jxbjgbz" label="绩效不及格补助" width="120" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.jxbjgbz) }}</template>
           </el-table-column>
           <el-table-column prop="sm" label="说明" min-width="120" show-overflow-tooltip />
-        <el-table-column label="操作" width="160" align="center" fixed="right">
+          <el-table-column label="操作" width="200" align="center" fixed="right" class-name="op-cell">
             <template slot-scope="{ row }">
               <el-button type="text" size="small" @click="handleDetail(row)">详情</el-button>
               <el-button type="text" size="small" @click="handleEdit(row)">修改</el-button>
               <el-button type="text" size="small" class="text-danger" @click="handleDelete(row)">删除</el-button>
             </template>
           </el-table-column>
-      </el-table>
+        </template>
 
-      <!-- 课时方案 -->
+        <template v-else>
-      <el-table v-else v-loading="coeffState.loading" :data="coeffState.list" border stripe style="width: 100%">
           <el-table-column type="index" label="序号" width="55" align="center" />
           <el-table-column prop="bh" label="编号" width="150" align="center" show-overflow-tooltip />
           <el-table-column prop="mc" label="名称" min-width="130" show-overflow-tooltip />
-        <el-table-column prop="zjksxs" label="主讲课时系数" width="110" align="right">
+          <el-table-column prop="zjksxs" label="主讲课时系数" width="110" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.zjksxs) }}</template>
           </el-table-column>
-        <el-table-column prop="fjksxs" label="辅讲课时系数" width="110" align="right">
+          <el-table-column prop="fjksxs" label="辅讲课时系数" width="110" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.fjksxs) }}</template>
           </el-table-column>
-        <el-table-column prop="mbxyrs" label="满班学员人数" width="110" align="right">
+          <el-table-column prop="mbxyrs" label="满班学员人数" width="110" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.mbxyrs) }}</template>
           </el-table-column>
-        <el-table-column prop="dz10xybjxs" label="递增10学员班级系数" width="150" align="right">
+          <el-table-column prop="dz10xybjxs" label="递增10学员班级系数" width="150" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.dz10xybjxs) }}</template>
           </el-table-column>
-        <el-table-column prop="bjxssx" label="班级系数上限" width="110" align="right">
+          <el-table-column prop="bjxssx" label="班级系数上限" width="110" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.bjxssx) }}</template>
           </el-table-column>
-        <el-table-column prop="d78jksl" label="第78节课时量" width="110" align="right">
+          <el-table-column prop="d78jksl" label="第78节课时量" width="110" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.d78jksl) }}</template>
           </el-table-column>
-        <el-table-column prop="yjksl" label="夜间课时量" width="100" align="right">
+          <el-table-column prop="yjksl" label="夜间课时量" width="100" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.yjksl) }}</template>
           </el-table-column>
-        <el-table-column prop="mrktjxffxs" label="默认课堂教法系数" width="130" align="right">
+          <el-table-column prop="mrktjxffxs" label="默认课堂教法系数" width="130" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.mrktjxffxs) }}</template>
           </el-table-column>
-        <el-table-column prop="hbxszl" label="合班系数增量" width="110" align="right">
+          <el-table-column prop="hbxszl" label="合班系数增量" width="110" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.hbxszl) }}</template>
           </el-table-column>
-        <el-table-column prop="hbxssx" label="合班系数上限" width="110" align="right">
+          <el-table-column prop="hbxssx" label="合班系数上限" width="110" align="right" header-align="center">
             <template slot-scope="{ row }">{{ fmtValue(row.hbxssx) }}</template>
           </el-table-column>
           <el-table-column prop="sm" label="说明" min-width="120" show-overflow-tooltip />
-        <el-table-column label="操作" width="120" align="center" fixed="right">
+          <el-table-column label="操作" width="120" align="center" fixed="right" class-name="op-cell">
             <template slot-scope="{ row }">
               <el-button type="text" size="small" @click="handleDetail(row)">详情</el-button>
               <el-button type="text" size="small" @click="handleEdit(row)">修改</el-button>
             </template>
           </el-table-column>
+        </template>
       </el-table>
 
       <el-pagination
@@ -464,6 +475,9 @@ export default {
         state.total = 0
       }).finally(() => {
         state.loading = false
+        this.$nextTick(() => {
+          this.$refs.tableRef && this.$refs.tableRef.doLayout()
+        })
       })
     },
 
@@ -634,13 +648,6 @@ export default {
 }
 
 .plan-page {
-  .list-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: #303133;
-    margin-bottom: 12px;
-  }
-
   // ==================== 1. 查询区域 ====================
   .search-card {
     margin-bottom: 16px;
@@ -654,6 +661,37 @@ export default {
 
   // ==================== 2. 数据表格 ====================
   .table-card {
+    .table-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+      margin-bottom: 8px;
+    }
+
+    .list-toolbar {
+      display: flex;
+      justify-content: flex-end;
+      margin-bottom: 12px;
+    }
+
+    ::v-deep .el-table .cell {
+      white-space: nowrap;
+    }
+
+    /* 修复操作栏 cell 底部错位:
+       el-button--small 实际高度 30px, 但 .cell 默认 line-height:23px 装不下,
+       按钮溢出 cell 顶部被 overflow:hidden 截掉, 导致按钮底部离行底比文字列小 12px。
+       把 td 上下 padding 去掉、cell line-height 改成 30px, 让 cell 高度 = 按钮高度,
+       并把 cell 顶端贴 td 顶端, 按钮底部就与文字列底部对齐(都离 td 底约 17px)。 */
+    ::v-deep .op-cell {
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
+    }
+    ::v-deep .op-cell > .cell {
+      line-height: 30px !important;
+      padding: 0 10px;
+    }
+
     .pagination {
       display: flex;
       justify-content: flex-end;