From e8ae17c0fbe5dc0a5424905c738004b143d9ce2c Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期四, 22 八月 2024 15:04:14 +0800
Subject: [PATCH] 二维码打印排版

---
 src/views/hazardousChemicals/electronicWarehouse/components/proDetail.vue |   24 +++++++-
 src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue    |   36 +++++++++---
 src/views/hazardousChemicals/warehouseManage/components/rawDetail.vue     |   23 ++++++-
 src/views/hazardousChemicals/overdueWarning/index.vue                     |    8 ++
 src/views/hazardousChemicals/warehouseManage/components/proDetail.vue     |   23 ++++++-
 src/views/hazardousChemicals/electronicWarehouse/components/rawDetail.vue |   24 +++++++-
 src/views/hazardousChemicals/warehouseManage/components/printCode.vue     |   31 +++++++--
 7 files changed, 138 insertions(+), 31 deletions(-)

diff --git a/src/views/hazardousChemicals/electronicWarehouse/components/proDetail.vue b/src/views/hazardousChemicals/electronicWarehouse/components/proDetail.vue
index cb696d6..1e2249c 100644
--- a/src/views/hazardousChemicals/electronicWarehouse/components/proDetail.vue
+++ b/src/views/hazardousChemicals/electronicWarehouse/components/proDetail.vue
@@ -37,7 +37,7 @@
       </div>
     </div>
     <!-- 表格数据 -->
-    <el-table v-loading="loading" :data="data.dataList" :border="true">
+    <el-table v-loading="loading" :data="data.dataList" :border="true" :cell-style="cellStyle">
       <el-table-column label="序号" type="index" align="center" width="80" />
       <el-table-column label="品名" prop="productBasic.name" align="center"  />
       <el-table-column label="产品编号" prop="productBasic.productSn" align="center" />
@@ -59,8 +59,7 @@
       </el-table-column>
       <el-table-column label="在库余量" prop="remaining" align="center" >
         <template #default="scope">
-          <span v-if="scope.row.state === 0">{{scope.row.remaining}}{{scope.row.productBasic.unit}}</span>
-          <span v-else>—</span>
+          <span >{{scope.row.remaining}}{{scope.row.productBasic.unit}}</span>
         </template>
       </el-table-column>
       <el-table-column label="所在仓库" prop="warehouseName" align="center" />
@@ -211,6 +210,25 @@
   })
 
 }
