商品管理: 修正添加属性和添加属性值时输入框显隐控制、输入框焦点获取错乱等bug
This commit is contained in:
parent
61218ae711
commit
7a64eb5198
@ -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: [
|
||||||
|
@ -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(() => {
|
// 因为组件在ref中所以需要用索引获取对应的Ref
|
||||||
InputRef.value[index]!.input!.focus()
|
InputRef.value[index]!.input!.focus()
|
||||||
})
|
|
||||||
}
|
}
|
||||||
/** 输入框失去焦点或点击回车时触发 */
|
/** 输入框失去焦点或点击回车时触发 */
|
||||||
const handleInputConfirm = (index) => {
|
const handleInputConfirm = (index) => {
|
||||||
if (inputValue.value) {
|
if (inputValue.value) {
|
||||||
// 因为ref再循环里,所以需要index获取对应的ref
|
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>
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user