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

<template>
  <div class="ifelse-box">
    <div class="flex jc-al-c">
      <span>IF条件执行</span>
      <el-select v-model="symbol" @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-select>
      <span class="mg-l-20 mg-r-10">执行结果</span>
      <el-select v-model="result" @change="setTF()" size="medium" placeholder="请选择">
        <el-option label="真假值" value="1"></el-option>
        <el-option label="运算" value="2"></el-option>
      </el-select>
      <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">IF</span>
      <div class="flex jc-al-c" v-if="symbol == '<&&<' || symbol == '<=&&<='">
        <vue-tags-input v-model="tag1" :tags="tags1" @focus="curFocusIndex = 1" @blur="tags1 = [];setCondition()" 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="tags2 = [];setCondition()" 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="tags3 = [];setCondition()" 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="tags4 = [];setTF()" placeholder="输入/参数" @before-adding-tag="beforeAddingTag"/>
      <span class="textblod mg-r-10 mg-l-20">假值</span>
      <vue-tags-input v-model="tag5" :tags="tags5" @focus="curFocusIndex = 5" @blur="tags5 = [];setTF()" placeholder="输入/参数" @before-adding-tag="beforeAddingTag"/>
    </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>
          <div>
            <formula-item 
              v-for="(item,index) in selectEleFormula" :key="index" 
              :item="item" @click="obj => eleFormulaClick(obj,index)"
            >
            </formula-item>
          </div>
        </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>
          <div>
            <formula-item 
              v-for="(item,index) in selectEleFormula2" :key="index" 
              :item="item" @click="obj => eleFormulaClick(obj,index)"
            >
            </formula-item>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="输入值" :visible.sync="inputVisible" width="300px" append-to-body :close-on-click-modal="false">
      <el-input v-model="inputText" placeholder="请输入内容"></el-input>
      <div class="text-align-c mg-t-10">
        <el-button size="small" @click="addTextHandle" type="primary">保存</el-button>
        <el-button size="small" @click="inputVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VueTagsInput from '@johmun/vue-tags-input';
