fix: sku list

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

@@ -160,7 +160,6 @@ export function useSkuFormSchema(
       fieldName: 'singleSkuList',
       label: '',
       component: 'Input',
-      componentProps: {},
       dependencies: {
         triggerFields: ['specType'],
         // 当 specType 为 false（单规格）时显示
@@ -172,7 +171,6 @@ export function useSkuFormSchema(
       fieldName: 'productAttributes',
       label: '商品属性',
       component: 'Input',
-      componentProps: {},
       dependencies: {
         triggerFields: ['specType'],
         // 当 specType 为 true（多规格）时显示
@@ -184,7 +182,6 @@ export function useSkuFormSchema(
       fieldName: 'batchSkuList',
       label: '批量设置',
       component: 'Input',
-      componentProps: {},
       dependencies: {
         triggerFields: ['specType'],
         // 当 specType 为 true（多规格）且 propertyList 有数据时显示，且非详情模式
@@ -197,7 +194,6 @@ export function useSkuFormSchema(
       fieldName: 'multiSkuList',
       label: '规格列表',
       component: 'Input',
-      componentProps: {},
       dependencies: {
         triggerFields: ['specType'],
         // 当 specType 为 true（多规格）且 propertyList 有数据时显示

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

@@ -313,6 +313,7 @@ onMounted(async () => {
 </script>
 
 <template>
+  <div>
     <ProductPropertyAddFormModal :property-list="propertyList" />
 
     <Page auto-content-height>
@@ -376,4 +377,5 @@ onMounted(async () => {
         </Tabs>
       </ContentWrap>
     </Page>
+  </div>
 </template>

apps/web-antd/src/views/mall/product/spu/modules/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import type { MallSpuApi } from '#/api/mall/product/spu';
 
 export interface PropertyAndValues {
@@ -39,9 +40,7 @@ const getPropertyList = (spu: MallSpuApi.Spu): PropertyAndValues[] => {
           // 添加属性
           if (!properties?.some((item) => item.id === propertyId)) {
             properties.push({
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               id: propertyId!,
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               name: propertyName!,
               values: [],
             });
@@ -51,7 +50,6 @@ const getPropertyList = (spu: MallSpuApi.Spu): PropertyAndValues[] => {
           if (
             !properties[index]?.values?.some((value) => value.id === valueId)
           ) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             properties[index]?.values?.push({ id: valueId!, name: valueName! });
           }
         },

apps/web-antd/src/views/mall/product/spu/modules/product-attributes.vue

@@ -48,7 +48,7 @@ interface InputRefItem {
 
 const inputRef = ref<InputRefItem[]>([]); // 标签输入框Ref
 /** 解决 ref 在 v-for 中的获取问题*/
-const setInputRef = (el: any) => {
+function setInputRef(el: any) {
   if (el === null || el === undefined) return;
   // 如果不存在 id 相同的元素才添加
   if (
@@ -58,7 +58,7 @@ const setInputRef = (el: any) => {
   ) {
     inputRef.value.push(el);
   }
-};
+}
 const attributeList = ref<PropertyAndValues[]>([]); // 商品属性列表
 const attributeOptions = ref<MallPropertyApi.PropertyValue[]>([]); // 商品属性值下拉框
 
@@ -75,26 +75,26 @@ watch(
 );
 
 /** 删除属性值*/
-const handleCloseValue = (index: number, valueIndex: number) => {
+function handleCloseValue(index: number, valueIndex: number) {
   attributeList.value?.[index]?.values?.splice(valueIndex, 1);
-};
+}
 
 /** 删除属性*/
-const handleCloseProperty = (index: number) => {
+function handleCloseProperty(index: number) {
   attributeList.value?.splice(index, 1);
   emit('success', attributeList.value);
-};
+}
 
 /** 显示输入框并获取焦点 */
-const showInput = async (index: number) => {
+async function showInput(index: number) {
   attributeIndex.value = index;
   inputRef.value?.[index]?.focus();
   // 获取属性下拉选项
   await getAttributeOptions(attributeList.value?.[index]?.id!);
-};
+}
 
 // 定义 success 事件，用于操作成功后的回调
-const handleInputConfirm = async (index: number, propertyId: number) => {
+async function handleInputConfirm(index: number, propertyId: number) {
   // 从数组中取最后一个输入的值（tags 模式下 inputValue 是数组）
   const currentValue = inputValue.value?.[inputValue.value.length - 1]?.trim();
 
@@ -144,12 +144,12 @@ const handleInputConfirm = async (index: number, propertyId: number) => {
   }
   attributeIndex.value = null;
   inputValue.value = [];
-};
+}
 
 /** 获取商品属性下拉选项 */
-const getAttributeOptions = async (propertyId: number) => {
+async function getAttributeOptions(propertyId: number) {
   attributeOptions.value = await getPropertyValueSimpleList(propertyId);
-};
+}
 </script>
 
 <template>

apps/web-antd/src/views/mall/product/spu/modules/product-property-add-form.vue

@@ -128,7 +128,7 @@ const [Modal, modalApi] = useVbenModal({
         name,
         values: [],
       });
-      message.success($t('common.createSuccess'));
+      message.success($t('ui.actionMessage.operationSuccess'));
       await modalApi.close();
       emit('success');
     } catch (error) {

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

@@ -60,15 +60,15 @@ const skuList = ref<MallSpuApi.Sku[]>([
 ]); // 批量添加时的临时数据
 
 /** 批量添加 */
-const batchAdd = () => {
+function batchAdd() {
   validateProperty();
   formData.value!.skus!.forEach((item: MallSpuApi.Sku) => {
     copyValueToTarget(item, skuList.value[0]);
   });
-};
+}
 
 /** 校验商品属性属性值 */
-const validateProperty = () => {
+function validateProperty() {
   // 校验商品属性属性值是否为空，有一个为空都不给过
   const warningInfo = '存在属性属性值为空，请先检查完善属性值后重试！！！';
   for (const item of props.propertyList as PropertyAndValues[]) {
@@ -77,24 +77,24 @@ const validateProperty = () => {
       throw new Error(warningInfo);
     }
   }
-};
+}
 
 /** 删除 sku */
-const deleteSku = (row: MallSpuApi.Sku) => {
+function deleteSku(row: MallSpuApi.Sku) {
   const index = formData.value!.skus!.findIndex(
     // 直接把列表转成字符串比较
     (sku: MallSpuApi.Sku) =>
       JSON.stringify(sku.properties) === JSON.stringify(row.properties),
   );
   formData.value!.skus!.splice(index, 1);
-};
+}
 
 const tableHeaders = ref<{ label: string; prop: string }[]>([]); // 多属性表头
 
 /**
  * 保存时，每个商品规格的表单要校验下。例如说,销售金额最低是 0.01 这种。
  */
-const validateSku = () => {
+function validateSku() {
   validateProperty();
   let warningInfo = '请检查商品各行相关属性配置，';
   let validate = true; // 默认通过
@@ -114,9 +114,9 @@ const validateSku = () => {
       throw new Error(warningInfo);
     }
   }
-};
+}
 
-const getValue = (obj: any, arg: string): unknown => {
+function getValue(obj: any, arg: string): unknown {
   const keys = arg.split('.');
   let value: any = obj;
   for (const key of keys) {
@@ -128,15 +128,15 @@ const getValue = (obj: any, arg: string): unknown => {
     }
   }
   return value;
-};
+}
 
 /**
  * 选择时触发
  * @param records 传递过来的选中的 sku 是一个数组
  */
-const handleSelectionChange = ({ records }: { records: MallSpuApi.Sku[] }) => {
+function handleSelectionChange({ records }: { records: MallSpuApi.Sku[] }) {
   emit('selectionChange', records);
-};
+}
 
 /**
  * 将传进来的值赋值给 skuList
@@ -154,7 +154,7 @@ watch(
 );
 
 /** 生成表数据 */
-const generateTableData = (propertyList: PropertyAndValues[]) => {
+function generateTableData(propertyList: PropertyAndValues[]) {
   // 构建数据结构
   const propertyValues = propertyList.map((item: PropertyAndValues) =>
     (item.values || []).map((v: { id: number; name: string }) => ({
@@ -194,12 +194,12 @@ const generateTableData = (propertyList: PropertyAndValues[]) => {
     }
     formData.value!.skus!.push(row);
   }
-};
+}
 
 /**
  * 生成 skus 前置校验
  */
-const validateData = (propertyList: PropertyAndValues[]): boolean => {
+function validateData(propertyList: PropertyAndValues[]): boolean {
   const skuPropertyIds: number[] = [];
   formData.value!.skus!.forEach((sku: MallSpuApi.Sku) =>
     sku.properties
@@ -212,12 +212,12 @@ const validateData = (propertyList: PropertyAndValues[]): boolean => {
   );
   const propertyIds = propertyList.map((item: PropertyAndValues) => item.id);
   return skuPropertyIds.length === propertyIds.length;
-};
+}
 
 /** 构建所有排列组合 */
-const build = (
+function build(
   propertyValuesList: MallSpuApi.Property[][],
-): (MallSpuApi.Property | MallSpuApi.Property[])[] => {
+): (MallSpuApi.Property | MallSpuApi.Property[])[] {
   if (propertyValuesList.length === 0) {
     return [];
   } else if (propertyValuesList.length === 1) {
@@ -240,7 +240,7 @@ const build = (
     }
     return result;
   }
-};
+}
 
 /** 监听属性列表，生成相关参数和表头 */
 watch(
@@ -298,15 +298,16 @@ watch(
 
 const activitySkuListRef = ref();
 
-const getSkuTableRef = () => {
+function getSkuTableRef() {
   return activitySkuListRef.value;
-};
+}
 
 // 暴露出生成 sku 方法，给添加属性成功时调用
 defineExpose({ generateTableData, validateSku, getSkuTableRef });
 </script>
 
 <template>
+  <div>
     <!-- 情况一：添加/修改 -->
     <VxeTable
       v-if="!isDetail && !isActivityComponent"
@@ -316,7 +317,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
       size="small"
       class="w-full"
     >
-    <VxeColumn align="center" title="图片" min-width="80">
+      <VxeColumn align="center" title="图片" min-width="120">
         <template #default="{ row }">
           <ImageUpload
             v-model:value="row.picUrl"
@@ -442,7 +443,13 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           <Button v-if="isBatch" type="link" size="small" @click="batchAdd">
             批量添加
           </Button>
-        <Button v-else type="link" size="small" danger @click="deleteSku(row)">
+          <Button
+            v-else
+            type="link"
+            size="small"
+            danger
+            @click="deleteSku(row)"
+          >
             删除
           </Button>
         </template>
@@ -463,7 +470,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
       @checkbox-all="handleSelectionChange"
     >
       <VxeColumn v-if="isComponent" type="checkbox" width="45" />
-    <VxeColumn align="center" title="图片" min-width="80">
+      <VxeColumn align="center" title="图片" min-width="120">
         <template #default="{ row }">
           <Image
             v-if="row.picUrl"
@@ -548,7 +555,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
       class="w-full"
     >
       <VxeColumn v-if="isComponent" type="checkbox" width="45" />
-    <VxeColumn align="center" title="图片" min-width="80">
+      <VxeColumn align="center" title="图片" min-width="120">
         <template #default="{ row }">
           <Image
             :src="row.picUrl"
@@ -601,4 +608,5 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
       <!--  方便扩展每个活动配置的属性不一样  -->
       <slot name="extension"></slot>
     </VxeTable>
+  </div>
 </template>

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

@@ -6,8 +6,9 @@ import type { MallSpuApi } from '#/api/mall/product/spu';
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
+import { fenToYuan } from '@vben/utils';
 
-import { message } from 'ant-design-vue';
+import { Input, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSpu } from '#/api/mall/product/spu';
@@ -23,13 +24,6 @@ const emit = defineEmits<{
 const selectedSkuId = ref<number>();
 const spuId = ref<number>();
 
-// 价格格式化：分转元
-const fenToYuan = (price?: number | string) => {
-  const numPrice =
-    typeof price === 'string' ? Number.parseFloat(price) : price || 0;
-  return (numPrice / 100).toFixed(2);
-};
-
 // 配置列
 const gridColumns = computed<VxeGridProps['columns']>(() => [
   {
@@ -102,11 +96,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 // 处理选中
-const handleSelected = (row: MallSpuApi.Sku) => {
+function handleSelected(row: MallSpuApi.Sku) {
   emit('change', row);
   modalApi.close();
   selectedSkuId.value = undefined;
-};
+}
 
 // 初始化弹窗
 const [Modal, modalApi] = useVbenModal({
@@ -133,7 +127,7 @@ const [Modal, modalApi] = useVbenModal({
     <Grid>
       <!-- 单选列 -->
       <template #radio-column="{ row }">
-        <input
+        <Input
           v-model="selectedSkuId"
           :value="row.id"
           class="cursor-pointer"