物料管理新增物料编码打印

package.json

@@ -32,6 +32,7 @@
     "vue": "^3.2.40",
     "vue-baidu-map": "^0.21.22",
     "vue-i18n": "^9.1.9",
+    "vue-qr": "^4.0.9",
     "vue-router": "^4.2.4",
     "vuex": "^4.0.2"
   },

src/option/basic/basicMaterial.js

@@ -8,7 +8,7 @@ export default {
   index: true,
   viewBtn: true,
   delBtn: true,
-  selection: false,
+  selection: true,
   indexLabel: '序号',
   indexWidth: '80',
   dialogClickModal: false,

src/views/basic/material/basicMaterial.vue

@@ -1,6 +1,7 @@
 <template>
   <basic-container>
-    <avue-crud :option="option"
+    <avue-crud
+      :option="option"
       v-model:search="search"
       v-model:page="page"
       v-model="form"
@@ -18,25 +19,27 @@
       @current-change="currentChange"
       @size-change="sizeChange"
       @refresh-change="refreshChange"
-               @on-load="onLoad">
+      @on-load="onLoad"
+    >
       <template #menu-left>
-        <el-button type="danger"
+        <el-button type="danger" icon="el-icon-delete" plain @click="handleImport"
-                   icon="el-icon-delete"
+          >导 入
-                   plain
-                   @click="handleImport">导 入
         </el-button>
         <!--        v-if="permission.basicMaterial_delete"-->
-        <el-button type="warning"
+        <el-button type="warning" plain icon="el-icon-download" @click="handleExport"
-                   plain
+          >导 出
-                   icon="el-icon-download"
+        </el-button>
-                   @click="handleExport">导 出
+        <el-button type="warning" plain icon="Printer" @click="handleBatchPrinter">
+          批量打印
         </el-button>
       </template>
       <template #menu="{ row, index, size }">
-        <el-button type="text"
+        <el-button type="text" plain icon="el-icon-edit" @click="rowDelTripartite(row, index)">
-                   plain
+          三方物料
-                   icon="el-icon-edit"
+        </el-button>
-                   @click="rowDelTripartite(row,index)">三方物料</el-button>
+        <el-button type="text" plain icon="Printer" @click="handlePrinter(row, index, size)">
+          打印
+        </el-button>
       </template>
     </avue-crud>
     <el-dialog title="物料导入" append-to-body v-model="excelBox" width="555px">
@@ -48,21 +51,100 @@
         </template>
       </avue-form>
     </el-dialog>
+
+    <el-dialog title="物料二维码" append-to-body v-model="printStock" width="555px">
+      <div
+        class="PrinterValue"
+        style="width: 100%; border: 1px solid rgb(0, 0, 0); margin-bottom: 10px"
+        v-for="item in printList"
+        :key="item.productCode"
+      >
+        <div
+          style="
+            border-bottom: 1px solid #000;
+            font-size: 20px;
+            width: 100%;
+            text-align: center;
+            font-weight: bold;
+            padding: 10px;
+            box-sizing: border-box;
+          "
+        >
+          物料编码
+        </div>
+        <div style="display: flex; justify-content: center; align-items: center">
+          <div style="display: flex; width: 40%; justify-content: center; border-right: 1px solid">
+            <vue-qr
+              ref="qrCode"
+              :text="item.productCode"
+              style="display: block; height: 120px; width: 120px"
+            ></vue-qr>
+          </div>
+
+          <div style="text-align: left; height: 120px; box-sizing: border-box; flex: 1; zoom: 0.9">
+            <div
+              style="
+                height: 40px;
+                line-height: 40px;
+                border-bottom: 1px solid #000;
+                box-sizing: border-box;
+                padding-left: 10px;
+                font-size: 14px;
+              "
+            >
+              产品名称: {{ item.name }}
+            </div>
+            <div
+              style="
+                height: 40px;
+                line-height: 40px;
+                border-bottom: 1px solid #000;
+                box-sizing: border-box;
+                padding-left: 10px;
+                font-size: 14px;
+              "
+            >
+              产品编码: {{ item.productCode }}
+            </div>
+            <div
+              style="
+                height: 40px;
+                line-height: 40px;
+                box-sizing: border-box;
+                padding-left: 10px;
+                font-size: 14px;
+              "
+            >
+              SKU: {{ item.sku }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex-c-c mt10">
+        <el-button @click="() => (printStock = false)">关闭</el-button>
+        <el-button type="primary" icon="Printer" @click="handlePrinterValue">打印</el-button>
+      </div>
+    </el-dialog>
   </basic-container>
 </template>
 
 <script>
-  import {getList, getDetail, add, update, remove} from "@/api/basic/basicMaterial";
+import { getList, getDetail, add, update, remove } from '@/api/basic/basicMaterial';
-  import option from "@/option/basic/basicMaterial";
+import option from '@/option/basic/basicMaterial';
-  import {mapGetters} from "vuex";
+import { mapGetters } from 'vuex';
-  import {exportBlob} from "@/api/common";
+import { exportBlob } from '@/api/common';
 import { getToken } from '@/utils/auth';
-  import {downloadXls} from "@/utils/util";
+import { downloadXls } from '@/utils/util';
-  import {dateNow} from "@/utils/date";
+import print from '@/utils/print.js';
+import { dateNow } from '@/utils/date';
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
+import VueQr from 'vue-qr/src/packages/vue-qr.vue';
 
 export default {
+  components: {
+    VueQr,
+  },
   data() {
     return {
       form: {},
@@ -74,7 +156,7 @@
       page: {
         pageSize: 30,
         currentPage: 1,
-          total: 0
+        total: 0,
       },
       selectionList: [],
       option: option,
@@ -104,16 +186,20 @@
           },
         ],
       },
+      /** 物料编码二维码打印弹窗 */
+      printStock: false,
+      textValue: '',
+      printList: [],
     };
   },
   computed: {
-      ...mapGetters(["permission"]),
+    ...mapGetters(['permission']),
     permissionList() {
       return {
         addBtn: this.validData(this.permission.basicMaterial_add, false),
         viewBtn: this.validData(this.permission.basicMaterial_view, false),
         delBtn: this.validData(this.permission.basicMaterial_delete, false),
-          editBtn: this.validData(this.permission.basicMaterial_edit, false)
+        editBtn: this.validData(this.permission.basicMaterial_edit, false),
       };
     },
     ids() {
@@ -121,8 +207,8 @@
       this.selectionList.forEach(ele => {
         ids.push(ele.id);
       });
-        return ids.join(",");
+      return ids.join(',');
-      }
+    },
   },
 
   watch: {
@@ -134,15 +220,14 @@
     },
   },
   methods: {
-
     rowDelTripartite(row, num) {
-        console.log("><><><><",row,num);
+      console.log('><><><><', row, num);
       this.$router.push({
         path: '/basic/material/basicTripartiteMaterial',
         query: {
           id: row.id,
-            name: row.name
+          name: row.name,
-          }
+        },
       });
       // this.$router.push({
       //   path: '/distribution/inventory/distrilbutionBillLading',
@@ -154,37 +239,43 @@
       // });
     },
     rowSave(row, done, loading) {
-            add(row).then(() => {
+      add(row).then(
+        () => {
           this.onLoad(this.page);
           this.$message({
-                type: "success",
+            type: 'success',
-                message: "操作成功!"
+            message: '操作成功!',
           });
           done();
-            }, error => {
+        },
+        error => {
           loading();
           window.console.log(error);
-            });
+        }
+      );
     },
     rowUpdate(row, index, done, loading) {
       //表单校验
-            update(row).then(() => {
+      update(row).then(
+        () => {
           this.onLoad(this.page);
           this.$message({
-                type: "success",
+            type: 'success',
-                message: "操作成功!"
+            message: '操作成功!',
           });
           done();
-            }, error => {
+        },
+        error => {
           loading();
           console.log(error);
-            });
+        }
+      );
     },
     rowDel(row) {
-        this.$confirm("确定将选择数据删除?", {
+      this.$confirm('确定将选择数据删除?', {
-          confirmButtonText: "确定",
+        confirmButtonText: '确定',
-          cancelButtonText: "取消",
+        cancelButtonText: '取消',
-          type: "warning"
+        type: 'warning',
       })
         .then(() => {
           return remove(row.id);
@@ -192,20 +283,20 @@
         .then(() => {
           this.onLoad(this.page);
           this.$message({
-              type: "success",
+            type: 'success',
-              message: "操作成功!"
+            message: '操作成功!',
           });
         });
     },
     handleDelete() {
       if (this.selectionList.length === 0) {
-          this.$message.warning("请选择至少一条数据");
+        this.$message.warning('请选择至少一条数据');
         return;
       }
-        this.$confirm("确定将选择数据删除?", {
+      this.$confirm('确定将选择数据删除?', {
-          confirmButtonText: "确定",
+        confirmButtonText: '确定',
-          cancelButtonText: "取消",
+        cancelButtonText: '取消',
-          type: "warning"
+        type: 'warning',
       })
         .then(() => {
           return remove(this.ids);
@@ -213,8 +304,8 @@
         .then(() => {
           this.onLoad(this.page);
           this.$message({
-              type: "success",
+            type: 'success',
-              message: "操作成功!"
+            message: '操作成功!',
           });
           this.$refs.crud.toggleSelection();
         });
@@ -226,21 +317,21 @@
       done();
     },
     handleExport() {
-        let downloadUrl = `/api/logpm-basic/material/export-basicMaterial?${this.website.tokenHeader}=${getToken()}`;
+      let downloadUrl = `/api/logpm-basic/material/export-basicMaterial?${
-        const {
+        this.website.tokenHeader
-        } = this.query;
+      }=${getToken()}`;
-        let values = {
+      const {} = this.query;
-        };
+      let values = {};
-        this.$confirm("是否导出数据?", "提示", {
+      this.$confirm('是否导出数据?', '提示', {
-          confirmButtonText: "确定",
+        confirmButtonText: '确定',
-          cancelButtonText: "取消",
+        cancelButtonText: '取消',
-          type: "warning"
+        type: 'warning',
       }).then(() => {
         NProgress.start();
         exportBlob(downloadUrl, values).then(res => {
           downloadXls(res.data, `物料基础信息${dateNow()}.xlsx`);
           NProgress.done();
-          })
+        });
       });
     },
     //导出
@@ -249,7 +340,7 @@
     },
     //下载模板
     handleTemplate() {
-        console.log("下载模板！！！");
+      console.log('下载模板！！！');
       exportBlob(
         `/api/logpm-basic/material/export-basicMaterialMb?${this.website.tokenHeader}=${getToken()}`
       ).then(res => {
@@ -257,7 +348,7 @@
       });
     },
     beforeOpen(done, type) {
-        if (["edit", "view"].includes(type)) {
+      if (['edit', 'view'].includes(type)) {
         getDetail(this.form.id).then(res => {
           this.form = res.data.data;
         });
@@ -293,16 +384,12 @@
     onLoad(page, params = {}) {
       this.loading = true;
 
-        const {
+      const { productCode, name, brandId } = this.query;
-          productCode,
-          name,
-          brandId
-        } = this.query;
       let values = {
         productCode: productCode,
         name: name,
         brandId: brandId,
-          hide:1
+        hide: 1,
       };
 
       getList(page.currentPage, page.pageSize, values).then(res => {
@@ -312,12 +399,29 @@
         this.loading = false;
         this.selectionClear();
       });
-      }
+    },
-    }
+    /** 开启打印弹窗 */
+    handlePrinter(row, index, size) {
+      this.printList = [row];
+      this.printStock = true;
+    },
+
+    /** 打印 */
+    handlePrinterValue() {
+      const printerNode = document.querySelectorAll('.PrinterValue');
+      console.log('printerNode :>> ', printerNode);
+      print(printerNode);
+    },
+
+    handleBatchPrinter() {
+      this.printList = this.selectionList;
+      this.printStock = true;
+    },
+  },
 };
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 :deep(.no-print) {
   margin-left: auto !important;
 }