今日目标:
(1)完成选择商品分类
(2)完成品牌选择功能
(3)完成扩展属性录入
(4)完成规格选择功能
(5)完成SKU商品信息功能
(6)完成是否启用规格
目录
1、商品录入[2]
1.1 商品分类选择
1.2 品牌选择
1.3 扩展属性录入
1.4 规格选择
1.5 SKU商品信息(重点理解逻辑)
(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)将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)改造goodsController.js的监控typeTemplateId的方法
(2)页面绑定变量
(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 findSpecList(Long id) {
return typeTemplateService.findSpecList(id);
}
(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)前端:编写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 mapList = JSON.parseArray(tbGoodsDesc.getItemImages(), Map.class);
if (mapList.size() > 0) {
item.setImage(String.valueOf(mapList.get(0).get("url")));
}
}
/**
* 构造SKU商品信息的标题
*
* @param tbGoods 当前保存的商品
* @param item SKU商品对象
* @return java.lang.StringBuilder
*/
private StringBuilder builderTitle(TbGoods tbGoods, TbItem item) {
// 使用tbGoods和规格选项构造SKU名称
StringBuilder stringBuilder = new StringBuilder(tbGoods.getGoodsName());
Map spec = JSON.parseObject(item.getSpec());
for (String key : spec.keySet()) {
stringBuilder.append(spec.get(key));
}
return stringBuilder;
}
注意:其中保存SKU商品信息列表时,逻辑较多,所以我对代码进行了提取到单独的方法,若是后期逻辑有变动,修改起来更加的方便。