+
+
+const cellStyle = ({ row, column,rowIndex, columnIndex }) => {
+  let arr = []
+  if (data.dataList !== null) {
+    data.dataList.filter((item, index) => {
+      arr.push(item.basicId)
+    })
+  }
+  for (let i = 0; i <= arr.length; i++) {
+    if (arr[i] == row.basicId) {
+      if(row.remaining < row.productBasic.metering){
+        if (columnIndex === 11 || columnIndex === 10){
+          return { color:' red' }
+        }
+      }
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/hazardousChemicals/electronicWarehouse/components/rawDetail.vue b/src/views/hazardousChemicals/electronicWarehouse/components/rawDetail.vue
index 6756fd2..2c88aab 100644
--- a/src/views/hazardousChemicals/electronicWarehouse/components/rawDetail.vue
+++ b/src/views/hazardousChemicals/electronicWarehouse/components/rawDetail.vue
@@ -37,7 +37,7 @@
       </div>
     </div>
     <!-- 表格数据 -->
-    <el-table v-loading="loading" :data="data.dataList" :border="true">
+    <el-table v-loading="loading" :data="data.dataList" :border="true" :cell-style="cellStyle">
       <el-table-column label="序号" type="index" align="center" width="80" />
       <el-table-column label="品名" prop="hazmatBasic.name" align="center"  />
       <el-table-column label="产品编号" prop="hazmatBasic.productSn" align="center" />
@@ -59,8 +59,8 @@
       </el-table-column>
       <el-table-column label="在库余量" prop="remaining" align="center" >
         <template #default="scope">
-          <span v-if="scope.row.state === 0 || scope.row.state === 1">{{scope.row.remaining}}{{scope.row.hazmatBasic.unit}}</span>
-          <span v-else>—</span>
+          <span>{{scope.row.remaining}}{{scope.row.hazmatBasic.unit}}</span>
+
         </template>
       </el-table-column>
       <el-table-column label="所在仓库" prop="warehouseName" align="center" />
@@ -219,6 +219,24 @@
   dialogVisible.value = false
 }
 
+const cellStyle = ({ row, column,rowIndex, columnIndex }) => {
+  let arr = []
+  if (data.dataList !== null) {
+    data.dataList.filter((item, index) => {
+      arr.push(item.basicId)
+    })
+  }
+  for (let i = 0; i <= arr.length; i++) {
+    if (arr[i] == row.basicId) {
+      if(row.remaining < row.hazmatBasic.metering){
+        if (columnIndex === 11 || columnIndex === 10){
+          return { color:' red' }
+        }
+      }
+    }
+  }
+};
+
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue b/src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue
index bea1c50..a8f124d 100644
--- a/src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue
+++ b/src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue
@@ -12,12 +12,19 @@
       </div>
       <el-card style="max-width: 480px">
         <div :id="state.form.code">
-          <div style="display: flex;flex-direction: column;align-items: center;">
-            <span style="font-size:14px;margin-top:10px;">{{title}}</span>
-            <vue-qr :size="80" :margin="0" :auto-color="true" :dot-scale="1" :text="state.form.code" style="margin: 10px 0 5px 0"></vue-qr>
-            <span style="font-size:10px;margin-top:5px;">{{state.form.code}}</span>
+          <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
+            <div style="font-size:14px;margin-bottom: 2px" id="codeTitle">{{title}}</div>
+            <vue-qr :size="100" :correctLevel="3" colorDark="black" :margin="0" :auto-color="true"  :text="state.form.code"></vue-qr>
+            <div style="font-size:10px;margin-top: 2px">{{state.form.code}}</div>
           </div>
         </div>
+<!--        <div :id="state.form.code">-->
+<!--          <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">-->
+<!--            <span style="font-size:14px;margin-bottom: 2px">{{title}}</span>-->
+<!--            <vue-qr :size="100" :correctLevel="3" colorDark="black" :margin="0" :auto-color="true"  :text="state.form.code" ></vue-qr>-->
+<!--            <span style="font-size:10px;margin-top: 2px">{{state.form.code}}</span>-->
+<!--          </div>-->
+<!--        </div>-->
       </el-card>
     </el-dialog>
   </div>
@@ -39,9 +46,9 @@
 
 const openDialog = async (type,value) => {
   if(type == 'pro'){
-    title.value = value.productBasic.name + ' ' + '—' + ' '+ value.productBasic.productSn
+    title.value = value.productBasic.name   + '—'  + value.productBasic.productSn
   }else {
-    title.value = value.hazmatBasic.name + ' ' + '—' + ' '+ value.hazmatBasic.productSn
+    title.value = value.hazmatBasic.name  + '—' + value.hazmatBasic.productSn
   }
 
   state.form = JSON.parse(JSON.stringify(value));
@@ -57,7 +64,7 @@
   let qrCodes=''
   for(let index in data){
     console.log(index,'index')
-    qrCodes+=`<div class="my-list-col"><div class="centered-content">${document.getElementById(data[index].code).innerHTML}</div></div>`
+    qrCodes+=`<div class="my-list-col"><div class="centered-content changeFont">${document.getElementById(data[index].code).innerHTML}</div></div>`
   }
   const printContent=document.createElement('div')
   printContent.innerHTML=qrCodes
@@ -76,8 +83,9 @@
     <style>
       @media print {
         .page-break { page-break-after:always;} /* 定义分页符格式*/
-        .centered-content { text-align:center;} /* 居中对齐内容*/
+        .centered-content { display: flex;justify-content: center; align-items: center;height: 90vh;} /* 居中对齐内容*/
         @page { size:50mm 40mm;margin:0mm; }
+         .changeFont{font-size:12px;transform: scale(0.8);-webkit-transform: scale(0.85);}
       }
     </style>
   </head>
@@ -85,8 +93,18 @@
   </html>
   `)
   printDocument.close()
+  let ct = document.getElementById('codeTitle').offsetWidth
+  console.log('ct',ct)
   //在打印窗口中调用打印功能
-  console.log('printFrame.contentWindow.document.body.style',printFrame.contentWindow.document.body.style)
+  // debugger
+  // if(ct >= 180) {
+
+  // }else {
+  //
+  //   printFrame.contentWindow.document.body.style.zoom = '100%'
+  // }
+
+
   printFrame.contentWindow.print()
   //移除隐藏的iframe元素
   document.body.removeChild(printFrame)
diff --git a/src/views/hazardousChemicals/overdueWarning/index.vue b/src/views/hazardousChemicals/overdueWarning/index.vue
index 18e9967..7fa70a0 100644
--- a/src/views/hazardousChemicals/overdueWarning/index.vue
+++ b/src/views/hazardousChemicals/overdueWarning/index.vue
@@ -42,8 +42,12 @@
       <el-table-column label="生成时间" prop="createTime" align="center"  />
       <el-table-column label="领用人" prop="createName" align="center" />
       <el-table-column label="领用时间" prop="useTime" align="center" />
-      <el-table-column label="最后流转时间" prop="updateTime" align="center" />
-      <el-table-column label="处理时间" prop="handleTime" align="center" />
+<!--      <el-table-column label="最后流转时间" prop="updateTime" align="center" />-->
+      <el-table-column label="处理时间" prop="updateTime" align="center" >
+        <template #default="scope">
+          <span>{{scope.row.state === 1 ? scope.row.updateTime :'--'}}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="状态" prop="name" align="center" >
         <template #default="scope">
           <span>{{scope.row.state === 0 ? '未处理':'已处理'}}</span>
diff --git a/src/views/hazardousChemicals/warehouseManage/components/printCode.vue b/src/views/hazardousChemicals/warehouseManage/components/printCode.vue
index d52ee4f..14a6dcd 100644
--- a/src/views/hazardousChemicals/warehouseManage/components/printCode.vue
+++ b/src/views/hazardousChemicals/warehouseManage/components/printCode.vue
@@ -31,16 +31,17 @@
         <el-table-column align="center" >
           <template #default="scope">
             <div :id="scope.row.code">
-              <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">
-                <div style="font-size:14px;margin-top:10px;">{{scope.row.name}}—{{scope.row.productSn}}</div>
-                <vue-qr :size="80" :margin="0" :auto-color="true" :dot-scale="1" :text="scope.row.code" style="margin-top:10px;"></vue-qr>
-                <div style="font-size:10px;margin-top:10px;">{{scope.row.code}}</div>
+              <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
+                <div style="font-size:14px;margin-bottom: 2px" id="codeTitle">{{scope.row.name}}—{{scope.row.productSn}}</div>
+                <vue-qr :size="100" :correctLevel="3" colorDark="black" :margin="0" :auto-color="true"  :text="scope.row.code"></vue-qr>
+                <div style="font-size:10px;margin-top: 2px">{{scope.row.code}}</div>
               </div>
             </div>
           </template>
         </el-table-column>
       </el-table>
       <pagination
+          v-model:pager-count="pageCount"
           v-show="state.total > 0"
           :total="state.total"
           v-model:page="state.queryParams.pageNum"
@@ -60,6 +61,7 @@
 import {reactive, ref, toRefs} from 'vue'
 import VueQr from 'vue-qr/src/packages/vue-qr.vue'
 import {ElMessage} from "element-plus";
+import printJS from 'print-js';
 import {addWarehouse, checkName, editWarehouse} from "@/api/hazardousChemicals/warehouse";
 import {verifyPhone} from "@/utils/validate";
 import {checkBasicName} from "@/api/hazardousChemicals/basicInfo";
@@ -87,7 +89,7 @@
   chooseList: []
 
 })
-
+const pageCount = ref(3)
 const originalList = ref([])
 const openDialog = async (type,value) => {
   // state.queryParams.warehouseId =value.warehouseId
@@ -166,6 +168,7 @@
 }
 
 const printEvent=() => {
+
   let data = []
   if(state.chooseList && state.chooseList.length>0){
     data = state.chooseList
@@ -175,7 +178,7 @@
   let qrCodes=''
   for(let index in data){
     console.log(index,'index')
-    qrCodes+=`<div class="my-list-col"><div class="centered-content">${document.getElementById(data[index].code).innerHTML}</div></div>`
+    qrCodes+=`<div class="my-list-col"><div class="centered-content changeFont">${document.getElementById(data[index].code).innerHTML}</div></div>`
   }
   const printContent=document.createElement('div')
   printContent.innerHTML=qrCodes
@@ -194,8 +197,9 @@
     <style>
       @media print {
         .page-break { page-break-after:always;} /* 定义分页符格式*/
-        .centered-content { text-align:center;} /* 居中对齐内容*/
+        .centered-content { display: flex;justify-content: center; align-items: center;height: 90vh;} /* 居中对齐内容*/
         @page { size:50mm 40mm;margin:0mm; }
+         .changeFont{font-size:12px;transform: scale(0.8);-webkit-transform: scale(0.85);}
       }
     </style>
   </head>
@@ -203,8 +207,18 @@
   </html>
   `)
   printDocument.close()
+  let ct = document.getElementById('codeTitle').offsetWidth
+  console.log('ct',ct)
   //在打印窗口中调用打印功能
-  console.log('printFrame.contentWindow.document.body.style',printFrame.contentWindow.document.body.style)
+  // debugger
+  // if(ct >= 180) {
+
+  // }else {
+  //
+  //   printFrame.contentWindow.document.body.style.zoom = '100%'
+  // }
+
+
   printFrame.contentWindow.print()
   //移除隐藏的iframe元素
   document.body.removeChild(printFrame)
@@ -232,5 +246,6 @@
     flex-direction: column;
     align-items: flex-start;
   }
+
 }
 </style>
