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

news2024/11/15 12:01:15

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.coloradmin.cn/o/1927565.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在uniapp中如何使用地图

1&#xff0c;技术选择 最好是使用webview html形式加载&#xff0c;避免打包app时的地图加载问题 2&#xff0c;webview使用 使用webview必须按照官方文档,官网地址&#xff1a;https://uniapp.dcloud.net.cn/component/web-view.html <template><view><!…

windows电脑的linux虚拟机连接电脑网络的方法

一、虚拟机新建网络适配器,将其设置为NAT模式 子网等信息就不知道该设置什么网段的先就设置为192.168.0.x,后面可以修改 二、电脑设置 1.网络和Internet>高级网络设置 2.编辑虚拟网络NAT适配器 &#xff08;1&#xff09;选中"自动获取ip地址",确认 3.编辑WLAN…

【后端开发实习】用Redis实现消息队列邮件发送

简介 用Resi本身封装的方法相比于调redis-smq库&#xff0c;实现方式就要简单朴素很多&#xff1a; 调用redis本身的List数据结构的Lpush实现消息的进队。用Redis的List数据结构的brpop方法实现消息的出队。将出队消息通过邮件方法发送给指定的用户。 生动形象理解就是用redi…

RabbitMQ 实现简易即时通讯

设计思路 利用消息队列的特性进行消息投递&#xff0c;假设客户端 A 要与客户端 B 进行通信。 客户端 A &#xff1a;创建队列 A-B &#xff0c;发送的消息推送到 A-B 队列&#xff0c; 绑定 B-A 队列&#xff0c;接收 B-A 队列推送给客户端的消息。 客户端 B &#xff1a;创建…

ROS2入门到精通—— 2-2 ROS2实战:运动规划仿真环境Nav2搭建和导航测试

1 Nav2总体架构 头文件源文件约八万行 安装cloc&#xff1a;sudo apt install cloc bigdavidbigdavid-Legion-Y9000P-IRX8:~/Nav2$ cloc .1137 text files.1133 unique files. 57 files ignored.github.com/AlDanial/cloc v 1.90 …

72.WEB渗透测试-信息收集- WAF、框架组件识别(12)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;71.WEB渗透测试-信息收集- WAF、框架组件识别&#xff08;11&#xff09;-CSDN博客 常用…

视频剪辑软件如何选?FCPX和PR更适合新手呢

随着抖音、快手等短视频平台的迅速兴起&#xff0c;短视频数量急剧增加。想要发布一款简单、高质量的短视频&#xff0c;运用剪辑软件至关重要。目前比较流行的有Adobe家的Premiere&#xff0c;以及Final Cut Pro X&#xff0c;经常有用户在二者间&#xff0c;不知如何选择&…

【自媒体直播】手机充当电脑摄像头的方法

你知道如何使用手机作为电脑摄像头进行直播吗&#xff1f;当我们短时间内需要通过线上直播的方式进行录课、召开线上会议等紧急情况&#xff0c;但又不想花费昂贵的费用购买高清电脑摄像设备时&#xff0c;我们可以通过使用第三方专业虚拟摄像头软件通过手机充当电脑摄像头的方…

LinK3D: Linear Keypoints Representation for 3D LiDAR Point Cloud【SLAM-翻译与解读】

LinK3D: Linear Keypoints Representation for 3D LiDAR Point Cloud 摘要 特征提取和匹配是许多机器人视觉任务的基本组成部分&#xff0c;如 2D 或 3D 目标检测、识别和配准。2D 特征提取和匹配已取得巨大成功。然而&#xff0c;在 3D 领域&#xff0c;当前方法由于描述性差…

亲测有效!2024年11月软考详细备考计划分享

一、基础奠基阶段&#xff08;1-2个月&#xff09; 目标设定&#xff1a;全面理解考试要求&#xff0c;奠定坚实的知识基础。 研究考纲&#xff1a;深入研读考试大纲&#xff0c;精确把握考试范围与核心考点。 个性化规划&#xff1a;根据个人学习进度与理解能力&#xff0c…

