init
This commit is contained in:
lijing
@@ -0,0 +1,945 @@
|
||||
<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="1">正常</Radio>
|
||||
<Radio label="0">禁用</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: '1' }
|
||||
}
|
||||
},
|
||||
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:1
|
||||
}
|
||||
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;
|
||||
console.log(response);
|
||||
console.log(file);
|
||||
_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+idlist.join(',');
|
||||
this.$api.post(url,{}, 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 = '1'
|
||||
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>
|
||||
Reference in New Issue
Block a user