SpringBoot+Jquery+Jstree实现企业架构管理

Bertha 。 2023-10-18 20:01 10阅读 0赞

## 场景 ##

#### 效果 ####

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

SpringBoot+Jquery+jsTree实现页面树型结构：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/90897251][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_90897251]

SpringBoot+jquery实现post提交表单并添加隐藏域属性完成编辑功能：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/90900901][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_90900901]

参照上面实现的效果上，只阐述思路。

## 实现 ##

### 数据库设计 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

### 对应实体类 ###

package com.ws.sys.entity;
    
    import com.baomidou.mybatisplus.annotation.*;
    import com.baomidou.mybatisplus.extension.activerecord.Model;
    import java.util.Date;
    import java.io.Serializable;
    import lombok.Data;
    import lombok.EqualsAndHashCode;
    import lombok.experimental.Accessors;
    
    
    @Data
    @EqualsAndHashCode(callSuper = false)
    @Accessors(chain = true)
    public class SysEnterpriseOrg extends Model<SysEnterpriseOrg> {
    
        private static final long serialVersionUID = 1L;
    
        /**
         * 主键id
         */
        @TableId(value = "id", type = IdType.AUTO)
        private Long id;
    
        /**
         * 父类id
         */
        private Long pid;
    
        /**
         * 编号
         */
        private String num;
    
        /**
         * 名称
         */
        private String text;
    
        /**
         * 图标
         */
        private String icon;
    
        /**
         * 分类(0:集团，1公司，2工厂，3部门，4岗位)
         */
        private Integer orgClassify;
    
        /**
         * 节点状态
         */
        private Integer opened;
    
        /**
         * 失效状态
         */
        private Integer disabled;
    
        /**
         * 选中状态
         */
        private Integer selected;
    
        /**
         * 是否删除
         */
        @TableField(fill = FieldFill.INSERT)
        /*@TableLogic*/
        //此字段不要设置为逻辑删除字段。否则架构管理的启用禁用功能受到影响
        private Boolean isDelete;
    
        /**
         * 排序号
         */
        private Long sortNum;
    
        /**
         * 创建时间
         */
        private Date gmtCreat;
    
        /**
         * 修改时间
         */
        private Date gmtModified;
    
        /**
         * 创建人
         */
        private Long creator;
    
        /**
         * 修改人
         */
        private Long modifier;
    
        /**
         * 备注
         */
        private String remark;
    
        /**
         * 是否顶级
         */
        private Integer isTopLevel;
    
    
        @Override
        protected Serializable pkVal() {
            return this.id;
        }
    
    }

注：这里使用的是MybatisPlus所以实体类没有对应的set和get方法。

### 点击菜单显示树形结构实现 ###

1.点击左边的菜单按钮，会显示树形结构以及点击树形结构后右边显示详情。

2.数据库中架构管理，不存在删除架构，使用的是逻辑删除，即不使用这个部门则将这个部门禁用。

再次启用时再将这个部门启用。所以树形结构的显示在页面上有个显示条件。显示启用的还是显示全部的 。

3.显示树形结构的位置是一个div,<div id="org\_tree"></div>

#### html页面代码 ####

<div class="row">
            <div class="col-lg-12">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>架构管理页面</h5>
                        <div class="col-sm-2">
                            <div class="form-group">
                                <label class="col-form-label" for="IsOpened">显示范围</label>
                                <select class="form-control" id="IsOpened" name="IsOpened" >
                                    <option value="1">只显示已启用</option>
                                    <option value="2">显示全部</option>
                                </select>
                            </div>
                        </div>
                        <button class="btn btn-info " type="button" onclick="orgSearch()"><i class="fa fa-refresh"></i>搜索</button>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-lg-3">
                                <h5>架构管理</h5>
                                <div id="org_tree"></div>
                            </div>
                            <div class="col-lg-9">
                                <ul class="sortable-list connectList agile-list ui-sortable">
                                    <li class="success-element ui-sortable-handle ">
                                        <h5>架构详情</h5>
                                        <P>
                                            <button class="btn btn-info " type="button" data-toggle="modal" onclick="orgAdd()"><i class="fa fa-save"></i> 新增</button>
                                            <button class="btn btn-info " type="button" onclick="orgEdit()"><i class="fa fa-paste"></i> 编辑</button>
                                            <button class="btn btn-info " type="button" onclick="validateIsOpen()"><i class="fa fa-trash-o"></i>启用</button>
                                            <button class="btn btn-info " type="button" onclick="validateIsClose()"><i class="fa fa-trash-o"></i>禁用</button>
                                            <button class="btn btn-info " type="button" onclick="orgRefresh()"><i class="fa fa-refresh"></i> 刷新</button>
                                        </P>
                                        <div class="project-list">
                                            <table class="table table-hover" id="orgDetailDisplay">
                                                <tbody>
                                                <tr>
                                                    <td class="project-status w-10">
                                                        <span class="label label-primary">架构编号</span>
                                                    </td>
                                                    <td class="project-title">
                                                        <span id="num">--</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="project-status w-10">
                                                        <span class="label label-primary">架构名称</span>
                                                    </td>
                                                    <td class="project-title">
                                                        <span id="text">--</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="project-status w-10">
                                                        <span class="label label-primary">架构图标</span>
                                                    </td>
                                                    <td class="project-title">
                                                        <span id="icon">--</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="project-status w-10">
                                                        <span class="label label-primary">分类</span>
                                                    </td>
                                                    <td class="project-title">
                                                        <span id="orgClassify">--</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="project-status w-10">
                                                        <span class="label label-primary">是否启用</span>
                                                    </td>
                                                    <td class="project-title">
                                                        <span id="isDelete">--</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="project-status w-10">
                                                        <span class="label label-primary">是否失效</span>
                                                    </td>
                                                    <td class="project-title">
                                                        <span id="disabled">--</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="project-status w-10">
                                                        <span class="label label-primary">是否选中</span>
                                                    </td>
                                                    <td class="project-title">
                                                        <span id="selected">--</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="project-status w-10">
                                                        <span class="label label-primary">是否顶级</span>
                                                    </td>
                                                    <td class="project-title">
                                                        <span id="isTopLevel">--</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="project-status w-10">
                                                        <span class="label label-primary">备注</span>
                                                    </td>
                                                    <td class="project-title">
                                                        <span id="remark">--</span>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </li>
                                </ul>
    
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

