md
This commit is contained in:
linfso
parent
f914164aee
commit
8845e27acd
@ -95,9 +95,9 @@
|
||||
</slot>
|
||||
</div>
|
||||
<!-- @mouseenter="initKeyDownEvent" @mouseleave="removeKeyDownEvent" -->
|
||||
<div >
|
||||
<div @blur="handleXdTableBlur" >
|
||||
<!-- <div class="flex-auto"> -->
|
||||
<orig-table ref="table" :key="refreshKeyId" tabindex="0" :config="config" v-dragSelect class="xd-tb-wrapper" />
|
||||
<orig-table ref="table" :key="refreshKeyId" tabindex="0" :config="config" v-dragSelect class="xd-tb-wrapper" />
|
||||
<!-- </div> -->
|
||||
<!-- 统计数据 v-dragColumn v-dragSelect-->
|
||||
|
||||
@ -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 || _y<tbBodyDivRect.y){
|
||||
console.log("no scope");
|
||||
vnode.context.isTableFocused=false;
|
||||
return;
|
||||
}
|
||||
|
||||
vnode.context.isTableFocused=true;
|
||||
console.log("in scope");
|
||||
//过滤在范围外的事件
|
||||
if(_x<tbBodyDivRect.x || _x>(tbBodyDivRect.x+tbBodyDivRect.width)
|
||||
|| _y<tbBodyDivRect.y || _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
|
||||
},
|
||||
// 根据缓存的数组进行渲染表格
|
||||
|
||||
@ -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: [
|
||||
],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user