feat: 删除分组

src/router/index.js

@@ -179,7 +179,7 @@ const routes = [
         path: '/operation/amazonAttributeGrouping',
         path: '/operation/amazonAttributeGrouping',
         component: () => import('@/views/operation/amazon/amazonAttributeGrouping.vue'),
         component: () => import('@/views/operation/amazon/amazonAttributeGrouping.vue'),
         name: 'amazonAttributeGrouping',
         name: 'amazonAttributeGrouping',
-        meta: { title: 'Amazon attribute grouping' }
+        meta: { title: '亚马逊属性分类' }
       },
       },
       {
       {
         path: '/saas/production/assistant/manage',
         path: '/saas/production/assistant/manage',

src/views/operation/amazon/amazonAttributeGrouping.vue

@@ -5,6 +5,13 @@
         <el-button size="small" type="primary" @click="addGroup">
         <el-button size="small" type="primary" @click="addGroup">
           添加分组
           添加分组
         </el-button>
         </el-button>
+        <el-button
+          size="small"
+          type="danger"
+          @click="batchDeleteGroups"
+          :disabled="selectedGroups.length === 0">
+          删除分组
+        </el-button>
       </div>
       </div>
       <div class="group-status-box" v-if="groupsList.length > 0">
       <div class="group-status-box" v-if="groupsList.length > 0">
         <div
         <div
@@ -21,6 +28,12 @@
           :key="item.id"
           :key="item.id"
           :class="{ active: currentGroupId === item.id }"
           :class="{ active: currentGroupId === item.id }"
           @click="currentGroupId = item.id">
           @click="currentGroupId = item.id">
+          <div class="group-checkbox" @click.stop>
+            <div
+              class="custom-checkbox"
+              :class="{ active: selectedGroups.includes(item.id) }"
+              @click="toggleGroupSelection(item.id)"></div>
+          </div>
           <span class="group-name">{{ item.name }} ({{ item.nameEn }})</span>
           <span class="group-name">{{ item.name }} ({{ item.nameEn }})</span>
           <div class="operate-group">
           <div class="operate-group">
             <i
             <i
@@ -55,6 +68,11 @@
           </div>
           </div>
 
 
           <div style="flex: 1">
           <div style="flex: 1">
+            <!-- <CustomCascader
+              :options="amCateCascaders"
+              v-model="aliCatePathIds"
+              :loadData="customLazyLoad"
+              @change="customCascaderChange"></CustomCascader> -->
             <el-cascader
             <el-cascader
               size="medium"
               size="medium"
               :options="amCateCascaders"
               :options="amCateCascaders"
@@ -175,35 +193,6 @@
       :close-on-click-modal="false"
       :close-on-click-modal="false"
       width="50%">
       width="50%">
       <el-form :model="addForm" label-width="100px" ref="addFormRef">
       <el-form :model="addForm" label-width="100px" ref="addFormRef">
-        <!-- <el-form-item label="店铺">
-          <el-select
-            v-model="addForm.shopId"
-            placeholder="请选择店铺"
-            style="width: 100%"
-            @change="shopChange">
-            <el-option
-              v-for="item in shopList"
-              :key="item.id"
-              :label="item.shopName"
-              :value="item.marketplaceId"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="分类">
-          <el-cascader
-            style="width: 100%"
-            size="medium"
-            :options="amCateCascaders"
-            ref="addGroupCascaderRef"
-            placeholder="请选择分类"
-            v-model="addForm.productType"
-            filterable
-            :props="{
-              label: 'browseNodeName',
-              value: 'browseNodeId',
-              lazy: true,
-              lazyLoad: lazyLoad
-            }"></el-cascader>
-        </el-form-item> -->
         <el-form-item
         <el-form-item
           label="中文名称"
           label="中文名称"
           prop="name"
           prop="name"
@@ -263,9 +252,13 @@
 </template>
 </template>
 <script>
 <script>
 import { get, post } from '@/common/api/axios'
 import { get, post } from '@/common/api/axios'
+// import CustomCascader from '@/common/components/base/CustomCascader.vue'
 
 
 export default {
 export default {
   name: 'amazonAttributeGrouping',
   name: 'amazonAttributeGrouping',
+  components: {
+    // CustomCascader
+  },
   data() {
   data() {
     return {
     return {
       groupsList: [],
       groupsList: [],
@@ -293,7 +286,8 @@ export default {
       setGroupLoading: false,
       setGroupLoading: false,
       groupingId: '',
       groupingId: '',
       currentGroupId: 0,
       currentGroupId: 0,
-      cloneDataGroupForm: {}
+      cloneDataGroupForm: {},
+      selectedGroups: []
     }
     }
   },
   },
   mounted() {
   mounted() {
@@ -437,9 +431,7 @@ export default {
         lock: true
         lock: true
       })
       })
       try {
       try {
-        const find = this.shopList.find(
-          (item) => item.id === this.shopId
-        )
+        const find = this.shopList.find((item) => item.id === this.shopId)
         const res = await get('amazon/category/getChildListByKeywords', {
         const res = await get('amazon/category/getChildListByKeywords', {
           keywords: this.keyWord,
           keywords: this.keyWord,
           marketplaceId: find.marketplaceId
           marketplaceId: find.marketplaceId
@@ -559,6 +551,9 @@ export default {
         }
         }
       })
       })
     },
     },
+    customCascaderChange(val) {
+      console.log(val)
+    },
     async initCate(ids, callback) {
     async initCate(ids, callback) {
       const shopId = this.shopList.find(
       const shopId = this.shopList.find(
         (item) => item.id === this.shopId
         (item) => item.id === this.shopId
@@ -632,6 +627,18 @@ export default {
           })
           })
       }
       }
     },
     },
