347 lines
9.9 KiB
Vue
347 lines
9.9 KiB
Vue
<template>
|
||
<div class="student-manage-wrap">
|
||
<!-- 左侧树形区域 固定高度滚动 -->
|
||
<div class="left-tree-box">
|
||
<my-tree :treeData="treeData" :selectId="selectnodeid" @on-tree-click="treeLink"></my-tree>
|
||
</div>
|
||
|
||
<!-- 右侧主体区域 -->
|
||
<div class="right-main-box">
|
||
<!-- 顶部按钮+搜索栏 -->
|
||
<div class="top-bar">
|
||
<div class="btn-left-group"></div>
|
||
<div class="search-wrap" style="width: 100%;text-align: right;">
|
||
<Input
|
||
v-model="searchKey"
|
||
placeholder="请输入学生姓名"
|
||
search
|
||
style="width:300px"
|
||
@on-search="handleSearch"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 表格容器：自适应剩余高度滚动 -->
|
||
<div class="table-scroll-wrap">
|
||
<Table
|
||
stripe
|
||
:columns="tableColumns"
|
||
:data="tableData"
|
||
:height="useTableHeight()+24"
|
||
@on-selection-change="selectionChange"
|
||
></Table>
|
||
</div>
|
||
|
||
<!-- 左下角批量删除 + 底部分页固定 -->
|
||
<div class="bottom-bar">
|
||
<Button type="default" @click="selectedStatus=0;submitChangeStatus()">还原</Button>
|
||
<div class="page-right">
|
||
<span style="margin-right:12px">共 {{ total }} 条</span>
|
||
<Page
|
||
:current.sync="pageNum"
|
||
:page-size="pageSize"
|
||
:total="total"
|
||
:page-size-opts="[10,20,40,50]"
|
||
show-sizer
|
||
@on-change="pageChange"
|
||
@on-page-size-change="sizeChange"
|
||
></Page>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 弹窗6：学生异动 -->
|
||
<Modal v-model="changeStatusModalVisible" title="学生异动" width="520">
|
||
<div style="padding:10px 0;">
|
||
<div style="margin-bottom:16px;display:flex;align-items:center;">
|
||
<span style="width:90px;">当前学生</span>
|
||
<Input v-model="currentStuName" disabled style="flex:1;"></Input>
|
||
</div>
|
||
<div>
|
||
<span style="width:90px;display:inline-block;margin-bottom:10px;">异动情况</span>
|
||
<div class="status-btn-wrap">
|
||
<Button
|
||
v-for="item in studentabnormallist"
|
||
:key="item.id"
|
||
:type="selectedStatus===item.id?'primary':'default'"
|
||
style="margin:6px"
|
||
@click="selectedStatus=item.id"
|
||
size="small"
|
||
>{{ item.name }}</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div slot="footer" align="right">
|
||
<Button @click="changeStatusModalVisible=false">取消</Button>
|
||
<Button type="primary" @click="submitChangeStatus">确定</Button>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import myTree from "../../components/my_tree";
|
||
import { self_viewport } from "@/mixins/self_viewport";
|
||
export default {
|
||
name: 'StudentManage',
|
||
components: { myTree },
|
||
data() {
|
||
return {
|
||
// 左侧树形数据
|
||
treeData: [],
|
||
selectnodeid:'',
|
||
schsystemId:'',
|
||
gradeId:'',
|
||
classId:'',
|
||
|
||
// 搜索
|
||
searchKey: '',
|
||
|
||
// 分页
|
||
pageNum: 1,
|
||
pageSize: 40,
|
||
total: 0,
|
||
selectedRows: [],
|
||
|
||
// 表格列配置
|
||
tableColumns: [],
|
||
tableData: [],
|
||
|
||
// 弹窗开关
|
||
changeStatusModalVisible: false,
|
||
|
||
// 异动弹窗
|
||
currentStuName: '',
|
||
selectedStatus: null,
|
||
studentabnormallist: [],
|
||
}
|
||
},
|
||
mixins: [self_viewport],
|
||
created() {
|
||
this.getClassTree();
|
||
this.initTableColumn()
|
||
},
|
||
methods: {
|
||
//获取学生状态列表
|
||
getstudentabnormal:function(){
|
||
const _this = this;
|
||
var item={};
|
||
_this.$api.get(APIConfig.BschClassSystem.getstudentabnormal, item, resp => {
|
||
if(resp.code==0)
|
||
{
|
||
this.studentabnormallist=resp.data;
|
||
}
|
||
});
|
||
},
|
||
//获取班级树
|
||
getClassTree:function(){
|
||
const _this = this;
|
||
var item={};
|
||
_this.$api.get(APIConfig.BschClassSystem.getClassTree, item, resp => {
|
||
if(resp.code==0)
|
||
{
|
||
this.treeData=resp.data;
|
||
if(resp.data.children.length>0){
|
||
// 起始节点为 data
|
||
const pathArr = _this.getFirstPath(resp.data);
|
||
_this.schsystemId=pathArr[pathArr.length-1].schsystemId;
|
||
_this.gradeId=pathArr[pathArr.length-1].gradeId+'';
|
||
_this.classId=pathArr[pathArr.length-1].classId+'';
|
||
_this.selectnodeid=pathArr[pathArr.length-1].id;
|
||
_this.loadData();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//获取最后一级的map
|
||
getFirstPath(rootNode) {
|
||
const path = [];
|
||
let cur = rootNode;
|
||
while (cur) {
|
||
// 存入当前层级关键信息
|
||
path.push({
|
||
id: cur.id,
|
||
name: cur.name,
|
||
type: cur.type,
|
||
schsystemId:cur.schsystemId,
|
||
gradeId:cur.gradeId,
|
||
classId:cur.classId,
|
||
});
|
||
// 有子节点就取第一个，没有就终止
|
||
if (cur.children && cur.children.length > 0) {
|
||
cur = cur.children[0];
|
||
} else {
|
||
cur = null;
|
||
}
|
||
}
|
||
return path;
|
||
},
|
||
// 初始化表格列 配置式columns
|
||
initTableColumn() {
|
||
this.tableColumns = [
|
||
{ type: 'selection',width: 60,align: 'center' },
|
||
{ title: '年级', key: 'gradeName', align: 'center', minWidth: 80 },
|
||
{ title: '班级', key: 'className', align: 'center', minWidth: 80 },
|
||
{ title: '姓名', key: 'name', align: 'center', minWidth: 100 },
|
||
{ title: '异动详情', key: 'abnormalStatusName', align: 'center', width: 100 },
|
||
{ title: '异动日期', key: 'abnormalDate', align: 'center', minWidth: 130 },
|
||
{ title: '身份证', key: 'idCard', align: 'center', minWidth: 140 },
|
||
{
|
||
title: '操作',
|
||
align: 'center',
|
||
width: 80,
|
||
render: (h, params) => {
|
||
return h('Button', {
|
||
props: { type: 'text', icon: 'md-create',type:'large' },
|
||
on: { click: () => this.openEditModal(params.row) }
|
||
})
|
||
}
|
||
}
|
||
]
|
||
},
|
||
|
||
// 树形选中切换
|
||
treeLink(treeNode) {
|
||
this.schsystemId=treeNode.schsystemId;
|
||
this.gradeId=treeNode.gradeId?treeNode.gradeId+'':'';
|
||
this.classId=treeNode.classId?treeNode.classId+'':'';
|
||
this.selectnodeid=treeNode.id;
|
||
this.pageNum = 1
|
||
this.loadData()
|
||
},
|
||
|
||
// 多选行回调
|
||
selectionChange(rows) {
|
||
this.selectedRows = rows
|
||
},
|
||
|
||
// 加载列表数据
|
||
loadData() {
|
||
const _this = this;
|
||
var item = {
|
||
schsystemId:_this.schsystemId,
|
||
gradeId:_this.gradeId,
|
||
classId:_this.classId,
|
||
keyword:_this.searchKey,
|
||
page:_this.pageNum-1,
|
||
size:_this.pageSize
|
||
};
|
||
_this.$api.get(APIConfig.BschClassSystem.getbaseSchAbnormalSearch, item, resp => {
|
||
if (resp.code == 0) {
|
||
_this.tableData = resp.data.content;
|
||
_this.total=resp.data.total;
|
||
} else {
|
||
_this.tableData = [];
|
||
}
|
||
});
|
||
},
|
||
|
||
// 搜索
|
||
handleSearch() {
|
||
this.pageNum = 1;
|
||
this.loadData();
|
||
},
|
||
|
||
// 分页切换
|
||
pageChange(p) {
|
||
this.pageNum = p
|
||
this.loadData()
|
||
},
|
||
sizeChange(size) {
|
||
this.pageSize = size
|
||
this.pageNum = 1
|
||
this.loadData()
|
||
},
|
||
//学生编辑状态
|
||
openEditModal(row) {
|
||
this.changeStatusModalVisible=true;
|
||
this.currentStuName=row.name;
|
||
this.getstudentabnormal();
|
||
this.selectedStatus=row.abnormalStatus;
|
||
this.selectedRows=[row];
|
||
},
|
||
//还原事件
|
||
submitChangeStatus() {
|
||
if (!this.selectedRows.length) return this.$Message.warning('请勾选学生');
|
||
const newItem = {
|
||
abnormalStatus: this.selectedStatus,
|
||
stuIds:this.selectedRows.map(a=>a.id)
|
||
}
|
||
const url = APIConfig.BschClassSystem.studentsetAbnormalStatus;
|
||
this.$api.post(url, JSON.stringify(newItem), resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success('异动状态修改完成');
|
||
this.changeStatusModalVisible = false;
|
||
this.selectedRows = [];
|
||
this.loadData();
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.student-manage-wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
gap: 16px;
|
||
box-sizing: border-box;
|
||
padding: 12px;
|
||
}
|
||
/* 左侧树固定高度 */
|
||
.left-tree-box {
|
||
width: 220px;
|
||
border: 1px solid #e6e6e6;
|
||
overflow-y: auto;
|
||
flex-shrink: 0;
|
||
}
|
||
/* 右侧整体弹性布局 */
|
||
.right-main-box {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
}
|
||
/* 顶部栏 */
|
||
.top-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 0;
|
||
margin-bottom: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
.btn-left-group {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
/* 表格自适应滚动容器 */
|
||
.table-scroll-wrap {
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
.table-scroll-wrap >>> .ivu-table {
|
||
height: 100%;
|
||
}
|
||
/* 底部栏：分页固定底部 */
|
||
.bottom-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-top: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
.page-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
/* 调班、异动弹窗按钮排版 */
|
||
.class-btn-wrap, .status-btn-wrap {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
</style> |