302 lines
8.7 KiB
Vue
302 lines
8.7 KiB
Vue
<template>
|
||
<div class="teacher-transfer-wrap">
|
||
<!-- 顶部筛选栏 -->
|
||
<div class="top-filter-bar">
|
||
<div class="search-wrap" style="width:100%;">
|
||
<span>学校：</span>
|
||
<Select v-model="filterSchool" style="width: 180px" @on-change="getgroupSelectBySchId">
|
||
<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="filterGroup" style="width: 180px" @on-change="handleFilterChange">
|
||
<Option value="-1">全部</Option>
|
||
<Option v-for="item in groupSelectBySchIdlList" :key="item.id" :value="item.id">{{ item.name }}</Option>
|
||
</Select>
|
||
<span class="fr">
|
||
<Input
|
||
placeholder="请输入教师姓名"
|
||
search
|
||
@on-search="handleSearch"
|
||
suffix="ios-search"
|
||
style="width: 280px"
|
||
v-model="searchName"
|
||
/>
|
||
</span>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 自适应滚动表格容器 -->
|
||
<div class="table-scroll-wrap">
|
||
<Table
|
||
border
|
||
stripe
|
||
:columns="tableColumns"
|
||
:data="tableData"
|
||
:height="useTableHeight()+32"
|
||
@on-selection-change="onSelectChange"
|
||
></Table>
|
||
</div>
|
||
|
||
<!-- 底部栏：转入按钮 + 固定分页 -->
|
||
<div class="bottom-bar">
|
||
<Button type="default" status="danger" @click="openTransferModal">转入</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="transferModalVisible" title="转至其他组" width="540">
|
||
<div style="padding: 15px 10px;">
|
||
<div style="margin-bottom: 18px;display: flex;align-items: center;">
|
||
<span style="width: 100px;">待移动教师：</span>
|
||
<Input v-model="moveTeacherName" disabled style="flex:1;"></Input>
|
||
</div>
|
||
<div>
|
||
<span style="width: 100px;display: inline-block;margin-bottom: 10px;color:#f56c6c;font-weight:bold;">移动至：</span>
|
||
<my-tree :treeData="groupTreeData" @on-tree-click="treeLink"></my-tree>
|
||
</div>
|
||
</div>
|
||
<div slot="footer" align="right">
|
||
<Button @click="transferModalVisible = false">取消</Button>
|
||
<Button type="primary" @click="submitTransfer">提交</Button>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import myTree from "../components/my_tree";
|
||
import { self_viewport } from "@/mixins/self_viewport";
|
||
export default {
|
||
name: 'TeacherTransferPage',
|
||
components: { myTree },
|
||
data() {
|
||
return {
|
||
// 筛选条件
|
||
filterSchool: '-1',
|
||
filterGroup: '-1',
|
||
searchName: '',
|
||
|
||
// 分页
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
selectedRows: [],
|
||
|
||
// 表格配置列
|
||
tableColumns: [],
|
||
SchoolList:[],
|
||
groupSelectBySchIdlList:[],
|
||
tableData: [],
|
||
|
||
// 转入弹窗
|
||
transferModalVisible: false,
|
||
selectnodeid:0,
|
||
moveTeacherName: '',
|
||
targetGroupNode: null,
|
||
// 目标分组树形数据
|
||
groupTreeData: []
|
||
}
|
||
},
|
||
mixins: [self_viewport],
|
||
created() {
|
||
this.getSchoolList();
|
||
this.initTableColumn()
|
||
this.loadTableData()
|
||
},
|
||
methods: {
|
||
//获取学校
|
||
getSchoolList:function(){
|
||
const _this = this;
|
||
var item={};
|
||
_this.$api.get(APIConfig.BschClassSystem.transferOutSchSelect, item, resp => {
|
||
if(resp.code==0)
|
||
{
|
||
_this.SchoolList = resp.data;
|
||
}else{
|
||
_this.SchoolList=[];
|
||
}
|
||
});
|
||
},
|
||
//获取科室
|
||
getgroupSelectBySchId:function(){
|
||
const _this = this;
|
||
var item={
|
||
schId:_this.filterSchool
|
||
};
|
||
_this.$api.get(APIConfig.BschClassSystem.getgroupSelectBySchId, item, resp => {
|
||
if(resp.code==0)
|
||
{
|
||
_this.groupSelectBySchIdlList = resp.data;
|
||
}else{
|
||
_this.groupSelectBySchIdlList=[];
|
||
}
|
||
});
|
||
},
|
||
// 初始化配置式表格列
|
||
initTableColumn() {
|
||
this.tableColumns = [
|
||
{ type: 'selection', width: 55, align: 'center' },
|
||
{ title: '序号', type: 'index', align: 'center', width: 70 },
|
||
{ title: '学校', key: 'schName', align: 'center' },
|
||
{ title: '学科组', key: 'groupNames', align: 'center', width: 110 },
|
||
{ title: '教师姓名', key: 'name', align: 'center' },
|
||
{ title: '身份证', key: 'idCard', align: 'center' },
|
||
]
|
||
},
|
||
|
||
// 勾选行回调
|
||
onSelectChange(rows) {
|
||
this.selectedRows = rows
|
||
},
|
||
|
||
// 加载列表数据
|
||
loadTableData() {
|
||
const _this = this;
|
||
var item = {
|
||
schId:_this.filterSchool=='-1'?'':_this.filterSchool,
|
||
groupId:_this.filterGroup=='-1'?'':_this.filterGroup,
|
||
keyword:_this.searchName,
|
||
page:_this.pageNum-1,
|
||
size:_this.pageSize
|
||
};
|
||
_this.$api.get(APIConfig.BschClassSystem.getsearchTransferOut, 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()
|
||
},
|
||
|
||
// 打开转入弹窗
|
||
openTransferModal() {
|
||
if (!this.selectedRows.length) {
|
||
return this.$Message.warning('请先勾选需要转入的教师')
|
||
}
|
||
this.moveTeacherName=this.selectedRows.map(a=>a.name).join(',');
|
||
this.transferModalVisible = true
|
||
this.getTeaTree();
|
||
},
|
||
//获取教师树
|
||
getTeaTree:function(){
|
||
const _this = this;
|
||
var item={};
|
||
_this.$api.get(APIConfig.BschClassSystem.getTeaTree, item, resp => {
|
||
if(resp.code==0)
|
||
{
|
||
_this.groupTreeData=resp.data;
|
||
}
|
||
});
|
||
},
|
||
// 树形选中切换
|
||
treeLink(treeNode) {
|
||
this.selectnodeid=treeNode.id;
|
||
},
|
||
// 提交转入分组
|
||
submitTransfer() {
|
||
if (!this.selectnodeid) {
|
||
return this.$Message.warning('请选择目标分组')
|
||
}
|
||
const teacherIdArr = this.selectedRows.map(row => row.schId+'_'+row.teaId);
|
||
let item={
|
||
schTeaIds:teacherIdArr,
|
||
transferGroupId:this.selectnodeid
|
||
};
|
||
const url = APIConfig.BschClassSystem.setTransferIn;
|
||
this.$api.post(url,JSON.stringify(item), resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success('教师转入分组成功！');
|
||
this.transferModalVisible = false
|
||
this.selectedRows = []
|
||
this.loadTableData()
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.teacher-transfer-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> |