#### jquery部分代码 ####

$(document).ready(function() {
        //初始化数据
        initJsTree();
    });
    
    function initJsTree(IsOpened) {
        if(IsOpened==undefined){
            /*如果是首次进入则默认查全部的*/
            IsOpened=2;
        }
        var url = "/sysEnterpriseOrg/doListOrgRecursion.do";
        var select_id = Cookies.get("select_id");
        var data = {selectedId:select_id,IsOpened:IsOpened};
        $.post(url,data).done(function (res) {
    
            if(res.status){
                $('#org_tree').data('jstree', false).empty();
                $('#org_tree').jstree({'core':{
                    'data': res.data,
                    "multiple" : false, // 单选
                }}).on("ready.jstree", function (e, data) { // jstree节点加载完成后调用的监听函数
                    var inst = data.instance;
                    console.log(inst)
                    var obj = inst.get_node(e.target.firstChild.firstChild.lastChild);
                    console.log(obj)
                    if(typeof(select_id) == "undefined"){
                        select_id = obj.id;
                    }
                    var jsonData = {"id" : select_id};
                    setTimeout(function () {
                        $.post("/sysEnterpriseOrg/doGetSingleOrgDetails.do",jsonData).done(function (res) {
                            if(res.status){
                                $("#num").text(res.data.num);
                                $("#text").text(res.data.text);
                                $("#icon").html('<i class="'+res.data.icon+' modal-icon pr-1"></i>'+res.data.icon);
                               switch(res.data.orgClassify){
                                   case 0:
                                       $("#orgClassify").text("集团");
                                       break;
                                   case 1:
                                       $("#orgClassify").text("公司");
                                       break;
                                   case 2:
                                       $("#orgClassify").text("工厂");
                                       break;
                                   case 3:
                                       $("#orgClassify").text("部门");
                                       break;
                                   case 4:
                                       $("#orgClassify").text("岗位");
                                       break;
                                   default:
                                       $("#orgClassify").text("未知分类");
                               }
                                $("#isDelete").text(false==res.data.isDelete?"是":"否");
                                $("#disabled").text(1==res.data.disabled?"是":"否");
                                $("#selected").text(1==res.data.selected?"是":"否");
                                $("#isTopLevel").text(1==res.data.isTopLevel?"是":"否");
                                $("#remark").text(res.data.remark);
                                data.instance.refresh();
                            }
                        }).fail(function (err) {
                            alert("数据加载失败，请重新尝试！");
                        });
                    },200);
                }).on("activate_node.jstree", function (e, data) { // 获取当前活动状态节点（获取当前被点击的节点）
                    Cookies.set("select_id",data.node.id);
                    var data = {"id" : data.node.id};
                    $.post("/sysEnterpriseOrg/doGetSingleOrgDetails.do",data).done(function (res) {
                        if(res.status){
                            $("#num").text(res.data.num);
                            $("#text").text(res.data.text);
                            $("#icon").html('<i class="'+res.data.icon+' modal-icon pr-1"></i>'+res.data.icon);
                            switch(res.data.orgClassify){
                                case 0:
                                    $("#orgClassify").text("集团");
                                    break;
                                case 1:
                                    $("#orgClassify").text("公司");
                                    break;
                                case 2:
                                    $("#orgClassify").text("工厂");
                                    break;
                                case 3:
                                    $("#orgClassify").text("部门");
                                    break;
                                case 4:
                                    $("#orgClassify").text("岗位");
                                    break;
                                default:
                                    $("#orgClassify").text("未知分类");
                            }
                            //$("#opened").text(1==res.data.opened?"是":"否");
                            $("#isDelete").text(false==res.data.isDelete?"是":"否");
                            $("#disabled").text(1==res.data.disabled?"是":"否");
                            $("#selected").text(1==res.data.selected?"是":"否");
                            $("#isTopLevel").text(1==res.data.isTopLevel?"是":"否");
                            $("#remark").text(res.data.remark);
                            data.instance.refresh();
                        }
                    }).fail(function (err) {
                        alert("数据加载失败，请重新尝试！");
                    });
                })
            }else{
                swal({
                    type: 'error',
                    title: '错误提示',
                    text: '接口访问异常，请联系管理员！'
                })
            }
        }).fail(function (err) {
            swal({
                type: 'error',
                title: '错误提示',
                text: '权限数据加载失败，请重新尝试！'
            })
        });
    }

