样式变更

This commit is contained in:
2026-08-25 14:16:12 +08:00
parent 7bfc19c4f4
commit 656ee817e6
4 changed files with 86 additions and 72 deletions
@@ -18,7 +18,7 @@
<div class="sce-panel-row"> <div class="sce-panel-row">
<span class="sce-label">事件名称:</span> <span class="sce-label">事件名称:</span>
<el-input v-model="toolbar.eventName" size="small" class="sce-event-input" placeholder="请输入校历事件名称" /> <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.bold" class="sce-cb">加粗显示</el-checkbox>
<el-checkbox v-model="toolbar.schedulable" 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.mainCourse" class="sce-cb">正课</el-checkbox>
<el-checkbox v-model="toolbar.remarkShow" class="sce-cb">备注显示</el-checkbox> <el-checkbox v-model="toolbar.remarkShow" class="sce-cb">备注显示</el-checkbox>
@@ -74,18 +74,8 @@
:data-key="cellKey(wIdx, col.colIndex)" :data-key="cellKey(wIdx, col.colIndex)"
@dblclick="onCellDblClick(wIdx, col)" @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-if="getEvent(wIdx, col.colIndex)" class="sce-event-name" :class="{ 'is-bold': getEvent(wIdx, col.colIndex).bold }">{{ getEvent(wIdx, col.colIndex).name }}</span>
<span v-else class="sce-date-num">{{ dateNumberOf(wIdx, col.dayIndex) }}</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> </td>
</tr> </tr>
</tbody> </tbody>
@@ -147,8 +137,6 @@ export default {
totalWeeks: 0, totalWeeks: 0,
dateRangeText: '', dateRangeText: '',
weeks: [], weeks: [],
// 加粗显示:全局开关,勾选后所有有事件的格子事件名加粗(纯前端效果,不持久化)
boldDisplay: false,
// 显示开关(默认不勾选,每天仅显示 1-2/3-4/5-6 三个节次) // 显示开关(默认不勾选,每天仅显示 1-2/3-4/5-6 三个节次)
show78: false, show78: false,
showNight: false, showNight: false,
@@ -156,6 +144,7 @@ export default {
// 工具栏表单 // 工具栏表单
toolbar: { toolbar: {
eventName: '', eventName: '',
bold: false,
schedulable: false, schedulable: false,
mainCourse: false, mainCourse: false,
remarkShow: false, remarkShow: false,
@@ -163,6 +152,8 @@ export default {
}, },
// 事件存储:key = cellKey -> event // 事件存储:key = cellKey -> event
events: {}, events: {},
// 暂存被隐藏节次列上的事件:key = 周-星期-节次 -> event,列再次显示时恢复
hiddenEvents: {},
// 选择集(用数组以保证 Vue2 响应式) // 选择集(用数组以保证 Vue2 响应式)
selectedKeys: [], selectedKeys: [],
// 拖拽状态 // 拖拽状态
@@ -188,6 +179,10 @@ export default {
}) })
}) })
return cols return cols
},
// xqxlb 的年度(nd)为年份(如 2026),由 6 位学期代号(如 202601)截取前 4 位得出
xqxlbNd() {
return Number(String(this.nd).slice(0, 4))
} }
}, },
watch: { watch: {
@@ -197,7 +192,43 @@ export default {
if (val) this.loadSemester() if (val) this.loadSemester()
} }
}, },
visibleColumns() { visibleColumns(newCols, oldCols) {
// 节次列显隐会改变列索引,按「周期-星期-节次」重定位事件,避免事件随时间格列偏移
if (oldCols && oldCols.length) {
const oldPosOf = index => (oldCols[index] || null)
const newIndex = (dayIndex, slotKey) => {
const c = newCols.find(x => x.dayIndex === dayIndex && x.slotKey === slotKey)
return c ? c.colIndex : -1
}
const next = {}
Object.keys(this.events).forEach(key => {
const m = key.match(/^w(\d+)-c(\d+)$/)
if (!m) return
const wIdx = +m[1]
const old = oldPosOf(+m[2])
if (!old) return
const newC = newIndex(old.dayIndex, old.slotKey)
if (newC < 0) {
// 该节次列被隐藏:事件暂存,待列再次显示时恢复
this.hiddenEvents[this.cellStableKey(wIdx, old.dayIndex, old.slotKey)] = this.events[key]
return
}
next['w' + wIdx + '-c' + newC] = this.events[key]
})
// 恢复重新显示的隐藏节次事件
Object.keys(this.hiddenEvents).forEach(stable => {
const p = stable.split('-')
const wIdx = +p[0]
const dayIndex = +p[1]
const slotKey = p[2]
const newC = newIndex(dayIndex, slotKey)
if (newC >= 0) {
next['w' + wIdx + '-c' + newC] = this.hiddenEvents[stable]
delete this.hiddenEvents[stable]
}
})
this.events = next
}
// 列变化后清空无效选择(列索引含义会变) // 列变化后清空无效选择(列索引含义会变)
this.selectedKeys = [] this.selectedKeys = []
} }
@@ -225,9 +256,9 @@ export default {
this.$message.warning('学期详情获取失败,请确认学期数据') this.$message.warning('学期详情获取失败,请确认学期数据')
}) })
}, },
// 从后端拉取本学期校历假期,渲染到对应时间格(nd 为 6 位学期代号,如 202601 // 从后端拉取本学期校历事件,渲染到对应时间格(年度由 6 位学期代号截取前 4 位
loadXqxlbEvents() { loadXqxlbEvents() {
listXqxlb({ nd: this.nd }).then(res => { listXqxlb({ nd: this.xqxlbNd }).then(res => {
const data = res.data const data = res.data
const list = Array.isArray(data) ? data : (data && data.records) || [] const list = Array.isArray(data) ? data : (data && data.records) || []
return list return list
@@ -235,15 +266,22 @@ export default {
const loaded = {} const loaded = {}
list.forEach(item => { list.forEach(item => {
const pos = this.locateXqxlb(item) const pos = this.locateXqxlb(item)
if (pos) { if (!pos) return
loaded[pos.key] = { const ev = {
bh: item.bh, bh: item.bh,
name: item.jqmc || '', name: item.jqmc || '',
bold: !!item.jc,
schedulable: !!item.kpk, schedulable: !!item.kpk,
mainCourse: !!item.zdpk, mainCourse: !!item.zdpk,
remarkShow: !!item.bzxs, remarkShow: !!item.bzxs,
remark: item.bz || '' remark: item.bz || ''
} }
const colIndex = this.colIndexOf(pos.dayIndex, pos.slotKey)
if (colIndex >= 0) {
loaded[this.cellKey(pos.wIdx, colIndex)] = ev
} else {
// 该节次列当前隐藏:暂存(含 bh),待列显示时由 visibleColumns 监听恢复
this.hiddenEvents[this.cellStableKey(pos.wIdx, pos.dayIndex, pos.slotKey)] = ev
} }
}) })
// 合并到现有格子(后端数据覆盖已有状态) // 合并到现有格子(后端数据覆盖已有状态)
@@ -252,7 +290,7 @@ export default {
this.$message.warning('校历事件加载失败') this.$message.warning('校历事件加载失败')
}) })
}, },
// 根据假期记录反推时间格 keyjqsj 日期 + courseClass 节次) // 根据假期记录反推时间格位置jqsj 日期 + courseClass 节次),与列是否可见无关
locateXqxlb(item) { locateXqxlb(item) {
if (!this.startDate || !item.jqsj) return null if (!this.startDate || !item.jqsj) return null
const d = new Date(String(item.jqsj).slice(0, 10).replace(/-/g, '/')) const d = new Date(String(item.jqsj).slice(0, 10).replace(/-/g, '/'))
@@ -263,9 +301,7 @@ export default {
const dayIndex = offset % 7 const dayIndex = offset % 7
const slotKey = this.courseClassToSlotKey(item.courseClass) const slotKey = this.courseClassToSlotKey(item.courseClass)
if (slotKey === null) return null if (slotKey === null) return null
const colIndex = this.colIndexOf(dayIndex, slotKey) return { wIdx, dayIndex, slotKey }
if (colIndex < 0) return null
return { key: this.cellKey(wIdx, colIndex) }
}, },
// 后端 courseClass 节次范围 -> 前端节次 key // 后端 courseClass 节次范围 -> 前端节次 key
courseClassToSlotKey(courseClass) { courseClassToSlotKey(courseClass) {
@@ -307,6 +343,10 @@ export default {
cellKey(wIdx, colIndex) { cellKey(wIdx, colIndex) {
return 'w' + wIdx + '-c' + colIndex return 'w' + wIdx + '-c' + colIndex
}, },
// 稳定的单元格身份:不随列显隐变化的周-星期-节次
cellStableKey(wIdx, dayIndex, slotKey) {
return wIdx + '-' + dayIndex + '-' + slotKey
},
getEvent(wIdx, colIndex) { getEvent(wIdx, colIndex) {
return this.events[this.cellKey(wIdx, colIndex)] || null return this.events[this.cellKey(wIdx, colIndex)] || null
}, },
@@ -437,6 +477,7 @@ export default {
this.$set(this.events, key, { this.$set(this.events, key, {
bh: prev ? prev.bh : undefined, bh: prev ? prev.bh : undefined,
name: name, name: name,
bold: this.toolbar.bold,
schedulable: this.toolbar.schedulable, schedulable: this.toolbar.schedulable,
mainCourse: this.toolbar.mainCourse, mainCourse: this.toolbar.mainCourse,
remarkShow: this.toolbar.remarkShow, remarkShow: this.toolbar.remarkShow,
@@ -467,6 +508,7 @@ export default {
return return
} }
this.toolbar.eventName = target.name this.toolbar.eventName = target.name
this.toolbar.bold = !!target.bold
this.toolbar.schedulable = !!target.schedulable this.toolbar.schedulable = !!target.schedulable
this.toolbar.mainCourse = !!target.mainCourse this.toolbar.mainCourse = !!target.mainCourse
this.toolbar.remarkShow = !!target.remarkShow this.toolbar.remarkShow = !!target.remarkShow
@@ -477,6 +519,7 @@ export default {
const ev = this.getEvent(wIdx, col.colIndex) const ev = this.getEvent(wIdx, col.colIndex)
if (ev) { if (ev) {
this.toolbar.eventName = ev.name this.toolbar.eventName = ev.name
this.toolbar.bold = !!ev.bold
this.toolbar.schedulable = !!ev.schedulable this.toolbar.schedulable = !!ev.schedulable
this.toolbar.mainCourse = !!ev.mainCourse this.toolbar.mainCourse = !!ev.mainCourse
this.toolbar.remarkShow = !!ev.remarkShow this.toolbar.remarkShow = !!ev.remarkShow
@@ -489,6 +532,7 @@ export default {
this.selectedKeys = [] this.selectedKeys = []
this.absorbPreview = '' this.absorbPreview = ''
this.events = {} this.events = {}
this.hiddenEvents = {}
this.loadXqxlbEvents() this.loadXqxlbEvents()
this.$message.info('已刷新') this.$message.info('已刷新')
}, },
@@ -526,10 +570,10 @@ export default {
return { return {
delFlag: 0, delFlag: 0,
bh: ev.bh || undefined, bh: ev.bh || undefined,
nd: this.nd, nd: this.xqxlbNd,
jqsj: fmtDate(d), jqsj: fmtDate(d),
jqmc: ev.name || '', jqmc: ev.name || '',
jc: null, jc: !!ev.bold,
bz: ev.remark || null, bz: ev.remark || null,
kpk: !!ev.schedulable, kpk: !!ev.schedulable,
bzxs: !!ev.remarkShow, bzxs: !!ev.remarkShow,
@@ -694,16 +738,6 @@ export default {
background: #d4ecdf !important; 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 { .sce-status {
@@ -42,16 +42,6 @@
> >
<template v-if="getEvent(wIdx, col.colIndex)"> <template v-if="getEvent(wIdx, col.colIndex)">
<span class="cal-event-name">{{ getEvent(wIdx, col.colIndex).name }}</span> <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> </template>
<span v-else-if="showDate" class="cal-date-num">{{ dateNumberOf(wIdx, col.dayIndex) }}</span> <span v-else-if="showDate" class="cal-date-num">{{ dateNumberOf(wIdx, col.dayIndex) }}</span>
</td> </td>
@@ -199,9 +189,9 @@ export default {
this.$message.warning('学期详情获取失败,请确认学期数据') this.$message.warning('学期详情获取失败,请确认学期数据')
}) })
}, },
// 从后端拉取本学期校历假期,渲染到对应时间格(nd 为 6 位学期代号,如 202601 // 从后端拉取本学期校历事件,渲染到对应时间格(年度为 6 位学期代号截取前 4 位
loadXqxlbEvents() { loadXqxlbEvents() {
listXqxlb({ nd: this.nd }).then(res => { listXqxlb({ nd: String(this.nd).slice(0, 4) }).then(res => {
const data = res.data const data = res.data
const list = Array.isArray(data) ? data : (data && data.records) || [] const list = Array.isArray(data) ? data : (data && data.records) || []
const loaded = {} const loaded = {}
@@ -485,16 +475,6 @@ export default {
&.has-event .cal-event-name { color: #00663e; font-weight: 500; } &.has-event .cal-event-name { color: #00663e; font-weight: 500; }
&.no-schedule { background: #fde2e2; } &.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; }
} }
/* 底部状态栏 */ /* 底部状态栏 */
@@ -68,7 +68,7 @@
<el-table-column label="停用时间" width="150" align="center"> <el-table-column label="停用时间" width="150" align="center">
<template slot-scope="scope">{{ fmtDateTime(scope.row.tysj) }}</template> <template slot-scope="scope">{{ fmtDateTime(scope.row.tysj) }}</template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="140" align="center" fixed="right"> <el-table-column label="操作" width="160" align="center" fixed="right">
<template slot-scope="scope"> <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-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> <el-button type="text" size="mini" icon="el-icon-delete" class="danger-text-btn" @click="handleDelete(scope.row)">删除</el-button>
@@ -50,8 +50,8 @@
<span>无数据</span> <span>无数据</span>
</template> </template>
<el-table-column type="index" label="序号" width="70" align="center" /> <el-table-column type="index" label="序号" width="70" align="center" />
<el-table-column prop="rwmc" label="任务名称" min-width="180" align="left" header-align="center" show-overflow-tooltip /> <el-table-column prop="rwmc" label="任务名称" width="250" align="left" header-align="center" show-overflow-tooltip />
<el-table-column prop="nd" label="年度" width="90" align="center" /> <el-table-column prop="nd" label="年度" width="150" align="center" />
<el-table-column label="状态" width="100" align="center"> <el-table-column label="状态" width="100" align="center">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<el-tag :type="row.zt === '发布' ? 'success' : 'info'" size="small"> <el-tag :type="row.zt === '发布' ? 'success' : 'info'" size="small">
@@ -59,11 +59,11 @@
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="fbsj" label="发布时间" width="150" align="center" :formatter="fmtDateTime" /> <el-table-column prop="fbsj" label="发布时间" width="180" align="center" :formatter="fmtDateTime" />
<el-table-column prop="jssj" label="结束时间" width="150" align="center" :formatter="fmtDateTime" /> <el-table-column prop="jssj" label="结束时间" width="180" align="center" :formatter="fmtDateTime" />
<el-table-column prop="cjsj" label="创建时间" width="150" align="center" :formatter="fmtDateTime" /> <el-table-column prop="cjsj" label="创建时间" width="180" align="center" :formatter="fmtDateTime" />
<el-table-column prop="jcxqscsj" label="教材需求生成时间" width="170" align="center" :formatter="fmtDateTime" /> <el-table-column prop="jcxqscsj" label="教材需求生成时间" align="center" :formatter="fmtDateTime" />
<el-table-column label="操作" width="200" align="center" fixed="right"> <el-table-column label="操作" width="300" align="center" fixed="right">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<el-button type="text" size="small" @click="handleDetail(row)">详情</el-button> <el-button type="text" size="small" @click="handleDetail(row)">详情</el-button>
<el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button> <el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>