节点公式搜索元素功能

src/views/formula/edit.vue

@@ -103,9 +103,9 @@
                 <el-option  v-for="item in eleTableList" :key="item.id" :label="item.tableName" :value="item.initTableId"></el-option>
               </el-select>
               <!-- 搜索元素下拉框 -->
-              <el-select v-model="input3" filterable placeholder="搜索元素字段"  @change="getInput" style="width:45%">
+              <el-select v-model="input3" filterable clearable placeholder="搜索元素字段"  @change="getInput" style="width:45%">
               <el-option
-                v-for="item in eleList"
+                v-for="item in eleList1"
                 :key="item.id"
                 :label="item.eName"
                 :value="item.eName">
@@ -222,10 +222,22 @@
                 </div>
               </div>
                 <div v-show="item.showSelectEle"  style="width:60%">
-                  <el-select v-model="eleTableIdComp" @change="getTableEleComp" placeholder="请选择元素表" style="width:100%">
-                    <el-option v-if="paramDataList.length" label="选择节点参数1" value="选择节点参数"></el-option>
-                    <el-option  v-for="item in eleTableListComp" :key="item.id" :label="item.tableName" :value="item.initTableId"></el-option>
-                  </el-select>
+                  <div  class="flex" style="justify-content: space-between;width:100%">
+                        <el-select v-model="eleTableIdComp" @change="getTableEleComp" placeholder="请选择元素表" style="width:45%">
+                        <el-option v-if="paramDataList.length" label="选择节点参数1" value="选择节点参数"></el-option>
+                        <el-option  v-for="item in eleTableListComp" :key="item.id" :label="item.tableName" :value="item.initTableId"></el-option>
+                      </el-select>
+                      <!-- 搜索元素下拉框 -->
+                      <el-select v-model="input3" filterable placeholder="搜索元素字段"  @change="getInput1" style="width:45%">
+                      <el-option
+                        v-for="item in eleListComp1"
+                        :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" style="width:100%">
                     <el-scrollbar style="height:520px;">
                       <el-row>
@@ -269,10 +281,22 @@
           </div>
         </div>
         <div v-show="deviationRange.showSelectEle"  style="width:60%">
-          <el-select v-model="eleTableIdComp" @change="getTableEleComp" placeholder="请选择元素表" style="width:100%">
-            <el-option v-if="paramDataList.length" label="选择节点参数" value="选择节点参数"></el-option>
-            <el-option  v-for="item in eleTableListComp" :key="item.id" :label="item.tableName" :value="item.initTableId"></el-option>
-          </el-select>
+           <div  class="flex" style="justify-content: space-between;width:100%">
+                <el-select v-model="eleTableIdComp" @change="getTableEleComp" placeholder="请选择元素表" style="width:100%">
+                <el-option v-if="paramDataList.length" label="选择节点参数" value="选择节点参数"></el-option>
+                <el-option  v-for="item in eleTableListComp" :key="item.id" :label="item.tableName" :value="item.initTableId"></el-option>
+              </el-select>
+           <!-- 搜索元素下拉框 -->
+              <el-select v-model="input3" filterable clearable placeholder="搜索元素字段"  @change="getInput1" style="width:45%">
+                  <el-option
+                    v-for="item in eleListComp1"
+                    :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" style="width:100%">
             <el-scrollbar style="height:520px;">
               <el-row>
@@ -326,10 +350,23 @@
             </el-card>
           </el-col>
           <el-col :span="16">
-            <el-select v-model="eleTableId" @change="getTableEle1" placeholder="请选择元素表">
-              <el-option v-if="paramDataList.length" label="选择节点参数3" value="选择节点参数"></el-option>
-              <el-option  v-for="item in eleTableList" :key="item.id" :label="item.tableName" :value="item.initTableId"></el-option>
-            </el-select>
+             <div  class="flex" style="justify-content: space-between;width:100%">
+               <el-select v-model="eleTableId" @change="getTableEle" placeholder="请选择元素表">
+                <el-option v-if="paramDataList.length" label="选择节点参数3" value="选择节点参数"></el-option>
+                <el-option  v-for="item in eleTableList" :key="item.id" :label="item.tableName" :value="item.initTableId"></el-option>
+              </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">
@@ -1300,22 +1337,44 @@ export default {
 
     getTableEle(tableId){
       console.log("getTableEle");
+      this.input3=''
       if(tableId === '选择节点参数'){
         this.eleList = this.paramDataList;
+        this.eleList1 = this.paramDataList;
       }else{
         selectFormElements(tableId,{nodeId:this.nodeid}).then((res)=>{
           this.eleList = res.data.data;
+          this.eleList1 = res.data.data;
         })
       }
     },
     getInput(tableId){
-       let arr=[]
-      arr=this.eleList.filter((item)=>{
-        if(item.eName===tableId){
-          return item
-        }
-      })
-      this.eleList=arr;
+      if(tableId.length>0){
+        let arr=[]
+        arr=this.eleList1.filter((item)=>{
+          if(item.eName===tableId){
+            return item
+          }
+        })
+        this.eleList=arr;
+      }else{
+        this.eleList=this.eleList1
+      }
+       
+    },
+    getInput1(tableId){
+      if(tableId.length>0){
+        let arr=[]
+        arr=this.eleListComp1.filter((item)=>{
+          if(item.eName===tableId){
+            return item
+          }
+        })
+        this.eleListComp=arr;
+      }else{
+         this.eleListComp=this.eleListComp1;
+      }
+       
     },
 
     //方法下面的点击树节点
@@ -1363,11 +1422,14 @@ export default {
 
     //方法下面的查询元素
     getTableEleComp(tableId){
+        this.input3=''
       if(tableId === '选择节点参数'){
         this.eleListComp = this.paramDataList;
+        this.eleListComp1 = this.paramDataList;
       }else{
         selectFormElements(tableId).then((res)=>{
           this.eleListComp = res.data.data;
+           this.eleListComp1 = res.data.data;
         })
       }
     },