后端代码

This commit is contained in:
liumengyu
2026-08-24 17:48:55 +08:00
parent e0485f7366
commit aa4145fd33
419 changed files with 3684 additions and 53031 deletions
@@ -1,719 +0,0 @@
<template>
<div class="school-calendar-editor">
<!-- 标题栏 -->
<div class="sce-titlebar">
<div class="sce-title-left">
<span class="sce-semester-name">{{ semesterName }}</span>
</div>
<div class="sce-title-center">
<span class="sce-date-range">从 {{ dateRangeText }} ,共 {{ totalWeeks }} 周</span>
</div>
<div class="sce-title-right">
<i class="el-icon-close" title="关闭" @click="handleClose" />
</div>
</div>
<!-- 设置面板 -->
<div class="sce-panel">
<div class="sce-panel-row">
<span class="sce-label">事件名称:</span>
<el-input v-model="toolbar.eventName" size="small" class="sce-event-input" placeholder="请输入校历事件名称" />
<el-checkbox v-model="boldDisplay" class="sce-cb">加粗显示</el-checkbox>
<el-checkbox v-model="toolbar.schedulable" class="sce-cb">可排课</el-checkbox>
<el-checkbox v-model="toolbar.mainCourse" class="sce-cb">正课</el-checkbox>
<el-checkbox v-model="toolbar.remarkShow" class="sce-cb">备注显示</el-checkbox>
<span class="sce-label">备注:</span>
<el-input
v-model="toolbar.remark"
size="small"
type="textarea"
:rows="1"
class="sce-remark-input"
resize="none"
placeholder="备注信息"
/>
</div>
<div class="sce-panel-row">
<el-button type="primary" size="small" icon="el-icon-check" @click="applyEvent">设定</el-button>
<el-button type="danger" size="small" icon="el-icon-delete" @click="deleteEvent">删除</el-button>
<el-button size="small" icon="el-icon-brush" @click="absorbEvent">吸取</el-button>
<el-button size="small" icon="el-icon-refresh" @click="refreshGrid">刷新</el-button>
<span class="sce-divider" />
<el-checkbox v-model="show78" class="sce-cb">显示78节</el-checkbox>
<el-checkbox v-model="showNight" class="sce-cb">显示晚上</el-checkbox>
<el-checkbox v-model="showLateNight" class="sce-cb">显示夜间</el-checkbox>
</div>
</div>
<!-- 时间编排区域 -->
<div ref="gridWrap" class="sce-grid-wrap" @mousedown="onGridMouseDown">
<table class="sce-grid" :class="{ 'is-selecting': selecting }">
<thead>
<tr>
<th class="sce-corner sce-th-weekno" :rowspan="2">周次</th>
<th class="sce-corner sce-th-weekrange" :rowspan="2">日期段</th>
<th v-for="col in visibleColumns" :key="'h1-' + col.colIndex" :colspan="1" class="sce-th-day">
{{ weekDayLabel(col.dayIndex) }}
</th>
</tr>
<tr>
<th v-for="col in visibleColumns" :key="'h2-' + col.colIndex" class="sce-th-slot">
{{ col.slotLabel }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(week, wIdx) in weeks" :key="'w-' + wIdx">
<td class="sce-week-cell sce-weekno-cell">{{ wIdx + 1 }}</td>
<td class="sce-week-cell sce-weekrange-cell">{{ week.rangeText }}</td>
<td
v-for="col in visibleColumns"
:key="'c-' + wIdx + '-' + col.colIndex"
class="sce-cell"
:class="cellClass(wIdx, col)"
:data-key="cellKey(wIdx, col.colIndex)"
@dblclick="onCellDblClick(wIdx, col)"
>
<span v-if="getEvent(wIdx, col.colIndex)" class="sce-event-name" :class="{ 'is-bold': boldDisplay }">{{ getEvent(wIdx, col.colIndex).name }}</span>
<span v-else class="sce-date-num">{{ dateNumberOf(wIdx, col.dayIndex) }}</span>
<span
v-if="getEvent(wIdx, col.colIndex) && !getEvent(wIdx, col.colIndex).schedulable"
class="sce-flag sce-flag-noschedule"
title="全校不允许排课"
/>
<span
v-if="getEvent(wIdx, col.colIndex) && getEvent(wIdx, col.colIndex).mainCourse"
class="sce-flag sce-flag-maincourse"
title="正课"
/>
</td>
</tr>
</tbody>
</table>
</div>
<div class="sce-status">
已选 {{ selectedKeys.length }} 个时间格
<span v-if="absorbPreview" class="sce-absorb-tip">已吸取:{{ absorbPreview }}</span>
</div>
</div>
</template>
<script>
import { getSemester } from '@/api/teachBusiness/semester'
import { listXqxlb, updateXqxlb } from '@/api/teachBusiness/xqxlb'
// 节次定义:12/34/56 常显,78/晚上/夜间由开关控制可见
const SLOT_DEFS = [
{ key: '12', label: '1-2', ctrl: null },
{ key: '34', label: '3-4', ctrl: null },
{ key: '56', label: '5-6', ctrl: null },
{ key: '78', label: '7-8', ctrl: 'show78' },
{ key: 'night', label: '晚上', ctrl: 'showNight' },
{ key: 'late', label: '夜间', ctrl: 'showLateNight' }
]
// 前端节次 key -> 后端 xqxlb.courseClass 节次范围(如 12 节 -> "1-2"、夜间 -> "11-12")
const SLOT_COURSE_MAP = {
'12': '1-2',
'34': '3-4',
'56': '5-6',
'78': '7-8',
night: '9-10',
late: '11-12'
}
const WEEK_DAYS = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
function pad2(n) {
return n < 10 ? '0' + n : '' + n
}
function fmtDate(d) {
return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate())
}
export default {
name: 'SchoolCalendarEditor',
props: {
nd: { type: [String, Number], default: '' },
semesterName: { type: String, default: '' }
},
data() {
return {
// 学期日期范围
startDate: null,
endDate: null,
totalWeeks: 0,
dateRangeText: '',
weeks: [],
// 加粗显示:全局开关,勾选后所有有事件的格子事件名加粗(纯前端效果,不持久化)
boldDisplay: false,
// 显示开关(默认不勾选,每天仅显示 1-2/3-4/5-6 三个节次)
show78: false,
showNight: false,
showLateNight: false,
// 工具栏表单
toolbar: {
eventName: '',
schedulable: false,
mainCourse: false,
remarkShow: false,
remark: ''
},
// 事件存储:key = cellKey -> event
events: {},
// 选择集(用数组以保证 Vue2 响应式)
selectedKeys: [],
// 拖拽状态
selecting: false,
dragStart: null,
dragStartSelected: false, // 按下起点在按下前是否已选中
moved: false, // 是否发生移动(区分点击与拖拽)
dragAddMode: false, // ctrl 拖拽为追加
// 窗口控制
absorbPreview: ''
}
},
computed: {
// 当前可见列(由开关过滤,默认每天三个节次)
visibleColumns() {
const cols = []
let colIndex = 0
WEEK_DAYS.forEach((dayLabel, dayIndex) => {
SLOT_DEFS.forEach(slot => {
if (slot.ctrl && !this[slot.ctrl]) return
cols.push({ colIndex: colIndex, dayIndex: dayIndex, slotKey: slot.key, slotLabel: slot.label, dayLabel: dayLabel })
colIndex++
})
})
return cols
}
},
watch: {
nd: {
immediate: true,
handler(val) {
if (val) this.loadSemester()
}
},
visibleColumns() {
// 列变化后清空无效选择(列索引含义会变)
this.selectedKeys = []
}
},
beforeDestroy() {
this.removeGlobalListeners()
},
methods: {
/* ---------- 数据加载 ---------- */
loadSemester() {
if (!this.nd) return
getSemester(this.nd)
.then(res => {
const data = res.data || res || {}
const kx = (data.kxrq || '').toString().slice(0, 10)
const jx = (data.jsrq || '').toString().slice(0, 10)
if (kx && jx) {
this.startDate = new Date(kx.replace(/-/g, '/'))
this.endDate = new Date(jx.replace(/-/g, '/'))
this.buildWeeks()
}
this.loadXqxlbEvents()
})
.catch(() => {
this.$message.warning('学期详情获取失败,请确认学期数据')
})
},
// 从后端拉取本学期校历假期,渲染到对应时间格(nd 为 6 位学期代号,如 202601)
loadXqxlbEvents() {
listXqxlb({ nd: this.nd }).then(res => {
const data = res.data
const list = Array.isArray(data) ? data : (data && data.records) || []
return list
}).then(list => {
const loaded = {}
list.forEach(item => {
const pos = this.locateXqxlb(item)
if (pos) {
loaded[pos.key] = {
bh: item.bh,
name: item.jqmc || '',
schedulable: !!item.kpk,
mainCourse: !!item.zdpk,
remarkShow: !!item.bzxs,
remark: item.bz || ''
}
}
})
// 合并到现有格子(后端数据覆盖已有状态)
this.events = Object.assign({}, this.events, loaded)
}).catch(() => {
this.$message.warning('校历事件加载失败')
})
},
// 根据假期记录反推时间格 key(jqsj 日期 + courseClass 节次)
locateXqxlb(item) {
if (!this.startDate || !item.jqsj) return null
const d = new Date(String(item.jqsj).slice(0, 10).replace(/-/g, '/'))
if (isNaN(d.getTime())) return null
const offset = Math.round((d - this.startDate) / (24 * 3600 * 1000))
if (offset < 0) return null
const wIdx = Math.floor(offset / 7)
const dayIndex = offset % 7
const slotKey = this.courseClassToSlotKey(item.courseClass)
if (slotKey === null) return null
const colIndex = this.colIndexOf(dayIndex, slotKey)
if (colIndex < 0) return null
return { key: this.cellKey(wIdx, colIndex) }
},
// 后端 courseClass 节次范围 -> 前端节次 key
courseClassToSlotKey(courseClass) {
if (!courseClass) return null
const s = String(courseClass).trim()
for (const key in SLOT_COURSE_MAP) {
if (s === SLOT_COURSE_MAP[key]) return key
}
// 兼容 "910"/"1112" 等紧凑写法
if (s === '910') return 'night'
if (s === '1112') return 'late'
return null
},
buildWeeks() {
if (!this.startDate || !this.endDate) return
const start = new Date(this.startDate)
const end = new Date(this.endDate)
const days = Math.round((end - start) / (24 * 3600 * 1000)) + 1
this.totalWeeks = Math.ceil(days / 7)
this.dateRangeText = fmtDate(start) + ' 到 ' + fmtDate(end)
const weeks = []
for (let w = 0; w < this.totalWeeks; w++) {
const wkStart = new Date(start)
wkStart.setDate(start.getDate() + w * 7)
const wkEnd = new Date(wkStart)
wkEnd.setDate(wkStart.getDate() + 6)
weeks.push({
rangeText: pad2(wkStart.getMonth() + 1) + '-' + pad2(wkStart.getDate()) +
'至' + pad2(wkEnd.getMonth() + 1) + '-' + pad2(wkEnd.getDate())
})
}
this.weeks = weeks
},
colIndexOf(dayIndex, slotKey) {
const col = this.visibleColumns.find(c => c.dayIndex === dayIndex && c.slotKey === slotKey)
return col ? col.colIndex : -1
},
/* ---------- 单元格工具 ---------- */
cellKey(wIdx, colIndex) {
return 'w' + wIdx + '-c' + colIndex
},
getEvent(wIdx, colIndex) {
return this.events[this.cellKey(wIdx, colIndex)] || null
},
weekDayLabel(dayIndex) {
return WEEK_DAYS[dayIndex]
},
// 单元格内显示的日期数字(如 0703)
dateNumberOf(wIdx, dayIndex) {
if (!this.startDate) return ''
const d = new Date(this.startDate)
d.setDate(this.startDate.getDate() + wIdx * 7 + dayIndex)
return pad2(d.getMonth() + 1) + pad2(d.getDate())
},
cellClass(wIdx, col) {
const classes = []
// 星期交替背景(单双日不同底色)
if (col.dayIndex % 2 === 0) classes.push('sce-cell-odd')
else classes.push('sce-cell-even')
if (this.selectedKeys.includes(this.cellKey(wIdx, col.colIndex))) classes.push('is-selected')
const ev = this.getEvent(wIdx, col.colIndex)
if (ev) {
classes.push('has-event')
if (!ev.schedulable) classes.push('no-schedule')
}
return classes
},
/* ---------- 点击 / 拖拽多选 ---------- */
onGridMouseDown(e) {
const cell = e.target.closest('.sce-cell')
if (!cell) {
// 点击空白区(非单元格,含表头、周次列等)取消所有选中
if (this.selectedKeys.length) this.selectedKeys = []
return
}
e.preventDefault()
const key = cell.getAttribute('data-key')
this.dragStart = key
this.dragAddMode = e.ctrlKey || e.metaKey
// 记录起点格在按下时的选中状态,用于松手时判定"纯点击"的切换行为
this.dragStartSelected = this.selectedKeys.includes(key)
this.moved = false
this.selecting = true
// 非 ctrl 模式下,若起点本身已选中(可能准备拖拽扩展),先不清除,避免误清空
if (!this.dragAddMode && !this.dragStartSelected) this.selectedKeys = []
this.addGlobalListeners()
},
addGlobalListeners() {
document.addEventListener('mousemove', this.onGridMouseMove)
document.addEventListener('mouseup', this.onGridMouseUp)
},
removeGlobalListeners() {
document.removeEventListener('mousemove', this.onGridMouseMove)
document.removeEventListener('mouseup', this.onGridMouseUp)
},
onGridMouseMove(e) {
if (!this.selecting || !this.dragStart) return
if (!this.moved) this.moved = true
const el = document.elementFromPoint(e.clientX, e.clientY)
const cell = el && el.closest ? el.closest('.sce-cell') : null
if (!cell) return
const curKey = cell.getAttribute('data-key')
this.selectRectangle(this.dragStart, curKey, this.dragAddMode)
},
onGridMouseUp() {
if (!this.selecting) {
this.removeGlobalListeners()
return
}
// 纯点击(未移动)时,做单选 / 切换
if (!this.moved) {
const key = this.dragStart
if (this.dragAddMode) {
// Ctrl + 单击:切换该格选中
if (this.selectedKeys.includes(key)) {
this.selectedKeys = this.selectedKeys.filter(k => k !== key)
} else {
this.selectedKeys.push(key)
}
} else {
// 普通单击:已选中则取消该格,未选中则仅选中该格
if (this.dragStartSelected) {
this.selectedKeys = this.selectedKeys.filter(k => k !== key)
} else {
this.selectedKeys = [key]
}
}
}
this.selecting = false
this.dragStart = null
this.dragStartSelected = false
this.removeGlobalListeners()
},
// 根据起点终点 key 选中矩形范围内所有格
selectRectangle(startKey, endKey, addMode) {
const parse = k => {
const m = k.match(/^w(\d+)-c(\d+)$/)
return m ? { w: +m[1], c: +m[2] } : null
}
const s = parse(startKey)
const t = parse(endKey)
if (!s || !t) return
if (!addMode) this.selectedKeys = []
const minW = Math.min(s.w, t.w)
const maxW = Math.max(s.w, t.w)
const minC = Math.min(s.c, t.c)
const maxC = Math.max(s.c, t.c)
for (let w = minW; w <= maxW; w++) {
for (let c = minC; c <= maxC; c++) {
const key = this.cellKey(w, c)
if (this.selectedKeys.indexOf(key) === -1) this.selectedKeys.push(key)
}
}
},
/* ---------- 事件操作 ---------- */
applyEvent() {
if (!this.selectedKeys.length) {
this.$message.warning('请先选择时间格')
return
}
const name = this.toolbar.eventName.trim()
if (!name) {
this.$message.warning('请输入事件名称')
return
}
const keys = [...this.selectedKeys]
keys.forEach(key => {
const prev = this.events[key]
this.$set(this.events, key, {
bh: prev ? prev.bh : undefined,
name: name,
schedulable: this.toolbar.schedulable,
mainCourse: this.toolbar.mainCourse,
remarkShow: this.toolbar.remarkShow,
remark: this.toolbar.remark
})
})
this.persistEvents(keys)
},
deleteEvent() {
if (!this.selectedKeys.length) {
this.$message.warning('请先选择时间格')
return
}
const keys = [...this.selectedKeys]
keys.forEach(key => {
this.$delete(this.events, key)
})
this.$message.success('已删除 ' + keys.length + ' 个时间格事件')
},
absorbEvent() {
// 吸取:取选择中第一个有事件的格
let target = null
for (const key of this.selectedKeys) {
if (this.events[key]) { target = this.events[key]; break }
}
if (!target) {
this.$message.warning('所选时间格中无事件可吸取')
return
}
this.toolbar.eventName = target.name
this.toolbar.schedulable = !!target.schedulable
this.toolbar.mainCourse = !!target.mainCourse
this.toolbar.remarkShow = !!target.remarkShow
this.toolbar.remark = target.remark || ''
this.absorbPreview = target.name
},
onCellDblClick(wIdx, col) {
const ev = this.getEvent(wIdx, col.colIndex)
if (ev) {
this.toolbar.eventName = ev.name
this.toolbar.schedulable = !!ev.schedulable
this.toolbar.mainCourse = !!ev.mainCourse
this.toolbar.remarkShow = !!ev.remarkShow
this.toolbar.remark = ev.remark || ''
this.absorbPreview = ev.name
this.$message.info('已吸取事件:' + ev.name)
}
},
refreshGrid() {
this.selectedKeys = []
this.absorbPreview = ''
this.events = {}
this.loadXqxlbEvents()
this.$message.info('已刷新')
},
/* ---------- 后端持久化(xqxlb 接口) ---------- */
// 批量保存选中格事件,返回各格子保存成功/失败的个数
persistEvents(keys) {
const tasks = keys
.filter(key => this.events[key])
.map(key => {
const payload = this.buildXqxlbPayload(key, this.events[key])
if (!payload) return Promise.resolve(false)
return updateXqxlb(payload)
.then(() => true)
.catch(() => false)
})
return Promise.all(tasks).then(results => {
const ok = results.filter(r => r === true).length
const fail = results.length - ok
if (fail > 0) {
this.$message.error(fail + ' 个事件保存失败,请检查后端接口')
} else if (ok > 0) {
this.$message.success('已设定 ' + ok + ' 个时间格')
}
// 保存成功后重新拉取,回写各记录主键,避免重复新增
this.loadXqxlbEvents()
return { ok: ok, fail: fail }
})
},
// 构造 xqxlb 提交数据
buildXqxlbPayload(key, ev) {
const pos = this.parseCellKey(key)
if (!pos) return null
const d = new Date(this.startDate)
d.setDate(this.startDate.getDate() + pos.wIdx * 7 + pos.dayIndex)
return {
delFlag: 0,
bh: ev.bh || undefined,
nd: this.nd,
jqsj: fmtDate(d),
jqmc: ev.name || '',
jc: null,
bz: ev.remark || null,
kpk: !!ev.schedulable,
bzxs: !!ev.remarkShow,
zdpk: !!ev.mainCourse,
courseClass: SLOT_COURSE_MAP[pos.slotKey] || null
}
},
// 时间格 key -> { wIdx, dayIndex, slotKey }
parseCellKey(key) {
const m = key.match(/^w(\d+)-c(\d+)$/)
if (!m) return null
const colIndex = +m[2]
const col = this.visibleColumns.find(c => c.colIndex === colIndex)
if (!col) return null
return { wIdx: +m[1], dayIndex: col.dayIndex, slotKey: col.slotKey }
},
/* ---------- 返回学期管理 ---------- */
handleClose() {
this.$emit('close')
this.$router.replace({ path: '/teachBusiness/semester' })
}
}
}
</script>
<style scoped lang="scss">
.school-calendar-editor {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border: 1px solid #e4e7ed;
border-radius: 6px;
overflow: hidden;
/* 标题栏 */
.sce-titlebar {
display: flex;
align-items: center;
height: 44px;
padding: 0 14px;
background: var(--edu-green-primary, #00875a);
color: #fff;
.sce-title-left { flex: 1; font-size: 15px; font-weight: 600; }
.sce-title-center { flex: 1; text-align: center; font-size: 13px; opacity: 0.9; }
.sce-title-right { flex: 0 0 auto; text-align: right; }
.sce-title-right i {
margin-left: 14px;
cursor: pointer;
font-size: 18px;
opacity: 0.85;
&:hover { opacity: 1; }
}
}
/* 设置面板 */
.sce-panel {
padding: 10px 14px;
border-bottom: 1px solid #ebeef5;
background: #fafafa;
.sce-panel-row {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 8px;
&:last-child { margin-bottom: 0; }
}
.sce-label { font-size: 13px; color: #606266; margin-right: 6px; white-space: nowrap; }
.sce-event-input { width: 200px; margin-right: 12px; }
.sce-remark-input { width: 240px; margin-left: 6px; }
.sce-cb { margin-right: 14px; }
.sce-divider { width: 1px; height: 18px; background: #dcdfe6; margin: 0 14px; }
}
/* 时间编排区 */
.sce-grid-wrap {
flex: 1;
overflow: auto;
padding: 8px 10px;
background: #fff;
}
.sce-grid {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
font-size: 12px;
user-select: none;
th, td {
border: 1px solid #e4e7ed;
text-align: center;
padding: 0;
}
.sce-corner {
background: #f5f7fa;
font-weight: 600;
color: #303133;
vertical-align: middle;
}
.sce-th-weekno { width: 52px; }
.sce-th-weekrange { width: 110px; }
.sce-th-day {
background: var(--edu-green-primary, #00875a);
color: #fff;
font-weight: 600;
height: 26px;
}
.sce-th-slot {
background: #ecf5f0;
color: #00875a;
height: 22px;
font-weight: 500;
}
.sce-week-cell {
background: #f5f7fa;
vertical-align: middle;
white-space: nowrap;
}
.sce-weekno-cell {
font-weight: 600;
color: #303133;
font-size: 13px;
}
.sce-weekrange-cell {
font-size: 11px;
color: #909399;
}
.sce-cell {
height: 30px;
position: relative;
cursor: pointer;
background: #fff;
transition: background 0.15s;
.sce-date-num { color: #c0c4cc; }
// 星期交替底色:周一/三/五/日为浅绿,周二/四/六为白,便于区分星期
&.sce-cell-odd { background: #eef6f1; }
&.sce-cell-even { background: #ffffff; }
&.has-event { background: #e6f4ea; }
&.has-event .sce-event-name { color: #00663e; font-weight: 500; }
&.has-event .sce-event-name.is-bold { font-weight: 700; }
&.no-schedule { background: #fde2e2; }
&.is-selected {
outline: 2px solid var(--edu-green-primary, #00875a);
outline-offset: -2px;
background: #d4ecdf !important;
}
}
/* 状态标记小方块 */
.sce-flag {
position: absolute;
width: 7px;
height: 7px;
border-radius: 1px;
}
.sce-flag-noschedule { left: 2px; top: 2px; background: #909399; }
.sce-flag-maincourse { right: 2px; top: 2px; background: #409eff; }
}
.sce-status {
padding: 6px 14px;
font-size: 12px;
color: #909399;
border-top: 1px solid #ebeef5;
background: #fafafa;
.sce-absorb-tip { margin-left: 12px; color: #00875a; }
}
}
</style>
@@ -1,509 +0,0 @@
<template>
<div class="teach-calendar app-container">
<!-- 顶部标题:学期名称-校历 -->
<div class="cal-titlebar">
<span class="cal-title">{{ titleText }}</span>
</div>
<!-- 显示控制栏 -->
<div class="cal-panel">
<el-checkbox v-model="showDate" class="cal-cb">显示日期</el-checkbox>
<div class="cal-panel-right">
<el-button size="mini" type="primary" icon="el-icon-download" @click="exportExcel">另存为Excel</el-button>
</div>
</div>
<!-- 学期校历表格 -->
<div class="cal-grid-wrap">
<table class="cal-grid">
<thead>
<tr>
<th class="cal-corner cal-th-weekno" :rowspan="2">周次</th>
<th class="cal-corner cal-th-weekrange" :rowspan="2">日期段</th>
<th v-for="day in weekDayHeaders" :key="'h1-' + day.dayIndex" :colspan="day.colCount" class="cal-th-day">
{{ day.label }}
</th>
</tr>
<tr>
<th v-for="col in visibleColumns" :key="'h2-' + col.colIndex" class="cal-th-slot">
{{ col.slotLabel }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(week, wIdx) in weeks" :key="'w-' + wIdx">
<td class="cal-week-cell cal-weekno-cell">{{ wIdx + 1 }}</td>
<td class="cal-week-cell cal-weekrange-cell">{{ week.rangeText }}</td>
<td
v-for="col in visibleColumns"
:key="'c-' + wIdx + '-' + col.colIndex"
class="cal-cell"
:class="cellClass(wIdx, col)"
>
<template v-if="getEvent(wIdx, col.colIndex)">
<span class="cal-event-name">{{ getEvent(wIdx, col.colIndex).name }}</span>
<span
v-if="!getEvent(wIdx, col.colIndex).schedulable"
class="cal-flag cal-flag-noschedule"
title="全校不允许排课"
/>
<span
v-if="getEvent(wIdx, col.colIndex).mainCourse"
class="cal-flag cal-flag-maincourse"
title="正课"
/>
</template>
<span v-else-if="showDate" class="cal-date-num">{{ dateNumberOf(wIdx, col.dayIndex) }}</span>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 底部状态栏 -->
<div class="cal-status">
<span v-if="nd">从 {{ dateRangeText }} ,共 {{ totalWeeks }} 周</span>
<span v-else>请选择学期</span>
</div>
</div>
</template>
<script>
import { saveAs } from 'file-saver'
import { listSemester, getSemester } from '@/api/teachBusiness/semester'
import { listXqxlb } from '@/api/teachBusiness/xqxlb'
// 节次定义:全部常显
const SLOT_DEFS = [
{ key: '12', label: '1-2' },
{ key: '34', label: '3-4' },
{ key: '56', label: '5-6' },
{ key: '78', label: '7-8' },
{ key: 'night', label: '晚上' },
{ key: 'late', label: '夜间' }
]
// 前端节次 key -> 后端 xqxlb.courseClass 节次范围
const SLOT_COURSE_MAP = {
'12': '1-2',
'34': '3-4',
'56': '5-6',
'78': '7-8',
night: '9-10',
late: '11-12'
}
const WEEK_DAYS = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
function pad2(n) {
return n < 10 ? '0' + n : '' + n
}
function fmtDate(d) {
return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate())
}
export default {
name: 'SemesterCalendar',
data() {
return {
// 当前学期代号(跟随顶栏切换学期,自动更新为当前学期)
nd: '',
// 学期日期范围
startDate: null,
endDate: null,
totalWeeks: 0,
dateRangeText: '',
weeks: [],
// 显示控制:默认勾选显示日期;节次全部展示
showDate: true,
// 事件存储:key = cellKey -> event
events: {},
loading: false
}
},
computed: {
// 页面标题:学期名称-校历
titleText() {
if (!this.nd) return '学期校历'
return this.getSemesterName(this.nd) + '-校历'
},
// 当前可见列(全部节次常显)
visibleColumns() {
const cols = []
let colIndex = 0
WEEK_DAYS.forEach((dayLabel, dayIndex) => {
SLOT_DEFS.forEach(slot => {
cols.push({ colIndex: colIndex, dayIndex: dayIndex, slotKey: slot.key, slotLabel: slot.label, dayLabel: dayLabel })
colIndex++
})
})
return cols
},
// 表头第一行星期:每个星期合并其下全部节次列
weekDayHeaders() {
return WEEK_DAYS.map((label, dayIndex) => ({
dayIndex: dayIndex,
label: label,
colCount: SLOT_DEFS.length
}))
}
},
created() {
// 初始加载当前学期
this.loadCurrentSemester()
// 顶栏切换学期后自动刷新为当前学期的校历
this.$root.$on('semester-current-changed', this.loadCurrentSemester)
},
beforeDestroy() {
this.$root.$off('semester-current-changed', this.loadCurrentSemester)
},
methods: {
/* ---------- 加载当前学期 ---------- */
loadCurrentSemester() {
this.loading = true
listSemester({ pageNum: 1, pageSize: 100 }).then(response => {
const data = response.data || {}
const list = data.records || []
// 跟随顶栏当前学期(dqxq=true),无则取第一条
const current = list.find(i => i.dqxq) || list[0]
this.loading = false
if (current) {
if (String(this.nd) !== String(current.nd)) {
this.nd = current.nd
this.loadSemester()
}
}
}).catch(() => {
this.loading = false
})
},
/* ---------- 数据加载 ---------- */
loadSemester() {
if (!this.nd) return
this.startDate = null
this.endDate = null
getSemester(this.nd)
.then(res => {
const data = res.data || res || {}
const kx = (data.kxrq || '').toString().slice(0, 10)
const jx = (data.jsrq || '').toString().slice(0, 10)
if (kx && jx) {
this.startDate = new Date(kx.replace(/-/g, '/'))
this.endDate = new Date(jx.replace(/-/g, '/'))
this.buildWeeks()
}
this.loadXqxlbEvents()
})
.catch(() => {
this.$message.warning('学期详情获取失败,请确认学期数据')
})
},
// 从后端拉取本学期校历假期,渲染到对应时间格(nd 为 6 位学期代号,如 202601)
loadXqxlbEvents() {
listXqxlb({ nd: this.nd }).then(res => {
const data = res.data
const list = Array.isArray(data) ? data : (data && data.records) || []
const loaded = {}
list.forEach(item => {
const pos = this.locateXqxlb(item)
if (pos) {
loaded[pos.key] = {
bh: item.bh,
name: item.jqmc || '',
schedulable: !!item.kpk,
mainCourse: !!item.zdpk,
remarkShow: !!item.bzxs,
remark: item.bz || ''
}
}
})
this.events = loaded
}).catch(() => {
this.$message.warning('校历事件加载失败')
})
},
// 根据假期记录反推时间格 key(jqsj 日期 + courseClass 节次)
locateXqxlb(item) {
if (!this.startDate || !item.jqsj) return null
const d = new Date(String(item.jqsj).slice(0, 10).replace(/-/g, '/'))
if (isNaN(d.getTime())) return null
const offset = Math.round((d - this.startDate) / (24 * 3600 * 1000))
if (offset < 0) return null
const wIdx = Math.floor(offset / 7)
const dayIndex = offset % 7
const slotKey = this.courseClassToSlotKey(item.courseClass)
if (slotKey === null) return null
const colIndex = this.colIndexOf(dayIndex, slotKey)
if (colIndex < 0) return null
return { key: this.cellKey(wIdx, colIndex) }
},
// 后端 courseClass 节次范围 -> 前端节次 key
courseClassToSlotKey(courseClass) {
if (!courseClass) return null
const s = String(courseClass).trim()
for (const key in SLOT_COURSE_MAP) {
if (s === SLOT_COURSE_MAP[key]) return key
}
// 兼容 "910"/"1112" 等紧凑写法
if (s === '910') return 'night'
if (s === '1112') return 'late'
return null
},
buildWeeks() {
if (!this.startDate || !this.endDate) return
const start = new Date(this.startDate)
const end = new Date(this.endDate)
const days = Math.round((end - start) / (24 * 3600 * 1000)) + 1
this.totalWeeks = Math.ceil(days / 7)
this.dateRangeText = fmtDate(start) + ' 到 ' + fmtDate(end)
const weeks = []
for (let w = 0; w < this.totalWeeks; w++) {
const wkStart = new Date(start)
wkStart.setDate(start.getDate() + w * 7)
const wkEnd = new Date(wkStart)
wkEnd.setDate(wkStart.getDate() + 6)
weeks.push({
rangeText: pad2(wkStart.getMonth() + 1) + '-' + pad2(wkStart.getDate()) +
'至' + pad2(wkEnd.getMonth() + 1) + '-' + pad2(wkEnd.getDate())
})
}
this.weeks = weeks
},
colIndexOf(dayIndex, slotKey) {
const col = this.visibleColumns.find(c => c.dayIndex === dayIndex && c.slotKey === slotKey)
return col ? col.colIndex : -1
},
/* ---------- 单元格工具 ---------- */
cellKey(wIdx, colIndex) {
return 'w' + wIdx + '-c' + colIndex
},
getEvent(wIdx, colIndex) {
return this.events[this.cellKey(wIdx, colIndex)] || null
},
weekDayLabel(dayIndex) {
return WEEK_DAYS[dayIndex]
},
// 单元格内显示的日期数字(如 0703)
dateNumberOf(wIdx, dayIndex) {
if (!this.startDate) return ''
const d = new Date(this.startDate)
d.setDate(this.startDate.getDate() + wIdx * 7 + dayIndex)
return pad2(d.getMonth() + 1) + pad2(d.getDate())
},
cellClass(wIdx, col) {
const classes = []
// 星期交替背景(单双日不同底色)
if (col.dayIndex % 2 === 0) classes.push('cal-cell-odd')
else classes.push('cal-cell-even')
const ev = this.getEvent(wIdx, col.colIndex)
if (ev) {
classes.push('has-event')
if (!ev.schedulable) classes.push('no-schedule')
}
return classes
},
/** 学期代号 -> 学期名称(如 202601 -> 2026年春季学期) */
getSemesterName(nd) {
if (!nd) return ''
const s = String(nd)
const xn = s.slice(0, 4)
const xq = s.slice(4)
const map = { '01': '春季学期', '02': '夏季学期', '03': '秋季学期' }
return xn + '年' + (map[xq] || '第' + xq + '学期')
},
/* ---------- 另存为Excel ---------- */
exportExcel() {
if (!this.weeks.length) {
this.$message.warning('暂无校历数据可导出')
return
}
// 按星期分组节次列,用于表头合并
const dayCols = []
this.visibleColumns.forEach(col => {
if (!dayCols[col.dayIndex]) dayCols[col.dayIndex] = []
dayCols[col.dayIndex].push(col)
})
let html = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel">'
html += '<head><meta charset="utf-8"></head><body>'
html += '<table border="1" cellspacing="0" cellpadding="4" style="border-collapse:collapse;">'
// 标题行
html += '<tr><td colspan="' + (this.visibleColumns.length + 2) + '" style="font-size:15px;font-weight:bold;text-align:center;">' + this.titleText + '</td></tr>'
// 表头第一行:星期(合并同类天)
html += '<tr><th rowspan="2">周次</th><th rowspan="2">日期段</th>'
WEEK_DAYS.forEach((dayLabel, dayIndex) => {
const cols = dayCols[dayIndex] || []
if (cols.length) html += '<th colspan="' + cols.length + '">' + dayLabel + '</th>'
})
html += '</tr>'
// 表头第二行:节次
html += '<tr>'
this.visibleColumns.forEach(col => {
html += '<th>' + col.slotLabel + '</th>'
})
html += '</tr>'
// 数据行
this.weeks.forEach((week, wIdx) => {
html += '<tr>'
html += '<td>' + (wIdx + 1) + '</td>'
html += '<td>' + week.rangeText + '</td>'
this.visibleColumns.forEach(col => {
const ev = this.getEvent(wIdx, col.colIndex)
if (ev) {
const remark = ev.remark && ev.remarkShow ? '(' + ev.remark + ')' : ''
html += '<td>' + ev.name + remark + '</td>'
} else if (this.showDate) {
html += '<td>' + this.dateNumberOf(wIdx, col.dayIndex) + '</td>'
} else {
html += '<td></td>'
}
})
html += '</tr>'
})
html += '</table></body></html>'
const blob = new Blob(['\ufeff' + html], { type: 'application/vnd.ms-excel;charset=utf-8' })
saveAs(blob, (this.titleText || '学期校历') + '.xls')
this.$message.success('已导出Excel')
}
}
}
</script>
<style scoped lang="scss">
.teach-calendar {
height: 100%;
display: flex;
flex-direction: column;
padding: 12px;
box-sizing: border-box;
background: #fff;
border: 1px solid #e4e7ed;
border-radius: 6px;
overflow: hidden;
/* 顶部标题栏 */
.cal-titlebar {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
background: var(--edu-green-primary, #00875a);
color: #fff;
border-radius: 4px 4px 0 0;
.cal-title {
font-size: 15px;
font-weight: 600;
}
}
/* 显示控制栏 */
.cal-panel {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 8px 14px;
border-bottom: 1px solid #ebeef5;
background: #fafafa;
.cal-cb { margin-right: 14px; }
.cal-panel-right { margin-left: auto; }
}
/* 表格区域 */
.cal-grid-wrap {
flex: 1;
overflow: auto;
padding: 8px 10px;
background: #fff;
}
.cal-grid {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
font-size: 12px;
th, td {
border: 1px solid #e4e7ed;
text-align: center;
padding: 0;
}
.cal-corner {
background: #f5f7fa;
font-weight: 600;
color: #303133;
vertical-align: middle;
}
.cal-th-weekno { width: 52px; }
.cal-th-weekrange { width: 110px; }
.cal-th-day {
background: var(--edu-green-primary, #00875a);
color: #fff;
font-weight: 600;
height: 26px;
}
.cal-th-slot {
background: #ecf5f0;
color: #00875a;
height: 22px;
font-weight: 500;
}
.cal-week-cell {
background: #f5f7fa;
vertical-align: middle;
white-space: nowrap;
}
.cal-weekno-cell {
font-weight: 600;
color: #303133;
font-size: 13px;
}
.cal-weekrange-cell {
font-size: 11px;
color: #909399;
}
.cal-cell {
height: 30px;
position: relative;
background: #fff;
.cal-date-num { color: #c0c4cc; }
// 星期交替底色:周一/三/五/日为浅绿,周二/四/六为白
&.cal-cell-odd { background: #eef6f1; }
&.cal-cell-even { background: #ffffff; }
&.has-event { background: #e6f4ea; }
&.has-event .cal-event-name { color: #00663e; font-weight: 500; }
&.no-schedule { background: #fde2e2; }
}
/* 状态标记小方块 */
.cal-flag {
position: absolute;
width: 7px;
height: 7px;
border-radius: 1px;
}
.cal-flag-noschedule { left: 2px; top: 2px; background: #909399; }
.cal-flag-maincourse { right: 2px; top: 2px; background: #409eff; }
}
/* 底部状态栏 */
.cal-status {
padding: 6px 14px;
font-size: 12px;
color: #909399;
border-top: 1px solid #ebeef5;
background: #fafafa;
}
}
</style>
@@ -1,53 +0,0 @@
<template>
<div class="teach-calendar app-container">
<school-calendar-editor
v-if="nd"
:nd="nd"
:semester-name="semesterName"
@close="handleClose"
/>
<div v-else class="calendar-empty">未指定学期,请从学期管理页面进入。</div>
</div>
</template>
<script>
import SchoolCalendarEditor from '@/views/teachBusiness/calendar/components/SchoolCalendarEditor'
export default {
name: 'SemesterCalendarEdit',
components: { SchoolCalendarEditor },
data() {
return {
nd: '',
semesterName: ''
}
},
created() {
this.nd = this.$route.query.nd || ''
this.semesterName = this.$route.query.name || ''
},
methods: {
handleClose() {
this.$router.replace({ path: '/teachBusiness/semester' })
}
}
}
</script>
<style scoped>
.teach-calendar {
height: 100%;
display: flex;
flex-direction: column;
padding: 12px;
box-sizing: border-box;
}
.calendar-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: #909399;
font-size: 14px;
}
</style>
@@ -1,596 +0,0 @@
<template>
<div class="app-container teach-semester">
<!-- 工具栏 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新添</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate">编辑</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-date" size="mini" :disabled="single" @click="handleEditCalendar">编辑校历</el-button>
</el-col>
</el-row>
<!-- 数据表格 -->
<el-table
v-loading="loading"
:data="semesterList"
border
:height="tableHeight"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" align="center" width="50" />
<el-table-column label="学期名称" align="center" min-width="190">
<template slot-scope="scope">
<span>{{ getSemesterName(scope.row.nd) }}</span>
</template>
</el-table-column>
<el-table-column label="当前" align="center" width="70">
<template slot-scope="scope">
<el-tag v-if="scope.row.dqxq" type="success" size="mini">当前</el-tag>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="开学日期" align="center" prop="kxrq" min-width="130">
<template slot-scope="scope">
<span>{{ formatDate(scope.row.kxrq) }}</span>
</template>
</el-table-column>
<el-table-column label="结束日期" align="center" prop="jsrq" min-width="130">
<template slot-scope="scope">
<span>{{ formatDate(scope.row.jsrq) }}</span>
</template>
</el-table-column>
<el-table-column label="周数" align="center" prop="sdzs" width="70" />
<el-table-column label="调课不审批" align="center" width="100">
<template slot-scope="scope">
<el-tag :type="scope.row.tkbsp ? 'primary' : 'info'" size="mini">{{ scope.row.tkbsp ? '是' : '否' }}</el-tag>
</template>
</el-table-column>
<el-table-column label="禁止调课" align="center" width="90">
<template slot-scope="scope">
<el-tag :type="scope.row.jztk ? 'danger' : 'info'" size="mini">{{ scope.row.jztk ? '是' : '否' }}</el-tag>
</template>
</el-table-column>
<el-table-column label="终结成绩定及格" align="center" width="120">
<template slot-scope="scope">
<el-tag :type="scope.row.zjcjdjg ? 'primary' : 'info'" size="mini">{{ scope.row.zjcjdjg ? '是' : '否' }}</el-tag>
</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="100">
<template slot-scope="scope">
<span>{{ scope.row.sdjldw || '-' }}</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 学期信息弹窗 -->
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body class="semester-dialog">
<el-form ref="form" class="semester-dialog-form" :model="form" :rules="rules" label-width="96px" label-position="right">
<el-row :gutter="20" class="semester-dialog-body">
<!-- 左侧表单区 -->
<el-col :span="15" class="semester-form-col">
<el-form-item label="学期名称">
<el-input
:value="getSemesterName(buildNd(form.xn, form.xq))"
readonly
placeholder="由年份+学期类型自动拼接"
prefix-icon="el-icon-office-building"
/>
</el-form-item>
<el-row :gutter="14">
<el-col :span="12">
<el-form-item label="年份" prop="xn">
<el-select v-model="form.xn" placeholder="请选择年份" :disabled="!isAdd" style="width: 100%">
<el-option v-for="item in yearOptions" :key="item" :label="item + '年'" :value="item" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="学期类型" prop="xq">
<el-select v-model="form.xq" placeholder="请选择学期类型" :disabled="!isAdd" style="width: 100%">
<el-option v-for="item in semesterOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="14">
<el-col :span="12">
<el-form-item label="开学日期" prop="kxrq">
<el-date-picker
v-model="form.kxrq"
type="date"
placeholder="开学日期"
value-format="yyyy-MM-dd"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="结束日期" prop="jsrq">
<el-date-picker
v-model="form.jsrq"
type="date"
placeholder="结束日期"
value-format="yyyy-MM-dd"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="14">
<el-col :span="12">
<el-form-item label="学期周数" prop="sdzs">
<el-input-number v-model="form.sdzs" :min="1" :max="60" controls-position="right" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="课时系数方案" prop="ksxsfabh">
<el-select v-model="form.ksxsfabh" placeholder="请选择" clearable style="width: 100%">
<el-option v-for="item in coefficientOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="锁定时长">
<div class="lock-group">
<el-input-number v-model="form.lockValue" :min="0" :max="99" controls-position="right" style="width: 120px" />
<el-radio-group v-model="form.lockUnit" class="lock-unit" style="margin-left: 28px">
<el-radio label="周">周</el-radio>
<el-radio label="月">月</el-radio>
</el-radio-group>
</div>
</el-form-item>
<div class="form-tip">以当前周星期四中午12点为界限,锁定【锁定周数】周的教学实施计划,被锁定的教学实施计划不允许教员自行调整。</div>
</el-col>
<!-- 右侧业务开关区 -->
<el-col :span="9" class="semester-switch-col">
<div class="switch-panel-title">业务开关</div>
<div class="switch-panel">
<div class="switch-item">
<el-checkbox v-model="form.dqxq">当前学期</el-checkbox>
<div class="switch-tip">设定当前学期后,系统启动时会自动将该学期设置为默认学期。</div>
</div>
<div class="switch-item">
<el-checkbox v-model="form.jztk">禁止调课</el-checkbox>
<div class="switch-tip">设定【禁止调课】后,教学信息系统中就无法对课程信息进行调整。</div>
</div>
<div class="switch-item">
<el-checkbox v-model="form.tkbsp">调课不审批</el-checkbox>
<div class="switch-tip">设定【调课不审批】后,在教学信息系统中调课时,如果只是更改教员,或更改授课地点,调课申请会立即生效。而对于改变授课地点,调课申请会立即生效。而对于改变授课时间、增加或减少授课教员的调课申请依然不受该设置影响,依然需要逐级审批后才能生效。</div>
</div>
<div class="switch-item">
<el-checkbox v-model="form.zjcjdjg">终结成绩定及格</el-checkbox>
<div class="switch-tip">设定【终结成绩定及格】后,学员终结性成绩不及格的,最终成绩即为不及格。</div>
</div>
<div class="switch-item">
<el-checkbox v-model="form.jwldshtk">教务机关审核教学计划调整</el-checkbox>
<div class="switch-tip">勾选:教务机关需要从行政入口对每个教学计划调整申请进行审批,同时再由管理员身份教务参谋进行最后的把关;不勾选:仅由管理员身份教务参谋进行最后的把关。</div>
</div>
</div>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listSemester, getSemester, addSemester, updateSemester, delSemester } from "@/api/teachBusiness/semester"
export default {
name: "Semester",
data() {
return {
// 遮罩层
loading: true,
// 表格高度
tableHeight: window.innerHeight - 280,
// 总条数
total: 0,
// 学期列表数据
semesterList: [],
// 选中的学期数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 是否新增
isAdd: true,
// 学年选项(当前年份 ± 10 年)
yearOptions: [],
// 学期选项:01 春季、02 夏季、03 秋季
semesterOptions: [
{ value: '01', label: '春季学期' },
{ value: '02', label: '夏季学期' },
{ value: '03', label: '秋季学期' }
],
// 课时系数方案选项(引用基础数据表,暂以静态占位)
coefficientOptions: [
{ value: '1', label: '标准系数方案' },
{ value: '2', label: '综合系数方案' },
{ value: '3', label: '实训系数方案' }
],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10
},
// 表单参数
form: {},
// 表单校验
rules: {
xn: [
{ required: true, message: "请选择年份", trigger: "change" }
],
xq: [
{ required: true, message: "请选择学期类型", trigger: "change" }
],
kxrq: [
{ required: true, message: "请选择开学日期", trigger: "change" }
],
jsrq: [
{ required: true, message: "请选择结束日期", trigger: "change" }
]
}
}
},
created() {
this.initYearOptions()
this.getList()
// 顶栏切换当前学期后,自动刷新本页数据
this.$root.$on('semester-current-changed', this.handleCurrentChanged)
},
beforeDestroy() {
this.$root.$off('semester-current-changed', this.handleCurrentChanged)
},
methods: {
/** 顶栏切换当前学期后自动刷新 */
handleCurrentChanged() {
this.getList()
},
/** 初始化学年选项 */
initYearOptions() {
const current = new Date().getFullYear()
const list = []
for (let i = current - 10; i <= current + 10; i++) {
list.push(i)
}
this.yearOptions = list
},
/** 学年+学期 -> 学期代号(如 2026 + 01 = 202601) */
buildNd(xn, xq) {
if (xn === undefined || xn === null || xn === '' || !xq) return ''
return String(xn) + String(xq)
},
/** 学期代号 -> 学期名称(如 202601 -> 2026年春季学期) */
getSemesterName(nd) {
if (!nd) return ''
const s = String(nd)
const xn = s.slice(0, 4)
const xq = s.slice(4)
const map = { '01': '春季学期', '02': '夏季学期', '03': '秋季学期' }
return xn + '年' + (map[xq] || '第' + xq + '学期')
},
/** 学期代号 -> {xn, xq} */
parseNd(nd) {
if (!nd) return { xn: undefined, xq: undefined }
const s = String(nd)
return { xn: s.slice(0, 4), xq: s.slice(4) }
},
/** 课时系数方案编号 -> 名称 */
getCoefficientLabel(value) {
if (!value && value !== 0) return '-'
const found = this.coefficientOptions.find(o => String(o.value) === String(value))
return found ? found.label : value
},
/** 格式化后端 LocalDateTime(2026-02-23T00:00:00 -> 2026-02-23) */
formatDate(value) {
if (!value) return ''
return String(value).slice(0, 10)
},
/** 查询学期列表 */
getList() {
this.loading = true
listSemester(this.queryParams).then(response => {
const data = response.data || {}
this.semesterList = data.records || []
this.total = data.total || 0
this.loading = false
}).catch(() => {
this.semesterList = []
this.total = 0
this.loading = false
})
},
/** 多选变化 */
handleSelectionChange(selection) {
this.ids = selection.map(item => item.nd)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 组装提交数据 */
buildPayload(form) {
const lockValue = form.lockValue !== undefined && form.lockValue !== null ? form.lockValue : ''
return {
delFlag: 0,
nd: this.buildNd(form.xn, form.xq),
dqxq: !!form.dqxq,
kxrq: form.kxrq ? form.kxrq + 'T00:00:00' : null,
jsrq: form.jsrq ? form.jsrq + 'T00:00:00' : null,
tkbsp: !!form.tkbsp,
jztk: !!form.jztk,
zjcjdjg: !!form.zjcjdjg,
jwldshtk: !!form.jwldshtk,
ksxsfabh: form.ksxsfabh || null,
sdzs: form.sdzs,
sdjldw: lockValue === '' ? '' : lockValue + form.lockUnit,
xh: form.xh,
jsonzd: "{'1':1}",
kstjsj: null
}
},
/** 新增按钮 */
handleAdd() {
this.reset()
this.isAdd = true
this.open = true
this.title = "学期信息 - 新增"
},
/** 编辑按钮 */
handleUpdate() {
if (this.ids.length !== 1) return
this.reset()
this.isAdd = false
getSemester(this.ids[0]).then(response => {
const data = response.data || {}
const { xn, xq } = this.parseNd(data.nd)
// 解析锁定时长(如 "2周" / "1月" / "1")
let lockValue = data.sdjldw
let lockUnit = '周'
if (lockValue) {
const s = String(lockValue)
if (s.endsWith('周')) { lockValue = s.slice(0, -1); lockUnit = '周' }
else if (s.endsWith('月')) { lockValue = s.slice(0, -1); lockUnit = '月' }
}
this.form = {
xn: xn,
xq: xq,
dqxq: !!data.dqxq,
jztk: !!data.jztk,
tkbsp: !!data.tkbsp,
zjcjdjg: !!data.zjcjdjg,
jwldshtk: !!data.jwldshtk,
ksxsfabh: data.ksxsfabh,
kxrq: this.formatDate(data.kxrq),
jsrq: this.formatDate(data.jsrq),
sdzs: data.sdzs,
lockValue: lockValue,
lockUnit: lockUnit,
xh: data.xh
}
this.open = true
this.title = "学期信息 - 编辑"
}).catch(() => {})
},
/** 编辑校历按钮 */
handleEditCalendar() {
if (this.ids.length !== 1) return
const nd = this.ids[0]
this.$router.push({
path: '/teachBusiness/semester/semesterCalendar',
query: { nd: nd, name: this.getSemesterName(nd) }
})
},
/** 删除按钮 */
handleDelete() {
if (!this.ids.length) return
const names = this.ids.map(nd => this.getSemesterName(nd)).join('、')
this.$modal.confirm('确认删除学期【' + names + '】吗?').then(() => {
// 批量删除:逐个调用
const delList = this.ids.map(nd => delSemester(nd))
return Promise.all(delList)
}).then(() => {
this.getList()
this.$modal.msgSuccess("删除成功")
}).catch(() => {})
},
/** 提交表单 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
const payload = this.buildPayload(this.form)
const selfNd = payload.nd
// 当前学期全局只能有一个:若本次设为当前,先把其他 dqxq=true 的取消
const cancelOthers = payload.dqxq
? this.cancelOtherCurrent(selfNd)
: Promise.resolve()
cancelOthers.then(() => {
if (this.isAdd) {
return addSemester(payload)
}
return updateSemester(payload)
}).then(() => {
this.$modal.msgSuccess(this.isAdd ? "新增成功" : "修改成功")
this.open = false
this.getList()
}).catch(() => {})
}
})
},
/** 取消其它“当前学期”,保证全局唯一 */
cancelOtherCurrent(selfNd) {
return listSemester({ pageNum: 1, pageSize: 100 }).then(response => {
const data = response.data || {}
const list = data.records || []
const others = list.filter(i => i.dqxq && String(i.nd) !== String(selfNd))
if (!others.length) return Promise.resolve()
return Promise.all(others.map(o => updateSemester({ ...o, dqxq: false })))
})
},
/** 重置表单 */
reset() {
this.form = {
xn: undefined,
xq: undefined,
dqxq: false,
jztk: false,
tkbsp: false,
zjcjdjg: false,
jwldshtk: false,
ksxsfabh: undefined,
kxrq: undefined,
jsrq: undefined,
sdzs: 20,
lockValue: 1,
lockUnit: '周',
xh: 1
}
this.resetForm("form")
},
/** 取消按钮 */
cancel() {
this.open = false
this.reset()
}
}
}
</script>
<style scoped lang="scss">
.teach-semester {
.mb8 {
margin-bottom: 8px;
}
/* 弹窗内表单:防止 label 文字换行、字段拥挤换行 */
::v-deep .el-dialog__body {
padding-top: 16px;
padding-bottom: 16px;
}
/* 对话框整体两栏布局 */
.semester-dialog-body {
display: block;
}
.semester-form-col {
padding-right: 4px;
}
.semester-switch-col {
padding-left: 24px;
border-left: 1px solid #ebeef5;
}
.semester-dialog-form {
::v-deep .el-form-item {
margin-bottom: 18px;
}
::v-deep .el-form-item__label {
white-space: nowrap;
line-height: 32px;
padding-right: 10px;
color: #606266;
}
::v-deep .el-form-item__content {
line-height: 32px;
}
.el-input,
.el-select,
.el-date-editor {
width: 100%;
}
}
.form-tip {
font-size: 12px;
color: #909399;
line-height: 1.5;
margin-top: 4px;
white-space: normal;
padding-left: 2px;
}
.lock-group {
display: flex;
align-items: center;
}
.switch-panel-title {
font-size: 14px;
font-weight: 600;
color: #303133;
margin-bottom: 14px;
padding-left: 2px;
}
.switch-panel {
display: flex;
flex-direction: column;
gap: 12px;
}
.switch-item {
padding: 11px 13px;
background: #fafafa;
border: 1px solid #ebeef5;
border-radius: 6px;
transition: border-color 0.2s, background 0.2s;
&:hover {
border-color: var(--edu-green-primary);
background: #fff;
}
.el-checkbox {
height: 26px;
font-weight: 600;
color: #303133;
}
.switch-tip {
font-size: 12px;
line-height: 1.6;
color: #909399;
text-align: justify;
margin: 2px 0 0 2px;
}
}
}
</style>
@@ -1,474 +0,0 @@
<template>
<div class="app-container syllabus-page">
<!-- 查询条件 -->
<el-card shadow="never" class="search-card">
<el-form :model="searchForm" label-width="100px" class="search-form" @submit.native.prevent>
<el-row :gutter="32">
<el-col :xs="24" :md="8">
<el-form-item label="专业代号">
<el-input v-model="searchForm.zydh" placeholder="请输入专业代号" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :md="8">
<el-form-item label="停用标识">
<el-select v-model="searchForm.ty" placeholder="全部" clearable class="w-full">
<el-option :value="0" label="正常" />
<el-option :value="1" label="停用" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :md="8">
<div class="search-actions">
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
</div>
</el-col>
</el-row>
</el-form>
</el-card>
<!-- 数据列表 -->
<el-card shadow="never" class="table-card">
<div class="list-header">
<div class="list-title">教学大纲列表</div>
<div class="list-actions">
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
<el-button type="danger" icon="el-icon-delete" :disabled="!selection.length" @click="handleBatchDelete">删除所选</el-button>
<el-button icon="el-icon-download" @click="handleDownload">下载</el-button>
</div>
</div>
<el-table v-loading="loading" :data="pagedData" border stripe highlight-current-row
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="bh" label="编号" width="170" show-overflow-tooltip align="center" />
<el-table-column prop="zydh" label="专业代号" width="150" align="center" />
<el-table-column prop="kbh" label="课编号" width="110" show-overflow-tooltip align="center" />
<el-table-column prop="jc" label="简称" width="100" show-overflow-tooltip align="center" />
<el-table-column prop="klx" label="课类型" width="80" align="center" />
<el-table-column prop="xqdc" label="学期第次" width="80" align="center" />
<el-table-column prop="xs" label="学时" width="70" align="center" />
<el-table-column prop="xf" label="学分" width="70" align="center" />
<el-table-column prop="llxs" label="理论学时" width="80" align="center" />
<el-table-column prop="sjxs" label="实践学时" width="80" align="center" />
<el-table-column prop="zks" label="周课时" width="70" align="center" />
<el-table-column prop="ksks" label="考试课时" width="80" align="center" />
<el-table-column label="大纲课程" width="90" align="center">
<template slot-scope="scope">{{ fmtYesNo(scope.row.dgkc) }}</template>
</el-table-column>
<el-table-column label="停用" width="80" align="center">
<template slot-scope="scope">
<el-tag :type="Number(scope.row.ty) === 1 ? 'danger' : 'success'" size="mini">
{{ Number(scope.row.ty) === 1 ? '停用' : '正常' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="启用时间" width="150" align="center">
<template slot-scope="scope">{{ fmtDateTime(scope.row.qysj) }}</template>
</el-table-column>
<el-table-column label="停用时间" width="150" align="center">
<template slot-scope="scope">{{ fmtDateTime(scope.row.tysj) }}</template>
</el-table-column>
<el-table-column label="操作" width="140" align="center" fixed="right">
<template slot-scope="scope">
<el-button type="text" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" size="mini" icon="el-icon-delete" class="danger-text-btn" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagination"
background
layout="total, sizes, prev, pager, next"
:current-page="pageNum"
:page-size="pageSize"
:total="total"
:page-sizes="[10, 20, 50, 100]"
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
</el-card>
<!-- 新增/编辑弹窗 -->
<el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="720px" append-to-body
:close-on-click-modal="false">
<el-form ref="syllabusForm" :model="dialog.form" :rules="rules" label-width="130px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="专业代号" prop="zydh">
<el-input v-model="dialog.form.zydh" placeholder="请输入专业代号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="课编号" prop="kbh">
<el-input v-model="dialog.form.kbh" placeholder="请输入课编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="学期第次" prop="xqdc">
<el-input-number v-model="dialog.form.xqdc" :min="1" :max="20" controls-position="right" class="w-full" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="课类型" prop="klx">
<el-input v-model="dialog.form.klx" placeholder="请输入课类型" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="学时" prop="xs">
<el-input-number v-model="dialog.form.xs" :min="0" controls-position="right" class="w-full" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="停用" prop="ty">
<el-select v-model="dialog.form.ty" class="w-full">
<el-option :value="0" label="正常" />
<el-option :value="1" label="停用" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="简称">
<el-input v-model="dialog.form.jc" placeholder="请输入课程简称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="学分">
<el-input-number v-model="dialog.form.xf" :min="0" :step="0.5" :precision="1" controls-position="right" class="w-full" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="课程定位">
<el-input v-model="dialog.form.kcdw" placeholder="请输入课程定位" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="模块">
<el-input v-model="dialog.form.mk" placeholder="请输入模块" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="成绩分制">
<el-input v-model="dialog.form.cjfz" placeholder="请输入成绩分制" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="教研室代号">
<el-input v-model="dialog.form.jysdh" placeholder="请输入教研室代号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="考试课时">
<el-input-number v-model="dialog.form.ksks" :min="0" controls-position="right" class="w-full" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="理论学时">
<el-input-number v-model="dialog.form.llxs" :min="0" controls-position="right" class="w-full" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="实践学时">
<el-input-number v-model="dialog.form.sjxs" :min="0" controls-position="right" class="w-full" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="周课时">
<el-input-number v-model="dialog.form.zks" :min="0" controls-position="right" class="w-full" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="不计入平均分">
<el-radio-group v-model="dialog.form.bjrxypjf">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="考试课时不显示">
<el-radio-group v-model="dialog.form.ksksbxs">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="大纲课程">
<el-radio-group v-model="dialog.form.dgkc">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialog.visible = false">取 消</el-button>
<el-button type="primary" :loading="dialog.submitting" @click="submitDialog">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
addSyllabus,
deleteSyllabus,
batchDeleteSyllabus,
updateSyllabus,
listSyllabus,
listSyllabusByZydhAndTy
} from '@/api/teachBusiness/syllabus'
export default {
name: 'SyllabusIndex',
data() {
return {
loading: false,
searchForm: {
zydh: '',
ty: ''
},
tableData: [],
total: 0,
pageNum: 1,
pageSize: 20,
selection: [],
dialog: {
visible: false,
title: '',
submitting: false,
form: this.createEmptyForm()
},
rules: {
zydh: [{ required: true, message: '请输入专业代号', trigger: 'blur' }],
kbh: [{ required: true, message: '请输入课编号', trigger: 'blur' }],
xqdc: [{ required: true, message: '请输入学期第次', trigger: 'blur' }],
klx: [{ required: true, message: '请输入课类型', trigger: 'blur' }],
xs: [{ required: true, message: '请输入学时', trigger: 'blur' }],
ty: [{ required: true, message: '请选择停用标识', trigger: 'change' }]
}
}
},
computed: {
pagedData() {
const start = (this.pageNum - 1) * this.pageSize
return this.tableData.slice(start, start + this.pageSize)
}
},
created() {
this.fetchList()
},
methods: {
/* ---------- 列表加载 ---------- */
fetchList() {
this.loading = true
const { zydh, ty } = this.searchForm
// 专业代号与停用标识同时给出时走后端 /listByZydhAndTy;否则查全部后本地过滤
const useApiQuery = zydh && ty !== '' && ty !== null && ty !== undefined
const req = useApiQuery
? listSyllabusByZydhAndTy(zydh, ty)
: listSyllabus()
req.then(response => {
let list = response.data || []
if (!useApiQuery) {
if (zydh) list = list.filter(i => i.zydh && i.zydh.indexOf(zydh) !== -1)
if (ty !== '' && ty !== null && ty !== undefined) {
list = list.filter(i => Number(i.ty) === Number(ty))
}
}
this.tableData = list
this.total = list.length
this.pageNum = 1
}).catch(() => {
this.tableData = []
this.total = 0
}).finally(() => {
this.loading = false
})
},
handleQuery() {
this.fetchList()
},
handleReset() {
this.searchForm = { zydh: '', ty: '' }
this.fetchList()
},
handleSelectionChange(val) {
this.selection = val
},
/* ---------- 新增 / 编辑 ---------- */
handleAdd() {
this.dialog.title = '新增教学大纲'
this.dialog.form = this.createEmptyForm()
this.dialog.visible = true
this.$nextTick(() => {
if (this.$refs.syllabusForm) this.$refs.syllabusForm.clearValidate()
})
},
handleEdit(row) {
this.dialog.title = '编辑教学大纲'
this.dialog.form = Object.assign({}, this.createEmptyForm(), row)
this.dialog.visible = true
this.$nextTick(() => {
if (this.$refs.syllabusForm) this.$refs.syllabusForm.clearValidate()
})
},
submitDialog() {
this.$refs.syllabusForm.validate(valid => {
if (!valid) return
this.dialog.submitting = true
const payload = this.cleanPayload(this.dialog.form)
const isEdit = !!payload.bh
const req = isEdit ? updateSyllabus(payload) : addSyllabus(payload)
req.then(() => {
this.$message.success(isEdit ? '修改成功' : '新增成功')
this.dialog.visible = false
this.fetchList()
}).finally(() => {
this.dialog.submitting = false
})
})
},
/* ---------- 删除 / 批量删除 ---------- */
handleDelete(row) {
this.$confirm('删除后该条记录将置为「停用」,是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return deleteSyllabus(row.bh)
}).then(() => {
this.$message.success('删除成功')
this.fetchList()
}).catch(() => {})
},
handleBatchDelete() {
if (!this.selection.length) {
this.$message.warning('请先勾选要删除的记录')
return
}
const bhList = this.selection.map(row => row.bh)
this.$confirm('确定删除所选 ' + bhList.length + ' 条记录吗?(将置为「停用」)', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return batchDeleteSyllabus(bhList)
}).then(() => {
this.$message.success('批量删除成功')
this.fetchList()
}).catch(() => {})
},
/* ---------- 下载(无后端接口) ---------- */
handleDownload() {
this.$message.warning('后端暂未提供该接口')
},
/* ---------- 分页 ---------- */
handleSizeChange(size) {
this.pageSize = size
this.pageNum = 1
},
handlePageChange(page) {
this.pageNum = page
},
/* ---------- 工具 ---------- */
createEmptyForm() {
return {
bh: '',
zydh: '',
kbh: '',
xqdc: 1,
klx: '',
xs: 0,
ty: 0,
jc: '',
xf: null,
kcdw: '',
ksks: 0,
mk: '',
cjfz: '',
bjrxypjf: 0,
llxs: 0,
sjxs: 0,
zks: 0,
ksksbxs: 0,
dgkc: 0,
jysdh: ''
}
},
/** 移除空值(''/null/undefined),保留 0 等有效值 */
cleanPayload(obj) {
const payload = {}
Object.keys(obj).forEach(key => {
const value = obj[key]
if (value !== '' && value !== null && value !== undefined) {
payload[key] = value
}
})
return payload
},
fmtYesNo(val) {
return Number(val) === 1 ? '是' : '否'
},
fmtDateTime(val) {
return (val || '').substring(0, 16) || '-'
}
}
}
</script>
<style scoped lang="scss">
.app-container {
padding: 20px;
}
.syllabus-page {
.search-card {
margin-bottom: 16px;
.search-form {
.w-full {
width: 100%;
}
.search-actions {
padding-top: 4px;
}
}
}
.table-card {
.list-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
.list-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
}
.pagination {
margin-top: 16px;
text-align: right;
}
}
}
.danger-text-btn {
color: #f56c6c;
&:hover {
color: #f78989;
}
}
</style>
@@ -1,312 +0,0 @@
<template>
<div class="app-container teaching-task-page">
<!-- ==================== 页面标题 ==================== -->
<div class="page-title">教学任务列表</div>
<!-- ==================== 1. 查询条件区域 ==================== -->
<el-card shadow="never" class="search-card">
<el-form :model="searchForm" label-width="80px" class="search-form">
<el-row :gutter="24">
<el-col :xs="24" :sm="12" :md="8">
<el-form-item label="任务名称">
<el-input
v-model="searchForm.rwmc"
placeholder="请输入任务名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8">
<el-form-item label="年度">
<el-select
v-model="searchForm.nd"
placeholder="请选择年度"
clearable
style="width: 100%"
>
<el-option v-for="y in yearOptions" :key="y" :label="y" :value="y" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8">
<el-form-item label="状态">
<el-select
v-model="searchForm.zt"
placeholder="请选择状态"
clearable
style="width: 100%"
>
<el-option
v-for="opt in statusOptions"
:key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<div class="search-actions">
<el-button class="gray-btn" @click="handleQuery">查询</el-button>
</div>
</el-form>
</el-card>
<!-- ==================== 2. 数据表格 ==================== -->
<el-card shadow="never" class="table-card">
<el-table v-loading="loading" :data="tableData" border stripe>
<template slot="empty">
<span>无数据!</span>
</template>
<el-table-column type="index" label="序号" width="70" align="center" />
<el-table-column prop="bh" label="编号" width="200" align="center" show-overflow-tooltip />
<el-table-column prop="rwmc" label="任务名称" min-width="160" align="left" header-align="center" show-overflow-tooltip />
<el-table-column prop="nd" label="年度" width="90" align="center" />
<el-table-column label="状态" width="100" align="center">
<template slot-scope="{ row }">
<el-tag :type="row.zt === '发布' ? 'success' : 'info'" size="small">
{{ row.zt || '-' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="fbsj" label="发布时间" width="150" align="center" :formatter="fmtDateTime" />
<el-table-column prop="jssj" label="结束时间" width="150" align="center" :formatter="fmtDateTime" />
<el-table-column prop="cjsj" label="创建时间" width="150" align="center" :formatter="fmtDateTime" />
<el-table-column prop="jcxqscsj" label="教材需求生成时间" width="170" align="center" :formatter="fmtDateTime" />
<el-table-column label="操作" width="80" align="center" fixed="right">
<template slot-scope="{ row }">
<el-button type="text" size="small" @click="handleDetail(row)">详情</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="pageNum"
:page-size="pageSize"
:total="total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
class="pagination"
@current-change="handlePageChange"
@size-change="handleSizeChange"
/>
</el-card>
<!-- ==================== 3. 详情对话框 ==================== -->
<el-dialog
:visible="detailVisible"
title="教学任务详情"
width="620px"
:close-on-click-modal="false"
@update:visible="val => detailVisible = val"
>
<el-descriptions v-if="detailData.bh" :column="2" border>
<el-descriptions-item label="编号">{{ detailData.bh || '-' }}</el-descriptions-item>
<el-descriptions-item label="任务名称">{{ detailData.rwmc || '-' }}</el-descriptions-item>
<el-descriptions-item label="年度">{{ fmtVal(detailData.nd) }}</el-descriptions-item>
<el-descriptions-item label="状态">{{ detailData.zt || '-' }}</el-descriptions-item>
<el-descriptions-item label="发布时间">{{ fmtVal(detailData.fbsj) }}</el-descriptions-item>
<el-descriptions-item label="结束时间">{{ fmtVal(detailData.jssj) }}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ fmtVal(detailData.cjsj) }}</el-descriptions-item>
<el-descriptions-item label="教材需求生成时间">{{ fmtVal(detailData.jcxqscsj) }}</el-descriptions-item>
</el-descriptions>
<div v-else v-loading="detailLoading" class="detail-empty">加载中...</div>
<div slot="footer">
<el-button type="primary" @click="detailVisible = false">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
/**
* 教学任务列表(只读查询页)
* 对应菜单:teachBusiness/teachingTask(原「分组课列表」页,下载类功能后端无接口已移除)
* 仅提供 分页查询 list + 详情 get?bh=,不做增删改发(避免与教学任务计划管理页重复操作同一实体)
* 增删改发统一在 src/views/teachOffice/taskPlan/index.vue(教学任务计划管理)完成
*/
import { listTeachingTask, getTeachingTask } from '@/api/teachBusiness/teachingTask'
import { listAllSemester } from '@/api/teachBusiness/semester'
export default {
name: 'TeachingTask',
data() {
return {
// ==================== 1. 查询条件 ====================
searchForm: {
rwmc: '',
nd: undefined,
zt: ''
},
yearOptions: [],
statusOptions: [
{ label: '未发布', value: '未发布' },
{ label: '发布', value: '发布' }
],
// ==================== 2. 表格数据 ====================
loading: false,
tableData: [],
pageNum: 1,
pageSize: 10,
total: 0,
// ==================== 3. 详情 ====================
detailVisible: false,
detailLoading: false,
detailData: {}
}
},
created() {
this.loadYearOptions().then(() => this.fetchList())
},
methods: {
/* ---------- 年度下拉(数据来自 /semester/all,禁止硬编码) ---------- */
loadYearOptions() {
return listAllSemester().then(response => {
const list = response.data || []
const map = {}
list.forEach(item => {
if (item.nd !== null && item.nd !== undefined && item.nd !== '') map[item.nd] = item
})
const arr = Object.keys(map).sort((a, b) => String(b).localeCompare(String(a)))
this.yearOptions = arr
// 默认年度:优先当前学期(dqxq=true),否则取最新年度
const current = list.find(item => item.dqxq === true)
const defaultNd = (current && current.nd) || arr[0]
if (!this.searchForm.nd) this.searchForm.nd = defaultNd
return arr
}).catch(() => {
this.yearOptions = []
return []
})
},
/* ---------- 通用格式化 ---------- */
fmtDateTime(row, column, cellValue) {
if (cellValue === null || cellValue === undefined || cellValue === '') return '-'
return String(cellValue).replace('T', ' ').slice(0, 16)
},
fmtVal(val) {
if (val === null || val === undefined || val === '') return '-'
return String(val).replace('T', ' ').slice(0, 16)
},
/* ---------- 列表加载 ---------- */
fetchList() {
this.loading = true
const params = { pageNum: this.pageNum, pageSize: this.pageSize }
if (this.searchForm.rwmc && this.searchForm.rwmc.trim()) params.rwmc = this.searchForm.rwmc.trim()
if (this.searchForm.nd !== undefined && this.searchForm.nd !== null && this.searchForm.nd !== '') {
params.nd = this.searchForm.nd
}
if (this.searchForm.zt && this.searchForm.zt.trim()) params.zt = this.searchForm.zt.trim()
listTeachingTask(params).then(res => {
const data = (res && res.data) || {}
this.tableData = data.records || []
this.total = data.total || 0
this.loading = false
}).catch(() => {
this.tableData = []
this.total = 0
this.loading = false
})
},
handleQuery() {
this.pageNum = 1
this.fetchList()
},
handlePageChange(page) {
this.pageNum = page
this.fetchList()
},
handleSizeChange(size) {
this.pageSize = size
this.pageNum = 1
this.fetchList()
},
/* ---------- 详情(只读,走真实 get?bh= 接口) ---------- */
handleDetail(row) {
this.detailVisible = true
this.detailLoading = true
this.detailData = {}
getTeachingTask(row.bh).then(res => {
this.detailData = (res && res.data) || {}
this.detailLoading = false
}).catch(() => {
this.detailLoading = false
})
}
}
}
</script>
<style scoped lang="scss">
.app-container {
padding: 20px;
}
.teaching-task-page {
.page-title {
text-align: center;
font-size: 20px;
font-weight: 600;
color: #303133;
margin-bottom: 20px;
}
// ==================== 1. 查询条件区域 ====================
.search-card {
margin-bottom: 16px;
.search-form {
.search-actions {
display: flex;
justify-content: flex-end;
padding-top: 12px;
border-top: 1px solid #ebeef5;
}
}
}
// ==================== 2. 数据表格 ====================
.table-card {
.pagination {
display: flex;
justify-content: flex-end;
margin-top: 12px;
}
}
// ==================== 3. 详情 ====================
.detail-empty {
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
color: #909399;
}
}
.gray-btn {
height: 28px;
padding: 2px 16px;
font-size: 12px;
background: #f5f5f5;
border: 1px solid #c0c4cc;
color: #333;
border-radius: 2px;
&:hover,
&:focus {
background: #ebebeb;
border-color: #c0c4cc;
color: #333;
}
}
</style>
@@ -1,654 +0,0 @@
<template>
<div class="app-container timetable-page">
<el-tabs v-model="activeTab" class="timetable-tabs">
<!-- 今日 -->
<el-tab-pane label="今日" name="today">
<div class="tab-body">
<!-- 日期导航 -->
<div class="nav-header">
<el-link type="primary" :underline="false" class="nav-link" @click="handlePrevDay">前一天</el-link>
<div class="nav-title">{{ todayTitle }}</div>
<el-link type="primary" :underline="false" class="nav-link" @click="handleNextDay">后一天</el-link>
</div>
<!-- 今日表格 -->
<div class="table-card">
<el-table :data="todayList" v-loading="todayLoading" stripe border>
<el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column label="上课时间" width="200" align="center" show-overflow-tooltip>
<template slot-scope="scope">{{ fmtLessonTime(scope.row) }}</template>
</el-table-column>
<el-table-column prop="kcmc" label="课程" min-width="150" show-overflow-tooltip header-align="center" />
<el-table-column prop="kcxh" label="课次序号" width="90" align="center" />
<el-table-column label="教学内容" min-width="180" show-overflow-tooltip header-align="center">
<template slot-scope="scope">{{ scope.row.jxnr || '-' }}</template>
</el-table-column>
<el-table-column label="教学方法" width="130" align="center" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.jxff || '-' }}</template>
</el-table-column>
<el-table-column label="填写状态" width="100" align="center">
<template slot-scope="scope">
<el-tag :type="txztType(scope.row.txzt)" size="mini">{{ txztText(scope.row.txzt) }}</el-tag>
</template>
</el-table-column>
</el-table>
<el-empty v-show="!todayLoading && !todayList.length" description="当日暂无教学计划数据" />
</div>
</div>
</el-tab-pane>
<!-- 本周 -->
<el-tab-pane label="本周" name="week">
<div class="tab-body">
<!-- 周次导航 -->
<div class="nav-header">
<el-link type="primary" :underline="false" class="nav-link" @click="handlePrevWeek">上一周</el-link>
<div class="nav-title">{{ weekTitle }}</div>
<el-link type="primary" :underline="false" class="nav-link" @click="handleNextWeek">下一周</el-link>
</div>
<!-- 本周表格 -->
<div class="table-card">
<el-table :data="weekList" v-loading="weekLoading" stripe border>
<el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column label="上课时间" width="200" align="center" show-overflow-tooltip>
<template slot-scope="scope">{{ fmtLessonTime(scope.row) }}</template>
</el-table-column>
<el-table-column prop="kcmc" label="课程" min-width="150" show-overflow-tooltip header-align="center" />
<el-table-column prop="kcxh" label="课次序号" width="90" align="center" />
<el-table-column label="教学内容" min-width="180" show-overflow-tooltip header-align="center">
<template slot-scope="scope">{{ scope.row.jxnr || '-' }}</template>
</el-table-column>
<el-table-column label="教学方法" width="130" align="center" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.jxff || '-' }}</template>
</el-table-column>
<el-table-column label="填写状态" width="100" align="center">
<template slot-scope="scope">
<el-tag :type="txztType(scope.row.txzt)" size="mini">{{ txztText(scope.row.txzt) }}</el-tag>
</template>
</el-table-column>
</el-table>
<el-empty v-show="!weekLoading && !weekList.length" description="本周暂无教学计划数据" />
<pagination
v-show="weekTotal > 0"
:total="weekTotal"
:page.sync="weekQuery.pageNum"
:limit.sync="weekQuery.pageSize"
@pagination="getWeekList"
/>
</div>
</div>
</el-tab-pane>
<!-- 三实 -->
<el-tab-pane label="三实" name="practice">
<div class="tab-body">
<!-- 周次导航 -->
<div class="nav-header">
<el-link type="primary" :underline="false" class="nav-link" @click="handlePrevWeek3">上一周</el-link>
<div class="nav-title">{{ practiceTitle }}</div>
<el-link type="primary" :underline="false" class="nav-link" @click="handleNextWeek3">下一周</el-link>
</div>
<el-alert
class="mb8"
type="info"
:closable="false"
show-icon
title="说明:后端教学实施计划课次接口未返回课程类型字段,无法按三实课类型筛选,当前展示本周全部教学实施计划课次。"
/>
<!-- 三实表格 -->
<div class="table-card">
<el-table :data="practiceList" v-loading="practiceLoading" stripe border>
<el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column label="上课时间" width="200" align="center" show-overflow-tooltip>
<template slot-scope="scope">{{ fmtLessonTime(scope.row) }}</template>
</el-table-column>
<el-table-column prop="kcmc" label="课程" min-width="150" show-overflow-tooltip header-align="center" />
<el-table-column prop="kcxh" label="课次序号" width="90" align="center" />
<el-table-column label="教学内容" min-width="180" show-overflow-tooltip header-align="center">
<template slot-scope="scope">{{ scope.row.jxnr || '-' }}</template>
</el-table-column>
<el-table-column label="教学方法" width="130" align="center" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.jxff || '-' }}</template>
</el-table-column>
<el-table-column label="填写状态" width="100" align="center">
<template slot-scope="scope">
<el-tag :type="txztType(scope.row.txzt)" size="mini">{{ txztText(scope.row.txzt) }}</el-tag>
</template>
</el-table-column>
</el-table>
<el-empty v-show="!practiceLoading && !practiceList.length" description="本周暂无三实教学计划数据" />
<pagination
v-show="practiceTotal > 0"
:total="practiceTotal"
:page.sync="practiceQuery.pageNum"
:limit.sync="practiceQuery.pageSize"
@pagination="getPracticeList"
/>
</div>
</div>
</el-tab-pane>
<!-- 班次 -->
<el-tab-pane label="班次" name="shift">
<div class="tab-body">
<!-- 查询条件 -->
<el-form :inline="true" class="shift-search">
<el-form-item label="队别班次">
<el-select
v-model="shiftXydbh"
placeholder="请选择队别班次"
clearable
filterable
class="shift-select"
>
<el-option v-for="t in teamOptions" :key="t.xydbh" :label="t.xydmc" :value="t.xydbh" />
</el-select>
</el-form-item>
<el-form-item label="年度">
<el-select v-model="shiftNd" placeholder="请选择年度" class="shift-select">
<el-option v-for="y in yearOptions" :key="y" :label="y" :value="y" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleShiftSearch">查询</el-button>
</el-form-item>
</el-form>
<!-- 标题 -->
<div class="shift-title">{{ shiftTitle }}</div>
<!-- 操作按钮 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleNotProvided">学期教学实施计划</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleNotProvided">学期课程表(周次星期)</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleNotProvided">学期课程表(班次视图)</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleNotProvided">学期课程表(排课周)含选修</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleNotProvided">学期教学实施计划(含选修)</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleNotProvided">学期课程表(周次星期)详细</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleNotProvided">学期成绩表</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="el-icon-download" size="mini" @click="handleNotProvided">课程列表另存Excel</el-button>
</el-col>
</el-row>
<!-- 班次课程表 -->
<div class="table-card">
<el-table v-loading="shiftLoading" :data="shiftList" border stripe>
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column label="课程名称/简称" min-width="200" header-align="center">
<template slot-scope="scope">
<div>{{ scope.row._kcmc || '-' }}</div>
<div class="sub-text">{{ scope.row.jc || '-' }}</div>
</template>
</el-table-column>
<el-table-column label="责任教员/课次" width="160" header-align="center">
<template slot-scope="scope">
<div>{{ scope.row._zrjy || '-' }}</div>
<div class="sub-text">第{{ scope.row.kcxh || '-' }}次课</div>
</template>
</el-table-column>
<el-table-column prop="xydmc" label="班次" width="130" show-overflow-tooltip header-align="center" />
<el-table-column prop="xs" label="计划学时" width="90" align="center" />
<el-table-column prop="llxs" label="理论学时" width="90" align="center" />
<el-table-column prop="sjxs" label="实践学时" width="90" align="center" />
<el-table-column prop="cjfz" label="考核类型方式" min-width="110" show-overflow-tooltip header-align="center" />
<el-table-column label="实施教员" width="110" align="center" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row._ssjy || '-' }}</template>
</el-table-column>
<el-table-column label="人数/场地" width="130" header-align="center">
<template slot-scope="scope">
<div>{{ scope.row.rs || '-' }} 人</div>
<div class="sub-text">{{ scope.row.jsbh || '-' }}</div>
</template>
</el-table-column>
<el-table-column prop="xf" label="学分" width="80" align="center" />
<el-table-column label="实施计划变更" width="150" header-align="center">
<template slot-scope="scope">{{ fmtKbbdsj(scope.row.kbbdsj) }}</template>
</el-table-column>
</el-table>
<el-empty v-show="!shiftLoading && !shiftList.length" description="该班次暂无课程数据" />
<pagination
v-show="shiftTotal > 0"
:total="shiftTotal"
:page.sync="shiftQuery.pageNum"
:limit.sync="shiftQuery.pageSize"
@pagination="getShiftList"
/>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { listTeachingPlan } from '@/api/teachBusiness/courseRunning'
import { listStudentTeamTask } from '@/api/teachBusiness/studentTeamTask'
import { listTeam } from '@/api/studentRecords/team'
import { listKb } from '@/api/teachOffice/kb'
import { listTeacher } from '@/api/teachOffice/teacher'
import { listAllSemester } from '@/api/teachBusiness/semester'
// 节次 -> 节次区间映射
const JC_SECTION = {
1: '1-2节', 2: '3-4节', 3: '5-6节', 4: '7-8节', 5: '9-10节', 6: '11-12节'
}
const WEEK_DAY_NAMES = ['日', '一', '二', '三', '四', '五', '六']
function pad2(n) {
return n < 10 ? '0' + n : '' + n
}
function formatDate(d) {
return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate())
}
function getMonday(d) {
const day = d.getDay() || 7
const monday = new Date(d)
monday.setDate(d.getDate() - day + 1)
return monday
}
export default {
name: 'Timetable',
data() {
return {
activeTab: 'today',
// 今日
todayDate: new Date(),
todayList: [],
todayLoading: false,
// 本周
weekStart: getMonday(new Date()),
weekList: [],
weekLoading: false,
weekTotal: 0,
weekQuery: { pageNum: 1, pageSize: 20 },
// 三实
practiceStart: getMonday(new Date()),
practiceList: [],
practiceLoading: false,
practiceTotal: 0,
practiceQuery: { pageNum: 1, pageSize: 20 },
// 班次
teamOptions: [],
shiftXydbh: '',
shiftNd: undefined,
shiftList: [],
shiftLoading: false,
shiftTotal: 0,
shiftQuery: { pageNum: 1, pageSize: 20 },
// 年度下拉数据来自 /semester/all(真实后端数据)
yearOptions: [],
defaultNd: undefined,
// 名称映射(真实接口数据,用于班次 tab 课程/教员编号转名称)
kbMap: {},
teacherMap: {}
}
},
computed: {
todayTitle() {
return '当前日期:' + formatDate(this.todayDate) + '时间顺序教学实施计划'
},
weekTitle() {
const end = new Date(this.weekStart)
end.setDate(end.getDate() + 6)
return formatDate(this.weekStart) + '(' + this.weekDayName(this.weekStart) + ') 至 ' +
formatDate(end) + '(' + this.weekDayName(end) + ') 教学实施计划'
},
practiceTitle() {
const end = new Date(this.practiceStart)
end.setDate(end.getDate() + 6)
return formatDate(this.practiceStart) + '(' + this.weekDayName(this.practiceStart) + ') 至 ' +
formatDate(end) + '(' + this.weekDayName(end) + ') 三实教学实施计划'
},
shiftTitle() {
const team = this.teamOptions.find(t => t.xydbh === this.shiftXydbh)
const name = (team && team.xydmc) || ''
return (this.shiftNd ? this.shiftNd + '年' : '') + name + '课程表'
}
},
created() {
this.loadYearOptions()
this.getTodayList()
this.getWeekList()
this.getPracticeList()
this.loadTeamOptions()
this.loadKbMap()
this.loadTeacherMap()
},
methods: {
/* ---------- 年度下拉(数据来自 /semester/all) ---------- */
loadYearOptions() {
return listAllSemester().then(response => {
const list = response.data || []
// 去重并按年度倒序
const map = {}
list.forEach(item => {
if (item.nd !== null && item.nd !== undefined && item.nd !== '') map[item.nd] = item
})
const arr = Object.keys(map).sort((a, b) => String(b).localeCompare(String(a)))
this.yearOptions = arr
// 默认年度:优先当前学期(dqxq=true),否则取最新年度
const current = list.find(item => item.dqxq === true)
this.defaultNd = (current && current.nd) || arr[0]
if (!this.shiftNd) this.shiftNd = this.defaultNd
return arr
}).catch(() => {
this.yearOptions = []
this.defaultNd = undefined
return []
})
},
weekDayName(d) {
return WEEK_DAY_NAMES[d.getDay()]
},
formatSection(jc) {
if (jc === null || jc === undefined || jc === '') return '第?节'
return JC_SECTION[jc] || ('第' + jc + '节')
},
/** 后端 LocalDateTime -> 日期+周X+节次区间 */
fmtLessonTime(row) {
const rq = row.rq || ''
const date = String(rq).substring(0, 10)
if (!date) return '-'
const d = new Date(date.replace(/-/g, '/'))
const wn = WEEK_DAY_NAMES[d.getDay()]
return (date + ' 周' + wn + ' ' + this.formatSection(row.jc)).trim()
},
/** 后端 LocalDateTime -> yyyy-MM-dd HH:mm */
fmtKbbdsj(v) {
if (!v) return '-'
return String(v).replace('T', ' ').substring(0, 16)
},
txztText(txzt) {
if (txzt === 1) return '已填写'
if (txzt === 2) return '已提交'
return '未填写'
},
txztType(txzt) {
if (txzt === 1) return 'success'
if (txzt === 2) return 'primary'
return 'info'
},
/* ---------- 今日 ---------- */
handlePrevDay() {
const d = new Date(this.todayDate)
d.setDate(d.getDate() - 1)
this.todayDate = d
this.getTodayList()
},
handleNextDay() {
const d = new Date(this.todayDate)
d.setDate(d.getDate() + 1)
this.todayDate = d
this.getTodayList()
},
getTodayList() {
const day = formatDate(this.todayDate)
const params = {
rqStart: day + 'T00:00:00',
rqEnd: day + 'T23:59:59',
pageNum: 1,
pageSize: 200
}
this.todayLoading = true
listTeachingPlan(params).then(response => {
const data = response.data || {}
this.todayList = data.records || []
this.todayLoading = false
}).catch(() => {
this.todayList = []
this.todayLoading = false
})
},
/* ---------- 本周 ---------- */
handlePrevWeek() {
const d = new Date(this.weekStart)
d.setDate(d.getDate() - 7)
this.weekStart = d
this.weekQuery.pageNum = 1
this.getWeekList()
},
handleNextWeek() {
const d = new Date(this.weekStart)
d.setDate(d.getDate() + 7)
this.weekStart = d
this.weekQuery.pageNum = 1
this.getWeekList()
},
weekRange() {
const start = formatDate(this.weekStart) + 'T00:00:00'
const endDate = new Date(this.weekStart)
endDate.setDate(endDate.getDate() + 6)
const end = formatDate(endDate) + 'T23:59:59'
return { start: start, end: end }
},
getWeekList() {
const range = this.weekRange()
const params = {
rqStart: range.start,
rqEnd: range.end,
pageNum: this.weekQuery.pageNum,
pageSize: this.weekQuery.pageSize
}
this.weekLoading = true
listTeachingPlan(params).then(response => {
const data = response.data || {}
this.weekList = data.records || []
this.weekTotal = data.total || 0
this.weekLoading = false
}).catch(() => {
this.weekList = []
this.weekTotal = 0
this.weekLoading = false
})
},
/* ---------- 三实 ---------- */
handlePrevWeek3() {
const d = new Date(this.practiceStart)
d.setDate(d.getDate() - 7)
this.practiceStart = d
this.practiceQuery.pageNum = 1
this.getPracticeList()
},
handleNextWeek3() {
const d = new Date(this.practiceStart)
d.setDate(d.getDate() + 7)
this.practiceStart = d
this.practiceQuery.pageNum = 1
this.getPracticeList()
},
practiceRange() {
const start = formatDate(this.practiceStart) + 'T00:00:00'
const endDate = new Date(this.practiceStart)
endDate.setDate(endDate.getDate() + 6)
const end = formatDate(endDate) + 'T23:59:59'
return { start: start, end: end }
},
getPracticeList() {
// 后端 plan/list 接口未返回课程类型字段,无法按三实课筛选,与本周共用同一数据源
const range = this.practiceRange()
const params = {
rqStart: range.start,
rqEnd: range.end,
pageNum: this.practiceQuery.pageNum,
pageSize: this.practiceQuery.pageSize
}
this.practiceLoading = true
listTeachingPlan(params).then(response => {
const data = response.data || {}
this.practiceList = data.records || []
this.practiceTotal = data.total || 0
this.practiceLoading = false
}).catch(() => {
this.practiceList = []
this.practiceTotal = 0
this.practiceLoading = false
})
},
/* ---------- 班次 ---------- */
loadTeamOptions() {
listTeam({ pageNum: 1, pageSize: 1000 }).then(response => {
const data = response.data || {}
this.teamOptions = data.records || []
}).catch(() => {
this.teamOptions = []
})
},
loadKbMap() {
listKb({ pageNum: 1, pageSize: 1000 }).then(response => {
const data = response.data || {}
const map = {}
;(data.records || []).forEach(item => {
if (item.kbh) map[item.kbh] = item.kmc
})
this.kbMap = map
}).catch(() => {
this.kbMap = {}
})
},
loadTeacherMap() {
listTeacher({ pageNum: 1, pageSize: 1000 }).then(response => {
const data = response.data || {}
const map = {}
;(data.records || []).forEach(item => {
if (item.jybh) map[item.jybh] = item.jyxm
})
this.teacherMap = map
}).catch(() => {
this.teacherMap = {}
})
},
handleShiftSearch() {
if (!this.shiftXydbh) {
this.$message.warning('请先选择队别班次')
return
}
this.shiftQuery.pageNum = 1
this.getShiftList()
},
getShiftList() {
const params = {
xydbh: this.shiftXydbh,
nd: this.shiftNd,
pageNum: this.shiftQuery.pageNum,
pageSize: this.shiftQuery.pageSize
}
this.shiftLoading = true
listStudentTeamTask(params).then(response => {
const data = response.data || {}
const team = this.teamOptions.find(t => t.xydbh === this.shiftXydbh)
this.shiftList = (data.records || []).map(item => ({
...item,
xydmc: (team && team.xydmc) || item.xydbh,
_kcmc: this.kbMap[item.kbh] || item.kbh,
_zrjy: this.teacherMap[item.jysjhjybh] || item.jysjhjybh || '-',
_ssjy: this.teacherMap[item.jybh] || item.jybh || '-'
}))
this.shiftTotal = data.total || 0
this.shiftLoading = false
}).catch(() => {
this.shiftList = []
this.shiftTotal = 0
this.shiftLoading = false
})
},
/* ---------- 无后端接口的操作 ---------- */
handleNotProvided() {
this.$message.info('后端暂未提供该接口')
}
}
}
</script>
<style scoped lang="scss">
.timetable-page {
.timetable-tabs {
background: #fff;
padding: 0 16px;
border: 1px solid #ebeef5;
border-radius: 6px;
}
.tab-body {
padding-bottom: 16px;
}
.mb8 {
margin-bottom: 8px;
}
/* 日期/周次导航 */
.nav-header {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-bottom: 12px;
padding: 14px 16px;
background: #fafafa;
border: 1px solid #ebeef5;
border-radius: 4px;
.nav-link {
font-size: 14px;
}
.nav-title {
font-size: 18px;
font-weight: 700;
color: #303133;
}
}
/* 表格区 */
.table-card {
.danger-text {
color: #f56c6c;
}
}
/* 班次 */
.shift-search {
margin-bottom: 8px;
}
.shift-select {
width: 220px;
}
.shift-title {
font-size: 17px;
font-weight: 700;
color: #303133;
text-align: center;
margin-bottom: 12px;
}
.sub-text {
font-size: 12px;
color: #909399;
margin-top: 2px;
}
}
</style>
@@ -1,817 +0,0 @@
<template>
<div class="page-container">
<!-- 统计卡片 -->
<div class="section-card">
<div class="section-title">调课申请统计(当前页)</div>
<div class="stat-grid">
<div
v-for="card in statCards"
:key="card.title"
class="stat-card"
:style="{ background: card.gradient }"
tabindex="0"
role="button"
@click="handleStatClick(card)"
@keydown.enter="handleStatClick(card)"
>
<span class="stat-text">{{ card.title }}</span>
<span class="stat-value">{{ card.value }}</span>
</div>
</div>
</div>
<!-- 查询条件 -->
<div class="section-card">
<el-form :model="queryParams" :inline="true" size="small" class="search-form" @submit.native.prevent>
<el-form-item label="年度">
<el-select v-model="queryParams.nd" placeholder="请选择年度" clearable style="width: 140px">
<el-option v-for="y in yearOptions" :key="y" :label="y" :value="y" />
</el-select>
</el-form-item>
<el-form-item label="申请教员编号">
<el-input v-model="queryParams.sqjybh" placeholder="请输入申请教员编号" clearable style="width: 180px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="教研室审批状态">
<el-select v-model="queryParams.jyspzzt" placeholder="请选择" clearable style="width: 150px">
<el-option v-for="item in auditStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</div>
<!-- 调课调整申请列表 -->
<div class="section-card">
<div class="section-header">
<div class="section-title">调停补课申请列表</div>
<div class="header-actions">
<el-button type="primary" plain icon="el-icon-plus" size="small" @click="openAdd">新增申请</el-button>
</div>
</div>
<el-table :data="tableData" v-loading="loading" size="small" border stripe class="compact-table" max-height="520">
<el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column prop="kcmc" label="课程名称" min-width="140" show-overflow-tooltip header-align="center" />
<el-table-column label="申请教员" min-width="110" align="center" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.sqjyxm || scope.row.sqjybh || '-' }}</template>
</el-table-column>
<el-table-column prop="sy" label="调课事由" min-width="180" show-overflow-tooltip header-align="center" />
<el-table-column label="拟调整时间" width="170" align="center" show-overflow-tooltip>
<template slot-scope="scope">{{ fmtRqJc(scope.row.rq, scope.row.jc) }}</template>
</el-table-column>
<el-table-column prop="nd" label="年度" width="80" align="center" />
<el-table-column label="教研室审批状态" width="110" align="center">
<template slot-scope="scope">
<el-tag :type="auditStatusTag(scope.row.jyspzzt).type" size="mini">{{ auditStatusTag(scope.row.jyspzzt).label }}</el-tag>
</template>
</el-table-column>
<el-table-column label="教研室查收状态" width="100" align="center">
<template slot-scope="scope">
<el-tag :type="receiveStatusTag(scope.row.jyscszt).type" size="mini">{{ receiveStatusTag(scope.row.jyscszt).label }}</el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间" width="150" align="center">
<template slot-scope="scope">{{ fmtDateTime(scope.row.cjsj) }}</template>
</el-table-column>
<el-table-column label="操作" width="210" align="center" fixed="right">
<template slot-scope="scope">
<div class="ops-cell">
<el-button type="text" size="mini" icon="el-icon-view" @click="openDetail(scope.row)">详情</el-button>
<el-dropdown v-if="showAuditMenu(scope.row)" trigger="click" @command="cmd => openAudit(scope.row, cmd)">
<el-button type="text" size="mini" @click.stop>审批<i class="el-icon-arrow-down el-icon--right" /></el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-if="scope.row.jyspzzt === 0" command="jys">教研室审批</el-dropdown-item>
<el-dropdown-item v-if="scope.row.jyspzzt === 1" command="jxx">教学系审批</el-dropdown-item>
<el-dropdown-item v-if="scope.row.jyspzzt === 1" command="jg">机关审批</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown v-if="showReceiveMenu(scope.row)" trigger="click" @command="cmd => openReceive(scope.row, cmd)">
<el-button type="text" size="mini" @click.stop>查收<i class="el-icon-arrow-down el-icon--right" /></el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-if="scope.row.jyscszt === 0" command="jys">教研室查收</el-dropdown-item>
<el-dropdown-item command="jg">机关查收</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button v-if="scope.row.sczt === 0 && scope.row.jyspzzt !== 1" type="text" size="mini" class="danger-btn" @click="handleCancel(scope.row)">撤销</el-button>
</div>
</template>
</el-table-column>
</el-table>
<el-empty v-show="!loading && tableData.length === 0" description="暂无调整申请" />
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="loadList"
/>
</div>
<!-- 新增申请弹窗 -->
<el-dialog title="新增课表调整申请" :visible.sync="addVisible" width="640px" append-to-body>
<el-form ref="addForm" :model="addForm" :rules="addRules" label-width="110px">
<el-form-item label="年度" prop="nd">
<el-select v-model="addForm.nd" placeholder="请选择年度" style="width: 100%">
<el-option v-for="y in yearOptions" :key="y" :label="y" :value="y" />
</el-select>
</el-form-item>
<el-form-item label="课次编号" prop="sskcbbh">
<el-input v-model="addForm.sskcbbh" placeholder="请输入课次编号" />
<el-button type="primary" plain size="mini" class="pick-lesson-btn" :loading="lessonLoading" @click="loadAdjustableLessons">选择可供调课课次</el-button>
</el-form-item>
<el-form-item label="调课事由" prop="sy">
<el-input v-model="addForm.sy" type="textarea" :rows="2" placeholder="请输入调课事由" />
</el-form-item>
<el-form-item label="拟调整日期" prop="rq">
<el-date-picker v-model="addForm.rq" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期" style="width: 100%" />
</el-form-item>
<el-form-item label="拟调整节次" prop="jc">
<el-select v-model="addForm.jc" placeholder="请选择节次" style="width: 100%">
<el-option v-for="n in jcOptions" :key="n" :label="jcLabel(n)" :value="n" />
</el-select>
</el-form-item>
<el-form-item label="申请教员编号" prop="sqjybh">
<el-input v-model="addForm.sqjybh" placeholder="请输入申请教员编号" />
</el-form-item>
<el-form-item label="教学内容">
<el-input v-model="addForm.jxnr" placeholder="选填" />
</el-form-item>
<el-form-item label="教学要点">
<el-input v-model="addForm.jxyd" placeholder="选填" />
</el-form-item>
<el-form-item label="教学方法">
<el-input v-model="addForm.jxff" placeholder="选填" />
</el-form-item>
<el-form-item label="教学保障备注">
<el-input v-model="addForm.jxbzbz" placeholder="选填" />
</el-form-item>
<el-form-item label="用车信息">
<el-input v-model="addForm.ycxx" placeholder="选填" />
</el-form-item>
<el-form-item label="备注">
<el-input v-model="addForm.bz" type="textarea" :rows="2" placeholder="选填" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" :loading="addLoading" @click="submitAdd">提交申请</el-button>
<el-button @click="addVisible = false">取消</el-button>
</div>
</el-dialog>
<!-- 可供调课课次选择弹窗 -->
<el-dialog title="选择可供调课课次" :visible.sync="lessonDialogVisible" width="760px" append-to-body>
<el-table :data="lessonOptions" v-loading="lessonLoading" size="small" border stripe max-height="420">
<el-table-column prop="kcmc" label="课程名称" min-width="140" show-overflow-tooltip header-align="center" />
<el-table-column label="原上课时间" width="160" align="center">
<template slot-scope="scope">{{ fmtRqJc(scope.row.rq, scope.row.jc) }}</template>
</el-table-column>
<el-table-column prop="xydmc" label="学员队" min-width="120" show-overflow-tooltip header-align="center" />
<el-table-column prop="kcxh" label="课次序号" width="90" align="center" />
<el-table-column prop="jsbh" label="教室编号" width="110" show-overflow-tooltip header-align="center" />
<el-table-column label="操作" width="90" align="center">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="pickLesson(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table>
<el-empty v-show="!lessonLoading && lessonOptions.length === 0" description="暂无可供调课课次" />
</el-dialog>
<!-- 审批弹窗 -->
<el-dialog :title="auditTitle" :visible.sync="auditVisible" width="520px" append-to-body>
<el-form ref="auditForm" :model="auditForm" label-width="100px">
<el-form-item label="审批结果" required>
<el-radio-group v-model="auditForm.spzt">
<el-radio :label="1">同意</el-radio>
<el-radio :label="2">发回</el-radio>
<el-radio :label="3">拒绝</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="审批意见">
<el-input v-model="auditForm.fhyj" type="textarea" :rows="3" placeholder="请输入审批意见(发回/拒绝时必填)" />
</el-form-item>
<el-form-item label="审批人编号" required>
<el-input v-model="auditForm.sprbh" placeholder="请输入审批人编号" />
</el-form-item>
<el-form-item v-if="auditForm.auditRole === 'jg'" label="机关编号" required>
<el-input v-model="auditForm.jgbh" placeholder="请输入机关编号" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" :loading="auditLoading" @click="submitAudit">确定</el-button>
<el-button @click="auditVisible = false">取消</el-button>
</div>
</el-dialog>
<!-- 查收弹窗 -->
<el-dialog :title="receiveTitle" :visible.sync="receiveVisible" width="460px" append-to-body>
<el-form ref="receiveForm" :model="receiveForm" label-width="100px">
<el-form-item v-if="receiveForm.type === 'jg'" label="机关编号" required>
<el-input v-model="receiveForm.jgbh" placeholder="请输入机关编号" />
</el-form-item>
<el-form-item label="查收人编号" required>
<el-input v-model="receiveForm.csrbh" placeholder="请输入查收人编号" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" :loading="receiveLoading" @click="submitReceive">确定</el-button>
<el-button @click="receiveVisible = false">取消</el-button>
</div>
</el-dialog>
<!-- 查看详情弹窗 -->
<el-dialog title="申请详情" :visible.sync="detailVisible" width="760px" append-to-body>
<div v-loading="detailLoading">
<el-descriptions v-if="detailData" :column="2" border size="small">
<el-descriptions-item label="课程名称">{{ detailData.kcmc || '-' }}</el-descriptions-item>
<el-descriptions-item label="申请教员">{{ detailData.sqjyxm || detailData.sqjybh || '-' }}</el-descriptions-item>
<el-descriptions-item label="调课事由" :span="2">{{ detailData.sy || '-' }}</el-descriptions-item>
<el-descriptions-item label="拟调整时间">{{ fmtRqJc(detailData.rq, detailData.jc) }}</el-descriptions-item>
<el-descriptions-item label="年度">{{ detailData.nd || '-' }}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ fmtDateTime(detailData.cjsj) }}</el-descriptions-item>
<el-descriptions-item label="教研室审批状态">
<el-tag :type="auditStatusTag(detailData.jyspzzt).type" size="mini">{{ auditStatusTag(detailData.jyspzzt).label }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="教研室查收状态">
<el-tag :type="receiveStatusTag(detailData.jyscszt).type" size="mini">{{ receiveStatusTag(detailData.jyscszt).label }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="教研室审批人">{{ detailData.jyspzrbh || '-' }}</el-descriptions-item>
<el-descriptions-item label="教研室审批时间">{{ fmtDateTime(detailData.jyspzsj) }}</el-descriptions-item>
<el-descriptions-item label="教研室查收人">{{ detailData.jyscsrbh || '-' }}</el-descriptions-item>
<el-descriptions-item label="教研室查收时间">{{ fmtDateTime(detailData.jyscssj) }}</el-descriptions-item>
<el-descriptions-item label="发回意见" :span="2">{{ detailData.fhyj || '-' }}</el-descriptions-item>
<el-descriptions-item label="教学内容" :span="2">{{ detailData.jxnr || '-' }}</el-descriptions-item>
<el-descriptions-item label="教学要点" :span="2">{{ detailData.jxyd || '-' }}</el-descriptions-item>
<el-descriptions-item label="教学方法" :span="2">{{ detailData.jxff || '-' }}</el-descriptions-item>
<el-descriptions-item label="教学保障备注" :span="2">{{ detailData.jxbzbz || '-' }}</el-descriptions-item>
<el-descriptions-item label="用车信息" :span="2">{{ detailData.ycxx || '-' }}</el-descriptions-item>
<el-descriptions-item label="备注" :span="2">{{ detailData.bz || '-' }}</el-descriptions-item>
</el-descriptions>
<!-- 新教室 -->
<div v-if="detailData && detailData.roomList && detailData.roomList.length" class="sub-section">
<div class="sub-title">新教室</div>
<el-table :data="detailData.roomList" size="small" border stripe>
<el-table-column prop="jsbh" label="教室编号" min-width="120" show-overflow-tooltip header-align="center" />
<el-table-column prop="jsmc" label="教室名称" min-width="140" show-overflow-tooltip header-align="center" />
<el-table-column prop="bz" label="备注" min-width="160" show-overflow-tooltip header-align="center" />
</el-table>
</div>
<!-- 新辅助教员 -->
<div v-if="detailData && detailData.teacherList && detailData.teacherList.length" class="sub-section">
<div class="sub-title">新辅助教员</div>
<el-table :data="detailData.teacherList" size="small" border stripe>
<el-table-column prop="fzjybh" label="教员编号" min-width="120" show-overflow-tooltip header-align="center" />
<el-table-column prop="fzjyxm" label="教员姓名" min-width="120" show-overflow-tooltip header-align="center" />
<el-table-column label="是否主教员" width="100" align="center">
<template slot-scope="scope">{{ scope.row.zjy === 1 ? '是' : '否' }}</template>
</el-table-column>
<el-table-column prop="bz" label="备注" min-width="140" show-overflow-tooltip header-align="center" />
</el-table>
</div>
<!-- 新学员队 -->
<div v-if="detailData && detailData.teamList && detailData.teamList.length" class="sub-section">
<div class="sub-title">新学员队</div>
<el-table :data="detailData.teamList" size="small" border stripe>
<el-table-column prop="xydbh" label="学员队编号" min-width="140" show-overflow-tooltip header-align="center" />
<el-table-column prop="xydmc" label="学员队名称" min-width="140" show-overflow-tooltip header-align="center" />
</el-table>
</div>
<!-- 新保障明细 -->
<div v-if="detailData && detailData.supportList && detailData.supportList.length" class="sub-section">
<div class="sub-title">新保障明细</div>
<el-table :data="detailData.supportList" size="small" border stripe>
<el-table-column prop="bztgmxbh" label="保障编号" min-width="140" show-overflow-tooltip header-align="center" />
<el-table-column prop="bztgmxmc" label="保障名称" min-width="160" show-overflow-tooltip header-align="center" />
<el-table-column prop="sl" label="数量" width="80" align="center" />
<el-table-column prop="bz" label="备注" min-width="140" show-overflow-tooltip header-align="center" />
</el-table>
</div>
<!-- 机关审批记录 -->
<div v-if="detailData && detailData.auditList && detailData.auditList.length" class="sub-section">
<div class="sub-title">机关审批记录</div>
<el-table :data="detailData.auditList" size="small" border stripe>
<el-table-column prop="jgmc" label="机关" min-width="140" show-overflow-tooltip header-align="center">
<template slot-scope="scope">{{ scope.row.jgmc || scope.row.jgbh || '-' }}</template>
</el-table-column>
<el-table-column label="审批状态" width="100" align="center">
<template slot-scope="scope">
<el-tag :type="auditStatusTag(scope.row.spzt).type" size="mini">{{ auditStatusTag(scope.row.spzt).label }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="sprxm" label="审批人" min-width="110" show-overflow-tooltip header-align="center">
<template slot-scope="scope">{{ scope.row.sprxm || scope.row.sprbh || '-' }}</template>
</el-table-column>
<el-table-column label="审批时间" width="150" align="center">
<template slot-scope="scope">{{ fmtDateTime(scope.row.spsj) }}</template>
</el-table-column>
<el-table-column prop="fhyj" label="发回意见" min-width="140" show-overflow-tooltip header-align="center" />
</el-table>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="detailVisible = false">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listScheduleAdjust,
listAdjustableLessons,
getScheduleAdjustDetail,
submitScheduleAdjust,
auditByTeachingOffice,
auditByTeachingDepartment,
auditByAuthority,
receiveByTeachingOffice,
receiveByAuthority,
cancelScheduleAdjust
} from '@/api/teachBusiness/courseRunning'
import { listAllSemester } from '@/api/teachBusiness/semester'
// 节次 -> 节次区间映射
const JC_SECTION = {
1: '1-2节', 2: '3-4节', 3: '5-6节', 4: '7-8节', 5: '9-10节', 6: '11-12节'
}
// 审批状态:0-未审批,1-已同意,2-已发回,3-已拒绝
const AUDIT_STATUS = {
0: { label: '未审批', type: 'info' },
1: { label: '已同意', type: 'success' },
2: { label: '已发回', type: 'warning' },
3: { label: '已拒绝', type: 'danger' }
}
// 查收状态:0-未查收,1-已查收
const RECEIVE_STATUS = {
0: { label: '未查收', type: 'info' },
1: { label: '已查收', type: 'success' }
}
export default {
name: 'TimetableAdjust',
data() {
const curUserName = (this.$store.state.user && this.$store.state.user.name) || ''
return {
curUserName: curUserName,
loading: false,
tableData: [],
total: 0,
queryParams: {
nd: undefined,
sqjybh: undefined,
jyspzzt: undefined,
pageNum: 1,
pageSize: 20
},
// 年度下拉数据来自 /semester/all(真实后端数据)
yearOptions: [],
defaultNd: undefined,
jcOptions: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
auditStatusOptions: [
{ label: '未审批', value: 0 },
{ label: '已同意', value: 1 },
{ label: '已发回', value: 2 },
{ label: '已拒绝', value: 3 }
],
statCards: [],
// 新增申请
addVisible: false,
addLoading: false,
addForm: {},
addRules: {
nd: [{ required: true, message: '请选择年度', trigger: 'change' }],
sskcbbh: [{ required: true, message: '请输入课次编号', trigger: 'blur' }],
sy: [{ required: true, message: '请输入调课事由', trigger: 'blur' }],
rq: [{ required: true, message: '请选择拟调整日期', trigger: 'change' }],
jc: [{ required: true, message: '请选择拟调整节次', trigger: 'change' }],
sqjybh: [{ required: true, message: '请输入申请教员编号', trigger: 'blur' }]
},
// 可供调课课次
lessonDialogVisible: false,
lessonLoading: false,
lessonOptions: [],
// 审批
auditVisible: false,
auditLoading: false,
auditTitle: '审批',
auditForm: { ssdksqbh: '', auditRole: 'jys', spzt: 1, fhyj: '', sprbh: '', jgbh: '' },
// 查收
receiveVisible: false,
receiveLoading: false,
receiveTitle: '查收',
receiveForm: { ssdksqbh: '', type: 'jys', csrbh: '', jgbh: '' },
// 详情
detailVisible: false,
detailLoading: false,
detailData: null
}
},
created() {
this.loadYearOptions().then(() => this.loadList())
},
methods: {
/* ---------- 年度下拉(数据来自 /semester/all) ---------- */
loadYearOptions() {
return listAllSemester().then(response => {
const list = response.data || []
// 去重并按年度倒序
const map = {}
list.forEach(item => {
if (item.nd !== null && item.nd !== undefined && item.nd !== '') map[item.nd] = item
})
const arr = Object.keys(map).sort((a, b) => String(b).localeCompare(String(a)))
this.yearOptions = arr
// 默认年度:优先当前学期(dqxq=true),否则取最新年度
const current = list.find(item => item.dqxq === true)
this.defaultNd = (current && current.nd) || arr[0]
if (!this.queryParams.nd) this.queryParams.nd = this.defaultNd
return arr
}).catch(() => {
this.yearOptions = []
this.defaultNd = undefined
return []
})
},
/* ---------- 通用格式化 ---------- */
fmtDateTime(v) {
if (!v) return '-'
return String(v).replace('T', ' ').substring(0, 16)
},
fmtRqJc(rq, jc) {
if (!rq) return '-'
const date = String(rq).substring(0, 10)
const sec = jc === null || jc === undefined || jc === '' ? '第?节' : (JC_SECTION[jc] || '第' + jc + '节')
return date + ' ' + sec
},
jcLabel(n) {
return JC_SECTION[n] || ('第' + n + '节')
},
auditStatusTag(v) {
return AUDIT_STATUS[v] || { label: '-', type: 'info' }
},
receiveStatusTag(v) {
return RECEIVE_STATUS[v] || { label: '-', type: 'info' }
},
/* ---------- 列表查询 ---------- */
loadList() {
const params = {
pageNum: this.queryParams.pageNum,
pageSize: this.queryParams.pageSize
}
if (this.queryParams.nd) params.nd = this.queryParams.nd
if (this.queryParams.sqjybh) params.sqjybh = this.queryParams.sqjybh
if (this.queryParams.jyspzzt !== undefined && this.queryParams.jyspzzt !== '') {
params.jyspzzt = this.queryParams.jyspzzt
}
this.loading = true
listScheduleAdjust(params).then(response => {
const data = response.data || {}
this.tableData = data.records || []
this.total = data.total || 0
this.refreshStatCards()
this.loading = false
}).catch(() => {
this.tableData = []
this.total = 0
this.refreshStatCards()
this.loading = false
})
},
handleQuery() {
this.queryParams.pageNum = 1
this.loadList()
},
resetQuery() {
this.queryParams = {
nd: this.defaultNd,
sqjybh: undefined,
jyspzzt: undefined,
pageNum: 1,
pageSize: 20
}
this.loadList()
},
refreshStatCards() {
const list = this.tableData
this.statCards = [
{ title: '本页申请', value: list.length, gradient: 'linear-gradient(135deg, #00875a 0%, #00b877 100%)', filter: undefined },
{ title: '教研室待审批', value: list.filter(i => i.jyspzzt === 0).length, gradient: 'linear-gradient(135deg, #e6a23c 0%, #f8b04c 100%)', filter: 0 },
{ title: '教研室已同意', value: list.filter(i => i.jyspzzt === 1).length, gradient: 'linear-gradient(135deg, #409eff 0%, #66b1ff 100%)', filter: 1 },
{ title: '教研室已拒绝', value: list.filter(i => i.jyspzzt === 3).length, gradient: 'linear-gradient(135deg, #f56c6c 0%, #f78989 100%)', filter: 3 }
]
},
handleStatClick(card) {
if (card.filter === undefined) return
this.queryParams.jyspzzt = this.queryParams.jyspzzt === card.filter ? undefined : card.filter
this.handleQuery()
},
/* ---------- 新增申请 ---------- */
openAdd() {
this.addForm = {
nd: this.defaultNd || this.yearOptions[0],
sskcbbh: '',
sy: '',
rq: '',
jc: 1,
sqjybh: this.curUserName,
jxnr: '',
jxyd: '',
jxff: '',
jxbzbz: '',
ycxx: '',
bz: ''
}
this.$nextTick(() => this.$refs.addForm && this.$refs.addForm.clearValidate())
this.addVisible = true
},
loadAdjustableLessons() {
if (!this.addForm.nd) {
this.$message.warning('请先选择年度')
return
}
this.lessonLoading = true
listAdjustableLessons({ nd: this.addForm.nd }).then(response => {
this.lessonOptions = response.data || []
this.lessonLoading = false
this.lessonDialogVisible = true
}).catch(() => {
this.lessonLoading = false
this.$message.info('后端暂未提供可供调课课次接口,请手动填写课次编号')
})
},
pickLesson(row) {
this.addForm.sskcbbh = row.sskcbbh
this.lessonDialogVisible = false
this.$message.success('已选择课次:' + (row.kcmc || row.sskcbbh))
},
submitAdd() {
this.$refs.addForm.validate(valid => {
if (!valid) return
const payload = {
sskcbbh: this.addForm.sskcbbh,
sy: this.addForm.sy,
rq: this.addForm.rq + 'T00:00:00',
jc: this.addForm.jc,
nd: this.addForm.nd,
sqjybh: this.addForm.sqjybh
}
;['jxnr', 'jxyd', 'jxff', 'jxbzbz', 'ycxx', 'bz'].forEach(key => {
if (this.addForm[key]) payload[key] = this.addForm[key]
})
this.addLoading = true
submitScheduleAdjust(payload).then(() => {
this.addLoading = false
this.addVisible = false
this.$message.success('申请提交成功')
this.loadList()
}).catch(() => {
this.addLoading = false
})
})
},
/* ---------- 审批 ---------- */
showAuditMenu(row) {
return row.sczt === 0 && (row.jyspzzt === 0 || row.jyspzzt === 1)
},
openAudit(row, role) {
const titleMap = { jys: '教研室审批', jxx: '教学系审批', jg: '机关审批' }
this.auditTitle = titleMap[role] || '审批'
this.auditForm = {
ssdksqbh: row.ssdksqbh,
auditRole: role,
spzt: 1,
fhyj: '',
sprbh: this.curUserName,
jgbh: ''
}
this.auditVisible = true
},
submitAudit() {
const f = this.auditForm
if (!f.sprbh) {
this.$message.warning('请填写审批人编号')
return
}
if (f.auditRole === 'jg' && !f.jgbh) {
this.$message.warning('请填写机关编号')
return
}
const payload = {
ssdksqbh: f.ssdksqbh,
auditRole: f.auditRole,
spzt: f.spzt,
fhyj: f.fhyj,
sprbh: f.sprbh
}
if (f.jgbh) payload.jgbh = f.jgbh
const apiMap = {
jys: auditByTeachingOffice,
jxx: auditByTeachingDepartment,
jg: auditByAuthority
}
this.auditLoading = true
apiMap[f.auditRole](payload).then(() => {
this.auditLoading = false
this.auditVisible = false
this.$message.success('审批成功')
this.loadList()
}).catch(() => {
this.auditLoading = false
})
},
/* ---------- 查收 ---------- */
showReceiveMenu(row) {
return row.sczt === 0 && row.jyspzzt === 1
},
openReceive(row, type) {
this.receiveTitle = type === 'jys' ? '教研室查收' : '机关查收'
this.receiveForm = {
ssdksqbh: row.ssdksqbh,
type: type,
csrbh: this.curUserName,
jgbh: ''
}
this.receiveVisible = true
},
submitReceive() {
const f = this.receiveForm
if (!f.csrbh) {
this.$message.warning('请填写查收人编号')
return
}
if (f.type === 'jg' && !f.jgbh) {
this.$message.warning('请填写机关编号')
return
}
const params = { ssdksqbh: f.ssdksqbh, csrbh: f.csrbh }
if (f.jgbh) params.jgbh = f.jgbh
const api = f.type === 'jys' ? receiveByTeachingOffice : receiveByAuthority
this.receiveLoading = true
api(params).then(() => {
this.receiveLoading = false
this.receiveVisible = false
this.$message.success('查收成功')
this.loadList()
}).catch(() => {
this.receiveLoading = false
})
},
/* ---------- 撤销 ---------- */
handleCancel(row) {
this.$confirm('确认撤销该调课申请?撤销后课次将恢复原时间。', '提示', { type: 'warning' })
.then(() => {
cancelScheduleAdjust({ ssdksqbh: row.ssdksqbh, sqjybh: row.sqjybh }).then(() => {
this.$message.success('撤销成功')
this.loadList()
}).catch(() => {})
})
.catch(() => {})
},
/* ---------- 详情 ---------- */
openDetail(row) {
this.detailVisible = true
this.detailLoading = true
this.detailData = null
getScheduleAdjustDetail(row.ssdksqbh).then(response => {
this.detailData = response.data || {}
this.detailLoading = false
}).catch(() => {
this.detailData = null
this.detailLoading = false
})
}
}
}
</script>
<style scoped lang="scss">
.page-container {
padding: 16px;
.section-card {
background: #fff;
border: 1px solid #ebeef5;
border-radius: 6px;
padding: 16px 20px;
margin-bottom: 16px;
.section-title {
font-size: 16px;
font-weight: 700;
color: #303133;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
.header-actions {
display: flex;
align-items: center;
gap: 12px;
}
}
}
/* 统计卡片 */
.stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 14px;
}
.stat-card {
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px 20px;
border-radius: 6px;
color: #fff;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
&:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.stat-text {
font-size: 13px;
opacity: 0.92;
}
.stat-value {
margin-top: 8px;
font-size: 26px;
font-weight: 700;
line-height: 1;
}
}
/* 查询区域 */
.search-form {
margin-bottom: -16px;
::v-deep .el-form-item {
margin-bottom: 16px;
}
}
.compact-table {
width: 100%;
}
.danger-btn {
color: #f56c6c;
&:hover {
color: #f78989;
}
}
.ops-cell {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0 4px;
}
.pick-lesson-btn {
margin-top: 6px;
width: 100%;
}
.sub-section {
margin-top: 16px;
.sub-title {
font-size: 14px;
font-weight: 700;
color: #303133;
margin-bottom: 8px;
}
}
}
@media (max-width: 992px) {
.page-container .stat-grid {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
@@ -1,417 +0,0 @@
<template>
<div class="app-container conflict-page">
<!-- 冲突检查区域 -->
<div class="section-card">
<div class="section-header">
<div>
<div class="section-title">教学资源冲突检查</div>
<div class="section-desc">当前检查年度:{{ nd ? nd + ' 年' : '未选择' }},可单独检查或执行全部检查</div>
</div>
<div class="header-actions">
<el-form inline class="toolbar-form" @submit.native.prevent>
<el-form-item label="年度" class="year-item">
<el-select v-model="nd" placeholder="请选择年度" style="width: 130px" @change="handleNdChange">
<el-option v-for="y in yearOptions" :key="y" :label="y + ' 年'" :value="y" />
</el-select>
</el-form-item>
</el-form>
<el-button size="mini" :disabled="loading" @click="handleReset">重置</el-button>
<el-button type="primary" size="mini" :loading="loading" @click="handleCheckAll">执行全部检查</el-button>
</div>
</div>
<!-- 检查项卡片网格 -->
<div class="check-grid">
<div
v-for="item in conflictItems"
:key="item.key"
class="check-item-card"
:class="{ active: activeKey === item.key }"
@click="selectCard(item)"
>
<div class="check-item-header">
<span class="check-item-name">{{ item.label }}</span>
<el-tag :type="getStatus(item).type" size="mini">{{ getStatus(item).text }}</el-tag>
</div>
<div class="check-item-desc">{{ item.desc }}</div>
<div class="check-item-footer">
<span class="conflict-count">
冲突数:
<b :class="item.count > 0 ? 'danger-text' : 'normal-text'">{{ item.count }}</b>
</span>
<el-button type="primary" plain size="mini" :disabled="loading" @click.stop="handleCheck(item)">检查</el-button>
</div>
</div>
</div>
</div>
<!-- 冲突明细区域 -->
<div class="section-card">
<div class="section-header detail-header">
<div class="section-title">
冲突明细
<span v-if="activeKey" class="active-label">— {{ activeLabel }}</span>
</div>
<span v-if="activeKey" class="detail-count">共 {{ detailTotal }} 条记录</span>
</div>
<template v-if="activeKey">
<el-table v-loading="detailLoading" :data="activeDetails" border stripe size="mini" max-height="500">
<el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column label="冲突号" width="90" align="center" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.conflictNo || '-' }}</template>
</el-table-column>
<el-table-column prop="courseNames" label="课程" min-width="150" show-overflow-tooltip header-align="center" />
<el-table-column label="日期" width="100" align="center">
<template slot-scope="scope">{{ fmtDate(scope.row.rq) }}</template>
</el-table-column>
<el-table-column prop="jc" label="节次" width="70" align="center" />
<el-table-column prop="xydNames" label="班次" min-width="140" show-overflow-tooltip header-align="center" />
<el-table-column prop="teacherNames" label="教员" min-width="120" show-overflow-tooltip header-align="center" />
<el-table-column prop="classroomNames" label="场地" min-width="140" show-overflow-tooltip header-align="center" />
<el-table-column prop="responsibleDept" label="责任单位" min-width="110" show-overflow-tooltip header-align="center" />
</el-table>
<el-pagination
v-if="detailTotal > 0"
class="detail-pagination"
background
layout="total, prev, pager, next"
:current-page="detailQuery.pageNum"
:page-size="detailQuery.pageSize"
:total="detailTotal"
@current-change="handlePageChange"
/>
<el-empty v-if="detailTotal === 0 && !detailLoading" description="暂无冲突明细" />
</template>
<el-empty v-else v-show="!loading" description="点击上方卡片「检查」按钮,在此查看冲突明细" />
</div>
</div>
</template>
<script>
import { checkConflict, checkAllConflict, resetConflict, getConflictDetails } from '@/api/teachBusiness/timetableConflict'
import { listAllSemester } from '@/api/teachBusiness/semester'
// 四类检查卡片定义(标题/描述与后端 TimetableConflictDimension 枚举一致,作为页面布局常量;
// 检查状态与冲突数完全来自后端接口)
const CARD_DEFS = [
{ key: 'TEAM_CONFLICT', label: '教学班时间冲突检查', desc: '同一教学班次在同一时间段被安排多门课程' },
{ key: 'ELECTIVE_REQUIRED_CONFLICT', label: '教学班必修与选修时间冲突检查', desc: '教学班次必修课与选修课时间重叠' },
{ key: 'TEACHER_CONFLICT', label: '教员时间冲突检查', desc: '同一教员在同一时间段被安排多门课程' },
{ key: 'CLASSROOM_CONFLICT', label: '教室时间冲突检查', desc: '同一教室在同一时间段被多门课程占用' }
]
export default {
name: 'TimetableConflict',
data() {
return {
loading: false,
detailLoading: false,
// 年度(数据来自 /semester/all,真实后端数据)
nd: undefined,
yearOptions: [],
conflictItems: CARD_DEFS.map(c => ({ ...c, count: 0, checked: false })),
activeKey: '',
activeDetails: [],
detailTotal: 0,
detailQuery: { pageNum: 1, pageSize: 20 }
}
},
computed: {
activeLabel() {
const item = this.conflictItems.find(i => i.key === this.activeKey)
return item ? item.label : ''
}
},
created() {
this.loadYearOptions()
},
methods: {
/* ---------- 年度下拉(数据来自 /semester/all) ---------- */
loadYearOptions() {
return listAllSemester().then(response => {
const list = response.data || []
// 去重并按年度倒序
const map = {}
list.forEach(item => {
if (item.nd !== null && item.nd !== undefined && item.nd !== '') map[item.nd] = item
})
const arr = Object.keys(map).sort((a, b) => String(b).localeCompare(String(a)))
this.yearOptions = arr
// 默认年度:优先当前学期(dqxq=true),否则取最新年度
const current = list.find(item => item.dqxq === true)
this.nd = (current && current.nd) || arr[0]
return arr
}).catch(() => {
this.yearOptions = []
this.nd = undefined
return []
})
},
fmtDate(rq) {
return (rq || '').substring(0, 10)
},
getStatus(item) {
if (!item.checked) return { type: 'info', text: '未检查' }
return item.count > 0
? { type: 'danger', text: '存在 ' + item.count + ' 处冲突' }
: { type: 'success', text: '无冲突' }
},
/* 用后端返回的单卡片结果同步对应卡片状态 */
applyCard(card) {
if (!card) return
const item = this.conflictItems.find(i => i.key === card.dimensionCode)
if (!item) return
item.checked = card.checked
item.count = card.conflictCount
},
applySummary(summary) {
if (!summary || !summary.cards) return
summary.cards.forEach(card => this.applyCard(card))
},
/* ---------- 单个检查 ---------- */
handleCheck(item) {
if (!this.nd) {
this.$message.warning('请先选择年度')
return
}
this.loading = true
checkConflict({ nd: this.nd, dimensionCode: item.key }).then(response => {
this.applyCard(response.data)
this.activeKey = item.key
this.detailQuery.pageNum = 1
this.loadDetails()
if (item.count > 0) {
this.$message.warning('「' + item.label + '」检查完成,发现 ' + item.count + ' 处冲突')
} else {
this.$message.success('「' + item.label + '」检查完成,未发现冲突')
}
}).finally(() => {
this.loading = false
})
},
/* ---------- 全部检查 ---------- */
handleCheckAll() {
if (!this.nd) {
this.$message.warning('请先选择年度')
return
}
this.loading = true
checkAllConflict({ nd: this.nd }).then(response => {
const summary = response.data
this.applySummary(summary)
const total = summary ? summary.totalConflictCount : 0
this.$message.success('全部检查完成,共发现 ' + total + ' 处冲突')
const firstConflict = this.conflictItems.find(i => i.checked && i.count > 0)
const firstChecked = this.conflictItems.find(i => i.checked)
this.activeKey = firstConflict ? firstConflict.key : (firstChecked ? firstChecked.key : '')
this.detailQuery.pageNum = 1
if (this.activeKey) {
this.loadDetails()
} else {
this.activeDetails = []
this.detailTotal = 0
}
}).finally(() => {
this.loading = false
})
},
/* ---------- 重置 ---------- */
handleReset() {
if (!this.nd) {
this.$message.warning('请先选择年度')
return
}
resetConflict({ nd: this.nd }).then(response => {
this.applySummary(response.data)
this.activeKey = ''
this.activeDetails = []
this.detailTotal = 0
this.$message.success('检查结果已重置')
})
},
/* 点击卡片:仅已检查的卡片可查看其明细 */
selectCard(item) {
if (!item.checked) return
this.activeKey = item.key
this.detailQuery.pageNum = 1
this.loadDetails()
},
/* ---------- 冲突明细 ---------- */
loadDetails() {
if (!this.activeKey) {
this.activeDetails = []
this.detailTotal = 0
return
}
this.detailLoading = true
getConflictDetails({
nd: this.nd,
dimensionCode: this.activeKey,
pageNum: this.detailQuery.pageNum,
pageSize: this.detailQuery.pageSize
}).then(response => {
const page = response.data || {}
this.activeDetails = page.records || []
this.detailTotal = page.total || 0
}).catch(() => {
this.activeDetails = []
this.detailTotal = 0
}).finally(() => {
this.detailLoading = false
})
},
handlePageChange(page) {
this.detailQuery.pageNum = page
this.loadDetails()
},
/* 切换年度:该年度检查状态未知,重置为未检查 */
handleNdChange() {
this.conflictItems.forEach(i => {
i.checked = false
i.count = 0
})
this.activeKey = ''
this.activeDetails = []
this.detailTotal = 0
this.detailQuery.pageNum = 1
}
}
}
</script>
<style scoped lang="scss">
.conflict-page {
.section-card {
background: #fff;
border: 1px solid #ebeef5;
border-radius: 6px;
padding: 16px 20px;
margin-bottom: 16px;
.section-title {
font-size: 16px;
font-weight: 700;
color: #303133;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
.header-actions {
display: flex;
align-items: center;
gap: 12px;
.toolbar-form {
margin-right: 4px;
.year-item {
margin-bottom: 0;
}
}
}
}
.section-desc {
margin-top: 8px;
font-size: 13px;
color: #909399;
}
.detail-header {
margin-bottom: 12px;
}
}
/* 检查项卡片网格 */
.check-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.check-item-card {
border: 1px solid #ebeef5;
border-radius: 6px;
padding: 14px 16px;
transition: box-shadow 0.2s ease;
cursor: pointer;
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
&.active {
border-color: var(--edu-green-primary, #00875a);
box-shadow: 0 0 0 2px rgba(0, 135, 90, 0.15);
}
.check-item-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
.check-item-name {
font-size: 14px;
font-weight: 600;
color: #303133;
}
}
.check-item-desc {
margin-top: 8px;
font-size: 12px;
color: #909399;
line-height: 1.5;
}
.check-item-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12px;
.conflict-count {
font-size: 13px;
color: #606266;
b {
font-size: 18px;
}
}
}
}
.danger-text {
color: #f56c6c;
font-weight: 700;
}
.normal-text {
color: #67c23a;
font-weight: 700;
}
.active-label {
font-size: 14px;
font-weight: 400;
color: var(--edu-green-primary, #00875a);
}
.detail-count {
font-size: 13px;
color: #909399;
}
.detail-pagination {
margin-top: 12px;
text-align: right;
}
}
</style>
@@ -1,598 +0,0 @@
<template>
<div class="app-container training-plan-page">
<!-- ==================== 1. 查询条件区域 ==================== -->
<el-card shadow="never" class="search-card">
<el-form :model="searchForm" label-width="100px" class="search-form" @submit.native.prevent>
<el-row :gutter="24">
<el-col :xs="24" :md="8">
<el-form-item label="专业名称">
<el-input v-model="searchForm.zymc" placeholder="请输入专业名称(模糊)" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :md="8">
<el-form-item label="专业代码">
<el-input v-model="searchForm.zydm" placeholder="请输入专业代码(模糊)" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :md="8">
<el-form-item label="培训类型">
<el-input v-model="searchForm.pxlx" placeholder="请输入培训类型(精确)" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :md="8">
<el-form-item label="培训层次">
<el-input v-model="searchForm.pxcc" placeholder="请输入培训层次(精确)" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :md="8">
<div class="search-actions">
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
</div>
</el-col>
</el-row>
</el-form>
</el-card>
<!-- ==================== 2. 操作与上传区域 ==================== -->
<el-card shadow="never" class="action-card">
<div class="action-row">
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建</el-button>
<el-button icon="el-icon-download" @click="handleDownload">下载</el-button>
</div>
<div class="action-row">
<el-button icon="el-icon-download" @click="handleTemplateDownload">【人才培养方案目录模板】下载</el-button>
</div>
<div class="upload-row">
<div class="upload-left">
<el-button icon="el-icon-folder-opened" @click="handleChooseFile">选择文件</el-button>
<span class="file-name" :class="{ 'has-file': selectedFile }">
<template v-if="selectedFile">{{ fileName }}</template>
<template v-else>请选择要上传的文件</template>
</span>
<input ref="fileInputRef" type="file" style="display: none" @change="handleFileChange" />
</div>
<div class="upload-right">
<el-button type="primary" icon="el-icon-upload2" :disabled="!selectedFile" @click="handleUpload">上传数据</el-button>
</div>
</div>
</el-card>
<!-- ==================== 3. 数据表格区域 ==================== -->
<el-card shadow="never" class="table-card">
<div class="list-header">
<div class="list-title">人才培养方案列表</div>
</div>
<el-table v-loading="loading" :data="tableData" border stripe highlight-current-row>
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column prop="zydh" label="专业代号" min-width="120" show-overflow-tooltip header-align="center" />
<el-table-column prop="zymc" label="专业名称" min-width="140" show-overflow-tooltip header-align="center" />
<el-table-column prop="zyfx" label="专业方向" min-width="120" show-overflow-tooltip header-align="center" />
<el-table-column prop="zydm" label="专业代码" min-width="110" show-overflow-tooltip header-align="center" />
<el-table-column prop="pxlx" label="培训类型" min-width="110" show-overflow-tooltip header-align="center" />
<el-table-column prop="pxcc" label="培训层次" min-width="120" show-overflow-tooltip header-align="center" />
<el-table-column prop="pxlx2" label="培训类型2" min-width="110" show-overflow-tooltip header-align="center" />
<el-table-column prop="xylb" label="学员类别" min-width="100" show-overflow-tooltip header-align="center" />
<el-table-column prop="xnz" label="学年制" min-width="80" show-overflow-tooltip header-align="center" />
<el-table-column prop="xqs" label="学期数" width="80" align="center" />
<el-table-column prop="zybb" label="专业版本" min-width="100" show-overflow-tooltip header-align="center" />
<el-table-column label="主干专业" width="90" align="center">
<template slot-scope="scope">{{ fmtYesNo(scope.row.zgzy) }}</template>
</el-table-column>
<el-table-column label="状态" width="80" align="center">
<template slot-scope="scope">
<el-tag :type="isTrue(scope.row.ty) ? 'danger' : 'success'" size="mini">
{{ isTrue(scope.row.ty) ? '停用' : '启用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="启用时间" width="150" align="center">
<template slot-scope="scope">{{ fmtDateTime(scope.row.qysj) }}</template>
</el-table-column>
<el-table-column label="停用时间" width="150" align="center">
<template slot-scope="scope">{{ fmtDateTime(scope.row.tysj) }}</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center" fixed="right">
<template slot-scope="scope">
<el-button type="text" size="mini" icon="el-icon-view" @click="handleDetail(scope.row)">详情</el-button>
<el-button type="text" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" size="mini" icon="el-icon-circle-close" class="danger-text-btn"
:disabled="isTrue(scope.row.ty)" @click="handleDisable(scope.row)">停用</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagination"
background
layout="total, sizes, prev, pager, next, jumper"
:current-page="pageNum"
:page-size="pageSize"
:total="total"
:page-sizes="[10, 20, 50, 100]"
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
</el-card>
<!-- 新增/编辑弹窗 -->
<el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="860px" append-to-body
:close-on-click-modal="false">
<el-form ref="trainingForm" :model="dialog.form" :rules="rules" label-width="130px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="专业代号" prop="zydh">
<el-input v-model="dialog.form.zydh" placeholder="请输入专业代号(主键)" :disabled="dialog.isEdit" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="专业名称" prop="zymc">
<el-input v-model="dialog.form.zymc" placeholder="请输入专业名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="专业代码" prop="zydm">
<el-input v-model="dialog.form.zydm" placeholder="请输入专业代码" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="专业方向">
<el-input v-model="dialog.form.zyfx" placeholder="请输入专业方向" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="培训层次" prop="pxcc">
<el-input v-model="dialog.form.pxcc" placeholder="请输入培训层次" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="培训类型" prop="pxlx">
<el-input v-model="dialog.form.pxlx" placeholder="请输入培训类型" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="培训类型2">
<el-input v-model="dialog.form.pxlx2" placeholder="请输入培训类型2" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="学员类别">
<el-input v-model="dialog.form.xylb" placeholder="请输入学员类别" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="学年制">
<el-input v-model="dialog.form.xnz" placeholder="请输入学年制" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="学期数">
<el-input-number v-model="dialog.form.xqs" :min="1" :max="20" controls-position="right" class="w-full" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="专业版本">
<el-input v-model="dialog.form.zybb" placeholder="请输入专业版本" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="自定义分类">
<el-input v-model="dialog.form.zdyfl" placeholder="请输入自定义分类" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="教学管理机构编号">
<el-input v-model="dialog.form.jxgljgbh" placeholder="请输入教学管理机构编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="规范名称">
<el-input v-model="dialog.form.gfmc" placeholder="请输入规范名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="专业规范">
<el-input v-model="dialog.form.zygf" placeholder="请输入专业规范" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="简称">
<el-input v-model="dialog.form.jc" placeholder="请输入简称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主干专业">
<el-radio-group v-model="dialog.form.zgzy">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="专业备注">
<el-input v-model="dialog.form.zybz" placeholder="请输入专业备注" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="培养目标">
<el-input v-model="dialog.form.pymb" type="textarea" :rows="3" placeholder="请输入培养目标" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialog.visible = false">取 消</el-button>
<el-button type="primary" :loading="dialog.submitting" @click="submitDialog">确 定</el-button>
</div>
</el-dialog>
<!-- 详情弹窗 -->
<el-dialog title="人才培养方案详情" :visible.sync="detail.visible" width="760px" append-to-body
:close-on-click-modal="false">
<div v-loading="detail.loading" class="detail-body">
<el-descriptions :column="2" border>
<el-descriptions-item label="专业代号">{{ fmtVal(detail.data.zydh) }}</el-descriptions-item>
<el-descriptions-item label="专业名称">{{ fmtVal(detail.data.zymc) }}</el-descriptions-item>
<el-descriptions-item label="专业代码">{{ fmtVal(detail.data.zydm) }}</el-descriptions-item>
<el-descriptions-item label="专业方向">{{ fmtVal(detail.data.zyfx) }}</el-descriptions-item>
<el-descriptions-item label="培训类型">{{ fmtVal(detail.data.pxlx) }}</el-descriptions-item>
<el-descriptions-item label="培训层次">{{ fmtVal(detail.data.pxcc) }}</el-descriptions-item>
<el-descriptions-item label="培训类型2">{{ fmtVal(detail.data.pxlx2) }}</el-descriptions-item>
<el-descriptions-item label="学员类别">{{ fmtVal(detail.data.xylb) }}</el-descriptions-item>
<el-descriptions-item label="学年制">{{ fmtVal(detail.data.xnz) }}</el-descriptions-item>
<el-descriptions-item label="学期数">{{ fmtVal(detail.data.xqs) }}</el-descriptions-item>
<el-descriptions-item label="专业版本">{{ fmtVal(detail.data.zybb) }}</el-descriptions-item>
<el-descriptions-item label="主干专业">{{ fmtYesNo(detail.data.zgzy) }}</el-descriptions-item>
<el-descriptions-item label="自定义分类">{{ fmtVal(detail.data.zdyfl) }}</el-descriptions-item>
<el-descriptions-item label="教学管理机构编号">{{ fmtVal(detail.data.jxgljgbh) }}</el-descriptions-item>
<el-descriptions-item label="规范名称">{{ fmtVal(detail.data.gfmc) }}</el-descriptions-item>
<el-descriptions-item label="专业规范">{{ fmtVal(detail.data.zygf) }}</el-descriptions-item>
<el-descriptions-item label="简称">{{ fmtVal(detail.data.jc) }}</el-descriptions-item>
<el-descriptions-item label="专业标识号">{{ fmtVal(detail.data.zybsh) }}</el-descriptions-item>
<el-descriptions-item label="学科专业信息标识号">{{ fmtVal(detail.data.xkzyxxbsh) }}</el-descriptions-item>
<el-descriptions-item label="教学大纲编号">{{ fmtVal(detail.data.jxdgbh) }}</el-descriptions-item>
<el-descriptions-item label="人培编号">{{ fmtVal(detail.data.rpbh) }}</el-descriptions-item>
<el-descriptions-item label="节次类别">{{ fmtVal(detail.data.jclb) }}</el-descriptions-item>
<el-descriptions-item label="系统模式">{{ fmtVal(detail.data.xtms) }}</el-descriptions-item>
<el-descriptions-item label="启用时间">{{ fmtDateTime(detail.data.qysj) }}</el-descriptions-item>
<el-descriptions-item label="停用时间">{{ fmtDateTime(detail.data.tysj) }}</el-descriptions-item>
<el-descriptions-item label="专业备注" :span="2">{{ fmtVal(detail.data.zybz) }}</el-descriptions-item>
<el-descriptions-item label="培养目标" :span="2">{{ fmtVal(detail.data.pymb) }}</el-descriptions-item>
</el-descriptions>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="detail.visible = false">关 闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
addTraining,
disableTraining,
updateTraining,
getTraining,
listTraining
} from '@/api/teachBusiness/training'
export default {
name: 'TrainingPlan',
data() {
return {
loading: false,
// 查询条件(仅传后端 ZYBMapper 支持的字段)
searchForm: {
zymc: '',
zydm: '',
pxlx: '',
pxcc: ''
},
// 列表
tableData: [],
total: 0,
pageNum: 1,
pageSize: 20,
// 上传
selectedFile: null,
fileName: '',
// 新增/编辑弹窗
dialog: {
visible: false,
title: '',
isEdit: false,
submitting: false,
form: this.createEmptyForm()
},
// 详情弹窗
detail: {
visible: false,
loading: false,
data: {}
},
rules: {
zydh: [{ required: true, message: '请输入专业代号', trigger: 'blur' }],
zymc: [{ required: true, message: '请输入专业名称', trigger: 'blur' }],
zydm: [{ required: true, message: '请输入专业代码', trigger: 'blur' }],
pxcc: [{ required: true, message: '请输入培训层次', trigger: 'blur' }],
pxlx: [{ required: true, message: '请输入培训类型', trigger: 'blur' }]
}
}
},
created() {
this.fetchList()
},
methods: {
/* ---------- 列表加载 ---------- */
fetchList() {
this.loading = true
const params = {
pageNum: this.pageNum,
pageSize: this.pageSize
}
Object.keys(this.searchForm).forEach(key => {
const value = this.searchForm[key]
if (value !== '' && value !== null && value !== undefined) {
params[key] = value
}
})
listTraining(params).then(response => {
const data = response.data || {}
this.tableData = data.records || []
this.total = data.total || 0
}).catch(() => {
this.tableData = []
this.total = 0
}).finally(() => {
this.loading = false
})
},
/* ---------- 查询 / 重置 ---------- */
handleQuery() {
this.pageNum = 1
this.fetchList()
},
handleReset() {
this.searchForm = { zymc: '', zydm: '', pxlx: '', pxcc: '' }
this.pageNum = 1
this.fetchList()
},
/* ---------- 分页 ---------- */
handleSizeChange(size) {
this.pageSize = size
this.pageNum = 1
this.fetchList()
},
handlePageChange(page) {
this.pageNum = page
this.fetchList()
},
/* ---------- 新增 / 编辑 ---------- */
handleAdd() {
this.dialog.title = '新建人才培养方案'
this.dialog.isEdit = false
this.dialog.form = this.createEmptyForm()
this.dialog.visible = true
this.$nextTick(() => {
if (this.$refs.trainingForm) this.$refs.trainingForm.clearValidate()
})
},
handleEdit(row) {
this.dialog.title = '编辑人才培养方案'
this.dialog.isEdit = true
this.dialog.form = Object.assign({}, this.createEmptyForm(), row)
this.dialog.visible = true
this.$nextTick(() => {
if (this.$refs.trainingForm) this.$refs.trainingForm.clearValidate()
})
},
submitDialog() {
this.$refs.trainingForm.validate(valid => {
if (!valid) return
this.dialog.submitting = true
const payload = this.cleanPayload(this.dialog.form)
const isEdit = this.dialog.isEdit
const req = isEdit ? updateTraining(payload) : addTraining(payload)
req.then(() => {
this.$message.success(isEdit ? '修改成功' : '新增成功')
this.dialog.visible = false
this.fetchList()
}).catch(() => {}).finally(() => {
this.dialog.submitting = false
})
})
},
/* ---------- 详情 ---------- */
handleDetail(row) {
this.detail.visible = true
this.detail.loading = true
this.detail.data = {}
getTraining(row.zydh).then(response => {
this.detail.data = response.data || {}
}).catch(() => {
this.detail.data = {}
}).finally(() => {
this.detail.loading = false
})
},
/* ---------- 停用(逻辑删除) ---------- */
handleDisable(row) {
this.$confirm('确定停用人才培养方案「' + (row.zymc || row.zydh) + '」吗?停用后列表不再展示。', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return disableTraining(row.zydh)
}).then(() => {
this.$message.success('停用成功')
this.fetchList()
}).catch(() => {})
},
/* ---------- 下载 / 模板下载 / 上传(后端未提供接口) ---------- */
handleDownload() {
this.$message.warning('后端暂未提供该接口')
},
handleTemplateDownload() {
this.$message.warning('后端暂未提供该接口')
},
handleChooseFile() {
this.$refs.fileInputRef && this.$refs.fileInputRef.click()
},
handleFileChange(e) {
const file = e.target.files && e.target.files[0]
this.selectedFile = file || null
this.fileName = file ? file.name : ''
},
handleUpload() {
this.$message.warning('后端暂未提供该接口')
},
/* ---------- 工具 ---------- */
createEmptyForm() {
return {
zydh: '',
zymc: '',
zyfx: '',
zydm: '',
pxcc: '',
pxlx: '',
pxlx2: '',
xylb: '',
xnz: '',
xqs: null,
zybb: '',
zdyfl: '',
jxgljgbh: '',
gfmc: '',
zygf: '',
jc: '',
zgzy: false,
zybz: '',
pymb: ''
}
},
/** 移除空值(''/null/undefined),保留 0/false 等有效值 */
cleanPayload(obj) {
const payload = {}
Object.keys(obj).forEach(key => {
const value = obj[key]
if (value !== '' && value !== null && value !== undefined) {
payload[key] = value
}
})
return payload
},
isTrue(val) {
return val === true || val === 1 || val === '1' || val === 'true'
},
fmtYesNo(val) {
return this.isTrue(val) ? '是' : '否'
},
fmtDateTime(val) {
return (val || '').substring(0, 19) || '-'
},
fmtVal(val) {
return val === '' || val === null || val === undefined ? '-' : val
}
}
}
</script>
<style scoped lang="scss">
.app-container {
padding: 20px;
}
.training-plan-page {
.search-card {
margin-bottom: 16px;
.search-form {
.w-full {
width: 100%;
}
.search-actions {
padding-top: 4px;
}
}
}
.action-card {
margin-bottom: 16px;
.action-row {
margin-bottom: 12px;
&:last-of-type {
margin-bottom: 0;
}
}
.upload-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 12px;
background: #fafafa;
border: 1px dashed #dcdfe6;
border-radius: 4px;
.upload-left {
display: flex;
align-items: center;
gap: 12px;
.file-name {
font-size: 13px;
color: #909399;
&.has-file {
color: #409eff;
}
}
}
}
}
.table-card {
.list-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
.list-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
}
.pagination {
margin-top: 16px;
text-align: right;
}
}
.detail-body {
min-height: 60px;
}
}
.danger-text-btn {
color: #f56c6c;
&:hover {
color: #f78989;
}
}
</style>
@@ -1,444 +0,0 @@
<template>
<div class="app-container venue-page">
<!-- 查询条件 -->
<el-card shadow="never" class="search-card">
<el-form :model="searchForm" label-width="100px" class="search-form" @submit.native.prevent>
<el-row :gutter="24">
<el-col :xs="24" :md="8">
<el-form-item label="教室编号">
<el-input v-model="searchForm.jsbh" placeholder="请输入教室编号" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :md="8">
<el-form-item label="教室名称">
<el-input v-model="searchForm.jsmc" placeholder="请输入教室名称" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :md="8">
<el-form-item label="教学楼代号">
<el-input v-model="searchForm.jxldh" placeholder="请输入教学楼代号" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :md="8">
<el-form-item label="教学场地类型">
<el-select v-model="searchForm.jxcdlx" placeholder="请选择场地类型" clearable filterable allow-create
default-first-option class="w-full">
<el-option v-for="item in jxcdlxOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :md="8">
<el-form-item label="停用">
<el-select v-model="searchForm.ty" placeholder="全部" clearable class="w-full">
<el-option :value="true" label="停用" />
<el-option :value="false" label="正常" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :md="8">
<div class="search-actions">
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
</div>
</el-col>
</el-row>
</el-form>
</el-card>
<!-- 数据列表 -->
<el-card shadow="never" class="table-card">
<div class="list-header">
<div class="list-title">教室列表</div>
<div class="list-actions">
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
</div>
</div>
<el-table v-loading="loading" :data="tableData" border stripe highlight-current-row>
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column prop="jsbh" label="教室编号" min-width="120" show-overflow-tooltip header-align="center" />
<el-table-column prop="jsmc" label="教室名称" min-width="140" show-overflow-tooltip header-align="center" />
<el-table-column prop="jxldh" label="教学楼代号" min-width="110" show-overflow-tooltip header-align="center" />
<el-table-column prop="jxcdlx" label="教学场地类型" min-width="120" show-overflow-tooltip header-align="center" />
<el-table-column prop="jc" label="简称" min-width="90" show-overflow-tooltip header-align="center" />
<el-table-column prop="rnrs" label="容纳人数" width="90" align="center" />
<el-table-column prop="mj" label="面积" width="90" align="center" />
<el-table-column prop="ksrnrs" label="考试容纳人数" width="110" align="center" />
<el-table-column prop="ewyxkbs" label="额外可开班数" width="100" align="center" />
<el-table-column label="虚实类型" width="90" align="center">
<template slot-scope="scope">{{ fmtXslx(scope.row.xslx) }}</template>
</el-table-column>
<el-table-column label="停用" width="80" align="center">
<template slot-scope="scope">
<el-tag :type="isTrue(scope.row.ty) ? 'danger' : 'success'" size="mini">
{{ isTrue(scope.row.ty) ? '停用' : '正常' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="sssb" label="设施设备" min-width="140" show-overflow-tooltip header-align="center" />
<el-table-column label="操作" width="140" align="center" fixed="right">
<template slot-scope="scope">
<el-button type="text" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" size="mini" icon="el-icon-delete" class="danger-text-btn" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagination"
background
layout="total, sizes, prev, pager, next"
:current-page="pageNum"
:page-size="pageSize"
:total="total"
:page-sizes="[10, 20, 50, 100]"
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
</el-card>
<!-- 新增/编辑弹窗 -->
<el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="780px" append-to-body
:close-on-click-modal="false">
<el-form ref="classroomForm" :model="dialog.form" :rules="rules" label-width="110px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="主键编号" prop="id">
<el-input v-model="dialog.form.id" placeholder="请输入主键编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="教室编号" prop="jsbh">
<el-input v-model="dialog.form.jsbh" placeholder="请输入教室编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="教室名称" prop="jsmc">
<el-input v-model="dialog.form.jsmc" placeholder="请输入教室名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="教学楼代号">
<el-input v-model="dialog.form.jxldh" placeholder="请输入教学楼代号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="教学场地类型">
<el-select v-model="dialog.form.jxcdlx" placeholder="请选择场地类型" clearable filterable allow-create
default-first-option class="w-full">
<el-option v-for="item in jxcdlxOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="简称">
<el-input v-model="dialog.form.jc" placeholder="请输入简称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="容纳人数">
<el-input-number v-model="dialog.form.rnrs" :min="0" controls-position="right" class="w-full" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="面积">
<el-input-number v-model="dialog.form.mj" :min="0" :precision="1" controls-position="right" class="w-full" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="考试容纳人数">
<el-input-number v-model="dialog.form.ksrnrs" :min="0" controls-position="right" class="w-full" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="额外可开班数">
<el-input-number v-model="dialog.form.ewyxkbs" :min="0" controls-position="right" class="w-full" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="序号">
<el-input v-model="dialog.form.xh" placeholder="请输入序号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="拼音">
<el-input v-model="dialog.form.py" placeholder="请输入拼音" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="虚实类型">
<el-radio-group v-model="dialog.form.xslx">
<el-radio :label="true">实教</el-radio>
<el-radio :label="false">非实教</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="停用">
<el-radio-group v-model="dialog.form.ty">
<el-radio :label="false">正常</el-radio>
<el-radio :label="true">停用</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设施设备">
<el-input v-model="dialog.form.sssb" placeholder="请输入设施设备" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注">
<el-input v-model="dialog.form.bz" type="textarea" :rows="2" placeholder="请输入备注" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialog.visible = false">取 消</el-button>
<el-button type="primary" :loading="dialog.submitting" @click="submitDialog">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
addClassroom,
deleteClassroom,
updateClassroom,
listClassroom
} from '@/api/teachBusiness/classroom'
export default {
name: 'Venue',
data() {
return {
loading: false,
searchForm: {
jsbh: '',
jsmc: '',
jxldh: '',
jxcdlx: '',
ty: ''
},
tableData: [],
total: 0,
pageNum: 1,
pageSize: 20,
dialog: {
visible: false,
title: '',
submitting: false,
form: this.createEmptyForm()
},
rules: {
id: [{ required: true, message: '请输入主键编号', trigger: 'blur' }],
jsbh: [{ required: true, message: '请输入教室编号', trigger: 'blur' }],
jsmc: [{ required: true, message: '请输入教室名称', trigger: 'blur' }]
}
}
},
computed: {
/** 教学场地类型下拉:由已加载数据中的去重值动态生成,避免硬编码 */
jxcdlxOptions() {
const set = new Set()
this.tableData.forEach(row => {
if (row.jxcdlx) set.add(row.jxcdlx)
})
return Array.from(set)
}
},
created() {
this.fetchList()
},
methods: {
/* ---------- 列表加载 ---------- */
fetchList() {
this.loading = true
const params = {
pageNum: this.pageNum,
pageSize: this.pageSize
}
Object.keys(this.searchForm).forEach(key => {
const value = this.searchForm[key]
if (value !== '' && value !== null && value !== undefined) {
params[key] = value
}
})
listClassroom(params).then(response => {
const data = response.data || {}
this.tableData = data.records || []
this.total = data.total || 0
}).catch(() => {
this.tableData = []
this.total = 0
}).finally(() => {
this.loading = false
})
},
/* ---------- 查询 / 重置 ---------- */
handleQuery() {
this.pageNum = 1
this.fetchList()
},
handleReset() {
this.searchForm = {
jsbh: '',
jsmc: '',
jxldh: '',
jxcdlx: '',
ty: ''
}
this.pageNum = 1
this.fetchList()
},
/* ---------- 分页 ---------- */
handleSizeChange(size) {
this.pageSize = size
this.pageNum = 1
this.fetchList()
},
handlePageChange(page) {
this.pageNum = page
this.fetchList()
},
/* ---------- 新增 / 编辑 ---------- */
handleAdd() {
this.dialog.title = '新增教室'
this.dialog.form = this.createEmptyForm()
this.dialog.visible = true
this.$nextTick(() => {
if (this.$refs.classroomForm) this.$refs.classroomForm.clearValidate()
})
},
handleEdit(row) {
this.dialog.title = '编辑教室'
this.dialog.form = Object.assign({}, this.createEmptyForm(), row)
this.dialog.visible = true
this.$nextTick(() => {
if (this.$refs.classroomForm) this.$refs.classroomForm.clearValidate()
})
},
submitDialog() {
this.$refs.classroomForm.validate(valid => {
if (!valid) return
this.dialog.submitting = true
const payload = this.cleanPayload(this.dialog.form)
const isEdit = !!payload.id
const req = isEdit ? updateClassroom(payload) : addClassroom(payload)
req.then(() => {
this.$message.success(isEdit ? '修改成功' : '新增成功')
this.dialog.visible = false
this.fetchList()
}).catch(() => {}).finally(() => {
this.dialog.submitting = false
})
})
},
/* ---------- 删除(后端仅提供单条删除,参数为 id) ---------- */
handleDelete(row) {
this.$confirm('确定删除教室「' + (row.jsmc || row.jsbh) + '」吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return deleteClassroom(row.id)
}).then(() => {
this.$message.success('删除成功')
this.fetchList()
}).catch(() => {})
},
/* ---------- 工具 ---------- */
createEmptyForm() {
return {
id: '',
jsbh: '',
jsmc: '',
jxldh: '',
jxcdlx: '',
jc: '',
rnrs: null,
mj: null,
ksrnrs: null,
ewyxkbs: null,
xh: '',
py: '',
xslx: false,
ty: false,
sssb: '',
bz: ''
}
},
/** 移除空值(''/null/undefined),保留 0/false 等有效值 */
cleanPayload(obj) {
const payload = {}
Object.keys(obj).forEach(key => {
const value = obj[key]
if (value !== '' && value !== null && value !== undefined) {
payload[key] = value
}
})
return payload
},
isTrue(val) {
return val === true || val === 1 || val === '1' || val === 'true'
},
fmtXslx(val) {
return this.isTrue(val) ? '实教' : '非实教'
}
}
}
</script>
<style scoped lang="scss">
.app-container {
padding: 20px;
}
.venue-page {
.search-card {
margin-bottom: 16px;
.search-form {
.w-full {
width: 100%;
}
.search-actions {
padding-top: 4px;
}
}
}
.table-card {
.list-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
.list-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
}
.pagination {
margin-top: 16px;
text-align: right;
}
}
}
.danger-text-btn {
color: #f56c6c;
&:hover {
color: #f78989;
}
}
</style>