電商項目——商品表

需求分析：商家添加商品，如上圖樣式，如商家添加手機這個商品，我們先查詢到手機這個屬性的規格選項，及規格，當商家選擇一個規格和一個規格選項時，我們為其添加一行組成商品資料 SKU ，（規格和規格選項的關系就是，每個規格下面都對應下面所有的規格選項，一行商品資料就是一個商品）

實作步驟： 1.先通過模闆ID查詢規格，再通過規格ID查詢到規格選項，并在頁面顯示，成選擇框樣式。 1.通過$watch監控entity.goods.typeTemplateId模闆id的變化調用模闆的方法通過模闆id查詢規格，及規格選項

$scope.$watch( 'entity.goods.typeTemplateId' , function (newValue, oldValue) { typeTemplateService .findSpecOptionListByTypeId(newValue).success( function (data) { $scope.specList = data; }); });

2.在serviceimpl中 //注入規格選項mapper接口代理對象 @Autowired private TbSpecificationOptionMapper specificationOptionMapper;

public List<Map> findSpecOptionListByTypeId(Long typeId) { // 根據模版id查詢規格屬性值 TbTypeTemplate typeTemplate = typeTemplateMapper.selectByPrimaryKey(typeId); // 從模版中擷取規格屬性值 String specIds = typeTemplate.getSpecIds(); // [{"id":27,"text":"網絡"},{"id":32,"text":"機身記憶體"}] // 把規格屬性轉換為json對象 List<Map> specList = JSON.parseArray(specIds, Map.class); // 循環規格屬性值,根據規格屬性id查詢規格選項 for (Map map : specList) { //從規格屬性中擷取規格id Integer specId = (Integer)map.get("id"); //建立example對象 TbSpecificationOptionExample example = new TbSpecificationOptionExample(); //建立criteria對象,設定查詢參數 com.pyg.pojo.TbSpecificationOptionExample.Criteria createCriteria = example.createCriteria(); //設定外鍵規格id查詢規格選項 createCriteria.andSpecIdEqualTo(specId.longValue()); //查詢規格選項值(根據外鍵查詢) List<TbSpecificationOption> specOptionList = specificationOptionMapper.selectByExample(example); // 根據資料庫裡的[{"id":27,"text":"網絡","options":[{}{}]},{"id":32,"text":"機身記憶體","options":[{}{}]}] //把規格選項封裝到map中，存到模闆裡的規格中 map.put("options", specOptionList); } return specList; }

3.頁面顯示 <div class="row data-type"> < div ng-repeat = "spec in specList" > < div class = "col-md-2 title" > {{spec.text}} </ div > < div class = "col-md-10 data" > < span ng-repeat = "option in spec.options" >//周遊模闆裡面的規格裡存放的規格選項 < input type = "checkbox" ng-click = "updateSpecAttribute($event,spec.text,option.optionName);createSkuItemList()" > {{option.optionName}} </ span > </ div > </ div > </ div >

2.更具資料庫檢視規格選項和規格屬性在資料庫儲存的樣式，我們是如下樣式，及把規格和規格選項的資料以json儲存，attributeName代表規格名，attributeValue代表該規格的規格屬性（這是一個數組類型），以對象的方式放在json數組中 [{"attributeName":"網絡制式","attributeValue":["移動3G","移動4G"]},{"attributeName":"螢幕尺寸","attributeValue":["6寸","5.5寸"]}] 3.實作，當商家選擇一個規格和一個規格選項時，我們為其添加一行組成商品資料 SKU ，（規格和規格選項的關系就是，每個規格下面都對應下面所有的規格選項，一行商品資料就是一個商品）也就是說使用兩個周遊方法，先周遊一個規格，在這個規格中再周遊規格選項，然後深克隆資料添加一行資料 // 定義選中規格屬性事件 $scope.updateSpecAttribute = function($event, text, name) { // 擷取實體中規格選項值 // [{"attributeName":"網絡","attributeValue":["移動3G"]}] var specList = $scope.entity.goodsDesc.specificationItems;

// 循環規格選項值 for (var i = 0; i < specList.length; i++) { // 判斷選擇的是那個屬性 if (specList[i].attributeName == text) { // 判斷是否選中事件 if ($event.target.checked) { // [{"attributeName":"網絡","attributeValue":["移動3G","聯通4G"]}] // 把規格選項推送到規格選項資料結構中 specList[i].attributeValue.push(name); } else { // [{"attributeName":"網絡","attributeValue":["移動3G"]}] // 取消事件 specList[i].attributeValue.splice( specList[i].attributeValue.indexOf(name), 1); }

return; }

} // 如果商品描述中規格屬性沒值,把選擇中值推送到集合中 // 第一次點選規格屬性選項值 // [{"attributeName":"網絡","attributeValue":["移動3G"]}] specList.push({ attributeName : text, attributeValue : [ name ] }); }; 完成單個商品的組合，，

