feat：【antd】【ele】优惠劵的 select 组件的统一

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

@@ -1,117 +0,0 @@
-<script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
-
-import { ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { DICT_TYPE } from '@vben/constants';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
-import { DictTag } from '#/components/dict-tag';
-
-import { discountFormat } from '../formatter';
-import { useCouponSelectFormSchema, useCouponSelectGridColumns } from './data';
-
-defineOptions({ name: 'CouponSelect' });
-
-const props = defineProps<{
-  takeType?: number; // 领取方式
-}>();
-
-const emit = defineEmits<{
-  change: [value: MallCouponTemplateApi.CouponTemplate[]];
-}>();
-
-const selectedCoupons = ref<MallCouponTemplateApi.CouponTemplate[]>([]);
-
-/** Grid 配置 */
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: useCouponSelectFormSchema(),
-  },
-  gridOptions: {
-    columns: useCouponSelectGridColumns(),
-    height: '500px',
-    keepSource: true,
-    proxyConfig: {
-      ajax: {
-        // TODO @芋艿：要不要 ele 和 antd 统一下；
-        query: async ({ page }, formValues) => {
-          const params: any = {
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            ...formValues,
-          };
-
-          // 如果有 takeType 参数，添加到查询条件
-          if (props.takeType !== undefined) {
-            params.canTakeTypes = [props.takeType];
-          }
-
-          return await getCouponTemplatePage(params);
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-      isHover: true,
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-    },
-  } as VxeTableGridOptions<MallCouponTemplateApi.CouponTemplate>,
-  gridEvents: {
-    checkboxAll: handleRowCheckboxChange,
-    checkboxChange: handleRowCheckboxChange,
-  },
-});
-
-/** 复选框变化处理 */
-function handleRowCheckboxChange({
-  records,
-}: {
-  records: MallCouponTemplateApi.CouponTemplate[];
-}) {
-  selectedCoupons.value = records;
-}
-
-/** Modal 配置 */
-const [Modal, modalApi] = useVbenModal({
-  onConfirm() {
-    emit('change', selectedCoupons.value);
-    modalApi.close();
-  },
-  onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      selectedCoupons.value = [];
-      return;
-    }
-    gridApi.query();
-  },
-});
-
-/** 打开弹窗 */
-function open() {
-  modalApi.open();
-}
-
-defineExpose({ open });
-</script>
-
-<template>
-  <Modal title="选择优惠券" class="w-2/3">
-    <Grid table-title="优惠券列表">
-      <!-- 优惠列自定义渲染 -->
-      <template #discount="{ row }">
-        <DictTag
-          :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE"
-          :value="row.discountType"
-        />
-        <span class="ml-1">{{ discountFormat(row) }}</span>
-      </template>
-    </Grid>
-  </Modal>
-</template>

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

@@ -1,3 +1,2 @@
-export { default as CouponSelect } from './coupon-select.vue';
+export { default as CouponSelect } from './select.vue';
-export * from './data';
 export { default as CouponSendForm } from './send-form.vue';

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

@@ -1,5 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -8,26 +8,25 @@ import {
   discountFormat,
   remainedCountFormat,
   takeLimitCountFormat,
-  usePriceFormat,
   validityTypeFormat,
 } from '../formatter';
 
-/** 优惠券选择弹窗的搜索表单 schema */
+/** 优惠券选择的搜索表单 */
-export function useCouponSelectFormSchema(): VbenFormSchema[] {
+export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
-      component: 'Input',
       fieldName: 'name',
       label: '优惠券名称',
+      component: 'Input',
       componentProps: {
         placeholder: '请输入优惠券名称',
         allowClear: true,
       },
     },
     {
-      component: 'Select',
       fieldName: 'discountType',
       label: '优惠类型',
+      component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE, 'number'),
         placeholder: '请选择优惠类型',
@@ -37,33 +36,18 @@ export function useCouponSelectFormSchema(): VbenFormSchema[] {
   ];
 }
 
