| | |
| | | //鼠标滑动选中 |
| | | 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 }) // 选择操作起始单元格位置 |
| | |
| | | let xGrid = 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-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> |
| | | `) |
| | |
| | | //cellarea.value = newElement |
| | | //添加多选列 |
| | | nextTick(() => { |
| | | window.addEventListener("keypress", ()=>{ |
| | | window.addEventListener("keydown", ()=>{ |
| | | destroyAreaBox() |
| | | }) |
| | | window.addEventListener("mousedown", tableOutDestroyAreaBox)//给window添加鼠标按下事件,判断是否在表格外,是销毁 |
| | |
| | | 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//标记为正在选择操作 |
| | | } |
| | |
| | | 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); |
| | | } |
| | | }) |
| | | 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 |
| | | activeElement.innerHTML ="SUM:"+parseFloat(sum.toFixed(2)) |
| | | element.innerHTML ="SUM:"+parseFloat(sum.toFixed(2)) |
| | | setTimeout(()=>{ |
| | | activeElement.innerHTML ="SUM:"+sum |
| | | if(element){ |
| | | element.innerHTML ="SUM:"+sum |
| | | } |
| | | |
| | | },200) |
| | | |
| | | } |
| | | |
| | | let outevent = ref()//移动事件,不保存,循环定时器内无法监听到新的事件 |
| | |
| | | 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 { |
| | |
| | | |
| | | } |
| | | 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//获取选中结束行索引 |
| | |
| | | return colStart >= index && colEnd <= index |
| | | } |
| | | }) |
| | | let data = [] |
| | | let title = [] |
| | | |
| | | selectCols.forEach((col, index) => { |
| | | title.push(col['title']) |
| | | }) |
| | |
| | | selectRows.forEach((row, index) => { |
| | | let rowData = [] |
| | | selectCols.forEach((col, index) => { |
| | | |
| | | const parts = col['property'].split('.') |
| | | let result = row |
| | | for (const part of parts) { |
| | |
| | | }) |
| | | data.push(rowData) |
| | | }) |
| | | }catch (e) { |
| | | // selectionStart = { rowIndex: -1, cellIndex: -1 } // 选择操作起始单元格位置 |
| | | // selectionEnd = { rowIndex: -1, cellIndex: -1 } |
| | | } |
| | | |
| | | return data |
| | | |
| | | } |
| | | export { |
| | | addListener, |
| | | toolbarButtonClickEvent, |
| | | exportData |
| | | exportData, |
| | | destroyAreaBox |
| | | } |