fix：标签批量打印bug修改

src/views/system/jbdScan/goods/fenzhuangtag.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="bg">
     <el-dialog
-      width="18cm"
-      height="30cm"
+      width="21cm"
+      height="10cm"
       :modal-append-to-body="false"
       title="物料标签"
       :visible.sync="scanVisible"
@@ -11,16 +11,39 @@
       <div style="height: 500px; width: 100%">
         <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" >
+            <div
+              v-for="(item1, index1) in list"
+              :key="index1"
+              class="box-content"
+              
+            >
               <div
                 v-for="(item2, index2) in parseInt(item1.shu_liang_)"
-                :key="index2"               >
-                <div class="tagBox" >
+                :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.fen_zhuang_wu_lia }}{{ index2 }}</div>
+                  <div class="la">
+                    <div
+                      style="
+                        display: flex;
+                        justify-content: flex-start;
+                        text-align: left;
+                      "
+                    >
+                      <span> 物料名称：</span>
+                      <p style="width: 230px; margin: 0px">
+                        {{ item1.fen_zhuang_wu_lia }}
+                      </p>
+                      <!-- 物料名称：{{ item1.fen_zhuang_wu_lia }}{{ index2 }} -->
+                    </div>
                     <div></div>
                   </div>
                   <div class="la">
@@ -32,43 +55,64 @@
                     </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">
+                        <div>货号：</div>
+                        <div>{{ item1.huo_hao_ }}</div>
+                      </div>
+                      <div class="lh" style="margin-left: 2px">
+                        <div>批号：</div>
+                        <div>{{ item1.fen_zhuang_pi_hao }}</div>
+                      </div>
                     </div>
-                   <div class="lh" style="margin-left: 2px">
-                      <div>批号：{{ item1.fen_zhuang_pi_hao }}</div>
+                  </div>
+                  <div class="la">
+                    <div style="display: flex">
+                      <div class="lh">
+                        <div>分装日期：</div>
+                        <div>
+                          {{ item1.parent_id_ | timesfiltes(listtimes) }}
+                        </div>
+                      </div>
+                      <div class="lh" style="margin-left: 2px">
+                        <div>有效期:</div>
+                        <div>{{ item1.you_xiao_qi_zhi_ }}</div>
+                      </div>
                     </div>
                   </div>
                   <div class="la">
                     <div class="lh">
-                      <div>分装日期：{{ item1.parent_id_ | timesfiltes(listtimes) }}</div>
-                    </div>
-                    <div class="lh" style="margin-left: 2px">
-                      <div>有效期:</div>
-                      <div>{{ item1.you_xiao_qi_zhi_ }}</div>
+                      <div>含量浓度：</div>
+                      <div>{{ item1.han_liang_nong_du }}</div>
                     </div>
                   </div>
-                  <div class="lh">
-                    <div>含量浓度：</div>
-                    <div>{{ item1.han_liang_nong_du }}</div>
-                  </div>
-                  <div class="lh">
-                    <div>状态</div>
-                    <div></div>
+                  <div class="la">
+                    <div class="lh">
+                      <div>状态</div>
+                    </div>
+                    <!-- <div></div> -->
                   </div>
-                  <div class="lh" style="height: 40px">
+                  <div
+                    style="
+                      page-break-after: always;
+                      display: block !important;
+                      height: 30px;
+                    "
+                  ></div>
+                  <!-- <div class="lh" style="height: 40px">
                     <div></div>
                     <div></div>
-                  </div>
+                  </div> -->
                 </div>
               </div>
-               <!-- <p v-if="index2==6" style="page-break-after: always"></p> -->
+              <!-- <p v-if="index2==6" style="page-break-after: always"></p> -->
             </div>
-           
           </vue-easy-print>
         </div>
       </div>
