QiYuAdmin-部门增删改查

简介

先说个事情吧，今天和上上家公司的同事在一起吃饭，其中聊到了一个房子的事情，事情是这样：他在北京买了一套房子90多平米，当时买的是6W/平，当时买的时候到处借钱、贷款，现在每月还贷款2W，我不知道他还多少年，但是现在他的房子是10W/平，也就是90平*10=900w，已经是千万家产了。第二件事情就是，他有说：他10年前的一些同学上一次在一起吃饭，每个人的身价都几千万，他是那群朋友里面混的最差的一个，他最后说了一句：10年是一个阶段，10年之后朋友、同学拉开的距离会非常大，可能别人干一天的就会比你干一年的都要多，做好10年长期计划。

从年初开始，我的思想就发生了变化，是因为看了一本书叫做富爸爸穷爸爸。从这本书中我得出的想法：做四个象限中的右边两个象限，不创业必投资，不投资必创业，不要为了钱而去工作，要让钱为你工作。

慢慢做好自己吧，加油。

布局调整

增加部门

修改部门

删除部门

布局调整

本想按照之前想的布局，但是布局之后发现很不美观，而且实用性比较差。



主要是表格看不全，分页看不见了，而且还需要滚动，如果给表格设定一个固定的高度，让其在表格内滚动的话，看到的数据不到10条数据，而且组织的信息不仅仅只有这么几个属性，我列的几个只是基本的，有些项目的属性将会很多，所以就更加不适用了。所以我决定了，把组织的基本信息给删掉，只留用户列表了。

增加部门

现在增加、修改、删除都会直接在树本身上面做操作，我感觉非常方便。增加部门上一篇已经说过了，有一些地方改了，添加一个部门就会实施的在树里面增加增加的数据。

绑定提交表单代码

var initDepAddBootStrapValidate = function () {
$addDepForm.bootstrapValidator({
fields: {
depName: {
validators: {
notEmpty: {
message: '部门名称不能为空'
}
}
},
depCode:{
validators: {
notEmpty: {
message: '部门编码不能为空'
}
}
}
}
}).on("success.form.bv",function(e){
swal({
title: "确定提交表单?",
text: "",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
depAjax(addDepAjaxUrl,$addDepForm.serialize(),"POST");
} else {
swal("", "已经取消了当前操作", "error");
}
});
});
}

var depAjax = function (ajaxUrl,data,method) {
$.ajax({
type:method,
cache:false,
url:addDepAjaxUrl,
data:data,
success:function(responseJson){
if(responseJson.success==true){//返回true
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index);
(parent.QiYuComponents).bootstrapSweetAlert("",responseJson.msg,"success");
if(method=="POST"){
(parent.QiYuDep).addDepNode(responseJson.obj);//调用添加方法
}

}
if(responseJson.success==false){//返回false
QiYuComponents.bootstrapSweetAlert("",responseJson.msg,"error");
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
QiYuComponents.bootstrapSweetAlert("","系统错误!!!","error");
}
});
}

上面depAjax的方法，当增加成功之后回调函数调用父页面增加节点的方法

(parent.QiYuDep).addDepNode(responseJson.obj);//调用添加方法

/**
* 增加页面调用父页面方法,给zTree动态添加数据
* @param depNode
*/
var addDepNode = function (depNode) {
var pNode = $depTree.getNodeByParam("id",depNode.pId, null);
$depTree.addNodes(pNode,depNode);
}

修改部门

修改部门和增加部门类似，这里的修改部门就相当于查看部门的功能了，感觉有点怪怪的。



弹出的页面和增加页面一样。

代码和增加基本一致

var initDepUpdateBootStrapValidate = function () {
$updateDepForm.bootstrapValidator({
fields: {
depName: {
validators: {
notEmpty: {
message: '部门名称不能为空'
}
}
},
depCode:{
validators: {
notEmpty: {

112ee
message: '部门编码不能为空'
}
}
}
}
}).on("success.form.bv",function(e){
swal({
title: "确定提交表单?",
text: "",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
depAjax(updateDepAjaxUrl,$updateDepForm.serialize(),"PUT");
} else {
swal("", "已经取消了当前操作", "error");
}
});
});
}

