个人原创自定义计算公式组件可继续扩展

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-container>
          <el-main
          >
            <el-card>
              <div>
                <el-button
                  size="mini"
                  plain
                  @click="add('ZDY')"
                  style="color: #409eff; border-color: #409eff"
                ><i class="el-icon-plus"></i>添加自定义数据
                </el-button
                >
                <el-input
                  v-model="customData"
                  size="mini"
                  placeholder="请输入自定义数据"
                  style="width: 150px; margin-right: 10px; margin-left: 10px"
                ></el-input>
                <el-button
                  icon="el-icon-plus"
                  circle
                  size="mini"
                  @click="add('+')"
                ></el-button>
                <el-button
                  icon="el-icon-minus"
                  circle
                  size="mini"
                  @click="add('-')"
                ></el-button>
                <el-button
                  icon="el-icon-close"
                  circle
                  size="mini"
                  @click="add('*')"
                ></el-button>
                <el-button circle size="mini" @click="add('/')">
                  <svg-icon icon-class="除号" class-name="custom-class"
                  />
                </el-button>
                <el-button circle size="mini" @click="add('(')">
                  <svg-icon icon-class="左括号" class-name="custom-class"/>
                </el-button>
                <el-button circle size="mini" @click="add(')')">
                  <svg-icon icon-class="右括号" class-name="custom-class"/>
                </el-button>
                <el-button
                  size="mini"
                  plain
                  @click="add('活动数据')"
                  style="color: #8e44ad; border-color: #8e44ad"
                >活动数据
                </el-button
                >
                <el-button
                  style="color: #2980b9; border-color: #2980b9"
                  @click="check"
                  size="mini"
                ><i class="el-icon-finished"></i>校验公式
                </el-button
                >
<!--                <el-input-->
<!--                  v-model="formulaName"-->
<!--                  size="mini"-->
<!--                  style="width: 130px; margin-left: 10px; margin-right: 10px"-->
<!--                  placeholder="请输入公式名称"-->
<!--                ></el-input>-->
                <el-button
                  size="mini"
                  style="color: #67c23a; border-color: #67c23a"
                  @click="sumbmit"
                ><i class="el-icon-document-checked"></i>保存公式
                </el-button
                >
                <el-button
                  plain
                  size="mini"
                  @click="delParam"
                  style="color: #f56c6c; border-color: #f56c6c"
                >
                  <i class="el-icon-back"></i>
                  清除
                </el-button
                >
                <el-button
                  plain
                  size="mini"
                  @click="delParams"
                  style="color: #f56c6c; border-color: #f56c6c"
                >
                  <svg-icon icon-class="清除" class-name="custom-class"/>
                  清除全部
                </el-button
                >
                <el-input
                  class="text-color"
                  placeholder="输入公式，例如:(活动数据+100)x1.2"
                  type="textarea"
                  :rows="7"
                  v-model="formula"
                  :disabled="true"
                >
                </el-input>
              </div>
              <el-link style="color: #8e44ad" :underline="false">
                <i class="el-icon-edit"></i>请输入测试活动数据:
              </el-link
              >
              <el-input
                size="mini"
                style="width: 130px; margin-left: 10px; margin-right: 10px"
                placeholder="输入活动数据"
                v-model="activeData">
              </el-input>
