aike/emis-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

md

Browse Source
This commit is contained in:
linfso 2025-07-07 10:07:52 +08:00
parent f914164aee
commit 8845e27acd
2 changed files with 85 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
src/components/XdTable/index.vue
View File

@ -95,9 +95,9 @@
</slot> </slot>
</div> </div>
<!-- @mouseenter="initKeyDownEvent" @mouseleave="removeKeyDownEvent" --> <!-- @mouseenter="initKeyDownEvent" @mouseleave="removeKeyDownEvent" -->
<div > <div @blur="handleXdTableBlur" >
<!-- <div class="flex-auto"> --> <!-- <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> --> <!-- </div> -->
<!-- 统计数据 v-dragColumn v-dragSelect--> <!-- 统计数据 v-dragColumn v-dragSelect-->
@ -270,15 +270,18 @@ export default {
// 鼠标按下事件 // 鼠标按下事件
tbBodyDiv.onmousedown = function (ev) { tbBodyDiv.onmousedown = function (ev) {
console.log('===tbBodyDiv.onmousedown===>')
var evt = window.event || arguments[0]; var evt = window.event || arguments[0];
var flag = true; var flag = true;
// 鼠标右键菜单，并且记录当前位置 // 鼠标右键菜单，并且记录当前位置
if(evt.button == 2){ if(evt.button == 2){
flag=false; 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.currentOdiv=oDiv;
vnode.context.currentCell=evt.target; vnode.context.currentCell=evt.target;
@ -286,13 +289,14 @@ export default {
const currentCellInfo=getCellPosition(evt.target); const currentCellInfo=getCellPosition(evt.target);
vnode.context.currentCellInfo=currentCellInfo; vnode.context.currentCellInfo=currentCellInfo;
// 显示右键菜单 // 绑定右键菜单
showContextMenu(evt); bindRightContextMenu(evt);
} }
return; return;
} }
// 清除已有选择
let selNodes=document.querySelectorAll(".seled"); let selNodes=document.querySelectorAll(".seled");
if(selNodes!=null&&selNodes.length>0){ if(selNodes!=null&&selNodes.length>0){
for (var i = 0; i < selNodes.length; i++) { for (var i = 0; i < selNodes.length; i++) {
@ -333,41 +337,47 @@ export default {
vnode.context.clearEventBubble(evt); vnode.context.clearEventBubble(evt);
// //打开开关 // //打开开关
vnode.context.mouseflag = true; vnode.context.mouseflag = true;
const tbBodyDivRect = tbBodyDiv.getBoundingClientRect();
// //鼠标拖动时画框 // //鼠标拖动时画框
document.onmousemove = function (ev) { document.onmousemove = function (ev) {
const tbBodyDivRect = tbBodyDiv.getBoundingClientRect();
console.log("===document.onmousemove==>",ev,tbBodyDivRect);
evt = window.event || arguments[0]; evt = window.event || arguments[0];
_x = (evt.x || evt.clientX); _x = (evt.x || evt.clientX);
_y = (evt.y || evt.clientY); _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){ if(Math.abs(_x - startX)<5 && Math.abs(_y - startY)<5){
// setMouseCellSelect(evt.target); // setMouseCellSelect(evt.target);
// setMouseRowSelect(evt.target); // setMouseRowSelect(evt.target);
return; return;
} }
if(flag){ //
if(flag&&vnode.context.mouseflag){
vnode.context.multipleSelection=[]; vnode.context.multipleSelection=[];
// console.log("===fileNodes.length==>",fileNodes.length); // console.log("===fileNodes.length==>",fileNodes.length);
// 只选取范围内的数据 // 只选取范围内的数据
for (var i = 0; i < fileNodes.length; i++) { for (var i = 0; i < fileNodes.length; i++) {
// console.log("===fileNodes==>",i);
if (fileNodes[i].className.indexOf("el-table__cell") != -1) { if (fileNodes[i].className.indexOf("el-table__cell") != -1) {
fileNodes[i].classList.remove("seled"); fileNodes[i].classList.remove("seled");
// console.log("===selList.length==>",selList.length);
selList.push(fileNodes[i]); selList.push(fileNodes[i]);
} }
} }
@ -455,28 +465,14 @@ export default {
vnode.context.clearEventBubble(evt); vnode.context.clearEventBubble(evt);
}; };
function showContextMenu(event){ function bindRightContextMenu(evt){
var xdTableObj = document.getElementById(vnode.context.tableId); var xdTableObj = document.getElementById(vnode.context.tableId);
xdTableObj.addEventListener("contextmenu", function(event) { xdTableObj.addEventListener("contextmenu", vnode.context.handleOnContextMenu);
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();
});
} }
function cancelContextMenu() { function cancelRightContextMenu() {
document.oncontextmenu = new Function("event.returnValue=true"); var xdTableObj = document.getElementById(vnode.context.tableId);
xdTableObj.removeEventListener('contextmenu',vnode.context.handleOnContextMenu)
// document.oncontextmenu = new Function("event.returnValue=true");
} }
// 获取el-table元素的位置信息 // 获取el-table元素的位置信息
function getTablePosition(tbDom) { function getTablePosition(tbDom) {
@ -515,11 +511,14 @@ export default {
} }
else{ else{
cell.className = cell.className + " seled"; cell.className = cell.className + " seled";
vnode.context.mouseInScope=true;
} }
const cellInfo=getCellPosition(cell); const cellInfo=getCellPosition(cell);
vnode.context.multipleSelection=[]; vnode.context.multipleSelection=[];
vnode.context.multipleSelection.push(cellInfo); vnode.context.multipleSelection.push(cellInfo);
// 行样式设置 // 行样式设置
// const refTableObj=vnode.context.getInstance(); // const refTableObj=vnode.context.getInstance();
// let rowIndex = cell.rowIndex; // let rowIndex = cell.rowIndex;
@ -611,6 +610,8 @@ export default {
//指令中确定的时候是鼠标按下事件 //指令中确定的时候是鼠标按下事件
mouseflag: false, mouseflag: false,
// 鼠标位置在表格区域内
mouseInScope: false,
//选中的数组 //选中的数组
multipleSelection: [], multipleSelection: [],
multipleRowSelection:[], multipleRowSelection:[],
@ -676,17 +677,19 @@ export default {
}, },
}, },
mounted() { mounted() {
// console.log("===>xdtabe mounted==111->");
if(this.saveStorageName&&this.saveStorageName!=undefined&&this.saveStorageName!=''){ if(this.saveStorageName&&this.saveStorageName!=undefined&&this.saveStorageName!=''){
this.isNeedDbSaveTpl=true; this.isNeedDbSaveTpl=true;
}else{ }else{
this.fullUrl=window.location.origin + window.location.pathname + window.location.search + window.location.hash; this.fullUrl=window.location.origin + window.location.pathname + window.location.search + window.location.hash;
this.pageId=this.MD5(this.fullUrl); this.pageId=this.MD5(this.fullUrl);
this.saveStorageName=this.pageId; this.saveStorageName=this.pageId;
// // console.log("===> this.fullUrl==>", this.fullUrl,this.saveStorageName)
this.isNeedDbSaveTpl=false; this.isNeedDbSaveTpl=false;
} }
// 监听全局焦点变化事件
// document.addEventListener('focusin', this.handleGlobalFocusIn);
// document.addEventListener('focusout', this.handleGlobalFocusOut);
this.initKeyDownEvent(); this.initKeyDownEvent();
// 初始化默认模版到本地 // 初始化默认模版到本地
this.initDefaultTplList(); this.initDefaultTplList();
@ -694,9 +697,6 @@ export default {
this.updateTable() this.updateTable()
this.tableDom=this.getTableDom(); this.tableDom=this.getTableDom();
// 监听 ctrl+c键盘事件
let that=this;
}, },
beforeDestroy () { beforeDestroy () {
document.removeEventListener('keydown', this.handleGlobalKeydown) document.removeEventListener('keydown', this.handleGlobalKeydown)
@ -709,25 +709,52 @@ export default {
return Math.random().toString(36).substring(3,10); 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) { handleGlobalKeydown(event) {
// console.log("===>handleGlobalKeydown===>",event)
// 检查是否按下了Ctrl+C组合键 // 检查是否按下了Ctrl+C组合键
event = event||window.event;
if ((event.ctrlKey || event.metaKey) && event.key === 'c') { if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
// 如果焦点在表格内，处理复制操作 // 如果焦点在表格内，处理复制操作
if (this.isTableFocused) { if (this.isTableFocused) {
event.preventDefault(); event.preventDefault();
this.handleCopySelect(); 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(){ clearSelection(){
this.$nextTick(()=>{ this.$nextTick(()=>{
this.$refs.table.$refs.elTable.clearSelection(); this.$refs.table.$refs.elTable.clearSelection();
@ -735,11 +762,9 @@ export default {
}, },
initKeyDownEvent(){ initKeyDownEvent(){
// console.log('===initKeyDownEvent===>')
document.addEventListener('keydown', this.handleGlobalKeydown ); document.addEventListener('keydown', this.handleGlobalKeydown );
}, },
removeKeyDownEvent(){ removeKeyDownEvent(){
// console.log('===removeKeyDownEvent===>')
document.removeEventListener('keydown', this.handleGlobalKeydown ); document.removeEventListener('keydown', this.handleGlobalKeydown );
}, },
@ -939,12 +964,7 @@ export default {
}); });
selStr=this.trimTabChar(selStr,'\t',''); selStr=this.trimTabChar(selStr,'\t','');
// 去除两端空格 // 去除两端空格
this.currentSelectStr=selStr; this.currentSelectStr=selStr;
this.isTableFocused=true;
}else{
this.isTableFocused=false;
} }
// this.$emit('handleSelect',this.multipleSelection) // this.$emit('handleSelect',this.multipleSelection)
@ -1270,8 +1290,6 @@ export default {
} }
} }
list=list2; list=list2;
// console.log("===>list=1111=>",list);
this.storageList = list this.storageList = list
}, },
// 根据缓存的数组进行渲染表格 // 根据缓存的数组进行渲染表格

4
src/views/emis/emisCustomerUser/moneyUserList.vue
View File

@ -240,11 +240,13 @@ import EmisUserSimplePicker2 from '@/views/emis/EmisBaseTools/EmisUserSimplePick
import EmpNamePicker1 from '@/views/emis/EmisBaseTools/EmpNamePicker.vue'; import EmpNamePicker1 from '@/views/emis/EmisBaseTools/EmpNamePicker.vue';
import EmpNamePicker2 from '@/views/emis/EmisBaseTools/EmpNamePicker.vue'; import EmpNamePicker2 from '@/views/emis/EmisBaseTools/EmpNamePicker.vue';
import XdTable3 from '@/components/XdTable/index3.vue';
export default { export default {
name: "MoneyUserList", name: "MoneyUserList",
components: {AirTable, EmpNamePicker1,EmpNamePicker2,elDateSimplePicker,moneyUserForm ,CountryPicker, components: {AirTable, EmpNamePicker1,EmpNamePicker2,elDateSimplePicker,moneyUserForm ,CountryPicker,
EmisSiteSimplePicker,ProvincePicker,CityPicker, EmisSiteSimplePicker,ProvincePicker,CityPicker,
EmisUserSimplePicker0,EmisUserSimplePicker1,EmisUserSimplePicker2 EmisUserSimplePicker0,EmisUserSimplePicker1,EmisUserSimplePicker2,XdTable3
}, },
dicts: [ dicts: [
], ],