345 lines
10 KiB
Vue
345 lines
10 KiB
Vue
<template>
|
||
<div class="student-class-page">
|
||
<!-- 顶部标题栏 -->
|
||
<div class="page-top-bar">
|
||
<span class="current-class-txt">当前班级：{{ currentClassName }}</span>
|
||
<Button type="primary" @click="backPrevPage">返回上一级</Button>
|
||
</div>
|
||
|
||
<!-- 工具栏 -->
|
||
<div class="tool-bar">
|
||
<span class="list-title">学生列表</span>
|
||
<div class="btn-group">
|
||
<Button type="primary" @click="openTransferModal">调班</Button>
|
||
<Button type="success" @click="openStudentImportModal">学生导入</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 表格区域 自适应高度滚动 -->
|
||
<div class="table-wrap">
|
||
<div class="table-scroll-box">
|
||
<Table
|
||
stripe
|
||
:columns="tableColumns"
|
||
:data="studentTableData"
|
||
height="100%"
|
||
:border="false"
|
||
@on-selection-change="onTableSelect"
|
||
></Table>
|
||
</div>
|
||
<!-- 底栏：批量删除 + 分页 -->
|
||
<div class="page-footer">
|
||
<Button type="error" @click="batchDelConfirm">删除</Button>
|
||
<div class="pagination-box">
|
||
<Page
|
||
:current.sync="pageNum"
|
||
:page-size.sync="pageSize"
|
||
:total="totalCount"
|
||
:page-size-opts="[10,20,50]"
|
||
show-sizer
|
||
show-total
|
||
@on-change="loadStudentData"
|
||
@on-page-size-change="loadStudentData"
|
||
></Page>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 弹窗1：调班弹窗 -->
|
||
<Modal v-model="transferModal" title="调班" width="680">
|
||
<Form label-width="100">
|
||
<FormItem label="当前班级">
|
||
<Input v-model="currentClassName" disabled></Input>
|
||
</FormItem>
|
||
<FormItem label="*目标班级">
|
||
<div class="transfer-search-row">
|
||
<Select v-model="transferQuery.grade" placeholder="请选择" style="width:140px">
|
||
<Option value="g1">高一</Option>
|
||
<Option value="g2">高二</Option>
|
||
<Option value="g3">高三</Option>
|
||
</Select>
|
||
<Input v-model="transferQuery.keyword" placeholder="请输入关键字" style="flex:1;margin:0 10px"></Input>
|
||
<Button type="primary" @click="queryTargetClassList">查询</Button>
|
||
</div>
|
||
<div class="class-btn-box">
|
||
<Button
|
||
v-for="item in targetClassList"
|
||
:key="item.id"
|
||
size="small"
|
||
:type="selectedTargetId === item.id ? 'primary' : 'default'"
|
||
style="margin:6px"
|
||
@click="selectedTargetId = item.id"
|
||
>
|
||
{{ item.name }}
|
||
</Button>
|
||
</div>
|
||
</FormItem>
|
||
</Form>
|
||
<div slot="footer" align="right">
|
||
<Button @click="transferModal = false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="confirmTransferStudent">确定</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗2：学生信息导入 -->
|
||
<Modal v-model="importModal" title="学生信息导入" width="460">
|
||
<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="importModal = false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="confirmImport">确定</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="doBatchDelete">确定删除</Button>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "ClassStudentManage",
|
||
props: {
|
||
// 父页面传入当前班级名称与班级ID
|
||
classId: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
className: {
|
||
type: String,
|
||
default: "高一化学培优班"
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 班级信息
|
||
currentClassName: this.className,
|
||
// 分页
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
totalCount: 19,
|
||
// 表格多选
|
||
selectedStudentRows: [],
|
||
// 表格列配置
|
||
tableColumns: [
|
||
{ type: "selection", width: 50 },
|
||
{ title: "序号", type: "index", align: "center", width: 70 },
|
||
{ title: "姓名", key: "name", align: "left" },
|
||
{ title: "年级", key: "grade", align: "center" },
|
||
{ title: "班级", key: "originClass", align: "center" }
|
||
],
|
||
// 模拟学生列表数据
|
||
studentTableData: [
|
||
{ id: 1, name: "潘程", grade: "高一", originClass: "2班" },
|
||
{ id: 2, name: "张译匀", grade: "高一", originClass: "9班" },
|
||
{ id: 3, name: "宋浩扬", grade: "高一", originClass: "1班" },
|
||
{ id: 4, name: "裴劲丰", grade: "高一", originClass: "8班" },
|
||
{ id: 5, name: "余知新", grade: "高一", originClass: "8班" },
|
||
{ id: 6, name: "刘翰城", grade: "高一", originClass: "14班" },
|
||
{ id: 7, name: "于释涵", grade: "高一", originClass: "11班" },
|
||
{ id: 8, name: "王梦菡", grade: "高一", originClass: "13班" }
|
||
],
|
||
|
||
// 调班弹窗
|
||
transferModal: false,
|
||
transferQuery: {
|
||
grade: "",
|
||
keyword: ""
|
||
},
|
||
targetClassList: [],
|
||
selectedTargetId: null,
|
||
|
||
// 导入弹窗
|
||
importModal: false,
|
||
// 删除确认弹窗
|
||
delConfirmModal: false
|
||
}
|
||
},
|
||
mounted() {
|
||
this.loadStudentData()
|
||
},
|
||
methods: {
|
||
// 返回上一级（父级选修班列表页）
|
||
backPrevPage() {
|
||
this.$router.back()
|
||
},
|
||
// 加载学生分页列表
|
||
loadStudentData() {
|
||
console.log('请求参数', {
|
||
classId: this.classId,
|
||
page: this.pageNum,
|
||
size: this.pageSize
|
||
})
|
||
// 此处替换后端接口赋值 studentTableData、totalCount
|
||
},
|
||
// 表格多选事件
|
||
onTableSelect(rows) {
|
||
this.selectedStudentRows = rows
|
||
},
|
||
|
||
// 打开调班弹窗
|
||
openTransferModal() {
|
||
if (!this.selectedStudentRows.length) {
|
||
return this.$Message.warning("请先勾选需要调班的学生")
|
||
}
|
||
this.transferModal = true
|
||
this.transferQuery = { grade: "", keyword: "" }
|
||
this.selectedTargetId = null
|
||
this.targetClassList = []
|
||
},
|
||
// 查询目标可选班级
|
||
queryTargetClassList() {
|
||
// 模拟接口返回下拉班级列表
|
||
this.targetClassList = [
|
||
{ id: 1, name: "高三网球1班(2024学年)" },
|
||
{ id: 2, name: "高三排球1班(2024学年)" },
|
||
{ id: 3, name: "高三女篮1班 (2024学年)" },
|
||
{ id: 4, name: "高三男篮1班 (2024学年)" },
|
||
{ id: 5, name: "高三羽毛球1班 (2024学年)" },
|
||
{ id: 6, name: "高三足球1班 (2024学年)" },
|
||
{ id: 7, name: "高三乒乓球1班(2024学年)" },
|
||
{ id: 8, name: "高三网球2班(2024学年)" },
|
||
{ id: 9, name: "高三排球2班(2024学年)" },
|
||
{ id: 10, name: "高三足球2班(2024学年)" }
|
||
]
|
||
},
|
||
// 确认执行调班
|
||
confirmTransferStudent() {
|
||
if (!this.selectedTargetId) {
|
||
return this.$Message.warning("请选择目标班级")
|
||
}
|
||
this.$Message.success("学生调班完成")
|
||
this.transferModal = false
|
||
this.loadStudentData()
|
||
},
|
||
|
||
// 打开导入弹窗
|
||
openStudentImportModal() {
|
||
this.importModal = true
|
||
},
|
||
confirmImport() {
|
||
this.$Message.success("学生导入成功")
|
||
this.importModal = false
|
||
this.loadStudentData()
|
||
},
|
||
|
||
// 批量删除
|
||
batchDelConfirm() {
|
||
if (!this.selectedStudentRows.length) {
|
||
return this.$Message.warning("请勾选要删除的学生")
|
||
}
|
||
this.delConfirmModal = true
|
||
},
|
||
doBatchDelete() {
|
||
this.$Message.success("批量删除成功")
|
||
this.delConfirmModal = false
|
||
this.selectedStudentRows = []
|
||
this.loadStudentData()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.student-class-page {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 16px;
|
||
gap: 16px;
|
||
}
|
||
/* 顶部标题栏 */
|
||
.page-top-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.current-class-txt {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
/* 工具栏 */
|
||
.tool-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 12px;
|
||
background: #f7f8fa;
|
||
}
|
||
.list-title {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
}
|
||
.btn-group {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
/* 表格容器 自适应高度 */
|
||
.table-wrap {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
}
|
||
.table-scroll-box {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
/* 底部分页栏 */
|
||
.page-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-top: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
/* 调班弹窗查询行 */
|
||
.transfer-search-row {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.class-btn-box {
|
||
max-height: 220px;
|
||
overflow-y: auto;
|
||
border: 1px solid #e5e7eb;
|
||
padding: 8px;
|
||
margin-top: 8px;
|
||
border-radius: 4px;
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
/* 全局穿透 表格样式 与截图一致：无外框无竖线，仅行底横线 */
|
||
/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> |