feat(shopGift): 添加礼品卡打印功能

- 在搜索组件中添加打印按钮
- 实现礼品卡数据获取和处理逻辑
- 生成完整的HTML打印文档
- 添加打印预览和实际打印功能
- 优化页面样式，确保打印效果

src/views/shop/shopGift/components/search.vue

@@ -1,15 +1,15 @@
 <!-- 搜索表单 -->
 <template>
   <a-space :size="10" style="flex-wrap: wrap">
-<!--    <a-button type="primary" class="ele-btn-icon" @click="add">-->
-<!--      <template #icon>-->
-<!--        <PlusOutlined />-->
-<!--      </template>-->
-<!--      <span>添加</span>-->
-<!--    </a-button>-->
-    <a-button type="primary"  class="ele-btn-icon" @click="openMultiAdd">
+    <!--    <a-button type="primary" class="ele-btn-icon" @click="add">-->
+    <!--      <template #icon>-->
+    <!--        <PlusOutlined />-->
+    <!--      </template>-->
+    <!--      <span>添加</span>-->
+    <!--    </a-button>-->
+    <a-button type="primary" class="ele-btn-icon" @click="openMultiAdd">
       <template #icon>
-        <PlusOutlined />
+        <PlusOutlined/>
       </template>
       <span>批量生成</span>
     </a-button>
@@ -26,312 +26,317 @@
       :icon="h(QrcodeOutlined)"
       @click="handleExport"
       :loading="exportLoading"
-      >导出二维码</a-button
+    >导出二维码
+    </a-button
     >
+    <a-button
+      type="text"
+      @click="handlePrint">打印
+    </a-button>
     <MakeCard v-model:visible="showMultiAdd" @done="done"></MakeCard>
   </a-space>
 </template>
 
 <script lang="ts" setup>
-  import { PlusOutlined, QrcodeOutlined } from '@ant-design/icons-vue';
-  import { watch, ref, h } from 'vue';
-  import {ShopGift, ShopGiftParam} from "@/api/shop/shopGift/model";
-  import MakeCard from "@/views/shop/shopGift/components/makeCard.vue";
-  import {listShopGift} from "@/api/shop/shopGift";
-  import {message} from "ant-design-vue";
-  import {
-    Document,
-    Packer,
-    Paragraph,
-    ImageRun,
-    AlignmentType,
-    Table,
-    TableRow,
-    TableCell,
-    WidthType
-  } from 'docx';
-  import { saveAs } from 'file-saver';
-  import QRCode from 'qrcode';
-  import useSearch from "@/utils/use-search";
+import {PlusOutlined, QrcodeOutlined} from '@ant-design/icons-vue';
+import {watch, ref, h} from 'vue';
+import {ShopGift, ShopGiftParam} from "@/api/shop/shopGift/model";
+import MakeCard from "@/views/shop/shopGift/components/makeCard.vue";
+import {listShopGift} from "@/api/shop/shopGift";
+import {message} from "ant-design-vue";
+import {
+  Document,
+  Packer,
+  Paragraph,
+  ImageRun,
+  AlignmentType,
+  Table,
+  TableRow,
+  TableCell,
+  WidthType
+} from 'docx';
+import {saveAs} from 'file-saver';
+import QRCode from 'qrcode';
+import useSearch from "@/utils/use-search";
 
