品优购项目记录: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指令加载数据

品优购项目记录:day06_第1张图片

 

(5)为模板ID绑定变量

品优购项目记录:day06_第2张图片

 

(6)效果

品优购项目记录:day06_第3张图片

 

 

 

 

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)品牌下拉框绑定变量

品优购项目记录:day06_第4张图片

 

(5)效果:

品优购项目记录:day06_第5张图片

 

 

1.3 扩展属性录入

(1)改造goodsController.js的监控typeTemplateId的方法

品优购项目记录:day06_第6张图片

 

(2)页面绑定变量

品优购项目记录:day06_第7张图片

 

 

 

1.4 规格选择

(1)后端:服务层接口,TypeTemplateService(sellergoods-interface)

	/**
	 * 获取规格列表
	 *
	 * @param id 模板id
	 * @return java.util.List
	 */
	List findSpecList(Long id);

 

(2)后端:服务层实现,TypeTemplateServiceImpl(sellergoods-service)

    @Override
    public List findSpecList(Long id) {
        // 根据模板id查询模板
        TbTypeTemplate typeTemplate = typeTemplateMapper.selectByPrimaryKey(id);
        // 将SpecIds转换为集合
        List list = JSON.parseArray(typeTemplate.getSpecIds(), Map.class);
        // 遍历集合
        for (Map m : list) {
            // 查询对应ID的规格选项列表
            TbSpecificationOptionExample example = new TbSpecificationOptionExample();
            example.createCriteria().andSpecIdEqualTo(new Long(String.valueOf(m.get("id"))));
            List options = specificationOptionMapper.selectByExample(example);

            // 将options 放入map中
            m.put("options", options);
        }

        return 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

品优购项目记录:day06_第8张图片

 

(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)前端:页面绑定变量,展示规格列表

品优购项目记录:day06_第9张图片

 

 

 

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)前端:绑定变量

品优购项目记录:day06_第10张图片

 

(4)效果:

品优购项目记录:day06_第11张图片

 

(5)是否启用规格

品优购项目记录:day06_第12张图片

 

(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商品信息列表时,逻辑较多,所以我对代码进行了提取到单独的方法,若是后期逻辑有变动,修改起来更加的方便。

 

 

 

 

 

你可能感兴趣的:(个人成长,技术点,品优购)