feat: 自定义cascader组件封装

src/views/operation/amazon/amazonAttributeGrouping.vue

@@ -68,12 +68,15 @@
           </div>
 
           <div style="flex: 1">
-            <!-- <CustomCascader
+            <CustomCascader
+              ref="customCascaderRef"
               :options="amCateCascaders"
               v-model="aliCatePathIds"
               :loadData="customLazyLoad"
-              @change="customCascaderChange"></CustomCascader> -->
-            <el-cascader
+              :clearable="false"
+              @onUpdataValue="onUpdataValue"
+              @change="customCascaderChange"></CustomCascader>
+            <!-- <el-cascader
               size="medium"
               :options="amCateCascaders"
               ref="amCateCascadersRef"
@@ -87,7 +90,7 @@
                 lazy: true,
                 lazyLoad: lazyLoad
               }"
-              @change="categoryTypeChange"></el-cascader>
+              @change="categoryTypeChange"></el-cascader> -->
           </div>
         </div>
         <div class="category-item">
@@ -260,12 +263,12 @@
 </template>
 <script>
 import { get, post } from '@/common/api/axios'
-// import CustomCascader from '@/common/components/base/CustomCascader.vue'
+import CustomCascader from '@/common/components/base/CustomCascader.vue'
 
 export default {
   name: 'amazonAttributeGrouping',
   components: {
-    // CustomCascader
+    CustomCascader
   },
   data() {
     return {
@@ -438,6 +441,10 @@ export default {
     },
     async searchCategory() {
       if (!this.keyWord) return
+      if (!this.shopId) {
+        this.$message.warning('请选择店铺')
+        return
+      }
       const loading = this.$loading({
         lock: true
       })
@@ -458,6 +465,10 @@ export default {
         loading.close()
       }
     },
+    onUpdataValue() {
+      console.log('onUpdataValue')
+      this.customCascaderChange()
+    },
     productTypeChange(val) {
       if (!val) return
       const item = this.productTypeList.find(
@@ -468,15 +479,15 @@ export default {
         ?.split(',')
         ?.slice(1)
         ?.map((e) => Number(e))
-      this.initCate(categoryPath || [], () => {
-        if (item.productType && categoryPath) {
-          this.aliCatePathIds = categoryPath
-          this.categoryTypeChange(item.productType, true)
-        } else {
-          this.jsonSchema = {}
-          this.groupList = []
-        }
-      })
+      // this.initCate([], () => {
+      if (item.productType && categoryPath) {
+        this.aliCatePathIds = categoryPath
+        // this.categoryTypeChange(item.productType, true)
+      } else {
+        this.jsonSchema = {}
+        this.groupList = []
+      }
+      // })
     },
     getCateAttrs(id, categoryFullPath, callback) {
       if (!id || id.length === 0) return
@@ -562,10 +573,43 @@ export default {
         }
       })
     },
-    customCascaderChange(val) {
-      console.log(val)
+    customCascaderChange() {
+      this.$nextTick(() => {
+        const nodes = this.$refs.customCascaderRef.getCheckedNodes()
+        let targetNode
+        if (this.aliCatePathIds) {
+          targetNode = nodes[nodes.length - 1]
+        }
+        if (targetNode) {
+          const { productTypeDefinitions, browsePathByName } = targetNode
+          this.getCateAttrs(
+            productTypeDefinitions,
+            browsePathByName,
+            ({ list, groupProps }) => {
+              if (list) {
+                this.jsonSchema = list
+                groupProps.forEach((item) => {
+                  item.propertyList.forEach((e) => {
+                    this.$set(this.dataGroupForm, e.propertyNameEn, item.id)
+                  })
+                })
+                this.cloneDataGroupForm = JSON.parse(
+                  JSON.stringify(this.dataGroupForm)
+                )
+              } else {
+                this.jsonSchema = {}
+                this.dataGroupForm = {}
+              }
+            }
+          )
+        } else {
+          this.jsonSchema = {}
+          this.dataGroupForm = {}
+        }
+      })
     },
     async initCate(ids, callback) {
+      console.log('initCate', ids)
       const shopId = this.shopList.find(
         (item) => item.id === this.shopId
       )?.marketplaceId
@@ -573,13 +617,13 @@ export default {
         lock: true
       })
       const arr = [
-        get('amazon/category/getChildListByBrowseNodeId', {
+        get('manage/rest/amazon/category/getChildListByBrowseNodeId', {
           marketplaceId: shopId
         })
       ]
       for (let i = 0; i < ids.length - 1; i++) {
         arr.push(
-          get('amazon/category/getChildListByBrowseNodeId', {
+          get('manage/rest/amazon/category/getChildListByBrowseNodeId', {
             browseNodeId: ids[i],
             marketplaceId: shopId
           })
@@ -639,10 +683,13 @@ export default {
       }
     },
     async customLazyLoad(node, callback) {
+      const shopId = this.shopList.find(
+        (item) => item.id === this.shopId
+      )?.marketplaceId
       try {
-        const res = await get('amazon/category/getChildListByBrowseNodeId', {
+        const res = await get('manage/rest/amazon/category/getChildListByBrowseNodeId', {
           browseNodeId: node.browseNodeId,
-          marketplaceId: this.shopId
+          marketplaceId: shopId
         })
         if (res.code !== 200) return
         callback(res.data)
@@ -669,7 +716,12 @@ export default {
       this.initCate([])
     },
     async saveGrouping() {
-      const nodes = this.$refs.amCateCascadersRef.getCheckedNodes()
+      // const nodes = this.$refs.amCateCascadersRef.getCheckedNodes()
+      // let targetNode
+      // if (this.aliCatePathIds) {
+      //   targetNode = nodes[nodes.length - 1]
+      // }
+      const nodes = this.$refs.customCascaderRef.getCheckedNodes()
       let targetNode
       if (this.aliCatePathIds) {
         targetNode = nodes[nodes.length - 1]
@@ -683,15 +735,15 @@ export default {
             updatePropertyList.push({
               propertyNameEn: item,
               groupId: this.dataGroupForm[item] || undefined,
-              productType: targetNode.data.productTypeDefinitions,
-              categoryFullPath: targetNode.data.browsePathByName
+              productType: targetNode.productTypeDefinitions,
+              categoryFullPath: targetNode.browsePathByName
             })
           } else {
             updatePropertyList.push({
               propertyNameEn: item,
               groupId: this.dataGroupForm[item] || undefined,
-              productType: targetNode.data.productTypeDefinitions,
-              categoryFullPath: targetNode.data.browsePathByName
+              productType: targetNode.productTypeDefinitions,
+              categoryFullPath: targetNode.browsePathByName
             })
           }
         })
@@ -705,8 +757,8 @@ export default {
             if (!this.dataGroupForm[item]) {
               delPropertyList.push({
                 propertyNameEn: item,
-                productType: targetNode.data.productTypeDefinitions,
-                categoryFullPath: targetNode.data.browsePathByName,
+                productType: targetNode.productTypeDefinitions,
+                categoryFullPath: targetNode.browsePathByName,
                 groupId: this.cloneDataGroupForm[item]
               })
             }