1

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

@@ -25,6 +25,12 @@
       </template>
       <span>导入</span>
     </a-button>
+    <a-button type="dashed" class="ele-btn-icon" @click="openCollect">
+      <template #icon>
+        <LinkOutlined />
+      </template>
+      <span>采集</span>
+    </a-button>
     <a-button type="dashed" class="ele-btn-icon" @click="handleExport">
       导出xls
     </a-button>
@@ -64,10 +70,10 @@
 </template>
 
 <script lang="ts" setup>
-  import { PlusOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons-vue';
+  import { PlusOutlined, DeleteOutlined, UploadOutlined, LinkOutlined } from '@ant-design/icons-vue';
   import { ref, watch } from 'vue';
   import { getCount } from '@/api/shop/shopGoods';
-  import type { GoodsCount, ShopGoodsParam } from '@/api/shop/shopGoods/model';
+  import type { GoodsCount, ShopGoods, ShopGoodsParam } from '@/api/shop/shopGoods/model';
   import useSearch from '@/utils/use-search';
   import { getMerchantId } from '@/utils/merchant';
   import { ShopGoodsCategory } from '@/api/shop/shopGoodsCategory/model';
@@ -75,7 +81,7 @@
   const props = withDefaults(
     defineProps<{
       // 选中的角色
-      selection?: [];
+      selection?: ShopGoods[];
       merchantId?: number;
       navigationList?: ShopGoodsCategory[];
     }>(),
@@ -105,6 +111,7 @@
     (e: 'remove'): void;
     (e: 'batchMove'): void;
     (e: 'import'): void;
+    (e: 'collect'): void;
     (e: 'export'): void;
   }>();
 
@@ -123,12 +130,17 @@
     emit('import');
   };
 
+  // 打开链接采集
+  const openCollect = () => {
+    emit('collect');
+  };
+
   // 导出
   const handleExport = () => {
     emit('export');
   };
 
