feat: 新增商品属性管理组件，包含属性列表和属性值的增删功能

2025-07-07 07:25:38 +08:00 · 2025-07-07 07:25:38 +08:00 · 4fafb39efc
parent f0516fa857
commit 4fafb39efc
4 changed files with 164 additions and 107 deletions
--- a/apps/web-ele/src/views/mall/product/spu/components/data.ts
+++ b/apps/web-ele/src/views/mall/product/spu/components/data.ts
@ -0,0 +1,42 @@
+import type { MallSpuApi } from '#/api/mall/product/spu';
+import type { PropertyAndValues } from './model';
+
+/**
+ * 获得商品的规格列表 - 商品相关的公共函数
+ *
+ * @param spu
+ * @return PropertyAndValues 规格列表
+ */
+const getPropertyList = (spu: MallSpuApi.Spu): PropertyAndValues[] => {
+  //  直接拿返回的 skus 属性逆向生成出 propertyList
+  const properties: PropertyAndValues[] = [];
+  // 只有是多规格才处理
+  if (spu.specType) {
+    spu.skus?.forEach((sku) => {
+      sku.properties?.forEach(
+        ({ propertyId, propertyName, valueId, valueName }) => {
+          // 添加属性
+          if (!properties?.some((item) => item.id === propertyId)) {
+            properties.push({
+              id: propertyId!,
+              name: propertyName!,
+              values: [],
+            });
+          }
+          // 添加属性值
+          const index = properties?.findIndex((item) => item.id === propertyId);
+          if (
+            index !== undefined &&
+            index >= 0 &&
+            !properties[index]!.values?.some((value) => value.id === valueId)
+          ) {
+            properties[index]!.values?.push({ id: valueId!, name: valueName! });
+          }
+        },
+      );
+    });
+  }
+  return properties;
+};
+
+export { getPropertyList };
--- a/apps/web-ele/src/views/mall/product/spu/components/model.d.ts
+++ b/apps/web-ele/src/views/mall/product/spu/components/model.d.ts
@ -1,5 +1,4 @@
 import SkuList from './SkuList.vue';
