预约市配页面新增打印功能

src/api/distribution/distributionReservation.js

@@ -201,6 +201,14 @@ export const getReservationStockListInfo = (reservationId) => {
   })
 }
 
+export const patchPrintList = (ids) => {
+  return request({
+    url: '/api/logpm-distribution/deliveryList/printBatchByReservation',
+    method: 'post',
+    params: ids
+  });
+}
+
 
 
 

src/views/distribution/inventory/distributionStockArticleDetails.vue

@@ -315,7 +315,6 @@
         <span slot="footer" class="dialog-footer">
           <!--    <el-button type="primary" @click="ddd">导 出</el-button>-->
           <el-button type="primary" @click="printTemplate">打 印</el-button>
-          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
           <el-button @click="dialogVisible = false">取 消</el-button>
         </span>
       </el-dialog>

src/views/distribution/reservation/reservation.vue

@@ -41,8 +41,7 @@
                             <div class="avue-crud__left">
                                 <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
                                 >添加预约
-                                </el-button
-                                >
+                                </el-button>
                                 <el-button
                                         v-if="this.query.reservationStatus === '1'"
                                         type="danger"
@@ -67,6 +66,13 @@
                                         plain
                                 >批量转配送
                                 </el-button>
+                                 <el-button
+                                        type="danger"
+                                        icon="el-icon-delete"
+                                        @click="batchPrintData"
+                                        plain
+                                >批量打印
+                                </el-button>
                             </div>
                             <!-- 头部右侧按钮模块 -->
                             <div class="avue-crud__right">
@@ -206,6 +212,14 @@
                                         plain
                                 >批量转配送
                                 </el-button>
+                                <el-button
+                                        v-if="this.query.reservationStatus === '2'"
+                                        type="danger"
+                                        icon="el-icon-delete"
+                                        @click="batchPrintData"
+                                        plain
+                                >批量打印
+                                </el-button>
                             </div>
                             <!-- 头部右侧按钮模块 -->
                             <div class="avue-crud__right">
@@ -262,6 +276,15 @@
                                 >确认预约
                                 </el-text
                                 >
+                                 <el-text
+                                        size="small"
+                                        type="primary"
+                                        link
+                                        icon="el-icon-view"
+                                        @click="printData(slotProps.scope)"
+                                >打印
+                                </el-text
+                                >
                             </template>
                         </tablecmt>
                         <!--        <el-popover :visible="visible" placement="top-start" :width="160">-->
@@ -328,6 +351,17 @@
                     </el-pagination>
                 </div>
             </el-row>
+
+            <el-dialog title="二维码" :visible.sync="dialogVisible" width="780px" v-model="dialogVisible">
+              <div>
+                <div v-html="html"></div>
+              </div>
+              <span slot="footer" class="dialog-footer">
+                <!--    <el-button type="primary" @click="ddd">导 出</el-button>-->
+                <el-button type="primary" @click="printTemplate">打 印</el-button>
+                <el-button @click="dialogVisible = false">取 消</el-button>
+              </span>
+            </el-dialog>
         </div>
     </basic-container>
     <edittablehead
@@ -395,7 +429,8 @@
     remove,
     confirms,
     addReservations,
-    cancelReservation
+    cancelReservation,
+    patchPrintList
   } from '@/api/distribution/distributionReservation';
   import option from '@/option/distribution/distributionReservation';
   import { mapGetters } from 'vuex';
@@ -406,10 +441,15 @@
   import { getListTeam } from '@/api/basicdata/basicdataTeamGroup';
   import { stockUp } from '@/api/basicdata/basicdataGoodsArea';
   import dayjs from 'dayjs';
+  import print from '@/utils/print';
 
   export default {
     data() {
       return {
+        // 弹出框是否显示
+        dialogVisible: false,
+        // 打印模版的html
+        html: '',
         columnList: [
           {
             prop: '',
@@ -1093,6 +1133,9 @@
         this.height = this.setPx(document.body.clientHeight - 340);
       },
       handleClick() {
+        // 切换选项卡时, 清空备选中的数组
+        this.selectionList = []
+
         if (this.activeName == 'yescheck') {
           this.activeName = 'nocheck';
         } else if (this.activeName == 'nocheck') {
@@ -1511,12 +1554,73 @@
           this.loading = false;
           this.selectionClear();
         });
-      }
+      },
+
+      /**
+       * 请求打印模版
+       */
+      async batchPrint(ids){
+        const res = await patchPrintList({ids: ids.join(',')})
+        return res
+      },
+
+      /**
+       * 批量打印
+       */
+      async batchPrintData(){
+        if(this.selectionList.length === 0) {
+          this.$message({
+            type: "error",
+            message: "最少选择一条数据哦"
+          })
+          return
+        }
+        const ids = this.selectionList.map(item => item.id)
+        const res = await this.batchPrint(ids)
+        const {code, data} = res.data
+        if(code === 200){
+          this.dialogVisible = true
+          console.log('data :>> ', data);
+          this.html = '';
+          data.forEach(item => {
+            return this.html += item.templateHtml
+          })
+        this.html ;
+        }
+      },
+
+      /**
+       * 单独打印
+       */
+      async printData(rowData){
+        const res = await this.batchPrint([rowData.row.id])
+        const {code, data} = res.data
+        if(code === 200){
+          this.dialogVisible = true
+          console.log('data :>> ', data);
+          this.html = '';
+          data.forEach(item => {
+            return this.html += item.templateHtml
+          })
+        this.html ;
+        }
+      },
+
+      /**
+       * 调用打印机
+       */
+      printTemplate() {
+        const orderNodeList = document.querySelectorAll('.el-dialog__body>div>div>div');
+        print(orderNodeList);
+      },
     }
   };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
     // .el-tab-pane{
     //   margin-top: -20px;
     // }
+  :deep(.el-dialog){
+    width: fit-content !important;
+  }
 </style>

vite.config.js

@@ -16,9 +16,9 @@ export default ({ mode, command }) => {
           // target: 'http://192.168.10.48:8888',
           // target: 'http://192.168.10.123:8889',
           // target: 'http://192.168.10.75:8777',
-          target: 'http://192.168.10.101:8888',
+          // target: 'http://192.168.10.101:8888',
           // target: 'http://192.168.10.29:13000',
-          // target: 'http://test.api.huitongys.com',
+          target: 'http://test.api.huitongys.com',
           changeOrigin: true,
           rewrite: path => path.replace(/^\/api/, ''),
         },