// 定義函數,封裝規格選項組合成商品最小銷售單元 $scope.createSkuItemList = function() {

// 初始化規格資料組合 $scope.entity.itemList = [ { spec : {}, //規格屬性 price : 999999, //預設庫存 stockCount : 0,//預設價格 status : '0',//預設商品狀态 idDefault : '0'//預設是否選用 } ]; // 擷取選中規格屬性值 // [{"attributeName":"網絡","attributeValue":["電信2G","聯通2G"]},{"attributeName":"機身記憶體","attributeValue":["16G","64G"]}] var specList = $scope.entity.goodsDesc.specificationItems;

// 循環規格屬性值,組合sku最小銷售單元商品資料 for (var i = 0; i < specList.length; i++) { // 第一次循環:$scope.entity.itemList = // [{spec:{"網絡":"電信2G"},price:999999,stockCount:0,status:'0',idDefault:'0'},{spec:{"網絡":"聯通2G"},price:999999,stockCount:0,status:'0',idDefault:'0'}] // 添加一列調用添加一行方法 $scope.entity.itemList = addColumn($scope.entity.itemList, specList[i].attributeName, specList[i].attributeValue);

}

}; ================================================================================================== //實作添加一行的資料方法 addColumn = function(list, name, columnValues) {

//定義一個空數組 var newList = [];

// 第一次循環資料:[{spec:{},price:999999,stockCount:0,status:'0',idDefault:'0'}]; // 第二次循環資料:[{spec:{"網絡":"電信2G"},price:999999,stockCount:0,status:'0',idDefault:'0'},{spec:{"網絡":"聯通2G"},price:999999,stockCount:0,status:'0',idDefault:'0'}] // 循環list集合資料 2 for (var i = 0; i < list.length; i++) {

// 第一次循環第一個對象:{spec:{},price:999999,stockCount:0,status:'0',idDefault:'0'} // 第二次循環第一個對象:{spec:{"網絡":"電信2G"},price:999999,stockCount:0,status:'0',idDefault:'0'} // 擷取一個舊的對象 var oldRow = list[i]; // 第一次循環:columnValues:["電信2G","聯通2G"] // 第二次循環:columnValues:["16G","64G"] // 第二個循環 for (var j = 0; j < columnValues.length; j++) { // 第一次克隆:{spec:{},price:999999,stockCount:0,status:'0',idDefault:'0'} // 第二次克隆: // {spec:{"網絡":"電信2G"},price:999999,stockCount:0,status:'0',idDefault:'0'} // 深克隆操作,新建立一行資料 var newRow = JSON.parse(JSON.stringify(oldRow)); // {spec:{"網絡":"電信2G",:"機身記憶體":"4G"},price:999999,stockCount:0,status:'0',idDefault:'0'} newRow.spec[name] = columnValues[j];

// j:循環第一次:{spec:{"網絡":"電信2G"},price:999999,stockCount:0,status:'0',idDefault:'0'} // j:循環第二次:{spec:{"網絡":"聯通2G"},price:999999,stockCount:0,status:'0',idDefault:'0'} // 推送集合将新建立的一行資料，推送到上面定義的空數組中，并傳回到上面的單擊事件方法中 newList.push(newRow); } } // [{spec:{"網絡":"電信2G"},price:999999,stockCount:0,status:'0',idDefault:'0'},{spec:{"網絡":"聯通2G"},price:999999,stockCount:0,status:'0',idDefault:'0'}] return newList;

};

頁面顯示

< div class = "row data-type" > < table class = "table table-bordered table-striped table-hover dataTable" > < thead > < tr >  < th class = "sorting" ng-repeat = "spec in entity.goodsDesc.specificationItems" > {{spec.attributeName}} </ th > < th class = "sorting" > 價格 </ th > < th class = "sorting" > 庫存 </ th > < th class = "sorting" > 是否啟用 </ th > < th class = "sorting" > 是否預設 </ th > </ tr > </ thead > < tbody > < tr ng-repeat="item in entity.itemList" >

< td ng-repeat="specName in entity.goodsDesc.specificationItems" > {{item.spec[specName.attributeName]}} </ td > < td >< input class = "form-control" ng-model = "item.price" placeholder = "價格" > </ td > < td >< input class = "form-control" ng-model = "item.stockCount" placeholder = "庫存數量" > </ td > < td >< input type = "checkbox" ng-model = "item.status" ></ td > < td >< input type = "checkbox" ng-model = "item.isDefault" ng-true-value = "1" ng-false-value = "0" ></ td > </ tr > </ tbody > </ table > </ div >