【功能优化】添加商品属性时允许选择已有的属性值,点击「选择」后,获取 value 列表
parent
521ae46cba
commit
2dc738a6e7
|
@ -123,15 +123,25 @@ const showInput = async (index: number) => {
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
|
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
|
||||||
const handleInputConfirm = async (index: number, propertyId: number) => {
|
const handleInputConfirm = async (index: number, propertyId: number) => {
|
||||||
if (inputValue.value) {
|
if (inputValue.value) {
|
||||||
// 重复添加校验
|
// 1. 重复添加校验
|
||||||
// TODO @芋艿:需要测试下
|
|
||||||
if (attributeList.value[index].values.find((item) => item.name === inputValue.value)) {
|
if (attributeList.value[index].values.find((item) => item.name === inputValue.value)) {
|
||||||
message.warning('已存在相同属性值,请重试')
|
message.warning('已存在相同属性值,请重试')
|
||||||
attributeIndex.value = null
|
attributeIndex.value = null
|
||||||
inputValue.value = ''
|
inputValue.value = ''
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
// 保存属性值
|
|
||||||
|
// 2.1 情况一:属性值已存在,则直接使用并结束
|
||||||
|
const existValue = attributeOptions.value.find((item) => item.name === inputValue.value)
|
||||||
|
if (existValue) {
|
||||||
|
attributeIndex.value = null
|
||||||
|
inputValue.value = ''
|
||||||
|
attributeList.value[index].values.push({ id: existValue.id, name: existValue.name })
|
||||||
|
emit('success', attributeList.value)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2.2 情况二:新属性值,则进行保存
|
||||||
try {
|
try {
|
||||||
const id = await PropertyApi.createPropertyValue({ propertyId, name: inputValue.value })
|
const id = await PropertyApi.createPropertyValue({ propertyId, name: inputValue.value })
|
||||||
attributeList.value[index].values.push({ id, name: inputValue.value })
|
attributeList.value[index].values.push({ id, name: inputValue.value })
|
||||||
|
|
|
@ -83,18 +83,32 @@ defineExpose({ open }) // 提供 open 方法,用于打开弹窗
|
||||||
|
|
||||||
/** 提交表单 */
|
/** 提交表单 */
|
||||||
const submitForm = async () => {
|
const submitForm = async () => {
|
||||||
// 情况一:如果是已存在的属性,直接结束,不提交表单新增
|
// 1.1 重复添加校验
|
||||||
for (const attrItem of attributeList.value) {
|
for (const attrItem of attributeList.value) {
|
||||||
if (attrItem.name === formData.value.name) {
|
if (attrItem.name === formData.value.name) {
|
||||||
return message.error('该属性已存在,请勿重复添加')
|
return message.error('该属性已存在,请勿重复添加')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// 1.2 校验表单
|
||||||
// 情况二:如果是不存在的属性,则需要执行新增
|
|
||||||
// 校验表单
|
|
||||||
if (!formRef) return
|
if (!formRef) return
|
||||||
const valid = await formRef.value.validate()
|
const valid = await formRef.value.validate()
|
||||||
if (!valid) return
|
if (!valid) return
|
||||||
|
|
||||||
|
// 2.1 情况一:属性名已存在,则直接使用并结束
|
||||||
|
const existProperty = attributeOptions.value.find((item) => item.name === formData.value.name)
|
||||||
|
if (existProperty) {
|
||||||
|
// 添加到属性列表
|
||||||
|
attributeList.value.push({
|
||||||
|
id: existProperty.id,
|
||||||
|
...formData.value,
|
||||||
|
values: []
|
||||||
|
})
|
||||||
|
// 关闭弹窗
|
||||||
|
dialogVisible.value = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2.2 情况二:如果是不存在的属性,则需要执行新增
|
||||||
// 提交请求
|
// 提交请求
|
||||||
formLoading.value = true
|
formLoading.value = true
|
||||||
try {
|
try {
|
||||||
|
@ -106,14 +120,6 @@ const submitForm = async () => {
|
||||||
...formData.value,
|
...formData.value,
|
||||||
values: []
|
values: []
|
||||||
})
|
})
|
||||||
// 判断最终提交的属性名称是否是用户下拉选择的 自己手动输入的属性名称就不执行emit获取该属性名下属性值列表
|
|
||||||
for (const element of attributeOptions.value) {
|
|
||||||
if (element.name === formData.value.name) {
|
|
||||||
message.success(t('common.createSuccess'))
|
|
||||||
dialogVisible.value = false
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 关闭弹窗
|
// 关闭弹窗
|
||||||
message.success(t('common.createSuccess'))
|
message.success(t('common.createSuccess'))
|
||||||
dialogVisible.value = false
|
dialogVisible.value = false
|
||||||
|
|
Loading…
Reference in New Issue