#### 后台Controller方法 ####

@Description("获取企业组织架构列表页")
        @RequestMapping("/org.html")
        public String doGetListForOrg(){
            return "enterpriseOrg/org";
        }
    
        @Description("获取架构树形结构")
        @RequestMapping(value = "/doListOrgRecursion.do", method = RequestMethod.POST)
        @ResponseBody
        public Json doListOrgJsTree(String selectedId,String IsOpened){
            try {
                ResultDTO resultDTO = this.mSysEnterpriseOrgService.doListOrgJsTree(selectedId,IsOpened);
                return Json.getInst().success(resultDTO.getData());
            } catch (Exception e) {
                Log.getInst(this).debug("架构Tree",e);
                return Json.getInst().fail();
            }
        }
    
        @Description("获取架构详情接口")
        @ResponseBody
        @RequestMapping(value = "/doGetSingleOrgDetails.do", method = RequestMethod.POST)
        public Json doGetSingleOrgDetails(String id){
            try {
                ResultDTO resultDTO = this.mSysEnterpriseOrgService.doGetSingleOrgDetails(id);
                return Json.getInst().success(resultDTO.getData());
            } catch (Exception e) {
                return Json.getInst().fail();
            }
        }

其中获取树形结构数据的方法的实现类

@Override
        public ResultDTO doListOrgJsTree(String selectedId,String IsOpened) {
            if(StringUtils.isBlank(selectedId)||selectedId.equals("undefined")) {
                IPage<SysEnterpriseOrg> sysEnterpriseOrgIPage  = page(new Page<SysEnterpriseOrg>(0, 1), new QueryWrapper<SysEnterpriseOrg>().eq("is_delete", Constants.IS_NOT_DELETE));
                if (!(sysEnterpriseOrgIPage.getRecords() != null && !sysEnterpriseOrgIPage.getRecords().isEmpty()))
                    return ResultDTO.getInst().fail();
                selectedId = sysEnterpriseOrgIPage.getRecords().get(0).getId().toString();
            }
            List<TreeJsonVO> treeVOList = new ArrayList<TreeJsonVO>();
            //查询启用的
            if(IsOpened.trim().equals("1")){
                treeVOList= this.baseMapper.listOrgJsTreeOpened(selectedId);
            }
            //查询全部的
            else if(IsOpened.trim().equals("2")){
                treeVOList= this.baseMapper.listOrgJsTree(selectedId);
            }else{//为空则查询启用的
                treeVOList= this.baseMapper.listOrgJsTreeOpened(selectedId);
            }
            return ResultDTO.getInst().success(treeVOList);
        }

获取属性结构详情的实现类

@Override
        public ResultDTO doGetSingleOrgDetails(String id) {
            SysEnterpriseOrg sysEnterpriseOrg =baseMapper.selectById(new Long(id));
            return  ResultDTO.getInst().success(sysEnterpriseOrg);
        }

### 新增与编辑实现 ###

1.编辑时获取选中的id然后查询并在页面展示。

2.重新选择归属结构时获取选中的id并将其设置为上面编辑的pid(父级id)。

3.编辑前要进行验证选中的架构是否是禁用的架构，如果是禁用的则不能进行编辑和添加同级和下级架构。

4.添加同级架构则将选中的id的数据的pid作为新增的记录的pid,添加下级架构则将当前选中的id作为新增的记录的pid。

#### 效果 ####

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][]

添加与编辑使用同一个模态框弹出显示。

#### html代码 ####

