商品管理: 修正添加属性和添加属性值时输入框显隐控制、输入框焦点获取错乱等bug

Author: puhui999

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: [

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,15 +17,20 @@
         {{ value.name }}
       </el-tag>
       <el-input
-        v-if="inputVisible"
+        v-show="inputVisible(index)"
         ref="InputRef"
         v-model="inputValue"
         class="!w-20"
         size="small"
         @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>

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