yoshop/web/assets/store/js/goods.spec.js

(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;

})();