Smart_platform_ui/src/components/fee-info/main.vue

<template>
  <div>
    <trade-card title="费用明细">
      <avue-crud ref="feeCrud" :data="feeData" :option="feeOption" @saveColumn="saveColumn" @resetColumn="resetColumn"
        @selection-change="selectionChange" :summary-method="summaryMethod" :cell-style="cellStyle">
        <template slot="menuLeft">
          <el-tabs v-model="activeName" @tab-click="tabHandle">
            <el-tab-pane label="应收" name="first" :key="'first'" v-if="tabShow == 1 || tabShow == 2">
            </el-tab-pane>
            <el-tab-pane label="应付" name="second" :key="'second'" v-if="tabShow == 1 || tabShow == 3">
            </el-tab-pane>
          </el-tabs>
          <el-button type="primary" icon="el-icon-plus" size="small" @click.stop="rowAdd" :loading="buttonLoading"
            :disabled="disabled">录入明细</el-button>
          <el-button type="warning" size="small" @click.stop="billingDetails('收费')" :loading="buttonLoading" :disabled="
            (financeDisabled && disabled) || selectionList.length == 0
          " v-if="selectTab === 1&&billingShow">生成账单</el-button>
          <el-button type="warning" size="small" @click.stop="billingDetails('申请')" :loading="buttonLoading" :disabled="
            (financeDisabled && disabled) || selectionList.length == 0
          " v-if="selectTab === 2&&billingShow">申请付费</el-button>
        </template>
        <template slot="menu" slot-scope="{ row, index }">
          <el-button size="small" icon="el-icon-edit" type="text" @click="rowCell(row, index)" :disabled="disabled">{{
          row.$cellEdit ? "保存" : "修改"
          }}</el-button>
          <el-button size="small" icon="el-icon-delete" type="text" @click="rowDel(row, index)" :disabled="disabled">删 除
          </el-button>
        </template>
        <template slot="headerSerial">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click.stop="addRow" :disabled="disabled" circle>
          </el-button>
        </template>
        <template slot="corpId" slot-scope="{ row, index }">
          <crop-select ref="corp" v-if="row.$cellEdit" v-model="row.corpId" :cropIndex="index"
            @getCorpData="getCorpData" corpType="KG"></crop-select>
          <span v-else>{{ row.corpName }}</span>
        </template>
        <template slot="feeName" slot-scope="{ row }">
          <breakdown-select v-if="row.$cellEdit" v-model="row.itemId" @selectValue="value => selectValue(value, row)"
            :configuration="breakConfiguration">
          </breakdown-select>
          <span v-else>{{ row.feeName }}</span>
        </template>
        <template slot="billNo" slot-scope="{ row }">
          <el-select v-if="row.$cellEdit" v-model="row.billNo" size="small" filterable allow-create default-first-option
            clearable>
            <el-option v-for="(item, index) in billNoList" :key="index" :label="item" :value="item">
            </el-option>
          </el-select>
          <span v-else>{{ row.billNo }}</span>
        </template>
        <template slot="price" slot-scope="{ row }">
          <el-input-number v-if="row.$cellEdit" v-model="row.price" placeholder="请输入" size="small" :controls="false"
            :precision="2" @input="countChange(row)" style="width: 100%"></el-input-number>
          <span v-else>{{ row.price | micrometerFormat }}</span>
        </template>
        <template slot="quantity" slot-scope="{ row }">
          <el-input-number v-if="row.$cellEdit && !isDecimal" v-model="row.quantity" size="small" placeholder="请输入"
            :controls="false" :precision="0" @input="countChange(row)" style="width: 100%"></el-input-number>
          <el-input-number v-if="row.$cellEdit && isDecimal" v-model="row.quantity" size="small" placeholder="请输入"
            :controls="false" :precision="6" @input="countChange(row)" style="width: 100%"></el-input-number>
          <span v-else>{{ row.quantity | decimalFormat }}</span>
        </template>
        <template slot="amount" slot-scope="{ row }">
          <span>{{ row.amount | micrometerFormat }}</span>
        </template>
        <template slot="exchangeRate" slot-scope="{ row }">
          <el-input-number v-if="row.$cellEdit" v-model="row.exchangeRate" size="small" :controls="false" :precision="6"
            @change="rateChange(row)" style="width: 100%" placeholder="请输入"></el-input-number>
          <span v-else>{{ row.exchangeRate }}</span>
        </template>
        <template slot="currency" slot-scope="{ row }">
          <el-select v-if="row.$cellEdit" v-model="row.currency" filterable allow-create default-first-option
            placeholder="请选择" size="small" @change="currencyChange(row)">
            <el-option v-for="(item, index) in currencyList" :key="index" :label="item.dictValue"
              :value="item.dictValue">
            </el-option>
          </el-select>
          <span v-else>{{ row.currency }}</span>
        </template>
        <template slot="invoiceAmount" slot-scope="{ row }">
          <el-popover placement="right" width="400" trigger="click" @show="invoiceShow(row)" @hide="invoiceHide">
            <avue-crud :data="invoiceData" :option="invoiceOption"></avue-crud>
            <!-- <el-button slot="reference">click 激活</el-button> -->
            <span style="color: #409EFF;cursor: pointer" slot="reference">{{ row.invoiceAmount }}</span>
          </el-popover>
        </template>
        <template slot="unit" slot-scope="{ row }">
          <el-select v-if="row.$cellEdit" v-model="row.unit" filterable placeholder="请选择" size="small">
            <el-option v-for="(item, index) in unitList" :key="index" :label="item.dictValue" :value="item.dictValue">
            </el-option>
          </el-select>
          <span v-else>{{ row.unit }}</span>
        </template>
      </avue-crud>
    </trade-card>

    <el-dialog title="导入费用" append-to-body :visible.sync="feeDialog" top="5vh" width="60%" :close-on-click-modal="false"
      @closed="feeClose" class="el-dialogDeep" v-dialog-drag>
      <el-row style="height: 0;">
        <el-col :span="5">
          <div style="margin-top:45px">
            <el-scrollbar>
              <basic-container>
                <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" />
              </basic-container>
            </el-scrollbar>
          </div>
        </el-col>
        <el-col :span="19">
          <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" @refresh-change="refreshChange"
            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
            :page.sync="page" @on-load="onLoad" :cell-style="cellStyle">
          </avue-crud>
        </el-col>
      </el-row>
      <div class="dialogButton">
        <el-button @click="feeDialog = false">取 消</el-button>
        <el-button type="primary" @click="importData" :disabled="this.selectionList.length == 0">
          导入
        </el-button>
      </div>
    </el-dialog>
    <crop-dialog ref="cropDialog" @importCorp="importCorp"></crop-dialog>
  </div>
