NutzCN Logo
分享 Vue.js(Element)级联筛选器动态加载树形数据
发布于 2018天前 作者 大鲨鱼 2859 次浏览 复制 上一个帖子 下一个帖子
标签: nutzwk

后台代码:根据权限取树形单位数据

    @At("/tree")
    @Ok("json")
    @RequiresPermissions("sys.manager.unit")
    public Object tree(@Param("pid") String pid, HttpServletRequest req) {
        try {
            List<Sys_unit> list = new ArrayList<>();
            List<NutMap> treeList = new ArrayList<>();
            if (shiroUtil.hasRole("sysadmin")) {
                Cnd cnd = Cnd.NEW();
                if (Strings.isBlank(pid)) {
                    cnd.and("parentId", "=", "").or("parentId", "is", null);
                } else {
                    cnd.and("parentId", "=", pid);
                }
                cnd.asc("location").asc("path");
                list = sysUnitService.query(cnd);
            } else {
                Sys_user user = (Sys_user) shiroUtil.getPrincipal();
                if (user != null && Strings.isBlank(pid)) {
                    list = sysUnitService.query(Cnd.where("id", "=", user.getUnitid()).asc("path"));
                } else {
                    Cnd cnd = Cnd.NEW();
                    if (Strings.isBlank(pid)) {
                        cnd.and("parentId", "=", "").or("parentId", "is", null);
                    } else {
                        cnd.and("parentId", "=", pid);
                    }
                    cnd.asc("location").asc("path");
                    list = sysUnitService.query(cnd);
                }
            }
            for (Sys_unit unit : list) {
                NutMap map = NutMap.NEW().addv("value", unit.getId()).addv("label", unit.getName());
                if (unit.isHasChildren()) {
                    map.addv("children", new ArrayList<>());
                }
                treeList.add(map);
            }
            return Result.success("system.success").addData(treeList);
        } catch (Exception e) {
            return Result.error("system.error");
        }
    }

Element Html:

    <el-cascader
                        :options="options"
                        :show-all-levels="false"
                        v-model="form.parentId"
                        :fetch-suggestions="unitQuery"
                        @active-item-change="unitChange"
                        @select="unitSelect"
                        placeholder="不选择则为顶级"
                ></el-cascader>

Js:

 new Vue({
        el: "#app",
        data: function () {
            return {
                options: []
            }
        },
        methods: {
            loadTree: function (val,cb) {
                var url = base + "/platform/sys/unit/tree";
                $.post(url, {pid: val}, function (data) {
                    if (data.code == 0) {
                        cb(data.data);
                    }
                }, "json");
            },
            unitQuery: function (queryString, cb) {
                cb(this.options);
            },
            unitSelect: function (val) {
            },
            unitChange: function (val) {
                var self=this;
                this.loadTree(val[0],function (tree) {
                    self.options.findIndex(function (obj) {
                        if(val==obj.value){
                            obj.children=tree;
                        }
                    });
                });
            },            
        },
        created: function () {

        }
    });
0 回复
添加回复
请先登陆
回到顶部