Compare commits

...

2 Commits

Author SHA1 Message Date
yangbin b34efc847d Merge remote-tracking branch 'origin/main'
# Conflicts:
#	frontend/src/layout/components/SemesterBar.vue
#	frontend/src/views/classHour/plan/index.vue
2026-08-27 17:04:52 +08:00
yangbin be7b91ac20 全局操作栏固定修复 和切换学期配色调整 2026-08-27 17:02:32 +08:00
3 changed files with 149 additions and 184 deletions
+20
View File
@@ -98,6 +98,15 @@
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
// 教学管理系统的列表字段统一居中,避免各业务页面单独声明后出现视觉错位。
.el-table__cell,
.el-table__cell.is-left,
.el-table__cell.is-right,
.el-table__cell.is-center,
.el-table__cell > .cell {
text-align: center;
}
.el-table__header-wrapper, .el-table__fixed-header-wrapper { .el-table__header-wrapper, .el-table__fixed-header-wrapper {
th { th {
word-break: break-word; word-break: break-word;
@@ -129,6 +138,17 @@
.el-table__fixed-body-wrapper.is-dragging { .el-table__fixed-body-wrapper.is-dragging {
cursor: default; cursor: default;
} }
// 横向滚动条被隐藏后,Element UI 仍会为右侧固定列预留滚动条高度。
// 仅在宽表格发生横向溢出时补齐该高度,保证“操作”列与普通数据行底部对齐。
&.el-table--scrollable-x .el-table__fixed-right {
height: 100% !important; // 组件通过行内样式写入高度,只能在此处覆盖。
}
&.el-table--scrollable-x .el-table__fixed-right .el-table__fixed-body-wrapper {
bottom: 0;
height: auto !important; // 组件通过行内样式写入高度,只能在此处覆盖。
}
} }
/* 表格横拖期间锁定整页光标与文本选中: /* 表格横拖期间锁定整页光标与文本选中:
+25 -69
View File
@@ -29,7 +29,6 @@
size="small" size="small"
filterable filterable
class="semester-select" class="semester-select"
popper-class="semester-select-popper"
@change="handleSwitch" @change="handleSwitch"
> >
<el-option <el-option
@@ -224,10 +223,10 @@ export default {
} }
&__switch { &__switch {
background: rgba(255, 255, 255, 0.09); background: transparent;
border: 1px solid rgba(255, 255, 255, 0.16); border: none;
padding: 0 16px; padding: 0;
border-radius: 7px; border-radius: 0;
height: 36px; height: 36px;
/* 用一层定高 flex 容器包裹 select,彻底隔离其默认行高外溢 */ /* 用一层定高 flex 容器包裹 select,彻底隔离其默认行高外溢 */
@@ -248,83 +247,40 @@ export default {
line-height: normal; line-height: normal;
} }
::v-deep .el-input__inner {
background: transparent !important;
border: none !important;
color: #fff !important;
border-radius: 7px;
height: 36px;
padding: 0;
display: flex;
align-items: center;
caret-color: transparent;
&::placeholder {
color: rgba(255, 255, 255, 0.7) !important;
}
}
::v-deep .el-input__inner:hover {
background: transparent !important;
}
/* 去掉 focus 时的蓝色外光晕(Element 默认 box-shadow */
::v-deep .el-input__inner:focus,
::v-deep .el-select .el-input__inner:focus,
::v-deep .el-select .el-input.is-focus .el-input__inner {
border-color: transparent !important;
box-shadow: none !important;
outline: none !important;
}
::v-deep .el-input__icon {
color: rgba(255, 255, 255, 0.85);
}
} }
} }
</style> </style>
<style lang="scss"> <style lang="scss">
/* 学期下拉浮层渲染在 body 下,scoped 无法命中,故用非 scoped 样式通过 popper-class 单独定制, /* 顶部学期选择器使用导航栏色系,避免被全局白色表单控件样式覆盖。 */
使其与顶部深色栏视觉统一(仅作用于 SemesterBar 的下拉,不影响页面其他 select)。 */ #app .semester-bar__switch .semester-select {
.semester-select-popper { .el-input__inner {
background: #084c3f !important; height: 36px;
border: 1px solid rgba(255, 255, 255, 0.14) !important; padding: 0 34px 0 13px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important; border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 7px; border-radius: 7px;
color: #ffffff;
background: rgba(255, 255, 255, 0.10);
box-shadow: none;
.el-select-dropdown__list { &::placeholder {
padding: 4px; color: rgba(255, 255, 255, 0.68);
} }
.el-select-dropdown__item {
color: rgba(255, 255, 255, 0.85);
border-radius: 5px;
height: 32px;
line-height: 32px;
&.hover,
&:hover { &:hover {
background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.38);
color: #fff; background: rgba(255, 255, 255, 0.14);
} }
&.selected { &:focus {
color: #fff; border-color: rgba(255, 255, 255, 0.55);
font-weight: 600; background: rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.16); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}
/* 关键选项的选中图标保持可见 */
.el-select-dropdown__item span {
color: #fff;
} }
} }
.el-scrollbar__bar.is-vertical { .el-input__icon {
> div { color: rgba(255, 255, 255, 0.82);
background-color: rgba(255, 255, 255, 0.25);
}
} }
} }
</style> </style>
+104 -115
View File
@@ -15,108 +15,117 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="handleQuery">查询</el-button> <el-button type="primary" @click="handleQuery">查询</el-button>
<el-button type="primary" plain @click="handleAdd">新增{{ currentTitle }}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-card> </el-card>
<!-- ==================== 2. 数据表格 ==================== --> <!-- ==================== 2. 数据表格 ==================== -->
<el-card shadow="never" class="table-card"> <el-card shadow="never" class="table-card">
<div class="table-title">{{ currentTitle }}</div> <!-- 课时费方案 -->
<div class="list-toolbar">
<el-button type="primary" plain size="small" @click="handleAdd">新增{{ currentTitle }}</el-button>
</div>
<el-table <el-table
ref="tableRef" v-if="activeTab === 'fee'"
v-loading="currentState.loading" v-loading="feeState.loading"
:data="currentState.list" :data="feeState.list"
border border
stripe stripe
class="plan-data-table"
style="width: 100%" style="width: 100%"
> >
<template v-if="activeTab === 'fee'"> <el-table-column type="index" label="序号" width="55" align="center" />
<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="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="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>
<template slot-scope="{ row }">{{ fmtValue(row.mrbzksl) }}</template> </el-table-column>
</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>
<template slot-scope="{ row }">{{ fmtValue(row.mrksfbz) }}</template> </el-table-column>
</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>
<template slot-scope="{ row }">{{ fmtValue(row.mrclksfbz) }}</template> </el-table-column>
</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>
<template slot-scope="{ row }">{{ fmtValue(row.xgjxbzksfbz) }}</template> </el-table-column>
</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>
<template slot-scope="{ row }">{{ fmtValue(row.jxyxbz) }}</template> </el-table-column>
</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>
<template slot-scope="{ row }">{{ fmtValue(row.jxlhbz) }}</template> </el-table-column>
</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>
<template slot-scope="{ row }">{{ fmtValue(row.jxzdbz) }}</template> </el-table-column>
</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>
<template slot-scope="{ row }">{{ fmtValue(row.jxjgbz) }}</template> </el-table-column>
</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>
<template slot-scope="{ row }">{{ fmtValue(row.jxbjgbz) }}</template> </el-table-column>
</el-table-column> <el-table-column prop="sm" label="说明" min-width="120" show-overflow-tooltip />
<el-table-column prop="sm" label="说明" min-width="120" show-overflow-tooltip /> <el-table-column label="操作" width="180" align="center" fixed="right">
<el-table-column label="操作" width="200" align="center" fixed="right" class-name="op-cell"> <template slot-scope="{ row }">
<template slot-scope="{ row }"> <div class="table-actions">
<el-button type="text" size="small" @click="handleDetail(row)">详情</el-button> <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" @click="handleEdit(row)">修改</el-button>
<el-button type="text" size="small" class="text-danger" @click="handleDelete(row)">删除</el-button> <el-button type="text" size="small" class="text-danger" @click="handleDelete(row)">删除</el-button>
</template> </div>
</el-table-column> </template>
</template> </el-table-column>
</el-table>
<template v-else> <!-- 课时方案 -->
<el-table-column type="index" label="序号" width="55" align="center" /> <el-table
<el-table-column prop="bh" label="编号" width="150" align="center" show-overflow-tooltip /> v-else
<el-table-column prop="mc" label="名称" min-width="130" show-overflow-tooltip /> v-loading="coeffState.loading"
<el-table-column prop="zjksxs" label="主讲课时系数" width="110" align="right" header-align="center"> :data="coeffState.list"
<template slot-scope="{ row }">{{ fmtValue(row.zjksxs) }}</template> border
</el-table-column> stripe
<el-table-column prop="fjksxs" label="辅讲课时系数" width="110" align="right" header-align="center"> class="plan-data-table"
<template slot-scope="{ row }">{{ fmtValue(row.fjksxs) }}</template> style="width: 100%"
</el-table-column> >
<el-table-column prop="mbxyrs" label="满班学员人数" width="110" align="right" header-align="center"> <el-table-column type="index" label="序号" width="55" align="center" />
<template slot-scope="{ row }">{{ fmtValue(row.mbxyrs) }}</template> <el-table-column prop="bh" label="编号" width="150" align="center" show-overflow-tooltip />
</el-table-column> <el-table-column prop="mc" label="名称" min-width="130" show-overflow-tooltip />
<el-table-column prop="dz10xybjxs" label="递增10学员班级系数" width="150" align="right" header-align="center"> <el-table-column prop="zjksxs" label="主讲课时系数" width="110" align="right">
<template slot-scope="{ row }">{{ fmtValue(row.dz10xybjxs) }}</template> <template slot-scope="{ row }">{{ fmtValue(row.zjksxs) }}</template>
</el-table-column> </el-table-column>
<el-table-column prop="bjxssx" label="班级系数上限" width="110" align="right" header-align="center"> <el-table-column prop="fjksxs" label="辅讲课时系数" width="110" align="right">
<template slot-scope="{ row }">{{ fmtValue(row.bjxssx) }}</template> <template slot-scope="{ row }">{{ fmtValue(row.fjksxs) }}</template>
</el-table-column> </el-table-column>
<el-table-column prop="d78jksl" label="第78节课时量" width="110" align="right" header-align="center"> <el-table-column prop="mbxyrs" label="满班学员人数" width="110" align="right">
<template slot-scope="{ row }">{{ fmtValue(row.d78jksl) }}</template> <template slot-scope="{ row }">{{ fmtValue(row.mbxyrs) }}</template>
</el-table-column> </el-table-column>
<el-table-column prop="yjksl" label="夜间课时量" width="100" align="right" header-align="center"> <el-table-column prop="dz10xybjxs" label="递增10学员班级系数" width="150" align="right">
<template slot-scope="{ row }">{{ fmtValue(row.yjksl) }}</template> <template slot-scope="{ row }">{{ fmtValue(row.dz10xybjxs) }}</template>
</el-table-column> </el-table-column>
<el-table-column prop="mrktjxffxs" label="默认课堂教法系数" width="130" align="right" header-align="center"> <el-table-column prop="bjxssx" label="班级系数上限" width="110" align="right">
<template slot-scope="{ row }">{{ fmtValue(row.mrktjxffxs) }}</template> <template slot-scope="{ row }">{{ fmtValue(row.bjxssx) }}</template>
</el-table-column> </el-table-column>
<el-table-column prop="hbxszl" label="合班系数增量" width="110" align="right" header-align="center"> <el-table-column prop="d78jksl" label="第78节课时量" width="110" align="right">
<template slot-scope="{ row }">{{ fmtValue(row.hbxszl) }}</template> <template slot-scope="{ row }">{{ fmtValue(row.d78jksl) }}</template>
</el-table-column> </el-table-column>
<el-table-column prop="hbxssx" label="合班系数上限" width="110" align="right" header-align="center"> <el-table-column prop="yjksl" label="夜间课时量" width="100" align="right">
<template slot-scope="{ row }">{{ fmtValue(row.hbxssx) }}</template> <template slot-scope="{ row }">{{ fmtValue(row.yjksl) }}</template>
</el-table-column> </el-table-column>
<el-table-column prop="sm" label="说明" min-width="120" show-overflow-tooltip /> <el-table-column prop="mrktjxffxs" label="默认课堂教法系数" width="130" align="right">
<el-table-column label="操作" width="120" align="center" fixed="right" class-name="op-cell"> <template slot-scope="{ row }">{{ fmtValue(row.mrktjxffxs) }}</template>
<template slot-scope="{ row }"> </el-table-column>
<el-table-column prop="hbxszl" label="合班系数增量" width="110" align="right">
<template slot-scope="{ row }">{{ fmtValue(row.hbxszl) }}</template>
</el-table-column>
<el-table-column prop="hbxssx" label="合班系数上限" width="110" align="right">
<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="140" align="center" fixed="right">
<template slot-scope="{ row }">
<div class="table-actions">
<el-button type="text" size="small" @click="handleDetail(row)">详情</el-button> <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" @click="handleEdit(row)">修改</el-button>
</template> </div>
</el-table-column> </template>
</template> </el-table-column>
</el-table> </el-table>
<el-pagination <el-pagination
@@ -475,9 +484,6 @@ export default {
state.total = 0 state.total = 0
}).finally(() => { }).finally(() => {
state.loading = false state.loading = false
this.$nextTick(() => {
this.$refs.tableRef && this.$refs.tableRef.doLayout()
})
}) })
}, },
@@ -648,6 +654,13 @@ export default {
} }
.plan-page { .plan-page {
.list-title {
font-size: 16px;
font-weight: 600;
color: #303133;
margin-bottom: 12px;
}
// ==================== 1. 查询区域 ==================== // ==================== 1. 查询区域 ====================
.search-card { .search-card {
margin-bottom: 16px; margin-bottom: 16px;
@@ -661,37 +674,13 @@ export default {
// ==================== 2. 数据表格 ==================== // ==================== 2. 数据表格 ====================
.table-card { .table-card {
.table-title { .table-actions {
font-size: 16px;
font-weight: 600;
color: #303133;
margin-bottom: 8px;
}
.list-toolbar {
display: flex; display: flex;
justify-content: flex-end; align-items: center;
margin-bottom: 12px; justify-content: center;
}
::v-deep .el-table .cell {
white-space: nowrap; 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 { .pagination {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;