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

工具条按钮样式统一

Browse Source
This commit is contained in:
liweijie
2026-09-18 11:50:09 +08:00
parent b529f0b523
commit e27b61b5fe
8 changed files with 290 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/teachBusiness/timetable/index.vue
+26 -22
View File
@@ -86,20 +86,16 @@
</el-form>
</div>
<!-- 标题 -->
<div class="page-title">{{ pageTitle }}</div>
<!-- 下载操作按钮 -->
<el-card shadow="never" class="action-card">
<div class="button-row">
<el-button type="primary" plain size="mini" @click="handleExportPlan">学期教学实施计划</el-button>
<el-button type="primary" plain size="mini" @click="handleExportGrades">学期成绩表</el-button>
<el-button type="primary" plain size="mini" @click="handleExportCourses">课程列表另存Excel</el-button>
</div>
</el-card>
<!-- 数据表格 -->
<div class="table-card">
<div class="list-header">
<div class="list-title">{{ pageTitle }}</div>
<div class="list-actions">
<el-button type="primary" plain size="mini" @click="handleExportPlan">学期教学实施计划</el-button>
<el-button type="primary" plain size="mini" @click="handleExportGrades">学期成绩表</el-button>
<el-button type="primary" plain size="mini" @click="handleExportCourses">课程列表另存Excel</el-button>
</div>
</div>
<el-table :data="shiftData" v-loading="loading" border stripe style="width: 100%">
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column label="课程名称/课时系数" min-width="220" align="center">
@@ -445,21 +441,29 @@ export default {
}
}
.page-title {
font-size: 17px;
font-weight: 700;
color: #303133;
text-align: center;
margin-bottom: 12px;
}
.action-card {
.list-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
.button-row {
.list-title {
font-size: 17px;
font-weight: 700;
color: #303133;
}
.list-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
.el-button + .el-button {
margin-left: 0;
}
}
}
}
frontend/src/views/teachNotice/index.vue
+18 -6
View File
@@ -51,12 +51,14 @@
<!-- 数据列表区域 -->
<div class="list-heading">
<div class="list-title">公告列表</div>
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
<div class="list-actions">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
</div>
</div>
<el-table v-loading="loading" :data="noticeList" border :height="tableHeight">
<el-table-column label="序号" type="index" align="center" width="70" />
@@ -483,6 +485,16 @@ export default {
gap: 16px;
margin-bottom: 12px;
}
.list-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
.el-button + .el-button {
margin-left: 0;
}
}
.list-title {
font-size: 16px;
font-weight: 600;
frontend/src/views/teachOffice/elective/index.vue
+46 -43
View File
@@ -71,31 +71,6 @@
</div>
</div>
<!-- ==================== 4. 操作按钮区域 ==================== -->
<div class="section-card action-card">
<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" 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>
<!-- ==================== 5. 文件上传区域 ==================== -->
<div class="section-card upload-card">
<div class="section-heading section-heading--compact">
@@ -118,10 +93,19 @@
<!-- ==================== 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 class="list-header">
<div class="list-title">选修课列表<span class="list-sub">共 {{ total }} 条数据</span></div>
<div class="list-actions">
<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>
</div>
</div>
<el-table v-loading="loading" :data="tableData" border stripe class="main-table" @selection-change="handleSelectionChange">
@@ -534,20 +518,6 @@ export default {
align-items: center;
}
// ==================== 4. 操作按钮区域 ====================
.action-card {
.action-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
}
}
// ==================== 5. 文件上传区域 ====================
.upload-card {
.upload-row {
@@ -581,6 +551,39 @@ export default {
// ==================== 6. 数据表格区域 ====================
.table-card {
.list-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
.list-title {
font-size: 16px;
font-weight: 600;
color: #303133;
.list-sub {
margin-left: 10px;
font-size: 13px;
font-weight: 400;
color: #909399;
}
}
.list-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
.el-button + .el-button {
margin-left: 0;
}
}
}
.main-table {
::v-deep .cell {
font-size: 12px;
frontend/src/views/teachOffice/office/index.vue
+30 -13
View File
@@ -42,21 +42,16 @@
</el-form>
<!-- 操作按钮区域 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<div class="list-header">
<div class="list-title">教研室列表</div>
<div class="list-actions">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="info" plain icon="el-icon-upload2" size="mini" @click="openImport">导入</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleDownloadTemplate">模板下载</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="el-icon-refresh" size="mini" :loading="alignLoading" @click="handleAlignDepts">对齐组织部门</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</div>
</div>
<!-- 数据列表区域 -->
<el-table v-loading="loading" :data="officeList" border :height="tableHeight">
@@ -412,8 +407,30 @@ export default {
<style scoped lang="scss">
.teach-office {
.mb8 {
margin-bottom: 8px;
.list-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
.list-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
.list-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
.el-button + .el-button {
margin-left: 0;
}
}
}
.sync-tip {
frontend/src/views/teachOffice/shiftSemester/index.vue
+50 -43
View File
@@ -44,34 +44,31 @@
</el-form>
</el-card>
<!-- ==================== 2. 工具栏按钮区 ==================== -->
<div class="list-toolbar">
<div class="left-group">
<el-button type="primary" icon="el-icon-plus" @click="handleBatchAdd">批量创建班次学期</el-button>
<el-button type="primary" plain icon="el-icon-document-add" @click="handleAdd">新增</el-button>
<el-button type="primary" plain icon="el-icon-edit" :disabled="!currentRow" @click="handleEdit">编辑</el-button>
<el-button type="danger" plain icon="el-icon-delete" :disabled="!selection.length" @click="handleDelete">删除所选</el-button>
<el-button type="primary" plain icon="el-icon-date" :disabled="!selection.length" @click="handleQuickSetDates">快速设定学期日期</el-button>
<el-button type="primary" plain icon="el-icon-download" :disabled="!currentRow" @click="handleAbsorbDates">吸取预设日期</el-button>
<el-button type="primary" plain icon="el-icon-notebook-2" :disabled="!selection.length" @click="handleSetJxrw">批量设置教学任务</el-button>
<el-button type="primary" plain :disabled="!selection.length" @click="handleSetXqdc">批量学期第次</el-button>
<el-button type="primary" plain :disabled="!selection.length" @click="handleSetKfjypk">开放教员排课</el-button>
<el-button type="warning" plain :disabled="selection.length < 2" @click="handleWaveMerge">预设合班</el-button>
<el-button type="warning" plain :disabled="!selection.length" @click="handleWaveSplit">预设拆班</el-button>
<el-button type="primary" plain :disabled="!selection.length" @click="handleBatchGenerateTasks">批量生成必修课程</el-button>
</div>
<div class="right-group">
<el-button type="success" plain icon="el-icon-date" :disabled="!currentRow" @click="handleEditEventCalendar">编辑班历</el-button>
<el-button type="success" plain icon="el-icon-calendar" :disabled="!currentRow" @click="handleEditCalendar">编辑班次教学任务</el-button>
<el-button type="success" plain icon="el-icon-data-line" :disabled="!currentRow" @click="handleAllocation">教学配当</el-button>
<el-button type="success" plain icon="el-icon-download" :disabled="!selection.length" @click="handleExportAllocation">导出配当</el-button>
<el-button type="primary" plain icon="el-icon-upload2" :disabled="!selection.length" @click="handlePublishRunning">发布运行课表</el-button>
<el-button type="danger" plain icon="el-icon-delete-solid" :disabled="!selection.length" @click="handleWithdrawRunning">删除运行课表</el-button>
</div>
</div>
<!-- ==================== 3. 班次学期信息列表 ==================== -->
<!-- ==================== 2. 班次学期信息列表 ==================== -->
<el-card shadow="never" class="table-card">
<div class="list-header">
<div class="list-title">班次学期列表</div>
<div class="list-actions">
<el-button type="primary" icon="el-icon-plus" @click="handleBatchAdd">批量创建班次学期</el-button>
<el-button type="primary" plain icon="el-icon-document-add" @click="handleAdd">新增</el-button>
<el-button type="primary" plain icon="el-icon-edit" :disabled="!currentRow" @click="handleEdit">编辑</el-button>
<el-button type="danger" plain icon="el-icon-delete" :disabled="!selection.length" @click="handleDelete">删除所选</el-button>
<el-button type="primary" plain icon="el-icon-date" :disabled="!selection.length" @click="handleQuickSetDates">快速设定学期日期</el-button>
<el-button type="primary" plain icon="el-icon-download" :disabled="!currentRow" @click="handleAbsorbDates">吸取预设日期</el-button>
<el-button type="primary" plain icon="el-icon-notebook-2" :disabled="!selection.length" @click="handleSetJxrw">批量设置教学任务</el-button>
<el-button type="primary" plain :disabled="!selection.length" @click="handleSetXqdc">批量学期第次</el-button>
<el-button type="primary" plain :disabled="!selection.length" @click="handleSetKfjypk">开放教员排课</el-button>
<el-button type="warning" plain :disabled="selection.length < 2" @click="handleWaveMerge">预设合班</el-button>
<el-button type="warning" plain :disabled="!selection.length" @click="handleWaveSplit">预设拆班</el-button>
<el-button type="primary" plain :disabled="!selection.length" @click="handleBatchGenerateTasks">批量生成必修课程</el-button>
<el-button type="success" plain icon="el-icon-date" :disabled="!currentRow" @click="handleEditEventCalendar">编辑班历</el-button>
<el-button type="success" plain icon="el-icon-calendar" :disabled="!currentRow" @click="handleEditCalendar">编辑班次教学任务</el-button>
<el-button type="success" plain icon="el-icon-data-line" :disabled="!currentRow" @click="handleAllocation">教学配当</el-button>
<el-button type="success" plain icon="el-icon-download" :disabled="!selection.length" @click="handleExportAllocation">导出配当</el-button>
<el-button type="primary" plain icon="el-icon-upload2" :disabled="!selection.length" @click="handlePublishRunning">发布运行课表</el-button>
<el-button type="danger" plain icon="el-icon-delete-solid" :disabled="!selection.length" @click="handleWithdrawRunning">删除运行课表</el-button>
</div>
</div>
<el-table
ref="tableRef"
v-loading="loading"
@@ -1000,26 +997,36 @@ export default {
margin-bottom: 16px;
}
// ========== 2. 工具栏按钮区 ==========
.list-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
.left-group,
.right-group {
// ========== 2. 数据表格区 ==========
.table-card {
.list-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
}
gap: 12px;
margin-bottom: 16px;
.list-title {
font-size: 16px;
font-weight: 600;
color: #303133;
white-space: nowrap;
}
.list-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
.el-button + .el-button {
margin-left: 0;
}
}
}
// ========== 3. 数据表格区 ==========
.table-card {
.class-table {
width: 100%;
}
frontend/src/views/teachOffice/subject/index.vue
+39 -37
View File
@@ -52,23 +52,6 @@
</el-card>
<!-- ==================== 3. 操作按钮区域 ==================== -->
<el-card shadow="never" class="action-card">
<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" icon="el-icon-plus" @click="handleOpenDialog">新建课程科目</el-button>
<el-button type="danger" plain icon="el-icon-delete" @click="handleBatchDelete">删除所选</el-button>
</div>
<div class="action-row">
<el-button icon="el-icon-download" @click="handleDownloadTemplate">【课程科目数据文件模板】下载</el-button>
</div>
</el-card>
<!-- ==================== 4. 文件上传区域 ==================== -->
<el-card shadow="never" class="upload-card">
<div class="section-heading section-heading--compact">
@@ -92,10 +75,12 @@
<!-- ==================== 6. 数据表格区域 ==================== -->
<el-card shadow="never" class="table-card">
<div class="section-heading section-heading--compact table-heading">
<div>
<h2 class="section-title">课程科目列表</h2>
<p class="section-description">共 {{ total }} 条数据</p>
<div class="list-header">
<div class="list-title">课程科目列表<span class="list-sub">共 {{ total }} 条数据</span></div>
<div class="list-actions">
<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>
</div>
</div>
<el-table v-loading="loading" :data="tableData" stripe border highlight-current-row
@@ -642,22 +627,6 @@ export default {
}
// ==================== 3. 操作按钮区域 ====================
.action-card {
margin-bottom: 16px;
.action-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
}
}
// ==================== 4. 文件上传区域 ====================
.upload-card {
margin-bottom: 16px;
@@ -702,6 +671,39 @@ export default {
// ==================== 6. 数据表格区域 ====================
.table-card {
.list-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
.list-title {
font-size: 16px;
font-weight: 600;
color: #303133;
.list-sub {
margin-left: 10px;
font-size: 13px;
font-weight: 400;
color: #909399;
}
}
.list-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
.el-button + .el-button {
margin-left: 0;
}
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
frontend/src/views/teachOffice/taskPlan/index.vue
+44 -39
View File
@@ -36,30 +36,27 @@
</el-form>
</el-card>
<!-- ==================== 2. 操作区域 ==================== -->
<div class="list-toolbar">
<div class="left-group">
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建教学任务</el-button>
<el-button
type="success"
icon="el-icon-position"
:disabled="!selection.length"
@click="handleBatchPublish"
>批量发布（{{ selection.length }}）</el-button>
<el-button
type="danger"
icon="el-icon-delete"
:disabled="!selection.length"
@click="handleBatchDelete"
>批量删除（{{ selection.length }}）</el-button>
</div>
<div class="right-group">
<el-button icon="el-icon-collection" @click="openOfficeSummary">教研室任务书汇总</el-button>
</div>
</div>
<!-- ==================== 3. 数据表格 ==================== -->
<!-- ==================== 2. 数据表格 ==================== -->
<el-card shadow="never" class="table-card">
<div class="list-header">
<div class="list-title">教学任务列表</div>
<div class="list-actions">
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建教学任务</el-button>
<el-button
type="success"
icon="el-icon-position"
:disabled="!selection.length"
@click="handleBatchPublish"
>批量发布（{{ selection.length }}）</el-button>
<el-button
type="danger"
icon="el-icon-delete"
:disabled="!selection.length"
@click="handleBatchDelete"
>批量删除（{{ selection.length }}）</el-button>
<el-button icon="el-icon-collection" @click="openOfficeSummary">教研室任务书汇总</el-button>
</div>
</div>
<el-table
v-loading="loading"
:data="tableData"
@@ -660,26 +657,34 @@ export default {
}
}
// ========== 2. 工具栏 ==========
.list-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
.left-group,
.right-group {
// ========== 2. 数据表格区域 ==========
.table-card {
.list-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
}
gap: 12px;
margin-bottom: 16px;
.list-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
.list-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
.el-button + .el-button {
margin-left: 0;
}
}
}
// ========== 3. 数据表格区域 ==========
.table-card {
.task-table {
width: 100%;
}
frontend/src/views/teachOffice/teacher/index.vue
+37 -38
View File
@@ -33,21 +33,18 @@
</el-card>
<!-- 教员列表 -->
<div class="list-title">教员列表：</div>
<div class="list-toolbar">
<div class="left-group">
<el-button type="primary" icon="el-icon-plus" @click="handleNew">新建</el-button>
<el-button type="danger" plain icon="el-icon-delete" @click="handleDeleteSelected">删除所选</el-button>
</div>
<div class="right-group">
<el-button icon="el-icon-upload2" @click="openImportDialog">导入</el-button>
<el-button icon="el-icon-download" @click="handleExport">导出</el-button>
<el-button icon="el-icon-document" @click="handleDownloadTemplate">下载模板</el-button>
<el-button type="success" plain icon="el-icon-refresh" :loading="alignLoading" @click="handleAlignUsers">对齐到用户表</el-button>
</div>
</div>
<el-card shadow="never" class="table-card">
<div class="list-header">
<div class="list-title">教员列表</div>
<div class="list-actions">
<el-button type="primary" icon="el-icon-plus" @click="handleNew">新建</el-button>
<el-button type="danger" plain icon="el-icon-delete" @click="handleDeleteSelected">删除所选</el-button>
<el-button icon="el-icon-upload2" @click="openImportDialog">导入</el-button>
<el-button icon="el-icon-download" @click="handleExport">导出</el-button>
<el-button icon="el-icon-document" @click="handleDownloadTemplate">下载模板</el-button>
<el-button type="success" plain icon="el-icon-refresh" :loading="alignLoading" @click="handleAlignUsers">对齐到用户表</el-button>
</div>
</div>
<el-table v-loading="loading" :data="tableData" stripe border highlight-current-row
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
@@ -1363,33 +1360,35 @@ export default {
}
}
.list-title {
font-size: 16px;
font-weight: 600;
color: #303133;
margin-bottom: 12px;
}
.list-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
.left-group,
.right-group {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
}
.table-card {
margin-bottom: 16px;
.list-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
.list-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
.list-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
.el-button + .el-button {
margin-left: 0;
}
}
}
::v-deep(.el-table) {
width: 100%;
}