<template>
|
<div class="print-container">
|
<el-card v-for="(item, index) in groupList" :key="index" class="box-card page-after">
|
<h2 class="head">交货清单</h2>
|
<div>
|
<h4>打印统计</h4>
|
<table cellspacing="0" cellpadding="0">
|
<tr class="stat-tr">
|
<td class="bottom-line">货主</td>
|
<td class="bottom-line">快递公司</td>
|
<td class="bottom-line">日期</td>
|
<td class="bottom-line">操作人</td>
|
<td class="bottom-line">订单数</td>
|
</tr>
|
<tr class="stat-tr">
|
<td>{{ item.consignorName }}</td>
|
<td>{{ item.expressCorpName }}</td>
|
<td>{{ newDate }}</td>
|
<td>{{ item.creator }}</td>
|
<td>{{ getTotal(item) }}</td>
|
</tr>
|
</table>
|
</div>
|
<div>
|
<h4>打印明细</h4>
|
<el-table :data="getCurrentDetails(item)" style="width: 100%">
|
<el-table-column prop="orderCode" label="订单号" width="135">
|
</el-table-column>
|
<el-table-column prop="expressCode" label="快递单号" width="130">
|
</el-table-column>
|
<el-table-column prop="storeOrderCode" label="店铺订单号" width="150">
|
</el-table-column>
|
<el-table-column prop="clientShortName" label="客户" width="80">
|
</el-table-column>
|
<el-table-column prop="shippingName" label="联系人" width="80">
|
</el-table-column>
|
<el-table-column prop="telephone" label="手机号" width="130">
|
</el-table-column>
|
<el-table-column prop="materialCount" label="数量" width="60">
|
</el-table-column>
|
<el-table-column prop="weight" label="重量" width="60">
|
</el-table-column>
|
<el-table-column prop="shippingAddress" label="地址">
|
</el-table-column>
|
</el-table>
|
</div>
|
<el-row class="row margin-top-20">
|
<el-col :span="6">发货人：{{ item.clientShortName }}</el-col>
|
<el-col :span="6">取货人：{{ item.shippingName }}</el-col>
|
<el-col :span="12">打印时间：{{ newDate }}</el-col>
|
</el-row>
|
</el-card>
|
<el-form class="form padding-20 no-print">
|
<el-form-item>
|
<el-button type="primary" @click="printBill">打印</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
var moment = require("moment");
|
|
export default {
|
data() {
|
return {
|
// 分组数据
|
groupList: [],
|
// 打印数据
|
tableData: [],
|
newDate: new Date(), // 当前打印时间
|
materialCount: 0 // 统计数量
|
};
|
},
|
computed: {
|
// 获得当前明细集合
|
getCurrentDetails: function() {
|
return item => {
|
return this.tableData.filter(
|
row => row.expressCorpName === item.expressCorpName && row.consignor_Id === item.consignor_Id
|
);
|
};
|
},
|
// 获得合计数据
|
getTotal: function() {
|
return item => {
|
const filterList = this.tableData.filter(
|
row => row.expressCorpName === item.expressCorpName && row.consignor_Id === item.consignor_Id
|
);
|
// const total = filterList.reduce(
|
// (totalItem, currItem) => {
|
// totalItem.materialCount += currItem.materialCount;
|
// return totalItem;
|
// },
|
// { materialCount: 0 }
|
// );
|
|
return filterList.length;
|
};
|
}
|
},
|
|
mounted() {
|
var data = sessionStorage["print-send-list"];
|
this.tableData = JSON.parse(data);
|
const groupList = this.tableData.reduce(
|
(all, next) =>
|
all.some(item => item.expressCorpName === next.expressCorpName && item.consignor_Id === next.consignor_Id)
|
? all
|
: [...all, next],
|
[]
|
);
|
this.groupList = groupList;
|
this.getTime();
|
},
|
methods: {
|
// 获取当前打印时间
|
getTime() {
|
this.newDate = moment(this.newDate).format("YYYY-MM-DD HH:mm:ss");
|
},
|
// 打印单据
|
printBill() {
|
window.print();
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.print-container {
|
margin-top: 20px;
|
margin-left: 20px;
|
.box-card {
|
margin-bottom: 20px;
|
max-width: 1366px;
|
}
|
.head {
|
text-align: center;
|
}
|
.stat-tr {
|
td {
|
padding: 10px;
|
}
|
.bottom-line {
|
border-bottom: 2px solid gray;
|
}
|
}
|
}
|
</style>
|
