多条件初始修改

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

@@ -21,107 +21,211 @@
       <el-button class="mg-l-10" size="small" type="info" @click="showSelectEle">选择参数</el-button>
     </div>
 
-    <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"/>
-        <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"/>
-      <span class="mg-l-20 mg-r-20">
-        <span v-if="symbol == '>='">≥</span>
-        <span v-if="symbol == '<='">≤</span>
-        <span v-if="symbol == '>'">&gt;</span>
-        <span v-if="symbol == '<'">&lt;</span>
-        <span v-if="symbol == '='">=</span>
-        <span v-if="symbol == '<&&<'">&lt;</span>
-        <span v-if="symbol == '|'">|</span>
-        <div v-if="symbol == 'more'" >
-          <el-select v-model="symbol1" @change="setCondition()" size="medium" placeholder="请选择" >
-              <el-option label=">=" value=">="></el-option>
-              <el-option label="<=" value="<="></el-option>
-              <el-option label="=" value="="></el-option>
-              <el-option label=">" value=">"></el-option>
-              <el-option label="<" value="<"></el-option>
-              <el-option label="≠" value="≠"></el-option>
-              <el-option label="包含" value="包含"></el-option>
-              <el-option label="不包含" value="不包含"></el-option>
-          
-            </el-select>
-       </div>
-      </span>
-      <vue-tags-input v-model="tag3" :tags="tags3" @focus="curFocusIndex = 3" @blur="inputBlur(3)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag"/>
-    </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"/>
-      <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"/>
-    </div>
-    <div class="mg-t-20" v-if="result == 2">
-      <div class="flex">
-        <span class="textblod mg-r-10">真值</span>
-        <div class="border-grey sele-ele-box flex1" :class="{'border-green':curFocusIndex == 6}" @click="curFocusIndex = 6">
-          <div class="flex jc-sb mg-b-20">
-            <!-- <div>定位数据位置:</div> -->
-            <div class="icon-box">
-              <el-link :underline="false" icon="el-icon-delete" type="danger" @click="removeSelect"></el-link>
-              <el-link :underline="false" type="primary" @click="addOperator('+')" icon="el-icon-circle-plus-outline"></el-link>
-              <el-link :underline="false" type="primary" @click="addOperator('-')" icon="el-icon-remove-outline"></el-link>
-              <el-link :underline="false" type="primary" @click="addOperator('*')" icon="el-icon-circle-close"></el-link>
-              <el-link :underline="false" type="primary" @click="addOperator('%')">÷</el-link>
+    <!-- 多条件其他的 -->
+    <template v-if="symbol !== 'more'"> 
+        <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"/>
+              <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>
-            <div>
-              <!-- <el-link :underline="false" type="primary" class="mg-r-20" @click="eleAddFormula">元素添加到公式</el-link> -->
-              <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets('(',false)">(</el-link>
-              <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(')',true)">)</el-link>
-              <!-- <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets('[',false)">【</el-link>
-              <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(']',true)">】</el-link> -->
-              <el-link :underline="false" type="primary" @click="addText">输入值</el-link>
+            <vue-tags-input v-model="tag2" :tags="tags2" @focus="curFocusIndex = 2" @blur="inputBlur(2)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag"/>
+            <span class="mg-l-20 mg-r-20">
+              <span v-if="symbol == '>='">≥</span>
+              <span v-if="symbol == '<='">≤</span>
+              <span v-if="symbol == '>'">&gt;</span>
+              <span v-if="symbol == '<'">&lt;</span>
+              <span v-if="symbol == '='">=</span>
+              <span v-if="symbol == '<&&<'">&lt;</span>
+              <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"/>
+        </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"/>
+          <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"/>
+        </div>
+        <div class="mg-t-20" v-if="result == 2">
+          <div class="flex">
+            <span class="textblod mg-r-10">真值</span>
+            <div class="border-grey sele-ele-box flex1" :class="{'border-green':curFocusIndex == 6}" @click="curFocusIndex = 6">
+              <div class="flex jc-sb mg-b-20">
+                <!-- <div>定位数据位置:</div> -->
+                <div class="icon-box">
+                  <el-link :underline="false" icon="el-icon-delete" type="danger" @click="removeSelect"></el-link>
+                  <el-link :underline="false" type="primary" @click="addOperator('+')" icon="el-icon-circle-plus-outline"></el-link>
+                  <el-link :underline="false" type="primary" @click="addOperator('-')" icon="el-icon-remove-outline"></el-link>
+                  <el-link :underline="false" type="primary" @click="addOperator('*')" icon="el-icon-circle-close"></el-link>
+                  <el-link :underline="false" type="primary" @click="addOperator('%')">÷</el-link>
+                </div>
+                <div>
+                  <!-- <el-link :underline="false" type="primary" class="mg-r-20" @click="eleAddFormula">元素添加到公式</el-link> -->
+                  <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets('(',false)">(</el-link>
+                  <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(')',true)">)</el-link>
+                  <!-- <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets('[',false)">【</el-link>
+                  <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(']',true)">】</el-link> -->
+                  <el-link :underline="false" type="primary" @click="addText">输入值</el-link>
+                </div>
+              </div>
+              <draggable v-model="selectEleFormula">
+                <formula-item 
+                  v-for="(item,index) in selectEleFormula" :key="index" 
+                  :item="item" @click="obj => eleFormulaClick(obj,index)"
+                >
+                </formula-item>
+              </draggable>
+            </div>
+          </div>
+          <div class="flex mg-t-10">
+            <span class="textblod mg-r-10">假值</span>
+            <div class="border-grey sele-ele-box flex1" :class="{'border-green':curFocusIndex == 7}" @click="curFocusIndex = 7">
+              <div class="flex jc-sb mg-b-20">
+                <!-- <div>定位数据位置:</div> -->
+                <div class="icon-box">
+                  <el-link :underline="false" icon="el-icon-delete" type="danger" @click="removeSelect"></el-link>
+                  <el-link :underline="false" type="primary" @click="addOperator('+')" icon="el-icon-circle-plus-outline"></el-link>
+                  <el-link :underline="false" type="primary" @click="addOperator('-')" icon="el-icon-remove-outline"></el-link>
+                  <el-link :underline="false" type="primary" @click="addOperator('*')" icon="el-icon-circle-close"></el-link>
+                  <el-link :underline="false" type="primary" @click="addOperator('%')">÷</el-link>
+                </div>
+                <div>
+                  <!-- <el-link :underline="false" type="primary" class="mg-r-20" @click="eleAddFormula">元素添加到公式</el-link> -->
+                  <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets('(',false)">(</el-link>
+                  <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(')',true)">)</el-link>
+                  <!-- <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets('[',false)">【</el-link>
+                  <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(']',true)">】</el-link> -->
+                  <el-link :underline="false" type="primary" @click="addText">输入值</el-link>
+                </div>
+              </div>
+              <draggable v-model="selectEleFormula2">
+                <formula-item 
+                  v-for="(item,index) in selectEleFormula2" :key="index" 
+                  :item="item" @click="obj => eleFormulaClick(obj,index)"
+                >
+                </formula-item>
+              </draggable>
             </div>
           </div>
