feat：【mall 商城】优惠劵-领取记录（100% antd）

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

@@ -2,7 +2,6 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
 
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -110,23 +109,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
   ];
 }
 
-/** 获取状态选项卡配置 */
-export function getStatusTabs() {
-  const tabs = [
-    {
-      label: '全部',
-      value: 'all',
-    },
-  ];
-
-  // 添加字典状态选项
-  const statusOptions = getDictOptions(DICT_TYPE.PROMOTION_COUPON_STATUS);
-  for (const option of statusOptions) {
-    tabs.push({
-      label: option.label,
-      value: String(option.value),
-    });
-  }
-
-  return tabs;
-}

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

@@ -6,7 +6,7 @@ import {
 } from '@vben/constants';
 import { floatToFixed2, formatDate } from '@vben/utils';
 
-// 格式化【优惠金额/折扣】
+/** 格式化【优惠金额/折扣】 */
 export function discountFormat(row: MallCouponTemplateApi.CouponTemplate) {
   if (row.discountType === PromotionDiscountTypeEnum.PRICE.type) {
     return `¥${floatToFixed2(row.discountPrice)}`;
@@ -17,7 +17,7 @@ export function discountFormat(row: MallCouponTemplateApi.CouponTemplate) {
   return `未知【${row.discountType}】`;
 }
 
-// 格式化【领取上限】
+/** 格式化【领取上限】 */
 export function takeLimitCountFormat(
   row: MallCouponTemplateApi.CouponTemplate,
 ) {
@@ -31,7 +31,7 @@ export function takeLimitCountFormat(
   }
 }
 
-// 格式化【有效期限】
+/** 格式化【有效期限】 */
 export function validityTypeFormat(row: MallCouponTemplateApi.CouponTemplate) {
   if (row.validityType === CouponTemplateValidityTypeEnum.DATE.type) {
     return `${formatDate(row.validStartTime)} 至 ${formatDate(row.validEndTime)}`;
@@ -42,7 +42,7 @@ export function validityTypeFormat(row: MallCouponTemplateApi.CouponTemplate) {
   return `未知【${row.validityType}】`;
 }
 
-// 格式化【totalCount】
+/** 格式化【totalCount】 */
 export function totalCountFormat(row: MallCouponTemplateApi.CouponTemplate) {
   if (row.totalCount === -1) {
     return '不限制';
@@ -50,7 +50,7 @@ export function totalCountFormat(row: MallCouponTemplateApi.CouponTemplate) {
   return row.totalCount;
 }
 
-// 格式化【剩余数量】
+/** 格式化【剩余数量】 */
 export function remainedCountFormat(row: MallCouponTemplateApi.CouponTemplate) {
   if (row.totalCount === -1) {
     return '不限制';
@@ -58,7 +58,7 @@ export function remainedCountFormat(row: MallCouponTemplateApi.CouponTemplate) {
   return row.totalCount - row.takeCount;
 }
 
-// 格式化【最低消费】
+/** 格式化【最低消费】 */
 export function usePriceFormat(row: MallCouponTemplateApi.CouponTemplate) {
   return `¥${floatToFixed2(row.usePrice)}`;
 }

apps/web-antd/src/views/mall/promotion/coupon/index.vue

@@ -5,6 +5,8 @@ import type { MallCouponApi } from '#/api/mall/promotion/coupon/coupon';
 import { ref } from 'vue';
 
 import { DocAlert, Page } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 import { $t } from '@vben/locales';
 
 import { message, TabPane, Tabs } from 'ant-design-vue';
@@ -15,13 +17,18 @@ import {
   getCouponPage,
 } from '#/api/mall/promotion/coupon/coupon';
 
-import { getStatusTabs, useGridColumns, useGridFormSchema } from './data';
+import { useGridColumns, useGridFormSchema } from './data';
 
 defineOptions({ name: 'PromotionCoupon' });
 
 const activeTab = ref('all');
 const statusTabs = ref(getStatusTabs());
 
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
 /** 删除优惠券 */
 async function handleDelete(row: MallCouponApi.Coupon) {
   const hideLoading = message.loading({
@@ -29,28 +36,35 @@ async function handleDelete(row: MallCouponApi.Coupon) {
     duration: 0,
   });
   try {
-    await deleteCoupon(row.id as number);
-    message.success({
-      content: '回收成功',
-    });
+    await deleteCoupon(row.id!);
+    message.success('回收成功');
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
-/** 刷新表格 */
-function handleRefresh() {
-  gridApi.query();
+/** 获取状态选项卡配置 */
+function getStatusTabs() {
+  const tabs = [
+    {
+      label: '全部',
+      value: 'all',
+    },
+  ];
+  const statusOptions = getDictOptions(DICT_TYPE.PROMOTION_COUPON_STATUS);
+  for (const option of statusOptions) {
+    tabs.push({
+      label: option.label,
+      value: String(option.value),
+    });
+  }
+  return tabs;
 }
 
-/** Tab切换 */
-function onTabChange(tabName: any) {
+/** Tab 切换 */
+function handleTabChange(tabName: any) {
   activeTab.value = tabName;
-  // 设置状态查询参数
-  const formValues = gridApi.formApi.getValues();
-  const status = tabName === 'all' ? undefined : Number(tabName);
-  gridApi.formApi.setValues({ ...formValues, status });
   gridApi.query();
 }
 
@@ -98,9 +112,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
       />
     </template>
 
-    <Grid table-title="领取记录">
+    <Grid>
       <template #top>
-        <Tabs v-model:active-key="activeTab" type="card" @change="onTabChange">
+        <Tabs class="-mt-11" @change="handleTabChange">
           <TabPane
             v-for="tab in statusTabs"
             :key="tab.value"
@@ -129,3 +143,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
+<style scoped>
+:deep(.vxe-toolbar div) {
+  z-index: 1;
+}
+</style>