fix:商品-门店列表选择列表优化

src/pages/Goods/Detail/index.vue

@@ -225,6 +225,7 @@
             placement="bottom"
             :width="800"
             trigger="click"
+            v-model:visible="shopListShow"
           >
             <template #reference>
               <el-button
@@ -239,12 +240,14 @@
               ref="shopListRef"
               :data="shopsList"
               @selection-change="handleShopsChange"
+              row-key="sub_shop_id"
             >
+              <!-- :selectable="canChooseShop"↓ -->
               <el-table-column
                 type="selection"
                 width="55"
-                :selectable="canChooseShop"
                 aria-checked="true"
+                :reserve-selection="true"
               >
               </el-table-column>
               <el-table-column
@@ -276,7 +279,7 @@
 
             <!-- 分页 -->
             <el-pagination
-              style="margin-top:20px"
+              style="margin-top:20px;"
               background
               @current-change="changeShopListPage"
               v-model:currentPage="shopCurrentPage"
@@ -285,6 +288,12 @@
               :total="shopsCount"
             >
             </el-pagination>
+            <section style="display:flex;justify-content:center;">
+              <el-button
+                type="primary"
+                style="border-radius:20px;"
+                @click="handleChooseShops"
+              >确定</el-button>
               <!-- 添加门店弹窗 -->
               <el-popover
                 placement="bottom"
@@ -296,7 +305,7 @@
                   <el-button
                     @click="addShopShow = true"
                     type="primary"
-                  style="border-radius:20px;margin:20px 0 0 50%;transform: translate(-50%,0);"
+                    style="border-radius:20px;"
                   >添加门店
                   </el-button>
                 </template>
@@ -343,6 +352,7 @@
                   <el-button @click="closeAddShops">取消</el-button>
                 </section>
               </el-popover>
+            </section>
           </el-popover>
         </section>
         <section class="width50p">
@@ -680,7 +690,7 @@ export default {
       if (!val) {
         this.rejectReason.reason = "";
       }
-    }
+    },
   },
 
   data () {
@@ -740,6 +750,7 @@ export default {
       },
 
       shopsList: [], // 门店列表
+      shopListShow: false, // 门店列表是否展示
       shopId: [], // 门店id数组
       chooseShopsList: [], // 已选门店列表
       shopsCount: 0,
@@ -889,32 +900,45 @@ export default {
         this.shopsList.forEach(row => {
           if (this.shopId.indexOf(row.sub_shop_id) !== -1) {
             this.$refs.shopListRef.toggleRowSelection(row, true);
+          } else {
+            this.$refs.shopListRef.toggleRowSelection(row, false);
           }
         });
       });
     },
 
+    // 删除已选择门店
+    deleteShops (subShopId) {
+      this.goodsObj.sub_shop = this.goodsObj.sub_shop.filter(item => {
+        return item.sub_shop_id !== subShopId;
+      });
+      this.shopId = this.goodsObj.sub_shop.map(item => {
+        return item.sub_shop_id;
+      });
+      this.shopIds = this.shopId.join(",");
+    },
+
     // 门店列表更改时操作
     handleShopsChange (value) {
-      this.goodsObj.sub_shop = value;
+      this.chooseShopsList = [];
+      this.chooseShopsList = value;
+      console.log("已选择列表的长度", this.chooseShopsList.length);
       const shopList = value.map(item => {
         return item.sub_shop_id;
       });
       this.shopIds = "";
       this.shopIds = shopList.join(",");
     },
-    // 是否可选门店
-    canChooseShop (row) {
-      if (
-        this.goodsObj.sub_shop.length === 0 ||
-        this.shopIds === row.sub_shop_id
-      ) {
-        return true;
-      } else {
-        return false;
-      }
+    // 商品列表换页
+    changeShopListPage (page) {
+      this.shopCurrentPage = page;
+      this.getShops();
+    },
+    // 确认选择的店铺
+    handleChooseShops () {
+      this.goodsObj.sub_shop = this.chooseShopsList;
+      this.shopListShow = false;
     },
-
     // 添加新门店
     async addShop () {
       const deepPlace = this.shopForm.deep_place.split(",");
@@ -953,22 +977,23 @@ export default {
       this.addShopShow = false;
     },
 
-    // 删除已选择门店
-    deleteShops (subShopId) {
-      this.goodsObj.sub_shop = this.goodsObj.sub_shop.filter(item => {
-        return item.sub_shop_id !== subShopId;
-      });
-      this.shopId = this.goodsObj.sub_shop.map(item => {
-        return item.sub_shop_id;
-      });
-      this.shopIds = this.shopId.join(",");
-    },
+    // 是否可选门店
+    // canChooseShop (row) {
+    //   if (
+    //     this.chooseShopsList.length === 0 ||
+    //     this.shopIds === row.sub_shop_id
+    //   ) {
+    //     return true;
+    //   } else {
+    //     return false;
+    //   }
+    // },
+
+
+
+
+
 
-    // 商品列表换页
-    changeShopListPage (page) {
-      this.shopCurrentPage = page;
-      this.getShops();
-    },
 
     // 取消新建门店
     closeAddShops () {