diff --git a/src/views/hazardousChemicals/warehouseManage/components/proDetail.vue b/src/views/hazardousChemicals/warehouseManage/components/proDetail.vue
index 3ac5639..bcecf09 100644
--- a/src/views/hazardousChemicals/warehouseManage/components/proDetail.vue
+++ b/src/views/hazardousChemicals/warehouseManage/components/proDetail.vue
@@ -37,7 +37,7 @@
       </div>
     </div>
     <!-- 表格数据 -->
-    <el-table v-loading="loading" :data="data.dataList" :border="true">
+    <el-table v-loading="loading" :data="data.dataList" :border="true" :cell-style="cellStyle">
       <el-table-column label="序号" type="index" align="center" width="80" />
       <el-table-column label="品名" prop="productBasic.name" align="center"  />
       <el-table-column label="产品编号" prop="productBasic.productSn" align="center" />
@@ -59,8 +59,8 @@
       </el-table-column>
       <el-table-column label="在库余量" prop="remaining" align="center" >
         <template #default="scope">
-          <span v-if="scope.row.state === 0">{{scope.row.remaining}}{{scope.row.productBasic.unit}}</span>
-          <span v-else>—</span>
+          <span>{{scope.row.remaining}}{{scope.row.productBasic.unit}}</span>
+
         </template>
       </el-table-column>
       <el-table-column label="所在仓库" prop="warehouseName" align="center" />
