diff --git a/src/components/XdTable/index.vue b/src/components/XdTable/index.vue index c5571a00..f143d27c 100644 --- a/src/components/XdTable/index.vue +++ b/src/components/XdTable/index.vue @@ -95,9 +95,9 @@ -
+
- + @@ -270,15 +270,18 @@ export default { // 鼠标按下事件 tbBodyDiv.onmousedown = function (ev) { - console.log('===tbBodyDiv.onmousedown===>') var evt = window.event || arguments[0]; var flag = true; + // 鼠标右键菜单，并且记录当前位置 if(evt.button == 2){ flag=false; - if(vnode.context.multipleSelection&&vnode.context.multipleSelection.length>0) + if( + vnode.context.multipleSelection + &&vnode.context.multipleSelection.length>0 + && vnode.context.mouseInScope + ) { - // 记住当前单元格位置 vnode.context.currentOdiv=oDiv; vnode.context.currentCell=evt.target; @@ -286,20 +289,21 @@ export default { const currentCellInfo=getCellPosition(evt.target); vnode.context.currentCellInfo=currentCellInfo; - // 显示右键菜单 - showContextMenu(evt); + // 绑定右键菜单 + bindRightContextMenu(evt); } return; } + // 清除已有选择 let selNodes=document.querySelectorAll(".seled"); if(selNodes!=null&&selNodes.length>0){ for (var i = 0; i < selNodes.length; i++) { selNodes[i].classList.remove("seled") } } - + vnode.context.contextVisible=false; // 增加图层 var xdTableObj = document.getElementById(vnode.context.tableId); @@ -333,41 +337,47 @@ export default { vnode.context.clearEventBubble(evt); // //打开开关 vnode.context.mouseflag = true; + const tbBodyDivRect = tbBodyDiv.getBoundingClientRect(); // //鼠标拖动时画框 document.onmousemove = function (ev) { - - const tbBodyDivRect = tbBodyDiv.getBoundingClientRect(); - console.log("===document.onmousemove==>",ev,tbBodyDivRect); - evt = window.event || arguments[0]; _x = (evt.x || evt.clientX); _y = (evt.y || evt.clientY); - //为了确定是点击事件还是移动事件 - if(_x(tbBodyDivRect.x+tbBodyDivRect.width) + || _y(tbBodyDivRect.y+tbBodyDivRect.height) + ){ + vnode.context.isTableFocused=false; + vnode.context.mouseInScope=false; + // cancelRightContextMenu(); + return; + } + // if(!tbBodyDiv.contains(document.activeElement)){ + // vnode.context.isTableFocused=false; + // vnode.context.mouseInScope=false; + // return; + // } + vnode.context.isTableFocused=true; + vnode.context.mouseInScope=true; if(Math.abs(_x - startX)<5 && Math.abs(_y - startY)<5){ // setMouseCellSelect(evt.target); // setMouseRowSelect(evt.target); return; } - if(flag){ + // + if(flag&&vnode.context.mouseflag){ vnode.context.multipleSelection=[]; // console.log("===fileNodes.length==>",fileNodes.length); // 只选取范围内的数据 for (var i = 0; i < fileNodes.length; i++) { - // console.log("===fileNodes==>",i); if (fileNodes[i].className.indexOf("el-table__cell") != -1) { fileNodes[i].classList.remove("seled"); + // console.log("===selList.length==>",selList.length); selList.push(fileNodes[i]); } } @@ -455,28 +465,14 @@ export default { vnode.context.clearEventBubble(evt); }; - function showContextMenu(event){ + function bindRightContextMenu(evt){ var xdTableObj = document.getElementById(vnode.context.tableId); - xdTableObj.addEventListener("contextmenu", function(event) { - - vnode.context.clearEventBubble(event) - - var menu = xdTableObj.querySelector("#contextMenu"); - // console.log("====>xdTableObj====>",xdTableObj); - // console.log("====>menu====>",menu); - - let tbPosRect=getTablePosition(xdTableObj); - menu.style.left = (event.clientX-tbPosRect.left+5) + "px"; - menu.style.top = (event.clientY-tbPosRect.top-35) + "px"; - menu.style.display = "block"; - menu.style.zIndex = 3000; - vnode.context.contextVisible=true; - event.preventDefault(); - }); - + xdTableObj.addEventListener("contextmenu", vnode.context.handleOnContextMenu); } - function cancelContextMenu() { - document.oncontextmenu = new Function("event.returnValue=true"); + function cancelRightContextMenu() { + var xdTableObj = document.getElementById(vnode.context.tableId); + xdTableObj.removeEventListener('contextmenu',vnode.context.handleOnContextMenu) + // document.oncontextmenu = new Function("event.returnValue=true"); } // 获取el-table元素的位置信息 function getTablePosition(tbDom) { @@ -515,10 +511,13 @@ export default { } else{ cell.className = cell.className + " seled"; + vnode.context.mouseInScope=true; } const cellInfo=getCellPosition(cell); vnode.context.multipleSelection=[]; vnode.context.multipleSelection.push(cellInfo); + + // 行样式设置 // const refTableObj=vnode.context.getInstance(); @@ -611,6 +610,8 @@ export default { //指令中确定的时候是鼠标按下事件 mouseflag: false, + // 鼠标位置在表格区域内 + mouseInScope: false, //选中的数组 multipleSelection: [], multipleRowSelection:[], @@ -676,17 +677,19 @@ export default { }, }, mounted() { - // console.log("===>xdtabe mounted==111->"); if(this.saveStorageName&&this.saveStorageName!=undefined&&this.saveStorageName!=''){ this.isNeedDbSaveTpl=true; }else{ this.fullUrl=window.location.origin + window.location.pathname + window.location.search + window.location.hash; this.pageId=this.MD5(this.fullUrl); this.saveStorageName=this.pageId; - // // console.log("===> this.fullUrl==>", this.fullUrl,this.saveStorageName) this.isNeedDbSaveTpl=false; } + // 监听全局焦点变化事件 + // document.addEventListener('focusin', this.handleGlobalFocusIn); + // document.addEventListener('focusout', this.handleGlobalFocusOut); + this.initKeyDownEvent(); // 初始化默认模版到本地 this.initDefaultTplList(); @@ -694,9 +697,6 @@ export default { this.updateTable() this.tableDom=this.getTableDom(); - // 监听 ctrl+c键盘事件 - let that=this; - }, beforeDestroy () { document.removeEventListener('keydown', this.handleGlobalKeydown) @@ -709,25 +709,52 @@ export default { return Math.random().toString(36).substring(3,10); }, + // 处理全局焦点进入事件 + handleGlobalFocusIn(event) { + // var tableEl = document.getElementById(this.tableId); + // const hasFocus = tableEl.contains(event.target); + // console.log("===>hasFocus===>",hasFocus,tableEl,event.target); + // 表格获得焦点 + // if (hasFocus && !this.isTableFocused) { + // this.tableHasFocus = true; + // this.$message({ + // message: '表格已获得焦点', + // type: 'success', + // duration: 1500 + // }); + // } + }, + + handleXdTableBlur(){ + this.isTableFocused=false; + console.log("===>handleXdTableBlur===>",this.isTableFocused); + }, + // 全局键盘事件处理 handleGlobalKeydown(event) { - // console.log("===>handleGlobalKeydown===>",event) - // 检查是否按下了Ctrl+C组合键 + event = event||window.event; if ((event.ctrlKey || event.metaKey) && event.key === 'c') { // 如果焦点在表格内，处理复制操作 if (this.isTableFocused) { event.preventDefault(); this.handleCopySelect(); - // e = e||window.event; - // if(e.ctrlKey&&e.code=="KeyC"){ - // that.handleCopySelect(e); - // return false; - // } } } }, - + handleOnContextMenu(event){ + // vnode.context.clearEventBubble(event) + var xdTableObj = document.getElementById(this.tableId); + this.clearEventBubble(event) + var menu = xdTableObj.querySelector("#contextMenu"); + let tbPosRect=this.getTablePosition(xdTableObj); + menu.style.left = (event.clientX-tbPosRect.left+5) + "px"; + menu.style.top = (event.clientY-tbPosRect.top-35) + "px"; + menu.style.display = "block"; + menu.style.zIndex = 3000; + this.contextVisible=true; + event.preventDefault(); + }, clearSelection(){ this.$nextTick(()=>{ this.$refs.table.$refs.elTable.clearSelection(); @@ -735,11 +762,9 @@ export default { }, initKeyDownEvent(){ - // console.log('===initKeyDownEvent===>') document.addEventListener('keydown', this.handleGlobalKeydown ); }, removeKeyDownEvent(){ - // console.log('===removeKeyDownEvent===>') document.removeEventListener('keydown', this.handleGlobalKeydown ); }, @@ -939,12 +964,7 @@ export default { }); selStr=this.trimTabChar(selStr,'\t',''); // 去除两端空格 - this.currentSelectStr=selStr; - this.isTableFocused=true; - - }else{ - this.isTableFocused=false; } // this.$emit('handleSelect',this.multipleSelection) @@ -1270,8 +1290,6 @@ export default { } } list=list2; - // console.log("===>list=1111=>",list); - this.storageList = list }, // 根据缓存的数组进行渲染表格 diff --git a/src/views/emis/emisCustomerUser/moneyUserList.vue b/src/views/emis/emisCustomerUser/moneyUserList.vue index f9ce4c43..7e86c029 100644 --- a/src/views/emis/emisCustomerUser/moneyUserList.vue +++ b/src/views/emis/emisCustomerUser/moneyUserList.vue @@ -240,11 +240,13 @@ import EmisUserSimplePicker2 from '@/views/emis/EmisBaseTools/EmisUserSimplePick import EmpNamePicker1 from '@/views/emis/EmisBaseTools/EmpNamePicker.vue'; import EmpNamePicker2 from '@/views/emis/EmisBaseTools/EmpNamePicker.vue'; +import XdTable3 from '@/components/XdTable/index3.vue'; + export default { name: "MoneyUserList", components: {AirTable, EmpNamePicker1,EmpNamePicker2,elDateSimplePicker,moneyUserForm ,CountryPicker, EmisSiteSimplePicker,ProvincePicker,CityPicker, - EmisUserSimplePicker0,EmisUserSimplePicker1,EmisUserSimplePicker2 + EmisUserSimplePicker0,EmisUserSimplePicker1,EmisUserSimplePicker2,XdTable3 }, dicts: [ ],