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

野性酷女 2023-09-27 12:56 90阅读 0赞

## 项目场景： ##

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

--------------------

## 要点描述 ##

前端计算的使用

监听的使用

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

--------------------

## 实现方案： ##

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);
        },