穿透

穿透

作者:


穿透

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

在这里展示了两种需求:

  1. 会跳到当前单据类型(项目计划)的单据详情页
  2. 会跳到其他单据类型(项目)的单据详情页。

代码实现

  1. 使用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实现去查看态。

  2. 用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,
                );
              };
            }
          }
        }
      }
    }