339 lines
14 KiB
JavaScript
339 lines
14 KiB
JavaScript
(function () {
|
||
|
||
// 配置信息
|
||
var setting = {
|
||
el: 'many-app',
|
||
baseData: null,
|
||
isSpecLocked: false,
|
||
batchData: {
|
||
goods_no: '',
|
||
goods_price: '',
|
||
sharing_price: '',
|
||
line_price: '',
|
||
stock_num: '',
|
||
goods_weight: ''
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 构造方法
|
||
* @param options
|
||
* @param baseData
|
||
* @constructor
|
||
*/
|
||
function GoodsSpec(options, baseData) {
|
||
// 配置信息
|
||
setting = $.extend(true, {}, setting, options);
|
||
// 初始化
|
||
this.initialize();
|
||
}
|
||
|
||
GoodsSpec.prototype = {
|
||
|
||
// vue组件句柄
|
||
appVue: null,
|
||
|
||
/**
|
||
* 初始化
|
||
*/
|
||
initialize: function () {
|
||
// 已存在的规格数据
|
||
var spec_attr = [], spec_list = [];
|
||
if (typeof setting.baseData !== 'undefined' && setting.baseData !== null) {
|
||
spec_attr = setting.baseData['spec_attr'];
|
||
spec_list = setting.baseData['spec_list'];
|
||
}
|
||
|
||
// 实例化vue对象
|
||
this.appVue = new Vue({
|
||
el: setting.el,
|
||
data: {
|
||
// 规格组/值
|
||
spec_attr: spec_attr,
|
||
// sku列表
|
||
spec_list: spec_list,
|
||
// 显示添加规格组按钮
|
||
showAddGroupBtn: true,
|
||
// 显示添加规格组表单
|
||
showAddGroupForm: false,
|
||
// 新增规格组值
|
||
addGroupFrom: {
|
||
specName: '',
|
||
specValue: ''
|
||
},
|
||
// 当前规格属性是否锁定
|
||
isSpecLocked: setting.isSpecLocked,
|
||
// 批量设置sku属性
|
||
batchData: setting.batchData
|
||
},
|
||
methods: {
|
||
/**
|
||
* 显示/隐藏添加规则组
|
||
*/
|
||
onToggleAddGroupForm: function () {
|
||
this.showAddGroupBtn = !this.showAddGroupBtn;
|
||
this.showAddGroupForm = !this.showAddGroupForm;
|
||
},
|
||
|
||
/**
|
||
* 表单提交：新增规格组
|
||
* @returns {boolean}
|
||
*/
|
||
onSubmitAddGroup: function () {
|
||
var _this = this;
|
||
if (_this.addGroupFrom.specName === '' || _this.addGroupFrom.specValue === '') {
|
||
layer.msg('请填写规则名或规则值');
|
||
return false;
|
||
}
|
||
// 添加到数据库
|
||
var load = layer.load();
|
||
$.post(STORE_URL + '/goods.spec/addSpec', {
|
||
spec_name: _this.addGroupFrom.specName,
|
||
spec_value: _this.addGroupFrom.specValue
|
||
}, function (result) {
|
||
layer.close(load);
|
||
if (result.code !== 1) {
|
||
layer.msg(result.msg);
|
||
return false;
|
||
}
|
||
// 记录规格数据
|
||
_this.spec_attr.push({
|
||
group_id: result.data['spec_id'],
|
||
group_name: _this.addGroupFrom.specName,
|
||
spec_items: [{
|
||
item_id: result.data['spec_value_id'],
|
||
spec_value: _this.addGroupFrom.specValue
|
||
}],
|
||
tempValue: ''
|
||
});
|
||
// 清空输入内容
|
||
_this.addGroupFrom.specName = '';
|
||
_this.addGroupFrom.specValue = '';
|
||
// 隐藏添加规则组
|
||
_this.onToggleAddGroupForm();
|
||
// 构建规格组合列表
|
||
_this.buildSkulist();
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 新增规格值
|
||
* @param index
|
||
*/
|
||
onSubmitAddValue: function (index) {
|
||
var _this = this
|
||
, specAttr = _this.spec_attr[index];
|
||
// 验证新增规格值
|
||
if (!this.verifyAddValue(specAttr)) {
|
||
return false;
|
||
}
|
||
// 添加到数据库
|
||
var load = layer.load();
|
||
$.post(STORE_URL + '/goods.spec/addSpecValue', {
|
||
spec_id: specAttr.group_id,
|
||
spec_value: specAttr.tempValue
|
||
}, function (result) {
|
||
layer.close(load);
|
||
if (result.code !== 1) {
|
||
layer.msg(result.msg);
|
||
return false;
|
||
}
|
||
// 记录规格数据
|
||
specAttr.spec_items.push({
|
||
item_id: result.data['spec_value_id'],
|
||
spec_value: specAttr.tempValue
|
||
});
|
||
// 清空输入内容
|
||
specAttr.tempValue = '';
|
||
// 构建规格组合列表
|
||
_this.buildSkulist();
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 验证新增规格值
|
||
* @param specAttr
|
||
* @returns {boolean}
|
||
*/
|
||
verifyAddValue(specAttr) {
|
||
if (!specAttr.tempValue || specAttr.tempValue === '') {
|
||
layer.msg('规格值不能为空');
|
||
return false
|
||
}
|
||
// 验证规格值是否重复
|
||
var specValues = []
|
||
specAttr.spec_items.forEach(function (item) {
|
||
specValues.push(item.spec_value)
|
||
})
|
||
if (specValues.indexOf(specAttr.tempValue) > -1) {
|
||
layer.msg('规格值不能重复');
|
||
return false
|
||
}
|
||
return true
|
||
},
|
||
|
||
/**
|
||
* 构建规格组合列表
|
||
*/
|
||
buildSkulist: function () {
|
||
var _this = this;
|
||
// 计算skuList总数 (table行数)
|
||
var skuDataCount = 1;
|
||
for (var i = 0; i < _this.spec_attr.length; i++) {
|
||
skuDataCount *= _this.spec_attr[i].spec_items.length;
|
||
}
|
||
// 遍历skuList列表，生成tr(行)
|
||
var skuList = [];
|
||
for (i = 0; i < skuDataCount; i++) {
|
||
// skuItem的数据
|
||
var skuItemRows = [],
|
||
rowCount = 1, specSkuIdAttr = [];
|
||
// 遍历规格属性, 生成td row(列)
|
||
for (var j = 0; j < _this.spec_attr.length; j++) {
|
||
// 每组规格的值
|
||
var specValues = _this.spec_attr[j].spec_items;
|
||
|
||
// 合并后的规格值显示的区块数量
|
||
rowCount = rowCount * specValues.length;
|
||
|
||
// 合并后的规格值的rowspan
|
||
var anInterBankNum = skuDataCount / rowCount;
|
||
var point = (i / anInterBankNum) % specValues.length;
|
||
|
||
// rowspan能被i整除 才写入skuItemRows
|
||
// i % anInterBankNum
|
||
if (0 === (i % anInterBankNum)) {
|
||
skuItemRows.push({
|
||
rowspan: anInterBankNum,
|
||
item_id: specValues[point].item_id,
|
||
spec_value: specValues[point].spec_value
|
||
});
|
||
}
|
||
const pointInt = parseInt(point.toString());
|
||
specSkuIdAttr.push(specValues[pointInt].item_id);
|
||
}
|
||
skuList.push({
|
||
spec_sku_id: specSkuIdAttr.join('_'),
|
||
rows: skuItemRows,
|
||
form: {}
|
||
});
|
||
|
||
}
|
||
|
||
|
||
// return false;
|
||
// 合并旧sku数据
|
||
if (_this.spec_list.length > 0 && skuList.length > 0) {
|
||
for (i = 0; i < skuList.length; i++) {
|
||
var overlap = _this.spec_list.filter(function (val) {
|
||
return val.spec_sku_id === skuList[i].spec_sku_id;
|
||
});
|
||
if (overlap.length > 0) skuList[i].form = overlap[0].form;
|
||
}
|
||
}
|
||
_this.spec_list = skuList;
|
||
// 注册上传sku图片事件
|
||
_this.onSelectImagesEvent();
|
||
},
|
||
|
||
/**
|
||
* 删除规则组事件
|
||
* @param index
|
||
*/
|
||
onDeleteGroup: function (index) {
|
||
var _this = this;
|
||
layer.confirm('确定要删除该规则吗？确认后不可恢复请谨慎操作'
|
||
, function (layerIndex) {
|
||
// 删除指定规则组
|
||
_this.spec_attr.splice(index, 1);
|
||
// 构建规格组合列表
|
||
_this.buildSkulist();
|
||
layer.close(layerIndex);
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 删除规则值事件
|
||
* @param index
|
||
* @param itemIndex
|
||
*/
|
||
onDeleteValue: function (index, itemIndex) {
|
||
var _this = this;
|
||
layer.confirm('确定要删除该规则吗？确认后不可恢复请谨慎操作'
|
||
, function (layerIndex) {
|
||
// 删除指定规则组
|
||
_this.spec_attr[index].spec_items.splice(itemIndex, 1);
|
||
// 构建规格组合列表
|
||
_this.buildSkulist();
|
||
layer.close(layerIndex);
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 批量设置sku属性
|
||
*/
|
||
onSubmitBatchData: function () {
|
||
var _this = this;
|
||
_this.spec_list.forEach(function (value) {
|
||
for (var key in _this.batchData) {
|
||
if (_this.batchData.hasOwnProperty(key) && _this.batchData[key]) {
|
||
_this.$set(value.form, key, _this.batchData[key]);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 注册上传sku图片事件
|
||
*/
|
||
onSelectImagesEvent: function () {
|
||
var _this = this;
|
||
// 注册上传sku图片
|
||
_this.$nextTick(function () {
|
||
$(_this.$el).find('.j-selectImg').selectImages({
|
||
done: function (data, $addon) {
|
||
var index = $addon.data('index');
|
||
_this.$set(_this.spec_list[index].form, 'image_id', data[0]['file_id']);
|
||
_this.$set(_this.spec_list[index].form, 'image_path', data[0]['file_path']);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 删除sku图片
|
||
*/
|
||
onDeleteSkuImage: function (index) {
|
||
this.spec_list[index].form['image_id'] = 0;
|
||
this.spec_list[index].form['image_path'] = '';
|
||
},
|
||
|
||
/**
|
||
* 获取当前data
|
||
*/
|
||
getData: function () {
|
||
return this.$data;
|
||
},
|
||
|
||
/**
|
||
* sku列表是否为空
|
||
* @returns {boolean}
|
||
*/
|
||
isEmptySkuList: function () {
|
||
return !this.spec_list.length;
|
||
}
|
||
|
||
}
|
||
});
|
||
|
||
// 初始化生成sku列表
|
||
spec_list.length > 0 && this.appVue.buildSkulist();
|
||
}
|
||
|
||
};
|
||
|
||
window.GoodsSpec = GoodsSpec;
|
||
|
||
})();
|
||
|