From 1c13bd7a2cd2c8ba69a185da69344c8b59f4e561 Mon Sep 17 00:00:00 2001
From: guoyuji <guoyujie@ng.com>
Date: 星期四, 04 七月 2024 09:29:15 +0800
Subject: [PATCH] 选中求和功能以及还原双击回车才能点击单元格
---
north-glass-erp/northglass-erp/src/hook/mouseMove.ts | 153 +++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 118 insertions(+), 35 deletions(-)
diff --git a/north-glass-erp/northglass-erp/src/hook/mouseMove.ts b/north-glass-erp/northglass-erp/src/hook/mouseMove.ts
index 7701139..b6ae1cb 100644
--- a/north-glass-erp/northglass-erp/src/hook/mouseMove.ts
+++ b/north-glass-erp/northglass-erp/src/hook/mouseMove.ts
@@ -11,7 +11,12 @@
//鑾峰彇椤甸潰ref鑺傜偣
//鑾峰彇vxetable琛ㄦ牸鑺傜偣
let xGrid = ref()
-let cellarea = ref()
+let cellarea = ref(`
+ <div class="vxe-table--cell-area" style="font-size: 10px;text-align: left" >
+ <span class="vxe-table--cell-main-area" ><p style="margin-left: 0.5rem;color: blue"></p></span>
+ <span class="vxe-table--cell-active-area" ></span>
+ </div>
+`)
let leftfixedcellarea = ref()
let rightfixedcellarea = ref()
const getTablexGrid = () => {
@@ -19,12 +24,21 @@
}
//娣诲姞浜嬩欢
-const addListener = (xGrids,gridOption,cellareas) => {
+const addListener = (xGrids,gridOption) => {
xGrid.value = xGrids
gridOptions = gridOption
- cellarea.value = cellareas
+ let newElement = document.createElement('div')
+ let leftElement = document.createElement('div')
+ const parser = new DOMParser();
+ const htmlDoc = parser.parseFromString(cellarea.value, 'text/html')
+ newElement.innerHTML = htmlDoc.body.innerHTML
+ leftElement.innerHTML = htmlDoc.body.innerHTML
+ //cellarea.value = newElement
//娣诲姞澶氶�夊垪
nextTick(() => {
+ window.addEventListener("keypress", ()=>{
+ destroyAreaBox()
+ })
window.addEventListener("mousedown", tableOutDestroyAreaBox)//缁檞indow娣诲姞榧犳爣鎸変笅浜嬩欢,鍒ゆ柇鏄惁鍦ㄨ〃鏍煎,鏄攢姣�
window.addEventListener("mouseup", tbodymouseup)//缁檞indow娣诲姞榧犳爣鏉惧紑浜嬩欢
let tbody = getTablexGrid().$el.querySelector(".vxe-table--main-wrapper table tbody")//鑾峰彇tbody鍖哄煙
@@ -39,14 +53,14 @@
let bodyWrapper = getTablexGrid().$el.querySelector(".vxe-table--main-wrapper .vxe-table--body-wrapper")//鑾峰彇姝ｅ父鍖哄煙鐨刡ody
if (bodyWrapper) {
//娉ㄦ剰杩欓噷鐨剅ef鍚嶇О锛岃繖閲屾槸闈瀎ixed鍖哄煙鐨勬鐨勫悕绉�
- bodyWrapper.appendChild(cellarea.value)//娣诲姞鑼冨洿妗嗗厓绱�
+ bodyWrapper.appendChild(newElement)//娣诲姞鑼冨洿妗嗗厓绱�
// let geticon = document.getElementById("getIcon")
// geticon.addEventListener("click", ()=>{
// alert(2)
// })
}
- /*setTimeout(() => {
+ setTimeout(() => {
//#region 宸︿晶鍥哄畾鍒�
let leftfixedtbody = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper table tbody")//鑾峰彇fixedtbody鍖哄煙
@@ -55,18 +69,18 @@
leftfixedtbody.addEventListener("mousemove", tbodymousemove)//缁欒〃鏍间腑鐨刲eftfixedtbody娣诲姞榧犳爣绉诲姩浜嬩欢
leftfixedtbody.addEventListener("mouseout", throttle(tbodymouseout, 50))//缁欒〃鏍间腑鐨刲eftfixedtbody娣诲姞榧犳爣绉诲嚭浜嬩欢
leftfixedtbody.addEventListener("click", tableCellClick)//娣诲姞鍗曞嚮浜嬩欢
- leftfixedtbody.oncontextmenu = tableCellMenuClick//娣诲姞鍙抽敭鑿滃崟浜嬩欢
+ //leftfixedtbody.oncontextmenu = tableCellMenuClick//娣诲姞鍙抽敭鑿滃崟浜嬩欢
}
let leftFixedBodyWrapper = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper")
if (leftFixedBodyWrapper) {
//娉ㄦ剰杩欓噷鐨剅ef鍚嶇О锛岃繖閲屾槸fixed鍖哄煙鐨勬鐨勫悕绉�
- leftFixedBodyWrapper.appendChild(leftfixedcellarea.value)
+ leftFixedBodyWrapper.appendChild(leftElement)
}
//#endregion
//#region 鍙充晶鍥哄畾鍒�
- let rightfixedtbody = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper table tbody")//鑾峰彇fixedtbody鍖哄煙
+ /* let rightfixedtbody = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper table tbody")//鑾峰彇fixedtbody鍖哄煙
if (rightfixedtbody) {
rightfixedtbody.addEventListener("mousedown", tbodymousedown)//缁欒〃鏍间腑鐨剅ightfixedtbody娣诲姞榧犳爣鎸変笅浜嬩欢
@@ -80,10 +94,10 @@
if (rightFixedBodyWrapper) {
//娉ㄦ剰杩欓噷鐨剅ef鍚嶇О锛岃繖閲屾槸fixed鍖哄煙鐨勬鐨勫悕绉�
rightFixedBodyWrapper.appendChild(rightfixedcellarea.value)
- }
+ }*/
//#endregion
- }, 100)*/
+ }, 100)
})
}
@@ -120,6 +134,18 @@
if (event.button === 0) {//宸﹂敭鏉惧紑
isSelecting.value = false//鏍囪涓哄仠姝㈤�夋嫨鎿嶄綔
}
+ const result = exportData()
+ let sum = 0
+ result.forEach((item,index) => {
+ if(index>0){
+ sum+=item.reduce((a, b) => a*1 + b*1, 0);
+ }
+ })
+ const activeElement = getTablexGrid().$el.querySelector(".vxe-table--main-wrapper .vxe-table--body-wrapper .vxe-table--cell-main-area p")
+ const element = xGrid.value.$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper .vxe-table--cell-main-area p")
+ sum=isNaN(sum)?0:sum
+ activeElement.innerHTML ="SUM:"+parseFloat(sum.toFixed(2))
+ element.innerHTML ="SUM:"+parseFloat(sum.toFixed(2))
}
let outevent = ref()//绉诲姩浜嬩欢,涓嶄繚瀛�,寰幆瀹氭椂鍣ㄥ唴鏃犳硶鐩戝惉鍒版柊鐨勪簨浠�
@@ -299,6 +325,7 @@
}
}
+
//琛ㄦ牸澶栭攢姣佽寖鍥存
const tableOutDestroyAreaBox = (event: MouseEvent) => {
var element = getTablexGrid().$el.querySelector(".vxe-table--render-wrapper")
@@ -309,6 +336,7 @@
destroyAreaBox()
}
}
+
}
@@ -390,17 +418,17 @@
// //杩欓噷闇�瑕佹槸visibleData
- // let tableData = getTablexGrid().getTableData().visibleData//鑾峰彇澶勭悊鏉′欢涔嬪悗鐨勫叏閲忚〃浣撴暟鎹�
- // let rowStart = selectionStart.rowIndex//鑾峰彇閫変腑璧峰琛岀储寮�
- // let rowEnd = selectionEnd.rowIndex//鑾峰彇閫変腑缁撴潫琛岀储寮�
- // let selectRows = tableData.filter((col, index: number) => {//col鍙傛暟涓嶈兘鏀瑰惁鍒欎細鑾峰彇涓嶅埌鏁版嵁
- // //杩欓噷淇敼浠庡彸涓嬪線宸︿笂鎷栧姩鐨勬暟鎹樉绀�
- // if (rowStart <= rowEnd) {
- // return rowStart <= index && rowEnd >= index
- // } else {
- // return rowStart >= index && rowEnd <= index
- // }
- // })
+ let tableData = getTablexGrid().getTableData().visibleData//鑾峰彇澶勭悊鏉′欢涔嬪悗鐨勫叏閲忚〃浣撴暟鎹�
+ let rowStart = selectionStart.rowIndex//鑾峰彇閫変腑璧峰琛岀储寮�
+ let rowEnd = selectionEnd.rowIndex//鑾峰彇閫変腑缁撴潫琛岀储寮�
+ let selectRows = tableData.filter((col, index: number) => {//col鍙傛暟涓嶈兘鏀瑰惁鍒欎細鑾峰彇涓嶅埌鏁版嵁
+ //杩欓噷淇敼浠庡彸涓嬪線宸︿笂鎷栧姩鐨勬暟鎹樉绀�
+ if (rowStart <= rowEnd) {
+ return rowStart <= index && rowEnd >= index
+ } else {
+ return rowStart >= index && rowEnd <= index
+ }
+ })
// console.log("榧犳爣閫変腑琛�:", JSON.stringify(selectRows))
//杩欓噷闇�瑕佹槸visibleColumn
@@ -414,29 +442,84 @@
} else {
return colStart >= index && colEnd <= index
}
-
})
- return {
- start:selectionStart.rowIndex,
- end : selectionEnd.rowIndex,
- cell:selectCols[0].field
+
+
+ let result=null
+ if(selectRows.length===0){
+ return false
}
+ result = {
+ start:selectionStart.rowIndex,//寮�濮嬭
+ end: selectionEnd.rowIndex,//缁撴潫琛�
+ cell:selectCols[0].field,//閫変腑鍒楋紝
+ row:selectRows
+ }
+
+ selectionStart.rowIndex=-1
+ selectionStart.cellIndex=-1
+ selectionEnd.rowIndex=-1
+ selectionEnd.cellIndex=-1
+
+ return result
//console.log("榧犳爣閫変腑鍒�:", JSON.stringify(selectCols))
}
+const exportData = () => {
+ // //杩欓噷闇�瑕佹槸visibleData
+ let tableData = getTablexGrid().getTableData().visibleData//鑾峰彇澶勭悊鏉′欢涔嬪悗鐨勫叏閲忚〃浣撴暟鎹�
+ let rowStart = selectionStart.rowIndex//鑾峰彇閫変腑璧峰琛岀储寮�
+ let rowEnd = selectionEnd.rowIndex//鑾峰彇閫変腑缁撴潫琛岀储寮�
+ let selectRows = tableData.filter((col, index: number) => {//col鍙傛暟涓嶈兘鏀瑰惁鍒欎細鑾峰彇涓嶅埌鏁版嵁
+ //杩欓噷淇敼浠庡彸涓嬪線宸︿笂鎷栧姩鐨勬暟鎹樉绀�
+ if (rowStart <= rowEnd) {
+ return rowStart <= index && rowEnd >= index
+ } else {
+ return rowStart >= index && rowEnd <= index
+ }
+ })
+ //杩欓噷闇�瑕佹槸visibleColumn
+ let colStart = selectionStart.cellIndex//鑾峰彇閫変腑璧峰鍒楃储寮�
+ let colEnd = selectionEnd.cellIndex//鑾峰彇閫変腑缁撴潫鍒楃储寮�
+ let tableColumn = getTablexGrid().getTableColumn().visibleColumn//鑾峰彇澶勭悊鏉′欢涔嬪悗鐨勫叏閲忚〃澶村垪
+ let selectCols = tableColumn.filter((col, index: number) => {//col鍙傛暟涓嶈兘鏀瑰惁鍒欎細鑾峰彇涓嶅埌鏁版嵁
+ //杩欓噷淇敼浠庡彸涓嬪線宸︿笂鎷栧姩鐨勬暟鎹樉绀�
+ if (colStart <= colEnd) {
+ return colStart <= index && colEnd >= index
+ } else {
+ return colStart >= index && colEnd <= index
+ }
+ })
+ let data = []
+ let title = []
+ selectCols.forEach((col, index) => {
+ title.push(col['title'])
+ })
+ data.push(title)
+ selectRows.forEach((row, index) => {
+ let rowData = []
+ selectCols.forEach((col, index) => {
+ const parts = col['property'].split('.')
+ let result = row
+ for (const part of parts) {
+ if (result && result[part] !== undefined) {
+ result = result[part];
+ } else {
+ return null;
+ }
+ }
+ rowData.push(result)
+ })
+ data.push(rowData)
+ })
+ return data
-
-
-
-
-
-
-
-
+}
export {
addListener,
- toolbarButtonClickEvent
+ toolbarButtonClickEvent,
+ exportData
}
\ No newline at end of file
--
Gitblit v1.8.0