From 8aaa45b4619984e75bfc952e82228f170c985d82 Mon Sep 17 00:00:00 2001
From: NGyuejh <2083483352@qq.com>
Date: 星期五, 29 十二月 2023 11:08:31 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
north-glass-erp/northglass-erp/src/components/basic/BasicTable.vue | 675 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 675 insertions(+), 0 deletions(-)
diff --git a/north-glass-erp/northglass-erp/src/components/basic/BasicTable.vue b/north-glass-erp/northglass-erp/src/components/basic/BasicTable.vue
new file mode 100644
index 0000000..6cb5437
--- /dev/null
+++ b/north-glass-erp/northglass-erp/src/components/basic/BasicTable.vue
@@ -0,0 +1,675 @@
+<template>
+ <div style="width: 100%;height: 100%;" >
+ <!-- 姝ｅ父鍖哄煙鐨勬 -->
+ <div class="vxe-table--cell-area" ref="cellarea">
+ <span class="vxe-table--cell-main-area"></span>
+ <span class="vxe-table--cell-active-area"></span>
+ </div>
+ <vxe-grid
+ max-height="100%"
+ @filter-change="filterChanged"
+ class="mytable-scrollbar"
+ ref="xGrid"
+ v-bind="gridOptions"
+ v-on="gridEvents"
+ @scroll ="scrollEvnt"
+
+ >
+<!-- @toolbar-button-click="toolbarButtonClickEvent"-->
+<!-- 涓嬫媺鏄剧ず鎵�鏈変俊鎭彃妲�-->
+ <template #content="{ row }">
+ <ul class="expand-wrapper">
+ <li v-for="(item,key) in row">
+ <span style="font-weight: bold">{{key+': '}}</span>
+ <span>{{ item }}</span>
+ </li>
+ </ul>
+ </template>
+
+<!--宸﹁竟鍥哄畾鏄剧ず鐨勬彃妲�-->
+ <template #button_slot="{ row }">
+ <el-button @click="gaveParent(row,'edit')" link type="primary" size="small">缂栬緫</el-button>
+ <el-button @click="gaveParent(row,'delete')" link type="primary" size="small">鍒犻櫎</el-button>
+ </template>
+
+ <template #num1_filter="{ column, $panel }">
+ <div>
+ <div v-for="(option, index) in column.filters" :key="index">
+ <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
+ </div>
+ </div>
+ </template>
+
+
+ </vxe-grid>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, reactive, defineEmits, onMounted, nextTick, toRef, watch} from 'vue'
+import {VxeGridProps, VXETable} from 'vxe-table'
+import request from "@/utils/request"
+import deepClone from "@/utils/deepClone";
+import {ElMessage} from "element-plus";
+import router from "@/router";
+//prop鎺ユ敹鐖剁粍浠跺嚱鏁�
+
+
+
+let props = defineProps({
+ tableProp:{
+ String,
+ default: ''
+ }
+})
+
+//瀛愭柟娉曡皟鐢ㄧ埗鏂规硶
+let emit = defineEmits([
+ 'getChildren',
+ 'getFilterChildren',
+ 'getCheckList',
+ ])
+const gaveParent = (row,type)=> {
+ emit('getChildren',row,type)
+}
+//椤佃剼姹傚拰
+const sumNum = (list, field) => {
+ let count = 0
+ list.forEach(item => {
+ count += Number(item[field])
+ })
+ return count.toFixed(2)
+}
+
+const changeFilterEvent = (event, option, $panel,) => {
+ // 鎵嬪姩瑙﹀彂绛涢��
+ $panel.changeOption(event, !!option.data, option)
+}
+
+//瑙﹀彂绛涢�夋潯浠�
+function filterChanged(column){
+ let value = column.datas[0]!=undefined?column.datas[0]:''
+ value = value===''?'n*':value.trim()
+ props.tableProp.filter[column.field]=value
+}
+const xGrid = ref()
+const gridOptions = reactive({
+ border: "full",//琛ㄦ牸鍔犺竟妗�
+ keepSource: true,//淇濇寔婧愭暟鎹�
+ align: 'center',//鏂囧瓧灞呬腑
+ stripe:true,//鏂戦┈绾�
+ rowConfig: {isCurrent: true, isHover: true,height: 50},//榧犳爣绉诲姩鎴栭�夋嫨楂樹寒
+ id: 'demo_1',
+ showFooter: true,//鏄剧ず鑴�
+ printConfig: {},
+ importConfig: {},
+ exportConfig: {},
+ scrollY:{ enabled: true , gt: 40},//寮�鍚櫄鎷熸粴鍔�
+ showOverflow:true,
+ columnConfig: {
+ resizable: true,
+ useKey: true
+ },
+ filterConfig: { //绛涢�夐厤缃」
+ remote: true
+ },
+ customConfig: {
+ storage: true
+ },
+ editConfig: {
+ trigger: 'click',
+ mode: 'row',
+ showStatus: true
+ },
+ columns:props.tableProp.title,//琛ㄥご鍙傛暟
+ toolbarConfig: {
+ buttons: props.tableProp.buttons,
+ // buttons: [
+ // { code: 'myInsert', name: '鏂板' },
+ // { code: 'deleteList', name: '鍒犻櫎' },
+ // { code: 'checkList', name: '鎻愪氦' },
+ // // { code: 'mySave', name: '淇濆瓨', status: 'success' },
+ // //{ code: 'myExport', name: '瀵煎嚭鏁版嵁', type: 'text', status: 'warning' },
+ // // {
+ // // name: '绂佺敤鎸夐挳',
+ // // disabled: false,
+ // // dropdowns: [
+ // // { code: 'other1', name: '涓嬫媺鐨勬寜閽�1', type: 'text', disabled: false },
+ // // { code: 'other2', name: '涓嬫媺鐨勬寜閽�2', type: 'text', disabled: true },
+ // // { code: 'other3', name: '涓嬫媺鐨勬寜閽�3', type: 'text', disabled: false }
+ // // ]
+ // // }
+ // ],
+ // tools: [
+ // { code: 'myPrint', name: '鑷畾涔夋墦鍗�' }
+ // ],
+ import: false,
+ export: true,
+ print: true,
+ zoom: true,
+ custom: true
+ },
+ data: props.tableProp.datas,//table body瀹為檯鏁版嵁
+ footerMethod ({ columns, data }) {//椤佃剼鍑芥暟
+ return[
+ columns.map((column, columnIndex) => {
+ if (columnIndex === 0) {
+ return '鍚堣:'
+ }
+ if (props.tableProp.footList.includes(column.field)) {
+ return sumNum(data, column.field)
+ }
+ return ''
+ })
+ ]
+ }
+
+})
+const gridEvents = {
+ toolbarButtonClick ({ code }) {
+ const $grid = xGrid.value
+ if ($grid) {
+ switch (code) {
+ case 'checkList': {
+ if($grid.getCheckboxRecords().length==0){
+ VXETable.modal.message( '璇烽�夋嫨涓�鏉℃暟鎹紒')
+ return
+ }
+ emit('getCheckList',$grid.getCheckboxRecords())
+ break
+ }
+ case 'deleteList': {
+ $grid.removeCheckboxRow()
+ break
+ }
+ case 'myInsert': {
+ $grid.insert({})
+ console.log($grid.getRecordset().insertRecords)
+ break
+ }
+ case 'mySave': {
+ const { insertRecords, removeRecords, updateRecords } = $grid.getRecordset()
+ VXETable.modal.message({ content: `鏂板 ${insertRecords.length} 鏉★紝鍒犻櫎 ${removeRecords.length} 鏉★紝鏇存柊 ${updateRecords.length} 鏉, status: 'success' })
+ break
+ }
+ case 'myExport': {
+ $grid.exportData({
+ type: 'csv'
+ })
+ break
+ }
+ }
+ }
+ },
+ toolbarToolClick ({ code }) {
+ const $grid = xGrid.value
+ if ($grid) {
+ switch (code) {
+ case 'myPrint': {
+ $grid.print()
+ break
+ }
+ }
+ }
+ },
+}
+
+
+
+/*
+//榧犳爣婊戝姩閫変腑
+let isSelecting = ref(false) // 鏄惁姝ｅ湪杩涜閫夋嫨鎿嶄綔,榛樿涓篺alse
+let selectionStart = reactive({ rowIndex: -1, cellIndex: -1 }) // 閫夋嫨鎿嶄綔璧峰鍗曞厓鏍间綅缃�
+let selectionEnd = reactive({ rowIndex: -1, cellIndex: -1 }) // 閫夋嫨鎿嶄綔缁撴潫鍗曞厓鏍间綅缃�
+
+onMounted(() => {
+ addListener()
+})
+
+
+
+let cellarea = ref()
+let leftfixedcellarea = ref()
+let rightfixedcellarea = ref()
+
+//杩斿洖table鐨剅ef鍚嶇О
+const getTablexGrid = () => {
+ return xGrid.value
+}
+
+const addListener = () => {
+ //娣诲姞澶氶�夊垪
+ nextTick(() => {
+ window.addEventListener("mousedown", tableOutDestroyAreaBox)//缁檞indow娣诲姞榧犳爣鎸変笅浜嬩欢,鍒ゆ柇鏄惁鍦ㄨ〃鏍煎,鏄攢姣�
+ window.addEventListener("mouseup", tbodymouseup)//缁檞indow娣诲姞榧犳爣鏉惧紑浜嬩欢
+ let tbody = getTablexGrid().$el.querySelector(".vxe-table--main-wrapper table tbody")//鑾峰彇tbody鍖哄煙
+
+ if (tbody) {
+ tbody.addEventListener("mousedown", tbodymousedown)//缁欒〃鏍间腑鐨則body娣诲姞榧犳爣鎸変笅浜嬩欢
+ tbody.addEventListener("mousemove", tbodymousemove)//缁欒〃鏍间腑鐨則body娣诲姞榧犳爣绉诲姩浜嬩欢
+ tbody.addEventListener("mouseout", throttle(tbodymouseout, 50))//缁欒〃鏍间腑鐨則body娣诲姞榧犳爣绉诲嚭浜嬩欢
+ tbody.addEventListener("click", tableCellClick)//娣诲姞宸﹂敭鍗曞嚮浜嬩欢
+ tbody.oncontextmenu = tableCellMenuClick//娣诲姞鍙抽敭鑿滃崟浜嬩欢
+ }
+
+ let bodyWrapper = getTablexGrid().$el.querySelector(".vxe-table--main-wrapper .vxe-table--body-wrapper")//鑾峰彇姝ｅ父鍖哄煙鐨刡ody
+ if (bodyWrapper) {
+ //娉ㄦ剰杩欓噷鐨剅ef鍚嶇О锛岃繖閲屾槸闈瀎ixed鍖哄煙鐨勬鐨勫悕绉�
+ bodyWrapper.appendChild(cellarea.value)//娣诲姞鑼冨洿妗嗗厓绱�
+ }
+ setTimeout(() => {
+ //#region 宸︿晶鍥哄畾鍒�
+ let leftfixedtbody = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper table tbody")//鑾峰彇fixedtbody鍖哄煙
+
+ if (leftfixedtbody) {
+ leftfixedtbody.addEventListener("mousedown", tbodymousedown)//缁欒〃鏍间腑鐨刲eftfixedtbody娣诲姞榧犳爣鎸変笅浜嬩欢
+ leftfixedtbody.addEventListener("mousemove", tbodymousemove)//缁欒〃鏍间腑鐨刲eftfixedtbody娣诲姞榧犳爣绉诲姩浜嬩欢
+ leftfixedtbody.addEventListener("mouseout", throttle(tbodymouseout, 50))//缁欒〃鏍间腑鐨刲eftfixedtbody娣诲姞榧犳爣绉诲嚭浜嬩欢
+ leftfixedtbody.addEventListener("click", tableCellClick)//娣诲姞鍗曞嚮浜嬩欢
+ 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)
+ }
+ //#endregion
+
+ //#region 鍙充晶鍥哄畾鍒�
+ 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娣诲姞榧犳爣鎸変笅浜嬩欢
+ rightfixedtbody.addEventListener("mousemove", tbodymousemove)//缁欒〃鏍间腑鐨剅ightfixedtbody娣诲姞榧犳爣绉诲姩浜嬩欢
+ rightfixedtbody.addEventListener("mouseout", throttle(tbodymouseout, 50))//缁欒〃鏍间腑鐨剅ightfixedtbody娣诲姞榧犳爣绉诲嚭浜嬩欢
+ rightfixedtbody.addEventListener("click", tableCellClick)//娣诲姞鍗曞嚮浜嬩欢
+ rightfixedtbody.oncontextmenu = tableCellMenuClick//娣诲姞鍙抽敭鑿滃崟浜嬩欢
+ }
+
+ let rightFixedBodyWrapper = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper")
+ if (rightFixedBodyWrapper) {
+ //娉ㄦ剰杩欓噷鐨剅ef鍚嶇О锛岃繖閲屾槸fixed鍖哄煙鐨勬鐨勫悕绉�
+ rightFixedBodyWrapper.appendChild(rightfixedcellarea.value)
+ }
+ //#endregion
+
+ }, 100)
+
+ })
+}
+const tbodymousedown = (event) => {
+ event.stopPropagation(); // 闃绘鍐掓场
+ getTablexGrid().closeMenu(); // 鎵嬪姩鍏抽棴鍙抽敭鑿滃崟
+
+ if (event.button === 0) { // 宸﹂敭鎸変笅
+ // 璁板綍閫夋嫨鎿嶄綔璧峰浣嶇疆
+ selectionStart = getCellPosition(event.target); // 璁剧疆閫夋嫨鎿嶄綔璧峰鍗曞厓鏍间綅缃�
+ isSelecting.value = true; // 鏍囪涓烘鍦ㄩ�夋嫨鎿嶄綔
+ }
+};
+
+//榧犳爣绉诲姩浜嬩欢
+//todo 杩欓噷瑕佽妭娴佹搷浣�,鍙湪缁撴潫鏃惰Е鍙戜竴娆�
+const tbodymousemove = (event: MouseEvent) => {
+ if (event.button === 0) {//宸﹂敭绉诲姩
+ if (!isSelecting.value) return//濡傛灉褰撳墠闈炴鍦ㄩ�夋嫨鎿嶄綔,鐩存帴閫�鍑�
+ //璁板綍閫夋嫨鎿嶄綔缁撴潫浣嶇疆
+ selectionEnd = getCellPosition(event.target)
+
+ //璁剧疆鏍峰紡,骞舵樉绀鸿寖鍥存
+ setselectedCellArea()
+
+ }
+}
+
+//榧犳爣鎸夐敭缁撴潫浜嬩欢,娣诲姞鍦ㄤ簡window涓�
+const tbodymouseup = (event: MouseEvent) => {
+ if (event.button === 0) {//宸﹂敭鏉惧紑
+ isSelecting.value = false//鏍囪涓哄仠姝㈤�夋嫨鎿嶄綔
+ }
+}
+
+let outevent = ref()//绉诲姩浜嬩欢,涓嶄繚瀛�,寰幆瀹氭椂鍣ㄥ唴鏃犳硶鐩戝惉鍒版柊鐨勪簨浠�
+
+//榧犳爣绉诲嚭琛ㄦ牸浜嬩欢,鍙湪绉诲姩鐨勬椂鍊欎細瑙﹀彂,鏆傚仠绉诲姩涓嶈Е鍙�
+const tbodymouseout = (event: MouseEvent) => {
+ outevent.value = event//淇濆瓨绉诲姩浜嬩欢
+
+ if (isSelecting.value) {//濡傛灉姝ｅ湪鎵ц閫変腑鎿嶄綔
+ const timer = setInterval(() => {//寮�鍚惊鐜畾鏃跺櫒
+ if (isSelecting.value) {//鍒ゆ柇褰撳墠鏄惁姝ｅ湪閫夋嫨
+ //鑾峰彇琛ㄦ牸鍏冪礌
+ var table = getTablexGrid().$el.querySelector(".vxe-table--body-wrapper table")//鑾峰彇闈炲浐瀹氬垪(鍜屽浐瀹氬垪)鐨則able鍏冪礌
+ if (outevent.value.clientX > table.parentElement.getBoundingClientRect().right - 30) {//鍒ゆ柇榧犳爣x杞存槸鍚﹁秴鍑鸿〃鏍煎彸渚�,鍚戝彸婊氬姩
+ var maxScrollPosition = table.parentElement.scrollWidth - table.parentElement.clientWidth//鑾峰彇婊氬姩鏉℃渶澶т綅缃�
+ if (table.parentElement.scrollLeft < maxScrollPosition) {//濡傛灉娌″埌婊氬姩鏉℃渶澶т綅缃�,鎵ц婊氬姩
+ table.parentElement.scrollLeft += 10//鎵ц姘村钩婊氬姩鏉″悜鍙虫粴鍔�
+ }
+ } else if (outevent.value.clientX < table.parentElement.getBoundingClientRect().left + 30) {//鍒ゆ柇榧犳爣x杞存槸鍚﹁秴鍑鸿〃鏍煎乏渚�,鍚戝乏婊氬姩
+ if (table.parentElement.scrollLeft > 0) {//濡傛灉娌″埌婊氬姩鏉℃渶澶т綅缃�,鎵ц婊氬姩
+ //榧犳爣绉诲嚭琛ㄦ牸锛屾粴鍔ㄦ按骞虫粴鍔ㄦ潯
+ table.parentElement.scrollLeft -= 10//鎵ц姘村钩婊氬姩鏉″悜鍙虫粴鍔�
+ }
+ }
+
+
+ } else {
+ clearInterval(timer)//娓呴櫎寰幆瀹氭椂鍣�
+ }
+ }, 200)//杩欓噷璁剧疆婊戝姩閫熷害
+
+ }
+
+}
+
+//鑺傛祦鍑芥暟,todo//鏀逛负鍏ㄥ眬
+const throttle = (fn: Function, delay: number) => {
+ const canRun = ref(true)
+ return (...args: any[]) => {
+ if (!canRun.value) return
+ canRun.value = false
+ setTimeout(() => {
+ fn(...args)
+ canRun.value = true
+ }, delay)
+ }
+}
+
+// 鑾峰彇鍗曞厓鏍间綅缃�(rowIndex, cellIndex)
+const getCellPosition = (cell: any) => {
+
+
+ while (cell.tagName !== 'TD') {//灏哻ell鎸囧悜TD鍏冪礌
+ cell = cell.parentElement
+ }
+
+ let visibleColumn = getTablexGrid().getTableColumn().visibleColumn//鑾峰彇澶勭悊鏉′欢涔嬪悗鐨勫叏閲忚〃澶村垪
+ const cellIndex = visibleColumn.findIndex((col: { id: any; }) => {//杩斿洖colid鐩哥瓑鐨剉isibleColumn鍏ㄩ噺琛ㄥご鍒楃殑绱㈠紩
+ return col.id == cell.getAttribute("colid")
+ })
+
+ let visibleData = getTablexGrid().getTableData().visibleData//鑾峰彇澶勭悊鏉′欢涔嬪悗鐨勫叏閲忚〃浣撴暟鎹�
+
+ const rowIndex = visibleData.findIndex((row: { _X_ROW_KEY: any; }) => {//杩斿洖rowid鐩哥瓑鐨剉isibleData鍏ㄩ噺琛ㄤ綋鏁版嵁
+ return row._X_ROW_KEY == cell.parentElement.getAttribute("rowid")//杩斿洖rowid鐩哥瓑鐨剉isibleData鍏ㄩ噺琛ㄤ綋鏁版嵁鐨勭储寮�
+ })
+ return { rowIndex, cellIndex }
+
+}
+
+//璁剧疆妗嗘墦寮�
+const setselectedCellArea = () => {
+
+
+
+ var activeElement = getTablexGrid().$el.querySelector(".vxe-table--main-wrapper .vxe-table--body-wrapper .vxe-table--cell-active-area")//姝ｅ父鍖哄煙閫変腑杈规婵�娲荤殑鍏冪礌(浠呮槸杈规)
+ var mainElement = getTablexGrid().$el.querySelector(".vxe-table--main-wrapper .vxe-table--body-wrapper .vxe-table--cell-main-area")//姝ｅ父鍖哄煙閫変腑杈规鍐呮暣涓寖鍥寸殑鍏冪礌
+
+ var leftFixedActiveElement = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper .vxe-table--cell-active-area")//宸︿晶鍥哄畾鍒楅�変腑杈规婵�娲荤殑鍏冪礌(浠呮槸杈规)
+ var leftFixedMainElement = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper .vxe-table--cell-main-area")//宸︿晶鍥哄畾鍒楅�変腑杈规鍐呮暣涓寖鍥寸殑鍏冪礌
+
+ var rightFixedActiveElement = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper .vxe-table--cell-active-area")//鍙充晶鍥哄畾鍒楅�変腑杈规婵�娲荤殑鍏冪礌(浠呮槸杈规)
+ var rightFixedMainElement = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper .vxe-table--cell-main-area")//鍙充晶鍥哄畾鍒楅�変腑杈规鍐呮暣涓寖鍥寸殑鍏冪礌
+
+
+ var elements = [activeElement, mainElement, leftFixedActiveElement, leftFixedMainElement, rightFixedActiveElement, rightFixedMainElement]
+ let area = getAreaBoxPosition()
+ if (area) {
+ var { width, height, left, top, right } = area
+ } else {
+ return
+ }
+ elements.forEach((element, index) => {
+ if (element) {//璁剧疆鏄剧ず鑼冨洿妗嗙殑鍐呴儴鍏冪礌鐨勬牱寮�
+ element.style.width = `${width}px`
+ element.style.height = `${height}px`
+ element.style.top = `${top}px`
+ element.style.display = "block"
+ if (index <= elements.length - 1 - 2) {//濡傛灉涓嶆槸rightFixedActiveElement鎴杛ightFixedMainElement
+ element.style.left = `${left}px`
+ } else {
+ element.style.right = `${right}px`
+ }
+ }
+ })
+
+ //鏄剧ず鑼冨洿妗�
+ openAreaBox()
+}
+
+//鏍规嵁寮�濮嬩綅缃拰缁撴潫浣嶇疆鐨勭储寮曡绠楁鐨剋idth,height,left,top(宸︿晶鍥哄畾鍒楀拰姝ｅ父鍖哄煙鍜屽彸渚у浐瀹氬垪浣跨敤)
+const getAreaBoxPosition = () => {
+ let startRowIndex = selectionStart.rowIndex//鑾峰彇閫変腑璧峰琛岀储寮�
+ let endRowIndex = selectionEnd.rowIndex//鑾峰彇閫変腑缁撴潫琛岀储寮�
+ let startColumnIndex = selectionStart.cellIndex//鑾峰彇閫変腑璧峰鍒楃储寮�
+ let endColumnIndex = selectionEnd.cellIndex//鑾峰彇閫変腑缁撴潫鍒楃储寮�
+ let visibleColumn = getTablexGrid().getTableColumn().visibleColumn//鑾峰彇澶勭悊鏉′欢涔嬪悗鐨勫叏閲忚〃澶村垪
+ let visibleData = getTablexGrid().getTableData().visibleData//鑾峰彇澶勭悊鏉′欢涔嬪悗鐨勫叏閲忚〃浣撴暟鎹�
+ if (startColumnIndex < 0 || endColumnIndex < 0 || startRowIndex < 0 || endRowIndex < 0) return
+ var maxColumnIndex = visibleColumn.length - 1//鏈�澶у垪绱㈠紩
+ var maxRowIndex = visibleData.length - 1//鏈�澶ц绱㈠紩
+ if (endColumnIndex > maxColumnIndex) {//鍒版渶鍚庝竴鍒�,鎸囧悜鏈�鍚庝竴鍒�
+ endColumnIndex = maxColumnIndex
+ }
+ if (endRowIndex > maxRowIndex) {//鍒版渶鍚庝竴琛�,鎸囧悜鏈�鍚庝竴琛�
+ endRowIndex = maxRowIndex
+ }
+ let width = 0, height = 0, left = 0, top = 0, right = 0
+ visibleColumn.forEach((col: { renderWidth: number; }, index: number) => {
+ if (startColumnIndex <= endColumnIndex) {//寮�濮嬪垪绱㈠紩灏忎簬缁撴潫鍒楃储寮�,鍗充粠宸﹀線鍙抽�夋嫨
+ if (index < startColumnIndex) {
+ left += col.renderWidth//璺濈琛ㄦ牸鏁翠綋宸︿晶杈规璺濈
+ }
+ if (index > endColumnIndex) {//鏁版嵁绱㈠紩澶т簬缁撴潫鍒�,杩欓噷鑾峰彇璺濈鍚庨潰鏁版嵁鐨勫搴�
+ right += col.renderWidth//璺濈琛ㄦ牸鏁翠綋鍙充晶杈规璺濈,鍔犱笂褰撳墠鍒�
+ }
+ if (startColumnIndex <= index && index <= endColumnIndex) {//寮�濮嬪垪绱㈠紩澶т簬鏁版嵁绱㈠紩 鍜� 缁撴潫鍒楃储寮曞皬浜庢暟鎹储寮�,杩欓噷鑾峰彇閫変腑鍖哄煙鐨勫搴�
+ width += col.renderWidth//閫変腑鍖哄煙鐨勫搴�
+ }
+ } else {//浠庡彸寰�宸﹂�夋嫨
+ if (index < endColumnIndex) {
+ left += col.renderWidth//璺濈琛ㄦ牸鏁翠綋宸︿晶杈规璺濈
+ }
+ if (index > startColumnIndex) {//鏁版嵁绱㈠紩澶т簬寮�濮嬪垪,杩欓噷鑾峰彇璺濈鍚庨潰鏁版嵁鐨勫搴�
+ right += col.renderWidth//璺濈琛ㄦ牸鏁翠綋鍙充晶杈规璺濈,鍔犱笂褰撳墠鍒�
+ }
+ if (startColumnIndex >= index && index >= endColumnIndex) {//寮�濮嬪垪绱㈠紩澶т簬鏁版嵁绱㈠紩 鍜� 缁撴潫鍒楃储寮曞皬浜庢暟鎹储寮�,杩欓噷鑾峰彇閫変腑鍖哄煙鐨勫搴�
+ width += col.renderWidth//閫変腑鍖哄煙鐨勫搴�
+ }
+ }
+
+ })
+ if (startRowIndex <= endRowIndex) {//寮�濮嬭绱㈠紩灏忎簬缁撴潫琛岀储寮�,鍗充粠涓婂線涓嬮�夋嫨
+ height = (endRowIndex - startRowIndex + 1) * gridOptions.rowConfig!.height!//閫変腑鍖哄煙鐨勯珮搴�
+ top = startRowIndex * gridOptions.rowConfig!.height!//璺濈琛ㄦ牸鏁翠綋椤堕儴杈规璺濈
+ } else {
+ height = (startRowIndex - endRowIndex + 1) * gridOptions.rowConfig!.height!//閫変腑鍖哄煙鐨勯珮搴�
+ top = endRowIndex * gridOptions.rowConfig!.height!//璺濈琛ㄦ牸鏁翠綋椤堕儴杈规璺濈
+ }
+
+
+
+ return { width, height, left, top, right }
+
+}
+
+//鏄剧ず鑼冨洿妗�
+const openAreaBox = () => {
+ var element = xGrid.value.$el.querySelector(".vxe-table--main-wrapper .vxe-table--body-wrapper .vxe-table--cell-area")
+ if (element) {
+ element.style.display = "block"
+ }
+ element = xGrid.value.$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper .vxe-table--cell-area")
+ if (element) {
+ element.style.display = "block"
+ }
+ element = xGrid.value.$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper .vxe-table--cell-area")
+ if (element) {
+ element.style.display = "block"
+ }
+}
+
+//琛ㄦ牸澶栭攢姣佽寖鍥存
+const tableOutDestroyAreaBox = (event: MouseEvent) => {
+ try{
+ var element = getTablexGrid().$el.querySelector(".vxe-table--render-wrapper")
+ }catch (err){
+
+ }
+
+ if (element) {
+ if (event.clientX < element.getBoundingClientRect().left || event.clientX > element.getBoundingClientRect().right
+ || event.clientY > element.getBoundingClientRect().top || event.clientY < element.getBoundingClientRect().bottom
+ ) {
+ destroyAreaBox()
+ }
+ }
+
+
+}
+//閿�姣佽寖鍥存
+const destroyAreaBox = () => {
+ var element = getTablexGrid().$el.querySelector(".vxe-table--main-wrapper .vxe-table--body-wrapper .vxe-table--cell-area")
+ if (element) {
+ element.style.display = "none"
+ }
+ element = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper .vxe-table--cell-area")
+ if (element) {
+ element.style.display = "none"
+ }
+ element = getTablexGrid().$el.querySelector(".vxe-table--fixed-wrapper .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper .vxe-table--cell-area")
+ if (element) {
+ element.style.display = "none"
+ }
+}
+
+//琛ㄦ牸鍗曞厓鏍肩偣鍑讳簨浠�
+const tableCellClick = (e: MouseEvent) => {
+
+ if (!isSelecting.value) {//闈為�変腑鐘舵��
+ try {
+ selectionStart = getCellPosition(e.target)//鑾峰彇鍗曞厓鏍间綅缃�
+ selectionEnd = selectionStart//缁撴潫浣嶇疆涔熸槸鑷繁
+ //璁剧疆鏍峰紡
+ setselectedCellArea()
+ } catch (error) {
+
+ }
+
+ }
+}
+
+//琛ㄦ牸鍙抽敭鐐瑰嚮浜嬩欢
+const tableCellMenuClick = (e: MouseEvent) => {
+ if (!isSelecting.value) {//闈為�変腑鐘舵��
+ let currentCellPosition = getCellPosition(e.target)//鑾峰彇鍗曞厓鏍间綅缃�
+ var horizontalFlag//鏄惁鍦ㄨ寖鍥存鐨勬按骞冲垽鏂爣璁�
+ var verticalFlag//鏄惁鍦ㄨ寖鍥存鐨勫瀭鐩村垽鏂爣璁�
+ if (selectionStart.cellIndex <= selectionEnd.cellIndex) {//濡傛灉鏄粠宸﹀線鍙抽�夊彇
+ horizontalFlag = selectionStart.cellIndex <= currentCellPosition.cellIndex && currentCellPosition.cellIndex <= selectionEnd.cellIndex
+ } else {//浠庡彸寰�宸﹂�夊彇
+ horizontalFlag = selectionEnd.cellIndex <= currentCellPosition.cellIndex && currentCellPosition.cellIndex <= selectionStart.cellIndex
+ }
+ if (selectionStart.rowIndex <= selectionEnd.rowIndex) {//濡傛灉鏄粠涓婂線涓嬮�夊彇
+ verticalFlag = selectionStart.rowIndex <= currentCellPosition.rowIndex && currentCellPosition.rowIndex <= selectionEnd.rowIndex
+ } else {//浠庝笅寰�涓婇�夊彇
+ verticalFlag = selectionEnd.rowIndex <= currentCellPosition.rowIndex && currentCellPosition.rowIndex <= selectionStart.rowIndex
+ }
+
+ if (horizontalFlag && verticalFlag) { //鍒ゆ柇濡傛灉涓嶅湪閫変腑鍖哄煙鍐�,瑙﹀彂琛ㄦ牸宸﹂敭鍗曞嚮浜嬩欢,鏇存柊鎴彇鍗曞厓鏍�,鍚﹀垯濡傛灉鍦ㄦ甯歌Е鍙戝彸閿彍鍗�
+
+ } else {
+ selectionStart = getCellPosition(e.target)//鑾峰彇鍗曞厓鏍间綅缃�
+ selectionEnd = selectionStart//缁撴潫浣嶇疆涔熸槸鑷繁
+ //璁剧疆鏍峰紡
+ setselectedCellArea()
+ }
+
+ }
+
+}
+const toolbarButtonClickEvent = ({ code }: { code: any }) => {
+ switch (code) {
+ case "getcellselctdata":
+ //鎴戠粰澶у鎵撳嵃澶勭悊:
+ console.log("鏄惁姝ｅ湪杩涜婊戝姩閫変腑鎿嶄綔锛�", isSelecting.value)
+ //宸︿笂瑙掑潗鏍�
+ console.log("鍗曞厓鏍艰捣濮嬩綅缃細绱㈠紩:", selectionStart)
+ //鍙充笅瑙掑潗鏍�
+ console.log("鍗曞厓鏍肩粨鏉熶綅缃細绱㈠紩:", selectionEnd)
+
+ //杩欓噷闇�瑕佹槸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
+ }
+ })
+ console.log("榧犳爣閫変腑琛�:", JSON.stringify(selectRows))
+
+ //杩欓噷闇�瑕佹槸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
+ }
+
+ })
+ console.log("榧犳爣閫変腑鍒�:", JSON.stringify(selectCols))
+ break
+ }
+}
+*/
+
+
+</script>
+
+<style scoped>
+.vxe-grid {
+ /* 绂佺敤娴忚鍣ㄩ粯璁ら�変腑 */
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+
+/*婊氬姩鏉℃暣浣撻儴鍒�*/
+.mytable-scrollbar ::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+}
+/*婊氬姩鏉＄殑杞ㄩ亾*/
+.mytable-scrollbar ::-webkit-scrollbar-track {
+ background-color: #FFFFFF;
+}
+/*婊氬姩鏉￠噷闈㈢殑灏忔柟鍧楋紝鑳藉悜涓婂悜涓嬬Щ鍔�*/
+.mytable-scrollbar ::-webkit-scrollbar-thumb {
+ background-color: transparent;
+ border-radius: 5px;
+ border: 1px solid #F1F1F1;
+ box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+}
+.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
+ background-color: #ffffff;
+}
+.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
+ background-color: white;
+}
+/*杈硅锛屽嵆涓や釜婊氬姩鏉＄殑浜ゆ眹澶�*/
+.mytable-scrollbar ::-webkit-scrollbar-corner {
+ background-color: #FFFFFF;
+}
+</style>
+
--
Gitblit v1.8.0