From 7a64eb51988973cb972f49b687ddcdd9b57f1bac Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 29 Apr 2023 23:10:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E7=AE=A1=E7=90=86:=20?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E6=B7=BB=E5=8A=A0=E5=B1=9E=E6=80=A7=E5=92=8C?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B1=9E=E6=80=A7=E5=80=BC=E6=97=B6=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E6=A1=86=E6=98=BE=E9=9A=90=E6=8E=A7=E5=88=B6=E3=80=81?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86=E7=84=A6=E7=82=B9=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?=E9=94=99=E4=B9=B1=E7=AD=89bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../management/components/BasicInfoForm.vue   |  9 ++---
 .../components/ProductAttributes.vue          | 37 +++++++++++--------
 .../components/ProductAttributesAddForm.vue   |  2 +-
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/views/mall/product/management/components/BasicInfoForm.vue b/src/views/mall/product/management/components/BasicInfoForm.vue
index cd4d5c90..90f7c0df 100644
--- a/src/views/mall/product/management/components/BasicInfoForm.vue
+++ b/src/views/mall/product/management/components/BasicInfoForm.vue
@@ -98,7 +98,6 @@ import ProductAttributes from './ProductAttributes.vue'
 import { copyValueToTarget } from '@/utils/object'
 // 业务Api
 import * as ProductCategoryApi from '@/api/mall/product/category'
-import * as PropertyApi from '@/api/mall/product/property'
 import { defaultProps, handleTree } from '@/utils/tree'
 import { ElInput } from 'element-plus'
 
@@ -116,12 +115,11 @@ const attributeList = ref([
   {
     id: 1,
     name: '颜色',
-    attributeValues: [{ id: 1, name: '白色' }]
+    values: [{ id: 1, name: '白色' }]
   }
 ])
-const addAttribute = async (propertyId: number) => {
-  const data = await PropertyApi.getPropertyValuePage({ id: propertyId })
-  console.log(data)
+const addAttribute = (property: any) => {
+  attributeList.value.push(property)
 }
 const formData = reactive<SpuType>({
   name: '', // 商品名称
@@ -132,7 +130,6 @@ const formData = reactive<SpuType>({
   sliderPicUrls: [], // 商品轮播图
   introduction: '', // 商品简介
   deliveryTemplateId: 1, // 运费模版
-  selectRule: '', // 选择规则 TODO 暂定
   specType: false, // 商品规格
   subCommissionType: false, // 分销类型
   skus: [
diff --git a/src/views/mall/product/management/components/ProductAttributes.vue b/src/views/mall/product/management/components/ProductAttributes.vue
index 95cf67b7..120ffd36 100644
--- a/src/views/mall/product/management/components/ProductAttributes.vue
+++ b/src/views/mall/product/management/components/ProductAttributes.vue
@@ -7,7 +7,7 @@
     <div>
       <el-text class="mx-1">属性值：</el-text>
       <el-tag
-        v-for="(value, valueIndex) in item.attributeValues"
+        v-for="(value, valueIndex) in item.values"
         :key="value.name"
         :disable-transitions="false"
         class="mx-1"
@@ -17,7 +17,7 @@
         {{ value.name }}
       </el-tag>
       <el-input
-        v-if="inputVisible"
+        v-show="inputVisible(index)"
         ref="InputRef"
         v-model="inputValue"
         class="!w-20"
@@ -25,7 +25,12 @@
         @blur="handleInputConfirm(index)"
         @keyup.enter="handleInputConfirm(index)"
       />
-      <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput(index)">
+      <el-button
+        v-show="!inputVisible(index)"
+        class="button-new-tag ml-1"
+        size="small"
+        @click="showInput(index)"
+      >
         + 添加
       </el-button>
     </div>
@@ -37,8 +42,13 @@
 import { ElInput } from 'element-plus'
 
 const inputValue = ref('') // 输入框值
-const inputVisible = ref(false) // 输入框显隐控制
-const InputRef = ref<InstanceType<typeof ElInput>>() //标签输入框Ref
+const attributeIndex = ref<number | null>(null) // 获取焦点时记录当前属性项的index
+// 输入框显隐控制
+const inputVisible = computed(() => (index) => {
+  if (attributeIndex.value === null) return false
+  if (attributeIndex.value === index) return true
+})
+const InputRef = ref() //标签输入框Ref
 const attributeList = ref([])
 const props = defineProps({
   attributeData: {
@@ -60,23 +70,20 @@ watch(
 )
 /** 删除标签 tagValue 标签值*/
 const handleClose = (index, valueIndex) => {
-  const av = attributeList.value[index].attributeValues
-  av.splice(valueIndex, 1)
+  attributeList.value[index].values?.splice(valueIndex, 1)
 }
 /** 显示输入框并获取焦点 */
-const showInput = (index) => {
-  inputVisible.value = true
-  nextTick(() => {
-    InputRef.value[index]!.input!.focus()
-  })
+const showInput = async (index) => {
+  attributeIndex.value = index
+  // 因为组件在ref中所以需要用索引获取对应的Ref
+  InputRef.value[index]!.input!.focus()
 }
 /** 输入框失去焦点或点击回车时触发 */
 const handleInputConfirm = (index) => {
   if (inputValue.value) {
-    // 因为ref再循环里，所以需要index获取对应的ref
-    attributeList.value[index].attributeValues.push({ name: inputValue.value })
+    attributeList.value[index].values.push({ name: inputValue.value })
   }
-  inputVisible.value = false
+  attributeIndex.value = null
   inputValue.value = ''
 }
 </script>
diff --git a/src/views/mall/product/management/components/ProductAttributesAddForm.vue b/src/views/mall/product/management/components/ProductAttributesAddForm.vue
index 70fd2824..f498b7dd 100644
--- a/src/views/mall/product/management/components/ProductAttributesAddForm.vue
+++ b/src/views/mall/product/management/components/ProductAttributesAddForm.vue
@@ -62,7 +62,7 @@ const submitForm = async () => {
       const propertyId = await PropertyApi.createProperty(data)
       emit('success', { id: propertyId, ...formData.value, values: [] })
     } else {
-      emit(res[0]) // 因为只用一个
+      emit('success', res[0]) // 因为只用一个
     }
     message.success(t('common.createSuccess'))
     dialogVisible.value = false