容器通用标签-Action

Action 用于描述视图上的行为操作，根据 Action 所在的父级标签(<Actions> <RecordActions>)，大致分为容器级别的 action 和行数据级别的 action

Action 上可配置属性

IActionProps

参数	类型	说明	默认值
label	string	动作显示名	-
type	string	Action 类型，不同的类型对应不同的名称和样式	-
renderType	string	按钮渲染方式，可选值 Button | Link, 一般情况下为 Button ,表格行操作为 Link , 树形场景下为结点操作。	-
show	boolean	显示条件	-
action	string | ((ctx: { record: IDictionary | IDictionary[]}) => any)	对应 Action Key 或者一个方法, 如果是一个异步操作请返回 Promise。在renderType=“Switch”的情况下，只允许传入一个方法，参数为{checked: boolean}	-
layout	’Header’ | ‘Footer’ | ‘Inner’ ｜ ‘GroupField’	显示位置，可选值 ‘Header’ | ‘Footer’ | ‘Inner’ | ‘GroupField’, 仅限于Actions下的Action标签。GroupField类型可在Form和Detail中使用	-
groupFieldKey	string	在Form与Detail容器中，表示Action所属的字段组，对应GroupField上的key属性	-
disabled	boolean	是否禁用 (v2 废除)	-
multi	boolean	是否支持批量操作，在执行时使用容器的批量选择数据	-
context	(context: IDictionary) => IDictionary | string	触发 action 时上下文 context=”#{{modelKey:‘user’, record: {id:1}}}“，也可以是一个方法 context=”#{ (oldContext) => { return { modelKey:‘user’, record: {id: 1} }} }“，如果需要传多个值 context=”#{{modelKey:‘user’, record: [{id:1},{id:2]}}“	-
after	string | (actionParam) => void	Action 完成后执行的动作，目前支持: Refresh(刷新当前数据容器) | GoBack（返回上一视图）| [Action Key] | [Controller Method]	-
afterDelay	number	Action 完成后【延迟多少秒】执行after动作（单位秒）	-
afterView	string	Action 完成后执行的动作跳转的view key	-
openViewType	’Self’ | ‘Blank’| ‘Dialog’ | ‘Drawer’ | ‘MasklessDrawer’ | ‘Columns’ | ‘Inherit’ | string	打开页面方式, Inherit为继承父级页面的打开方式，页签模式中Self自动转为Dialog。如果指定了其他string, 则解析为Slot方式打开，内容为slot key	-
openViewSize	’xs’ | ‘s’ | ‘m’ | ‘l’ | ‘xl’ | number	预设打开页面尺寸，Columns, Dialog, Drawer， 也可指定为具体宽度数值	-
env	object	对于 View Action, 可传递参数至下一个页面， 对于 Server Action, 请求时会额外传递 env 参数	-
confirm	string | ((record: any) => string) | ((record: any) => Promise<string>)	确认操作提示文案, record参数可以拿到当前数据	-
confirmTitle	string | ((record: any) => string) | ((record: any) => Promise<string>)	确认操作提示文案标题, 只有在设置confirm属性后才会生效	-
confirmType	’inline’ | ‘dialog’	确认操作提示样式，inline为悬浮方式，dialog为模态框方式	-
href	string	配置一个链接地址，在同时配置 action 和 href 的情况下, 只有 href 会生效	-
validator	(data?: IDictionary | IDictionary[]) => true | string	配置Action的自定义校验, 如果返回值为 true(校验通过) 或 false(校验不通过,但是没有错误信息提示) 或 错误信息	-
authFlowKey	string	配置为一个authFlowKey, 用于交付控制台勾选鉴权	-
authFuncKey	string	配置为一个authFuncKey, 用于交付控制台勾选鉴权	-
authControllerKey	string	配置为一个authControllerKey, 用于交付控制台勾选鉴权	-
authViewKey	string	authViewKey, 用于交付控制台勾选鉴权	-
authPageKey	string	authPageKey, 用于交付控制台勾选鉴权ReactPage资源	-
pageState	object	仅用于View Action，在url中保存自定义页面状态，例如{ _s : 1}，如果需要清除参数，需要将它设置为空，例如{ _s: ” }	-
key	string	仅用于Definition标签中的Action， 部分容器上的动作属性（例如Table的onRowClick）无法直接配置env/validation等其他属性。这种场景下可配置一个key，解析过程会通过这个key在Definition标签中寻找对应key的Action并解析完整的信息。	-
successTip	string | (() => string)	执行成功后的提示	-
successTipAction	string	配合successTip使用，紧随文本提示之后的操作链接。会在同级的Action标签中搜索对应key的Action，将它作为目标Action执行，目标Action的label将会作为链接显示的文本。	-
targetView	string	指定打开的视图viewKey	-
logicFlow	string	指定执行的logicFlow Key	-
logicFunction	string	指定执行的logicFunction Key	-
logicFunc	string	指定执行的logicFunction Key, 等价于logicFunction属性	-
logicController	string	指定执行的logicController Key,key的值{业务域}/{ControllerName}/{MethodName}	-
processFunction	string	用于接收GoBackWithContext数据时，进行模型转换的logicFunction Key	-
processFunc	string	用于接收GoBackWithContext数据时，进行模型转换的logicFunction Key，等价于processFunction	-
processFlow	string	用于接收GoBackWithContext数据时，进行模型转换的logicFlow Key	-
record	IRecord | ((record: IRecord) => IRecord)	此处 IRecord = IDictionary | IDictionary[] | undefined ， 用于直接定义/修改Action执行时的数据	-
payloadCallback	(context: { modelKey: string; record?: IRecord }) => void	此处 IRecord = IDictionary | IDictionary[] | undefined ， 如果在此视图中打开的弹窗/抽屉/分栏中使用了 action=“GoBackWithContext”，则在返回本视图时会将数据回传给 payloadCallback 方法	-
globalLoading	boolean	开启全局加载	-
goBackTarget	string	返回的目标页面pageId，需要在该视图的View标签上配置pageId属性，并且目标视图处在当前视图打开链路上。在页面执行GoBack时，回调行为（刷新，数据回填等）将会发生在目标视图上	-
closeToTarget	boolean	若配置了goBackTarget，在执行页面返回时将关闭打开链路上的所有视图，直到目标视图为止	false
onColumnClose	() => void	在分栏形式打开视图时，此方法将会作为分栏关闭时的回调	-
withSelected	’checked’ | ‘withHalfChecked’	若action位于树容器中，指定checked为携带树容器的选中节点数据，指定withHalfChecked则包含半选状态的数据	-
isMaskClosable	boolean	若配置了抽屉形式打开视图时，可配置是否点击蒙层关闭	false
onMaskClose	() => void	在抽屉形式打开视图时，此方法将会作为抽屉关闭时的回调	-
icon	string	指定 Action 按钮上的icon名称 (需要在交付控制台的扩展配置配置iconfont的js脚本地址，key为iconfont, 值为url，可配置多个)	-
badgeDot	boolean	-	-
badgeColor	string	-	-
taType	string	trantor action 内置埋点类型	-
taKey	string	trantor action 内置埋点 key	-
debounceTime	number	Action防抖时间（单位：毫秒），防止用户重复点击执行	200
viewResourceAuthKey	string	自定义资源点key	-

