md

src/components/XdTable/index.vue

@@ -111,7 +111,7 @@
       </slot>
     </div>
     <div>
-      <orig-table ref="table" :config="config" v-dragSelect class="xd-tb-wrapper" />
+      <orig-table ref="table" :key="refreshKeyId" :config="config" v-dragSelect v-dragColumn class="xd-tb-wrapper" />
       <pagination
             v-show="total>0 && showPagination"
             :total="total"
@@ -128,7 +128,7 @@
       <ul class="el-dropdown-menu el-popper el-dropdown-menu--medium"
        style="transform-origin: center top; z-index: 2009;width: 180px;"
        x-placement="bottom-end">
-          <li class="el-dropdown-menu__item"  > <span @click="handleCopySelect(null,$event)">复制</span></li>
+          <li class="el-dropdown-menu__item"  > <span @click.stop="handleCopySelect(null,$event)">复制</span></li>
           <!-- <li class="el-dropdown-menu__item"  > <span @click="handleCopySelect(null,$event)">复制选中数据</span></li> -->
           <!-- <li class="el-dropdown-menu__item"  > <span @click="handleCopySelect(null,$event)">复制行</span></li> -->
           <!-- <li class="el-dropdown-menu__item"  > <span @click="handleCopySelect(null,$event)">复制列</span></li> -->