-  const handleSearch = (e) => {
+  const handleSearch = (e: any) => {
     const text = e.target.value;
     resetFields();
     if (text === '出售中') {

src/views/shop/shopGoods/components/shop-goods-collect.vue

@@ -0,0 +1,154 @@
+<template>
+  <ele-modal
+    :width="620"
+    title="商品链接采集"
+    :visible="visible"
+    :confirm-loading="loading"
+    @update:visible="updateVisible"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ flex: '90px' }"
+      :wrapper-col="{ flex: '1' }"
+    >
+      <a-form-item label="商品链接" name="url">
+        <a-input
+          v-model:value="form.url"
+          allow-clear
+          placeholder="请输入商品详情页链接"
+        />
+      </a-form-item>
+      <a-form-item label="商品分类" name="categoryId">
+        <a-tree-select
+          v-model:value="form.categoryId"
+          allow-clear
+          :tree-data="navigationList"
+          tree-default-expand-all
+          :listHeight="600"
+          placeholder="请选择分类"
+          :dropdown-style="{ overflow: 'auto' }"
+        />
+      </a-form-item>
+      <a-form-item label="入库状态" name="status">
+        <a-radio-group v-model:value="form.status">
+          <a-radio :value="1">待上架</a-radio>
+          <a-radio :value="0">直接上架</a-radio>
+        </a-radio-group>
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-space>
+        <a-button @click="updateVisible(false)">取消</a-button>
+        <a-button type="primary" :loading="loading" @click="submit">
+          开始采集
+        </a-button>
+      </a-space>
+    </template>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, ref, watch } from 'vue';
+  import { message } from 'ant-design-vue';
+  import type { FormInstance, RuleObject } from 'ant-design-vue/es/form';
+  import { collectShopGoods } from '@/api/shop/shopGoods';
+  import type { ShopGoodsCollectParam } from '@/api/shop/shopGoods/model';
+  import type { ShopGoodsCategory } from '@/api/shop/shopGoodsCategory/model';
+  import { getMerchantId } from '@/utils/merchant';
+
+  const props = defineProps<{
+    visible: boolean;
+    navigationList?: ShopGoodsCategory[];
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const formRef = ref<FormInstance | null>(null);
+  const loading = ref(false);
+
+  const form = reactive<ShopGoodsCollectParam>({
+    url: '',
+    categoryId: undefined,
+    status: 1,
+    merchantId: getMerchantId() || undefined
+  });
+
+  const validateUrl = async (_rule: RuleObject, value?: string) => {
+    if (!value) {
+      return Promise.reject('请输入商品链接');
+    }
+    try {
+      const parsed = new URL(value);
+      if (!['http:', 'https:'].includes(parsed.protocol)) {
+        return Promise.reject('请输入正确的商品链接');
+      }
+      return Promise.resolve();
+    } catch (_) {
+      return Promise.reject('请输入正确的商品链接');
+    }
+  };
+
+  const rules = reactive<Record<string, RuleObject[]>>({
+    url: [
+      {
+        required: true,
+        validator: validateUrl,
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const resetForm = () => {
+    form.url = '';
+    form.categoryId = undefined;
+    form.status = 1;
+    form.merchantId = getMerchantId() || undefined;
+    formRef.value?.clearValidate();
+  };
+
+  const submit = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        collectShopGoods({
+          ...form,
+          url: form.url.trim()
+        })
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        form.merchantId = getMerchantId() || undefined;
+      } else {
+        resetForm();
+      }
+    }
+  );
+</script>

src/views/shop/shopGoods/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
+  <a-page-header :title="String(getPageTitle())" @back="goBack">
     <template #extra>
       <Extra />
     </template>
@@ -23,6 +23,7 @@
             @remove="removeBatch"
             @batchMove="openMove"
             @import="openImport"
+            @collect="openCollect"
             @export="handleExport"
           />
         </template>
@@ -85,11 +86,19 @@
       v-model:visible="showImport"
       @done="reload"
     />
+
+    <!-- 链接采集弹窗 -->
+    <ShopGoodsCollect
+      v-model:visible="showCollect"
+      :navigationList="navigationList"
+      @done="reload"
+    />
   </a-page-header>
 </template>
 
 <script lang="ts" setup>
   import { createVNode, ref } from 'vue';
+  import { useRouter } from 'vue-router';
   import { message, Modal } from 'ant-design-vue';
   import {
     ExclamationCircleOutlined,
@@ -107,6 +116,7 @@
   import ShopGoodsEdit from './components/shopGoodsEdit.vue';
   import Extra from '@/views/shop/shopGoods/components/extra.vue';
   import ShopGoodsImport from './components/shop-goods-import.vue';
+  import ShopGoodsCollect from './components/shop-goods-collect.vue';
   import { listShopGoods, pageShopGoods, removeShopGoods, removeBatchShopGoods, updateShopGoods } from '@/api/shop/shopGoods';
   import type { ShopGoods, ShopGoodsParam } from '@/api/shop/shopGoods/model';
   import { getPageTitle } from '@/utils/common';
@@ -117,6 +127,7 @@
 
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  const router = useRouter();
 
   // 表格选中数据
   const selection = ref<ShopGoods[]>([]);
@@ -128,11 +139,17 @@
   const showEdit = ref(false);
   // 是否显示导入弹窗
   const showImport = ref(false);
+  // 是否显示链接采集弹窗
+  const showCollect = ref(false);
   // 是否显示批量移动弹窗
   const showMove = ref(false);
   // 加载状态
   const loading = ref(true);
 
+  const goBack = () => {
+    router.go(-1);
+  };
+
   // 表格数据源
   const datasource: DatasourceFunction = ({
     page,
@@ -259,6 +276,11 @@
     showImport.value = true;
   };
 
+  // 打开链接采集
+  const openCollect = () => {
+    showCollect.value = true;
+  };
+
   /* 导出商品列表 */
   const handleExport = async () => {
     if (loading.value) {
@@ -302,7 +324,7 @@
       });
 
       const sheetName = `商品列表${dayjs(new Date()).format('YYYYMMDD')}`;
-      const workbook = {
+      const workbook: { SheetNames: string[]; Sheets: Record<string, any> } = {
         SheetNames: [sheetName],
         Sheets: {}
       };