feat(用户列表-->搜索栏): 调整国家项功能

src/views/user/user-table/index.vue

@@ -91,7 +91,7 @@
         </el-select>
 
         <!-- 国家 -->
-        <el-autocomplete
+        <!-- <el-autocomplete
           v-if="showAllCondition"
           v-model="countryCodeStr"
           popper-class="my-autocomplete"
@@ -113,7 +113,33 @@
               {{ item.phonePrefix + " " + item.countryName }}
             </div>
           </template>
-        </el-autocomplete>
+        </el-autocomplete> -->
+
+        <!-- 国家 -->
+        <el-select
+          v-model="listQuery.countryCode"
+          v-loading="loadingCountry"
+          placeholder="国家"
+          style="width: 200px"
+          class="filter-item"
+          clearable
+          collapse-tags
+          @change="changeCountry"
+        >
+          <el-option
+            v-for="item in countryList"
+            :key="item.id"
+            :label="item.country.aliasName || item.country.enName"
+            :value="item.country.alphaTwo"
+          >
+            <span style="float: left;">
+              <img :src="item.country.nationalFlag" width="30"
+            /></span>
+            <span style="float: left;margin-left:10px">{{
+              item.country.aliasName || item.country.enName
+            }}</span>
+          </el-option>
+        </el-select>
 
         <!-- 账号类型 -->
         <el-select
@@ -752,6 +778,7 @@ import { registerOrigins, originPlatforms } from "@/constant/origin";
 
 import { getUserTable, resetPassword } from "@/api/app-user";
 import { getCountryAlls } from "@/api/sys";
+import { listPayOpenCountry } from "@/api/sys-pay";
 
 import Pagination from "@/components/Pagination";
 import PlatformSvgIcon from "@/components/PlatformSvgIcon";
@@ -872,7 +899,11 @@ export default {
       rangeDate: "",
       listLoading: true,
       searchLoading: false,
-      clickUserId: ""
+      clickUserId: "",
+
+      selectedCountry: {}, // 存储完整的国家对象
+      countryList: [],
+      loadingCountry: false
     };
   },
   computed: {
@@ -897,6 +928,7 @@ export default {
       }
     }
   },
+
   created() {
     const that = this;
     const querySystem = this.permissionsSysOriginPlatforms[0];
@@ -906,10 +938,12 @@ export default {
     that.listQuery.sysOrigins = [querySystem.value];
     that.renderData(true);
     // that.loadCountryAlls()
+    this.loadOpenCountry();
     setTimeout(() => {
       that.permissionValidationLoading = false;
     }, 3 * 1000);
   },
+
   methods: {
     renderData(isReset) {
       const that = this;
@@ -934,18 +968,21 @@ export default {
           that.searchLoading = that.listLoading = false;
         });
     },
+
     handleSearch() {
       this.searchLoading = true;
       this.renderData(true);
     },
-    querySearch(queryString, cb) {
-      var restaurants = this.allCountryList;
-      var results = queryString
-        ? restaurants.filter(this.createFilter(queryString))
-        : restaurants;
-      // 调用 callback 返回建议列表的数据
-      cb(results);
-    },
+
+    // querySearch(queryString, cb) {
+    //   var restaurants = this.allCountryList;
+    //   var results = queryString
+    //     ? restaurants.filter(this.createFilter(queryString))
+    //     : restaurants;
+    //   // 调用 callback 返回建议列表的数据
+    //   cb(results);
+    // },
+
     createFilter(queryString) {
       return restaurant => {
         if (
@@ -982,24 +1019,70 @@ export default {
         );
       };
     },
-    handleDelCountryCodeClick() {
-      this.listQuery.countryCode = "";
-      this.countryCodeStr = "";
-      this.handleSearch();
-    },
-    handleCountryCodeClick(item) {
-      this.listQuery.countryCode = item.alphaTwo;
-      this.countryCodeStr = item.phonePrefix + " " + item.countryName;
-      this.handleSearch();
-    },
-    loadCountryAlls() {
+
+    // handleDelCountryCodeClick() {
+    //   this.listQuery.countryCode = "";
+    //   this.countryCodeStr = "";
+    //   this.handleSearch();
+    // },
+
+    // handleCountryCodeClick(item) {
+    //   this.listQuery.countryCode = item.alphaTwo;
+    //   this.countryCodeStr = item.phonePrefix + " " + item.countryName;
+    //   this.handleSearch();
+    // },
+
+    // loadCountryAlls() {
+    //   const that = this;
+    //   getCountryAlls()
+    //     .then(res => {
+    //       that.allCountryList = res.result || {};
+    //     })
+    //     .catch(er => {});
+    // },
+
+    // 获取国家列表
+    loadOpenCountry() {
       const that = this;
-      getCountryAlls()
+
+      that.loadingCountry = true;
+      listPayOpenCountry()
         .then(res => {
-          that.allCountryList = res.result || {};
+          that.loadingCountry = false;
+          that.countryList = res.body || [];
+          that.listQuery.countryCode = "";
+          that.selectedCountry = {};
+          // that.renderData();
         })
-        .catch(er => {});
+        .catch(er => {
+          that.loadingCountry = false;
+          console.error(er);
+        });
     },
+
+    // 选择国家
+    changeCountry(val) {
+      const that = this;
+      console.log("val", val);
+
+      if (!val) {
+        // 如果没有选择国家，清空相关字段
+        that.listQuery.countryCode = "";
+        that.selectedCountry = {};
+      } else {
+        // 选择了一个国家
+        that.selectedCountry =
+          this.countryList.find(item => item.country.alphaTwo === val) || {};
+
+        // 使用传统的方式访问嵌套属性
+        that.listQuery.countryCode = that.selectedCountry.country
+          ? that.selectedCountry.country.alphaTwo
+          : "";
+      }
+
+      this.renderData();
+    },
+
     getAccountText(userInfo) {
       if (!userInfo) {
         return "";