vue3枚举值统一管理维护

由于多页面有时需要共同的表单枚举选择，页面以及table需要显示枚举值label以及有时需要根据枚举值进行业务逻辑判断，如果使用硬编码写死每个枚举值的话，则不利于后续的维护。如下：

typescript 复制代码

// 根据特定枚举值进行业务逻辑判断
if (c.type == 1) {
  ...执行业务逻辑操作
}

// 编辑页或输入框的表单选择枚举值
<el-form-item prop="type" label="类型" required>
    <el-select v-model="form.type" placeholder="请选择资源类型">
        <el-option :key="1" :label="菜单" :value="1"> </el-option>
        <el-option :key="2" :label="资源" :value="2"> </el-option>
    </el-select>
</el-form-item>

// table页或详情页需要根据枚举值获取对应的描述label
switch(type) {
  case 1:
    return "菜单";
  case 2:
    return "资源
}

可以发现上诉的硬编码方式，如果后续需要新增枚举，或者改变枚举值的话则用到硬编码的地方都需要进行调整，改动起来还是很费劲的，故推荐使用如下方式进行重构，使用方式详见如下：

新建Enum.ts

在系统公共模块如common文件夹下新建一个Enum.ts文件，代码如下：

typescript 复制代码

export interface EnumValueTag {
    color?: string;
    type?: string;
}

/**
 * 枚举值类
 */
export class EnumValue {
    /**
     * 枚举值
     */
    value: any;

    /**
     * 枚举描述
     */
    label: string;

    /**
     * 展示的标签信息
     */
    tag: EnumValueTag;

    constructor(value: any, label: string) {
        this.value = value;
        this.label = label;
    }

    /**
    * tag相关的方法主要用于PageTable.vue公共分页组件对枚举值进行el-tag标签展示
    */
    setTagType(type: string = 'primary'): EnumValue {
        this.tag = { type };
        return this;
    }

    tagTypeInfo(): EnumValue {
        return this.setTagType('info');
    }

    tagTypeSuccess(): EnumValue {
        return this.setTagType('success');
    }

    tagTypeDanger(): EnumValue {
        return this.setTagType('danger');
    }

    tagTypeWarning(): EnumValue {
        return this.setTagType('warning');
    }

    setTagColor(color: string): EnumValue {
        this.tag = { color };
        return this;
    }

    public static of(value: any, label: string): EnumValue {
        return new EnumValue(value, label);
    }

    /**
     * 根据枚举值获取指定枚举值对象
     *
     * @param enumValues 所有枚举值
     * @param value 需要匹配的枚举值
     * @returns 枚举值对象
     */
    static getEnumByValue(enumValues: EnumValue[], value: any): EnumValue | null {
        for (let enumValue of enumValues) {
            if (enumValue.value == value) {
                return enumValue;
            }
        }
        return null;
    }

    /**
     * 根据枚举值获取枚举描述
     *
     * @param enums 枚举对象
     * @param value 枚举值
     * @returns 枚举描述
     */
    static getLabelByValue(enums: any, value: any) {
        const enumValues = Object.values(enums) as any;
        for (let enumValue of enumValues) {
            if (enumValue['value'] == value) {
                return enumValue['label'];
            }
        }
        return '';
    }
}

export default EnumValue;

创建业务枚举enum.ts

在各个业务模块（如：@/view/system/enum.ts）下新建一个业务专属的enum.ts，用于维护该模块所用到的所有枚举值。如下：

typescript 复制代码

import { EnumValue } from '@/common/Enum';

export const ResourceTypeEnum = {
    Menu: EnumValue.of(1, '菜单'),
    Permission: EnumValue.of(2, '权限'),
};

// tagTypeSuccess()主要用于表格展示时使用特定类型的tag展示，可见PageTable组件
export const AccountStatusEnum = {
    Enable: EnumValue.of(1, '正常').tagTypeSuccess(),
    Disable: EnumValue.of(-1, '禁用').tagTypeDanger(),
};

使用方式

接下来就可在需要的页面导入对应的枚举即可，常见使用常见如下：

编辑页以及搜索框等需要选择对应的枚举值，如下

vue 复制代码

import { ResourceTypeEnum } from '../enums';

<el-form-item class="w100" prop="type" label="类型" required>
    <el-select class="w100" v-model="form.type" placeholder="请选择资源类型">
        // 不需要手动写多个枚举值对应的value以及label
        <el-option v-for="item in ResourceTypeEnum" :key="item.value" :label="item.label" :value="item.value"> </el-option>
    </el-select>
</el-form-item>

根据枚举值显示对应的枚举描述，如图需要将枚举值 '1' 转为 '菜单'，如下

vue 复制代码

import { ResourceTypeEnum } from '../enums';
  
<el-descriptions-item label="类型">
    <el-tag size="small">{{ EnumValue.getLabelByValue(ResourceTypeEnum, infoDialog.data.type) }}</el-tag>
</el-descriptions-item>

根据指定枚举值进行特定业务逻辑处理，如下：

vue 复制代码

import { ResourceTypeEnum } from '../enums';

// 菜单类型，才展示该输入框
<el-col v-if="form.type === ResourceTypeEnum.Menu.value">
    <el-form-item class="w100">
        <el-input v-model.trim="form.meta.routeName" placeholder="请输入路由名称"></el-input>
    </el-form-item>
</el-col>

// js函数中对类型进行判断并进行相应逻辑处理（该种方式也可代码自动提示，方便快捷又友好）
const addResource = () => {
  if (c.type === ResourceTypeEnum.Permission.value) {
      ...执行xxx业务逻辑
  }
}

总结

通过如上方式对枚举进行包装改造后，对枚举的全部操作都可以避免使用硬编码的方式，使用起来更加方便快捷，后续维护起来也很方便，不需要到处改动。在使用过程中编辑器也会自动进行代码提示，方便快捷又友好。

更多代码详见：gitee.com/objs/mayfly...

一个web版 linux(终端 $终端回放$ 文件脚本进程计划任务)、数据库（mysql postgres）、redis(单机哨兵集群)、mongo统一管理操作平台