需求分析：商家添加商品，如上图样式，如商家添加手机这个商品，我们先查询到手机这个属性的规格选项，及规格 ，当商家选择一个规格和一个规格选项时，我们为其添加一行组成商品数据 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;
/**
* 需求: 查询模版中存储关键规格属性对应规格选项
* 请求: findSpecOptionListByTypeId
* 参数:模版id
* 返回值: List<Map>
*/
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>
扫一扫
1233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
