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 14:08:09 +08:00
parent 5e90851927
commit 76feb660c1
2 changed files with 225 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -94,13 +94,11 @@
</div>
</slot>
</div>
<!-- @mouseenter="initKeyDownEvent" @mouseleave="removeKeyDownEvent" -->
<div @blur="handleXdTableBlur" >
<div @mouseenter="initKeyDownEvent" @mouseleave="removeKeyDownEvent">
<!-- <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="-1" :config="config" v-dragSelect class="xd-tb-wrapper" />
<!-- </div> -->
<!-- 统计数据 v-dragColumn v-dragSelect-->
<!-- <div class="flex-none"> -->
<div v-if="showStatInfo" style="display: inline-flex; width: 100%;">
<div style="width:40%" >
@ -268,6 +266,11 @@ export default {
var oDiv = el;
var tbBodyDiv=oDiv.getElementsByClassName("el-table__body-wrapper")[0];
var startCell=null;
var endCell=null;
var selectedCells=[];
var selDiv=null;
// 鼠标按下事件
tbBodyDiv.onmousedown = function (ev) {
var evt = window.event || arguments[0];
@ -288,10 +291,6 @@ export default {
const currentCellInfo=getCellPosition(evt.target);
vnode.context.currentCellInfo=currentCellInfo;
// 绑定右键菜单
bindRightContextMenu(evt);
}
return;
}
@ -303,16 +302,26 @@ export default {
selNodes[i].classList.remove("seled")
}
}
// 清除粘贴板
vnode.context.clearBatchSelect();
// 获取鼠标按下的单元格
const cell = evt.target.closest('td');
if (!cell || cell.classList.contains('el-table__expanded-cell')) return;
// 获取单元格位置信息
const cellInfo = getCellInfo(cell);
if (!cellInfo) return;
startCell = cellInfo;
// console.log("===>startCell===>",startCell);
vnode.context.contextVisible=false;
// 增加图层
var xdTableObj = document.getElementById(vnode.context.tableId);
var tbBody1=xdTableObj.getElementsByClassName("el-table__body-wrapper")[0];
// 增加图层
var selDiv = document.createElement("div");
selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:2px solid #409eff;background-color:#d9ecff;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
selDiv.id = "selectDiv-"+vnode.context.tableId;
tbBody1.appendChild(selDiv);
tbBodyDiv.appendChild(selDiv);
// 表格对象
const refTableObj=vnode.context.getInstance();
@ -350,15 +359,9 @@ export default {
){
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;
@ -367,7 +370,20 @@ export default {
// setMouseRowSelect(evt.target);
return;
}
//
// 获取鼠标当前所在的单元格
const cell = evt.target.closest('td');
if (!cell || cell.classList.contains('el-table__expanded-cell')) return;
// 获取单元格位置信息
const cellInfo = getCellInfo(cell);
if (!cellInfo) return;
// 记录结束单元格
endCell = cellInfo;
// console.log("===>startCell==endCell=>",startCell,endCell);
// updateSelectionRange();
if(flag&&vnode.context.mouseflag){
vnode.context.multipleSelection=[];
@ -402,7 +418,6 @@ export default {
var tbBody2=oDiv.getElementsByClassName("el-table__body-wrapper")[0];
var tbHeader2=oDiv.getElementsByClassName("el-table__header-wrapper")[0];
selDiv.style.left = Math.min(_x, startX)-tbPosRect2.left+tbBody2.scrollLeft + "px";
//表头的高度
selDiv.style.top = Math.min(_y, startY)-tbPosRect2.top - tbHeader2.offsetHeight+tbBody2.scrollTop+ "px";
@ -465,15 +480,6 @@ export default {
vnode.context.clearEventBubble(evt);
};
function bindRightContextMenu(evt){
var xdTableObj = document.getElementById(vnode.context.tableId);
xdTableObj.addEventListener("contextmenu", vnode.context.handleOnContextMenu);
}
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) {
const tableRect = tbDom.getBoundingClientRect();
@ -494,6 +500,136 @@ export default {
}
}
// 获取单元格信息 ------------------
function getCellInfo(cell) {
if (!cell) return null;
// 获取行索引（排除表头）
const row = Array.from(cell.closest('tbody').children).indexOf(cell.parentElement);
if (row === -1) return null;
// 获取列索引
const column = Array.from(cell.parentElement.children).indexOf(cell);
if (column === -1) return null;
// 获取单元格内容
const content = cell.textContent.trim();
// 获取对应的属性名
// const table = vnode.context.$refs.table;
// const columnProperty = table.columns[column].property;
return { row:row, col:column, text:content,element: cell };
}
// 根据行列位置获取单元格元素
function getCellByPosition(rowIndex, columnIndex) {
// const table = vnode.context.$refs.table.elTable;
// const table=vnode.context.$refs.table.$refs.elTable;
// const rows = table.$el.querySelectorAll('tbody tr');
// console.log("===>tbBodyDiv===>",tbBodyDiv);
const rows = tbBodyDiv.querySelectorAll('tr');
if (rowIndex >= 0 && rowIndex < rows.length) {
const row = rows[rowIndex];
const cells = row.querySelectorAll('td');
if (columnIndex >= 0 && columnIndex < cells.length) {
return cells[columnIndex];
}
}
return null;
}
// 更新选择范围
function updateSelectionRange(finalize = false) {
if (!startCell || !endCell) return;
// 计算选择范围
const startRow = Math.min(startCell.row, endCell.row);
const endRow = Math.max(startCell.row, endCell.row);
const startColumn = Math.min(startCell.column, endCell.column);
const endColumn = Math.max(startCell.column, endCell.column);
if (finalize) {
// 最终确定选择范围
clearSelection();
// 选择范围内的所有单元格
for (let row = startRow; row <= endRow; row++) {
for (let col = startColumn; col <= endColumn; col++) {
const cell = getCellByPosition(row, col);
if (cell) {
const cellInfo = getCellInfo(cell);
selectCell(cellInfo);
}
}
}
} else {
// 实时显示选择范围指示器
const startCell = getCellByPosition(startRow, startColumn);
const endCell = getCellByPosition(endRow, endColumn);
if (startCell && endCell) {
const startRect = startCell.getBoundingClientRect();
const endRect = endCell.getBoundingClientRect();
const tableDom=vnode.context.$refs.table.$refs.elTable.$el;
const tableRect = tableDom.getBoundingClientRect();
// console.log("====>updateSelectionRange===>",tableRect,tableDom)
selDiv.style.left = `${startRect.left - tableRect.left}px`;
selDiv.style.top = `${startRect.top - tableRect.top}px`;
selDiv.style.width = `${endRect.right - startRect.left}px`;
selDiv.style.height = `${endRect.bottom - startRect.top}px`;
selDiv.style.display = 'block';
}
}
}
// 检查单元格是否已选中
function isCellSelected(cellInfo) {
if (!cellInfo) return false;
return selectedCells.some(cell =>
cell.row === cellInfo.row && cell.column === cellInfo.column
);
}
// 清除所有选择
function clearSelection() {
// 移除所有选中样式
selectedCells.forEach(cell => {
if (cell.element) {
cell.element.classList.remove('seled');
}
});
// 清空选中列表
selectedCells = [];
// 重置起始和结束单元格
startCell = null;
endCell = null;
}
// 选择单元格
function selectCell(cellInfo) {
if (!cellInfo || isCellSelected(cellInfo)) return;
// 添加到选中列表
selectedCells.push(cellInfo);
// console.log("===>selectedCells===>",selectedCells);
// 添加选中样式
if (cellInfo.element) {
cellInfo.element.classList.add('seled');
}
}
function setMouseCellSelect(cell,selRowList) {
try{
while(cell.tagName !== 'TD'){
@ -547,6 +683,12 @@ export default {
}
//在鼠标抬起后做的重置
document.onmouseup = function () {
// 如果有结束单元格，更新选择范围
// if (endCell) {
// updateSelectionRange(true);
// }
//把鼠标移动事初始化
// document.onmousemove=null;
var xdTableObj = document.getElementById(vnode.context.tableId);
@ -686,11 +828,6 @@ export default {
this.isNeedDbSaveTpl=false;
}
// 监听全局焦点变化事件
// document.addEventListener('focusin', this.handleGlobalFocusIn);
// document.addEventListener('focusout', this.handleGlobalFocusOut);
this.initKeyDownEvent();
// 初始化默认模版到本地
this.initDefaultTplList();
this.initStorage()
@ -708,28 +845,6 @@ export default {
getUUID() {
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) {
// 检查是否按下了Ctrl+C组合键
@ -742,18 +857,21 @@ export default {
}
}
},
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();
if(this.isTableFocused){
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(()=>{
@ -763,9 +881,15 @@ export default {
initKeyDownEvent(){
document.addEventListener('keydown', this.handleGlobalKeydown );
var xdTableObj = document.getElementById(this.tableId);
xdTableObj.addEventListener("contextmenu", this.handleOnContextMenu);
},
removeKeyDownEvent(){
document.removeEventListener('keydown', this.handleGlobalKeydown );
var xdTableObj = document.getElementById(this.tableId);
xdTableObj.removeEventListener("contextmenu", this.handleOnContextMenu);
},
onTplSelectInputBlur(e) {
@ -929,6 +1053,11 @@ export default {
}
return params;
},
clearBatchSelect(){
this.multipleSelection=[];
this.currentSelectStr=null;
this.clearClipboard();
},
// 鼠标框选----------
//当批量选中结束调用
handleBatchSelect(){
@ -988,14 +1117,15 @@ export default {
handleCopySelect(event) {
this.contextVisible=false;
if(this.currentSelectStr){
let cpStr=this.currentSelectStr;
if (navigator.clipboard && window.isSecureContext) {
// navigator clipboard 向剪贴板写文本
this.$modal.msgSuccess('复制成功')
return navigator.clipboard.writeText(this.currentSelectStr)
// navigator clipboard 向剪贴板写文本
this.$modal.msgSuccess('复制成功')
return navigator.clipboard.writeText(cpStr)
} else {
// 创建text area
const textArea = document.createElement('textarea')
textArea.value = this.currentSelectStr
textArea.value = cpStr
// 使text area不在viewport，同时设置不可见
document.body.appendChild(textArea)
textArea.focus()
@ -1009,6 +1139,27 @@ export default {
}
}
},
// 清除剪切板
clearClipboard() {
let cpStr='';
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(cpStr)
} else {
// 创建text area
const textArea = document.createElement('textarea')
textArea.value = cpStr
// 使text area不在viewport，同时设置不可见
document.body.appendChild(textArea)
textArea.focus()
textArea.select()
// this.$modal.msgSuccess('复制成功')
return new Promise((res, rej) => {
// 执行复制命令并移除文本框
document.execCommand('copy') ? res() : rej()
textArea.remove()
})
}
},
// 选择整行
handleSelectCurrentRow(evt){
this.contextVisible=false;
@ -1085,7 +1236,6 @@ export default {
let that=this;
this.$nextTick(function () {
const wrapperTr = document.querySelector('#'+that.tableId+' .el-table__header-wrapper > table > thead > tr');
// // console.log("===>wrapperTr==>",wrapperTr);
if(wrapperTr){
Sortable.create(wrapperTr, {
animation: 100,
@ -1103,7 +1253,7 @@ export default {
that.storageList = arr;
console.log("====>setHeaderSortable===>",that.storageList)
// console.log("====>setHeaderSortable===>",that.storageList)
this.storeTplToLocal(that.storageList)
this.initStorage()
this.updateTable()
@ -1314,6 +1464,7 @@ export default {
this.config.attrs = this.$attrs
this.config.listeners = this.$listeners;
// 通过key值触发表格刷新，避免拖拽由于数组长度一致导致diff算法无法识别
// this.config.key = Math.random() + ''
// 控制下表格重新刷新

3
src/components/XdTable/indexNew.vue
View File

@ -311,12 +311,11 @@ export default {
}
}
// 获取鼠标按下的单元格
// 获取鼠标按下的单元格
const cell = evt.target.closest('td');
if (!cell || cell.classList.contains('el-table__expanded-cell')) return;
// 获取单元格位置信息
const cellInfo = getCellInfo(cell);
if (!cellInfo) return;
startCell = cellInfo;