-  const props = withDefaults(
-    defineProps<{
-      // 选中的角色
-      selection?: ShopGift[];
-    }>(),
-    {}
+const props = withDefaults(
+  defineProps<{
+    // 选中的角色
+    selection?: ShopGift[];
+  }>(),
+  {}
+);
+
+const emit = defineEmits<{
+  (e: 'search', where?: ShopGiftParam): void;
+  (e: 'add'): void;
+  (e: 'remove'): void;
+  (e: 'batchMove'): void;
+  (e: 'done'): void;
+}>();
+
+// 表单数据
+const {where} = useSearch<ShopGiftParam>({
+  keywords: ''
+});
+
+// 新增
+// const add = () => {
+//   emit('add');
+// };
+
+const reload = () => {
+  emit('search', {...where});
+};
+
+const done = () => {
+  emit('done');
+};
+
+const showMultiAdd = ref(false)
+const exportLoading = ref(false);
+
+const openMultiAdd = () => {
+  showMultiAdd.value = true
+};
+
+// 批量导出二维码到Word文档
+const handleExport = async () => {
+  try {
+    exportLoading.value = true;
+    message.loading('正在生成二维码文档，请稍候...', 0);
+
+    // 获取所有礼品卡数据
+    let giftList: ShopGift[] = [];
+    if (props.selection && props.selection.length > 0) {
+      // 如果有选中的数据，只导出选中的
+      giftList = props.selection;
+    } else {
+      // 如果没有选中，导出所有数据
+      giftList = await listShopGift();
+    }
+
+    if (!giftList || giftList.length === 0) {
+      message.error('没有礼品卡数据可导出');
+      return;
+    }
+
+    // 生成二维码图片
+    const qrCodeImages: { dataUrl: string; giftInfo: ShopGift }[] = [];
+
+    for (const gift of giftList) {
+      try {
+        // 生成二维码（使用礼品卡code作为内容）
+        const qrCodeDataUrl = await QRCode.toDataURL(String(gift.code), {
+          width: 200,
+          margin: 2,
+          color: {
+            dark: '#000000',
+            light: '#FFFFFF'
+          }
+        });
+
+        qrCodeImages.push({dataUrl: qrCodeDataUrl, giftInfo: gift});
+      } catch (error) {
+        console.error(`生成礼品卡 ${gift.code} 的二维码失败:`, error);
+      }
+    }
+
+    if (qrCodeImages.length === 0) {
+      message.error('二维码生成失败');
+      return;
+    }
+
+    // 尝试创建Word文档，如果失败则使用HTML方式
+    try {
+      await createWordDocument(qrCodeImages);
+      message.destroy();
+      message.success(`成功导出 ${qrCodeImages.length} 个礼品卡二维码`);
+    } catch (docError) {
+      console.warn('Word文档生成失败，使用HTML方式:', docError);
+      createHtmlDocument(qrCodeImages);
+      message.destroy();
+      message.success(
+        `成功生成 ${qrCodeImages.length} 个礼品卡二维码（HTML格式，可直接打印）`
+      );
+    }
+  } catch (error) {
+    console.error('导出失败:', error);
+    message.destroy();
+    message.error('导出失败，请重试');
+  } finally {
+    exportLoading.value = false;
+  }
+};
+
+// 创建Word文档
+const createWordDocument = async (
+  qrCodeImages: { dataUrl: string; giftInfo: ShopGift }[]
+) => {
+  const children: (Paragraph | Table)[] = [];
+
+  // 添加标题
+  children.push(
+    new Paragraph({
+      text: '礼品卡二维码清单',
+      alignment: AlignmentType.CENTER,
+      spacing: {after: 400}
+    })
   );
 
-  const emit = defineEmits<{
-    (e: 'search', where?: ShopGiftParam): void;
-    (e: 'add'): void;
-    (e: 'remove'): void;
-    (e: 'batchMove'): void;
-    (e: 'done'): void;
-  }>();
+  // 每行放置3个二维码，保持适当间距
+  const itemsPerRow = 3;
+  const rows = Math.ceil(qrCodeImages.length / itemsPerRow);
 
-  // 表单数据
-  const { where } = useSearch<ShopGiftParam>({
-    keywords: ''
-  });
+  for (let row = 0; row < rows; row++) {
+    const startIndex = row * itemsPerRow;
+    const endIndex = Math.min(startIndex + itemsPerRow, qrCodeImages.length);
+    const rowItems = qrCodeImages.slice(startIndex, endIndex);
 
-  // 新增
-  // const add = () => {
-  //   emit('add');
-  // };
+    // 创建表格行来放置二维码
+    const qrCodeCells: TableCell[] = [];
+    const infoCells: TableCell[] = [];
 
-  const reload = () => {
-    emit('search', {...where});
-  };
+    for (let i = 0; i < itemsPerRow; i++) {
+      if (i < rowItems.length) {
+        const item = rowItems[i];
 
- const done = () => {
-    emit('done');
-  };
-
-  const showMultiAdd = ref(false)
-  const exportLoading = ref(false);
-
-  const openMultiAdd = () => {
-    showMultiAdd.value = true
-  };
-
-  // 批量导出二维码到Word文档
-  const handleExport = async () => {
-    try {
-      exportLoading.value = true;
-      message.loading('正在生成二维码文档，请稍候...', 0);
-
-      // 获取所有礼品卡数据
-      let giftList: ShopGift[] = [];
-      if (props.selection && props.selection.length > 0) {
-        // 如果有选中的数据，只导出选中的
-        giftList = props.selection;
-      } else {
-        // 如果没有选中，导出所有数据
-        giftList = await listShopGift();
-      }
-
-      if (!giftList || giftList.length === 0) {
-        message.error('没有礼品卡数据可导出');
-        return;
-      }
-
-      // 生成二维码图片
-      const qrCodeImages: { dataUrl: string; giftInfo: ShopGift }[] = [];
-
-      for (const gift of giftList) {
-        try {
-          // 生成二维码（使用礼品卡code作为内容）
-          const qrCodeDataUrl = await QRCode.toDataURL(String(gift.code), {
-            width: 200,
-            margin: 2,
-            color: {
-              dark: '#000000',
-              light: '#FFFFFF'
-            }
-          });
-
-          qrCodeImages.push({ dataUrl: qrCodeDataUrl, giftInfo: gift });
-        } catch (error) {
-          console.error(`生成礼品卡 ${gift.code} 的二维码失败:`, error);
+        // 将DataURL转换为Buffer
+        const base64Data = item.dataUrl.split(',')[1];
+        const binaryData = atob(base64Data);
+        const bytes = new Uint8Array(binaryData.length);
+        for (let j = 0; j < binaryData.length; j++) {
+          bytes[j] = binaryData.charCodeAt(j);
         }
-      }
 
-      if (qrCodeImages.length === 0) {
-        message.error('二维码生成失败');
-        return;
-      }
+        qrCodeCells.push(
+          new TableCell({
+            children: [
+              new Paragraph({
+                children: [
+                  // @ts-ignore
+                  new ImageRun({
+                    data: bytes,
+                    transformation: {
+                      width: 150,
+                      height: 150
+                    }
+                  })
+                ],
+                alignment: AlignmentType.CENTER
+              })
+            ],
+            width: {size: 33, type: WidthType.PERCENTAGE}
+          })
+        );
 
-      // 尝试创建Word文档，如果失败则使用HTML方式
-      try {
-        await createWordDocument(qrCodeImages);
-        message.destroy();
-        message.success(`成功导出 ${qrCodeImages.length} 个礼品卡二维码`);
-      } catch (docError) {
-        console.warn('Word文档生成失败，使用HTML方式:', docError);
-        createHtmlDocument(qrCodeImages);
-        message.destroy();
-        message.success(
-          `成功生成 ${qrCodeImages.length} 个礼品卡二维码（HTML格式，可直接打印）`
+        infoCells.push(
+          new TableCell({
+            children: [
+              new Paragraph({
+                text: `${item.giftInfo.code || '未设置'}`,
+                alignment: AlignmentType.CENTER
+              }),
+              new Paragraph({
+                text: `${item.giftInfo.name || ''}`,
+                alignment: AlignmentType.CENTER
+              })
+            ],
+            width: {size: 33, type: WidthType.PERCENTAGE}
+          })
+        );
+      } else {
+        // 空单元格
+        qrCodeCells.push(
+          new TableCell({
+            children: [new Paragraph({text: ''})],
+            width: {size: 33, type: WidthType.PERCENTAGE}
+          })
+        );
+        infoCells.push(
+          new TableCell({
+            children: [new Paragraph({text: ''})],
+            width: {size: 33, type: WidthType.PERCENTAGE}
+          })
         );
       }
-    } catch (error) {
-      console.error('导出失败:', error);
-      message.destroy();
-      message.error('导出失败，请重试');
-    } finally {
-      exportLoading.value = false;
     }
-  };
 
-  // 创建Word文档
-  const createWordDocument = async (
-    qrCodeImages: { dataUrl: string; giftInfo: ShopGift }[]
-  ) => {
-    const children: (Paragraph | Table)[] = [];
-
-    // 添加标题
+    // 添加表格
     children.push(
-      new Paragraph({
-        text: '礼品卡二维码清单',
-        alignment: AlignmentType.CENTER,
-        spacing: { after: 400 }
+      new Table({
+        rows: [
+          new TableRow({
+            children: qrCodeCells
+          }),
+          new TableRow({
+            children: infoCells
+          })
+        ],
+        width: {size: 100, type: WidthType.PERCENTAGE}
       })
     );
 
-    // 每行放置3个二维码，保持适当间距
-    const itemsPerRow = 3;
-    const rows = Math.ceil(qrCodeImages.length / itemsPerRow);
+    // 添加行间距
+    children.push(
+      new Paragraph({
+        text: '',
+        spacing: {after: 400}
+      })
+    );
+  }
 
-    for (let row = 0; row < rows; row++) {
-      const startIndex = row * itemsPerRow;
-      const endIndex = Math.min(startIndex + itemsPerRow, qrCodeImages.length);
-      const rowItems = qrCodeImages.slice(startIndex, endIndex);
-
-      // 创建表格行来放置二维码
-      const qrCodeCells: TableCell[] = [];
-      const infoCells: TableCell[] = [];
-
-      for (let i = 0; i < itemsPerRow; i++) {
-        if (i < rowItems.length) {
-          const item = rowItems[i];
-
-          // 将DataURL转换为Buffer
-          const base64Data = item.dataUrl.split(',')[1];
-          const binaryData = atob(base64Data);
-          const bytes = new Uint8Array(binaryData.length);
-          for (let j = 0; j < binaryData.length; j++) {
-            bytes[j] = binaryData.charCodeAt(j);
-          }
-
-          qrCodeCells.push(
-            new TableCell({
-              children: [
-                new Paragraph({
-                  children: [
-                    // @ts-ignore
-                    new ImageRun({
-                      data: bytes,
-                      transformation: {
-                        width: 150,
-                        height: 150
-                      }
-                    })
-                  ],
-                  alignment: AlignmentType.CENTER
-                })
-              ],
-              width: { size: 33, type: WidthType.PERCENTAGE }
-            })
-          );
-
-          infoCells.push(
-            new TableCell({
-              children: [
-                new Paragraph({
-                  text: `${item.giftInfo.code || '未设置'}`,
-                  alignment: AlignmentType.CENTER
-                }),
-                new Paragraph({
-                  text: `${item.giftInfo.name || ''}`,
-                  alignment: AlignmentType.CENTER
-                })
-              ],
-              width: { size: 33, type: WidthType.PERCENTAGE }
-            })
-          );
-        } else {
-          // 空单元格
-          qrCodeCells.push(
-            new TableCell({
-              children: [new Paragraph({ text: '' })],
-              width: { size: 33, type: WidthType.PERCENTAGE }
-            })
-          );
-          infoCells.push(
-            new TableCell({
-              children: [new Paragraph({ text: '' })],
-              width: { size: 33, type: WidthType.PERCENTAGE }
-            })
-          );
-        }
-      }
-
-      // 添加表格
-      children.push(
-        new Table({
-          rows: [
-            new TableRow({
-              children: qrCodeCells
-            }),
-            new TableRow({
-              children: infoCells
-            })
-          ],
-          width: { size: 100, type: WidthType.PERCENTAGE }
-        })
-      );
-
-      // 添加行间距
-      children.push(
-        new Paragraph({
-          text: '',
-          spacing: { after: 400 }
-        })
-      );
-    }
-
-    // 创建文档
-    const doc = new Document({
-      sections: [
-        {
-          properties: {
-            page: {
-              size: {
-                orientation: 'portrait',
-                width: 11906, // A4宽度 (210mm)
-                height: 16838 // A4高度 (297mm)
-              },
-              margin: {
-                top: 1134, // 2cm
-                right: 1134, // 2cm
-                bottom: 1134, // 2cm
-                left: 1134 // 2cm
-              }
+  // 创建文档
+  const doc = new Document({
+    sections: [
+      {
+        properties: {
+          page: {
+            size: {
+              orientation: 'portrait',
+              width: 11906, // A4宽度 (210mm)
+              height: 16838 // A4高度 (297mm)
+            },
+            margin: {
+              top: 1134, // 2cm
+              right: 1134, // 2cm
+              bottom: 1134, // 2cm
+              left: 1134 // 2cm
             }
-          },
-          children
-        }
-      ]
+          }
+        },
+        children
+      }
+    ]
+  });
+
+  // 生成并下载文档
+  try {
+    const buffer = await Packer.toBlob(doc);
+    const fileName = `礼品卡二维码清单_${new Date()
+      .toISOString()
+      .slice(0, 10)}.docx`;
+    saveAs(buffer, fileName);
+  } catch (error) {
+    console.error('文档生成失败:', error);
+    // 如果Packer.toBlob失败，尝试使用toBuffer
+    const buffer = await Packer.toBuffer(doc);
+    const blob = new Blob([buffer], {
+      type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
     });
+    const fileName = `礼品卡二维码清单_${new Date()
+      .toISOString()
+      .slice(0, 10)}.docx`;
+    saveAs(blob, fileName);
+  }
+};
 
-    // 生成并下载文档
-    try {
-      const buffer = await Packer.toBlob(doc);
-      const fileName = `礼品卡二维码清单_${new Date()
-        .toISOString()
-        .slice(0, 10)}.docx`;
-      saveAs(buffer, fileName);
-    } catch (error) {
-      console.error('文档生成失败:', error);
-      // 如果Packer.toBlob失败，尝试使用toBuffer
-      const buffer = await Packer.toBuffer(doc);
-      const blob = new Blob([buffer], {
-        type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-      });
-      const fileName = `礼品卡二维码清单_${new Date()
-        .toISOString()
-        .slice(0, 10)}.docx`;
-      saveAs(blob, fileName);
-    }
-  };
-
-  // 创建HTML文档（备用方案）
-  const createHtmlDocument = (
-    qrCodeImages: { dataUrl: string; giftInfo: ShopGift }[]
-  ) => {
-    const itemsPerRow = 3;
-    let htmlContent = `
+// 创建HTML文档（备用方案）
+const createHtmlDocument = (
+  qrCodeImages: { dataUrl: string; giftInfo: ShopGift }[]
+) => {
+  const itemsPerRow = 3;
+  let htmlContent = `
       <!DOCTYPE html>
       <html>
       <head>
@@ -382,8 +387,8 @@
         <div class="qr-grid">
     `;
 
-    qrCodeImages.forEach((item) => {
-      htmlContent += `
+  qrCodeImages.forEach((item) => {
+    htmlContent += `
         <div class="qr-item">
           <img src="${item.dataUrl}" alt="QR Code" class="qr-code">
           <div class="qr-info">
@@ -393,9 +398,9 @@
           </div>
         </div>
       `;
-    });
+  });
 
-    htmlContent += `
+  htmlContent += `
         </div>
         <div class="no-print" style="text-align: center; margin-top: 30px;">
           <button onclick="window.print()" style="padding: 10px 20px; font-size: 16px;">打印文档</button>
@@ -405,23 +410,218 @@
       </html>
     `;
 
-    // 在新窗口中打开HTML文档
-    const newWindow = window.open('', '_blank');
-    if (newWindow) {
-      newWindow.document.write(htmlContent);
-      newWindow.document.close();
+  // 在新窗口中打开HTML文档
+  const newWindow = window.open('', '_blank');
+  if (newWindow) {
+    newWindow.document.write(htmlContent);
+    newWindow.document.close();
+  } else {
+    // 如果弹窗被阻止，创建下载链接
+    const blob = new Blob([htmlContent], {type: 'text/html;charset=utf-8'});
+    const fileName = `礼品卡二维码清单_${new Date()
+      .toISOString()
+      .slice(0, 10)}.html`;
+    saveAs(blob, fileName);
+  }
+};
+
+// 使用原生 window.print() 的打印功能
+const handlePrint = async () => {
+  try {
+    message.loading('正在准备打印数据...', 0);
+
+    // 获取打印数据
+    let printData: ShopGift[] = [];
+
+    if (props.selection && props.selection.length > 0) {
+      printData = props.selection;
     } else {
-      // 如果弹窗被阻止，创建下载链接
-      const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
-      const fileName = `礼品卡二维码清单_${new Date()
-        .toISOString()
-        .slice(0, 10)}.html`;
-      saveAs(blob, fileName);
+      printData = await listShopGift();
     }
+
+    if (!printData || printData.length === 0) {
+      message.destroy();
+      message.warning('没有数据可以打印');
+      return;
+    }
+
+    message.destroy();
+
+    // 创建打印窗口
+    const printWindow = window.open('', '_blank');
+    if (!printWindow) {
+      message.error('无法打开打印窗口，请检查浏览器弹窗设置');
+      return;
+    }
+
+    // 生成完整的HTML文档
+    const printHtml = createPrintHtml(printData);
+
+    // 写入HTML内容
+    printWindow.document.write(printHtml);
+    printWindow.document.close();
+
+    // 等待内容加载完成后打印
+    printWindow.onload = () => {
+      printWindow.print();
+      // 打印完成后关闭窗口
+      printWindow.onafterprint = () => {
+        printWindow.close();
+      };
+    };
+
+  } catch (error) {
+    message.destroy();
+    console.error('打印失败:', error);
+    message.error('打印失败，请重试');
+  }
+};
+
+// 创建完整的打印HTML文档
+const createPrintHtml = (data: ShopGift[]) => {
+  const getStatusText = (record: ShopGift) => {
+    if (record.userId == 0) return '未领取';
+    if (record.userId > 0 && record.status === 0) return '已领取';
+    if (record.status === 1) return '已使用';
+    if (record.status === 2) return '已失效';
+    return '未知';
   };
 
-  watch(
-    () => props.selection,
-    () => {}
-  );
+  // 安全地处理数据，避免 undefined 或 null 值
+  const safeValue = (value: any) => {
+    if (value === null || value === undefined) return '';
+    return String(value).replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  };
+
+  let tableRows = '';
+  data.forEach(record => {
+    tableRows += `
+      <tr>
+        <td>${safeValue(record.id)}</td>
+        <td>${safeValue(record.name)}</td>
+        <td>${safeValue(record.code)}</td>
+        <td>${safeValue(record.goodsName)}</td>
+        <td>${safeValue(getStatusText(record))}</td>
+        <td>${safeValue(record.createTime)}</td>
+      </tr>`;
+  });
+
+  return `
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="UTF-8">
+      <title>礼品卡清单</title>
+      <style>
+        @page {
+          margin: 15mm;
+          size: A4;
+        }
+
+        body {
+          font-family: Arial, "Microsoft YaHei", sans-serif;
+          margin: 0;
+          padding: 0;
+          font-size: 14px;
+        }
+
+        .header {
+          text-align: center;
+          font-size: 20px;
+          font-weight: bold;
+          margin-bottom: 20px;
+          padding-bottom: 10px;
+          border-bottom: 2px solid #333;
+        }
+
+        .info {
+          margin-bottom: 15px;
+          font-size: 12px;
+          color: #666;
+        }
+
+        table {
+          width: 100%;
+          border-collapse: collapse;
+          margin-top: 10px;
+        }
+
+        th, td {
+          border: 1px solid #333;
+          padding: 8px;
+          text-align: center;
+          font-size: 12px;
+        }
+
+        th {
+          background-color: #f5f5f5;
+          font-weight: bold;
+          height: 35px;
+        }
+
+        tr:nth-child(even) {
+          background-color: #f9f9f9;
+        }
+
+        .footer {
+          margin-top: 20px;
+          text-align: right;
+          font-size: 12px;
+          color: #666;
+        }
+
+        @media print {
+          .no-print {
+            display: none !important;
+          }
+
+          body {
+            -webkit-print-color-adjust: exact;
+            print-color-adjust: exact;
+          }
+        }
+      </style>
+    </head>
+    <body>
+      <div class="header">礼品卡清单</div>
+
+      <div class="info">
+        <div>打印时间：${new Date().toLocaleString()}</div>
+        <div>数据条数：${data.length} 条</div>
+      </div>
+
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>名称</th>
+            <th>秘钥</th>
+            <th>商品</th>
+            <th>状态</th>
+            <th>创建时间</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${tableRows}
+        </tbody>
+      </table>
+
+      <div class="footer">
+        <div>共 ${data.length} 条记录</div>
+      </div>
+
+      <div class="no-print" style="text-align: center; margin-top: 20px;">
+        <button onclick="window.print()" style="padding: 10px 20px; font-size: 14px;">重新打印</button>
+        <button onclick="window.close()" style="padding: 10px 20px; font-size: 14px; margin-left: 10px;">关闭</button>
+      </div>
+    </body>
+    </html>
+  `;
+};
+
+watch(
+  () => props.selection,
+  () => {
+  }
+);
 </script>

src/views/shop/shopGift/index.vue

@@ -76,7 +76,7 @@
   import Search from './components/search.vue';
   import {getPageTitle} from '@/utils/common';
   import ShopGiftEdit from './components/shopGiftEdit.vue';
-  import { pageShopGift, removeShopGift, removeBatchShopGift } from '@/api/shop/shopGift';
+  import { pageShopGift, removeShopGift, removeBatchShopGift, listShopGift } from '@/api/shop/shopGift';
   import type { ShopGift, ShopGiftParam } from '@/api/shop/shopGift/model';
 
   // 表格实例
@@ -240,6 +240,7 @@
       }
     };
   };
+
   query();
 </script>
 

src/views/shop/shopOrder/index.vue

@@ -115,9 +115,9 @@
                 <a
                   @click.stop="handleCancelOrder(record)"
                 >
-                  <a class="ele-text-warning">
+                  <span class="ele-text-warning">
                     <CloseOutlined /> 取消
-                  </a>
+                  </span>
                 </a>
               </template>