新增选择打印机

src/App.vue

@@ -5,6 +5,12 @@
 <script lang="ts" setup>
 import watermark from '@/utils/watermark.js';
 watermark.set('货无忧');
+import { useStore } from 'vuex';
+
+const $store = useStore();
+
+console.log('$store :>> ', $store);
+$store.commit('GET_PRINT_LIST');
 </script>
 
 <style lang="scss">

src/components/MyPrint/MyPrint.vue

@@ -54,6 +54,19 @@
         >
           打 印
         </el-button>
+
+        <el-select
+          v-model="activeIndex"
+          placeholder="打印机"
+          style="width: 200px; margin-left: 10px"
+        >
+          <el-option
+            v-for="item in $store.state.print.printList"
+            :label="item.label"
+            :value="item.value"
+            :key="item.label"
+          />
+        </el-select>
       </div>
     </el-dialog>
   </div>
@@ -67,6 +80,9 @@ import { getObjType } from '@/utils/util';
 import * as XLSX from 'xlsx';
 import { exportExcelByDom } from '@/utils/export';
 import { dateNow } from '@/utils/date';
+import { useStore } from 'vuex';
+
+const $store = useStore();
 
 const props = defineProps({
   /** 打印内容 */
@@ -125,6 +141,16 @@ const visible = computed({
   },
 });
 
+const activeIndex = computed({
+  get() {
+    return $store.state.print[props.type + 'ActiveIndex'];
+  },
+  set(activeIndex) {
+    // 设置打印机
+    $store.commit('SET_PRINT_ACTIVE', { activeIndex, type: props.type });
+  },
+});
+
 const details = reactive({
   /** 打印loading */
   printLoading: false,
@@ -227,7 +253,7 @@ const printTemplate = () => {
   const nodeArr = document.querySelectorAll('.printSmallText');
 
   for (let i = 0; i < nodeArr.length; i++) {
-    const val = nodeArr[i];
+    const val = nodeArr[i] as any;
     val.style.fontSize = '0.5rem';
     val.style.lineHeight = '0.7rem';
   }

src/components/WaybillPrintTemplate/WaybillPrintTemplate.vue

@@ -18,6 +18,19 @@
             打 印(自定义模板)
           </el-button>
 
+          <el-select
+            v-model="activeIndex"
+            placeholder="打印机"
+            style="width: 200px; margin-left: 10px"
+          >
+            <el-option
+              v-for="item in $store.state.print.printList"
+              :label="item.label"
+              :value="item.value"
+              :key="item.label"
+            />
+          </el-select>
+
           <el-form-item label="是否显示运费" style="margin: 0px 0px 0px 10px">
             <el-checkbox v-model="isShowFreight" @change="handleShowFreight"></el-checkbox>
           </el-form-item>
@@ -37,6 +50,7 @@ import * as XLSX from 'xlsx';
 import { onMounted } from 'vue';
 import { nextTick } from 'vue';
 import { watch } from 'vue';
+import { useStore } from 'vuex';
 
 const props = defineProps({
   html: {
@@ -68,6 +82,7 @@ const props = defineProps({
 const isShowFreight = ref(false);
 
 const $emit = defineEmits(['update:modelValue']);
+const $store = useStore();
 
 const visible = computed({
   get: () => props.modelValue,
@@ -76,6 +91,16 @@ const visible = computed({
   },
 });
 
+const activeIndex = computed({
+  get() {
+    return $store.state.print.titlePrintActiveIndex;
+  },
+  set(activeIndex) {
+    // 设置打印机
+    $store.commit('SET_PRINT_ACTIVE', { activeIndex, type: 'titlePrint' });
+  },
+});
+
 const handleClose = () => {
   visible.value = false;
 };
@@ -163,60 +188,39 @@ const handleExport = () => {
 const printTemplate = (type: 'haveTem' | 'notHaveTem') => {
   const printNode = document.querySelectorAll('.printCode > div > div');
 
-  // const cloneNodeList = [];
-
-  // for (let i = 0; i < printNode.length; i++) {
-  //   cloneNodeList.push(printNode[i].cloneNode(true));
-  // }
-
-  // for (let i = 0; i < printNode.length; i++) {
-  //   const element = printNode[i];
-
-  //   for (let j = 0; j < element.childNodes.length; j++) {
-  //     const child = element.childNodes[j];
-
-  //     console.log('child :>> ', child.childNodes);
-  //     // if (child.className !== 'image-container') continue;
-  //     // // child.style.setProperty('--isShow', type === 'haveTem' ? 'flex' : 'none');
-  //     // child.style.setProperty('--aa', type === 'haveTem' ? '#000' : '#fff');
-  //     // child.style.setProperty('--height', type === 'haveTem' ? 'auto' : '0px');
-  //     // break;
-  //   }
-  // }
-
   const imgNode = document.querySelectorAll('.printCode img');
   console.log('imgNode :>> ', imgNode);
   // return
   for (let index = 0; index < imgNode.length; index++) {
-    const element = imgNode[index];
+    const element = imgNode[index] as any;
     element.style.display = type === 'haveTem' ? 'block' : 'none';
   }
 
   const titleArr = document.querySelectorAll('.printCode .title');
 
   for (let index = 0; index < titleArr.length; index++) {
-    const element = titleArr[index];
+    const element = titleArr[index] as any;
     element.style.color = type === 'haveTem' ? '#000' : '#fff';
   }
 
   const borderLeftArr = document.querySelectorAll('.printCode .border-table-row-left');
 
   for (let index = 0; index < borderLeftArr.length; index++) {
-    const element = borderLeftArr[index];
+    const element = borderLeftArr[index] as any;
     element.style.borderColor = type === 'haveTem' ? '#000' : '#fff';
   }
 
   const table = document.querySelectorAll('.printCode .border-table');
 
   for (let index = 0; index < table.length; index++) {
-    const element = table[index];
+    const element = table[index] as any;
     element.style.borderColor = type === 'haveTem' ? '#000' : '#fff';
   }
 
   const lineArr = document.querySelectorAll('.printCode .line');
 
   for (let index = 0; index < lineArr.length; index++) {
-    const element = lineArr[index];
+    const element = lineArr[index] as any;
     element.style.borderColor = type === 'haveTem' ? '#000' : '#fff';
   }
 
@@ -229,8 +233,7 @@ const handleShowFreight = value => {
   console.log('freightNode :>> ', freightNode);
 
   for (let index = 0; index < freightNode.length; index++) {
-    const element = freightNode[index];
-    console.dir(element);
+    const element = freightNode[index] as any;
     element.style.color = value ? '#000' : '#fff';
   }
 };

src/store/index.js

@@ -7,6 +7,7 @@ import dict from './modules/dict';
 import isRefresh from './modules/isRefresh';
 import Customer from './modules/Customer';
 import getters from './getters';
+import print from './modules/print';
 
 const store = createStore({
   modules: {
@@ -17,6 +18,7 @@ const store = createStore({
     dict,
     isRefresh,
     Customer,
+    print,
   },
   getters,
 });

src/store/modules/print.js

@@ -0,0 +1,55 @@
+import { setStore, getStore } from 'utils/store'; // 从 'utils/store' 导入 setStore 和 getStore 方法
+import { getLodop } from '@/utils/LodopFuncs';
+
+const print = {
+  state: {
+    /** 本地打印机列表 */
+    printList: [],
+    /** 打印机 -- 配送单类型 */
+    deliveryPrintActiveIndex: 0,
+    /** 打印机 -- 标签打印机类型 */
+    titlePrintActiveIndex: 0,
+  },
+  mutations: {
+    /** 获取当前设备的打印机 */
+    GET_PRINT_LIST(state) {
+      const timer = setTimeout(() => {
+        let LODOP = getLodop();
+        const _count = LODOP.GET_PRINTER_COUNT();
+
+        const _name = LODOP.GET_PRINTER_NAME(-1);
+
+        const _deliveryPrintActiveName = window.localStorage.getItem('deliveryPrintActiveName');
+        const _titlePrintActiveName = window.localStorage.getItem('titlePrintActiveName');
+
+        for (let index = 0; index < _count; index++) {
+          const name = LODOP.GET_PRINTER_NAME(index);
+
+          _deliveryPrintActiveName &&
+            _deliveryPrintActiveName === name &&
+            (state.deliveryPrintActiveIndex = index);
+
+          _titlePrintActiveName &&
+            _titlePrintActiveName === name &&
+            (state.titlePrintActiveIndex = index);
+
+          if (name === _name) {
+            !_deliveryPrintActiveName && (state.deliveryPrintActiveIndex = index);
+            !_titlePrintActiveName && (state.titlePrintActiveIndex = index);
+          }
+          state.printList.push({ label: name, value: index });
+        }
+        clearTimeout(timer);
+      }, 2000);
+    },
+    /** 设置打印机 */
+    SET_PRINT_ACTIVE(state, action) {
+      state[action.type + 'ActiveIndex'] = action.activeIndex;
+      window.localStorage.setItem(
+        action.type + 'ActiveName',
+        state.printList[action.activeIndex].label
+      );
+    },
+  },
+};
+export default print;

src/utils/print.js

@@ -1,10 +1,12 @@
 import { getLodop } from '@/utils/LodopFuncs';
 import hwyPrintNew from '@/utils/print/index';
 import { ElMessage } from 'element-plus';
+import store from '@/store/';
 
 /** 处理标签打印 */
-const handleTitlePrint = (LODOP, templateData) => {
+const handleTitlePrint = (LODOP, templateData, type) => {
   LODOP.PRINT_INITA('');
+  LODOP.SET_PRINTER_INDEX(store.state.print[type + 'ActiveIndex']);
   // LODOP.SET_PRINT_MODE('WINDOW_DEFPRINTER', 'Godex G500');
   LODOP.SET_PRINT_STYLEA(0, 'TextNeatRow', true); //允许标点溢出，且英文单词拆开
   // LODOP.SET_PRINT_STYLE('FontColor', '#000000');
@@ -19,8 +21,9 @@ const handleTitlePrint = (LODOP, templateData) => {
 };
 
 /** 打印配送单 */
-const handleDeliveryPrint = (LODOP, templateData) => {
+const handleDeliveryPrint = (LODOP, templateData, type) => {
   LODOP.PRINT_INITA('');
+  LODOP.SET_PRINTER_INDEX(store.state.print[type + 'ActiveIndex']);
   // LODOP.SET_PRINT_MODE('WINDOW_DEFPRINTER', 'Godex G500');
   LODOP.SET_PRINT_STYLEA(0, 'TextNeatRow', true); //允许标点溢出，且英文单词拆开
   // LODOP.SET_PRINT_STYLE('FontColor', '#000000');
@@ -47,13 +50,6 @@ const print = (nodeList, type = 'deliveryPrint') => {
   // 初始化打印实例
   let LODOP = getLodop();
 
-  // const _count = LODOP.GET_PRINTER_COUNT();
-
-  // for (let index = 0; index < _count; index++) {
-  //   const name = LODOP.GET_PRINTER_NAME(index);
-  //   console.log('name :>> ', name);
-  // }
-
   // 当列表内没有元素时, 退出函数
   if (nodeList.length === 0) return;
 
@@ -64,8 +60,8 @@ const print = (nodeList, type = 'deliveryPrint') => {
     let templateData = orderNode.innerHTML;
     // let templateData="<h1>1111</h1>"
 
-    if (type === 'titlePrint') handleTitlePrint(LODOP, templateData);
-    else handleDeliveryPrint(LODOP, templateData);
+    if (type === 'titlePrint') handleTitlePrint(LODOP, templateData, type);
+    else handleDeliveryPrint(LODOP, templateData, type);
     // LODOP.NewPage();
     LODOP.PRINT(); //直接打印
     // LODOP.PRINT_DESIGN();