商品录入【规格选择】
4.1需求分析
显示规格及选项列表（复选框）如下图，并保存用户选择的结果
4.2代码实现
4.2.1 显示规格选项列表
由于我们的模板中只记录了规格名称，而我们除了显示规格名称还是显示规格下的规格选项，所以我们需要在后端扩充方法。
（1）在pinyougou-sellergoods-interface的TypeTemplateService.java新增方法定义
/**
* 返回规格列表
* @return
*/
public List<Map> findSpecList(Long id);
在pinyougou-sellergoods-service的TypeTemplateServiceImpl.java新增方法
@Override
public List<Map> findSpecList(Long id) {
//查询模板
TbTypeTemplate typeTemplate = typeTemplateMapper.selectByPrimaryKey (id);
//获取到规格字段中的json数据并转换成map的list集合
List<Map> mapList = JSON.parseArray (typeTemplate.getSpecIds (), Map.class);
for (Map map :
mapList) {
TbSpecificationOptionExample example=new TbSpecificationOptionExample ();
TbSpecificationOptionExample.Criteria criteria = example.createCriteria ();
//获取到map中的id值并转换成long型作为条件
criteria.andSpecIdEqualTo(new Long ((Integer)map.get ("id")));
List<TbSpecificationOption> tbSpecificationOptions = specificationOptionMapper.selectByExample (example);
map.put ("options",tbSpecificationOptions);
}
return mapList;
}
在pinyougou-shop-web的TypeTemplateController.java新增方法
|
|
测试后端代码：
-
前端代码：修改pinyougou-shop-web的typeTemplateService.js
//查询规格列表
this.findSpecList=function (id) {
return $http.get('../typeTemplate/findSpecList.do?id='+id)
}
修改pinyougou-shop-web的goodsController.js
在红框中添加
//查询规格列表
typeTemplateService.findSpecList(newValue).success(
function(response){
$scope.specList=response;
}
);
-
修改goods_edit.html页面
|
|
保存选中规格选项
我们需要将用户选中的选项保存在tb_goods_desc表的specification_items字段中，定义json格式如下：
|
|
在baseController.js增加代码
//在list集合中根据某key的值查询对象
$scope.searchObjectByKey=function (list, key, keyValue) {
for (var i=0;i<list.length;i++){
if (list[i][key]==keyValue){
return list[i];
}
}
return null;
}
在goodsController.js增加代码
在goodsController.js增加代码
|
|
//勾选时生成的规格详细
$scope.updateSpecAttribute=function ($event,name,value) {
var object=$scope.searchObjectByKey($scope.entity.tbGoodsDesc.specificationItems,'attributeName',name);
if(object!=null){
if ($event.target.checked){
object.attributeValue.push(value);
}else {
object.attributeValue.splice(object.attributeValue.indexOf(value),1);//移除选项
//如果勾选的都取消了就删除这个集合
if (object.attributeValue.length==0){
$scope.entity.tbGoodsDesc.specificationItems.splice( $scope.entity.tbGoodsDesc.specificationItems.indexOf(object),1);
}
}
}else {
$scope.entity.tbGoodsDesc.specificationItems.push({"attributeName":name,"attributeValue":[value]});
}
}
（3）在goods_edit.html调用方法
|
|
为了方便测试，我们可以在页面上某个区域临时添加表达式，以便观测测试结果
|
|
5.商品录入【SKU商品信息】
5.1需求分析
基于上一步我们完成的规格选择，根据选择的规格录入商品的SKU信息，当用户选择相应的规格，下面的SKU列表就会自动生成，如下图：
实现思路：实现思路：
-
我们先定义一个初始的不带规格名称的集合，只有一条记录。
-
循环用户选择的规格，根据规格名称和已选择的规格选项对原集合进行扩充，添加规格名称和值，新增的记录数与选择的规格选项个数相同
生成的顺序如下图：
5.2前端代码
5.2.1 生成SKU列表(深克隆)
（1）在goodsController.js实现创建sku列表的方法
//创建SKU列表
$scope.createItemList=function () {
//用于深克隆初始化
$scope.entity.itemList=[{spec:{},price:0,num:99999,status:'0',isDefault:'0'}];//初始列表对象
var items= $scope.entity.tbGoodsDesc.specificationItems;
for (var i=0;i<items.length;i++){
$scope.entity.itemList=addColumn( $scope.entity.itemList,items[i].attributeName,items[i].attributeValue);
}
}
//添加列值深克隆
addColumn=function (list,columnName,columnValues) {
var newList=[];
for (var i=0;i<list.length;i++){
var oldRow=list[i];
for (var j=0;j<columnValues.length;j++){
var newRow= JSON.parse(JSON.stringify(oldRow));//stringify复制
newRow.spec[columnName]=columnValues[j];
newList.push(newRow);
}
}
return newList;
}
（2）在更新规格属性后调用生成SKU列表的方法
|
|
（3）在页面上添加表达式，进行测试
|
|
显示效果如下：
5.2.2 显示SKU列表
goods_edit.html页面上绑定SKU列表
|
|
删除掉原来的测试用的表达式
5.3后端代码
（1）在GoodsServiceImpl添加属性
|
|
（2）修改GoodsServiceImpl的add方法，增加代码，实现对SKU商品信息的保存
/**
* 增加
*/
@Override
public void add(Goods goods) {
goods.getTbGoods ().setAuditStatus ("0");//状态：未审核
goodsMapper.insert(goods.getTbGoods ());//插入商品的基本信息
goods.getTbGoodsDesc ().setGoodsId (goods.getTbGoods ().getId ());//将商品的基本表id给商品扩展表的设置goodsId
goodsDescMapper.insert (goods.getTbGoodsDesc ());//插入商品的扩展表信息
for (TbItem item :
goods.getItemList ()) {
//构建标题SPU名称+规格选项值
String title= goods.getTbGoods ().getGoodsName ();//SPU名称
Map<String,Object> map = JSON.parseObject (item.getSpec ());
for (String key :
map.keySet ()) {
title += " " + map.get (key);
}
item.setTitle (title);
//商品分类
item.setCategoryid(goods.getTbGoods ().getCategory3Id ());//三级分类id
item.setCreateTime (new Date ());
item.setUpdateTime (new Date ());
item.setGoodsId (goods.getTbGoods ().getId ());//商品id
item.setSellerId (goods.getTbGoods ().getSellerId ());//商家id
//分类名称
TbItemCat itemCat = itemCatMapper.selectByPrimaryKey (goods.getTbGoods ().getCategory3Id ());
item.setCategory (itemCat.getName ());
//品牌名称
TbBrand brand = brandMapper.selectByPrimaryKey (goods.getTbGoods ().getBrandId ());
item.setBrand (brand.getName ());
//商家名称 店铺名称
TbSeller seller = sellerMapper.selectByPrimaryKey (goods.getTbGoods ().getSellerId ());
item.setSeller (seller.getNickName ());
//图片
List<Map> imageList = JSON.parseArray (goods.getTbGoodsDesc ().getItemImages (), Map.class);
if (imageList.size ()>0 ){
item.setImage (imageList.get (0).get("url").toString ());//存入地址图片
}
itemMapper.insert(item);
}
}
6.商品录入【是否启用规格】
6.1需求分析
在规格面板添加是否启用规格，当用户没有选择该项，将原来的规格面板和SKU列表隐藏，用户保存商品后只生成一个SKU.
6.2前端代码
goods_add.html添加复选框
|
|
用if指令控制规格面板与SKU列表的显示与隐藏
|
|
6.3后端代码
修改GoodsServiceImpl的add方法
|
|
/**
* 增加
*/
@Override
public void add(Goods goods) {
goods.getTbGoods ().setAuditStatus ("0");//状态：未审核
goodsMapper.insert(goods.getTbGoods ());//插入商品的基本信息
goods.getTbGoodsDesc ().setGoodsId (goods.getTbGoods ().getId ());//将商品的基本表id给商品扩展表的设置goodsId
goodsDescMapper.insert (goods.getTbGoodsDesc ());//插入商品的扩展表信息
if ("1".equals (goods.getTbGoods ().getIsEnableSpec ())){//启用规格
for (TbItem item :
goods.getItemList ()) {
//构建标题SPU名称+规格选项值
String title= goods.getTbGoods ().getGoodsName ();//SPU名称
Map<String,Object> map = JSON.parseObject (item.getSpec ());
for (String key :
map.keySet ()) {
title += " " + map.get (key);
}
item.setTitle (title);
setItemValue (item,goods);
itemMapper.insert(item);
}
}else{//没有启用规格
TbItem item=new TbItem ();//创建一个item
item.setTitle (goods.getTbGoods ().getGoodsName ());//设置标题为商品的名称
item.setPrice (goods.getTbGoods ().getPrice ());//设置价格
item.setNum (999999);//库存数量
item.setStatus ("1");//状态
item.setIsDefault ("1");//默认
item.setSpec ("{}");//规格
setItemValue (item,goods);
itemMapper.insert (item);
}
}
/**
* 通过方法设置item中的属性值
* @auther: jun
* @date: 2018/9/7 0007 11:12
* @param item 商品信息
* @param goods 商品信息组合信息
* @return: void
*/
private void setItemValue(TbItem item,Goods goods){
//商品分类
item.setCategoryid(goods.getTbGoods ().getCategory3Id ());//三级分类id
item.setCreateTime (new Date ());
item.setUpdateTime (new Date ());
item.setGoodsId (goods.getTbGoods ().getId ());//商品id
item.setSellerId (goods.getTbGoods ().getSellerId ());//商家id
//分类名称
TbItemCat itemCat = itemCatMapper.selectByPrimaryKey (goods.getTbGoods ().getCategory3Id ());
item.setCategory (itemCat.getName ());
//品牌名称
TbBrand brand = brandMapper.selectByPrimaryKey (goods.getTbGoods ().getBrandId ());
item.setBrand (brand.getName ());
//商家名称 店铺名称
TbSeller seller = sellerMapper.selectByPrimaryKey (goods.getTbGoods ().getSellerId ());
item.setSeller (seller.getNickName ());
//图片
List<Map> imageList = JSON.parseArray (goods.getTbGoodsDesc ().getItemImages (), Map.class);
if (imageList.size ()>0 ){
item.setImage (imageList.get (0).get("url").toString ());//存入地址图片
}
}