feat：【antd/ele】将文章的商品关联字段从手动输入 SPU 编号改为使用 SpuShowcase 组件选择商品

apps/web-antd/src/views/mall/promotion/article/data.ts

@@ -96,14 +96,10 @@ export function useFormSchema(): VbenFormSchema[] {
       defaultValue: true,
     },
     {
-      // TODO: @puhui999：商品关联
       fieldName: 'spuId',
       label: '商品关联',
       component: 'Input',
       formItemClass: 'col-span-2',
-      componentProps: {
-        placeholder: '请输入商品 SPU 编号',
-      },
     },
     {
       fieldName: 'sort',

apps/web-antd/src/views/mall/promotion/article/modules/form.vue

@@ -14,6 +14,7 @@ import {
   updateArticle,
 } from '#/api/mall/promotion/article';
 import { $t } from '#/locales';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
@@ -41,6 +42,10 @@ const [Form, formApi] = useVbenForm({
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
+    // 同步商品选择到表单，确保验证时能获取到值
+    if (formData.value?.spuId) {
+      await formApi.setFieldValue('spuId', formData.value.spuId);
+    }
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
@@ -82,6 +87,11 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal :title="getTitle" class="w-2/5">
-    <Form class="mx-4" />
+    <Form class="mx-4">
+      <!-- 自定义插槽：商品选择 -->
+      <template #spuId>
+        <SpuShowcase v-model="formData!.spuId" :limit="1" />
+      </template>
+    </Form>
   </Modal>
 </template>

apps/web-ele/src/views/mall/promotion/article/data.ts

@@ -92,14 +92,10 @@ export function useFormSchema(): VbenFormSchema[] {
       defaultValue: true,
     },
     {
-      // TODO: @puhui999：商品关联
       fieldName: 'spuId',
       label: '商品关联',
       component: 'Input',
       formItemClass: 'col-span-2',
-      componentProps: {
-        placeholder: '请输入商品 SPU 编号',
-      },
     },
     {
       fieldName: 'sort',

apps/web-ele/src/views/mall/promotion/article/modules/form.vue

@@ -14,6 +14,7 @@ import {
   updateArticle,
 } from '#/api/mall/promotion/article';
 import { $t } from '#/locales';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
@@ -41,6 +42,10 @@ const [Form, formApi] = useVbenForm({
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
+    // 同步商品选择到表单，确保验证时能获取到值
+    if (formData.value?.spuId) {
+      await formApi.setFieldValue('spuId', formData.value.spuId);
+    }
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
@@ -82,6 +87,11 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal :title="getTitle" class="w-2/5">
-    <Form class="mx-4" />
+    <Form class="mx-4">
+      <!-- 自定义插槽：商品选择 -->
+      <template #spuId>
+        <SpuShowcase v-model="formData!.spuId" :limit="1" />
+      </template>
+    </Form>
   </Modal>
 </template>