diff --git a/src/views/cnf/pay/application/commodity-v2/edit-form.vue b/src/views/cnf/pay/application/commodity-v2/edit-form.vue index 4fdafbe..a12109e 100644 --- a/src/views/cnf/pay/application/commodity-v2/edit-form.vue +++ b/src/views/cnf/pay/application/commodity-v2/edit-form.vue @@ -21,7 +21,7 @@
{{ regionName }}
- + !lastIds.includes(id)) + const removedIds = lastIds.filter(id => !currentIds.includes(id)) + let nextIds = currentIds.slice() + addedIds.forEach(id => { + nextIds = this.mergeCountryIds(nextIds, this.sameNameCountryIds(id)) + }) + removedIds.forEach(id => { + const removeIds = this.sameNameCountryIds(id) + nextIds = nextIds.filter(nextId => !removeIds.includes(String(nextId))) + }) + this.syncPayCountryIdsBySameName(nextIds) + }, + syncPayCountryIdsBySameName(value) { + const normalizedIds = this.normalizeCountryIds(value) + const expandedIds = normalizedIds.reduce((result, id) => { + return this.mergeCountryIds(result, this.sameNameCountryIds(id)) + }, normalizedIds.slice()) + const nextValues = this.countryIdValues(expandedIds) + this.lastPayCountryIds = this.normalizeCountryIds(nextValues) + if (this.sameCountryIdList(this.normalizeCountryIds(this.form.payCountryIds), this.lastPayCountryIds)) { + return + } + this.syncingPayCountryIds = true + this.$set(this.form, 'payCountryIds', nextValues) + this.$nextTick(() => { + this.syncingPayCountryIds = false + }) + }, + normalizeCountryIds(value) { + return (Array.isArray(value) ? value : []).map(item => String(item)).filter(Boolean) + }, + mergeCountryIds(sourceIds, appendIds) { + const result = this.normalizeCountryIds(sourceIds) + appendIds.forEach(id => { + id = String(id) + if (id && !result.includes(id)) { + result.push(id) + } + }) + return result + }, + sameNameCountryIds(payCountryId) { + const selected = this.countryList.find(item => String(this.getPayCountryId(item)) === String(payCountryId)) + if (!selected) { + return [String(payCountryId)] + } + const selectedName = this.countryNameKey(selected) + if (!selectedName) { + return [String(payCountryId)] + } + return this.countryList + .filter(item => this.countryNameKey(item) === selectedName) + .map(item => String(this.getPayCountryId(item))) + .filter(Boolean) + }, + countryNameKey(item) { + return String(this.getCountryName(item) || '').trim().toLowerCase() + }, + countryIdValues(countryIds) { + const normalizedIds = this.normalizeCountryIds(countryIds) + return normalizedIds.map(id => { + const option = this.countryList.find(item => String(this.getPayCountryId(item)) === id) + return option ? this.getPayCountryId(option) : id + }) + }, + sameCountryIdList(left, right) { + left = this.normalizeCountryIds(left) + right = this.normalizeCountryIds(right) + return left.length === right.length && left.every((id, index) => id === right[index]) + }, changeAmount(val) { if (!val || !validPositiveNumberPointTwo(val)) { this.supportAmounts = [] diff --git a/src/views/cnf/pay/application/commodity-v2/index.vue b/src/views/cnf/pay/application/commodity-v2/index.vue index 3894b2b..a56de70 100644 --- a/src/views/cnf/pay/application/commodity-v2/index.vue +++ b/src/views/cnf/pay/application/commodity-v2/index.vue @@ -34,6 +34,7 @@ style="width: 200px" class="filter-item" clearable + filterable @change="changeCountry" > { - const countryList = that.normalizeList(res.body) + const countryList = that.normalizeList(res) if (countryList.length > 0 || !regionId) { that.loadingCountry = false that.applyCountryList(countryList) return } - that.loadAllOpenCountry().then(fallbackRes => { + that.loadAllCountryList(true).then(fallbackList => { that.loadingCountry = false - that.applyCountryList(that.normalizeList(fallbackRes.body)) + that.applyCountryList(that.normalizeList(fallbackList)) }).catch(er => { that.loadingCountry = false console.error(er) }) }).catch(er => { console.error(er) - that.loadAllOpenCountry().then(fallbackRes => { + that.loadAllCountryList(true).then(fallbackList => { that.loadingCountry = false - that.applyCountryList(that.normalizeList(fallbackRes.body)) + that.applyCountryList(that.normalizeList(fallbackList)) }).catch(fallbackErr => { that.loadingCountry = false console.error(fallbackErr) }) }) }, - loadAllOpenCountry(cursor = 1, limit = 500) { + loadRegionCountryList(regionId) { + return listPayOpenCountryByRegionId(regionId).then(res => this.normalizeList(res.body)) + }, + loadAllOpenCountry(cursor = 1, limit = 200) { return pagePayOpenCounty({ cursor, limit }) }, - loadAllCountryList() { - const limit = 500 + loadAllCountryList(force = false) { + if (!force && this.allCountryList.length > 0) { + return Promise.resolve(this.allCountryList) + } + if (!force && this.allCountryListLoadingPromise) { + return this.allCountryListLoadingPromise + } + const limit = 200 const loadPage = (cursor, countryList) => { return this.loadAllOpenCountry(cursor, limit).then(res => { const body = res.body || {} @@ -317,7 +328,10 @@ export default { return this.allCountryList }) } - return loadPage(1, []) + this.allCountryListLoadingPromise = loadPage(1, []).finally(() => { + this.allCountryListLoadingPromise = null + }) + return this.allCountryListLoadingPromise }, applyCountryList(countryList) { this.countryList = countryList @@ -458,7 +472,7 @@ export default { if (!payCountryId) { return null } - return this.countryList.find(item => String(this.getPayCountryId(item)) === String(payCountryId)) + return this.countryList.concat(this.allCountryList).find(item => String(this.getPayCountryId(item)) === String(payCountryId)) }, getCommodityCountrySource(row) { const payCountryId = row && row.payCountryId ? row.payCountryId : this.listQuery.payCountryId