Skip to main content

控制表单页上的按钮和表单项

示例源码

本章节的示例代码可以在 sinoform-plugins-web-component-examples/src/plugins/detail-page-extends 中找到。

添加控制表单页上的按钮和表单项的扩展，一般分成两步：

  1. 创建权限扩展文件
  2. 注册权限扩展文件

创建权限扩展文件​

首先在src/plugins/detail-page-extends文件夹下创建helloPermissionExtends文件。通过permission钩子注册监听事件，判断当前节点如果是中心文秘，则退回按钮可见。

src/plugins/detail-page-extends/helloPermission.ts
import AppSetting from "@sinoform/app-setting";

AppSetting.hooks.detailPage.tap(
  "helloPermissionExtends",
  (detailPageContext) => {
    const { hooks, formData } = detailPageContext;
    const { formDesign: { id } = {}, flowNode } = formData;
    // 判断是否为指定的表单id
    if (id === "612df55ac9327f1383eb4bbb") {
      // 在产生最终的表单权限时调用，用来收集自定义的权限控制数据。
      hooks.permission.tap(
        "helloPermissionExtends",
        (_currentUser, permissionItemList) => {
          //判断当前节点是否为`中心文秘`，如果是，则显示`退回`按钮
          if (flowNode?.name === "中心文秘") {
            permissionItemList.push({
              name: "back",
              hidden: false,
            });
          }
        }
      );
    }
  }
);

注册权限扩展文件​

只需在src/index.ts文件中引入扩展文件即可。

src/index.ts
import "./plugins/detail-page-extends/helloPermissionExtends";

示例：办结按钮显示权限​

中心文秘节点配置办结按钮，但必须在经过领导审批后才能显示此按钮

src/plugins/detail-page-extends/customPermissionExtends.ts
import AppSetting from "@sinoform/app-setting";

AppSetting.hooks.detailPage.tap(
  "customPermissionExtends",
  (detailPageContext) => {
    const { hooks, formData, formState } = detailPageContext;
    const { formDesign: { id } = {}, flowNode, passNodes } = formData;
    // 判断是否为指定的表单id
    if (id === "612df55ac9327f1383eb4bbb") {
      // 在产生最终的表单权限时调用，用来收集自定义的权限控制数据。
      hooks.permission.tap(
        "customPermissionExtends",
        (currentUser, permissionItemList) => {
          // 判断当前节点是否是`中心文秘`节点且流程已经流经`领导审批`节点，这里用到了节点id,由于每个节点的id都不一致，因此如果使用节点id的话，此权限判定只能对绑定的表单起作用。如果此逻辑为共用，建议使用节点名称匹配，即`node.name !== '领导审批'`
          if (
            flowNode?.name === "中心文秘" &&
            passNodes?.every(
              (node) => node.id !== "4e7d5e6f-5da7-4b34-a056-950939f6e557"
            )
          ) {
            permissionItemList.push({
              name: "end",
              hidden: true,
            });
          }
        }
      );
    }
  }
);

示例：控制表单字段可见且可编辑​

流程 办结 之后，智能表单管理员 对表单中的用户反馈有可见且可编辑权限

customPermissionExtends.ts
import AppSetting from "@sinoform/app-setting";

AppSetting.hooks.detailPage.tap(
  "customPermissionExtends",
  (detailPageContext) => {
    const { hooks, formData, formState } = detailPageContext;
    const { formDesign: { id } = {}, flowNode, passNodes } = formData;
    // 判断是否为指定的表单id
    if (id === "612df55ac9327f1383eb4bbb") {
      // 在产生最终的表单权限时调用，用来收集自定义的权限控制数据。
      hooks.permission.tap(
        "customPermissionExtends",
        (currentUser, permissionItemList) => {
          // 判断是否是已办结状态，如果是并且当前登录人是`智能表单管理员`，则表单中的用户反馈字段可见
          if (
            formState.values?.workflowStatus === "已办结" &&
            currentUser.userName === "智能表单管理员"
          ) {
            permissionItemList.push({
              name: "yonghufankui", // 用户反馈字段标识
              hidden: false,
              readOnly: false,
            });
          }
        }
      );
    }
  }
);