需求：
1.通过点击按钮和运算符将按钮和运算符的文字赋值到input框中，input框不能输入，但是可以删除，以及光标插入。
2.删除时，运算符直接删，但是文字按钮需要整体删除。（如，在"社保个人"光标在"人"后点击删除时，直接删除"社保个人"这几个字）
3.保存时需要对input的内容进行校验，判断是否是一个正常的公式。

截图：

截屏2021-09-17 下午5.33.14.png

<!-- 科目公式配置 -->
<template>
  <div>
    <el-form ref="elForm" size="medium" label-width="100px">
      <el-form-item label="绩效工资=">
        <el-input id="inputRef" type="textarea" placeholder="请选择" :value="salary" @input="inputChange"
          :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <div style="text-align: center;">
        <el-tag v-for="(item,index) in symbolList" :key="index" style="margin: 5px;" @click="add(item)">{{item}}</el-tag>
      </div>
    </el-form>
    <el-tabs type="border-card" style="margin-top: 30px;">
      <el-tab-pane v-for="(item,index) in allData" :key="index"  :label="item.title">
        <el-tag v-for="(item1,idx) in item.list" :key="idx" style="margin: 5px;"@click="add(item1.name)">{{item1.name}}</el-tag>
      </el-tab-pane>
    </el-tabs>
    <div style=" margin-top: 65px; text-align: right;">
       <el-button type="primary" style="margin-left: 10px;" @click.native="submitForm">保 存</el-button>
       <el-button @click.native="closeBtn">取 消</el-button>
     </div>
  </div>
</template>

