1

package.json

@@ -48,6 +48,7 @@
     "pinia": "2.0.22",
     "pinia-plugin-persist": "^1.0.0",
     "pubsub-js": "^1.9.4",
+    "qrcodejs2-fix": "0.0.1",
     "sortablejs": "^1.15.0",
     "typescript": "^5.0.4",
     "vue": "3.2.45",
@@ -57,6 +58,7 @@
     "vue-lazyload": "^3.0.0",
     "vue-router": "4.1.4",
     "vue-super-flow": "^1.3.8",
+    "vue3-barcode": "^1.0.1",
     "vue3-clipboard": "^1.0.0",
     "vue3-print-nb": "^0.1.4"
   },

src/main.js

@@ -31,6 +31,9 @@ import { createPinia } from "pinia"; //引入pinia
 import piniaPluginPersist from "pinia-plugin-persist"; //引入pinia数据持久化插件
 import VueLazyLoad from "vue-lazyload";
 
+// 条形码
+import Vue3Barcode from 'vue3-barcode'
+
 // 按钮防抖
 import preReClick from "./directive/preReClick.js";
 
@@ -101,6 +104,7 @@ app.config.globalProperties.useUserStore = useUserStore;
 // 全局组件挂载
 app.component("Pagination", Pagination);
 app.component("TreeSelect", TreeSelect);
+app.component("barcode", Vue3Barcode);
 
 app.use(router);
 app.use(store);

src/views/production/schedule/production-work-order/index.vue

@@ -7,6 +7,16 @@
       :loading="loading"
       :searchConfig="searchConfig"
       highlight-current-row
+      :table-events="{
+        select: selectRow,
+        'select-all': selectRow,
+      }"
+      :action-list="[
+        {
+          text: '打印生产面单',
+          action: () => clickSelectPrint(),
+        },
+      ]"
       @get-list="getList"
       @clickReset="clickReset"
       @changeRadioGroup="changeRadioGroup">
@@ -19,12 +29,46 @@
         <div>{{ item.province }}, {{ item.city }}, {{ item.county }}, {{ item.detailedAddress }}</div>
       </template>
     </byTable>
+    <!-- style="display: none" -->
+    <div>
+      <div style="width: 250px" id="printMe">
+        <div v-for="(item, index) in QRcodeList" :key="index">
+          <div style="height: 442px; padding-top: 2px; overflow: hidden; position: relative">
+            <div style="border-bottom: 1px solid #000; display: flex; align-items: center; justify-content: center" v-if="item.orderWlnCode">
+              <barcode :value="item.orderWlnCode" :height="50" :width="1.6" />
+            </div>
+            <div style="border-bottom: 1px solid #000; display: flex; align-items: center; justify-content: center" v-else>
+              <barcode :value="item.orderCode" :height="50" :width="1.6" />
+            </div>
+            <div style="display: flex; align-items: center; justify-content: center">
+              <div style="width: 150px; height: 150px; margin-top: 8px" :id="'print' + index" :ref="'print' + index">
+                <img src="" alt="" style="vertical-align: middle; height: 100%; width: 100%" />
+              </div>
+            </div>
+            <div style="text-align: center; font-size: 18px; font-weight: 700; padding: 4px 0; border-bottom: 1px solid #000">{{ item.completeTime }}</div>
+            <div style="word-break: break-all; padding: 2px">SKU品号：{{ item.skuSpecCode }}</div>
+            <div style="word-break: break-all; padding: 2px">SKU品名：{{ item.skuSpecName }}</div>
+            <div style="word-break: break-all; padding: 2px">BOM品号：{{ item.bomSpecCode }}</div>
+            <div style="word-break: break-all; padding: 2px">BOM品名：{{ item.bomSpecName }}</div>
+            <div v-if="item.orderWlnCode" class="one">
+              <div class="two">
+                <div class="three">万里牛</div>
+              </div>
+            </div>
+          </div>
+          <div style="page-break-after: always"></div>
+        </div>
+      </div>
+      <el-button type="primary" v-print="printObj" id="printBtnMini"></el-button>
+    </div>
   </el-card>
 </template>
 
 <script setup>
 import byTable from "/src/components/byTable/index";
 import { getNearDays } from "/src/utils/util";
