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

jeecgboot vue3的文档:文档地址链接
版本:Jeecgboot 3.7.0

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:记录一下,如果有问题,欢迎在评论区指出。

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JeecgBoot Vue3版提供了省市区组件。该组件可以实现省、市、区县的管理功能。在源码中的api.js文件中,有三个接口函数可以用来获取省、市、区县的数据,分别是provinceList、cityList和districtList。这些接口函数可以通过调用getAction方法来发送请求获取相应的数据。除此之外,还可以通过导入JAreaTreeTag组件来使用省市区组件。这个组件可以实现省市区的树形展示,并提供选择功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [JeecgBoot平台前端Vue3源码](https://download.csdn.net/download/dcs_pk/88099139)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [jeecgboot省市区联动](https://blog.csdn.net/iwu2495rff/article/details/105392743)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [jeecg-boot自定义省市区划控件](https://blog.csdn.net/qq_45645324/article/details/122898043)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值