提交合计相关字体大小

guoyujie

2025-12-01 801bb13cadd66f9eb60fc917066751bd6672741b

 north-glass-erp/northglass-erp/src/hook/mouseMove.ts

@@ -1,6 +1,7 @@
//鼠标滑动选中
import {nextTick, ref,reactive} from "vue";
import {ElMessage} from "element-plus";
import {add} from "../utils/decimal"

let isSelecting = ref(false) // 是否正在进行选择操作,默认为false
let selectionStart = reactive({ rowIndex: -1, cellIndex: -1 }) // 选择操作起始单元格位置
@@ -11,7 +12,14 @@
//获取页面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="bottom: 0;color: blue;background-color: #5cadfe; margin-top: auto;font-size: 14px"></p>
        </span>
      <span class="vxe-table--cell-active-area"  ></span>
    </div>
`)
let leftfixedcellarea = ref()
let rightfixedcellarea = ref()
const getTablexGrid = () => {
@@ -19,12 +27,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("keydown", ()=>{
            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 +56,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 +72,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 +97,10 @@
            if (rightFixedBodyWrapper) {
                //注意这里的ref名称，这里是fixed区域的框的名称
                rightFixedBodyWrapper.appendChild(rightfixedcellarea.value)
            }
            }*/
            //#endregion

        }, 100)*/
        }, 100)

    })
}
@@ -96,6 +113,14 @@
    if (event.button === 0) {//左键按下
        // 记录选择操作起始位置
        selectionStart = getCellPosition(event.target)//设置选择操作起始单元格位置
        selectionEnd = selectionStart
        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")
        activeElement.innerHTML =''
        if(element){
            element.innerHTML =''
        }


        isSelecting.value = true//标记为正在选择操作
    }
@@ -120,6 +145,40 @@
    if (event.button === 0) {//左键松开
        isSelecting.value = false//标记为停止选择操作
    }
    const result = exportData()
    if(!result){
        return
    }
    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")


    if(result.length<=2 && result[0].length===1){
        activeElement.innerHTML =''
        if(element){
            element.innerHTML =''
        }

        return
    }
    let sum = 0

    result.forEach((item,index) => {
        if(index>0){
            const val = isNaN(item[0])?0:item[0]
            sum = Number(add(sum, (val || 0)))
        }
    })

    sum=isNaN(sum)?0:sum
    setTimeout(()=>{
        activeElement.innerHTML ="SUM:"+sum
        if(element){
            element.innerHTML ="SUM:"+sum
        }

    },200)

}

let outevent = ref()//移动事件,不保存,循环定时器内无法监听到新的事件
@@ -215,6 +274,11 @@
            element.style.height = `${height}px`
            element.style.top = `${top}px`
            element.style.display = "block"
            if(index%2==1){
                element.style.display = "flex"
                element.style.flexDirection = 'column'
            }

            if (index <= elements.length - 1 - 2) {//如果不是rightFixedActiveElement或rightFixedMainElement
                element.style.left = `${left}px`
            } else {
@@ -299,6 +363,7 @@
    }
}


//表格外销毁范围框
const tableOutDestroyAreaBox = (event: MouseEvent) => {
    var element = getTablexGrid().$el.querySelector(".vxe-table--render-wrapper")
@@ -309,6 +374,7 @@
            destroyAreaBox()
        }
    }



}
@@ -390,17 +456,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 +480,96 @@
                } 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 = () => {
    let data = []
    let title = []
    try{
    // //这里需要是visibleData
    if(getTablexGrid().getTableData()?.visibleData===undefined){
        return null
    }
    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
        }
    })

    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)
    })
    }catch (e) {
        // selectionStart = { rowIndex: -1, cellIndex: -1 } // 选择操作起始单元格位置
        // selectionEnd = { rowIndex: -1, cellIndex: -1 }
    }

    return  data






}
export {
    addListener,
    toolbarButtonClickEvent
    toolbarButtonClickEvent,
    exportData,
    destroyAreaBox
}