feat：【mall 商城】优惠劵-模版（100% antd）

apps/web-antd/src/api/mall/promotion/coupon/couponTemplate.ts

@@ -20,18 +20,12 @@ export namespace MallCouponTemplateApi {
     fixedStartTerm: number; // 领取日期-开始天数
     fixedEndTerm: number; // 领取日期-结束天数
     discountType: number; // 优惠类型
-    discountPercent: number; // 折扣百分比
+    discountPercent?: number; // 折扣百分比
     discountPrice: number; // 优惠金额
-    discountLimitPrice: number; // 折扣上限
+    discountLimitPrice?: number; // 折扣上限
     takeCount: number; // 已领取数量
     useCount: number; // 已使用数量
   }
-
-  /** 优惠券模板状态更新 */
-  export interface StatusUpdate {
-    id: number; // 模板编号
-    status: 0 | 1; // 状态
-  }
 }
 
 /** 创建优惠劵模板 */
@@ -49,9 +43,11 @@ export function updateCouponTemplate(
 }
 
 /** 更新优惠劵模板的状态 */
-export function updateCouponTemplateStatus(id: number, status: 0 | 1) {
+export function updateCouponTemplateStatus(id: number, status: number) {
-  const data: MallCouponTemplateApi.StatusUpdate = { id, status };
+  return requestClient.put('/promotion/coupon-template/update-status', {
-  return requestClient.put('/promotion/coupon-template/update-status', data);
+    id,
+    status,
+  });
 }
 
 /** 删除优惠劵模板 */
@@ -80,11 +76,3 @@ export function getCouponTemplateList(ids: number[]) {
     `/promotion/coupon-template/list?ids=${ids}`,
   );
 }
-
-/** 导出优惠劵模板 Excel */
-export function exportCouponTemplateExcel(params: PageParam) {
-  return requestClient.get('/promotion/coupon-template/export-excel', {
-    params,
-    responseType: 'blob',
-  });
-}

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

@@ -12,7 +12,6 @@ import {
 } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-import { z } from '#/adapter/form';
 import { getRangePickerDefaultProps } from '#/utils';
 
 import {
@@ -70,9 +69,18 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请选择商品',
       },
       dependencies: {
-        triggerFields: ['productScope'],
+        triggerFields: ['productScope', 'productScopeValues'],
         show: (model) =>
           model.productScope === PromotionProductScopeEnum.SPU.scope,
+        trigger(values, form) {
+          // 当加载已有数据时，根据 productScopeValues 设置 productSpuIds
+          if (
+            values.productScope === PromotionProductScopeEnum.SPU.scope &&
+            values.productScopeValues
+          ) {
+            form.setFieldValue('productSpuIds', values.productScopeValues);
+          }
+        },
       },
       rules: 'required',
     },
@@ -85,9 +93,25 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请选择商品分类',
       },
       dependencies: {
-        triggerFields: ['productScope'],
+        triggerFields: ['productScope', 'productScopeValues'],
         show: (model) =>
           model.productScope === PromotionProductScopeEnum.CATEGORY.scope,
+        trigger(values, form) {
+          // 当加载已有数据时，根据 productScopeValues 设置 productCategoryIds
+          if (
+            values.productScope === PromotionProductScopeEnum.CATEGORY.scope &&
+            values.productScopeValues
+          ) {
+            const categoryIds = values.productScopeValues;
+            // 单选时使用数组不能反显，取第一个元素
+            form.setFieldValue(
+              'productCategoryIds',
+              Array.isArray(categoryIds) && categoryIds.length > 0
+                ? categoryIds[0]
+                : categoryIds,
+            );
+          }
+        },
       },
       rules: 'required',
     },
@@ -226,13 +250,14 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'RangePicker',
       componentProps: {
         ...getRangePickerDefaultProps(),
+        valueFormat: 'x',
       },
       dependencies: {
         triggerFields: ['validityType'],
         show: (model) =>
           model.validityType === CouponTemplateValidityTypeEnum.DATE.type,
       },
