修改货架打印

src/views/basicdata/warehouse/goodsShelf/basicdataGoodsShelf.vue

@@ -3,33 +3,33 @@
     <div class="avue-crud">
       <el-row v-if="!search">
         <!-- 查询模块 -->
-        <el-form :inline="true" :model="query" style='width:100%'>
+        <el-form :inline="true" :model="query" style="width: 100%">
           <!-- 查询按钮 -->
-          <el-form-item class='el-lo'>
-            <el-row style='width:100%'>
-              <el-col class='el-ls'>
+          <el-form-item class="el-lo">
+            <el-row style="width: 100%">
+              <el-col class="el-ls">
                 <div>
-                <el-form-item label="货区:" prop="info">
-                  <!--                  <el-cascader :options="optioner"   :show-all-levels="false" clearable >-->
-                  <el-cascader
-                    :options="optioner"
-                    style="width: 80%"
-                    v-model="query.goodsAreaInfo"
-                    placeholder="请选择货区"
-                    :show-all-levels="false"
-                    clearable
-                  />
-                  <!--                  </el-cascader>-->
-                </el-form-item>
-                <el-form-item label="货架名称" prop="info">
-                  <el-input v-model="query.goodsShelfName" placeholder="请输入货架名称" />
-                </el-form-item>
-              </div>
+                  <el-form-item label="货区:" prop="info">
+                    <!--                  <el-cascader :options="optioner"   :show-all-levels="false" clearable >-->
+                    <el-cascader
+                      :options="optioner"
+                      style="width: 80%"
+                      v-model="query.goodsAreaInfo"
+                      placeholder="请选择货区"
+                      :show-all-levels="false"
+                      clearable
+                    />
+                    <!--                  </el-cascader>-->
+                  </el-form-item>
+                  <el-form-item label="货架名称" prop="info">
+                    <el-input v-model="query.goodsShelfName" placeholder="请输入货架名称" />
+                  </el-form-item>
+                </div>
                 <div>
-                <el-button type="primary" icon="el-icon-search" @click="searchChange"
-                  >搜 索</el-button
-                >
-                <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
+                  <el-button type="primary" icon="el-icon-search" @click="searchChange"
+                    >搜 索</el-button
+                  >
+                  <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
                 </div>
               </el-col>
             </el-row>
@@ -38,7 +38,7 @@
       </el-row>
       <el-row>
         <div class="avue-crud__header">
-         <!-- 头部左侧按钮模块 -->
+          <!-- 头部左侧按钮模块 -->
           <div class="avue-crud__left">
             <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新 增</el-button>
             <el-button type="danger" icon="el-icon-delete" @click="handleDelete" plain
@@ -338,7 +338,13 @@
         </template>
       </el-dialog>
 
-      <el-dialog title="二维码" :visible.sync="dialogVisible" width="600px" v-model="dialogVisible">
+      <el-dialog
+        title="二维码"
+        class="printDialog"
+        :visible.sync="dialogVisible"
+        width="600px"
+        v-model="dialogVisible"
+      >
         <div>
           <!--        <div v-for="(item,index) in qrCodeObj" class="pdf-dom">-->
           <!--          <el-divider></el-divider>-->
@@ -350,7 +356,7 @@
           <!--          </el-row>-->
           <!--        </div>-->
           <!--startprint1-->
-          <div v-html="html"></div>
+          <div class="printNode" v-html="html"></div>
           <!--endprint1-->
         </div>
         <span slot="footer" class="dialog-footer">
@@ -1357,23 +1363,29 @@ export default {
         this.$message.warning('请选择至少一条数据');
         return;
       }
-      getPrintTemplate(this.ids).then(res => {
-        let templateData = res.data.data;
-        // let templateData = "res.data.data";
-        console.log(templateData);
-        LODOP.PRINT_INITA('测试预览功能');
-        // LODOP.PRINT_INITA("测试预览功能");
-        //    LODOP.SET_PRINT_PAGESIZE(1, 0, 0, 'A4');
-        LODOP.SET_PRINT_MODE('WINDOW_DEFPRINTER', 'Deli DL-888T');
-        LODOP.SET_PRINT_PAGESIZE(2, '210mm', '50mm', '');
-        LODOP.SET_SHOW_MODE('LANDSCAPE_DEFROTATED', 1);
 
-        // // 设置打印后自动关闭
-        LODOP.SET_PRINT_MODE('WINDOW_DEFPAGESIZE', 1);
-        // // data就是一段html文本
-        LODOP.ADD_PRINT_HTM('0%', '0%', '100%', '100%', templateData);
-        LODOP.PREVIEW(); //预览(预览打印无脚标)
+      const nodeList = document.querySelectorAll('.printNode > div');
+
+      // getPrintTemplate(this.ids).then(res => {
+      // let templateData = res.data.data;
+      // let templateData = "res.data.data";
+      // console.log(templateData);
+      LODOP.PRINT_INITA('测试预览功能');
+      // LODOP.PRINT_INITA("测试预览功能");
+      //    LODOP.SET_PRINT_PAGESIZE(1, 0, 0, 'A4');
+      LODOP.SET_PRINT_MODE('WINDOW_DEFPRINTER', 'Deli DL-888T');
+      LODOP.SET_PRINT_PAGESIZE(2, '210mm', '50mm', '');
+      LODOP.SET_SHOW_MODE('LANDSCAPE_DEFROTATED', 1);
+
+      // // 设置打印后自动关闭
+      LODOP.SET_PRINT_MODE('WINDOW_DEFPAGESIZE', 1);
+      // // data就是一段html文本
+      nodeList.forEach(val => {
+        LODOP.ADD_PRINT_HTM('0%', '0%', '100%', '100%', val.innerHTML);
+        LODOP.NewPage();
       });
+      LODOP.PREVIEW(); //预览(预览打印无脚标)
+      // });
     },
     rowDel(row) {
       this.$confirm('确定将选择数据删除?', {
@@ -1479,17 +1491,15 @@ export default {
   },
 };
 </script>
-<style scoped lang='scss'>
+<style scoped lang="scss">
 /*.el-cascader__dropdown .el-cascader-menu:first-child .el-cascader-node label{*/
 /*  display:none;*/
 /*}*/
-.el-lo{
-  width:100%;
-
+.el-lo {
+  width: 100%;
 }
-.el-ls{
-      display: flex;
-    justify-content: space-between;
+.el-ls {
+  display: flex;
+  justify-content: space-between;
 }
-
 </style>