review：【antd/ele】【mall】营销模块的迁移

2025-12-15 19:29:47 +08:00
parent ef0f0a9a9d
commit 4ec82f0fd0
50 changed files with 317 additions and 263 deletions
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-modal.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-modal.vue
@@ -30,7 +30,7 @@ const [Modal, modalApi] = useVbenModal({
    try {
      const data = modalApi.getData<any[]>();
      // 填充列表数据
-      await gridApi.setGridOptions({ data });
+      gridApi.setGridOptions({ data });
    } finally {
      modalApi.unlock();
    }
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-modal.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-modal.vue
@@ -33,7 +33,7 @@ const [Modal, modalApi] = useVbenModal({
    try {
      const data = modalApi.getData<any[]>();
      // 填充列表数据
-      await gridApi.setGridOptions({ data });
+      gridApi.setGridOptions({ data });
    } finally {
      modalApi.unlock();
    }
--- a/apps/web-antd/src/views/iot/rule/data/sink/data-sink-form.vue
+++ b/apps/web-antd/src/views/iot/rule/data/sink/data-sink-form.vue
@@ -83,7 +83,6 @@ const [Modal, modalApi] = useVbenModal({
    }
    // 加载数据
    const data = modalApi.getData<any>();
-
    if (!data || !data.id) {
      formData.value = {
        type: IotDataSinkTypeEnum.HTTP,
--- a/apps/web-antd/src/views/mall/product/comment/modules/form.vue
+++ b/apps/web-antd/src/views/mall/product/comment/modules/form.vue
@@ -21,7 +21,6 @@ import { useFormSchema } from '../data';

 const emit = defineEmits(['success']);

-// 初始化 formData，确保始终有值
 const formData = ref<Partial<MallCommentApi.Comment>>({
  descriptionScores: 5,
  benefitScores: 5,
@@ -100,7 +99,6 @@ const [Modal, modalApi] = useVbenModal({
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
-      // 重置表单数据
      selectedSku.value = undefined;
      return;
    }
@@ -108,6 +106,7 @@ const [Modal, modalApi] = useVbenModal({
    const data = modalApi.getData<MallCommentApi.Comment>();
    if (!data || !data.id) {
      // 新建模式：重置表单
+      // TODO @puhui999：这里的重置，可以统一到 103 行那么？
      selectedSku.value = undefined;
      await formApi.setValues({ spuId: undefined, skuId: undefined });
      return;
--- a/apps/web-antd/src/views/mall/product/spu/components/spu-and-sku-list.vue
+++ b/apps/web-antd/src/views/mall/product/spu/components/spu-and-sku-list.vue
@@ -127,7 +127,7 @@ watch(
        </SkuList>
      </template>
    </VxeColumn>
-    <VxeColumn field="id" align="center" title="商品编号" />
+    <VxeColumn field="id" align="center" title="商品编号" min-width="30" />
    <VxeColumn title="商品图" min-width="80">
      <template #default="{ row }">
        <Image
--- a/apps/web-antd/src/views/mall/promotion/bargain/activity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/bargain/activity/index.vue
@@ -41,23 +41,14 @@ function handleEdit(row: MallBargainActivityApi.BargainActivity) {

 /** 关闭砍价活动 */
 async function handleClose(row: MallBargainActivityApi.BargainActivity) {
-  try {
-    await confirm({
-      content: '确认关闭该砍价活动吗？',
-    });
-  } catch {
-    return;
-  }
-
+  await confirm('确认关闭该砍价活动吗？');
  const hideLoading = message.loading({
-    content: '确认关闭该砍价活动吗？',
+    content: '关闭中...',
    duration: 0,
  });
  try {
-    await closeBargainActivity(row.id as number);
-    message.success({
-      content: '关闭成功',
-    });
+    await closeBargainActivity(row.id!);
+    message.success('关闭成功');
    handleRefresh();
  } finally {
    hideLoading();
@@ -71,10 +62,8 @@ async function handleDelete(row: MallBargainActivityApi.BargainActivity) {
    duration: 0,
  });
  try {
-    await deleteBargainActivity(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteBargainActivity(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
    handleRefresh();
  } finally {
    hideLoading();
--- a/apps/web-antd/src/views/mall/promotion/bargain/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/bargain/activity/modules/form.vue
@@ -96,17 +96,15 @@ const [Modal, modalApi] = useVbenModal({
      message.error('请选择砍价商品');
      return;
    }
-
    if (!skuId.value) {
      message.error('请选择商品 SKU');
      return;
    }

+    // 提交表单
    modalApi.lock();
    try {
      const values = await formApi.getValues();
-
-      // 构建提交数据，价格字段转换为分
      const data = {
        ...values,
        spuId: spuId.value,
@@ -120,11 +118,10 @@ const [Modal, modalApi] = useVbenModal({
          ? Math.round(values.randomMaxPrice * 100)
          : undefined,
      } as MallBargainActivityApi.BargainActivity;
-
      await (formData.value?.id
        ? updateBargainActivity(data)
        : createBargainActivity(data));
-
+      // 关闭并提示
      await modalApi.close();
      emit('success');
      message.success($t('ui.actionMessage.operationSuccess'));
@@ -141,17 +138,15 @@ const [Modal, modalApi] = useVbenModal({
      skuInfo.value = undefined;
      return;
    }
-
+    // 加载表单数据
    const data = modalApi.getData<MallBargainActivityApi.BargainActivity>();
    if (!data || !data.id) {
      return;
    }
-
    modalApi.lock();
    try {
      formData.value = await getBargainActivity(data.id);
      await nextTick();
-
      // 设置表单值时，价格字段从分转换为元
      await formApi.setValues({
        ...formData.value,
@@ -164,14 +159,12 @@ const [Modal, modalApi] = useVbenModal({
          ? formData.value.randomMaxPrice / 100
          : undefined,
      });
-
      // 加载商品和 SKU 信息
      if (formData.value.spuId) {
        const spu = await getSpu(formData.value.spuId);
        if (spu) {
          spuId.value = spu.id;
          spuName.value = spu.name || '';
-
          if (formData.value.skuId) {
            const selectedSku = spu.skus?.find(
              (sku) => sku.id === formData.value?.skuId,
@@ -214,6 +207,19 @@ const [Modal, modalApi] = useVbenModal({
        <!-- SKU 信息展示 -->
        <div v-if="skuInfo" class="mt-4">
          <table class="w-full border-collapse border border-gray-300">
+            <!-- TODO @puhui999：和 element-plus 有点差别哈；ps：是不是用 grid 组件呀？或者 vxe 组件
+             图片
+颜色
+版本
+商品条码
+销售价(元)
+市场价(元)
+成本价(元)
+库存
+砍价起始价格(元)
+砍价底价(元)
+活动库存
+             -->
            <thead>
              <tr class="bg-gray-100">
                <th class="border border-gray-300 px-4 py-2">商品图片</th>
--- a/apps/web-antd/src/views/mall/promotion/combination/activity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/combination/activity/index.vue
@@ -43,23 +43,14 @@ function handleEdit(row: MallCombinationActivityApi.CombinationActivity) {
 async function handleClose(
  row: MallCombinationActivityApi.CombinationActivity,
 ) {
-  try {
-    await confirm({
-      content: '确认关闭该拼团活动吗？',
-    });
-  } catch {
-    return;
-  }
-
+  await confirm('确认关闭该拼团活动吗？');
  const hideLoading = message.loading({
    content: '关闭中...',
    duration: 0,
  });
  try {
-    await closeCombinationActivity(row.id as number);
-    message.success({
-      content: '关闭成功',
-    });
+    await closeCombinationActivity(row.id!);
+    message.success('关闭成功');
    handleRefresh();
  } finally {
    hideLoading();
@@ -75,10 +66,8 @@ async function handleDelete(
    duration: 0,
  });
  try {
-    await deleteCombinationActivity(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteCombinationActivity(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
    handleRefresh();
  } finally {
    hideLoading();
--- a/apps/web-antd/src/views/mall/promotion/combination/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/combination/activity/modules/form.vue
@@ -92,12 +92,10 @@ const [Modal, modalApi] = useVbenModal({
      message.error('请选择拼团商品');
      return;
    }
-
    if (skuTableData.value.length === 0) {
      message.error('请至少配置一个 SKU');
      return;
    }
-
    // 验证 SKU 配置
    const hasInvalidSku = skuTableData.value.some(
      (sku) => sku.combinationPrice < 0.01,
@@ -107,11 +105,10 @@ const [Modal, modalApi] = useVbenModal({
      return;
    }

+    // 提交表单
    modalApi.lock();
    try {
      const values = await formApi.getValues();
-
-      // 构建提交数据
      const data: any = {
        ...values,
        spuId: spuId.value,
@@ -120,11 +117,10 @@ const [Modal, modalApi] = useVbenModal({
          combinationPrice: Math.round(sku.combinationPrice * 100), // 转换为分
        })),
      };
-
      await (formData.value?.id
        ? updateCombinationActivity(data)
        : createCombinationActivity(data));
-
+      // 关闭并提示
      await modalApi.close();
      emit('success');
      message.success($t('ui.actionMessage.operationSuccess'));
@@ -140,20 +136,19 @@ const [Modal, modalApi] = useVbenModal({
      skuTableData.value = [];
      return;
    }
-
+    // 加载数据
    const data =
      modalApi.getData<MallCombinationActivityApi.CombinationActivity>();
    if (!data || !data.id) {
      return;
    }
-
    modalApi.lock();
    try {
      formData.value = await getCombinationActivity(data.id);
      await nextTick();
      await formApi.setValues(formData.value);
-
      // 加载商品和 SKU 信息
+      // TODO @puhui999：if return，简化括号层级
      if (formData.value.spuId) {
        const spu = await getSpu(formData.value.spuId);
        if (spu) {
@@ -221,6 +216,15 @@ const [Modal, modalApi] = useVbenModal({
                    class="h-16 w-16 object-cover"
                  />
                </td>
+                <!-- TODO @puhui999：这里貌似和 element-plus 没对齐；；ps：是不是用 grid 组件呀？或者 vxe 组件
+                 图片
+                  商品条码
+                  销售价(元)
+                  市场价(元)
+                  成本价(元)
+                  库存
+                  拼团价格(元)
+                 -->
                <td class="border border-gray-300 px-4 py-2">
                  {{ sku.skuName }}
                </td>
@@ -228,6 +232,7 @@ const [Modal, modalApi] = useVbenModal({
                  ¥{{ (sku.price / 100).toFixed(2) }}
                </td>
                <td class="border border-gray-300 px-4 py-2">
+                  <!-- TODO @puhui999：是不是要使用 antd 的哈？ -->
                  <input
                    v-model.number="sku.combinationPrice"
                    type="number"
--- a/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
+++ b/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
@@ -57,24 +57,22 @@ const [Grid, gridApi] = useVbenVxeGrid({
 /** 打开弹窗 */
 async function open() {
  visible.value = true;
-  // 重置查询条件并重新加载数据，与老组件行为一致
  await gridApi.query();
 }

+/** 确认选择 */
+function handleConfirm() {
+  const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
+    []) as MallCouponTemplateApi.CouponTemplate[];
+  emit('change', selectedRecords);
+  closeModal();
+}
+
 /** 关闭弹窗 */
 function closeModal() {
  visible.value = false;
 }

-/** 确认选择 */
-function handleConfirm() {
-  // 从 gridApi 获取选中的记录
-  const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
-    []) as MallCouponTemplateApi.CouponTemplate[];
-  emit('change', selectedRecords);
-  closeModal();
-}
-
 /** 对外暴露的方法 */
 defineExpose({
  open,
--- a/apps/web-antd/src/views/mall/promotion/discountActivity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/discountActivity/index.vue
@@ -41,23 +41,14 @@ function handleEdit(row: MallDiscountActivityApi.DiscountActivity) {

 /** 关闭满减活动 */
 async function handleClose(row: MallDiscountActivityApi.DiscountActivity) {
-  try {
-    await confirm({
-      content: '确认关闭该限时折扣活动吗？',
-    });
-  } catch {
-    return;
-  }
-
+  await confirm('确认关闭该限时折扣活动吗？');
  const hideLoading = message.loading({
-    content: '正在关闭中',
+    content: '正在关闭中...',
    duration: 0,
  });
  try {
-    await closeDiscountActivity(row.id as number);
-    message.success({
-      content: '关闭成功',
-    });
+    await closeDiscountActivity(row.id!);
+    message.success('关闭成功');
    handleRefresh();
  } finally {
    hideLoading();
@@ -71,7 +62,7 @@ async function handleDelete(row: MallDiscountActivityApi.DiscountActivity) {
    duration: 0,
  });
  try {
-    await deleteDiscountActivity(row.id as number);
+    await deleteDiscountActivity(row.id!);
    message.success({
      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
    });
--- a/apps/web-antd/src/views/mall/promotion/point/activity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/point/activity/data.ts
@@ -126,7 +126,6 @@ export function useFormSchema(): VbenFormSchema[] {
      },
      formItemClass: 'col-span-2',
    },
-    // TODO @puhui999：商品图太大了。
    {
      fieldName: 'spuId',
      label: '活动商品',
--- a/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
@@ -180,7 +180,6 @@ const [Modal, modalApi] = useVbenModal({
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
-      // 重置表单数据（新增和编辑模式都需要）
      formData.value = undefined;
      spuList.value = [];
      spuPropertyList.value = [];
--- a/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
@@ -1,4 +1,5 @@
 <!-- 积分商城活动橱窗组件：用于展示和选择积分商城活动 -->
+<!-- TODO @puhui999：不需要 point- 前缀 --->
 <script lang="ts" setup>
 import type { MallPointActivityApi } from '#/api/mall/promotion/point';

--- a/apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
@@ -1,4 +1,5 @@
 <!-- 积分商城活动选择弹窗组件 -->
+<!-- TODO @puhui999：不需要 point- 前缀 --->
 <script lang="ts" setup>
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
@@ -32,7 +32,6 @@ const formData = ref<Partial<MallRewardActivityApi.RewardActivity>>({
  productScope: PromotionProductScopeEnum.ALL.scope,
  rules: [],
 });
-
 const getTitle = computed(() => {
  return formData.value?.id
    ? $t('ui.actionTitle.edit', ['满减送'])
@@ -76,6 +75,7 @@ const [Modal, modalApi] = useVbenModal({
      });
      // 设置 productScopeValues
      switch (data.productScope) {
+        // TODO @puhui999：这里要不要搞成类似优惠劵的
        case PromotionProductScopeEnum.CATEGORY.scope: {
          const categoryIds = data.productCategoryIds;
          data.productScopeValues = Array.isArray(categoryIds)
@@ -90,7 +90,6 @@ const [Modal, modalApi] = useVbenModal({
          break;
        }
      }
-
      await (data.id
        ? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
        : createRewardActivity(data as MallRewardActivityApi.RewardActivity));
--- a/apps/web-antd/src/views/mall/promotion/seckill/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/seckill/activity/modules/form.vue
@@ -21,7 +21,6 @@ import { useFormSchema } from '../data';

 const emit = defineEmits(['success']);
 const formData = ref<MallSeckillActivityApi.SeckillActivity>();
-
 const getTitle = computed(() => {
  return formData.value?.id
    ? $t('ui.actionTitle.edit', ['秒杀活动'])
@@ -90,12 +89,10 @@ const [Modal, modalApi] = useVbenModal({
      message.error('请选择秒杀商品');
      return;
    }
-
    if (skuTableData.value.length === 0) {
      message.error('请至少配置一个 SKU');
      return;
    }
-
    // 验证 SKU 配置
    const hasInvalidSku = skuTableData.value.some(
      (sku) => sku.stock < 1 || sku.seckillPrice < 0.01,
@@ -105,11 +102,10 @@ const [Modal, modalApi] = useVbenModal({
      return;
    }

+    // 提交表单
    modalApi.lock();
    try {
      const values = await formApi.getValues();
-
-      // 构建提交数据
      const data: any = {
        ...values,
        spuId: spuId.value,
@@ -119,11 +115,10 @@ const [Modal, modalApi] = useVbenModal({
          seckillPrice: Math.round(sku.seckillPrice * 100), // 转换为分
        })),
      };
-
      await (formData.value?.id
        ? updateSeckillActivity(data)
        : createSeckillActivity(data));
-
+      // 关闭并提示
      await modalApi.close();
      emit('success');
      message.success($t('ui.actionMessage.operationSuccess'));
@@ -140,18 +135,18 @@ const [Modal, modalApi] = useVbenModal({
      return;
    }

+    // 加载数据
    const data = modalApi.getData<MallSeckillActivityApi.SeckillActivity>();
    if (!data || !data.id) {
      return;
    }
-
    modalApi.lock();
    try {
      formData.value = await getSeckillActivity(data.id);
      await nextTick();
      await formApi.setValues(formData.value);
-
      // 加载商品和 SKU 信息
+      // TODO @puhui999：if return 简化括号层级
      if (formData.value.spuId) {
        const spu = await getSpu(formData.value.spuId);
        if (spu) {
@@ -201,6 +196,7 @@ const [Modal, modalApi] = useVbenModal({

        <!-- SKU 配置表格 -->
        <div v-if="skuTableData.length > 0" class="mt-4">
+          <!-- TODO @puhui999：Grid？或者 VXETable 哇？ -->
          <table class="w-full border-collapse border border-gray-300">
            <thead>
              <tr class="bg-gray-100">
--- a/apps/web-antd/src/views/mp/material/index.vue
+++ b/apps/web-antd/src/views/mp/material/index.vue
@@ -23,6 +23,7 @@ import {
 import { UploadType } from './modules/upload';
 import UploadFile from './modules/UploadFile.vue';
 import UploadVideo from './modules/UploadVideo.vue';
+import {$t} from '@vben/locales';

 defineOptions({ name: 'MpMaterial' });

@@ -95,7 +96,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 // 当 tab 切换时，更新 Grid 的 columns 和 rowConfig
 async function onTabChange() {
  const columns = getColumnsByType();
-  await gridApi.setGridOptions({
+  gridApi.setGridOptions({
    columns,
    rowConfig: {
      keyField: 'id',
@@ -109,7 +110,7 @@ async function onTabChange() {
 async function handleAccountChange(id: number) {
  accountId.value = id;
  // 同步设置表单值
-  gridApi.formApi.setValues({ accountId: id });
+  await gridApi.formApi.setValues({ accountId: id });
  await gridApi.formApi.submitForm();
 }

@@ -127,7 +128,7 @@ async function handleDelete(id: number) {
  try {
    await deletePermanentMaterial(id);
    message.success('删除成功');
-    handleRefresh();
+    await handleRefresh();
  } finally {
    hideLoading();
  }
@@ -205,7 +206,7 @@ async function handleDelete(id: number) {
        </Button>
      </template>

-      <!-- 图片列的slot -->
+      <!-- 图片列的 slot -->
      <template #image="{ row }">
        <div class="flex items-center justify-center" style="height: 192px">
          <img
@@ -216,12 +217,12 @@ async function handleDelete(id: number) {
        </div>
      </template>

-      <!-- 语音列的slot -->
+      <!-- 语音列的 slot -->
      <template #voice="{ row }">
        <audio :src="row.url" controls style="width: 160px"></audio>
      </template>

-      <!-- 视频列的slot -->
+      <!-- 视频列的 slot -->
      <template #video="{ row }">
        <video
          :src="row.url"
@@ -230,16 +231,17 @@ async function handleDelete(id: number) {
        ></video>
      </template>

-      <!-- 操作列的slot -->
+      <!-- 操作列的 slot -->
      <template #actions="{ row }">
        <TableAction
          :actions="[
            {
-              label: '删除',
-              icon: ACTION_ICON.delete,
-              color: 'danger',
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
              auth: ['mp:material:delete'],
-              onClick: () => handleDelete(row.id),
+              onClick: () => handleDelete(row.id!),
            },
          ]"
        />