<template>
|
<div ref="container" class="print-list-container">
|
<div v-for="(dataInfo, index) in allocations" :key="index" class="canvas-container page-next">
|
<h1>要货拣配单</h1>
|
<div class="canvas-content">
|
<div class="barcode-box">
|
<vue-barcode :value="dataInfo.allocationCode" :options="barcodeOptions" />
|
</div>
|
<el-row class="header">
|
<div class="col">
|
<span class="title">调拨单号：</span>
|
<span class="value">{{ dataInfo.allocationCode }}</span>
|
</div>
|
<div class="col">
|
<span class="title">调出仓库：</span>
|
<span class="value">{{ dataInfo.storageName }}</span>
|
</div>
|
<div class="col">
|
<span class="title">调入仓库：</span>
|
<span class="value">{{ dataInfo.storageName_In }}</span>
|
</div>
|
<div class="col">
|
<span class="title">时间：</span>
|
<span class="value">{{ common.formatDate(dataInfo.createDate, "yyyy-MM-dd HH:mm:ss") }}</span>
|
</div>
|
<div class="col">
|
<span class="title">创建人：</span>
|
<span class="value">{{ dataInfo.creator }}</span>
|
</div>
|
<div class="col">
|
<span class="title">合计数量：</span>
|
<span class="value">{{ dataInfo.totalQuantity }}</span>
|
</div>
|
</el-row>
|
<el-table :data="currentDetails(dataInfo.allocation_Id)" border style="width: 100%">
|
<el-table-column header-align="center" align="center" prop="positionName" label="货位" width="120">
|
</el-table-column>
|
<el-table-column header-align="center" align="center" prop="productModel" label="条形码" width="120">
|
</el-table-column>
|
<el-table-column header-align="center" align="center" prop="productName" label="物料名称">
|
</el-table-column>
|
<el-table-column header-align="center" align="center" prop="productSpec" label="物料规格" width="100">
|
</el-table-column>
|
<el-table-column header-align="center" align="center" prop="orignHolderStorage" label="拣货数量" width="80">
|
</el-table-column>
|
<el-table-column header-align="center" align="center" prop="smallUnit" label="单位" width="60">
|
</el-table-column>
|
<el-table-column :formatter="produceDateFormater" header-align="center" align="center" prop="produceDate" label="生产日期" width="110">
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<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>
|
import Draggable from "vuedraggable";
|
import DraggableResizable from "@/components/base/draggable-resizable";
|
import VueBarcode from "@xkeshi/vue-barcode";
|
import VueQrcode from "@chenfengyuan/vue-qrcode";
|
|
export default {
|
name: "PrintBase",
|
components: {
|
Draggable,
|
DraggableResizable,
|
VueBarcode,
|
VueQrcode
|
},
|
data() {
|
return {
|
BASE_API: process.env.BASE_API,
|
// 波次列表
|
allocations: [],
|
// 波次明细
|
holderList: [],
|
// 订单明细
|
allocationlist: [],
|
// 配置参数
|
config: {
|
pickOrder_fields: [],
|
pickOrder_fontSize: 18,
|
pickOrder_productName_length: 20
|
},
|
// 合并单元格集合
|
spanArr: [],
|
// 条码参数
|
barcodeOptions: {
|
format: "CODE128",
|
width: 1.5,
|
height: 30,
|
displayValue: true,
|
text: "",
|
fontOptions: "",
|
font: "monospace",
|
textAlign: "center",
|
textPosition: "bottom",
|
textMargin: 2,
|
fontSize: 14,
|
background: "#ffffff",
|
lineColor: "#000000",
|
marginTop: 0,
|
marginBottom: 0,
|
marginLeft: 0,
|
marginRight: 0,
|
flat: null
|
}
|
};
|
},
|
computed: {
|
// 当前明细数据
|
currentDetails: function() {
|
return allocation_Id => {
|
const dataList = this.holderList.filter(item => {
|
return item.mainID === allocation_Id;
|
});
|
return dataList;
|
};
|
}
|
},
|
created() {
|
this.loadModuleData();
|
},
|
methods: {
|
// 加载模板信息
|
loadModuleData() {
|
var ids = this.$route.params.ids;
|
var url = "/api/outbound/allocation/pickBillPrint";
|
var params = {
|
allocation_Ids: ids.split(",")
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.allocations = res.data.allocations;
|
this.holderList = res.data.holderList;
|
this.allocationlist = res.data.allocationlist;
|
|
this.getSpanArr(res.data.holderList);
|
}
|
},
|
true
|
);
|
},
|
// 格式化日期
|
produceDateFormater(row, column) {
|
return this.common.formatDate(row.produceDate, "yyyy-MM-dd");
|
},
|
// 打印单据
|
printBill() {
|
window.print();
|
},
|
// 计算合并列
|
getSpanArr(data) {
|
const fields = [
|
{
|
fieldName: "positionName",
|
label: "货位",
|
isSum: false
|
},
|
{
|
fieldName: "productModel",
|
label: "条形码",
|
isSum: false
|
},
|
{
|
fieldName: "productName",
|
label: "物料名称",
|
isSum: false
|
},
|
{
|
fieldName: "productSpec",
|
label: "物料规格",
|
isSum: false
|
},
|
{
|
fieldName: "smallUnit",
|
label: "小单位",
|
isSum: false
|
},
|
{
|
fieldName: "quantityOrderOrign",
|
label: "拣货数量",
|
isSum: true
|
}
|
];
|
for (const fieldInfo of fields) {
|
this.getSpanArrSub(fieldInfo, data);
|
}
|
},
|
getSpanArrSub(fieldInfo, data) {
|
const spanList = [];
|
let pos = 0;
|
for (var i = 0; i < data.length; i++) {
|
if (i === 0) {
|
pos = 0;
|
const item = {
|
pos: pos,
|
colSpan: 1
|
};
|
if (fieldInfo.isSum) {
|
item.spanTotal = data[i][fieldInfo.fieldName];
|
}
|
spanList.push(item);
|
} else {
|
// 判断当前元素与上一个元素是否相同
|
if (
|
data[i].positionName === data[i - 1].positionName &&
|
data[i].productModel === data[i - 1].productModel &&
|
data[i].productName === data[i - 1].productName &&
|
data[i].productSpec === data[i - 1].productSpec
|
) {
|
const item = spanList.find(item => {
|
return item.pos === pos;
|
});
|
if (fieldInfo.isSum) {
|
item.spanTotal += data[i][fieldInfo.fieldName];
|
}
|
item.colSpan += 1;
|
|
// 增加一条空记录
|
const _item = {
|
pos: -1,
|
colSpan: 0
|
};
|
spanList.push(_item);
|
} else {
|
++pos;
|
const item = {
|
pos: pos,
|
colSpan: 1
|
};
|
if (fieldInfo.isSum) {
|
item.spanTotal = data[i][fieldInfo.fieldName];
|
}
|
spanList.push(item);
|
}
|
}
|
}
|
this.spanArr.push({
|
fieldName: fieldInfo.fieldName,
|
label: fieldInfo.label,
|
spanList: spanList
|
});
|
},
|
// 合并方法
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
if (
|
column.label === "货位" ||
|
column.label === "物料名称" ||
|
column.label === "条形码" ||
|
column.label === "物料规格" ||
|
column.label === "小单位" ||
|
column.label === "拣货数量"
|
) {
|
const spanInfo = this.spanArr.find(item => {
|
return item.label === column.label;
|
});
|
const _row = spanInfo.spanList[rowIndex].colSpan;
|
const _col = _row > 0 ? 1 : 0;
|
return {
|
rowspan: _row,
|
colspan: _col
|
};
|
} else {
|
return {
|
rowspan: 1,
|
colspan: 1
|
};
|
}
|
}
|
}
|
};
|
</script>
|
|
<style id="print2" lang="scss">
|
.print-list-container {
|
h1 {
|
padding-right: 350px;
|
}
|
.canvas-container {
|
position: relative;
|
text-align: center;
|
padding: 20px;
|
width: 220mm;
|
background-color: white;
|
-moz-box-shadow: 0px 0px 10px #3d3d3d;
|
-webkit-box-shadow: 0px 0px 10px #3d3d3d;
|
box-shadow: 0px 0px 10px #3d3d3d;
|
margin: 20px;
|
.canvas-content {
|
.drag-list {
|
height: 100%;
|
position: relative;
|
}
|
height: 100%;
|
padding-bottom: 0px;
|
border: 1px none #000000;
|
.header {
|
overflow: hidden;
|
margin-bottom: 10px;
|
.col {
|
float: left;
|
+ .col {
|
margin-left: 20px;
|
}
|
}
|
}
|
.el-table--border,
|
.el-table--group {
|
border: 1px solid rgb(112, 112, 112);
|
border-top-color: rgb(112, 112, 112);
|
border-right-color: rgb(112, 112, 112);
|
border-bottom-color: rgb(112, 112, 112);
|
border-left-color: rgb(112, 112, 112);
|
}
|
|
.el-table td,
|
.el-table th.is-leaf {
|
border-bottom: 1px solid rgb(112, 112, 112);
|
}
|
.el-table--border td,
|
.el-table--border th,
|
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
|
border-bottom: 1px solid rgb(112, 112, 112);
|
}
|
|
.el-table--border td,
|
.el-table--border th,
|
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
|
border-right: 1px solid rgb(112, 112, 112);
|
border-right-width: 1px;
|
border-right-style: solid;
|
border-right-color: rgb(112, 112, 112);
|
}
|
thead,
|
.el-table {
|
color: black;
|
}
|
|
.el-table .cell {
|
padding-left: 2px;
|
padding-right: 2px;
|
}
|
}
|
.barcode-box {
|
position: absolute;
|
top: 10px;
|
right: 50px;
|
display: inline-block;
|
}
|
}
|
}
|
@media print {
|
.canvas-container {
|
-moz-box-shadow: none;
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
margin: 0px;
|
.canvas-content {
|
border: 0px dotted #000000;
|
}
|
}
|
.no-print {
|
display: none;
|
}
|
.page-next {
|
page-break-after: always;
|
}
|
}
|
</style>
|