新增属性 xml 示例

<View title="人员列表" version="2">
  <Table key="person" model="trantor_doc_Person" dataCondition="">
    <Fields>
      <Field name="name" />
    </Fields>
    <RecordActions>

      <!-- 旧版： serverAction，viewAction -->
      <Action label="冻结" action="person_freeze_serverAction"/>
      <Action label="移除" action="person_delete_serverAction" />
      <Action label="详情" action="person_detail_viewAction" />

      <!-- action标签上有logicFunction、logicFlow、targetView三个属性 -->
      <Action label="冻结" logicFunction="person_freezeFlow"/>
      <!--  使用logicFlow，完成移除操作 -->
      <Action label="移除" logicFlow="person_deleteFunction" />
      <!--  使用targetView，完成视图跳转 -->
      <Action label="详情" targetView="person_detail_view" />

    </RecordActions>
    <Actions>
      <Action type="Create" targetView="personCreateForm" />
      <!--  使用multi，完成批量操作 -->
      <Action multi="#{true}" label="批量删除" logicFlow="person_multiDelFlow" />
      <!--  使用batch，完成批处理 -->
      <Action batch="#{true}" label="批处理" logicFlow="person_updateBatch" />
    </Actions>
  </Table>
</View>

Action 语法糖变更

旧版 Action 标签语法糖不再支持。(旧版中 可简写为 )

