778 lines
29 KiB
Vue
778 lines
29 KiB
Vue
<template>
|
||
<div class="page-container">
|
||
<!-- 顶部标签栏 + 新增分组按钮 + 校本Tab编辑按钮 -->
|
||
<div class="tab-header">
|
||
<div class="tabs-wrap">
|
||
<!-- 前两个固定Tab，无编辑按钮 -->
|
||
<div
|
||
class="tab-item fixed-tab"
|
||
:class="{active: activeTab === '0'}"
|
||
@click="activeTab = '0'"
|
||
>
|
||
拓展课选修班
|
||
</div>
|
||
<div
|
||
class="tab-item fixed-tab"
|
||
:class="{active: activeTab === '1'}"
|
||
@click="activeTab = '1'"
|
||
>
|
||
走班
|
||
</div>
|
||
<!-- 动态可编辑校本Tab -->
|
||
<div
|
||
v-for="(tab, idx) in dynamicTabList"
|
||
:key="tab.id"
|
||
class="tab-item edit-tab"
|
||
:class="{active: activeTab === tab.id}"
|
||
@click="activeTab = tab.id"
|
||
>
|
||
{{ tab.name }}
|
||
<Icon type="ios-create-outline" class="edit-icon" @click.stop="openEditGroupModal(tab, idx)"></Icon>
|
||
</div>
|
||
</div>
|
||
<!-- 加号新增校本分组 -->
|
||
<Button icon="ios-add-circle-outline" class="add-tab-btn" @click="openAddGroupModal"></Button>
|
||
</div>
|
||
<!-- Tab下方全局分割线 -->
|
||
<div class="tab-divider"></div>
|
||
|
||
<!-- 顶部操作按钮栏 -->
|
||
<div class="btn-toolbar">
|
||
<div class="left-btns">
|
||
<Button type="primary" class="btn-normal" @click="openAddClassModal">添加班级</Button>
|
||
<Button type="primary" class="btn-normal" @click="handleSyncClass">同步班级</Button>
|
||
<Button type="success" class="btn-normal" @click="openImportClassModal">班级信息导入</Button>
|
||
<Button type="success" class="btn-normal" @click="openImportStudentModal">学生导入</Button>
|
||
</div>
|
||
<div class="right-filter">
|
||
<Select v-model="filterType" style="width:120px" class="filter-select">
|
||
<Option value="other">其它</Option>
|
||
</Select>
|
||
<DatePicker
|
||
placeholder="请选择开班时间"
|
||
style="width:180px;margin-left:10px"
|
||
v-model="filterOpenTime"
|
||
></DatePicker>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 表格主体区域：自适应高度滚动，分页永久固定底部 -->
|
||
<div class="table-wrap">
|
||
<div class="table-scroll-box">
|
||
<Table
|
||
stripe
|
||
:columns="tableColumns"
|
||
:data="tableData"
|
||
class="elective-table"
|
||
@on-selection-change="onSelectionChange"
|
||
height="100%"
|
||
:border="false"
|
||
></Table>
|
||
</div>
|
||
<!-- 底部分页+批量操作按钮 -->
|
||
<div class="page-footer">
|
||
<div class="batch-btns">
|
||
<Button type="error" class="btn-bottom" @click="batchDelete" icon="ios-trash">删除</Button>
|
||
<Button class="btn-bottom" style="margin-left:10px" @click="reSyncAll">重新同步</Button>
|
||
</div>
|
||
<div class="page-pagination">
|
||
<Page
|
||
:current.sync="pageNum"
|
||
:page-size.sync="pageSize"
|
||
:total="total"
|
||
:page-size-opts="[10,20,50]"
|
||
show-sizer
|
||
show-total
|
||
@on-change="loadTableData"
|
||
@on-page-size-change="loadTableData"
|
||
></Page>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 弹窗1：新增校本分组 -->
|
||
<Modal v-model="addGroupModal" title="添加组" width="420">
|
||
<Form ref="groupForm" :model="groupForm" :rules="groupRules" label-width="80">
|
||
<FormItem label="*组名称" prop="groupName">
|
||
<Input v-model="groupForm.groupName" placeholder="请输入组名称"></Input>
|
||
</FormItem>
|
||
</Form>
|
||
<div slot="footer" align="left">
|
||
<Button type="error" @click="addGroupModal=false">删除</Button>
|
||
<div style="float:right">
|
||
<Button @click="addGroupModal=false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="submitAddGroup">提交</Button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗2：编辑校本分组（对标截图红框弹窗） -->
|
||
<Modal v-model="editGroupModal" title="编辑组" width="420">
|
||
<Form ref="editGroupForm" :model="editGroupForm" :rules="editGroupRules" label-width="80">
|
||
<FormItem label="*组名称" prop="groupName">
|
||
<Input v-model="editGroupForm.groupName"></Input>
|
||
</FormItem>
|
||
</Form>
|
||
<div slot="footer" align="left">
|
||
<Button type="error" @click="confirmDelGroup">删除</Button>
|
||
<div style="float:right">
|
||
<Button @click="editGroupModal=false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="submitEditGroup">提交</Button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗3：新增选修班 -->
|
||
<Modal v-model="addClassModal" title="添加选修班" width="560">
|
||
<Form ref="addClassForm" :model="addClassForm" :rules="addClassRules" label-width="100">
|
||
<FormItem label="*班级名称" prop="className">
|
||
<Input v-model="addClassForm.className" placeholder="请输入班级名称"></Input>
|
||
</FormItem>
|
||
<FormItem label="*开班时间" prop="openTime">
|
||
<DatePicker v-model="addClassForm.openTime" placeholder="请选择开班时间" style="width:100%"></DatePicker>
|
||
</FormItem>
|
||
<FormItem label="关班时间">
|
||
<DatePicker v-model="addClassForm.closeTime" placeholder="请选择关班时间" style="width:100%"></DatePicker>
|
||
</FormItem>
|
||
<FormItem label="*选择教师" prop="teacherIds">
|
||
<div style="display:flex;gap:8px;align-items:center;margin-bottom:8px;">
|
||
<Select v-model="teacherQuery.subject" style="width:120px">
|
||
<Option value="math">数学</Option>
|
||
<Option value="chinese">语文</Option>
|
||
<Option value="english">英语</Option>
|
||
</Select>
|
||
<Input v-model="teacherQuery.keyword" placeholder="请输入关键字" style="flex:1"></Input>
|
||
<Button type="primary" @click="queryTeacherList">查询</Button>
|
||
</div>
|
||
<div class="teacher-btn-group">
|
||
<Button
|
||
v-for="item in teacherList"
|
||
:key="item.id"
|
||
size="small"
|
||
:type="addClassForm.teacherIds.includes(item.id) ? 'primary' : 'default'"
|
||
style="margin:4px"
|
||
@click="toggleTeacherSelect(item)"
|
||
>
|
||
{{ item.name }}
|
||
</Button>
|
||
</div>
|
||
<div v-if="addClassForm.teacherIds.length>0" style="margin-top:8px">
|
||
已选：
|
||
<Tag
|
||
v-for="tid in addClassForm.teacherIds"
|
||
:key="tid"
|
||
closable
|
||
@on-close="removeTeacherTag(tid)"
|
||
>
|
||
{{ getTeacherNameById(tid) }}
|
||
</Tag>
|
||
</div>
|
||
</FormItem>
|
||
<FormItem label="班级封面">
|
||
<Upload action="" :before-upload="()=>false">
|
||
<div class="upload-box">
|
||
<Icon type="ios-add" size="24"></Icon>
|
||
<p>+点击上传图片</p>
|
||
</div>
|
||
</Upload>
|
||
</FormItem>
|
||
<FormItem label="班级简介">
|
||
<Input v-model="addClassForm.intro" type="textarea" rows="4" placeholder="请输入班级简介"></Input>
|
||
</FormItem>
|
||
<FormItem label="计划招生人数">
|
||
<Input v-model.number="addClassForm.studentNum" placeholder="请输入计划招生人数"></Input>
|
||
</FormItem>
|
||
</Form>
|
||
<div slot="footer" align="right">
|
||
<Button @click="addClassModal=false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="submitAddClass">提交</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗4：编辑选修班（完全匹配截图布局） -->
|
||
<Modal v-model="editClassModal" title="编辑选修班" width="560">
|
||
<Form ref="editClassForm" :model="editClassForm" :rules="addClassRules" label-width="100">
|
||
<FormItem label="*班级名称" prop="className">
|
||
<Input v-model="editClassForm.className"></Input>
|
||
</FormItem>
|
||
<FormItem label="*开班时间" prop="openTime">
|
||
<DatePicker v-model="editClassForm.openTime" style="width:100%"></DatePicker>
|
||
</FormItem>
|
||
<!-- 已选教师标签行 -->
|
||
<div style="margin-bottom:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
|
||
<span v-for="tid in editClassForm.teacherIds" :key="tid" style="display:flex;align-items:center;border:1px solid #ccc;padding:4px 8px;border-radius:4px;">
|
||
:{{ getEditTeacherNameById(tid) }}
|
||
<Icon type="ios-close" style="margin-left:6px;cursor:pointer;color:#666" @click="removeEditTeacherTag(tid)"/>
|
||
</span>
|
||
</div>
|
||
<FormItem label="*任课教师" prop="teacherIds">
|
||
<div style="display:flex;gap:8px;align-items:center;margin-bottom:8px;">
|
||
<Select v-model="editTeacherQuery.subject" style="width:120px">
|
||
<Option value="math">数学</Option>
|
||
<Option value="chinese">语文</Option>
|
||
<Option value="english">英语</Option>
|
||
</Select>
|
||
<Input v-model="editTeacherQuery.keyword" placeholder="请输入关键字" style="flex:1"></Input>
|
||
<Button type="primary" @click="queryEditTeacherList">查询</Button>
|
||
</div>
|
||
<div class="teacher-btn-group">
|
||
<Button
|
||
v-for="item in editTeacherList"
|
||
:key="item.id"
|
||
size="small"
|
||
:type="editClassForm.teacherIds.includes(item.id) ? 'primary' : 'default'"
|
||
style="margin:4px"
|
||
@click="toggleEditTeacherSelect(item)"
|
||
>
|
||
{{ item.name }}
|
||
</Button>
|
||
</div>
|
||
</FormItem>
|
||
</Form>
|
||
<div slot="footer" align="right">
|
||
<Button @click="editClassModal=false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="submitEditClass">提交</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗5：班级信息导入 -->
|
||
<Modal v-model="importClassModal" title="班级信息导入" width="440">
|
||
<div style="margin-bottom:16px">
|
||
<a href="javascript:;" style="color:#2d78f4">点击链接下载[班级导入模板.xls]</a>
|
||
</div>
|
||
<Upload action="" :before-upload="()=>false">
|
||
<Button icon="ios-cloud-upload-outline">选择要上传的文件</Button>
|
||
</Upload>
|
||
<div slot="footer" align="right">
|
||
<Button @click="importClassModal=false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="confirmImportClass">确定</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗6：学生导入 -->
|
||
<Modal v-model="importStudentModal" title="学生导入" width="440">
|
||
<div style="margin-bottom:16px">
|
||
<a href="javascript:;" style="color:#2d78f4">点击链接下载[学生批量导入模板.xls]</a>
|
||
</div>
|
||
<Upload action="" :before-upload="()=>false">
|
||
<Button icon="ios-cloud-upload-outline">选择要上传的文件</Button>
|
||
</Upload>
|
||
<div slot="footer" align="right">
|
||
<Button @click="importStudentModal=false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="confirmImportStudent">确定</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 批量删除确认弹窗 -->
|
||
<Modal v-model="delConfirmModal" title="提示" width="360">
|
||
<Alert type="warning" show-icon>确认批量删除选中班级？删除后不可恢复</Alert>
|
||
<div slot="footer" align="right">
|
||
<Button @click="delConfirmModal=false" style="margin-right:10px">取消</Button>
|
||
<Button type="error" @click="confirmBatchDel">确定删除</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 删除分组二次确认弹窗 -->
|
||
<Modal v-model="delGroupConfirmModal" title="删除分组提示" width="380">
|
||
<Alert type="error" show-icon>确定删除该分组？分组下所有班级将会一并删除，不可恢复！</Alert>
|
||
<div slot="footer" align="right">
|
||
<Button @click="delGroupConfirmModal=false" style="margin-right:10px">取消</Button>
|
||
<Button type="error" @click="doDelGroup">确认删除</Button>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "CurriculumElectiveClass",
|
||
data() {
|
||
return {
|
||
// 激活选中项：0固定拓展课，1固定走班，其余为动态tab的id
|
||
activeTab: "2",
|
||
// 动态可编辑校本课程Tab列表，初始默认一条
|
||
dynamicTabList: [
|
||
{ id: "2", name: "校本课程" }
|
||
],
|
||
// 当前正在编辑的tab下标与对象
|
||
editTabIndex: null,
|
||
editTabItem: null,
|
||
|
||
// 筛选条件
|
||
filterType: "other",
|
||
filterOpenTime: null,
|
||
|
||
// 分页基础
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
total: 70,
|
||
selectedRows: [], // 表格多选行
|
||
|
||
// 表格列配置：操作第一个改为编辑图标按钮
|
||
tableColumns: [
|
||
{ type: "selection", width: 50 },
|
||
{ title: "#", type: "index", align: "center", width: 70 },
|
||
{ title: "班级名称", key: "className", align: "left" },
|
||
{ title: "开班时间", key: "openTime", align: "center", width: 160 },
|
||
{ title: "教师", key: "teacherName", align: "center", width: 220 },
|
||
{
|
||
title: "操作",
|
||
key: "action",
|
||
align: "center",
|
||
width: 160,
|
||
render: (h, params) => {
|
||
return h("div", { style: "display:flex;gap:6px;justify-content:center" }, [
|
||
// 第一个：编辑图标 打开编辑弹窗
|
||
h("Button", {
|
||
props: { type: "text", icon: "ios-create", size: "large" },
|
||
on: { click: () => this.openEditClass(params.row) }
|
||
}),
|
||
// 学生管理
|
||
h("Button", {
|
||
props: { type: "text", icon: "ios-people", size: "large" },
|
||
on: { click: () => this.openStudentManage(params.row) }
|
||
}),
|
||
// 同步刷新
|
||
h("Button", {
|
||
props: { type: "text", icon: "ios-refresh", size: "large" },
|
||
on: { click: () => this.singleSync(params.row) }
|
||
})
|
||
])
|
||
}
|
||
}
|
||
],
|
||
// 模拟表格数据
|
||
tableData: [
|
||
{ id: 1, className: "高一化学培优班", openTime: "2026-02-10", teacherName: "县晗", teacherIdList: [1] },
|
||
{ id: 2, className: "排球", openTime: "2026-02-11", teacherName: "阮琳玮", teacherIdList: [2] },
|
||
{ id: 3, className: "辩论与口才", openTime: "2026-02-12", teacherName: "蔡韵怡", teacherIdList: [3] },
|
||
{ id: 4, className: "银行实务&经济学原理简析", openTime: "2026-02-13", teacherName: "任蕾,吕婷", teacherIdList: [4,5] },
|
||
{ id: 5, className: "叩问与回响:经典短篇小说的细读与鉴赏", openTime: "2026-02-14", teacherName: "韩佳慧", teacherIdList: [6] },
|
||
{ id: 6, className: "叙事的镜子:文学与其影视改编", openTime: "2026-02-15", teacherName: "李嘉萱", teacherIdList: [7] },
|
||
{ id: 7, className: "寻迹\"唐宋八大家\"", openTime: "2026-02-16", teacherName: "苏煦雯", teacherIdList: [8] },
|
||
{ id: 8, className: "高二数学基础班", openTime: "2026-02-17", teacherName: "蓝怡", teacherIdList: [9] }
|
||
],
|
||
|
||
// ========== 添加分组弹窗 ==========
|
||
addGroupModal: false,
|
||
groupForm: { groupName: "" },
|
||
groupRules: { groupName: [{ required: true, message: "请输入组名称", trigger: "blur" }] },
|
||
|
||
// ========== 编辑分组弹窗（对标截图） ==========
|
||
editGroupModal: false,
|
||
editGroupForm: { groupName: "" },
|
||
editGroupRules: { groupName: [{ required: true, message: "请输入组名称", trigger: "blur" }] },
|
||
delGroupConfirmModal: false,
|
||
|
||
// ========== 新增班级弹窗 ==========
|
||
addClassModal: false,
|
||
addClassForm: {
|
||
className: "",
|
||
openTime: null,
|
||
closeTime: null,
|
||
teacherIds: [],
|
||
intro: "",
|
||
studentNum: null
|
||
},
|
||
addClassRules: {
|
||
className: [{ required: true, message: "请填写班级名称", trigger: "blur" }],
|
||
openTime: [{ required: true, message: "请选择开班时间", trigger: "change" }],
|
||
teacherIds: [{ required: true, message: "请至少选择一位任课教师", trigger: "change" }]
|
||
},
|
||
teacherQuery: { subject: "math", keyword: "" },
|
||
teacherList: [],
|
||
|
||
// ========== 编辑班级弹窗 ==========
|
||
editClassModal: false,
|
||
editCurrentRow: null,
|
||
editClassForm: {
|
||
className: "",
|
||
openTime: null,
|
||
teacherIds: []
|
||
},
|
||
editTeacherQuery: { subject: "math", keyword: "" },
|
||
editTeacherList: [],
|
||
|
||
// ========== 导入弹窗 ==========
|
||
importClassModal: false,
|
||
importStudentModal: false,
|
||
// 批量删除确认
|
||
delConfirmModal: false
|
||
}
|
||
},
|
||
mounted() {
|
||
this.loadTableData();
|
||
},
|
||
methods: {
|
||
// 加载表格分页数据
|
||
loadTableData() {
|
||
console.log("分页查询参数", {
|
||
page: this.pageNum,
|
||
size: this.pageSize,
|
||
tabId: this.activeTab,
|
||
filter: this.filterType,
|
||
time: this.filterOpenTime
|
||
});
|
||
// 此处替换后端接口赋值tableData、total
|
||
},
|
||
// 表格多选
|
||
onSelectionChange(rows) {
|
||
this.selectedRows = rows;
|
||
},
|
||
|
||
// 打开【新增校本分组】弹窗
|
||
openAddGroupModal() {
|
||
this.addGroupModal = true;
|
||
this.groupForm.groupName = "";
|
||
this.$nextTick(() => this.$refs.groupForm.clearValidate());
|
||
},
|
||
// 提交新增分组
|
||
submitAddGroup() {
|
||
this.$refs.groupForm.validate(valid => {
|
||
if (!valid) return;
|
||
const newId = Date.now().toString();
|
||
this.dynamicTabList.push({
|
||
id: newId,
|
||
name: this.groupForm.groupName
|
||
})
|
||
this.activeTab = newId;
|
||
this.$Message.success("分组新增成功");
|
||
this.addGroupModal = false;
|
||
this.loadTableData();
|
||
})
|
||
},
|
||
|
||
// 打开【编辑组】弹窗（点击Tab右上角铅笔图标）
|
||
openEditGroupModal(tabItem, index) {
|
||
this.editTabItem = tabItem;
|
||
this.editTabIndex = index;
|
||
this.editGroupForm.groupName = tabItem.name;
|
||
this.editGroupModal = true;
|
||
this.$nextTick(() => this.$refs.editGroupForm.clearValidate());
|
||
},
|
||
// 提交编辑分组名称
|
||
submitEditGroup() {
|
||
this.$refs.editGroupForm.validate(valid => {
|
||
if (!valid) return;
|
||
this.dynamicTabList[this.editTabIndex].name = this.editGroupForm.groupName;
|
||
this.$Message.success("分组名称修改成功");
|
||
this.editGroupModal = false;
|
||
})
|
||
},
|
||
// 点击弹窗删除按钮，弹出二次确认
|
||
confirmDelGroup() {
|
||
this.editGroupModal = false;
|
||
this.delGroupConfirmModal = true;
|
||
},
|
||
// 真正执行删除分组
|
||
doDelGroup() {
|
||
this.dynamicTabList.splice(this.editTabIndex, 1);
|
||
// 如果删的是当前激活tab，默认切到第一个动态tab
|
||
if (this.activeTab === this.editTabItem.id && this.dynamicTabList.length) {
|
||
this.activeTab = this.dynamicTabList[0].id;
|
||
} else if (!this.dynamicTabList.length) {
|
||
this.activeTab = "0";
|
||
}
|
||
this.delGroupConfirmModal = false;
|
||
this.$Message.success("分组已删除");
|
||
this.loadTableData();
|
||
},
|
||
|
||
// 2. 添加班级
|
||
openAddClassModal() {
|
||
this.addClassModal = true;
|
||
this.addClassForm = {
|
||
className: "", openTime: null, closeTime: null, teacherIds: [], intro: "", studentNum: null
|
||
};
|
||
this.teacherList = [];
|
||
this.teacherQuery = { subject: "math", keyword: "" };
|
||
this.$nextTick(() => this.$refs.addClassForm.clearValidate());
|
||
},
|
||
// 查询教师列表
|
||
queryTeacherList() {
|
||
// 模拟接口返回教师数组
|
||
this.teacherList = [
|
||
{ id: 1, name: "陶为玉" }, { id: 2, name: "丁雪芬" }, { id: 3, name: "贺少君" },
|
||
{ id: 4, name: "金添玉" }, { id: 5, name: "田雪婷" }, { id: 6, name: "金慧" },
|
||
{ id: 7, name: "翁海红" }, { id: 8, name: "钱李铭" }, { id: 9, name: "邱侯晗" },
|
||
{ id: 10, name: "沈裴裴" }, { id: 11, name: "左惊喜" }, { id: 12, name: "东昌测试1" },
|
||
{ id: 13, name: "苏煦雯" }, { id: 14, name: "李嘉萱" }, { id: 15, name: "王心洁" },
|
||
{ id: 16, name: "蓝怡" }, { id: 17, name: "鄢泓" }, { id: 18, name: "颜国连" }
|
||
];
|
||
},
|
||
// 切换教师勾选
|
||
toggleTeacherSelect(item) {
|
||
const idx = this.addClassForm.teacherIds.indexOf(item.id);
|
||
if (idx > -1) {
|
||
this.addClassForm.teacherIds.splice(idx, 1);
|
||
} else {
|
||
this.addClassForm.teacherIds.push(item.id);
|
||
}
|
||
},
|
||
removeTeacherTag(tid) {
|
||
const i = this.addClassForm.teacherIds.indexOf(tid);
|
||
if (i > -1) this.addClassForm.teacherIds.splice(i, 1);
|
||
},
|
||
getTeacherNameById(tid) {
|
||
const t = this.teacherList.find(s => s.id === tid);
|
||
return t ? t.name : "";
|
||
},
|
||
submitAddClass() {
|
||
this.$refs.addClassForm.validate(valid => {
|
||
if (!valid) return;
|
||
this.$Message.success("新增选修班成功");
|
||
this.addClassModal = false;
|
||
this.loadTableData();
|
||
})
|
||
},
|
||
|
||
// 3. 编辑班级（行编辑按钮触发）
|
||
openEditClass(row) {
|
||
this.editCurrentRow = row;
|
||
this.editClassModal = true;
|
||
this.editClassForm = {
|
||
className: row.className,
|
||
openTime: row.openTime,
|
||
teacherIds: row.teacherIdList || []
|
||
};
|
||
this.editTeacherList = [];
|
||
this.editTeacherQuery = { subject: "math", keyword: "" };
|
||
this.$nextTick(() => this.$refs.editClassForm.clearValidate());
|
||
},
|
||
queryEditTeacherList() {
|
||
// 匹配截图教师列表
|
||
this.editTeacherList = [
|
||
{ id: 101, name: "薛志明" }, { id: 102, name: "金瑜" }, { id: 103, name: "向荣" }, { id: 104, name: "张锦花" },
|
||
{ id: 105, name: "周慧敏" }, { id: 106, name: "张凌敏" }, { id: 107, name: "孙丽杰" }, { id: 108, name: "乔瑜" },
|
||
{ id: 109, name: "潘悦" }, { id: 110, name: "强熙" }, { id: 111, name: "张静漪" }, { id: 112, name: "杨雪" },
|
||
{ id: 113, name: "陈梦舟" }, { id: 114, name: "解颖" }, { id: 115, name: "施瑞安" }, { id: 116, name: "殷继宗" },
|
||
{ id: 117, name: "王恩跃" }, { id: 118, name: "徐丽丽" }, { id: 119, name: "吴萍" }, { id: 120, name: "王妍婷" }
|
||
];
|
||
},
|
||
toggleEditTeacherSelect(item) {
|
||
const idx = this.editClassForm.teacherIds.indexOf(item.id);
|
||
if (idx > -1) this.editClassForm.teacherIds.splice(idx, 1);
|
||
else this.editClassForm.teacherIds.push(item.id);
|
||
},
|
||
removeEditTeacherTag(tid) {
|
||
const i = this.editClassForm.teacherIds.indexOf(tid);
|
||
if (i > -1) this.editClassForm.teacherIds.splice(i, 1);
|
||
},
|
||
getEditTeacherNameById(tid) {
|
||
const t = this.editTeacherList.find(s => s.id === tid);
|
||
return t ? t.name : "";
|
||
},
|
||
submitEditClass() {
|
||
this.$refs.editClassForm.validate(valid => {
|
||
if (!valid) return;
|
||
this.$Message.success("编辑班级成功");
|
||
this.editClassModal = false;
|
||
this.loadTableData();
|
||
})
|
||
},
|
||
|
||
// 导入弹窗
|
||
openImportClassModal() { this.importClassModal = true; },
|
||
confirmImportClass() {
|
||
this.$Message.success("班级导入完成");
|
||
this.importClassModal = false;
|
||
this.loadTableData();
|
||
},
|
||
openImportStudentModal() { this.importStudentModal = true; },
|
||
confirmImportStudent() {
|
||
this.$Message.success("学生导入完成");
|
||
this.importStudentModal = false;
|
||
},
|
||
|
||
// 顶部按钮：同步班级
|
||
handleSyncClass() {
|
||
this.$Message.success("同步班级操作完成");
|
||
this.loadTableData();
|
||
},
|
||
// 底部：重新同步全部
|
||
reSyncAll() {
|
||
this.$Message.success("全局重新同步完成");
|
||
this.loadTableData();
|
||
},
|
||
// 单条行内同步
|
||
singleSync(row) {
|
||
this.$Message.success(`【${row.className}】同步成功`);
|
||
},
|
||
// 学生管理
|
||
openStudentManage(row) {
|
||
this.$router.push({path:'/electiveClassManageDetail'});
|
||
},
|
||
|
||
// 批量删除
|
||
batchDelete() {
|
||
if (!this.selectedRows.length) return this.$Message.warning("请先勾选要删除的班级");
|
||
this.delConfirmModal = true;
|
||
},
|
||
confirmBatchDel() {
|
||
this.$Message.success("批量删除成功");
|
||
this.delConfirmModal = false;
|
||
this.selectedRows = [];
|
||
this.loadTableData();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 16px;
|
||
gap: 14px;
|
||
}
|
||
/* 顶部Tab栏整体布局 */
|
||
.tab-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.tabs-wrap {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
/* Tab核心样式：仅底部下划线选中，无边框无背景 */
|
||
.tab-item {
|
||
padding: 8px 16px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
border: none;
|
||
border-bottom: 2px solid transparent;
|
||
background: transparent;
|
||
margin-right: 4px;
|
||
border-top-left-radius: 0;
|
||
border-top-right-radius: 0;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.tab-item.active {
|
||
background: transparent;
|
||
border-top: none;
|
||
border-bottom: 2px solid #3377dd;
|
||
font-weight: 500;
|
||
}
|
||
.fixed-tab {
|
||
cursor: default;
|
||
}
|
||
.edit-icon {
|
||
font-size: 16px;
|
||
color: #666;
|
||
cursor: pointer;
|
||
}
|
||
.add-tab-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
}
|
||
/* Tab下方通栏分割线 */
|
||
.tab-divider {
|
||
width: 100%;
|
||
border-bottom: 1px solid #dcdcdc;
|
||
}
|
||
/* 顶部按钮工具栏 */
|
||
.btn-toolbar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 16px;
|
||
background: #f7f8fa;
|
||
border-radius: 4px;
|
||
flex-shrink: 0;
|
||
}
|
||
.left-btns {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: center;
|
||
}
|
||
.btn-normal {
|
||
padding: 6px 14px;
|
||
}
|
||
.filter-select {
|
||
margin-right: 8px;
|
||
}
|
||
/* 表格自适应容器，移除外层边框 */
|
||
.table-wrap {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
border: none;
|
||
border-radius: 0;
|
||
}
|
||
.table-scroll-box {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
}
|
||
.elective-table {
|
||
width: 100%;
|
||
}
|
||
/* 底部分页与按钮 */
|
||
.page-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 14px 0;
|
||
flex-shrink: 0;
|
||
}
|
||
.batch-btns {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.btn-bottom {
|
||
padding: 6px 16px;
|
||
}
|
||
/* 教师多选按钮组 */
|
||
.teacher-btn-group {
|
||
max-height: 180px;
|
||
overflow-y: auto;
|
||
border: 1px solid #e5e7eb;
|
||
padding: 8px;
|
||
border-radius: 4px;
|
||
}
|
||
/* 上传封面框 */
|
||
.upload-box {
|
||
width: 120px;
|
||
height: 120px;
|
||
border: 1px dashed #ccc;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #999;
|
||
border-radius: 4px;
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
/* 全局穿透修改iView表格，完全匹配截图：无外框、无竖线、仅行底横线 */
|
||
/deep/ .ivu-table {
|
||
border: none !important;
|
||
}
|
||
/deep/ .ivu-table-header th {
|
||
border: none;
|
||
border-bottom: 1px solid #eee;
|
||
text-align: center;
|
||
background: #fff;
|
||
}
|
||
/deep/ .ivu-table td {
|
||
border-left: none !important;
|
||
border-right: none !important;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
/deep/ .ivu-table-row {
|
||
border: none;
|
||
}
|
||
/deep/ .ivu-table-stripe .ivu-table-row:nth-child(even) {
|
||
background-color: #fafafa;
|
||
}
|
||
</style> |