init
This commit is contained in:
lijing
@@ -0,0 +1,341 @@
|
||||
<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
|
||||
border
|
||||
stripe
|
||||
:columns="tableColumns"
|
||||
:data="tableData"
|
||||
:height="useTableHeight()-12"
|
||||
@on-selection-change="selectionChange"
|
||||
></Table>
|
||||
</div>
|
||||
|
||||
<!-- 左下角批量删除 + 底部分页固定 -->
|
||||
<div class="bottom-bar">
|
||||
<Button type="default" @click="selectedStatus=1;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:'',
|
||||
enrollYear:'',
|
||||
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.getHigherSchClassTree, item, resp => {
|
||||
if(resp.code==0)
|
||||
{
|
||||
this.treeData=resp.data;
|
||||
if(resp.data.children.length>0){
|
||||
// 起始节点为 data
|
||||
const pathArr = _this.getFirstPath(resp.data);
|
||||
_this.enrollYear=pathArr[pathArr.length-1].enrollYear+'',
|
||||
_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,
|
||||
enrollYear:cur.enrollYear,
|
||||
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: 55,align: 'center'},
|
||||
{ title: '年级', key: 'gradeName', align: 'center' },
|
||||
{ title: '班级', key: 'className', align: 'center' },
|
||||
{ title: '姓名', key: 'name', align: 'center', width: 140 },
|
||||
{ title: '异动详情', key: 'abnormalStatusName', align: 'center' },
|
||||
{ title: '异动日期', key: 'className', align: 'center' },
|
||||
{ title: '身份证', key: 'idCard', align: 'center', width: 90 },
|
||||
{
|
||||
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.enrollYear=treeNode.enrollYear?treeNode.enrollYear+'':'';
|
||||
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 = {
|
||||
year:_this.enrollYear,
|
||||
classId:_this.classId,
|
||||
keyword:_this.keyword,
|
||||
page:_this.pageNum-1,
|
||||
size:_this.pageSize
|
||||
};
|
||||
_this.$api.get(APIConfig.BschClassSystem.gethigherSchAbnormalSearch, 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() {
|
||||
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: 260px;
|
||||
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>
|
||||
Reference in New Issue
Block a user