forked from liweijie/education
前端文件
This commit is contained in:
@@ -0,0 +1,423 @@
|
||||
<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="请选择年度"
|
||||
filterable
|
||||
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" align="center" show-overflow-tooltip />
|
||||
<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" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="teacherNames" label="教员" min-width="120" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="classroomNames" label="场地" min-width="140" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="responsibleDept" label="责任单位" min-width="110" align="center" show-overflow-tooltip />
|
||||
</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>
|
||||
Reference in New Issue
Block a user