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

This commit is contained in:
puhui999 2023-04-29 23:10:18 +08:00
parent 61218ae711
commit 7a64eb5198
3 changed files with 26 additions and 22 deletions

View File

@ -98,7 +98,6 @@ import ProductAttributes from './ProductAttributes.vue'
import { copyValueToTarget } from '@/utils/object' import { copyValueToTarget } from '@/utils/object'
// Api // Api
import * as ProductCategoryApi from '@/api/mall/product/category' import * as ProductCategoryApi from '@/api/mall/product/category'
import * as PropertyApi from '@/api/mall/product/property'
import { defaultProps, handleTree } from '@/utils/tree' import { defaultProps, handleTree } from '@/utils/tree'
import { ElInput } from 'element-plus' import { ElInput } from 'element-plus'
@ -116,12 +115,11 @@ const attributeList = ref([
{ {
id: 1, id: 1,
name: '颜色', name: '颜色',
attributeValues: [{ id: 1, name: '白色' }] values: [{ id: 1, name: '白色' }]
} }
]) ])
const addAttribute = async (propertyId: number) => { const addAttribute = (property: any) => {
const data = await PropertyApi.getPropertyValuePage({ id: propertyId }) attributeList.value.push(property)
console.log(data)
} }
const formData = reactive<SpuType>({ const formData = reactive<SpuType>({
name: '', // name: '', //
@ -132,7 +130,6 @@ const formData = reactive<SpuType>({
sliderPicUrls: [], // sliderPicUrls: [], //
introduction: '', // introduction: '', //
deliveryTemplateId: 1, // deliveryTemplateId: 1, //
selectRule: '', // TODO
specType: false, // specType: false, //
subCommissionType: false, // subCommissionType: false, //
skus: [ skus: [

View File

@ -7,7 +7,7 @@
<div> <div>
<el-text class="mx-1">属性值</el-text> <el-text class="mx-1">属性值</el-text>
<el-tag <el-tag
v-for="(value, valueIndex) in item.attributeValues" v-for="(value, valueIndex) in item.values"
:key="value.name" :key="value.name"
:disable-transitions="false" :disable-transitions="false"
class="mx-1" class="mx-1"
@ -17,7 +17,7 @@
{{ value.name }} {{ value.name }}
</el-tag> </el-tag>
<el-input <el-input
v-if="inputVisible" v-show="inputVisible(index)"
ref="InputRef" ref="InputRef"
v-model="inputValue" v-model="inputValue"
class="!w-20" class="!w-20"
@ -25,7 +25,12 @@
@blur="handleInputConfirm(index)" @blur="handleInputConfirm(index)"
@keyup.enter="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> </el-button>
</div> </div>
@ -37,8 +42,13 @@
import { ElInput } from 'element-plus' import { ElInput } from 'element-plus'
const inputValue = ref('') // const inputValue = ref('') //
const inputVisible = ref(false) // const attributeIndex = ref<number | null>(null) // index
const InputRef = ref<InstanceType<typeof ElInput>>() //Ref //
const inputVisible = computed(() => (index) => {
if (attributeIndex.value === null) return false
if (attributeIndex.value === index) return true
})
const InputRef = ref() //Ref
const attributeList = ref([]) const attributeList = ref([])
const props = defineProps({ const props = defineProps({
attributeData: { attributeData: {
@ -60,23 +70,20 @@ watch(
) )
/** 删除标签 tagValue 标签值*/ /** 删除标签 tagValue 标签值*/
const handleClose = (index, valueIndex) => { const handleClose = (index, valueIndex) => {
const av = attributeList.value[index].attributeValues attributeList.value[index].values?.splice(valueIndex, 1)
av.splice(valueIndex, 1)
} }
/** 显示输入框并获取焦点 */ /** 显示输入框并获取焦点 */
const showInput = (index) => { const showInput = async (index) => {
inputVisible.value = true attributeIndex.value = index
nextTick(() => { // refRef
InputRef.value[index]!.input!.focus() InputRef.value[index]!.input!.focus()
})
} }
/** 输入框失去焦点或点击回车时触发 */ /** 输入框失去焦点或点击回车时触发 */
const handleInputConfirm = (index) => { const handleInputConfirm = (index) => {
if (inputValue.value) { if (inputValue.value) {
// refindexref attributeList.value[index].values.push({ name: inputValue.value })
attributeList.value[index].attributeValues.push({ name: inputValue.value })
} }
inputVisible.value = false attributeIndex.value = null
inputValue.value = '' inputValue.value = ''
} }
</script> </script>

View File

@ -62,7 +62,7 @@ const submitForm = async () => {
const propertyId = await PropertyApi.createProperty(data) const propertyId = await PropertyApi.createProperty(data)
emit('success', { id: propertyId, ...formData.value, values: [] }) emit('success', { id: propertyId, ...formData.value, values: [] })
} else { } else {
emit(res[0]) // emit('success', res[0]) //
} }
message.success(t('common.createSuccess')) message.success(t('common.createSuccess'))
dialogVisible.value = false dialogVisible.value = false