选择参数获取信息

src/views/formula/component/funComponent/ifelse.vue

@@ -31,11 +31,11 @@
         <div class="mg-t-20 flex jc-al-c">
             <span class="textblod mg-r-20"  v-if="symbol!=='|'">IF</span>
             <div class="flex jc-al-c" v-if="symbol == '<&&<' || symbol == '<=&&<='">
-              <vue-tags-input v-model="tag1" :tags="tags1" @focus="curFocusIndex = 1" @blur="inputBlur(1)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag"/>
+              <vue-tags-input v-model="tag1" :tags="tags1" @focus="curFocusIndex = 1" @blur="inputBlur(1)" placeholder="输入/参数111" @before-adding-tag="beforeAddingTag"/>
               <span v-if="symbol == '<&&<'" class="mg-l-20 mg-r-20">&lt;</span>
               <span v-if="symbol == '<=&&<='" class="mg-l-20 mg-r-20">≤</span>
             </div>
-            <vue-tags-input v-model="tag2" :tags="tags2" @focus="curFocusIndex = 2" @blur="inputBlur(2)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag"/>
+            <vue-tags-input v-model="tag2" :tags="tags2" @focus="curFocusIndex = 2" @blur="inputBlur(2)" placeholder="输入/参数222" @before-adding-tag="beforeAddingTag"  @tag-clicked="handleTagClick($event,2)" ref="tagsInput2"/>
             <span class="mg-l-20 mg-r-20">
               <span v-if="symbol == '>='">≥</span>
               <span v-if="symbol == '<='">≤</span>
@@ -46,13 +46,13 @@
               <span v-if="symbol == '|'">|</span>
         
             </span>
-            <vue-tags-input v-model="tag3" :tags="tags3" @focus="curFocusIndex = 3" @blur="inputBlur(3)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag"/>
+            <vue-tags-input v-model="tag3" :tags="tags3" @focus="curFocusIndex = 3" @blur="inputBlur(3)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag"  @tag-clicked="handleTagClick($event,3)"  ref="tagsInput3"/>
         </div>
          <div class="flex jc-al-c mg-t-20" v-if="result == 1">
           <span class="textblod mg-r-10">真值</span>
-          <vue-tags-input v-model="tag4" :tags="tags4" @focus="curFocusIndex = 4" @blur="inputBlur(4)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag" @keyup.native="btKeyUp"/>
+          <vue-tags-input v-model="tag4" :tags="tags4" @focus="curFocusIndex = 4" @blur="inputBlur(4)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag" @keyup.native="btKeyUp"  @tag-clicked="handleTagClick($event,4)"  ref="tagsInput4"/>
           <span class="textblod mg-r-10 mg-l-20">假值</span>
-          <vue-tags-input v-model="tag5" :tags="tags5" @focus="curFocusIndex = 5" @blur="inputBlur(5)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag" @keyup.native="btKeyUp"/>
+          <vue-tags-input v-model="tag5" :tags="tags5" @focus="curFocusIndex = 5" @blur="inputBlur(5)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag" @keyup.native="btKeyUp"  @tag-clicked="handleTagClick($event,5)"  ref="tagsInput5"/>
         </div>
         <div class="mg-t-20" v-if="result == 2">
           <div class="flex">
@@ -138,12 +138,14 @@
                 <span class="textblod mg-r-20" >IF</span>
                 
                 <vue-tags-input 
+                 :ref="`multiTagsInput_${conditionIndex}_${innerIndex}_tag2`"
                   v-model="conditionList[conditionIndex].formulaIfElse[innerIndex].tag2" 
                   :tags="conditionList[conditionIndex].formulaIfElse[innerIndex].tags2" 
                   @focus="setMultiFocus(conditionIndex, innerIndex, 'tag2')" 
                   @blur="inputBlurMulti(conditionIndex, innerIndex, 'tag2')" 
                   placeholder="输入/参数" 
                   @before-adding-tag="beforeAddingTag"
