点击相同元素处理

src/views/formula/component/table-form-write.vue

@@ -1,28 +1,24 @@
 <template>
   <div class="excelHtnl">
-
     <div
       class="excelBox hc-excel-table-form"
       style="margin-top:40px;height: 100%;"
       @click="parentClick($event)"
     >
       <div style="width:100%;height: 100%;overflow: scroll;" class='parent' id='parent'></div>
-      
     </div>
   </div>
 </template>
 
 <script>
-
 import Vue from 'vue'
 import {getExcelHtml} from '@/api/exctab/excelmodel'
 
-
 export default {
   props: ['pkeyId','initTableName'],
   data() {
     return {
-      selectedElements: [] ,// 存储已选中的元素
+      selectedElements: [], // 存储已选中的元素
       exHtml:'',
       currentComponent: null
     }
@@ -37,43 +33,35 @@ export default {
         if(newVal) {
           this.exHtml = ''
           this.getExcelHtml(newVal)// 重新初始化数据
-        
-        }else {
+        } else {
           this.exHtml = ''
-           this.clearForm()
+          this.clearForm()
         }
       }
     }
   },
-  mounted() {
-
-  
-  },
-
-
+  mounted() {},
   methods: {
-
     async getExcelHtml(pkeyId) {
-        // 先清除旧内容
-  this.clearForm();
+      // 先清除旧内容
+      this.clearForm();
       const {data: res} = await getExcelHtml({pkeyId})
       if (res.code === 200) {
         this.exHtml = res.data
         this.cop();
       }
     },
-      // 新增清空表单方法
-  clearForm() {
-    const parentElement = document.getElementById('parent')
-
-    
-    if(parentElement) {
-      // 清空父元素内容
-      parentElement.innerHTML = ''
-    }
-    // 清空已选中元素
-    this.clearAllSelected()
-  },
+    // 新增清空表单方法
+    clearForm() {
+      const parentElement = document.getElementById('parent')
+      
+      if(parentElement) {
+        // 清空父元素内容
+        parentElement.innerHTML = ''
+      }
+      // 清空已选中元素
+      this.clearAllSelected()
+    },
     async cop() {
       let _that = this
       var MyComponent = await Vue.extend({
@@ -86,84 +74,116 @@ export default {
           }
         },
         methods: {
-          contextmenuClick(tr, td, x1, x2, y1, y2, event) {
-          },
-          getInformation(name, tr, td) {//鼠标右键事件
-            
-          },
-          formUploadSuccess() {
-          },
-          formUploadExceed() {
-          },
-          formUploadLoading() {
-          },
-          delTableFormFile() {
-          },
-          formUploadError() {
-          },
-          uploadprogress() {
-          },
-          formRemoteMethod() {
-          },
-          getRegularExpression() {
-          },
-          checkboxGroupChange() {
-          },
-          formRemoteChange() {
-          },
-          dateKeydown() {
-          },
-          keyupShiftUp() {
-          },
-          keyupShiftDown() {
-          },
-          keyupShiftLeft() {
-          },
-          keyupShiftRight() {
-          },
-          inputLeftClick() {
-          },
+          contextmenuClick(tr, td, x1, x2, y1, y2, event) {},
+          getInformation(name, tr, td) {},//鼠标右键事件
+          formUploadSuccess() {},
+          formUploadExceed() {},
+          formUploadLoading() {},
+          delTableFormFile() {},
+          formUploadError() {},
+          uploadprogress() {},
+          formRemoteMethod() {},
+          getRegularExpression() {},
+          checkboxGroupChange() {},
+          formRemoteChange() {},
+          dateKeydown() {},
+          keyupShiftUp() {},
+          keyupShiftDown() {},
+          keyupShiftLeft() {},
+          keyupShiftRight() {},
+          inputLeftClick() {},
         }
       })
       var component = new MyComponent().$mount()
       document.getElementById('parent').appendChild(component.$el);
     },
 
