Files
education/frontend/src/views/teachOffice/shiftSemester/index.vue
T
2026-08-23 21:02:15 +08:00

650 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="app-container shift-semester-page">
<!-- ==================== 页面标题 ==================== -->
<div class="page-title">班次学期信息管理</div>
<!-- ==================== 1. 查询条件区域 ==================== -->
<el-card shadow="never" class="search-card">
<el-form :inline="true" :model="searchForm" class="search-form">
<el-form-item label="班次编号">
<el-input
v-model="searchForm.xydbh"
placeholder="请输入班次编号(模糊)"
clearable
style="width: 220px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="年度">
<el-select v-model="filterYear" placeholder="全部年度" clearable style="width: 140px" @change="handleYearChange">
<el-option v-for="y in yearFilterOptions" :key="y" :label="`${y}年`" :value="y" />
</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="handleReset">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- ==================== 2. 工具栏按钮区 ==================== -->
<div class="list-toolbar">
<div class="left-group">
<el-button type="primary" icon="el-icon-plus" @click="handleBatchAdd">批量创建班次学期</el-button>
<el-button type="primary" plain icon="el-icon-document-add" @click="handleAdd">新增</el-button>
<el-button type="primary" plain icon="el-icon-edit" :disabled="!currentRow" @click="handleEdit">编辑</el-button>
<el-button type="danger" plain icon="el-icon-delete" :disabled="!selection.length" @click="handleDelete">删除所选</el-button>
<el-button type="primary" plain icon="el-icon-date" :disabled="!selection.length" @click="handleQuickSetDates">快速设定学期日期</el-button>
<el-button type="primary" plain icon="el-icon-notebook-2" :disabled="!selection.length" @click="handleSetJxrw">批量设置教学任务</el-button>
</div>
<div class="right-group">
<el-button type="success" plain icon="el-icon-calendar" :disabled="!currentRow" @click="handleEditCalendar">编辑班历</el-button>
</div>
</div>
<!-- ==================== 3. 班次学期信息列表 ==================== -->
<el-card shadow="never" class="table-card">
<el-table
ref="tableRef"
v-loading="loading"
:data="displayData"
border
stripe
highlight-current-row
size="small"
max-height="480"
class="class-table"
@selection-change="handleSelectionChange"
@current-change="handleCurrentChange"
>
<template slot="empty">
<span>无数据</span>
</template>
<el-table-column type="selection" width="44" align="center" />
<el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column prop="xydbh" label="班次编号" min-width="150" align="left" header-align="center" show-overflow-tooltip />
<el-table-column prop="nd" label="年度" width="80" align="center" show-overflow-tooltip />
<el-table-column label="学期第次" width="90" align="center">
<template slot-scope="{ row }">{{ xqdcLabel(row.xqdc) }}</template>
</el-table-column>
<el-table-column prop="kxrq" label="开学日期" width="110" align="center" :formatter="fmtDate" />
<el-table-column prop="jsrq" label="结束日期" width="110" align="center" :formatter="fmtDate" />
<el-table-column prop="zyjsbh" label="专用教室" width="100" align="center" show-overflow-tooltip />
<el-table-column label="教学任务" min-width="160" align="left" header-align="center" show-overflow-tooltip>
<template slot-scope="{ row }">{{ taskName(row.jxrwbh) }}</template>
</el-table-column>
<el-table-column label="开放教员排课" width="110" align="center">
<template slot-scope="{ row }">
<el-tag v-if="Number(row.kfjypk) === 1" type="success" size="small">开放</el-tag>
<el-tag v-else type="info" size="small">关闭</el-tag>
</template>
</el-table-column>
<el-table-column prop="bz" label="备注" min-width="120" align="left" header-align="center" show-overflow-tooltip />
<el-table-column label="操作" width="200" align="center" fixed="right">
<template slot-scope="{ row }">
<el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" size="small" @click="handleEditCalendar(row)">班历</el-button>
<el-button type="text" size="small" class="text-danger" @click="handleDeleteRow(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
class="list-pagination"
:current-page="pageNum"
:page-size="pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
</el-card>
<!-- ==================== 班次学期新增/编辑弹窗 ==================== -->
<ClassSemesterDetailDialog
:visible="detailVisible"
:mode="detailMode"
:semester="detailSemester"
:team-info="detailTeamInfo"
:year-options="yearOptions"
:task-options="taskOptions"
@update:visible="val => detailVisible = val"
@submit="handleDetailSubmit"
/>
<!-- ==================== 班历管理弹窗 ==================== -->
<ClassCalendarDialog
:visible="calendarVisible"
:semester="calendarSemester"
:semester-options="semesterOptions"
@update:visible="val => calendarVisible = val"
/>
<!-- ==================== 批量创建班次学期弹窗 ==================== -->
<el-dialog
:visible="batchAddVisible"
title="批量创建班次学期"
width="520px"
:close-on-click-modal="false"
@update:visible="val => batchAddVisible = val"
>
<el-form ref="batchAddFormRef" :model="batchAddForm" :rules="batchAddRules" label-width="100px">
<el-form-item label="年度" prop="nd">
<el-select v-model="batchAddForm.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="xqdc">
<el-select v-model="batchAddForm.xqdc" placeholder="请选择学期" style="width: 100%">
<el-option label="春季学期" value="春季学期" />
<el-option label="夏季学期" value="夏季学期" />
<el-option label="秋季学期" value="秋季学期" />
</el-select>
</el-form-item>
<el-form-item label="开始日期" prop="startTime">
<el-date-picker v-model="batchAddForm.startTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始日期" style="width: 100%" />
</el-form-item>
<el-form-item label="结束日期" prop="endTime">
<el-date-picker v-model="batchAddForm.endTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择结束日期" style="width: 100%" />
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="batchAddVisible = false">取消</el-button>
<el-button type="primary" :loading="saving" @click="handleBatchAddSubmit">确定</el-button>
</div>
</el-dialog>
<!-- ==================== 快速设定学期日期弹窗 ==================== -->
<el-dialog
:visible="dateRangeVisible"
title="快速设定学期日期"
width="480px"
:close-on-click-modal="false"
@update:visible="val => dateRangeVisible = val"
>
<el-alert
type="info"
:closable="false"
show-icon
:title="`将对选中的 ${selection.length} 条班次学期统一设定开学/结束日期`"
style="margin-bottom: 16px"
/>
<el-form ref="dateRangeFormRef" :model="dateRangeForm" :rules="dateRangeRules" label-width="100px">
<el-form-item label="开学日期" prop="kxrq">
<el-date-picker v-model="dateRangeForm.kxrq" type="date" value-format="yyyy-MM-dd" placeholder="请选择开学日期" style="width: 100%" />
</el-form-item>
<el-form-item label="结束日期" prop="jsrq">
<el-date-picker v-model="dateRangeForm.jsrq" type="date" value-format="yyyy-MM-dd" placeholder="请选择结束日期" style="width: 100%" />
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="dateRangeVisible = false">取消</el-button>
<el-button type="primary" :loading="saving" @click="handleDateRangeSubmit">确定</el-button>
</div>
</el-dialog>
<!-- ==================== 批量设置教学任务弹窗 ==================== -->
<el-dialog
:visible="jxrwVisible"
title="批量设置教学任务"
width="480px"
:close-on-click-modal="false"
@update:visible="val => jxrwVisible = val"
>
<el-alert
type="info"
:closable="false"
show-icon
:title="`将对选中的 ${selection.length} 条班次学期统一设置教学任务`"
style="margin-bottom: 16px"
/>
<el-form ref="jxrwFormRef" :model="jxrwForm" :rules="jxrwRules" label-width="100px">
<el-form-item label="教学任务" prop="jxrwbh">
<el-select v-model="jxrwForm.jxrwbh" placeholder="请选择教学任务" filterable style="width: 100%">
<el-option v-for="opt in taskOptions" :key="opt.bh" :label="opt.rwmc" :value="opt.bh" />
</el-select>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="jxrwVisible = false">取消</el-button>
<el-button type="primary" :loading="saving" @click="handleJxrwSubmit">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import ClassSemesterDetailDialog from './ClassSemesterDetailDialog.vue'
import ClassCalendarDialog from './ClassCalendarDialog.vue'
import { listSemester, allSemester, addSemester, updateSemester, delSemester, batchDeleteSemester, batchUpdateDateRange, batchUpdateJxrwbh, batchAddFromElective } from '@/api/studentRecords/semester'
import { listAllSemester } from '@/api/teachBusiness/semester'
import { listTeachingTask } from '@/api/teachBusiness/teachingTask'
export default {
name: 'ShiftSemester',
components: {
ClassSemesterDetailDialog,
ClassCalendarDialog
},
data() {
return {
loading: false,
saving: false,
// ==================== 查询条件 ====================
searchForm: { xydbh: '' },
filterYear: undefined,
yearFilterOptions: [],
// ==================== 列表与分页 ====================
tableData: [],
selection: [],
currentRow: null,
pageNum: 1,
pageSize: 10,
total: 0,
// ==================== 下拉数据 ====================
/** 年度下拉(来自 /semester/all */
yearOptions: [],
/** 教学任务下拉({ bh, rwmc } */
taskOptions: [],
/** 全部班次学期(用于班历复制目标选择) */
semesterOptions: [],
// ==================== 班次学期新增/编辑 ====================
detailVisible: false,
detailMode: 'add',
detailSemester: null,
detailTeamInfo: null,
// ==================== 班历管理 ====================
calendarVisible: false,
calendarSemester: null,
// ==================== 批量创建班次学期 ====================
batchAddVisible: false,
batchAddForm: { nd: undefined, xqdc: '', startTime: '', endTime: '' },
batchAddRules: {
nd: [{ required: true, message: '请选择年度', trigger: 'change' }],
xqdc: [{ required: true, message: '请选择学期', trigger: 'change' }],
startTime: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
endTime: [{ required: true, message: '请选择结束日期', trigger: 'change' }]
},
// ==================== 快速设定学期日期 ====================
dateRangeVisible: false,
dateRangeForm: { kxrq: '', jsrq: '' },
dateRangeRules: {
kxrq: [{ required: true, message: '请选择开学日期', trigger: 'change' }],
jsrq: [{ required: true, message: '请选择结束日期', trigger: 'change' }]
},
// ==================== 批量设置教学任务 ====================
jxrwVisible: false,
jxrwForm: { jxrwbh: undefined },
jxrwRules: {
jxrwbh: [{ required: true, message: '请选择教学任务', trigger: 'change' }]
}
}
},
computed: {
/** 本地按年度过滤(后端 /semester/list 仅支持 xydbh 模糊筛选) */
displayData() {
if (!this.filterYear) return this.tableData
return this.tableData.filter(item => String(item.nd) === String(this.filterYear))
}
},
mounted() {
this.loadYearOptions()
this.loadTaskOptions()
this.loadSemesterOptions()
this.loadList()
},
methods: {
/* ==================== 格式化 ==================== */
fmtDate(val) {
if (!val) return '-'
return String(val).slice(0, 10)
},
xqdcLabel(val) {
if (val === 1 || val === '1') return '第1学期'
if (val === 2 || val === '2') return '第2学期'
if (val === 3 || val === '3') return '第3学期'
return val !== undefined && val !== null && val !== '' ? `${val}学期` : '-'
},
/** 教学任务编号 → 名称 */
taskName(bh) {
if (!bh) return '-'
const opt = this.taskOptions.find(o => o.bh === bh)
return opt ? opt.rwmc : bh
},
cleanPayload(obj) {
const payload = {}
Object.keys(obj).forEach(key => {
const value = obj[key]
if (value !== '' && value !== null && value !== undefined) {
payload[key] = value
}
})
return payload
},
/* ==================== 下拉数据加载 ==================== */
loadYearOptions() {
listAllSemester().then(res => {
const list = (res && res.data) || []
const years = list.map(x => x.nd).filter(v => v !== undefined && v !== null && v !== '')
this.yearOptions = [...new Set(years)].sort((a, b) => Number(a) - Number(b))
}).catch(() => {
this.yearOptions = []
})
},
loadTaskOptions() {
listTeachingTask({ pageNum: 1, pageSize: 1000 }).then(res => {
const list = (res && res.data && res.data.records) || []
this.taskOptions = list.filter(o => o.bh)
}).catch(() => {
this.taskOptions = []
})
},
loadSemesterOptions() {
allSemester().then(res => {
this.semesterOptions = (res && res.data) || []
}).catch(() => {
this.semesterOptions = []
})
},
/* ==================== 列表加载 ==================== */
loadList() {
this.loading = true
const query = this.cleanPayload({
pageNum: this.pageNum,
pageSize: this.pageSize,
xydbh: this.searchForm.xydbh
})
listSemester(query).then(res => {
const data = (res && res.data) || {}
this.tableData = data.records || []
this.total = data.total || 0
this.buildYearFilterOptions()
this.loading = false
}).catch(() => {
this.tableData = []
this.total = 0
this.loading = false
})
},
/** 本地年度过滤下拉(从当前数据动态生成,避免硬编码) */
buildYearFilterOptions() {
const years = this.tableData.map(r => r.nd).filter(v => v !== undefined && v !== null && v !== '')
this.yearFilterOptions = [...new Set(years)].sort((a, b) => Number(a) - Number(b))
},
handleYearChange() {
this.$nextTick(() => {
if (this.$refs.tableRef) this.$refs.tableRef.setCurrentRow(null)
this.currentRow = null
})
},
handleSizeChange(size) {
this.pageSize = size
this.loadList()
},
handlePageChange(page) {
this.pageNum = page
this.loadList()
},
handleSelectionChange(rows) {
this.selection = rows
},
handleCurrentChange(row) {
this.currentRow = row
},
/* ==================== 查询 / 重置 ==================== */
handleQuery() {
this.pageNum = 1
this.loadList()
},
handleReset() {
this.searchForm.xydbh = ''
this.filterYear = undefined
this.pageNum = 1
this.loadList()
},
/* ==================== 新增 / 编辑 ==================== */
handleAdd() {
this.detailMode = 'add'
this.detailSemester = null
this.detailTeamInfo = null
this.detailVisible = true
},
handleEdit(row) {
const target = row || this.currentRow
if (!target) {
this.$message.warning('请先选择一条班次学期信息')
return
}
this.detailMode = 'edit'
this.detailSemester = target
this.detailTeamInfo = null
this.detailVisible = true
},
handleDetailSubmit(payload) {
this.saving = true
const req = this.detailMode === 'edit'
? updateSemester(payload)
: addSemester(payload)
req.then(() => {
this.saving = false
this.detailVisible = false
this.$message.success(this.detailMode === 'edit' ? '班次学期已更新' : '班次学期已新增')
this.loadList()
this.loadSemesterOptions()
}).catch(() => {
this.saving = false
})
},
/* ==================== 删除 ==================== */
handleDelete() {
if (!this.selection.length) {
this.$message.warning('请先勾选要删除的班次学期')
return
}
this.$confirm(`确定删除选中的 ${this.selection.length} 条班次学期吗?删除后其下班历记录将一并删除。`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const bhList = this.selection.map(r => r.bh)
batchDeleteSemester(bhList).then(() => {
this.$message.success('已删除')
this.loadList()
this.loadSemesterOptions()
})
}).catch(() => {})
},
handleDeleteRow(row) {
this.$confirm(`确定删除班次学期「${row.xydbh || row.bh}」吗?删除后其下班历记录将一并删除。`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delSemester(row.bh).then(() => {
this.$message.success('已删除')
this.loadList()
this.loadSemesterOptions()
})
}).catch(() => {})
},
/* ==================== 编辑班历 ==================== */
handleEditCalendar(row) {
const target = row || this.currentRow
if (!target) {
this.$message.warning('请先在列表中选择一条班次学期信息')
return
}
this.calendarSemester = target
this.calendarVisible = true
},
/* ==================== 批量创建班次学期 ==================== */
handleBatchAdd() {
this.batchAddForm = { nd: this.yearOptions[0] || undefined, xqdc: '', startTime: '', endTime: '' }
this.batchAddVisible = true
this.$nextTick(() => {
if (this.$refs.batchAddFormRef) this.$refs.batchAddFormRef.clearValidate()
})
},
handleBatchAddSubmit() {
this.$refs.batchAddFormRef.validate(valid => {
if (!valid) return
const f = this.batchAddForm
this.saving = true
batchAddFromElective({
nd: f.nd,
xqdc: f.xqdc,
startTime: f.startTime,
endTime: f.endTime
}).then(res => {
this.saving = false
this.batchAddVisible = false
const count = (res && res.data) || 0
this.$message.success(`已创建 ${count} 个班次学期`)
this.loadList()
this.loadSemesterOptions()
}).catch(() => {
this.saving = false
})
})
},
/* ==================== 快速设定学期日期 ==================== */
handleQuickSetDates() {
if (!this.selection.length) {
this.$message.warning('请先勾选要设定日期的班次学期')
return
}
this.dateRangeForm = { kxrq: '', jsrq: '' }
this.dateRangeVisible = true
this.$nextTick(() => {
if (this.$refs.dateRangeFormRef) this.$refs.dateRangeFormRef.clearValidate()
})
},
handleDateRangeSubmit() {
this.$refs.dateRangeFormRef.validate(valid => {
if (!valid) return
const f = this.dateRangeForm
this.saving = true
batchUpdateDateRange({
bhList: this.selection.map(r => r.bh),
xqkssj: f.kxrq,
xqjssj: f.jsrq
}).then(res => {
this.saving = false
this.dateRangeVisible = false
const count = (res && res.data) || 0
this.$message.success(`已更新 ${count} 条班次学期的日期`)
this.loadList()
}).catch(() => {
this.saving = false
})
})
},
/* ==================== 批量设置教学任务 ==================== */
handleSetJxrw() {
if (!this.selection.length) {
this.$message.warning('请先勾选要设置教学任务的班次学期')
return
}
this.jxrwForm = { jxrwbh: undefined }
this.jxrwVisible = true
this.$nextTick(() => {
if (this.$refs.jxrwFormRef) this.$refs.jxrwFormRef.clearValidate()
})
},
handleJxrwSubmit() {
this.$refs.jxrwFormRef.validate(valid => {
if (!valid) return
this.saving = true
batchUpdateJxrwbh({
bhList: this.selection.map(r => r.bh),
jxrwbh: this.jxrwForm.jxrwbh
}).then(res => {
this.saving = false
this.jxrwVisible = false
const count = (res && res.data) || 0
this.$message.success(`已更新 ${count} 条班次学期的教学任务`)
this.loadList()
}).catch(() => {
this.saving = false
})
})
}
}
}
</script>
<style scoped lang="scss">
.app-container {
padding: 20px;
}
.shift-semester-page {
// ========== 页面标题 ==========
.page-title {
font-size: 16px;
font-weight: 600;
color: #303133;
margin-bottom: 12px;
padding-left: 10px;
border-left: 4px solid var(--edu-green-primary);
}
// ========== 1. 查询条件区域 ==========
.search-card {
margin-bottom: 16px;
}
// ========== 2. 工具栏按钮区 ==========
.list-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
.left-group,
.right-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
}
// ========== 3. 数据表格区 ==========
.table-card {
.class-table {
width: 100%;
}
.text-danger {
color: #f56c6c;
}
.list-pagination {
margin-top: 12px;
text-align: right;
}
}
}
</style>