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({ name: '', // 商品名称 @@ -132,7 +130,6 @@ const formData = reactive({ 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 @@
属性值: - + + 添加
@@ -37,8 +42,13 @@ import { ElInput } from 'element-plus' const inputValue = ref('') // 输入框值 -const inputVisible = ref(false) // 输入框显隐控制 -const InputRef = ref>() //标签输入框Ref +const attributeIndex = ref(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 = '' } 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