+                  @tag-clicked="handleMultiTagClick($event, conditionIndex, innerIndex, 'tag2')"
                 />
                 <span class="mg-l-20 mg-r-20">
                 <el-select 
@@ -164,12 +166,14 @@
                 </el-select>
                 </span>
                 <vue-tags-input 
+                  :ref="`multiTagsInput_${conditionIndex}_${innerIndex}_tag3`"
                   v-model="conditionList[conditionIndex].formulaIfElse[innerIndex].tag3" 
                   :tags="conditionList[conditionIndex].formulaIfElse[innerIndex].tags3" 
                   @focus="setMultiFocus(conditionIndex, innerIndex, 'tag3')" 
                   @blur="inputBlurMulti(conditionIndex, innerIndex, 'tag3')" 
                   placeholder="输入/参数" 
                   @before-adding-tag="beforeAddingTag"
+                  @tag-clicked="handleMultiTagClick($event, conditionIndex, innerIndex, 'tag3')"
                 />
                 <i class="el-icon-circle-plus-outline mg-l-20" style="color: #409EFF;cursor: pointer;" @click="addConditionItem(conditionIndex, innerIndex)"></i>
                 <i class="el-icon-delete mg-l-20" style="color: red;cursor: pointer;" @click="removeConditionItem(conditionIndex, innerIndex)" v-if="innerIndex > 0 || conditionIndex > 0"></i>
@@ -178,6 +182,7 @@
          <div class="flex jc-al-c mg-t-20" v-if="result == 1">
           <span class="textblod mg-r-10">满足</span>
           <vue-tags-input 
+            :ref="`multiTagsInput_${conditionIndex}_${innerIndex}_tag4`"
             v-model="conditionList[conditionIndex].tag4" 
             :tags="conditionList[conditionIndex].tags4" 
             @focus="setMultiFocus(conditionIndex, null, 'tag4')" 
@@ -185,12 +190,14 @@
             placeholder="输入/参数" 
             @before-adding-tag="beforeAddingTag" 
             @keyup.native="btKeyUp"
+            @tag-clicked="handleMultiTagClick($event, conditionIndex, innerIndex, 'tag4')"
           />
           
           <!-- 只在最后一个条件显示"不满足"输入框 -->
           <template v-if="conditionIndex === conditionList.length - 1">
             <span class="textblod mg-r-10 mg-l-20">不满足</span>
             <vue-tags-input 
+              :ref="`multiTagsInput_${conditionIndex}_${innerIndex}_tag5`"
               v-model="conditionList[conditionIndex].tag5" 
               :tags="conditionList[conditionIndex].tags5" 
               @focus="setMultiFocus(conditionIndex, null, 'tag5')" 
@@ -198,6 +205,7 @@
               placeholder="输入/参数" 
               @before-adding-tag="beforeAddingTag" 
               @keyup.native="btKeyUp"
+              @tag-clicked="handleMultiTagClick($event, conditionIndex, innerIndex, 'tag5')"
             />
           </template>
           
@@ -291,6 +299,8 @@
                       placeholder="输入/参数" 
                       @before-adding-tag="beforeAddingTag" 
                       @keyup.native="btKeyUp"
+                      @tag-clicked="handleDataTagClick($event, index, 'tagWhenLeft')"
+                      :ref="`dataTag_${index}_tagWhenLeft`"
 
                     />
                   </div>
@@ -321,6 +331,8 @@
                       placeholder="输入/参数" 
                       @before-adding-tag="beforeAddingTag" 
                       @keyup.native="btKeyUp"
+                       @tag-clicked="handleDataTagClick($event, index, 'tagWhenRight')"
+                       :ref="`dataTag_${index}_tagWhenRight`"
                     />
                   </div>
                   
@@ -333,6 +345,8 @@
                       placeholder="输入/参数" 
                       @before-adding-tag="beforeAddingTag" 
                       @keyup.native="btKeyUp"
