|
|
@@ -1,79 +1,116 @@
|
|
|
<template>
|
|
|
<div class="bg">
|
|
|
<el-dialog
|
|
|
- width="26cm"
|
|
|
- height="12cm"
|
|
|
+ width="21cm"
|
|
|
+ height="10cm"
|
|
|
:modal-append-to-body="false"
|
|
|
title="物料标签"
|
|
|
:visible.sync="scanVisible"
|
|
|
>
|
|
|
<!-- 表单是否显示 -->
|
|
|
- <div style="height: 500px; width: 100%">
|
|
|
+ <div class="demo">
|
|
|
<div ref="qrcode" id="box">
|
|
|
- <vue-easy-print tableShow ref="easyPrint" :onePageRow="onePageRow">
|
|
|
- <div v-for="(item1, index1) in list" :key="index1" class="box-content">
|
|
|
+ <vue-easy-print
|
|
|
+ tableShow
|
|
|
+ ref="easyPrint"
|
|
|
+ :onePageRow="onePageRow"
|
|
|
+ :spaceRow="spaceRow"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(item1, index1) in list"
|
|
|
+ :key="index1"
|
|
|
+ class="box-content"
|
|
|
+ >
|
|
|
<div
|
|
|
- v-for="(item2, index2) in parseInt(item1.shu_liang_)||0"
|
|
|
- :key="index2" >
|
|
|
+ v-for="(item2, index2) in parseInt(item1.shu_liang_) || 0"
|
|
|
+ :key="index2"
|
|
|
+ style="display: inline-block"
|
|
|
+ >
|
|
|
<div class="tagBox">
|
|
|
<div class="logo">
|
|
|
- <img style="width: 90px; height: 20px" src="./ming.jpg" alt="" />
|
|
|
+ <img
|
|
|
+ style="width: 90px; height: 20px"
|
|
|
+ src="./ming.jpg"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div class="lh">
|
|
|
- <div>物料名称：{{ item1.wu_liao_ming_chen }}{{ index2 }}</div>
|
|
|
- <div></div>
|
|
|
+ <div class="la">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ text-align: left;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span> 物料名称：</span>
|
|
|
+ <p style="width: 150px; margin: 0px">
|
|
|
+ {{ item1.wu_liao_ming_chen }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="la">
|
|
|
<div class="lh">
|
|
|
- <div style="white-space: nowrap">
|
|
|
- 物料代码：{{ item1.wu_liao_bian_ma_ }}
|
|
|
- </div>
|
|
|
- <div></div>
|
|
|
+ <div style="white-space: nowrap">物料代码：</div>
|
|
|
+ <div>{{ item1.wu_liao_bian_ma_ }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="la">
|
|
|
- <div class="lh">{{ item1.gui_ge_xing_hao_ }}</div>
|
|
|
+ <div class="lh">
|
|
|
+ <div>规格：</div>
|
|
|
+ <div>{{ item1.gui_ge_xing_hao_ }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="la">
|
|
|
- <div class="lh">
|
|
|
- <div>货号：</div>
|
|
|
- <div>{{ item1.huo_hao_ }}</div>
|
|
|
+ <div style="display: flex">
|
|
|
+ <div class="lh" style="display: flex;">
|
|
|
+ <div>货号:</div>
|
|
|
+ <div>{{ item1.huo_hao_ }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="lh" style="display: flex;margin-left:1px;">
|
|
|
+ <div>批号:</div>
|
|
|
+ <div>{{ item1.pi_hao_ }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="lh" style="margin-left: 2px">
|
|
|
- <div>批号：{{ item1.pi_hao_ }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="la">
|
|
|
+ <div style="display: flex">
|
|
|
+ <div class="lh">
|
|
|
+ <div>到库日期：</div>
|
|
|
+ <div>
|
|
|
+ {{ item1.wai_jian_ | timesfiltes(listtimes) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="lh" style="margin-left:1px;">
|
|
|
+ <div>有效期:</div>
|
|
|
+ <div>{{ item1.you_xiao_qi_ }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="la">
|
|
|
<div class="lh">
|
|
|
- <div>到库日期：{{ item1.wai_jian_ | timesfiltes(listtimes) }}</div>
|
|
|
+ <div>生产厂家：</div>
|
|
|
+ <div>{{ item1.sheng_chan_chang_ }}</div>
|
|
|
</div>
|
|
|
- <div class="lh" style="margin-left: 2px">
|
|
|
- <div>有效期:</div>
|
|
|
- <div>{{ item1.you_xiao_qi_ }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="lh">
|
|
|
- <div>生产厂家：</div>
|
|
|
- <div>{{ item1.sheng_chan_chang_ }}</div>
|
|
|
</div>
|
|
|
- <div class="lh">
|
|
|
- <div>状态</div>
|
|
|
- <div></div>
|
|
|
+ <div class="la">
|
|
|
+ <div class="lh">
|
|
|
+ <div>状态</div>
|
|
|
+ <!-- <div class="la" style="height: 40px"></div> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="lh" style="height: 40px">
|
|
|
- <div></div>
|
|
|
- <div></div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ style="page-break-after: always; display: block !important;height: 40px"
|
|
|
+ >
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- <p v-if="index2==6" style="page-break-after: always"></p> -->
|
|
|
</div>
|
|
|
-
|
|
|
</vue-easy-print>
|
|
|
</div>
|
|
|
</div>
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
- <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
|
|
|
<el-button type="primary" @click="printDemo">打印标签</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
@@ -103,6 +140,10 @@ export default {
|
|
|
type: Boolean,
|
|
|
default: true,
|
|
|
},
|
|
|
+ spaceRow: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
scanVisible: {
|
|
|
type: Boolean,
|
|
|
default: false,
|
|
|
@@ -132,6 +173,12 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ fenyefiltes: function (fenye, index) {
|
|
|
+ console.log(fenye);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ update() {
|
|
|
+ console.log("数据变动");
|
|
|
},
|
|
|
created() {
|
|
|
this.getInit();
|
|
|
@@ -176,42 +223,52 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-//.bg {
|
|
|
-//}
|
|
|
-// @media print{
|
|
|
-// body {
|
|
|
-// height: auto !important;
|
|
|
-// }
|
|
|
-// }
|
|
|
+.demo {
|
|
|
+ height: 300px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
.logo {
|
|
|
position: absolute;
|
|
|
top: -32px;
|
|
|
left: 0;
|
|
|
}
|
|
|
.box-content {
|
|
|
+ // display: flex;
|
|
|
+ // float: left;
|
|
|
+ // flex-wrap: wrap;
|
|
|
+}
|
|
|
+.content {
|
|
|
display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
.tagBox {
|
|
|
- width: 250px;
|
|
|
- height: 180px;
|
|
|
+ width: 240px;
|
|
|
+ height: 150px;
|
|
|
position: relative;
|
|
|
border: 1px solid #000000;
|
|
|
padding: 2px;
|
|
|
- display: -webkit-box;
|
|
|
- display: -ms-flexbox;
|
|
|
- display: flex;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-box-direction: normal;
|
|
|
- -ms-flex-direction: column;
|
|
|
- flex-direction: column;
|
|
|
- margin: 55px 4px 40px 2px;
|
|
|
+ // float: left;
|
|
|
+ display: inline-block;
|
|
|
+ // display: -webkit-box;
|
|
|
+ // display: -ms-flexbox;
|
|
|
+ // display: flex;
|
|
|
+ // -webkit-box-orient: vertical;
|
|
|
+ // -webkit-box-direction: normal;
|
|
|
+ // -ms-flex-direction: column;
|
|
|
+ // flex-direction: column;
|
|
|
+ margin: 50px 4px 44px 3px;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
|
|
|
-.la {
|
|
|
- display: flex;
|
|
|
+.la,
|
|
|
+.logo {
|
|
|
+ // display: flex;
|
|
|
align-items: center;
|
|
|
+ font-size: 8px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
|
|
|
.lh {
|
zjy