-import { Spu } from '@/api/mall/product/spu';

 interface PropertyAndValues {
  id: number;
@ -23,40 +22,4 @@ interface RuleConfig {
  message: string;
 }

-/**
- * 获得商品的规格列表 - 商品相关的公共函数
- *
- * @param spu
- * @return PropertyAndValues 规格列表
- */
-const getPropertyList = (spu: Spu): PropertyAndValues[] => {
-  //  直接拿返回的 skus 属性逆向生成出 propertyList
-  const properties: PropertyAndValues[] = [];
-  // 只有是多规格才处理
-  if (spu.specType) {
-    spu.skus?.forEach((sku) => {
-      sku.properties?.forEach(
-        ({ propertyId, propertyName, valueId, valueName }) => {
-          // 添加属性
-          if (!properties?.some((item) => item.id === propertyId)) {
-            properties.push({
-              id: propertyId!,
-              name: propertyName!,
-              values: [],
-            });
-          }
-          // 添加属性值
-          const index = properties?.findIndex((item) => item.id === propertyId);
-          if (
-            !properties[index].values?.some((value) => value.id === valueId)
-          ) {
-            properties[index].values?.push({ id: valueId!, name: valueName! });
-          }
-        },
-      );
-    });
-  }
-  return properties;
-};
-
 export { SkuList, PropertyAndValues, RuleConfig, getPropertyList };
--- a/apps/web-ele/src/views/mall/product/spu/components/product-attributes.vue
+++ b/apps/web-ele/src/views/mall/product/spu/components/product-attributes.vue
@ -1,55 +1,57 @@
 <!-- 商品发布 - 库存价格 - 属性列表 -->
 <template>
-  <el-col v-for="(item, index) in attributeList" :key="index">
+  <ElCol v-for="(item, index) in attributeList" :key="index">
    <div>
-      <el-text class="mx-1">属性名：</el-text>
-      <el-tag class="mx-1" type="success" @close="handleCloseProperty(index)">
+      <ElText class="mx-1">属性名：</ElText>
+      <ElTag class="mx-1" type="success" @close="handleCloseProperty(index)">
        {{ item.name }}
-      </el-tag>
+      </ElTag>
    </div>
    <div>
-      <el-text class="mx-1">属性值：</el-text>
-      <el-tag
-        v-for="(value, valueIndex) in item.values"
-        :key="value.id"
-        class="mx-1"
-        @close="handleCloseValue(index, valueIndex)"
-      >
-        {{ value.name }}
-      </el-tag>
-      <el-select
-        v-show="inputVisible(index)"
-        :id="`input${index}`"
-        :ref="setInputRef"
-        v-model="inputValue"
-        :reserve-keyword="false"
-        allow-create
-        class="!w-30"
-        default-first-option
-        filterable
-        size="small"
-        @blur="handleInputConfirm(index, item.id)"
-        @change="handleInputConfirm(index, item.id)"
-        @keyup.enter="handleInputConfirm(index, item.id)"
-      >
-        <el-option
-          v-for="item2 in attributeOptions"
-          :key="item2.id"
-          :label="item2.name"
-          :value="item2.name"
-        />
-      </el-select>
-      <el-button
-        v-show="!inputVisible(index)"
-        class="button-new-tag ml-1"
-        size="small"
-        @click="showInput(index)"
-      >
-        + 添加
-      </el-button>
+      <ElSpace :size="1">
+        <ElText class="mx-1">属性值：</ElText>
+        <ElTag
+          v-for="(value, valueIndex) in item.values"
+          :key="value.id"
+          class="mx-1"
+          @close="handleCloseValue(index, valueIndex)"
+        >
+          {{ value.name }}
+        </ElTag>
+        <ElSelect
+          v-show="inputVisible(index)"
+          :id="`input${index}`"
+          :ref="setInputRef"
+          v-model="inputValue"
+          :reserve-keyword="false"
+          allow-create
+          class="!w-30"
+          default-first-option
+          filterable
+          size="small"
+          @blur="handleInputConfirm(index, item.id)"
+          @change="handleInputConfirm(index, item.id)"
+          @keyup.enter="handleInputConfirm(index, item.id)"
+        >
+          <el-option
+            v-for="item2 in attributeOptions"
+            :key="item2.id"
+            :label="item2.name"
+            :value="item2.name"
+          />
+        </ElSelect>
+        <ElButton
+          v-show="!inputVisible(index)"
+          class="button-new-tag ml-1"
+          size="small"
+          @click="showInput(index)"
+        >
+          + 添加
+        </ElButton>
+      </ElSpace>
    </div>
-    <el-divider class="my-10px" />
-  </el-col>
+    <ElDivider class="my-10px" />
+  </ElCol>
 </template>

 <script lang="ts" setup>
@ -58,18 +60,17 @@ import type { PropType } from 'vue';

 import * as PropertyApi from '#/api/mall/product/property';
 import type { MallPropertyApi } from '#/api/mall/product/property';
-import { ElMessage } from 'element-plus';
+import {
+  ElMessage,
+  ElCol,
+  ElTag,
+  ElText,
+  ElButton,
+  ElDivider,
+  ElSpace,
+} from 'element-plus';
 import { $t } from '#/locales';
-
-// 定义PropertyAndValues接口
-interface PropertyAndValues {
-  id: number;
-  name: string;
-  values: Array<{
-    id: number;
-    name: string;
-  }>;
-}
+import type { PropertyAndValues } from './model';

 defineOptions({ name: 'ProductAttributes' });

@ -117,7 +118,8 @@ watch(
 /** 删除属性值*/
 const handleCloseValue = (index: number, valueIndex: number) => {
  if (index < attributeList.value.length) {
-    attributeList.value[index]!.values.splice(valueIndex, 1);
+    const values = attributeList.value[index]!.values as any[];
+    values.splice(valueIndex, 1);
  }
 };

@ -144,11 +146,8 @@ const emit = defineEmits(['success']); // 定义 success 事件，用于操作
 const handleInputConfirm = async (index: number, propertyId: number) => {
  if (inputValue.value && index < attributeList.value.length) {
    // 1. 重复添加校验
-    if (
-      attributeList.value[index]!.values.find(
-        (item) => item.name === inputValue.value,
-      )
-    ) {
+    const values = attributeList.value[index]!.values as any[];
+    if (values.find((item) => item.name === inputValue.value)) {
      ElMessage.warning('已存在相同属性值，请重试');
      attributeIndex.value = null;
      inputValue.value = '';
@ -162,7 +161,8 @@ const handleInputConfirm = async (index: number, propertyId: number) => {
    if (existValue) {
      attributeIndex.value = null;
      inputValue.value = '';
-      attributeList.value[index]!.values.push({
+      const values = attributeList.value[index]!.values as any[];
+      values.push({
        id: existValue.id!,
        name: existValue.name,
      });
@ -176,7 +176,8 @@ const handleInputConfirm = async (index: number, propertyId: number) => {
        propertyId,
        name: inputValue.value,
      });
-      attributeList.value[index]!.values.push({ id, name: inputValue.value });
+      const values = attributeList.value[index]!.values as any[];
+      values.push({ id, name: inputValue.value });
      ElMessage.success($t('common.createSuccess'));
      emit('success', attributeList.value);
    } catch {
--- a/apps/web-ele/src/views/mall/product/spu/components/sku-form.vue
+++ b/apps/web-ele/src/views/mall/product/spu/components/sku-form.vue
@ -1,10 +1,12 @@
 <script lang="ts" setup>
 import { useVbenForm } from '#/adapter/form';
 import { watch, ref } from 'vue';
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElSpace } from 'element-plus';
 import SkuList from './sku-list.vue';
 import { Page, useVbenModal } from '@vben/common-ui';
 import ProductPropertyAddForm from './product-property-add-form.vue';
+import { getPropertyList } from './data';
+import ProductAttributes from './product-attributes.vue';

 const props = defineProps<{
  propFormData: Object;
@ -151,6 +153,24 @@ const [Form, formApi] = useVbenForm({
        show: (values) => values.specType,
      },
    },
+    {
+      fieldName: 'batchSettings',
+      label: '批量设置',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['specType'],
+        show: (values) => values.specType && propertyList.value.length > 0,
+      },
+    },
+    {
+      fieldName: 'specTypeItemList',
+      label: '规格列表',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['specType'],
+        show: (values) => values.specType && propertyList.value.length > 0,
+      },
+    },
  ],
  showDefaultActions: false,
 });
@ -165,6 +185,21 @@ const skuListRef = ref();
 const generateSkus = (propertyList: any[]) => {
  skuListRef.value.generateTableData(propertyList);
 };
+
+/** 将传进来的值赋值给 formData */
+watch(
+  () => props.propFormData,
+  (data) => {
+    if (!data) {
+      return;
+    }
+    // 将 SKU 的属性，整理成 PropertyAndValues 数组
+    propertyList.value = getPropertyList(data);
+  },
+  {
+    immediate: true,
+  },
+);
 </script>
 <template>
  <Page :auto-content-height="true">
@ -178,12 +213,28 @@ const generateSkus = (propertyList: any[]) => {
        />
      </template>
      <template #specTypeItem>
-        <ElButton type="primary" @click="productPropertyAddFormApi.open()"
-          >添加属性</ElButton
-        >
-        <ProductAttributes
+        <ElSpace direction="vertical" alignment="flex-start">
+          <ElButton type="primary" @click="productPropertyAddFormApi.open()"
+            >添加属性</ElButton
+          >
+          <ProductAttributes
+            :property-list="propertyList"
+            @success="generateSkus"
+          />
+        </ElSpace>
+      </template>
+      <template #batchSettings>
+        <SkuList
+          :is-batch="true"
+          :prop-form-data="props.propFormData"
          :property-list="propertyList"
-          @success="generateSkus"
+        />
+      </template>
+      <template #specTypeItemList>
+        <SkuList
+          :prop-form-data="props.propFormData"
+          :property-list="propertyList"
+          :rule-config="ruleConfig"
        />
      </template>
    </Form>