<div class="modal inmodal" id="orgAddModel" tabindex="-1" role="dialog"  aria-hidden="true">
            <div class="modal-dialog modal-lg" id="addDiv" th:fragment="addDiv">
                <div class="modal-content animated fadeIn">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                        <i class="fa fa-plus-circle modal-icon pl-1p75"></i>
                        <h4 class="modal-title" th:text="${orgAddTitle}">添加架构</h4>
                        <small><span th:text="${orgAddName}"></span></small>
                    </div>
                    <form id="orgAdd"  role="form" action="">
                        <div class="modal-body">
                            <div class="form-row">
                                <input type="hidden" class="form-control" name= "id"th:value="${sp==null?'':sp.id}"/>
                                <input type="hidden" class="form-control" name="op" th:value="${op}"/>
                                <input type="hidden" class="form-control" name= "pid"th:value="${sp==null?'':sp.pid}"/>
                                <div class="form-group col-md-4">
                                    <label>架构名称</label>
                                    <input type="text" placeholder="请输入架构名称" class="form-control" name= "text"th:value="${sp==null?'':sp.text}"/>
                                </div>
                                <div class="form-group col-md-4" th:if="${sp} ne null">
                                    <label>架构排序</label>
                                    <input type="number" placeholder="请输入排序号码" class="form-control" name= "sortNum"onkeyup="this.value= this.value.replace(/\D/g,'')"onafterpaste="this.value= this.value.replace(/\D/g,'')"th:value="${sp==null?'':sp.sortNum}"/>
                                </div>
                                <div class="form-group col-md-4">
                                    <label>架构图标</label>
                                    <input type="text" placeholder="请输入图标信息" class="form-control" name= "icon"th:value="${sp==null?'':sp.icon}"/>
                                </div>
                                <div class="form-group col-md-4">
                                    <label>架构编号</label>
                                    <input type="text" placeholder="请输入架构编号" class="form-control" name= "num"th:value="${sp==null?'':sp.num}"/>
                                </div>
                                <div class="form-group col-md-4"><label>架构分类</label>
                                    <select class="form-control m-b" name="orgClassify">
                                       <optionth:selected="${sp==null?true:0==sp.orgClassify ? true:false}" value="0">集团</option>
                                       <optionth:selected="${sp==null?false:1==sp.orgClassify ? true:false}" value="1">公司</option>
                                       <optionth:selected="${sp==null?false:2==sp.orgClassify ? true:false}" value="2">工厂</option>
                                       <optionth:selected="${sp==null?false:3==sp.orgClassify ? true:false}" value="3">部门</option>
                                       <optionth:selected="${sp==null?false:4==sp.orgClassify ? true:false}" value="4">岗位</option>
                                    </select>
                                </div>
    
                                <div class="form-group col-md-4"><label>是否展开</label>
                                    <select class="form-control m-b" name="opened">
                                       <optionth:selected="${sp==null?true:0==sp.opened ? true:false}"value="0">折叠</option>
                                       <optionth:selected="${sp==null?true:1==sp.opened ? true:false}" value="1">展开</option>
                                    </select>
                                </div>
    
                                <div class="form-group col-md-4"><label>是否是顶级</label>
                                    <select class="form-control m-b" name="isTopLevel" id="isTopLevel">
                                       <optionth:selected="${sp==null?true:1==sp.isTopLevel ? true:false}"value="1">是</option>
                                       <optionth:selected="${sp==null?true:0==sp.isTopLevel ? true:false}" value="0">否</option>
                                    </select>
                                </div>
                                <div class= "form-groupcol-md-4"th:if="${sp!=null && sp.isTopLevel==0}">
                                    <label>归属机构</label>
                                    <input id="belong_org_id" type="hidden" name="belongOrgId"/>
                                    <input id="belong_org_ids" type="hidden" name="belongOrgIds"/>
                                    <input id="belong_org_des" type="text" readonly placeholder="请选择一项归属机构" class="form-control" name= "belongOrgDes"th:value="${rm==null || rm.sysRole ==null?'':rm.sysRole.remark}"/>
                                    <div id="belong_org_jstree">
                                </div>
                                <div class="form-group col-md-4">
                                    <label>备注</label>
                                    <textarea  rows="4" placeholder="请输入备注" class="form-control" name= "remark"th:text="${sp==null?'':sp.remark}"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

#### Jquery中代码 ####

