商品管理: 保存属性值到数据库

src/views/mall/product/management/components/ProductAttributes.vue

@@ -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)"
+        @blur="handleInputConfirm(index, item.id)"
-        @keyup.enter="handleInputConfirm(index)"
+        @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 = ''