品优购项目记录：day06
今日目标：
（1）完成选择商品分类
（2）完成品牌选择功能
（3）完成扩展属性录入
（4）完成规格选择功能
（5）完成SKU商品信息功能
（6）完成是否启用规格
目录
1、商品录入[2]
1.1 商品分类选择
1.2 品牌选择
1.3 扩展属性录入
1.4 规格选择
1.5 SKU商品信息（重点理解逻辑）
1、商品录入[2]
1.1 商品分类选择
（1）复制 ItemCat相关控制层类，itemCatService.js 到 shop-web中
（2）在goodsController.js 中引入 itemCatService，并在页面引入itemCatService.js文件
（3）编写goodsController.js，新增方法
// 展示一级下拉列表
$scope.selectItemCat1List = function () {
itemCatService.findByParentId(0).success(
function (rtn) {
$scope.itemCat1List = rtn;
}
);
}
// 关联展示二级下拉列表
$scope.$watch('entity.goods.category1Id',function (newValue,oldValue) {
// alert(newValue);
itemCatService.findByParentId(newValue).success(
function (rtn) {
$scope.itemCat2List = rtn;
}
);
});
// 关联展示三级下拉列表
$scope.$watch('entity.goods.category2Id',function (newValue,oldValue) {
// alert(newValue);
itemCatService.findByParentId(newValue).success(
function (rtn) {
$scope.itemCat3List = rtn;
}
);
});
// 关联展示模板id
$scope.$watch('entity.goods.category3Id',function (newValue,oldValue) {
// alert(newValue);
itemCatService.findOne(newValue).success(
function (rtn) {
$scope.entity.goods.typeTemplateId = rtn.typeId;
}
);
});
（4）为下拉框绑定变量，使用ng-options指令加载数据
（5）为模板ID绑定变量
（6）效果
1.2 品牌选择
（1）将typeTemplate控制层，以及typeTemplateService.js复制到shop-web下
（2）在goodsController.js 中引入 typeTemplateService，并在页面引入typeTemplateService.js文件
（3）编写goodsController.js，新增方法
// 关联加载品牌下拉列表
$scope.$watch('entity.goods.typeTemplateId',function (newValue,oldValue) {
// alert(newValue);
typeTemplateService.findOne(newValue).success(
function (rtn) {
$scope.typeTemplate = rtn;
// 将字符串转换为json对象
$scope.typeTemplate.brandIds = JSON.parse($scope.typeTemplate.brandIds);
}
);
});
（4）品牌下拉框绑定变量
（5）效果：
1.3 扩展属性录入
（1）改造goodsController.js的监控typeTemplateId的方法
（2）页面绑定变量
1.4 规格选择
（1）后端：服务层接口，TypeTemplateService（sellergoods-interface）
/**
* 获取规格列表
*
* @param id 模板id
* @return java.util.List
*/
List
（2）后端：服务层实现，TypeTemplateServiceImpl（sellergoods-service）
@Override
public List
（3）后端：控制层，TypeTemplateController（shop-web）
@RequestMapping("/findSpecList")
public List
（4）前端：编写typeTemplateService.js，新增方法
this.findSpecList = function (id) {
return $http.get('../typeTemplate/findSpecList.do?id=' + id);
}
（5）前端：修改goodsController.js
（6）前端：编写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;
}
（7）前端：编写goodsController.js
// 更新specificationItems集合
$scope.updateSpecAttribute = function ($event, name, value) {
var object = $scope.searchObjectByKey($scope.entity.goodsDesc.specificationItems, 'attributeName', name);
// 判断是否存在该key的值
if (object == null) {//不存在
// 新增
$scope.entity.goodsDesc.specificationItems.push({"attributeName": name, "attributeValue": [value]})
} else {// 存在
if ($event.target.checked) {//勾选
// 追加
object.attributeValue.push(value);
} else {// 取消勾选
if(object.attributeValue.length > 1) {
object.attributeValue.splice(object.attributeValue.indexOf(value),1);
} else {
var index = $scope.entity.goodsDesc.specificationItems.indexOf(object);
$scope.entity.goodsDesc.specificationItems.splice(index,1);
}
}
}
}注意初始化specificationItems：
（8）前端：页面绑定变量，展示规格列表
1.5 SKU商品信息（重点理解逻辑）
（1）前端：编写goodsController.js
// 构建SKU商品列表
$scope.createItemList = function () {
// 初始化SKU商品列表
$scope.entity.itemList = [{spec: {}, price: 0, num: 9999, status: '0', isDefault: '0'}];
var specificationItems = $scope.entity.goodsDesc.specificationItems;
for (var i = 0; i < specificationItems.length; i++) {
// 用新生成的列表，覆盖久的列表
$scope.entity.itemList = addColumn($scope.entity.itemList,specificationItems[i].attributeName,specificationItems[i].attributeValue);
}
}
/**
* 生成SKU列表的方法
*
* @param list 原集合
* @param columnName 新生成列的列名
* @param columnValues 新生成列的值列表
* @return SKU列表
*/
addColumn = function (list, columnName, columnValues) {
var SKUList = [];
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));
// 将值，追加到新增行
newRow.spec[columnName] = columnValues[j];
// 将新的行对象，添加到要SKU列表中
SKUList.push(newRow);
}
}
return SKUList;
}
（2）前端：复选框绑定单击事件
（3）前端：绑定变量
（4）效果：
（5）是否启用规格
（6）后端：服务层实现，修改add方法
/**
* 增加
*/
@Override
public void add(Goods goods) {
/***************************
* 保存商品基本信息到goods表 *
**************************/
// 补全商品基本信息
TbGoods tbGoods = goods.getGoods();
tbGoods.setAuditStatus(TbGoods.STATUS_CREATE);
// 保存商品基本信息
goodsMapper.insert(tbGoods);
/*******************************
* 保存商品扩展信息到goodsdesc表 *
*******************************/
// 补全商品扩展信息数据
TbGoodsDesc tbGoodsDesc = goods.getGoodsDesc();
tbGoodsDesc.setGoodsId(tbGoods.getId());
// 保存商品扩展信息
goodsDescMapper.insert(tbGoodsDesc);
/*******************************
* 保存SKU商品信息到 item表 *
*******************************/
saveItemList(goods, tbGoods, tbGoodsDesc);
}
/**
* 保存SKU商品信息
*
* @param goods 组合商品对象
* @param tbGoods 商品基本信息对象
* @param tbGoodsDesc 商品扩展信息对象
*/
private void saveItemList(Goods goods, TbGoods tbGoods, TbGoodsDesc tbGoodsDesc) {
// 判断是否启用规格
if (tbGoods.getIsEnableSpec().equals(TbGoods.ISENABLESPEC_YES)) {// 启用规格
// 遍历itemList，补全数据并保存
for (TbItem item : goods.getItemList()) {
// 设置标题
item.setTitle(builderTitle(tbGoods, item).toString());
// 补全其他数据
setValues(tbGoods, tbGoodsDesc, item);
// 保存SKU商品信息
itemMapper.insert(item);
}
} else {// 未启用规格
TbItem item = new TbItem();
// 设置标题，直接为商品名称
item.setTitle(tbGoods.getGoodsName());
// 补全其他数据
setValues(tbGoods, tbGoodsDesc, item);
// 保存SKU商品信息
itemMapper.insert(item);
}
}
/**
* 补全item数据
*
* @param tbGoods 当前保存的商品
* @param tbGoodsDesc 商品的扩展信息
* @param item SKU商品对象
*/
private void setValues(TbGoods tbGoods, TbGoodsDesc tbGoodsDesc, TbItem item) {
// 设置商品分类ID
item.setCategoryid(tbGoods.getCategory3Id());
// 设置创建日期和更新日期
item.setCreateTime(new Date());
item.setUpdateTime(new Date());
// 设置商品ID
item.setGoodsId(tbGoods.getId());
// 设置商家ID
item.setSeller(tbGoods.getSellerId());
// 设置商品分类名称
TbItemCat itemCat = itemCatMapper.selectByPrimaryKey(tbGoods.getCategory3Id());
item.setCategory(itemCat.getName());
// 设置品牌名称
TbBrand brand = brandMapper.selectByPrimaryKey(tbGoods.getBrandId());
item.setBrand(brand.getName());
// 设置商家名称(店铺名)
TbSeller seller = sellerMapper.selectByPrimaryKey(tbGoods.getSellerId());
item.setSeller(seller.getNickName());
// 设置图片
List注意：其中保存SKU商品信息列表时，逻辑较多，所以我对代码进行了提取到单独的方法，若是后期逻辑有变动，修改起来更加的方便。