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

apps/web-ele/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';
 
@@ -109,24 +108,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-ele/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-ele/src/views/mall/promotion/coupon/index.vue

@@ -5,30 +5,37 @@ 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 { ElLoading, ElMessage } from 'element-plus';
+import { ElLoading, ElMessage, ElTabPane, ElTabs } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteCoupon,
   getCouponPage,
 } from '#/api/mall/promotion/coupon/coupon';
-import { $t } from '#/locales';
 
-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 loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteCoupon(row.id as number);
+    await deleteCoupon(row.id!);
     ElMessage.success('回收成功');
     handleRefresh();
   } finally {
@@ -36,18 +43,27 @@ async function handleDelete(row: MallCouponApi.Coupon) {
   }
 }
 
-/** 刷新表格 */
+/** 获取状态选项卡配置 */
-function handleRefresh() {
+function getStatusTabs() {
-  gridApi.query();
+  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: string) {
+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();
 }
 
@@ -95,15 +111,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
       />
     </template>
 
-    <Grid table-title="优惠券列表">
+    <Grid>
       <template #top>
-        <Tabs v-model:active-key="activeTab" type="card" @change="onTabChange">
+        <ElTabs
-          <TabPane
+          :model-value="activeTab"
+          class="-mt-11"
+          @tab-change="handleTabChange"
+        >
+          <ElTabPane
             v-for="tab in statusTabs"
             :key="tab.value"
-            :tab="tab.label"
+            :label="tab.label"
+            :name="tab.value"
           />
-        </Tabs>
+        </ElTabs>
       </template>
       <template #actions="{ row }">
         <TableAction
@@ -126,3 +147,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
+<style scoped>
+:deep(.vxe-toolbar div) {
+  z-index: 1;
+}
+</style>