Skip to content

关于Enums

和服务器有关的状态和类别等常数,如工单状态,工单类别等,都已经在后端定义好,并且自动生成了modelEnums.ts文件。所以前端不用重新定义,而是直接使用enums。

显示方法

Enum的显示包括以下几种

1. Select 下拉框

根据状态值显示enum的选项,通常如果是hidden的不显示。可能显示“All”选项。

组件:

tsx
<KBEnumSelect 
  enums={RoleLevelEnumObjects},
  modelName='roleLevel'
  />

2. Tab

根据状态值显示enum的选项,通常如果是hidden的不显示。可能显示“All”选项。

组件:

tsx
<KBEnumTab 
  enums={RoleLevelEnumObjects},
  modelName='roleLevel'
  />

3. Segmented

根据状态值显示enum的选项,通常如果是hidden的不显示。可能显示“All”选项。

组件:

tsx
<KBEnumSegmented 
  enums={RoleLevelEnumObjects},
  modelName='roleLevel'
  />

4. Tag

在列表页面或详情页面中根据enum的值显示标签

组件:

tsx
<KBEnumTag 
  enums={RoleLevelEnumObjects},
  modelName='roleLevel'
  value='SPACE'
  />

ModelEnum

Enums的定义包括以下内容,

ts
interface EnumValueOption {
  /**
   * @description  显示的顺序,由小到大排列
   */

  position?: number

  /**
   * @description  是否在界面上显示
   */

  hiddenSelect?: boolean

  /**
   * @description  如果需要显示icon(例如Tab,MenuItem),返回icon name
   */

  icon?: string

  /**
   * @description  如果需要显示颜色(例如Tag),返回颜色值
   */

  color?: string
}
export interface ModelEnumObjects {
  [key: string]: EnumValueOption
}

例子:

ts
export const CustomFieldOwnerTypeEnumObjects: ModelEnumObjects = {
  UserType: {
    position: 0,
  },
  ResourceType: {
    position: 1,
  },
  VisitorType: {
    position: 2,
  },
}

同时对该Enum也定义了一个数组类型。数组类型通常用于

ts
export const CustomFieldOwnerTypeEnum = [
  'UserType',
  'ResourceType',
  'VisitorType',
]