sd-vue/src/views/shengde/group/finance/reconciliation/printBOM.vue

<template>
  <div
    v-loading="loadingStatus"
    element-loading-text="获取数据中,请稍后"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)"
    ref="print"
  >
    <div style="border: 1px solid black; height: calc(100vh - 182px - 56px); overflow: auto" id="tableId">
      <table class="tableOne" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <th colspan="13" style="border-right: 0; border-top: 0">
            <div style="text-align: center; font-size: 30px; padding: 8px">{{ rowData.subsidiaryName }}-胜德体育对账单</div>
          </th>
        </tr>
        <tr>
          <th colspan="13" style="border-bottom: 1px solid black; border-right: 0">
            <div style="text-align: center; font-size: 18px; padding-bottom: 8px">
              ( 对账时间: {{ rowData.reconciliationStartTime }} - {{ rowData.reconciliationEndTime }} )
            </div>
          </th>
        </tr>
        <tr>
          <th style="width: 180px">E10品号</th>
          <th style="min-width: 200px">品名</th>
          <th style="width: 80px">数量(pcs)</th>
          <th style="width: 80px">BOM单价</th>
          <th style="width: 100px">激光LOGO汇总</th>
          <th style="width: 100px">激光体位线汇总</th>
          <th style="width: 100px">代发费汇总</th>
          <th style="width: 100px">快递包材费汇总</th>
          <th style="width: 100px">包装人工费汇总</th>
          <th style="width: 80px">小计</th>
          <th style="width: 80px">售后数量</th>
          <th style="width: 80px">售后金额</th>
          <th style="border-right: 0; width: 100px">总金额</th>
        </tr>
        <tr v-for="(item, index) in tableList" :key="index">
          <td style="text-align: left; word-break: break-all">{{ item.bomColorCode }}</td>
          <td style="text-align: left; word-break: break-all">{{ item.bomColorName }}</td>
          <td>
            <span v-if="item.bomColorQuantity">{{ Number(item.bomColorQuantity) }}</span>
          </td>
          <td>
            <span v-if="item.price && Number(item.price) !== 0">{{ Number(item.price) }}</span>
            <!-- <span>{{ getPrice(item) }}</span> -->
          </td>
          <td>
            <span v-if="item.processLogoPrice && Number(item.processLogoPrice) !== 0">{{ Number(item.processLogoPrice) }}</span>
          </td>
          <td>
            <span v-if="item.processPrice && Number(item.processPrice) !== 0">{{ Number(item.processPrice) }}</span>
          </td>
          <td>
            <span v-if="item.deliverGoodsPrice && Number(item.deliverGoodsPrice) !== 0">{{ Number(item.deliverGoodsPrice) }}</span>
          </td>
          <td>
            <span v-if="item.expressPrice && Number(item.expressPrice) !== 0">{{ Number(item.expressPrice) }}</span>
          </td>
          <td>
            <span v-if="item.expensePrice && Number(item.expensePrice) !== 0">{{ Number(item.expensePrice) }}</span>
          </td>
          <td>
            <span v-if="item.amount">{{ Number(item.amount) }}</span>
          </td>
          <td>
            <span v-if="item.aftermarketQuantity && Number(item.aftermarketQuantity) !== 0">{{ Number(item.aftermarketQuantity) }}</span>
          </td>
          <td>
            <span v-if="item.aftermarketAmount && Number(item.aftermarketAmount) !== 0">-{{ Number(item.aftermarketAmount) }}</span>
          </td>
          <td style="border-right: 0">
            <span>{{ parseFloat(item.amount - item.aftermarketAmount).toFixed(2) }}</span>
          </td>
        </tr>
        <tr>
          <td>总计:</td>
          <td colspan="3"></td>
          <td>
            <span>{{ getNumber('processLogoPrice') }}</span>
          </td>
          <td>
            <span>{{ getNumber('processPrice') }}</span>
          </td>
          <td>
            <span>{{ getNumber('deliverGoodsPrice') }}</span>
          </td>
          <td>
            <span>{{ getNumber('expressPrice') }}</span>
          </td>
          <td>
            <span>{{ getNumber('expensePrice') }}</span>
          </td>
          <td>
            <span>{{ getNumber('amount') }}</span>
          </td>
          <td>
            <span>{{ getNumber('aftermarketQuantity') }}</span>
          </td>
          <td>
            <span>-{{ getNumber('aftermarketAmount') }}</span>
          </td>
          <td style="border-right: 0">
            <span>{{ parseFloat(getNumber('amount') - getNumber('aftermarketAmount')).toFixed(2) }}</span>
          </td>
        </tr>
        <tr>
          <td>备注:</td>
          <td colspan="12" style="border-right: 0"></td>
        </tr>
        <tr>
          <td>交货地点:</td>
          <td colspan="12" style="border-right: 0"></td>
        </tr>
        <tr>
          <td style="padding: 8px 4px; font-size: 16px; font-weight: 700; text-align: left; border-right: 0">申请人:</td>
          <td style="padding: 8px 4px; font-size: 16px; font-weight: 700; text-align: left; border-right: 0">胜德体育总经理:</td>
          <td colspan="11" style="padding: 8px 4px; font-size: 16px; font-weight: 700; text-align: left; border-right: 0">申请日期:</td>
        </tr>
      </table>
    </div>
    <div style="width: 100%; text-align: center; margin-top: 16px" class="no-print">
      <el-button type="primary" size="small" @click="clickExcel">导出Excel</el-button>
      <el-button type="primary" size="small" @click="clickPrint">打印</el-button>
      <el-button size="small" @click="clickCancel">关 闭</el-button>
    </div>
  </div>
