选中求和功能以及还原双击回车才能点击单元格

guoyuji

2024-07-04 1c13bd7a2cd2c8ba69a185da69344c8b59f4e561

 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)//给window添加鼠标按下事件,判断是否在表格外,是销毁
        window.addEventListener("mouseup", tbodymouseup)//给window添加鼠标松开事件
        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")//获取正常区域的body
        if (bodyWrapper) {
            //注意这里的ref名称，这里是非fixed区域的框的名称
            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)//给表格中的leftfixedtbody添加鼠标移动事件
                leftfixedtbody.addEventListener("mouseout", throttle(tbodymouseout, 50))//给表格中的leftfixedtbody添加鼠标移出事件
                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) {
                //注意这里的ref名称，这里是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)//给表格中的rightfixedtbody添加鼠标按下事件
@@ -80,10 +94,10 @@
            if (rightFixedBodyWrapper) {
                //注意这里的ref名称，这里是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
}