+    async customLazyLoad(node, callback) {
+      try {
+        const res = await get('amazon/category/getChildListByBrowseNodeId', {
+          browseNodeId: node.browseNodeId,
+          marketplaceId: this.shopId
+        })
+        if (res.code !== 200) return
+        callback(res.data)
+      } catch (e) {
+        console.error(e)
+      }
+    },
     async getAmazonShopList() {
     async getAmazonShopList() {
       const loading = this.$loading({
       const loading = this.$loading({
         lock: true
         lock: true
@@ -705,6 +712,116 @@ export default {
       } catch (e) {
       } catch (e) {
         console.error(e)
         console.error(e)
       }
       }
+    },
+    async deleteGroup(item) {
+      this.$confirm(
+        `确定要删除分组 "${item.name}" 吗？删除后该分组下的属性将移至全部分组。`,
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(async () => {
+        try {
+          // 先获取该分组下的所有属性
+          const propertiesRes = await post(
+            'amazonProductTypeGroup/getGroupProperties',
+            {
+              groupId: item.id
+            }
+          )
+
+          if (propertiesRes.code === 200 && propertiesRes.data.length > 0) {
+            // 将该分组下的属性移至全部分组（groupId为0或null）
+            const updatePropertyList = propertiesRes.data.map((prop) => ({
+              propertyNameEn: prop.propertyNameEn,
+              groupId: null, // 移至全部分组
+              productType: prop.productType,
+              categoryFullPath: prop.categoryFullPath
+            }))
+
+            await post('amazonProductGroupProperty/batchUpdate', {
+              updatePropertyList,
+              delPropertyList: []
+            })
+          }
+
+          // 删除分组
+          const res = await post('amazonProductTypeGroup/delete', {
+            id: item.id
+          })
+          if (res.code !== 200) return
+
+          this.$message.success('删除分组成功，该分组下的属性已移至全部分组')
+          this.getGroupList()
+
+          // 如果当前选中的是被删除的分组，切换到全部分组
+          if (this.currentGroupId === item.id) {
+            this.currentGroupId = 0
+          }
+        } catch (e) {
+          console.error(e)
+          this.$message.error('删除分组失败')
+        }
+      })
+    },
+    async batchDeleteGroups() {
+      if (this.selectedGroups.length === 0) {
+        this.$message.warning('请选择要删除的分组')
+        return
+      }
+      this.$confirm(
+        `确定要批量删除选中的 ${this.selectedGroups.length} 个分组吗？删除后这些分组下的属性将移至全部分组。`,
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(async () => {
+        try {
+          let allProperties = []
+          const groups = this.groupsList.filter((item) =>
+            this.selectedGroups.includes(item.id)
+          )
+          if (groups.length > 0) {
+            allProperties = groups.map((e) => e.propertyList).flat()
+          }
+          if (allProperties.length > 0) {
+            allProperties.forEach((item) => {
+              this.$set(this.dataGroupForm, item.propertyNameEn, '')
+            })
+          }
+          const res = await get('amazonProductTypeGroup/delete', {
+            ids: this.selectedGroups.join(',')
+          })
+          if (res.code !== 200) return
+          this.$message.success('批量删除分组成功')
+          this.getGroupList()
+          this.selectedGroups = []
+          if (this.selectedGroups.includes(this.currentGroupId)) {
+            this.currentGroupId = 0
+          }
+        } catch (e) {
+          console.error(e)
+          this.$message.error('批量删除分组失败')
+        }
+      })
+    },
+    toggleGroupSelection(groupId) {
+      const index = this.selectedGroups.indexOf(groupId)
+      if (index > -1) {
+        this.selectedGroups.splice(index, 1)
+      } else {
+        this.selectedGroups.push(groupId)
+      }
+    },
+    selectAllGroups() {
+      this.selectedGroups = this.groupsList.map((group) => group.id)
+    },
+    clearAllGroups() {
+      this.selectedGroups = []
     }
     }
   }
   }
 }
 }
@@ -729,6 +846,16 @@ export default {
   .add-group {
   .add-group {
     text-align: right;
     text-align: right;
     margin-bottom: 10px;
     margin-bottom: 10px;
+    .group-select-actions {
+      margin-top: 5px;
+      text-align: center;
+      .selection-info {
+        display: block;
+        font-size: 12px;
+        color: #409eff;
+        margin-top: 3px;
+      }
+    }
   }
   }
 }
 }
 .right-group-content {
 .right-group-content {
@@ -778,6 +905,44 @@ export default {
     border-width: 2px;
     border-width: 2px;
     font-weight: bold;
     font-weight: bold;
   }
   }
+  .group-checkbox {
+    position: absolute;
+    left: 8px;
+    top: 8px;
+    z-index: 1;
+    .custom-checkbox {
+      width: 14px;
+      height: 14px;
+      border: 1px solid #dcdfe6;
+      border-radius: 2px;
+      background-color: #fff;
+      cursor: pointer;
+      position: relative;
+      transition: all 0.3s;
+
+      &:hover {
+        border-color: #409eff;
+      }
+
+      &.active {
+        background-color: #409eff;
+        border-color: #409eff;
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0px;
+          left: 4px;
+          width: 4px;
+          height: 8px;
+          border: 2px solid #fff;
+          border-top: none;
+          border-left: none;
+          transform: rotate(45deg);
+        }
+      }
+    }
+  }
 }
 }
 .category-item {
 .category-item {
   display: flex;
   display: flex;
@@ -888,4 +1053,8 @@ export default {
     height: unset;
     height: unset;
   }
   }
 }
 }
+.is-selected {
+  color: #409eff !important;
+  font-weight: bold;
+}
 </style>
 </style>