弹窗内选择元素修改

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

@@ -19,7 +19,8 @@ export default {
     'pkeyId', 
     'initTableName',
     'selectedTableKey',
-    'containerId'
+    'containerId',
+    'multipleSelect'  // 新增：是否允许多选，默认为false
   ],
   data() {
     return {
@@ -62,7 +63,19 @@ export default {
         this.selectedElements = [];
       },
       immediate: true
-     }
+    },
+    multipleSelect: {
+      handler(newVal) {
+        // 当多选模式改变时，清空当前选择
+        if (!newVal && this.selectedElements.length > 1) {
+          // 如果关闭多选且当前有多个选中，只保留最后一个
+          const lastElement = this.selectedElements[this.selectedElements.length - 1];
+          this.clearAllSelected();
+          this.selectElements([lastElement]);
+        }
+      },
+      immediate: true
+    }
   },
   methods: {
     // 获取当前组件容器元素，封装为工具方法
@@ -70,6 +83,36 @@ export default {
       return document.getElementById(this.containerId);
     },
     
+    // 获取当前所有有橙色背景且去重的元素列表
+    getCurrentSelectedElements() {
+      const container = this.getContainer();
+      if (!container) return [];
+      
+      // 获取所有有橙色背景的元素
+      const orangeElements = container.querySelectorAll('[style*="background-color: rgb(255, 165, 0)"], [style*="background-color:#ffa500"]');
+      
+      // 根据 tableElementKey 去重
+      const uniqueElements = [];
+      const seenKeys = new Set();
+      
+      orangeElements.forEach(el => {
+        if (el.id) {
+          const tableElementKey = this.initTableName + ':' + this.extractKeyPrefix(el.id);
+          if (!seenKeys.has(tableElementKey)) {
+            seenKeys.add(tableElementKey);
+            const keyName = el.placeholder || '';
+            uniqueElements.push({
+              tableElementKey: tableElementKey,
+              eName: keyName,
+              id: el.id
+            });
+          }
+        }
+      });
+      
+      return uniqueElements;
+    },
+    
     highlightElementsByKey(key) {
       if (!key) return;
       
@@ -207,11 +250,19 @@ export default {
       }
       
       const id = target.id;
-      const isAlreadySelected = this.selectedElements.some(item => item.id === id);
+      const elementId = this.initTableName + ':' + this.extractKeyPrefix(id);
       
-      this.clearAllSelected();
+      // 检查是否已经有相同 tableElementKey 的元素被选中
+      const isSameKeySelected = this.selectedElements.some(item => 
+        item.tableElementKey === elementId
+      );
+      
+      // 修改：根据多选模式决定是否清空已选元素
+      if (!this.multipleSelect) {
+        this.clearAllSelected();
+      }
       
-      if (!isAlreadySelected) {
+      if (!isSameKeySelected) {
         if (id.startsWith('key_')) {
           const keyPrefix = this.extractKeyPrefix(id);
           // 关键修复：只在当前容器内查找同前缀元素
@@ -220,6 +271,11 @@ export default {
         } else {
           this.handleNormalElement(target, id);
         }
+      } else {
+        // 如果已经有相同 tableElementKey 的元素被选中，在多选模式下点击会取消选择所有相同key的元素
+        if (this.multipleSelect) {
+          this.deselectElementsByKey(elementId);
+        }
       }
     },
     
@@ -232,6 +288,12 @@ export default {
       const container = this.getContainer();
       if (!container) return;
       
+      // 先取消选择所有相同 tableElementKey 的元素（避免重复）
+      if (elements.length > 0) {
+        const firstElementId = this.initTableName + ':' + this.extractKeyPrefix(elements[0].id);
+        this.deselectElementsByKey(firstElementId);
+      }
+      
       elements.forEach(el => {
         // 确保元素属于当前容器
         if (!container.contains(el)) return;
@@ -242,12 +304,45 @@ export default {
           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.selectedElements);
+          const newElement = { tableElementKey: elementId, eName: keyName, id: el.id };
+          this.selectedElements.push(newElement);
+          
+          // 传递当前所有有橙色背景且去重的元素
+          const currentSelected = this.getCurrentSelectedElements();
+          this.$emit('element-selected', newElement, true, currentSelected);
         }
       });
     },
     
+    // 修改：取消选择所有具有相同 tableElementKey 的元素
+    deselectElementsByKey(tableElementKey) {
+      const container = this.getContainer();
+      if (!container) return;
+      
+      // 找出所有相同 tableElementKey 的元素
+      const elementsToDeselect = this.selectedElements.filter(item => 
+        item.tableElementKey === tableElementKey
+      );
+      
+      if (elementsToDeselect.length === 0) return;
+      
+      // 清除样式并从选中列表中移除
+      elementsToDeselect.forEach(item => {
+        const element = container.querySelector(`#${item.id}`);
+        if (element) {
+          element.style.backgroundColor = '';
+        }
+        // 传递当前所有有橙色背景且去重的元素
+        const currentSelected = this.getCurrentSelectedElements();
+        this.$emit('element-selected', item, false, currentSelected);
+      });
+      
+      // 从选中列表中移除这些元素
+      this.selectedElements = this.selectedElements.filter(item => 
+        item.tableElementKey !== tableElementKey
+      );
+    },
+    
     handleNormalElement(target, id) {
       const container = this.getContainer();
       if (!container || !container.contains(target)) return;
@@ -255,7 +350,6 @@ export default {
       const elementId = this.initTableName + ':' + target.id.split('__')[0];
       const keyName = target.placeholder || '';
       
-      // target.style.backgroundColor = '#ffa500';
       if(!keyName){
         this.$message({
           type: "warning",
@@ -263,9 +357,17 @@ export default {
         });
         return;
       }
-           target.style.backgroundColor = '#ffa500';
-      this.selectedElements.push({ tableElementKey: elementId, eName: keyName, id });
-      this.$emit('element-selected', { tableElementKey: elementId, eName: keyName, id }, true,this.selectedElements);
+      
+      // 先取消选择相同 tableElementKey 的元素
+      this.deselectElementsByKey(elementId);
+      
+      target.style.backgroundColor = '#ffa500';
+      const newElement = { tableElementKey: elementId, eName: keyName, id };
+      this.selectedElements.push(newElement);
+      
+      // 传递当前所有有橙色背景且去重的元素
+      const currentSelected = this.getCurrentSelectedElements();
+      this.$emit('element-selected', newElement, true, currentSelected);
     },
     
     clearAllSelected() {
@@ -277,11 +379,13 @@ export default {
         const element = container.querySelector(`#${item.id}`);
         if (element) {
           element.style.backgroundColor = '';
+          // 传递当前所有有橙色背景且去重的元素
+          const currentSelected = this.getCurrentSelectedElements();
           this.$emit('element-selected', { 
             tableElementKey: item.tableElementKey, 
             eName: item.eName, 
             id: item.id 
-          }, false,this.selectedElements);
+          }, false, currentSelected);
         }
       });
       this.selectedElements = [];
@@ -346,4 +450,4 @@ export default {
   background-position-x: 45%;
   background-position-y: 46%;
 }
-</style>
+</style>

src/views/formula/edit.vue

@@ -378,40 +378,21 @@
              <div  class="flex" style="justify-content: space-between;width:100%">
                <el-select v-model="eleTableId" @change="getTableEle" placeholder="请选择元素表" size="small">
                 <el-option v-if="paramDataList.length" label="选择节点参数3" value="选择节点参数"></el-option>
-                <!-- <template v-if="pid">
-                    <el-option  v-for="item in eleTableList" :key="item.id" :label="item.tableName" :value="(item.pkeyId!==null&&item.pkeyId!==-1)"></el-option>
-                </template> -->
+         
                 <template>
-                    <!-- <el-option  v-for="item in eleTableList" :key="item.pkeyId" :label="item.tableName" :value="item.pkeyId"></el-option> -->
+                   
                          <el-option  v-for="item in eleTableList" :key="item.id" :label="item.tableName" :value="(item.pkeyId!==null&&item.pkeyId!==-1)?item.pkeyId:item.id"></el-option>
                 </template>
               
               </el-select>
-              <!-- 搜索元素下拉框 -->
-                <!-- <el-select v-model="input3" filterable clearable placeholder="搜索元素字段"  @change="getInput" style="width:45%">
-                <el-option
-                  v-for="item in eleList1"
-                  :key="item.id"
-                  :label="item.eName"
-                  :value="item.eName">
-                </el-option>
-                </el-select> -->
+  
              </div>
             
 
             <div class="mg-t-10 mg-b-10 no-mb-col">
               <el-scrollbar style="height: 460px">
-                <!-- <el-row v-loading="eleListable"  v-if="eleList.length>0">
-                  <el-col :span="6" v-for="item in eleList" :key="item.id">
-                    <div class="ele-box">
-                      <span v-if="item.k">{{item.name}}</span>
-                      <span v-else>{{item.eName}}</span>
-                      <el-checkbox v-model="item.checked" @change="value => eleCheckHandle(value,item)"></el-checkbox>
-                    </div>
-                  </el-col>
-                </el-row>
-                 <el-row v-else style="text-align: center;line-height: 328px;border:1px solid #bbb">暂无数据</el-row> -->
-                    <tableFormWrite :pkeyId="eleTableId"     @element-selected="(obj, val,list) => handleElementSelectedList(obj, val, list)" :initTableName="initTableNameList"    :key="3"   :container-id="'excel-container-3'"></tableFormWrite>
+             
+                    <tableFormWrite :pkeyId="eleTableId"      :multiple-select="true"  @element-selected="(obj, val,list) => handleElementSelectedList(obj, val, list)" :initTableName="initTableNameList"    :key="tableKey"   :container-id="'excel-container-'+tableKey"></tableFormWrite>
               </el-scrollbar>
             
             </div>
@@ -639,6 +620,8 @@ export default {
       initTableNameComp:'',//初始表名组件
       selectedTableKeyComp:'', // 存储选中的表格元素key 组件
       initTableNameList:'',//初始表名 选择元素弹窗
+      seleList:[],//选择元素弹窗 选中的元素列表
+      tableKey:'3'
 
     };
   },
@@ -1445,13 +1428,14 @@ handleDelete(e) {
 
     //选择元素多选
     chooseEleHandle(){
-      this.eleChecks.forEach((element,index) => {
+      this.seleList.forEach((element,index) => {
         this.setEleToArgumen(element,index+this.argumenObj.index);
       });
 
       this.chooseEleVisible = false;
+       this.tableKey = Date.now();
 
-      this.clearEleListCheck();
+     
     },
     //设置元素到指定位置参数
     setEleToArgumen(ele,index){
@@ -1492,6 +1476,7 @@ handleDelete(e) {
     showChooseEle(argumenObj){
       this.argumenObj = argumenObj;
       this.chooseEleVisible = true;
+ 
     },
 
     //移除挂载的函数
@@ -2317,16 +2302,18 @@ item.name=item.eName
 },
 handleElementSelectedList(item,value,list) {
 
-  console.log(item,'item');
-  console.log(value,'value');
+ this.seleList=list
   console.log(list,'list');
+  this.seleList.forEach((element,index) => {
+        element.name=element.eName
+      });
+    // list.forEach((element,index) => {
+    //     this.setEleToArgumen(element,index+this.argumenObj.index);
+    //   });
+
   
-  
-  
-    // if(value){
-    //     //console.log(this.$refs.dynamiccomponent[index])
-    //     this.$refs.deviationrange.setELe(item);
-    //   }
+
+