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