<!--              <el-link style=" color: #67c23a-->
<!--              " :underline="false">-->
<!--                <svg-icon-->
<!--                  icon-class="公式"-->
<!--                  class-name="custom-class"-->
<!--                />-->
<!--                请选择保存的公式:-->
<!--              </el-link>-->
<!--              <el-select-->
<!--                v-model="calculationFormula"-->
<!--                placeholder="请选择公式"-->
<!--                size="mini"-->
<!--                style="width: 130px; margin-left: 10px; margin-right: 10px"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="item in options"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                >-->
<!--                </el-option>-->
<!--              </el-select>-->
              <el-button
                @click="submit1"
                size="mini"
                style="color: #2ecc71; border-color: #2ecc71"
              >
                <svg-icon
                  icon-class="计算器"
                  class-name="custom-class"
                />
                计算
              </el-button
              >
              <el-input
                placeholder="计算结果"
                style="width: 130px; margin-left: 10px; margin-right: 10px"
                size="mini"
                v-model="calculation"
              >
              </el-input>
            </el-card>
          </el-main>
        </el-container>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    name: "CalculationFormula",
    props: ['value'],
    data() {
      return {
        formula: "",
        activeData: "",
        calculation: "",
        formulaName: "",
        customData: "",
        calculationFormula:this.value,
        options: [],
        bol: false,
      };
    },
     // 监听父组件计算公式值的变化触发逻辑
    watch: {
      value: {
        immediate: true,
        handler(value) {
          if (value === null){
            this.formula = "";
            // this.formulaName = "";
            this.customData = "";
            this.activeData = "";
            this.calculation = "";
          }else {
            this.formula = value;
          }
        }
      }
    },
    methods: {
      // 清除最后一串字符
      delParam() {
        if (this.formula === "") {
          return this.$message({
            message: "当前文本框内没有公式,无法清除",
            type: "warning",
          });
        }
        this.formula = this.formula.substring(0, this.formula.length - 1);
      },
      // 清除全部
      delParams() {
        if (this.formula === "") {
          return this.$message({
            message: "当前文本框内没有公式,无法清除",
            type: "warning",
          });
        }
        this.formula = "";
        this.customData = "";
      },
      add(e) {
        if (e !== "ZDY") {
          this.formula = this.formula + e;
          return;
        }
        if (this.customData === "") {
          return this.$message({
            message: "请先输入自定义数据!",
            type: "warning",
          });
        }
        this.formula = this.formula + this.customData;
        this.customData = "";
      },

      check() {
        if (this.formula === "") {
          return this.$message({
            message: "请先输入公式!",
            type: "warning",
          });
        }
        try {
          var result = eval(this.formula.replace(/活动数据/g, 0));
          if (typeof result === "number" && !isNaN(result) && result >= 0) {
            this.$message.success("公式校验合法请点击确定!");
            this.bol = true;
          } else {
            this.$message.error("公式校验不合法!计算结果为负数!");
            return;
          }
        } catch (error) {
          this.$message.error("公式校验不合法,请检查!");
        }
      },
      sumbmit() {
        if (this.formula === "") {
          return this.$message({
            message: "请先输自定义公式!",
            type: "warning",
          });
        }
        if (this.bol === false) {
          return this.$message({
            message: "请先校验公式!",
            type: "warning",
          });
        }
        // if (this.formulaName === "") {
        //   return this.$message({
        //     message: "请输入公式名称!",
        //     type: "warning",
        //   });
        // }

        // this.options.push({
        //   value: this.formula,
        //   label: this.formulaName,
        // });
        this.$message.success(this.formulaName + "添加成功,请输入活动数据!");
        // this.formula = "";
        // this.formulaName = "";
        // this.customData = "";
        this.bol = false;
      },
      submit1() {
        // if (this.options.length === 0) {
        //   return this.$message.error("请先保存公式!");
        // }
        if (this.activeData === "") {
          return this.$message.error("请先输入活动数据!");
        }
        // if (this.calculationFormula === "") {
        //   return this.$message.error("请先选择公式!");
        // }
        this.calculation = eval(this.formula.replace(/活动数据/g, this.activeData));
        this.$emit('transmitValue', this.formula)
      },
    },
  };
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .text {
    font-size: 16px;
  }

  .item {
    padding: 18px 0;
  }

  .el-input {
    background-color: #f5f5f5;
  }
</style>
<style scoped>
  .content-textarea {
    height: 400px;
    margin: 20px;
    padding: 20px;
  }

  .content-textarea__item {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    padding: 0 8px;
    background: #ecf5ff;
    border: 1px solid #d9ecff;
    border-radius: 2px;
  }

  .text-color /deep/ .el-textarea__inner {
    background-color: transparent;
    color: #2c3e50;
    font-size: 20px;
    font-family: "Times New Roman", Georgia, Serif;
    font-weight: bold;
    -webkit-text-stroke: 0px #2c3e50;
  }
</style>
// 附上组件图片