删除部门

var onZTreeRemoveClick = function (treeId, treeNode) {
if(null!=treeNode.children && treeNode.children.length>0){
QiYuComponents.bootstrapSweetAlert("","不能删除父节点","error");
return false;
}
swal({
title: "确定删除 "+treeNode.name+"?",
text: treeNode.name+" 下面的人员将会一起删除",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
$.ajax({
type:"DELETE",
cache:false,
url:deleteDepAjaxUrl+"?id="+treeNode.id,
success:function(responseJson){
if(responseJson.success==true){//返回true
$depTree.removeNode(treeNode);//动态删除该节点
QiYuComponents.bootstrapSweetAlert("",responseJson.msg,"success");
}
if(responseJson.success==false){//返回false
QiYuComponents.bootstrapSweetAlert("",responseJson.msg,"error");
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
QiYuComponents.bootstrapSweetAlert("","系统错误!!!","error");
}
});
} else {
swal("", "已经取消了当前操作", "error");
}
});
return false;
}

部门模块js文件—dep.js

//@ sourceURL=dep.js
/**
* 组织架构管理模块js
*/
var QiYuDep = function () {
//部门主页面
var $depTree;//树定义
var depId="depTree";//树节点id
var depDataAjaxUrl="dep/json/list";//获取部门json数据地址
var depData;//部门josn数据
var depInfoAjaxHtml="dep/info";//获取部门信息
var rightContentClass="todo-content";
var deleteDepAjaxUrl = "dep/";
//增加部门属性
var $addDepForm=$("#depAddForm");//增加部门表单
var addDepAjaxUrl=QiYuComponents.getContextPath()+"/dep";
var $addDepBtn =$("#addDepBtn");//增加部门按钮
//修改部门属性
var $updateDepForm = $("#depUpdateForm");
var updateDepAjaxUrl=QiYuComponents.getContextPath()+"/dep";
var $updateDepBtn = $("#updateDepBtn");

var initDepData=function () {
$.ajax({
type:"GET",
cache:false,
url:depDataAjaxUrl,
success:function(responseJson){
if(responseJson.success){//成功
depData=responseJson.obj;
initDepTree();//初始化树列表
}else{
QiYuComponents.bootstrapSweetAlert("",responseJson.msg,"error");
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
QiYuComponents.bootstrapSweetAlert("","获取部门数据出错,系统错误!!!","error");
}
});
}

var addHoverDom=function(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
QiYuComponents.layerOpen("增加部门",'800px','350px',"dep/add/view?depId="+treeNode.id)
});
};
var removeHoverDom=function(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};

var onZtreeClick=function(event, treeId, treeNode) {
QiYuComponents.getPageData(depInfoAjaxHtml+"/"+treeNode.id,null,rightContentClass);
}

var onZtreeEditorClick=function (treeId, treeNode) {
QiYuComponents.layerOpen("修改部门",'800px','350px',"dep/update/view?depId="+treeNode.id);
return false;
}
var onZTreeRemoveClick = function (treeId, treeNode) {
if(null!=treeNode.children && treeNode.children.length>0){
QiYuComponents.bootstrapSweetAlert("","不能删除父节点","error");
return false;
}
swal({
title: "确定删除 "+treeNode.name+"?",
text: treeNode.name+" 下面的人员将会一起删除",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
$.ajax({
type:"DELETE",
cache:false,
url:deleteDepAjaxUrl+"?id="+treeNode.id,
success:function(responseJson){
if(responseJson.success==true){//返回true
$depTree.removeNode(treeNode);//动态删除该节点
QiYuComponents.bootstrapSweetAlert("",responseJson.msg,"success");
}
if(responseJson.success==false){//返回false
QiYuComponents.bootstrapSweetAlert("",responseJson.msg,"error");
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
QiYuComponents.bootstrapSweetAlert("","系统错误!!!","error");
}
});
} else {
swal("", "已经取消了当前操作", "error");
}
});
return false;
}

