前端下拉框选项内容动态获取在后端 constant 中定义好的 常量类型

项目场景：

下拉框动态获取在后端 constant 中定义好的 常量类型

问题描述

常量的定义当从0一直排序，当前的接口获取到的动态列表正确，但是当特殊情况前几种类型不显示，即不是从 0 开始，只显示用户想要显示的选项，会出现空值的现象

java 接口（可以有两种方式）
方式一：

// List faultTypeMaps = Arrays.asList(“无法启动”, “中断扫描”, “间接性故障”,“其他”); //0无法启动 1中断扫描 2间接性故障 3其他
List faultTypeMaps = Arrays.asList(“无法启动”, “中断扫描”, “间接性故障”,“其他”,“服务合同”, “保外维修”, “单次保养”,“销售让步”); //4服务合同 5保外维修 6单次保养 7销售让步：保外不收费维修
List faultRankMaps = Arrays.asList(“一般”, “严重”, “紧急”,“技术改造”);
List statusMaps = Arrays.asList(“待派工”, “已派工”, “接单”, “维修中”, “完成”);//0 1 2 3 4
List serviceTypeMaps = Arrays.asList(“服务合同”, “单次维修”, “保养”, “优化服务”);//0 1 2 3

@RequestMapping(“/opt“)
public R opt(@RequestBody Map<String, Object> params){

    String type = params.get("type").toString();
    List<String> list = new ArrayList<>();
    if(type.equals("faultType")){
        list = faultTypeMaps;
    }else if(type.equals("faultRank")){
        list = faultRankMaps;
    }else if(type.equals("status")){
        list = statusMaps;
    }else if(type.equals("serviceType")){
        list = serviceTypeMaps;
    }

    List<Map<String, Object>> listMaps = new ArrayList<>();

    for(int i = 0; i <list.size();i++) {
        Map<String, Object> map = new HashMap<>();
        map.put("key", list.get(i));
        map.put("value", i);
        listMaps.add(map);
    }

    return R.ok().putData(listMaps);
}

方式二：
（不使用最顶端的  list）
  @RequestMapping("/opt")
    public R opt(@RequestBody Map<String, Object> params){

        String type = params.get("type").toString();
        Map<Integer,String> map = new HashMap<>();
        if(type.equals("faultType")){
            map = RepairConstant.FAULT_TYPE;
        }else if(type.equals("faultRank")){
            map = RepairConstant.FAULT_RANK;
        }else if(type.equals("status")){
            map = RepairConstant.STATUS;
        }

        List<Map<String, Object>> listMaps = new ArrayList<>();
        for(int i = 0; i <list.size();i++) {
           Map<String, Object> map = new HashMap<>();
           map.put("key", list.get(i));
           map.put("value", i);
           listMaps.add(map);
       }
        return R.ok().putData(listMaps);
    }

定义常量：
public class RepairConstant {

/** 维修状态 */
public static final Map<Integer,String> STATUS = new HashMap<>();
/**一般,严重,紧急,技术改造*/
public static final Map<Integer,String> FAULT_RANK = new HashMap<>();
/**无法启动,屏幕不亮,外光破损,其他*/
public static final Map<Integer,String> FAULT_TYPE = new HashMap<>();
//维修类型
public static final Map<Integer,String> REPAIR_TYPE = new HashMap<>();
//维修类型
public static final Map<Integer,String> SERVICE_TYPE = new HashMap<>();
static {
    STATUS.put(0, "待派工");
    STATUS.put(1, "已派工");
    STATUS.put(2, "接单");
    STATUS.put(3, "维修中");
    STATUS.put(4, "完成");
    
    FAULT_RANK.put(0, "一般");
    FAULT_RANK.put(1, "严重");
    FAULT_RANK.put(2, "紧急");
    FAULT_RANK.put(3, "技术改造");

// FAULT_TYPE.put(0, “无法启动”);
// FAULT_TYPE.put(1, “屏幕不亮”);
// FAULT_TYPE.put(2, “外光破损”);
// FAULT_TYPE.put(3, “其他”);

// FAULT_TYPE.put(0, “无法启动”);
// FAULT_TYPE.put(1, “中断扫描”);
// FAULT_TYPE.put(2, “间接性故障”);
// FAULT_TYPE.put(3, “其他”);
FAULT_TYPE.put(4, “服务合同”);
FAULT_TYPE.put(5, “保外维修”);
FAULT_TYPE.put(6, “单次保养”);
FAULT_TYPE.put(7, “销售让步”); //服务合同 保外维修 单次保养 销售让步修

    REPAIR_TYPE.put(0, "内修");
    REPAIR_TYPE.put(1, "外修");
    REPAIR_TYPE.put(2, "保修");

// SERVICE_TYPE.put(0, “服务合同”); // 0 服务合同：已签订维保合同
// SERVICE_TYPE.put(1, “单次维修”); // 1 单次维修：保外另收费维修
// SERVICE_TYPE.put(2, “保养”); // 2 保养：保外另收费保养
// SERVICE_TYPE.put(3, “优化服务”); // 3 优化服务：保外不收费维修”
}
}

