<template>
|
<div ref="container" class="print-list-container">
|
<div v-for="(dataInfo, index) in dataList" :key="index" class="canvas-container page-next">
|
<h1>出库拣配单( {{ showSubTitle(dataInfo) }})</h1>
|
<div class="canvas-content">
|
<div class="barcode-box">
|
<vue-barcode :value="dataInfo.printInfo.orderPrintCode" :options="barcodeOptions" />
|
</div>
|
<el-row class="header">
|
<div class="col">
|
<span class="title">波次号：</span>
|
<span class="value">{{ dataInfo.printInfo.orderPrintCode }}</span>
|
</div>
|
<div class="col">
|
<span class="title">货主：</span>
|
<span class="value">{{ dataInfo.printInfo.consignorName }}</span>
|
</div>
|
<div class="col">
|
<span class="title">仓库：</span>
|
<span class="value">{{ dataInfo.printInfo.storageName }}</span>
|
</div>
|
<div class="col">
|
<span class="title">时间：</span>
|
<span class="value">{{ common.formatDate(dataInfo.printInfo.createDate, "yyyy-MM-dd HH:mm:ss") }}</span>
|
</div>
|
<div class="col">
|
<span class="title">创建人：</span>
|
<span class="value">{{ dataInfo.printInfo.creator }}</span>
|
</div>
|
<div class="col">
|
<span class="title">订单数：</span>
|
<span class="value">{{ dataInfo.printInfo.orderCount }}</span>
|
</div>
|
</el-row>
|
<el-table :data="dataInfo.details" :span-method="(params)=> objectSpanMethod(dataInfo, params)" border style="width: 100%">
|
<el-table-column v-if="showCol('positionName')" header-align="center" align="center" prop="positionName" label="货位" width="100">
|
</el-table-column>
|
<el-table-column v-if="showCol('productModel')" header-align="center" align="center" prop="productModel" label="条形码" width="120">
|
</el-table-column>
|
<el-table-column v-if="showCol('productName')" header-align="center" align="center" prop="productName" label="物料名称">
|
</el-table-column>
|
<el-table-column v-if="showCol('productSpec')" header-align="center" align="center" prop="productSpec" label="物料规格" width="70">
|
</el-table-column>
|
<el-table-column v-if="showCol('smallUnit')" header-align="center" align="center" prop="smallUnit" label="小单位" width="60">
|
</el-table-column>
|
<el-table-column v-if="showCol('bigUnit')" header-align="center" align="center" prop="bigUnit" label="大单位" width="60">
|
</el-table-column>
|
<el-table-column v-if="showCol('quantityOrderOrign')" header-align="center" align="center" prop="quantityOrderOrign" label="拣货数量" width="70">
|
<template slot-scope="scope">
|
{{ dataInfo.spanArr.find(item => { return item.label === "拣货数量";}).spanList[scope.$index].spanTotal }}
|
</template>
|
</el-table-column>
|
<el-table-column v-if="showCol('allotPositionName')" header-align="center" align="center" prop="allotPositionName" label="配货位" width="60">
|
</el-table-column>
|
<el-table-column v-if="showCol('allotQty')" header-align="center" align="center" prop="quantityOrderOrign" label="配货数量" width="70">
|
</el-table-column>
|
<el-table-column v-if="showCol('orderCode')" header-align="center" align="center" prop="orderCode" label="销售订单" width="125">
|
</el-table-column>
|
<el-table-column v-if="showCol('storeOrderCode')" header-align="center" align="center" prop="storeOrderCode" label="店铺单号 " width="120">
|
</el-table-column>
|
<el-table-column v-if="showCol('produceDate')" :formatter="produceDateFormater" header-align="center" align="center" prop="produceDate" label="生产日期">
|
</el-table-column>
|
<el-table-column v-if="showCol('remark')" header-align="center" align="center" prop="remark" label="订单备注">
|
</el-table-column>
|
<el-table-column v-if="showCol('salePrice')" header-align="center" align="center" prop="salePrice" label="售价" width="70">
|
</el-table-column>
|
<el-table-column v-if="showCol('rowTotal')" header-align="center" align="center" prop="rowTotal" label="金额" width="70">
|
</el-table-column>
|
<el-table-column v-if="showCol('giftMessage')" header-align="center" align="center" prop="giftMessage" label="客户留言">
|
</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,
|
// 配置参数
|
config: {
|
pickOrder_fields: [],
|
pickOrder_fontSize: 18,
|
pickOrder_productName_length: 20
|
},
|
// 是否整拣
|
isFullContainerLoad: false,
|
// 条码参数
|
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
|
},
|
// 数据集合
|
dataList: []
|
}
|
},
|
computed: {
|
// 是否显示列
|
showCol: function() {
|
return colName => {
|
return this.config.pickOrder_fields.some(item => {
|
return item === colName
|
})
|
}
|
}
|
},
|
created() {
|
this.getConfig()
|
this.loadModuleData()
|
},
|
methods: {
|
// 获得配置参数
|
getConfig() {
|
var keys = Object.keys(this.config).join(',')
|
var url = '/api/sys/param/getConfig'
|
var params = {
|
keys: keys
|
}
|
var callback = res => {
|
this.common.showMsg(res)
|
|
// 获得参数值列表，将数字转换为对象
|
res.data.forEach(item => {
|
var value03 = item.value03
|
if (this.common.isNumber(item.value03)) {
|
value03 = parseInt(item.value03)
|
}
|
if (item.value02 === 'pickOrder_fields') {
|
this.config.pickOrder_fields = value03 ? value03.split(',') : []
|
this.config.pickOrder_fields.forEach((p, index) => {
|
this.config.pickOrder_fields[index] = p
|
})
|
} else {
|
this.$set(this.config, item.value02, value03)
|
}
|
})
|
}
|
this.common.ajax(url, params, callback, this.$refs.container)
|
},
|
// 加载模板信息
|
loadModuleData() {
|
var ids = this.$route.params.ids
|
debugger
|
var url = '/api/outbound/orderPrint/printPickBill2'
|
var params = {
|
ids: ids.split(',')
|
}
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res)
|
if (res.result) {
|
this.dataList = res.data
|
// this.isFullContainerLoad = this.orderPrintDetails.some(item => {
|
// return item.isFullContainerLoad === 1;
|
// });
|
// 计算合并列
|
for (const dataInfo of this.dataList) {
|
this.getSpanArr(dataInfo)
|
}
|
}
|
},
|
true
|
)
|
},
|
// 格式化日期
|
produceDateFormater(row, column) {
|
return this.common.formatDate(row.produceDate, 'yyyy-MM-dd')
|
},
|
// 打印单据
|
printBill() {
|
window.print()
|
},
|
// 计算合并列
|
getSpanArr(dataInfo) {
|
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, dataInfo)
|
}
|
},
|
getSpanArrSub(fieldInfo, dataInfo) {
|
const details = dataInfo.details
|
const spanList = []
|
let pos = 0
|
for (var i = 0; i < details.length; i++) {
|
if (i === 0) {
|
pos = 0
|
const item = {
|
pos: pos,
|
colSpan: 1
|
}
|
if (fieldInfo.isSum) {
|
item.spanTotal = details[i][fieldInfo.fieldName]
|
}
|
spanList.push(item)
|
} else {
|
// 判断当前元素与上一个元素是否相同
|
if (
|
details[i].positionName === details[i - 1].positionName &&
|
details[i].productModel === details[i - 1].productModel &&
|
details[i].productName === details[i - 1].productName &&
|
details[i].productSpec === details[i - 1].productSpec
|
) {
|
const item = spanList.find(item => {
|
return item.pos === pos
|
})
|
if (fieldInfo.isSum) {
|
item.spanTotal += details[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 = details[i][fieldInfo.fieldName]
|
}
|
spanList.push(item)
|
}
|
}
|
}
|
if (!dataInfo.spanArr) {
|
dataInfo.spanArr = []
|
}
|
|
dataInfo.spanArr.push({
|
fieldName: fieldInfo.fieldName,
|
label: fieldInfo.label,
|
spanList: spanList
|
})
|
},
|
// 合并方法
|
objectSpanMethod(dataInfo, params) {
|
const { column, rowIndex } = params
|
if (
|
column.label === '货位' ||
|
column.label === '物料名称' ||
|
column.label === '条形码' ||
|
column.label === '物料规格' ||
|
column.label === '小单位' ||
|
column.label === '拣货数量'
|
) {
|
const spanInfo = dataInfo.spanArr.find(item => {
|
return item.label === column.label
|
})
|
if (spanInfo) {
|
const _row = spanInfo.spanList[rowIndex].colSpan
|
const _col = _row > 0 ? 1 : 0
|
return {
|
rowspan: _row,
|
colspan: _col
|
}
|
} else {
|
return {
|
rowspan: 1,
|
colspan: 1
|
}
|
}
|
} else {
|
return {
|
rowspan: 1,
|
colspan: 1
|
}
|
}
|
},
|
// 显示子标题
|
showSubTitle(dataInfo) {
|
if (dataInfo.printInfo.subBatch) {
|
return dataInfo.printInfo.areaCode + '区'
|
} else {
|
return dataInfo.printInfo.isFullContainerLoad ? '整拣' : '零拣'
|
}
|
}
|
}
|
}
|
</script>
|
|
<style id="print2" lang="scss" scoped>
|
.print-list-container {
|
h1 {
|
padding-right: 350px;
|
}
|
.canvas-container {
|
position: relative;
|
text-align: center;
|
padding: 20px;
|
width: 1200px;
|
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;
|
}
|
}
|
}
|
/deep/ .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>
|