// 编辑操作
    function orgEdit() {
        //获取选中的记录的id
        var ref = $('#org_tree').jstree(true),
            sel = ref.get_selected();
        sel = sel[0];
        //验证是否是禁用的架构
        var url = '/sysEnterpriseOrg/validateIsOpened.do';
        var data = {"id":sel};
        $.post(url,data).done(function (res) {
            if(res.status==false){
                //弹窗提示信息
                Swal.fire(
                    '此架构处于禁用状态!',
                    res.data,
                    'success'
                )
                //跳出方法，使其不再往下执行
                return false;
            }
        })
        //如果没有选择则提示
        if(!sel.length) {
            swal({
                type: 'error',
                title: '错误提示',
                text: '请选择一个架构！'
            })
            return false;
        }
        //请求后台进行判断实现添加还是编辑
        var url = '/sysEnterpriseOrg/orgAdd.do';
        var data = {"id":sel,"op":"editAction"};
        //隐藏的model框显示并加载数据
        $('#addDiv').load(url, data, function () {
            sel = sel[0];
            var validateData = {"id":sel};
            var ajaxUrl = "/sysEnterpriseOrg/doListOrgRecursion.do";
            $.post(ajaxUrl,data).done(function (res) {
                if(res.status){
                    $('#belong_org_jstree').data('jstree', false).empty();
                    $('#belong_org_jstree').jstree({'core':{
                        'data': res.data,
                        "multiple": false,//单选
                        "themes": {
                            "responsive": false
                        }
                    },
                        "checkbox" : {
                            "keep_selected_style" : false,
                            "three_state":false,
                            "cascade":"undetermined"
                        },
                        "plugins" : [ "checkbox","changed" ]}).on("changed.jstree", function (e, data,node) {
                        var undeterminedsArr =$("#belong_org_jstree").jstree(true).get_undetermined(); //使用get_checked方法
                        var checkedArr = $("#belong_org_jstree").jstree(true).get_checked();
                        choseOrgArr = undeterminedsArr.reverse().concat(checkedArr);
                        choseOrgTextArr = [];
                        choseOrgIdsArr = [];
                        choseOrgArr.forEach(function (value,index,array) {
                            var text = $("#belong_org_jstree").jstree(true).get_node(value).text;
                            var id = $("#belong_org_jstree").jstree(true).get_node(value).id;
                            var textArr = text.split("(");
                            choseOrgTextArr.push(textArr[0]);
                            choseOrgIdsArr.push(id);
                        })
                        $("#belong_org_des").val(choseOrgTextArr.join("/").toString());
                        $("#belong_org_id").val(checkedArr[0]);
                        $("#belong_org_ids").val(choseOrgIdsArr.join(",").toString());
    
                        console.log(checkedArr[0]);
                        console.log(choseOrgIdsArr.join(",").toString());
    
                    })
                    $("#belong_org_jstree").fadeOut();
                    $("#belong_org_des").focus(function(){
                        $("#belong_org_jstree").fadeIn();
                    })
                    $("#belong_org_des").blur(function(){
                        $("#belong_org_jstree").fadeOut();
                    })
                }else{
                    swal({
                        type: 'warning',
                        title: '异常提示:',
                        text: '获取归属机构数据失败，请重新尝试！',
                        confirmButtonColor: "#1ab394",
                    })
                }
            }).fail(function (err) {
                swal({
                    type: 'warning',
                    title: '异常提示:',
                    text: '获取归属机构数据异常！',
                    confirmButtonColor: "#1ab394",
                })
            });
            initOrgAddFormValidate("editAction");
            $("#orgAddModel").modal('show');
    
        });
    }

其中验证是否是禁用的后台方法

@Description("验证是否是禁用的架构节点")
        @RequestMapping(value = "/validateIsClosed.do")
        @ResponseBody
        public Json validateIsClosed(String id){
            try {
                ResultDTO resultDTO = this.mSysEnterpriseOrgService.validateIsClosed(id);
                return Json.getInst().success(resultDTO.getData());
            } catch (Exception e) {
                return Json.getInst().fail();
            }
        }

请求后台进行判断实现添加还是编辑

@Description("获取架构添加或编辑model 新增时要验证所选节点是否是启用，启用的节点才能新增同级或者下级架构")
        @RequestMapping("/orgAdd.do")
        public String doGetOrgAddHtml(String op, String id, Model model){
            // 查询本id下架构信息
            SysEnterpriseOrg sysEnterpriseOrg = mSysEnterpriseOrgService.getById(new Long(id));
            model.addAttribute("orgAddTitle", "editAction".equals(op)?"架构编辑":"sameLevel".equals(op)?"同级架构添加":"下级架构添加");
            model.addAttribute("orgAddName",  "editAction".equals(op)?"该页面可对架构数据进行编辑":"sameLevel".equals(op)?"为系统设置一个菜单或者操作架构（同级架构："+sysEnterpriseOrg.getText()+"）":"为系统设置一个菜单或者操作机构（父级架构："+sysEnterpriseOrg.getText()+"）");
                if(!"editAction".equals(op)){
                sysEnterpriseOrg.setNum(null);
                sysEnterpriseOrg.setText(null);
                sysEnterpriseOrg.setOrgClassify(null);
                sysEnterpriseOrg.setOpened(null);
                sysEnterpriseOrg.setSelected(null);
                sysEnterpriseOrg.setSortNum(null);
                sysEnterpriseOrg.setIsTopLevel(null);
                sysEnterpriseOrg.setRemark(null);
                //sysEnterpriseOrg.setIcon(null);
            }
            sysEnterpriseOrg.setPid(sysEnterpriseOrg.getPid()==null?0L:sysEnterpriseOrg.getPid());
            model.addAttribute("sp",sysEnterpriseOrg);
            model.addAttribute("op",op);
            return "enterpriseOrg/org::addDiv";
        }

#### 添加功能的jquery代码 ####

