Skip to main content

列表按钮点击前置事件定制

这篇文章我们主要讲述如何通过插件动态添加列表页按钮点击的前置回调事件。

需求：

列表页删除按钮在删除数据之前可能会做一些前置校验，判断数据是否能真正执行删除操作。

如何在插件项目中使用​

我们可以通过给按钮注册beforeButtonClick的方式来实现这种业务需求，以删除按钮为例。

src/plugins/before-delete-button/index.ts
import AppSetting from "@sinoform/app-setting";

// 按钮点击时的前置回调函数，返回boolean值 如果返回false,则不再执行后续操作，否则正常执行后续操作
const beforeButtonClick = async (
  id: string,
  currentUser: UserInfo,
  designerConfig: FormDesignSetting | ListPageConfigData,
  dataSource: any,
  rowData?: any
) => {
  const result = await http.get("url", {
    params: {
      // 接口所需参数
    },
  });

  if (!result.ok) {
    return false;
  }
  return undefined;
};

// 注册按钮前置回调事件
AppSetting.listButtonConfig.addButtonConfig({
  id: "deleteButton",
  name: "删除",
  listType: "NOFLOW_LIST_PAGE",
  formId: "64b0e356cbf3df3985acfc6e",
  beforeButtonClick,
});

addButtonConfig 参数说明：

  • id: 按钮唯一标识，比如删除按钮为deleteButton，编辑按钮为editButton。
  • name(可选参数): 按钮名称，一般不用指定。
  • formId(可选参数): 列表所属表单设计 id，如果此列表为表单列表，则此项必填。可指定为*，表示所有表单。
  • listId(可选参数): 定制列表的列表设计 id，如果此列表为定制列表，则此属性必填。可填*表示所有。
  • listType(可选参数): 列表类型，主要针对表单列表，包含以下类型：
    • DRAFT_LIST_PAGE: 草稿列表
    • TODO_LIST_PAGE: 待办列表
    • DONE_LIST_PAGE: 已办列表
    • SEARCH_LIST_PAGE: 查询列表
    • NOFLOW_LIST_PAGE: 无流程列表
    • ALL_PAGE: 所有列表都支持
  • beforeButtonClick: 按钮点击时的前置回调函数，返回值为false时，不再执行后续操作；否则继续执行后续操作。
    • id: 表单设计或者列表设计的 id，对应上面的formId或者listId。
    • currentUser: 当前登录人的完整信息。
    • designerConfig: 表单或列表定制的配置数据。
    • dataSource: 列表页数据及状态管理器，包含列表数据、列表刷新方法，列表选中项等。
    • rowData(可选参数): 当前行的数据，如果是行内按钮，可直接用行数据。

注册到智能表单​

在插件项目的入口文件处引入注册列表按钮前置回调的文件即可将事件注册到智能表单中。

src/index.ts
import "./plugins/before-delete-button";