import formulaItem from "../formulaItem"
export default {
  name: "dateFormat",
  components: {
    VueTagsInput,

    formulaItem,
  },
  props: {
    formulainfo: {
      type: Object,
      default: function () {
        return {};
      }
    },
    curele: {
      type: Object,
      default: function () {
        return {};
      }
    },

    formulamap:{
      type: Object,
      default: function () {
        return {};
      }
    }
  },
  data(){
    return{
      symbol:'>=',
      result:'1',

      selectEleFormula:[],
      selectEleFormula2:[],

      curFocusIndex:0,//当前在哪个输入框
      curSeleEleIndex:-1,//公式文字里面选中的元素索引
      symbolReg:/(\+|-|\*|\/)（.+）/,
      inputVisible:false,
      inputText:'',

      tag1: '',
      tags1: [],
      tag2: '',
      tags2: [],
      tag3: '',
      tags3: [],
      tag4: '',
      tags4: [],
      tag5: '',
      tags5: [],
    }
  },
  mounted(){
    //console.log(this.formulainfo.arguments[0])
    //console.log(this.formulainfo.arguments[1])
    let args0 = this.formulainfo.arguments[0];
    let args1 = this.formulainfo.arguments[1];
    let args2 = this.formulainfo.arguments[2];
    this.initCondition(args0);

    if((typeof args1 == 'string' || (typeof args1 == 'object' && args1.type == 'Element')) &&
      (typeof args2 == 'string' || (typeof args2 == 'object' && args2.type == 'Element'))
    ){
      this.initTFInput(args1,args2);
    }else if(Array.isArray(args1) || Array.isArray(args2)){
      this.result = '2';
      this.initTFFormula(args1,args2)
    }
  },
  methods:{
    showSelectEle(){
      this.$set(this.formulainfo,'showSelectEle',!this.formulainfo.showSelectEle);
    },

    beforeAddingTag(){

    },

    inputHook(){
      console.log(111)
    },

    addText(){
      this.inputVisible = true;
    },

    //把元素加到公式里
    eleAddFormulaHandle(ele){
      let eleFormula;
      if(this.curFocusIndex == 6){
        eleFormula = this.selectEleFormula;
      }else if(this.curFocusIndex == 7){
        eleFormula = this.selectEleFormula2;
      }else{
        return;
      }

      if(ele.tableElementKey){
        //元素
        eleFormula.push({
          type:'Element',
          name:ele.eName,
          id:ele.id,
          selected:false,
          tableElementKey:ele.tableElementKey,
          children:[],
        })
      }else if(ele.template && ele.example){
        //运算符号
        eleFormula.push({
          type:'Operator',
          name:this.symbolReg.exec(ele.name)[1],
          selected:false,
          template:ele.template
        })
      }else if(ele.type == 'Brackets'){
        //括号
        eleFormula.splice(ele.selectIndex,0,{
          type:'Brackets',
          name:ele.name,
          selected:false,
        })
      }else if(ele.type == 'Text'){
        //输入值
        eleFormula.push({
          type:'Text',
          name:ele.name,
          selected:false,
        })
      }

      this.setTF();
    },

    //点选公式中的元素
    eleFormulaClick({selected,item},index){
      let eleFormula;
      if(this.curFocusIndex == 6){
        eleFormula = this.selectEleFormula;
      }else if(this.curFocusIndex == 7){
        eleFormula = this.selectEleFormula2;
      }else{
        return;
      }

      if(selected){
        eleFormula.forEach((ele)=>{
          ele.selected = false;
        })
        item.selected = true;
        this.curSeleEleIndex = index;
      }else{
        this.curSeleEleIndex = -1;
      }
    },

    //快捷添加运算符号
    addOperator(operator){
      this.eleAddFormulaHandle(this.formulamap[operator]);
    },

    //删除点选公式中的元素
    removeSelect(){
      let eleFormula;
      if(this.curFocusIndex == 6){
        eleFormula = this.selectEleFormula;
      }else if(this.curFocusIndex == 7){
        eleFormula = this.selectEleFormula2;
      }else{
        return;
      }


      if(this.curSeleEleIndex > -1){
        eleFormula.splice(this.curSeleEleIndex,1);
        this.curSeleEleIndex = -1;
      }

      this.setTF();
    },

    //添加括号
    addBrackets(text,type){
      //type 是true 表示在元素右边插入
      if(this.curSeleEleIndex == Number(this.curSeleEleIndex)){
        this.eleAddFormulaHandle({
          type:'Brackets',
          name:text,
          selectIndex:type?Number(this.curSeleEleIndex)+1:this.curSeleEleIndex
        })
        //如果在左边插入index要增1
        if(!type){
          this.curSeleEleIndex = Number(this.curSeleEleIndex)+1;
        }
      }
    },

    //添加输入值
    addTextHandle(){
      this.eleAddFormulaHandle({
        type:'Text',
        name:this.inputText
      })
      this.inputVisible = false;
    },

    setELe(ele){
      if(this.curFocusIndex){
        let obj = {
          type:'Element',
          name:ele.eName,
          id:ele.id,
          selected:false,
          tableElementKey:ele.tableElementKey,
          children:[],
        }

        if(this.curFocusIndex == 6 || this.curFocusIndex ==7){
          this.eleAddFormulaHandle(ele)
        }else{
          obj.text = ele.eName;
          obj.style = 'background-color: #409EFF';
          this['tags'+this.curFocusIndex] = [obj];
          this['tag'+this.curFocusIndex] = '';

          this.curFocusIndex = 0;
          this.setCondition();
        }
      }
    },

    //初始化真假值判断if(xxx)部分
    initCondition(args0){
      if(args0){
        if(args0.length == 3){
          //运算符号
          this.symbol = args0[1];

          //第二个空
          if((typeof args0[0]) == 'object' && args0[0].type == 'Element'){
            let ele = args0[0];
            this.tags2 =  [
              Object.assign({
                text:ele.name,
                style:'background-color: #409EFF',
              },ele)]
          }else if((typeof args0[0]) == 'string'){
            this.tag2 = args0[0];
          }

          //第三个空
          if((typeof args0[2]) == 'object' && args0[2].type == 'Element'){
            let ele = args0[2];
            this.tags3 =  [
              Object.assign({
                text:ele.name,
                style:'background-color: #409EFF',
              },ele)]
          }else if((typeof args0[2]) == 'string'){
            this.tag3 = args0[2];
          }
        }else if(args0.length == 7){
          //运算符号
          this.symbol = args0[1]+args0[3]+args0[5];

          //第一个空
          if((typeof args0[0]) == 'object' && args0[0].type == 'Element'){
            let ele = args0[0];
            this.tags1 =  [
              Object.assign({
                text:ele.name,
                style:'background-color: #409EFF',
              },ele)]
          }else if((typeof args0[0]) == 'string'){
            this.tag1 = args0[0];
          }

          //第二个空
          if((typeof args0[2]) == 'object' && args0[2].type == 'Element'){
            let ele = args0[2];
            this.tags2 =  [
              Object.assign({
                text:ele.name,
                style:'background-color: #409EFF',
              },ele)]
          }else if((typeof args0[2]) == 'string'){
            this.tag2 = args0[2];
          }

          //第三个空
          if((typeof args0[6]) == 'object' && args0[6].type == 'Element'){
            let ele = args0[6];
            this.tags3 =  [
              Object.assign({
                text:ele.name,
                style:'background-color: #409EFF',
              },ele)]
          }else if((typeof args0[6]) == 'string'){
            this.tag3 = args0[6];
          }
        }
      }
    },

    //写入参数真假值判断if(xxx)部分
    setCondition(){
      if(this.symbol == '<&&<' || this.symbol == '<=&&<='){
        let arr = new Array(7).fill('');
        let symbolArr = this.symbol.split('&&');
        if(this.tags1.length == 0){
          arr[0] = this.tag1;
        }else{
          arr[0] = this.tags1[0];
        }
        arr[1] = symbolArr[0];
        if(this.tags2.length == 0){
          arr[2] = this.tag2;
          arr[4] = this.tag2;
        }else{
          arr[2] = this.tags2[0];
          arr[4] = this.tags2[0];
        }
        arr[3] = '&&';
        arr[5] = symbolArr[1];
        if(this.tags3.length == 0){
          arr[6] = this.tag3;
        }else{
          arr[6] = this.tags3[0];
        }
        this.formulainfo.arguments[0] = arr;
      }else{
        let arr = new Array(3).fill('');
        if(this.tags1.length == 0){
          arr[0] = this.tag1;
        }else{
          arr[0] = this.tags1[0];
        }
        arr[1] = this.symbol;
        if(this.tags2.length == 0){
          arr[2] = this.tag2;
        }else{
          arr[2] = this.tags2[0];
        }
        this.formulainfo.arguments[0] = arr;
      }
      //console.log(this.formulainfo.arguments[0])
    },

    //初始化输入框的真假值
    initTFInput(args1,args2){
      if((typeof args1) == 'object' && args1.type == 'Element'){
        let ele = args1;
        this.tags4 =  [
          Object.assign({
            text:ele.name,
            style:'background-color: #409EFF',
          },ele)]
      }else if((typeof args1) == 'string'){
        this.tag4 = args1;
      }

      if((typeof args2) == 'object' && args2.type == 'Element'){
        let ele = args2;
        this.tags5 =  [
          Object.assign({
            text:ele.name,
            style:'background-color: #409EFF',
          },ele)]
      }else if((typeof args2) == 'string'){
        this.tag5 = args2;
      }
    },

    //初始化运算的真假值
    initTFFormula(args1,args2){
      if(Array.isArray(args1)){
        this.selectEleFormula = args1;
      }else if(typeof args1 == 'object' && args1.type == 'Element'){
        this.selectEleFormula = [Object.assign({},args1)];
      }

      if(Array.isArray(args2)){
        this.selectEleFormula2 = args1;
      }else if(typeof args2 == 'object' && args2.type == 'Element'){
        this.selectEleFormula2 = [Object.assign({},args2)];
      }
    },

    //写入参数真假值
    setTF(){
      if(this.result == 1){
        if(this.tags4.length == 0){
          this.formulainfo.arguments[1] = this.tag4;
        }else{
          this.formulainfo.arguments[1] = this.tags4[0];
        }
        if(this.tags5.length == 0){
          this.formulainfo.arguments[2] = this.tag5;
        }else{
          this.formulainfo.arguments[2] = this.tags5[0];
        }
      }else if(this.result == 2){
        this.formulainfo.arguments[1] = this.selectEleFormula;
        this.formulainfo.arguments[2] = this.selectEleFormula2;
      }
    },

  }
}
</script>
<style scoped lang="scss">
  .textblod{
    font-weight: bold;
    font-size: 18px;
  }
  .sele-ele-box{
    height: 100px;
    padding: 10px;
    // margin-top: 10px;
  }
  .icon-box .el-link{
    font-size: 20px;
    margin-right: 10px;
  }
</style>