Jeecgboot vue3的选择部门组件JSelectDept如何实现只查询本级以及子级的部门

news/2024/8/21 4:58:11 标签: jeecgboot

jeecgboot vue3的文档:地址

JSelectDept组件实现了弹窗然后选择部门返回的功能,但部门是所有数据,不符合需求,所以在原有代码上稍微改动了一下

组件属性值如下:
在这里插入图片描述
当serverTreeData=false的时候,从后端查询出简单的部门列表数据,在前端进行封装成为树列表数据,这时候设置startPid的值就是从哪个父节点开始获取,但这个方式只能获取到子级没有本级数据。

只有设置了serverTreeData=false时startPid设置值才会有用,于是我利用这个属性在DeptSelectModal.vue文件中判断后端访问的接口地址;当sync属性值设置为异步,后端方法当没有pId参数【点击树节点数据时会传递此参数】时,只查询本部门,若本部门下还有子部门,在点击本部门时加载子部门

1、前端

DeptSelectModal.vue中的 getQueryUrl()方法:
原方法:
在这里插入图片描述
改为:当设置startPid: true =》调用只查询本级、子级部门的方法

 /** 获取查询数据方法 */
      function getQueryUrl() {
        //zx-begin  startPid: true =》只查询本级、子级部门
        let queryFn  = queryDepartTreeSync;
        if(getBindValue.startPid == true){
          queryFn = queryDepartByPidTreeSync;
        }else{
          queryFn = props.sync ? queryDepartTreeSync : queryTreeList;
        }
        //zx-end startPid: true =》只查询本级、子级部门

        //update-begin-author:taoyan date:2022-7-4 for: issues/I5F3P4 online配置部门选择后编辑,查看数据应该显示部门名称,不是部门代码
        return (params) => queryFn(Object.assign({}, params, { primaryKey: props.rowKey }));
        //update-end-author:taoyan date:2022-7-4 for: issues/I5F3P4 online配置部门选择后编辑,查看数据应该显示部门名称,不是部门代码
      }
/**
 * 异步获取部门树列表
 */
export const queryDepartByPidTreeSync = (params?) => {
  return defHttp.get({ url: Api.queryDepartByPidTreeSync, params });
};

组件使用:sync需要设置为异步,后端方法当没有pId参数【点击树节点数据时会传递此参数】时,只查询本部门

 {
        label: '部门',
        field: 'deptId',
        component: 'JSelectDept',
        componentProps: ({formActionType, formModel}) => {
            return {
                multiple: false,
                sync: true,
                startPid: true, //只查询本级、子级部门
            }
        }
    },

后端代码

其实就是复制了queryDepartTreeSync方法,调用serviceImpl时传递不同的

/**
     * 查询自己以及子级的部门数列表
     * @param parentId
     * @param ids
     * @param primaryKey
     * @return
     */
    @RequestMapping(value = "/queryDepartByPidTreeSync", method = RequestMethod.GET)
    public Result<List<SysDepartTreeModel>> queryDepartByPidTreeSync(@RequestParam(name = "pid", required = false) String parentId,
                                                                     @RequestParam(name = "ids", required = false) String ids,
                                                                     @RequestParam(name = "primaryKey", required = false) String primaryKey) {
        Result<List<SysDepartTreeModel>> result = new Result<>();
        try {
            List<SysDepartTreeModel> list = sysDepartService.queryTreeListByPid(true,parentId, ids, primaryKey);
            result.setResult(list);
            result.setSuccess(true);
        } catch (Exception e) {
            log.error(e.getMessage(), e);
            result.setSuccess(false);
            result.setMessage("查询失败");
        }
        return result;
    }

在这里插入图片描述
改红框的地方,若startPid为true,只查询本级
在这里插入图片描述

PS:记录一下,如果有问题,欢迎在评论区指出。


http://www.niftyadmin.cn/n/5555787.html

相关文章

Zynq7000系列FPGA中的DDRI和DDRC

在AXI接口设计中&#xff0c;主端口&#xff08;Master Port&#xff09;和从端口&#xff08;Slave Port&#xff09;的交互是通过仲裁器&#xff08;Arbiter&#xff09;来管理的&#xff0c;以确保多个主设备能够有序地访问共享资源&#xff08;如DDR内存&#xff09;。这个…

进程间通信(下)

system V共享内存 共享内存区是最快的IPC形式。一旦这样的内存映射到共享它的进程的地址空间&#xff0c;这些进程间数据传递不再涉及到内核&#xff0c;换句话说是进程不再通过执行进入内核的系统调用来传递彼此的数据 共享内存示意图 通过上面的图&#xff0c;我们不难想到…

ES6 Generator函数的语法 (七)

ES6 中的 Generator函数是一种特殊类型的函数&#xff0c;它允许你控制函数的执行流程&#xff0c;使其在执行过程中可以多次暂停和恢复。Generator 函数在定义时使用星号 * 作为后缀。 主要特性&#xff1a; 惰性计算&#xff1a;Generator 函数执行到 yield 表达式时会暂停&…

vue组件中的插槽

单个插槽 子组件中的插槽&#xff0c;通过slot标签实现。父组件通过template标签将自定义的内容插入到子组件中。 子组件&#xff1a;存在一个mian块的插槽 <template><div class"layout"><div>标题</div><div class"main">…

leetcode 周赛(406)全AC留念

纪念第一次 leetcode 周赛&#xff08;406&#xff09;全AC 1.(100352. 交换后字典序最小的字符串) 题目描述&#xff1a; 给你一个仅由数字组成的字符串 s&#xff0c;在最多交换一次 相邻 且具有相同 奇偶性 的数字后&#xff0c;返回可以得到的 字典序最小的字符串 。 如…

switch判断的底层原理

switch判断的底层原理 文章目录 switch判断的底层原理一、定义二、整数类型三、字符串类型四、生成的字节码五、优化六、总结六、总结 一、定义 在Java中&#xff0c;switch语句的底层原理是通过跳转表&#xff08;jump table&#xff09;或者一系列的条件分支&#xff08;如i…

【C++】动态内存分配(关于构造与析构函数的调用)动态数组类 动态创建多维数组 知识点+代码学习记录

一.动态内存分配相关知识点 1.堆和栈内存&#xff1a; 堆内存&#xff1a;动态分配的内存位于堆中&#xff0c;它不受作用域限制&#xff0c;由程序员控制其生命周期。 栈内存&#xff1a;局部变量和函数参数等自动分配的内存位于栈中&#xff0c;由编译器自动管理。 2.new…

PYTHON 常用算法 33个

文章目录 冒泡排序&#xff08;Bubble Sort&#xff09;选择排序&#xff08;Selection Sort&#xff09;插入排序&#xff08;Insertion Sort&#xff09;快速排序&#xff08;Quick Sort&#xff09;归并排序&#xff08;Merge Sort&#xff09;堆排序&#xff08;Heap Sort&…