涉及到比较常用的 LoadAction, PayloadAction 改为以下写法

<!-- 原LoadAction只需要指定视图key和打开方式， 一般是Dialog或者Drawer -->
<Action label="加载" targetView="modelATable" openViewType="Drawer" processFunction="funcKey"/>

<!-- 原PayloadAction -->
<Action action="GoBackWithContext" label="确定" />

<!-- 其他xxxAction的等效变更 -->
<SubmitAction />
<!-- 需要改为 -->
<Action type="Submit" />

GroupAction

只需要使用 GroupAction 标签包裹 一组需要合并的 Action 即可。label 为标签。

 <Actions>
   <Action label="详情" targetView="partner_CompanyTO_ArchivesDetail" env="#{{id:1}}"/>
   <GroupAction label="下拉按钮">
     <Action openViewType="Dialog" label="邀请" targetView="partner_InvitationBO_invitationCreate"/>
     <Action show="false" label="详情" targetView="partner_CompanyTO_ArchivesDetail" env="#{{id:1}}"/>
     <Action type="Create" label="新建" targetView="partner_SupplierFromQuestionnaireBO_TemplateFormSelectDialog"
             openViewSize="s"
             openViewType="Dialog"/>
   </GroupAction>
   <Action type="Create" label="新建" targetView="partner_SupplierFromQuestionnaireBO_TemplateFormSelectDialog"
           openViewSize="s"
           openViewType="Dialog"/>
</Actions>

Definition Actions 变更

在部分容器/控件的属性中，我们可能需要它执行某一个 Action，但属性值很难完整描述具体 Action 的内容，这时候我们可以对它进行扩展。 旧版 Definition 标签下定义 Action（用于 Action 扩展），在新版中变更为可直接在容器/控件的 Actions/RecordActions 里定义对应的扩展 Action。添加 key 指定唯一标示，使用时只需要绑定 key 值即可。 视图在解析时会根据属性的操作级别，在下级节点的【Actions/RecordActions】中寻找对应 key 值的 Action 标签。

此次变更主要影响的属性有：

受影响属性	所属标签	操作级别	作用域	备注
onRowClick	Table	Actions	当前行，this.record 获取行数据
onAdd	CascadeList	Actions	当前容器，this.record 获取当前数据容器数据
onSelect	Tree 、 CascadeList	RecordActions	当前行，this.record 获取行数据
onUpdate	Table	RecordActions	当前行，this.record 获取行数据
onUpdate	Detail	Actions	当前容器，this.record 获取当前数据容器数据
after	根据当前父节点判定	目前支持: StaticActionTypes	[Action]	[Controller Method]

约定：属性命名均为 onXXX 格式，且值为字符串时，会先寻找对应 key 值的 Action 标签进行扩展。 注：StaticActionTypes 包含： ‘GoBack’, ‘Refresh’, ‘GoBackWithContext’, ‘GoBackToSource’, ‘Upload’, ‘Close’ 。

属性	说明
GoBack	返回上一视图并刷新整个来源页面
Refresh	刷新当前数据容器
GoBackWithContext	返回上一视图并带上表单上下文
GoBackToSource	返回上一视图并刷新来源容器
Upload	上传当前选择项
Close	关闭当前视图，不刷新

---

