init
This commit is contained in:
lijing
@@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<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="getselectBySchId">
|
||||
<Option value="-1">全部</Option>
|
||||
<Option v-for="item in SchoolList" :key="item.id" :value="item.id">{{ item.name }}</Option>
|
||||
</Select>
|
||||
<span style="margin-left: 16px">年级：</span>
|
||||
<Select v-model="filterGrade" style="width: 140px" @on-change="getselectBySchIdAndGradeId">
|
||||
<Option value="-1">全部</Option>
|
||||
<Option v-for="item in gradeselectList" :key="item.id" :value="item.id">{{ item.name }}</Option>
|
||||
</Select>
|
||||
<span style="margin-left: 16px">班级：</span>
|
||||
<Select v-model="filterClass" style="width: 140px" @on-change="handleFilterChange">
|
||||
<Option value="-1">全部</Option>
|
||||
<Option v-for="item in schclassselectlist" :key="item.id" :value="item.id">{{ item.name }}</Option>
|
||||
</Select>
|
||||
<span>
|
||||
|
||||
</span>
|
||||
<Input
|
||||
placeholder="请输入学生姓名"
|
||||
search
|
||||
@on-search="handleSearch"
|
||||
suffix="ios-search"
|
||||
class="fr"
|
||||
style="width: 280px"
|
||||
v-model="keyword"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 自适应滚动表格容器 -->
|
||||
<div class="table-scroll-wrap">
|
||||
<Table
|
||||
border
|
||||
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
|
||||
:current.sync="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>
|
||||
<my-tree :treeData="targetTreeData" @on-tree-click="treeLink"></my-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" align="right">
|
||||
<Button @click="moveModalVisible = false">取消</Button>
|
||||
<Button type="primary" @click="submitMove">提交</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myTree from "../../components/my_tree";
|
||||
import { self_viewport } from "@/mixins/self_viewport";
|
||||
export default {
|
||||
name: 'StudentMovePage',
|
||||
components: { myTree },
|
||||
data() {
|
||||
return {
|
||||
// 筛选条件
|
||||
filterSchool: '-1',
|
||||
filterGrade: '-1',
|
||||
filterClass: '-1',
|
||||
keyword: '',
|
||||
|
||||
// 分页
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
selectedRows: [],
|
||||
SchoolList:[],
|
||||
gradeselectList:[],
|
||||
schclassselectlist:[],
|
||||
|
||||
// 表格配置式列
|
||||
tableColumns: [],
|
||||
tableData: [],
|
||||
|
||||
// 转入弹窗
|
||||
moveModalVisible: false,
|
||||
moveStuName: '',
|
||||
selectnodeid: 0,
|
||||
// 目标学校年级树形
|
||||
targetTreeData: []
|
||||
}
|
||||
},
|
||||
mixins: [self_viewport],
|
||||
created() {
|
||||
this.getstudenttransferOutSchSelect();
|
||||
this.initTableColumn();
|
||||
this.loadTableData();
|
||||
},
|
||||
methods: {
|
||||
//获取学校下拉
|
||||
getstudenttransferOutSchSelect:function(){
|
||||
const _this = this;
|
||||
var item={};
|
||||
_this.$api.get(APIConfig.BschClassSystem.studenttransferOutSchSelect, item, resp => {
|
||||
if(resp.code==0)
|
||||
{
|
||||
_this.SchoolList = resp.data;
|
||||
}else{
|
||||
_this.SchoolList=[];
|
||||
}
|
||||
});
|
||||
},
|
||||
//获取年级
|
||||
getselectBySchId:function(){
|
||||
const _this = this;
|
||||
var item={
|
||||
schId:_this.filterSchool
|
||||
};
|
||||
_this.$api.get(APIConfig.BschClassSystem.getselectBySchId, item, resp => {
|
||||
if(resp.code==0)
|
||||
{
|
||||
_this.gradeselectList = resp.data;
|
||||
}else{
|
||||
_this.gradeselectList=[];
|
||||
}
|
||||
});
|
||||
},
|
||||
//获取班级下拉
|
||||
getselectBySchIdAndGradeId:function(){
|
||||
const _this = this;
|
||||
var item={
|
||||
schId:_this.filterSchool,
|
||||
gradeId:_this.filterGrade
|
||||
};
|
||||
_this.$api.get(APIConfig.BschClassSystem.getselectBySchIdAndGradeId, item, resp => {
|
||||
if(resp.code==0)
|
||||
{
|
||||
this.schclassselectlist=resp.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 初始化表格列
|
||||
initTableColumn() {
|
||||
this.tableColumns = [
|
||||
{ type: 'selection', width: 55, align: 'center' },
|
||||
{ title: '序号', type: 'index', align: 'center', width: 70 },
|
||||
{ title: '学校', key: 'schName', align: 'center' },
|
||||
{ title: '年级', key: 'gradeName', 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() {
|
||||
const _this = this;
|
||||
var item = {
|
||||
schId:_this.filterSchool=='-1'?'':_this.filterSchool,
|
||||
gradeId:_this.filterGrade=='-1'?'':_this.filterGrade,
|
||||
classId:_this.filterClass=='-1'?'':_this.filterClass,
|
||||
keyword:_this.keyword,
|
||||
page:_this.pageNum-1,
|
||||
size:_this.pageSize
|
||||
};
|
||||
_this.$api.get(APIConfig.BschClassSystem.getstudentsearchTransferOut, item, resp => {
|
||||
if (resp.code == 0) {
|
||||
_this.tableData = resp.data.content;
|
||||
_this.total=resp.data.total;
|
||||
} else {
|
||||
_this.tableData = [];
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 下拉筛选切换
|
||||
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('请先勾选需要转入的学生')
|
||||
}
|
||||
this.moveStuName = this.selectedRows.map(a=>a.name).join(',');
|
||||
this.moveModalVisible = true;
|
||||
this.getClassTree();
|
||||
},
|
||||
//获取班级树
|
||||
getClassTree:function(){
|
||||
const _this = this;
|
||||
var item={};
|
||||
_this.$api.get(APIConfig.BschClassSystem.getClassTree, item, resp => {
|
||||
if(resp.code==0)
|
||||
{
|
||||
this.targetTreeData=resp.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 树形选中切换
|
||||
treeLink(treeNode) {
|
||||
this.selectnodeid=treeNode.id;
|
||||
},
|
||||
// 提交迁移班级
|
||||
submitMove() {
|
||||
if (!this.selectnodeid) {
|
||||
return this.$Message.warning('请选择目标年级节点')
|
||||
}
|
||||
const teacherIdArr = this.selectedRows.map(row => row.id);
|
||||
let item={
|
||||
stuIds:teacherIdArr,
|
||||
transferClassId:this.selectnodeid
|
||||
};
|
||||
const url = APIConfig.BschClassSystem.studentsetTransferIn;
|
||||
this.$api.post(url,JSON.stringify(item), resp => {
|
||||
if (resp.code == 0) {
|
||||
this.$Message.success('学生转入分组成功！');
|
||||
this.moveModalVisible = false
|
||||
this.selectedRows = []
|
||||
this.loadTableData()
|
||||
} else if (resp.code == 4) {
|
||||
this.$Message.info(resp.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.student-move-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* 顶部筛选栏 */
|
||||
.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 >>> .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>
|
||||
Reference in New Issue
Block a user