视图中跳转

视图中跳转

在列表中跳转

推荐的写法

<Table>
  <Fields>
    <Field name="xxx">
      <RenderType>
        <!-- 下一个视图需要某一个字段的 id -->
        <Action targetView="xxx" record="#{{id: this.record.xxx.id}}" />
      </RenderType>
    </Field>
    <Field name="yyy">
      <RenderType>
        <!-- 下一个视图中可以通过 pageRecord 来获取当前行记录的数据 -->
        <Action targetView="yyy" />
      </RenderType>
    </Field>
    <Field name="zzz">
      <RenderType>
        <!-- 下一个视图中可以通过 env 来获取传入的数据 -->
        <Action targetView="zzz" env="#{{id: this.record.id}}" />
      </RenderType>
    </Field>
  </Fields>
  <RecordActions>
    <Action label="详情" targetView="xxx" record="#{{id: this.record.xxx.id}}" />
  </RecordActions>
</Table>

不允许和不推荐的写法，会导致this.record值不正确

<Table>
  <Fields>
    <Field name="xxx">
      <RenderType>
        <Action action="#{() => openView('xxx', {context: {record: id: this.record.xxx.id}})}" />
      </RenderType>
    </Field>
  </Fields>
</Table>

action 配置动态 targetView

某些场景下一个按钮需要能够根据用户在页面上的操作结果动态调用接口或者动态打开视图，这里有两个方案。

第一个方案：

写多个 action，每个 action 都是固定明确的调用，通过 action 的 show 属性来控制不同场景下 action 的显隐

  <Action label="提交" targetView="viewKey1" show="#{this.record.someField === 3}" record="#{{option: 3}}" />
  <Action label="提交" targetView="viewKey2" show="#{this.record.someField === 2}"  env="#{{type: 2}}" />
  <Action label="提交" targetView="viewKey3" show="#{this.record.someField === 3}"  env="#{{type: 2}}" />

第二个方案：

写一个 action，动态的部分通过 ts 来实现

  <Action action="#{dynamicView}" record="#{{option: 3}}" />
  <Action action="#{dynamicView}" env="#{{type: 2}}" />

import { Controller } from 'nusi-sdk';
export default class extends Controller {
  dynamicView = ({record, env}) => {
    if (record.option === 3) {
      this.openView(view1)
    }
    if (env.type === 2) {
      this.openView(view2)
    }
  }
}