vue实现四则运算封装组件

你的名字 2021-09-27 22:54 575阅读 0赞

<template>
    <div>
      <el-row class="tableRowAlign">
        <el-col :span="24">
          <span>指标算法：</span>
          <el-button type="primary"  @click="formulaSymbol('+',1)">+</el-button>
          <el-button type="primary"  @click="formulaSymbol('-',1)">-</el-button>
          <el-button type="primary"  @click="formulaSymbol('*',1)">*</el-button>
          <el-button type="primary"  @click="formulaSymbol('/',1)">/</el-button>
          <el-button type="primary"  @click="formulaSymbol('(',2)">(</el-button>
          <el-button type="primary"  @click="formulaSymbol(')',2)">)</el-button>
          <el-button type="primary" @click="validateFormula"  icon="el-icon-check">规则验证</el-button>
        </el-col>
      </el-row>
      <el-row class="tableRowAlign">
        <el-col :span="24">
          <el-tag
          style="background-color:#009fff;height: 28px"
            v-for="tag in tags"
            :key="tag.name"
            closable
          type="primary"
            @close="handleClose(tag)"
            :type="tag.type">
            {
       {tag.name}}
          </el-tag>
    
        </el-col>
      </el-row>
    </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            tags: [],
            dBExpress:[],
            uIExpress:[] 
          };
        },
        methods: {
          getDBExpress(){
            let dbStr=''
            for (let i = 0; i < this.dBExpress.length; i++) {
              dbStr += this.dBExpress[i]
            }
            return dbStr
          },
          getUIExpress(){
            let uiStr=''
            for (let i = 0; i < this.uIExpress.length; i++) {
              uiStr += this.uIExpress[i]
            }
            return uiStr
          },
          //验证公式是否符合规则
          validateFormula () {
            debugger
            let dbStr = this.getDBExpress()
            let result = this.fondamentalJudge(dbStr)
            if (!result){
              this.$message.warning({
                message:'规则不符合要求!'
              })
            }else{
              this.$message.info({
                message:'规则正确!'
              })
            }
            console.log(result)
            return result
          },
          handleClose (tag) {
            debugger
            this.tags.splice(this.tags.indexOf(tag), 1);
            this.dBExpress.splice(this.tags.indexOf(tag), 1); //删除记录db
            this.uIExpress.splice(this.tags.indexOf(tag), 1); //删除记录用户显示的
          },
          formulaSymbol(param,type){
    
            if (type===1){ //现在是符号上一个不能是符号
              if (this.tags.length===0) { //第一个就是符号
                this.$message.warning({
                  message: '规则不符合要求！'
                })
                return
              }else {
               let  tagType=  this.tags[this.tags.length-1].type
                  if (type===tagType){
                    this.$message.warning({
                      message: '规则不符合要求！'
                    })
                    return
                  }
                }
              }
            this.dBExpress.push(param)  //记录db
            this.uIExpress.push(param)   //记录用户显示的
    
            let  tag={
              name:param,
              type:type,
              times:new Date().getTime()
            }
            this.tags.push(tag)  //tab标签显示
          },
          //调用改组件的页面给该组件传递参数
          neTypeClick(param){
           //清空数组
            this.dBExpress=[]
            this.uIExpress=[]
            this.tags=[]
          },
          //调用改组件的页面给该组件传递参数
          setFondamentalRules(param){
            debugger
            this.dBExpress.push('{'+param.kpiID+'}')  //记录db
            this.uIExpress.push('{'+param.label+'}')   //记录用户显示的
    
            if (this.tags.length > 0) {
              let tagType = this.tags[this.tags.length - 1].type
              if (-1 === tagType) {
                this.$message.warning({
                  message: '规则不符合要求！'
                })
                return
              }
            }
            let  tag={
              name:param.label,
              kpiID:param.kpiID,
              type:param.type,
              times:new Date().getTime()
            }
            this.tags.push(tag)  //tab标签显示
          },
          //判断四则运算的函数
          fondamentalJudge (string) {
            //去除左边及右边的括号（这个是我的公式里面有特殊字符）
           let str= string.replace('{', '').replace('}','')
            // 剔除空白符
            string = str.replace(/\s/g, '')
    
            // 错误情况，空字符串
            if ('' === string) {
              return false
            }
            // 错误情况，运算符连续
            if (/[\+\-\*\/]{2,}/.test(string)) {
              return false
            }
            // 空括号
            if (//.test(string)) {
              return false
            }
            // 最后一个符号是加、减、乘、除符号
            if (/[\+\-\*\/]$/.test(string)) {
              return false
            }
            // 错误情况，括号不配对
            var stack = []
            for (var i = 0, item; i < string.length; i++) {
              item = string.charAt(i)
              if ('(' === item) {
                stack.push('(')
              } else if (')' === item) {
                if (stack.length > 0) {
                  stack.pop()
                } else {
                  return false
                }
              }
            }
            if (0 !== stack.length) {
              return false
            }
            // 错误情况，(后面是运算符
            if (/$[\+\-\*\/]/.test(string)) {
              return false
            }
            // 错误情况，)前面是运算符
            if (/[\+\-\*\/]$/.test(string)) {
              return false
            }
            // 错误情况，(前面不是运算符
            if (/[^\+\-\*\/]$/.test(string)) {
              return false
            }
            // 错误情况，)后面不是运算符
            if (/$[^\+\-\*\/]/.test(string)) {
              return false
            }
    
            // **错误情况最后一个字符是**+-*/
            if (/\*[\+\-\*\/]$/.test(string)) {
              return false
            }
            return true
          }
        }
      }
    </script>
    <style scoped>
      @import '../../assets/style/querystyle.css';
      .el-tag + .el-tag {
        margin-left: 2px;
        margin-top: 10px;
      }
      span {
        color: #d9d9d9;
        //font-size: medium;
      }
    </style>

组件结果：  
![在这里插入图片描述][20181128110459698.png]

[20181128110459698.png]: /images/20210923/af217e0c923848b7bde6422c8c76cd64.png