From ef5f6d30419d981cd2ebeb836163ac5c5327efda Mon Sep 17 00:00:00 2001 From: linfso Date: Wed, 3 Jul 2024 06:32:03 +0800 Subject: [PATCH] md --- src/components/XdTable/index.vue | 125 ++++++++++-------- .../emis/emisWaybill/batchWaybillRecord.vue | 1 + 2 files changed, 73 insertions(+), 53 deletions(-) diff --git a/src/components/XdTable/index.vue b/src/components/XdTable/index.vue index e7a439cd..de31ec16 100644 --- a/src/components/XdTable/index.vue +++ b/src/components/XdTable/index.vue @@ -111,7 +111,7 @@
- + -
  • 复制
    • +
  • 复制
    • @@ -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; +} + diff --git a/src/views/emis/emisWaybill/batchWaybillRecord.vue b/src/views/emis/emisWaybill/batchWaybillRecord.vue index ac8381d1..6f18a8dc 100644 --- a/src/views/emis/emisWaybill/batchWaybillRecord.vue +++ b/src/views/emis/emisWaybill/batchWaybillRecord.vue @@ -503,6 +503,7 @@ export default { operateEmployeeCode: element['取件员/操作员'], remark: element['录单备注'], blMessage: element['寄件/签收短信'], + realValue: element['货值'], uploadStatus: 0, errorInfo:'',