From 372e2215f01be07c9850e3cdd498d74439df4822 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=85=86=E7=90=A6?= <1361001127@qq.com>
Date: Mon, 12 Aug 2024 16:14:52 +0800
Subject: [PATCH 01/10] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E6=B7=BB=E5=8A=A0=E5=95=86=E5=93=81=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E6=97=B6=E5=85=81=E8=AE=B8=E9=80=89=E6=8B=A9=E5=B7=B2?=
 =?UTF-8?q?=E6=9C=89=E7=9A=84=E5=B1=9E=E6=80=A7=E5=80=BC=20Fixes=20#47?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/product/spu/components/SkuList.vue   |  6 +--
 .../mall/product/spu/components/index.ts      |  1 +
 .../product/spu/form/ProductAttributes.vue    | 27 ++++++++++--
 .../spu/form/ProductPropertyAddForm.vue       | 41 ++++++++++++++++++-
 src/views/mall/product/spu/form/SkuForm.vue   | 29 +++++++++++--
 5 files changed, 93 insertions(+), 11 deletions(-)

diff --git a/src/views/mall/product/spu/components/SkuList.vue b/src/views/mall/product/spu/components/SkuList.vue
index 9bbd38e4..2b881a46 100644
--- a/src/views/mall/product/spu/components/SkuList.vue
+++ b/src/views/mall/product/spu/components/SkuList.vue
@@ -24,7 +24,7 @@
       >
         <template #default="{ row }">
           <span style="font-weight: bold; color: #40aaff">
-            {{ row.properties[index]?.valueName }}
+            {{ row.properties?.[index]?.valueName }}
           </span>
         </template>
       </el-table-column>
@@ -168,7 +168,7 @@
       >
         <template #default="{ row }">
           <span style="font-weight: bold; color: #40aaff">
-            {{ row.properties[index]?.valueName }}
+            {{ row.properties?.[index]?.valueName }}
           </span>
         </template>
       </el-table-column>
@@ -248,7 +248,7 @@
       >
         <template #default="{ row }">
           <span style="font-weight: bold; color: #40aaff">
-            {{ row.properties[index]?.valueName }}
+            {{ row.properties?.[index]?.valueName }}
           </span>
         </template>
       </el-table-column>
