feat: 将商品管理的重要属性和非重要属性改为可添加/删除的动态列表

src/modules/live/product/management/components/FormBaseInfo.vue

 <script setup>
+import { Plus, Delete } from '@element-plus/icons-vue'
 import { useChat } from '@/composables/useChat'
 import { getAttrList } from '../api'
 const form = inject('form')
@@ -63,28 +64,40 @@ watchEffect(() => {
   fetchList()
 })
 
-function handleChange(value, item, attr) {
-  form.live_commodity_attrs[attr][item.id] = {
-    id: item.id,
-    attr_name: item.name,
-    value: value,
+// 获取可选的属性列表（排除已选择的，但包含当前项选中的）
+const getAvailableAttrs = (type, currentItemId = null) => {
+  const selectedIds = form.live_commodity_attrs[type].map((item) => item.id).filter((id) => id && id !== currentItemId)
+  return attrs[type].items.filter((item) => !selectedIds.includes(item.id))
+}
+
+// 添加属性项
+function addAttrItem(type) {
+  form.live_commodity_attrs[type].push({
+    id: '',
+    attr_name: '',
+    value: '',
+  })
+}
+
+// 删除属性项
+function removeAttrItem(type, index) {
+  form.live_commodity_attrs[type].splice(index, 1)
+}
+
+// 选择属性
+function handleAttrSelect(attrId, item, type) {
+  const selectedAttr = attrs[type].items.find((attr) => attr.id === attrId)
+  if (selectedAttr) {
+    item.attr_name = selectedAttr.name
   }
 }
 
 const importanceTotal = computed(() => {
-  let total = 0
-  Object.values(form.live_commodity_attrs.importance_attrs).forEach((item) => {
-    if (item.value) total++
-  })
-  return total
+  return form.live_commodity_attrs.importance_attrs.filter((item) => item.id && item.value).length
 })
 
 const unimportanceTotal = computed(() => {
-  let total = 0
-  Object.values(form.live_commodity_attrs.unimportance_attrs).forEach((item) => {
-    if (item.value) total++
-  })
-  return total
+  return form.live_commodity_attrs.unimportance_attrs.filter((item) => item.id && item.value).length
 })
 </script>
 
@@ -115,32 +128,56 @@ const unimportanceTotal = computed(() => {
       :label="`重要属性 ${importanceTotal}/${attrs.importance_attrs.total}`"
       prop="live_commodity_attrs.importance_attrs">
       <div class="form-tips">错误填写属性，会引起商品下架，请认真准确填写。</div>
-      <el-form-item
-        v-for="item in attrs.importance_attrs.items"
-        :key="item.id"
-        :label="item.name"
-        :required="item.is_importance == 1"
-        style="width: 200px; margin-right: 20px">
-        <el-input
-          placeholder="请输入"
-          :modelValue="form.live_commodity_attrs.importance_attrs[item.id]?.value"
-          @input="(value) => handleChange(value, item, 'importance_attrs')"></el-input>
-      </el-form-item>
+      <div style="display: flex; flex-direction: column; gap: 16px">
+        <div
+          v-for="(item, index) in form.live_commodity_attrs.importance_attrs"
+          :key="index"
+          style="display: flex; align-items: flex-start; gap: 12px">
+          <el-select
+            v-model="item.id"
+            placeholder="请选择属性"
+            style="width: 200px"
+            @change="(value) => handleAttrSelect(value, item, 'importance_attrs')">
+            <el-option
+              v-for="attr in getAvailableAttrs('importance_attrs', item.id)"
+              :key="attr.id"
+              :label="attr.name"
+              :value="attr.id">
+            </el-option>
+          </el-select>
+          <el-input v-model="item.value" placeholder="请输入属性值" style="flex: 1; max-width: 300px"> </el-input>
+          <el-button type="danger" plain :icon="Delete" circle @click="removeAttrItem('importance_attrs', index)">
+          </el-button>
+        </div>
+        <el-button type="primary" plain :icon="Plus" @click="addAttrItem('importance_attrs')"> 添加属性 </el-button>
+      </div>
     </el-form-item>
     <el-form-item
       :label="`非重要属性 ${unimportanceTotal}/${attrs.unimportance_attrs.total}`"
-      prop="live_commodity_attrs.unimportance">
-      <el-form-item
-        v-for="item in attrs.unimportance_attrs.items"
-        :key="item.id"
-        :label="item.name"
-        :required="item.is_importance == 1"
-        style="width: 200px; margin-right: 20px">
-        <el-input
-          placeholder="请输入"
-          :modelValue="form.live_commodity_attrs.unimportance_attrs[item.id]?.value"
-          @input="(value) => handleChange(value, item, 'unimportance_attrs')"></el-input>
-      </el-form-item>
+      prop="live_commodity_attrs.unimportance_attrs">
+      <div style="display: flex; flex-direction: column; gap: 16px">
+        <div
+          v-for="(item, index) in form.live_commodity_attrs.unimportance_attrs"
+          :key="index"
+          style="display: flex; align-items: flex-start; gap: 12px">
+          <el-select
+            v-model="item.id"
+            placeholder="请选择属性"
+            style="width: 200px"
+            @change="(value) => handleAttrSelect(value, item, 'unimportance_attrs')">
+            <el-option
+              v-for="attr in getAvailableAttrs('unimportance_attrs', item.id)"
+              :key="attr.id"
+              :label="attr.name"
+              :value="attr.id">
+            </el-option>
+          </el-select>
+          <el-input v-model="item.value" placeholder="请输入属性值" style="flex: 1; max-width: 300px"> </el-input>
+          <el-button type="danger" plain :icon="Delete" circle @click="removeAttrItem('unimportance_attrs', index)">
+          </el-button>
+        </div>
+        <el-button type="primary" plain :icon="Plus" @click="addAttrItem('unimportance_attrs')"> 添加属性 </el-button>
+      </div>
     </el-form-item>
   </div>
 </template>

src/modules/live/product/management/views/Update.vue

@@ -21,8 +21,8 @@ const form = reactive({
   title: '',
   shopping_guide_short_title: '',
   live_commodity_attrs: {
-    importance_attrs: {},
-    unimportance_attrs: {},
+    importance_attrs: [],
+    unimportance_attrs: [],
   },
   picture_addreses: [],
   picture_34_addreses: [],
@@ -39,22 +39,18 @@ const form = reactive({
 })
 provide('form', form)
 
-const array2json = (arr) => {
-  const result = {}
-  arr.forEach((item) => {
-    result[item.id] = { ...item }
-  })
-  return result
-}
-
 async function fetchInfo() {
   const res = await getProduct({ id: route.query.id })
   const detail = res.data.detail
   const attrs = JSON.parse(detail.live_commodity_attrs)
   Object.assign(form, detail, {
     live_commodity_attrs: {
-      importance_attrs: array2json(attrs.importance_attrs),
-      unimportance_attrs: array2json(attrs.unimportance_attrs),
+      importance_attrs: Array.isArray(attrs.importance_attrs)
+        ? attrs.importance_attrs
+        : Object.values(attrs.importance_attrs || {}),
+      unimportance_attrs: Array.isArray(attrs.unimportance_attrs)
+        ? attrs.unimportance_attrs
+        : Object.values(attrs.unimportance_attrs || {}),
     },
     picture_addreses: JSON.parse(detail.picture_addreses),
     picture_34_addreses: JSON.parse(detail.picture_34_addreses),
@@ -83,8 +79,8 @@ async function handleSubmit() {
   const params = {
     ...form,
     live_commodity_attrs: JSON.stringify({
-      importance_attrs: Object.values(form.live_commodity_attrs.importance_attrs),
-      unimportance_attrs: Object.values(form.live_commodity_attrs.unimportance_attrs),
+      importance_attrs: form.live_commodity_attrs.importance_attrs.filter((item) => item.id && item.value),
+      unimportance_attrs: form.live_commodity_attrs.unimportance_attrs.filter((item) => item.id && item.value),
     }),
     picture_addreses: JSON.stringify(form.picture_addreses),
     picture_34_addreses: JSON.stringify(form.picture_34_addreses),