</template>

<script>
import { getBomReconciliation, editAmount } from '@/api/shengde/group/finance/reconciliation'
import $ from 'jquery'

export default {
  name: 'reconciliationPrintBOM',
  props: {
    rowData: Object,
  },
  data() {
    return {
      loadingStatus: false,
      loadingText: '',
      tableList: [],
    }
  },
  created() {
    this.getDetails()
  },
  mounted() {},
  methods: {
    getDetails() {
      this.loadingStatus = true
      getBomReconciliation({ id: this.rowData.id }).then(
        (res) => {
          this.tableList = res.data.data
          this.loadingStatus = false
          let data = {
            id: this.rowData.id,
            amount: Number(this.getNumber('amount')),
          }
          editAmount(data).then()
        },
        (err) => {
          this.loadingStatus = false
          console.log('getBomReconciliation: ' + err)
        }
      )
    },
    clickPrint() {
      this.$print(this.$refs.print)
    },
    clickExcel() {
      $('#tableId').table2excel({
        exclude: '.noExl',
        sheetName: 'BOM对账单',
        filename: 'BOM对账单',
        exclude_img: false,
        exclude_links: false,
        exclude_inputs: true,
      })
    },
    clickCancel() {
      this.$emit('clickCancel', false)
    },
    getNumber(label) {
      let allNum = 0
      if (this.tableList && this.tableList.length > 0) {
        this.tableList.map((item) => {
          if (item[label]) {
            allNum = parseFloat(Number(allNum) + Number(item[label])).toFixed(2)
          }
        })
      }
      return Number(allNum)
    },
    getPrice(item) {
      let num = 0
      if (item.amount) {
        num = Number(item.amount)
      }
      if (item.processLogoPrice) {
        num -= Number(item.processLogoPrice)
      }
      if (item.processPrice) {
        num -= Number(item.processPrice)
      }
      if (item.deliverGoodsPrice) {
        num -= Number(item.deliverGoodsPrice)
      }
      if (item.expressPrice) {
        num -= Number(item.expressPrice)
      }
      if (item.expensePrice) {
        num -= Number(item.expensePrice)
      }
      if (item.bomColorQuantity) {
        num = parseFloat(Number(num) / Number(item.bomColorQuantity)).toFixed(2)
      }
      return num
    },
  },
}
</script>

<style lang="scss" scoped>
.tableOne {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  line-height: 20px;
  overflow: auto;
  width: 100%;
}
.tableOne th {
  font-weight: 700;
  border-right: 1px solid black;
}
.tableOne td {
  border-right: 1px solid black;
  border-top: 1px solid black;
  text-align: center;
  padding: 4px;
}
</style>