打印修改

src/views/storage/stock/print-stock-info.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="mainContentBox">
     <div class="btns">
-      <el-button type="primary" @click="dialog.visible = true">打印预览</el-button>
+      <el-button type="primary" @click="dialog.visible = true"
+        >打印预览</el-button
+      >
     </div>
     <el-table ref="tableRef" :data="clickObjs" style="height: 70vh" border>
       <el-table-column label="物料编码" prop="materialCode" />
       <el-table-column label="物料名称" prop="materialName" />
       <el-table-column label="物料型号" prop="materialModel" />
-      <el-table-column label="批次号" prop="batchCode" >
+      <el-table-column label="批次号" prop="batchCode">
         <template #default="{ row }">
           <el-input v-model="row.batchCode" />
         </template>
@@ -19,38 +21,120 @@
       </el-table-column>
     </el-table>
     <el-dialog
-        v-model="dialog.visible"
-        :title="dialog.title"
-        width="1250px"
-        @close="dialog.visible = false"
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="1250px"
+      @close="dialog.visible = false"
     >
-      <div style="display: flex;flex-wrap: wrap;" ref="toPrintRef">
-        <div v-for="item of clickObjs" style="width: 238px;overflow: hidden;font-size:10px;">
-          <div style="float: left;padding-bottom: 30px">
-            <vue-qrcode  :value="item.code"  size="45" error-level="H"></vue-qrcode>
+      <div style="display: flex; flex-wrap: wrap" ref="toPrintRef">
+        <div
+          v-for="item of clickObjs"
+          style="width: 238px; overflow: hidden; font-size: 10px"
+        >
+          <div style="float: left; padding-bottom: 30px">
+            <vue-qrcode
+              :value="item.code"
+              size="45"
+              error-level="H"
+            ></vue-qrcode>
             <div>
-              <el-text>物料编码:</el-text><el-text>{{item.materialCode}}</el-text>
+              <el-text>物料编码:</el-text
+              ><el-text>{{ item.materialCode }}</el-text>
             </div>
             <div>
-              <el-text>物料名称:</el-text><el-text>{{item.materialName}}</el-text>
+              <el-text>物料名称:</el-text
+              ><el-text>{{ item.materialName }}</el-text>
             </div>
             <div>
-              <el-text>物料型号:</el-text><el-text>{{item.materialModel}}</el-text>
+              <el-text>物料型号:</el-text
+              ><el-text>{{ item.materialModel }}</el-text>
             </div>
             <div>
-              <el-text>批次号:</el-text><el-text>{{item.batchCode}}</el-text>
+              <el-text>批次号:</el-text><el-text>{{ item.batchCode }}</el-text>
             </div>
             <div>
-              <el-text>数量:</el-text><el-text>{{item.num}}</el-text>
+              <el-text>数量:</el-text><el-text>{{ item.num }}</el-text>
             </div>
           </div>
-
         </div>
       </div>
+      <div class="printViewBox">
+        <div ref="toPrintRef" id="printScreen">
+          <template v-for="(item, index) of clickObjs" :key="index + item">
+            <div class="printItem">
+              <div class="leftItem">
+                <div>
+                  <div class="lable">物料编码:</div>
+                  <template v-if="item.materialCode.length > 23">
+                    <div class="value">
+                      {{ item.materialCode.slice(0, 23) }}
+                    </div>
+                    <div class="value">
+                      {{
+                        item.materialCode.length > 47
+                          ? item.materialCode.slice(24, 44) + "..."
+                          : item.materialCode.slice(23)
+                      }}
+                    </div>
+                  </template>
+                </div>
+                <div>
+                  <div class="lable">物料名称:</div>
+
+                  <template v-if="item.materialName.length > 23">
+                    <div class="value">
+                      {{ item.materialName.slice(0, 23) }}
+                    </div>
+                    <div class="value">
+                      {{
+                        item.materialName.length > 47
+                          ? item.materialName.slice(24, 44) + "..."
+                          : item.materialName.slice(23)
+                      }}
+                    </div>
+                  </template>
+                </div>
+                <div>
+                  <div class="lable">物料型号:</div>
+
+                  <template v-if="item.materialModel.length > 23">
+                    <div class="value">
+                      {{ item.materialModel.slice(0, 23) }}
+                    </div>
+                    <div class="value">
+                      {{
+                        item.materialModel.length > 47
+                          ? item.materialModel.slice(24, 44) + "..."
+                          : item.materialModel.slice(23)
+                      }}
+                    </div>
+                  </template>
+                </div>
+                <div>
+                  <div class="lable">批次号:</div>
+                  <div class="value">{{ item.batchCode }}</div>
+                </div>
+                <div>
+                  <div class="lable">数量:</div>
+                  <div class="value">{{ item.num }}</div>
+                </div>
+              </div>
 
+              <div class="rightItem">
+                <vue-qrcode
+                  :value="item.code"
+                  size="40"
+                  error-level="H"
+                  :margin="0"
+                ></vue-qrcode>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
       <div class="dialog-footer" align="center">
         <el-button @click="dialog.visible = false">取消</el-button>
-        <el-button type="primary" @click="printPage">打印</el-button>
+        <el-button type="primary" v-print="'#printScreen'">打印</el-button>
       </div>
     </el-dialog>
   </div>
@@ -67,29 +151,89 @@ const props = defineProps({
   },
 });
 
-const clickObjs = ref([])
+const clickObjs = ref([]);
 const toPrintRef = ref(null);
-const printPage = ()=>{
+const printPage = () => {
   html2CanvasPrint(toPrintRef.value);
-}
+};
 const tableRef = ref(null);
 const dialog = reactive({
   title: "打印预览",
   visible: false,
 });
 const handleData = (row) => {
-  clickObjs.value = []
-  row.forEach(item=>{
-    let code = "BM" + item.materialNo + ";MC" + item.materialName + ";PH"+ item.batchCode + ";SL"+ item.num + ";"
-    clickObjs.value.push({code: code,materialCode: item.materialNo,materialName: item.materialName,materialModel: item.spec,num: item.num,batchCode: item.batchCode})
-  })
-}
+  clickObjs.value = [];
+  row.forEach((item) => {
+    let code =
+      "BM" +
+      item.materialNo +
+      ";MC" +
+      item.materialName +
+      ";PH" +
+      item.batchCode +
+      ";SL" +
+      item.num +
+      ";";
+    clickObjs.value.push({
+      code: code,
+      materialCode: item.materialNo,
+      materialName: item.materialName,
+      materialModel: item.spec,
+      num: item.num,
+      batchCode: item.batchCode,
+    });
+  });
+};
 onMounted(() => {
-  handleData(props.excelRow)
-});
-watch(()=>props.excelRow, () => {
-  handleData(props.excelRow)
-},{
-  deep:true
+  handleData(props.excelRow);
 });
+watch(
+  () => props.excelRow,
+  () => {
+    handleData(props.excelRow);
+  },
+  {
+    deep: true,
+  }
+);
 </script>
+<style>
+.printViewBox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: none;
+}
+#printScreen {
+  width: 80mm;
+  .printItem {
+    padding: 0 1mm;
+    width: 80mm !important;
+    height: 60mm !important;
+    display: flex;
+    justify-content: space-between;
+    font-size: 2.2mm;
+    .leftItem {
+      width: 31mm;
+      height: 60mm !important;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      .lable {
+        font-weight: 500;
+        color: black;
+      }
+      .value {
+        font-weight: 500;
+        color: black;
+      }
+    }
+    .rightItem {
+      width: 45mm;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+</style>