fix: show all countries in commodity create form

src/views/cnf/pay/application/commodity-v2/index.vue

@@ -158,7 +158,7 @@
     <edit-form
       v-if="appCommodityEditFormVisible"
       :row="selectedEditFrom"
-      :country-list="countryList"
+      :country-list="commodityCountryList"
       @close="appCommodityEditFormVisible=false"
       @success="editFromSuccess"
     />
@@ -209,6 +209,7 @@ export default {
       },
       listLoading: false,
       countryList: [],
+      allCountryList: [],
       loadingCountry: false,
       loading: false
     }
@@ -222,6 +223,9 @@ export default {
         ...item,
         label: this.$t(item.labelKey)
       }))
+    },
+    commodityCountryList() {
+      return this.allCountryList.length > 0 ? this.allCountryList : this.countryList
     }
   },
   watch: {
@@ -238,6 +242,7 @@ export default {
   },
   created() {
     this.listRegion()
+    this.loadAllCountryList()
   },
   methods: {
     getProductTypeName(item) {
@@ -295,8 +300,24 @@ export default {
         })
       })
     },
-    loadAllOpenCountry() {
+    loadAllOpenCountry(cursor = 1, limit = 500) {
-      return pagePayOpenCounty({ cursor: 1, limit: 500 })
+      return pagePayOpenCounty({ cursor, limit })
+    },
+    loadAllCountryList() {
+      const limit = 500
+      const loadPage = (cursor, countryList) => {
+        return this.loadAllOpenCountry(cursor, limit).then(res => {
+          const body = res.body || {}
+          const nextCountryList = countryList.concat(this.normalizeList(body))
+          const total = Number(body.total || nextCountryList.length)
+          if (nextCountryList.length < total) {
+            return loadPage(cursor + 1, nextCountryList)
+          }
+          this.allCountryList = nextCountryList
+          return this.allCountryList
+        })
+      }
+      return loadPage(1, [])
     },
     applyCountryList(countryList) {
       this.countryList = countryList
@@ -363,17 +384,31 @@ export default {
       this.formVisible = false
     },
     createCommodity() {
-      this.selectedEditFrom = {
+      const openCreateForm = () => {
-        'applicationId': this.listQuery.applicationId,
+        this.selectedEditFrom = {
-        'amountUsd': '',
+          'applicationId': this.listQuery.applicationId,
-        'selectApp': this.selectedApp,
+          'amountUsd': '',
-        'payCountryIds': this.listQuery.payCountryId ? [this.listQuery.payCountryId] : []
+          'selectApp': this.selectedApp,
+          'payCountryIds': this.listQuery.payCountryId ? [this.listQuery.payCountryId] : []
+        }
+        if (this.isRegionProductApp && this.selectedRegion) {
+          this.selectedEditFrom.regionId = this.selectedRegion.id
+          this.selectedEditFrom.regionName = this.selectedRegion.regionName
+        }
+        this.appCommodityEditFormVisible = true
       }
-      if (this.isRegionProductApp && this.selectedRegion) {
+      if (this.allCountryList.length > 0) {
-        this.selectedEditFrom.regionId = this.selectedRegion.id
+        openCreateForm()
-        this.selectedEditFrom.regionName = this.selectedRegion.regionName
+        return
       }
-      this.appCommodityEditFormVisible = true
+      this.loadingCountry = true
+      this.loadAllCountryList().then(() => {
+        openCreateForm()
+      }).catch(er => {
+        console.error(er)
+      }).finally(() => {
+        this.loadingCountry = false
+      })
     },
     clickEditCommodity(row) {
       const that = this