Warehouse_management_lc_ui/src/views/Warehousing/components/payMoney.vue

<template>
  <div>
    <div
      class="dialogTableTitle flex a-center jlr"
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0;
      "
    >
      <div>
        <el-button
          type="primary"
          :disabled="browseStatus"
          @click.prevent="addpayment()"
          size="small"
          >新行
        </el-button>
        <el-button
          type="primary"
          size="small"
          @click="saveForm"
          :disabled="browseStatus"
          >保 存</el-button
        >
        <el-button
          type="danger"
          size="small"
          @click.prevent="handleSelect"
          >作业费协议</el-button
        >
        <el-button
          type="info"
          size="small"
          @click.prevent="printCr"
        >请款单
        </el-button
        >
        <el-button
          type="primary"
          size="small"
          v-if="browseStatus"
          @click="feeChange"
        >
          费用变更
        </el-button>
      </div>
    </div>
    <el-table
      :data="warehouseCrList"
      ref="table"
      tooltip-effect="dark"
      border
      stripe
      show-summary
      :summary-method="warehouseDrSummaries"
      @selection-change="SelectCr"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" type="index" width="80"> </el-table-column>
      <el-table-column
        prop="fCorpid"
        header-align="center"
        align="center"
        width="300px"
        label="客户名称"
      >
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.fCorpid"
            filterable
            clearable
            placeholder="客户名称"
            :disabled="browseStatus || scope.row.fBillstatus == 6"
          >
            <el-option
              v-for="(item, index) in fMblnoOptions"
              :key="index.fId"
              :label="item.fName"
              :value="item.fId"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        prop="fFeeid"
        header-align="center"
        align="center"
        width="240px"
        label="费用名称"
      >
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.fFeeid"
            clearable
            filterable
            placeholder="费用名称"
            :disabled="browseStatus || scope.row.fBillstatus == 6"
          >
            <el-option
              v-for="(item, index) in fCNameOptions"
              :key="index.fId"
              :label="item.fName"
              :value="item.fId"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        prop="fBusinessType"
        header-align="center"
        align="center"
        width="180px"
        label="作业类型"
      >
        <template slot-scope="scope">
          <el-select
            style="width: 80%"
            v-model="scope.row.fBusinessType"
            filterable
            disabled
          >
            <el-option
              v-for="(item, index) in businessTypeOption"
              :key="index.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column
        prop="fFeeUnitid"
        header-align="center"
        align="center"
        width="180px"
        label="计价单位"
      >
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.fFeeUnitid"
            placeholder="请选择计价单位"
            clearable
            :disabled="browseStatus || scope.row.fBillstatus == 6"
            @change="changeFeeUnit(scope.row)"
          >
            <el-option
              v-for="(item, index) in fFeetUnitOptions"
              :key="index.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        prop="fQty"
        header-align="center"
        align="center"
        width="150px"
        label="数量"
      >
        <template slot-scope="scope">
          <el-input
            oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, "$1$2.$3")'
            v-model="scope.row.fQty"
            :disabled="browseStatus || scope.row.fBillstatus == 6"
            @change="changeContractAmt(scope.row)"
            placeholder="数量"
            show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="fUnitprice"
        header-align="center"
        align="center"
        width="150px"
        label="单价"
      >
        <template slot-scope="scope">
          <el-input
            oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
            v-model="scope.row.fUnitprice"
            :disabled="browseStatus || scope.row.fSrcTypeId !== 0 || scope.row.fBillstatus == 6"
            @change="changeContractAmt(scope.row)"
            placeholder="单价"
            show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="fAmount"
        header-align="center"
        align="center"
        width="150px"
        label="金额"
      >
        <template slot-scope="scope">
          <el-input
            disabled
            oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
            v-model="scope.row.fAmount"
            placeholder="金额"
            show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="fStltypeid"
        header-align="center"
        align="center"
        width="130px"
        label="结算方式"
      >
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.fStltypeid"
            placeholder="请选择结算表票结、月结"
            :disabled="browseStatus || scope.row.fBillstatus == 6"
          >
            <el-option
              v-for="(item, index) in fStltypeOptions"
              :key="index.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column
        prop="fCurrency"
        header-align="center"
        align="center"
        width="150px"
        label="币别"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fCurrency"
            :disabled="browseStatus || scope.row.fBillstatus == 6"
            placeholder="币别"
            show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="fExrate"
        header-align="center"
        align="center"
        width="150px"
        label="汇率"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fExrate"
            :disabled="browseStatus || scope.row.fBillstatus == 6"
            placeholder="汇率"
            show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="fTaxrate"
        header-align="center"
        align="center"
        width="150px"
        label="税率"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fTaxrate"
            :disabled="browseStatus || scope.row.fBillstatus == 6"
            placeholder="税率"
            show-word-limit
          />
        </template>
      </el-table-column>

      <el-table-column
        prop="fMblno"
        header-align="center"
        align="center"
        width="130px"
        label="提单号"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fMblno"
            :disabled="browseStatus || scope.row.fBillstatus == 6"
            placeholder="提单号"
            show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="fProductName"
        header-align="center"
        align="center"
        width="140px"
        label="品名"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fProductName"
            :disabled="browseStatus || scope.row.fBillstatus == 6"
            placeholder="品名"
            show-word-limit
          />
        </template>
      </el-table-column>

      <el-table-column
        prop="fMarks"
        header-align="center"
        align="center"
        width="130px"
        label="品牌"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.fMarks"
            :disabled="browseStatus || scope.row.fBillstatus == 6"
            placeholder="品牌"
            show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="fSrcTypeId"
        header-align="center"
        align="center"
        width="130px"
        label="来源"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.fSrcTypeId === 0">录入</span>
          <span v-if="scope.row.fSrcTypeId == 1">协议</span>
          <span v-if="scope.row.fSrcTypeId == 10">变更</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        header-align="center"
        align="center"
        width="150px"
        label="备注"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.remark"
            :disabled="browseStatus || scope.row.fBillstatus == 6"
            placeholder="备注"
            show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        width="200px"
        label="操作"
        fixed="right"
      >
        <template slot-scope="scope">
          <!-- <el-button size="small">审核费用</el-button> -->
          <el-button
            @click.native.prevent="deleteRow(scope.$index, warehouseCrList)"
            size="small"
            :disabled="browseStatus || scope.row.fBillstatus == 6"
            >移除</el-button
          >
          <el-button
            size="small"
            @click="listCheck(scope.row)"
            v-if="scope.row.fBillstatus < 6"
            :disabled="browseStatus"
          >请核</el-button>
          <el-button
            size="small"
            @click="revokeListCheck(scope.row)"
            v-if="scope.row.fBillstatus == 6"
            :disabled="browseStatus"
          >撤销请核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 选择作业费协议数据 -->
    <el-dialog
      v-dialogDrag
      title="作业费协议"
      :close-on-click-modal="false"
      :modal="false"
      style="box-shadow: 0 1px 3px rgba(0, 0, 0, 0) !important"
      :visible.sync="warehousingagreements"
      width="70%"
    >
      <template slot="作业费协议">
        <div class="avue-crud__dialog__header">
          <span class="el-dialog__title">
            <span
              style="
                display: inline-block;
                width: 3px;
                height: 20px;
                margin-right: 5px;
                float: left;
                margin-top: 2px;
              "
            ></span>
          </span>
        </div>
      </template>
      <el-menu
        :default-active="activeIndex"
        v-if="Navigation === true"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">车队作业费</el-menu-item>
        <el-menu-item index="2">劳务作业费</el-menu-item>
      </el-menu>

      <el-table
        :data="tasklegList"
        ref="table"
        tooltip-effect="dark"
        width="100%"
        border
        stripe
        @selection-change="whgenlegSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="行号" type="index" width="80">
        </el-table-column>
        <el-table-column
          prop="fCorpname"
          header-align="center"
          align="center"
          label="客户名称"
        />
        <el-table-column
          prop="fName"
          header-align="center"
          align="center"
          label="费用名称"
        />
        <el-table-column
          prop="fFeeUnitid"
          header-align="center"
          align="center"
          width="180px"
          label="计价单位"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.fFeeUnitid"
              placeholder="请选择计价单位"
              @change="changeFeeUnit(scope.row)"
              disabled
              clearable
            >
              <el-option
                v-for="(dict, index) in fFeetUnitOptions"
                :key="index.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="fPrice"
          header-align="center"
          align="center"
          label="单价"
          width="100px"
        />
        <el-table-column
          prop="remark"
          header-align="center"
          align="center"
          label="备注"
        />
      </el-table>

      <pagination
        v-show="whgenlegTotal > 0"
        :total="whgenlegTotal"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="getWhgenlegList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="zhgenlegData" :disabled="browseStatus">导 入</el-button>
        <el-button
          @click="
            warehousingagreements = false;
            Navigation = false;
          "
          >取 消</el-button
        >
      </div>
    </el-dialog>
    <!--    付款信息作业单-->
    <el-dialog
      :visible.sync="print_Cr"
      width="70%"
      :close-on-click-modal="false"
      :modal="false"
    >
      <div id="print_Cr" class="print-div">
        <div
          class="print-title"
          style="
            display: flex;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 5px;
          "
        >
          {{ company }}请款单
        </div>
        <div
          style="
            display: flex;
            justify-content: center;
            font-size: 18px;
            margin-bottom: 5px;
          "
        ></div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
          "
          class="print_form"
        >
          <div style="display: flex; flex-direction: column;">
            <!--            <div>请款单号：</div>-->
            <div>源业务编码：{{ form.fBillno }}</div>
            <div>委托单位：{{ form.fCorpid | fMblnoFormat(fMblnoOptions) }}</div>
          </div>
          <div style="display: flex; flex-direction: column;margin-right: 15px;width: 150px">
            <div style="">请款日期：</div>
          </div>
        </div>
        <div class="print_table" style="display: flex">
          <table
            border="0"
            cellspacing="0"
            cellpadding="0"
            style="width: 100%; line-height: 30px"
          >
            <tr>
              <td>结算单位</td>
              <td>提单号</td>
              <!--              <td>源业务编码</td>-->
              <td>业务日期</td>
              <td>数量</td>
              <td>单价</td>
              <td>费用</td>
              <td>人民币</td>
              <td>美元</td>
            </tr>
            <tr v-for="(item, index) in PrintingCrlist" :key="index">
              <td>{{ item.fCorpid | fMblnoFormat(fMblnoOptions) }}</td>
              <td>{{ form.fMblno }}</td>
              <!--              <td>{{ form.fBillno }}</td>-->
              <td>{{ form.fBsdate | fBsdateFormat }}</td>
              <td>{{ item.fQty }}</td>
              <td>{{ item.fUnitprice }}</td>
              <td>{{ item.fFeeid | fFeetFormat(fCNameOptions) }}</td>
              <td>{{ item.fAmount }}</td>
              <td></td>
            </tr>
            <tr>
              <td>合计</td>
              <td></td>
              <td></td>
              <td>{{ allCrfQty }}</td>
              <td></td>
              <td></td>
              <td>{{ allCrfAmount }}</td>
              <td></td>
            </tr>
          </table>
        </div>
        <div
          style="display: flex; justify-content: space-between; font-size: 12px"
        >
          <div>领款人：</div>
          <div>业务经理：</div>
          <div>财务：</div>
          <div style="width: 150px">经理：</div>
        </div>
      </div>
      <span lot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="mini"
          @click="
            print_Cr = false;
            addprint('crzyd');
          "
        >打印
        </el-button>
        <el-button @click="print_Cr = false" size="mini">取消 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { operationAgreement } from "@/api/agreement/agreement";
