|
|
@@ -0,0 +1,356 @@
|
|
|
+<template>
|
|
|
+ <ele-modal
|
|
|
+ title="出库单"
|
|
|
+ :visible.sync="QRvisible"
|
|
|
+ v-if="QRvisible"
|
|
|
+ width="90%"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ id="printSection"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <table
|
|
|
+ cellspacing="0"
|
|
|
+ style="
|
|
|
+ width: 100%;
|
|
|
+ table-layout: fixed;
|
|
|
+ word-break: break-all;
|
|
|
+ word-wrap: break-word;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <tbody>
|
|
|
+ <tr align="center">
|
|
|
+ <td colspan="3">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ style="width: 80px; height: 80px"
|
|
|
+ src="@/assets/logo.jpg"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div>
|
|
|
+ <div style="font-size: 14px">湖南宝悦新型建材有限公司</div>
|
|
|
+ <div style="font-size: 10px"
|
|
|
+ >HUNAN BAO YUE BULIDING MATERAIL</div
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td colspan="3" style="font-size: 28px; font-weight: bold">
|
|
|
+ 销 售 出 库 单
|
|
|
+ </td>
|
|
|
+ <td colspan="3"><svg id="print"></svg></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td colspan="3" style="padding: 10px">
|
|
|
+ 出库单号:{{ formData.bizNo }}
|
|
|
+ </td>
|
|
|
+ <td colspan="3" style="padding: 10px">
|
|
|
+ 项目: {{ formData.projectName }}</td
|
|
|
+ >
|
|
|
+ <td colspan="3" style="padding: 10px">
|
|
|
+ 日期:{{ getNowFormatDate() }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td colspan="3" style="padding: 10px">
|
|
|
+ 客户:{{ formData.linkName }}</td
|
|
|
+ >
|
|
|
+ <td colspan="3" style="padding: 10px">
|
|
|
+ 联系电话: {{ formData.linkPhone }}</td
|
|
|
+ >
|
|
|
+ <td colspan="3" style="padding: 10px">
|
|
|
+ 车牌号: {{ formData.carNo }}</td
|
|
|
+ >
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <table
|
|
|
+ border
|
|
|
+ cellspacing="0"
|
|
|
+ style="
|
|
|
+ width: 100%;
|
|
|
+ table-layout: fixed;
|
|
|
+ word-break: break-all;
|
|
|
+ word-wrap: break-word;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <tbody>
|
|
|
+ <tr align="center">
|
|
|
+ <td style="padding: 10px 0"> 产品编码 </td>
|
|
|
+ <td style="padding: 10px 0"> 产品名称 </td>
|
|
|
+ <td style="padding: 10px 0"> 规格型号 </td>
|
|
|
+ <td style="padding: 10px 0"> 单位 </td>
|
|
|
+ <td style="padding: 10px 0"> 数量 </td>
|
|
|
+ <td style="padding: 10px 0"> 块数 </td>
|
|
|
+ <td style="padding: 10px 0"> 强度 </td>
|
|
|
+ <td style="padding: 10px 0"> 密度 </td>
|
|
|
+ <td style="padding: 10px 0"> 备注 </td>
|
|
|
+ </tr>
|
|
|
+ <tr align="center" v-for="(item, index) in codeList">
|
|
|
+ <td style="padding: 10px 0">{{ item.categoryCode }}</td>
|
|
|
+ <td style="padding: 10px 0">{{ item.categoryName }}</td>
|
|
|
+ <td style="padding: 10px 0"
|
|
|
+ >{{ item.specification }}{{ item.categoryModel }}</td
|
|
|
+ >
|
|
|
+ <td style="padding: 10px 0">{{ item.measureUnit }}</td>
|
|
|
+ <td style="padding: 10px 0">{{ item.measureQuantity }}</td>
|
|
|
+ <td style="padding: 10px 0">{{ item.packingQuantity }}</td>
|
|
|
+ <td style="padding: 10px 0">{{ item.packagingStrength }}</td>
|
|
|
+ <td style="padding: 10px 0">{{ item.packagingDensity }}</td>
|
|
|
+ <td style="padding: 10px 0">{{ item.remark }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr align="center">
|
|
|
+ <td colspan="4" style="padding: 10px 0"> 合计 </td>
|
|
|
+ <td colspan="1" style="padding: 10px 0">
|
|
|
+ {{
|
|
|
+ codeList.reduce((total, item) => {
|
|
|
+ return (total += item.measureQuantity);
|
|
|
+ }, 0)
|
|
|
+ }}
|
|
|
+ </td>
|
|
|
+ <td style="padding: 10px 0"></td>
|
|
|
+ <td colspan="2" style="padding: 10px 0"></td>
|
|
|
+ <td colspan="1" style="padding: 10px 0"></td>
|
|
|
+ </tr>
|
|
|
+ <tr align="center">
|
|
|
+ <td colspan="3" style="padding: 10px 0">
|
|
|
+ 注意事项:遗失托盘赔偿260/个
|
|
|
+ </td>
|
|
|
+ <td colspan="2" style="padding: 10px 0"> 装车托盘数:</td>
|
|
|
+ <td style="padding: 10px 0"></td>
|
|
|
+ <td style="padding: 10px 0"> 带回托盘数: </td>
|
|
|
+ <td colspan="2" style="padding: 10px 0"></td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <table
|
|
|
+ cellspacing="0"
|
|
|
+ style="
|
|
|
+ width: 100%;
|
|
|
+ table-layout: fixed;
|
|
|
+ word-break: break-all;
|
|
|
+ word-wrap: break-word;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td colspan="3" style="padding: 10px 0">
|
|
|
+ 承运人:{{ this.formData.driverNames }}</td
|
|
|
+ >
|
|
|
+ <td colspan="3" style="padding: 10px 0"> 装卸工:</td>
|
|
|
+ <td colspan="3" style="padding: 10px 0"> 签收人:</td>
|
|
|
+ <td colspan="3" style="padding: 10px 0">
|
|
|
+ 制单人:{{ this.formData.markerName }}</td
|
|
|
+ >
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td colspan="8" style="padding: 10px 0"
|
|
|
+ >物流服务评价:<el-checkbox v-model="checked">满意</el-checkbox
|
|
|
+ ><el-checkbox v-model="checked">不满意</el-checkbox></td
|
|
|
+ >
|
|
|
+ <td colspan="4" style="padding: 10px 0"
|
|
|
+ >打印时间:{{ getNowFormatDate() }}</td
|
|
|
+ >
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td colspan="2" style="padding: 10px 0"> (白)记账联 </td>
|
|
|
+ <td colspan="2" style="padding: 10px 0"> (红)客户留存联 </td>
|
|
|
+ <td colspan="2" style="padding: 10px 0"> (蓝)结算联 </td>
|
|
|
+ <td colspan="2" style="padding: 10px 0"> (绿)运费联 </td>
|
|
|
+ <td colspan="2" style="padding: 10px 0"> (黄)装卸联 </td>
|
|
|
+ <td colspan="2" style="padding: 10px 0"> (白)出门联 </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <!-- <div class="person">
|
|
|
+ <div> 承运人:</div>
|
|
|
+ <div> 装卸工:</div>
|
|
|
+ <div> 签收人:</div>
|
|
|
+ <div> 制单人:</div>
|
|
|
+ </div> -->
|
|
|
+ <!-- <div class="person">
|
|
|
+ <div
|
|
|
+ ><span>物流服务评价:</span
|
|
|
+ ><el-checkbox v-model="checked1">满意</el-checkbox>
|
|
|
+ <el-checkbox v-model="checked1">不满意</el-checkbox></div
|
|
|
+ >
|
|
|
+ <div> 打印时间:</div>
|
|
|
+ </div> -->
|
|
|
+ <!-- <div class="person">
|
|
|
+ <div> (白)记账联 </div>
|
|
|
+ <div> (红)客户留存联 </div>
|
|
|
+ <div> (蓝)结算联 </div>
|
|
|
+ <div> (绿)运费联 </div>
|
|
|
+ <div> (黄)装卸联 </div>
|
|
|
+ <div> (白)出门联 </div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="print">打印预览</el-button>
|
|
|
+ <el-button @click="close">关闭</el-button>
|
|
|
+ </div>
|
|
|
+ </ele-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { mapGetters } from 'vuex';
|
|
|
+ import JsBarcode from 'jsbarcode';
|
|
|
+ import storageApi from '@/api/warehouseManagement';
|
|
|
+ export default {
|
|
|
+ name: 'print',
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['user'])
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ checked: '',
|
|
|
+ QRvisible: false,
|
|
|
+ codeList: [],
|
|
|
+ formData: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ open(id) {
|
|
|
+ console.log(this.user);
|
|
|
+ // 制单人
|
|
|
+ storageApi.getInboundDetailsById(id).then((res) => {
|
|
|
+ this.formData = res;
|
|
|
+ this.formData.markerName = this.user.info.name;
|
|
|
+ this.codeList = res.outInDetailList;
|
|
|
+ this.codeList.reduce((total, item) => {
|
|
|
+ return (total += item.measureQuantity);
|
|
|
+ }, 0);
|
|
|
+ storageApi.getBySendRecordNo(res.sourceBizNo).then((data) => {
|
|
|
+ console.log('res---------', data);
|
|
|
+ if (JSON.stringify(data) != '{}') {
|
|
|
+ this.formData.projectName = data.saleOrder?.projectName;
|
|
|
+ this.formData.carNo = data.carNo; // 车牌号
|
|
|
+ this.formData.linkName = data.linkName; // 客户名称
|
|
|
+ this.formData.linkPhone = data.linkPhone; // 客户电话
|
|
|
+ this.formData.driverNames = data.logisticTrakListNoteVOList
|
|
|
+ .map((item) => item.driverName)
|
|
|
+ .join(','); // 承运人
|
|
|
+ this.codeList = this.codeList.map((item) => {
|
|
|
+ let obj = data.productList.filter(
|
|
|
+ (proItem) => proItem.productId == item.categoryId
|
|
|
+ )[0];
|
|
|
+ console.log('obj---------', obj);
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ packagingDensity: obj.extField.packagingDensity,
|
|
|
+ packagingStrength: obj.extField.packagingStrength
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.QRvisible = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ JsBarcode('#print', '12345678', {
|
|
|
+ format: 'CODE39', //选择要使用的条形码类型
|
|
|
+ width: 1, //设置条之间的宽度
|
|
|
+ height: 50, //高度
|
|
|
+ displayValue: false, //是否在条形码下方显示文字
|
|
|
+ text: '', //覆盖显示的文本
|
|
|
+ fontOptions: 'bold italic', //使文字加粗体或变斜体
|
|
|
+ font: 'fantasy', //设置文本的字体
|
|
|
+ textAlign: 'right', //设置文本的水平对齐方式
|
|
|
+ textPosition: 'top', //设置文本的垂直位置
|
|
|
+ textMargin: 1, //设置条形码和文本之间的间距
|
|
|
+ fontSize: 15, //设置文本的大小
|
|
|
+ background: '#fff', //设置条形码的背景
|
|
|
+ lineColor: '#000', //设置条和文本的颜色。
|
|
|
+ margin: 2 //设置条形码周围的空白边距
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.QRvisible = false;
|
|
|
+ },
|
|
|
+ //获取当前日期函数
|
|
|
+ getNowFormatDate() {
|
|
|
+ let date = new Date(),
|
|
|
+ obj = {
|
|
|
+ year: date.getFullYear(), //获取完整的年份(4位)
|
|
|
+ month: date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
|
|
|
+ strDate: date.getDate(), // 获取当前日(1-31)
|
|
|
+ week: '星期' + '日一二三四五六'.charAt(date.getDay()), //获取当前星期几(0 ~ 6,0代表星期天)
|
|
|
+ hour: date.getHours(), //获取当前小时(0 ~ 23)
|
|
|
+ minute: date.getMinutes(), //获取当前分钟(0 ~ 59)
|
|
|
+ second: date.getSeconds() //获取当前秒数(0 ~ 59)
|
|
|
+ };
|
|
|
+ Object.keys(obj).forEach((key) => {
|
|
|
+ if (obj[key] < 10) obj[key] = `0${obj[key]}`;
|
|
|
+ });
|
|
|
+ // return `${obj.year}年${obj.month}月${obj.strDate}日 ${obj.hour}:${obj.minute}:${obj.second}`;
|
|
|
+ return `${obj.year}-${obj.month}-${obj.strDate}`;
|
|
|
+ },
|
|
|
+ print() {
|
|
|
+ const printSection = document.getElementById('printSection');
|
|
|
+ // 创建打印任务
|
|
|
+ const printWindow = window.open('', '_blank');
|
|
|
+ printWindow.document.open();
|
|
|
+ printWindow.document.write('<html><head><title>打印预览</title>');
|
|
|
+ printWindow.document.write(
|
|
|
+ '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
|
|
|
+ );
|
|
|
+ printWindow.document.write('</head><body>');
|
|
|
+ printWindow.document.write(printSection.innerHTML);
|
|
|
+ printWindow.document.write('</body></html>');
|
|
|
+ printWindow.document.close();
|
|
|
+ printWindow.onload = function () {
|
|
|
+ printWindow.print();
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ #printSection {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ .table_box {
|
|
|
+ width: 70%;
|
|
|
+ table-layout: fixed;
|
|
|
+ word-break: break-all;
|
|
|
+ word-wrap: break-word;
|
|
|
+ }
|
|
|
+ th,
|
|
|
+ td {
|
|
|
+ padding: 20px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .barCode {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ .person {
|
|
|
+ width: 70%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ > div {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|