270 lines
7.3 KiB
Vue
270 lines
7.3 KiB
Vue
<template>
|
||
<div>
|
||
<el-dialog v-loading="loading" v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="出库单打印" width="860px">
|
||
<div class="print" id="printDom" ref="printRef">
|
||
<div class="print-body-box">
|
||
<div class="title">出库单 {{ printData.shipmentNum }}</div>
|
||
<div class="line"></div>
|
||
<div class="info-box">
|
||
<div class="info-left">
|
||
<div>
|
||
<span>时间：{{ printData.year + '年' + printData.week + '周' + printData.date + '日' }}</span>
|
||
</div>
|
||
<div>
|
||
<span>客户编号：{{ printData.customNo }} </span>
|
||
<span>客户名称：{{ printData.customName }} </span>
|
||
</div>
|
||
<div>
|
||
<span>客户地址：{{ printData.customAddress }} </span>
|
||
</div>
|
||
<div>
|
||
<span>备注：{{ printData.remarks }} </span>
|
||
</div>
|
||
</div>
|
||
<div class="info-right qr">
|
||
<vue-qr :text="printData.shipmentNum" :size="100"></vue-qr>
|
||
</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<!-- 出库单计划物料列表 -->
|
||
<div class="table">
|
||
<div class="table-title">需求物料清单</div>
|
||
<table title="待出物料" align="center">
|
||
<thead>
|
||
<tr>
|
||
<th>物料号</th>
|
||
<th>描述</th>
|
||
<th>需求零件数</th>
|
||
<th>需求箱数</th>
|
||
|
||
<th>库存零件数</th>
|
||
<th>库存箱数</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item, index) in printData.materialList" :key="index">
|
||
<td>{{ item.partnumber }}</td>
|
||
<td>{{ item.productName }}</td>
|
||
<td>{{ item.requireOutNum }}</td>
|
||
<td>{{ item.require_pack_num }}</td>
|
||
|
||
<td>{{ item.itemNum }}</td>
|
||
<td>{{ item.packageNum }}</td>
|
||
<!-- <td>{{ item.stockQuantity }}</td>
|
||
<td>{{ item.stockQuantity2 }}</td> -->
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="line"></div>
|
||
<!-- 自定义排序列表 -->
|
||
<div class="table">
|
||
<div class="table-title">计划出库批次清单</div>
|
||
<table title="出库计划" align="center">
|
||
<thead>
|
||
<tr>
|
||
<th>物料号</th>
|
||
<th>所属仓库</th>
|
||
<th>批次号</th>
|
||
<th>需求零件数</th>
|
||
|
||
<!-- <th>批次箱数</th>
|
||
<th>批次零件数</th> -->
|
||
<th>库存箱数</th>
|
||
<th>库存零件数</th>
|
||
|
||
<!-- <th>批次时间</th>
|
||
<th>出库顺序</th> -->
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item, index) in printData.planlList" :key="index">
|
||
<td>{{ item.materialCode }}</td>
|
||
<td>{{ item.warehouseCode }}</td>
|
||
<td>{{ item.patchcode }}</td>
|
||
<td>{{ item.partnumberNum }}</td>
|
||
<!-- <td>{{ item.requireNum }}</td> -->
|
||
|
||
<!-- <td>{{ item.packageNum }}</td>
|
||
<td>{{ item.partnumberNum }}</td> -->
|
||
<td>{{ item.inventory_pack_num }}</td>
|
||
<td>{{ item.inventory_num }}</td>
|
||
|
||
<!-- <td>{{ item.patchtime }}</td>
|
||
<td>{{ item.outorder }}</td> -->
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div slot="footer">
|
||
<el-button @click="close">取消</el-button>
|
||
<el-button type="primary" @click="handelConfirm">确认打印</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as WmOutOrderApi from '@/api/wmsManagement/wmOutOrder.js'
|
||
import print from 'print-js'
|
||
export default {
|
||
inheritAttrs: false,
|
||
components: {},
|
||
props: {
|
||
printKey: {
|
||
default: null,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
clearData: {},
|
||
// 待打印的数据
|
||
printData: {
|
||
shipmentNum: '',
|
||
customNo: '',
|
||
customName: '',
|
||
customAddress: '',
|
||
remarks: '',
|
||
year: 2000,
|
||
week: 0,
|
||
date: 0,
|
||
// 出货单需要物料列表
|
||
materialList: [],
|
||
// 出货单计划出货列表
|
||
planlList: [],
|
||
},
|
||
}
|
||
},
|
||
computed: {},
|
||
watch: {},
|
||
created() {
|
||
this.clearData = JSON.parse(JSON.stringify(this.printData))
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
onOpen() {
|
||
this.getPrintData()
|
||
},
|
||
onClose() {
|
||
this.printData = JSON.parse(JSON.stringify(this.clearData))
|
||
},
|
||
close() {
|
||
this.$emit('update:visible', false)
|
||
},
|
||
getPrintData() {
|
||
this.loading = true
|
||
setTimeout(() => {
|
||
this.loading = false
|
||
}, 30000)
|
||
// 出库单主键
|
||
const getKey = this.printKey
|
||
if (getKey === null) {
|
||
this.$message('打印参数异常！', getKey)
|
||
return
|
||
}
|
||
WmOutOrderApi.getWmOutOrder(getKey).then((res) => {
|
||
const { code, data } = res
|
||
if (code == 200) {
|
||
// 基本数据
|
||
this.printData = data
|
||
// 需求物料清单数据
|
||
WmOutOrderApi.getOutoderMatrials({ shipment_num: getKey }).then((res) => {
|
||
if (res.code === 200) {
|
||
this.printData.materialList = res.data
|
||
}
|
||
})
|
||
// this.loading = false;
|
||
// return;
|
||
WmOutOrderApi.generateOutorderplan({ shipment_num: getKey }).then((res) => {
|
||
if (res.code === 200) {
|
||
this.printData.planlList = res.data
|
||
console.log('generateOutorderplan', res.data)
|
||
// 计划出库批次清单
|
||
this.loading = false
|
||
} else {
|
||
this.$message.error('打印参数异常！' + res.msg + getKey)
|
||
this.loading = false
|
||
}
|
||
})
|
||
} else {
|
||
this.$message.error('打印参数异常！' + getKey)
|
||
}
|
||
})
|
||
},
|
||
handelConfirm() {
|
||
this.$nextTick(() => {
|
||
printJS({
|
||
printable: 'printDom', // 标签元素id
|
||
type: 'html',
|
||
header: '',
|
||
targetStyles: ['*'],
|
||
font_size: '',
|
||
style: 'margin: 20px',
|
||
})
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
#printDom {
|
||
border: 1px solid #000000;
|
||
padding: 10px;
|
||
}
|
||
.print-body-box {
|
||
margin: 0 auto;
|
||
width: 90%;
|
||
color: #000000;
|
||
}
|
||
.title {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 26px;
|
||
font-weight: 700;
|
||
margin-bottom: 10px;
|
||
}
|
||
.info-box {
|
||
width: 100%;
|
||
height: 120px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.info-left {
|
||
width: 80%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.info-right {
|
||
width: 20%;
|
||
}
|
||
.qr {
|
||
width: 100px;
|
||
height: 100px;
|
||
text-align: center;
|
||
}
|
||
.line {
|
||
height: 1px;
|
||
border-bottom: 1px solid #000000;
|
||
}
|
||
.table {
|
||
font-size: 16px;
|
||
}
|
||
.table-title {
|
||
margin: 5px;
|
||
width: 100%;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
}
|
||
tbody {
|
||
text-align: center;
|
||
}
|
||
</style>
|