前端

  <el-form-item prop="faultTypeName" label="报修类型">
                    <im-selector placeholder=""
                      v-model="dataForm.faultType"
                      :mapModel.sync="dataForm"
                      :dataParam="faultTypeParam"
                      mapKeyVal="faultRankName:faufaultTypeltRank"
                      dataType='static'
                      cusUrl="/repair/opt" >
                  </im-selector>
       </el-form-item>

   faultRankParam:{type:'faultRank', query:''},
     faultTypeParam:{type:'faultType', query:''},

使用上述方法都出现空值的错误

原因分析：

提示：这里填写问题的分析：

例如：Handler 发送消息有两种方式，分别是 Handler.obtainMessage()和 Handler.sendMessage()，其中 obtainMessage 方式当数据量过大时，由于 MessageQuene 大小也有限，所以当 message 处理不及时时，会造成先传的数据被覆盖，进而导致数据丢失。

出现使用问题：

获取到的数据都为空值：

解决方案：

提示：这里填写该问题的具体解决方案：

后端接口需重新进行修改：

 @RequestMapping("/opt")
    public R opt(@RequestBody Map<String, Object> params){

        String type = params.get("type").toString();
//        List<String> list = new ArrayList<>();
        Map<Integer,String> map = new HashMap<>();
        if(type.equals("faultType")){
            map = RepairConstant.FAULT_TYPE;
        }else if(type.equals("faultRank")){
            map = RepairConstant.FAULT_RANK;
        }else if(type.equals("status")){
            map = RepairConstant.STATUS;
        }

        List<Map<String, Object>> listMaps = new ArrayList<>();

//        for(int key: map.keySet()) {
//            Map<String, Object> item = new HashMap<>();
//            item.put("value", key);
//            item.put("key", map.get(key));
//            listMaps.add(item);
//        }

        for(int i = 0; i <map.size();i++) {

            Map<String, Object> item = new HashMap<>();
            item.put("key", item.get(i));
            item.put("value", i);
            listMaps.add(item);
        }


        return R.ok().putData(listMaps);
    }

获取都的数据为正确数据列表：

获取到数据列表：

当然，查询时的查询组件也可以 使用 el-select ，即：

 <el-form-item prop="faultType" label="报修类型">
                        <el-select v-model="dataForm.faultType" clearable placeholder="请选择">
                            <!--          <el-option label="无法启动" value="0"></el-option>
                            <el-option label="中断扫描" value="1"></el-option>
                            <el-option label="间接性故障" value="2"></el-option>  -->
                            <el-option label="服务合同" value="4"></el-option>
                            <el-option label="保外维修" value="5"></el-option>
                            <el-option label="单次保养" value="6"></el-option>
                            <el-option label="销售让步" value="7"></el-option>
                             <el-option label="其他" value="3"></el-option>  
                        </el-select>
    </el-form-item>

此方法具有局限性，需要在前端把所需的选项写成固定的值。

还有一种就是使用过 el-cascader 然后调用方法进行获取list

例如：

  <el-form-item prop="deptId" label="科室">
            <el-cascader 
              clearable
              :options="deptList"
              :props="deptOptionProps"
              v-model="dataForm.deptId"
              placeholder="请选择"
              @focus="getDeptList"
              filterable
              >
              </el-cascader>
          </el-form-item>

**方法：**

 //获取部门列表
    getDeptList (id) {
      if(id > 0){
        this.$axios.post('/sys/dept/dept_select',{"parentId":id}).then(res => {
            this.deptList = res
        }).catch(() => {})
      }
      return;
    },

如果觉得上述几种方法都不合适的话，我们也可以自己写一个组件。
我们平时用到的都是开源的组件，可直接使用，但有时候不一定适合我们的实际场景，例如：我们平时开发的项目此目录下的都是可以直接使用的组件。

##总结：

实现一个功能有时会有很多种方法，在此记录一下自己遇到的问题及解决办法。

代码007普通

打赏 收藏 海报 链接