vue等前端项目枚举值统一维护管理

由于多页面有时需要共同的表单枚举选择，页面以及table需要显示枚举值label以及有时需要根据枚举值判断，故个人使用如下枚举方式进行统一管理。

在common或者个人模块下创建单独枚举js,如enums.js。然后导入@/common/Enum.js并添加一个字面量对象。

// 落户任务状态
settleTaskStatusEnum: new Enum().add('all', '全部', null).add('settle', '待落户', 0).add('settled', '已落户', 1).add('cancel', '已取消', 2)

如需要表单选择可如下使用：

<el-select style="width: 99%" v-model="query.taskStatus" clearable placeholder="请选择">
   <el-option v-for="item in enums.settleTaskStatusEnum" :key="item.value" :value="item.value" :label="item.label">
   </el-option>
</el-select>

效果如：

如需页面以及table显示枚举lable可如下使用：

//可以避免为每个枚举值进行判断后，再取其label，后端返回taskStaus:1
<el-table-column prop="taskStatus" label="任务状态">
   <template slot-scope="scope">
      {{enums.settleTaskStatusEnum.getLabelByValue(scope.row.taskStatus)}}
   </template>
</el-table-column>

效果如：

如需根据枚举值判断可如下使用：

// 只能对【待落户】的数据点击，可以防止硬编码
if (item.taskStatus === enums.settleTaskStatusEnum.settle.value) {
   this.settleBtnDisabled = false
}

以上建议以及代码如有需要优化或者不合理的地方，欢迎大家修正！

//以下为具体Enum类

/**
 * 枚举类
 * @author meilin.huang
 */
export class Enum {
  /**
   * 添加枚举字段
   * field: 枚举字段
   * label: 界面显示
   * value: 枚举值
   */
  add (field, label, value) {
    this[field] = {label, value}
    return this
  }

  /**
   * 根据枚举value获取其label
   */
  getLabelByValue (value) {
    // 字段不存在返回‘’
    if (value === undefined || value === null) {
      return ''
    }
    for (let i in this) {
      let e = this[i]
      if (e && e.value === value) {
        return e.label
      }
    }

    return ''
  }
}

具体更多使用细节，可以关注本人的前后端分离小项目蛤
地址：https://gitee.com/objs/mayfly