forked from liweijie/education
410 lines
13 KiB
Vue
410 lines
13 KiB
Vue
<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" 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="handleImportToSystem" :loading="importing">缓存数据导入到系统</el-button>
|
||
<el-button type="primary" @click="handleUploadToCache">上传数据至缓存</el-button>
|
||
<el-button type="primary" @click="handleCheckCache">检查缓存数据</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="nd" label="年度" width="60" 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="120" 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="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="ybhl" label="已被忽略" width="81" align="center">
|
||
<template slot-scope="{ row }">
|
||
<span>{{ row.ybhl ? '是' : '否' }}</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>
|
||
import { listTeachingPlan, importTeachingPlan, downloadTeachingPlanTemplate } from '@/api/schedule/teachingPlan'
|
||
|
||
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: '未选择任何文件',
|
||
selectedFile: null,
|
||
importing: false,
|
||
|
||
// ==================== 表格数据 ====================
|
||
tableData: [],
|
||
loading: false,
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
total: 0
|
||
}
|
||
},
|
||
mounted() {
|
||
this.fetchList()
|
||
},
|
||
methods: {
|
||
// ==================== 查询 ====================
|
||
// 仅传后端 Mapper 支持的字段：skjy(授课教员) bc(班次) kcmc(课程名称) ytgjc(已通过检查)
|
||
// 课程时间、忽略状态、教学场地名称后端列表查询不支持，不传
|
||
buildSearchParams() {
|
||
const f = this.searchForm
|
||
const params = { pageNum: this.pageNum, pageSize: this.pageSize }
|
||
if (f.jyxm && f.jyxm.trim()) params.skjy = f.jyxm.trim()
|
||
if (f.bcmc && f.bcmc.trim()) params.bc = f.bcmc.trim()
|
||
if (f.kmmc && f.kmmc.trim()) params.kcmc = f.kmmc.trim()
|
||
// 检查状态：仅勾选「已通过」或「未通过」其中之一时才按该条件过滤
|
||
if (f.jcztEnabled) {
|
||
if (f.jcztYtg && !f.jcztWtg) params.ytgjc = true
|
||
else if (!f.jcztYtg && f.jcztWtg) params.ytgjc = false
|
||
}
|
||
return params
|
||
},
|
||
|
||
fetchList() {
|
||
this.loading = true
|
||
listTeachingPlan(this.buildSearchParams()).then(response => {
|
||
const data = response.data || {}
|
||
this.tableData = data.records || []
|
||
this.total = data.total || 0
|
||
this.loading = false
|
||
}).catch(() => {
|
||
this.tableData = []
|
||
this.total = 0
|
||
this.loading = false
|
||
})
|
||
},
|
||
|
||
handleSearch() {
|
||
this.pageNum = 1
|
||
this.fetchList()
|
||
},
|
||
|
||
handlePageChange(current) {
|
||
this.pageNum = current
|
||
this.fetchList()
|
||
},
|
||
|
||
handleSizeChange(size) {
|
||
this.pageSize = size
|
||
this.pageNum = 1
|
||
this.fetchList()
|
||
},
|
||
|
||
/** 日期格式化 */
|
||
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.selectedFile = file
|
||
this.selectedFileName = file.name
|
||
} else {
|
||
this.selectedFile = null
|
||
this.selectedFileName = '未选择任何文件'
|
||
}
|
||
},
|
||
|
||
// ==================== 下载模板 ====================
|
||
handleDownloadTemplate() {
|
||
downloadTeachingPlanTemplate().then(blob => {
|
||
this.downloadBlob(blob, '教学实施计划导入模板.xlsx')
|
||
this.$message.success('模板下载成功')
|
||
}).catch(() => {})
|
||
},
|
||
|
||
downloadBlob(blob, fileName) {
|
||
const url = window.URL.createObjectURL(blob)
|
||
const link = document.createElement('a')
|
||
link.href = url
|
||
link.download = fileName
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
document.body.removeChild(link)
|
||
window.URL.revokeObjectURL(url)
|
||
},
|
||
|
||
// ==================== 导入到系统 ====================
|
||
handleImportToSystem() {
|
||
if (!this.selectedFile) {
|
||
this.$message.warning('请先选择文件')
|
||
return
|
||
}
|
||
this.importing = true
|
||
importTeachingPlan(this.selectedFile).then(res => {
|
||
const count = res && res.data
|
||
if (count !== null && count !== undefined) {
|
||
this.$message.success(`导入成功，共 ${count} 条记录`)
|
||
} else {
|
||
this.$message.success((res && res.msg) || '导入成功')
|
||
}
|
||
this.selectedFile = null
|
||
this.selectedFileName = '未选择任何文件'
|
||
this.$refs.fileInputRef && (this.$refs.fileInputRef.value = '')
|
||
this.pageNum = 1
|
||
this.fetchList()
|
||
}).catch(() => {}).finally(() => {
|
||
this.importing = false
|
||
})
|
||
},
|
||
|
||
// ==================== 缓存操作（后端暂未提供） ====================
|
||
handleUploadToCache() {
|
||
this.$message.info('后端暂未提供该接口')
|
||
},
|
||
|
||
handleCheckCache() {
|
||
this.$message.info('后端暂未提供该接口')
|
||
},
|
||
|
||
handleDeleteCache() {
|
||
this.$message.info('后端暂未提供该接口')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.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%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|