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] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E3=80=91=E6=B7=BB=E5=8A=A0=E5=95=86=E5=93=81=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E6=97=B6=E5=85=81=E8=AE=B8=E9=80=89=E6=8B=A9=E5=B7=B2=E6=9C=89?=
 =?UTF-8?q?=E7=9A=84=E5=B1=9E=E6=80=A7=E5=80=BC=EF=BC=8C=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E3=80=8C=E9=80=89=E6=8B=A9=E3=80=8D=E5=90=8E=EF=BC=8C=E8=8E=B7?=
 =?UTF-8?q?=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>