!317 修复一些 review TODO 提到的问题

Merge pull request !317 from puhui999/dev-mall

apps/web-antd/src/components/cropper/cropper-modal.vue

@@ -43,15 +43,6 @@ const [Modal, modalApi] = useVbenModal({
     if (isOpen) {
       // 打开时，进行 loading 加载。后续 CropperImage 组件加载完毕，会自动关闭 loading（通过 handleReady）
       modalLoading(true);
-      // TODO @puhui999：这里比 ele 多了，是符合预期的哇？
-      const img = new Image();
-      img.src = src.value;
-      img.addEventListener('load', () => {
-        modalLoading(false);
-      });
-      img.addEventListener('error', () => {
-        modalLoading(false);
-      });
     } else {
       // 关闭时，清空右侧预览
       previewSource.value = '';

apps/web-antd/src/components/form-create/components/use-images-upload.tsx

@@ -15,9 +15,8 @@ export function useImagesUpload() {
         default: 5,
       },
     },
-    setup() {
+    setup(props) {
-      // TODO: @puhui999：@dhb52 其实还是靠 props 默认参数起作用，没能从 formCreate 传递
+      return () => (
-      return (props: { maxNumber?: number; multiple?: boolean }) => (
         <ImageUpload maxNumber={props.maxNumber} multiple={props.multiple} />
       );
     },

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

@@ -96,14 +96,10 @@ export function useFormSchema(): VbenFormSchema[] {
       defaultValue: true,
     },
     {
-      // TODO: @puhui999：商品关联
       fieldName: 'spuId',
       label: '商品关联',
       component: 'Input',
       formItemClass: 'col-span-2',
-      componentProps: {
-        placeholder: '请输入商品 SPU 编号',
-      },
     },
     {
       fieldName: 'sort',

apps/web-antd/src/views/mall/promotion/article/modules/form.vue

@@ -14,6 +14,7 @@ import {
   updateArticle,
 } from '#/api/mall/promotion/article';
 import { $t } from '#/locales';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
@@ -41,6 +42,10 @@ const [Form, formApi] = useVbenForm({
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
+    // 同步商品选择到表单，确保验证时能获取到值
+    if (formData.value?.spuId) {
+      await formApi.setFieldValue('spuId', formData.value.spuId);
+    }
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
@@ -82,6 +87,11 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal :title="getTitle" class="w-2/5">
-    <Form class="mx-4" />
+    <Form class="mx-4">
+      <!-- 自定义插槽：商品选择 -->
+      <template #spuId>
+        <SpuShowcase v-model="formData!.spuId" :limit="1" />
+      </template>
+    </Form>
   </Modal>
 </template>

apps/web-antd/src/views/mall/promotion/coupon/template/modules/form.vue

@@ -49,6 +49,19 @@ const [Form, formApi] = useVbenForm({
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
+    // 同步商品/分类选择到表单，确保验证时能获取到值
+    if (formData.value.productSpuIds) {
+      await formApi.setFieldValue(
+        'productSpuIds',
+        formData.value.productSpuIds,
+      );
+    }
+    if (formData.value.productCategoryIds) {
+      await formApi.setFieldValue(
+        'productCategoryIds',
+        formData.value.productCategoryIds,
+      );
+    }
     const { valid } = await formApi.validate();
     if (!valid) {
       return;

apps/web-antd/src/views/mall/promotion/discountActivity/modules/form.vue

@@ -10,7 +10,9 @@ import type {
 import { computed, nextTick, ref } from 'vue';
 
 import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { PromotionDiscountTypeEnum } from '@vben/constants';
 import {
+  cloneDeep,
   convertToInteger,
   erpCalculatePercentage,
   formatToFraction,
@@ -39,13 +41,6 @@ defineOptions({ name: 'DiscountActivityForm' });
 
 const emit = defineEmits(['success']);
 
-/** 折扣类型枚举 */
-// TODO @puhui999：这里可以使用 biz-mall 里的枚举噢；
-const PromotionDiscountTypeEnum = {
-  PRICE: { type: 1 }, // 满减
-  PERCENT: { type: 2 }, // 折扣
-};
-
 // ================= 表单相关 =================
 const formData = ref<Partial<MallDiscountActivityApi.DiscountActivity>>({});
 const getTitle = computed(() => {
@@ -243,8 +238,7 @@ const [Modal, modalApi] = useVbenModal({
     // 提交表单
     try {
       // 获取折扣商品配置
-      // TODO @puhui999：structuredClone 执行会报错；
+      const products = cloneDeep(
-      const products = structuredClone(
         spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
       ) as MallDiscountActivityApi.DiscountProduct[];
       // 转换金额为分
@@ -252,7 +246,7 @@ const [Modal, modalApi] = useVbenModal({
         item.discountPercent = convertToInteger(item.discountPercent);
         item.discountPrice = convertToInteger(item.discountPrice);
       });
-      const data = structuredClone(
+      const data = cloneDeep(
         await formApi.getValues(),
       ) as MallDiscountActivityApi.DiscountActivity;
       data.products = products;

apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue

@@ -52,9 +52,21 @@ const [Form, formApi] = useVbenForm({
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
-    // 在验证前同步 formData.rules 到表单中
+    // 在验证前同步 formData 中的值到表单中
-    // TODO @puhui999：选择了分类、或者商品，还是报没选择；
     await formApi.setFieldValue('rules', formData.value.rules || []);
+    // 同步商品/分类选择到表单，确保验证时能获取到值
+    if (formData.value.productSpuIds) {
+      await formApi.setFieldValue(
+        'productSpuIds',
+        formData.value.productSpuIds,
+      );
+    }
+    if (formData.value.productCategoryIds) {
+      await formApi.setFieldValue(
+        'productCategoryIds',
+        formData.value.productCategoryIds,
+      );
+    }
     const { valid } = await formApi.validate();
     if (!valid) {
       return;

apps/web-ele/src/components/cropper/cropper-avatar.vue

@@ -6,6 +6,7 @@ import type { CropperAvatarProps } from './typing';
 import { computed, ref, unref, watch, watchEffect } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
 import { ElButton, ElMessage } from 'element-plus';
@@ -83,16 +84,16 @@ defineExpose({
         class="duration-400 absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black bg-opacity-40 opacity-0 transition-opacity group-hover:opacity-100"
         :style="getImageWrapperStyle"
       >
-        <!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-avatar.vue 里的 Icon 么？ -->
+        <IconifyIcon
-        <span
+          icon="lucide:cloud-upload"
+          class="m-auto text-gray-400"
           :style="{
             ...getImageWrapperStyle,
             width: getIconWidth,
             height: getIconWidth,
             lineHeight: getIconWidth,
           }"
-          class="icon-[ant-design--cloud-upload-outlined] text-gray-400"
+        />
-        ></span>
       </div>
       <!-- 头像图片 -->
       <img

apps/web-ele/src/components/cropper/cropper-modal.vue

@@ -4,6 +4,7 @@ import type { CropendResult, CropperModalProps, CropperType } from './typing';
 import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { dataURLtoBlob, isFunction } from '@vben/utils';
 
@@ -112,44 +113,19 @@ async function handleOk() {
 </script>
 
 <template>
-  <!-- TODO @puhui999：antd 版本里是 2/3 宽度，两边要对齐么？ -->
   <Modal
     v-bind="$attrs"
     :confirm-text="$t('ui.cropper.okText')"
     :fullscreen-button="false"
     :title="$t('ui.cropper.modalTitle')"
-    class="w-[800px]"
+    class="w-2/3"
   >
-    <!-- TODO @puhui999：antd 版本有个 h-96，两边要对齐么？ -->
+    <div class="flex h-96">
-    <div class="flex">
       <!-- 左侧区域 -->
-      <!-- TODO @puhui999：antd 版本是 h-full w-3/5 两边要对齐么？ -->
+      <div class="h-full w-3/5">
-      <div class="h-[340px] w-[55%]">
         <!-- 裁剪器容器 -->
-        <!-- TODO @puhui999：antd class 简单一点，看看要不要对齐 -->
         <div
-          class="h-[300px] bg-[#eee]"
+          class="relative h-[300px] bg-gradient-to-b from-neutral-50 to-neutral-200"
-          style="
-            background-image:
-              linear-gradient(
-                45deg,
-                rgb(0 0 0 / 25%) 25%,
-                transparent 0,
-                transparent 75%,
-                rgb(0 0 0 / 25%) 0
-              ),
-              linear-gradient(
-                45deg,
-                rgb(0 0 0 / 25%) 25%,
-                transparent 0,
-                transparent 75%,
-                rgb(0 0 0 / 25%) 0
-              );
-            background-position:
-              0 0,
-              12px 12px;
-            background-size: 24px 24px;
-          "
         >
           <CropperImage
             v-if="src"
@@ -162,8 +138,7 @@ async function handleOk() {
         </div>
 
         <!-- 工具栏 -->
-        <!-- TODO @puhui999：antd 是 mt-4，看看两边要不要对齐 -->
+        <div class="mt-4 flex items-center justify-between">
-        <div class="mt-2.5 flex items-center justify-between">
           <ElUpload
             :before-upload="handleBeforeUpload"
             :file-list="[]"
@@ -174,10 +149,9 @@ async function handleOk() {
               placement="bottom"
             >
               <ElButton size="small" type="primary">
-                <!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-modal.vue 里的 Icon 么？ -->
                 <template #icon>
                   <div class="flex items-center justify-center">
-                    <span class="icon-[ant-design--upload-outlined]"></span>
+                    <IconifyIcon icon="lucide:upload" />
                   </div>
                 </template>
               </ElButton>
@@ -192,9 +166,8 @@ async function handleOk() {
                 @click="handlerToolbar('reset')"
               >
                 <template #icon>
-                  <!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-modal.vue 里的 Icon 么？ -->
                   <div class="flex items-center justify-center">
-                    <span class="icon-[ant-design--reload-outlined]"></span>
+                    <IconifyIcon icon="lucide:rotate-ccw" />
                   </div>
                 </template>
               </ElButton>
@@ -211,10 +184,7 @@ async function handleOk() {
               >
                 <template #icon>
                   <div class="flex items-center justify-center">
-                    <!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-modal.vue 里的 Icon 么？ -->
+                    <IconifyIcon icon="ant-design:rotate-left-outlined" />
-                    <span
-                      class="icon-[ant-design--rotate-left-outlined]"
-                    ></span>
                   </div>
                 </template>
               </ElButton>
@@ -230,11 +200,8 @@ async function handleOk() {
                 @click="handlerToolbar('rotate', 45)"
               >
                 <template #icon>
-                  <!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-modal.vue 里的 Icon 么？ -->
                   <div class="flex items-center justify-center">
-                    <span
+                    <IconifyIcon icon="ant-design:rotate-right-outlined" />
-                      class="icon-[ant-design--rotate-right-outlined]"
-                    ></span>
                   </div>
                 </template>
               </ElButton>
@@ -250,9 +217,8 @@ async function handleOk() {
                 @click="handlerToolbar('scaleX')"
               >
                 <template #icon>
-                  <!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-modal.vue 里的 Icon 么？ -->
                   <div class="flex items-center justify-center">
-                    <span class="icon-[vaadin--arrows-long-h]"></span>
+                    <IconifyIcon icon="vaadin:arrows-long-h" />
                   </div>
                 </template>
               </ElButton>
@@ -268,9 +234,8 @@ async function handleOk() {
                 @click="handlerToolbar('scaleY')"
               >
                 <template #icon>
-                  <!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-modal.vue 里的 Icon 么？ -->
                   <div class="flex items-center justify-center">
-                    <span class="icon-[vaadin--arrows-long-v]"></span>
+                    <IconifyIcon icon="vaadin:arrows-long-v" />
                   </div>
                 </template>
               </ElButton>
@@ -286,9 +251,8 @@ async function handleOk() {
                 @click="handlerToolbar('zoom', 0.1)"
               >
                 <template #icon>
-                  <!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-modal.vue 里的 Icon 么？ -->
                   <div class="flex items-center justify-center">
-                    <span class="icon-[ant-design--zoom-in-outlined]"></span>
+                    <IconifyIcon icon="lucide:zoom-in" />
                   </div>
                 </template>
               </ElButton>
@@ -304,9 +268,8 @@ async function handleOk() {
                 @click="handlerToolbar('zoom', -0.1)"
               >
                 <template #icon>
-                  <!-- TODO @puhui999：可以改成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/components/cropper/cropper-modal.vue 里的 Icon 么？ -->
                   <div class="flex items-center justify-center">
-                    <span class="icon-[ant-design--zoom-out-outlined]"></span>
+                    <IconifyIcon icon="lucide:zoom-out" />
                   </div>
                 </template>
               </ElButton>
@@ -316,16 +279,16 @@ async function handleOk() {
       </div>
 
       <!-- 右侧区域 -->
-      <div class="h-[340px] w-[45%]">
+      <div class="h-full w-2/5">
         <!-- 预览区域 -->
         <div
-          class="mx-auto h-[220px] w-[220px] overflow-hidden rounded-full border border-gray-200"
+          class="mx-auto h-56 w-56 overflow-hidden rounded-full border border-gray-200"
         >
           <img
             v-if="previewSource"
             :alt="$t('ui.cropper.preview')"
             :src="previewSource"
-            class="h-full w-full"
+            class="h-full w-full object-cover"
           />
         </div>
         <!-- 头像组合预览 -->

apps/web-ele/src/components/form-create/components/use-images-upload.tsx

@@ -15,9 +15,8 @@ export function useImagesUpload() {
         default: 5,
       },
     },
-    setup() {
+    setup(props) {
-      // TODO: @puhui999：@dhb52 其实还是靠 props 默认参数起作用，没能从 formCreate 传递
+      return () => (
-      return (props: { maxNumber?: number; multiple?: boolean }) => (
         <ImageUpload maxNumber={props.maxNumber} multiple={props.multiple} />
       );
     },

apps/web-ele/src/utils/tree.ts

@@ -1,442 +0,0 @@
-interface TreeHelperConfig {
-  id: string;
-  children: string;
-  pid: string;
-}
-
-const DEFAULT_CONFIG: TreeHelperConfig = {
-  id: 'id',
-  children: 'children',
-  pid: 'pid',
-};
-export const defaultProps = {
-  children: 'children',
-  label: 'name',
-  value: 'id',
-  isLeaf: 'leaf',
-  emitPath: false, // 用于 cascader 组件：在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
-};
-
-const getConfig = (config: Partial<TreeHelperConfig>) =>
-  Object.assign({}, DEFAULT_CONFIG, config);
-
-// tree from list
-export const listToTree = <T = any>(
-  list: any[],
-  config: Partial<TreeHelperConfig> = {},
-): T[] => {
-  const conf = getConfig(config) as TreeHelperConfig;
-  const nodeMap = new Map();
-  const result: T[] = [];
-  const { id, children, pid } = conf;
-
-  for (const node of list) {
-    node[children] = node[children] || [];
-    nodeMap.set(node[id], node);
-  }
-  for (const node of list) {
-    const parent = nodeMap.get(node[pid]);
-    (parent ? parent.children : result).push(node);
-  }
-  return result;
-};
-
-export const treeToList = <T = any>(
-  tree: any,
-  config: Partial<TreeHelperConfig> = {},
-): T => {
-  config = getConfig(config);
-  const { children } = config;
-  const result: any = [...tree];
-  for (let i = 0; i < result.length; i++) {
-    const childNodes = result[i][children];
-    if (!childNodes) continue;
-    result.splice(i + 1, 0, ...childNodes);
-  }
-  return result;
-};
-
-export const findNode = <T = any>(
-  tree: any,
-  func: Fn,
-  config: Partial<TreeHelperConfig> = {},
-): null | T => {
-  config = getConfig(config);
-  const { children } = config;
-  const list = [...tree];
-  for (const node of list) {
-    if (func(node)) return node;
-    const childNodes = node[children];
-    if (childNodes) {
-      list.push(...childNodes);
-    }
-  }
-  return null;
-};
-
-export const findNodeAll = <T = any>(
-  tree: any,
-  func: Fn,
-  config: Partial<TreeHelperConfig> = {},
-): T[] => {
-  config = getConfig(config);
-  const { children } = config;
-  const list = [...tree];
-  const result: T[] = [];
-  for (const node of list) {
-    func(node) && result.push(node);
-    const childNodes = node[children];
-    if (childNodes) {
-      list.push(...childNodes);
-    }
-  }
-  return result;
-};
-
-export const findPath = <T = any>(
-  tree: any,
-  func: Fn,
-  config: Partial<TreeHelperConfig> = {},
-): null | T | T[] => {
-  config = getConfig(config);
-  const path: T[] = [];
-  const list = [...tree];
-  const visitedSet = new Set();
-  const { children } = config;
-  while (list.length > 0) {
-    const node = list[0];
-    if (visitedSet.has(node)) {
-      path.pop();
-      list.shift();
-    } else {
-      visitedSet.add(node);
-      const childNodes = node[children];
-      if (childNodes) {
-        list.unshift(...childNodes);
-      }
-      path.push(node);
-      if (func(node)) {
-        return path;
-      }
-    }
-  }
-  return null;
-};
-
-export const findPathAll = (
-  tree: any,
-  func: Fn,
-  config: Partial<TreeHelperConfig> = {},
-) => {
-  config = getConfig(config);
-  const path: any[] = [];
-  const list = [...tree];
-  const result: any[] = [];
-  const visitedSet = new Set();
-  const { children } = config;
-  while (list.length > 0) {
-    const node = list[0];
-    if (visitedSet.has(node)) {
-      path.pop();
-      list.shift();
-    } else {
-      visitedSet.add(node);
-      const childNodes = node[children];
-      if (childNodes) {
-        list.unshift(...childNodes);
-      }
-      path.push(node);
-      func(node) && result.push([...path]);
-    }
-  }
-  return result;
-};
-
-export const filter = <T = any>(
-  tree: T[],
-  func: (n: T) => boolean,
-  config: Partial<TreeHelperConfig> = {},
-): T[] => {
-  config = getConfig(config);
-  const children = config.children as string;
-
-  function listFilter(list: T[]) {
-    return list
-      .map((node: any) => ({ ...node }))
-      .filter((node) => {
-        node[children] = node[children] && listFilter(node[children]);
-        return func(node) || node[children]?.length > 0;
-      });
-  }
-
-  return listFilter(tree);
-};
-
-export const forEach = <T = any>(
-  tree: T[],
-  func: (n: T) => any,
-  config: Partial<TreeHelperConfig> = {},
-): void => {
-  config = getConfig(config);
-  const list: any[] = [...tree];
-  const { children } = config;
-  for (let i = 0; i < list.length; i++) {
-    // func 返回true就终止遍历，避免大量节点场景下无意义循环，引起浏览器卡顿
-    if (func(list[i])) {
-      return;
-    }
-    children &&
-      list[i][children] &&
-      list.splice(i + 1, 0, ...list[i][children]);
-  }
-};
-
-/**
- * @description: Extract tree specified structure
- */
-export const treeMap = <T = any>(
-  treeData: T[],
-  opt: { children?: string; conversion: Fn },
-): T[] => {
-  return treeData.map((item) => treeMapEach(item, opt));
-};
-
-/**
- * @description: Extract tree specified structure
- */
-export const treeMapEach = (
-  data: any,
-  { children = 'children', conversion }: { children?: string; conversion: Fn },
-) => {
-  const haveChildren =
-    Array.isArray(data[children]) && data[children].length > 0;
-  const conversionData = conversion(data) || {};
-  return haveChildren
-    ? {
-        ...conversionData,
-        [children]: data[children].map((i: number) =>
-          treeMapEach(i, {
-            children,
-            conversion,
-          }),
-        ),
-      }
-    : {
-        ...conversionData,
-      };
-};
-
-/**
- * 递归遍历树结构
- * @param treeDatas 树
- * @param callBack 回调
- * @param parentNode 父节点
- */
-export const eachTree = (treeDatas: any[], callBack: Fn, parentNode = {}) => {
-  treeDatas.forEach((element) => {
-    const newNode = callBack(element, parentNode) || element;
-    if (element.children) {
-      eachTree(element.children, callBack, newNode);
-    }
-  });
-};
-
-/**
- * 构造树型结构数据
- * @param {*} data 数据源
- * @param {*} id id字段 默认 'id'
- * @param {*} parentId 父节点字段 默认 'parentId'
- * @param {*} children 孩子节点字段 默认 'children'
- */
-export const handleTree = (
-  data: any[],
-  id?: string,
-  parentId?: string,
-  children?: string,
-) => {
-  if (!Array.isArray(data)) {
-    console.warn('data must be an array');
-    return [];
-  }
-  const config = {
-    id: id || 'id',
-    parentId: parentId || 'parentId',
-    childrenList: children || 'children',
-  };
-
-  const childrenListMap = {};
-  const nodeIds = {};
-  const tree: any[] = [];
-
-  for (const d of data) {
-    const parentId = d[config.parentId];
-    if (
-      childrenListMap[parentId] === null ||
-      childrenListMap[parentId] === undefined
-    ) {
-      childrenListMap[parentId] = [];
-    }
-    nodeIds[d[config.id]] = d;
-    childrenListMap[parentId].push(d);
-  }
-
-  for (const d of data) {
-    const parentId = d[config.parentId];
-    if (nodeIds[parentId] === null || nodeIds[parentId] === undefined) {
-      tree.push(d);
-    }
-  }
-
-  for (const t of tree) {
-    adaptToChildrenList(t);
-  }
-
-  function adaptToChildrenList(o) {
-    if (childrenListMap[o[config.id]] !== null) {
-      o[config.childrenList] = childrenListMap[o[config.id]];
-    }
-    if (o[config.childrenList]) {
-      for (const c of o[config.childrenList]) {
-        adaptToChildrenList(c);
-      }
-    }
-  }
-
-  return tree;
-};
-
-/**
- * 构造树型结构数据
- * @param {*} data 数据源
- * @param {*} id id字段 默认 'id'
- * @param {*} parentId 父节点字段 默认 'parentId'
- * @param {*} children 孩子节点字段 默认 'children'
- * @param {*} rootId 根Id 默认 0
- */
-// @ts-ignore: 遗留函数，保持原有逻辑不变
-export const handleTree2 = (data, id, parentId, children, rootId) => {
-  id = id || 'id';
-  parentId = parentId || 'parentId';
-  // children = children || 'children'
-  rootId =
-    rootId ||
-    Math.min(
-      ...data.map((item) => {
-        return item[parentId];
-      }),
-    ) ||
-    0;
-  // 对源数据深度克隆
-  const cloneData = structuredClone(data);
-  // 循环所有项
-  const treeData = cloneData.filter((father) => {
-    const branchArr = cloneData.filter((child) => {
-      // 返回每一项的子级数组
-      return father[id] === child[parentId];
-    });
-    branchArr.length > 0 ? (father.children = branchArr) : '';
-    // 返回第一层
-    return father[parentId] === rootId;
-  });
-  return treeData === '' ? data : treeData;
-};
-
-/**
- * 校验选中的节点，是否为指定 level
- *
- * @param tree 要操作的树结构数据
- * @param nodeId 需要判断在什么层级的数据
- * @param level 检查的级别, 默认检查到二级
- * @return true 是；false 否
- */
-export const checkSelectedNode = (
-  tree: any[],
-  nodeId: any,
-  level = 2,
-): boolean => {
-  if (tree === undefined || !Array.isArray(tree) || tree.length === 0) {
-    console.warn('tree must be an array');
-    return false;
-  }
-
-  // 校验是否是一级节点
-  if (tree.some((item) => item.id === nodeId)) {
-    return false;
-  }
-
-  // 递归计数
-  let count = 1;
-
-  // 深层次校验
-  function performAThoroughValidation(arr: any[]): boolean {
-    count += 1;
-    for (const item of arr) {
-      if (item.id === nodeId) {
-        return true;
-      } else if (
-        item.children !== undefined &&
-        item.children.length > 0 &&
-        performAThoroughValidation(item.children)
-      ) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  for (const item of tree) {
-    count = 1;
-    if (
-      performAThoroughValidation(item.children) && // 找到后对比是否是期望的层级
-      count >= level
-    ) {
-      return true;
-    }
-  }
-
-  return false;
-};
-
-/**
- * 获取节点的完整结构
- * @param tree 树数据
- * @param nodeId 节点 id
- */
-export const treeToString = (tree: any[], nodeId) => {
-  if (tree === undefined || !Array.isArray(tree) || tree.length === 0) {
-    console.warn('tree must be an array');
-    return '';
-  }
-  // 校验是否是一级节点
-  const node = tree.find((item) => item.id === nodeId);
-  if (node !== undefined) {
-    return node.name;
-  }
-  let str = '';
-
-  function performAThoroughValidation(arr) {
-    if (arr === undefined || !Array.isArray(arr) || arr.length === 0) {
-      return false;
-    }
-    for (const item of arr) {
-      if (item.id === nodeId) {
-        str += ` / ${item.name}`;
-        return true;
-      } else if (item.children !== undefined && item.children.length > 0) {
-        str += ` / ${item.name}`;
-        if (performAThoroughValidation(item.children)) {
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-
-  for (const item of tree) {
-    str = `${item.name}`;
-    if (performAThoroughValidation(item.children)) {
-      break;
-    }
-  }
-  return str;
-};

apps/web-ele/src/views/mall/promotion/article/data.ts

@@ -92,14 +92,10 @@ export function useFormSchema(): VbenFormSchema[] {
       defaultValue: true,
     },
     {
-      // TODO: @puhui999：商品关联
       fieldName: 'spuId',
       label: '商品关联',
       component: 'Input',
       formItemClass: 'col-span-2',
-      componentProps: {
-        placeholder: '请输入商品 SPU 编号',
-      },
     },
     {
       fieldName: 'sort',

apps/web-ele/src/views/mall/promotion/article/modules/form.vue

@@ -14,6 +14,7 @@ import {
   updateArticle,
 } from '#/api/mall/promotion/article';
 import { $t } from '#/locales';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
@@ -41,6 +42,10 @@ const [Form, formApi] = useVbenForm({
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
+    // 同步商品选择到表单，确保验证时能获取到值
+    if (formData.value?.spuId) {
+      await formApi.setFieldValue('spuId', formData.value.spuId);
+    }
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
@@ -82,6 +87,11 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal :title="getTitle" class="w-2/5">
-    <Form class="mx-4" />
+    <Form class="mx-4">
+      <!-- 自定义插槽：商品选择 -->
+      <template #spuId>
+        <SpuShowcase v-model="formData!.spuId" :limit="1" />
+      </template>
+    </Form>
   </Modal>
 </template>

apps/web-ele/src/views/mall/promotion/coupon/template/modules/form.vue

@@ -49,6 +49,19 @@ const [Form, formApi] = useVbenForm({
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
+    // 同步商品/分类选择到表单，确保验证时能获取到值
+    if (formData.value.productSpuIds) {
+      await formApi.setFieldValue(
+        'productSpuIds',
+        formData.value.productSpuIds,
+      );
+    }
+    if (formData.value.productCategoryIds) {
+      await formApi.setFieldValue(
+        'productCategoryIds',
+        formData.value.productCategoryIds,
+      );
+    }
     const { valid } = await formApi.validate();
     if (!valid) {
       return;

apps/web-ele/src/views/mall/promotion/discountActivity/modules/form.vue

@@ -10,7 +10,9 @@ import type {
 import { computed, nextTick, ref } from 'vue';
 
 import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { PromotionDiscountTypeEnum } from '@vben/constants';
 import {
+  cloneDeep,
   convertToInteger,
   erpCalculatePercentage,
   formatToFraction,
@@ -37,12 +39,6 @@ import { useFormSchema } from '../data';
 
 defineOptions({ name: 'DiscountActivityForm' });
 
-/** 折扣类型枚举 */
-const PromotionDiscountTypeEnum = {
-  PRICE: { type: 1 }, // 满减
-  PERCENT: { type: 2 }, // 折扣
-};
-
 const emit = defineEmits(['success']);
 
 // ================= 表单相关 =================
@@ -243,7 +239,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       // 获取折扣商品配置
-      const products = structuredClone(
+      const products = cloneDeep(
         spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
       ) as MallDiscountActivityApi.DiscountProduct[];
 
@@ -253,7 +249,7 @@ const [Modal, modalApi] = useVbenModal({
         item.discountPrice = convertToInteger(item.discountPrice);
       });
 
-      const data = structuredClone(
+      const data = cloneDeep(
         await formApi.getValues(),
       ) as MallDiscountActivityApi.DiscountActivity;
       data.products = products;

apps/web-ele/src/views/mall/promotion/rewardActivity/modules/form.vue

@@ -52,8 +52,21 @@ const [Form, formApi] = useVbenForm({
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
-    // 在验证前同步 formData.rules 到表单中
+    // 在验证前同步 formData 中的值到表单中
     await formApi.setFieldValue('rules', formData.value.rules || []);
+    // 同步商品/分类选择到表单，确保验证时能获取到值
+    if (formData.value.productSpuIds) {
+      await formApi.setFieldValue(
+        'productSpuIds',
+        formData.value.productSpuIds,
+      );
+    }
+    if (formData.value.productCategoryIds) {
+      await formApi.setFieldValue(
+        'productCategoryIds',
+        formData.value.productCategoryIds,
+      );
+    }
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
@@ -65,9 +78,8 @@ const [Modal, modalApi] = useVbenModal({
       // 使用 formData.value 作为基础，确保 rules 来自 formData
       const data = { ...values, ...formData.value };
       if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
-        // TODO @puhui999：这里 ele 会告警；antd 不会告警，可能要看看；
+        data.startTime = data.startAndEndTime[0];
-        data.startTime = Number(data.startAndEndTime[0]);
+        data.endTime = data.startAndEndTime[1];
-        data.endTime = Number(data.startAndEndTime[1]);
         delete data.startAndEndTime;
       }
       // 深拷贝 rules 避免修改原始数据