/**
     * 添加架构
     * @returns {boolean}
     */
    function orgAdd() {
        var ref = $('#org_tree').jstree(true),
            sel = ref.get_selected();
        if(!sel.length) {
            swal({
                type: 'error',
                title: '错误提示',
                text: '请选择一个架构！'
            })
            return false;
        }
        sel = sel[0];
        //验证是否是禁用的架构
        var url = '/sysEnterpriseOrg/validateIsOpened.do';
        var data = {"id":sel};
        $.post(url,data).done(function (res) {
            debugger
            if(res.status==false){
                Swal.fire(
                    '此架构处于禁用状态!',
                    res.data,
                    'success'
                )
                return false;
            }
        })
        swal({
            title: '创建新的架构？',
            text: '请您首先选择需要创建的架构等级！',
            type: 'warning',
            showCloseButton: true,
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            cancelButtonColor: '#DD4B55',
            confirmButtonText: '下级创建',
            cancelButtonText: '同级创建',
        }).then(function(isConfirm) {
            //添加下级机构
            if (isConfirm.value === true) {
                var url = '/sysEnterpriseOrg/orgAdd.do';
                var data = {"id":sel,"op":"nextLevel"};
                $('#addDiv').load(url, data, function () {
                    initOrgAddFormValidate("nextLevel");
                    $("#orgAddModel").modal('show');
                });
            }
            //添加同级架构
            if (isConfirm.dismiss === "cancel") {
                var url = '/sysEnterpriseOrg/orgAdd.do';
                var data = {"id":sel,"op":"sameLevel"};
                $('#addDiv').load(url, data, function () {
                    initOrgAddFormValidate("sameLevel");
                    $("#orgAddModel").modal('show');
                });
            }
        });
    }

编辑或者保存后进行保存的方法

@Description("保存架构数据")
        @RequestMapping(value = "/doAddSingleOrg.do", method = RequestMethod.POST)
        @ResponseBody
        public Json doAddSingleOrg(SysEnterpriseOrgVO sysEnterpriseOrg, String op){
            try {
                ResultDTO resultDTO = this.mSysEnterpriseOrgService.doAddSingleOrg(sysEnterpriseOrg,op);
                return Json.getInst().success(resultDTO.getData());
            } catch (Exception e) {
                return Json.getInst().fail();
            }
        }

保存方法具体的实现代码

@Override
        public ResultDTO doAddSingleOrg(SysEnterpriseOrgVO sysEnterpriseOrg, String op) {
            // 获取选定数据,如果没有则说明该架构已被删除，提示前段架构选择错误
            SysEnterpriseOrg sp = getById(sysEnterpriseOrg.getId());
            if(sp==null){
                return ResultDTO.getInst().fail("您选择的架构已被删除");
            }else{
            // 设置公共参数
            sysEnterpriseOrg.setPid("#".equals(sysEnterpriseOrg.getPid())?null:sysEnterpriseOrg.getPid());
            sysEnterpriseOrg.setIsDelete(false);
            sysEnterpriseOrg.setCreator(ShiroHelper.getUser().getUserId());
            sysEnterpriseOrg.setGmtCreat(new Date());
            sysEnterpriseOrg.setModifier(ShiroHelper.getUser().getUserId());
            sysEnterpriseOrg.setGmtModified(new Date());
            sysEnterpriseOrg.setDisabled(0);
            sysEnterpriseOrg.setSelected(0);
            //同级
            if("sameLevel".equals(op)){
                return doAddSameLevelorg(sysEnterpriseOrg, sp);
            }
            // 如果为下级，则
            else if("nextLevel".equals(op)){
                return doAddNextLevelOrg(sysEnterpriseOrg, sp);
            }
            else{
                // 执行update操作
                return doEditOrg(sysEnterpriseOrg, sp);
            }
            }
        }

添加同级架构具体实现

判断是否为顶级架构，在新增时有个赋值的设置，如果这个字段为1或者这个实体类的pid为0则是顶架构。

/**
         * 保存同级架构
         * @param sysEnterpriseOrg
         * @param sp
         * @return
         */
        private ResultDTO doAddSameLevelorg(SysEnterpriseOrg sysEnterpriseOrg, SysEnterpriseOrg sp) {
            //如果为顶级
            if(sysEnterpriseOrg.getIsTopLevel()==1||sysEnterpriseOrg.getPid().equals(0L)){
                sysEnterpriseOrg.setPid(null);
            } else{
                sysEnterpriseOrg.setPid(sp.getPid());
            }
            int count = baseMapper.insert(sysEnterpriseOrg);
            if(0==count)
                return ResultDTO.getInst().fail();
            return ResultDTO.getInst().success();
        }
    
    }

添加下级架构具体实现

/**
         * 保存下一级架构
         * @param sysEnterpriseOrg
         * @param sp
         * @return
         */
        private ResultDTO doAddNextLevelOrg(SysEnterpriseOrg sysEnterpriseOrg, SysEnterpriseOrg sp) {
            // 设置下一级公共参数
            sysEnterpriseOrg.setPid(sysEnterpriseOrg.getId());
            sysEnterpriseOrg.setId(null);
            // 判断是否为空，为空则为第一条
                int insertCount = baseMapper.insert(sysEnterpriseOrg);
                if(0==insertCount){
                    return ResultDTO.getInst().fail();
                }else{
                    return ResultDTO.getInst().success();
                }
        }

