打印大盒子标签

src/api/task.js

@@ -226,6 +226,14 @@ const clcNoPlanConfirmBack = (params) => {
     data: params
   })
 }
+// 打印大标签
+const statisticsBoxNumByStation = (params) => {
+  return request({
+    url: '/task/statisticsBoxNumByStation',
+    method: 'post',
+    data: params
+  })
+}
 
 export {
   sendGoodsInTask,
@@ -255,5 +263,6 @@ export {
   clcNoPlanConfirmBack,
   finishSortBox,
   getWorkGoodsList,
-  requestOldPrintData
+  requestOldPrintData,
+  statisticsBoxNumByStation
 }

src/layout/sortBoxs.vue

@@ -70,6 +70,13 @@
                                         style="margin-left: 25px; align-self: center; font-weight: bold;font-size: 45px; writing-mode: vertical-lr;">整理结束</span>
                                 </div>
                             </div>
+                            <div style="margin: 10px;">
+                                <div class="arrow" @click="print()">
+                                    <Printer style="display: none;" />
+                                    <span
+                                        style="margin-left: 25px; align-self: center; font-weight: bold;font-size: 45px; writing-mode: vertical-lr;">打印标签</span>
+                                </div>
+                            </div>
                         </div>
                     </el-form>
                 </fieldset>
@@ -88,18 +95,47 @@
                 <el-table-column prop="boxQuantity" label="需要数量" min-width="120px" show-overflow-tooltip />
             </el-table>
             </el-dialog>
+            <div style="width: 0;height: 0;overflow: hidden">
+                    <button ref="printBtn" style="display: none;" v-print="printObj"></button>
+                    
+                <div id="printArea" class="objectDialogFlowPrint">
+                    <div class="myPrint">
+                        <div class="pageWarp" v-for="item in printTabs">
+                            <el-card :body-style="{ padding: '5px' }">
+                                <div class="header-row">
+                                    <div style=" margin-top: 10px;">
+                                        <qrcode-vue
+                                            :value="item.name + '&' + item.quantity"
+                                            :size="100"
+                                            :foreground="color"
+                                            level="H"
+                                        />
+                                    </div>
+                                    <div class="part-name">
+                                        <div>大盒号：{{ item.name }}</div>
+                                        <div>站台号：{{ item.standId }} </div>
+                                    </div>
+                                </div>
+                               
+                            </el-card>
+                        </div>
+                    </div>
+                </div>
+                
+            </div>
         </el-container>
     </el-config-provider>
 </template>
 
 <script setup>
 import store from '@/store'
-import { requestSortBox, requestSumOfBox, finishSortBox } from '@/api/task'
+import { requestSortBox, requestSumOfBox, finishSortBox, statisticsBoxNumByStation } from '@/api/task'
 import { getBigBoxList } from '@/api/kateWork'
 import { reactive, ref } from 'vue'
 import { errorBox } from '@/utils/myMessageBox.js'
 import { ElMessage } from 'element-plus'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import QrcodeVue from 'qrcode.vue'
 </script>
 
 <script>
@@ -107,7 +143,35 @@ export default {
     name: 'sortBox',
     data() {
         return {
-            standId: store.getters.getStandId,
+            // standId: store.getters.getStandId,
+            standId: 'ASRS-#7',
+            printTabs: [],
+            printObj: {
+                id: "printArea", // 这里是要打印元素的ID
+                popTitle: "&nbsp", // 打印的标题
+                extraCss: "", // 打印可引入外部的一个 css 文件
+                extraHead: "", // 打印头部文字
+                preview: false, // 是否启动预览模式，默认是false
+                previewTitle: '打印客户账单', // 打印预览的标题
+                previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
+                zIndex: 10002, // 预览窗口的z-index，默认是20002，最好比默认值更高
+                previewBeforeOpenCallback() {
+                    // console.log('正在加载预览窗口！');
+                }, // 预览窗口打开之前的callback
+                previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
+                beforeOpenCallback() {
+                    // console.log('开始打印之前！')
+                }, // 开始打印之前的callback
+                openCallback() {
+                    // console.log('执行打印了！')
+                }, // 调用打印时的callback
+                closeCallback() {
+                    // console.log('关闭了打印工具！') 
+                }, // 关闭打印的callback(无法区分确认or取消)
+                clickMounted() {
+                    // console.log('点击v-print绑定的按钮了！') 
+                },
+            },
             // timer: '',
             labelPosition: 'top',
             workFormRef: ref(),
@@ -202,6 +266,33 @@ export default {
                 console.log(err)
                 errorBox('请求发生异常。')
             })
+        },
+         print(){
+             statisticsBoxNumByStation({  standId: this.standId}).then(res => {
+                const response = res.data
+                console.log(response)
+                if (response.code == 0) {
+                    // 获取打印数据
+                    let this_ = this;
+                    const printData = response.returnData.map(item => {
+                        return {
+                            name: item.bigBox, // 物料号
+                            quantity: item.orderQuantity, // 数量
+                            standId: this_.standId // 工作站
+                        }
+                    })
+                    this.printTabs = printData
+                    this.$nextTick(() => {
+                        this.$refs.printBtn.click()
+                    });
+                } else {
+                  
+                    errorBox(response.message)
+                }
+            }).catch(err => {
+                console.log(err)
+                errorBox('根据站台统计大盒子数量错误')
+            })
         },
         getCurrentRow(row) {
             this.bigBoxNo = row.bigBoxNo
@@ -367,27 +458,44 @@ export default {
     margin-top: 25px;
 }
 
-.display-form-div-left {
+.header-row {
-    display: inline-flex;
+    display: flex;
-    justify-content: center;
+    /* align-items: center; */
-    width: 240px;
+    /* justify-content: space-between; */
-    margin: 5px;
+    /* margin-bottom: 10px; */
-    padding: 5px;
-    border: 5px double #000000;
 }
 
-.display-form-div-right {
+.part-name {
-    display: inline-flex;
+    padding: 6px 20px;
-    justify-content: center;
+    font-size: 30px;
-    width: 60px;
-    margin: 5px;
-    padding: 5px;
-    background-color: #CCCCCC;
-}
-
-.display-form-text-right {
-    align-self: center;
     font-weight: bold;
-    font-size: 25px;
+}
+
+.stand-id {
+    font-size: 16px;
+    /* background-color: #f5f5f5; */
+    display: inline-block;
+    border-radius: 6px;
+    border: 1px solid #666;
+    /* color: #666; */
+}
+
+.qr-container {
+    display: flex;
+    align-items: flex-end;
+}
+
+
+.objectDialogFlowPrint .pageWarp {
+    page-break-after: always;
+    height: 100%;
+    width: 100%;
+    text-align: center;
+    margin: 5px auto;
+    padding: auto;
+}
+
+.objectDialogFlowPrint .myPrint {
+    print-color-adjust: exact;
 }
 </style>