sd-vue/src/views/shengde/group/finance/summary/batchPrint.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 style="width: 110px">对账月度</th>
          <th style="width: 130px">客户</th>
          <th style="width: 130px">订单时间</th>
          <th style="width: 134px">订单号</th>
          <th style="width: 130px">万里牛单号</th>
          <th style="width: 100px">SKU品号</th>
          <th style="min-width: 200px">SKU品名</th>
          <th style="width: 80px">SKU数量</th>
          <th style="width: 100px">BOM品号</th>
          <th style="min-width: 300px">BOM品名</th>
          <th style="width: 65px">数量</th>
          <th style="width: 65px">单价</th>
          <th style="width: 65px">激光LOGO</th>
          <th style="width: 65px">激光体位线</th>
          <th style="width: 65px">代发费</th>
          <th style="width: 70px">快递包材费</th>
          <th style="width: 70px">包装人工费</th>
          <th style="width: 70px">管理费</th>
          <th style="width: 80px">SKU单价</th>
          <th style="width: 80px">小计</th>
          <th style="width: 80px">售后数量</th>
          <th style="width: 80px">售后金额</th>
          <th style="border-right: 0; width: 90px">合计</th>
        </tr>
        <tbody v-for="(item, index) in tableList" :key="index">
          <tr v-for="(itemBom, indexBom) in item.bomDetails" :key="indexBom">
            <td style="text-align: left; word-break: break-all" v-if="indexBom === 0" :rowspan="item.bomDetails.length">{{ item.reconciliationTime.substr(0, 7) }}</td>
            <td style="text-align: left; word-break: break-all" v-if="indexBom === 0" :rowspan="item.bomDetails.length">{{ item.subsidiaryName }}</td>
            <td style="text-align: left; word-break: break-all" v-if="indexBom === 0" :rowspan="item.bomDetails.length">{{ item.contractTime }}</td>
            <td style="text-align: left; word-break: break-all" v-if="indexBom === 0" :rowspan="item.bomDetails.length">{{ item.contractCode }}</td>
            <td style="text-align: left; word-break: break-all" v-if="indexBom === 0" :rowspan="item.bomDetails.length">{{ item.tradeNo }}</td>
            <td style="text-align: left; word-break: break-all" v-if="indexBom === 0" :rowspan="item.bomDetails.length">{{ item.productColorCode }}</td>
            <td style="text-align: left; word-break: break-all" v-if="indexBom === 0" :rowspan="item.bomDetails.length">{{ item.productColorName }}</td>
            <td v-if="indexBom === 0" :rowspan="item.bomDetails.length">
              <span v-if="item.quantity">{{ Number(item.quantity) }}</span>
              <span v-else>0</span>
            </td>
            <td style="text-align: left; word-break: break-all">{{ itemBom.bomColorCode }}</td>
            <td style="text-align: left; word-break: break-all">{{ itemBom.bomColorName }}</td>
            <td>
              <span v-if="itemBom.bomColorQuantity">{{ Number(itemBom.bomColorQuantity) }}</span>
            </td>
            <td>
              <span v-if="itemBom.dataResource === 1">{{ item.productPrice }}</span>
              <span v-else>{{ itemBom.price }}</span>
            </td>
            <td>
              <span v-if="item.processingLayout === '20' && itemBom.dataResource === 1 && item.processPrice && Number(item.processPrice) !== 0">{{
                item.processPrice
              }}</span>
            </td>
            <td>
              <span v-if="item.processingLayout === '10' && itemBom.dataResource === 1 && item.processPrice && Number(item.processPrice) !== 0">{{
                item.processPrice
              }}</span>
            </td>
            <td>
              <span v-if="itemBom.dataResource === 1 && item.deliverGoodsPrice && Number(item.deliverGoodsPrice) !== 0">{{ item.deliverGoodsPrice }}</span>
            </td>
            <td>
              <span v-if="itemBom.dataResource === 1 && item.expressPrice && Number(item.expressPrice) !== 0">{{ item.expressPrice }}</span>
            </td>
            <td>
              <span v-if="itemBom.dataResource === 1 && item.expensePrice && Number(item.expensePrice) !== 0">{{ item.expensePrice }}</span>
            </td>
            <td>
              <span v-if="itemBom.dataResource === 1 && item.managementFeesPrice && Number(item.managementFeesPrice) !== 0">{{ item.managementFeesPrice }}</span>
            </td>
            <td v-if="indexBom === 0" :rowspan="item.bomDetails.length">
              <span>{{ item.skuPrice }}</span>
            </td>
            <td v-if="indexBom === 0" :rowspan="item.bomDetails.length">
              <span>{{ subtotal(item) }}</span>
            </td>
            <td v-if="indexBom === 0" :rowspan="item.bomDetails.length">
              <span v-if="item.aftermarketQuantity && Number(item.aftermarketQuantity) !== 0">{{ item.aftermarketQuantity }}</span>
            </td>
            <td v-if="indexBom === 0" :rowspan="item.bomDetails.length">
              <span v-if="item.aftermarketAmount && Number(item.aftermarketAmount) !== 0">-{{ item.aftermarketAmount }}</span>
            </td>
            <td style="border-right: 0" v-if="indexBom === 0" :rowspan="item.bomDetails.length">
              <span>{{ getAllCost(item) }}</span>
            </td>
          </tr>
        </tbody>
        <tr>
          <td>总计:</td>
          <td colspan="21"></td>
          <td style="border-right: 0">
            <span>{{ getAggregate() }}</span>
          </td>
        </tr>
        <tr>
          <td>备注:</td>
          <td colspan="22" style="border-right: 0"></td>
        </tr>
        <tr>
          <td>交货地点:</td>
          <td colspan="22" style="border-right: 0"></td>
        </tr>
        <tr>
          <td colspan="3" style="padding: 8px 4px; font-size: 16px; font-weight: 700; text-align: left; border-right: 0">申请人:</td>
          <td colspan="5" style="padding: 8px 4px; font-size: 16px; font-weight: 700; text-align: left; border-right: 0">胜德体育总经理:</td>
          <td colspan="13" 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 { summaryBachPrintDetail } from '@/api/shengde/group/finance/summary'
