Appearance
关于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',
]