sd-vue/src/views/shengde/group/finance/reconciliation/print.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">
      <!-- <div style="text-align: center; font-size: 30px; padding: 8px">{{ rowData.subsidiaryName }}-胜德体育体育对账单</div>
      <div style="text-align: center; font-size: 18px; padding-bottom: 8px">( 对账时间: {{ rowData.createTime }} )</div> -->
      <table class="tableOne" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <th colspan="20" 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="20" 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: 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: 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.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 v-if="indexBom === 0" :rowspan="item.bomDetails.length">
              <span>{{ item.skuPrice }}</span>
            </td>
            <td v-if="indexBom === 0" :rowspan="item.bomDetails.length">
              <span>{{ item.subtotalAmount }}</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>{{ item.amount }}</span>
            </td>
          </tr>
        </tbody>
        <tr>
          <td>总计:</td>
          <td colspan="18"></td>
          <td style="border-right: 0">
            <span>{{ getAggregate() }}</span>
          </td>
        </tr>
        <tr>
          <td>备注:</td>
          <td colspan="19" style="border-right: 0"></td>
        </tr>
        <tr>
          <td>交货地点:</td>
          <td colspan="19" 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="12" 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 { printDetail, editAmount } from '@/api/shengde/group/finance/reconciliation'
import $ from 'jquery'

export default {
  name: 'reconciliationPrint',
  props: {
    rowData: Object,
  },
  data() {
    return {
      loadingStatus: false,
      loadingText: '',
      tableList: [],
    }
  },
  created() {
    this.getDetails()
  },
  mounted() {},
  methods: {
    getDetails() {
      this.loadingStatus = true
      printDetail({ id: this.rowData.id }).then(
        (res) => {
          this.tableList = res.data.data
          this.loadingStatus = false
          let data = {
            id: this.rowData.id,
            amount: Number(this.getAggregate()),
          }
          editAmount(data).then()
        },
        (err) => {
          this.loadingStatus = false
          console.log('printDetail: ' + 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)
        }
      } 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)
      // if (row.bomDetails && row.bomDetails.length > 0) {
      //   row.bomDetails.map((item) => {
      //     money = parseFloat(Number(money) + Number(this.getCost(row, item, item.bomColorQuantity))).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)
          if (item.bomDetails && item.bomDetails.length > 0) {
            item.bomDetails.map((itemBom) => {
              if (itemBom.amount) {
                allMoney = parseFloat(Number(allMoney) + Number(itemBom.amount)).toFixed(2)
              }
              //     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)
              //       }
              //     } else {
              //       if (itemBom.price) {
              //         money = parseFloat(Number(money) + Number(itemBom.price)).toFixed(2)
              //       }
              //     }
              //     if (itemBom.bomColorQuantity) {
              //       allMoney = parseFloat(Number(allMoney) + Number(money) * Number(itemBom.bomColorQuantity)).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>