-/** 搜索表单的 schema */
+/** 优惠券选择的表格列 */
-export function useFormSchema(): VbenFormSchema[] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-  return [
-    {
-      component: 'Input',
-      fieldName: 'name',
-      label: '优惠券名称',
-      componentProps: {
-        placeholder: '请输入优惠券名称',
-        allowClear: true,
-      },
-    },
-  ];
-}
-
-/** 优惠券选择弹窗的表格列配置 */
-export function useCouponSelectGridColumns(): VxeGridProps['columns'] {
   return [
     { type: 'checkbox', width: 55 },
     {
-      title: '优惠券名称',
       field: 'name',
+      title: '优惠券名称',
       minWidth: 140,
     },
     {
-      title: '类型',
       field: 'productScope',
+      title: '类型',
       minWidth: 80,
       cellRender: {
         name: 'CellDict',
@@ -71,14 +55,23 @@ export function useCouponSelectGridColumns(): VxeGridProps['columns'] {
       },
     },
     {
-      title: '优惠',
+      field: 'discountType',
-      field: 'discount',
+      title: '优惠类型',
       minWidth: 100,
-      slots: { default: 'discount' },
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PROMOTION_DISCOUNT_TYPE },
+      },
+    },
+    {
+      field: 'discountPrice',
+      title: '优惠力度',
+      minWidth: 100,
+      formatter: ({ row }) => discountFormat(row),
     },
     {
-      title: '领取方式',
       field: 'takeType',
+      title: '领取方式',
       minWidth: 100,
       cellRender: {
         name: 'CellDict',
@@ -86,36 +79,37 @@ export function useCouponSelectGridColumns(): VxeGridProps['columns'] {
       },
     },
     {
-      title: '使用时间',
       field: 'validityType',
+      title: '使用时间',
       minWidth: 185,
       align: 'center',
       formatter: ({ row }) => validityTypeFormat(row),
     },
     {
-      title: '发放数量',
       field: 'totalCount',
-      align: 'center',
+      title: '发放数量',
       minWidth: 100,
+      align: 'center',
     },
     {
+      field: 'remainedCount',
       title: '剩余数量',
       minWidth: 100,
       align: 'center',
       formatter: ({ row }) => remainedCountFormat(row),
     },
     {
-      title: '领取上限',
       field: 'takeLimitCount',
+      title: '领取上限',
       minWidth: 100,
       align: 'center',
       formatter: ({ row }) => takeLimitCountFormat(row),
     },
     {
-      title: '状态',
       field: 'status',
-      align: 'center',
+      title: '状态',
       minWidth: 80,
+      align: 'center',
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -123,43 +117,3 @@ export function useCouponSelectGridColumns(): VxeGridProps['columns'] {
     },
   ];
 }
-
-/** 表格列配置 */
-export function useGridColumns(): VxeGridProps['columns'] {
-  return [
-    {
-      title: '优惠券名称',
-      field: 'name',
-      minWidth: 120,
-    },
-    {
-      title: '优惠金额 / 折扣',
-      field: 'discount',
-      minWidth: 120,
-      formatter: ({ row }) => discountFormat(row),
-    },
-    {
-      title: '最低消费',
-      field: 'usePrice',
-      minWidth: 100,
-      formatter: ({ row }) => usePriceFormat(row),
-    },
-    {
-      title: '有效期限',
-      field: 'validityType',
-      minWidth: 140,
-      formatter: ({ row }) => validityTypeFormat(row),
-    },
-    {
-      title: '剩余数量',
-      minWidth: 100,
-      formatter: ({ row }) => remainedCountFormat(row),
-    },
-    {
-      title: '操作',
-      width: 100,
-      fixed: 'right',
-      slots: { default: 'actions' },
-    },
-  ];
-}

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

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { useGridColumns, useGridFormSchema } from './select-data';
+
+defineOptions({ name: 'CouponSelect' });
+
+const props = defineProps<{
+  takeType?: number; // 领取方式
+}>();
+
+const emit = defineEmits(['success']);
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 500,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCouponTemplatePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            canTakeTypes: props.takeType ? [props.takeType] : [],
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallCouponTemplateApi.CouponTemplate>,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    // 从 gridApi 获取选中的记录
+    const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
+      []) as MallCouponTemplateApi.CouponTemplate[];
+    await modalApi.close();
+    emit('success', selectedRecords);
+  },
+});
+</script>
+
+<template>
+  <Modal title="选择优惠券" class="w-2/3">
+    <Grid />
+  </Modal>
+</template>

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

