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/schedule/planImport/index.vue
+381
View File
@@ -0,0 +1,381 @@
<template>
<div class="app-container plan-import-page">
<!-- ==================== 1. 查询条件 ==================== -->
<el-card shadow="never" class="search-card">
<el-form :model="searchForm" label-width="100px" class="search-form">
<!-- 第一行：课程时间独占整行 -->
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="课程时间">
<div class="date-range">
<span>从</span>
<el-date-picker
v-model="searchForm.kssj"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="开始时间"
clearable
class="date-input"
/>
<span>到</span>
<el-date-picker
v-model="searchForm.jssj"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="结束时间"
clearable
class="date-input"
/>
</div>
</el-form-item>
</el-col>
</el-row>
<!-- 下面分左右两栏 -->
<el-row :gutter="24">
<el-col :xs="24" :md="12">
<el-form-item>
<template slot="label">
<el-checkbox v-model="searchForm.jcztEnabled">检查状态</el-checkbox>
</template>
<div class="checkbox-group">
<el-checkbox v-model="searchForm.jcztYtg" :disabled="!searchForm.jcztEnabled">已通过</el-checkbox>
<el-checkbox v-model="searchForm.jcztWtg" :disabled="!searchForm.jcztEnabled">未通过</el-checkbox>
</div>
</el-form-item>
<el-form-item label="教员姓名">
<el-input v-model="searchForm.jyxm" placeholder="请输入教员姓名" clearable />
</el-form-item>
<el-form-item label="教学场地名称">
<el-input v-model="searchForm.jxcdmc" placeholder="请输入教学场地名称" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :md="12">
<el-form-item>
<template slot="label">
<el-checkbox v-model="searchForm.hlztEnabled">忽略状态</el-checkbox>
</template>
<div class="checkbox-group">
<el-checkbox v-model="searchForm.hlztYc" :disabled="!searchForm.hlztEnabled">有用</el-checkbox>
<el-checkbox v-model="searchForm.hlztYbl" :disabled="!searchForm.hlztEnabled">已被忽略</el-checkbox>
</div>
</el-form-item>
<el-form-item label="班次名称">
<el-input v-model="searchForm.bcmc" placeholder="请输入班次名称" clearable />
</el-form-item>
<el-form-item label="科目名称">
<el-input v-model="searchForm.kmmc" placeholder="请输入科目名称" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="form-tip">注意：勾选"选择框"表示启用该项对应的查询条件。</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24" class="search-actions">
<el-button type="primary" @click="handleSearch">查询</el-button>
</el-col>
</el-row>
</el-form>
</el-card>
<!-- ==================== 2. 操作按钮区 ==================== -->
<el-card shadow="never" class="action-card">
<div class="action-bar">
<div class="bar-left">
<el-button type="primary" @click="handleDownloadTemplate">
【课程表数据文件模板】下载
</el-button>
</div>
<div class="bar-center">
<div class="file-area">
<input ref="fileInputRef" type="file" accept=".xlsx,.xls" style="display: none" @change="handleFileChange" />
<el-button @click="handleChooseFile">选择文件</el-button>
<span class="file-name">{{ selectedFileName }}</span>
</div>
</div>
<div class="bar-right">
<el-button type="primary" @click="handleUploadToCache">上传数据至缓存</el-button>
<el-button type="primary" @click="handleCheckCache">检查缓存数据</el-button>
<el-button type="primary" @click="handleImportToSystem">缓存数据导入到系统</el-button>
<el-button type="danger" @click="handleDeleteCache">删除缓存数据</el-button>
</div>
</div>
</el-card>
<!-- ==================== 3. 数据表格 ==================== -->
<el-card shadow="never" class="table-card">
<el-table v-loading="loading" :data="tableData" stripe border highlight-current-row class="import-table">
<el-table-column prop="xq" label="学期" width="53" align="center" />
<el-table-column prop="xh" label="序号" width="53" align="center" />
<el-table-column prop="yxh" label="原序号" width="67" align="center" />
<el-table-column prop="rq" label="日期" width="53" align="center" :formatter="formatDate" />
<el-table-column prop="yjc" label="原节次" width="67" align="center" />
<el-table-column prop="jc" label="节次" width="53" align="center" />
<el-table-column prop="kcmc" label="课程名称" width="85" show-overflow-tooltip />
<el-table-column prop="bc" label="班次" width="53" show-overflow-tooltip />
<el-table-column prop="zrdw" label="责任单位" width="81" show-overflow-tooltip />
<el-table-column prop="skjy" label="授课教员" width="81" align="center" />
<el-table-column prop="jxcd" label="教学场地" width="81" align="center" />
<el-table-column prop="jxnr" label="教学内容" width="81" show-overflow-tooltip />
<el-table-column prop="jxff" label="教学方法" width="81" align="center" />
<el-table-column prop="jxyd" label="教学要点" width="81" show-overflow-tooltip />
<el-table-column prop="jybz" label="教员备注" width="81" show-overflow-tooltip />
<el-table-column prop="jwbz" label="教务备注" width="81" show-overflow-tooltip />
<el-table-column prop="jcjg" label="检查结果" width="81" align="center" />
<el-table-column prop="ytgjc" label="已通过检查" width="95" align="center">
<template slot-scope="{ row }">
<span>{{ row.ytgjc ? '是' : '否' }}</span>
</template>
</el-table-column>
<el-table-column prop="ybhhl" label="已被忽略" width="81" align="center">
<template slot-scope="{ row }">
<span>{{ row.ybhhl ? '是' : '否' }}</span>
</template>
</el-table-column>
<el-table-column prop="ybcl" label="已被处理" width="81" align="center">
<template slot-scope="{ row }">
<span>{{ row.ybcl ? '是' : '否' }}</span>
</template>
</el-table-column>
<el-table-column prop="ybdr" label="已被导入" align="center">
<template slot-scope="{ row }">
<span>{{ row.ybdr ? '是' : '否' }}</span>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="pageNum"
:page-size="pageSize"
:total="total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
class="pagination-wrapper"
@current-change="handlePageChange"
@size-change="handleSizeChange"
/>
</el-card>
</div>
</template>
<script>
// 模拟导入记录数据（后端接口未提供，接口就绪后可删除并改为接口加载）
const mockTableData = [
{ xq: '2026-2027-1', xh: 1, yxh: 1, rq: '2026-09-01 08:00:00', yjc: '1-2', jc: '1', kcmc: '高等数学', bc: '2026级1队', zrdw: '基础部', skjy: '王教员', jxcd: '教学楼101', jxnr: '第一章 函数与极限', jxff: '讲授', jxyd: '理解极限定义', jybz: '', jwbz: '', jcjg: '通过', ytgjc: true, ybhhl: false, ybcl: true, ybdr: false },
{ xq: '2026-2027-1', xh: 2, yxh: 2, rq: '2026-09-01 10:00:00', yjc: '3-4', jc: '2', kcmc: '大学英语', bc: '2026级2队', zrdw: '外语系', skjy: '李教员', jxcd: '教学楼102', jxnr: 'Unit 1 课文讲解', jxff: '讲授', jxyd: '掌握重点词汇', jybz: '', jwbz: '', jcjg: '通过', ytgjc: true, ybhhl: false, ybcl: true, ybdr: false },
{ xq: '2026-2027-1', xh: 3, yxh: 3, rq: '2026-09-02 08:00:00', yjc: '1-2', jc: '1', kcmc: '军事理论', bc: '2026级1队', zrdw: '军事教研室', skjy: '张教员', jxcd: '学术报告厅', jxnr: '国防概论', jxff: '讲授', jxyd: '了解国防常识', jybz: '', jwbz: '', jcjg: '待检', ytgjc: false, ybhhl: false, ybcl: false, ybdr: false }
]
export default {
name: 'PlanImportIndex',
data() {
return {
// ==================== 查询表单 ====================
searchForm: {
kssj: '',
jssj: '',
jcztEnabled: true,
jcztYtg: false,
jcztWtg: true,
hlztEnabled: true,
hlztYc: false,
hlztYbl: true,
jyxm: '',
bcmc: '',
jxcdmc: '',
kmmc: ''
},
// ==================== 文件上传与缓存操作 ====================
selectedFileName: '未选择任何文件',
// ==================== 表格数据 ====================
tableData: [],
loading: false,
allData: [],
pageNum: 1,
pageSize: 20,
total: 0
}
},
mounted() {
this.handleSearch()
},
methods: {
// ==================== 查询 ====================
// TODO: 后端接口未提供，暂用模拟数据；接口就绪后替换为接口加载
handleSearch() {
this.loading = true
setTimeout(() => {
this.allData = mockTableData.slice()
this.total = this.allData.length
this.pageNum = 1
this.applyPage()
this.$message.success(`查询完成，共 ${this.allData.length} 条记录（前端模拟）`)
this.loading = false
}, 200)
},
applyPage() {
const start = (this.pageNum - 1) * this.pageSize
this.tableData = this.allData.slice(start, start + this.pageSize)
},
handlePageChange(current) {
this.pageNum = current
this.applyPage()
},
handleSizeChange(size) {
this.pageSize = size
this.pageNum = 1
this.applyPage()
},
/** 日期格式化 */
formatDate(row, column, cellValue) {
return cellValue ? String(cellValue).substring(0, 10) : ''
},
// ==================== 文件上传与缓存操作 ====================
handleChooseFile() {
this.$refs.fileInputRef && this.$refs.fileInputRef.click()
},
handleFileChange(event) {
const target = event.target
const file = target.files && target.files[0]
if (file) {
this.selectedFileName = file.name
this.$message.success(`已选择文件：${file.name}`)
} else {
this.selectedFileName = '未选择任何文件'
}
},
// TODO: 后端接口未提供，以下操作均为前端模拟；接口就绪后替换为对应接口
handleDownloadTemplate() {
this.$message.success('下载课程表数据文件模板（前端模拟）')
},
handleUploadToCache() {
if (this.selectedFileName === '未选择任何文件') {
this.$message.warning('请先选择文件')
return
}
this.$message.success('上传数据至缓存（前端模拟）')
},
handleDeleteCache() {
this.$message.success('删除缓存数据（前端模拟）')
},
handleCheckCache() {
this.$message.success('检查缓存数据（前端模拟）')
},
handleImportToSystem() {
this.$message.success('缓存数据导入到系统（前端模拟）')
}
}
}
</script>
<style scoped lang="scss">
.app-container {
padding: 20px;
}
.plan-import-page {
.search-card {
margin-bottom: 16px;
.search-form {
.date-range {
display: flex;
align-items: center;
gap: 8px;
.date-input {
width: 180px;
flex-shrink: 0;
}
}
.checkbox-group {
display: flex;
align-items: center;
gap: 16px;
}
.form-tip {
color: #f56c6c;
font-size: 12px;
margin-bottom: 12px;
padding-left: 100px;
}
.search-actions {
display: flex;
justify-content: flex-end;
padding-top: 8px;
}
}
}
.action-card {
margin-bottom: 16px;
.action-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
.bar-left,
.bar-center,
.bar-right {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.bar-right {
margin-left: auto;
}
.file-area {
display: flex;
align-items: center;
gap: 8px;
.file-name {
color: #606266;
font-size: 14px;
}
}
}
}
.table-card {
.import-table {
width: 100%;
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
}
}
</style>