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

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 };

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 };

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>
+      <ElText class="mx-1">属性名：</ElText>
-      <el-tag class="mx-1" type="success" @close="handleCloseProperty(index)">
+      <ElTag class="mx-1" type="success" @close="handleCloseProperty(index)">
         {{ item.name }}
-      </el-tag>
+      </ElTag>
     </div>
     <div>
-      <el-text class="mx-1">属性值：</el-text>
+      <ElSpace :size="1">
-      <el-tag
+        <ElText class="mx-1">属性值：</ElText>
-        v-for="(value, valueIndex) in item.values"
+        <ElTag
-        :key="value.id"
+          v-for="(value, valueIndex) in item.values"
-        class="mx-1"
+          :key="value.id"
-        @close="handleCloseValue(index, valueIndex)"
+          class="mx-1"
-      >
+          @close="handleCloseValue(index, valueIndex)"
-        {{ value.name }}
+        >
-      </el-tag>
+          {{ value.name }}
-      <el-select
+        </ElTag>
-        v-show="inputVisible(index)"
+        <ElSelect
-        :id="`input${index}`"
+          v-show="inputVisible(index)"
-        :ref="setInputRef"
+          :id="`input${index}`"
-        v-model="inputValue"
+          :ref="setInputRef"
-        :reserve-keyword="false"
+          v-model="inputValue"
-        allow-create
+          :reserve-keyword="false"
-        class="!w-30"
+          allow-create
-        default-first-option
+          class="!w-30"
-        filterable
+          default-first-option
-        size="small"
+          filterable
-        @blur="handleInputConfirm(index, item.id)"
+          size="small"
-        @change="handleInputConfirm(index, item.id)"
+          @blur="handleInputConfirm(index, item.id)"
-        @keyup.enter="handleInputConfirm(index, item.id)"
+          @change="handleInputConfirm(index, item.id)"
-      >
+          @keyup.enter="handleInputConfirm(index, item.id)"
-        <el-option
+        >
-          v-for="item2 in attributeOptions"
+          <el-option
-          :key="item2.id"
+            v-for="item2 in attributeOptions"
-          :label="item2.name"
+            :key="item2.id"
-          :value="item2.name"
+            :label="item2.name"
-        />
+            :value="item2.name"
-      </el-select>
+          />
-      <el-button
+        </ElSelect>
-        v-show="!inputVisible(index)"
+        <ElButton
-        class="button-new-tag ml-1"
+          v-show="!inputVisible(index)"
-        size="small"
+          class="button-new-tag ml-1"
-        @click="showInput(index)"
+          size="small"
-      >
+          @click="showInput(index)"
-        + 添加
+        >
-      </el-button>
+          + 添加
+        </ElButton>
+      </ElSpace>
     </div>
-    <el-divider class="my-10px" />
+    <ElDivider class="my-10px" />
-  </el-col>
+  </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';
-
+import type { PropertyAndValues } from './model';
-// 定义PropertyAndValues接口
-interface PropertyAndValues {
-  id: number;
-  name: string;
-  values: Array<{
-    id: number;
-    name: string;
-  }>;
-}
 
 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 (
+    const values = attributeList.value[index]!.values as any[];
-      attributeList.value[index]!.values.find(
+    if (values.find((item) => item.name === inputValue.value)) {
-        (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 {

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()"
+        <ElSpace direction="vertical" alignment="flex-start">
-          >添加属性</ElButton
+          <ElButton type="primary" @click="productPropertyAddFormApi.open()"
-        >
+            >添加属性</ElButton
-        <ProductAttributes
+          >
+          <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>