@@ -0,0 +1,64 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import {
+  discountFormat,
+  remainedCountFormat,
+  usePriceFormat,
+  validityTypeFormat,
+} from '../formatter';
+
+/** 搜索表单的 schema */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '优惠券名称',
+      componentProps: {
+        placeholder: '请输入优惠券名称',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeGridProps['columns'] {
+  return [
+    {
+      title: '优惠券名称',
+      field: 'name',
+      minWidth: 120,
+    },
+    {
+      title: '优惠金额 / 折扣',
+      field: 'discount',
+      minWidth: 120,
+      formatter: ({ row }) => discountFormat(row),
+    },
+    {
+      title: '最低消费',
+      field: 'usePrice',
+      minWidth: 100,
+      formatter: ({ row }) => usePriceFormat(row),
+    },
+    {
+      title: '有效期限',
+      field: 'validityType',
+      minWidth: 140,
+      formatter: ({ row }) => validityTypeFormat(row),
+    },
+    {
+      title: '剩余数量',
+      minWidth: 100,
+      formatter: ({ row }) => remainedCountFormat(row),
+    },
+    {
+      title: '操作',
+      width: 100,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}

apps/web-antd/src/views/mall/promotion/coupon/components/send-form.vue

@@ -11,7 +11,7 @@ import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { sendCoupon } from '#/api/mall/promotion/coupon/coupon';
 import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
 
-import { useFormSchema, useGridColumns } from './data';
+import { useFormSchema, useGridColumns } from './send-form-data';
 
 /** 发送优惠券 */
 async function handleSendCoupon(row: MallCouponTemplateApi.CouponTemplate) {

apps/web-ele/src/views/mall/promotion/coupon/components/select-data.ts

@@ -19,7 +19,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '优惠券名称',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入优惠劵名',
+        placeholder: '请输入优惠券名称',
         clearable: true,
       },
     },
@@ -29,7 +29,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE, 'number'),
-        placeholder: '请选择优惠券类型',
+        placeholder: '请选择优惠类型',
         clearable: true,
       },
     },

apps/web-ele/src/views/mall/promotion/coupon/components/select.vue

@@ -5,17 +5,14 @@ import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTe
 import { useVbenModal } from '@vben/common-ui';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
+import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
 
-import {
+import { useGridColumns, useGridFormSchema } from './select-data';
-  useGridColumns,
-  useGridFormSchema,
-} from './select-data';
 
 defineOptions({ name: 'CouponSelect' });
 
 const props = defineProps<{
-  takeType: number; // 领取方式
+  takeType?: number; // 领取方式
 }>();
 
 const emit = defineEmits(['success']);
@@ -31,7 +28,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          return await CouponTemplateApi.getCouponTemplatePage({
+          return await getCouponTemplatePage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
@@ -54,7 +51,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     // 从 gridApi 获取选中的记录
-    const selectedRecords = (gridApi.grid?.getCheckboxRecords() || []) as MallCouponTemplateApi.CouponTemplate[];
+    const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
+      []) as MallCouponTemplateApi.CouponTemplate[];
     await modalApi.close();
     emit('success', selectedRecords);
   },
@@ -62,8 +60,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal title="选择优惠劵" class="w-3/5">
+  <Modal title="选择优惠券" class="w-2/3">
     <Grid />
   </Modal>
 </template>
-

apps/web-ele/src/views/mall/promotion/coupon/components/send-form.vue

@@ -11,7 +11,7 @@ import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { sendCoupon } from '#/api/mall/promotion/coupon/coupon';
 import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
 
-import { useFormSchema, useGridColumns } from './send-form-data.ts';
+import { useFormSchema, useGridColumns } from './send-form-data';
 
 /** 发送优惠券 */
 async function handleSendCoupon(row: MallCouponTemplateApi.CouponTemplate) {

apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue

@@ -19,9 +19,12 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import * as DiyPageApi from '#/api/mall/promotion/diy/page';
+import { updateDiyPageProperty } from '#/api/mall/promotion/diy/page';
-import * as DiyTemplateApi from '#/api/mall/promotion/diy/template';
+import {
-import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components';
+  getDiyTemplateProperty,
+  updateDiyTemplateProperty,
+} from '#/api/mall/promotion/diy/template';
+import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components'; // 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复
 
 /** 装修模板表单 */
 defineOptions({ name: 'DiyTemplateDecorate' });
@@ -59,7 +62,7 @@ async function getPageDetail(id: any) {
     text: '加载中...',
   });
   try {
-    formData.value = await DiyTemplateApi.getDiyTemplateProperty(id);
+    formData.value = await getDiyTemplateProperty(id);
 
     // 拼接手机预览链接
     const domain = import.meta.env.VITE_MALL_H5_DOMAIN;
@@ -116,20 +119,18 @@ async function submitForm() {
       // 情况一：基础设置
       if (i === 0) {
         // 提交模板属性
-        await DiyTemplateApi.updateDiyTemplateProperty(
+        await updateDiyTemplateProperty(isEmpty(data) ? formData.value! : data);
-          isEmpty(data) ? formData.value! : data,
-        );
         continue;
       }
       // 提交页面属性
       // 情况二：提交当前正在编辑的页面
       if (currentFormData.value?.name.includes(templateItem.name)) {
-        await DiyPageApi.updateDiyPageProperty(currentFormData.value!);
+        await updateDiyPageProperty(currentFormData.value!);
         continue;
       }
       // 情况三：提交页面编辑缓存
       if (!isEmpty(data)) {
-        await DiyPageApi.updateDiyPageProperty(data!);
+        await updateDiyPageProperty(data!);
       }
     }
     ElMessage.success('保存成功');