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: {
                            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);
        }
    }
}();

结语

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

山竹之七语

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值