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

系统风格以及部分页面样式变更

Browse Source
This commit is contained in:
yangbin
2026-08-24 18:30:32 +08:00
parent 9f4571a40e
commit 763bf34c3a
20 changed files with 1044 additions and 537 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/teachOffice/elective/index.vue
+77 -67
View File
@@ -1,7 +1,14 @@
<template>
<div class="app-container">
<div class="app-container management-page elective-page">
<!-- ==================== 2. 查询条件区域 ==================== -->
<div class="section-card query-card">
<div class="section-heading">
<div>
<h2 class="section-title">筛选条件</h2>
<p class="section-description">按课程、班次、教员及状态筛选选修课</p>
</div>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
</div>
<el-form>
<el-row :gutter="32">
<!-- 左栏 -->
@@ -15,9 +22,13 @@
<el-input v-model="searchForm.kbcnj" placeholder="请输入可选班次年级" clearable class="q-control" />
</div>
<div class="query-field">
<el-checkbox v-model="searchForm.xxkztEnabled" />
<span class="q-label">选修课状态</span>
<el-select v-model="searchForm.xxkzt" class="q-control" :disabled="!searchForm.xxkztEnabled">
<span class="q-label no-check">选修课状态</span>
<el-select
v-model="searchForm.xxkzt"
placeholder="请选择选修课状态"
clearable
class="q-control"
>
<el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
</el-select>
</div>
@@ -34,9 +45,8 @@
<el-input v-model="searchForm.xxbmc" placeholder="请输入选修班名称" clearable class="q-control" />
</div>
<div class="query-field">
<el-checkbox v-model="searchForm.pxccEnabled" />
<span class="q-label">培训层次</span>
<el-select v-model="searchForm.pxcc" class="q-control" :disabled="!searchForm.pxccEnabled">
<span class="q-label no-check">培训层次</span>
<el-select v-model="searchForm.pxcc" placeholder="请选择培训层次" clearable class="q-control">
<el-option v-for="item in pxccOptions" :key="item" :label="item" :value="item" />
</el-select>
</div>
@@ -44,50 +54,79 @@
</el-row>
</el-form>
<div class="query-footer">
<el-button class="gray-btn" @click="handleQuery">查询</el-button>
</div>
</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 type="primary" @click="handleDownloadList">下载选修班列表</el-button>
<el-button type="primary" @click="handleDownloadWord">下载选修班学员名单Word</el-button>
<el-button type="primary" @click="handleDownloadExcel">下载选修班学员名单Excel</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>
</div>
</div>
<!-- ==================== 4. 操作按钮区域 ==================== -->
<div class="section-card action-card">
<div class="action-row">
<el-button type="primary" @click="handleOpenNew">新建选修课</el-button>
<el-button type="primary" @click="handleOpenEarly">所选批量开放报名</el-button>
<el-button type="primary" @click="handleCancelEarly">所选批量取消开放报名</el-button>
<el-button type="primary" @click="handleStopSignup">批量停止报名</el-button>
<el-button type="primary" @click="handleReverseRange">所选批量根据学员反向确定班次范围</el-button>
<div class="section-heading section-heading--compact">
<div>
<h2 class="section-title">选修课操作</h2>
<p class="section-description">新建选修课，或对已选数据执行批量操作</p>
</div>
</div>
<div class="action-row">
<el-button type="primary" @click="handleDownloadTemplate">【选修课数据文件模板】下载</el-button>
<el-button type="primary" icon="el-icon-plus" @click="handleOpenNew">新建选修课</el-button>
<el-button type="primary" plain icon="el-icon-circle-check" @click="handleOpenEarly">
所选批量开放报名
</el-button>
<el-button type="warning" plain icon="el-icon-remove-outline" @click="handleCancelEarly">
所选批量取消开放报名
</el-button>
<el-button type="danger" plain icon="el-icon-circle-close" @click="handleStopSignup">
批量停止报名
</el-button>
<el-button icon="el-icon-refresh" @click="handleReverseRange">
所选批量根据学员反向确定班次范围
</el-button>
</div>
<div class="action-row">
<el-button icon="el-icon-download" @click="handleDownloadTemplate">【选修课数据文件模板】下载</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 @click="handleSelectFile">选择文件</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" />
</div>
<div class="upload-right">
<el-button type="primary" @click="handleUpload">上传数据</el-button>
<el-button type="primary" icon="el-icon-upload2" @click="handleUpload">上传数据</el-button>
</div>
</div>
</div>
<!-- ==================== 6. 数据表格区域 ==================== -->
<div class="section-card table-card">
<div class="section-heading section-heading--compact table-heading">
<div>
<h2 class="section-title">选修课列表</h2>
<p class="section-description">共 {{ total }} 条数据</p>
</div>
</div>
<el-table v-loading="loading" :data="tableData" border stripe class="main-table" @selection-change="handleSelectionChange">
<template slot="empty">
<span>无数据！</span>
@@ -204,12 +243,10 @@ export default {
searchForm: {
js: '',
kbcnj: '',
xxkztEnabled: false,
xxkzt: '拟制',
xxkzt: '',
kckmmc: '',
xxbmc: '',
pxccEnabled: false,
pxcc: '无'
pxcc: ''
},
// ==================== 数据表格 ====================
@@ -259,8 +296,8 @@ export default {
if (this.searchForm.kbcnj) q.kxbcnj = this.searchForm.kbcnj
if (this.searchForm.kckmmc) q.kmc = this.searchForm.kckmmc
if (this.searchForm.xxbmc) q.xxbmc = this.searchForm.xxbmc
if (this.searchForm.xxkztEnabled) q.xkzt = this.searchForm.xxkzt
if (this.searchForm.pxccEnabled) q.pxcc = this.searchForm.pxcc
if (this.searchForm.xxkzt) q.xkzt = this.searchForm.xxkzt
if (this.searchForm.pxcc) q.pxcc = this.searchForm.pxcc
return q
},
@@ -423,11 +460,6 @@ export default {
margin-bottom: 14px;
min-height: 32px;
::v-deep .el-checkbox {
margin-right: 6px;
flex-shrink: 0;
}
.q-label {
width: 120px;
flex-shrink: 0;
@@ -436,10 +468,6 @@ export default {
text-align: right;
margin-right: 10px;
white-space: nowrap;
&.no-check {
margin-left: 24px;
}
}
.q-control {
@@ -447,21 +475,10 @@ export default {
min-width: 0;
}
}
}
.notice {
font-size: 12px;
color: #f56c6c;
margin-top: 8px;
text-align: left;
}
.query-footer {
display: flex;
justify-content: flex-end;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #ebeef5;
}
.export-bar {
align-items: center;
}
// ==================== 4. 操作按钮区域 ====================
@@ -501,6 +518,11 @@ export default {
}
}
}
.upload-right {
display: flex;
align-items: center;
}
}
}
@@ -518,23 +540,11 @@ export default {
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;
.pagination-wrap {
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
}
</style>