From d87d542e2eb7d7d0d9177121bfcb4f7477b8db26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Mon, 6 Jul 2026 12:58:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(shop):=20=E6=B7=BB=E5=8A=A0=E5=95=86?=
 =?UTF-8?q?=E5=93=81=E8=AF=A6=E6=83=85=E5=92=8C=E5=9B=BE=E7=89=87=E6=89=B9?=
 =?UTF-8?q?=E9=87=8F=E5=AF=BC=E5=85=A5=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增商品详情批量导入组件，支持 xls、xlsx 文件上传
- 实现上传文件大小限制为 10MB，并提供上传进度反馈
- 新增商品图片批量导入组件，仅支持 zip 文件上传
- 图片导入限制文件大小为 50MB，要求图片文件名与商品编号对应
- 两个组件均内置错误提示和上传成功消息通知
- 通过事件机制通知父组件上传完成及控制弹窗显示状态
---
 .../components/shop-goods-detail-import.vue   | 77 +++++++++++++++++++
 .../components/shop-goods-image-import.vue    | 76 ++++++++++++++++++
 2 files changed, 153 insertions(+)
 create mode 100644 src/views/shop/shopGoods/components/shop-goods-detail-import.vue
 create mode 100644 src/views/shop/shopGoods/components/shop-goods-image-import.vue

diff --git a/src/views/shop/shopGoods/components/shop-goods-detail-import.vue b/src/views/shop/shopGoods/components/shop-goods-detail-import.vue
new file mode 100644
index 0000000..b412b55
--- /dev/null
+++ b/src/views/shop/shopGoods/components/shop-goods-detail-import.vue
@@ -0,0 +1,77 @@
+<template>
+  <ele-modal
+    :width="520"
+    :footer="null"
+    title="商品详情批量导入"
+    :visible="visible"
+    @update:visible="updateVisible"
+  >
+    <a-spin :spinning="loading">
+      <a-upload-dragger
+        accept=".xls,.xlsx"
+        :show-upload-list="false"
+        :customRequest="doUpload"
+        style="padding: 24px 0; margin-bottom: 16px"
+      >
+        <p class="ant-upload-drag-icon">
+          <CloudUploadOutlined />
+        </p>
+        <p class="ant-upload-hint">将文件拖到此处，或点击上传</p>
+      </a-upload-dragger>
+    </a-spin>
+    <div class="ele-text-center">
+      <span>只能上传 xls、xlsx 文件</span>
+    </div>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import { CloudUploadOutlined } from '@ant-design/icons-vue';
+  import { importShopGoodsDetails } from '@/api/shop/shopGoods';
+
+  defineProps<{
+    visible: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const loading = ref(false);
+
+  const doUpload = ({ file }) => {
+    if (
+      ![
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      ].includes(file.type)
+    ) {
+      message.error('只能选择 excel 文件');
+      return false;
+    }
+    if (file.size / 1024 / 1024 > 10) {
+      message.error('大小不能超过 10MB');
+      return false;
+    }
+    loading.value = true;
+    importShopGoodsDetails(file)
+      .then((msg) => {
+        loading.value = false;
+        message.success(msg);
+        updateVisible(false);
+        emit('done');
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+    return false;
+  };
+
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+</script>
diff --git a/src/views/shop/shopGoods/components/shop-goods-image-import.vue b/src/views/shop/shopGoods/components/shop-goods-image-import.vue
new file mode 100644
index 0000000..ea54a8a
--- /dev/null
+++ b/src/views/shop/shopGoods/components/shop-goods-image-import.vue
@@ -0,0 +1,76 @@
+<template>
+  <ele-modal
+    :width="520"
+    :footer="null"
+    title="商品图片批量导入"
+    :visible="visible"
+    @update:visible="updateVisible"
+  >
+    <a-spin :spinning="loading">
+      <a-upload-dragger
+        accept=".zip"
+        :show-upload-list="false"
+        :customRequest="doUpload"
+        style="padding: 24px 0; margin-bottom: 16px"
+      >
+        <p class="ant-upload-drag-icon">
+          <CloudUploadOutlined />
+        </p>
+        <p class="ant-upload-hint">将 zip 文件拖到此处，或点击上传</p>
+      </a-upload-dragger>
+    </a-spin>
+    <div class="ele-text-center">
+      <span>只能上传 zip 文件，图片文件名需与商品编号对应</span>
+    </div>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import { CloudUploadOutlined } from '@ant-design/icons-vue';
+  import { importShopGoodsImages } from '@/api/shop/shopGoods';
+
+  defineProps<{
+    visible: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const loading = ref(false);
+
+  const doUpload = ({ file }) => {
+    const isZip =
+      file.type === 'application/zip' ||
+      file.type === 'application/x-zip-compressed' ||
+      file.name.endsWith('.zip');
+    if (!isZip) {
+      message.error('只能选择 zip 文件');
+      return false;
+    }
+    if (file.size / 1024 / 1024 > 50) {
+      message.error('大小不能超过 50MB');
+      return false;
+    }
+    loading.value = true;
+    importShopGoodsImages(file)
+      .then((msg) => {
+        loading.value = false;
+        message.success(msg);
+        updateVisible(false);
+        emit('done');
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+    return false;
+  };
+
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+</script>