选中元素回显

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

@@ -12,14 +12,18 @@
 
 <script>
 import Vue from 'vue'
-import {getExcelHtml} from '@/api/exctab/excelmodel'
+import { getExcelHtml } from '@/api/exctab/excelmodel'
 
 export default {
-  props: ['pkeyId','initTableName'],
+  props: [
+    'pkeyId', 
+    'initTableName',
+    'selectedTableKey' // 接收父组件传递的选中key
+  ],
   data() {
     return {
       selectedElements: [], // 存储已选中的元素
-      exHtml:'',
+      exHtml: '',
       currentComponent: null
     }
   },
@@ -28,44 +32,72 @@ export default {
       immediate: true,
       deep: true,
       handler(newVal) {
-        console.log(newVal,'newVal');
-        
-        if(newVal) {
+        if (newVal) {
           this.exHtml = ''
-          this.getExcelHtml(newVal)// 重新初始化数据
+          this.getExcelHtml(newVal)
         } else {
           this.exHtml = ''
           this.clearForm()
         }
       }
+    },
+    // 监听选中的key变化，同步高亮显示
+    selectedTableKey: {
+      handler(newKey) {
+        // 清除所有选中状态
+        this.clearAllSelected();
+        
+        // 如果有新的选中key，高亮对应的元素组
+        if (newKey && newKey.startsWith('key_')) {
+          this.highlightElementsByKey(newKey);
+        }
+      },
+      immediate: true
     }
   },
-  mounted() {},
   methods: {
+    // 根据key高亮对应的元素组
+    highlightElementsByKey(key) {
+      // 提取key前缀（例如从key_1中提取key_1）
+      const keyPrefix = key.split('__')[0];
+      
+      // 找到所有具有相同前缀的元素
+      const samePrefixElements = document.querySelectorAll(`[id^="${keyPrefix}__"]`);
+      
+      // 如果没有找到带__的元素，直接查找当前key的元素
+      if (samePrefixElements.length === 0) {
+        const element = document.getElementById(key);
+        if (element) {
+          this.selectElements([element]);
+          return;
+        }
+      }
+      
+      // 选中这组元素
+      this.selectElements(samePrefixElements);
+    },
+    
     async getExcelHtml(pkeyId) {
-      // 先清除旧内容
       this.clearForm();
-      const {data: res} = await getExcelHtml({pkeyId})
+      const { data: res } = await getExcelHtml({ pkeyId })
       if (res.code === 200) {
         this.exHtml = res.data
         this.cop();
       }
     },
-    // 新增清空表单方法
+    
     clearForm() {
       const parentElement = document.getElementById('parent')
-      
-      if(parentElement) {
-        // 清空父元素内容
+      if (parentElement) {
         parentElement.innerHTML = ''
       }
-      // 清空已选中元素
       this.clearAllSelected()
     },
+    
     async cop() {
       let _that = this
       var MyComponent = await Vue.extend({
-        template: this.exHtml ,
+        template: this.exHtml,
         data() {
           return {
             formData: {},
@@ -74,8 +106,8 @@ export default {
           }
         },
         methods: {
-          contextmenuClick(tr, td, x1, x2, y1, y2, event) {},
-          getInformation(name, tr, td) {},//鼠标右键事件
+          contextmenuClick() {},
+          getInformation() {},
           formUploadSuccess() {},
           formUploadExceed() {},
           formUploadLoading() {},
@@ -96,59 +128,58 @@ export default {
       })
       var component = new MyComponent().$mount()
       document.getElementById('parent').appendChild(component.$el);
+      
+      // 组件渲染后，检查是否需要高亮元素
+      if (this.selectedTableKey) {
+        this.highlightElementsByKey(this.selectedTableKey);
+      }
     },
-
-    // 单选模式的点击处理方法
+    
     async parentClick(e) {
-      // 获取实际有ID的元素（可能需要向上查找）
+      // 原有点击处理逻辑保持不变
       let target = e.target;
       while (target && !target.id && target.parentNode) {
         target = target.parentNode;
       }
       
-      // 如果没有找到带ID的元素，直接返回
-      if (!target || !target.id||!target.placeholder) {
-             this.$message({
-            type: "warning",
-            message: "当前位置未配置元素，请重新选择或配置元素后再试"
-          });
-           return;
+      if (!target || !target.id) return;
+      // 3. 关键：判断元素是否包含warnstyle类（处理父级可能带类的情况）
+      let hasWarnStyle = false;
+      // 先检查当前元素，再检查父级（因warnstyle可能加在el-input容器上）
+      if (target.classList.contains('warnstyle') || target.parentNode.classList.contains('warnstyle')) {
+        hasWarnStyle = true;
+      }
+
+      // 4. 含warnstyle类时触发警告并终止流程
+      if (hasWarnStyle) {
+        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);
@@ -162,18 +193,15 @@ export default {
       });
     },
     
-    // 处理非key_开头的元素
     handleNormalElement(target, id) {
       const elementId = this.initTableName + ':' + target.id.split('__')[0];
-      const keyName = target.placeholder;
+ 
       
-      // 添加选中效果
-      target.style.backgroundColor = '#ffa500'; // 橙色背景
+      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.id);
@@ -204,6 +232,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/* 样式保持不变 */
 .excelHtnl {
   margin: 0 0 0 10px;
   background-color: #fff;
@@ -212,7 +241,6 @@ export default {
   height: 100%;
 }
 
-// 设置图片样式
 .hc-upload-table-form {
   position: relative;
   height: 100%;

src/views/formula/edit.vue

@@ -44,7 +44,7 @@
         <span>
           <formula-item
             v-for="(item,index) in resultFormula" :key="index"
-            :item="item" @click="obj => equationClick(obj,index,'resultFormula')"
+            :item="item" @click="obj => equationClick(obj,index,'resultFormula')" :showCursor="false"
           >
           </formula-item>
         </span>
@@ -155,7 +155,7 @@
                 <div class="mg-t-10 no-mb-col flex1" >
                   <el-scrollbar style="height: 450px">
         
-                     <tableFormWrite :pkeyId="eleTableId" @element-selected="handleElementSelected" :initTableName="initTableName"></tableFormWrite>
+                     <tableFormWrite :pkeyId="eleTableId" @element-selected="handleElementSelected" :initTableName="initTableName"  :selectedTableKey="selectedTableKey"></tableFormWrite>
                   </el-scrollbar>
                 </div>
          
@@ -626,6 +626,7 @@ export default {
       remark:'',//备注
       initTableName:'',//初始表名
       containerFocused:false,//公式编辑区域是否聚焦
+      selectedTableKey:'', // 存储选中的表格元素key
 
     };
   },
@@ -667,7 +668,9 @@ export default {
         });
     },
     deep: true
-  }
+  },
+
+
 },
   created() {
     // this.wbsid = this.$route.query.wbsid;
@@ -793,6 +796,8 @@ export default {
       this.selectEleFormula= JSON.parse(JSON.stringify(this.processFormula));
       this.operationVisible = true;
        this.checkDefaultSelection();
+           const keyParts = this.selectEleFormula[ this.curSeleEleIndex].tableElementKey.split(':');
+        this.selectedTableKey = keyParts.length > 1 ? keyParts[1] : null;
         // 确保容器获得焦点
         this.$nextTick(() => {
           this.$el.querySelector('.sele-ele-box1').focus();
@@ -1224,6 +1229,8 @@ setActiveElement(index) {
         const lastIndex = this.selectEleFormula.length - 1;
         this.selectEleFormula[lastIndex].selected = true;
         this.curSeleEleIndex = lastIndex;
+        //   const keyParts = this.selectEleFormula[ this.curSeleEleIndex].tableElementKey.split(':');
+        // this.selectedTableKey = keyParts.length > 1 ? keyParts[1] : null;
       }
     },
     // 点击元素时的处理
@@ -1238,9 +1245,21 @@ setActiveElement(index) {
       this.curSeleEleIndex = index;
       
       // 确保容器获得焦点以接收键盘事件
-      this.$nextTick(() => {
-        this.$el.querySelector('.sele-ele-box1').focus();
-      });
+       this.$el.querySelector('.sele-ele-box1').focus();
+    // 处理类型为ELEMENT的元素，提取tableElementKey
+    console.log(obj.item,'obj.item.');
+    
+      if (obj.item.type === 'Element' && obj.item.tableElementKey) {
+        // 从类似"m_20220928142210_1575007943793836032:key_1"的格式中提取key部分
+        const keyParts = obj.item.tableElementKey.split('key');
+        this.selectedTableKey = keyParts.length > 1 ? 'key'+keyParts[1] : null;
+   
+        
+      } else {
+        // 非ELEMENT类型清空选中状态
+        this.selectedTableKey = null;
+      }
+      
     },
     
     // 左箭头导航
@@ -1255,6 +1274,9 @@ setActiveElement(index) {
         // 选中左侧项
         this.curSeleEleIndex--;
         this.selectEleFormula[this.curSeleEleIndex].selected = true;
+        // this.selectedTableKey = this.selectEleFormula[this.curSeleEleIndex].tableElementKey;
+         const keyParts =  this.selectEleFormula[this.curSeleEleIndex].tableElementKey.split('key');
+        this.selectedTableKey = keyParts.length > 1 ? 'key'+keyParts[1] : null;
       }
     },
     
@@ -1270,6 +1292,9 @@ setActiveElement(index) {
         // 选中右侧项
         this.curSeleEleIndex++;
         this.selectEleFormula[this.curSeleEleIndex].selected = true;
+        // this.selectedTableKey = this.selectEleFormula[this.curSeleEleIndex].tableElementKey;
+               const keyParts =  this.selectEleFormula[this.curSeleEleIndex].tableElementKey.split('key');
+        this.selectedTableKey = keyParts.length > 1 ? 'key'+keyParts[1] : null;
       }
     },
     
@@ -1311,12 +1336,15 @@ handleDelete(e) {
       indexToDelete, 
       this.selectEleFormula.length - 1
     );
+      const keyParts =  this.selectEleFormula[this.curSeleEleIndex].tableElementKey.split('key');
+        this.selectedTableKey = keyParts.length > 1 ? 'key'+keyParts[1] : null;
     // 确保选中状态正确
     this.selectEleFormula.forEach((item, idx) => {
       item.selected = idx === this.curSeleEleIndex;
     });
   } else {
     this.curSeleEleIndex = -1;
+    this.selectedTableKey = null;
   }
 },
     //取消勾选