lijing
45a758adea
- .main-container 去掉通道默认的 1px 描边（保留白底/圆角/阴影） - 24 个视图根容器剥离自带的 border/圆角/背景/padding——它与卡片 16px 叠加成 32px， 是「双层边框 + 空隙过大」的主因 - 学科管理不再 flex:1 把图例推到卡片底部；时段设置工具条去灰底，避免与表头双色带 - 教师管理页签 activeTab 统一为字符串，与 TabPane name 一致
280 lines
8.7 KiB
Vue
280 lines
8.7 KiB
Vue
<template>
|
||
<div class="page-wrapper yh-fill">
|
||
<div class="main-container">
|
||
<div class="student-move-wrap">
|
||
<!-- 顶部筛选栏 -->
|
||
<div class="top-filter-bar">
|
||
<div class="search-wrap" style="width:100%;">
|
||
<span>学校：</span>
|
||
<Select v-model="filterSchool" style="width: 200px" @on-change="handleFilterChange">
|
||
<Option value="">全部</Option>
|
||
<Option value="上海市大宁国际小学">上海市大宁国际小学</Option>
|
||
<Option value="上海市浦东新区崂山小学 (陆家嘴校区)">上海市浦东新区崂山小学 (陆家嘴校区)</Option>
|
||
<Option value="上海市西延安中学">上海市西延安中学</Option>
|
||
</Select>
|
||
<span style="margin-left: 16px">年级：</span>
|
||
<Select v-model="filterGrade" style="width: 140px" @on-change="handleFilterChange">
|
||
<Option value="">全部</Option>
|
||
<Option value="五年级">五年级</Option>
|
||
<Option value="初三">初三</Option>
|
||
</Select>
|
||
<span style="margin-left: 16px">班级：</span>
|
||
<Select v-model="filterClass" style="width: 140px" @on-change="handleFilterChange">
|
||
<Option value="">全部</Option>
|
||
<Option value="1班">1班</Option>
|
||
<Option value="2班">2班</Option>
|
||
<Option value="4班">4班</Option>
|
||
<Option value="5班">5班</option>
|
||
<Option value="8班">8班</Option>
|
||
</Select>
|
||
<span>
|
||
|
||
</span>
|
||
<Input
|
||
placeholder="请输入教师姓名"
|
||
search
|
||
@on-search="handleSearch"
|
||
suffix="ios-search"
|
||
class="fr"
|
||
style="width: 280px"
|
||
v-model="searchName"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 自适应滚动表格容器 -->
|
||
<div class="table-scroll-wrap">
|
||
<Table
|
||
stripe
|
||
:columns="tableColumns"
|
||
:data="tableData"
|
||
:height="useTableHeight()+32"
|
||
@on-selection-change="onSelectionChange"
|
||
></Table>
|
||
</div>
|
||
|
||
<!-- 底部栏：转入按钮 + 固定分页 -->
|
||
<div class="bottom-bar">
|
||
<Button type="default" status="danger" @click="openMoveModal">转入</Button>
|
||
<div class="page-area">
|
||
<span style="margin-right: 12px">共 {{ total }} 条</span>
|
||
<Page
|
||
v-model="pageNum"
|
||
:page-size="pageSize"
|
||
:total="total"
|
||
:page-size-opts="[10,20,40]"
|
||
show-sizer
|
||
@on-change="pageChange"
|
||
@on-page-size-change="sizeChange"
|
||
></Page>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 弹窗：转至其他组 -->
|
||
<Modal v-model="moveModalVisible" title="转至其他组" width="540">
|
||
<div style="padding: 15px 10px;">
|
||
<div style="margin-bottom: 18px;display: flex;align-items: center;">
|
||
<span style="width: 105px;">待移动用户：</span>
|
||
<Input v-model="moveStuName" disabled style="flex:1;"></Input>
|
||
</div>
|
||
<div>
|
||
<span style="width: 105px;display: inline-block;margin-bottom: 10px;color:#f56c6c;font-weight:bold;">移动至：</span>
|
||
<Tree
|
||
:data="targetTreeData"
|
||
ref="targetTree"
|
||
single
|
||
style="border:1px solid #e5e7eb;max-height:320px;overflow-y:auto;padding:8px;"
|
||
></Tree>
|
||
</div>
|
||
</div>
|
||
<template #footer><div align="right">
|
||
<Button @click="moveModalVisible = false">取消</Button>
|
||
<Button type="primary" @click="submitMove">提交</Button>
|
||
</div></template>
|
||
</Modal>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { self_viewport } from "@/mixins/self_viewport";
|
||
export default {
|
||
name: 'StudentMovePage',
|
||
data() {
|
||
return {
|
||
// 筛选条件
|
||
filterSchool: '',
|
||
filterGrade: '',
|
||
filterClass: '',
|
||
keyword: '',
|
||
|
||
// 分页
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
total: 225,
|
||
selectedRows: [],
|
||
|
||
// 表格配置式列
|
||
tableColumns: [],
|
||
tableData: [
|
||
{ id: 1, serial: 1, school: '上海市大宁国际小学', grade: '五年级', className: '1班', name: '万思娴', idCard: '' },
|
||
{ id: 2, serial: 2, school: '上海市大宁国际小学', grade: '五年级', className: '4班', name: '姜涵越', idCard: '' },
|
||
{ id: 3, serial: 3, school: '上海市大宁国际小学', grade: '五年级', className: '5班', name: '胡又溪', idCard: '' },
|
||
{ id: 4, serial: 4, school: '上海市大宁国际小学', grade: '五年级', className: '8班', name: '刘语桐', idCard: '' },
|
||
{ id: 5, serial: 5, school: '上海市浦东新区崂山小学 (陆家嘴校区)', grade: '五年级', className: '1班', name: '周辛玥', idCard: '' },
|
||
{ id: 6, serial: 6, school: '上海市浦东新区崂山小学 (陆家嘴校区)', grade: '五年级', className: '2班', name: '胡羽洁', idCard: '' },
|
||
{ id: 7, serial: 7, school: '上海市西延安中学', grade: '初三', className: '2班', name: '吴弈辰', idCard: '' },
|
||
{ id: 8, serial: 8, school: '上海市西延安中学', grade: '初三', className: '4班', name: '丁昉', idCard: '' },
|
||
],
|
||
|
||
// 转入弹窗
|
||
moveModalVisible: false,
|
||
moveStuName: '',
|
||
selectedTargetNode: null,
|
||
// 目标学校年级树形
|
||
targetTreeData: [
|
||
{
|
||
title: '上海市进才中学北校',
|
||
expand: true,
|
||
children: [
|
||
{ title: '预备' },
|
||
{ title: '初一' },
|
||
{ title: '初二' },
|
||
{ title: '初三' },
|
||
]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
mixins: [self_viewport],
|
||
created() {
|
||
this.initTableColumn()
|
||
this.loadTableData()
|
||
},
|
||
methods: {
|
||
// 初始化表格列
|
||
initTableColumn() {
|
||
this.tableColumns = [
|
||
{ type: 'selection', width: 60, align: 'center' },
|
||
{ title: '序号', key: 'serial', align: 'center', width: 70 },
|
||
{ title: '学校', key: 'school', align: 'center' },
|
||
{ title: '年级', key: 'grade', align: 'center', width: 110 },
|
||
{ title: '班级', key: 'className', align: 'center', width: 90 },
|
||
{ title: '姓名', key: 'name', align: 'center' },
|
||
{ title: '身份号', key: 'idCard', align: 'center' },
|
||
]
|
||
},
|
||
|
||
// 多选勾选回调
|
||
onSelectionChange(rows) {
|
||
this.selectedRows = rows
|
||
},
|
||
|
||
// 加载列表数据
|
||
loadTableData() {
|
||
console.log('筛选参数：', this.filterSchool, this.filterGrade, this.filterClass, this.keyword, this.pageNum, this.pageSize)
|
||
/* 后端接口示例
|
||
this.$axios.get('/api/student/move/list', {
|
||
params: {
|
||
school: this.filterSchool,
|
||
grade: this.filterGrade,
|
||
className: this.filterClass,
|
||
keyword: this.keyword,
|
||
pageNum: this.pageNum,
|
||
pageSize: this.pageSize
|
||
}
|
||
}).then(res => {
|
||
this.tableData = res.data.records
|
||
this.total = res.data.total
|
||
})
|
||
*/
|
||
},
|
||
|
||
// 下拉筛选切换
|
||
handleFilterChange() {
|
||
this.pageNum = 1
|
||
this.loadTableData()
|
||
},
|
||
|
||
// 关键词搜索
|
||
handleSearch() {
|
||
this.pageNum = 1
|
||
this.loadTableData()
|
||
},
|
||
|
||
// 分页切换
|
||
pageChange(p) {
|
||
this.pageNum = p
|
||
this.loadTableData()
|
||
},
|
||
sizeChange(size) {
|
||
this.pageSize = size
|
||
this.pageNum = 1
|
||
this.loadTableData()
|
||
},
|
||
|
||
// 打开转入弹窗
|
||
openMoveModal() {
|
||
if (!this.selectedRows.length) {
|
||
return this.$Message.warning('请先勾选需要转入的学生')
|
||
}
|
||
// 单选模式：取第一个选中学生
|
||
const row = this.selectedRows[0]
|
||
this.moveStuName = row.name
|
||
this.selectedTargetNode = null
|
||
this.moveModalVisible = true
|
||
},
|
||
|
||
// 提交迁移班级
|
||
submitMove() {
|
||
if (!this.selectedTargetNode) {
|
||
return this.$Message.warning('请选择目标年级节点')
|
||
}
|
||
this.$Message.success(`已将【${this.moveStuName}】迁移至 ${this.selectedTargetNode.title}`)
|
||
this.moveModalVisible = false
|
||
this.selectedRows = []
|
||
this.loadTableData()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.student-move-wrap {width: 100%; height: 100%; display: flex; flex-direction: column; box-sizing: border-box}
|
||
|
||
/* 顶部筛选栏 */
|
||
.top-filter-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
.filter-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 表格自适应滚动容器 */
|
||
.table-scroll-wrap {
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
.table-scroll-wrap :deep(.ivu-table) {
|
||
height: 100%;
|
||
}
|
||
|
||
/* 底部栏：分页固定底部 */
|
||
.bottom-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-top: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
.page-area {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
</style> |