-          <draggable v-model="selectEleFormula">
-            <formula-item 
-              v-for="(item,index) in selectEleFormula" :key="index" 
-              :item="item" @click="obj => eleFormulaClick(obj,index)"
-            >
-            </formula-item>
-          </draggable>
         </div>
-      </div>
-      <div class="flex mg-t-10">
-        <span class="textblod mg-r-10">假值</span>
-        <div class="border-grey sele-ele-box flex1" :class="{'border-green':curFocusIndex == 7}" @click="curFocusIndex = 7">
-          <div class="flex jc-sb mg-b-20">
-            <!-- <div>定位数据位置:</div> -->
-            <div class="icon-box">
-              <el-link :underline="false" icon="el-icon-delete" type="danger" @click="removeSelect"></el-link>
-              <el-link :underline="false" type="primary" @click="addOperator('+')" icon="el-icon-circle-plus-outline"></el-link>
-              <el-link :underline="false" type="primary" @click="addOperator('-')" icon="el-icon-remove-outline"></el-link>
-              <el-link :underline="false" type="primary" @click="addOperator('*')" icon="el-icon-circle-close"></el-link>
-              <el-link :underline="false" type="primary" @click="addOperator('%')">÷</el-link>
+    </template>
+    <!-- 多条件 -->
+     <template v-else>
+      <div v-for="(item,index) in conditionList" :key="index">
+        <!-- 从第二个条件开始显示“条件X”和删除按钮 -->
+        <div v-if="index >= 1" class="condition-header flex al-c  mg-t-20">
+          <span class="textblod">条件{{ index + 1 }}</span>
+          <el-button type="danger" size="mini" @click="removeCondition(index)" class=" mg-l-20">删除</el-button>
+        </div>
+           <div  v-for="(item,index) in conditionInnerList">
+            <div class="mg-t-20 flex jc-al-c" :key="index">
+                  <span class="textblod mg-r-20" >IF</span>
+              
+                  <vue-tags-input v-model="tag2" :tags="tags2" @focus="curFocusIndex = 2" @blur="inputBlur(2)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag"/>
+                  <span class="mg-l-20 mg-r-20">
+                  <el-select v-model="symbol1" @change="setCondition()" size="medium" placeholder="请选择"  style="width:120px">
+                        <el-option label=">=" value=">="></el-option>
+                        <el-option label="<=" value="<="></el-option>
+                        <el-option label="=" value="="></el-option>
+                        <el-option label=">" value=">"></el-option>
+                        <el-option label="<" value="<"></el-option>
+                        <el-option label="≠" value="≠"></el-option>
+                        <el-option label="包含" value="包含"></el-option>
+                        <el-option label="不包含" value="不包含"></el-option>
+                
+                  </el-select>
+                  </span>
+                  <vue-tags-input v-model="tag3" :tags="tags3" @focus="curFocusIndex = 3" @blur="inputBlur(3)" placeholder="输入/参数" @before-adding-tag="beforeAddingTag"/>
+                  <i class="el-icon-circle-plus-outline mg-l-20" style="color: #409EFF;cursor: pointer;" @click="addConditionItem(index)"></i>
+                   <i class="el-icon-delete mg-l-20" style="color: red;cursor: pointer;" @click="removeConditionItem(index)" v-if="index>0"></i>
+                 
             </div>