diff --git a/src/views/mall/product/spu/components/index.ts b/src/views/mall/product/spu/components/index.ts
index e2cbe73d..5569bc99 100644
--- a/src/views/mall/product/spu/components/index.ts
+++ b/src/views/mall/product/spu/components/index.ts
@@ -5,6 +5,7 @@ interface PropertyAndValues {
   id: number
   name: string
   values?: PropertyAndValues[]
+  propertyOpts?: PropertyAndValues[]
 }
 
 interface RuleConfig {
diff --git a/src/views/mall/product/spu/form/ProductAttributes.vue b/src/views/mall/product/spu/form/ProductAttributes.vue
index ffe7397d..88515829 100644
--- a/src/views/mall/product/spu/form/ProductAttributes.vue
+++ b/src/views/mall/product/spu/form/ProductAttributes.vue
@@ -18,16 +18,28 @@
       >
         {{ value.name }}
       </el-tag>
-      <el-input
-        v-show="inputVisible(index)"
+      <el-select
         :id="`input${index}`"
         :ref="setInputRef"
+        v-show="inputVisible(index)"
         v-model="inputValue"
-        class="!w-20"
+        filterable
+        allow-create
+        default-first-option
+        :reserve-keyword="false"
         size="small"
+        class="!w-30"
         @blur="handleInputConfirm(index, item.id)"
         @keyup.enter="handleInputConfirm(index, item.id)"
-      />
+      >
+        <el-option
+          v-for="item2 in item.propertyOpts"
+          :key="item2.id"
+          :label="item2.name"
+          :value="item2.name"
+        />
+      </el-select>
+      <!-- <el-input :id="`input${index}`" v-model="inputValue" class="!w-20" /> -->
       <el-button
         v-show="!inputVisible(index)"
         class="button-new-tag ml-1"
@@ -109,6 +121,13 @@ const showInput = async (index) => {
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const handleInputConfirm = async (index: number, propertyId: number) => {
   if (inputValue.value) {
+    // 重复添加校验
+    if (attributeList.value[index].values.find((item) => item.name === inputValue.value)) {
+      message.warning('已存在相同属性值，请重试')
+      attributeIndex.value = null
+      inputValue.value = ''
+      return
+    }
     // 保存属性值
     try {
       const id = await PropertyApi.createPropertyValue({ propertyId, name: inputValue.value })
diff --git a/src/views/mall/product/spu/form/ProductPropertyAddForm.vue b/src/views/mall/product/spu/form/ProductPropertyAddForm.vue
index 15c5a8d5..6fc9f912 100644
--- a/src/views/mall/product/spu/form/ProductPropertyAddForm.vue
+++ b/src/views/mall/product/spu/form/ProductPropertyAddForm.vue
@@ -10,7 +10,22 @@
       @keydown.enter.prevent="submitForm"
     >
       <el-form-item label="属性名称" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入名称" />
+        <el-select
+          v-model="formData.name"
+          filterable
+          allow-create
+          default-first-option
+          :reserve-keyword="false"
+          placeholder="请选择属性名称"
+          style="width: 240px"
+        >
+          <el-option
+            v-for="item in attrOption"
+            :key="item.id"
+            :label="item.name"
+            :value="item.name"
+          />
+        </el-select>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -24,6 +39,7 @@ import * as PropertyApi from '@/api/mall/product/property'
 
 defineOptions({ name: 'ProductPropertyForm' })
 
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
@@ -37,6 +53,7 @@ const formRules = reactive({
 })
 const formRef = ref() // 表单 Ref
 const attributeList = ref([]) // 商品属性列表
+const attrOption = ref([]) // 属性名称下拉框
 const props = defineProps({
   propertyList: {
     type: Array,
@@ -59,6 +76,7 @@ watch(
 /** 打开弹窗 */
 const open = async () => {
   dialogVisible.value = true
+  getAttrOption()
   resetForm()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@@ -80,6 +98,16 @@ const submitForm = async () => {
       ...formData.value,
       values: []
     })
+    // 判断最终提交的属性名称是否是选择的 自己手动输入的属性名称不执行emit
+    attrOption.value.forEach((item) => {
+      if (item.name === formData.value.name) {
+        emit('success', propertyId, item.id)
+        message.success(t('common.createSuccess'))
+        dialogVisible.value = false
+        // 中断循环
+        throw new Error()
+      }
+    })
     message.success(t('common.createSuccess'))
     dialogVisible.value = false
   } finally {
@@ -94,4 +122,15 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+
+/** 获取商品属性下拉选项 */
+const getAttrOption = async () => {
+  formLoading.value = true
+  try {
+    const data = await PropertyApi.getPropertyPage({ pageNo: 1, pageSize: 100 })
+    attrOption.value = data.list
+  } finally {
+    formLoading.value = false
+  }
+}
 </script>
diff --git a/src/views/mall/product/spu/form/SkuForm.vue b/src/views/mall/product/spu/form/SkuForm.vue
index 9cc61924..e864550d 100644
--- a/src/views/mall/product/spu/form/SkuForm.vue
+++ b/src/views/mall/product/spu/form/SkuForm.vue
@@ -1,6 +1,13 @@
 <!-- 商品发布 - 库存价格 -->
 <template>
-  <el-form ref="formRef" :disabled="isDetail" :model="formData" :rules="rules" label-width="120px">
+  <el-form
+    ref="formRef"
+    :disabled="isDetail"
+    :model="formData"
+    :rules="rules"
+    label-width="120px"
+    v-loading="formLoading"
+  >
     <el-form-item label="分销类型" props="subCommissionType">
       <el-radio-group
         v-model="formData.subCommissionType"
@@ -51,9 +58,14 @@
   </el-form>
 
   <!-- 商品属性添加 Form 表单 -->
-  <ProductPropertyAddForm ref="attributesAddFormRef" :propertyList="propertyList" />
+  <ProductPropertyAddForm
+    ref="attributesAddFormRef"
+    :propertyList="propertyList"
+    @success="getPropertyValueList"
+  />
 </template>
 <script lang="ts" setup>
+import * as PropertyApi from '@/api/mall/product/property'
 import { PropType } from 'vue'
 import { copyValueToTarget } from '@/utils'
 import { propTypes } from '@/utils/propTypes'
@@ -94,7 +106,7 @@ const ruleConfig: RuleConfig[] = [
 ]
 
 const message = useMessage() // 消息弹窗
-
+const formLoading = ref(false)
 const props = defineProps({
   propFormData: {
     type: Object as PropType<Spu>,
@@ -184,4 +196,15 @@ const onChangeSpec = () => {
 const generateSkus = (propertyList: any[]) => {
   skuListRef.value.generateTableData(propertyList)
 }
+
+/* 获取属性值列表 */
+const getPropertyValueList = async (id, propertyId) => {
+  formLoading.value = true
+  try {
+    const data = await PropertyApi.getPropertyValuePage({ pageNo: 1, pageSize: 100, propertyId })
+    propertyList.value.find((item) => item.id === id).propertyOpts = data.list
+  } finally {
+    formLoading.value = false
+  }
+}
 </script>

From 24e69ecf3605f916c924a3f8540ef5fcbe6888bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=85=86=E7=90=A6?= <1361001127@qq.com>
Date: Tue, 13 Aug 2024 10:11:09 +0800
Subject: [PATCH 02/10] =?UTF-8?q?chore:=20=E6=B7=BB=E5=8A=A0TODO=E6=B3=A8?=
 =?UTF-8?q?=E9=87=8A=EF=BC=9B=E4=BB=A5=E6=9B=B4=E4=BC=98=E9=9B=85=E7=9A=84?=
 =?UTF-8?q?=E6=96=B9=E5=BC=8F=E8=B7=B3=E5=87=BA=E5=BE=AA=E7=8E=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/product/spu/form/ProductAttributes.vue      |  3 +--
 .../mall/product/spu/form/ProductPropertyAddForm.vue | 12 ++++++------
 src/views/mall/product/spu/form/SkuForm.vue          |  1 +
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/views/mall/product/spu/form/ProductAttributes.vue b/src/views/mall/product/spu/form/ProductAttributes.vue
index 88515829..f2e8ae6a 100644
--- a/src/views/mall/product/spu/form/ProductAttributes.vue
+++ b/src/views/mall/product/spu/form/ProductAttributes.vue
@@ -31,6 +31,7 @@
         class="!w-30"
         @blur="handleInputConfirm(index, item.id)"
         @keyup.enter="handleInputConfirm(index, item.id)"
+        @change="handleInputConfirm(index, item.id)"
       >
         <el-option
           v-for="item2 in item.propertyOpts"
@@ -39,7 +40,6 @@
           :value="item2.name"
         />
       </el-select>
-      <!-- <el-input :id="`input${index}`" v-model="inputValue" class="!w-20" /> -->
       <el-button
         v-show="!inputVisible(index)"
         class="button-new-tag ml-1"
@@ -54,7 +54,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ElInput } from 'element-plus'
 import * as PropertyApi from '@/api/mall/product/property'
 import { PropertyAndValues } from '@/views/mall/product/spu/components'
 import { propTypes } from '@/utils/propTypes'
diff --git a/src/views/mall/product/spu/form/ProductPropertyAddForm.vue b/src/views/mall/product/spu/form/ProductPropertyAddForm.vue
index 6fc9f912..f7500ceb 100644
--- a/src/views/mall/product/spu/form/ProductPropertyAddForm.vue
+++ b/src/views/mall/product/spu/form/ProductPropertyAddForm.vue
@@ -99,15 +99,14 @@ const submitForm = async () => {
       values: []
     })
     // 判断最终提交的属性名称是否是选择的 自己手动输入的属性名称不执行emit
-    attrOption.value.forEach((item) => {
-      if (item.name === formData.value.name) {
-        emit('success', propertyId, item.id)
+    for (const element of attrOption.value) {
+      if (element.name === formData.value.name) {
+        emit('success', propertyId, element.id)
         message.success(t('common.createSuccess'))
         dialogVisible.value = false
-        // 中断循环
-        throw new Error()
+        return
       }
-    })
+    }
     message.success(t('common.createSuccess'))
     dialogVisible.value = false
   } finally {
@@ -127,6 +126,7 @@ const resetForm = () => {
 const getAttrOption = async () => {
   formLoading.value = true
   try {
+    // TODO @芋艿：需要增加一个全列表接口
     const data = await PropertyApi.getPropertyPage({ pageNo: 1, pageSize: 100 })
     attrOption.value = data.list
   } finally {
diff --git a/src/views/mall/product/spu/form/SkuForm.vue b/src/views/mall/product/spu/form/SkuForm.vue
index e864550d..c6856caf 100644
--- a/src/views/mall/product/spu/form/SkuForm.vue
+++ b/src/views/mall/product/spu/form/SkuForm.vue
@@ -201,6 +201,7 @@ const generateSkus = (propertyList: any[]) => {
 const getPropertyValueList = async (id, propertyId) => {
   formLoading.value = true
   try {
+    // TODO @芋艿：需要增加一个全列表接口
     const data = await PropertyApi.getPropertyValuePage({ pageNo: 1, pageSize: 100, propertyId })
     propertyList.value.find((item) => item.id === id).propertyOpts = data.list
   } finally {

From 14192991d97370651e8e13d4565788530b5792e3 Mon Sep 17 00:00:00 2001
From: "Mr. Kin" <im.misterkin@gmail.com>
Date: Tue, 13 Aug 2024 10:28:55 +0800
Subject: [PATCH 03/10] fix: failed to render for Boolean type of DictTag

---
 src/components/DictTag/src/DictTag.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/DictTag/src/DictTag.vue b/src/components/DictTag/src/DictTag.vue
index f84a47cb..57acb628 100644
--- a/src/components/DictTag/src/DictTag.vue
+++ b/src/components/DictTag/src/DictTag.vue
@@ -3,7 +3,7 @@ import { defineComponent, PropType, computed } from 'vue'
 import { isHexColor } from '@/utils/color'
 import { ElTag } from 'element-plus'
 import { DictDataType, getDictOptions } from '@/utils/dict'
-import { isArray, isString, isNumber } from '@/utils/is'
+import { isArray, isString, isNumber, isBoolean } from '@/utils/is'
 
 export default defineComponent({
   name: 'DictTag',
@@ -29,8 +29,8 @@ export default defineComponent({
   },
   setup(props) {
     const valueArr: any = computed(() => {
-      // 1.是Number类型的情况
-      if (isNumber(props.value)) {
+      // 1.是Number类型和Boolean类型的情况
+      if (isNumber(props.value) || isBoolean(props.value)) {
         return [String(props.value)]
       }
       // 2.是字符串（进一步判断是否有包含分隔符号 -> props.sepSymbol ）

From 82bf0849203fc43779b0598ba97e847ac8e0037c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=85=86=E7=90=A6?= <1361001127@qq.com>
Date: Tue, 13 Aug 2024 11:24:10 +0800
Subject: [PATCH 04/10] =?UTF-8?q?fix:=20DictTag=E7=BB=84=E4=BB=B6=E6=A0=B9?=
 =?UTF-8?q?=E5=85=83=E7=B4=A0=E6=94=B9=E4=B8=BA=E8=A1=8C=E5=86=85flex?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DictTag/src/DictTag.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DictTag/src/DictTag.vue b/src/components/DictTag/src/DictTag.vue
index f84a47cb..81b482d7 100644
--- a/src/components/DictTag/src/DictTag.vue
+++ b/src/components/DictTag/src/DictTag.vue
@@ -57,7 +57,7 @@ export default defineComponent({
         <div
           class="dict-tag"
           style={{
-            display: 'flex',
+            display: 'inline-flex',
             gap: props.gutter,
             justifyContent: 'center',
             alignItems: 'center'

From 2937f3c1742df1a0c3977176972e96d9e5e34759 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=85=86=E7=90=A6?= <1361001127@qq.com>
Date: Tue, 13 Aug 2024 13:09:22 +0800
Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=E4=BD=BF=E7=94=A8id=E6=9D=A5?=
 =?UTF-8?q?=E5=AF=B9=E5=95=86=E5=93=81=E5=B1=9E=E6=80=A7=E5=80=BC=E9=87=8D?=
 =?UTF-8?q?=E5=A4=8D=E6=B7=BB=E5=8A=A0=E6=93=8D=E4=BD=9C=E8=BF=9B=E8=A1=8C?=
 =?UTF-8?q?=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/product/spu/form/ProductAttributes.vue   | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/views/mall/product/spu/form/ProductAttributes.vue b/src/views/mall/product/spu/form/ProductAttributes.vue
index f2e8ae6a..613e2ede 100644
--- a/src/views/mall/product/spu/form/ProductAttributes.vue
+++ b/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.name"
+          :value="item2.id"
         />
       </el-select>
       <el-button
@@ -57,6 +57,7 @@
 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' })
 
@@ -121,11 +122,13 @@ const emit = defineEmits(['success']) // 定义 success 事件，用于操作成
 const handleInputConfirm = async (index: number, propertyId: number) => {
   if (inputValue.value) {
     // 重复添加校验
-    if (attributeList.value[index].values.find((item) => item.name === inputValue.value)) {
-      message.warning('已存在相同属性值，请重试')
-      attributeIndex.value = null
-      inputValue.value = ''
-      return
+    if (isNumber(inputValue.value)) {
+      if (attributeList.value[index].values?.some((item) => item.id === inputValue.value)) {
+        message.warning('已存在相同属性值，请重试')
+        attributeIndex.value = null
+        inputValue.value = ''
+        return
+      }
     }
     // 保存属性值
     try {

From aaa5e146f1068b8d1016d76b88fc9851e69f8f61 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 13 Aug 2024 22:56:58 +0800
Subject: [PATCH 06/10] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91DictTag=20=E7=9A=84=20render=20=E6=96=B9?=
 =?UTF-8?q?=E6=B3=95=E7=9A=84=E5=91=BD=E5=90=8D=EF=BC=8C=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E7=9A=84=E5=91=BD=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DictTag/src/DictTag.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/DictTag/src/DictTag.vue b/src/components/DictTag/src/DictTag.vue
index 33739950..23d84b2a 100644
--- a/src/components/DictTag/src/DictTag.vue
+++ b/src/components/DictTag/src/DictTag.vue
@@ -29,15 +29,15 @@ export default defineComponent({
   },
   setup(props) {
     const valueArr: any = computed(() => {
-      // 1.是Number类型和Boolean类型的情况
+      // 1. 是 Number 类型和 Boolean 类型的情况
       if (isNumber(props.value) || isBoolean(props.value)) {
         return [String(props.value)]
       }
-      // 2.是字符串（进一步判断是否有包含分隔符号 -> props.sepSymbol ）
+      // 2. 是字符串（进一步判断是否有包含分隔符号 -> props.sepSymbol ）
       else if (isString(props.value)) {
         return props.value.split(props.separator)
       }
-      // 3.数组
+      // 3. 数组
       else if (isArray(props.value)) {
         return props.value.map(String)
       }

From bcb4fc30349954c450bef02294c34e3273d63623 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 14 Aug 2024 00:43:34 +0800
Subject: [PATCH 07/10] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E6=B7=BB=E5=8A=A0=E5=95=86=E5=93=81=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E6=97=B6=E5=85=81=E8=AE=B8=E9=80=89=E6=8B=A9=E5=B7=B2?=
 =?UTF-8?q?=E6=9C=89=E7=9A=84=E5=B1=9E=E6=80=A7=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/product/property.ts              |  5 +++
 .../mall/product/spu/components/index.ts      |  2 +-
 .../product/spu/form/ProductAttributes.vue    |  1 +
 .../spu/form/ProductPropertyAddForm.vue       | 45 +++++++++++--------
 src/views/mall/product/spu/form/SkuForm.vue   |  1 +
 5 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/api/mall/product/property.ts b/src/api/mall/product/property.ts
index 44dc663f..048b7641 100644
--- a/src/api/mall/product/property.ts
+++ b/src/api/mall/product/property.ts
@@ -65,6 +65,11 @@ export const getPropertyPage = (params: PageParam) => {
   return request.get({ url: '/product/property/page', params })
 }
 
+// 获得属性项精简列表
+export const getPropertySimpleList = (): Promise<PropertyVO[]> => {
+  return request.get({ url: '/product/property/simple-list' })
+}
+
 // ------------------------ 属性值 -------------------
 
 // 获得属性值分页
diff --git a/src/views/mall/product/spu/components/index.ts b/src/views/mall/product/spu/components/index.ts
index 5569bc99..1716f704 100644
--- a/src/views/mall/product/spu/components/index.ts
+++ b/src/views/mall/product/spu/components/index.ts
@@ -5,7 +5,7 @@ interface PropertyAndValues {
   id: number
   name: string
   values?: PropertyAndValues[]
-  propertyOpts?: PropertyAndValues[]
+  propertyOpts?: PropertyAndValues[] // TODO @GoldenZqqq：建议直接复用 values；
 }
 
 interface RuleConfig {
diff --git a/src/views/mall/product/spu/form/ProductAttributes.vue b/src/views/mall/product/spu/form/ProductAttributes.vue
index 613e2ede..eaec16cc 100644
--- a/src/views/mall/product/spu/form/ProductAttributes.vue
+++ b/src/views/mall/product/spu/form/ProductAttributes.vue
@@ -122,6 +122,7 @@ const emit = defineEmits(['success']) // 定义 success 事件，用于操作成
 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('已存在相同属性值，请重试')
diff --git a/src/views/mall/product/spu/form/ProductPropertyAddForm.vue b/src/views/mall/product/spu/form/ProductPropertyAddForm.vue
index f7500ceb..47915c7c 100644
--- a/src/views/mall/product/spu/form/ProductPropertyAddForm.vue
+++ b/src/views/mall/product/spu/form/ProductPropertyAddForm.vue
@@ -16,11 +16,11 @@
           allow-create
           default-first-option
           :reserve-keyword="false"
-          placeholder="请选择属性名称"
-          style="width: 240px"
+          placeholder="请选择属性名称。如果不存在，可手动输入选择"
+          class="!w-360px"
         >
           <el-option
-            v-for="item in attrOption"
+            v-for="item in attributeOptions"
             :key="item.id"
             :label="item.name"
             :value="item.name"
@@ -53,7 +53,7 @@ const formRules = reactive({
 })
 const formRef = ref() // 表单 Ref
 const attributeList = ref([]) // 商品属性列表
-const attrOption = ref([]) // 属性名称下拉框
+const attributeOptions = ref([] as PropertyApi.PropertyVO[]) // 商品属性名称下拉框
 const props = defineProps({
   propertyList: {
     type: Array,
@@ -76,13 +76,32 @@ watch(
 /** 打开弹窗 */
 const open = async () => {
   dialogVisible.value = true
-  getAttrOption()
   resetForm()
+  // 加载列表
+  await getAttributeOptions()
 }
 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
+    }
+  }
+
+  // 情况二：如果是不存在的属性，则需要执行新增
   // 校验表单
   if (!formRef) return
   const valid = await formRef.value.validate()
@@ -98,15 +117,7 @@ const submitForm = async () => {
       ...formData.value,
       values: []
     })
-    // 判断最终提交的属性名称是否是选择的 自己手动输入的属性名称不执行emit
-    for (const element of attrOption.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
   } finally {
@@ -123,12 +134,10 @@ const resetForm = () => {
 }
 
 /** 获取商品属性下拉选项 */
-const getAttrOption = async () => {
+const getAttributeOptions = async () => {
   formLoading.value = true
   try {
-    // TODO @芋艿：需要增加一个全列表接口
-    const data = await PropertyApi.getPropertyPage({ pageNo: 1, pageSize: 100 })
-    attrOption.value = data.list
+    attributeOptions.value = await PropertyApi.getPropertySimpleList()
   } finally {
     formLoading.value = false
   }
diff --git a/src/views/mall/product/spu/form/SkuForm.vue b/src/views/mall/product/spu/form/SkuForm.vue
index c6856caf..801f3eea 100644
--- a/src/views/mall/product/spu/form/SkuForm.vue
+++ b/src/views/mall/product/spu/form/SkuForm.vue
@@ -197,6 +197,7 @@ const generateSkus = (propertyList: any[]) => {
   skuListRef.value.generateTableData(propertyList)
 }
 
+// TODO @GoldenZqqq：这里不建议使用 success 去刷新。而是改成点击【属性值】的【添加】后，进行加载列表。后端提供了 getPropertyValueSimpleList 接口哈。
 /* 获取属性值列表 */
 const getPropertyValueList = async (id, propertyId) => {
   formLoading.value = true

From 0e9fde1f8a18e9cf1e4afca76894c622bb1a78f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=85=86=E7=90=A6?= <1361001127@qq.com>
Date: Wed, 14 Aug 2024 08:57:19 +0800
Subject: [PATCH 08/10] =?UTF-8?q?fix:=20=E6=B7=BB=E5=8A=A0=E5=95=86?=
 =?UTF-8?q?=E5=93=81=E5=B1=9E=E6=80=A7=E5=80=BC=E6=97=B6=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=A0=A1=E9=AA=8C=EF=BC=8C=E5=A6=82=E6=9E=9C=E6=98=AF=E5=B7=B2?=
 =?UTF-8?q?=E5=AD=98=E5=9C=A8=E7=9A=84=E5=B1=9E=E6=80=A7=E5=8F=91=E5=87=BA?=
 =?UTF-8?q?=E8=AD=A6=E5=91=8A=E4=B8=94=E4=B8=8D=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../spu/form/ProductPropertyAddForm.vue       | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/views/mall/product/spu/form/ProductPropertyAddForm.vue b/src/views/mall/product/spu/form/ProductPropertyAddForm.vue
index 47915c7c..66fecfca 100644
--- a/src/views/mall/product/spu/form/ProductPropertyAddForm.vue
+++ b/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

From 9475ded9225ddf66e03f46e8efcca7ac8865f47d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=85=86=E7=90=A6?= <1361001127@qq.com>
Date: Wed, 14 Aug 2024 09:41:05 +0800
Subject: [PATCH 09/10] =?UTF-8?q?fix:=20=E5=95=86=E5=93=81=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E5=80=BC=E6=B7=BB=E5=8A=A0=E6=9A=82=E6=97=B6=E6=81=A2?=
 =?UTF-8?q?=E5=A4=8Dname=E5=90=8C=E5=90=8D=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/product/spu/form/ProductAttributes.vue   | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/views/mall/product/spu/form/ProductAttributes.vue b/src/views/mall/product/spu/form/ProductAttributes.vue
index eaec16cc..e632a1f2 100644
--- a/src/views/mall/product/spu/form/ProductAttributes.vue
+++ b/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 {

From 521ae46cbaf86446f256abba1f7e8ae6bc807df3 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 14 Aug 2024 13:06:23 +0800
Subject: [PATCH 10/10] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E6=B7=BB=E5=8A=A0=E5=95=86=E5=93=81=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E6=97=B6=E5=85=81=E8=AE=B8=E9=80=89=E6=8B=A9=E5=B7=B2?=
 =?UTF-8?q?=E6=9C=89=E7=9A=84=E5=B1=9E=E6=80=A7=E5=80=BC=EF=BC=8C=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E3=80=8C=E9=80=89=E6=8B=A9=E3=80=8D=E5=90=8E=EF=BC=8C?=
 =?UTF-8?q?=E8=8E=B7=E5=8F=96=20value=20=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/product/property.ts              | 19 +++++-------------
 .../mall/product/spu/components/index.ts      |  1 -
 .../product/spu/form/ProductAttributes.vue    | 12 +++++++++--
 .../spu/form/ProductPropertyAddForm.vue       |  2 --
 src/views/mall/product/spu/form/SkuForm.vue   | 20 +------------------
 5 files changed, 16 insertions(+), 38 deletions(-)

diff --git a/src/api/mall/product/property.ts b/src/api/mall/product/property.ts
index 048b7641..a191d82e 100644
--- a/src/api/mall/product/property.ts
+++ b/src/api/mall/product/property.ts
@@ -24,20 +24,6 @@ export interface PropertyValueVO {
   remark?: string
 }
 
-/**
- * 商品属性值的明细
- */
-export interface PropertyValueDetailVO {
-  /** 属性项的编号 */
-  propertyId: number // 属性的编号
-  /** 属性的名称 */
-  propertyName: string
-  /** 属性值的编号 */
-  valueId: number
-  /** 属性值的名称 */
-  valueName: string
-}
-
 // ------------------------ 属性项 -------------------
 
 // 创建属性项
@@ -96,3 +82,8 @@ export const updatePropertyValue = (data: PropertyValueVO) => {
 export const deletePropertyValue = (id: number) => {
   return request.delete({ url: `/product/property/value/delete?id=${id}` })
 }
+
+// 获得属性值精简列表
+export const getPropertyValueSimpleList = (propertyId: number): Promise<PropertyValueVO[]> => {
+  return request.get({ url: '/product/property/value/simple-list', params: { propertyId } })
+}
diff --git a/src/views/mall/product/spu/components/index.ts b/src/views/mall/product/spu/components/index.ts
index 1716f704..e2cbe73d 100644
--- a/src/views/mall/product/spu/components/index.ts
+++ b/src/views/mall/product/spu/components/index.ts
@@ -5,7 +5,6 @@ interface PropertyAndValues {
   id: number
   name: string
   values?: PropertyAndValues[]
-  propertyOpts?: PropertyAndValues[] // TODO @GoldenZqqq：建议直接复用 values；
 }
 
 interface RuleConfig {
diff --git a/src/views/mall/product/spu/form/ProductAttributes.vue b/src/views/mall/product/spu/form/ProductAttributes.vue
index e632a1f2..7b4fc37c 100644
--- a/src/views/mall/product/spu/form/ProductAttributes.vue
+++ b/src/views/mall/product/spu/form/ProductAttributes.vue
@@ -34,7 +34,7 @@
         @change="handleInputConfirm(index, item.id)"
       >
         <el-option
-          v-for="item2 in item.propertyOpts"
+          v-for="item2 in attributeOptions"
           :key="item2.id"
           :label="item2.name"
           :value="item2.name"
@@ -79,6 +79,7 @@ const setInputRef = (el: any) => {
   }
 }
 const attributeList = ref<PropertyAndValues[]>([]) // 商品属性列表
+const attributeOptions = ref([] as PropertyApi.PropertyValueVO[]) // 商品属性名称下拉框
 const props = defineProps({
   propertyList: {
     type: Array,
@@ -111,9 +112,11 @@ const handleCloseProperty = (index: number) => {
 }
 
 /** 显示输入框并获取焦点 */
-const showInput = async (index) => {
+const showInput = async (index: number) => {
   attributeIndex.value = index
   inputRef.value[index].focus()
+  // 获取属性下拉选项
+  await getAttributeOptions(attributeList.value[index].id)
 }
 
 /** 输入框失去焦点或点击回车时触发 */
@@ -141,4 +144,9 @@ const handleInputConfirm = async (index: number, propertyId: number) => {
   attributeIndex.value = null
   inputValue.value = ''
 }
+
+/** 获取商品属性下拉选项 */
+const getAttributeOptions = async (propertyId: number) => {
+  attributeOptions.value = await PropertyApi.getPropertyValueSimpleList(propertyId)
+}
 </script>
diff --git a/src/views/mall/product/spu/form/ProductPropertyAddForm.vue b/src/views/mall/product/spu/form/ProductPropertyAddForm.vue
index 66fecfca..3c07cd74 100644
--- a/src/views/mall/product/spu/form/ProductPropertyAddForm.vue
+++ b/src/views/mall/product/spu/form/ProductPropertyAddForm.vue
@@ -39,7 +39,6 @@ import * as PropertyApi from '@/api/mall/product/property'
 
 defineOptions({ name: 'ProductPropertyForm' })
 
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
@@ -110,7 +109,6 @@ const submitForm = async () => {
     // 判断最终提交的属性名称是否是用户下拉选择的 自己手动输入的属性名称就不执行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
diff --git a/src/views/mall/product/spu/form/SkuForm.vue b/src/views/mall/product/spu/form/SkuForm.vue
index 801f3eea..73b8ceae 100644
--- a/src/views/mall/product/spu/form/SkuForm.vue
+++ b/src/views/mall/product/spu/form/SkuForm.vue
@@ -58,14 +58,9 @@
   </el-form>
 
   <!-- 商品属性添加 Form 表单 -->
-  <ProductPropertyAddForm
-    ref="attributesAddFormRef"
-    :propertyList="propertyList"
-    @success="getPropertyValueList"
-  />
+  <ProductPropertyAddForm ref="attributesAddFormRef" :propertyList="propertyList" />
 </template>
 <script lang="ts" setup>
-import * as PropertyApi from '@/api/mall/product/property'
 import { PropType } from 'vue'
 import { copyValueToTarget } from '@/utils'
 import { propTypes } from '@/utils/propTypes'
@@ -196,17 +191,4 @@ const onChangeSpec = () => {
 const generateSkus = (propertyList: any[]) => {
   skuListRef.value.generateTableData(propertyList)
 }
-
-// TODO @GoldenZqqq：这里不建议使用 success 去刷新。而是改成点击【属性值】的【添加】后，进行加载列表。后端提供了 getPropertyValueSimpleList 接口哈。
-/* 获取属性值列表 */
-const getPropertyValueList = async (id, propertyId) => {
-  formLoading.value = true
-  try {
-    // TODO @芋艿：需要增加一个全列表接口
-    const data = await PropertyApi.getPropertyValuePage({ pageNo: 1, pageSize: 100, propertyId })
-    propertyList.value.find((item) => item.id === id).propertyOpts = data.list
-  } finally {
-    formLoading.value = false
-  }
-}
 </script>