【功能优化】添加商品属性时允许选择已有的属性值，点击「选择」后，获取 value 列表

Author: YunaiV

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

@@ -123,15 +123,25 @@ const showInput = async (index: number) => {
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const handleInputConfirm = async (index: number, propertyId: number) => {
   if (inputValue.value) {
-    // 重复添加校验
-    // TODO @芋艿：需要测试下
+    // 1. 重复添加校验
     if (attributeList.value[index].values.find((item) => item.name === inputValue.value)) {
       message.warning('已存在相同属性值，请重试')
       attributeIndex.value = null
       inputValue.value = ''
       return
     }
-    // 保存属性值
+
+    // 2.1 情况一：属性值已存在，则直接使用并结束
+    const existValue = attributeOptions.value.find((item) => item.name === inputValue.value)
+    if (existValue) {
+      attributeIndex.value = null
+      inputValue.value = ''
+      attributeList.value[index].values.push({ id: existValue.id, name: existValue.name })
+      emit('success', attributeList.value)
+      return
+    }
+
+    // 2.2 情况二：新属性值，则进行保存
     try {
       const id = await PropertyApi.createPropertyValue({ propertyId, name: inputValue.value })
       attributeList.value[index].values.push({ id, name: inputValue.value })

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

@@ -83,18 +83,32 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 /** 提交表单 */
 const submitForm = async () => {
-  // 情况一：如果是已存在的属性，直接结束，不提交表单新增
+  // 1.1 重复添加校验
   for (const attrItem of attributeList.value) {
     if (attrItem.name === formData.value.name) {
       return message.error('该属性已存在，请勿重复添加')
     }
   }
-
-  // 情况二：如果是不存在的属性，则需要执行新增
-  // 校验表单
+  // 1.2 校验表单
   if (!formRef) return
   const valid = await formRef.value.validate()
   if (!valid) return
+
+  // 2.1 情况一：属性名已存在，则直接使用并结束
+  const existProperty = attributeOptions.value.find((item) => item.name === formData.value.name)
+  if (existProperty) {
+    // 添加到属性列表
+    attributeList.value.push({
+      id: existProperty.id,
+      ...formData.value,
+      values: []
+    })
+    // 关闭弹窗
+    dialogVisible.value = false
+    return
+  }
+
+  // 2.2 情况二：如果是不存在的属性，则需要执行新增
   // 提交请求
   formLoading.value = true
   try {
@@ -106,14 +120,6 @@ const submitForm = async () => {
       ...formData.value,
       values: []
     })
-    // 判断最终提交的属性名称是否是用户下拉选择的 自己手动输入的属性名称就不执行emit获取该属性名下属性值列表
-    for (const element of attributeOptions.value) {
-      if (element.name === formData.value.name) {
-        message.success(t('common.createSuccess'))
-        dialogVisible.value = false
-        return
-      }
-    }
     // 关闭弹窗
     message.success(t('common.createSuccess'))
     dialogVisible.value = false