Main #1
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container teach-semester">
|
<div class="app-container teach-semester">
|
||||||
<!-- 工具栏 -->
|
<!-- 工具栏 -->
|
||||||
<el-row :gutter="10" class="mb8">
|
<el-row :gutter="10" class="semester-toolbar">
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新添</el-button>
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新添</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
@@ -17,62 +17,75 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<!-- 数据表格 -->
|
<!-- 数据表格 -->
|
||||||
<el-table
|
<div class="semester-table-wrap">
|
||||||
v-loading="loading"
|
<el-table
|
||||||
:data="semesterList"
|
v-loading="loading"
|
||||||
border
|
:data="semesterList"
|
||||||
:height="tableHeight"
|
border
|
||||||
@selection-change="handleSelectionChange"
|
stripe
|
||||||
>
|
:height="tableHeight"
|
||||||
<el-table-column type="selection" align="center" width="50" />
|
:row-class-name="tableRowClassName"
|
||||||
<el-table-column label="学期名称" align="center" min-width="190">
|
:header-cell-style="{ background: '#F4F8F5', color: '#303133', fontWeight: 600 }"
|
||||||
<template slot-scope="scope">
|
@selection-change="handleSelectionChange"
|
||||||
<span>{{ getSemesterName(scope.row.nd) }}</span>
|
>
|
||||||
</template>
|
<el-table-column type="selection" align="center" width="50" />
|
||||||
</el-table-column>
|
<el-table-column label="学期名称" align="center" min-width="190">
|
||||||
<el-table-column label="当前" align="center" width="70">
|
<template slot-scope="scope">
|
||||||
<template slot-scope="scope">
|
<span class="semester-name">
|
||||||
<el-tag v-if="scope.row.dqxq" type="success" size="mini">当前</el-tag>
|
<i v-if="scope.row.dqxq" class="semester-name-icon el-icon-star-on"></i>
|
||||||
<span v-else>-</span>
|
<span>{{ getSemesterName(scope.row.nd) }}</span>
|
||||||
</template>
|
</span>
|
||||||
</el-table-column>
|
</template>
|
||||||
<el-table-column label="开学日期" align="center" prop="kxrq" min-width="130">
|
</el-table-column>
|
||||||
<template slot-scope="scope">
|
<el-table-column label="当前" align="center" width="80">
|
||||||
<span>{{ formatDate(scope.row.kxrq) }}</span>
|
<template slot-scope="scope">
|
||||||
</template>
|
<el-tag v-if="scope.row.dqxq" type="success" effect="dark" size="mini">当前学期</el-tag>
|
||||||
</el-table-column>
|
<span v-else class="text-muted">—</span>
|
||||||
<el-table-column label="结束日期" align="center" prop="jsrq" min-width="130">
|
</template>
|
||||||
<template slot-scope="scope">
|
</el-table-column>
|
||||||
<span>{{ formatDate(scope.row.jsrq) }}</span>
|
<el-table-column label="开学日期" align="center" min-width="120">
|
||||||
</template>
|
<template slot-scope="scope">
|
||||||
</el-table-column>
|
<span class="date-cell"><i class="el-icon-date"></i>{{ formatDate(scope.row.kxrq) || '—' }}</span>
|
||||||
<el-table-column label="周数" align="center" prop="sdzs" width="70" />
|
</template>
|
||||||
<el-table-column label="调课不审批" align="center" width="100">
|
</el-table-column>
|
||||||
<template slot-scope="scope">
|
<el-table-column label="结束日期" align="center" min-width="120">
|
||||||
<el-tag :type="scope.row.tkbsp ? 'primary' : 'info'" size="mini">{{ scope.row.tkbsp ? '是' : '否' }}</el-tag>
|
<template slot-scope="scope">
|
||||||
</template>
|
<span class="date-cell"><i class="el-icon-date"></i>{{ formatDate(scope.row.jsrq) || '—' }}</span>
|
||||||
</el-table-column>
|
</template>
|
||||||
<el-table-column label="禁止调课" align="center" width="90">
|
</el-table-column>
|
||||||
<template slot-scope="scope">
|
<el-table-column label="周数" align="center" prop="sdzs" width="80">
|
||||||
<el-tag :type="scope.row.jztk ? 'danger' : 'info'" size="mini">{{ scope.row.jztk ? '是' : '否' }}</el-tag>
|
<template slot-scope="scope">
|
||||||
</template>
|
<el-tag v-if="scope.row.sdzs !== undefined && scope.row.sdzs !== null" type="info" effect="plain" size="mini">{{ scope.row.sdzs }} 周</el-tag>
|
||||||
</el-table-column>
|
<span v-else class="text-muted">—</span>
|
||||||
<el-table-column label="终结成绩定及格" align="center" width="120">
|
</template>
|
||||||
<template slot-scope="scope">
|
</el-table-column>
|
||||||
<el-tag :type="scope.row.zjcjdjg ? 'primary' : 'info'" size="mini">{{ scope.row.zjcjdjg ? '是' : '否' }}</el-tag>
|
<el-table-column label="调课不审批" align="center" width="116">
|
||||||
</template>
|
<template slot-scope="scope">
|
||||||
</el-table-column>
|
<span :class="boolCellClass(scope.row.tkbsp)">{{ scope.row.tkbsp ? '是' : '否' }}</span>
|
||||||
<el-table-column label="课时系数方案" align="center" min-width="120">
|
</template>
|
||||||
<template slot-scope="scope">
|
</el-table-column>
|
||||||
<span>{{ getCoefficientLabel(scope.row.ksxsfabh) }}</span>
|
<el-table-column label="禁止调课" align="center" width="100">
|
||||||
</template>
|
<template slot-scope="scope">
|
||||||
</el-table-column>
|
<span :class="boolCellClass(scope.row.jztk)">{{ scope.row.jztk ? '是' : '否' }}</span>
|
||||||
<el-table-column label="锁定时长" align="center" min-width="100">
|
</template>
|
||||||
<template slot-scope="scope">
|
</el-table-column>
|
||||||
<span>{{ scope.row.sdjldw || '-' }}</span>
|
<el-table-column label="终结成绩定及格" align="center" width="132">
|
||||||
</template>
|
<template slot-scope="scope">
|
||||||
</el-table-column>
|
<span :class="boolCellClass(scope.row.zjcjdjg)">{{ scope.row.zjcjdjg ? '是' : '否' }}</span>
|
||||||
</el-table>
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="课时系数方案" align="center" min-width="120">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ getCoefficientLabel(scope.row.ksxsfabh) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="锁定时长" align="center" min-width="96">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span class="lock-cell">{{ scope.row.sdjldw || '—' }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<pagination
|
<pagination
|
||||||
v-show="total > 0"
|
v-show="total > 0"
|
||||||
@@ -335,6 +348,14 @@ export default {
|
|||||||
this.loading = false
|
this.loading = false
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
/** 当前学期行高亮类名 */
|
||||||
|
tableRowClassName({ row }) {
|
||||||
|
return row.dqxq ? 'current-semester-row' : ''
|
||||||
|
},
|
||||||
|
/** 布尔开关单元格样式：是=实心绿点，否=灰色横线标记 */
|
||||||
|
boolCellClass(val) {
|
||||||
|
return val ? 'bool-cell is-true' : 'bool-cell is-false'
|
||||||
|
},
|
||||||
/** 多选变化 */
|
/** 多选变化 */
|
||||||
handleSelectionChange(selection) {
|
handleSelectionChange(selection) {
|
||||||
this.ids = selection.map(item => item.nd)
|
this.ids = selection.map(item => item.nd)
|
||||||
@@ -491,8 +512,146 @@ export default {
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.teach-semester {
|
.teach-semester {
|
||||||
.mb8 {
|
/* 页面标题区 */
|
||||||
margin-bottom: 8px;
|
.semester-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding-bottom: 14px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
border-bottom: 1px solid #ebeef5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.semester-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #303133;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-dot {
|
||||||
|
width: 5px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: var(--color, #00875A);
|
||||||
|
}
|
||||||
|
|
||||||
|
.semester-subtitle {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #909399;
|
||||||
|
line-height: 1.5;
|
||||||
|
padding-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 工具栏 */
|
||||||
|
.semester-toolbar {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格卡片容器 */
|
||||||
|
.semester-table-wrap {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #ebeef5;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表头由 header-cell-style 设置底色，这里兜底 */
|
||||||
|
::v-deep .el-table__header th {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当前学期行高亮：浅绿底 + 左侧加深强调 */
|
||||||
|
::v-deep .el-table .current-semester-row td {
|
||||||
|
background: #F2FAF5;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-table .current-semester-row:hover > td {
|
||||||
|
background: #EAF6EF;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-table .current-semester-row td:first-child {
|
||||||
|
box-shadow: inset 3px 0 0 #00875A;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 学期名称 + 当前星标 */
|
||||||
|
.semester-name {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.semester-name-icon {
|
||||||
|
color: #00875A;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 日期单元格 */
|
||||||
|
.date-cell {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
color: #606266;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #a0a6ad;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 锁定时长 */
|
||||||
|
.lock-cell {
|
||||||
|
background: #F4F6F8;
|
||||||
|
border: 1px solid #EBEEF5;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 1px 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 布尔开关：实心圆点 + 是/否 */
|
||||||
|
.bool-cell {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 13px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
width: 9px;
|
||||||
|
height: 9px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-true {
|
||||||
|
color: #00875A;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background: #00875A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-false {
|
||||||
|
color: #C0C4CC;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
border: 1px solid #CDD1D6;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-muted {
|
||||||
|
color: #C0C4CC;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 弹窗内表单：防止 label 文字换行、字段拥挤换行 */
|
/* 弹窗内表单：防止 label 文字换行、字段拥挤换行 */
|
||||||
|
|||||||
Reference in New Issue
Block a user