穿透

作者：

穿透

我比较喜欢叫它超链接，就是点击列表上的单元格会跳到其他页面的功能。

在这里展示了两种需求：

会跳到当前单据类型（项目计划）的单据详情页
会跳到其他单据类型（项目）的单据详情页。

代码实现

使用rowActionController.makeRowEditAction

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


class BudgetModelList extends QueryListPagePresenter { {
  protected getListOption(): IListOption {
    const listOption = super.getListOption();
    return merge(listOption, {
      gridOption: {
        actionColumnOption: {
          visibleSize: 3,
        },
        columnResolver: columnDefs => {
          this.projectColumn(columnDefs);
          columnDefs.forEach(colDef => {
            if (
              (colDef.field === 'code' || colDef.field === 'name') &&
              checkAuth('BudgetModel', FunctionAuthActionType.Update)
            ) {
              colDef.cellClass = 'object-cell-linkable';
              colDef.onCellClicked = event => {
                const editAction = this.presenter.listSolutionConnector.rowActionController.makeRowEditAction(
                  undefined,
                  event.data,
                );
                editAction.onClick(event.rowIndex, event.data);
              };
            }
          });
        },
      },
    });
  }
}

其中的makeRowEditAction是去编辑态的单据，可以换成makeRowViewAction实现去查看态。

用masterHashResolver这个api，可以指定跳转目标单据的entity。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


class TaskPlanListPresenter extends QueryListPagePresenter {
  getListOption(): IListOption {
    return {
      ...super.getListOption(),
      gridOption: {
        columnResolver: columnDefs => {
          // 将数组转化为map，这个可以不做，直接用find在数组中找到你想找的column
          const columnDefsMap = new Map();
          columnDefs.forEach(i => {
            columnDefsMap.set(i.field, i);
          })
          // 找到column
          const projectCode = columnDefsMap.get('project.code');
          // 设置样式和点击事件
          projectCode.cellClass = 'object-cell-linkable';
          projectCode.onCellClicked = event => {
            // 实用列表方案的api来实现跳转
            this.presenter.listSolutionConnector.rowActionController.masterHashResolver(
              {name: EN_Project} as Entity,
              BizListActionEnum.View,
              {id: event.data.project.id},
              event.rowIndex,
              this.presenter.listSolutionConnector.rowActionController.saveSuccess,
            );
          };
        }
      }
    }
  }
}