liweijie/education
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

把工具条横过来，占满一行，数据导入也放到工具条中，不要单独放

Browse Source
This commit is contained in:
liweijie
2026-09-22 11:56:08 +08:00
parent 69a32e31d0
commit 3fcec5d756
8 changed files with 74 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/teachOffice/elective/index.vue
+20 -70
View File
@@ -56,41 +56,6 @@
</div>
<!-- ==================== 3. 导出按钮区域 ==================== -->
<div class="section-card export-card">
<div class="section-heading section-heading--compact">
<div>
<h2 class="section-title">数据导出</h2>
<p class="section-description">下载选修班及学员名单</p>
</div>
</div>
<div class="export-bar">
<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>
</div>
</div>
<!-- ==================== 5. 文件上传区域 ==================== -->
<div class="section-card 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-button type="primary" icon="el-icon-upload2" @click="handleUpload">上传数据</el-button>
</div>
</div>
</div>
<!-- ==================== 6. 数据表格区域 ==================== -->
<div class="section-card table-card">
<div class="list-header">
@@ -106,6 +71,13 @@
<el-button type="danger" plain icon="el-icon-circle-close" @click="handleStopSignup">
批量停止报名
</el-button>
<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>
</div>
</div>
<el-table v-loading="loading" :data="tableData" border stripe class="main-table" @selection-change="handleSelectionChange">
@@ -514,41 +486,6 @@ export default {
}
}
.export-bar {
align-items: center;
}
// ==================== 5. 文件上传区域 ====================
.upload-card {
.upload-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
.upload-left {
display: flex;
align-items: center;
gap: 12px;
.file-name {
font-size: 12px;
color: #999;
&.has-file {
color: #303133;
}
}
}
.upload-right {
display: flex;
align-items: center;
}
}
}
// ==================== 6. 数据表格区域 ====================
.table-card {
.list-header {
@@ -581,6 +518,19 @@ 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;
}
}
}
}