编辑具体实现

private ResultDTO doEditOrg(SysEnterpriseOrgVO sysEnterpriseOrg, SysEnterpriseOrg sp) {
            sp.setText(sysEnterpriseOrg.getText());
            sp.setSortNum(sysEnterpriseOrg.getSortNum());
            sp.setIcon(sysEnterpriseOrg.getIcon());
            sp.setPid(sysEnterpriseOrg.getBelongOrgId());
            sp.setRemark(sysEnterpriseOrg.getRemark());
            sp.setGmtCreat(sysEnterpriseOrg.getGmtCreat());
            sp.setIsTopLevel(sysEnterpriseOrg.getIsTopLevel());
            sp.setDisabled(sysEnterpriseOrg.getDisabled());
            sp.setOpened(sysEnterpriseOrg.getOpened());
            sp.setOrgClassify(sysEnterpriseOrg.getOrgClassify());
            sp.setIsDelete(sysEnterpriseOrg.getIsDelete());
            boolean flag = this.updateById(sp);
            return flag?ResultDTO.getInst().success():ResultDTO.getInst().fail();
        }

### 启用与禁用实现 ###

#### 效果 ####

选中一条点击禁用

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4][]

点击确定

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 5][]

再次点击禁用

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 6][]

选中禁用的点击启用

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 7][]

点击确定

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 8][]

再次点击启用

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 9][]

#### html页面代码 ####

#### Jquery中代码 ####

启用功能实现：

启用时需要将当前架构以及所有子级架构和所有父级架构启用。

启用前需要校验是否已经启用

//验证是否启用
    function validateIsOpen() {
            //获取选中的数据的id
            var ref = $('#org_tree').jstree(true),
                sel = ref.get_selected();
            sel = sel[0];
            //设置请求的url 与请求参数
            var url = '/sysEnterpriseOrg/validateIsOpened.do';
            //这句一定要加，不能只写data = sel
            var data = {"id":sel};
            $.post(url,data).done(function (res) {
               //请求后的回调方法
                if(res.status==true){
                    //弹窗提示
                    Swal.fire(
                        '无须重复启用!',
                        res.data,
                        'success'
                    )
                    //使跳出方法，不再往下执行
                    return false;
                }else{
                    //执行相关业务方法---启用操作
                    orgOpen()
                }
            })
        }

请求后台的代码

@Description("验证是否是启用的架构节点")
        @RequestMapping(value = "/validateIsOpened.do")
        @ResponseBody
        public Json validateIsOpened(String id){
            try {
                Boolean resultDTO = this.mSysEnterpriseOrgService.validateIsOpened(id);
                //如果为true则返回成功。代表已经启用
                if(resultDTO){
                    return Json.getInst().fail();
                }else{
                    //代表禁用
                    return Json.getInst().success();
                }
            } catch (Exception e) {
                return Json.getInst().fail();
            }
        }

执行相关启用业务的代码

//启用操作
    function orgOpen() {
        Swal.fire({
            title: '确定启用吗?',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#23c6c8',
            cancelButtonColor: '#d33',
            cancelButtonText:'取消',
            confirmButtonText: '确定'
        }).then((result) => {
            if (result.value) {
            var ref = $('#org_tree').jstree(true),
                sel = ref.get_selected();
            sel = sel[0];
            debugger
            if(!sel.length) {
                swal({
                    type: 'error',
                    title: '错误提示',
                    text: '请选择一个架构！'
                })
                return false;
            }
            debugger
            var url = '/sysEnterpriseOrg/doOrgOpen.do';
            var data = {"id":sel};
            $.post(url,data).done(function (res) {
                if(res.status){
                    initJsTree();
                    Swal.fire(
                        '启用成功!',
                        res.data,
                        'success'
                    )
                }else{
                    Swal.fire(
                        '异常提示',
                        '执行启用操作失败',
                        'error'
                    )
                }
            }).fail(function (err) {
                Swal.fire(
                    '异常提示',
                    '数据启用失败',
                    'error'
                )
            });
        }
    });
    }

启用时后台执行方法代码

@Description("启用")
        @RequestMapping(value = "/doOrgOpen.do")
        @ResponseBody
        public Json OrgOpen(String id){
            try {
                ResultDTO resultDTO = this.mSysEnterpriseOrgService.doOrgOpen(id);
                return Json.getInst().success(resultDTO.getData());
            } catch (Exception e) {
                return Json.getInst().fail();
            }
        }

具体实现层代码

1.启用时获取到传递过来的id。

2.通过递归算法查询此id对应的所有父级架构，将其设置为启用。

3.然后通过递归算法查询此id所对应的所有子级架构，将其设置为启用。

4.然后启用自己。

启用具体实现代码：

