@sinoform/helper-permission
TypeScript icon, indicating that this package has built-in type declarations

1.18.11 • Public • Published

@sinoform/helper-permission

权限辅助工具。

使用方法:

import type { Permission } from '@sinoform/types';
import { usePermissionHelper } from '@sinoform/helper-permission';

const { formData, formState, hooks } = useDetailPage();
const permissionHelper = usePermissionHelper(
  formData,
  formState,
  hooks.permission,
);

// 判断字段 `field_1` 的编辑权限
permissionHelper.isReadOnly('field_1');
// 判断字段 `field_1` 的可见性(注意:第二个参数须为 `false`,表示默认的`hidden` 是 `false`,而不是`permission.hidden`)
permissionHelper.isHidden('field_1', false);
// 判断按钮 `save-button` 的可见性
permissionHelper.isHidden('save-button');

获取表单项权限的帮助类

需要处理以下特性对表单项可见性的影响:

  • 选项关联

使用方式

import { useFieldsPermission } from '@sinoform/helper-get-fields-permission';

function useDetailPageData() {
  /**
   * 获取表单项的权限
   */
  const fieldsPermission = useFieldsPermission(
    formDesignSetting,
    formState,
    basePermissions,
  );

  const formDataContext = {
    asyncPermission: fieldsPermission,
  };

  return {
    formDataContext,
  };
}

选项关联

带有选项的表单项是可以通过选项关联来控制表单项的可见性的。规则:

单选按钮组(表单项0)有 A、B、C 三个选项,其中 A 选项关联显示 表单项1,B 选项关联显示 表单项2,C 选项关联显示 表单项3,表单上还有其他的表单项 表单项4表单项5,如果单选按钮组选中的选项是 表单项1,那么应该出现以下表单项:

  • 表单项 0
  • 表单项 1
  • 表单项 4
  • 表单项 5

支持的表单项

以下内置的表单项均支持:

  • 单选按钮组
  • 复选按钮组
  • 下拉选择框(单选、多选)

其他表单项只要具有以下两个重要特性,也会被认为是支持选项关联的表单项:

  • 特性一:表单项配置有 fieldsMapConfig 字段
  • 特性二:能够从 formValues 中自动获取到选项值
特性一

特性一很好满足,在表单设计器的字段属性面板中添加上 设置选项关联 按钮就可以了。采用 @sinoform/comp-fields-map-config 模块导出的 FieldsMapConfigButton 组件即可,例如:

import FieldsMapConfigButton from '@sinoform/comp-fields-map-config';

<ConfigPanel>
  <FieldsMapConfigButton />
</ConfigPanel>;
特性二

表单项的值需要包含选中的选项值,并且符合下面几种数据格式中的一种即可:

  1. 数据格式 1:选中的选项值直接作为表单项的值

    {
      "field_name": "option1"
    }
  2. 数据格式 2:选中的选项标题直接作为表单项的值

    {
      "field_name": "选项一"
    }
  3. 数据格式 3:多个选中的选项值数组作为表单项的值

    {
      "field_name": ["option1", "option2"]
    }
  4. 数据格式 4:多个选中的选项标题数组作为表单项的值

    {
      "field_name": ["选项一", "选项二"]
    }
  5. 数据格式 5:带有 selectedId 字段的对象作为表单项值(单选按钮组采用此数据格式)

    {
      "field_name": {
        "selectedId": "option1"
      }
    }
  6. 数据格式 6:带有 selectedIds 字段的对象作为表单项值(复选按钮组采用此数据格式)

    {
      "field_name": {
        "selectedIds": ["option1", "option2"]
      }
    }

级联的选项关联规则

例如 表单项A 控制 表单项B表单项C表单项B 控制 表单项D表单项C 控制 表单项E表单项F。如果 表单项A 是不可见的,那么以下表单项均不可见:

  • 表单项 B
  • 表单项 C
  • 表单项 D
  • 表单项 E
  • 表单项 F

非关联的表单项

此权限计算不会处理非关联的表单项,即使是带有关联选项表单项之后的表单项。

Readme

Keywords

none

Package Sidebar

Install

npm i @sinoform/helper-permission

Weekly Downloads

3

Version

1.18.11

License

MIT

Unpacked Size

191 kB

Total Files

150

Last publish

Collaborators

  • jackingliu
  • maitian0222
  • tianyanqiu
  • longniansheng