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

选修课和课程科目，上传按钮样式调整，点击按钮选择文件导入

Browse Source
This commit is contained in:
liweijie
2026-09-22 16:46:56 +08:00
parent 1ac022757d
commit f87e02b06b
3 changed files with 144 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/api/teachOffice/elective.js
+13
View File
@@ -46,6 +46,19 @@ export function batchStopElective(bhList) {
})
}
/** 导入选修课 Excel POST /jys/elective/import（multipart，字段名 file） */
export function importElective(file) {
const formData = new FormData()
formData.append('file', file)
return request({
url: '/jys/elective/import',
method: 'post',
data: formData,
headers: { 'Content-Type': 'multipart/form-data' },
timeout: 60000
})
}
// 下载选修班列表（Excel）
export function exportElectiveList(query) {
return request({
frontend/src/views/teachOffice/elective/index.vue
+75 -18
View File
@@ -74,10 +74,7 @@
<el-button icon="el-icon-download" @click="handleDownloadList">下载选修班列表</el-button>
<el-button icon="el-icon-download" @click="handleDownloadWord">学员名单Word</el-button>
<el-button icon="el-icon-download" @click="handleDownloadExcel">学员名单Excel</el-button>
<el-button icon="el-icon-folder-opened" @click="handleSelectFile">选择文件</el-button>
<span class="file-name" :class="{ 'has-file': selectedFile }">{{ fileName }}</span>
<input ref="fileInputRef" type="file" style="display: none" @change="handleFileChange" />
<el-button type="primary" plain icon="el-icon-upload2" @click="handleUpload">上传数据</el-button>
<el-button icon="el-icon-upload2" @click="handleOpenImport">数据导入</el-button>
</div>
</div>
<el-table v-loading="loading" :data="tableData" border stripe class="main-table" @selection-change="handleSelectionChange">
@@ -233,6 +230,29 @@
<el-button type="primary" @click="handleNewConfirm">确定</el-button>
</div>
</el-dialog>
<!-- 数据导入弹窗 -->
<el-dialog
:visible="importVisible"
title="数据导入"
width="480px"
:close-on-click-modal="false"
class="import-dialog"
@update:visible="val => importVisible = val"
>
<div class="import-body">
<div class="import-file-row">
<el-button icon="el-icon-folder-opened" @click="handleSelectFile">选择文件</el-button>
<span class="file-name" :class="{ 'has-file': selectedFile }">{{ fileName }}</span>
<input ref="fileInputRef" type="file" accept=".xls,.xlsx" style="display: none" @change="handleFileChange" />
</div>
<div class="import-tip">请选择填写完成的选修课数据模板文件上传</div>
</div>
<div slot="footer">
<el-button @click="importVisible = false">取消</el-button>
<el-button type="primary" icon="el-icon-upload2" :loading="importing" @click="handleUpload">上传数据</el-button>
</div>
</el-dialog>
</div>
</template>
@@ -240,6 +260,7 @@
import {
listElective,
addElective,
importElective,
batchOpenElective,
batchCancelOpenElective,
batchStopElective,
@@ -278,6 +299,8 @@ export default {
selectedRows: [],
// ==================== 文件上传 ====================
importVisible: false,
importing: false,
selectedFile: null,
// ==================== 新建选修课弹窗 ====================
@@ -436,6 +459,13 @@ export default {
},
// ==================== 文件上传 ====================
handleOpenImport() {
this.selectedFile = null
this.importVisible = true
this.$nextTick(() => {
if (this.$refs.fileInputRef) this.$refs.fileInputRef.value = ''
})
},
handleSelectFile() {
this.$refs.fileInputRef && this.$refs.fileInputRef.click()
},
@@ -447,7 +477,14 @@ export default {
this.$message.warning('请先选择文件')
return
}
this.$message.warning('后端暂未提供该接口')
this.importing = true
importElective(this.selectedFile).then(res => {
this.$message.success((res && res.msg) || '导入成功')
this.importVisible = false
this.loadList()
}).catch(() => {}).finally(() => {
this.importing = false
})
},
// ==================== 表格多选 ====================
@@ -628,19 +665,6 @@ export default {
.el-button + .el-button {
margin-left: 0;
}
.file-name {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
color: #999;
&.has-file {
color: #303133;
}
}
}
}
@@ -663,4 +687,37 @@ export default {
margin-top: 16px;
}
}
// ==================== 数据导入弹窗 ====================
.import-dialog {
.import-body {
display: flex;
flex-direction: column;
gap: 14px;
}
.import-file-row {
display: flex;
align-items: center;
gap: 12px;
.file-name {
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
color: #999;
&.has-file {
color: #303133;
}
}
}
.import-tip {
font-size: 12px;
color: #909399;
}
}
</style>
frontend/src/views/teachOffice/subject/index.vue
+49 -36
View File
@@ -52,27 +52,6 @@
</el-card>
<!-- ==================== 4. 文件上传区域 ==================== -->
<el-card shadow="never" class="upload-card">
<div class="section-heading section-heading--compact">
<div>
<h2 class="section-title">数据导入</h2>
<p class="section-description">选择填写完成的课程科目模板并上传</p>
</div>
</div>
<div class="upload-row">
<div class="upload-left">
<el-button icon="el-icon-folder-opened" @click="handleSelectFile">选择文件</el-button>
<span class="file-name" :class="{ 'has-file': selectedFile }">{{ fileName }}</span>
<input ref="fileInputRef" type="file" style="display: none" @change="handleFileChange" />
</div>
<div class="upload-right">
<el-checkbox v-model="coverExist">覆盖已存在课程科目</el-checkbox>
<el-button type="primary" icon="el-icon-upload2" @click="handleUpload">上传数据</el-button>
</div>
</div>
</el-card>
<!-- ==================== 6. 数据表格区域 ==================== -->
<el-card shadow="never" class="table-card">
<div class="list-header">
@@ -81,6 +60,7 @@
<el-button type="primary" icon="el-icon-plus" @click="handleOpenDialog">新建课程科目</el-button>
<el-button type="danger" plain icon="el-icon-delete" @click="handleBatchDelete">删除所选</el-button>
<el-button icon="el-icon-download" @click="handleDownloadTemplate">【课程科目数据文件模板】下载</el-button>
<el-button icon="el-icon-upload2" @click="handleOpenImport">数据导入</el-button>
</div>
</div>
<el-table v-loading="loading" :data="tableData" stripe border highlight-current-row
@@ -299,6 +279,32 @@
</div>
</div>
</el-dialog>
<!-- 数据导入弹窗 -->
<el-dialog
:visible="importVisible"
title="数据导入"
width="480px"
:close-on-click-modal="false"
class="import-dialog"
@update:visible="val => importVisible = val"
>
<div class="import-body">
<div class="import-file-row">
<el-button icon="el-icon-folder-opened" @click="handleSelectFile">选择文件</el-button>
<span class="file-name" :class="{ 'has-file': selectedFile }">{{ fileName }}</span>
<input ref="fileInputRef" type="file" accept=".xls,.xlsx" style="display: none" @change="handleFileChange" />
</div>
<el-checkbox v-model="coverExist">覆盖已存在课程科目</el-checkbox>
<div class="import-tip">
<el-button type="text" icon="el-icon-download" @click="handleDownloadTemplate">下载课程科目数据文件模板</el-button>
</div>
</div>
<div slot="footer">
<el-button @click="importVisible = false">取消</el-button>
<el-button type="primary" icon="el-icon-upload2" @click="handleUpload">上传数据</el-button>
</div>
</el-dialog>
</div>
</template>
@@ -333,6 +339,7 @@ export default {
selectedRows: [],
// ==================== 文件上传 ====================
importVisible: false,
selectedFile: null,
coverExist: false,
@@ -508,6 +515,14 @@ export default {
},
// ==================== 文件上传（后端暂未提供） ====================
handleOpenImport() {
this.selectedFile = null
this.coverExist = false
this.importVisible = true
this.$nextTick(() => {
if (this.$refs.fileInputRef) this.$refs.fileInputRef.value = ''
})
},
handleSelectFile() {
this.$refs.fileInputRef && this.$refs.fileInputRef.click()
},
@@ -518,6 +533,10 @@ export default {
},
handleUpload() {
if (!this.selectedFile) {
this.$message.warning('请先选择文件')
return
}
this.$message.warning('后端暂未提供该接口')
},
@@ -627,18 +646,15 @@ export default {
}
// ==================== 4. 文件上传区域 ====================
.upload-card {
margin-bottom: 16px;
.upload-row {
// ==================== 4. 数据导入弹窗 ====================
.import-dialog {
.import-body {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
flex-direction: column;
gap: 14px;
}
.upload-left {
.import-file-row {
display: flex;
align-items: center;
gap: 12px;
@@ -653,11 +669,8 @@ export default {
}
}
.upload-right {
display: flex;
align-items: center;
gap: 12px;
}
.import-tip {
margin-top: -4px;
}
}