前端监听及计算的简单使用

最新推荐文章于 2024-06-22 08:48:09 发布

linab112

最新推荐文章于 2024-06-22 08:48:09 发布

阅读量463

点赞数

分类专栏：前端文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/m0_72167535/article/details/128064030

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

这篇博客介绍了在前端项目中如何在新增账单时设置初始值，并根据选择的项目实时计算其他相关值。通过监听、手动计算函数，实现了税率、单价、数量等字段的联动更新，确保了表单数据的同步与正确性。示例代码展示了Vue.js中使用el-form和el-input组件进行数据绑定和计算的详细过程。

摘要由CSDN通过智能技术生成

项目场景：

新增账单的时候，要求对一些项目设置初期値，要根据一些项目，计算出另一些项目的值，并且当一些项目的内容变换了，另一些项目的值也随着变化。

要点描述

前端计算的使用

监听的使用

计算属性的使用（这里因为一些原因，没有使用计算属性）

实现方案：

1.点击新增按钮，设置初值，弹出新增对话框

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加结算账单手账";
      //税率初值设置
      this.$set(this.form, "taxRate", 0.06);
      //锁定状态
      this.$set(this.form, "isLocked", 0)
      //费用产生时间
      this.$set(this.form, "belongingToDate", new Date())
      //手账类型
      this.$set(this.form, "memoType", 1)
      //收付类型
      this.$set(this.form, "paymentType", 1)
      //含税费率单价
      this.$set(this.form, "unitPriceContainTax", 0);
      //费率单价
      this.$set(this.form, "unitPrice", 0);
      //计费数量
      this.$set(this.form, "amounts", 0);
      //税额
      this.$set(this.form, "tax", 0);
      //含税合计
      this.$set(this.form, "totalContainRate", 0);
      //不含税合计
      this.$set(this.form, "total", 0);

    },

对话框的内容


    <!-- 添加或修改结算账单手账对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="clientId">
              <el-select v-model="form.clientId" placeholder="请选择客户名称" clearable filterable>
                <el-option v-for="item in companyOption"
                           :key="item.value"
                           :value="item.value"
                           :label="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称" prop="supplierId">
              <el-input v-model="form.supplierId" placeholder="请输入供应商名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品币种" prop="currency">
              <el-select v-model="form.currency" placeholder="请输入币种" clearable filterable>
                <el-option v-for="dict in dict.type.standard_money"
                           :key="dict.value"
                           :value="Number(dict.value)"
                           :label="dict.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="汇率" prop="exchangeRate">
              <el-input v-model="form.exchangeRate" placeholder="请输入汇率"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="提单号" prop="billOfLadingNo">
              <el-input v-model="form.billOfLadingNo" placeholder="请输入提单号"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="费目名称" prop="expenseId">
              <el-select v-model="form.expenseId" placeholder="请选择费目名称" filterable clearable style="width: 100%">
                <el-option v-for="item in expenseOption"
                           :key="item.value"
                           :value="item.value"
                           :label="item.label"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="税率" prop="taxRate">
              <el-select v-model="form.taxRate" placeholder="请输入税率" filterable clearable>
                <el-option v-for="dict in dict.type.expense_value_rate"
                           :key="dict.value"
                           :value="Number(dict.value)"
                           :label="dict.label"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="含税费率单价" prop="unitPriceContainTax">
              <el-input v-model="form.unitPriceContainTax" placeholder="请输入含税费率单价"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="费率单价" prop="unitPrice">
              <el-input v-model="form.unitPrice" placeholder="请输入费率单价"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="计费数量" prop="amounts">
              <el-input v-model="form.amounts" placeholder="请输入计费数量"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="税额" prop="tax">
              <el-input v-model="form.tax" placeholder="请输入税额" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="含税合计" prop="totalContainRate">
              <el-input v-model="form.totalContainRate" placeholder="请输入含税合计" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="不含税合计" prop="total">
              <el-input v-model="form.total" placeholder="请输入不含税合计" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收付类别" prop="paymentType">
              <el-select v-model="form.paymentType" placeholder="请输入收付类型" clearable filterable>
                <el-option v-for="dict in dict.type.payment_type"
                           :key="dict.value"
                           :value="Number(dict.value)"
                           :label="dict.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="锁定状态" prop="isLocked">
              <el-select v-model="form.isLocked" placeholder="请输入锁定状态" clearable filterable>
                <el-option v-for="dict in dict.type.is_locked"
                           :key="dict.value"
                           :value="Number(dict.value)"
                           :label="dict.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="费用产生日期" prop="belongingToDate">
              <el-date-picker clearable size="small"
                              v-model="form.belongingToDate"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择费用产生日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手账类型" prop="memoType">
              <el-select v-model="form.memoType" placeholder="请输入手账类型" filterable clearable>
                <el-option v-for="dict in dict.type.bill_type"
                           :key="dict.value"
                           :value="Number(dict.value)"
                           :label="dict.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="费用说明" prop="chargeDesc">
              <el-input v-model="form.chargeDesc" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="费用附件">
          <FileUploadImg :value="form.fileString" :parentPath="parentPath" @input="getFileList"></FileUploadImg>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