-      rules: z.array(z.number()).min(2, '固定日期不能为空'),
+      rules: 'required',
     },
     {
       fieldName: 'fixedStartTerm',
@@ -271,8 +296,23 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'productScopeValues',
       component: 'Input',
       dependencies: {
-        triggerFields: [''],
+        triggerFields: ['productScope', 'productSpuIds', 'productCategoryIds'],
         show: () => false,
+        trigger(values, form) {
+          switch (values.productScope) {
+            case PromotionProductScopeEnum.CATEGORY.scope: {
+              const categoryIds = Array.isArray(values.productCategoryIds)
+                ? values.productCategoryIds
+                : [values.productCategoryIds];
+              form.setFieldValue('productScopeValues', categoryIds);
+              break;
+            }
+            case PromotionProductScopeEnum.SPU.scope: {
+              form.setFieldValue('productScopeValues', values.productSpuIds);
+              break;
+            }
+          }
+        },
       },
     },
   ];

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

@@ -4,6 +4,8 @@ import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTe
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
+import { CouponTemplateTakeTypeEnum } from '@vben/constants';
+import { convertToInteger, formatToFraction } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
@@ -46,8 +48,8 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data =
+    const formValues = (await formApi.getValues()) as any;
-      (await formApi.getValues()) as MallCouponTemplateApi.CouponTemplate;
+    const data = await processSubmitData(formValues);
     try {
       await (formData.value?.id
         ? updateCouponTemplate(data)
@@ -73,17 +75,75 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       formData.value = await getCouponTemplate(data.id);
-      // 设置到 values
+      const processedData = await processLoadData(formData.value);
-      await formApi.setValues(formData.value);
+      // 设置到表单
+      await formApi.setValues(processedData);
     } finally {
       modalApi.unlock();
     }
   },
 });
+
+/** 处理提交数据 */
+async function processSubmitData(
+  formValues: any,
+): Promise<MallCouponTemplateApi.CouponTemplate> {
+  return {
+    ...formValues,
+    // 金额转换：元转分
+    discountPrice: convertToInteger(formValues.discountPrice),
+    discountPercent:
+      formValues.discountPercent === undefined
+        ? undefined
+        : formValues.discountPercent * 10,
+    discountLimitPrice: convertToInteger(formValues.discountLimitPrice),
+    usePrice: convertToInteger(formValues.usePrice),
+    // 处理有效期时间
+    validStartTime:
+      formValues.validTimes && formValues.validTimes.length === 2
+        ? formValues.validTimes[0]
+        : undefined,
+    validEndTime:
+      formValues.validTimes && formValues.validTimes.length === 2
+        ? formValues.validTimes[1]
+        : undefined,
+    // 处理发放数量和限领数量
+    totalCount:
+      formValues.takeType === CouponTemplateTakeTypeEnum.USER.type
+        ? formValues.totalCount
+        : -1,
+    takeLimitCount:
+      formValues.takeType === CouponTemplateTakeTypeEnum.USER.type
+        ? formValues.takeLimitCount
+        : -1,
+  };
+}
+
+/** 处理加载的数据 */
+async function processLoadData(
+  data: MallCouponTemplateApi.CouponTemplate,
+): Promise<any> {
+  return {
+    ...data,
+    // 金额转换：分转元
+    discountPrice: formatToFraction(data.discountPrice),
+    discountPercent:
+      data.discountPercent === undefined
+        ? undefined
+        : data.discountPercent / 10,
+    discountLimitPrice: formatToFraction(data.discountLimitPrice),
+    usePrice: formatToFraction(data.usePrice),
+    // 处理有效期时间
+    validTimes:
+      data.validStartTime && data.validEndTime
+        ? [data.validStartTime, data.validEndTime]
+        : [],
+  };
+}
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
   </Modal>
 </template>