wms:修改出库单
This commit is contained in:
qianhao.xu
@@ -1,259 +1,268 @@
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in printData.materialList">
|
||||
<td>{{ item.partnumber }}</td>
|
||||
<td>{{ item.productName }}</td>
|
||||
<td>{{ item.requireOutNum }}</td>
|
||||
<td>{{ item.packageNum }}</td>
|
||||
<td>{{ item.itemNum }}</td>
|
||||
<!-- <td>{{ item.stockQuantity }}</td>
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="item.package_code_client !== null" v-for="item in printData.planlList">
|
||||
<td>{{ item.patchcode }}</td>
|
||||
<td>{{ item.materialCode }}</td>
|
||||
<td>{{ item.warehouseCode }}</td>
|
||||
<td>{{ item.packageNum }}</td>
|
||||
<td>{{ item.partnumberNum }}</td>
|
||||
<td>{{ item.requireNum }}</td>
|
||||
<td>{{ item.patchtime }}</td>
|
||||
<td>{{ item.outorder }}</td>
|
||||
</tr>
|
||||
<tr v-else>
|
||||
<td :colspan="8"><div class="line"></div></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>
|
||||
</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-if="item.package_code_client != null" v-for="(item, index) in printData.planlList" :key="index">
|
||||
<td>{{ item.patchcode }}</td>
|
||||
<td>{{ item.materialCode }}</td>
|
||||
<td>{{ item.warehouseCode }}</td>
|
||||
<!-- <td>{{ item.packageNum }}</td>
|
||||
<td>{{ item.partnumberNum }}</td> -->
|
||||
<td>{{ item.inventory_pack_num }}</td>
|
||||
<td>{{ item.inventory_num }}</td>
|
||||
<td>{{ item.requireNum }}</td>
|
||||
<!-- <td>{{ item.patchtime }}</td>
|
||||
<td>{{ item.outorder }}</td> -->
|
||||
</tr>
|
||||
<tr v-else>
|
||||
<td :colspan="8"><div class="line"></div></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',
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
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;
|
||||
border: 1px solid #000000;
|
||||
padding: 10px;
|
||||
}
|
||||
.print-body-box {
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
color: #000000;
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
color: #000000;
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
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;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.info-left {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.info-right {
|
||||
width: 20%;
|
||||
width: 20%;
|
||||
}
|
||||
.qr {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.line {
|
||||
height: 1px;
|
||||
border-bottom: 1px solid #000000;
|
||||
height: 1px;
|
||||
border-bottom: 1px solid #000000;
|
||||
}
|
||||
.table {
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.table-title {
|
||||
margin: 5px;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
tbody {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user