feat(标签打印): 优化标签打印功能并新增批量导出

- 新增html2canvas依赖以支持高清打印
- 重构标签打印逻辑，解决二维码丢失和文字模糊问题
- 优化外标签样式布局和公司名称显示
- 新增标签预览功能，可在物料列表中直接查看
- 实现批量导出功能，支持任务规划和进度展示
- 添加导出配置选项，可调整清晰度和单次导出数量

klp-ui/src/views/wms/coil/panels/do.vue

@@ -42,7 +42,7 @@
               <div class="card-header">
                 <div class="header-left">
                   <el-tag type="info" size="small" class="coil-no-tag">{{ item.currentCoilNo }}</el-tag>
-                  <span class="material-type">{{ item.materialType || '原料' }}</span>
+                  <!-- <span class="material-type">{{ item.materialType || '原料' }}</span> -->
                   <el-popover v-if="item.rawMaterial || item.product" placement="top" width="280" trigger="hover"
                     popper-class="material-params-popover">
                     <div class="material-params-content">
@@ -136,6 +136,8 @@
                     </div>
                     <i slot="reference" class="el-icon-setting param-icon"></i>
                   </el-popover>
+
+                  <i class="el-icon-view param-icon" @click="handlePreviewLabel(item)" title="查看标签"></i>
                 </div>
               </div>
 
@@ -330,6 +332,11 @@
         <el-button @click="cancelException">取 消</el-button>
       </div>
     </el-dialog>
+
+     <!-- 标签预览弹窗 -->
+    <el-dialog title="标签预览" :visible.sync="labelRender.visible" append-to-body>
+      <label-render :content="labelRender.data" :labelType="labelRender.type" />
+    </el-dialog>
   </div>
 </template>
 
@@ -340,6 +347,7 @@ import { parseTime } from '@/utils/klp'
 import ProductInfo from '@/components/KLPService/Renderer/ProductInfo'
 import RawMaterialInfo from '@/components/KLPService/Renderer/RawMaterialInfo'
 import { addCoilAbnormal } from '@/api/wms/coilAbnormal'
+import LabelRender from './LabelRender/index.vue'
 
 export default {
   name: 'DoPage',
@@ -356,7 +364,8 @@ export default {
   },
   components: {
     ProductInfo,
-    RawMaterialInfo
+    RawMaterialInfo,
+    LabelRender
   },
   data() {
     return {
@@ -372,6 +381,11 @@ export default {
         enterCoilNo: null,
         currentCoilNo: null
       },
+      labelRender: {
+        visible: false,
+        data: {},
+        type: '2'
+      },
 
       // 待操作列表相关
       actionLoading: false,
@@ -418,6 +432,7 @@ export default {
         }
       }
     },
+
     tabs: {
       handler(newVal) {
         if (newVal.length > 0) {
@@ -462,6 +477,19 @@ export default {
   methods: {
     parseTime,
 
+     /** 预览标签 */
+    handlePreviewLabel(row) {
+      this.labelRender.visible = true;
+      const item = row.itemType === 'product' ? row.product : row.rawMaterial;
+      const itemName = row.itemType === 'product' ? item?.productName || '' : item?.rawMaterialName || '';
+
+      this.labelRender.type = row.itemType === 'product' ? '3' : '2'
+      this.labelRender.data = {
+        ...row,
+        itemName: itemName,
+        updateTime: row.updateTime?.split(' ')[0] || '',
+      };
+    },
     // ========== 物料列表相关方法 ==========
     /** 查询物料列表 */
     getMaterialCoil() {