+import QRCode from "qrcodejs2-fix";
+import { ElMessage } from "element-plus";
 
 const { proxy } = getCurrentInstance();
 const sourceList = ref({
@@ -42,7 +86,7 @@ const sourceList = ref({
     productionWorkOrderCode: "",
     beginTime: "",
     endTime: "",
-    type: 3,
+    type: 15,
   },
 });
 const loading = ref(false);
@@ -112,6 +156,12 @@ const searchConfig = computed(() => {
 const config = computed(() => {
   return [
     {
+      type: "selection",
+      attrs: {
+        checkAtt: "isCheck",
+      },
+    },
+    {
       attrs: {
         label: "订单号",
         prop: "orderCode",
@@ -136,7 +186,7 @@ const config = computed(() => {
       attrs: {
         label: "SKU品名",
         prop: "skuSpecName",
-        'min-width': 220,
+        "min-width": 220,
       },
     },
     {
@@ -150,7 +200,7 @@ const config = computed(() => {
       attrs: {
         label: "BOM品名",
         prop: "bomSpecName",
-        'min-width': 280,
+        "min-width": 280,
       },
     },
     {
@@ -199,6 +249,29 @@ const config = computed(() => {
     //     fixed: "right",
     //   },
     // },
+    {
+      attrs: {
+        label: "操作",
+        width: 120,
+        align: "center",
+        fixed: "right",
+      },
+      renderHTML(row) {
+        return [
+          {
+            attrs: {
+              label: "打印生产面单",
+              type: "primary",
+              text: true,
+            },
+            el: "button",
+            click() {
+              clickPrint([row]);
+            },
+          },
+        ];
+      },
+    },
   ];
 });
 const getList = async (req, status) => {
@@ -206,23 +279,32 @@ const getList = async (req, status) => {
     sourceList.value.pagination = {
       pageNum: sourceList.value.pagination.pageNum,
       pageSize: sourceList.value.pagination.pageSize,
-      type: 3,
-      beginTime: getNearDays(3).beginTime,
-      endTime: getNearDays(3).endTime,
+      type: 15,
+      beginTime: getNearDays(15).beginTime,
+      endTime: getNearDays(15).endTime,
     };
   } else {
     sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
   }
   loading.value = true;
   proxy.post("/productionWorkOrder/page", sourceList.value.pagination).then((res) => {
-    sourceList.value.data = res.rows;
+    if (res.rows && res.rows.length > 0) {
+      sourceList.value.data = res.rows.map((item) => {
+        return {
+          ...item,
+          isCheck: true,
+        };
+      });
+    } else {
+      sourceList.value.data = [];
+    }
     sourceList.value.pagination.total = res.total;
     setTimeout(() => {
       loading.value = false;
     }, 200);
   });
 };
-getList({ beginTime: getNearDays(3).beginTime, endTime: getNearDays(3).endTime });
+getList({ beginTime: getNearDays(15).beginTime, endTime: getNearDays(15).endTime });
 const clickReset = () => {
   getList("", true);
 };
@@ -240,6 +322,43 @@ const clickCode = (row) => {
     },
   });
 };
+const printObj = ref({
+  id: "printMe",
+  popTitle: "",
+  extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
+  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
+});
+const selectData = ref([]);
+const selectRow = (data) => {
+  selectData.value = data;
+};
+const QRcodeList = ref([]);
+const clickPrint = (list) => {
+  QRcodeList.value = list;
+  nextTick(() => {
+    for (let i = 0; i < QRcodeList.value.length; i++) {
+      proxy.$refs["print" + i][0].innerHTML = ""; //清除二维码方法一
+      let text = QRcodeList.value[i].skuSpecCode
+      new QRCode(proxy.$refs["print" + i][0], {
+        text: text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
+        width: 150,
+        height: 150,
+        colorDark: "#000000",
+        colorLight: "#ffffff",
+        correctLevel: QRCode.CorrectLevel.H,
+      });
+    }
+    const btn = document.getElementById("printBtnMini");
+    btn.click();
+  });
+};
+const clickSelectPrint = () => {
+  if (selectData.value && selectData.value.length > 0) {
+    clickPrint(selectData.value);
+  } else {
+    return ElMessage("请选择需要打印的工单");
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -247,4 +366,32 @@ const clickCode = (row) => {
   margin-top: 10px !important;
   margin-bottom: 10px !important;
 }
+.one {
+  position: absolute;
+  right: 10px;
+  top: 320px;
+  width: 70px;
+  height: 70px;
+  z-index: 99;
+  line-height: 80px;
+  text-align: center;
+  border-radius: 50%;
+  border: 1px solid #000;
+  .two {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 60px;
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+    border-radius: 50%;
+    border: 1px dashed #000;
+    .three {
+      rotate: -45deg;
+      font-size: 14px;
+    }
+  }
+}
 </style>