一般来说，操作作用于容器级别的，均定义在 Actions 内； 行级别的操作【例如 onRowClick，onSelect 等】，定义在 RecordActions 内。 ⚠️ 注意：Action 标签上 after 属性取值为当前级别中。 例如，定义在 Actions 内的 after=actionKey 只会在当前 Actions 内寻找 key=actionKey 的 Action。RecordActions 同理

跨多个视图返回

Action 标签允许 goBackTarget 指定要返回的目标视图，注意该视图必须在打开链条上的非 url 打开的视图。

例如： A 视图 - 分栏打开 B 视图 - 弹窗打开 C 视图 - 弹窗打开 D 视图

以上例子中，ABCD 视图处于同一个打开链条上。如果在视图 B 上指定了pageId属性

<View version="2" pageId="pageB">

且在 D 视图上有一个 Action 按钮声明了 goBackTarget

<Action label="确定并返回" logicFunc="someFunc" after="GoBack" goBackTarget="pageB" />

这个按钮的 GoBack 执行效果将是关闭弹窗 D，并刷视图 B。

如果需要将中间的 C 视图也关闭，可以指定 closeToTarget，那么视图一并关闭直到 goBackTarget 为止。

<Action label="确定并返回" logicFunc="someFunc" after="GoBack" goBackTarget="pageB" closeToTarget="true"/>

⚠️ 注意：goBackTarget 将影响 Action 标签上的所有静态返回 action，包括 Close，GoBack，GoBackToSource，GoBackWithContext，影响的属性包括 action，after。

关闭并刷新多个视图

Action 标签不支持在 DSL 上声明返回并刷新，若需要刷新多个视图，可以通过 controller 获取对应 pageId，并调用相应的刷新操作。

例如： A 视图（pageId: A） - 分栏打开 B 视图 （pageId: B） - 弹窗打开 C 视图

在 C 视图中声明一个 Action 按钮返回并刷新 A，B 视图

<Action label="确定并返回" logicFunc="someFunc" after="#{goBackAndRefresh}"/>

goBackAndRefresh = () => {
  // 获取试图 A 的controller，刷新视图的全部容器
  this.getSourceView("A").refresh();
  // 获取试图 B 的controller，刷新table容器
  this.getSourceView("B").getContainerByKey("table").refresh();
  // 关闭当前视图
  this.closePage();
};

使用自定义 action

<Actions>
  <Action label="Test" action="#{handleCustomAction}"/>
</Actions>

import { Controller } from "nusi-sdk";

export default class extends Controller {
  constructor() {
    super();
  }

  public handleCustomAction({ record, env, context, index }) {}
}

在批量操作上使用自定义 action<Action batch="#{true}"/>

<Actions>
  <Action label="Test" batch="#{true}" action="#{handleBatchAction}"/>
</Actions>

import { Controller } from "nusi-sdk";

export default class extends Controller {
  constructor() {
    super();
  }

  public handleBatchAction({ record, batchParams, env }) {
    //  record行记录
    //  batchParams批量操作参数
    //      flowKey: undefined
    //      funcKey: xxx
    //      idCondition: {type: 'Collection', operator: 'IN', values: Array(1)}
    //      query: IDictionary
    //  env数据
  }
}

Definition Actions 新旧写法对比

<View title="Point Rule" version="2">
  <!-- 旧版写法 -->
  <!-- <Definition>
          <Actions>
            <Action key="rowClickAction" openViewType="Columns" targetView="pos_EquipmentBO_equipmentCreate" />
          </Actions>
        </Definition> -->
    <!-- Table 上使用了onRowClick="rowClickAction" -->
    <Table model="customer_TransRuleBO" onRowClick="rowClickAction">
      <Fields>
        <Field name="transRuleName"/>
        <Field name="transRuleCode"/>
      </Fields>
      <!-- 新版写法 -->
      <!-- onRowClick的操作级别是RecordActions，所以可以在 RecordActions 中定义扩展Action，表达式也可以使用this.record获得行数据 -->
      <!-- 定义了key属性的Action默认 show=false, 也可以再添加show属性把它显示成正常Action按钮 -->
      <RecordActions>
        <Action key="rowClickAction" openViewType="Dialog" targetView="pos_EquipmentBO_equipmentDetail" env="#{{ xId: this.record.xId }}"/>
      </RecordActions>
    </Table>
  </View>

