forked from liweijie/education
前端代码
This commit is contained in:
liumengyu
@@ -0,0 +1,402 @@
|
||||
<template>
|
||||
<div class="app-container teaching-task-page">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-title">{{ pageTitle }}</div>
|
||||
|
||||
<!-- 查询条件 -->
|
||||
<el-card shadow="never" class="search-card">
|
||||
<el-form :model="searchForm" label-width="110px" class="search-form">
|
||||
<el-row :gutter="32">
|
||||
<!-- 左栏 -->
|
||||
<el-col :xs="24" :md="12">
|
||||
<el-form-item label="授课教员">
|
||||
<el-input v-model="searchForm.skjy" placeholder="请输入授课教员" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="可选班次年级">
|
||||
<el-input v-model="searchForm.kxbcnj" placeholder="请输入可选班次年级" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<template slot="label">
|
||||
<el-checkbox v-model="searchForm.fzkztEnabled">分组课状态</el-checkbox>
|
||||
</template>
|
||||
<el-select v-model="searchForm.fzkzt" placeholder="请选择分组课状态" class="w-full"
|
||||
:disabled="!searchForm.fzkztEnabled">
|
||||
<el-option v-for="item in groupStatusOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 右栏 -->
|
||||
<el-col :xs="24" :md="12">
|
||||
<el-form-item label="课程科目名称">
|
||||
<el-input v-model="searchForm.kckmmc" placeholder="请输入课程科目名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="分组班名称">
|
||||
<el-input v-model="searchForm.fzbmc" placeholder="请输入分组班名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<template slot="label">
|
||||
<el-checkbox v-model="searchForm.pxccEnabled">培训层次</el-checkbox>
|
||||
</template>
|
||||
<el-select v-model="searchForm.pxcc" placeholder="请选择培训层次" class="w-full"
|
||||
:disabled="!searchForm.pxccEnabled">
|
||||
<el-option v-for="item in trainLevelOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="search-tip">
|
||||
注意：勾选"选择框"表示启用该项对应的查询条件；文本输入框非空白表示启用对应的查询条件。
|
||||
</div>
|
||||
<div class="search-actions">
|
||||
<el-button class="gray-btn" @click="handleSearch">查询</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 下载按钮 -->
|
||||
<div class="toolbar-right">
|
||||
<el-button type="primary" @click="handleDownloadGroupCourseList">下载分组班列表</el-button>
|
||||
<el-button type="primary" @click="handleDownloadWord">下载分组班学员名单Word</el-button>
|
||||
<el-button type="primary" @click="handleDownloadExcel">下载分组班学员名单Excel</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 批量操作 -->
|
||||
<el-card shadow="never" class="action-card">
|
||||
<div class="action-groups">
|
||||
<div class="action-group">
|
||||
<el-button type="primary" plain @click="handleNewGroupCourse">新建分组课</el-button>
|
||||
<el-button type="primary" plain @click="handleBatchOpen">所选班早开放报名</el-button>
|
||||
<el-button type="primary" plain @click="handleBatchCancelOpen">所选班早取消开放报名</el-button>
|
||||
</div>
|
||||
<div class="action-group">
|
||||
<el-button type="primary" plain @click="handleBatchStop">批量停止报名</el-button>
|
||||
<el-button type="primary" plain @click="handleBatchReverseRange">所选班早根据学员反向确定班次范围</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 导入数据 -->
|
||||
<el-card shadow="never" class="import-card">
|
||||
<div class="import-toolbar">
|
||||
<el-button type="primary" @click="handleDownloadTemplate">【分组课数据文件模板】下载</el-button>
|
||||
<div class="file-input">
|
||||
<input ref="fileInput" type="file" accept=".xls,.xlsx" style="display: none" @change="handleFileChange" />
|
||||
<el-button type="primary" plain @click="handleChooseFile">选择文件</el-button>
|
||||
<span class="file-name">{{ fileName }}</span>
|
||||
</div>
|
||||
<el-button type="primary" plain @click="handleUploadData">上传数据</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<el-card shadow="never" class="table-card">
|
||||
<el-table v-loading="loading" :data="tableData" stripe border highlight-current-row
|
||||
@selection-change="handleSelectionChange">
|
||||
<template slot="empty">
|
||||
<span>无数据！</span>
|
||||
</template>
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column type="index" label="序号" width="100" align="center" />
|
||||
<el-table-column prop="kc" label="课程" width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="jc" label="教材" width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="ssjy" label="实施教员" width="150" align="center" />
|
||||
<el-table-column prop="jxcd" label="教学场地" width="150" align="center" />
|
||||
<el-table-column align="center">
|
||||
<template slot="header">
|
||||
<el-checkbox v-model="showOptionalClasses">显示可选队别班次</el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="计划学时/运行学时/学分" width="130" align="center">
|
||||
<template slot="header">
|
||||
<div class="triple-header">
|
||||
<span>计划学时</span>
|
||||
<span>运行学时</span>
|
||||
<span>学分</span>
|
||||
</div>
|
||||
</template>
|
||||
<template slot-scope="{ row }">
|
||||
<div class="triple-cell">
|
||||
<span>{{ row.jhxs }}</span>
|
||||
<span>{{ row.zxs }}</span>
|
||||
<span>{{ row.xf }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="kkjkrq" label="开课结课日期" width="110" align="center" :formatter="formatDate" />
|
||||
<el-table-column prop="bmrq" label="报名日期" width="120" align="center" :formatter="formatDate" />
|
||||
<el-table-column prop="jhrs" label="计划人数" width="90" align="center" />
|
||||
<el-table-column prop="yqsm" label="要求说明" width="150" show-overflow-tooltip />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TeachingTask',
|
||||
data() {
|
||||
return {
|
||||
pageTitle: '分组课列表',
|
||||
|
||||
// ==================== 查询表单 ====================
|
||||
searchForm: {
|
||||
skjy: '',
|
||||
kckmmc: '',
|
||||
kxbcnj: '',
|
||||
fzbmc: '',
|
||||
fzkzt: '拟制',
|
||||
fzkztEnabled: false,
|
||||
pxcc: '无',
|
||||
pxccEnabled: false
|
||||
},
|
||||
groupStatusOptions: ['拟制', '已发布', '已结课'],
|
||||
trainLevelOptions: ['无', '初级', '中级', '高级'],
|
||||
|
||||
// ==================== 批量操作 ====================
|
||||
selectedRows: [],
|
||||
|
||||
// ==================== 表格数据 ====================
|
||||
loading: false,
|
||||
showOptionalClasses: false,
|
||||
/** 模拟列表数据（后端接口未提供） */
|
||||
tableData: [
|
||||
{ xh: 1, kc: '高等数学', jc: '高等数学(上册)', ssjy: '张三', jxcd: '1-301', jhxs: 48, zxs: 46, xf: 3, kkjkrq: '2017-09-03', bmrq: '2017-08-20', jhrs: 40, yqsm: '按教学计划执行' },
|
||||
{ xh: 2, kc: '军事英语', jc: '军事英语教程', ssjy: '李四', jxcd: '2-101', jhxs: 32, zxs: 30, xf: 2, kkjkrq: '2017-09-03', bmrq: '2017-08-22', jhrs: 36, yqsm: '含听力训练' },
|
||||
{ xh: 3, kc: '导弹发射原理', jc: '导弹发射原理', ssjy: '王五', jxcd: '3-205', jhxs: 40, zxs: 40, xf: 2.5, kkjkrq: '2017-09-10', bmrq: '2017-08-25', jhrs: 42, yqsm: '实验课随堂进行' },
|
||||
{ xh: 4, kc: '通信原理', jc: '通信原理', ssjy: '赵六', jxcd: '5-102', jhxs: 48, zxs: 44, xf: 3, kkjkrq: '2017-09-03', bmrq: '2017-08-28', jhrs: 38, yqsm: '' },
|
||||
{ xh: 5, kc: '联合作战指挥', jc: '联合作战指挥', ssjy: '孙七', jxcd: '学术报告厅', jhxs: 40, zxs: 40, xf: 2.5, kkjkrq: '2017-09-17', bmrq: '2017-09-01', jhrs: 45, yqsm: '理论授课+想定作业' }
|
||||
],
|
||||
|
||||
// ==================== 导入 ====================
|
||||
selectedFile: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fileName() {
|
||||
return (this.selectedFile && this.selectedFile.name) || '未选择任何文件'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchList()
|
||||
},
|
||||
methods: {
|
||||
/** 表格日期格式化 */
|
||||
formatDate(row, column, cellValue) {
|
||||
return cellValue ? String(cellValue).substring(0, 10) : ''
|
||||
},
|
||||
|
||||
// ==================== 列表加载 ====================
|
||||
// TODO: 后端接口未提供，暂用模拟数据；接口就绪后替换为真实查询接口
|
||||
fetchList() {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 200)
|
||||
},
|
||||
|
||||
// ==================== 查询 ====================
|
||||
handleSearch() {
|
||||
this.$message.success('查询分组课列表（前端模拟）')
|
||||
},
|
||||
|
||||
// ==================== 批量操作 ====================
|
||||
handleSelectionChange(rows) {
|
||||
this.selectedRows = rows
|
||||
},
|
||||
|
||||
handleNewGroupCourse() {
|
||||
this.$message.success('新建分组课（前端模拟）')
|
||||
},
|
||||
|
||||
handleBatchOpen() {
|
||||
if (this.selectedRows.length === 0) {
|
||||
this.$message.warning('请先选择数据')
|
||||
return
|
||||
}
|
||||
this.$message.success('所选批量开放报名（前端模拟）')
|
||||
},
|
||||
|
||||
handleBatchCancelOpen() {
|
||||
if (this.selectedRows.length === 0) {
|
||||
this.$message.warning('请先选择数据')
|
||||
return
|
||||
}
|
||||
this.$message.success('所选批量取消开放报名（前端模拟）')
|
||||
},
|
||||
|
||||
handleBatchStop() {
|
||||
if (this.selectedRows.length === 0) {
|
||||
this.$message.warning('请先选择数据')
|
||||
return
|
||||
}
|
||||
this.$message.success('批量停止报名（前端模拟）')
|
||||
},
|
||||
|
||||
handleBatchReverseRange() {
|
||||
if (this.selectedRows.length === 0) {
|
||||
this.$message.warning('请先选择数据')
|
||||
return
|
||||
}
|
||||
this.$message.success('所选批量根据学员反向确定班次范围（前端模拟）')
|
||||
},
|
||||
|
||||
// ==================== 下载按钮 ====================
|
||||
handleDownloadGroupCourseList() {
|
||||
this.$message.success('下载分组课列表（前端模拟）')
|
||||
},
|
||||
|
||||
handleDownloadWord() {
|
||||
this.$message.success('下载分组学员名单Word（前端模拟）')
|
||||
},
|
||||
|
||||
handleDownloadExcel() {
|
||||
this.$message.success('下载分组学员名单Excel（前端模拟）')
|
||||
},
|
||||
|
||||
// ==================== 导入 ====================
|
||||
handleChooseFile() {
|
||||
this.$refs.fileInput && this.$refs.fileInput.click()
|
||||
},
|
||||
|
||||
handleFileChange(e) {
|
||||
const input = e.target
|
||||
if (input.files && input.files.length > 0) {
|
||||
this.selectedFile = input.files[0]
|
||||
}
|
||||
},
|
||||
|
||||
handleDownloadTemplate() {
|
||||
this.$message.success('下载分组课数据文件模板（前端模拟）')
|
||||
},
|
||||
|
||||
handleUploadData() {
|
||||
if (!this.selectedFile) {
|
||||
this.$message.warning('请先选择文件')
|
||||
return
|
||||
}
|
||||
this.$message.success('上传数据（前端模拟）')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.search-form {
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.search-tip {
|
||||
font-size: 12px;
|
||||
color: #f56c6c;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.search-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.action-card {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.action-groups {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.action-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
|
||||
.el-button {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.import-card {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.import-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.file-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.file-name {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-card {
|
||||
::v-deep(.el-table) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.triple-header,
|
||||
.triple-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.gray-btn {
|
||||
height: 28px;
|
||||
padding: 2px 16px;
|
||||
font-size: 12px;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #c0c4cc;
|
||||
color: #333;
|
||||
border-radius: 2px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: #ebebeb;
|
||||
border-color: #c0c4cc;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user