init
This commit is contained in:
lijing
@@ -0,0 +1,345 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user