修改密码界面调整

廖井涛

2024-06-06 eb676ae326e4e4de2ce09c1e26e2f2fd20724498

 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"  >
      <span  class="vxe-table--cell-main-area"  ></span>
      <span class="vxe-table--cell-active-area"  ></span>
    </div>
`)
let leftfixedcellarea = ref()
let rightfixedcellarea = ref()
const getTablexGrid = () => {
@@ -19,12 +24,19 @@
}

//添加事件
const addListener = (xGrids,gridOption,cellareas) => {
const addListener = (xGrids,gridOption) => {
    xGrid.value = xGrids
    gridOptions = gridOption
    cellarea.value = cellareas
    let newElement = document.createElement('div')
    const parser = new DOMParser();
    const htmlDoc = parser.parseFromString(cellarea.value, 'text/html')
    newElement.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,7 +51,7 @@
        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)
@@ -299,6 +311,7 @@
    }
}


//表格外销毁范围框
const tableOutDestroyAreaBox = (event: MouseEvent) => {
    var element = getTablexGrid().$el.querySelector(".vxe-table--render-wrapper")
@@ -390,17 +403,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 +427,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
}