-
-
- 
-    //excel父节点点击检测
-      async parentClick(e) {
+    // 单选模式的点击处理方法
+    async parentClick(e) {
+      // 获取实际有ID的元素（可能需要向上查找）
       let target = e.target;
-        // const elementId = target.id;
-        const elementId = this.initTableName+':'+target.id.split('__')[0]; 
-        const keyName = target.placeholder;
-        const id=target.id
-        // 判断元素是否已选中
-        const index = this.selectedElements.findIndex(item => item.id === id);
+      while (target && !target.id && target.parentNode) {
+        target = target.parentNode;
+      }
+      
+      // 如果没有找到带ID的元素，直接返回
+      if (!target || !target.id||!target.placeholder) {
+             this.$message({
+            type: "warning",
+            message: "当前位置未配置元素，请重新选择或配置元素后再试"
+          });
+           return;
+      }
+     
+      
+      const id = target.id;
+      // 检查当前元素是否已选中
+      const isAlreadySelected = this.selectedElements.some(item => item.id === id);
+      
+      // 先清除所有已选中状态
+      this.clearAllSelected();
+      
+      // 如果当前元素之前未选中，则选中它（及其同组元素）
+      if (!isAlreadySelected) {
+        // 检查是否是以key_开头的元素
+        if (id.startsWith('key_')) {
+          // 提取key前缀（例如从key_9__10_7中提取key_9）
+          const keyPrefix = this.extractKeyPrefix(id);
+          
+          // 找到所有具有相同前缀的元素
+          const samePrefixElements = document.querySelectorAll(`[id^="${keyPrefix}__"]`);
+          
+          // 选中这组元素
+          this.selectElements(samePrefixElements);
+        } else {
+          // 处理非key_开头的元素
+          this.handleNormalElement(target, id);
+        }
+      }
+    },
+    
+    // 提取key前缀（例如从key_9__10_7中提取key_9）
+    extractKeyPrefix(id) {
+      const parts = id.split('__');
+      return parts.length > 0 ? parts[0] : id;
+    },
+    
+    // 选中一组元素
+    selectElements(elements) {
+      elements.forEach(el => {
+        const index = this.selectedElements.findIndex(item => item.id === el.id);
         if (index === -1) {
-          // 添加选中效果
-          target.style.backgroundColor = '#ffa500'; // 橙色背景
-          this.selectedElements.push({tableElementKey:elementId, eName:keyName,id}); // 存储选中元素的id和keyName
-           this.$emit('element-selected', {tableElementKey:elementId, eName:keyName,id},true);
-        } else {  
-          // 取消选中效果
-          target.style.backgroundColor = ''; // 恢复默认背景
-          this.selectedElements.splice(index, 1);
-             this.$emit('element-selected', {tableElementKey:elementId, eName:keyName,id},false);
+          el.style.backgroundColor = '#ffa500'; // 橙色背景
+          const elementId = this.initTableName + ':' + this.extractKeyPrefix(el.id);
+          const keyName = el.placeholder;
+          this.selectedElements.push({ tableElementKey: elementId, eName: keyName, id: el.id });
+          this.$emit('element-selected', { tableElementKey: elementId, eName: keyName, id: el.id }, true);
         }
-        
-        // 触发选中元素变化事件
-        // this.$emit('element-selected', this.selectedElements);
-
+      });
+    },
+    
+    // 处理非key_开头的元素
+    handleNormalElement(target, id) {
+      const elementId = this.initTableName + ':' + target.id.split('__')[0];
+      const keyName = target.placeholder;
       
+      // 添加选中效果
+      target.style.backgroundColor = '#ffa500'; // 橙色背景
+      this.selectedElements.push({ tableElementKey: elementId, eName: keyName, id });
+      this.$emit('element-selected', { tableElementKey: elementId, eName: keyName, id }, true);
     },
-        // 清除所有选中状态的方法
+    
+    // 清除所有选中状态的方法
     clearAllSelected() {
       this.selectedElements.forEach(item => {
-        const element = document.getElementById(item.elementId);
+        const element = document.getElementById(item.id);
         if (element) {
           element.style.backgroundColor = '';
+          this.$emit('element-selected', { 
+            tableElementKey: item.tableElementKey, 
+            eName: item.eName, 
+            id: item.id 
+          }, false);
         }
       });
       this.selectedElements = [];
@@ -178,13 +198,8 @@ export default {
         targetParent = targetParent.parentNode;
       }
       return targetParent;
-    },
-
-
-
-
-  },
-
+    }
+  }
 }
 </script>
 