After 例子

<View title="Point Rule" version="2">
    <!--  需要配置定义在 RecordActions 内的， onRowClick才能获取到 -->
    <Table model="customer_TransRuleBO">
      <Fields>
        <Field name="transRuleName"/>
        <Field name="transRuleCode"/>
      </Fields>

      <!-- 可直接在 RecordActions 内定义 -->
      <RecordActions>

        <!-- 此Action 定义给 after 使用，配置了key默认show=false -->
        <Action key="RecordActions__customAfter" openViewType="Columns" targetView="customer_TransRuleBO_RuleAccountDetail"/>

        <!-- 点击提交后执行after，对应上文定义，是跳转到新的视图 -->
        <!-- after 会在兄弟节点中寻找 key=RecordActions__customAfter 的 Action  -->
        <Action label="Submit"
                after="RecordActions__customAfter"
                type="Submit" openViewType="Dialog"
                logicFunc="pos_EquipmentBO_equipmentCreate"
                env="#{{record: this.record}}"/>

      </RecordActions>
    </Table>
  </View>

CascadeList 例子(onSelect)

<View version="2" title="Point Rule" type="List" forModel="customer_TransRuleBO">
  <!-- onAdd 为容器内的全局触发的Action， 绑定Actions中定义的 categoryListAdd -->
  <!-- onSelect 选中行数据触发Action，绑定RecordActions中定义的 categoryListView  -->
  <CascadeList model="md_CategoryBO"

               onAdd="categoryListAdd"
               onSelect="categoryListView"
               >
    <Actions>
      <!-- 此处 this.record 获取的是整个 CascadeList 返回的数据内容  -->
      <Action
              key="categoryListAdd"
              type="Create"
              targetView="b2c_item_FrontCategoryBO_FrontCategoryDetail"
              env="#{{data: this.record}}"
              openViewType="Dialog"/>
    </Actions>
    <RecordActions>
      <Action key="categoryListView" targetView="app_mro_item_CategoryChannelInfoTO_ProductPoolList"/>
    </RecordActions>
  </CascadeList>
 </View>

Drawer 例子

  <!-- onMaskClose： 关闭蒙版时回调 -->
  <!-- isMaskClosable ： 是否点击蒙版关闭抽屉，默认true -->
  <Action label="查看"
    openViewSize="64%"
    openViewType="Drawer"
    onMaskClose="#{doAction}"
    isMaskClosable="#{false}"
    targetView="crm_BusinessClueBO_crm_sales_leadsDetail"
      />

配置自定义 icon

用户可以通过 iconfont 来配置 Action 按钮上的自定义图标，详见：Action 按钮自定义图标

Action 支持上传文件 UploadAction

用户可以通过 renderType UploadAction，来实现 Action 调用本地文件上传接口

用法一： 使用 RenderType 给 UploadAction 配置更多属性

<Actions>
  <Action label="JoseTest"  action="#{handleActionUpload}">
    <RenderType>
      <UploadAction readPolicy="Private" allowedTypes="#{['jpg', 'jpeg', 'png', 'webp']}"  customFilePath="jose/test"/>
    </RenderType>
  </Action>
</Actions>

import { Controller } from "nusi-sdk";

export default class extends Controller {
  constructor() {
    super();
  }

  public handleActionUpload(fileObject) {
    console.log(fileObject);
    // fileObject
    // {
    //  name: "IMG_0896-1.JPG.jpeg"
    //  size: 11888
    //  type: "jpeg"
    //  url: "//terminus-trantor.oss-cn-hangzhou.aliyuncs.com/jose/test/a2a96050-38df-4802-9d83-601afe44d1a8.jpeg"
    // }
    // TODO write your code here
  }
}

用法二：简单使用使用 UploadAction 默认配

<Actions>
  <Action type="Upload" renderType="UploadAction" action="#{someCotrollerMethod}"/>
</Actions>