947 lines
34 KiB
Vue
947 lines
34 KiB
Vue
<template>
|
||
<div class="outer-wrap">
|
||
<div class="page-flex-layout">
|
||
<!-- 左侧分组树形栏 -->
|
||
<div class="tree-sidebar">
|
||
<div class="tree-op-buttons">
|
||
<Tooltip content="添加子组" placement="top-start">
|
||
<Button shape="circle" size="default" @click="openAddGroupModal" title="添加子组">
|
||
<Icon type="ios-add"></Icon>
|
||
</Button>
|
||
</Tooltip>
|
||
<Tooltip content="修改子组" placement="top-start">
|
||
<Button :disabled="selectnodetype==7" shape="circle" size="default" @click="openEditGroupModal" title="修改子组">
|
||
<Icon type="ios-create-outline"></Icon>
|
||
</Button>
|
||
</Tooltip>
|
||
<Tooltip content="移动子组" placement="top-start">
|
||
<Button :disabled="selectnodetype==7" shape="circle" size="default" @click="openMoveGroupModal" title="移动子组">
|
||
<Icon type="ios-folder-open"></Icon>
|
||
</Button>
|
||
</Tooltip>
|
||
<Tooltip content="删除子组" placement="top-start">
|
||
<Button :disabled="selectnodetype==7" shape="circle" size="default" @click="delCurrentGroup" title="删除子组">
|
||
<Icon type="ios-trash"></Icon>
|
||
</Button>
|
||
</Tooltip>
|
||
</div>
|
||
<my-tree :treeData="treeData" @on-tree-click="treeLink"></my-tree>
|
||
</div>
|
||
|
||
<!-- 右侧教师主体区域 -->
|
||
<div class="right-main">
|
||
<!-- 顶部操作栏 -->
|
||
<div class="top-tool-bar">
|
||
<div class="left-btn-group">
|
||
<Button :disabled="selectnodetype==7" type="primary" @click="openAddTeacherModal">添加教师</Button>
|
||
<Button type="success" style="margin-left:10px" @click="openImportModal">教师导入</Button>
|
||
</div>
|
||
<div class="search-wrap">
|
||
<Input
|
||
class="fr"
|
||
v-model="searchKeyword"
|
||
placeholder="请输入教师名字或教师账号"
|
||
search
|
||
style="width:260px"
|
||
@on-search="searchTeacher"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- 【修复重点容器】表格自适应区域 -->
|
||
<div class="table-adapt-wrap">
|
||
<div class="table-scroll">
|
||
<Table
|
||
border
|
||
stripe
|
||
:columns="tableColumns"
|
||
:data="tableData"
|
||
class="teacher-table"
|
||
@on-selection-change="selectionChange"
|
||
:height="useTableHeight({ isSearch: true, isOperat: true })-22"
|
||
></Table>
|
||
</div>
|
||
<!-- 分页栏：永远固定在表格底部，不跟随滚动 -->
|
||
<div class="bottom-bar">
|
||
<div class="batch-btn-group">
|
||
<Button type="error" @click="batchDeleteTeacher">删除教师</Button>
|
||
<Button style="margin-left:8px" @click="batchTransferTeacher">转出教师</Button>
|
||
<Button style="margin-left:8px" @click="openBatchMoveTeacherModal">移动教师</Button>
|
||
<Button style="margin-left:8px" @click="openSetStatusModal">设置状态</Button>
|
||
</div>
|
||
<div class="pagination-wrap">
|
||
<Page
|
||
:current.sync="pageNum"
|
||
:total="total"
|
||
:page-size="pageSize"
|
||
:page-size-opts="[10,20,50]"
|
||
show-sizer
|
||
show-total
|
||
@on-change="pageChange"
|
||
@on-page-size-change="sizeChange"
|
||
></Page>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 弹窗1：添加教师 -->
|
||
<Modal v-model="addTeacherModal" title="添加教师" width="540">
|
||
<Form ref="addTeacherForm" :model="addTeacherFormData" :rules="addTeacherRules" label-width="110">
|
||
<FormItem label="教师姓名" prop="teacherName">
|
||
<Input v-model="addTeacherFormData.teacherName" placeholder="请输入老师姓名"></Input>
|
||
</FormItem>
|
||
<FormItem label="用户名" prop="account">
|
||
<Input v-model="addTeacherFormData.account" placeholder="请输入用户名"></Input>
|
||
</FormItem>
|
||
<FormItem label="密码" prop="password">
|
||
<Input v-model="addTeacherFormData.password" placeholder="请输入密码" type="password"></Input>
|
||
</FormItem>
|
||
<FormItem label="身份证号" prop="idCard">
|
||
<Input v-model="addTeacherFormData.idCard" placeholder="请输入身份证号"></Input>
|
||
</FormItem>
|
||
<FormItem label="手机号" prop="phone">
|
||
<Input v-model="addTeacherFormData.phone" placeholder="请输入手机号"></Input>
|
||
</FormItem>
|
||
<FormItem label="性别" prop="gender">
|
||
<Select v-model="addTeacherFormData.gender" style="width:100%" transfer>
|
||
<Option value="1">男</Option>
|
||
<Option value="0">女</Option>
|
||
</Select>
|
||
</FormItem>
|
||
</Form>
|
||
<div slot="footer" align="right">
|
||
<Button @click="addTeacherModal = false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="submitAddTeacher">提交</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗2：编辑教师 -->
|
||
<Modal v-model="editTeacherModal" title="编辑教师" width="540">
|
||
<Form ref="editTeacherForm" :model="editTeacherFormData" :rules="editTeacherRules" label-width="110">
|
||
<FormItem label="教师姓名" prop="teacherName">
|
||
<Input v-model="editTeacherFormData.teacherName"></Input>
|
||
</FormItem>
|
||
<FormItem label="用户名" prop="account">
|
||
<Input v-model="editTeacherFormData.account"></Input>
|
||
</FormItem>
|
||
<FormItem label="身份证号" prop="idCard">
|
||
<Input v-model="editTeacherFormData.idCard"></Input>
|
||
</FormItem>
|
||
<FormItem label="手机号" prop="phone">
|
||
<Input v-model="editTeacherFormData.phone"></Input>
|
||
</FormItem>
|
||
<FormItem label="性别" prop="gender">
|
||
<Select v-model="editTeacherFormData.gender" style="width:100%" transfer>
|
||
<Option value="1">男</Option>
|
||
<Option value="0">女</Option>
|
||
</Select>
|
||
</FormItem>
|
||
</Form>
|
||
<div slot="footer" align="right">
|
||
<Button @click="editTeacherModal = false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="submitEditTeacher">提交</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗3：教师导入 -->
|
||
<Modal v-model="importModal" title="教师导入" width="460">
|
||
<div class="main-contents">
|
||
<Form ref="UpParmas.datapre" :model="UpParmas.datapre" :label-width="100" inline>
|
||
<FormItem label="Excel上传:" style="margin-bottom:10px;width:100%;">
|
||
<i-input type="text" style="width:90%;" v-model="UpParmas.fileName" class="import-input" placeholder="未选中任何文件.." readonly></i-input>
|
||
<Upload class="fr btn"
|
||
:action="UpParmas.actionUrl"
|
||
:data="UpParmas.datapre"
|
||
:show-upload-list="false"
|
||
:headers="uploadHeader"
|
||
accept=".xls,.xlsx"
|
||
:before-upload="handleUpload"
|
||
:on-success="importFile"
|
||
>
|
||
<i-button icon="md-add"></i-button>
|
||
</Upload>
|
||
</FormItem>
|
||
<FormItem v-if="UpParmas.listData.data!=null" style="margin-bottom:10px">
|
||
<div v-if="UpParmas.listData.code==0" style="color:red">导入失败，请修改Excel文件中相关数据后再重新上传！</div>
|
||
<div v-if="UpParmas.listData.code!=0" style="color:green">导入成功！</div>
|
||
</FormItem>
|
||
</Form>
|
||
|
||
<Alert show-icon>
|
||
操作说明：
|
||
<Icon type="ios-bulb-outline" slot="icon" size="20"></Icon>
|
||
<template slot="desc" style="font-size: 12px;">
|
||
请先上传EXCEL文件，若成功则显示导入成功数据，否则显示错误的数据及错误原因;<br>
|
||
EXCEL文件的格式()：工作表(WorkSheet)的名称应设为缺省的[Sheet1]；<br>
|
||
<a @click="MoBanExceldaochu" style="font-size:12px;">点击链接下载[教师导入模板.xls]</a>
|
||
</template>
|
||
</Alert>
|
||
|
||
<Table :columns="UpParmas.columns" :data="UpParmas.listData.data" v-if="UpParmas.listData.data"></Table>
|
||
</div>
|
||
<Spin fix v-if="spinShow">
|
||
<Icon type="ios-loading" size=30 class="demo-spin-icon-load"></Icon>
|
||
<div>上传中...</div>
|
||
</Spin>
|
||
<div slot="footer">
|
||
<i-Button @click="UpfileModalcloseclick" style="margin-left: 8px">关闭</i-Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗4：添加子组 -->
|
||
<Modal v-model="addGroupModal" title="添加子组" width="420">
|
||
<Form ref="addGroupForm" :model="addGroupFormData" :rules="addGroupRules" label-width="90">
|
||
<FormItem label="组名称">
|
||
<Input v-model="addGroupFormData.parentGroupName" disabled></Input>
|
||
</FormItem>
|
||
<FormItem label="子组名称" prop="groupName">
|
||
<Input v-model="addGroupFormData.groupName" placeholder="请输入组名称"></Input>
|
||
</FormItem>
|
||
<FormItem label="子组排序">
|
||
<Input v-model="addGroupFormData.sort"></Input>
|
||
</FormItem>
|
||
</Form>
|
||
<div slot="footer" align="right">
|
||
<Button @click="addGroupModal = false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="submitAddGroup">提交</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗5：修改子组 -->
|
||
<Modal v-model="editGroupModal" title="修改子组" width="420">
|
||
<Form ref="editGroupForm" :model="editGroupFormData" :rules="editGroupRules" label-width="90">
|
||
<FormItem label="子组名称" prop="groupName">
|
||
<Input v-model="editGroupFormData.groupName"></Input>
|
||
</FormItem>
|
||
<FormItem label="子组排序">
|
||
<Input v-model="editGroupFormData.sort"></Input>
|
||
</FormItem>
|
||
</Form>
|
||
<div slot="footer" align="right">
|
||
<Button @click="editGroupModal = false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="submitEditGroup">提交</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗6：移动子组 -->
|
||
<Modal v-model="moveGroupModal" title="移动子组" width="440">
|
||
<div style="margin-bottom:12px">
|
||
<span>待移动组：</span>
|
||
<Input v-model="moveGroupTargetName" disabled style="width:280px;display:inline-block;margin-left:6px"></Input>
|
||
</div>
|
||
<div style="margin-top:10px">
|
||
<span>移动至：</span>
|
||
<Tree :data="treeData" ref="moveGroupTreeRef"></Tree>
|
||
</div>
|
||
<div slot="footer" align="right">
|
||
<Button @click="moveGroupModal = false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="confirmMoveGroup">确定</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗7：批量删除确认 -->
|
||
<Modal v-model="batchDeleteModal" title="删除" width="400">
|
||
<Alert type="warning" show-icon>
|
||
确定是否删除教师？<br/>删除后将不可恢复。
|
||
</Alert>
|
||
<div slot="footer" align="right">
|
||
<Button @click="batchDeleteModal = false" style="margin-right:10px">取消</Button>
|
||
<Button type="error" @click="confirmBatchDelete">确定</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗8：移动教师弹窗 -->
|
||
<!-- 弹窗8：移动教师弹窗（无箭头，勾选自动进右侧，右侧删除自动取消左侧勾选） -->
|
||
<Modal v-model="moveTeacherModal" title="移动教师" width="680">
|
||
<div style="margin-bottom:16px;display:flex;align-items:center;">
|
||
<span style="white-space:nowrap;margin-right:10px;">待移动教师：</span>
|
||
<Input v-model="moveTeacherName" disabled style="flex:1" />
|
||
</div>
|
||
<div style="display:flex;align-items:stretch;gap:12px;">
|
||
<!-- 左侧：选择组 zTree勾选树 -->
|
||
<div style="flex:1;border:1px solid #dcdcdc;display:flex;flex-direction:column;">
|
||
<div style="background:#3377dd;color:#fff;padding:8px 12px;text-align:center;font-weight:bold;">选择组</div>
|
||
<div style="flex:1;overflow:auto;padding:8px;">
|
||
<my-tree
|
||
ref="moveTeacherLeftTree"
|
||
:treeData="treeData"
|
||
:setting="treeSetting"
|
||
@on-tree-Check="checkedtreeLink"
|
||
></my-tree>
|
||
</div>
|
||
</div>
|
||
<!-- 中间箭头区域直接删除，不再需要 -->
|
||
<!-- 右侧：移动至组 已选列表 带单条删除 -->
|
||
<div style="flex:1;border:1px solid #dcdcdc;display:flex;flex-direction:column;">
|
||
<div style="background:#3377dd;color:#fff;padding:8px 12px;text-align:center;font-weight:bold;">移动至组</div>
|
||
<div style="flex:1;overflow:auto;padding:8px;">
|
||
<div
|
||
v-for="(item,idx) in targetGroupList"
|
||
:key="item.id"
|
||
style="padding:4px 0;display:flex;align-items:center;gap:6px;justify-content:space-between;"
|
||
>
|
||
<div style="display:flex;align-items:center;gap:6px;">
|
||
<Icon type="ios-checkbox-outline"></Icon>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
<Icon
|
||
type="ios-close"
|
||
style="color:#f56c6c;cursor:pointer;font-size:16px;"
|
||
@click="handleDeleteRightItem(item, idx)"
|
||
/>
|
||
</div>
|
||
<div v-if="targetGroupList.length === 0" style="color:#999;text-align:center;padding:20px 0;">暂无选中分组</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div slot="footer" align="right">
|
||
<Button @click="moveTeacherModal = false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="submitMoveTeacher">确定</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗9：【设置教师的状态】 匹配设计图 -->
|
||
<Modal v-model="setStatusModal" title="设置教师的状态" width="380">
|
||
<Form ref="statusForm" :model="statusFormData" label-width="120">
|
||
<FormItem label="选择设置状态">
|
||
<RadioGroup v-model="statusFormData.status">
|
||
<Radio label="0">正常</Radio>
|
||
<Radio label="1">禁用</Radio>
|
||
</RadioGroup>
|
||
</FormItem>
|
||
</Form>
|
||
<div slot="footer" align="right">
|
||
<Button @click="setStatusModal = false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="submitSetStatus">确定</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<!-- 弹窗10：转出教师弹窗 -->
|
||
<Modal v-model="transferTeacherModal" title="转出教师" width="420">
|
||
<p>确认将选中教师做转出操作？转出后不在本校编制内</p>
|
||
<div slot="footer" align="right">
|
||
<Button @click="transferTeacherModal = false" style="margin-right:10px">取消</Button>
|
||
<Button type="primary" @click="confirmTransferTeacher">确定</Button>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import myTree from "../../components/my_tree";
|
||
import { self_viewport } from "@/mixins/self_viewport";
|
||
export default {
|
||
name: 'TeacherInfoManage',
|
||
components: { myTree },
|
||
data() {
|
||
return {
|
||
selectnodeid:'',
|
||
selectnodetitle: '',
|
||
selectnodetype:7,
|
||
searchKeyword: '',
|
||
selectedRows: [],
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
total: 0,
|
||
|
||
treeData: [],
|
||
// 移动教师弹窗穿梭框
|
||
checkedTreeNodes: [], // 左侧树形勾选的节点
|
||
targetGroupList: [], // 右侧移入的目标分组数组
|
||
treeSetting:{
|
||
view: {
|
||
dblClickExpand: false,
|
||
showIcon: false,
|
||
},
|
||
check: {
|
||
enable: true,
|
||
// 核心两项配置
|
||
chkboxType: {
|
||
"Y": "", // 勾选父节点 【不会】向下联动勾选子节点
|
||
"N": "" // 取消父节点 【不会】向下联动取消子节点
|
||
},
|
||
autoCheckTrigger: false
|
||
},
|
||
callback: {}
|
||
},
|
||
|
||
tableColumns: [
|
||
{ type: 'selection', width: 50 },
|
||
{ title: '序号', type: 'index', align: 'center', width: 70 },
|
||
{ title: '教师账号', key: 'account', align: 'center' },
|
||
{ title: '教师姓名', key: 'name', align: 'center' },
|
||
{
|
||
title: '教师组',
|
||
key: 'groupName',
|
||
align: 'center',
|
||
render: (h, params) => {
|
||
return h('div', [
|
||
params.row.groupList.map(a=>a.name).join(',')
|
||
]);
|
||
},
|
||
},
|
||
{ title: '联系电话', key: 'tel', align: 'center' },
|
||
{
|
||
title: '性别',
|
||
key: 'gender',
|
||
align: 'center',
|
||
width: 70,
|
||
render: (h, params) => {
|
||
return h('div', [
|
||
params.row.gender==0?'女':params.row.gender==1?'男':''
|
||
]);
|
||
},
|
||
},
|
||
{ title: '状态', key: 'statusName', align: 'center', width: 80 },
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
align: 'center',
|
||
width: 90,
|
||
render: (h, params) => {
|
||
return h('Button', {
|
||
props: { type: 'text', icon: 'md-create', size: 'large' },
|
||
on: { click: () => this.editSingleTeacher(params.row, params.index) }
|
||
})
|
||
}
|
||
}
|
||
],
|
||
|
||
tableData: [],
|
||
spinShow:false,
|
||
UpParmas:{
|
||
fileName:'',
|
||
listData:{},
|
||
datapre:{},
|
||
actionUrl:APIConfig.BschClassSystem.teacherImport,
|
||
columns:[
|
||
{
|
||
title: '行号',
|
||
key: 'rows',
|
||
align: 'center',
|
||
width:'80'
|
||
},
|
||
{
|
||
title: '内容',
|
||
key: 'columnValue',
|
||
align: 'center',
|
||
},
|
||
{
|
||
title: '错误详情',
|
||
key: 'errorMsg',
|
||
align: 'center',
|
||
}
|
||
],
|
||
},
|
||
|
||
addTeacherModal: false,
|
||
editTeacherModal: false,
|
||
importModal: false,
|
||
addGroupModal: false,
|
||
editGroupModal: false,
|
||
moveGroupModal: false,
|
||
batchDeleteModal: false,
|
||
moveTeacherModal: false,
|
||
setStatusModal: false,
|
||
transferTeacherModal: false,
|
||
|
||
addTeacherFormData: { teacherName: '', account: '', password: '', idCard: '', phone: '', gender: '0' },
|
||
addTeacherRules: {
|
||
teacherName: [{ required: true, message: '请输入教师姓名', trigger: 'blur' }],
|
||
account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
||
gender: [{ required: true, message: '请选择性别', trigger: 'change' }]
|
||
},
|
||
|
||
editTeacherIndex: null,
|
||
editTeacherFormData: {id:null, teacherName: '', account: '', idCard: '', phone: '', gender: '0',teaId:0,status:1 },
|
||
editTeacherRules: {
|
||
teacherName: [{ required: true, message: '请输入教师姓名', trigger: 'blur' }],
|
||
account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
||
gender: [{ required: true, message: '请选择性别', trigger: 'change' }]
|
||
},
|
||
|
||
addGroupFormData: { parentGroupName: '', groupName: '', sort: '' },
|
||
addGroupRules: { groupName: [{ required: true, message: '请输入子组名称', trigger: 'blur' }] },
|
||
|
||
editGroupIndex: null,
|
||
editGroupFormData: { groupName: '', sort: '' },
|
||
editGroupRules: { groupName: [{ required: true, message: '请输入子组名称', trigger: 'blur' }] },
|
||
|
||
moveGroupTargetName: '',
|
||
moveTeacherName: '',
|
||
statusFormData: { status: '0' }
|
||
}
|
||
},
|
||
mixins: [self_viewport],
|
||
computed: {
|
||
uploadHeader() { //附件上传header
|
||
let config = {};
|
||
if (localStorage.getItem("currentRole")) {
|
||
let currentRole = localStorage.getItem("currentRole");
|
||
config["currentRole"] = currentRole;
|
||
}
|
||
return config;
|
||
},
|
||
},
|
||
created() {
|
||
this.getTeaTree();
|
||
},
|
||
methods: {
|
||
//获取教师树
|
||
getTeaTree:function(){
|
||
const _this = this;
|
||
var item={};
|
||
_this.$api.get(APIConfig.BschClassSystem.getTeaTree, item, resp => {
|
||
if(resp.code==0)
|
||
{
|
||
_this.treeData=resp.data;
|
||
_this.selectnodeid=resp.data.id;
|
||
_this.selectnodetitle=resp.data.name;
|
||
_this.selectnodetype=resp.data.type;
|
||
_this.loadData();
|
||
}
|
||
});
|
||
},
|
||
// 树形选中切换
|
||
treeLink(treeNode) {
|
||
this.selectnodeid=treeNode.id;
|
||
this.selectnodetitle=treeNode.name;
|
||
this.selectnodetype=treeNode.type;
|
||
this.pageNum = 1
|
||
this.loadData()
|
||
},
|
||
// 移动教师树形复选框勾选回调（接收my-tree抛出的zTree选中数组）移动教师树形选中切换
|
||
checkedtreeLink(allCheckedList){
|
||
this.checkedTreeNodes = [...allCheckedList]
|
||
// 右侧列表 = 只保留当前左侧还在勾选的条目，自动过滤取消勾选项
|
||
this.targetGroupList = this.targetGroupList.filter(rightItem => {
|
||
return allCheckedList.some(leftItem => leftItem.id === rightItem.id)
|
||
})
|
||
// 新增左侧新勾选的节点，去重加入右侧
|
||
allCheckedList.forEach(node => {
|
||
const exist = this.targetGroupList.some(item => item.id === node.id)
|
||
if (!exist) {
|
||
this.targetGroupList.push({
|
||
id: node.id,
|
||
name: node.name
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 加载列表数据
|
||
loadData() {
|
||
const _this = this;
|
||
var item = {
|
||
groupId:_this.selectnodeid,
|
||
keyword:_this.searchKeyword,
|
||
page:_this.pageNum-1,
|
||
size:_this.pageSize
|
||
};
|
||
_this.$api.get(APIConfig.BschClassSystem.getteachersearch, item, resp => {
|
||
if (resp.code == 0) {
|
||
_this.tableData = resp.data.content;
|
||
_this.total=resp.data.total;
|
||
} else {
|
||
_this.tableData = [];
|
||
}
|
||
});
|
||
},
|
||
selectionChange(rows) {
|
||
this.selectedRows = rows
|
||
},
|
||
searchTeacher() {
|
||
this.pageNum = 1;
|
||
this.loadData();
|
||
},
|
||
pageChange(p) { this.pageNum = p;this.loadData(); },
|
||
sizeChange(s) { this.pageSize = s; this.pageNum = 1;this.loadData(); },
|
||
|
||
openAddTeacherModal() {
|
||
this.addTeacherFormData = { teacherName: '', account: '', password: '', idCard: '', phone: '', gender: '0' }
|
||
this.addTeacherModal = true
|
||
},
|
||
submitAddTeacher() {
|
||
this.$refs.addTeacherForm.validate(valid => {
|
||
if (!valid) return
|
||
// 新增
|
||
const newItem = {
|
||
groupId:this.selectnodeid,
|
||
name:this.addTeacherFormData.teacherName,
|
||
account:this.addTeacherFormData.account,
|
||
pwd:this.addTeacherFormData.password,
|
||
idCard:this.addTeacherFormData.idCard,
|
||
tel:this.addTeacherFormData.phone,
|
||
gender:this.addTeacherFormData.gender,
|
||
teaId:0,
|
||
status:0
|
||
}
|
||
const url = APIConfig.BschClassSystem.teachersave;
|
||
this.$api.post(url, JSON.stringify(newItem), resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success("新增教师成功！");
|
||
this.addTeacherModal = false
|
||
this.loadData();
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
})
|
||
},
|
||
|
||
editSingleTeacher(row, idx) {
|
||
this.editTeacherIndex = idx;
|
||
this.editTeacherFormData = {
|
||
id:row.id,
|
||
teacherName: row.name,
|
||
account: row.account,
|
||
idCard: row.idCard || '',
|
||
phone: row.tel,
|
||
gender: row.gender+'',
|
||
teaId:row.teaId,
|
||
status:row.status
|
||
};
|
||
this.editTeacherModal = true;
|
||
},
|
||
submitEditTeacher() {
|
||
this.$refs.editTeacherForm.validate(valid => {
|
||
if (!valid) return
|
||
// 编辑
|
||
const newItem = {
|
||
id:this.editTeacherFormData.id,
|
||
groupId:this.selectnodeid,
|
||
name:this.editTeacherFormData.teacherName,
|
||
account:this.editTeacherFormData.account,
|
||
idCard:this.editTeacherFormData.idCard,
|
||
tel:this.editTeacherFormData.phone,
|
||
gender:this.editTeacherFormData.gender,
|
||
teaId:this.editTeacherFormData.teaId,
|
||
status:this.editTeacherFormData.status
|
||
}
|
||
const url = APIConfig.BschClassSystem.teachersave;
|
||
this.$api.post(url, JSON.stringify(newItem), resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success("编辑教师成功！");
|
||
this.editTeacherModal = false
|
||
this.loadData();
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
})
|
||
},
|
||
|
||
openImportModal() { this.importModal = true },
|
||
//导入成功返回
|
||
importFile(response, file, fileList){
|
||
const _this=this;
|
||
_this.spinShow=false;
|
||
_this.UpParmas.fileName=file.name;
|
||
_this.UpParmas.listData=response;
|
||
if(response.State)
|
||
{
|
||
_this.$Message.info('导入成功！');
|
||
_this.getsearcBaseSchClass();
|
||
}else{
|
||
_this.$Message.info(response.Message);
|
||
}
|
||
},
|
||
//附件上传之前的方法
|
||
handleUpload:function(file){
|
||
const _this=this;
|
||
_this.spinShow=true;
|
||
},
|
||
MoBanExceldaochu() {
|
||
var _this = this;
|
||
if (localStorage.getItem("currentRole")) {
|
||
let currentRole = localStorage.getItem("currentRole");
|
||
let { schId, roleId, userId, childId } = JSON.parse(decodeURIComponent(currentRole));
|
||
var url=APIConfig.BschClassSystem.teacherdownloadTemplate+'?schId='+schId;
|
||
window.location.href=url;
|
||
}else{
|
||
this.$Message.info('获取不了学校！');
|
||
}
|
||
},
|
||
//附件上传模态框关闭事件
|
||
UpfileModalcloseclick:function(){
|
||
this.importModal=false;
|
||
this.UpParmas={
|
||
fileName:'',
|
||
listData:{},
|
||
datapre:{},
|
||
}
|
||
},
|
||
|
||
batchDeleteTeacher() {
|
||
if (!this.selectedRows.length) return this.$Message.warning('请先勾选教师');
|
||
this.batchDeleteModal = true
|
||
},
|
||
confirmBatchDelete() {
|
||
const idlist = this.selectedRows.map(i => i.id);
|
||
const url = APIConfig.BschClassSystem.teacherdelete;
|
||
let item={
|
||
groupId:this.selectnodeid,
|
||
ids:idlist.join(',')
|
||
};
|
||
this.$api.post(url,item, resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success("删除成功！");
|
||
this.selectedRows = [];
|
||
this.batchDeleteModal = false;
|
||
this.loadData();
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
},
|
||
// 弹窗打开初始化
|
||
openBatchMoveTeacherModal() {
|
||
if (!this.selectedRows.length) return this.$Message.warning('请先勾选教师');
|
||
this.moveTeacherName = this.selectedRows.map(i => i.name).join('、');
|
||
// 清空数据
|
||
this.checkedTreeNodes = [];
|
||
this.targetGroupList = [];
|
||
this.$nextTick(() => {
|
||
// 清空整棵树所有勾选
|
||
const ztree = this.$refs.moveTeacherLeftTree.getZtreeInstance();
|
||
ztree.checkAllNodes(false);
|
||
})
|
||
this.moveTeacherModal = true;
|
||
},
|
||
// 右侧点击X删除单条 → 反向取消左侧树勾选
|
||
handleDeleteRightItem(delItem, index) {
|
||
// 删除右侧数组
|
||
this.targetGroupList.splice(index, 1);
|
||
// 获取树实例，取消对应节点复选框
|
||
const ztree = this.$refs.moveTeacherLeftTree.getZtreeInstance();
|
||
const targetNode = ztree.getNodeByParam('id', delItem.id);
|
||
if (targetNode) {
|
||
ztree.checkNode(targetNode, false, false);
|
||
}
|
||
},
|
||
|
||
// 确定按钮 直接提交
|
||
submitMoveTeacher() {
|
||
if (this.targetGroupList.length === 0) {
|
||
return this.$Message.warning('请至少选择一个目标分组');
|
||
}
|
||
const teacherIdArr = this.selectedRows.map(row => row.id);
|
||
const groupIdArr = this.targetGroupList.map(item => item.id);
|
||
|
||
// console.log('待移动教师ID', teacherIdArr)
|
||
// console.log('目标分组ID', groupIdArr)
|
||
let item={
|
||
ids:teacherIdArr,
|
||
transferGroupIds:groupIdArr
|
||
};
|
||
const url = APIConfig.BschClassSystem.moveGroup;
|
||
this.$api.post(url,JSON.stringify(item), resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success('教师移动分组成功');
|
||
this.moveTeacherModal = false;
|
||
// 清空选择缓存
|
||
this.selectedRows = [];
|
||
this.targetGroupList = [];
|
||
this.checkedTreeNodes = [];
|
||
// 刷新表格数据
|
||
this.loadData();
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
},
|
||
batchTransferTeacher() {
|
||
if (!this.selectedRows.length) return this.$Message.warning('请先勾选教师');
|
||
this.transferTeacherModal = true;
|
||
},
|
||
//转出事件
|
||
confirmTransferTeacher() {
|
||
const idlist = this.selectedRows.map(i => i.id);
|
||
const url = APIConfig.BschClassSystem.transferOut+idlist.join(',');
|
||
this.$api.post(url,{}, resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success("转出操作完成！");
|
||
this.selectedRows = [];
|
||
this.transferTeacherModal = false;
|
||
this.loadData();
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
},
|
||
|
||
openBatchMoveTeacherModal() {
|
||
if (!this.selectedRows.length) return this.$Message.warning('请先勾选教师');
|
||
this.moveTeacherName = this.selectedRows.map(i => i.name).join('、');
|
||
this.moveTeacherModal = true;
|
||
},
|
||
confirmMoveTeacher() {
|
||
this.moveTeacherModal = false;
|
||
this.$Message.success('移动教师成功');
|
||
},
|
||
|
||
openSetStatusModal() {
|
||
if (!this.selectedRows.length) return this.$Message.warning('请先勾选教师');
|
||
this.statusFormData.status = '0';
|
||
this.setStatusModal = true;
|
||
},
|
||
submitSetStatus() {
|
||
const idlist = this.selectedRows.map(i => i.id);
|
||
let item={
|
||
ids:idlist.join(','),
|
||
status:this.statusFormData.status
|
||
};
|
||
const url = APIConfig.BschClassSystem.teachersetStatus;
|
||
this.$api.post(url,item, resp => {
|
||
if (resp.code == 0) {
|
||
this.$Message.success("状态修改成功！");
|
||
this.selectedRows = [];
|
||
this.setStatusModal = false;
|
||
this.loadData();
|
||
} else if (resp.code == 4) {
|
||
this.$Message.info(resp.msg);
|
||
}
|
||
});
|
||
},
|
||
|
||
openAddGroupModal() {
|
||
if (!this.selectnodeid) return this.$Message.warning('请先选择父分组');
|
||
this.addGroupFormData.parentGroupName = this.selectnodetitle;
|
||
this.addGroupFormData.groupName = '';
|
||
this.addGroupFormData.sort = '';
|
||
this.addGroupModal = true;
|
||
},
|
||
submitAddGroup() {
|
||
this.$refs.addGroupForm.validate(valid => {
|
||
if (!valid) return;
|
||
this.$Message.success('新增分组成功');
|
||
this.addGroupModal = false;
|
||
})
|
||
},
|
||
|
||
openEditGroupModal() {
|
||
if (!this.selectnodeid) return this.$Message.warning('请先选择分组')
|
||
this.editGroupIndex = this.selectnodeid;
|
||
this.editGroupFormData.groupName = this.selectnodetitle;
|
||
this.editGroupFormData.sort = '';
|
||
this.editGroupModal = true;
|
||
},
|
||
submitEditGroup() {
|
||
this.$refs.editGroupForm.validate(valid => {
|
||
if (!valid) return;
|
||
this.selectedTreeNode.title = this.editGroupFormData.groupName;
|
||
this.editGroupModal = false;
|
||
this.$Message.success('修改分组成功')
|
||
})
|
||
},
|
||
|
||
openMoveGroupModal() {
|
||
if (!this.selectnodeid) return this.$Message.warning('请先选择分组');
|
||
this.moveGroupTargetName = this.selectnodetitle;
|
||
this.moveGroupModal = true;
|
||
},
|
||
confirmMoveGroup() {
|
||
this.moveGroupModal = false;
|
||
this.$Message.success('移动分组成功');
|
||
},
|
||
|
||
delCurrentGroup() {
|
||
if (!this.selectnodeid) return this.$Message.warning('请先选择分组');
|
||
this.$Modal.confirm({
|
||
title: '提示',
|
||
content: `确定删除分组【${this.selectedTreeNode.title}】？`,
|
||
onOk: () => {
|
||
this.$Message.success('删除分组成功');
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 全局布局逐级修复高度 + min-height:0 解决flex塌陷 */
|
||
.outer-wrap {
|
||
/* border: 1px solid #e5e7eb; */
|
||
border-radius: 4px;
|
||
padding: 16px;
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto;
|
||
}
|
||
.page-flex-layout {
|
||
display: flex;
|
||
flex: 1;
|
||
gap: 16px;
|
||
min-height: 0; /* 第一层修复 */
|
||
}
|
||
.tree-sidebar {
|
||
width: 250px;
|
||
border: 1px solid #e8e8e8;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
}
|
||
.tree-op-buttons {
|
||
padding: 8px;
|
||
display: flex;
|
||
gap: 8px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.tree-sidebar >>> .ivu-tree {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 8px;
|
||
}
|
||
.right-main {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0; /* 第二层修复 */
|
||
}
|
||
.top-tool-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0px 16px;
|
||
background: #f7f7f7;
|
||
margin-bottom: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
.table-adapt-wrap {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0; /* 第三层核心修复 */
|
||
}
|
||
.table-scroll {
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
.teacher-table {
|
||
height: 100%;
|
||
}
|
||
/* 分页固定底部，永远不参与滚动 */
|
||
.bottom-bar {
|
||
margin-top: 16px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.total-text {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-right: 12px;
|
||
}
|
||
</style>
|
||
<style>
|
||
.ivu-alert-desc{
|
||
font-size: 12px;
|
||
}
|
||
</style> |