zhaichao/education
1
0
Fork 0
forked from liweijie/education
Code Pull Requests Activity

前端代码

Browse Source
This commit is contained in:
liumengyu
2026-08-21 18:42:51 +08:00
parent 054947482f
commit 04e06a9c9a
762 changed files with 62992 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/teachOffice/taskPlan/index.vue
+487
View File
@@ -0,0 +1,487 @@
<template>
<div class="app-container task-plan-page">
<!-- ==================== 1. 学期信息区域 ==================== -->
<el-card shadow="never" class="search-card">
<el-form :inline="true" :model="semester" class="search-form">
<el-form-item label="学期名称">
<el-input v-model="semester.name" style="width: 160px" />
</el-form-item>
<el-form-item label="校历开学日期">
<el-date-picker
v-model="semester.kxrq"
type="date"
format="yyyy年M月d日"
value-format="yyyy-MM-dd"
placeholder="选择日期"
style="width: 160px"
/>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker
v-model="semester.jsrq"
type="date"
format="yyyy年M月d日"
value-format="yyyy-MM-dd"
placeholder="选择日期"
style="width: 160px"
/>
</el-form-item>
<el-form-item label="学期周数">
<el-input v-model="semester.weeks" style="width: 90px" />
</el-form-item>
</el-form>
</el-card>
<!-- ==================== 2. 数据表格区域 ==================== -->
<div class="list-title">教学任务列表：</div>
<div class="list-toolbar">
<div class="left-group">
<el-button type="primary" @click="handleAdd">新建</el-button>
<el-button type="primary" plain @click="handleEdit">编辑</el-button>
<el-button type="danger" plain @click="handleDelete">删除</el-button>
<el-button type="primary" plain @click="handlePublish">发布教学任务</el-button>
<el-button type="primary" plain @click="handleEndPublish">结束发布</el-button>
<el-button type="primary" plain @click="handleManageTeams">管理教学任务所含学员队</el-button>
</div>
</div>
<el-card shadow="never" class="table-card">
<el-table
ref="tableRef"
v-loading="loading"
:data="tableData"
border
stripe
highlight-current-row
class="task-table"
@selection-change="handleSelectionChange"
@current-change="handleCurrentChange"
>
<el-table-column type="selection" width="40" align="center" />
<el-table-column prop="rwmc" label="任务名称" min-width="170" show-overflow-tooltip />
<el-table-column label="状态" width="80" align="center">
<template slot-scope="{ row }">
<span class="status-text">{{ row.zt }}</span>
</template>
</el-table-column>
<el-table-column prop="fbsj" label="发布时间" width="130" align="center" />
<el-table-column prop="cjsj" label="创建时间" width="130" align="center" />
<el-table-column label="结束时间" width="130" align="center">
<template slot-scope="{ row }">
{{ row.jssj || '' }}
</template>
</el-table-column>
<el-table-column prop="jysCount" label="教研室数" width="90" align="center" />
<el-table-column prop="teamCount" label="学员队数" width="90" align="center" />
<el-table-column prop="hbqKcCount" label="合班前课程任务数" width="140" align="center" />
<el-table-column prop="hbqXssCount" label="合班前总学时数" width="140" align="center" />
<el-table-column prop="hbhKcCount" label="合班后课程任务数" width="140" align="center" />
<el-table-column prop="hbhXssCount" label="合班后总学时数" width="140" align="center" />
</el-table>
</el-card>
<!-- ==================== 教学任务信息弹窗 ==================== -->
<el-dialog
:visible="dialogVisible"
title="教学任务信息"
width="900px"
class="teaching-task-dialog"
:close-on-click-modal="false"
@update:visible="val => (dialogVisible = val)"
>
<!-- ==================== 1. 基本信息区域 ==================== -->
<el-form label-width="86px" class="basic-form">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="学期">
<el-input v-model="form.xq" readonly />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="任务名称">
<el-input v-model="form.rwmc" placeholder="请输入任务名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="创建时间">
<el-input v-model="form.cjsj" readonly />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发布时间">
<el-input v-model="form.fbsj" readonly />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="结束时间">
<el-input v-model="form.jssj" readonly />
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- ==================== 2. Tab 标签页区域 ==================== -->
<el-tabs v-model="activeTab" class="tt-tabs">
<!-- 教研室任务书列表 -->
<el-tab-pane label="教研室任务书列表" name="taskbook">
<div class="sub-toolbar">
<el-button type="primary" plain size="small" @click="handleTaskBookDetail">
教研室任务书详细
</el-button>
</div>
<el-table
ref="taskBookTable"
:data="taskBookRows"
border
stripe
highlight-current-row
class="taskbook-table"
@selection-change="handleTaskBookSelection"
>
<el-table-column type="selection" width="40" align="center" />
<el-table-column prop="jys" label="教研室" min-width="120" align="center" />
<el-table-column prop="zt" label="状态" width="80" align="center" />
<el-table-column prop="sbsj" label="上报时间" width="150" align="center" show-overflow-tooltip />
<el-table-column prop="xydkcCount" label="学员队课程任务数" width="150" align="center" />
<el-table-column prop="wczdsCount" label="完成指定数" width="100" align="center" />
</el-table>
</el-tab-pane>
<!-- 学员队列表 -->
<el-tab-pane label="学员队列表" name="team">
<div class="tab-empty">暂无学员队列表数据</div>
</el-tab-pane>
</el-tabs>
<!-- ==================== 3. 底部按钮区域 ==================== -->
<div slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
// ==================== 1. 学期信息区域 ====================
semester: {
name: '2017年秋季学期', // 学期名称
kxrq: '2017-07-08', // 校历开学日期
jsrq: '2018-02-11', // 结束日期
weeks: 32 // 学期周数
},
// ==================== 2. 数据表格 ====================
loading: false,
tableData: [
{
bh: 'task-2017-2',
rwmc: '2017年下半年教学任务',
zt: '发布',
fbsj: '2017年12月1日',
cjsj: '2017年7月8日',
jssj: '',
jysCount: 31,
teamCount: 78,
hbqKcCount: 1126,
hbqXssCount: 36050,
hbhKcCount: 1058,
hbhXssCount: 34050
},
{
bh: 'task-2019-1',
rwmc: '研究生下半年教学任务',
zt: '发布',
fbsj: '2019年12月1日',
cjsj: '2017年7月8日',
jssj: '',
jysCount: 12,
teamCount: 2,
hbqKcCount: 16,
hbqXssCount: 560,
hbhKcCount: 16,
hbhXssCount: 560
}
],
selectedRows: [],
currentRow: null,
// ==================== 操作按钮 ====================
/** 教学任务信息弹窗 */
dialogVisible: false,
/** 弹窗模式：新建 / 编辑 */
dialogMode: 'create',
/** 编辑模式选中的任务行 */
editRow: null,
// ==================== 弹窗：基本信息 ====================
form: {
xq: '2017年秋季学期', // 学期（只读）
rwmc: '', // 任务名称（可编辑）
cjsj: '', // 创建时间（只读）
fbsj: '', // 发布时间（只读）
jssj: '' // 结束时间（只读）
},
// ==================== 弹窗：Tab 标签页 ====================
activeTab: 'taskbook',
// ==================== 弹窗：教研室任务书列表 ====================
taskBookRows: [],
selectedTaskBookRows: [],
/** 编辑模式下的教研室任务书数据（按截图还原） */
editTaskBookRows: [
{ jys: '军事81教研室', zt: '发布', sbsj: '', xydkcCount: 33, wczdsCount: 0 },
{ jys: '翻译室', zt: '发布', sbsj: '', xydkcCount: 2, wczdsCount: 0 },
{ jys: '军事共同教研室', zt: '上报', sbsj: '2019-12-13 10:39', xydkcCount: 97, wczdsCount: 8 },
{ jys: '作战保障教研室', zt: '发布', sbsj: '', xydkcCount: 47, wczdsCount: 0 },
{ jys: '军事10教研室', zt: '发布', sbsj: '', xydkcCount: 21, wczdsCount: 0 },
{ jys: '军事83', zt: '发布', sbsj: '', xydkcCount: 2, wczdsCount: 0 },
{ jys: '军事09教研室', zt: '发布', sbsj: '', xydkcCount: 52, wczdsCount: 0 }
]
}
},
mounted() {
// 默认选中第一行（高亮）
this.$nextTick(() => {
if (this.tableData.length) {
this.$refs.tableRef.setCurrentRow(this.tableData[0])
}
})
},
watch: {
// 弹窗打开时按模式初始化
dialogVisible(val) {
if (!val) return
this.form.xq = this.semester.name
if (this.dialogMode === 'edit') {
this.form.rwmc = (this.editRow && this.editRow.rwmc) || ''
this.form.cjsj = '2017-07-14 17:00'
this.form.fbsj = '2019-12-13 10:39'
this.form.jssj = ''
this.taskBookRows = [...this.editTaskBookRows]
} else {
this.form.rwmc = '新研究生教学任务'
this.form.cjsj = ''
this.form.fbsj = ''
this.form.jssj = ''
this.taskBookRows = []
}
this.activeTab = 'taskbook'
// 默认选中第一行（高亮）
this.$nextTick(() => {
if (this.taskBookRows.length && this.$refs.taskBookTable) {
this.$refs.taskBookTable.setCurrentRow(this.taskBookRows[0])
}
})
}
},
methods: {
// ==================== 表格 ====================
handleSelectionChange(rows) {
this.selectedRows = rows
},
handleCurrentChange(row) {
this.currentRow = row
},
/** 获取当前选中行，未选中时提示 */
getSelected() {
if (!this.currentRow) {
this.$message.warning('请先选择一条教学任务')
return null
}
return this.currentRow
},
// ==================== 操作按钮 ====================
/** 新建教学任务 */
handleAdd() {
this.dialogMode = 'create'
this.editRow = null
this.dialogVisible = true
},
/** 编辑教学任务 */
handleEdit() {
const row = this.getSelected()
if (!row) return
this.dialogMode = 'edit'
this.editRow = row
this.dialogVisible = true
},
/** 弹窗确认保存 */
handleDialogConfirm() {
// TODO: 调用保存接口
this.$message.success('已保存教学任务信息（前端演示）')
},
/** 删除教学任务 */
handleDelete() {
const row = this.getSelected()
if (!row) return
this.$confirm(`确定删除教学任务"${row.rwmc}"吗？删除后不可恢复。`, '删除确认', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
// TODO: 调用删除接口
this.$message.success('删除成功（前端演示）')
})
.catch(() => {})
},
/** 发布教学任务 */
handlePublish() {
const row = this.getSelected()
if (!row) return
// TODO: 调用发布接口
this.$message.success(`已发布教学任务：${row.rwmc}`)
},
/** 结束发布 */
handleEndPublish() {
const row = this.getSelected()
if (!row) return
// TODO: 调用结束发布接口
this.$message.success(`已结束发布：${row.rwmc}`)
},
/** 管理教学任务所含学员队 */
handleManageTeams() {
const row = this.getSelected()
if (!row) return
// TODO: 学员队管理弹窗，待接口接入
this.$message.success(`管理教学任务所含学员队：${row.rwmc}`)
},
// ==================== 弹窗 ====================
handleTaskBookSelection(rows) {
this.selectedTaskBookRows = rows
},
/** 打开教研室任务书详细（前端演示） */
handleTaskBookDetail() {
// TODO: 教研室任务书详细弹窗，待接口接入
},
/** 弹窗确定 */
handleConfirm() {
this.handleDialogConfirm()
this.dialogVisible = false
}
}
}
</script>
<style scoped lang="scss">
.app-container {
padding: 20px;
}
.task-plan-page {
// ========== 1. 学期信息区域 ==========
.search-card {
margin-bottom: 16px;
.search-form {
.el-form-item {
margin-bottom: 0;
margin-right: 24px;
}
}
}
// ========== 2. 列表标题 ==========
.list-title {
font-size: 16px;
font-weight: 600;
color: #303133;
margin-bottom: 12px;
padding-left: 10px;
border-left: 4px solid var(--edu-green-primary);
}
// ========== 3. 工具栏 ==========
.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: 10px;
}
}
// ========== 4. 数据表格区域 ==========
.table-card {
.task-table {
width: 100%;
.status-text {
color: var(--edu-green-primary);
font-weight: 600;
}
// 当前行高亮
::v-deep(.el-table__body tr.current-row > td.el-table__cell) {
background-color: #e1f5ec;
}
::v-deep(.el-table__body tr.current-row:hover > td.el-table__cell) {
background-color: #e1f5ec;
}
}
}
// ========== 4. 教学任务信息弹窗 ==========
.teaching-task-dialog {
.basic-form {
padding-bottom: 8px;
border-bottom: 1px solid #ebeef5;
margin-bottom: 4px;
}
.tt-tabs {
::v-deep(.el-tabs__header) {
margin-bottom: 12px;
}
.sub-toolbar {
margin-bottom: 12px;
}
.taskbook-table {
width: 100%;
// 当前行高亮
::v-deep(.el-table__body tr.current-row > td.el-table__cell) {
background-color: #e1f5ec;
}
::v-deep(.el-table__body tr.current-row:hover > td.el-table__cell) {
background-color: #e1f5ec;
}
}
.tab-empty {
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
color: #909399;
font-size: 13px;
}
}
}
}
</style>