+                      @tag-clicked="handleDataTagClick($event, index, 'tagThenLeft')"
+                      :ref="`dataTag_${index}_tagThenLeft`"
                     />
                     <span  class="mg-r-10 mg-l-10">=</span>
                     <div class="mg-r-10">
@@ -344,6 +358,8 @@
                           placeholder="输入/参数" 
                           @before-adding-tag="beforeAddingTag" 
                           @keyup.native="btKeyUp"
+                          @tag-clicked="handleDataTagClick($event, index, 'tagThenRight')"
+                          :ref="`dataTag_${index}_tagThenRight`"
                         />
                     </div>
                       <i class="el-icon-circle-plus-outline mg-l-20" style="color: #409EFF;cursor: pointer;" @click="addDataItem(index)"></i>
@@ -363,6 +379,8 @@
                       @before-adding-tag="beforeAddingTag" 
                       @keyup.native="btKeyUp"
                       class="mg-r-10"
+                      @tag-clicked="handleElseTagClick($event, 'left')"
+                      ref="elseTagLeft"
                     />
                     <span class="mg-r-10">=</span>
                     <vue-tags-input 
@@ -373,6 +391,8 @@
                       placeholder="请选择/输入参数" 
                       @before-adding-tag="beforeAddingTag" 
                       @keyup.native="btKeyUp"
+                       @tag-clicked="handleElseTagClick($event, 'left')"
+                      ref="elseTagLeft"
                     />
                   </div>
                 </div>
@@ -1900,7 +1920,64 @@ export default {
     
 
     };
-  }
+  },
+  //选择元素回显处理
+    handleTagClick(info,index) {
+     console.log(info,'info');
+       const {tag}=info;
+      this.curFocusIndex = index
+      const refName = `tagsInput${this.curFocusIndex}`;
+      this.$refs[refName].focus(); // 动态获取ref并调用focus方法
+       this.$emit('clickTag',tag)
+    },
+      // 处理多条件下的标签点击事件
+    handleMultiTagClick(info, conditionIndex, innerIndex, field) {
+      const { tag } = info;
+      // 设置当前焦点信息
+      this.setMultiFocus(conditionIndex, innerIndex, field);
+      // 获取对应的ref并聚焦
+      const refName = `multiTagsInput_${conditionIndex}_${innerIndex}_${field}`;
+      console.log(refName,'refName');
+      console.log(this.$refs,'this.$refs');
+      
+      if (this.$refs[refName]) {
+        this.$refs[refName][0].focus();
+      }
+      // 向父组件传递点击的标签信息
+      this.$emit('clickTag', tag);
+    },
+     // 处理数据获取部分（循环项）的标签点击
+  handleDataTagClick(info, index, field) {
+    const { tag } = info;
+    // 1. 设置当前焦点
+    this.setDataFocus(index, field);
+    // 2. 聚焦到当前输入框
+    const refName = `dataTag_${index}_${field}`;
+    const tagInput = this.$refs[refName];
+    if (tagInput) {
+      const instance = Array.isArray(tagInput) ? tagInput[0] : tagInput;
+      if (instance && typeof instance.focus === 'function') {
+        instance.focus();
+      }
+    }
+    // 3. 向父组件传递选中的tag
+    this.$emit('clickTag', tag);
+  },
+
+  // 处理“否则”部分的标签点击
+  handleElseTagClick(info, position) {
+    const { tag } = info;
+    // 1. 设置当前焦点
+    this.setElseFocus(position);
+    // 2. 聚焦到当前输入框
+    const refName = `elseTag${position.charAt(0).toUpperCase() + position.slice(1)}`;
+    const instance = this.$refs[refName];
+    if (instance && typeof instance.focus === 'function') {
+      instance.focus();
+    }
+    // 3. 向父组件传递选中的tag
+    this.$emit('clickTag', tag);
+  },
 
   }
 }