公式页面

src/views/formula/component/formulaItem.vue

@@ -30,7 +30,8 @@ export default {
     },
     getItemClass(item){
       let obj = {};
-      obj[item.type.toLocaleLowerCase()+'-class']=true;
+      // obj[item.type.toLocaleLowerCase()+'-class']=true;
+      obj['element-class']=true;
       if(item.selected){
         obj.selected = true;
       }

src/views/formula/edit.vue

@@ -75,25 +75,32 @@
             </el-card>
           </el-col>
           <el-col :span="16">
-            <el-select v-model="eleTableId" @change="getTableEle" placeholder="请选择元素表">
+            <el-select v-model="eleTableId" @change="getTableEle" placeholder="请选择元素表" style="width:300px">
               <el-option  v-for="item in eleTableList" :key="item.id" :label="item.tableName" :value="item.id"></el-option>
             </el-select>
-            <div class="mg-t-10 mg-b-10 no-mb-col">
+            <div class="mg-t-10 no-mb-col">
               <el-scrollbar style="height: 210px">
                 <el-row>
                   <el-col :span="6" v-for="item in eleList" :key="item.id">
                     <div class="ele-box">
                       <span>{{item.eName}}</span>
-                      <el-checkbox v-model="item.checked" @change="value => eleCheckHandle(value,item)"></el-checkbox>
+                      <el-checkbox v-model="item.checked" @change="value => eleChang(value,item)"></el-checkbox>
                     </div>
                   </el-col>
                 </el-row>
               </el-scrollbar>
             </div>
             <div class="flex jc-sb">
-              <div>定位数据位置:</div>
+              <!-- <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-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>
@@ -265,7 +272,7 @@ export default {
       eleTableList:[],
       eleList:[],
       selectEleFormula:[],
-      curSeleEleIndex:0,//公式文字里面选中的元素索引
+      curSeleEleIndex:-1,//公式文字里面选中的元素索引
       inputVisible:false,//输入弹窗
       inputText:"",//输入值
 
@@ -400,6 +407,30 @@ export default {
       }
     },
 
+    eleChang(value,item){
+      //console.log(value)
+      //console.log(item)
+      if(value){
+        this.eleAddFormulaHandle(item);
+      }else{
+        let index = -1;
+        for (let i = 0; i < this.selectEleFormula.length; i++) {
+          if(this.selectEleFormula[i].id == item.id){
+            index = i;
+            break;
+          }
+        }
+        if(index>-1){
+          this.selectEleFormula.splice(index,1);
+        }
+      }
+    },
+
+    //快捷添加运算符号
+    addOperator(operator){
+      this.eleAddFormulaHandle(this.formulaMap[operator]);
+    },
+
     //把元素加到公式里
     eleAddFormulaHandle(ele){
       if(ele.tableElementKey){
@@ -486,7 +517,15 @@ export default {
         item.selected = true;
         this.curSeleEleIndex = index;
       }else{
-        this.curSeleEleIndex = 0;
+        this.curSeleEleIndex = -1;
+      }
+    },
+
+    //删除点选公式中的元素
+    removeSelect(){
+      if(this.curSeleEleIndex > -1){
+        this.selectEleFormula.splice(this.curSeleEleIndex,1);
+        this.curSeleEleIndex = -1;
       }
     },
 
@@ -756,6 +795,11 @@ export default {
 .sele-ele-box{
   height: 160px;
   padding: 20px;
-  margin-top: 10px;;
+  // margin-top: 10px;
+}
+
+.icon-box .el-link{
+  font-size: 24px;
+  margin-right: 10px;
 }
 </style>