From 2e4b788c5d7ca6ea23964bd7e94240097ed8eaf0 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 9 Oct 2025 17:50:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20spu=20=E4=BF=9D=E6=8C=81=E4=B8=80?=
 =?UTF-8?q?=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/product/spu/modules/form-data.ts     | 262 +++++++++++++++
 .../views/mall/product/spu/modules/form.vue   | 305 +++++++++---------
 2 files changed, 408 insertions(+), 159 deletions(-)
 create mode 100644 apps/web-ele/src/views/mall/product/spu/modules/form-data.ts

diff --git a/apps/web-ele/src/views/mall/product/spu/modules/form-data.ts b/apps/web-ele/src/views/mall/product/spu/modules/form-data.ts
new file mode 100644
index 000000000..c29094025
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/modules/form-data.ts
@@ -0,0 +1,262 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { DeliveryTypeEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { handleTree } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getSimpleBrandList } from '#/api/mall/product/brand';
+import { getCategoryList } from '#/api/mall/product/category';
+import { getSimpleTemplateList } from '#/api/mall/trade/delivery/expressTemplate';
+
+/** 基础设置的表单 */
+export function useInfoFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商品名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'categoryId',
+      label: '分类名称',
+      // component: 'ApiCascader',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: async () => {
+          const data = await getCategoryList({});
+          return handleTree(data);
+        },
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择商品分类',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'brandId',
+      label: '商品品牌',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleBrandList(),
+        labelField: 'name',
+        valueField: 'id',
+        allowClear: true,
+        placeholder: '请选择商品品牌',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'keyword',
+      label: '商品关键字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入商品关键字',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'introduction',
+      label: '商品简介',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入商品简介',
+        autoSize: { minRows: 2, maxRows: 2 },
+        showCount: true,
+        maxlength: 128,
+        allowClear: true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'picUrl',
+      label: '商品封面图',
+      component: 'ImageUpload',
+      componentProps: {
+        maxSize: 30,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sliderPicUrls',
+      label: '商品轮播图',
+      component: 'ImageUpload',
+      componentProps: {
+        maxNumber: 10,
+        multiple: true,
+        maxSize: 30,
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 价格库存的表单 */
+export function useSkuFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'subCommissionType',
+      label: '分销类型',
+      component: 'RadioGroup',
+      componentProps: {
+        allowClear: true,
+        options: [
+          {
+            label: '默认设置',
+            value: false,
+          },
+          {
+            label: '单独设置',
+            value: true,
+          },
+        ],
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'specType',
+      label: '商品规格',
+      component: 'RadioGroup',
+      componentProps: {
+        allowClear: true,
+        options: [
+          {
+            label: '单规格',
+            value: false,
+          },
+          {
+            label: '多规格',
+            value: true,
+          },
+        ],
+      },
+      rules: 'required',
+    },
+    // TODO @xingyu：待补充商品属性
+  ];
+}
+
+/** 物流设置的表单 */
+export function useDeliveryFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'deliveryTypes',
+      label: '配送方式',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.TRADE_DELIVERY_TYPE, 'number'),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'deliveryTemplateId',
+      label: '运费模板',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleTemplateList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+      dependencies: {
+        triggerFields: ['deliveryTypes'],
+        show: (values) =>
+          !!values.deliveryTypes &&
+          values.deliveryTypes.includes(DeliveryTypeEnum.EXPRESS.type),
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 商品详情的表单 */
+export function useDescriptionFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '商品详情',
+      component: 'RichTextarea',
+      componentProps: {
+        placeholder: '请输入商品详情',
+        height: 1000,
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 其它设置的表单 */
+export function useOtherFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '商品排序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
+      rules: z.number().min(0).optional().default(0),
+    },
+    {
+      fieldName: 'giveIntegral',
+      label: '赠送积分',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
+      rules: z.number().min(0).optional().default(0),
+    },
+    {
+      fieldName: 'virtualSalesCount',
+      label: '虚拟销量',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
+      rules: z.number().min(0).optional().default(0),
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/product/spu/modules/form.vue b/apps/web-ele/src/views/mall/product/spu/modules/form.vue
index c771aff93..adcad4c02 100644
--- a/apps/web-ele/src/views/mall/product/spu/modules/form.vue
+++ b/apps/web-ele/src/views/mall/product/spu/modules/form.vue
@@ -1,104 +1,105 @@
 <script lang="ts" setup>
 import type { MallSpuApi } from '#/api/mall/product/spu';
 
-import { onMounted, ref, unref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
 
-import { Page } from '@vben/common-ui';
-import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
+import { ContentWrap, Page } from '@vben/common-ui';
+import { convertToInteger, formatToFraction } from '@vben/utils';
 
-import { ElMessage } from 'element-plus';
+import { ElButton, ElTabs } from 'element-plus';
 
-import * as ProductSpuApi from '#/api/mall/product/spu';
+import { useVbenForm } from '#/adapter/form';
+import { createSpu, getSpu, updateSpu } from '#/api/mall/product/spu';
 
-import DeliveryForm from '../components/delivery-form.vue';
-import DescriptionForm from '../components/description-form.vue';
-import InfoForm from '../components/info-form.vue';
-import OtherForm from '../components/other-form.vue';
-import SkuForm from '../components/sku-form.vue';
+import {
+  useDeliveryFormSchema,
+  useDescriptionFormSchema,
+  useInfoFormSchema,
+  useOtherFormSchema,
+  useSkuFormSchema,
+} from './form-data';
+
+const spuId = ref<number>();
+const { params } = useRoute();
 
 const activeTab = ref('info');
-const activeName = ref('info'); // Tag 激活的窗口
 
-// SPU 表单数据
-const formData = ref<MallSpuApi.Spu>({
-  name: '', // 商品名称
-  categoryId: undefined, // 商品分类
-  keyword: '', // 关键字
-  picUrl: '', // 商品封面图
-  sliderPicUrls: [], // 商品轮播图
-  introduction: '', // 商品简介
-  deliveryTypes: [], // 配送方式数组
-  deliveryTemplateId: undefined, // 运费模版
-  brandId: undefined, // 商品品牌
-  specType: false, // 商品规格
-  subCommissionType: false, // 分销类型
-  skus: [
-    {
-      price: 0, // 商品价格
-      marketPrice: 0, // 市场价
-      costPrice: 0, // 成本价
-      barCode: '', // 商品条码
-      picUrl: '', // 图片地址
-      stock: 0, // 库存
-      weight: 0, // 商品重量
-      volume: 0, // 商品体积
-      firstBrokeragePrice: 0, // 一级分销的佣金
-      secondBrokeragePrice: 0, // 二级分销的佣金
+const [InfoForm, infoFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
     },
-  ],
-  description: '', // 商品详情
-  sort: 0, // 商品排序
-  giveIntegral: 0, // 赠送积分
-  virtualSalesCount: 0, // 虚拟销量
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useInfoFormSchema(),
+  showDefaultActions: false,
 });
 
-const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const { push } = useRouter(); // 路由
-const { params } = useRoute(); // 查询参数
-/** 获得详情 */
-const getDetail = async () => {
-  const id = params.id as unknown as number;
-  if (id) {
-    formLoading.value = true;
-    try {
-      const res = (await ProductSpuApi.getSpu(id)) as MallSpuApi.Spu;
-      res.skus?.forEach((item: MallSpuApi.Sku) => {
-        // 回显价格分转元
-        item.price = formatToFraction(item.price);
-        item.marketPrice = formatToFraction(item.marketPrice);
-        item.costPrice = formatToFraction(item.costPrice);
-        item.firstBrokeragePrice = formatToFraction(item.firstBrokeragePrice);
-        item.secondBrokeragePrice = formatToFraction(item.secondBrokeragePrice);
-      });
-      formData.value = res;
-    } finally {
-      formLoading.value = false;
-    }
-  }
-};
+const [SkuForm, skuFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useSkuFormSchema(),
+  showDefaultActions: false,
+});
 
-/** 提交按钮 */
-const infoRef = ref<InstanceType<typeof InfoForm>>();
-const skuRef = ref<InstanceType<typeof SkuForm>>();
-const deliveryRef = ref<InstanceType<typeof DeliveryForm>>();
-const descriptionRef = ref<InstanceType<typeof DescriptionForm>>();
-const otherRef = ref<InstanceType<typeof OtherForm>>();
-const submitForm = async () => {
-  // 提交请求
-  formLoading.value = true;
-  try {
-    // 校验各表单
-    await unref(infoRef)?.validate();
-    await unref(skuRef)?.validate();
-    await unref(deliveryRef)?.validate();
-    await unref(descriptionRef)?.validate();
-    await unref(otherRef)?.validate();
-    // 深拷贝一份, 这样最终 server 端不满足，不需要影响原始数据
-    const deepCopyFormData = cloneDeep(unref(formData.value)) as MallSpuApi.Spu;
-    deepCopyFormData.skus!.forEach((item) => {
-      // 给sku name赋值
-      item.name = deepCopyFormData.name;
+const [DeliveryForm, deliveryFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useDeliveryFormSchema(),
+  showDefaultActions: false,
+});
+
+const [DescriptionForm, descriptionFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'vertical',
+  schema: useDescriptionFormSchema(),
+  showDefaultActions: false,
+});
+
+const [OtherForm, otherFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useOtherFormSchema(),
+  showDefaultActions: false,
+});
+
+async function onSubmit() {
+  const values: MallSpuApi.Spu = await infoFormApi
+    .merge(skuFormApi)
+    .merge(deliveryFormApi)
+    .merge(descriptionFormApi)
+    .merge(otherFormApi)
+    .submitAllForm(true);
+
+  if (values.skus) {
+    values.skus.forEach((item) => {
       // sku相关价格元转分
       item.price = convertToInteger(item.price);
       item.marketPrice = convertToInteger(item.marketPrice);
@@ -106,85 +107,71 @@ const submitForm = async () => {
       item.firstBrokeragePrice = convertToInteger(item.firstBrokeragePrice);
       item.secondBrokeragePrice = convertToInteger(item.secondBrokeragePrice);
     });
-    // 处理轮播图列表
-    const newSliderPicUrls: any[] = [];
-    deepCopyFormData.sliderPicUrls!.forEach((item: any) => {
-      // 如果是前端选的图
-      typeof item === 'object'
-        ? newSliderPicUrls.push(item.url)
-        : newSliderPicUrls.push(item);
-    });
-    deepCopyFormData.sliderPicUrls = newSliderPicUrls;
-    // 校验都通过后提交表单
-    const data = deepCopyFormData as MallSpuApi.Spu;
-    const id = params.id as unknown as number;
-    if (id) {
-      await ProductSpuApi.updateSpu(data);
-      ElMessage.success('更新成功');
-    } else {
-      await ProductSpuApi.createSpu(data);
-      ElMessage.success('创建成功');
-    }
-    close();
-  } finally {
-    formLoading.value = false;
   }
-};
+  // 处理轮播图列表
+  const newSliderPicUrls: any[] = [];
+  values.sliderPicUrls!.forEach((item: any) => {
+    // 如果是前端选的图
+    typeof item === 'object'
+      ? newSliderPicUrls.push(item.url)
+      : newSliderPicUrls.push(item);
+  });
+  values.sliderPicUrls = newSliderPicUrls;
 
-/** 关闭按钮 */
-const close = () => {
-  push({ name: 'ProductSpu' });
-};
+  await (spuId.value ? updateSpu(values) : createSpu(values));
+}
+
+async function initDate() {
+  spuId.value = params.id as unknown as number;
+  if (!spuId.value) {
+    return;
+  }
+  const res = await getSpu(spuId.value);
+  if (res.skus) {
+    res.skus.forEach((item) => {
+      // 回显价格分转元
+      item.price = formatToFraction(item.price);
+      item.marketPrice = formatToFraction(item.marketPrice);
+      item.costPrice = formatToFraction(item.costPrice);
+      item.firstBrokeragePrice = formatToFraction(item.firstBrokeragePrice);
+      item.secondBrokeragePrice = formatToFraction(item.secondBrokeragePrice);
+    });
+  }
+  infoFormApi.setValues(res);
+  skuFormApi.setValues(res);
+  deliveryFormApi.setValues(res);
+  descriptionFormApi.setValues(res);
+  otherFormApi.setValues(res);
+}
 
-/** 初始化 */
 onMounted(async () => {
-  await getDetail();
+  await initDate();
 });
 </script>
 
 <template>
-  <!-- TODO @霖：样式有点丑，要不照 vue3 + element-plus 在优化下？ -->
-  <Page :auto-content-height="true">
-    <ElTabs v-model="activeTab">
-      <ElTabPane label="基础设置" name="info">
-        <InfoForm
-          :prop-form-data="formData"
-          v-model:active-name="activeName"
-          ref="infoRef"
-        />
-      </ElTabPane>
-      <ElTabPane label="价格库存" name="sku">
-        <SkuForm
-          :prop-form-data="formData"
-          v-model:active-name="activeName"
-          ref="skuRef"
-        />
-      </ElTabPane>
-      <ElTabPane label="物流设置" name="delivery">
-        <DeliveryForm
-          :prop-form-data="formData"
-          v-model:active-name="activeName"
-          ref="deliveryRef"
-        />
-      </ElTabPane>
-      <ElTabPane label="商品详情" name="description">
-        <DescriptionForm
-          :prop-form-data="formData"
-          v-model:active-name="activeName"
-          ref="descriptionRef"
-        />
-      </ElTabPane>
-      <ElTabPane label="其它设置" name="other">
-        <OtherForm
-          :prop-form-data="formData"
-          v-model:active-name="activeName"
-          ref="otherRef"
-        />
-      </ElTabPane>
-    </ElTabs>
-    <ElButton type="primary" :loading="formLoading" @click="submitForm">
-      保存
-    </ElButton>
-    <ElButton @click="close">返回</ElButton>
+  <Page auto-content-height>
+    <ContentWrap class="h-full w-full pb-8">
+      <template #extra>
+        <ElButton type="primary" @click="onSubmit"> 保存 </ElButton>
+      </template>
+      <ElTabs v-model="activeTab">
+        <ElTabs.TabPane label="基础设置" name="info">
+          <InfoForm class="w-3/5" />
+        </ElTabs.TabPane>
+        <ElTabs.TabPane label="价格库存" name="sku">
+          <SkuForm class="w-3/5" />
+        </ElTabs.TabPane>
+        <ElTabs.TabPane label="物流设置" name="delivery">
+          <DeliveryForm class="w-3/5" />
+        </ElTabs.TabPane>
+        <ElTabs.TabPane label="商品详情" name="description">
+          <DescriptionForm class="w-3/5" />
+        </ElTabs.TabPane>
+        <ElTabs.TabPane label="其它设置" name="other">
+          <OtherForm class="w-3/5" />
+        </ElTabs.TabPane>
+      </ElTabs>
+    </ContentWrap>
   </Page>
 </template>