对账单报表 打印订单demo

src/views/shengde/group/finance/summary/demo.vue

@@ -0,0 +1,384 @@
+<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">
+      <el-table
+        :data="tableList"
+        :cell-style="{ padding: '0' }"
+        :row-style="{ height: '35px' }"
+        header-row-class-name="tableHeader"
+        border
+        height="calc(100vh - 182px - 56px)"
+        :span-method="objectSpanMethod"
+      >
+        <el-table-column label="订单时间" prop="contractTime" width="150" />
+        <el-table-column label="订单号" prop="contractCode" width="154" />
+        <el-table-column label="万里牛单号" prop="tradeNo" width="150" />
+        <el-table-column label="SKU品号" prop="productColorCode" width="120" />
+        <el-table-column label="SKU品名" prop="productColorName" min-width="220" />
+        <el-table-column label="SKU数量" prop="quantity" width="120" />
+        <el-table-column label="BOM品号" prop="bomColorCode" width="120" />
+        <el-table-column label="BOM品名" prop="bomColorName" min-width="320" />
+        <el-table-column label="数量" width="85">
+          <template slot-scope="scope">
+            <span v-if="scope.row.bomColorQuantity">{{ Number(scope.row.bomColorQuantity) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="单价" prop="contractTime" width="85">
+          <template slot-scope="scope">
+            <span v-if="scope.row.dataResource === 1">{{ scope.row.productPrice }}</span>
+            <span v-else>{{ scope.row.price }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="激光LOGO" prop="contractTime" width="85">
+          <template slot-scope="scope">
+            <span v-if="scope.row.processingLayout === '20' && scope.row.dataResource === 1 && scope.row.processPrice && Number(scope.row.processPrice) !== 0">
+              {{ Number(scope.row.processPrice) }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="激光体位线" prop="contractTime" width="85">
+          <template slot-scope="scope">
+            <span v-if="scope.row.processingLayout === '10' && scope.row.dataResource === 1 && scope.row.processPrice && Number(scope.row.processPrice) !== 0">
+              {{ Number(scope.row.processPrice) }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="代发费" prop="contractTime" width="85">
+          <template slot-scope="scope">
+            <span v-if="scope.row.dataResource === 1 && scope.row.deliverGoodsPrice && Number(scope.row.deliverGoodsPrice) !== 0">
+              {{ Number(scope.row.deliverGoodsPrice) }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="快递包材费" prop="contractTime" width="90">
+          <template slot-scope="scope">
+            <span v-if="scope.row.dataResource === 1 && scope.row.deliverGoodsPrice && Number(scope.row.deliverGoodsPrice) !== 0">
+              {{ Number(scope.row.deliverGoodsPrice) }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="包装人工费" prop="contractTime" width="90">
+          <template slot-scope="scope">
+            <span v-if="scope.row.dataResource === 1 && scope.row.deliverGoodsPrice && Number(scope.row.deliverGoodsPrice) !== 0">
+              {{ Number(scope.row.deliverGoodsPrice) }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="SKU单价" prop="skuPrice" width="100" />
+        <el-table-column label="小计" prop="subtotalAmount" width="100" />
+        <el-table-column label="售后数量" prop="aftermarketQuantity" width="100" />
+        <el-table-column label="售后金额" prop="aftermarketAmount" width="100" />
+        <el-table-column label="合计" prop="amount" width="110" />
+      </el-table>
+      <!-- <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 { summaryPrintDetail } from '@/api/shengde/group/finance/summary'
+import { editAmount } from '@/api/shengde/group/finance/reconciliation'
+import $ from 'jquery'
+
+export default {
+  name: 'summaryPrint',
+  props: {
+    rowData: Object,
+  },
+  data() {
+    return {
+      loadingStatus: false,
+      loadingText: '',
+      tableList: [],
+    }
+  },
+  created() {
+    this.getDetails()
+  },
+  mounted() {},
+  methods: {
+    getDetails() {
+      this.loadingStatus = true
+      summaryPrintDetail({ id: this.rowData.id }).then(
+        (res) => {
+          let table = []
+          res.data.data.map((item) => {
+            if (item.bomDetails && item.bomDetails.length > 0) {
+              item.bomDetails.map((itemBom) => {
+                table.push({
+                  contractTime: item.contractTime,
+                  contractCode: item.contractCode,
+                  tradeNo: item.tradeNo,
+                  productColorCode: item.productColorCode,
+                  productColorName: item.productColorName,
+                  quantity: item.quantity,
+                  bomColorCode: itemBom.bomColorCode,
+                  bomColorName: itemBom.bomColorName,
+                  bomColorQuantity: itemBom.bomColorQuantity,
+                  price: itemBom.price,
+                  productPrice: item.productPrice,
+                  processPrice: item.processPrice,
+                  deliverGoodsPrice: item.deliverGoodsPrice,
+                  expressPrice: item.expressPrice,
+                  expensePrice: item.expensePrice,
+                  skuPrice: item.skuPrice,
+                  subtotalAmount: item.subtotalAmount,
+                  aftermarketQuantity: item.aftermarketQuantity,
+                  aftermarketAmount: item.aftermarketAmount,
+                  amount: item.amount,
+                  dataResource: itemBom.dataResource,
+                  processingLayout: item.processingLayout,
+                })
+              })
+            }
+          })
+          this.tableList = Object.freeze(this.mergeRow(table))
+          this.loadingStatus = false
+          let data = {
+            id: this.rowData.id,
+            amount: Number(this.getAggregate()),
+          }
+          editAmount(data).then()
+        },
+        (err) => {
+          this.loadingStatus = false
+          console.log('summaryPrintDetail: ' + 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)
+    },
+    getAggregate() {
+      let allMoney = 0
+      if (this.tableList && this.tableList.length > 0) {
+        this.tableList.map((item) => {
+          if (item.bomDetails && item.bomDetails.length > 0) {
+            item.bomDetails.map((itemBom) => {
+              if (itemBom.amount) {
+                allMoney = parseFloat(Number(allMoney) + Number(itemBom.amount)).toFixed(2)
+              }
+            })
+          }
+        })
+      }
+      return allMoney
+    },
+    mergeRow(list) {
+      for (let field in list[0]) {
+        let k = 0
+        let i = 0
+        while (k < list.length) {
+          list[k][field + 'Span'] = 1
+          list[k][field + 'Dis'] = false
+          for (i = k + 1; i <= list.length - 1; i++) {
+            if (
+              list[k][field] === list[i][field] &&
+              list[k].contractTime === list[i].contractTime &&
+              list[k].contractCode === list[i].contractCode &&
+              list[k].tradeNo === list[i].tradeNo &&
+              list[k].productColorCode === list[i].productColorCode &&
+              list[k].productColorName === list[i].productColorName
+            ) {
+              list[k][field + 'Span']++
+              list[k][field + 'Dis'] = false
+              list[i][field + 'Span'] = 1
+              list[i][field + 'Dis'] = true
+            } else {
+              break
+            }
+          }
+          k = i
+        }
+      }
+      return list
+    },
+    objectSpanMethod({ rowIndex, columnIndex }) {
+      if ([0, 1, 2, 3, 4, 5, 15, 16, 17, 18, 19].includes(columnIndex)) {
+        let spanName = [
+          'contractTime',
+          'contractCode',
+          'tradeNo',
+          'productColorCode',
+          'productColorName',
+          'quantity',
+          'skuPrice',
+          'subtotalAmount',
+          'aftermarketQuantity',
+          'aftermarketAmount',
+          'amount',
+        ]
+        const row1 = this.tableList[rowIndex][spanName[columnIndex] + 'Span']
+        const colspan = this.tableList[rowIndex][spanName[columnIndex] + 'Dis'] ? 0 : 1
+        const rowspan = colspan === 1 ? row1 : 0
+        return {
+          rowspan: rowspan,
+          colspan: colspan,
+        }
+      }
+    },
+  },
+}
+</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;
+}
+::v-deep {
+  .tableHeader th {
+    background-color: #edf0f5;
+    height: 35px;
+    padding: 0;
+  }
+}
+</style>