@Override
        public ResultDTO doOrgOpen(String id) {
    
            //启用父级架构
            //查询所有父级架构
            selectFather(Long.parseLong(id));
            for (Long s: resultFather
                 ) {
                SysEnterpriseOrg sysEnterpriseOrg = baseMapper.selectById(s);
                sysEnterpriseOrg.setIsDelete(false);
                this.updateById(sysEnterpriseOrg);
            }
            //启用子级架构
            //查询所有子级架构
            List<Long> ids =new ArrayList<Long>();
            ids.add(Long.valueOf(id));
            selectChild(ids);
            for (Long s: resultChild
                    ) {
                SysEnterpriseOrg sysEnterpriseOrg = baseMapper.selectById(s);
                sysEnterpriseOrg.setIsDelete(false);
                this.updateById(sysEnterpriseOrg);
            }
            //启用自己
            SysEnterpriseOrg sysEnterpriseOrg = baseMapper.selectById(id);
            sysEnterpriseOrg.setIsDelete(false);
            boolean flag = this.updateById(sysEnterpriseOrg);
            return flag?ResultDTO.getInst().success():ResultDTO.getInst().fail();
        }

其中递归算法的实现参照：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/92785921][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_92785921]

禁用功能实现：

禁用时将当前架构以及其所有子级架构全部禁用。

Jquery部分代码:

禁用前验证是否已经禁用：

//验证是否禁用
    function validateIsClose() {
        var ref = $('#org_tree').jstree(true),
            sel = ref.get_selected();
        sel = sel[0];
        var url = '/sysEnterpriseOrg/validateIsOpened.do';
        var data = {"id":sel};
        $.post(url,data).done(function (res) {
            debugger
            if(res.status==false){
                Swal.fire(
                    '此架构处于禁用状态!',
                    res.data,
                    'success'
                )
                return false;
            }else{
                orgClose()
            }
        })
    }

具体调用禁用方法：

//禁用操作
    function orgClose() {
        var ref1 = $('#org_tree').jstree(true),
            sel1 = ref1.get_selected();
        var validateUrl='/sysEnterpriseOrg/validateIsOpened.do';
        sel1 = sel1[0];
        var validateData = {"id":sel1};
        $.ajax(validateUrl,validateData).done(function (res) {
            if(res==false){
                swal({
                    type: 'warning',
                    title: '异常提示:',
                    text: '此架构已经禁用',
                    confirmButtonColor: "#1ab394",
                })
                return false;
            }
        });
        Swal.fire({
            title: '确定禁用吗?',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#23c6c8',
            cancelButtonColor: '#d33',
            cancelButtonText:'取消',
            confirmButtonText: '确定'
        }).then((result) => {
            if (result.value) {
            var ref = $('#org_tree').jstree(true),
                sel = ref.get_selected();
            if(!sel.length) {
                swal({
                    type: 'error',
                    title: '错误提示',
                    text: '请选择一个架构！'
                })
                return false;
            }
          debugger
            sel = sel[0];
            var url = '/sysEnterpriseOrg/doOrgClose.do';
            var data = {"id":sel};
            $.post(url,data).done(function (res) {
                if(res.status){
                    initJsTree();
                    Swal.fire(
                        '禁用成功!',
                        res.data,
                        'success'
                    )
                }else{
                    Swal.fire(
                        '异常提示',
                        '执行禁用操作失败',
                        'error'
                    )
                }
            }).fail(function (err) {
                Swal.fire(
                    '异常提示',
                    '数据禁用失败',
                    'error'
                )
            });
        }
    })
    }

后台方法实现：

@Description("禁用")
        @RequestMapping(value = "/doOrgClose.do")
        @ResponseBody
        public Json OrgClose(String id){
            try {
                ResultDTO resultDTO = this.mSysEnterpriseOrgService.doOrgClose(id);
                return Json.getInst().success(resultDTO.getData());
            } catch (Exception e) {
                return Json.getInst().fail();
            }
        }

具体禁用业务实现代码：

/***
         * 禁用
         * @param id
         * @return
         */
        @Override
        public ResultDTO doOrgClose(String id) {
            //禁用子级架构
            //查询所有子级架构
            List<Long> ids =new ArrayList<Long>();
            ids.add(Long.valueOf(id));
            selectChild(ids);
            for (Long s: resultChild
                    ) {
                SysEnterpriseOrg sysEnterpriseOrg = baseMapper.selectById(s);
                sysEnterpriseOrg.setIsDelete(true);
                this.updateById(sysEnterpriseOrg);
            }
            //禁用自己
            SysEnterpriseOrg sysEnterpriseOrg = baseMapper.selectById(id);
            sysEnterpriseOrg.setIsDelete(true);
            boolean flag = this.updateById(sysEnterpriseOrg);
            return flag?ResultDTO.getInst().success():ResultDTO.getInst().fail();
        }

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190618153020262.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_90897251]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90897251
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_90900901]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90900901
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190618153039168.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190618153221526.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190618153230276.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190618153445210.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20190618153456706.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20190618153508925.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20190618153520720.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20190618153528564.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20190618153540438.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_92785921]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92785921