-            <div>
-              <!-- <el-link :underline="false" type="primary" class="mg-r-20" @click="eleAddFormula">元素添加到公式</el-link> -->
-              <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets('(',false)">(</el-link>
-              <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(')',true)">)</el-link>
-              <!-- <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets('[',false)">【</el-link>
-              <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(']',true)">】</el-link> -->
-              <el-link :underline="false" type="primary" @click="addText">输入值</el-link>
+            <div v-if="index>0" style="margin-left: 256px;" class="mg-t-10 mg-b-10">
+                      <el-select v-model="symbol1" @change="setCondition()" size="medium" placeholder="请选择"  style="width:120px">
+                      
+                            <el-option label="或者" value="包含"></el-option>
+                            <el-option label="并且" value="不包含"></el-option>
+                    
+                      </el-select>
+              </div>
+           </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"/>
+          <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"/>
+          <div class="mg-l-20">
+              <el-button  size="small" type="primary" @click="addCondition">添加其他条件</el-button>
+          </div>
+        </div>
+        <div class="mg-t-20" v-if="result == 2">
+          <div class="flex">
+            <span class="textblod mg-r-10">满足</span>
+            <div class="border-grey sele-ele-box flex1" :class="{'border-green':curFocusIndex == 6}" @click="curFocusIndex = 6">
+              <div class="flex jc-sb mg-b-20">
+                <!-- <div>定位数据位置:</div> -->
+                <div class="icon-box">
+                  <el-link :underline="false" icon="el-icon-delete" type="danger" @click="removeSelect"></el-link>
+                  <el-link :underline="false" type="primary" @click="addOperator('+')" icon="el-icon-circle-plus-outline"></el-link>
+                  <el-link :underline="false" type="primary" @click="addOperator('-')" icon="el-icon-remove-outline"></el-link>
+                  <el-link :underline="false" type="primary" @click="addOperator('*')" icon="el-icon-circle-close"></el-link>
+                  <el-link :underline="false" type="primary" @click="addOperator('%')">÷</el-link>
+                </div>
+                <div>
+           
+                  <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets('(',false)">(</el-link>
+                  <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(')',true)">)</el-link>
+                 
+                  <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(']',true)">】</el-link> -->
+                  <el-link :underline="false" type="primary" @click="addText">输入值</el-link>
+                </div>
+              </div>
+              <draggable v-model="selectEleFormula">
+                <formula-item 
+                  v-for="(item,index) in selectEleFormula" :key="index" 
+                  :item="item" @click="obj => eleFormulaClick(obj,index)"
+                >
+                </formula-item>
+              </draggable>
+            </div>
+          </div>
+          <div class="flex mg-t-10">
+            <span class="textblod mg-r-10">不满足</span>
+            <div class="border-grey sele-ele-box flex1" :class="{'border-green':curFocusIndex == 7}" @click="curFocusIndex = 7">
+              <div class="flex jc-sb mg-b-20">
+                <!-- <div>定位数据位置:</div> -->
+                <div class="icon-box">
+                  <el-link :underline="false" icon="el-icon-delete" type="danger" @click="removeSelect"></el-link>
+                  <el-link :underline="false" type="primary" @click="addOperator('+')" icon="el-icon-circle-plus-outline"></el-link>
+                  <el-link :underline="false" type="primary" @click="addOperator('-')" icon="el-icon-remove-outline"></el-link>
+                  <el-link :underline="false" type="primary" @click="addOperator('*')" icon="el-icon-circle-close"></el-link>
+                  <el-link :underline="false" type="primary" @click="addOperator('%')">÷</el-link>
+                </div>
+                <div>
+                  <!-- <el-link :underline="false" type="primary" class="mg-r-20" @click="eleAddFormula">元素添加到公式</el-link> -->
+                  <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets('(',false)">(</el-link>
+                  <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(')',true)">)</el-link>
+                  <!-- <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets('[',false)">【</el-link>
+                  <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(']',true)">】</el-link> -->
+                  <el-link :underline="false" type="primary" @click="addText">输入值</el-link>
+                </div>
+              </div>
+              <draggable v-model="selectEleFormula2">
+                <formula-item 
+                  v-for="(item,index) in selectEleFormula2" :key="index" 
+                  :item="item" @click="obj => eleFormulaClick(obj,index)"
+                >
+                </formula-item>
+              </draggable>
             </div>
           </div>