@@ -247,10 +247,9 @@ export default {
           // 指令的定义
           inserted: function (el, binding, vnode) {
               var oDiv = el;
-
+              var tbBodyDiv=oDiv.getElementsByClassName("el-table__body-wrapper")[0];
               //监听用户鼠标事件
-              oDiv.onmousedown = function (ev) {
+              tbBodyDiv.onmousedown = function (ev) {
-
                   var evt = window.event || arguments[0];
                   var flag = true;
                   // 鼠标右键菜单
@@ -258,7 +257,7 @@ export default {
                   if(evt.button == 2){
                      flag=false;
                      showContextMenu(evt);
-                     vnode.context.clearEventBubble(evt);
+                    //  vnode.context.clearEventBubble(evt);
                      const currentCellInfo=getCellPosition(evt.target);
                      vnode.context.currentCellInfo=currentCellInfo;
                     //  console.log("currentCellInfo",currentCellInfo);
@@ -324,7 +323,7 @@ export default {
 
                   var _x = null;
                   var _y = null;
-                  vnode.context.clearEventBubble(evt);
+                  // vnode.context.clearEventBubble(evt);
                   // //打开开关
                   vnode.context.mouseflag = true;
                   // //鼠标拖动时画框
@@ -414,7 +413,6 @@ export default {
 
                     // document.oncontextmenu = new Function("event.returnValue=false");
                     tableDom.addEventListener("contextmenu", function(event) {
-                      event.preventDefault();
                       var menu = document.querySelector("#contextMenu");
                       let tbPosRect=getTablePosition(tableDom);
                       menu.style.left = (event.clientX-tbPosRect.left+10) + "px";
@@ -423,6 +421,7 @@ export default {
                       menu.style.zIndex = 3000;
                       vnode.context.contextVisible=true;
 
+                      event.preventDefault();
                     });
                     // tableDom.oncontextmenu = new Function("event.returnValue=false");
                     // event.preventDefault();
@@ -487,25 +486,6 @@ export default {
                       return { rowIndex:-1,cellIndex:-1};
                     }
                   }
-
-                  // //方法是确定列表到屏幕的位置
-                  // function getX(obj){
-                  //     var parObj=obj;
-                  //     var left=obj.offsetLeft;
-                  //     while(parObj=parObj.offsetParent){
-                  //         left+=parObj.offsetLeft;
-                  //     }
-                  //     return left;
-                  // }
-                  // //方法是确定列表到屏幕的位置
-                  // function getY(obj){
-                  //     var parObj=obj;
-                  //     var top=obj.offsetTop;
-                  //     while(parObj = parObj.offsetParent){
-                  //         top+=parObj.offsetTop;
-                  //     }
-                  //     return top;
-                  // }
                   //在鼠标抬起后做的重置
                   document.onmouseup = function () {
                       //把鼠标移动事初始化
@@ -518,14 +498,21 @@ export default {
                       selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null;
                       vnode.context.mouseflag = false;
                       vnode.context.handleBatchSelect();
-                      cancelContextMenu();
+                      // cancelContextMenu();
                   };
               };
           }
+      },
+      dragColumn: {
+        update: function (el, binding, vnode) {
+          var oDiv = el;
+          vnode.context.setHeaderSortable();
+        }
     }
   },
   data() {
     return {
+      refreshKeyId:Math.random().toString(36).substring(3,10),
       tableId:this.id?this.id:"XdTable"+Math.random().toString(36).substring(3,10),
       // 弹出层标题
       title: "显示/隐藏",
@@ -546,6 +533,7 @@ export default {
       },
       tableData:[],
       dropCol:[],
+      sortable:null,
 
       isDragging: false,
       startRowIndex: -1,
@@ -613,7 +601,6 @@ export default {
     this.updateTable()
     this.initSort();
     this.tableDom=this.getTableDom();
-    this.columnDrop();
   },
   methods: {
 
@@ -838,36 +825,48 @@ export default {
     getTablePosition() {
       return this.tableDom.getBoundingClientRect();
     },
-    //  列拖拽
-     columnDrop() {
-      const _this = this;
-      var xdTableObj = document.getElementById(this.tableId);
-      // var tbHeader1=xdTableObj.getElementsByClassName("el-table__body-wrapper")[0];
-      const wrapperTr = xdTableObj.querySelector('.el-table__header-wrapper tr');
-      console.log("===>columnDrop==>",wrapperTr)
-      this.sortable = Sortable.create(wrapperTr, {
-        animation: 180,
-        delay: 0,
-        onEnd: evt => {
-          // 跳过显示的列数量，如开头我们用了一个多选框
-          const empty = 1
-          const oldItem = _this.dropCol[evt.oldIndex- empty];
-          this.newCol=evt.newIndex-1
-          _this.dropCol.splice(evt.oldIndex- empty, 1);
-          _this.dropCol.splice(evt.newIndex- empty, 0, oldItem);
-          console.log("===>columnDrop==>",_this.dropCol)
-        }
-      });
-    },
 
     handleCopySelect(data,event) {
+      // console.log("===>handleCopySelect===>",event);
       handleClipboard(this.currentSelectStr, event)
       this.contextVisible=false;
     },
-    handleCopyRow(){
+    handleSelectCurrentRow(){
 
     },
-    handleCopyColumn(){
+    setHeaderSortable(){
+      let that=this;
+      this.$nextTick(function () {
+        const wrapperTr = document.querySelector('#'+that.tableId+' .el-table__header-wrapper > table > thead > tr');
+            // console.log("===>wrapperTr==>",wrapperTr);
+            Sortable.create(wrapperTr, {
+              animation: 100,
+              delay: 50,
+              dragClass: "dragClass",
+              ghostClass: "ghostClass",
+              chosenClass: "chosenClass",
+              onStart: () => {
+              },
+              // 结束拖动事件
+              onEnd: ({ newIndex, oldIndex }) => {
+                let arr = that.storageList;
+                const currCol = arr.splice(oldIndex-1, 1)[0];
+                arr.splice(newIndex-1, 0, currCol);
+
+                that.storageList = arr;
+                that.updateTable();
+                  // this.refreshKeyId=Math.random().toString(36).substring(3,10);
+
+
+                // const currCol = vnode.context.storageList.splice(oldIndex-1, 1)[0];
+                // vnode.context.storageList.splice(newIndex-1, 0, currCol);
+                // vnode.context.updateTable();
+              },
+
+        });
+      })
+    },
+    handleSelectCurrentColumn(){
 
     },
     // 定义方法 isEqual 来比较两个选中数据对象是否相同
@@ -1033,6 +1032,8 @@ export default {
         storage[this.saveStorageName] = this.storageList
         window.localStorage.setItem('tableStorage', JSON.stringify(storage))
       }
+
+      // this.setHeaderSortable();
     },
 
   }
@@ -1115,6 +1116,24 @@ export default {
 		user-select: none;
 }
 
+.el-table__body tr.current-row>td {
+        background: #453878 !important;
+}
+
+
+// 拖拽
+.dragClass {
+  background: rgba($color: #41c21a, $alpha: 0.5) !important;
+}
+// 停靠
+.ghostClass {
+  background: rgba($color: #6cacf5, $alpha: 0.5) !important;
+}
+// 选择
+.chosenClass:hover > td {
+  background: rgba($color: #f56c6c, $alpha: 0.5) !important;
+}
+
 </style>
 
 

src/views/emis/emisWaybill/batchWaybillRecord.vue

@@ -503,6 +503,7 @@ export default {
                 operateEmployeeCode: element['取件员/操作员'],
                 remark:  element['录单备注'],
                 blMessage:  element['寄件/签收短信'],
+                realValue: element['货值'],
 
                 uploadStatus: 0,
                 errorInfo:'',