@@ -241,11 +256,7 @@ export default {
 ::v-deep .warnstyle .el-textarea__inner {
   background-image: url('/img/login/warn.png') !important;
   background-repeat: no-repeat;
-  // background-size:cover;
   background-position-x: 45%;
   background-position-y: 46%;
 }
 </style>
-
-
-

src/views/formula/edit.vue

@@ -465,6 +465,7 @@ import draggable from 'vuedraggable'
 import {formatArrayMore,restoreArrayMore,generateResult} from './component/funComponent/multiIfElseTools'
 import dataChange from "./component/funComponent/dataChange"
 import tableFormWrite from "./component/table-form-write.vue";
+import { log } from "@antv/g2plot/lib/utils";
 
 export default {
   components: {
@@ -995,94 +996,129 @@ export default {
       console.log('取消');
     },
     //把元素加到公式里
-    eleAddFormulaHandle(ele){
-      if(ele.tableElementKey){
-        console.log(ele,'ele');
-        //元素
-        if(this.deleEleIndex > -1 && this.selectEleFormula.length-1 >= this.deleEleIndex){
-          //删除元素的位置，如果下次添加元素，先加到这个位置
-          this.selectEleFormula.splice(this.deleEleIndex,0,{
-            type:'Element',
-            name:ele.eName,
-            id:ele.id,
-            selected:false,
-            tableElementKey:ele.tableElementKey,
-            children:[],
-          })
-          this.deleEleIndex = -1;
-        }else{
-          this.selectEleFormula.push({
-            type:'Element',
-            name:ele.eName,
-            id:ele.id,
-            selected:false,
-            tableElementKey:ele.tableElementKey,
-            children:[],
-          })
-          this.deleEleIndex = -1;
-        }
+ eleAddFormulaHandle(ele) {
+  let newElementIndex = -1; // 记录新添加元素的索引
+  
+  if(ele.tableElementKey){
+    console.log(ele,'ele');
+    // 元素处理
+    if(this.deleEleIndex > -1 && this.selectEleFormula.length-1 >= this.deleEleIndex){
+      // 在删除位置插入新元素
+      this.selectEleFormula.splice(this.deleEleIndex, 0, {
+        type:'Element',
+        name:ele.eName,
+        id:ele.id,
+        selected:false,
+        tableElementKey:ele.tableElementKey,
+        children:[],
+      });
+      newElementIndex = this.deleEleIndex; // 新元素索引就是插入位置
+      this.deleEleIndex = -1;
+    }else{
+      // 直接添加到末尾
+      this.selectEleFormula.push({
+        type:'Element',
+        name:ele.eName,
+        id:ele.id,
+        selected:false,
+        tableElementKey:ele.tableElementKey,
+        children:[],
+      });
+      newElementIndex = this.selectEleFormula.length - 1; // 新元素索引是最后一个
+      this.deleEleIndex = -1;
+    }
 
-      }else if(ele.template && ele.example){
+    // 选中新添加的元素并更新光标位置
+    this.setActiveElement(newElementIndex);
 
-        //简单语法判断
-        if(this.selectEleFormula.length == 0){
-          this.$message({
-            type: "warning",
-            message: "公式开头不能是运算符号"
-          });
-          return;
-        }else{
-          let lastEle = this.selectEleFormula[this.selectEleFormula.length-1];
-          if(lastEle.type == 'Operator'){
-            this.$message({
-              type: "warning",
-              message: "运算符号无法连续出现在运算符号后面"
-            });
-            return;
-          }
-          if(lastEle.type == 'Brackets' && lastEle.name == '('){
-            this.$message({
-              type: "warning",
-              message: "运算符号无法连续出现在左括号后面"
-            });
-            return;
-          }
-        }
-
-        //运算符号
-        this.selectEleFormula.push({
-          type:'Operator',
-          name:this.symbolReg.exec(ele.name)[1],
-          selected:false,
-          template:ele.template
-        })
-      }else if(ele.type == 'Brackets'){
-        //括号
-        this.selectEleFormula.splice(ele.selectIndex,0,{
-          type:'Brackets',
-          name:ele.name,
-          selected:false,
-        })
-      }else if(ele.type == 'Text'){
-        //输入值
-        this.selectEleFormula.push({
-          type:'Text',
-          name:ele.name,
-          selected:false,
-        })
-      }else if(ele.k){
-        //节点参数
-        this.selectEleFormula.push({
-          type:'ParamData',
-          name:ele.name,
-          selected:false,
-          id:ele.id,
-          v:ele.v,
-          k:ele.k,
-          children:[],
-        })
+  }else if(ele.template && ele.example){
+    // 运算符号处理（保持原有逻辑）
+    if(this.selectEleFormula.length == 0){
+      this.$message({
+        type: "warning",
+        message: "公式开头不能是运算符号"
+      });
+      return;
+    }else{
+      let lastEle = this.selectEleFormula[this.selectEleFormula.length-1];
+      if(lastEle.type == 'Operator'){
+        this.$message({
+          type: "warning",
+          message: "运算符号无法连续出现在运算符号后面"
+        });
+        return;
       }
-    },
+      if(lastEle.type == 'Brackets' && lastEle.name == '('){
+        this.$message({
+          type: "warning",
+          message: "运算符号无法连续出现在左括号后面"
+        });
+        return;
+      }
+    }
+
+    this.selectEleFormula.push({
+      type:'Operator',
+      name:this.symbolReg.exec(ele.name)[1],
+      selected:false,
+      template:ele.template
+    });
+    newElementIndex = this.selectEleFormula.length - 1;
+    this.setActiveElement(newElementIndex);
+
+  }else if(ele.type == 'Brackets'){
+    // 括号处理
+    this.selectEleFormula.splice(ele.selectIndex,0,{
+      type:'Brackets',
+      name:ele.name,
+      selected:false,
+    });
+    newElementIndex = ele.selectIndex;
+    this.setActiveElement(newElementIndex);
+
+  }else if(ele.type == 'Text'){
+    // 输入值处理
+    this.selectEleFormula.push({
+      type:'Text',
+      name:ele.name,
+      selected:false,
+    });
+    newElementIndex = this.selectEleFormula.length - 1;
+    this.setActiveElement(newElementIndex);
+
+  }else if(ele.k){
+    // 节点参数处理
+    this.selectEleFormula.push({
+      type:'ParamData',
+      name:ele.name,
+      selected:false,
+      id:ele.id,
+      v:ele.v,
+      k:ele.k,
+      children:[],
+    });
+    newElementIndex = this.selectEleFormula.length - 1;
+    this.setActiveElement(newElementIndex);
+  }
+},
+// 新增：设置指定索引的元素为选中状态并更新光标
+setActiveElement(index) {
+  this.$nextTick(() => {
+    // 取消所有元素的选中状态
+    this.selectEleFormula.forEach(item => {
+      item.selected = false;
+    });
+    
+    // 选中新添加的元素
+    if (this.selectEleFormula[index]) {
+      this.selectEleFormula[index].selected = true;
+      this.curSeleEleIndex = index; // 更新光标索引
+    }
+    
+    // 确保容器获得焦点
+    this.$el.querySelector('.sele-ele-box1').focus();
+  });
+},
 
     //添加括号
     addBrackets(text,type){
@@ -2219,53 +2255,104 @@ console.log(remark,'remark');
         })
       })
     },