-          <draggable v-model="selectEleFormula2">
-            <formula-item 
-              v-for="(item,index) in selectEleFormula2" :key="index" 
-              :item="item" @click="obj => eleFormulaClick(obj,index)"
-            >
-            </formula-item>
-          </draggable>
+        
         </div>
       </div>
-    </div>
+     </template>
 
     <el-dialog title="输入值" :visible.sync="inputVisible" width="300px" append-to-body :close-on-click-modal="false">
       <el-input v-model="inputText" placeholder="请输入内容"></el-input>
@@ -137,6 +241,7 @@
 import VueTagsInput from '@johmun/vue-tags-input';
 import formulaItem from "../formulaItem";
 import draggable from 'vuedraggable';
+import { template } from '@antv/g2plot/lib/utils';
 export default {
   name: "ifelse",
   components: {
@@ -191,7 +296,16 @@ export default {
       tags4: [],
       tag5: '',
       tags5: [],
-      symbol1:''
+      symbol1:'',
+      conditionList:[
+        {},
+        {},
+      ],//多条件的条件列表
+      conditionInnerList:[
+        {},
+        {},
+      ],//多条件的条件内部列表
+
     }
   },
   mounted(){
@@ -727,6 +841,20 @@ export default {
         this.formulainfo.arguments[2] = this.selectEleFormula2;
       }
     },
+    //添加条件
+    addCondition(){ 
+     this.conditionList.splice(index, 0, {});
+    },
+    //删除条件
+    removeCondition(index){
+      this.conditionList.splice(index,1);
+    },
+    addConditionItem(index){
+     this.conditionInnerList.splice(index, 0, {});
+    },
+    removeConditionItem(index){
+      this.conditionInnerList.splice(index,1);
+    },
 
   }
 }
@@ -745,4 +873,8 @@ export default {
     font-size: 20px;
     margin-right: 10px;
   }
+  .icon-btn{
+    color: #409EFF;
+    cursor: 409EFF;
+  }
 </style>