品优购电商系统开发 第 6 章 三

4.商品录入【规格选择】
4.1 需求分析
显示规格及选项列表（复选框）如下图，并保存用户选择的结果

4.2 代码实现
4.2.1 显示规格选项列表
由于我们的模板中只记录了规格名称，而我们除了显示规格名称还是显示规格下的规格选项，所以我们需要在后端扩充方法。
（1）在 pinyougou-sellergoods-interface 的 TypeTemplateService.java 新增方法定义

/**
* 返回规格列表
* @return
*/
public List<Map> findSpecList(Long id);

（2）在 pinyougou-sellergoods-service 的 TypeTemplateServiceImpl.java 新增方法

@Autowired
private TbSpecificationOptionMapper specificationOptionMapper;
@Override
public List<Map> findSpecList(Long id) {
//查询模板
TbTypeTemplate typeTemplate = typeTemplateMapper.selectByPrimaryKey(id);
List<Map> list = JSON.parseArray(typeTemplate.getSpecIds(), Map.class) ;
for(Map map:list){
//查询规格选项列表
TbSpecificationOptionExample example=new TbSpecificationOptionExample();
com.pinyougou.pojo.TbSpecificationOptionExample.Criteria criteria =
example.createCriteria();
criteria.andSpecIdEqualTo( new Long( (Integer)map.get("id") ) );
List<TbSpecificationOption> options =
specificationOptionMapper.selectByExample(example);
map.put("options", options);
}
return list;
}

（3）在 pinyougou-shop-web 的 TypeTemplateController.java 新增方法

@RequestMapping("/findSpecList")
public List<Map> findSpecList(Long id){
return typeTemplateService.findSpecList(id);
}

this.findSpecList=function(id){
return $http.get('../typeTemplate/findSpecList.do?id='+id);
}

（5）修改 pinyougou-shop-web 的 goodsController.js

//模板 ID 选择后 更新模板对象
$scope.$watch('entity.goods.typeTemplateId', function(newValue, oldValue) {
typeTemplateService.findOne(newValue).success(
function(response){
$scope.typeTemplate=response;//获取类型模板
$scope.typeTemplate.brandIds=
JSON.parse( $scope.typeTemplate.brandIds);//品牌列表
$scope.entity.goodsDesc.customAttributeItems=JSON.parse( $scope.typeTemplate.custom
AttributeItems);//扩展属性
}
);
//查询规格列表
typeTemplateService.findSpecList(newValue).success(
function(response){
$scope.specList=response;
}
);
});

（6）修改 goods_edit.html 页面

<div ng-repeat="pojo in specList">
<div class="col-md-2 title">{{pojo.text}}</div>
<div class="col-md-10 data">
<span ng-repeat="option in pojo.options">
<input type="checkbox" >{{option.optionName}}
</span>
</div>
</div>