-    handleElementSelected(item,value){
-      console.log(item,'选中的元素');
-      console.log(this.itemList,'this.itemList');
-     if(value){
-        //简单语法判断
-        if(this.itemList.length != 0 && this.deleEleIndex < 0){
-                let lastEle = this.itemList[this.itemList.length-1];
-                if(lastEle.type == 'Text'){
-                  this.$message({
-                    type: "warning",
-                    message: "元素无法连续出现在输入值后面"
-                  });
-              item.checked = false;
-              return;
-             }
-            if(lastEle.type == 'Brackets' && lastEle.name == ')'){
-              this.$message({
-                type: "warning",
-                message: "元素无法连续出现在右括号后面"
-              });
-              item.checked = false;
-              return;
-            }
-        }
-        let lastEle = this.selectEleFormula[this.selectEleFormula.length-1];
-        if(this.selectEleFormula.length == 0 || lastEle.type == 'Operator' || lastEle.type == 'Brackets' || lastEle.name == '('){ /* 存在运算符 */
-          this.eleAddFormulaHandle(item);
-        } else {
-          this.itemList.push(item);
-        }
+  
+// 修改元素选择处理方法，实现替换或添加逻辑
+handleElementSelected(item, value) {
+  console.log(item,'item');
+  if(!item.eName){
+    this.$message({
+      type: "warning",
+      message: "当前位置未配置元素，请重新选择或配置元素后再试"
+    });
+    return;
+  }
+  
 
-      }else{
-           let index = -1;
-            for (let i = 0; i < this.itemList.length; i++) {
-            if(this.itemList[i].id == item.id){
-              index = i;
-              break;
-            }
-          }
-          if(index>-1){
-            this.itemList.splice(index,1);
-          }
+  if (value) {
+    // 检查是否有选中的公式项
+    if (this.curSeleEleIndex !== -1 && this.curSeleEleIndex < this.selectEleFormula.length) {
+      const selectedItem = this.selectEleFormula[this.curSeleEleIndex];
+      
+      // 如果当前选中的是Element类型，执行替换操作
+      if (selectedItem.type === 'Element') {
+        this.replaceSelectedElement(item);
+        return; // 替换后退出，不执行添加逻辑
+      }
+    }
+    
+    // 执行添加逻辑（当前没有选中项或选中项不是Element类型）
+    // 简单语法判断
+    if (this.selectEleFormula.length > 0) {
+      let lastEle = this.selectEleFormula[this.selectEleFormula.length - 1];
+      if (lastEle.type === 'Text') {
+        this.$message({
+          type: "warning",
+          message: "元素无法连续出现在输入值后面"
+        });
+        item.checked = false;
+        return;
       }
+      if (lastEle.type === 'Brackets' && lastEle.name === ')') {
+        this.$message({
+          type: "warning",
+          message: "元素无法连续出现在右括号后面"
+        });
+        item.checked = false;
+        return;
+      }
+    }
+
+    // 检查是否可以添加元素
+    if (this.selectEleFormula.length === 0 || 
+        ['Operator', 'Brackets'].includes(this.selectEleFormula[this.selectEleFormula.length - 1].type) || 
+        this.selectEleFormula[this.selectEleFormula.length - 1].name === '(') {
+      console.log('可以添加元素');
+      this.eleAddFormulaHandle(item);
+    } else {
+      console.log('不能添加元素');
+      // 可以根据需要添加错误提示
+    }
 
+  } else {
+    // 取消选择处理
+    let index = -1;
+    for (let i = 0; i < this.itemList.length; i++) {
+      if (this.itemList[i].id === item.id) {
+        index = i;
+        break;
+      }
+    }
+    if (index > -1) {
+      this.itemList.splice(index, 1);
+    }
+  }
+},
 
-      
-    },
+// 新增：替换当前选中的元素
+replaceSelectedElement(newItem) {
+  if (this.curSeleEleIndex === -1 || this.curSeleEleIndex >= this.selectEleFormula.length) {
+    return;
+  }
+  
+  const currentIndex = this.curSeleEleIndex;
+  
+  // 取消原元素的勾选状态
+  const oldItem = this.selectEleFormula[currentIndex];
+  this.unCheckEleFormulac(oldItem.id);
+  
+  // 替换元素
+  this.selectEleFormula.splice(currentIndex, 1, {
+    type: 'Element',
+    name: newItem.eName,
+    id: newItem.id,
+    selected: false,
+    tableElementKey: newItem.tableElementKey,
+    children: [],
+  });
+  
+  // 更新选中状态和光标位置
+  this.setActiveElement(currentIndex);
+},
     handleShiftPlus(event) {
       event.preventDefault();
       console.log('Shift + + 被按下');