<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('教师管理列表')"/>
<th:block th:include="include :: layout-latest-css"/>
<th:block th:include="include :: ztree-css"/>
</head>
<body class="gray-bg">
<div class="ui-layout-west">
<div class="box box-main">
<div class="box-header">
<div class="box-title">
<i class="fa icon-grid"></i> 组织机构
</div>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i
class="fa fa-chevron-up"></i></button>
<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i
class="fa fa-chevron-down"></i></button>
<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i
class="fa fa-refresh"></i></button>
</div>
</div>
<div class="ui-layout-content">
<div id="tree" class="ztree"></div>
</div>
</div>
</div>
<div class="ui-layout-center">
<div class="container-div">
<div class="row">
<div class="col-sm-12 search-collapse">
<form id="formId">
<div class="select-list">
<input type="hidden" id="schoolId" name="schoolId">
<input type="hidden" id="collegeId" name="collegeId">
<ul>
<li>
<input id="selectConditionOneInput" type="text" name="multipleOne" style="width: 200px;"
placeholder="姓名|工号(账号)"/>
</li>
<li>
<input id="selectConditionTwoInput" type="text" name="multipleTwo" style="width: 250px;"
placeholder="邮箱|手机号|身份证|昵称"/>
</li>
<li>
<label>账号:</label>
<select style="width: 60px" name="state" th:with="type=${@dict.getType('accountStatus')}">
<option value="">所有</option>
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
th:value="${dict.dictValue}"></option>
</select>
</li>
<li>
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
class="fa fa-search"></i> 搜索</a>
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
class="fa fa-refresh"></i> 重置</a>
</li>
</ul>
</div>
</form>
</div>
<div class="btn-group-sm" id="toolbar" role="group">
<a class="btn btn-success disabled" id="addBtn" onclick="$.operate.add($('#collegeId').val())"
shiro:hasPermission="system:teacher:add">
<i class="fa fa-plus"></i> 新增
</a>
<a class="btn btn-danger multiple disabled" onclick="javascript:batchUpdatePwd()" shiro:hasPermission="system:teacher:batchUpdatePwd">
<i class="fa fa-sign-out"></i> 批量重置密码
</a>
<a id="importBtn" class="btn btn-info disabled" onclick="importExcel()" shiro:hasPermission="system:student:export">
<i class="fa fa-upload"></i> 导入
</a>
<!-- <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:teacher:export">-->
<!-- <i class="fa fa-download"></i> 导出-->
<!-- </a>-->
<a class="btn btn-warning" onclick="$.table.exportExcelByChoose()" shiro:hasPermission="system:teacher:export">
<i class="fa fa-upload"></i> 导出
</a>
<a href="/teacherTemplate.xlsx">点击下载导入模版</a>
</div>
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table"></table>
</div>
</div>
</div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<script th:inline="javascript">
var editFlag = [[${@permission.hasPermi('system:teacher:edit')}]];
var removeFlag = [[${@permission.hasPermi('system:teacher:remove')}]];
var genderDatas = [[${@dict.getType('sys_user_sex')}]];
var stateDatas = [[${@dict.getType('accountStatus')}]];
var prefix = ctx + "system/teacher";
$(function () {
var panehHidden = false;
if ($(this).width() < 769) {
panehHidden = true;
}
$('body').layout({initClosed: panehHidden, west__size: 185});
// 回到顶部绑定
if ($.fn.toTop !== undefined) {
var opt = {
win: $('.ui-layout-center'),
doc: $('.ui-layout-center')
};
$('#scroll-up').toTop(opt);
}
queryTeacherList();
queryOrganizationTree();
});
function queryTeacherList() {
var options = {
url: prefix + "/list",
createUrl: prefix + "/add/{id}",
updateUrl: prefix + "/edit/{id}",
removeUrl: prefix + "/remove",
exportUrl: prefix + "/export",
exportByChooseUrl: prefix + "/export/choose",
importUrl: prefix + "/importData",
modalName: "教师",
columns: [
{
checkbox: true
},
{
field: 'id',
title: '唯一id',
visible: false
},
{
field: 'name',
title: '姓名'
},
{
field: 'account',
title: '账号(职工号)'
},
{
field: 'gender',
title: '性别',
formatter: function (value, row, index) {
return $.table.selectDictLabel(genderDatas, value);
},
width: 20
},
{
field: 'nickName',
title: '昵称'
},
{
field: 'email',
title: '邮箱'
},
// {
// field: 'idNum',
// title: '身份证件号',
// width: 100
// },
{
field: 'phone',
title: '手机号',
// width: 100
},
{
field: 'educational',
title: '学历'
},
{
field: 'degree',
title: '学位'
},
// {
// field: 'birthday',
// title: '生日'
// },
{
field: 'state',
title: '账号状态',
formatter: function (value, row, index) {
return statusTools(row);
},
width: 20
},
{
field: 'collegeName',
title: '所在学院'
},
{
field: 'lastLoginTime',
title: '最后一次登录时间'
},
{
title: '操作',
align: 'center',
formatter: function (value, row, index) {
var actions = [];
var more = [];
more.push("<a id='editBtn' rowid='" + row.id + "' class='btn btn-success btn-xs " + editFlag + "' href='javascript:void(0)' onclick='power(this)'><i class='fa fa-edit'></i>权限</a> ");
more.push("<a id='editBtn' rowid='" + row.id + "' class='btn btn-success btn-xs " + editFlag + "' href='javascript:void(0)' onclick='edit(this)'><i class='fa fa-edit'></i>编辑</a> ");
more.push("<a id='resetPasswordBtn' rowid='" + row.id + "' class='btn btn-success btn-xs" + editFlag + "' href='javascript:void(0)' onclick='resetPassword(this)'><i class='fa fa-edit'></i>重置密码</a> ");
more.push("<a id='removeBtn' rowid='" + row.id + "' class='btn btn-danger btn-xs " + editFlag + "' href='javascript:void(0)' onclick='remove(this)'><i class='fa fa-edit'></i>删除</a> ");
actions.push('<a id="' + 'operation' + row.id + '" rowid="' + row.id + '" rowname="' + row.name + '" rowaccount="' + row.account + '" tabindex="0" class="btn btn-info btn-xs" role="button" data-container="body" data-placement="left" data-toggle="popover" data-html="true" data-trigger="hover" data-content="' + more.join('') + '"><i class="fa fa-chevron-circle-right"></i>更多操作</a>');
return actions.join('');
},
width: 20
}]
};
$.table.init(options);
}
/* 账号状态显示 */
function statusTools(row) {
if (row.state == 0) {
// 禁用
return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.id + '\')"></i> ';
} else {
// 启用
return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.id + '\')"></i> ';
}
}
/* 账号状态-停用 */
function disable(id) {
$.modal.confirm("确认要禁用账号吗?", function () {
$.operate.post(prefix + "/changeState", {"id": id, "state": 0});
})
}
/* 账号状态-启用 */
function enable(id) {
$.modal.confirm("确认要启用账号吗?", function () {
$.operate.post(prefix + "/changeState", {"id": id, "state": 1});
})
}
/**
* 组织树
*/
function queryOrganizationTree() {
var url = ctx + "system/organization/collegeTreeData";
var options = {
url: url,
expandLevel: 3,
onClick: zOnClick
};
$.tree.init(options);
function zOnClick(event, treeId, treeNode) {
if (treeNode.level == 0) {
$("#addBtn").addClass("disabled");
$("#importBtn").addClass("disabled");
} else {
$("#addBtn").removeClass("disabled");
$("#importBtn").removeClass("disabled");
}
var treeObj = $.fn.zTree.getZTreeObj("tree");
var levelChildren = getLastLevelChildren(treeObj, treeNode);
if (levelChildren.length > 0) {
var collegeId = levelChildren[0].id;
switch (treeNode.level) {
case 0:
$("#schoolId").val(null);
$("#collegeId").val(null);
break;
case 1:
$("#schoolId").val(treeNode.id);
$("#collegeId").val(collegeId);
break;
case 2:
$("#schoolId").val(null);
$("#collegeId").val(treeNode.id);
break;
}
}else {
switch (treeNode.level) {
case 0, 1:
$.modal.alert("此大学下面还没有学院,不能添加教师")
break;
}
}
$.table.search();
}
}
function getLastLevelChildren(treeObj, node) {
var level4Nodes = [];
function findLevel4Children(currentNode, currentLevel) {
if (currentLevel == 2) {
level4Nodes = level4Nodes.concat(currentNode || []);
} else if (currentNode.children) {
currentNode.children.forEach(function (childNode) {
findLevel4Children(childNode, currentLevel + 1);
});
}
}
findLevel4Children(node, node.level);
return level4Nodes;
}
$('#btnExpand').click(function () {
$._tree.expandAll(true);
$(this).hide();
$('#btnCollapse').show();
});
$('#btnCollapse').click(function () {
$._tree.expandAll(false);
$(this).hide();
$('#btnExpand').show();
});
$('#btnRefresh').click(function () {
queryOrganizationTree();
});
/**
* 重置密码
*/
function resetPassword(btn) {
$.modal.confirm("确定重置密码吗?", function () {
$.modal.disable();
var url = prefix + "/resetPassword/" + $(btn).attr("rowid");
var data = {"id": $(btn).attr("rowid")};
var config = {
url: url,
type: "get",
dataType: "json",
data: "",
beforeSend: function () {
$.modal.loading("正在处理中,请稍候...");
},
success: function (data) {
if (data.code == 0) {
// 成功
$.modal.closeLoading();
$.modal.alert("密码已重置为:" + $("#operation" + $(btn).attr("rowid")).attr("rowaccount") + "@tea");
$.modal.disable();
} else {
// 失败
$.modal.closeLoading();
$.modal.msgError(data.msg);
$.modal.disable();
}
}
};
$.ajax(config)
});
}
/**
* 删除
*/
function remove(btn) {
$.operate.remove($(btn).attr("rowid"));
// $.table.search();
}
/**
* 编辑
*/
function edit(btn) {
$.operate.edit($(btn).attr("rowid"));
}
function power(btn) {
let teacherId = $(btn).attr("rowid")
let url = prefix + "/power/" + teacherId;
$.modal.open("修改教师权限", url, '800', '400');
}
/**
* 回车查询
*/
$("#selectConditionOneInput").keydown(function (e) {
if (e.keyCode == 13) {
$.table.search();
}
});
$("#selectConditionTwoInput").keydown(function (e) {
if (e.keyCode == 13) {
$.table.search();
}
});
/**
* 文件上传
*/
function importExcel(){
top.layer.open({
type: 1,
area: [400 + 'px', 230 + 'px'],
fix: false,
//不固定
maxmin: true,
shade: 0.3,
title: '导入' + table.options.modalName + '数据',
content: '<form enctype="multipart/form-data" class="mt20 mb10">\n' +
' <div class="col-xs-offset-1">\n' +
' <input type="file" id="file" name="file"/>\n' +
' <input class="hidden" type="text" id="importCollegeId" name="collegeId"/>\n' +
' <font color="red" class="pull-left mt10">\n' +
' 提示:仅允许导入“xls”或“xlsx”格式文件!\n' +
' </font>\n' +
' </div>\n' +
' </form>',
btn: ['<i class="fa fa-check"></i> 导入', '<i class="fa fa-remove"></i> 取消'],
// 弹层外区域关闭
shadeClose: true,
btn1: function(index, layero){
var file = layero.find('#file').val();
layero.find('#importCollegeId').val($("#collegeId").val());
if (file == '' || (!$.common.endWith(file, '.xls') && !$.common.endWith(file, '.xlsx'))){
$.modal.msgWarning("请选择后缀为 “xls”或“xlsx”的文件。");
return false;
}
var index = top.layer.load(2, {shade: false});
$.modal.disable();
var formData = new FormData(layero.find('form')[0]);
$.ajax({
url: table.options.importUrl,
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function (result) {
if (result.code == web_status.SUCCESS) {
$.modal.close(index);
$.modal.closeAll();
$.modal.alertSuccess(result.msg);
$.table.refresh();
} else if (result.code == web_status.WARNING) {
$.modal.close(index);
$.modal.enable();
$.modal.alertWarning(result.msg)
} else {
$.modal.close(index);
$.modal.enable();
$.modal.alertError(result.msg);
}
},
complete: function () {
layero.find('#file').val('');
}
});
}
});
}
// 批量更新密码
function batchUpdatePwd() {
var rows = $.table.selectColumns("id");
if (rows.length === 0) {
$.modal.alertWarning("请选择用户");
return;
}
console.log(rows)
//var initPwd = [[${@config.getKey('sys.user.initPassword')}]]
layer.prompt({
formType: 0,
title: '请输入重置密码',
placeholder: '请输入重置密码',
maxlength: 16,
move: false,
value: null
//area: ['800px', '350px'] //自定义文本域宽高
}, function(value, index, elem){
if (value.length < 2){
$.modal.msgError("请输入正确格式的密码")
return
}
$.modal.confirm("确认重置选中的"+ rows.length +"位教师密码?", function() {
$.ajax({
type: 'patch',
url: ctx + "system/teacher/resetPassword",
dataType: 'json',
data:{
ids:rows.join(),
pwd: value
},
success: function (result) {
if (result.code === web_status.SUCCESS) {
$.modal.msgSuccess("重置成功");
} else {
$.modal.msgError("重置失败");
}
},
error: function () {
$.modal.msgError("重置失败");
}
});
});
layer.close(index);
});
}
</script>
</body>
</html>
用vue语言重写这个页面,保持原有的功能和逻辑不变