1.需求:点击某个设备组获取该设备组的所有的商品。
2.效果图:
3.实现:
(1)前端
<el-select v-model="listQuery.groupId" @change="selectGoodsByGroupId($event)" clearable placeholder="请选择设备组" filterable>
<el-option v-for="item in deviceGroups" :label="item.groupName" :key="item.id" :value="item.id"></el-option>
</el-select>
<el-select v-model="listQuery.goodsId" clearable placeholder="请选择商品" filterable>
<el-option v-for="item in goods" :label="item.goodsName" :key="item.id" :value="item.id"></el-option>
</el-select>
//进入列表时先获取所有的设备组
getAllDevice(){//获取所有的设备组
getAllDevice()
.then(response =>{
this.deviceGroups = response;
})
},
selectGoodsByGroupId(val){//根据设备组id获取相应的商品
//console.log(val);
if(val != null && val != '' && val != undefined){
selectGoodsByGroupId(val)
.then(response => {
//给goods数组赋值
this.goods = response;
})
}
},
(2)后端
1.controller层
/**
* 根据设备组Id进行获取商品Id进而查询对应的商品信息
* @param groupId
* @return
*/
@RequestMapping(value = "/selectGoodsByGroupId/{groupId}",method = RequestMethod.GET)
@ResponseBody
public List<GoodsVo> selectGoodsByGroupId(@PathVariable("groupId") int groupId){
return baseBiz.selectGoodsByGroupId(groupId);
}
2.biz层
/**
* 根据设备组Id进行获取商品Id进而查询对应的商品信息
* @param groupId
* @return
*/
public List<GoodsVo> selectGoodsByGroupId(int groupId){
return mapper.selectGoodsByGroupId(groupId);
}
3.mapper层
/**
* 根据设备组Id进行获取商品Id进而查询对应的商品信息
* @param groupId
* @return
*/
List<GoodsVo> selectGoodsByGroupId(@Param("groupId") int groupId);
4.mybatis.xml
<!-- 根据设备组Id进行获取商品Id进而查询对应的商品信息 -->
<select id="selectGoodsByGroupId" resultMap="BaseResultMap">
select id,goods_name from ue_tb_goods where id in (select goods_id from ue_tb_rs_dg_goods where group_id = #{groupId})
</select>