var initDepTree=function () {
//初始化树的配置参数
var setting = {
view: {
showLine: true,
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
data: {
simpleData: {
enable: true
}
},
check: {
enable: false,//在节点前显示checkbox
chkboxType: {"Y": "", "N": ""}//父节点和字节不级联
},
edit: {
enable: true
},
callback: {
onClick: onZtreeClick,
beforeEditName:onZtreeEditorClick,
beforeRemove: onZTreeRemoveClick
}
};
if(null!=$depTree && ""!=$depTree && undefined!=$depTree){//不为空

}else{
$depTree = $.fn.zTree.init($("#"+depId), setting, depData);
}
var allNodes = $depTree.getNodes();
if(allNodes.length>0){//查询出来的是有数据的
$depTree.expandNode(allNodes[0]);//展开第一个节点
QiYuComponents.getPageData(depInfoAjaxHtml+"/"+allNodes[0].id,null,rightContentClass); //点击第一个节点
}
}

var initDepAddBootStrapValidate = function () {
$addDepForm.bootstrapValidator({
fields: {
depName: {
validators: {
notEmpty: {
message: '部门名称不能为空'
}
}
},
depCode:{
validators: {
notEmpty: {
message: '部门编码不能为空'
}
}
}
}
}).on("success.form.bv",function(e){
swal({
title: "确定提交表单?",
text: "",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
depAjax(addDepAjaxUrl,$addDepForm.serialize(),"POST");
} else {
swal("", "已经取消了当前操作", "error");
}
});
});
}

var depAjax = function (ajaxUrl,data,method) {
$.ajax({
type:method,
cache:false,
url:addDepAjaxUrl,
data:data,
success:function(responseJson){
if(responseJson.success==true){//返回true
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index);
(parent.QiYuComponents).bootstrapSweetAlert("",responseJson.msg,"success");
if(method=="POST"){
(parent.QiYuDep).addDepNode(responseJson.obj);//调用添加方法
}
// else if(method=="PUT"){
//     (parent.QiYuDep).updateDepNode(responseJson.obj);//调用修改方法
// }

}
if(responseJson.success==false){//返回false
QiYuComponents.bootstrapSweetAlert("",responseJson.msg,"error");
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
QiYuComponents.bootstrapSweetAlert("","系统错误!!!","error");
}
});
}

var initDepUpdateBootStrapValidate = function () {
$updateDepForm.bootstrapValidator({
fields: {
depName: {
validators: {
notEmpty: {
message: '部门名称不能为空'
}
}
},
depCode:{
validators: {
notEmpty: {
message: '部门编码不能为空'
}
}
}
}
}).on("success.form.bv",function(e){
swal({
title: "确定提交表单?",
text: "",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
depAjax(updateDepAjaxUrl,$updateDepForm.serialize(),"PUT");
} else {
swal("", "已经取消了当前操作", "error");
}
});
});
}
/**
* 增加页面调用父页面方法,给zTree动态添加数据
* @param depNode
*/
var addDepNode = function (depNode) {
var pNode = $depTree.getNodeByParam("id",depNode.pId, null);
$depTree.addNodes(pNode,depNode);
}
/**
* 修改页面调用父页面方法,给zTree动态修改数据
* @param depNode
*/
// var updateDepNode = function (depNode) {
//     $depTree.updateNode(depNode);
// }
return{
//初始主界面树
initDepMain:function () {
initDepData();
},
//初始化部门增加页面
initDepAdd:function () {
initDepAddBootStrapValidate();
$addDepBtn.on("click",function () {
$addDepForm.submit();
});
},
//初始化部门修改页面
initDepUpdate:function () {
initDepUpdateBootStrapValidate();
$updateDepBtn.on("click",function () {
$updateDepForm.submit();
});
},
//增加页面调用父页面方法
addDepNode:function (depNode) {
addDepNode(depNode);
}
}
}();

结语

后端代码就不贴了，应该算比较简单的了，都是单表的增删改查，后续东西多了就会复杂点，先简单点，先做出一版吧。