supply-front/src/views/finance/tax_rate.vue

<template>
  <div class="app-container">
    <div>
      <div class="setting_title">税率设置</div>
      <el-divider></el-divider>

      <el-card shadow="never" class="my-card">
        <el-form
          class="my-form"
          ref="mainForm"
          :model="mainForm"
          label-width="120px"
          label-position="right"
        >
          <el-form-item label="仓存费税率" prop="">
            <el-input
              v-model="mainForm.storageFeeTax"
              autocomplete="off"
              placeholder="请输入"
              ><i class="el-input__icon" slot="suffix">% </i></el-input
            >
          </el-form-item>
          <el-form-item label="工程价差税率" prop="">
            <el-input
              v-model="mainForm.enginPriceDifTax"
              autocomplete="off"
              placeholder="请输入"
              ><i class="el-input__icon" slot="suffix">% </i></el-input
            >
          </el-form-item>
          <el-form-item label="运输费税率" prop="">
            <el-input
              v-model="mainForm.transportTax"
              autocomplete="off"
              placeholder="请输入"
              ><i class="el-input__icon" slot="suffix">% </i></el-input
            >
          </el-form-item>
          <el-form-item label="安装费税率" prop="">
            <el-input
              v-model="mainForm.installTax"
              autocomplete="off"
              placeholder="请输入"
              ><i class="el-input__icon" slot="suffix">% </i></el-input
            >
          </el-form-item>
          <el-form-item label="库存商品税率" prop="">
            <el-input
              v-model="mainForm.stockTax"
              autocomplete="off"
              placeholder="请输入"
              ><i class="el-input__icon" slot="suffix">% </i></el-input
            >
          </el-form-item>
          <el-form-item label="押金通用比例" prop="">
            <el-input
              v-model="mainForm.depositTax"
              autocomplete="off"
              placeholder="请输入"
              ><i class="el-input__icon" slot="suffix">% </i></el-input
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <div class="page-footer">
      <div class="footer">
        <el-button type="primary" @click="editFn">修改</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getCommonTaxGet, getCommonTaxConfig } from "@/api/finance/tax_rate";
export default {
  data() {
    return {
      mainForm: {
        storageFeeTax: null,
        enginPriceDifTax: null,
        transportTax: null,
        installTax: null,
        stockTax: null,
        depositTax: null,
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    //修改
    async editFn() {
      await getCommonTaxConfig({
        storageFeeTax: Number((this.mainForm.storageFeeTax / 100).toFixed(2)),
        enginPriceDifTax: Number(
          (this.mainForm.enginPriceDifTax / 100).toFixed(2)
        ),
        transportTax: Number((this.mainForm.transportTax / 100).toFixed(2)),
        installTax: Number((this.mainForm.installTax / 100).toFixed(2)),
        stockTax: Number((this.mainForm.stockTax / 100).toFixed(2)),
        depositTax: Number((this.mainForm.depositTax / 100).toFixed(2)),
      });
      this.$message.success("修改成功");
      this.getData();
    },
    //获取税率数据
    async getData() {
      const res = await getCommonTaxGet();
      console.log(res);
      this.mainForm = {
        storageFeeTax: res.data.storageFeeTax * 100,
        enginPriceDifTax: res.data.enginPriceDifTax * 100,
        transportTax: res.data.transportTax * 100,
        installTax: res.data.installTax * 100,
        stockTax: res.data.stockTax * 100,
        depositTax: res.data.depositTax * 100,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.setting_title {
  padding-left: 0;
}
.tips {
  font-size: 14px;
}
.my-card {
  margin-top: 20px;
  .box {
    background: rgb(235, 240, 249);
    padding: 10px;
    font-size: 14px;
    margin: 20px 0;
    line-height: 18px;
    ::v-deep .el-link {
      vertical-align: unset;
    }
  }
}
.my-form {
  width: 450px;
  margin: 0 auto;
}
.show-pwd {
  position: absolute;
  right: 15px;
  top: 0;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
}
.question {
  position: absolute;
  right: -30px;
  top: 0;
  font-size: 20px;
  cursor: pointer;
  user-select: none;
}
</style>