Dockerfile介绍及创建流程

什么是Dockerfile Dockerfile 是一个文本文件&#xff0c;其内包含了一条条的指令(Instruction)&#xff0c;用于构建镜像。每一条指令构建一层镜像&#xff0c;因此每一条指令的内容&#xff0c;就是描述该层镜像应当如何构建。 Dockerfile 用于指示 docker image build 命令…

2024最新AI创作系统,ChatGPT商业运营系统,AI绘画系统源码,AI视频生成系统,AI智能体、文档分析、多模态模型一站式AIGC解决方案

一、人工智能 人工智能技术正在迅速发展&#xff0c;AI语言模型、AI绘画、AI视频在多个领域都有广泛的应用。它们不仅在科技创新方面表现出色&#xff0c;还在艺术创作、内容生产和商业应用中展现出巨大的潜力。 AI语言模型可以用于自动化内容生成、智能客服、文本翻译等方面…

科技云报道:产业为根大模型应用为擎,容联云推动企业营销服场景重塑

科技云报道原创。 “没有应用&#xff0c;光有一个基础模型&#xff0c;不管是开源还是闭源&#xff0c;一文不值。”在2024世界人工智能大会&#xff08;WAIC 2024&#xff09;现场&#xff0c;百度创始人、董事长兼首席执行官李彦宏直言。 国产大模型的种类越发丰富&#x…

浅谈大模型工程化中的安全防护

之前在社区看很多人谈论大模型&#xff0c;感觉大模型无所不能。但是近期我也是陆续做了两个大模型应用项目&#xff0c;深刻感受到目前阶段大模型还是存在很多问题&#xff0c;深刻体验到了大模型在迈向工程化的过程中任重而道远。 今天把发现的一些主要问题粗略梳理&#xff…

CAN总线学习

can主要用于汽车、航空等控制行业&#xff0c;是一种串行异步通信方式&#xff0c;因为其相较于其他通信方式抗干扰能力更强&#xff0c;更加稳定。原因在于CAN不像其他通信方式那样&#xff0c;以高电平代表1&#xff0c;以低电平代表0&#xff0c;而是通过电压差来表示逻辑10…

树莓派关机

文件 shutdown.sh #!/usr/bin/bash sudo shutdown -r nowpython 文件开头添加 #!/usr/bin/python3

在VSCode上创建Vue项目详细教程

1.前期环境准备 搭建Vue项目使用的是Vue-cli 脚手架。前期环境需要准备Node.js环境&#xff0c;就像Java开发要依赖JDK环境一样。 1.1 Node.js环境配置 1&#xff09;具体安装步骤操作即可&#xff1a; npm 安装教程_如何安装npm-CSDN博客文章浏览阅读836次。本文主要在Win…

企业全历史行为数据 让你对竞争对手的一切清清楚楚

关于商业竞争&#xff0c;在刚进入信息时代的那些年&#xff0c;人们说“现代商战就是信息战”&#xff0c;强调用非对称的或者更快获得的信息来赢得竞争&#xff1b;近些年进入大数据时代&#xff0c;人们又说“得数据者得天下”&#xff0c;发现“数据算法”有很多妙用&#…

890亿,瞄准集成电路和人工智能等领域!

近日&#xff0c;上海市政府近期宣布拟设立总规模达890亿元的三只产业先导母基金&#xff0c;专注于集成电路、生物医药和人工智能三大先导产业的发展。这一举措旨在推动这些领域的创新和产业升级&#xff0c;同时也响应了国家战略新兴产业的发展需求&#xff0c;为支持上海市集…

pytest测试框架+allure超详细教程

1、测试识别和运行 文件识别&#xff1a; 在给定的目录中&#xff0c;搜索所有test_.py或者_test.py文件 用例识别&#xff1a; Test*类包含的所有test_*的方法&#xff08;测试类不能有__init__方法&#xff09;不在类中的所有test_*方法pytest也能执行unit test写的用例和…