Merge branch 'master' of http://git.xdadan.com/tanex/emis-frontend into master-模板替换

src/components/XdTable/index.vue

@@ -95,7 +95,7 @@
       </slot>
     </div>
     <!-- @mouseenter="initKeyDownEvent" @mouseleave="removeKeyDownEvent" -->
-    <div >
+    <div @blur="handleXdTableBlur" >
       <!-- <div class="flex-auto"> -->
         <orig-table ref="table" :key="refreshKeyId" tabindex="0"  :config="config" v-dragSelect  class="xd-tb-wrapper" />
       <!-- </div> -->
@@ -270,15 +270,18 @@ export default {
 
               // 鼠标按下事件
               tbBodyDiv.onmousedown = function (ev) {
-                console.log('===tbBodyDiv.onmousedown===>')
                   var evt = window.event || arguments[0];
                   var flag = true;
+                  
                   // 鼠标右键菜单，并且记录当前位置
                   if(evt.button == 2){
                      flag=false;
-                     if(vnode.context.multipleSelection&&vnode.context.multipleSelection.length>0)
+                     if(
+                      vnode.context.multipleSelection
+                      &&vnode.context.multipleSelection.length>0
+                      && vnode.context.mouseInScope
+                    )
                      {
-
                         // 记住当前单元格位置
                         vnode.context.currentOdiv=oDiv;
                         vnode.context.currentCell=evt.target;
@@ -286,13 +289,14 @@ export default {
                         const currentCellInfo=getCellPosition(evt.target);
                         vnode.context.currentCellInfo=currentCellInfo;
 
-                        // 显示右键菜单
+                        // 绑定右键菜单
-                        showContextMenu(evt);
+                        bindRightContextMenu(evt);
 
                      }
                      return;
                   }
 
+                  // 清除已有选择
                   let selNodes=document.querySelectorAll(".seled");
                   if(selNodes!=null&&selNodes.length>0){
                     for (var i = 0; i < selNodes.length; i++) {
@@ -333,41 +337,47 @@ export default {
                   vnode.context.clearEventBubble(evt);
                   // //打开开关
                   vnode.context.mouseflag = true;
+                  const tbBodyDivRect = tbBodyDiv.getBoundingClientRect();
                   // //鼠标拖动时画框
                   document.onmousemove = function (ev) {
-                    
-                    const tbBodyDivRect = tbBodyDiv.getBoundingClientRect();
-                    console.log("===document.onmousemove==>",ev,tbBodyDivRect);
-
                       evt = window.event || arguments[0];
                       _x = (evt.x || evt.clientX);
                       _y = (evt.y || evt.clientY);
-                      //为了确定是点击事件还是移动事件
+
-                    if(_x<tbBodyDivRect.x || _y<tbBodyDivRect.y){
+                      //过滤在范围外的事件
-                      console.log("no scope");
+                      if(_x<tbBodyDivRect.x  || _x>(tbBodyDivRect.x+tbBodyDivRect.width) 
+                      || _y<tbBodyDivRect.y || _y>(tbBodyDivRect.y+tbBodyDivRect.height)
+                      ){
                           vnode.context.isTableFocused=false;
+                          vnode.context.mouseInScope=false;
+                          // cancelRightContextMenu();
                           return;
                       }
 
+                      // if(!tbBodyDiv.contains(document.activeElement)){
+                      //     vnode.context.isTableFocused=false;
+                      //     vnode.context.mouseInScope=false;
+                      //     return;
+                      // }
                       vnode.context.isTableFocused=true;
-                    console.log("in scope");
+                      vnode.context.mouseInScope=true;
-
 
                       if(Math.abs(_x - startX)<5 && Math.abs(_y - startY)<5){
                           // setMouseCellSelect(evt.target);
                           // setMouseRowSelect(evt.target);
                           return;
                       }
-                      if(flag){
+                      // 
+                      if(flag&&vnode.context.mouseflag){
 
                           vnode.context.multipleSelection=[];
 
                           // console.log("===fileNodes.length==>",fileNodes.length);
                           // 只选取范围内的数据
                           for (var i = 0; i < fileNodes.length; i++) {
-                              // console.log("===fileNodes==>",i);
                               if (fileNodes[i].className.indexOf("el-table__cell") != -1) {
                                   fileNodes[i].classList.remove("seled");
+                                    // console.log("===selList.length==>",selList.length);
                                   selList.push(fileNodes[i]);
                               }
                           }
@@ -455,28 +465,14 @@ export default {
                       vnode.context.clearEventBubble(evt);
                   };
 
-                  function showContextMenu(event){
+                  function bindRightContextMenu(evt){
                      var xdTableObj = document.getElementById(vnode.context.tableId);
-                      xdTableObj.addEventListener("contextmenu", function(event) {
+                     xdTableObj.addEventListener("contextmenu", vnode.context.handleOnContextMenu);
-
-                        vnode.context.clearEventBubble(event)
-
-                          var menu = xdTableObj.querySelector("#contextMenu");
-                          // console.log("====>xdTableObj====>",xdTableObj);
-                          // console.log("====>menu====>",menu);
-
-                          let tbPosRect=getTablePosition(xdTableObj);
-                          menu.style.left = (event.clientX-tbPosRect.left+5) + "px";
-                          menu.style.top = (event.clientY-tbPosRect.top-35)  + "px";
-                          menu.style.display = "block";
-                          menu.style.zIndex = 3000;
-                          vnode.context.contextVisible=true;
-                          event.preventDefault();
-                    });
-
                   }
-                  function cancelContextMenu() {
+                  function cancelRightContextMenu() {
-                    document.oncontextmenu = new Function("event.returnValue=true");
+                    var xdTableObj = document.getElementById(vnode.context.tableId);
+                    xdTableObj.removeEventListener('contextmenu',vnode.context.handleOnContextMenu)
+                    // document.oncontextmenu = new Function("event.returnValue=true");
                   }
                   // 获取el-table元素的位置信息
                   function getTablePosition(tbDom) {
@@ -515,11 +511,14 @@ export default {
                       }
                       else{
                         cell.className = cell.className + " seled";
+                        vnode.context.mouseInScope=true;
                       }
                       const cellInfo=getCellPosition(cell);
                       vnode.context.multipleSelection=[];
                       vnode.context.multipleSelection.push(cellInfo);
                       
+
+
                       // 行样式设置
                       // const refTableObj=vnode.context.getInstance();
                       // let rowIndex = cell.rowIndex;
@@ -611,6 +610,8 @@ export default {
 
       //指令中确定的时候是鼠标按下事件
       mouseflag: false,
+      // 鼠标位置在表格区域内
+      mouseInScope: false,
       //选中的数组
       multipleSelection: [],
       multipleRowSelection:[],
@@ -676,17 +677,19 @@ export default {
     },
   },
   mounted() {
-    // console.log("===>xdtabe mounted==111->");
     if(this.saveStorageName&&this.saveStorageName!=undefined&&this.saveStorageName!=''){
       this.isNeedDbSaveTpl=true;
     }else{
       this.fullUrl=window.location.origin + window.location.pathname + window.location.search + window.location.hash;
       this.pageId=this.MD5(this.fullUrl);
       this.saveStorageName=this.pageId;
-      // // console.log("===> this.fullUrl==>", this.fullUrl,this.saveStorageName)
       this.isNeedDbSaveTpl=false;
     }
 
+    // 监听全局焦点变化事件
+    // document.addEventListener('focusin', this.handleGlobalFocusIn);
+    // document.addEventListener('focusout', this.handleGlobalFocusOut);
+
     this.initKeyDownEvent();
     // 初始化默认模版到本地
     this.initDefaultTplList();
@@ -694,9 +697,6 @@ export default {
     this.updateTable()
     this.tableDom=this.getTableDom();
 
-     // 监听 ctrl+c键盘事件
-     let that=this;
- 
   },
   beforeDestroy () {
     document.removeEventListener('keydown', this.handleGlobalKeydown)
@@ -709,25 +709,52 @@ export default {
         return Math.random().toString(36).substring(3,10);
       },
 
+       // 处理全局焦点进入事件
+       handleGlobalFocusIn(event) {
+          // var tableEl = document.getElementById(this.tableId);
+          // const hasFocus = tableEl.contains(event.target);
+          // console.log("===>hasFocus===>",hasFocus,tableEl,event.target);
+          // 表格获得焦点
+          // if (hasFocus && !this.isTableFocused) {
+            // this.tableHasFocus = true;
+            // this.$message({
+            //   message: '表格已获得焦点',
+            //   type: 'success',
+            //   duration: 1500
+            // });
+          // }
+       },
+
+       handleXdTableBlur(){
+        this.isTableFocused=false;
+        console.log("===>handleXdTableBlur===>",this.isTableFocused);
+       },
+
        // 全局键盘事件处理
       handleGlobalKeydown(event) {
-        // console.log("===>handleGlobalKeydown===>",event)
-
         // 检查是否按下了Ctrl+C组合键
+        event = event||window.event;
         if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
           // 如果焦点在表格内，处理复制操作
           if (this.isTableFocused) {
             event.preventDefault();
             this.handleCopySelect();
-            // e = e||window.event;
-            // if(e.ctrlKey&&e.code=="KeyC"){
-            //   that.handleCopySelect(e);
-            //   return false;
-            // }
           }
         }
       },
-
+      handleOnContextMenu(event){
+        // vnode.context.clearEventBubble(event)
+        var xdTableObj = document.getElementById(this.tableId);
+        this.clearEventBubble(event)
+        var menu = xdTableObj.querySelector("#contextMenu");
+        let tbPosRect=this.getTablePosition(xdTableObj);
+        menu.style.left = (event.clientX-tbPosRect.left+5) + "px";
+        menu.style.top = (event.clientY-tbPosRect.top-35)  + "px";
+        menu.style.display = "block";
+        menu.style.zIndex = 3000;
+        this.contextVisible=true;
+        event.preventDefault();
+      },
       clearSelection(){
         this.$nextTick(()=>{
           this.$refs.table.$refs.elTable.clearSelection();
@@ -735,11 +762,9 @@ export default {
       },
 
       initKeyDownEvent(){
-        // console.log('===initKeyDownEvent===>')
         document.addEventListener('keydown', this.handleGlobalKeydown );
       },
       removeKeyDownEvent(){
-        // console.log('===removeKeyDownEvent===>')
         document.removeEventListener('keydown', this.handleGlobalKeydown );
       },
     
@@ -939,12 +964,7 @@ export default {
             });
             selStr=this.trimTabChar(selStr,'\t','');
             // 去除两端空格
-
             this.currentSelectStr=selStr;
-            this.isTableFocused=true;
-
-          }else{
-            this.isTableFocused=false;
           }
 
           // this.$emit('handleSelect',this.multipleSelection)
@@ -1270,8 +1290,6 @@ export default {
         }
       }
       list=list2;
-      // console.log("===>list=1111=>",list);
-
       this.storageList = list
     },
     // 根据缓存的数组进行渲染表格

src/components/XdTable/index3.vue

@@ -0,0 +1,711 @@
+<template>
+  <div class="xd-table full-block flex-layout" :id="tableId"  >
+        <div class="relative overflow-x-auto">
+          <el-table
+            class="xd-tb-wrapper" 
+            :data="data"
+            tabindex="0"
+            stripe
+            border
+            :key="refreshKeyId"
+            ref="tableRef"
+            @cell-mouse-enter="handleCellMouseEnter"
+            @cell-mouse-leave="handleCellMouseLeave"
+            @cell-click="handleCellClick">
+            <el-table-column prop="date" label="日期" width="180"></el-table-column>
+            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
+            <el-table-column prop="age" label="年龄" width="100"></el-table-column>
+            <el-table-column prop="address" label="地址"></el-table-column>
+            <el-table-column prop="email" label="邮箱"></el-table-column>
+          </el-table>
+          
+          <!-- 选择范围指示器 -->
+          <div id="selectionRange" class="selection-range" style="display: none;"></div>
+        </div>
+
+        <div class="mt-6 p-4 border border-gray-200 rounded-lg">
+        <h3 class="font-medium text-gray-700 mb-2">选中内容预览:</h3>
+        <pre id="selectionPreview" class="p-3 bg-gray-50 rounded overflow-x-auto text-sm min-h-16">
+          框选单元格后，内容将显示在这里...
+        </pre>
+      </div>
+    
+  </div>
+</template>
+<script>
+import { listSysCustomizeTpl,  delSysCustomizeTpl, addSysCustomizeTpl, updateSysCustomizeTpl } from "@/api/system/sysCustomizeTpl";
+import { genJsSeqNo } from "@/utils/custom";
+import clip from '@/utils/clipboard'
+import Sortable from 'sortablejs'
+import draggable from 'vuedraggable'
+import origTable from './table.jsx'
+
+import VirtualScroll from "el-table-virtual-scroll";
+import { VirtualColumn } from "el-table-virtual-scroll";
+
+const components = { origTable, draggable,VirtualScroll }
+
+export default {
+  name: 'XdTable',
+  components,
+  props: {
+    id: {
+      type: String,
+    },
+    showSearch: {
+      type: Boolean,
+      default: true,
+    },
+    showStatInfo: {
+      type: Boolean,
+      default: false,
+    },
+    canHideColumns: {
+      type: Boolean,
+      default: true,
+    },
+    storageName: {
+      type: String,
+      required: false
+    },
+    queryParams:{
+      type: Object,
+      default: null,
+    },
+    total:{
+      type: Number,
+      default: 0,
+    },
+    showRightButton:{
+      type: Boolean,
+      default: true,
+    },
+    showPagination:{
+      type: Boolean,
+      default: true,
+    },
+    showOperateButton:{
+      type: Boolean,
+      default: true,
+    },
+    showCustomizeTpl:{
+      type: Boolean,
+      default: true,
+    },
+    data:{
+      type: Array
+    },
+  },
+  data() {
+    return {
+      refreshKeyId:Math.random().toString(36).substring(3,10),
+      tableId:this.id?this.id:"XdTable"+Math.random().toString(36).substring(3,10),
+      
+      isSelecting: false,
+      startCell: null,
+      endCell: null,
+      selectedCells: [],
+      ctrlKeyPressed: false,
+      shiftKeyPressed: false,
+
+      // 表格个性化记忆配置
+      isNeedDbSaveTpl:false,
+      fullUrl:null,
+      pageId:null,
+      saveStorageName:this.storageName,
+      storeTplList:[],
+      storageList: [],
+      openTbShowTplDlg:false,
+      curentTbShowTpl:null,
+      form:{
+        id: null,
+          tplCode: null,
+          tplName: null,
+          tplType: null,
+          tagId: null,
+          blDefault: null,
+          tplData: null,
+      },
+      rules: {
+        tplName: [
+          { required: true, message: "模版名称必填", trigger: "blur" }
+        ],
+      }
+    }
+  },
+  watch: {
+    
+  },
+  mounted() {
+   // 初始化表格单元格选择功能
+   this.initCellSelection();
+  
+  // 监听键盘状态
+  document.addEventListener('keydown', this.handleKeyDown);
+  document.addEventListener('keyup', this.handleKeyUp);
+
+  },
+  beforeDestroy() {
+    // 清理事件监听
+    document.removeEventListener('keydown', this.handleKeyDown);
+    document.removeEventListener('keyup', this.handleKeyUp);
+    
+    const tableEl = this.$refs.tableRef.$el;
+    tableEl.removeEventListener('mousedown', this.handleTableMouseDown);
+    document.removeEventListener('mousemove', this.handleDocumentMouseMove);
+    document.removeEventListener('mouseup', this.handleDocumentMouseUp);
+  },
+  methods: {
+     // 初始化单元格选择功能
+     initCellSelection() {
+          const tableEl = this.$refs.tableRef.$el;
+          const selectionRange = document.getElementById('selectionRange');
+          
+          // 鼠标按下事件
+          tableEl.addEventListener('mousedown', this.handleTableMouseDown);
+          
+          // 鼠标移动事件
+          document.addEventListener('mousemove', this.handleDocumentMouseMove);
+          
+          // 鼠标释放事件
+          document.addEventListener('mouseup', this.handleDocumentMouseUp);
+        },
+        
+        // 处理表格鼠标按下
+        handleTableMouseDown(event) {
+          // 只处理左键点击
+          if (event.button !== 0) return;
+          
+          // 获取鼠标按下的单元格
+          const cell = event.target.closest('td');
+          if (!cell || cell.classList.contains('el-table__expanded-cell')) return;
+          
+          // 获取单元格位置信息
+          const cellInfo = this.getCellInfo(cell);
+          if (!cellInfo) return;
+          
+          // 阻止默认行为，防止文本选中
+          event.preventDefault();
+          
+          // 记录起始单元格
+          this.startCell = cellInfo;
+          
+          // 如果按下Ctrl键，启用多选模式
+          if (this.ctrlKeyPressed) {
+            this.toggleCellSelection(cellInfo);
+          } else if (!this.shiftKeyPressed) {
+            // 清除现有选择（除非按下Shift键）
+            this.clearSelection();
+            this.selectCell(cellInfo);
+          }
+          
+          // 开始选择
+          this.isSelecting = true;
+        },
+        
+        // 处理文档鼠标移动
+        handleDocumentMouseMove(event) {
+          if (!this.isSelecting) return;
+          
+          // 获取鼠标当前所在的单元格
+          const cell = event.target.closest('td');
+          if (!cell || cell.classList.contains('el-table__expanded-cell')) return;
+          
+          // 获取单元格位置信息
+          const cellInfo = this.getCellInfo(cell);
+          if (!cellInfo) return;
+          
+          // 记录结束单元格
+          this.endCell = cellInfo;
+          
+          // 更新选择范围
+          this.updateSelectionRange();
+        },
+        
+        // 处理文档鼠标释放
+        handleDocumentMouseUp() {
+          if (!this.isSelecting) return;
+          
+          // 结束选择
+          this.isSelecting = false;
+          
+          // 如果有结束单元格，更新选择范围
+          if (this.endCell) {
+            this.updateSelectionRange(true);
+          }
+          
+          // 隐藏选择范围指示器
+          const selectionRange = document.getElementById('selectionRange');
+          selectionRange.style.display = 'none';
+          
+          // 更新预览
+          this.updateSelectionPreview();
+        },
+        
+        // 获取单元格信息
+        getCellInfo(cell) {
+          if (!cell) return null;
+          
+          // 获取行索引（排除表头）
+          const row = Array.from(cell.closest('tbody').children).indexOf(cell.parentElement);
+          if (row === -1) return null;
+          
+          // 获取列索引
+          const column = Array.from(cell.parentElement.children).indexOf(cell);
+          if (column === -1) return null;
+          
+          // 获取单元格内容
+          const content = cell.textContent.trim();
+          
+          // 获取对应的属性名
+          const table = this.$refs.tableRef;
+          const columnProperty = table.columns[column].property;
+          
+          return { row, column, content, columnProperty, element: cell };
+        },
+        
+        // 更新选择范围
+        updateSelectionRange(finalize = false) {
+          if (!this.startCell || !this.endCell) return;
+          
+          // 计算选择范围
+          const startRow = Math.min(this.startCell.row, this.endCell.row);
+          const endRow = Math.max(this.startCell.row, this.endCell.row);
+          const startColumn = Math.min(this.startCell.column, this.endCell.column);
+          const endColumn = Math.max(this.startCell.column, this.endCell.column);
+          
+          if (finalize) {
+            // 最终确定选择范围
+            this.clearSelection();
+            
+            // 选择范围内的所有单元格
+            for (let row = startRow; row <= endRow; row++) {
+              for (let col = startColumn; col <= endColumn; col++) {
+                const cell = this.getCellByPosition(row, col);
+                if (cell) {
+                  const cellInfo = this.getCellInfo(cell);
+                  this.selectCell(cellInfo);
+                }
+              }
+            }
+          } else {
+            // 实时显示选择范围指示器
+            const startCell = this.getCellByPosition(startRow, startColumn);
+            const endCell = this.getCellByPosition(endRow, endColumn);
+            
+            if (startCell && endCell) {
+              const selectionRange = document.getElementById('selectionRange');
+              const startRect = startCell.getBoundingClientRect();
+              const endRect = endCell.getBoundingClientRect();
+              const tableRect = this.$refs.tableRef.$el.getBoundingClientRect();
+              
+              selectionRange.style.left = `${startRect.left - tableRect.left}px`;
+              selectionRange.style.top = `${startRect.top - tableRect.top}px`;
+              selectionRange.style.width = `${endRect.right - startRect.left}px`;
+              selectionRange.style.height = `${endRect.bottom - startRect.top}px`;
+              selectionRange.style.display = 'block';
+            }
+          }
+        },
+        
+        // 根据行列位置获取单元格元素
+        getCellByPosition(rowIndex, columnIndex) {
+          const table = this.$refs.tableRef;
+          const rows = table.$el.querySelectorAll('tbody tr');
+          
+          if (rowIndex >= 0 && rowIndex < rows.length) {
+            const row = rows[rowIndex];
+            const cells = row.querySelectorAll('td');
+            
+            if (columnIndex >= 0 && columnIndex < cells.length) {
+              return cells[columnIndex];
+            }
+          }
+          
+          return null;
+        },
+        
+        // 选择单元格
+        selectCell(cellInfo) {
+          if (!cellInfo || this.isCellSelected(cellInfo)) return;
+          
+          // 添加到选中列表
+          this.selectedCells.push(cellInfo);
+          
+          // 添加选中样式
+          if (cellInfo.element) {
+            cellInfo.element.classList.add('selected-cell');
+          }
+        },
+        
+        // 取消选择单元格
+        deselectCell(cellInfo) {
+          if (!cellInfo) return;
+          
+          // 从选中列表中移除
+          this.selectedCells = this.selectedCells.filter(cell => 
+            cell.row !== cellInfo.row || cell.column !== cellInfo.column
+          );
+          
+          // 移除选中样式
+          if (cellInfo.element) {
+            cellInfo.element.classList.remove('selected-cell');
+          }
+        },
+        
+        // 切换单元格选择状态
+        toggleCellSelection(cellInfo) {
+          if (this.isCellSelected(cellInfo)) {
+            this.deselectCell(cellInfo);
+          } else {
+            this.selectCell(cellInfo);
+          }
+        },
+        
+        // 检查单元格是否已选中
+        isCellSelected(cellInfo) {
+          if (!cellInfo) return false;
+          
+          return this.selectedCells.some(cell => 
+            cell.row === cellInfo.row && cell.column === cellInfo.column
+          );
+        },
+        
+        // 清除所有选择
+        clearSelection() {
+          // 移除所有选中样式
+          this.selectedCells.forEach(cell => {
+            if (cell.element) {
+              cell.element.classList.remove('selected-cell');
+            }
+          });
+          
+          // 清空选中列表
+          this.selectedCells = [];
+          
+          // 重置起始和结束单元格
+          this.startCell = null;
+          this.endCell = null;
+          
+          // 更新预览
+          this.updateSelectionPreview();
+        },
+        
+        // 全选所有单元格
+        selectAll() {
+          this.clearSelection();
+          
+          const table = this.$refs.tableRef;
+          const rows = table.$el.querySelectorAll('tbody tr');
+          
+          rows.forEach((row, rowIndex) => {
+            const cells = row.querySelectorAll('td');
+            
+            cells.forEach((cell, columnIndex) => {
+              const cellInfo = this.getCellInfo(cell);
+              if (cellInfo) {
+                this.selectCell(cellInfo);
+              }
+            });
+          });
+          
+          this.updateSelectionPreview();
+        },
+        
+        // 复制选中内容到剪贴板
+        copySelection() {
+          if (this.selectedCells.length === 0) {
+            this.$message.warning('没有选中的单元格');
+            return;
+          }
+          
+          // 按行和列排序选中的单元格
+          const sortedCells = [...this.selectedCells].sort((a, b) => {
+            if (a.row !== b.row) {
+              return a.row - b.row;
+            }
+            return a.column - b.column;
+          });
+          
+          // 生成表格数据
+          let copyText = '';
+          let currentRow = sortedCells[0].row;
+          
+          sortedCells.forEach(cell => {
+            if (cell.row !== currentRow) {
+              copyText += '\n';
+              currentRow = cell.row;
+            } else if (cell.column > 0) {
+              copyText += '\t';
+            }
+            
+            copyText += cell.content;
+          });
+          
+          // 复制到剪贴板
+          navigator.clipboard.writeText(copyText).then(() => {
+            this.$message.success('已复制到剪贴板');
+          }).catch(err => {
+            this.$message.error('复制失败，请手动复制');
+            console.error('复制失败:', err);
+          });
+        },
+        
+        // 更新选择内容预览
+        updateSelectionPreview() {
+          const previewElement = document.getElementById('selectionPreview');
+          
+          if (this.selectedCells.length === 0) {
+            previewElement.textContent = '框选单元格后，内容将显示在这里...';
+            return;
+          }
+          
+          // 按行和列排序选中的单元格
+          const sortedCells = [...this.selectedCells].sort((a, b) => {
+            if (a.row !== b.row) {
+              return a.row - b.row;
+            }
+            return a.column - b.column;
+          });
+          
+          // 生成预览文本
+          let previewText = '';
+          let currentRow = sortedCells[0].row;
+          
+          sortedCells.forEach(cell => {
+            if (cell.row !== currentRow) {
+              previewText += '\n';
+              currentRow = cell.row;
+            } else if (cell.column > 0) {
+              previewText += ' | ';
+            }
+            
+            previewText += cell.content;
+          });
+          
+          previewElement.textContent = previewText;
+        },
+        
+        // 处理键盘按下
+        handleKeyDown(event) {
+          if (event.key === 'Control' || event.key === 'Meta') {
+            this.ctrlKeyPressed = true;
+          }
+          
+          if (event.key === 'Shift') {
+            this.shiftKeyPressed = true;
+          }
+        },
+        
+        // 处理键盘释放
+        handleKeyUp(event) {
+          if (event.key === 'Control' || event.key === 'Meta') {
+            this.ctrlKeyPressed = false;
+          }
+          
+          if (event.key === 'Shift') {
+            this.shiftKeyPressed = false;
+          }
+        },
+        
+        // 处理单元格鼠标进入
+        handleCellMouseEnter(row, column, cell, event) {
+          cell.classList.add('bg-gray-50');
+        },
+        
+        // 处理单元格鼠标离开
+        handleCellMouseLeave(row, column, cell, event) {
+          if (!this.isCellSelected(this.getCellInfo(cell))) {
+            cell.classList.remove('bg-gray-50');
+          }
+        },
+        
+        // 处理单元格点击
+        handleCellClick(row, column, cell, event) {
+          // 如果不是左键点击或正在选择，不处理
+          if (event.button !== 0 || this.isSelecting) return;
+          
+          const cellInfo = this.getCellInfo(cell);
+          if (!cellInfo) return;
+          
+          // 处理点击选择
+          if (this.ctrlKeyPressed) {
+            // Ctrl+点击：切换选择状态
+            this.toggleCellSelection(cellInfo);
+          } else if (this.shiftKeyPressed && this.startCell) {
+            // Shift+点击：从起点扩展选择
+            this.endCell = cellInfo;
+            this.updateSelectionRange(true);
+          } else {
+            // 普通点击：清除现有选择，选择当前单元格
+            this.clearSelection();
+            this.selectCell(cellInfo);
+          }
+          
+          this.updateSelectionPreview();
+        }
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .table-cloumn-setting-popper{
+    .setting-row-content{
+      max-height: 600px;
+      overflow-y: auto;
+      //overflow-y: hidden;
+      .setting-row{
+        height: 30px;
+        line-height: 30px;
+        .el-icon-s-operation{
+          cursor: move;
+          font-size: 16px;
+          margin-right: 8px;
+        }
+        .label{
+          margin-right: 8px;
+        }
+        .btn{
+          padding: 4px!important;
+        }
+      }
+    }
+  }
+  .xd-table{
+    width:100%;
+    height:100%;
+    position: relative;
+    .el-icon-setting{
+      position: absolute;
+      right: 7px;
+      top: 5px;
+      cursor: pointer;
+    }
+    .table-operate-btn-content{
+      // width: calc(100% - 40px);
+      width: 100%;
+      // min-height: 28px; // 给一个最低的高度，防止没有插槽，右侧icon被吞
+      min-height: 40px; // 给一个最低的高度，防止没有插槽，右侧icon被吞
+     .operate-btn-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        min-height: 28px;
+        padding-bottom: 6px;
+      }
+    }
+
+    .parent:has(.child){
+        background-color: #eee;
+    }
+  }
+
+
+
+.pagination-container{
+  padding: 0px 20px !important;
+}
+
+.menuDiv {
+  position: absolute;
+  background-color: #fff;
+  width: 100px;
+  /*height: 106px;*/
+}
+
+
+:deep .seled{
+  background-color: #51dd397d !important;
+
+  color: black;
+  font-weight: 600;
+}
+
+:deep .rowSeled{
+  background-color: #ffa5a55e !important;
+
+  color: black;
+  font-weight: 600;
+}
+
+.xd-tb-wrapper :deep .el-table__body tr:hover > td {
+     background-color: #ffa5a55e;
+ }
+
+.xd-tb-wrapper{
+		-webkit-user-select: none; /* Safari */
+		-moz-user-select: none; /* Firefox */
+		-ms-user-select: none; /* Internet Explorer/Edge */
+		user-select: none;
+}
+
+
+.drag-ghost { background-color: #e7e7e77d; }
+.drag-chosen { background-color: #e7e7e77d; }
+
+// 拖拽
+.dragClass {
+  background: rgba($color: #41c21a, $alpha: 0.5) !important;
+}
+// 停靠
+.ghostClass {
+  background: rgba($color: #6cacf5, $alpha: 0.5) !important;
+}
+// 选择
+.chosenClass:hover > td {
+  background: rgba($color: #f56c6c, $alpha: 0.5) !important;
+}
+
+.el-table__body tr.current-row > td {
+    background-color: #78f709 !important;
+}
+.el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: #f6d604 !important;
+    cursor:pointer;
+}
+
+.full-block{
+    height:100%;
+    width:100%;
+    overflow:hidden;
+}
+.flex-layout{
+    display:flex;
+    flex-direction:column;
+}
+.flex-auto{
+    flex:1 1 auto
+}
+.flex-none{
+    flex:none
+}
+
+.el-table {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	.el-table__body-wrapper {
+		flex: 1;
+    }
+}
+
+
+.content-auto {
+        content-visibility: auto;
+}
+.selected-cell {
+  background-color: rgba(64, 158, 255, 0.2) !important;
+  border: 1px solid #409EFF !important;
+}
+.selection-range {
+  position: absolute;
+  background-color: rgba(64, 158, 255, 0.1);
+  border: 1px dashed #409EFF;
+  pointer-events: none;
+  z-index: 10;
+}
+
+
+</style>
+
+

src/views/emis/emisCustomerUser/moneyUserList.vue

@@ -240,11 +240,13 @@ import EmisUserSimplePicker2 from '@/views/emis/EmisBaseTools/EmisUserSimplePick
 import EmpNamePicker1 from '@/views/emis/EmisBaseTools/EmpNamePicker.vue';
 import EmpNamePicker2 from '@/views/emis/EmisBaseTools/EmpNamePicker.vue';
 
+import XdTable3 from '@/components/XdTable/index3.vue';
+
 export default {
   name: "MoneyUserList",
   components: {AirTable, EmpNamePicker1,EmpNamePicker2,elDateSimplePicker,moneyUserForm ,CountryPicker,
     EmisSiteSimplePicker,ProvincePicker,CityPicker,
-    EmisUserSimplePicker0,EmisUserSimplePicker1,EmisUserSimplePicker2
+    EmisUserSimplePicker0,EmisUserSimplePicker1,EmisUserSimplePicker2,XdTable3
   },
   dicts: [
   ],