优雅地使用枚举

Posted by YorkWong on May 10, 2022

优雅地使用枚举

枚举方法文件enum.js

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
/**
 * 创建枚举定义函数
 * 枚举的className,最好全大写或者全小写
 * {enumName: [值,含义,样式]},如需增加需要更改枚举定义函数
 * value枚举值、key枚举名称、style枚举样式
 * params参数
 * @param {*} definition
 */
const createEnum = (definition) => {
	const keyToValueMap = {}; //根据key设置value
	const valueToLabelMap = {}; //根据value设置Key
	const keyToParamsMap = {}; //根据key获取所有的信息
	const allList = []; //所有key的值变成列表
	const valueToParamsMap = {}; //根据value设置Params

	for (const enumName of Object.keys(definition)) {
		const [value, label, style, params = {}] = definition[enumName];  //类似数组的解构赋值
		if (!params || typeof params !== "object") {
			// params = {};
		}
		if (value) {
			valueToLabelMap[value] = label;
			valueToParamsMap[value] = {
				label,
				style,
				...params
			}
		}
		delete params.label;
		delete params.value;
		delete params.style;
		if (enumName) {
			keyToValueMap[enumName] = value;
			keyToParamsMap[enumName] = {
				value,
				label,
				style,
				...params
			}
			allList.push(keyToParamsMap[enumName]); //列表
		}
	}
	return {
		...keyToParamsMap,
		// 获取值相关列表
		getAllList() {
			return allList;
		},
		// 根据状态Key获取名称
		getLabel(enumName) {
			return enumName && definition[enumName] && definition[enumName][1] || ""
		},
		// 根据状态的值获取名称
		getLabelFromValue(value) {
			return value && valueToLabelMap[value] || "";
		},
		// 根据状态的Key获取样式
		getStyleFromKey(enumName) {
			return enumName && keyToParamsMap[enumName] || {
				value: null,
				label: null,
				style: null
			}
		},
		// 根据value去获取所有参数状态
		getParamsFromValue(value) {
			return value && valueToParamsMap[value] || "";
		},
		// 根据value去获取所有参数状态
		getHtmlFromValue(value) {
			return value &&
				`<span style="${valueToParamsMap[value] && valueToParamsMap[value].style || ''}">${valueToLabelMap[value] || ""}</span>` ||
				"";
		}
	}
};

// 使用案例如下
const status = createEnum({
    AUDITING: [10, '审核中', 'color:red', {type: 1}],
    PASS: [20, '审核通过', 'color:blue'],
    init: [30]
});
console.log('status.getAllList()..........///',status.getAllList());
console.log(status, "status33333333333333");
console.log(status.getLabel("PASS"));
console.log(status.getLabelFromValue(10));
console.log(status.getStyleFromKey("PASS"));
console.log(status.getParamsFromValue(10));
console.log(status.getHtmlFromValue(30));

export {
	createEnum
}

枚举内容文件1(可以是多个枚举文件)

1
2
3
4
5
6
7
8
9
10
import { createEnum } from './enum.js';
//满送活动领取状态
const giftGetStatus = createEnum({
	wait:[1,"待领取"],
	received:[2,"已领取"],
	timeout:[3,"已过期"]
})
export {
	giftGetStatus
}

综合枚举文件

1
2
3
4
5
6
7
8
9
10
11
12
13
import * as typeEnum from "./types.js"
import * as statusEnum from "./status.js"

const indexEnum = {
	...typeEnum,
	...statusEnum
}
console.log('typeEnum...', typeEnum);
console.log('statusEnum...', statusEnum);

console.log('indexEnum...', indexEnum)

export default indexEnum

页面上如何使用

1
2
3
4
5
6
import indexEnum from '@/common/enum/index.js';
data(){
	return{
		indexEnum//template直接使用就可以了
	}
}