|
|
@@ -8,7 +8,7 @@
|
|
|
<el-text class="mx-1">属性值：</el-text>
|
|
|
<el-tag
|
|
|
v-for="(value, valueIndex) in item.values"
|
|
|
- :key="value.name"
|
|
|
+ :key="value.id"
|
|
|
:disable-transitions="false"
|
|
|
class="mx-1"
|
|
|
closable
|
|
|
@@ -22,8 +22,8 @@
|
|
|
v-model="inputValue"
|
|
|
class="!w-20"
|
|
|
size="small"
|
|
|
- @blur="handleInputConfirm(index)"
|
|
|
- @keyup.enter="handleInputConfirm(index)"
|
|
|
+ @blur="handleInputConfirm(index, item.id)"
|
|
|
+ @keyup.enter="handleInputConfirm(index, item.id)"
|
|
|
/>
|
|
|
<el-button
|
|
|
v-show="!inputVisible(index)"
|
|
|
@@ -40,7 +40,10 @@
|
|
|
|
|
|
<script lang="ts" name="ProductAttributes" setup>
|
|
|
import { ElInput } from 'element-plus'
|
|
|
+import * as PropertyApi from '@/api/mall/product/property'
|
|
|
|
|
|
+const { t } = useI18n() // 国际化
|
|
|
+const message = useMessage() // 消息弹窗
|
|
|
const inputValue = ref('') // 输入框值
|
|
|
const attributeIndex = ref<number | null>(null) // 获取焦点时记录当前属性项的index
|
|
|
// 输入框显隐控制
|
|
|
@@ -79,9 +82,16 @@ const showInput = async (index) => {
|
|
|
InputRef.value[index]!.input!.focus()
|
|
|
}
|
|
|
/** 输入框失去焦点或点击回车时触发 */
|
|
|
-const handleInputConfirm = (index) => {
|
|
|
+const handleInputConfirm = async (index, propertyId) => {
|
|
|
if (inputValue.value) {
|
|
|
- attributeList.value[index].values.push({ name: inputValue.value })
|
|
|
+ // 保存属性值
|
|
|
+ try {
|
|
|
+ const id = await PropertyApi.createPropertyValue({ propertyId, name: inputValue.value })
|
|
|
+ attributeList.value[index].values.push({ id, name: inputValue.value })
|
|
|
+ message.success(t('common.createSuccess'))
|
|
|
+ } catch {
|
|
|
+ message.error('添加失败，请重试') // TODO 缺少国际化
|
|
|
+ }
|
|
|
}
|
|
|
attributeIndex.value = null
|
|
|
inputValue.value = ''
|
puhui999