2.设置监听

watch: {
    //监听上传组件弹框关闭
    'info.open': {
      immediate: true,
      handler: function (val) {
        if (!val) {
          //刷新列表
          this.handleQuery();
        }
      }
    },
    'form.taxRate': {
      handler: function (val) {
        if (val >= 0) {
          //计算含税费率单价
          this.calculateUnitPriceContainTax()
          //计算税额
          this.calculateTax();
          //计算不含税合计
          this.calculateTotal();
          //计算含税合计
          this.calculateTotalContainRate();
        }
      }
    },
    'form.unitPrice': {
      handler: function (val) {
        if (val >= 0) {
          //计算含税费率单价
          this.calculateUnitPriceContainTax()
          //计算税额
          this.calculateTax();
          //计算不含税合计
          this.calculateTotal();
          //计算含税合计
          this.calculateTotalContainRate();
        }
      }
    },
    'form.amounts': {
      handler: function (val) {
        if (val >= 0) {
          //计算税额
          this.calculateTax();
          //计算不含税合计
          this.calculateTotal();
          //计算含税合计
          this.calculateTotalContainRate();
        }
      }
    },
    'form.unitPriceContainTax': {
      handler: function (val) {
        if (val >= 0) {
          //计算费率单价
          this.calculateUnitPrice();
          //计算税额
          this.calculateTax();
          //计算不含税合计
          this.calculateTotal();
          //计算含税合计
          this.calculateTotalContainRate();
        }
      }
    },
  },

3.计算

  //计算费率单价
    calculateUnitPrice() {
      //税率
      let taxRate = this.form.taxRate;
      let unitPriceContainTax = this.form.unitPriceContainTax
      let unitPrice = Number(Number(unitPriceContainTax / (1 + taxRate)).toFixed(4));
      this.$set(this.form, "unitPrice", unitPrice);
    },
    //计算含税费率单价
    calculateUnitPriceContainTax() {
      let taxRate = this.form.taxRate;
      let unitPrice = this.form.unitPrice;
      let unitPriceContainTax = Number(Number(unitPrice * (1 + taxRate)).toFixed(4));
      this.$set(this.form, "unitPriceContainTax", unitPriceContainTax);
    },
    //计算税额
    calculateTax() {
      let amounts = this.form.amounts;
      let unitPrice = this.form.unitPrice;
      let taxRate = this.form.taxRate;
      let tax = Number(Number(unitPrice * taxRate * amounts).toFixed(4));
      this.$set(this.form, "tax", tax);
    },
    //计算不含税金额
    calculateTotal() {
      let amounts = this.form.amounts;
      let unitPrice = this.form.unitPrice;
      let total = Number(Number(unitPrice * amounts).toFixed(4));
      this.$set(this.form, "total", total);
    },
    //计算含税金额
    calculateTotalContainRate() {
      let amounts = this.form.amounts;
      let unitPrice = this.form.unitPrice;
      let taxRate = this.form.taxRate;
      let totalContainRate = Number(Number(unitPrice * (1 + taxRate) * amounts).toFixed(4));
      this.$set(this.form, "totalContainRate", totalContainRate);
    },