Merge pull request #75 from GoldenZqqq/GoldenZqqq/Bug-Fix

添加商品属性项重复选择校验

Author: YunaiV

src/views/mall/product/spu/form/ProductAttributes.vue

@@ -37,7 +37,7 @@
           v-for="item2 in item.propertyOpts"
           :key="item2.id"
           :label="item2.name"
-          :value="item2.id"
+          :value="item2.name"
         />
       </el-select>
       <el-button
@@ -57,7 +57,6 @@
 import * as PropertyApi from '@/api/mall/product/property'
 import { PropertyAndValues } from '@/views/mall/product/spu/components'
 import { propTypes } from '@/utils/propTypes'
-import { isNumber } from '@/utils/is'
 
 defineOptions({ name: 'ProductAttributes' })
 
@@ -123,13 +122,11 @@ const handleInputConfirm = async (index: number, propertyId: number) => {
   if (inputValue.value) {
     // 重复添加校验
     // TODO @芋艿：需要测试下
-    if (isNumber(inputValue.value)) {
-      if (attributeList.value[index].values?.some((item) => item.id === inputValue.value)) {
-        message.warning('已存在相同属性值，请重试')
-        attributeIndex.value = null
-        inputValue.value = ''
-        return
-      }
+    if (attributeList.value[index].values.find((item) => item.name === inputValue.value)) {
+      message.warning('已存在相同属性值，请重试')
+      attributeIndex.value = null
+      inputValue.value = ''
+      return
     }
     // 保存属性值
     try {

src/views/mall/product/spu/form/ProductPropertyAddForm.vue

@@ -85,19 +85,9 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 /** 提交表单 */
 const submitForm = async () => {
   // 情况一：如果是已存在的属性，直接结束，不提交表单新增
-  for (const option of attributeOptions.value) {
-    if (option.name === formData.value.name) {
-      // 添加到属性列表
-      attributeList.value.push({
-        id: option.id,
-        ...formData.value,
-        values: []
-      })
-      // 触发属性列表的加载
-      emit('success', option.id, option.id)
-      // 关闭弹窗
-      dialogVisible.value = false
-      return
+  for (const attrItem of attributeList.value) {
+    if (attrItem.name === formData.value.name) {
+      return message.error('该属性已存在，请勿重复添加')
     }
   }
 
@@ -117,6 +107,15 @@ const submitForm = async () => {
       ...formData.value,
       values: []
     })
+    // 判断最终提交的属性名称是否是用户下拉选择的 自己手动输入的属性名称就不执行emit获取该属性名下属性值列表
+    for (const element of attributeOptions.value) {
+      if (element.name === formData.value.name) {
+        emit('success', propertyId, element.id)
+        message.success(t('common.createSuccess'))
+        dialogVisible.value = false
+        return
+      }
+    }
     // 关闭弹窗
     message.success(t('common.createSuccess'))
     dialogVisible.value = false