<script>
  import { insertInputTxt } from "@/utils/ruoyi";
  export default {
    data() {
      return {
        salary:"",
        symbolList:['+','-','*','/','(',')','%'], //符号数组
        allData:[],
      }
    },
    methods: {
      open(data) {
        var allData = [
          {title:'薪酬数据',list:[{id:'101',name:'基本工资'},{id:'102',name:'岗位工资'}]},
          {title:'考勤数据',list:[{id:'103',name:'应到天数'},{id:'104',name:'实到天数'},{id:'105',name:'请假天数'}]},
          {title:'变动项目',list:[{id:'106',name:'社保个人'},{id:'107',name:'公积金个人'},{id:'108',name:'变动项目合计'}]},
          {title:'自定义科目',list:[{id:'109',name:'自定义科目1'},{id:'110',name:'绩效比例数'}]},
        ]
        var all = {title:'全部',list:[]}
        var li = []
        allData.forEach((item,index) =>{
          li = li.concat(item.list)
        })
        this.$set(all,'list',li)
        allData.unshift(all) //添加all数据到allData数组的第一位
        // console.log(allData)
        this.allData = allData
        if(data){//修改赋值
          this.salary = data
        }else{ //新增清空上次的值，
          this.salary = ''
        }
      },
      add(text){
        this.salary = insertInputTxt('inputRef',text)
      },
      inputChange(val){
        //1.只允许按钮插入，不允许手动输入，允许手动删除
        if(this.salary.length > val.length){
          this.salary = val
        }
        //2.删除时获取光标前后的文字
        var elInput = document.getElementById('inputRef');
        var startPos = elInput.selectionStart;
        var endPos = elInput.selectionEnd;
        if (startPos === undefined || endPos === undefined) return
        var txt = elInput.value;
        var q = txt.substring(0, startPos) //光标前面的文字
        var h = txt.substring(endPos) //光标后面的文字
        // console.log( "光标前面的文字:" + q)
        //3.删除的逻辑处理：获取光标前的最后一项文字（不算运算符）
       var arr = q.split(/[\+\-\*\/\(\)\%]/).filter(Boolean) //按字符集分割字符串，然后去掉空的元素
       var lastStr = arr.pop() //删除数组的最后一项,返回的是数组的最后一项
       // console.log("最后一项：" + lastStr)
       if(lastStr){
         //判断光标前的最后一项文字是否是完整的科目(在全部数据中存在)
         var qbData = this.allData[0].list
         var isWZ = false //是否完整科目
         qbData.forEach(item =>{
           if(item.name === lastStr){
             isWZ = true //是完整科目
           }
         })
         if(!isWZ){ //如果不是完整科目，就在光标前的文字中删除该不完整的科目
           q = q.substr(0, q.length - lastStr.length); //在q中删除lastStr
         }
         //如果是完整科目，那就意味着光标删除的只是一个运算符，不用做额外处理
         this.salary = q + h //拼接光标前后字段即可
         setTimeout(() => { //删除文字后，让光标定位到删除的地方，需要加个延时，不然代码会失效
           elInput.focus()
           elInput.selectionStart = elInput.selectionEnd = q.length
         }, 50); //延时尽量小，不然容易误删最后面的文字
       }
      },
      checkFormulaText(){//分割字符串
        var resultStr = this.salary
        var errorMsg = ""
        //拦截1：判断公式中 基本工资岗位工资 中间没有运算符
        var arr = resultStr.split(/[\+\-\*\/\(\)\%]/).filter(Boolean) //按字符集分割字符串，然后去掉空的元素
        var qbData = this.allData[0].list
        var qbList = []
        qbData.forEach(item =>{
          qbList.push(item.name)
        })
        var isSuccess = true
        arr.forEach(name =>{
          if(!qbList.includes(name)){ //数组中没有这条数据
            errorMsg = "公式配置错误，请检查：" + name
            isSuccess = false
          }
        })
        //拦截2：公式中有以下错误的运算符
        var errorList = [
          "++","+-","+*","+/","+%",
          "-+","--","-*","-/","-%",
          "*+","*-","**","*/","*%",
          "/+","/-","/*","//","/%",
          "%+","%-","%*","%/","%%",
          "(+","(-","(*","(/","(%",
          "+)","-)","*)","/)","%)",
          "()",")("
        ]
        errorList.forEach(item =>{
          if(resultStr.indexOf(item) != -1){ //字符串包含
            errorMsg = "公式配置错误，请检查：" + item
            isSuccess = false
          }
        });
        //拦截3：公式中(的个数与)的个数不相同
        var sub1 = (resultStr.match(/\(/g)||[]).length
        var sub2 = (resultStr.match(/\)/g)||[]).length
        if(sub1 !== sub2){
          errorMsg = "公式配置错误，请检查()是否匹配"
          isSuccess = false
        }
        //拦截4：公式中（）的位置是否反了 社保个人)+(岗位工资
        var sub1F = resultStr.indexOf('\(')
        var sub2F = resultStr.indexOf('\)')
        var sub1E = resultStr.lastIndexOf('\(')
        var sub2E = resultStr.lastIndexOf('\)')
        if(sub2F < sub1F || sub2E < sub1E ){ // ）首次出现的位置 小于 ( 首次出现的位置; 或者 ) 最后出现的位置 小于 (最后出现的位置
          errorMsg = "公式配置错误，请检查()是否匹配"
          isSuccess = false
        }
        //拦截5: 公式中，公积金个人(自定义科目1)实到天数
        if(sub1F !== 0){ //如果(不是第一位，获取每个(前面的一个字符，看看是不是符号，不是符号，就报错
          var idxList = this.getStrPositions(resultStr,'(')
          var isE = false
          idxList.forEach(item =>{
            var dd = resultStr.substr(item-1,1) //获取(前面一个字符
            if(!this.symbolList.includes(dd)){ //不是符号，报错
              isE = true
            }
          })
          if(isE){
            errorMsg = "公式配置错误，请检查(运算符"
            isSuccess = false
          }
        }
        if(sub2E !== resultStr.length-1){ //如果)不是最后一位，获取每一个）后面的一个字符，看看是不是符号，不是符号，就报错
          var idxList = this.getStrPositions(resultStr,')')
          var isE = false
          idxList.forEach(item =>{
            var dd = resultStr.substr(item+1,1) //获取)后面的一个字符
            if(!this.symbolList.includes(dd)){ //不是符号，报错
              isE = true
            }
          })
          if(isE){
            errorMsg ="公式配置错误，请检查)运算符"
            isSuccess = false
          }
        }
        //拦截6：公式的开头和结尾有非法运算符
        if(resultStr.length > 0){
          var firstChart = resultStr.substr(0,1) //第一个字符
          var firstErrorList = ["+","-","*","/","%",")"]
          firstErrorList.forEach(item =>{
            if(firstChart === item){
              errorMsg = "公式配置错误，开头不能是:" + item
              isSuccess = false
            }
          });
          var endChart =  resultStr.substr(-1) //最后一个字符
          var endErrorList = ["+","-","*","/","%","("]
          endErrorList.forEach(item =>{
            if(endChart === item){
              errorMsg = "公式配置错误，结尾不能是:" + item
              isSuccess = false
            }
          });
        }else{
          errorMsg ="请配置公式"
          isSuccess = false
        }
        if(!isSuccess){
          this.msgError(errorMsg)
        }
        return isSuccess
      },
      getStrPositions(str,subStr){
        var indexs=[];
        var string=str;
        while(true){
            var index=string.lastIndexOf(subStr);
            if(index!=-1){
                string=string.substr(0,index)+string.substr(index+subStr.length,string.length);
                indexs.push(index);

            }else{
                break;
            }
        }
        return indexs;
      },
      submitForm() {
        if(this.checkFormulaText()){
          this.$emit('closeConfigFormula',{msg:this.salary}); //通知父组件改变
        }
      },
      closeBtn(){
        this.$emit('closeConfigFormula',{msg:''}); //通知父组件改变
      }
    }
  }
</script>

/** input在光标前插入文字
 * id：input绑定的id
 * insertTxt：要插入的文本
 * 返回：插入后的所有文本
 */
export function insertInputTxt(id,insertTxt) {
    var elInput = document.getElementById(id);
    var startPos = elInput.selectionStart;
    var endPos = elInput.selectionEnd;
    if (startPos === undefined || endPos === undefined) return
    var txt = elInput.value;
    var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
    elInput.value = result;
    elInput.focus();
    elInput.selectionStart = startPos + insertTxt.length;
    elInput.selectionEnd = startPos + insertTxt.length;
    return result;
}