</template>

<script>
import feeOption from "./config/feeInfo.json";
import woodOption from "./config/wood.json";
import option from "./config/feeList.json";
import { getDeptLazyTree, customerList } from "@/api/basicData/basicFeesDesc";
import { delItem, delItem2, getfeesDetails } from "@/api/feeInfo/fee-info";
import { isPercentage, micrometerFormat, IntegerFormat } from "@/util/validate";
import cropDialog from "@/components/crop-dialog/main";
import _ from "lodash";
import ApplyPayment from "../finance/applyPayment";
import {
  applyLoan,
  paymentApply
} from "@/api/financialManagement/paymentRequest";
import { contrastList } from "@/util/contrastData";
import { allCropList } from "@/api/basicData/customerInformation";
import { getCustomerCode, getCustomerName } from "@/enums/management-type";
import { getParities } from "@/api/basicData/customerInquiry";
import { dateFormat } from "@/util/date";
export default {
  name: "feeInfo",
  data() {
    return {
      invoiceOption: {
        border: true,
        align: 'center',
        header: false,
        menu: false,
        column: [
          {
            label: '日期',
            prop: 'invoice_time'
          },
          {
            label: '金额',
            prop: 'amount'
          },
        ]
      },
      option: option,
      feeOption: {},
      feeDialog: false,
      buttonLoading: false,
      treeOption: {
        nodeKey: "id",
        lazy: true,
        treeLoad: function (node, resolve) {
          const parentId = node.level === 0 ? 0 : node.data.id;
          getDeptLazyTree(parentId).then(res => {
            resolve(
              res.data.data.map(item => {
                return {
                  ...item,
                  leaf: !item.hasChildren
                };
              })
            );
          });
        },
        addBtn: false,
        menu: false,
        size: "small",
        props: {
          labelText: "标题",
          label: "title",
          value: "value",
          children: "children"
        }
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      treeDeptId: null,
      loading: false,
      receivableButton: "primary",
      copeWithButton: "",
      data: [],
      feeData: [],
      selectionList: [],
      reData: null,
      currencyList: [],
      unitList: [],
      breakConfiguration: {
        multipleChoices: false,
        multiple: false,
        disabled: false,
        searchShow: true,
        collapseTags: false,
        clearable: true,
        placeholder: "请点击右边按钮选择",
        dicData: []
      },
      allData: [],
      data_one: [],
      data_two: [],
      selectTab: 1,
      enableName: "first",
      tab1: true,
      tab2: false,
      corpList: [],
      invoiceData: [],
    };
  },
  props: {
    orderFeesList: {
      type: Array
    },
    disabled: {
      type: Boolean
    },
    feeUrl: {
      type: String
    },
    typeName: {
      type: String
    },
    billUrl: {
      type: String
    },
    optionType: {
      type: String
    },
    itemType: {
      type: String
    },
    srcType: {
      type: Number,
      default: 2
    },
    corpId: {
      type: String
    },
    billNoList: {
      type: Array
    },
    financeDisabled: {
      type: Boolean,
      default: true
    },
    inCropId: {
      type: Boolean,
      default: false
    },
    // 1.显示全部 2.收费 3.付费
    tabShow: {
      type: Number,
      default: 1
    },
    activeName: {
      type: String,
      default: 'first'
    },
    // 1.贸易 2.泽兴
    delType: {
      type: Number,
      default: 1
    },
    isDecimal: {
      type: Boolean,
      default: false
    },
    billingShow: {
      type: Boolean,
      default: true
    },
  },
  filters: {
    isPercentage(val) {
      return isPercentage(val);
    },
    micrometerFormat(val) {
      return micrometerFormat(val);
    },
    decimalFormat(num) {
      return num ? Number(num).toFixed(6) : "0.00";
    },
    IntegerFormat(num) {
      return IntegerFormat(num);
    }
  },
  async created() {
    // 判断tabShow的activeName默认的显示
    this.activeName = this.tabShow == 1 ? "first" : this.tabShow == 2 ? "first" : "second";
    this.feeOption = await this.getColumnData(this.getColumnName(33), this.typeName === "wood" ? woodOption : feeOption);
    if (this.$store.getters.userInfo.tenant_id === "888390") {
      this.feeOption.column.forEach(item => {
        if (item.prop === "billNo") {
          item.hide = false;
        }
      });
    }
    this.getWorkDicts("currency").then(res => {
      this.currencyList = res.data.data;
    });
    this.getWorkDicts("unit").then(res => {
      this.unitList = res.data.data;
    });
    allCropList({
      corpType: getCustomerCode("KG")
    }).then(res => {
      this.corpList = res.data.data;
    });
    if (localStorage.getItem("roleName") == "贸易") {
      this.findObject(this.feeOption.column, "corpId").hide = true;
      this.findObject(this.feeOption.column, "corpId").showColumn = false;
    }
  },
  components: {
    cropDialog,
    ApplyPayment
  },
  watch: {
    disabled: function () {
      this.$refs.feeCrud.refreshTable();
    },
    orderFeesList(newVla, oldVal) {
      if (newVla !== oldVal) {
        this.allData = newVla;
        this.data_one = newVla.filter(item => item.feesType === 1); //应收
        this.data_two = newVla.filter(item => item.feesType === 2); //应付
        if (this.selectTab === 1) {
          this.feeData = this.data_one;
        } else {
          this.feeData = this.data_two;
        }
      }
    },
    activeName(newVla, oldVal) {
      if (newVla !== oldVal) {
        if (newVla === "first") {
          this.tab1 = true;
          this.tab2 = false;

          this.data_two = this.feeData;

          this.selectTab = 1;
          this.feeData = this.data_one;
        } else {
          this.tab1 = false;
          this.tab2 = true;

          this.data_one = this.feeData;

          this.selectTab = 2;
          this.feeData = this.data_two;
        }
      }
    }
  },
  methods: {
    async imporData(rows, type) {
      await this.tabs2()
      await this.allDel(type)
      rows.forEach(row => {
        this.$refs.feeCrud.rowCellAdd(row)
      })

    },
    async allDel(type) {
      this.feeData.forEach(e => {
        if (type == e.srcType) {
          if (e.id) {
            delItem(e.id, this.feeUrl)
          }
        }
      })
      let newData = this.feeData.filter(e => e.srcType != type)
      this.feeData = newData
    },
    async tabs2() {
      this.activeName = 'second'
    },
    invoiceShow(row) {
      getfeesDetails({ id: row.id }).then(res => {
        this.invoiceData = res.data.data
      })
    },
    invoiceHide() {
      this.invoiceData = []
    },
    //选择费用
    selectValue(value, row) {
      this.$set(row, "feeName", value.cname);
      this.$set(row, "ename", value.ename);
      if (this.optionType == "GN") {
        if (!row.currency) {
          getParities({
            currency: "CNY",
            businesDate: dateFormat(new Date(), "yyyy-MM-dd") + " 00:00:00"
          }).then(res => {
            const data = res.data.data;
            row.exchangeRate = data.receivableParities;
          });
        }
      } else {
        this.currencyChange(row);
      }
    },
    //选择应收应付
    // handleClick(tab){
    //   if(tab.name === "first"){
    //     this.tab1 = true;
    //     this.tab2 = false;
    //
    //     this.data_two = this.feeData
    //
    //     this.selectTab = 1
    //     this.feeData = this.data_one
    //   }else{
    //     this.tab1 = false;
    //     this.tab2 = true;
    //
    //     this.data_one = this.feeData
    //
    //     this.selectTab = 2
    //     this.feeData = this.data_two
    //   }
    // },
    cellStyle() {
      return "padding:0;height:40px;";
    },
    importCorp(row) {
      this.feeData.push({
        itemId: null,
        corpId: row.id,
        corpName: row.name,
        ename: null,
        feeName: null,
        price: null,
        unit: null,
        quantity: null,
        amount: null,
        currency: "CNY",
        exchangeRate: 1,
        remarks: null,
        $cellEdit: true,
        feesType: this.selectTab
      });
    },
    //带出汇率
    currencyChange(row) {
      getParities({
        currency: row.currency,
        businesDate: dateFormat(new Date(), "yyyy-MM-dd") + " 00:00:00"
      }).then(res => {
        const data = res.data.data;
        row.exchangeRate = data.receivableParities;
      });
    },
    rowDel(row, index) {
      this.$confirm("确定删除数据?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //费用判断是否需要调用删除接口
        if (row.id) {
          if (this.delType == 1) {
            delItem(row.id, this.feeUrl).then(res => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.feeData.splice(index, 1);
            });
          } else {
            let data = {
              srcParentId: row.id,
              billType: this.itemType,
              tradeType: this.optionType
            }
            delItem2(data, this.feeUrl).then(res => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.feeData.splice(index, 1);
            });
          }

        } else {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.feeData.splice(index, 1);
        }
      });
    },
    getCorpData(row) {
      this.feeData[row.index].corpName = row.cname;
    },
    countChange(row) {
      if (row.price && row.quantity) {
        row.amount = _.multiply(row.quantity, row.price).toFixed(2);
      }
    },
    rateChange(row) {
      if (row.exchangeRate >= 100) {
        row.exchangeRate = 0;
        this.$message.error("汇率不能超过100%");
      }
    },
    currentChange(val) {
      this.page.currentPage = val;
    },
    sizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
    },
    //刷新
    refreshChange() {
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    //多选
    selectionChange(list) {
      this.selectionList = list;
    },
    rePick(row, index) {
      this.reData = {
        ...row,
        index: index
      };
      this.feeDialog = true;

      this.onLoad(this.page);
    },
    //费用编辑
    rowCell(row, index) {
      if (row.$cellEdit == true) {
        this.$set(row, "$cellEdit", false);
      } else {
        this.$set(row, "$cellEdit", true);
      }
    },
    //新增
    rowAdd() {
      if (this.inCropId) {
        let corpName = ''
        if (this.corpId) {
          corpName = this.corpList.find(item => this.corpId == item.id).cname;
        }
        const params = {
          feesType: this.selectTab,
          corpId: this.corpId ? this.corpId : '',
          corpName: this.corpId ? corpName : ''
        };
        if (this.typeName === "wood") params.corpId = this.corpId
        this.$refs.feeCrud.rowCellAdd(params);
      } else {
        if (!this.corpId) return this.$message.error("请选择往来单位");
        if (this.$store.getters.userInfo.tenant_id === "888390") {
          this.$emit("getBillNo");
        }
        let corpName = this.corpList.find(item => this.corpId == item.id).cname;
        const params = {
          feesType: this.selectTab,
          corpId: this.corpId,
          corpName: corpName
        };
        if (this.optionType == "GN") {
          getParities({
            currency: "CNY",
            businesDate: dateFormat(new Date(), "yyyy-MM-dd") + " 00:00:00"
          }).then(res => {
            const data = res.data.data;
            params.exchangeRate = data.receivableParities;
            this.$refs.feeCrud.rowCellAdd(params);
          });
        } else if (this.optionType == "JK") {
          getParities({
            currency: "USD",
            businesDate: dateFormat(new Date(), "yyyy-MM-dd") + " 00:00:00"
          }).then(res => {
            const data = res.data.data;
            params.exchangeRate = data.receivableParities;
            this.$refs.feeCrud.rowCellAdd(params);
          });
        }
      }
    },
    addRow() {
      this.rowAdd();
    },
    onLoad(page) {
      this.loading = true;
      let data = {
        size: page.pageSize,
        current: page.currentPage,
        parentId: 0,
        feesTypeId: this.treeDeptId
      };
      customerList(data).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        if (this.page.total) {
          this.option.height = window.innerHeight - 350;
        }
      });
    },
    //导入页左费用类型查询
    nodeClick(data) {
      this.treeDeptId = data.id;
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    feeClose() {
      this.selectionList = [];
      this.page = {
        pageSize: 10,
        currentPage: 1,
        total: 0
      };
      this.treeDeptId = null;
      this.loading = false;
      this.data = [];
      this.reData = null;
    },
    importData() {
      if (this.reData) {
        this.selectionList.length;
        if (this.selectionList.length != 1) {
          return this.$message.error("重新选择的时候只能选择一条数据");
        } else {
          this.selectionList.forEach(e => {
            this.feeData.forEach((item, index) => {
              if (index == this.reData.index) {
                item.itemId = e.id;
                item.corpId = this.reData.corpId;
                item.feeName = e.cname;
                item.price = this.reData.price;
                // item.unit = e.unitno;
                item.quantity = this.reData.quantity;
                item.amount = this.reData.amount;
                item.remarks = this.reData.remarks;
                item.$cellEdit = true;
              }
            });
          });
        }
      } else {
        this.selectionList.forEach(e => {
          this.feeData.push({
            itemId: e.id,
            corpId: null,
            feeName: e.cname,
            price: 0,
            // unit: e.unitno,
            quantity: 0,
            amount: 0,
            remarks: null,
            $cellEdit: true
          });
        });
      }
      this.feeDialog = false;
    },
    submitData() {
      let list = [];
      //保存时  将所出的tab页数据赋值到相应 data上
      if (this.selectTab === 1) {
        this.data_one = this.feeData;
      } else {
        this.data_two = this.feeData;
      }
      list.push(...this.data_one, ...this.data_two);
      return list;
    },

    billingDetails(type) {
      //查看是否改动过数据
      this.$emit("beforeFinance", this.submitData(), params => {
        if (params.valid) {
          for (let i = 0; i < this.selectionList.length; i++) {
            if (this.selectionList[i].corpId != this.selectionList[0].corpId) {
              return this.$message.error("批量操作结算单位必须一致");
            }
            if (this.selectionList[i].isCheck == 1) {
              return this.$message.error(
                "选中的数据已" + type + ",请勿重复操作!"
              );
            }
          }

          this.selectionList.map(item => {
            // item.url = this.billUrl
            item.srcOrderno = params.srcOrderno;
            item.srcParentId = params.parentId;
            item.corpsName = item.corpName;
            item.srcFeesId = item.id;
            item.costType = item.itemId;
            item.itemType = this.itemType;
            item.optionType = this.optionType;
            item.srcType = this.srcType; //费用明细申请
            item.tradeType = this.optionType;
          });
          let data = {
            billType: type,
            itemsList: this.selectionList
          };
          if (type === "申请") {
            this.$confirm("您确定申请付费吗？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              this.buttonLoading = true;

              data.checkType = "ffsq";
              data.url = "/financialManagement/paymentRequest/index";
              data.pageStatus = "this.$store.getters.pqStatus";
              data.pageLabel = "付费申请";

              applyLoan(data)
                .then(res => {
                  if (res.data.success) {
                    this.$message.success("操作成功!");
                    this.$emit("afterFinance");
                    //跳转付费申请页面
                    // if(this.$store.getters.pqStatus){
                    //   this.$alert("无法自动跳转,因为付费申请页面已存在!", "温馨提示", {
                    //     confirmButtonText: "确定",
                    //     type: 'warning',
                    //     callback: action => {
                    //     }
                    //   });
                    // }else{
                    //   //关闭一下存在的列表页  跳转
                    //   this.$router.$avueRouter.closeTag('/financialManagement/paymentRequest/index');
                    //   this.$router.push({
                    //     path: "/financialManagement/paymentRequest/index",
                    //     query: {params: res.data.data.id},
                    //   });
                    // }
                  }
                })
                .finally(() => {
                  this.buttonLoading = false;
                });
            });
          } else {
            this.$confirm("您确定生成账单吗？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              this.buttonLoading = true;
              paymentApply(data)
                .then(res => {
                  if (res.data.success) {
                    this.$message.success("操作成功!");
                    this.$emit("afterFinance");
                  }
                })
                .finally(() => {
                  this.buttonLoading = false;
                });
            });
          }
        }
      });
    },
    summaryMethod({ columns, data }) {
      const sums = [];
      if (columns.length > 0) {
        columns.forEach((item, index) => {
          sums[0] = "合计";
          if (item.property == "quantity" || item.property == "amount") {
            let qtySum = 0;
            let amountSum = 0;
            data.forEach(e => {
              qtySum = _.add(qtySum, Number(e.quantity));
              amountSum = _.add(amountSum, Number(e.amount));
            });
            //数量总计
            if (item.property == "quantity") {
              sums[index] = qtySum ? qtySum.toFixed(6) : "0.00";
            }
            //金额总计
            if (item.property == "amount") {
              sums[index] = micrometerFormat(amountSum);
            }
          }
        });
      }
      return sums;
    },
    async saveColumn() {
      const inSave = await this.saveColumnData(this.getColumnName(33), this.feeOption);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.feeCrud.$refs.dialogColumn.columnBox = false;
      }
    },
    async resetColumn() {
      const inSave = await this.delColumnData(this.getColumnName(33), this.typeName === "wood" ? woodOption : feeOption);
      if (inSave) {
        this.$message.success("重置成功");
        this.feeOption = this.typeName === "wood" ? woodOption : feeOption;
        //关闭窗口
        this.$refs.feeCrud.$refs.dialogColumn.columnBox = false;
      }
    },
    tabHandle(data) {
      // if (data.name == this.enableName) return
      // this.enableName = data.name
    }
  }
};
</script>

<style lang="scss" scoped>
.required_fields {
  color: #f56c6c;
  display: inline-block;
  width: 7%;
}
</style>