|
|
|
(function () {
|
|
|
|
// 商品规格数据
|
|
|
|
var data = {
|
|
|
|
spec_attr: [],
|
|
|
|
spec_list: []
|
|
|
|
}
|
|
|
|
|
|
|
|
// 配置信息
|
|
|
|
, setting = {
|
|
|
|
container: '.goods-spec-many',
|
|
|
|
OutForm:''
|
|
|
|
};
|
|
|
|
|
|
|
|
function GoodsSpec(options, baseData) {
|
|
|
|
// 配置信息
|
|
|
|
setting = $.extend(true, {}, setting, options);
|
|
|
|
// 已存在的规格数据
|
|
|
|
typeof baseData !== 'undefined' && baseData !== null && (data = baseData);
|
|
|
|
// 初始化
|
|
|
|
this.initialize();
|
|
|
|
}
|
|
|
|
|
|
|
|
GoodsSpec.prototype = {
|
|
|
|
/**
|
|
|
|
* 初始化
|
|
|
|
*/
|
|
|
|
initialize: function () {
|
|
|
|
// 注册html容器
|
|
|
|
this.$container = $(setting.container);
|
|
|
|
this.$specAttr = this.$container.find('.spec-attr');
|
|
|
|
// 显示添加规则组表单事件
|
|
|
|
this.showAddSpecGroupEvent();
|
|
|
|
// 确认新增规则组事件
|
|
|
|
this.submitAddSpecGroupEvent();
|
|
|
|
// 取消新增规则组事件
|
|
|
|
this.cancelAddSpecGroupEvent();
|
|
|
|
// 注册添加规格元素事件
|
|
|
|
this.addSpecItemEvent();
|
|
|
|
// 注册删除规则组事件
|
|
|
|
this.deleteSpecGroupEvent();
|
|
|
|
// 注册删除规则元素事件
|
|
|
|
this.deleteSpecItemEvent();
|
|
|
|
// 注册删除单一sku事件
|
|
|
|
this.deleteSKUEvent();
|
|
|
|
// 注册批量设置sku事件
|
|
|
|
this.batchUpdateSku();
|
|
|
|
// 注册表格input数据修改事件
|
|
|
|
this.updateSpecInputEvent();
|
|
|
|
// 渲染已存在的sku信息
|
|
|
|
this.renderHtml();
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 显示添加规则组表单
|
|
|
|
*/
|
|
|
|
showAddSpecGroupEvent: function () {
|
|
|
|
// 显示添加规则组表单
|
|
|
|
this.$container.on('click', '.btn-addSpecGroup', function () {
|
|
|
|
var $specGroupButton = $(this).parent()
|
|
|
|
, $specGroupAdd = $specGroupButton.next();
|
|
|
|
$specGroupButton.hide();
|
|
|
|
$specGroupAdd.show();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 确认新增规则组
|
|
|
|
*/
|
|
|
|
submitAddSpecGroupEvent: function () {
|
|
|
|
var _this = this;
|
|
|
|
// 确认添加
|
|
|
|
_this.$container.on('click', '.btn-addSpecName', function () {
|
|
|
|
var $specGroupAdd = $(this).parent().parent()
|
|
|
|
, $specGroupButton = $specGroupAdd.prev()
|
|
|
|
, $specNameInput = _this.$container.find('.input-specName')
|
|
|
|
, $specValueInput = _this.$container.find('.input-specValue')
|
|
|
|
, specValueInputValue = $specValueInput.val()
|
|
|
|
, specNameInputValue = $specNameInput.val();
|
|
|
|
if (specNameInputValue === '' || specValueInputValue === '') {
|
|
|
|
layer.msg('请填写规则名或规则值');
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
// 添加到数据库
|
|
|
|
var load = layer.load();
|
|
|
|
$.post('house_activity/addSpec', {
|
|
|
|
spec_name: specNameInputValue,
|
|
|
|
spec_value: specValueInputValue
|
|
|
|
}, function (result) {
|
|
|
|
console.log(result);
|
|
|
|
layer.close(load);
|
|
|
|
if (result.code !== 1) {
|
|
|
|
layer.msg(result.msg);
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
// 清空输入内容
|
|
|
|
$specNameInput.val('') && $specValueInput.val('');
|
|
|
|
// 记录规格数据
|
|
|
|
data.spec_attr.push({
|
|
|
|
group_id: result.data.spec_id,
|
|
|
|
group_name: specNameInputValue,
|
|
|
|
spec_items: [{
|
|
|
|
item_id: result.data.spec_value_id,
|
|
|
|
spec_value: specValueInputValue
|
|
|
|
}]
|
|
|
|
});
|
|
|
|
// 渲染规格属性html
|
|
|
|
_this.renderHtml();
|
|
|
|
// 隐藏添加规格组表单
|
|
|
|
$specGroupAdd.hide() && $specGroupButton.show();
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 取消新增规格组
|
|
|
|
*/
|
|
|
|
cancelAddSpecGroupEvent: function () {
|
|
|
|
this.$container.on('click', '.btn-cancleAddSpecName', function () {
|
|
|
|
var $specGroupAdd = $(this).parent().parent()
|
|
|
|
, $specGroupButton = $specGroupAdd.prev();
|
|
|
|
// 隐藏添加规格组表单
|
|
|
|
$specGroupAdd.hide() && $specGroupButton.show()
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 添加规则元素事件
|
|
|
|
*/
|
|
|
|
addSpecItemEvent: function () {
|
|
|
|
var _this = this;
|
|
|
|
_this.$container.on('click', '.btn-addSpecItem', function () {
|
|
|
|
var $this = $(this)
|
|
|
|
, $iptSpecItem = $this.prev('.ipt-specItem')
|
|
|
|
, specItemInputValue = $iptSpecItem.val()
|
|
|
|
, $specItemAddContainer = $this.parent()
|
|
|
|
, $specGroup = $specItemAddContainer.parent().parent();
|
|
|
|
if (specItemInputValue === '') {
|
|
|
|
layer.msg('规格值不能为空');
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
// 添加到数据库
|
|
|
|
var load = layer.load();
|
|
|
|
$.post('house_activity/addSpecValue', {
|
|
|
|
spec_id: $specGroup.data('group-id'),
|
|
|
|
spec_value: specItemInputValue
|
|
|
|
}, function (result) {
|
|
|
|
layer.close(load);
|
|
|
|
if (result.code !== 1) {
|
|
|
|
layer.msg(result.msg);
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
// 记录规格数据
|
|
|
|
data.spec_attr[$specGroup.data('index')].spec_items.push({
|
|
|
|
item_id: result.data.spec_value_id,
|
|
|
|
spec_value: specItemInputValue
|
|
|
|
});
|
|
|
|
// 渲染规格属性html
|
|
|
|
_this.renderHtml();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 删除规则组事件
|
|
|
|
*/
|
|
|
|
deleteSpecGroupEvent: function () {
|
|
|
|
var _this = this;
|
|
|
|
_this.$container.on('click', '.spec-group-delete', function () {
|
|
|
|
// 规则组索引
|
|
|
|
var index = $(this).parent().parent().attr('data-index');
|
|
|
|
layer.confirm('确定要删除该规则组吗？确认后不可恢复请谨慎操作', function (layerIndex) {
|
|
|
|
// 删除指定规则组
|
|
|
|
data.spec_attr.splice(index, 1);
|
|
|
|
// 重新渲染规格属性html
|
|
|
|
_this.renderHtml();
|
|
|
|
layer.close(layerIndex);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 删除规则组事件
|
|
|
|
*/
|
|
|
|
deleteSpecItemEvent: function () {
|
|
|
|
var _this = this;
|
|
|
|
_this.$container.on('click', '.spec-item-delete', function () {
|
|
|
|
var $item = $(this).parent()
|
|
|
|
, $specGroup = $item.parent().parent()
|
|
|
|
, groupIndex = $specGroup.attr('data-index')
|
|
|
|
, itemIndex = $item.attr('data-item-index');
|
|
|
|
layer.confirm('确定要删除该规则吗？确认后不可恢复请谨慎操作', function (layerIndex) {
|
|
|
|
// 删除指定规则组
|
|
|
|
data.spec_attr[groupIndex].spec_items.splice(itemIndex, 1);
|
|
|
|
// 重新渲染规格属性html
|
|
|
|
_this.renderHtml();
|
|
|
|
layer.close(layerIndex);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 注册批量设置sku事件
|
|
|
|
*/
|
|
|
|
batchUpdateSku: function () {
|
|
|
|
var _this = this,
|
|
|
|
$specBatch = _this.$container.find('.spec-batch');
|
|
|
|
$specBatch.on('click', '.btn-specBatchBtn', function () {
|
|
|
|
var formData = {};
|
|
|
|
$specBatch.find('input').each(function () {
|
|
|
|
var $this = $(this)
|
|
|
|
, formType = $this.data('type')
|
|
|
|
, value = $this.val();
|
|
|
|
if (typeof formType !== 'undefined' && formType !== '' && value !== '') {
|
|
|
|
formData[formType] = value;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
if (!$.isEmptyObject(formData)) {
|
|
|
|
data.spec_list.forEach(function (item, index) {
|
|
|
|
data.spec_list[index].form = $.extend({}, data.spec_list[index].form, formData);
|
|
|
|
});
|
|
|
|
// 渲染商品规格table
|
|
|
|
_this.renderTabelHtml();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 渲染多规格模块html
|
|
|
|
*/
|
|
|
|
renderHtml: function () {
|
|
|
|
// 渲染商品规格元素
|
|
|
|
this.$specAttr.html(Template('tpl_spec_attr', data));
|
|
|
|
// 渲染商品规格table
|
|
|
|
this.renderTabelHtml();
|
|
|
|
},
|
|
|
|
deleteSKUEvent: function () {
|
|
|
|
var _this = this;
|
|
|
|
_this.$container.on('click', '.delsku-bt', function () {
|
|
|
|
// sku索引
|
|
|
|
var index = $(this).parent().parent().attr('data-index');
|
|
|
|
var sh_num = data.spec_list[index].form.stock_num;
|
|
|
|
var msgs = sh_num < 0? '确定要显示该sku吗？': '确定要隐藏该sku吗？';
|
|
|
|
layer.confirm(msgs, function (layerIndex) {
|
|
|
|
data.spec_list[index].form.stock_num = sh_num<0? 0 : -1;
|
|
|
|
console.log(data);
|
|
|
|
_this.$specAttr.html(Template('tpl_spec_attr', data));
|
|
|
|
var $specTabel = _this.$container.find('.spec-sku-tabel')
|
|
|
|
, $goodsSku = $specTabel.parent();
|
|
|
|
// 商品规格为空：隐藏sku容器
|
|
|
|
if (data.spec_attr.length === 0) {
|
|
|
|
$specTabel.empty();
|
|
|
|
$goodsSku.hide();
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
// 渲染table
|
|
|
|
$specTabel.html(Template('tpl_spec_table', data));
|
|
|
|
// 显示sku容器
|
|
|
|
$goodsSku.show();
|
|
|
|
|
|
|
|
(setting.OutForm).events.plupload($(".spec-sku-tabel"));
|
|
|
|
(setting.OutForm).events.faselect($(".spec-sku-tabel"));
|
|
|
|
layer.close(layerIndex);
|
|
|
|
return;
|
|
|
|
//_this.renderHtml();
|
|
|
|
//layer.close(layerIndex);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 渲染表格html
|
|
|
|
*/
|
|
|
|
renderTabelHtml: function () {
|
|
|
|
var $specTabel = this.$container.find('.spec-sku-tabel')
|
|
|
|
, $goodsSku = $specTabel.parent();
|
|
|
|
// 商品规格为空：隐藏sku容器
|
|
|
|
if (data.spec_attr.length === 0) {
|
|
|
|
$specTabel.empty();
|
|
|
|
$goodsSku.hide();
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
// 构建规格组合列表
|
|
|
|
this.buildSpeclist();
|
|
|
|
// 渲染table
|
|
|
|
$specTabel.html(Template('tpl_spec_table', data));
|
|
|
|
// 显示sku容器
|
|
|
|
$goodsSku.show();
|
|
|
|
|
|
|
|
//绑定按钮;
|
|
|
|
(setting.OutForm).events.plupload($(".spec-sku-tabel"));
|
|
|
|
(setting.OutForm).events.faselect($(".spec-sku-tabel"));
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 构建规格组合列表
|
|
|
|
*/
|
|
|
|
buildSpeclist: function () {
|
|
|
|
// 规格组合总数 (table行数)
|
|
|
|
var totalRow = 1;
|
|
|
|
for (var i = 0; i < data.spec_attr.length; i++) {
|
|
|
|
totalRow *= data.spec_attr[i].spec_items.length;
|
|
|
|
}
|
|
|
|
// 遍历tr 行
|
|
|
|
var spec_list = [];
|
|
|
|
for (i = 0; i < totalRow; i++) {
|
|
|
|
var rowData = [], rowCount = 1, specSkuIdAttr = [];
|
|
|
|
// 遍历td 列
|
|
|
|
for (var j = 0; j < data.spec_attr.length; j++) {
|
|
|
|
var skuValues = data.spec_attr[j].spec_items;
|
|
|
|
rowCount *= skuValues.length;
|
|
|
|
var anInterBankNum = (totalRow / rowCount)
|
|
|
|
, point = ((i / anInterBankNum) % skuValues.length);
|
|
|
|
if (0 === (i % anInterBankNum)) {
|
|
|
|
rowData.push({
|
|
|
|
rowspan: anInterBankNum,
|
|
|
|
item_id: skuValues[point].item_id,
|
|
|
|
spec_value: skuValues[point].spec_value
|
|
|
|
});
|
|
|
|
}
|
|
|
|
specSkuIdAttr.push(skuValues[parseInt(point.toString())].item_id);
|
|
|
|
}
|
|
|
|
spec_list.push({
|
|
|
|
spec_sku_id: specSkuIdAttr.join('_'),
|
|
|
|
rows: rowData,
|
|
|
|
form: {}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
// 合并旧sku数据
|
|
|
|
if (data.spec_list.length > 0 && spec_list.length > 0) {
|
|
|
|
for (i = 0; i < spec_list.length; i++) {
|
|
|
|
var overlap = data.spec_list.filter(function (val) {
|
|
|
|
return val.spec_sku_id === spec_list[i].spec_sku_id;
|
|
|
|
});
|
|
|
|
if (overlap.length > 0) spec_list[i].form = overlap[0].form;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
data.spec_list = spec_list;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 输入规格信息自动同步更新spec_list
|
|
|
|
*/
|
|
|
|
updateSpecInputEvent: function () {
|
|
|
|
var _this = this;
|
|
|
|
_this.$container.find('.spec-sku-tabel').on('propertychange change', 'input', function () {
|
|
|
|
var $this = $(this)
|
|
|
|
, dataType = $this.attr('name')
|
|
|
|
, specIndex = $this.parent().parent().data('index');
|
|
|
|
data.spec_list[specIndex].form[dataType] = $this.val();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 获取当前data
|
|
|
|
*/
|
|
|
|
getData: function () {
|
|
|
|
return data;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* sku列表是否为空
|
|
|
|
* @returns {boolean}
|
|
|
|
*/
|
|
|
|
isEmptySkuList: function () {
|
|
|
|
return !data.spec_list.length;
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
window.GoodsSpec = GoodsSpec;
|
|
|
|
|
|
|
|
})();
|
|
|
|
|
...
|
...
|
|