@@ -211,6 +211,23 @@
 
 
 }
+const cellStyle = ({ row, column,rowIndex, columnIndex }) => {
+  let arr = []
+  if (data.dataList !== null) {
+    data.dataList.filter((item, index) => {
+      arr.push(item.basicId)
+    })
+  }
+  for (let i = 0; i <= arr.length; i++) {
+    if (arr[i] == row.basicId) {
+      if(row.remaining < row.hproductBasic.metering){
+        if (columnIndex === 11 || columnIndex === 10){
+          return { color:' red' }
+        }
+      }
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/hazardousChemicals/warehouseManage/components/rawDetail.vue b/src/views/hazardousChemicals/warehouseManage/components/rawDetail.vue
index 1ce954a..131fec3 100644
--- a/src/views/hazardousChemicals/warehouseManage/components/rawDetail.vue
+++ b/src/views/hazardousChemicals/warehouseManage/components/rawDetail.vue
@@ -37,7 +37,7 @@
       </div>
     </div>
     <!-- 表格数据 -->
-    <el-table v-loading="loading" :data="data.dataList" :border="true">
+    <el-table v-loading="loading" :data="data.dataList" :border="true" :cell-style="cellStyle">
       <el-table-column label="序号" type="index" align="center" width="80" />
       <el-table-column label="品名" prop="hazmatBasic.name" align="center"  />
       <el-table-column label="产品编号" prop="hazmatBasic.productSn" align="center" />
@@ -59,8 +59,8 @@
       </el-table-column>
       <el-table-column label="在库余量" prop="remaining" align="center" >
         <template #default="scope">
-          <span v-if="scope.row.state === 0 || scope.row.state === 1">{{scope.row.remaining}}{{scope.row.hazmatBasic.unit}}</span>
-          <span v-else>—</span>
+          <span>{{scope.row.remaining}}{{scope.row.hazmatBasic.unit}}</span>
+
         </template>
       </el-table-column>
       <el-table-column label="所在仓库" prop="warehouseName" align="center" />
@@ -215,6 +215,23 @@
   })
 }
 
+const cellStyle = ({ row, column,rowIndex, columnIndex }) => {
+  let arr = []
+  if (data.dataList !== null) {
+    data.dataList.filter((item, index) => {
+      arr.push(item.basicId)
+    })
+  }
+  for (let i = 0; i <= arr.length; i++) {
+    if (arr[i] == row.basicId) {
+      if(row.remaining < row.hazmatBasic.metering){
+        if (columnIndex === 11 || columnIndex === 10){
+          return { color:' red' }
+        }
+      }
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">

--
Gitblit v1.9.2