@fesjs/plugin-enums

介绍

日常业务开发中，有很多场景会使用到枚举值，比如select-options、table-column。

该插件提供统一的枚举存取及丰富的函数来处理枚举。

启用方式

在 package.json 中引入依赖：

{
    "dependencies": {
        "@fesjs/fes": "^2.0.0",
        "@fesjs/plugin-enums": "^2.0.0"
    }
}

1
2
3
4
5
6

配置

静态配置

在 .fes.js 中配置：

// 配置格式：[[key, value], ...]
export default {
    enums: {
        status: [['0', '无效的'], ['1', '有效的']]
    }
}

1
2
3
4
5
6

动态配置

在业务代码中

import { enums } from '@fesjs/fes';
// 动态添加
enums.push('status', [['0', '无效的'], ['1', '有效的']]
enums.get('status', '1') // 有效的

1
2
3
4

场景使用

动态添加的枚举项支持数组和对象
枚举项为对象时，可以指定keyName和valueName属性名
导出枚举值，可指定取值的路径
导出枚举可扩展属性

<template>
    <div>
        <!-- 遍历枚举status -->
        <div v-for="item in enumsGet('status')" :key="item.key">
            {{item.value}}：{{item.key}}
        </div>
        <!-- 遍历枚举扩展后的roles -->
        <div v-for="item in roles" :key="item.key">
            {{item.name}}：{{item.disabled}}
        </div>
        <!-- 获取枚举roles为2的英文名 -->
        <div>{{enumsGet('roles', '2', { dir: 'eName' })}}</div>
    </div>
</template>
<script>
import { enums } from '@fesjs/fes';

export default {
    setup() {
        // 动态添加枚举，枚举项是对象，并指定key的属性名为id
        enums.push('roles', [
            {
                id: '1',
                cName: '系统管理员',
                eName: 'System',
                perm: ['1', '2', '3']
            },
            {
                id: '2',
                cName: '业务管理员',
                eName: 'Business',
                perm: ['1', '2']
            },
            {
                id: '3',
                cName: '普通用户',
                eName: 'User',
                perm: ['1']
            }
        ], { keyName: 'id' });
        // 导出定制格式的roles，扩展枚举项新的属性name、disabled
        const roles = enums.get('roles', {
            extend: [
                {
                    key: 'name',
                    dir: 'cName' // 指定取值路径，取属性cName的值
                },
                {
                    key: 'disabled',
                    // 传入函数，获取结果值
                    transfer: item => item.value.perm.some(i => i >= 2)
                }
            ]
        });
        console.log(roles);
        // [{key: '1', name: '系统管理员', disabled: true, value: {...}}, ....]
        return {
            enumsGet: enums.get,
            roles
        };
    }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

API

get

get(name: string) 获取指定名字的枚举
get(name: string, key: string) 获取指定名字及键枚举默认值
get(name: string, opt: {extend: Array<Object>}) 获取指定名字的自定义格式枚举，查看extend配置
get(name: string, key: string, opt: {dir: string}) 获取指定名字及键枚举dir规则的值

get('status')
get('status', '1')
get('status', {
    extend: [
        {
            key: 'name',
            dir: 'value',
        },
        {
            key: 'disabled',
            transfer: item => item === '0'
        }
    ]
})
get('status', '1', {dir: 'value'})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

push

动态添加枚举，重复添加会覆盖

push(name: string, _enum: Array<Array>)
push(name: string, _enum: Array<Object>, opt?: Object)
- opt.keyName 指定key的取值属性，默认是key
- opt.valueName 指定value的取值属性

枚举项为数组，枚举项的[0]解析为key，枚举项的[1]解析为value

枚举项为对象时，根据opt配置keyName、valueName取枚举项属性值分别作为key和value，如果valueName未设置则value就是枚举项

remove

remove(name: string)

移除指定的枚举

concat

基于现有的枚举，连接上新的枚举后返回新的枚举

concat(name: string, _enum: Array<Array|Object>, opt?: Object))
- opt.keyName 指定key的取值属性，默认是key
- opt.valueName 指定value的取值属性
- opt.before 是否添加在现有的之前，默认是false
- opt.extend：返回的枚举extend配置

convert

将传入的枚举格式转换为{key, value}的形式

convert(name: string, _enum: Array<Array|Object>, opt?: Object))
- opt.keyName 指定key的取值属性，默认是key
- opt.valueName 指定value的取值属性

extend配置

扩展枚举项属性的配置

extend: Array<Object>
- key 指定扩展的属性名
- dir 指定该属性的取值路径
- transfer(item: {key: any, value: any}) 转换函数，参数未枚举项，返回就是该属性的值

提示

同时设置dir和transfer，transfer优先

get('status', {
    extend: [
        {
            key: 'name',
            dir: 'value',
        },
        {
            key: 'disabled',
            transfer: item => item.key === '0'
        }
    ]
})

1
2
3
4
5
6
7
8
9
10
11
12

dir规则

dir是指定枚举项value的取值方式，规则如下：

对象属性 A、A.B
数组 [0]、[0][1]
混合 A[0]、[0].A、A[0].B

// 假如枚举项value的结构如下
const user = {
    age: 18,
    name: 'aring',
    role: [
        {
            id: 1,
            name: '管理员'
        },
                    {
            id: 2,
            name: '业务操作员'
        }
    ]
}
// 那么规则解析是：
dir              value
'age'        =>  18
'role[0]'    =>  {id: 1, name: '管理员'}
'role[1].id' =>  2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

提示

枚举项value如果是基本类型，则规则不生效，value就是当前值

# @fesjs/plugin-enums

# 介绍

# 启用方式

# 配置

# 静态配置

# 动态配置

# 场景使用

# API

# get

# push

# remove

# concat

# convert

# extend配置

# dir规则