import {feesCheck,revokefeeCheck} from "@/api/warehouseBusiness/warehouseInStock";
import Cookies from "js-cookie";
import print from "print-js";

export default {
  name: 'payMoney',
  props: {
    browseStatus: {
      type: Boolean,
      default: false,
    },
    warehouseCrList: {
      type: Array,
      default: [],
    },
    businessTypeOption: {
      type: Array,
      default: [],
    },
    fMblnoOptions: {
      type: Array,
      default: [],
    },
    fCNameOptions: {
      type: Array,
      default: [],
    },
    fFeetUnitOptions: {
      type: Array,
      default: [],
    },
    fStltypeOptions: {
      type: Array,
      default: [],
    },
    fGrossweight: {
      type: Number,
      default: null,
    },
    fQty: {
      type: Number,
      default: null,
    },
    fNetweight: {
      type: Number,
      default: null,
    },
    fCntqty: {
      type: Number,
      default: null,
    },
    form: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      warehousingagreements: false,
      dialogWhgenlegList: [],
      whgenlegTotal: 0,
      Navigation: false,
      tasklegList: [],
      // dialogWhgenlegList: [],
      pageNum: 1,
      pageSize: 10,
      // 收款信息明细
      PrintingCrlist: [],
      allCrfAmount: 0,
      allCrfQty: 0,
      // Cr打印弹窗是否开启
      print_Cr: false,
      company: '',
    };
  },
  created() {
    this.company = Cookies.get("companyName")
  },
  filters: {
    fMblnoFormat(row, fMblnoOptions) {
      let name;
      fMblnoOptions.map((e) => {
        if (row == e.fId) {
          name = e.fName;
        }
      });
      return name;
    },
    fBsdateFormat(row) {
      if (row) {
        const dateMat = new Date(row);
        const year = dateMat.getFullYear();
        const month = dateMat.getMonth() + 1;
        const day = dateMat.getDate();
        const timeFormat = year + "-" + month + "-" + day;
        return timeFormat;
      }
    },
    fFeetFormat(row, fCNameOptions) {
      let name;
      fCNameOptions.map((e) => {
        if (row == e.fId) {
          name = e.fName;
        }
      });
      return name;
    },
  },
  methods: {
    feeChange() {
      this.$emit("feeChangeC", 'C');
    },
    saveForm() {
      this.$emit("chiSave");
    },
    addpayment() {
      this.$emit("chiAdd");
    },
    // 付款合计
    warehouseDrSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (
          column.property === "fAmount"
          // column.property === "fUnitprice" ||
          // column.property === "fAmount" ||
          // column.property === "fQty"
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2);
        }
      });
      return sums;
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    // 变更计价单位
    changeFeeUnit(row) {
      if (!row.fFeeUnitid) {
        return false;
      }
      if (row.fFeeUnitid === "2") {
        this.$set(row, "fQty", (this.fGrossweight / 1000).toFixed(2));
      } else if (row.fFeeUnitid === "1") {
        this.$set(row, "fQty", this.fQty.toFixed(2));
      } else if (row.fFeeUnitid === "3") {
        this.$set(row, "fQty", (this.fNetweight / 1000).toFixed(2));
      } else if (row.fFeeUnitid === "7") {
        this.$set(row, "fQty", this.fCntqty);
      } else {
        this.$set(row, "fQty", 0);
      }
      if (row.fUnitprice) {
        this.$set(
          row,
          "fAmount",
          parseFloat(Number(row.fUnitprice) * Number(row.fQty)).toFixed(2)
        );
      }
    },
    // 数量计算
    changeContractAmt(row) {
      let fQty = 0;
      let fUnitprice = 0;
      if (row.fUnitprice) {
        fUnitprice = row.fUnitprice;
      }
      if (row.fQty) {
        fQty = row.fQty;
      }
      this.$set(row, "fAmount", Number(fUnitprice) * Number(fQty)).toFixed(2);
    },
    handleSelect() {
      if (!this.form.fCorpid) {
        this.$message({
          message: "请维护客户",
          type: "warning",
        });
      } else if (this.form.fProductName == undefined) {
        this.$message({
          message: "请维护入库明细品名",
          type: "warning",
        });
      } else {
        this.pageNum = 1;
        this.pageSize = 10;
        this.dialogWhgenlegList = [];
        this.whgenlegTotal = 0;
        this.warehousingagreements = true;
        this.getWhgenlegList();
      }
    },
    // 查询作业费信息
    getWhgenlegList() {
      let data = {};
      this.Navigation = false;
      data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        fTaskType: 1,
        fFleet: this.form.fFleet,
      };
      operationAgreement(data).then((response) => {
        response.rows.map((e) => {
          if (e.fFeeUnitid) {
            e.fFeeUnitid = e.fFeeUnitid.toString();
          }
        });
        this.tasklegList = response.rows;
        this.whgenlegTotal = response.total;
      });
    },
    // 库存总账多选框
    whgenlegSelectionChange(selection) {
      this.dialogWhgenlegList = selection;
    },
    //导入收付款信息明细
    zhgenlegData() {
      if (this.dialogWhgenlegList.length === 0) {
        this.$message({
          message: "请选择需要导入的数据",
          type: "warning",
        });
      } else {
        this.dialogWhgenlegList.map((e) => {
          let qty = 1;
          if (e.fFeeUnitid == 1) {
            qty = this.fQty;
          } else if (e.fFeeUnitid == 2) {
            qty = (this.fGrossweight / 1000).toFixed(2);
          } else if (e.fFeeUnitid == 3) {
            qty = (this.fNetweight / 1000).toFixed(2);
          } else if (e.fFeeUnitid == 7) {
            qty = this.fCntqty;
          }
          let fAmount = 0;
          fAmount = e.fPrice * qty;
          this.warehouseCrList.push({
            fQty: qty,
            fCorpid: e.fCorpid,
            fFeeid: e.feeFId,
            fFeeUnitid: e.fFeeUnitid,
            fUnitprice: e.fPrice,
            fCurrency: "RMB",
            fExrate: 1,
            fAmount: fAmount,
            fTaxrate: this.fTaxrate,
            fMblno: this.form.fMblno,
            fProductName: this.form.fProductName,
            fMarks: this.form.fMarks,
            fBusinessType: this.form.fBusinessType,
            fSrcTypeId: 1,
            fStltypeid: '1',
          });
        });
        this.warehousingagreements = false;
      }
    },
    // 费用明细请核
    listCheck(row) {
      feesCheck(row.fId).then(res => {
        this.$message.success('请核成功')
        res.data.fFeeUnitid = res.data.fFeeunitid.toString();
        if (res.data.fDc == 'D') {
          let index = this.warehouseDrList.findIndex(item => item.fId == res.data.fId)
          this.warehouseDrList.splice(index, 1, res.data)
        } else {
          let index = this.warehouseCrList.findIndex(item => item.fId == res.data.fId)
          this.warehouseCrList.splice(index, 1, res.data)
        }
      })
    },
    // 费用明细撤销请核
    revokeListCheck(row) {
      revokefeeCheck(row.fId).then(res => {
        this.$message.success('操作成功')
        res.data.fFeeUnitid = res.data.fFeeunitid.toString();
        if (res.data.fDc == 'D') {
          let index = this.warehouseDrList.findIndex(item => item.fId == res.data.fId)
          this.warehouseDrList.splice(index, 1, res.data)
        } else {
          let index = this.warehouseCrList.findIndex(item => item.fId == res.data.fId)
          this.warehouseCrList.splice(index, 1, res.data)
        }
      })
    },
    // 付款明细多选
    SelectCr(selection) {
      this.PrintingCrlist = selection;
    },
    // 付款信息打印准备
    printCr() {
      if (this.PrintingCrlist.length > 0) {
        for (let item in this.PrintingCrlist) {
          if (!this.PrintingCrlist[item].fId) {
            return this.$message.error("请先保存!");
          }
        }
        this.allCrfAmount = 0;
        this.allCrfQty = 0;
        this.PrintingCrlist.forEach(item => {
          this.allCrfAmount = this.allCrfAmount + item.fAmount
          this.allCrfQty += item.fQty
        })
        this.print_Cr = true;
      } else {
        this.$message.error("请选择需要打印的明细!");
      }
    },
    // 打印
    addprint(status) {
      const style =
        "@page {  } " +
        "@media print { .print-div{ padding:8px;background-color:#cccccc;} .print-title{display:flex;justify-content: center;font-size:24px} .print_form{font-size:12px} .print_table table {border-right: 1px solid #000;border-bottom: 1px solid #000;font-size:12px} .print_table table td {border-left: 1px solid #000;border-top: 1px solid #000;padding:2px;vertical-align:middle;text-align: center;}";
      switch (status) {
        case "crzyd":
          print({
            printable: "print_Cr",
            type: "html",
            style: style, // 亦可使用引入的外部css;
            scanStyles: false,
          });
          break;
      }
    },
  },
  watch: {
    browseStatus(val) {
      this.browseStatus = val;
    },
    warehouseCrList(val) {
      this.warehouseCrList = val;
    },
  },
};
</script>

<style scoped lang="scss">
.print_table {
  table {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 12px;
    margin-bottom: 5px;
  }

  table td {
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    vertical-align: middle;
    padding: 2px;
    text-align: center;
  }
}

.print_form {
  font-size: 12px;
}
</style>