review：【antd】【mall】商品发布相关

apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue

@@ -8,8 +8,6 @@ import { computed, ref } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { fenToYuan } from '@vben/utils';
 
-import { message } from 'ant-design-vue';
-
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSpu } from '#/api/mall/product/spu';
 
@@ -61,6 +59,7 @@ const gridColumns = computed<VxeGridProps['columns']>(() => [
   },
 ]);
 
+// TODO @芋艿：要不要直接非 pager？
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: gridColumns.value,
@@ -76,17 +75,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
           if (!spuId.value) {
             return { items: [], total: 0 };
           }
-          try {
-            const spu = await getSpu(spuId.value);
-            return {
-              items: spu.skus || [],
-              total: spu.skus?.length || 0,
-            };
-          } catch (error) {
-            message.error('加载 SKU 数据失败');
-            console.error(error);
-            return { items: [], total: 0 };
-          }
+          const spu = await getSpu(spuId.value);
+          return {
+            items: spu.skus || [],
+            total: spu.skus?.length || 0,
+          };
         },
       },
     },
@@ -113,12 +106,10 @@ const [Modal, modalApi] = useVbenModal({
       spuId.value = undefined;
       return;
     }
-
     const data = modalApi.getData<SpuData>();
     if (!data?.spuId) {
       return;
     }
-
     spuId.value = data.spuId;
     await gridApi.query();
   },

apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue

@@ -28,17 +28,19 @@ const emit = defineEmits(['update:modelValue', 'change']);
 
 const productSpus = ref<MallSpuApi.Spu[]>([]);
 const spuTableSelectRef = ref<InstanceType<typeof SpuTableSelect>>();
+const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
 
 /** 计算是否可以添加 */
 const canAdd = computed(() => {
-  if (props.disabled) return false;
-  if (!props.limit) return true;
+  if (props.disabled) {
+    return false;
+  }
+  if (!props.limit) {
+    return true;
+  }
   return productSpus.value.length < props.limit;
 });
 
-/** 是否为多选模式 */
-const isMultiple = computed(() => props.limit !== 1);
-
 /** 监听 modelValue 变化，加载商品详情 */
 watch(
   () => props.modelValue,

apps/web-antd/src/views/mall/product/spu/components/spu-table-select.vue

@@ -26,6 +26,7 @@ const emit = defineEmits<{
   change: [spu: MallSpuApi.Spu | MallSpuApi.Spu[]];
 }>();
 
+// TODO @芋艿：要不要加类型；
 const categoryList = ref<any[]>([]);
 const categoryTreeList = ref<any[]>([]);
 
@@ -71,13 +72,11 @@ const formSchema = computed<VbenFormSchema[]>(() => [
 /** 表格列配置 */
 const gridColumns = computed<VxeGridProps['columns']>(() => {
   const columns: VxeGridProps['columns'] = [];
-
   if (props.multiple) {
     columns.push({ type: 'checkbox', width: 55 });
   } else {
     columns.push({ type: 'radio', width: 55 });
   }
-
   columns.push(
     {
       field: 'id',
@@ -109,7 +108,6 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
       },
     },
   );
-
   return columns;
 });
 
@@ -129,14 +127,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
           reserve: true,
         }
       : undefined,
-    radioConfig: !props.multiple
-      ? {
+    radioConfig: props.multiple
+      ? undefined
+      : {
           reserve: true,
-        }
-      : undefined,
+        },
     proxyConfig: {
       ajax: {
         async query({ page }: any, formValues: any) {
+          // TODO @芋艿：怎么简化下。
           const data = await getSpuPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
@@ -145,7 +144,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
             categoryId: formValues.categoryId || undefined,
             createTime: formValues.createTime || undefined,
           });
-
           return {
             items: data.list || [],
             total: data.total || 0,
@@ -165,6 +163,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 多选：处理选中变化 */
+// TODO @芋艿：要不要清理掉？
 function handleCheckboxChange() {
   // vxe-table 自动管理选中状态，无需手动处理
 }
@@ -180,13 +179,16 @@ function handleRadioChange() {
 
 const [Modal, modalApi] = useVbenModal({
   destroyOnClose: true,
+  // TODO @芋艿：看看怎么简化
   onConfirm: props.multiple
     ? () => {
-        const selectedRows = gridApi.grid.getCheckboxRecords() as MallSpuApi.Spu[];
+        const selectedRows =
+          gridApi.grid.getCheckboxRecords() as MallSpuApi.Spu[];
         emit('change', selectedRows);
         modalApi.close();
       }
     : undefined,
+  // TODO @芋艿：看看怎么简化？
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       gridApi.grid.clearCheckboxRow();

apps/web-antd/src/views/mall/product/spu/form/data.ts

@@ -102,6 +102,7 @@ export function useInfoFormSchema(): VbenFormSchema[] {
 }
 
 /** 价格库存的表单 */
+// TODO @puhui999：貌似太宽了。。。屏幕小的，整个 table 展示补全哈~~
 export function useSkuFormSchema(
   propertyList: any[] = [],
   isDetail: boolean = false,

apps/web-antd/src/views/mall/product/spu/form/modules/sku-list.vue

@@ -212,7 +212,9 @@ function build(
     const result: MallSpuApi.Property[][] = [];
     const rest = build(propertyValuesList.slice(1));
     const firstList = propertyValuesList[0];
-    if (!firstList) return [];
+    if (!firstList) {
+      return [];
+    }
 
     for (const element of firstList) {
       for (const element_ of rest) {
@@ -289,8 +291,6 @@ defineExpose({
 <template>
   <div>
     <!-- 情况一：添加/修改 -->
-    <!-- TODO @puhui999：有可以通过 grid 来做么？主要考虑，这样不直接使用 vxe 标签，抽象程度更高； -->
-    <!-- TODO 还是先这样吧 🤣🤣   -->
     <VxeTable
       v-if="!isDetail && !isActivityComponent"
       :data="isBatch ? skuList : formData?.skus || []"