liumengyu
488 lines
16 KiB
Vue
488 lines
16 KiB
Vue
<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>
|