优化商品关联

src/views/product/indexconfig/addgoods.vue

@@ -234,13 +234,13 @@
           <div class="row">
             <div class="center">
               <el-button type="primary" @click="selecProductDialogRef?.show()"
-                :disabled="goodsList.length >= goodsListMax">添加商品</el-button>
+                :disabled="ruleForm.relatedRecommendJson.length >= goodsListMax">添加商品</el-button>
               <div class="tips">设置商品后，用户可以在商品详情页中看到推荐商品可拖动调整顺序，最多设置{{ goodsListMax }}个商品</div>
             </div>
           </div>
           <div class="row">
             <div id="goods_table_drag">
-              <el-table :data="goodsList" border stripe style="width: 500px;" row-key="id">
+              <el-table :data="ruleForm.relatedRecommendJson" border stripe style="width: 500px;" row-key="id">
                 <!-- 拖拽列 -->
                 <el-table-column label="排序" width="60">
                   <template v-slot="scope">
@@ -256,7 +256,8 @@
                 <el-table-column label="商品名称" prop="name"></el-table-column>
                 <el-table-column label="操作" width="100">
                   <template v-slot="scope">
-                    <el-button link type="danger" @click="goodsList.splice(scope.$index, 1)">删除</el-button>
+                    <el-button link type="danger"
+                      @click="ruleForm.relatedRecommendJson.splice(scope.$index, 1)">删除</el-button>
                   </template>
                 </el-table-column>
               </el-table>
@@ -314,7 +315,6 @@ import selecProductDialog from "@/views/marketing_center/group_booking/component
 
 const selecProductDialogRef = ref(null)
 const goodsListMax = ref(9)
-const goodsList = ref<any[]>([]);
 
 onMounted(() => {
   // Sortable 需要在 el-table 渲染 tbody 后初始化，尝试多次以确保 DOM 可用
@@ -343,11 +343,11 @@ onMounted(() => {
           if (e.oldIndex === e.newIndex) return;
           const from = e.oldIndex;
           const to = e.newIndex;
-          const item = goodsList.value.splice(from, 1)[0];
-          goodsList.value.splice(to, 0, item);
+          const item = ruleForm.relatedRecommendJson.splice(from, 1)[0];
+          ruleForm.relatedRecommendJson.splice(to, 0, item);
           // 触发响应式更新
-          goodsList.value = goodsList.value.slice();
-          console.log("排序后的数据", goodsList.value);
+          ruleForm.relatedRecommendJson = ruleForm.relatedRecommendJson.slice();
+          console.log("排序后的数据", ruleForm.relatedRecommendJson);
         },
       });
     };
@@ -359,12 +359,17 @@ onMounted(() => {
 
 // 已选择的商品
 function selecProductSuccess(res: any) {
-  let obj = goodsList.value.find((item) => item.id == res.id);
+  if (res.id == ruleForm.id) {
+    ElMessage.error("不能选择当前商品");
+    return;
+  }
+
+  let obj = ruleForm.relatedRecommendJson.find((item) => item.id == res.id);
   if (obj && obj.id) {
     ElMessage.error("该商品已选择");
     return;
   }
-  goodsList.value.push({ ...res });
+  ruleForm.relatedRecommendJson.push({ ...res });
 }
 
 const tagsViewStore = useTagsViewStore();
@@ -432,6 +437,7 @@ interface datasForm {
   addGroupIndex: any;
 }
 interface RuleForm {
+  id: number | string;
   name: string;
   shortTitle: string;
   unitId: string;
@@ -456,9 +462,11 @@ interface RuleForm {
   sort: Number;
   proGroupVo: any[];
   selectSpecInfo: any;
+  relatedRecommendJson: any[];
 }
 const ruleFormRef = ref<FormInstance>();
 const ruleForm = reactive<RuleForm>({
+  id: '',
   //商品名称
   name: "",
   //商品介绍
@@ -512,6 +520,7 @@ const ruleForm = reactive<RuleForm>({
   // 排序值
   sort: 1,
   selectSpecInfo: {},
+  relatedRecommendJson: [] // 关联推荐商品
 });
 const rules = reactive<FormRules<RuleForm>>({
   name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],