element-ui后台管理系统学习(13)-商品规格排序

淡淡的烟草味﹌ 2021-08-02 21:30 336阅读 0赞

**第1步：新建common/util.js文件，用于排序的工具函数。**

export default {
    	// sku排列算法
    	cartesianProductOf() {
    		return Array.prototype.reduce.call(arguments,function(a, b) {
    			var ret = [];
    			a.forEach(function(a) {
    				b.forEach(function(b) {
    					ret.push(a.concat([b]));
    				});
    			});
    			return ret;
    		}, [[]]);
    	},
    	swapArray(arr, index1, index2) {
          arr[index1] = arr.splice(index2, 1, arr[index1])[0];
          return arr;
        },
        // 上移 将当前数组index索引与后面一个元素互换位置，向数组后面移动一位
        moveUp(arr, index) {
          this.swapArray(arr, index, index - 1);
        },
        // 下移 将当前数组index索引与前面一个元素互换位置，向数组前面移动一位
        moveDown(arr, index) {
          this.swapArray(arr, index, index + 1);
        },
    }

**第2步：在goods\_create.js文件中引入util.js文件。**

**第3步：封装排序函数sortSkuCard。**

import $util from '@/common/util'
    export default {
    	state: {
    		skus_type: 0,
    		title: "",// 商品名称
    		category: [],
    		desc: "",
    		unit: "",
    		stock: 0,
    		min_stock: 0,
    		display_stock: 0,
    		status: 0,
    		express: "",
    
    		oprice: 0, // 市场价格
    		pprice: 0, // 销售价格
    		cprice: 0, // 成本价格
    		weight: 0, // 重量
    		volume: 0, // 体积
    		// 规格卡片
    		sku_card: [{
    			name: '颜色',
    			type: 0,
    			list: []
    
    		}]
    	},
    	getters: {
    
    	},
    	mutations: {
    		// 修改state
    		vModelState(state, { key, value }) {
    			state[key] = value
    		},
    		addSkuCard(state) {
    			state.sku_card.push({
    				name: '规格名称',
    				type: 0,
    				list: []
    			})
    		},
    		// 删除规格卡片
    		delSkuCard(state, index) {
    			state.sku_card.splice(index, 1)
    		},
    		// 修改规格属性
    		vModelSkuCard(state, {key, index, value }) {
    			state.sku_card[index][key] = value;
    		},
    
    		// 卡片排序
    		sortSkuCard(state, {action, index}){
    			$util[action](state.sku_card, index);
    		}
    	},
    	actions: {
    
    	}
    }

备注：函数传递的参数是对象形式，其中action表示用户行为，此处是moveUp、moveDown表示上移与下移，index表示索引。

**第4步：在sku-card.vue组件中导入mutations，并封装上移函数sortCard。**

methods: {
        ...mapMutations([
          "addSkuCard",
          "delSkuCard",
          "vModelSkuCard",
          "sortSkuCard"
        ]),
        vModel(key, index, value) {
          this.vModelSkuCard({ key, index, value });
        },
        // 排序函数（上移与下移）
        sortCard(action, index) {
          this.sortSkuCard({action,index});
        }
      }

**第5步：函数绑定。**

<el-button size="mini" class="ml-auto" icon="el-icon-top" @click="sortCard('moveUp',index)"></el-button>