Understanding Component Properties

Key properties of the JSelectDept component include:

• serverTreeData: When set to false, the component fetches flat department list from the backend and converts it to tree structure on the frontend
• startPid: Defines the starting parent node for tree data retrieval
• sync: When enabled, allows asynchronous loading of child departments when clicking on tree nodes

When serverTreeData is false, setting the startPid value determines which parent node to start from. However, this approach only retrieves child nodes without including the current level.

Solution Implementation

The solution leverages the startPid property by modifying the DeptSelectModal.vue file to determine the appropriate backend API endpoint based on configuration.

Frontend Modifications

Update the getQueryUrl method in DeptSelectModal.vue:

/**
 * Get query URL method
 */
function getQueryUrl() {
  let queryFn;
  // When startPid is true, query only current level and child departments
  if (getBindValue.startPid === true) {
    queryFn = queryDepartByPidTreeSync;
  } else {
    queryFn = props.sync ? queryDepartTreeSync : queryTreeList;
  }

  return (params) => queryFn(Object.assign({}, params, { primaryKey: props.rowKey }));
}

Define the API function for fetching department tree by parent ID:

/**
 * Asynchronously fetch department tree by parent ID
 */
export const queryDepartByPidTreeSync = (params?) => {
  return defHttp.get({ url: Api.queryDepartByPidTreeSync, params });
};

Component usage in form configuration:

{
  label: 'Department',
  field: 'deptId',
  component: 'JSelectDept',
  componentProps: ({ formActionType, formModel }) => {
    return {
      multiple: false,
      sync: true,
      startPid: true,
    };
  }
}

Backend Implementation

Create a new API endpoint in the back end controller. This endpoint is similar to the existing queryDepartTreeSync method but uses a different service method:

/**
 * Query department tree list for current node and its children
 * @param parentId Parent department ID
 * @param ids Selected department IDs
 * @param primaryKey Primary key field
 * @return List of department tree models
 */
@RequestMapping(value = "/queryDepartByPidTreeSync", method = RequestMethod.GET)
public Result<list>> queryDepartByPidTreeSync(
    @RequestParam(name = "pid", required = false) String parentId,
    @RequestParam(name = "ids", required = false) String ids,
    @RequestParam(name = "primaryKey", required = false) String primaryKey) {
    
    Result<list>> 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("Query failed");
    }
    return result;
}
</sysdeparttreemodel></list></list>

Service Layer Logic

In the service implementation, the queryTreeListByPid method handles the logic:

• When parentId is null: Returns only the current department
• When parentId has a value: Returns child departments under the specified parent

This enables lazy loading of child departments when users click on tree nodes in the component.