@@ -125,7 +169,7 @@ export default {
   filters: {
     timesfiltes: function (value, arr) {
       for (let i = 0; i < arr.length; i++) {
-        console.log(arr[i].id_==value)
+        console.log(arr[i].id_ == value);
         if (arr[i].id_ == value) {
           console.log(arr[i].fen_zhuang_ri_qi_);
           return arr[i].fen_zhuang_ri_qi_;
@@ -188,30 +232,43 @@ export default {
   top: -32px;
   left: 0;
 }
-.box-content {
+// .box-content {
+//   // display: flex;
+//   // flex-wrap: wrap;
+//     display: flex;
+//   justify-content: flex-start;
+//   text-align: left;
+// }
+.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;
+  // display: -webkit-box;
+  // display: -ms-flexbox;
+  display: inline-block;
+  // display: flex;
+  // -webkit-box-orient: vertical;
+  // -webkit-box-direction: normal;
+  // -ms-flex-direction: column;
+  // flex-direction: column;
+  margin: 50px 4px 44px 2px;
   background-color: #fff;
 }
 
-.la {
-  display: flex;
+.la,
+.logo {
+  // display: flex;
   align-items: center;
+  font-size: 8px;
+  display: inline-block;
+  width: 100%;
 }
 
 .lh {

src/views/system/jbdScan/goods/jishutag.vue

@@ -1,23 +1,28 @@
 <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 style="height: 500px; width: 100%">
         <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">
+            <div
+              v-for="(item1, index1) in list"
+              :key="index1"
+              class="box-content"
+            >
               <div
-                v-for="(item2, index2) in parseInt(item1.dao_huo_shu_liang)||0"
+                v-for="(item2, index2) in parseInt(item1.dao_huo_shu_liang) ||
+                0"
                 :key="index2"
-               
+                style="display: inline-block"
               >
-               <!-- style="page-break-after: always" -->
+                <!-- style="page-break-after: always" -->
                 <div class="tagBox">
                   <div class="logo">
                     <img
@@ -26,50 +31,78 @@
                       alt=""
                     />
                   </div>
-                  <div class="lh" style="white-space: nowrap">
-                    <div>物料名称：{{ item1.wu_liao_ming_chen }}</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_dai_ma_ }}
-                      </div>
-                      <div></div>
+                      <div style="white-space: nowrap">物料代码：</div>
+                      <div>{{ item1.wu_liao_dai_ma_ }}</div>
                     </div>
                   </div>
                   <div class="la">
-                    <div class="lh">{{ item1.gui_ge_ }}</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:2px;">
+                        <div>批号：</div>
+                        <div>{{ item1.pi_hao_ }}</div>
+                      </div>
                     </div>
-                    <div class="lh" style="margin-left: 10px">
-                      <div>批号：{{ item1.pi_hao_ }}</div>
+                  </div>
+
+                  <div class="la">
+                    <div style="display: flex">
+                      <div class="lh">
+                        <div>到库日期：</div>
+                        <div>
+                          {{ item1.dao_ku_ri_qi_ }}
+                        </div>
+                      </div>
+                      <div class="lh" style="margin-left:2px;">
+                        <div>有效期:</div>
+                        <div>{{ item1.you_xiao_qi_ }}</div>
+                      </div>
                     </div>
                   </div>
                   <div class="la">
                     <div class="lh">
-                      <div>到库日期：{{ item1.dao_ku_ri_qi_ }}</div>
-                    </div>
-                    <div class="lh" style="margin-left: 10px">
-                      <div>有效期：{{ item1.you_xiao_qi_ }}</div>
+                      <div>生产厂家：</div>
+                      <div>{{ item1.sheng_chan_chang_ }}</div>
                     </div>
                   </div>
-                  <div class="lh">
-                    <div>生产厂家：</div>
-                    <div>{{ item1.chang_jia_ }}</div>
-                  </div>
-                  <div class="lh">
-                    <div>状态</div>
-                    <div></div>
-                  </div>
-                  <div class="lh" style="height: 40px">
-                    <div></div>
-                    <div></div>
+                  <div class="la">
+                    <div class="lh">
+                      <div>状态</div>
+                      <!-- <div class="la" style="height: 40px"></div> -->
+                    </div>
                   </div>
+                  <div
+                    style="
+                      page-break-after: always;
+                      display: block !important;
+                      height: 30px;
+                    "
+                  ></div>
                 </div>
               </div>
             </div>
@@ -165,38 +198,52 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-//.bg {
-//}
+.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 {

src/views/system/jbdScan/goods/tag.vue

@@ -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 {