From 01e3c8e0f66868b4f4336bc44ea206978db5d579 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 2 Nov 2025 08:42:30 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90ele?=
 =?UTF-8?q?=E3=80=91=E4=BC=98=E6=83=A0=E5=8A=B5=E7=9A=84=20select=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../coupon/components/coupon-select.vue       | 117 ------------------
 .../mall/promotion/coupon/components/index.ts |   3 +-
 .../components/{data.ts => select-data.ts}    | 104 +++++-----------
 .../promotion/coupon/components/select.vue    |  66 ++++++++++
 .../coupon/components/send-form-data.ts       |  64 ++++++++++
 .../promotion/coupon/components/send-form.vue |   2 +-
 .../coupon/components/select-data.ts          |   4 +-
 .../promotion/coupon/components/select.vue    |  17 ++-
 .../promotion/coupon/components/send-form.vue |   2 +-
 .../promotion/diy/template/decorate/index.vue |  19 +--
 10 files changed, 181 insertions(+), 217 deletions(-)
 delete mode 100644 apps/web-antd/src/views/mall/promotion/coupon/components/coupon-select.vue
 rename apps/web-antd/src/views/mall/promotion/coupon/components/{data.ts => select-data.ts} (60%)
 create mode 100644 apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/coupon/components/send-form-data.ts

diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/coupon-select.vue b/apps/web-antd/src/views/mall/promotion/coupon/components/coupon-select.vue
deleted file mode 100644
index ecf960120..000000000
--- a/apps/web-antd/src/views/mall/promotion/coupon/components/coupon-select.vue
+++ /dev/null
@@ -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>
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/index.ts b/apps/web-antd/src/views/mall/promotion/coupon/components/index.ts
index 99fca49f3..24cb4e274 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/components/index.ts
+++ b/apps/web-antd/src/views/mall/promotion/coupon/components/index.ts
@@ -1,3 +1,2 @@
-export { default as CouponSelect } from './coupon-select.vue';
-export * from './data';
+export { default as CouponSelect } from './select.vue';
 export { default as CouponSendForm } from './send-form.vue';
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/data.ts b/apps/web-antd/src/views/mall/promotion/coupon/components/select-data.ts
similarity index 60%
rename from apps/web-antd/src/views/mall/promotion/coupon/components/data.ts
rename to apps/web-antd/src/views/mall/promotion/coupon/components/select-data.ts
index 2b45327bd..e8c0ad53e 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/components/data.ts
+++ b/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[] {
-  return [
-    {
-      component: 'Input',
-      fieldName: 'name',
-      label: '优惠券名称',
-      componentProps: {
-        placeholder: '请输入优惠券名称',
-        allowClear: true,
-      },
-    },
-  ];
-}
-
-/** 优惠券选择弹窗的表格列配置 */
-export function useCouponSelectGridColumns(): VxeGridProps['columns'] {
+/** 优惠券选择的表格列 */
+export function useGridColumns(): VxeTableGridOptions['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: 'discount',
+      field: 'discountType',
+      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' },
-    },
-  ];
-}
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue b/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
new file mode 100644
index 000000000..073206aff
--- /dev/null
+++ b/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>
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/send-form-data.ts b/apps/web-antd/src/views/mall/promotion/coupon/components/send-form-data.ts
new file mode 100644
index 000000000..35a823b79
--- /dev/null
+++ b/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' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/send-form.vue b/apps/web-antd/src/views/mall/promotion/coupon/components/send-form.vue
index 442217efe..f858cc75f 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/components/send-form.vue
+++ b/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) {
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/components/select-data.ts b/apps/web-ele/src/views/mall/promotion/coupon/components/select-data.ts
index bf7c993e3..4820881d0 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/components/select-data.ts
+++ b/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,
       },
     },
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/components/select.vue b/apps/web-ele/src/views/mall/promotion/coupon/components/select.vue
index 8d75c2388..073206aff 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/components/select.vue
+++ b/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 {
-  useGridColumns,
-  useGridFormSchema,
-} from './select-data';
+import { 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>
-
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/components/send-form.vue b/apps/web-ele/src/views/mall/promotion/coupon/components/send-form.vue
index 9a8c4b192..ce609628a 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/components/send-form.vue
+++ b/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) {
diff --git a/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue b/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue
index 566dc0d5e..3f655becf 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue
+++ b/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 * as DiyTemplateApi from '#/api/mall/promotion/diy/template';
-import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components';
+import { updateDiyPageProperty } from '#/api/mall/promotion/diy/page';
+import {
+  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(
-          isEmpty(data) ? formData.value! : data,
-        );
+        await updateDiyTemplateProperty(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('保存成功');