import $ from 'jquery'

export default {
  name: 'summaryPrint',
  props: {
    excelList: Array,
  },
  data() {
    return {
      loadingStatus: false,
      loadingText: '',
      tableList: [],
    }
  },
  created() {
    if (this.excelList && this.excelList.length > 0) {
      this.getDetails()
    }
  },
  mounted() {},
  methods: {
    getDetails() {
      this.loadingStatus = true
      let list = this.excelList.map((item) => {
        return item.id
      })
      summaryBachPrintDetail({ id: list.join(',') }).then(
        (res) => {
          this.tableList = res.data.data
          this.loadingStatus = false
        },
        (err) => {
          this.loadingStatus = false
          console.log('summaryBachPrintDetail: ' + err)
        }
      )
    },
    clickPrint() {
      this.$print(this.$refs.print)
    },
    clickExcel() {
      $('#tableId').table2excel({
        exclude: '.noExl',
        sheetName: '销售对账汇总',
        filename: '销售对账汇总',
        exclude_img: false,
        exclude_links: false,
        exclude_inputs: true,
      })
    },
    clickCancel() {
      this.$emit('clickCancel', false)
    },
    getCost(item, itemBom, num) {
      let money = 0
      if (itemBom.dataResource === 1) {
        if (item.productPrice) {
          money = parseFloat(Number(money) + Number(item.productPrice)).toFixed(2)
        }
        if (item.processPrice && ['10', '20'].includes(item.processingLayout)) {
          money = parseFloat(Number(money) + Number(item.processPrice)).toFixed(2)
        }
        if (item.deliverGoodsPrice) {
          money = parseFloat(Number(money) + Number(item.deliverGoodsPrice)).toFixed(2)
        }
        if (item.expressPrice) {
          money = parseFloat(Number(money) + Number(item.expressPrice)).toFixed(2)
        }
        if (item.expensePrice) {
          money = parseFloat(Number(money) + Number(item.expensePrice)).toFixed(2)
        }
        if (item.managementFeesPrice) {
          money = parseFloat(Number(money) + Number(item.managementFeesPrice)).toFixed(2)
        }
      } else {
        if (itemBom.price) {
          money = parseFloat(Number(money) + Number(itemBom.price)).toFixed(2)
        }
      }
      if (num) {
        money = parseFloat(Number(money) * Number(num)).toFixed(2)
      }
      return money
    },
    getAllCost(row) {
      let money = 0
      money = parseFloat(Number(row.skuPrice) * Number(row.quantity) - Number(row.aftermarketAmount)).toFixed(2)
      return money
    },
    getAggregate() {
      let allMoney = 0
      if (this.tableList && this.tableList.length > 0) {
        this.tableList.map((item) => {
          allMoney = parseFloat(Number(allMoney) + Number(item.skuPrice) * Number(item.quantity) - Number(item.aftermarketAmount)).toFixed(2)
        })
      }
      return allMoney
    },
    subtotal(item) {
      let num = 0
      if (item.quantity && item.skuPrice) {
        num = parseFloat(Number(item.quantity) * Number(item.skuPrice)).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: 130%;
}
.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>