订单之间相互拖拽排序（也可本身拖拽排序）、统计数据也跟随变化

订单之间相互拖拽排序（也可本身拖拽排序）、统计数据也跟随变化

“班次调整”代码流程

1、点击班次调整

// 点击班次调整
classesAdjust(){
	var that = this;
	$("#classTableId tr.see").removeClass('active');
	$("#classTableId tr.see .btn").hide();
	if(that.currentClassesArr.length == 0){
	    imitatePopup("请先勾选班次",'alert');
	    return false;
	}
	that.classesTotallist = [];
	that.besicInfosList = [];
	that.sortTemShowList = [];
	that.sortTransDataList = [];
	that.totalQwv = [];
	var infos = that.currentClassesArr;
	that.pageWayFun(infos);
	$(".maskLayer7").show();
},

2、得到准备要调整的班次数据

// 得到准备要调整的班次数据
pageWayFun(tableOrderItem){
    var that = this;
    for(var i=0;i<tableOrderItem.length;i++){
        var searchFormArr = {
            refId: tableOrderItem[i].omOrderId,
            refNo: tableOrderItem[i].orderNo
        };
        //获取订单列表
        postRequest(tmsUrl + "/query/tfoOrderInfo.json?token="+that.logininf.token+"&timeStamp="+that.logininf.timeStamp,searchFormArr,function(data){
            if(data.result != null){
                if(data.result.carrierPartyInfo != null){
                    that.classesTotallist.push(data.result.carrierPartyInfo);
                }
                if(data.result.order != null){
                    that.besicInfosList.push(data.result.order)
                }
                if(data.result.orderLnkList != null && data.result.orderLnkList.length != 0){
                    var orderLnkList = data.result.orderLnkList;
                    that.sortTemShowList.push(orderLnkList);
                    that.sortTransDataList.push(orderLnkList);
                    for(var j=0;j<orderLnkList.length;j++){
                        var totalQwvItem = orderLnkList[j].totalQty + '件 ' + orderLnkList[j].totalWeight + 'kg ' + orderLnkList[j].totalVolume + 'm³';
                        that.totalQwv.push(totalQwvItem);
                    }
                }else{
                    var orderLnkList = [];
                    that.sortTemShowList.push(orderLnkList);
                    that.sortTransDataList.push(orderLnkList);
                    var totalQwvItem = '';
                    that.totalQwv.push(totalQwvItem);
                }
            }
        })
    }
    setTimeout(function(){
        that.rowDrop1();
    },800)
},

3、对所选班次的订单进行拖拽排序

// 对所选班次的订单进行拖拽排序
rowDrop1(orderList){
    var that = this;
    var arr = {};
    for(let i=0;i<that.classesTotallist.length;i++){
        if(that.sortTransDataList[i]){
            var drop = this.$refs.drop[i];
            Sortable.create(drop, {
                group: "words",
                animation: 150,
                onStart: function (evt) {  //拖拽开始发生该事件
                    var array = that.sortTransDataList[i].slice(0);
                    arr = array.splice(evt.oldIndex,1)[0];
                },
                onRemove: function (evt){ //删除拖拽节点的时候促发该事件
                    var newArray1 = that.sortTransDataList[i].slice(0);
                    newArray1.splice(evt.oldIndex,1)[0];
                    that.sortTransDataList[i] = [];
                    that.sortTransDataList[i] = newArray1;
                    that.besicInfosList[i].totalQty = ((that.besicInfosList[i].totalQty * 1-arr.totalQty * 1).toFixed(2))*1;
                    that.besicInfosList[i].totalWeight = ((that.besicInfosList[i].totalWeight * 1-arr.totalWeight * 1).toFixed(2))*1;
                    that.besicInfosList[i].totalVolume = ((that.besicInfosList[i].totalVolume * 1-arr.totalVolume * 1).toFixed(2))*1;
                },
                onAdd: function (evt){ //拖拽时候添加有新的节点的时候发生该事件
                    var newArray2 = that.sortTransDataList[i].slice(0);
                    newArray2.splice(evt.newIndex,0,arr);
                    that.sortTransDataList[i] = [];
                    that.sortTransDataList[i] = newArray2;

                    that.besicInfosList[i].totalQty = ((that.besicInfosList[i].totalQty * 1+arr.totalQty * 1).toFixed(2))*1;
                    that.besicInfosList[i].totalWeight = ((that.besicInfosList[i].totalWeight * 1+arr.totalWeight * 1).toFixed(2))*1;
                    that.besicInfosList[i].totalVolume = ((that.besicInfosList[i].totalVolume * 1+arr.totalVolume * 1).toFixed(2))*1;
                },
                onUpdate: function (evt) {  //拖拽更新节点位置发生该事件
                    var newArray = that.sortTransDataList[i].slice(0);
                    newArray.splice(evt.newIndex, 0,newArray.splice(evt.oldIndex,1)[0]);
                    that.sortTransDataList[i] = [];
                    that.sortTransDataList[i] = newArray;
                }
            });
        }
    }
},

4、班次调整结束

// 班次调整结束
closeMaskLayer4(){
     var that = this;
     $(".maskLayer").hide();
     that.currentClassesArr = [];
     $("#classesOrderTable table input").attr("checked",false);
 },

图示效果流程